@kabmo-labs/kabmo 0.7.0 → 0.9.0

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

@@ -21,6 +21,7 @@ import {
   EDITOR_MIN_FONT_SIZE,
 } from '@/shared/lib/code/editor/typography';
 import { useEditorFontStack } from '@/client/hooks/editor/font';
+import { useEditorTheme } from '@/client/hooks/editor/theme';
 import { MOBILE_SCROLL_POSITIONS_KEY } from '@/shared/lib/workspace/scroll-positions';
 import { ViewerSurface, hasViewerSurface } from '@/client/components/workspace/editor/viewers/dispatch';
 import { BINARY_VIEWERS, RENDERED_VIEWERS, VIEWER_LABELS, viewerKindFor } from '@/shared/lib/fs/document-kind';
@@ -49,6 +50,7 @@ export function MobileFullEditor({ file, missing = false, onClose, onFileSaved,
   const [fontSize, setFontSize] = useState(EDITOR_DEFAULT_FONT_SIZE);
   const [wordWrap, setWordWrap] = useState(true);
   const editorFontFamily = useEditorFontStack();
+  const editorTheme = useEditorTheme();
 
   const isMd = viewerKind === 'markdown';
   // A byte viewer (image, PDF, DOCX, workbook) owns the whole surface and has
@@ -76,6 +78,12 @@ export function MobileFullEditor({ file, missing = false, onClose, onFileSaved,
     missing,
   });
 
+  /**
+   * The code surface's scroller, which belongs to CodeMirror and appears only
+   * once its view mounts.
+   */
+  const [codeScroller, setCodeScroller] = useState<HTMLElement | null>(null);
+
   // Closing and reopening the same file is a remount, so the offset is restored
   // from the session's own state — the phone shows one file at a time, and its
   // key is that file's path (a rendered view keeps its own offset, as on the
@@ -88,6 +96,9 @@ export function MobileFullEditor({ file, missing = false, onClose, onFileSaved,
     // and the desktop drops entries when a tab closes — against ids that mean
     // nothing here.
     slot: MOBILE_SCROLL_POSITIONS_KEY,
+    // The code surface's scroller belongs to CodeMirror and appears only once
+    // its view mounts; the markdown preview owns its own container.
+    element: isMd && isPreview ? undefined : codeScroller,
   });
 
   // A search row on the phone opens this full-screen editor, so the hand-off
@@ -135,9 +146,15 @@ export function MobileFullEditor({ file, missing = false, onClose, onFileSaved,
   // The sheet's own list, from the LIVE buffer — the same derivation the
   // desktop section uses, so the two cannot disagree about what a state means.
   // A byte viewer has no text buffer to scan, which is its own sentence.
-  const { symbols: outlineSymbols, notice: outlineNotice } = useOutlineView({
+  const {
+    symbols: outlineSymbols,
+    total: outlineTotal,
+    truncated: outlineTruncated,
+    notice: outlineNotice,
+  } = useOutlineView({
     content,
     language: lang,
+    path: file.path ?? null,
     state: byteViewer ? 'not-a-document' : editor.loadError ? 'error' : editor.loaded ? 'ready' : 'loading',
     note: byteViewer
       ? `${VIEWER_LABELS[viewerKind]} files have no text outline.`
@@ -148,6 +165,7 @@ export function MobileFullEditor({ file, missing = false, onClose, onFileSaved,
     <div
       className="fixed inset-x-0 top-0 h-dvh z-[60] bg-paper flex flex-col font-mono text-xs select-none"
       {...drop.dropProps}
+      {...drop.captureDropProps}
     >
       <EditorDropOverlay visible={drop.isDragging} />
       
@@ -208,7 +226,9 @@ export function MobileFullEditor({ file, missing = false, onClose, onFileSaved,
           content={editor.content}
           revision={editor.revision}
         />
-      ) : (
+      ) : editor.isLoading || editor.unsupported || editor.loadError || (isMd && isPreview) ? (
+        // The states that draw their own scrolling content — and the markdown
+        // preview, which is a document, not an editor — share one scroller.
         <div
           ref={scroll.ref}
           onScroll={scroll.onScroll}
@@ -233,7 +253,7 @@ export function MobileFullEditor({ file, missing = false, onClose, onFileSaved,
               <span className="text-xs text-error font-sans">Could not read {file.name}</span>
               <span className="text-[11px] text-ink/50 font-mono break-all">{editor.loadError}</span>
             </div>
-          ) : isMd && isPreview ? (
+          ) : (
             /* Markdown Preview Mode — styled by `.prose-content` (the chat
                timeline's system), see the desktop editor for why there is no
                `prose` wrapper. */
@@ -244,42 +264,41 @@ export function MobileFullEditor({ file, missing = false, onClose, onFileSaved,
                 scope={{ path: file.path ?? file.name, root: file.root, repo: file.repo }}
               />
             </div>
-          ) : (
-            /* Code Editor with Line Numbers - Desktop styled: gutter bg-canvas border-r border-ink/10 */
-            <CodeSurface
-              ref={surfaceRef}
-              value={content}
-              onValueChange={editor.onChange}
-              language={lang}
-              wordWrap={wordWrap}
-              marks={revealMarks}
-              currentMark={currentMark}
-              rootClassName="flex min-h-full bg-paper"
-              // The gutter auto-sizes to its widest number rather than taking a
-              // fixed width: the numbers scale with the zoom control, and a
-              // pinned `w-10` clipped a 3-digit line number at 18px.
-              gutterClassName="flex flex-col text-right pr-2 select-none text-ink/30 bg-canvas border-r border-ink/10 font-mono flex-shrink-0"
-              gutterLineClassName="min-w-[1.5rem]"
-              gutterStyle={{
-                fontSize,
-                paddingTop: 12,
-                paddingBottom: 12,
-                lineHeight: EDITOR_LINE_HEIGHT,
-                fontFamily: editorFontFamily,
-              }}
-              editorWrapperClassName="flex-1 p-3 overflow-x-auto min-w-0 bg-paper text-ink code-surface"
-              editorClassName="focus:outline-none"
-              editorStyle={{
-                fontFamily: editorFontFamily,
-                fontSize,
-                lineHeight: EDITOR_LINE_HEIGHT,
-                backgroundColor: 'transparent',
-                minHeight: '100%',
-                color: 'var(--theme-ink)',
-              }}
-            />
           )}
         </div>
+      ) : (
+        /* The code surface owns its own scroller (CodeMirror's), so it is NOT
+           wrapped in one: an outer `overflow-auto` resolves the editor's
+           `height: 100%` against an auto-height box, so the editor grew to the
+           document's full height and the panel had nothing to scroll. */
+        <CodeSurface
+          ref={surfaceRef}
+          value={content}
+          onValueChange={editor.onChange}
+          language={lang}
+          wordWrap={wordWrap}
+          documentKey={fileKey}
+          marks={revealMarks}
+          currentMark={currentMark}
+          onScroller={setCodeScroller}
+          scrollTestId="editor-scroller"
+          // No `bg-paper`: an explicit editor theme paints its own surface, and
+          // the panel's colour under it would be a border of the wrong shade.
+          // `select-text` is the desktop pane's rule, and it matters more here:
+          // the sheet's own root is `select-none` (it is a header-and-status
+          // layout), and the editor is now a `contenteditable` whose selection
+          // and caret are the BROWSER's business — an inherited `user-select:
+          // none` is the one thing that can take that away on a phone.
+          className="flex-1 min-h-0 text-ink select-text"
+          themeVars={editorTheme.vars}
+          themes={editorTheme.themes}
+          padding={12}
+          style={{
+            fontFamily: editorFontFamily,
+            fontSize: `${fontSize}px`,
+            lineHeight: EDITOR_LINE_HEIGHT,
+          }}
+        />
       )}
 
       {/* The outline is a floating control rather than a panel section: on a
@@ -289,7 +308,13 @@ export function MobileFullEditor({ file, missing = false, onClose, onFileSaved,
           target over the content, list in a sheet. Hidden for a byte viewer,
           which has no text to outline. */}
       {!byteViewer && (
-        <MobileOutlineButton path={file.path ?? null} symbols={outlineSymbols} emptyNotice={outlineNotice} />
+        <MobileOutlineButton
+          path={file.path ?? null}
+          symbols={outlineSymbols}
+          total={outlineTotal}
+          truncated={outlineTruncated}
+          emptyNotice={outlineNotice}
+        />
       )}
 
       <EditorStatusBar

package/src/client/components/mobile/mobile-right-sidebar/OutlineButton.test.tsx

@@ -0,0 +1,137 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The phone's outline sheet.
+ *
+ * Same two facts the desktop section shows, on a surface that cannot share its
+ * markup (the drawer has no room for a section pinned to a floor, so this is a
+ * floating button and a modal). Both are pinned here because each fails
+ * silently:
+ *
+ * - **the button names the TOTAL**, so a truncated list cannot read as "this
+ *   file has 500 symbols";
+ * - **a truncated list says what it is not showing**, in the sheet, where the
+ *   reader is actually looking.
+ *
+ * Rendered with `h()` against happy-dom. `Modal` is the shared shell every
+ * dialog in the app uses, so opening one here is the same code path a phone
+ * takes.
+ */
+
+import { afterAll, afterEach, beforeAll, describe, expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import { h, render } from 'preact';
+import { act } from 'preact/test-utils';
+import { MobileOutlineButton } from '@/client/components/mobile/mobile-right-sidebar/OutlineButton';
+import { MAX_OUTLINE_ROWS, outlineTruncatedNotice } from '@/shared/lib/code/outline/rows';
+import type { OutlineSymbol } from '@/shared/lib/code/outline/types';
+import { installDomGlobals, restoreDomGlobals } from '@/test-support/pristine-globals';
+
+let container: HTMLElement;
+
+beforeAll(() => {
+  installDomGlobals(new Window({ url: 'http://localhost' }));
+});
+
+afterEach(() => {
+  if (container) {
+    render(null, container);
+    container.remove();
+  }
+});
+
+afterAll(() => {
+  restoreDomGlobals();
+});
+
+function symbols(count: number): OutlineSymbol[] {
+  return Array.from({ length: count }, (_, i) => ({
+    name: `fn${i}`,
+    kind: 'function' as const,
+    line: i + 1,
+    column: 0,
+    depth: 0,
+  }));
+}
+
+async function mount(props: {
+  symbols: OutlineSymbol[];
+  total?: number;
+  truncated?: boolean;
+  path?: string | null;
+  emptyNotice?: string;
+}): Promise<void> {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  await act(async () => {
+    render(
+      h(MobileOutlineButton, {
+        path: props.path === undefined ? 'src/a.ts' : props.path,
+        symbols: props.symbols,
+        total: props.total ?? props.symbols.length,
+        truncated: props.truncated ?? false,
+        emptyNotice: props.emptyNotice ?? 'No symbols found.',
+      }),
+      container,
+    );
+  });
+}
+
+function trigger(): HTMLButtonElement {
+  const el = container.querySelector('button[aria-label^="Outline"]');
+  if (!el) throw new Error('no outline trigger rendered');
+  return el as HTMLButtonElement;
+}
+
+async function open(): Promise<void> {
+  await act(async () => {
+    trigger().click();
+  });
+  for (let i = 0; i < 4; i += 1) await act(async () => {});
+}
+
+describe('MobileOutlineButton', () => {
+  test('no path means no control — an attachment chip has nothing to outline', async () => {
+    await mount({ symbols: symbols(3), path: null });
+
+    expect(container.querySelector('button[aria-label^="Outline"]')).toBeNull();
+  });
+
+  test('the trigger names the TOTAL, not the window', async () => {
+    await mount({ symbols: symbols(MAX_OUTLINE_ROWS), total: 63_618, truncated: true });
+
+    // The accessible name is what a screen reader announces and what a spec
+    // addresses; a window count here would describe the panel, not the file.
+    expect(trigger().getAttribute('aria-label')).toBe('Outline (63618 symbols)');
+  });
+
+  test('a truncated sheet renders the window and says what it is not showing', async () => {
+    await mount({ symbols: symbols(MAX_OUTLINE_ROWS), total: 700, truncated: true });
+    await open();
+
+    const rows = container.querySelectorAll('button[aria-label*=", line "]');
+    expect(rows).toHaveLength(MAX_OUTLINE_ROWS);
+    expect(container.textContent).toContain(outlineTruncatedNotice(700));
+    // The header count reads window/total, so it cannot be mistaken for the
+    // number of symbols the file has.
+    expect(container.textContent).toContain(`${MAX_OUTLINE_ROWS}/700`);
+  });
+
+  test('a complete list shows no truncation sentence', async () => {
+    await mount({ symbols: symbols(4) });
+    await open();
+
+    expect(container.querySelectorAll('button[aria-label*=", line "]')).toHaveLength(4);
+    expect(container.textContent).not.toContain('Showing the first');
+  });
+
+  test('an empty list prints the reason it is empty, not a blank sheet', async () => {
+    await mount({ symbols: [], emptyNotice: 'This tab has no outline.' });
+    await open();
+
+    expect(container.textContent).toContain('This tab has no outline.');
+  });
+});

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

@@ -27,15 +27,21 @@ import { Modal } from '@/client/components/common/Modal';
 import { OutlineKindIcon, outlineKindLabel } from '@/client/components/common/outline-kind-icon';
 import { setLineReveal } from '@/client/lib/line-reveal';
 import type { OutlineSymbol } from '@/shared/lib/code/outline/types';
+import { outlineTruncatedNotice } from '@/shared/lib/code/outline/rows';
 
 interface MobileOutlineButtonProps {
   path: string | null;
+  /** The rows to render — already bounded by the hook. */
   symbols: OutlineSymbol[];
+  /** Every symbol found, so the button can say when it is showing a window. */
+  total: number;
+  /** True when `symbols` is only the first `MAX_OUTLINE_ROWS`. */
+  truncated: boolean;
   /** Why there is nothing to list, when `symbols` is empty. */
   emptyNotice: string;
 }
 
-export function MobileOutlineButton({ path, symbols, emptyNotice }: MobileOutlineButtonProps) {
+export function MobileOutlineButton({ path, symbols, total, truncated, emptyNotice }: MobileOutlineButtonProps) {
   const [open, setOpen] = useState(false);
   if (!path) return null;
 
@@ -52,7 +58,7 @@ export function MobileOutlineButton({ path, symbols, emptyNotice }: MobileOutlin
         <button
           type="button"
           onClick={() => setOpen(true)}
-          aria-label={`Outline (${symbols.length} symbols)`}
+          aria-label={`Outline (${total} symbols)`}
           title="Outline"
           className="flex h-9 w-9 items-center justify-center rounded-full border border-ink/20 bg-paper text-ink/60 shadow-sm transition-all hover:bg-ink/5 hover:text-ink active:scale-95"
         >
@@ -69,7 +75,9 @@ export function MobileOutlineButton({ path, symbols, emptyNotice }: MobileOutlin
             <div className="flex min-w-0 items-center gap-2">
               <ListTree size={15} className="flex-shrink-0 text-ink/50" />
               <span className="text-sm font-medium">Outline</span>
-              <span className="font-mono text-[11px] text-ink/40">{symbols.length}</span>
+              <span className="font-mono text-[11px] text-ink/40">
+                {truncated ? `${symbols.length}/${total}` : total}
+              </span>
             </div>
           }
         >
@@ -92,6 +100,9 @@ export function MobileOutlineButton({ path, symbols, emptyNotice }: MobileOutlin
                 </button>
               ))
             )}
+            {truncated && (
+              <div className="px-4 py-2 text-[11px] italic text-ink/40">{outlineTruncatedNotice(total)}</div>
+            )}
           </div>
         </Modal>
       )}

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

@@ -1,10 +1,7 @@
-import { Download, Info, Monitor, Settings } from 'lucide-preact';
+import { Info, Monitor, Settings } from 'lucide-preact';
 import packageJson from '@/../package.json';
-import {
-  shellDownloadLabel,
-  shellDownloadShortLabel,
-  type ShellDownload,
-} from '@/client/hooks/ui/updates/shell-download';
+import type { ShellDownload } from '@/client/hooks/ui/updates/shell-download';
+import { ShellUpdateButton } from '@/client/components/common/shell-update-button';
 
 interface MobileSessionFooterProps {
   onSettings: () => void;
@@ -49,27 +46,18 @@ export function MobileSessionFooter({
           <span>About</span>
         </button>
         {shellDownload && (
-          // Directly after About, matching the desktop footer. An `<a>`, not a
-          // button: the download is the browser's (or the WebView's) job, and
-          // `target="_blank"` hands it to the system browser so the console is
-          // not replaced by a file download.
+          // Directly after About, matching the desktop footer.
           //
           // The visible word is the OFFER, not the file type: `APK` told a
           // reader what the bytes are but not what the control does, and on a
           // browser it is the only place the native shell is ever mentioned. An
           // iOS update is an IPA, so the word names the platform instead of a
           // file extension.
-          <a
-            href={shellDownload.url}
-            target="_blank"
-            rel="noopener noreferrer"
-            title={shellDownloadLabel(shellDownload)}
-            aria-label={shellDownloadLabel(shellDownload)}
-            className="flex items-center space-x-1 hover:text-ink transition-colors"
-          >
-            <Download size={14} />
-            <span>{shellDownloadShortLabel(shellDownload)}</span>
-          </a>
+          //
+          // The shared control decides link-versus-button: a desktop shell that
+          // knows its architecture installs the artifact itself, and a link
+          // there would leave the file in Downloads.
+          <ShellUpdateButton download={shellDownload} variant="label" />
         )}
         {onDesktopToggle && (
           <button

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

@@ -1,17 +1,21 @@
 import { X } from 'lucide-preact';
 import { BrandWordmark } from '@/client/components/common/brand-wordmark';
 import { titlebarPaddingLeft, titlebarPaddingRight } from '@/shared/lib/ui/titlebar';
+import { dragRegionProps, titlebarInsetLeft } from '@/client/lib/desktop/titlebar';
 
 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 flex-shrink-0 bg-canvas titlebar-drag-region select-none"
+      {...dragRegionProps()}
       style={{
         height: 'calc(3.5rem + env(safe-area-inset-top, 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),
+        // 14px did not — and the SHELL's own inset, because a desktop shell
+        // window narrowed past the layout breakpoint shows this drawer, whose
+        // wordmark would otherwise sit under macOS's traffic lights.
+        paddingLeft: titlebarInsetLeft(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),

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

@@ -4,6 +4,7 @@ import { useSearchParams } from '@/client/lib/router/search-params';
 import { MobileSessionRow } from '@/client/components/mobile/mobile-session-sidebar/SessionRow';
 import { SubagentList } from '@/client/components/common/subagent-list';
 import { WorkspaceOptionsMenu } from '@/client/components/common/workspace-options-menu';
+import { useWorktreeDialog } from '@/client/components/mobile/mobile-session-sidebar/WorktreeDialog';
 import { useShowMore } from '@/client/hooks/ui/show-more';
 import { useExpandedSessions } from '@/client/hooks/workspace/expanded-sessions';
 import { useWorkspaceFolderActions } from '@/client/hooks/workspace/workspace-folder-actions';
@@ -25,6 +26,8 @@ interface MobileSessionCategoryProps {
   activeSessionId: number | string | null;
   onSelectSession: (id: number | string) => void;
   onNewSessionForFolder: (folderId: number) => void;
+  /** Start a chat in a worktree made from this folder. */
+  onNewWorktreeSession?: (folderId: number, worktreePath: string) => void;
   isExpanded: boolean;
   onToggleExpand: () => void;
   showArchived?: boolean;
@@ -43,6 +46,7 @@ export function MobileSessionCategory({
   activeSessionId,
   onSelectSession,
   onNewSessionForFolder,
+  onNewWorktreeSession,
   isExpanded,
   onToggleExpand,
   showArchived = false,
@@ -53,6 +57,11 @@ export function MobileSessionCategory({
   onCancelWait,
 }: MobileSessionCategoryProps) {
   const { visibleCount, showMore, showLess, canShowLess } = useShowMore();
+  // The phone's folder row opens the same dialog the desktop one does. Its state
+  // lives in a hook so this row stays under the size ceiling.
+  const worktreeDialog = useWorktreeDialog(folder, (worktreePath) =>
+    onNewWorktreeSession?.(folder.id, worktreePath),
+  );
   const { refresh } = useSidebarData();
   const { expandedSessionIds, toggleSession } = useExpandedSessions();
   // The viewed transcript, so its session row dims while a roster entry is
@@ -223,6 +232,11 @@ export function MobileSessionCategory({
                   variant="mobile"
                   isPinned={folder.isPinned}
                   onOpenFolder={onOpenFolder}
+                  onNewWorktree={
+                    onNewWorktreeSession && folder.project_path
+                      ? () => { setShowMenu(false); worktreeDialog.open(); }
+                      : undefined
+                  }
                   onSelectSessions={
                     onStartSessionSelection
                       ? () => { setShowMenu(false); onStartSessionSelection(folder.id); }
@@ -326,6 +340,8 @@ export function MobileSessionCategory({
         onClose={sessionDelete.cancelDelete}
         onConfirm={() => void sessionDelete.confirmDelete()}
       />
+
+      {worktreeDialog.dialog}
     </div>
   );
 }

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

@@ -10,6 +10,8 @@ interface MobileSessionListProps {
   sessionStatus: Record<string, 'stream' | 'finish' | 'abort'>;
   onSelectSession: (id: number | string) => void;
   onNewSessionForFolder: (folderId: number) => void;
+  /** Start a chat in a worktree made from this folder. */
+  onNewWorktreeSession?: (folderId: number, worktreePath: string) => void;
   onToggleFolder: (folderId: number) => void;
   /** Surfaces a refused folder action (the reveal endpoint's own reason). */
   onToast?: (message: string, type?: 'success' | 'error') => void;
@@ -28,6 +30,7 @@ export function MobileSessionList({
   sessionStatus,
   onSelectSession,
   onNewSessionForFolder,
+  onNewWorktreeSession,
   onToggleFolder,
   onToast,
   batch,
@@ -55,6 +58,7 @@ export function MobileSessionList({
             activeSessionId={activeSessionId}
             onSelectSession={onSelectSession}
             onNewSessionForFolder={onNewSessionForFolder}
+            onNewWorktreeSession={onNewWorktreeSession}
             isExpanded={expandedFolders[folder.id] ?? true}
             onToggleExpand={() => onToggleFolder(folder.id)}
             showArchived={showArchived}

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

@@ -4,6 +4,7 @@ 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';
 
 export interface MobileSessionRowProps {
   session: SessionItemData;
@@ -175,6 +176,10 @@ export function MobileSessionRow({
                   waiting for {waitingFor?.title ?? 'another session'}
                 </span>
               )}
+              {/* The same chip the desktop row draws, from the same field on the
+                  row payload — one layout cannot be the only one that says where
+                  the chat writes. */}
+              {session.worktree ? <WorktreeBadge worktree={session.worktree} /> : null}
             </span>
           </div>
 

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

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The New Worktree dialog as a phone folder row opens it.
+ *
+ * Split out because the row was at the file-size ceiling and because the
+ * dialog's state (open, and which folder) belongs to the dialog rather than to a
+ * row that also draws sessions, a `⋯` menu and a delete confirmation. The row
+ * calls the hook, hands `open` to its menu row and renders `dialog` at its tail —
+ * the menu row has to stay INSIDE the dropdown, which is why this returns the
+ * modal rather than the trigger.
+ */
+
+import { useState } from 'preact/hooks';
+import { NewWorktreeModal } from '@/client/components/workspace/worktree-modal/index';
+import type { WorkspaceFolderData } from '@/shared/types';
+
+export interface WorktreeDialogHandle {
+  open: () => void;
+  /** Rendered at the row's tail; null until the dialog has been opened once. */
+  dialog: preact.JSX.Element | null;
+}
+
+export function useWorktreeDialog(
+  folder: WorkspaceFolderData,
+  onCreated: (worktreePath: string) => void,
+): WorktreeDialogHandle {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return {
+    open: () => setIsOpen(true),
+    dialog: isOpen ? (
+      <NewWorktreeModal
+        isOpen
+        onClose={() => setIsOpen(false)}
+        root={folder.project_path ?? null}
+        folderId={folder.id}
+        folderName={folder.name}
+        onCreated={(created) => {
+          setIsOpen(false);
+          onCreated(created.path);
+        }}
+      />
+    ) : null,
+  };
+}

package/src/client/components/mobile/worktree-session.ts

@@ -0,0 +1,51 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Starting a chat inside a worktree, from either layout's sidebar.
+ *
+ * Desktop and phone do the same three things in the same order, and the order is
+ * what makes it work: prewarm the child in the WORKTREE cwd (not the project's),
+ * mint the pending session, write its target BEFORE the URL names it, then
+ * navigate. Writing the target afterwards would leave the composer drawing the
+ * folder while the send path already had its ref armed for something else — the
+ * one outcome the pick exists to prevent.
+ *
+ * Extracted so both sidebars call one function rather than repeating a sequence
+ * whose middle step is invisible when it is wrong.
+ */
+
+import { startPendingSession } from '@/client/hooks/chat/omp/pending-sessions';
+import { triggerSessionPrewarm } from '@/shared/lib/omp/session/prewarm';
+import { setSessionKey } from '@/shared/lib/workspace/session-state/store';
+import { SPAWN_TARGET_KEY } from '@/client/hooks/chat/timeline/spawn-target';
+
+export interface WorktreeSessionDeps {
+  setSearchParams: (fn: (prev: URLSearchParams) => URLSearchParams, options?: { replace?: boolean }) => void;
+  /** Called after the navigation — the phone closes its drawer here. */
+  afterNavigate?: () => void;
+}
+
+/**
+ * Open a pending chat in `worktreePath`, scoped to `folderId`.
+ * Returns the pending session's id, so a caller can report or follow it.
+ */
+export function startWorktreeSession(
+  deps: WorktreeSessionDeps,
+  folderId: number,
+  worktreePath: string,
+): string {
+  triggerSessionPrewarm(worktreePath);
+  const pendingId = startPendingSession(folderId);
+  setSessionKey(pendingId, SPAWN_TARGET_KEY, { folderId, worktreePath });
+  deps.setSearchParams((prev) => {
+    const next = new URLSearchParams(prev);
+    next.set('sessionId', pendingId);
+    next.set('folderId', folderId.toString());
+    return next;
+  }, { replace: true });
+  deps.afterNavigate?.();
+  return pendingId;
+}

package/src/client/components/settings/Modal.tsx

@@ -9,7 +9,9 @@ import { useRestartKabmo } from '@/client/hooks/settings/restart-kabmo';
 import { applyDocumentTheme } from '@/client/hooks/ui/theme';
 import { DEFAULT_THEME_ID } from '@/shared/lib/theme/catalog';
 import { EDITOR_DEFAULT_FONT_FAMILY } from '@/shared/lib/code/editor/typography';
+import { EDITOR_DEFAULT_THEME_ID } from '@/shared/lib/code/editor/themes';
 import { EDITOR_FONT_CHANGED_EVENT } from '@/client/hooks/editor/font';
+import { EDITOR_THEME_CHANGED_EVENT } from '@/client/hooks/editor/theme';
 import { useKabmoEvent } from '@/client/hooks/ui/window-event';
 import { SETTINGS_CATEGORIES, SettingsSidebar } from '@/client/components/settings/Sidebar';
 import { AppearanceSettings } from '@/client/components/settings/categories/AppearanceSettings';
@@ -41,6 +43,7 @@ export interface SettingsModalProps {
 const DEFAULT_SETTINGS: SettingsState = {
   theme: DEFAULT_THEME_ID,
   editorFont: EDITOR_DEFAULT_FONT_FAMILY,
+  editorTheme: EDITOR_DEFAULT_THEME_ID,
   autoSessionTitle: true,
   soundAlerts: true,
   chatCompletionSound: true,
@@ -120,6 +123,11 @@ export function SettingsModal({
       if (typeof window !== 'undefined' && next.editorFont !== prev.editorFont) {
         window.dispatchEvent(new CustomEvent(EDITOR_FONT_CHANGED_EVENT, { detail: next.editorFont }));
       }
+      // Same rule for the editor's colour theme: it is visual, and every open
+      // editor subscribes rather than reading the boot-time `appSettings`.
+      if (typeof window !== 'undefined' && next.editorTheme !== prev.editorTheme) {
+        window.dispatchEvent(new CustomEvent(EDITOR_THEME_CHANGED_EVENT, { detail: next.editorTheme }));
+      }
       // Only the keys this update actually touched are persisted. The modal
       // holds a full `SettingsState` snapshot taken when it opened, so writing
       // the whole object back would also republish every value it read at that