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/AppPage.tsx

@@ -11,20 +11,31 @@ interface AppPageProps {
 
 export function AppPage({ title, description, icon: Icon, children, className }: AppPageProps) {
   return (
-    <div className={cn("min-h-screen py-8", className)}>
-      <div className="max-w-7xl mx-auto px-8 space-y-6 animate-fade-in">
-        <div>
-          <div className="flex items-center gap-3 mb-1">
-            {Icon && <Icon className="h-6 w-6 text-primary shrink-0" />}
-            <h1 className="text-2xl font-bold">{title}</h1>
+    <div className={cn('min-h-screen', className)}>
+      <div className="max-w-7xl mx-auto px-6 lg:px-8 animate-fade-in">
+
+        {/* Page header */}
+        <div className="py-5 border-b border-border/20 mb-6">
+          <div className="flex items-center gap-3">
+            {Icon && (
+              <div className="w-7 h-7 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
+                <Icon className="w-3.5 h-3.5 text-primary" />
+              </div>
+            )}
+            <div className="min-w-0">
+              <h1 className="text-lg font-semibold text-foreground leading-tight">{title}</h1>
+              {description && (
+                <p className="text-[10px] text-muted-foreground/50 font-mono mt-0.5 truncate">
+                  {description}
+                </p>
+              )}
+            </div>
           </div>
-          {description && (
-            <p className="text-sm text-muted-foreground max-w-2xl">
-              {description}
-            </p>
-          )}
         </div>
-        {children}
+
+        <div className="pb-8">
+          {children}
+        </div>
       </div>
     </div>
   );