ompchamber 3.1.0 → 3.2.0

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

@@ -1,8 +1,11 @@
 import { useRef, useState } from 'preact/hooks';
 import { ChevronDown, ChevronRight, GitBranch, MessageSquare, MoreHorizontal, Plus } from 'lucide-preact';
+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 { useShowMore } from '@/client/hooks/ui/show-more';
+import { useExpandedSessions } from '@/client/hooks/workspace/expanded-sessions';
 import { useWorkspaceFolderActions } from '@/client/hooks/workspace/workspace-folder-actions';
 import { getProjectIcon } from '@/shared/lib/workspace/project-icon';
 import { relativeTimeAgo } from '@/shared/lib/workspace/relative-time';
@@ -33,6 +36,12 @@ export function MobileSessionCategory({
 }: MobileSessionCategoryProps) {
   const { visibleCount, showMore } = useShowMore();
   const { refresh } = useSidebarData();
+  const { expandedSessionIds, toggleSession } = useExpandedSessions();
+  // The viewed transcript, so its session row dims while a roster entry is
+  // open (desktop parity — same params, same rule).
+  const [searchParams] = useSearchParams();
+  const urlSubagentId = searchParams.get('subagent');
+  const urlSessionId = searchParams.get('sessionId');
   const [showMenu, setShowMenu] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
   const {
@@ -72,25 +81,32 @@ export function MobileSessionCategory({
     <div className="mb-4">
       <div
         onClick={onToggleExpand}
-        className="flex items-center justify-between px-3 py-2 cursor-pointer hover:bg-ink/5 rounded-lg select-none transition-colors"
+        className="flex items-center justify-between pl-4 pr-3 py-2 cursor-pointer hover:bg-ink/5 rounded-lg select-none transition-colors"
       >
         <div className="flex items-center space-x-2 min-w-0">
-          {folder.customIconUrl ? (
-            <img
-              src={folder.customIconUrl}
-              alt=""
-              className="w-[15px] h-[15px] rounded-xs object-contain flex-shrink-0"
-              referrerPolicy="no-referrer"
-            />
-          ) : folder.iconType === 'chat' ? (
-            <MessageSquare size={15} className="text-ink/80 flex-shrink-0" />
-          ) : (
-            <ProjectIcon
-              size={15}
-              className="text-ink/80 flex-shrink-0"
-              style={{ color: folder.accentColor || undefined }}
-            />
-          )}
+          {/* The folder glyph occupies the same 16px left slot the session rows
+              give their roster toggle, so the two columns line up down the
+              drawer — the icon, the chevron and every row's status glyph share
+              one x. Desktop gets this from one shared slot; the drawer's
+              padding is what differs, hence the matching `pl-4`. */}
+          <span className="w-4 h-4 flex items-center justify-center flex-shrink-0">
+            {folder.customIconUrl ? (
+              <img
+                src={folder.customIconUrl}
+                alt=""
+                className="w-[15px] h-[15px] rounded-xs object-contain"
+                referrerPolicy="no-referrer"
+              />
+            ) : folder.iconType === 'chat' ? (
+              <MessageSquare size={15} className="text-ink/80" />
+            ) : (
+              <ProjectIcon
+                size={15}
+                className="text-ink/80"
+                style={{ color: folder.accentColor || undefined }}
+              />
+            )}
+          </span>
 
           <span className="text-sm font-semibold text-ink truncate">
             {folder.name}
@@ -153,18 +169,39 @@ export function MobileSessionCategory({
 
       {isExpanded && (
         <div className="mt-0.5 space-y-0.5 pl-2">
-          {visibleSessions.map((session) => (
-            <MobileSessionRow
-              key={session.id}
-              session={session}
-              isActive={String(activeSessionId) === String(session.id)}
-              status={sessionStatus[String(session.id)]}
-              timeAgo={relativeTimeAgo(session.updated_at ?? session.created_at)}
-              onSelect={() => onSelectSession(session.id)}
-              onArchive={() => handleArchive(session)}
-              onRename={String(session.id).startsWith('new-') ? undefined : (name) => void handleRename(session, name)}
-            />
-          ))}
+          {visibleSessions.map((session) => {
+            const sessionKey = String(session.id);
+            const isSessionActive = String(activeSessionId) === sessionKey;
+            // While one of its subagents is being viewed, the parent session
+            // row dims so the highlighted roster entry reads as the active one
+            // (desktop parity).
+            const isViewingSubagent = isSessionActive && urlSessionId === sessionKey && Boolean(urlSubagentId);
+            // Same gate as desktop: the omp-side loader flag is authoritative,
+            // so a session whose roster exists on disk can be opened without a
+            // live process.
+            const hasSubagents = Boolean(session.hasSubagents);
+            const isRosterOpen = hasSubagents && expandedSessionIds.has(sessionKey);
+
+            return (
+              <div key={session.id} className="space-y-0.5">
+                <MobileSessionRow
+                  session={session}
+                  isActive={isSessionActive && !isViewingSubagent}
+                  status={sessionStatus[sessionKey]}
+                  timeAgo={relativeTimeAgo(session.updated_at ?? session.created_at)}
+                  hasSubagents={hasSubagents}
+                  isExpanded={isRosterOpen}
+                  onToggleExpand={() => toggleSession(sessionKey)}
+                  onSelect={() => onSelectSession(session.id)}
+                  onArchive={() => handleArchive(session)}
+                  onRename={sessionKey.startsWith('new-') ? undefined : (name) => void handleRename(session, name)}
+                />
+                {isRosterOpen && (
+                  <SubagentList sessionId={session.id} isActiveSession={isSessionActive} />
+                )}
+              </div>
+            );
+          })}
 
           {filteredSessions.length > visibleCount && (
             <button

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, Loader2, Pencil } from 'lucide-preact';
 import type { SessionItemData } from '@/shared/types';
 import { useInlineRename } from '@/client/hooks/ui/inline-rename';
 
@@ -8,7 +8,10 @@ export interface MobileSessionRowProps {
   status?: 'stream' | 'finish' | 'abort';
   /** 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;
@@ -19,7 +22,9 @@ export function MobileSessionRow({
   isActive,
   status,
   timeAgo,
-  showTreeGlyph = false,
+  hasSubagents = false,
+  isExpanded = false,
+  onToggleExpand,
   onSelect,
   onArchive,
   onRename,
@@ -34,6 +39,19 @@ 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 showStatus = Boolean(status);
+  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 +77,16 @@ 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. */}
           <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)}
+            {showStatus && status === 'stream' && <Loader2 size={13} className="text-ink/50 animate-spin" />}
+            {showStatus && (status === 'finish' || status === 'abort') && <Check size={13} className="text-ink/50" />}
           </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 +103,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

@@ -84,7 +84,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]);
@@ -206,8 +210,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 +256,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 +268,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 +288,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/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>
   );
 };