@plannotator/ui 0.53.0 → 0.54.0

package/components/Settings.tsx

@@ -1,13 +1,27 @@
 import type { UpdateCheckSetting } from '../hooks/useUpdateCheckSetting';
+import { cookieHostDescription, type CookieHostSetting } from '../hooks/useCookieHostSetting';
+import type { PackageChangesSetting } from '../hooks/usePackageChangesSetting';
 import React, { useState, useEffect, useMemo, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import type { AnnotateAgentTerminalSide } from '@plannotator/core/agent-terminal';
 import type { Origin } from '@plannotator/core/agents';
 import type { DiffLineBgIntensity } from '@plannotator/core/config-types';
 import type { TokenHoverDelay } from '@plannotator/core/token-hover';
-import { configStore, useConfigValue, setReviewPanelView, setReviewDefaultDiffType, setReviewAutoViewed } from '../config';
+import {
+  configStore,
+  useConfigValue,
+  setReviewPanelView,
+  setReviewDefaultDiffType,
+  getProviderReviewDefaultDiffType,
+  setProviderReviewDefaultDiffType,
+  setReviewAutoViewed,
+  type VcsReviewSettingsDescriptor,
+} from '../config';
 import { setWebMcpToolsEnabled, useWebMcpToolsEnabled } from '../webmcp/preference';
 import { DIAGRAM_SHADOW_OPTIONS } from '../utils/diagramShadow';
+import { markLookAndFeelChoiceResolved } from '../utils/lookAndFeelAnnouncement';
+import { DEFAULT_DOCUMENT_TEXT_SIZE, DOCUMENT_TEXT_SIZE_OPTIONS } from '../utils/documentTextSize';
+import { DOCUMENT_FONT_OPTIONS, documentFontStack } from '../utils/documentFont';
 import {
   agentToolAppliesWhen,
   agentToolCostNote,
@@ -15,6 +29,8 @@ import {
   type AgentToolSetting,
 } from '../utils/agentToolSetting';
 import { loadDiffFont } from '../utils/diffFonts';
+import { isFontInstalled } from '../utils/fontDetect';
+import { MAX_FONT_FAMILY_LENGTH, monoFontStack, normalizeCssFontSize, normalizeFontFamilyName } from '../utils/cssFontFamily';
 import { TaterSpritePullup } from './TaterSpritePullup';
 import { getIdentity, regenerateIdentity, setCustomIdentity, isIdentityEditable } from '../utils/identity';
 import { GitUser } from '../icons/GitUser';
@@ -37,6 +53,13 @@ import {
   saveOctarineSettings,
   type OctarineSettings,
 } from '../utils/octarine';
+import {
+  getNotionSettings,
+  saveNotionSettings,
+  getNotionParentPageId,
+  isNotionAvailable,
+  type NotionSettings,
+} from '../utils/notion';
 import {
   getAgentSwitchSettings,
   getAgentSwitchDefaults,
@@ -86,7 +109,7 @@ import {
 import { requestVimDocumentFocus } from '../hooks/useVimDocumentFocus';
 import { AnalysisLayerToggle } from './AnalysisLayerToggle';
 
-type SettingsTab = 'general' | 'theme' | 'git' | 'display' | 'analysis' | 'saving' | 'labels' | 'vim' | 'shortcuts' | 'ai' | 'files' | 'obsidian' | 'bear' | 'octarine' | 'comments' | 'hooks';
+type SettingsTab = 'general' | 'theme' | 'review' | 'display' | 'analysis' | 'saving' | 'labels' | 'vim' | 'shortcuts' | 'ai' | 'files' | 'obsidian' | 'bear' | 'octarine' | 'notion' | 'comments' | 'hooks' | 'experimental';
 
 interface SettingsProps {
   taterMode: boolean;
@@ -101,7 +124,30 @@ interface SettingsProps {
    * true; a host that omits it keeps the pre-parity annotate tab set.
    */
   annotateParity?: boolean;
+  /**
+   * Hide General's "Enter saves a comment" row (#1934). Default false: the
+   * row shows. A host that drives the `enterSavesComment` setting itself, or
+   * never wants it offered, passes true.
+   */
+  hideEnterSavesComment?: boolean;
+  /**
+   * Show Display's Text size row (#2066). Default false: the row does
+   * something only where the page applies the `documentTextSize` setting
+   * (`hooks/useDocumentTextSize`), so a host opts in. Plannotator passes true
+   * in plan review and annotate on a markdown or text document.
+   */
+  showDocumentTextSize?: boolean;
+  /**
+   * Show Display's Document font row (#1657). Default false, like
+   * `showDocumentTextSize`: the row does something only where the page
+   * applies the `documentFontFamily` setting (`hooks/useDocumentFont`).
+   */
+  showDocumentFont?: boolean;
   onUIPreferencesChange?: (prefs: UIPreferences) => void;
+  /** Claude Code's permission mode was changed here (plan review). The host
+   *  keeps its own copy in step, since its Approve sends the mode and its
+   *  decision menu shows it. Optional: hosts that omit it are unchanged. */
+  onPermissionModeChange?: (mode: PermissionMode) => void;
   /** Externally controlled open state (for mobile menu integration) */
   externalOpen?: boolean;
   onExternalClose?: () => void;
@@ -117,6 +163,11 @@ interface SettingsProps {
    *  useUpdateCheckSetting); `env` is PLANNOTATOR_UPDATE_CHECK when it overrides the
    *  config file. Hosts that omit it get no row. */
   updateCheckSetting?: UpdateCheckSetting;
+  /** "Open Plannotator at plannotator.localhost" (#2184, useCookieHostSetting): present
+   *  only when the server reports it (a local session). Hosts that omit it get no row. */
+  cookieHostSetting?: CookieHostSetting;
+  /** Code review's package changes switches (usePackageChangesSetting). Hosts that omit it get no rows. */
+  packageChangesSetting?: PackageChangesSetting;
   /** The `plannotator` agent tool switch, as the server reports it
    *  (parseAgentToolSetting of serverConfig: present only when the session's
    *  host registers the tool). Shown only together with onAgentToolChange;
@@ -126,8 +177,8 @@ interface SettingsProps {
    *  readable Error, which the row shows. */
   onAgentToolChange?: (enabled: boolean) => Promise<void>;
   /** Current session is a local git review where since-base ISN'T offered
-   *  (base ref unresolvable) — the Git tab shows a note that the Git-status
-   *  preference can't take effect in THIS repo. */
+   *  (base ref unresolvable) — the Review tab's Git section shows a note that
+   *  the Git-status preference can't take effect in THIS repo. */
   sinceBaseUnavailable?: boolean;
   /** The host is rendering its compact touch shell (review only). Display
    *  settings that the compact shell overrides for the session are hidden
@@ -213,7 +264,20 @@ const DEFAULT_DIFF_TYPE_OPTIONS = [
   { value: 'merge-base' as const, label: 'Committed changes (PR view)', description: "Everything you've committed on this branch" },
   { value: 'all' as const, label: 'All Files (HEAD)', description: "Every tracked file at HEAD, shown as additions" },
 ];
-
+// Labels match the jj diff picker (getJjContext in packages/shared/jj-core.ts).
+const JJ_DEFAULT_DIFF_TYPE_OPTIONS = [
+  { value: 'jj-current', label: 'Current change', description: 'Only the working-copy change (@)' },
+  { value: 'jj-last', label: 'Last change', description: 'The change just before the working copy (@-)' },
+  { value: 'jj-line', label: 'Line of work', description: 'Every change on your line of work since it left trunk' },
+  { value: 'jj-evolog', label: 'Evolution diff', description: 'How the current change has evolved' },
+  { value: 'jj-all', label: 'Every file', description: 'Every file at the working copy, shown as additions' },
+] as const;
+const JJ_REVIEW_DEFAULTS: VcsReviewSettingsDescriptor = {
+  id: 'jj',
+  label: 'Jujutsu',
+  defaultDiffType: 'jj-current',
+  diffOptions: JJ_DEFAULT_DIFF_TYPE_OPTIONS.map(({ value, label, description }) => ({ id: value, label, description })),
+};
 const AGENT_TERMINAL_SIDE_OPTIONS: { value: AnnotateAgentTerminalSide; label: string }[] = [
   { value: 'left', label: 'Left' },
   { value: 'right', label: 'Right' },
@@ -249,6 +313,13 @@ function SegmentedControl<T extends string>({ options, value, onChange, disabled
   );
 }
 
+/** Which of the cookie switch's states the row shows (a test and screenshot hook). */
+function cookieHostSettingState(setting: CookieHostSetting): string {
+  if (setting.env !== undefined) return 'locked-env';
+  if (setting.urlHost !== undefined) return 'locked-url-host';
+  return setting.on ? 'on' : 'off';
+}
+
 function ToggleSwitch({ checked, onChange, label, description, disabled = false }: {
   checked: boolean;
   onChange: (v: boolean) => void;
@@ -417,7 +488,7 @@ function VimSettingsTab({
   );
 }
 
-function ReviewAnalysisTab() {
+function ReviewAnalysisTab({ packageChangesSetting }: { packageChangesSetting?: PackageChangesSetting }) {
   const semanticDiffEnabled = useConfigValue('semanticDiffEnabled');
   const callFlowEnabled = useConfigValue('callFlowEnabled');
   return (
@@ -443,6 +514,27 @@ function ReviewAnalysisTab() {
           label="Call flow"
           description="Diffs for function call stacks across git commits. 22 languages supported (AST-based, built using Tree-sitter)."
         />
+        {packageChangesSetting && (
+          <>
+            <div className="border-t border-border" />
+            <AnalysisLayerToggle
+              checked={packageChangesSetting.card}
+              onChange={(on) => packageChangesSetting.setCard(on)}
+              label="Package changes"
+              description="Added, removed and changed dependencies above package.json and lockfile diffs."
+            />
+            <div className="border-t border-border" />
+            <AnalysisLayerToggle
+              checked={packageChangesSetting.lookup}
+              onChange={(on) => void packageChangesSetting.setLookup(on)}
+              disabled={packageChangesSetting.lookupEnv === false}
+              label="Look up packages on npm"
+              description={packageChangesSetting.lookupEnv === false
+                ? 'Off: PLANNOTATOR_PACKAGE_LOOKUP=0.'
+                : 'License, release date and weekly downloads. Sends the names of changed public packages to registry.npmjs.org and api.npmjs.org.'}
+            />
+          </>
+        )}
       </div>
 
       <div className="grid gap-3 sm:grid-cols-2">
@@ -474,16 +566,56 @@ function ReviewAnalysisTab() {
   );
 }
 
-const GitTab: React.FC<{ sinceBaseUnavailable?: boolean }> = ({ sinceBaseUnavailable }) => {
+/** One radio card list for a saved default diff (Git or Jujutsu). */
+function DefaultDiffChoices<T extends string>({ options, value, onChange }: {
+  options: ReadonlyArray<{ value: T; label: string; description: string }>;
+  value: string;
+  onChange: (value: T) => void;
+}) {
+  return (
+    <div className="space-y-2" role="radiogroup">
+      {options.map((opt) => (
+        <button
+          key={opt.value}
+          type="button"
+          role="radio"
+          aria-checked={value === opt.value}
+          onClick={() => onChange(opt.value)}
+          className={`w-full flex items-start gap-3 p-3 rounded-lg border transition-colors text-left ${
+            value === opt.value
+              ? 'border-primary bg-primary/5'
+              : 'border-border hover:border-muted-foreground/30 hover:bg-muted/50'
+          }`}
+        >
+          <div className={`mt-0.5 w-4 h-4 rounded-full border-2 flex-shrink-0 flex items-center justify-center ${
+            value === opt.value ? 'border-primary' : 'border-muted-foreground/40'
+          }`}>
+            {value === opt.value && (
+              <div className="w-2 h-2 rounded-full bg-primary" />
+            )}
+          </div>
+          <div>
+            <div className="text-sm font-medium">{opt.label}</div>
+            <div className="text-xs text-muted-foreground">{opt.description}</div>
+          </div>
+        </button>
+      ))}
+    </div>
+  );
+}
+
+const REVIEW_SECTION_HEADING = 'text-xs font-semibold uppercase tracking-wider text-muted-foreground';
+
+const ReviewTab: React.FC<{ sinceBaseUnavailable?: boolean }> = ({ sinceBaseUnavailable }) => {
   const defaultDiffType = useConfigValue('defaultDiffType');
+  useConfigValue('reviewDefaults');
+  const jjDefaultDiffType = getProviderReviewDefaultDiffType(JJ_REVIEW_DEFAULTS);
   const reviewPanelView = useConfigValue('reviewPanelView');
   const reviewAutoViewed = useConfigValue('reviewAutoViewed');
   return (
     <div className="space-y-5">
       <div className="space-y-2">
-        <div className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-          Viewed files
-        </div>
+        <div className={REVIEW_SECTION_HEADING}>Viewed files</div>
         {/* Never write `reviewAutoViewed` directly — setReviewAutoViewed also
             consumes the first-time notice, since an explicit toggle is proof
             the reviewer already found the switch. */}
@@ -494,67 +626,253 @@ const GitTab: React.FC<{ sinceBaseUnavailable?: boolean }> = ({ sinceBaseUnavail
           description="Mark a file viewed when you scroll past it or move on to another file. Files you un-view stay un-viewed, and files that change on refresh become un-viewed."
         />
       </div>
-      <div className="space-y-2">
-        <div>
-          <div className="text-sm font-medium">Default review view</div>
-          <div className="text-xs text-muted-foreground">Which panel a code review opens in</div>
-          {/* This is a GLOBAL preference — never hide the options because the
-              CURRENT repo can't serve them; just say so. Without this note,
-              picking Git status on a repo whose base ref doesn't resolve
-              silently falls back to Tree and the setting looks broken. */}
-          {sinceBaseUnavailable && (
-            <div className="text-xs text-warning mt-1">
-              Git status view isn't available in this repository (its base branch
-              couldn't be resolved) — reviews here open in Tree. The preference
-              still applies in repositories where it works.
-            </div>
-          )}
+
+      <div className="border-t border-border" />
+
+      <section className="space-y-4" aria-labelledby="settings-review-git">
+        <div id="settings-review-git" className={REVIEW_SECTION_HEADING}>Git</div>
+        <div className="space-y-2">
+          <div>
+            <div className="text-sm font-medium">Default review view</div>
+            <div className="text-xs text-muted-foreground">Which panel a code review opens in</div>
+            {/* This is a GLOBAL preference — never hide the options because the
+                CURRENT repo can't serve them; just say so. Without this note,
+                picking Git status on a repo whose base ref doesn't resolve
+                silently falls back to Tree and the setting looks broken. */}
+            {sinceBaseUnavailable && (
+              <div className="text-xs text-warning mt-1">
+                Git status view isn't available in this repository (its base branch
+                couldn't be resolved) — reviews here open in Tree. The preference
+                still applies in repositories where it works.
+              </div>
+            )}
+          </div>
+          {/* No Commits option here: the Commits view is session-only (entered
+              via the panel toggle) and is never the opening view. */}
+          <SegmentedControl
+            options={[
+              { value: 'sections' as const, label: 'Git status' },
+              { value: 'tree' as const, label: 'Tree' },
+            ]}
+            value={reviewPanelView}
+            onChange={setReviewPanelView}
+          />
         </div>
-        {/* No Commits option here: the Commits view is session-only (entered
-            via the panel toggle) and is never the opening view. */}
-        <SegmentedControl
-          options={[
-            { value: 'sections' as const, label: 'Git status' },
-            { value: 'tree' as const, label: 'Tree' },
-          ]}
-          value={reviewPanelView}
-          onChange={setReviewPanelView}
-        />
-      </div>
-      <div className="space-y-2">
+        <div className="space-y-2">
+          <div>
+            <div className="text-sm font-medium">Default diff view</div>
+            <div className="text-xs text-muted-foreground">Which changes to show when you open a code review</div>
+          </div>
+          {/* Coupling (sections ⟺ since-base) lives in the shared setter —
+              never write the pair by hand (see config/reviewView). */}
+          <DefaultDiffChoices
+            options={DEFAULT_DIFF_TYPE_OPTIONS}
+            value={defaultDiffType}
+            onChange={(value) => setReviewDefaultDiffType(value)}
+          />
+        </div>
+      </section>
+
+      <div className="border-t border-border" />
+
+      <section className="space-y-4" aria-labelledby="settings-review-jj">
+        <div id="settings-review-jj" className={REVIEW_SECTION_HEADING}>Jujutsu</div>
+        <div className="space-y-2">
+          <div>
+            <div className="text-sm font-medium">Default diff view</div>
+            <div className="text-xs text-muted-foreground">Which changes to show when you open a review in a Jujutsu repository</div>
+          </div>
+          {/* Its own saved value: Git modes mean nothing in a jj repo, and jj has
+              no Git status view, so nothing here is coupled to the Git half. */}
+          <DefaultDiffChoices
+            options={JJ_DEFAULT_DIFF_TYPE_OPTIONS}
+            value={jjDefaultDiffType}
+            onChange={(value) => setProviderReviewDefaultDiffType('jj', value)}
+          />
+        </div>
+      </section>
+    </div>
+  );
+};
+
+/** Sentinel for the "Custom…" select option — never persisted as a font name. */
+const CUSTOM_FONT_SENTINEL = '__custom__';
+
+/** Inline style rendering a control in the chosen font (quoted and escaped: free text). */
+function stackStyle(stack: string): React.CSSProperties | undefined {
+  return stack ? { fontFamily: stack } : undefined;
+}
+
+/**
+ * A font row (#851, shared by Code Font and Document font): a select of the
+ * built-in choices plus "Custom…", which opens a field for the family name of
+ * any font installed on this machine. The typed name is saved after a short
+ * pause (configStore.set writes the cookie and may POST /api/config), flushed
+ * on unmount, and dropped when a built-in is picked mid-pause.
+ */
+const FontFamilyField: React.FC<{
+  label: string;
+  description: string;
+  value: string;
+  onSave: (value: string) => void;
+  options: readonly { value: string; label: string }[];
+  /** The `font-family` the controls preview a value in. */
+  previewStack: (value: string) => string;
+  previewText: string;
+  customAriaLabel: string;
+  customPlaceholder: string;
+  notFoundText: string;
+  /** Load a built-in's web font for the preview, if it has one. */
+  loadFont?: (value: string) => void;
+  previewClassName?: string;
+}> = ({ label, description, value, onSave, options, previewStack, previewText, customAriaLabel, customPlaceholder, notFoundText, loadFont, previewClassName = '' }) => {
+  const isBuiltIn = (v: string) => options.some((opt) => opt.value === v);
+  // Custom font: progressive disclosure. customFontMode keeps the input open
+  // while the user picks "Custom…" or has a non-built-in font saved.
+  const [customFontMode, setCustomFontMode] = useState(() => !!value && !isBuiltIn(value));
+  const [customFontDraft, setCustomFontDraft] = useState(() => (value && !isBuiltIn(value) ? value : ''));
+  const customFontSaveTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  // Pending debounced value. Non-null means "typed but not yet saved" — it is
+  // flushed (not discarded) on unmount, and cancelled when a built-in is
+  // picked so a stale timer can't overwrite the new selection.
+  const pendingFontSave = useRef<string | null>(null);
+  const onSaveRef = useRef(onSave);
+  onSaveRef.current = onSave;
+  const customActive = customFontMode || (!!value && !isBuiltIn(value));
+  // Width-measurement check — deterministic per machine, no permissions.
+  const customFontInstalled = useMemo(
+    () => (normalizeFontFamilyName(customFontDraft) ? isFontInstalled(customFontDraft) : null),
+    [customFontDraft],
+  );
+
+  // Load font for the preview swatch
+  useEffect(() => {
+    if (value) loadFont?.(value);
+  }, [value, loadFont]);
+
+  // Adopt external changes (late server hydration, edits from elsewhere) into
+  // the draft — but never clobber typing that hasn't been saved yet.
+  useEffect(() => {
+    if (pendingFontSave.current !== null) return;
+    if (value && !isBuiltIn(value) && value !== normalizeFontFamilyName(customFontDraft)) {
+      setCustomFontDraft(value);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+
+  const cancelPendingFontSave = () => {
+    clearTimeout(customFontSaveTimer.current);
+    pendingFontSave.current = null;
+  };
+
+  // Flush a pending save on unmount so closing the panel mid-debounce
+  // doesn't lose the typed font.
+  useEffect(() => () => {
+    clearTimeout(customFontSaveTimer.current);
+    if (pendingFontSave.current !== null) {
+      onSaveRef.current(pendingFontSave.current);
+    }
+  }, []);
+
+  const handleCustomFontInput = (next: string) => {
+    setCustomFontDraft(next);
+    // Debounce the save — per-keystroke writes would spam the cookie and
+    // /api/config.
+    clearTimeout(customFontSaveTimer.current);
+    pendingFontSave.current = normalizeFontFamilyName(next);
+    customFontSaveTimer.current = setTimeout(() => {
+      if (pendingFontSave.current !== null) {
+        onSaveRef.current(pendingFontSave.current);
+        pendingFontSave.current = null;
+      }
+    }, 400);
+  };
+
+  return (
+    <div className="space-y-2">
       <div>
-        <div className="text-sm font-medium">Default Diff View</div>
-        <div className="text-xs text-muted-foreground">Which changes to show when you open a code review</div>
+        <div className="text-sm font-medium">{label}</div>
+        <div className="text-xs text-muted-foreground">{description}</div>
       </div>
-      <div className="space-y-2">
-        {DEFAULT_DIFF_TYPE_OPTIONS.map((opt) => (
-          <button
-            key={opt.value}
-            type="button"
-            // Coupling (sections ⟺ since-base) lives in the shared setter —
-            // never write the pair by hand (see config/reviewView).
-            onClick={() => setReviewDefaultDiffType(opt.value)}
-            className={`w-full flex items-start gap-3 p-3 rounded-lg border transition-colors text-left ${
-              defaultDiffType === opt.value
-                ? 'border-primary bg-primary/5'
-                : 'border-border hover:border-muted-foreground/30 hover:bg-muted/50'
-            }`}
-          >
-            <div className={`mt-0.5 w-4 h-4 rounded-full border-2 flex-shrink-0 flex items-center justify-center ${
-              defaultDiffType === opt.value ? 'border-primary' : 'border-muted-foreground/40'
-            }`}>
-              {defaultDiffType === opt.value && (
-                <div className="w-2 h-2 rounded-full bg-primary" />
-              )}
-            </div>
-            <div>
-              <div className="text-sm font-medium">{opt.label}</div>
-              <div className="text-xs text-muted-foreground">{opt.description}</div>
-            </div>
-          </button>
+      <select
+        value={customActive ? CUSTOM_FONT_SENTINEL : value}
+        aria-label={label}
+        onChange={(e) => {
+          if (e.target.value === CUSTOM_FONT_SENTINEL) {
+            setCustomFontMode(true);
+          } else {
+            // Cancel any in-flight debounced custom save so a stale timer
+            // can't overwrite this selection.
+            cancelPendingFontSave();
+            setCustomFontMode(false);
+            setCustomFontDraft('');
+            onSave(e.target.value);
+          }
+        }}
+        className="w-full px-3 py-1.5 text-sm rounded-md bg-muted/50 border border-border text-foreground"
+        style={value && !customActive ? stackStyle(previewStack(value)) : undefined}
+      >
+        {options.map((opt) => (
+          <option key={opt.value} value={opt.value}>{opt.label}</option>
         ))}
+        <option value={CUSTOM_FONT_SENTINEL}>Custom…</option>
+      </select>
+      {customActive && (
+        <div className="space-y-1">
+          <input
+            type="text"
+            value={customFontDraft}
+            onChange={(e) => handleCustomFontInput(e.target.value)}
+            placeholder={customPlaceholder}
+            aria-label={customAriaLabel}
+            maxLength={MAX_FONT_FAMILY_LENGTH}
+            autoFocus={!customFontDraft}
+            spellCheck={false}
+            className="w-full px-3 py-1.5 text-sm rounded-md bg-muted/50 border border-border text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:ring-1 focus:ring-ring"
+            style={stackStyle(previewStack(customFontDraft))}
+          />
+          <div className="text-[11px]" aria-live="polite">
+            {!normalizeFontFamilyName(customFontDraft) ? (
+              <span className="text-muted-foreground">Any font installed on this machine works — type its family name.</span>
+            ) : customFontInstalled === true ? (
+              <span className="text-success">✓ Found on this machine</span>
+            ) : customFontInstalled === false ? (
+              <span className="text-warning">{notFoundText}</span>
+            ) : null}
+          </div>
+        </div>
+      )}
+      {value && (
+        <div
+          className={`text-xs text-muted-foreground px-1 py-1 rounded bg-muted/30 ${previewClassName}`}
+          style={stackStyle(previewStack(value))}
+        >
+          {previewText}
+        </div>
+      )}
+    </div>
+  );
+};
+
+/**
+ * Experimental (the owner, 2026-10-27: "its own page on settings", the last
+ * tab): each experimental setting, off by default. Today one, code review's
+ * Edit Code to Suggest (`editSuggestions`, the
+ * `plannotator-experimental-edit-suggestions` cookie, unchanged).
+ */
+const ExperimentalTab: React.FC = () => {
+  const editSuggestions = useConfigValue('editSuggestions');
+  return (
+    <div className="space-y-3" data-settings-experimental="">
+      <div className="text-xs text-muted-foreground">
+        Features still being tried. Each stays off until you turn it on.
       </div>
-      </div>
+      <ToggleSwitch
+        checked={editSuggestions}
+        onChange={(v) => configStore.set('editSuggestions', v)}
+        label="Edit Code to Suggest"
+        description="Edit a file in place in the all-files view; your net change becomes a suggestion comment. Files are never written from the browser. Uses an experimental upstream editor."
+      />
     </div>
   );
 };
@@ -568,35 +886,14 @@ const ReviewDisplayTab: React.FC<{ isCompactTouchLayout?: boolean }> = ({ isComp
   const diffShowBackground = useConfigValue('diffShowBackground');
   const diffLineBgIntensity = useConfigValue('diffLineBgIntensity');
   const diffHideWhitespace = useConfigValue('diffHideWhitespace');
-  const editSuggestions = useConfigValue('editSuggestions');
   const diffExpandUnchanged = useConfigValue('diffExpandUnchanged');
   const diffFontFamily = useConfigValue('diffFontFamily');
   const diffFontSize = useConfigValue('diffFontSize');
   const tokenHoverTrigger = useConfigValue('tokenHoverTrigger');
   const tokenHoverDelay = useConfigValue('tokenHoverDelay');
 
-  // Load font for the preview swatch
-  useEffect(() => {
-    if (diffFontFamily) loadDiffFont(diffFontFamily);
-  }, [diffFontFamily]);
-
   return (
     <>
-      {/* Experimental: edit code to author suggestions */}
-      <div className="space-y-3">
-        <div className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-          Experimental
-        </div>
-        <ToggleSwitch
-          checked={editSuggestions}
-          onChange={(v) => configStore.set('editSuggestions', v)}
-          label="Edit Code to Suggest"
-          description="Edit a file in place in the all-files view; your net change becomes a suggestion comment. Files are never written from the browser. Uses an experimental upstream editor."
-        />
-      </div>
-
-      <div className="border-t border-border" />
-
       {/* Hover cards (internally tokenHover*; the label is what changed, not
           the ids). One trigger select rather than a toggle plus a mode: `Off`
           is a value of the same question, so there is no unreachable
@@ -633,30 +930,20 @@ const ReviewDisplayTab: React.FC<{ isCompactTouchLayout?: boolean }> = ({ isComp
       <div className="border-t border-border" />
 
       {/* Font Family */}
-      <div className="space-y-2">
-        <div>
-          <div className="text-sm font-medium">Code Font</div>
-          <div className="text-xs text-muted-foreground">Font family for diff code lines</div>
-        </div>
-        <select
-          value={diffFontFamily}
-          onChange={(e) => configStore.set('diffFontFamily', e.target.value)}
-          className="w-full px-3 py-1.5 text-sm rounded-md bg-muted/50 border border-border text-foreground"
-          style={diffFontFamily ? { fontFamily: `'${diffFontFamily}', monospace` } : undefined}
-        >
-          {DIFF_FONT_OPTIONS.map((opt) => (
-            <option key={opt.value} value={opt.value}>{opt.label}</option>
-          ))}
-        </select>
-        {diffFontFamily && (
-          <div
-            className="text-xs text-muted-foreground px-1 py-1 rounded bg-muted/30 font-mono"
-            style={{ fontFamily: `'${diffFontFamily}', monospace` }}
-          >
-            Preview: const x = fn(42);
-          </div>
-        )}
-      </div>
+      <FontFamilyField
+        label="Code Font"
+        description="Font family for diff code lines"
+        value={diffFontFamily}
+        onSave={(v) => configStore.set('diffFontFamily', v)}
+        options={DIFF_FONT_OPTIONS}
+        previewStack={monoFontStack}
+        previewText="Preview: const x = fn(42);"
+        customAriaLabel="Custom code font name"
+        customPlaceholder="Font name as installed, e.g. Iosevka"
+        notFoundText="Not found — diffs will fall back to monospace"
+        loadFont={loadDiffFont}
+        previewClassName="font-mono"
+      />
 
       <div className="border-t border-border" />
 
@@ -668,7 +955,7 @@ const ReviewDisplayTab: React.FC<{ isCompactTouchLayout?: boolean }> = ({ isComp
             <div className="text-xs text-muted-foreground">Font size for diff code lines</div>
           </div>
           <div className="text-xs tabular-nums text-muted-foreground min-w-[4ch] text-right">
-            {diffFontSize || 'Auto'}
+            {normalizeCssFontSize(diffFontSize) || 'Auto'}
           </div>
         </div>
         <div className="flex items-center gap-2">
@@ -1007,7 +1294,7 @@ const CommentsTab: React.FC = () => {
   );
 };
 
-export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange, onIdentityChange, origin, mode = 'plan', annotateParity = false, onUIPreferencesChange, externalOpen, onExternalClose, aiProviders = [], gitUser, autoUpdateSetting, updateCheckSetting, agentToolSetting, onAgentToolChange, sinceBaseUnavailable, isCompactTouchLayout = false, onDetectObsidianVaults, agentTerminalAvailable = false, webmcpAvailable = false }) => {
+export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange, onIdentityChange, origin, mode = 'plan', annotateParity = false, onUIPreferencesChange, onPermissionModeChange, externalOpen, onExternalClose, aiProviders = [], gitUser, autoUpdateSetting, updateCheckSetting, cookieHostSetting, packageChangesSetting, agentToolSetting, onAgentToolChange, sinceBaseUnavailable, isCompactTouchLayout = false, onDetectObsidianVaults, agentTerminalAvailable = false, webmcpAvailable = false, hideEnterSavesComment = false, showDocumentTextSize = false, showDocumentFont = false }) => {
   const webmcpTools = useWebMcpToolsEnabled();
   const autoUpdate = useConfigValue('autoUpdate');
   const updateChecksOn = updateCheckSetting ? updateCheckSetting.on : true;
@@ -1040,7 +1327,10 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
   const [activeTab, setActiveTab] = useState<SettingsTab>('general');
   const gridEnabled = useConfigValue('gridEnabled');
   const diagramShadow = useConfigValue('diagramShadow');
+  const documentTextSize = useConfigValue('documentTextSize');
+  const documentFontFamily = useConfigValue('documentFontFamily');
   const vimModeEnabled = useConfigValue('vimModeEnabled');
+  const enterSavesComment = useConfigValue('enterSavesComment');
   const vimHudEnabled = useConfigValue('vimHudEnabled');
   const vimHudKeyPanelEnabled = useConfigValue('vimHudKeyPanelEnabled');
   const agentTerminalSide = useConfigValue('agentTerminalSide');
@@ -1057,6 +1347,7 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
   const [vaultsLoading, setVaultsLoading] = useState(false);
   const [bear, setBear] = useState<BearSettings>({ enabled: false, customTags: '', tagPosition: 'append', autoSave: false });
   const [octarine, setOctarine] = useState<OctarineSettings>({ enabled: false, workspace: '', folder: 'plannotator', autoSave: false });
+  const [notion, setNotion] = useState<NotionSettings>({ enabled: false, parentPageId: '', autoSave: false });
   // The agent switch default depends on the surface: plan approval hands off to
   // the build agent, review feedback stays on the current agent.
   const agentSurface: AgentSwitchSurface = mode === 'review' ? 'review' : 'plan';
@@ -1089,7 +1380,7 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
       t.push({ id: 'labels', label: 'Labels' });
     }
     if (mode === 'review') {
-      t.push({ id: 'git', label: 'Git' });
+      t.push({ id: 'review', label: 'Review' });
       t.push({ id: 'display', label: 'Editor' });
       t.push({ id: 'analysis', label: 'Analysis' });
       t.push({ id: 'comments', label: 'Comments' });
@@ -1110,12 +1401,16 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
   const integrationTabs: { id: SettingsTab; label: string }[] = [
     { id: 'files', label: 'Files' },
     ...(mode === 'plan' || annotateDocumentTabs
-      ? [{ id: 'obsidian' as SettingsTab, label: 'Obsidian' }, { id: 'bear' as SettingsTab, label: 'Bear' }, { id: 'octarine' as SettingsTab, label: 'Octarine' }]
+      ? [{ id: 'obsidian' as SettingsTab, label: 'Obsidian' }, { id: 'bear' as SettingsTab, label: 'Bear' }, { id: 'octarine' as SettingsTab, label: 'Octarine' }, ...(isNotionAvailable() ? [{ id: 'notion' as SettingsTab, label: 'Notion' }] : [])]
       : []),
   ];
+  // Experimental is the last tab, on its own below the integrations (the owner,
+  // 2026-10-27). Only where it has a setting: code review's Edit Code to Suggest.
+  const experimentalTabs: { id: SettingsTab; label: string }[] = mode === 'review' ? [{ id: 'experimental', label: 'Experimental' }] : [];
   const obsidianDefaultSaveAvailable = obsidian.enabled && getEffectiveVaultPath(obsidian).trim().length > 0;
   const bearDefaultSaveAvailable = bear.enabled;
   const octarineDefaultSaveAvailable = octarine.enabled && octarine.workspace.trim().length > 0;
+  const notionDefaultSaveAvailable = getNotionParentPageId(notion) !== null;
 
   // Sync external open state
   useEffect(() => {
@@ -1131,6 +1426,7 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
       setObsidian(getObsidianSettings());
       setBear(getBearSettings());
       setOctarine(getOctarineSettings());
+      setNotion(getNotionSettings());
       setAgent(getAgentSwitchSettings(agentSurface));
       setPlanSave(getPlanSaveSettings());
       setUiPrefs(getUIPreferences());
@@ -1156,7 +1452,9 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
       defaultNotesApp === 'download' ||
       (defaultNotesApp === 'obsidian' && obsidianDefaultSaveAvailable) ||
       (defaultNotesApp === 'bear' && bearDefaultSaveAvailable) ||
-      (defaultNotesApp === 'octarine' && octarineDefaultSaveAvailable);
+      (defaultNotesApp === 'octarine' && octarineDefaultSaveAvailable) ||
+      // A session without Notion (remote, or no NOTION_TOKEN) keeps the choice for the next one.
+      (defaultNotesApp === 'notion' && (notionDefaultSaveAvailable || !isNotionAvailable()));
 
     if (!defaultSaveAvailable) {
       setDefaultNotesApp('ask');
@@ -1168,6 +1466,7 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
     obsidianDefaultSaveAvailable,
     bearDefaultSaveAvailable,
     octarineDefaultSaveAvailable,
+    notionDefaultSaveAvailable,
   ]);
 
   // Fetch detected vaults when Obsidian is enabled
@@ -1224,6 +1523,12 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
     saveOctarineSettings(newSettings);
   };
 
+  const handleNotionChange = (updates: Partial<NotionSettings>) => {
+    const newSettings = { ...notion, ...updates };
+    setNotion(newSettings);
+    saveNotionSettings(newSettings);
+  };
+
   const handleAgentChange = (switchTo: AgentSwitchSettings['switchTo'], customName?: string) => {
     const newSettings = { switchTo, customName: customName ?? agent.customName };
     setAgent(newSettings);
@@ -1246,6 +1551,7 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
   const handlePermissionModeChange = (mode: PermissionMode) => {
     setPermissionMode(mode);
     savePermissionModeSettings(mode);
+    onPermissionModeChange?.(mode);
   };
 
   const handleDefaultNotesAppChange = (app: DefaultNotesApp) => {
@@ -1331,7 +1637,7 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
             <div className="flex flex-col md:flex-row md:min-h-[420px] flex-1 min-h-0 overflow-hidden">
               {/* Mobile: horizontal tab bar */}
               <nav className="md:hidden flex overflow-x-auto border-b border-border px-2 py-1.5 gap-1 flex-shrink-0">
-                {[...mainTabs, ...integrationTabs].map(tab => (
+                {[...mainTabs, ...integrationTabs, ...experimentalTabs].map(tab => (
                   <button
                     key={tab.id}
                     onClick={() => setActiveTab(tab.id)}
@@ -1386,6 +1692,26 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
                     </div>
                   </>
                 )}
+                {experimentalTabs.length > 0 && (
+                  <>
+                    <div className="mx-2 my-2 border-t border-border/50" />
+                    <div className="space-y-0.5">
+                      {experimentalTabs.map(tab => (
+                        <button
+                          key={tab.id}
+                          onClick={() => setActiveTab(tab.id)}
+                          className={`w-full text-left px-3 py-1.5 rounded text-sm transition-colors ${
+                            activeTab === tab.id
+                              ? 'bg-primary/10 text-primary font-medium'
+                              : 'text-muted-foreground hover:text-foreground hover:bg-muted/50'
+                          }`}
+                        >
+                          {tab.label}
+                        </button>
+                      ))}
+                    </div>
+                  </>
+                )}
               </nav>
 
               {/* Content — scrollable */}
@@ -1447,6 +1773,22 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
                       </div>
                     </div>
 
+                    {/* Enter saves a comment (#1934): opt-in, cookie-only.
+                        Governs every comment composer; never the decision keys. */}
+                    {!hideEnterSavesComment && (
+                      <>
+                        <div className="border-t border-border" />
+                        <div data-enter-saves-comment-setting="true">
+                          <ToggleSwitch
+                            checked={enterSavesComment}
+                            onChange={(v) => configStore.set('enterSavesComment', v)}
+                            label="Enter saves a comment"
+                            description={`Shift+Enter adds a new line. ${modKeyWord}+Enter still saves.`}
+                          />
+                        </div>
+                      </>
+                    )}
+
                     {/* Update notices: on by default. Writes updateCheck to
                         ~/.plannotator/config.json; off makes no request to GitHub. */}
                     {updateCheckSetting && (
@@ -1460,7 +1802,7 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
                           description={
                             updateCheckSetting.env !== undefined
                               ? 'Set by PLANNOTATOR_UPDATE_CHECK in your environment.'
-                              : 'This computer asks GitHub once a day, never your browser. Off makes no request at all.'
+                              : 'This computer asks GitHub every few minutes, never your browser. Off makes no request at all.'
                           }
                         />
                       </>
@@ -1488,6 +1830,28 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
                       </>
                     )}
 
+                    {/* Open Plannotator at plannotator.localhost (#2184): writes or
+                        removes urlHost "plannotator.localhost" in config.json.
+                        Locked while PLANNOTATOR_URL_HOST is set or config.json
+                        holds another urlHost, which it never replaces. */}
+                    {cookieHostSetting && (
+                      <>
+                        <div className="border-t border-border" />
+                        <div data-cookie-host-setting={cookieHostSettingState(cookieHostSetting)}>
+                          <ToggleSwitch
+                            checked={cookieHostSetting.on}
+                            onChange={(v) => cookieHostSetting.onChange(v)}
+                            disabled={cookieHostSetting.env !== undefined || cookieHostSetting.urlHost !== undefined}
+                            label="Open Plannotator at plannotator.localhost"
+                            description={cookieHostDescription(cookieHostSetting)}
+                          />
+                          {cookieHostSetting.error && (
+                            <div role="alert" className="mt-1 text-xs text-destructive">{cookieHostSetting.error}</div>
+                          )}
+                        </div>
+                      </>
+                    )}
+
                     {/* The `plannotator` agent tool switch: only where the
                         server reports a tool host (Claude Code mod, Pi,
                         OpenCode 2). Writes agentTool to config.json; applies
@@ -1709,9 +2073,9 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
                 {/* === THEME TAB === */}
                 {activeTab === 'theme' && <ThemeTab onPreview={() => { setShowDialog(false); setThemePreview(true); }} />}
 
-                {/* === GIT TAB === */}
-                {activeTab === 'git' && mode === 'review' && (
-                  <GitTab sinceBaseUnavailable={sinceBaseUnavailable} />
+                {/* === REVIEW TAB === */}
+                {activeTab === 'review' && mode === 'review' && (
+                  <ReviewTab sinceBaseUnavailable={sinceBaseUnavailable} />
                 )}
 
                 {/* === DISPLAY TAB === */}
@@ -1719,12 +2083,64 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
                   <ReviewDisplayTab isCompactTouchLayout={isCompactTouchLayout} />
                 )}
 
+                {activeTab === 'experimental' && mode === 'review' && <ExperimentalTab />}
+
                 {activeTab === 'analysis' && mode === 'review' && (
-                  <ReviewAnalysisTab />
+                  <ReviewAnalysisTab packageChangesSetting={packageChangesSetting} />
                 )}
 
                 {activeTab === 'display' && mode !== 'review' && (
                   <>
+                    {/* Text size (#2066): the document only, not the app around it */}
+                    {showDocumentTextSize && (<>
+                    <div className="space-y-3" data-document-text-size-setting>
+                      <div>
+                        <div className="text-sm font-medium" id="document-text-size-label">Text size</div>
+                        <div className="text-xs text-muted-foreground">
+                          {mode === 'annotate' ? 'Body text of the document' : 'Body text of the plan'}, in px ({DEFAULT_DOCUMENT_TEXT_SIZE} is the default)
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-1 bg-muted/50 rounded-lg p-0.5" role="group" aria-labelledby="document-text-size-label">
+                        {DOCUMENT_TEXT_SIZE_OPTIONS.map((value) => (
+                          <button
+                            key={value}
+                            onClick={() => configStore.set('documentTextSize', value)}
+                            aria-pressed={documentTextSize === value}
+                            className={`flex-1 px-3 py-1.5 text-xs rounded-md transition-colors tabular-nums ${
+                              documentTextSize === value
+                                ? 'bg-background text-foreground shadow-sm font-medium'
+                                : 'text-muted-foreground hover:text-foreground'
+                            }`}
+                          >
+                            {value}
+                          </button>
+                        ))}
+                      </div>
+                    </div>
+
+                    <div className="border-t border-border" />
+                    </>)}
+
+                    {/* Document font (#1657): the document only; code keeps its font */}
+                    {showDocumentFont && (<>
+                    <div data-document-font-setting>
+                      <FontFamilyField
+                        label="Document font"
+                        description={`${mode === 'annotate' ? 'Text of the document' : 'Text of the plan'}; code keeps its monospace font`}
+                        value={documentFontFamily}
+                        onSave={(v) => configStore.set('documentFontFamily', v)}
+                        options={DOCUMENT_FONT_OPTIONS}
+                        previewStack={documentFontStack}
+                        previewText="Preview: The quick brown fox jumps over the lazy dog."
+                        customAriaLabel="Custom document font name"
+                        customPlaceholder="Font name as installed, e.g. Iowan Old Style"
+                        notFoundText="Not found — the document keeps the theme font"
+                      />
+                    </div>
+
+                    <div className="border-t border-border" />
+                    </>)}
+
                     {/* Auto-open Sidebar */}
                     <div className="flex items-center justify-between">
                       <div>
@@ -1783,8 +2199,12 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
                         <div className="text-sm font-medium">Grid Background</div>
                         <div className="text-xs text-muted-foreground">Show the plan as a floating card on a grid</div>
                       </div>
-                      <button role="switch" aria-checked={gridEnabled}
-                        onClick={() => configStore.set('gridEnabled', !gridEnabled)}
+                      <button role="switch" aria-checked={gridEnabled} aria-label="Grid Background"
+                        onClick={() => {
+                          configStore.set('gridEnabled', !gridEnabled);
+                          // A Settings flip is a real choice: keep it across reloads.
+                          markLookAndFeelChoiceResolved();
+                        }}
                         className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${gridEnabled ? 'bg-primary' : 'bg-muted'}`}>
                         <span className={`inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform ${gridEnabled ? 'translate-x-6' : 'translate-x-1'}`} />
                       </button>
@@ -2014,13 +2434,14 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
                         {obsidianDefaultSaveAvailable && <option value="obsidian">Obsidian</option>}
                         {bearDefaultSaveAvailable && <option value="bear">Bear</option>}
                         {octarineDefaultSaveAvailable && <option value="octarine">Octarine</option>}
+                        {(notionDefaultSaveAvailable || defaultNotesApp === 'notion') && <option value="notion">Notion</option>}
                       </select>
                       <div className="text-[10px] text-muted-foreground/70">
                         {defaultNotesApp === 'ask'
                           ? 'Opens Export dialog with Notes tab'
                           : defaultNotesApp === 'download'
                             ? `${modKey}+S downloads the annotations file`
-                            : `${modKey}+S saves directly to ${{ obsidian: 'Obsidian', bear: 'Bear', octarine: 'Octarine' }[defaultNotesApp] ?? defaultNotesApp}`}
+                            : `${modKey}+S saves directly to ${{ obsidian: 'Obsidian', bear: 'Bear', octarine: 'Octarine', notion: 'Notion' }[defaultNotesApp] ?? defaultNotesApp}`}
                       </div>
                     </div>
 
@@ -2156,7 +2577,7 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
                                   onClick={() => handleFileBrowserChange({
                                     directories: fileBrowserSettings.directories.filter((d) => d !== dir),
                                   })}
-                                  className="p-1.5 rounded text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors opacity-0 group-hover:opacity-100"
+                                  className="p-1.5 rounded text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 [@media(hover:none)]:opacity-100"
                                   title="Remove directory"
                                 >
                                   <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
@@ -2574,6 +2995,76 @@ tags: [${mode === 'annotate' ? 'plannotator' : 'plan'}, ...]
                   </>
                 )}
 
+                {/* === NOTION TAB === */}
+                {activeTab === 'notion' && (
+                  <>
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <div className="text-sm font-medium">Notion</div>
+                        <div className="text-xs text-muted-foreground">
+                          {mode === 'annotate' ? 'Save documents to Notion from the Options menu. When on, plan review also saves each approved plan here.' : 'Save approved plans as Notion pages'}
+                        </div>
+                      </div>
+                      <button
+                        role="switch"
+                        aria-checked={notion.enabled}
+                        onClick={() => handleNotionChange({ enabled: !notion.enabled })}
+                        className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+                          notion.enabled ? 'bg-primary' : 'bg-muted'
+                        }`}
+                      >
+                        <span
+                          className={`inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform ${
+                            notion.enabled ? 'translate-x-6' : 'translate-x-1'
+                          }`}
+                        />
+                      </button>
+                    </div>
+                    {notion.enabled && (
+                      <div className="mt-3 space-y-3">
+                        <div className="space-y-1.5 pl-0.5">
+                          <label className="text-xs text-muted-foreground">Parent Page</label>
+                          <input
+                            type="text"
+                            value={notion.parentPageId}
+                            onChange={(e) => handleNotionChange({ parentPageId: e.target.value })}
+                            placeholder="https://www.notion.so/..."
+                            className="w-full px-3 py-2 bg-muted rounded-lg text-xs font-mono placeholder:text-muted-foreground/50 focus:outline-none focus:ring-1 focus:ring-primary/50"
+                          />
+                          <div className="text-[10px] text-muted-foreground">
+                            A page link or ID. Each save adds a page under it. Share it with your Notion integration first.
+                          </div>
+                        </div>
+
+                        {mode === 'plan' && (<>
+                        <div className="border-t border-border/30" />
+
+                        <div className="flex items-center justify-between">
+                          <div>
+                            <div className="text-xs font-medium">Auto-save on Plan Arrival</div>
+                            <div className="text-[10px] text-muted-foreground">
+                              Automatically save to Notion when a plan loads, before you approve or deny
+                            </div>
+                          </div>
+                          <button
+                            role="switch"
+                            aria-checked={notion.autoSave}
+                            onClick={() => handleNotionChange({ autoSave: !notion.autoSave })}
+                            className={`relative inline-flex h-6 w-11 flex-shrink-0 items-center rounded-full transition-colors ${
+                              notion.autoSave ? 'bg-primary' : 'bg-muted'
+                            }`}
+                          >
+                            <span className={`inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform ${
+                              notion.autoSave ? 'translate-x-6' : 'translate-x-1'
+                            }`} />
+                          </button>
+                        </div>
+                        </>)}
+                      </div>
+                    )}
+                  </>
+                )}
+
               </div>
               </OverlayScrollArea>
             </div>