From 5172eede2d68661dddfecf645b3146c3e08d2f54 Mon Sep 17 00:00:00 2001
From: flamboh <oliver.boorstein@gmail.com>
Date: Thu, 8 Oct 2026 23:50:32 -0700
Subject: [PATCH 1/9] chore(web): add shadcn-svelte popover, command, range
 calendar, menu, toggle group, sheet and form primitives

---
 apps/web/package.json                         |   4 +-
 .../src/lib/components/ui/badge/badge.svelte  |  50 ++++++++
 apps/web/src/lib/components/ui/badge/index.ts |   2 +
 .../ui/command/command-dialog.svelte          |  42 +++++++
 .../ui/command/command-empty.svelte           |  17 +++
 .../ui/command/command-group.svelte           |  33 ++++++
 .../ui/command/command-input.svelte           |  36 ++++++
 .../components/ui/command/command-item.svelte |  28 +++++
 .../ui/command/command-link-item.svelte       |  21 ++++
 .../components/ui/command/command-list.svelte |  20 ++++
 .../ui/command/command-loading.svelte         |   7 ++
 .../ui/command/command-separator.svelte       |  17 +++
 .../ui/command/command-shortcut.svelte        |  23 ++++
 .../lib/components/ui/command/command.svelte  |  28 +++++
 .../src/lib/components/ui/command/index.ts    |  37 ++++++
 .../components/ui/dialog/dialog-close.svelte  |  11 ++
 .../ui/dialog/dialog-content.svelte           |  48 ++++++++
 .../ui/dialog/dialog-description.svelte       |  20 ++++
 .../components/ui/dialog/dialog-footer.svelte |  32 +++++
 .../components/ui/dialog/dialog-header.svelte |  20 ++++
 .../ui/dialog/dialog-overlay.svelte           |  20 ++++
 .../components/ui/dialog/dialog-portal.svelte |   7 ++
 .../components/ui/dialog/dialog-title.svelte  |  17 +++
 .../ui/dialog/dialog-trigger.svelte           |  11 ++
 .../lib/components/ui/dialog/dialog.svelte    |   7 ++
 .../web/src/lib/components/ui/dialog/index.ts |  34 ++++++
 .../dropdown-menu-checkbox-group.svelte       |  16 +++
 .../dropdown-menu-checkbox-item.svelte        |  46 +++++++
 .../dropdown-menu-content.svelte              |  31 +++++
 .../dropdown-menu-group-heading.svelte        |  22 ++++
 .../dropdown-menu/dropdown-menu-group.svelte  |   7 ++
 .../dropdown-menu/dropdown-menu-item.svelte   |  27 +++++
 .../dropdown-menu/dropdown-menu-label.svelte  |  24 ++++
 .../dropdown-menu/dropdown-menu-portal.svelte |   7 ++
 .../dropdown-menu-radio-group.svelte          |  16 +++
 .../dropdown-menu-radio-item.svelte           |  36 ++++++
 .../dropdown-menu-separator.svelte            |  17 +++
 .../dropdown-menu-shortcut.svelte             |  23 ++++
 .../dropdown-menu-sub-content.svelte          |  31 +++++
 .../dropdown-menu-sub-trigger.svelte          |  29 +++++
 .../ui/dropdown-menu/dropdown-menu-sub.svelte |   7 ++
 .../dropdown-menu-trigger.svelte              |   7 ++
 .../ui/dropdown-menu/dropdown-menu.svelte     |   7 ++
 .../lib/components/ui/dropdown-menu/index.ts  |  54 +++++++++
 .../lib/components/ui/input-group/index.ts    |  22 ++++
 .../ui/input-group/input-group-addon.svelte   |  53 +++++++++
 .../ui/input-group/input-group-button.svelte  |  49 ++++++++
 .../ui/input-group/input-group-input.svelte   |  23 ++++
 .../ui/input-group/input-group-text.svelte    |  22 ++++
 .../input-group/input-group-textarea.svelte   |  23 ++++
 .../ui/input-group/input-group.svelte         |  24 ++++
 apps/web/src/lib/components/ui/input/index.ts |   7 ++
 .../src/lib/components/ui/input/input.svelte  |  48 ++++++++
 apps/web/src/lib/components/ui/kbd/index.ts   |  10 ++
 .../lib/components/ui/kbd/kbd-group.svelte    |  20 ++++
 apps/web/src/lib/components/ui/kbd/kbd.svelte |  23 ++++
 apps/web/src/lib/components/ui/label/index.ts |   7 ++
 .../src/lib/components/ui/label/label.svelte  |  20 ++++
 .../src/lib/components/ui/popover/index.ts    |  28 +++++
 .../ui/popover/popover-close.svelte           |   7 ++
 .../ui/popover/popover-content.svelte         |  31 +++++
 .../ui/popover/popover-description.svelte     |  20 ++++
 .../ui/popover/popover-header.svelte          |  20 ++++
 .../ui/popover/popover-portal.svelte          |   7 ++
 .../ui/popover/popover-title.svelte           |  15 +++
 .../ui/popover/popover-trigger.svelte         |  17 +++
 .../lib/components/ui/popover/popover.svelte  |   7 ++
 .../lib/components/ui/range-calendar/index.ts |  40 +++++++
 .../range-calendar-caption.svelte             |  76 ++++++++++++
 .../range-calendar/range-calendar-cell.svelte |  19 +++
 .../range-calendar/range-calendar-day.svelte  |  36 ++++++
 .../range-calendar-grid-body.svelte           |   7 ++
 .../range-calendar-grid-head.svelte           |   7 ++
 .../range-calendar-grid-row.svelte            |  12 ++
 .../range-calendar/range-calendar-grid.svelte |  16 +++
 .../range-calendar-head-cell.svelte           |  19 +++
 .../range-calendar-header.svelte              |  19 +++
 .../range-calendar-heading.svelte             |  16 +++
 .../range-calendar-month-select.svelte        |  44 +++++++
 .../range-calendar-month.svelte               |  15 +++
 .../range-calendar-months.svelte              |  19 +++
 .../range-calendar/range-calendar-nav.svelte  |  19 +++
 .../range-calendar-next-button.svelte         |  37 ++++++
 .../range-calendar-prev-button.svelte         |  37 ++++++
 .../range-calendar-year-select.svelte         |  43 +++++++
 .../ui/range-calendar/range-calendar.svelte   | 112 ++++++++++++++++++
 apps/web/src/lib/components/ui/sheet/index.ts |  34 ++++++
 .../components/ui/sheet/sheet-close.svelte    |   7 ++
 .../components/ui/sheet/sheet-content.svelte  |  55 +++++++++
 .../ui/sheet/sheet-description.svelte         |  17 +++
 .../components/ui/sheet/sheet-footer.svelte   |  20 ++++
 .../components/ui/sheet/sheet-header.svelte   |  20 ++++
 .../components/ui/sheet/sheet-overlay.svelte  |  20 ++++
 .../components/ui/sheet/sheet-portal.svelte   |   7 ++
 .../components/ui/sheet/sheet-title.svelte    |  17 +++
 .../components/ui/sheet/sheet-trigger.svelte  |   7 ++
 .../src/lib/components/ui/sheet/sheet.svelte  |   7 ++
 .../src/lib/components/ui/textarea/index.ts   |   7 ++
 .../components/ui/textarea/textarea.svelte    |  23 ++++
 .../lib/components/ui/toggle-group/index.ts   |  10 ++
 .../ui/toggle-group/toggle-group-item.svelte  |  35 ++++++
 .../ui/toggle-group/toggle-group.svelte       |  75 ++++++++++++
 .../web/src/lib/components/ui/toggle/index.ts |  13 ++
 .../lib/components/ui/toggle/toggle.svelte    |  52 ++++++++
 bun.lock                                      |   6 +-
 105 files changed, 2522 insertions(+), 5 deletions(-)
 create mode 100644 apps/web/src/lib/components/ui/badge/badge.svelte
 create mode 100644 apps/web/src/lib/components/ui/badge/index.ts
 create mode 100644 apps/web/src/lib/components/ui/command/command-dialog.svelte
 create mode 100644 apps/web/src/lib/components/ui/command/command-empty.svelte
 create mode 100644 apps/web/src/lib/components/ui/command/command-group.svelte
 create mode 100644 apps/web/src/lib/components/ui/command/command-input.svelte
 create mode 100644 apps/web/src/lib/components/ui/command/command-item.svelte
 create mode 100644 apps/web/src/lib/components/ui/command/command-link-item.svelte
 create mode 100644 apps/web/src/lib/components/ui/command/command-list.svelte
 create mode 100644 apps/web/src/lib/components/ui/command/command-loading.svelte
 create mode 100644 apps/web/src/lib/components/ui/command/command-separator.svelte
 create mode 100644 apps/web/src/lib/components/ui/command/command-shortcut.svelte
 create mode 100644 apps/web/src/lib/components/ui/command/command.svelte
 create mode 100644 apps/web/src/lib/components/ui/command/index.ts
 create mode 100644 apps/web/src/lib/components/ui/dialog/dialog-close.svelte
 create mode 100644 apps/web/src/lib/components/ui/dialog/dialog-content.svelte
 create mode 100644 apps/web/src/lib/components/ui/dialog/dialog-description.svelte
 create mode 100644 apps/web/src/lib/components/ui/dialog/dialog-footer.svelte
 create mode 100644 apps/web/src/lib/components/ui/dialog/dialog-header.svelte
 create mode 100644 apps/web/src/lib/components/ui/dialog/dialog-overlay.svelte
 create mode 100644 apps/web/src/lib/components/ui/dialog/dialog-portal.svelte
 create mode 100644 apps/web/src/lib/components/ui/dialog/dialog-title.svelte
 create mode 100644 apps/web/src/lib/components/ui/dialog/dialog-trigger.svelte
 create mode 100644 apps/web/src/lib/components/ui/dialog/dialog.svelte
 create mode 100644 apps/web/src/lib/components/ui/dialog/index.ts
 create mode 100644 apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte
 create mode 100644 apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
 create mode 100644 apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
 create mode 100644 apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
 create mode 100644 apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte
 create mode 100644 apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
 create mode 100644 apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
 create mode 100644 apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-portal.svelte
 create mode 100644 apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
 create mode 100644 apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
 create mode 100644 apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
 create mode 100644 apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
 create mode 100644 apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
 create mode 100644 apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
 create mode 100644 apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub.svelte
 create mode 100644 apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte
 create mode 100644 apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu.svelte
 create mode 100644 apps/web/src/lib/components/ui/dropdown-menu/index.ts
 create mode 100644 apps/web/src/lib/components/ui/input-group/index.ts
 create mode 100644 apps/web/src/lib/components/ui/input-group/input-group-addon.svelte
 create mode 100644 apps/web/src/lib/components/ui/input-group/input-group-button.svelte
 create mode 100644 apps/web/src/lib/components/ui/input-group/input-group-input.svelte
 create mode 100644 apps/web/src/lib/components/ui/input-group/input-group-text.svelte
 create mode 100644 apps/web/src/lib/components/ui/input-group/input-group-textarea.svelte
 create mode 100644 apps/web/src/lib/components/ui/input-group/input-group.svelte
 create mode 100644 apps/web/src/lib/components/ui/input/index.ts
 create mode 100644 apps/web/src/lib/components/ui/input/input.svelte
 create mode 100644 apps/web/src/lib/components/ui/kbd/index.ts
 create mode 100644 apps/web/src/lib/components/ui/kbd/kbd-group.svelte
 create mode 100644 apps/web/src/lib/components/ui/kbd/kbd.svelte
 create mode 100644 apps/web/src/lib/components/ui/label/index.ts
 create mode 100644 apps/web/src/lib/components/ui/label/label.svelte
 create mode 100644 apps/web/src/lib/components/ui/popover/index.ts
 create mode 100644 apps/web/src/lib/components/ui/popover/popover-close.svelte
 create mode 100644 apps/web/src/lib/components/ui/popover/popover-content.svelte
 create mode 100644 apps/web/src/lib/components/ui/popover/popover-description.svelte
 create mode 100644 apps/web/src/lib/components/ui/popover/popover-header.svelte
 create mode 100644 apps/web/src/lib/components/ui/popover/popover-portal.svelte
 create mode 100644 apps/web/src/lib/components/ui/popover/popover-title.svelte
 create mode 100644 apps/web/src/lib/components/ui/popover/popover-trigger.svelte
 create mode 100644 apps/web/src/lib/components/ui/popover/popover.svelte
 create mode 100644 apps/web/src/lib/components/ui/range-calendar/index.ts
 create mode 100644 apps/web/src/lib/components/ui/range-calendar/range-calendar-caption.svelte
 create mode 100644 apps/web/src/lib/components/ui/range-calendar/range-calendar-cell.svelte
 create mode 100644 apps/web/src/lib/components/ui/range-calendar/range-calendar-day.svelte
 create mode 100644 apps/web/src/lib/components/ui/range-calendar/range-calendar-grid-body.svelte
 create mode 100644 apps/web/src/lib/components/ui/range-calendar/range-calendar-grid-head.svelte
 create mode 100644 apps/web/src/lib/components/ui/range-calendar/range-calendar-grid-row.svelte
 create mode 100644 apps/web/src/lib/components/ui/range-calendar/range-calendar-grid.svelte
 create mode 100644 apps/web/src/lib/components/ui/range-calendar/range-calendar-head-cell.svelte
 create mode 100644 apps/web/src/lib/components/ui/range-calendar/range-calendar-header.svelte
 create mode 100644 apps/web/src/lib/components/ui/range-calendar/range-calendar-heading.svelte
 create mode 100644 apps/web/src/lib/components/ui/range-calendar/range-calendar-month-select.svelte
 create mode 100644 apps/web/src/lib/components/ui/range-calendar/range-calendar-month.svelte
 create mode 100644 apps/web/src/lib/components/ui/range-calendar/range-calendar-months.svelte
 create mode 100644 apps/web/src/lib/components/ui/range-calendar/range-calendar-nav.svelte
 create mode 100644 apps/web/src/lib/components/ui/range-calendar/range-calendar-next-button.svelte
 create mode 100644 apps/web/src/lib/components/ui/range-calendar/range-calendar-prev-button.svelte
 create mode 100644 apps/web/src/lib/components/ui/range-calendar/range-calendar-year-select.svelte
 create mode 100644 apps/web/src/lib/components/ui/range-calendar/range-calendar.svelte
 create mode 100644 apps/web/src/lib/components/ui/sheet/index.ts
 create mode 100644 apps/web/src/lib/components/ui/sheet/sheet-close.svelte
 create mode 100644 apps/web/src/lib/components/ui/sheet/sheet-content.svelte
 create mode 100644 apps/web/src/lib/components/ui/sheet/sheet-description.svelte
 create mode 100644 apps/web/src/lib/components/ui/sheet/sheet-footer.svelte
 create mode 100644 apps/web/src/lib/components/ui/sheet/sheet-header.svelte
 create mode 100644 apps/web/src/lib/components/ui/sheet/sheet-overlay.svelte
 create mode 100644 apps/web/src/lib/components/ui/sheet/sheet-portal.svelte
 create mode 100644 apps/web/src/lib/components/ui/sheet/sheet-title.svelte
 create mode 100644 apps/web/src/lib/components/ui/sheet/sheet-trigger.svelte
 create mode 100644 apps/web/src/lib/components/ui/sheet/sheet.svelte
 create mode 100644 apps/web/src/lib/components/ui/textarea/index.ts
 create mode 100644 apps/web/src/lib/components/ui/textarea/textarea.svelte
 create mode 100644 apps/web/src/lib/components/ui/toggle-group/index.ts
 create mode 100644 apps/web/src/lib/components/ui/toggle-group/toggle-group-item.svelte
 create mode 100644 apps/web/src/lib/components/ui/toggle-group/toggle-group.svelte
 create mode 100644 apps/web/src/lib/components/ui/toggle/index.ts
 create mode 100644 apps/web/src/lib/components/ui/toggle/toggle.svelte

diff --git a/apps/web/package.json b/apps/web/package.json
index 9d24911..bec8266 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -34,7 +34,7 @@
 		"@types/better-sqlite3": "^7.6.13",
 		"@types/d3-scale": "4.0.9",
 		"@types/node": "^22.15.17",
-		"bits-ui": "^2.16.3",
+		"bits-ui": "^2.18.0",
 		"clsx": "^2.1.1",
 		"eslint": "^9.18.0",
 		"eslint-config-prettier": "^10.0.1",
@@ -56,7 +56,7 @@
 		"vitest": "^5.0.1"
 	},
 	"dependencies": {
-		"@lucide/svelte": "^1.33.0",
+		"@lucide/svelte": "^1.54.0",
 		"@tanstack/charts": "1.0.0",
 		"better-sqlite3": "^12.6.2",
 		"d3-scale": "4.0.2",
diff --git a/apps/web/src/lib/components/ui/badge/badge.svelte b/apps/web/src/lib/components/ui/badge/badge.svelte
new file mode 100644
index 0000000..c09e233
--- /dev/null
+++ b/apps/web/src/lib/components/ui/badge/badge.svelte
@@ -0,0 +1,50 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from 'tailwind-variants';
+
+	export const badgeVariants = tv({
+		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! group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none',
+		variants: {
+			variant: {
+				default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
+				secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
+				destructive:
+					'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',
+				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: {
+			variant: 'default'
+		}
+	});
+
+	export type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from '#lib/utils.ts';
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		href,
+		class: className,
+		variant = 'default',
+		children,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		variant?: BadgeVariant;
+	} = $props();
+</script>
+
+<svelte:element
+	this={href ? 'a' : 'span'}
+	bind:this={ref}
+	data-slot="badge"
+	{href}
+	class={cn(badgeVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</svelte:element>
diff --git a/apps/web/src/lib/components/ui/badge/index.ts b/apps/web/src/lib/components/ui/badge/index.ts
new file mode 100644
index 0000000..f05fb87
--- /dev/null
+++ b/apps/web/src/lib/components/ui/badge/index.ts
@@ -0,0 +1,2 @@
+export { default as Badge } from './badge.svelte';
+export { badgeVariants, type BadgeVariant } from './badge.svelte';
diff --git a/apps/web/src/lib/components/ui/command/command-dialog.svelte b/apps/web/src/lib/components/ui/command/command-dialog.svelte
new file mode 100644
index 0000000..75faea4
--- /dev/null
+++ b/apps/web/src/lib/components/ui/command/command-dialog.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import * as Dialog from '#lib/components/ui/dialog/index.ts';
+	import { cn, type WithoutChildrenOrChild } from '#lib/utils.ts';
+	import Command from './command.svelte';
+	import type { Command as CommandPrimitive, Dialog as DialogPrimitive } from 'bits-ui';
+	import type { Snippet } from 'svelte';
+
+	let {
+		open = $bindable(false),
+		ref = $bindable(null),
+		value = $bindable(''),
+		title = 'Command Palette',
+		description = 'Search for a command to run...',
+		showCloseButton = false,
+		portalProps,
+		children,
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<DialogPrimitive.RootProps> &
+		WithoutChildrenOrChild<CommandPrimitive.RootProps> & {
+			portalProps?: DialogPrimitive.PortalProps;
+			children: Snippet;
+			title?: string;
+			description?: string;
+			showCloseButton?: boolean;
+			class?: string;
+		} = $props();
+</script>
+
+<Dialog.Root bind:open {...restProps}>
+	<Dialog.Header class="sr-only">
+		<Dialog.Title>{title}</Dialog.Title>
+		<Dialog.Description>{description}</Dialog.Description>
+	</Dialog.Header>
+	<Dialog.Content
+		class={cn('top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0', className)}
+		{showCloseButton}
+		{portalProps}
+	>
+		<Command {...restProps} bind:value bind:ref {children} />
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/apps/web/src/lib/components/ui/command/command-empty.svelte b/apps/web/src/lib/components/ui/command/command-empty.svelte
new file mode 100644
index 0000000..f6ed1b8
--- /dev/null
+++ b/apps/web/src/lib/components/ui/command/command-empty.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import { cn } from '#lib/utils.ts';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.EmptyProps = $props();
+</script>
+
+<CommandPrimitive.Empty
+	bind:ref
+	data-slot="command-empty"
+	class={cn('py-6 text-center text-sm', className)}
+	{...restProps}
+/>
diff --git a/apps/web/src/lib/components/ui/command/command-group.svelte b/apps/web/src/lib/components/ui/command/command-group.svelte
new file mode 100644
index 0000000..05effae
--- /dev/null
+++ b/apps/web/src/lib/components/ui/command/command-group.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { Command as CommandPrimitive, useId } from 'bits-ui';
+	import { cn } from '#lib/utils.ts';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		heading,
+		value,
+		...restProps
+	}: CommandPrimitive.GroupProps & {
+		heading?: string;
+	} = $props();
+</script>
+
+<CommandPrimitive.Group
+	bind:ref
+	data-slot="command-group"
+	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}
+>
+	{#if heading}
+		<CommandPrimitive.GroupHeading class="text-muted-foreground px-2 py-1.5 text-xs font-medium">
+			{heading}
+		</CommandPrimitive.GroupHeading>
+	{/if}
+	<CommandPrimitive.GroupItems {children} />
+</CommandPrimitive.Group>
diff --git a/apps/web/src/lib/components/ui/command/command-input.svelte b/apps/web/src/lib/components/ui/command/command-input.svelte
new file mode 100644
index 0000000..d624058
--- /dev/null
+++ b/apps/web/src/lib/components/ui/command/command-input.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import * as InputGroup from '#lib/components/ui/input-group/index.ts';
+	import SearchIcon from '@lucide/svelte/icons/search';
+	import { cn } from '#lib/utils.ts';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value = $bindable(''),
+		...restProps
+	}: CommandPrimitive.InputProps = $props();
+</script>
+
+<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/apps/web/src/lib/components/ui/command/command-item.svelte b/apps/web/src/lib/components/ui/command/command-item.svelte
new file mode 100644
index 0000000..a5a28df
--- /dev/null
+++ b/apps/web/src/lib/components/ui/command/command-item.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import { cn } from '#lib/utils.ts';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: CommandPrimitive.ItemProps = $props();
+</script>
+
+<CommandPrimitive.Item
+	bind:ref
+	data-slot="command-item"
+	class={cn(
+		"data-selected:bg-muted data-selected:text-foreground data-selected:**:[svg]:text-foreground group/command-item 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! [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		'data-disabled:pointer-events-none data-disabled:opacity-50',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<CheckIcon
+		class="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/apps/web/src/lib/components/ui/command/command-link-item.svelte b/apps/web/src/lib/components/ui/command/command-link-item.svelte
new file mode 100644
index 0000000..7b61497
--- /dev/null
+++ b/apps/web/src/lib/components/ui/command/command-link-item.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import { cn } from '#lib/utils.ts';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.LinkItemProps = $props();
+</script>
+
+<CommandPrimitive.LinkItem
+	bind:ref
+	data-slot="command-item"
+	class={cn(
+		"data-selected:bg-muted data-selected:text-foreground data-selected:**:[svg]:text-foreground group/command-item 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! [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		'data-disabled:pointer-events-none data-disabled:opacity-50',
+		className
+	)}
+	{...restProps}
+/>
diff --git a/apps/web/src/lib/components/ui/command/command-list.svelte b/apps/web/src/lib/components/ui/command/command-list.svelte
new file mode 100644
index 0000000..9e23fc8
--- /dev/null
+++ b/apps/web/src/lib/components/ui/command/command-list.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import { cn } from '#lib/utils.ts';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.ListProps = $props();
+</script>
+
+<CommandPrimitive.List
+	bind:ref
+	data-slot="command-list"
+	class={cn(
+		'no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none',
+		className
+	)}
+	{...restProps}
+/>
diff --git a/apps/web/src/lib/components/ui/command/command-loading.svelte b/apps/web/src/lib/components/ui/command/command-loading.svelte
new file mode 100644
index 0000000..0aaf5c3
--- /dev/null
+++ b/apps/web/src/lib/components/ui/command/command-loading.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: CommandPrimitive.LoadingProps = $props();
+</script>
+
+<CommandPrimitive.Loading bind:ref {...restProps} />
diff --git a/apps/web/src/lib/components/ui/command/command-separator.svelte b/apps/web/src/lib/components/ui/command/command-separator.svelte
new file mode 100644
index 0000000..3208ad2
--- /dev/null
+++ b/apps/web/src/lib/components/ui/command/command-separator.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import { cn } from '#lib/utils.ts';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.SeparatorProps = $props();
+</script>
+
+<CommandPrimitive.Separator
+	bind:ref
+	data-slot="command-separator"
+	class={cn('bg-border -mx-1 h-px w-auto', className)}
+	{...restProps}
+/>
diff --git a/apps/web/src/lib/components/ui/command/command-shortcut.svelte b/apps/web/src/lib/components/ui/command/command-shortcut.svelte
new file mode 100644
index 0000000..fc4583b
--- /dev/null
+++ b/apps/web/src/lib/components/ui/command/command-shortcut.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '#lib/utils.ts';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="command-shortcut"
+	class={cn(
+		'text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>
diff --git a/apps/web/src/lib/components/ui/command/command.svelte b/apps/web/src/lib/components/ui/command/command.svelte
new file mode 100644
index 0000000..74bc6fa
--- /dev/null
+++ b/apps/web/src/lib/components/ui/command/command.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import { cn } from '#lib/utils.ts';
+
+	export type CommandRootApi = CommandPrimitive.Root;
+
+	let {
+		api = $bindable(null),
+		ref = $bindable(null),
+		value = $bindable(''),
+		class: className,
+		...restProps
+	}: CommandPrimitive.RootProps & {
+		api?: CommandRootApi | null;
+	} = $props();
+</script>
+
+<CommandPrimitive.Root
+	bind:this={api}
+	bind:value
+	bind:ref
+	data-slot="command"
+	class={cn(
+		'bg-popover text-popover-foreground flex size-full flex-col overflow-hidden rounded-xl! p-1',
+		className
+	)}
+	{...restProps}
+/>
diff --git a/apps/web/src/lib/components/ui/command/index.ts b/apps/web/src/lib/components/ui/command/index.ts
new file mode 100644
index 0000000..15ed82b
--- /dev/null
+++ b/apps/web/src/lib/components/ui/command/index.ts
@@ -0,0 +1,37 @@
+import Dialog from './command-dialog.svelte';
+import Empty from './command-empty.svelte';
+import Group from './command-group.svelte';
+import Input from './command-input.svelte';
+import Item from './command-item.svelte';
+import LinkItem from './command-link-item.svelte';
+import List from './command-list.svelte';
+import Loading from './command-loading.svelte';
+import Separator from './command-separator.svelte';
+import Shortcut from './command-shortcut.svelte';
+import Root from './command.svelte';
+
+export {
+	Root,
+	Dialog,
+	Empty,
+	Group,
+	Item,
+	LinkItem,
+	Input,
+	List,
+	Separator,
+	Shortcut,
+	Loading,
+	//
+	Root as Command,
+	Dialog as CommandDialog,
+	Empty as CommandEmpty,
+	Group as CommandGroup,
+	Item as CommandItem,
+	LinkItem as CommandLinkItem,
+	Input as CommandInput,
+	List as CommandList,
+	Separator as CommandSeparator,
+	Shortcut as CommandShortcut,
+	Loading as CommandLoading
+};
diff --git a/apps/web/src/lib/components/ui/dialog/dialog-close.svelte b/apps/web/src/lib/components/ui/dialog/dialog-close.svelte
new file mode 100644
index 0000000..4141704
--- /dev/null
+++ b/apps/web/src/lib/components/ui/dialog/dialog-close.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+
+	let {
+		ref = $bindable(null),
+		type = 'button',
+		...restProps
+	}: DialogPrimitive.CloseProps = $props();
+</script>
+
+<DialogPrimitive.Close bind:ref data-slot="dialog-close" {type} {...restProps} />
diff --git a/apps/web/src/lib/components/ui/dialog/dialog-content.svelte b/apps/web/src/lib/components/ui/dialog/dialog-content.svelte
new file mode 100644
index 0000000..2fc3db3
--- /dev/null
+++ b/apps/web/src/lib/components/ui/dialog/dialog-content.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import XIcon from '@lucide/svelte/icons/x';
+	import { Button } from '#lib/components/ui/button/index.ts';
+	import { cn, type WithoutChildrenOrChild } from '#lib/utils.ts';
+	import * as Dialog from './index.js';
+	import DialogPortal from './dialog-portal.svelte';
+	import type { Snippet } from 'svelte';
+	import type { ComponentProps } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		portalProps,
+		children,
+		showCloseButton = true,
+		...restProps
+	}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DialogPortal>>;
+		children: Snippet;
+		showCloseButton?: boolean;
+	} = $props();
+</script>
+
+<DialogPortal {...portalProps}>
+	<Dialog.Overlay />
+	<DialogPrimitive.Content
+		bind:ref
+		data-slot="dialog-content"
+		class={cn(
+			'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 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%_-_2rem)] -translate-x-1/2 -translate-y-1/2 gap-6 rounded-xl p-6 text-sm ring-1 duration-100 outline-none sm:max-w-md',
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		{#if showCloseButton}
+			<DialogPrimitive.Close data-slot="dialog-close">
+				{#snippet child({ props })}
+					<Button variant="ghost" class="absolute top-4 right-4" size="icon-sm" {...props}>
+						<XIcon />
+						<span class="sr-only">Close</span>
+					</Button>
+				{/snippet}
+			</DialogPrimitive.Close>
+		{/if}
+	</DialogPrimitive.Content>
+</DialogPortal>
diff --git a/apps/web/src/lib/components/ui/dialog/dialog-description.svelte b/apps/web/src/lib/components/ui/dialog/dialog-description.svelte
new file mode 100644
index 0000000..356b2da
--- /dev/null
+++ b/apps/web/src/lib/components/ui/dialog/dialog-description.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import { cn } from '#lib/utils.ts';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.DescriptionProps = $props();
+</script>
+
+<DialogPrimitive.Description
+	bind:ref
+	data-slot="dialog-description"
+	class={cn(
+		'text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3',
+		className
+	)}
+	{...restProps}
+/>
diff --git a/apps/web/src/lib/components/ui/dialog/dialog-footer.svelte b/apps/web/src/lib/components/ui/dialog/dialog-footer.svelte
new file mode 100644
index 0000000..f55b640
--- /dev/null
+++ b/apps/web/src/lib/components/ui/dialog/dialog-footer.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import { Button } from '#lib/components/ui/button/index.ts';
+	import { cn, type WithElementRef } from '#lib/utils.ts';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		showCloseButton = false,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		showCloseButton?: boolean;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dialog-footer"
+	class={cn('flex flex-col-reverse gap-2 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/apps/web/src/lib/components/ui/dialog/dialog-header.svelte b/apps/web/src/lib/components/ui/dialog/dialog-header.svelte
new file mode 100644
index 0000000..50a27a4
--- /dev/null
+++ b/apps/web/src/lib/components/ui/dialog/dialog-header.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '#lib/utils.ts';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dialog-header"
+	class={cn('flex flex-col gap-2', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/apps/web/src/lib/components/ui/dialog/dialog-overlay.svelte b/apps/web/src/lib/components/ui/dialog/dialog-overlay.svelte
new file mode 100644
index 0000000..5d62971
--- /dev/null
+++ b/apps/web/src/lib/components/ui/dialog/dialog-overlay.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import { cn } from '#lib/utils.ts';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.OverlayProps = $props();
+</script>
+
+<DialogPrimitive.Overlay
+	bind:ref
+	data-slot="dialog-overlay"
+	class={cn(
+		'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs',
+		className
+	)}
+	{...restProps}
+/>
diff --git a/apps/web/src/lib/components/ui/dialog/dialog-portal.svelte b/apps/web/src/lib/components/ui/dialog/dialog-portal.svelte
new file mode 100644
index 0000000..a60a85e
--- /dev/null
+++ b/apps/web/src/lib/components/ui/dialog/dialog-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+
+	let { ...restProps }: DialogPrimitive.PortalProps = $props();
+</script>
+
+<DialogPrimitive.Portal {...restProps} />
diff --git a/apps/web/src/lib/components/ui/dialog/dialog-title.svelte b/apps/web/src/lib/components/ui/dialog/dialog-title.svelte
new file mode 100644
index 0000000..9042c60
--- /dev/null
+++ b/apps/web/src/lib/components/ui/dialog/dialog-title.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import { cn } from '#lib/utils.ts';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.TitleProps = $props();
+</script>
+
+<DialogPrimitive.Title
+	bind:ref
+	data-slot="dialog-title"
+	class={cn('leading-none font-medium', className)}
+	{...restProps}
+/>
diff --git a/apps/web/src/lib/components/ui/dialog/dialog-trigger.svelte b/apps/web/src/lib/components/ui/dialog/dialog-trigger.svelte
new file mode 100644
index 0000000..9264541
--- /dev/null
+++ b/apps/web/src/lib/components/ui/dialog/dialog-trigger.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+
+	let {
+		ref = $bindable(null),
+		type = 'button',
+		...restProps
+	}: DialogPrimitive.TriggerProps = $props();
+</script>
+
+<DialogPrimitive.Trigger bind:ref data-slot="dialog-trigger" {type} {...restProps} />
diff --git a/apps/web/src/lib/components/ui/dialog/dialog.svelte b/apps/web/src/lib/components/ui/dialog/dialog.svelte
new file mode 100644
index 0000000..c1444b2
--- /dev/null
+++ b/apps/web/src/lib/components/ui/dialog/dialog.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+
+	let { open = $bindable(false), ...restProps }: DialogPrimitive.RootProps = $props();
+</script>
+
+<DialogPrimitive.Root bind:open {...restProps} />
diff --git a/apps/web/src/lib/components/ui/dialog/index.ts b/apps/web/src/lib/components/ui/dialog/index.ts
new file mode 100644
index 0000000..c8c6532
--- /dev/null
+++ b/apps/web/src/lib/components/ui/dialog/index.ts
@@ -0,0 +1,34 @@
+import Close from './dialog-close.svelte';
+import Content from './dialog-content.svelte';
+import Description from './dialog-description.svelte';
+import Footer from './dialog-footer.svelte';
+import Header from './dialog-header.svelte';
+import Overlay from './dialog-overlay.svelte';
+import Portal from './dialog-portal.svelte';
+import Title from './dialog-title.svelte';
+import Trigger from './dialog-trigger.svelte';
+import Root from './dialog.svelte';
+
+export {
+	Root,
+	Title,
+	Portal,
+	Footer,
+	Header,
+	Trigger,
+	Overlay,
+	Content,
+	Description,
+	Close,
+	//
+	Root as Dialog,
+	Title as DialogTitle,
+	Portal as DialogPortal,
+	Footer as DialogFooter,
+	Header as DialogHeader,
+	Trigger as DialogTrigger,
+	Overlay as DialogOverlay,
+	Content as DialogContent,
+	Description as DialogDescription,
+	Close as DialogClose
+};
diff --git a/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte
new file mode 100644
index 0000000..c0bf94b
--- /dev/null
+++ b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable([]),
+		...restProps
+	}: DropdownMenuPrimitive.CheckboxGroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.CheckboxGroup
+	bind:ref
+	bind:value
+	data-slot="dropdown-menu-checkbox-group"
+	{...restProps}
+/>
diff --git a/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
new file mode 100644
index 0000000..5c34b4e
--- /dev/null
+++ b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import MinusIcon from '@lucide/svelte/icons/minus';
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import { cn, type WithoutChildrenOrChild } from '#lib/utils.ts';
+	import type { Snippet } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		class: className,
+		children: childrenProp,
+		closeOnSelect = false,
+		...restProps
+	}: WithoutChildrenOrChild<DropdownMenuPrimitive.CheckboxItemProps> & {
+		children?: Snippet;
+	} = $props();
+</script>
+
+<DropdownMenuPrimitive.CheckboxItem
+	bind:ref
+	{closeOnSelect}
+	bind:checked
+	bind:indeterminate
+	data-slot="dropdown-menu-checkbox-item"
+	class={cn(
+		"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ checked, indeterminate })}
+		<span
+			class="pointer-events-none absolute right-2 flex items-center justify-center"
+			data-slot="dropdown-menu-checkbox-item-indicator"
+		>
+			{#if indeterminate}
+				<MinusIcon />
+			{:else if checked}
+				<CheckIcon />
+			{/if}
+		</span>
+		{@render childrenProp?.()}
+	{/snippet}
+</DropdownMenuPrimitive.CheckboxItem>
diff --git a/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
new file mode 100644
index 0000000..35d0687
--- /dev/null
+++ b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '#lib/utils.ts';
+	import DropdownMenuPortal from './dropdown-menu-portal.svelte';
+	import type { ComponentProps } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		sideOffset = 4,
+		align = 'start',
+		portalProps,
+		class: className,
+		...restProps
+	}: DropdownMenuPrimitive.ContentProps & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DropdownMenuPortal>>;
+	} = $props();
+</script>
+
+<DropdownMenuPortal {...portalProps}>
+	<DropdownMenuPrimitive.Content
+		bind:ref
+		data-slot="dropdown-menu-content"
+		{sideOffset}
+		{align}
+		class={cn(
+			'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 z-50 max-h-(--bits-dropdown-menu-content-available-height) w-(--bits-dropdown-menu-anchor-width) min-w-32 origin-(--bits-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md p-1 shadow-md ring-1 duration-100 data-closed:overflow-hidden',
+			className
+		)}
+		{...restProps}
+	/>
+</DropdownMenuPortal>
diff --git a/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
new file mode 100644
index 0000000..94c4686
--- /dev/null
+++ b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { cn } from '#lib/utils.ts';
+	import type { ComponentProps } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		...restProps
+	}: ComponentProps<typeof DropdownMenuPrimitive.GroupHeading> & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<DropdownMenuPrimitive.GroupHeading
+	bind:ref
+	data-slot="dropdown-menu-group-heading"
+	data-inset={inset}
+	class={cn('text-muted-foreground px-2 py-1.5 text-xs font-medium data-inset:pl-8', className)}
+	{...restProps}
+/>
diff --git a/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte
new file mode 100644
index 0000000..261ab7e
--- /dev/null
+++ b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: DropdownMenuPrimitive.GroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Group bind:ref data-slot="dropdown-menu-group" {...restProps} />
diff --git a/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
new file mode 100644
index 0000000..33fab89
--- /dev/null
+++ b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { cn } from '#lib/utils.ts';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		variant = 'default',
+		...restProps
+	}: DropdownMenuPrimitive.ItemProps & {
+		inset?: boolean;
+		variant?: 'default' | 'destructive';
+	} = $props();
+</script>
+
+<DropdownMenuPrimitive.Item
+	bind:ref
+	data-slot="dropdown-menu-item"
+	data-inset={inset}
+	data-variant={variant}
+	class={cn(
+		"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 group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
new file mode 100644
index 0000000..16fdbca
--- /dev/null
+++ b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '#lib/utils.ts';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dropdown-menu-label"
+	data-inset={inset}
+	class={cn('text-muted-foreground px-2 py-1.5 text-xs font-medium data-inset:pl-8', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-portal.svelte b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-portal.svelte
new file mode 100644
index 0000000..089a25c
--- /dev/null
+++ b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+	let { ...restProps }: DropdownMenuPrimitive.PortalProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Portal {...restProps} />
diff --git a/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
new file mode 100644
index 0000000..3e98749
--- /dev/null
+++ b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		...restProps
+	}: DropdownMenuPrimitive.RadioGroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.RadioGroup
+	bind:ref
+	bind:value
+	data-slot="dropdown-menu-radio-group"
+	{...restProps}
+/>
diff --git a/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
new file mode 100644
index 0000000..8782efd
--- /dev/null
+++ b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import { cn, type WithoutChild } from '#lib/utils.ts';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children: childrenProp,
+		closeOnSelect = false,
+		...restProps
+	}: WithoutChild<DropdownMenuPrimitive.RadioItemProps> = $props();
+</script>
+
+<DropdownMenuPrimitive.RadioItem
+	bind:ref
+	{closeOnSelect}
+	data-slot="dropdown-menu-radio-item"
+	class={cn(
+		"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ checked })}
+		<span
+			class="pointer-events-none absolute right-2 flex items-center justify-center"
+			data-slot="dropdown-menu-radio-item-indicator"
+		>
+			{#if checked}
+				<CheckIcon />
+			{/if}
+		</span>
+		{@render childrenProp?.({ checked })}
+	{/snippet}
+</DropdownMenuPrimitive.RadioItem>
diff --git a/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
new file mode 100644
index 0000000..4aea4f4
--- /dev/null
+++ b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { cn } from '#lib/utils.ts';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DropdownMenuPrimitive.SeparatorProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Separator
+	bind:ref
+	data-slot="dropdown-menu-separator"
+	class={cn('bg-border -mx-1 my-1 h-px', className)}
+	{...restProps}
+/>
diff --git a/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
new file mode 100644
index 0000000..fb9a938
--- /dev/null
+++ b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '#lib/utils.ts';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="dropdown-menu-shortcut"
+	class={cn(
+		'text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>
diff --git a/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
new file mode 100644
index 0000000..91fa5c3
--- /dev/null
+++ b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '#lib/utils.ts';
+	import DropdownMenuPortal from './dropdown-menu-portal.svelte';
+	import type { ComponentProps } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		align = 'start',
+		alignOffset = -3,
+		portalProps,
+		...restProps
+	}: DropdownMenuPrimitive.SubContentProps & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DropdownMenuPortal>>;
+	} = $props();
+</script>
+
+<DropdownMenuPortal {...portalProps}>
+	<DropdownMenuPrimitive.SubContent
+		bind:ref
+		data-slot="dropdown-menu-sub-content"
+		{align}
+		{alignOffset}
+		class={cn(
+			'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 z-50 min-w-[96px] origin-(--bits-dropdown-menu-content-transform-origin) overflow-hidden rounded-md p-1 shadow-lg ring-1 duration-100',
+			className
+		)}
+		{...restProps}
+	/>
+</DropdownMenuPortal>
diff --git a/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
new file mode 100644
index 0000000..1df7c1e
--- /dev/null
+++ b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+	import { cn } from '#lib/utils.ts';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		children,
+		...restProps
+	}: DropdownMenuPrimitive.SubTriggerProps & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<DropdownMenuPrimitive.SubTrigger
+	bind:ref
+	data-slot="dropdown-menu-sub-trigger"
+	data-inset={inset}
+	class={cn(
+		"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ChevronRightIcon class="cn-rtl-flip ml-auto" />
+</DropdownMenuPrimitive.SubTrigger>
diff --git a/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub.svelte b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub.svelte
new file mode 100644
index 0000000..9cfa3b8
--- /dev/null
+++ b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+	let { open = $bindable(false), ...restProps }: DropdownMenuPrimitive.SubProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Sub bind:open {...restProps} />
diff --git a/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte
new file mode 100644
index 0000000..032b645
--- /dev/null
+++ b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: DropdownMenuPrimitive.TriggerProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Trigger bind:ref data-slot="dropdown-menu-trigger" {...restProps} />
diff --git a/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu.svelte b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu.svelte
new file mode 100644
index 0000000..fbbb790
--- /dev/null
+++ b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+	let { open = $bindable(false), ...restProps }: DropdownMenuPrimitive.RootProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Root bind:open {...restProps} />
diff --git a/apps/web/src/lib/components/ui/dropdown-menu/index.ts b/apps/web/src/lib/components/ui/dropdown-menu/index.ts
new file mode 100644
index 0000000..c26b6a8
--- /dev/null
+++ b/apps/web/src/lib/components/ui/dropdown-menu/index.ts
@@ -0,0 +1,54 @@
+import CheckboxGroup from './dropdown-menu-checkbox-group.svelte';
+import CheckboxItem from './dropdown-menu-checkbox-item.svelte';
+import Content from './dropdown-menu-content.svelte';
+import GroupHeading from './dropdown-menu-group-heading.svelte';
+import Group from './dropdown-menu-group.svelte';
+import Item from './dropdown-menu-item.svelte';
+import Label from './dropdown-menu-label.svelte';
+import Portal from './dropdown-menu-portal.svelte';
+import RadioGroup from './dropdown-menu-radio-group.svelte';
+import RadioItem from './dropdown-menu-radio-item.svelte';
+import Separator from './dropdown-menu-separator.svelte';
+import Shortcut from './dropdown-menu-shortcut.svelte';
+import SubContent from './dropdown-menu-sub-content.svelte';
+import SubTrigger from './dropdown-menu-sub-trigger.svelte';
+import Sub from './dropdown-menu-sub.svelte';
+import Trigger from './dropdown-menu-trigger.svelte';
+import Root from './dropdown-menu.svelte';
+
+export {
+	CheckboxGroup,
+	CheckboxItem,
+	Content,
+	Portal,
+	Root as DropdownMenu,
+	CheckboxGroup as DropdownMenuCheckboxGroup,
+	CheckboxItem as DropdownMenuCheckboxItem,
+	Content as DropdownMenuContent,
+	Portal as DropdownMenuPortal,
+	Group as DropdownMenuGroup,
+	Item as DropdownMenuItem,
+	Label as DropdownMenuLabel,
+	RadioGroup as DropdownMenuRadioGroup,
+	RadioItem as DropdownMenuRadioItem,
+	Separator as DropdownMenuSeparator,
+	Shortcut as DropdownMenuShortcut,
+	Sub as DropdownMenuSub,
+	SubContent as DropdownMenuSubContent,
+	SubTrigger as DropdownMenuSubTrigger,
+	Trigger as DropdownMenuTrigger,
+	GroupHeading as DropdownMenuGroupHeading,
+	Group,
+	GroupHeading,
+	Item,
+	Label,
+	RadioGroup,
+	RadioItem,
+	Root,
+	Separator,
+	Shortcut,
+	Sub,
+	SubContent,
+	SubTrigger,
+	Trigger
+};
diff --git a/apps/web/src/lib/components/ui/input-group/index.ts b/apps/web/src/lib/components/ui/input-group/index.ts
new file mode 100644
index 0000000..a1fd3f3
--- /dev/null
+++ b/apps/web/src/lib/components/ui/input-group/index.ts
@@ -0,0 +1,22 @@
+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';
+import Root from './input-group.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/apps/web/src/lib/components/ui/input-group/input-group-addon.svelte b/apps/web/src/lib/components/ui/input-group/input-group-addon.svelte
new file mode 100644
index 0000000..2d03d34
--- /dev/null
+++ b/apps/web/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-1 has-[>kbd]:ml-[-0.15rem] order-first',
+				'inline-end': 'pr-2 has-[>button]:-mr-1 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.ts';
+	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/apps/web/src/lib/components/ui/input-group/input-group-button.svelte b/apps/web/src/lib/components/ui/input-group/input-group-button.svelte
new file mode 100644
index 0000000..0d9e831
--- /dev/null
+++ b/apps/web/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)_-_5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+				sm: '',
+				'icon-xs': 'size-6 rounded-[calc(var(--radius)_-_5px)] 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 { Button } from '#lib/components/ui/button/index.ts';
+	import { cn } from '#lib/utils.ts';
+	import type { ComponentProps } from 'svelte';
+
+	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/apps/web/src/lib/components/ui/input-group/input-group-input.svelte b/apps/web/src/lib/components/ui/input-group/input-group-input.svelte
new file mode 100644
index 0000000..d663b71
--- /dev/null
+++ b/apps/web/src/lib/components/ui/input-group/input-group-input.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Input } from '#lib/components/ui/input/index.ts';
+	import { cn } from '#lib/utils.ts';
+	import type { ComponentProps } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		...props
+	}: ComponentProps<typeof Input> = $props();
+</script>
+
+<Input
+	bind:ref
+	data-slot="input-group-control"
+	class={cn(
+		'flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent',
+		className
+	)}
+	bind:value
+	{...props}
+/>
diff --git a/apps/web/src/lib/components/ui/input-group/input-group-text.svelte b/apps/web/src/lib/components/ui/input-group/input-group-text.svelte
new file mode 100644
index 0000000..97d7d30
--- /dev/null
+++ b/apps/web/src/lib/components/ui/input-group/input-group-text.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '#lib/utils.ts';
+	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 flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>
diff --git a/apps/web/src/lib/components/ui/input-group/input-group-textarea.svelte b/apps/web/src/lib/components/ui/input-group/input-group-textarea.svelte
new file mode 100644
index 0000000..aad6314
--- /dev/null
+++ b/apps/web/src/lib/components/ui/input-group/input-group-textarea.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Textarea } from '#lib/components/ui/textarea/index.ts';
+	import { cn } from '#lib/utils.ts';
+	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(
+		'flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent',
+		className
+	)}
+	bind:value
+	{...props}
+/>
diff --git a/apps/web/src/lib/components/ui/input-group/input-group.svelte b/apps/web/src/lib/components/ui/input-group/input-group.svelte
new file mode 100644
index 0000000..dd13402
--- /dev/null
+++ b/apps/web/src/lib/components/ui/input-group/input-group.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '#lib/utils.ts';
+	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 relative flex h-9 w-full min-w-0 items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 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-[>textarea]:h-auto 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',
+		className
+	)}
+	{...props}
+>
+	{@render children?.()}
+</div>
diff --git a/apps/web/src/lib/components/ui/input/index.ts b/apps/web/src/lib/components/ui/input/index.ts
new file mode 100644
index 0000000..15c0933
--- /dev/null
+++ b/apps/web/src/lib/components/ui/input/index.ts
@@ -0,0 +1,7 @@
+import Root from './input.svelte';
+
+export {
+	Root,
+	//
+	Root as Input
+};
diff --git a/apps/web/src/lib/components/ui/input/input.svelte b/apps/web/src/lib/components/ui/input/input.svelte
new file mode 100644
index 0000000..e11aa83
--- /dev/null
+++ b/apps/web/src/lib/components/ui/input/input.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '#lib/utils.ts';
+	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from 'svelte/elements';
+
+	type InputType = Exclude<HTMLInputTypeAttribute, 'file'>;
+
+	type Props = WithElementRef<
+		Omit<HTMLInputAttributes, 'type'> &
+			({ type: 'file'; files?: FileList } | { type?: InputType; files?: undefined })
+	>;
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		type,
+		files = $bindable(),
+		class: className,
+		'data-slot': dataSlot = 'input',
+		...restProps
+	}: Props = $props();
+</script>
+
+{#if type === 'file'}
+	<input
+		bind:this={ref}
+		data-slot={dataSlot}
+		class={cn(
+			'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 file:text-foreground placeholder:text-muted-foreground h-9 w-full min-w-0 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm',
+			className
+		)}
+		type="file"
+		bind:files
+		bind:value
+		{...restProps}
+	/>
+{:else}
+	<input
+		bind:this={ref}
+		data-slot={dataSlot}
+		class={cn(
+			'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 file:text-foreground placeholder:text-muted-foreground h-9 w-full min-w-0 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm',
+			className
+		)}
+		{type}
+		bind:value
+		{...restProps}
+	/>
+{/if}
diff --git a/apps/web/src/lib/components/ui/kbd/index.ts b/apps/web/src/lib/components/ui/kbd/index.ts
new file mode 100644
index 0000000..66325a5
--- /dev/null
+++ b/apps/web/src/lib/components/ui/kbd/index.ts
@@ -0,0 +1,10 @@
+import Group from './kbd-group.svelte';
+import Root from './kbd.svelte';
+
+export {
+	Root,
+	Group,
+	//
+	Root as Kbd,
+	Group as KbdGroup
+};
diff --git a/apps/web/src/lib/components/ui/kbd/kbd-group.svelte b/apps/web/src/lib/components/ui/kbd/kbd-group.svelte
new file mode 100644
index 0000000..bd2206d
--- /dev/null
+++ b/apps/web/src/lib/components/ui/kbd/kbd-group.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '#lib/utils.ts';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<kbd
+	bind:this={ref}
+	data-slot="kbd-group"
+	class={cn('inline-flex items-center gap-1', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</kbd>
diff --git a/apps/web/src/lib/components/ui/kbd/kbd.svelte b/apps/web/src/lib/components/ui/kbd/kbd.svelte
new file mode 100644
index 0000000..d464008
--- /dev/null
+++ b/apps/web/src/lib/components/ui/kbd/kbd.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '#lib/utils.ts';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<kbd
+	bind:this={ref}
+	data-slot="kbd"
+	class={cn(
+		"bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</kbd>
diff --git a/apps/web/src/lib/components/ui/label/index.ts b/apps/web/src/lib/components/ui/label/index.ts
new file mode 100644
index 0000000..808d141
--- /dev/null
+++ b/apps/web/src/lib/components/ui/label/index.ts
@@ -0,0 +1,7 @@
+import Root from './label.svelte';
+
+export {
+	Root,
+	//
+	Root as Label
+};
diff --git a/apps/web/src/lib/components/ui/label/label.svelte b/apps/web/src/lib/components/ui/label/label.svelte
new file mode 100644
index 0000000..5795a24
--- /dev/null
+++ b/apps/web/src/lib/components/ui/label/label.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Label as LabelPrimitive } from 'bits-ui';
+	import { cn } from '#lib/utils.ts';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: LabelPrimitive.RootProps = $props();
+</script>
+
+<LabelPrimitive.Root
+	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',
+		className
+	)}
+	{...restProps}
+/>
diff --git a/apps/web/src/lib/components/ui/popover/index.ts b/apps/web/src/lib/components/ui/popover/index.ts
new file mode 100644
index 0000000..96de2e0
--- /dev/null
+++ b/apps/web/src/lib/components/ui/popover/index.ts
@@ -0,0 +1,28 @@
+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 Portal from './popover-portal.svelte';
+import Title from './popover-title.svelte';
+import Trigger from './popover-trigger.svelte';
+import Root from './popover.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/apps/web/src/lib/components/ui/popover/popover-close.svelte b/apps/web/src/lib/components/ui/popover/popover-close.svelte
new file mode 100644
index 0000000..dc4dec4
--- /dev/null
+++ b/apps/web/src/lib/components/ui/popover/popover-close.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: PopoverPrimitive.CloseProps = $props();
+</script>
+
+<PopoverPrimitive.Close bind:ref data-slot="popover-close" {...restProps} />
diff --git a/apps/web/src/lib/components/ui/popover/popover-content.svelte b/apps/web/src/lib/components/ui/popover/popover-content.svelte
new file mode 100644
index 0000000..7f1f087
--- /dev/null
+++ b/apps/web/src/lib/components/ui/popover/popover-content.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '#lib/utils.ts';
+	import PopoverPortal from './popover-portal.svelte';
+	import type { ComponentProps } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 4,
+		align = 'center',
+		portalProps,
+		...restProps
+	}: PopoverPrimitive.ContentProps & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof PopoverPortal>>;
+	} = $props();
+</script>
+
+<PopoverPortal {...portalProps}>
+	<PopoverPrimitive.Content
+		bind:ref
+		data-slot="popover-content"
+		{sideOffset}
+		{align}
+		class={cn(
+			'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 z-50 flex w-72 origin-(--bits-popover-content-transform-origin) flex-col gap-4 rounded-md p-4 text-sm shadow-md ring-1 outline-hidden duration-100',
+			className
+		)}
+		{...restProps}
+	/>
+</PopoverPortal>
diff --git a/apps/web/src/lib/components/ui/popover/popover-description.svelte b/apps/web/src/lib/components/ui/popover/popover-description.svelte
new file mode 100644
index 0000000..0078ba6
--- /dev/null
+++ b/apps/web/src/lib/components/ui/popover/popover-description.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '#lib/utils.ts';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	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/apps/web/src/lib/components/ui/popover/popover-header.svelte b/apps/web/src/lib/components/ui/popover/popover-header.svelte
new file mode 100644
index 0000000..bbb19a6
--- /dev/null
+++ b/apps/web/src/lib/components/ui/popover/popover-header.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '#lib/utils.ts';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	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-1 text-sm', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/apps/web/src/lib/components/ui/popover/popover-portal.svelte b/apps/web/src/lib/components/ui/popover/popover-portal.svelte
new file mode 100644
index 0000000..25efb87
--- /dev/null
+++ b/apps/web/src/lib/components/ui/popover/popover-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from 'bits-ui';
+
+	let { ...restProps }: PopoverPrimitive.PortalProps = $props();
+</script>
+
+<PopoverPrimitive.Portal {...restProps} />
diff --git a/apps/web/src/lib/components/ui/popover/popover-title.svelte b/apps/web/src/lib/components/ui/popover/popover-title.svelte
new file mode 100644
index 0000000..cf8671e
--- /dev/null
+++ b/apps/web/src/lib/components/ui/popover/popover-title.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '#lib/utils.ts';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	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/apps/web/src/lib/components/ui/popover/popover-trigger.svelte b/apps/web/src/lib/components/ui/popover/popover-trigger.svelte
new file mode 100644
index 0000000..e26e220
--- /dev/null
+++ b/apps/web/src/lib/components/ui/popover/popover-trigger.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from 'bits-ui';
+	import { cn } from '#lib/utils.ts';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: PopoverPrimitive.TriggerProps = $props();
+</script>
+
+<PopoverPrimitive.Trigger
+	bind:ref
+	data-slot="popover-trigger"
+	class={cn(className)}
+	{...restProps}
+/>
diff --git a/apps/web/src/lib/components/ui/popover/popover.svelte b/apps/web/src/lib/components/ui/popover/popover.svelte
new file mode 100644
index 0000000..f39b867
--- /dev/null
+++ b/apps/web/src/lib/components/ui/popover/popover.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from 'bits-ui';
+
+	let { open = $bindable(false), ...restProps }: PopoverPrimitive.RootProps = $props();
+</script>
+
+<PopoverPrimitive.Root bind:open {...restProps} />
diff --git a/apps/web/src/lib/components/ui/range-calendar/index.ts b/apps/web/src/lib/components/ui/range-calendar/index.ts
new file mode 100644
index 0000000..f5f69c4
--- /dev/null
+++ b/apps/web/src/lib/components/ui/range-calendar/index.ts
@@ -0,0 +1,40 @@
+import Caption from './range-calendar-caption.svelte';
+import Cell from './range-calendar-cell.svelte';
+import Day from './range-calendar-day.svelte';
+import GridBody from './range-calendar-grid-body.svelte';
+import GridHead from './range-calendar-grid-head.svelte';
+import GridRow from './range-calendar-grid-row.svelte';
+import Grid from './range-calendar-grid.svelte';
+import HeadCell from './range-calendar-head-cell.svelte';
+import Header from './range-calendar-header.svelte';
+import Heading from './range-calendar-heading.svelte';
+import MonthSelect from './range-calendar-month-select.svelte';
+import Month from './range-calendar-month.svelte';
+import Months from './range-calendar-months.svelte';
+import Nav from './range-calendar-nav.svelte';
+import NextButton from './range-calendar-next-button.svelte';
+import PrevButton from './range-calendar-prev-button.svelte';
+import YearSelect from './range-calendar-year-select.svelte';
+import Root from './range-calendar.svelte';
+
+export {
+	Day,
+	Cell,
+	Grid,
+	Header,
+	Months,
+	GridRow,
+	Heading,
+	GridBody,
+	GridHead,
+	HeadCell,
+	NextButton,
+	PrevButton,
+	MonthSelect,
+	YearSelect,
+	Caption,
+	Nav,
+	Month,
+	//
+	Root as RangeCalendar
+};
diff --git a/apps/web/src/lib/components/ui/range-calendar/range-calendar-caption.svelte b/apps/web/src/lib/components/ui/range-calendar/range-calendar-caption.svelte
new file mode 100644
index 0000000..3bf246f
--- /dev/null
+++ b/apps/web/src/lib/components/ui/range-calendar/range-calendar-caption.svelte
@@ -0,0 +1,76 @@
+<script lang="ts">
+	import { DateFormatter, getLocalTimeZone, type DateValue } from '@internationalized/date';
+	import RangeCalendarMonthSelect from './range-calendar-month-select.svelte';
+	import RangeCalendarYearSelect from './range-calendar-year-select.svelte';
+	import type RangeCalendar from './range-calendar.svelte';
+	import type { ComponentProps } from 'svelte';
+
+	let {
+		captionLayout,
+		months,
+		monthFormat,
+		years,
+		yearFormat,
+		month,
+		locale,
+		placeholder = $bindable(),
+		monthIndex = 0
+	}: {
+		captionLayout: ComponentProps<typeof RangeCalendar>['captionLayout'];
+		months: ComponentProps<typeof RangeCalendarMonthSelect>['months'];
+		monthFormat: ComponentProps<typeof RangeCalendarMonthSelect>['monthFormat'];
+		years: ComponentProps<typeof RangeCalendarYearSelect>['years'];
+		yearFormat: ComponentProps<typeof RangeCalendarYearSelect>['yearFormat'];
+		month: DateValue;
+		placeholder: DateValue | undefined;
+		locale: string;
+		monthIndex: number;
+	} = $props();
+
+	function formatYear(date: DateValue) {
+		const dateObj = date.toDate(getLocalTimeZone());
+		if (typeof yearFormat === 'function') return yearFormat(dateObj.getFullYear());
+		return new DateFormatter(locale, { year: yearFormat }).format(dateObj);
+	}
+
+	function formatMonth(date: DateValue) {
+		const dateObj = date.toDate(getLocalTimeZone());
+		if (typeof monthFormat === 'function') return monthFormat(dateObj.getMonth() + 1);
+		return new DateFormatter(locale, { month: monthFormat }).format(dateObj);
+	}
+</script>
+
+{#snippet MonthSelect()}
+	<RangeCalendarMonthSelect
+		{months}
+		{monthFormat}
+		value={month.month}
+		onchange={(e) => {
+			if (!placeholder) return;
+			const v = Number.parseInt(e.currentTarget.value);
+			const newPlaceholder = placeholder.set({ month: v });
+			placeholder = newPlaceholder.subtract({ months: monthIndex });
+		}}
+	/>
+{/snippet}
+
+{#snippet YearSelect()}
+	<RangeCalendarYearSelect {years} {yearFormat} value={month.year} />
+{/snippet}
+
+{#if captionLayout === 'dropdown'}
+	{@render MonthSelect()}
+	{@render YearSelect()}
+{:else if captionLayout === 'dropdown-months'}
+	{@render MonthSelect()}
+	{#if placeholder}
+		{formatYear(placeholder)}
+	{/if}
+{:else if captionLayout === 'dropdown-years'}
+	{#if placeholder}
+		{formatMonth(placeholder)}
+	{/if}
+	{@render YearSelect()}
+{:else}
+	{formatMonth(month)} {formatYear(month)}
+{/if}
diff --git a/apps/web/src/lib/components/ui/range-calendar/range-calendar-cell.svelte b/apps/web/src/lib/components/ui/range-calendar/range-calendar-cell.svelte
new file mode 100644
index 0000000..4b53e65
--- /dev/null
+++ b/apps/web/src/lib/components/ui/range-calendar/range-calendar-cell.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
+	import { cn } from '#lib/utils.ts';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: RangeCalendarPrimitive.CellProps = $props();
+</script>
+
+<RangeCalendarPrimitive.Cell
+	bind:ref
+	class={cn(
+		'dark:[&:has([data-range-end])]:hover:bg-accent [&:has([data-range-middle])]:bg-accent dark:[&:has([data-range-middle])]:hover:bg-accent/50 dark:[&:has([data-range-start])]:hover:bg-accent [&:has([data-selected])]:bg-accent relative size-(--cell-size) p-0 text-center text-sm focus-within:z-20 data-[range-middle]:rounded-e-(--cell-radius) [&:first-child[data-selected]_[data-bits-day]]:rounded-s-(--cell-radius) [&:has([data-range-end])]:rounded-e-(--cell-radius) [&:has([data-range-middle])]:rounded-none first:[&:has([data-range-middle])]:rounded-s-(--cell-radius) last:[&:has([data-range-middle])]:rounded-e-(--cell-radius) [&:has([data-range-start])]:rounded-s-(--cell-radius) [&:last-child[data-selected]_[data-bits-day]]:rounded-e-(--cell-radius)',
+		className
+	)}
+	{...restProps}
+/>
diff --git a/apps/web/src/lib/components/ui/range-calendar/range-calendar-day.svelte b/apps/web/src/lib/components/ui/range-calendar/range-calendar-day.svelte
new file mode 100644
index 0000000..79d9adb
--- /dev/null
+++ b/apps/web/src/lib/components/ui/range-calendar/range-calendar-day.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
+	import { cn } from '#lib/utils.ts';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: RangeCalendarPrimitive.DayProps = $props();
+</script>
+
+<RangeCalendarPrimitive.Day
+	bind:ref
+	class={cn(
+		'flex size-(--cell-size) flex-col items-center justify-center gap-1 rounded-(--cell-radius) p-0 leading-none font-normal whitespace-nowrap select-none',
+		'not-data-selected:hover:bg-accent/50 not-data-selected:hover:text-accent-foreground',
+		'[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground [&[data-today][data-disabled]]:text-muted-foreground data-[range-middle]:rounded-none',
+		// range Start
+		'data-[range-start]:bg-primary data-[range-start]:text-primary-foreground data-[range-start]:hover:text-foreground',
+		// range End
+		'data-[range-end]:bg-primary data-[range-end]:text-primary-foreground data-[range-end]:hover:text-foreground',
+		// Outside months
+		'[&[data-outside-month]:not([data-selected])]:text-muted-foreground [&[data-outside-month]:not([data-selected])]:hover:text-accent-foreground',
+		// Disabled
+		'data-[disabled]:text-muted-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+		// Unavailable
+		'data-[unavailable]:line-through',
+		'dark:data-[range-middle]:hover:bg-accent/0',
+		// focus
+		'focus:border-ring focus:ring-ring/50 focus:relative',
+		// inner spans
+		'[&>span]:text-xs [&>span]:opacity-70',
+		className
+	)}
+	{...restProps}
+/>
diff --git a/apps/web/src/lib/components/ui/range-calendar/range-calendar-grid-body.svelte b/apps/web/src/lib/components/ui/range-calendar/range-calendar-grid-body.svelte
new file mode 100644
index 0000000..7f8a667
--- /dev/null
+++ b/apps/web/src/lib/components/ui/range-calendar/range-calendar-grid-body.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: RangeCalendarPrimitive.GridBodyProps = $props();
+</script>
+
+<RangeCalendarPrimitive.GridBody bind:ref {...restProps} />
diff --git a/apps/web/src/lib/components/ui/range-calendar/range-calendar-grid-head.svelte b/apps/web/src/lib/components/ui/range-calendar/range-calendar-grid-head.svelte
new file mode 100644
index 0000000..a46660b
--- /dev/null
+++ b/apps/web/src/lib/components/ui/range-calendar/range-calendar-grid-head.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: RangeCalendarPrimitive.GridHeadProps = $props();
+</script>
+
+<RangeCalendarPrimitive.GridHead bind:ref {...restProps} />
diff --git a/apps/web/src/lib/components/ui/range-calendar/range-calendar-grid-row.svelte b/apps/web/src/lib/components/ui/range-calendar/range-calendar-grid-row.svelte
new file mode 100644
index 0000000..967ecd0
--- /dev/null
+++ b/apps/web/src/lib/components/ui/range-calendar/range-calendar-grid-row.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
+	import { cn } from '#lib/utils.ts';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: RangeCalendarPrimitive.GridRowProps = $props();
+</script>
+
+<RangeCalendarPrimitive.GridRow bind:ref class={cn('flex', className)} {...restProps} />
diff --git a/apps/web/src/lib/components/ui/range-calendar/range-calendar-grid.svelte b/apps/web/src/lib/components/ui/range-calendar/range-calendar-grid.svelte
new file mode 100644
index 0000000..46c8fe4
--- /dev/null
+++ b/apps/web/src/lib/components/ui/range-calendar/range-calendar-grid.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
+	import { cn } from '#lib/utils.ts';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: RangeCalendarPrimitive.GridProps = $props();
+</script>
+
+<RangeCalendarPrimitive.Grid
+	bind:ref
+	class={cn('mt-4 flex w-full border-collapse flex-col gap-1', className)}
+	{...restProps}
+/>
diff --git a/apps/web/src/lib/components/ui/range-calendar/range-calendar-head-cell.svelte b/apps/web/src/lib/components/ui/range-calendar/range-calendar-head-cell.svelte
new file mode 100644
index 0000000..2179bcd
--- /dev/null
+++ b/apps/web/src/lib/components/ui/range-calendar/range-calendar-head-cell.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
+	import { cn } from '#lib/utils.ts';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: RangeCalendarPrimitive.HeadCellProps = $props();
+</script>
+
+<RangeCalendarPrimitive.HeadCell
+	bind:ref
+	class={cn(
+		'text-muted-foreground w-(--cell-size) rounded-md text-[0.8rem] font-normal',
+		className
+	)}
+	{...restProps}
+/>
diff --git a/apps/web/src/lib/components/ui/range-calendar/range-calendar-header.svelte b/apps/web/src/lib/components/ui/range-calendar/range-calendar-header.svelte
new file mode 100644
index 0000000..4d7189c
--- /dev/null
+++ b/apps/web/src/lib/components/ui/range-calendar/range-calendar-header.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
+	import { cn } from '#lib/utils.ts';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: RangeCalendarPrimitive.HeaderProps = $props();
+</script>
+
+<RangeCalendarPrimitive.Header
+	bind:ref
+	class={cn(
+		'flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium',
+		className
+	)}
+	{...restProps}
+/>
diff --git a/apps/web/src/lib/components/ui/range-calendar/range-calendar-heading.svelte b/apps/web/src/lib/components/ui/range-calendar/range-calendar-heading.svelte
new file mode 100644
index 0000000..4e1173b
--- /dev/null
+++ b/apps/web/src/lib/components/ui/range-calendar/range-calendar-heading.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
+	import { cn } from '#lib/utils.ts';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: RangeCalendarPrimitive.HeadingProps = $props();
+</script>
+
+<RangeCalendarPrimitive.Heading
+	bind:ref
+	class={cn('px-(--cell-size) text-sm font-medium', className)}
+	{...restProps}
+/>
diff --git a/apps/web/src/lib/components/ui/range-calendar/range-calendar-month-select.svelte b/apps/web/src/lib/components/ui/range-calendar/range-calendar-month-select.svelte
new file mode 100644
index 0000000..87946ab
--- /dev/null
+++ b/apps/web/src/lib/components/ui/range-calendar/range-calendar-month-select.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+	import { cn, type WithoutChildrenOrChild } from '#lib/utils.ts';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value,
+		onchange,
+		...restProps
+	}: WithoutChildrenOrChild<RangeCalendarPrimitive.MonthSelectProps> = $props();
+</script>
+
+<span
+	class={cn(
+		'border-input has-focus:border-ring has-focus:ring-ring/50 relative flex rounded-md border shadow-xs has-focus:ring-[3px]',
+		className
+	)}
+>
+	<RangeCalendarPrimitive.MonthSelect bind:ref class="absolute inset-0 opacity-0" {...restProps}>
+		{#snippet child({ props, monthItems, selectedMonthItem })}
+			<select {...props} {value} {onchange}>
+				{#each monthItems as monthItem (monthItem.value)}
+					<option
+						value={monthItem.value}
+						selected={value !== undefined
+							? monthItem.value === value
+							: monthItem.value === selectedMonthItem.value}
+					>
+						{monthItem.label}
+					</option>
+				{/each}
+			</select>
+			<span
+				class="[&>svg]:text-muted-foreground flex h-(--cell-size) items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5"
+				aria-hidden="true"
+			>
+				{monthItems.find((item) => item.value === value)?.label || selectedMonthItem.label}
+				<ChevronDownIcon class={cn('size-4', className)} />
+			</span>
+		{/snippet}
+	</RangeCalendarPrimitive.MonthSelect>
+</span>
diff --git a/apps/web/src/lib/components/ui/range-calendar/range-calendar-month.svelte b/apps/web/src/lib/components/ui/range-calendar/range-calendar-month.svelte
new file mode 100644
index 0000000..1cb39cc
--- /dev/null
+++ b/apps/web/src/lib/components/ui/range-calendar/range-calendar-month.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { type WithElementRef, cn } from '#lib/utils.ts';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div {...restProps} bind:this={ref} class={cn('flex flex-col', className)}>
+	{@render children?.()}
+</div>
diff --git a/apps/web/src/lib/components/ui/range-calendar/range-calendar-months.svelte b/apps/web/src/lib/components/ui/range-calendar/range-calendar-months.svelte
new file mode 100644
index 0000000..639c00f
--- /dev/null
+++ b/apps/web/src/lib/components/ui/range-calendar/range-calendar-months.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '#lib/utils.ts';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	class={cn('relative flex flex-col gap-4 md:flex-row', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/apps/web/src/lib/components/ui/range-calendar/range-calendar-nav.svelte b/apps/web/src/lib/components/ui/range-calendar/range-calendar-nav.svelte
new file mode 100644
index 0000000..6e3cc96
--- /dev/null
+++ b/apps/web/src/lib/components/ui/range-calendar/range-calendar-nav.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '#lib/utils.ts';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<nav
+	{...restProps}
+	bind:this={ref}
+	class={cn('absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1', className)}
+>
+	{@render children?.()}
+</nav>
diff --git a/apps/web/src/lib/components/ui/range-calendar/range-calendar-next-button.svelte b/apps/web/src/lib/components/ui/range-calendar/range-calendar-next-button.svelte
new file mode 100644
index 0000000..bd4289f
--- /dev/null
+++ b/apps/web/src/lib/components/ui/range-calendar/range-calendar-next-button.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+	import { buttonVariants, type ButtonVariant } from '#lib/components/ui/button/index.ts';
+	import { cn } from '#lib/utils.ts';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		variant = 'ghost',
+		...restProps
+	}: RangeCalendarPrimitive.NextButtonProps & {
+		variant?: ButtonVariant;
+	} = $props();
+</script>
+
+{#snippet Fallback()}
+	<ChevronRightIcon class={cn('cn-rtl-flip size-4', className)} />
+{/snippet}
+
+<RangeCalendarPrimitive.NextButton
+	bind:ref
+	class={cn(
+		buttonVariants({ variant }),
+		'size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50',
+		'rtl:rotate-180',
+		className
+	)}
+	{...restProps}
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		{@render Fallback()}
+	{/if}
+</RangeCalendarPrimitive.NextButton>
diff --git a/apps/web/src/lib/components/ui/range-calendar/range-calendar-prev-button.svelte b/apps/web/src/lib/components/ui/range-calendar/range-calendar-prev-button.svelte
new file mode 100644
index 0000000..eded602
--- /dev/null
+++ b/apps/web/src/lib/components/ui/range-calendar/range-calendar-prev-button.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
+	import ChevronLeftIcon from '@lucide/svelte/icons/chevron-left';
+	import { buttonVariants, type ButtonVariant } from '#lib/components/ui/button/index.ts';
+	import { cn } from '#lib/utils.ts';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		variant = 'ghost',
+		...restProps
+	}: RangeCalendarPrimitive.PrevButtonProps & {
+		variant?: ButtonVariant;
+	} = $props();
+</script>
+
+{#snippet Fallback()}
+	<ChevronLeftIcon class={cn('cn-rtl-flip size-4', className)} />
+{/snippet}
+
+<RangeCalendarPrimitive.PrevButton
+	bind:ref
+	class={cn(
+		buttonVariants({ variant }),
+		'size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50',
+		'rtl:rotate-180',
+		className
+	)}
+	{...restProps}
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		{@render Fallback()}
+	{/if}
+</RangeCalendarPrimitive.PrevButton>
diff --git a/apps/web/src/lib/components/ui/range-calendar/range-calendar-year-select.svelte b/apps/web/src/lib/components/ui/range-calendar/range-calendar-year-select.svelte
new file mode 100644
index 0000000..cf16602
--- /dev/null
+++ b/apps/web/src/lib/components/ui/range-calendar/range-calendar-year-select.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+	import { cn, type WithoutChildrenOrChild } from '#lib/utils.ts';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value,
+		...restProps
+	}: WithoutChildrenOrChild<RangeCalendarPrimitive.YearSelectProps> = $props();
+</script>
+
+<span
+	class={cn(
+		'border-input has-focus:border-ring has-focus:ring-ring/50 relative flex rounded-md border shadow-xs has-focus:ring-[3px]',
+		className
+	)}
+>
+	<RangeCalendarPrimitive.YearSelect bind:ref class="absolute inset-0 opacity-0" {...restProps}>
+		{#snippet child({ props, yearItems, selectedYearItem })}
+			<select {...props} {value}>
+				{#each yearItems as yearItem (yearItem.value)}
+					<option
+						value={yearItem.value}
+						selected={value !== undefined
+							? yearItem.value === value
+							: yearItem.value === selectedYearItem.value}
+					>
+						{yearItem.label}
+					</option>
+				{/each}
+			</select>
+			<span
+				class="[&>svg]:text-muted-foreground flex h-(--cell-size) items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5"
+				aria-hidden="true"
+			>
+				{yearItems.find((item) => item.value === value)?.label || selectedYearItem.label}
+				<ChevronDownIcon class={cn('size-4', className)} />
+			</span>
+		{/snippet}
+	</RangeCalendarPrimitive.YearSelect>
+</span>
diff --git a/apps/web/src/lib/components/ui/range-calendar/range-calendar.svelte b/apps/web/src/lib/components/ui/range-calendar/range-calendar.svelte
new file mode 100644
index 0000000..82ab7d5
--- /dev/null
+++ b/apps/web/src/lib/components/ui/range-calendar/range-calendar.svelte
@@ -0,0 +1,112 @@
+<script lang="ts">
+	import { isEqualMonth, type DateValue } from '@internationalized/date';
+	import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
+	import type { ButtonVariant } from '#lib/components/ui/button/index.ts';
+	import { cn, type WithoutChildrenOrChild } from '#lib/utils.ts';
+	import * as RangeCalendar from './index.js';
+	import type { Snippet } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		placeholder = $bindable(),
+		weekdayFormat = 'short',
+		class: className,
+		buttonVariant = 'ghost',
+		captionLayout = 'label',
+		locale = 'en-US',
+		months: monthsProp,
+		years,
+		monthFormat: monthFormatProp,
+		yearFormat = 'numeric',
+		day,
+		disableDaysOutsideMonth = false,
+		...restProps
+	}: WithoutChildrenOrChild<RangeCalendarPrimitive.RootProps> & {
+		buttonVariant?: ButtonVariant;
+		captionLayout?: 'dropdown' | 'dropdown-months' | 'dropdown-years' | 'label';
+		months?: RangeCalendarPrimitive.MonthSelectProps['months'];
+		years?: RangeCalendarPrimitive.YearSelectProps['years'];
+		monthFormat?: RangeCalendarPrimitive.MonthSelectProps['monthFormat'];
+		yearFormat?: RangeCalendarPrimitive.YearSelectProps['yearFormat'];
+		day?: Snippet<[{ day: DateValue; outsideMonth: boolean }]>;
+	} = $props();
+
+	const monthFormat = $derived.by(() => {
+		if (monthFormatProp) return monthFormatProp;
+		if (captionLayout.startsWith('dropdown')) return 'short';
+		return 'long';
+	});
+</script>
+
+<RangeCalendarPrimitive.Root
+	bind:ref
+	bind:value
+	bind:placeholder
+	{weekdayFormat}
+	{disableDaysOutsideMonth}
+	class={cn(
+		'group/calendar bg-background p-3 p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
+		className
+	)}
+	{locale}
+	{monthFormat}
+	{yearFormat}
+	{...restProps}
+>
+	{#snippet children({ months, weekdays })}
+		<RangeCalendar.Months>
+			<RangeCalendar.Nav>
+				<RangeCalendar.PrevButton variant={buttonVariant} />
+				<RangeCalendar.NextButton variant={buttonVariant} />
+			</RangeCalendar.Nav>
+			{#each months as month, monthIndex (month)}
+				<RangeCalendar.Month>
+					<RangeCalendar.Header>
+						<RangeCalendar.Caption
+							{captionLayout}
+							months={monthsProp}
+							{monthFormat}
+							{years}
+							{yearFormat}
+							month={month.value}
+							bind:placeholder
+							{locale}
+							{monthIndex}
+						/>
+					</RangeCalendar.Header>
+
+					<RangeCalendar.Grid>
+						<RangeCalendar.GridHead>
+							<RangeCalendar.GridRow class="select-none">
+								{#each weekdays as weekday, i (i)}
+									<RangeCalendar.HeadCell>
+										{weekday.slice(0, 2)}
+									</RangeCalendar.HeadCell>
+								{/each}
+							</RangeCalendar.GridRow>
+						</RangeCalendar.GridHead>
+						<RangeCalendar.GridBody>
+							{#each month.weeks as weekDates (weekDates)}
+								<RangeCalendar.GridRow class="mt-2 w-full">
+									{#each weekDates as date (date)}
+										<RangeCalendar.Cell {date} month={month.value}>
+											{#if day}
+												{@render day({
+													day: date,
+													outsideMonth: !isEqualMonth(date, month.value)
+												})}
+											{:else}
+												<RangeCalendar.Day />
+											{/if}
+										</RangeCalendar.Cell>
+									{/each}
+								</RangeCalendar.GridRow>
+							{/each}
+						</RangeCalendar.GridBody>
+					</RangeCalendar.Grid>
+				</RangeCalendar.Month>
+			{/each}
+		</RangeCalendar.Months>
+	{/snippet}
+</RangeCalendarPrimitive.Root>
diff --git a/apps/web/src/lib/components/ui/sheet/index.ts b/apps/web/src/lib/components/ui/sheet/index.ts
new file mode 100644
index 0000000..7f79349
--- /dev/null
+++ b/apps/web/src/lib/components/ui/sheet/index.ts
@@ -0,0 +1,34 @@
+import Close from './sheet-close.svelte';
+import Content from './sheet-content.svelte';
+import Description from './sheet-description.svelte';
+import Footer from './sheet-footer.svelte';
+import Header from './sheet-header.svelte';
+import Overlay from './sheet-overlay.svelte';
+import Portal from './sheet-portal.svelte';
+import Title from './sheet-title.svelte';
+import Trigger from './sheet-trigger.svelte';
+import Root from './sheet.svelte';
+
+export {
+	Root,
+	Close,
+	Trigger,
+	Portal,
+	Overlay,
+	Content,
+	Header,
+	Footer,
+	Title,
+	Description,
+	//
+	Root as Sheet,
+	Close as SheetClose,
+	Trigger as SheetTrigger,
+	Portal as SheetPortal,
+	Overlay as SheetOverlay,
+	Content as SheetContent,
+	Header as SheetHeader,
+	Footer as SheetFooter,
+	Title as SheetTitle,
+	Description as SheetDescription
+};
diff --git a/apps/web/src/lib/components/ui/sheet/sheet-close.svelte b/apps/web/src/lib/components/ui/sheet/sheet-close.svelte
new file mode 100644
index 0000000..b0180c0
--- /dev/null
+++ b/apps/web/src/lib/components/ui/sheet/sheet-close.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: SheetPrimitive.CloseProps = $props();
+</script>
+
+<SheetPrimitive.Close bind:ref data-slot="sheet-close" {...restProps} />
diff --git a/apps/web/src/lib/components/ui/sheet/sheet-content.svelte b/apps/web/src/lib/components/ui/sheet/sheet-content.svelte
new file mode 100644
index 0000000..08f31cd
--- /dev/null
+++ b/apps/web/src/lib/components/ui/sheet/sheet-content.svelte
@@ -0,0 +1,55 @@
+<script lang="ts" module>
+	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 { Button } from '#lib/components/ui/button/index.ts';
+	import { cn, type WithoutChildrenOrChild } from '#lib/utils.ts';
+	import SheetOverlay from './sheet-overlay.svelte';
+	import SheetPortal from './sheet-portal.svelte';
+	import type { Snippet } from 'svelte';
+	import type { ComponentProps } from 'svelte';
+
+	let {
+		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>
+
+<SheetPortal {...portalProps}>
+	<SheetOverlay />
+	<SheetPrimitive.Content
+		bind:ref
+		data-slot="sheet-content"
+		data-side={side}
+		class={cn(
+			'bg-popover text-popover-foreground 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 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',
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		{#if showCloseButton}
+			<SheetPrimitive.Close data-slot="sheet-close">
+				{#snippet child({ props })}
+					<Button variant="ghost" class="absolute top-4 right-4" size="icon-sm" {...props}>
+						<XIcon />
+						<span class="sr-only">Close</span>
+					</Button>
+				{/snippet}
+			</SheetPrimitive.Close>
+		{/if}
+	</SheetPrimitive.Content>
+</SheetPortal>
diff --git a/apps/web/src/lib/components/ui/sheet/sheet-description.svelte b/apps/web/src/lib/components/ui/sheet/sheet-description.svelte
new file mode 100644
index 0000000..387ed94
--- /dev/null
+++ b/apps/web/src/lib/components/ui/sheet/sheet-description.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+	import { cn } from '#lib/utils.ts';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SheetPrimitive.DescriptionProps = $props();
+</script>
+
+<SheetPrimitive.Description
+	bind:ref
+	data-slot="sheet-description"
+	class={cn('text-muted-foreground text-sm', className)}
+	{...restProps}
+/>
diff --git a/apps/web/src/lib/components/ui/sheet/sheet-footer.svelte b/apps/web/src/lib/components/ui/sheet/sheet-footer.svelte
new file mode 100644
index 0000000..6a87c63
--- /dev/null
+++ b/apps/web/src/lib/components/ui/sheet/sheet-footer.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '#lib/utils.ts';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sheet-footer"
+	class={cn('mt-auto flex flex-col gap-2 p-4', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/apps/web/src/lib/components/ui/sheet/sheet-header.svelte b/apps/web/src/lib/components/ui/sheet/sheet-header.svelte
new file mode 100644
index 0000000..82553ba
--- /dev/null
+++ b/apps/web/src/lib/components/ui/sheet/sheet-header.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '#lib/utils.ts';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sheet-header"
+	class={cn('flex flex-col gap-1.5 p-4', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/apps/web/src/lib/components/ui/sheet/sheet-overlay.svelte b/apps/web/src/lib/components/ui/sheet/sheet-overlay.svelte
new file mode 100644
index 0000000..5b5b838
--- /dev/null
+++ b/apps/web/src/lib/components/ui/sheet/sheet-overlay.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+	import { cn } from '#lib/utils.ts';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SheetPrimitive.OverlayProps = $props();
+</script>
+
+<SheetPrimitive.Overlay
+	bind:ref
+	data-slot="sheet-overlay"
+	class={cn(
+		'data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs',
+		className
+	)}
+	{...restProps}
+/>
diff --git a/apps/web/src/lib/components/ui/sheet/sheet-portal.svelte b/apps/web/src/lib/components/ui/sheet/sheet-portal.svelte
new file mode 100644
index 0000000..91e5178
--- /dev/null
+++ b/apps/web/src/lib/components/ui/sheet/sheet-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+
+	let { ...restProps }: SheetPrimitive.PortalProps = $props();
+</script>
+
+<SheetPrimitive.Portal {...restProps} />
diff --git a/apps/web/src/lib/components/ui/sheet/sheet-title.svelte b/apps/web/src/lib/components/ui/sheet/sheet-title.svelte
new file mode 100644
index 0000000..b5ca9a2
--- /dev/null
+++ b/apps/web/src/lib/components/ui/sheet/sheet-title.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+	import { cn } from '#lib/utils.ts';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SheetPrimitive.TitleProps = $props();
+</script>
+
+<SheetPrimitive.Title
+	bind:ref
+	data-slot="sheet-title"
+	class={cn('text-foreground font-medium', className)}
+	{...restProps}
+/>
diff --git a/apps/web/src/lib/components/ui/sheet/sheet-trigger.svelte b/apps/web/src/lib/components/ui/sheet/sheet-trigger.svelte
new file mode 100644
index 0000000..d95719a
--- /dev/null
+++ b/apps/web/src/lib/components/ui/sheet/sheet-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: SheetPrimitive.TriggerProps = $props();
+</script>
+
+<SheetPrimitive.Trigger bind:ref data-slot="sheet-trigger" {...restProps} />
diff --git a/apps/web/src/lib/components/ui/sheet/sheet.svelte b/apps/web/src/lib/components/ui/sheet/sheet.svelte
new file mode 100644
index 0000000..d65b76b
--- /dev/null
+++ b/apps/web/src/lib/components/ui/sheet/sheet.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+
+	let { open = $bindable(false), ...restProps }: SheetPrimitive.RootProps = $props();
+</script>
+
+<SheetPrimitive.Root bind:open {...restProps} />
diff --git a/apps/web/src/lib/components/ui/textarea/index.ts b/apps/web/src/lib/components/ui/textarea/index.ts
new file mode 100644
index 0000000..9ccb3bf
--- /dev/null
+++ b/apps/web/src/lib/components/ui/textarea/index.ts
@@ -0,0 +1,7 @@
+import Root from './textarea.svelte';
+
+export {
+	Root,
+	//
+	Root as Textarea
+};
diff --git a/apps/web/src/lib/components/ui/textarea/textarea.svelte b/apps/web/src/lib/components/ui/textarea/textarea.svelte
new file mode 100644
index 0000000..f063b68
--- /dev/null
+++ b/apps/web/src/lib/components/ui/textarea/textarea.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef, type WithoutChildren } from '#lib/utils.ts';
+	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 placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-2.5 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm',
+		className
+	)}
+	bind:value
+	{...restProps}
+></textarea>
diff --git a/apps/web/src/lib/components/ui/toggle-group/index.ts b/apps/web/src/lib/components/ui/toggle-group/index.ts
new file mode 100644
index 0000000..0ec59de
--- /dev/null
+++ b/apps/web/src/lib/components/ui/toggle-group/index.ts
@@ -0,0 +1,10 @@
+import Item from './toggle-group-item.svelte';
+import Root from './toggle-group.svelte';
+
+export {
+	Root,
+	Item,
+	//
+	Root as ToggleGroup,
+	Item as ToggleGroupItem
+};
diff --git a/apps/web/src/lib/components/ui/toggle-group/toggle-group-item.svelte b/apps/web/src/lib/components/ui/toggle-group/toggle-group-item.svelte
new file mode 100644
index 0000000..243f306
--- /dev/null
+++ b/apps/web/src/lib/components/ui/toggle-group/toggle-group-item.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { ToggleGroup as ToggleGroupPrimitive } from 'bits-ui';
+	import { type ToggleVariants, toggleVariants } from '#lib/components/ui/toggle/index.ts';
+	import { cn } from '#lib/utils.ts';
+	import { getToggleGroupCtx } from './toggle-group.svelte';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		size,
+		variant,
+		...restProps
+	}: ToggleGroupPrimitive.ItemProps & ToggleVariants = $props();
+
+	const ctx = getToggleGroupCtx();
+</script>
+
+<ToggleGroupPrimitive.Item
+	bind:ref
+	data-slot="toggle-group-item"
+	data-variant={ctx.variant || variant}
+	data-size={ctx.size || size}
+	data-spacing={ctx.spacing}
+	class={cn(
+		'data-[state=on]:bg-muted shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:shadow-none focus:z-10 focus-visible:z-10 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-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md 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
+		}),
+		className
+	)}
+	{value}
+	{...restProps}
+/>
diff --git a/apps/web/src/lib/components/ui/toggle-group/toggle-group.svelte b/apps/web/src/lib/components/ui/toggle-group/toggle-group.svelte
new file mode 100644
index 0000000..7de4d56
--- /dev/null
+++ b/apps/web/src/lib/components/ui/toggle-group/toggle-group.svelte
@@ -0,0 +1,75 @@
+<script lang="ts" module>
+	import { getContext, setContext } from 'svelte';
+	import { toggleVariants } from '#lib/components/ui/toggle/index.ts';
+	import type { VariantProps } from 'tailwind-variants';
+
+	type ToggleVariants = VariantProps<typeof toggleVariants>;
+
+	interface ToggleGroupContext extends ToggleVariants {
+		spacing?: number;
+		orientation?: 'horizontal' | 'vertical';
+	}
+
+	export function setToggleGroupCtx(props: ToggleGroupContext) {
+		setContext('toggleGroup', props);
+	}
+
+	export function getToggleGroupCtx() {
+		return getContext<Required<ToggleGroupContext>>('toggleGroup');
+	}
+</script>
+
+<script lang="ts">
+	import { ToggleGroup as ToggleGroupPrimitive } from 'bits-ui';
+	import { cn } from '#lib/utils.ts';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		size = 'default',
+		spacing = 0,
+		orientation = 'horizontal',
+		variant = 'default',
+		...restProps
+	}: ToggleGroupPrimitive.RootProps &
+		ToggleVariants & {
+			spacing?: number;
+			orientation?: 'horizontal' | 'vertical';
+		} = $props();
+
+	setToggleGroupCtx({
+		get variant() {
+			return variant;
+		},
+		get size() {
+			return size;
+		},
+		get spacing() {
+			return spacing;
+		},
+		get orientation() {
+			return orientation;
+		}
+	});
+</script>
+
+<!--
+Discriminated Unions + Destructing (required for bindable) do not
+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 flex-row items-center gap-[--spacing(var(--gap))] rounded-md data-vertical:flex-col data-vertical:items-stretch data-[spacing=0]:data-[variant=outline]:shadow-xs',
+		className
+	)}
+	{...restProps}
+/>
diff --git a/apps/web/src/lib/components/ui/toggle/index.ts b/apps/web/src/lib/components/ui/toggle/index.ts
new file mode 100644
index 0000000..0f18d3b
--- /dev/null
+++ b/apps/web/src/lib/components/ui/toggle/index.ts
@@ -0,0 +1,13 @@
+import Root from './toggle.svelte';
+export {
+	toggleVariants,
+	type ToggleSize,
+	type ToggleVariant,
+	type ToggleVariants
+} from './toggle.svelte';
+
+export {
+	Root,
+	//
+	Root as Toggle
+};
diff --git a/apps/web/src/lib/components/ui/toggle/toggle.svelte b/apps/web/src/lib/components/ui/toggle/toggle.svelte
new file mode 100644
index 0000000..41c07dc
--- /dev/null
+++ b/apps/web/src/lib/components/ui/toggle/toggle.svelte
@@ -0,0 +1,52 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from 'tailwind-variants';
+
+	export const toggleVariants = tv({
+		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 gap-1 rounded-md text-sm font-medium transition-[color,box-shadow] [&_svg:not([class*='size-'])]:size-4 group/toggle inline-flex items-center justify-center whitespace-nowrap outline-none hover:bg-muted 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-muted border bg-transparent shadow-xs'
+			},
+			size: {
+				default:
+					'h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+				sm: 'h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5',
+				lg: 'h-10 min-w-10 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2'
+			}
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default'
+		}
+	});
+
+	export type ToggleVariant = VariantProps<typeof toggleVariants>['variant'];
+	export type ToggleSize = VariantProps<typeof toggleVariants>['size'];
+	export type ToggleVariants = VariantProps<typeof toggleVariants>;
+</script>
+
+<script lang="ts">
+	import { Toggle as TogglePrimitive } from 'bits-ui';
+	import { cn } from '#lib/utils.ts';
+
+	let {
+		ref = $bindable(null),
+		pressed = $bindable(false),
+		class: className,
+		size = 'default',
+		variant = 'default',
+		...restProps
+	}: TogglePrimitive.RootProps & {
+		variant?: ToggleVariant;
+		size?: ToggleSize;
+	} = $props();
+</script>
+
+<TogglePrimitive.Root
+	bind:ref
+	bind:pressed
+	data-slot="toggle"
+	class={cn(toggleVariants({ variant, size }), className)}
+	{...restProps}
+/>
diff --git a/bun.lock b/bun.lock
index 906add2..dd03632 100644
--- a/bun.lock
+++ b/bun.lock
@@ -31,7 +31,7 @@
       "name": "@atlantis/web",
       "version": "0.0.1",
       "dependencies": {
-        "@lucide/svelte": "^1.33.0",
+        "@lucide/svelte": "^1.54.0",
         "@tanstack/charts": "1.0.0",
         "better-sqlite3": "^12.6.2",
         "d3-scale": "4.0.2",
@@ -52,7 +52,7 @@
         "@types/better-sqlite3": "^7.6.13",
         "@types/d3-scale": "4.0.9",
         "@types/node": "^22.15.17",
-        "bits-ui": "^2.16.3",
+        "bits-ui": "^2.18.0",
         "clsx": "^2.1.1",
         "eslint": "^9.18.0",
         "eslint-config-prettier": "^10.0.1",
@@ -424,7 +424,7 @@
 
     "@libsql/win32-x64-msvc": ["@libsql/win32-x64-msvc@0.5.29", "", { "os": "win32", "cpu": "x64" }, "sha512-4/0CvEdhi6+KjMxMaVbFM2n2Z44escBRoEYpR+gZg64DdetzGnYm8mcNLcoySaDJZNaBd6wz5DNdgRmcI4hXcg=="],
 
-    "@lucide/svelte": ["@lucide/svelte@1.33.0", "", { "peerDependencies": { "svelte": "^5" } }, "sha512-b+osTYG2V4dge5Lr7tnaTaahhy/4vH7Xb8zcqVjmctjwgkpXS0NNOJPkGzHHZoxtw/OO+2YAU28omeMfYCaawg=="],
+    "@lucide/svelte": ["@lucide/svelte@1.54.0", "", { "peerDependencies": { "svelte": "^5" } }, "sha512-PbUrcmVPU71zmcs1Kc5RlgF83SsBsSNC+MeuttAHMmvPMuoIJfyDPjit5kpAJxJwsmN2Pk1Bx75AwZxP8vkDvw=="],
 
     "@mrleebo/prisma-ast": ["@mrleebo/prisma-ast@0.13.1", "", { "dependencies": { "chevrotain": "^10.5.0", "lilconfig": "^2.1.0" } }, "sha512-XyroGQXcHrZdvmrGJvsA9KNeOOgGMg1Vg9OlheUsBOSKznLMDl+YChxbkboRHvtFYJEMRYmlV3uoo/njCw05iw=="],
 

From 8200107afef5f4135164b8d926ec10636270b781 Mon Sep 17 00:00:00 2001
From: flamboh <oliver.boorstein@gmail.com>
Date: Fri, 9 Oct 2026 00:11:46 -0700
Subject: [PATCH 2/9] feat(web): console shell, filter toolbar, KPI row and
 card menus on shadcn-svelte

---
 apps/web/src/app.css                          | 558 +++---------------
 .../components/charts/BreakdownChart.svelte   | 103 ++--
 .../src/lib/components/charts/CardMenu.svelte |  56 ++
 .../lib/components/charts/ChartCard.svelte    |  38 +-
 .../components/charts/ChartCardHeader.svelte  |  40 ++
 .../components/charts/CoverageStrip.svelte    |  15 +-
 .../charts/FlowCharacteristicsChart.svelte    |  21 +-
 .../charts/PortCardinalityChart.svelte        |  62 +-
 .../src/lib/components/charts/card-frame.ts   |  16 +
 .../components/common/ChecklistPopover.svelte |  50 ++
 .../components/common/SegmentedToggle.svelte  |  52 ++
 .../components/common/ToolbarPopover.svelte   |  66 +++
 .../components/common/ToolbarSelect.svelte    |  71 +++
 .../filters/DashboardToolbar.svelte           | 110 ++++
 .../components/filters/DateRangePicker.svelte | 126 ++++
 .../lib/components/filters/MaadOptions.svelte |  74 +++
 .../components/filters/SourcesFilter.svelte   |  62 ++
 .../filters/TrafficMetricControls.svelte      | 130 ++++
 .../src/lib/components/filters/date-range.ts  |  61 ++
 .../netflow/DashboardCardSlot.svelte          |  45 ++
 .../netflow/DatasetDashboardPage.svelte       | 178 ++----
 .../src/lib/components/netflow/KpiRow.svelte  |  92 +++
 .../netflow/NetflowDashboard.svelte           | 318 ++--------
 .../netflow/netflow-stats-data.svelte.ts      | 223 +++++++
 .../src/lib/components/shell/AppNav.svelte    |  19 +
 .../lib/components/shell/CommandMenu.svelte   |  95 +++
 .../components/shell/DatasetSwitcher.svelte   |  79 +++
 .../src/lib/components/shell/app-context.ts   |  54 ++
 .../components/ui/empty/empty-content.svelte  |  23 +
 .../ui/empty/empty-description.svelte         |  23 +
 .../components/ui/empty/empty-header.svelte   |  20 +
 .../components/ui/empty/empty-media.svelte    |  41 ++
 .../components/ui/empty/empty-title.svelte    |  20 +
 .../src/lib/components/ui/empty/empty.svelte  |  23 +
 apps/web/src/lib/components/ui/empty/index.ts |  22 +
 .../lib/components/ui/native-select/index.ts  |  12 +
 .../native-select-opt-group.svelte            |  20 +
 .../native-select/native-select-option.svelte |  20 +
 .../ui/native-select/native-select.svelte     |  40 ++
 apps/web/src/routes/+layout.svelte            |  90 +--
 .../src/routes/datasets/[dataset]/+page.ts    |   1 +
 41 files changed, 2128 insertions(+), 1041 deletions(-)
 create mode 100644 apps/web/src/lib/components/charts/CardMenu.svelte
 create mode 100644 apps/web/src/lib/components/charts/ChartCardHeader.svelte
 create mode 100644 apps/web/src/lib/components/charts/card-frame.ts
 create mode 100644 apps/web/src/lib/components/common/ChecklistPopover.svelte
 create mode 100644 apps/web/src/lib/components/common/SegmentedToggle.svelte
 create mode 100644 apps/web/src/lib/components/common/ToolbarPopover.svelte
 create mode 100644 apps/web/src/lib/components/common/ToolbarSelect.svelte
 create mode 100644 apps/web/src/lib/components/filters/DashboardToolbar.svelte
 create mode 100644 apps/web/src/lib/components/filters/DateRangePicker.svelte
 create mode 100644 apps/web/src/lib/components/filters/MaadOptions.svelte
 create mode 100644 apps/web/src/lib/components/filters/SourcesFilter.svelte
 create mode 100644 apps/web/src/lib/components/filters/TrafficMetricControls.svelte
 create mode 100644 apps/web/src/lib/components/filters/date-range.ts
 create mode 100644 apps/web/src/lib/components/netflow/DashboardCardSlot.svelte
 create mode 100644 apps/web/src/lib/components/netflow/KpiRow.svelte
 create mode 100644 apps/web/src/lib/components/netflow/netflow-stats-data.svelte.ts
 create mode 100644 apps/web/src/lib/components/shell/AppNav.svelte
 create mode 100644 apps/web/src/lib/components/shell/CommandMenu.svelte
 create mode 100644 apps/web/src/lib/components/shell/DatasetSwitcher.svelte
 create mode 100644 apps/web/src/lib/components/shell/app-context.ts
 create mode 100644 apps/web/src/lib/components/ui/empty/empty-content.svelte
 create mode 100644 apps/web/src/lib/components/ui/empty/empty-description.svelte
 create mode 100644 apps/web/src/lib/components/ui/empty/empty-header.svelte
 create mode 100644 apps/web/src/lib/components/ui/empty/empty-media.svelte
 create mode 100644 apps/web/src/lib/components/ui/empty/empty-title.svelte
 create mode 100644 apps/web/src/lib/components/ui/empty/empty.svelte
 create mode 100644 apps/web/src/lib/components/ui/empty/index.ts
 create mode 100644 apps/web/src/lib/components/ui/native-select/index.ts
 create mode 100644 apps/web/src/lib/components/ui/native-select/native-select-opt-group.svelte
 create mode 100644 apps/web/src/lib/components/ui/native-select/native-select-option.svelte
 create mode 100644 apps/web/src/lib/components/ui/native-select/native-select.svelte

diff --git a/apps/web/src/app.css b/apps/web/src/app.css
index 06a11ba..664d506 100644
--- a/apps/web/src/app.css
+++ b/apps/web/src/app.css
@@ -5,8 +5,13 @@
 @custom-variant dark (&:where(.dark, .dark *));
 
 @theme {
-	--font-body: ui-sans-serif, system-ui, sans-serif;
-	--font-sans: ui-sans-serif, system-ui, sans-serif;
+	--font-sans:
+		Inter, 'Inter Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
+	--font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
+	--color-selection: var(--selection);
+	--color-selection-foreground: var(--selection-foreground);
+	--color-success: var(--success);
+	--color-warning: var(--warning);
 	--color-sidebar-ring: var(--sidebar-ring);
 	--color-sidebar-border: var(--sidebar-border);
 	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -48,44 +53,35 @@
 }
 
 :root {
-	--neutral-0: #ffffff;
-	--neutral-50: #f5f7fa;
-	--neutral-100: #edf1f6;
-	--neutral-200: #dce3ec;
-	--neutral-300: #bac6d5;
-	--neutral-500: #627086;
-	--neutral-700: #334155;
-	--neutral-900: #182233;
-	--background: var(--neutral-50);
-	--foreground: var(--neutral-900);
-	--card: var(--neutral-0);
+	--background: #fafafa;
+	--foreground: #0a0a0a;
+	--card: #ffffff;
 	--card-foreground: var(--foreground);
-	--popover: var(--card);
+	--popover: #ffffff;
 	--popover-foreground: var(--foreground);
 	--primary: #2563eb;
 	--primary-foreground: #ffffff;
-	--secondary: var(--neutral-100);
-	--secondary-foreground: var(--neutral-700);
-	--muted: var(--neutral-100);
-	--muted-foreground: #56657a;
-	--accent: #eaf0ff;
-	--accent-foreground: #1d4ed8;
-	--destructive: #bd303d;
-	--success: #087f6a;
-	--warning: #956500;
+	--secondary: #f5f5f5;
+	--secondary-foreground: #171717;
+	--muted: #f5f5f5;
+	--muted-foreground: #666666;
+	--accent: #f2f2f2;
+	--accent-foreground: #0a0a0a;
+	--selection: #eff6ff;
+	--selection-foreground: #1d4ed8;
+	--destructive: #dc2626;
+	--success: #15803d;
+	--warning: #a16207;
 	--info: #2563eb;
-	--border: var(--neutral-200);
-	--input: var(--neutral-300);
-	--ring: var(--primary);
-	--radius: 0.375rem;
-	--space-panel: 1rem;
-	--type-label: 0.75rem;
-	--type-body: 0.875rem;
-	--type-title: 1.5rem;
-	--elevation-popover: 0 6px 24px #18223318;
-	--chart-text-color: #56657a;
-	--chart-grid-color: #dce3ec;
-	--chart-grid-highlight-color: #edf1f6;
+	--border: #e5e5e5;
+	--input: #dedede;
+	--ring: #2563eb;
+	--radius: 0.5rem;
+	--shadow-card: 0 1px 2px #0000000a;
+	--elevation-popover: 0 8px 30px -8px #00000029;
+	--chart-text-color: #737373;
+	--chart-grid-color: #ebebeb;
+	--chart-grid-highlight-color: #f5f5f5;
 	--chart-tooltip-bg: var(--popover);
 	--chart-tooltip-text-color: var(--foreground);
 	--chart-tooltip-border-color: var(--border);
@@ -117,24 +113,33 @@
 	--sidebar-ring: var(--ring);
 }
 .dark {
-	--neutral-0: #171f2c;
-	--neutral-50: #101722;
-	--neutral-100: #202b3b;
-	--neutral-200: #303d50;
-	--neutral-300: #45556c;
-	--neutral-500: #a3b2c7;
-	--neutral-700: #cfdae9;
-	--neutral-900: #eaf0f8;
-	--muted-foreground: #a3b2c7;
-	--accent: #203359;
-	--accent-foreground: #a8c5ff;
-	--destructive: #f18d96;
-	--success: #62c6b1;
-	--warning: #e8b951;
+	--background: #0a0a0a;
+	--foreground: #ededed;
+	--card: #111111;
+	--popover: #171717;
+	--primary: #2563eb;
+	--primary-foreground: #ffffff;
+	--secondary: #1f1f1f;
+	--secondary-foreground: #ededed;
+	--muted: #1c1c1c;
+	--muted-foreground: #a1a1a1;
+	--accent: #232323;
+	--accent-foreground: #ededed;
+	--selection: #172554;
+	--selection-foreground: #93c5fd;
+	--destructive: #f87171;
+	--success: #4ade80;
+	--warning: #facc15;
+	--info: #60a5fa;
+	--border: #262626;
+	--input: #333333;
+	--ring: #3b82f6;
+	--shadow-card: 0 1px 2px #00000066;
+	--elevation-popover: 0 8px 30px -8px #000000b3;
 	--chart-spectrum-lightness: 60;
-	--chart-text-color: #a3b2c7;
-	--chart-grid-color: #303d50;
-	--chart-grid-highlight-color: #202b3b;
+	--chart-text-color: #8f8f8f;
+	--chart-grid-color: #262626;
+	--chart-grid-highlight-color: #1c1c1c;
 	--chart-series-1: #689bff;
 	--chart-series-2: #e5b44c;
 	--chart-series-3: #56c8bb;
@@ -144,7 +149,6 @@
 	--chart-series-7: #b3a0e3;
 	--chart-series-8: #b4bdc9;
 	--chart-series-other: #8a9aaf;
-	--elevation-popover: 0 6px 24px #00000040;
 	color-scheme: dark;
 }
 
@@ -174,53 +178,30 @@ body {
 	}
 }
 
-.page-layout,
-.shell-width {
+.shell {
 	width: 100%;
 	max-width: 1920px;
 	margin-inline: auto;
-	padding-inline: clamp(1rem, 2.5vw, 3rem);
-}
-.page-layout {
-	padding-block: 1.5rem;
+	padding-inline: clamp(1rem, 2.5vw, 2rem);
 }
-.page-heading {
-	font-size: var(--type-title);
-	font-weight: 600;
-	letter-spacing: -0.035em;
-	line-height: 1.3;
-}
-.page-eyebrow {
-	color: var(--muted-foreground);
-	font-size: var(--type-label);
-	margin-bottom: 0.375rem;
+.page {
+	padding-block: 1.25rem 2rem;
 }
 body {
-	font-size: var(--type-body);
+	font-size: 0.875rem;
 	font-variant-numeric: tabular-nums;
+	-webkit-font-smoothing: antialiased;
 }
 :focus-visible {
 	outline: 2px solid var(--ring);
-	outline-offset: 3px;
+	outline-offset: 2px;
 }
 ::selection {
-	background: var(--accent);
-	color: var(--accent-foreground);
+	background: var(--selection);
+	color: var(--selection-foreground);
 }
 [data-slot='card'] {
-	box-shadow: none;
-}
-[data-slot='card-title'] {
-	line-height: 1.4;
-}
-[data-drag-handle] {
-	padding-block: 0.875rem;
-}
-[data-drag-handle] h2 {
-	font-size: 0.875rem;
-	font-weight: 600;
-	letter-spacing: -0.01em;
-	padding-right: 5rem;
+	box-shadow: var(--shadow-card);
 }
 .chart-frame {
 	background: var(--card);
@@ -239,14 +220,16 @@ body {
 .ts-chart-host {
 	font-variant-numeric: tabular-nums;
 }
+.ts-chart__interactive-legend {
+	pointer-events: none !important;
+}
 .ts-chart__interactive-legend button {
+	pointer-events: auto !important;
 	border: 0 !important;
-	border-radius: 3px !important;
+	border-radius: 4px !important;
 	background: transparent !important;
 	color: var(--chart-text-color) !important;
-	font:
-		500 12px/1.25 system-ui,
-		sans-serif !important;
+	font: 500 12px/1.25 var(--font-sans) !important;
 }
 .ts-chart__interactive-legend button:hover {
 	background: var(--muted) !important;
@@ -258,24 +241,6 @@ body {
 table {
 	font-variant-numeric: tabular-nums;
 }
-th {
-	color: var(--muted-foreground);
-	font-size: var(--type-label);
-	font-weight: 500;
-}
-@media (max-width: 639px) {
-	.page-layout {
-		padding-block: 1rem;
-	}
-	.chart-frame.traffic-frame {
-		--chart-height: 380px;
-	}
-	.file-filters > div {
-		width: 100%;
-		flex-direction: column;
-		align-items: stretch;
-	}
-}
 @media (prefers-reduced-motion: reduce) {
 	*,
 	*::before,
@@ -284,380 +249,3 @@ th {
 		transition-duration: 0.01ms !important;
 	}
 }
-
-.ts-chart__interactive-legend {
-	pointer-events: none !important;
-}
-.ts-chart__interactive-legend button {
-	pointer-events: auto !important;
-}
-
-.app-topbar .shell-width {
-	padding-inline: clamp(0.75rem, 1.5vw, 1.5rem);
-}
-.console-page {
-	width: 100%;
-	max-width: 1920px;
-	margin-inline: auto;
-	padding: 1rem clamp(0.75rem, 1.5vw, 1.5rem) 1.5rem;
-}
-.console-heading {
-	display: flex;
-	align-items: end;
-	justify-content: space-between;
-	gap: 1.5rem;
-	margin-bottom: 1rem;
-}
-.console-heading .page-heading {
-	font-size: 1.25rem;
-}
-.console-heading .dataset-tabs {
-	border-bottom: 0;
-}
-.console-body {
-	display: grid;
-	grid-template-columns: 12.5rem minmax(0, 1fr);
-	gap: 1rem;
-	align-items: start;
-}
-.console-body.rail-collapsed {
-	grid-template-columns: minmax(0, 1fr);
-}
-.console-rail {
-	position: sticky;
-	top: 1rem;
-	min-width: 0;
-	max-height: calc(100dvh - 7rem);
-	overflow-y: auto;
-	padding: 0.75rem;
-	background: var(--card);
-	border: 1px solid var(--border);
-	border-top: 2px solid var(--primary);
-}
-.console-toolbar {
-	position: sticky;
-	top: 0;
-	z-index: 20;
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: 0.5rem;
-	margin-bottom: 1rem;
-	padding: 0.75rem;
-	background: var(--card);
-	border: 1px solid var(--border);
-}
-.console-toolbar .date-range-filter {
-	flex: 1 1 28rem;
-}
-.console-toolbar .rail-toggle,
-.console-toolbar .reset-view,
-.console-toolbar input[type='date'] {
-	height: 2.25rem;
-}
-.console-toolbar .date-range-filter {
-	align-items: center;
-	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
-	gap: 0.5rem;
-}
-.console-toolbar .date-range-filter > div {
-	display: flex;
-	align-items: center;
-	gap: 0.5rem;
-}
-.console-toolbar .date-range-filter label {
-	margin: 0;
-	flex-shrink: 0;
-}
-.console-toolbar .date-range-filter > span {
-	padding: 0;
-}
-.filter-summary {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 0.375rem;
-	flex-basis: 100%;
-	order: 4;
-	padding-top: 0.5rem;
-	border-top: 1px solid var(--border);
-	font-size: 0.6875rem;
-	color: var(--muted-foreground);
-}
-.filter-summary span {
-	white-space: nowrap;
-	padding: 0.125rem 0.5rem;
-	border: 1px solid var(--border);
-	border-radius: 0.25rem;
-	background: var(--muted);
-}
-.rail-heading {
-	font-size: 0.75rem;
-	font-weight: 600;
-	margin-bottom: 0.75rem;
-}
-.rail-section {
-	padding-block: 1rem;
-	border-bottom: 1px solid var(--border);
-}
-.rail-section:first-child {
-	padding-top: 0;
-}
-.primary-filters .router-filter {
-	display: block;
-}
-.primary-filters .router-filter > span {
-	display: block;
-	font-size: 0.75rem;
-	color: var(--muted-foreground);
-	margin-bottom: 0.5rem;
-}
-.primary-filters .router-filter > div {
-	flex-direction: column;
-	align-items: stretch;
-	gap: 0.25rem;
-}
-.primary-filters .router-filter label span {
-	overflow-wrap: anywhere;
-	min-width: 0;
-	font-size: 0.8125rem;
-}
-.primary-filters [role='group']:not([aria-label='MAAD options']) {
-	width: 100%;
-}
-.primary-filters [aria-label='Traffic direction'],
-.primary-filters [aria-label='Granularity'],
-.primary-filters [aria-label='MAAD measure'] {
-	grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-.primary-filters [aria-label='Granularity'] > :last-child,
-.primary-filters [aria-label='Traffic direction'] > :first-child,
-.primary-filters [aria-label='MAAD measure'] > :first-child {
-	grid-column: 1 / -1;
-}
-.primary-filters [role='group'] button,
-.primary-filters .router-filter label {
-	min-height: 2.75rem;
-}
-.primary-filters .router-filter label {
-	display: flex;
-	align-items: center;
-}
-
-@media (pointer: fine) {
-	.console-rail .primary-filters [role='group'] button {
-		height: 2rem;
-		min-height: 2rem;
-	}
-	.console-rail .primary-filters .router-filter label {
-		min-height: 2rem;
-	}
-	.console-rail .rail-section {
-		padding-block: 0.25rem;
-	}
-	.console-rail .rail-heading {
-		margin-bottom: 0.5rem;
-	}
-	.console-rail .rail-section:first-child > div {
-		margin-bottom: 0.25rem;
-	}
-	.console-rail .rail-section:first-child .rail-heading {
-		margin-bottom: 0;
-	}
-	.console-rail .rail-section:first-child {
-		padding-top: 0;
-	}
-}
-
-.card-actions {
-	position: absolute;
-	top: 0.25rem;
-	right: 0.5rem;
-	z-index: 10;
-	display: flex;
-	align-items: center;
-	gap: 0.125rem;
-}
-.card-actions button {
-	height: 2.25rem;
-	width: 2.25rem;
-}
-.chart-panels [data-drag-handle] {
-	min-height: 2.75rem;
-	padding-right: 10.5rem;
-}
-.chart-panels [data-drag-handle] h2 {
-	padding-right: 0;
-}
-.chart-panels > section > [data-slot='card'] {
-	border-radius: 0;
-}
-.chart-panels [data-drag-handle] {
-	background: var(--card);
-	padding-block: 0.75rem;
-}
-.chart-panels [data-slot='card-content'] {
-	padding: 0;
-}
-.chart-panels .chart-frame {
-	padding: 0.75rem;
-}
-.chart-panels .metric-selector {
-	padding: 0.5rem 0.75rem;
-	border-bottom: 1px solid var(--border);
-	background: var(--muted);
-}
-.metric-toolbar > [role='group'] {
-	width: auto;
-	margin-left: auto;
-}
-.metric-quickselect [role='group'] {
-	width: auto;
-}
-.metric-toolbar [role='group'] {
-	background: var(--card);
-}
-.chart-panels .traffic-frame {
-	--chart-height: 520px;
-}
-.chart-panels > [data-chart-id='dashboard'][data-chart-activated='false'] {
-	min-height: 740px !important;
-}
-.chart-panels [data-slot='card-content'] > [role='group'],
-.chart-panels [data-slot='card-content'] > .flex,
-.chart-panels [data-slot='card-content'] > .grid {
-	padding: 0.75rem;
-	margin: 0;
-	border-bottom: 1px solid var(--border);
-}
-.control-popover {
-	max-height: calc(100dvh - 2rem);
-	overflow-y: auto;
-}
-.file-summary {
-	padding: 1rem;
-}
-.file-router-card {
-	display: grid;
-	grid-template-columns: minmax(16rem, 0.8fr) minmax(0, 2fr);
-}
-.file-router-card > .file-summary {
-	border-right: 1px solid var(--border);
-	border-bottom: 0;
-}
-.file-router-card .file-metrics {
-	grid-template-columns: minmax(0, 1fr);
-}
-@media (min-width: 1600px) {
-	.file-router-card .file-metrics {
-		grid-template-columns: repeat(2, minmax(0, 1fr));
-	}
-}
-.catalog {
-	border: 1px solid var(--border);
-	background: var(--card);
-}
-.catalog-row {
-	display: grid;
-	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
-	align-items: center;
-	gap: 1rem;
-	padding: 1rem;
-	border-bottom: 1px solid var(--border);
-}
-.catalog-row:last-child {
-	border-bottom: 0;
-}
-.catalog-row:hover {
-	background: var(--accent);
-}
-.catalog-header {
-	color: var(--muted-foreground);
-	font-size: 0.75rem;
-	padding-block: 0.625rem;
-	background: var(--muted);
-}
-.file-context p {
-	margin-bottom: 0.5rem;
-	overflow-wrap: anywhere;
-}
-@media (max-width: 1279px) {
-	.file-router-card {
-		grid-template-columns: minmax(0, 1fr);
-	}
-	.file-router-card > .file-summary {
-		border-right: 0;
-		border-bottom: 1px solid var(--border);
-	}
-}
-@media (max-width: 1023px) {
-	.console-body {
-		grid-template-columns: minmax(0, 1fr);
-	}
-	.console-heading {
-		align-items: start;
-	}
-	.console-toolbar .date-range-filter {
-		flex: 1 1 28rem;
-	}
-	.filter-sheet .primary-filters {
-		width: 100%;
-	}
-}
-@media (max-width: 639px) {
-	.console-heading {
-		flex-direction: column;
-		gap: 0.25rem;
-	}
-	.console-heading .dataset-tabs {
-		width: 100%;
-	}
-	.console-toolbar {
-		gap: 0.5rem;
-		padding: 0.625rem;
-	}
-	.console-toolbar .date-range-filter {
-		order: 3;
-		flex-basis: 100%;
-	}
-	.console-toolbar .date-range-filter > div {
-		display: block;
-	}
-	.console-toolbar .date-range-filter label {
-		margin-bottom: 0.25rem;
-	}
-	.console-toolbar .date-range-filter {
-		align-items: end;
-	}
-	.console-toolbar .date-range-filter > span {
-		padding-bottom: 0.5rem;
-	}
-	.filter-summary {
-		flex-basis: 100%;
-		order: 4;
-	}
-	.metric-toolbar > [role='group'] {
-		margin-left: 0;
-	}
-	.metric-quickselect {
-		width: 100%;
-	}
-	.metric-quickselect [role='group'] {
-		width: 100%;
-	}
-	.chart-panels .traffic-frame {
-		--chart-height: 400px;
-	}
-	.chart-panels > [data-chart-id='dashboard'][data-chart-activated='false'] {
-		min-height: 560px !important;
-	}
-	.catalog-row {
-		grid-template-columns: minmax(0, 1fr) auto;
-	}
-	.catalog-row .catalog-mode {
-		grid-column: 1;
-		grid-row: 2;
-	}
-	.catalog-header {
-		display: none;
-	}
-}
diff --git a/apps/web/src/lib/components/charts/BreakdownChart.svelte b/apps/web/src/lib/components/charts/BreakdownChart.svelte
index ac31cb1..f90f6cc 100644
--- a/apps/web/src/lib/components/charts/BreakdownChart.svelte
+++ b/apps/web/src/lib/components/charts/BreakdownChart.svelte
@@ -19,9 +19,10 @@
 	import { navigateToNetflowFile } from '#lib/utils/netflow-file-navigation.ts';
 	import { dateStringToEpochPST, formatDateAsPSTDateString } from '#lib/utils/timezone.ts';
 	import { ensureCachedWindow, readCachedWindow, type TimeRange } from '#lib/utils/window-cache.ts';
-	import { Checkbox } from '#lib/components/ui/checkbox/index.ts';
 	import { Skeleton } from '#lib/components/ui/skeleton/index.ts';
-	import SegmentedControl from '#lib/components/common/SegmentedControl.svelte';
+	import ChecklistPopover from '#lib/components/common/ChecklistPopover.svelte';
+	import SegmentedToggle from '#lib/components/common/SegmentedToggle.svelte';
+	import ToolbarSelect from '#lib/components/common/ToolbarSelect.svelte';
 	import ChartCard from './ChartCard.svelte';
 	import { getSourceLineDash } from './flow-characteristics';
 	import { sourceSeriesColor, categoricalSeriesColor } from './chart-colors';
@@ -210,6 +211,10 @@
 		activeMetrics = next;
 		props.onMetricsChange?.({ metrics: next as MetricsForKind<Kind> });
 	}
+	function handleSetAllMetrics(checked: boolean) {
+		activeMetrics = checked ? config.metrics.map((metric) => metric.key) : [];
+		props.onMetricsChange?.({ metrics: activeMetrics as MetricsForKind<Kind> });
+	}
 	function handleRouterChange(router: string) {
 		props.onRouterChange?.({ router });
 	}
@@ -440,65 +445,53 @@
 >
 	{#snippet controls()}
 		{#if props.kind === 'spectrum'}
-			<div class="flex flex-wrap items-center gap-3">
-				{#if (props.availableRouters ?? []).length === 0}
-					<Skeleton class="h-9 w-48" aria-hidden="true" />
-				{:else}
-					<SegmentedControl
-						options={(props.availableRouters ?? []).map((routerName: string) => ({
-							value: routerName,
-							label: routerName
-						}))}
-						value={props.router ?? null}
-						onValueChange={handleRouterChange}
-						ariaLabel="Spectrum source"
-						class="flex flex-wrap"
-						buttonClass="w-auto sm:min-w-20"
-					/>
-				{/if}
-				<SegmentedControl
-					options={DIMENSION_SIDE_OPTIONS}
-					value={addressType}
-					onValueChange={handleAddressTypeChange}
-					ariaLabel="Spectrum address side"
-					class="grid-cols-2"
-					buttonClass="sm:min-w-20"
+			{#if (props.availableRouters ?? []).length === 0}
+				<Skeleton class="h-8 w-32" aria-hidden="true" />
+			{:else}
+				<ToolbarSelect
+					label="Source"
+					variant="ghost"
+					value={props.router ?? ''}
+					options={(props.availableRouters ?? []).map((routerName: string) => ({
+						value: routerName,
+						label: routerName
+					}))}
+					onValueChange={handleRouterChange}
 				/>
-			</div>
+			{/if}
+			<SegmentedToggle
+				options={DIMENSION_SIDE_OPTIONS}
+				value={addressType}
+				onValueChange={handleAddressTypeChange}
+				ariaLabel="Spectrum address side"
+			/>
 		{:else if config.seriesByRouter}
 			{@const selected = splitDimensionMetricKey(
 				(activeMetrics[0] ?? config.defaultMetrics[0]) as DimensionMetricKey
 			)}
-			<div class="flex flex-wrap items-center gap-3">
-				<SegmentedControl
-					options={DIMENSION_SIDE_OPTIONS}
-					value={selected.side}
-					onValueChange={(side) => handleDimensionChange(side, selected.order)}
-					ariaLabel="MAAD address side"
-					class="grid-cols-2"
-					buttonClass="sm:min-w-20"
-				/>
-				<SegmentedControl
-					options={DIMENSION_ORDER_OPTIONS}
-					value={selected.order}
-					onValueChange={(order) => handleDimensionChange(selected.side, order)}
-					ariaLabel="MAAD dimension"
-					class="grid-cols-3"
-					buttonClass="sm:min-w-12"
-				/>
-			</div>
+			<SegmentedToggle
+				options={DIMENSION_SIDE_OPTIONS}
+				value={selected.side}
+				onValueChange={(side) => handleDimensionChange(side, selected.order)}
+				ariaLabel="MAAD address side"
+			/>
+			<SegmentedToggle
+				options={DIMENSION_ORDER_OPTIONS}
+				value={selected.order}
+				onValueChange={(order) => handleDimensionChange(selected.side, order)}
+				ariaLabel="MAAD dimension"
+			/>
 		{:else}
-			<div class="flex flex-wrap items-center gap-4">
-				{#each config.metrics as metric (metric.key)}
-					<label class="text-foreground flex cursor-pointer items-center gap-2 text-sm">
-						<Checkbox
-							checked={activeMetrics.includes(metric.key)}
-							onCheckedChange={() => handleMetricToggle(metric.key)}
-						/>
-						<span>{metric.label}</span>
-					</label>
-				{/each}
-			</div>
+			<ChecklistPopover
+				dialogLabel={`${config.title} metrics`}
+				items={config.metrics.map((metric) => ({
+					key: metric.key,
+					label: metric.label,
+					checked: activeMetrics.includes(metric.key)
+				}))}
+				onToggle={handleMetricToggle}
+				onSetAll={handleSetAllMetrics}
+			/>
 		{/if}
 	{/snippet}
 
diff --git a/apps/web/src/lib/components/charts/CardMenu.svelte b/apps/web/src/lib/components/charts/CardMenu.svelte
new file mode 100644
index 0000000..6c28abc
--- /dev/null
+++ b/apps/web/src/lib/components/charts/CardMenu.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { tick } from 'svelte';
+	import { ArrowDown, ArrowUp, Ellipsis, Minus, Plus } from '@lucide/svelte';
+	import { Button } from '#lib/components/ui/button/index.ts';
+	import * as DropdownMenu from '#lib/components/ui/dropdown-menu/index.ts';
+	import type { CardFrame } from './card-frame.ts';
+
+	let { frame }: { frame: CardFrame } = $props();
+	let trigger = $state<HTMLButtonElement | null>(null);
+</script>
+
+<DropdownMenu.Root>
+	<DropdownMenu.Trigger>
+		{#snippet child({ props })}
+			<Button
+				{...props}
+				bind:ref={trigger}
+				variant="ghost"
+				size="icon-sm"
+				class="text-muted-foreground hover:text-foreground"
+				aria-label={`${frame.title} card options`}
+				data-card-menu-trigger
+			>
+				<Ellipsis class="size-4" />
+			</Button>
+		{/snippet}
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content
+		align="end"
+		class="w-44"
+		onCloseAutoFocus={(event) => {
+			event.preventDefault();
+			// Moving a card re-inserts its DOM node, so restore focus once the list has settled.
+			void tick().then(() => trigger?.focus());
+		}}
+	>
+		<DropdownMenu.Group>
+			<DropdownMenu.Label class="text-muted-foreground truncate text-xs font-normal"
+				>{frame.title}</DropdownMenu.Label
+			>
+			<DropdownMenu.Item disabled={frame.first} onSelect={() => frame.move(-1)}
+				><ArrowUp />Move up</DropdownMenu.Item
+			>
+			<DropdownMenu.Item disabled={frame.last} onSelect={() => frame.move(1)}
+				><ArrowDown />Move down</DropdownMenu.Item
+			>
+		</DropdownMenu.Group>
+		{#if frame.resizable}
+			<DropdownMenu.Separator />
+			<DropdownMenu.Group>
+				<DropdownMenu.Item onSelect={() => frame.resize(80)}><Plus />Taller</DropdownMenu.Item>
+				<DropdownMenu.Item onSelect={() => frame.resize(-80)}><Minus />Shorter</DropdownMenu.Item>
+			</DropdownMenu.Group>
+		{/if}
+	</DropdownMenu.Content>
+</DropdownMenu.Root>
diff --git a/apps/web/src/lib/components/charts/ChartCard.svelte b/apps/web/src/lib/components/charts/ChartCard.svelte
index 0d0d0cd..bd52937 100644
--- a/apps/web/src/lib/components/charts/ChartCard.svelte
+++ b/apps/web/src/lib/components/charts/ChartCard.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import ChartLoading from '#lib/components/charts/ChartLoading.svelte';
-	import DragGrip from '#lib/components/common/DragGrip.svelte';
+	import ChartCardHeader from './ChartCardHeader.svelte';
 	import * as Card from '#lib/components/ui/card/index.ts';
 	import type { Snippet } from 'svelte';
 
@@ -53,42 +53,28 @@
 						? 'empty'
 						: 'ready'}
 >
-	<Card.Header
-		class="border-border relative cursor-grab border-b py-4 select-none active:cursor-grabbing"
-		draggable="true"
-		data-drag-handle
-	>
-		<Card.Title class="flex items-baseline gap-3 text-lg font-semibold">
-			<h2>{title}</h2>
-			{#if subtitle}
-				<span class="text-muted-foreground text-sm font-normal">{subtitle}</span>
-			{/if}
-		</Card.Title>
-		<DragGrip />
-	</Card.Header>
+	<ChartCardHeader {title} {subtitle} controls={unavailableCopy ? undefined : controls} />
 
-	<Card.Content class="space-y-4 py-4">
+	<Card.Content class="p-0">
 		{#if unavailableCopy}
 			<div
-				class="border-border bg-background/60 text-muted-foreground flex min-h-32 items-center justify-center rounded-md border px-6 py-8 text-center"
+				class="text-muted-foreground flex min-h-40 items-center justify-center px-6 py-8 text-center text-sm"
 				data-testid="chart-unavailable"
 			>
 				{unavailableCopy}
 			</div>
 		{:else}
-			{@render controls?.()}
-
 			<div
 				class={size === 'spectrum'
-					? 'chart-frame relative h-[400px] min-h-[300px] resize-y overflow-hidden rounded-md border [--chart-height:400px]'
+					? 'chart-frame relative h-[400px] min-h-[300px] resize-y overflow-hidden p-3 [--chart-height:400px]'
 					: size === 'split'
-						? 'chart-frame relative h-[640px] min-h-[520px] resize-y overflow-hidden rounded-md border [--chart-height:640px] xl:h-[320px] xl:min-h-[240px] xl:[--chart-height:320px]'
-						: 'chart-frame relative h-[320px] min-h-[240px] resize-y overflow-hidden rounded-md border'}
+						? 'chart-frame relative h-[640px] min-h-[520px] resize-y overflow-hidden p-3 [--chart-height:640px] xl:h-[320px] xl:min-h-[240px] xl:[--chart-height:320px]'
+						: 'chart-frame relative h-[320px] min-h-[240px] resize-y overflow-hidden p-3'}
 				role="presentation"
 			>
 				{#if selectionUnavailableCopy}
 					<div
-						class="text-muted-foreground flex h-full items-center justify-center px-6 text-center"
+						class="text-muted-foreground flex h-full items-center justify-center px-6 text-center text-sm"
 						data-testid="chart-selection-unavailable"
 					>
 						{selectionUnavailableCopy}
@@ -96,13 +82,15 @@
 				{:else if loading}
 					<ChartLoading label={loadingCopy} />
 				{:else if error}
-					<div class="text-destructive flex h-full items-center justify-center">{error}</div>
+					<div class="text-destructive flex h-full items-center justify-center text-sm">
+						{error}
+					</div>
 				{:else if noMetrics}
-					<div class="text-muted-foreground flex h-full items-center justify-center">
+					<div class="text-muted-foreground flex h-full items-center justify-center text-sm">
 						{noMetricsCopy}
 					</div>
 				{:else if empty}
-					<div class="text-muted-foreground flex h-full items-center justify-center">
+					<div class="text-muted-foreground flex h-full items-center justify-center text-sm">
 						{emptyCopy}
 					</div>
 				{:else}
diff --git a/apps/web/src/lib/components/charts/ChartCardHeader.svelte b/apps/web/src/lib/components/charts/ChartCardHeader.svelte
new file mode 100644
index 0000000..3373ad5
--- /dev/null
+++ b/apps/web/src/lib/components/charts/ChartCardHeader.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { GripVertical } from '@lucide/svelte';
+	import type { Snippet } from 'svelte';
+	import CardMenu from './CardMenu.svelte';
+	import { optionalCardFrame } from './card-frame.ts';
+
+	let {
+		title,
+		subtitle = null,
+		controls
+	}: { title: string; subtitle?: string | null; controls?: Snippet } = $props();
+
+	const frame = optionalCardFrame();
+</script>
+
+<div
+	class="chart-card-header border-border flex min-h-12 flex-wrap items-center gap-x-3 gap-y-2 border-b px-3 py-2"
+>
+	<div
+		class={[
+			'flex min-w-0 flex-1 items-center gap-1 self-stretch',
+			frame && 'cursor-grab select-none active:cursor-grabbing'
+		]}
+		draggable={frame ? 'true' : undefined}
+		data-drag-handle={frame ? '' : undefined}
+	>
+		{#if frame}<GripVertical
+				class="text-muted-foreground/50 -ml-1 size-4 shrink-0"
+				aria-hidden="true"
+			/>{/if}
+		<h2 class="text-foreground truncate text-sm font-semibold tracking-tight">{title}</h2>
+		{#if subtitle}<span class="text-muted-foreground ml-1.5 truncate text-xs">{subtitle}</span>{/if}
+	</div>
+	{#if controls || frame}
+		<div class="ml-auto flex flex-wrap items-center justify-end gap-1.5">
+			{@render controls?.()}
+			{#if frame}<CardMenu {frame} />{/if}
+		</div>
+	{/if}
+</div>
diff --git a/apps/web/src/lib/components/charts/CoverageStrip.svelte b/apps/web/src/lib/components/charts/CoverageStrip.svelte
index 9624757..555e774 100644
--- a/apps/web/src/lib/components/charts/CoverageStrip.svelte
+++ b/apps/web/src/lib/components/charts/CoverageStrip.svelte
@@ -33,7 +33,7 @@
 </script>
 
 <script lang="ts">
-	import DragGrip from '#lib/components/common/DragGrip.svelte';
+	import ChartCardHeader from './ChartCardHeader.svelte';
 	import type { BucketCoverage, CoverageState } from '#lib/types/types.ts';
 	import type { GroupByOption, RouterConfig } from '#lib/components/netflow/types.ts';
 	import { dateStringToEpochPST } from '#lib/utils/timezone.ts';
@@ -262,7 +262,7 @@
 </script>
 
 <div
-	class="bg-card rounded-lg border shadow-sm"
+	class="bg-card text-card-foreground rounded-lg border shadow-(--shadow-card)"
 	data-testid="coverage-strip-card"
 	data-state={loading
 		? 'loading'
@@ -272,20 +272,13 @@
 				? 'empty'
 				: 'ready'}
 >
-	<div
-		class="relative cursor-grab border-b p-3 select-none active:cursor-grabbing"
-		draggable="true"
-		data-drag-handle
-	>
-		<h2 class="text-foreground text-sm font-semibold">Coverage</h2>
-		<DragGrip />
-	</div>
+	<ChartCardHeader title="Coverage" />
 
 	<div class="px-3 py-2">
 		{#if loading}
 			<div class="text-muted-foreground py-1 text-xs">Loading coverage...</div>
 		{:else if error}
-			<div class="py-1 text-xs text-red-500">{error}</div>
+			<div class="text-destructive py-1 text-xs">{error}</div>
 		{:else if visibleTimelines.length === 0}
 			<div class="text-muted-foreground py-1 text-xs">No coverage available</div>
 		{:else}
diff --git a/apps/web/src/lib/components/charts/FlowCharacteristicsChart.svelte b/apps/web/src/lib/components/charts/FlowCharacteristicsChart.svelte
index a1bd603..2e6d2f6 100644
--- a/apps/web/src/lib/components/charts/FlowCharacteristicsChart.svelte
+++ b/apps/web/src/lib/components/charts/FlowCharacteristicsChart.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import ChartCard from './ChartCard.svelte';
+	import SegmentedToggle from '#lib/components/common/SegmentedToggle.svelte';
 	import MetricLinePanel, { type MetricLineSeries } from './MetricLinePanel.svelte';
 	import { indexObservationBuckets, type IndexedObservationBucket } from './flow-characteristics';
 	import type { GroupByOption } from '#lib/components/netflow/types.ts';
@@ -108,20 +109,12 @@
 	emptyCopy="No flow characteristics for the selected filters"
 >
 	{#snippet controls()}
-		<div class="flex flex-wrap items-center gap-4" role="group" aria-label="IP family">
-			{#each IP_FAMILY_OPTIONS as option (option.value)}
-				<label class="text-foreground flex cursor-pointer items-center gap-2 text-sm">
-					<input
-						type="radio"
-						name="flow-characteristics-ip-family"
-						checked={observationFamily === option.value}
-						onchange={() => (observationFamily = option.value)}
-						class="border-input accent-primary focus-visible:ring-ring size-4 focus-visible:ring-2"
-					/>
-					<span>{option.label}</span>
-				</label>
-			{/each}
-		</div>
+		<SegmentedToggle
+			options={IP_FAMILY_OPTIONS}
+			value={observationFamily}
+			onValueChange={(family) => (observationFamily = family)}
+			ariaLabel="IP family"
+		/>
 	{/snippet}
 
 	<div class="grid h-full gap-4 xl:grid-cols-2">
diff --git a/apps/web/src/lib/components/charts/PortCardinalityChart.svelte b/apps/web/src/lib/components/charts/PortCardinalityChart.svelte
index b2b408d..5e71fc1 100644
--- a/apps/web/src/lib/components/charts/PortCardinalityChart.svelte
+++ b/apps/web/src/lib/components/charts/PortCardinalityChart.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { SvelteSet } from 'svelte/reactivity';
-	import { Checkbox } from '#lib/components/ui/checkbox/index.ts';
+	import ChecklistPopover from '#lib/components/common/ChecklistPopover.svelte';
+	import SegmentedToggle from '#lib/components/common/SegmentedToggle.svelte';
 	import { sourceSeriesColor } from './chart-colors';
 	import ChartCard from './ChartCard.svelte';
 	import MetricLinePanel, { type MetricLineSeries } from './MetricLinePanel.svelte';
@@ -49,6 +50,10 @@
 		{ side: 'destination', range: 'high', label: 'Destination ports >1023' }
 	];
 
+	const PORT_FAMILY_OPTIONS = [
+		{ value: 'ipv4', label: 'IPv4' },
+		{ value: 'ipv6', label: 'IPv6' }
+	] as const;
 	let portFamily = $state<Exclude<NetflowIpFamily, 'all'>>('ipv4');
 	const activePortSeries = new SvelteSet(PORT_OPTIONS.map(({ side, range }) => `${side}-${range}`));
 	const granularity = $derived(GROUP_BY_TO_GRANULARITY[props.groupBy]);
@@ -114,37 +119,30 @@
 	emptyCopy="No port data for the selected filters"
 >
 	{#snippet controls()}
-		<div class="flex flex-wrap items-center gap-x-6 gap-y-3">
-			<div class="flex flex-wrap items-center gap-4" role="group" aria-label="Port IP family">
-				{#each ['ipv4', 'ipv6'] as const as family (family)}
-					<label class="text-foreground flex cursor-pointer items-center gap-2 text-sm">
-						<input
-							type="radio"
-							name="port-cardinality-ip-family"
-							checked={portFamily === family}
-							onchange={() => (portFamily = family)}
-							class="border-input accent-primary focus-visible:ring-ring size-4 focus-visible:ring-2"
-						/>
-						<span>{family.toUpperCase()}</span>
-					</label>
-				{/each}
-			</div>
-			<div
-				class="flex flex-wrap items-center gap-x-4 gap-y-2"
-				role="group"
-				aria-label="Port ranges"
-			>
-				{#each PORT_OPTIONS as option (`${option.side}-${option.range}`)}
-					<label class="text-foreground flex cursor-pointer items-center gap-2 text-sm">
-						<Checkbox
-							checked={activePortSeries.has(`${option.side}-${option.range}`)}
-							onCheckedChange={() => togglePortSeries(option.side, option.range)}
-						/>
-						<span>{option.label}</span>
-					</label>
-				{/each}
-			</div>
-		</div>
+		<SegmentedToggle
+			options={PORT_FAMILY_OPTIONS}
+			value={portFamily}
+			onValueChange={(family) => (portFamily = family)}
+			ariaLabel="Port IP family"
+		/>
+		<ChecklistPopover
+			label="Ranges"
+			dialogLabel="Port ranges"
+			items={PORT_OPTIONS.map((option) => ({
+				key: `${option.side}-${option.range}` as const,
+				label: option.label,
+				checked: activePortSeries.has(`${option.side}-${option.range}`)
+			}))}
+			onToggle={(key) => {
+				const option = PORT_OPTIONS.find(({ side, range }) => `${side}-${range}` === key);
+				if (option) togglePortSeries(option.side, option.range);
+			}}
+			onSetAll={(checked) => {
+				activePortSeries.clear();
+				if (checked)
+					for (const { side, range } of PORT_OPTIONS) activePortSeries.add(`${side}-${range}`);
+			}}
+		/>
 	{/snippet}
 
 	<MetricLinePanel
diff --git a/apps/web/src/lib/components/charts/card-frame.ts b/apps/web/src/lib/components/charts/card-frame.ts
new file mode 100644
index 0000000..7fb9861
--- /dev/null
+++ b/apps/web/src/lib/components/charts/card-frame.ts
@@ -0,0 +1,16 @@
+import { createContext } from 'svelte';
+
+export type CardFrame = {
+	readonly title: string;
+	readonly first: boolean;
+	readonly last: boolean;
+	readonly resizable: boolean;
+	move(offset: number): void;
+	resize(offset: number): void;
+};
+
+export const [getCardFrame, setCardFrame, hasCardFrame] = createContext<CardFrame>();
+
+export function optionalCardFrame(): CardFrame | null {
+	return hasCardFrame() ? getCardFrame() : null;
+}
diff --git a/apps/web/src/lib/components/common/ChecklistPopover.svelte b/apps/web/src/lib/components/common/ChecklistPopover.svelte
new file mode 100644
index 0000000..27f1803
--- /dev/null
+++ b/apps/web/src/lib/components/common/ChecklistPopover.svelte
@@ -0,0 +1,50 @@
+<script lang="ts" generics="K extends string">
+	import { Button } from '#lib/components/ui/button/index.ts';
+	import { Checkbox } from '#lib/components/ui/checkbox/index.ts';
+	import ToolbarPopover from './ToolbarPopover.svelte';
+
+	let {
+		label = 'Metrics',
+		dialogLabel,
+		items,
+		onToggle,
+		onSetAll
+	}: {
+		label?: string;
+		dialogLabel: string;
+		items: readonly { key: K; label: string; checked: boolean }[];
+		onToggle: (key: K) => void;
+		onSetAll?: (checked: boolean) => void;
+	} = $props();
+
+	const checkedCount = $derived(items.filter((item) => item.checked).length);
+</script>
+
+<ToolbarPopover
+	{label}
+	value={`${checkedCount}/${items.length}`}
+	{dialogLabel}
+	variant="ghost"
+	align="end"
+	contentClass="w-60"
+>
+	<div class="flex items-center justify-between gap-2 border-b px-3 py-2">
+		<p class="text-xs font-medium">{dialogLabel}</p>
+		{#if onSetAll}
+			<div class="flex gap-0.5">
+				<Button variant="ghost" size="xs" onclick={() => onSetAll(true)}>All</Button>
+				<Button variant="ghost" size="xs" onclick={() => onSetAll(false)}>None</Button>
+			</div>
+		{/if}
+	</div>
+	<div class="flex flex-col p-1" role="group" aria-label={dialogLabel}>
+		{#each items as item (item.key)}
+			<label
+				class="hover:bg-muted flex cursor-pointer items-center gap-2.5 rounded-sm px-2 py-1.5 text-sm"
+			>
+				<Checkbox checked={item.checked} onCheckedChange={() => onToggle(item.key)} />
+				<span>{item.label}</span>
+			</label>
+		{/each}
+	</div>
+</ToolbarPopover>
diff --git a/apps/web/src/lib/components/common/SegmentedToggle.svelte b/apps/web/src/lib/components/common/SegmentedToggle.svelte
new file mode 100644
index 0000000..e2b51f5
--- /dev/null
+++ b/apps/web/src/lib/components/common/SegmentedToggle.svelte
@@ -0,0 +1,52 @@
+<script lang="ts" module>
+	export type SegmentedOption<T extends string> = {
+		value: T;
+		label: string;
+		title?: string;
+		disabled?: boolean;
+	};
+</script>
+
+<script lang="ts" generics="T extends string">
+	import * as ToggleGroup from '#lib/components/ui/toggle-group/index.ts';
+	import { cn } from '#lib/utils.ts';
+
+	let {
+		options,
+		value,
+		onValueChange,
+		ariaLabel,
+		class: className,
+		itemClass
+	}: {
+		options: readonly SegmentedOption<T>[];
+		value: T | null;
+		onValueChange?: (value: T) => void;
+		ariaLabel: string;
+		class?: string;
+		itemClass?: string;
+	} = $props();
+</script>
+
+<ToggleGroup.Root
+	type="single"
+	value={value ?? ''}
+	onValueChange={(next) => {
+		if (next && next !== value) onValueChange?.(next as T);
+	}}
+	spacing={1}
+	aria-label={ariaLabel}
+	class={cn('segmented bg-muted gap-0.5 rounded-md p-0.5', className)}
+>
+	{#each options as option (option.value)}
+		<ToggleGroup.Item
+			value={option.value}
+			disabled={option.disabled}
+			title={option.title}
+			class={cn(
+				'text-muted-foreground hover:text-foreground data-[state=on]:bg-card data-[state=on]:text-foreground h-7 min-w-0 rounded-[calc(var(--radius)-2px)] px-2.5 text-xs font-medium hover:bg-transparent data-[state=on]:shadow-xs dark:data-[state=on]:bg-[#2a2a2a]',
+				itemClass
+			)}>{option.label}</ToggleGroup.Item
+		>
+	{/each}
+</ToggleGroup.Root>
diff --git a/apps/web/src/lib/components/common/ToolbarPopover.svelte b/apps/web/src/lib/components/common/ToolbarPopover.svelte
new file mode 100644
index 0000000..52edc6b
--- /dev/null
+++ b/apps/web/src/lib/components/common/ToolbarPopover.svelte
@@ -0,0 +1,66 @@
+<script lang="ts">
+	import { ChevronDown } from '@lucide/svelte';
+	import type { Snippet } from 'svelte';
+	import { Button } from '#lib/components/ui/button/index.ts';
+	import * as Popover from '#lib/components/ui/popover/index.ts';
+	import { cn } from '#lib/utils.ts';
+
+	let {
+		label,
+		value,
+		ariaLabel,
+		dialogLabel = label,
+		variant = 'outline',
+		align = 'start',
+		open = $bindable(false),
+		onOpenChange,
+		icon,
+		class: className,
+		contentClass,
+		children
+	}: {
+		label: string;
+		value?: string;
+		ariaLabel?: string;
+		dialogLabel?: string;
+		variant?: 'outline' | 'ghost';
+		align?: 'start' | 'center' | 'end';
+		open?: boolean;
+		onOpenChange?: (open: boolean) => void;
+		icon?: Snippet;
+		class?: string;
+		contentClass?: string;
+		children: Snippet;
+	} = $props();
+</script>
+
+<Popover.Root bind:open {onOpenChange}>
+	<Popover.Trigger>
+		{#snippet child({ props })}
+			<Button
+				{...props}
+				{variant}
+				size="sm"
+				aria-label={ariaLabel}
+				class={cn('toolbar-trigger gap-1.5 px-2.5 font-medium', className)}
+			>
+				{@render icon?.()}
+				<span>{label}</span>
+				{#if value}<span class="text-muted-foreground truncate font-normal">{value}</span>{/if}
+				<ChevronDown class="text-muted-foreground size-3.5" />
+			</Button>
+		{/snippet}
+	</Popover.Trigger>
+	<Popover.Content
+		{align}
+		sideOffset={6}
+		role="dialog"
+		aria-label={dialogLabel}
+		class={cn(
+			'max-h-[calc(100dvh-6rem)] w-auto max-w-[calc(100vw-1.5rem)] gap-0 overflow-y-auto p-0',
+			contentClass
+		)}
+	>
+		{@render children()}
+	</Popover.Content>
+</Popover.Root>
diff --git a/apps/web/src/lib/components/common/ToolbarSelect.svelte b/apps/web/src/lib/components/common/ToolbarSelect.svelte
new file mode 100644
index 0000000..210f03a
--- /dev/null
+++ b/apps/web/src/lib/components/common/ToolbarSelect.svelte
@@ -0,0 +1,71 @@
+<script lang="ts" module>
+	export type ToolbarSelectOption<T extends string> = {
+		value: T;
+		label: string;
+		description?: string;
+		disabled?: boolean;
+	};
+</script>
+
+<script lang="ts" generics="T extends string">
+	import * as Select from '#lib/components/ui/select/index.ts';
+	import { cn } from '#lib/utils.ts';
+
+	let {
+		label,
+		value,
+		options,
+		onValueChange,
+		variant = 'outline',
+		class: className
+	}: {
+		label: string;
+		value: T;
+		options: readonly ToolbarSelectOption<T>[];
+		onValueChange: (value: T) => void;
+		variant?: 'outline' | 'ghost';
+		class?: string;
+	} = $props();
+
+	const selected = $derived(options.find((option) => option.value === value));
+</script>
+
+<Select.Root
+	type="single"
+	{value}
+	onValueChange={(next) => {
+		if (next && next !== value) onValueChange(next as T);
+	}}
+	items={options.map((option) => ({
+		value: option.value,
+		label: option.label,
+		disabled: option.disabled
+	}))}
+>
+	<Select.Trigger
+		size="sm"
+		aria-label={`${label}: ${selected?.label ?? value}`}
+		class={cn(
+			'toolbar-trigger h-8 gap-1.5 px-2.5 font-medium shadow-xs',
+			variant === 'outline'
+				? 'border-border bg-background hover:bg-muted dark:bg-input/30 dark:hover:bg-input/50'
+				: 'hover:bg-muted border-transparent bg-transparent shadow-none',
+			className
+		)}
+	>
+		<span>{label}</span>
+		<span class="text-muted-foreground font-normal">{selected?.label ?? value}</span>
+	</Select.Trigger>
+	<Select.Content align="start" class="min-w-44">
+		{#each options as option (option.value)}
+			<Select.Item value={option.value} label={option.label} disabled={option.disabled}>
+				<span class="flex flex-col gap-0.5 whitespace-normal">
+					<span>{option.label}</span>
+					{#if option.description}<span class="text-muted-foreground text-xs"
+							>{option.description}</span
+						>{/if}
+				</span>
+			</Select.Item>
+		{/each}
+	</Select.Content>
+</Select.Root>
diff --git a/apps/web/src/lib/components/filters/DashboardToolbar.svelte b/apps/web/src/lib/components/filters/DashboardToolbar.svelte
new file mode 100644
index 0000000..91a2cde
--- /dev/null
+++ b/apps/web/src/lib/components/filters/DashboardToolbar.svelte
@@ -0,0 +1,110 @@
+<script lang="ts">
+	import { RotateCcw } from '@lucide/svelte';
+	import ToolbarSelect from '#lib/components/common/ToolbarSelect.svelte';
+	import { isGranularityAllowedForDateRange } from '#lib/components/charts/chart-utils.ts';
+	import type { GroupByOption, RouterConfig } from '#lib/components/netflow/types.ts';
+	import { Button } from '#lib/components/ui/button/index.ts';
+	import {
+		FLOW_DIRECTION_OPTIONS,
+		type FlowDirection,
+		type MaadIpVersion,
+		type MaadMeasure
+	} from '#lib/types/types.ts';
+	import DateRangePicker from './DateRangePicker.svelte';
+	import MaadOptions from './MaadOptions.svelte';
+	import SourcesFilter from './SourcesFilter.svelte';
+
+	let {
+		startDate,
+		endDate,
+		datasetStartDate,
+		today,
+		groupBy,
+		routers,
+		direction,
+		showDirection,
+		measure,
+		ipVersion,
+		onDatesChange,
+		onGroupByChange,
+		onRoutersChange,
+		onDirectionChange,
+		onMeasureChange,
+		onIpVersionChange,
+		onReset
+	}: {
+		startDate: string;
+		endDate: string;
+		datasetStartDate: string;
+		today: string;
+		groupBy: GroupByOption;
+		routers: RouterConfig;
+		direction: FlowDirection;
+		showDirection: boolean;
+		measure: MaadMeasure | null;
+		ipVersion: MaadIpVersion;
+		onDatesChange: (patch: { startDate?: string; endDate?: string }) => void;
+		onGroupByChange: (groupBy: GroupByOption) => void;
+		onRoutersChange: (routers: RouterConfig) => void;
+		onDirectionChange: (direction: FlowDirection) => void;
+		onMeasureChange: (measure: MaadMeasure) => void;
+		onIpVersionChange: (ipVersion: MaadIpVersion) => void;
+		onReset: () => void;
+	} = $props();
+
+	const INTERVALS: Array<{ value: GroupByOption; label: string }> = [
+		{ value: 'date', label: 'Day' },
+		{ value: 'hour', label: 'Hour' },
+		{ value: '30min', label: '30 min' },
+		{ value: '10min', label: '10 min' },
+		{ value: '5min', label: '5 min' }
+	];
+
+	const intervalOptions = $derived(
+		INTERVALS.map((option) => {
+			const allowed = isGranularityAllowedForDateRange(option.value, startDate, endDate);
+			return {
+				...option,
+				disabled: !allowed,
+				description: allowed ? undefined : 'Date range too large for this interval'
+			};
+		})
+	);
+	const directionOptions = FLOW_DIRECTION_OPTIONS.map((option) => ({
+		value: option.value,
+		label: option.label,
+		description: option.value === 'all' ? undefined : option.description
+	}));
+</script>
+
+<div class="dashboard-toolbar flex flex-wrap items-center gap-2" role="group" aria-label="Filters">
+	<DateRangePicker {startDate} {endDate} {datasetStartDate} {today} onChange={onDatesChange} />
+	<SourcesFilter {routers} {onRoutersChange} />
+	<ToolbarSelect
+		label="Interval"
+		value={groupBy}
+		options={intervalOptions}
+		onValueChange={onGroupByChange}
+	/>
+	{#if showDirection}
+		<ToolbarSelect
+			label="Direction"
+			value={direction}
+			options={directionOptions}
+			onValueChange={onDirectionChange}
+		/>
+	{/if}
+	{#if measure}
+		<MaadOptions {measure} {ipVersion} {onMeasureChange} {onIpVersionChange} />
+	{/if}
+	<Button
+		variant="ghost"
+		size="sm"
+		class="text-muted-foreground ml-auto"
+		aria-label="Reset filters"
+		onclick={onReset}><RotateCcw class="size-3.5" />Reset</Button
+	>
+	{#if startDate > endDate}<p class="text-destructive w-full text-sm" role="alert">
+			Start Date must be on or before End Date.
+		</p>{/if}
+</div>
diff --git a/apps/web/src/lib/components/filters/DateRangePicker.svelte b/apps/web/src/lib/components/filters/DateRangePicker.svelte
new file mode 100644
index 0000000..d7362a6
--- /dev/null
+++ b/apps/web/src/lib/components/filters/DateRangePicker.svelte
@@ -0,0 +1,126 @@
+<script lang="ts">
+	import { parseDate, type DateValue } from '@internationalized/date';
+	import { CalendarDays } from '@lucide/svelte';
+	import { MediaQuery } from 'svelte/reactivity';
+	import ToolbarPopover from '#lib/components/common/ToolbarPopover.svelte';
+	import { Input } from '#lib/components/ui/input/index.ts';
+	import { Label } from '#lib/components/ui/label/index.ts';
+	import { RangeCalendar } from '#lib/components/ui/range-calendar/index.ts';
+	import { dateRangePresets, formatDateRange, isIsoDate } from './date-range.ts';
+
+	type Range = { start: DateValue | undefined; end: DateValue | undefined };
+
+	let {
+		startDate,
+		endDate,
+		datasetStartDate,
+		today,
+		onChange
+	}: {
+		startDate: string;
+		endDate: string;
+		datasetStartDate: string;
+		today: string;
+		onChange: (patch: { startDate?: string; endDate?: string }) => void;
+	} = $props();
+
+	const id = $props.id();
+	const wide = new MediaQuery('(min-width: 640px)', true);
+	let open = $state(false);
+	let draft = $state<Range>({ start: undefined, end: undefined });
+	let placeholder = $state<DateValue | undefined>(undefined);
+	const label = $derived(formatDateRange(startDate, endDate));
+	const presets = $derived(dateRangePresets(endDate, datasetStartDate, today));
+
+	function syncDraft() {
+		const start = isIsoDate(startDate) ? parseDate(startDate) : undefined;
+		const end = isIsoDate(endDate) ? parseDate(endDate) : undefined;
+		const [low, high] = start && end && start.compare(end) > 0 ? [end, start] : [start, end];
+		draft = { start: low, end: high };
+		const focus = high ?? low ?? parseDate(today);
+		placeholder = wide.current ? focus.subtract({ months: 1 }) : focus;
+	}
+
+	function apply(next: { startDate: string; endDate: string }) {
+		onChange(next);
+		open = false;
+	}
+
+	function commitField(side: 'startDate' | 'endDate', value: string) {
+		if (isIsoDate(value)) onChange({ [side]: value });
+	}
+</script>
+
+<ToolbarPopover
+	bind:open
+	onOpenChange={(next) => {
+		if (next) syncDraft();
+	}}
+	{label}
+	ariaLabel={`Date range: ${label}`}
+	dialogLabel="Date range"
+>
+	{#snippet icon()}<CalendarDays class="text-muted-foreground size-4" />{/snippet}
+	<div class="flex flex-col sm:flex-row">
+		<div
+			class="flex gap-1 overflow-x-auto border-b p-2 sm:w-36 sm:flex-col sm:border-r sm:border-b-0"
+			role="group"
+			aria-label="Date range presets"
+		>
+			{#each presets as preset (preset.id)}
+				<button
+					type="button"
+					class="hover:bg-muted aria-pressed:bg-muted aria-pressed:text-foreground text-muted-foreground rounded-sm px-2 py-1.5 text-left text-sm whitespace-nowrap"
+					aria-pressed={preset.startDate === startDate && preset.endDate === endDate}
+					onclick={() => apply(preset)}>{preset.label}</button
+				>
+			{/each}
+			<p class="text-muted-foreground mt-auto hidden px-2 pt-2 text-xs leading-4 sm:block">
+				Windows end on the selected end date.
+			</p>
+		</div>
+		<div class="flex flex-col">
+			<RangeCalendar
+				bind:value={draft}
+				bind:placeholder
+				numberOfMonths={wide.current ? 2 : 1}
+				weekStartsOn={0}
+				onValueChange={(next) => {
+					if (next.start && next.end)
+						apply({ startDate: next.start.toString(), endDate: next.end.toString() });
+				}}
+			/>
+			<div class="grid grid-cols-2 gap-3 border-t p-3">
+				<div class="grid gap-1.5">
+					<Label for={`${id}-start`} class="text-muted-foreground text-xs font-normal"
+						>Start Date</Label
+					>
+					<Input
+						id={`${id}-start`}
+						value={startDate}
+						placeholder="YYYY-MM-DD"
+						inputmode="numeric"
+						autocomplete="off"
+						class="h-8 font-mono text-xs"
+						aria-invalid={!isIsoDate(startDate) || undefined}
+						onchange={(event) => commitField('startDate', event.currentTarget.value.trim())}
+					/>
+				</div>
+				<div class="grid gap-1.5">
+					<Label for={`${id}-end`} class="text-muted-foreground text-xs font-normal">End Date</Label
+					>
+					<Input
+						id={`${id}-end`}
+						value={endDate}
+						placeholder="YYYY-MM-DD"
+						inputmode="numeric"
+						autocomplete="off"
+						class="h-8 font-mono text-xs"
+						aria-invalid={!isIsoDate(endDate) || undefined}
+						onchange={(event) => commitField('endDate', event.currentTarget.value.trim())}
+					/>
+				</div>
+			</div>
+		</div>
+	</div>
+</ToolbarPopover>
diff --git a/apps/web/src/lib/components/filters/MaadOptions.svelte b/apps/web/src/lib/components/filters/MaadOptions.svelte
new file mode 100644
index 0000000..6351cc5
--- /dev/null
+++ b/apps/web/src/lib/components/filters/MaadOptions.svelte
@@ -0,0 +1,74 @@
+<script lang="ts">
+	import SegmentedToggle from '#lib/components/common/SegmentedToggle.svelte';
+	import ToolbarPopover from '#lib/components/common/ToolbarPopover.svelte';
+	import {
+		MAAD_IP_VERSION_OPTIONS,
+		MAAD_MEASURE_OPTIONS,
+		type MaadIpVersion,
+		type MaadMeasure
+	} from '#lib/types/types.ts';
+
+	let {
+		measure,
+		ipVersion,
+		onMeasureChange,
+		onIpVersionChange
+	}: {
+		measure: MaadMeasure;
+		ipVersion: MaadIpVersion;
+		onMeasureChange: (measure: MaadMeasure) => void;
+		onIpVersionChange: (ipVersion: MaadIpVersion) => void;
+	} = $props();
+
+	const measureOptions = MAAD_MEASURE_OPTIONS.map((option) => ({
+		...option,
+		title:
+			option.value === 'addresses'
+				? 'Each distinct address counts once'
+				: `Weight each address by its ${option.value}; no spectrum`
+	}));
+	const familyOptions = MAAD_IP_VERSION_OPTIONS.map((option) => ({
+		value: String(option.value),
+		label: option.label
+	}));
+	const measureLabel = $derived(
+		MAAD_MEASURE_OPTIONS.find((option) => option.value === measure)?.label ?? measure
+	);
+</script>
+
+<ToolbarPopover
+	label="MAAD"
+	value={`IPv${ipVersion} · ${measureLabel}`}
+	ariaLabel={`MAAD: IPv${ipVersion}, ${measureLabel}`}
+	dialogLabel="MAAD options"
+	contentClass="w-80"
+>
+	<div class="grid gap-4 p-3">
+		<div class="grid gap-2">
+			<p class="text-xs font-medium">Measure</p>
+			<SegmentedToggle
+				options={measureOptions}
+				value={measure}
+				onValueChange={onMeasureChange}
+				ariaLabel="MAAD measure"
+				class="w-full"
+				itemClass="flex-1"
+			/>
+			<p class="text-muted-foreground text-xs leading-4">
+				Addresses counts each address once and includes the spectrum. Packets and Bytes weight each
+				address by its traffic.
+			</p>
+		</div>
+		<div class="grid gap-2">
+			<p class="text-xs font-medium">Address family</p>
+			<SegmentedToggle
+				options={familyOptions}
+				value={String(ipVersion)}
+				onValueChange={(value) => onIpVersionChange(Number(value) as MaadIpVersion)}
+				ariaLabel="MAAD address family"
+				class="w-full"
+				itemClass="flex-1"
+			/>
+		</div>
+	</div>
+</ToolbarPopover>
diff --git a/apps/web/src/lib/components/filters/SourcesFilter.svelte b/apps/web/src/lib/components/filters/SourcesFilter.svelte
new file mode 100644
index 0000000..b4c8129
--- /dev/null
+++ b/apps/web/src/lib/components/filters/SourcesFilter.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { Check } from '@lucide/svelte';
+	import ToolbarPopover from '#lib/components/common/ToolbarPopover.svelte';
+	import { Button } from '#lib/components/ui/button/index.ts';
+	import * as Command from '#lib/components/ui/command/index.ts';
+	import type { RouterConfig } from '#lib/components/netflow/types.ts';
+
+	let {
+		routers,
+		onRoutersChange
+	}: { routers: RouterConfig; onRoutersChange: (routers: RouterConfig) => void } = $props();
+
+	const names = $derived(Object.keys(routers));
+	const selectedCount = $derived(names.filter((name) => routers[name]).length);
+
+	function setAll(enabled: boolean) {
+		onRoutersChange(Object.fromEntries(names.map((name) => [name, enabled])));
+	}
+</script>
+
+<ToolbarPopover
+	label="Sources"
+	value={`${selectedCount}/${names.length}`}
+	ariaLabel={`Sources: ${selectedCount} of ${names.length} selected`}
+	dialogLabel="Sources"
+	contentClass="w-64"
+>
+	<Command.Root>
+		<Command.Input placeholder="Search sources…" aria-label="Search sources" />
+		<Command.List class="max-h-64" aria-label="Sources">
+			<Command.Empty>No sources found.</Command.Empty>
+			{#each names as name (name)}
+				<Command.Item
+					value={name}
+					aria-checked={routers[name]}
+					onSelect={() => onRoutersChange({ ...routers, [name]: !routers[name] })}
+					class="gap-2.5"
+				>
+					<span
+						class={[
+							'flex size-4 shrink-0 items-center justify-center rounded-[4px] border shadow-xs',
+							routers[name]
+								? 'border-primary bg-primary text-primary-foreground'
+								: 'border-input bg-background'
+						]}
+						aria-hidden="true"
+					>
+						{#if routers[name]}<Check class="size-3 text-current" />{/if}
+					</span>
+					<span class="truncate">{name}</span>
+				</Command.Item>
+			{/each}
+		</Command.List>
+	</Command.Root>
+	<div class="flex items-center justify-between gap-2 border-t px-2 py-1.5">
+		<span class="text-muted-foreground text-xs">{selectedCount} selected</span>
+		<div class="flex gap-0.5">
+			<Button variant="ghost" size="xs" onclick={() => setAll(true)}>Select all</Button>
+			<Button variant="ghost" size="xs" onclick={() => setAll(false)}>Clear</Button>
+		</div>
+	</div>
+</ToolbarPopover>
diff --git a/apps/web/src/lib/components/filters/TrafficMetricControls.svelte b/apps/web/src/lib/components/filters/TrafficMetricControls.svelte
new file mode 100644
index 0000000..b91f903
--- /dev/null
+++ b/apps/web/src/lib/components/filters/TrafficMetricControls.svelte
@@ -0,0 +1,130 @@
+<script lang="ts">
+	import SegmentedToggle from '#lib/components/common/SegmentedToggle.svelte';
+	import ToolbarPopover from '#lib/components/common/ToolbarPopover.svelte';
+	import { Button } from '#lib/components/ui/button/index.ts';
+	import { Checkbox } from '#lib/components/ui/checkbox/index.ts';
+	import type { DataOption } from '#lib/components/netflow/types.ts';
+
+	type MetricFamily = 'flows' | 'packets' | 'bytes';
+	type ProtocolFamily = 'tcp' | 'udp' | 'icmp' | 'other';
+
+	let {
+		dataOptions,
+		onDataOptionsChange
+	}: {
+		dataOptions: DataOption[];
+		onDataOptionsChange: (dataOptions: DataOption[]) => void;
+	} = $props();
+
+	const METRIC_ROWS: Array<{ value: MetricFamily; label: string }> = [
+		{ value: 'flows', label: 'Flows' },
+		{ value: 'packets', label: 'Packets' },
+		{ value: 'bytes', label: 'Bytes' }
+	];
+	const PROTOCOL_COLUMNS: Array<{ value: ProtocolFamily; label: string }> = [
+		{ value: 'tcp', label: 'TCP' },
+		{ value: 'udp', label: 'UDP' },
+		{ value: 'icmp', label: 'ICMP' },
+		{ value: 'other', label: 'Other' }
+	];
+
+	function metricFamily(option: DataOption): MetricFamily | null {
+		const normalized = option.label.toLowerCase();
+		if (normalized.includes('flow')) return 'flows';
+		if (normalized.includes('packet')) return 'packets';
+		if (normalized.includes('byte')) return 'bytes';
+		return null;
+	}
+
+	function protocolFamily(option: DataOption): ProtocolFamily | null {
+		const normalized = option.label.toLowerCase();
+		for (const protocol of PROTOCOL_COLUMNS) {
+			if (normalized.includes(protocol.value)) return protocol.value;
+		}
+		return null;
+	}
+
+	const selectedFamily = $derived(
+		METRIC_ROWS.find((family) =>
+			dataOptions.every((option) => option.checked === (metricFamily(option) === family.value))
+		)?.value ?? null
+	);
+	const checkedCount = $derived(dataOptions.filter((option) => option.checked).length);
+	const matrix = $derived(
+		METRIC_ROWS.map((metric) => ({
+			...metric,
+			cells: PROTOCOL_COLUMNS.map((protocol) => ({
+				...protocol,
+				option: dataOptions.find(
+					(option) =>
+						metricFamily(option) === metric.value && protocolFamily(option) === protocol.value
+				)
+			}))
+		}))
+	);
+
+	function selectFamily(family: MetricFamily) {
+		onDataOptionsChange(
+			dataOptions.map((option) => ({ ...option, checked: metricFamily(option) === family }))
+		);
+	}
+
+	function setAll(checked: boolean) {
+		onDataOptionsChange(dataOptions.map((option) => ({ ...option, checked })));
+	}
+
+	function toggle(index: number) {
+		onDataOptionsChange(
+			dataOptions.map((option) =>
+				option.index === index ? { ...option, checked: !option.checked } : option
+			)
+		);
+	}
+</script>
+
+<SegmentedToggle
+	options={METRIC_ROWS}
+	value={selectedFamily}
+	onValueChange={selectFamily}
+	ariaLabel="Traffic metric family"
+/>
+<ToolbarPopover
+	label="Metrics"
+	value={`${checkedCount}/${dataOptions.length}`}
+	dialogLabel="NetFlow metrics"
+	variant="ghost"
+	align="end"
+>
+	<div class="flex items-center justify-between gap-2 border-b px-3 py-2">
+		<p class="text-xs font-medium">NetFlow metrics</p>
+		<div class="flex gap-0.5">
+			<Button variant="ghost" size="xs" onclick={() => setAll(true)}>All</Button>
+			<Button variant="ghost" size="xs" onclick={() => setAll(false)}>None</Button>
+		</div>
+	</div>
+	<div class="p-2" role="group" aria-label="NetFlow metrics">
+		<div
+			class="text-muted-foreground grid grid-cols-[4.5rem_repeat(4,2.75rem)] items-center text-center text-xs"
+		>
+			<span></span>
+			{#each PROTOCOL_COLUMNS as protocol (protocol.value)}<span class="py-1">{protocol.label}</span
+				>{/each}
+		</div>
+		{#each matrix as metric (metric.value)}
+			<div class="grid grid-cols-[4.5rem_repeat(4,2.75rem)] items-center">
+				<span class="px-1 text-sm font-medium">{metric.label}</span>
+				{#each metric.cells as cell (cell.value)}
+					<label
+						class="hover:bg-muted flex h-9 cursor-pointer items-center justify-center rounded-sm"
+					>
+						{#if cell.option}
+							{@const option = cell.option}
+							<Checkbox checked={option.checked} onCheckedChange={() => toggle(option.index)} />
+							<span class="sr-only">{option.label}</span>
+						{/if}
+					</label>
+				{/each}
+			</div>
+		{/each}
+	</div>
+</ToolbarPopover>
diff --git a/apps/web/src/lib/components/filters/date-range.ts b/apps/web/src/lib/components/filters/date-range.ts
new file mode 100644
index 0000000..93a5d8f
--- /dev/null
+++ b/apps/web/src/lib/components/filters/date-range.ts
@@ -0,0 +1,61 @@
+import { parseDate } from '@internationalized/date';
+
+const ISO_DATE = /^\d{4}-\d{2}-\d{2}$/;
+
+export function isIsoDate(value: string): boolean {
+	if (!ISO_DATE.test(value)) return false;
+	try {
+		return parseDate(value).toString() === value;
+	} catch {
+		return false;
+	}
+}
+
+const dayFormat = new Intl.DateTimeFormat('en-US', {
+	month: 'short',
+	day: 'numeric',
+	timeZone: 'UTC'
+});
+const dayYearFormat = new Intl.DateTimeFormat('en-US', {
+	month: 'short',
+	day: 'numeric',
+	year: 'numeric',
+	timeZone: 'UTC'
+});
+
+function utc(date: string): Date {
+	return new Date(`${date}T00:00:00Z`);
+}
+
+/** Format an inclusive YYYY-MM-DD range compactly, e.g. "Mar 1 – Mar 3, 2025". */
+export function formatDateRange(startDate: string, endDate: string): string {
+	if (!isIsoDate(startDate) || !isIsoDate(endDate)) return `${startDate} – ${endDate}`;
+	if (startDate === endDate) return dayYearFormat.format(utc(startDate));
+	const sameYear = startDate.slice(0, 4) === endDate.slice(0, 4);
+	return `${(sameYear ? dayFormat : dayYearFormat).format(utc(startDate))} – ${dayYearFormat.format(utc(endDate))}`;
+}
+
+export type DateRangePreset = { id: string; label: string; startDate: string; endDate: string };
+
+/** Window presets end at the selected end date; "All available" spans the dataset start to today. */
+export function dateRangePresets(
+	endDate: string,
+	datasetStartDate: string,
+	today: string
+): DateRangePreset[] {
+	const anchor = isIsoDate(endDate) ? parseDate(endDate) : parseDate(today);
+	const windows = [
+		{ id: '1d', label: 'Last day', days: 1 },
+		{ id: '7d', label: 'Last 7 days', days: 7 },
+		{ id: '30d', label: 'Last 30 days', days: 30 }
+	];
+	return [
+		...windows.map(({ id, label, days }) => ({
+			id,
+			label,
+			startDate: anchor.subtract({ days: days - 1 }).toString(),
+			endDate: anchor.toString()
+		})),
+		{ id: 'all', label: 'All available', startDate: datasetStartDate, endDate: today }
+	];
+}
diff --git a/apps/web/src/lib/components/netflow/DashboardCardSlot.svelte b/apps/web/src/lib/components/netflow/DashboardCardSlot.svelte
new file mode 100644
index 0000000..396c726
--- /dev/null
+++ b/apps/web/src/lib/components/netflow/DashboardCardSlot.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { setCardFrame } from '#lib/components/charts/card-frame.ts';
+
+	let {
+		title,
+		first,
+		last,
+		resizable,
+		onMove,
+		onResize,
+		children,
+		...rest
+	}: HTMLAttributes<HTMLElement> & {
+		title: string;
+		first: boolean;
+		last: boolean;
+		resizable: boolean;
+		onMove: (offset: number) => void;
+		onResize: (offset: number) => void;
+		children: Snippet;
+	} = $props();
+
+	setCardFrame({
+		get title() {
+			return title;
+		},
+		get first() {
+			return first;
+		},
+		get last() {
+			return last;
+		},
+		get resizable() {
+			return resizable;
+		},
+		move: (offset) => onMove(offset),
+		resize: (offset) => onResize(offset)
+	});
+</script>
+
+<section role="listitem" data-chart-card {...rest}>
+	{@render children()}
+</section>
diff --git a/apps/web/src/lib/components/netflow/DatasetDashboardPage.svelte b/apps/web/src/lib/components/netflow/DatasetDashboardPage.svelte
index fb1661d..0d4ec8e 100644
--- a/apps/web/src/lib/components/netflow/DatasetDashboardPage.svelte
+++ b/apps/web/src/lib/components/netflow/DatasetDashboardPage.svelte
@@ -2,19 +2,19 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 	import { onMount, untrack } from 'svelte';
-	import DatasetTabs from '#lib/components/datasets/DatasetTabs.svelte';
-	import AnalysisLayout from '#lib/components/common/AnalysisLayout.svelte';
-	import DateRangeFilter from '#lib/components/filters/DateRangeFilter.svelte';
+	import DashboardToolbar from '#lib/components/filters/DashboardToolbar.svelte';
+	import ChartCardHeader from '#lib/components/charts/ChartCardHeader.svelte';
 	import { Button } from '#lib/components/ui/button/index.ts';
-	import PrimaryFilters from '#lib/components/filters/PrimaryFilters.svelte';
+	import * as Card from '#lib/components/ui/card/index.ts';
+	import DashboardCardSlot from '#lib/components/netflow/DashboardCardSlot.svelte';
+	import KpiRow from '#lib/components/netflow/KpiRow.svelte';
+	import { createNetflowStatsData } from '#lib/components/netflow/netflow-stats-data.svelte.ts';
 	import NetflowDashboard from '#lib/components/netflow/NetflowDashboard.svelte';
 	import BreakdownChart from '#lib/components/charts/BreakdownChart.svelte';
 	import FlowCharacteristicsChart from '#lib/components/charts/FlowCharacteristicsChart.svelte';
 	import PortCardinalityChart from '#lib/components/charts/PortCardinalityChart.svelte';
 	import CoverageStrip from '#lib/components/charts/CoverageStrip.svelte';
 	import { createFlowCharacteristicsData } from '#lib/components/charts/flow-characteristics-data.svelte.ts';
-	import CardLayoutControls from '#lib/components/common/CardLayoutControls.svelte';
-	import DragGrip from '#lib/components/common/DragGrip.svelte';
 	import { DEFAULT_DATA_OPTIONS } from '#lib/components/netflow/constants.ts';
 	import { createNearViewportAttachment } from '#lib/components/netflow/near-viewport.ts';
 	import type { DataOption, GroupByOption, RouterConfig } from '#lib/components/netflow/types.ts';
@@ -206,7 +206,7 @@
 		maadUnavailableCopy ??
 			(maadMeasureHasSpectrum(measure)
 				? null
-				: 'The spectrum is only computed for the Addresses measure. Switch MAAD to Addresses in Controls to see it.')
+				: 'The spectrum is only computed for the Addresses measure. Set MAAD to Addresses in the toolbar to see it.')
 	);
 	const routers = $derived(Array.isArray(props.routers) ? props.routers : []);
 	const routerStateKey = $derived(`${props.dataset}:${routers.join('\0')}`);
@@ -221,6 +221,16 @@
 			: (availableSpectrumRouters[0] ?? '')
 	);
 	const routersLoaded = $derived(Array.isArray(props.routers));
+	const today = new Date().toJSON().slice(0, 10);
+	const netflowStats = createNetflowStatsData(() => ({
+		dataset: props.dataset,
+		startDate,
+		endDate,
+		groupBy: selectedGroupBy,
+		routers: selectedRouters,
+		routersLoaded,
+		direction
+	}));
 	const flowCharacteristics = createFlowCharacteristicsData(() => ({
 		enabled: activatedCharts.characteristics || activatedCharts.ports,
 		dataset: props.dataset,
@@ -393,18 +403,6 @@
 		activateChart(chartOrder[0] ?? 'dashboard');
 	});
 
-	function handleStartDateChange(payload: { startDate: string }) {
-		updateSearch({ startDate: payload.startDate });
-	}
-
-	function handleEndDateChange(payload: { endDate: string }) {
-		updateSearch({ endDate: payload.endDate });
-	}
-
-	function handleGroupByChange(payload: { groupBy: GroupByOption }) {
-		updateSearch({ groupBy: payload.groupBy });
-	}
-
 	function handleDrillDown(payload: {
 		groupBy: GroupByOption;
 		startDate: string;
@@ -421,11 +419,6 @@
 		void navigateToNetflowFile(goto, slug, props.dataset, direction, ipVersion, measure);
 	}
 
-	function handleRoutersChange(payload: { routers: RouterConfig }) {
-		const nextRouters = payload.routers;
-		selectedRouters = nextRouters;
-	}
-
 	function handleDataOptionsChange(payload: { options: DataOption[] }) {
 		dataOptions = payload.options;
 	}
@@ -434,23 +427,8 @@
 		ipMetrics = payload.metrics;
 	}
 
-	function handleDirectionChange(payload: { direction: FlowDirection }) {
-		updateSearch({ direction: payload.direction });
-	}
-
-	function handleIpVersionChange(payload: { ipVersion: MaadIpVersion }) {
-		updateSearch({ ipVersion: payload.ipVersion });
-	}
-
-	function handleMeasureChange(payload: { measure: MaadMeasure }) {
-		updateSearch({ measure: payload.measure });
-	}
-
 	function handleResetView() {
-		updateSearch({
-			...dateRangeSearch.defaults,
-			endDate: new Date().toJSON().slice(0, 10)
-		});
+		updateSearch({ ...dateRangeSearch.defaults, endDate: today });
 	}
 </script>
 
@@ -459,51 +437,42 @@
 	<meta name="description" content="NetFlow analysis and visualization tool" />
 </svelte:head>
 
-<AnalysisLayout title={props.title ?? props.dataset} eyebrow="Dataset / Network analysis">
-	{#snippet navigation()}<DatasetTabs datasetId={props.dataset} active="dashboard" />{/snippet}
-	{#snippet toolbar()}
-		<DateRangeFilter
-			{startDate}
-			{endDate}
-			onStartDateChange={(date) => handleStartDateChange({ startDate: date })}
-			onEndDateChange={(date) => handleEndDateChange({ endDate: date })}
-		/>
-		<p class="filter-summary" aria-label="Selected filters">
-			<span>{availableSpectrumRouters.length}/{routers.length} sources</span><span
-				>{direction === 'all' ? 'All directions' : direction}</span
-			><span>{selectedGroupBy === 'date' ? 'Daily' : selectedGroupBy}</span>{#if maadComputed}<span
-					>MAAD IPv{ipVersion} · {measure}</span
-				>{/if}
+<div class="shell page flex flex-col gap-4">
+	<div class="flex flex-wrap items-end justify-between gap-x-4 gap-y-1">
+		<h1 class="text-xl font-semibold tracking-tight">{props.title ?? props.dataset}</h1>
+		<p class="text-muted-foreground text-xs">
+			Click a chart to drill down · drag across a chart to select a range
 		</p>
-		<Button onclick={handleResetView} size="sm" variant="outline" class="reset-view ml-auto"
-			>Reset View</Button
-		>
-		{#if startDate > endDate}<p class="text-destructive w-full text-sm" role="alert">
-				Start Date must be on or before End Date.
-			</p>{/if}
-	{/snippet}
-	{#snippet rail()}
-		<PrimaryFilters
-			{startDate}
-			{endDate}
-			groupBy={selectedGroupBy}
-			routers={selectedRouters}
-			{direction}
-			showDirection={hasLocality}
-			measure={maadComputed ? measure : undefined}
-			maadIpVersion={ipVersion}
-			onGroupByChange={handleGroupByChange}
-			onRoutersChange={handleRoutersChange}
-			onDirectionChange={handleDirectionChange}
-			onMeasureChange={handleMeasureChange}
-			onMaadIpVersionChange={handleIpVersionChange}
-		/>
-	{/snippet}
-	<div role="list" aria-label="Reorderable charts" class="chart-panels flex flex-col gap-4">
+	</div>
+	<DashboardToolbar
+		{startDate}
+		{endDate}
+		datasetStartDate={props.defaultStartDate}
+		{today}
+		groupBy={selectedGroupBy}
+		routers={selectedRouters}
+		{direction}
+		showDirection={hasLocality}
+		measure={maadComputed ? measure : null}
+		{ipVersion}
+		onDatesChange={(patch) => updateSearch(patch)}
+		onGroupByChange={(groupBy) => updateSearch({ groupBy })}
+		onRoutersChange={(routers) => (selectedRouters = routers)}
+		onDirectionChange={(next) => updateSearch({ direction: next })}
+		onMeasureChange={(next) => updateSearch({ measure: next })}
+		onIpVersionChange={(next) => updateSearch({ ipVersion: next })}
+		onReset={handleResetView}
+	/>
+	<KpiRow stats={netflowStats} />
+	<div role="list" aria-label="Reorderable charts" class="chart-panels flex flex-col gap-3">
 		{#each chartOrder as chartId, index (chartId)}
-			<section
-				role="listitem"
-				data-chart-card
+			<DashboardCardSlot
+				title={CHART_CARD_DETAILS[chartId].title}
+				first={index === 0}
+				last={index === chartOrder.length - 1}
+				resizable={activatedCharts[chartId] && chartId !== 'coverage'}
+				onMove={(offset) => moveCardBy(chartId, offset)}
+				onResize={(offset) => resizeCard(chartId, offset)}
 				data-chart-id={chartId}
 				data-chart-activated={activatedCharts[chartId]}
 				class={`relative rounded-lg ${dropTargetChartId === chartId && draggedChartId && draggedChartId !== chartId ? 'ring-primary ring-offset-background ring-2 ring-offset-2' : ''}`}
@@ -522,30 +491,14 @@
 					handleChartDrop(event, chartId);
 				}}
 			>
-				<CardLayoutControls
-					title={CHART_CARD_DETAILS[chartId].title}
-					first={index === 0}
-					last={index === chartOrder.length - 1}
-					resizable={activatedCharts[chartId] && chartId !== 'coverage'}
-					onMove={(offset) => moveCardBy(chartId, offset)}
-					onResize={(offset) => {
-						resizeCard(chartId, offset);
-					}}
-				/>
 				{#if !activatedCharts[chartId]}
-					<div
-						class="border-border bg-card text-card-foreground relative flex h-full flex-col rounded-lg border shadow-sm"
+					<Card.Root
+						size="sm"
+						class="h-full gap-0 py-0"
 						style={`min-height:${getCardMinimumHeight(chartId)}px`}
 						data-testid={`deferred-chart-${chartId}`}
 					>
-						<div
-							class="border-border relative cursor-grab border-b p-4 select-none active:cursor-grabbing"
-							draggable="true"
-							data-drag-handle
-						>
-							<h2 class="text-lg font-semibold">{CHART_CARD_DETAILS[chartId].title}</h2>
-							<DragGrip />
-						</div>
+						<ChartCardHeader title={CHART_CARD_DETAILS[chartId].title} />
 						<div
 							{@attach chartVisibilityAttachments[chartId]}
 							class="pointer-events-none h-px w-full"
@@ -556,23 +509,16 @@
 							class="text-muted-foreground flex flex-1 flex-col items-center justify-center gap-3 p-4 text-sm"
 						>
 							<p>This chart will load as it approaches the viewport.</p>
-							<button
-								type="button"
-								class="border-input bg-background hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring rounded-md border px-3 py-2 text-sm font-medium focus-visible:ring-2 focus-visible:outline-none"
-								onclick={() => activateChart(chartId)}
-							>
+							<Button variant="outline" size="sm" onclick={() => activateChart(chartId)}>
 								Load {CHART_CARD_DETAILS[chartId].title} chart
-							</button>
+							</Button>
 						</div>
-					</div>
+					</Card.Root>
 				{:else if chartId === 'dashboard'}
 					<NetflowDashboard
 						dataset={props.dataset}
-						{startDate}
-						{endDate}
+						stats={netflowStats}
 						groupBy={selectedGroupBy}
-						routers={selectedRouters}
-						{routersLoaded}
 						{dataOptions}
 						{direction}
 						{ipVersion}
@@ -680,7 +626,7 @@
 						{routersLoaded}
 					/>
 				{/if}
-			</section>
+			</DashboardCardSlot>
 		{/each}
 	</div>
-</AnalysisLayout>
+</div>
diff --git a/apps/web/src/lib/components/netflow/KpiRow.svelte b/apps/web/src/lib/components/netflow/KpiRow.svelte
new file mode 100644
index 0000000..63274e2
--- /dev/null
+++ b/apps/web/src/lib/components/netflow/KpiRow.svelte
@@ -0,0 +1,92 @@
+<script lang="ts">
+	import * as Card from '#lib/components/ui/card/index.ts';
+	import { Skeleton } from '#lib/components/ui/skeleton/index.ts';
+	import { sumNetflowWindow, type NetflowStatsData } from './netflow-stats-data.svelte.ts';
+
+	let { stats }: { stats: NetflowStatsData } = $props();
+
+	const compact = new Intl.NumberFormat('en-US', {
+		notation: 'compact',
+		maximumFractionDigits: 2
+	});
+	const decimal = new Intl.NumberFormat('en-US', { maximumFractionDigits: 1 });
+
+	function formatBytes(value: number): string {
+		for (const [power, unit] of [
+			[5, 'PB'],
+			[4, 'TB'],
+			[3, 'GB'],
+			[2, 'MB'],
+			[1, 'KB']
+		] as const) {
+			if (value >= 1024 ** power) return `${(value / 1024 ** power).toFixed(2)} ${unit}`;
+		}
+		return `${decimal.format(value)} B`;
+	}
+
+	const totals = $derived(sumNetflowWindow(stats.results));
+	const ready = $derived(!stats.loading && !stats.error);
+	const kpis = $derived([
+		{
+			id: 'flows',
+			label: 'Flows',
+			value: compact.format(totals.flows),
+			exact: totals.flows,
+			detail: totals.flows
+				? `${decimal.format((totals.flowsTcp / totals.flows) * 100)}% TCP`
+				: 'No flows'
+		},
+		{
+			id: 'packets',
+			label: 'Packets',
+			value: compact.format(totals.packets),
+			exact: totals.packets,
+			detail: totals.flows
+				? `${decimal.format(totals.packets / totals.flows)} per flow`
+				: 'No packets'
+		},
+		{
+			id: 'bytes',
+			label: 'Bytes',
+			value: formatBytes(totals.bytes),
+			exact: totals.bytes,
+			detail: totals.packets
+				? `${formatBytes(totals.bytes / totals.packets)} per packet`
+				: 'No bytes'
+		},
+		{
+			id: 'buckets',
+			label: 'Complete buckets',
+			value: `${totals.completeBuckets.toLocaleString()} / ${totals.buckets.toLocaleString()}`,
+			exact: totals.completeBuckets,
+			detail:
+				totals.partialBuckets || totals.unknownBuckets
+					? `${totals.partialBuckets.toLocaleString()} partial · ${totals.unknownBuckets.toLocaleString()} no coverage`
+					: 'Full source coverage'
+		}
+	]);
+</script>
+
+<section aria-label="Window totals" class="grid grid-cols-2 gap-3 lg:grid-cols-4">
+	{#each kpis as kpi (kpi.id)}
+		<Card.Root size="sm" class="gap-1 px-4 py-3" data-kpi={kpi.id}>
+			<p class="text-muted-foreground text-xs font-medium">{kpi.label}</p>
+			{#if ready}
+				<p
+					class="text-foreground truncate text-xl font-semibold tracking-tight tabular-nums sm:text-2xl"
+					title={kpi.exact.toLocaleString()}
+					data-kpi-value={kpi.exact}
+				>
+					{kpi.value}
+				</p>
+				<p class="text-muted-foreground truncate text-xs">{kpi.detail}</p>
+			{:else if stats.loading}
+				<Skeleton class="my-1 h-7 w-24" />
+				<Skeleton class="h-3.5 w-20" />
+			{:else}
+				<p class="text-muted-foreground text-xl font-semibold sm:text-2xl">—</p>
+				<p class="text-muted-foreground truncate text-xs">Unavailable</p>
+			{/if}
+		</Card.Root>
+	{/each}
+</section>
diff --git a/apps/web/src/lib/components/netflow/NetflowDashboard.svelte b/apps/web/src/lib/components/netflow/NetflowDashboard.svelte
index 1eb8568..3b4ef73 100644
--- a/apps/web/src/lib/components/netflow/NetflowDashboard.svelte
+++ b/apps/web/src/lib/components/netflow/NetflowDashboard.svelte
@@ -1,63 +1,53 @@
 <script lang="ts">
-	import { onDestroy } from 'svelte';
 	import ChartLoading from '#lib/components/charts/ChartLoading.svelte';
-	import DragGrip from '#lib/components/common/DragGrip.svelte';
+	import ChartCardHeader from '#lib/components/charts/ChartCardHeader.svelte';
 	import * as Card from '#lib/components/ui/card/index.ts';
 	import { goto } from '$app/navigation';
 	import ChartContainer from '#lib/components/charts/ChartContainer.svelte';
-	import MetricSelector from '#lib/components/filters/MetricSelector.svelte';
-	import { dateStringToEpochPST } from '#lib/utils/timezone.ts';
+	import TrafficMetricControls from '#lib/components/filters/TrafficMetricControls.svelte';
+	import SegmentedToggle from '#lib/components/common/SegmentedToggle.svelte';
 	import { navigateToNetflowFile } from '#lib/utils/netflow-file-navigation.ts';
-	import {
-		ensureCachedWindow,
-		getMissingWindowRanges,
-		readCachedWindow,
-		type TimeRange
-	} from '#lib/utils/window-cache.ts';
-	import type {
-		DataOption,
-		GroupByOption,
-		NetflowDataPoint,
-		ChartTypeOption,
-		RouterConfig
-	} from './types.ts';
+	import type { NetflowStatsData } from './netflow-stats-data.svelte.ts';
+	import type { DataOption, GroupByOption, NetflowDataPoint, ChartTypeOption } from './types.ts';
 	import type {
 		FlowDirection,
 		MaadIpVersion,
 		MaadMeasure,
 		NetflowIpFamily,
 		NetflowMetricTotals,
-		NetflowStatsResponse,
-		NetflowStatsResult,
-		TimeBucket
+		NetflowStatsResult
 	} from '#lib/types/types.ts';
 
-	const props = $props<{
+	type Props = {
 		dataset: string;
-		startDate: string;
-		endDate: string;
+		stats: NetflowStatsData;
 		groupBy: GroupByOption;
-		routers: RouterConfig;
-		routersLoaded: boolean;
 		dataOptions: DataOption[];
 		direction: FlowDirection;
 		ipVersion?: MaadIpVersion;
 		measure?: MaadMeasure;
 		onDrillDown?: (payload: { groupBy: GroupByOption; startDate: string; endDate: string }) => void;
 		onDataOptionsChange?: (payload: { options: DataOption[] }) => void;
-	}>();
+	};
+	const props: Props = $props();
 	const IP_FAMILY_LABELS: Record<NetflowIpFamily, string> = {
 		all: 'All',
 		ipv4: 'IPv4',
 		ipv6: 'IPv6'
 	};
+	const CHART_TYPE_OPTIONS = [
+		{ value: 'stacked', label: 'Stacked' },
+		{ value: 'line', label: 'Line' }
+	] as const;
 
 	let chartType = $state<ChartTypeOption>('stacked');
-	let selectedIpFamily = $state<NetflowIpFamily>('all');
-	let availableIpFamilies = $state<NetflowIpFamily[]>(['all']);
-	let rawResults = $state.raw<TimeBucket<NetflowStatsResult>[]>([]);
-	let loading = $state(false);
-	let error = $state<string | null>(null);
+	let requestedIpFamily = $state<NetflowIpFamily>('all');
+	const availableIpFamilies = $derived(props.stats.availableIpFamilies);
+	const selectedIpFamily = $derived(
+		availableIpFamilies.includes(requestedIpFamily) ? requestedIpFamily : 'all'
+	);
+	const loading = $derived(props.stats.loading);
+	const error = $derived(props.stats.error);
 
 	function getMetricsForFamily(
 		row: NetflowStatsResult,
@@ -82,159 +72,21 @@
 		};
 	}
 
-	let results = $derived.by<NetflowDataPoint[]>(() => {
+	const results = $derived.by<NetflowDataPoint[]>(() => {
 		const suffix =
 			selectedIpFamily === 'all' ? null : selectedIpFamily === 'ipv4' ? 'Ipv4' : 'Ipv6';
-		return rawResults.map((bucket) => ({
+		return props.stats.results.map((bucket) => ({
 			...bucket,
 			data: bucket.data === null ? null : getMetricsForFamily(bucket.data, suffix)
 		}));
 	});
 
-	let ipFamilyOptions = $derived.by(() =>
+	const ipFamilyOptions = $derived(
 		availableIpFamilies.length > 1
-			? availableIpFamilies.map((family) => ({
-					value: family,
-					label: IP_FAMILY_LABELS[family]
-				}))
+			? availableIpFamilies.map((family) => ({ value: family, label: IP_FAMILY_LABELS[family] }))
 			: []
 	);
 
-	type FilterInputs = {
-		startDate: string;
-		endDate: string;
-		groupBy: GroupByOption;
-		routers: RouterConfig;
-		direction: FlowDirection;
-	};
-
-	let lastFiltersKey = '';
-	let requestToken = 0;
-	let requestController: AbortController | null = null;
-	const ipFamilyCache: Record<string, NetflowIpFamily[] | undefined> = {};
-
-	function setAvailableIpFamilies(ipFamilies: NetflowIpFamily[]) {
-		availableIpFamilies = ipFamilies;
-		if (!ipFamilies.includes(selectedIpFamily)) {
-			selectedIpFamily = 'all';
-		}
-	}
-
-	function deriveSelectedRouters(routers: RouterConfig): string[] {
-		return Object.entries(routers)
-			.filter(([, enabled]) => enabled)
-			.map(([router]) => router.trim())
-			.filter((router) => router.length > 0)
-			.sort();
-	}
-
-	function getCacheKey(filters: FilterInputs, selectedRouters: string[]): string {
-		return JSON.stringify({
-			chart: 'netflow',
-			dataset: props.dataset,
-			groupBy: filters.groupBy,
-			routers: selectedRouters,
-			direction: filters.direction
-		});
-	}
-
-	function getRequestedRange(filters: FilterInputs): TimeRange {
-		return {
-			start: dateStringToEpochPST(filters.startDate),
-			end: dateStringToEpochPST(filters.endDate, true)
-		};
-	}
-
-	function readCachedResults(
-		cacheKey: string,
-		requestedRange: TimeRange
-	): TimeBucket<NetflowStatsResult>[] {
-		return readCachedWindow<TimeBucket<NetflowStatsResult>>(
-			cacheKey,
-			requestedRange,
-			(record, range) => record.bucketStart >= range.start && record.bucketStart < range.end
-		);
-	}
-
-	function handleIpFamilyChange(ipFamily: NetflowIpFamily) {
-		selectedIpFamily = ipFamily;
-	}
-
-	async function loadData(
-		filters: FilterInputs,
-		token: number,
-		selectedRouters: string[],
-		requestedRange: TimeRange
-	) {
-		requestController?.abort();
-		const controller = new AbortController();
-		requestController = controller;
-		const cacheKey = getCacheKey(filters, selectedRouters);
-		const needsFetch = getMissingWindowRanges(cacheKey, requestedRange).length > 0;
-		loading = needsFetch;
-		error = null;
-
-		const params = new URLSearchParams({
-			dataset: props.dataset,
-			routers: selectedRouters.join(','),
-			groupBy: filters.groupBy,
-			direction: filters.direction
-		});
-
-		try {
-			await ensureCachedWindow<TimeBucket<NetflowStatsResult>>({
-				key: cacheKey,
-				requestedRange,
-				signal: controller.signal,
-				fetchRange: async (range, signal) => {
-					const response = await fetch(
-						`/api/netflow/stats?${new URLSearchParams({
-							...Object.fromEntries(params.entries()),
-							startDate: range.start.toString(),
-							endDate: range.end.toString()
-						}).toString()}`,
-						{
-							signal,
-							method: 'GET',
-							headers: {
-								'Content-Type': 'application/json'
-							}
-						}
-					);
-
-					if (!response.ok) {
-						const message = await response.text();
-						throw new Error(message || `Failed to load data: ${response.statusText}`);
-					}
-
-					const json = (await response.json()) as NetflowStatsResponse;
-					ipFamilyCache[cacheKey] = json.availableIpFamilies;
-					return json.result;
-				},
-				getRecordKey: (record) => `${record.bucketStart}`,
-				compareRecords: (left, right) => left.bucketStart - right.bucketStart
-			});
-
-			if (token !== requestToken) {
-				return;
-			}
-			setAvailableIpFamilies(ipFamilyCache[cacheKey] ?? ['all']);
-			rawResults = readCachedResults(cacheKey, requestedRange);
-		} catch (err) {
-			if (token !== requestToken) {
-				return;
-			}
-			if (err instanceof DOMException && err.name === 'AbortError') return;
-			error = `Failed to load data: ${err instanceof Error ? err.message : 'Unknown error'}`;
-			rawResults = [];
-		} finally {
-			if (token === requestToken) {
-				loading = false;
-				if (requestController === controller) requestController = null;
-			}
-		}
-	}
-
 	function handleDrillDown(newGroupBy: GroupByOption, newStartDate: string, newEndDate: string) {
 		props.onDrillDown?.({ groupBy: newGroupBy, startDate: newStartDate, endDate: newEndDate });
 	}
@@ -249,112 +101,52 @@
 			props.measure
 		);
 	}
-
-	function handleChartTypeChange(newChartType: ChartTypeOption) {
-		chartType = newChartType;
-	}
-
-	function handleDataOptionsChange(nextOptions: DataOption[]) {
-		props.onDataOptionsChange?.({ options: nextOptions });
-	}
-
-	$effect(() => {
-		const filters: FilterInputs = {
-			startDate: props.startDate,
-			endDate: props.endDate,
-			groupBy: props.groupBy,
-			routers: props.routers,
-			direction: props.direction
-		};
-
-		const selectedRouters = deriveSelectedRouters(filters.routers);
-
-		if (!props.routersLoaded) {
-			requestToken += 1;
-			requestController?.abort();
-			requestController = null;
-			error = null;
-			rawResults = [];
-			loading = true;
-			return;
-		}
-
-		if (selectedRouters.length === 0) {
-			lastFiltersKey = '';
-			requestToken += 1;
-			requestController?.abort();
-			requestController = null;
-			error = 'Select at least one source to view NetFlow statistics';
-			rawResults = [];
-			loading = false;
-			return;
-		}
-
-		const nextKey = JSON.stringify({
-			dataset: props.dataset,
-			startDate: filters.startDate,
-			endDate: filters.endDate,
-			groupBy: filters.groupBy,
-			routers: selectedRouters,
-			direction: filters.direction
-		});
-
-		if (nextKey === lastFiltersKey) {
-			return;
-		}
-
-		lastFiltersKey = nextKey;
-		const requestedRange = getRequestedRange(filters);
-		const token = ++requestToken;
-		loadData(filters, token, selectedRouters, requestedRange);
-	});
-
-	onDestroy(() => {
-		requestToken += 1;
-		requestController?.abort();
-	});
 </script>
 
 <Card.Root
 	size="sm"
-	class="gap-0 overflow-visible py-0"
+	class="gap-0 py-0"
 	data-testid="chart-card-state"
 	data-state={loading ? 'loading' : error ? 'error' : results.length === 0 ? 'empty' : 'ready'}
 >
-	<Card.Header
-		class="border-border relative cursor-grab border-b py-4 select-none active:cursor-grabbing"
-		draggable="true"
-		data-drag-handle
-	>
-		<Card.Title class="text-lg font-semibold">
-			<h2>Traffic Overview</h2>
-		</Card.Title>
-		<DragGrip />
-	</Card.Header>
-
-	<Card.Content class="space-y-4 py-4">
-		<MetricSelector
-			dataOptions={props.dataOptions}
-			onDataOptionsChange={handleDataOptionsChange}
-			{chartType}
-			onChartTypeChange={handleChartTypeChange}
-			{ipFamilyOptions}
-			{selectedIpFamily}
-			onIpFamilyChange={handleIpFamilyChange}
-		/>
-
+	<ChartCardHeader title="Traffic Overview">
+		{#snippet controls()}
+			<TrafficMetricControls
+				dataOptions={props.dataOptions}
+				onDataOptionsChange={(options) => props.onDataOptionsChange?.({ options })}
+			/>
+			{#if ipFamilyOptions.length > 0}
+				<SegmentedToggle
+					options={ipFamilyOptions}
+					value={selectedIpFamily}
+					onValueChange={(family) => (requestedIpFamily = family)}
+					ariaLabel="Traffic IP family"
+				/>
+			{/if}
+			<SegmentedToggle
+				options={CHART_TYPE_OPTIONS}
+				value={chartType}
+				onValueChange={(next) => (chartType = next)}
+				ariaLabel="Traffic chart type"
+			/>
+		{/snippet}
+	</ChartCardHeader>
+
+	<Card.Content class="p-0">
 		<div
-			class="chart-frame traffic-frame h-[380px] min-h-[280px] resize-none overflow-hidden rounded-md border md:h-[320px] md:min-h-[240px] md:resize-y md:overflow-auto"
+			class="chart-frame traffic-frame h-[380px] min-h-[280px] resize-none overflow-hidden p-3 [--chart-height:400px] sm:[--chart-height:520px] md:h-[320px] md:min-h-[240px] md:resize-y md:overflow-auto"
 		>
 			{#if loading}
 				<ChartLoading label="Loading data..." />
 			{:else if error}
 				<div class="flex h-full items-center justify-center">
-					<div class="text-destructive">{error}</div>
+					<div class="text-destructive text-sm">{error}</div>
 				</div>
 			{:else if results.length === 0}
 				<div class="flex h-full items-center justify-center">
-					<div class="text-muted-foreground">No data available for the selected filters</div>
+					<div class="text-muted-foreground text-sm">
+						No data available for the selected filters
+					</div>
 				</div>
 			{:else}
 				<ChartContainer
diff --git a/apps/web/src/lib/components/netflow/netflow-stats-data.svelte.ts b/apps/web/src/lib/components/netflow/netflow-stats-data.svelte.ts
new file mode 100644
index 0000000..eb1cf68
--- /dev/null
+++ b/apps/web/src/lib/components/netflow/netflow-stats-data.svelte.ts
@@ -0,0 +1,223 @@
+import { dateStringToEpochPST } from '#lib/utils/timezone.ts';
+import type { GroupByOption, RouterConfig } from '#lib/components/netflow/types.ts';
+import type {
+	FlowDirection,
+	NetflowIpFamily,
+	NetflowStatsResponse,
+	NetflowStatsResult,
+	TimeBucket
+} from '#lib/types/types.ts';
+import {
+	ensureCachedWindow,
+	getMissingWindowRanges,
+	readCachedWindow,
+	type TimeRange
+} from '#lib/utils/window-cache.ts';
+import { createRequestGate } from '#lib/components/charts/flow-characteristics.ts';
+
+export type NetflowStatsFilters = {
+	dataset: string;
+	startDate: string;
+	endDate: string;
+	groupBy: GroupByOption;
+	routers: RouterConfig;
+	routersLoaded: boolean;
+	direction: FlowDirection;
+};
+
+export type NetflowStatsData = {
+	readonly results: TimeBucket<NetflowStatsResult>[];
+	readonly availableIpFamilies: NetflowIpFamily[];
+	readonly loading: boolean;
+	readonly error: string | null;
+};
+
+export type NetflowWindowTotals = {
+	flows: number;
+	flowsTcp: number;
+	packets: number;
+	bytes: number;
+	buckets: number;
+	completeBuckets: number;
+	partialBuckets: number;
+	unknownBuckets: number;
+};
+
+type StatsRequest =
+	| { kind: 'waiting' }
+	| { kind: 'invalid'; error: string }
+	| {
+			kind: 'fetch';
+			id: string;
+			key: string;
+			requestedRange: TimeRange;
+			baseParams: Record<string, string>;
+			missing: boolean;
+	  };
+
+type FetchRequest = Extract<StatsRequest, { kind: 'fetch' }>;
+
+type SettledRequest = {
+	id: string;
+	results: TimeBucket<NetflowStatsResult>[];
+	availableIpFamilies: NetflowIpFamily[];
+	error: string | null;
+};
+
+const ipFamilyCache: Record<string, NetflowIpFamily[]> = {};
+const ALL_FAMILIES: NetflowIpFamily[] = ['all'];
+
+function selectedRouters(routers: RouterConfig): string[] {
+	return Object.entries(routers)
+		.filter(([, enabled]) => enabled)
+		.map(([router]) => router.trim())
+		.filter((router) => router.length > 0)
+		.sort();
+}
+
+function describeRequest(filtersKey: string): StatsRequest {
+	const filters = JSON.parse(filtersKey) as NetflowStatsFilters;
+	if (!filters.routersLoaded) return { kind: 'waiting' };
+	const routers = selectedRouters(filters.routers);
+	if (routers.length === 0) {
+		return { kind: 'invalid', error: 'Select at least one source to view NetFlow statistics' };
+	}
+	const key = JSON.stringify({
+		chart: 'netflow',
+		dataset: filters.dataset,
+		groupBy: filters.groupBy,
+		routers,
+		direction: filters.direction
+	});
+	const requestedRange = {
+		start: dateStringToEpochPST(filters.startDate),
+		end: dateStringToEpochPST(filters.endDate, true)
+	};
+	return {
+		kind: 'fetch',
+		id: filtersKey,
+		key,
+		requestedRange,
+		baseParams: {
+			dataset: filters.dataset,
+			routers: routers.join(','),
+			groupBy: filters.groupBy,
+			direction: filters.direction
+		},
+		missing: getMissingWindowRanges(key, requestedRange).length > 0
+	};
+}
+
+async function fetchStats(
+	request: FetchRequest,
+	signal: AbortSignal
+): Promise<Omit<SettledRequest, 'id' | 'error'>> {
+	await ensureCachedWindow<TimeBucket<NetflowStatsResult>>({
+		key: request.key,
+		requestedRange: request.requestedRange,
+		signal,
+		fetchRange: async (range, signal) => {
+			const params = new URLSearchParams({
+				...request.baseParams,
+				startDate: range.start.toString(),
+				endDate: range.end.toString()
+			});
+			const response = await fetch(`/api/netflow/stats?${params}`, { signal });
+			if (!response.ok) {
+				const message = await response.text();
+				throw new Error(message || `Failed to load data: ${response.statusText}`);
+			}
+			const json = (await response.json()) as NetflowStatsResponse;
+			ipFamilyCache[request.key] = json.availableIpFamilies;
+			return json.result;
+		},
+		getRecordKey: (record) => `${record.bucketStart}`,
+		compareRecords: (left, right) => left.bucketStart - right.bucketStart
+	});
+	return {
+		results: readCachedWindow<TimeBucket<NetflowStatsResult>>(
+			request.key,
+			request.requestedRange,
+			(record, range) => record.bucketStart >= range.start && record.bucketStart < range.end
+		),
+		availableIpFamilies: ipFamilyCache[request.key] ?? ALL_FAMILIES
+	};
+}
+
+/** Share one cached /api/netflow/stats window between the KPI row and the traffic card. */
+export function createNetflowStatsData(getFilters: () => NetflowStatsFilters): NetflowStatsData {
+	const filtersKey = $derived(JSON.stringify(getFilters()));
+	const request = $derived(describeRequest(filtersKey));
+	let settled = $state.raw<SettledRequest | null>(null);
+	const requestGate = createRequestGate();
+
+	$effect(() => {
+		if (request.kind !== 'fetch') return;
+		const current = request;
+		const token = requestGate.begin();
+		const controller = new AbortController();
+		fetchStats(current, controller.signal).then(
+			(data) => {
+				if (requestGate.isCurrent(token)) settled = { id: current.id, ...data, error: null };
+			},
+			(reason: unknown) => {
+				if (!requestGate.isCurrent(token)) return;
+				if (reason instanceof DOMException && reason.name === 'AbortError') return;
+				settled = {
+					id: current.id,
+					results: [],
+					availableIpFamilies: ALL_FAMILIES,
+					error: `Failed to load data: ${reason instanceof Error ? reason.message : 'Unknown error'}`
+				};
+			}
+		);
+		return () => {
+			requestGate.begin();
+			controller.abort();
+		};
+	});
+
+	return {
+		get results() {
+			return request.kind === 'fetch' ? (settled?.results ?? []) : [];
+		},
+		get availableIpFamilies() {
+			return request.kind === 'fetch'
+				? (settled?.availableIpFamilies ?? ALL_FAMILIES)
+				: ALL_FAMILIES;
+		},
+		get loading() {
+			if (request.kind === 'waiting') return true;
+			return request.kind === 'fetch' && settled?.id !== request.id && request.missing;
+		},
+		get error() {
+			if (request.kind === 'invalid') return request.error;
+			return request.kind === 'fetch' && settled?.id === request.id ? settled.error : null;
+		}
+	};
+}
+
+/** Sum the additive totals of every observed bucket; buckets without data contribute nothing. */
+export function sumNetflowWindow(results: readonly TimeBucket<NetflowStatsResult>[]) {
+	const totals: NetflowWindowTotals = {
+		flows: 0,
+		flowsTcp: 0,
+		packets: 0,
+		bytes: 0,
+		buckets: results.length,
+		completeBuckets: 0,
+		partialBuckets: 0,
+		unknownBuckets: 0
+	};
+	for (const bucket of results) {
+		if (bucket.coverage.state === 'complete') totals.completeBuckets += 1;
+		else if (bucket.coverage.state === 'partial') totals.partialBuckets += 1;
+		else totals.unknownBuckets += 1;
+		if (!bucket.data) continue;
+		totals.flows += bucket.data.flows;
+		totals.flowsTcp += bucket.data.flowsTcp;
+		totals.packets += bucket.data.packets;
+		totals.bytes += bucket.data.bytes;
+	}
+	return totals;
+}
diff --git a/apps/web/src/lib/components/shell/AppNav.svelte b/apps/web/src/lib/components/shell/AppNav.svelte
new file mode 100644
index 0000000..af5c7a9
--- /dev/null
+++ b/apps/web/src/lib/components/shell/AppNav.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { sectionHref, sectionsFor, type AppSection } from './app-context.ts';
+
+	let { datasetId, active }: { datasetId: string | null; active: AppSection } = $props();
+</script>
+
+<nav aria-label="Main navigation" class="app-nav border-border bg-card border-b">
+	<div class="shell flex gap-1 overflow-x-auto">
+		{#each sectionsFor(datasetId) as item (item.section)}
+			<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -- sectionHref resolves every path. -->
+			<a
+				href={sectionHref(item.section, datasetId)}
+				aria-current={active === item.section ? 'page' : undefined}
+				class="text-muted-foreground hover:text-foreground aria-[current=page]:border-foreground aria-[current=page]:text-foreground -mb-px border-b-2 border-transparent px-2.5 py-2.5 text-sm whitespace-nowrap transition-colors aria-[current=page]:font-medium"
+				>{item.label}</a
+			>
+		{/each}
+	</div>
+</nav>
diff --git a/apps/web/src/lib/components/shell/CommandMenu.svelte b/apps/web/src/lib/components/shell/CommandMenu.svelte
new file mode 100644
index 0000000..b38ebe2
--- /dev/null
+++ b/apps/web/src/lib/components/shell/CommandMenu.svelte
@@ -0,0 +1,95 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { Search } from '@lucide/svelte';
+	import { Button } from '#lib/components/ui/button/index.ts';
+	import * as Command from '#lib/components/ui/command/index.ts';
+	import { Kbd } from '#lib/components/ui/kbd/index.ts';
+	import type { DatasetSummary } from '#lib/datasets.ts';
+	import { theme } from '#lib/stores/theme.svelte.ts';
+	import { sectionHref, sectionsFor, type AppSection } from './app-context.ts';
+
+	let {
+		datasets,
+		datasetId,
+		onRequestDatasets
+	}: {
+		datasets: DatasetSummary[] | null;
+		datasetId: string | null;
+		onRequestDatasets: () => void;
+	} = $props();
+
+	let open = $state(false);
+
+	function setOpen(next: boolean) {
+		open = next;
+		if (next && !datasets) onRequestDatasets();
+	}
+
+	function run(action: () => void) {
+		open = false;
+		action();
+	}
+
+	function go(section: AppSection, id: string | null) {
+		run(() => void goto(sectionHref(section, id)));
+	}
+</script>
+
+<svelte:window
+	onkeydown={(event) => {
+		if (event.key.toLowerCase() === 'k' && (event.metaKey || event.ctrlKey) && !event.altKey) {
+			event.preventDefault();
+			setOpen(!open);
+		}
+	}}
+/>
+
+<Button
+	variant="ghost"
+	size="sm"
+	class="text-muted-foreground gap-2 px-2"
+	aria-label="Open command menu"
+	aria-keyshortcuts="Control+K Meta+K"
+	onclick={() => setOpen(true)}
+>
+	<Search class="size-4" />
+	<span class="hidden md:inline">Search</span>
+	<Kbd class="hidden md:inline-flex">⌘K</Kbd>
+</Button>
+
+<Command.Dialog
+	bind:open
+	title="Command menu"
+	description="Jump to a page or dataset, or switch the theme."
+>
+	<Command.Input placeholder="Type a command or search…" aria-label="Search commands" />
+	<Command.List>
+		<Command.Empty>No results.</Command.Empty>
+		<Command.Group heading="Pages">
+			{#each sectionsFor(datasetId) as item (item.section)}
+				<Command.Item value={`page ${item.label}`} onSelect={() => go(item.section, datasetId)}
+					>{item.label}</Command.Item
+				>
+			{/each}
+		</Command.Group>
+		{#if datasets && datasets.length > 0}
+			<Command.Group heading="Datasets">
+				{#each datasets as dataset (dataset.datasetId)}
+					<Command.Item
+						value={`dataset ${dataset.label} ${dataset.datasetId}`}
+						data-checked={dataset.datasetId === datasetId}
+						onSelect={() => go('dashboard', dataset.datasetId)}
+						>{dataset.label}
+						<span class="text-muted-foreground font-mono text-xs">{dataset.datasetId}</span
+						></Command.Item
+					>
+				{/each}
+			</Command.Group>
+		{/if}
+		<Command.Group heading="Preferences">
+			<Command.Item value="theme toggle dark light" onSelect={() => run(() => theme.toggle())}
+				>Switch to {theme.dark ? 'light' : 'dark'} theme</Command.Item
+			>
+		</Command.Group>
+	</Command.List>
+</Command.Dialog>
diff --git a/apps/web/src/lib/components/shell/DatasetSwitcher.svelte b/apps/web/src/lib/components/shell/DatasetSwitcher.svelte
new file mode 100644
index 0000000..ee379d2
--- /dev/null
+++ b/apps/web/src/lib/components/shell/DatasetSwitcher.svelte
@@ -0,0 +1,79 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { ChevronsUpDown } from '@lucide/svelte';
+	import * as Command from '#lib/components/ui/command/index.ts';
+	import * as Popover from '#lib/components/ui/popover/index.ts';
+	import { Button } from '#lib/components/ui/button/index.ts';
+	import type { DatasetSummary } from '#lib/datasets.ts';
+	import { sectionHref, type AppSection } from './app-context.ts';
+
+	let {
+		datasets,
+		datasetId,
+		section,
+		onRequestDatasets
+	}: {
+		datasets: DatasetSummary[] | null;
+		datasetId: string | null;
+		section: AppSection;
+		onRequestDatasets: () => void;
+	} = $props();
+
+	let open = $state(false);
+	const current = $derived(datasets?.find((dataset) => dataset.datasetId === datasetId));
+	const label = $derived(current?.label ?? datasetId ?? 'Select dataset');
+
+	function choose(id: string) {
+		open = false;
+		const target = section === 'datasets' ? 'dashboard' : section;
+		void goto(sectionHref(target, id));
+	}
+</script>
+
+<Popover.Root
+	bind:open
+	onOpenChange={(next) => {
+		if (next && !datasets) onRequestDatasets();
+	}}
+>
+	<Popover.Trigger>
+		{#snippet child({ props })}
+			<Button
+				{...props}
+				variant="ghost"
+				size="sm"
+				class="max-w-[min(18rem,45vw)] gap-1.5 px-2 font-medium"
+				aria-label={`Dataset: ${label}`}
+			>
+				<span class="truncate">{label}</span>
+				<ChevronsUpDown class="text-muted-foreground size-3.5" />
+			</Button>
+		{/snippet}
+	</Popover.Trigger>
+	<Popover.Content align="start" class="w-72 gap-0 p-0">
+		<Command.Root>
+			<Command.Input placeholder="Search datasets…" aria-label="Search datasets" />
+			<Command.List class="max-h-72">
+				<Command.Empty>{datasets ? 'No datasets found.' : 'Loading datasets…'}</Command.Empty>
+				{#if datasets}
+					<Command.Group heading="Datasets">
+						{#each datasets as dataset (dataset.datasetId)}
+							<Command.Item
+								value={`${dataset.label} ${dataset.datasetId}`}
+								data-checked={dataset.datasetId === datasetId}
+								onSelect={() => choose(dataset.datasetId)}
+							>
+								<span class="flex min-w-0 flex-col">
+									<span class="truncate">{dataset.label}</span>
+									<span class="text-muted-foreground truncate font-mono text-xs"
+										>{dataset.datasetId}</span
+									>
+								</span>
+							</Command.Item>
+						{/each}
+					</Command.Group>
+				{/if}
+			</Command.List>
+		</Command.Root>
+	</Popover.Content>
+</Popover.Root>
diff --git a/apps/web/src/lib/components/shell/app-context.ts b/apps/web/src/lib/components/shell/app-context.ts
new file mode 100644
index 0000000..89f801c
--- /dev/null
+++ b/apps/web/src/lib/components/shell/app-context.ts
@@ -0,0 +1,54 @@
+import { resolve } from '$app/paths';
+import type { DatasetSummary } from '#lib/datasets.ts';
+
+export type AppSection = 'datasets' | 'dashboard' | 'files' | 'alerts';
+
+type PageLike = {
+	params: Partial<Record<string, string>>;
+	url: { searchParams: Pick<URLSearchParams, 'get'> };
+	data: Record<string, unknown>;
+};
+
+export function pageDatasetId(page: PageLike): string | null {
+	const fromData = page.data.selectedDataset ?? page.data.dataset ?? page.data.datasetId;
+	return (
+		page.params.dataset ??
+		(page.url.searchParams.get('dataset')?.trim() || null) ??
+		(typeof fromData === 'string' && fromData ? fromData : null)
+	);
+}
+
+export function pageDatasets(page: PageLike): DatasetSummary[] | null {
+	return Array.isArray(page.data.datasets) ? (page.data.datasets as DatasetSummary[]) : null;
+}
+
+export function pageSection(pathname: string): AppSection {
+	if (pathname.startsWith('/netflow/files')) return 'files';
+	if (/^\/datasets\/[^/]+\/alerts/.test(pathname)) return 'alerts';
+	if (pathname.startsWith('/datasets/')) return 'dashboard';
+	return 'datasets';
+}
+
+export function sectionHref(section: AppSection, datasetId: string | null): string {
+	if (section === 'files') {
+		return datasetId
+			? `${resolve('/netflow/files')}?dataset=${encodeURIComponent(datasetId)}`
+			: resolve('/netflow/files');
+	}
+	if (!datasetId || section === 'datasets') return resolve('/');
+	if (section === 'alerts') return resolve('/datasets/[dataset]/alerts', { dataset: datasetId });
+	return resolve('/datasets/[dataset]', { dataset: datasetId });
+}
+
+export function sectionsFor(datasetId: string | null): { section: AppSection; label: string }[] {
+	return datasetId
+		? [
+				{ section: 'dashboard', label: 'Dashboard' },
+				{ section: 'files', label: 'Files' },
+				{ section: 'alerts', label: 'Alerts' }
+			]
+		: [
+				{ section: 'datasets', label: 'Datasets' },
+				{ section: 'files', label: 'Files' }
+			];
+}
diff --git a/apps/web/src/lib/components/ui/empty/empty-content.svelte b/apps/web/src/lib/components/ui/empty/empty-content.svelte
new file mode 100644
index 0000000..615c54d
--- /dev/null
+++ b/apps/web/src/lib/components/ui/empty/empty-content.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '#lib/utils.ts';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	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',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/apps/web/src/lib/components/ui/empty/empty-description.svelte b/apps/web/src/lib/components/ui/empty/empty-description.svelte
new file mode 100644
index 0000000..7e72937
--- /dev/null
+++ b/apps/web/src/lib/components/ui/empty/empty-description.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '#lib/utils.ts';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	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',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/apps/web/src/lib/components/ui/empty/empty-header.svelte b/apps/web/src/lib/components/ui/empty/empty-header.svelte
new file mode 100644
index 0000000..a9b0938
--- /dev/null
+++ b/apps/web/src/lib/components/ui/empty/empty-header.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '#lib/utils.ts';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="empty-header"
+	class={cn('flex max-w-sm flex-col items-center gap-2', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/apps/web/src/lib/components/ui/empty/empty-media.svelte b/apps/web/src/lib/components/ui/empty/empty-media.svelte
new file mode 100644
index 0000000..335aa23
--- /dev/null
+++ b/apps/web/src/lib/components/ui/empty/empty-media.svelte
@@ -0,0 +1,41 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from 'tailwind-variants';
+
+	export const emptyMediaVariants = tv({
+		base: 'mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0',
+		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"
+			}
+		},
+		defaultVariants: {
+			variant: 'default'
+		}
+	});
+
+	export type EmptyMediaVariant = VariantProps<typeof emptyMediaVariants>['variant'];
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from '#lib/utils.ts';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		variant = 'default',
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { variant?: EmptyMediaVariant } = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="empty-icon"
+	data-variant={variant}
+	class={cn(emptyMediaVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/apps/web/src/lib/components/ui/empty/empty-title.svelte b/apps/web/src/lib/components/ui/empty/empty-title.svelte
new file mode 100644
index 0000000..582ed2d
--- /dev/null
+++ b/apps/web/src/lib/components/ui/empty/empty-title.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '#lib/utils.ts';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="empty-title"
+	class={cn('text-lg font-medium tracking-tight', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/apps/web/src/lib/components/ui/empty/empty.svelte b/apps/web/src/lib/components/ui/empty/empty.svelte
new file mode 100644
index 0000000..c3f2939
--- /dev/null
+++ b/apps/web/src/lib/components/ui/empty/empty.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '#lib/utils.ts';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="empty"
+	class={cn(
+		'flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-lg border-dashed p-12 text-center text-balance',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/apps/web/src/lib/components/ui/empty/index.ts b/apps/web/src/lib/components/ui/empty/index.ts
new file mode 100644
index 0000000..c74f8f3
--- /dev/null
+++ b/apps/web/src/lib/components/ui/empty/index.ts
@@ -0,0 +1,22 @@
+import Content from './empty-content.svelte';
+import Description from './empty-description.svelte';
+import Header from './empty-header.svelte';
+import Media from './empty-media.svelte';
+import Title from './empty-title.svelte';
+import Root from './empty.svelte';
+
+export {
+	Root,
+	Header,
+	Media,
+	Title,
+	Description,
+	Content,
+	//
+	Root as Empty,
+	Header as EmptyHeader,
+	Media as EmptyMedia,
+	Title as EmptyTitle,
+	Description as EmptyDescription,
+	Content as EmptyContent
+};
diff --git a/apps/web/src/lib/components/ui/native-select/index.ts b/apps/web/src/lib/components/ui/native-select/index.ts
new file mode 100644
index 0000000..a455f70
--- /dev/null
+++ b/apps/web/src/lib/components/ui/native-select/index.ts
@@ -0,0 +1,12 @@
+import OptGroup from './native-select-opt-group.svelte';
+import Option from './native-select-option.svelte';
+import Root from './native-select.svelte';
+
+export {
+	Root,
+	Option,
+	OptGroup,
+	Root as NativeSelect,
+	Option as NativeSelectOption,
+	OptGroup as NativeSelectOptGroup
+};
diff --git a/apps/web/src/lib/components/ui/native-select/native-select-opt-group.svelte b/apps/web/src/lib/components/ui/native-select/native-select-opt-group.svelte
new file mode 100644
index 0000000..fef240d
--- /dev/null
+++ b/apps/web/src/lib/components/ui/native-select/native-select-opt-group.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '#lib/utils.ts';
+	import type { HTMLOptgroupAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLOptgroupAttributes> = $props();
+</script>
+
+<optgroup
+	bind:this={ref}
+	data-slot="native-select-optgroup"
+	class={cn('bg-[Canvas] text-[CanvasText]', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</optgroup>
diff --git a/apps/web/src/lib/components/ui/native-select/native-select-option.svelte b/apps/web/src/lib/components/ui/native-select/native-select-option.svelte
new file mode 100644
index 0000000..2409071
--- /dev/null
+++ b/apps/web/src/lib/components/ui/native-select/native-select-option.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '#lib/utils.ts';
+	import type { HTMLOptionAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLOptionAttributes> = $props();
+</script>
+
+<option
+	bind:this={ref}
+	data-slot="native-select-option"
+	class={cn('bg-[Canvas] text-[CanvasText]', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</option>
diff --git a/apps/web/src/lib/components/ui/native-select/native-select.svelte b/apps/web/src/lib/components/ui/native-select/native-select.svelte
new file mode 100644
index 0000000..09ff888
--- /dev/null
+++ b/apps/web/src/lib/components/ui/native-select/native-select.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+	import { cn, type WithElementRef } from '#lib/utils.ts';
+	import type { HTMLSelectAttributes } from 'svelte/elements';
+
+	type NativeSelectProps = Omit<WithElementRef<HTMLSelectAttributes>, 'size'> & {
+		size?: 'sm' | 'default';
+	};
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		size = 'default',
+		children,
+		...restProps
+	}: NativeSelectProps = $props();
+</script>
+
+<div
+	class={cn('group/native-select relative w-fit has-[select:disabled]:opacity-50', className)}
+	data-slot="native-select-wrapper"
+	data-size={size}
+>
+	<select
+		bind:value
+		bind:this={ref}
+		data-slot="native-select"
+		data-size={size}
+		class="border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-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 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent py-1 pr-8 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] outline-none select-none focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:ring-3 data-[size=sm]:h-8"
+		{...restProps}
+	>
+		{@render children?.()}
+	</select>
+	<ChevronDownIcon
+		class="text-muted-foreground pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 select-none"
+		aria-hidden
+		data-slot="native-select-icon"
+	/>
+</div>
diff --git a/apps/web/src/routes/+layout.svelte b/apps/web/src/routes/+layout.svelte
index 5389347..0f7ac67 100644
--- a/apps/web/src/routes/+layout.svelte
+++ b/apps/web/src/routes/+layout.svelte
@@ -8,8 +8,28 @@
 	import * as Tooltip from '#lib/components/ui/tooltip/index.ts';
 	import { theme } from '#lib/stores/theme.svelte.ts';
 	import Logo from '#lib/components/Logo.svelte';
+	import AppNav from '#lib/components/shell/AppNav.svelte';
+	import CommandMenu from '#lib/components/shell/CommandMenu.svelte';
+	import DatasetSwitcher from '#lib/components/shell/DatasetSwitcher.svelte';
+	import { pageDatasetId, pageDatasets, pageSection } from '#lib/components/shell/app-context.ts';
+	import {
+		getCachedDatasetSummaries,
+		loadDatasetSummaries,
+		type DatasetSummary
+	} from '#lib/datasets.ts';
 
 	let { children } = $props();
+	let fetchedDatasets = $state.raw<DatasetSummary[] | null>(null);
+	const datasets = $derived(pageDatasets(page) ?? fetchedDatasets ?? getCachedDatasetSummaries());
+	const datasetId = $derived(pageDatasetId(page));
+	const section = $derived(pageSection(page.url.pathname));
+
+	function requestDatasets() {
+		void loadDatasetSummaries().then(
+			(loaded) => (fetchedDatasets = loaded),
+			() => {}
+		);
+	}
 
 	onMount(() => {
 		theme.syncFromDom();
@@ -18,64 +38,54 @@
 
 <!-- Single app-wide provider required by every Tooltip.Root (bits-ui) -->
 <Tooltip.Provider>
-	<div class="font-body bg-background text-foreground flex h-dvh flex-col overflow-hidden">
+	<div class="bg-background text-foreground flex h-dvh flex-col overflow-hidden font-sans">
 		<header class="app-topbar border-border bg-card shrink-0 border-b">
-			<div class="shell-width">
-				<div class="flex items-center justify-between gap-3 py-2">
-					<div>
-						<h1 class="text-foreground text-base font-semibold tracking-tight">
-							<a href={resolve('/')}><Logo /></a>
-						</h1>
-					</div>
-					<nav aria-label="Main navigation" class="flex items-center gap-3 text-sm sm:gap-6">
-						<a
-							href={resolve('/')}
-							aria-current={page.url.pathname === '/' ? 'page' : undefined}
-							class="text-muted-foreground hover:text-foreground aria-[current=page]:text-accent-foreground"
-							>Home</a
-						>
-						<a
-							href={resolve('/netflow/files')}
-							aria-current={page.url.pathname.startsWith('/netflow/files') ? 'page' : undefined}
-							class="text-muted-foreground hover:text-foreground aria-[current=page]:text-accent-foreground"
-							>Files</a
-						>
-						<Button
-							variant="ghost"
-							size="icon-sm"
-							onclick={() => theme.toggle()}
-							class="text-muted-foreground hover:text-foreground"
-							aria-label={theme.dark ? 'Switch to light mode' : 'Switch to dark mode'}
-						>
-							{#if theme.dark}
-								<Sun size={20} />
-							{:else}
-								<Moon size={20} />
-							{/if}
-						</Button>
-					</nav>
+			<div class="shell flex h-12 items-center gap-1.5">
+				<a
+					href={resolve('/')}
+					class="text-foreground -ml-1 rounded-md px-1 py-1 text-[0.9375rem] font-semibold tracking-tight"
+					><Logo /></a
+				>
+				<span class="text-border text-xl font-light select-none" aria-hidden="true">/</span>
+				<DatasetSwitcher {datasets} {datasetId} {section} onRequestDatasets={requestDatasets} />
+				<div class="ml-auto flex items-center gap-1">
+					<CommandMenu {datasets} {datasetId} onRequestDatasets={requestDatasets} />
+					<Button
+						variant="ghost"
+						size="icon-sm"
+						onclick={() => theme.toggle()}
+						class="text-muted-foreground hover:text-foreground"
+						aria-label={theme.dark ? 'Switch to light mode' : 'Switch to dark mode'}
+					>
+						{#if theme.dark}
+							<Sun class="size-4" />
+						{:else}
+							<Moon class="size-4" />
+						{/if}
+					</Button>
 				</div>
 			</div>
 		</header>
+		<AppNav {datasetId} active={section} />
 
 		<main class="app-shell__main min-h-0 flex-1 overflow-y-auto">
 			{@render children()}
 			<footer
-				class="text-muted-foreground flex flex-col items-center justify-center gap-1 py-8 text-[10px]"
+				class="text-muted-foreground border-border flex flex-col items-center justify-center gap-1 border-t py-6 text-xs"
 			>
-				<div class="flex flex-wrap items-center justify-center gap-x-2 text-[14px]">
+				<div class="flex flex-wrap items-center justify-center gap-x-2">
 					<a
 						href="https://onrg.gitlab.io"
-						class="hover:underline"
+						class="hover:text-foreground"
 						target="_blank"
 						rel="noopener noreferrer"
 					>
 						ONRG
 					</a>
-					<span>&middot;</span>
+					<span aria-hidden="true">&middot;</span>
 					<a
 						href="https://github.com/flamboh/atlantis"
-						class="hover:underline"
+						class="hover:text-foreground"
 						target="_blank"
 						rel="noopener noreferrer"
 					>
diff --git a/apps/web/src/routes/datasets/[dataset]/+page.ts b/apps/web/src/routes/datasets/[dataset]/+page.ts
index 0b55a57..9bb6cb4 100644
--- a/apps/web/src/routes/datasets/[dataset]/+page.ts
+++ b/apps/web/src/routes/datasets/[dataset]/+page.ts
@@ -56,6 +56,7 @@ export const load: PageLoad = async ({ params, fetch }) => {
 	}
 
 	return {
+		datasets,
 		datasetId: selectedDataset.datasetId,
 		title: selectedDataset.label,
 		defaultStartDate: selectedDataset.defaultStartDate,

From ae941387ad76315775084699a8ba3cd2bf46f532 Mon Sep 17 00:00:00 2001
From: flamboh <oliver.boorstein@gmail.com>
Date: Fri, 9 Oct 2026 00:21:13 -0700
Subject: [PATCH 3/9] feat(web): console styling for datasets, files, file
 detail and alerts pages; remove rail controls

---
 apps/web/src/app.css                          |   2 +-
 .../components/charts/ChartCardHeader.svelte  |  49 ++--
 .../components/common/AnalysisLayout.svelte   | 102 --------
 .../common/CardLayoutControls.svelte          |  66 -----
 .../components/common/ControlPopover.svelte   |  42 ----
 .../src/lib/components/common/DragGrip.svelte |  13 -
 .../lib/components/common/FilterSheet.svelte  |  46 ----
 .../components/common/SegmentedControl.svelte |  95 --------
 .../components/datasets/DatasetTabs.svelte    |  17 --
 .../components/filters/DateRangeFilter.svelte |  46 ----
 .../components/filters/DirectionFilter.svelte |  31 ---
 .../filters/MaadIpVersionFilter.svelte        |  30 ---
 .../filters/MaadMeasureFilter.svelte          |  34 ---
 .../components/filters/MetricSelector.svelte  | 195 ---------------
 .../components/filters/PrimaryFilters.svelte  | 137 -----------
 .../components/filters/RouterFilter.svelte    |  43 ----
 .../src/lib/components/netflow/KpiRow.svelte  |   9 +-
 .../netflow/NetflowFileAnalysisPane.svelte    |  10 +-
 .../netflow/NetflowFileDetailPage.svelte      | 111 +++++----
 .../netflow/NetflowFileHeader.svelte          |  28 ---
 .../netflow/NetflowFileLoadingSkeleton.svelte |  28 +--
 .../netflow/NetflowFileMessageCard.svelte     |   4 +-
 .../NetflowFileRouterAnalysisSection.svelte   |   6 +-
 .../netflow/NetflowFileRouterCard.svelte      |  10 +-
 .../netflow/NetflowFileRouterSummary.svelte   | 189 +++++++++------
 .../lib/components/shell/PageHeader.svelte    |  16 ++
 apps/web/src/routes/+error.svelte             |   2 +-
 apps/web/src/routes/+layout.svelte            |   1 +
 apps/web/src/routes/+page.svelte              | 144 +++++------
 .../datasets/[dataset]/alerts/+page.svelte    | 229 +++++++++---------
 .../web/src/routes/netflow/files/+page.svelte | 137 +++++------
 31 files changed, 511 insertions(+), 1361 deletions(-)
 delete mode 100644 apps/web/src/lib/components/common/AnalysisLayout.svelte
 delete mode 100644 apps/web/src/lib/components/common/CardLayoutControls.svelte
 delete mode 100644 apps/web/src/lib/components/common/ControlPopover.svelte
 delete mode 100644 apps/web/src/lib/components/common/DragGrip.svelte
 delete mode 100644 apps/web/src/lib/components/common/FilterSheet.svelte
 delete mode 100644 apps/web/src/lib/components/common/SegmentedControl.svelte
 delete mode 100644 apps/web/src/lib/components/datasets/DatasetTabs.svelte
 delete mode 100644 apps/web/src/lib/components/filters/DateRangeFilter.svelte
 delete mode 100644 apps/web/src/lib/components/filters/DirectionFilter.svelte
 delete mode 100644 apps/web/src/lib/components/filters/MaadIpVersionFilter.svelte
 delete mode 100644 apps/web/src/lib/components/filters/MaadMeasureFilter.svelte
 delete mode 100644 apps/web/src/lib/components/filters/MetricSelector.svelte
 delete mode 100644 apps/web/src/lib/components/filters/PrimaryFilters.svelte
 delete mode 100644 apps/web/src/lib/components/filters/RouterFilter.svelte
 delete mode 100644 apps/web/src/lib/components/netflow/NetflowFileHeader.svelte
 create mode 100644 apps/web/src/lib/components/shell/PageHeader.svelte

diff --git a/apps/web/src/app.css b/apps/web/src/app.css
index 664d506..1afcf96 100644
--- a/apps/web/src/app.css
+++ b/apps/web/src/app.css
@@ -192,7 +192,7 @@ body {
 	font-variant-numeric: tabular-nums;
 	-webkit-font-smoothing: antialiased;
 }
-:focus-visible {
+:focus-visible:not([data-slot]) {
 	outline: 2px solid var(--ring);
 	outline-offset: 2px;
 }
diff --git a/apps/web/src/lib/components/charts/ChartCardHeader.svelte b/apps/web/src/lib/components/charts/ChartCardHeader.svelte
index 3373ad5..9758358 100644
--- a/apps/web/src/lib/components/charts/ChartCardHeader.svelte
+++ b/apps/web/src/lib/components/charts/ChartCardHeader.svelte
@@ -13,28 +13,31 @@
 	const frame = optionalCardFrame();
 </script>
 
-<div
-	class="chart-card-header border-border flex min-h-12 flex-wrap items-center gap-x-3 gap-y-2 border-b px-3 py-2"
->
-	<div
-		class={[
-			'flex min-w-0 flex-1 items-center gap-1 self-stretch',
-			frame && 'cursor-grab select-none active:cursor-grabbing'
-		]}
-		draggable={frame ? 'true' : undefined}
-		data-drag-handle={frame ? '' : undefined}
-	>
-		{#if frame}<GripVertical
-				class="text-muted-foreground/50 -ml-1 size-4 shrink-0"
-				aria-hidden="true"
-			/>{/if}
-		<h2 class="text-foreground truncate text-sm font-semibold tracking-tight">{title}</h2>
-		{#if subtitle}<span class="text-muted-foreground ml-1.5 truncate text-xs">{subtitle}</span>{/if}
-	</div>
-	{#if controls || frame}
-		<div class="ml-auto flex flex-wrap items-center justify-end gap-1.5">
-			{@render controls?.()}
-			{#if frame}<CardMenu {frame} />{/if}
+<div class="chart-card-header border-border @container border-b">
+	<div class="flex min-h-12 flex-wrap items-center gap-x-3 gap-y-2 px-3 py-2">
+		<div
+			class={[
+				'flex min-w-0 flex-1 items-center gap-1 self-stretch',
+				frame && 'cursor-grab select-none active:cursor-grabbing'
+			]}
+			draggable={frame ? 'true' : undefined}
+			data-drag-handle={frame ? '' : undefined}
+		>
+			{#if frame}<GripVertical
+					class="text-muted-foreground/50 -ml-1 size-4 shrink-0"
+					aria-hidden="true"
+				/>{/if}
+			<h2 class="text-foreground truncate text-sm font-semibold tracking-tight">{title}</h2>
+			{#if subtitle}<span class="text-muted-foreground ml-1.5 truncate text-xs">{subtitle}</span
+				>{/if}
 		</div>
-	{/if}
+		{#if controls}
+			<div
+				class="order-2 flex basis-full flex-wrap items-center gap-1.5 @2xl:order-none @2xl:ml-auto @2xl:basis-auto @2xl:justify-end"
+			>
+				{@render controls()}
+			</div>
+		{/if}
+		{#if frame}<div class="order-1 @2xl:order-none"><CardMenu {frame} /></div>{/if}
+	</div>
 </div>
diff --git a/apps/web/src/lib/components/common/AnalysisLayout.svelte b/apps/web/src/lib/components/common/AnalysisLayout.svelte
deleted file mode 100644
index b8a14ad..0000000
--- a/apps/web/src/lib/components/common/AnalysisLayout.svelte
+++ /dev/null
@@ -1,102 +0,0 @@
-<script lang="ts">
-	import { MediaQuery } from 'svelte/reactivity';
-	import { PanelLeftClose, PanelLeftOpen, SlidersHorizontal } from '@lucide/svelte';
-	import { Button } from '#lib/components/ui/button/index.ts';
-	import type { Snippet } from 'svelte';
-
-	let {
-		title,
-		eyebrow,
-		railLabel = 'Filters',
-		rail,
-		navigation,
-		toolbar,
-		children
-	}: {
-		title: string;
-		eyebrow: string;
-		railLabel?: string;
-		rail: Snippet;
-		navigation?: Snippet;
-		toolbar?: Snippet;
-		children: Snippet;
-	} = $props();
-	const id = $props.id();
-	const desktop = new MediaQuery('(min-width: 1024px)', true);
-	let collapsed = $state(false);
-	let sheetOpen = $state(false);
-	let sheetModule = $state<Promise<typeof import('./FilterSheet.svelte')> | null>(null);
-
-	function openSheet() {
-		sheetModule ??= import('./FilterSheet.svelte');
-		sheetOpen = true;
-	}
-</script>
-
-<svelte:window
-	onkeydown={(event) => {
-		if (sheetOpen && event.key === 'Escape' && !event.defaultPrevented) sheetOpen = false;
-	}}
-	onresize={() => {
-		if (desktop.current) sheetOpen = false;
-	}}
-/>
-
-<div class="console-page">
-	<div class="console-heading">
-		<div class="min-w-0">
-			<p class="page-eyebrow">{eyebrow}</p>
-			<h1 class="page-heading break-words">{title}</h1>
-		</div>
-		{@render navigation?.()}
-	</div>
-	<div class="console-body" class:rail-collapsed={collapsed}>
-		{#if desktop.current && !collapsed}
-			<aside class="console-rail" aria-label={railLabel}>
-				{@render rail()}
-			</aside>
-		{/if}
-		<div class="console-workarea min-w-0">
-			<div class="console-toolbar">
-				{#if desktop.current}
-					<Button
-						variant="outline"
-						size="icon"
-						class="rail-toggle"
-						aria-label={collapsed
-							? `Show ${railLabel.toLowerCase()}`
-							: `Hide ${railLabel.toLowerCase()}`}
-						aria-expanded={!collapsed}
-						onclick={() => (collapsed = !collapsed)}
-					>
-						{#if collapsed}<PanelLeftOpen size={17} />{:else}<PanelLeftClose size={17} />{/if}
-					</Button>
-				{:else}
-					<Button
-						variant="outline"
-						size="sm"
-						class="rail-toggle"
-						aria-label={`Open ${railLabel.toLowerCase()}`}
-						aria-haspopup="dialog"
-						data-filter-trigger={id}
-						aria-expanded={sheetOpen}
-						onclick={openSheet}><SlidersHorizontal size={15} />{railLabel}</Button
-					>
-				{/if}
-				{@render toolbar?.()}
-			</div>
-			<div class="console-results">{@render children()}</div>
-		</div>
-	</div>
-</div>
-
-{#if !desktop.current && sheetModule}
-	{#await sheetModule then { default: FilterSheet }}
-		<FilterSheet
-			bind:open={sheetOpen}
-			title={railLabel}
-			onClose={() => document.querySelector<HTMLElement>(`[data-filter-trigger="${id}"]`)?.focus()}
-			>{@render rail()}</FilterSheet
-		>
-	{/await}
-{/if}
diff --git a/apps/web/src/lib/components/common/CardLayoutControls.svelte b/apps/web/src/lib/components/common/CardLayoutControls.svelte
deleted file mode 100644
index 89a47a1..0000000
--- a/apps/web/src/lib/components/common/CardLayoutControls.svelte
+++ /dev/null
@@ -1,66 +0,0 @@
-<script lang="ts">
-	import { tick } from 'svelte';
-	import { ArrowUp, ArrowDown, Minus, Plus } from '@lucide/svelte';
-	import { Button } from '#lib/components/ui/button/index.ts';
-	let {
-		title,
-		first,
-		last,
-		onMove,
-		onResize,
-		resizable = true
-	}: {
-		title: string;
-		first: boolean;
-		last: boolean;
-		resizable?: boolean;
-		onMove: (offset: number) => void;
-		onResize: (offset: number) => void;
-	} = $props();
-
-	async function move(button: HTMLElement, offset: number) {
-		if (!(button instanceof HTMLButtonElement)) return;
-		const controls = button.parentElement;
-		onMove(offset);
-		await tick();
-		if (!button.isConnected) return;
-		if (button.disabled)
-			controls?.querySelector<HTMLButtonElement>('button:not(:disabled)')?.focus();
-		else button.focus();
-	}
-</script>
-
-<div class="card-actions" role="group" aria-label={`Arrange ${title}`}>
-	<Button
-		variant="ghost"
-		size="icon-sm"
-		disabled={first}
-		onclick={(event) => void move(event.currentTarget, -1)}
-		aria-label={`Move ${title} up`}
-		title="Move up"><ArrowUp size={15} /></Button
-	>
-	<Button
-		variant="ghost"
-		size="icon-sm"
-		disabled={last}
-		onclick={(event) => void move(event.currentTarget, 1)}
-		aria-label={`Move ${title} down`}
-		title="Move down"><ArrowDown size={15} /></Button
-	>
-	{#if resizable}
-		<Button
-			variant="ghost"
-			size="icon-sm"
-			onclick={() => onResize(-80)}
-			aria-label={`Make ${title} shorter`}
-			title="Shorter plot"><Minus size={15} /></Button
-		>
-		<Button
-			variant="ghost"
-			size="icon-sm"
-			onclick={() => onResize(80)}
-			aria-label={`Make ${title} taller`}
-			title="Taller plot"><Plus size={15} /></Button
-		>
-	{/if}
-</div>
diff --git a/apps/web/src/lib/components/common/ControlPopover.svelte b/apps/web/src/lib/components/common/ControlPopover.svelte
deleted file mode 100644
index 4fb9827..0000000
--- a/apps/web/src/lib/components/common/ControlPopover.svelte
+++ /dev/null
@@ -1,42 +0,0 @@
-<script lang="ts">
-	import { Popover } from 'bits-ui';
-	import { ChevronDown, X } from '@lucide/svelte';
-	import { Button } from '#lib/components/ui/button/index.ts';
-	import type { Snippet } from 'svelte';
-
-	let { label, summary, children }: { label: string; summary: string; children: Snippet } =
-		$props();
-</script>
-
-<Popover.Root>
-	<Popover.Trigger>
-		{#snippet child({ props })}
-			<Button {...props} variant="outline" size="sm" aria-label={label}
-				>{summary}<ChevronDown size={13} /></Button
-			>
-		{/snippet}
-	</Popover.Trigger>
-	<Popover.Content
-		side="bottom"
-		align="start"
-		sideOffset={6}
-		class="control-popover bg-popover text-popover-foreground z-40 w-[min(24rem,calc(100vw-2rem))] rounded-md border p-3 shadow-lg"
-		role="dialog"
-		aria-label={label}
-	>
-		<div class="mb-3 flex items-center justify-between gap-2">
-			<p class="text-sm font-semibold">{label}</p>
-			<Popover.Close>
-				{#snippet child({ props })}
-					<Button
-						{...props}
-						variant="ghost"
-						size="icon-xs"
-						aria-label={`Close ${label.toLowerCase()}`}><X size={14} /></Button
-					>
-				{/snippet}
-			</Popover.Close>
-		</div>
-		{@render children()}
-	</Popover.Content>
-</Popover.Root>
diff --git a/apps/web/src/lib/components/common/DragGrip.svelte b/apps/web/src/lib/components/common/DragGrip.svelte
deleted file mode 100644
index 08bbedf..0000000
--- a/apps/web/src/lib/components/common/DragGrip.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<span
-	class="pointer-events-none absolute inset-0 flex items-start justify-center pt-1 text-gray-400"
-	aria-hidden="true"
->
-	<span class="grid grid-cols-3 grid-rows-2 gap-[2px]">
-		<span class="h-[2px] w-[2px] rounded-full bg-current"></span>
-		<span class="h-[2px] w-[2px] rounded-full bg-current"></span>
-		<span class="h-[2px] w-[2px] rounded-full bg-current"></span>
-		<span class="h-[2px] w-[2px] rounded-full bg-current"></span>
-		<span class="h-[2px] w-[2px] rounded-full bg-current"></span>
-		<span class="h-[2px] w-[2px] rounded-full bg-current"></span>
-	</span>
-</span>
diff --git a/apps/web/src/lib/components/common/FilterSheet.svelte b/apps/web/src/lib/components/common/FilterSheet.svelte
deleted file mode 100644
index 4493fb2..0000000
--- a/apps/web/src/lib/components/common/FilterSheet.svelte
+++ /dev/null
@@ -1,46 +0,0 @@
-<script lang="ts">
-	import { Dialog } from 'bits-ui';
-	import { X } from '@lucide/svelte';
-	import { Button } from '#lib/components/ui/button/index.ts';
-	import type { Snippet } from 'svelte';
-
-	let {
-		open = $bindable(false),
-		title,
-		children,
-		onClose
-	}: { open?: boolean; title: string; children: Snippet; onClose?: () => void } = $props();
-</script>
-
-<Dialog.Root bind:open>
-	<Dialog.Portal>
-		<Dialog.Overlay class="fixed inset-0 z-50 bg-black/40" />
-		<Dialog.Content
-			onCloseAutoFocus={(event) => {
-				if (onClose) {
-					event.preventDefault();
-					onClose();
-				}
-			}}
-			class="filter-sheet bg-card text-card-foreground fixed inset-y-0 left-0 z-50 flex w-[min(22rem,calc(100vw-1rem))] flex-col border-r shadow-xl"
-		>
-			<div class="border-border flex shrink-0 items-center justify-between border-b px-4 py-3">
-				<Dialog.Title class="text-sm font-semibold">{title}</Dialog.Title>
-				<Dialog.Close>
-					{#snippet child({ props })}
-						<Button
-							{...props}
-							variant="ghost"
-							size="icon-sm"
-							aria-label={`Close ${title.toLowerCase()}`}><X size={18} /></Button
-						>
-					{/snippet}
-				</Dialog.Close>
-			</div>
-			<Dialog.Description class="sr-only"
-				>These options apply to the current view. Close this panel to return to the results.</Dialog.Description
-			>
-			<div class="min-h-0 flex-1 overflow-y-auto p-4">{@render children()}</div>
-		</Dialog.Content>
-	</Dialog.Portal>
-</Dialog.Root>
diff --git a/apps/web/src/lib/components/common/SegmentedControl.svelte b/apps/web/src/lib/components/common/SegmentedControl.svelte
deleted file mode 100644
index ff834ab..0000000
--- a/apps/web/src/lib/components/common/SegmentedControl.svelte
+++ /dev/null
@@ -1,95 +0,0 @@
-<script lang="ts" module>
-	export type SegmentedControlOption<T extends string> = {
-		value: T;
-		label: string;
-		disabled?: boolean;
-		disabledReason?: string;
-		title?: string;
-	};
-
-	export const segmentedControlGroupClass =
-		'grid w-full gap-0.5 rounded-md border border-border bg-muted/50 p-0.5 sm:w-fit';
-	export const segmentedControlItemClass =
-		'flex h-auto min-h-8 w-full items-center justify-center rounded px-2.5 py-1 text-center text-xs font-medium leading-tight transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none';
-	export const segmentedControlActiveClass =
-		'bg-accent text-accent-foreground ring-1 ring-inset ring-primary/25 hover:bg-accent hover:text-accent-foreground';
-	export const segmentedControlInactiveClass =
-		'text-muted-foreground hover:bg-background/60 hover:text-foreground';
-</script>
-
-<script lang="ts" generics="T extends string">
-	import { Button } from '#lib/components/ui/button/index.ts';
-	import * as Tooltip from '#lib/components/ui/tooltip/index.ts';
-	import { cn } from '#lib/utils.ts';
-
-	interface Props {
-		options: readonly SegmentedControlOption<T>[];
-		value: T | null;
-		onValueChange?: (value: T) => void;
-		class?: string;
-		style?: string;
-		buttonClass?: string;
-		ariaLabel?: string;
-	}
-
-	let {
-		options,
-		value,
-		onValueChange,
-		class: className,
-		style,
-		buttonClass,
-		ariaLabel
-	}: Props = $props();
-
-	function selectOption(option: SegmentedControlOption<T>) {
-		if (!option.disabled && !option.disabledReason && option.value !== value) {
-			onValueChange?.(option.value);
-		}
-	}
-
-	function optionClass(option: SegmentedControlOption<T>) {
-		return cn(
-			segmentedControlItemClass,
-			option.value === value ? segmentedControlActiveClass : segmentedControlInactiveClass,
-			(option.disabled || option.disabledReason) && 'cursor-not-allowed opacity-50',
-			buttonClass
-		);
-	}
-</script>
-
-<div class={cn(segmentedControlGroupClass, className)} {style} role="group" aria-label={ariaLabel}>
-	{#each options as option (option.value)}
-		{#if option.disabledReason}
-			<Tooltip.Root>
-				<Tooltip.Trigger>
-					{#snippet child({ props })}
-						<Button
-							{...props}
-							variant="ghost"
-							class={optionClass(option)}
-							onclick={() => selectOption(option)}
-							aria-pressed={option.value === value}
-							aria-disabled="true"
-							title={option.title}
-						>
-							{option.label}
-						</Button>
-					{/snippet}
-				</Tooltip.Trigger>
-				<Tooltip.Content sideOffset={4}>{option.disabledReason}</Tooltip.Content>
-			</Tooltip.Root>
-		{:else}
-			<Button
-				variant="ghost"
-				class={optionClass(option)}
-				onclick={() => selectOption(option)}
-				aria-pressed={option.value === value}
-				disabled={option.disabled}
-				title={option.title}
-			>
-				{option.label}
-			</Button>
-		{/if}
-	{/each}
-</div>
diff --git a/apps/web/src/lib/components/datasets/DatasetTabs.svelte b/apps/web/src/lib/components/datasets/DatasetTabs.svelte
deleted file mode 100644
index 15066d7..0000000
--- a/apps/web/src/lib/components/datasets/DatasetTabs.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<script lang="ts">
-	import { resolve } from '$app/paths';
-	let { datasetId, active }: { datasetId: string; active: 'dashboard' | 'alerts' } = $props();
-</script>
-
-<nav aria-label="Dataset views" class="dataset-tabs border-border flex gap-6 border-b">
-	<a
-		href={resolve('/datasets/[dataset]', { dataset: datasetId })}
-		class="text-muted-foreground hover:text-foreground aria-[current=page]:border-primary aria-[current=page]:text-accent-foreground border-b-2 border-transparent px-1 py-2.5 text-sm"
-		aria-current={active === 'dashboard' ? 'page' : undefined}>Dashboard</a
-	>
-	<a
-		href={resolve('/datasets/[dataset]/alerts', { dataset: datasetId })}
-		class="text-muted-foreground hover:text-foreground aria-[current=page]:border-primary aria-[current=page]:text-accent-foreground border-b-2 border-transparent px-1 py-2.5 text-sm"
-		aria-current={active === 'alerts' ? 'page' : undefined}>Alerts</a
-	>
-</nav>
diff --git a/apps/web/src/lib/components/filters/DateRangeFilter.svelte b/apps/web/src/lib/components/filters/DateRangeFilter.svelte
deleted file mode 100644
index 78a2e1b..0000000
--- a/apps/web/src/lib/components/filters/DateRangeFilter.svelte
+++ /dev/null
@@ -1,46 +0,0 @@
-<script lang="ts">
-	interface Props {
-		startDate: string;
-		endDate: string;
-		onStartDateChange?: (date: string) => void;
-		onEndDateChange?: (date: string) => void;
-	}
-
-	let { startDate, endDate, onStartDateChange, onEndDateChange }: Props = $props();
-
-	function handleStartDateChange(event: Event) {
-		const target = event.target as HTMLInputElement;
-		onStartDateChange?.(target.value);
-	}
-
-	function handleEndDateChange(event: Event) {
-		const target = event.target as HTMLInputElement;
-		onEndDateChange?.(target.value);
-	}
-</script>
-
-<div class="date-range-filter grid grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-end gap-2">
-	<div class="min-w-0 flex-1">
-		<label for="startDate" class="text-muted-foreground mb-1 block text-xs">Start Date</label>
-		<input
-			id="startDate"
-			type="date"
-			value={startDate}
-			onchange={handleStartDateChange}
-			class="border-input bg-background text-foreground focus-visible:ring-ring w-full min-w-0 rounded-md border px-2 py-1.5 text-sm focus-visible:ring-2 focus-visible:outline-none"
-		/>
-	</div>
-
-	<span class="text-muted-foreground pb-1.5 text-sm">to</span>
-
-	<div class="min-w-0 flex-1">
-		<label for="endDate" class="text-muted-foreground mb-1 block text-xs">End Date</label>
-		<input
-			id="endDate"
-			type="date"
-			value={endDate}
-			onchange={handleEndDateChange}
-			class="border-input bg-background text-foreground focus-visible:ring-ring w-full min-w-0 rounded-md border px-2 py-1.5 text-sm focus-visible:ring-2 focus-visible:outline-none"
-		/>
-	</div>
-</div>
diff --git a/apps/web/src/lib/components/filters/DirectionFilter.svelte b/apps/web/src/lib/components/filters/DirectionFilter.svelte
deleted file mode 100644
index 7c2832b..0000000
--- a/apps/web/src/lib/components/filters/DirectionFilter.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script lang="ts">
-	import SegmentedControl, {
-		type SegmentedControlOption
-	} from '#lib/components/common/SegmentedControl.svelte';
-	import { FLOW_DIRECTION_OPTIONS, type FlowDirection } from '#lib/types/types.ts';
-
-	const props = $props<{
-		direction: FlowDirection;
-		onDirectionChange?: (payload: { direction: FlowDirection }) => void;
-		buttonClass?: string;
-	}>();
-
-	const options: SegmentedControlOption<FlowDirection>[] = FLOW_DIRECTION_OPTIONS.map((option) => ({
-		value: option.value,
-		label: option.label,
-		title: option.description
-	}));
-
-	function handleValueChange(value: FlowDirection) {
-		props.onDirectionChange?.({ direction: value });
-	}
-</script>
-
-<SegmentedControl
-	{options}
-	value={props.direction}
-	onValueChange={handleValueChange}
-	ariaLabel="Traffic direction"
-	class="grid-cols-5"
-	buttonClass={props.buttonClass}
-/>
diff --git a/apps/web/src/lib/components/filters/MaadIpVersionFilter.svelte b/apps/web/src/lib/components/filters/MaadIpVersionFilter.svelte
deleted file mode 100644
index 7b4485a..0000000
--- a/apps/web/src/lib/components/filters/MaadIpVersionFilter.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<script lang="ts">
-	import SegmentedControl, {
-		type SegmentedControlOption
-	} from '#lib/components/common/SegmentedControl.svelte';
-	import { MAAD_IP_VERSION_OPTIONS, type MaadIpVersion } from '#lib/types/types.ts';
-
-	const props = $props<{
-		ipVersion: MaadIpVersion;
-		onIpVersionChange?: (payload: { ipVersion: MaadIpVersion }) => void;
-		buttonClass?: string;
-	}>();
-
-	const options: SegmentedControlOption<string>[] = MAAD_IP_VERSION_OPTIONS.map((option) => ({
-		value: String(option.value),
-		label: option.label
-	}));
-
-	function handleValueChange(value: string) {
-		props.onIpVersionChange?.({ ipVersion: Number(value) as MaadIpVersion });
-	}
-</script>
-
-<SegmentedControl
-	{options}
-	value={String(props.ipVersion)}
-	onValueChange={handleValueChange}
-	ariaLabel="MAAD address family"
-	class="grid-cols-2"
-	buttonClass={props.buttonClass}
-/>
diff --git a/apps/web/src/lib/components/filters/MaadMeasureFilter.svelte b/apps/web/src/lib/components/filters/MaadMeasureFilter.svelte
deleted file mode 100644
index 6e7e0b5..0000000
--- a/apps/web/src/lib/components/filters/MaadMeasureFilter.svelte
+++ /dev/null
@@ -1,34 +0,0 @@
-<script lang="ts">
-	import SegmentedControl, {
-		type SegmentedControlOption
-	} from '#lib/components/common/SegmentedControl.svelte';
-	import { MAAD_MEASURE_OPTIONS, type MaadMeasure } from '#lib/types/types.ts';
-
-	const props = $props<{
-		measure: MaadMeasure;
-		onMeasureChange?: (payload: { measure: MaadMeasure }) => void;
-		buttonClass?: string;
-	}>();
-
-	const options: SegmentedControlOption<MaadMeasure>[] = MAAD_MEASURE_OPTIONS.map((option) => ({
-		value: option.value,
-		label: option.label,
-		title:
-			option.value === 'addresses'
-				? 'Each distinct address counts once'
-				: `Weight each address by its ${option.value}; no spectrum`
-	}));
-
-	function handleValueChange(value: MaadMeasure) {
-		props.onMeasureChange?.({ measure: value });
-	}
-</script>
-
-<SegmentedControl
-	{options}
-	value={props.measure}
-	onValueChange={handleValueChange}
-	ariaLabel="MAAD measure"
-	class="grid-cols-3"
-	buttonClass={props.buttonClass}
-/>
diff --git a/apps/web/src/lib/components/filters/MetricSelector.svelte b/apps/web/src/lib/components/filters/MetricSelector.svelte
deleted file mode 100644
index f5e5b3f..0000000
--- a/apps/web/src/lib/components/filters/MetricSelector.svelte
+++ /dev/null
@@ -1,195 +0,0 @@
-<script lang="ts">
-	import ControlPopover from '#lib/components/common/ControlPopover.svelte';
-	import SegmentedControl from '#lib/components/common/SegmentedControl.svelte';
-	import { Checkbox } from '#lib/components/ui/checkbox/index.ts';
-	import type { ChartTypeOption, DataOption } from '#lib/components/netflow/types.ts';
-	import type { NetflowIpFamily } from '#lib/types/types.ts';
-
-	type QuickSelectOption = 'flows' | 'packets' | 'bytes' | 'all' | 'none';
-	type MetricFamily = 'flows' | 'packets' | 'bytes';
-	type ProtocolFamily = 'tcp' | 'udp' | 'icmp' | 'other';
-	type IpFamilyOption = { value: NetflowIpFamily; label: string; disabled?: boolean };
-
-	interface Props {
-		dataOptions: DataOption[];
-		onDataOptionsChange?: (dataOptions: DataOption[]) => void;
-		chartType?: ChartTypeOption;
-		onChartTypeChange?: (chartType: ChartTypeOption) => void;
-		ipFamilyOptions?: IpFamilyOption[];
-		selectedIpFamily?: NetflowIpFamily;
-		onIpFamilyChange?: (ipFamily: NetflowIpFamily) => void;
-	}
-
-	let {
-		dataOptions,
-		onDataOptionsChange,
-		chartType,
-		onChartTypeChange,
-		ipFamilyOptions = [],
-		selectedIpFamily = 'all',
-		onIpFamilyChange
-	}: Props = $props();
-	const QUICK_SELECT_OPTIONS: Array<{ value: QuickSelectOption; label: string }> = [
-		{ value: 'flows', label: 'Flows' },
-		{ value: 'packets', label: 'Packets' },
-		{ value: 'bytes', label: 'Bytes' },
-		{ value: 'all', label: 'Select All' },
-		{ value: 'none', label: 'Select None' }
-	];
-	const METRIC_ROWS: Array<{ value: MetricFamily; label: string }> = [
-		{ value: 'flows', label: 'Flows' },
-		{ value: 'packets', label: 'Packets' },
-		{ value: 'bytes', label: 'Bytes' }
-	];
-	const PROTOCOL_COLUMNS: Array<{ value: ProtocolFamily; label: string }> = [
-		{ value: 'tcp', label: 'TCP' },
-		{ value: 'udp', label: 'UDP' },
-		{ value: 'icmp', label: 'ICMP' },
-		{ value: 'other', label: 'Other' }
-	];
-	const CHART_TYPE_OPTIONS: Array<{ value: ChartTypeOption; label: string }> = [
-		{ value: 'stacked', label: 'Stacked Area' },
-		{ value: 'line', label: 'Line Chart' }
-	];
-	function getMetricFamily(label: string): MetricFamily | null {
-		const normalized = label.toLowerCase();
-		if (normalized.includes('flow')) return 'flows';
-		if (normalized.includes('packet')) return 'packets';
-		if (normalized.includes('byte')) return 'bytes';
-		return null;
-	}
-
-	function getProtocolFamily(label: string): ProtocolFamily | null {
-		const normalized = label.toLowerCase();
-		if (normalized.includes('tcp')) return 'tcp';
-		if (normalized.includes('udp')) return 'udp';
-		if (normalized.includes('icmp')) return 'icmp';
-		if (normalized.includes('other')) return 'other';
-		return null;
-	}
-
-	function matchesQuickSelect(option: DataOption, selection: QuickSelectOption): boolean {
-		if (selection === 'all') return true;
-		if (selection === 'none') return false;
-		return getMetricFamily(option.label) === selection;
-	}
-
-	function handleMetricToggle(optionIndex: number) {
-		const newDataOptions = dataOptions.map((option) =>
-			option.index === optionIndex ? { ...option, checked: !option.checked } : option
-		);
-		onDataOptionsChange?.(newDataOptions);
-	}
-
-	function handleQuickSelect(selection: QuickSelectOption) {
-		const newDataOptions = dataOptions.map((option) => {
-			return { ...option, checked: matchesQuickSelect(option, selection) };
-		});
-		onDataOptionsChange?.(newDataOptions);
-	}
-
-	const selectedQuickSelectIndex = $derived.by(() => {
-		for (const [index, option] of QUICK_SELECT_OPTIONS.entries()) {
-			const matches = dataOptions.every(
-				(metricOption) => metricOption.checked === matchesQuickSelect(metricOption, option.value)
-			);
-			if (matches) {
-				return index;
-			}
-		}
-
-		return null;
-	});
-
-	const metricMatrix = $derived.by(() => {
-		return METRIC_ROWS.map((metric) => ({
-			...metric,
-			options: PROTOCOL_COLUMNS.map((protocol) => ({
-				...protocol,
-				option: dataOptions.find(
-					(dataOption) =>
-						getMetricFamily(dataOption.label) === metric.value &&
-						getProtocolFamily(dataOption.label) === protocol.value
-				)
-			}))
-		}));
-	});
-</script>
-
-<div class="metric-selector">
-	<div class="metric-toolbar flex flex-wrap items-center gap-2">
-		<div class="metric-quickselect">
-			<SegmentedControl
-				options={QUICK_SELECT_OPTIONS}
-				value={selectedQuickSelectIndex === null
-					? null
-					: (QUICK_SELECT_OPTIONS[selectedQuickSelectIndex]?.value ?? null)}
-				onValueChange={handleQuickSelect}
-				class="grid-cols-5"
-				buttonClass="px-1 whitespace-normal"
-			/>
-		</div>
-		<ControlPopover
-			label="NetFlow metrics"
-			summary={`Metrics · ${dataOptions.filter((option) => option.checked).length}/12`}
-		>
-			<div
-				class="metric-matrix border-border bg-muted/20 max-w-xl rounded-md border"
-				role="group"
-				aria-label="NetFlow metrics"
-			>
-				<div class="grid grid-cols-[minmax(4rem,0.95fr)_repeat(4,minmax(0,1fr))]">
-					<div class="text-muted-foreground px-2 py-2 text-xs font-medium">Metric</div>
-					{#each PROTOCOL_COLUMNS as protocol (protocol.value)}
-						<div class="text-muted-foreground px-1 py-2 text-center text-xs font-medium">
-							{protocol.label}
-						</div>
-					{/each}
-				</div>
-				{#each metricMatrix as metric (metric.value)}
-					<div class="grid grid-cols-[minmax(4rem,0.95fr)_repeat(4,minmax(0,1fr))]">
-						<div class="text-foreground flex items-center px-2 py-2 text-sm font-medium">
-							{metric.label}
-						</div>
-						{#each metric.options as cell (cell.value)}
-							<label
-								class="flex min-h-9 cursor-pointer items-center justify-center"
-								aria-label={cell.option?.label ?? `${metric.label} ${cell.label}`}
-							>
-								{#if cell.option}
-									{@const option = cell.option}
-									<Checkbox
-										checked={option.checked}
-										onCheckedChange={() => handleMetricToggle(option.index)}
-									/>
-									<span class="sr-only">{option.label}</span>
-								{/if}
-							</label>
-						{/each}
-					</div>
-				{/each}
-			</div>
-		</ControlPopover>
-
-		{#if ipFamilyOptions.length > 0}
-			<SegmentedControl
-				options={ipFamilyOptions}
-				value={selectedIpFamily}
-				onValueChange={(value) => onIpFamilyChange?.(value)}
-				buttonClass="px-2"
-				style={`grid-template-columns: repeat(${ipFamilyOptions.length}, minmax(0, 1fr));`}
-			/>
-		{/if}
-
-		{#if chartType}
-			<SegmentedControl
-				options={CHART_TYPE_OPTIONS}
-				value={chartType}
-				onValueChange={(value) => onChartTypeChange?.(value)}
-				class="grid-cols-2"
-				buttonClass="px-2"
-				ariaLabel="Select NetFlow chart type"
-			/>
-		{/if}
-	</div>
-</div>
diff --git a/apps/web/src/lib/components/filters/PrimaryFilters.svelte b/apps/web/src/lib/components/filters/PrimaryFilters.svelte
deleted file mode 100644
index dc7d022..0000000
--- a/apps/web/src/lib/components/filters/PrimaryFilters.svelte
+++ /dev/null
@@ -1,137 +0,0 @@
-<script lang="ts">
-	import { isGranularityAllowedForDateRange } from '#lib/components/charts/chart-utils.ts';
-	import SegmentedControl from '#lib/components/common/SegmentedControl.svelte';
-	import DirectionFilter from '#lib/components/filters/DirectionFilter.svelte';
-	import MaadIpVersionFilter from '#lib/components/filters/MaadIpVersionFilter.svelte';
-	import MaadMeasureFilter from '#lib/components/filters/MaadMeasureFilter.svelte';
-	import RouterFilter from '#lib/components/filters/RouterFilter.svelte';
-	import type { GroupByOption, RouterConfig } from '#lib/components/netflow/types.ts';
-	import { Button } from '#lib/components/ui/button/index.ts';
-	import * as Tooltip from '#lib/components/ui/tooltip/index.ts';
-	import {
-		DEFAULT_MAAD_IP_VERSION,
-		type FlowDirection,
-		type MaadIpVersion,
-		type MaadMeasure
-	} from '#lib/types/types.ts';
-
-	interface GroupBySelectOption {
-		value: GroupByOption;
-		label: string;
-	}
-
-	const DEFAULT_GROUP_BY_OPTIONS: GroupBySelectOption[] = [
-		{ value: 'date', label: 'Day' },
-		{ value: 'hour', label: 'Hour' },
-		{ value: '30min', label: '30 min' },
-		{ value: '10min', label: '10 min' },
-		{ value: '5min', label: '5 min' }
-	];
-
-	const props = $props<{
-		startDate: string;
-		endDate: string;
-		groupBy: GroupByOption;
-		routers: RouterConfig;
-		direction: FlowDirection;
-		showDirection?: boolean;
-		measure?: MaadMeasure;
-		maadIpVersion?: MaadIpVersion;
-		groupByOptions?: GroupBySelectOption[];
-		onGroupByChange?: (payload: { groupBy: GroupByOption }) => void;
-		onRoutersChange?: (payload: { routers: RouterConfig }) => void;
-		onDirectionChange?: (payload: { direction: FlowDirection }) => void;
-		onMeasureChange?: (payload: { measure: MaadMeasure }) => void;
-		onMaadIpVersionChange?: (payload: { ipVersion: MaadIpVersion }) => void;
-	}>();
-
-	function handleRoutersChange(nextRouters: RouterConfig) {
-		props.onRoutersChange?.({ routers: nextRouters });
-	}
-
-	function handleDirectionChange(payload: { direction: FlowDirection }) {
-		props.onDirectionChange?.(payload);
-	}
-
-	const toolbarButtonClass = 'px-2 text-xs sm:px-3';
-	const navigationTip = 'Click chart to drill down. Drag across chart to drill into a date range.';
-	const groupByOptions = $derived(props.groupByOptions ?? DEFAULT_GROUP_BY_OPTIONS);
-
-	function getGranularityDisabledReason(option: GroupBySelectOption): string | null {
-		if (isGranularityAllowedForDateRange(option.value, props.startDate, props.endDate)) {
-			return null;
-		}
-
-		return 'Date range too large for this granularity.';
-	}
-
-	const segmentedGroupByOptions = $derived(
-		groupByOptions.map((option: GroupBySelectOption) => {
-			const disabledReason = getGranularityDisabledReason(option);
-			return {
-				...option,
-				disabled: disabledReason !== null,
-				disabledReason: disabledReason ?? undefined
-			};
-		})
-	);
-</script>
-
-<div class="primary-filters">
-	<div class="rail-section pt-0">
-		<div class="mb-3 flex items-center justify-between gap-2">
-			<h2 class="rail-heading">Controls</h2>
-			<Tooltip.Root
-				><Tooltip.Trigger
-					>{#snippet child({ props: triggerProps })}<Button
-							{...triggerProps}
-							variant="ghost"
-							size="icon-xs"
-							aria-label="Show navigation tip"
-							title={navigationTip}>?</Button
-						>{/snippet}</Tooltip.Trigger
-				><Tooltip.Content side="right" sideOffset={4} class="w-64 leading-5"
-					>{navigationTip}</Tooltip.Content
-				></Tooltip.Root
-			>
-		</div>
-		<RouterFilter routers={props.routers} onRouterChange={handleRoutersChange} />
-	</div>
-	<div class="rail-section">
-		<h2 class="rail-heading">Granularity</h2>
-		<SegmentedControl
-			options={segmentedGroupByOptions}
-			value={props.groupBy}
-			onValueChange={(value) => props.onGroupByChange?.({ groupBy: value })}
-			ariaLabel="Granularity"
-			class="rail-segments grid-cols-3"
-			buttonClass={toolbarButtonClass}
-		/>
-	</div>
-	{#if props.showDirection ?? true}<div class="rail-section">
-			<h2 class="rail-heading">Direction</h2>
-			<DirectionFilter
-				direction={props.direction}
-				onDirectionChange={handleDirectionChange}
-				buttonClass={toolbarButtonClass}
-			/>
-		</div>{/if}
-	{#if props.measure}<div class="rail-section" role="group" aria-label="MAAD options">
-			<h2 class="rail-heading">MAAD</h2>
-			<p class="text-muted-foreground mb-2 text-xs">Measure</p>
-			<MaadMeasureFilter
-				measure={props.measure}
-				onMeasureChange={props.onMeasureChange}
-				buttonClass={toolbarButtonClass}
-			/>
-			<p class="text-muted-foreground mt-3 mb-2 text-xs">Address family</p>
-			<MaadIpVersionFilter
-				ipVersion={props.maadIpVersion ?? DEFAULT_MAAD_IP_VERSION}
-				onIpVersionChange={props.onMaadIpVersionChange}
-				buttonClass={toolbarButtonClass}
-			/>
-		</div>{/if}
-	<p class="text-muted-foreground mt-4 text-xs leading-5">
-		Click a chart to drill down. Drag across a chart to select a date range.
-	</p>
-</div>
diff --git a/apps/web/src/lib/components/filters/RouterFilter.svelte b/apps/web/src/lib/components/filters/RouterFilter.svelte
deleted file mode 100644
index 78c1767..0000000
--- a/apps/web/src/lib/components/filters/RouterFilter.svelte
+++ /dev/null
@@ -1,43 +0,0 @@
-<script lang="ts">
-	import { Checkbox } from '#lib/components/ui/checkbox/index.ts';
-	import { Skeleton } from '#lib/components/ui/skeleton/index.ts';
-	import type { RouterConfig } from '#lib/components/netflow/types.ts';
-
-	interface Props {
-		routers: RouterConfig;
-		onRouterChange?: (routers: RouterConfig) => void;
-	}
-
-	let { routers, onRouterChange }: Props = $props();
-	const routerNames = $derived(Object.keys(routers));
-
-	function handleRouterToggle(routerName: string) {
-		const newRouters = {
-			...routers,
-			[routerName]: !routers[routerName]
-		};
-		onRouterChange?.(newRouters);
-	}
-</script>
-
-<div class="router-filter flex flex-wrap items-center gap-3">
-	<span class="text-foreground text-sm font-medium">Sources:</span>
-
-	<div class="flex min-h-0 flex-wrap items-center gap-3">
-		{#if routerNames.length === 0}
-			{#each Array(4) as _, index (index)}
-				<Skeleton class="inline-block h-4 w-24" aria-hidden="true" />
-			{/each}
-		{:else}
-			{#each routerNames as routerName (routerName)}
-				<label class="hover:bg-muted flex cursor-pointer items-center gap-2 rounded-md px-1 py-1">
-					<Checkbox
-						checked={routers[routerName]}
-						onCheckedChange={() => handleRouterToggle(routerName)}
-					/>
-					<span class="text-foreground text-sm">{routerName}</span>
-				</label>
-			{/each}
-		{/if}
-	</div>
-</div>
diff --git a/apps/web/src/lib/components/netflow/KpiRow.svelte b/apps/web/src/lib/components/netflow/KpiRow.svelte
index 63274e2..e4ee29b 100644
--- a/apps/web/src/lib/components/netflow/KpiRow.svelte
+++ b/apps/web/src/lib/components/netflow/KpiRow.svelte
@@ -60,9 +60,12 @@
 			value: `${totals.completeBuckets.toLocaleString()} / ${totals.buckets.toLocaleString()}`,
 			exact: totals.completeBuckets,
 			detail:
-				totals.partialBuckets || totals.unknownBuckets
-					? `${totals.partialBuckets.toLocaleString()} partial · ${totals.unknownBuckets.toLocaleString()} no coverage`
-					: 'Full source coverage'
+				[
+					totals.partialBuckets && `${totals.partialBuckets.toLocaleString()} partial`,
+					totals.unknownBuckets && `${totals.unknownBuckets.toLocaleString()} missing`
+				]
+					.filter(Boolean)
+					.join(' · ') || 'Full source coverage'
 		}
 	]);
 </script>
diff --git a/apps/web/src/lib/components/netflow/NetflowFileAnalysisPane.svelte b/apps/web/src/lib/components/netflow/NetflowFileAnalysisPane.svelte
index 7e8c57a..e7521c6 100644
--- a/apps/web/src/lib/components/netflow/NetflowFileAnalysisPane.svelte
+++ b/apps/web/src/lib/components/netflow/NetflowFileAnalysisPane.svelte
@@ -31,10 +31,12 @@
 	</div>
 {:else if slot.loading && slot.data === null}
 	<div class="flex items-center justify-center py-6">
-		<div class="text-muted-foreground">{loadingLabel}</div>
+		<div class="text-muted-foreground text-sm">{loadingLabel}</div>
 	</div>
 {:else if slot.error && slot.data === null}
-	<div class="border-destructive/20 bg-destructive/5 text-destructive rounded border p-4">
+	<div
+		class="border-destructive/30 bg-destructive/5 text-destructive rounded-md border p-4 text-sm"
+	>
 		<p>{errorLabel} {slot.error}</p>
 		<Button variant="destructive" size="sm" class="mt-2" onclick={slot.refresh}>Retry</Button>
 	</div>
@@ -48,7 +50,7 @@
 		{/if}
 		{#if slot.error}
 			<div
-				class="border-destructive/20 bg-destructive/5 text-destructive rounded border p-3 text-sm"
+				class="border-destructive/30 bg-destructive/5 text-destructive rounded-md border p-3 text-sm"
 			>
 				<p>{errorLabel} {slot.error}</p>
 				<Button variant="destructive" size="sm" class="mt-2" onclick={slot.refresh}>Retry</Button>
@@ -63,6 +65,6 @@
 {:else}
 	<div class="space-y-3">
 		<div class="text-muted-foreground text-sm">{emptyLabel}</div>
-		<Button size="sm" onclick={slot.refresh}>Reload</Button>
+		<Button size="sm" variant="outline" onclick={slot.refresh}>Reload</Button>
 	</div>
 {/if}
diff --git a/apps/web/src/lib/components/netflow/NetflowFileDetailPage.svelte b/apps/web/src/lib/components/netflow/NetflowFileDetailPage.svelte
index 2fdbf1d..193f108 100644
--- a/apps/web/src/lib/components/netflow/NetflowFileDetailPage.svelte
+++ b/apps/web/src/lib/components/netflow/NetflowFileDetailPage.svelte
@@ -1,18 +1,19 @@
 <script lang="ts">
 	import { afterNavigate, goto } from '$app/navigation';
 	import { getNetflowFileDetailLoader } from '#lib/components/netflow/file-detail-loader.svelte.ts';
-	import AnalysisLayout from '#lib/components/common/AnalysisLayout.svelte';
+	import { ArrowRight } from '@lucide/svelte';
+	import SegmentedToggle from '#lib/components/common/SegmentedToggle.svelte';
+	import PageHeader from '#lib/components/shell/PageHeader.svelte';
 	import { Button } from '#lib/components/ui/button/index.ts';
 	import { buildNetflowFileHref } from '#lib/utils/netflow-file-navigation.ts';
-	import NetflowFileHeader from '#lib/components/netflow/NetflowFileHeader.svelte';
 	import NetflowFileLoadingSkeleton from '#lib/components/netflow/NetflowFileLoadingSkeleton.svelte';
 	import NetflowFileMessageCard from '#lib/components/netflow/NetflowFileMessageCard.svelte';
 	import NetflowFileRouterCard from '#lib/components/netflow/NetflowFileRouterCard.svelte';
-	import MaadIpVersionFilter from '#lib/components/filters/MaadIpVersionFilter.svelte';
-	import MaadMeasureFilter from '#lib/components/filters/MaadMeasureFilter.svelte';
 	import { navigateToNetflowFile } from '#lib/utils/netflow-file-navigation.ts';
 	import {
 		MAAD_ADDRESS_SIDES,
+		MAAD_IP_VERSION_OPTIONS,
+		MAAD_MEASURE_OPTIONS,
 		maadInternalSideCopy,
 		maadMeasureHasSpectrum,
 		maadSideComputed,
@@ -59,6 +60,18 @@
 		) as Record<MaadAddressSide, string | null>
 	);
 
+	const familyOptions = MAAD_IP_VERSION_OPTIONS.map((option) => ({
+		value: String(option.value),
+		label: option.label
+	}));
+	const processedAt = $derived(
+		loader?.processedAt
+			? formatTimestampAsPST(Date.parse(loader.processedAt))
+			: loader?.loading
+				? 'Loading...'
+				: 'N/A'
+	);
+
 	const formatCount = (value: number | null | undefined) =>
 		typeof value === 'number' && Number.isFinite(value) ? value.toLocaleString() : 'N/A';
 
@@ -132,53 +145,49 @@
 
 <svelte:head><title>{data.fileInfo.filename} · ATLANTIS</title></svelte:head>
 
-<AnalysisLayout title={data.fileInfo.filename} eyebrow="NetFlow File:" railLabel="File options">
-	{#snippet toolbar()}<p class="text-muted-foreground text-xs">
-			{data.dataset} · {data.fileInfo.year}-{data.fileInfo.month}-{data.fileInfo.day} · {data
-				.fileInfo.hour}:{data.fileInfo.minute}
-		</p>
-		<p class="filter-summary"><span>MAAD IPv{data.ipVersion} · {maadMeasure}</span></p>
-		<Button
-			href={buildNetflowFileHref(
-				nextSlug,
-				data.dataset,
-				data.direction,
-				data.ipVersion,
-				data.measure
-			)}
-			size="sm"
-			variant="outline"
-			class="ml-auto">Next File</Button
-		>{/snippet}
-	{#snippet rail()}
-		<NetflowFileHeader
-			filename={data.fileInfo.filename}
-			year={data.fileInfo.year}
-			month={data.fileInfo.month}
-			day={data.fileInfo.day}
-			hour={data.fileInfo.hour}
-			minute={data.fileInfo.minute}
-			processedAt={loader?.processedAt
-				? formatTimestampAsPST(Date.parse(loader.processedAt))
-				: loader?.loading
-					? 'Loading...'
-					: 'N/A'}
-		/>
-
-		<div class="file-filters mt-5 space-y-4 border-t pt-4">
-			<div class="flex flex-col items-stretch gap-2">
-				<span class="text-foreground text-sm font-medium">MAAD address family:</span>
-				<MaadIpVersionFilter
-					ipVersion={data.ipVersion}
-					onIpVersionChange={handleMaadIpVersionChange}
-				/>
-			</div>
-			<div class="flex flex-col items-stretch gap-2">
-				<span class="text-foreground text-sm font-medium">MAAD measure:</span>
-				<MaadMeasureFilter measure={maadMeasure} onMeasureChange={handleMaadMeasureChange} />
-			</div>
+<div class="shell page flex flex-col gap-4">
+	<PageHeader title={data.fileInfo.filename}>
+		{#snippet description()}
+			<span class="tabular-nums">
+				{data.dataset} · {data.fileInfo.year}-{data.fileInfo.month}-{data.fileInfo.day}
+				{data.fileInfo.hour}:{data.fileInfo.minute} PST · Processed {processedAt}
+			</span>
+		{/snippet}
+		{#snippet actions()}
+			<Button
+				href={buildNetflowFileHref(
+					nextSlug,
+					data.dataset,
+					data.direction,
+					data.ipVersion,
+					data.measure
+				)}
+				size="sm"
+				variant="outline">Next File<ArrowRight /></Button
+			>
+		{/snippet}
+	</PageHeader>
+	<div class="flex flex-wrap items-center gap-x-4 gap-y-2" role="group" aria-label="MAAD options">
+		<div class="flex items-center gap-2">
+			<span class="text-muted-foreground text-xs">MAAD measure</span>
+			<SegmentedToggle
+				options={MAAD_MEASURE_OPTIONS}
+				value={maadMeasure}
+				onValueChange={(measure) => handleMaadMeasureChange({ measure })}
+				ariaLabel="MAAD measure"
+			/>
+		</div>
+		<div class="flex items-center gap-2">
+			<span class="text-muted-foreground text-xs">Address family</span>
+			<SegmentedToggle
+				options={familyOptions}
+				value={String(data.ipVersion)}
+				onValueChange={(value) =>
+					handleMaadIpVersionChange({ ipVersion: Number(value) as MaadIpVersion })}
+				ariaLabel="MAAD address family"
+			/>
 		</div>
-	{/snippet}
+	</div>
 
 	{#if loader?.error && !loader.hasRows}
 		<NetflowFileMessageCard
@@ -214,4 +223,4 @@
 			{/each}
 		</div>
 	{/if}
-</AnalysisLayout>
+</div>
diff --git a/apps/web/src/lib/components/netflow/NetflowFileHeader.svelte b/apps/web/src/lib/components/netflow/NetflowFileHeader.svelte
deleted file mode 100644
index f36df4b..0000000
--- a/apps/web/src/lib/components/netflow/NetflowFileHeader.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-<script lang="ts">
-	let {
-		filename,
-		year,
-		month,
-		day,
-		hour,
-		minute,
-		processedAt
-	}: {
-		filename: string;
-		year: string;
-		month: string;
-		day: string;
-		hour: string;
-		minute: string;
-		processedAt: string;
-	} = $props();
-</script>
-
-<div class="file-context">
-	<h2 class="rail-heading">File Information</h2>
-	<p class="text-muted-foreground text-xs">Filename</p>
-	<p class="font-mono text-xs break-all">{filename}</p>
-	<p>Date: {year}-{month}-{day}</p>
-	<p>Time: {hour}:{minute}</p>
-	<p class="text-xs">Processed in DB: {processedAt}</p>
-</div>
diff --git a/apps/web/src/lib/components/netflow/NetflowFileLoadingSkeleton.svelte b/apps/web/src/lib/components/netflow/NetflowFileLoadingSkeleton.svelte
index 566306b..d443080 100644
--- a/apps/web/src/lib/components/netflow/NetflowFileLoadingSkeleton.svelte
+++ b/apps/web/src/lib/components/netflow/NetflowFileLoadingSkeleton.svelte
@@ -9,29 +9,29 @@
 <div class="space-y-2">
 	{#each skeletons as skeletonId (`summary-skeleton-${skeletonId}`)}
 		<Card.Root size="sm" class="gap-0 py-0">
-			<Card.Header class="bg-primary py-4">
-				<Skeleton class="bg-primary-foreground/70 mb-2 h-7 w-56" />
-				<Skeleton class="bg-primary-foreground/60 mb-4 h-5 w-[34rem] max-w-full" />
+			<Card.Header class="py-4">
+				<Skeleton class="mb-2 h-7 w-56" />
+				<Skeleton class="mb-4 h-5 w-[34rem] max-w-full" />
 				<div class="grid grid-cols-1 gap-2 text-sm md:grid-cols-2">
 					<div>
-						<Skeleton class="bg-primary-foreground/60 mb-2 h-5 w-40" />
-						<Skeleton class="bg-primary-foreground/60 mb-1 h-4 w-20" />
-						<Skeleton class="bg-primary-foreground/60 h-4 w-20" />
+						<Skeleton class="mb-2 h-5 w-40" />
+						<Skeleton class="mb-1 h-4 w-20" />
+						<Skeleton class="h-4 w-20" />
 					</div>
 					<div>
-						<Skeleton class="bg-primary-foreground/60 mb-2 h-5 w-44" />
-						<Skeleton class="bg-primary-foreground/60 mb-1 h-4 w-20" />
-						<Skeleton class="bg-primary-foreground/60 h-4 w-20" />
+						<Skeleton class="mb-2 h-5 w-44" />
+						<Skeleton class="mb-1 h-4 w-20" />
+						<Skeleton class="h-4 w-20" />
 					</div>
 				</div>
 				<div class="mt-4 grid grid-cols-4 gap-4 text-sm">
 					{#each [0, 1, 2, 3] as columnIndex (`summary-column-${skeletonId}-${columnIndex}`)}
 						<div>
-							<Skeleton class="bg-primary-foreground/60 mb-2 h-5 w-28" />
-							<Skeleton class="bg-primary-foreground/60 mb-1 h-4 w-24" />
-							<Skeleton class="bg-primary-foreground/60 mb-1 h-4 w-20" />
-							<Skeleton class="bg-primary-foreground/60 mb-1 h-4 w-24" />
-							<Skeleton class="bg-primary-foreground/60 h-4 w-20" />
+							<Skeleton class="mb-2 h-5 w-28" />
+							<Skeleton class="mb-1 h-4 w-24" />
+							<Skeleton class="mb-1 h-4 w-20" />
+							<Skeleton class="mb-1 h-4 w-24" />
+							<Skeleton class="h-4 w-20" />
 						</div>
 					{/each}
 				</div>
diff --git a/apps/web/src/lib/components/netflow/NetflowFileMessageCard.svelte b/apps/web/src/lib/components/netflow/NetflowFileMessageCard.svelte
index 061065a..d1d1575 100644
--- a/apps/web/src/lib/components/netflow/NetflowFileMessageCard.svelte
+++ b/apps/web/src/lib/components/netflow/NetflowFileMessageCard.svelte
@@ -16,7 +16,7 @@
 
 	const classes = $derived(
 		tone === 'danger'
-			? 'bg-destructive/5 text-destructive ring-destructive/20'
+			? 'border-destructive/30 bg-destructive/5 text-destructive'
 			: 'text-muted-foreground'
 	);
 </script>
@@ -25,7 +25,7 @@
 	<Card.Content>
 		<p>{message}</p>
 		{#if action && actionLabel}
-			<Button type="button" variant="destructive" size="sm" class="mt-2" onclick={action}>
+			<Button type="button" variant="outline" size="sm" class="mt-3" onclick={action}>
 				{actionLabel}
 			</Button>
 		{/if}
diff --git a/apps/web/src/lib/components/netflow/NetflowFileRouterAnalysisSection.svelte b/apps/web/src/lib/components/netflow/NetflowFileRouterAnalysisSection.svelte
index 1512e60..52f1bd1 100644
--- a/apps/web/src/lib/components/netflow/NetflowFileRouterAnalysisSection.svelte
+++ b/apps/web/src/lib/components/netflow/NetflowFileRouterAnalysisSection.svelte
@@ -21,10 +21,10 @@
 </script>
 
 <div class="space-y-3">
-	<h6 class="text-md text-foreground font-medium">{title}</h6>
+	<h6 class="text-muted-foreground text-xs font-medium tracking-wide uppercase">{title}</h6>
 	<div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
 		<div class="min-w-0">
-			<h5 class="text-muted-foreground mb-2 text-sm font-medium">Source · {title}</h5>
+			<h5 class="text-foreground mb-2 text-sm font-medium">Source · {title}</h5>
 			<NetflowFileAnalysisPane
 				{kind}
 				sideLabel="source"
@@ -33,7 +33,7 @@
 			/>
 		</div>
 		<div class="min-w-0">
-			<h5 class="text-muted-foreground mb-2 text-sm font-medium">Destination · {title}</h5>
+			<h5 class="text-foreground mb-2 text-sm font-medium">Destination · {title}</h5>
 			<NetflowFileAnalysisPane
 				{kind}
 				sideLabel="destination"
diff --git a/apps/web/src/lib/components/netflow/NetflowFileRouterCard.svelte b/apps/web/src/lib/components/netflow/NetflowFileRouterCard.svelte
index 09c0458..893c072 100644
--- a/apps/web/src/lib/components/netflow/NetflowFileRouterCard.svelte
+++ b/apps/web/src/lib/components/netflow/NetflowFileRouterCard.svelte
@@ -20,11 +20,13 @@
 	} = $props();
 </script>
 
-<Card.Root size="sm" class="file-router-card gap-0 py-0">
-	<NetflowFileRouterSummary {row} {formatCount} {formatTimestampAsPST} />
+<Card.Root size="sm" class="grid gap-0 py-0 2xl:grid-cols-[minmax(28rem,0.8fr)_minmax(0,2fr)]">
+	<div class="min-w-0 border-b 2xl:border-r 2xl:border-b-0">
+		<NetflowFileRouterSummary {row} {formatCount} {formatTimestampAsPST} />
+	</div>
 
-	<Card.Content class="py-4">
-		<h4 class="text-md text-foreground mb-4 font-semibold">MAAD Analysis</h4>
+	<Card.Content class="min-w-0 p-4">
+		<h4 class="text-foreground mb-3 text-sm font-semibold">MAAD analysis</h4>
 		<div class="space-y-6">
 			<NetflowFileRouterAnalysisSection
 				title="Structure"
diff --git a/apps/web/src/lib/components/netflow/NetflowFileRouterSummary.svelte b/apps/web/src/lib/components/netflow/NetflowFileRouterSummary.svelte
index 782c9f5..382631e 100644
--- a/apps/web/src/lib/components/netflow/NetflowFileRouterSummary.svelte
+++ b/apps/web/src/lib/components/netflow/NetflowFileRouterSummary.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
 	import type { FileDetailResourceView, NetflowFileRouterRow } from './file-detail-loader.svelte';
 	import type { FileIpCounts } from '#lib/types/types.ts';
-	import * as Card from '#lib/components/ui/card/index.ts';
+	import { Badge } from '#lib/components/ui/badge/index.ts';
+	import * as Table from '#lib/components/ui/table/index.ts';
 
 	let {
 		row,
@@ -29,88 +30,130 @@
 
 		return formatTimestampAsPST(timestamp * 1000);
 	}
+
+	const summary = $derived(row.summary);
+	const metricRows = $derived([
+		{
+			label: 'Flows',
+			values: [
+				summary.flows,
+				summary.flows_tcp,
+				summary.flows_udp,
+				summary.flows_icmp,
+				summary.flows_other
+			]
+		},
+		{
+			label: 'Packets',
+			values: [
+				summary.packets,
+				summary.packets_tcp,
+				summary.packets_udp,
+				summary.packets_icmp,
+				summary.packets_other
+			]
+		},
+		{
+			label: 'Bytes',
+			values: [
+				summary.bytes,
+				summary.bytes_tcp,
+				summary.bytes_udp,
+				summary.bytes_icmp,
+				summary.bytes_other
+			]
+		}
+	]);
+	const details = $derived([
+		['Bucket', formatOptionalTimestamp(summary.bucket_start)],
+		['First', formatOptionalTimestamp(summary.first_timestamp)],
+		['Last', formatOptionalTimestamp(summary.last_timestamp)],
+		['First ms', formatCount(summary.msec_first)],
+		['Last ms', formatCount(summary.msec_last)],
+		['Seq failures', formatCount(summary.sequence_failures)]
+	]);
 </script>
 
-<Card.Header class="file-summary border-border bg-muted/30 border-b py-4 break-words">
-	<div class="mb-4 grid gap-3">
-		<div class="min-w-0">
-			<Card.Title class="text-lg font-semibold">
-				<h3>Source: {row.router}</h3>
-			</Card.Title>
-			<p class="text-muted-foreground mt-1 text-sm break-all">
-				{row.summary.file_path ?? 'No input locator recorded'}
-			</p>
-		</div>
-		<div class="grid grid-cols-2 gap-2 text-xs">
-			<div>
-				<p class="text-muted-foreground font-semibold uppercase">Kind</p>
-				<p>{row.summary.input_kind ?? 'unknown'}</p>
-			</div>
-			<div>
-				<p class="text-muted-foreground font-semibold uppercase">Status</p>
-				<p>{row.summary.input_status ?? 'unknown'}</p>
-			</div>
-			<div>
-				<p class="text-muted-foreground font-semibold uppercase">Bucket</p>
-				<p>{formatOptionalTimestamp(row.summary.bucket_start)}</p>
-			</div>
-			<div>
-				<p class="text-muted-foreground font-semibold uppercase">On Disk</p>
-				<p>{row.summary.file_exists_on_disk ? 'yes' : 'no'}</p>
-			</div>
+<div class="flex min-w-0 flex-col gap-4 p-4">
+	<div class="min-w-0">
+		<div class="flex flex-wrap items-center gap-2">
+			<h3 class="text-base font-semibold tracking-tight">Source: {row.router}</h3>
+			<Badge variant="outline" class="text-muted-foreground font-normal"
+				>Kind {summary.input_kind ?? 'unknown'}</Badge
+			>
+			<Badge
+				variant={summary.input_status === 'failed' ? 'destructive' : 'outline'}
+				class="font-normal">Status {summary.input_status ?? 'unknown'}</Badge
+			>
+			<Badge variant="outline" class="text-muted-foreground font-normal"
+				>{summary.file_exists_on_disk ? 'on disk' : 'not on disk'}</Badge
+			>
 		</div>
+		<p class="text-muted-foreground mt-1 font-mono text-xs break-all">
+			{summary.file_path ?? 'No input locator recorded'}
+		</p>
 	</div>
-	{#if row.summary.input_error_message}
+	{#if summary.input_error_message}
 		<p
-			class="border-destructive/20 bg-background text-destructive mb-4 rounded border px-3 py-2 text-sm"
+			class="border-destructive/30 bg-destructive/5 text-destructive rounded-md border px-3 py-2 text-sm"
 		>
-			{row.summary.input_error_message}
+			{summary.input_error_message}
 		</p>
 	{/if}
-	<div class="grid grid-cols-1 gap-2 text-sm md:grid-cols-2">
-		<div>
-			<h3 class="text-md font-semibold">Unique IP Count (Source)</h3>
-			<div>IPv4: {formatIpCount(row.source.ipCounts, 'ipv4')}</div>
-			<div>IPv6: {formatIpCount(row.source.ipCounts, 'ipv6')}</div>
-		</div>
-		<div>
-			<h3 class="text-md font-semibold">Unique IP Count (Destination)</h3>
-			<div>IPv4: {formatIpCount(row.destination.ipCounts, 'ipv4')}</div>
-			<div>IPv6: {formatIpCount(row.destination.ipCounts, 'ipv6')}</div>
-		</div>
+
+	<div class="overflow-x-auto rounded-md border">
+		<Table.Root class="text-xs">
+			<Table.Header class="bg-muted/50">
+				<Table.Row class="hover:bg-transparent">
+					<Table.Head class="h-8 px-2.5"><span class="sr-only">Metric</span></Table.Head>
+					{#each ['Total', 'TCP', 'UDP', 'ICMP', 'Other'] as column (column)}
+						<Table.Head class="text-muted-foreground h-8 px-2.5 text-right text-xs"
+							>{column}</Table.Head
+						>
+					{/each}
+				</Table.Row>
+			</Table.Header>
+			<Table.Body>
+				{#each metricRows as metric (metric.label)}
+					<Table.Row class="hover:bg-transparent">
+						<Table.Head scope="row" class="text-foreground h-8 px-2.5 font-medium"
+							>{metric.label}</Table.Head
+						>
+						{#each metric.values as value, index (index)}
+							<Table.Cell class="px-2.5 py-1.5 text-right tabular-nums"
+								>{value.toLocaleString()}</Table.Cell
+							>
+						{/each}
+					</Table.Row>
+				{/each}
+			</Table.Body>
+		</Table.Root>
 	</div>
-	<div class="file-metrics grid grid-cols-1 gap-4 text-sm sm:grid-cols-2">
-		<div>
-			<h4 class="font-medium">Flows</h4>
-			<p>Total: {row.summary.flows.toLocaleString()}</p>
-			<p>TCP: {row.summary.flows_tcp.toLocaleString()}</p>
-			<p>UDP: {row.summary.flows_udp.toLocaleString()}</p>
-			<p>ICMP: {row.summary.flows_icmp.toLocaleString()}</p>
-			<p>Other: {row.summary.flows_other.toLocaleString()}</p>
-		</div>
-		<div>
-			<h4 class="font-medium">Packets</h4>
-			<p>Total: {row.summary.packets.toLocaleString()}</p>
-			<p>TCP: {row.summary.packets_tcp.toLocaleString()}</p>
-			<p>UDP: {row.summary.packets_udp.toLocaleString()}</p>
-			<p>ICMP: {row.summary.packets_icmp.toLocaleString()}</p>
-			<p>Other: {row.summary.packets_other.toLocaleString()}</p>
-		</div>
+
+	<dl class="grid grid-cols-2 gap-x-4 gap-y-2 text-xs sm:grid-cols-4 2xl:grid-cols-2">
 		<div>
-			<h4 class="font-medium">Bytes</h4>
-			<p>Total: {row.summary.bytes.toLocaleString()}</p>
-			<p>TCP: {row.summary.bytes_tcp.toLocaleString()}</p>
-			<p>UDP: {row.summary.bytes_udp.toLocaleString()}</p>
-			<p>ICMP: {row.summary.bytes_icmp.toLocaleString()}</p>
-			<p>Other: {row.summary.bytes_other.toLocaleString()}</p>
+			<dt class="text-muted-foreground">Unique source IPs</dt>
+			<dd class="tabular-nums">
+				IPv4 {formatIpCount(row.source.ipCounts, 'ipv4')} · IPv6 {formatIpCount(
+					row.source.ipCounts,
+					'ipv6'
+				)}
+			</dd>
 		</div>
 		<div>
-			<h4 class="font-medium">Timestamps & Metrics</h4>
-			<p>First: {formatOptionalTimestamp(row.summary.first_timestamp)}</p>
-			<p>Last: {formatOptionalTimestamp(row.summary.last_timestamp)}</p>
-			<p>First ms: {formatCount(row.summary.msec_first)}</p>
-			<p>Last ms: {formatCount(row.summary.msec_last)}</p>
-			<p>Seq failures: {formatCount(row.summary.sequence_failures)}</p>
+			<dt class="text-muted-foreground">Unique destination IPs</dt>
+			<dd class="tabular-nums">
+				IPv4 {formatIpCount(row.destination.ipCounts, 'ipv4')} · IPv6 {formatIpCount(
+					row.destination.ipCounts,
+					'ipv6'
+				)}
+			</dd>
 		</div>
-	</div>
-</Card.Header>
+		{#each details as [label, value] (label)}
+			<div>
+				<dt class="text-muted-foreground">{label}</dt>
+				<dd class="tabular-nums">{value}</dd>
+			</div>
+		{/each}
+	</dl>
+</div>
diff --git a/apps/web/src/lib/components/shell/PageHeader.svelte b/apps/web/src/lib/components/shell/PageHeader.svelte
new file mode 100644
index 0000000..803c970
--- /dev/null
+++ b/apps/web/src/lib/components/shell/PageHeader.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let { title, description, actions }: { title: string; description?: Snippet; actions?: Snippet } =
+		$props();
+</script>
+
+<div class="flex flex-wrap items-end justify-between gap-x-4 gap-y-2">
+	<div class="min-w-0">
+		<h1 class="text-xl font-semibold tracking-tight break-words">{title}</h1>
+		{#if description}<div class="text-muted-foreground mt-1 text-sm">
+				{@render description()}
+			</div>{/if}
+	</div>
+	{#if actions}<div class="flex flex-wrap items-center gap-2">{@render actions()}</div>{/if}
+</div>
diff --git a/apps/web/src/routes/+error.svelte b/apps/web/src/routes/+error.svelte
index 004af76..f64d650 100644
--- a/apps/web/src/routes/+error.svelte
+++ b/apps/web/src/routes/+error.svelte
@@ -19,7 +19,7 @@
 	}
 </script>
 
-<div class="page-layout">
+<div class="shell page">
 	<div class="mx-auto max-w-2xl text-center">
 		<div class="mb-6">
 			<h1 class="text-foreground mb-2 text-4xl font-bold">{page.status}</h1>
diff --git a/apps/web/src/routes/+layout.svelte b/apps/web/src/routes/+layout.svelte
index 0f7ac67..94d5b80 100644
--- a/apps/web/src/routes/+layout.svelte
+++ b/apps/web/src/routes/+layout.svelte
@@ -33,6 +33,7 @@
 
 	onMount(() => {
 		theme.syncFromDom();
+		if (!datasets) requestDatasets();
 	});
 </script>
 
diff --git a/apps/web/src/routes/+page.svelte b/apps/web/src/routes/+page.svelte
index 6b5809a..1560ca6 100644
--- a/apps/web/src/routes/+page.svelte
+++ b/apps/web/src/routes/+page.svelte
@@ -1,17 +1,14 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
 	import { resolve } from '$app/paths';
-	import { Button } from '#lib/components/ui/button/index.ts';
-	import AnalysisLayout from '#lib/components/common/AnalysisLayout.svelte';
-	import { ArrowUpRight } from '@lucide/svelte';
-	import { Card, CardContent, CardHeader, CardTitle } from '#lib/components/ui/card/index.ts';
+	import { ArrowRight, Database } from '@lucide/svelte';
+	import PageHeader from '#lib/components/shell/PageHeader.svelte';
+	import { Badge } from '#lib/components/ui/badge/index.ts';
+	import * as Card from '#lib/components/ui/card/index.ts';
+	import * as Empty from '#lib/components/ui/empty/index.ts';
+	import * as Table from '#lib/components/ui/table/index.ts';
 	import type { PageProps } from './$types';
 
 	let { data }: PageProps = $props();
-
-	function openDataset(datasetId: string) {
-		goto(resolve('/datasets/[dataset]', { dataset: datasetId }));
-	}
 </script>
 
 <svelte:head>
@@ -19,68 +16,73 @@
 	<meta name="description" content="Select an ATLANTIS dataset dashboard" />
 </svelte:head>
 
-<AnalysisLayout
-	title="Datasets"
-	eyebrow="ATLANTIS / Network analysis"
-	railLabel="Dataset directory"
->
-	{#snippet toolbar()}<p class="text-muted-foreground text-sm">
-			{data.datasets.length}
-			{data.datasets.length === 1 ? 'dataset' : 'datasets'} available
-		</p>{/snippet}
-	{#snippet rail()}<h2 class="rail-heading">Network analysis</h2>
-		<p class="text-muted-foreground text-sm leading-6">
-			Select a dataset to explore its traffic and analysis.
-		</p>
-		<div class="rail-section">
-			<h2 class="rail-heading">Dashboard</h2>
-			<p class="text-muted-foreground text-xs leading-5">
-				Traffic, flow characteristics, address counts, MAAD and source coverage.
-			</p>
-		</div>
-		<div class="rail-section">
-			<h2 class="rail-heading">Files</h2>
-			<p class="text-muted-foreground text-xs leading-5">
-				Open a five-minute capture by its filename timestamp.
-			</p>
-		</div>{/snippet}
+<div class="shell page flex flex-col gap-4">
+	<PageHeader title="Datasets">
+		{#snippet description()}
+			Choose a dataset to explore its traffic, flow characteristics, address counts, MAAD and
+			coverage.
+		{/snippet}
+	</PageHeader>
 
 	{#if data.datasets.length === 0}
-		<Card class="gap-0 rounded-lg border py-6 shadow-sm ring-0">
-			<CardHeader class="px-6">
-				<CardTitle><h1 class="text-xl font-semibold">No datasets found</h1></CardTitle>
-			</CardHeader>
-			<CardContent class="px-6">
-				<p class="text-muted-foreground text-sm">
-					The dashboard reads SQLite databases at
-					<code class="font-mono">data/&lt;dataset-id&gt;/netflow.sqlite</code>. Build one from your
-					NetFlow data with the pipeline, then reload this page.
-				</p>
-				<p class="text-muted-foreground text-sm">
-					See <code class="font-mono">docs/user/README.md</code> in the repository for the setup procedure.
-				</p>
-			</CardContent>
-		</Card>
-	{:else}<div class="catalog">
-			<div class="catalog-row catalog-header" aria-hidden="true">
-				<span>Dataset</span><span>Discovery</span><span>Open</span>
-			</div>
-			{#each data.datasets as dataset (dataset.datasetId)}
-				<Button
-					variant="ghost"
-					class="catalog-row h-auto w-full rounded-none text-left whitespace-normal"
-					onclick={() => openDataset(dataset.datasetId)}
-				>
-					<span class="min-w-0"
-						><span class="block font-semibold break-words">{dataset.label}</span><span
-							class="text-muted-foreground mt-1 block font-mono text-xs break-all"
-							>{dataset.datasetId}</span
-						></span
-					>
-					<span class="catalog-mode text-muted-foreground text-xs">{dataset.discoveryMode}</span
-					><ArrowUpRight size={16} aria-hidden="true" />
-				</Button>
-			{/each}
-		</div>
+		<Card.Root class="py-0">
+			<Empty.Root class="py-12">
+				<Empty.Header>
+					<Empty.Media variant="icon"><Database /></Empty.Media>
+					<Empty.Title><h2>No datasets found</h2></Empty.Title>
+					<Empty.Description>
+						The dashboard reads SQLite databases at
+						<code class="font-mono">data/&lt;dataset-id&gt;/netflow.sqlite</code>. Build one from
+						your NetFlow data with the pipeline, then reload this page. See
+						<code class="font-mono">docs/user/README.md</code> for the setup procedure.
+					</Empty.Description>
+				</Empty.Header>
+			</Empty.Root>
+		</Card.Root>
+	{:else}
+		<Card.Root class="overflow-hidden py-0">
+			<Table.Root>
+				<Table.Header class="bg-muted/50">
+					<Table.Row class="hover:bg-transparent">
+						<Table.Head class="text-muted-foreground h-9 px-4 text-xs">Dataset</Table.Head>
+						<Table.Head class="text-muted-foreground hidden h-9 px-4 text-xs sm:table-cell"
+							>Data from</Table.Head
+						>
+						<Table.Head class="text-muted-foreground h-9 px-4 text-xs">Discovery</Table.Head>
+						<Table.Head class="h-9 w-10 px-4"><span class="sr-only">Open</span></Table.Head>
+					</Table.Row>
+				</Table.Header>
+				<Table.Body>
+					{#each data.datasets as dataset (dataset.datasetId)}
+						<Table.Row class="group relative">
+							<Table.Cell class="px-4 py-3">
+								<a
+									href={resolve('/datasets/[dataset]', { dataset: dataset.datasetId })}
+									class="font-medium after:absolute after:inset-0 after:content-['']"
+									>{dataset.label}</a
+								>
+								<span class="text-muted-foreground block font-mono text-xs break-all"
+									>{dataset.datasetId}</span
+								>
+							</Table.Cell>
+							<Table.Cell class="text-muted-foreground hidden px-4 py-3 tabular-nums sm:table-cell"
+								>{dataset.defaultStartDate}</Table.Cell
+							>
+							<Table.Cell class="px-4 py-3">
+								<Badge variant="outline" class="text-muted-foreground font-normal"
+									>{dataset.discoveryMode}</Badge
+								>
+								{#if dataset.isDefault}<Badge
+										class="bg-selection text-selection-foreground ml-1 font-normal">default</Badge
+									>{/if}
+							</Table.Cell>
+							<Table.Cell class="text-muted-foreground group-hover:text-foreground px-4 py-3">
+								<ArrowRight class="size-4" aria-hidden="true" />
+							</Table.Cell>
+						</Table.Row>
+					{/each}
+				</Table.Body>
+			</Table.Root>
+		</Card.Root>
 	{/if}
-</AnalysisLayout>
+</div>
diff --git a/apps/web/src/routes/datasets/[dataset]/alerts/+page.svelte b/apps/web/src/routes/datasets/[dataset]/alerts/+page.svelte
index e1f2b06..049737b 100644
--- a/apps/web/src/routes/datasets/[dataset]/alerts/+page.svelte
+++ b/apps/web/src/routes/datasets/[dataset]/alerts/+page.svelte
@@ -2,11 +2,13 @@
 	import { afterNavigate } from '$app/navigation';
 	import { untrack } from 'svelte';
 	import type { PageProps } from './$types';
-	import SegmentedControl from '#lib/components/common/SegmentedControl.svelte';
-	import AnalysisLayout from '#lib/components/common/AnalysisLayout.svelte';
-	import DatasetTabs from '#lib/components/datasets/DatasetTabs.svelte';
+	import { BellOff, Copy, Check } from '@lucide/svelte';
+	import SegmentedToggle from '#lib/components/common/SegmentedToggle.svelte';
+	import PageHeader from '#lib/components/shell/PageHeader.svelte';
+	import { Badge } from '#lib/components/ui/badge/index.ts';
 	import { Button } from '#lib/components/ui/button/index.ts';
-	import { Card, CardContent, CardHeader, CardTitle } from '#lib/components/ui/card/index.ts';
+	import * as Card from '#lib/components/ui/card/index.ts';
+	import * as Empty from '#lib/components/ui/empty/index.ts';
 	import {
 		Table,
 		TableBody,
@@ -76,6 +78,13 @@
 	const canShowMore = $derived(
 		feedResponse.addresses.length < feedResponse.totalAddresses && limit < MAX_LIMIT
 	);
+	const feedState = $derived.by(() => {
+		if (!feedResponse.feed.present) return 'off';
+		const windowEnd = feedResponse.feed.latestWindowEnd;
+		if (windowEnd === null) return 'idle';
+		const windowAge = now - windowEnd * 1000;
+		return windowAge >= 0 && windowAge < LIVE_WINDOW_AGE_MS ? 'live' : 'idle';
+	});
 	const statusText = $derived.by(() => {
 		if (!feedResponse.feed.present) {
 			return 'Feed not running';
@@ -317,113 +326,108 @@
 	/>
 </svelte:head>
 
-<AnalysisLayout title="Singularity alerts" eyebrow={selectedDatasetLabel} railLabel="Alert filters">
-	{#snippet navigation()}<DatasetTabs datasetId={data.selectedDataset} active="alerts" />{/snippet}
-	{#snippet toolbar()}<p class="text-muted-foreground text-sm" aria-live="polite">
-			{statusText}
-		</p>{/snippet}
-	{#snippet rail()}
-		<h2 class="rail-heading">Alert feed</h2>
-		<p class="text-muted-foreground mb-4 text-xs leading-5">
-			Find addresses in sparse regions or dense clusters of address space.
-		</p>
-
-		{#if feedResponse.feed.present}
-			<div class="flex flex-col gap-4">
-				<div class="flex flex-col gap-4">
-					<div class="flex flex-col gap-1">
-						<span class="text-muted-foreground text-xs font-medium">Alpha</span>
-						<SegmentedControl
-							options={TAIL_OPTIONS}
-							value={selectedTail}
-							onValueChange={selectTail}
-							class="grid-cols-2"
-							ariaLabel="Filter alerts by alpha tail"
-						/>
-					</div>
-
-					<div class="flex flex-col gap-1">
-						<span class="text-muted-foreground text-xs font-medium">Horizon</span>
-						<SegmentedControl
-							options={HORIZON_OPTIONS}
-							value={selectedHorizon}
-							onValueChange={selectHorizon}
-							class="grid-cols-4"
-							ariaLabel="Select alert horizon"
-						/>
-					</div>
-
-					<div class="flex flex-col gap-1">
-						<span class="text-muted-foreground text-xs font-medium">Sort</span>
-						<SegmentedControl
-							options={SORT_OPTIONS}
-							value={selectedSort}
-							onValueChange={selectSort}
-							class="grid-cols-2"
-							ariaLabel="Sort alert addresses"
-						/>
-					</div>
-
-					{#if feedResponse.feed.present && feedResponse.feed.thresholds}
-						<div class="flex flex-col gap-1">
-							<span class="text-muted-foreground text-xs font-medium">Thresholds</span>
-							<p
-								class="text-muted-foreground flex min-h-7 items-center pb-1 text-sm tabular-nums"
-								title="The feed records an address when its alpha crosses either calibrated bound"
-							>
-								α ≥ {feedResponse.feed.thresholds.high} · α ≤ {feedResponse.feed.thresholds.low}
-							</p>
-						</div>
-					{/if}
-				</div>
-			</div>
-		{/if}
-	{/snippet}
+<div class="shell page flex flex-col gap-4">
+	<PageHeader title="Singularity alerts">
+		{#snippet description()}
+			<span class="flex flex-wrap items-center gap-2">
+				<span>{selectedDatasetLabel}</span>
+				<Badge
+					variant="outline"
+					class={feedState === 'live'
+						? 'bg-selection text-selection-foreground border-transparent'
+						: 'text-muted-foreground'}
+					>{feedState === 'live' ? 'Live' : feedState === 'idle' ? 'Idle' : 'Not running'}</Badge
+				>
+				<span aria-live="polite">{statusText}</span>
+			</span>
+		{/snippet}
+	</PageHeader>
+
+	{#if feedResponse.feed.present}
+		<div class="flex flex-wrap items-center gap-2" role="group" aria-label="Alert filters">
+			<SegmentedToggle
+				options={TAIL_OPTIONS}
+				value={selectedTail}
+				onValueChange={selectTail}
+				ariaLabel="Filter alerts by alpha tail"
+			/>
+			<SegmentedToggle
+				options={HORIZON_OPTIONS}
+				value={selectedHorizon}
+				onValueChange={selectHorizon}
+				ariaLabel="Select alert horizon"
+			/>
+			<SegmentedToggle
+				options={SORT_OPTIONS}
+				value={selectedSort}
+				onValueChange={selectSort}
+				ariaLabel="Sort alert addresses"
+			/>
+			{#if feedResponse.feed.thresholds}
+				<p
+					class="text-muted-foreground ml-auto text-xs tabular-nums"
+					title="The feed records an address when its alpha crosses either calibrated bound"
+				>
+					Thresholds α ≥ {feedResponse.feed.thresholds.high} · α ≤ {feedResponse.feed.thresholds
+						.low}
+				</p>
+			{/if}
+		</div>
+	{/if}
 
 	{#if fetchError}
-		<Card
-			class="border-destructive bg-destructive/10 text-destructive gap-0 py-4 ring-0"
+		<div
+			class="border-destructive/40 bg-destructive/10 text-destructive rounded-lg border px-4 py-2.5 text-sm"
 			role="alert"
 		>
-			<CardContent>{fetchError}</CardContent>
-		</Card>
+			{fetchError}
+		</div>
 	{/if}
 
 	{#if !feedResponse.feed.present}
-		<Card class="text-muted-foreground gap-3 rounded-lg border py-4 shadow-sm ring-0">
-			<CardHeader class="px-4">
-				<CardTitle class="text-foreground font-medium">The alert feed is not running</CardTitle>
-				<p class="text-sm">Start it for this dataset with:</p>
-			</CardHeader>
-			<CardContent class="px-4">
-				<div
-					class="bg-muted flex flex-col gap-2 rounded-md p-3 sm:flex-row sm:items-center sm:justify-between"
-				>
-					<code class="text-foreground overflow-x-auto font-mono text-sm">{feedCommand}</code>
-					<Button onclick={copyCommand} size="sm" class="h-7 shrink-0 px-3">
-						{copied ? 'Copied' : 'Copy'}
-					</Button>
-				</div>
-				{#if copyError}
-					<p class="text-destructive mt-2 text-sm" role="alert">{copyError}</p>
-				{/if}
-			</CardContent>
-		</Card>
+		<Card.Root class="py-0">
+			<Empty.Root class="py-12">
+				<Empty.Header>
+					<Empty.Media variant="icon"><BellOff /></Empty.Media>
+					<Empty.Title>The alert feed is not running</Empty.Title>
+					<Empty.Description>Start it for this dataset with:</Empty.Description>
+				</Empty.Header>
+				<Empty.Content class="max-w-md">
+					<div
+						class="bg-muted flex w-full items-center justify-between gap-2 rounded-md py-1.5 pr-1.5 pl-3"
+					>
+						<code class="text-foreground overflow-x-auto font-mono text-sm">{feedCommand}</code>
+						<Button onclick={copyCommand} size="sm" variant="outline" class="h-7 shrink-0">
+							{#if copied}<Check />{:else}<Copy />{/if}
+							{copied ? 'Copied' : 'Copy'}
+						</Button>
+					</div>
+					{#if copyError}
+						<p class="text-destructive text-sm" role="alert">{copyError}</p>
+					{/if}
+				</Empty.Content>
+			</Empty.Root>
+		</Card.Root>
 	{:else}
 		{#if feedResponse.addresses.length === 0}
-			<Card class="text-muted-foreground gap-0 rounded-lg border py-3 text-sm shadow-sm ring-0">
-				<CardContent class="px-4">
-					No anomalous addresses in the last {selectedHorizon}.
-				</CardContent>
-			</Card>
+			<Card.Root class="py-0">
+				<Empty.Root class="py-10">
+					<Empty.Header>
+						<Empty.Title class="text-base"
+							>No anomalous addresses in the last {selectedHorizon}.</Empty.Title
+						>
+						<Empty.Description>Try a longer horizon or the other alpha tail.</Empty.Description>
+					</Empty.Header>
+				</Empty.Root>
+			</Card.Root>
 		{:else}
 			<section
-				class={`border-border bg-card text-card-foreground overflow-x-auto rounded-lg border shadow-sm transition-opacity ${loading ? 'opacity-60' : ''}`}
+				class={`bg-card text-card-foreground overflow-x-auto rounded-lg border shadow-(--shadow-card) transition-opacity ${loading ? 'opacity-60' : ''}`}
 				aria-label="Anomalous addresses"
 				aria-busy={loading}
 			>
 				<Table class="w-full text-sm">
-					<TableHeader>
+					<TableHeader class="bg-muted/50">
 						<TableRow class="text-muted-foreground text-xs font-medium hover:bg-transparent">
 							<TableHead class="h-auto w-full px-4 py-2 text-left font-medium">Address</TableHead>
 							<TableHead
@@ -453,24 +457,22 @@
 					</TableHeader>
 					<TableBody>
 						{#each feedResponse.addresses as alert (alert.address)}
-							<TableRow class="hover:bg-transparent">
-								<TableCell class="px-4 py-3">
+							<TableRow>
+								<TableCell class="px-4 py-2.5">
 									<div class="flex min-w-0 items-center gap-2">
 										<span class="text-foreground truncate font-mono">
 											{alert.address}
 										</span>
 										{#if isNewAddress(alert.firstSeen)}
-											<span
+											<Badge
 												title={`First flagged ${formatRelativeTime(alert.firstSeen)} — never seen in the retained history before that`}
-												class="bg-accent text-accent-foreground shrink-0 rounded-full px-2 py-0.5 text-xs font-medium"
+												class="bg-selection text-selection-foreground">new</Badge
 											>
-												new
-											</span>
 										{/if}
 									</div>
 								</TableCell>
 								<TableCell
-									class={`px-4 py-3 text-right tabular-nums ${
+									class={`px-4 py-2.5 text-right tabular-nums ${
 										selectedSort === 'extreme'
 											? 'text-foreground font-medium'
 											: 'text-muted-foreground/70'
@@ -479,7 +481,7 @@
 									{alert.peakAlpha.toFixed(3)}
 								</TableCell>
 								<TableCell
-									class={`px-4 py-3 text-right tabular-nums ${
+									class={`px-4 py-2.5 text-right tabular-nums ${
 										selectedSort === 'recent'
 											? 'text-foreground font-medium'
 											: 'text-muted-foreground/70'
@@ -489,23 +491,23 @@
 								</TableCell>
 								<TableCell
 									title={dateTimeFormatter.format(new Date(alert.firstSeen * 1000))}
-									class="text-muted-foreground px-4 py-3 text-right whitespace-nowrap tabular-nums"
+									class="text-muted-foreground px-4 py-2.5 text-right whitespace-nowrap tabular-nums"
 								>
 									{formatRelativeTime(alert.firstSeen)}
 								</TableCell>
 								<TableCell
 									title={dateTimeFormatter.format(new Date(alert.lastSeen * 1000))}
-									class="text-muted-foreground px-4 py-3 text-right whitespace-nowrap tabular-nums"
+									class="text-muted-foreground px-4 py-2.5 text-right whitespace-nowrap tabular-nums"
 								>
 									{formatRelativeTime(alert.lastSeen)}
 								</TableCell>
 								<TableCell
 									title={`flagged in ${countFormatter.format(alert.timesFlagged)} windows in this horizon`}
-									class="text-foreground px-4 py-3 text-right tabular-nums"
+									class="text-foreground px-4 py-2.5 text-right tabular-nums"
 								>
 									{countFormatter.format(alert.timesFlagged)}×
 								</TableCell>
-								<TableCell class="text-muted-foreground px-4 py-3 text-right tabular-nums">
+								<TableCell class="text-muted-foreground px-4 py-2.5 text-right tabular-nums">
 									{alert.peakR2.toFixed(2)}
 								</TableCell>
 							</TableRow>
@@ -515,14 +517,9 @@
 			</section>
 		{/if}
 
-		<div class="flex flex-col items-center gap-2 pt-1">
+		<div class="flex flex-col items-center gap-2">
 			{#if canShowMore}
-				<Button
-					variant="outline"
-					onclick={showMore}
-					disabled={loadingMore}
-					class="px-4 disabled:cursor-not-allowed disabled:opacity-60"
-				>
+				<Button variant="outline" size="sm" onclick={showMore} disabled={loadingMore}>
 					{loadingMore ? 'Loading…' : 'Show more'}
 				</Button>
 			{/if}
@@ -533,4 +530,4 @@
 			</p>
 		</div>
 	{/if}
-</AnalysisLayout>
+</div>
diff --git a/apps/web/src/routes/netflow/files/+page.svelte b/apps/web/src/routes/netflow/files/+page.svelte
index dea79e9..efa5193 100644
--- a/apps/web/src/routes/netflow/files/+page.svelte
+++ b/apps/web/src/routes/netflow/files/+page.svelte
@@ -1,17 +1,26 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import AnalysisLayout from '#lib/components/common/AnalysisLayout.svelte';
+	import { resolve } from '$app/paths';
+	import PageHeader from '#lib/components/shell/PageHeader.svelte';
 	import { Button } from '#lib/components/ui/button/index.ts';
-	import { Card, CardContent, CardHeader, CardTitle } from '#lib/components/ui/card/index.ts';
+	import * as Card from '#lib/components/ui/card/index.ts';
+	import { Input } from '#lib/components/ui/input/index.ts';
+	import { Label } from '#lib/components/ui/label/index.ts';
+	import * as NativeSelect from '#lib/components/ui/native-select/index.ts';
 	import { navigateToNetflowFile } from '#lib/utils/netflow-file-navigation.ts';
 	import type { PageProps } from './$types';
 
 	let { data }: PageProps = $props();
 	let timestamp = $state('');
-	let selectedDatasetOverride = $state<string | null>(null);
-	const selectedDataset = $derived(selectedDatasetOverride ?? data.selectedDataset);
 	let error = $state('');
 
+	function selectDataset(datasetId: string) {
+		void goto(`${resolve('/netflow/files')}?dataset=${encodeURIComponent(datasetId)}`, {
+			replaceState: true,
+			reset: false
+		});
+	}
+
 	function navigateToFile() {
 		error = '';
 
@@ -25,88 +34,76 @@
 			return;
 		}
 
-		if (!selectedDataset) {
+		if (!data.selectedDataset) {
 			error = 'Please choose a dataset';
 			return;
 		}
 
-		void navigateToNetflowFile(goto, timestamp, selectedDataset);
-	}
-
-	function handleKeydown(event: KeyboardEvent) {
-		if (event.key === 'Enter') {
-			navigateToFile();
-		}
+		void navigateToNetflowFile(goto, timestamp, data.selectedDataset);
 	}
 </script>
 
-<AnalysisLayout title="NetFlow Files" eyebrow="Capture lookup" railLabel="Lookup guide">
-	{#snippet toolbar()}<p class="text-muted-foreground text-sm">
-			Open a five-minute capture
-		</p>{/snippet}
-	{#snippet rail()}<h2 class="rail-heading">File lookup</h2>
-		<ol class="text-muted-foreground space-y-4 text-sm leading-6">
-			<li>1. Choose a dataset.</li>
-			<li>2. Enter the timestamp from the capture filename.</li>
-			<li>3. Inspect source summaries and MAAD analysis.</li>
-		</ol>
-		<p class="text-muted-foreground mt-6 text-xs leading-5">
-			The timestamp has twelve digits, in YYYYMMDDHHmm order.
-		</p>{/snippet}
+<svelte:head><title>NetFlow Files · ATLANTIS</title></svelte:head>
 
-	<Card class="border-border bg-card mb-6 gap-3 rounded-none border py-4 ring-0">
-		<CardHeader class="px-4">
-			<CardTitle><h2 class="text-lg font-semibold">Navigate to File by Timestamp</h2></CardTitle>
-		</CardHeader>
-		<CardContent class="px-4">
-			<div class="grid max-w-3xl gap-4 sm:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
-				<div>
-					<label for="dataset" class="text-foreground mb-1 block text-sm font-medium">Dataset</label
-					>
-					<select
+<div class="shell page flex flex-col gap-4">
+	<PageHeader title="NetFlow Files">
+		{#snippet description()}
+			Open a five-minute capture to inspect its source summaries and MAAD analysis.
+		{/snippet}
+	</PageHeader>
+
+	<Card.Root class="max-w-3xl gap-4">
+		<Card.Header>
+			<Card.Title><h2>Open a capture by timestamp</h2></Card.Title>
+			<Card.Description>
+				Use the 12-digit timestamp from the capture filename, e.g.
+				<code class="font-mono">nfcapd.202601011200</code>.
+			</Card.Description>
+		</Card.Header>
+		<Card.Content>
+			<form
+				class="grid gap-4 sm:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto] sm:items-start"
+				onsubmit={(event) => {
+					event.preventDefault();
+					navigateToFile();
+				}}
+				novalidate
+			>
+				<div class="grid gap-1.5">
+					<Label for="dataset">Dataset</Label>
+					<NativeSelect.Root
 						id="dataset"
-						value={selectedDataset}
-						onchange={(event) => {
-							selectedDatasetOverride = event.currentTarget.value;
-						}}
-						class="border-input bg-background text-foreground focus-visible:ring-ring w-full rounded border px-3 py-2 focus-visible:ring-2 focus-visible:outline-none"
+						class="w-full"
+						value={data.selectedDataset}
+						onchange={(event) => selectDataset(event.currentTarget.value)}
 					>
-						{#if !selectedDataset}
-							<option value="">Select a dataset</option>
+						{#if !data.selectedDataset}
+							<NativeSelect.Option value="">Select a dataset</NativeSelect.Option>
 						{/if}
 						{#each data.datasets as dataset (dataset.datasetId)}
-							<option value={dataset.datasetId}>{dataset.label}</option>
+							<NativeSelect.Option value={dataset.datasetId}>{dataset.label}</NativeSelect.Option>
 						{/each}
-					</select>
+					</NativeSelect.Root>
 				</div>
-				<div class="min-w-0">
-					<label for="timestamp" class="text-foreground mb-1 block text-sm font-medium">
-						File Timestamp (YYYYMMDDHHmm)
-					</label>
-					<input
+				<div class="grid min-w-0 gap-1.5">
+					<Label for="timestamp">File Timestamp (YYYYMMDDHHmm)</Label>
+					<Input
 						id="timestamp"
-						type="text"
 						bind:value={timestamp}
-						onkeydown={handleKeydown}
 						placeholder="202601011200"
-						class="border-input bg-background text-foreground placeholder:text-muted-foreground focus-visible:ring-ring w-full rounded border px-3 py-2 focus-visible:ring-2 focus-visible:outline-none"
-						maxlength="12"
+						inputmode="numeric"
+						autocomplete="off"
+						class="font-mono"
+						maxlength={12}
+						aria-invalid={error ? true : undefined}
+						aria-describedby="timestamp-error"
 					/>
-					<div
-						class={`mt-1 min-h-6 text-sm ${error ? 'text-destructive' : 'text-transparent'}`}
-						aria-live="polite"
-					>
-						{error || ' '}
-					</div>
-				</div>
-				<div class="flex items-start sm:col-span-2">
-					<Button onclick={navigateToFile} class="w-full px-4 sm:w-auto">Go to File</Button>
+					<p id="timestamp-error" class="text-destructive min-h-5 text-xs" aria-live="polite">
+						{error}
+					</p>
 				</div>
-			</div>
-			<p class="text-muted-foreground mt-2 text-sm">
-				Choose a dataset, then enter the exact 12-digit timestamp from NetFlow filenames (e.g.,
-				`nfcapd.202601011200`).
-			</p>
-		</CardContent>
-	</Card>
-</AnalysisLayout>
+				<Button type="submit" class="sm:mt-[1.375rem]">Go to File</Button>
+			</form>
+		</Card.Content>
+	</Card.Root>
+</div>

From 6eaeb68c73c0bc70b240fec5159a15a8bba5aa50 Mon Sep 17 00:00:00 2001
From: flamboh <oliver.boorstein@gmail.com>
Date: Fri, 9 Oct 2026 00:41:02 -0700
Subject: [PATCH 4/9] test(web): cover console toolbar, KPI totals, card menu
 and shell navigation

---
 apps/web/src/app.css                          |   9 +
 .../filters/DashboardToolbar.svelte           |   2 +-
 .../netflow/DatasetDashboardPage.svelte       |  14 +-
 .../src/lib/components/netflow/KpiRow.svelte  |   3 +-
 .../netflow/netflow-stats-data.svelte.ts      |  36 --
 .../netflow/netflow-window-totals.ts          |  37 ++
 apps/web/tests/e2e/alerts-baseline.spec.ts    |  22 +-
 apps/web/tests/e2e/brand.spec.ts              |   2 +-
 apps/web/tests/e2e/chart-helpers.ts           |  13 +-
 apps/web/tests/e2e/chart-migration.spec.ts    |  13 +-
 apps/web/tests/e2e/console-ui.spec.ts         | 470 ++++++++++++++++
 apps/web/tests/e2e/dashboard-baseline.spec.ts | 125 +++--
 apps/web/tests/e2e/dashboard-contract.spec.ts |  16 +-
 .../tests/e2e/dashboard-lazy-charts.spec.ts   |  24 +-
 .../tests/e2e/dashboard-maad-measure.spec.ts  |  54 +-
 apps/web/tests/e2e/home.spec.ts               |   5 +-
 apps/web/tests/e2e/maad-contract.spec.ts      |  18 +-
 apps/web/tests/e2e/maad-internal-side.spec.ts |  26 +-
 apps/web/tests/e2e/maad-ip-version.spec.ts    |  28 +-
 .../web/tests/e2e/navigation-baseline.spec.ts |  15 +-
 apps/web/tests/e2e/redesign.spec.ts           | 521 ------------------
 apps/web/tests/e2e/spectrum-chart.spec.ts     |  61 +-
 apps/web/tests/e2e/toolbar-helpers.ts         | 133 +++++
 apps/web/tests/lib/console-ui.test.ts         | 107 ++++
 apps/web/tests/routes/datasets-page.test.ts   |  10 +
 25 files changed, 987 insertions(+), 777 deletions(-)
 create mode 100644 apps/web/src/lib/components/netflow/netflow-window-totals.ts
 create mode 100644 apps/web/tests/e2e/console-ui.spec.ts
 delete mode 100644 apps/web/tests/e2e/redesign.spec.ts
 create mode 100644 apps/web/tests/e2e/toolbar-helpers.ts
 create mode 100644 apps/web/tests/lib/console-ui.test.ts

diff --git a/apps/web/src/app.css b/apps/web/src/app.css
index 1afcf96..bc267fa 100644
--- a/apps/web/src/app.css
+++ b/apps/web/src/app.css
@@ -249,3 +249,12 @@ table {
 		transition-duration: 0.01ms !important;
 	}
 }
+@media (pointer: coarse) {
+	.toolbar-trigger,
+	[data-card-menu-trigger] {
+		min-height: 2.75rem;
+	}
+	[data-card-menu-trigger] {
+		min-width: 2.75rem;
+	}
+}
diff --git a/apps/web/src/lib/components/filters/DashboardToolbar.svelte b/apps/web/src/lib/components/filters/DashboardToolbar.svelte
index 91a2cde..e41b90b 100644
--- a/apps/web/src/lib/components/filters/DashboardToolbar.svelte
+++ b/apps/web/src/lib/components/filters/DashboardToolbar.svelte
@@ -100,7 +100,7 @@
 	<Button
 		variant="ghost"
 		size="sm"
-		class="text-muted-foreground ml-auto"
+		class="toolbar-trigger text-muted-foreground ml-auto"
 		aria-label="Reset filters"
 		onclick={onReset}><RotateCcw class="size-3.5" />Reset</Button
 	>
diff --git a/apps/web/src/lib/components/netflow/DatasetDashboardPage.svelte b/apps/web/src/lib/components/netflow/DatasetDashboardPage.svelte
index 0d4ec8e..4f5f2ca 100644
--- a/apps/web/src/lib/components/netflow/DatasetDashboardPage.svelte
+++ b/apps/web/src/lib/components/netflow/DatasetDashboardPage.svelte
@@ -97,13 +97,13 @@
 		'coverage'
 	];
 	const CHART_CARD_DETAILS: Record<ChartCardId, { title: string; minimumHeight: number }> = {
-		dashboard: { title: 'Traffic Overview', minimumHeight: 640 },
-		characteristics: { title: 'Flow Characteristics', minimumHeight: 440 },
-		ports: { title: 'Unique Ports', minimumHeight: 440 },
-		ip: { title: 'IP Address Breakdown', minimumHeight: 440 },
-		protocol: { title: 'Protocol Breakdown', minimumHeight: 440 },
-		dimensions: { title: 'MAAD Dimensions', minimumHeight: 440 },
-		spectrum: { title: 'IP Address Spectrum', minimumHeight: 560 },
+		dashboard: { title: 'Traffic Overview', minimumHeight: 571 },
+		characteristics: { title: 'Flow Characteristics', minimumHeight: 691 },
+		ports: { title: 'Unique Ports', minimumHeight: 371 },
+		ip: { title: 'Unique IP Counts', minimumHeight: 371 },
+		protocol: { title: 'Unique Protocol Counts', minimumHeight: 371 },
+		dimensions: { title: 'MAAD Dimensions', minimumHeight: 371 },
+		spectrum: { title: 'Spectrum', minimumHeight: 451 },
 		coverage: { title: 'Coverage', minimumHeight: 113 }
 	};
 	const UNAVAILABLE_CARD_MINIMUM_HEIGHT = 214;
diff --git a/apps/web/src/lib/components/netflow/KpiRow.svelte b/apps/web/src/lib/components/netflow/KpiRow.svelte
index e4ee29b..6f644f2 100644
--- a/apps/web/src/lib/components/netflow/KpiRow.svelte
+++ b/apps/web/src/lib/components/netflow/KpiRow.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
 	import * as Card from '#lib/components/ui/card/index.ts';
 	import { Skeleton } from '#lib/components/ui/skeleton/index.ts';
-	import { sumNetflowWindow, type NetflowStatsData } from './netflow-stats-data.svelte.ts';
+	import type { NetflowStatsData } from './netflow-stats-data.svelte.ts';
+	import { sumNetflowWindow } from './netflow-window-totals.ts';
 
 	let { stats }: { stats: NetflowStatsData } = $props();
 
diff --git a/apps/web/src/lib/components/netflow/netflow-stats-data.svelte.ts b/apps/web/src/lib/components/netflow/netflow-stats-data.svelte.ts
index eb1cf68..9c5d588 100644
--- a/apps/web/src/lib/components/netflow/netflow-stats-data.svelte.ts
+++ b/apps/web/src/lib/components/netflow/netflow-stats-data.svelte.ts
@@ -32,17 +32,6 @@ export type NetflowStatsData = {
 	readonly error: string | null;
 };
 
-export type NetflowWindowTotals = {
-	flows: number;
-	flowsTcp: number;
-	packets: number;
-	bytes: number;
-	buckets: number;
-	completeBuckets: number;
-	partialBuckets: number;
-	unknownBuckets: number;
-};
-
 type StatsRequest =
 	| { kind: 'waiting' }
 	| { kind: 'invalid'; error: string }
@@ -196,28 +185,3 @@ export function createNetflowStatsData(getFilters: () => NetflowStatsFilters): N
 		}
 	};
 }
-
-/** Sum the additive totals of every observed bucket; buckets without data contribute nothing. */
-export function sumNetflowWindow(results: readonly TimeBucket<NetflowStatsResult>[]) {
-	const totals: NetflowWindowTotals = {
-		flows: 0,
-		flowsTcp: 0,
-		packets: 0,
-		bytes: 0,
-		buckets: results.length,
-		completeBuckets: 0,
-		partialBuckets: 0,
-		unknownBuckets: 0
-	};
-	for (const bucket of results) {
-		if (bucket.coverage.state === 'complete') totals.completeBuckets += 1;
-		else if (bucket.coverage.state === 'partial') totals.partialBuckets += 1;
-		else totals.unknownBuckets += 1;
-		if (!bucket.data) continue;
-		totals.flows += bucket.data.flows;
-		totals.flowsTcp += bucket.data.flowsTcp;
-		totals.packets += bucket.data.packets;
-		totals.bytes += bucket.data.bytes;
-	}
-	return totals;
-}
diff --git a/apps/web/src/lib/components/netflow/netflow-window-totals.ts b/apps/web/src/lib/components/netflow/netflow-window-totals.ts
new file mode 100644
index 0000000..1b7403b
--- /dev/null
+++ b/apps/web/src/lib/components/netflow/netflow-window-totals.ts
@@ -0,0 +1,37 @@
+import type { NetflowStatsResult, TimeBucket } from '#lib/types/types.ts';
+
+export type NetflowWindowTotals = {
+	flows: number;
+	flowsTcp: number;
+	packets: number;
+	bytes: number;
+	buckets: number;
+	completeBuckets: number;
+	partialBuckets: number;
+	unknownBuckets: number;
+};
+
+/** Sum the additive totals of every observed bucket; buckets without data contribute nothing. */
+export function sumNetflowWindow(results: readonly TimeBucket<NetflowStatsResult>[]) {
+	const totals: NetflowWindowTotals = {
+		flows: 0,
+		flowsTcp: 0,
+		packets: 0,
+		bytes: 0,
+		buckets: results.length,
+		completeBuckets: 0,
+		partialBuckets: 0,
+		unknownBuckets: 0
+	};
+	for (const bucket of results) {
+		if (bucket.coverage.state === 'complete') totals.completeBuckets += 1;
+		else if (bucket.coverage.state === 'partial') totals.partialBuckets += 1;
+		else totals.unknownBuckets += 1;
+		if (!bucket.data) continue;
+		totals.flows += bucket.data.flows;
+		totals.flowsTcp += bucket.data.flowsTcp;
+		totals.packets += bucket.data.packets;
+		totals.bytes += bucket.data.bytes;
+	}
+	return totals;
+}
diff --git a/apps/web/tests/e2e/alerts-baseline.spec.ts b/apps/web/tests/e2e/alerts-baseline.spec.ts
index f62f5e9..f185de3 100644
--- a/apps/web/tests/e2e/alerts-baseline.spec.ts
+++ b/apps/web/tests/e2e/alerts-baseline.spec.ts
@@ -2,7 +2,7 @@ import { expect, test } from '@playwright/test';
 
 test('alerts tail, horizon, sort and pagination change the rendered table', async ({ page }) => {
 	await page.goto('/');
-	await page.getByRole('button', { name: /Playwright Fixture/ }).click();
+	await page.getByRole('link', { name: 'Playwright Fixture', exact: true }).click();
 	await page.getByRole('link', { name: 'Alerts', exact: true }).click();
 	await expect(page.getByText(/Live · last window/)).toBeVisible();
 	const table = page.getByRole('region', { name: 'Anomalous addresses' });
@@ -14,31 +14,31 @@ test('alerts tail, horizon, sort and pagination change the rendered table', asyn
 	await expect(table.getByRole('row')).toHaveCount(106);
 	await expect(page.getByText('showing 105 of 105')).toBeVisible();
 	await expect(page.getByRole('button', { name: 'Show more' })).not.toBeAttached();
-	await page.getByRole('button', { name: 'Recent', exact: true }).click();
+	await page.getByRole('radio', { name: 'Recent', exact: true }).click();
 	await expect(table.getByRole('row')).toHaveCount(101);
 	await expect(table.getByRole('row').nth(1)).toContainText('198.51.100.104');
 	for (const horizon of ['1h', '6h', '24h', '7d']) {
-		await page.getByRole('button', { name: horizon, exact: true }).click();
-		await expect(page.getByRole('button', { name: horizon, exact: true })).toHaveAttribute(
-			'aria-pressed',
+		await page.getByRole('radio', { name: horizon, exact: true }).click();
+		await expect(page.getByRole('radio', { name: horizon, exact: true })).toHaveAttribute(
+			'aria-checked',
 			'true'
 		);
 		await expect(
 			page.getByText(horizon === '1h' ? 'showing 100 of 104' : 'showing 100 of 105')
 		).toBeVisible();
 	}
-	await page.getByRole('button', { name: 'Low α', exact: true }).click();
+	await page.getByRole('radio', { name: 'Low α', exact: true }).click();
 	await expect(table.getByRole('row')).toHaveCount(2);
 	await expect(table.getByRole('row').nth(1)).toContainText('203.0.113.7');
-	await page.getByRole('button', { name: '1h', exact: true }).click();
+	await page.getByRole('radio', { name: '1h', exact: true }).click();
 	await expect(page.getByText('No anomalous addresses in the last 1h.')).toBeVisible();
-	await page.getByRole('button', { name: 'High α', exact: true }).click();
+	await page.getByRole('radio', { name: 'High α', exact: true }).click();
 	await expect(table.getByRole('row')).toHaveCount(101);
 });
 
 test('alerts show loading and retain the last table on a failed refresh', async ({ page }) => {
 	await page.goto('/');
-	await page.getByRole('button', { name: /Playwright Fixture/ }).click();
+	await page.getByRole('link', { name: 'Playwright Fixture', exact: true }).click();
 	await page.getByRole('link', { name: 'Alerts', exact: true }).click();
 	const table = page.getByRole('region', { name: 'Anomalous addresses' });
 	await expect(table.getByRole('row')).toHaveCount(101);
@@ -50,13 +50,13 @@ test('alerts show loading and retain the last table on a failed refresh', async
 		await pending;
 		await route.fulfill({ status: 503, json: { data: null, error: 'QA feed unavailable' } });
 	});
-	await page.getByRole('button', { name: 'Recent', exact: true }).click();
+	await page.getByRole('radio', { name: 'Recent', exact: true }).click();
 	await expect(table).toHaveAttribute('aria-busy', 'true');
 	release();
 	await expect(page.getByRole('alert')).toHaveText('QA feed unavailable');
 	await expect(table.getByRole('row')).toHaveCount(101);
 	await page.unrouteAll({ behavior: 'wait' });
-	await page.getByRole('button', { name: 'Most extreme', exact: true }).click();
+	await page.getByRole('radio', { name: 'Most extreme', exact: true }).click();
 	await expect(page.getByRole('alert')).not.toBeAttached();
 	await expect(table).toHaveAttribute('aria-busy', 'false');
 });
diff --git a/apps/web/tests/e2e/brand.spec.ts b/apps/web/tests/e2e/brand.spec.ts
index 1f26fb4..49331c8 100644
--- a/apps/web/tests/e2e/brand.spec.ts
+++ b/apps/web/tests/e2e/brand.spec.ts
@@ -19,7 +19,7 @@ for (const colorScheme of ['light', 'dark'] as const) {
 		const home = page.getByRole('link', { name: 'ATLANTIS', exact: true });
 		await expect(home.getByRole('img', { name: 'ATLANTIS', exact: true })).toBeVisible();
 		const logoBounds = await home.boundingBox();
-		const navBounds = await page.getByRole('link', { name: 'Home', exact: true }).boundingBox();
+		const navBounds = await page.getByRole('button', { name: /^Dataset:/ }).boundingBox();
 		expect(navBounds!.x - (logoBounds!.x + logoBounds!.width)).toBeGreaterThanOrEqual(8);
 		for (const control of await page.locator('header a, header button').all()) {
 			const bounds = await control.boundingBox();
diff --git a/apps/web/tests/e2e/chart-helpers.ts b/apps/web/tests/e2e/chart-helpers.ts
index 62b6513..0e9911e 100644
--- a/apps/web/tests/e2e/chart-helpers.ts
+++ b/apps/web/tests/e2e/chart-helpers.ts
@@ -35,12 +35,15 @@ export async function hoverPlot(surface: Locator) {
 }
 
 export async function setDates(page: Page, start: string, end: string) {
+	const dialog = page.getByRole('dialog', { name: 'Date range', exact: true });
+	if (!(await dialog.isVisible())) await page.getByRole('button', { name: /^Date range:/ }).click();
+	await expect(dialog).toBeVisible();
 	for (const [label, date] of [
 		['End Date', end],
 		['Start Date', start]
 	]) {
-		await page.getByLabel(label, { exact: true }).fill(date);
-		await page.getByLabel(label, { exact: true }).press('Tab');
+		await dialog.getByLabel(label, { exact: true }).fill(date);
+		await dialog.getByLabel(label, { exact: true }).press('Tab');
 		const key = label === 'End Date' ? 'endDate' : 'startDate';
 		await expect
 			.poll(
@@ -50,8 +53,10 @@ export async function setDates(page: Page, start: string, end: string) {
 			)
 			.toBe(date);
 	}
-	await expect(page.getByLabel('Start Date', { exact: true })).toHaveValue(start);
-	await expect(page.getByLabel('End Date', { exact: true })).toHaveValue(end);
+	await expect(dialog.getByLabel('Start Date', { exact: true })).toHaveValue(start);
+	await expect(dialog.getByLabel('End Date', { exact: true })).toHaveValue(end);
+	await page.keyboard.press('Escape');
+	await expect(dialog).not.toBeAttached();
 }
 
 export async function rendered(surface: Locator) {
diff --git a/apps/web/tests/e2e/chart-migration.spec.ts b/apps/web/tests/e2e/chart-migration.spec.ts
index 2d006c1..60740e3 100644
--- a/apps/web/tests/e2e/chart-migration.spec.ts
+++ b/apps/web/tests/e2e/chart-migration.spec.ts
@@ -7,6 +7,7 @@ import {
 	hoverChart,
 	rendered
 } from './chart-helpers';
+import { intervalSelect, setDirection, setInterval } from './toolbar-helpers';
 
 test('traffic tooltip totals describe the hovered bucket after trimming unknown bounds', async ({
 	page
@@ -74,10 +75,7 @@ test('keyboard range selection changes the time window and Escape cancels it', a
 	await expect(page).toHaveURL(/endDate=2025-03-03/);
 	await surface.press('Shift+ArrowRight');
 	await surface.press('Enter');
-	await expect(page.getByRole('button', { name: '5 min', exact: true })).toHaveAttribute(
-		'aria-pressed',
-		'true'
-	);
+	await expect(intervalSelect(page)).toHaveAccessibleName('Interval: 5 min');
 });
 
 test('dense spectra retain one accessible interaction surface and positioned summaries', async ({
@@ -258,12 +256,12 @@ test('traffic aborts an obsolete request and retains the latest rendered groupin
 			request.url().includes('/api/netflow/stats?') &&
 			new URL(request.url()).searchParams.get('groupBy') === 'hour'
 	);
-	await page.getByRole('button', { name: 'Hour', exact: true }).click();
+	await setInterval(page, 'Hour');
 	const pending = await requested;
 	const aborted = page.waitForEvent('requestfailed', {
 		predicate: (request) => request === pending
 	});
-	await page.getByRole('button', { name: '10 min', exact: true }).click();
+	await setInterval(page, '10 min');
 	await expect(card.getByTestId('chart-axis').filter({ hasText: '10 Minutes' })).toBeAttached();
 	const tcp = card.getByTestId('chart-series').filter({ hasText: /^Flows TCP$/ });
 	await expect(tcp).toHaveAttribute('data-total', '100');
@@ -289,9 +287,8 @@ test('filter transitions release detached chart DOM and listeners', async ({ pag
 	]) {
 		await activateChart(page, id);
 	}
-	const direction = page.getByRole('group', { name: 'Traffic direction' });
 	async function change(name: 'Ingress' | 'All') {
-		await direction.getByRole('button', { name, exact: true }).click();
+		await setDirection(page, name);
 		await page.waitForLoadState('networkidle');
 	}
 	await change('Ingress');
diff --git a/apps/web/tests/e2e/console-ui.spec.ts b/apps/web/tests/e2e/console-ui.spec.ts
new file mode 100644
index 0000000..836dcc5
--- /dev/null
+++ b/apps/web/tests/e2e/console-ui.spec.ts
@@ -0,0 +1,470 @@
+import { expect, test, type Page } from '@playwright/test';
+import type { NetflowStatsResponse, NetflowFileDetailsResponse } from '../../src/lib/types/types';
+import { expectRendered, FIXTURE_DASHBOARD } from './chart-helpers';
+import {
+	cardMenuTrigger,
+	chooseCardAction,
+	openDateRange,
+	openMaadOptions,
+	openSources,
+	sourceOption
+} from './toolbar-helpers';
+
+function cardOrder(page: Page) {
+	return page
+		.locator('[data-chart-card]')
+		.evaluateAll((cards) => cards.map((card) => card.getAttribute('data-chart-id')));
+}
+
+test('KPI totals match the traffic window returned by the stats API', async ({ page }) => {
+	const statsResponse = page.waitForResponse(
+		(response) => new URL(response.url()).pathname === '/api/netflow/stats'
+	);
+	await page.goto('/datasets/playwright?startDate=2025-03-01&endDate=2025-03-03&groupBy=date');
+	const stats = (await (await statsResponse).json()) as NetflowStatsResponse;
+	const totals = { flows: 0, packets: 0, bytes: 0, complete: 0 };
+	for (const bucket of stats.result) {
+		if (bucket.coverage.state === 'complete') totals.complete += 1;
+		if (!bucket.data) continue;
+		totals.flows += bucket.data.flows;
+		totals.packets += bucket.data.packets;
+		totals.bytes += bucket.data.bytes;
+	}
+	expect(totals.flows).toBeGreaterThan(0);
+	const kpis = page.getByRole('region', { name: 'Window totals' });
+	for (const [id, value] of [
+		['flows', totals.flows],
+		['packets', totals.packets],
+		['bytes', totals.bytes],
+		['buckets', totals.complete]
+	] as const) {
+		await expect(kpis.locator(`[data-kpi="${id}"] [data-kpi-value]`)).toHaveAttribute(
+			'data-kpi-value',
+			String(value)
+		);
+	}
+	await expect(kpis.locator('[data-kpi="buckets"]')).toContainText(
+		`${totals.complete} / ${stats.result.length}`
+	);
+	await expect(kpis.locator('[data-kpi="flows"]')).toContainText(totals.flows.toLocaleString());
+});
+
+test('KPI totals follow source selection and show an unavailable state', async ({ page }) => {
+	await page.goto(FIXTURE_DASHBOARD);
+	const flows = page.locator('[data-kpi="flows"]');
+	await expect(flows.locator('[data-kpi-value]')).toHaveAttribute('data-kpi-value', '160');
+	const sources = await openSources(page);
+	await sourceOption(sources, 'fixture-router').click();
+	await expect(flows).toContainText('Unavailable');
+	await sources.getByRole('button', { name: 'Select all', exact: true }).click();
+	await expect(flows.locator('[data-kpi-value]')).toHaveAttribute('data-kpi-value', '160');
+});
+
+test('date range presets, calendar selection and typed fields update the window', async ({
+	page
+}) => {
+	await page.goto('/datasets/playwright?startDate=2025-03-01&endDate=2025-03-03');
+	await expect(page.getByRole('button', { name: 'Date range: Mar 1 – Mar 3, 2025' })).toBeVisible();
+	let dialog = await openDateRange(page);
+	await dialog.getByRole('button', { name: 'Last 7 days', exact: true }).click();
+	await expect(dialog).not.toBeAttached();
+	await expect.poll(() => new URL(page.url()).searchParams.get('startDate')).toBe('2025-02-25');
+	await expect(
+		page.getByRole('button', { name: 'Date range: Feb 25 – Mar 3, 2025' })
+	).toBeFocused();
+
+	dialog = await openDateRange(page);
+	await expect(dialog.getByRole('button', { name: 'Last 7 days', exact: true })).toHaveAttribute(
+		'aria-pressed',
+		'true'
+	);
+	await dialog.getByRole('button', { name: /March 2, 2025/ }).click();
+	await expect(dialog).toBeVisible();
+	await dialog.getByRole('button', { name: /March 4, 2025/ }).click();
+	await expect(dialog).not.toBeAttached();
+	await expect.poll(() => new URL(page.url()).searchParams.get('startDate')).toBe('2025-03-02');
+	expect(new URL(page.url()).searchParams.get('endDate')).toBe('2025-03-04');
+
+	dialog = await openDateRange(page);
+	const start = dialog.getByLabel('Start Date', { exact: true });
+	await start.fill('2025-02-31');
+	await start.press('Tab');
+	await expect(start).toHaveAttribute('aria-invalid', 'true');
+	expect(new URL(page.url()).searchParams.get('startDate')).toBe('2025-03-02');
+	await start.fill('2025-03-01');
+	await start.press('Tab');
+	await expect.poll(() => new URL(page.url()).searchParams.get('startDate')).toBeNull();
+
+	await dialog.getByRole('button', { name: 'All available', exact: true }).click();
+	await expect.poll(() => new URL(page.url()).searchParams.get('endDate')).toBeNull();
+	await expect(page.getByRole('button', { name: /^Date range: Mar 1, 2025 – / })).toBeVisible();
+});
+
+test('reversed dates explain the empty window and recover after correction', async ({ page }) => {
+	await page.goto('/datasets/playwright?startDate=2025-03-02&endDate=2025-03-01');
+	await expect(page.getByRole('alert')).toHaveText('Start Date must be on or before End Date.');
+	const dialog = await openDateRange(page);
+	await dialog.getByLabel('Start Date', { exact: true }).fill('2025-03-01');
+	await dialog.getByLabel('Start Date', { exact: true }).press('Tab');
+	await expect(
+		page.getByText('Start Date must be on or before End Date.', { exact: true })
+	).toHaveCount(0);
+	await page.keyboard.press('Escape');
+	await expectRendered(page.locator('[data-chart-id="dashboard"]'));
+});
+
+test('sources popover searches, toggles and bulk-selects with the keyboard', async ({ page }) => {
+	await page.goto(FIXTURE_DASHBOARD);
+	const trigger = page.getByRole('button', { name: /^Sources:/ });
+	await expect(trigger).toHaveAccessibleName('Sources: 1 of 1 selected');
+	const dialog = await openSources(page);
+	const search = dialog.getByRole('combobox', { name: 'Search sources' });
+	await expect(search).toBeFocused();
+	await search.fill('nothing-matches');
+	await expect(dialog.getByText('No sources found.')).toBeVisible();
+	await search.fill('fixture');
+	await expect(sourceOption(dialog, 'fixture-router')).toBeVisible();
+	await page.keyboard.press('Enter');
+	await expect(sourceOption(dialog, 'fixture-router')).toHaveAttribute('aria-checked', 'false');
+	await expect(trigger).toHaveAccessibleName('Sources: 0 of 1 selected');
+	await expect(page.locator('[data-chart-id="dashboard"]')).toContainText(
+		'Select at least one source'
+	);
+	await dialog.getByRole('button', { name: 'Select all', exact: true }).click();
+	await expect(sourceOption(dialog, 'fixture-router')).toHaveAttribute('aria-checked', 'true');
+	await page.keyboard.press('Escape');
+	await expect(dialog).not.toBeAttached();
+	await expect(trigger).toBeFocused();
+	await expectRendered(page.locator('[data-chart-id="dashboard"]'));
+});
+
+test('toolbar popovers and selects open, describe their value and return focus', async ({
+	page
+}) => {
+	await page.goto(FIXTURE_DASHBOARD);
+	await expect(page.getByRole('group', { name: 'Filters', exact: true })).toBeVisible();
+	const maad = await openMaadOptions(page);
+	await expect(maad.getByRole('group', { name: 'MAAD measure' })).toBeVisible();
+	await expect(maad.getByRole('group', { name: 'MAAD address family' })).toBeVisible();
+	await page.keyboard.press('Escape');
+	await expect(page.getByRole('button', { name: 'MAAD: IPv4, Addresses' })).toBeFocused();
+
+	const interval = page.getByRole('combobox', { name: 'Interval: 5 min' });
+	await interval.focus();
+	await page.keyboard.press('Enter');
+	await expect(page.getByRole('listbox')).toBeVisible();
+	await page.keyboard.press('Escape');
+	await expect(interval).toBeFocused();
+
+	const direction = page.getByRole('combobox', { name: 'Direction: All' });
+	await direction.click();
+	await expect(page.getByRole('option', { name: /^Egress/ })).toContainText('internal → external');
+	await page.getByRole('option', { name: /^Egress/ }).click();
+	await expect.poll(() => new URL(page.url()).searchParams.get('direction')).toBe('egress');
+	await expect(page.getByRole('combobox', { name: 'Direction: Egress' })).toBeVisible();
+});
+
+for (const width of [390, 1280]) {
+	test(`card menu moves and resizes cards with focus retained at ${width}px`, async ({ page }) => {
+		await page.setViewportSize({ width, height: 900 });
+		await page.goto(FIXTURE_DASHBOARD);
+		const card = page.locator('[data-chart-id="dashboard"]');
+		await expectRendered(card);
+		const frame = card.locator('.chart-frame');
+		const initial = await frame.evaluate((node) => node.getBoundingClientRect().height);
+		await chooseCardAction(page, 'Traffic Overview', 'Taller');
+		await expect
+			.poll(() => frame.evaluate((node) => node.getBoundingClientRect().height))
+			.toBe(initial + 80);
+		await expect(cardMenuTrigger(page, 'Traffic Overview')).toBeFocused();
+		await chooseCardAction(page, 'Traffic Overview', 'Shorter');
+		await expect
+			.poll(() => frame.evaluate((node) => node.getBoundingClientRect().height))
+			.toBe(initial);
+		await expectRendered(card);
+
+		const trigger = cardMenuTrigger(page, 'Traffic Overview');
+		await trigger.focus();
+		await page.keyboard.press('Enter');
+		const menu = page.getByRole('menu');
+		await expect(menu.getByRole('menuitem', { name: 'Move up' })).toHaveAttribute(
+			'aria-disabled',
+			'true'
+		);
+		await menu.getByRole('menuitem', { name: 'Move down' }).focus();
+		await page.keyboard.press('Enter');
+		await expect(menu).not.toBeAttached();
+		await expect
+			.poll(() => cardOrder(page))
+			.toEqual([
+				'characteristics',
+				'dashboard',
+				'ports',
+				'ip',
+				'protocol',
+				'dimensions',
+				'spectrum',
+				'coverage'
+			]);
+		await expect(trigger).toBeFocused();
+		await page.reload();
+		await expect.poll(async () => (await cardOrder(page))[0]).toBe('characteristics');
+		await expect(page.locator('[data-chart-id="characteristics"]')).toHaveAttribute(
+			'data-chart-activated',
+			'true'
+		);
+		for (let position = 2; position < 8; position++) {
+			await chooseCardAction(page, 'Traffic Overview', 'Move down');
+			await expect.poll(async () => (await cardOrder(page))[position]).toBe('dashboard');
+			await expect(trigger).toBeFocused();
+		}
+		await trigger.click();
+		await expect(page.getByRole('menuitem', { name: 'Move down' })).toHaveAttribute(
+			'aria-disabled',
+			'true'
+		);
+		await page.keyboard.press('Escape');
+		await expect(trigger).toBeFocused();
+	});
+}
+
+test('menu and native resizing share the packed panel height', async ({ page }) => {
+	await page.setViewportSize({ width: 1280, height: 1000 });
+	await page.goto(FIXTURE_DASHBOARD);
+	const card = page.locator('[data-chart-id="dashboard"]');
+	await expectRendered(card);
+	const frame = card.locator('.chart-frame');
+	const initial = (await frame.boundingBox())!;
+	await page.mouse.move(initial.x + initial.width - 3, initial.y + initial.height - 3);
+	await page.mouse.down();
+	await page.mouse.move(initial.x + initial.width - 3, initial.y + initial.height - 103, {
+		steps: 5
+	});
+	await page.mouse.up();
+	await expect
+		.poll(() => frame.evaluate((node) => node.getBoundingClientRect().height))
+		.toBe(initial.height - 100);
+	await chooseCardAction(page, 'Traffic Overview', 'Shorter');
+	await expect
+		.poll(() => frame.evaluate((node) => node.getBoundingClientRect().height))
+		.toBe(initial.height - 180);
+	await chooseCardAction(page, 'Traffic Overview', 'Taller');
+	await expect
+		.poll(() => frame.evaluate((node) => node.getBoundingClientRect().height))
+		.toBe(initial.height - 100);
+	await expectRendered(card);
+});
+
+for (const width of [390, 1280]) {
+	for (const theme of ['light', 'dark'] as const) {
+		test(`resized panels stay packed at ${width}px in ${theme}`, async ({ page }) => {
+			await page.setViewportSize({ width, height: 900 });
+			await page.addInitScript(
+				(dark) => localStorage.setItem('dark-mode', String(dark)),
+				theme === 'dark'
+			);
+			await page.goto(FIXTURE_DASHBOARD);
+			const cards = page.locator('[data-chart-card]');
+			for (const card of await cards.all()) {
+				await card.scrollIntoViewIfNeeded();
+				await expect(card).toHaveAttribute('data-chart-activated', 'true');
+				const id = await card.getAttribute('data-chart-id');
+				await expectRendered(card, id === 'characteristics' ? 2 : 1);
+			}
+			const expectPacked = async () => {
+				const geometry = await cards.evaluateAll((nodes) =>
+					nodes.map((node) => {
+						const card = node.getBoundingClientRect();
+						const content = node.lastElementChild!.getBoundingClientRect();
+						return {
+							top: card.top,
+							bottom: card.bottom,
+							left: card.left,
+							right: card.right,
+							contentBottom: content.bottom
+						};
+					})
+				);
+				for (let index = 0; index < geometry.length; index++) {
+					const card = geometry[index];
+					expect(Math.abs(card.bottom - card.contentBottom)).toBeLessThanOrEqual(1);
+					if (index > 0) {
+						expect(card.top - geometry[index - 1].bottom).toBeCloseTo(12, 0);
+						expect(card.left).toBe(geometry[0].left);
+						expect(card.right).toBe(geometry[0].right);
+					}
+				}
+			};
+			for (const title of ['Traffic Overview', 'Unique Ports', 'Spectrum']) {
+				await chooseCardAction(page, title, 'Shorter');
+				await expectPacked();
+				await chooseCardAction(page, title, 'Taller');
+				await chooseCardAction(page, title, 'Taller');
+				await expectPacked();
+			}
+			await chooseCardAction(page, 'Traffic Overview', 'Move down');
+			await expectPacked();
+		});
+	}
+}
+
+test('placeholder cards expose the card menu before they load', async ({ page }) => {
+	await page.goto(FIXTURE_DASHBOARD);
+	const ip = page.locator('[data-chart-id="ip"]');
+	await expect(ip).toHaveAttribute('data-chart-activated', 'false');
+	await expect(ip.getByTestId('deferred-chart-ip')).toBeAttached();
+	await cardMenuTrigger(page, 'Unique IP Counts').click();
+	await expect(page.getByRole('menuitem', { name: 'Taller' })).not.toBeAttached();
+	await page.getByRole('menuitem', { name: 'Move up' }).click();
+	await expect.poll(async () => (await cardOrder(page)).indexOf('ip')).toBe(2);
+});
+
+test('top bar switches datasets and the command menu navigates', async ({ page }) => {
+	await page.goto(FIXTURE_DASHBOARD);
+	const switcher = page.getByRole('button', { name: 'Dataset: Playwright Fixture' });
+	await switcher.click();
+	await page.getByRole('combobox', { name: 'Search datasets' }).fill('external');
+	await page.getByRole('option', { name: /Playwright External MAAD/ }).click();
+	await expect(page).toHaveURL(/\/datasets\/playwright-external-maad$/);
+	await expect(
+		page.getByRole('button', { name: 'Dataset: Playwright External MAAD' })
+	).toBeVisible();
+	await expect(page.getByRole('link', { name: 'Dashboard', exact: true })).toHaveAttribute(
+		'aria-current',
+		'page'
+	);
+
+	await page.getByRole('link', { name: 'Alerts', exact: true }).click();
+	await expect(page).toHaveURL(/\/datasets\/playwright-external-maad\/alerts$/);
+	await page.getByRole('button', { name: 'Dataset: Playwright External MAAD' }).click();
+	await page.getByRole('option', { name: /Playwright Fixture/ }).click();
+	await expect(page).toHaveURL(/\/datasets\/playwright\/alerts$/);
+
+	await page.keyboard.press('ControlOrMeta+k');
+	const palette = page.getByRole('dialog', { name: 'Command menu' });
+	await expect(palette).toBeVisible();
+	await page.getByRole('combobox', { name: 'Search commands' }).fill('files');
+	await page.keyboard.press('Enter');
+	await expect(palette).not.toBeAttached();
+	await expect(page).toHaveURL(/\/netflow\/files\?dataset=playwright$/);
+	await expect(page.getByRole('link', { name: 'Files', exact: true })).toHaveAttribute(
+		'aria-current',
+		'page'
+	);
+	await expect(page.getByLabel('Dataset', { exact: true })).toHaveValue('playwright');
+
+	await page.getByRole('button', { name: 'Open command menu' }).click();
+	await page.getByRole('combobox', { name: 'Search commands' }).fill('dark theme');
+	await page.keyboard.press('Enter');
+	await expect(page.locator('html')).toHaveClass(/(?:^|\s)dark(?:\s|$)/);
+});
+
+for (const width of [390, 768, 1280, 1920]) {
+	test(`toolbar controls wrap without overflow at ${width}px`, async ({ page }) => {
+		await page.setViewportSize({ width, height: 900 });
+		await page.goto(FIXTURE_DASHBOARD);
+		await expectRendered(page.locator('[data-chart-id="dashboard"]'));
+		const toolbar = page.getByRole('group', { name: 'Filters', exact: true });
+		const geometry = await toolbar.evaluate((node) => {
+			const bounds = node.getBoundingClientRect();
+			return {
+				left: bounds.left,
+				right: bounds.right,
+				controls: Array.from(node.querySelectorAll('button'), (button) => {
+					const box = button.getBoundingClientRect();
+					return { left: box.left, right: box.right, height: box.height };
+				})
+			};
+		});
+		expect(geometry.controls.length).toBe(6);
+		for (const control of geometry.controls) {
+			expect(control.height).toBe(32);
+			expect(control.left).toBeGreaterThanOrEqual(geometry.left);
+			expect(control.right).toBeLessThanOrEqual(geometry.right);
+		}
+		const widths = await page.evaluate(() => ({
+			viewport: innerWidth,
+			document: document.documentElement.scrollWidth
+		}));
+		expect(widths.document).toBeLessThanOrEqual(widths.viewport);
+	});
+}
+
+for (const width of [390, 768, 1280, 1920]) {
+	test(`file summary and analysis labels fit at ${width}px`, async ({ page }) => {
+		await page.setViewportSize({ width, height: 900 });
+		await page.goto('/netflow/files/202503010200?dataset=playwright');
+		await expectRendered(page.locator('main'), 4);
+		await expect(page).toHaveTitle('nfcapd.202503010200 · ATLANTIS');
+		for (const side of ['Source', 'Destination']) {
+			for (const kind of ['Structure', 'Spectrum']) {
+				const heading = page
+					.getByRole('heading', { name: `${side} · ${kind}`, exact: true })
+					.first();
+				await heading.scrollIntoViewIfNeeded();
+				await expect(heading).toBeVisible();
+			}
+		}
+		const shell = page.locator('.app-shell__main');
+		expect(await shell.evaluate((node) => node.scrollWidth - node.clientWidth)).toBeLessThanOrEqual(
+			1
+		);
+	});
+}
+
+test('large byte totals stay on one line in the file summary table', async ({ page }) => {
+	await page.setViewportSize({ width: 1280, height: 900 });
+	await page.route('**/api/netflow/files/*/details?**', async (route) => {
+		const response = await route.fetch();
+		const body: NetflowFileDetailsResponse = await response.json();
+		body.routers[0].summary.bytes = 160824538431;
+		await route.fulfill({ response, json: body });
+	});
+	await page.goto('/netflow/files/202503010200?dataset=playwright');
+	const total = page.getByRole('cell', { name: '160,824,538,431', exact: true });
+	await expect(total).toBeVisible();
+	const fits = await total.evaluate((node) => {
+		const table = node.closest('[data-slot="table-container"]') ?? node.closest('table')!;
+		return (
+			node.getBoundingClientRect().height < 40 &&
+			node.getBoundingClientRect().right <= table.getBoundingClientRect().right + 1
+		);
+	});
+	expect(fits).toBe(true);
+});
+
+test('metric popover keeps independent selections and returns focus', async ({ page }) => {
+	await page.goto(FIXTURE_DASHBOARD);
+	const card = page.locator('[data-chart-id="dashboard"]');
+	const state = (await expectRendered(card)).first();
+	const trigger = card.getByRole('button', { name: /^Metrics/ });
+	await trigger.focus();
+	await page.keyboard.press('Enter');
+	const dialog = page.getByRole('dialog', { name: 'NetFlow metrics', exact: true });
+	await expect(dialog.getByRole('checkbox')).toHaveCount(12);
+	await dialog.getByRole('checkbox', { name: 'Flows TCP', exact: true }).uncheck();
+	await dialog.getByRole('checkbox', { name: 'Bytes UDP', exact: true }).check();
+	await expect(state).toHaveAttribute('data-series-count', '4');
+	await expect(
+		card.getByRole('group', { name: 'Traffic metric family' }).getByRole('radio', { checked: true })
+	).toHaveCount(0);
+	await page.keyboard.press('Escape');
+	await expect(dialog).not.toBeAttached();
+	await expect(trigger).toBeFocused();
+	await expect(trigger).toContainText('4/12');
+});
+
+test.describe('coarse pointer targets', () => {
+	test.use({ hasTouch: true });
+	test('toolbar and card menu triggers keep 44px touch targets', async ({ page }) => {
+		await page.setViewportSize({ width: 390, height: 800 });
+		await page.goto(FIXTURE_DASHBOARD);
+		await expectRendered(page.locator('[data-chart-id="dashboard"]'));
+		expect(await page.evaluate(() => matchMedia('(pointer: coarse)').matches)).toBe(true);
+		const heights = await page
+			.locator('.toolbar-trigger, [data-card-menu-trigger]')
+			.evaluateAll((nodes) => nodes.map((node) => node.getBoundingClientRect().height));
+		expect(heights.length).toBeGreaterThan(8);
+		for (const height of heights) expect(height).toBeGreaterThanOrEqual(44);
+	});
+});
diff --git a/apps/web/tests/e2e/dashboard-baseline.spec.ts b/apps/web/tests/e2e/dashboard-baseline.spec.ts
index 6ecd171..6318c6a 100644
--- a/apps/web/tests/e2e/dashboard-baseline.spec.ts
+++ b/apps/web/tests/e2e/dashboard-baseline.spec.ts
@@ -9,6 +9,19 @@ import {
 	chartTarget,
 	setDates
 } from './chart-helpers';
+import {
+	chooseSegment,
+	directionSelect,
+	intervalSelect,
+	openSources,
+	resetFilters,
+	setDirection,
+	setInterval,
+	setMaadFamily,
+	setMaadMeasure,
+	setSource,
+	sourceOption
+} from './toolbar-helpers';
 
 test('renders every dashboard chart with series, finite marks and axis summaries', async ({
 	page
@@ -42,33 +55,34 @@ test('traffic metrics and family controls change the rendered values and series'
 	const state = (await expectRendered(card)).first();
 	const tcp = () => card.getByTestId('chart-series').filter({ hasText: /^Flows TCP$/ });
 	await expect(tcp()).toHaveAttribute('data-total', '100');
-	await card.getByRole('button', { name: 'IPv4', exact: true }).click();
+	await chooseSegment(card, 'Traffic IP family', 'IPv4');
 	await expect(tcp()).toHaveAttribute('data-total', '80');
-	await card.getByRole('button', { name: 'IPv6', exact: true }).click();
+	await chooseSegment(card, 'Traffic IP family', 'IPv6');
 	await expect(tcp()).toHaveAttribute('data-total', '20');
-	await card.getByRole('button', { name: 'All', exact: true }).click();
+	await chooseSegment(card, 'Traffic IP family', 'All');
 	await expect(tcp()).toHaveAttribute('data-total', '100');
 	for (const [label, kind] of [
-		['Line Chart', 'line'],
-		['Stacked Area', 'stacked']
+		['Line', 'line'],
+		['Stacked', 'stacked']
 	]) {
-		await card.getByRole('button', { name: label, exact: true }).click();
+		await chooseSegment(card, 'Traffic chart type', label);
 		await expect(state).toHaveAttribute('data-kind', kind);
 	}
 	for (const [label, prefix, total] of [
 		['Packets', 'Packets TCP', '1000'],
 		['Bytes', 'Bytes TCP', '102400']
 	]) {
-		await card.getByRole('button', { name: label, exact: true }).click();
+		await chooseSegment(card, 'Traffic metric family', label);
 		await expect(
 			card.getByTestId('chart-series').filter({ hasText: new RegExp(`^${prefix}$`) })
 		).toHaveAttribute('data-total', total);
 		await expect(state).toHaveAttribute('data-series-count', '4');
 	}
-	await card.getByRole('button', { name: 'Select All', exact: true }).click();
-	await expect(state).toHaveAttribute('data-series-count', '12');
-	await card.getByRole('button', { name: 'NetFlow metrics', exact: true }).click();
+	await card.getByRole('button', { name: /^Metrics/ }).click();
 	const seriesControls = page.getByRole('dialog', { name: 'NetFlow metrics', exact: true });
+	await seriesControls.getByRole('button', { name: 'All', exact: true }).click();
+	await expect(state).toHaveAttribute('data-series-count', '12');
+	await expect(card.getByRole('button', { name: /^Metrics/ })).toContainText('12/12');
 	await expect(seriesControls.getByRole('checkbox')).toHaveCount(12);
 	for (const checkbox of await seriesControls.getByRole('checkbox').all()) {
 		await checkbox.uncheck();
@@ -76,7 +90,7 @@ test('traffic metrics and family controls change the rendered values and series'
 	await expect(state).toHaveAttribute('data-series-count', '0');
 	await expect(state).toHaveAttribute('data-state', 'empty');
 	await page.keyboard.press('Escape');
-	await card.getByRole('button', { name: 'Flows', exact: true }).click();
+	await chooseSegment(card, 'Traffic metric family', 'Flows');
 	await expect(state).toHaveAttribute('data-series-count', '4');
 	await hoverPlot(card.getByTestId('chart-surface'));
 	await expect(card.getByTestId('chart-tooltip')).toContainText('Flows TCP: 100');
@@ -95,7 +109,7 @@ test('flow characteristics and port families retain their numerical meaning', as
 		['IPv6', '1000'],
 		['All', '1750']
 	]) {
-		await characteristics.getByRole('radio', { name: family, exact: true }).check();
+		await chooseSegment(characteristics, 'IP family', family);
 		await expect(duration).toHaveAttribute('data-max', value);
 	}
 	await hoverChart(page, characteristics.getByTestId('chart-surface').first());
@@ -104,12 +118,15 @@ test('flow characteristics and port families retain their numerical meaning', as
 	const state = (await expectRendered(ports)).first();
 	const series = ports.getByTestId('chart-series').filter({ hasText: /^Source ports 0-1023$/ });
 	await expect(series).toHaveAttribute('data-max', '8');
-	await ports.getByRole('radio', { name: 'IPV6', exact: true }).check();
+	await chooseSegment(ports, 'Port IP family', 'IPv6');
 	await expect(series).toHaveAttribute('data-max', '2');
-	for (const cb of await ports.getByRole('checkbox').all()) await cb.uncheck();
+	await ports.getByRole('button', { name: /^Ranges/ }).click();
+	const ranges = page.getByRole('dialog', { name: 'Port ranges', exact: true });
+	for (const cb of await ranges.getByRole('checkbox').all()) await cb.uncheck();
 	await expect(ports.getByTestId('chart-card-state')).toHaveAttribute('data-state', 'no-metrics');
 	await expect(ports).toContainText('Select at least one port range');
-	await ports.getByRole('checkbox', { name: 'Source ports 0-1023', exact: true }).check();
+	await ranges.getByRole('checkbox', { name: 'Source ports 0-1023', exact: true }).check();
+	await page.keyboard.press('Escape');
 	await expectRendered(ports);
 	await expect(state).toHaveAttribute('data-series-count', '1');
 });
@@ -121,11 +138,14 @@ test('IP and protocol toggles alter the visible series and recover from no metri
 	for (const id of ['ip', 'protocol']) {
 		const card = await activateChart(page, id);
 		await expectRendered(card);
-		const checkboxes = card.getByRole('checkbox');
-		for (const cb of await checkboxes.all()) await cb.uncheck();
+		await card.getByRole('button', { name: /^Metrics/ }).click();
+		const metrics = page.getByRole('dialog', { name: /metrics$/ });
+		await metrics.getByRole('button', { name: 'None', exact: true }).click();
+		await expect(metrics.getByRole('checkbox', { checked: true })).toHaveCount(0);
 		await expect(card.getByTestId('chart-card-state')).toHaveAttribute('data-state', 'no-metrics');
 		await expect(card).toContainText('Select at least one metric');
-		await checkboxes.first().check();
+		await metrics.getByRole('checkbox').first().check();
+		await page.keyboard.press('Escape');
 		const state = (await expectRendered(card)).first();
 		await expect(state).toHaveAttribute('data-series-count', '1');
 		await expect(card.getByTestId('chart-series').first()).toHaveAttribute(
@@ -148,10 +168,7 @@ test('all granularities render and long windows guard expensive groupings', asyn
 		['10 min', '10min'],
 		['5 min', '5min']
 	]) {
-		await page
-			.getByRole('group', { name: 'Granularity' })
-			.getByRole('button', { name: label, exact: true })
-			.click();
+		await setInterval(page, label);
 		await expect
 			.poll(() => new URL(page.url()).searchParams.get('groupBy') ?? 'date')
 			.toBe(groupBy);
@@ -161,10 +178,18 @@ test('all granularities render and long windows guard expensive groupings', asyn
 		).toHaveAttribute('data-total', '100');
 	}
 	await setDates(page, '2025-01-01', '2025-12-31');
-	await expect(page.getByRole('button', { name: '5 min', exact: true })).toBeDisabled();
-	await expect(page.getByRole('button', { name: '10 min', exact: true })).toBeDisabled();
-	await expect(page.getByRole('button', { name: '30 min', exact: true })).toBeDisabled();
-	await expect(page.getByRole('button', { name: 'Day', exact: true })).toBeEnabled();
+	await expect(intervalSelect(page)).toHaveAccessibleName('Interval: Day');
+	await intervalSelect(page).click();
+	for (const label of ['5 min', '10 min', '30 min'])
+		await expect(page.getByRole('option', { name: new RegExp(`^${label}`) })).toHaveAttribute(
+			'aria-disabled',
+			'true'
+		);
+	await expect(page.getByRole('option', { name: 'Day', exact: true })).not.toHaveAttribute(
+		'aria-disabled',
+		'true'
+	);
+	await page.keyboard.press('Escape');
 });
 
 test('empty windows clear rendered data and source defaults recover after reload', async ({
@@ -178,11 +203,12 @@ test('empty windows clear rendered data and source defaults recover after reload
 	await expect(ip.getByTestId('chart-render-state')).not.toBeAttached();
 	await setDates(page, '2025-03-01', '2025-03-01');
 	await expectRendered(ip);
-	await page.getByRole('checkbox', { name: 'fixture-router', exact: true }).uncheck();
+	await setSource(page, 'fixture-router', false);
 	await expect(ip).toContainText('Select at least one source');
 	await page.reload();
-	await expect(page.getByRole('checkbox', { name: 'fixture-router', exact: true })).toBeChecked();
-	await page.getByRole('checkbox', { name: 'fixture-router', exact: true }).check();
+	const sources = await openSources(page);
+	await expect(sourceOption(sources, 'fixture-router')).toHaveAttribute('aria-checked', 'true');
+	await page.keyboard.press('Escape');
 	await activateChart(page, 'ip');
 	await expectRendered(ip);
 	await expect(ip.getByTestId('chart-series').first()).toHaveAttribute('data-max', '5');
@@ -194,29 +220,15 @@ test('direction changes values and URL filters survive reload and history', asyn
 		.getByTestId('chart-series')
 		.filter({ hasText: /^Flows TCP$/ });
 	await expect(tcp).toHaveAttribute('data-total', '100');
-	const direction = page.getByRole('group', { name: 'Traffic direction' });
-	await direction.getByRole('button', { name: 'Ingress', exact: true }).click();
+	await setDirection(page, 'Ingress');
 	await expect(tcp).toHaveAttribute('data-total', '50');
-	await page
-		.getByRole('group', { name: 'MAAD measure' })
-		.getByRole('button', { name: 'Bytes', exact: true })
-		.click();
-	await page
-		.getByRole('group', { name: 'MAAD address family' })
-		.getByRole('button', { name: 'IPv6 (/23–/64)' })
-		.click();
+	await setMaadMeasure(page, 'Bytes');
+	await setMaadFamily(page, 'IPv6 (/23–/64)');
 	await page.reload();
-	await expect(direction.getByRole('button', { name: 'Ingress', exact: true })).toHaveAttribute(
-		'aria-pressed',
-		'true'
-	);
-	await expect(
-		page
-			.getByRole('group', { name: 'MAAD measure' })
-			.getByRole('button', { name: 'Bytes', exact: true })
-	).toHaveAttribute('aria-pressed', 'true');
+	await expect(directionSelect(page)).toHaveAccessibleName('Direction: Ingress');
+	await expect(page.getByRole('button', { name: 'MAAD: IPv6, Bytes', exact: true })).toBeVisible();
 	await expect(tcp).toHaveAttribute('data-total', '50');
-	await direction.getByRole('button', { name: 'All', exact: true }).click();
+	await setDirection(page, 'All');
 	await expect(tcp).toHaveAttribute('data-total', '100');
 	await page.goBack();
 	await expect(tcp).toHaveAttribute('data-total', '50');
@@ -241,7 +253,7 @@ test('chart loading, request errors and recovery are visible', async ({ page })
 	await expect(ip.getByTestId('chart-card-state')).toHaveAttribute('data-state', 'error');
 	await expect(ip).toContainText('QA unavailable');
 	await page.unrouteAll({ behavior: 'wait' });
-	await page.getByRole('button', { name: 'Hour', exact: true }).click();
+	await setInterval(page, 'Hour');
 	await expectRendered(ip);
 });
 
@@ -258,9 +270,10 @@ test('brush selects a narrower daily range and reset restores defaults', async (
 	await page.mouse.move(box.x + box.width * 0.65, box.y + box.height * 0.5, { steps: 10 });
 	await page.mouse.up();
 	await expect.poll(() => new URL(page.url()).searchParams.get('groupBy')).not.toBe('date');
-	await expect(page.getByLabel('Start Date', { exact: true })).not.toHaveValue('2025-01-01');
-	await page.getByRole('button', { name: 'Reset View' }).click();
-	await expect(page.getByLabel('Start Date', { exact: true })).toHaveValue('2025-03-01');
+	await expect.poll(() => new URL(page.url()).searchParams.get('startDate')).not.toBe('2025-01-01');
+	await resetFilters(page);
+	await expect.poll(() => new URL(page.url()).searchParams.get('startDate')).toBeNull();
+	await expect(page.getByRole('button', { name: /^Date range: Mar 1, 2025 – / })).toBeVisible();
 	await expectRendered(card);
 });
 
@@ -279,13 +292,9 @@ for (const id of ['characteristics', 'ports', 'ip', 'protocol', 'dimensions']) {
 	});
 }
 
-test('theme and navigation tip remain available by keyboard and after reload', async ({ page }) => {
+test('theme remains available by keyboard and after reload', async ({ page }) => {
 	await page.goto(FIXTURE_DASHBOARD);
 	await expectRendered(chartCard(page, 'dashboard'));
-	const tip = page.getByRole('button', { name: 'Show navigation tip' });
-	await tip.focus();
-	await expect(tip).toBeFocused();
-	await expect(tip).toHaveAttribute('title', /Drag across chart/);
 	const theme = page.getByRole('button', { name: 'Switch to dark mode' });
 	await theme.focus();
 	await page.keyboard.press('Enter');
diff --git a/apps/web/tests/e2e/dashboard-contract.spec.ts b/apps/web/tests/e2e/dashboard-contract.spec.ts
index c8fa96e..5801326 100644
--- a/apps/web/tests/e2e/dashboard-contract.spec.ts
+++ b/apps/web/tests/e2e/dashboard-contract.spec.ts
@@ -1,4 +1,5 @@
 import { expect, test } from '@playwright/test';
+import { openSources, setDateRange, setInterval, setSource, sourceOption } from './toolbar-helpers';
 import { chartTarget, rendered } from './chart-helpers';
 
 const DASHBOARD = '/datasets/playwright?startDate=2025-03-01&endDate=2025-03-01&groupBy=5min';
@@ -23,19 +24,18 @@ test('range updates change values, empty bounds recover, and source defaults rec
 	await page.goto(DASHBOARD);
 	const card = page.locator('[data-chart-id="dashboard"]');
 	await rendered(card.getByTestId('chart-surface'));
-	await page.getByRole('button', { name: 'Day', exact: true }).click();
+	await setInterval(page, 'Day');
 	const tcp = card.getByTestId('chart-series').filter({ hasText: /^Flows TCP$/ });
 	await expect(tcp).toHaveAttribute('data-total', '100');
-	await page.getByLabel('End Date', { exact: true }).fill('2025-03-03');
-	await page.getByLabel('End Date', { exact: true }).press('Tab');
+	await setDateRange(page, { endDate: '2025-03-03' });
 	await expect(tcp).toHaveAttribute('data-total', '300');
-	await page.getByLabel('Start Date', { exact: true }).fill('2025-03-03');
-	await page.getByLabel('Start Date', { exact: true }).press('Tab');
+	await setDateRange(page, { startDate: '2025-03-03' });
 	await expect(tcp).toHaveAttribute('data-total', '200');
-	await page.getByRole('checkbox', { name: 'fixture-router', exact: true }).uncheck();
+	await setSource(page, 'fixture-router', false);
 	await page.reload();
-	await expect(page.getByRole('checkbox', { name: 'fixture-router', exact: true })).toBeChecked();
-	await page.getByRole('checkbox', { name: 'fixture-router', exact: true }).check();
+	const sources = await openSources(page);
+	await expect(sourceOption(sources, 'fixture-router')).toHaveAttribute('aria-checked', 'true');
+	await page.keyboard.press('Escape');
 	await expect(tcp).toHaveAttribute('data-total', '200');
 	await page.goto('/datasets/playwright?startDate=2020-01-01&endDate=2020-01-02');
 	await expect(card.getByTestId('chart-render-state')).toHaveAttribute('data-state', 'empty');
diff --git a/apps/web/tests/e2e/dashboard-lazy-charts.spec.ts b/apps/web/tests/e2e/dashboard-lazy-charts.spec.ts
index a0a54d8..0327dbb 100644
--- a/apps/web/tests/e2e/dashboard-lazy-charts.spec.ts
+++ b/apps/web/tests/e2e/dashboard-lazy-charts.spec.ts
@@ -1,4 +1,5 @@
 import { expect, test } from '@playwright/test';
+import { setDateRange } from './toolbar-helpers';
 
 test('mounts chart cards near the viewport and keeps them mounted', async ({ page }) => {
 	await page.goto('/datasets/playwright?startDate=2025-03-01&endDate=2025-03-01&groupBy=5min');
@@ -38,7 +39,23 @@ test('mounts only the persisted first card on initial load', async ({ page }) =>
 		'false'
 	);
 	await expect.poll(() => requestedPaths.includes('/api/protocol/stats')).toBe(true);
-	expect(requestedPaths).not.toContain('/api/netflow/stats');
+	// The KPI row reads the traffic window up front; the deferred traffic card reuses it.
+	await expect
+		.poll(() => requestedPaths.filter((path) => path === '/api/netflow/stats').length)
+		.toBe(1);
+	for (const path of [
+		'/api/ip/stats',
+		'/api/netflow/characteristics',
+		'/api/netflow/spectrum-stats'
+	])
+		expect(requestedPaths).not.toContain(path);
+	await page.getByRole('button', { name: 'Load Traffic Overview chart' }).click();
+	await expect(page.locator('[data-chart-id="dashboard"]')).toHaveAttribute(
+		'data-chart-activated',
+		'true'
+	);
+	await expect(page.getByTestId('chart-card-state').first()).toBeAttached();
+	expect(requestedPaths.filter((path) => path === '/api/netflow/stats')).toHaveLength(1);
 });
 
 test('uses the latest filters when a deferred card mounts', async ({ page }) => {
@@ -50,14 +67,13 @@ test('uses the latest filters when a deferred card mounts', async ({ page }) =>
 	const ip = page.locator('[data-chart-id="ip"]');
 	await expect(ip).toHaveAttribute('data-chart-activated', 'false');
 
-	await page.locator('#endDate').fill('2025-03-02');
-	await page.locator('#endDate').press('Tab');
+	await setDateRange(page, { endDate: '2025-03-02' });
 	await expect.poll(() => new URL(page.url()).searchParams.get('endDate')).toBe('2025-03-02');
 
 	const requestPromise = page.waitForRequest(
 		(request) => new URL(request.url()).pathname === '/api/ip/stats'
 	);
-	await page.getByRole('button', { name: 'Load IP Address Breakdown chart' }).click();
+	await page.getByRole('button', { name: 'Load Unique IP Counts chart' }).click();
 	const request = await requestPromise;
 
 	expect(new URL(request.url()).searchParams.get('endDate')).toBe('1740988800');
diff --git a/apps/web/tests/e2e/dashboard-maad-measure.spec.ts b/apps/web/tests/e2e/dashboard-maad-measure.spec.ts
index 10cbaeb..c863263 100644
--- a/apps/web/tests/e2e/dashboard-maad-measure.spec.ts
+++ b/apps/web/tests/e2e/dashboard-maad-measure.spec.ts
@@ -1,4 +1,5 @@
 import { expect, test, type Page } from '@playwright/test';
+import { openMaadOptions, setMaadFamily, setMaadMeasure } from './toolbar-helpers';
 
 const DASHBOARD = '/datasets/playwright?startDate=2025-03-01&endDate=2025-03-01&groupBy=5min';
 
@@ -27,10 +28,9 @@ function waitForDimensions(page: Page, measure: string, ipVersion = '4') {
 
 test('switches dashboard MAAD views between addresses, packets and bytes', async ({ page }) => {
 	await page.goto(DASHBOARD);
-	await expect(measureControl(page).getByRole('button', { name: 'Addresses' })).toHaveAttribute(
-		'aria-pressed',
-		'true'
-	);
+	await expect(
+		page.getByRole('button', { name: 'MAAD: IPv4, Addresses', exact: true })
+	).toBeVisible();
 
 	const addressesRequest = waitForDimensions(page, 'addresses');
 	await activateCard(page, 'dimensions');
@@ -47,17 +47,17 @@ test('switches dashboard MAAD views between addresses, packets and bytes', async
 		['Bytes', 'bytes']
 	] as const) {
 		const request = waitForDimensions(page, measure);
-		await measureControl(page).getByRole('button', { name: label }).click();
+		await setMaadMeasure(page, label);
 		await request;
 		await expect.poll(() => new URL(page.url()).searchParams.get('measure')).toBe(measure);
 		await expect(dimensions.getByLabel('MAAD dimensions chart')).toBeVisible();
 		await expect(spectrum.getByTestId('chart-unavailable')).toContainText(
 			'only computed for the Addresses measure'
 		);
-		await expect(spectrum.getByRole('group', { name: 'Spectrum source' })).not.toBeAttached();
+		await expect(spectrum.getByRole('combobox', { name: /^Source:/ })).not.toBeAttached();
 	}
 
-	await measureControl(page).getByRole('button', { name: 'Addresses' }).click();
+	await setMaadMeasure(page, 'Addresses');
 	await expect.poll(() => new URL(page.url()).searchParams.has('measure')).toBe(false);
 	await expect(spectrum.getByTestId('chart-unavailable')).not.toBeAttached();
 	await expect(spectrum.getByLabel('Spectrum chart')).toBeVisible();
@@ -67,8 +67,10 @@ test('shares one MAAD address family control across both MAAD cards', async ({ p
 	await page.goto(DASHBOARD);
 	await activateCard(page, 'dimensions');
 	await activateCard(page, 'spectrum');
-	const familyControl = page.getByRole('group', { name: 'MAAD address family' });
-	await expect(familyControl).toHaveCount(1);
+	const dialog = await openMaadOptions(page);
+	await expect(page.getByRole('group', { name: 'MAAD address family' })).toHaveCount(1);
+	await page.keyboard.press('Escape');
+	await expect(dialog).not.toBeAttached();
 
 	const dimensionsRequest = waitForDimensions(page, 'addresses', '6');
 	const spectrumRequest = page.waitForRequest((request) => {
@@ -77,7 +79,7 @@ test('shares one MAAD address family control across both MAAD cards', async ({ p
 			url.pathname === '/api/netflow/spectrum-stats' && url.searchParams.get('ipVersion') === '6'
 		);
 	});
-	await familyControl.getByRole('button', { name: 'IPv6 (/23–/64)' }).click();
+	await setMaadFamily(page, 'IPv6 (/23–/64)');
 	await dimensionsRequest;
 	await spectrumRequest;
 });
@@ -88,20 +90,17 @@ test('charts one MAAD dimension and address side at a time', async ({ page }) =>
 	const dimensions = page.locator('[data-chart-id="dimensions"]');
 	const side = dimensions.getByRole('group', { name: 'MAAD address side' });
 	const order = dimensions.getByRole('group', { name: 'MAAD dimension' });
-	await expect(side.getByRole('button', { name: 'Source' })).toHaveAttribute(
-		'aria-pressed',
-		'true'
-	);
-	await expect(order.getByRole('button', { name: 'D1' })).toHaveAttribute('aria-pressed', 'true');
+	await expect(side.getByRole('radio', { name: 'Source' })).toHaveAttribute('aria-checked', 'true');
+	await expect(order.getByRole('radio', { name: 'D1' })).toHaveAttribute('aria-checked', 'true');
 
-	await side.getByRole('button', { name: 'Destination' }).click();
-	await order.getByRole('button', { name: 'D2' }).click();
-	await expect(side.getByRole('button', { name: 'Destination' })).toHaveAttribute(
-		'aria-pressed',
+	await side.getByRole('radio', { name: 'Destination' }).click();
+	await order.getByRole('radio', { name: 'D2' }).click();
+	await expect(side.getByRole('radio', { name: 'Destination' })).toHaveAttribute(
+		'aria-checked',
 		'true'
 	);
-	await expect(order.getByRole('button', { name: 'D2' })).toHaveAttribute('aria-pressed', 'true');
-	await expect(order.getByRole('button', { name: 'D1' })).toHaveAttribute('aria-pressed', 'false');
+	await expect(order.getByRole('radio', { name: 'D2' })).toHaveAttribute('aria-checked', 'true');
+	await expect(order.getByRole('radio', { name: 'D1' })).toHaveAttribute('aria-checked', 'false');
 	await expect(dimensions.getByLabel('MAAD dimensions chart')).toBeVisible();
 });
 
@@ -115,10 +114,9 @@ test('rejects an unknown measure param in favor of addresses', async ({ page })
 	});
 
 	await page.goto(`${DASHBOARD}&measure=flows`);
-	await expect(measureControl(page).getByRole('button', { name: 'Addresses' })).toHaveAttribute(
-		'aria-pressed',
-		'true'
-	);
+	await expect(
+		page.getByRole('button', { name: 'MAAD: IPv4, Addresses', exact: true })
+	).toBeVisible();
 	await activateCard(page, 'dimensions');
 	await expect.poll(() => requestedMeasures).toEqual(['addresses']);
 });
@@ -139,8 +137,8 @@ test('keeps the weighted measure when drilling down to a file', async ({ page })
 	expect(url.searchParams.get('dataset')).toBe('playwright');
 	expect(url.searchParams.get('measure')).toBe('bytes');
 	expect(new URL((await detailsRequest).url()).searchParams.get('measure')).toBe('bytes');
-	await expect(measureControl(page).getByRole('button', { name: 'Bytes' })).toHaveAttribute(
-		'aria-pressed',
+	await expect(measureControl(page).getByRole('radio', { name: 'Bytes' })).toHaveAttribute(
+		'aria-checked',
 		'true'
 	);
 
@@ -151,7 +149,7 @@ test('keeps the weighted measure when drilling down to a file', async ({ page })
 			requestUrl.searchParams.get('measure') === 'packets'
 		);
 	});
-	await measureControl(page).getByRole('button', { name: 'Packets' }).click();
+	await measureControl(page).getByRole('radio', { name: 'Packets' }).click();
 	await expect.poll(() => new URL(page.url()).searchParams.get('measure')).toBe('packets');
 	await packetsRequest;
 });
diff --git a/apps/web/tests/e2e/home.spec.ts b/apps/web/tests/e2e/home.spec.ts
index 618821c..b5c8842 100644
--- a/apps/web/tests/e2e/home.spec.ts
+++ b/apps/web/tests/e2e/home.spec.ts
@@ -4,7 +4,10 @@ test('home shell renders core navigation', async ({ page }) => {
 	await page.goto('/');
 
 	await expect(page.getByRole('link', { name: 'ATLANTIS' })).toBeVisible();
-	await expect(page.getByRole('link', { name: 'Home' })).toBeVisible();
+	await expect(page.getByRole('link', { name: 'Datasets', exact: true })).toHaveAttribute(
+		'aria-current',
+		'page'
+	);
 	await expect(page.getByRole('link', { name: 'Files' })).toBeVisible();
 	await expect(page).toHaveTitle(/ATLANTIS/i);
 });
diff --git a/apps/web/tests/e2e/maad-contract.spec.ts b/apps/web/tests/e2e/maad-contract.spec.ts
index c6f4849..c0bffd5 100644
--- a/apps/web/tests/e2e/maad-contract.spec.ts
+++ b/apps/web/tests/e2e/maad-contract.spec.ts
@@ -1,5 +1,6 @@
 import { expect, test } from '@playwright/test';
 import { activateChart, expectRendered, FIXTURE_DASHBOARD } from './chart-helpers';
+import { chooseSegment, setMaadMeasure } from './toolbar-helpers';
 
 test('MAAD dimensions render the selected side, order and weighted measure', async ({ page }) => {
 	await page.goto(FIXTURE_DASHBOARD);
@@ -11,10 +12,7 @@ test('MAAD dimensions render the selected side, order and weighted measure', asy
 		['D1', 0.88],
 		['D2', 0.85]
 	] as const) {
-		await card
-			.getByRole('group', { name: 'MAAD dimension' })
-			.getByRole('button', { name: order, exact: true })
-			.click();
+		await chooseSegment(card, 'MAAD dimension', order);
 		await expect
 			.poll(async () => Number(await series.getAttribute('data-max')))
 			.toBeCloseTo(value, 5);
@@ -22,21 +20,15 @@ test('MAAD dimensions render the selected side, order and weighted measure', asy
 			card.getByTestId('chart-axis').filter({ hasText: `Source ${order}` })
 		).toBeAttached();
 	}
-	await card
-		.getByRole('group', { name: 'MAAD address side' })
-		.getByRole('button', { name: 'Destination', exact: true })
-		.click();
+	await chooseSegment(card, 'MAAD address side', 'Destination');
 	await expect.poll(async () => Number(await series.getAttribute('data-max'))).toBeCloseTo(0.82, 5);
-	await card.getByRole('button', { name: 'D1', exact: true }).click();
+	await chooseSegment(card, 'MAAD dimension', 'D1');
 	for (const [measure, value] of [
 		['Addresses', 0.86],
 		['Packets', 0.69],
 		['Bytes', 0.61]
 	] as const) {
-		await page
-			.getByRole('group', { name: 'MAAD measure' })
-			.getByRole('button', { name: measure, exact: true })
-			.click();
+		await setMaadMeasure(page, measure);
 		await expect
 			.poll(async () => Number(await series.getAttribute('data-max')))
 			.toBeCloseTo(value, 5);
diff --git a/apps/web/tests/e2e/maad-internal-side.spec.ts b/apps/web/tests/e2e/maad-internal-side.spec.ts
index 29aaac3..e698c65 100644
--- a/apps/web/tests/e2e/maad-internal-side.spec.ts
+++ b/apps/web/tests/e2e/maad-internal-side.spec.ts
@@ -1,4 +1,5 @@
 import { expect, test, type Page } from '@playwright/test';
+import { chooseSegment, setDirection } from './toolbar-helpers';
 
 const DASHBOARD =
 	'/datasets/playwright-external-maad?startDate=2025-03-01&endDate=2025-03-01&groupBy=5min';
@@ -23,32 +24,20 @@ test('explains MAAD cards for internal address sides the product did not compute
 	await expect(dimensions.getByLabel('MAAD dimensions chart')).toBeVisible();
 	await expect(spectrum.getByLabel('Spectrum chart')).toBeVisible();
 
-	await dimensions
-		.getByRole('group', { name: 'MAAD address side' })
-		.getByRole('button', { name: 'Destination' })
-		.click();
+	await chooseSegment(dimensions, 'MAAD address side', 'Destination');
 	await expect(dimensions.getByTestId('chart-selection-unavailable')).toHaveText(
 		'MAAD is not computed for internal addresses. The destination addresses are internal for ingress traffic.'
 	);
 
-	await spectrum
-		.getByRole('group', { name: 'Spectrum address side' })
-		.getByRole('button', { name: 'Destination' })
-		.click();
+	await chooseSegment(spectrum, 'Spectrum address side', 'Destination');
 	await expect(spectrum.getByTestId('chart-selection-unavailable')).toContainText(
 		'not computed for internal addresses'
 	);
 
-	await spectrum
-		.getByRole('group', { name: 'Spectrum address side' })
-		.getByRole('button', { name: 'Source' })
-		.click();
+	await chooseSegment(spectrum, 'Spectrum address side', 'Source');
 	await expect(spectrum.getByLabel('Spectrum chart')).toBeVisible();
 
-	await page
-		.getByRole('group', { name: 'Traffic direction' })
-		.getByRole('button', { name: 'Lateral', exact: true })
-		.click();
+	await setDirection(page, 'Lateral');
 	await expect(dimensions.getByTestId('chart-unavailable')).toHaveText(
 		'MAAD is not computed for internal addresses. The source and destination addresses are both internal for lateral traffic.'
 	);
@@ -56,10 +45,7 @@ test('explains MAAD cards for internal address sides the product did not compute
 		'not computed for internal addresses'
 	);
 
-	await page
-		.getByRole('group', { name: 'Traffic direction' })
-		.getByRole('button', { name: 'Transit', exact: true })
-		.click();
+	await setDirection(page, 'Transit');
 	await expect(dimensions.getByLabel('MAAD dimensions chart')).toBeVisible();
 	await expect(dimensions.getByTestId('chart-selection-unavailable')).not.toBeAttached();
 });
diff --git a/apps/web/tests/e2e/maad-ip-version.spec.ts b/apps/web/tests/e2e/maad-ip-version.spec.ts
index d822d19..a0cb730 100644
--- a/apps/web/tests/e2e/maad-ip-version.spec.ts
+++ b/apps/web/tests/e2e/maad-ip-version.spec.ts
@@ -1,4 +1,5 @@
 import { expect, test } from '@playwright/test';
+import { setMaadFamily } from './toolbar-helpers';
 
 const IPV6_LABEL = 'IPv6 (/23–/64)';
 
@@ -15,16 +16,15 @@ test('keeps the IPv6 MAAD selection across drilldown, reload, and next file', as
 			new URL(request.url()).pathname === '/api/netflow/spectrum-stats' &&
 			new URL(request.url()).searchParams.get('ipVersion') === '6'
 	);
-	await familyControl.getByRole('button', { name: IPV6_LABEL }).click();
+	await setMaadFamily(page, IPV6_LABEL);
 	await expect.poll(() => new URL(page.url()).searchParams.get('ipVersion')).toBe('6');
 	await spectrumRequest;
 
 	await page.reload();
 	await page.locator('[data-chart-sentinel="spectrum"]').scrollIntoViewIfNeeded();
-	await expect(familyControl.getByRole('button', { name: IPV6_LABEL })).toHaveAttribute(
-		'aria-pressed',
-		'true'
-	);
+	await expect(
+		page.getByRole('button', { name: 'MAAD: IPv6, Addresses', exact: true })
+	).toBeVisible();
 
 	const dashboard = page.locator('[data-chart-id="dashboard"]');
 	await dashboard.scrollIntoViewIfNeeded();
@@ -34,15 +34,15 @@ test('keeps the IPv6 MAAD selection across drilldown, reload, and next file', as
 	expect(fileUrl.searchParams.get('dataset')).toBe('playwright');
 	expect(fileUrl.searchParams.get('ipVersion')).toBe('6');
 
-	const fileIpv6 = familyControl.getByRole('button', { name: IPV6_LABEL });
-	await expect(fileIpv6).toHaveAttribute('aria-pressed', 'true');
+	const fileIpv6 = familyControl.getByRole('radio', { name: IPV6_LABEL });
+	await expect(fileIpv6).toHaveAttribute('aria-checked', 'true');
 
 	await page.reload();
-	await expect(fileIpv6).toHaveAttribute('aria-pressed', 'true');
+	await expect(fileIpv6).toHaveAttribute('aria-checked', 'true');
 
 	await page
 		.getByRole('group', { name: 'MAAD measure' })
-		.getByRole('button', { name: 'Bytes' })
+		.getByRole('radio', { name: 'Bytes' })
 		.click();
 	await expect.poll(() => new URL(page.url()).searchParams.get('measure')).toBe('bytes');
 	expect(new URL(page.url()).searchParams.get('ipVersion')).toBe('6');
@@ -53,9 +53,9 @@ test('keeps the IPv6 MAAD selection across drilldown, reload, and next file', as
 	await expect.poll(() => new URL(page.url()).searchParams.get('ipVersion')).toBe('6');
 	expect(new URL(page.url()).searchParams.get('dataset')).toBe('playwright');
 	expect(new URL(page.url()).searchParams.get('measure')).toBe('bytes');
-	await expect(fileIpv6).toHaveAttribute('aria-pressed', 'true');
+	await expect(fileIpv6).toHaveAttribute('aria-checked', 'true');
 
-	await page.getByRole('button', { name: 'IPv4 (/8–/24)' }).click();
+	await familyControl.getByRole('radio', { name: 'IPv4 (/8–/24)' }).click();
 	await expect.poll(() => new URL(page.url()).searchParams.get('ipVersion')).toBeNull();
 	expect(new URL(page.url()).searchParams.get('measure')).toBe('bytes');
 });
@@ -66,8 +66,6 @@ test('falls back to IPv4 MAAD for an unknown ipVersion on the dashboard', async
 	);
 
 	await expect(
-		page
-			.getByRole('group', { name: 'MAAD address family' })
-			.getByRole('button', { name: 'IPv4 (/8–/24)' })
-	).toHaveAttribute('aria-pressed', 'true');
+		page.getByRole('button', { name: 'MAAD: IPv4, Addresses', exact: true })
+	).toBeVisible();
 });
diff --git a/apps/web/tests/e2e/navigation-baseline.spec.ts b/apps/web/tests/e2e/navigation-baseline.spec.ts
index 95ed357..87b5e44 100644
--- a/apps/web/tests/e2e/navigation-baseline.spec.ts
+++ b/apps/web/tests/e2e/navigation-baseline.spec.ts
@@ -3,8 +3,8 @@ import { expectRendered, FIXTURE_DASHBOARD, hoverChart } from './chart-helpers';
 
 test('dataset picker and navigation open the selected dataset and alerts', async ({ page }) => {
 	await page.goto('/');
-	const fixture = page.getByRole('button', { name: /Playwright Fixture/ });
-	const external = page.getByRole('button', { name: /Playwright External MAAD/ });
+	const fixture = page.getByRole('link', { name: 'Playwright Fixture', exact: true });
+	const external = page.getByRole('link', { name: 'Playwright External MAAD', exact: true });
 	await expect(fixture).toBeVisible();
 	await expect(external).toBeVisible();
 	await external.focus();
@@ -22,7 +22,7 @@ test('dataset picker and navigation open the selected dataset and alerts', async
 	).toBeVisible();
 	await page.getByRole('link', { name: 'Dashboard', exact: true }).click();
 	await expect(page).toHaveURL(/\/datasets\/playwright-external-maad$/);
-	await page.getByRole('link', { name: 'Home', exact: true }).click();
+	await page.getByRole('link', { name: 'ATLANTIS', exact: true }).click();
 	await fixture.click();
 	await expect(page).toHaveURL(/\/datasets\/playwright$/);
 });
@@ -62,10 +62,9 @@ test('file next navigation keeps filters and explains absent MAAD analyses', asy
 		if (/\/api\/netflow\/files\/.*\/details\?/.test(request.url())) requests.push(request.url());
 	});
 	await page.goto('/netflow/files/202503010200?dataset=playwright&measure=bytes');
-	await expect(page.getByRole('button', { name: 'Bytes', exact: true })).toHaveAttribute(
-		'aria-pressed',
-		'true'
-	);
+	await expect(
+		page.getByRole('group', { name: 'MAAD measure' }).getByRole('radio', { name: 'Bytes' })
+	).toHaveAttribute('aria-checked', 'true');
 	await expectRendered(page.locator('main'), 2);
 	await expect.poll(() => requests.length).toBe(1);
 	await expect(
@@ -109,7 +108,7 @@ for (const [path, status, title] of [
 		await expect(page.getByRole('heading', { name: status, exact: true })).toBeVisible();
 		await expect(page.getByRole('heading', { name: title, exact: true })).toBeVisible();
 		await page.getByRole('link', { name: 'Home', exact: true }).last().click();
-		await expect(page.getByRole('button', { name: /Playwright Fixture/ })).toBeVisible();
+		await expect(page.getByRole('link', { name: 'Playwright Fixture', exact: true })).toBeVisible();
 	});
 }
 
diff --git a/apps/web/tests/e2e/redesign.spec.ts b/apps/web/tests/e2e/redesign.spec.ts
deleted file mode 100644
index 18a66dd..0000000
--- a/apps/web/tests/e2e/redesign.spec.ts
+++ /dev/null
@@ -1,521 +0,0 @@
-import { expect, test } from '@playwright/test';
-import type { NetflowFileDetailsResponse } from '../../src/lib/types/types';
-import { expectRendered, FIXTURE_DASHBOARD } from './chart-helpers';
-
-for (const width of [390, 1280]) {
-	test(`keyboard layout controls preserve focus, order and plot size at ${width}px`, async ({
-		page
-	}) => {
-		await page.setViewportSize({ width, height: 900 });
-		await page.goto(FIXTURE_DASHBOARD);
-		const card = page.locator('[data-chart-id="dashboard"]');
-		await expectRendered(card);
-		const frame = card.locator('.chart-frame');
-		const initial = await frame.evaluate((node) => node.getBoundingClientRect().height);
-		await page.getByRole('button', { name: 'Make Traffic Overview taller' }).focus();
-		await page.keyboard.press('Enter');
-		await expect
-			.poll(() => frame.evaluate((node) => node.getBoundingClientRect().height))
-			.toBe(initial + 80);
-		await expectRendered(card);
-		await page.getByRole('button', { name: 'Make Traffic Overview shorter' }).focus();
-		await page.keyboard.press('Enter');
-		await expect
-			.poll(() => frame.evaluate((node) => node.getBoundingClientRect().height))
-			.toBe(initial);
-		await page.getByRole('button', { name: 'Move Traffic Overview down' }).focus();
-		await page.keyboard.press('Enter');
-		await expect(page.locator('[data-chart-id]').first()).toHaveAttribute(
-			'data-chart-id',
-			'characteristics'
-		);
-		await expect(
-			page.getByRole('button', { name: 'Move Traffic Overview down', exact: true })
-		).toBeFocused();
-		await page.reload();
-		await expect(page.locator('[data-chart-id]').first()).toHaveAttribute(
-			'data-chart-id',
-			'characteristics'
-		);
-		await expect(page.locator('[data-chart-id="characteristics"]')).toHaveAttribute(
-			'data-chart-activated',
-			'true'
-		);
-		const down = card.getByRole('button', { name: 'Move Traffic Overview down', exact: true });
-		const up = card.getByRole('button', { name: 'Move Traffic Overview up', exact: true });
-		await down.focus();
-		for (let position = 2; position < 8; position++) {
-			await page.keyboard.press('Enter');
-			await expect(page.locator('[data-chart-card]').nth(position)).toHaveAttribute(
-				'data-chart-id',
-				'dashboard'
-			);
-			await expect(position === 7 ? up : down).toBeFocused();
-		}
-		await expect(down).toBeDisabled();
-		for (let position = 6; position >= 0; position--) {
-			await page.keyboard.press('Enter');
-			await expect(page.locator('[data-chart-card]').nth(position)).toHaveAttribute(
-				'data-chart-id',
-				'dashboard'
-			);
-			await expect(position === 0 ? down : up).toBeFocused();
-		}
-		await expect(up).toBeDisabled();
-	});
-}
-
-for (const width of [390, 768, 1280, 1920]) {
-	test(`file summary and analysis labels fit at ${width}px`, async ({ page }) => {
-		await page.setViewportSize({ width, height: 900 });
-		await page.goto('/netflow/files/202503010200?dataset=playwright');
-		await expectRendered(page.locator('main'), 4);
-		await expect(page).toHaveTitle('nfcapd.202503010200 · ATLANTIS');
-		for (const side of ['Source', 'Destination']) {
-			for (const kind of ['Structure', 'Spectrum']) {
-				const heading = page
-					.getByRole('heading', { name: `${side} · ${kind}`, exact: true })
-					.first();
-				await heading.scrollIntoViewIfNeeded();
-				await expect(heading).toBeVisible();
-			}
-		}
-		const shell = page.locator('.app-shell__main');
-		expect(await shell.evaluate((node) => node.scrollWidth - node.clientWidth)).toBeLessThanOrEqual(
-			1
-		);
-	});
-}
-
-test('reversed dates explain the empty window and recover after correction', async ({ page }) => {
-	await page.goto('/datasets/playwright?startDate=2025-03-02&endDate=2025-03-01');
-	await expect(page.locator('[data-chart-id="dashboard"]')).toHaveAttribute(
-		'data-chart-activated',
-		'true'
-	);
-	await expect(page.getByRole('alert')).toHaveText('Start Date must be on or before End Date.');
-	await page.getByLabel('Start Date', { exact: true }).fill('2025-03-01');
-	await page.getByLabel('Start Date', { exact: true }).press('Tab');
-	await expect(
-		page.getByText('Start Date must be on or before End Date.', { exact: true })
-	).toHaveCount(0);
-	await expectRendered(page.locator('[data-chart-id="dashboard"]'));
-});
-
-for (const width of [390, 768]) {
-	test(`filter sheet keeps selection and keyboard focus at ${width}px`, async ({ page }) => {
-		await page.setViewportSize({ width, height: 900 });
-		await page.goto(FIXTURE_DASHBOARD);
-		await expectRendered(page.locator('[data-chart-id="dashboard"]'));
-		const trigger = page.getByRole('button', { name: 'Open filters', exact: true });
-		await trigger.focus();
-		await page.keyboard.press('Enter');
-		const sheet = page.getByRole('dialog', { name: 'Filters', exact: true });
-		await expect(sheet).toBeVisible();
-		await sheet
-			.getByRole('group', { name: 'Traffic direction' })
-			.getByRole('button', { name: 'Ingress', exact: true })
-			.click();
-		await expect.poll(() => new URL(page.url()).searchParams.get('direction')).toBe('ingress');
-		await sheet.getByRole('checkbox', { name: 'fixture-router', exact: true }).uncheck();
-		await page.keyboard.press('Escape');
-		await expect(sheet).not.toBeAttached();
-		await expect(trigger).toBeFocused();
-		await expect(page.locator('[data-chart-id="dashboard"]')).toContainText(
-			'Select at least one source'
-		);
-		await trigger.click();
-		await expect(
-			sheet.getByRole('checkbox', { name: 'fixture-router', exact: true })
-		).not.toBeChecked();
-		await sheet.getByRole('checkbox', { name: 'fixture-router', exact: true }).check();
-		await sheet.getByRole('button', { name: 'Close filters', exact: true }).click();
-		await expect(trigger).toBeFocused();
-		await expectRendered(page.locator('[data-chart-id="dashboard"]'));
-		await trigger.click();
-		await page.setViewportSize({ width: 1280, height: 900 });
-		await expect(page.getByRole('complementary', { name: 'Filters', exact: true })).toBeVisible();
-		await expect(sheet).not.toBeAttached();
-		await page.setViewportSize({ width, height: 900 });
-		await expect(sheet).not.toBeAttached();
-		await expect(trigger).toHaveAttribute('aria-expanded', 'false');
-	});
-}
-
-test('collapsed desktop rail preserves sources and URL controls', async ({ page }) => {
-	await page.goto(FIXTURE_DASHBOARD);
-	await expectRendered(page.locator('[data-chart-id="dashboard"]'));
-	const rail = page.getByRole('complementary', { name: 'Filters', exact: true });
-	await rail
-		.getByRole('group', { name: 'MAAD address family' })
-		.getByRole('button', { name: 'IPv6 (/23–/64)', exact: true })
-		.click();
-	await rail.getByRole('checkbox', { name: 'fixture-router', exact: true }).uncheck();
-	await page.getByRole('button', { name: 'Hide filters', exact: true }).click();
-	await expect(rail).not.toBeAttached();
-	await expect(page.locator('.filter-summary')).toContainText('0/1 sources');
-	await expect(page.locator('.filter-summary')).toContainText('IPv6');
-	await page.getByRole('button', { name: 'Show filters', exact: true }).click();
-	await expect(
-		rail.getByRole('checkbox', { name: 'fixture-router', exact: true })
-	).not.toBeChecked();
-	await expect(
-		rail
-			.getByRole('group', { name: 'MAAD address family' })
-			.getByRole('button', { name: 'IPv6 (/23–/64)', exact: true })
-	).toHaveAttribute('aria-pressed', 'true');
-	await rail.getByRole('checkbox', { name: 'fixture-router', exact: true }).check();
-	await expectRendered(page.locator('[data-chart-id="dashboard"]'));
-});
-
-test('Escape cancels the first filter sheet open while its module is loading', async ({ page }) => {
-	await page.setViewportSize({ width: 390, height: 900 });
-	await page.goto(FIXTURE_DASHBOARD);
-	await expectRendered(page.locator('[data-chart-id="dashboard"]'));
-	let release!: () => void;
-	let requested!: () => void;
-	const pending = new Promise<void>((resolve) => (release = resolve));
-	const started = new Promise<void>((resolve) => (requested = resolve));
-	await page.route('**/_app/immutable/**/*.js', async (route) => {
-		requested();
-		await pending;
-		await route.continue();
-	});
-	const trigger = page.getByRole('button', { name: 'Open filters', exact: true });
-	try {
-		await trigger.focus();
-		await trigger.press('Enter');
-		await started;
-		await expect(trigger).toHaveAttribute('aria-expanded', 'true');
-		await page.keyboard.press('Escape');
-		await expect(trigger).toHaveAttribute('aria-expanded', 'false');
-	} finally {
-		release();
-	}
-	await page.waitForLoadState('networkidle');
-	await expect(page.getByRole('dialog', { name: 'Filters', exact: true })).not.toBeAttached();
-	await expect(trigger).toBeFocused();
-	await trigger.click();
-	await expect(page.getByRole('dialog', { name: 'Filters', exact: true })).toBeVisible();
-	await page.keyboard.press('Escape');
-	await expect(trigger).toBeFocused();
-});
-
-for (const width of [390, 1280]) {
-	test(`metric disclosure supports independent selections and focus return at ${width}px`, async ({
-		page
-	}) => {
-		await page.setViewportSize({ width, height: 900 });
-		await page.goto(FIXTURE_DASHBOARD);
-		const card = page.locator('[data-chart-id="dashboard"]');
-		const state = (await expectRendered(card)).first();
-		const trigger = card.getByRole('button', { name: 'NetFlow metrics', exact: true });
-		await trigger.focus();
-		await page.keyboard.press('Enter');
-		const dialog = page.getByRole('dialog', { name: 'NetFlow metrics', exact: true });
-		await expect(dialog.getByRole('checkbox')).toHaveCount(12);
-		await dialog.getByRole('checkbox', { name: 'Flows TCP', exact: true }).uncheck();
-		await dialog.getByRole('checkbox', { name: 'Bytes UDP', exact: true }).check();
-		await expect(state).toHaveAttribute('data-series-count', '4');
-		await expect(
-			card.getByTestId('chart-series').filter({ hasText: /^Bytes UDP$/ })
-		).toHaveAttribute('data-visible', 'true');
-		await page.keyboard.press('Escape');
-		await expect(dialog).not.toBeAttached();
-		await expect(trigger).toBeFocused();
-		await trigger.click();
-		await expect(
-			dialog.getByRole('checkbox', { name: 'Flows TCP', exact: true })
-		).not.toBeChecked();
-		await expect(dialog.getByRole('checkbox', { name: 'Bytes UDP', exact: true })).toBeChecked();
-		await dialog.getByRole('button', { name: 'Close netflow metrics', exact: true }).click();
-		await expect(trigger).toBeFocused();
-	});
-}
-
-test('large byte totals remain on one line in the 1280px file sidebar', async ({ page }) => {
-	await page.setViewportSize({ width: 1280, height: 900 });
-	await page.route('**/api/netflow/files/*/details?**', async (route) => {
-		const response = await route.fetch();
-		const body: NetflowFileDetailsResponse = await response.json();
-		body.routers[0].summary.bytes = 160824538431;
-		await route.fulfill({ response, json: body });
-	});
-	await page.goto('/netflow/files/202503010200?dataset=playwright');
-	const total = page.getByText('Total: 160,824,538,431', { exact: true });
-	await expect(total).toBeVisible();
-	expect(
-		await total.evaluate((node) => {
-			const range = document.createRange();
-			range.selectNodeContents(node);
-			return range.getClientRects().length;
-		})
-	).toBe(1);
-});
-
-test('fractional file plots render once and follow rail and viewport resizing', async ({
-	page
-}) => {
-	await page.addInitScript(() => {
-		new MutationObserver((records) => {
-			for (const record of records) {
-				const node = record.target;
-				if (node instanceof HTMLElement && node.dataset.testid === 'chart-render-state') {
-					node.dataset.testRenderCount = String(Number(node.dataset.testRenderCount ?? 0) + 1);
-				}
-			}
-		}).observe(document, {
-			subtree: true,
-			attributes: true,
-			attributeFilter: ['data-series-count']
-		});
-	});
-	await page.setViewportSize({ width: 1280, height: 900 });
-	await page.goto('/netflow/files/202503010200?dataset=playwright');
-	await expectRendered(page.locator('main'), 4);
-	await page.evaluate(
-		() => new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)))
-	);
-	const summaries = page.getByTestId('chart-render-state');
-	for (const summary of await summaries.all()) {
-		await expect(summary).toHaveAttribute('data-test-render-count', '1');
-	}
-	for (const name of ['Hide file options', 'Show file options']) {
-		const before = await page.getByTestId('chart-surface').first().boundingBox();
-		await page.getByRole('button', { name, exact: true }).click();
-		await expect
-			.poll(async () => (await page.getByTestId('chart-surface').first().boundingBox())?.width)
-			.not.toBe(before?.width);
-	}
-	await page.setViewportSize({ width: 768, height: 900 });
-	await expect(page.getByRole('button', { name: 'Open file options', exact: true })).toBeVisible();
-	for (const surface of await page.getByTestId('chart-surface').all()) {
-		await expect
-			.poll(() =>
-				surface.evaluate((node) => {
-					if (!(node instanceof SVGSVGElement)) return Infinity;
-					return Math.abs(node.viewBox.baseVal.width - node.parentElement!.clientWidth);
-				})
-			)
-			.toBeLessThanOrEqual(1);
-	}
-});
-
-test('phone quick-selection labels fit inside their separate buttons', async ({ page }) => {
-	await page.setViewportSize({ width: 390, height: 900 });
-	await page.goto(FIXTURE_DASHBOARD);
-	await expectRendered(page.locator('[data-chart-id="dashboard"]'));
-	for (const name of ['Select All', 'Select None']) {
-		const button = page
-			.locator('[data-chart-id="dashboard"]')
-			.getByRole('button', { name, exact: true });
-		await expect(button).toBeVisible();
-		expect(
-			await button.evaluate((node) => {
-				const range = document.createRange();
-				range.selectNodeContents(node);
-				const bounds = node.getBoundingClientRect();
-				return [...range.getClientRects()].every(
-					(rect) => rect.left >= bounds.left && rect.right <= bounds.right
-				);
-			})
-		).toBe(true);
-		await button.click();
-	}
-	await expect(
-		page.locator('[data-chart-id="dashboard"]').getByTestId('chart-render-state')
-	).toHaveAttribute('data-state', 'empty');
-});
-
-for (const width of [390, 768, 1280, 1920]) {
-	test(`toolbar controls align and fit at ${width}px`, async ({ page }) => {
-		await page.setViewportSize({ width, height: 900 });
-		await page.goto(FIXTURE_DASHBOARD);
-		await expectRendered(page.locator('[data-chart-id="dashboard"]'));
-		const toolbar = page.locator('.console-toolbar');
-		const geometry = await toolbar.evaluate((node) => {
-			const bounds = node.getBoundingClientRect();
-			const rect = (selector: string) => {
-				const element = node.querySelector(selector)!;
-				const box = element.getBoundingClientRect();
-				return { x: box.x, right: box.right, top: box.top, height: box.height, bottom: box.bottom };
-			};
-			return {
-				left: bounds.left,
-				right: bounds.right,
-				start: rect('#startDate'),
-				end: rect('#endDate'),
-				toggle: rect('.rail-toggle'),
-				reset: rect('.reset-view'),
-				chips: Array.from(node.querySelectorAll('.filter-summary span'), (chip) => {
-					const box = chip.getBoundingClientRect();
-					return { left: box.left, right: box.right, top: box.top };
-				})
-			};
-		});
-		expect(geometry.start.height).toBe(36);
-		for (const control of [geometry.end, geometry.toggle, geometry.reset]) {
-			expect(control.height).toBe(geometry.start.height);
-			expect(control.x).toBeGreaterThanOrEqual(geometry.left);
-			expect(control.right).toBeLessThanOrEqual(geometry.right);
-		}
-		expect(geometry.end.top).toBe(geometry.start.top);
-		expect(geometry.toggle.top).toBe(geometry.reset.top);
-		if (width >= 640) expect(geometry.start.top).toBe(geometry.toggle.top);
-		for (const chip of geometry.chips) {
-			expect(chip.left).toBeGreaterThanOrEqual(geometry.left);
-			expect(chip.right).toBeLessThanOrEqual(geometry.right);
-			expect(chip.top).toBeGreaterThanOrEqual(geometry.start.bottom);
-		}
-	});
-}
-
-for (const width of [1280, 1920]) {
-	test(`compact filter rail reserves plot width and room for three sources at ${width}px`, async ({
-		page
-	}) => {
-		await page.setViewportSize({ width, height: 800 });
-		await page.goto(FIXTURE_DASHBOARD);
-		await expectRendered(page.locator('[data-chart-id="dashboard"]'));
-		const rail = page.getByRole('complementary', { name: 'Filters', exact: true });
-		const box = await rail.boundingBox();
-		expect(box!.width).toBe(200);
-		for (const name of ['Granularity', 'Traffic direction', 'MAAD measure']) {
-			const group = rail.getByRole('group', { name, exact: true });
-			const geometry = await group.evaluate((node) =>
-				Array.from(node.querySelectorAll('button'), (button) => {
-					const box = button.getBoundingClientRect();
-					return { top: box.top, left: box.left, right: box.right, height: box.height };
-				})
-			);
-			expect(new Set(geometry.map((button) => button.top)).size).toBeGreaterThan(1);
-			for (const button of geometry) {
-				expect(button.height).toBe(32);
-				expect(button.left).toBeGreaterThanOrEqual(box!.x);
-				expect(button.right).toBeLessThanOrEqual(box!.x + box!.width);
-			}
-		}
-		const maad = await rail.getByRole('group', { name: 'MAAD options', exact: true }).boundingBox();
-		const sources = await rail.locator('.router-filter label').all();
-		for (const source of sources) expect((await source.boundingBox())!.height).toBe(32);
-		const extraSourceRows = 3 - sources.length;
-		expect(maad!.y + maad!.height + extraSourceRows * (32 + 4)).toBeLessThanOrEqual(800);
-		const plot = await page.locator('[data-chart-id="dashboard"]').boundingBox();
-		expect(plot!.width).toBeGreaterThan(width - 280);
-	});
-}
-
-for (const width of [390, 768, 1280, 1920]) {
-	for (const theme of ['light', 'dark'] as const) {
-		test(`resized panels stay packed at ${width}px in ${theme}`, async ({ page }) => {
-			await page.setViewportSize({ width, height: 900 });
-			await page.emulateMedia({ colorScheme: theme });
-			await page.addInitScript(
-				(dark) => localStorage.setItem('dark-mode', String(dark)),
-				theme === 'dark'
-			);
-			await page.goto(FIXTURE_DASHBOARD);
-			const cards = page.locator('[data-chart-card]');
-			for (const card of await cards.all()) {
-				await card.scrollIntoViewIfNeeded();
-				await expect(card).toHaveAttribute('data-chart-activated', 'true');
-				const id = await card.getAttribute('data-chart-id');
-				await expectRendered(card, id === 'characteristics' ? 2 : 1);
-			}
-			const expectPacked = async () => {
-				const geometry = await cards.evaluateAll((nodes) =>
-					nodes.map((node) => {
-						const card = node.getBoundingClientRect();
-						const content = node.lastElementChild!.getBoundingClientRect();
-						return {
-							top: card.top,
-							bottom: card.bottom,
-							left: card.left,
-							right: card.right,
-							contentBottom: content.bottom
-						};
-					})
-				);
-				for (let index = 0; index < geometry.length; index++) {
-					const card = geometry[index];
-					expect(Math.abs(card.bottom - card.contentBottom)).toBeLessThanOrEqual(1);
-					if (index > 0) {
-						expect(card.top - geometry[index - 1].bottom).toBeCloseTo(16, 0);
-						expect(card.left).toBe(geometry[0].left);
-						expect(card.right).toBe(geometry[0].right);
-					}
-				}
-			};
-			for (const card of (await cards.all()).slice(0, -1)) {
-				const shorter = card.getByRole('button', { name: /^Make .* shorter$/ });
-				await shorter.click();
-				await shorter.click();
-				await expectPacked();
-			}
-			for (const card of (await cards.all()).slice(0, -1).reverse()) {
-				await card.getByRole('button', { name: /^Make .* taller$/ }).click();
-				await expectPacked();
-			}
-			await page.getByRole('button', { name: 'Move Traffic Overview down', exact: true }).click();
-			await expectPacked();
-		});
-	}
-}
-
-test('native and keyboard resizing share the packed panel height', async ({ page }) => {
-	await page.setViewportSize({ width: 1280, height: 1000 });
-	await page.goto(FIXTURE_DASHBOARD);
-	const card = page.locator('[data-chart-id="dashboard"]');
-	await expectRendered(card);
-	const frame = card.locator('.chart-frame');
-	const initial = (await frame.boundingBox())!;
-	await page.mouse.move(initial.x + initial.width - 3, initial.y + initial.height - 3);
-	await page.mouse.down();
-	await page.mouse.move(initial.x + initial.width - 3, initial.y + initial.height - 103, {
-		steps: 5
-	});
-	await page.mouse.up();
-	await expect
-		.poll(() => frame.evaluate((node) => node.getBoundingClientRect().height))
-		.toBe(initial.height - 100);
-	await card.getByRole('button', { name: 'Make Traffic Overview shorter', exact: true }).focus();
-	await page.keyboard.press('Enter');
-	await expect
-		.poll(() => frame.evaluate((node) => node.getBoundingClientRect().height))
-		.toBe(initial.height - 180);
-	await card.getByRole('button', { name: 'Make Traffic Overview taller', exact: true }).focus();
-	await page.keyboard.press('Enter');
-	await expect
-		.poll(() => frame.evaluate((node) => node.getBoundingClientRect().height))
-		.toBe(initial.height - 100);
-	const gap = await page
-		.locator('[data-chart-card]')
-		.evaluateAll(
-			(nodes) => nodes[1].getBoundingClientRect().top - nodes[0].getBoundingClientRect().bottom
-		);
-	expect(gap).toBe(16);
-	await expectRendered(card);
-});
-
-test.describe('coarse pointer filter geometry', () => {
-	test.use({ hasTouch: true });
-	for (const width of [390, 1280]) {
-		test(`keeps 44px filter targets at ${width}px`, async ({ page }) => {
-			await page.setViewportSize({ width, height: 800 });
-			await page.goto(FIXTURE_DASHBOARD);
-			await expectRendered(page.locator('[data-chart-id="dashboard"]'));
-			expect(await page.evaluate(() => matchMedia('(pointer: coarse)').matches)).toBe(true);
-			if (width < 1024)
-				await page.getByRole('button', { name: 'Open filters', exact: true }).click();
-			const filters =
-				width < 1024
-					? page.getByRole('dialog', { name: 'Filters', exact: true })
-					: page.getByRole('complementary', { name: 'Filters', exact: true });
-			const heights = await filters
-				.locator(".primary-filters [role='group'] button, .primary-filters .router-filter label")
-				.evaluateAll((nodes) => nodes.map((node) => node.getBoundingClientRect().height));
-			expect(heights.length).toBeGreaterThan(10);
-			for (const height of heights) expect(height).toBeGreaterThanOrEqual(44);
-		});
-	}
-});
diff --git a/apps/web/tests/e2e/spectrum-chart.spec.ts b/apps/web/tests/e2e/spectrum-chart.spec.ts
index f5ca6c3..0fe795c 100644
--- a/apps/web/tests/e2e/spectrum-chart.spec.ts
+++ b/apps/web/tests/e2e/spectrum-chart.spec.ts
@@ -1,6 +1,16 @@
 import { expect, test, type Page } from '@playwright/test';
 
 import { rendered, chartTarget, hoverChart } from './chart-helpers';
+import {
+	chooseSegment,
+	resetFilters,
+	setDateRange,
+	setDirection,
+	setInterval,
+	setMaadFamily,
+	setMaadMeasure,
+	setSource
+} from './toolbar-helpers';
 
 const DASHBOARD = '/datasets/playwright?startDate=2025-03-01&endDate=2025-03-01&groupBy=5min';
 
@@ -19,31 +29,24 @@ test('renders a singleton bucket and recovers from cached empty, unavailable and
 	const errors: string[] = [];
 	page.on('pageerror', (error) => errors.push(error.message));
 	const { card, surface } = await openSpectrum(page);
-	const family = page.getByRole('group', { name: 'MAAD address family' });
 	for (let attempt = 0; attempt < 2; attempt += 1) {
-		await family.getByRole('button', { name: 'IPv6 (/23–/64)' }).click();
+		await setMaadFamily(page, 'IPv6 (/23–/64)');
 		await expect(card).toContainText('No source spectrum data');
-		await family.getByRole('button', { name: 'IPv4 (/8–/24)' }).click();
+		await setMaadFamily(page, 'IPv4 (/8–/24)');
 		await rendered(surface);
 		await hoverChart(page, surface);
 		await expect(card.getByRole('tooltip')).toContainText('2025-03-01 02:00');
 	}
 	for (const measure of ['Packets', 'Bytes']) {
-		await page
-			.getByRole('group', { name: 'MAAD measure' })
-			.getByRole('button', { name: measure })
-			.click();
+		await setMaadMeasure(page, measure);
 		await expect(card.getByTestId('chart-unavailable')).toBeVisible();
 		await expect(card.getByRole('tooltip')).not.toBeAttached();
-		await page
-			.getByRole('group', { name: 'MAAD measure' })
-			.getByRole('button', { name: 'Addresses' })
-			.click();
+		await setMaadMeasure(page, 'Addresses');
 		await rendered(surface);
 	}
-	await page.getByRole('checkbox', { name: 'fixture-router', exact: true }).uncheck();
+	await setSource(page, 'fixture-router', false);
 	await expect(card).toContainText('Select at least one source');
-	await page.getByRole('checkbox', { name: 'fixture-router', exact: true }).check();
+	await setSource(page, 'fixture-router', true);
 	await rendered(surface);
 	await hoverChart(page, surface);
 	await expect(card.getByRole('tooltip')).toBeVisible();
@@ -55,30 +58,24 @@ test('keeps rendered points and hover across granularity, direction, side, date
 }) => {
 	const { card, surface } = await openSpectrum(page);
 	for (const granularity of ['Day', 'Hour', '30 min', '10 min', '5 min']) {
-		await page.getByRole('button', { name: granularity, exact: true }).click();
+		await setInterval(page, granularity);
 		await rendered(surface);
 		await hoverChart(page, surface);
 		await expect(card.getByRole('tooltip')).toContainText('2025-03-01');
 	}
 	for (const direction of ['Ingress', 'Egress', 'Lateral', 'Transit', 'All']) {
-		await page
-			.getByRole('group', { name: 'Traffic direction' })
-			.getByRole('button', { name: direction, exact: true })
-			.click();
+		await setDirection(page, direction);
 		await rendered(surface);
 	}
-	await card.getByRole('button', { name: 'Destination', exact: true }).click();
+	await chooseSegment(card, 'Spectrum address side', 'Destination');
 	await rendered(surface);
-	await page.getByLabel('End Date', { exact: true }).fill('2025-03-02');
-	await page.getByLabel('End Date', { exact: true }).press('Tab');
+	await setDateRange(page, { endDate: '2025-03-02' });
 	await rendered(surface);
-	await page.getByLabel('Start Date', { exact: true }).fill('2025-03-02');
-	await page.getByLabel('Start Date', { exact: true }).press('Tab');
+	await setDateRange(page, { startDate: '2025-03-02' });
 	await expect(card).toContainText('No destination spectrum data');
-	await page.getByLabel('Start Date', { exact: true }).fill('2025-03-01');
-	await page.getByLabel('Start Date', { exact: true }).press('Tab');
+	await setDateRange(page, { startDate: '2025-03-01' });
 	await rendered(surface);
-	await page.getByRole('button', { name: 'Reset View' }).click();
+	await resetFilters(page);
 	await rendered(surface);
 	await hoverChart(page, surface);
 	await expect(card.getByRole('tooltip')).toBeVisible();
@@ -99,12 +96,12 @@ test('aborts an older request when a newer filter is selected', async ({ page })
 			request.url().includes('/spectrum-stats?') &&
 			new URL(request.url()).searchParams.get('granularity') === '1h'
 	);
-	await page.getByRole('button', { name: 'Hour', exact: true }).click();
+	await setInterval(page, 'Hour');
 	const pending = await oldRequest;
 	const aborted = page.waitForEvent('requestfailed', {
 		predicate: (request) => request === pending
 	});
-	await page.getByRole('button', { name: '10 min', exact: true }).click();
+	await setInterval(page, '10 min');
 	await rendered(surface);
 	const state = surface.locator('..').getByTestId('chart-render-state');
 	const snapshot = () =>
@@ -174,13 +171,13 @@ test('file spectrum hover describes only a spectrum point after measure and fami
 	await page.goto('/netflow/files/202503010200?dataset=playwright');
 	const surface = page.getByLabel('Multifractal spectrum chart').first();
 	await rendered(surface);
-	await page.getByRole('button', { name: 'Packets', exact: true }).click();
+	await page.getByRole('radio', { name: 'Packets', exact: true }).click();
 	await expect(surface).not.toBeAttached();
-	await page.getByRole('button', { name: 'Addresses', exact: true }).click();
+	await page.getByRole('radio', { name: 'Addresses', exact: true }).click();
 	await rendered(surface);
-	await page.getByRole('button', { name: 'IPv6 (/23–/64)' }).click();
+	await page.getByRole('radio', { name: 'IPv6 (/23–/64)' }).click();
 	await expect(surface).not.toBeAttached();
-	await page.getByRole('button', { name: 'IPv4 (/8–/24)' }).click();
+	await page.getByRole('radio', { name: 'IPv4 (/8–/24)' }).click();
 	await rendered(surface);
 	await surface.scrollIntoViewIfNeeded();
 	await hoverChart(page, surface);
diff --git a/apps/web/tests/e2e/toolbar-helpers.ts b/apps/web/tests/e2e/toolbar-helpers.ts
new file mode 100644
index 0000000..bc3fef7
--- /dev/null
+++ b/apps/web/tests/e2e/toolbar-helpers.ts
@@ -0,0 +1,133 @@
+import { expect, type Locator, type Page } from '@playwright/test';
+
+function escape(text: string): string {
+	return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+/** Open a toolbar popover by its trigger's accessible-name prefix and return the dialog. */
+export async function openToolbarPopover(
+	page: Page,
+	trigger: RegExp,
+	dialogName: string
+): Promise<Locator> {
+	const dialog = page.getByRole('dialog', { name: dialogName, exact: true });
+	if (!(await dialog.isVisible())) await page.getByRole('button', { name: trigger }).click();
+	await expect(dialog).toBeVisible();
+	return dialog;
+}
+
+export async function closePopover(page: Page, dialog: Locator): Promise<void> {
+	await page.keyboard.press('Escape');
+	await expect(dialog).not.toBeAttached();
+}
+
+async function chooseSelectOption(page: Page, label: string, option: string) {
+	await page.getByRole('combobox', { name: new RegExp(`^${escape(label)}:`) }).click();
+	await page.getByRole('option', { name: new RegExp(`^${escape(option)}(\\s|$)`) }).click();
+	await expect(page.getByRole('listbox')).not.toBeAttached();
+}
+
+export function intervalSelect(page: Page): Locator {
+	return page.getByRole('combobox', { name: /^Interval:/ });
+}
+
+export async function setInterval(page: Page, option: string): Promise<void> {
+	await chooseSelectOption(page, 'Interval', option);
+	await expect(intervalSelect(page)).toHaveAccessibleName(`Interval: ${option}`);
+}
+
+export function directionSelect(page: Page): Locator {
+	return page.getByRole('combobox', { name: /^Direction:/ });
+}
+
+export async function setDirection(page: Page, option: string): Promise<void> {
+	await chooseSelectOption(page, 'Direction', option);
+	await expect(directionSelect(page)).toHaveAccessibleName(`Direction: ${option}`);
+}
+
+export async function openMaadOptions(page: Page): Promise<Locator> {
+	return openToolbarPopover(page, /^MAAD:/, 'MAAD options');
+}
+
+export async function setMaadMeasure(page: Page, measure: string): Promise<void> {
+	const dialog = await openMaadOptions(page);
+	const control = dialog.getByRole('group', { name: 'MAAD measure' });
+	await control.getByRole('radio', { name: measure, exact: true }).click();
+	await expect(control.getByRole('radio', { name: measure, exact: true })).toHaveAttribute(
+		'aria-checked',
+		'true'
+	);
+	await closePopover(page, dialog);
+}
+
+export async function setMaadFamily(page: Page, family: string): Promise<void> {
+	const dialog = await openMaadOptions(page);
+	const control = dialog.getByRole('group', { name: 'MAAD address family' });
+	await control.getByRole('radio', { name: family }).click();
+	await expect(control.getByRole('radio', { name: family })).toHaveAttribute(
+		'aria-checked',
+		'true'
+	);
+	await closePopover(page, dialog);
+}
+
+export async function openSources(page: Page): Promise<Locator> {
+	return openToolbarPopover(page, /^Sources:/, 'Sources');
+}
+
+export function sourceOption(dialog: Locator, name: string): Locator {
+	return dialog.getByRole('option', { name, exact: true });
+}
+
+export async function setSource(page: Page, name: string, enabled: boolean): Promise<void> {
+	const dialog = await openSources(page);
+	const option = sourceOption(dialog, name);
+	if ((await option.getAttribute('aria-checked')) !== String(enabled)) await option.click();
+	await expect(option).toHaveAttribute('aria-checked', String(enabled));
+	await closePopover(page, dialog);
+}
+
+export async function openDateRange(page: Page): Promise<Locator> {
+	return openToolbarPopover(page, /^Date range:/, 'Date range');
+}
+
+/** Type one or both ends of the range in the picker's fields; each field commits on change. */
+export async function setDateRange(
+	page: Page,
+	range: { startDate?: string; endDate?: string }
+): Promise<void> {
+	const dialog = await openDateRange(page);
+	for (const [label, value] of [
+		['End Date', range.endDate],
+		['Start Date', range.startDate]
+	] as const) {
+		if (value === undefined) continue;
+		const field = dialog.getByLabel(label, { exact: true });
+		await field.fill(value);
+		await field.press('Tab');
+	}
+	await closePopover(page, dialog);
+}
+
+export async function resetFilters(page: Page): Promise<void> {
+	await page.getByRole('button', { name: 'Reset filters', exact: true }).click();
+}
+
+export function cardMenuTrigger(page: Page, title: string): Locator {
+	return page.getByRole('button', { name: `${title} card options`, exact: true });
+}
+
+export async function chooseCardAction(page: Page, title: string, action: string): Promise<void> {
+	await cardMenuTrigger(page, title).click();
+	await page.getByRole('menuitem', { name: action, exact: true }).click();
+	await expect(page.getByRole('menu')).not.toBeAttached();
+}
+
+/** Pick a segmented toggle (radio) inside a scope and assert it became checked. */
+export async function chooseSegment(scope: Locator, group: string, option: string): Promise<void> {
+	const radio = scope
+		.getByRole('group', { name: group, exact: true })
+		.getByRole('radio', { name: option, exact: true });
+	await radio.click();
+	await expect(radio).toHaveAttribute('aria-checked', 'true');
+}
diff --git a/apps/web/tests/lib/console-ui.test.ts b/apps/web/tests/lib/console-ui.test.ts
new file mode 100644
index 0000000..5dc08a0
--- /dev/null
+++ b/apps/web/tests/lib/console-ui.test.ts
@@ -0,0 +1,107 @@
+import { describe, expect, it, vi } from 'vitest';
+
+vi.mock('$app/paths', () => ({
+	resolve: (path: string, params: Record<string, string> = {}) =>
+		path.replace(/\[(\w+)\]/g, (_, key: string) => params[key] ?? '')
+}));
+
+import {
+	dateRangePresets,
+	formatDateRange,
+	isIsoDate
+} from '../../src/lib/components/filters/date-range';
+import { sumNetflowWindow } from '../../src/lib/components/netflow/netflow-window-totals';
+import {
+	pageDatasetId,
+	pageSection,
+	sectionHref
+} from '../../src/lib/components/shell/app-context';
+import type { NetflowStatsResult, TimeBucket } from '../../src/lib/types/types';
+
+describe('date range helpers', () => {
+	it('validates real ISO calendar dates only', () => {
+		expect(isIsoDate('2025-03-01')).toBe(true);
+		expect(isIsoDate('2025-02-30')).toBe(false);
+		expect(isIsoDate('2025-3-1')).toBe(false);
+		expect(isIsoDate('')).toBe(false);
+	});
+
+	it('formats single days, same-year and cross-year ranges', () => {
+		expect(formatDateRange('2025-03-01', '2025-03-01')).toBe('Mar 1, 2025');
+		expect(formatDateRange('2025-03-01', '2025-03-03')).toBe('Mar 1 – Mar 3, 2025');
+		expect(formatDateRange('2024-12-30', '2025-01-02')).toBe('Dec 30, 2024 – Jan 2, 2025');
+	});
+
+	it('anchors window presets to the selected end date', () => {
+		expect(dateRangePresets('2025-03-03', '2025-01-01', '2026-10-09')).toEqual([
+			{ id: '1d', label: 'Last day', startDate: '2025-03-03', endDate: '2025-03-03' },
+			{ id: '7d', label: 'Last 7 days', startDate: '2025-02-25', endDate: '2025-03-03' },
+			{ id: '30d', label: 'Last 30 days', startDate: '2025-02-02', endDate: '2025-03-03' },
+			{ id: 'all', label: 'All available', startDate: '2025-01-01', endDate: '2026-10-09' }
+		]);
+	});
+});
+
+describe('sumNetflowWindow', () => {
+	const row = (flows: number, flowsTcp: number, packets: number, bytes: number) =>
+		({ flows, flowsTcp, packets, bytes }) as NetflowStatsResult;
+	const bucket = (
+		state: 'complete' | 'partial' | 'unknown',
+		data: NetflowStatsResult | null
+	): TimeBucket<NetflowStatsResult> => ({
+		bucketStart: 0,
+		bucketEnd: 300,
+		coverage: { state, observedUnits: 0, expectedUnits: 0 },
+		data
+	});
+
+	it('adds observed buckets and counts coverage states without inventing data', () => {
+		expect(
+			sumNetflowWindow([
+				bucket('complete', row(10, 6, 100, 1000)),
+				bucket('partial', row(5, 1, 50, 400)),
+				bucket('unknown', null),
+				bucket('complete', row(0, 0, 0, 0))
+			])
+		).toEqual({
+			flows: 15,
+			flowsTcp: 7,
+			packets: 150,
+			bytes: 1400,
+			buckets: 4,
+			completeBuckets: 2,
+			partialBuckets: 1,
+			unknownBuckets: 1
+		});
+	});
+});
+
+describe('app shell context', () => {
+	const page = (
+		pathname: string,
+		search = '',
+		params: Record<string, string> = {},
+		data: Record<string, unknown> = {}
+	) => ({ params, url: new URL(`http://x${pathname}${search}`), data });
+
+	it('maps routes to navigation sections', () => {
+		expect(pageSection('/')).toBe('datasets');
+		expect(pageSection('/datasets/a')).toBe('dashboard');
+		expect(pageSection('/datasets/a/alerts')).toBe('alerts');
+		expect(pageSection('/netflow/files/202503010200')).toBe('files');
+	});
+
+	it('resolves the dataset from params, search, then page data', () => {
+		expect(pageDatasetId(page('/datasets/a', '?dataset=b', { dataset: 'a' }))).toBe('a');
+		expect(pageDatasetId(page('/netflow/files/1', '?dataset=b'))).toBe('b');
+		expect(pageDatasetId(page('/netflow/files', '', {}, { selectedDataset: 'c' }))).toBe('c');
+		expect(pageDatasetId(page('/'))).toBeNull();
+	});
+
+	it('builds section links for a dataset', () => {
+		expect(sectionHref('dashboard', 'a b')).toBe('/datasets/a b');
+		expect(sectionHref('alerts', 'a')).toBe('/datasets/a/alerts');
+		expect(sectionHref('files', 'a b')).toBe('/netflow/files?dataset=a%20b');
+		expect(sectionHref('dashboard', null)).toBe('/');
+	});
+});
diff --git a/apps/web/tests/routes/datasets-page.test.ts b/apps/web/tests/routes/datasets-page.test.ts
index 3a8d094..e928957 100644
--- a/apps/web/tests/routes/datasets-page.test.ts
+++ b/apps/web/tests/routes/datasets-page.test.ts
@@ -45,6 +45,16 @@ describe('/datasets/[dataset] load', () => {
 		expect(fetch).toHaveBeenCalledWith('/api/routers?dataset=uoregon');
 		expect(fetch).toHaveBeenCalledWith('/api/netflow/maad-status?dataset=uoregon');
 		expect(result).toEqual({
+			datasets: [
+				{
+					datasetId: 'uoregon',
+					label: 'UONet-in',
+					defaultStartDate: '2025-02-11',
+					discoveryMode: 'live',
+					hasLocality: false,
+					isDefault: true
+				}
+			],
 			datasetId: 'uoregon',
 			title: 'UONet-in',
 			defaultStartDate: '2025-02-11',

From f8cb1fc69148fccca2287a578362799d3fcd24af Mon Sep 17 00:00:00 2001
From: flamboh <oliver.boorstein@gmail.com>
Date: Fri, 9 Oct 2026 01:22:40 -0700
Subject: [PATCH 5/9] fix(web): lazy-load calendar and command palette, keep
 card menu focus across activation

---
 .../src/lib/components/charts/CardMenu.svelte |  3 +-
 .../src/lib/components/charts/card-frame.ts   |  1 +
 .../components/common/SegmentedToggle.svelte  | 10 +--
 .../filters/DateRangeCalendar.svelte          | 46 ++++++++++++++
 .../components/filters/DateRangePicker.svelte | 52 +++++++---------
 .../src/lib/components/filters/date-range.ts  | 20 +++---
 .../netflow/DashboardCardSlot.svelte          | 23 ++++++-
 .../netflow/DatasetDashboardPage.svelte       |  5 +-
 .../lib/components/shell/CommandMenu.svelte   | 59 +++---------------
 .../components/shell/CommandPalette.svelte    | 61 +++++++++++++++++++
 .../lib/components/shell/DatasetList.svelte   | 39 ++++++++++++
 .../components/shell/DatasetSwitcher.svelte   | 37 +++--------
 apps/web/tests/e2e/brand.spec.ts              |  6 +-
 apps/web/tests/e2e/console-ui.spec.ts         | 46 +++++++++-----
 apps/web/tests/e2e/dashboard-baseline.spec.ts |  9 ++-
 .../tests/e2e/dashboard-maad-measure.spec.ts  |  2 +-
 apps/web/tests/e2e/toolbar-helpers.ts         | 22 +++++--
 17 files changed, 286 insertions(+), 155 deletions(-)
 create mode 100644 apps/web/src/lib/components/filters/DateRangeCalendar.svelte
 create mode 100644 apps/web/src/lib/components/shell/CommandPalette.svelte
 create mode 100644 apps/web/src/lib/components/shell/DatasetList.svelte

diff --git a/apps/web/src/lib/components/charts/CardMenu.svelte b/apps/web/src/lib/components/charts/CardMenu.svelte
index 6c28abc..7f72b6d 100644
--- a/apps/web/src/lib/components/charts/CardMenu.svelte
+++ b/apps/web/src/lib/components/charts/CardMenu.svelte
@@ -30,7 +30,8 @@
 		class="w-44"
 		onCloseAutoFocus={(event) => {
 			event.preventDefault();
-			// Moving a card re-inserts its DOM node, so restore focus once the list has settled.
+			// Moves re-insert the card, so wait for the list to settle; the card slot also refocuses
+			// after moves in case this menu unmounted with a placeholder header.
 			void tick().then(() => trigger?.focus());
 		}}
 	>
diff --git a/apps/web/src/lib/components/charts/card-frame.ts b/apps/web/src/lib/components/charts/card-frame.ts
index 7fb9861..7a6fd0b 100644
--- a/apps/web/src/lib/components/charts/card-frame.ts
+++ b/apps/web/src/lib/components/charts/card-frame.ts
@@ -1,6 +1,7 @@
 import { createContext } from 'svelte';
 
 export type CardFrame = {
+	readonly id: string;
 	readonly title: string;
 	readonly first: boolean;
 	readonly last: boolean;
diff --git a/apps/web/src/lib/components/common/SegmentedToggle.svelte b/apps/web/src/lib/components/common/SegmentedToggle.svelte
index e2b51f5..7b15ed3 100644
--- a/apps/web/src/lib/components/common/SegmentedToggle.svelte
+++ b/apps/web/src/lib/components/common/SegmentedToggle.svelte
@@ -30,10 +30,12 @@
 
 <ToggleGroup.Root
 	type="single"
-	value={value ?? ''}
-	onValueChange={(next) => {
-		if (next && next !== value) onValueChange?.(next as T);
-	}}
+	bind:value={
+		() => value ?? '',
+		(next: string) => {
+			if (next && next !== value) onValueChange?.(next as T);
+		}
+	}
 	spacing={1}
 	aria-label={ariaLabel}
 	class={cn('segmented bg-muted gap-0.5 rounded-md p-0.5', className)}
diff --git a/apps/web/src/lib/components/filters/DateRangeCalendar.svelte b/apps/web/src/lib/components/filters/DateRangeCalendar.svelte
new file mode 100644
index 0000000..78cb946
--- /dev/null
+++ b/apps/web/src/lib/components/filters/DateRangeCalendar.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { parseDate, type DateValue } from '@internationalized/date';
+	import { untrack } from 'svelte';
+	import { RangeCalendar } from '#lib/components/ui/range-calendar/index.ts';
+	import { isIsoDate } from './date-range.ts';
+
+	let {
+		startDate,
+		endDate,
+		today,
+		months,
+		onApply
+	}: {
+		startDate: string;
+		endDate: string;
+		today: string;
+		months: number;
+		onApply: (range: { startDate: string; endDate: string }) => void;
+	} = $props();
+
+	// The popover mounts this panel on open, so the draft starts from the committed range each time.
+	const initial = untrack(() => {
+		const start = isIsoDate(startDate) ? parseDate(startDate) : undefined;
+		const end = isIsoDate(endDate) ? parseDate(endDate) : undefined;
+		const [low, high] = start && end && start.compare(end) > 0 ? [end, start] : [start, end];
+		const focus = high ?? low ?? parseDate(today);
+		return {
+			draft: { start: low, end: high },
+			placeholder: months > 1 ? focus.subtract({ months: months - 1 }) : focus
+		};
+	});
+	let draft = $state<{ start: DateValue | undefined; end: DateValue | undefined }>(initial.draft);
+	let placeholder = $state<DateValue>(initial.placeholder);
+</script>
+
+<RangeCalendar
+	bind:value={draft}
+	bind:placeholder
+	numberOfMonths={months}
+	weekStartsOn={0}
+	class="[&_[data-outside-month]]:invisible"
+	onValueChange={(next) => {
+		if (next.start && next.end)
+			onApply({ startDate: next.start.toString(), endDate: next.end.toString() });
+	}}
+/>
diff --git a/apps/web/src/lib/components/filters/DateRangePicker.svelte b/apps/web/src/lib/components/filters/DateRangePicker.svelte
index d7362a6..cd0f621 100644
--- a/apps/web/src/lib/components/filters/DateRangePicker.svelte
+++ b/apps/web/src/lib/components/filters/DateRangePicker.svelte
@@ -1,15 +1,12 @@
 <script lang="ts">
-	import { parseDate, type DateValue } from '@internationalized/date';
 	import { CalendarDays } from '@lucide/svelte';
 	import { MediaQuery } from 'svelte/reactivity';
 	import ToolbarPopover from '#lib/components/common/ToolbarPopover.svelte';
 	import { Input } from '#lib/components/ui/input/index.ts';
 	import { Label } from '#lib/components/ui/label/index.ts';
-	import { RangeCalendar } from '#lib/components/ui/range-calendar/index.ts';
+	import { Skeleton } from '#lib/components/ui/skeleton/index.ts';
 	import { dateRangePresets, formatDateRange, isIsoDate } from './date-range.ts';
 
-	type Range = { start: DateValue | undefined; end: DateValue | undefined };
-
 	let {
 		startDate,
 		endDate,
@@ -27,34 +24,28 @@
 	const id = $props.id();
 	const wide = new MediaQuery('(min-width: 640px)', true);
 	let open = $state(false);
-	let draft = $state<Range>({ start: undefined, end: undefined });
-	let placeholder = $state<DateValue | undefined>(undefined);
+	let invalid = $state({ startDate: false, endDate: false });
+	let calendar = $state<Promise<typeof import('./DateRangeCalendar.svelte')> | null>(null);
 	const label = $derived(formatDateRange(startDate, endDate));
 	const presets = $derived(dateRangePresets(endDate, datasetStartDate, today));
 
-	function syncDraft() {
-		const start = isIsoDate(startDate) ? parseDate(startDate) : undefined;
-		const end = isIsoDate(endDate) ? parseDate(endDate) : undefined;
-		const [low, high] = start && end && start.compare(end) > 0 ? [end, start] : [start, end];
-		draft = { start: low, end: high };
-		const focus = high ?? low ?? parseDate(today);
-		placeholder = wide.current ? focus.subtract({ months: 1 }) : focus;
-	}
-
 	function apply(next: { startDate: string; endDate: string }) {
 		onChange(next);
 		open = false;
 	}
 
 	function commitField(side: 'startDate' | 'endDate', value: string) {
-		if (isIsoDate(value)) onChange({ [side]: value });
+		invalid[side] = !isIsoDate(value);
+		if (!invalid[side]) onChange({ [side]: value });
 	}
 </script>
 
 <ToolbarPopover
 	bind:open
 	onOpenChange={(next) => {
-		if (next) syncDraft();
+		if (!next) return;
+		invalid = { startDate: false, endDate: false };
+		calendar ??= import('./DateRangeCalendar.svelte');
 	}}
 	{label}
 	ariaLabel={`Date range: ${label}`}
@@ -80,16 +71,19 @@
 			</p>
 		</div>
 		<div class="flex flex-col">
-			<RangeCalendar
-				bind:value={draft}
-				bind:placeholder
-				numberOfMonths={wide.current ? 2 : 1}
-				weekStartsOn={0}
-				onValueChange={(next) => {
-					if (next.start && next.end)
-						apply({ startDate: next.start.toString(), endDate: next.end.toString() });
-				}}
-			/>
+			{#if calendar}
+				{#await calendar}
+					<Skeleton class="m-3 h-72 w-64 sm:w-[34rem]" />
+				{:then { default: DateRangeCalendar }}
+					<DateRangeCalendar
+						{startDate}
+						{endDate}
+						{today}
+						months={wide.current ? 2 : 1}
+						onApply={apply}
+					/>
+				{/await}
+			{/if}
 			<div class="grid grid-cols-2 gap-3 border-t p-3">
 				<div class="grid gap-1.5">
 					<Label for={`${id}-start`} class="text-muted-foreground text-xs font-normal"
@@ -102,7 +96,7 @@
 						inputmode="numeric"
 						autocomplete="off"
 						class="h-8 font-mono text-xs"
-						aria-invalid={!isIsoDate(startDate) || undefined}
+						aria-invalid={invalid.startDate || undefined}
 						onchange={(event) => commitField('startDate', event.currentTarget.value.trim())}
 					/>
 				</div>
@@ -116,7 +110,7 @@
 						inputmode="numeric"
 						autocomplete="off"
 						class="h-8 font-mono text-xs"
-						aria-invalid={!isIsoDate(endDate) || undefined}
+						aria-invalid={invalid.endDate || undefined}
 						onchange={(event) => commitField('endDate', event.currentTarget.value.trim())}
 					/>
 				</div>
diff --git a/apps/web/src/lib/components/filters/date-range.ts b/apps/web/src/lib/components/filters/date-range.ts
index 93a5d8f..5f2c6e9 100644
--- a/apps/web/src/lib/components/filters/date-range.ts
+++ b/apps/web/src/lib/components/filters/date-range.ts
@@ -1,14 +1,14 @@
-import { parseDate } from '@internationalized/date';
-
 const ISO_DATE = /^\d{4}-\d{2}-\d{2}$/;
+const DAY_MS = 86_400_000;
 
 export function isIsoDate(value: string): boolean {
 	if (!ISO_DATE.test(value)) return false;
-	try {
-		return parseDate(value).toString() === value;
-	} catch {
-		return false;
-	}
+	const date = utc(value);
+	return !Number.isNaN(date.getTime()) && date.toISOString().slice(0, 10) === value;
+}
+
+function addDays(date: string, days: number): string {
+	return new Date(utc(date).getTime() + days * DAY_MS).toISOString().slice(0, 10);
 }
 
 const dayFormat = new Intl.DateTimeFormat('en-US', {
@@ -43,7 +43,7 @@ export function dateRangePresets(
 	datasetStartDate: string,
 	today: string
 ): DateRangePreset[] {
-	const anchor = isIsoDate(endDate) ? parseDate(endDate) : parseDate(today);
+	const anchor = isIsoDate(endDate) ? endDate : today;
 	const windows = [
 		{ id: '1d', label: 'Last day', days: 1 },
 		{ id: '7d', label: 'Last 7 days', days: 7 },
@@ -53,8 +53,8 @@ export function dateRangePresets(
 		...windows.map(({ id, label, days }) => ({
 			id,
 			label,
-			startDate: anchor.subtract({ days: days - 1 }).toString(),
-			endDate: anchor.toString()
+			startDate: addDays(anchor, 1 - days),
+			endDate: anchor
 		})),
 		{ id: 'all', label: 'All available', startDate: datasetStartDate, endDate: today }
 	];
diff --git a/apps/web/src/lib/components/netflow/DashboardCardSlot.svelte b/apps/web/src/lib/components/netflow/DashboardCardSlot.svelte
index 396c726..c99ffcf 100644
--- a/apps/web/src/lib/components/netflow/DashboardCardSlot.svelte
+++ b/apps/web/src/lib/components/netflow/DashboardCardSlot.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
+	import { tick, type Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { setCardFrame } from '#lib/components/charts/card-frame.ts';
 
 	let {
+		id,
 		title,
 		first,
 		last,
@@ -13,6 +14,7 @@
 		children,
 		...rest
 	}: HTMLAttributes<HTMLElement> & {
+		id: string;
 		title: string;
 		first: boolean;
 		last: boolean;
@@ -22,7 +24,22 @@
 		children: Snippet;
 	} = $props();
 
+	let section = $state<HTMLElement | null>(null);
+
+	// The menu that triggered a move can unmount when a placeholder card activates, so the slot
+	// restores focus to whichever menu trigger the card renders once the list has settled.
+	async function moveAndRefocus(offset: number) {
+		onMove(offset);
+		await tick();
+		requestAnimationFrame(() =>
+			section?.querySelector<HTMLElement>('[data-card-menu-trigger]')?.focus()
+		);
+	}
+
 	setCardFrame({
+		get id() {
+			return id;
+		},
 		get title() {
 			return title;
 		},
@@ -35,11 +52,11 @@
 		get resizable() {
 			return resizable;
 		},
-		move: (offset) => onMove(offset),
+		move: (offset) => void moveAndRefocus(offset),
 		resize: (offset) => onResize(offset)
 	});
 </script>
 
-<section role="listitem" data-chart-card {...rest}>
+<section bind:this={section} role="listitem" data-chart-card data-chart-id={id} {...rest}>
 	{@render children()}
 </section>
diff --git a/apps/web/src/lib/components/netflow/DatasetDashboardPage.svelte b/apps/web/src/lib/components/netflow/DatasetDashboardPage.svelte
index 4f5f2ca..7bdf068 100644
--- a/apps/web/src/lib/components/netflow/DatasetDashboardPage.svelte
+++ b/apps/web/src/lib/components/netflow/DatasetDashboardPage.svelte
@@ -294,6 +294,9 @@
 	function moveCardBy(chartId: ChartCardId, offset: number) {
 		const target = chartOrder[chartOrder.indexOf(chartId) + offset];
 		if (!target) return;
+		// A moved card stays in view for the user, so mount it now rather than swapping its header
+		// out from under the restored focus when it intersects later.
+		activateChart(chartId);
 		moveChartCard(chartId, target);
 		persistChartOrder();
 	}
@@ -467,13 +470,13 @@
 	<div role="list" aria-label="Reorderable charts" class="chart-panels flex flex-col gap-3">
 		{#each chartOrder as chartId, index (chartId)}
 			<DashboardCardSlot
+				id={chartId}
 				title={CHART_CARD_DETAILS[chartId].title}
 				first={index === 0}
 				last={index === chartOrder.length - 1}
 				resizable={activatedCharts[chartId] && chartId !== 'coverage'}
 				onMove={(offset) => moveCardBy(chartId, offset)}
 				onResize={(offset) => resizeCard(chartId, offset)}
-				data-chart-id={chartId}
 				data-chart-activated={activatedCharts[chartId]}
 				class={`relative rounded-lg ${dropTargetChartId === chartId && draggedChartId && draggedChartId !== chartId ? 'ring-primary ring-offset-background ring-2 ring-offset-2' : ''}`}
 				style={`${activatedCharts[chartId] ? '' : `min-height:${getCardMinimumHeight(chartId)}px;`}${chartHeights[chartId] ? `--chart-user-height:${chartHeights[chartId]}px` : ''}`}
diff --git a/apps/web/src/lib/components/shell/CommandMenu.svelte b/apps/web/src/lib/components/shell/CommandMenu.svelte
index b38ebe2..4c12af6 100644
--- a/apps/web/src/lib/components/shell/CommandMenu.svelte
+++ b/apps/web/src/lib/components/shell/CommandMenu.svelte
@@ -1,12 +1,8 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
 	import { Search } from '@lucide/svelte';
 	import { Button } from '#lib/components/ui/button/index.ts';
-	import * as Command from '#lib/components/ui/command/index.ts';
 	import { Kbd } from '#lib/components/ui/kbd/index.ts';
 	import type { DatasetSummary } from '#lib/datasets.ts';
-	import { theme } from '#lib/stores/theme.svelte.ts';
-	import { sectionHref, sectionsFor, type AppSection } from './app-context.ts';
 
 	let {
 		datasets,
@@ -19,19 +15,13 @@
 	} = $props();
 
 	let open = $state(false);
+	let palette = $state<Promise<typeof import('./CommandPalette.svelte')> | null>(null);
 
 	function setOpen(next: boolean) {
 		open = next;
-		if (next && !datasets) onRequestDatasets();
-	}
-
-	function run(action: () => void) {
-		open = false;
-		action();
-	}
-
-	function go(section: AppSection, id: string | null) {
-		run(() => void goto(sectionHref(section, id)));
+		if (!next) return;
+		palette ??= import('./CommandPalette.svelte');
+		if (!datasets) onRequestDatasets();
 	}
 </script>
 
@@ -57,39 +47,8 @@
 	<Kbd class="hidden md:inline-flex">⌘K</Kbd>
 </Button>
 
-<Command.Dialog
-	bind:open
-	title="Command menu"
-	description="Jump to a page or dataset, or switch the theme."
->
-	<Command.Input placeholder="Type a command or search…" aria-label="Search commands" />
-	<Command.List>
-		<Command.Empty>No results.</Command.Empty>
-		<Command.Group heading="Pages">
-			{#each sectionsFor(datasetId) as item (item.section)}
-				<Command.Item value={`page ${item.label}`} onSelect={() => go(item.section, datasetId)}
-					>{item.label}</Command.Item
-				>
-			{/each}
-		</Command.Group>
-		{#if datasets && datasets.length > 0}
-			<Command.Group heading="Datasets">
-				{#each datasets as dataset (dataset.datasetId)}
-					<Command.Item
-						value={`dataset ${dataset.label} ${dataset.datasetId}`}
-						data-checked={dataset.datasetId === datasetId}
-						onSelect={() => go('dashboard', dataset.datasetId)}
-						>{dataset.label}
-						<span class="text-muted-foreground font-mono text-xs">{dataset.datasetId}</span
-						></Command.Item
-					>
-				{/each}
-			</Command.Group>
-		{/if}
-		<Command.Group heading="Preferences">
-			<Command.Item value="theme toggle dark light" onSelect={() => run(() => theme.toggle())}
-				>Switch to {theme.dark ? 'light' : 'dark'} theme</Command.Item
-			>
-		</Command.Group>
-	</Command.List>
-</Command.Dialog>
+{#if palette}
+	{#await palette then { default: CommandPalette }}
+		<CommandPalette bind:open {datasets} {datasetId} />
+	{/await}
+{/if}
diff --git a/apps/web/src/lib/components/shell/CommandPalette.svelte b/apps/web/src/lib/components/shell/CommandPalette.svelte
new file mode 100644
index 0000000..3f6d838
--- /dev/null
+++ b/apps/web/src/lib/components/shell/CommandPalette.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import * as Command from '#lib/components/ui/command/index.ts';
+	import type { DatasetSummary } from '#lib/datasets.ts';
+	import { theme } from '#lib/stores/theme.svelte.ts';
+	import { sectionHref, sectionsFor, type AppSection } from './app-context.ts';
+
+	let {
+		open = $bindable(false),
+		datasets,
+		datasetId
+	}: { open?: boolean; datasets: DatasetSummary[] | null; datasetId: string | null } = $props();
+
+	function run(action: () => void) {
+		open = false;
+		action();
+	}
+
+	function go(section: AppSection, id: string | null) {
+		run(() => void goto(sectionHref(section, id)));
+	}
+</script>
+
+<Command.Dialog
+	bind:open
+	title="Command menu"
+	description="Jump to a page or dataset, or switch the theme."
+>
+	<Command.Input placeholder="Type a command or search…" aria-label="Search commands" />
+	<Command.List>
+		<Command.Empty>No results.</Command.Empty>
+		<Command.Group heading="Pages">
+			{#each sectionsFor(datasetId) as item (item.section)}
+				<Command.Item value={`page ${item.label}`} onSelect={() => go(item.section, datasetId)}
+					>{item.label}</Command.Item
+				>
+			{/each}
+		</Command.Group>
+		{#if datasets && datasets.length > 0}
+			<Command.Group heading="Datasets">
+				{#each datasets as dataset (dataset.datasetId)}
+					<Command.Item
+						value={`dataset ${dataset.label} ${dataset.datasetId}`}
+						data-checked={dataset.datasetId === datasetId}
+						onSelect={() => go('dashboard', dataset.datasetId)}
+						>{dataset.label}
+						<span class="text-muted-foreground font-mono text-xs">{dataset.datasetId}</span
+						></Command.Item
+					>
+				{/each}
+			</Command.Group>
+		{/if}
+		<Command.Group heading="Preferences">
+			<Command.Item
+				value={`Switch to ${theme.dark ? 'light' : 'dark'} theme appearance`}
+				onSelect={() => run(() => theme.toggle())}
+				>Switch to {theme.dark ? 'light' : 'dark'} theme</Command.Item
+			>
+		</Command.Group>
+	</Command.List>
+</Command.Dialog>
diff --git a/apps/web/src/lib/components/shell/DatasetList.svelte b/apps/web/src/lib/components/shell/DatasetList.svelte
new file mode 100644
index 0000000..9a788df
--- /dev/null
+++ b/apps/web/src/lib/components/shell/DatasetList.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import * as Command from '#lib/components/ui/command/index.ts';
+	import type { DatasetSummary } from '#lib/datasets.ts';
+
+	let {
+		datasets,
+		datasetId,
+		onChoose
+	}: {
+		datasets: DatasetSummary[] | null;
+		datasetId: string | null;
+		onChoose: (id: string) => void;
+	} = $props();
+</script>
+
+<Command.Root>
+	<Command.Input placeholder="Search datasets…" aria-label="Search datasets" />
+	<Command.List class="max-h-72">
+		<Command.Empty>{datasets ? 'No datasets found.' : 'Loading datasets…'}</Command.Empty>
+		{#if datasets}
+			<Command.Group heading="Datasets">
+				{#each datasets as dataset (dataset.datasetId)}
+					<Command.Item
+						value={`${dataset.label} ${dataset.datasetId}`}
+						data-checked={dataset.datasetId === datasetId}
+						onSelect={() => onChoose(dataset.datasetId)}
+					>
+						<span class="flex min-w-0 flex-col">
+							<span class="truncate">{dataset.label}</span>
+							<span class="text-muted-foreground truncate font-mono text-xs"
+								>{dataset.datasetId}</span
+							>
+						</span>
+					</Command.Item>
+				{/each}
+			</Command.Group>
+		{/if}
+	</Command.List>
+</Command.Root>
diff --git a/apps/web/src/lib/components/shell/DatasetSwitcher.svelte b/apps/web/src/lib/components/shell/DatasetSwitcher.svelte
index ee379d2..0b97f15 100644
--- a/apps/web/src/lib/components/shell/DatasetSwitcher.svelte
+++ b/apps/web/src/lib/components/shell/DatasetSwitcher.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { ChevronsUpDown } from '@lucide/svelte';
-	import * as Command from '#lib/components/ui/command/index.ts';
 	import * as Popover from '#lib/components/ui/popover/index.ts';
 	import { Button } from '#lib/components/ui/button/index.ts';
 	import type { DatasetSummary } from '#lib/datasets.ts';
@@ -20,6 +19,7 @@
 	} = $props();
 
 	let open = $state(false);
+	let list = $state<Promise<typeof import('./DatasetList.svelte')> | null>(null);
 	const current = $derived(datasets?.find((dataset) => dataset.datasetId === datasetId));
 	const label = $derived(current?.label ?? datasetId ?? 'Select dataset');
 
@@ -33,7 +33,9 @@
 <Popover.Root
 	bind:open
 	onOpenChange={(next) => {
-		if (next && !datasets) onRequestDatasets();
+		if (!next) return;
+		list ??= import('./DatasetList.svelte');
+		if (!datasets) onRequestDatasets();
 	}}
 >
 	<Popover.Trigger>
@@ -42,7 +44,7 @@
 				{...props}
 				variant="ghost"
 				size="sm"
-				class="max-w-[min(18rem,45vw)] gap-1.5 px-2 font-medium"
+				class="max-w-[min(18rem,calc(100vw-13.5rem))] gap-1.5 px-2 font-medium"
 				aria-label={`Dataset: ${label}`}
 			>
 				<span class="truncate">{label}</span>
@@ -51,29 +53,10 @@
 		{/snippet}
 	</Popover.Trigger>
 	<Popover.Content align="start" class="w-72 gap-0 p-0">
-		<Command.Root>
-			<Command.Input placeholder="Search datasets…" aria-label="Search datasets" />
-			<Command.List class="max-h-72">
-				<Command.Empty>{datasets ? 'No datasets found.' : 'Loading datasets…'}</Command.Empty>
-				{#if datasets}
-					<Command.Group heading="Datasets">
-						{#each datasets as dataset (dataset.datasetId)}
-							<Command.Item
-								value={`${dataset.label} ${dataset.datasetId}`}
-								data-checked={dataset.datasetId === datasetId}
-								onSelect={() => choose(dataset.datasetId)}
-							>
-								<span class="flex min-w-0 flex-col">
-									<span class="truncate">{dataset.label}</span>
-									<span class="text-muted-foreground truncate font-mono text-xs"
-										>{dataset.datasetId}</span
-									>
-								</span>
-							</Command.Item>
-						{/each}
-					</Command.Group>
-				{/if}
-			</Command.List>
-		</Command.Root>
+		{#if list}
+			{#await list then { default: DatasetList }}
+				<DatasetList {datasets} {datasetId} onChoose={choose} />
+			{/await}
+		{/if}
 	</Popover.Content>
 </Popover.Root>
diff --git a/apps/web/tests/e2e/brand.spec.ts b/apps/web/tests/e2e/brand.spec.ts
index 49331c8..9ddd626 100644
--- a/apps/web/tests/e2e/brand.spec.ts
+++ b/apps/web/tests/e2e/brand.spec.ts
@@ -6,8 +6,10 @@ for (const colorScheme of ['light', 'dark'] as const) {
 		await page.setViewportSize({ width: 320, height: 800 });
 		await page.goto('/netflow/files');
 		if (colorScheme === 'dark') {
-			await page.getByRole('button', { name: 'Switch to dark mode' }).click();
-			await expect(page.locator('html')).toHaveClass(/(?:^|\s)dark(?:\s|$)/);
+			await expect(async () => {
+				await page.getByRole('button', { name: 'Switch to dark mode' }).click();
+				await expect(page.locator('html')).toHaveClass(/(?:^|\s)dark(?:\s|$)/, { timeout: 1000 });
+			}).toPass();
 		} else {
 			await expect(page.locator('html')).not.toHaveClass(/(?:^|\s)dark(?:\s|$)/);
 		}
diff --git a/apps/web/tests/e2e/console-ui.spec.ts b/apps/web/tests/e2e/console-ui.spec.ts
index 836dcc5..e78a1a5 100644
--- a/apps/web/tests/e2e/console-ui.spec.ts
+++ b/apps/web/tests/e2e/console-ui.spec.ts
@@ -7,6 +7,7 @@ import {
 	openDateRange,
 	openMaadOptions,
 	openSources,
+	openWith,
 	sourceOption
 } from './toolbar-helpers';
 
@@ -52,12 +53,14 @@ test('KPI totals match the traffic window returned by the stats API', async ({ p
 test('KPI totals follow source selection and show an unavailable state', async ({ page }) => {
 	await page.goto(FIXTURE_DASHBOARD);
 	const flows = page.locator('[data-kpi="flows"]');
-	await expect(flows.locator('[data-kpi-value]')).toHaveAttribute('data-kpi-value', '160');
+	const value = flows.locator('[data-kpi-value]');
+	await expect(value).toHaveAttribute('data-kpi-value', /^[1-9]\d*$/);
+	const initial = await value.getAttribute('data-kpi-value');
 	const sources = await openSources(page);
 	await sourceOption(sources, 'fixture-router').click();
 	await expect(flows).toContainText('Unavailable');
 	await sources.getByRole('button', { name: 'Select all', exact: true }).click();
-	await expect(flows.locator('[data-kpi-value]')).toHaveAttribute('data-kpi-value', '160');
+	await expect(value).toHaveAttribute('data-kpi-value', initial!);
 });
 
 test('date range presets, calendar selection and typed fields update the window', async ({
@@ -149,19 +152,20 @@ test('toolbar popovers and selects open, describe their value and return focus',
 	await page.keyboard.press('Escape');
 	await expect(page.getByRole('button', { name: 'MAAD: IPv4, Addresses' })).toBeFocused();
 
-	const interval = page.getByRole('combobox', { name: 'Interval: 5 min' });
+	const interval = page.getByRole('button', { name: 'Interval: 5 min' });
 	await interval.focus();
 	await page.keyboard.press('Enter');
 	await expect(page.getByRole('listbox')).toBeVisible();
 	await page.keyboard.press('Escape');
+	await expect(page.getByRole('listbox')).not.toBeAttached();
 	await expect(interval).toBeFocused();
 
-	const direction = page.getByRole('combobox', { name: 'Direction: All' });
-	await direction.click();
+	const direction = page.getByRole('button', { name: 'Direction: All' });
+	await openWith(direction, page.getByRole('listbox'));
 	await expect(page.getByRole('option', { name: /^Egress/ })).toContainText('internal → external');
 	await page.getByRole('option', { name: /^Egress/ }).click();
 	await expect.poll(() => new URL(page.url()).searchParams.get('direction')).toBe('egress');
-	await expect(page.getByRole('combobox', { name: 'Direction: Egress' })).toBeVisible();
+	await expect(page.getByRole('button', { name: 'Direction: Egress' })).toBeVisible();
 });
 
 for (const width of [390, 1280]) {
@@ -184,9 +188,12 @@ for (const width of [390, 1280]) {
 		await expectRendered(card);
 
 		const trigger = cardMenuTrigger(page, 'Traffic Overview');
-		await trigger.focus();
-		await page.keyboard.press('Enter');
 		const menu = page.getByRole('menu');
+		await trigger.focus();
+		await expect(async () => {
+			if (!(await menu.isVisible())) await page.keyboard.press('Enter');
+			await expect(menu).toBeVisible({ timeout: 1000 });
+		}).toPass();
 		await expect(menu.getByRole('menuitem', { name: 'Move up' })).toHaveAttribute(
 			'aria-disabled',
 			'true'
@@ -218,7 +225,7 @@ for (const width of [390, 1280]) {
 			await expect.poll(async () => (await cardOrder(page))[position]).toBe('dashboard');
 			await expect(trigger).toBeFocused();
 		}
-		await trigger.click();
+		await openWith(trigger, menu);
 		await expect(page.getByRole('menuitem', { name: 'Move down' })).toHaveAttribute(
 			'aria-disabled',
 			'true'
@@ -313,8 +320,7 @@ test('placeholder cards expose the card menu before they load', async ({ page })
 	const ip = page.locator('[data-chart-id="ip"]');
 	await expect(ip).toHaveAttribute('data-chart-activated', 'false');
 	await expect(ip.getByTestId('deferred-chart-ip')).toBeAttached();
-	await cardMenuTrigger(page, 'Unique IP Counts').click();
-	await expect(page.getByRole('menuitem', { name: 'Taller' })).not.toBeAttached();
+	await openWith(cardMenuTrigger(page, 'Unique IP Counts'), page.getByRole('menu'));
 	await page.getByRole('menuitem', { name: 'Move up' }).click();
 	await expect.poll(async () => (await cardOrder(page)).indexOf('ip')).toBe(2);
 });
@@ -322,7 +328,7 @@ test('placeholder cards expose the card menu before they load', async ({ page })
 test('top bar switches datasets and the command menu navigates', async ({ page }) => {
 	await page.goto(FIXTURE_DASHBOARD);
 	const switcher = page.getByRole('button', { name: 'Dataset: Playwright Fixture' });
-	await switcher.click();
+	await openWith(switcher, page.getByRole('combobox', { name: 'Search datasets' }));
 	await page.getByRole('combobox', { name: 'Search datasets' }).fill('external');
 	await page.getByRole('option', { name: /Playwright External MAAD/ }).click();
 	await expect(page).toHaveURL(/\/datasets\/playwright-external-maad$/);
@@ -336,13 +342,18 @@ test('top bar switches datasets and the command menu navigates', async ({ page }
 
 	await page.getByRole('link', { name: 'Alerts', exact: true }).click();
 	await expect(page).toHaveURL(/\/datasets\/playwright-external-maad\/alerts$/);
-	await page.getByRole('button', { name: 'Dataset: Playwright External MAAD' }).click();
+	await openWith(
+		page.getByRole('button', { name: 'Dataset: Playwright External MAAD' }),
+		page.getByRole('combobox', { name: 'Search datasets' })
+	);
 	await page.getByRole('option', { name: /Playwright Fixture/ }).click();
 	await expect(page).toHaveURL(/\/datasets\/playwright\/alerts$/);
 
-	await page.keyboard.press('ControlOrMeta+k');
 	const palette = page.getByRole('dialog', { name: 'Command menu' });
-	await expect(palette).toBeVisible();
+	await expect(async () => {
+		if (!(await palette.isVisible())) await page.keyboard.press('ControlOrMeta+k');
+		await expect(palette).toBeVisible({ timeout: 1000 });
+	}).toPass();
 	await page.getByRole('combobox', { name: 'Search commands' }).fill('files');
 	await page.keyboard.press('Enter');
 	await expect(palette).not.toBeAttached();
@@ -353,7 +364,10 @@ test('top bar switches datasets and the command menu navigates', async ({ page }
 	);
 	await expect(page.getByLabel('Dataset', { exact: true })).toHaveValue('playwright');
 
-	await page.getByRole('button', { name: 'Open command menu' }).click();
+	await openWith(
+		page.getByRole('button', { name: 'Open command menu' }),
+		page.getByRole('combobox', { name: 'Search commands' })
+	);
 	await page.getByRole('combobox', { name: 'Search commands' }).fill('dark theme');
 	await page.keyboard.press('Enter');
 	await expect(page.locator('html')).toHaveClass(/(?:^|\s)dark(?:\s|$)/);
diff --git a/apps/web/tests/e2e/dashboard-baseline.spec.ts b/apps/web/tests/e2e/dashboard-baseline.spec.ts
index 6318c6a..a3a1842 100644
--- a/apps/web/tests/e2e/dashboard-baseline.spec.ts
+++ b/apps/web/tests/e2e/dashboard-baseline.spec.ts
@@ -13,6 +13,7 @@ import {
 	chooseSegment,
 	directionSelect,
 	intervalSelect,
+	openWith,
 	openSources,
 	resetFilters,
 	setDirection,
@@ -179,15 +180,13 @@ test('all granularities render and long windows guard expensive groupings', asyn
 	}
 	await setDates(page, '2025-01-01', '2025-12-31');
 	await expect(intervalSelect(page)).toHaveAccessibleName('Interval: Day');
-	await intervalSelect(page).click();
+	await openWith(intervalSelect(page), page.getByRole('listbox'));
 	for (const label of ['5 min', '10 min', '30 min'])
 		await expect(page.getByRole('option', { name: new RegExp(`^${label}`) })).toHaveAttribute(
-			'aria-disabled',
-			'true'
+			'data-disabled'
 		);
 	await expect(page.getByRole('option', { name: 'Day', exact: true })).not.toHaveAttribute(
-		'aria-disabled',
-		'true'
+		'data-disabled'
 	);
 	await page.keyboard.press('Escape');
 });
diff --git a/apps/web/tests/e2e/dashboard-maad-measure.spec.ts b/apps/web/tests/e2e/dashboard-maad-measure.spec.ts
index c863263..746b54a 100644
--- a/apps/web/tests/e2e/dashboard-maad-measure.spec.ts
+++ b/apps/web/tests/e2e/dashboard-maad-measure.spec.ts
@@ -54,7 +54,7 @@ test('switches dashboard MAAD views between addresses, packets and bytes', async
 		await expect(spectrum.getByTestId('chart-unavailable')).toContainText(
 			'only computed for the Addresses measure'
 		);
-		await expect(spectrum.getByRole('combobox', { name: /^Source:/ })).not.toBeAttached();
+		await expect(spectrum.getByRole('button', { name: /^Source:/ })).not.toBeAttached();
 	}
 
 	await setMaadMeasure(page, 'Addresses');
diff --git a/apps/web/tests/e2e/toolbar-helpers.ts b/apps/web/tests/e2e/toolbar-helpers.ts
index bc3fef7..6a50a04 100644
--- a/apps/web/tests/e2e/toolbar-helpers.ts
+++ b/apps/web/tests/e2e/toolbar-helpers.ts
@@ -4,6 +4,14 @@ function escape(text: string): string {
 	return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }
 
+/** Click a trigger until its popup appears; the first click can land before hydration. */
+export async function openWith(trigger: Locator, popup: Locator): Promise<void> {
+	await expect(async () => {
+		if (!(await popup.isVisible())) await trigger.click();
+		await expect(popup).toBeVisible({ timeout: 1000 });
+	}).toPass({ timeout: 10_000 });
+}
+
 /** Open a toolbar popover by its trigger's accessible-name prefix and return the dialog. */
 export async function openToolbarPopover(
 	page: Page,
@@ -11,8 +19,7 @@ export async function openToolbarPopover(
 	dialogName: string
 ): Promise<Locator> {
 	const dialog = page.getByRole('dialog', { name: dialogName, exact: true });
-	if (!(await dialog.isVisible())) await page.getByRole('button', { name: trigger }).click();
-	await expect(dialog).toBeVisible();
+	await openWith(page.getByRole('button', { name: trigger }), dialog);
 	return dialog;
 }
 
@@ -22,13 +29,16 @@ export async function closePopover(page: Page, dialog: Locator): Promise<void> {
 }
 
 async function chooseSelectOption(page: Page, label: string, option: string) {
-	await page.getByRole('combobox', { name: new RegExp(`^${escape(label)}:`) }).click();
+	await openWith(
+		page.getByRole('button', { name: new RegExp(`^${escape(label)}:`) }),
+		page.getByRole('listbox')
+	);
 	await page.getByRole('option', { name: new RegExp(`^${escape(option)}(\\s|$)`) }).click();
 	await expect(page.getByRole('listbox')).not.toBeAttached();
 }
 
 export function intervalSelect(page: Page): Locator {
-	return page.getByRole('combobox', { name: /^Interval:/ });
+	return page.getByRole('button', { name: /^Interval:/ });
 }
 
 export async function setInterval(page: Page, option: string): Promise<void> {
@@ -37,7 +47,7 @@ export async function setInterval(page: Page, option: string): Promise<void> {
 }
 
 export function directionSelect(page: Page): Locator {
-	return page.getByRole('combobox', { name: /^Direction:/ });
+	return page.getByRole('button', { name: /^Direction:/ });
 }
 
 export async function setDirection(page: Page, option: string): Promise<void> {
@@ -118,7 +128,7 @@ export function cardMenuTrigger(page: Page, title: string): Locator {
 }
 
 export async function chooseCardAction(page: Page, title: string, action: string): Promise<void> {
-	await cardMenuTrigger(page, title).click();
+	await openWith(cardMenuTrigger(page, title), page.getByRole('menu'));
 	await page.getByRole('menuitem', { name: action, exact: true }).click();
 	await expect(page.getByRole('menu')).not.toBeAttached();
 }

From 2338bcdba5959a65ba7d4815139c4e11a125b154 Mon Sep 17 00:00:00 2001
From: flamboh <oliver.boorstein@gmail.com>
Date: Fri, 9 Oct 2026 01:27:26 -0700
Subject: [PATCH 6/9] perf(web): load the sources and dataset command lists on
 first open

---
 .../src/lib/components/common/focus-search.ts |  6 +++
 .../components/filters/SourcesFilter.svelte   | 40 ++++-----------
 .../lib/components/filters/SourcesList.svelte | 43 ++++++++++++++++
 .../lib/components/shell/DatasetList.svelte   | 51 ++++++++++---------
 4 files changed, 87 insertions(+), 53 deletions(-)
 create mode 100644 apps/web/src/lib/components/common/focus-search.ts
 create mode 100644 apps/web/src/lib/components/filters/SourcesList.svelte

diff --git a/apps/web/src/lib/components/common/focus-search.ts b/apps/web/src/lib/components/common/focus-search.ts
new file mode 100644
index 0000000..cb89a1f
--- /dev/null
+++ b/apps/web/src/lib/components/common/focus-search.ts
@@ -0,0 +1,6 @@
+import type { Attachment } from 'svelte/attachments';
+
+/** Lazily loaded popover lists mount after the popover has placed focus, so move it to the search. */
+export const focusSearch: Attachment<HTMLElement> = (node) => {
+	node.querySelector<HTMLInputElement>('input')?.focus();
+};
diff --git a/apps/web/src/lib/components/filters/SourcesFilter.svelte b/apps/web/src/lib/components/filters/SourcesFilter.svelte
index b4c8129..2a1d17b 100644
--- a/apps/web/src/lib/components/filters/SourcesFilter.svelte
+++ b/apps/web/src/lib/components/filters/SourcesFilter.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
-	import { Check } from '@lucide/svelte';
 	import ToolbarPopover from '#lib/components/common/ToolbarPopover.svelte';
 	import { Button } from '#lib/components/ui/button/index.ts';
-	import * as Command from '#lib/components/ui/command/index.ts';
 	import type { RouterConfig } from '#lib/components/netflow/types.ts';
 
 	let {
@@ -10,6 +8,7 @@
 		onRoutersChange
 	}: { routers: RouterConfig; onRoutersChange: (routers: RouterConfig) => void } = $props();
 
+	let list = $state<Promise<typeof import('./SourcesList.svelte')> | null>(null);
 	const names = $derived(Object.keys(routers));
 	const selectedCount = $derived(names.filter((name) => routers[name]).length);
 
@@ -24,34 +23,17 @@
 	ariaLabel={`Sources: ${selectedCount} of ${names.length} selected`}
 	dialogLabel="Sources"
 	contentClass="w-64"
+	onOpenChange={(next) => {
+		if (next) list ??= import('./SourcesList.svelte');
+	}}
 >
-	<Command.Root>
-		<Command.Input placeholder="Search sources…" aria-label="Search sources" />
-		<Command.List class="max-h-64" aria-label="Sources">
-			<Command.Empty>No sources found.</Command.Empty>
-			{#each names as name (name)}
-				<Command.Item
-					value={name}
-					aria-checked={routers[name]}
-					onSelect={() => onRoutersChange({ ...routers, [name]: !routers[name] })}
-					class="gap-2.5"
-				>
-					<span
-						class={[
-							'flex size-4 shrink-0 items-center justify-center rounded-[4px] border shadow-xs',
-							routers[name]
-								? 'border-primary bg-primary text-primary-foreground'
-								: 'border-input bg-background'
-						]}
-						aria-hidden="true"
-					>
-						{#if routers[name]}<Check class="size-3 text-current" />{/if}
-					</span>
-					<span class="truncate">{name}</span>
-				</Command.Item>
-			{/each}
-		</Command.List>
-	</Command.Root>
+	{#if list}
+		{#await list}
+			<div class="text-muted-foreground px-3 py-6 text-center text-sm">Loading sources…</div>
+		{:then { default: SourcesList }}
+			<SourcesList {routers} {onRoutersChange} />
+		{/await}
+	{/if}
 	<div class="flex items-center justify-between gap-2 border-t px-2 py-1.5">
 		<span class="text-muted-foreground text-xs">{selectedCount} selected</span>
 		<div class="flex gap-0.5">
diff --git a/apps/web/src/lib/components/filters/SourcesList.svelte b/apps/web/src/lib/components/filters/SourcesList.svelte
new file mode 100644
index 0000000..4313d96
--- /dev/null
+++ b/apps/web/src/lib/components/filters/SourcesList.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { Check } from '@lucide/svelte';
+	import * as Command from '#lib/components/ui/command/index.ts';
+	import { focusSearch } from '#lib/components/common/focus-search.ts';
+	import type { RouterConfig } from '#lib/components/netflow/types.ts';
+
+	let {
+		routers,
+		onRoutersChange
+	}: { routers: RouterConfig; onRoutersChange: (routers: RouterConfig) => void } = $props();
+
+	const names = $derived(Object.keys(routers));
+</script>
+
+<div class="contents" {@attach focusSearch}>
+	<Command.Root>
+		<Command.Input placeholder="Search sources…" aria-label="Search sources" />
+		<Command.List class="max-h-64" aria-label="Sources">
+			<Command.Empty>No sources found.</Command.Empty>
+			{#each names as name (name)}
+				<Command.Item
+					value={name}
+					aria-checked={routers[name]}
+					onSelect={() => onRoutersChange({ ...routers, [name]: !routers[name] })}
+					class="gap-2.5"
+				>
+					<span
+						class={[
+							'flex size-4 shrink-0 items-center justify-center rounded-[4px] border shadow-xs',
+							routers[name]
+								? 'border-primary bg-primary text-primary-foreground'
+								: 'border-input bg-background'
+						]}
+						aria-hidden="true"
+					>
+						{#if routers[name]}<Check class="size-3 text-current" />{/if}
+					</span>
+					<span class="truncate">{name}</span>
+				</Command.Item>
+			{/each}
+		</Command.List>
+	</Command.Root>
+</div>
diff --git a/apps/web/src/lib/components/shell/DatasetList.svelte b/apps/web/src/lib/components/shell/DatasetList.svelte
index 9a788df..927156e 100644
--- a/apps/web/src/lib/components/shell/DatasetList.svelte
+++ b/apps/web/src/lib/components/shell/DatasetList.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import * as Command from '#lib/components/ui/command/index.ts';
+	import { focusSearch } from '#lib/components/common/focus-search.ts';
 	import type { DatasetSummary } from '#lib/datasets.ts';
 
 	let {
@@ -13,27 +14,29 @@
 	} = $props();
 </script>
 
-<Command.Root>
-	<Command.Input placeholder="Search datasets…" aria-label="Search datasets" />
-	<Command.List class="max-h-72">
-		<Command.Empty>{datasets ? 'No datasets found.' : 'Loading datasets…'}</Command.Empty>
-		{#if datasets}
-			<Command.Group heading="Datasets">
-				{#each datasets as dataset (dataset.datasetId)}
-					<Command.Item
-						value={`${dataset.label} ${dataset.datasetId}`}
-						data-checked={dataset.datasetId === datasetId}
-						onSelect={() => onChoose(dataset.datasetId)}
-					>
-						<span class="flex min-w-0 flex-col">
-							<span class="truncate">{dataset.label}</span>
-							<span class="text-muted-foreground truncate font-mono text-xs"
-								>{dataset.datasetId}</span
-							>
-						</span>
-					</Command.Item>
-				{/each}
-			</Command.Group>
-		{/if}
-	</Command.List>
-</Command.Root>
+<div class="contents" {@attach focusSearch}>
+	<Command.Root>
+		<Command.Input placeholder="Search datasets…" aria-label="Search datasets" />
+		<Command.List class="max-h-72">
+			<Command.Empty>{datasets ? 'No datasets found.' : 'Loading datasets…'}</Command.Empty>
+			{#if datasets}
+				<Command.Group heading="Datasets">
+					{#each datasets as dataset (dataset.datasetId)}
+						<Command.Item
+							value={`${dataset.label} ${dataset.datasetId}`}
+							data-checked={dataset.datasetId === datasetId}
+							onSelect={() => onChoose(dataset.datasetId)}
+						>
+							<span class="flex min-w-0 flex-col">
+								<span class="truncate">{dataset.label}</span>
+								<span class="text-muted-foreground truncate font-mono text-xs"
+									>{dataset.datasetId}</span
+								>
+							</span>
+						</Command.Item>
+					{/each}
+				</Command.Group>
+			{/if}
+		</Command.List>
+	</Command.Root>
+</div>

From a41aba70865fad1a42a2487afdc126b4284d1548 Mon Sep 17 00:00:00 2001
From: flamboh <oliver.boorstein@gmail.com>
Date: Fri, 9 Oct 2026 01:53:26 -0700
Subject: [PATCH 7/9] fix(web): reject reversed traffic windows and hide stale
 totals

---
 .../src/lib/components/netflow/KpiRow.svelte  |  2 +-
 .../netflow/netflow-stats-data.svelte.ts      | 25 ++++----
 apps/web/tests/e2e/console-window.spec.ts     | 49 ++++++++++++++
 .../tests/routes/api-netflow-stats.test.ts    | 64 +++++++++++++++++++
 4 files changed, 127 insertions(+), 13 deletions(-)
 create mode 100644 apps/web/tests/e2e/console-window.spec.ts

diff --git a/apps/web/src/lib/components/netflow/KpiRow.svelte b/apps/web/src/lib/components/netflow/KpiRow.svelte
index 6f644f2..62a83be 100644
--- a/apps/web/src/lib/components/netflow/KpiRow.svelte
+++ b/apps/web/src/lib/components/netflow/KpiRow.svelte
@@ -63,7 +63,7 @@
 			detail:
 				[
 					totals.partialBuckets && `${totals.partialBuckets.toLocaleString()} partial`,
-					totals.unknownBuckets && `${totals.unknownBuckets.toLocaleString()} missing`
+					totals.unknownBuckets && `${totals.unknownBuckets.toLocaleString()} unknown`
 				]
 					.filter(Boolean)
 					.join(' · ') || 'Full source coverage'
diff --git a/apps/web/src/lib/components/netflow/netflow-stats-data.svelte.ts b/apps/web/src/lib/components/netflow/netflow-stats-data.svelte.ts
index 9c5d588..7db0c1b 100644
--- a/apps/web/src/lib/components/netflow/netflow-stats-data.svelte.ts
+++ b/apps/web/src/lib/components/netflow/netflow-stats-data.svelte.ts
@@ -7,12 +7,7 @@ import type {
 	NetflowStatsResult,
 	TimeBucket
 } from '#lib/types/types.ts';
-import {
-	ensureCachedWindow,
-	getMissingWindowRanges,
-	readCachedWindow,
-	type TimeRange
-} from '#lib/utils/window-cache.ts';
+import { ensureCachedWindow, readCachedWindow, type TimeRange } from '#lib/utils/window-cache.ts';
 import { createRequestGate } from '#lib/components/charts/flow-characteristics.ts';
 
 export type NetflowStatsFilters = {
@@ -41,7 +36,6 @@ type StatsRequest =
 			key: string;
 			requestedRange: TimeRange;
 			baseParams: Record<string, string>;
-			missing: boolean;
 	  };
 
 type FetchRequest = Extract<StatsRequest, { kind: 'fetch' }>;
@@ -82,6 +76,12 @@ function describeRequest(filtersKey: string): StatsRequest {
 		start: dateStringToEpochPST(filters.startDate),
 		end: dateStringToEpochPST(filters.endDate, true)
 	};
+	if (!Number.isFinite(requestedRange.start) || !Number.isFinite(requestedRange.end)) {
+		return { kind: 'invalid', error: 'Invalid start or end date' };
+	}
+	if (requestedRange.start >= requestedRange.end) {
+		return { kind: 'invalid', error: 'Start Date must be on or before End Date.' };
+	}
 	return {
 		kind: 'fetch',
 		id: filtersKey,
@@ -92,8 +92,7 @@ function describeRequest(filtersKey: string): StatsRequest {
 			routers: routers.join(','),
 			groupBy: filters.groupBy,
 			direction: filters.direction
-		},
-		missing: getMissingWindowRanges(key, requestedRange).length > 0
+		}
 	};
 }
 
@@ -168,16 +167,18 @@ export function createNetflowStatsData(getFilters: () => NetflowStatsFilters): N
 
 	return {
 		get results() {
-			return request.kind === 'fetch' ? (settled?.results ?? []) : [];
+			return request.kind === 'fetch' && settled?.id === request.id ? settled.results : [];
 		},
 		get availableIpFamilies() {
 			return request.kind === 'fetch'
-				? (settled?.availableIpFamilies ?? ALL_FAMILIES)
+				? settled?.id === request.id
+					? settled.availableIpFamilies
+					: (ipFamilyCache[request.key] ?? ALL_FAMILIES)
 				: ALL_FAMILIES;
 		},
 		get loading() {
 			if (request.kind === 'waiting') return true;
-			return request.kind === 'fetch' && settled?.id !== request.id && request.missing;
+			return request.kind === 'fetch' && settled?.id !== request.id;
 		},
 		get error() {
 			if (request.kind === 'invalid') return request.error;
diff --git a/apps/web/tests/e2e/console-window.spec.ts b/apps/web/tests/e2e/console-window.spec.ts
new file mode 100644
index 0000000..0aa0977
--- /dev/null
+++ b/apps/web/tests/e2e/console-window.spec.ts
@@ -0,0 +1,49 @@
+import { expect, test } from '@playwright/test';
+import { FIXTURE_DASHBOARD, expectRendered } from './chart-helpers';
+import { setDateRange } from './toolbar-helpers';
+
+test('reversed windows do not fetch a normalized traffic range', async ({ page }) => {
+	const statsRequests: string[] = [];
+	page.on('request', (request) => {
+		if (new URL(request.url()).pathname === '/api/netflow/stats') statsRequests.push(request.url());
+	});
+	await page.goto('/datasets/playwright?startDate=2025-03-03&endDate=2025-03-01');
+	await expect(page.getByRole('alert')).toHaveText('Start Date must be on or before End Date.');
+	await expect(page.locator('[data-kpi="flows"]')).toContainText('Unavailable');
+	expect(statsRequests).toEqual([]);
+	await setDateRange(page, { startDate: '2025-03-01' });
+	await expectRendered(page.locator('[data-chart-id="dashboard"]'));
+	await expect(page.locator('[data-kpi="flows"] [data-kpi-value]')).toHaveAttribute(
+		'data-kpi-value',
+		/^[1-9]\d*$/
+	);
+});
+
+test('cached windows never display totals from a different selected window', async ({ page }) => {
+	await page.goto(FIXTURE_DASHBOARD);
+	const value = page.locator('[data-kpi="flows"] [data-kpi-value]');
+	await expect(value).toHaveAttribute('data-kpi-value', '162');
+	await setDateRange(page, { startDate: '2025-03-02', endDate: '2025-03-02' });
+	await expect(value).toHaveAttribute('data-kpi-value', '0');
+	await expectRendered(page.locator('[data-chart-id="dashboard"]'));
+	await page.evaluate(() => {
+		const failures: string[] = [];
+		Object.assign(window, { staleKpiValues: failures });
+		const observer = new MutationObserver(() => {
+			const label = document.querySelector('.dashboard-toolbar button')?.getAttribute('aria-label');
+			const value = document
+				.querySelector('[data-kpi="flows"] [data-kpi-value]')
+				?.getAttribute('data-kpi-value');
+			if (label === 'Date range: Mar 1, 2025' && value && value !== '162') failures.push(value);
+		});
+		observer.observe(document.querySelector('.dashboard-toolbar')!.parentElement!, {
+			childList: true,
+			subtree: true,
+			attributes: true,
+			characterData: true
+		});
+	});
+	await setDateRange(page, { startDate: '2025-03-01', endDate: '2025-03-01' });
+	await expect(value).toHaveAttribute('data-kpi-value', '162');
+	expect(await page.evaluate(() => Reflect.get(window, 'staleKpiValues'))).toEqual([]);
+});
diff --git a/apps/web/tests/routes/api-netflow-stats.test.ts b/apps/web/tests/routes/api-netflow-stats.test.ts
index b611370..ad6499d 100644
--- a/apps/web/tests/routes/api-netflow-stats.test.ts
+++ b/apps/web/tests/routes/api-netflow-stats.test.ts
@@ -1,5 +1,7 @@
 import { describe, expect, it, vi } from 'vitest';
 import { GET } from '../../src/routes/api/netflow/stats/+server';
+import { sumNetflowWindow } from '../../src/lib/components/netflow/netflow-window-totals';
+import type { NetflowStatsResponse } from '../../src/lib/types/types';
 import {
 	getRequestedDataset,
 	listDatasetSourceDefinitions,
@@ -23,6 +25,68 @@ function mockDatasetSession(db: object): void {
 }
 
 describe('/api/netflow/stats GET', () => {
+	it('window totals preserve half-open bounds, complete zeroes and unknown coverage', async () => {
+		const all = vi
+			.fn()
+			.mockResolvedValueOnce([
+				{ bucketStart: 100, flows: 10, flowsTcp: 6, packets: 100, bytes: 1000 },
+				{ bucketStart: 1000, flows: 99999 }
+			])
+			.mockResolvedValueOnce([
+				{
+					sourceId: 'r1',
+					bucketStart: 100,
+					bucketEnd: 400,
+					coverageState: 'partial',
+					observedUnits: 1,
+					expectedUnits: 2,
+					rejectedUnits: 0
+				},
+				{
+					sourceId: 'r1',
+					bucketStart: 400,
+					bucketEnd: 700,
+					coverageState: 'complete',
+					observedUnits: 1,
+					expectedUnits: 1,
+					rejectedUnits: 0
+				}
+			]);
+		vi.mocked(getRequestedDataset).mockResolvedValue('alpha');
+		vi.mocked(listDatasetSourceDefinitions).mockResolvedValue([
+			{ sourceId: 'r1', members: ['r1'] }
+		]);
+		mockDatasetSession({ all });
+		const response = await GET({
+			url: new URL(
+				'http://localhost/api/netflow/stats?routers=r1&startDate=100&endDate=1000&groupBy=5min'
+			)
+		} as never);
+		expect(response.status).toBe(200);
+		const body = (await response.json()) as NetflowStatsResponse;
+		expect(body.result.map(({ bucketStart }) => bucketStart)).toEqual([100, 400, 700]);
+		expect(body.result[1].data).toMatchObject({ flows: 0, packets: 0, bytes: 0 });
+		expect(body.result[2].data).toBeNull();
+		expect(sumNetflowWindow(body.result)).toEqual({
+			flows: 10,
+			flowsTcp: 6,
+			packets: 100,
+			bytes: 1000,
+			buckets: 3,
+			completeBuckets: 1,
+			partialBuckets: 1,
+			unknownBuckets: 1
+		});
+		expect(all).toHaveBeenCalledWith(expect.stringContaining('AND bucket_start < ?'), [
+			'r1',
+			'5m',
+			'all',
+			'all',
+			100,
+			1000
+		]);
+	});
+
 	it('returns 400 when no routers are selected', async () => {
 		vi.mocked(getRequestedDataset).mockResolvedValue('alpha');
 

From ab8e3879cf890ac92f2d198e73036a036ca838a7 Mon Sep 17 00:00:00 2001
From: flamboh <oliver.boorstein@gmail.com>
Date: Fri, 9 Oct 2026 01:54:44 -0700
Subject: [PATCH 8/9] fix(web): preserve keyboard focus in console controls

---
 .../src/lib/components/charts/CardMenu.svelte |  14 +--
 .../components/charts/ChartCardHeader.svelte  |  11 +-
 .../components/common/ToolbarPopover.svelte   |   9 ++
 .../src/lib/components/common/focus-search.ts |   9 +-
 .../components/filters/SourcesFilter.svelte   |   5 +-
 .../components/shell/DatasetSwitcher.svelte   |  19 +++-
 .../tests/e2e/console-accessibility.spec.ts   | 102 ++++++++++++++++++
 apps/web/tests/e2e/console-window.spec.ts     |   4 +-
 8 files changed, 150 insertions(+), 23 deletions(-)
 create mode 100644 apps/web/tests/e2e/console-accessibility.spec.ts

diff --git a/apps/web/src/lib/components/charts/CardMenu.svelte b/apps/web/src/lib/components/charts/CardMenu.svelte
index 7f72b6d..1f31495 100644
--- a/apps/web/src/lib/components/charts/CardMenu.svelte
+++ b/apps/web/src/lib/components/charts/CardMenu.svelte
@@ -1,12 +1,10 @@
 <script lang="ts">
-	import { tick } from 'svelte';
 	import { ArrowDown, ArrowUp, Ellipsis, Minus, Plus } from '@lucide/svelte';
 	import { Button } from '#lib/components/ui/button/index.ts';
 	import * as DropdownMenu from '#lib/components/ui/dropdown-menu/index.ts';
 	import type { CardFrame } from './card-frame.ts';
 
 	let { frame }: { frame: CardFrame } = $props();
-	let trigger = $state<HTMLButtonElement | null>(null);
 </script>
 
 <DropdownMenu.Root>
@@ -14,7 +12,6 @@
 		{#snippet child({ props })}
 			<Button
 				{...props}
-				bind:ref={trigger}
 				variant="ghost"
 				size="icon-sm"
 				class="text-muted-foreground hover:text-foreground"
@@ -25,16 +22,7 @@
 			</Button>
 		{/snippet}
 	</DropdownMenu.Trigger>
-	<DropdownMenu.Content
-		align="end"
-		class="w-44"
-		onCloseAutoFocus={(event) => {
-			event.preventDefault();
-			// Moves re-insert the card, so wait for the list to settle; the card slot also refocuses
-			// after moves in case this menu unmounted with a placeholder header.
-			void tick().then(() => trigger?.focus());
-		}}
-	>
+	<DropdownMenu.Content align="end" class="w-44">
 		<DropdownMenu.Group>
 			<DropdownMenu.Label class="text-muted-foreground truncate text-xs font-normal"
 				>{frame.title}</DropdownMenu.Label
diff --git a/apps/web/src/lib/components/charts/ChartCardHeader.svelte b/apps/web/src/lib/components/charts/ChartCardHeader.svelte
index 9758358..e95f89e 100644
--- a/apps/web/src/lib/components/charts/ChartCardHeader.svelte
+++ b/apps/web/src/lib/components/charts/ChartCardHeader.svelte
@@ -31,13 +31,16 @@
 			{#if subtitle}<span class="text-muted-foreground ml-1.5 truncate text-xs">{subtitle}</span
 				>{/if}
 		</div>
-		{#if controls}
+		{#if controls || frame}
 			<div
-				class="order-2 flex basis-full flex-wrap items-center gap-1.5 @2xl:order-none @2xl:ml-auto @2xl:basis-auto @2xl:justify-end"
+				class={[
+					'flex flex-wrap items-center gap-1.5',
+					controls && 'basis-full @2xl:ml-auto @2xl:basis-auto @2xl:justify-end'
+				]}
 			>
-				{@render controls()}
+				{@render controls?.()}
+				{#if frame}<div class="ml-auto"><CardMenu {frame} /></div>{/if}
 			</div>
 		{/if}
-		{#if frame}<div class="order-1 @2xl:order-none"><CardMenu {frame} /></div>{/if}
 	</div>
 </div>
diff --git a/apps/web/src/lib/components/common/ToolbarPopover.svelte b/apps/web/src/lib/components/common/ToolbarPopover.svelte
index 52edc6b..359ded0 100644
--- a/apps/web/src/lib/components/common/ToolbarPopover.svelte
+++ b/apps/web/src/lib/components/common/ToolbarPopover.svelte
@@ -14,6 +14,7 @@
 		align = 'start',
 		open = $bindable(false),
 		onOpenChange,
+		focusContentOnOpen = false,
 		icon,
 		class: className,
 		contentClass,
@@ -27,11 +28,13 @@
 		align?: 'start' | 'center' | 'end';
 		open?: boolean;
 		onOpenChange?: (open: boolean) => void;
+		focusContentOnOpen?: boolean;
 		icon?: Snippet;
 		class?: string;
 		contentClass?: string;
 		children: Snippet;
 	} = $props();
+	let content = $state<HTMLElement | null>(null);
 </script>
 
 <Popover.Root bind:open {onOpenChange}>
@@ -52,10 +55,16 @@
 		{/snippet}
 	</Popover.Trigger>
 	<Popover.Content
+		bind:ref={content}
 		{align}
 		sideOffset={6}
 		role="dialog"
 		aria-label={dialogLabel}
+		onOpenAutoFocus={(event) => {
+			if (!focusContentOnOpen) return;
+			event.preventDefault();
+			content?.focus();
+		}}
 		class={cn(
 			'max-h-[calc(100dvh-6rem)] w-auto max-w-[calc(100vw-1.5rem)] gap-0 overflow-y-auto p-0',
 			contentClass
diff --git a/apps/web/src/lib/components/common/focus-search.ts b/apps/web/src/lib/components/common/focus-search.ts
index cb89a1f..e358992 100644
--- a/apps/web/src/lib/components/common/focus-search.ts
+++ b/apps/web/src/lib/components/common/focus-search.ts
@@ -1,6 +1,11 @@
 import type { Attachment } from 'svelte/attachments';
 
-/** Lazily loaded popover lists mount after the popover has placed focus, so move it to the search. */
 export const focusSearch: Attachment<HTMLElement> = (node) => {
-	node.querySelector<HTMLInputElement>('input')?.focus();
+	const frame = requestAnimationFrame(() => {
+		const content = node.closest<HTMLElement>('[data-slot="popover-content"]');
+		if (content && content === node.ownerDocument.activeElement) {
+			node.querySelector<HTMLInputElement>('input')?.focus();
+		}
+	});
+	return () => cancelAnimationFrame(frame);
 };
diff --git a/apps/web/src/lib/components/filters/SourcesFilter.svelte b/apps/web/src/lib/components/filters/SourcesFilter.svelte
index 2a1d17b..6cd1e83 100644
--- a/apps/web/src/lib/components/filters/SourcesFilter.svelte
+++ b/apps/web/src/lib/components/filters/SourcesFilter.svelte
@@ -23,13 +23,16 @@
 	ariaLabel={`Sources: ${selectedCount} of ${names.length} selected`}
 	dialogLabel="Sources"
 	contentClass="w-64"
+	focusContentOnOpen
 	onOpenChange={(next) => {
 		if (next) list ??= import('./SourcesList.svelte');
 	}}
 >
 	{#if list}
 		{#await list}
-			<div class="text-muted-foreground px-3 py-6 text-center text-sm">Loading sources…</div>
+			<div class="text-muted-foreground px-3 py-6 text-center text-sm" role="status">
+				Loading sources…
+			</div>
 		{:then { default: SourcesList }}
 			<SourcesList {routers} {onRoutersChange} />
 		{/await}
diff --git a/apps/web/src/lib/components/shell/DatasetSwitcher.svelte b/apps/web/src/lib/components/shell/DatasetSwitcher.svelte
index 0b97f15..92a1d8c 100644
--- a/apps/web/src/lib/components/shell/DatasetSwitcher.svelte
+++ b/apps/web/src/lib/components/shell/DatasetSwitcher.svelte
@@ -19,6 +19,7 @@
 	} = $props();
 
 	let open = $state(false);
+	let content = $state<HTMLElement | null>(null);
 	let list = $state<Promise<typeof import('./DatasetList.svelte')> | null>(null);
 	const current = $derived(datasets?.find((dataset) => dataset.datasetId === datasetId));
 	const label = $derived(current?.label ?? datasetId ?? 'Select dataset');
@@ -52,9 +53,23 @@
 			</Button>
 		{/snippet}
 	</Popover.Trigger>
-	<Popover.Content align="start" class="w-72 gap-0 p-0">
+	<Popover.Content
+		bind:ref={content}
+		align="start"
+		class="w-72 gap-0 p-0"
+		role="dialog"
+		aria-label="Choose dataset"
+		onOpenAutoFocus={(event) => {
+			event.preventDefault();
+			content?.focus();
+		}}
+	>
 		{#if list}
-			{#await list then { default: DatasetList }}
+			{#await list}
+				<div class="text-muted-foreground px-3 py-6 text-center text-sm" role="status">
+					Loading datasets…
+				</div>
+			{:then { default: DatasetList }}
 				<DatasetList {datasets} {datasetId} onChoose={choose} />
 			{/await}
 		{/if}
diff --git a/apps/web/tests/e2e/console-accessibility.spec.ts b/apps/web/tests/e2e/console-accessibility.spec.ts
new file mode 100644
index 0000000..59faf1c
--- /dev/null
+++ b/apps/web/tests/e2e/console-accessibility.spec.ts
@@ -0,0 +1,102 @@
+import { expect, test } from '@playwright/test';
+import { FIXTURE_DASHBOARD, expectRendered } from './chart-helpers';
+import { cardMenuTrigger, openSources, openWith } from './toolbar-helpers';
+
+test('Tab leaves the card menu and follows the visible header order', async ({ page }) => {
+	await page.setViewportSize({ width: 390, height: 900 });
+	await page.goto(FIXTURE_DASHBOARD);
+	const card = page.locator('[data-chart-id="dashboard"]');
+	await expectRendered(card);
+	const trigger = cardMenuTrigger(page, 'Traffic Overview');
+	await trigger.focus();
+	await page.keyboard.press('Enter');
+	await expect(page.getByRole('menu')).toBeVisible();
+	await page.keyboard.press('Shift+Tab');
+	await expect(page.getByRole('menu')).not.toBeAttached();
+	await expect(card.getByRole('radio', { name: 'Stacked', exact: true })).toBeFocused();
+	const positions = await card.locator('.chart-card-header button').evaluateAll((nodes) =>
+		nodes.map((node) => {
+			const box = node.getBoundingClientRect();
+			return { x: box.x, y: box.y + box.height / 2 };
+		})
+	);
+	for (let index = 1; index < positions.length; index++) {
+		const previous = positions[index - 1];
+		const current = positions[index];
+		expect(
+			current.y > previous.y + 1 ||
+				(Math.abs(current.y - previous.y) <= 1 && current.x >= previous.x)
+		).toBe(true);
+	}
+});
+
+test('a late source-list chunk preserves focus after interacting with the loading popover', async ({
+	page
+}) => {
+	let release!: () => void;
+	let started!: () => void;
+	const held = new Promise<void>((resolve) => (release = resolve));
+	const requested = new Promise<void>((resolve) => (started = resolve));
+	await page.route('**/_app/immutable/**/*.js', async (route) => {
+		const response = await route.fetch();
+		const body = await response.text();
+		if (body.includes('Search sources')) {
+			started();
+			await held;
+		}
+		await route.fulfill({ response, body });
+	});
+	try {
+		await page.goto(FIXTURE_DASHBOARD);
+		await expectRendered(page.locator('[data-chart-id="dashboard"]'));
+		const dialog = await openSources(page);
+		await requested;
+		const clear = dialog.getByRole('button', { name: 'Clear', exact: true });
+		await clear.click();
+		await expect(clear).toBeFocused();
+		release();
+		await expect(dialog.getByRole('combobox', { name: 'Search sources' })).toBeVisible();
+		await expect(clear).toBeFocused();
+		await page.keyboard.press('Escape');
+		await expect(page.getByRole('button', { name: /^Sources:/ })).toBeFocused();
+	} finally {
+		release();
+	}
+});
+
+test('dataset popover is named and restores focus when cancelled', async ({ page }) => {
+	await page.goto(FIXTURE_DASHBOARD);
+	const trigger = page.getByRole('button', { name: 'Dataset: Playwright Fixture' });
+	await trigger.focus();
+	const dialog = page.getByRole('dialog', { name: 'Choose dataset', exact: true });
+	await openWith(trigger, dialog);
+	await expect(dialog.getByRole('combobox', { name: 'Search datasets' })).toBeFocused();
+	await page.keyboard.press('Escape');
+	await expect(trigger).toBeFocused();
+});
+
+test('moving a deferred card restores focus through activation and data loading', async ({
+	page
+}) => {
+	await page.addInitScript(() => {
+		Object.defineProperty(window, 'IntersectionObserver', {
+			value: class {
+				observe() {}
+				unobserve() {}
+				disconnect() {}
+			}
+		});
+	});
+	await page.goto(FIXTURE_DASHBOARD);
+	await expectRendered(page.locator('[data-chart-id="dashboard"]'));
+	const card = page.locator('[data-chart-id="ip"]');
+	await expect(card).toHaveAttribute('data-chart-activated', 'false');
+	await openWith(cardMenuTrigger(page, 'Unique IP Counts'), page.getByRole('menu'));
+	await expect(card).toHaveAttribute('data-chart-activated', 'false');
+	await page.getByRole('menuitem', { name: 'Move up', exact: true }).focus();
+	await page.keyboard.press('Enter');
+	await expect(card).toHaveAttribute('data-chart-activated', 'true');
+	await expect(cardMenuTrigger(page, 'Unique IP Counts')).toBeFocused();
+	await expectRendered(card);
+	await expect(cardMenuTrigger(page, 'Unique IP Counts')).toBeFocused();
+});
diff --git a/apps/web/tests/e2e/console-window.spec.ts b/apps/web/tests/e2e/console-window.spec.ts
index 0aa0977..5ac6c39 100644
--- a/apps/web/tests/e2e/console-window.spec.ts
+++ b/apps/web/tests/e2e/console-window.spec.ts
@@ -25,7 +25,9 @@ test('cached windows never display totals from a different selected window', asy
 	await expect(value).toHaveAttribute('data-kpi-value', '162');
 	await setDateRange(page, { startDate: '2025-03-02', endDate: '2025-03-02' });
 	await expect(value).toHaveAttribute('data-kpi-value', '0');
-	await expectRendered(page.locator('[data-chart-id="dashboard"]'));
+	await expect(
+		page.locator('[data-chart-id="dashboard"]').getByTestId('chart-render-state')
+	).toHaveAttribute('data-state', 'empty');
 	await page.evaluate(() => {
 		const failures: string[] = [];
 		Object.assign(window, { staleKpiValues: failures });

From 3962184f3f88f51fd5654a3c1519709b1d6e8672 Mon Sep 17 00:00:00 2001
From: flamboh <oliver.boorstein@gmail.com>
Date: Fri, 9 Oct 2026 01:57:54 -0700
Subject: [PATCH 9/9] perf(web): remove the unused app tooltip provider

---
 apps/web/src/routes/+layout.svelte | 116 ++++++++++++++---------------
 1 file changed, 56 insertions(+), 60 deletions(-)

diff --git a/apps/web/src/routes/+layout.svelte b/apps/web/src/routes/+layout.svelte
index 94d5b80..36f82fd 100644
--- a/apps/web/src/routes/+layout.svelte
+++ b/apps/web/src/routes/+layout.svelte
@@ -5,7 +5,6 @@
 	import { onMount } from 'svelte';
 	import { Sun, Moon } from '@lucide/svelte';
 	import { Button } from '#lib/components/ui/button/index.ts';
-	import * as Tooltip from '#lib/components/ui/tooltip/index.ts';
 	import { theme } from '#lib/stores/theme.svelte.ts';
 	import Logo from '#lib/components/Logo.svelte';
 	import AppNav from '#lib/components/shell/AppNav.svelte';
@@ -37,65 +36,62 @@
 	});
 </script>
 
-<!-- Single app-wide provider required by every Tooltip.Root (bits-ui) -->
-<Tooltip.Provider>
-	<div class="bg-background text-foreground flex h-dvh flex-col overflow-hidden font-sans">
-		<header class="app-topbar border-border bg-card shrink-0 border-b">
-			<div class="shell flex h-12 items-center gap-1.5">
-				<a
-					href={resolve('/')}
-					class="text-foreground -ml-1 rounded-md px-1 py-1 text-[0.9375rem] font-semibold tracking-tight"
-					><Logo /></a
+<div class="bg-background text-foreground flex h-dvh flex-col overflow-hidden font-sans">
+	<header class="app-topbar border-border bg-card shrink-0 border-b">
+		<div class="shell flex h-12 items-center gap-1.5">
+			<a
+				href={resolve('/')}
+				class="text-foreground -ml-1 rounded-md px-1 py-1 text-[0.9375rem] font-semibold tracking-tight"
+				><Logo /></a
+			>
+			<span class="text-border text-xl font-light select-none" aria-hidden="true">/</span>
+			<DatasetSwitcher {datasets} {datasetId} {section} onRequestDatasets={requestDatasets} />
+			<div class="ml-auto flex items-center gap-1">
+				<CommandMenu {datasets} {datasetId} onRequestDatasets={requestDatasets} />
+				<Button
+					variant="ghost"
+					size="icon-sm"
+					onclick={() => theme.toggle()}
+					class="text-muted-foreground hover:text-foreground"
+					aria-label={theme.dark ? 'Switch to light mode' : 'Switch to dark mode'}
 				>
-				<span class="text-border text-xl font-light select-none" aria-hidden="true">/</span>
-				<DatasetSwitcher {datasets} {datasetId} {section} onRequestDatasets={requestDatasets} />
-				<div class="ml-auto flex items-center gap-1">
-					<CommandMenu {datasets} {datasetId} onRequestDatasets={requestDatasets} />
-					<Button
-						variant="ghost"
-						size="icon-sm"
-						onclick={() => theme.toggle()}
-						class="text-muted-foreground hover:text-foreground"
-						aria-label={theme.dark ? 'Switch to light mode' : 'Switch to dark mode'}
-					>
-						{#if theme.dark}
-							<Sun class="size-4" />
-						{:else}
-							<Moon class="size-4" />
-						{/if}
-					</Button>
-				</div>
+					{#if theme.dark}
+						<Sun class="size-4" />
+					{:else}
+						<Moon class="size-4" />
+					{/if}
+				</Button>
 			</div>
-		</header>
-		<AppNav {datasetId} active={section} />
+		</div>
+	</header>
+	<AppNav {datasetId} active={section} />
 
-		<main class="app-shell__main min-h-0 flex-1 overflow-y-auto">
-			{@render children()}
-			<footer
-				class="text-muted-foreground border-border flex flex-col items-center justify-center gap-1 border-t py-6 text-xs"
-			>
-				<div class="flex flex-wrap items-center justify-center gap-x-2">
-					<a
-						href="https://onrg.gitlab.io"
-						class="hover:text-foreground"
-						target="_blank"
-						rel="noopener noreferrer"
-					>
-						ONRG
-					</a>
-					<span aria-hidden="true">&middot;</span>
-					<a
-						href="https://github.com/flamboh/atlantis"
-						class="hover:text-foreground"
-						target="_blank"
-						rel="noopener noreferrer"
-					>
-						GitHub
-					</a>
-				</div>
-				<div>Built as part of an NSF REU with the Oregon Networking Research Group</div>
-				<div>&copy; 2025 Oliver Boorstein &middot; MIT License</div>
-			</footer>
-		</main>
-	</div>
-</Tooltip.Provider>
+	<main class="app-shell__main min-h-0 flex-1 overflow-y-auto">
+		{@render children()}
+		<footer
+			class="text-muted-foreground border-border flex flex-col items-center justify-center gap-1 border-t py-6 text-xs"
+		>
+			<div class="flex flex-wrap items-center justify-center gap-x-2">
+				<a
+					href="https://onrg.gitlab.io"
+					class="hover:text-foreground"
+					target="_blank"
+					rel="noopener noreferrer"
+				>
+					ONRG
+				</a>
+				<span aria-hidden="true">&middot;</span>
+				<a
+					href="https://github.com/flamboh/atlantis"
+					class="hover:text-foreground"
+					target="_blank"
+					rel="noopener noreferrer"
+				>
+					GitHub
+				</a>
+			</div>
+			<div>Built as part of an NSF REU with the Oregon Networking Research Group</div>
+			<div>&copy; 2025 Oliver Boorstein &middot; MIT License</div>
+		</footer>
+	</main>
+</div>