ompchamber 3.1.1 → 3.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ompchamber",
-  "version": "3.1.1",
+  "version": "3.3.0",
   "description": "Developer web console and diagnostic chamber for AI Oh-My-Pi — Elysia + Preact on Bun.",
   "license": "UNLICENSED",
   "author": "Wijanarko Putra Rajeb <wijanarko.rajeb@gmail.com>",
@@ -50,6 +50,7 @@
     "@fontsource/fira-code": "^5.3.0",
     "@shikijs/langs": "^4.4.3",
     "@shikijs/themes": "^4.4.3",
+    "@tailwindcss/postcss": "^4.1.14",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/addon-webgl": "^0.19.0",
     "@xterm/xterm": "^6.0.0",
@@ -60,10 +61,12 @@
     "marked": "^18.0.11",
     "marked-linkify-it": "^4.0.2",
     "mermaid": "^12.0.0",
+    "postcss": "^8.5.16",
     "preact": "^10.29.8",
     "remend": "^1.3.1",
     "ripgrep": "^0.3.1",
     "shiki": "^4.4.3",
+    "tailwindcss": "^4.1.14",
     "yaml": "^2.9.1"
   },
   "devDependencies": {
@@ -73,13 +76,11 @@
     "@semantic-release/github": "^12.0.10",
     "@semantic-release/npm": "^13.2.0",
     "@semantic-release/release-notes-generator": "^14.1.1",
-    "@tailwindcss/postcss": "^4.1.14",
     "@types/bun": "^1.4.2",
     "@types/node": "^22.14.0",
     "conventional-changelog-conventionalcommits": "^9.3.1",
     "happy-dom": "^20.14.5",
     "semantic-release": "^25.0.9",
-    "tailwindcss": "^4.1.14",
     "typescript": "~5.8.2"
   }
 }

package/public/sw.js

@@ -1,6 +1,37 @@
-const CACHE_NAME = 'ompchamber-v1';
+/**
+ * OMPChamber service worker.
+ *
+ * Two jobs, and only the first one is about installability.
+ *
+ * 1. Chromium requires a fetch handler for PWA installability.
+ *
+ * 2. The dev client bundle is cached here rather than by the HTTP cache,
+ *    because the HTTP cache CANNOT hold it. Chrome declines to store a response
+ *    whose decoded body reaches ~5 MB — measured with `Cache-Control: no-cache`
+ *    and a working `ETag`: 1 MB and 4 MB answered `304` on the next load, while
+ *    5, 6, 7, 8, 16 and 20 MB were re-fetched in full every time, never sending
+ *    `If-None-Match`. Bun's development bundle is ~19.7 MB (unminified, by
+ *    design), so it was re-downloaded on every single page load — the whole of
+ *    the dev-mode bandwidth complaint. Cache Storage has no such per-entry
+ *    limit, so this is the one layer that can hold it.
+ *
+ * Only `/_dev-assets/client/*` is cached: that is the bundle, whose filename
+ * carries a build-generation hash that changes on every rebuild, so a URL is a
+ * reliable key for its bytes. `/_dev-assets/asset/*` is deliberately NOT
+ * cached — a CSS asset keeps its name while its content changes (appending a
+ * rule to `tailwind.css` changes the bytes served at the same URL), so
+ * cache-first there would serve stale styles; those go to the network and are
+ * revalidated by the server's own `ETag`, which answers `304`.
+ *
+ * One bundle generation is kept at a time: storing a new one drops the rest, so
+ * the cache cannot grow by one bundle per rebuild. Nothing here runs in
+ * production — the URLs it matches do not exist there.
+ */
 
-self.addEventListener('install', (event) => {
+const BUNDLE_CACHE = 'ompchamber-dev-bundle';
+const BUNDLE_PREFIX = '/_dev-assets/client/';
+
+self.addEventListener('install', () => {
   self.skipWaiting();
 });
 
@@ -9,7 +40,25 @@ self.addEventListener('activate', (event) => {
 });
 
 self.addEventListener('fetch', (event) => {
-  // A simple fetch handler is required by Chromium for PWA installability.
-  // We'll just let network requests pass through normally.
-  event.respondWith(fetch(event.request).catch(() => caches.match(event.request)));
+  const url = new URL(event.request.url);
+  if (event.request.method !== 'GET') return;
+  if (url.origin !== self.location.origin) return;
+  if (!url.pathname.startsWith(BUNDLE_PREFIX)) return;
+
+  event.respondWith(
+    (async () => {
+      const cache = await caches.open(BUNDLE_CACHE);
+      const hit = await cache.match(url.pathname);
+      if (hit) return hit;
+
+      const response = await fetch(event.request);
+      if (response.ok) {
+        await cache.put(url.pathname, response.clone());
+        // The previous generation is dead the moment a new one is stored.
+        const stale = await cache.keys();
+        await Promise.all(stale.filter((key) => new URL(key.url).pathname !== url.pathname).map((key) => cache.delete(key)));
+      }
+      return response;
+    })(),
+  );
 });

package/src/cli/lib/output.js

@@ -95,6 +95,12 @@ export function fail(message, code = 1) {
 
 /**
  * Render a simple padded plain-text table for human output.
+ *
+ * Widths are measured with `Bun.stringWidth`, not `String.length`: `.length`
+ * counts UTF-16 code units, so a CJK session title or an emoji reported a width
+ * it does not render at and the whole table misaligned (verified: a 5-column
+ * overcount on a Japanese title). `stringWidth` also ignores ANSI escapes, so a
+ * coloured cell does not pad against its own escape bytes.
  */
 export function formatTable(rows, headers = []) {
   const body = Array.isArray(rows) ? rows.map((row) => (Array.isArray(row) ? row : [row])) : [];
@@ -105,21 +111,22 @@ export function formatTable(rows, headers = []) {
     return '';
   }
 
+  const cellText = (row, i) => (row[i] === undefined || row[i] === null ? '' : String(row[i]));
   const widths = [];
   for (let i = 0; i < columns; i += 1) {
-    const headerWidth = head[i] === undefined ? 0 : String(head[i]).length;
-    const cellWidth = body.reduce((max, row) => {
-      const cell = row[i] === undefined || row[i] === null ? '' : String(row[i]);
-      return Math.max(max, cell.length);
-    }, 0);
-    widths[i] = Math.max(headerWidth, cellWidth);
+    let width = head[i] === undefined ? 0 : Bun.stringWidth(String(head[i]));
+    for (const row of body) {
+      const cellWidth = Bun.stringWidth(cellText(row, i));
+      if (cellWidth > width) width = cellWidth;
+    }
+    widths[i] = width;
   }
 
   const renderRow = (row) =>
     widths
       .map((width, i) => {
-        const cell = row[i] === undefined || row[i] === null ? '' : String(row[i]);
-        return cell.padEnd(width);
+        const cell = cellText(row, i);
+        return cell + ' '.repeat(Math.max(0, width - Bun.stringWidth(cell)));
       })
       .join('  ')
       .trimEnd();

package/src/client/components/common/Modal.tsx

@@ -45,13 +45,19 @@ export function Modal({
   return (
     <div
       className={`fixed inset-0 bg-ink/40 backdrop-blur-[2px] ${zClass} flex items-center justify-center p-4`}
+      style={{
+        paddingTop: 'max(1rem, env(safe-area-inset-top, 0px))',
+        paddingBottom: 'max(1rem, env(safe-area-inset-bottom, 0px))',
+        paddingLeft: 'max(1rem, env(safe-area-inset-left, 0px))',
+        paddingRight: 'max(1rem, env(safe-area-inset-right, 0px))',
+      }}
       onClick={onClose}
     >
       <div
-        className={`bg-paper border border-ink/15 rounded-xl shadow-2xl w-full ${maxWidthClass} overflow-hidden text-ink`}
+        className={`bg-paper border border-ink/15 rounded-xl shadow-2xl w-full ${maxWidthClass} max-h-full flex flex-col overflow-hidden text-ink`}
         onClick={(e) => e.stopPropagation()}
       >
-        <div className="px-5 py-4 border-b border-ink/10 flex items-center justify-between">
+        <div className="px-5 py-4 border-b border-ink/10 flex items-center justify-between flex-shrink-0">
           {header}
           <button
             type="button"
@@ -63,11 +69,15 @@ export function Modal({
         </div>
 
         {form ? (
-          <form onSubmit={form.onSubmit} className={form.className}>
+          // The body scrolls, not the panel: a long form (the add-provider
+          // dialog is 832px of fields) is taller than a phone viewport, and
+          // without a bounded, scrollable body its footer sat below the screen
+          // with no way to reach it — the dialog could not be submitted.
+          <form onSubmit={form.onSubmit} className={`${form.className} min-h-0 overflow-y-auto scrollbar-overlay-container scrollbar-overlay-static`}>
             {body}
           </form>
         ) : (
-          body
+          <div className="min-h-0 overflow-y-auto scrollbar-overlay-container scrollbar-overlay-static">{body}</div>
         )}
       </div>
     </div>

package/src/client/components/{layout/session-sidebar/SubagentList.tsx → common/subagent-list/index.tsx}

@@ -4,7 +4,7 @@ import { SubagentStatusIcon } from '@/client/components/common/SubagentStatusIco
 import { isRecord } from '@/shared/lib/util/guards';
 import { fetchSubagentHistory, historyEntryToSubagentInfo } from '@/shared/lib/omp/subagent/history/client';
 import { subagentRowLabel } from '@/shared/lib/omp/subagent/label';
-import { mergeSubagentRoster, parseSubagentLifecycle, parseSubagentProgress, parseSubagentRosterResponse } from '@/shared/lib/omp/subagent/parse';
+import { mergeSubagentRoster, parseSubagentLifecycle, parseSubagentRosterResponse, readSubagentProgressFrame } from '@/shared/lib/omp/subagent/parse';
 import type { SubagentInfo, SubagentProgress } from '@/shared/types';
 
 type SubagentListProps = {
@@ -18,14 +18,6 @@ const PROGRESS_STATUS: Record<NonNullable<SubagentProgress['status']>, SubagentI
   pending: 'started', running: 'started', completed: 'completed', failed: 'failed', aborted: 'aborted',
 };
 
-/** Progress frames arrive AgentProgress-shaped; some wrappers nest the snapshot. */
-function readProgress(payload: unknown): SubagentProgress | undefined {
-  const direct = parseSubagentProgress(payload);
-  if (!isRecord(payload) || !isRecord(payload.progress)) return direct;
-  const nested = parseSubagentProgress(payload.progress);
-  return nested ? { ...nested, id: nested.id ?? direct?.id, index: nested.index ?? direct?.index } : direct;
-}
-
 /** Fold one progress frame into the roster entry it names (id, else index). */
 function applyProgress(roster: SubagentInfo[], progress: SubagentProgress): SubagentInfo[] {
   return roster.map((entry) => {
@@ -44,6 +36,8 @@ function applyProgress(roster: SubagentInfo[], progress: SubagentProgress): Suba
 /**
  * Subagent roster nested under a session row: renders clean, readable subagent
  * items matching the minimalist sidebar layout while preserving interactive inspection.
+ * Shared by the desktop sidebar's `CategoryItem` and the mobile drawer's
+ * `MobileSessionCategory`, so both list the same roster.
  */
 export function SubagentList({ sessionId, isActiveSession }: SubagentListProps) {
   const [searchParams] = useSearchParams();
@@ -85,13 +79,17 @@ export function SubagentList({ sessionId, isActiveSession }: SubagentListProps)
       }
     };
     const onProgress = (event: Event) => {
-      const progress = readProgress(detailOf(event)?.payload);
+      const progress = readSubagentProgressFrame(detailOf(event)?.payload);
       if (progress) setSubagents((prev) => applyProgress(prev, progress));
     };
 
     window.addEventListener('subagent_lifecycle', onLifecycle);
     window.addEventListener('subagent_progress', onProgress);
 
+    // Snapshot the LIVE registry. This POST is the spawn path, so the server
+    // refuses it (409) for a session it does not manage — an observer read must
+    // never boot an omp child. The history pass above already covers a finished
+    // session from disk, so nothing is missing when this comes back empty.
     fetch(`/api/agent/${encodeURIComponent(sid)}`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },

package/src/client/components/layout/session-sidebar/CategoryItem.tsx

@@ -6,9 +6,9 @@ import { useOnClickOutside } from '@/client/hooks/ui/on-click-outside';
 import { useShowMore } from '@/client/hooks/ui/show-more';
 import { useWorkspaceFolderActions } from '@/client/hooks/workspace/workspace-folder-actions';
 import { SessionItem } from '@/client/components/layout/session-sidebar/SessionItem';
-import { SubagentList } from '@/client/components/layout/session-sidebar/SubagentList';
+import { SubagentList } from '@/client/components/common/subagent-list';
 import { WorkspaceOptionsMenu } from '@/client/components/common/workspace-options-menu';
-import { loadExpandedSessionIds, saveExpandedSessionIds } from '@/shared/lib/workspace/sidebar-expanded';
+import { useExpandedSessions } from '@/client/hooks/workspace/expanded-sessions';
 import { getProjectIcon } from '@/shared/lib/workspace/project-icon';
 import { useSidebarData } from '@/client/hooks/chat/omp/session-list';
 
@@ -37,32 +37,14 @@ export function Category({
   const [searchParams] = useSearchParams();
   const urlSubagentId = searchParams.get('subagent');
   const urlSessionId = searchParams.get('sessionId');
-  
-  // Sidebar-level expanded session set
-  const [expandedSessionIds, setExpandedSessionIds] = useState<Set<string>>(() => new Set());
 
-  useEffect(() => {
-    const saved = loadExpandedSessionIds();
-    if (saved && saved.size > 0) {
-      setExpandedSessionIds(saved);
-    }
-  }, []);
+  // Roster expansion is shared with the mobile drawer: one persisted set, so a
+  // row expanded on the phone is expanded here too.
+  const { expandedSessionIds, toggleSession } = useExpandedSessions();
 
   useEffect(() => {
     if (typeof folder.isExpanded === 'boolean') setIsOpen(folder.isExpanded);
   }, [folder.isExpanded]);
-
-  // A deep-linked transcript (?sessionId=…&subagent=…) auto-expands its
-  // session row so the viewed roster entry is visible after a reload.
-  useEffect(() => {
-    if (!urlSubagentId || !urlSessionId) return;
-    setExpandedSessionIds(prev => {
-      if (prev.has(urlSessionId)) return prev;
-      const next = new Set(prev);
-      next.add(urlSessionId);
-      return next;
-    });
-  }, [urlSubagentId, urlSessionId]);
   
   const menuRef = useRef<HTMLDivElement>(null);
   const { refresh } = useSidebarData();
@@ -106,13 +88,7 @@ export function Category({
   };
 
   const handleToggleSessionExpand = (sessionId: string) => {
-    setExpandedSessionIds((prev) => {
-      const next = new Set(prev);
-      if (next.has(sessionId)) next.delete(sessionId);
-      else next.add(sessionId);
-      saveExpandedSessionIds(next);
-      return next;
-    });
+    toggleSession(sessionId);
   };
 
   const onPin = () => {

package/src/client/components/layout/session-sidebar/Toolbar.tsx

@@ -18,6 +18,8 @@ interface SessionSidebarToolbarProps {
   onNewWorkspace: () => void;
   onScheduler: () => void;
   onRefresh: () => void;
+  /** True while the user-initiated refresh is in flight — spins the icon. */
+  refreshing: boolean;
   onClose?: () => void;
 }
 
@@ -37,6 +39,7 @@ export function SessionSidebarToolbar({
   onNewWorkspace,
   onScheduler,
   onRefresh,
+  refreshing,
   onClose,
 }: SessionSidebarToolbarProps) {
   return (
@@ -45,16 +48,19 @@ export function SessionSidebarToolbar({
         <div className="flex space-x-3 items-center">
           <FolderPlus size={14} className="hover:text-ink cursor-pointer"  onClick={onNewWorkspace} />
           <Calendar size={14} className="hover:text-ink cursor-pointer" onClick={onScheduler} />
-          <span 
-            title="Refresh sessions" 
+          <button
+            type="button"
+            title="Refresh sessions"
             onClick={onRefresh}
-            className="inline-flex cursor-pointer"
+            className="inline-flex cursor-pointer bg-transparent border-0 p-0 text-ink/60"
+            aria-label="Refresh sessions"
+            aria-busy={refreshing}
           >
             <RefreshCw 
               size={14} 
-              className="hover:text-ink" 
+              className={`hover:text-ink ${refreshing ? 'animate-spin' : ''}`} 
             />
-          </span>
+          </button>
         </div>
         <div className="flex space-x-3 items-center relative">
           <Search 

package/src/client/components/layout/session-sidebar/index.tsx

@@ -17,7 +17,8 @@ export function SessionSidebar({ className = '', onClose, appSettings = {} }: {
   const {
     folders,
     initializing,
-    refresh,
+    refreshNow,
+    refreshing,
     activeSessionId,
     sessionParam,
     searchQuery,
@@ -105,7 +106,8 @@ export function SessionSidebar({ className = '', onClose, appSettings = {} }: {
           onSortChange={handleSortChange}
           onNewWorkspace={() => setNewWorkspaceOpen(true)}
           onScheduler={() => setSchedulerOpen(true)}
-          onRefresh={refresh}
+          onRefresh={refreshNow}
+          refreshing={refreshing}
           onClose={onClose}
         />
 

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

@@ -74,6 +74,12 @@ export function MobileLayoutWrapper({ onDesktopToggle, appSettings = {} }: Mobil
     });
   });
 
+  // A roster row opens a subagent transcript in the chat timeline (the
+  // `omp:view-subagent` listener there owns the URL). On the phone the chat is
+  // a separate screen, so the tap must also bring it forward — otherwise the
+  // transcript opens behind the drawer and the tap reads as a no-op.
+  useChamberEvent('omp:view-subagent', () => setCurrentScreen('main'));
+
   // 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

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

@@ -36,6 +36,8 @@ export function MobileSessionSidebar({
   const {
     folders,
     initializing,
+    refreshNow,
+    refreshing,
     searchQuery,
     setSearchQuery,
     showArchived,
@@ -124,6 +126,8 @@ export function MobileSessionSidebar({
         onNewSession={handleNewSessionAndClose}
         onNewWorkspace={() => setNewWorkspaceOpen(true)}
         onScheduler={() => setSchedulerOpen(true)}
+        onRefresh={refreshNow}
+        refreshing={refreshing}
         onToggleOptions={() => setOptionsOpen(!optionsOpen)}
         onSortChange={handleSortChange}
         onResetSort={() => handleSortChange('A-Z')}

package/src/client/components/mobile/mobile-right-sidebar/FullEditor.tsx

@@ -6,6 +6,13 @@ import { ImageViewer } from '@/client/components/common/image-viewer';
 import { EditorHeader } from '@/client/components/mobile/mobile-right-sidebar/Header';
 import { useScrollbarFade, scrollbarFadeClass } from '@/client/hooks/ui/scrollbar-fade';
 import { useFileEditor } from '@/client/hooks/editor/use-file-editor';
+import {
+  EDITOR_DEFAULT_FONT_SIZE,
+  EDITOR_LINE_HEIGHT,
+  EDITOR_MAX_FONT_SIZE,
+  EDITOR_MIN_FONT_SIZE,
+} from '@/shared/lib/code/editor/typography';
+import { useEditorFontStack } from '@/client/hooks/editor/font';
 
 interface MobileFullEditorProps {
   file: {
@@ -22,9 +29,10 @@ interface MobileFullEditorProps {
 
 export function MobileFullEditor({ file, onClose, onFileSaved }: MobileFullEditorProps) {
   const [isPreview, setIsPreview] = useState(file.name.endsWith('.md'));
-  const [fontSize, setFontSize] = useState(12);
+  const [fontSize, setFontSize] = useState(EDITOR_DEFAULT_FONT_SIZE);
   const [wordWrap, setWordWrap] = useState(true);
   const { isScrolling, handleScroll } = useScrollbarFade();
+  const editorFontFamily = useEditorFontStack();
 
   const isMd = file.name.endsWith('.md');
 
@@ -52,8 +60,8 @@ export function MobileFullEditor({ file, onClose, onFileSaved }: MobileFullEdito
         onClose={onClose}
         onTogglePreview={() => setIsPreview(!isPreview)}
         onToggleWrap={() => setWordWrap(!wordWrap)}
-        onZoomOut={() => setFontSize(prev => Math.max(10, prev - 1))}
-        onZoomIn={() => setFontSize(prev => Math.min(18, prev + 1))}
+        onZoomOut={() => setFontSize(prev => Math.max(EDITOR_MIN_FONT_SIZE, prev - 1))}
+        onZoomIn={() => setFontSize(prev => Math.min(EDITOR_MAX_FONT_SIZE, prev + 1))}
         onCopy={editor.copy}
         onDownload={editor.download}
       />
@@ -80,7 +88,7 @@ export function MobileFullEditor({ file, onClose, onFileSaved }: MobileFullEdito
             /* Markdown Preview Mode — styled by `.prose-content` (the chat
                timeline's system), see the desktop editor for why there is no
                `prose` wrapper. */
-            <div className="p-4 bg-paper text-ink min-h-full font-sans">
+            <div className="p-4 bg-paper text-ink min-h-full font-sans" style={{ fontSize: `${fontSize}px` }}>
               <MarkdownRenderer
                 content={content}
                 document
@@ -95,13 +103,24 @@ export function MobileFullEditor({ file, onClose, onFileSaved }: MobileFullEdito
               language={lang}
               wordWrap={wordWrap}
               rootClassName="flex min-h-full bg-paper"
-              gutterClassName="w-10 py-3 pr-2 select-none text-right text-[10px] text-ink/30 bg-canvas border-r border-ink/10 font-mono leading-[20px] flex-shrink-0"
+              // The gutter auto-sizes to its widest number rather than taking a
+              // fixed width: the numbers scale with the zoom control, and a
+              // pinned `w-10` clipped a 3-digit line number at 18px.
+              gutterClassName="flex flex-col text-right pr-2 select-none text-ink/30 bg-canvas border-r border-ink/10 font-mono flex-shrink-0"
+              gutterLineClassName="min-w-[1.5rem]"
+              gutterStyle={{
+                fontSize,
+                paddingTop: 12,
+                paddingBottom: 12,
+                lineHeight: EDITOR_LINE_HEIGHT,
+                fontFamily: editorFontFamily,
+              }}
               editorWrapperClassName="flex-1 p-3 overflow-x-auto min-w-0 bg-paper text-ink code-surface"
               editorClassName="focus:outline-none"
               editorStyle={{
-                fontFamily: 'monospace',
-                fontSize: `${fontSize}px`,
-                lineHeight: '20px',
+                fontFamily: editorFontFamily,
+                fontSize,
+                lineHeight: EDITOR_LINE_HEIGHT,
                 backgroundColor: 'transparent',
                 minHeight: '100%',
                 color: 'var(--theme-ink)',

package/src/client/components/mobile/mobile-session-sidebar/Item.tsx

@@ -1,8 +1,11 @@
 import { useRef, useState } from 'preact/hooks';
 import { ChevronDown, ChevronRight, GitBranch, MessageSquare, MoreHorizontal, Plus } from 'lucide-preact';
+import { useSearchParams } from '@/client/lib/router/search-params';
 import { MobileSessionRow } from '@/client/components/mobile/mobile-session-sidebar/SessionRow';
+import { SubagentList } from '@/client/components/common/subagent-list';
 import { WorkspaceOptionsMenu } from '@/client/components/common/workspace-options-menu';
 import { useShowMore } from '@/client/hooks/ui/show-more';
+import { useExpandedSessions } from '@/client/hooks/workspace/expanded-sessions';
 import { useWorkspaceFolderActions } from '@/client/hooks/workspace/workspace-folder-actions';
 import { getProjectIcon } from '@/shared/lib/workspace/project-icon';
 import { relativeTimeAgo } from '@/shared/lib/workspace/relative-time';
@@ -33,6 +36,12 @@ export function MobileSessionCategory({
 }: MobileSessionCategoryProps) {
   const { visibleCount, showMore } = useShowMore();
   const { refresh } = useSidebarData();
+  const { expandedSessionIds, toggleSession } = useExpandedSessions();
+  // The viewed transcript, so its session row dims while a roster entry is
+  // open (desktop parity — same params, same rule).
+  const [searchParams] = useSearchParams();
+  const urlSubagentId = searchParams.get('subagent');
+  const urlSessionId = searchParams.get('sessionId');
   const [showMenu, setShowMenu] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
   const {
@@ -72,25 +81,32 @@ export function MobileSessionCategory({
     <div className="mb-4">
       <div
         onClick={onToggleExpand}
-        className="flex items-center justify-between px-3 py-2 cursor-pointer hover:bg-ink/5 rounded-lg select-none transition-colors"
+        className="flex items-center justify-between pl-4 pr-3 py-2 cursor-pointer hover:bg-ink/5 rounded-lg select-none transition-colors"
       >
         <div className="flex items-center space-x-2 min-w-0">
-          {folder.customIconUrl ? (
-            <img
-              src={folder.customIconUrl}
-              alt=""
-              className="w-[15px] h-[15px] rounded-xs object-contain flex-shrink-0"
-              referrerPolicy="no-referrer"
-            />
-          ) : folder.iconType === 'chat' ? (
-            <MessageSquare size={15} className="text-ink/80 flex-shrink-0" />
-          ) : (
-            <ProjectIcon
-              size={15}
-              className="text-ink/80 flex-shrink-0"
-              style={{ color: folder.accentColor || undefined }}
-            />
-          )}
+          {/* The folder glyph occupies the same 16px left slot the session rows
+              give their roster toggle, so the two columns line up down the
+              drawer — the icon, the chevron and every row's status glyph share
+              one x. Desktop gets this from one shared slot; the drawer's
+              padding is what differs, hence the matching `pl-4`. */}
+          <span className="w-4 h-4 flex items-center justify-center flex-shrink-0">
+            {folder.customIconUrl ? (
+              <img
+                src={folder.customIconUrl}
+                alt=""
+                className="w-[15px] h-[15px] rounded-xs object-contain"
+                referrerPolicy="no-referrer"
+              />
+            ) : folder.iconType === 'chat' ? (
+              <MessageSquare size={15} className="text-ink/80" />
+            ) : (
+              <ProjectIcon
+                size={15}
+                className="text-ink/80"
+                style={{ color: folder.accentColor || undefined }}
+              />
+            )}
+          </span>
 
           <span className="text-sm font-semibold text-ink truncate">
             {folder.name}
@@ -153,18 +169,40 @@ export function MobileSessionCategory({
 
       {isExpanded && (
         <div className="mt-0.5 space-y-0.5 pl-2">
-          {visibleSessions.map((session) => (
-            <MobileSessionRow
-              key={session.id}
-              session={session}
-              isActive={String(activeSessionId) === String(session.id)}
-              status={sessionStatus[String(session.id)]}
-              timeAgo={relativeTimeAgo(session.updated_at ?? session.created_at)}
-              onSelect={() => onSelectSession(session.id)}
-              onArchive={() => handleArchive(session)}
-              onRename={String(session.id).startsWith('new-') ? undefined : (name) => void handleRename(session, name)}
-            />
-          ))}
+          {visibleSessions.map((session) => {
+            const sessionKey = String(session.id);
+            const isSessionActive = String(activeSessionId) === sessionKey;
+            // While one of its subagents is being viewed, the parent session
+            // row dims so the highlighted roster entry reads as the active one
+            // (desktop parity).
+            const isViewingSubagent = isSessionActive && urlSessionId === sessionKey && Boolean(urlSubagentId);
+            // Same gate as desktop: the omp-side loader flag is authoritative,
+            // so a session whose roster exists on disk can be opened without a
+            // live process.
+            const hasSubagents = Boolean(session.hasSubagents);
+            const isRosterOpen = hasSubagents && expandedSessionIds.has(sessionKey);
+
+            return (
+              <div key={session.id} className="space-y-0.5">
+                <MobileSessionRow
+                  session={session}
+                  isActive={isSessionActive && !isViewingSubagent}
+                  status={sessionStatus[sessionKey]}
+                  awaitingInput={Boolean(session.awaitingInput)}
+                  timeAgo={relativeTimeAgo(session.updated_at ?? session.created_at)}
+                  hasSubagents={hasSubagents}
+                  isExpanded={isRosterOpen}
+                  onToggleExpand={() => toggleSession(sessionKey)}
+                  onSelect={() => onSelectSession(session.id)}
+                  onArchive={() => handleArchive(session)}
+                  onRename={sessionKey.startsWith('new-') ? undefined : (name) => void handleRename(session, name)}
+                />
+                {isRosterOpen && (
+                  <SubagentList sessionId={session.id} isActiveSession={isSessionActive} />
+                )}
+              </div>
+            );
+          })}
 
           {filteredSessions.length > visibleCount && (
             <button