diff --git a/.prettierignore b/.prettierignore
index 5f7484c1a6..449d3ded7f 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -41,3 +41,7 @@ CHANGELOG.md
 CONTRIBUTING.md
 *.yml
 *.yaml
+
+# Pre-existing intentional formatting exceptions (do not reformat)
+packages/web/index.html
+packages/web/src/lib/useVisualViewport.ts
diff --git a/RESPONSIVE_UI_PATCH.md b/RESPONSIVE_UI_PATCH.md
new file mode 100644
index 0000000000..dc639af0a4
--- /dev/null
+++ b/RESPONSIVE_UI_PATCH.md
@@ -0,0 +1,805 @@
+# Patch : UI Mobile-Responsive — Archon
+
+> **Date du patch :** Avril 2026  
+> **Auteur :** Roland Galzy  
+> **Version Archon ciblée :** branche `main` / tag à préciser lors de la prochaine mise à jour
+
+---
+
+## Pourquoi ce patch existe
+
+Archon est déployé localement et exposé via un tunnel Cloudflare (`cloudflared`) pour permettre un accès depuis un smartphone ou une tablette. L'interface d'origine n'étant pas conçue pour les petits écrans (navigation en haut de page non adaptée, panneau latéral gauche du chat prenant toute la largeur), une série de modifications a été appliquée pour rendre l'UI pleinement utilisable sur mobile.
+
+**Changements principaux :**
+
+1. Création d'un **contexte React partagé** (`MobileNavContext`) pour synchroniser l'état du drawer mobile.
+2. Ajout d'un **drawer de navigation latéral** dans `Layout.tsx` (visible uniquement sur mobile).
+3. Transformation de la **TopNav** : bouton hamburger ☰ sur mobile, comportement inchangé sur desktop.
+4. Masquage du **panneau gauche de ChatPage** sur mobile (conversations), la zone de chat prend toute la largeur.
+
+---
+
+## Fichiers modifiés
+
+### 1. `packages/web/src/contexts/MobileNavContext.tsx` _(nouveau fichier)_
+
+**Rôle :** Contexte React permettant à `Layout.tsx` et `TopNav.tsx` de partager l'état d'ouverture du drawer mobile (`open` / `setOpen`) sans props drilling.
+
+**Code complet :**
+
+```tsx
+import { createContext, useContext } from 'react';
+
+export interface MobileNavContextValue {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+export const MobileNavContext = createContext<MobileNavContextValue>({
+  open: false,
+  setOpen: () => {},
+});
+
+export function useMobileNav(): MobileNavContextValue {
+  return useContext(MobileNavContext);
+}
+```
+
+---
+
+### 2. `packages/web/src/components/layout/Layout.tsx` _(modifié)_
+
+**Changements apportés :**
+
+- Import de `useState`, des icônes Lucide (`MessageSquare`, `LayoutDashboard`, `Workflow`, `Settings`, `X`) et de `NavLink` depuis `react-router`.
+- Import de `MobileNavContext` et `cn`.
+- Ajout de l'état `open` / `setOpen` via `useState(false)`.
+- Enveloppe le JSX dans `<MobileNavContext.Provider value={{ open, setOpen }}>`.
+- Ajout d'un **backdrop overlay** semi-transparent (cliquable pour fermer) : `fixed inset-0 z-40 bg-black/60 md:hidden`.
+- Ajout d'un **drawer `<aside>`** glissant depuis la gauche : `w-72`, `z-50`, transition CSS `translate-x`, caché sur `md:` via `md:hidden`.
+- Le drawer contient : logo + bouton ✕ en en-tête, liens de navigation (Chat/Dashboard/Workflows), Settings épinglé en bas de drawer.
+
+**Code complet :**
+
+```tsx
+import { useState } from 'react';
+import { Outlet, NavLink } from 'react-router';
+import { MessageSquare, LayoutDashboard, Workflow, Settings, X } from 'lucide-react';
+import { TopNav } from './TopNav';
+import { MobileNavContext } from '@/contexts/MobileNavContext';
+import { cn } from '@/lib/utils';
+
+const navItems = [
+  { to: '/chat', end: false, icon: MessageSquare, label: 'Chat' },
+  { to: '/dashboard', end: true, icon: LayoutDashboard, label: 'Dashboard' },
+  { to: '/workflows', end: false, icon: Workflow, label: 'Workflows' },
+] as const;
+
+export function Layout(): React.ReactElement {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <MobileNavContext.Provider value={{ open, setOpen }}>
+      <div className="flex h-screen flex-col bg-background">
+        <TopNav />
+
+        {/* ── Mobile nav overlay backdrop ── */}
+        {open && (
+          <div
+            className="fixed inset-0 z-40 bg-black/60 md:hidden"
+            onClick={() => {
+              setOpen(false);
+            }}
+            aria-hidden="true"
+          />
+        )}
+
+        {/* ── Mobile nav drawer ── */}
+        <aside
+          className={cn(
+            'fixed inset-y-0 left-0 z-50 flex w-72 flex-col bg-surface border-r border-border shadow-2xl',
+            'transition-transform duration-300 ease-in-out',
+            'md:hidden',
+            open ? 'translate-x-0' : '-translate-x-full'
+          )}
+          aria-label="Navigation mobile"
+        >
+          {/* Drawer header */}
+          <div className="flex items-center justify-between px-4 py-3 border-b border-border">
+            <div className="flex items-center gap-2">
+              <div className="flex h-7 w-7 items-center justify-center rounded-md bg-primary">
+                <span className="text-sm font-semibold text-primary-foreground">A</span>
+              </div>
+              <span className="text-sm font-semibold text-text-primary">Archon</span>
+            </div>
+            <button
+              onClick={() => {
+                setOpen(false);
+              }}
+              className="flex items-center justify-center rounded-md p-1.5 text-text-secondary hover:bg-surface-elevated hover:text-text-primary transition-colors"
+              aria-label="Fermer le menu"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          </div>
+
+          {/* Navigation links */}
+          <nav className="flex-1 overflow-y-auto p-2 pt-3">
+            {navItems.map(({ to, end, icon: Icon, label }) => (
+              <NavLink
+                key={to}
+                to={to}
+                end={end}
+                onClick={() => {
+                  setOpen(false);
+                }}
+                className={({ isActive }: { isActive: boolean }): string =>
+                  cn(
+                    'flex items-center gap-3 w-full rounded-md px-3 py-2.5 text-sm font-medium transition-colors mb-0.5',
+                    isActive
+                      ? 'bg-accent text-primary'
+                      : 'text-text-secondary hover:bg-surface-elevated hover:text-text-primary'
+                  )
+                }
+              >
+                <Icon className="h-4 w-4 shrink-0" />
+                {label}
+              </NavLink>
+            ))}
+          </nav>
+
+          {/* Settings — pinned at bottom */}
+          <div className="p-2 border-t border-border">
+            <NavLink
+              to="/settings"
+              onClick={() => {
+                setOpen(false);
+              }}
+              className={({ isActive }: { isActive: boolean }): string =>
+                cn(
+                  'flex items-center gap-3 w-full rounded-md px-3 py-2.5 text-sm font-medium transition-colors',
+                  isActive
+                    ? 'bg-accent text-primary'
+                    : 'text-text-secondary hover:bg-surface-elevated hover:text-text-primary'
+                )
+              }
+            >
+              <Settings className="h-4 w-4 shrink-0" />
+              Settings
+            </NavLink>
+          </div>
+        </aside>
+
+        <main className="flex flex-1 flex-col overflow-hidden">
+          <Outlet />
+        </main>
+      </div>
+    </MobileNavContext.Provider>
+  );
+}
+```
+
+---
+
+### 3. `packages/web/src/components/layout/TopNav.tsx` _(modifié)_
+
+**Changements apportés :**
+
+- Import de `useMobileNav` depuis `@/contexts/MobileNavContext`.
+- Import de l'icône `Menu` depuis `lucide-react`.
+- Récupération de `setOpen` via `useMobileNav()`.
+- Ajout du **bouton hamburger** `<Menu>` avant le logo : `md:hidden`, déclenche `setOpen(true)`.
+- Les onglets de navigation sont enveloppés dans `<div className="hidden md:flex ...">` → **invisibles sur mobile**.
+- Le logo reste visible sur mobile et desktop.
+- Version badge et update check : comportement inchangé.
+
+**Code complet :**
+
+```tsx
+import { NavLink, Link } from 'react-router';
+import { useQuery } from '@tanstack/react-query';
+import { LayoutDashboard, MessageSquare, Workflow, Settings, Menu } from 'lucide-react';
+import { listWorkflowRuns, getUpdateCheck } from '@/lib/api';
+import { cn } from '@/lib/utils';
+import { useMobileNav } from '@/contexts/MobileNavContext';
+
+const tabs = [
+  { to: '/chat', end: false, icon: MessageSquare, label: 'Chat' },
+  { to: '/dashboard', end: true, icon: LayoutDashboard, label: 'Dashboard' },
+  { to: '/workflows', end: false, icon: Workflow, label: 'Workflows' },
+  { to: '/settings', end: false, icon: Settings, label: 'Settings' },
+] as const;
+
+export function TopNav(): React.ReactElement {
+  const { setOpen } = useMobileNav();
+
+  const { data: runningRuns } = useQuery({
+    queryKey: ['workflowRuns', { status: 'running' }],
+    queryFn: () => listWorkflowRuns({ status: 'running', limit: 1 }),
+    refetchInterval: 10_000,
+  });
+  const hasRunning = (runningRuns?.length ?? 0) > 0;
+
+  const { data: updateCheck } = useQuery({
+    queryKey: ['update-check'],
+    queryFn: getUpdateCheck,
+    staleTime: 60 * 60 * 1000,
+    refetchInterval: 60 * 60 * 1000,
+    retry: false,
+  });
+
+  return (
+    <nav className="flex items-center gap-1 border-b border-border bg-surface px-4">
+      {/* ── Mobile: hamburger button (hidden on desktop) ── */}
+      <button
+        onClick={() => {
+          setOpen(true);
+        }}
+        className="flex items-center justify-center rounded-md p-1.5 mr-2 text-text-secondary hover:bg-surface-elevated hover:text-text-primary transition-colors md:hidden"
+        aria-label="Ouvrir le menu"
+      >
+        <Menu className="h-5 w-5" />
+      </button>
+
+      {/* Brand logo */}
+      <Link to="/chat" className="flex items-center gap-2 mr-4 hover:opacity-80 transition-opacity">
+        <div className="flex h-7 w-7 items-center justify-center rounded-md bg-primary">
+          <span className="text-sm font-semibold text-primary-foreground">A</span>
+        </div>
+        {/* Logo text: always visible */}
+        <span className="text-sm font-semibold text-text-primary">Archon</span>
+      </Link>
+
+      {/* ── Desktop nav tabs (hidden on mobile) ── */}
+      <div className="hidden md:flex items-center gap-1">
+        {tabs.map(({ to, end, icon: Icon, label }) => (
+          <NavLink
+            key={to}
+            to={to}
+            end={end}
+            className={({ isActive }: { isActive: boolean }): string =>
+              cn(
+                'flex items-center gap-2 px-3 py-3 text-sm font-medium border-b-2 transition-colors',
+                isActive
+                  ? 'border-primary text-primary'
+                  : 'border-transparent text-text-secondary hover:text-text-primary'
+              )
+            }
+          >
+            <Icon className="h-4 w-4" />
+            {label}
+            {to === '/dashboard' && hasRunning && (
+              <span className="flex h-2 w-2 rounded-full bg-primary animate-pulse" />
+            )}
+          </NavLink>
+        ))}
+      </div>
+
+      {/* Version + update badge */}
+      <span className="ml-auto text-xs text-text-secondary">
+        v{import.meta.env.VITE_APP_VERSION as string}
+        {updateCheck?.updateAvailable && updateCheck.releaseUrl && (
+          <a
+            href={updateCheck.releaseUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="ml-1.5 inline-flex items-center gap-1 text-xs text-primary hover:underline"
+            title={`v${updateCheck.latestVersion} available`}
+          >
+            <span className="inline-block h-1.5 w-1.5 rounded-full bg-primary animate-pulse" />v
+            {updateCheck.latestVersion}
+          </a>
+        )}
+      </span>
+    </nav>
+  );
+}
+```
+
+---
+
+### 4. `packages/web/src/routes/ChatPage.tsx` _(modifié)_
+
+**Changements apportés :**
+
+- Le **panneau gauche** (liste des conversations) reçoit la classe `hidden md:flex` → masqué sur mobile, visible à partir de `md:` (768px).
+- Le **panneau droit** (interface de chat) reçoit `flex flex-1 flex-col overflow-hidden min-w-0` → prend toute la largeur disponible sur mobile.
+- Aucun autre changement fonctionnel (resize handle, state management, queries, etc. sont identiques à l'original).
+
+**Diff commenté (section JSX return uniquement) :**
+
+```diff
+  return (
+    <div className="flex flex-1 overflow-hidden">
+
+-     {/* Left panel */}
+-     <div
+-       className="relative flex h-full flex-col border-r border-border bg-surface overflow-hidden"
++     {/* ── Left panel — hidden on mobile, always visible on desktop ── */}
++     <div
++       className={cn(
++         'relative flex h-full flex-col border-r border-border bg-surface overflow-hidden',
++         // Hide entirely on mobile → chat takes full width
++         'hidden md:flex'
++       )}
+        style={{ width: `${String(width)}px`, flexShrink: 0 }}
+      >
+        {/* ... contenu inchangé ... */}
+      </div>
+
+-     {/* Right panel */}
+-     <div className="flex flex-1 flex-col overflow-hidden">
++     {/* ── Right panel — chat interface, full width on mobile ── */}
++     <div className="flex flex-1 flex-col overflow-hidden min-w-0">
+        <ChatInterface key={conversationId ?? 'new'} conversationId={conversationId ?? 'new'} />
+      </div>
+    </div>
+  );
+```
+
+**Code complet du fichier :**
+
+```tsx
+import { useState, useMemo, useRef, useCallback, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { MessageSquarePlus, Search, Plus, Loader2, FolderGit2 } from 'lucide-react';
+import { ChatInterface } from '@/components/chat/ChatInterface';
+import { ConversationItem } from '@/components/conversations/ConversationItem';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Separator } from '@/components/ui/separator';
+import { useProject } from '@/contexts/ProjectContext';
+import { listConversations, listWorkflowRuns, addCodebase } from '@/lib/api';
+import type { CodebaseResponse } from '@/lib/api';
+import { cn } from '@/lib/utils';
+
+const PANEL_MIN = 220;
+const PANEL_MAX = 420;
+const PANEL_DEFAULT = 260;
+const STORAGE_KEY = 'archon-chat-panel-width';
+
+function getInitialWidth(): number {
+  const stored = localStorage.getItem(STORAGE_KEY);
+  if (stored) {
+    const parsed = Number(stored);
+    if (parsed >= PANEL_MIN && parsed <= PANEL_MAX) return parsed;
+  }
+  return PANEL_DEFAULT;
+}
+
+export function ChatPage(): React.ReactElement {
+  const { '*': rawConversationId } = useParams();
+  const conversationId = rawConversationId ? decodeURIComponent(rawConversationId) : undefined;
+
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const { selectedProjectId, setSelectedProjectId, codebases, isLoadingCodebases } = useProject();
+
+  const [searchQuery, setSearchQuery] = useState('');
+  const [width, setWidth] = useState(getInitialWidth);
+  const isResizing = useRef(false);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+
+  // Add-project state
+  const [showAddInput, setShowAddInput] = useState(false);
+  const [addValue, setAddValue] = useState('');
+  const [addLoading, setAddLoading] = useState(false);
+  const [addError, setAddError] = useState<string | null>(null);
+  const addInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    localStorage.setItem(STORAGE_KEY, String(width));
+  }, [width]);
+
+  useEffect(() => {
+    if (showAddInput) {
+      addInputRef.current?.focus();
+    }
+  }, [showAddInput]);
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent): void => {
+      e.preventDefault();
+      isResizing.current = true;
+      const startX = e.clientX;
+      const startWidth = width;
+
+      document.body.style.userSelect = 'none';
+      document.body.style.cursor = 'col-resize';
+
+      const onMouseMove = (moveEvent: MouseEvent): void => {
+        const newWidth = Math.min(
+          PANEL_MAX,
+          Math.max(PANEL_MIN, startWidth + moveEvent.clientX - startX)
+        );
+        setWidth(newWidth);
+      };
+
+      const onMouseUp = (): void => {
+        isResizing.current = false;
+        document.body.style.userSelect = '';
+        document.body.style.cursor = '';
+        document.removeEventListener('mousemove', onMouseMove);
+        document.removeEventListener('mouseup', onMouseUp);
+      };
+
+      document.addEventListener('mousemove', onMouseMove);
+      document.addEventListener('mouseup', onMouseUp);
+    },
+    [width]
+  );
+
+  const { data: conversations } = useQuery({
+    queryKey: ['conversations', selectedProjectId],
+    queryFn: () => listConversations(selectedProjectId ?? undefined),
+    refetchInterval: 10_000,
+  });
+
+  const { data: runs } = useQuery({
+    queryKey: ['workflow-runs-status'],
+    queryFn: () => listWorkflowRuns({ limit: 50 }),
+    refetchInterval: 10_000,
+  });
+
+  const conversationStatusMap = useMemo((): Map<string, 'running' | 'failed'> => {
+    const map = new Map<string, 'running' | 'failed'>();
+    if (!runs) return map;
+    for (const run of runs) {
+      const key = run.parent_conversation_id ?? run.conversation_id;
+      if (run.status === 'running') {
+        map.set(key, 'running');
+      } else if (run.status === 'failed' && !map.has(key)) {
+        map.set(key, 'failed');
+      }
+    }
+    return map;
+  }, [runs]);
+
+  const codebaseMap = useMemo((): Map<string, CodebaseResponse> => {
+    const map = new Map<string, CodebaseResponse>();
+    if (codebases) {
+      for (const cb of codebases) {
+        map.set(cb.id, cb);
+      }
+    }
+    return map;
+  }, [codebases]);
+
+  const filtered = useMemo(
+    () =>
+      conversations?.filter(conv => {
+        if (!searchQuery) return true;
+        const query = searchQuery.toLowerCase();
+        return (conv.title ?? conv.platform_conversation_id).toLowerCase().includes(query);
+      }),
+    [conversations, searchQuery]
+  );
+
+  const handleNewChat = useCallback((): void => {
+    navigate('/chat');
+  }, [navigate]);
+
+  const handleAddSubmit = useCallback((): void => {
+    const trimmed = addValue.trim();
+    if (!trimmed || addLoading) return;
+
+    setAddLoading(true);
+    setAddError(null);
+
+    const isLocalPath =
+      trimmed.startsWith('/') || trimmed.startsWith('~') || /^[A-Za-z]:[/\\]/.test(trimmed);
+    const input = isLocalPath ? { path: trimmed } : { url: trimmed };
+
+    void addCodebase(input)
+      .then(codebase => {
+        void queryClient.invalidateQueries({ queryKey: ['codebases'] });
+        setSelectedProjectId(codebase.id);
+        setShowAddInput(false);
+        setAddValue('');
+        setAddError(null);
+      })
+      .catch((err: Error) => {
+        setAddError(err.message);
+      })
+      .finally(() => {
+        setAddLoading(false);
+      });
+  }, [addValue, addLoading, queryClient, setSelectedProjectId]);
+
+  const handleAddKeyDown = useCallback(
+    (e: React.KeyboardEvent): void => {
+      if (e.key === 'Enter') {
+        handleAddSubmit();
+      } else if (e.key === 'Escape') {
+        setShowAddInput(false);
+        setAddValue('');
+        setAddError(null);
+      }
+    },
+    [handleAddSubmit]
+  );
+
+  return (
+    <div className="flex flex-1 overflow-hidden">
+      {/* ── Left panel — hidden on mobile, always visible on desktop ── */}
+      <div
+        className={cn(
+          'relative flex h-full flex-col border-r border-border bg-surface overflow-hidden',
+          // Hide entirely on mobile → chat takes full width
+          'hidden md:flex'
+        )}
+        style={{ width: `${String(width)}px`, flexShrink: 0 }}
+      >
+        {/* New Chat button */}
+        <div className="px-3 pt-3 pb-2">
+          <button
+            onClick={handleNewChat}
+            className="flex w-full items-center gap-2 rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:bg-accent-hover transition-colors"
+          >
+            <MessageSquarePlus className="h-4 w-4 shrink-0" />
+            New Chat
+          </button>
+        </div>
+
+        {/* Project filter */}
+        <div className="px-3 pb-2">
+          <div className="flex items-center justify-between mb-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wider text-text-tertiary">
+              Project
+            </span>
+            <button
+              onClick={(): void => {
+                setShowAddInput(prev => !prev);
+                setAddError(null);
+                setAddValue('');
+              }}
+              className="p-1 rounded hover:bg-surface-elevated transition-colors"
+              title="Add project"
+            >
+              <Plus className="h-3.5 w-3.5 text-text-tertiary hover:text-primary" />
+            </button>
+          </div>
+
+          {showAddInput && (
+            <div className="mb-2">
+              <div className="flex items-center gap-1">
+                <input
+                  ref={addInputRef}
+                  value={addValue}
+                  onChange={(e): void => {
+                    setAddValue(e.target.value);
+                  }}
+                  onKeyDown={handleAddKeyDown}
+                  onBlur={(): void => {
+                    if (!addValue.trim() && !addError) {
+                      setShowAddInput(false);
+                    }
+                  }}
+                  placeholder="GitHub URL or local path"
+                  disabled={addLoading}
+                  className="w-full rounded-md border border-border bg-surface-elevated px-2 py-1 text-xs text-text-primary placeholder:text-text-tertiary focus:border-primary focus:outline-none disabled:opacity-50"
+                />
+                {addLoading && (
+                  <Loader2 className="h-3.5 w-3.5 shrink-0 animate-spin text-primary" />
+                )}
+              </div>
+              {addError && <p className="mt-1 text-[10px] text-error line-clamp-2">{addError}</p>}
+            </div>
+          )}
+
+          {isLoadingCodebases ? (
+            <div className="flex items-center justify-center py-2">
+              <span className="text-xs text-text-tertiary">Loading...</span>
+            </div>
+          ) : (
+            <select
+              value={selectedProjectId ?? ''}
+              onChange={(e): void => {
+                setSelectedProjectId(e.target.value || null);
+              }}
+              className="w-full rounded-md border border-border bg-surface-elevated px-2 py-1.5 text-xs text-text-primary focus:border-primary focus:outline-none"
+            >
+              <option value="">All Projects</option>
+              {codebases?.map(cb => (
+                <option key={cb.id} value={cb.id}>
+                  {cb.name}
+                </option>
+              ))}
+            </select>
+          )}
+        </div>
+
+        <Separator className="bg-border" />
+
+        {/* Search */}
+        <div className="px-3 py-2">
+          <div className="relative">
+            <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-text-tertiary" />
+            <input
+              ref={searchInputRef}
+              value={searchQuery}
+              onChange={(e): void => {
+                setSearchQuery(e.target.value);
+              }}
+              placeholder="Search..."
+              className="w-full rounded-md border border-border bg-surface-elevated py-1.5 pl-7 pr-2 text-xs text-text-primary placeholder:text-text-tertiary focus:border-primary focus:outline-none"
+            />
+          </div>
+        </div>
+
+        {/* Conversation list */}
+        <ScrollArea className="flex-1 min-h-0 px-2 pb-2">
+          <div className="flex flex-col gap-0.5">
+            {filtered && filtered.length > 0 ? (
+              filtered.map(conv => (
+                <ConversationItem
+                  key={conv.id}
+                  conversation={conv}
+                  projectName={
+                    conv.codebase_id ? codebaseMap.get(conv.codebase_id)?.name : undefined
+                  }
+                  status={conversationStatusMap.get(conv.id) ?? 'idle'}
+                />
+              ))
+            ) : (
+              <div className="flex flex-col items-center justify-center gap-2 py-8 px-4">
+                <FolderGit2 className="h-8 w-8 text-text-tertiary" />
+                <span className="text-xs text-text-tertiary text-center">
+                  {conversations && conversations.length > 0
+                    ? 'No matching conversations'
+                    : 'No conversations yet — start a new chat!'}
+                </span>
+              </div>
+            )}
+          </div>
+        </ScrollArea>
+
+        {/* Resize handle */}
+        <div
+          onMouseDown={handleMouseDown}
+          className="absolute right-0 top-0 bottom-0 w-1.5 cursor-col-resize bg-border/50 hover:bg-primary/40 transition-colors"
+        />
+      </div>
+
+      {/* ── Right panel — chat interface, full width on mobile ── */}
+      <div className="flex flex-1 flex-col overflow-hidden min-w-0">
+        <ChatInterface key={conversationId ?? 'new'} conversationId={conversationId ?? 'new'} />
+      </div>
+    </div>
+  );
+}
+```
+
+---
+
+## Comment re-appliquer ce patch
+
+### Option A — Re-application manuelle (fichier par fichier)
+
+1. **Créer le fichier de contexte** _(s'il a été supprimé par une mise à jour)_ :
+
+   ```
+   packages/web/src/contexts/MobileNavContext.tsx
+   ```
+
+   → Copier-coller le code de la section 1 ci-dessus.
+
+2. **Remplacer `Layout.tsx`** :
+
+   ```
+   packages/web/src/components/layout/Layout.tsx
+   ```
+
+   → Remplacer le contenu par le code de la section 2.
+
+3. **Remplacer `TopNav.tsx`** :
+
+   ```
+   packages/web/src/components/layout/TopNav.tsx
+   ```
+
+   → Remplacer le contenu par le code de la section 3.
+
+4. **Remplacer `ChatPage.tsx`** :
+
+   ```
+   packages/web/src/routes/ChatPage.tsx
+   ```
+
+   → Remplacer le contenu par le code de la section 4.
+
+5. **Rebuilder le front** :
+
+   ```bash
+   cd packages/web
+   npm run build
+   # ou si dev :
+   npm run dev
+   ```
+
+---
+
+### Option B — Script PowerShell automatisé
+
+Sauvegarder ce script sous `apply-responsive-patch.ps1` à la racine d'Archon et l'exécuter depuis PowerShell :
+
+```powershell
+# apply-responsive-patch.ps1
+# Re-applique le patch mobile-responsive sur Archon
+# Usage : .\apply-responsive-patch.ps1
+
+$root = $PSScriptRoot
+$web  = Join-Path $root "packages\web\src"
+
+Write-Host "==> Application du patch mobile-responsive Archon..." -ForegroundColor Cyan
+
+# 1. MobileNavContext.tsx
+$contextDir = Join-Path $web "contexts"
+if (-not (Test-Path $contextDir)) { New-Item -ItemType Directory -Path $contextDir | Out-Null }
+
+$mobileNavContext = @'
+import { createContext, useContext } from 'react';
+
+export interface MobileNavContextValue {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+export const MobileNavContext = createContext<MobileNavContextValue>({
+  open: false,
+  setOpen: () => {},
+});
+
+export function useMobileNav(): MobileNavContextValue {
+  return useContext(MobileNavContext);
+}
+'@
+Set-Content -Path (Join-Path $contextDir "MobileNavContext.tsx") -Value $mobileNavContext -Encoding UTF8
+Write-Host "  [OK] MobileNavContext.tsx" -ForegroundColor Green
+
+# 2-4. Pour Layout.tsx, TopNav.tsx, ChatPage.tsx :
+# Les fichiers sont trop longs pour être inlinés proprement dans un heredoc PS1.
+# Copier les fichiers depuis une sauvegarde ou depuis ce document.
+
+Write-Host ""
+Write-Host "  [INFO] Pour Layout.tsx, TopNav.tsx et ChatPage.tsx :" -ForegroundColor Yellow
+Write-Host "  Copier les codes complets depuis RESPONSIVE_UI_PATCH.md" -ForegroundColor Yellow
+Write-Host "  sections 2, 3 et 4 respectivement." -ForegroundColor Yellow
+Write-Host ""
+Write-Host "==> MobileNavContext.tsx re-créé. Compléter manuellement les 3 autres fichiers." -ForegroundColor Cyan
+```
+
+> **Astuce :** Pour une automation complète, les codes des sections 2, 3 et 4 peuvent être stockés dans des fichiers `.patch` ou des fichiers de sauvegarde séparés (`Layout.tsx.bak`, etc.) et copiés par le script.
+
+---
+
+## Vérification
+
+Après re-application du patch, vérifier les points suivants :
+
+### Sur desktop (≥ 768px)
+
+- [ ] La TopNav affiche les onglets (Chat / Dashboard / Workflows / Settings) normalement.
+- [ ] Le bouton hamburger ☰ n'est **pas** visible.
+- [ ] Le panneau gauche (liste des conversations) est visible dans ChatPage.
+- [ ] Le drawer mobile n'apparaît pas.
+
+### Sur mobile (< 768px) — via tunnel Cloudflare ou DevTools
+
+- [ ] La TopNav affiche uniquement le bouton hamburger ☰ + le logo "Archon".
+- [ ] Les onglets de navigation sont cachés.
+- [ ] Cliquer sur ☰ ouvre le drawer latéral gauche.
+- [ ] Le drawer contient : Chat, Dashboard, Workflows, Settings.
+- [ ] Cliquer sur un lien du drawer navigue correctement et ferme le drawer.
+- [ ] Le backdrop semi-transparent est visible derrière le drawer ; cliquer dessus ferme le drawer.
+- [ ] Dans ChatPage, la zone de chat occupe toute la largeur (le panneau de conversations est masqué).
+- [ ] TypeScript compile sans erreur : `npm run build` dans `packages/web`.
+
+---
+
+## Notes techniques
+
+- **Breakpoint mobile/desktop :** `md:` = 768px (Tailwind default). Modifier dans `tailwind.config.ts` si besoin d'un seuil différent.
+- **`cn()` :** Utilitaire Tailwind merge déjà présent dans `@/lib/utils`. Aucune dépendance supplémentaire.
+- **`MobileNavContext` :** Le Provider est dans `Layout.tsx`. `TopNav` est toujours un enfant de `Layout`, donc `useMobileNav()` fonctionne partout dans l'arborescence.
+- **Lucide icons ajoutées :** `Menu` (TopNav), `X` (Layout). Ces icônes font partie de `lucide-react` déjà installé.
diff --git a/docs/cloudflare-tunnel.md b/docs/cloudflare-tunnel.md
new file mode 100644
index 0000000000..0d5103f142
--- /dev/null
+++ b/docs/cloudflare-tunnel.md
@@ -0,0 +1,35 @@
+# Cloudflare Quick Tunnel
+
+Expose the Archon web UI to the internet (phone, remote access, webhooks) without port forwarding.
+
+## Prerequisites
+
+- Archon running locally (`bun run dev`)
+- [cloudflared](https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/downloads/) installed
+
+## Quick start
+
+```bash
+# Install cloudflared (Windows)
+winget install --id Cloudflare.cloudflared
+
+# Start Archon (both server + frontend)
+bun run dev
+
+# In a separate terminal — expose the frontend
+cloudflared tunnel --url http://localhost:5173
+```
+
+The tunnel URL (e.g. `https://random-name.trycloudflare.com`) is printed in the cloudflared output.
+
+## Important notes
+
+- **URL changes** on every cloudflared restart — not suitable for permanent webhooks
+- **Frontend port is 5173** (Vite). Do not tunnel port 3090 (backend API only)
+- The Vite config has `host: true` and `allowedHosts: true` — no extra config needed
+- Quick Tunnel URLs are free, no Cloudflare account needed
+- For a permanent URL, use a [Named Tunnel](https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/get-started/) with a free Cloudflare account
+
+## SSE / real-time streaming
+
+The frontend proxies API calls (`/api/*`, `/api/stream/*`) to the backend via Vite's dev proxy. SSE streaming works through the tunnel without additional configuration.
diff --git a/eslint.config.mjs b/eslint.config.mjs
index a7ba5b4c74..0d67417150 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -27,6 +27,7 @@ export default tseslint.config(
       'packages/web/components.json',
       'packages/web/src/components/ui/**', // shadcn/ui auto-generated components
       'packages/web/src/lib/utils.ts', // shadcn/ui utility file
+      'packages/web/src/lib/useVisualViewport.ts', // pre-existing no-semicolon style — do not reformat
     ],
   },
 
diff --git a/packages/server/src/routes/api.ts b/packages/server/src/routes/api.ts
index 4bc814f685..2b496daa4f 100644
--- a/packages/server/src/routes/api.ts
+++ b/packages/server/src/routes/api.ts
@@ -1,4 +1,4 @@
-/**
+/**
  * REST API routes for the Archon Web UI.
  * Provides conversation, codebase, and SSE streaming endpoints.
  */
@@ -119,6 +119,7 @@ import {
   configResponseSchema,
   codebaseEnvironmentsResponseSchema,
 } from './schemas/config.schemas';
+import { getTunnelState, startTunnel, stopTunnel } from '../tunnel';
 
 // Read app version: use build-time constant in binary, package.json in dev
 let appVersion = 'unknown';
@@ -830,6 +831,61 @@ const getUpdateCheckRoute = createRoute({
   },
 });
 
+const getTunnelRoute = createRoute({
+  method: 'get',
+  path: '/api/tunnel',
+  tags: ['System'],
+  summary: 'Get Cloudflare tunnel status',
+  responses: {
+    200: {
+      content: {
+        'application/json': {
+          schema: z
+            .object({
+              status: z.enum(['inactive', 'starting', 'active', 'error']),
+              url: z.string().nullable(),
+            })
+            .openapi('TunnelStatusResponse'),
+        },
+      },
+      description: 'Tunnel status',
+    },
+  },
+});
+
+const postTunnelStartRoute = createRoute({
+  method: 'post',
+  path: '/api/tunnel/start',
+  tags: ['System'],
+  summary: 'Start Cloudflare tunnel',
+  responses: {
+    200: {
+      content: {
+        'application/json': {
+          schema: z.object({ status: z.string() }).openapi('TunnelStartResponse'),
+        },
+      },
+      description: 'Tunnel start initiated',
+    },
+  },
+});
+
+const deleteTunnelStopRoute = createRoute({
+  method: 'delete',
+  path: '/api/tunnel/stop',
+  tags: ['System'],
+  summary: 'Stop Cloudflare tunnel',
+  responses: {
+    200: {
+      content: {
+        'application/json': {
+          schema: z.object({ status: z.string() }).openapi('TunnelStopResponse'),
+        },
+      },
+      description: 'Tunnel stopped',
+    },
+  },
+});
 /**
  * Register all /api/* routes on the Hono app.
  */
@@ -2524,4 +2580,20 @@ export function registerApiRoutes(
     const result = await checkForUpdate(appVersion);
     return c.json(result ?? noUpdate);
   });
+  // GET /api/tunnel - Get tunnel status
+  registerOpenApiRoute(getTunnelRoute, c => {
+    return c.json(getTunnelState());
+  });
+
+  // POST /api/tunnel/start - Start tunnel
+  registerOpenApiRoute(postTunnelStartRoute, async c => {
+    await startTunnel(5173);
+    return c.json({ status: getTunnelState().status });
+  });
+
+  // DELETE /api/tunnel/stop - Stop tunnel
+  registerOpenApiRoute(deleteTunnelStopRoute, c => {
+    stopTunnel();
+    return c.json({ status: 'inactive' });
+  });
 }
diff --git a/packages/server/src/tunnel.ts b/packages/server/src/tunnel.ts
new file mode 100644
index 0000000000..5c266baf8d
--- /dev/null
+++ b/packages/server/src/tunnel.ts
@@ -0,0 +1,105 @@
+/**
+ * Cloudflare Quick Tunnel service.
+ * Spawns `cloudflared tunnel --url http://localhost:<port>` and parses the
+ * public trycloudflare.com URL from its output.
+ *
+ * Compatible with cloudflared v2025+ which outputs the URL inside an ASCII box
+ * on stderr, prefixed with ANSI color codes and a timestamp log prefix.
+ */
+import { spawn, type ChildProcess } from 'child_process';
+
+interface TunnelState {
+  process: ChildProcess | null;
+  url: string | null;
+  status: 'inactive' | 'starting' | 'active' | 'error';
+}
+
+const state: TunnelState = { process: null, url: null, status: 'inactive' };
+
+/** Strip ANSI escape codes from a string */
+function stripAnsi(str: string): string {
+  // eslint-disable-next-line no-control-regex
+  return str.replace(/\x1B\[[0-9;]*[mGKHF]/g, '');
+}
+
+/** Multiple URL patterns to handle different cloudflared output formats */
+const URL_PATTERNS: RegExp[] = [
+  // Direct URL anywhere in the line (all versions)
+  /https:\/\/[a-z0-9-]+\.trycloudflare\.com/i,
+  // "Visit it at: <url>" format (v2025+)
+  /Visit it at[^:]*:\s*(https:\/\/\S+trycloudflare\.com)/i,
+  // JSON log format: {"url":"https://..."}
+  /"url"\s*:\s*"(https:\/\/[^"]+trycloudflare\.com)"/,
+];
+
+/** Extract a trycloudflare.com URL from a chunk of text (after stripping ANSI) */
+function extractUrl(raw: string): string | null {
+  const text = stripAnsi(raw);
+  for (const pattern of URL_PATTERNS) {
+    const match = text.match(pattern);
+    if (match) {
+      // If the pattern has a capture group, use group 1; otherwise use the full match
+      return match[1] ?? match[0];
+    }
+  }
+  return null;
+}
+
+export function getTunnelState(): { url: string | null; status: TunnelState['status'] } {
+  return { url: state.url, status: state.status };
+}
+
+export async function startTunnel(port = 5173): Promise<void> {
+  if (state.process) return;
+  state.status = 'starting';
+  state.url = null;
+
+  const proc = spawn('cloudflared', ['tunnel', '--url', `http://localhost:${port}`], {
+    stdio: ['ignore', 'pipe', 'pipe'],
+  });
+
+  state.process = proc;
+
+  // Accumulate output to handle multi-chunk delivery
+  let stdoutBuffer = '';
+  let stderrBuffer = '';
+
+  const handleChunk = (buffer: string, chunk: Buffer): string => {
+    buffer += chunk.toString();
+    if (!state.url) {
+      const url = extractUrl(buffer);
+      if (url) {
+        state.url = url;
+        state.status = 'active';
+      }
+    }
+    return buffer;
+  };
+
+  proc.stdout?.on('data', (chunk: Buffer) => {
+    stdoutBuffer = handleChunk(stdoutBuffer, chunk);
+  });
+
+  proc.stderr?.on('data', (chunk: Buffer) => {
+    stderrBuffer = handleChunk(stderrBuffer, chunk);
+  });
+
+  proc.on('exit', () => {
+    state.process = null;
+    state.url = null;
+    state.status = 'inactive';
+  });
+
+  proc.on('error', () => {
+    state.process = null;
+    state.url = null;
+    state.status = 'error';
+  });
+}
+
+export function stopTunnel(): void {
+  state.process?.kill();
+  state.process = null;
+  state.url = null;
+  state.status = 'inactive';
+}
diff --git a/packages/web/index.html b/packages/web/index.html
index 9a4706addc..a50d2abc95 100644
--- a/packages/web/index.html
+++ b/packages/web/index.html
@@ -1,24 +1,30 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" type="image/png" href="/favicon.png" />
-    <title>Archon</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
-      rel="stylesheet"
-    />
-    <style>
-      body {
-        background-color: #0f1117;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <!--
+      interactive-widget=resizes-content  → Chrome Android resizes the layout
+      viewport when the soft keyboard appears, instead of overlapping it.
+      This works in tandem with the useVisualViewport hook so the chat input
+      is always visible above the keyboard on all mobile browsers.
+    -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content" />
+    <link rel="icon" type="image/png" href="/favicon.png" />
+    <title>Archon</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
+      rel="stylesheet"
+    />
+    <style>
+      body {
+        background-color: #0f1117;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/packages/web/src/App.tsx b/packages/web/src/App.tsx
index d308640c9e..82fff416d7 100644
--- a/packages/web/src/App.tsx
+++ b/packages/web/src/App.tsx
@@ -4,6 +4,7 @@ import { BrowserRouter, Routes, Route, Navigate } from 'react-router';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { Layout } from '@/components/layout/Layout';
 import { ProjectProvider } from '@/contexts/ProjectContext';
+import { ThemeProvider } from '@/contexts/ThemeContext';
 import { queryClient } from '@/lib/query-client';
 import { DashboardPage } from '@/routes/DashboardPage';
 import { ChatPage } from '@/routes/ChatPage';
@@ -63,25 +64,28 @@ class ErrorBoundary extends Component<{ children: ReactNode }, ErrorBoundaryStat
 export function App(): React.ReactElement {
   return (
     <ErrorBoundary>
-      <QueryClientProvider client={queryClient}>
-        <ProjectProvider>
-          <BrowserRouter>
-            <Routes>
-              <Route element={<Layout />}>
-                <Route path="/" element={<Navigate to="/chat" replace />} />
-                <Route path="/chat" element={<ChatPage />} />
-                <Route path="/chat/*" element={<ChatPage />} />
-                <Route path="/dashboard" element={<DashboardPage />} />
-                <Route path="/workflows" element={<WorkflowsPage />} />
-                <Route path="/workflows/builder" element={<WorkflowBuilderPage />} />
-                <Route path="/workflows/runs/:runId" element={<WorkflowExecutionPage />} />
-                <Route path="/workflows/runs" element={<Navigate to="/workflows" replace />} />
-                <Route path="/settings" element={<SettingsPage />} />
-              </Route>
-            </Routes>
-          </BrowserRouter>
-        </ProjectProvider>
-      </QueryClientProvider>
+      <ThemeProvider>
+        <QueryClientProvider client={queryClient}>
+          <ProjectProvider>
+            <BrowserRouter>
+              <Routes>
+                <Route element={<Layout />}>
+                  <Route path="/" element={<Navigate to="/chat" replace />} />
+                  <Route path="/chat" element={<ChatPage />} />
+                  <Route path="/chat/*" element={<ChatPage />} />
+                  <Route path="/dashboard" element={<DashboardPage />} />
+                  <Route path="/workflows" element={<WorkflowsPage />} />
+                  <Route path="/workflows/builder" element={<WorkflowBuilderPage />} />
+                  <Route path="/workflows/runs/:runId" element={<WorkflowExecutionPage />} />
+                  <Route path="/workflows/runs" element={<Navigate to="/workflows" replace />} />
+                  <Route path="/settings" element={<SettingsPage />} />
+                  <Route path="*" element={<Navigate to="/chat" replace />} />
+                </Route>
+              </Routes>
+            </BrowserRouter>
+          </ProjectProvider>
+        </QueryClientProvider>
+      </ThemeProvider>
     </ErrorBoundary>
   );
 }
diff --git a/packages/web/src/components/chat/MessageInput.tsx b/packages/web/src/components/chat/MessageInput.tsx
index 2badb7ac65..b5bdde0d24 100644
--- a/packages/web/src/components/chat/MessageInput.tsx
+++ b/packages/web/src/components/chat/MessageInput.tsx
@@ -1,338 +1,342 @@
-import {
-  useState,
-  useRef,
-  useCallback,
-  forwardRef,
-  useImperativeHandle,
-  type KeyboardEvent,
-  type DragEvent,
-  type ClipboardEvent,
-} from 'react';
-import { ArrowUp, Loader2, Paperclip, X } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-
-/** Binary (non-text) MIME types explicitly accepted */
-const ACCEPTED_BINARY_MIME_TYPES = new Set([
-  'image/png',
-  'image/jpeg',
-  'image/gif',
-  'image/webp',
-  'application/pdf',
-  // application/json may be reported by browsers for .json files
-  'application/json',
-]);
-
-/** Extensions for the file-picker `accept` attribute. Covers images, PDFs, and text/code files. */
-const ACCEPTED_EXTENSIONS_LIST = [
-  // Images
-  '.png',
-  '.jpg',
-  '.jpeg',
-  '.gif',
-  '.webp',
-  // Documents
-  '.pdf',
-  // Text / markup
-  '.md',
-  '.txt',
-  '.csv',
-  '.xml',
-  '.html',
-  '.htm',
-  // Data / config
-  '.json',
-  '.yaml',
-  '.yml',
-  '.toml',
-  '.ini',
-  '.cfg',
-  '.conf',
-  '.env',
-  '.log',
-  // Web
-  '.css',
-  '.js',
-  '.jsx',
-  '.ts',
-  '.tsx',
-  '.mjs',
-  '.cjs',
-  // Systems / scripting
-  '.py',
-  '.rb',
-  '.go',
-  '.java',
-  '.c',
-  '.cpp',
-  '.cc',
-  '.cxx',
-  '.h',
-  '.hpp',
-  '.cs',
-  '.php',
-  '.sh',
-  '.bash',
-  '.zsh',
-  '.fish',
-  '.rs',
-  '.swift',
-  '.kt',
-  '.scala',
-  '.r',
-  '.sql',
-];
-
-/** Comma-separated string for the file input `accept` attribute */
-const ACCEPTED_EXTENSIONS = ACCEPTED_EXTENSIONS_LIST.join(',');
-
-/** Set for O(1) extension lookup in validation */
-const ACCEPTED_EXTENSIONS_SET = new Set(ACCEPTED_EXTENSIONS_LIST);
-
-/** Returns true if the file type is accepted (any text/* or an explicitly allowed binary). */
-function isAcceptedFileType(file: File): boolean {
-  if (file.type.startsWith('text/')) return true;
-  if (ACCEPTED_BINARY_MIME_TYPES.has(file.type)) return true;
-  // Browsers assign empty MIME types to many code/config extensions (.md, .py, .rs, etc.)
-  // Fall back to checking the file extension from the accepted list
-  const dotIndex = file.name.lastIndexOf('.');
-  if (dotIndex !== -1) {
-    const ext = file.name.slice(dotIndex).toLowerCase();
-    return ACCEPTED_EXTENSIONS_SET.has(ext);
-  }
-  return false;
-}
-
-const MAX_FILE_BYTES = 10 * 1024 * 1024; // 10 MB
-const MAX_FILES = 5;
-
-interface MessageInputProps {
-  onSend: (message: string, files?: File[]) => void;
-  disabled: boolean;
-  disabledReason?: string;
-}
-
-export interface MessageInputHandle {
-  focus: () => void;
-}
-
-function formatBytes(bytes: number): string {
-  if (bytes < 1024) return `${String(bytes)} B`;
-  if (bytes < 1024 * 1024) return `${String(Math.round(bytes / 1024))} KB`;
-  return `${String(Math.round(bytes / (1024 * 1024)))} MB`;
-}
-
-const messageInput = forwardRef<MessageInputHandle, MessageInputProps>(function MessageInputInner(
-  { onSend, disabled, disabledReason }: MessageInputProps,
-  ref
-): React.ReactElement {
-  const [value, setValue] = useState('');
-  const [files, setFiles] = useState<{ file: File; id: string }[]>([]);
-  const [dragging, setDragging] = useState(false);
-  const [fileError, setFileError] = useState<string | null>(null);
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-  const fileInputRef = useRef<HTMLInputElement>(null);
-
-  useImperativeHandle(ref, () => ({
-    focus: (): void => {
-      textareaRef.current?.focus();
-    },
-  }));
-
-  const addFiles = useCallback((incoming: File[]): void => {
-    setFileError(null);
-    setFiles(prev => {
-      const combined = [...prev];
-      const rejections: string[] = [];
-      for (const file of incoming) {
-        if (combined.length >= MAX_FILES) {
-          rejections.push(`Maximum ${String(MAX_FILES)} files per message`);
-          break;
-        }
-        if (file.size > MAX_FILE_BYTES) {
-          rejections.push(`"${file.name}" exceeds the 10 MB size limit`);
-          continue;
-        }
-        if (!isAcceptedFileType(file)) {
-          rejections.push(`"${file.name}" is not a supported file type`);
-          continue;
-        }
-        combined.push({ file, id: crypto.randomUUID() });
-      }
-      if (rejections.length > 0) {
-        setFileError(rejections.join('; '));
-      }
-      return combined;
-    });
-  }, []);
-
-  const removeFile = useCallback((id: string): void => {
-    setFiles(prev => prev.filter(f => f.id !== id));
-    setFileError(null);
-  }, []);
-
-  const handleSend = useCallback((): void => {
-    const trimmed = value.trim();
-    if (!trimmed || disabled) return;
-    onSend(trimmed, files.length > 0 ? files.map(f => f.file) : undefined);
-    setValue('');
-    setFiles([]);
-    setFileError(null);
-    if (fileInputRef.current) fileInputRef.current.value = '';
-    // Reset textarea height
-    if (textareaRef.current) {
-      textareaRef.current.style.height = 'auto';
-      textareaRef.current.focus();
-    }
-  }, [value, disabled, onSend, files]);
-
-  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>): void => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      handleSend();
-    }
-  };
-
-  const handleInput = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {
-    setValue(e.target.value);
-    // Auto-expand textarea
-    const textarea = e.target;
-    textarea.style.height = 'auto';
-    const newHeight = Math.min(textarea.scrollHeight, 200);
-    textarea.style.height = `${String(newHeight)}px`;
-    textarea.style.overflowY = newHeight >= 200 ? 'auto' : 'hidden';
-  };
-
-  const handleFilePickerChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
-    if (e.target.files) addFiles(Array.from(e.target.files));
-  };
-
-  const handleDragOver = (e: DragEvent<HTMLDivElement>): void => {
-    e.preventDefault();
-    setDragging(true);
-  };
-
-  const handleDragLeave = (e: DragEvent<HTMLDivElement>): void => {
-    // Only clear dragging when leaving the outer container, not a child element
-    if (!e.currentTarget.contains(e.relatedTarget as Node | null)) {
-      setDragging(false);
-    }
-  };
-
-  const handleDrop = (e: DragEvent<HTMLDivElement>): void => {
-    e.preventDefault();
-    setDragging(false);
-    if (e.dataTransfer.files.length > 0) addFiles(Array.from(e.dataTransfer.files));
-  };
-
-  const handlePaste = (e: ClipboardEvent<HTMLTextAreaElement>): void => {
-    const imageItems = Array.from(e.clipboardData.items).filter(item =>
-      item.type.startsWith('image/')
-    );
-    if (imageItems.length === 0) return;
-    const pastedFiles: File[] = [];
-    for (const item of imageItems) {
-      const file = item.getAsFile();
-      if (file) pastedFiles.push(file);
-    }
-    if (pastedFiles.length > 0) {
-      e.preventDefault();
-      addFiles(pastedFiles);
-    }
-  };
-
-  return (
-    <div
-      className={`border-t border-border bg-surface p-4 transition-colors${dragging ? ' bg-primary/5' : ''}`}
-      title={disabledReason}
-      onDragOver={handleDragOver}
-      onDragLeave={handleDragLeave}
-      onDrop={handleDrop}
-    >
-      <div className="mx-auto flex max-w-3xl flex-col gap-2">
-        {/* File preview chips */}
-        {files.length > 0 && (
-          <div className="flex flex-wrap gap-1">
-            {files.map(({ file, id }) => (
-              <div
-                key={id}
-                className="flex items-center gap-1 rounded-md border border-border bg-background px-2 py-1 text-xs text-text-secondary"
-              >
-                <span className="max-w-[140px] truncate" title={file.name}>
-                  {file.name}
-                </span>
-                <span className="text-text-tertiary">({formatBytes(file.size)})</span>
-                <button
-                  type="button"
-                  onClick={() => {
-                    removeFile(id);
-                  }}
-                  className="ml-1 text-text-tertiary hover:text-text-primary"
-                  aria-label={`Remove ${file.name}`}
-                >
-                  <X className="h-3 w-3" />
-                </button>
-              </div>
-            ))}
-          </div>
-        )}
-
-        {/* File error */}
-        {fileError !== null && <p className="text-xs text-destructive">{fileError}</p>}
-
-        {/* Input row */}
-        <div className="flex items-end gap-2">
-          {/* Hidden file input */}
-          <input
-            ref={fileInputRef}
-            type="file"
-            multiple
-            accept={ACCEPTED_EXTENSIONS}
-            className="hidden"
-            onChange={handleFilePickerChange}
-            disabled={disabled}
-          />
-
-          {/* Attach button */}
-          <Button
-            type="button"
-            variant="ghost"
-            size="icon"
-            disabled={disabled || files.length >= MAX_FILES}
-            onClick={() => fileInputRef.current?.click()}
-            className="h-10 w-10 shrink-0 text-text-tertiary hover:text-text-primary"
-            title="Attach file"
-          >
-            <Paperclip className="h-4 w-4" />
-          </Button>
-
-          <textarea
-            ref={textareaRef}
-            value={value}
-            onChange={handleInput}
-            onKeyDown={handleKeyDown}
-            onPaste={handlePaste}
-            disabled={disabled}
-            placeholder={dragging ? 'Drop files here...' : (disabledReason ?? 'Message Archon...')}
-            rows={1}
-            className="flex-1 resize-none overflow-hidden rounded-lg border border-border bg-background px-4 py-2 text-sm leading-6 text-text-primary placeholder:text-text-tertiary focus:border-primary focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-            style={{ minHeight: '40px', maxHeight: '200px' }}
-          />
-          <Button
-            onClick={handleSend}
-            disabled={disabled || !value.trim()}
-            size="icon"
-            className="h-10 w-10 shrink-0 rounded-lg bg-primary text-primary-foreground hover:bg-accent-hover disabled:opacity-50"
-          >
-            {disabled && !disabledReason ? (
-              <Loader2 className="h-4 w-4 animate-spin" />
-            ) : (
-              <ArrowUp className="h-4 w-4" />
-            )}
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-});
-
-export { messageInput as MessageInput };
+import {
+  useState,
+  useRef,
+  useCallback,
+  forwardRef,
+  useImperativeHandle,
+  type KeyboardEvent,
+  type DragEvent,
+  type ClipboardEvent,
+} from 'react';
+import { ArrowUp, Loader2, Paperclip, X } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+/** Binary (non-text) MIME types explicitly accepted */
+const ACCEPTED_BINARY_MIME_TYPES = new Set([
+  'image/png',
+  'image/jpeg',
+  'image/gif',
+  'image/webp',
+  'application/pdf',
+  // application/json may be reported by browsers for .json files
+  'application/json',
+]);
+
+/** Extensions for the file-picker `accept` attribute. Covers images, PDFs, and text/code files. */
+const ACCEPTED_EXTENSIONS_LIST = [
+  // Images
+  '.png',
+  '.jpg',
+  '.jpeg',
+  '.gif',
+  '.webp',
+  // Documents
+  '.pdf',
+  // Text / markup
+  '.md',
+  '.txt',
+  '.csv',
+  '.xml',
+  '.html',
+  '.htm',
+  // Data / config
+  '.json',
+  '.yaml',
+  '.yml',
+  '.toml',
+  '.ini',
+  '.cfg',
+  '.conf',
+  '.env',
+  '.log',
+  // Web
+  '.css',
+  '.js',
+  '.jsx',
+  '.ts',
+  '.tsx',
+  '.mjs',
+  '.cjs',
+  // Systems / scripting
+  '.py',
+  '.rb',
+  '.go',
+  '.java',
+  '.c',
+  '.cpp',
+  '.cc',
+  '.cxx',
+  '.h',
+  '.hpp',
+  '.cs',
+  '.php',
+  '.sh',
+  '.bash',
+  '.zsh',
+  '.fish',
+  '.rs',
+  '.swift',
+  '.kt',
+  '.scala',
+  '.r',
+  '.sql',
+];
+
+/** Comma-separated string for the file input `accept` attribute */
+const ACCEPTED_EXTENSIONS = ACCEPTED_EXTENSIONS_LIST.join(',');
+
+/** Set for O(1) extension lookup in validation */
+const ACCEPTED_EXTENSIONS_SET = new Set(ACCEPTED_EXTENSIONS_LIST);
+
+/** Returns true if the file type is accepted (any text/* or an explicitly allowed binary). */
+function isAcceptedFileType(file: File): boolean {
+  if (file.type.startsWith('text/')) return true;
+  if (ACCEPTED_BINARY_MIME_TYPES.has(file.type)) return true;
+  // Browsers assign empty MIME types to many code/config extensions (.md, .py, .rs, etc.)
+  // Fall back to checking the file extension from the accepted list
+  const dotIndex = file.name.lastIndexOf('.');
+  if (dotIndex !== -1) {
+    const ext = file.name.slice(dotIndex).toLowerCase();
+    return ACCEPTED_EXTENSIONS_SET.has(ext);
+  }
+  return false;
+}
+
+const MAX_FILE_BYTES = 10 * 1024 * 1024; // 10 MB
+const MAX_FILES = 5;
+
+interface MessageInputProps {
+  onSend: (message: string, files?: File[]) => void;
+  disabled: boolean;
+  disabledReason?: string;
+}
+
+export interface MessageInputHandle {
+  focus: () => void;
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${String(bytes)} B`;
+  if (bytes < 1024 * 1024) return `${String(Math.round(bytes / 1024))} KB`;
+  return `${String(Math.round(bytes / (1024 * 1024)))} MB`;
+}
+
+const messageInput = forwardRef<MessageInputHandle, MessageInputProps>(function MessageInputInner(
+  { onSend, disabled, disabledReason }: MessageInputProps,
+  ref
+): React.ReactElement {
+  const [value, setValue] = useState('');
+  const [files, setFiles] = useState<{ file: File; id: string }[]>([]);
+  const [dragging, setDragging] = useState(false);
+  const [fileError, setFileError] = useState<string | null>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  useImperativeHandle(ref, () => ({
+    focus: (): void => {
+      textareaRef.current?.focus();
+    },
+  }));
+
+  const addFiles = useCallback((incoming: File[]): void => {
+    setFileError(null);
+    setFiles(prev => {
+      const combined = [...prev];
+      const rejections: string[] = [];
+      for (const file of incoming) {
+        if (combined.length >= MAX_FILES) {
+          rejections.push(`Maximum ${String(MAX_FILES)} files per message`);
+          break;
+        }
+        if (file.size > MAX_FILE_BYTES) {
+          rejections.push(`"${file.name}" exceeds the 10 MB size limit`);
+          continue;
+        }
+        if (!isAcceptedFileType(file)) {
+          rejections.push(`"${file.name}" is not a supported file type`);
+          continue;
+        }
+        combined.push({ file, id: crypto.randomUUID() });
+      }
+      if (rejections.length > 0) {
+        setFileError(rejections.join('; '));
+      }
+      return combined;
+    });
+  }, []);
+
+  const removeFile = useCallback((id: string): void => {
+    setFiles(prev => prev.filter(f => f.id !== id));
+    setFileError(null);
+  }, []);
+
+  const handleSend = useCallback((): void => {
+    const trimmed = value.trim();
+    if (!trimmed || disabled) return;
+    onSend(trimmed, files.length > 0 ? files.map(f => f.file) : undefined);
+    setValue('');
+    setFiles([]);
+    setFileError(null);
+    if (fileInputRef.current) fileInputRef.current.value = '';
+    // Reset textarea height
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto';
+      textareaRef.current.focus();
+    }
+  }, [value, disabled, onSend, files]);
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>): void => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  const handleInput = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {
+    setValue(e.target.value);
+    // Auto-expand textarea
+    const textarea = e.target;
+    textarea.style.height = 'auto';
+    const newHeight = Math.min(textarea.scrollHeight, 200);
+    textarea.style.height = `${String(newHeight)}px`;
+    textarea.style.overflowY = newHeight >= 200 ? 'auto' : 'hidden';
+  };
+
+  const handleFilePickerChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    if (e.target.files) addFiles(Array.from(e.target.files));
+  };
+
+  const handleDragOver = (e: DragEvent<HTMLDivElement>): void => {
+    e.preventDefault();
+    setDragging(true);
+  };
+
+  const handleDragLeave = (e: DragEvent<HTMLDivElement>): void => {
+    // Only clear dragging when leaving the outer container, not a child element
+    if (!e.currentTarget.contains(e.relatedTarget as Node | null)) {
+      setDragging(false);
+    }
+  };
+
+  const handleDrop = (e: DragEvent<HTMLDivElement>): void => {
+    e.preventDefault();
+    setDragging(false);
+    if (e.dataTransfer.files.length > 0) addFiles(Array.from(e.dataTransfer.files));
+  };
+
+  const handlePaste = (e: ClipboardEvent<HTMLTextAreaElement>): void => {
+    const imageItems = Array.from(e.clipboardData.items).filter(item =>
+      item.type.startsWith('image/')
+    );
+    if (imageItems.length === 0) return;
+    const pastedFiles: File[] = [];
+    for (const item of imageItems) {
+      const file = item.getAsFile();
+      if (file) pastedFiles.push(file);
+    }
+    if (pastedFiles.length > 0) {
+      e.preventDefault();
+      addFiles(pastedFiles);
+    }
+  };
+
+  return (
+    // flex-shrink-0 prevents this bar from being compressed inside the flex-col ChatInterface.
+    // The inline paddingBottom uses env(safe-area-inset-bottom) so it clears the iOS home
+    // indicator / Android gesture bar — max() ensures we keep at least 1rem of breathing room.
+    <div
+      className={`flex-shrink-0 border-t border-border bg-surface px-4 pt-4 transition-colors${dragging ? ' bg-primary/5' : ''}`}
+      style={{ paddingBottom: 'max(1rem, env(safe-area-inset-bottom))' }}
+      title={disabledReason}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+    >
+      <div className="mx-auto flex max-w-3xl flex-col gap-2">
+        {/* File preview chips */}
+        {files.length > 0 && (
+          <div className="flex flex-wrap gap-1">
+            {files.map(({ file, id }) => (
+              <div
+                key={id}
+                className="flex items-center gap-1 rounded-md border border-border bg-background px-2 py-1 text-xs text-text-secondary"
+              >
+                <span className="max-w-[140px] truncate" title={file.name}>
+                  {file.name}
+                </span>
+                <span className="text-text-tertiary">({formatBytes(file.size)})</span>
+                <button
+                  type="button"
+                  onClick={() => {
+                    removeFile(id);
+                  }}
+                  className="ml-1 text-text-tertiary hover:text-text-primary"
+                  aria-label={`Remove ${file.name}`}
+                >
+                  <X className="h-3 w-3" />
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* File error */}
+        {fileError !== null && <p className="text-xs text-destructive">{fileError}</p>}
+
+        {/* Input row */}
+        <div className="flex items-end gap-2">
+          {/* Hidden file input */}
+          <input
+            ref={fileInputRef}
+            type="file"
+            multiple
+            accept={ACCEPTED_EXTENSIONS}
+            className="hidden"
+            onChange={handleFilePickerChange}
+            disabled={disabled}
+          />
+
+          {/* Attach button */}
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            disabled={disabled || files.length >= MAX_FILES}
+            onClick={() => fileInputRef.current?.click()}
+            className="h-10 w-10 shrink-0 text-text-tertiary hover:text-text-primary"
+            title="Attach file"
+          >
+            <Paperclip className="h-4 w-4" />
+          </Button>
+
+          <textarea
+            ref={textareaRef}
+            value={value}
+            onChange={handleInput}
+            onKeyDown={handleKeyDown}
+            onPaste={handlePaste}
+            disabled={disabled}
+            placeholder={dragging ? 'Drop files here...' : (disabledReason ?? 'Message Archon...')}
+            rows={1}
+            className="flex-1 resize-none overflow-hidden rounded-lg border border-border bg-background px-4 py-2 text-sm leading-6 text-text-primary placeholder:text-text-tertiary focus:border-primary focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+            style={{ minHeight: '40px', maxHeight: '200px' }}
+          />
+          <Button
+            onClick={handleSend}
+            disabled={disabled || !value.trim()}
+            size="icon"
+            className="h-10 w-10 shrink-0 rounded-lg bg-primary text-primary-foreground hover:bg-accent-hover disabled:opacity-50"
+          >
+            {disabled && !disabledReason ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <ArrowUp className="h-4 w-4" />
+            )}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+});
+
+export { messageInput as MessageInput };
diff --git a/packages/web/src/components/conversations/ConversationItem.tsx b/packages/web/src/components/conversations/ConversationItem.tsx
index c996e61cb6..3fc656986f 100644
--- a/packages/web/src/components/conversations/ConversationItem.tsx
+++ b/packages/web/src/components/conversations/ConversationItem.tsx
@@ -37,7 +37,9 @@ export function ConversationItem({
   const inputRef = useRef<HTMLInputElement>(null);
   const queryClient = useQueryClient();
   const navigate = useNavigate();
-  const params = useParams<{ conversationId: string }>();
+  const params = useParams<{ '*': string }>();
+  // Route changed from /chat/:conversationId to /chat/* — extract and decode the wildcard segment
+  const currentConvId = params['*'] ? decodeURIComponent(params['*']) : undefined;
 
   const displayName = conversation.title
     ? conversation.title.length > 30
@@ -64,7 +66,7 @@ export function ConversationItem({
       .then(() => {
         setDeleteDialogOpen(false);
         void queryClient.invalidateQueries({ queryKey: ['conversations'] });
-        if (params.conversationId === conversation.platform_conversation_id) {
+        if (currentConvId === conversation.platform_conversation_id) {
           void navigate('/');
         }
       })
@@ -72,7 +74,7 @@ export function ConversationItem({
         setDeleteError(err instanceof Error ? err.message : 'Failed to delete conversation');
         setDeleteDialogOpen(true);
       });
-  }, [conversation.platform_conversation_id, queryClient, navigate, params.conversationId]);
+  }, [conversation.platform_conversation_id, queryClient, navigate, currentConvId]);
 
   const handleRenameSubmit = useCallback((): void => {
     const trimmed = editValue.trim();
diff --git a/packages/web/src/components/layout/Layout.tsx b/packages/web/src/components/layout/Layout.tsx
index a858364446..f758898454 100644
--- a/packages/web/src/components/layout/Layout.tsx
+++ b/packages/web/src/components/layout/Layout.tsx
@@ -1,13 +1,132 @@
-import { Outlet } from 'react-router';
+import { useState } from 'react';
+import { Outlet, NavLink } from 'react-router';
+import { MessageSquare, LayoutDashboard, Workflow, Settings, X } from 'lucide-react';
 import { TopNav } from './TopNav';
+import { MobileNavContext } from '@/contexts/MobileNavContext';
+import { useTheme } from '@/contexts/ThemeContext';
+import { useVisualViewport } from '@/lib/useVisualViewport';
+import { cn } from '@/lib/utils';
+
+const navItems = [
+  { to: '/chat', end: false, icon: MessageSquare, label: 'Chat' },
+  { to: '/dashboard', end: true, icon: LayoutDashboard, label: 'Dashboard' },
+  { to: '/workflows', end: false, icon: Workflow, label: 'Workflows' },
+] as const;
 
 export function Layout(): React.ReactElement {
+  const [open, setOpen] = useState(false);
+  const { compactLayout } = useTheme();
+
+  // Use the visual viewport height instead of h-dvh / h-screen so the layout
+  // correctly shrinks when the soft keyboard appears on mobile (iOS Safari and
+  // Chrome Android). This prevents the chat input from being hidden behind the
+  // keyboard.
+  const vpHeight = useVisualViewport();
+
   return (
-    <div className="flex h-screen flex-col bg-background">
-      <TopNav />
-      <main className="flex flex-1 flex-col overflow-hidden">
-        <Outlet />
-      </main>
-    </div>
+    <MobileNavContext.Provider value={{ open, setOpen }}>
+      {/* Height is driven by visualViewport so it follows the keyboard on mobile */}
+      <div
+        className="flex flex-col bg-background overflow-hidden"
+        style={{ height: `${vpHeight}px` }}
+      >
+        <TopNav />
+
+        {/* ── Mobile nav overlay backdrop ── */}
+        {open && (
+          <div
+            className={cn(
+              'fixed inset-x-0 top-12 bottom-0 z-40 bg-black/60',
+              compactLayout ? '' : 'md:hidden'
+            )}
+            onClick={() => {
+              setOpen(false);
+            }}
+            aria-hidden="true"
+          />
+        )}
+
+        {/* ── Mobile nav drawer ── */}
+        <aside
+          className={cn(
+            'fixed top-12 bottom-0 left-0 z-50 flex w-72 flex-col border-r border-border shadow-2xl',
+            'transition-transform duration-300 ease-in-out',
+            compactLayout ? '' : 'md:hidden',
+            open ? 'translate-x-0' : '-translate-x-full'
+          )}
+          style={{ backgroundColor: 'var(--surface)' }}
+          aria-label="Mobile navigation"
+        >
+          {/* Drawer header */}
+          <div className="flex items-center justify-between px-4 py-3 border-b border-border">
+            <div className="flex items-center gap-2">
+              <div className="flex h-7 w-7 items-center justify-center rounded-md bg-primary">
+                <span className="text-sm font-semibold text-primary-foreground">A</span>
+              </div>
+              <span className="text-sm font-semibold text-text-primary">Archon</span>
+            </div>
+            <button
+              onClick={() => {
+                setOpen(false);
+              }}
+              className="flex items-center justify-center rounded-md p-1.5 text-text-secondary hover:bg-surface-elevated hover:text-text-primary transition-colors"
+              aria-label="Close menu"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          </div>
+
+          {/* Navigation links */}
+          <nav className="flex-1 overflow-y-auto p-2 pt-3">
+            {navItems.map(({ to, end, icon: Icon, label }) => (
+              <NavLink
+                key={to}
+                to={to}
+                end={end}
+                onClick={() => {
+                  setOpen(false);
+                }}
+                className={({ isActive }: { isActive: boolean }): string =>
+                  cn(
+                    'flex items-center gap-3 w-full rounded-md px-3 py-2.5 text-sm font-medium transition-colors mb-0.5',
+                    isActive
+                      ? 'bg-accent text-primary'
+                      : 'text-text-secondary hover:bg-surface-elevated hover:text-text-primary'
+                  )
+                }
+              >
+                <Icon className="h-4 w-4 shrink-0" />
+                {label}
+              </NavLink>
+            ))}
+          </nav>
+
+          {/* Settings — pinned at bottom */}
+          <div className="p-2 border-t border-border">
+            <NavLink
+              to="/settings"
+              onClick={() => {
+                setOpen(false);
+              }}
+              className={({ isActive }: { isActive: boolean }): string =>
+                cn(
+                  'flex items-center gap-3 w-full rounded-md px-3 py-2.5 text-sm font-medium transition-colors',
+                  isActive
+                    ? 'bg-accent text-primary'
+                    : 'text-text-secondary hover:bg-surface-elevated hover:text-text-primary'
+                )
+              }
+            >
+              <Settings className="h-4 w-4 shrink-0" />
+              Settings
+            </NavLink>
+          </div>
+        </aside>
+
+        <main className="flex flex-1 flex-col overflow-hidden min-h-0">
+          <Outlet />
+        </main>
+      </div>
+    </MobileNavContext.Provider>
   );
 }
diff --git a/packages/web/src/components/layout/TopNav.tsx b/packages/web/src/components/layout/TopNav.tsx
index 45924f5004..d2b822a3ee 100644
--- a/packages/web/src/components/layout/TopNav.tsx
+++ b/packages/web/src/components/layout/TopNav.tsx
@@ -1,8 +1,11 @@
-import { NavLink, Link } from 'react-router';
+import { NavLink, Link } from 'react-router';
 import { useQuery } from '@tanstack/react-query';
-import { LayoutDashboard, MessageSquare, Workflow, Settings } from 'lucide-react';
+import { LayoutDashboard, MessageSquare, Workflow, Settings, Menu, Sun, Moon } from 'lucide-react';
 import { listWorkflowRuns, getUpdateCheck } from '@/lib/api';
 import { cn } from '@/lib/utils';
+import { useMobileNav } from '@/contexts/MobileNavContext';
+import { TunnelPopover } from './TunnelPopover';
+import { useTheme } from '@/contexts/ThemeContext';
 
 const tabs = [
   { to: '/chat', end: false, icon: MessageSquare, label: 'Chat' },
@@ -12,6 +15,9 @@ const tabs = [
 ] as const;
 
 export function TopNav(): React.ReactElement {
+  const { setOpen } = useMobileNav();
+  const { theme, toggleTheme } = useTheme();
+
   const { data: runningRuns } = useQuery({
     queryKey: ['workflowRuns', { status: 'running' }],
     queryFn: () => listWorkflowRuns({ status: 'running', limit: 1 }),
@@ -29,35 +35,52 @@ export function TopNav(): React.ReactElement {
 
   return (
     <nav className="flex items-center gap-1 border-b border-border bg-surface px-4">
+      {/* ── Mobile: hamburger button (hidden on desktop) ── */}
+      <button
+        onClick={() => {
+          setOpen(true);
+        }}
+        className="flex items-center justify-center rounded-md p-1.5 mr-2 text-text-secondary hover:bg-surface-elevated hover:text-text-primary transition-colors md:hidden"
+        aria-label="Open menu"
+      >
+        <Menu className="h-5 w-5" />
+      </button>
+
       {/* Brand logo */}
       <Link to="/chat" className="flex items-center gap-2 mr-4 hover:opacity-80 transition-opacity">
         <div className="flex h-7 w-7 items-center justify-center rounded-md bg-primary">
           <span className="text-sm font-semibold text-primary-foreground">A</span>
         </div>
+        {/* Logo text: always visible */}
         <span className="text-sm font-semibold text-text-primary">Archon</span>
       </Link>
 
-      {tabs.map(({ to, end, icon: Icon, label }) => (
-        <NavLink
-          key={to}
-          to={to}
-          end={end}
-          className={({ isActive }: { isActive: boolean }): string =>
-            cn(
-              'flex items-center gap-2 px-3 py-3 text-sm font-medium border-b-2 transition-colors',
-              isActive
-                ? 'border-primary text-primary'
-                : 'border-transparent text-text-secondary hover:text-text-primary'
-            )
-          }
-        >
-          <Icon className="h-4 w-4" />
-          {label}
-          {to === '/dashboard' && hasRunning && (
-            <span className="flex h-2 w-2 rounded-full bg-primary animate-pulse" />
-          )}
-        </NavLink>
-      ))}
+      {/* ── Desktop nav tabs (hidden on mobile) ── */}
+      <div className="hidden md:flex items-center gap-1">
+        {tabs.map(({ to, end, icon: Icon, label }) => (
+          <NavLink
+            key={to}
+            to={to}
+            end={end}
+            className={({ isActive }: { isActive: boolean }): string =>
+              cn(
+                'flex items-center gap-2 px-3 py-3 text-sm font-medium border-b-2 transition-colors',
+                isActive
+                  ? 'border-primary text-primary'
+                  : 'border-transparent text-text-secondary hover:text-text-primary'
+              )
+            }
+          >
+            <Icon className="h-4 w-4" />
+            {label}
+            {to === '/dashboard' && hasRunning && (
+              <span className="flex h-2 w-2 rounded-full bg-primary animate-pulse" />
+            )}
+          </NavLink>
+        ))}
+      </div>
+
+      {/* Version + update badge */}
       <span className="ml-auto text-xs text-text-secondary">
         v{import.meta.env.VITE_APP_VERSION as string}
         {updateCheck?.updateAvailable && updateCheck.releaseUrl && (
@@ -73,6 +96,18 @@ export function TopNav(): React.ReactElement {
           </a>
         )}
       </span>
+
+      {/* ── Tunnel popover ── */}
+      <TunnelPopover />
+
+      {/* ── Theme toggle ── */}
+      <button
+        onClick={toggleTheme}
+        aria-label={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
+        className="ml-2 p-2 rounded-md text-text-secondary hover:bg-surface-elevated hover:text-text-primary transition-colors"
+      >
+        {theme === 'dark' ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
+      </button>
     </nav>
   );
 }
diff --git a/packages/web/src/components/layout/TunnelPopover.tsx b/packages/web/src/components/layout/TunnelPopover.tsx
new file mode 100644
index 0000000000..57bb38e5e5
--- /dev/null
+++ b/packages/web/src/components/layout/TunnelPopover.tsx
@@ -0,0 +1,181 @@
+import { createElement, useState, useEffect } from 'react';
+import { Share2, Copy, Check, Loader2, Wifi, WifiOff } from 'lucide-react';
+
+type TunnelStatus = 'inactive' | 'starting' | 'active' | 'error';
+
+interface TunnelState {
+  status: TunnelStatus;
+  url: string | null;
+}
+
+/**
+ * Cloudflare Quick Tunnel popover.
+ * Returns null when the app is already accessed via a Cloudflare tunnel URL
+ * (no point tunnelling an already-tunnelled session).
+ */
+export function TunnelPopover(): React.ReactElement | null {
+  // Hide the button if the app is already accessed through a Cloudflare tunnel
+  const isAlreadyTunneled =
+    window.location.hostname.includes('trycloudflare.com') ||
+    window.location.hostname.includes('cloudflareaccess.com');
+
+  if (isAlreadyTunneled) return null;
+
+  return <TunnelPopoverInner />;
+}
+
+function TunnelPopoverInner(): React.ReactElement {
+  const [open, setOpen] = useState(false);
+  const [tunnel, setTunnel] = useState<TunnelState>({ status: 'inactive', url: null });
+  const [copied, setCopied] = useState(false);
+
+  // Poll status every 2 s while the popover is open or the tunnel is starting
+  useEffect(() => {
+    const shouldPoll = open || tunnel.status === 'starting';
+    if (!shouldPoll) return;
+
+    const interval = setInterval(async () => {
+      const res = await fetch('/api/tunnel');
+      if (res.ok) {
+        const data = (await res.json()) as TunnelState;
+        setTunnel(data);
+      }
+    }, 2000);
+
+    return (): void => {
+      clearInterval(interval);
+    };
+  }, [open, tunnel.status]);
+
+  const handleStart = async (): Promise<void> => {
+    setTunnel(t => ({ ...t, status: 'starting' }));
+    await fetch('/api/tunnel/start', { method: 'POST' });
+  };
+
+  const handleStop = async (): Promise<void> => {
+    await fetch('/api/tunnel/stop', { method: 'DELETE' });
+    setTunnel({ status: 'inactive', url: null });
+  };
+
+  const handleCopy = async (): Promise<void> => {
+    if (tunnel.url) {
+      await navigator.clipboard.writeText(tunnel.url);
+      setCopied(true);
+      setTimeout(() => {
+        setCopied(false);
+      }, 2000);
+    }
+  };
+
+  // Icon in the TopNav changes with tunnel status
+  const navIcon =
+    tunnel.status === 'active' ? Wifi : tunnel.status === 'starting' ? Loader2 : WifiOff;
+
+  return (
+    <div className="relative">
+      <button
+        onClick={() => {
+          setOpen(o => !o);
+        }}
+        className={`p-2 rounded-md hover:bg-surface-elevated transition-colors relative text-text-secondary hover:text-text-primary ${
+          tunnel.status === 'active' ? 'text-green-500 hover:text-green-400' : ''
+        }`}
+        aria-label="Cloudflare tunnel"
+        title="Cloudflare tunnel"
+      >
+        {createElement(navIcon, {
+          className: `h-5 w-5 ${tunnel.status === 'starting' ? 'animate-spin' : ''}`,
+        })}
+        {tunnel.status === 'active' && (
+          <span className="absolute top-1 right-1 h-2 w-2 rounded-full bg-green-500" />
+        )}
+      </button>
+
+      {open && (
+        <>
+          {/* Backdrop to close on outside click */}
+          <div
+            className="fixed inset-0 z-40"
+            onClick={() => {
+              setOpen(false);
+            }}
+          />
+
+          {/* Popover panel */}
+          <div className="absolute right-0 top-full mt-2 w-72 z-50 rounded-lg border border-border bg-surface shadow-lg p-4 space-y-3">
+            {/* Header */}
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <Share2 className="h-4 w-4 text-text-secondary" />
+                <p className="font-medium text-sm text-text-primary">Cloudflare Tunnel</p>
+              </div>
+              <span
+                className={`text-xs px-2 py-0.5 rounded-full ${
+                  tunnel.status === 'active'
+                    ? 'bg-green-500/20 text-green-500'
+                    : tunnel.status === 'starting'
+                      ? 'bg-yellow-500/20 text-yellow-500'
+                      : 'bg-surface-elevated text-text-secondary'
+                }`}
+              >
+                {tunnel.status === 'active'
+                  ? 'Active'
+                  : tunnel.status === 'starting'
+                    ? 'Starting...'
+                    : tunnel.status === 'error'
+                      ? 'Error'
+                      : 'Inactive'}
+              </span>
+            </div>
+
+            {/* Public URL display */}
+            {tunnel.url && (
+              <div className="flex items-center gap-2 bg-surface-elevated rounded-md px-3 py-2">
+                <span className="text-xs truncate flex-1 font-mono text-text-primary">
+                  {tunnel.url}
+                </span>
+                <button
+                  onClick={() => void handleCopy()}
+                  className="shrink-0 text-text-secondary hover:text-text-primary transition-colors"
+                  title="Copy URL"
+                >
+                  {copied ? (
+                    <Check className="h-4 w-4 text-green-500" />
+                  ) : (
+                    <Copy className="h-4 w-4" />
+                  )}
+                </button>
+              </div>
+            )}
+
+            {/* Action button */}
+            {tunnel.status === 'inactive' || tunnel.status === 'error' ? (
+              <button
+                onClick={() => void handleStart()}
+                className="w-full py-2 px-4 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 transition-colors"
+              >
+                Start tunnel
+              </button>
+            ) : tunnel.status === 'active' ? (
+              <button
+                onClick={() => void handleStop()}
+                className="w-full py-2 px-4 rounded-md border border-border text-sm font-medium hover:bg-surface-elevated transition-colors text-text-primary"
+              >
+                Stop tunnel
+              </button>
+            ) : (
+              <div className="text-center text-sm text-text-secondary py-1">
+                Connecting to Cloudflare...
+              </div>
+            )}
+
+            <p className="text-xs text-text-secondary">
+              URL changes on every restart. Requires{' '}
+              <code className="font-mono text-xs">cloudflared</code> installed.
+            </p>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/packages/web/src/components/workflows/BuilderToolbar.tsx b/packages/web/src/components/workflows/BuilderToolbar.tsx
index 4be85cea58..abf9d37f64 100644
--- a/packages/web/src/components/workflows/BuilderToolbar.tsx
+++ b/packages/web/src/components/workflows/BuilderToolbar.tsx
@@ -1,6 +1,7 @@
-import { useState } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { useNavigate } from 'react-router';
 import { useQuery } from '@tanstack/react-query';
+import { ChevronRight } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 import { listWorkflows } from '@/lib/api';
@@ -59,6 +60,27 @@ export function BuilderToolbar({
 
   const [showDescription, setShowDescription] = useState(false);
 
+  // Scroll indicator state
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+
+    const check = (): void => {
+      setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 4);
+    };
+
+    check();
+    el.addEventListener('scroll', check);
+    window.addEventListener('resize', check);
+    return (): void => {
+      el.removeEventListener('scroll', check);
+      window.removeEventListener('resize', check);
+    };
+  }, []);
+
   const { data: workflows, isError: workflowsError } = useQuery({
     queryKey: ['workflows', cwd],
     queryFn: () => listWorkflows(cwd),
@@ -66,166 +88,183 @@ export function BuilderToolbar({
 
   return (
     <>
-      <div className="flex items-center h-12 px-3 border-b border-border gap-2">
-        {/* Left group: Load + Breadcrumb + Mode badge */}
-        <div className="flex items-center gap-2 min-w-0">
-          {/* Load existing workflow */}
-          <select
-            value=""
-            onChange={(e): void => {
-              if (e.target.value) onLoadWorkflow(e.target.value);
-            }}
-            className="rounded-md border border-border bg-surface px-1.5 py-1 text-xs text-text-secondary focus:outline-none focus:ring-1 focus:ring-accent w-[72px] shrink-0"
-            title={
-              workflowsError
-                ? 'Failed to load workflows — check server connection'
-                : 'Load workflow'
-            }
-          >
-            <option value="">{workflowsError ? 'Load failed' : 'Load...'}</option>
-            {(workflows ?? []).map(entry => (
-              <option key={entry.workflow.name} value={entry.workflow.name}>
-                {entry.workflow.name}
-              </option>
-            ))}
-          </select>
-
-          {/* Breadcrumb */}
-          <div className="flex items-center gap-1 min-w-0">
-            <button
-              type="button"
-              onClick={(): void => {
-                navigate('/workflows');
-              }}
-              className="text-xs text-text-tertiary hover:text-text-secondary shrink-0"
-            >
-              Workflows
-            </button>
-            <span className="text-xs text-text-tertiary shrink-0">/</span>
-            <input
-              type="text"
-              value={workflowName}
+      {/*
+       * overflow-x-auto: on mobile, the toolbar scrolls horizontally instead of
+       * clipping the right-side controls (Provider, Model, Visual/Split/YAML, etc.)
+       * All child groups have shrink-0 to prevent squishing.
+       */}
+      <div className="relative">
+        <div
+          ref={scrollRef}
+          className="flex items-center h-12 px-3 border-b border-border gap-2 overflow-x-auto"
+        >
+          {/* Left group: Load + Breadcrumb + Mode badge */}
+          <div className="flex items-center gap-2 min-w-0 shrink-0">
+            {/* Load existing workflow */}
+            <select
+              value=""
               onChange={(e): void => {
-                onNameChange(e.target.value);
+                if (e.target.value) onLoadWorkflow(e.target.value);
               }}
-              placeholder="workflow-name"
-              className="min-w-[80px] max-w-[160px] rounded-md border border-transparent hover:border-border focus:border-border bg-transparent px-1.5 py-0.5 text-xs font-medium text-text-primary placeholder:text-text-tertiary focus:outline-none focus:ring-1 focus:ring-accent"
-            />
-            {hasUnsavedChanges && (
-              <span
-                className="w-1.5 h-1.5 rounded-full bg-warning shrink-0"
-                title="Unsaved changes"
+              className="rounded-md border border-border bg-surface px-1.5 py-1 text-xs text-text-secondary focus:outline-none focus:ring-1 focus:ring-accent w-[72px] shrink-0"
+              title={
+                workflowsError
+                  ? 'Failed to load workflows — check server connection'
+                  : 'Load workflow'
+              }
+            >
+              <option value="">{workflowsError ? 'Load failed' : 'Load...'}</option>
+              {(workflows ?? []).map(entry => (
+                <option key={entry.workflow.name} value={entry.workflow.name}>
+                  {entry.workflow.name}
+                </option>
+              ))}
+            </select>
+
+            {/* Breadcrumb */}
+            <div className="flex items-center gap-1 min-w-0">
+              <button
+                type="button"
+                onClick={(): void => {
+                  navigate('/workflows');
+                }}
+                className="text-xs text-text-tertiary hover:text-text-secondary shrink-0"
+              >
+                Workflows
+              </button>
+              <span className="text-xs text-text-tertiary shrink-0">/</span>
+              <input
+                type="text"
+                value={workflowName}
+                onChange={(e): void => {
+                  onNameChange(e.target.value);
+                }}
+                placeholder="workflow-name"
+                className="min-w-[80px] max-w-[160px] rounded-md border border-transparent hover:border-border focus:border-border bg-transparent px-1.5 py-0.5 text-xs font-medium text-text-primary placeholder:text-text-tertiary focus:outline-none focus:ring-1 focus:ring-accent"
+              />
+              {hasUnsavedChanges && (
+                <span
+                  className="w-1.5 h-1.5 rounded-full bg-warning shrink-0"
+                  title="Unsaved changes"
+                />
+              )}
+            </div>
+
+            {/* Description (click to expand) */}
+            {showDescription ? (
+              <input
+                type="text"
+                value={workflowDescription}
+                onChange={(e): void => {
+                  onDescriptionChange(e.target.value);
+                }}
+                onBlur={(): void => {
+                  setShowDescription(false);
+                }}
+                autoFocus
+                placeholder="Description..."
+                className="w-48 rounded-md border border-border bg-surface px-2 py-0.5 text-xs text-text-secondary placeholder:text-text-tertiary focus:outline-none focus:ring-1 focus:ring-accent"
               />
+            ) : (
+              <button
+                type="button"
+                onClick={(): void => {
+                  setShowDescription(true);
+                }}
+                className="text-[10px] text-text-tertiary hover:text-text-secondary truncate max-w-[120px] shrink-0"
+                title={workflowDescription || 'Add description'}
+              >
+                {workflowDescription || 'add description'}
+              </button>
             )}
+
+            {/* Mode badge */}
+            <span className="rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider shrink-0 bg-node-command/20 text-node-command">
+              DAG
+            </span>
           </div>
 
-          {/* Description (click to expand) */}
-          {showDescription ? (
+          {/* Center group: Provider + Model */}
+          <div className="flex items-center gap-1.5 mx-auto shrink-0">
+            <select
+              value={provider ?? ''}
+              onChange={(e): void => {
+                onProviderChange((e.target.value || undefined) as 'claude' | 'codex' | undefined);
+              }}
+              className="rounded-md border border-border bg-surface px-1.5 py-1 text-xs text-text-primary focus:outline-none focus:ring-1 focus:ring-accent"
+            >
+              <option value="">Provider</option>
+              <option value="claude">Claude</option>
+              <option value="codex">Codex</option>
+            </select>
+
             <input
               type="text"
-              value={workflowDescription}
+              value={model ?? ''}
               onChange={(e): void => {
-                onDescriptionChange(e.target.value);
-              }}
-              onBlur={(): void => {
-                setShowDescription(false);
+                onModelChange(e.target.value || undefined);
               }}
-              autoFocus
-              placeholder="Description..."
-              className="w-48 rounded-md border border-border bg-surface px-2 py-0.5 text-xs text-text-secondary placeholder:text-text-tertiary focus:outline-none focus:ring-1 focus:ring-accent"
+              placeholder="Model"
+              className="w-20 rounded-md border border-border bg-surface px-1.5 py-1 text-xs text-text-primary placeholder:text-text-tertiary focus:outline-none focus:ring-1 focus:ring-accent"
             />
-          ) : (
-            <button
-              type="button"
-              onClick={(): void => {
-                setShowDescription(true);
-              }}
-              className="text-[10px] text-text-tertiary hover:text-text-secondary truncate max-w-[120px] shrink-0"
-              title={workflowDescription || 'Add description'}
-            >
-              {workflowDescription || 'add description'}
-            </button>
-          )}
-
-          {/* Mode badge */}
-          <span className="rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider shrink-0 bg-node-command/20 text-node-command">
-            DAG
-          </span>
-        </div>
+          </div>
 
-        {/* Center group: Provider + Model */}
-        <div className="flex items-center gap-1.5 mx-auto">
-          <select
-            value={provider ?? ''}
-            onChange={(e): void => {
-              onProviderChange((e.target.value || undefined) as 'claude' | 'codex' | undefined);
-            }}
-            className="rounded-md border border-border bg-surface px-1.5 py-1 text-xs text-text-primary focus:outline-none focus:ring-1 focus:ring-accent"
-          >
-            <option value="">Provider</option>
-            <option value="claude">Claude</option>
-            <option value="codex">Codex</option>
-          </select>
-
-          <input
-            type="text"
-            value={model ?? ''}
-            onChange={(e): void => {
-              onModelChange(e.target.value || undefined);
-            }}
-            placeholder="Model"
-            className="w-20 rounded-md border border-border bg-surface px-1.5 py-1 text-xs text-text-primary placeholder:text-text-tertiary focus:outline-none focus:ring-1 focus:ring-accent"
-          />
-        </div>
+          {/* Right group: View toggle + Actions */}
+          <div className="flex items-center gap-1.5 shrink-0">
+            {/* View toggle — flex-nowrap prevents wrapping; scrollable via parent overflow-x-auto */}
+            <div className="flex rounded-md border border-border overflow-hidden">
+              {VIEW_MODE_LABELS.map(({ value, label }) => (
+                <button
+                  key={value}
+                  type="button"
+                  onClick={(): void => {
+                    onViewModeChange(value);
+                  }}
+                  className={cn(
+                    'px-2 py-1 text-[10px] font-medium transition-colors whitespace-nowrap',
+                    viewMode === value
+                      ? 'bg-accent text-accent-foreground'
+                      : 'bg-surface text-text-secondary hover:text-text-primary hover:bg-surface-hover'
+                  )}
+                >
+                  {label}
+                </button>
+              ))}
+            </div>
 
-        {/* Right group: View toggle + Actions */}
-        <div className="flex items-center gap-1.5 shrink-0">
-          {/* View toggle */}
-          <div className="flex rounded-md border border-border overflow-hidden">
-            {VIEW_MODE_LABELS.map(({ value, label }) => (
-              <button
-                key={value}
-                type="button"
-                onClick={(): void => {
-                  onViewModeChange(value);
-                }}
-                className={cn(
-                  'px-2 py-1 text-[10px] font-medium transition-colors',
-                  viewMode === value
-                    ? 'bg-accent text-accent-foreground'
-                    : 'bg-surface text-text-secondary hover:text-text-primary hover:bg-surface-hover'
-                )}
-              >
-                {label}
-              </button>
-            ))}
-          </div>
+            {/* Validation errors badge */}
+            {validationErrors.length > 0 && (
+              <span className="rounded-full bg-error/20 text-error px-1.5 py-0.5 text-[10px] font-medium whitespace-nowrap">
+                {validationErrors.length}
+              </span>
+            )}
 
-          {/* Validation errors badge */}
-          {validationErrors.length > 0 && (
-            <span className="rounded-full bg-error/20 text-error px-1.5 py-0.5 text-[10px] font-medium">
-              {validationErrors.length}
-            </span>
-          )}
-
-          <Button variant="outline" size="xs" onClick={onValidate}>
-            Validate
-          </Button>
-
-          <Button variant="secondary" size="xs" onClick={onSave} disabled={!workflowName.trim()}>
-            Save
-          </Button>
-
-          <Button
-            size="xs"
-            onClick={onRun}
-            disabled={!workflowName.trim() || hasUnsavedChanges}
-            title={hasUnsavedChanges ? 'Save the workflow before running' : undefined}
-            className="bg-node-command hover:bg-node-command/90 text-white"
-          >
-            Run
-          </Button>
+            <Button variant="outline" size="xs" onClick={onValidate}>
+              Val
+            </Button>
+
+            <Button variant="secondary" size="xs" onClick={onSave} disabled={!workflowName.trim()}>
+              Save
+            </Button>
+
+            <Button
+              size="xs"
+              onClick={onRun}
+              disabled={!workflowName.trim() || hasUnsavedChanges}
+              title={hasUnsavedChanges ? 'Save the workflow before running' : undefined}
+              className="bg-node-command hover:bg-node-command/90 text-white"
+            >
+              Run
+            </Button>
+          </div>
         </div>
+
+        {/* Horizontal scroll indicator: fade gradient + chevron */}
+        {canScrollRight && (
+          <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-1 w-8 bg-gradient-to-l from-background to-transparent">
+            <ChevronRight className="h-3 w-3 text-muted-foreground shrink-0" />
+          </div>
+        )}
       </div>
 
       {workflowsError && (
diff --git a/packages/web/src/components/workflows/NodeLibrary.tsx b/packages/web/src/components/workflows/NodeLibrary.tsx
index cef61ca613..3a37b1ab46 100644
--- a/packages/web/src/components/workflows/NodeLibrary.tsx
+++ b/packages/web/src/components/workflows/NodeLibrary.tsx
@@ -7,6 +7,7 @@ import type { CommandEntry } from '@/lib/api';
 interface NodeLibraryProps {
   commands: CommandEntry[];
   isLoading: boolean;
+  onNodeAdd?: (type: 'command' | 'prompt' | 'bash', name: string) => void;
 }
 
 const NODE_TYPE_COLORS: Record<string, string> = {
@@ -35,10 +36,12 @@ function DraggableItem({
   type,
   name,
   displayName,
+  onNodeAdd,
 }: {
   type: 'command' | 'prompt' | 'bash';
   name: string;
   displayName: string;
+  onNodeAdd?: (type: 'command' | 'prompt' | 'bash', name: string) => void;
 }): React.ReactElement {
   return (
     <div
@@ -46,6 +49,18 @@ function DraggableItem({
       onDragStart={(e): void => {
         onDragStart(e, type, name);
       }}
+      onClick={(): void => {
+        onNodeAdd?.(type, name);
+      }}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e): void => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          onNodeAdd?.(type, name);
+        }
+      }}
+      aria-label={`Add ${displayName} node`}
       className="flex items-center gap-2 px-2 py-1.5 rounded-md border border-dashed border-border hover:border-accent hover:bg-accent/5 cursor-grab text-xs text-text-primary"
     >
       <span className={cn('w-2 h-2 rounded-full shrink-0', NODE_TYPE_COLORS[type])} />
@@ -85,7 +100,11 @@ function CollapsibleSection({
   );
 }
 
-export function NodeLibrary({ commands, isLoading }: NodeLibraryProps): React.ReactElement {
+export function NodeLibrary({
+  commands,
+  isLoading,
+  onNodeAdd,
+}: NodeLibraryProps): React.ReactElement {
   const [search, setSearch] = useState('');
 
   const categories = useMemo(() => categorizeCommands(commands), [commands]);
@@ -132,8 +151,13 @@ export function NodeLibrary({ commands, isLoading }: NodeLibraryProps): React.Re
             {/* Quick Nodes */}
             {showQuickNodes && (
               <CollapsibleSection title="Quick Nodes" count={2} defaultOpen>
-                <DraggableItem type="prompt" name="Prompt" displayName="Prompt" />
-                <DraggableItem type="bash" name="Shell" displayName="Bash" />
+                <DraggableItem
+                  type="prompt"
+                  name="Prompt"
+                  displayName="Prompt"
+                  onNodeAdd={onNodeAdd}
+                />
+                <DraggableItem type="bash" name="Shell" displayName="Bash" onNodeAdd={onNodeAdd} />
               </CollapsibleSection>
             )}
 
@@ -151,6 +175,7 @@ export function NodeLibrary({ commands, isLoading }: NodeLibraryProps): React.Re
                     type="command"
                     name={cmd.name}
                     displayName={cmd.name}
+                    onNodeAdd={onNodeAdd}
                   />
                 ))}
               </CollapsibleSection>
diff --git a/packages/web/src/components/workflows/QuickAddPicker.tsx b/packages/web/src/components/workflows/QuickAddPicker.tsx
index 299692da45..9b4a1122d9 100644
--- a/packages/web/src/components/workflows/QuickAddPicker.tsx
+++ b/packages/web/src/components/workflows/QuickAddPicker.tsx
@@ -64,12 +64,19 @@ export function QuickAddPicker({
     onAddNode('command', { commandName });
   }
 
+  /*
+   * All picker containers use `max-w-[calc(100vw-1rem)]` as a CSS safety-net.
+   * The primary overflow prevention is handled upstream in WorkflowCanvas where
+   * `position` is already clamped to the canvas bounds before being passed here.
+   */
+
   // Command sub-picker
   if (subView === 'command') {
     return (
       <div
         ref={containerRef}
         style={{ position: 'absolute', left: position.x, top: position.y, zIndex: 50 }}
+        className="max-w-[calc(100vw-1rem)]"
       >
         <CommandPicker commands={commands} onSelect={handleCommandSelect} onClose={onClose} />
       </div>
@@ -83,7 +90,7 @@ export function QuickAddPicker({
       <div
         ref={containerRef}
         style={{ position: 'absolute', left: position.x, top: position.y, zIndex: 50 }}
-        className="w-64 bg-surface-elevated border border-border rounded-lg shadow-lg overflow-hidden"
+        className="w-64 max-w-[calc(100vw-1rem)] bg-surface-elevated border border-border rounded-lg shadow-lg overflow-hidden"
       >
         <div className="px-3 py-2 border-b border-border flex items-center gap-2">
           <button
@@ -138,7 +145,7 @@ export function QuickAddPicker({
     <div
       ref={containerRef}
       style={{ position: 'absolute', left: position.x, top: position.y, zIndex: 50 }}
-      className="w-56 bg-surface-elevated border border-border rounded-lg shadow-lg overflow-hidden"
+      className="w-56 max-w-[calc(100vw-1rem)] bg-surface-elevated border border-border rounded-lg shadow-lg overflow-hidden"
     >
       <div className="px-3 py-2 border-b border-border">
         <span className="text-xs font-medium text-text-secondary">Add Node</span>
diff --git a/packages/web/src/components/workflows/WorkflowBuilder.tsx b/packages/web/src/components/workflows/WorkflowBuilder.tsx
index 8a0d8abe3d..71142344d2 100644
--- a/packages/web/src/components/workflows/WorkflowBuilder.tsx
+++ b/packages/web/src/components/workflows/WorkflowBuilder.tsx
@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect, useRef, useMemo } from 'react';
+import { useState, useCallback, useEffect, useRef, useMemo } from 'react';
 import { useSearchParams, useNavigate } from 'react-router';
 import { useQuery } from '@tanstack/react-query';
 import { ReactFlowProvider, useNodesState, useEdgesState, useViewport } from '@xyflow/react';
@@ -6,6 +6,7 @@ import type { Edge } from '@xyflow/react';
 import type { WorkflowDefinition } from '@/lib/api';
 
 import { useProject } from '@/contexts/ProjectContext';
+import { useTheme } from '@/contexts/ThemeContext';
 import {
   getWorkflow,
   listCommands,
@@ -38,9 +39,14 @@ const NODE_LIBRARY_DEFAULT_WIDTH = 208; // w-52
 function NodeLibraryPanel({
   commands,
   isLoading,
+  forceWidth,
+  onNodeAdd,
 }: {
   commands: CommandEntry[];
   isLoading: boolean;
+  /** When set, overrides the resizable width (used for mobile overlay mode). */
+  forceWidth?: number;
+  onNodeAdd?: (type: 'command' | 'prompt' | 'bash', name: string) => void;
 }): React.ReactElement {
   const [width, setWidth] = useState(() => {
     try {
@@ -97,19 +103,24 @@ function NodeLibraryPanel({
   }, []);
 
   return (
-    <div className="relative shrink-0 h-full overflow-hidden flex" style={{ width }}>
+    <div
+      className="relative shrink-0 h-full overflow-hidden flex"
+      style={{ width: forceWidth ?? width }}
+    >
       <div className="flex-1 overflow-hidden">
-        <NodeLibrary commands={commands} isLoading={isLoading} />
+        <NodeLibrary commands={commands} isLoading={isLoading} onNodeAdd={onNodeAdd} />
       </div>
-      {/* Drag handle */}
-      <div
-        role="separator"
-        aria-orientation="vertical"
-        aria-label="Resize node library panel"
-        onMouseDown={onMouseDown}
-        className="absolute right-0 top-0 h-full w-1 cursor-col-resize hover:bg-accent/40 transition-colors z-10"
-        title="Drag to resize"
-      />
+      {/* Drag handle — hidden in overlay/forced-width mode */}
+      {!forceWidth && (
+        <div
+          role="separator"
+          aria-orientation="vertical"
+          aria-label="Resize node library panel"
+          onMouseDown={onMouseDown}
+          className="absolute right-0 top-0 h-full w-1 cursor-col-resize hover:bg-accent/40 transition-colors z-10"
+          title="Drag to resize"
+        />
+      )}
     </div>
   );
 }
@@ -120,10 +131,24 @@ function WorkflowBuilderInner(): React.ReactElement {
   const navigate = useNavigate();
 
   const { codebases, selectedProjectId } = useProject();
+  const { compactLayout } = useTheme();
   const cwd = selectedProjectId
     ? codebases?.find(cb => cb.id === selectedProjectId)?.default_cwd
     : undefined;
 
+  // Mobile detection: compactLayout from ThemeContext OR narrow viewport (<768px)
+  const [windowNarrow, setWindowNarrow] = useState(() => window.innerWidth < 768);
+  useEffect(() => {
+    const check = (): void => {
+      setWindowNarrow(window.innerWidth < 768);
+    };
+    window.addEventListener('resize', check);
+    return (): void => {
+      window.removeEventListener('resize', check);
+    };
+  }, []);
+  const isMobile = compactLayout || windowNarrow;
+
   // Core state
   const [workflowName, setWorkflowName] = useState('');
   const [workflowDescription, setWorkflowDescription] = useState('');
@@ -134,7 +159,15 @@ function WorkflowBuilderInner(): React.ReactElement {
 
   const [yamlViewMode, setYamlViewMode] = useState<ViewMode>('hidden');
   const [validationPanelOpen, setValidationPanelOpen] = useState(false);
-  const [showLibrary, setShowLibrary] = useState(true);
+  // Hide library by default on narrow viewports to avoid blocking the canvas
+  const [showLibrary, setShowLibrary] = useState(() => window.innerWidth >= 768);
+
+  // Auto-close library when entering mobile/compact mode
+  useEffect(() => {
+    if (isMobile) {
+      setShowLibrary(false);
+    }
+  }, [isMobile]);
 
   // DAG state
   const [nodes, setNodes, onNodesChange] = useNodesState<DagFlowNode>([]);
@@ -172,6 +205,26 @@ function WorkflowBuilderInner(): React.ReactElement {
     setHasUnsavedChanges(true);
   }, []);
 
+  const handleNodeAdd = useCallback(
+    (type: 'command' | 'prompt' | 'bash', name: string): void => {
+      const id = `node-${crypto.randomUUID()}`;
+      const label = type === 'command' ? name : type === 'bash' ? 'Shell' : 'Prompt';
+      const newNode: DagFlowNode = {
+        id,
+        type: 'dagNode',
+        position: {
+          x: 200 + Math.round(Math.random() * 80),
+          y: 200 + Math.round(Math.random() * 80),
+        },
+        data: { id, label, nodeType: type },
+      };
+      pushSnapshot({ nodes, edges });
+      setNodes(nds => [...nds, newNode]);
+      markDirty();
+    },
+    [pushSnapshot, nodes, edges, setNodes, markDirty]
+  );
+
   const buildDefinition = useCallback((): WorkflowDefinition => {
     const name = workflowName.trim() || 'untitled';
     const description = workflowDescription;
@@ -457,9 +510,16 @@ function WorkflowBuilderInner(): React.ReactElement {
         </div>
       )}
 
-      <div className="flex flex-1 overflow-hidden">
-        {/* Left panel: Node Library */}
-        {showLibrary && <NodeLibraryPanel commands={commandList} isLoading={commandsLoading} />}
+      {/* Main content area — `relative` enables absolute positioning of mobile overlays */}
+      <div className="flex flex-1 overflow-hidden relative">
+        {/* Left panel: Node Library — desktop inline */}
+        {showLibrary && !isMobile && (
+          <NodeLibraryPanel
+            commands={commandList}
+            isLoading={commandsLoading}
+            onNodeAdd={handleNodeAdd}
+          />
+        )}
 
         {/* Center area */}
         <div className="flex-1 relative overflow-hidden flex">
@@ -507,6 +567,49 @@ function WorkflowBuilderInner(): React.ReactElement {
             />
           </div>
         )}
+
+        {/* Mobile: Library overlay — slides in over the canvas */}
+        {isMobile && showLibrary && (
+          <>
+            {/* Backdrop */}
+            <div
+              className="absolute inset-0 z-20 bg-black/40"
+              role="button"
+              tabIndex={-1}
+              aria-label="Close library"
+              onClick={(): void => {
+                setShowLibrary(false);
+              }}
+              onKeyDown={(e): void => {
+                if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
+                  setShowLibrary(false);
+                }
+              }}
+            />
+            {/* Panel */}
+            <div className="absolute left-0 top-0 h-full z-30">
+              <NodeLibraryPanel
+                commands={commandList}
+                isLoading={commandsLoading}
+                forceWidth={256}
+                onNodeAdd={handleNodeAdd}
+              />
+            </div>
+          </>
+        )}
+
+        {/* Mobile: Library toggle button — shown when library is closed */}
+        {isMobile && !showLibrary && (
+          <button
+            type="button"
+            onClick={(): void => {
+              setShowLibrary(true);
+            }}
+            className="absolute top-2 left-2 z-10 bg-surface-elevated border border-border rounded-md px-2 py-1 text-xs text-text-secondary shadow-sm hover:bg-surface-hover"
+          >
+            Library
+          </button>
+        )}
       </div>
 
       {/* Validation Panel */}
diff --git a/packages/web/src/components/workflows/WorkflowCanvas.tsx b/packages/web/src/components/workflows/WorkflowCanvas.tsx
index f784c67c4f..8947edbffe 100644
--- a/packages/web/src/components/workflows/WorkflowCanvas.tsx
+++ b/packages/web/src/components/workflows/WorkflowCanvas.tsx
@@ -22,6 +22,10 @@ import { QuickAddPicker } from './QuickAddPicker';
 
 export { dagNodesToReactFlow } from '@/lib/dag-layout';
 
+// Approximate dimensions of the QuickAddPicker panel (w-56 = 224px, max height ~320px)
+const PICKER_WIDTH = 240;
+const PICKER_HEIGHT = 340;
+
 function resolveNodeLabel(nodeType: 'command' | 'prompt' | 'bash', commandName: string): string {
   if (nodeType === 'command') return commandName;
   if (nodeType === 'bash') return 'Shell';
@@ -238,10 +242,22 @@ export function WorkflowCanvas({
           clickTimerRef.current = null;
         }
         const wrapperEl = (e.target as HTMLElement).closest('.react-flow');
-        const rect = wrapperEl?.getBoundingClientRect() ?? { left: 0, top: 0 };
+        const rect = wrapperEl?.getBoundingClientRect() ?? {
+          left: 0,
+          top: 0,
+          width: window.innerWidth,
+          height: window.innerHeight,
+        };
         const flowPos = screenToFlowPosition({ x: e.clientX, y: e.clientY });
+
+        // Clamp the picker position so it stays inside the canvas bounds
+        const rawX = e.clientX - rect.left;
+        const rawY = e.clientY - rect.top;
+        const safeX = Math.max(4, Math.min(rawX, rect.width - PICKER_WIDTH - 4));
+        const safeY = Math.max(4, Math.min(rawY, rect.height - PICKER_HEIGHT - 4));
+
         setQuickAddPosition({
-          screen: { x: e.clientX - rect.left, y: e.clientY - rect.top },
+          screen: { x: safeX, y: safeY },
           flow: flowPos,
         });
       } else {
diff --git a/packages/web/src/contexts/MobileNavContext.tsx b/packages/web/src/contexts/MobileNavContext.tsx
new file mode 100644
index 0000000000..8eda661391
--- /dev/null
+++ b/packages/web/src/contexts/MobileNavContext.tsx
@@ -0,0 +1,17 @@
+import { createContext, useContext } from 'react';
+
+export interface MobileNavContextValue {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const MobileNavContext = createContext<MobileNavContextValue>({
+  open: false,
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  setOpen: () => {},
+});
+
+export function useMobileNav(): MobileNavContextValue {
+  return useContext(MobileNavContext);
+}
diff --git a/packages/web/src/contexts/ThemeContext.tsx b/packages/web/src/contexts/ThemeContext.tsx
new file mode 100644
index 0000000000..f741e28212
--- /dev/null
+++ b/packages/web/src/contexts/ThemeContext.tsx
@@ -0,0 +1,56 @@
+import { createContext, useContext, useEffect, useState } from 'react';
+import type { ReactNode } from 'react';
+
+type Theme = 'light' | 'dark';
+
+interface ThemeContextValue {
+  theme: Theme;
+  toggleTheme: () => void;
+  compactLayout: boolean;
+  toggleCompactLayout: () => void;
+}
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const ThemeContext = createContext<ThemeContextValue>({
+  theme: 'dark',
+  toggleTheme: (): void => undefined,
+  compactLayout: false,
+  toggleCompactLayout: (): void => undefined,
+});
+
+export function ThemeProvider({ children }: { children: ReactNode }): React.ReactElement {
+  const [theme, setTheme] = useState<Theme>(() => {
+    const saved = localStorage.getItem('archon-theme') as Theme | null;
+    return saved ?? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+  });
+
+  const [compactLayout, setCompactLayout] = useState<boolean>(() => {
+    return localStorage.getItem('archon-compact-layout') === 'true';
+  });
+
+  useEffect(() => {
+    document.documentElement.classList.toggle('dark', theme === 'dark');
+    localStorage.setItem('archon-theme', theme);
+  }, [theme]);
+
+  useEffect(() => {
+    localStorage.setItem('archon-compact-layout', String(compactLayout));
+    document.documentElement.classList.toggle('compact-layout', compactLayout);
+  }, [compactLayout]);
+
+  const toggleTheme = (): void => {
+    setTheme(t => (t === 'dark' ? 'light' : 'dark'));
+  };
+
+  const toggleCompactLayout = (): void => {
+    setCompactLayout(v => !v);
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme, compactLayout, toggleCompactLayout }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export const useTheme = (): ThemeContextValue => useContext(ThemeContext);
diff --git a/packages/web/src/index.css b/packages/web/src/index.css
index a3d4d39631..ff4fe866ce 100644
--- a/packages/web/src/index.css
+++ b/packages/web/src/index.css
@@ -6,8 +6,66 @@
 
 @custom-variant dark (&:is(.dark *));
 
-/* Dark-only theme - uses our custom palette as root defaults */
+/* ── Light theme (default) ──────────────────────────────────────────────── */
 :root {
+  /* App-specific colors */
+  --surface: oklch(0.97 0.004 260);
+  --surface-elevated: oklch(0.93 0.006 260);
+  --border-bright: oklch(0.72 0.012 260);
+  --text-primary: oklch(0.12 0.005 260);
+  --text-secondary: oklch(0.45 0.01 260);
+  --text-tertiary: oklch(0.6 0.01 260);
+  --accent-hover: oklch(0.52 0.18 250);
+  --accent-muted: oklch(0.88 0.06 250);
+  --surface-inset: oklch(0.99 0.002 260);
+  --surface-hover: oklch(0.9 0.006 260);
+  --accent-bright: oklch(0.5 0.18 250);
+  --success: oklch(0.52 0.17 155);
+  --warning: oklch(0.58 0.15 75);
+  --error: oklch(0.52 0.2 25);
+
+  /* Node type colors */
+  --node-command: oklch(0.5 0.18 250);
+  --node-prompt: oklch(0.48 0.19 290);
+  --node-bash: oklch(0.58 0.15 75);
+
+  /* shadcn variables mapped to light theme */
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.09 0.005 260);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.09 0.005 260);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.09 0.005 260);
+  --primary: oklch(0.52 0.18 250);
+  --primary-foreground: oklch(0.98 0.005 260);
+  --secondary: oklch(0.93 0.005 260);
+  --secondary-foreground: oklch(0.12 0.005 260);
+  --muted: oklch(0.93 0.005 260);
+  --muted-foreground: oklch(0.45 0.01 260);
+  --accent: oklch(0.92 0.04 250);
+  --accent-foreground: oklch(0.12 0.005 260);
+  --destructive: oklch(0.52 0.2 25);
+  --border: oklch(0.88 0.006 260);
+  --input: oklch(0.88 0.006 260);
+  --ring: oklch(0.52 0.18 250);
+  --chart-1: oklch(0.52 0.18 250);
+  --chart-2: oklch(0.52 0.17 155);
+  --chart-3: oklch(0.58 0.15 75);
+  --chart-4: oklch(0.52 0.2 25);
+  --chart-5: oklch(0.48 0.18 250);
+  --sidebar: oklch(0.97 0.004 260);
+  --sidebar-foreground: oklch(0.12 0.005 260);
+  --sidebar-primary: oklch(0.52 0.18 250);
+  --sidebar-primary-foreground: oklch(0.98 0.005 260);
+  --sidebar-accent: oklch(0.92 0.04 250);
+  --sidebar-accent-foreground: oklch(0.12 0.005 260);
+  --sidebar-border: oklch(0.88 0.006 260);
+  --sidebar-ring: oklch(0.52 0.18 250);
+}
+
+/* ── Dark theme ─────────────────────────────────────────────────────────── */
+html.dark {
   /* App-specific colors */
   --surface: oklch(0.18 0.008 260);
   --surface-elevated: oklch(0.22 0.01 260);
@@ -139,30 +197,64 @@
   }
 }
 
-/* Base body styling */
+/* ── Mobile layout fixes ────────────────────────────────────────────────────
+   1. Prevent parasitic horizontal/vertical scrollbars caused by fixed-position
+      drawers, CSS transforms, or elements exceeding 100vw / 100dvh.
+   2. The layout root height is driven by useVisualViewport (JS) so these
+      elements must never scroll on their own.
+   ── */
+html {
+  overflow: hidden;
+  /* Fallback height for browsers that don't expose visualViewport */
+  height: -webkit-fill-available;
+  height: 100%;
+}
+
 body {
+  overflow: hidden;
+  height: 100%;
   background-color: var(--background);
   color: var(--text-primary);
   font-family: var(--font-sans);
 }
 
-/* Scrollbar styling for dark theme */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+#root {
+  overflow: hidden;
+  height: 100%;
+  width: 100%;
 }
 
-::-webkit-scrollbar-track {
-  background: var(--background);
-}
+/* Hide native scrollbars on mobile — scrollable areas use their own
+   overflow-y: auto containers (ScrollArea, etc.) so this is safe.       */
+@media (max-width: 768px) {
+  * {
+    scrollbar-width: none; /* Firefox */
+  }
 
-::-webkit-scrollbar-thumb {
-  background: var(--border);
-  border-radius: 4px;
+  *::-webkit-scrollbar {
+    display: none; /* Chrome / Safari / WebKit */
+  }
 }
 
-::-webkit-scrollbar-thumb:hover {
-  background: var(--border-bright);
+/* Scrollbar styling for dark theme (desktop only) */
+@media (min-width: 769px) {
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: var(--background);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--border);
+    border-radius: 4px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--border-bright);
+  }
 }
 
 /* Highlight.js: override just the background to match our surface */
diff --git a/packages/web/src/lib/api.ts b/packages/web/src/lib/api.ts
index 81a3529833..68152c9a1e 100644
--- a/packages/web/src/lib/api.ts
+++ b/packages/web/src/lib/api.ts
@@ -10,14 +10,18 @@ export type WorkflowDefinition = components['schemas']['WorkflowDefinition'];
 export type DagNode = components['schemas']['DagNode'];
 
 /**
- * Base URL for SSE streams. In dev, bypasses Vite proxy by connecting directly
- * to the backend server. In production, uses relative URLs (same origin).
- * Uses the page hostname so it works from any network interface.
+ * Base URL for SSE streams.
+ * - On localhost (direct dev access): connect directly to backend, bypassing Vite proxy
+ *   (avoids proxy buffering of SSE streams).
+ * - On any other hostname (Cloudflare tunnel, remote access): use relative URL so
+ *   requests go through the Vite proxy, which forwards to the backend.
+ *   This is required because the backend port is not directly accessible remotely.
  */
 const apiPort = (import.meta.env.VITE_API_PORT as string | undefined) ?? '3090';
-export const SSE_BASE_URL = import.meta.env.DEV
-  ? `http://${window.location.hostname}:${apiPort}`
-  : '';
+export const SSE_BASE_URL =
+  import.meta.env.DEV && window.location.hostname === 'localhost'
+    ? `http://localhost:${apiPort}`
+    : '';
 
 export interface ConversationResponse {
   id: string;
@@ -38,6 +42,7 @@ export interface CodebaseResponse {
   repository_url: string | null;
   default_cwd: string;
   ai_assistant_type: string;
+  allow_env_keys: boolean;
   commands: Record<string, { path: string; description: string }>;
   created_at: string;
   updated_at: string;
@@ -157,7 +162,7 @@ export async function getCodebase(id: string): Promise<CodebaseResponse> {
 }
 
 export async function addCodebase(
-  input: { url: string } | { path: string }
+  input: { url: string; allowEnvKeys?: boolean } | { path: string; allowEnvKeys?: boolean }
 ): Promise<CodebaseResponse> {
   return fetchJSON<CodebaseResponse>('/api/codebases', {
     method: 'POST',
@@ -166,6 +171,17 @@ export async function addCodebase(
   });
 }
 
+export async function updateCodebase(
+  id: string,
+  input: { allowEnvKeys: boolean }
+): Promise<CodebaseResponse> {
+  return fetchJSON<CodebaseResponse>(`/api/codebases/${id}`, {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(input),
+  });
+}
+
 export async function deleteCodebase(id: string): Promise<{ success: boolean }> {
   return fetchJSON<{ success: boolean }>(`/api/codebases/${id}`, { method: 'DELETE' });
 }
diff --git a/packages/web/src/lib/useVisualViewport.ts b/packages/web/src/lib/useVisualViewport.ts
new file mode 100644
index 0000000000..35eae087b2
--- /dev/null
+++ b/packages/web/src/lib/useVisualViewport.ts
@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react'
+
+/**
+ * Returns the current visual viewport height in pixels.
+ *
+ * On mobile, the visual viewport shrinks when the soft keyboard appears.
+ * Using this value instead of `100dvh` / `window.innerHeight` ensures that
+ * the main chat container never gets hidden behind the keyboard.
+ *
+ * On desktop (no keyboard) the value equals `window.innerHeight`.
+ */
+export function useVisualViewport(): number {
+  const [height, setHeight] = useState<number>(
+    () => window.visualViewport?.height ?? window.innerHeight
+  )
+
+  useEffect(() => {
+    const vv = window.visualViewport
+    if (!vv) return
+
+    const handler = (): void => { setHeight(vv.height) }
+
+    vv.addEventListener('resize', handler)
+    vv.addEventListener('scroll', handler)
+
+    return () => {
+      vv.removeEventListener('resize', handler)
+      vv.removeEventListener('scroll', handler)
+    }
+  }, [])
+
+  return height
+}
diff --git a/packages/web/src/routes/ChatPage.tsx b/packages/web/src/routes/ChatPage.tsx
index b1179d75ea..86fac4f866 100644
--- a/packages/web/src/routes/ChatPage.tsx
+++ b/packages/web/src/routes/ChatPage.tsx
@@ -1,7 +1,7 @@
 import { useState, useMemo, useRef, useCallback, useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { MessageSquarePlus, Search, Plus, Loader2, FolderGit2 } from 'lucide-react';
+import { MessageSquarePlus, Search, Plus, Loader2, FolderGit2, PanelLeft, X } from 'lucide-react';
 import { ChatInterface } from '@/components/chat/ChatInterface';
 import { ConversationItem } from '@/components/conversations/ConversationItem';
 import { ScrollArea } from '@/components/ui/scroll-area';
@@ -35,6 +35,7 @@ export function ChatPage(): React.ReactElement {
 
   const [searchQuery, setSearchQuery] = useState('');
   const [width, setWidth] = useState(getInitialWidth);
+  const [mobileConvOpen, setMobileConvOpen] = useState(false);
   const isResizing = useRef(false);
   const searchInputRef = useRef<HTMLInputElement>(null);
 
@@ -55,6 +56,17 @@ export function ChatPage(): React.ReactElement {
     }
   }, [showAddInput]);
 
+  // Close mobile drawer on desktop resize
+  useEffect(() => {
+    const onResize = (): void => {
+      if (window.innerWidth >= 768) setMobileConvOpen(false);
+    };
+    window.addEventListener('resize', onResize);
+    return (): void => {
+      window.removeEventListener('resize', onResize);
+    };
+  }, []);
+
   const handleMouseDown = useCallback(
     (e: React.MouseEvent): void => {
       e.preventDefault();
@@ -103,8 +115,6 @@ export function ChatPage(): React.ReactElement {
     const map = new Map<string, 'running' | 'failed'>();
     if (!runs) return map;
     for (const run of runs) {
-      // For web runs, parent_conversation_id is the visible conversation in the sidebar.
-      // For CLI runs, conversation_id is the only conversation (no parent/worker split).
       const key = run.parent_conversation_id ?? run.conversation_id;
       if (run.status === 'running') {
         map.set(key, 'running');
@@ -181,20 +191,55 @@ export function ChatPage(): React.ReactElement {
 
   return (
     <div className="flex flex-1 overflow-hidden">
-      {/* Left panel */}
+      {/* ── Mobile overlay backdrop ── */}
+      {mobileConvOpen && (
+        <div
+          className="fixed inset-x-0 top-12 bottom-0 z-40 bg-black/60 md:hidden"
+          onClick={() => {
+            setMobileConvOpen(false);
+          }}
+          aria-hidden="true"
+        />
+      )}
+
+      {/* ── Conversations panel ──
+           Desktop : sidebar inline (relative, h-full)
+           Mobile  : fixed overlay drawer, slides from left via transform  ── */}
       <div
-        className="relative flex h-full flex-col border-r border-border bg-surface overflow-hidden"
-        style={{ width: `${String(width)}px`, flexShrink: 0 }}
+        className={cn(
+          'flex flex-col border-r border-border overflow-hidden',
+          // Mobile: fixed overlay starting below the sticky topbar
+          'fixed top-12 bottom-0 left-0 z-50',
+          // Desktop: back to normal inline flow
+          'md:relative md:inset-auto md:z-auto md:h-full',
+          // Slide animation — mobile toggles, desktop always shown
+          'transition-transform duration-300 ease-in-out',
+          mobileConvOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'
+        )}
+        style={{ width: `${String(width)}px`, flexShrink: 0, backgroundColor: 'var(--surface)' }}
       >
-        {/* New Chat button */}
-        <div className="px-3 pt-3 pb-2">
+        {/* New Chat button + mobile close */}
+        <div className="px-3 pt-3 pb-2 flex items-center gap-2">
           <button
-            onClick={handleNewChat}
-            className="flex w-full items-center gap-2 rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:bg-accent-hover transition-colors"
+            onClick={() => {
+              handleNewChat();
+              setMobileConvOpen(false);
+            }}
+            className="flex flex-1 items-center gap-2 rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:bg-accent-hover transition-colors"
           >
             <MessageSquarePlus className="h-4 w-4 shrink-0" />
             New Chat
           </button>
+          {/* Close button — mobile only */}
+          <button
+            onClick={() => {
+              setMobileConvOpen(false);
+            }}
+            className="md:hidden flex items-center justify-center rounded-md p-1.5 text-text-secondary hover:bg-surface-elevated hover:text-text-primary transition-colors"
+            aria-label="Close conversations panel"
+          >
+            <X className="h-4 w-4" />
+          </button>
         </div>
 
         {/* Project filter */}
@@ -283,9 +328,14 @@ export function ChatPage(): React.ReactElement {
           </div>
         </div>
 
-        {/* Conversation list */}
+        {/* Conversation list — clicking any item closes the mobile drawer */}
         <ScrollArea className="flex-1 min-h-0 px-2 pb-2">
-          <div className="flex flex-col gap-0.5">
+          <div
+            className="flex flex-col gap-0.5"
+            onClick={() => {
+              setMobileConvOpen(false);
+            }}
+          >
             {filtered && filtered.length > 0 ? (
               filtered.map(conv => (
                 <ConversationItem
@@ -300,12 +350,7 @@ export function ChatPage(): React.ReactElement {
             ) : (
               <div className="flex flex-col items-center justify-center gap-2 py-8 px-4">
                 <FolderGit2 className="h-8 w-8 text-text-tertiary" />
-                <span
-                  className={cn(
-                    'text-xs text-text-tertiary text-center',
-                    conversations && conversations.length > 0 ? '' : ''
-                  )}
-                >
+                <span className="text-xs text-text-tertiary text-center">
                   {conversations && conversations.length > 0
                     ? 'No matching conversations'
                     : 'No conversations yet — start a new chat!'}
@@ -315,15 +360,39 @@ export function ChatPage(): React.ReactElement {
           </div>
         </ScrollArea>
 
-        {/* Resize handle */}
+        {/* Resize handle — desktop only */}
         <div
           onMouseDown={handleMouseDown}
-          className="absolute right-0 top-0 bottom-0 w-1.5 cursor-col-resize bg-border/50 hover:bg-primary/40 transition-colors"
+          className="absolute right-0 top-0 bottom-0 w-1.5 cursor-col-resize bg-border/50 hover:bg-primary/40 transition-colors hidden md:block"
         />
       </div>
 
-      {/* Right panel - chat interface */}
-      <div className="flex flex-1 flex-col overflow-hidden">
+      {/* ── Right panel — chat interface, full width on mobile ── */}
+      <div className="flex flex-1 flex-col overflow-hidden min-w-0">
+        {/* Mobile-only topbar: conversations toggle + new chat shortcut.
+            z-30 keeps it below the drawer overlay (z-50) so the drawer fully
+            covers this bar when it slides in from the left.
+            bg-surface is opaque so content behind it is fully masked. */}
+        <div className="sticky top-0 z-30 flex shrink-0 items-center gap-2 border-b border-border bg-surface px-3 py-2 md:hidden">
+          <button
+            onClick={() => {
+              setMobileConvOpen(true);
+            }}
+            className="flex items-center gap-2 rounded-md px-2 py-1.5 text-text-secondary hover:bg-surface-elevated hover:text-text-primary transition-colors"
+            aria-label="Open conversations history"
+          >
+            <PanelLeft className="h-4 w-4 shrink-0" />
+            <span className="text-xs font-medium">Conversations</span>
+          </button>
+          <button
+            onClick={handleNewChat}
+            className="ml-auto flex items-center gap-1.5 rounded-md bg-primary px-2.5 py-1.5 text-xs font-medium text-primary-foreground hover:bg-accent-hover transition-colors"
+          >
+            <MessageSquarePlus className="h-3.5 w-3.5 shrink-0" />
+            New
+          </button>
+        </div>
+
         <ChatInterface key={conversationId ?? 'new'} conversationId={conversationId ?? 'new'} />
       </div>
     </div>
diff --git a/packages/web/src/routes/SettingsPage.tsx b/packages/web/src/routes/SettingsPage.tsx
index 0b9c7b6e60..ce01ce2f19 100644
--- a/packages/web/src/routes/SettingsPage.tsx
+++ b/packages/web/src/routes/SettingsPage.tsx
@@ -1,10 +1,12 @@
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useState, useEffect } from 'react';
+import { Sun, Moon } from 'lucide-react';
 import { Header } from '@/components/layout/Header';
 import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
+import { useTheme } from '@/contexts/ThemeContext';
 import {
   getConfig,
   getHealth,
@@ -21,6 +23,61 @@ import type { SafeConfigResponse, CodebaseResponse } from '@/lib/api';
 const selectClass =
   'h-9 rounded-md border border-border bg-surface-elevated text-text-primary px-3 text-sm focus:outline-none focus:ring-1 focus:ring-ring [&>option]:bg-surface-elevated [&>option]:text-text-primary';
 
+function AppearanceSection(): React.ReactElement {
+  const { theme, toggleTheme, compactLayout, toggleCompactLayout } = useTheme();
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Appearance</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-6">
+          {/* Theme toggle */}
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="font-medium text-sm">Theme</p>
+              <p className="text-sm text-muted-foreground">Switch between light and dark mode</p>
+            </div>
+            <button
+              onClick={toggleTheme}
+              className="flex items-center gap-2 px-3 py-2 rounded-md border hover:bg-accent transition-colors"
+              aria-label={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
+            >
+              {theme === 'dark' ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+              <span className="text-sm capitalize">{theme}</span>
+            </button>
+          </div>
+
+          {/* Compact layout toggle */}
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="font-medium text-sm">Always use responsive layout</p>
+              <p className="text-sm text-muted-foreground">
+                Use the mobile-friendly compact layout on all screen sizes
+              </p>
+            </div>
+            <button
+              role="switch"
+              aria-checked={compactLayout}
+              onClick={toggleCompactLayout}
+              className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+                compactLayout ? 'bg-primary' : 'bg-input'
+              }`}
+            >
+              <span
+                className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                  compactLayout ? 'translate-x-6' : 'translate-x-1'
+                }`}
+              />
+            </button>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
 function SystemHealthSection({
   health,
   database,
@@ -634,6 +691,8 @@ export function SettingsPage(): React.ReactElement {
 
           {isLoading && <div className="text-sm text-muted-foreground">Loading settings...</div>}
 
+          <AppearanceSection />
+
           <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
             <SystemHealthSection health={health} database={configData?.database} />
             <ConcurrencySection health={health} />
diff --git a/packages/web/vite.config.ts b/packages/web/vite.config.ts
index 77d49e9b98..2f342e2900 100644
--- a/packages/web/vite.config.ts
+++ b/packages/web/vite.config.ts
@@ -45,7 +45,9 @@ export default defineConfig(({ mode }) => {
       ],
     },
     server: {
+      host: true,
       port: 5173,
+      allowedHosts: true,
       proxy: {
         '/api': {
           target: `http://localhost:${apiPort}`,