From 900738ef1aa8e6ff7794a7cb1d2592627e995cd2 Mon Sep 17 00:00:00 2001
From: Tree Trunks
 <6ba22921d9dc2ad0aa6ecdf63787ddd24726e266d866da31af69f2e4e146ace5@buzz.block.builderlab.xyz>
Date: Fri, 25 Sep 2026 18:03:56 -0700
Subject: [PATCH 1/9] Polish top bar and animate contextual sidebar toggle

Co-authored-by: Peppermint Butler <29b529ff43be424db89f51bff58a38cf86942acbffff98a14ce50b38c2a57d8f@buzz.block.builderlab.xyz>
Signed-off-by: Tree Trunks <6ba22921d9dc2ad0aa6ecdf63787ddd24726e266d866da31af69f2e4e146ace5@buzz.block.builderlab.xyz>
---
 src/app/shell/AppShell.tsx             |  51 +++++++++++-
 src/app/shell/NavigationControls.tsx   |   2 +-
 src/app/shell/PanelLaunchers.tsx       |   2 +-
 src/app/shell/ProfileButton.module.css |  17 ++++
 src/app/shell/ProfileButton.tsx        |   2 +-
 src/shared/styles/globals.css          |  63 ++++++++++++++-
 tests/browser/sidenav-polish.spec.mjs  | 108 +++++++++++++++++++++++++
 7 files changed, 236 insertions(+), 9 deletions(-)

diff --git a/src/app/shell/AppShell.tsx b/src/app/shell/AppShell.tsx
index 2a6f19d4f..f79f8ca15 100644
--- a/src/app/shell/AppShell.tsx
+++ b/src/app/shell/AppShell.tsx
@@ -1,5 +1,11 @@
 import { NavigationItem } from "../../shared/design-system/ui/NavigationItem";
-import { useEffect, useRef, useState, type ReactNode } from "react";
+import {
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
 import { IconButton } from "../../shared/design-system/ui/IconButton";
 import { SidebarIcon } from "../../shared/design-system/icons";
 import { Panel } from "../../shared/design-system/ui/Panel";
@@ -49,6 +55,26 @@ export function AppShell({
   children: ReactNode;
 }) {
   const fillsWorkspace = workspace || selected === "settings";
+  const channelsNavigation =
+    selected === "buzz.channels/channels" || selected === "buzz.agents/agents";
+  const [sidebarOpen, setSidebarOpen] = useState(true);
+  const sidebarNavigation = useRef<HTMLDivElement>(null);
+  useLayoutEffect(() => {
+    if (!channelsNavigation || !sidebarNavigation.current) return;
+    const navigation = sidebarNavigation.current;
+    const sidebar = navigation.querySelector<HTMLElement>(".shell-sidebar");
+    if (!sidebar) return;
+    const updateWidth = () => {
+      navigation.style.setProperty(
+        "--shell-navigation-width",
+        `${sidebar.getBoundingClientRect().width}px`,
+      );
+    };
+    updateWidth();
+    const observer = new ResizeObserver(updateWidth);
+    observer.observe(sidebar);
+    return () => observer.disconnect();
+  }, [channelsNavigation]);
   const [navigationOpen, setNavigationOpen] = useState(false);
   const navigationToggle = useRef<HTMLButtonElement>(null);
   useEffect(() => {
@@ -103,6 +129,23 @@ export function AppShell({
           data-tauri-drag-region={macDesktop ? undefined : true}
           {...titleBarDragProps}
         >
+          {channelsNavigation && (
+            <IconButton
+              type="button"
+              variant="chrome"
+              shape="round"
+              aria-label={
+                sidebarOpen ? "Hide Channel sidebar" : "Show Channel sidebar"
+              }
+              aria-expanded={sidebarOpen}
+              aria-controls="shell-navigation"
+              title={
+                sidebarOpen ? "Hide Channel sidebar" : "Show Channel sidebar"
+              }
+              onClick={() => setSidebarOpen((open) => !open)}
+              icon={<SidebarIcon aria-hidden="true" size={16} />}
+            />
+          )}
           {navigationControls}
           {selected === "settings" && (
             <span className="shell-navigation-toggle">
@@ -144,10 +187,14 @@ export function AppShell({
         <div
           className={`shell-body ${selected === "settings" ? "shell-body-settings" : ""}`}
         >
-          {/* biome-ignore lint/a11y/noStaticElementInteractions: Delegated Escape from descendant controls closes the disclosure; the layout wrapper is not itself interactive. */}
           <div
             id="shell-navigation"
+            ref={sidebarNavigation}
             className="shell-navigation"
+            data-sidebar-collapsible={channelsNavigation || undefined}
+            data-sidebar-open={sidebarOpen || undefined}
+            aria-hidden={channelsNavigation && !sidebarOpen}
+            inert={channelsNavigation && !sidebarOpen}
             data-expanded={navigationOpen}
             onKeyDown={(event) => {
               if (
diff --git a/src/app/shell/NavigationControls.tsx b/src/app/shell/NavigationControls.tsx
index 2c8977f40..60007edf9 100644
--- a/src/app/shell/NavigationControls.tsx
+++ b/src/app/shell/NavigationControls.tsx
@@ -9,7 +9,7 @@ export function NavigationControls({ navigation }: { navigation: Navigation }) {
   const state = useSyncExternalStore(navigation.subscribe, navigation.snapshot);
   return (
     <nav
-      className="mr-2 flex shrink-0 items-center gap-0.5"
+      className="flex shrink-0 items-center gap-1"
       aria-label="Navigation history"
     >
       <IconButton
diff --git a/src/app/shell/PanelLaunchers.tsx b/src/app/shell/PanelLaunchers.tsx
index 599042e43..2bc219d6e 100644
--- a/src/app/shell/PanelLaunchers.tsx
+++ b/src/app/shell/PanelLaunchers.tsx
@@ -36,7 +36,7 @@ export function PanelLaunchers({
 function LauncherIcon({ src }: { src: string }) {
   const [failed, setFailed] = useState(false);
   return failed ? (
-    <SidebarIcon size={18} aria-hidden="true" />
+    <SidebarIcon size={16} aria-hidden="true" />
   ) : (
     <img
       src={src}
diff --git a/src/app/shell/ProfileButton.module.css b/src/app/shell/ProfileButton.module.css
index bdc207e67..2808880b7 100644
--- a/src/app/shell/ProfileButton.module.css
+++ b/src/app/shell/ProfileButton.module.css
@@ -1,3 +1,20 @@
+.triggerAvatar {
+  pointer-events: none;
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: var(--surface-panel);
+}
+
+/* biome-ignore lint/correctness/noUnknownPseudoClass: CSS Modules global selector targets the shared Avatar element. */
+.triggerAvatar :global(.buzz-avatar) {
+  background: transparent;
+}
+
 .profileHeader {
   display: flex;
   align-items: center;
diff --git a/src/app/shell/ProfileButton.tsx b/src/app/shell/ProfileButton.tsx
index 4c0066b78..c3b47b2b5 100644
--- a/src/app/shell/ProfileButton.tsx
+++ b/src/app/shell/ProfileButton.tsx
@@ -179,7 +179,7 @@ export function ProfileButton({
               shape="round"
               icon={
                 <span
-                  className="pointer-events-none relative flex size-full items-center justify-center rounded-full"
+                  className={styles.triggerAvatar}
                   role="img"
                   aria-label={viewer ? `Your status: ${label}` : "Your avatar"}
                 >
diff --git a/src/shared/styles/globals.css b/src/shared/styles/globals.css
index 3a9514542..815b6adb6 100644
--- a/src/shared/styles/globals.css
+++ b/src/shared/styles/globals.css
@@ -185,16 +185,28 @@
   }
 
   .shell-header {
-    @apply flex h-14 shrink-0 items-center justify-between gap-3 pl-4 pr-2 sm:pr-4;
+    @apply flex shrink-0 items-center justify-between;
+    height: 48px;
+    padding-left: var(--space-4);
+    padding-right: var(--space-2);
+    gap: var(--space-2);
+    background: color-mix(in srgb, var(--bg-app) 72%, var(--surface-panel));
+  }
+  @media (min-width: 640px) {
+    .shell-header {
+      padding-right: var(--space-4);
+    }
   }
   .shell-communities {
     @apply flex min-w-0 items-center justify-start;
+    gap: var(--space-1);
+    padding-left: var(--space-4);
   }
   .shell-communities > .navigation-item {
     flex-shrink: 1;
   }
   .shell-header-mac .shell-communities {
-    padding-left: var(--space-16);
+    padding-left: calc(var(--space-16) + var(--space-4));
   }
   .shell-pages {
     @apply flex min-h-0 min-w-0 flex-col gap-1 overflow-y-auto;
@@ -207,6 +219,26 @@
   .shell-navigation {
     display: contents;
   }
+  .shell-navigation[data-sidebar-collapsible] {
+    display: flex;
+    min-width: 0;
+    flex: none;
+    width: var(--shell-navigation-width, 260px);
+    margin-right: var(--space-panel-gap);
+    overflow: clip;
+    transition:
+      width var(--duration-settle) cubic-bezier(0.22, 1, 0.36, 1),
+      margin-right var(--duration-settle) cubic-bezier(0.22, 1, 0.36, 1);
+  }
+  .shell-navigation[data-sidebar-collapsible][aria-hidden="true"] {
+    width: 0;
+    margin-right: 0;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .shell-navigation[data-sidebar-collapsible] {
+      transition: none;
+    }
+  }
   .shell-navigation-toggle {
     display: none;
   }
@@ -226,12 +258,35 @@
   .shell-sidebar-default > * {
     @apply min-w-0 flex-1;
   }
+  .shell-navigation[data-sidebar-collapsible] > .shell-sidebar {
+    flex: none;
+    max-width: none;
+  }
   .shell-actions {
-    @apply flex items-center justify-end gap-2;
+    @apply flex items-center justify-end;
+    gap: var(--space-2);
+  }
+  .shell-header .buzz-button[data-icon-variant="chrome"] {
+    width: 28px;
+    height: 28px;
+    background: var(--surface-panel);
+    box-shadow: none;
+  }
+  .shell-header .buzz-button[data-icon-variant="chrome"] svg {
+    width: 16px;
+    height: 16px;
+  }
+  .shell-header
+    .buzz-button[data-icon-variant="chrome"]:hover:not([data-disabled]) {
+    background: var(--affordance-subtle-hover);
   }
   @media (max-width: 700px) {
     .shell-header {
-      @apply gap-2 pl-2;
+      padding-left: var(--space-2);
+      gap: var(--space-2);
+    }
+    .shell-communities {
+      padding-left: var(--space-4);
     }
   }
   @media (max-width: 650px) {
diff --git a/tests/browser/sidenav-polish.spec.mjs b/tests/browser/sidenav-polish.spec.mjs
index c07e24e0d..fd4956091 100644
--- a/tests/browser/sidenav-polish.spec.mjs
+++ b/tests/browser/sidenav-polish.spec.mjs
@@ -192,6 +192,114 @@ test("section disclosure toggles content and honors reduced motion", async ({
   ).toBe(28);
 });
 
+// The shell owns sidebar visibility while the mounted sidebar owns route and width state.
+test("shell toggle restores the shared sidebar for Channels and Agents", async ({
+  page,
+  app,
+}) => {
+  await open(page, app);
+  const rail = page.getByRole("navigation", { name: "Communities" });
+  const shellNavigation = page.locator("#shell-navigation");
+  const sidebar = page.getByRole("complementary", {
+    name: "Channel sidebar",
+    exact: true,
+  });
+  const sidebarNode = await sidebar.elementHandle();
+  const expandedWidth = (await sidebar.boundingBox()).width;
+  const track = await shellNavigation.evaluate((node) => {
+    const style = getComputedStyle(node);
+    return {
+      width: node.getBoundingClientRect().width,
+      property: style.transitionProperty,
+      duration: style.transitionDuration,
+    };
+  });
+  expect(track.width).toBe(expandedWidth);
+  expect(track.property).toContain("width");
+  expect(track.property).toContain("margin-right");
+  expect(parseFloat(track.duration)).toBeGreaterThan(0);
+  const openGap = await page.evaluate(() => {
+    const nav = document.querySelector("#shell-navigation");
+    const main = document.querySelector("#main-content");
+    if (!(nav instanceof HTMLElement) || !(main instanceof HTMLElement))
+      throw new Error("Missing shell panels");
+    return {
+      actual:
+        main.getBoundingClientRect().left - nav.getBoundingClientRect().right,
+      token: Number.parseFloat(getComputedStyle(nav).marginRight),
+    };
+  });
+  expect(openGap.actual).toBe(openGap.token);
+  expect(openGap.actual).toBeGreaterThan(0);
+  await page.emulateMedia({ reducedMotion: "reduce" });
+  await expect
+    .poll(() =>
+      shellNavigation.evaluate(
+        (node) => getComputedStyle(node).transitionDuration,
+      ),
+    )
+    .toBe("0s");
+  await page.emulateMedia({ reducedMotion: "no-preference" });
+
+  await page.getByRole("button", { name: "Hide Channel sidebar" }).click();
+  await page.getByRole("button", { name: "Show Channel sidebar" }).click();
+  await expect
+    .poll(() =>
+      shellNavigation.evaluate((node) => node.getBoundingClientRect().width),
+    )
+    .toBe(expandedWidth);
+
+  await page.getByRole("button", { name: "Hide Channel sidebar" }).click();
+  await expect(shellNavigation).toHaveAttribute("aria-hidden", "true");
+  await expect(sidebar).not.toBeVisible();
+  await expect
+    .poll(() =>
+      page.evaluate(() => {
+        const nav = document.querySelector("#shell-navigation");
+        const main = document.querySelector("#main-content");
+        if (!(nav instanceof HTMLElement) || !(main instanceof HTMLElement))
+          throw new Error("Missing shell panels");
+        return (
+          main.getBoundingClientRect().left - nav.getBoundingClientRect().right
+        );
+      }),
+    )
+    .toBe(0);
+  await expect(rail).toBeVisible();
+  await expect(
+    page.getByRole("textbox", { name: "Message #Alpha", exact: true }),
+  ).toBeVisible();
+
+  await page.getByRole("button", { name: "Show Channel sidebar" }).click();
+  await expect(shellNavigation).not.toHaveAttribute("aria-hidden", "true");
+  await expect(sidebar).toBeVisible();
+  expect(await sidebarNode.evaluate((element) => element.isConnected)).toBe(
+    true,
+  );
+  expect((await sidebar.boundingBox()).width).toBe(expandedWidth);
+
+  await sidebar.getByRole("button", { name: "Agents", exact: true }).click();
+  await expect(
+    page.getByRole("heading", { name: "Agents", exact: true }),
+  ).toBeVisible();
+  await page.getByRole("button", { name: "Hide Channel sidebar" }).click();
+  await expect(sidebar).not.toBeVisible();
+  await expect(rail).toBeVisible();
+  await expect(
+    page.getByRole("heading", { name: "Agents", exact: true }),
+  ).toBeVisible();
+
+  await page.getByRole("button", { name: "Show Channel sidebar" }).click();
+  await expect(sidebar).toBeVisible();
+  expect(await sidebarNode.evaluate((element) => element.isConnected)).toBe(
+    true,
+  );
+  expect((await sidebar.boundingBox()).width).toBe(expandedWidth);
+  await expect(
+    sidebar.getByRole("button", { name: "Agents", exact: true }),
+  ).toHaveAttribute("aria-current", "page");
+});
+
 // A real grid/overlay measurement is needed: DOM presence misses implicit columns.
 test("placeholder destinations retain companion layout across navigation and resize", async ({
   page,

From 64f4ecde1c2847ddfe629acb02d51d634bdab170 Mon Sep 17 00:00:00 2001
From: Tree Trunks
 <6ba22921d9dc2ad0aa6ecdf63787ddd24726e266d866da31af69f2e4e146ace5@buzz.block.builderlab.xyz>
Date: Mon, 28 Sep 2026 14:45:25 -0700
Subject: [PATCH 2/9] Fix top-bar sizing and preserve sidebar toggle on
 Settings

Signed-off-by: Tree Trunks <6ba22921d9dc2ad0aa6ecdf63787ddd24726e266d866da31af69f2e4e146ace5@buzz.block.builderlab.xyz>
---
 src/app/shell/AppShell.tsx             |  89 +++++++--------
 src/app/shell/NavigationControls.tsx   |  16 +--
 src/app/shell/PageSearch.tsx           |   8 +-
 src/app/shell/PanelLaunchers.tsx       |   2 +-
 src/app/shell/ProfileButton.module.css |   1 -
 src/shared/styles/globals.css          |  37 +++----
 tests/browser/layout.spec.mjs          |   4 +-
 tests/browser/sidenav-polish.spec.mjs  | 143 ++++++++++++++++++++++---
 8 files changed, 191 insertions(+), 109 deletions(-)

diff --git a/src/app/shell/AppShell.tsx b/src/app/shell/AppShell.tsx
index f79f8ca15..856cb0ef6 100644
--- a/src/app/shell/AppShell.tsx
+++ b/src/app/shell/AppShell.tsx
@@ -1,11 +1,5 @@
 import { NavigationItem } from "../../shared/design-system/ui/NavigationItem";
-import {
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-  type ReactNode,
-} from "react";
+import { useEffect, useRef, useState, type ReactNode } from "react";
 import { IconButton } from "../../shared/design-system/ui/IconButton";
 import { SidebarIcon } from "../../shared/design-system/icons";
 import { Panel } from "../../shared/design-system/ui/Panel";
@@ -57,26 +51,29 @@ export function AppShell({
   const fillsWorkspace = workspace || selected === "settings";
   const channelsNavigation =
     selected === "buzz.channels/channels" || selected === "buzz.agents/agents";
+  const [narrow, setNarrow] = useState(
+    () => window.matchMedia("(max-width: 650px)").matches,
+  );
+  useEffect(() => {
+    const query = window.matchMedia("(max-width: 650px)");
+    const update = () => setNarrow(query.matches);
+    update();
+    query.addEventListener("change", update);
+    return () => query.removeEventListener("change", update);
+  }, []);
+  const settingsOverlay = selected === "settings" && narrow;
+  const collapsibleSidebar = channelsNavigation || selected === "settings";
   const [sidebarOpen, setSidebarOpen] = useState(true);
-  const sidebarNavigation = useRef<HTMLDivElement>(null);
-  useLayoutEffect(() => {
-    if (!channelsNavigation || !sidebarNavigation.current) return;
-    const navigation = sidebarNavigation.current;
-    const sidebar = navigation.querySelector<HTMLElement>(".shell-sidebar");
-    if (!sidebar) return;
-    const updateWidth = () => {
-      navigation.style.setProperty(
-        "--shell-navigation-width",
-        `${sidebar.getBoundingClientRect().width}px`,
-      );
-    };
-    updateWidth();
-    const observer = new ResizeObserver(updateWidth);
-    observer.observe(sidebar);
-    return () => observer.disconnect();
-  }, [channelsNavigation]);
   const [navigationOpen, setNavigationOpen] = useState(false);
   const navigationToggle = useRef<HTMLButtonElement>(null);
+  const visibleSidebar = settingsOverlay ? navigationOpen : sidebarOpen;
+  const toggleLabel = settingsOverlay
+    ? navigationOpen
+      ? "Hide navigation"
+      : "Show navigation"
+    : sidebarOpen
+      ? "Hide Channel sidebar"
+      : "Show Channel sidebar";
   useEffect(() => {
     if (selected !== "settings") setNavigationOpen(false);
   }, [selected]);
@@ -129,38 +126,25 @@ export function AppShell({
           data-tauri-drag-region={macDesktop ? undefined : true}
           {...titleBarDragProps}
         >
-          {channelsNavigation && (
+          {collapsibleSidebar && (
             <IconButton
+              ref={navigationToggle}
+              data-shell-sidebar-toggle=""
               type="button"
               variant="chrome"
               shape="round"
-              aria-label={
-                sidebarOpen ? "Hide Channel sidebar" : "Show Channel sidebar"
-              }
-              aria-expanded={sidebarOpen}
+              aria-label={toggleLabel}
+              aria-expanded={visibleSidebar}
               aria-controls="shell-navigation"
-              title={
-                sidebarOpen ? "Hide Channel sidebar" : "Show Channel sidebar"
-              }
-              onClick={() => setSidebarOpen((open) => !open)}
+              title={toggleLabel}
+              onClick={() => {
+                if (settingsOverlay) setNavigationOpen((open) => !open);
+                else setSidebarOpen((open) => !open);
+              }}
               icon={<SidebarIcon aria-hidden="true" size={16} />}
             />
           )}
           {navigationControls}
-          {selected === "settings" && (
-            <span className="shell-navigation-toggle">
-              <IconButton
-                ref={navigationToggle}
-                aria-label={
-                  navigationOpen ? "Hide navigation" : "Show navigation"
-                }
-                aria-expanded={navigationOpen}
-                aria-controls="shell-navigation"
-                onClick={() => setNavigationOpen((open) => !open)}
-                icon={<SidebarIcon aria-hidden="true" size={20} />}
-              />
-            </span>
-          )}
         </div>
         <div
           className="shell-actions"
@@ -189,12 +173,13 @@ export function AppShell({
         >
           <div
             id="shell-navigation"
-            ref={sidebarNavigation}
             className="shell-navigation"
-            data-sidebar-collapsible={channelsNavigation || undefined}
-            data-sidebar-open={sidebarOpen || undefined}
-            aria-hidden={channelsNavigation && !sidebarOpen}
-            inert={channelsNavigation && !sidebarOpen}
+            data-sidebar-collapsible={
+              (collapsibleSidebar && !settingsOverlay) || undefined
+            }
+            data-sidebar-open={visibleSidebar || undefined}
+            aria-hidden={collapsibleSidebar && !visibleSidebar}
+            inert={collapsibleSidebar && !visibleSidebar}
             data-expanded={navigationOpen}
             onKeyDown={(event) => {
               if (
diff --git a/src/app/shell/NavigationControls.tsx b/src/app/shell/NavigationControls.tsx
index 60007edf9..07747e9cc 100644
--- a/src/app/shell/NavigationControls.tsx
+++ b/src/app/shell/NavigationControls.tsx
@@ -20,13 +20,7 @@ export function NavigationControls({ navigation }: { navigation: Navigation }) {
         title="Go back"
         disabled={!state.canGoBack}
         onClick={navigation.back}
-        icon={
-          <ArrowLeftIcon
-            size={20}
-            style={{ width: "var(--space-5)", height: "var(--space-5)" }}
-            aria-hidden="true"
-          />
-        }
+        icon={<ArrowLeftIcon size={16} aria-hidden="true" />}
       />
       <IconButton
         type="button"
@@ -36,13 +30,7 @@ export function NavigationControls({ navigation }: { navigation: Navigation }) {
         title="Go forward"
         disabled={!state.canGoForward}
         onClick={navigation.forward}
-        icon={
-          <ArrowRightIcon
-            size={20}
-            style={{ width: "var(--space-5)", height: "var(--space-5)" }}
-            aria-hidden="true"
-          />
-        }
+        icon={<ArrowRightIcon size={16} aria-hidden="true" />}
       />
     </nav>
   );
diff --git a/src/app/shell/PageSearch.tsx b/src/app/shell/PageSearch.tsx
index 019e5a013..cdc1f4c17 100644
--- a/src/app/shell/PageSearch.tsx
+++ b/src/app/shell/PageSearch.tsx
@@ -153,13 +153,7 @@ export function PageSearch({
           trigger.current?.focus();
           begin();
         }}
-        icon={
-          <MagnifyingGlassIcon
-            size={20}
-            style={{ width: "var(--space-5)", height: "var(--space-5)" }}
-            aria-hidden="true"
-          />
-        }
+        icon={<MagnifyingGlassIcon size={16} aria-hidden="true" />}
       />
       <Dialog
         open={open}
diff --git a/src/app/shell/PanelLaunchers.tsx b/src/app/shell/PanelLaunchers.tsx
index 2bc219d6e..99b8d5d3c 100644
--- a/src/app/shell/PanelLaunchers.tsx
+++ b/src/app/shell/PanelLaunchers.tsx
@@ -41,7 +41,7 @@ function LauncherIcon({ src }: { src: string }) {
     <img
       src={src}
       alt=""
-      className="size-4 object-contain"
+      className="object-contain"
       onError={() => setFailed(true)}
     />
   );
diff --git a/src/app/shell/ProfileButton.module.css b/src/app/shell/ProfileButton.module.css
index 2808880b7..49d4ff1f5 100644
--- a/src/app/shell/ProfileButton.module.css
+++ b/src/app/shell/ProfileButton.module.css
@@ -7,7 +7,6 @@
   align-items: center;
   justify-content: center;
   border-radius: 50%;
-  background: var(--surface-panel);
 }
 
 /* biome-ignore lint/correctness/noUnknownPseudoClass: CSS Modules global selector targets the shared Avatar element. */
diff --git a/src/shared/styles/globals.css b/src/shared/styles/globals.css
index 815b6adb6..56d16afc2 100644
--- a/src/shared/styles/globals.css
+++ b/src/shared/styles/globals.css
@@ -223,25 +223,20 @@
     display: flex;
     min-width: 0;
     flex: none;
-    width: var(--shell-navigation-width, 260px);
-    margin-right: var(--space-panel-gap);
-    overflow: clip;
-    transition:
-      width var(--duration-settle) cubic-bezier(0.22, 1, 0.36, 1),
-      margin-right var(--duration-settle) cubic-bezier(0.22, 1, 0.36, 1);
+    width: max-content;
+    max-width: max(132px, calc(100% - 336px));
+    overflow: visible;
+    clip-path: inset(0 0 0 0);
+    transition: max-width var(--duration-settle) ease-in-out;
   }
   .shell-navigation[data-sidebar-collapsible][aria-hidden="true"] {
-    width: 0;
-    margin-right: 0;
+    max-width: 0;
   }
   @media (prefers-reduced-motion: reduce) {
     .shell-navigation[data-sidebar-collapsible] {
       transition: none;
     }
   }
-  .shell-navigation-toggle {
-    display: none;
-  }
   .shell-body {
     @apply relative flex min-h-0 min-w-0 flex-1 pl-0 pr-2 pb-2 sm:pl-0 sm:pr-4 sm:pb-4;
   }
@@ -260,24 +255,33 @@
   }
   .shell-navigation[data-sidebar-collapsible] > .shell-sidebar {
     flex: none;
-    max-width: none;
+    max-width: calc(100% - var(--space-panel-gap));
   }
   .shell-actions {
     @apply flex items-center justify-end;
     gap: var(--space-2);
   }
-  .shell-header .buzz-button[data-icon-variant="chrome"] {
+  .shell-header .buzz-button[data-icon-variant] {
     width: 28px;
     height: 28px;
+  }
+  .shell-header .buzz-button[data-shell-sidebar-toggle] {
     background: var(--surface-panel);
     box-shadow: none;
   }
-  .shell-header .buzz-button[data-icon-variant="chrome"] svg {
+  .shell-header .buzz-button[data-icon-variant] svg,
+  .shell-header .buzz-button[data-icon-variant="chrome"] img {
     width: 16px;
     height: 16px;
   }
   .shell-header
-    .buzz-button[data-icon-variant="chrome"]:hover:not([data-disabled]) {
+    .buzz-button[data-icon-variant="chrome"]
+    img[src="/bestie.png"] {
+    width: 18px;
+    height: 18px;
+  }
+  .shell-header
+    .buzz-button[data-shell-sidebar-toggle]:hover:not([data-disabled]) {
     background: var(--affordance-subtle-hover);
   }
   @media (max-width: 700px) {
@@ -298,9 +302,6 @@
     .shell-sidebar-default {
       margin-right: var(--space-1);
     }
-    .shell-navigation-toggle {
-      display: inline-flex;
-    }
     .shell-body-settings .shell-navigation {
       display: none;
     }
diff --git a/tests/browser/layout.spec.mjs b/tests/browser/layout.spec.mjs
index 1c10e2d3d..143e852bb 100644
--- a/tests/browser/layout.spec.mjs
+++ b/tests/browser/layout.spec.mjs
@@ -193,8 +193,8 @@ test("bento surfaces, sidebar pages, real link panel and compact community navig
   near(rail.width, 48);
   near(sidebar.x, rail.x + rail.width);
   near(before.x - sidebar.x - sidebar.width, 8);
-  near(before.y, 56);
-  near(before.height, 760);
+  near(before.y, 48);
+  near(before.height, 768);
   const background = await page
     .locator(".shell-background")
     .evaluate((el) => getComputedStyle(el).backgroundImage);
diff --git a/tests/browser/sidenav-polish.spec.mjs b/tests/browser/sidenav-polish.spec.mjs
index fd4956091..a6b038d4c 100644
--- a/tests/browser/sidenav-polish.spec.mjs
+++ b/tests/browser/sidenav-polish.spec.mjs
@@ -192,6 +192,74 @@ test("section disclosure toggles content and honors reduced motion", async ({
   ).toBe(28);
 });
 
+// Browser layout verifies the header contract, including inline icon sizing.
+test("top bar keeps 28px controls, 16px icons and an 18px Bestie image", async ({
+  page,
+  app,
+}, info) => {
+  await open(page, app);
+  const header = page.locator(".shell-header");
+  await expect(header).toBeVisible();
+  expect((await header.boundingBox()).height).toBe(48);
+  const controls = header.locator(".buzz-button[data-icon-variant]");
+  expect(await controls.count()).toBeGreaterThanOrEqual(5);
+  for (const control of await controls.all()) {
+    const box = await control.boundingBox();
+    expect([box.width, box.height]).toEqual([28, 28]);
+  }
+  const icons = header.locator(
+    '.buzz-button[data-icon-variant] svg, .buzz-button[data-icon-variant="chrome"] img:not([src="/bestie.png"])',
+  );
+  expect(await icons.count()).toBeGreaterThanOrEqual(4);
+  for (const icon of await icons.all()) {
+    const box = await icon.boundingBox();
+    expect([box.width, box.height]).toEqual([16, 16]);
+  }
+  const bestie = await header.locator('img[src="/bestie.png"]').boundingBox();
+  expect([bestie.width, bestie.height]).toEqual([18, 18]);
+  await page.screenshot({ path: info.outputPath("top-bar.png") });
+});
+
+// Real responsive layout owns the Settings overlay and the desktop sidebar.
+test("Settings retains the sidebar toggle across desktop and narrow layouts", async ({
+  page,
+  app,
+}) => {
+  await open(page, app);
+  await page.getByRole("button", { name: "Hide Channel sidebar" }).click();
+  await page.getByRole("button", { name: "Your profile" }).click();
+  await page.getByRole("menuitem", { name: "Settings", exact: true }).click();
+  const sidebar = page.getByRole("complementary", {
+    name: "Channel sidebar",
+    exact: true,
+  });
+  const toggle = page.locator("[data-shell-sidebar-toggle]");
+  await expect(toggle).toHaveCount(1);
+  await expect(toggle).toHaveAccessibleName("Show Channel sidebar");
+  await expect(sidebar).not.toBeVisible();
+  await toggle.click();
+  await expect(sidebar).toBeVisible();
+  await expect(toggle).toHaveAttribute("aria-expanded", "true");
+  const box = await toggle.boundingBox();
+  expect([box.width, box.height]).toEqual([28, 28]);
+  await toggle.click();
+  await expect(sidebar).not.toBeVisible();
+
+  await page.setViewportSize({ width: 600, height: 950 });
+  await expect(toggle).toHaveAccessibleName("Show navigation");
+  await toggle.click();
+  await expect(sidebar).toBeVisible();
+  await expect(toggle).toHaveAccessibleName("Hide navigation");
+  await sidebar.getByRole("button", { name: "Inbox", exact: true }).focus();
+  await page.keyboard.press("Escape");
+  await expect(sidebar).not.toBeVisible();
+  await expect(toggle).toBeFocused();
+  await page.setViewportSize({ width: 1440, height: 950 });
+  await expect(toggle).toHaveAccessibleName("Show Channel sidebar");
+  await toggle.click();
+  await expect(sidebar).toBeVisible();
+});
+
 // The shell owns sidebar visibility while the mounted sidebar owns route and width state.
 test("shell toggle restores the shared sidebar for Channels and Agents", async ({
   page,
@@ -204,8 +272,19 @@ test("shell toggle restores the shared sidebar for Channels and Agents", async (
     name: "Channel sidebar",
     exact: true,
   });
+  const handle = page.getByRole("separator", {
+    name: "Resize channel sidebar",
+  });
   const sidebarNode = await sidebar.elementHandle();
   const expandedWidth = (await sidebar.boundingBox()).width;
+  const gutterWidth = await handle.evaluate((element) => {
+    const style = getComputedStyle(element);
+    return (
+      element.getBoundingClientRect().width +
+      Number.parseFloat(style.marginLeft) +
+      Number.parseFloat(style.marginRight)
+    );
+  });
   const track = await shellNavigation.evaluate((node) => {
     const style = getComputedStyle(node);
     return {
@@ -214,23 +293,51 @@ test("shell toggle restores the shared sidebar for Channels and Agents", async (
       duration: style.transitionDuration,
     };
   });
-  expect(track.width).toBe(expandedWidth);
+  expect(track.width).toBe(expandedWidth + gutterWidth);
   expect(track.property).toContain("width");
-  expect(track.property).toContain("margin-right");
   expect(parseFloat(track.duration)).toBeGreaterThan(0);
   const openGap = await page.evaluate(() => {
-    const nav = document.querySelector("#shell-navigation");
+    const sidebar = document.querySelector(".shell-sidebar");
     const main = document.querySelector("#main-content");
-    if (!(nav instanceof HTMLElement) || !(main instanceof HTMLElement))
+    if (!(sidebar instanceof HTMLElement) || !(main instanceof HTMLElement))
       throw new Error("Missing shell panels");
-    return {
-      actual:
-        main.getBoundingClientRect().left - nav.getBoundingClientRect().right,
-      token: Number.parseFloat(getComputedStyle(nav).marginRight),
-    };
+    return (
+      main.getBoundingClientRect().left - sidebar.getBoundingClientRect().right
+    );
   });
-  expect(openGap.actual).toBe(openGap.token);
-  expect(openGap.actual).toBeGreaterThan(0);
+  expect(openGap).toBe(gutterWidth);
+  // Seek a paused real transition so runner speed cannot hide an immediate jump.
+  for (const label of ["Hide Channel sidebar", "Show Channel sidebar"]) {
+    const samples = await page.evaluate(async (label) => {
+      const nav = document.querySelector("#shell-navigation");
+      const button = document.querySelector(`button[aria-label="${label}"]`);
+      const started = new Promise((resolve) => {
+        nav.addEventListener("transitionrun", resolve, { once: true });
+      });
+      button.click();
+      await started;
+      const animation = nav
+        .getAnimations()
+        .find((animation) => animation.transitionProperty === "max-width");
+      if (!animation) throw new Error("Missing sidebar transition");
+      animation.pause();
+      try {
+        const duration = animation.effect.getTiming().duration;
+        return [0, 0.25, 0.5, 0.75, 1].map((progress) => {
+          animation.currentTime = duration * progress;
+          return nav.getBoundingClientRect().width;
+        });
+      } finally {
+        animation.finish();
+        await animation.finished;
+      }
+    }, label);
+    const width = expandedWidth + gutterWidth;
+    expect(samples.some((sample) => sample > 0 && sample < width)).toBe(true);
+    expect(samples[0]).toBe(label.startsWith("Hide") ? width : 0);
+    expect(samples.at(-1)).toBe(label.startsWith("Hide") ? 0 : width);
+  }
+
   await page.emulateMedia({ reducedMotion: "reduce" });
   await expect
     .poll(() =>
@@ -247,7 +354,7 @@ test("shell toggle restores the shared sidebar for Channels and Agents", async (
     .poll(() =>
       shellNavigation.evaluate((node) => node.getBoundingClientRect().width),
     )
-    .toBe(expandedWidth);
+    .toBe(expandedWidth + gutterWidth);
 
   await page.getByRole("button", { name: "Hide Channel sidebar" }).click();
   await expect(shellNavigation).toHaveAttribute("aria-hidden", "true");
@@ -276,7 +383,11 @@ test("shell toggle restores the shared sidebar for Channels and Agents", async (
   expect(await sidebarNode.evaluate((element) => element.isConnected)).toBe(
     true,
   );
-  expect((await sidebar.boundingBox()).width).toBe(expandedWidth);
+  await expect
+    .poll(() =>
+      sidebar.evaluate((element) => element.getBoundingClientRect().width),
+    )
+    .toBe(expandedWidth);
 
   await sidebar.getByRole("button", { name: "Agents", exact: true }).click();
   await expect(
@@ -294,7 +405,11 @@ test("shell toggle restores the shared sidebar for Channels and Agents", async (
   expect(await sidebarNode.evaluate((element) => element.isConnected)).toBe(
     true,
   );
-  expect((await sidebar.boundingBox()).width).toBe(expandedWidth);
+  await expect
+    .poll(() =>
+      sidebar.evaluate((element) => element.getBoundingClientRect().width),
+    )
+    .toBe(expandedWidth);
   await expect(
     sidebar.getByRole("button", { name: "Agents", exact: true }),
   ).toHaveAttribute("aria-current", "page");

From 116b3177496cc25349a1db5f52e29a36ce2da3fb Mon Sep 17 00:00:00 2001
From: Tree Trunks
 <6ba22921d9dc2ad0aa6ecdf63787ddd24726e266d866da31af69f2e4e146ace5@buzz.block.builderlab.xyz>
Date: Mon, 28 Sep 2026 14:51:09 -0700
Subject: [PATCH 3/9] Fix navigation fixtures and workflow discovery assertions

Signed-off-by: Tree Trunks <6ba22921d9dc2ad0aa6ecdf63787ddd24726e266d866da31af69f2e4e146ace5@buzz.block.builderlab.xyz>
---
 src/app/entity-navigation.test.tsx         | 11 ++++++++++-
 src/app/navigation.test.tsx                | 11 ++++++++++-
 src/features/relay/store-discovery.test.ts | 13 +++++++++++--
 3 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/app/entity-navigation.test.tsx b/src/app/entity-navigation.test.tsx
index e7fcc5b70..a1f9b418d 100644
--- a/src/app/entity-navigation.test.tsx
+++ b/src/app/entity-navigation.test.tsx
@@ -9,7 +9,7 @@ import {
   within,
 } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { afterEach, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
 import { finalizeEvent, getPublicKey } from "nostr-tools";
 import { App } from "./App";
 import { createServices, type AppServices } from "./services";
@@ -53,6 +53,15 @@ const project = finalizeEvent(
   },
   key,
 );
+// jsdom has no media queries; responsive geometry is covered in browser tests.
+beforeEach(() => {
+  vi.stubGlobal("matchMedia", (media: string) => ({
+    media,
+    matches: false,
+    addEventListener() {},
+    removeEventListener() {},
+  }));
+});
 let services: AppServices | undefined;
 let stop = () => {};
 afterEach(async () => {
diff --git a/src/app/navigation.test.tsx b/src/app/navigation.test.tsx
index ef5ca73b5..fca52f16b 100644
--- a/src/app/navigation.test.tsx
+++ b/src/app/navigation.test.tsx
@@ -1,7 +1,7 @@
 // @vitest-environment jsdom
 import "@testing-library/jest-dom/vitest";
 import { act, cleanup, render, screen, waitFor } from "@testing-library/react";
-import { afterEach, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
 import type { Context } from "@deepseek-ai/cordis";
 import { App } from "./App";
 import { createServices, type AppServices } from "./services";
@@ -32,6 +32,15 @@ vi.mock("../bundled", () => ({
     },
   ],
 }));
+// jsdom has no media queries; responsive geometry is covered in browser tests.
+beforeEach(() => {
+  vi.stubGlobal("matchMedia", (media: string) => ({
+    media,
+    matches: false,
+    addEventListener() {},
+    removeEventListener() {},
+  }));
+});
 let services: AppServices | undefined;
 afterEach(async () => {
   activation.release();
diff --git a/src/features/relay/store-discovery.test.ts b/src/features/relay/store-discovery.test.ts
index 11d9ae5da..04f35e336 100644
--- a/src/features/relay/store-discovery.test.ts
+++ b/src/features/relay/store-discovery.test.ts
@@ -1,5 +1,8 @@
 import { assert, afterEach, beforeAll, expect, it, vi } from "vitest";
-import { WORKFLOW_CHANNEL_BATCH } from "../workflows/queries";
+import {
+  WORKFLOW_CHANNEL_BATCH,
+  WORKFLOW_DEFINITION_LIMIT,
+} from "../workflows/queries";
 import { tag, type RelayEvent } from "./events";
 import { createRelaySession } from "./session";
 import type { ChannelStoreOptions } from "./store";
@@ -145,7 +148,13 @@ it("discovers and names 501 same-timestamp memberships, including a workflow on
     try {
       const done = view.refresh();
       const request = await h.next(30620);
-      expect(request.filters.map((filter) => filter["#h"]?.[0])).toEqual(batch);
+      expect(request.filters).toEqual([
+        {
+          kinds: [30620],
+          "#h": [...batch].sort(),
+          limit: WORKFLOW_DEFINITION_LIMIT,
+        },
+      ]);
       request.respond(batch.includes(channelId) ? [workflow] : []);
       await done;
       found.push(...view.snapshot().data.items.map((item) => item.channelId));

From 5db12ae384ea2d4a5a35c91a90266edcddfa902b Mon Sep 17 00:00:00 2001
From: Tree Trunks
 <6ba22921d9dc2ad0aa6ecdf63787ddd24726e266d866da31af69f2e4e146ace5@buzz.block.builderlab.xyz>
Date: Mon, 28 Sep 2026 15:16:10 -0700
Subject: [PATCH 4/9] Update avatar paint checks for 28px top-bar controls

Signed-off-by: Tree Trunks <6ba22921d9dc2ad0aa6ecdf63787ddd24726e266d866da31af69f2e4e146ace5@buzz.block.builderlab.xyz>
---
 tests/browser/profile-avatar-gap.spec.mjs | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/tests/browser/profile-avatar-gap.spec.mjs b/tests/browser/profile-avatar-gap.spec.mjs
index 38b98ce9a..3ee33dda0 100644
--- a/tests/browser/profile-avatar-gap.spec.mjs
+++ b/tests/browser/profile-avatar-gap.spec.mjs
@@ -25,7 +25,8 @@ test("profile avatar cutout shows the shell through hover, press and open menu",
     const panel = await page
       .locator('[aria-labelledby="settings-title"]')
       .boundingBox();
-    expect(avatar.width).toBe(40);
+    expect(avatar.width).toBe(28);
+    expect(avatar.height).toBe(28);
     expect
       .soft(avatar.x + avatar.width, `${width}px: avatar and card right edges`)
       .toBe(panel.x + panel.width);
@@ -67,12 +68,12 @@ test("profile avatar cutout shows the shell through hover, press and open menu",
         ctx.drawImage(image, 0, 0);
         const at = (x, y) => [...ctx.getImageData(x, y, 1, 1).data];
         return {
-          // The screenshot includes 4px outside the 40px control. Its gap
-          // is at avatar-local (29,29); the other samples detect a focus ring.
-          gap: at(33, 33),
-          left: at(1, 24),
-          top: at(24, 1),
-          right: at(46, 24),
+          // The screenshot includes 4px outside the 28px control. Its gap
+          // is at avatar-local (20,20); the other samples detect a focus ring.
+          gap: at(24, 24),
+          left: at(1, 18),
+          top: at(18, 1),
+          right: at(34, 18),
         };
       }, png.toString("base64"));
     const expected = await sample(background);

From 76d7dbc0b7b8d3d3f4322e68dd59e50813539163 Mon Sep 17 00:00:00 2001
From: Tree Trunks
 <6ba22921d9dc2ad0aa6ecdf63787ddd24726e266d866da31af69f2e4e146ace5@buzz.block.builderlab.xyz>
Date: Mon, 28 Sep 2026 16:28:12 -0700
Subject: [PATCH 5/9] Preserve expanded sidebar resize help

Signed-off-by: Tree Trunks <6ba22921d9dc2ad0aa6ecdf63787ddd24726e266d866da31af69f2e4e146ace5@buzz.block.builderlab.xyz>
---
 src/shared/styles/globals.css         |  9 +++-
 tests/browser/sidenav-polish.spec.mjs | 70 ++++++++++++++++++++++++---
 2 files changed, 70 insertions(+), 9 deletions(-)

diff --git a/src/shared/styles/globals.css b/src/shared/styles/globals.css
index 56d16afc2..46c17bad4 100644
--- a/src/shared/styles/globals.css
+++ b/src/shared/styles/globals.css
@@ -226,11 +226,16 @@
     width: max-content;
     max-width: max(132px, calc(100% - 336px));
     overflow: visible;
-    clip-path: inset(0 0 0 0);
-    transition: max-width var(--duration-settle) ease-in-out;
+    clip-path: none;
+    /* Release resize help only after expansion; contain content while moving. */
+    transition:
+      max-width var(--duration-settle) ease-in-out,
+      clip-path var(--duration-settle) step-end allow-discrete;
   }
   .shell-navigation[data-sidebar-collapsible][aria-hidden="true"] {
     max-width: 0;
+    clip-path: inset(0);
+    transition-timing-function: ease-in-out, step-start;
   }
   @media (prefers-reduced-motion: reduce) {
     .shell-navigation[data-sidebar-collapsible] {
diff --git a/tests/browser/sidenav-polish.spec.mjs b/tests/browser/sidenav-polish.spec.mjs
index a6b038d4c..0d366e10c 100644
--- a/tests/browser/sidenav-polish.spec.mjs
+++ b/tests/browser/sidenav-polish.spec.mjs
@@ -275,6 +275,41 @@ test("shell toggle restores the shared sidebar for Channels and Agents", async (
   const handle = page.getByRole("separator", {
     name: "Resize channel sidebar",
   });
+  // Pseudo-element help must paint outside the wrapper for pointer and keyboard.
+  for (const activate of [
+    () => handle.hover(),
+    async () => {
+      await page.mouse.move(0, 0);
+      await page.keyboard.press("Tab");
+      await handle.focus();
+    },
+  ]) {
+    await activate();
+    await expect
+      .poll(() =>
+        handle.evaluate((node) => {
+          const help = getComputedStyle(node, "::before");
+          return [help.visibility, help.opacity];
+        }),
+      )
+      .toEqual(["visible", "1"]);
+    const help = await handle.evaluate((node) => {
+      const style = getComputedStyle(node, "::before");
+      const rect = node.getBoundingClientRect();
+      const wrapper = node.closest("#shell-navigation");
+      return {
+        content: style.content,
+        right: rect.left + parseFloat(style.left) + parseFloat(style.width),
+        wrapperRight: wrapper.getBoundingClientRect().right,
+        clip: getComputedStyle(wrapper).clipPath,
+        overflow: getComputedStyle(wrapper).overflow,
+      };
+    });
+    expect(help.content).toContain("Drag to resize");
+    expect(help.right).toBeGreaterThan(help.wrapperRight);
+    expect(help.clip).toBe("none");
+    expect(help.overflow).toBe("visible");
+  }
   const sidebarNode = await sidebar.elementHandle();
   const expandedWidth = (await sidebar.boundingBox()).width;
   const gutterWidth = await handle.evaluate((element) => {
@@ -323,19 +358,40 @@ test("shell toggle restores the shared sidebar for Channels and Agents", async (
       animation.pause();
       try {
         const duration = animation.effect.getTiming().duration;
-        return [0, 0.25, 0.5, 0.75, 1].map((progress) => {
-          animation.currentTime = duration * progress;
-          return nav.getBoundingClientRect().width;
-        });
+        const clipping = nav
+          .getAnimations()
+          .find((animation) => animation.transitionProperty === "clip-path");
+        if (!clipping) throw new Error("Missing containment transition");
+        clipping.pause();
+        try {
+          return [0, 0.25, 0.5, 0.75, 1].map((progress) => {
+            animation.currentTime = duration * progress;
+            clipping.currentTime = duration * progress;
+            return {
+              width: nav.getBoundingClientRect().width,
+              clip: getComputedStyle(nav).clipPath,
+            };
+          });
+        } finally {
+          clipping.finish();
+          await clipping.finished;
+        }
       } finally {
         animation.finish();
         await animation.finished;
       }
     }, label);
     const width = expandedWidth + gutterWidth;
-    expect(samples.some((sample) => sample > 0 && sample < width)).toBe(true);
-    expect(samples[0]).toBe(label.startsWith("Hide") ? width : 0);
-    expect(samples.at(-1)).toBe(label.startsWith("Hide") ? 0 : width);
+    expect(
+      samples.some((sample) => sample.width > 0 && sample.width < width),
+    ).toBe(true);
+    expect(samples[0].width).toBe(label.startsWith("Hide") ? width : 0);
+    expect(samples.at(-1).width).toBe(label.startsWith("Hide") ? 0 : width);
+    for (const sample of samples.slice(1, -1))
+      expect(sample.clip).toBe("inset(0px)");
+    expect(samples.at(-1).clip).toBe(
+      label.startsWith("Hide") ? "inset(0px)" : "none",
+    );
   }
 
   await page.emulateMedia({ reducedMotion: "reduce" });

From dc3c260c841b6ef3c07e212e044256419da5af88 Mon Sep 17 00:00:00 2001
From: Tree Trunks
 <6ba22921d9dc2ad0aa6ecdf63787ddd24726e266d866da31af69f2e4e146ace5@buzz.block.builderlab.xyz>
Date: Mon, 28 Sep 2026 16:28:14 -0700
Subject: [PATCH 6/9] Document compact header and sidebar toggle behavior

Signed-off-by: Tree Trunks <6ba22921d9dc2ad0aa6ecdf63787ddd24726e266d866da31af69f2e4e146ace5@buzz.block.builderlab.xyz>
---
 docs/shell-design.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/docs/shell-design.md b/docs/shell-design.md
index ed14e002d..ddf9a3341 100644
--- a/docs/shell-design.md
+++ b/docs/shell-design.md
@@ -29,7 +29,7 @@ semantic tokens, UI authoring rules and the local component reference.
   Channels is presented as Messages. Legacy tone props are retained for
   compatibility; all pages share the supplied gradient and repeating CSS dots.
   Add recognized page presentation here without changing plugin contracts.
-- `AppShell.tsx` owns the 56px header, vertical page navigation, contributed panel
+- `AppShell.tsx` owns the 48px header, vertical page navigation, contributed panel
   launchers, Settings access, community rail, and page frames. Page navigation sits
   above the persistent channel list on every page, using its saved sidebar width
   and resize behavior. `App.tsx` composes `features/channel-navigation/ChannelSidebar`
@@ -41,7 +41,9 @@ semantic tokens, UI authoring rules and the local component reference.
   At widths up to 650px, Settings collapses this navigation behind the header’s
   Show navigation button to preserve readable content at 200% text size. The
   disclosure overlays Settings, supports Escape, and keeps sidebar state mounted.
-  Other pages and desktop Settings retain the visible sidebar.
+  Messages, Agents, and desktop Settings share an animated header toggle; hiding
+  the sidebar preserves its mounted state and saved width. Reduced motion disables
+  the transition. Other pages retain the visible sidebar.
   The header keeps history and account/search actions, with no second navigation row.
   Full-height pages get a 16px outer gutter (8px on narrow screens) and own their
   card surfaces. The shell adds no white backing behind them. Document pages

From 1467634b8c28e950d05e2f10211b17ab59a723cf Mon Sep 17 00:00:00 2001
From: Tree Trunks
 <6ba22921d9dc2ad0aa6ecdf63787ddd24726e266d866da31af69f2e4e146ace5@buzz.block.builderlab.xyz>
Date: Mon, 28 Sep 2026 16:45:22 -0700
Subject: [PATCH 7/9] Avoid startup reload race in search selection test

Signed-off-by: Tree Trunks <6ba22921d9dc2ad0aa6ecdf63787ddd24726e266d866da31af69f2e4e146ace5@buzz.block.builderlab.xyz>
---
 tests/browser/global-search.spec.mjs | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/tests/browser/global-search.spec.mjs b/tests/browser/global-search.spec.mjs
index a0e3bc9a4..a58923be8 100644
--- a/tests/browser/global-search.spec.mjs
+++ b/tests/browser/global-search.spec.mjs
@@ -196,15 +196,13 @@ test("keyboard selection follows its action while recent conversations arrive ab
   page,
   app,
 }) => {
-  await page.goto(app.origin);
   const rail = page.getByRole("button", {
     name: "Switch to Primary",
     exact: true,
   });
-  await expect(rail).toBeVisible();
-  // Hold the membership read across a reload so the channel list arrives after
-  // the palette has opened, as it can after a restored conversation. Other
-  // reads continue, so the held read stays well inside its own deadline.
+  // Hold startup membership before navigation so the channel list arrives after
+  // the palette opens. A reload here can retire a live stream while its initial
+  // control request is still in flight; that race is unrelated to selection.
   const held = [];
   let holding = true;
   await page.route("**/api/relay/*/query", async (route) => {
@@ -214,7 +212,7 @@ test("keyboard selection follows its action while recent conversations arrive ab
     await route.continue();
   });
   try {
-    await page.reload();
+    await page.goto(app.origin);
     await expect(rail).toBeVisible();
     await button(page, "Search Buzz").click();
     const dialog = page.getByRole("dialog", {

From e806c0d484d2c3beece0c25cbf0a5897694915c3 Mon Sep 17 00:00:00 2001
From: Tree Trunks
 <6ba22921d9dc2ad0aa6ecdf63787ddd24726e266d866da31af69f2e4e146ace5@buzz.block.builderlab.xyz>
Date: Mon, 28 Sep 2026 21:01:18 -0700
Subject: [PATCH 8/9] Synchronize responsive settings and agent refresh browser
 checks

Signed-off-by: Tree Trunks <6ba22921d9dc2ad0aa6ecdf63787ddd24726e266d866da31af69f2e4e146ace5@buzz.block.builderlab.xyz>
---
 tests/browser/agent-control.spec.mjs | 7 +++++++
 tests/browser/navigation.mjs         | 7 +++++++
 2 files changed, 14 insertions(+)

diff --git a/tests/browser/agent-control.spec.mjs b/tests/browser/agent-control.spec.mjs
index 9344539e8..7c5631106 100644
--- a/tests/browser/agent-control.spec.mjs
+++ b/tests/browser/agent-control.spec.mjs
@@ -305,6 +305,10 @@ for (const previouslyStopped of [false, true]) {
   test(`unreadable status allows only explicit Stop from a retained ${previouslyStopped ? "stopped" : "running"} snapshot`, async ({
     page,
   }) => {
+    // Own the five-second status poll so it cannot replace the operation error
+    // before assertions observe it on slower runners.
+    const now = new Date("2026-01-01T00:00:00Z");
+    await page.clock.install({ time: now });
     const server = await createServer({
       ...config,
       configFile: false,
@@ -333,6 +337,7 @@ for (const previouslyStopped of [false, true]) {
         .fill("wss://chosen.example");
       await panel.getByRole("button", { name: "Load agents" }).click();
       await openEditor(page);
+      await page.clock.pauseAt(await page.evaluate(() => Date.now() + 1000));
       await page.evaluate(() => {
         const fixture = window.agentControlFixture;
         const { snapshot, action } = fixture.host;
@@ -424,6 +429,8 @@ for (const previouslyStopped of [false, true]) {
         ...before,
         { action: "stop", payload: { id: "fixture-agent" } },
       ]);
+      await page.clock.runFor(5000);
+      await expect(page.getByRole("alert")).toContainText("Could not refresh");
       // Repairing the host does not implicitly retry. A second explicit Stop can recover.
       await page.evaluate(() => window.agentControlFixture.restoreStore());
       await stop.click();
diff --git a/tests/browser/navigation.mjs b/tests/browser/navigation.mjs
index f95772ad7..e4529d6a7 100644
--- a/tests/browser/navigation.mjs
+++ b/tests/browser/navigation.mjs
@@ -52,6 +52,13 @@ export async function selectPage(page, name, { connected = true } = {}) {
 }
 
 export async function selectSettingsSection(page, name) {
+  await expect(
+    page.locator("[data-shell-sidebar-toggle]"),
+  ).toHaveAccessibleName(
+    page.viewportSize().width <= 650
+      ? /^(Show|Hide) navigation$/
+      : /^(Show|Hide) Channel sidebar$/,
+  );
   const show = page.getByRole("button", {
     name: "Show navigation",
     exact: true,

From 92884c713c89b893c5d63c403a604917acd6785b Mon Sep 17 00:00:00 2001
From: Tree Trunks
 <6ba22921d9dc2ad0aa6ecdf63787ddd24726e266d866da31af69f2e4e146ace5@buzz.block.builderlab.xyz>
Date: Tue, 29 Sep 2026 10:45:39 -0700
Subject: [PATCH 9/9] Open responsive drawer before testing channel activity
 popup

Signed-off-by: Tree Trunks <6ba22921d9dc2ad0aa6ecdf63787ddd24726e266d866da31af69f2e4e146ace5@buzz.block.builderlab.xyz>
---
 tests/browser/channel-activity-corners.spec.mjs | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/tests/browser/channel-activity-corners.spec.mjs b/tests/browser/channel-activity-corners.spec.mjs
index 51a939eba..244a6a12e 100644
--- a/tests/browser/channel-activity-corners.spec.mjs
+++ b/tests/browser/channel-activity-corners.spec.mjs
@@ -51,6 +51,15 @@ for (const multiple of [false, true]) {
               width === 640 ? "2" : "1",
             );
           }, width);
+          const toggle = page.locator("[data-shell-sidebar-toggle]");
+          await expect(toggle).toHaveAccessibleName(
+            width <= 650
+              ? /^(Show|Hide) navigation$/
+              : /^(Show|Hide) Channel sidebar$/,
+          );
+          if ((await toggle.getAttribute("aria-expanded")) === "false")
+            await toggle.click();
+          await expect(alpha).toBeVisible();
           // Resize only while closed: moving a hover popup away from the pointer
           // legitimately dismisses it, racing the next row interaction.
           await openPopup();