ompchamber 0.3.0

package/src/client/components/mobile/LayoutWrapper.tsx

@@ -0,0 +1,221 @@
+import { useCallback, useState } from 'preact/hooks';
+import { useSearchParams } from '@/client/lib/router/search-params';
+import { useChamberEvent } from '@/client/hooks/ui/window-event';
+import type { SettingsCategoryId } from '@/shared/types';
+import { MobileMainView } from '@/client/components/mobile/MainView';
+import { MobileSessionSidebar } from '@/client/components/mobile/SessionSidebar';
+import { MobileRightSidebar } from '@/client/components/mobile/RightSidebar';
+import { MobileFullEditor } from '@/client/components/mobile/mobile-right-sidebar/FullEditor';
+import { MobileFullDiff } from '@/client/components/mobile/mobile-right-sidebar/FullDiff';
+import { SettingsModal } from '@/client/components/settings/Modal';
+import { activeProjectForSession } from '@/shared/lib/workspace/active-project';
+import { spawnCwdForNewSession, triggerSessionPrewarm } from '@/shared/lib/omp/session/prewarm';
+import { useSidebarData } from '@/client/hooks/chat/omp/session-list';
+
+interface MobileLayoutWrapperProps {
+  onDesktopToggle?: () => void;
+  appSettings?: Record<string, any>;
+}
+
+export type MobileScreen = 'main' | 'session' | 'right';
+
+export function MobileLayoutWrapper({ onDesktopToggle, appSettings = {} }: MobileLayoutWrapperProps) {
+  const { folders } = useSidebarData();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const sessionParam = searchParams.get('sessionId');
+  const sessionId = sessionParam ? (Number.isNaN(Number(sessionParam)) ? sessionParam : Number(sessionParam)) : null;
+  const folderParam = searchParams.get('folderId');
+  const folderId = folderParam ? (Number.isNaN(Number(folderParam)) ? folderParam : Number(folderParam)) : null;
+
+  const [currentScreen, setCurrentScreen] = useState<MobileScreen>('main');
+  const [mobileEditorFile, setMobileEditorFile] = useState<{ name: string; path?: string; content?: string; root?: string } | null>(null);
+  const [mobileDiff, setMobileDiff] = useState<{ path: string; status?: string; staged?: boolean; repo?: string; root?: string } | null>(null);
+  // Bumped whenever a write lands so the workspace panels (explorer, git,
+  // context) re-read from disk — the same signal the desktop layout passes down.
+  const [refreshKey, setRefreshKey] = useState(0);
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [settingsCategory, setSettingsCategory] = useState<SettingsCategoryId>('appearance');
+  const [autoOpenAddProvider, setAutoOpenAddProvider] = useState(false);
+
+  const handleWorkspaceChanged = useCallback(() => setRefreshKey(k => k + 1), []);
+
+  const { folder: sessionFolder } = activeProjectForSession(folders, sessionId);
+  const contextFolder = sessionFolder ?? (folderId ? folders.find(f => String(f.id) === String(folderId)) ?? null : null);
+  const activeProjectPath = contextFolder?.project_path ?? null;
+  const hasContext = !!contextFolder;
+
+  // Listen to open-file event on mobile
+  useChamberEvent('omp:open-file', (e) => {
+    const customEvent = e as CustomEvent<{ path: string; name?: string; content?: string; root?: string }>;
+    if (!customEvent.detail || !customEvent.detail.path) return;
+    const rawPath = customEvent.detail.path.replace(/^\/+/, '');
+    const name = customEvent.detail.name || rawPath.split('/').pop() || 'file';
+    setMobileEditorFile({
+      name,
+      path: rawPath,
+      content: customEvent.detail.content,
+      root: customEvent.detail.root,
+    });
+  });
+
+  // The git panel and the file explorer announce a diff through
+  // `omp:open-diff`, which the desktop layout turns into an editor tab. On the
+  // phone the same event opens the full-screen diff; without a listener here
+  // the tap was silently dropped.
+  useChamberEvent('omp:open-diff', (e) => {
+    const detail = (e as CustomEvent<{ file?: string; status?: string; staged?: boolean; repo?: string; root?: string }>).detail;
+    if (!detail?.file) return;
+    setMobileDiff({
+      path: detail.file.replace(/^\/+/, ''),
+      status: detail.status,
+      staged: detail.staged,
+      repo: detail.repo,
+      root: detail.root ?? activeProjectPath ?? undefined,
+    });
+  });
+
+  // Settings requests (e.g. the model dropdown asking for Settings → Providers
+  // when no provider is configured) arrive on the same global channel the
+  // desktop layout listens on. SettingsModal itself only reads the payload and
+  // never opens, so the open has to be handled here.
+  useChamberEvent('omp:open-settings', (e) => {
+    const detail = (e as CustomEvent<{ category?: SettingsCategoryId; autoOpenAdd?: boolean }>).detail;
+    setSettingsCategory(detail?.category ?? 'appearance');
+    setAutoOpenAddProvider(Boolean(detail?.autoOpenAdd));
+    setSettingsOpen(true);
+  });
+
+  const handleSelectSession = (id: number | string) => {
+    setSearchParams(prev => {
+      prev.set('sessionId', id.toString());
+      // Navigating away from a session must also exit its transcript view.
+      if (prev.has('subagent')) prev.delete('subagent');
+      return prev;
+    }, { replace: true });
+    setCurrentScreen('main');
+  };
+
+  // Mirrors the desktop sidebar: a client-side pending session (`new-…`) that
+  // the chat timeline replaces with the real omp session id on first send.
+  // The current folder stays selected so the composer keeps its context.
+  const handleNewSession = () => {
+    // Same resolution the send path uses (active session's folder, else the
+    // URL folderId) so the prewarmed cwd matches the eventual spawn cwd.
+    const cwd = spawnCwdForNewSession(folders, sessionParam, folderId ?? undefined);
+    if (cwd) triggerSessionPrewarm(cwd);
+    setSearchParams(prev => {
+      const currentSessionId = prev.get('sessionId');
+      const next = new URLSearchParams(prev);
+      next.set('sessionId', `new-${Date.now()}`);
+      if (currentSessionId) {
+        const currentFolder = folders.find(f =>
+          f.sessions?.some((s) => String(s.id) === String(currentSessionId))
+        );
+        if (currentFolder) next.set('folderId', currentFolder.id.toString());
+      }
+      return next;
+    }, { replace: true });
+    setCurrentScreen('main');
+  };
+
+  const handleCreateFolder = async (input: { name: string; path?: string }) => {
+    const res = await fetch('/api/folders', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(input),
+    });
+    const data = await res.json().catch(() => ({}));
+    if (!res.ok || !data.success) {
+      throw new Error(data.error || `HTTP ${res.status}`);
+    }
+    window.location.reload();
+  };
+
+  const handleOpenFile = useCallback((file: any) => {
+    const rawPath = (file?.path || '').replace(/^\/+/, '');
+    const name = file?.name || rawPath.split('/').pop() || 'file';
+    setMobileEditorFile({
+      name,
+      path: rawPath,
+      content: file?.content,
+      root: file?.root ?? activeProjectPath ?? undefined,
+    });
+  }, [activeProjectPath]);
+
+  return (
+    <div
+      className="flex flex-col h-dvh w-screen overflow-hidden bg-canvas text-ink font-sans selection:bg-ink selection:text-canvas relative"
+    >
+      <div className={`flex-1 min-h-0 w-full ${currentScreen === 'main' ? 'block' : 'hidden'}`}>
+        <MobileMainView
+          activeSessionId={sessionId}
+          onSelectSession={handleSelectSession}
+          onNewSession={handleNewSession}
+          onOpenSessionSidebar={() => setCurrentScreen('session')}
+          onOpenRightSidebar={() => setCurrentScreen('right')}
+          appSettings={appSettings}
+        />
+      </div>
+
+      <div className={`flex-1 min-h-0 w-full ${currentScreen === 'session' ? 'block' : 'hidden'}`}>
+        <MobileSessionSidebar
+          activeSessionId={sessionId}
+          onSelectSession={handleSelectSession}
+          onNewSession={handleNewSession}
+          onCreateFolder={handleCreateFolder}
+          onClose={() => setCurrentScreen('main')}
+          onDesktopToggle={onDesktopToggle}
+          appSettings={appSettings}
+        />
+      </div>
+
+      {/* Mounted only while the drawer is open: its panels (explorer, git,
+          terminal, context) cost real CPU and fetch real data — a hidden
+          phone drawer must not keep them alive behind the chat screen. The
+          session screen above stays mounted on purpose: its status-ack effect
+          must run even while the drawer is closed, and its stream poll is
+          already inert when nothing is running. */}
+      {currentScreen === 'right' && (
+        <div className="flex-1 min-h-0 w-full">
+          <MobileRightSidebar
+            enabled={hasContext}
+            rootPath={activeProjectPath ?? undefined}
+            refreshKey={refreshKey}
+            onRefresh={handleWorkspaceChanged}
+            onOpenFile={handleOpenFile}
+            onClose={() => setCurrentScreen('main')}
+          />
+        </div>
+      )}
+
+      {mobileEditorFile && (
+        <MobileFullEditor
+          file={mobileEditorFile}
+          onClose={() => setMobileEditorFile(null)}
+          onFileSaved={handleWorkspaceChanged}
+        />
+      )}
+
+      {mobileDiff && (
+        <MobileFullDiff
+          diff={mobileDiff}
+          onClose={() => setMobileDiff(null)}
+          onFileSaved={handleWorkspaceChanged}
+        />
+      )}
+
+      {/* Single settings modal for the mobile layout, fed by omp:open-settings
+          and by the sidebar's Settings button. */}
+      <SettingsModal
+        isOpen={settingsOpen}
+        onClose={() => {
+          setSettingsOpen(false);
+          setAutoOpenAddProvider(false);
+        }}
+        initialCategory={settingsCategory}
+        autoOpenAddProvider={autoOpenAddProvider}
+        appSettings={appSettings}
+      />
+    </div>
+  );
+}

package/src/client/components/mobile/MainView.tsx

@@ -0,0 +1,68 @@
+import { useMemo, useState } from 'preact/hooks';
+import { MobileHeader } from '@/client/components/mobile/mobile-main-view/Header';
+import { ChatTimeline } from '@/client/components/workspace/chat-timeline/index';
+
+import { useSidebarData } from '@/client/hooks/chat/omp/session-list';
+
+interface MobileMainViewProps {
+  activeSessionId: number | string | null;
+  onSelectSession: (id: number | string) => void;
+  onNewSession: () => void;
+  onOpenSessionSidebar: () => void;
+  onOpenRightSidebar: () => void;
+  appSettings?: Record<string, any>;
+}
+
+/**
+ * Mobile chat screen: the mobile header (sessions drawer, session picker,
+ * telemetry, right panel) stacked over the shared ChatTimeline in its `mobile`
+ * variant. Running the same timeline component as desktop is what gives the
+ * phone the live omp agent bridge, queue/steering, subagent transcripts, ask
+ * dialogs and undo/retry — the previous mobile-only reimplementation had none
+ * of those.
+ */
+export function MobileMainView({
+  activeSessionId,
+  onSelectSession,
+  onNewSession,
+  onOpenSessionSidebar,
+  onOpenRightSidebar,
+  appSettings = {},
+}: MobileMainViewProps) {
+  const { folders } = useSidebarData();
+  // Title reported by the timeline: the live omp title, the pending-session
+  // placeholder, or an optimistic rename. Null until the session loads.
+  const [liveTitle, setLiveTitle] = useState<string | null>(null);
+
+  const folderTitle = useMemo(() => {
+    if (!activeSessionId) return 'New session';
+    for (const f of folders) {
+      const found = f.sessions?.find(s => String(s.id) === String(activeSessionId));
+      if (found) return found.title;
+    }
+    return null;
+  }, [activeSessionId, folders]);
+
+  const activeSessionTitle = liveTitle || folderTitle || 'New session';
+
+  return (
+    <div className="flex flex-col h-full w-full bg-canvas text-ink relative">
+      <MobileHeader
+        activeSessionTitle={activeSessionTitle}
+        activeSessionId={activeSessionId}
+        onOpenSessionSidebar={onOpenSessionSidebar}
+        onOpenRightSidebar={onOpenRightSidebar}
+        onNewSession={onNewSession}
+        onSelectSession={onSelectSession}
+      />
+
+      <div className="flex-1 min-h-0">
+        <ChatTimeline
+          appSettings={appSettings}
+          onSessionTitle={setLiveTitle}
+          variant="mobile"
+        />
+      </div>
+    </div>
+  );
+}

package/src/client/components/mobile/RightSidebar.tsx

@@ -0,0 +1,217 @@
+import { useState } from 'preact/hooks';
+import { Suspense } from 'preact/compat';
+import { BarChart3, Bot, Files, GitBranch, Globe, Layers, Search, Terminal, X } from 'lucide-preact';
+import { LazyBrowserPanel, LazyContextPanel, LazyFileExplorer, LazyGitPanel, LazySearchPanel, LazyTerminalPanel, LazyUsagePanel, LazyUserBrowserPanel } from '@/client/components/common/lazy-panels';
+import { useGitStatus } from '@/client/hooks/workspace/git-status';
+import { GIT_STATUS_POLL_MS } from '@/shared/lib/workspace/refresh-cadence';
+
+interface MobileRightSidebarProps {
+  enabled?: boolean;
+  rootPath?: string;
+  /** Bumped after a write so the explorer, git and context panels re-read. */
+  refreshKey?: number;
+  onRefresh?: () => void;
+  onOpenFile?: (file: unknown) => void;
+  onClose: () => void;
+}
+
+type MobileTab = 'git' | 'files' | 'search' | 'context' | 'terminal' | 'user-browser' | 'browser' | 'usage';
+
+export function MobileRightSidebar({
+  enabled = true,
+  rootPath,
+  refreshKey = 0,
+  onRefresh,
+  onOpenFile,
+  onClose
+}: MobileRightSidebarProps) {
+  const [activeTab, setActiveTab] = useState<MobileTab>('files');
+  // Same source the desktop activity bar uses, so the "uncommitted changes"
+  // dot means the same thing on both layouts. Polls only while this drawer is
+  // the mounted screen — the poll itself is visibility-gated by the hook.
+  const { changes } = useGitStatus(rootPath, '.', refreshKey, enabled, GIT_STATUS_POLL_MS);
+  const hasGitChanges = changes.length > 0;
+
+  return (
+    <div className="flex flex-col h-full w-full bg-paper text-ink relative select-none">
+
+      {/* Top Header & Tab Navigation Bar */}
+      <div
+        className="border-b border-ink/10 flex items-center justify-between px-3 flex-shrink-0 bg-canvas"
+        style={{
+          height: 'calc(3.5rem + env(safe-area-inset-top, 0px))',
+          paddingTop: 'env(safe-area-inset-top, 0px)',
+          paddingLeft: 'max(0.75rem, env(safe-area-inset-left, 0px))',
+          paddingRight: 'max(0.75rem, env(safe-area-inset-right, 0px))',
+        }}
+      >
+
+        <div className="flex items-center space-x-1.5 overflow-x-auto no-scrollbar py-1">
+          <button
+            type="button"
+            onClick={() => setActiveTab('files')}
+            className={`flex items-center transition-all cursor-pointer ${
+              activeTab === 'files'
+                ? 'space-x-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold bg-ink text-canvas shadow-sm'
+                : 'p-2 rounded-lg text-ink/70 hover:bg-ink/5'
+            }`}
+            title="Files Explorer"
+          >
+            <Files size={14} className="flex-shrink-0" />
+            {activeTab === 'files' && <span>Files</span>}
+          </button>
+
+          <button
+            type="button"
+            onClick={() => setActiveTab('search')}
+            className={`flex items-center transition-all cursor-pointer ${
+              activeTab === 'search'
+                ? 'space-x-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold bg-ink text-canvas shadow-sm'
+                : 'p-2 rounded-lg text-ink/70 hover:bg-ink/5'
+            }`}
+            title="Search Workspace"
+          >
+            <Search size={14} className="flex-shrink-0" />
+            {activeTab === 'search' && <span>Search</span>}
+          </button>
+
+          <button
+            type="button"
+            onClick={() => setActiveTab('git')}
+            className={`relative flex items-center transition-all cursor-pointer ${
+              activeTab === 'git'
+                ? 'space-x-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold bg-ink text-canvas shadow-sm'
+                : 'p-2 rounded-lg text-ink/70 hover:bg-ink/5'
+            }`}
+            title="GIT"
+          >
+            <GitBranch size={14} className="flex-shrink-0" />
+            {activeTab === 'git' && <span className="tracking-wide">GIT</span>}
+            {hasGitChanges && (
+              <span
+                className="absolute top-1 right-1 w-1.5 h-1.5 rounded-full bg-info"
+                title="Uncommitted changes"
+              />
+            )}
+          </button>
+
+          <button
+            type="button"
+            onClick={() => setActiveTab('context')}
+            className={`flex items-center transition-all cursor-pointer ${
+              activeTab === 'context'
+                ? 'space-x-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold bg-ink text-canvas shadow-sm'
+                : 'p-2 rounded-lg text-ink/70 hover:bg-ink/5'
+            }`}
+            title="Context & Telemetry"
+          >
+            <Layers size={14} className="flex-shrink-0" />
+            {activeTab === 'context' && <span>Context</span>}
+          </button>
+
+          <button
+            type="button"
+            onClick={() => setActiveTab('terminal')}
+            className={`flex items-center transition-all cursor-pointer ${
+              activeTab === 'terminal'
+                ? 'space-x-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold bg-ink text-canvas shadow-sm'
+                : 'p-2 rounded-lg text-ink/70 hover:bg-ink/5'
+            }`}
+            title="Bun Terminal"
+          >
+            <Terminal size={14} className="flex-shrink-0" />
+            {activeTab === 'terminal' && <span>Terminal</span>}
+          </button>
+
+          <button
+            type="button"
+            onClick={() => setActiveTab('user-browser')}
+            className={`flex items-center transition-all cursor-pointer ${
+              activeTab === 'user-browser'
+                ? 'space-x-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold bg-ink text-canvas shadow-sm'
+                : 'p-2 rounded-lg text-ink/70 hover:bg-ink/5'
+            }`}
+            title="Browser (Anda)"
+          >
+            <Globe size={14} className="flex-shrink-0" />
+            {activeTab === 'user-browser' && <span>Browser</span>}
+          </button>
+
+          <button
+            type="button"
+            onClick={() => setActiveTab('browser')}
+            className={`flex items-center transition-all cursor-pointer ${
+              activeTab === 'browser'
+                ? 'space-x-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold bg-ink text-canvas shadow-sm'
+                : 'p-2 rounded-lg text-ink/70 hover:bg-ink/5'
+            }`}
+            title="Browser Agent"
+          >
+            <Bot size={14} className="flex-shrink-0" />
+            {activeTab === 'browser' && <span>Agent</span>}
+          </button>
+
+          <button
+            type="button"
+            onClick={() => setActiveTab('usage')}
+            className={`flex items-center transition-all cursor-pointer ${
+              activeTab === 'usage'
+                ? 'space-x-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold bg-ink text-canvas shadow-sm'
+                : 'p-2 rounded-lg text-ink/70 hover:bg-ink/5'
+            }`}
+            title="Usage"
+          >
+            <BarChart3 size={14} className="flex-shrink-0" />
+            {activeTab === 'usage' && <span>Usage</span>}
+          </button>
+        </div>
+
+        <button
+          type="button"
+          onClick={onClose}
+          className="p-1.5 rounded-lg hover:bg-ink/5 active:bg-ink/10 text-ink transition-colors flex-shrink-0 ml-2"
+          title="Close right sidebar"
+          aria-label="Close right sidebar"
+        >
+          <X size={20} strokeWidth={1.8} />
+        </button>
+      </div>
+
+      {/* Main Tab Content — shared components so mobile == desktop features */}
+      <div
+        className="flex-1 min-h-0 overflow-hidden relative"
+        style={{ paddingBottom: 'env(safe-area-inset-bottom, 0px)' }}
+      >
+        {!enabled ? (
+          <div className="h-full flex items-center justify-center text-ink/40">
+            <span className="text-xs font-mono">No session selected</span>
+          </div>
+        ) : (
+          <>
+            <Suspense fallback={<div className="h-full flex items-center justify-center text-ink/40"><span className="text-xs font-mono">Loading…</span></div>}>
+              {activeTab === 'files' && (
+                <LazyFileExplorer className="h-full w-full" enabled={enabled} rootPath={rootPath} refreshKey={refreshKey} onRefresh={onRefresh} onOpenFile={onOpenFile} />
+              )}
+              {activeTab === 'search' && (
+                <LazySearchPanel className="h-full w-full" enabled={enabled} rootPath={rootPath} />
+              )}
+              {activeTab === 'git' && (
+                <LazyGitPanel className="h-full w-full" enabled={enabled} rootPath={rootPath} refreshKey={refreshKey} />
+              )}
+              {activeTab === 'context' && (
+                <LazyContextPanel className="h-full w-full" enabled={enabled} refreshKey={refreshKey} onClose={onClose} />
+              )}
+              {activeTab === 'terminal' && (
+                <LazyTerminalPanel className="h-full w-full" enabled={enabled} rootPath={rootPath} showHeader={false} />
+              )}
+              {activeTab === 'user-browser' && <LazyUserBrowserPanel className="h-full w-full" />}
+              {activeTab === 'browser' && <LazyBrowserPanel className="h-full w-full" active />}
+              {activeTab === 'usage' && <LazyUsagePanel className="h-full w-full" />}
+            </Suspense>
+          </>
+        )}
+      </div>
+
+    </div>
+  );
+}

package/src/client/components/mobile/SessionSidebar.tsx

@@ -0,0 +1,175 @@
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { MobileSessionHeader } from '@/client/components/mobile/mobile-session-sidebar/Header';
+import { MobileSessionToolbar } from '@/client/components/mobile/mobile-session-sidebar/Toolbar';
+import { MobileSessionList } from '@/client/components/mobile/mobile-session-sidebar/List';
+import { MobileSessionFooter } from '@/client/components/mobile/mobile-session-sidebar/Footer';
+import { ToastStack } from '@/client/components/common/ToastStack';
+import { AboutModal, NewWorkspaceModal, SchedulerModal } from '@/client/components/layout/session-sidebar/Modals';
+import { useOnClickOutside } from '@/client/hooks/ui/on-click-outside';
+import { useScrollbarFade } from '@/client/hooks/ui/scrollbar-fade';
+import { useToasts } from '@/client/hooks/ui/toasts';
+import { useUpdates } from '@/client/hooks/ui/updates';
+import { useSessionSidebarController } from '@/client/hooks/chat/omp/session-sidebar-controller';
+import { MobileSessionListSkeleton } from '@/client/components/mobile/mobile-session-sidebar/Skeleton';
+
+interface MobileSessionSidebarProps {
+  activeSessionId: number | string | null;
+  onSelectSession: (id: number | string) => void;
+  onNewSession: () => void;
+  onCreateFolder: (input: { name: string; path?: string }) => Promise<void> | void;
+  onClose: () => void;
+  onDesktopToggle?: () => void;
+  appSettings?: Record<string, any>;
+}
+
+export function MobileSessionSidebar({
+  activeSessionId,
+  onSelectSession,
+  onNewSession,
+  onCreateFolder,
+  onClose,
+  onDesktopToggle,
+  appSettings = {}
+}: MobileSessionSidebarProps) {
+  const {
+    folders,
+    initializing,
+    searchQuery,
+    setSearchQuery,
+    showArchived,
+    setShowArchived,
+    optionsOpen,
+    setOptionsOpen,
+    sortOption,
+    handleSortChange,
+    processedFolders,
+    sessionStatus,
+    handleSelectSession,
+  } = useSessionSidebarController(appSettings, { onSelectSession, onAfterSelect: onClose });
+
+  const [expandedFolders, setExpandedFolders] = useState<Record<number, boolean>>({
+    1: true,
+    2: true,
+    3: true
+  });
+
+  // Modals state (matching desktop)
+  const [newWorkspaceOpen, setNewWorkspaceOpen] = useState(false);
+  const [schedulerOpen, setSchedulerOpen] = useState(false);
+  const [aboutOpen, setAboutOpen] = useState(false);
+  const updates = useUpdates();
+  const { toasts, pushToast, dismissToast } = useToasts();
+
+  const optionsRef = useRef<HTMLDivElement>(null);
+  useOnClickOutside(optionsRef, () => setOptionsOpen(false));
+
+  const { isScrolling, handleScroll } = useScrollbarFade();
+
+  const toggleFolder = (folderId: number) => {
+    setExpandedFolders(prev => ({
+      ...prev,
+      [folderId]: !prev[folderId]
+    }));
+    const folder = folders.find(item => item.id === folderId);
+    const nextExpanded = !(expandedFolders[folderId] ?? folder?.isExpanded ?? true);
+    fetch(`/api/folders/${folderId}/toggle`, {
+      method: 'POST',
+      body: new URLSearchParams({ isExpanded: String(nextExpanded) }),
+    })
+      .then((response) => {
+        if (!response.ok) throw new Error(`HTTP ${response.status}`);
+        window.dispatchEvent(new CustomEvent('omp:workspace-updated', {
+          detail: { folderId },
+        }));
+      })
+      .catch((error: unknown) => {
+        console.error('Failed to save mobile workspace state:', error);
+      });
+  };
+
+  useEffect(() => {
+    setExpandedFolders(Object.fromEntries(folders.map(folder => [folder.id, folder.isExpanded])));
+  }, [folders]);
+
+  const handleNewSessionAndClose = () => {
+    onNewSession();
+    onClose();
+  };
+
+  const handleToggleArchived = () => {
+    setShowArchived(!showArchived);
+    setOptionsOpen(false);
+  };
+
+  return (
+    <div className="flex flex-col h-full w-full bg-canvas text-ink relative select-none">
+      
+      <MobileSessionHeader onClose={onClose} />
+
+      <MobileSessionToolbar
+        searchQuery={searchQuery}
+        sortOption={sortOption}
+        optionsOpen={optionsOpen}
+        showArchived={showArchived}
+        optionsRef={optionsRef}
+        onNewSession={handleNewSessionAndClose}
+        onNewWorkspace={() => setNewWorkspaceOpen(true)}
+        onScheduler={() => setSchedulerOpen(true)}
+        onToggleOptions={() => setOptionsOpen(!optionsOpen)}
+        onSortChange={handleSortChange}
+        onResetSort={() => handleSortChange('A-Z')}
+        onToggleArchived={handleToggleArchived}
+        onHideArchived={() => setShowArchived(false)}
+        onSearchChange={setSearchQuery}
+        onClearSearch={() => setSearchQuery('')}
+      />
+
+      {initializing ? (
+        <MobileSessionListSkeleton />
+      ) : (
+        <MobileSessionList
+          folders={processedFolders}
+          activeSessionId={activeSessionId}
+          expandedFolders={expandedFolders}
+          showArchived={showArchived}
+          sessionStatus={sessionStatus}
+          isScrolling={isScrolling}
+          onScroll={handleScroll}
+          onSelectSession={handleSelectSession}
+          onToggleFolder={toggleFolder}
+        />
+      )}
+
+      <MobileSessionFooter
+        onSettings={() => window.dispatchEvent(new CustomEvent('omp:open-settings', { detail: {} }))}
+        onAbout={() => setAboutOpen(true)}
+        onDesktopToggle={onDesktopToggle}
+        updateAvailable={updates.hasUpdate}
+        onUpdateClick={() => {
+          setAboutOpen(true);
+          void updates.check();
+        }}
+      />
+
+      {/* Reusable Modals */}
+      <NewWorkspaceModal
+        isOpen={newWorkspaceOpen}
+        onClose={() => setNewWorkspaceOpen(false)}
+        onCreate={onCreateFolder}
+      />
+      <SchedulerModal
+        isOpen={schedulerOpen}
+        onClose={() => setSchedulerOpen(false)}
+      />
+      <AboutModal
+        isOpen={aboutOpen}
+        onClose={() => setAboutOpen(false)}
+        updates={updates}
+        onToast={pushToast}
+      />
+
+      <ToastStack toasts={toasts} onDismiss={dismissToast} />
+
+    </div>
+  );
+}