@kabmo-labs/kabmo 0.7.0 → 0.9.0

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

@@ -1,8 +1,6 @@
-import { Download, Info, Settings } from 'lucide-preact';
-import {
-  shellDownloadLabel,
-  type ShellDownload,
-} from '@/client/hooks/ui/updates/shell-download';
+import { Info, Settings } from 'lucide-preact';
+import type { ShellDownload } from '@/client/hooks/ui/updates/shell-download';
+import { ShellUpdateButton } from '@/client/components/common/shell-update-button';
 
 interface SessionSidebarFooterProps {
   onSettings: () => void;
@@ -50,16 +48,11 @@ export function SessionSidebarFooter({ onSettings, onInfo, updateAvailable, onUp
           // an installed shell that is behind (an update), or an Android browser
           // whose reader may not know the shell exists (an install). A desktop
           // browser and an iOS browser get neither — see `useShellDownload`.
-          <a
-            href={shellDownload.url}
-            target="_blank"
-            rel="noopener noreferrer"
-            title={shellDownloadLabel(shellDownload)}
-            aria-label={shellDownloadLabel(shellDownload)}
-            className="p-1 rounded hover:text-ink hover:bg-ink/5 cursor-pointer transition-colors"
-          >
-            <Download size={16} />
-          </a>
+          //
+          // A desktop shell that reported its architecture gets a BUTTON: the
+          // shell installs the artifact itself, and a link there would be a file
+          // in Downloads instead of an updated app.
+          <ShellUpdateButton download={shellDownload} variant="icon" />
         )}
       </div>
       {updateAvailable && (

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

@@ -4,6 +4,8 @@ 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';
 import { SelectionCheckbox } from '@/client/components/common/batch-selection/SelectionCheckbox';
+import { WorktreeBadge } from '@/client/components/layout/session-sidebar/WorktreeBadge';
+import type { SessionWorktreeInfo } from '@/shared/lib/workspace/worktree/types';
 
 export interface SessionItemProps {
   /** The session this row draws; the key its in-flight rename is tracked under. */
@@ -38,6 +40,11 @@ export interface SessionItemProps {
   waitingFor?: { title: string | null };
   /** Drop this row's held prompt, from the row's own menu. */
   onCancelWait?: () => void;
+  /**
+   * The worktree this session runs in, when its cwd is a linked checkout. The
+   * server sends it with the row, so no layout and no plugin asks git.
+   */
+  worktree?: SessionWorktreeInfo;
   /** Draw a checkbox and let the row's click toggle the selection instead of
    *  opening the session (batch mode). */
   selectable?: boolean;
@@ -64,6 +71,7 @@ export function SessionItem({
   onToggleExpand,
   waitingFor,
   onCancelWait,
+  worktree,
   selectable = false,
   selected = false,
   onToggleSelect,
@@ -224,6 +232,10 @@ export function SessionItem({
                 waiting for {waitingFor?.title ?? 'another session'}
               </span>
             )}
+            {/* A worktree session runs in its own checkout. The chip is the only
+                thing on the row saying so — the folder above it is the project,
+                which is where a reader would otherwise assume the chat writes. */}
+            {worktree && !isEditing && <WorktreeBadge worktree={worktree} />}
           </span>
         )}
 

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

@@ -10,6 +10,8 @@ interface SessionSidebarSessionListProps {
   sessionStatus: Record<string, 'stream' | 'finish' | 'abort'>;
   onSelectSession: (id: number | string) => void;
   onNewSessionForFolder: (id: number) => void;
+  /** Start a chat in a worktree made from this folder. */
+  onNewWorktreeSession?: (folderId: number, worktreePath: string) => void;
   /** Surfaces a refused folder action (the reveal endpoint's own reason). */
   onToast?: (message: string, type?: 'success' | 'error') => void;
   /** Present only while a batch selection is active. */
@@ -27,6 +29,7 @@ export function SessionSidebarSessionList({
   sessionStatus,
   onSelectSession,
   onNewSessionForFolder,
+  onNewWorktreeSession,
   onToast,
   batch,
   onStartSessionSelection,
@@ -49,6 +52,7 @@ export function SessionSidebarSessionList({
             activeSessionId={activeSessionId}
             onSelectSession={onSelectSession}
             onNewSessionForFolder={onNewSessionForFolder}
+            onNewWorktreeSession={onNewWorktreeSession}
             forceExpanded={!!searchQuery}
             showArchived={showArchived}
             sessionStatus={sessionStatus}

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

@@ -12,6 +12,7 @@ import { useSessionSidebarController } from '@/client/hooks/chat/omp/session-sid
 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 { setSessionKey } from '@/shared/lib/workspace/session-state/store';
 import { useScheduledTaskCount } from '@/client/hooks/workspace/scheduled-tasks';
 import { cloneWorkspaceFolder, createWorkspaceFolder } from '@/client/hooks/workspace/new-workspace';
 import { useBatchSelection } from '@/client/hooks/workspace/batch-selection';
@@ -150,6 +151,28 @@ export function SessionsView({
     }, { replace: true });
   };
 
+  /**
+   * Start a chat in a worktree made from this folder.
+   *
+   * The pick is written into the PENDING session's own state before the URL
+   * names it, so the composer's target picker draws it and the send path reads
+   * it through its ref — the same key the picker writes. Starting the chat here
+   * rather than only reporting the folder is what makes the entry point useful:
+   * a worktree created from the sidebar with no chat in it is a folder the user
+   * then has to go and find.
+   */
+  const handleNewWorktreeSession = (folderId: number, worktreePath: string) => {
+    prewarmForNewSession(folderId);
+    const pendingId = startPendingSession(folderId);
+    setSessionKey(pendingId, 'chat.spawnTarget', { folderId, worktreePath });
+    setSearchParams(prev => {
+      const next = new URLSearchParams(prev);
+      next.set('sessionId', pendingId);
+      next.set('folderId', folderId.toString());
+      return next;
+    }, { replace: true });
+  };
+
   const handleNewSessionForFolder = (folderId: number) => {
     prewarmForNewSession(folderId);
     setSearchParams(prev => {
@@ -197,6 +220,7 @@ export function SessionsView({
             sessionStatus={sessionStatus}
             onSelectSession={handleSelectSession}
             onNewSessionForFolder={handleNewSessionForFolder}
+            onNewWorktreeSession={handleNewWorktreeSession}
             onToast={pushToast}
             batch={batchBinding}
             onStartSessionSelection={(folderId) => batch.begin('session', folderId)}

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

@@ -0,0 +1,48 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The worktree chip on a session row.
+ *
+ * What it must say, and the one state that changes the words rather than only
+ * the colour: a worktree whose folder was deleted outside Kabmo keeps its row
+ * (that is how the transcript stays reachable) and must not read as an ordinary
+ * checkout.
+ */
+
+import { describe, expect, test } from 'bun:test';
+import {
+  WORKTREE_BADGE_MISSING_SUFFIX,
+  worktreeBadgeLabel,
+  worktreeBadgeTitle,
+} from '@/client/components/layout/session-sidebar/WorktreeBadge';
+import type { SessionWorktreeInfo } from '@/shared/lib/workspace/worktree/types';
+
+const ready: SessionWorktreeInfo = {
+  branch: 'wt/cosmic-dolphin',
+  path: '/data/worktrees/abc/cosmic-dolphin',
+  primaryRoot: '/repo',
+  status: 'ready',
+  detached: false,
+};
+
+describe('worktree badge', () => {
+  test('names the branch', () => {
+    expect(worktreeBadgeLabel(ready)).toBe('wt/cosmic-dolphin');
+    expect(worktreeBadgeTitle(ready)).toContain('/data/worktrees/abc/cosmic-dolphin');
+  });
+
+  test('a missing worktree says so in the label, not only in the colour', () => {
+    const missing: SessionWorktreeInfo = { ...ready, status: 'missing' };
+    expect(worktreeBadgeLabel(missing)).toContain(WORKTREE_BADGE_MISSING_SUFFIX);
+    expect(worktreeBadgeTitle(missing)).toMatch(/missing/i);
+  });
+
+  test('a detached HEAD has a name instead of an empty chip', () => {
+    const detached: SessionWorktreeInfo = { ...ready, branch: '', detached: true };
+    expect(worktreeBadgeLabel(detached)).toBe('detached');
+    expect(worktreeBadgeTitle(detached)).toMatch(/detached/i);
+  });
+});

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

@@ -0,0 +1,55 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The `⑂ wt/branch` chip under a worktree session's title.
+ *
+ * It is a LABEL, not a control: the row's own click opens the chat, and the
+ * project's panels already follow the session's root, so a second click target
+ * here would only be a way to open the same thing twice. The absolute path lives
+ * in `title`, which is where a reader looks when they want to know where the
+ * chat actually writes.
+ *
+ * `missing` is the one state that changes the wording rather than the colour
+ * alone: a worktree whose directory was removed outside Kabmo keeps its row (so
+ * its transcript is reachable) but must not read as an ordinary checkout.
+ */
+
+import type { SessionWorktreeInfo } from '@/shared/lib/workspace/worktree/types';
+
+export const WORKTREE_BADGE_MISSING_SUFFIX = 'missing';
+
+/** What the chip says, without the markup — exported so a test asserts the words. */
+export function worktreeBadgeLabel(worktree: SessionWorktreeInfo): string {
+  const name = worktree.branch || (worktree.detached ? 'detached' : 'worktree');
+  return worktree.status === 'missing' ? `${name} · ${WORKTREE_BADGE_MISSING_SUFFIX}` : name;
+}
+
+export function worktreeBadgeTitle(worktree: SessionWorktreeInfo): string {
+  if (worktree.status === 'missing') {
+    return `Worktree folder is missing: ${worktree.path}`;
+  }
+  return worktree.detached
+    ? `Detached HEAD in worktree ${worktree.path}`
+    : `Runs in worktree ${worktree.path}`;
+}
+
+export function WorktreeBadge({ worktree }: { worktree: SessionWorktreeInfo }) {
+  const missing = worktree.status === 'missing';
+  return (
+    <span
+      className={`flex min-w-0 items-center gap-1 truncate text-[10px] font-normal ${
+        missing ? 'text-warning' : 'text-ink/45'
+      }`}
+      title={worktreeBadgeTitle(worktree)}
+      data-worktree-status={worktree.status}
+    >
+      <span aria-hidden="true" className="shrink-0 font-mono">
+        ⑂
+      </span>
+      <span className="truncate">{worktreeBadgeLabel(worktree)}</span>
+    </span>
+  );
+}

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

@@ -9,7 +9,7 @@ import { MobileRightSidebar } from '@/client/components/mobile/RightSidebar';
 import { MobileFullEditor } from '@/client/components/mobile/mobile-right-sidebar/FullEditor';
 import { MobileFullDiff } from '@/client/components/mobile/mobile-right-sidebar/FullDiff';
 import { SettingsModal } from '@/client/components/settings/LazyModal';
-import { activeProjectForSession } from '@/shared/lib/workspace/active-project';
+import { activeProjectForSession, effectiveRootFor } from '@/shared/lib/workspace/active-project';
 import { spawnCwdForNewSession, triggerSessionPrewarm } from '@/shared/lib/omp/session/prewarm';
 import { useSidebarData } from '@/client/hooks/chat/omp/session-list';
 import { useMissingFiles } from '@/client/hooks/workspace/missing-files';
@@ -23,6 +23,7 @@ import { mobileEditorFileFrom, type MobileEditorFile } from '@/client/components
 import { useLeftDock } from '@/client/hooks/workspace/left-dock';
 import { useSessionStateContext } from '@/client/hooks/workspace/session-state/context';
 import { setSessionKey } from '@/shared/lib/workspace/session-state/store';
+import { startWorktreeSession } from '@/client/components/mobile/worktree-session';
 import { OPEN_PANEL_EVENT, phoneDrawerForPanel, type OpenPanelDetail } from '@/shared/lib/workspace/panel-open';
 
 interface MobileLayoutWrapperProps {
@@ -106,7 +107,9 @@ export function MobileLayoutWrapper({ onDesktopToggle, appSettings = {} }: Mobil
 
   const { folder: sessionFolder } = activeProjectForSession(folders, sessionId);
   const contextFolder = sessionFolder ?? (folderId ? folders.find(f => String(f.id) === String(folderId)) ?? null : null);
-  const activeProjectPath = contextFolder?.project_path ?? null;
+  // A worktree session runs outside its folder's project path: the phone draws
+  // the same panels as the desktop, so it resolves the same root.
+  const activeProjectPath = effectiveRootFor(folders, sessionId) ?? contextFolder?.project_path ?? null;
   const hasContext = !!contextFolder;
 
   // A phone drop is rare but real (an iPad with a trackpad). The target is the
@@ -145,20 +148,13 @@ export function MobileLayoutWrapper({ onDesktopToggle, appSettings = {} }: Mobil
   useKabmoEvent('omp:view-subagent', () => setCurrentScreen('main'));
 
   /**
-   * A plugin's navbar readout asking for its own panel.
-   *
-   * A phone has no rail, so "show this panel" is two decisions: which DRAWER can
-   * reach it, and which chip inside that drawer is the view. Both are answered
-   * from the placement state (`phoneDrawerForPanel`), never from the panel's
-   * slot — a panel placed on the left is drawn by the RIGHT drawer while the
-   * rail is off, and naming the drawer from the slot would open one that does
-   * not list it.
-   *
-   * The tab is written through the session store rather than through a prop:
-   * the drawer mounts on this screen change and reads the stored tab, so the
-   * selection has to be in the store before it mounts. An `editor`-slot
-   * takeover resolves to null — the phone has no editor column — and the click
-   * then does nothing rather than opening a drawer that cannot show it.
+   * A plugin's navbar readout asking for its own panel. A phone has no rail, so
+   * "show this panel" is two decisions — which DRAWER reaches it and which chip
+   * inside it — both answered by `phoneDrawerForPanel` from the PLACEMENT, never
+   * from the panel's slot. The tab is written through the store because the
+   * drawer mounts on this screen change and reads the stored tab; an `editor`
+   * takeover resolves to null and the click does nothing rather than opening a
+   * drawer that cannot show it.
    */
   useKabmoEvent(OPEN_PANEL_EVENT, (event) => {
     const panelKey = (event as CustomEvent<OpenPanelDetail>).detail?.panelKey;
@@ -228,6 +224,15 @@ export function MobileLayoutWrapper({ onDesktopToggle, appSettings = {} }: Mobil
     setCurrentScreen('main');
   };
 
+  // Desktop parity: a worktree made from the phone's folder menu starts its chat
+  // in it. The sequence lives in one module so both layouts share it.
+  const handleNewWorktreeSession = (targetFolderId: number, worktreePath: string) =>
+    startWorktreeSession(
+      { setSearchParams, afterNavigate: () => setCurrentScreen('main') },
+      targetFolderId,
+      worktreePath,
+    );
+
   const handleOpenFile = useCallback((file: unknown) => {
     const next = mobileEditorFileFrom(file, activeProjectPath);
     if (next) setMobileEditorFile(next);
@@ -254,6 +259,7 @@ export function MobileLayoutWrapper({ onDesktopToggle, appSettings = {} }: Mobil
       <div
         className={`flex-1 min-h-0 w-full relative ${currentScreen === 'main' ? 'block' : 'hidden'}`}
         {...editorDrop.dropProps}
+        {...editorDrop.captureDropProps}
       >
         <EditorDropOverlay visible={editorDrop.isDragging} />
         <MobileMainView
@@ -272,6 +278,7 @@ export function MobileLayoutWrapper({ onDesktopToggle, appSettings = {} }: Mobil
           onSelectSession={handleSelectSession}
           onNewSession={handleNewSession}
           onNewSessionForFolder={handleNewSessionForFolder}
+          onNewWorktreeSession={handleNewWorktreeSession}
           onClose={() => setCurrentScreen('main')}
           onDesktopToggle={onDesktopToggle}
           appSettings={appSettings}

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

@@ -10,6 +10,7 @@ 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';
+import { dragRegionProps, titlebarInsetLeft } from '@/client/lib/desktop/titlebar';
 
 interface MobileRightSidebarProps {
   enabled?: boolean;
@@ -89,28 +90,38 @@ export function MobileRightSidebar({
   return (
     <div className="flex flex-col h-full w-full bg-paper text-ink relative select-none">
 
-      {/* Top Header & Tab Navigation Bar */}
+      {/* Top Header & Tab Navigation Bar. It is the window's title bar while
+          this drawer is the mounted screen: a desktop shell window narrowed
+          past the layout breakpoint shows it, and without `data-drag-region`
+          there is nothing left to move the window by. The chip strip inside is
+          the `titlebar-no-drag` cluster. */}
       <div
-        className="border-b border-ink/10 flex items-center justify-between px-3 flex-shrink-0 bg-canvas"
+        className="border-b border-ink/10 flex items-center justify-between px-3 flex-shrink-0 bg-canvas titlebar-drag-region select-none"
+        {...dragRegionProps()}
         style={{
           height: 'calc(3.5rem + env(safe-area-inset-top, 0px))',
           paddingTop: 'env(safe-area-inset-top, 0px)',
-          paddingLeft: titlebarPaddingLeft('0.75rem', true),
+          paddingLeft: titlebarInsetLeft(titlebarPaddingLeft('0.75rem', true)),
           paddingRight: titlebarPaddingRight('0.75rem', true),
         }}
       >
 
-        <PanelChips
-          panels={catalog}
-          activeId={activePanel?.id ?? activeTab}
-          onSelect={setActiveTab}
-          hasGitChanges={hasGitChanges}
-        />
+        {/* The header is now a drag region, so its controls must say so —
+            `app-region` inherits, and a control inside a drag region is a drag
+            handle that swallows its own click on Windows. */}
+        <div className="flex items-center min-w-0 titlebar-no-drag">
+          <PanelChips
+            panels={catalog}
+            activeId={activePanel?.id ?? activeTab}
+            onSelect={setActiveTab}
+            hasGitChanges={hasGitChanges}
+          />
+        </div>
 
         <button
           type="button"
           onClick={onClose}
-          className="p-1.5 rounded-lg hover:bg-ink/5 active:bg-ink/10 text-ink transition-colors flex-shrink-0 ml-2"
+          className="p-1.5 rounded-lg hover:bg-ink/5 active:bg-ink/10 text-ink transition-colors flex-shrink-0 ml-2 titlebar-no-drag"
           title="Close right sidebar"
           aria-label="Close right sidebar"
         >

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

@@ -29,6 +29,8 @@ interface MobileSessionSidebarProps {
   onSelectSession: (id: number | string) => void;
   onNewSession: () => void;
   onNewSessionForFolder: (folderId: number) => void;
+  /** Start a chat in a worktree made from this folder. */
+  onNewWorktreeSession?: (folderId: number, worktreePath: string) => void;
   onClose: () => void;
   onDesktopToggle?: () => void;
   appSettings?: Record<string, any>;
@@ -45,6 +47,7 @@ export function MobileSessionSidebar({
   onSelectSession,
   onNewSession,
   onNewSessionForFolder,
+  onNewWorktreeSession,
   onClose,
   onDesktopToggle,
   appSettings = {},
@@ -264,6 +267,11 @@ export function MobileSessionSidebar({
               sessionStatus={sessionStatus}
               onSelectSession={handleSelectSession}
               onNewSessionForFolder={handleNewSessionForFolderAndClose}
+              onNewWorktreeSession={
+                onNewWorktreeSession
+                  ? (id, path) => { onNewWorktreeSession(id, path); onClose(); }
+                  : undefined
+              }
               onToggleFolder={toggleFolder}
               onToast={pushToast}
               batch={batchBinding}

package/src/client/components/mobile/header-titlebar.test.tsx

@@ -0,0 +1,172 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The phone's headers are title bars, and they say so.
+ *
+ * A desktop shell window may be narrower than `App`'s 768px layout breakpoint —
+ * macOS, Windows and Linux all allow a 720px window — so a narrowed shell
+ * window renders the PHONE layout, and whichever header is on screen becomes
+ * the window's top strip. Three things follow, and all three were missing:
+ *
+ * 1. **`data-drag-region`.** macOS and Linux decide a drag from that attribute,
+ *    so a header without it is a strip the window cannot be moved by. The main
+ *    screen had none, and the right drawer had none at all.
+ * 2. **The shell's own left inset.** `titlebarPaddingLeft` reads
+ *    `env(titlebar-area-x)`, which a native WKWebView never defines, so the
+ *    76px macOS reserves for its traffic lights has to come from
+ *    `titlebarInsetLeft` — without it the hamburger and the wordmark sat under
+ *    the buttons.
+ * 3. **`titlebar-no-drag` on the controls.** `app-region` INHERITS, so marking
+ *    a header as a drag region turns every control in it into a drag handle on
+ *    Windows unless the control says otherwise — and a drag handle swallows its
+ *    own click.
+ *
+ * Asserted on the RENDERED markup, because a header's class list and attributes
+ * are what the shells read; a source-level check would pass on a component that
+ * rendered something else.
+ */
+
+import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import { h, render } from 'preact';
+import { act } from 'preact/test-utils';
+import { MobileHeader } from '@/client/components/mobile/mobile-main-view/Header';
+import { MobileSessionHeader } from '@/client/components/mobile/mobile-session-sidebar/Header';
+import { MobileRightSidebar } from '@/client/components/mobile/RightSidebar';
+import { SessionStateProvider } from '@/client/components/common/session-state-provider/index';
+import { silenceRealtime, restoreRealtime } from '@/test-support/silent-socket';
+
+const DOM_GLOBALS = [
+  'window', 'document', 'navigator', 'Node', 'Element', 'HTMLElement',
+  'Event', 'MouseEvent', 'KeyboardEvent',
+] as const;
+const nativeGlobals: Partial<Record<(typeof DOM_GLOBALS)[number], unknown>> = {};
+
+let win: Window;
+let container: HTMLElement;
+
+/** The shell's globals, which the DOM's `window` type does not declare. */
+type Shell = {
+  __kabmoCall?: (method: string, params?: Record<string, unknown>) => Promise<unknown>;
+  __kabmoDesktop?: Record<string, unknown>;
+};
+
+beforeAll(() => {
+  win = new Window({ url: 'http://localhost' });
+  const target = globalThis as unknown as Record<string, unknown>;
+  for (const key of DOM_GLOBALS) {
+    if (!(key in nativeGlobals)) nativeGlobals[key] = target[key];
+    target[key] = (win as unknown as Record<string, unknown>)[key];
+  }
+});
+
+afterAll(() => {
+  const target = globalThis as unknown as Record<string, unknown>;
+  for (const key of DOM_GLOBALS) {
+    const value = nativeGlobals[key];
+    if (value === undefined) delete target[key];
+    else target[key] = value;
+  }
+});
+
+beforeEach(() => {
+  // The headers subscribe to the realtime channel on mount; this window's
+  // origin answers nothing, and a refused dial fails asynchronously — after
+  // this suite has restored the globals, which reports against the NEXT file.
+  silenceRealtime();
+  container = document.createElement('div');
+  document.body.appendChild(container);
+});
+
+afterEach(() => {
+  if (container) {
+    render(null, container);
+    container.remove();
+  }
+  restoreRealtime();
+  const shell = win as unknown as Shell;
+  delete shell.__kabmoDesktop;
+  delete shell.__kabmoCall;
+});
+
+/** Mount a header as a macOS shell window would see it. */
+async function mountAsMacShell(node: () => unknown): Promise<void> {
+  const shell = win as unknown as Shell;
+  shell.__kabmoCall = async () => null;
+  shell.__kabmoDesktop = {
+    platform: 'macos', shellVersion: '0.1.0', overlayTitlebar: true, trafficLightInset: '5rem',
+  };
+  // The headers embed the shared control cluster, which reads the session's
+  // state (the editor/panel toggles and the plugin slots) — the real provider is
+  // what a shell window mounts them inside.
+  await act(async () => {
+    render(
+      h(SessionStateProvider, { sessionId: 'session-shell-header', children: node() as never }),
+      container,
+    );
+  });
+}
+
+describe('phone headers as a shell title bar', () => {
+  test('the main header carries the drag region and the shell inset', async () => {
+    await mountAsMacShell(() =>
+      h(MobileHeader, {
+        activeSessionTitle: 'Shell',
+        activeSessionId: 'session-shell-header',
+        onOpenSessionSidebar: () => {},
+        onOpenRightSidebar: () => {},
+        onNewSession: () => {},
+        onSelectSession: () => {},
+      }),
+    );
+    const header = container.querySelector('header') as HTMLElement;
+    expect(header).toBeTruthy();
+    expect(header.hasAttribute('data-drag-region')).toBe(true);
+    // `5rem` is what this shell reported; the caller's own 0.75rem would leave
+    // the hamburger under the traffic lights.
+    expect(header.style.paddingLeft).toContain('5rem');
+    // And the controls inside it must not inherit the drag region.
+    expect(header.querySelector('.titlebar-no-drag')).toBeTruthy();
+  });
+
+  test('the sessions drawer header carries the drag region and the shell inset', async () => {
+    await mountAsMacShell(() => h(MobileSessionHeader, { onClose: () => {} }));
+    const header = container.firstElementChild as HTMLElement;
+    expect(header.hasAttribute('data-drag-region')).toBe(true);
+    expect(header.style.paddingLeft).toContain('5rem');
+    expect(header.querySelector('.titlebar-no-drag')).toBeTruthy();
+  });
+
+  test('the right drawer header is a drag region whose controls are not', async () => {
+    await mountAsMacShell(() =>
+      h(MobileRightSidebar, { enabled: false, onClose: () => {} }),
+    );
+    const drag = container.querySelector('[data-drag-region]') as HTMLElement;
+    expect(drag).toBeTruthy();
+    expect(drag.style.paddingLeft).toContain('5rem');
+    const close = drag.querySelector('button[aria-label="Close right sidebar"]') as HTMLElement;
+    expect(close).toBeTruthy();
+    // The close button is a control in a drag region: without this it is a
+    // drag handle on Windows and its click never fires.
+    expect(close.className).toContain('titlebar-no-drag');
+  });
+
+  /** A browser tab has no shell, so nothing is reserved and nothing is marked. */
+  test('a browser marks no drag region and reserves nothing', async () => {
+    await act(async () => {
+      render(
+        h(SessionStateProvider, {
+          sessionId: 'session-shell-header',
+          children: h(MobileSessionHeader, { onClose: () => {} }),
+        }),
+        container,
+      );
+    });
+    const header = container.firstElementChild as HTMLElement;
+    expect(header.hasAttribute('data-drag-region')).toBe(false);
+    expect(header.style.paddingLeft).not.toContain('5rem');
+  });
+});

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

@@ -9,6 +9,7 @@ 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';
+import { dragRegionProps, titlebarInsetLeft } from '@/client/lib/desktop/titlebar';
 
 interface MobileHeaderProps {
   activeSessionTitle: string;
@@ -90,9 +91,17 @@ export function MobileHeader({
   return (
     <header
       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"
+      {...dragRegionProps()}
       style={{
         height: 'calc(3.5rem + env(safe-area-inset-top, 0px))',
-        paddingLeft: titlebarPaddingLeft('0.75rem', true),
+        // The shell's own inset, not only the PWA's. `titlebarPaddingLeft` reads
+        // `env(titlebar-area-x)`, which a native WKWebView never defines — so on
+        // macOS this header's hamburger and wordmark were drawn UNDER the
+        // traffic lights, in the 76px the shell reserves for them. `titlebarInsetLeft`
+        // is what the desktop navbar and the sidebar header already use; a
+        // desktop shell window narrowed past the layout breakpoint lands on this
+        // header, which is why it needs the same treatment.
+        paddingLeft: titlebarInsetLeft(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

@@ -69,6 +69,9 @@ export function MobileFullDiff({ diff, onClose, onFileSaved }: MobileFullDiffPro
       <div className="flex-1 min-h-0">
         <DiffPanel
           className="h-full"
+          // A full-screen phone overlay has no chat column or sidebar beside
+          // it, so the width modes would widen into nothing.
+          viewModeButtons={false}
           filePath={diff.path}
           status={status}
           isStaged={isStaged}