refactor: align layout chrome with glass blueprint

AppHeader:
- Remove shadcn Button → native 8×8 rounded glass icon buttons
- Shrink to h-14 (from h-16) to match sidebar header
- Add current tool name breadcrumb (navTitle) next to collapse toggle;
  shows context when sidebar is collapsed or on mobile

AppSidebar:
- Remove shadcn Button → native button for mobile close
- Sidebar narrows to w-60 (from w-64); matches h-14 header
- Active state: slim absolute left-bar (0.5px) replaces harsh border-l-2;
  bg-primary/10 tint kept; no border on the link itself
- Nav item text refined: 13px font-medium title + 9px mono description
- Border opacity drops to border-border/20 throughout (from border-border)
- Footer: smaller mono text, lighter icon opacity

AppPage:
- Shrink from py-8 / text-2xl to py-5 / text-lg font-semibold
- Icon wrapped in 7×7 glass pill (bg-primary/10) matching tool cards
- Description moved inline under title as 10px mono, truncated
- border-b border-border/20 separator between header and tool content

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

components/layout/AppHeader.tsx

@@ -1,42 +1,60 @@
 'use client';
 
 import Link from 'next/link';
+import { usePathname } from 'next/navigation';
 import { Menu, X, PanelLeftClose, PanelLeftOpen } from 'lucide-react';
-import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils/cn';
 import { useSidebar } from './SidebarProvider';
+import { getToolByHref } from '@/lib/tools';
 import Logo from '@/components/Logo';
 
+const iconBtn =
+  'w-8 h-8 flex items-center justify-center rounded-lg text-muted-foreground/50 hover:text-foreground hover:bg-white/5 transition-all';
+
 export function AppHeader() {
   const { toggle, isOpen, isCollapsed, toggleCollapse } = useSidebar();
+  const pathname = usePathname();
+  const tool = getToolByHref(pathname);
 
   return (
-    <header className="h-16 border-b border-border bg-background/10 backdrop-blur-xl sticky top-0 z-40 flex items-center justify-between px-6 shadow-[0_1px_3px_0_rgb(0_0_0/0.05)]">
-      <div className="flex items-center gap-2">
-        <Button
-          variant="ghost"
-          size="icon"
-          className="hidden lg:inline-flex text-muted-foreground hover:text-foreground"
+    <header className="h-14 border-b border-border/20 bg-background/8 backdrop-blur-xl sticky top-0 z-40 flex items-center justify-between px-4 gap-3">
+      <div className="flex items-center gap-1.5 min-w-0">
+        {/* Desktop: sidebar collapse toggle */}
+        <button
           onClick={toggleCollapse}
+          title={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+          className={cn(iconBtn, 'hidden lg:flex shrink-0')}
         >
-          {isCollapsed ? (
-            <PanelLeftOpen className="h-5 w-5" />
-          ) : (
-            <PanelLeftClose className="h-5 w-5" />
-          )}
-        </Button>
-        <Link href="/" className="lg:hidden shrink-0 ml-2">
-          <Logo size={24} />
+          {isCollapsed
+            ? <PanelLeftOpen className="w-4 h-4" />
+            : <PanelLeftClose className="w-4 h-4" />
+          }
+        </button>
+
+        {/* Mobile: logo home link */}
+        <Link href="/" className="lg:hidden shrink-0">
+          <Logo size={20} />
         </Link>
+
+        {/* Current tool breadcrumb */}
+        {tool && (
+          <div className="flex items-center gap-1.5 min-w-0 ml-1">
+            <span className="text-border/50 text-xs select-none">/</span>
+            <span className="text-sm text-foreground/60 truncate font-mono">
+              {tool.navTitle}
+            </span>
+          </div>
+        )}
       </div>
 
-      <Button
-        variant="ghost"
-        size="icon"
-        className="lg:hidden text-muted-foreground hover:text-foreground"
+      {/* Mobile: open/close sidebar */}
+      <button
         onClick={toggle}
+        title={isOpen ? 'Close menu' : 'Open menu'}
+        className={cn(iconBtn, 'lg:hidden shrink-0')}
       >
-        {isOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
-      </Button>
+        {isOpen ? <X className="w-4 h-4" /> : <Menu className="w-4 h-4" />}
+      </button>
     </header>
   );
 }