Polish sidebar chrome and header theme toggle

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}`}

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>
   );
 }

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}

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} />