diff --git a/app/repos/new/page.tsx b/app/repos/new/page.tsx
index 2e4800b6..dc6e4928 100644
--- a/app/repos/new/page.tsx
+++ b/app/repos/new/page.tsx
@@ -6,18 +6,13 @@ import { Label } from '@/components/ui/label'
 import { Textarea } from '@/components/ui/textarea'
 import { Switch } from '@/components/ui/switch'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
-import { RefreshCw } from 'lucide-react'
+import { RefreshCw, File } from 'lucide-react'
 import { useState, useEffect } from 'react'
 import { toast } from 'sonner'
 import { useRouter, useSearchParams } from 'next/navigation'
-import { PageHeader } from '@/components/page-header'
-import { useTasks } from '@/components/app-layout'
-import { User } from '@/components/auth/user'
-import { GitHubStarsButton } from '@/components/github-stars-button'
-import { VERCEL_DEPLOY_URL } from '@/lib/constants'
+import { SharedHeader } from '@/components/shared-header'
 import { useAtomValue } from 'jotai'
 import { sessionAtom } from '@/lib/atoms/session'
-import { File } from 'lucide-react'
 
 // Template configuration
 const REPO_TEMPLATES = [
@@ -73,7 +68,6 @@ export default function NewRepoPage() {
   const router = useRouter()
   const searchParams = useSearchParams()
   const ownerParam = searchParams.get('owner') || ''
-  const { toggleSidebar } = useTasks()
   const session = useAtomValue(sessionAtom)
 
   const [isCreatingRepo, setIsCreatingRepo] = useState(false)
@@ -177,37 +171,7 @@ export default function NewRepoPage() {
   return (
     <div className="flex-1 bg-background">
       <div className="p-3">
-        <PageHeader
-          showMobileMenu={true}
-          onToggleMobileMenu={toggleSidebar}
-          actions={
-            <div className="flex items-center gap-2 h-8">
-              <GitHubStarsButton initialStars={1200} />
-              {/* Deploy to Vercel Button */}
-              <Button
-                asChild
-                variant="outline"
-                size="sm"
-                className="h-8 sm:px-3 px-0 sm:w-auto w-8 bg-black text-white border-black hover:bg-black/90 dark:bg-white dark:text-black dark:border-white dark:hover:bg-white/90"
-              >
-                <a
-                  href={VERCEL_DEPLOY_URL}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="flex items-center gap-1.5"
-                >
-                  <svg viewBox="0 0 76 65" className="h-3 w-3" fill="currentColor">
-                    <path d="M37.5274 0L75.0548 65H0L37.5274 0Z" />
-                  </svg>
-                  <span className="hidden sm:inline">Deploy Your Own</span>
-                </a>
-              </Button>
-
-              {/* User Authentication */}
-              <User user={session.user} authProvider={session.authProvider} />
-            </div>
-          }
-        />
+        <SharedHeader />
       </div>
 
       <div className="px-3 pb-3">
diff --git a/app/tasks/[taskId]/loading.tsx b/app/tasks/[taskId]/loading.tsx
index dc67fc7b..0d31bb47 100644
--- a/app/tasks/[taskId]/loading.tsx
+++ b/app/tasks/[taskId]/loading.tsx
@@ -1,42 +1,13 @@
 'use client'
 
-import { PageHeader } from '@/components/page-header'
-import { useTasks } from '@/components/app-layout'
-import { Button } from '@/components/ui/button'
+import { SharedHeader } from '@/components/shared-header'
 import { Loader2 } from 'lucide-react'
-import { VERCEL_DEPLOY_URL } from '@/lib/constants'
-import { GitHubStarsButton } from '@/components/github-stars-button'
 
 export default function TaskLoading() {
-  const { toggleSidebar } = useTasks()
-
-  // Placeholder actions for loading state - no user avatar to prevent flash
-  const loadingActions = (
-    <div className="flex items-center gap-2 h-8">
-      <GitHubStarsButton />
-      {/* Deploy to Vercel Button */}
-      <Button
-        asChild
-        variant="outline"
-        size="sm"
-        className="h-8 sm:px-3 px-0 sm:w-auto w-8 bg-black text-white border-black hover:bg-black/90 dark:bg-white dark:text-black dark:border-white dark:hover:bg-white/90"
-      >
-        <a href={VERCEL_DEPLOY_URL} target="_blank" rel="noopener noreferrer" className="flex items-center gap-1.5">
-          <svg viewBox="0 0 76 65" className="h-3 w-3" fill="currentColor">
-            <path d="M37.5274 0L75.0548 65H0L37.5274 0Z" />
-          </svg>
-          <span className="hidden sm:inline">Deploy Your Own</span>
-        </a>
-      </Button>
-      {/* Empty spacer to reserve space for user avatar */}
-      <div className="w-8" />
-    </div>
-  )
-
   return (
     <div className="flex-1 bg-background flex flex-col">
       <div className="p-3">
-        <PageHeader showMobileMenu={true} onToggleMobileMenu={toggleSidebar} actions={loadingActions} />
+        <SharedHeader />
       </div>
       <div className="flex-1 flex items-center justify-center">
         <div className="text-center">
diff --git a/components/file-browser.tsx b/components/file-browser.tsx
index 8b0df46a..3603cf98 100644
--- a/components/file-browser.tsx
+++ b/components/file-browser.tsx
@@ -1347,9 +1347,9 @@ export function FileBrowser({
   return (
     <div className="flex flex-col h-full">
       {!hideHeader && (
-        <div>
+        <div className="border-b">
           {/* Main Navigation Row */}
-          <div className="py-2 flex items-center justify-between h-[46px]">
+          <div className="py-2 px-3 flex items-center justify-between h-[46px]">
             {/* Changes / Files Navigation */}
             <div className="flex items-center gap-1">
               <button
@@ -1443,7 +1443,7 @@ export function FileBrowser({
             onOpenChange={(open) => !open && setContextMenuFile(null)}
           >
             <div
-              className={`py-2 min-h-full outline-none rounded-sm ${dropTarget === '__root__' ? 'bg-blue-500/10' : ''}`}
+              className={`py-2 px-1 min-h-full outline-none ${dropTarget === '__root__' ? 'bg-blue-500/10' : ''}`}
               onContextMenu={(e) => {
                 if ((viewMode === 'local' || viewMode === 'all-local') && e.target === e.currentTarget) {
                   handleContextMenu(e, '__root__')
diff --git a/components/home-page-content.tsx b/components/home-page-content.tsx
index 07f87cc9..6e51a569 100644
--- a/components/home-page-content.tsx
+++ b/components/home-page-content.tsx
@@ -2,7 +2,8 @@
 
 import { useState, useEffect } from 'react'
 import { TaskForm } from '@/components/task-form'
-import { HomePageHeader } from '@/components/home-page-header'
+import { SharedHeader } from '@/components/shared-header'
+import { RepoSelector } from '@/components/repo-selector'
 import { toast } from 'sonner'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { useTasks } from '@/components/app-layout'
@@ -10,6 +11,14 @@ import { setSelectedOwner, setSelectedRepo } from '@/lib/utils/cookies'
 import type { Session } from '@/lib/session/types'
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+} from '@/components/ui/dropdown-menu'
+import { MoreHorizontal, RefreshCw, Unlink, Settings, Plus, ExternalLink } from 'lucide-react'
 import { redirectToSignIn } from '@/lib/session/redirect-to-sign-in'
 import { GitHubIcon } from '@/components/icons/github-icon'
 import { getEnabledAuthProviders } from '@/lib/auth/providers'
@@ -17,6 +26,10 @@ import { useSetAtom, useAtom, useAtomValue } from 'jotai'
 import { taskPromptAtom } from '@/lib/atoms/task'
 import { HomePageMobileFooter } from '@/components/home-page-mobile-footer'
 import { multiRepoModeAtom, selectedReposAtom } from '@/lib/atoms/multi-repo'
+import { sessionAtom } from '@/lib/atoms/session'
+import { githubConnectionAtom, githubConnectionInitializedAtom } from '@/lib/atoms/github-connection'
+import { OpenRepoUrlDialog } from '@/components/open-repo-url-dialog'
+import { MultiRepoDialog } from '@/components/multi-repo-dialog'
 
 interface HomePageContentProps {
   initialSelectedOwner?: string
@@ -47,6 +60,9 @@ export function HomePageContent({
   const [showSignInDialog, setShowSignInDialog] = useState(false)
   const [loadingVercel, setLoadingVercel] = useState(false)
   const [loadingGitHub, setLoadingGitHub] = useState(false)
+  const [isRefreshing, setIsRefreshing] = useState(false)
+  const [showOpenRepoDialog, setShowOpenRepoDialog] = useState(false)
+  const [showMultiRepoDialog, setShowMultiRepoDialog] = useState(false)
   const router = useRouter()
   const searchParams = useSearchParams()
   const { refreshTasks, addTaskOptimistically } = useTasks()
@@ -56,6 +72,13 @@ export function HomePageContent({
   const multiRepoMode = useAtomValue(multiRepoModeAtom)
   const [selectedRepos, setSelectedRepos] = useAtom(selectedReposAtom)
 
+  // GitHub connection state
+  const session = useAtomValue(sessionAtom)
+  const githubConnection = useAtomValue(githubConnectionAtom)
+  const githubConnectionInitialized = useAtomValue(githubConnectionInitializedAtom)
+  const setGitHubConnection = useSetAtom(githubConnectionAtom)
+  const isGitHubAuthUser = session.authProvider === 'github'
+
   // Check which auth providers are enabled
   const { github: hasGitHub, vercel: hasVercel } = getEnabledAuthProviders()
 
@@ -123,6 +146,186 @@ export function HomePageContent({
     setSelectedRepo(repo)
   }
 
+  const handleRefreshOwners = () => {
+    setIsRefreshing(true)
+    localStorage.removeItem('github-owners')
+    toast.success('Refreshing owners...')
+    window.location.reload()
+  }
+
+  const handleRefreshRepos = () => {
+    setIsRefreshing(true)
+    if (selectedOwner) {
+      localStorage.removeItem(`github-repos-${selectedOwner}`)
+      toast.success('Refreshing repositories...')
+    } else {
+      Object.keys(localStorage).forEach((key) => {
+        if (key.startsWith('github-repos-')) {
+          localStorage.removeItem(key)
+        }
+      })
+      toast.success('Refreshing all repositories...')
+    }
+    window.location.reload()
+  }
+
+  const handleDisconnectGitHub = async () => {
+    try {
+      const response = await fetch('/api/auth/github/disconnect', {
+        method: 'POST',
+        credentials: 'include',
+      })
+
+      if (response.ok) {
+        toast.success('GitHub disconnected')
+        localStorage.removeItem('github-owners')
+        Object.keys(localStorage).forEach((key) => {
+          if (key.startsWith('github-repos-')) {
+            localStorage.removeItem(key)
+          }
+        })
+        handleOwnerChange('')
+        handleRepoChange('')
+        setGitHubConnection({ connected: false })
+        router.refresh()
+      } else {
+        const error = await response.json()
+        console.error('Failed to disconnect GitHub:', error)
+        toast.error(error.error || 'Failed to disconnect GitHub')
+      }
+    } catch (error) {
+      console.error('Failed to disconnect GitHub:', error)
+      toast.error('Failed to disconnect GitHub')
+    }
+  }
+
+  const handleNewRepo = () => {
+    const url = selectedOwner ? `/repos/new?owner=${selectedOwner}` : '/repos/new'
+    router.push(url)
+  }
+
+  const handleConnectGitHub = () => {
+    window.location.href = '/api/auth/github/signin'
+  }
+
+  const handleReconfigureGitHub = () => {
+    const clientId = process.env.NEXT_PUBLIC_GITHUB_CLIENT_ID
+    if (clientId) {
+      window.open(`https://github.com/settings/connections/applications/${clientId}`, '_blank')
+    } else {
+      window.location.href = '/api/auth/github/signin'
+    }
+  }
+
+  const handleOpenRepoUrl = async (repoUrl: string) => {
+    try {
+      if (!user) {
+        toast.error('Sign in required', {
+          description: 'Please sign in to create tasks with custom repository URLs.',
+        })
+        return
+      }
+
+      const taskData = {
+        prompt: 'Work on this repository',
+        repoUrl: repoUrl,
+        selectedAgent: localStorage.getItem('last-selected-agent') || 'claude',
+        selectedModel: localStorage.getItem('last-selected-model-claude') || 'claude-sonnet-4-5',
+        installDependencies: true,
+        maxDuration: 300,
+        keepAlive: false,
+      }
+
+      const { id } = addTaskOptimistically(taskData)
+      router.push(`/tasks/${id}`)
+
+      const response = await fetch('/api/tasks', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ ...taskData, id }),
+      })
+
+      if (response.ok) {
+        toast.success('Task created successfully!')
+      } else {
+        const error = await response.json()
+        toast.error(error.message || error.error || 'Failed to create task')
+      }
+    } catch (error) {
+      console.error('Error creating task:', error)
+      toast.error('Failed to create task')
+    }
+  }
+
+  // Build leftActions for the header
+  const headerLeftActions = (
+    <div className="flex items-center gap-1 sm:gap-2 h-8 min-w-0 flex-1">
+      {!githubConnectionInitialized ? null : githubConnection.connected || isGitHubAuthUser ? (
+        <>
+          <RepoSelector
+            selectedOwner={selectedOwner}
+            selectedRepo={selectedRepo}
+            onOwnerChange={handleOwnerChange}
+            onRepoChange={handleRepoChange}
+            size="sm"
+            onMultiRepoClick={() => setShowMultiRepoDialog(true)}
+          />
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="sm" className="h-8 w-8 p-0 flex-shrink-0" title="More options">
+                <MoreHorizontal className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start">
+              <DropdownMenuItem onClick={handleNewRepo}>
+                <Plus className="h-4 w-4 mr-2" />
+                New Repo
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => setShowOpenRepoDialog(true)}>
+                <ExternalLink className="h-4 w-4 mr-2" />
+                Open Repo URL
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem onClick={handleRefreshOwners} disabled={isRefreshing}>
+                <RefreshCw className={`h-4 w-4 mr-2 ${isRefreshing ? 'animate-spin' : ''}`} />
+                Refresh Owners
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={handleRefreshRepos} disabled={isRefreshing}>
+                <RefreshCw className={`h-4 w-4 mr-2 ${isRefreshing ? 'animate-spin' : ''}`} />
+                Refresh Repos
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={handleReconfigureGitHub}>
+                <Settings className="h-4 w-4 mr-2" />
+                Manage Access
+              </DropdownMenuItem>
+              {!isGitHubAuthUser && (
+                <DropdownMenuItem onClick={handleDisconnectGitHub}>
+                  <Unlink className="h-4 w-4 mr-2" />
+                  Disconnect GitHub
+                </DropdownMenuItem>
+              )}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </>
+      ) : user ? (
+        <Button onClick={handleConnectGitHub} variant="outline" size="sm" className="h-8 flex-shrink-0">
+          <GitHubIcon className="h-4 w-4 mr-2" />
+          Connect GitHub
+        </Button>
+      ) : selectedOwner || selectedRepo ? (
+        <RepoSelector
+          selectedOwner={selectedOwner}
+          selectedRepo={selectedRepo}
+          onOwnerChange={handleOwnerChange}
+          onRepoChange={handleRepoChange}
+          size="sm"
+        />
+      ) : null}
+    </div>
+  )
+
   const handleTaskSubmit = async (data: {
     prompt: string
     repoUrl: string
@@ -352,14 +555,7 @@ export function HomePageContent({
   return (
     <div className="flex-1 bg-background flex flex-col">
       <div className="p-3">
-        <HomePageHeader
-          selectedOwner={selectedOwner}
-          selectedRepo={selectedRepo}
-          onOwnerChange={handleOwnerChange}
-          onRepoChange={handleRepoChange}
-          user={user}
-          initialStars={initialStars}
-        />
+        <SharedHeader leftActions={headerLeftActions} initialStars={initialStars} />
       </div>
 
       <div className="flex-1 flex items-center justify-center px-4 pb-20 md:pb-4">
@@ -379,6 +575,10 @@ export function HomePageContent({
       {/* Mobile Footer with Stars and Deploy Button - Show when logged in OR when owner/repo are selected */}
       {(user || selectedOwner || selectedRepo) && <HomePageMobileFooter initialStars={initialStars} />}
 
+      {/* Dialogs */}
+      <OpenRepoUrlDialog open={showOpenRepoDialog} onOpenChange={setShowOpenRepoDialog} onSubmit={handleOpenRepoUrl} />
+      <MultiRepoDialog open={showMultiRepoDialog} onOpenChange={setShowMultiRepoDialog} />
+
       {/* Sign In Dialog */}
       <Dialog open={showSignInDialog} onOpenChange={setShowSignInDialog}>
         <DialogContent className="sm:max-w-md">
diff --git a/components/home-page-header.tsx b/components/home-page-header.tsx
deleted file mode 100644
index b6529d80..00000000
--- a/components/home-page-header.tsx
+++ /dev/null
@@ -1,324 +0,0 @@
-'use client'
-
-import { PageHeader } from '@/components/page-header'
-import { RepoSelector } from '@/components/repo-selector'
-import { useTasks } from '@/components/app-layout'
-import { Button } from '@/components/ui/button'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-  DropdownMenuSeparator,
-} from '@/components/ui/dropdown-menu'
-import { MoreHorizontal, RefreshCw, Unlink, Settings, Plus, ExternalLink } from 'lucide-react'
-import { useState } from 'react'
-import { VERCEL_DEPLOY_URL } from '@/lib/constants'
-import { User } from '@/components/auth/user'
-import type { Session } from '@/lib/session/types'
-import { toast } from 'sonner'
-import { useRouter } from 'next/navigation'
-import { useSetAtom, useAtomValue } from 'jotai'
-import { sessionAtom } from '@/lib/atoms/session'
-import { githubConnectionAtom, githubConnectionInitializedAtom } from '@/lib/atoms/github-connection'
-import { GitHubIcon } from '@/components/icons/github-icon'
-import { GitHubStarsButton } from '@/components/github-stars-button'
-import { OpenRepoUrlDialog } from '@/components/open-repo-url-dialog'
-import { MultiRepoDialog } from '@/components/multi-repo-dialog'
-import { useTasks as useTasksContext } from '@/components/app-layout'
-
-interface HomePageHeaderProps {
-  selectedOwner: string
-  selectedRepo: string
-  onOwnerChange: (owner: string) => void
-  onRepoChange: (repo: string) => void
-  user?: Session['user'] | null
-  initialStars?: number
-}
-
-export function HomePageHeader({
-  selectedOwner,
-  selectedRepo,
-  onOwnerChange,
-  onRepoChange,
-  user,
-  initialStars = 1200,
-}: HomePageHeaderProps) {
-  const { toggleSidebar } = useTasks()
-  const routerNav = useRouter()
-  const githubConnection = useAtomValue(githubConnectionAtom)
-  const githubConnectionInitialized = useAtomValue(githubConnectionInitializedAtom)
-  const setGitHubConnection = useSetAtom(githubConnectionAtom)
-  const [isRefreshing, setIsRefreshing] = useState(false)
-  const [showOpenRepoDialog, setShowOpenRepoDialog] = useState(false)
-  const [showMultiRepoDialog, setShowMultiRepoDialog] = useState(false)
-  const { addTaskOptimistically } = useTasksContext()
-
-  const handleRefreshOwners = async () => {
-    setIsRefreshing(true)
-    try {
-      // Clear only owners cache
-      localStorage.removeItem('github-owners')
-      toast.success('Refreshing owners...')
-
-      // Reload the page to fetch fresh data
-      window.location.reload()
-    } catch (error) {
-      console.error('Error refreshing owners:', error)
-      toast.error('Failed to refresh owners')
-    } finally {
-      setIsRefreshing(false)
-    }
-  }
-
-  const handleRefreshRepos = async () => {
-    setIsRefreshing(true)
-    try {
-      // Clear repos cache for current owner
-      if (selectedOwner) {
-        localStorage.removeItem(`github-repos-${selectedOwner}`)
-        toast.success('Refreshing repositories...')
-
-        // Reload the page to fetch fresh data
-        window.location.reload()
-      } else {
-        // Clear all repos if no owner selected
-        Object.keys(localStorage).forEach((key) => {
-          if (key.startsWith('github-repos-')) {
-            localStorage.removeItem(key)
-          }
-        })
-        toast.success('Refreshing all repositories...')
-        window.location.reload()
-      }
-    } catch (error) {
-      console.error('Error refreshing repositories:', error)
-      toast.error('Failed to refresh repositories')
-    } finally {
-      setIsRefreshing(false)
-    }
-  }
-
-  const handleDisconnectGitHub = async () => {
-    try {
-      const response = await fetch('/api/auth/github/disconnect', {
-        method: 'POST',
-        credentials: 'include', // Ensure cookies are sent
-      })
-
-      if (response.ok) {
-        toast.success('GitHub disconnected')
-
-        // Clear GitHub data from localStorage
-        localStorage.removeItem('github-owners')
-        Object.keys(localStorage).forEach((key) => {
-          if (key.startsWith('github-repos-')) {
-            localStorage.removeItem(key)
-          }
-        })
-
-        // Clear selected owner/repo
-        onOwnerChange('')
-        onRepoChange('')
-
-        // Update connection state
-        setGitHubConnection({ connected: false })
-
-        // Refresh the page
-        routerNav.refresh()
-      } else {
-        const error = await response.json()
-        console.error('Failed to disconnect GitHub:', error)
-        toast.error(error.error || 'Failed to disconnect GitHub')
-      }
-    } catch (error) {
-      console.error('Failed to disconnect GitHub:', error)
-      toast.error('Failed to disconnect GitHub')
-    }
-  }
-
-  const handleNewRepo = () => {
-    // Navigate to the new repo page with owner as query param
-    const url = selectedOwner ? `/repos/new?owner=${selectedOwner}` : '/repos/new'
-    routerNav.push(url)
-  }
-
-  const handleOpenRepoUrl = async (repoUrl: string) => {
-    try {
-      if (!user) {
-        toast.error('Sign in required', {
-          description: 'Please sign in to create tasks with custom repository URLs.',
-        })
-        return
-      }
-
-      // Create a task with the provided repo URL
-      // Use default settings for the task
-      const taskData = {
-        prompt: 'Work on this repository',
-        repoUrl: repoUrl,
-        selectedAgent: localStorage.getItem('last-selected-agent') || 'claude',
-        selectedModel: localStorage.getItem('last-selected-model-claude') || 'claude-sonnet-4-5',
-        installDependencies: true,
-        maxDuration: 300,
-        keepAlive: false,
-      }
-
-      // Add task optimistically to sidebar immediately
-      const { id } = addTaskOptimistically(taskData)
-
-      // Navigate to the new task page immediately
-      routerNav.push(`/tasks/${id}`)
-
-      // Create the task on the server
-      const response = await fetch('/api/tasks', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({ ...taskData, id }),
-      })
-
-      if (response.ok) {
-        toast.success('Task created successfully!')
-      } else {
-        const error = await response.json()
-        toast.error(error.message || error.error || 'Failed to create task')
-      }
-    } catch (error) {
-      console.error('Error creating task:', error)
-      toast.error('Failed to create task')
-    }
-  }
-
-  const actions = (
-    <div className="flex items-center gap-2 flex-shrink-0">
-      {/* GitHub Stars Button - Show on mobile only when logged out (unless owner/repo selected), always show on desktop */}
-      <div className={user ? 'hidden md:block' : selectedOwner || selectedRepo ? 'hidden' : 'block md:block'}>
-        <GitHubStarsButton initialStars={initialStars} />
-      </div>
-
-      {/* Deploy to Vercel Button - Show on mobile only when logged out (unless owner/repo selected), always show on desktop */}
-      <div className={user ? 'hidden md:block' : selectedOwner || selectedRepo ? 'hidden' : 'block md:block'}>
-        <Button
-          asChild
-          variant="outline"
-          size="sm"
-          className="h-8 px-3 bg-black text-white border-black hover:bg-black/90 dark:bg-white dark:text-black dark:border-white dark:hover:bg-white/90"
-        >
-          <a href={VERCEL_DEPLOY_URL} target="_blank" rel="noopener noreferrer" className="flex items-center gap-1.5">
-            <svg viewBox="0 0 76 65" className="h-3 w-3" fill="currentColor">
-              <path d="M37.5274 0L75.0548 65H0L37.5274 0Z" />
-            </svg>
-            <span>Deploy Your Own</span>
-          </a>
-        </Button>
-      </div>
-
-      {/* User Authentication */}
-      <User user={user} />
-    </div>
-  )
-
-  const handleConnectGitHub = () => {
-    window.location.href = '/api/auth/github/signin'
-  }
-
-  const handleReconfigureGitHub = () => {
-    // Link to GitHub's OAuth app settings page where users can reconfigure access
-    const clientId = process.env.NEXT_PUBLIC_GITHUB_CLIENT_ID
-    if (clientId) {
-      window.open(`https://github.com/settings/connections/applications/${clientId}`, '_blank')
-    } else {
-      // Fallback to OAuth flow if client ID is not available
-      window.location.href = '/api/auth/github/signin'
-    }
-  }
-
-  // Get session to check auth provider
-  const session = useAtomValue(sessionAtom)
-  // Check if user is authenticated with GitHub (not just connected)
-  const isGitHubAuthUser = session.authProvider === 'github'
-
-  // Always render leftActions container to prevent layout shift
-  const leftActions = (
-    <div className="flex items-center gap-1 sm:gap-2 h-8 min-w-0 flex-1">
-      {!githubConnectionInitialized ? null : githubConnection.connected || isGitHubAuthUser ? ( // Show nothing while loading to prevent flash of "Connect GitHub" button
-        <>
-          <RepoSelector
-            selectedOwner={selectedOwner}
-            selectedRepo={selectedRepo}
-            onOwnerChange={onOwnerChange}
-            onRepoChange={onRepoChange}
-            size="sm"
-            onMultiRepoClick={() => setShowMultiRepoDialog(true)}
-          />
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="ghost" size="sm" className="h-8 w-8 p-0 flex-shrink-0" title="More options">
-                <MoreHorizontal className="h-4 w-4" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="start">
-              <DropdownMenuItem onClick={handleNewRepo}>
-                <Plus className="h-4 w-4 mr-2" />
-                New Repo
-              </DropdownMenuItem>
-              <DropdownMenuItem onClick={() => setShowOpenRepoDialog(true)}>
-                <ExternalLink className="h-4 w-4 mr-2" />
-                Open Repo URL
-              </DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem onClick={handleRefreshOwners} disabled={isRefreshing}>
-                <RefreshCw className={`h-4 w-4 mr-2 ${isRefreshing ? 'animate-spin' : ''}`} />
-                Refresh Owners
-              </DropdownMenuItem>
-              <DropdownMenuItem onClick={handleRefreshRepos} disabled={isRefreshing}>
-                <RefreshCw className={`h-4 w-4 mr-2 ${isRefreshing ? 'animate-spin' : ''}`} />
-                Refresh Repos
-              </DropdownMenuItem>
-              <DropdownMenuItem onClick={handleReconfigureGitHub}>
-                <Settings className="h-4 w-4 mr-2" />
-                Manage Access
-              </DropdownMenuItem>
-              {/* Only show Disconnect for Vercel users who connected GitHub, not for GitHub-authenticated users */}
-              {!isGitHubAuthUser && (
-                <DropdownMenuItem onClick={handleDisconnectGitHub}>
-                  <Unlink className="h-4 w-4 mr-2" />
-                  Disconnect GitHub
-                </DropdownMenuItem>
-              )}
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </>
-      ) : user ? (
-        <Button onClick={handleConnectGitHub} variant="outline" size="sm" className="h-8 flex-shrink-0">
-          <GitHubIcon className="h-4 w-4 mr-2" />
-          Connect GitHub
-        </Button>
-      ) : selectedOwner || selectedRepo ? (
-        // Show RepoSelector when logged out if owner/repo are provided via URL
-        <RepoSelector
-          selectedOwner={selectedOwner}
-          selectedRepo={selectedRepo}
-          onOwnerChange={onOwnerChange}
-          onRepoChange={onRepoChange}
-          size="sm"
-        />
-      ) : null}
-    </div>
-  )
-
-  return (
-    <>
-      <PageHeader
-        showMobileMenu={true}
-        onToggleMobileMenu={toggleSidebar}
-        actions={actions}
-        leftActions={leftActions}
-      />
-      <OpenRepoUrlDialog open={showOpenRepoDialog} onOpenChange={setShowOpenRepoDialog} onSubmit={handleOpenRepoUrl} />
-      <MultiRepoDialog open={showMultiRepoDialog} onOpenChange={setShowMultiRepoDialog} />
-    </>
-  )
-}
diff --git a/components/page-header.tsx b/components/page-header.tsx
deleted file mode 100644
index 249539cb..00000000
--- a/components/page-header.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-'use client'
-
-import { Button } from '@/components/ui/button'
-import { Menu } from 'lucide-react'
-
-interface PageHeaderProps {
-  title?: string
-  showMobileMenu?: boolean
-  onToggleMobileMenu?: () => void
-  actions?: React.ReactNode
-  leftActions?: React.ReactNode
-  showPlatformName?: boolean
-}
-
-export function PageHeader({
-  title,
-  showMobileMenu = false,
-  onToggleMobileMenu,
-  actions,
-  leftActions,
-  showPlatformName = false,
-}: PageHeaderProps) {
-  return (
-    <div className="px-0 pt-0.5 md:pt-3 pb-1.5 md:pb-4 overflow-visible">
-      <div className="flex items-center justify-between gap-2 h-8 min-w-0">
-        {/* Left side - Menu Button and Left Actions */}
-        <div className="flex items-center gap-1 sm:gap-2 min-w-0 flex-1">
-          {showMobileMenu && (
-            <Button onClick={onToggleMobileMenu} variant="ghost" size="sm" className="h-8 w-8 p-0 flex-shrink-0">
-              <Menu className="h-4 w-4" />
-            </Button>
-          )}
-          {leftActions}
-        </div>
-
-        {/* Actions - Right side */}
-        {actions && <div className="flex items-center flex-shrink-0">{actions}</div>}
-      </div>
-    </div>
-  )
-}
diff --git a/components/repo-layout.tsx b/components/repo-layout.tsx
index 03d1de56..b8c1e18d 100644
--- a/components/repo-layout.tsx
+++ b/components/repo-layout.tsx
@@ -2,13 +2,9 @@
 
 import { usePathname, useRouter } from 'next/navigation'
 import Link from 'next/link'
-import { PageHeader } from '@/components/page-header'
+import { SharedHeader } from '@/components/shared-header'
 import { Button } from '@/components/ui/button'
-import { useTasks } from '@/components/app-layout'
-import { VERCEL_DEPLOY_URL } from '@/lib/constants'
-import { User } from '@/components/auth/user'
 import type { Session } from '@/lib/session/types'
-import { GitHubStarsButton } from '@/components/github-stars-button'
 import { cn } from '@/lib/utils'
 import { setSelectedOwner, setSelectedRepo } from '@/lib/utils/cookies'
 import { Plus } from 'lucide-react'
@@ -23,7 +19,6 @@ interface RepoLayoutProps {
 }
 
 export function RepoLayout({ owner, repo, user, authProvider, initialStars = 1200, children }: RepoLayoutProps) {
-  const { toggleSidebar } = useTasks()
   const pathname = usePathname()
   const router = useRouter()
 
@@ -41,47 +36,18 @@ export function RepoLayout({ owner, repo, user, authProvider, initialStars = 120
     router.push('/')
   }
 
+  const headerLeftActions = (
+    <div className="flex items-center gap-2 min-w-0">
+      <h1 className="text-lg font-semibold truncate">
+        {owner}/{repo}
+      </h1>
+    </div>
+  )
+
   return (
     <div className="flex-1 bg-background relative flex flex-col h-full overflow-hidden">
       <div className="flex-shrink-0 p-3">
-        <PageHeader
-          showMobileMenu={true}
-          onToggleMobileMenu={toggleSidebar}
-          leftActions={
-            <div className="flex items-center gap-2 min-w-0">
-              <h1 className="text-lg font-semibold truncate">
-                {owner}/{repo}
-              </h1>
-            </div>
-          }
-          actions={
-            <div className="flex items-center gap-2 h-8">
-              <GitHubStarsButton initialStars={initialStars} />
-              {/* Deploy to Vercel Button */}
-              <Button
-                asChild
-                variant="outline"
-                size="sm"
-                className="h-8 sm:px-3 px-0 sm:w-auto w-8 bg-black text-white border-black hover:bg-black/90 dark:bg-white dark:text-black dark:border-white dark:hover:bg-white/90"
-              >
-                <a
-                  href={VERCEL_DEPLOY_URL}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="flex items-center gap-1.5"
-                >
-                  <svg viewBox="0 0 76 65" className="h-3 w-3" fill="currentColor">
-                    <path d="M37.5274 0L75.0548 65H0L37.5274 0Z" />
-                  </svg>
-                  <span className="hidden sm:inline">Deploy Your Own</span>
-                </a>
-              </Button>
-
-              {/* User Authentication */}
-              <User user={user} authProvider={authProvider} />
-            </div>
-          }
-        />
+        <SharedHeader leftActions={headerLeftActions} initialStars={initialStars} />
       </div>
 
       {/* Main content with tabs */}
diff --git a/components/repo-page-client.tsx b/components/repo-page-client.tsx
index 463969be..a47fd2cc 100644
--- a/components/repo-page-client.tsx
+++ b/components/repo-page-client.tsx
@@ -1,13 +1,8 @@
 'use client'
 
 import { useState } from 'react'
-import { PageHeader } from '@/components/page-header'
-import { Button } from '@/components/ui/button'
-import { useTasks } from '@/components/app-layout'
-import { VERCEL_DEPLOY_URL } from '@/lib/constants'
-import { User } from '@/components/auth/user'
+import { SharedHeader } from '@/components/shared-header'
 import type { Session } from '@/lib/session/types'
-import { GitHubStarsButton } from '@/components/github-stars-button'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { RepoCommits } from '@/components/repo-commits'
 import { RepoPullRequests } from '@/components/repo-pull-requests'
@@ -22,50 +17,20 @@ interface RepoPageClientProps {
 }
 
 export function RepoPageClient({ owner, repo, user, authProvider, initialStars = 1200 }: RepoPageClientProps) {
-  const { toggleSidebar } = useTasks()
   const [activeTab, setActiveTab] = useState('commits')
 
+  const headerLeftActions = (
+    <div className="flex items-center gap-2 min-w-0">
+      <h1 className="text-lg font-semibold truncate">
+        {owner}/{repo}
+      </h1>
+    </div>
+  )
+
   return (
     <div className="flex-1 bg-background relative flex flex-col h-full overflow-hidden">
       <div className="flex-shrink-0 p-3">
-        <PageHeader
-          showMobileMenu={true}
-          onToggleMobileMenu={toggleSidebar}
-          leftActions={
-            <div className="flex items-center gap-2 min-w-0">
-              <h1 className="text-lg font-semibold truncate">
-                {owner}/{repo}
-              </h1>
-            </div>
-          }
-          actions={
-            <div className="flex items-center gap-2 h-8">
-              <GitHubStarsButton initialStars={initialStars} />
-              {/* Deploy to Vercel Button */}
-              <Button
-                asChild
-                variant="outline"
-                size="sm"
-                className="h-8 sm:px-3 px-0 sm:w-auto w-8 bg-black text-white border-black hover:bg-black/90 dark:bg-white dark:text-black dark:border-white dark:hover:bg-white/90"
-              >
-                <a
-                  href={VERCEL_DEPLOY_URL}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="flex items-center gap-1.5"
-                >
-                  <svg viewBox="0 0 76 65" className="h-3 w-3" fill="currentColor">
-                    <path d="M37.5274 0L75.0548 65H0L37.5274 0Z" />
-                  </svg>
-                  <span className="hidden sm:inline">Deploy Your Own</span>
-                </a>
-              </Button>
-
-              {/* User Authentication */}
-              <User user={user} authProvider={authProvider} />
-            </div>
-          }
-        />
+        <SharedHeader leftActions={headerLeftActions} initialStars={initialStars} />
       </div>
 
       {/* Main content with tabs */}
diff --git a/components/shared-header.tsx b/components/shared-header.tsx
new file mode 100644
index 00000000..af3f1892
--- /dev/null
+++ b/components/shared-header.tsx
@@ -0,0 +1,70 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import { Menu } from 'lucide-react'
+import { useTasks } from '@/components/app-layout'
+import { User } from '@/components/auth/user'
+import { GitHubStarsButton } from '@/components/github-stars-button'
+import { VERCEL_DEPLOY_URL } from '@/lib/constants'
+
+interface SharedHeaderProps {
+  leftActions?: React.ReactNode
+  extraActions?: React.ReactNode
+  initialStars?: number
+  hideStars?: boolean
+  hideDeployButton?: boolean
+}
+
+export function SharedHeader({
+  leftActions,
+  extraActions,
+  initialStars = 1200,
+  hideStars = false,
+  hideDeployButton = false,
+}: SharedHeaderProps) {
+  const { toggleSidebar } = useTasks()
+
+  return (
+    <div className="px-0 pt-0.5 md:pt-3 pb-1.5 md:pb-4 overflow-visible">
+      <div className="flex items-center justify-between gap-2 h-8 min-w-0">
+        {/* Left side - Menu Button and Left Actions */}
+        <div className="flex items-center gap-1 sm:gap-2 min-w-0 flex-1">
+          <Button onClick={toggleSidebar} variant="ghost" size="sm" className="h-8 w-8 p-0 flex-shrink-0">
+            <Menu className="h-4 w-4" />
+          </Button>
+          {leftActions}
+        </div>
+
+        {/* Actions - Right side */}
+        <div className="flex items-center gap-2 flex-shrink-0">
+          {!hideStars && <GitHubStarsButton initialStars={initialStars} />}
+
+          {!hideDeployButton && (
+            <Button
+              asChild
+              variant="outline"
+              size="sm"
+              className="h-8 sm:px-3 px-0 sm:w-auto w-8 bg-black text-white border-black hover:bg-black/90 dark:bg-white dark:text-black dark:border-white dark:hover:bg-white/90"
+            >
+              <a
+                href={VERCEL_DEPLOY_URL}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center gap-1.5"
+              >
+                <svg viewBox="0 0 76 65" className="h-3 w-3" fill="currentColor">
+                  <path d="M37.5274 0L75.0548 65H0L37.5274 0Z" />
+                </svg>
+                <span className="hidden sm:inline">Deploy Your Own</span>
+              </a>
+            </Button>
+          )}
+
+          {extraActions}
+
+          <User />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/components/task-chat.tsx b/components/task-chat.tsx
index bff2042a..71f7bd8e 100644
--- a/components/task-chat.tsx
+++ b/components/task-chat.tsx
@@ -1226,7 +1226,7 @@ export function TaskChat({ taskId, task }: TaskChatProps) {
   return (
     <div className="flex flex-col h-full">
       {/* Header Tabs */}
-      <div className="py-2 flex items-center justify-between gap-1 flex-shrink-0 h-[46px] overflow-x-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
+      <div className="py-2 px-3 flex items-center justify-between gap-1 flex-shrink-0 h-[46px] overflow-x-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] border-b">
         <div className="flex items-center gap-1">
           <button
             onClick={() => setActiveTab('chat')}
@@ -1267,36 +1267,38 @@ export function TaskChat({ taskId, task }: TaskChatProps) {
       </div>
 
       {/* Tab Content */}
-      {renderTabContent()}
+      <div className="flex-1 min-h-0 px-3 pt-3 flex flex-col overflow-hidden">{renderTabContent()}</div>
 
       {/* Input Area (only for chat tab) */}
       {activeTab === 'chat' && (
-        <div className="flex-shrink-0 relative">
-          <Textarea
-            value={newMessage}
-            onChange={(e) => setNewMessage(e.target.value)}
-            onKeyDown={handleKeyDown}
-            placeholder="Send a follow-up message..."
-            className="w-full min-h-[60px] max-h-[120px] resize-none pr-12 text-base md:text-xs"
-            disabled={isSending}
-          />
-          {task.status === 'processing' || task.status === 'pending' ? (
-            <button
-              onClick={handleStopTask}
-              disabled={isStopping}
-              className="absolute bottom-2 right-2 rounded-full h-5 w-5 bg-primary text-primary-foreground hover:bg-primary/90 flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed"
-            >
-              <Square className="h-3 w-3" fill="currentColor" />
-            </button>
-          ) : (
-            <button
-              onClick={handleSendMessage}
-              disabled={!newMessage.trim() || isSending}
-              className="absolute bottom-2 right-2 rounded-full h-5 w-5 bg-primary text-primary-foreground hover:bg-primary/90 flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed"
-            >
-              {isSending ? <Loader2 className="h-3 w-3 animate-spin" /> : <ArrowUp className="h-3 w-3" />}
-            </button>
-          )}
+        <div className="flex-shrink-0 px-3 pb-3">
+          <div className="relative">
+            <Textarea
+              value={newMessage}
+              onChange={(e) => setNewMessage(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="Send a follow-up message..."
+              className="w-full min-h-[60px] max-h-[120px] resize-none pr-12 text-base md:text-xs"
+              disabled={isSending}
+            />
+            {task.status === 'processing' || task.status === 'pending' ? (
+              <button
+                onClick={handleStopTask}
+                disabled={isStopping}
+                className="absolute bottom-2 right-2 rounded-full h-5 w-5 bg-primary text-primary-foreground hover:bg-primary/90 flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                <Square className="h-3 w-3" fill="currentColor" />
+              </button>
+            ) : (
+              <button
+                onClick={handleSendMessage}
+                disabled={!newMessage.trim() || isSending}
+                className="absolute bottom-2 right-2 rounded-full h-5 w-5 bg-primary text-primary-foreground hover:bg-primary/90 flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {isSending ? <Loader2 className="h-3 w-3 animate-spin" /> : <ArrowUp className="h-3 w-3" />}
+              </button>
+            )}
+          </div>
         </div>
       )}
     </div>
diff --git a/components/task-details.tsx b/components/task-details.tsx
index 246a0066..7a20517d 100644
--- a/components/task-details.tsx
+++ b/components/task-details.tsx
@@ -46,6 +46,10 @@ import {
   setShowPreviewPane as saveShowPreviewPane,
   getShowChatPane,
   setShowChatPane as saveShowChatPane,
+  getFilesPaneWidth,
+  setFilesPaneWidth as saveFilesPaneWidth,
+  getChatPaneWidth,
+  setChatPaneWidth as saveChatPaneWidth,
 } from '@/lib/utils/cookies'
 import { FileBrowser } from '@/components/file-browser'
 import { FileDiffViewer } from '@/components/file-diff-viewer'
@@ -211,6 +215,12 @@ export function TaskDetails({ task, maxSandboxDuration = 300 }: TaskDetailsProps
   const [showPreviewPane, setShowPreviewPane] = useState(() => getShowPreviewPane())
   const [showChatPane, setShowChatPane] = useState(() => getShowChatPane())
   const [previewKey, setPreviewKey] = useState(0)
+
+  // Pane widths for resizing
+  const [filesPaneWidth, setFilesPaneWidth] = useState(() => getFilesPaneWidth())
+  const [chatPaneWidth, setChatPaneWidth] = useState(() => getChatPaneWidth())
+  const [resizingPane, setResizingPane] = useState<'files' | 'chat' | null>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
   const [isPreviewFullscreen, setIsPreviewFullscreen] = useState(false)
   const [isRestartingDevServer, setIsRestartingDevServer] = useState(false)
   const [isStoppingSandbox, setIsStoppingSandbox] = useState(false)
@@ -980,6 +990,71 @@ export function TaskDetails({ task, maxSandboxDuration = 300 }: TaskDetailsProps
     }
   }, [showFileDropdown])
 
+  // Refs to track latest width values for resize handler (avoids stale closure)
+  const filesPaneWidthRef = useRef(filesPaneWidth)
+  const chatPaneWidthRef = useRef(chatPaneWidth)
+
+  // Keep refs in sync with state
+  useEffect(() => {
+    filesPaneWidthRef.current = filesPaneWidth
+  }, [filesPaneWidth])
+
+  useEffect(() => {
+    chatPaneWidthRef.current = chatPaneWidth
+  }, [chatPaneWidth])
+
+  // Handle pane resize
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!resizingPane || !containerRef.current) return
+
+      const containerRect = containerRef.current.getBoundingClientRect()
+
+      if (resizingPane === 'files') {
+        const newWidth = e.clientX - containerRect.left
+        const minWidth = 150
+        const maxWidth = 500
+
+        if (newWidth >= minWidth && newWidth <= maxWidth) {
+          setFilesPaneWidth(newWidth)
+          filesPaneWidthRef.current = newWidth
+        }
+      } else if (resizingPane === 'chat') {
+        const newWidth = containerRect.right - e.clientX
+        const minWidth = 200
+        const maxWidth = 500
+
+        if (newWidth >= minWidth && newWidth <= maxWidth) {
+          setChatPaneWidth(newWidth)
+          chatPaneWidthRef.current = newWidth
+        }
+      }
+    }
+
+    const handleMouseUp = () => {
+      if (resizingPane === 'files') {
+        saveFilesPaneWidth(filesPaneWidthRef.current)
+      } else if (resizingPane === 'chat') {
+        saveChatPaneWidth(chatPaneWidthRef.current)
+      }
+      setResizingPane(null)
+    }
+
+    if (resizingPane) {
+      document.addEventListener('mousemove', handleMouseMove)
+      document.addEventListener('mouseup', handleMouseUp)
+      document.body.style.cursor = 'col-resize'
+      document.body.style.userSelect = 'none'
+    }
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove)
+      document.removeEventListener('mouseup', handleMouseUp)
+      document.body.style.cursor = ''
+      document.body.style.userSelect = ''
+    }
+  }, [resizingPane])
+
   // Keyboard shortcuts for pane toggles and tab management
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
@@ -1327,7 +1402,7 @@ export function TaskDetails({ task, maxSandboxDuration = 300 }: TaskDetailsProps
   return (
     <div className="flex flex-col flex-1 min-h-0">
       {/* Overview Section */}
-      <div className="space-y-2 md:space-y-3 pb-3 md:pb-6 border-b pl-3 md:pl-6 pr-3 flex-shrink-0">
+      <div className="space-y-2 md:space-y-3 py-2 md:py-3 border-b px-3 flex-shrink-0">
         {/* Prompt */}
         <div className="flex items-center gap-2">
           {currentStatus === 'processing' ? (
@@ -1493,31 +1568,6 @@ export function TaskDetails({ task, maxSandboxDuration = 300 }: TaskDetailsProps
 
         {/* Compact info row */}
         <div className="flex items-center gap-2 md:gap-4 md:flex-wrap text-xs md:text-sm overflow-x-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
-          {/* Repo */}
-          {task.repoUrl && (
-            <div className="flex items-center gap-1.5 md:gap-2 flex-shrink-0">
-              <svg
-                className="h-3.5 w-3.5 md:h-4 md:w-4 flex-shrink-0 text-muted-foreground"
-                fill="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  fillRule="evenodd"
-                  d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
-                  clipRule="evenodd"
-                />
-              </svg>
-              <a
-                href={task.repoUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-muted-foreground hover:text-foreground whitespace-nowrap"
-              >
-                {task.repoUrl.replace('https://github.com/', '').replace(/\.git$/, '')}
-              </a>
-            </div>
-          )}
-
           {/* Branch */}
           {task.branchName && (
             <div className="flex items-center gap-1.5 md:gap-2 flex-shrink-0">
@@ -1613,21 +1663,6 @@ export function TaskDetails({ task, maxSandboxDuration = 300 }: TaskDetailsProps
             </TooltipProvider>
           )}
 
-          {/* Preview Deployment */}
-          {!loadingDeployment && deploymentUrl && (
-            <div className="flex items-center gap-1.5 md:gap-2 min-w-0">
-              <VercelIcon className="h-3.5 w-3.5 md:h-4 md:w-4 flex-shrink-0 text-muted-foreground" />
-              <a
-                href={deploymentUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-muted-foreground hover:text-foreground truncate"
-              >
-                Preview
-              </a>
-            </div>
-          )}
-
           {/* Desktop Pane Toggles - Only show on desktop */}
           <div className="hidden md:flex items-center gap-1 ml-auto">
             <Button
@@ -1706,9 +1741,12 @@ export function TaskDetails({ task, maxSandboxDuration = 300 }: TaskDetailsProps
       {task.branchName && task.branchName.trim().length > 0 ? (
         <>
           {/* Desktop Layout */}
-          <div className="hidden md:flex flex-1 gap-3 md:gap-4 pl-3 pr-3 md:pr-6 pt-3 md:pt-6 pb-3 md:pb-6 min-h-0 overflow-hidden">
+          <div ref={containerRef} className="hidden md:flex flex-1 min-h-0 overflow-hidden">
             {/* File Browser - Always rendered but hidden with CSS to ensure files are loaded */}
-            <div className={cn('w-1/4 h-auto overflow-y-auto min-h-0 flex-shrink-0', !showFilesPane && 'hidden')}>
+            <div
+              className={cn('h-auto overflow-y-auto min-h-0 flex-shrink-0', !showFilesPane && 'hidden')}
+              style={{ width: showFilesPane ? `${filesPaneWidth}px` : 0 }}
+            >
               <FileBrowser
                 taskId={task.id}
                 branchName={task.branchName}
@@ -1722,12 +1760,22 @@ export function TaskDetails({ task, maxSandboxDuration = 300 }: TaskDetailsProps
               />
             </div>
 
+            {/* Resize Handle - Files/Code */}
+            {showFilesPane && showCodePane && (
+              <div
+                className="w-3 cursor-col-resize flex-shrink-0 relative group"
+                onMouseDown={() => setResizingPane('files')}
+              >
+                <div className="absolute inset-y-0 left-1/2 -translate-x-1/2 w-px bg-border group-hover:bg-primary/50 transition-colors" />
+              </div>
+            )}
+
             {/* Code Viewer */}
             {showCodePane && (
               <div className="flex-1 min-h-0 min-w-0">
-                <div className="bg-card rounded-md border overflow-hidden h-full flex flex-col">
+                <div className="overflow-hidden h-full flex flex-col">
                   {/* Tabs and Search Bar */}
-                  <div className="flex flex-col border-b bg-muted/50 flex-shrink-0">
+                  <div className="flex flex-col border-b flex-shrink-0">
                     {/* Tabs Row */}
                     {openTabs.length > 0 && (viewMode === 'all' || viewMode === 'all-local') && (
                       <div
@@ -1794,7 +1842,7 @@ export function TaskDetails({ task, maxSandboxDuration = 300 }: TaskDetailsProps
                     )}
 
                     {/* Search Bar */}
-                    <div ref={fileSearchRef} className="relative flex items-center gap-2 px-3 py-2">
+                    <div ref={fileSearchRef} className="relative flex items-center gap-2 px-3 h-[46px]">
                       <FileText className="h-4 w-4 text-muted-foreground flex-shrink-0" />
                       <input
                         type="text"
@@ -1867,12 +1915,19 @@ export function TaskDetails({ task, maxSandboxDuration = 300 }: TaskDetailsProps
               </div>
             )}
 
+            {/* Resize Handle - Code/Preview */}
+            {showPreviewPane && (showCodePane || showFilesPane) && (
+              <div className="w-3 cursor-col-resize flex-shrink-0 relative group">
+                <div className="absolute inset-y-0 left-1/2 -translate-x-1/2 w-px bg-border group-hover:bg-primary/50 transition-colors" />
+              </div>
+            )}
+
             {/* Preview */}
             {showPreviewPane && (
               <div className={cn('flex-1 min-h-0 min-w-0', isPreviewFullscreen && 'fixed inset-0 z-50 bg-background')}>
-                <div className="bg-card rounded-md border overflow-hidden h-full flex flex-col">
+                <div className="overflow-hidden h-full flex flex-col">
                   {/* Preview Toolbar */}
-                  <div className="flex items-center gap-2 px-3 py-2 border-b bg-muted/50 flex-shrink-0 min-h-[40px]">
+                  <div className="flex items-center gap-2 px-3 border-b flex-shrink-0 h-[46px]">
                     <Monitor className="h-4 w-4 text-muted-foreground flex-shrink-0" />
                     {task.sandboxUrl && sandboxHealth !== 'stopped' ? (
                       <a
@@ -2054,9 +2109,19 @@ export function TaskDetails({ task, maxSandboxDuration = 300 }: TaskDetailsProps
               </div>
             )}
 
+            {/* Resize Handle - Preview/Chat or Code/Chat */}
+            {showChatPane && (showPreviewPane || showCodePane || showFilesPane) && (
+              <div
+                className="w-3 cursor-col-resize flex-shrink-0 relative group"
+                onMouseDown={() => setResizingPane('chat')}
+              >
+                <div className="absolute inset-y-0 left-1/2 -translate-x-1/2 w-px bg-border group-hover:bg-primary/50 transition-colors" />
+              </div>
+            )}
+
             {/* Chat */}
             {showChatPane && (
-              <div className="w-1/4 h-auto min-h-0 flex-shrink-0">
+              <div className="h-auto min-h-0 flex-shrink-0" style={{ width: `${chatPaneWidth}px` }}>
                 <TaskChat taskId={task.id} task={task} />
               </div>
             )}
@@ -2069,7 +2134,7 @@ export function TaskDetails({ task, maxSandboxDuration = 300 }: TaskDetailsProps
               {/* Code Tab */}
               <div className={cn('relative h-full', activeTab !== 'code' && 'hidden')}>
                 {/* Current File Path Bar */}
-                <div className="px-3 pt-3 pb-2 flex items-center gap-2 bg-background border-b">
+                <div className="px-3 flex items-center gap-2 bg-background border-b h-[46px]">
                   <Button
                     variant="ghost"
                     size="sm"
@@ -2084,7 +2149,7 @@ export function TaskDetails({ task, maxSandboxDuration = 300 }: TaskDetailsProps
                 </div>
 
                 {/* Diff Viewer */}
-                <div className="bg-card md:rounded-md md:border overflow-hidden h-[calc(100%-41px)]">
+                <div className="overflow-hidden h-[calc(100%-46px)]">
                   <div className="overflow-y-auto h-full">
                     <FileDiffViewer
                       selectedFile={selectedItemIsFolder ? undefined : selectedFile}
@@ -2110,7 +2175,7 @@ export function TaskDetails({ task, maxSandboxDuration = 300 }: TaskDetailsProps
               </div>
 
               {/* Chat Tab */}
-              <div className={cn('h-full px-3 pb-3', activeTab !== 'chat' && 'hidden')}>
+              <div className={cn('h-full', activeTab !== 'chat' && 'hidden')}>
                 <TaskChat taskId={task.id} task={task} />
               </div>
 
@@ -2122,9 +2187,9 @@ export function TaskDetails({ task, maxSandboxDuration = 300 }: TaskDetailsProps
                   isPreviewFullscreen && 'fixed inset-0 z-50 bg-background',
                 )}
               >
-                <div className="bg-card md:rounded-md md:border overflow-hidden h-full flex flex-col">
+                <div className="overflow-hidden h-full flex flex-col">
                   {/* Preview Toolbar */}
-                  <div className="flex items-center gap-2 px-3 py-2 border-b bg-muted/50 flex-shrink-0 min-h-[40px]">
+                  <div className="flex items-center gap-2 px-3 border-b flex-shrink-0 h-[46px]">
                     <Monitor className="h-4 w-4 text-muted-foreground flex-shrink-0" />
                     {task.sandboxUrl ? (
                       <a
diff --git a/components/task-page-client.tsx b/components/task-page-client.tsx
index 176ed40d..b6a84292 100644
--- a/components/task-page-client.tsx
+++ b/components/task-page-client.tsx
@@ -1,17 +1,12 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useMemo } from 'react'
 import { useTask } from '@/lib/hooks/use-task'
 import { TaskDetails } from '@/components/task-details'
-import { TaskPageHeader } from '@/components/task-page-header'
-import { PageHeader } from '@/components/page-header'
-import { Button } from '@/components/ui/button'
-import { useTasks } from '@/components/app-layout'
+import { SharedHeader } from '@/components/shared-header'
+import { TaskActions } from '@/components/task-actions'
 import { LogsPane } from '@/components/logs-pane'
-import { VERCEL_DEPLOY_URL } from '@/lib/constants'
-import { User } from '@/components/auth/user'
 import type { Session } from '@/lib/session/types'
-import { GitHubStarsButton } from '@/components/github-stars-button'
 
 interface TaskPageClientProps {
   taskId: string
@@ -21,6 +16,23 @@ interface TaskPageClientProps {
   maxSandboxDuration?: number
 }
 
+function parseRepoFromUrl(repoUrl: string | null): { owner: string; repo: string } | null {
+  if (!repoUrl) return null
+  try {
+    const url = new URL(repoUrl)
+    const pathParts = url.pathname.split('/').filter(Boolean)
+    if (pathParts.length >= 2) {
+      return {
+        owner: pathParts[0],
+        repo: pathParts[1].replace(/\.git$/, ''),
+      }
+    }
+    return null
+  } catch {
+    return null
+  }
+}
+
 export function TaskPageClient({
   taskId,
   user,
@@ -29,44 +41,23 @@ export function TaskPageClient({
   maxSandboxDuration = 300,
 }: TaskPageClientProps) {
   const { task, isLoading, error } = useTask(taskId)
-  const { toggleSidebar } = useTasks()
   const [logsPaneHeight, setLogsPaneHeight] = useState(40) // Default to collapsed height
 
+  const repoInfo = useMemo(() => parseRepoFromUrl(task?.repoUrl ?? null), [task?.repoUrl])
+
+  const headerLeftActions = repoInfo ? (
+    <div className="flex items-center gap-2 min-w-0">
+      <h1 className="text-lg font-semibold truncate">
+        {repoInfo.owner}/{repoInfo.repo}
+      </h1>
+    </div>
+  ) : null
+
   if (isLoading) {
     return (
       <div className="flex-1 bg-background">
         <div className="p-3">
-          <PageHeader
-            showMobileMenu={true}
-            onToggleMobileMenu={toggleSidebar}
-            actions={
-              <div className="flex items-center gap-2 h-8">
-                <GitHubStarsButton initialStars={initialStars} />
-                {/* Deploy to Vercel Button */}
-                <Button
-                  asChild
-                  variant="outline"
-                  size="sm"
-                  className="h-8 sm:px-3 px-0 sm:w-auto w-8 bg-black text-white border-black hover:bg-black/90 dark:bg-white dark:text-black dark:border-white dark:hover:bg-white/90"
-                >
-                  <a
-                    href={VERCEL_DEPLOY_URL}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="flex items-center gap-1.5"
-                  >
-                    <svg viewBox="0 0 76 65" className="h-3 w-3" fill="currentColor">
-                      <path d="M37.5274 0L75.0548 65H0L37.5274 0Z" />
-                    </svg>
-                    <span className="hidden sm:inline">Deploy Your Own</span>
-                  </a>
-                </Button>
-
-                {/* User Authentication */}
-                <User user={user} authProvider={authProvider} />
-              </div>
-            }
-          />
+          <SharedHeader initialStars={initialStars} />
         </div>
       </div>
     )
@@ -76,36 +67,7 @@ export function TaskPageClient({
     return (
       <div className="flex-1 bg-background">
         <div className="p-3">
-          <PageHeader
-            showMobileMenu={true}
-            onToggleMobileMenu={toggleSidebar}
-            showPlatformName={true}
-            actions={
-              <div className="flex items-center gap-2 h-8">
-                <GitHubStarsButton initialStars={initialStars} />
-                {/* Deploy to Vercel Button */}
-                <Button
-                  asChild
-                  variant="outline"
-                  size="sm"
-                  className="h-8 sm:px-3 px-0 sm:w-auto w-8 bg-black text-white border-black hover:bg-black/90 dark:bg-white dark:text-black dark:border-white dark:hover:bg-white/90"
-                >
-                  <a
-                    href={VERCEL_DEPLOY_URL}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="flex items-center gap-1.5"
-                  >
-                    <svg viewBox="0 0 76 65" className="h-3 w-3" fill="currentColor">
-                      <path d="M37.5274 0L75.0548 65H0L37.5274 0Z" />
-                    </svg>
-                    <span className="hidden sm:inline">Deploy Your Own</span>
-                  </a>
-                </Button>
-                <User user={user} authProvider={authProvider} />
-              </div>
-            }
-          />
+          <SharedHeader initialStars={initialStars} />
         </div>
         <div className="mx-auto p-3">
           <div className="flex items-center justify-center h-64">
@@ -121,8 +83,12 @@ export function TaskPageClient({
 
   return (
     <div className="flex-1 bg-background relative flex flex-col h-full overflow-hidden">
-      <div className="flex-shrink-0 p-3">
-        <TaskPageHeader task={task} user={user} authProvider={authProvider} initialStars={initialStars} />
+      <div className="flex-shrink-0 px-3 py-2 border-b">
+        <SharedHeader
+          leftActions={headerLeftActions}
+          initialStars={initialStars}
+          extraActions={<TaskActions task={task} />}
+        />
       </div>
 
       {/* Task details */}
diff --git a/components/task-page-header.tsx b/components/task-page-header.tsx
deleted file mode 100644
index 6363c030..00000000
--- a/components/task-page-header.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-'use client'
-
-import { Task } from '@/lib/db/schema'
-import { PageHeader } from '@/components/page-header'
-import { TaskActions } from '@/components/task-actions'
-import { useTasks } from '@/components/app-layout'
-import { User } from '@/components/auth/user'
-import { Button } from '@/components/ui/button'
-import { VERCEL_DEPLOY_URL } from '@/lib/constants'
-import type { Session } from '@/lib/session/types'
-import { GitHubStarsButton } from '@/components/github-stars-button'
-
-interface TaskPageHeaderProps {
-  task: Task
-  user: Session['user'] | null
-  authProvider: Session['authProvider'] | null
-  initialStars?: number
-}
-
-export function TaskPageHeader({ task, user, authProvider, initialStars = 1200 }: TaskPageHeaderProps) {
-  const { toggleSidebar } = useTasks()
-
-  return (
-    <PageHeader
-      showMobileMenu={true}
-      onToggleMobileMenu={toggleSidebar}
-      showPlatformName={true}
-      actions={
-        <div className="flex items-center gap-2">
-          <GitHubStarsButton initialStars={initialStars} />
-          {/* Deploy to Vercel Button */}
-          <Button
-            asChild
-            variant="outline"
-            size="sm"
-            className="h-8 px-3 bg-black text-white border-black hover:bg-black/90 dark:bg-white dark:text-black dark:border-white dark:hover:bg-white/90"
-          >
-            <a href={VERCEL_DEPLOY_URL} target="_blank" rel="noopener noreferrer" className="flex items-center gap-1.5">
-              <svg viewBox="0 0 76 65" className="h-3 w-3" fill="currentColor">
-                <path d="M37.5274 0L75.0548 65H0L37.5274 0Z" />
-              </svg>
-              <span>Deploy Your Own</span>
-            </a>
-          </Button>
-          <TaskActions task={task} />
-          <User user={user} authProvider={authProvider} />
-        </div>
-      }
-    />
-  )
-}
diff --git a/components/tasks-list-client.tsx b/components/tasks-list-client.tsx
index f03df4d2..6af6477e 100644
--- a/components/tasks-list-client.tsx
+++ b/components/tasks-list-client.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useEffect, useMemo } from 'react'
 import { Task } from '@/lib/db/schema'
-import { PageHeader } from '@/components/page-header'
+import { SharedHeader } from '@/components/shared-header'
 import { useTasks } from '@/components/app-layout'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent } from '@/components/ui/card'
@@ -19,13 +19,10 @@ import {
 } from '@/components/ui/alert-dialog'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { AlertCircle, Trash2, Square, StopCircle, CheckSquare, X, Clock } from 'lucide-react'
-import { GitHubStarsButton } from '@/components/github-stars-button'
-import { User } from '@/components/auth/user'
 import { toast } from 'sonner'
 import { useRouter } from 'next/navigation'
 import { cn } from '@/lib/utils'
 import type { Session } from '@/lib/session/types'
-import { VERCEL_DEPLOY_URL } from '@/lib/constants'
 import { Claude, Codex, Copilot, Cursor, Gemini, OpenCode } from '@/components/logos'
 import { PRStatusIcon } from '@/components/pr-status-icon'
 import { PRCheckStatus } from '@/components/pr-check-status'
@@ -274,35 +271,7 @@ export function TasksListClient({ user, authProvider, initialStars = 1200 }: Tas
   return (
     <div className="flex-1 bg-background flex flex-col h-full overflow-hidden">
       <div className="flex-shrink-0 p-3">
-        <PageHeader
-          showMobileMenu={true}
-          onToggleMobileMenu={toggleSidebar}
-          title="All Tasks"
-          actions={
-            <div className="flex items-center gap-2 h-8">
-              <GitHubStarsButton initialStars={initialStars} />
-              <Button
-                asChild
-                variant="outline"
-                size="sm"
-                className="h-8 sm:px-3 px-0 sm:w-auto w-8 bg-black text-white border-black hover:bg-black/90 dark:bg-white dark:text-black dark:border-white dark:hover:bg-white/90"
-              >
-                <a
-                  href={VERCEL_DEPLOY_URL}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="flex items-center gap-1.5"
-                >
-                  <svg viewBox="0 0 76 65" className="h-3 w-3" fill="currentColor">
-                    <path d="M37.5274 0L75.0548 65H0L37.5274 0Z" />
-                  </svg>
-                  <span className="hidden sm:inline">Deploy Your Own</span>
-                </a>
-              </Button>
-              <User user={user} authProvider={authProvider} />
-            </div>
-          }
-        />
+        <SharedHeader initialStars={initialStars} />
       </div>
 
       <div className="flex-1 overflow-auto px-4 pb-4">
diff --git a/lib/utils/cookies.ts b/lib/utils/cookies.ts
index e940986b..712e8db8 100644
--- a/lib/utils/cookies.ts
+++ b/lib/utils/cookies.ts
@@ -402,3 +402,102 @@ export function setEnableBrowser(enable: boolean): void {
     sameSite: 'strict',
   })
 }
+
+// Pane width cookies
+const FILES_PANE_WIDTH_COOKIE = 'files_pane_width'
+const CODE_PANE_WIDTH_COOKIE = 'code_pane_width'
+const PREVIEW_PANE_WIDTH_COOKIE = 'preview_pane_width'
+const CHAT_PANE_WIDTH_COOKIE = 'chat_pane_width'
+
+const DEFAULT_FILES_WIDTH = 250
+const DEFAULT_CODE_WIDTH = 0 // 0 means flex
+const DEFAULT_PREVIEW_WIDTH = 0 // 0 means flex
+const DEFAULT_CHAT_WIDTH = 300
+
+export function getFilesPaneWidth(): number {
+  if (typeof window === 'undefined') return DEFAULT_FILES_WIDTH
+
+  const savedWidth = Cookies.get(FILES_PANE_WIDTH_COOKIE)
+  if (savedWidth) {
+    const width = parseInt(savedWidth, 10)
+    if (!isNaN(width) && width >= 150 && width <= 600) {
+      return width
+    }
+  }
+  return DEFAULT_FILES_WIDTH
+}
+
+export function setFilesPaneWidth(width: number): void {
+  if (typeof window === 'undefined') return
+
+  Cookies.set(FILES_PANE_WIDTH_COOKIE, width.toString(), {
+    expires: 365,
+    sameSite: 'strict',
+  })
+}
+
+export function getCodePaneWidth(): number {
+  if (typeof window === 'undefined') return DEFAULT_CODE_WIDTH
+
+  const savedWidth = Cookies.get(CODE_PANE_WIDTH_COOKIE)
+  if (savedWidth) {
+    const width = parseInt(savedWidth, 10)
+    if (!isNaN(width) && width >= 0) {
+      return width
+    }
+  }
+  return DEFAULT_CODE_WIDTH
+}
+
+export function setCodePaneWidth(width: number): void {
+  if (typeof window === 'undefined') return
+
+  Cookies.set(CODE_PANE_WIDTH_COOKIE, width.toString(), {
+    expires: 365,
+    sameSite: 'strict',
+  })
+}
+
+export function getPreviewPaneWidth(): number {
+  if (typeof window === 'undefined') return DEFAULT_PREVIEW_WIDTH
+
+  const savedWidth = Cookies.get(PREVIEW_PANE_WIDTH_COOKIE)
+  if (savedWidth) {
+    const width = parseInt(savedWidth, 10)
+    if (!isNaN(width) && width >= 0) {
+      return width
+    }
+  }
+  return DEFAULT_PREVIEW_WIDTH
+}
+
+export function setPreviewPaneWidth(width: number): void {
+  if (typeof window === 'undefined') return
+
+  Cookies.set(PREVIEW_PANE_WIDTH_COOKIE, width.toString(), {
+    expires: 365,
+    sameSite: 'strict',
+  })
+}
+
+export function getChatPaneWidth(): number {
+  if (typeof window === 'undefined') return DEFAULT_CHAT_WIDTH
+
+  const savedWidth = Cookies.get(CHAT_PANE_WIDTH_COOKIE)
+  if (savedWidth) {
+    const width = parseInt(savedWidth, 10)
+    if (!isNaN(width) && width >= 200 && width <= 600) {
+      return width
+    }
+  }
+  return DEFAULT_CHAT_WIDTH
+}
+
+export function setChatPaneWidth(width: number): void {
+  if (typeof window === 'undefined') return
+
+  Cookies.set(CHAT_PANE_WIDTH_COOKIE, width.toString(), {
+    expires: 365,
+    sameSite: 'strict',
+  })
+}