cli-jaw 2.17.38 → 2.17.39

package/public/manager/src/settings/pages/Display.tsx

@@ -1,8 +1,10 @@
-// Phase 2 — Display page: tui.* fields.
+// Display page: conversation presentation and tui.* fields.
 
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from 'react';
 import type { SettingsPageProps, DirtyEntry } from '../types';
 import { SelectField, NumberField } from '../fields';
+import { isPresentationMode, presentationMode, type PresentationMode } from '../../../../../src/shared/presentation';
+import { describeError } from '../components/error-normalize';
 import {
     SettingsSection,
     PageError,
@@ -22,6 +24,7 @@ type TuiBlock = {
 
 type DisplaySnapshot = {
     tui?: TuiBlock;
+    presentation?: { mode?: PresentationMode };
     [key: string]: unknown;
 };
 
@@ -44,7 +47,8 @@ const DIFF_OPTIONS = [
     { value: 'side-by-side', label: 'side-by-side' },
 ];
 
-const TUI_KEYS = [
+const DISPLAY_KEYS = [
+    'presentation.mode',
     'tui.themeSeed',
     'tui.keymapPreset',
     'tui.pasteCollapseLines',
@@ -53,37 +57,76 @@ const TUI_KEYS = [
 ] as const;
 
 export default function Display({ port, client, dirty, registerSave }: SettingsPageProps) {
-    const { state, refresh, setData } = usePageSnapshot<DisplaySnapshot>(client, '/api/settings');
+    const { state, refresh, setData } = usePageSnapshot<DisplaySnapshot>(client, '/api/settings', [port]);
     const [draft, setDraft] = useState<TuiBlock>({});
+    const pendingMode = useSyncExternalStore(dirty.subscribe,
+        () => dirty.pending.get('presentation.mode')?.value, () => undefined);
+    const mode = isPresentationMode(pendingMode) ? pendingMode
+        : presentationMode(state.kind === 'ready' ? state.data : undefined);
+    const [saveError, setSaveError] = useState<string | null>(null);
+    const [saving, setSaving] = useState(false);
+    const activeInstance = useRef<{ client: SettingsPageProps['client']; port: number } | null>(null);
+    const activeSave = useRef<{ instance: NonNullable<typeof activeInstance.current>; promise: Promise<void> } | null>(null);
+
+    // Each committed instance gets a distinct generation, including A -> B -> A.
+    // Layout cleanup fences pending writes before they can resume after a commit.
+    useLayoutEffect(() => {
+        activeInstance.current = { client, port };
+        activeSave.current = null;
+        setSaving(false);
+        return () => { activeInstance.current = null; activeSave.current = null; };
+    }, [client, port, dirty]);
 
     useEffect(() => {
-        if (state.kind === 'ready') setDraft({ ...(state.data.tui || {}) });
+        if (state.kind === 'ready') {
+            setDraft({ ...(state.data.tui || {}) });
+        }
     }, [state]);
 
     useEffect(() => {
+        setDraft({});
+        setSaveError(null);
         return () => {
-            for (const key of TUI_KEYS) dirty.remove(key);
+            for (const key of DISPLAY_KEYS) dirty.remove(key);
         };
-    }, [dirty]);
+    }, [client, port, dirty]);
 
     const setEntry = useCallback(
         (key: string, entry: DirtyEntry) => dirty.set(key, entry),
         [dirty],
     );
 
-    const onSave = useCallback(async () => {
+    const onSave = useCallback((): Promise<void> => {
+        const instance = activeInstance.current;
+        if (!instance || instance.client !== client || instance.port !== port) return Promise.resolve();
+        if (activeSave.current?.instance === instance) return activeSave.current.promise;
+        setSaveError(null);
         const bundle = dirty.saveBundle();
-        if (Object.keys(bundle).length === 0) return;
+        if (Object.keys(bundle).length === 0) return Promise.resolve();
         const patch = expandPatch(bundle);
-        const updated = await client.put<DisplaySnapshot>('/api/settings', patch);
-        const fresh = (updated && typeof updated === 'object' && 'data' in updated
-            ? (updated as { data: DisplaySnapshot }).data
-            : updated) as DisplaySnapshot;
-        dirty.clear();
-        setDraft({ ...(fresh.tui || {}) });
-        setData(fresh);
-        await refresh();
-    }, [client, dirty, refresh, setData]);
+        const submitted = new Map([...dirty.pending].filter(([key]) => Object.hasOwn(bundle, key)));
+        setSaving(true);
+        const operation = { instance, promise: Promise.resolve() };
+        operation.promise = Promise.resolve().then(async () => {
+            if (activeInstance.current !== instance) return;
+            const updated = await client.put<DisplaySnapshot>('/api/settings', patch);
+            if (activeInstance.current !== instance) return;
+            const fresh = (updated && typeof updated === 'object' && 'data' in updated
+                ? (updated as { data: DisplaySnapshot }).data
+                : updated) as DisplaySnapshot;
+            // A completion acknowledges only entries actually submitted by this
+            // operation, never a newer or unrelated write into the dirty store.
+            for (const [key, entry] of submitted) if (dirty.pending.get(key) === entry) dirty.remove(key);
+            setDraft({ ...(fresh.tui || {}) });
+            setData(fresh);
+            await refresh();
+        }).finally(() => {
+            if (activeSave.current === operation) activeSave.current = null;
+            if (activeInstance.current === instance) setSaving(false);
+        });
+        activeSave.current = operation;
+        return operation.promise;
+    }, [client, port, dirty, refresh, setData]);
 
     useEffect(() => {
         if (!registerSave) return;
@@ -102,19 +145,49 @@ export default function Display({ port, client, dirty, registerSave }: SettingsP
             className="settings-page-form"
             onSubmit={(event) => {
                 event.preventDefault();
-                void onSave();
+                const instance = activeInstance.current;
+                void onSave().catch((error: unknown) => {
+                    if (instance && activeInstance.current === instance) setSaveError(describeError(error));
+                });
             }}
         >
+            {saveError ? <PageError message={saveError} /> : null}
+            <SettingsSection
+                title="Conversation display"
+                hint="Changes conversation display only. Runtime and permissions stay unchanged."
+            >
+                <SelectField
+                    disabled={saving}
+                    id="display-presentation-mode"
+                    label="Presentation"
+                    value={mode}
+                    options={[
+                        { value: 'activity', label: 'Activity (default)' },
+                        { value: 'legacy', label: 'Legacy transcript' },
+                    ]}
+                    onChange={(next) => {
+                        if (activeSave.current) return;
+                        if (next !== 'activity' && next !== 'legacy') return;
+                        setEntry('presentation.mode', {
+                            value: next,
+                            original: presentationMode(state.data),
+                            valid: true,
+                        });
+                    }}
+                />
+            </SettingsSection>
             <SettingsSection
                 title="Display"
                 hint={`TUI options applied to /i/${port}.`}
             >
                 <SelectField
+                    disabled={saving}
                     id="display-themeSeed"
                     label="Theme seed"
                     value={draft.themeSeed ?? original.themeSeed ?? 'jaw-default'}
                     options={THEME_OPTIONS}
                     onChange={(next) => {
+                        if (activeSave.current) return;
                         setDraft({ ...draft, themeSeed: next });
                         setEntry('tui.themeSeed', {
                             value: next,
@@ -124,11 +197,13 @@ export default function Display({ port, client, dirty, registerSave }: SettingsP
                     }}
                 />
                 <SelectField
+                    disabled={saving}
                     id="display-keymapPreset"
                     label="Keymap preset"
                     value={draft.keymapPreset ?? original.keymapPreset ?? 'default'}
                     options={KEYMAP_OPTIONS}
                     onChange={(next) => {
+                        if (activeSave.current) return;
                         setDraft({ ...draft, keymapPreset: next });
                         setEntry('tui.keymapPreset', {
                             value: next,
@@ -138,12 +213,14 @@ export default function Display({ port, client, dirty, registerSave }: SettingsP
                     }}
                 />
                 <NumberField
+                    disabled={saving}
                     id="display-pasteCollapseLines"
                     label="Paste collapse — lines"
                     value={draft.pasteCollapseLines ?? original.pasteCollapseLines ?? 2}
                     min={0}
                     step={1}
                     onChange={(next) => {
+                        if (activeSave.current) return;
                         setDraft({ ...draft, pasteCollapseLines: next });
                         setEntry('tui.pasteCollapseLines', {
                             value: next,
@@ -153,12 +230,14 @@ export default function Display({ port, client, dirty, registerSave }: SettingsP
                     }}
                 />
                 <NumberField
+                    disabled={saving}
                     id="display-pasteCollapseChars"
                     label="Paste collapse — chars"
                     value={draft.pasteCollapseChars ?? original.pasteCollapseChars ?? 160}
                     min={0}
                     step={10}
                     onChange={(next) => {
+                        if (activeSave.current) return;
                         setDraft({ ...draft, pasteCollapseChars: next });
                         setEntry('tui.pasteCollapseChars', {
                             value: next,
@@ -168,11 +247,13 @@ export default function Display({ port, client, dirty, registerSave }: SettingsP
                     }}
                 />
                 <SelectField
+                    disabled={saving}
                     id="display-diffStyle"
                     label="Diff style"
                     value={draft.diffStyle ?? original.diffStyle ?? 'summary'}
                     options={DIFF_OPTIONS}
                     onChange={(next) => {
+                        if (activeSave.current) return;
                         setDraft({ ...draft, diffStyle: next });
                         setEntry('tui.diffStyle', {
                             value: next,

package/public/manager/src/settings/pages/ModelProvider.tsx

@@ -1,8 +1,9 @@
 // Phase 2 — Model & Provider page: per-CLI rows + codex extras +
 // fallback chip list + active-overrides table with reset button.
 
-import { useCallback, useEffect, useState } from 'react';
-import type { SettingsPageProps, DirtyEntry } from '../types';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import type { SettingsPageProps, SettingsClient, DirtyEntry } from '../types';
+import { describeError } from '../components/error-normalize';
 import { ChipListField, NumberField } from '../fields';
 import {
     SettingsSection,
@@ -10,8 +11,9 @@ import {
     PageLoading,
     PageOffline,
     usePageSnapshot,
+    type SnapshotState,
 } from './page-shell';
-import { PerCliRow } from './components/PerCliRow';
+import { PerCliRow, type PiRegistration } from './components/PerCliRow';
 import { metaFor, normalizeCliMetaRegistry } from './components/agent/agent-meta';
 import type { CliMeta, PerCliEntry } from './components/agent/agent-meta';
 import type { PiSettingsView } from './components/pi-profile';
@@ -24,6 +26,15 @@ type ModelSnapshot = {
     pi?: PiSettingsView;
     [key: string]: unknown;
 };
+type ModelInstance = Pick<SettingsPageProps, 'client' | 'port' | 'dirty'>;
+type BoundSnapshot = { instance: ModelInstance; value: ModelSnapshot };
+const ownsModelKey = (key: string) => key === 'fallbackOrder' || key.startsWith('perCli.');
+
+function savedModelSnapshot(updated: unknown): ModelSnapshot {
+    const value = updated && typeof updated === 'object' && 'data' in updated ? updated.data : updated;
+    if (!value || typeof value !== 'object' || Array.isArray(value)) throw new Error('Invalid settings response. Refresh before retrying.');
+    return value as ModelSnapshot;
+}
 
 export function orderModelCliKeys(keys: string[]): string[] {
     return [...keys].sort((a, b) => {
@@ -51,26 +62,53 @@ export function buildResetOverridesPatch(snapshot: ModelSnapshot): {
 }
 
 export default function ModelProvider({ port, client, dirty, registerSave }: SettingsPageProps) {
-    const { state, refresh, setData } = usePageSnapshot<ModelSnapshot>(client, '/api/settings');
+    const instance = useMemo<ModelInstance>(() => ({ client, port, dirty }), [client, port, dirty]);
+    const activeInstance = useRef<ModelInstance | null>(null);
+    const activeOperation = useRef<{ instance: ModelInstance; kind: 'save' | 'reset'; promise: Promise<void> } | null>(null);
+    const metadataGeneration = useRef(0);
+    // This private read adapter tags the helper's result, not the HTTP payload.
+    // It is never passed to controls or writes. Even a ready result batched with
+    // an instance change cannot be displayed as the new instance's settings.
+    const snapshotClient = useMemo<SettingsClient>(() => ({ ...client,
+        get: async <T,>(path: string, init?: RequestInit) => ({ instance,
+            value: await client.get<ModelSnapshot>(path, init) }) as T,
+    }), [client, instance]);
+    const { state: boundState, refresh, setData: setBoundData } = usePageSnapshot<BoundSnapshot>(snapshotClient, '/api/settings', [port]);
+    const state = useMemo<SnapshotState<ModelSnapshot>>(() => boundState.kind === 'ready'
+        ? boundState.data.instance === instance ? { kind: 'ready', data: boundState.data.value } : { kind: 'loading' }
+        : boundState, [boundState, instance]);
+    const setData = useCallback((value: ModelSnapshot) => setBoundData({ instance, value }), [instance, setBoundData]);
     const [perCliDraft, setPerCliDraft] = useState<Record<string, PerCliEntry>>({});
     const [piDraft, setPiDraft] = useState<PiSettingsView | undefined>(undefined);
     const [fallback, setFallback] = useState<string[]>([]);
     const [codexCtx, setCodexCtx] = useState<{ contextWindowSize?: number; contextWindowCompactLimit?: number }>({});
     const [resetting, setResetting] = useState(false);
     const [resetError, setResetError] = useState<string | null>(null);
+    const [saveError, setSaveError] = useState<string | null>(null);
+    const [saving, setSaving] = useState(false);
     const [cliMeta, setCliMeta] = useState<Record<string, CliMeta> | null>(null);
 
+    useLayoutEffect(() => {
+        activeInstance.current = instance; activeOperation.current = null; ++metadataGeneration.current;
+        setSaving(false); setResetting(false); setSaveError(null); setResetError(null); setCliMeta(null);
+        return () => { activeInstance.current = null; activeOperation.current = null; ++metadataGeneration.current; };
+    }, [instance]);
+    const canEdit = useCallback(() => activeInstance.current === instance && !activeOperation.current, [instance]);
+
     const loadCliMeta = useCallback(async () => {
+        if (activeInstance.current !== instance) return;
+        const generation = ++metadataGeneration.current;
         try {
             const response = await client.get<{ data?: unknown } | Record<string, unknown>>('/api/cli-registry');
+            if (activeInstance.current !== instance || generation !== metadataGeneration.current) return;
             const data = response && typeof response === 'object' && 'data' in response
                 ? (response as { data?: unknown }).data
                 : response;
             setCliMeta(normalizeCliMetaRegistry(data));
         } catch {
-            setCliMeta(null);
+            if (activeInstance.current === instance && generation === metadataGeneration.current) setCliMeta(null);
         }
-    }, [client]);
+    }, [client, instance]);
 
     useEffect(() => {
         void loadCliMeta();
@@ -78,10 +116,19 @@ export default function ModelProvider({ port, client, dirty, registerSave }: Set
 
     useEffect(() => {
         if (state.kind !== 'ready') return;
-        setPerCliDraft({ ...(state.data.perCli || {}) });
+        const nextPerCli = { ...(state.data.perCli || {}) };
+        const ownBundle = Object.fromEntries(Object.entries(dirty.saveBundle()).filter(([key]) => ownsModelKey(key)));
+        const pending = expandPatch(ownBundle)['perCli'];
+        if (pending && typeof pending === 'object' && !Array.isArray(pending)) {
+            for (const [cli, entry] of Object.entries(pending)) {
+                if (entry && typeof entry === 'object' && !Array.isArray(entry))
+                    nextPerCli[cli] = { ...nextPerCli[cli], ...entry };
+            }
+        }
+        setPerCliDraft(nextPerCli);
         setPiDraft(state.data.pi);
         setFallback([...(state.data.fallbackOrder || [])]);
-        const codex = state.data.perCli?.['codex'] || {};
+        const codex = nextPerCli['codex'] || {};
         const nextCodexCtx: typeof codexCtx = {};
         if (typeof codex.contextWindowSize === 'number') {
             nextCodexCtx.contextWindowSize = codex.contextWindowSize;
@@ -90,36 +137,61 @@ export default function ModelProvider({ port, client, dirty, registerSave }: Set
             nextCodexCtx.contextWindowCompactLimit = codex.contextWindowCompactLimit;
         }
         setCodexCtx(nextCodexCtx);
-    }, [state]);
+    }, [state, dirty]);
+
+    const onPiRegistered = useCallback((next: PiRegistration) => {
+        if (activeInstance.current !== instance) return;
+        // This is completion of an already-admitted server mutation, not a new
+        // edit to admit while page input is locked. Keep newer entry identities.
+        const original = state.kind === 'ready' ? state.data.perCli?.['pi'] : undefined;
+        if (next.pi) setPiDraft(next.pi);
+        setPerCliDraft(current => ({ ...current, pi: { ...current['pi'], provider: next.provider, model: next.model } }));
+        dirty.set('perCli.pi.provider', { value: next.provider, original: original?.provider ?? 'progrok', valid: true });
+        dirty.set('perCli.pi.model', { value: next.model, original: original?.model ?? '', valid: true });
+    }, [dirty, instance, state]);
 
     useEffect(() => {
         return () => {
             for (const key of Array.from(dirty.pending.keys())) {
-                if (key === 'fallbackOrder' || key.startsWith('perCli.')) dirty.remove(key);
+                if (ownsModelKey(key)) dirty.remove(key);
             }
         };
-    }, [dirty]);
+    }, [dirty, instance]);
 
     const setEntry = useCallback(
-        (key: string, entry: DirtyEntry) => dirty.set(key, entry),
-        [dirty],
+        (key: string, entry: DirtyEntry) => { if (canEdit() && ownsModelKey(key)) dirty.set(key, entry); },
+        [dirty, canEdit],
     );
 
-    const onSave = useCallback(async () => {
-        const bundle = dirty.saveBundle();
-        if (Object.keys(bundle).length === 0) return;
+    const onSave = useCallback((): Promise<void> => {
+        if (activeInstance.current !== instance) return Promise.resolve();
+        const pending = activeOperation.current;
+        if (pending) return pending.kind === 'save' ? pending.promise
+            : Promise.reject(new Error('Wait for the active override reset before saving.'));
+        const bundle = Object.fromEntries(Object.entries(dirty.saveBundle()).filter(([key]) => ownsModelKey(key)));
+        if (Object.keys(bundle).length === 0) return Promise.resolve();
         const patch = expandPatch(bundle);
-        const updated = await client.put<ModelSnapshot>('/api/settings', patch);
-        const fresh = (updated && typeof updated === 'object' && 'data' in updated
-            ? (updated as { data: ModelSnapshot }).data
-            : updated) as ModelSnapshot;
-        dirty.clear();
-        setData(fresh);
-        setPerCliDraft({ ...(fresh.perCli || {}) });
-        setFallback([...(fresh.fallbackOrder || [])]);
-        await refresh();
-        await loadCliMeta();
-    }, [client, dirty, loadCliMeta, refresh, setData]);
+        const submitted = new Map([...dirty.pending].filter(([key]) => Object.hasOwn(bundle, key)));
+        setSaving(true); setSaveError(null);
+        const operation = { instance, kind: 'save' as const, promise: Promise.resolve() };
+        operation.promise = Promise.resolve().then(async () => {
+            if (activeInstance.current !== instance) return;
+            const updated = await client.put<ModelSnapshot>('/api/settings', patch);
+            if (activeInstance.current !== instance) return;
+            const fresh = savedModelSnapshot(updated);
+            for (const [key, entry] of submitted) if (dirty.pending.get(key) === entry) dirty.remove(key);
+            setData(fresh);
+            await refresh();
+            await loadCliMeta();
+        }).catch(error => {
+            if (activeInstance.current === instance) throw error;
+        }).finally(() => {
+            if (activeOperation.current === operation) activeOperation.current = null;
+            if (activeInstance.current === instance) setSaving(false);
+        });
+        activeOperation.current = operation;
+        return operation.promise;
+    }, [client, dirty, instance, loadCliMeta, refresh, setData]);
 
     useEffect(() => {
         if (!registerSave) return;
@@ -127,25 +199,29 @@ export default function ModelProvider({ port, client, dirty, registerSave }: Set
         return () => registerSave(null);
     }, [registerSave, onSave]);
 
-    const onResetOverrides = useCallback(async () => {
-        if (state.kind !== 'ready') return;
+    const onResetOverrides = useCallback(() => {
+        if (!canEdit() || state.kind !== 'ready') return;
         if (!window.confirm('Reset all active overrides?')) return;
         setResetting(true);
         setResetError(null);
-        try {
-            const patch = buildResetOverridesPatch(state.data);
+        const patch = buildResetOverridesPatch(state.data);
+        const operation = { instance, kind: 'reset' as const, promise: Promise.resolve() };
+        operation.promise = Promise.resolve().then(async () => {
+            if (activeInstance.current !== instance) return;
             const updated = await client.put<ModelSnapshot>('/api/settings', patch);
-            const fresh = (updated && typeof updated === 'object' && 'data' in updated
-                ? (updated as { data: ModelSnapshot }).data
-                : updated) as ModelSnapshot;
+            if (activeInstance.current !== instance) return;
+            const fresh = savedModelSnapshot(updated);
             setData(fresh);
             await refresh();
-        } catch (err: unknown) {
-            setResetError(err instanceof Error ? err.message : String(err));
-        } finally {
-            setResetting(false);
-        }
-    }, [client, refresh, setData, state]);
+        }).catch((err: unknown) => {
+            if (activeInstance.current === instance) setResetError(describeError(err));
+        }).finally(() => {
+            if (activeOperation.current === operation) activeOperation.current = null;
+            if (activeInstance.current === instance) setResetting(false);
+        });
+        activeOperation.current = operation;
+        return operation.promise;
+    }, [canEdit, client, instance, refresh, setData, state]);
 
     if (state.kind === 'loading') return <PageLoading />;
     if (state.kind === 'offline') return <PageOffline port={port} />;
@@ -163,12 +239,15 @@ export default function ModelProvider({ port, client, dirty, registerSave }: Set
             className="settings-page-form"
             onSubmit={(event) => {
                 event.preventDefault();
-                void onSave();
+                void onSave().catch((error: unknown) => {
+                    if (activeInstance.current === instance) setSaveError(describeError(error));
+                });
             }}
         >
+            {saveError ? <PageError message={saveError} /> : null}
             <SettingsSection
                 title="Model defaults"
-                hint="Per-CLI defaults applied when no active override is set on the Agent page."
+                hint="Per-CLI model and runtime defaults. Runtime transport applies to the next run; display and permissions stay separate."
             >
                 {cliKeys.length === 0 ? (
                     <p className="settings-empty">No CLIs registered for this instance.</p>
@@ -180,11 +259,14 @@ export default function ModelProvider({ port, client, dirty, registerSave }: Set
                             meta={metaFor(cli, cliMeta)}
                             original={perCliOriginal[cli] || {}}
                             value={perCliDraft[cli] || perCliOriginal[cli] || {}}
-                            setValue={(next) => setPerCliDraft({ ...perCliDraft, [cli]: next })}
+                            dirty={dirty}
+                            disabled={saving || resetting}
+                            setValue={(next) => { if (canEdit()) setPerCliDraft({ ...perCliDraft, [cli]: next }); }}
                             setEntry={setEntry}
                             client={client}
                             pi={piDraft}
-                            setPi={setPiDraft}
+                            setPi={(next) => { if (canEdit()) setPiDraft(next); }}
+                            onPiRegistered={onPiRegistered}
                         />
                     ))
                 )}
@@ -198,6 +280,7 @@ export default function ModelProvider({ port, client, dirty, registerSave }: Set
                     <NumberField
                         id="model-codex-ctx"
                         label="Context window size"
+                        disabled={saving || resetting}
                         value={
                             codexCtx.contextWindowSize
                             ?? (typeof codexOriginal.contextWindowSize === 'number'
@@ -207,6 +290,7 @@ export default function ModelProvider({ port, client, dirty, registerSave }: Set
                         min={0}
                         step={10_000}
                         onChange={(next) => {
+                            if (!canEdit()) return;
                             setCodexCtx({ ...codexCtx, contextWindowSize: next });
                             setEntry('perCli.codex.contextWindowSize', {
                                 value: next,
@@ -218,6 +302,7 @@ export default function ModelProvider({ port, client, dirty, registerSave }: Set
                     <NumberField
                         id="model-codex-compact"
                         label="Compact limit"
+                        disabled={saving || resetting}
                         value={
                             codexCtx.contextWindowCompactLimit
                             ?? (typeof codexOriginal.contextWindowCompactLimit === 'number'
@@ -227,6 +312,7 @@ export default function ModelProvider({ port, client, dirty, registerSave }: Set
                         min={0}
                         step={10_000}
                         onChange={(next) => {
+                            if (!canEdit()) return;
                             setCodexCtx({ ...codexCtx, contextWindowCompactLimit: next });
                             setEntry('perCli.codex.contextWindowCompactLimit', {
                                 value: next,
@@ -245,8 +331,10 @@ export default function ModelProvider({ port, client, dirty, registerSave }: Set
                 <ChipListField
                     id="model-fallbackOrder"
                     label="Fallback order"
+                    disabled={saving || resetting}
                     value={fallback}
                     onChange={(next) => {
+                        if (!canEdit()) return;
                         setFallback(next);
                         setEntry('fallbackOrder', {
                             value: next,
@@ -293,7 +381,7 @@ export default function ModelProvider({ port, client, dirty, registerSave }: Set
                         type="button"
                         className="settings-action settings-action-discard"
                         onClick={() => void onResetOverrides()}
-                        disabled={resetting || overrideRows.length === 0}
+                        disabled={saving || resetting || overrideRows.length === 0}
                     >
                         {resetting ? 'Resetting…' : 'Reset overrides'}
                     </button>

package/public/manager/src/settings/pages/Permissions.tsx

@@ -39,6 +39,16 @@ const DEFAULT_AUTO_TOKENS: ReadonlyArray<string> = [
 
 // ─── Pure helpers (exported for tests) ───────────────────────────────
 
+export function configuredPolicyLabel(value: unknown): string {
+    if (value === 'auto') return 'Auto';
+    if (value === 'safe') return 'Safe';
+    if (value === null || value === undefined) return 'Not provided';
+    if (Array.isArray(value) && value.every((entry) => typeof entry === 'string')) {
+        return `Custom (${value.length} ${value.length === 1 ? 'entry' : 'entries'})`;
+    }
+    return 'Unrecognized';
+}
+
 export function isPermissionsAuto(value: unknown): value is 'auto' {
     return value === 'auto';
 }
@@ -216,22 +226,17 @@ export default function Permissions({ port, client, dirty, registerSave }: Setti
     const hasInvalid = invalidChips.length > 0;
     const isEmpty = mode === 'custom' && tokens.length === 0;
 
-    const activeSummary =
-        original?.mode === 'custom'
-            ? `${original.tokens.length} explicit token${original.tokens.length === 1 ? '' : 's'}: ${original.tokens.join(', ')}`
-            : original?.mode === 'auto'
-                ? 'auto (runtime decides)'
-                : 'unknown shape — saved value will overwrite on next save';
+    const activeSummary = configuredPolicyLabel(state.data.permissions);
 
     return (
         <form className="settings-page-form" onSubmit={(event) => event.preventDefault()}>
             <SettingsSection
                 title="Permissions"
-                hint="Controls which capabilities the CLI can use. Auto delegates to the runtime; Custom freezes the list to your allowlist."
+                hint="Selecting a value changes the draft. Save applies it."
             >
                 <SelectField
                     id="permissions-mode"
-                    label="Mode"
+                    label="Change policy to"
                     value={mode}
                     options={MODE_OPTIONS}
                     onChange={handleModeChange}
@@ -267,13 +272,16 @@ export default function Permissions({ port, client, dirty, registerSave }: Setti
             </SettingsSection>
 
             <SettingsSection
-                title="Currently active"
+                title="Saved policy"
                 hint="Reflects the saved snapshot from /api/settings."
             >
                 <p className="settings-readonly-line">
-                    <span className="settings-field-label">Resolved permissions</span>
+                    <span className="settings-field-label">Configured policy:</span>{' '}
                     <span>{activeSummary}</span>
                 </p>
+                {original?.mode === 'unknown' ? (
+                    <p className="settings-section-hint">Use Agent to change this configured policy.</p>
+                ) : null}
             </SettingsSection>
         </form>
     );