Move metrics to dedicated nav item, simplify capsules page

- Add Metrics nav item to sidebar with bar chart icon
- Create /dashboard/metrics page wrapping StatsPanel
- Remove tabs from capsules page (list is now the only view)
- Flatten capsules route: /capsules directly shows the list,
  removing the /list and /stats sub-routes
- Strip redundant title/subtitle from StatsPanel (page header
  provides context)

frontend/src/lib/components/Sidebar.svelte

@@ -21,7 +21,8 @@
 		IconDocs,
 		IconAudit,
 		IconServer,
-		IconShield
+		IconShield,
+		IconMetrics
 	} from './icons';
 
 	let { collapsed = $bindable(false) }: { collapsed: boolean } = $props();
@@ -47,6 +48,7 @@
 
 	const platformItems: NavItem[] = [
 		{ label: 'Capsules', icon: IconMonitor, href: '/dashboard/capsules' },
+		{ label: 'Metrics', icon: IconMetrics, href: '/dashboard/metrics' },
 		{ label: 'Templates', icon: IconBox, href: '/dashboard/snapshots' }
 	];
 

frontend/src/lib/components/StatsPanel.svelte

@@ -250,22 +250,18 @@
 	}
 </script>
 
-<div class="flex flex-col gap-7 p-8" style="min-height: calc(100dvh - 200px); animation: fadeUp 0.35s ease both">
+<div class="flex flex-col gap-7 px-8 pb-8 pt-4" style="min-height: calc(100dvh - 200px); animation: fadeUp 0.35s ease both">
 
-	<!-- Header: title + controls -->
-	<div class="flex items-end justify-between">
-		<div>
-			<div class="flex items-center gap-2.5">
-				<h2 class="font-serif text-heading tracking-[-0.02em] text-[var(--color-text-bright)]">Usage Statistics</h2>
-				{#if !loading}
-					<span class="flex items-center gap-1 rounded-[3px] border border-[var(--color-accent)]/25 bg-[var(--color-accent-glow-mid)] px-1.5 py-0.5 text-badge font-semibold uppercase tracking-[0.05em] text-[var(--color-accent-mid)]">
-						<span class="h-[5px] w-[5px] rounded-full bg-[var(--color-accent)]" style="animation: wrenn-glow 2.5s ease-in-out infinite"></span>
-						Live
-					</span>
-				{/if}
-			</div>
-			<p class="mt-1 text-ui text-[var(--color-text-tertiary)]">Resource consumption across all capsules.</p>
-		</div>
+	<!-- Controls row -->
+	<div class="flex items-center justify-between">
+		{#if !loading}
+			<span class="flex items-center gap-1 rounded-[3px] border border-[var(--color-accent)]/25 bg-[var(--color-accent-glow-mid)] px-1.5 py-0.5 text-badge font-semibold uppercase tracking-[0.05em] text-[var(--color-accent-mid)]">
+				<span class="h-[5px] w-[5px] rounded-full bg-[var(--color-accent)]" style="animation: wrenn-glow 2.5s ease-in-out infinite"></span>
+				Live
+			</span>
+		{:else}
+			<div></div>
+		{/if}
 		<div class="flex items-center gap-3">
 			<!-- Range selector -->
 			<div class="flex overflow-hidden rounded-[var(--radius-button)] border border-[var(--color-border)]">

frontend/src/lib/components/icons/IconMetrics.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	let { size = 18, class: className = '' }: { size?: number; class?: string } = $props();
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="1.75"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class={className}
+	aria-hidden="true"
+>
+	<line x1="18" y1="20" x2="18" y2="10" />
+	<line x1="12" y1="20" x2="12" y2="4" />
+	<line x1="6" y1="20" x2="6" y2="14" />
+</svg>

frontend/src/lib/components/icons/index.ts

@@ -26,3 +26,4 @@ export { default as IconBox } from './IconBox.svelte';
 export { default as IconServer } from './IconServer.svelte';
 export { default as IconGear } from './IconGear.svelte';
 export { default as IconShield } from './IconShield.svelte';
+export { default as IconMetrics } from './IconMetrics.svelte';