feat: mobile-friendly responsive layout (HQ-21)

- Collapsible hamburger sidebar on mobile
- Mobile header bar with menu toggle
- Thread list as overlay on mobile, sidebar on desktop
- Responsive padding and font sizes
- Task queue header responsive adjustments

frontend/src/components/DashboardLayout.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { NavLink, Outlet } from "react-router-dom";
 import { useCurrentUser } from "../hooks/useCurrentUser";
 import { signOut } from "../lib/auth-client";
@@ -9,24 +10,75 @@ const navItems = [
 
 export function DashboardLayout() {
   const { user, isAdmin } = useCurrentUser();
+  const [sidebarOpen, setSidebarOpen] = useState(false);
 
   const handleLogout = async () => {
     await signOut();
     window.location.reload();
   };
 
+  const closeSidebar = () => setSidebarOpen(false);
+
   return (
     <div className="min-h-screen bg-gray-50 flex">
+      {/* Mobile header */}
+      <header className="md:hidden fixed top-0 left-0 right-0 z-40 bg-gray-900 text-white flex items-center h-14 px-4 shadow-lg">
+        <button
+          onClick={() => setSidebarOpen(!sidebarOpen)}
+          className="p-1.5 rounded-lg hover:bg-gray-800 transition"
+          aria-label="Toggle menu"
+        >
+          <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            {sidebarOpen ? (
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            ) : (
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+            )}
+          </svg>
+        </button>
+        <div className="flex items-center gap-2 ml-3">
+          <span className="text-xl">🔨</span>
+          <h1 className="text-base font-bold">Hammer</h1>
+        </div>
+      </header>
+
+      {/* Overlay for mobile */}
+      {sidebarOpen && (
+        <div
+          className="md:hidden fixed inset-0 bg-black/50 z-40"
+          onClick={closeSidebar}
+        />
+      )}
+
       {/* Sidebar */}
-      <aside className="w-56 bg-gray-900 text-white flex flex-col fixed inset-y-0 left-0 z-50">
+      <aside
+        className={`
+          w-56 bg-gray-900 text-white flex flex-col fixed inset-y-0 left-0 z-50
+          transition-transform duration-200 ease-in-out
+          ${sidebarOpen ? "translate-x-0" : "-translate-x-full"}
+          md:translate-x-0
+        `}
+      >
         {/* Logo */}
         <div className="px-4 py-5 border-b border-gray-800">
-          <div className="flex items-center gap-2">
-            <span className="text-2xl">🔨</span>
-            <div>
-              <h1 className="text-lg font-bold leading-tight">Hammer</h1>
-              <span className="text-xs text-gray-400">Dashboard</span>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <span className="text-2xl">🔨</span>
+              <div>
+                <h1 className="text-lg font-bold leading-tight">Hammer</h1>
+                <span className="text-xs text-gray-400">Dashboard</span>
+              </div>
             </div>
+            {/* Close button on mobile */}
+            <button
+              onClick={closeSidebar}
+              className="md:hidden p-1 rounded hover:bg-gray-800 transition text-gray-400"
+              aria-label="Close menu"
+            >
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
           </div>
         </div>
 
@@ -36,6 +88,7 @@ export function DashboardLayout() {
             <NavLink
               key={item.to}
               to={item.to}
+              onClick={closeSidebar}
               className={({ isActive }) =>
                 `flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition ${
                   isActive
@@ -51,6 +104,7 @@ export function DashboardLayout() {
           {isAdmin && (
             <NavLink
               to="/admin"
+              onClick={closeSidebar}
               className={({ isActive }) =>
                 `flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition ${
                   isActive
@@ -68,7 +122,7 @@ export function DashboardLayout() {
         {/* User */}
         <div className="px-3 py-4 border-t border-gray-800">
           <div className="flex items-center gap-2 px-3 mb-2">
-            <div className="w-7 h-7 bg-amber-500 rounded-full flex items-center justify-center text-xs font-bold text-white">
+            <div className="w-7 h-7 bg-amber-500 rounded-full flex items-center justify-center text-xs font-bold text-white shrink-0">
               {user?.name?.[0]?.toUpperCase() || user?.email?.[0]?.toUpperCase() || "?"}
             </div>
             <div className="flex-1 min-w-0">
@@ -90,7 +144,7 @@ export function DashboardLayout() {
       </aside>
 
       {/* Main Content */}
-      <main className="flex-1 ml-56">
+      <main className="flex-1 md:ml-56 pt-14 md:pt-0">
         <Outlet />
       </main>
     </div>

frontend/src/pages/ChatPage.tsx

@@ -22,22 +22,37 @@ function ThreadList({
   activeThread,
   onSelect,
   onCreate,
+  onClose,
 }: {
   threads: ChatThread[];
   activeThread: string | null;
   onSelect: (key: string) => void;
   onCreate: () => void;
+  onClose?: () => void;
 }) {
   return (
-    <div className="w-64 bg-white border-r border-gray-200 flex flex-col h-full">
+    <div className="w-full sm:w-64 bg-white border-r border-gray-200 flex flex-col h-full">
       <div className="p-3 border-b border-gray-100 flex items-center justify-between">
         <h3 className="text-sm font-semibold text-gray-600">Threads</h3>
-        <button
-          onClick={onCreate}
-          className="text-xs bg-amber-500 text-white px-2.5 py-1 rounded-lg hover:bg-amber-600 transition font-medium"
-        >
-          + New
-        </button>
+        <div className="flex items-center gap-2">
+          <button
+            onClick={onCreate}
+            className="text-xs bg-amber-500 text-white px-2.5 py-1 rounded-lg hover:bg-amber-600 transition font-medium"
+          >
+            + New
+          </button>
+          {onClose && (
+            <button
+              onClick={onClose}
+              className="sm:hidden text-gray-400 hover:text-gray-600 p-1"
+              aria-label="Close threads"
+            >
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          )}
+        </div>
       </div>
       <div className="flex-1 overflow-y-auto">
         {threads.length === 0 ? (
@@ -401,12 +416,23 @@ export function ChatPage() {
     );
   }
 
+  const [showThreads, setShowThreads] = useState(false);
+
   return (
-    <div className="h-screen flex flex-col">
+    <div className="h-[calc(100vh-3.5rem)] md:h-screen flex flex-col">
       {/* Page Header */}
       <header className="bg-white border-b border-gray-200 sticky top-0 z-30">
-        <div className="px-6 py-3 flex items-center justify-between">
-          <div>
+        <div className="px-4 sm:px-6 py-3 flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <button
+              onClick={() => setShowThreads(!showThreads)}
+              className="sm:hidden p-1 rounded hover:bg-gray-100 transition"
+              aria-label="Toggle threads"
+            >
+              <svg className="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h8m-8 6h16" />
+              </svg>
+            </button>
             <h1 className="text-lg font-bold text-gray-900">Chat</h1>
           </div>
           <div className="flex items-center gap-2">
@@ -421,13 +447,34 @@ export function ChatPage() {
       </header>
 
       {/* Chat body */}
-      <div className="flex-1 flex overflow-hidden">
-        <ThreadList
-          threads={threads}
-          activeThread={activeThread}
-          onSelect={(key) => setActiveThread(key)}
-          onCreate={handleCreateThread}
-        />
+      <div className="flex-1 flex overflow-hidden relative">
+        {/* Thread list - overlay on mobile, sidebar on desktop */}
+        <div className={`
+          absolute inset-0 z-20 sm:relative sm:inset-auto sm:z-auto
+          ${showThreads ? "block" : "hidden"} sm:block
+        `}>
+          {showThreads && (
+            <div
+              className="absolute inset-0 bg-black/30 sm:hidden"
+              onClick={() => setShowThreads(false)}
+            />
+          )}
+          <div className="relative z-10 h-full">
+            <ThreadList
+              threads={threads}
+              activeThread={activeThread}
+              onSelect={(key) => {
+                setActiveThread(key);
+                setShowThreads(false);
+              }}
+              onCreate={() => {
+                handleCreateThread();
+                setShowThreads(false);
+              }}
+              onClose={() => setShowThreads(false)}
+            />
+          </div>
+        </div>
         {activeThread ? (
           <ChatArea
             messages={messages}
@@ -439,8 +486,17 @@ export function ChatPage() {
             connected={connected}
           />
         ) : (
-          <div className="flex-1 flex items-center justify-center text-gray-400">
-            Select or create a thread
+          <div className="flex-1 flex items-center justify-center text-gray-400 p-4 text-center">
+            <div>
+              <span className="text-3xl block mb-2">💬</span>
+              <p>Select or create a thread</p>
+              <button
+                onClick={() => setShowThreads(true)}
+                className="sm:hidden mt-3 text-sm text-amber-500 font-medium"
+              >
+                View Threads →
+              </button>
+            </div>
           </div>
         )}
       </div>

frontend/src/pages/QueuePage.tsx

@@ -65,17 +65,17 @@ export function QueuePage() {
   return (
     <div className="min-h-screen">
       {/* Page Header */}
-      <header className="bg-white border-b border-gray-200 sticky top-0 z-30">
-        <div className="max-w-4xl mx-auto px-6 py-4 flex items-center justify-between">
+      <header className="bg-white border-b border-gray-200 sticky top-0 md:top-0 z-30">
+        <div className="max-w-4xl mx-auto px-4 sm:px-6 py-3 sm:py-4 flex items-center justify-between">
           <div>
-            <h1 className="text-xl font-bold text-gray-900">Task Queue</h1>
-            <p className="text-sm text-gray-400">Manage what Hammer is working on</p>
+            <h1 className="text-lg sm:text-xl font-bold text-gray-900">Task Queue</h1>
+            <p className="text-xs sm:text-sm text-gray-400">Manage what Hammer is working on</p>
           </div>
           <button
             onClick={() => setShowCreate(true)}
-            className="text-sm bg-amber-500 text-white px-4 py-2 rounded-lg hover:bg-amber-600 transition font-medium"
+            className="text-sm bg-amber-500 text-white px-3 sm:px-4 py-2 rounded-lg hover:bg-amber-600 transition font-medium"
           >
-            + New Task
+            + New
           </button>
         </div>
       </header>
@@ -86,7 +86,7 @@ export function QueuePage() {
         onCreate={handleCreate}
       />
 
-      <div className="max-w-4xl mx-auto px-6 py-6 space-y-6">
+      <div className="max-w-4xl mx-auto px-4 sm:px-6 py-4 sm:py-6 space-y-5 sm:space-y-6">
         {loading && (
           <div className="text-center text-gray-400 py-12">Loading tasks...</div>
         )}