ompchamber 3.1.1 → 3.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ompchamber",
-  "version": "3.1.1",
+  "version": "3.2.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>",

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-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,39 @@ 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]}
+                  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

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

@@ -1,4 +1,4 @@
-import { Archive, ArchiveRestore, Check, Loader2, Pencil } from 'lucide-preact';
+import { Archive, ArchiveRestore, Check, ChevronDown, ChevronRight, Loader2, Pencil } from 'lucide-preact';
 import type { SessionItemData } from '@/shared/types';
 import { useInlineRename } from '@/client/hooks/ui/inline-rename';
 
@@ -8,7 +8,10 @@ export interface MobileSessionRowProps {
   status?: 'stream' | 'finish' | 'abort';
   /** Relative age of the session, or null when no usable timestamp exists. */
   timeAgo: string | null;
-  showTreeGlyph?: boolean;
+  /** The session has a subagent roster (on disk or live), so it can be expanded. */
+  hasSubagents?: boolean;
+  isExpanded?: boolean;
+  onToggleExpand?: () => void;
   onSelect: () => void;
   onArchive: () => void;
   onRename?: (name: string) => void;
@@ -19,7 +22,9 @@ export function MobileSessionRow({
   isActive,
   status,
   timeAgo,
-  showTreeGlyph = false,
+  hasSubagents = false,
+  isExpanded = false,
+  onToggleExpand,
   onSelect,
   onArchive,
   onRename,
@@ -34,6 +39,19 @@ export function MobileSessionRow({
     handleBlur,
   } = useInlineRename(session.title, onRename);
 
+  // The roster toggle is the row's LAST element, so its glyph lands in the same
+  // column as the folder header's expand chevron — one vertical line of
+  // disclosure controls down the drawer. The toggle is a SIBLING of the select
+  // button, never a child: a button inside a button is invalid and the browser
+  // reparents it.
+  //
+  // Touch has no hover to reveal a hidden toggle the way desktop does, so it is
+  // pinned whenever the row has a roster; a hidden one would leave the roster
+  // unreachable on a phone.
+  const showChevron = hasSubagents && Boolean(onToggleExpand);
+  const showStatus = Boolean(status);
+  const title = session.title.charAt(0).toUpperCase() + session.title.slice(1);
+
   if (isEditing) {
     return (
       <div className="w-full rounded-lg flex items-center bg-ink/10">
@@ -59,17 +77,16 @@ export function MobileSessionRow({
       <button
         type="button"
         onClick={onSelect}
-        className="flex-1 text-left px-3 py-2 flex items-center justify-between min-w-0"
+        className="flex-1 text-left pl-2 pr-3 py-2 flex items-center justify-between min-w-0"
       >
-        <div className="flex items-center space-x-1.5 min-w-0 pr-2">
+        <div className="flex items-center min-w-0 pr-2">
+          {/* Status slot, 16px at the same x as the folder header's icon slot,
+              so the left column reads as one line. */}
           <span className="w-4 flex-shrink-0 flex items-center justify-center">
-            {status === 'stream' && <Loader2 size={13} className="text-ink/50 animate-spin" />}
-            {(status === 'finish' || status === 'abort') && <Check size={13} className="text-ink/50" />}
-          </span>
-          {showTreeGlyph && <span className="text-ink/40 text-xs flex-shrink-0 font-mono">&gt;</span>}
-          <span className="text-xs truncate leading-snug">
-            {session.title.charAt(0).toUpperCase() + session.title.slice(1)}
+            {showStatus && status === 'stream' && <Loader2 size={13} className="text-ink/50 animate-spin" />}
+            {showStatus && (status === 'finish' || status === 'abort') && <Check size={13} className="text-ink/50" />}
           </span>
+          <span className="text-xs truncate leading-snug ml-2">{title}</span>
         </div>
 
         <span className="text-[11px] text-ink/45 font-mono flex-shrink-0 ml-2">{timeAgo ?? ''}</span>
@@ -86,14 +103,35 @@ export function MobileSessionRow({
         </button>
       )}
 
+      {/* A row WITHOUT a roster toggle still has to keep the toggle's column
+          empty, or its archive glyph would sit where the toggle is and the
+          trailing icons would step in and out row to row. This `mr-1` is what
+          reserves that column: it moves the 14px glyph's centre from x=363 to
+          x=359, the exact x the toggle uses on a row that has one. */}
       <button
         type="button"
         onClick={onArchive}
         title={session.is_archived === 1 ? 'Unarchive session' : 'Archive session'}
-        className="flex-shrink-0 p-2 mr-1 text-ink/35 hover:text-ink rounded-lg cursor-pointer"
+        className={`flex-shrink-0 p-2 text-ink/35 hover:text-ink rounded-lg cursor-pointer ${showChevron ? '' : 'mr-1'}`}
       >
         {session.is_archived === 1 ? <ArchiveRestore size={14} /> : <Archive size={14} />}
       </button>
+
+      {/* Last element, so its glyph sits in the folder header's chevron column.
+          `p-1.5 mr-1.5` centres a 14px glyph on that column while keeping a
+          touch-sized tap target. */}
+      {showChevron && (
+        <button
+          type="button"
+          onClick={onToggleExpand}
+          title={isExpanded ? 'Collapse subagents' : 'Expand subagents'}
+          aria-expanded={isExpanded}
+          aria-label={isExpanded ? 'Collapse subagents' : 'Expand subagents'}
+          className="flex-shrink-0 p-1.5 mr-1.5 flex items-center justify-center text-ink/50 hover:text-ink rounded-lg cursor-pointer"
+        >
+          {isExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+        </button>
+      )}
     </div>
   );
 }

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

@@ -1,5 +1,5 @@
 import type { RefObject } from 'preact/compat';
-import { Archive, ArrowUpDown, Calendar, Check, FolderPlus, Plus, Search, X } from 'lucide-preact';
+import { Archive, ArrowUpDown, Calendar, Check, FolderPlus, Plus, RefreshCw, Search, X } from 'lucide-preact';
 import type { SessionSortOption } from '@/shared/types';
 import { SortMenu } from '@/client/components/common/sort-menu';
 
@@ -12,6 +12,9 @@ interface MobileSessionToolbarProps {
   onNewSession: () => void;
   onNewWorkspace: () => void;
   onScheduler: () => void;
+  onRefresh: () => void;
+  /** True while the user-initiated refresh is in flight — spins the icon. */
+  refreshing: boolean;
   onToggleOptions: () => void;
   onSortChange: (opt: SessionSortOption) => void;
   onResetSort: () => void;
@@ -30,6 +33,8 @@ export function MobileSessionToolbar({
   onNewSession,
   onNewWorkspace,
   onScheduler,
+  onRefresh,
+  refreshing,
   onToggleOptions,
   onSortChange,
   onResetSort,
@@ -74,6 +79,21 @@ export function MobileSessionToolbar({
           <Calendar size={16} strokeWidth={1.8} />
         </button>
 
+        {/* Refresh sessions button — same action the desktop toolbar's
+            RefreshCw performs: refetch the session list from the server.
+            The icon spins for the duration of that fetch, so the click has a
+            visible end; `refreshing` is raised only by this button's own load. */}
+        <button
+          type="button"
+          onClick={onRefresh}
+          className="w-9.5 h-9.5 rounded-xl border border-ink/15 bg-paper hover:bg-ink/5 active:scale-95 text-ink/80 hover:text-ink flex items-center justify-center transition-all flex-shrink-0 cursor-pointer shadow-xs"
+          title="Refresh sessions"
+          aria-label="Refresh sessions"
+          aria-busy={refreshing}
+        >
+          <RefreshCw size={15} strokeWidth={1.8} className={refreshing ? 'animate-spin' : undefined} />
+        </button>
+
         {/* Sort & Filter Dropdown */}
         <div className="relative flex-shrink-0" ref={optionsRef}>
           <button