@kabmo-labs/kabmo 0.4.0 → 0.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kabmo-labs/kabmo",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "description": "Web console and diagnostic workbench for AI coding agents — Elysia + Preact on Bun.",
   "license": "UNLICENSED",
   "author": "Wijanarko Putra Rajeb <wijanarko.rajeb@gmail.com>",

package/src/client/components/layout/desktop-layout/TopNavbar.tsx

@@ -7,6 +7,7 @@ import { useInlineRename } from '@/client/hooks/ui/inline-rename';
 import { useSessionRenaming } from '@/client/hooks/workspace/renaming-sessions';
 import type { AgentStreamStatus } from '@/shared/lib/chat/omp/status';
 import { withChord } from '@/client/lib/ui/with-chord';
+import { titlebarPaddingLeft, titlebarPaddingRight } from '@/shared/lib/ui/titlebar';
 
 interface TopNavbarProps {
   sessionTitle: string | null;
@@ -59,10 +60,11 @@ export function TopNavbar({
   );
   return (
     <header 
-      className="h-10 flex-shrink-0 border-b border-ink/10 bg-paper flex items-center justify-between pr-4 z-20 titlebar-drag-region select-none"
+      className="h-10 flex-shrink-0 border-b border-ink/10 bg-paper flex items-center justify-between z-20 titlebar-drag-region select-none"
       style={{
-        paddingLeft: !showLeftPanel ? 'max(1rem, env(titlebar-area-x, 0px))' : undefined,
-        paddingRight: 'max(1rem, calc(100vw - env(titlebar-area-width, 100vw)))',
+        // The sidebar's own header carries the left inset while it is open.
+        paddingLeft: !showLeftPanel ? titlebarPaddingLeft('1rem') : undefined,
+        paddingRight: titlebarPaddingRight('1rem'),
       }}
     >
       <div className="flex items-center space-x-2 px-4 min-w-0">

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

@@ -2,6 +2,7 @@ import { PanelLeftClose } from 'lucide-preact';
 import { BrandWordmark } from '@/client/components/common/brand-wordmark';
 import { StreamStatusDot } from '@/client/components/common/StreamStatusDot';
 import { withChord } from '@/client/lib/ui/with-chord';
+import { titlebarPaddingLeft } from '@/shared/lib/ui/titlebar';
 import type { AgentStreamStatus } from '@/shared/lib/chat/omp/status';
 
 /**
@@ -29,7 +30,7 @@ export function SessionSidebarHeader({
   return (
     <div 
       className="h-10 flex-shrink-0 flex items-center justify-between px-4 border-b border-ink/10 titlebar-drag-region select-none"
-      style={{ paddingLeft: 'max(1rem, env(titlebar-area-x, 0px))' }}
+      style={{ paddingLeft: titlebarPaddingLeft('1rem') }}
     >
       {/* The stream indicator badges the wordmark's top-right corner, the
           same placement the phone's header uses — it reads as part of the

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

@@ -179,7 +179,18 @@ export function SessionItem({
                   <Hourglass size={12} className="animate-pulse text-ink/60" />
                 </span>
               ) : status === 'stream' ? (
-                <Loader2 size={12} className="animate-spin" />
+                // The run spinner is the ONE thing on this row that says a run
+                // is in flight, and it was an unlabelled icon: a screen reader
+                // got a bare `svg`, and a test had no accessible way to ask
+                // "is this session running". `waiting-for.e2e.ts` needs exactly
+                // that as its gate — the wait picker only appears once this
+                // session's `stream` row has reached the client, so asserting
+                // the picker without asserting the row was a race measured on
+                // the Windows runner (the dependency's 20s run expired while the
+                // picker's own 20s timeout was still counting).
+                <span role="status" aria-label="Running">
+                  <Loader2 size={12} className="animate-spin" />
+                </span>
               ) : (
                 <Check size={12} />
               )}

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

@@ -239,6 +239,10 @@ export function MobileLayoutWrapper({ onDesktopToggle, appSettings = {} }: Mobil
           onClose={() => setCurrentScreen('main')}
           onDesktopToggle={onDesktopToggle}
           appSettings={appSettings}
+          rootPath={activeProjectPath ?? undefined}
+          refreshKey={refreshKey}
+          onRefresh={handleWorkspaceChanged}
+          onOpenFile={handleOpenFile}
         />
       </div>
 

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

@@ -5,9 +5,11 @@ import { PanelHostProvider } from '@kabmo-labs/kabmo-ui';
 import { useGitStatus } from '@/client/hooks/workspace/git-status';
 import { useResolvedRepo } from '@/client/hooks/workspace/repo-scope';
 import { useSessionState } from '@/client/hooks/workspace/session-state';
-import { PluginMark } from '@/client/components/settings/categories/panel-plugins/PluginMark';
-import { PANEL_MARK_SIZE } from '@/shared/lib/workspace/right-panels';
+import { useLeftDock } from '@/client/hooks/workspace/left-dock';
 import { SESSIONS_VIEW_ID } from '@/shared/lib/workspace/left-dock';
+import { phoneRightPanels } from '@/shared/lib/workspace/mobile-dock';
+import { PanelChips } from '@/client/components/mobile/panel-chips';
+import { titlebarPaddingLeft, titlebarPaddingRight } from '@/shared/lib/ui/titlebar';
 
 interface MobileRightSidebarProps {
   enabled?: boolean;
@@ -50,8 +52,17 @@ export function MobileRightSidebar({
   // panel on the left hide it from every phone. The dock's own session list is
   // filtered out below: the phone already has that as its own drawer screen,
   // and a second copy inside this one would be two lists of the same sessions.
-  const catalog = usePanelCatalog('all').filter((panel) => panel.id !== SESSIONS_VIEW_ID);
-  const activePanel = catalog.find((panel) => panel.id === activeTab);
+  //
+  // The exception is the one case where the LEFT drawer can now reach them
+  // itself: with the rail on, a placed panel gets a chip there, and listing it
+  // here as well would put one panel on two strips of one phone.
+  const dock = useLeftDock();
+  const catalog = phoneRightPanels(usePanelCatalog('all'), SESSIONS_VIEW_ID, dock.enabled);
+  // A stored tab can name a panel the user has since placed on the LEFT rail.
+  // It is gone from this catalog, and saying "No session selected" over a
+  // drawer that has views would be a wrong answer — the first view is drawn
+  // instead, and the stored id is replaced on the next click.
+  const activePanel = catalog.find((panel) => panel.id === activeTab) ?? catalog[0];
   // Same source the desktop activity bar uses — the Source Control view's own
   // repo pick, read shared so switching repos moves this dot too. Polls only
   // while this drawer is the mounted screen (the poll is visibility-gated).
@@ -84,37 +95,17 @@ export function MobileRightSidebar({
         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))',
+          paddingLeft: titlebarPaddingLeft('0.75rem', true),
+          paddingRight: titlebarPaddingRight('0.75rem', true),
         }}
       >
 
-        <div className="flex items-center space-x-1.5 overflow-x-auto no-scrollbar py-1">
-          {catalog.map((panel) => (
-            <button
-              key={panel.id}
-              type="button"
-              onClick={() => setActiveTab(panel.id)}
-              className={`relative flex items-center transition-all cursor-pointer ${
-                activeTab === panel.id
-                  ? '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={panel.title}
-            >
-              {panel.builtin ? panel.icon : <PluginMark name={panel.name} iconUrl={panel.iconUrl} size={PANEL_MARK_SIZE} />}
-              {activeTab === panel.id && (
-                <span className={panel.id === 'git' ? 'tracking-wide' : undefined}>{panel.label}</span>
-              )}
-              {panel.id === 'git' && hasGitChanges && (
-                <span
-                  className="absolute top-1 right-1 w-1.5 h-1.5 rounded-full bg-info"
-                  title="Uncommitted changes"
-                />
-              )}
-            </button>
-          ))}
-        </div>
+        <PanelChips
+          panels={catalog}
+          activeId={activePanel?.id ?? activeTab}
+          onSelect={setActiveTab}
+          hasGitChanges={hasGitChanges}
+        />
 
         <button
           type="button"

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

@@ -3,11 +3,7 @@ import { MobileSessionHeader } from '@/client/components/mobile/mobile-session-s
 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 } from '@/client/components/layout/session-sidebar/Modals';
 import { useAndroidDownload } from '@/client/hooks/ui/updates/android-download';
-import { SchedulerModal } from '@/client/components/layout/session-sidebar/scheduler-modal';
-import { UpdatePopup } from '@/client/components/layout/update-popup';
 import { useOnClickOutside } from '@/client/hooks/ui/on-click-outside';
 import { useKabmoEvent } from '@/client/hooks/ui/window-event';
 import { useToasts } from '@/client/hooks/ui/toasts';
@@ -17,12 +13,14 @@ import { useUpdates } from '@/client/hooks/ui/updates';
 import { UPDATE_REQUEST_EVENT } from '@/shared/lib/updates/popup-state';
 import { useSessionSidebarController } from '@/client/hooks/chat/omp/session-sidebar-controller';
 import { useScheduledTaskCount } from '@/client/hooks/workspace/scheduled-tasks';
-import { cloneWorkspaceFolder, createWorkspaceFolder } from '@/client/hooks/workspace/new-workspace';
 import { MobileSessionListSkeleton } from '@/client/components/mobile/mobile-session-sidebar/Skeleton';
 import { useBatchSelection } from '@/client/hooks/workspace/batch-selection';
 import { useBatchDeleteRun } from '@/client/hooks/workspace/batch-delete-run';
+import { phoneLeftStripVisible } from '@/shared/lib/workspace/mobile-dock';
+import { dockBodyProps, useMobileDock } from '@/client/components/mobile/mobile-session-sidebar/use-dock';
+import { MobileDockBody, MobileDockStrip } from '@/client/components/mobile/mobile-session-sidebar/Dock';
+import { MobileDrawerDialogs } from '@/client/components/mobile/mobile-session-sidebar/Dialogs';
 import { BatchActionBar } from '@/client/components/common/batch-selection/BatchActionBar';
-import { BatchDeleteModal } from '@/client/components/common/batch-selection/BatchDeleteModal';
 import type { BatchBinding } from '@/client/components/common/batch-selection/types';
 import { liveSelection, selectableSessionIds } from '@/shared/lib/workspace/batch-select';
 
@@ -34,6 +32,12 @@ interface MobileSessionSidebarProps {
   onClose: () => void;
   onDesktopToggle?: () => void;
   appSettings?: Record<string, any>;
+  /** The active workspace's root, for a plugin panel placed on the dock. */
+  rootPath?: string;
+  /** Bumped after a write so a placed panel re-reads, like the right drawer. */
+  refreshKey?: number;
+  onRefresh?: () => void;
+  onOpenFile?: (file: unknown) => void;
 }
 
 export function MobileSessionSidebar({
@@ -43,7 +47,11 @@ export function MobileSessionSidebar({
   onNewSessionForFolder,
   onClose,
   onDesktopToggle,
-  appSettings = {}
+  appSettings = {},
+  rootPath,
+  refreshKey = 0,
+  onRefresh,
+  onOpenFile,
 }: MobileSessionSidebarProps) {
   const {
     folders,
@@ -190,66 +198,103 @@ export function MobileSessionSidebar({
     else batch.begin('workspace');
   };
 
+  const dock = useMobileDock();
+  const showingSessions = dock.showingSessions;
+  const activeView = dock.activeView;
+  const dockBody = dockBodyProps({
+    sessionId: activeSessionId,
+    refreshKey,
+    rootPath,
+    onRefresh,
+    onOpenFile,
+    onClose,
+  });
+
   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)}
-        scheduledCount={scheduledCount}
-        onRefresh={refreshNow}
-        refreshing={isRefreshing}
-        onToggleOptions={() => setOptionsOpen(!optionsOpen)}
-        onSortChange={handleSortChange}
-        onResetSort={() => handleSortChange('A-Z')}
-        onToggleArchived={handleToggleArchived}
-        onHideArchived={() => setShowArchived(false)}
-        onSearchChange={setSearchQuery}
-        onClearSearch={() => setSearchQuery('')}
-        onSelectWorkspaces={startWorkspaceSelection}
-        selecting={batch.mode !== null}
+      <MobileSessionHeader
+        onClose={onClose}
+        viewLabel={showingSessions ? 'Sessions' : dock.activePanel?.label ?? 'Panel'}
       />
 
-      {initializing ? (
-        <MobileSessionListSkeleton />
-      ) : (
-        <MobileSessionList
-          folders={processedFolders}
-          activeSessionId={activeSessionId}
-          expandedFolders={expandedFolders}
-          showArchived={showArchived}
-          sessionStatus={sessionStatus}
-          onSelectSession={handleSelectSession}
-          onNewSessionForFolder={handleNewSessionForFolderAndClose}
-          onToggleFolder={toggleFolder}
-          onToast={pushToast}
-          batch={batchBinding}
-          onStartSessionSelection={(folderId) => batch.begin('session', folderId)}
-          onCancelWait={cancelWait}
-        />
-      )}
+      {/* The strip appears only once there is something to switch TO: with the
+          rail off, or with nothing placed on it, a row holding one chip would
+          be chrome that never changes. The exception is a stored view that no
+          longer resolves — the body is a notice, and without the strip the
+          session list would be unreachable (the desktop has the same escape in
+          its rail, which always holds Sessions). */}
+      {phoneLeftStripVisible(dock.enabled, dock.placed.length, showingSessions) ? (
+        <MobileDockStrip panels={dock.catalog} activeId={activeView} onSelect={dock.setActiveView} />
+      ) : null}
+
+      {/* The list is HIDDEN, never unmounted, while a panel is on screen — the
+          same rule the desktop dock follows (`LeftDockView`): its folder
+          expansion, scroll position and batch selection must survive a look at
+          another view, and a re-mount would also re-seed every expansion from
+          the server's flags. */}
+      <div className={showingSessions ? 'contents' : 'hidden'}>
+        <>
+          <MobileSessionToolbar
+            searchQuery={searchQuery}
+            sortOption={sortOption}
+            optionsOpen={optionsOpen}
+            showArchived={showArchived}
+            optionsRef={optionsRef}
+            onNewSession={handleNewSessionAndClose}
+            onNewWorkspace={() => setNewWorkspaceOpen(true)}
+            onScheduler={() => setSchedulerOpen(true)}
+            scheduledCount={scheduledCount}
+            onRefresh={refreshNow}
+            refreshing={isRefreshing}
+            onToggleOptions={() => setOptionsOpen(!optionsOpen)}
+            onSortChange={handleSortChange}
+            onResetSort={() => handleSortChange('A-Z')}
+            onToggleArchived={handleToggleArchived}
+            onHideArchived={() => setShowArchived(false)}
+            onSearchChange={setSearchQuery}
+            onClearSearch={() => setSearchQuery('')}
+            onSelectWorkspaces={startWorkspaceSelection}
+            selecting={batch.mode !== null}
+          />
 
-      {batch.mode && (
-        <BatchActionBar
-          drawer
-          mode={batch.mode}
-          count={batchSelected.length}
-          total={batchAvailable.length}
-          busy={batchDelete.isDeleting}
-          scopeLabel={scopeFolder?.name}
-          onSelectAll={() => batch.selectAllOf(batchAvailable)}
-          onUnselectAll={() => batch.unselectAllOf(batchAvailable)}
-          onDelete={() => batchDelete.request(batchSelected)}
-          onCancel={batch.end}
-        />
+          {initializing ? (
+            <MobileSessionListSkeleton />
+          ) : (
+            <MobileSessionList
+              folders={processedFolders}
+              activeSessionId={activeSessionId}
+              expandedFolders={expandedFolders}
+              showArchived={showArchived}
+              sessionStatus={sessionStatus}
+              onSelectSession={handleSelectSession}
+              onNewSessionForFolder={handleNewSessionForFolderAndClose}
+              onToggleFolder={toggleFolder}
+              onToast={pushToast}
+              batch={batchBinding}
+              onStartSessionSelection={(folderId) => batch.begin('session', folderId)}
+              onCancelWait={cancelWait}
+            />
+          )}
+
+          {batch.mode && (
+            <BatchActionBar
+              drawer
+              mode={batch.mode}
+              count={batchSelected.length}
+              total={batchAvailable.length}
+              busy={batchDelete.isDeleting}
+              scopeLabel={scopeFolder?.name}
+              onSelectAll={() => batch.selectAllOf(batchAvailable)}
+              onUnselectAll={() => batch.unselectAllOf(batchAvailable)}
+              onDelete={() => batchDelete.request(batchSelected)}
+              onCancel={batch.end}
+            />
+          )}
+        </>
+      </div>
+      {showingSessions ? null : (
+        <MobileDockBody panelKey={activeView} panel={dock.activePanel} body={dockBody} />
       )}
 
       <MobileSessionFooter
@@ -264,52 +309,24 @@ export function MobileSessionSidebar({
         }}
       />
 
-      {/* Reusable Modals */}
-      <NewWorkspaceModal
-        isOpen={newWorkspaceOpen}
-        onClose={() => setNewWorkspaceOpen(false)}
-        onCreate={createWorkspaceFolder}
-        onClone={cloneWorkspaceFolder}
-      />
-      <SchedulerModal
-        isOpen={schedulerOpen}
-        onClose={() => setSchedulerOpen(false)}
-        activeSessionId={activeSessionId === null ? null : String(activeSessionId)}
-        onToast={pushToast}
-      />
-      <AboutModal
-        isOpen={aboutOpen}
-        onClose={() => setAboutOpen(false)}
+      <MobileDrawerDialogs
+        activeSessionId={activeSessionId}
+        newWorkspaceOpen={newWorkspaceOpen}
+        onCloseNewWorkspace={() => setNewWorkspaceOpen(false)}
+        schedulerOpen={schedulerOpen}
+        onCloseScheduler={() => setSchedulerOpen(false)}
+        aboutOpen={aboutOpen}
+        onCloseAbout={() => setAboutOpen(false)}
         updates={updates}
-        onToast={pushToast}
-      />
-
-      {/* "Update available" announcement — once per version, gated on the check.
-          Its "Update now" hands the run to the About modal below. */}
-      <UpdatePopup updates={updates} />
-
-      {/* Batch delete confirmation — same dialog the desktop draws. */}
-      <BatchDeleteModal
-        mode={batch.mode ?? 'session'}
-        count={batchDelete.pending.length}
+        pushToast={pushToast}
+        batchDelete={batchDelete}
+        batchMode={batch.mode}
+        onEndBatch={batch.end}
         scopeLabel={scopeFolder?.name}
-        isDeleting={batchDelete.isDeleting}
-        outcome={batchDelete.outcome}
-        onClose={() => {
-          const refusedCount = batchDelete.outcome?.refused.length ?? 0;
-          batchDelete.cancel();
-          if (batchDelete.outcome && refusedCount === 0) batch.end();
-        }}
-        onConfirm={() => {
-          const mode = batch.mode ?? 'session';
-          void batchDelete.confirm(mode).then((result) => {
-            if (result && result.refused.length === 0) batch.end();
-          });
-        }}
+        toasts={toasts}
+        dismissToast={dismissToast}
       />
 
-      <ToastStack toasts={toasts} onDismiss={dismissToast} />
-
     </div>
   );
 }

package/src/client/components/mobile/mobile-main-view/Header.tsx

@@ -8,6 +8,7 @@ import { useSessionRenaming } from '@/client/hooks/workspace/renaming-sessions';
 import { StreamStatusDot } from '@/client/components/common/StreamStatusDot';
 import { BrandWordmark } from '@/client/components/common/brand-wordmark';
 import { HeaderControls } from '@/client/components/common/header-controls';
+import { titlebarPaddingLeft, titlebarPaddingRight } from '@/shared/lib/ui/titlebar';
 
 interface MobileHeaderProps {
   activeSessionTitle: string;
@@ -91,8 +92,8 @@ export function MobileHeader({
       className="flex-shrink-0 bg-canvas border-b border-ink/10 flex items-center justify-between gap-2 px-3 z-20 titlebar-drag-region select-none"
       style={{
         height: 'calc(3.5rem + env(safe-area-inset-top, 0px))',
-        paddingLeft: 'max(0.75rem, env(safe-area-inset-left, 0px), env(titlebar-area-x, 0px))',
-        paddingRight: 'max(0.75rem, env(safe-area-inset-right, 0px), calc(100vw - env(titlebar-area-width, 100vw)))',
+        paddingLeft: titlebarPaddingLeft('0.75rem', true),
+        paddingRight: titlebarPaddingRight('0.75rem', true),
         paddingTop: 'env(safe-area-inset-top, 0px)',
       }}
     >

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

@@ -3,6 +3,7 @@ import { FileIcon } from '@/client/components/common/file-icon';
 import { DiffPanel } from '@/client/components/workspace/diff-panel';
 import { getGitStatusInfo } from '@/shared/lib/fs/git-status';
 import { diffTabId } from '@/shared/lib/workspace/file-tab-id';
+import { titlebarPaddingLeft, titlebarPaddingRight } from '@/shared/lib/ui/titlebar';
 
 interface MobileFullDiffProps {
   diff: {
@@ -37,8 +38,8 @@ export function MobileFullDiff({ diff, onClose, onFileSaved }: MobileFullDiffPro
         style={{
           height: 'calc(3rem + 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))',
+          paddingLeft: titlebarPaddingLeft('0.75rem', true),
+          paddingRight: titlebarPaddingRight('0.75rem', true),
         }}
       >
         <div className="flex items-center space-x-2 min-w-0 pr-2">

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

@@ -1,5 +1,6 @@
 import { ArrowLeft, Check, Copy, Download, Eye, EyeOff, Save, WrapText, ZoomIn, ZoomOut } from 'lucide-preact';
 import { FileIcon } from '@/client/components/common/file-icon';
+import { titlebarPaddingLeft, titlebarPaddingRight } from '@/shared/lib/ui/titlebar';
 
 interface EditorHeaderProps {
   fileName: string;
@@ -47,8 +48,8 @@ export function EditorHeader({
       style={{
         height: 'calc(3rem + 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))',
+        paddingLeft: titlebarPaddingLeft('0.75rem', true),
+        paddingRight: titlebarPaddingRight('0.75rem', true),
       }}
     >
       <div className="flex items-center space-x-2 min-w-0 pr-2">

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

@@ -0,0 +1,106 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The phone session drawer's dialogs.
+ *
+ * Split out of `SessionSidebar` for the file ceiling, and it is a clean seam:
+ * every one of these is app-level (a workspace, a schedule, the console's own
+ * version and update, a batch delete confirmation, the toast stack) and none of
+ * them reads the drawer's own view state. Keeping them here also means the
+ * drawer's body — session list or a placed panel — stays readable as one
+ * expression rather than being buried between modals.
+ */
+
+import { ToastStack } from '@/client/components/common/ToastStack';
+import { AboutModal, NewWorkspaceModal } from '@/client/components/layout/session-sidebar/Modals';
+import { SchedulerModal } from '@/client/components/layout/session-sidebar/scheduler-modal';
+import { UpdatePopup } from '@/client/components/layout/update-popup';
+import { BatchDeleteModal } from '@/client/components/common/batch-selection/BatchDeleteModal';
+import { createWorkspaceFolder, cloneWorkspaceFolder } from '@/client/hooks/workspace/new-workspace';
+import type { BatchDeleteRun } from '@/client/hooks/workspace/batch-delete-run';
+import type { UseUpdatesResult } from '@/client/hooks/ui/updates';
+import type { ToastsHandle } from '@/client/hooks/ui/toasts';
+
+interface MobileDrawerDialogsProps {
+  activeSessionId: number | string | null;
+  newWorkspaceOpen: boolean;
+  onCloseNewWorkspace: () => void;
+  schedulerOpen: boolean;
+  onCloseScheduler: () => void;
+  aboutOpen: boolean;
+  onCloseAbout: () => void;
+  updates: UseUpdatesResult;
+  pushToast: ToastsHandle['pushToast'];
+  batchDelete: BatchDeleteRun;
+  /** The batch mode the confirmation names, and the way out of it. */
+  batchMode: 'workspace' | 'session' | null;
+  onEndBatch: () => void;
+  scopeLabel?: string;
+  toasts: ToastsHandle['toasts'];
+  dismissToast: ToastsHandle['dismissToast'];
+}
+
+export function MobileDrawerDialogs({
+  activeSessionId,
+  newWorkspaceOpen,
+  onCloseNewWorkspace,
+  schedulerOpen,
+  onCloseScheduler,
+  aboutOpen,
+  onCloseAbout,
+  updates,
+  pushToast,
+  batchDelete,
+  batchMode,
+  onEndBatch,
+  scopeLabel,
+  toasts,
+  dismissToast,
+}: MobileDrawerDialogsProps) {
+  return (
+    <>
+      <NewWorkspaceModal
+        isOpen={newWorkspaceOpen}
+        onClose={onCloseNewWorkspace}
+        onCreate={createWorkspaceFolder}
+        onClone={cloneWorkspaceFolder}
+      />
+      <SchedulerModal
+        isOpen={schedulerOpen}
+        onClose={onCloseScheduler}
+        activeSessionId={activeSessionId === null ? null : String(activeSessionId)}
+        onToast={pushToast}
+      />
+      <AboutModal isOpen={aboutOpen} onClose={onCloseAbout} updates={updates} onToast={pushToast} />
+
+      {/* "Update available" announcement — once per version, gated on the check.
+          Its "Update now" hands the run to the About modal. */}
+      <UpdatePopup updates={updates} />
+
+      {/* Batch delete confirmation — same dialog the desktop draws. */}
+      <BatchDeleteModal
+        mode={batchMode ?? 'session'}
+        count={batchDelete.pending.length}
+        scopeLabel={scopeLabel}
+        isDeleting={batchDelete.isDeleting}
+        outcome={batchDelete.outcome}
+        onClose={() => {
+          const refusedCount = batchDelete.outcome?.refused.length ?? 0;
+          batchDelete.cancel();
+          if (batchDelete.outcome && refusedCount === 0) onEndBatch();
+        }}
+        onConfirm={() => {
+          const mode = batchMode ?? 'session';
+          void batchDelete.confirm(mode).then((result) => {
+            if (result && result.refused.length === 0) onEndBatch();
+          });
+        }}
+      />
+
+      <ToastStack toasts={toasts} onDismiss={dismissToast} />
+    </>
+  );
+}