piotr/innercontext
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(frontend): align observability panels with editorial design system

Browse source 
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.
This commit is contained in:
Piotr Oleszczyk 2026-03-06 16:25:47 +01:00
parent c8fa80be99
commit b2886c2f2b
3 changed files with 44 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

23
docs/frontend-design-cookbook.md
View file

@ -83,7 +83,28 @@ Use these wrappers before introducing route-specific structure:
- `editorial-panel`: primary surface for forms, tables, and ledgers. - `editorial-panel`: primary surface for forms, tables, and ledgers.
- `editorial-toolbar`: compact action row under hero copy. - `editorial-toolbar`: compact action row under hero copy.
- `editorial-backlink`: standard top-left back navigation style. - `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 ## Component rules

28
frontend/src/lib/components/MetadataDebugPanel.svelte
View file

@ -16,37 +16,37 @@
</script> </script>
{#if metadata} {#if metadata}
<div class="border border-gray-200 rounded-lg overflow-hidden"> <div class="border border-muted rounded-lg overflow-hidden">
<button <button
type="button" type="button"
onclick={() => (expanded = !expanded)} 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" /> <Info class="size-4 text-muted-foreground" />
<span class="text-sm font-medium text-gray-700">Debug Information</span> <span class="text-sm font-medium text-foreground">Debug Information</span>
<div class="ml-auto"> <div class="ml-auto">
{#if expanded} {#if expanded}
<ChevronDown class="size-4 text-gray-500" /> <ChevronDown class="size-4 text-muted-foreground" />
{:else} {:else}
<ChevronRight class="size-4 text-gray-500" /> <ChevronRight class="size-4 text-muted-foreground" />
{/if} {/if}
</div> </div>
</button> </button>
{#if expanded} {#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"> <dl class="grid grid-cols-1 gap-3 text-sm">
<div> <div>
<dt class="font-medium text-gray-700">Model</dt> <dt class="font-medium text-foreground">Model</dt>
<dd class="text-gray-600 font-mono text-xs mt-0.5">{metadata.model_used}</dd> <dd class="text-muted-foreground font-mono text-xs mt-0.5">{metadata.model_used}</dd>
</div> </div>
<div> <div>
<dt class="font-medium text-gray-700">Duration</dt> <dt class="font-medium text-foreground">Duration</dt>
<dd class="text-gray-600">{formatNumber(metadata.duration_ms)} ms</dd> <dd class="text-muted-foreground">{formatNumber(metadata.duration_ms)} ms</dd>
</div> </div>
{#if metadata.token_metrics} {#if metadata.token_metrics}
<div> <div>
<dt class="font-medium text-gray-700">Token Usage</dt> <dt class="font-medium text-foreground">Token Usage</dt>
<dd class="text-gray-600 space-y-1 mt-0.5"> <dd class="text-muted-foreground space-y-1 mt-0.5">
<div class="flex justify-between"> <div class="flex justify-between">
<span>Prompt:</span> <span>Prompt:</span>
<span class="font-mono text-xs" <span class="font-mono text-xs"
@ -67,7 +67,7 @@
> >
</div> </div>
{/if} {/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>Total:</span>
<span class="font-mono text-xs" <span class="font-mono text-xs"
>{formatNumber(metadata.token_metrics.total_tokens)}</span >{formatNumber(metadata.token_metrics.total_tokens)}</span

16
frontend/src/lib/components/ReasoningChainViewer.svelte
View file

@ -11,26 +11,26 @@
</script> </script>
{#if reasoningChain} {#if reasoningChain}
<div class="border border-gray-200 rounded-lg overflow-hidden"> <div class="border border-muted rounded-lg overflow-hidden">
<button <button
type="button" type="button"
onclick={() => (expanded = !expanded)} 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" /> <Brain class="size-4 text-muted-foreground" />
<span class="text-sm font-medium text-gray-700">AI Reasoning Process</span> <span class="text-sm font-medium text-foreground">AI Reasoning Process</span>
<div class="ml-auto"> <div class="ml-auto">
{#if expanded} {#if expanded}
<ChevronDown class="size-4 text-gray-500" /> <ChevronDown class="size-4 text-muted-foreground" />
{:else} {:else}
<ChevronRight class="size-4 text-gray-500" /> <ChevronRight class="size-4 text-muted-foreground" />
{/if} {/if}
</div> </div>
</button> </button>
{#if expanded} {#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 <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> </div>
{/if} {/if}
</div> </div>