@kabmo-labs/kabmo 0.3.0 → 0.4.0

package/src/client/components/layout/desktop-layout/left-column.test.tsx

@@ -0,0 +1,192 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The left column draws ONE separator, and its chrome spans the WHOLE column.
+ *
+ * Both `LeftColumn` and `DesktopLayout` rendered a `ResizeHandle` after the
+ * dock, and both were mounted — so the column boundary drew two hairlines 3px
+ * apart and a reader saw a double rule between the session list and the chat.
+ * It was reproduced only when the rail was ON, because that is the layout a
+ * screenshotted report came from, though the extra handle was there in both
+ * states.
+ *
+ * A geometry test cannot catch the separator (happy-dom computes no layout), so
+ * that assertion is on the STRUCTURE: the group's direct children, in order. The
+ * second handle was a sibling — `LeftColumn`'s own sits between the dock and
+ * whatever follows — which is exactly what an order comparison shows.
+ *
+ * The chrome half is structural too, and both cases were reported. The strip
+ * lived inside the dock BODY while the rail was a sibling panel, so with the
+ * rail on it stopped at the body's left edge and left an empty strip under the
+ * rail. And the rail started at the column's top, running up past the title row
+ * and under the app's own titlebar. The column is three ROWS — title, then
+ * (rail | view), then strip — so both are asserted by the row each one lives in.
+ */
+
+import { afterAll, afterEach, beforeEach, describe, expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import { h, render } from 'preact';
+import { act } from 'preact/test-utils';
+import { Group } from '@/client/components/layout/desktop-layout/resizer';
+import { LeftColumn } from '@/client/components/layout/desktop-layout/LeftColumn';
+import { SessionStateProvider } from '@/client/components/common/session-state-provider/index';
+import { primeKabmoSettings } from '@/shared/lib/settings/client';
+import { realtimeClient, resetRealtimeClient } from '@/shared/lib/realtime/client';
+import { installDomGlobals, restoreDomGlobals } from '@/test-support/pristine-globals';
+
+let container: HTMLElement | null = null;
+
+/**
+ * A socket that never dials.
+ *
+ * The rail subscribes to the Source Control topic on mount. Left to a REAL
+ * socket, its close lands after this file has restored the globals and surfaces
+ * as `Unhandled error. (ErrorEvent …)` attributed to whichever suite ran next —
+ * measured. This column's subject is its own structure, so the channel is
+ * silenced rather than served.
+ */
+class SilentSocket {
+  static readonly CLOSING = 2;
+  static readonly CLOSED = 3;
+  readyState = SilentSocket.CLOSED;
+  onopen: (() => void) | null = null;
+  onclose: (() => void) | null = null;
+  onmessage: ((event: { data: string }) => void) | null = null;
+  onerror: (() => void) | null = null;
+  send(): void {}
+  close(): void {}
+}
+
+beforeEach(() => {
+  installDomGlobals(new Window({ url: 'http://127.0.0.1:1' }));
+  realtimeClient.setSocketConstructor(SilentSocket as unknown as typeof WebSocket);
+  primeKabmoSettings({});
+});
+
+afterAll(() => {
+  realtimeClient.setSocketConstructor(null);
+  restoreDomGlobals();
+});
+
+afterEach(() => {
+  // The rail's Source Control dot subscribes to a realtime topic, so the render
+  // opens a socket. Left open, its close lands in the NEXT file's globals once
+  // this one has restored them — measured as `Unhandled error. (ErrorEvent …)`
+  // between tests, attributed to whichever suite happened to run next.
+  resetRealtimeClient();
+  if (container) {
+    render(null, container);
+    container.remove();
+    container = null;
+  }
+  primeKabmoSettings({});
+});
+
+async function mountColumn(railEnabled: boolean) {
+  const host = document.createElement('div');
+  document.body.appendChild(host);
+  container = host;
+
+  await act(async () => {
+    render(
+      h(SessionStateProvider, {
+        sessionId: 'new-separator',
+        children: h(Group, {
+        orientation: 'horizontal',
+        id: 'kabmo-main',
+        children: [
+          h(LeftColumn, {
+            panelRef: { current: null },
+            open: true,
+            railEnabled,
+            view: 'sessions',
+            onSelectView: () => {},
+            onCollapse: () => {},
+            width: 280,
+            minWidth: 264,
+            hasActiveContext: true,
+            refreshKey: 0,
+            onRefresh: () => {},
+            onOpenFile: () => {},
+          }),
+          h('div', { 'data-panel-id': 'main-right-stack' }),
+        ],
+        }),
+      }),
+      host,
+    );
+  });
+  // The dock's view is `lazy()`, so the boundary matters before it resolves:
+  // the separator is a SIBLING of the panel, not part of its content.
+  for (let i = 0; i < 5; i += 1) await act(async () => {});
+}
+
+/** The group's DIRECT children, in order — a separator appears once per entry. */
+const children = (): string[] =>
+  [...(container!.querySelector('[data-panel-group-id="kabmo-main"]')?.children ?? [])].map((child) =>
+    child.hasAttribute('data-separator') ? 'separator' : (child.getAttribute('data-panel-id') ?? child.tagName),
+  );
+
+describe('left column separators', () => {
+  test('one separator with the rail on', async () => {
+    await mountColumn(true);
+    expect(children().filter((entry) => entry === 'separator')).toHaveLength(1);
+  });
+
+  test('one separator with the rail off', async () => {
+    await mountColumn(false);
+    expect(children().filter((entry) => entry === 'separator')).toHaveLength(1);
+  });
+
+  test('the separator is the column boundary — after the dock, not before it', async () => {
+    await mountColumn(true);
+    const kids = children();
+    expect(kids.at(-1)).toBe('main-right-stack');
+    expect(kids.at(-2)).toBe('separator');
+  });
+});
+
+describe('left column chrome', () => {
+  const panel = () => container!.querySelector('[data-panel-id="left-panel"]') as HTMLElement;
+  const rail = () => panel().querySelector('nav[aria-label="Left panel views"]');
+  const title = () => panel().querySelector('.h-10.flex-shrink-0.flex.items-center.justify-between');
+  const footer = () => panel().querySelector('button[aria-label="Settings"]');
+
+  test('the title row, the rail and the strip are three rows, in that order', async () => {
+    await mountColumn(true);
+    const column = panel().firstElementChild as HTMLElement;
+    const rows = [...column.children];
+    expect(rows).toHaveLength(3);
+    // Row 0 is the title, row 1 holds the rail beside the view, row 2 the strip.
+    expect(rows[0].contains(title())).toBe(true);
+    expect(rows[1].contains(rail())).toBe(true);
+    expect(rows[2].contains(footer())).toBe(true);
+  });
+
+  test('the rail starts BELOW the title, never above it', async () => {
+    await mountColumn(true);
+    const column = panel().firstElementChild as HTMLElement;
+    expect(column.children[0].contains(rail())).toBe(false);
+    expect(column.children[1].contains(rail())).toBe(true);
+  });
+
+  test('the strip spans the column, so the rail does not outlive it', async () => {
+    await mountColumn(true);
+    const column = panel().firstElementChild as HTMLElement;
+    expect(column.children[2].contains(rail())).toBe(false);
+    expect(column.children[2].contains(footer())).toBe(true);
+    // Same row container for title and strip: both are full-width rows of the
+    // column, which is what makes the strip run under the rail too.
+    expect(column.children[0].parentElement).toBe(column.children[2].parentElement);
+  });
+
+  test('the strip survives a view that is not the session list', async () => {
+    await mountColumn(true);
+    // The column's furniture is rendered outside `LeftDockView` entirely, so it
+    // is present even while the lazy view is still resolving.
+    expect(footer()).not.toBeNull();
+  });
+});

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

@@ -126,9 +126,15 @@ export function CategoryHeader({
           a checkbox is a second thing the click could mean. */}
       {!batchActive && (
         <div className="flex items-center space-x-0.5 pl-1">
+          {/* `aria-label` as well as `title`, like the phone's row: the button
+              is icon-only, so `title` alone leaves it unnamed to assistive tech
+              and to `getByRole` — and naming the FOLDER is what tells this
+              button apart from the toolbar's own New Session, which inherits
+              the current session's folder instead of naming one. */}
           <button
             type="button"
             title="New Session"
+            aria-label={`New session in ${folder.name}`}
             className="w-5 h-5 flex items-center justify-center text-ink/40 hover:text-ink hover:bg-ink/10 rounded cursor-pointer transition-colors"
             onClick={(e) => { e.stopPropagation(); onNewSession(); }}
           >

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

@@ -30,6 +30,7 @@ export function Category({
   onToast,
   batch,
   onStartSessionSelection,
+  onCancelWait,
 }: { 
   folder: WorkspaceFolderData;
   activeSessionId: number | string | null;
@@ -43,6 +44,8 @@ export function Category({
   batch?: BatchBinding;
   /** Start a session selection scoped to this workspace, from its `⋯` menu. */
   onStartSessionSelection?: (folderId: number) => void;
+  /** Drop the held prompt of one row (`waitingFor.waitId`). */
+  onCancelWait?: (waitId: string) => void;
 }) {
   const [isOpen, setIsOpen] = useState(folder.isExpanded || false);
   const [showMenu, setShowMenu] = useState(false);
@@ -226,6 +229,12 @@ export function Category({
                   hasSubagents={hasSubagents}
                   isExpanded={isExpanded}
                   onToggleExpand={() => handleToggleSessionExpand(sessionKey)}
+                  waitingFor={session.waitingFor ? { title: session.waitingFor.title } : undefined}
+                  onCancelWait={
+                    session.waitingFor
+                      ? () => onCancelWait?.(session.waitingFor!.waitId)
+                      : undefined
+                  }
                   selectable={sessionCheckboxes}
                   selected={Boolean(batch?.selected.includes(sessionKey))}
                   onToggleSelect={batch ? () => batch.toggle(sessionKey) : undefined}

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

@@ -1,5 +1,5 @@
 import type { TargetedMouseEvent } from 'preact';
-import { Check, ChevronDown, ChevronRight, CircleQuestionMark, Loader2, MoreHorizontal } from 'lucide-preact';
+import { Check, ChevronDown, ChevronRight, CircleQuestionMark, Hourglass, Loader2, MoreHorizontal } from 'lucide-preact';
 import { useInlineRename } from '@/client/hooks/ui/inline-rename';
 import { useSessionRenaming } from '@/client/hooks/workspace/renaming-sessions';
 import { SessionActionsMenu, useRowMenu } from '@/client/components/common/session-actions-menu';
@@ -30,6 +30,14 @@ export interface SessionItemProps {
   isExpanded?: boolean;
   hasSubagents?: boolean;
   onToggleExpand?: (e: TargetedMouseEvent<HTMLElement>) => void;
+  /**
+   * The row's prompt is held until another session finishes. A pending row has
+   * no transcript and no omp id, so this cue is the only thing on screen saying
+   * the chat exists and what it is waiting for.
+   */
+  waitingFor?: { title: string | null };
+  /** Drop this row's held prompt, from the row's own menu. */
+  onCancelWait?: () => void;
   /** Draw a checkbox and let the row's click toggle the selection instead of
    *  opening the session (batch mode). */
   selectable?: boolean;
@@ -54,6 +62,8 @@ export function SessionItem({
   isExpanded = false,
   hasSubagents = false,
   onToggleExpand,
+  waitingFor,
+  onCancelWait,
   selectable = false,
   selected = false,
   onToggleSelect,
@@ -70,7 +80,8 @@ export function SessionItem({
   // or expanded: it is the only affordance left worth showing, and making it
   // hover-only would leave the roster reachable only by hovering exactly the
   // right 16px.
-  const liveRun = awaitingInput || status === 'stream';
+  const waiting = Boolean(waitingFor);
+  const liveRun = awaitingInput || status === 'stream' || waiting;
   const chevronPinned = showChevron && !liveRun && !renaming;
   const showStatus = Boolean(renaming || awaitingInput || status) && !chevronPinned;
   const {
@@ -84,7 +95,7 @@ export function SessionItem({
   } = useInlineRename(title, onRename);
   // One trigger for every row action; also reachable by right-clicking the row.
   const menu = useRowMenu();
-  const hasActions = Boolean(onRename || onArchive || onDelete);
+  const hasActions = Boolean(onRename || onArchive || onDelete || onCancelWait);
 
   return (
     <>
@@ -163,6 +174,10 @@ export function SessionItem({
                 </span>
               ) : awaitingInput ? (
                 <CircleQuestionMark size={12} className="animate-pulse text-ink/80" />
+              ) : waiting ? (
+                <span role="status" aria-label={`Waiting for ${waitingFor?.title ?? 'another session'}`}>
+                  <Hourglass size={12} className="animate-pulse text-ink/60" />
+                </span>
               ) : status === 'stream' ? (
                 <Loader2 size={12} className="animate-spin" />
               ) : (
@@ -190,8 +205,17 @@ export function SessionItem({
             className="flex-1 min-w-0 bg-paper border border-ink/25 rounded px-1 py-0.5 text-xs text-ink outline-none focus:border-ink/50"
           />
         ) : (
-          <span className="flex-1 min-w-0 truncate leading-snug">
-            {title.charAt(0).toUpperCase() + title.slice(1)}
+          <span className="flex-1 min-w-0 flex flex-col leading-snug">
+            <span className="truncate">
+              {title.charAt(0).toUpperCase() + title.slice(1)}
+            </span>
+            {/* One muted line under the title: the row is a real chat, and this
+                is why it has not started yet. */}
+            {waiting && (
+              <span className="truncate text-[10px] text-ink/40 font-normal">
+                waiting for {waitingFor?.title ?? 'another session'}
+              </span>
+            )}
           </span>
         )}
 
@@ -234,6 +258,7 @@ export function SessionItem({
           onRenameWithAi={onRenameWithAi}
           onArchive={onArchive}
           onDelete={onDelete}
+          onCancelWait={onCancelWait}
           onClose={menu.close}
         />
       )}

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

@@ -15,6 +15,8 @@ interface SessionSidebarSessionListProps {
   /** Present only while a batch selection is active. */
   batch?: BatchBinding;
   onStartSessionSelection?: (folderId: number) => void;
+  /** Drop a held prompt from its row's menu. */
+  onCancelWait?: (waitId: string) => void;
 }
 
 export function SessionSidebarSessionList({
@@ -28,6 +30,7 @@ export function SessionSidebarSessionList({
   onToast,
   batch,
   onStartSessionSelection,
+  onCancelWait,
 }: SessionSidebarSessionListProps) {
   // No fade wiring here: the app-wide scrollbar rule reveals this list's bar
   // from the document's own capture-phase listener (`lib/scrollbar-activity`),
@@ -52,6 +55,7 @@ export function SessionSidebarSessionList({
             onToast={onToast}
             batch={batch}
             onStartSessionSelection={onStartSessionSelection}
+            onCancelWait={onCancelWait}
           />
         ))
       )}

package/src/client/components/layout/session-sidebar/{index.tsx → SessionsView.tsx}

@@ -1,21 +1,16 @@
 import { useState } from 'preact/hooks';
 import { useSearchParams } from '@/client/lib/router/search-params';
-import { AboutModal, NewWorkspaceModal, SettingsModal } from '@/client/components/layout/session-sidebar/Modals';
+import { 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 { SessionSidebarHeader } from '@/client/components/layout/session-sidebar/Header';
 import { SessionSidebarToolbar } from '@/client/components/layout/session-sidebar/Toolbar';
-import { SessionSidebarFooter } from '@/client/components/layout/session-sidebar/Footer';
-import { useAndroidDownload } from '@/client/hooks/ui/updates/android-download';
 import { SessionSidebarSessionList } from '@/client/components/layout/session-sidebar/SessionList';
 import { SessionListSkeleton } from '@/client/components/layout/session-sidebar/Skeleton';
 import { ToastStack } from '@/client/components/common/ToastStack';
 import { spawnCwdForNewSession, triggerSessionPrewarm } from '@/shared/lib/omp/session/prewarm';
-import { useKabmoEvent } from '@/client/hooks/ui/window-event';
 import { useToasts } from '@/client/hooks/ui/toasts';
-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 { useCancelWait } from '@/client/hooks/chat/waiting/cancel';
+import { useWaitingDispatch } from '@/client/hooks/chat/waiting/dispatch';
 import { startPendingSession } from '@/client/hooks/chat/omp/pending-sessions';
 import { useScheduledTaskCount } from '@/client/hooks/workspace/scheduled-tasks';
 import { cloneWorkspaceFolder, createWorkspaceFolder } from '@/client/hooks/workspace/new-workspace';
@@ -25,9 +20,37 @@ import { BatchActionBar } from '@/client/components/common/batch-selection/Batch
 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';
-import type { AgentStreamStatus } from '@/shared/lib/chat/omp/status';
 
-export function SessionSidebar({ className = '', onClose, appSettings = {}, streamStatus }: { className?: string, onClose?: () => void, appSettings?: Record<string, any>, streamStatus?: AgentStreamStatus }) {
+/**
+ * The session list — the left dock's own view.
+ *
+ * It used to BE the left column. The column is a dock now, and this is the view
+ * that fills it unless the user places a plugin panel there; the strip below it
+ * (Settings · About · the APK offer) is the DOCK's, not this view's, because
+ * those controls act on Kabmo rather than on the list.
+ *
+ * Three things are deliberately NOT here any more:
+ *
+ * - **The header.** It is the COLUMN's title row now, and it spans the rail too
+ *   (see `LeftColumn`): a title that stopped at the dock body would leave the
+ *   rail starting above it, with a gap under the app's own titlebar.
+ * - **The footer.** It is dock furniture, and a plugin view on the same dock
+ *   must not take it away — moving to a plugin panel would otherwise lose the
+ *   only visible way into Settings.
+ * - **The update popup and the About modal it hands over to.** Both are app
+ *   level: they are about the console, not about one view, and the dock renders
+ *   them so they survive a view switch.
+ *
+ * Everything else — the header's collapse control, the toolbar, the batch bar,
+ * the workspace and scheduler dialogs — belongs to the list and stays.
+ */
+export function SessionsView({
+  className = '',
+  appSettings = {},
+}: {
+  className?: string;
+  appSettings?: Record<string, any>;
+}) {
   const {
     folders,
     initializing,
@@ -49,23 +72,14 @@ export function SessionSidebar({ className = '', onClose, appSettings = {}, stre
   } = useSessionSidebarController(appSettings, { expandSearchMatches: true });
   const [, setSearchParams] = useSearchParams();
 
-  const [settingsOpen, setSettingsOpen] = useState(false);
-  const [infoOpen, setInfoOpen] = useState(false);
-
-  // Modals for new workspace and scheduler
   const [newWorkspaceOpen, setNewWorkspaceOpen] = useState(false);
   const [schedulerOpen, setSchedulerOpen] = useState(false);
   const scheduledCount = useScheduledTaskCount();
-  const updates = useUpdates();
-  // The Android offer: an UPDATE inside the APK, an INSTALL on an Android
-  // browser, and nothing anywhere else — see `useAndroidDownload`.
-  const androidDownload = useAndroidDownload(
-    window.__OMP_BOOTSTRAP__?.shellVersion,
-    window.__OMP_BOOTSTRAP__?.isAndroid,
-  );
   const { toasts, pushToast, dismissToast } = useToasts();
+  const cancelWait = useCancelWait(pushToast);
+  // Follows a held prompt to its session — in whichever tab or instance sent it.
+  useWaitingDispatch({ onNotice: pushToast });
 
-  // Sidebar inline states
   const [isSearchVisible, setIsSearchVisible] = useState(false);
 
   // Batch selection: two separate modes (sessions from a workspace's `⋯` menu,
@@ -105,20 +119,6 @@ export function SessionSidebar({ className = '', onClose, appSettings = {}, stre
     else batch.begin('workspace');
   };
 
-  // The popup's "Update now" hands the run over instead of starting its own: the
-  // About modal is where an update has always been driven from and it owns the
-  // live output, so this opens it and starts the run it will draw. The popup
-  // dispatches this only after it has closed, so the two dialogs never stack.
-  useKabmoEvent(UPDATE_REQUEST_EVENT, () => {
-    setInfoOpen(true);
-    void updates.apply('kabmo').then((result) => {
-      // A null result means the run was aborted with the page; there is nobody
-      // left to tell. A `manual` answer is the command to run, not a success.
-      if (!result) return;
-      pushToast(result.message, result.success && !result.manual ? 'success' : 'error');
-    });
-  });
-
   /** The folder whose context a new session will inherit — same resolution
    *  the send path uses, so the prewarmed cwd matches the spawn cwd. */
   const prewarmForNewSession = (folderId?: number) => {
@@ -137,12 +137,15 @@ export function SessionSidebar({ className = '', onClose, appSettings = {}, stre
       const currentFolder = currentSessionId
         ? folders.find(f => f.sessions?.some((s) => String(s.id) === String(currentSessionId)))
         : undefined;
-      next.set('sessionId', startPendingSession(currentFolder?.id ?? null));
-      if (currentFolder) {
-        next.set('folderId', currentFolder.id.toString());
-      } else {
-        next.delete('folderId');
-      }
+      // The folder the chat will run in: the active session's, else the one the
+      // URL already names. Dropping the URL's own `folderId` (the previous
+      // `else next.delete`) left a chat opened with `?folderId=` with NO context
+      // — its composer then stayed disabled ("Please select a workspace above")
+      // and the first send never happened.
+      const contextFolderId = currentFolder?.id ?? (prev.get('folderId') ? Number(prev.get('folderId')) : null);
+      next.set('sessionId', startPendingSession(contextFolderId));
+      if (contextFolderId != null) next.set('folderId', String(contextFolderId));
+      else next.delete('folderId');
       return next;
     }, { replace: true });
   };
@@ -159,9 +162,7 @@ export function SessionSidebar({ className = '', onClose, appSettings = {}, stre
 
   return (
     <>
-      <aside className={`flex flex-col bg-paper h-full ${className}`}>
-        <SessionSidebarHeader streamStatus={streamStatus} onCollapse={onClose} />
-
+      <div className={`flex flex-col h-full ${className}`}>
         <SessionSidebarToolbar
           isSearchVisible={isSearchVisible}
           searchQuery={searchQuery}
@@ -199,6 +200,7 @@ export function SessionSidebar({ className = '', onClose, appSettings = {}, stre
             onToast={pushToast}
             batch={batchBinding}
             onStartSessionSelection={(folderId) => batch.begin('session', folderId)}
+            onCancelWait={cancelWait}
           />
         )}
 
@@ -215,33 +217,7 @@ export function SessionSidebar({ className = '', onClose, appSettings = {}, stre
             onCancel={batch.end}
           />
         )}
-
-        <SessionSidebarFooter
-          onSettings={() => setSettingsOpen(true)}
-          onInfo={() => setInfoOpen(true)}
-          androidDownload={androidDownload}
-          updateAvailable={updates.hasUpdate}
-          onUpdateClick={() => {
-            setInfoOpen(true);
-            void updates.check();
-          }}
-        />
-      </aside>
-
-      {/* Settings Modal */}
-      <SettingsModal isOpen={settingsOpen} onClose={() => setSettingsOpen(false)} appSettings={appSettings} />
-
-      {/* Info Modal */}
-      <AboutModal
-        isOpen={infoOpen}
-        onClose={() => setInfoOpen(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} />
+      </div>
 
       {/* Batch delete confirmation. It stays open on a refusal so the reasons
           can be read; a fully successful run closes itself and leaves the mode. */}

package/src/client/components/layout/session-sidebar/new-session-context.test.ts

@@ -0,0 +1,55 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * New Session keeps the chat's FOLDER context.
+ *
+ * The bug this pins was reported as "the composer is disabled in a new chat":
+ * opening the app with `?folderId=…` and pressing New Session used to DELETE the
+ * `folderId` param (its branch only restored the folder of the session on
+ * screen, and there was none yet). The pending chat then had no context, so the
+ * composer rendered "Please select a workspace above to start prompting…" and
+ * the first send never happened — measured through the browser layer, where
+ * `panels.e2e.ts` could not reach the commit box at all.
+ *
+ * The rule is one sentence, and it is what this file asserts: the folder a new
+ * chat inherits is the ACTIVE session's folder, else the one the URL already
+ * names. It is expressed here rather than by mounting the sidebar because the
+ * component is a controller with a dozen stores behind it; the branch itself is
+ * pure, and it is the branch that was wrong.
+ */
+
+import { describe, expect, test } from 'bun:test';
+
+/**
+ * The folder id a new chat is opened in, from what the sidebar knows.
+ *
+ * Mirrors `handleNewSession` in `session-sidebar/SessionsView.tsx`.
+ */
+function contextFolderFor(args: {
+  sessionFolderId?: number | null;
+  urlFolderId?: string | null;
+}): number | null {
+  const { sessionFolderId = null, urlFolderId = null } = args;
+  if (sessionFolderId != null) return sessionFolderId;
+  return urlFolderId ? Number(urlFolderId) : null;
+}
+
+describe('new chat folder context', () => {
+  test('an active session in a folder wins', () => {
+    expect(contextFolderFor({ sessionFolderId: 3, urlFolderId: '7' })).toBe(3);
+  });
+
+  test("a chat opened with ?folderId= keeps that folder", () => {
+    // The reported case: no session yet, so nothing to inherit — and the URL's
+    // own folder is the context the composer needs to be enabled.
+    expect(contextFolderFor({ urlFolderId: '7' })).toBe(7);
+  });
+
+  test('no session and no folder is null, not NaN', () => {
+    expect(contextFolderFor({})).toBeNull();
+    expect(contextFolderFor({ urlFolderId: null })).toBeNull();
+  });
+});

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

@@ -7,6 +7,7 @@ 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 { SESSIONS_VIEW_ID } from '@/shared/lib/workspace/left-dock';
 
 interface MobileRightSidebarProps {
   enabled?: boolean;
@@ -43,11 +44,13 @@ 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();
+  // 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.
+  const catalog = usePanelCatalog('all').filter((panel) => panel.id !== SESSIONS_VIEW_ID);
   const activePanel = catalog.find((panel) => panel.id === activeTab);
   // 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

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

@@ -11,6 +11,8 @@ 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';
@@ -80,6 +82,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
@@ -229,11 +233,13 @@ export function MobileSessionSidebar({
           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}