From 04ca55720c2df4dd6851eba557c69a1351b743e5 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 23 Nov 2025 07:22:21 +0000
Subject: [PATCH 1/5] feat: add mobile-responsive layout with overlay sidebars

Implement comprehensive mobile navigation and responsive design:

**Mobile Navigation (< 768px):**
- Add hamburger menu buttons in header for toggling sidebars
- Sidebars overlay content instead of pushing it
- Dark backdrop when sidebars are open
- Smooth slide-in/out transitions
- Auto-close sidebars when backdrop is clicked

**Responsive Components:**
- ChatHeader: Compact layout, responsive padding, mobile toggle buttons
- ChatSidebar: Full-width overlay on mobile (288px-320px)
- RightSidebar: Full-width overlay on mobile, disable resize
- MessageInput: Responsive padding, icon-only buttons, smaller controls
- Scroll buttons: Adjusted position for mobile

**Desktop (>= 768px):**
- Maintain existing static sidebar behavior
- Keep resizable right sidebar
- Show full button labels and larger controls

All changes use Tailwind responsive breakpoints (sm:, md:) for
seamless mobile-to-desktop experience.
---
 frontend/components/ChatHeader.tsx   |  56 ++++++++++++---
 frontend/components/ChatSidebar.tsx  |  12 +++-
 frontend/components/ChatV2.tsx       | 101 ++++++++++++++++++---------
 frontend/components/MessageInput.tsx |  34 ++++-----
 frontend/components/RightSidebar.tsx |  13 ++--
 5 files changed, 149 insertions(+), 67 deletions(-)

diff --git a/frontend/components/ChatHeader.tsx b/frontend/components/ChatHeader.tsx
index 34a89f82..cbb937c0 100644
--- a/frontend/components/ChatHeader.tsx
+++ b/frontend/components/ChatHeader.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Sun, Moon, Settings, RefreshCw, Loader2 } from 'lucide-react';
+import { Sun, Moon, Settings, RefreshCw, Loader2, Menu, PanelLeft, PanelRight } from 'lucide-react';
 import { useTheme } from '../contexts/ThemeContext';
 import ModelSelector from './ui/ModelSelector';
 import { type Group as TabGroup } from './ui/TabbedSelect';
@@ -20,6 +20,10 @@ interface ChatHeaderProps {
   fallbackOptions?: { value: string; label: string }[];
   modelToProvider?: Record<string, string> | Map<string, string>;
   onFocusMessageInput?: () => void;
+  onToggleLeftSidebar?: () => void;
+  onToggleRightSidebar?: () => void;
+  showLeftSidebarButton?: boolean;
+  showRightSidebarButton?: boolean;
 }
 
 export function ChatHeader({
@@ -35,6 +39,10 @@ export function ChatHeader({
   fallbackOptions,
   modelToProvider,
   onFocusMessageInput,
+  onToggleLeftSidebar,
+  onToggleRightSidebar,
+  showLeftSidebarButton = false,
+  showRightSidebarButton = false,
 }: ChatHeaderProps) {
   const { theme, setTheme, resolvedTheme } = useTheme();
 
@@ -97,15 +105,28 @@ export function ChatHeader({
   };
 
   return (
-    <header className="sticky top-0 z-40 bg-white dark:bg-neutral-950">
-      <div className="px-4 sm:px-6 py-3 flex items-center justify-between">
-        <div className="flex items-center gap-2">
+    <header className="sticky top-0 z-40 bg-white dark:bg-neutral-950 border-b border-slate-200/50 dark:border-neutral-800/50">
+      <div className="px-2 sm:px-4 md:px-6 py-2 sm:py-3 flex items-center justify-between gap-2">
+        <div className="flex items-center gap-1 sm:gap-2 flex-1 min-w-0">
+          {/* Left Sidebar Toggle - Mobile Only */}
+          {showLeftSidebarButton && onToggleLeftSidebar && (
+            <button
+              onClick={onToggleLeftSidebar}
+              className="md:hidden w-8 h-8 rounded-md border border-slate-200/80 dark:border-neutral-700/80 bg-white dark:bg-neutral-900 hover:bg-slate-50 dark:hover:bg-neutral-800 flex items-center justify-center text-slate-600 dark:text-slate-300 transition-colors flex-shrink-0"
+              title="Toggle conversation history"
+              aria-label="Toggle conversation history"
+              type="button"
+            >
+              <PanelLeft className="w-4 h-4" />
+            </button>
+          )}
+
           <ModelSelector
             value={model}
             onChange={onModelChange}
             groups={effectiveGroups}
             fallbackOptions={effectiveFallback}
-            className="text-lg"
+            className="text-sm sm:text-base md:text-lg"
             ariaLabel="Model"
             onAfterChange={onFocusMessageInput}
           />
@@ -113,7 +134,7 @@ export function ChatHeader({
             <button
               onClick={onRefreshModels}
               disabled={isLoadingModels}
-              className="w-8 h-8 rounded-md border border-slate-200/80 dark:border-neutral-700/80 bg-white dark:bg-neutral-900 hover:bg-slate-50 dark:hover:bg-neutral-800 flex items-center justify-center text-slate-600 dark:text-slate-300 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              className="hidden sm:flex w-8 h-8 rounded-md border border-slate-200/80 dark:border-neutral-700/80 bg-white dark:bg-neutral-900 hover:bg-slate-50 dark:hover:bg-neutral-800 items-center justify-center text-slate-600 dark:text-slate-300 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex-shrink-0"
               title="Refresh model list"
               aria-label="Refresh model list"
               type="button"
@@ -127,7 +148,7 @@ export function ChatHeader({
           )}
         </div>
 
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-1 sm:gap-2 flex-shrink-0">
           <button
             onClick={onOpenSettings}
             className="w-8 h-8 rounded-md border border-slate-200/80 dark:border-neutral-700/80 bg-white dark:bg-neutral-900 hover:bg-slate-50 dark:hover:bg-neutral-800 flex items-center justify-center text-slate-700 dark:text-slate-200 transition-colors"
@@ -135,7 +156,7 @@ export function ChatHeader({
             aria-label="Open settings"
             type="button"
           >
-            <Settings className="w-4 h-4" />
+            <Settings className="w-3 h-3 sm:w-4 sm:h-4" />
           </button>
           <button
             onClick={toggleTheme}
@@ -143,9 +164,24 @@ export function ChatHeader({
             title={`Switch to ${resolvedTheme === 'dark' ? 'light' : 'dark'} theme`}
             type="button"
           >
-            {resolvedTheme === 'dark' ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
+            {resolvedTheme === 'dark' ? <Sun className="w-3 h-3 sm:w-4 sm:h-4" /> : <Moon className="w-3 h-3 sm:w-4 sm:h-4" />}
           </button>
-          <AuthButton onShowLogin={onShowLogin} onShowRegister={onShowRegister} />
+          <div className="hidden sm:block">
+            <AuthButton onShowLogin={onShowLogin} onShowRegister={onShowRegister} />
+          </div>
+
+          {/* Right Sidebar Toggle - Mobile Only */}
+          {showRightSidebarButton && onToggleRightSidebar && (
+            <button
+              onClick={onToggleRightSidebar}
+              className="md:hidden w-8 h-8 rounded-md border border-slate-200/80 dark:border-neutral-700/80 bg-white dark:bg-neutral-900 hover:bg-slate-50 dark:hover:bg-neutral-800 flex items-center justify-center text-slate-600 dark:text-slate-300 transition-colors"
+              title="Toggle system prompts"
+              aria-label="Toggle system prompts"
+              type="button"
+            >
+              <PanelRight className="w-4 h-4" />
+            </button>
+          )}
         </div>
       </div>
     </header>
diff --git a/frontend/components/ChatSidebar.tsx b/frontend/components/ChatSidebar.tsx
index 124e10df..2c46e7f9 100644
--- a/frontend/components/ChatSidebar.tsx
+++ b/frontend/components/ChatSidebar.tsx
@@ -30,11 +30,17 @@ export function ChatSidebar({
 }: ChatSidebarProps) {
   return (
     <aside
-      className={`${collapsed ? 'w-16' : 'w-72'} z-40 p-4 flex flex-col bg-slate-50 dark:bg-neutral-900 transition-[width] duration-300 ease-in-out relative`}
+      className={`
+        ${collapsed ? 'w-16' : 'w-72 md:w-72'}
+        h-full z-40 p-4 flex flex-col bg-slate-50 dark:bg-neutral-900
+        md:transition-[width] md:duration-300 md:ease-in-out
+        relative
+        ${!collapsed ? 'w-72 sm:w-80' : ''}
+      `}
     >
-      {/* Collapse/Expand Button */}
+      {/* Collapse/Expand Button - Desktop only */}
       <button
-        className="absolute -right-3 top-6 w-6 h-6 rounded-full bg-white dark:bg-neutral-950 border border-slate-200/70 dark:border-neutral-800/70 transition-colors duration-200 flex items-center justify-center text-slate-500 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-neutral-900 hover:text-slate-700 dark:hover:text-slate-200 cursor-pointer"
+        className="hidden md:flex absolute -right-3 top-6 w-6 h-6 rounded-full bg-white dark:bg-neutral-950 border border-slate-200/70 dark:border-neutral-800/70 transition-colors duration-200 items-center justify-center text-slate-500 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-neutral-900 hover:text-slate-700 dark:hover:text-slate-200 cursor-pointer"
         onClick={onToggleCollapse}
         title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
       >
diff --git a/frontend/components/ChatV2.tsx b/frontend/components/ChatV2.tsx
index d6c7674b..b84c8f2f 100644
--- a/frontend/components/ChatV2.tsx
+++ b/frontend/components/ChatV2.tsx
@@ -404,23 +404,45 @@ export function ChatV2() {
   );
 
   return (
-    <div className="flex h-dvh max-h-dvh bg-white dark:bg-neutral-950">
-      {chat.historyEnabled && (
-        <ChatSidebar
-          conversations={chat.conversations}
-          nextCursor={chat.nextCursor}
-          loadingConversations={chat.loadingConversations}
-          conversationId={chat.conversationId}
-          collapsed={chat.sidebarCollapsed}
-          onSelectConversation={handleSelectConversation}
-          onDeleteConversation={chat.deleteConversation}
-          onLoadMore={chat.loadMoreConversations}
-          onRefresh={chat.refreshConversations}
-          onNewChat={handleNewChat}
-          onToggleCollapse={chat.toggleSidebar}
+    <div className="flex h-dvh max-h-dvh bg-white dark:bg-neutral-950 relative">
+      {/* Mobile Backdrop */}
+      {(!chat.sidebarCollapsed || !chat.rightSidebarCollapsed) && (
+        <div
+          className="md:hidden fixed inset-0 bg-black/50 z-40 transition-opacity"
+          onClick={() => {
+            if (!chat.sidebarCollapsed) chat.toggleSidebar();
+            if (!chat.rightSidebarCollapsed) chat.toggleRightSidebar();
+          }}
+          aria-hidden="true"
         />
       )}
-      <div className="flex flex-col flex-1">
+
+      {/* Left Sidebar - Overlay on mobile, static on desktop */}
+      {chat.historyEnabled && (
+        <div
+          className={`
+            ${chat.sidebarCollapsed ? '-translate-x-full md:translate-x-0' : 'translate-x-0'}
+            fixed md:relative inset-y-0 left-0 z-50 md:z-auto
+            transition-transform duration-300 ease-in-out
+          `}
+        >
+          <ChatSidebar
+            conversations={chat.conversations}
+            nextCursor={chat.nextCursor}
+            loadingConversations={chat.loadingConversations}
+            conversationId={chat.conversationId}
+            collapsed={chat.sidebarCollapsed}
+            onSelectConversation={handleSelectConversation}
+            onDeleteConversation={chat.deleteConversation}
+            onLoadMore={chat.loadMoreConversations}
+            onRefresh={chat.refreshConversations}
+            onNewChat={handleNewChat}
+            onToggleCollapse={chat.toggleSidebar}
+          />
+        </div>
+      )}
+
+      <div className="flex flex-col flex-1 min-w-0">
         <ChatHeader
           isStreaming={chat.status === 'streaming'}
           onNewChat={handleNewChat}
@@ -436,6 +458,10 @@ export function ChatV2() {
           fallbackOptions={chat.modelOptions}
           modelToProvider={chat.modelToProvider}
           onFocusMessageInput={handleFocusMessageInput}
+          onToggleLeftSidebar={chat.toggleSidebar}
+          onToggleRightSidebar={chat.toggleRightSidebar}
+          showLeftSidebarButton={chat.historyEnabled}
+          showRightSidebarButton={true}
         />
         <div className="flex flex-1 min-h-0">
           <div className="flex flex-col flex-1 relative">
@@ -458,7 +484,7 @@ export function ChatV2() {
             />
 
             {/* Scroll Buttons - centered but visually minimal */}
-            <div className="absolute bottom-40 left-1/2 transform -translate-x-1/2 flex flex-col gap-2 z-40 pointer-events-none">
+            <div className="absolute bottom-32 sm:bottom-40 left-1/2 transform -translate-x-1/2 flex flex-col gap-2 z-40 pointer-events-none">
               {scrollButtons.showTop && (
                 <button
                   onClick={scrollToTop}
@@ -466,7 +492,7 @@ export function ChatV2() {
                   aria-label="Scroll to top"
                   title="Scroll to top"
                 >
-                  <ArrowUp className="w-4 h-4" />
+                  <ArrowUp className="w-3 h-3 sm:w-4 sm:h-4" />
                 </button>
               )}
               {scrollButtons.showBottom && (
@@ -476,13 +502,13 @@ export function ChatV2() {
                   aria-label="Scroll to bottom"
                   title="Scroll to bottom"
                 >
-                  <ArrowDown className="w-4 h-4" />
+                  <ArrowDown className="w-3 h-3 sm:w-4 sm:h-4" />
                 </button>
               )}
             </div>
 
             {/* Removed soft fade to keep a cleaner boundaryless look */}
-            <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 w-full max-w-3xl px-6 z-30">
+            <div className="absolute bottom-2 sm:bottom-4 left-1/2 transform -translate-x-1/2 w-full max-w-3xl px-2 sm:px-4 md:px-6 z-30">
               <MessageInput
                 ref={messageInputRef}
                 input={chat.input}
@@ -517,28 +543,39 @@ export function ChatV2() {
               initialMode={authMode}
             />
           </div>
+          {/* Right Sidebar Resize Handle - Desktop only */}
           {!chat.rightSidebarCollapsed && (
             <div
               role="separator"
               aria-orientation="vertical"
               aria-label="Resize right sidebar"
-              className={`flex-shrink-0 self-stretch w-1 cursor-col-resize select-none transition-colors duration-150 ${isResizingRightSidebar ? 'bg-slate-400/60 dark:bg-neutral-600/60' : 'bg-transparent hover:bg-slate-400/40 dark:hover:bg-neutral-600/40'}`}
+              className={`hidden md:block flex-shrink-0 self-stretch w-1 cursor-col-resize select-none transition-colors duration-150 ${isResizingRightSidebar ? 'bg-slate-400/60 dark:bg-neutral-600/60' : 'bg-transparent hover:bg-slate-400/40 dark:hover:bg-neutral-600/40'}`}
               onPointerDown={handleResizeStart}
               onDoubleClick={handleResizeDoubleClick}
             />
           )}
-          <RightSidebar
-            userId={chat.user?.id}
-            conversationId={chat.conversationId || undefined}
-            collapsed={chat.rightSidebarCollapsed}
-            onToggleCollapse={chat.toggleRightSidebar}
-            onEffectivePromptChange={chat.setInlineSystemPromptOverride}
-            onActivePromptIdChange={chat.setActiveSystemPromptId}
-            conversationActivePromptId={chat.activeSystemPromptId}
-            conversationSystemPrompt={chat.systemPrompt}
-            width={rightSidebarWidth}
-            isResizing={isResizingRightSidebar}
-          />
+
+          {/* Right Sidebar - Overlay on mobile, static on desktop */}
+          <div
+            className={`
+              ${chat.rightSidebarCollapsed ? 'translate-x-full md:translate-x-0' : 'translate-x-0'}
+              fixed md:relative inset-y-0 right-0 z-50 md:z-auto
+              transition-transform duration-300 ease-in-out
+            `}
+          >
+            <RightSidebar
+              userId={chat.user?.id}
+              conversationId={chat.conversationId || undefined}
+              collapsed={chat.rightSidebarCollapsed}
+              onToggleCollapse={chat.toggleRightSidebar}
+              onEffectivePromptChange={chat.setInlineSystemPromptOverride}
+              onActivePromptIdChange={chat.setActiveSystemPromptId}
+              conversationActivePromptId={chat.activeSystemPromptId}
+              conversationSystemPrompt={chat.systemPrompt}
+              width={rightSidebarWidth}
+              isResizing={isResizingRightSidebar}
+            />
+          </div>
         </div>
       </div>
     </div>
diff --git a/frontend/components/MessageInput.tsx b/frontend/components/MessageInput.tsx
index e9483b3c..ca8b61e5 100644
--- a/frontend/components/MessageInput.tsx
+++ b/frontend/components/MessageInput.tsx
@@ -382,7 +382,7 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(funct
             )}
 
             {/* ===== TEXT INPUT WITH IMAGE/FILE UPLOAD ===== */}
-            <div className="flex items-start gap-2 p-4">
+            <div className="flex items-start gap-2 p-2 sm:p-3 md:p-4">
               {/* Attach button */}
               {(onImagesChange || onFilesChange) && (
                 <div className="relative" ref={attachDropdownRef}>
@@ -483,11 +483,11 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(funct
             </div>
 
             {/* ===== CONTROLS BAR ===== */}
-            <div className="flex items-center justify-between px-4 pb-4">
+            <div className="flex items-center justify-between px-2 sm:px-4 pb-3 sm:pb-4 gap-2">
               {/* Left side controls - grouped logically */}
-              <div className="flex items-center gap-6 text-xs scrollbar-hide">
+              <div className="flex items-center gap-2 sm:gap-4 md:gap-6 text-xs scrollbar-hide overflow-x-auto flex-1 min-w-0">
                 {/* AI Controls Group */}
-                <div className="flex items-center gap-3">
+                <div className="flex items-center gap-2 sm:gap-3">
                   {/* Quality/Reasoning control - always visible */}
                   <Tooltip content="Reasoning effort level">
                     <QualitySlider
@@ -505,38 +505,38 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(funct
                     <button
                       type="button"
                       onClick={() => onShouldStreamChange(!shouldStream)}
-                      className={`flex items-center gap-2 px-3 py-2 rounded-lg border transition-all duration-200 ${
+                      className={`flex items-center gap-1 sm:gap-2 px-2 sm:px-3 py-1.5 sm:py-2 rounded-lg border transition-all duration-200 ${
                         shouldStream
                           ? 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800 text-blue-700 dark:text-blue-300'
                           : 'border-transparent hover:bg-slate-100 dark:hover:bg-neutral-700 text-slate-600 dark:text-slate-400'
                       }`}
                     >
-                      <Zap className="w-4 h-4" />
-                      <span className="text-sm font-medium">Stream</span>
+                      <Zap className="w-3 h-3 sm:w-4 sm:h-4" />
+                      <span className="text-xs sm:text-sm font-medium hidden sm:inline">Stream</span>
                     </button>
                   </Tooltip>
                 </div>
 
                 {/* Visual separator */}
                 {(supportsThinking || true) && (
-                  <div className="w-px h-6 bg-slate-200 dark:bg-neutral-700" />
+                  <div className="hidden md:block w-px h-6 bg-slate-200 dark:bg-neutral-700" />
                 )}
 
                 {/* Tools Group */}
-                <div className="flex items-center gap-3">
+                <div className="flex items-center gap-2 sm:gap-3">
                   {/* Search toggle */}
                   <Tooltip content="Enable web search (Tavily + Exa)">
                     <button
                       type="button"
                       onClick={() => handleSearchToggle(!searchEnabled)}
-                      className={`flex items-center gap-2 px-3 py-2 rounded-lg border transition-all duration-200 ${
+                      className={`flex items-center gap-1 sm:gap-2 px-2 sm:px-3 py-1.5 sm:py-2 rounded-lg border transition-all duration-200 ${
                         searchEnabled
                           ? 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800 text-blue-700 dark:text-blue-300'
                           : 'border-transparent hover:bg-slate-100 dark:hover:bg-neutral-700 text-slate-600 dark:text-slate-400'
                       }`}
                     >
-                      <Globe className="w-4 h-4" />
-                      <span className="text-sm font-medium">Search</span>
+                      <Globe className="w-3 h-3 sm:w-4 sm:h-4" />
+                      <span className="text-xs sm:text-sm font-medium hidden sm:inline">Search</span>
                     </button>
                   </Tooltip>
 
@@ -749,17 +749,17 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(funct
                   }
                 }}
                 disabled={!canSend && !pending.streaming}
-                className="flex items-center gap-2 px-4 py-2 text-sm rounded-xl bg-slate-800 hover:bg-slate-700 dark:bg-slate-600 dark:hover:bg-slate-500 text-white disabled:opacity-40 disabled:cursor-not-allowed transition-all duration-200 shadow-md hover:shadow-lg disabled:hover:shadow-md transform hover:scale-[1.02] disabled:hover:scale-100"
+                className="flex items-center gap-1 sm:gap-2 px-3 sm:px-4 py-1.5 sm:py-2 text-xs sm:text-sm rounded-lg sm:rounded-xl bg-slate-800 hover:bg-slate-700 dark:bg-slate-600 dark:hover:bg-slate-500 text-white disabled:opacity-40 disabled:cursor-not-allowed transition-all duration-200 shadow-md hover:shadow-lg disabled:hover:shadow-md transform hover:scale-[1.02] disabled:hover:scale-100 flex-shrink-0"
               >
                 {pending.streaming ? (
                   <>
-                    <Loader2 className="w-4 h-4 animate-spin" />
-                    Stop
+                    <Loader2 className="w-3 h-3 sm:w-4 sm:h-4 animate-spin" />
+                    <span className="hidden sm:inline">Stop</span>
                   </>
                 ) : (
                   <>
-                    <Send className="w-4 h-4" />
-                    Send
+                    <Send className="w-3 h-3 sm:w-4 sm:h-4" />
+                    <span className="hidden sm:inline">Send</span>
                   </>
                 )}
               </button>
diff --git a/frontend/components/RightSidebar.tsx b/frontend/components/RightSidebar.tsx
index ae082989..bca9427d 100644
--- a/frontend/components/RightSidebar.tsx
+++ b/frontend/components/RightSidebar.tsx
@@ -368,17 +368,20 @@ export function RightSidebar({
     <>
       <aside
         style={{
-          width: `${computedWidth}px`,
-          minWidth: `${computedWidth}px`,
+          width: collapsed ? `${collapsedWidth}px` : `${computedWidth}px`,
+          minWidth: collapsed ? `${collapsedWidth}px` : `${computedWidth}px`,
           flexShrink: 0,
           transition: isResizing ? 'none' : 'width 0.3s ease-in-out',
           willChange: isResizing ? 'width' : undefined,
         }}
-        className={`z-30 flex flex-col bg-white dark:bg-neutral-950 relative`}
+        className={`
+          z-30 flex flex-col bg-white dark:bg-neutral-950 relative h-full
+          ${!collapsed ? 'w-72 sm:w-80 md:w-auto' : 'w-16 md:w-auto'}
+        `}
       >
-        {/* Collapse/Expand Button */}
+        {/* Collapse/Expand Button - Desktop only */}
         <button
-          className="absolute -left-3 top-6 z-40 w-6 h-6 rounded-full bg-white dark:bg-neutral-950 border border-slate-200/70 dark:border-neutral-800/70 transition-colors duration-200 flex items-center justify-center text-slate-500 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-neutral-900 hover:text-slate-700 dark:hover:text-slate-200 cursor-pointer"
+          className="hidden md:flex absolute -left-3 top-6 z-40 w-6 h-6 rounded-full bg-white dark:bg-neutral-950 border border-slate-200/70 dark:border-neutral-800/70 transition-colors duration-200 items-center justify-center text-slate-500 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-neutral-900 hover:text-slate-700 dark:hover:text-slate-200 cursor-pointer"
           onClick={onToggleCollapse}
           title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
         >

From 932f058ea37d3a38c4d63275d32c0332c920a5b4 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 23 Nov 2025 07:35:30 +0000
Subject: [PATCH 2/5] feat: auto-collapse sidebars on mobile layout by default

Add mobile detection on initial mount to automatically collapse both
sidebars when viewport width < 768px (md breakpoint).

**Changes:**
- Detect mobile viewport on component mount
- Auto-collapse left and right sidebars if on mobile device
- Track window resize for responsive behavior
- Use ref to ensure auto-collapse only happens once on mount

This ensures mobile users start with a clean, full-width view
without sidebars obscuring the main chat interface. Users can
still toggle sidebars using hamburger menu buttons as needed.
---
 frontend/components/ChatV2.tsx | 36 ++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/frontend/components/ChatV2.tsx b/frontend/components/ChatV2.tsx
index b84c8f2f..7b1ada79 100644
--- a/frontend/components/ChatV2.tsx
+++ b/frontend/components/ChatV2.tsx
@@ -38,6 +38,42 @@ export function ChatV2() {
   const [scrollButtons, setScrollButtons] = useState({ showTop: false, showBottom: false });
   const isLoadingConversationRef = useRef(false);
   const messageInputRef = useRef<MessageInputRef>(null);
+  const [isMobile, setIsMobile] = useState(false);
+  const hasCheckedMobileRef = useRef(false);
+
+  // Detect mobile screen size and auto-collapse sidebars on mount
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    if (hasCheckedMobileRef.current) return;
+
+    const mobile = window.innerWidth < 768; // md breakpoint
+    setIsMobile(mobile);
+
+    // Auto-collapse both sidebars on initial mount if mobile
+    if (mobile) {
+      if (!chat.sidebarCollapsed) {
+        chat.toggleSidebar();
+      }
+      if (!chat.rightSidebarCollapsed) {
+        chat.toggleRightSidebar();
+      }
+    }
+
+    hasCheckedMobileRef.current = true;
+  }, [chat.sidebarCollapsed, chat.rightSidebarCollapsed, chat.toggleSidebar, chat.toggleRightSidebar]);
+
+  // Track window resize for responsive behavior
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const handleResize = () => {
+      const mobile = window.innerWidth < 768;
+      setIsMobile(mobile);
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
 
   // Simple event handlers
   const handleCopy = useCallback(async (text: string) => {

From 3b3d50d8367e090451f18743fb1ca8baca2aa341 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 23 Nov 2025 07:41:06 +0000
Subject: [PATCH 3/5] fix: make tool dropdown visible and responsive on mobile

Fix tool dropdown visibility issues on mobile devices:

**Tools Dropdown:**
- Change from absolute to fixed positioning on mobile
- Full width on mobile (left-2 right-2) with proper margins
- Position at bottom of screen (bottom-20) to avoid overlap
- Add max-height constraint (60vh) for scrollability on mobile
- Maintain original 420px width and positioning on desktop (sm:)

**Attach Dropdown:**
- Slightly larger width on desktop (sm:w-56) for better touch targets
- Maintain 192px (w-48) on mobile for better fit

The tool dropdown now:
- Displays properly centered on mobile screens
- Doesn't overflow viewport boundaries
- Provides adequate scrolling for long tool lists
- Maintains desktop behavior unchanged
---
 frontend/components/MessageInput.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/components/MessageInput.tsx b/frontend/components/MessageInput.tsx
index ca8b61e5..8bd541f7 100644
--- a/frontend/components/MessageInput.tsx
+++ b/frontend/components/MessageInput.tsx
@@ -418,7 +418,7 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(funct
                     </Tooltip>
                   )}
                   {attachOpen && (
-                    <div className="absolute bottom-full mb-2 left-0 w-48 bg-white dark:bg-neutral-900 border border-slate-200 dark:border-neutral-700 shadow-xl rounded-lg p-2 z-50">
+                    <div className="absolute bottom-full mb-2 left-0 w-48 sm:w-56 bg-white dark:bg-neutral-900 border border-slate-200 dark:border-neutral-700 shadow-xl rounded-lg p-2 z-50">
                       {onImagesChange && (
                         <button
                           type="button"
@@ -563,7 +563,7 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(funct
 
                       {/* Tools dropdown */}
                       {toolsOpen && (
-                        <div className="absolute bottom-full mb-2 right-0 w-[420px] bg-white dark:bg-neutral-900 border border-slate-200 dark:border-neutral-700 shadow-xl rounded-lg z-50 overflow-hidden">
+                        <div className="fixed sm:absolute bottom-20 sm:bottom-full left-2 right-2 sm:left-auto sm:right-0 sm:mb-2 w-auto sm:w-[420px] bg-white dark:bg-neutral-900 border border-slate-200 dark:border-neutral-700 shadow-xl rounded-lg z-50 overflow-hidden max-h-[60vh] sm:max-h-[500px]">
                           {/* Dropdown header */}
                           <div className="flex items-center justify-between p-3 border-b border-slate-100 dark:border-neutral-800">
                             <div className="flex items-center gap-3">

From d92420d7abf73a5cd02a1f3f1ec3086cea5aae5e Mon Sep 17 00:00:00 2001
From: qduc <qduc159@gmail.com>
Date: Sun, 23 Nov 2025 14:47:11 +0700
Subject: [PATCH 4/5] fix lint

---
 frontend/components/ChatHeader.tsx   | 6 +++++-
 frontend/components/ChatV2.tsx       | 7 ++++++-
 frontend/components/MessageInput.tsx | 8 ++++++--
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/frontend/components/ChatHeader.tsx b/frontend/components/ChatHeader.tsx
index cbb937c0..0afdb3e9 100644
--- a/frontend/components/ChatHeader.tsx
+++ b/frontend/components/ChatHeader.tsx
@@ -164,7 +164,11 @@ export function ChatHeader({
             title={`Switch to ${resolvedTheme === 'dark' ? 'light' : 'dark'} theme`}
             type="button"
           >
-            {resolvedTheme === 'dark' ? <Sun className="w-3 h-3 sm:w-4 sm:h-4" /> : <Moon className="w-3 h-3 sm:w-4 sm:h-4" />}
+            {resolvedTheme === 'dark' ? (
+              <Sun className="w-3 h-3 sm:w-4 sm:h-4" />
+            ) : (
+              <Moon className="w-3 h-3 sm:w-4 sm:h-4" />
+            )}
           </button>
           <div className="hidden sm:block">
             <AuthButton onShowLogin={onShowLogin} onShowRegister={onShowRegister} />
diff --git a/frontend/components/ChatV2.tsx b/frontend/components/ChatV2.tsx
index 7b1ada79..0fd544b8 100644
--- a/frontend/components/ChatV2.tsx
+++ b/frontend/components/ChatV2.tsx
@@ -60,7 +60,12 @@ export function ChatV2() {
     }
 
     hasCheckedMobileRef.current = true;
-  }, [chat.sidebarCollapsed, chat.rightSidebarCollapsed, chat.toggleSidebar, chat.toggleRightSidebar]);
+  }, [
+    chat.sidebarCollapsed,
+    chat.rightSidebarCollapsed,
+    chat.toggleSidebar,
+    chat.toggleRightSidebar,
+  ]);
 
   // Track window resize for responsive behavior
   useEffect(() => {
diff --git a/frontend/components/MessageInput.tsx b/frontend/components/MessageInput.tsx
index 8bd541f7..897e13e7 100644
--- a/frontend/components/MessageInput.tsx
+++ b/frontend/components/MessageInput.tsx
@@ -512,7 +512,9 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(funct
                       }`}
                     >
                       <Zap className="w-3 h-3 sm:w-4 sm:h-4" />
-                      <span className="text-xs sm:text-sm font-medium hidden sm:inline">Stream</span>
+                      <span className="text-xs sm:text-sm font-medium hidden sm:inline">
+                        Stream
+                      </span>
                     </button>
                   </Tooltip>
                 </div>
@@ -536,7 +538,9 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(funct
                       }`}
                     >
                       <Globe className="w-3 h-3 sm:w-4 sm:h-4" />
-                      <span className="text-xs sm:text-sm font-medium hidden sm:inline">Search</span>
+                      <span className="text-xs sm:text-sm font-medium hidden sm:inline">
+                        Search
+                      </span>
                     </button>
                   </Tooltip>
 

From 6da0e6ee75ef3f68e4cd64fbfd4127f08b81c23a Mon Sep 17 00:00:00 2001
From: qduc <qduc159@gmail.com>
Date: Sun, 23 Nov 2025 14:50:20 +0700
Subject: [PATCH 5/5] test: updated to be dynamic and tool-agnostic

---
 backend/__tests__/chat_tools.test.js | 43 +++++++++++++++++++++-------
 1 file changed, 33 insertions(+), 10 deletions(-)

diff --git a/backend/__tests__/chat_tools.test.js b/backend/__tests__/chat_tools.test.js
index a16b657e..3cf3cb7c 100644
--- a/backend/__tests__/chat_tools.test.js
+++ b/backend/__tests__/chat_tools.test.js
@@ -60,18 +60,41 @@ describe('GET /v1/tools', () => {
         throw new Error(`Expected status 200 but received ${res.status}. Body: ${errorBody}`);
       }
       const body = await res.json();
+
+      // Verify response structure
       assert.ok(Array.isArray(body.tools), 'tools array present');
       assert.ok(Array.isArray(body.available_tools), 'available_tools array present');
-  // Should list all registered tools
-      assert.ok(body.available_tools.includes('get_time'));
-      assert.ok(body.available_tools.includes('web_search'));
-  assert.ok(body.available_tools.includes('web_search_exa'));
-      // Tool specs should include function definitions
-      const names = body.tools.map(t => t?.function?.name).filter(Boolean);
-      assert.ok(names.includes('get_time'));
-      assert.ok(names.includes('web_search'));
-  assert.ok(names.includes('web_search_exa'));
+
+      // Verify that at least some tools are registered
+      assert.ok(body.available_tools.length > 0, 'at least one tool should be available');
+      assert.ok(body.tools.length > 0, 'at least one tool spec should be present');
+
+      // Verify both arrays have the same length
+      assert.equal(
+        body.tools.length,
+        body.available_tools.length,
+        'tools and available_tools should have matching counts'
+      );
+
+      // Verify tool specs have proper structure (OpenAI format)
+      for (const tool of body.tools) {
+        assert.ok(tool.type === 'function', 'tool should have type "function"');
+        assert.ok(tool.function, 'tool should have function property');
+        assert.ok(typeof tool.function.name === 'string', 'tool function should have name');
+        assert.ok(typeof tool.function.description === 'string', 'tool function should have description');
+        assert.ok(tool.function.parameters, 'tool function should have parameters');
+      }
+
+      // Verify consistency: all tool names in specs should be in available_tools
+      const specNames = body.tools.map((t) => t?.function?.name).filter(Boolean);
+      for (const name of specNames) {
+        assert.ok(body.available_tools.includes(name), `tool spec name "${name}" should be in available_tools`);
+      }
+
+      // Verify all available_tools have corresponding specs
+      for (const toolName of body.available_tools) {
+        assert.ok(specNames.includes(toolName), `available tool "${toolName}" should have a corresponding spec`);
+      }
     });
   });
 });
-