ompchamber 3.1.1 → 3.2.0

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>
   );
 };

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

@@ -8,6 +8,8 @@ import { McpImportModal } from '@/client/components/settings/categories/mcp-sett
 import { LoadingState } from '@/client/components/settings/LoadingState';
 import { useSidebarData } from '@/client/hooks/chat/omp/session-list';
 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 McpSettingsProps {
   settings: SettingsState;
@@ -17,6 +19,7 @@ interface McpSettingsProps {
 const GLOBAL_PROJECT: McpProjectOption = { id: 'global', name: 'Global (all projects)', path: '' };
 
 export const McpSettings: FunctionComponent<McpSettingsProps> = () => {
+  const masterDetail = useSettingsMasterDetail();
   const { folders } = useSidebarData();
   const projects = useMemo<McpProjectOption[]>(() => {
     const bound = folders.flatMap<McpProjectOption>((folder) =>
@@ -98,39 +101,53 @@ export const McpSettings: FunctionComponent<McpSettingsProps> = () => {
 
   return (
     <div className="flex h-full w-full overflow-hidden bg-paper">
-      <McpSidebarList
-        servers={servers}
-        projects={projects}
-        selectedServerId={isCreatingNew ? null : selectedId}
-        onSelectServer={select}
-        onAddNewServer={startCreate}
-        selectedProject={selectedProject}
-        onChangeProject={setSelectedProject}
-      />
-
-      <div className="flex-1 h-full overflow-hidden flex flex-col">
-        {isCreatingNew ? (
-          <McpDetailPane
-            server={emptyServerTemplate}
-            isNew={true}
-            onSave={save}
-            onOpenImportModal={() => setIsImportModalOpen(true)}
-          />
-        ) : selectedServer ? (
-          <McpDetailPane
-            key={selectedServer.id}
-            server={selectedServer}
-            isNew={false}
-            onSave={save}
-            onDelete={remove}
-            onOpenImportModal={() => setIsImportModalOpen(true)}
+      <SettingsMasterDetail
+        pane={masterDetail.pane}
+        onBack={masterDetail.back}
+        listLabel="MCP Servers"
+        list={
+          <McpSidebarList
+            servers={servers}
+            projects={projects}
+            selectedServerId={isCreatingNew ? null : selectedId}
+            onSelectServer={(id) => {
+              select(id);
+              masterDetail.openDetail();
+            }}
+            onAddNewServer={() => {
+              startCreate();
+              masterDetail.openDetail();
+            }}
+            selectedProject={selectedProject}
+            onChangeProject={setSelectedProject}
           />
-        ) : (
-          <div className="flex-1 flex items-center justify-center text-xs font-mono text-ink/40">
-            Select an MCP server or click + to configure one
+        }
+        detail={
+          <div className="flex-1 h-full overflow-hidden flex flex-col">
+            {isCreatingNew ? (
+              <McpDetailPane
+                server={emptyServerTemplate}
+                isNew={true}
+                onSave={save}
+                onOpenImportModal={() => setIsImportModalOpen(true)}
+              />
+            ) : selectedServer ? (
+              <McpDetailPane
+                key={selectedServer.id}
+                server={selectedServer}
+                isNew={false}
+                onSave={save}
+                onDelete={remove}
+                onOpenImportModal={() => setIsImportModalOpen(true)}
+              />
+            ) : (
+              <div className="flex-1 flex items-center justify-center text-xs font-mono text-ink/40">
+                Select an MCP server or click + to configure one
+              </div>
+            )}
           </div>
-        )}
-      </div>
+        }
+      />
 
       <McpImportModal
         isOpen={isImportModalOpen}

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

@@ -4,8 +4,11 @@ import { ProjectSidebarList } from '@/client/components/settings/categories/proj
 import { ProjectDetailsForm } from '@/client/components/settings/categories/project-settings/DetailsForm';
 import { LoadingState } from '@/client/components/settings/LoadingState';
 import { useChamberEvent } from '@/client/hooks/ui/window-event';
+import { useSettingsMasterDetail } from '@/client/hooks/settings/master-detail';
+import { SettingsMasterDetail } from '@/client/components/settings/master-detail';
 
 export function ProjectSettings() {
+  const masterDetail = useSettingsMasterDetail();
   const [projects, setProjects] = useState<ProjectConfigItem[]>([]);
   const [availableModels, setAvailableModels] = useState<string[]>([]);
   const [accentColorOptions, setAccentColorOptions] = useState<AccentColorOption[]>([]);
@@ -94,6 +97,9 @@ export function ProjectSettings() {
       };
       setProjects((current) => [...current, newProject]);
       setSelectedProjectId(newProject.id);
+      // On a phone the new project's details are the point of adding it; the
+      // list pane would hide the row that was just created.
+      masterDetail.openDetail();
       window.dispatchEvent(new CustomEvent('omp:workspace-updated', { detail: { folderId } }));
     } catch (error) {
       console.error('Failed to add project:', error);
@@ -151,26 +157,35 @@ export function ProjectSettings() {
   }
 
   return (
-    <div className="w-full h-full flex flex-col md:flex-row overflow-hidden bg-paper text-ink">
-      {/* Left Column: Project list with counter & Add button */}
-      <ProjectSidebarList
-        projects={projects}
-        selectedProjectId={selectedProject?.id || ''}
-        onSelectProject={setSelectedProjectId}
-        onAddProject={handleAddProject}
+    <div className="w-full h-full flex flex-col overflow-hidden bg-paper text-ink">
+      <SettingsMasterDetail
+        pane={masterDetail.pane}
+        onBack={masterDetail.back}
+        listLabel="Projects"
+        list={
+          <ProjectSidebarList
+            projects={projects}
+            selectedProjectId={selectedProject?.id || ''}
+            onSelectProject={(id) => {
+              setSelectedProjectId(id);
+              masterDetail.openDetail();
+            }}
+            onAddProject={handleAddProject}
+          />
+        }
+        detail={
+          selectedProject ? (
+            <ProjectDetailsForm
+              project={selectedProject}
+              canDelete={projects.length > 1}
+              onUpdateField={handleUpdateField}
+              onDeleteProject={handleDeleteProject}
+              availableModels={availableModels}
+              accentColorOptions={accentColorOptions}
+            />
+          ) : null
+        }
       />
-
-      {/* Right Column: Project details & controls */}
-      {selectedProject && (
-        <ProjectDetailsForm
-          project={selectedProject}
-          canDelete={projects.length > 1}
-          onUpdateField={handleUpdateField}
-          onDeleteProject={handleDeleteProject}
-          availableModels={availableModels}
-          accentColorOptions={accentColorOptions}
-        />
-      )}
     </div>
   );
 }

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

@@ -13,6 +13,8 @@ import { AddModelModal } from '@/client/components/settings/categories/provider-
 import { DeleteProviderModal } from '@/client/components/settings/categories/provider-settings/DeleteProviderModal';
 import { providerEmptyReason } from '@/shared/lib/models/provider/dialect';
 import { configuredProviderSlugs } from '@/shared/lib/models/provider/presets';
+import { useSettingsMasterDetail } from '@/client/hooks/settings/master-detail';
+import { SettingsMasterDetail } from '@/client/components/settings/master-detail';
 
 interface ProviderSettingsProps {
   autoOpenAdd?: boolean;
@@ -23,6 +25,7 @@ export function ProviderSettings({
   autoOpenAdd = false,
   onAddModalClose,
 }: ProviderSettingsProps) {
+  const masterDetail = useSettingsMasterDetail();
   const {
     providers,
     connectedProviders,
@@ -66,61 +69,76 @@ export function ProviderSettings({
   } = useProviderSettings({ autoOpenAdd, onAddModalClose });
 
   return (
-    <div className="w-full h-full flex flex-col md:flex-row overflow-hidden bg-paper text-ink">
-      <ProviderSidebarList
-        providers={connectedProviders}
-        selectedProviderId={selectedProvider?.id || ''}
-        onSelectProvider={setSelectedProviderId}
-        onOpenAddModal={() => setIsAddModalOpen(true)}
-        currentProject={currentProject}
-        onSelectProject={setCurrentProject}
-      />
-
-      <div className="flex-1 scrollbar-overlay-container scrollbar-overlay-static p-6 md:p-8 space-y-6">
-        {selectedProvider ? (
-          <>
-            <ProviderHeader provider={selectedProvider} />
+    <div className="w-full h-full flex flex-col overflow-hidden bg-paper text-ink">
+      <SettingsMasterDetail
+        // The "add provider" dialog lives inside the detail pane, so a hidden
+        // pane would hide the dialog with it — and `autoOpenAdd` (the model
+        // dropdown's "no provider configured" path) opens it without any row
+        // having been tapped. While that dialog is open the pane stays up.
+        pane={isAddModalOpen ? 'detail' : masterDetail.pane}
+        onBack={masterDetail.back}
+        listLabel="Providers"
+        list={
+          <ProviderSidebarList
+            providers={connectedProviders}
+            selectedProviderId={selectedProvider?.id || ''}
+            onSelectProvider={(id) => {
+              setSelectedProviderId(id);
+              masterDetail.openDetail();
+            }}
+            onOpenAddModal={() => setIsAddModalOpen(true)}
+            currentProject={currentProject}
+            onSelectProject={setCurrentProject}
+          />
+        }
+        detail={
+          <div className="flex-1 scrollbar-overlay-container scrollbar-overlay-static p-6 md:p-8 space-y-6">
+            {selectedProvider ? (
+              <>
+                <ProviderHeader provider={selectedProvider} />
 
-            <ProviderAuthSection
-              provider={selectedProvider}
-              onOpenReconnectModal={() => {
-                // A provider omp signs in through `/login` needs the OAuth
-                // dialog; one whose endpoint and key live in models.yml (or the
-                // chamber overlay) is edited in place. Testing the provider ID
-                // for `omp-auth-` was wrong: a native models.yml entry shares
-                // that ID prefix once merged, and a keyless local server has no
-                // login flow to complete at all.
-                if (selectedProvider.credentialSource === 'omp-auth' && selectedProvider.auth !== 'none') {
-                  setIsLoginModalOpen(true);
-                } else {
-                  setIsReconnectModalOpen(true);
-                }
-              }}
-              onToggleDisconnect={handleToggleDisconnect}
-              onToggleDisabled={handleToggleProviderDisabled}
-              onDelete={() => setIsDeleteModalOpen(true)}
-            />
+                <ProviderAuthSection
+                  provider={selectedProvider}
+                  onOpenReconnectModal={() => {
+                    // A provider omp signs in through `/login` needs the OAuth
+                    // dialog; one whose endpoint and key live in models.yml (or the
+                    // chamber overlay) is edited in place. Testing the provider ID
+                    // for `omp-auth-` was wrong: a native models.yml entry shares
+                    // that ID prefix once merged, and a keyless local server has no
+                    // login flow to complete at all.
+                    if (selectedProvider.credentialSource === 'omp-auth' && selectedProvider.auth !== 'none') {
+                      setIsLoginModalOpen(true);
+                    } else {
+                      setIsReconnectModalOpen(true);
+                    }
+                  }}
+                  onToggleDisconnect={handleToggleDisconnect}
+                  onToggleDisabled={handleToggleProviderDisabled}
+                  onDelete={() => setIsDeleteModalOpen(true)}
+                />
 
-            <ProviderModelsList
-              models={selectedProvider.models}
-              emptyReason={providerEmptyReason(selectedProvider)}
-              onToggleModelVisibility={handleToggleModelVisibility}
-              onHideAll={handleHideAll}
-              onShowAll={handleShowAll}
-              onFetchModels={handleFetchModelsFromList}
-              onAddModel={() => setIsAddModelModalOpen(true)}
-              canFetchModels={Boolean(selectedProvider.baseUrl)}
-              isFetchingModels={isFetchingModels}
-              onOpenModelConfig={(model) => setConfigModel(model)}
-              onOpenModelCapabilities={(model) => setCapabilitiesModel(model)}
-            />
-          </>
-        ) : (
-          <div className="py-12 text-center text-xs text-ink/40">
-            Select a provider from the sidebar to view connection details
+                <ProviderModelsList
+                  models={selectedProvider.models}
+                  emptyReason={providerEmptyReason(selectedProvider)}
+                  onToggleModelVisibility={handleToggleModelVisibility}
+                  onHideAll={handleHideAll}
+                  onShowAll={handleShowAll}
+                  onFetchModels={handleFetchModelsFromList}
+                  onAddModel={() => setIsAddModelModalOpen(true)}
+                  canFetchModels={Boolean(selectedProvider.baseUrl)}
+                  isFetchingModels={isFetchingModels}
+                  onOpenModelConfig={(model) => setConfigModel(model)}
+                  onOpenModelCapabilities={(model) => setCapabilitiesModel(model)}
+                />
+              </>
+            ) : (
+              <div className="py-12 text-center text-xs text-ink/40">
+                Select a provider from the sidebar to view connection details
+              </div>
+            )}
           </div>
-        )}
-      </div>
+        }
+      />
 
       <ToastStack toasts={toasts} onDismiss={dismissToast} />
 
@@ -130,7 +148,13 @@ export function ProviderSettings({
           setIsAddModalOpen(false);
           onAddModalClose?.();
         }}
-        onAddProvider={handleAddProvider}
+        onAddProvider={async (provider, options) => {
+          await handleAddProvider(provider, options);
+          // The row now exists in the list; on a phone the newly registered
+          // provider is what the user came to configure, so land on its detail
+          // rather than dropping them back on the list.
+          masterDetail.openDetail();
+        }}
         presets={availablePresetProviders}
         existingSlugs={configuredProviderSlugs(providers)}
       />