diff --git a/README.md b/README.md
index f1de131..d932439 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 ![Test Coverage](https://img.shields.io/codecov/c/github/hypkey/devpockit)
 ![Version](https://img.shields.io/github/package-json/v/hypkey/devpockit)
 
-A modern web application providing essential developer tools with a clean, responsive interface. Built with Next.js 15, featuring 30+ powerful tools that run entirely client-side for optimal performance and privacy.
+A modern web application providing essential developer tools with a clean, responsive interface. Built with Next.js (App Router, static export), featuring 30+ powerful tools that run entirely client-side for optimal performance and privacy.
 
 🌐 **[Production](https://devpockit.hypkey.com/)** | 📖 **[Documentation](#-documentation)** | 🤝 **[Contributing](CONTRIBUTING.md)** | 📝 **[Changelog](CHANGELOG.md)**
 
@@ -14,7 +14,7 @@ A modern web application providing essential developer tools with a clean, respo
 - **30+ Developer Tools** - JSON formatter, UUID generator, JWT decoder, regex tester, and more
 - **Client-Side Processing** - All tools run in your browser, no data sent to servers
 - **Modern UI** - Clean, responsive design with dark/light theme support
-- **Fast & Reliable** - Built with Next.js 15 and TypeScript
+- **Fast & Reliable** - Built with Next.js and TypeScript
 - **Mobile Friendly** - Works seamlessly on desktop, tablet, and mobile devices
 - **Open Source** - MIT licensed, free to use and contribute
 
diff --git a/package.json b/package.json
index 07c9e89..d4ec7d8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "devpockit-frontend",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "DevPockit Frontend - Developer Tools Web App",
   "license": "MIT",
   "repository": {
diff --git a/public/manifest.webmanifest b/public/manifest.webmanifest
new file mode 100644
index 0000000..6f75f7b
--- /dev/null
+++ b/public/manifest.webmanifest
@@ -0,0 +1,17 @@
+{
+  "name": "DevPockit",
+  "short_name": "DevPockit",
+  "description": "Free developer tools that run in your browser.",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#ea580c",
+  "icons": [
+    {
+      "src": "/assets/devpockit-logo.svg",
+      "sizes": "any",
+      "type": "image/svg+xml",
+      "purpose": "any"
+    }
+  ]
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index c07cf6e..8dc60b9 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,5 +1,7 @@
 import { AppLayout } from '@/components/layout/AppLayout'
+import { AppToastProvider } from '@/components/providers/AppToastProvider'
 import { ThemeProvider } from '@/components/providers/ThemeProvider'
+import { absoluteAssetUrl, absoluteSiteUrl } from '@/libs/site-url'
 import type { Metadata, Viewport } from 'next'
 import { DM_Serif_Text, Geist, Geist_Mono } from 'next/font/google'
 import './globals.css'
@@ -23,8 +25,12 @@ const dmSerifText = DM_Serif_Text({
 
 const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || 'https://devpockit.hypkey.com';
 
+const canonicalHome = absoluteSiteUrl('/')
+const ogImageUrl = absoluteAssetUrl('/og-image.png')
+
 export const metadata: Metadata = {
   metadataBase: new URL(baseUrl),
+  manifest: absoluteAssetUrl('/manifest.webmanifest'),
   title: {
     default: 'DevPockit - Free Online Developer Tools',
     template: '%s | DevPockit',
@@ -78,14 +84,14 @@ export const metadata: Metadata = {
   openGraph: {
     type: 'website',
     locale: 'en_US',
-    url: `${baseUrl}/`,
+    url: canonicalHome,
     siteName: 'DevPockit',
     title: 'DevPockit - Free Online Developer Tools',
     description:
       'Free online developer tools that run locally in your browser. JSON formatter, UUID generator, JWT decoder, and 25+ more tools. Fast, private, no sign-up.',
     images: [
       {
-        url: '/og-image.png',
+        url: ogImageUrl,
         width: 1200,
         height: 630,
         alt: 'DevPockit - Developer Tools',
@@ -97,10 +103,10 @@ export const metadata: Metadata = {
     title: 'DevPockit - Free Online Developer Tools',
     description:
       'Free developer tools in your browser. JSON formatter, UUID generator, JWT decoder & more. Private, fast, no sign-up.',
-    images: ['/og-image.png'],
+    images: [ogImageUrl],
   },
   alternates: {
-    canonical: `${baseUrl}/`,
+    canonical: canonicalHome,
   },
   category: 'technology',
 }
@@ -108,6 +114,10 @@ export const metadata: Metadata = {
 export const viewport: Viewport = {
   width: 'device-width',
   initialScale: 1,
+  themeColor: [
+    { media: '(prefers-color-scheme: light)', color: '#ffffff' },
+    { media: '(prefers-color-scheme: dark)', color: '#0a0a0a' },
+  ],
 }
 
 export default function RootLayout({
@@ -124,7 +134,9 @@ export default function RootLayout({
           enableSystem
           disableTransitionOnChange
         >
-          <AppLayout>{children}</AppLayout>
+          <AppToastProvider>
+            <AppLayout>{children}</AppLayout>
+          </AppToastProvider>
         </ThemeProvider>
       </body>
     </html>
diff --git a/src/app/tools/[category]/[toolId]/[instanceId]/page.tsx b/src/app/tools/[category]/[toolId]/[instanceId]/page.tsx
index d9c6914..19195c4 100644
--- a/src/app/tools/[category]/[toolId]/[instanceId]/page.tsx
+++ b/src/app/tools/[category]/[toolId]/[instanceId]/page.tsx
@@ -1,4 +1,6 @@
 import { getToolById, getTools } from '@/libs/tools-data';
+import { absoluteAssetUrl, absoluteSiteUrl } from '@/libs/site-url';
+import { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 
 interface ToolPageProps {
@@ -34,6 +36,39 @@ export async function generateStaticParams() {
   return params;
 }
 
+export async function generateMetadata({ params }: ToolPageProps): Promise<Metadata> {
+  const { category, toolId, instanceId } = await params;
+  const tool = getToolById(toolId);
+
+  if (!tool || tool.category !== category) {
+    return { title: 'Tool' };
+  }
+
+  const title = `${tool.name} - Free Online Tool`;
+  const description = `${tool.description} Free, fast, and runs locally in your browser. No sign-up required.`;
+  const canonicalPath = `/tools/${category}/${toolId}/${instanceId}/`;
+  const canonical = absoluteSiteUrl(canonicalPath);
+  const ogImage = absoluteAssetUrl('/og-image.png');
+
+  return {
+    title,
+    description,
+    openGraph: {
+      title: `${tool.name} | DevPockit`,
+      description,
+      url: canonical,
+      type: 'website',
+      images: [{ url: ogImage, width: 1200, height: 630, alt: tool.name }],
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: `${tool.name} | DevPockit`,
+      description,
+    },
+    alternates: { canonical },
+  };
+}
+
 export default async function ToolPage({ params }: ToolPageProps) {
   try {
     const { category, toolId, instanceId } = await params;
diff --git a/src/app/tools/[category]/[toolId]/page.tsx b/src/app/tools/[category]/[toolId]/page.tsx
index e876484..8c9f4d7 100644
--- a/src/app/tools/[category]/[toolId]/page.tsx
+++ b/src/app/tools/[category]/[toolId]/page.tsx
@@ -1,4 +1,5 @@
 import { getCategoryById, getToolById, getTools } from '@/libs/tools-data';
+import { absoluteAssetUrl, absoluteSiteUrl } from '@/libs/site-url';
 import { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 
@@ -51,9 +52,9 @@ export async function generateMetadata({ params }: ToolPageProps): Promise<Metad
   const title = `${tool.name} - Free Online Tool`;
   const description = `${tool.description} Free, fast, and runs locally in your browser. No sign-up required.`;
 
-  // Ensure trailing slash for GitHub Pages compatibility
   const toolUrl = tool.path.endsWith('/') ? tool.path : `${tool.path}/`;
-  const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || 'https://devpockit.hypkey.com';
+  const canonical = absoluteSiteUrl(toolUrl);
+  const ogImage = absoluteAssetUrl('/og-image.png');
 
   return {
     title,
@@ -62,11 +63,11 @@ export async function generateMetadata({ params }: ToolPageProps): Promise<Metad
     openGraph: {
       title: `${tool.name} | DevPockit`,
       description,
-      url: `${baseUrl}${toolUrl}`,
+      url: canonical,
       type: 'website',
       images: [
         {
-          url: '/og-image.png',
+          url: ogImage,
           width: 1200,
           height: 630,
           alt: tool.name,
@@ -79,7 +80,7 @@ export async function generateMetadata({ params }: ToolPageProps): Promise<Metad
       description,
     },
     alternates: {
-      canonical: `${baseUrl}${toolUrl}`,
+      canonical,
     },
   };
 }
diff --git a/src/app/tools/[category]/page.tsx b/src/app/tools/[category]/page.tsx
index be9159b..f6df892 100644
--- a/src/app/tools/[category]/page.tsx
+++ b/src/app/tools/[category]/page.tsx
@@ -1,4 +1,6 @@
 import { getCategories, getCategoryById } from '@/libs/tools-data';
+import { absoluteSiteUrl } from '@/libs/site-url';
+import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 
 interface CategoryPageProps {
@@ -20,6 +22,30 @@ export async function generateStaticParams() {
   }));
 }
 
+export async function generateMetadata({ params }: CategoryPageProps): Promise<Metadata> {
+  const { category: categoryId } = await params;
+  const category = getCategoryById(categoryId);
+  if (!category) {
+    return { title: 'Tools' };
+  }
+
+  const title = `${category.name} — Developer Tools`;
+  const description = `${category.description}. Free browser-based tools on DevPockit.`;
+  const canonical = absoluteSiteUrl(`/tools/${category.id}/`);
+
+  return {
+    title,
+    description,
+    openGraph: {
+      title: `${category.name} | DevPockit`,
+      description,
+      url: canonical,
+      type: 'website',
+    },
+    alternates: { canonical },
+  };
+}
+
 export default async function CategoryPage({ params }: CategoryPageProps) {
   try {
     const { category: categoryId } = await params;
diff --git a/src/components/AppSidebar.tsx b/src/components/AppSidebar.tsx
index c73ccba..6a629f0 100644
--- a/src/components/AppSidebar.tsx
+++ b/src/components/AppSidebar.tsx
@@ -1,6 +1,7 @@
 "use client"
 
 import { SearchTools } from "@/components/layout/SearchTools"
+import { useToolActivity } from "@/components/providers/ToolActivityProvider"
 import {
   Collapsible,
   CollapsibleContent,
@@ -49,6 +50,7 @@ import {
   RefreshCw,
   Search,
   Settings,
+  Star,
   Sun,
   type LucideIcon,
 } from "lucide-react"
@@ -95,6 +97,7 @@ export function AppSidebar({
   const pathname = usePathname()
   const { theme, setTheme } = useTheme()
   const { state, toggleSidebar } = useSidebar()
+  const { hydrated: pinsHydrated, isPinned, togglePinnedTool } = useToolActivity()
   const [codeEditorTheme, setCodeEditorTheme] = useCodeEditorTheme('basicDark')
   const [mounted, setMounted] = React.useState(false)
   const [openCategories, setOpenCategories] = React.useState<Set<string>>(new Set())
@@ -292,18 +295,46 @@ export function AppSidebar({
                               {category.tools.map((tool) => (
                                 <div
                                   key={tool.id}
-                                  className="text-xs cursor-pointer hover:bg-neutral-100 hover:text-neutral-900 dark:hover:bg-neutral-700 dark:hover:text-neutral-100 dark:text-neutral-100 py-1 px-2 rounded-md -mx-2"
-                                  onClick={(e) => {
-                                    e.stopPropagation()
-                                    handleToolSelect(tool.id)
-                                  }}
+                                  className="flex items-center gap-1 -mx-2 rounded-md px-2 py-1 text-xs"
                                 >
-                                  {tool.name}
+                                  <div
+                                    className="min-w-0 flex-1 cursor-pointer rounded-md py-1 px-2 -mx-1 hover:bg-neutral-100 hover:text-neutral-900 dark:text-neutral-100 dark:hover:bg-neutral-700 dark:hover:text-neutral-100"
+                                    onClick={(e) => {
+                                      e.stopPropagation()
+                                      handleToolSelect(tool.id)
+                                    }}
+                                  >
+                                    <span className="block truncate">{tool.name}</span>
+                                  </div>
+                                  {mounted && pinsHydrated ? (
+                                    <button
+                                      type="button"
+                                      className={cn(
+                                        'flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-neutral-500 hover:bg-neutral-200 hover:text-neutral-900 dark:text-neutral-400 dark:hover:bg-neutral-600 dark:hover:text-neutral-100',
+                                        isPinned(tool.id) && 'text-orange-600 dark:text-orange-400'
+                                      )}
+                                      aria-label={isPinned(tool.id) ? `Unpin ${tool.name}` : `Pin ${tool.name}`}
+                                      aria-pressed={isPinned(tool.id)}
+                                      onClick={(e) => {
+                                        e.stopPropagation()
+                                        togglePinnedTool(tool.id)
+                                      }}
+                                    >
+                                      <Star
+                                        className={cn(
+                                          'h-3.5 w-3.5',
+                                          isPinned(tool.id) &&
+                                            'fill-orange-500 text-orange-600 dark:fill-orange-500 dark:text-orange-400'
+                                        )}
+                                        strokeWidth={1.5}
+                                      />
+                                    </button>
+                                  ) : null}
                                 </div>
                               ))}
                             </div>
                           ),
-                          className: "w-48",
+                          className: "w-56",
                         }}
                       >
                         <IconComponent className="h-4 w-4" />
@@ -315,12 +346,42 @@ export function AppSidebar({
                       <SidebarMenuSub>
                         {category.tools.map((tool) => (
                           <SidebarMenuSubItem key={tool.id}>
-                            <SidebarMenuSubButton
-                              isActive={tool.id === selectedTool}
-                              onClick={() => handleToolSelect(tool.id)}
-                            >
-                              <span>{tool.name}</span>
-                            </SidebarMenuSubButton>
+                            <div className="flex w-full min-w-0 items-center gap-0.5">
+                              <SidebarMenuSubButton
+                                className="min-w-0 flex-1 pr-0"
+                                isActive={tool.id === selectedTool}
+                                onClick={() => handleToolSelect(tool.id)}
+                              >
+                                <span>{tool.name}</span>
+                              </SidebarMenuSubButton>
+                              {pinsHydrated ? (
+                                <button
+                                  type="button"
+                                  className={cn(
+                                    'flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+                                    isPinned(tool.id) && 'text-orange-600 dark:text-orange-400'
+                                  )}
+                                  aria-label={
+                                    isPinned(tool.id) ? `Unpin ${tool.name}` : `Pin ${tool.name}`
+                                  }
+                                  aria-pressed={isPinned(tool.id)}
+                                  onClick={(e) => {
+                                    e.preventDefault()
+                                    e.stopPropagation()
+                                    togglePinnedTool(tool.id)
+                                  }}
+                                >
+                                  <Star
+                                    className={cn(
+                                      'h-3.5 w-3.5',
+                                      isPinned(tool.id) &&
+                                        'fill-orange-500 text-orange-600 dark:fill-orange-500 dark:text-orange-400'
+                                    )}
+                                    strokeWidth={1.5}
+                                  />
+                                </button>
+                              ) : null}
+                            </div>
                           </SidebarMenuSubItem>
                         ))}
                       </SidebarMenuSub>
diff --git a/src/components/layout/AppLayout.tsx b/src/components/layout/AppLayout.tsx
index 33fe4db..5e82bd4 100644
--- a/src/components/layout/AppLayout.tsx
+++ b/src/components/layout/AppLayout.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { ToolActivityProvider, useToolActivity } from '@/components/providers/ToolActivityProvider';
 import { ToolStateProvider, useToolStateContext } from '@/components/providers/ToolStateProvider';
 import { AlertDialog } from '@/components/ui/alert-dialog';
 import { SidebarInset, SidebarProvider, useSidebar } from '@/components/ui/sidebar';
@@ -13,6 +14,7 @@ import { AppSidebar } from '../AppSidebar';
 import { AboutPage } from '../pages/AboutPage';
 import { WelcomePage } from '../pages/WelcomePage';
 import { CommandPalette } from './CommandPalette';
+import { DesktopRecommendedBanner } from './DesktopRecommendedBanner';
 import { MobileTopBar } from './MobileTopBar';
 import { TopNavTabs, type ActiveTab } from './TopNavTabs';
 
@@ -56,7 +58,7 @@ function DynamicToolRenderer({ toolId, instanceId }: { toolId: string; instanceI
     return (
       <div className="flex items-center justify-center h-full">
         <div className="text-center">
-          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
+          <div className="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2 border-primary motion-reduce:animate-none" />
           <p className="text-muted-foreground">Loading tool...</p>
         </div>
       </div>
@@ -98,6 +100,7 @@ function isAboutPage(pathname: string): boolean {
 // Inner component that has access to ToolStateContext
 function AppLayoutInner({ children }: AppLayoutProps) {
   const { clearToolState, clearAllToolStates } = useToolStateContext();
+  const { recordToolOpen } = useToolActivity();
   const { isMobile } = useSidebar();
   const [activeTabs, setActiveTabs] = useState<ActiveTab[]>([]);
   const [selectedTool, setSelectedTool] = useState<string | undefined>();
@@ -245,6 +248,14 @@ function AppLayoutInner({ children }: AppLayoutProps) {
     // Note: activeTabs removed from deps - using ref instead to prevent recreating tabs during close
   }, [pathname, router, isMobile, clearToolSelection]);
 
+  useEffect(() => {
+    if (!isValidToolUrl(pathname)) return;
+    const parsed = parseToolUrl(pathname);
+    if (parsed?.toolId && parsed.toolId !== ABOUT_TOOL_ID) {
+      recordToolOpen(parsed.toolId);
+    }
+  }, [pathname, recordToolOpen]);
+
   // Handle keyboard shortcuts
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -438,7 +449,23 @@ function AppLayoutInner({ children }: AppLayoutProps) {
                       <AboutPage />
                     </div>
                   ) : selectedTool && selectedInstanceId ? (
-                    <DynamicToolRenderer key={`${selectedTool}:${selectedInstanceId}`} toolId={selectedTool} instanceId={selectedInstanceId} />
+                    <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
+                      {(() => {
+                        const activeTool = getToolById(selectedTool);
+                        return activeTool?.desktopRecommended && isMobile ? (
+                          <DesktopRecommendedBanner
+                            key={activeTool.id}
+                            toolId={activeTool.id}
+                            toolName={activeTool.name}
+                          />
+                        ) : null;
+                      })()}
+                      <DynamicToolRenderer
+                        key={`${selectedTool}:${selectedInstanceId}`}
+                        toolId={selectedTool}
+                        instanceId={selectedInstanceId}
+                      />
+                    </div>
                   ) : null}
                 </>
               ) : (
@@ -473,10 +500,12 @@ function AppLayoutInner({ children }: AppLayoutProps) {
 
 export function AppLayout({ children }: AppLayoutProps) {
   return (
-    <ToolStateProvider>
-      <SidebarProvider>
-        <AppLayoutInner>{children}</AppLayoutInner>
-      </SidebarProvider>
-    </ToolStateProvider>
+    <ToolActivityProvider>
+      <ToolStateProvider>
+        <SidebarProvider>
+          <AppLayoutInner>{children}</AppLayoutInner>
+        </SidebarProvider>
+      </ToolStateProvider>
+    </ToolActivityProvider>
   );
 }
diff --git a/src/components/layout/CommandPalette.tsx b/src/components/layout/CommandPalette.tsx
index cb157d0..6463bc6 100644
--- a/src/components/layout/CommandPalette.tsx
+++ b/src/components/layout/CommandPalette.tsx
@@ -8,12 +8,13 @@ import {
 } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { Separator } from '@/components/ui/separator';
+import { useToolActivity } from '@/components/providers/ToolActivityProvider';
 import { useKeyboardShortcut } from '@/hooks/useKeyboardShortcut';
 import { getCategoryById, searchTools, toolIcons } from '@/libs/tools-data';
 import { cn } from '@/libs/utils';
 import { type Tool } from '@/types/tools';
-import { Search } from 'lucide-react';
-import { startTransition, useEffect, useRef, useState } from 'react';
+import { Search, Star } from 'lucide-react';
+import { startTransition, useEffect, useMemo, useRef, useState } from 'react';
 
 interface CommandPaletteProps {
   open: boolean;
@@ -27,9 +28,21 @@ interface CommandPaletteResultProps {
   isSelected?: boolean;
   index: number;
   onHover?: (index: number) => void;
+  showPin?: boolean;
+  pinned?: boolean;
+  onTogglePin?: (toolId: string) => void;
 }
 
-const CommandPaletteResult = ({ tool, onSelect, isSelected = false, index, onHover }: CommandPaletteResultProps) => {
+const CommandPaletteResult = ({
+  tool,
+  onSelect,
+  isSelected = false,
+  index,
+  onHover,
+  showPin = false,
+  pinned = false,
+  onTogglePin,
+}: CommandPaletteResultProps) => {
   const category = getCategoryById(tool.category);
   const IconComponent = toolIcons[tool.id];
   const [isHovered, setIsHovered] = useState(false);
@@ -44,79 +57,111 @@ const CommandPaletteResult = ({ tool, onSelect, isSelected = false, index, onHov
   };
 
   return (
-    <div
-      role="option"
-      aria-selected={isSelected}
-      tabIndex={isSelected ? 0 : -1}
-      className={cn(
-        'group flex items-center gap-2.5 px-3 py-2 rounded-lg cursor-pointer transition-all duration-200',
-        'hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2',
-        isHovered || isSelected
-          ? 'bg-orange-50 dark:bg-orange-950/50 border border-orange-200 dark:border-orange-900 shadow-sm'
-          : 'bg-transparent hover:bg-neutral-50 dark:hover:bg-neutral-800/50 border border-transparent'
-      )}
-      onClick={handleSelect}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={() => setIsHovered(false)}
-      onKeyDown={(e) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-          e.preventDefault();
-          handleSelect();
-        }
-      }}
-    >
-      {/* Icon Section */}
+    <div className="flex items-stretch gap-1">
       <div
+        role="option"
+        aria-selected={isSelected}
+        tabIndex={isSelected ? 0 : -1}
+        id={`palette-option-${index}`}
         className={cn(
-          'flex items-center justify-center w-8 h-8 rounded-lg transition-all duration-200 shrink-0',
+          'group flex min-w-0 flex-1 items-center gap-2.5 rounded-lg border px-3 py-2 transition-all duration-200',
+          'cursor-pointer hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2',
           isHovered || isSelected
-            ? 'bg-orange-100 dark:bg-orange-900 scale-105'
-            : 'bg-neutral-100 dark:bg-neutral-800'
+            ? 'border-orange-200 bg-orange-50 shadow-sm dark:border-orange-900 dark:bg-orange-950/50'
+            : 'border-transparent bg-transparent hover:bg-neutral-50 dark:hover:bg-neutral-800/50'
         )}
+        onClick={handleSelect}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={() => setIsHovered(false)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handleSelect();
+          }
+        }}
       >
-        {IconComponent ? (
-          <IconComponent
+        <div
+          className={cn(
+            'flex h-8 w-8 shrink-0 items-center justify-center rounded-lg transition-all duration-200',
+            isHovered || isSelected
+              ? 'scale-105 bg-orange-100 dark:bg-orange-900'
+              : 'bg-neutral-100 dark:bg-neutral-800'
+          )}
+        >
+          {IconComponent ? (
+            <IconComponent
+              className={cn(
+                'h-4 w-4 transition-all duration-200',
+                isHovered || isSelected
+                  ? 'scale-110 text-orange-600 dark:text-orange-500'
+                  : 'text-neutral-600 dark:text-neutral-400'
+              )}
+              strokeWidth={1.5}
+            />
+          ) : (
+            <span className="text-xs">{tool.icon}</span>
+          )}
+        </div>
+
+        <div className="min-w-0 flex-1">
+          <div
             className={cn(
-              'w-4 h-4 transition-all duration-200',
+              'text-sm font-medium transition-colors duration-200',
               isHovered || isSelected
-                ? 'text-orange-600 dark:text-orange-500 scale-110'
-                : 'text-neutral-600 dark:text-neutral-400'
+                ? 'text-orange-900 dark:text-orange-100'
+                : 'text-neutral-900 dark:text-neutral-100'
             )}
-            strokeWidth={1.5}
-          />
-        ) : (
-          <span className="text-xs">{tool.icon}</span>
-        )}
-      </div>
-
-      {/* Content Section */}
-      <div className="flex-1 min-w-0">
-        <div className={cn(
-          'font-medium text-sm transition-colors duration-200',
-          isHovered || isSelected
-            ? 'text-orange-900 dark:text-orange-100'
-            : 'text-neutral-900 dark:text-neutral-100'
-        )}>
-          {tool.name}
-        </div>
-        <div className="mt-0.5 text-xs text-neutral-600 dark:text-neutral-400 line-clamp-1">
-          {tool.description}
-        </div>
-        {category && (
-          <div className="mt-1">
-            <div className="bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded px-1.5 py-0.5 inline-block">
-              <p className="font-normal text-[9px] leading-3 text-neutral-700 dark:text-neutral-300 whitespace-nowrap">
-                {category.name}
-              </p>
-            </div>
+          >
+            {tool.name}
           </div>
-        )}
+          <div className="mt-0.5 line-clamp-1 text-xs text-neutral-600 dark:text-neutral-400">
+            {tool.description}
+          </div>
+          {category && (
+            <div className="mt-1">
+              <div className="inline-block rounded border border-neutral-200 bg-neutral-100 px-1.5 py-0.5 dark:border-neutral-700 dark:bg-neutral-800">
+                <p className="whitespace-nowrap text-[9px] font-normal leading-3 text-neutral-700 dark:text-neutral-300">
+                  {category.name}
+                </p>
+              </div>
+            </div>
+          )}
+        </div>
       </div>
+
+      {showPin && onTogglePin ? (
+        <button
+          type="button"
+          tabIndex={0}
+          className={cn(
+            'flex w-10 shrink-0 items-center justify-center rounded-lg border transition-colors',
+            pinned
+              ? 'border-orange-300 bg-orange-50 dark:border-orange-800 dark:bg-orange-950/40'
+              : 'border-transparent bg-neutral-50 hover:bg-neutral-100 dark:bg-neutral-800/80 dark:hover:bg-neutral-800'
+          )}
+          aria-label={pinned ? `Unpin ${tool.name}` : `Pin ${tool.name}`}
+          aria-pressed={pinned}
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            onTogglePin(tool.id);
+          }}
+        >
+          <Star
+            className={cn(
+              'h-4 w-4 text-neutral-500 dark:text-neutral-400',
+              pinned && 'fill-orange-500 text-orange-600 dark:fill-orange-500 dark:text-orange-400'
+            )}
+            strokeWidth={1.5}
+          />
+        </button>
+      ) : null}
     </div>
   );
 };
 
 export function CommandPalette({ open, onOpenChange, onToolSelect }: CommandPaletteProps) {
+  const { pinnedTools, recentTools, togglePinnedTool, isPinned } = useToolActivity();
   const [query, setQuery] = useState('');
   const [results, setResults] = useState<Tool[]>([]);
   const [selectedIndex, setSelectedIndex] = useState(0);
@@ -124,17 +169,35 @@ export function CommandPalette({ open, onOpenChange, onToolSelect }: CommandPale
   const inputRef = useRef<HTMLInputElement>(null);
   const resultsRef = useRef<HTMLDivElement>(null);
 
-  // Auto-focus input when dialog opens
+  const shortcutRows = useMemo(() => {
+    const pinnedSet = new Set(pinnedTools.map(t => t.id));
+    const out: { tool: Tool; index: number }[] = [];
+    let i = 0;
+    for (const tool of pinnedTools) {
+      out.push({ tool, index: i++ });
+    }
+    for (const tool of recentTools) {
+      if (!pinnedSet.has(tool.id)) {
+        out.push({ tool, index: i++ });
+      }
+    }
+    return out;
+  }, [pinnedTools, recentTools]);
+
+  const hasQuery = query.trim().length > 0;
+  const hasResults = results.length > 0;
+  const showShortcuts = !hasQuery && shortcutRows.length > 0;
+  const activeCount = hasQuery ? results.length : shortcutRows.length;
+
   useEffect(() => {
     if (open && inputRef.current) {
-      // Small delay to ensure dialog is fully rendered
-      setTimeout(() => {
+      const t = window.setTimeout(() => {
         inputRef.current?.focus();
       }, 100);
+      return () => clearTimeout(t);
     }
   }, [open]);
 
-  // Clear query when dialog closes
   useEffect(() => {
     if (!open) {
       startTransition(() => {
@@ -145,13 +208,11 @@ export function CommandPalette({ open, onOpenChange, onToolSelect }: CommandPale
     }
   }, [open]);
 
-  // Search logic
   useEffect(() => {
     if (query.trim().length > 0) {
       const searchResults = searchTools(query);
       startTransition(() => {
         setResults(searchResults);
-        // Reset to first result when query changes, but ensure it's within bounds
         setSelectedIndex(0);
       });
     } else {
@@ -162,33 +223,39 @@ export function CommandPalette({ open, onOpenChange, onToolSelect }: CommandPale
     }
   }, [query]);
 
-  // Ensure selectedIndex is within bounds when results change
   useEffect(() => {
-    if (results.length > 0 && selectedIndex >= results.length) {
+    if (activeCount > 0 && selectedIndex >= activeCount) {
       startTransition(() => {
         setSelectedIndex(0);
       });
     }
-  }, [results.length, selectedIndex]);
+  }, [activeCount, selectedIndex]);
 
-  // Scroll selected item into view
   useEffect(() => {
-    if (resultsRef.current && results.length > 0 && selectedIndex >= 0) {
-      // Find the actual result element (it's wrapped in a div with id)
-      const resultsContainer = resultsRef.current.querySelector('[role="group"]');
-      if (resultsContainer) {
-        const selectedElement = resultsContainer.children[selectedIndex]?.querySelector('[role="option"]') as HTMLElement;
-        if (selectedElement) {
-          selectedElement.scrollIntoView({
-            behavior: 'smooth',
-            block: 'nearest',
-          });
-        }
-      }
+    if (!resultsRef.current || activeCount <= 0 || selectedIndex < 0) return;
+
+    const container = resultsRef.current.querySelector('[role="group"]');
+    if (!container) return;
+
+    const selectedWrap = container.children[selectedIndex] as HTMLElement | undefined;
+    const selectedElement = selectedWrap?.querySelector('[role="option"]') as HTMLElement | undefined;
+    if (selectedElement) {
+      selectedElement.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+      });
     }
-  }, [selectedIndex, results.length]);
+  }, [selectedIndex, activeCount, hasQuery, showShortcuts]);
+
+  const handleClose = () => {
+    onOpenChange(false);
+  };
+
+  const handlePaletteToolSelect = (toolId: string) => {
+    onToolSelect(toolId);
+    handleClose();
+  };
 
-  // Keyboard navigation handler
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Escape') {
       e.preventDefault();
@@ -196,84 +263,70 @@ export function CommandPalette({ open, onOpenChange, onToolSelect }: CommandPale
       return;
     }
 
-    if (e.key === 'Enter' && results.length > 0 && selectedIndex >= 0 && selectedIndex < results.length) {
+    const list = hasQuery ? results : shortcutRows.map(r => r.tool);
+    if (
+      e.key === 'Enter' &&
+      list.length > 0 &&
+      selectedIndex >= 0 &&
+      selectedIndex < list.length
+    ) {
       e.preventDefault();
-      const toolToSelect = results[selectedIndex];
+      const toolToSelect = list[selectedIndex];
       if (toolToSelect) {
-        handleToolSelect(toolToSelect.id);
+        handlePaletteToolSelect(toolToSelect.id);
       }
       return;
     }
 
-    if (e.key === 'ArrowDown' && results.length > 0) {
+    if (e.key === 'ArrowDown' && list.length > 0) {
       e.preventDefault();
-      setSelectedIndex((prev) => {
-        const nextIndex = (prev + 1) % results.length;
-        return nextIndex;
-      });
+      setSelectedIndex(prev => (prev + 1) % list.length);
       return;
     }
 
-    if (e.key === 'ArrowUp' && results.length > 0) {
+    if (e.key === 'ArrowUp' && list.length > 0) {
       e.preventDefault();
-      setSelectedIndex((prev) => {
-        const prevIndex = (prev - 1 + results.length) % results.length;
-        return prevIndex;
-      });
+      setSelectedIndex(prev => (prev - 1 + list.length) % list.length);
       return;
     }
 
-    // Home key - go to first result
-    if (e.key === 'Home' && results.length > 0) {
+    if (e.key === 'Home' && list.length > 0) {
       e.preventDefault();
       setSelectedIndex(0);
       return;
     }
 
-    // End key - go to last result
-    if (e.key === 'End' && results.length > 0) {
+    if (e.key === 'End' && list.length > 0) {
       e.preventDefault();
-      setSelectedIndex(results.length - 1);
+      setSelectedIndex(list.length - 1);
       return;
     }
-
-    // Tab key should work normally for accessibility
-    if (e.key === 'Tab') {
-      // Allow default Tab behavior
-      return;
-    }
-  };
-
-  const handleClose = () => {
-    onOpenChange(false);
-  };
-
-  const handleToolSelect = (toolId: string) => {
-    onToolSelect(toolId);
-    handleClose();
   };
 
-  const hasQuery = query.trim().length > 0;
-  const hasResults = results.length > 0;
+  const listboxActive = hasQuery ? hasResults : showShortcuts;
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent
-        className="max-w-2xl p-0 h-[600px] flex flex-col bg-white dark:bg-neutral-900 border-neutral-200 dark:border-neutral-700 [&>button]:hidden"
+        className="flex h-[600px] max-w-2xl flex-col border-neutral-200 bg-white p-0 dark:border-neutral-700 dark:bg-neutral-900 [&>button]:hidden"
         aria-label="Command palette for searching tools"
+        onCloseAutoFocus={(e) => e.preventDefault()}
       >
         <DialogTitle className="sr-only">Search Tools</DialogTitle>
         <DialogDescription className="sr-only">
-          Search for developer tools by name or description. Use arrow keys to navigate and Enter to select.
+          Search for developer tools by name or description. Use arrow keys to navigate and Enter to
+          select.
         </DialogDescription>
-        <div className="px-6 pt-6 pb-0 flex flex-col flex-1 min-h-0">
-          {/* Search Input */}
+        <div className="flex min-h-0 flex-1 flex-col px-6 pb-0 pt-6">
           <div className="relative shrink-0">
             <label htmlFor="command-palette-search" className="sr-only">
               Search for tools
             </label>
-            <div className="relative bg-white dark:bg-[#0a0a0a] border border-[#e5e5e5] dark:border-[#262626] rounded-lg flex items-center">
-              <Search className="absolute left-3 h-4 w-4 text-[#0a0a0a] dark:text-[#e5e5e5] pointer-events-none" aria-hidden="true" />
+            <div className="relative flex items-center rounded-lg border border-[#e5e5e5] bg-white dark:border-[#262626] dark:bg-[#0a0a0a]">
+              <Search
+                className="pointer-events-none absolute left-3 h-4 w-4 text-[#0a0a0a] dark:text-[#e5e5e5]"
+                aria-hidden="true"
+              />
               <Input
                 id="command-palette-search"
                 ref={inputRef}
@@ -282,50 +335,88 @@ export function CommandPalette({ open, onOpenChange, onToolSelect }: CommandPale
                 value={query}
                 onChange={(e) => setQuery(e.target.value)}
                 onKeyDown={handleKeyDown}
-                className="h-12 pl-9 pr-20 text-base border-0 bg-transparent text-[#0a0a0a] dark:text-[#e5e5e5] placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus-visible:ring-0 focus-visible:ring-offset-0"
+                className="h-12 border-0 bg-transparent pl-9 pr-20 text-base text-[#0a0a0a] placeholder:text-neutral-500 focus-visible:ring-0 focus-visible:ring-offset-0 dark:text-[#e5e5e5] dark:placeholder:text-neutral-400"
                 aria-label="Search tools"
                 aria-autocomplete="list"
                 aria-controls="command-palette-results"
-                aria-expanded={hasResults}
-                aria-activedescendant={hasResults ? `result-${selectedIndex}` : undefined}
+                aria-expanded={listboxActive}
+                aria-activedescendant={
+                  listboxActive ? `palette-option-${selectedIndex}` : undefined
+                }
               />
-              {keyboardShortcut && (
-                <div className="absolute right-3 text-xs font-medium text-[#111827] dark:text-[#e5e5e5] leading-[20px] tracking-normal pointer-events-none" aria-hidden="true">
+              {keyboardShortcut ? (
+                <div
+                  className="pointer-events-none absolute right-3 text-xs font-medium leading-[20px] tracking-normal text-[#111827] dark:text-[#e5e5e5]"
+                  aria-hidden="true"
+                >
                   {keyboardShortcut}
                 </div>
-              )}
+              ) : null}
             </div>
           </div>
 
-          {/* Divider */}
           <Separator className="my-3" />
 
-          {/* Results Container */}
-          <div className="flex-1 min-h-0 overflow-hidden pb-5">
-            {!hasQuery && (
-              <div className="flex flex-col items-center justify-center h-full py-12">
-                <Search className="h-10 w-10 text-neutral-400 dark:text-neutral-500 mb-3 opacity-50" />
-                <p className="text-sm text-neutral-600 dark:text-neutral-400 text-center">
-                  Start typing to search for tools...
+          <div className="min-h-0 flex-1 overflow-hidden pb-5">
+            {!hasQuery && !showShortcuts ? (
+              <div className="flex h-full flex-col items-center justify-center py-12">
+                <Search className="mb-3 h-10 w-10 text-neutral-400 opacity-50 dark:text-neutral-500" />
+                <p className="text-center text-sm text-neutral-600 dark:text-neutral-400">
+                  Start typing to search, or open a tool to build your recent list.
                 </p>
-                {keyboardShortcut && (
-                  <p className="text-xs text-neutral-500 dark:text-neutral-500 mt-1 text-center">
+                {keyboardShortcut ? (
+                  <p className="mt-1 text-center text-xs text-neutral-500 dark:text-neutral-500">
                     Press {keyboardShortcut} to open this palette anytime
                   </p>
-                )}
+                ) : null}
               </div>
-            )}
+            ) : null}
 
-            {hasQuery && hasResults && (
+            {showShortcuts ? (
+              <div
+                id="command-palette-results"
+                role="listbox"
+                aria-label="Pinned and recent tools"
+                className="scrollbar-thin scrollbar-thumb-neutral-300 scrollbar-track-transparent dark:scrollbar-thumb-neutral-600 max-h-full space-y-1 overflow-y-auto"
+                ref={resultsRef}
+              >
+                <div
+                  className="sticky top-0 z-10 mb-1 border-b border-neutral-200 bg-white px-2 py-2.5 text-xs font-medium text-neutral-600 backdrop-blur-sm dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-400"
+                  role="status"
+                  aria-live="polite"
+                  aria-atomic="true"
+                >
+                  Jump back in
+                </div>
+                <div className="space-y-0.5" role="group">
+                  {shortcutRows.map(({ tool, index }) => (
+                    <div key={`${tool.id}-shortcut-${index}`}>
+                      <CommandPaletteResult
+                        tool={tool}
+                        onSelect={handlePaletteToolSelect}
+                        isSelected={index === selectedIndex}
+                        index={index}
+                        onHover={setSelectedIndex}
+                        showPin
+                        pinned={isPinned(tool.id)}
+                        onTogglePin={togglePinnedTool}
+                      />
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ) : null}
+
+            {hasQuery && hasResults ? (
               <div
                 id="command-palette-results"
                 role="listbox"
                 aria-label="Search results"
-                className="space-y-1 overflow-y-auto max-h-full scrollbar-thin scrollbar-thumb-neutral-300 dark:scrollbar-thumb-neutral-600 scrollbar-track-transparent"
+                className="scrollbar-thin scrollbar-thumb-neutral-300 scrollbar-track-transparent dark:scrollbar-thumb-neutral-600 max-h-full space-y-1 overflow-y-auto"
                 ref={resultsRef}
               >
                 <div
-                  className="px-2 py-2.5 text-xs font-medium text-neutral-600 dark:text-neutral-400 sticky top-0 bg-white dark:bg-neutral-900 z-10 border-b border-neutral-200 dark:border-neutral-700 mb-1 backdrop-blur-sm bg-opacity-95 dark:bg-opacity-95"
+                  className="sticky top-0 z-10 mb-1 border-b border-neutral-200 bg-white px-2 py-2.5 text-xs font-medium text-neutral-600 backdrop-blur-sm dark:border-neutral-900 dark:bg-neutral-900 dark:text-neutral-400"
                   role="status"
                   aria-live="polite"
                   aria-atomic="true"
@@ -334,36 +425,42 @@ export function CommandPalette({ open, onOpenChange, onToolSelect }: CommandPale
                 </div>
                 <div className="space-y-0.5" role="group">
                   {results.map((tool, index) => (
-                    <div key={tool.id} id={`result-${index}`}>
+                    <div key={tool.id}>
                       <CommandPaletteResult
                         tool={tool}
-                        onSelect={handleToolSelect}
+                        onSelect={handlePaletteToolSelect}
                         isSelected={index === selectedIndex}
                         index={index}
                         onHover={setSelectedIndex}
+                        showPin
+                        pinned={isPinned(tool.id)}
+                        onTogglePin={togglePinnedTool}
                       />
                     </div>
                   ))}
                 </div>
               </div>
-            )}
+            ) : null}
 
-            {hasQuery && !hasResults && (
+            {hasQuery && !hasResults ? (
               <div
-                className="flex flex-col items-center justify-center h-full py-12"
+                className="flex h-full flex-col items-center justify-center py-12"
                 role="status"
                 aria-live="polite"
                 aria-atomic="true"
               >
-                <Search className="h-12 w-12 mx-auto mb-4 text-neutral-400 dark:text-neutral-500 opacity-50" aria-hidden="true" />
-                <p className="text-sm font-medium text-neutral-900 dark:text-neutral-100 mb-1">
+                <Search
+                  className="mx-auto mb-4 h-12 w-12 text-neutral-400 opacity-50 dark:text-neutral-500"
+                  aria-hidden="true"
+                />
+                <p className="mb-1 text-sm font-medium text-neutral-900 dark:text-neutral-100">
                   No tools found for &ldquo;{query}&rdquo;
                 </p>
                 <p className="text-xs text-neutral-600 dark:text-neutral-400">
                   Try a different search term
                 </p>
               </div>
-            )}
+            ) : null}
           </div>
         </div>
       </DialogContent>
diff --git a/src/components/layout/DesktopRecommendedBanner.tsx b/src/components/layout/DesktopRecommendedBanner.tsx
new file mode 100644
index 0000000..35cd27c
--- /dev/null
+++ b/src/components/layout/DesktopRecommendedBanner.tsx
@@ -0,0 +1,67 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { Monitor } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+const storageKey = (toolId: string) => `devpockit:dismiss-desktop-hint:${toolId}`;
+
+interface DesktopRecommendedBannerProps {
+  toolId: string;
+  toolName: string;
+}
+
+export function DesktopRecommendedBanner({ toolId, toolName }: DesktopRecommendedBannerProps) {
+  /** null = not yet read from sessionStorage */
+  const [storedDismissed, setStoredDismissed] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    const id = requestAnimationFrame(() => {
+      try {
+        setStoredDismissed(sessionStorage.getItem(storageKey(toolId)) === '1');
+      } catch {
+        setStoredDismissed(false);
+      }
+    });
+    return () => cancelAnimationFrame(id);
+  }, [toolId]);
+
+  const handleDismiss = () => {
+    try {
+      sessionStorage.setItem(storageKey(toolId), '1');
+    } catch {
+      /* ignore quota / private mode */
+    }
+    setStoredDismissed(true);
+  };
+
+  if (storedDismissed !== false) {
+    return null;
+  }
+
+  return (
+    <div
+      role="status"
+      className="mx-4 mt-3 shrink-0 rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-950 dark:border-amber-900 dark:bg-amber-950/40 dark:text-amber-100"
+    >
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+        <div className="flex gap-2">
+          <Monitor className="mt-0.5 h-4 w-4 shrink-0 text-amber-700 dark:text-amber-400" aria-hidden />
+          <p>
+            <span className="font-medium">{toolName}</span> is easiest to use on a larger screen. You can
+            still use it here—layout may be tight on small viewports.
+          </p>
+        </div>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          className="shrink-0 border-amber-300 bg-white hover:bg-amber-100 dark:border-amber-800 dark:bg-transparent dark:hover:bg-amber-950"
+          onClick={handleDismiss}
+        >
+          Dismiss
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/pages/AboutPage.tsx b/src/components/pages/AboutPage.tsx
index af2b1e8..309f1fc 100644
--- a/src/components/pages/AboutPage.tsx
+++ b/src/components/pages/AboutPage.tsx
@@ -1,8 +1,41 @@
 'use client';
 
-import { Coffee, Github, Lightbulb } from 'lucide-react';
+import { useKeyboardShortcut } from '@/hooks/useKeyboardShortcut';
+import { Coffee, Github, Keyboard, Lightbulb } from 'lucide-react';
 import Link from 'next/link';
 
+function KeyboardShortcutsPanel() {
+  const paletteShortcut = useKeyboardShortcut();
+  const openPalette = paletteShortcut ?? '⌘K / Ctrl+K';
+
+  return (
+    <div className="mt-10 w-full max-w-[560px] rounded-lg border border-border bg-muted/30 p-5">
+      <div className="mb-4 flex items-center gap-2 font-semibold text-foreground">
+        <Keyboard className="h-5 w-5 shrink-0" aria-hidden />
+        Keyboard shortcuts
+      </div>
+      <dl className="grid gap-3 text-sm">
+        <div className="flex flex-col gap-0.5 sm:flex-row sm:justify-between sm:gap-4">
+          <dt className="text-muted-foreground">Open command palette</dt>
+          <dd className="font-mono text-foreground">{openPalette}</dd>
+        </div>
+        <div className="flex flex-col gap-0.5 sm:flex-row sm:justify-between sm:gap-4">
+          <dt className="text-muted-foreground">Close palette</dt>
+          <dd className="font-mono text-foreground">Esc</dd>
+        </div>
+        <div className="flex flex-col gap-0.5 sm:flex-row sm:justify-between sm:gap-4">
+          <dt className="text-muted-foreground">Back to welcome (with a tool open)</dt>
+          <dd className="font-mono text-foreground">Esc</dd>
+        </div>
+        <div className="flex flex-col gap-0.5 sm:flex-row sm:justify-between sm:gap-4">
+          <dt className="text-muted-foreground">Navigate palette results</dt>
+          <dd className="font-mono text-foreground">↑ ↓ Enter</dd>
+        </div>
+      </dl>
+    </div>
+  );
+}
+
 export function AboutPage() {
   return (
     <div className="flex flex-col h-full">
@@ -30,6 +63,7 @@ export function AboutPage() {
             and ideas for what we should build next.
             <br /><br />Happy Coding!
           </p>
+          <KeyboardShortcutsPanel />
         </div>
 
         {/* Cards */}
diff --git a/src/components/pages/WelcomePage.tsx b/src/components/pages/WelcomePage.tsx
index 57c47a2..0341e38 100644
--- a/src/components/pages/WelcomePage.tsx
+++ b/src/components/pages/WelcomePage.tsx
@@ -1,7 +1,10 @@
 'use client';
 
+import { useToolActivity } from '@/components/providers/ToolActivityProvider';
 import { ToolCard } from '@/components/ui/tool-card';
 import { getAllTools, getCategoryById, toolIcons } from '@/libs/tools-data';
+import type { Tool } from '@/types/tools';
+import { useMemo } from 'react';
 
 interface WelcomePageProps {
   onToolSelect: (toolId: string) => void;
@@ -10,42 +13,81 @@ interface WelcomePageProps {
 
 export function WelcomePage({ onToolSelect, activeToolIds = [] }: WelcomePageProps) {
   const allTools = getAllTools();
+  const { pinnedTools, recentTools, hydrated, togglePinnedTool, isPinned } = useToolActivity();
+
+  const orderedTools = useMemo(() => {
+    const seen = new Set<string>();
+    const order: Tool[] = [];
+    for (const t of pinnedTools) {
+      if (!seen.has(t.id)) {
+        seen.add(t.id);
+        order.push(t);
+      }
+    }
+    for (const t of recentTools) {
+      if (!seen.has(t.id)) {
+        seen.add(t.id);
+        order.push(t);
+      }
+    }
+    for (const t of allTools) {
+      if (!seen.has(t.id)) {
+        order.push(t);
+      }
+    }
+    return order;
+  }, [pinnedTools, recentTools, allTools]);
 
   return (
     <div className="h-full overflow-auto">
-      <div className="flex flex-col gap-6 items-center justify-center pb-12 pt-20 px-12 w-full">
-        {/* Hero Section */}
-        <div className="flex flex-col gap-3 items-center justify-center w-full text-center">
-          <h1 className="font-normal text-[64px] leading-[100%] tracking-normal overflow-visible py-4 w-fit h-fit text-center max-w-[678px]">
-            Your <span className="font-serif text-orange-600 dark:text-orange-500 italic" style={{ verticalAlign: 'bottom', marginRight: '6px' }}>essential</span> dev tools at your fingertips
-          </h1>
-          <p className="font-normal text-base leading-7 text-pretty text-center">
-            Everything run locally in your browser for optimal performance and privacy
-          </p>
+        <div className="flex flex-col gap-6 items-center justify-center pb-12 pt-20 px-12 w-full">
+          {/* Hero Section */}
+          <div className="flex flex-col gap-3 items-center justify-center w-full text-center">
+            <h1 className="font-normal text-[64px] leading-[100%] tracking-normal overflow-visible py-4 w-fit h-fit text-center max-w-[678px]">
+              Your{' '}
+              <span
+                className="font-serif text-orange-600 dark:text-orange-500 italic"
+                style={{ verticalAlign: 'bottom', marginRight: '6px' }}
+              >
+                essential
+              </span>{' '}
+              dev tools at your fingertips
+            </h1>
+            <p className="font-normal text-base leading-7 text-pretty text-center">
+              Everything run locally in your browser for optimal performance and privacy
+            </p>
+          </div>
         </div>
-      </div>
 
-      {/* Tools Grid */}
-      <div className="grid grid-cols-[repeat(auto-fit,minmax(242px,1fr))] gap-6 px-12 py-6 w-full">
-        {allTools.map((tool) => {
-          const category = getCategoryById(tool.category);
-          const IconComponent = toolIcons[tool.id];
-          const isActive = activeToolIds.includes(tool.id);
+        {/* Tools Grid */}
+        <div className="grid w-full grid-cols-[repeat(auto-fit,minmax(242px,1fr))] gap-6 px-12 py-6">
+          {orderedTools.map(tool => {
+            const category = getCategoryById(tool.category);
+            const IconComponent = toolIcons[tool.id];
+            const isActive = activeToolIds.includes(tool.id);
 
-          return (
-            <ToolCard
-              key={tool.id}
-              icon={IconComponent && <IconComponent className="w-10 h-10" />}
-              name={tool.name}
-              category={category?.name || tool.category}
-              isActive={isActive}
-              supportsDesktop={tool.supportsDesktop}
-              supportsMobile={tool.supportsMobile}
-              onClick={() => onToolSelect(tool.id)}
-            />
-          );
-        })}
+            return (
+              <ToolCard
+                key={tool.id}
+                icon={IconComponent && <IconComponent className="w-10 h-10" />}
+                name={tool.name}
+                category={category?.name || tool.category}
+                isActive={isActive}
+                supportsDesktop={tool.supportsDesktop}
+                supportsMobile={tool.supportsMobile}
+                onClick={() => onToolSelect(tool.id)}
+                pinButton={
+                  hydrated
+                    ? {
+                        pinned: isPinned(tool.id),
+                        onToggle: () => togglePinnedTool(tool.id),
+                      }
+                    : undefined
+                }
+              />
+            );
+          })}
+        </div>
       </div>
-    </div>
   );
 }
diff --git a/src/components/providers/AppToastProvider.tsx b/src/components/providers/AppToastProvider.tsx
new file mode 100644
index 0000000..3eca115
--- /dev/null
+++ b/src/components/providers/AppToastProvider.tsx
@@ -0,0 +1,70 @@
+'use client';
+
+import { cn } from '@/libs/utils';
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react';
+
+interface AppToastContextValue {
+  showToast: (message: string) => void;
+}
+
+const AppToastContext = createContext<AppToastContextValue | null>(null);
+
+const TOAST_DURATION_MS = 2400;
+
+export function AppToastProvider({ children }: { children: ReactNode }) {
+  const [message, setMessage] = useState<string | null>(null);
+  const hideTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const clearTimer = () => {
+    if (hideTimerRef.current !== null) {
+      clearTimeout(hideTimerRef.current);
+      hideTimerRef.current = null;
+    }
+  };
+
+  const showToast = useCallback((next: string) => {
+    clearTimer();
+    setMessage(next);
+    hideTimerRef.current = setTimeout(() => {
+      setMessage(null);
+      hideTimerRef.current = null;
+    }, TOAST_DURATION_MS);
+  }, []);
+
+  useEffect(() => () => clearTimer(), []);
+
+  return (
+    <AppToastContext.Provider value={{ showToast }}>
+      {children}
+      <div
+        className={cn(
+          'pointer-events-none fixed bottom-6 left-1/2 z-[200] flex max-w-[min(90vw,380px)] -translate-x-1/2 justify-center px-4 motion-safe:transition-opacity motion-safe:duration-200',
+          message ? 'opacity-100' : 'opacity-0'
+        )}
+        aria-live="polite"
+        aria-atomic="true"
+      >
+        {message ? (
+          <div
+            role="status"
+            className="pointer-events-none rounded-lg border border-neutral-200 bg-white px-4 py-2.5 text-center text-sm font-medium text-neutral-900 shadow-lg dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-100"
+          >
+            {message}
+          </div>
+        ) : null}
+      </div>
+    </AppToastContext.Provider>
+  );
+}
+
+export function useAppToast(): AppToastContextValue | null {
+  return useContext(AppToastContext);
+}
diff --git a/src/components/providers/ToolActivityProvider.tsx b/src/components/providers/ToolActivityProvider.tsx
new file mode 100644
index 0000000..2f6cdc9
--- /dev/null
+++ b/src/components/providers/ToolActivityProvider.tsx
@@ -0,0 +1,95 @@
+'use client';
+
+import {
+  bumpRecentToolIds,
+  loadPinnedToolIds,
+  loadRecentToolIds,
+  savePinnedToolIds,
+  saveRecentToolIds,
+  togglePinnedToolId,
+} from '@/libs/tool-activity-storage';
+import { getToolById } from '@/libs/tools-data';
+import type { Tool } from '@/types/tools';
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from 'react';
+
+interface ToolActivityContextValue {
+  recentTools: Tool[];
+  pinnedTools: Tool[];
+  recordToolOpen: (toolId: string) => void;
+  togglePinnedTool: (toolId: string) => void;
+  isPinned: (toolId: string) => boolean;
+  hydrated: boolean;
+}
+
+const ToolActivityContext = createContext<ToolActivityContextValue | null>(null);
+
+function resolveTools(ids: string[]): Tool[] {
+  return ids.map(getToolById).filter((t): t is Tool => t !== undefined);
+}
+
+export function ToolActivityProvider({ children }: { children: ReactNode }) {
+  const [recentIds, setRecentIds] = useState<string[]>([]);
+  const [pinnedIds, setPinnedIds] = useState<string[]>([]);
+  const [hydrated, setHydrated] = useState(false);
+
+  useEffect(() => {
+    const id = requestAnimationFrame(() => {
+      setRecentIds(loadRecentToolIds());
+      setPinnedIds(loadPinnedToolIds());
+      setHydrated(true);
+    });
+    return () => cancelAnimationFrame(id);
+  }, []);
+
+  const recordToolOpen = useCallback((toolId: string) => {
+    setRecentIds(prev => {
+      const base = prev.length > 0 ? prev : loadRecentToolIds();
+      const next = bumpRecentToolIds(base, toolId);
+      saveRecentToolIds(next);
+      return next;
+    });
+  }, []);
+
+  const togglePinnedTool = useCallback((toolId: string) => {
+    setPinnedIds(prev => {
+      const base = hydrated ? prev : loadPinnedToolIds();
+      const next = togglePinnedToolId(base, toolId);
+      savePinnedToolIds(next);
+      return next;
+    });
+  }, [hydrated]);
+
+  const value = useMemo<ToolActivityContextValue>(() => {
+    const pinnedSet = new Set(pinnedIds);
+    const recentFiltered = recentIds.filter(id => !pinnedSet.has(id));
+
+    return {
+      recentTools: resolveTools(recentFiltered),
+      pinnedTools: resolveTools(pinnedIds),
+      recordToolOpen,
+      togglePinnedTool,
+      isPinned: (toolId: string) => pinnedIds.includes(toolId),
+      hydrated,
+    };
+  }, [recentIds, pinnedIds, recordToolOpen, togglePinnedTool, hydrated]);
+
+  return (
+    <ToolActivityContext.Provider value={value}>{children}</ToolActivityContext.Provider>
+  );
+}
+
+export function useToolActivity(): ToolActivityContextValue {
+  const ctx = useContext(ToolActivityContext);
+  if (!ctx) {
+    throw new Error('useToolActivity must be used within ToolActivityProvider');
+  }
+  return ctx;
+}
diff --git a/src/components/tools/HeadersCookiesExplainer.tsx b/src/components/tools/HeadersCookiesExplainer.tsx
new file mode 100644
index 0000000..37d495f
--- /dev/null
+++ b/src/components/tools/HeadersCookiesExplainer.tsx
@@ -0,0 +1,605 @@
+'use client';
+
+import { useToolState } from '@/components/providers/ToolStateProvider';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { CodePanel, type CodePanelTab } from '@/components/ui/code-panel';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { useCodeEditorTheme } from '@/hooks/useCodeEditorTheme';
+import {
+  HEADERS_COOKIE_EXAMPLES,
+  type HeaderCookieGlossaryCategory,
+  type GlossaryEntry,
+} from '@/config/headers-cookies-explainer-config';
+import {
+  parseHttpHeaderBlock,
+  parseRequestCookiePairs,
+  parseSetCookiePaste,
+  type ParsedHeaderRow,
+  type ParsedSetCookieCookie,
+} from '@/libs/headers-cookies-explainer';
+import { cn } from '@/libs/utils';
+import { ChevronDownIcon, DocumentDuplicateIcon } from '@heroicons/react/24/outline';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+const TOOL_ID = 'headers-cookies-explainer' as const;
+
+type MainTab = 'headers' | 'cookie-request' | 'set-cookie';
+
+interface HeadersCookiesExplainerProps {
+  className?: string;
+  instanceId: string;
+}
+
+function categoryBadgeClass(cat: HeaderCookieGlossaryCategory | undefined): string {
+  switch (cat) {
+    case 'security':
+      return 'border-red-200 bg-red-100 text-red-900 dark:border-red-900/50 dark:bg-red-950/40 dark:text-red-100';
+    case 'caching':
+      return 'border-amber-200 bg-amber-100 text-amber-950 dark:border-amber-900/40 dark:bg-amber-950/35 dark:text-amber-50';
+    case 'cors':
+      return 'border-violet-200 bg-violet-100 text-violet-950 dark:border-violet-900/40 dark:bg-violet-950/40 dark:text-violet-100';
+    case 'auth':
+      return 'border-blue-200 bg-blue-100 text-blue-950 dark:border-blue-900/40 dark:bg-blue-950/40 dark:text-blue-50';
+    case 'privacy':
+      return 'border-teal-200 bg-teal-100 text-teal-950 dark:border-teal-900/40 dark:bg-teal-950/35 dark:text-teal-50';
+    case 'content':
+      return 'border-sky-200 bg-sky-100 text-sky-950 dark:border-sky-900/40 dark:bg-sky-950/35 dark:text-sky-50';
+    default:
+      return 'border-neutral-200 bg-neutral-100 text-neutral-800 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100';
+  }
+}
+
+function copyText(text: string) {
+  if (!navigator.clipboard?.writeText) return;
+  navigator.clipboard.writeText(text).catch(console.error);
+}
+
+export function HeadersCookiesExplainer({ className, instanceId }: HeadersCookiesExplainerProps) {
+  const { toolState, updateToolState } = useToolState(TOOL_ID, instanceId);
+
+  const [mainTab, setMainTab] = useState<MainTab>('headers');
+  const [headersText, setHeadersText] = useState('');
+  const [cookieRequestText, setCookieRequestText] = useState('');
+  const [setCookieText, setSetCookieText] = useState('');
+  const [isHydrated, setIsHydrated] = useState(false);
+  const [theme] = useCodeEditorTheme('basicDark');
+  const [inputWrapText, setInputWrapText] = useState(true);
+
+  const [detailEntry, setDetailEntry] = useState<{ title: string; entry: GlossaryEntry } | null>(
+    null
+  );
+
+  useEffect(() => {
+    setIsHydrated(true);
+    if (toolState) {
+      if (toolState.mainTab) setMainTab(toolState.mainTab as MainTab);
+      if (toolState.headersText !== undefined && toolState.headersText !== null) {
+        setHeadersText(toolState.headersText as string);
+      }
+      if (toolState.cookieRequestText !== undefined && toolState.cookieRequestText !== null) {
+        setCookieRequestText(toolState.cookieRequestText as string);
+      }
+      if (toolState.setCookieText !== undefined && toolState.setCookieText !== null) {
+        setSetCookieText(toolState.setCookieText as string);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (isHydrated) {
+      updateToolState({
+        mainTab,
+        headersText,
+        cookieRequestText,
+        setCookieText,
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mainTab, headersText, cookieRequestText, setCookieText, isHydrated]);
+
+  useEffect(() => {
+    if (isHydrated && (!toolState || Object.keys(toolState).length === 0)) {
+      setHeadersText('');
+      setCookieRequestText('');
+      setSetCookieText('');
+      setMainTab('headers');
+    }
+  }, [toolState, isHydrated]);
+
+  const parsedHeaders = useMemo(() => parseHttpHeaderBlock(headersText), [headersText]);
+  const parsedRequestCookies = useMemo(
+    () => parseRequestCookiePairs(cookieRequestText),
+    [cookieRequestText]
+  );
+  const parsedSetCookies = useMemo(() => parseSetCookiePaste(setCookieText), [setCookieText]);
+
+  const allWarnings =
+    mainTab === 'headers'
+      ? parsedHeaders.warnings
+      : mainTab === 'cookie-request'
+        ? parsedRequestCookies.warnings
+        : parsedSetCookies.warnings;
+
+  const openGlossary = (title: string, entry?: GlossaryEntry) => {
+    if (!entry) return;
+    setDetailEntry({ title, entry });
+  };
+
+  const inputTabs = useMemo<CodePanelTab[]>(
+    () => [
+      { id: 'headers', label: 'HTTP headers', value: headersText, language: 'plaintext' },
+      { id: 'cookie-request', label: 'Cookie (request)', value: cookieRequestText, language: 'plaintext' },
+      { id: 'set-cookie', label: 'Set-Cookie', value: setCookieText, language: 'plaintext' },
+    ],
+    [headersText, cookieRequestText, setCookieText]
+  );
+
+  const handleEditorChange = useCallback(
+    (value: string) => {
+      switch (mainTab) {
+        case 'headers':
+          setHeadersText(value);
+          break;
+        case 'cookie-request':
+          setCookieRequestText(value);
+          break;
+        case 'set-cookie':
+          setSetCookieText(value);
+          break;
+        default:
+          break;
+      }
+    },
+    [mainTab]
+  );
+
+  const editorPlaceholder = useMemo(() => {
+    switch (mainTab) {
+      case 'headers':
+        return 'Host: api.example.com\nAccept: application/json';
+      case 'cookie-request':
+        return 'session=abc123; locale=en';
+      case 'set-cookie':
+        return 'Set-Cookie: id=u1; Path=/; HttpOnly\nSet-Cookie: prefs=compact; Secure; SameSite=None';
+      default:
+        return '';
+    }
+  }, [mainTab]);
+
+  const editorHeaderActions = useMemo(() => {
+    if (mainTab === 'headers') {
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button type="button" variant="outline" size="sm" className="h-8 px-3 text-xs">
+              Load example
+              <ChevronDownIcon className="h-3 w-3 ml-1" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={() => setHeadersText(HEADERS_COOKIE_EXAMPLES.headRequest)}>
+              Sample GET request
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() => setHeadersText(HEADERS_COOKIE_EXAMPLES.responseWithSetCookie)}
+            >
+              Sample response (+ Set-Cookie)
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    }
+    if (mainTab === 'cookie-request') {
+      return (
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          className="h-8 px-3 text-xs"
+          onClick={() => setCookieRequestText(HEADERS_COOKIE_EXAMPLES.requestCookies)}
+        >
+          Load example
+        </Button>
+      );
+    }
+    return (
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        className="h-8 px-3 text-xs"
+        onClick={() => setSetCookieText(HEADERS_COOKIE_EXAMPLES.setCookiesMultiline)}
+      >
+        Load example
+      </Button>
+    );
+  }, [mainTab]);
+
+  const editorFooterHint = useMemo(() => {
+    if (mainTab === 'cookie-request') {
+      return (
+        <span className="text-xs text-neutral-600 dark:text-neutral-400 max-w-[min(100%,42rem)]">
+          Paste the value only (omit <span className="font-mono text-[11px]">Cookie:</span> prefix). Semicolon-separated{' '}
+          <span className="font-mono text-[11px]">name=value</span> pairs.
+        </span>
+      );
+    }
+    if (mainTab === 'set-cookie') {
+      return (
+        <span className="text-xs text-neutral-600 dark:text-neutral-400 max-w-[min(100%,42rem)]">
+          One cookie per line. Optional <span className="font-mono text-[11px]">Set-Cookie:</span> prefix. Avoid merging
+          lines when <span className="font-mono text-[11px]">Expires=</span> dates include commas.
+        </span>
+      );
+    }
+    return null;
+  }, [mainTab]);
+
+  return (
+    <div className={cn('flex flex-col h-full', className)}>
+      <div className="bg-background px-[28px] pt-[36px] pb-[20px]">
+        <h1 className="text-[32px] font-normal leading-8 tracking-normal text-neutral-900 dark:text-neutral-100 mb-3">
+          Headers / Cookies explainer
+        </h1>
+        <p className="text-sm leading-5 tracking-normal text-neutral-900 dark:text-neutral-100 max-w-3xl">
+          Paste HTTP headers or cookie strings copied from DevTools or server logs. The tool parses rows
+          client-side only and attaches short glossary notes—not a substitute for inspecting real traffic policies.
+        </p>
+      </div>
+
+      <div className="flex-1 flex flex-col bg-background px-[24px] pt-6 pb-10 min-h-0 overflow-hidden">
+        <div className="flex flex-col gap-4 min-h-0 flex-1">
+          <CodePanel fillHeight={true}
+            tabs={inputTabs}
+            activeTab={mainTab}
+            onTabChange={(id) => setMainTab(id as MainTab)}
+            language="plaintext"
+            height="280px"
+            theme={theme}
+            wrapText={inputWrapText}
+            onWrapTextChange={setInputWrapText}
+            placeholder={editorPlaceholder}
+            showClearButton={true}
+            className="w-full shrink-0"
+            headerActions={editorHeaderActions}
+            footerLeftContent={editorFooterHint ?? undefined}
+            onChange={handleEditorChange}
+          />
+
+          {(allWarnings.length > 0 || (mainTab === 'headers' && parsedHeaders.malformedLines.length > 0)) && (
+            <div className="rounded-lg border border-amber-200 bg-amber-50/90 dark:border-amber-900/50 dark:bg-amber-950/25 px-3 py-2 text-sm text-amber-950 dark:text-amber-100 flex-shrink-0 space-y-1">
+              <p className="font-medium">Parsing notes</p>
+              <ul className="list-disc pl-5 space-y-0.5 text-amber-900/90 dark:text-amber-200/90">
+                {mainTab === 'headers' &&
+                  parsedHeaders.malformedLines.map((m, i) => (
+                    <li key={`m-${m.lineNumber}-${i}`}>
+                      Line {m.lineNumber}: ignored “{m.content.slice(0, 64)}
+                      {m.content.length > 64 ? '…' : ''}” (missing name:value colon)
+                    </li>
+                  ))}
+                {allWarnings.map((w, i) => (
+                  <li key={`w-${i}`}>{w}</li>
+                ))}
+              </ul>
+            </div>
+          )}
+
+          {mainTab === 'headers' && parsedHeaders.skippedFirstLine?.trim() && (
+            <p className="text-xs text-neutral-600 dark:text-neutral-400 flex-shrink-0">
+              Stripped initial line:{' '}
+              <span className="font-mono break-all">{parsedHeaders.skippedFirstLine.trim()}</span>
+            </p>
+          )}
+
+          {/* Results */}
+          <div className="flex-1 min-h-0 rounded-lg border border-neutral-200 dark:border-neutral-800 overflow-auto flex flex-col">
+            {mainTab === 'headers' &&
+              (parsedHeaders.rows.length === 0 ? (
+                <p className="p-6 text-sm text-neutral-600 dark:text-neutral-400">
+                  Paste a header block to see a row-by-row breakdown.
+                </p>
+              ) : (
+                <table className="w-full text-sm text-left border-collapse">
+                  <thead className="sticky top-0 z-10 bg-neutral-50 dark:bg-neutral-900/95 backdrop-blur border-b border-neutral-200 dark:border-neutral-800">
+                    <tr>
+                      <th className="px-4 py-3 font-medium min-w-[140px]">Header</th>
+                      <th className="px-4 py-3 font-medium min-w-[120px]">Value</th>
+                      <th className="px-4 py-3 font-medium w-36">Topic</th>
+                      <th className="px-4 py-3 font-medium">Summary</th>
+                      <th className="px-4 py-3 font-medium w-28 text-right">Copy</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {parsedHeaders.rows.map((row, index) => (
+                      <ParsedHeaderRowTr
+                        key={`${row.name}-${row.occurrenceIndex}-${index}`}
+                        row={row}
+                        onOpenExplain={
+                          row.glossary
+                            ? () =>
+                                openGlossary(
+                                  `${row.name} (#${row.occurrenceIndex})`,
+                                  row.glossary
+                                )
+                            : undefined
+                        }
+                      />
+                    ))}
+                  </tbody>
+                </table>
+              ))}
+
+            {mainTab === 'cookie-request' &&
+              (parsedRequestCookies.pairs.length === 0 ? (
+                <p className="p-6 text-sm text-neutral-600 dark:text-neutral-400">
+                  Paste cookie pairs from the Cookie request header (_name=value;_).
+                </p>
+              ) : (
+                <table className="w-full text-sm text-left border-collapse">
+                  <thead className="sticky top-0 z-10 bg-neutral-50 dark:bg-neutral-900/95 backdrop-blur border-b border-neutral-200 dark:border-neutral-800">
+                    <tr>
+                      <th className="px-4 py-3 font-medium">Name</th>
+                      <th className="px-4 py-3 font-medium">Value</th>
+                      <th className="px-4 py-3 font-medium w-28 text-right">Copy</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {parsedRequestCookies.pairs.map((p, i) => (
+                      <tr
+                        key={`${p.name}-${i}`}
+                        className={cn(
+                          'border-b border-neutral-100 dark:border-neutral-800/80',
+                          i % 2 === 0 ? 'bg-background' : 'bg-neutral-50/50 dark:bg-neutral-950/30'
+                        )}
+                      >
+                        <td className="px-4 py-2.5 font-mono text-neutral-900 dark:text-neutral-100">
+                          {p.name}
+                        </td>
+                        <td className="px-4 py-2.5 font-mono text-neutral-700 dark:text-neutral-300 break-all">
+                          {p.value || '—'}
+                        </td>
+                        <td className="px-4 py-2.5 text-right">
+                          <Button
+                            type="button"
+                            size="sm"
+                            variant="ghost"
+                            className="h-8 px-2"
+                            onClick={() => copyText(`${p.name}=${p.value}`)}
+                          >
+                            <DocumentDuplicateIcon className="h-4 w-4" />
+                          </Button>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              ))}
+
+            {mainTab === 'set-cookie' &&
+              (parsedSetCookies.cookies.length === 0 ? (
+                <p className="p-6 text-sm text-neutral-600 dark:text-neutral-400">
+                  Paste newline-separated Set-Cookie lines; avoid merging multiple cookies on one line when Expires dates
+                  are present (commas confuse naive splitting).
+                </p>
+              ) : (
+                <div className="divide-y divide-neutral-100 dark:divide-neutral-800/80">
+                  {parsedSetCookies.cookies.map((cookie, ci) => (
+                    <div key={`${cookie.cookieName}-${ci}`} className="p-4 space-y-3">
+                      <div className="flex flex-wrap items-start justify-between gap-2">
+                        <p className="font-mono text-sm text-neutral-900 dark:text-neutral-100">
+                          <span className="font-semibold">{cookie.cookieName}</span>
+                          <span className="text-neutral-600 dark:text-neutral-400 mx-1">=</span>
+                          <span className="break-all">{cookie.cookieValue || '(empty)'}</span>
+                        </p>
+                        <Button
+                          type="button"
+                          size="sm"
+                          variant="outline"
+                          className="h-8 shrink-0"
+                          onClick={() =>
+                            copyText(`${cookie.cookieName}=${cookie.cookieValue}`)
+                          }
+                        >
+                          Copy name=value
+                        </Button>
+                      </div>
+                      <table className="w-full text-sm text-left border-collapse">
+                        <thead>
+                          <tr className="border-b border-neutral-200 dark:border-neutral-800 bg-neutral-50/80 dark:bg-neutral-900/50">
+                            <th className="px-3 py-2 font-medium">Attribute</th>
+                            <th className="px-3 py-2 font-medium">Value</th>
+                            <th className="px-3 py-2 font-medium">Topic</th>
+                            <th className="px-3 py-2 font-medium">Summary</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          {cookie.attributes.map((attr, ai) => (
+                            <SetCookieAttrRow
+                              key={`${ci}-${attr.name}-${ai}`}
+                              attr={attr}
+                              cookieName={cookie.cookieName}
+                              onOpenExplain={(title, entry) => openGlossary(title, entry)}
+                            />
+                          ))}
+                        </tbody>
+                      </table>
+                    </div>
+                  ))}
+                </div>
+              ))}
+          </div>
+        </div>
+      </div>
+
+      <Dialog open={detailEntry !== null} onOpenChange={(open) => !open && setDetailEntry(null)}>
+        <DialogContent className="max-w-lg gap-6">
+          {detailEntry ? (
+            <>
+              <DialogHeader>
+                <DialogTitle className="text-xl">{detailEntry.title}</DialogTitle>
+              </DialogHeader>
+              <DialogDescription asChild>
+                <div className="space-y-3 text-left text-neutral-900 dark:text-neutral-100">
+                  <Badge
+                    variant="outline"
+                    className={cn('text-[10px] uppercase tracking-wide', categoryBadgeClass(detailEntry.entry.category))}
+                  >
+                    {detailEntry.entry.category}
+                  </Badge>
+                  <p className="text-sm text-neutral-700 dark:text-neutral-300 leading-relaxed">
+                    <span className="font-medium">{detailEntry.entry.summary}</span>
+                  </p>
+                  <p className="text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed">
+                    {detailEntry.entry.detail}
+                  </p>
+                </div>
+              </DialogDescription>
+              <DialogFooter>
+                <DialogClose asChild>
+                  <Button type="button" variant="outline">
+                    Close
+                  </Button>
+                </DialogClose>
+              </DialogFooter>
+            </>
+          ) : null}
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
+function ParsedHeaderRowTr({
+  row,
+  onOpenExplain,
+}: {
+  row: ParsedHeaderRow;
+  onOpenExplain?: () => void;
+}) {
+  return (
+    <tr
+      className={cn(
+        'border-b border-neutral-100 dark:border-neutral-800/80',
+        'transition-colors hover:bg-neutral-100/90 dark:hover:bg-neutral-800/50'
+      )}
+    >
+      <td className="px-4 py-2.5 align-top">
+        <div className="font-mono text-neutral-900 dark:text-neutral-100">
+          {row.name}
+          {row.occurrenceIndex > 1 && (
+            <span className="ml-2 text-[10px] text-neutral-500 dark:text-neutral-400">
+              #{row.occurrenceIndex}
+            </span>
+          )}
+        </div>
+      </td>
+      <td className="px-4 py-2.5 align-top font-mono text-xs text-neutral-700 dark:text-neutral-300 break-all max-w-[40vw] sm:max-w-md">
+        {row.value || '—'}
+      </td>
+      <td className="px-4 py-2.5 align-top">
+        {row.glossary?.category ? (
+          <Badge
+            variant="outline"
+            className={cn(
+              'text-[10px] uppercase tracking-normal',
+              categoryBadgeClass(row.glossary.category)
+            )}
+          >
+            {row.glossary.category}
+          </Badge>
+        ) : (
+          <span className="text-xs text-neutral-500 dark:text-neutral-400">—</span>
+        )}
+      </td>
+      <td className="px-4 py-2.5 align-top text-neutral-700 dark:text-neutral-300 leading-snug">
+        {row.glossary && onOpenExplain ? (
+          <button
+            type="button"
+            onClick={onOpenExplain}
+            className="text-left underline-offset-2 hover:underline text-neutral-800 dark:text-neutral-200 cursor-pointer bg-transparent border-0 p-0 font-inherit"
+          >
+            {row.glossary.summary}
+          </button>
+        ) : (
+          <span className="text-xs text-neutral-500 dark:text-neutral-400">
+            No glossary entry for this header name yet.
+          </span>
+        )}
+      </td>
+      <td className="px-4 py-2.5 align-top text-right">
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="h-8 px-2"
+          onClick={() => copyText(`${row.name}: ${row.value}`)}
+          aria-label="Copy header line"
+        >
+          <DocumentDuplicateIcon className="h-4 w-4" />
+        </Button>
+      </td>
+    </tr>
+  );
+}
+
+function SetCookieAttrRow({
+  attr,
+  cookieName,
+  onOpenExplain,
+}: {
+  attr: ParsedSetCookieCookie['attributes'][number];
+  cookieName: string;
+  onOpenExplain: (title: string, entry: GlossaryEntry) => void;
+}) {
+  const title = `${cookieName} » ${attr.name}`;
+  const glossary = attr.glossary;
+  return (
+    <tr className="border-b border-neutral-100 dark:border-neutral-800/40">
+      <td className="px-3 py-2 font-mono text-xs text-neutral-900 dark:text-neutral-100 align-top">{attr.name}</td>
+      <td className="px-3 py-2 font-mono text-xs text-neutral-700 dark:text-neutral-300 break-all align-top">
+        {attr.value || '(flag)'}
+      </td>
+      <td className="px-3 py-2 align-top">
+        {glossary?.category ? (
+          <Badge
+            variant="outline"
+            className={cn(
+              'text-[10px] uppercase tracking-normal whitespace-nowrap',
+              categoryBadgeClass(glossary.category)
+            )}
+          >
+            {glossary.category}
+          </Badge>
+        ) : (
+          <span className="text-xs text-neutral-500">—</span>
+        )}
+      </td>
+      <td className="px-3 py-2 text-neutral-700 dark:text-neutral-300 text-xs align-top leading-snug">
+        {glossary ? (
+          <button
+            type="button"
+            className="text-left underline-offset-2 hover:underline cursor-pointer bg-transparent border-0 p-0 font-inherit text-inherit"
+            onClick={() => onOpenExplain(title, glossary)}
+          >
+            {glossary.summary}
+          </button>
+        ) : (
+          <span className="text-neutral-500 dark:text-neutral-400">
+            Standard cookie attribute semantics apply.
+          </span>
+        )}
+      </td>
+    </tr>
+  );
+}
diff --git a/src/components/tools/HttpStatusCheatsheet.tsx b/src/components/tools/HttpStatusCheatsheet.tsx
new file mode 100644
index 0000000..52ff533
--- /dev/null
+++ b/src/components/tools/HttpStatusCheatsheet.tsx
@@ -0,0 +1,298 @@
+'use client';
+
+import { useToolState } from '@/components/providers/ToolStateProvider';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { HTTP_STATUS_CATEGORY_OPTIONS } from '@/config/http-status-cheatsheet-config';
+import {
+  filterHttpStatuses,
+  getHttpStatusLineExample,
+  getHttpStatusTroubleshooting,
+  HTTP_STATUS_ENTRIES,
+  type HttpStatusCategoryFilter,
+  type HttpStatusEntry,
+} from '@/libs/http-status-codes';
+import { cn } from '@/libs/utils';
+import { useEffect, useMemo, useState, type KeyboardEvent } from 'react';
+
+interface HttpStatusCheatsheetProps {
+  className?: string;
+  instanceId: string;
+}
+
+export function HttpStatusCheatsheet({ className, instanceId }: HttpStatusCheatsheetProps) {
+  const { toolState, updateToolState } = useToolState('http-status-cheatsheet', instanceId);
+
+  const [searchQuery, setSearchQuery] = useState('');
+  const [category, setCategory] = useState<HttpStatusCategoryFilter>('all');
+  const [detailEntry, setDetailEntry] = useState<HttpStatusEntry | null>(null);
+  const [isHydrated, setIsHydrated] = useState(false);
+
+  useEffect(() => {
+    setIsHydrated(true);
+    if (toolState) {
+      if (toolState.searchQuery !== undefined && toolState.searchQuery !== null) {
+        setSearchQuery(toolState.searchQuery as string);
+      }
+      if (toolState.category) setCategory(toolState.category as HttpStatusCategoryFilter);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (isHydrated) {
+      updateToolState({ searchQuery, category });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchQuery, category, isHydrated]);
+
+  useEffect(() => {
+    if (isHydrated && (!toolState || Object.keys(toolState).length === 0)) {
+      setSearchQuery('');
+      setCategory('all');
+    }
+  }, [toolState, isHydrated]);
+
+  const filtered = useMemo(
+    () => filterHttpStatuses(searchQuery, category),
+    [searchQuery, category]
+  );
+
+  const categoryBadgeClass = (c: HttpStatusCategoryFilter): string => {
+    switch (c) {
+      case '1xx':
+        return 'bg-sky-100 text-sky-900 dark:bg-sky-950/40 dark:text-sky-100';
+      case '2xx':
+        return 'bg-emerald-100 text-emerald-900 dark:bg-emerald-950/40 dark:text-emerald-100';
+      case '3xx':
+        return 'bg-amber-100 text-amber-950 dark:bg-amber-950/35 dark:text-amber-50';
+      case '4xx':
+        return 'bg-orange-100 text-orange-950 dark:bg-orange-950/40 dark:text-orange-50';
+      case '5xx':
+        return 'bg-red-100 text-red-950 dark:bg-red-950/40 dark:text-red-50';
+      default:
+        return 'bg-neutral-100 text-neutral-800 dark:bg-neutral-800 dark:text-neutral-100';
+    }
+  };
+
+  const openDetail = (row: HttpStatusEntry) => setDetailEntry(row);
+
+  const onRowActivate = (row: HttpStatusEntry) => () => openDetail(row);
+
+  const onRowKeyDown =
+    (row: HttpStatusEntry) => (e: KeyboardEvent<HTMLTableRowElement>) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        openDetail(row);
+      }
+    };
+
+  const troubleshootingParagraphs = useMemo(() => {
+    if (!detailEntry) return [];
+    return getHttpStatusTroubleshooting(detailEntry).split('\n\n').filter(Boolean);
+  }, [detailEntry]);
+
+  return (
+    <div className={cn('flex flex-col h-full', className)}>
+      <div className="bg-background px-[28px] pt-[36px] pb-[20px]">
+        <h1 className="text-[32px] font-normal leading-8 tracking-normal text-neutral-900 dark:text-neutral-100 mb-3">
+          HTTP Status Codes
+        </h1>
+        <p className="text-sm leading-5 tracking-normal text-neutral-900 dark:text-neutral-100 max-w-3xl">
+          Searchable cheatsheet for common HTTP response status codes ({HTTP_STATUS_ENTRIES.length}{' '}
+          entries). Filter by status class or search code, phrase, or description.
+        </p>
+      </div>
+
+      <div className="flex-1 flex flex-col bg-background px-[24px] pt-6 pb-10 min-h-0 overflow-hidden">
+        <div className="flex flex-col gap-4 min-h-0 flex-1">
+          <div className="flex flex-col sm:flex-row sm:items-end gap-4 flex-shrink-0">
+            <div className="flex-1 flex flex-col gap-2 min-w-0">
+              <Label htmlFor="http-status-search" className="text-sm font-medium">
+                Search
+              </Label>
+              <Input
+                id="http-status-search"
+                type="search"
+                placeholder="Code, phrase, or description…"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="max-w-xl"
+              />
+            </div>
+            <div className="flex flex-col gap-2 sm:w-[240px]">
+              <Select
+                value={category}
+                onValueChange={(value: HttpStatusCategoryFilter) => setCategory(value)}
+              >
+                <SelectTrigger id="http-status-category" label="Show:" className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {HTTP_STATUS_CATEGORY_OPTIONS.map((opt) => (
+                    <SelectItem key={opt.value} value={opt.value}>
+                      {opt.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          <p className="text-xs text-neutral-600 dark:text-neutral-400 flex-shrink-0">
+            Showing {filtered.length}{' '}
+            {filtered.length === 1 ? 'status code' : 'status codes'}
+            {category !== 'all' ? ` in ${category}` : ''}. Click any row or press Enter or Space while
+            focused for more detail.
+          </p>
+
+          <div className="flex-1 min-h-0 rounded-lg border border-neutral-200 dark:border-neutral-800 overflow-auto">
+            <table className="w-full text-sm text-left border-collapse">
+              <thead className="sticky top-0 z-10 bg-neutral-50 dark:bg-neutral-900/95 backdrop-blur border-b border-neutral-200 dark:border-neutral-800">
+                <tr>
+                  <th scope="col" className="px-4 py-3 font-medium text-neutral-900 dark:text-neutral-100 w-24">
+                    Code
+                  </th>
+                  <th scope="col" className="px-4 py-3 font-medium text-neutral-900 dark:text-neutral-100 w-24">
+                    Class
+                  </th>
+                  <th scope="col" className="px-4 py-3 font-medium text-neutral-900 dark:text-neutral-100 min-w-[180px]">
+                    Name
+                  </th>
+                  <th scope="col" className="px-4 py-3 font-medium text-neutral-900 dark:text-neutral-100">
+                    Description
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {filtered.map((row, index) => (
+                  <tr
+                    key={row.code}
+                    tabIndex={0}
+                    role="button"
+                    onClick={onRowActivate(row)}
+                    onKeyDown={onRowKeyDown(row)}
+                    className={cn(
+                      'cursor-pointer outline-offset-[-2px] transition-colors hover:bg-neutral-100/90 focus-visible:bg-neutral-100 focus-visible:z-10 focus-visible:relative focus-visible:outline-2 focus-visible:outline-neutral-400 dark:hover:bg-neutral-800/70 dark:focus-visible:bg-neutral-800 dark:focus-visible:outline-neutral-500',
+                      'border-b border-neutral-100 dark:border-neutral-800/80',
+                      index % 2 === 0 ? 'bg-background' : 'bg-neutral-50/50 dark:bg-neutral-950/30'
+                    )}
+                    aria-label={`HTTP ${row.code} ${row.name}. Open detailed description`}
+                  >
+                    <td className="px-4 py-2.5 font-mono tabular-nums text-neutral-900 dark:text-neutral-100">
+                      {row.code}
+                    </td>
+                    <td className="px-4 py-2.5">
+                      <span
+                        className={cn(
+                          'inline-flex items-center rounded px-2 py-0.5 text-xs font-medium',
+                          categoryBadgeClass(row.category)
+                        )}
+                      >
+                        {row.category}
+                      </span>
+                    </td>
+                    <td className="px-4 py-2.5 font-medium text-neutral-900 dark:text-neutral-100">
+                      {row.name}
+                    </td>
+                    <td className="px-4 py-2.5 text-neutral-700 dark:text-neutral-300 leading-relaxed">
+                      {row.summary}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+
+            {filtered.length === 0 && (
+              <div className="p-8 text-center text-sm text-neutral-600 dark:text-neutral-400">
+                No status codes match your search. Try a different phrase or reset the class filter.
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <Dialog open={detailEntry !== null} onOpenChange={(open) => !open && setDetailEntry(null)}>
+        <DialogContent className="max-w-xl gap-6">
+          {detailEntry ? (
+            <>
+              <DialogHeader>
+                <div className="flex flex-wrap items-center gap-2 mb-2">
+                  <span
+                    className={cn(
+                      'inline-flex rounded px-2 py-0.5 text-xs font-medium',
+                      categoryBadgeClass(detailEntry.category)
+                    )}
+                  >
+                    {detailEntry.category}
+                  </span>
+                </div>
+                <DialogTitle className="text-xl">
+                  <span className="font-mono tabular-nums text-neutral-500 dark:text-neutral-400 mr-2">
+                    {detailEntry.code}
+                  </span>
+                  {detailEntry.name}
+                </DialogTitle>
+              </DialogHeader>
+              <DialogDescription asChild>
+                <div className="space-y-4 text-left text-neutral-900 dark:text-neutral-100">
+                  <div>
+                    <p className="text-xs uppercase tracking-wide text-neutral-500 dark:text-neutral-400 mb-2">
+                      Example status line
+                    </p>
+                    <pre className="rounded-md bg-neutral-100 dark:bg-neutral-900 px-3 py-2 font-mono text-xs overflow-x-auto text-neutral-800 dark:text-neutral-200 whitespace-pre-wrap break-all">
+                      {getHttpStatusLineExample(detailEntry)}
+                    </pre>
+                  </div>
+                  <div>
+                    <p className="text-xs uppercase tracking-wide text-neutral-500 dark:text-neutral-400 mb-2">
+                      Overview
+                    </p>
+                    <p className="text-sm leading-relaxed text-neutral-700 dark:text-neutral-300">
+                      {detailEntry.summary}
+                    </p>
+                  </div>
+                  <div>
+                    <p className="text-xs uppercase tracking-wide text-neutral-500 dark:text-neutral-400 mb-2">
+                      Typical problems & causes
+                    </p>
+                    <div className="space-y-3 text-sm leading-relaxed text-neutral-700 dark:text-neutral-300">
+                      {troubleshootingParagraphs.map((para, idx) => (
+                        <p key={idx}>{para}</p>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              </DialogDescription>
+
+              <DialogFooter>
+                <DialogClose asChild>
+                  <Button type="button" variant="outline">
+                    Close
+                  </Button>
+                </DialogClose>
+              </DialogFooter>
+            </>
+          ) : null}
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
diff --git a/src/components/tools/TextMinifier.tsx b/src/components/tools/TextMinifier.tsx
new file mode 100644
index 0000000..93dc185
--- /dev/null
+++ b/src/components/tools/TextMinifier.tsx
@@ -0,0 +1,277 @@
+'use client';
+
+import { useToolState } from '@/components/providers/ToolStateProvider';
+import { Button } from '@/components/ui/button';
+import { CodePanel } from '@/components/ui/code-panel';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { LoadFileButton } from '@/components/ui/load-file-button';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
+import {
+  DEFAULT_TEXT_MINIFY_OPTIONS,
+  TEXT_MINIFIER_EXAMPLES,
+  TEXT_MINIFY_MODE_OPTIONS,
+} from '@/config/text-minifier-config';
+import { useCodeEditorTheme } from '@/hooks/useCodeEditorTheme';
+import { minifyText, type TextMinifyOptions, type TextMinifyResult } from '@/libs/text-minifier';
+import { cn } from '@/libs/utils';
+import { ArrowPathIcon, ChevronDownIcon } from '@heroicons/react/24/outline';
+import { useEffect, useState } from 'react';
+
+interface TextMinifierProps {
+  className?: string;
+  instanceId: string;
+}
+
+export function TextMinifier({ className, instanceId }: TextMinifierProps) {
+  const { toolState, updateToolState } = useToolState('text-minifier', instanceId);
+
+  const [options, setOptions] = useState<TextMinifyOptions>(DEFAULT_TEXT_MINIFY_OPTIONS);
+  const [input, setInput] = useState<string>('');
+  const [output, setOutput] = useState<string>('');
+  const [error, setError] = useState<string>('');
+  const [isMinifying, setIsMinifying] = useState(false);
+  const [isHydrated, setIsHydrated] = useState(false);
+  const [stats, setStats] = useState<Omit<TextMinifyResult, 'output'> | null>(null);
+
+  const [theme] = useCodeEditorTheme('basicDark');
+  const [inputWrapText, setInputWrapText] = useState(true);
+  const [outputWrapText, setOutputWrapText] = useState(true);
+
+  useEffect(() => {
+    setIsHydrated(true);
+    if (toolState) {
+      if (toolState.options) setOptions(toolState.options as TextMinifyOptions);
+      if (toolState.input) setInput(toolState.input as string);
+      if (toolState.output) setOutput(toolState.output as string);
+      if (toolState.error) setError(toolState.error as string);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (isHydrated) {
+      updateToolState({
+        options,
+        input,
+        output,
+        error,
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [options, input, output, error, isHydrated]);
+
+  useEffect(() => {
+    if (isHydrated && (!toolState || Object.keys(toolState).length === 0)) {
+      setOptions(DEFAULT_TEXT_MINIFY_OPTIONS);
+      setInput('');
+      setOutput('');
+      setError('');
+      setStats(null);
+    }
+  }, [toolState, isHydrated]);
+
+  const handleMinify = async () => {
+    if (!input.trim()) {
+      setError('Please enter text to minify');
+      return;
+    }
+
+    setIsMinifying(true);
+    setError('');
+
+    try {
+      await new Promise((resolve) => setTimeout(resolve, 150));
+      const result = minifyText(input, options);
+      setOutput(result.output);
+      setStats({
+        originalLength: result.originalLength,
+        outputLength: result.outputLength,
+        originalLineCount: result.originalLineCount,
+        outputLineCount: result.outputLineCount,
+      });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to minify text');
+      setOutput('');
+      setStats(null);
+    } finally {
+      setIsMinifying(false);
+    }
+  };
+
+  const loadExample = (key: keyof typeof TEXT_MINIFIER_EXAMPLES) => {
+    setInput(TEXT_MINIFIER_EXAMPLES[key]);
+    setError('');
+  };
+
+  const perLineMode = options.mode === 'per_line';
+
+  return (
+    <div className={cn('flex flex-col h-full', className)}>
+      <div className="bg-background px-[28px] pt-[36px] pb-[20px]">
+        <h1 className="text-[32px] font-normal leading-6 tracking-normal text-neutral-900 dark:text-neutral-100 mb-3">
+          Text Minifier
+        </h1>
+        <p className="text-sm leading-5 tracking-normal text-neutral-900 dark:text-neutral-100">
+          Collapse extra whitespace in plain text. Use single-line mode for one paragraph, or per-line mode to compact
+          each line while preserving line breaks.
+        </p>
+      </div>
+
+      <div className="flex-1 flex flex-col bg-background px-[24px] pt-6 pb-10 min-h-0 overflow-y-auto">
+        <div className="flex-1 flex flex-col gap-4 min-h-0">
+          <div className="flex flex-col gap-3">
+            <div className="flex items-center gap-3 flex-wrap">
+              <Select
+                value={options.mode}
+                onValueChange={(value: TextMinifyOptions['mode']) =>
+                  setOptions((prev) => ({ ...prev, mode: value }))
+                }
+              >
+                <SelectTrigger label="Mode:" className="min-w-[220px]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {TEXT_MINIFY_MODE_OPTIONS.map((m) => (
+                    <SelectItem key={m.value} value={m.value}>
+                      {m.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+
+              <div className="flex items-center gap-2">
+                <Switch
+                  checked={options.normalizeLineEndings}
+                  onCheckedChange={(checked) =>
+                    setOptions((prev) => ({ ...prev, normalizeLineEndings: checked }))
+                  }
+                  size="sm"
+                  id="text-minify-normalize-eol"
+                />
+                <label
+                  htmlFor="text-minify-normalize-eol"
+                  className="text-sm text-neutral-600 dark:text-neutral-400 cursor-pointer select-none"
+                >
+                  Normalize line endings (CRLF → LF)
+                </label>
+              </div>
+
+              <div className="flex items-center gap-2">
+                <Switch
+                  checked={options.removeEmptyLines}
+                  disabled={!perLineMode}
+                  onCheckedChange={(checked) =>
+                    setOptions((prev) => ({ ...prev, removeEmptyLines: checked }))
+                  }
+                  size="sm"
+                  id="text-minify-remove-empty"
+                />
+                <label
+                  htmlFor="text-minify-remove-empty"
+                  className={cn(
+                    'text-sm select-none',
+                    perLineMode
+                      ? 'text-neutral-600 dark:text-neutral-400 cursor-pointer'
+                      : 'text-neutral-400 dark:text-neutral-600 cursor-not-allowed'
+                  )}
+                >
+                  Remove empty lines
+                </label>
+              </div>
+            </div>
+
+            {stats && (
+              <p className="text-xs text-neutral-600 dark:text-neutral-400">
+                Before: {stats.originalLength.toLocaleString()} characters · {stats.originalLineCount.toLocaleString()}{' '}
+                lines → After: {stats.outputLength.toLocaleString()} characters ·{' '}
+                {stats.outputLineCount.toLocaleString()} lines
+              </p>
+            )}
+          </div>
+
+          <div className="flex-1 grid grid-cols-1 lg:grid-cols-2 gap-4 min-h-0">
+            <CodePanel
+              fillHeight={true}
+              title="Input"
+              value={input}
+              onChange={setInput}
+              language="plaintext"
+              height="500px"
+              theme={theme}
+              wrapText={inputWrapText}
+              onWrapTextChange={setInputWrapText}
+              showCopyButton={false}
+              showClearButton={true}
+              headerActions={
+                <>
+                  <LoadFileButton
+                    accept=".txt,.md,text/plain,*/*"
+                    onFileLoad={(content) => {
+                      setInput(content);
+                      setError('');
+                    }}
+                  />
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button variant="outline" size="sm" className="h-8 px-3 text-xs">
+                        Load examples
+                        <ChevronDownIcon className="h-3 w-3 ml-1" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuItem onClick={() => loadExample('multilineParagraph')}>
+                        Multiline paragraph
+                      </DropdownMenuItem>
+                      <DropdownMenuItem onClick={() => loadExample('indentedBlocks')}>
+                        Indented lines
+                      </DropdownMenuItem>
+                      <DropdownMenuItem onClick={() => loadExample('mixedCrlf')}>
+                        Mixed CRLF / LF
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </>
+              }
+              footerRightContent={
+                <Button
+                  onClick={() => void handleMinify()}
+                  disabled={!input.trim() || isMinifying}
+                  variant="default"
+                  size="sm"
+                  className="h-8 px-4"
+                >
+                  {isMinifying ? (
+                    <>
+                      <ArrowPathIcon className="h-4 w-4 animate-spin mr-2" />
+                      Minifying…
+                    </>
+                  ) : (
+                    'Minify'
+                  )}
+                </Button>
+              }
+            />
+
+            <CodePanel
+              fillHeight={true}
+              title="Output"
+              value={output}
+              language="plaintext"
+              height="500px"
+              theme={theme}
+              wrapText={outputWrapText}
+              onWrapTextChange={setOutputWrapText}
+            />
+          </div>
+
+          {error && (
+            <div className="flex items-center space-x-2 p-4 bg-red-50 dark:bg-red-950/20 border border-red-200 dark:border-red-800 rounded-lg">
+              <div className="text-sm text-red-700 dark:text-red-300">{error}</div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/ui/code-panel.tsx b/src/components/ui/code-panel.tsx
index e7401a4..868a394 100644
--- a/src/components/ui/code-panel.tsx
+++ b/src/components/ui/code-panel.tsx
@@ -10,6 +10,7 @@ import { CodeEditorCore } from '@/components/ui/code-editor-core';
 import { EditorSettingsMenu } from '@/components/ui/editor-settings-menu';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { type CodeEditorTheme } from '@/config/code-editor-themes';
+import { useAppToast } from '@/components/providers/AppToastProvider';
 import { cn } from '@/libs/utils';
 import { Check, Copy, Trash2 } from 'lucide-react';
 import type * as Monaco from 'monaco-editor';
@@ -108,6 +109,8 @@ export function CodePanel({
   fillHeight = false,
   minFillHeight = '160px',
 }: CodePanelProps) {
+  const appToast = useAppToast();
+
   // Detect fill-height mode: the panel is a flex/grid child that should grow and shrink
   // with its container rather than enforce a hard minHeight floor.
   const isFillMode = fillHeight || (className?.split(/\s+/).some(c => c === 'flex-1' || c === 'h-full') ?? false);
@@ -175,6 +178,7 @@ export function CodePanel({
 
       await navigator.clipboard.writeText(textToCopy);
       setCopySuccess(true);
+      appToast?.showToast('Copied to clipboard');
       setTimeout(() => setCopySuccess(false), 2000);
     } catch (err) {
       console.error('Failed to copy:', err);
@@ -370,9 +374,9 @@ export function CodePanel({
                     type="button"
                   >
                     {copySuccess ? (
-                      <Check className="h-4 w-4 text-orange-600" />
+                      <Check className="h-4 w-4 text-orange-600" aria-hidden />
                     ) : (
-                      <Copy className="h-4 w-4 text-neutral-900 dark:text-neutral-300" />
+                      <Copy className="h-4 w-4 text-neutral-900 dark:text-neutral-300" aria-hidden />
                     )}
                   </button>
                 </TooltipTrigger>
diff --git a/src/components/ui/tool-card.tsx b/src/components/ui/tool-card.tsx
index 73e676f..a1f9c5f 100644
--- a/src/components/ui/tool-card.tsx
+++ b/src/components/ui/tool-card.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Laptop, Smartphone } from 'lucide-react';
+import { Laptop, Smartphone, Star } from 'lucide-react';
 import { cn } from '@/libs/utils';
 
 export interface ToolCardProps {
@@ -11,6 +11,11 @@ export interface ToolCardProps {
   supportsMobile?: boolean;
   onClick?: () => void;
   className?: string;
+  /** When set (e.g. after localStorage hydrate), shows a pin control on the card */
+  pinButton?: {
+    pinned: boolean;
+    onToggle: () => void;
+  };
 }
 
 export function ToolCard({
@@ -22,6 +27,7 @@ export function ToolCard({
   supportsMobile = true,
   onClick,
   className,
+  pinButton,
 }: ToolCardProps) {
   const [isHovered, setIsHovered] = React.useState(false);
   const isSelected = isActive || isHovered;
@@ -29,7 +35,8 @@ export function ToolCard({
   return (
     <div
       className={cn(
-        'group bg-white dark:bg-neutral-800 border rounded-xl h-[165px] cursor-pointer transition-all duration-200',
+        'group relative bg-white dark:bg-neutral-800 border rounded-xl h-[165px] cursor-pointer transition-all duration-200',
+        pinButton?.pinned && 'ring-1 ring-orange-400 dark:ring-orange-600',
         isSelected
           ? 'border-orange-600 hover:shadow-md'
           : 'border-neutral-200 dark:border-neutral-700 hover:shadow-md',
@@ -39,6 +46,33 @@ export function ToolCard({
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
+      {pinButton ? (
+        <button
+          type="button"
+          className={cn(
+            'absolute left-1.5 top-1.5 z-20 flex h-8 w-8 items-center justify-center rounded-md border bg-white/95 shadow-sm backdrop-blur-sm transition-colors dark:bg-neutral-900/95',
+            pinButton.pinned
+              ? 'border-orange-300 dark:border-orange-800'
+              : 'border-neutral-200 hover:bg-orange-50 dark:border-neutral-600 dark:hover:bg-orange-950/50'
+          )}
+          aria-label={pinButton.pinned ? `Unpin ${name}` : `Pin ${name}`}
+          aria-pressed={pinButton.pinned}
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            pinButton.onToggle();
+          }}
+        >
+          <Star
+            className={cn(
+              'h-4 w-4 text-neutral-500 dark:text-neutral-400',
+              pinButton.pinned &&
+                'fill-orange-500 text-orange-600 dark:fill-orange-500 dark:text-orange-400'
+            )}
+            strokeWidth={1.5}
+          />
+        </button>
+      ) : null}
       <div className="flex flex-col gap-2 h-[165px] overflow-hidden rounded-[inherit]">
         {/* Icon Section */}
         <div
diff --git a/src/config/headers-cookies-explainer-config.ts b/src/config/headers-cookies-explainer-config.ts
new file mode 100644
index 0000000..c3e4a0f
--- /dev/null
+++ b/src/config/headers-cookies-explainer-config.ts
@@ -0,0 +1,341 @@
+/** Category labels shown as badges alongside glossary entries */
+export type HeaderCookieGlossaryCategory =
+  | 'security'
+  | 'caching'
+  | 'cors'
+  | 'auth'
+  | 'privacy'
+  | 'content'
+  | 'general';
+
+export interface GlossaryEntry {
+  summary: string;
+  detail: string;
+  category: HeaderCookieGlossaryCategory;
+}
+
+/** Lowercase HTTP header names → glossary (lookup with normalizeHeaderNameKey) */
+export const HEADER_NAME_GLOSSARY: Record<string, GlossaryEntry> = {
+  accept: {
+    summary: 'Advertises acceptable response content types.',
+    detail:
+      'The client tells the server which media types it can understand. Servers may use this for content negotiation (e.g. JSON vs HTML).',
+    category: 'content',
+  },
+  'accept-encoding': {
+    summary: 'Advertises acceptable compression codings.',
+    detail:
+      'Common values include gzip, br, deflate. The server chooses one encoder and responds with Content-Encoding.',
+    category: 'content',
+  },
+  'accept-language': {
+    summary: 'Preferred natural languages for the response.',
+    detail:
+      'Used for localization; values are RFC 7231 language ranges with optional quality weights (q=).',
+    category: 'content',
+  },
+  authorization: {
+    summary: 'Credentials for authenticating the client.',
+    detail:
+      'Typically `Bearer <token>`, `Basic <base64>`, or scheme-specific syntax. Sensitive: treat as secret.',
+    category: 'auth',
+  },
+  'cache-control': {
+    summary: 'Directives for caches (browser and intermediaries).',
+    detail:
+      'Controls freshness and revalidation: max-age, no-store, no-cache, private, public, s-maxage, immutable, stale-while-revalidate, etc.',
+    category: 'caching',
+  },
+  connection: {
+    summary: 'Per-hop connection management options.',
+    detail:
+      'HTTP/1.1 uses keep-alive vs close; hop-by-hop headers may be listed. Less relevant for HTTP/2+.',
+    category: 'general',
+  },
+  'content-encoding': {
+    summary: 'How the payload body is compressed or transformed.',
+    detail:
+      'Examples: gzip, br. The recipient decodes before interpreting Content-Type.',
+    category: 'content',
+  },
+  'content-length': {
+    summary: 'Size of the message body in bytes.',
+    detail:
+      'Required for HTTP/1.1 bodies unless chunked transfer-encoding is used. Must match actual body length.',
+    category: 'content',
+  },
+  'content-security-policy': {
+    summary: 'Restricts loads and execution to mitigate XSS.',
+    detail:
+      'Policy directives like default-src, script-src define allowed sources for scripts, styles, frames, etc.',
+    category: 'security',
+  },
+  'content-type': {
+    summary: 'Media type (and charset) of the body.',
+    detail:
+      'Examples: application/json; charset=UTF-8, text/html. Drives how clients parse the response.',
+    category: 'content',
+  },
+  cookie: {
+    summary: 'State sent by the client from prior Set-Cookie responses.',
+    detail:
+      'Semicolon-separated name=value pairs. Sent only to matching origins per cookie rules; still sensitive.',
+    category: 'privacy',
+  },
+  date: {
+    summary: 'When the message was originated.',
+    detail: 'RFC 7231 HTTP-date; used by caches and intermediaries.',
+    category: 'general',
+  },
+  etag: {
+    summary: 'Opaque validator for conditional requests.',
+    detail:
+      'Client sends If-None-Match on repeat requests; server returns 304 if unchanged. Strong vs weak validators differ in semantics.',
+    category: 'caching',
+  },
+  expect: {
+    summary: 'Expectations requiring server acknowledgement.',
+    detail:
+      'Rare in browsers; sometimes `100-continue` for large uploads. Servers may reply 417 Expectation Failed.',
+    category: 'general',
+  },
+  expires: {
+    summary: 'HTTP/1.0-style response expiration time.',
+    detail:
+      'Largely superseded by Cache-Control for HTTP/1.1 caches, but still used for interoperability.',
+    category: 'caching',
+  },
+  host: {
+    summary: 'Target host and optional port.',
+    detail:
+      'Mandatory in HTTP/1.1. Drives routing and effective request URL; critical for shared hosting and HTTPS.',
+    category: 'general',
+  },
+  origin: {
+    summary: 'Originating site for CORS-enabled requests.',
+    detail:
+      'Browser sends scheme + host + port (no path). Servers use it with Access-Control-* for permission checks.',
+    category: 'cors',
+  },
+  pragma: {
+    summary: 'Legacy cache directives.',
+    detail:
+      'HTTP/1.0 `Pragma: no-cache` is not a reliable substitute for Cache-Control no-store/no-cache.',
+    category: 'caching',
+  },
+  referer: {
+    summary: 'URL of the linking document.',
+    detail:
+      'Typo fixed in RFC: Referer header. Privacy-sensitive; stripped or shortened by browsers and Referrer-Policy.',
+    category: 'privacy',
+  },
+  'referrer-policy': {
+    summary: 'Controls Referer granularity on navigations/subresources.',
+    detail:
+      'Values like strict-origin-when-cross-origin limit data leaked in the Referer header.',
+    category: 'privacy',
+  },
+  range: {
+    summary: 'Request partial content.',
+    detail:
+      'Used for resumed downloads or media seeking; pairs with 206 Partial Content.',
+    category: 'content',
+  },
+  'sec-fetch-dest': {
+    summary: 'Fetch metadata: destination.',
+    detail: 'Browser-added hint about how the resource will be used (document, image, iframe, …).',
+    category: 'security',
+  },
+  'sec-fetch-mode': {
+    summary: 'Fetch metadata: request mode.',
+    detail: 'e.g. navigate, cors, no-cors, same-origin. Helps servers differentiate entry types.',
+    category: 'security',
+  },
+  'sec-fetch-site': {
+    summary: 'Fetch metadata: same-site relationship.',
+    detail: 'Cross-site vs same-origin vs none (user navigation). Helps CSRF defenses.',
+    category: 'security',
+  },
+  server: {
+    summary: 'Identifies origin server software.',
+    detail:
+      'Informational; fingerprinting detail—often minimized or standardized in hardened deployments.',
+    category: 'general',
+  },
+  'set-cookie': {
+    summary: 'Instructs client to store a cookie.',
+    detail:
+      'May appear multiple times. Attributes (Path, Domain, Secure, HttpOnly, SameSite) constrain scope and delivery.',
+    category: 'privacy',
+  },
+  'strict-transport-security': {
+    summary: 'Forces HTTPS for a duration (HSTS).',
+    detail:
+      'includeSubDomains and preload tighten policy. Misconfigured max-age can lock users out if TLS breaks.',
+    category: 'security',
+  },
+  'transfer-encoding': {
+    summary: 'How the body is chunked for HTTP/1.1.',
+    detail:
+      'Chunked encoding separates body framing from Content-Length. Hop-by-hop; not duplicated on HTTP/2.',
+    category: 'content',
+  },
+  'user-agent': {
+    summary: 'Client software identifier string.',
+    detail:
+      'Used for telemetry and compatibility hints; spoofable—do not rely on it for authentication.',
+    category: 'general',
+  },
+  vary: {
+    summary: 'Headers that selective responses depend on.',
+    detail:
+      'Caches store separate entries per distinct value set of listed headers—important with compression and language.',
+    category: 'caching',
+  },
+  via: {
+    summary: 'Proxy chain trace.',
+    detail: 'Adds each intermediary; useful debugging but exposes topology.',
+    category: 'general',
+  },
+  'www-authenticate': {
+    summary: 'Challenges clients for credentials (401).',
+    detail:
+      'Contains auth scheme (Basic, Bearer) and realm. Paired with Authorization on subsequent requests.',
+    category: 'auth',
+  },
+  'x-content-type-options': {
+    summary: 'Disables MIME sniffing.',
+    detail:
+      'nosniff helps prevent browsers from interpreting non-script types as executable content.',
+    category: 'security',
+  },
+  'x-forwarded-for': {
+    summary: 'De facto client chain through proxies.',
+    detail:
+      'Appended by proxies; easily forged at the edge if not sanitized—do not trust as sole proof of identity.',
+    category: 'general',
+  },
+  'access-control-allow-origin': {
+    summary: 'CORS allowed origin response.',
+    detail:
+      '`*` vs specific origins; credentials require explicit origin, not wildcard. Browser enforces.',
+    category: 'cors',
+  },
+  'access-control-allow-credentials': {
+    summary: 'Whether credentialed CORS reads are permitted.',
+    detail:
+      'When true, allows cookies/auth on cross-origin reads if other CORS checks pass.',
+    category: 'cors',
+  },
+  'access-control-allow-methods': {
+    summary: 'CORS allowed HTTP methods.',
+    detail: 'Advertised with preflight (OPTIONS); actual method still subject to Same-Origin semantics.',
+    category: 'cors',
+  },
+  'access-control-allow-headers': {
+    summary: 'CORS headers allowed from the client.',
+    detail: 'Used in response to Access-Control-Request-Headers during preflight.',
+    category: 'cors',
+  },
+  forwarded: {
+    summary: 'Standardized proxy-derived request fields.',
+    detail:
+      'Canonical alternative to informal X-Forwarded-*; still must be validated at trusted edges.',
+    category: 'general',
+  },
+  'if-none-match': {
+    summary: 'Conditional GET using ETags.',
+    detail:
+      'If ETag matches, server responds 304 Not Modified without a body.',
+    category: 'caching',
+  },
+  'if-modified-since': {
+    summary: 'Conditional GET using modification time.',
+    detail: 'Older than ETag-based validators; caches and servers combine rules per RFC.',
+    category: 'caching',
+  },
+  'retry-after': {
+    summary: 'How long to wait before retry.',
+    detail: 'Used with 503, 429, or certain redirects; delta-seconds or HTTP-date.',
+    category: 'general',
+  },
+};
+
+/** Lowercase Set-Cookie attribute names */
+export const COOKIE_ATTRIBUTE_GLOSSARY: Record<string, GlossaryEntry> = {
+  domain: {
+    summary: 'Which hosts may receive this cookie.',
+    detail:
+      'Broader domains mean more origins get the cookie. Subdomains obey public suffix rules.',
+    category: 'privacy',
+  },
+  expires: {
+    summary: 'Absolute expiration (legacy attribute).',
+    detail:
+      'HTTP-date format. Prefer Max-Age when both set; interplay is specified in RFC 6265bis.',
+    category: 'privacy',
+  },
+  httponly: {
+    summary: 'Not exposed to JavaScript (document.cookie).',
+    detail:
+      'Mitigates many XSS steal attempts—does not replace server-side sanitization.',
+    category: 'security',
+  },
+  'max-age': {
+    summary: 'Seconds until cookie expiry from now.',
+    detail:
+      'Relative lifetime; clearer than Expires across time zones.',
+    category: 'privacy',
+  },
+  partitioned: {
+    summary: '(CHIPS) Separates embedded third-party jar.',
+    detail:
+      'Keyed per top-level site; limits cross-site tracking while allowing embedded use.',
+    category: 'privacy',
+  },
+  path: {
+    summary: 'URL path prefix where cookie is sent.',
+    detail: 'Default often `/`; narrower paths isolate cookies to subtrees.',
+    category: 'privacy',
+  },
+  priority: {
+    summary: 'Browser eviction hint (experimental).',
+    detail: 'Values like Low, Medium, High—not standardized everywhere.',
+    category: 'general',
+  },
+  samesite: {
+    summary: 'Cross-site inclusion policy.',
+    detail:
+      'Strict, Lax, or None (+ Secure). Controls cross-site navigations/subresources vs defaults.',
+    category: 'security',
+  },
+  secure: {
+    summary: 'Send only over HTTPS.',
+    detail:
+      'Prevents plaintext transport exposure; paired with HTTPS-only deployments.',
+    category: 'security',
+  },
+};
+
+export const HEADERS_COOKIE_EXAMPLES = {
+  headRequest:
+    `GET /dashboard HTTP/1.1\r\n` +
+    `Host: api.example.com\r\n` +
+    `Accept: application/json\r\n` +
+    `Authorization: Bearer eyJhbGciOiJIUzI1NiJ9\r\n` +
+    `Cache-Control: no-cache\r\n` +
+    `User-Agent: DevPockit/1.0\r\n`,
+
+  responseWithSetCookie:
+    `HTTP/1.1 200 OK\r\n` +
+    `Content-Type: application/json\r\n` +
+    `Cache-Control: private, max-age=0\r\n` +
+    `Set-Cookie: session=abc123; Path=/; HttpOnly; Secure; SameSite=Lax\r\n`,
+
+  requestCookies:
+    '_ga=GA1.1.9; sidebar=collapsed; theme=dark',
+
+  setCookiesMultiline:
+    `Set-Cookie: id=u1; Path=/; HttpOnly\r\n` +
+    `Set-Cookie: prefs=compact; Path=/; Secure; SameSite=None\r\n`,
+} as const;
diff --git a/src/config/http-status-cheatsheet-config.ts b/src/config/http-status-cheatsheet-config.ts
new file mode 100644
index 0000000..3903ccc
--- /dev/null
+++ b/src/config/http-status-cheatsheet-config.ts
@@ -0,0 +1,10 @@
+import type { HttpStatusCategoryFilter } from '@/libs/http-status-codes';
+
+export const HTTP_STATUS_CATEGORY_OPTIONS: { value: HttpStatusCategoryFilter; label: string }[] = [
+  { value: 'all', label: 'All classes' },
+  { value: '1xx', label: '1xx Informational' },
+  { value: '2xx', label: '2xx Success' },
+  { value: '3xx', label: '3xx Redirection' },
+  { value: '4xx', label: '4xx Client error' },
+  { value: '5xx', label: '5xx Server error' },
+];
diff --git a/src/config/text-minifier-config.ts b/src/config/text-minifier-config.ts
new file mode 100644
index 0000000..d2138d5
--- /dev/null
+++ b/src/config/text-minifier-config.ts
@@ -0,0 +1,35 @@
+/**
+ * Text minifier tool configuration
+ */
+
+import type { TextMinifyMode, TextMinifyOptions } from '@/libs/text-minifier';
+
+export const TEXT_MINIFY_MODE_OPTIONS = [
+  { value: 'single_line' as const, label: 'Single line', description: 'Collapse all whitespace into single spaces (one paragraph)' },
+  { value: 'per_line' as const, label: 'Per line', description: 'Trim each line and collapse spaces inside lines; keep newlines' },
+] as const;
+
+export const DEFAULT_TEXT_MINIFY_OPTIONS: TextMinifyOptions = {
+  mode: 'single_line',
+  normalizeLineEndings: true,
+  removeEmptyLines: false,
+};
+
+export const TEXT_MINIFIER_EXAMPLES: Record<
+  'multilineParagraph' | 'indentedBlocks' | 'mixedCrlf',
+  string
+> = {
+  multilineParagraph: `The   quick
+
+	brown fox
+
+jumps over  the lazy dog.`,
+
+  indentedBlocks: `
+    Line one with trailing spaces   
+    Line two
+
+       Line three deeply indented`,
+
+  mixedCrlf: 'Same line\r\nNext line\rMac old style\r\nThird',
+};
diff --git a/src/libs/__tests__/headers-cookies-explainer.test.ts b/src/libs/__tests__/headers-cookies-explainer.test.ts
new file mode 100644
index 0000000..060b4fe
--- /dev/null
+++ b/src/libs/__tests__/headers-cookies-explainer.test.ts
@@ -0,0 +1,144 @@
+import {
+  parseHttpHeaderBlock,
+  parseRequestCookiePairs,
+  parseSetCookiePaste,
+  parseSingleSetCookieLine,
+  lookupHeaderGlossary,
+} from '@/libs/headers-cookies-explainer';
+
+describe('parseHttpHeaderBlock', () => {
+  it('parses colon-separated headers', () => {
+    const raw = ['Host: example.com', 'Accept: application/json'].join('\n');
+    const { rows, skippedFirstLine, malformedLines } = parseHttpHeaderBlock(raw);
+    expect(skippedFirstLine).toBeNull();
+    expect(malformedLines).toHaveLength(0);
+    expect(rows).toHaveLength(2);
+    expect(rows[0]).toMatchObject({
+      name: 'Host',
+      value: 'example.com',
+      occurrenceIndex: 1,
+    });
+    expect(rows[1].name).toBe('Accept');
+    expect(rows[1].glossary?.summary).toMatch(/acceptable response content types/i);
+  });
+
+  it('strips a leading GET request line', () => {
+    const raw =
+      `GET /x HTTP/1.1\r\n` + `Host: a.test\r\n` + `Authorization: Bearer x\r\n`;
+    const result = parseHttpHeaderBlock(raw);
+    expect(result.skippedFirstLine).toBe('GET /x HTTP/1.1');
+    expect(result.rows.map((r) => r.name)).toEqual(['Host', 'Authorization']);
+  });
+
+  it('strips a leading HTTP response status line', () => {
+    const raw =
+      `HTTP/1.1 200 OK\r\n` +
+      `Content-Type: application/json\r\n`;
+    const result = parseHttpHeaderBlock(raw);
+    expect(result.skippedFirstLine).toContain('HTTP/1.1 200 OK');
+    expect(result.rows[0]).toMatchObject({ name: 'Content-Type', occurrenceIndex: 1 });
+    expect(result.rows[0].glossary?.category).toBe('content');
+  });
+
+  it('reports malformed lines without colon', () => {
+    const result = parseHttpHeaderBlock('Host: ok\nnot-a-header-line');
+    expect(result.rows).toHaveLength(1);
+    expect(result.malformedLines.length).toBeGreaterThanOrEqual(1);
+  });
+
+  it('supports obsolete folded lines with a warning', () => {
+    const raw = ['Host: ex.com', ' continued-value'].join('\n');
+    const result = parseHttpHeaderBlock(raw);
+    expect(result.warnings.some((w) => /folding/i.test(w))).toBe(true);
+    expect(result.rows[0].value).toContain(' continued-value');
+  });
+
+  it('warns on duplicate uncommon headers', () => {
+    const raw = 'X-Foo: 1\nX-Foo: 2';
+    const { warnings } = parseHttpHeaderBlock(raw);
+    expect(warnings.some((w) => /appears 2 times/i.test(w))).toBe(true);
+  });
+
+  it('does not warn for repeated Set-Cookie', () => {
+    const raw = 'Set-Cookie: a=1\nSet-Cookie: b=2';
+    const { warnings } = parseHttpHeaderBlock(raw);
+    expect(warnings.some((w) => /Set-Cookie.*appears 2/i.test(w))).toBe(false);
+  });
+});
+
+describe('parseRequestCookiePairs', () => {
+  it('parses semicolon-separated name=value pairs', () => {
+    const { pairs, warnings } = parseRequestCookiePairs('sid=abc; lang=en-US');
+    expect(warnings).toHaveLength(0);
+    expect(pairs).toEqual([
+      { name: 'sid', value: 'abc' },
+      { name: 'lang', value: 'en-US' },
+    ]);
+  });
+
+  it('warns on flag segments without equals', () => {
+    const { pairs, warnings } = parseRequestCookiePairs('good=ok; stray');
+    expect(pairs).toHaveLength(1);
+    expect(warnings.some((w) => /stray/i.test(w))).toBe(true);
+  });
+
+  it('handles values containing equals signs', () => {
+    const { pairs } = parseRequestCookiePairs('t=a=b');
+    expect(pairs).toEqual([{ name: 't', value: 'a=b' }]);
+  });
+});
+
+describe('parseSingleSetCookieLine', () => {
+  it('parses attributes and glossary', () => {
+    const parsed = parseSingleSetCookieLine(
+      'Set-Cookie: session=x; Path=/; HttpOnly; Secure; SameSite=Lax'
+    );
+    expect(parsed).not.toBeNull();
+    expect(parsed!.cookieName).toBe('session');
+    expect(parsed!.cookieValue).toBe('x');
+    expect(parsed!.attributes.map((a) => a.name)).toEqual([
+      'path',
+      'httponly',
+      'secure',
+      'samesite',
+    ]);
+    expect(parsed!.attributes.find((a) => a.name === 'samesite')?.glossary?.summary).toMatch(
+      /cross-site/i
+    );
+  });
+
+  it('parses quoted cookie values', () => {
+    const parsed = parseSingleSetCookieLine(`id="a\\\"b"; Path=/`);
+    expect(parsed!.cookieValue).toBe('a"b');
+    expect(parsed!.attributes[0]?.name).toBe('path');
+  });
+});
+
+describe('parseSetCookiePaste', () => {
+  it('parses newline-separated cookies', () => {
+    const { cookies } = parseSetCookiePaste(
+      [`Set-Cookie: a=1; Path=/`, `Set-Cookie: b=two; Secure`].join('\n')
+    );
+    expect(cookies).toHaveLength(2);
+    expect(cookies[1].cookieName).toBe('b');
+    expect(cookies[1].attributes.some((x) => x.name === 'secure')).toBe(true);
+  });
+
+  it('warns on single-line input with commas', () => {
+    const { warnings } = parseSetCookiePaste('a=b; Expires=Wed, 21 Oct 2015 07:28:00 GMT');
+    expect(warnings.some((w) => /comma/i.test(w))).toBe(true);
+  });
+
+  it('reports unparseable lines', () => {
+    const { cookies, warnings } = parseSetCookiePaste('%%%');
+    expect(cookies).toHaveLength(0);
+    expect(warnings.some((w) => /could not parse/i.test(w))).toBe(true);
+  });
+});
+
+describe('lookupHeaderGlossary', () => {
+  it('is case insensitive', () => {
+    expect(lookupHeaderGlossary('HOST')?.summary).toBeTruthy();
+    expect(lookupHeaderGlossary('CACHE-CONTROL')).toBeTruthy();
+  });
+});
diff --git a/src/libs/__tests__/http-status-codes.test.ts b/src/libs/__tests__/http-status-codes.test.ts
new file mode 100644
index 0000000..92fa900
--- /dev/null
+++ b/src/libs/__tests__/http-status-codes.test.ts
@@ -0,0 +1,49 @@
+import {
+  filterHttpStatuses,
+  getHttpStatusDetailedDescription,
+  getHttpStatusLineExample,
+  getHttpStatusTroubleshooting,
+  HTTP_STATUS_ENTRIES,
+  httpStatusProblemsCoversCheatsheet,
+} from '../http-status-codes';
+
+describe('http-status-codes', () => {
+  it('exposes a non-empty static list', () => {
+    expect(HTTP_STATUS_ENTRIES.length).toBeGreaterThan(40);
+  });
+
+  it('filters by code substring', () => {
+    const r = filterHttpStatuses('404', 'all');
+    expect(r.some((e) => e.code === 404)).toBe(true);
+    expect(r.every((e) => e.code.toString().includes('404'))).toBe(true);
+  });
+
+  it('filters by name or summary', () => {
+    const tee = filterHttpStatuses('teapot', 'all');
+    expect(tee.some((e) => e.code === 418)).toBe(true);
+  });
+
+  it('respects category filter', () => {
+    const only2xx = filterHttpStatuses('', '2xx');
+    expect(only2xx.length).toBeGreaterThan(5);
+    expect(only2xx.every((e) => e.category === '2xx')).toBe(true);
+  });
+
+  it('provides extended troubleshooting (no RFC/IANA footer) for dialogs', () => {
+    expect(httpStatusProblemsCoversCheatsheet()).toBe(true);
+
+    const entry = HTTP_STATUS_ENTRIES.find((e) => e.code === 404);
+    expect(entry).toBeDefined();
+    if (!entry) return;
+    expect(getHttpStatusLineExample(entry)).toContain('404');
+    expect(getHttpStatusLineExample(entry)).toContain('Not Found');
+
+    const detail = getHttpStatusDetailedDescription(entry);
+    expect(detail).toContain(entry.summary);
+    expect(detail).not.toMatch(/RFC 9110|IANA HTTP Status Code Registry/i);
+
+    const problems = getHttpStatusTroubleshooting(entry);
+    expect(problems.length).toBeGreaterThan(80);
+    expect(problems.toLowerCase()).toMatch(/route|proxy|deployment/i);
+  });
+});
diff --git a/src/libs/__tests__/text-minifier.test.ts b/src/libs/__tests__/text-minifier.test.ts
new file mode 100644
index 0000000..e41a2ae
--- /dev/null
+++ b/src/libs/__tests__/text-minifier.test.ts
@@ -0,0 +1,89 @@
+import { minifyText, type TextMinifyOptions } from '../text-minifier';
+
+describe('text-minifier', () => {
+  const singleDefaults: TextMinifyOptions = {
+    mode: 'single_line',
+    normalizeLineEndings: true,
+    removeEmptyLines: false,
+  };
+
+  const perLineDefaults: TextMinifyOptions = {
+    mode: 'per_line',
+    normalizeLineEndings: true,
+    removeEmptyLines: false,
+  };
+
+  describe('single_line mode', () => {
+    it('collapses whitespace and trims ends', () => {
+      expect(minifyText('  a \n\t b  ', singleDefaults)).toMatchObject({
+        output: 'a b',
+        outputLineCount: 1,
+      });
+    });
+
+    it('produces one logical line for multiline prose', () => {
+      expect(
+        minifyText('hello   world\ngoodbye', singleDefaults).output
+      ).toBe('hello world goodbye');
+    });
+  });
+
+  describe('per_line mode', () => {
+    it('trims lines and collapses spaces inside lines while preserving line breaks', () => {
+      const r = minifyText('  foo  bar \n baz\t\tqux ', perLineDefaults);
+      expect(r.output).toBe('foo bar\nbaz qux');
+      expect(r.originalLineCount).toBe(2);
+      expect(r.outputLineCount).toBe(2);
+    });
+
+    it('removes blank lines when removeEmptyLines is true', () => {
+      const opts: TextMinifyOptions = {
+        ...perLineDefaults,
+        removeEmptyLines: true,
+      };
+      expect(minifyText('a\n\n\nb', opts).output).toBe('a\nb');
+    });
+
+    it('preserves blank lines when removeEmptyLines is false', () => {
+      expect(minifyText('a\n\nb', perLineDefaults).output).toBe('a\n\nb');
+    });
+  });
+
+  describe('normalizeLineEndings', () => {
+    it('normalizes CRLF and CR to LF before minifying (single_line)', () => {
+      const r = minifyText('x\r\ny', singleDefaults);
+      expect(r.output).toBe('x y');
+      expect(r.originalLineCount).toBe(2);
+    });
+
+    it('leaves CRLF as-is when normalization is disabled', () => {
+      const raw = 'x\r\ny';
+      const r = minifyText(raw, {
+        ...singleDefaults,
+        normalizeLineEndings: false,
+      });
+      expect(r.output).toBe('x y');
+      expect(r.originalLength).toBe(raw.length);
+    });
+  });
+
+  describe('edge cases', () => {
+    it('returns empty output and zero stats for empty string', () => {
+      expect(minifyText('', singleDefaults)).toEqual({
+        output: '',
+        originalLength: 0,
+        outputLength: 0,
+        originalLineCount: 0,
+        outputLineCount: 0,
+      });
+    });
+
+    it('handles whitespace-only input in single_line as empty string', () => {
+      expect(minifyText('  \n\t  ', singleDefaults)).toMatchObject({
+        output: '',
+        outputLength: 0,
+        outputLineCount: 0,
+      });
+    });
+  });
+});
diff --git a/src/libs/__tests__/tool-activity-storage.test.ts b/src/libs/__tests__/tool-activity-storage.test.ts
new file mode 100644
index 0000000..1251397
--- /dev/null
+++ b/src/libs/__tests__/tool-activity-storage.test.ts
@@ -0,0 +1,31 @@
+import {
+  bumpRecentToolIds,
+  togglePinnedToolId,
+} from '@/libs/tool-activity-storage';
+
+describe('tool-activity-storage', () => {
+  describe('bumpRecentToolIds', () => {
+    it('moves tool to front and dedupes', () => {
+      expect(bumpRecentToolIds(['b', 'c', 'a'], 'a')).toEqual(['a', 'b', 'c']);
+    });
+
+    it('caps length', () => {
+      const current = Array.from({ length: 12 }, (_, i) => `t${i}`);
+      const next = bumpRecentToolIds(current, 'new');
+      expect(next).toHaveLength(12);
+      expect(next[0]).toBe('new');
+    });
+  });
+
+  describe('togglePinnedToolId', () => {
+    it('adds and removes pin', () => {
+      expect(togglePinnedToolId([], 'a')).toEqual(['a']);
+      expect(togglePinnedToolId(['a'], 'a')).toEqual([]);
+    });
+
+    it('drops oldest when at max pins', () => {
+      const full = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l'];
+      expect(togglePinnedToolId(full, 'z')).toEqual([...full.slice(1), 'z']);
+    });
+  });
+});
diff --git a/src/libs/headers-cookies-explainer.ts b/src/libs/headers-cookies-explainer.ts
new file mode 100644
index 0000000..48e1b90
--- /dev/null
+++ b/src/libs/headers-cookies-explainer.ts
@@ -0,0 +1,294 @@
+import {
+  COOKIE_ATTRIBUTE_GLOSSARY,
+  HEADER_NAME_GLOSSARY,
+  type GlossaryEntry,
+} from '@/config/headers-cookies-explainer-config';
+
+export type CookieExplainerTab = 'request' | 'set-cookie';
+
+export interface ParsedHeaderRow {
+  name: string;
+  value: string;
+  glossary?: GlossaryEntry;
+  occurrenceIndex: number;
+}
+
+export interface ParseHeadersResult {
+  rows: ParsedHeaderRow[];
+  skippedFirstLine: string | null;
+  warnings: string[];
+  malformedLines: { lineNumber: number; content: string }[];
+}
+
+export interface ParsedRequestCookiePair {
+  name: string;
+  value: string;
+  glossary?: GlossaryEntry;
+}
+
+export interface ParsedSetCookieCookie {
+  cookieName: string;
+  cookieValue: string;
+  attributes: Array<{ name: string; value: string; glossary?: GlossaryEntry }>;
+}
+
+export interface ParseRequestCookiesResult {
+  pairs: ParsedRequestCookiePair[];
+  warnings: string[];
+}
+
+export interface ParseSetCookiesResult {
+  cookies: ParsedSetCookieCookie[];
+  warnings: string[];
+}
+
+const HTTP_FIRST_LINE_REGEX = /^(?:[A-Za-z]+ \S+ HTTP\/\d(?:\.\d)?|HTTP\/\d(?:\.\d)? \d{3}|HTTP\/\d(?:\.\d)? [A-Za-z0-9 .-]*)$/;
+
+function normalizeHeaderLookupKey(raw: string): string {
+  return raw.trim().toLowerCase().replace(/^:/, '');
+}
+
+function normalizeCookieAttrKey(attr: string): string {
+  return attr.trim().toLowerCase().replace(/^:/, '').replace(/^maxage$/i, 'max-age');
+}
+
+export function lookupHeaderGlossary(name: string): GlossaryEntry | undefined {
+  return HEADER_NAME_GLOSSARY[normalizeHeaderLookupKey(name)];
+}
+
+export function lookupCookieAttributeGlossary(name: string): GlossaryEntry | undefined {
+  return COOKIE_ATTRIBUTE_GLOSSARY[normalizeCookieAttrKey(name)];
+}
+
+/**
+ * Parses a block of colon-separated HTTP header lines.
+ * Strips a leading HTTP request or status line if present.
+ */
+export function parseHttpHeaderBlock(rawInput: string): ParseHeadersResult {
+  const warnings: string[] = [];
+  const malformedLines: { lineNumber: number; content: string }[] = [];
+  const text = rawInput.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+  let lines = text.split('\n');
+
+  let skippedFirstLine: string | null = null;
+  if (lines.length > 0 && lines[0].trim()) {
+    const first = lines[0].trim();
+    if (HTTP_FIRST_LINE_REGEX.test(first)) {
+      skippedFirstLine = lines[0];
+      lines = lines.slice(1);
+    }
+  }
+
+  const unfolded: string[] = [];
+  for (const rawLine of lines) {
+    const line = rawLine;
+    const isObsoleteFold = (/^[ \t]/).test(line) && unfolded.length > 0;
+    if (isObsoleteFold) {
+      warnings.push(
+        'At least one line uses obsolete header folding (leading space/tab). Combined with previous line.'
+      );
+      unfolded[unfolded.length - 1] += ` ${line.trimStart()}`;
+    } else {
+      unfolded.push(line);
+    }
+  }
+
+  const rows: Omit<ParsedHeaderRow, 'occurrenceIndex'>[] = [];
+
+  unfolded.forEach((line, idx) => {
+    const num = skippedFirstLine ? idx + 2 : idx + 1;
+    const trimmed = line.trim();
+    if (trimmed === '') return;
+
+    const colonIdx = trimmed.indexOf(':');
+    if (colonIdx <= 0) {
+      malformedLines.push({ lineNumber: num, content: trimmed });
+      return;
+    }
+
+    const name = trimmed.slice(0, colonIdx).trim();
+    const value = trimmed.slice(colonIdx + 1).trim();
+    if (!name) {
+      malformedLines.push({ lineNumber: num, content: trimmed });
+      return;
+    }
+
+    rows.push({
+      name,
+      value,
+      glossary: lookupHeaderGlossary(name),
+    });
+  });
+
+  const nameCounts = new Map<string, number>();
+  const withIndex: ParsedHeaderRow[] = rows.map((r) => {
+    const key = normalizeHeaderLookupKey(r.name);
+    const next = (nameCounts.get(key) ?? 0) + 1;
+    nameCounts.set(key, next);
+    return { ...r, occurrenceIndex: next };
+  });
+
+  const occurrenceByKey = withIndex.reduce<Record<string, number>>((acc, r) => {
+    const key = normalizeHeaderLookupKey(r.name);
+    acc[key] = (acc[key] ?? 0) + 1;
+    return acc;
+  }, {});
+
+  const knownMultiAllowed = ['set-cookie', 'vary', 'warning', 'via'];
+  for (const [k, count] of Object.entries(occurrenceByKey)) {
+    if (count > 1 && !knownMultiAllowed.includes(k)) {
+      warnings.push(
+        `Header "${withIndex.find((x) => normalizeHeaderLookupKey(x.name) === k)?.name}" appears ${count} times; semantics depend on header.`
+      );
+    }
+  }
+
+  return { rows: withIndex, skippedFirstLine, warnings, malformedLines };
+}
+
+/** Splits Cookie request header pair string (without "Cookie:" prefix). */
+export function parseRequestCookiePairs(rawInput: string): ParseRequestCookiesResult {
+  const warnings: string[] = [];
+  const text = rawInput.trim();
+  if (!text) {
+    return { pairs: [], warnings: [] };
+  }
+
+  const segments = text.split(';').map((s) => s.trim()).filter(Boolean);
+  const pairs: ParsedRequestCookiePair[] = [];
+
+  for (const seg of segments) {
+    const eq = seg.indexOf('=');
+    if (eq <= 0) {
+      warnings.push(`Segment "${seg}" looks like a flag without = or is malformed; skipping.`);
+      continue;
+    }
+    const name = seg.slice(0, eq).trim();
+    const value = seg.slice(eq + 1).trim();
+    if (!name) {
+      warnings.push('Skipped an empty cookie name.');
+      continue;
+    }
+    pairs.push({ name, value });
+  }
+
+  return { pairs, warnings };
+}
+
+/**
+ * RFC 6265-style parse of one Set-Cookie line (cookie-name=cookie-value; attr=val; ...)
+ */
+export function parseSingleSetCookieLine(line: string): ParsedSetCookieCookie | null {
+  const trimmed = line.replace(/^\s*set-cookie:\s*/i, '').trim();
+  if (!trimmed) return null;
+
+  const eqIdx = trimmed.indexOf('=');
+  if (eqIdx <= 0) return null;
+
+  const cookieName = trimmed.slice(0, eqIdx).trim();
+  if (!cookieName) return null;
+
+  let remainder = trimmed.slice(eqIdx + 1);
+  let cookieValue = '';
+
+  if (remainder.startsWith('"')) {
+    let i = 1;
+    let out = '';
+    while (i < remainder.length) {
+      const ch = remainder[i];
+      if (ch === '\\' && i + 1 < remainder.length) {
+        out += remainder[i + 1];
+        i += 2;
+        continue;
+      }
+      if (ch === '"') {
+        i++;
+        break;
+      }
+      out += ch;
+      i++;
+    }
+    cookieValue = out;
+    remainder = remainder.slice(i).trimStart();
+    if (remainder.startsWith(';')) remainder = remainder.slice(1).trimStart();
+  } else {
+    const semi = remainder.indexOf(';');
+    if (semi === -1) {
+      cookieValue = remainder.trim();
+      remainder = '';
+    } else {
+      cookieValue = remainder.slice(0, semi).trim();
+      remainder = remainder.slice(semi + 1).trimStart();
+    }
+  }
+
+  const attributes: Array<{ name: string; value: string; glossary?: GlossaryEntry }> = [];
+  for (const part of remainder.split(';')) {
+    const p = part.trim();
+    if (!p) continue;
+    const ae = p.indexOf('=');
+    if (ae === -1) {
+      const cn = normalizeCookieAttrKey(p);
+      attributes.push({
+        name: cn,
+        value: '',
+        glossary: lookupCookieAttributeGlossary(cn),
+      });
+    } else {
+      const an = normalizeCookieAttrKey(p.slice(0, ae).trim());
+      const av = p.slice(ae + 1).trim();
+      attributes.push({
+        name: an,
+        value: av,
+        glossary: lookupCookieAttributeGlossary(an),
+      });
+    }
+  }
+
+  return { cookieName, cookieValue, attributes };
+}
+
+/**
+ * Parses newline-separated Set-Cookie lines (optionally prefixed with Set-Cookie:).
+ * Warns when a single line might contain comma-separated concatenation (ambiguous with Expires dates).
+ */
+export function parseSetCookiePaste(rawInput: string): ParseSetCookiesResult {
+  const warnings: string[] = [];
+  const normalized = rawInput.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+
+  const lines = normalized
+    .split('\n')
+    .map((l) => l.trim())
+    .filter((l) => l.length > 0);
+
+  const joinedForScan = normalized.replace(/\s+/g, ' ');
+  const looksLikeExpiryComma = /\bexpires\s*=/i.test(joinedForScan) &&
+    /\b(wed|thu|fri|sat|sun|mon|tue|jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)\b/i.test(joinedForScan);
+
+  if (!normalized.includes('\n') && normalized.includes(',')) {
+    warnings.push(
+      'Single-line input contains commas; Expires dates also contain commas, so concatenated Set-Cookie lines can be ambiguous. Prefer pasting newline-separated Set-Cookie lines from DevTools.'
+    );
+  }
+
+  const cookies: ParsedSetCookieCookie[] = [];
+
+  for (const rawLine of lines) {
+    const parsed = parseSingleSetCookieLine(rawLine);
+    if (parsed) {
+      cookies.push(parsed);
+    } else {
+      warnings.push(
+        `Could not parse cookie line: ${rawLine.slice(0, 80)}${rawLine.length > 80 ? '…' : ''}`
+      );
+    }
+  }
+
+  if (looksLikeExpiryComma && cookies.length <= 1 && cookies[0]?.attributes.some((a) => a.name === 'expires')) {
+    warnings.push(
+      'If multiple Set-Cookies were merged on one line, attributes may look wrong—use newline-separated lines.'
+    );
+  }
+
+  return { cookies, warnings };
+}
diff --git a/src/libs/http-status-codes.ts b/src/libs/http-status-codes.ts
new file mode 100644
index 0000000..71f4f1d
--- /dev/null
+++ b/src/libs/http-status-codes.ts
@@ -0,0 +1,272 @@
+export type HttpStatusCategory = '1xx' | '2xx' | '3xx' | '4xx' | '5xx';
+
+export interface HttpStatusEntry {
+  code: number;
+  /** Official or common reason phrase */
+  name: string;
+  summary: string;
+  category: HttpStatusCategory;
+}
+
+/**
+ * Common HTTP status codes with short descriptions for the cheatsheet table.
+ */
+export const HTTP_STATUS_ENTRIES: HttpStatusEntry[] = [
+  { code: 100, name: 'Continue', summary: 'Client should continue with the request.', category: '1xx' },
+  { code: 101, name: 'Switching Protocols', summary: 'Server is switching protocols per Upgrade header.', category: '1xx' },
+  { code: 102, name: 'Processing', summary: 'Request received; WebDAV; server is processing.', category: '1xx' },
+  { code: 103, name: 'Early Hints', summary: 'HMR-preload hints while the final response is prepared.', category: '1xx' },
+
+  { code: 200, name: 'OK', summary: 'Request succeeded.', category: '2xx' },
+  { code: 201, name: 'Created', summary: 'Resource created; often returns Location.', category: '2xx' },
+  { code: 202, name: 'Accepted', summary: 'Accepted for processing; processing not complete.', category: '2xx' },
+  {
+    code: 203,
+    name: 'Non-Authoritative Information',
+    summary: 'Success; payload from a transforming proxy.',
+    category: '2xx',
+  },
+  { code: 204, name: 'No Content', summary: 'Success with no payload body.', category: '2xx' },
+  { code: 205, name: 'Reset Content', summary: 'Success; client should reset document UI.', category: '2xx' },
+  { code: 206, name: 'Partial Content', summary: 'Range request fulfilled with partial representation.', category: '2xx' },
+  { code: 207, name: 'Multi-Status', summary: 'WebDAV; multiple distinct status codes in body.', category: '2xx' },
+  { code: 208, name: 'Already Reported', summary: 'WebDAV; avoids repeating members inside a propstat.', category: '2xx' },
+  { code: 226, name: 'IM Used', summary: 'Instance manipulation applied inside response.', category: '2xx' },
+
+  { code: 300, name: 'Multiple Choices', summary: 'Several representations; Link header may guide choice.', category: '3xx' },
+  { code: 301, name: 'Moved Permanently', summary: 'Target URI permanently changed.', category: '3xx' },
+  { code: 302, name: 'Found', summary: 'Temporary redirect (historically “Moved Temporarily”).', category: '3xx' },
+  { code: 303, name: 'See Other', summary: 'GET the resource at another URI.', category: '3xx' },
+  { code: 304, name: 'Not Modified', summary: 'Cached representation still valid.', category: '3xx' },
+  { code: 305, name: 'Use Proxy', summary: 'Deprecated in HTTP/1.1; deprecated proxy redirection.', category: '3xx' },
+  { code: 307, name: 'Temporary Redirect', summary: 'Same method and body on the redirected URI.', category: '3xx' },
+  { code: 308, name: 'Permanent Redirect', summary: 'Permanent redirect preserving method and body.', category: '3xx' },
+
+  { code: 400, name: 'Bad Request', summary: 'Malformed syntax or validation failure.', category: '4xx' },
+  { code: 401, name: 'Unauthorized', summary: 'Authentication required (WWW-Authenticate).', category: '4xx' },
+  { code: 402, name: 'Payment Required', summary: 'Reserved for future payment schemes.', category: '4xx' },
+  { code: 403, name: 'Forbidden', summary: 'Understood request but refusal to authorize.', category: '4xx' },
+  { code: 404, name: 'Not Found', summary: 'No matching resource.', category: '4xx' },
+  { code: 405, name: 'Method Not Allowed', summary: 'Method not supported for resource.', category: '4xx' },
+  { code: 406, name: 'Not Acceptable', summary: 'No representation matches Accept negotiation.', category: '4xx' },
+  { code: 407, name: 'Proxy Authentication Required', summary: 'Proxy demands authentication.', category: '4xx' },
+  { code: 408, name: 'Request Timeout', summary: 'Server waited too long for a complete request.', category: '4xx' },
+  { code: 409, name: 'Conflict', summary: 'Conflict with current resource state.', category: '4xx' },
+  { code: 410, name: 'Gone', summary: 'Resource once existed and is intentionally gone.', category: '4xx' },
+  { code: 411, name: 'Length Required', summary: 'Content-Length or Transfer-Encoding needed.', category: '4xx' },
+  { code: 412, name: 'Precondition Failed', summary: 'Precondition headers failed on evaluation.', category: '4xx' },
+  { code: 413, name: 'Payload Too Large', summary: 'Request body exceeds server limits.', category: '4xx' },
+  { code: 414, name: 'URI Too Long', summary: 'Request target URI exceeds limits.', category: '4xx' },
+  { code: 415, name: 'Unsupported Media Type', summary: 'Format not supported by server.', category: '4xx' },
+  { code: 416, name: 'Range Not Satisfiable', summary: 'Range header cannot be fulfilled.', category: '4xx' },
+  { code: 417, name: 'Expectation Failed', summary: 'Expect header condition could not be met.', category: '4xx' },
+  { code: 418, name: "I'm a teapot", summary: 'Easter egg (RFC 2324); not a serious protocol code.', category: '4xx' },
+  { code: 421, name: 'Misdirected Request', summary: 'Request not intended for this origin/server.', category: '4xx' },
+  { code: 422, name: 'Unprocessable Entity', summary: 'Semantic errors; common in APIs for validation.', category: '4xx' },
+  { code: 423, name: 'Locked', summary: 'WebDAV; resource is locked.', category: '4xx' },
+  { code: 424, name: 'Failed Dependency', summary: 'WebDAV; action failed due to another failed request.', category: '4xx' },
+  { code: 425, name: 'Too Early', summary: 'Replay risk; early data rejected.', category: '4xx' },
+  { code: 426, name: 'Upgrade Required', summary: 'Switch required protocol (Upgrade header).', category: '4xx' },
+  { code: 428, name: 'Precondition Required', summary: 'Conditional headers required to avoid conflicts.', category: '4xx' },
+  { code: 429, name: 'Too Many Requests', summary: 'Rate limiting; Retry-After may be present.', category: '4xx' },
+  { code: 431, name: 'Request Header Fields Too Large', summary: 'Headers overall too large or single field too big.', category: '4xx' },
+  {
+    code: 451,
+    name: 'Unavailable For Legal Reasons',
+    summary: 'Blocked for legal or censorship reasons.',
+    category: '4xx',
+  },
+
+  { code: 500, name: 'Internal Server Error', summary: 'Unexpected server condition.', category: '5xx' },
+  { code: 501, name: 'Not Implemented', summary: 'Server does not support the functionality.', category: '5xx' },
+  { code: 502, name: 'Bad Gateway', summary: 'Invalid response from upstream gateway.', category: '5xx' },
+  { code: 503, name: 'Service Unavailable', summary: 'Temporary overload or maintenance.', category: '5xx' },
+  { code: 504, name: 'Gateway Timeout', summary: 'Upstream did not respond in time.', category: '5xx' },
+  { code: 505, name: 'HTTP Version Not Supported', summary: 'HTTP version not supported.', category: '5xx' },
+  { code: 506, name: 'Variant Also Negotiates', summary: 'Transparent negotiation misconfiguration.', category: '5xx' },
+  { code: 507, name: 'Insufficient Storage', summary: 'WebDAV; cannot store representation.', category: '5xx' },
+  { code: 508, name: 'Loop Detected', summary: 'WebDAV; infinite loop in processing.', category: '5xx' },
+  { code: 510, name: 'Not Extended', summary: 'Further extensions required for request.', category: '5xx' },
+  {
+    code: 511,
+    name: 'Network Authentication Required',
+    summary: 'Client must authenticate to gain network access.',
+    category: '5xx',
+  },
+];
+
+export type HttpStatusCategoryFilter = HttpStatusCategory | 'all';
+
+/**
+ * Typical pitfalls, misunderstandings, and debugging angles for modal detail (not normative specs).
+ */
+const COMMON_PROBLEMS_AND_CAUSES: Record<number, string> = {
+  100:
+    'Often tied to Expect: 100-continue uploads. Typical issues: proxies or gateways swallowing intermediates, clients that never resume after Continue, duplicated Expect headers, or servers that mishandle chunked bodies.',
+  101:
+    'Common with WebSockets or negotiated upgrades. Typical causes: missing or mismatched Upgrade/Connection headers, TLS termination changing the handshake path, proxies blocking Upgrade, ALPN negotiated HTTP/2 when the client expects HTTP/1 upgrade, or websocket origin checks failing.',
+  102:
+    'WebDAV/long requests. Typical issues: callers timing out assuming hung requests, proxies closing idle intermediates before the real response completes, poor progress reporting in clients.',
+  103:
+    'Early Hints and preload pushes. Typical problems: duplicate resource loading when hints and HTML both declare scripts, CSP blocking hinted URLs, clients or CDNs that ignore 103 entirely, mismatched preload priorities.',
+  200:
+    'Usually success. Debugging pain when clients expect 201 after POST, when APIs return bodies that violate schemas, stale cache headers masking fresh data, or success returned for partial/failed workflows.',
+  201:
+    'Created resources. Typical issues: missing Location (clients cannot discover URIs), double-submit creating duplicates without idempotency keys, transactional rollbacks returning 201 without cleanup, mismatched slug vs canonical URL.',
+  202:
+    'Async workflows. Typical problems: polling storms, nowhere to correlate job IDs, abandoned jobs appearing “accepted” forever, clients treating 202 like 200 without checking status URLs.',
+  203:
+    'Transformed payload from a proxy. Typical confusion: validators and ETags from the intermediary not matching the origin; caches treating merged content incorrectly; CDN minification stripping fields clients rely on.',
+  204:
+    'No body successes. Typical client bugs: parsers requiring JSON on success, XMLHttpRequest/onload handlers crashing on empty body, Axios interceptors misclassifying legitimate empty deletes.',
+  205:
+    'Rare in APIs. Typical issues: misunderstanding as “reload page” when only document view should reset; clients refetch losing SPA state unnecessarily.',
+  206:
+    'Partial content downloads. Typical problems: mismatched Range units, requesting ranges past Content-Length, media players looping on overlapping ranges, cache corruption combining partial shards.',
+  207:
+    'WebDAV multi-status. Typical pain: callers reading only outer HTTP status and ignoring per-member failures in XML/JSON bodies, inconsistent rollback after partial DAV success.',
+  208:
+    'WebDAV “already reported” to shrink responses. Debugging difficulty when clients omit duplicate bindings and become out of sync with server propstat aggregates.',
+  226:
+    'Instance manipulations deltas. Typical issues: patching wrong base representation, mishandling IM headers so deltas apply to stale content, intermediary stripping IM metadata.',
+  300:
+    'Multiple representations. Typical issues: ambiguous default without Link rel=alternate, bots choosing wrong MIME type, caches storing the wrong negotiated variant.',
+  301:
+    'Permanent redirects. Typical problems: typo’d target URI baked into SEO forever, clients not updating bookmarks despite 301, mixed HTTP→HTTPS redirects creating redirect loops.',
+  302:
+    'Temporary redirect historically abused. Typical bugs: caches treating temporary like permanent, POST turning into unintended GET on legacy stacks, intermediaries rewriting Location.',
+  303:
+    'See Other GET follows. Typical issues: AJAX losing POST semantics after POST+303, forgetting to rebuild query parameters on subsequent GET.',
+  304:
+    'Not modified caching. Debugging traps: validators never changing so clients stay stale forever, clock skew breaking If-Modified-Since, CDN ignoring Vary breaking negotiation.',
+  305:
+    'Deprecated directive. Encountering this usually signals legacy infra or captive misconfiguration behind old proxies—not something to emulate in modern apps.',
+  307:
+    'Temporary redirect with method preservation. Typical problems: middleware auto-following redirects and duplicating POST bodies, OAuth redirects breaking when method flips unintentionally.',
+  308:
+    'Permanent redirect with method preservation. Similar to 307 but caches update longer—wrong destination poisons crawling and API clients similarly to broken 301 chains.',
+  400:
+    'Bad request framing or validation. Usual suspects: malformed JSON/XML, mismatched Content-Type charset, duplicated fields, proxies corrupting chunked encoding, max header count limits exceeded in reverse proxies.',
+  401:
+    'Authentication required vs authorization. Typical mix-ups with 403 when tokens are stale or scopes wrong—missing/expired Bearer vs truly blocked users. Omitting WWW-Authenticate confuses frameworks and proxies.',
+  402:
+    'Reserved and rarely standardized. Seeing it usually means bespoke billing flows or placeholder APIs—integrations break when expectations drift without documentation.',
+  403:
+    'Forbidden after identity may be known. Typical causes: IP/geo allowlists, missing RBAC role, filesystem permissions in static hosts, accidentally blocking bots that your SSR depends on.',
+  404:
+    'No route or missing resource—also returned intentionally to obscure existence of private resources. Usual suspects: typo paths, SPA servers not configured with fallback routing, ingress path prefixes stripped wrong, stale deployment without the new routes.',
+  405:
+    'Method unsupported. Frequently misconfigured OPTIONS for CORS, disabled PATCH/DELETE in reverse proxies, or APIs returning 405 without Allow header so tooling cannot heal itself.',
+  406:
+    'Content negotiation unhappy. Typical issues: unrealistic Accept:*/* assumptions, serializers missing for requested MIME, GraphQL gateways expecting JSON.',
+  407:
+    'Proxy authentication. Common in captive corporate networks—the app works direct but breaks behind PAC with missing Proxy-Authorization on clients not configured.',
+  408:
+    'Server gave up waiting. Often slow mobile uploads or half-open HTTP/2 streams; alternatively aggressive load balancer timeouts while app still computes.',
+  409:
+    'State conflict—optimistic concurrency failures, uniqueness violations, simultaneous edits hitting the same aggregate, workflow states that disallow the transition.',
+  410:
+    'Intentionally removed. Helps audit trails vs 404. Problems when CDNs incorrectly cache “gone”, or caches never forget when content returns under a reuse policy.',
+  411:
+    'Length required—some origins reject chunked bodies without explicit sizing. Debugging reverse proxies rewriting Transfer-Encoding inconsistently.',
+  412:
+    'Preconditions failed—If-Match/If-Unmodified-Since losing races during frequent updates, retries duplicating conflicting writes if not idempotent.',
+  413:
+    'Payload too large. Often nginx client_max_body_size, API gateway quotas, multipart parser limits far below user expectation for media uploads.',
+  414:
+    'URI oversize—GET query strings exploding from filters, misplaced auth tokens in URLs, SSRF gateways limiting path lengths.',
+  415:
+    'Unsupported Media Type—sending multipart when API expects JSON, missing charset, multipart boundary mismatch, PATCH with wrong subtype.',
+  416:
+    'Range nonsense—byte ranges exceeding file sizes, mismatched Accept-Ranges semantics, CDN edge missing full object.',
+  417:
+    'Expect header mishandling—often intermediaries rewriting Expect: 100-continue or forbidding chunked trailers.',
+  418:
+    'Not meaningful for diagnostics—almost always novelty. If unexpected, hunt for buggy middleware injecting RFC 2324 jokes rather than infra failure.',
+  421:
+    'Misdirected request—HTTP/2 routing issues: TLS SNI not matching `:authority`, multiplexed connections routed to wrong vhost behind shared IPs.',
+  422:
+    'Semantic validation failures with syntactically valid JSON—schema mismatch, regex field errors, inconsistent cross-field constraints. Frontend/backend contract drift.',
+  423:
+    'WebDAV locking—exclusive locks left behind after crashed editors, timeouts not releasing leases, collaborative tooling deadlocks.',
+  424:
+    'Failed dependency chaining—compound WebDAV failures where diagnosing root cause buried under dependent operation errors.',
+  425:
+    'Too Early—replay-related rejection of 0‑RTT or early handshake data until TLS/session replays ruled out.',
+  426:
+    'Upgrade required—old cleartext or HTTP versions blocked; clients must retry with TLS/WebSocket handshake after inspecting Upgrade guidance.',
+  428:
+    'Precondition Required—lost race protection forcing If-Match/If-Unmodified headers; concurrency bugs if clients ignore mandated preconditions.',
+  429:
+    'Rate limiting. Common failure modes: retry storms multiplying load, scraping without exponential backoff, shared egress IP tripping quotas for many users.',
+  431:
+    'Header fields oversized—cookies bloated with SSO claims, gigantic Authorization tokens, proxies aggregating duplicated headers hitting limits.',
+  451:
+    'Legal/policy blocks geographies or jurisdictions—tests pass locally then fail overseas; misunderstanding compliance vs censorship vs DNS mistakes.',
+  500:
+    'Unhandled exceptions, corrupted configuration, datastore outages, deadlock threads, mismatched deployments (schema vs code). Always inspect server-side stack traces/logs—never masked by generic mobile error UI.',
+  501:
+    'Feature/method deliberately absent—calling DELETE on read-only gateways, OPTIONS blocked, HTTP/3 disabled while client upgrades.',
+  502:
+    'Bad gateway upstream. Classic causes: pod crash loops, RDS connection exhaustion, stale DNS to dead nodes, TLS handshake mismatches between proxy and upstream, chunked encoding breakage through HAProxy/nginx.',
+  503:
+    'Service unavailable/overloaded/draining instances. Troubleshoot readiness probes flipping, autoscaling delays, noisy neighbors saturating CPUs, deliberate maintenance windows forgetting Retry-After.',
+  504:
+    'Gateway timeouts—cold starts, synchronous chains waiting on queues, oversized SQL, missing timeouts causing threads to stall until proxy kills them.',
+  505:
+    'HTTP version refusal—clients forcing incorrect protocol after ALPN downgrade, plaintext HTTP spoken to HTTPS-only backends.',
+  506:
+    'Variant negotiation loop—opaque server configuration errors in negotiation modules; exceedingly rare.',
+  507:
+    'Insufficient storage—NAS volumes full on WebDAV, mailboxes quotas, multipart temp disk exhaustion.',
+  508:
+    'Loop detected deep in DAV trees—collections referencing themselves recursively; miswired reverse proxies chaining infinite internal forwards.',
+  510:
+    'Feature extension missing—not implemented policy—clients must supply required protocol extensions or drop optional features.',
+  511:
+    'Network authentication or captive portals—Wi-Fi hotspots intercepting HTTPS with login pages mirrored as 511 in some setups; captive portal probes confused with API failures.',
+};
+
+/** Returns true when every cheatsheet row has troubleshooting copy (guard for drift). */
+export function httpStatusProblemsCoversCheatsheet(): boolean {
+  return HTTP_STATUS_ENTRIES.every((e) =>
+    Object.prototype.hasOwnProperty.call(COMMON_PROBLEMS_AND_CAUSES, e.code)
+  );
+}
+
+/** Returns troubleshooting copy for modal (typical pitfalls and debugging cues). */
+export function getHttpStatusTroubleshooting(entry: HttpStatusEntry): string {
+  const problems = COMMON_PROBLEMS_AND_CAUSES[entry.code];
+  if (problems === undefined) {
+    return `No extended troubleshooting blurb configured for HTTP ${entry.code}.`;
+  }
+  return problems;
+}
+
+/**
+ * Concatenates cheatsheet summary and troubleshooting prose (same order as modal sections).
+ */
+export function getHttpStatusDetailedDescription(entry: HttpStatusEntry): string {
+  return `${entry.summary}\n\n${getHttpStatusTroubleshooting(entry)}`;
+}
+
+/** Canonical-looking status line (teaching/example only; HTTP version differs on the wire). */
+export function getHttpStatusLineExample(entry: HttpStatusEntry): string {
+  return `HTTP/1.1 ${entry.code} ${entry.name}`;
+}
+
+/**
+ * Filter status entries by optional category and free-text query (code, name, summary).
+ */
+export function filterHttpStatuses(
+  query: string,
+  category: HttpStatusCategoryFilter
+): HttpStatusEntry[] {
+  const q = query.trim().toLowerCase();
+  return HTTP_STATUS_ENTRIES.filter((e) => {
+    if (category !== 'all' && e.category !== category) return false;
+    if (!q) return true;
+    if (e.code.toString().includes(q)) return true;
+    return e.name.toLowerCase().includes(q) || e.summary.toLowerCase().includes(q);
+  });
+}
diff --git a/src/libs/monaco-utils.ts b/src/libs/monaco-utils.ts
index c567bd4..1415671 100644
--- a/src/libs/monaco-utils.ts
+++ b/src/libs/monaco-utils.ts
@@ -217,8 +217,7 @@ export function createMonacoOptions(
     suggestOnTriggerCharacters: false, // Disable suggestions on trigger characters by default
     acceptSuggestionOnCommitCharacter: false, // Disable auto-accept suggestions by default
     tabCompletion: 'off', // Disable tab completion by default
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore — valid Monaco runtime option not yet reflected in the bundled type definitions
+    // @ts-expect-error — valid Monaco runtime option not yet reflected in bundled type definitions
     renderValidationDecorations: 'off', // No error/warning squiggles needed in developer tools
     scrollbar: {
       alwaysConsumeMouseWheel: false, // Allow page scrolling when editor reaches end
diff --git a/src/libs/site-url.ts b/src/libs/site-url.ts
new file mode 100644
index 0000000..50f179e
--- /dev/null
+++ b/src/libs/site-url.ts
@@ -0,0 +1,35 @@
+/**
+ * Build absolute URLs for static export (supports NEXT_PUBLIC_BASE_URL + BASE_PATH).
+ */
+
+export function getSiteOrigin(): string {
+  return (process.env.NEXT_PUBLIC_BASE_URL || 'https://devpockit.hypkey.com').replace(/\/$/, '');
+}
+
+export function getPublicBasePathPrefix(): string {
+  const bp = process.env.NEXT_PUBLIC_BASE_PATH || '';
+  if (!bp) return '';
+  const trimmed = bp.replace(/^\/+|\/+$/g, '');
+  return trimmed ? `/${trimmed}` : '';
+}
+
+/**
+ * @param path Absolute path starting with `/` (e.g. `/tools/formatters/json-formatter/`).
+ */
+export function absoluteSiteUrl(path: string): string {
+  const origin = getSiteOrigin();
+  const base = getPublicBasePathPrefix();
+  const p = path.startsWith('/') ? path : `/${path}`;
+  const combined = base ? `${base}${p}` : p;
+  const withSlash = combined.endsWith('/') ? combined : `${combined}/`;
+  return `${origin}${withSlash}`;
+}
+
+/** Same as origin + base path + path, without forcing a trailing slash (for assets like `/og-image.png`). */
+export function absoluteAssetUrl(path: string): string {
+  const origin = getSiteOrigin();
+  const base = getPublicBasePathPrefix();
+  const p = path.startsWith('/') ? path : `/${path}`;
+  const combined = base ? `${base}${p}` : p;
+  return `${origin}${combined}`;
+}
diff --git a/src/libs/text-minifier.ts b/src/libs/text-minifier.ts
new file mode 100644
index 0000000..78b59ac
--- /dev/null
+++ b/src/libs/text-minifier.ts
@@ -0,0 +1,67 @@
+export type TextMinifyMode = 'single_line' | 'per_line';
+
+export interface TextMinifyOptions {
+  mode: TextMinifyMode;
+  normalizeLineEndings: boolean;
+  removeEmptyLines: boolean;
+}
+
+export interface TextMinifyResult {
+  output: string;
+  originalLength: number;
+  outputLength: number;
+  originalLineCount: number;
+  outputLineCount: number;
+}
+
+/** Line count treating empty string as zero lines */
+function countLines(text: string): number {
+  if (text === '') return 0;
+  return text.split('\n').length;
+}
+
+function normalizeEnds(text: string): string {
+  return text.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+}
+
+function prepareWorkingCopy(input: string, normalizeLineEndings: boolean): string {
+  const base = normalizeLineEndings ? normalizeEnds(input) : input;
+  return base;
+}
+
+function minifySingleLine(working: string): string {
+  return working.trim().replace(/\s+/g, ' ');
+}
+
+function minifyPerLine(working: string, removeEmptyLines: boolean): string {
+  const segments = working.split('\n').map((line) => line.trim().replace(/\s+/g, ' '));
+  const kept = removeEmptyLines ? segments.filter((line) => line.length > 0) : segments;
+  return kept.join('\n').trim();
+}
+
+/**
+ * Collapse whitespace in plain text. Does not parse structure (JSON/XML).
+ */
+export function minifyText(input: string, options: TextMinifyOptions): TextMinifyResult {
+  const working = prepareWorkingCopy(input, options.normalizeLineEndings);
+  const originalLength = working.length;
+  const originalLineCount = countLines(working);
+
+  let output: string;
+  if (options.mode === 'single_line') {
+    output = minifySingleLine(working);
+  } else {
+    output = minifyPerLine(working, options.removeEmptyLines);
+  }
+
+  const outputLength = output.length;
+  const outputLineCount = countLines(output);
+
+  return {
+    output,
+    originalLength,
+    outputLength,
+    originalLineCount,
+    outputLineCount,
+  };
+}
diff --git a/src/libs/tool-activity-storage.ts b/src/libs/tool-activity-storage.ts
new file mode 100644
index 0000000..1203a17
--- /dev/null
+++ b/src/libs/tool-activity-storage.ts
@@ -0,0 +1,68 @@
+/**
+ * Persist recent and pinned tool ids in localStorage (client-only).
+ */
+
+export const RECENT_TOOLS_STORAGE_KEY = 'devpockit:recent-tool-ids';
+export const PINNED_TOOLS_STORAGE_KEY = 'devpockit:pinned-tool-ids';
+
+export const MAX_RECENT_TOOLS = 12;
+export const MAX_PINNED_TOOLS = 12;
+
+function parseIdList(raw: string | null): string[] {
+  if (!raw) return [];
+  try {
+    const parsed: unknown = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return [];
+    return parsed.filter((id): id is string => typeof id === 'string' && id.length > 0);
+  } catch {
+    return [];
+  }
+}
+
+export function loadRecentToolIds(): string[] {
+  if (typeof window === 'undefined') return [];
+  return parseIdList(window.localStorage.getItem(RECENT_TOOLS_STORAGE_KEY)).slice(
+    0,
+    MAX_RECENT_TOOLS
+  );
+}
+
+export function loadPinnedToolIds(): string[] {
+  if (typeof window === 'undefined') return [];
+  return parseIdList(window.localStorage.getItem(PINNED_TOOLS_STORAGE_KEY)).slice(
+    0,
+    MAX_PINNED_TOOLS
+  );
+}
+
+export function saveRecentToolIds(ids: string[]): void {
+  if (typeof window === 'undefined') return;
+  window.localStorage.setItem(
+    RECENT_TOOLS_STORAGE_KEY,
+    JSON.stringify(ids.slice(0, MAX_RECENT_TOOLS))
+  );
+}
+
+export function savePinnedToolIds(ids: string[]): void {
+  if (typeof window === 'undefined') return;
+  window.localStorage.setItem(
+    PINNED_TOOLS_STORAGE_KEY,
+    JSON.stringify(ids.slice(0, MAX_PINNED_TOOLS))
+  );
+}
+
+/** MRU: move toolId to front, dedupe, cap length */
+export function bumpRecentToolIds(current: string[], toolId: string): string[] {
+  const next = [toolId, ...current.filter(id => id !== toolId)];
+  return next.slice(0, MAX_RECENT_TOOLS);
+}
+
+export function togglePinnedToolId(current: string[], toolId: string): string[] {
+  if (current.includes(toolId)) {
+    return current.filter(id => id !== toolId);
+  }
+  if (current.length >= MAX_PINNED_TOOLS) {
+    return [...current.slice(1), toolId];
+  }
+  return [...current, toolId];
+}
diff --git a/src/libs/tool-components.ts b/src/libs/tool-components.ts
index 8751601..b6b722d 100644
--- a/src/libs/tool-components.ts
+++ b/src/libs/tool-components.ts
@@ -17,6 +17,9 @@ export const getToolComponent = async (componentName: string) => {
     'IpChecker': () => import('@/components/tools/IpChecker').then(m => m.IpChecker),
     'DiffChecker': () => import('@/components/tools/DiffChecker').then(m => m.DiffChecker),
     'HtmlToMarkdown': () => import('@/components/tools/HtmlToMarkdown').then(m => m.HtmlToMarkdown),
+    'HttpStatusCheatsheet': () => import('@/components/tools/HttpStatusCheatsheet').then(m => m.HttpStatusCheatsheet),
+    'HeadersCookiesExplainer': () => import('@/components/tools/HeadersCookiesExplainer').then(m => m.HeadersCookiesExplainer),
+    'TextMinifier': () => import('@/components/tools/TextMinifier').then(m => m.TextMinifier),
     'TimestampConverter': () => import('@/components/tools/TimestampConverter').then(m => m.TimestampConverter),
     'ListComparison': () => import('@/components/tools/ListComparison').then(m => m.ListComparison),
     'ListConverter': () => import('@/components/tools/ListConverter').then(m => m.ListConverter),
diff --git a/src/libs/tools-data.ts b/src/libs/tools-data.ts
index 5ae6bcc..8c24f54 100644
--- a/src/libs/tools-data.ts
+++ b/src/libs/tools-data.ts
@@ -10,8 +10,10 @@ import {
   Key,
   Link,
   List,
+  ListOrdered,
   Lock,
   MapPin,
+  Minimize2,
   Network,
   QrCode,
   RefreshCw,
@@ -25,6 +27,7 @@ import {
   Binary,
   Database,
   ClipboardPaste,
+  Cookie,
   type LucideIcon
 } from 'lucide-react';
 
@@ -46,6 +49,7 @@ export const toolIcons: Record<string, LucideIcon> = {
   'ip-checker': MapPin,
   'diff-checker': GitCompare,
   'html-to-markdown': ClipboardPaste,
+  'text-minifier': Minimize2,
   'timestamp-converter': Timer,
   'list-comparison': List,
   'list-converter': ArrowLeftRight,
@@ -62,6 +66,8 @@ export const toolIcons: Record<string, LucideIcon> = {
   'number-base-converter': Binary,
   'base-encoder': Binary,
   'hash-generator': Hash,
+  'http-status-cheatsheet': ListOrdered,
+  'headers-cookies-explainer': Cookie,
 };
 
 export const toolCategories: ToolCategory[] = [
@@ -107,6 +113,7 @@ export const toolCategories: ToolCategory[] = [
         component: 'DiffChecker',
         supportsDesktop: true,
         supportsMobile: true,
+        desktopRecommended: true,
       },
       {
         id: 'html-to-markdown',
@@ -120,6 +127,19 @@ export const toolCategories: ToolCategory[] = [
         supportsDesktop: true,
         supportsMobile: true,
       },
+      {
+        id: 'text-minifier',
+        name: 'Text Minifier',
+        description:
+          'Collapse redundant whitespace in plain text—single-line or per-line—with optional CRLF normalization and empty-line removal',
+        category: 'text-tools',
+        icon: '⏬',
+        isPopular: false,
+        path: '/tools/text-tools/text-minifier',
+        component: 'TextMinifier',
+        supportsDesktop: true,
+        supportsMobile: true,
+      },
     ],
   },
   {
@@ -371,6 +391,7 @@ export const toolCategories: ToolCategory[] = [
         component: 'SchemaConverter',
         supportsDesktop: true,
         supportsMobile: true,
+        desktopRecommended: true,
       },
       {
         id: 'number-base-converter',
@@ -429,6 +450,32 @@ export const toolCategories: ToolCategory[] = [
         supportsDesktop: true,
         supportsMobile: true,
       },
+      {
+        id: 'http-status-cheatsheet',
+        name: 'HTTP Status Codes',
+        description:
+          'Searchable reference for common HTTP response status codes, classes, names, and short explanations',
+        category: 'network',
+        icon: '📛',
+        isPopular: false,
+        path: '/tools/network/http-status-cheatsheet',
+        component: 'HttpStatusCheatsheet',
+        supportsDesktop: true,
+        supportsMobile: true,
+      },
+      {
+        id: 'headers-cookies-explainer',
+        name: 'Headers / Cookies explainer',
+        description:
+          'Paste HTTP headers or cookie strings to see a structured breakdown with glossary explanations',
+        category: 'network',
+        icon: '🍪',
+        isPopular: false,
+        path: '/tools/network/headers-cookies-explainer',
+        component: 'HeadersCookiesExplainer',
+        supportsDesktop: true,
+        supportsMobile: true,
+      },
       {
         id: 'system-info',
         name: 'System Information',
@@ -461,6 +508,7 @@ export const toolCategories: ToolCategory[] = [
         component: 'ListComparison',
         supportsDesktop: true,
         supportsMobile: true,
+        desktopRecommended: true,
       },
       {
         id: 'json-path-finder',
diff --git a/src/types/tools.ts b/src/types/tools.ts
index 475b199..d27b4dc 100644
--- a/src/types/tools.ts
+++ b/src/types/tools.ts
@@ -12,6 +12,8 @@ export interface Tool {
   component: string;
   supportsDesktop?: boolean;
   supportsMobile?: boolean;
+  /** Wide or dual-pane tools that work best on a larger screen */
+  desktopRecommended?: boolean;
 }
 
 export interface ToolCategory {