feat(ui): Artix-style inset wells (chat thinking/tool blocks + sidebar views) and darkstrap navbar header in theme colours

4 files changed, 10 insertions, 5 deletions

diff --git a/src/features/chat/ui.test.ts b/src/features/chat/ui.test.ts
index 6a00e49..91585e2 100644
--- a/src/features/chat/ui.test.ts
+++ b/src/features/chat/ui.test.ts
@@ -285,8 +285,7 @@ describe("ChatView", () => {
     expect(collapse).not.toHaveClass("collapse-arrow"); // no indicator icon
     expect(collapse).not.toHaveClass("collapse-plus");
     // Visible bubble, like tool cards.
-    expect(collapse).toHaveClass("bg-base-200");
-    expect(collapse).toHaveClass("rounded-box");
+    expect(collapse).toHaveClass("inset-well"); // shared recessed panel (app.css)
     expect(screen.getByRole("checkbox", { name: "Toggle thoughts" })).toBeInTheDocument();
   });
 
diff --git a/src/features/chat/ui/LazyCollapse.svelte b/src/features/chat/ui/LazyCollapse.svelte
index 912adb4..3ce34dd 100644
--- a/src/features/chat/ui/LazyCollapse.svelte
+++ b/src/features/chat/ui/LazyCollapse.svelte
@@ -31,7 +31,9 @@
   });
 </script>
 
-<div class="collapse w-full rounded-box bg-base-200 text-sm">
+<!-- `.inset-well` (app.css): the recessed panel shared by thinking/tool blocks
+     and the sidebar views. -->
+<div class="collapse inset-well w-full text-sm">
   <input type="checkbox" aria-label={label} bind:checked={open} />
   <div class="collapse-title flex min-h-0 min-w-0 items-center gap-2 py-2 whitespace-nowrap font-medium {titleClass}">
     {@render title()}
diff --git a/src/features/chat/ui/ToolCard.svelte b/src/features/chat/ui/ToolCard.svelte
index 0a72bb5..10f8528 100644
--- a/src/features/chat/ui/ToolCard.svelte
+++ b/src/features/chat/ui/ToolCard.svelte
@@ -231,7 +231,9 @@
   .output-controls {
     padding-block: 0.5rem;
     color: var(--color-base-content);
-    background: var(--color-base-200);
+    /* Same fill as the LazyCollapse inset well this sits in (opaque, so
+       scrolled output never shows through the sticky bar). */
+    background: var(--inset-well-bg, var(--color-base-200));
   }
   .sticky-controls {
     position: sticky;
diff --git a/src/features/layout/ui/TilePanels.svelte b/src/features/layout/ui/TilePanels.svelte
index 78dd7d1..f7e1846 100644
--- a/src/features/layout/ui/TilePanels.svelte
+++ b/src/features/layout/ui/TilePanels.svelte
@@ -44,7 +44,9 @@
   style={renderMarker ? markerStyle(node.marker) : undefined}
 >
   {#each node.panels as panel, idx (idx)}
-    <div class="flex flex-col rounded-lg bg-base-200 p-3">
+    <!-- `.inset-well` (app.css): recessed into the sidebar, like the chat's
+         thinking/tool blocks. -->
+    <div class="inset-well flex flex-col p-3">
       <div class="flex items-center gap-1">
         <select
           class="select select-bordered select-sm flex-1"