From b2886c2f2bcf73d28e4f25495aff50d7845eae1d Mon Sep 17 00:00:00 2001
From: Piotr Oleszczyk <piotr@oleszczyk.eu>
Date: Fri, 6 Mar 2026 16:25:47 +0100
Subject: [PATCH] refactor(frontend): align observability panels with editorial
 design system
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace hardcoded gray-* colors with design system tokens:
- border-gray-200 → border-muted
- bg-gray-50 → bg-muted/30
- text-gray-600/700 → text-muted-foreground/foreground
- hover:bg-gray-100 → hover:bg-muted/50

Updated components:
- MetadataDebugPanel: now matches Card aesthetic
- ReasoningChainViewer: now uses warm editorial tones

Benefits:
- Consistent with existing reasoning/summary cards
- Matches warm editorial aesthetic (hsl(42...) palette)
- DRY: reuses design system tokens
- Documented collapsible panel pattern in cookbook

This fixes the cool gray panels that looked out of place among the warm beige editorial UI.
---
 docs/frontend-design-cookbook.md              | 23 ++++++++++++++-
 .../lib/components/MetadataDebugPanel.svelte  | 28 +++++++++----------
 .../components/ReasoningChainViewer.svelte    | 16 +++++------
 3 files changed, 44 insertions(+), 23 deletions(-)

diff --git a/docs/frontend-design-cookbook.md b/docs/frontend-design-cookbook.md
index 5dc1f00..ef98dba 100644
--- a/docs/frontend-design-cookbook.md
+++ b/docs/frontend-design-cookbook.md
@@ -83,7 +83,28 @@ Use these wrappers before introducing route-specific structure:
 - `editorial-panel`: primary surface for forms, tables, and ledgers.
 - `editorial-toolbar`: compact action row under hero copy.
 - `editorial-backlink`: standard top-left back navigation style.
-- `editorial-alert`, `editorial-alert--error`, `editorial-alert--success`: feedback banners.
+- `editorial-alert`, `editorial-alert--error`, `editorial-alert--success`, `editorial-alert--warning`, `editorial-alert--info`: feedback banners.
+
+### Collapsible panels
+
+For secondary information (debug data, reasoning chains, metadata), use this pattern:
+
+```svelte
+<div class="border border-muted rounded-lg overflow-hidden">
+  <button class="w-full flex items-center gap-2 px-4 py-3 bg-muted/30 hover:bg-muted/50 transition-colors">
+    <Icon class="size-4 text-muted-foreground" />
+    <span class="text-sm font-medium text-foreground">Panel Title</span>
+    <ChevronIcon class="ml-auto size-4 text-muted-foreground" />
+  </button>
+  {#if expanded}
+    <div class="p-4 bg-card border-t border-muted">
+      <!-- Content -->
+    </div>
+  {/if}
+</div>
+```
+
+This matches the warm editorial aesthetic and maintains visual consistency with Card components.
 
 ## Component rules
 
diff --git a/frontend/src/lib/components/MetadataDebugPanel.svelte b/frontend/src/lib/components/MetadataDebugPanel.svelte
index 22f035d..35d6e6a 100644
--- a/frontend/src/lib/components/MetadataDebugPanel.svelte
+++ b/frontend/src/lib/components/MetadataDebugPanel.svelte
@@ -16,37 +16,37 @@
 </script>
 
 {#if metadata}
-	<div class="border border-gray-200 rounded-lg overflow-hidden">
+	<div class="border border-muted rounded-lg overflow-hidden">
 		<button
 			type="button"
 			onclick={() => (expanded = !expanded)}
-			class="w-full flex items-center gap-2 px-4 py-3 bg-gray-50 hover:bg-gray-100 transition-colors"
+			class="w-full flex items-center gap-2 px-4 py-3 bg-muted/30 hover:bg-muted/50 transition-colors"
 		>
-			<Info class="size-4 text-gray-600" />
-			<span class="text-sm font-medium text-gray-700">Debug Information</span>
+			<Info class="size-4 text-muted-foreground" />
+			<span class="text-sm font-medium text-foreground">Debug Information</span>
 			<div class="ml-auto">
 				{#if expanded}
-					<ChevronDown class="size-4 text-gray-500" />
+					<ChevronDown class="size-4 text-muted-foreground" />
 				{:else}
-					<ChevronRight class="size-4 text-gray-500" />
+					<ChevronRight class="size-4 text-muted-foreground" />
 				{/if}
 			</div>
 		</button>
 		{#if expanded}
-			<div class="p-4 bg-white border-t border-gray-200">
+			<div class="p-4 bg-card border-t border-muted">
 				<dl class="grid grid-cols-1 gap-3 text-sm">
 					<div>
-						<dt class="font-medium text-gray-700">Model</dt>
-						<dd class="text-gray-600 font-mono text-xs mt-0.5">{metadata.model_used}</dd>
+						<dt class="font-medium text-foreground">Model</dt>
+						<dd class="text-muted-foreground font-mono text-xs mt-0.5">{metadata.model_used}</dd>
 					</div>
 					<div>
-						<dt class="font-medium text-gray-700">Duration</dt>
-						<dd class="text-gray-600">{formatNumber(metadata.duration_ms)} ms</dd>
+						<dt class="font-medium text-foreground">Duration</dt>
+						<dd class="text-muted-foreground">{formatNumber(metadata.duration_ms)} ms</dd>
 					</div>
 					{#if metadata.token_metrics}
 						<div>
-							<dt class="font-medium text-gray-700">Token Usage</dt>
-							<dd class="text-gray-600 space-y-1 mt-0.5">
+							<dt class="font-medium text-foreground">Token Usage</dt>
+							<dd class="text-muted-foreground space-y-1 mt-0.5">
 								<div class="flex justify-between">
 									<span>Prompt:</span>
 									<span class="font-mono text-xs"
@@ -67,7 +67,7 @@
 										>
 									</div>
 								{/if}
-								<div class="flex justify-between font-medium border-t border-gray-200 pt-1 mt-1">
+								<div class="flex justify-between font-medium border-t border-muted pt-1 mt-1">
 									<span>Total:</span>
 									<span class="font-mono text-xs"
 										>{formatNumber(metadata.token_metrics.total_tokens)}</span
diff --git a/frontend/src/lib/components/ReasoningChainViewer.svelte b/frontend/src/lib/components/ReasoningChainViewer.svelte
index 12c57b8..2bf61b1 100644
--- a/frontend/src/lib/components/ReasoningChainViewer.svelte
+++ b/frontend/src/lib/components/ReasoningChainViewer.svelte
@@ -11,26 +11,26 @@
 </script>
 
 {#if reasoningChain}
-	<div class="border border-gray-200 rounded-lg overflow-hidden">
+	<div class="border border-muted rounded-lg overflow-hidden">
 		<button
 			type="button"
 			onclick={() => (expanded = !expanded)}
-			class="w-full flex items-center gap-2 px-4 py-3 bg-gray-50 hover:bg-gray-100 transition-colors"
+			class="w-full flex items-center gap-2 px-4 py-3 bg-muted/30 hover:bg-muted/50 transition-colors"
 		>
-			<Brain class="size-4 text-gray-600" />
-			<span class="text-sm font-medium text-gray-700">AI Reasoning Process</span>
+			<Brain class="size-4 text-muted-foreground" />
+			<span class="text-sm font-medium text-foreground">AI Reasoning Process</span>
 			<div class="ml-auto">
 				{#if expanded}
-					<ChevronDown class="size-4 text-gray-500" />
+					<ChevronDown class="size-4 text-muted-foreground" />
 				{:else}
-					<ChevronRight class="size-4 text-gray-500" />
+					<ChevronRight class="size-4 text-muted-foreground" />
 				{/if}
 			</div>
 		</button>
 		{#if expanded}
-			<div class="p-4 bg-gray-50 border-t border-gray-200">
+			<div class="p-4 bg-muted/30 border-t border-muted">
 				<pre
-					class="text-xs font-mono whitespace-pre-wrap text-gray-700 leading-relaxed">{reasoningChain}</pre>
+					class="text-xs font-mono whitespace-pre-wrap text-muted-foreground leading-relaxed">{reasoningChain}</pre>
 			</div>
 		{/if}
 	</div>