feat: replace AI provider modals with dedicated edit pages

src/components/common/SecondaryScreenShell.module.scss

@@ -0,0 +1,84 @@
+@use '../../styles/variables' as *;
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-lg;
+  min-height: 0;
+}
+
+.topBar {
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: $spacing-md;
+  padding: $spacing-sm $spacing-md;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-color);
+  min-height: 44px;
+}
+
+.topBarTitle {
+  min-width: 0;
+  text-align: center;
+  font-size: 16px;
+  font-weight: 650;
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  justify-self: center;
+}
+
+.backButton {
+  padding-left: 6px;
+  padding-right: 10px;
+  justify-self: start;
+  gap: 0;
+}
+
+.backButton > span:last-child {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.backIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    display: block;
+  }
+}
+
+.backText {
+  font-weight: 600;
+  line-height: 18px;
+}
+
+.rightSlot {
+  justify-self: end;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.loadingState {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: $spacing-sm;
+  padding: $spacing-2xl 0;
+  color: var(--text-secondary);
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-lg;
+}
+

src/components/common/SecondaryScreenShell.tsx

@@ -0,0 +1,78 @@
+import { forwardRef, type ReactNode } from 'react';
+import { Button } from '@/components/ui/Button';
+import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
+import { IconChevronLeft } from '@/components/ui/icons';
+import styles from './SecondaryScreenShell.module.scss';
+
+export type SecondaryScreenShellProps = {
+  title: ReactNode;
+  onBack?: () => void;
+  backLabel?: string;
+  backAriaLabel?: string;
+  rightAction?: ReactNode;
+  isLoading?: boolean;
+  loadingLabel?: ReactNode;
+  className?: string;
+  contentClassName?: string;
+  children?: ReactNode;
+};
+
+export const SecondaryScreenShell = forwardRef<HTMLDivElement, SecondaryScreenShellProps>(
+  function SecondaryScreenShell(
+    {
+      title,
+      onBack,
+      backLabel = 'Back',
+      backAriaLabel,
+      rightAction,
+      isLoading = false,
+      loadingLabel = 'Loading...',
+      className = '',
+      contentClassName = '',
+      children,
+    },
+    ref
+  ) {
+    const containerClassName = [styles.container, className].filter(Boolean).join(' ');
+    const contentClasses = [styles.content, contentClassName].filter(Boolean).join(' ');
+    const titleTooltip = typeof title === 'string' ? title : undefined;
+    const resolvedBackAriaLabel = backAriaLabel ?? backLabel;
+
+    return (
+      <div className={containerClassName} ref={ref}>
+        <div className={styles.topBar}>
+          {onBack ? (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onBack}
+              className={styles.backButton}
+              aria-label={resolvedBackAriaLabel}
+            >
+              <span className={styles.backIcon}>
+                <IconChevronLeft size={18} />
+              </span>
+              <span className={styles.backText}>{backLabel}</span>
+            </Button>
+          ) : (
+            <div />
+          )}
+          <div className={styles.topBarTitle} title={titleTooltip}>
+            {title}
+          </div>
+          <div className={styles.rightSlot}>{rightAction}</div>
+        </div>
+
+        {isLoading ? (
+          <div className={styles.loadingState}>
+            <LoadingSpinner size={16} />
+            <span>{loadingLabel}</span>
+          </div>
+        ) : (
+          <div className={contentClasses}>{children}</div>
+        )}
+      </div>
+    );
+  }
+);
+

src/components/layout/MainLayout.tsx

@@ -376,6 +376,20 @@ export function MainLayout() {
       pathname.length > 1 && pathname.endsWith('/') ? pathname.slice(0, -1) : pathname;
     const normalizedPath = trimmedPath === '/dashboard' ? '/' : trimmedPath;
 
+    const aiProvidersIndex = navOrder.indexOf('/ai-providers');
+    if (aiProvidersIndex !== -1) {
+      if (normalizedPath === '/ai-providers') return aiProvidersIndex;
+      if (normalizedPath.startsWith('/ai-providers/')) {
+        if (normalizedPath.startsWith('/ai-providers/gemini')) return aiProvidersIndex + 0.1;
+        if (normalizedPath.startsWith('/ai-providers/codex')) return aiProvidersIndex + 0.2;
+        if (normalizedPath.startsWith('/ai-providers/claude')) return aiProvidersIndex + 0.3;
+        if (normalizedPath.startsWith('/ai-providers/vertex')) return aiProvidersIndex + 0.4;
+        if (normalizedPath.startsWith('/ai-providers/ampcode')) return aiProvidersIndex + 0.5;
+        if (normalizedPath.startsWith('/ai-providers/openai')) return aiProvidersIndex + 0.6;
+        return aiProvidersIndex + 0.05;
+      }
+    }
+
     const authFilesIndex = navOrder.indexOf('/auth-files');
     if (authFilesIndex !== -1) {
       if (normalizedPath === '/auth-files') return authFilesIndex;
@@ -405,7 +419,11 @@ export function MainLayout() {
     const to = normalize(toPathname);
     const isAuthFiles = (pathname: string) =>
       pathname === '/auth-files' || pathname.startsWith('/auth-files/');
-    return isAuthFiles(from) && isAuthFiles(to) ? 'ios' : 'vertical';
+    const isAiProviders = (pathname: string) =>
+      pathname === '/ai-providers' || pathname.startsWith('/ai-providers/');
+    if (isAuthFiles(from) && isAuthFiles(to)) return 'ios';
+    if (isAiProviders(from) && isAiProviders(to)) return 'ios';
+    return 'vertical';
   }, []);
 
   const handleRefreshAll = async () => {

src/components/providers/AmpcodeSection/AmpcodeSection.tsx

@@ -5,32 +5,21 @@ import type { AmpcodeConfig } from '@/types';
 import { maskApiKey } from '@/utils/format';
 import styles from '@/pages/AiProvidersPage.module.scss';
 import { useTranslation } from 'react-i18next';
-import { AmpcodeModal } from './AmpcodeModal';
 
 interface AmpcodeSectionProps {
   config: AmpcodeConfig | null | undefined;
   loading: boolean;
   disableControls: boolean;
-  isSaving: boolean;
   isSwitching: boolean;
-  isBusy: boolean;
-  isModalOpen: boolean;
-  onOpen: () => void;
-  onCloseModal: () => void;
-  onBusyChange: (busy: boolean) => void;
+  onEdit: () => void;
 }
 
 export function AmpcodeSection({
   config,
   loading,
   disableControls,
-  isSaving,
   isSwitching,
-  isBusy,
-  isModalOpen,
-  onOpen,
-  onCloseModal,
-  onBusyChange,
+  onEdit,
 }: AmpcodeSectionProps) {
   const { t } = useTranslation();
 
@@ -46,8 +35,8 @@ export function AmpcodeSection({
         extra={
           <Button
             size="sm"
-            onClick={onOpen}
-            disabled={disableControls || isSaving || isBusy || isSwitching}
+            onClick={onEdit}
+            disabled={disableControls || loading || isSwitching}
           >
             {t('common.edit')}
           </Button>
@@ -99,13 +88,6 @@ export function AmpcodeSection({
           </>
         )}
       </Card>
-
-      <AmpcodeModal
-        isOpen={isModalOpen}
-        disableControls={disableControls}
-        onClose={onCloseModal}
-        onBusyChange={onBusyChange}
-      />
     </>
   );
 }

src/components/providers/ClaudeSection/ClaudeSection.tsx

@@ -16,8 +16,6 @@ import styles from '@/pages/AiProvidersPage.module.scss';
 import { ProviderList } from '../ProviderList';
 import { ProviderStatusBar } from '../ProviderStatusBar';
 import { getStatsBySource, hasDisableAllModelsRule } from '../utils';
-import type { ProviderFormState } from '../types';
-import { ClaudeModal } from './ClaudeModal';
 
 interface ClaudeSectionProps {
   configs: ProviderKeyConfig[];
@@ -25,16 +23,11 @@ interface ClaudeSectionProps {
   usageDetails: UsageDetail[];
   loading: boolean;
   disableControls: boolean;
-  isSaving: boolean;
   isSwitching: boolean;
-  isModalOpen: boolean;
-  modalIndex: number | null;
   onAdd: () => void;
   onEdit: (index: number) => void;
   onDelete: (index: number) => void;
   onToggle: (index: number, enabled: boolean) => void;
-  onCloseModal: () => void;
-  onSave: (data: ProviderFormState, index: number | null) => Promise<void>;
 }
 
 export function ClaudeSection({
@@ -43,20 +36,15 @@ export function ClaudeSection({
   usageDetails,
   loading,
   disableControls,
-  isSaving,
   isSwitching,
-  isModalOpen,
-  modalIndex,
   onAdd,
   onEdit,
   onDelete,
   onToggle,
-  onCloseModal,
-  onSave,
 }: ClaudeSectionProps) {
   const { t } = useTranslation();
-  const actionsDisabled = disableControls || isSaving || isSwitching;
-  const toggleDisabled = disableControls || loading || isSaving || isSwitching;
+  const actionsDisabled = disableControls || loading || isSwitching;
+  const toggleDisabled = disableControls || loading || isSwitching;
 
   const statusBarCache = useMemo(() => {
     const cache = new Map<string, ReturnType<typeof calculateStatusBarData>>();
@@ -76,8 +64,6 @@ export function ClaudeSection({
     return cache;
   }, [configs, usageDetails]);
 
-  const initialData = modalIndex !== null ? configs[modalIndex] : undefined;
-
   return (
     <>
       <Card
@@ -200,15 +186,6 @@ export function ClaudeSection({
           }}
         />
       </Card>
-
-      <ClaudeModal
-        isOpen={isModalOpen}
-        editIndex={modalIndex}
-        initialData={initialData}
-        onClose={onCloseModal}
-        onSave={onSave}
-        isSaving={isSaving}
-      />
     </>
   );
 }

src/components/providers/CodexSection/CodexSection.tsx

@@ -17,8 +17,6 @@ import styles from '@/pages/AiProvidersPage.module.scss';
 import { ProviderList } from '../ProviderList';
 import { ProviderStatusBar } from '../ProviderStatusBar';
 import { getStatsBySource, hasDisableAllModelsRule } from '../utils';
-import type { ProviderFormState } from '../types';
-import { CodexModal } from './CodexModal';
 
 interface CodexSectionProps {
   configs: ProviderKeyConfig[];
@@ -26,17 +24,12 @@ interface CodexSectionProps {
   usageDetails: UsageDetail[];
   loading: boolean;
   disableControls: boolean;
-  isSaving: boolean;
   isSwitching: boolean;
   resolvedTheme: string;
-  isModalOpen: boolean;
-  modalIndex: number | null;
   onAdd: () => void;
   onEdit: (index: number) => void;
   onDelete: (index: number) => void;
   onToggle: (index: number, enabled: boolean) => void;
-  onCloseModal: () => void;
-  onSave: (data: ProviderFormState, index: number | null) => Promise<void>;
 }
 
 export function CodexSection({
@@ -45,21 +38,16 @@ export function CodexSection({
   usageDetails,
   loading,
   disableControls,
-  isSaving,
   isSwitching,
   resolvedTheme,
-  isModalOpen,
-  modalIndex,
   onAdd,
   onEdit,
   onDelete,
   onToggle,
-  onCloseModal,
-  onSave,
 }: CodexSectionProps) {
   const { t } = useTranslation();
-  const actionsDisabled = disableControls || isSaving || isSwitching;
-  const toggleDisabled = disableControls || loading || isSaving || isSwitching;
+  const actionsDisabled = disableControls || loading || isSwitching;
+  const toggleDisabled = disableControls || loading || isSwitching;
 
   const statusBarCache = useMemo(() => {
     const cache = new Map<string, ReturnType<typeof calculateStatusBarData>>();
@@ -79,8 +67,6 @@ export function CodexSection({
     return cache;
   }, [configs, usageDetails]);
 
-  const initialData = modalIndex !== null ? configs[modalIndex] : undefined;
-
   return (
     <>
       <Card
@@ -192,15 +178,6 @@ export function CodexSection({
           }}
         />
       </Card>
-
-      <CodexModal
-        isOpen={isModalOpen}
-        editIndex={modalIndex}
-        initialData={initialData}
-        onClose={onCloseModal}
-        onSave={onSave}
-        isSaving={isSaving}
-      />
     </>
   );
 }

src/components/providers/GeminiSection/GeminiSection.tsx

@@ -13,11 +13,9 @@ import {
   type UsageDetail,
 } from '@/utils/usage';
 import styles from '@/pages/AiProvidersPage.module.scss';
-import type { GeminiFormState } from '../types';
 import { ProviderList } from '../ProviderList';
 import { ProviderStatusBar } from '../ProviderStatusBar';
 import { getStatsBySource, hasDisableAllModelsRule } from '../utils';
-import { GeminiModal } from './GeminiModal';
 
 interface GeminiSectionProps {
   configs: GeminiKeyConfig[];
@@ -25,16 +23,11 @@ interface GeminiSectionProps {
   usageDetails: UsageDetail[];
   loading: boolean;
   disableControls: boolean;
-  isSaving: boolean;
   isSwitching: boolean;
-  isModalOpen: boolean;
-  modalIndex: number | null;
   onAdd: () => void;
   onEdit: (index: number) => void;
   onDelete: (index: number) => void;
   onToggle: (index: number, enabled: boolean) => void;
-  onCloseModal: () => void;
-  onSave: (data: GeminiFormState, index: number | null) => Promise<void>;
 }
 
 export function GeminiSection({
@@ -43,20 +36,15 @@ export function GeminiSection({
   usageDetails,
   loading,
   disableControls,
-  isSaving,
   isSwitching,
-  isModalOpen,
-  modalIndex,
   onAdd,
   onEdit,
   onDelete,
   onToggle,
-  onCloseModal,
-  onSave,
 }: GeminiSectionProps) {
   const { t } = useTranslation();
-  const actionsDisabled = disableControls || isSaving || isSwitching;
-  const toggleDisabled = disableControls || loading || isSaving || isSwitching;
+  const actionsDisabled = disableControls || loading || isSwitching;
+  const toggleDisabled = disableControls || loading || isSwitching;
 
   const statusBarCache = useMemo(() => {
     const cache = new Map<string, ReturnType<typeof calculateStatusBarData>>();
@@ -76,8 +64,6 @@ export function GeminiSection({
     return cache;
   }, [configs, usageDetails]);
 
-  const initialData = modalIndex !== null ? configs[modalIndex] : undefined;
-
   return (
     <>
       <Card
@@ -181,15 +167,6 @@ export function GeminiSection({
           }}
         />
       </Card>
-
-      <GeminiModal
-        isOpen={isModalOpen}
-        editIndex={modalIndex}
-        initialData={initialData}
-        onClose={onCloseModal}
-        onSave={onSave}
-        isSaving={isSaving}
-      />
     </>
   );
 }

src/components/providers/OpenAISection/OpenAISection.tsx

@@ -17,8 +17,6 @@ import styles from '@/pages/AiProvidersPage.module.scss';
 import { ProviderList } from '../ProviderList';
 import { ProviderStatusBar } from '../ProviderStatusBar';
 import { getOpenAIProviderStats, getStatsBySource } from '../utils';
-import type { OpenAIFormState } from '../types';
-import { OpenAIModal } from './OpenAIModal';
 
 interface OpenAISectionProps {
   configs: OpenAIProviderConfig[];
@@ -26,16 +24,11 @@ interface OpenAISectionProps {
   usageDetails: UsageDetail[];
   loading: boolean;
   disableControls: boolean;
-  isSaving: boolean;
   isSwitching: boolean;
   resolvedTheme: string;
-  isModalOpen: boolean;
-  modalIndex: number | null;
   onAdd: () => void;
   onEdit: (index: number) => void;
   onDelete: (index: number) => void;
-  onCloseModal: () => void;
-  onSave: (data: OpenAIFormState, index: number | null) => Promise<void>;
 }
 
 export function OpenAISection({
@@ -44,19 +37,14 @@ export function OpenAISection({
   usageDetails,
   loading,
   disableControls,
-  isSaving,
   isSwitching,
   resolvedTheme,
-  isModalOpen,
-  modalIndex,
   onAdd,
   onEdit,
   onDelete,
-  onCloseModal,
-  onSave,
 }: OpenAISectionProps) {
   const { t } = useTranslation();
-  const actionsDisabled = disableControls || isSaving || isSwitching;
+  const actionsDisabled = disableControls || loading || isSwitching;
 
   const statusBarCache = useMemo(() => {
     const cache = new Map<string, ReturnType<typeof calculateStatusBarData>>();
@@ -77,8 +65,6 @@ export function OpenAISection({
     return cache;
   }, [configs, usageDetails]);
 
-  const initialData = modalIndex !== null ? configs[modalIndex] : undefined;
-
   return (
     <>
       <Card
@@ -204,15 +190,6 @@ export function OpenAISection({
           }}
         />
       </Card>
-
-      <OpenAIModal
-        isOpen={isModalOpen}
-        editIndex={modalIndex}
-        initialData={initialData}
-        onClose={onCloseModal}
-        onSave={onSave}
-        isSaving={isSaving}
-      />
     </>
   );
 }

src/components/providers/VertexSection/VertexSection.tsx

@@ -15,8 +15,6 @@ import styles from '@/pages/AiProvidersPage.module.scss';
 import { ProviderList } from '../ProviderList';
 import { ProviderStatusBar } from '../ProviderStatusBar';
 import { getStatsBySource } from '../utils';
-import type { VertexFormState } from '../types';
-import { VertexModal } from './VertexModal';
 
 interface VertexSectionProps {
   configs: ProviderKeyConfig[];
@@ -24,15 +22,10 @@ interface VertexSectionProps {
   usageDetails: UsageDetail[];
   loading: boolean;
   disableControls: boolean;
-  isSaving: boolean;
   isSwitching: boolean;
-  isModalOpen: boolean;
-  modalIndex: number | null;
   onAdd: () => void;
   onEdit: (index: number) => void;
   onDelete: (index: number) => void;
-  onCloseModal: () => void;
-  onSave: (data: VertexFormState, index: number | null) => Promise<void>;
 }
 
 export function VertexSection({
@@ -41,18 +34,13 @@ export function VertexSection({
   usageDetails,
   loading,
   disableControls,
-  isSaving,
   isSwitching,
-  isModalOpen,
-  modalIndex,
   onAdd,
   onEdit,
   onDelete,
-  onCloseModal,
-  onSave,
 }: VertexSectionProps) {
   const { t } = useTranslation();
-  const actionsDisabled = disableControls || isSaving || isSwitching;
+  const actionsDisabled = disableControls || loading || isSwitching;
 
   const statusBarCache = useMemo(() => {
     const cache = new Map<string, ReturnType<typeof calculateStatusBarData>>();
@@ -72,8 +60,6 @@ export function VertexSection({
     return cache;
   }, [configs, usageDetails]);
 
-  const initialData = modalIndex !== null ? configs[modalIndex] : undefined;
-
   return (
     <>
       <Card
@@ -168,15 +154,6 @@ export function VertexSection({
           }}
         />
       </Card>
-
-      <VertexModal
-        isOpen={isModalOpen}
-        editIndex={modalIndex}
-        initialData={initialData}
-        onClose={onCloseModal}
-        onSave={onSave}
-        isSaving={isSaving}
-      />
     </>
   );
 }