From 1c1e5c9da5bb276a27248e0b1b887f4583fa6d91 Mon Sep 17 00:00:00 2001
From: ReBotics AI <ReBoticsAI@gmail.com>
Date: Sat, 1 Aug 2026 18:25:57 -0600
Subject: [PATCH] Polish sidebar chrome and keep Digital Admin labels readable.

Move the workspace switcher under the brand, put ModeToggle in the header, and wrap long agent group titles instead of truncating them.
---
 apps/web/src/components/AgentGroup.tsx        |  6 ++---
 apps/web/src/components/AppHeader.tsx         |  5 ++++-
 apps/web/src/components/SidebarNav.tsx        |  6 ++---
 .../src/components/SidebarShellContent.tsx    | 22 +++++++++++--------
 4 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/apps/web/src/components/AgentGroup.tsx b/apps/web/src/components/AgentGroup.tsx
index 2b124d6..9d7c243 100644
--- a/apps/web/src/components/AgentGroup.tsx
+++ b/apps/web/src/components/AgentGroup.tsx
@@ -77,7 +77,7 @@ export function AgentGroup({
       onOpenChange={setOpen}
       className="flex flex-col gap-0.5 rounded-lg border border-sidebar-border/60 bg-sidebar-accent/10 p-1.5"
     >
-      <div className="flex items-center gap-1">
+      <div className="flex min-w-0 items-center gap-1">
         <button
           type="button"
           onClick={() => {
@@ -89,14 +89,14 @@ export function AgentGroup({
           aria-label={`Open ${label}`}
           title={`Chat with ${label} and open its Agent Profile`}
           className={cn(
-            "flex min-w-0 flex-1 items-center gap-2 rounded-md px-2 py-1 text-base font-bold leading-none tracking-tight transition-colors",
+            "flex min-w-0 flex-1 items-center gap-2 rounded-md px-2 py-1 text-base font-bold leading-snug tracking-tight transition-colors",
             headerActive
               ? "text-sidebar-accent-foreground"
               : "text-foreground hover:text-sidebar-accent-foreground"
           )}
         >
           <Icon className="size-5 shrink-0 text-sidebar-accent-foreground" />
-          <span className="min-w-0 flex-1 truncate text-left">{label}</span>
+          <span className="min-w-0 flex-1 break-words text-left">{label}</span>
         </button>
         <CollapsibleTrigger
           aria-label={`Collapse ${label}`}
diff --git a/apps/web/src/components/AppHeader.tsx b/apps/web/src/components/AppHeader.tsx
index e3b2a53..3f8a56d 100644
--- a/apps/web/src/components/AppHeader.tsx
+++ b/apps/web/src/components/AppHeader.tsx
@@ -1,6 +1,7 @@
 import { useLocation } from "react-router-dom";
 import { ChevronRightIcon, MenuIcon, PanelRightOpenIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { ModeToggle } from "@/components/ModeToggle";
 import {
   chromelessHeaderSegments,
   departmentFromPath,
@@ -138,13 +139,15 @@ export function AppHeader({
           type="button"
           variant="ghost"
           size="icon-sm"
-          className="-mr-1 shrink-0 lg:hidden"
+          className="shrink-0 lg:hidden"
           onClick={onOpenRightPanel}
           aria-label="Open side panel"
         >
           <PanelRightOpenIcon />
         </Button>
       )}
+
+      <ModeToggle className="-mr-1 shrink-0" />
     </header>
   );
 }
diff --git a/apps/web/src/components/SidebarNav.tsx b/apps/web/src/components/SidebarNav.tsx
index 28da225..fca9245 100644
--- a/apps/web/src/components/SidebarNav.tsx
+++ b/apps/web/src/components/SidebarNav.tsx
@@ -51,7 +51,6 @@ import { useTenant } from "@/lib/tenant-context";
 import { useIntelligence } from "@/lib/intelligence-context";
 import { iconByName } from "@/lib/icon-lookup";
 import { cn } from "@/lib/utils";
-import { WorkspaceSwitcher } from "@/components/WorkspaceSwitcher";
 import { AgentGroup } from "@/components/AgentGroup";
 import { AgentPulseIcon } from "@/components/AgentPulseIcon";
 import {
@@ -96,8 +95,8 @@ const NEW_PAGE_PROMPT =
  * Tree navigation. Top: the user's PERSONAL pages (Calendar, Tasks, Vault, etc.).
  * Middle: departments as labeled section headers, each revealing divisions as
  * expandable sub-trees. Bottom: Shared and Marketplace nodes. The active division
- * auto-expands and the active page is highlighted. Users/Settings stay in the
- * footer chrome (see SidebarShellContent.tsx).
+ * auto-expands and the active page is highlighted. Brand header, project
+ * switcher, and Users/Settings live in SidebarShellContent.tsx.
  */
 export function SidebarNav({ onNavigate }: { onNavigate?: () => void }) {
   const { pathname } = useLocation();
@@ -313,7 +312,6 @@ export function SidebarNav({ onNavigate }: { onNavigate?: () => void }) {
           </CollapsibleTrigger>
         </div>
         <CollapsibleContent className="flex flex-col gap-0.5">
-          <WorkspaceSwitcher />
           {PERSONAL_ITEMS.map(({ to, label, Icon }) => (
             <NavLink
               key={to}
diff --git a/apps/web/src/components/SidebarShellContent.tsx b/apps/web/src/components/SidebarShellContent.tsx
index 151d23b..202bc97 100644
--- a/apps/web/src/components/SidebarShellContent.tsx
+++ b/apps/web/src/components/SidebarShellContent.tsx
@@ -1,6 +1,7 @@
 import { NavLink } from "react-router-dom";
 import { LogOutIcon, SettingsIcon, ShieldIcon } from "lucide-react";
 import { SidebarNav } from "@/components/SidebarNav";
+import { WorkspaceSwitcher } from "@/components/WorkspaceSwitcher";
 import { ADMIN_PATH, APP_NAME, HOME_PATH, SETTINGS_PATH } from "@/lib/navigation";
 import { logoutAuth } from "@/api";
 import { useTenant } from "@/lib/tenant-context";
@@ -35,15 +36,18 @@ export function SidebarShellContent({
 
   return (
     <>
-      <div className="flex w-full justify-center px-2 py-1.5">
-        <NavLink
-          to={HOME_PATH}
-          onClick={onNavigate}
-          className="font-heading truncate text-4xl font-extrabold leading-none tracking-tight transition-opacity hover:opacity-80"
-          aria-label="Go to home"
-        >
-          {APP_NAME}
-        </NavLink>
+      <div className="flex w-full flex-col gap-2 px-1">
+        <div className="flex w-full justify-center px-1 py-1.5">
+          <NavLink
+            to={HOME_PATH}
+            onClick={onNavigate}
+            className="font-heading truncate text-4xl font-extrabold leading-none tracking-tight transition-opacity hover:opacity-80"
+            aria-label="Go to home"
+          >
+            {APP_NAME}
+          </NavLink>
+        </div>
+        <WorkspaceSwitcher />
       </div>
 
       <SidebarNav onNavigate={onNavigate} />