ompchamber 3.1.1 → 3.3.0

package/src/client/components/mobile/mobile-session-sidebar/SessionRow.test.ts

@@ -0,0 +1,84 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The mobile session row's status slot.
+ *
+ * The phone must draw the same cue the desktop row does: a session whose agent
+ * is blocked on a question shows the question mark, NOT the run spinner. The
+ * child is still mid-run while it waits (`streamStatus` stays `stream`), so a
+ * row that only knew the stream state drew a spinner over a turn that was
+ * actually waiting for the user — the bug this pins.
+ */
+
+import { afterAll, beforeAll, describe, expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import { h, render } from 'preact';
+import { act } from 'preact/test-utils';
+import { MobileSessionRow } from '@/client/components/mobile/mobile-session-sidebar/SessionRow';
+import type { MobileSessionRowProps } from '@/client/components/mobile/mobile-session-sidebar/SessionRow';
+import type { SessionItemData } from '@/shared/types';
+
+let container: HTMLElement;
+
+const DOM_GLOBALS = ['window', 'document', 'navigator', 'Node', 'Element', 'HTMLElement', 'HTMLInputElement', 'Event', 'MouseEvent', 'KeyboardEvent'] as const;
+
+beforeAll(() => {
+  const win = new Window({ url: 'http://localhost' });
+  const target = globalThis as unknown as Record<string, unknown>;
+  for (const key of DOM_GLOBALS) 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) delete target[key];
+});
+
+const session: SessionItemData = { id: 's1', folder_id: 1, title: 'hello world' };
+
+async function mount(overrides: Partial<MobileSessionRowProps>) {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  await act(async () => {
+    render(h(MobileSessionRow, {
+      session,
+      isActive: false,
+      timeAgo: '1m',
+      onSelect: () => {},
+      onArchive: () => {},
+      ...overrides,
+    }), container);
+  });
+  return container;
+}
+
+function svgClasses(el: HTMLElement) {
+  return Array.from(el.querySelectorAll('svg')).map((s) => s.getAttribute('class') ?? '').join('|');
+}
+
+describe('mobile session row status slot', () => {
+  test('awaiting input beats the stream spinner', async () => {
+    const el = await mount({ status: 'stream', awaitingInput: true });
+    expect(svgClasses(el)).toContain('circle-question-mark');
+    expect(svgClasses(el)).not.toContain('animate-spin');
+  });
+
+  test('stream alone still spins', async () => {
+    const el = await mount({ status: 'stream' });
+    expect(svgClasses(el)).toContain('animate-spin');
+    expect(svgClasses(el)).not.toContain('circle-question-mark');
+  });
+
+  test('terminal badge draws the check', async () => {
+    const el = await mount({ status: 'finish' });
+    expect(svgClasses(el)).toContain('lucide-check');
+  });
+
+  test('no status draws no glyph', async () => {
+    const el = await mount({});
+    const slot = el.querySelector('span.w-4');
+    expect(slot?.querySelector('svg')).toBeNull();
+  });
+});

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

@@ -1,4 +1,4 @@
-import { Archive, ArchiveRestore, Check, Loader2, Pencil } from 'lucide-preact';
+import { Archive, ArchiveRestore, Check, ChevronDown, ChevronRight, CircleQuestionMark, Loader2, Pencil } from 'lucide-preact';
 import type { SessionItemData } from '@/shared/types';
 import { useInlineRename } from '@/client/hooks/ui/inline-rename';
 
@@ -6,9 +6,14 @@ export interface MobileSessionRowProps {
   session: SessionItemData;
   isActive: boolean;
   status?: 'stream' | 'finish' | 'abort';
+  /** The session's agent is blocked on a question until the user answers it. */
+  awaitingInput?: boolean;
   /** Relative age of the session, or null when no usable timestamp exists. */
   timeAgo: string | null;
-  showTreeGlyph?: boolean;
+  /** The session has a subagent roster (on disk or live), so it can be expanded. */
+  hasSubagents?: boolean;
+  isExpanded?: boolean;
+  onToggleExpand?: () => void;
   onSelect: () => void;
   onArchive: () => void;
   onRename?: (name: string) => void;
@@ -18,8 +23,11 @@ export function MobileSessionRow({
   session,
   isActive,
   status,
+  awaitingInput = false,
   timeAgo,
-  showTreeGlyph = false,
+  hasSubagents = false,
+  isExpanded = false,
+  onToggleExpand,
   onSelect,
   onArchive,
   onRename,
@@ -34,6 +42,18 @@ export function MobileSessionRow({
     handleBlur,
   } = useInlineRename(session.title, onRename);
 
+  // The roster toggle is the row's LAST element, so its glyph lands in the same
+  // column as the folder header's expand chevron — one vertical line of
+  // disclosure controls down the drawer. The toggle is a SIBLING of the select
+  // button, never a child: a button inside a button is invalid and the browser
+  // reparents it.
+  //
+  // Touch has no hover to reveal a hidden toggle the way desktop does, so it is
+  // pinned whenever the row has a roster; a hidden one would leave the roster
+  // unreachable on a phone.
+  const showChevron = hasSubagents && Boolean(onToggleExpand);
+  const title = session.title.charAt(0).toUpperCase() + session.title.slice(1);
+
   if (isEditing) {
     return (
       <div className="w-full rounded-lg flex items-center bg-ink/10">
@@ -59,17 +79,23 @@ export function MobileSessionRow({
       <button
         type="button"
         onClick={onSelect}
-        className="flex-1 text-left px-3 py-2 flex items-center justify-between min-w-0"
+        className="flex-1 text-left pl-2 pr-3 py-2 flex items-center justify-between min-w-0"
       >
-        <div className="flex items-center space-x-1.5 min-w-0 pr-2">
+        <div className="flex items-center min-w-0 pr-2">
+          {/* Status slot, 16px at the same x as the folder header's icon slot,
+              so the left column reads as one line. Waiting on an answer
+              outranks the run spinner — the spinner says work is happening,
+              the question mark says it is YOUR turn (desktop parity). */}
           <span className="w-4 flex-shrink-0 flex items-center justify-center">
-            {status === 'stream' && <Loader2 size={13} className="text-ink/50 animate-spin" />}
-            {(status === 'finish' || status === 'abort') && <Check size={13} className="text-ink/50" />}
-          </span>
-          {showTreeGlyph && <span className="text-ink/40 text-xs flex-shrink-0 font-mono">&gt;</span>}
-          <span className="text-xs truncate leading-snug">
-            {session.title.charAt(0).toUpperCase() + session.title.slice(1)}
+            {awaitingInput ? (
+              <CircleQuestionMark size={13} className="text-ink/70 animate-pulse" />
+            ) : status === 'stream' ? (
+              <Loader2 size={13} className="text-ink/50 animate-spin" />
+            ) : status ? (
+              <Check size={13} className="text-ink/50" />
+            ) : null}
           </span>
+          <span className="text-xs truncate leading-snug ml-2">{title}</span>
         </div>
 
         <span className="text-[11px] text-ink/45 font-mono flex-shrink-0 ml-2">{timeAgo ?? ''}</span>
@@ -86,14 +112,35 @@ export function MobileSessionRow({
         </button>
       )}
 
+      {/* A row WITHOUT a roster toggle still has to keep the toggle's column
+          empty, or its archive glyph would sit where the toggle is and the
+          trailing icons would step in and out row to row. This `mr-1` is what
+          reserves that column: it moves the 14px glyph's centre from x=363 to
+          x=359, the exact x the toggle uses on a row that has one. */}
       <button
         type="button"
         onClick={onArchive}
         title={session.is_archived === 1 ? 'Unarchive session' : 'Archive session'}
-        className="flex-shrink-0 p-2 mr-1 text-ink/35 hover:text-ink rounded-lg cursor-pointer"
+        className={`flex-shrink-0 p-2 text-ink/35 hover:text-ink rounded-lg cursor-pointer ${showChevron ? '' : 'mr-1'}`}
       >
         {session.is_archived === 1 ? <ArchiveRestore size={14} /> : <Archive size={14} />}
       </button>
+
+      {/* Last element, so its glyph sits in the folder header's chevron column.
+          `p-1.5 mr-1.5` centres a 14px glyph on that column while keeping a
+          touch-sized tap target. */}
+      {showChevron && (
+        <button
+          type="button"
+          onClick={onToggleExpand}
+          title={isExpanded ? 'Collapse subagents' : 'Expand subagents'}
+          aria-expanded={isExpanded}
+          aria-label={isExpanded ? 'Collapse subagents' : 'Expand subagents'}
+          className="flex-shrink-0 p-1.5 mr-1.5 flex items-center justify-center text-ink/50 hover:text-ink rounded-lg cursor-pointer"
+        >
+          {isExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+        </button>
+      )}
     </div>
   );
 }

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

@@ -1,5 +1,5 @@
 import type { RefObject } from 'preact/compat';
-import { Archive, ArrowUpDown, Calendar, Check, FolderPlus, Plus, Search, X } from 'lucide-preact';
+import { Archive, ArrowUpDown, Calendar, Check, FolderPlus, Plus, RefreshCw, Search, X } from 'lucide-preact';
 import type { SessionSortOption } from '@/shared/types';
 import { SortMenu } from '@/client/components/common/sort-menu';
 
@@ -12,6 +12,9 @@ interface MobileSessionToolbarProps {
   onNewSession: () => void;
   onNewWorkspace: () => void;
   onScheduler: () => void;
+  onRefresh: () => void;
+  /** True while the user-initiated refresh is in flight — spins the icon. */
+  refreshing: boolean;
   onToggleOptions: () => void;
   onSortChange: (opt: SessionSortOption) => void;
   onResetSort: () => void;
@@ -30,6 +33,8 @@ export function MobileSessionToolbar({
   onNewSession,
   onNewWorkspace,
   onScheduler,
+  onRefresh,
+  refreshing,
   onToggleOptions,
   onSortChange,
   onResetSort,
@@ -74,6 +79,21 @@ export function MobileSessionToolbar({
           <Calendar size={16} strokeWidth={1.8} />
         </button>
 
+        {/* Refresh sessions button — same action the desktop toolbar's
+            RefreshCw performs: refetch the session list from the server.
+            The icon spins for the duration of that fetch, so the click has a
+            visible end; `refreshing` is raised only by this button's own load. */}
+        <button
+          type="button"
+          onClick={onRefresh}
+          className="w-9.5 h-9.5 rounded-xl border border-ink/15 bg-paper hover:bg-ink/5 active:scale-95 text-ink/80 hover:text-ink flex items-center justify-center transition-all flex-shrink-0 cursor-pointer shadow-xs"
+          title="Refresh sessions"
+          aria-label="Refresh sessions"
+          aria-busy={refreshing}
+        >
+          <RefreshCw size={15} strokeWidth={1.8} className={refreshing ? 'animate-spin' : undefined} />
+        </button>
+
         {/* Sort & Filter Dropdown */}
         <div className="relative flex-shrink-0" ref={optionsRef}>
           <button

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

@@ -6,6 +6,8 @@ import { diffSettings } from '@/shared/lib/settings/diff';
 import { useChamberSettingsWriter } from '@/client/hooks/settings/use-chamber-setting';
 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_FONT_CHANGED_EVENT } from '@/client/hooks/editor/font';
 import { useChamberEvent } from '@/client/hooks/ui/window-event';
 import { SETTINGS_CATEGORIES, SettingsSidebar } from '@/client/components/settings/Sidebar';
 import { AppearanceSettings } from '@/client/components/settings/categories/AppearanceSettings';
@@ -33,28 +35,12 @@ export interface SettingsModalProps {
 }
 
 const DEFAULT_SETTINGS: SettingsState = {
-  binaryPath: '/Users/you/.bun/bin/omp',
-  showUpdateNotifications: true,
-  agentControlTool: true,
-  ompChamberWebTool: true,
   theme: DEFAULT_THEME_ID,
-  fontSize: 'standard',
-  editorFont: 'JetBrains Mono',
-  streamResponses: true,
+  editorFont: EDITOR_DEFAULT_FONT_FAMILY,
   streamTransport: 'websocket',
   autoSessionTitle: true,
-  expandedThinking: true,
-  detailedToolCalls: false,
-  notificationsEnabled: true,
-  buildFailureAlert: true,
   soundAlerts: true,
   chatCompletionSound: true,
-  defaultWorkspacePath: '~/Projects/ompchamber',
-  tunnelEnabled: true,
-  tunnelSubdomain: 'omp-dev-preview',
-  activeProvider: 'claude',
-  autoApproveSafeCmds: true,
-  autoPatchErrors: true,
   followUpBehavior: 'queue',
   keybindingSend: 'Enter',
   keybindingNewLine: 'Shift + Enter',
@@ -84,7 +70,11 @@ export function SettingsModal({
     if (isOpen) {
       setActiveCategory(initialCategory);
       setAutoOpenAdd(autoOpenAddProvider);
-      setIsMobileDrilled(false);
+      // `autoOpenAdd` asks for the provider dialog, which a category renders
+      // inside its own detail pane. On a phone the modal would otherwise open
+      // inside a `display: none` subtree and never be seen, so the request also
+      // lands the user on the category screen it belongs to.
+      setIsMobileDrilled(autoOpenAddProvider);
       setSearchQuery('');
     }
   }, [isOpen, initialCategory, autoOpenAddProvider]);
@@ -106,6 +96,13 @@ export function SettingsModal({
       if (typeof document !== 'undefined' && next.theme) {
         applyDocumentTheme(next.theme);
       }
+      // The editor font is visual, so an open editor has to hear about the
+      // change now — `appSettings` is a boot-time prop and would only show it
+      // after a reload. Announced only when the value actually moved, so a
+      // re-render of an unrelated setting does not churn every editor's stack.
+      if (typeof window !== 'undefined' && next.editorFont !== prev.editorFont) {
+        window.dispatchEvent(new CustomEvent(EDITOR_FONT_CHANGED_EVENT, { detail: next.editorFont }));
+      }
       // 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
@@ -206,8 +203,19 @@ export function SettingsModal({
 
         {/* DESKTOP & MOBILE DETAIL VIEW */}
         <div className={`flex-1 flex-col h-full bg-paper overflow-hidden ${isMobileDrilled ? 'flex' : 'hidden md:flex'}`}>
-          {/* Header Bar */}
-          <div className="h-16 px-6 border-b border-ink/10 flex items-center justify-between flex-shrink-0 bg-paper">
+          {/* Header Bar. The height and padding carry the safe-area insets on a
+              phone: the modal is full-screen below `md`, so without them the
+              back button and the title sit under the status bar / notch, the
+              same way the mobile chrome (header, editor, diff) already avoids. */}
+          <div
+            className="px-6 border-b border-ink/10 flex items-center justify-between flex-shrink-0 bg-paper"
+            style={{
+              height: 'calc(4rem + env(safe-area-inset-top, 0px))',
+              paddingTop: 'env(safe-area-inset-top, 0px)',
+              paddingLeft: 'max(1.5rem, env(safe-area-inset-left, 0px))',
+              paddingRight: 'max(1.5rem, env(safe-area-inset-right, 0px))',
+            }}
+          >
             <div className="flex items-center space-x-3 min-w-0">
               {/* Mobile Back Button */}
               <button
@@ -241,7 +249,10 @@ export function SettingsModal({
           </div>
 
           {/* Scrollable Settings Body - Full Width across all categories */}
-          <div className={`flex-1 scrollbar-overlay-container scrollbar-overlay-static w-full ${['projects', 'providers', 'agents', 'behavior', 'commands', 'mcp', 'skills', 'skills-catalog', 'usage'].includes(activeCategory) ? 'p-0 flex flex-col' : 'p-6 md:p-8 flex flex-col'}`}>
+          <div
+            className={`flex-1 scrollbar-overlay-container scrollbar-overlay-static w-full ${['projects', 'providers', 'agents', 'behavior', 'commands', 'mcp', 'skills', 'skills-catalog', 'usage'].includes(activeCategory) ? 'p-0 flex flex-col' : 'p-6 md:p-8 flex flex-col'}`}
+            style={{ paddingBottom: 'env(safe-area-inset-bottom, 0px)' }}
+          >
             <div className="w-full h-full flex-1 flex flex-col">
               {renderCategoryContent()}
             </div>
@@ -250,7 +261,15 @@ export function SettingsModal({
 
         {/* MOBILE CATEGORY LIST VIEW (When not drilled into detail) */}
         <div className={`flex-1 flex-col h-full bg-canvas md:hidden ${isMobileDrilled ? 'hidden' : 'flex'}`}>
-          <div className="h-14 px-4 border-b border-ink/10 flex items-center justify-between flex-shrink-0 bg-canvas">
+          <div
+            className="px-4 border-b border-ink/10 flex items-center justify-between flex-shrink-0 bg-canvas"
+            style={{
+              height: 'calc(3.5rem + env(safe-area-inset-top, 0px))',
+              paddingTop: 'env(safe-area-inset-top, 0px)',
+              paddingLeft: 'max(1rem, env(safe-area-inset-left, 0px))',
+              paddingRight: 'max(1rem, env(safe-area-inset-right, 0px))',
+            }}
+          >
             <span className="font-bold text-sm tracking-tight text-ink">Settings</span>
             <button
               type="button"
@@ -262,7 +281,10 @@ export function SettingsModal({
             </button>
           </div>
 
-          <div className="flex-1 overflow-hidden">
+          <div
+            className="flex-1 overflow-hidden"
+            style={{ paddingBottom: 'env(safe-area-inset-bottom, 0px)' }}
+          >
             <SettingsSidebar
               activeCategory={activeCategory}
               onSelectCategory={handleSelectCategory}

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

@@ -77,7 +77,7 @@ export const SettingsSidebarList: FunctionComponent<SettingsSidebarListProps> =
   };
 
   return (
-    <div className="w-56 sm:w-64 border-r border-ink/10 h-full flex flex-col bg-paper/50 flex-shrink-0 select-none">
+    <div className="w-full md:w-64 md:border-r border-ink/10 h-full flex flex-col bg-paper/50 flex-shrink-0 select-none">
       <ProjectSelectorDropdown
         selectedProject={selectedProject}
         onChangeProject={onChangeProject}

package/src/client/components/settings/categories/AgentSettings.tsx

@@ -5,6 +5,8 @@ import { AgentSidebarList } from '@/client/components/settings/categories/agent-
 import { AgentDetailPane } from '@/client/components/settings/categories/agent-settings/DetailPane';
 import { LoadingState } from '@/client/components/settings/LoadingState';
 import { useCrudList } from '@/client/hooks/settings/crud-list';
+import { useSettingsMasterDetail } from '@/client/hooks/settings/master-detail';
+import { SettingsMasterDetail } from '@/client/components/settings/master-detail';
 
 interface AgentSettingsProps {
   settings: SettingsState;
@@ -12,6 +14,7 @@ interface AgentSettingsProps {
 }
 
 export const AgentSettings: FunctionComponent<AgentSettingsProps> = () => {
+  const masterDetail = useSettingsMasterDetail();
   const [selectedProject, setSelectedProject] = useState('ompchamber');
   const { items: agents, selectedId, selected: selectedAgent, isCreatingNew, isLoading, select, startCreate, save, remove } =
     useCrudList<AgentItem>({
@@ -49,36 +52,50 @@ export const AgentSettings: FunctionComponent<AgentSettingsProps> = () => {
 
   return (
     <div className="flex h-full w-full overflow-hidden bg-paper">
-      <AgentSidebarList
-        agents={agents}
-        selectedAgentId={isCreatingNew ? null : selectedId}
-        onSelectAgent={select}
-        onAddNewAgent={startCreate}
-        selectedProject={selectedProject}
-        onChangeProject={setSelectedProject}
-      />
-
-      <div className="flex-1 h-full overflow-hidden flex flex-col">
-        {isCreatingNew ? (
-          <AgentDetailPane
-            agent={emptyAgentTemplate}
-            isNew={true}
-            onSave={save}
+      <SettingsMasterDetail
+        pane={masterDetail.pane}
+        onBack={masterDetail.back}
+        listLabel="Agents"
+        list={
+          <AgentSidebarList
+            agents={agents}
+            selectedAgentId={isCreatingNew ? null : selectedId}
+            onSelectAgent={(id) => {
+              select(id);
+              masterDetail.openDetail();
+            }}
+            onAddNewAgent={() => {
+              startCreate();
+              masterDetail.openDetail();
+            }}
+            selectedProject={selectedProject}
+            onChangeProject={setSelectedProject}
           />
-        ) : selectedAgent ? (
-          <AgentDetailPane
-            key={selectedAgent.id}
-            agent={selectedAgent}
-            isNew={false}
-            onSave={save}
-            onDelete={remove}
-          />
-        ) : (
-          <div className="flex-1 flex items-center justify-center text-xs font-mono text-ink/40">
-            Select an agent or click + to create one
+        }
+        detail={
+          <div className="flex-1 h-full overflow-hidden flex flex-col">
+            {isCreatingNew ? (
+              <AgentDetailPane
+                agent={emptyAgentTemplate}
+                isNew={true}
+                onSave={save}
+              />
+            ) : selectedAgent ? (
+              <AgentDetailPane
+                key={selectedAgent.id}
+                agent={selectedAgent}
+                isNew={false}
+                onSave={save}
+                onDelete={remove}
+              />
+            ) : (
+              <div className="flex-1 flex items-center justify-center text-xs font-mono text-ink/40">
+                Select an agent or click + to create one
+              </div>
+            )}
           </div>
-        )}
-      </div>
+        }
+      />
     </div>
   );
 };

package/src/client/components/settings/categories/AppearanceSettings.tsx

@@ -2,6 +2,7 @@ import { Palette } from 'lucide-preact';
 import type { SettingsState } from '@/shared/types';
 import { resolveThemeId } from '@/shared/lib/theme/catalog';
 import { ThemeGrid } from '@/client/components/settings/categories/appearance-settings/ThemeGrid';
+import { EditorFontSection } from '@/client/components/settings/categories/appearance-settings/EditorFontSection';
 
 interface AppearanceSettingsProps {
   settings: SettingsState;
@@ -22,6 +23,8 @@ export function AppearanceSettings({ settings, onUpdate }: AppearanceSettingsPro
           onSelect={(theme) => onUpdate({ theme: resolveThemeId(theme) })}
         />
       </section>
+
+      <EditorFontSection settings={settings} onUpdate={onUpdate} />
     </div>
   );
 }

package/src/client/components/settings/categories/CommandSettings.tsx

@@ -5,6 +5,8 @@ import { CommandSidebarList } from '@/client/components/settings/categories/comm
 import { CommandDetailPane } from '@/client/components/settings/categories/command-settings/DetailPane';
 import { LoadingState } from '@/client/components/settings/LoadingState';
 import { useCrudList } from '@/client/hooks/settings/crud-list';
+import { useSettingsMasterDetail } from '@/client/hooks/settings/master-detail';
+import { SettingsMasterDetail } from '@/client/components/settings/master-detail';
 
 interface CommandSettingsProps {
   settings: SettingsState;
@@ -12,6 +14,7 @@ interface CommandSettingsProps {
 }
 
 export const CommandSettings: FunctionComponent<CommandSettingsProps> = () => {
+  const masterDetail = useSettingsMasterDetail();
   const [selectedProject, setSelectedProject] = useState('ompchamber');
   const { items: commands, selectedId, selected: selectedCommand, isCreatingNew, isLoading, select, startCreate, save, remove } =
     useCrudList<CommandItem>({
@@ -46,36 +49,50 @@ export const CommandSettings: FunctionComponent<CommandSettingsProps> = () => {
 
   return (
     <div className="flex h-full w-full overflow-hidden bg-paper">
-      <CommandSidebarList
-        commands={commands}
-        selectedCommandId={isCreatingNew ? null : selectedId}
-        onSelectCommand={select}
-        onAddNewCommand={startCreate}
-        selectedProject={selectedProject}
-        onChangeProject={setSelectedProject}
-      />
-
-      <div className="flex-1 h-full overflow-hidden flex flex-col">
-        {isCreatingNew ? (
-          <CommandDetailPane
-            command={emptyCommandTemplate}
-            isNew={true}
-            onSave={save}
+      <SettingsMasterDetail
+        pane={masterDetail.pane}
+        onBack={masterDetail.back}
+        listLabel="Commands"
+        list={
+          <CommandSidebarList
+            commands={commands}
+            selectedCommandId={isCreatingNew ? null : selectedId}
+            onSelectCommand={(id) => {
+              select(id);
+              masterDetail.openDetail();
+            }}
+            onAddNewCommand={() => {
+              startCreate();
+              masterDetail.openDetail();
+            }}
+            selectedProject={selectedProject}
+            onChangeProject={setSelectedProject}
           />
-        ) : selectedCommand ? (
-          <CommandDetailPane
-            key={selectedCommand.id}
-            command={selectedCommand}
-            isNew={false}
-            onSave={save}
-            onDelete={remove}
-          />
-        ) : (
-          <div className="flex-1 flex items-center justify-center text-xs font-mono text-ink/40">
-            Select a command or click + to create one
+        }
+        detail={
+          <div className="flex-1 h-full overflow-hidden flex flex-col">
+            {isCreatingNew ? (
+              <CommandDetailPane
+                command={emptyCommandTemplate}
+                isNew={true}
+                onSave={save}
+              />
+            ) : selectedCommand ? (
+              <CommandDetailPane
+                key={selectedCommand.id}
+                command={selectedCommand}
+                isNew={false}
+                onSave={save}
+                onDelete={remove}
+              />
+            ) : (
+              <div className="flex-1 flex items-center justify-center text-xs font-mono text-ink/40">
+                Select a command or click + to create one
+              </div>
+            )}
           </div>
-        )}
-      </div>
+        }
+      />
     </div>
   );
 };