@kabmo-labs/kabmo 0.3.1 → 0.5.0

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

@@ -5,8 +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;
@@ -43,12 +46,23 @@ export function MobileRightSidebar({
   // the user never asked for a search. Restoring the tab they left also keeps
   // the phone and the desktop on the same view.
   const [activeTab, setActiveTab] = useSessionState<string>('layout.mobileRightPanel', 'files');
-  // ONE catalog, the same one the desktop bar reads: the built-in views and the
-  // installed plugins are one list, in one order, so the phone cannot become a
-  // second list that drifts from the desktop's. A view switched off is absent
-  // here for the same reason it is absent there.
-  const catalog = usePanelCatalog();
-  const activePanel = catalog.find((panel) => panel.id === activeTab);
+  // ONE catalog, the same one the desktop bars read, and deliberately `all`:
+  // a phone has ONE drawer, so a plugin panel the user placed on the left must
+  // stay reachable here — reading only the right column would make placing a
+  // 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.
+  //
+  // 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).
@@ -81,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,24 +3,24 @@ 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';
+import { useCancelWait } from '@/client/hooks/chat/waiting/cancel';
+import { useWaitingDispatch } from '@/client/hooks/chat/waiting/dispatch';
 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';
 
@@ -32,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({
@@ -41,7 +47,11 @@ export function MobileSessionSidebar({
   onNewSessionForFolder,
   onClose,
   onDesktopToggle,
-  appSettings = {}
+  appSettings = {},
+  rootPath,
+  refreshKey = 0,
+  onRefresh,
+  onOpenFile,
 }: MobileSessionSidebarProps) {
   const {
     folders,
@@ -80,6 +90,8 @@ export function MobileSessionSidebar({
     window.__OMP_BOOTSTRAP__?.isAndroid,
   );
   const { toasts, pushToast, dismissToast } = useToasts();
+  const cancelWait = useCancelWait(pushToast);
+  useWaitingDispatch({ onNotice: pushToast });
 
   // The popup's "Update now" hands the run over rather than starting its own —
   // see the desktop sidebar. The phone must also bring the drawer forward, or
@@ -186,64 +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)}
-        />
-      )}
+      {/* 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
-          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
@@ -258,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} />
+    </>
+  );
+}

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

@@ -0,0 +1,80 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The phone's LEFT dock: the chip strip and the body of a placed panel.
+ *
+ * The desktop's left column is a dock — the session list plus whatever plugin
+ * the user placed beside it, switched by a vertical rail. A phone has no room
+ * for a rail, so the rail is the same horizontal chip strip the right drawer
+ * uses (`panel-chips.tsx`), and the body is the same `panel.render`.
+ *
+ * The session list is NOT rendered here: the phone's list is its own component
+ * (`MobileSessionList`), unlike the desktop's `SessionsView`, so the caller
+ * keeps drawing it and only hands over the OTHER views. That is also why the
+ * strip is drawn only while it has something else to switch to.
+ */
+
+import { Suspense } from 'preact/compat';
+import { PanelHostProvider } from '@kabmo-labs/kabmo-ui';
+import type { ResolvedPanel } from '@/client/components/workspace/plugin-panel/catalog';
+import { PluginPanelBody } from '@/client/components/workspace/plugin-panel/resolve';
+import type { PanelBodyProps } from '@/client/components/workspace/panels/builtin';
+import { PanelChips } from '@/client/components/mobile/panel-chips';
+
+/** The strip row, drawn under the drawer's title. */
+export function MobileDockStrip({
+  panels,
+  activeId,
+  onSelect,
+}: {
+  panels: readonly ResolvedPanel[];
+  activeId: string;
+  onSelect: (id: string) => void;
+}) {
+  return (
+    <div className="px-3 py-1.5 border-b border-ink/10 bg-canvas flex-shrink-0">
+      <PanelChips panels={panels} activeId={activeId} onSelect={onSelect} />
+    </div>
+  );
+}
+
+/**
+ * The body of one placed panel.
+ *
+ * A selection naming a panel that is switched off, uninstalled or still loading
+ * has no entry — `PluginPanelBody` says which, rather than leaving the drawer
+ * blank. That is the same notice the desktop dock draws.
+ */
+export function MobileDockBody({
+  panelKey,
+  panel,
+  body,
+}: {
+  panelKey: string;
+  panel?: ResolvedPanel;
+  body: PanelBodyProps;
+}) {
+  if (!panel) {
+    return (
+      <div className="flex-1 min-h-0">
+        <PluginPanelBody panelKey={panelKey} />
+      </div>
+    );
+  }
+  return (
+    <div className="flex-1 min-h-0 overflow-hidden relative">
+      <Suspense
+        fallback={
+          <div className="h-full flex items-center justify-center text-ink/40">
+            <span className="text-xs font-mono">Loading…</span>
+          </div>
+        }
+      >
+        <PanelHostProvider value={body}>{panel.render(body)}</PanelHostProvider>
+      </Suspense>
+    </div>
+  );
+}

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

@@ -1,14 +1,20 @@
 import { X } from 'lucide-preact';
 import { BrandWordmark } from '@/client/components/common/brand-wordmark';
+import { titlebarPaddingLeft, titlebarPaddingRight } from '@/shared/lib/ui/titlebar';
 
-export function MobileSessionHeader({ onClose }: { onClose: () => void }) {
+export function MobileSessionHeader({ onClose, viewLabel = 'Sessions' }: { onClose: () => void; viewLabel?: string }) {
   return (
     <div 
-      className="border-b border-ink/10 flex items-center justify-between px-3.5 flex-shrink-0 bg-canvas titlebar-drag-region select-none"
+      className="border-b border-ink/10 flex items-center justify-between px-3 flex-shrink-0 bg-canvas titlebar-drag-region select-none"
       style={{
         height: 'calc(3.5rem + env(safe-area-inset-top, 0px))',
-        paddingLeft: 'max(0.875rem, env(safe-area-inset-left, 0px), env(titlebar-area-x, 0px))',
-        paddingRight: 'max(0.875rem, env(safe-area-inset-right, 0px))',
+        // `px-3`, the toolbar's own inset: the wordmark above and the New
+        // Session button below share one left edge, which the header's old
+        // 14px did not.
+        paddingLeft: titlebarPaddingLeft('0.75rem', true),
+        // The drawer is the full window width, so on a desktop showing the
+        // mobile layout its close button sits under the window controls too.
+        paddingRight: titlebarPaddingRight('0.75rem', true),
         paddingTop: 'env(safe-area-inset-top, 0px)',
       }}
     >
@@ -17,7 +23,7 @@ export function MobileSessionHeader({ onClose }: { onClose: () => void }) {
           <BrandWordmark className="text-[16px]" />
         </span>
         <span className="text-ink/25 text-xs select-none">/</span>
-        <span className="text-[11px] font-semibold text-ink/60 uppercase tracking-wider font-mono">Sessions</span>
+        <span className="text-[11px] font-semibold text-ink/60 uppercase tracking-wider font-mono">{viewLabel}</span>
       </div>
 
       <button