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