cli-jaw 2.17.38 → 2.17.39

package/public/manager/src/settings/pages/components/PerCliRow.tsx

@@ -1,13 +1,16 @@
 // Phase 2 — single CLI row (model + effort + fastMode).
 
-import { useState } from 'react';
+import { useLayoutEffect, useRef, useState } from 'react';
+import type { ComponentProps } from 'react';
 import { TextField, SelectField, ToggleField } from '../../fields';
 import type { SettingsClient } from '../../types';
-import type { DirtyEntry } from '../../types';
+import type { DirtyEntry, DirtyStore } from '../../types';
 import { coerceEffortForModel, effortChoicesForModel } from './agent/agent-meta';
 import type { CliMeta, PerCliEntry } from './agent/agent-meta';
 import { PiProfileDialog } from './PiProfileDialog';
 import { piModelOptions, piProfileOptions, type PiSettingsView } from './pi-profile';
+import { hasRuntimeTransportChoice, RuntimeTransportField } from './runtime-transport-field';
+export type PiRegistration = Parameters<ComponentProps<typeof PiProfileDialog>['onRegistered']>[0];
 
 type Props = {
     cli: string;
@@ -16,19 +19,29 @@ type Props = {
     value: PerCliEntry;
     setValue: (next: PerCliEntry) => void;
     setEntry: (key: string, entry: DirtyEntry) => void;
+    dirty: DirtyStore;
+    disabled?: boolean;
     client?: SettingsClient;
     pi?: PiSettingsView | undefined;
     setPi?: (next: PiSettingsView) => void;
+    onPiRegistered?: (next: PiRegistration) => void;
 };
 
 function entryFor(value: unknown, original: unknown, valid = true): DirtyEntry {
     return { value, original, valid };
 }
 
-export function PerCliRow({ cli, meta, original, value, setValue, setEntry, client, pi, setPi }: Props) {
+export function PerCliRow({ cli, meta, original, value, setValue, setEntry, dirty, disabled = false, client, pi, setPi, onPiRegistered }: Props) {
     const modelDatalistId = `percli-${cli}-models`;
     const isPi = cli === 'pi';
     const [piDialogOpen, setPiDialogOpen] = useState(false);
+    // An already-open SelectField or asynchronous Pi callback can outlive its
+    // enabled render. Read committed disabled state before any setter call.
+    const blocked = useRef(disabled);
+    useLayoutEffect(() => {
+        blocked.current = disabled;
+        return () => { blocked.current = true; };
+    }, [disabled]);
     const provider = value.provider || meta.defaultProvider || meta.providers?.[0] || 'claude';
     const piModels = isPi ? piModelOptions(pi, provider, value.model || '') : [];
     const hasProviders = !isPi && (meta.providers?.length ?? 0) > 0;
@@ -45,14 +58,16 @@ export function PerCliRow({ cli, meta, original, value, setValue, setEntry, clie
     return (
         <div className="settings-percli-row" data-cli={cli}>
             <h3 className="settings-percli-title">{meta.label}</h3>
-            <div className="settings-percli-grid">
+            <div className={`settings-percli-grid${isPi ? ' settings-percli-grid--pi' : ''}`}>
                 {isPi && piProfileOptions(pi, provider).length ? (
                     <SelectField
                         id={`percli-${cli}-provider`}
                         label="Provider"
+                        disabled={disabled}
                         value={provider}
                         options={piProfileOptions(pi, provider).map((p) => ({ value: p, label: p }))}
                         onChange={(next) => {
+                            if (blocked.current) return;
                             const nextModels = piModelOptions(pi, next);
                             const nextModel = nextModels.includes(value.model || '') ? (value.model || '') : (nextModels[0] || '');
                             setValue({ ...value, provider: next, model: nextModel });
@@ -64,9 +79,11 @@ export function PerCliRow({ cli, meta, original, value, setValue, setEntry, clie
                     <SelectField
                         id={`percli-${cli}-provider`}
                         label="Provider"
+                        disabled={disabled}
                         value={provider}
                         options={(meta.providers ?? []).map((p) => ({ value: p, label: p }))}
                         onChange={(next) => {
+                            if (blocked.current) return;
                             const nextModels = meta.modelsByProvider?.[next] ?? [];
                             const nextEfforts = meta.effortsByProvider?.[next] ?? [];
                             const nextModel = nextModels.includes(value.model || '') ? (value.model || '') : (nextModels[0] || '');
@@ -85,9 +102,11 @@ export function PerCliRow({ cli, meta, original, value, setValue, setEntry, clie
                         <SelectField
                             id={`percli-${cli}-model`}
                             label="Model"
+                            disabled={disabled}
                             value={value.model ?? modelOptions[0] ?? ''}
                             options={modelOptions.map((m) => ({ value: m, label: m }))}
                             onChange={(next) => {
+                                if (blocked.current) return;
                                 const nextEffort = coerceEffortForModel(meta, next, value.effort ?? '', providerEfforts, hasProviders ? provider : undefined);
                                 setValue({ ...value, model: next, effort: nextEffort });
                                 setEntry(`perCli.${cli}.model`, entryFor(next, original.model ?? ''));
@@ -100,8 +119,10 @@ export function PerCliRow({ cli, meta, original, value, setValue, setEntry, clie
                         <TextField
                             id={`percli-${cli}-model`}
                             label="Model"
+                            disabled={disabled}
                             value={value.model ?? ''}
                             onChange={(next) => {
+                                if (blocked.current) return;
                                 setValue({ ...value, model: next });
                                 setEntry(`perCli.${cli}.model`, entryFor(next, original.model ?? ''));
                             }}
@@ -124,12 +145,14 @@ export function PerCliRow({ cli, meta, original, value, setValue, setEntry, clie
                         <SelectField
                             id={`percli-${cli}-effort`}
                             label="Effort"
+                            disabled={disabled}
                             value={value.effort ?? ''}
                             options={[
                                 { value: '', label: '(default)' },
                                 ...effortOptions.map((e) => ({ value: e, label: e })),
                             ]}
                             onChange={(next) => {
+                                if (blocked.current) return;
                                 setValue({ ...value, effort: next });
                                 setEntry(`perCli.${cli}.effort`, entryFor(next, original.effort ?? ''));
                             }}
@@ -141,11 +164,16 @@ export function PerCliRow({ cli, meta, original, value, setValue, setEntry, clie
                 ) : meta.effortNote ? (
                     <p className="settings-percli-note settings-percli-note--effort">{meta.effortNote}</p>
                 ) : null}
+                {hasRuntimeTransportChoice(cli) ? (
+                    <RuntimeTransportField cli={cli} original={original.transport} dirty={dirty} disabled={disabled} setEntry={setEntry} />
+                ) : null}
                 <ToggleField
                     id={`percli-${cli}-fastmode`}
                     label="Fast mode"
+                    disabled={disabled}
                     value={Boolean(value.fastMode)}
                     onChange={(next) => {
+                        if (blocked.current) return;
                         setValue({ ...value, fastMode: next });
                         setEntry(`perCli.${cli}.fastMode`, entryFor(next, Boolean(original.fastMode)));
                     }}
@@ -154,26 +182,34 @@ export function PerCliRow({ cli, meta, original, value, setValue, setEntry, clie
                     <button
                         type="button"
                         className="settings-action"
-                        onClick={() => setPiDialogOpen(true)}
+                        disabled={disabled}
+                        onClick={() => { if (!blocked.current) setPiDialogOpen(true); }}
                     >
                         Settings
                     </button>
                 ) : null}
             </div>
             {isPi && client && piDialogOpen ? (
+                <div inert={disabled} aria-busy={disabled}>
                 <PiProfileDialog
                     client={client}
                     pi={pi}
                     provider={provider}
                     model={value.model || 'grok-composer-2.5-fast'}
                     onClose={() => setPiDialogOpen(false)}
-                    onRegistered={({ provider: nextProvider, model: nextModel, pi: nextPi }) => {
+                    onRegistered={(next) => {
+                        // An admitted registration may finish while row input is
+                        // disabled. Its instance owner reconciles that completion.
+                        if (onPiRegistered) { onPiRegistered(next); return; }
+                        if (blocked.current) return;
+                        const { provider: nextProvider, model: nextModel, pi: nextPi } = next;
                         if (nextPi && setPi) setPi(nextPi);
                         setValue({ ...value, provider: nextProvider, model: nextModel });
                         setEntry(`perCli.${cli}.provider`, entryFor(nextProvider, original.provider ?? 'progrok'));
                         setEntry(`perCli.${cli}.model`, entryFor(nextModel, original.model ?? ''));
                     }}
                 />
+                </div>
             ) : null}
         </div>
     );

package/public/manager/src/settings/pages/components/PiProfileDialog.tsx

@@ -1,4 +1,5 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import type { KeyboardEvent } from 'react';
 import { SelectField, TextField } from '../../fields';
 import type { SettingsClient } from '../../types';
 import type { PiProfileMode, PiSettingsView } from './pi-profile';
@@ -13,6 +14,19 @@ type Props = {
 };
 
 const MODES: PiProfileMode[] = ['basic', 'openai', 'anthropic', 'vertex'];
+const INACTIVE_ANCESTOR = '[hidden], [inert], [aria-disabled="true"], fieldset[disabled]';
+
+function dialogControls(root: HTMLDivElement): HTMLElement[] {
+    return Array.from(root.querySelectorAll<HTMLElement>('button, input, select, textarea, a[href], [tabindex]'))
+        .filter((element) => {
+            if (element.tabIndex < 0 || element.matches(':disabled') || element.closest(INACTIVE_ANCESTOR)) return false;
+            for (let node: HTMLElement | null = element; node; node = node.parentElement) {
+                const style = node.ownerDocument.defaultView?.getComputedStyle(node);
+                if (style?.display === 'none' || style?.visibility === 'hidden' || style?.visibility === 'collapse') return false;
+            }
+            return true;
+        });
+}
 
 function defaultEndpoint(mode: PiProfileMode): string {
     if (mode === 'anthropic') return 'https://api.anthropic.com/v1/messages';
@@ -21,6 +35,7 @@ function defaultEndpoint(mode: PiProfileMode): string {
 }
 
 export function PiProfileDialog({ client, pi, provider, model, onClose, onRegistered }: Props) {
+    const rootRef = useRef<HTMLDivElement>(null);
     const current = useMemo(
         () => pi?.profiles?.find((entry) => entry.id === provider) || pi?.profiles?.[0],
         [pi, provider],
@@ -33,17 +48,53 @@ export function PiProfileDialog({ client, pi, provider, model, onClose, onRegist
     const [busy, setBusy] = useState(false);
     const [error, setError] = useState<string | null>(null);
 
+    useEffect(() => {
+        const root = rootRef.current;
+        if (!root || root.closest(INACTIVE_ANCESTOR)) return;
+        const opener = root.ownerDocument.activeElement;
+        const controls = dialogControls(root);
+        (controls.find((element) => element.id === 'pi-profile-id') ?? controls[0])?.focus();
+        return () => {
+            if (opener instanceof HTMLElement && opener.isConnected
+                && !opener.matches(':disabled') && !opener.closest(INACTIVE_ANCESTOR)) opener.focus({ preventScroll: true });
+        };
+    }, []);
+
     useEffect(() => {
         setEndpoint((value) => value || defaultEndpoint(mode));
     }, [mode]);
 
+    const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+        const root = rootRef.current;
+        if (!root || root.closest(INACTIVE_ANCESTOR) || event.defaultPrevented) return;
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            event.stopPropagation();
+            onClose();
+        } else if (event.key === 'Tab') {
+            const controls = dialogControls(root);
+            const first = controls[0], last = controls.at(-1);
+            const active = root.ownerDocument.activeElement;
+            if (!first || !controls.some((element) => element === active)
+                || (event.shiftKey ? active === first : active === last)) {
+                event.preventDefault();
+                (event.shiftKey ? last ?? root : first ?? root).focus();
+            }
+        }
+    };
+
     const register = async () => {
+        const root = rootRef.current;
+        const submit = root?.querySelector<HTMLButtonElement>('.settings-action-save');
+        if (root && submit && root.ownerDocument.activeElement === submit && !root.closest(INACTIVE_ANCESTOR)) {
+            dialogControls(root).find((element) => element !== submit)?.focus();
+        }
         setBusy(true);
         setError(null);
         try {
             const result = await client.post<{
-                models: string[];
-                settings?: { pi?: PiSettingsView };
+                ok: true;
+                data: { models: string[]; settings?: { pi?: PiSettingsView } };
             }>('/api/pi/profiles/register', {
                 id,
                 label: id,
@@ -52,7 +103,8 @@ export function PiProfileDialog({ client, pi, provider, model, onClose, onRegist
                 model: modelId,
                 apiKey,
             });
-            onRegistered({ provider: id, model: modelId, models: result.models || [], pi: result.settings?.pi });
+            const data = result.data;
+            onRegistered({ provider: id, model: modelId, models: data.models || [], pi: data.settings?.pi });
             onClose();
         } catch (err: unknown) {
             setError(err instanceof Error ? err.message : String(err));
@@ -62,7 +114,8 @@ export function PiProfileDialog({ client, pi, provider, model, onClose, onRegist
     };
 
     return (
-        <div className="settings-memory-modal" role="dialog" aria-modal="true" aria-labelledby="pi-profile-title">
+        <div className="settings-memory-modal settings-pi-modal" ref={rootRef} role="dialog" aria-modal="true"
+            aria-labelledby="pi-profile-title" tabIndex={-1} onKeyDown={onKeyDown}>
             <div className="settings-memory-modal-card">
                 <header className="settings-memory-modal-header">
                     <h3 id="pi-profile-title">Pi Settings</h3>
@@ -81,7 +134,7 @@ export function PiProfileDialog({ client, pi, provider, model, onClose, onRegist
                     <TextField id="pi-profile-model" label="Model" value={modelId} onChange={setModelId} placeholder="grok-composer-2.5-fast" />
                     <TextField id="pi-profile-key" label="API Key" value={apiKey} onChange={setApiKey} placeholder={current?.apiKeySet ? `set (${current.apiKeyLast4 || '****'})` : 'empty for local proxy'} />
                     <p className="settings-empty">Default: grok-composer-2.5-fast. Bare grok-composer-2.5 currently has no verified team access.</p>
-                    {error ? <p className="settings-field-error">{error}</p> : null}
+                    {error ? <p className="settings-field-error" role="alert">{error}</p> : null}
                     <button type="button" className="settings-action settings-action-save" disabled={busy} onClick={() => void register()}>
                         {busy ? 'Registering...' : 'Register'}
                     </button>

package/public/manager/src/settings/pages/components/agent/PermissionQuickSection.tsx

@@ -1,6 +1,7 @@
 import { SelectField } from '../../../fields';
 import { SettingsSection } from '../../page-shell';
 import {
+    configuredPolicyLabel,
     isAllowlistValid,
     parsePermissionsValue,
     seedAutoAllowlist,
@@ -8,6 +9,7 @@ import {
 
 type PermissionQuickSectionProps = {
     value: unknown;
+    configuredValue: unknown;
     onChange(next: 'auto' | string[]): void;
 };
 
@@ -16,22 +18,22 @@ const MODE_OPTIONS = [
     { value: 'custom', label: 'Custom allowlist' },
 ];
 
-export function PermissionQuickSection({ value, onChange }: PermissionQuickSectionProps) {
+export function PermissionQuickSection({ value, configuredValue, onChange }: PermissionQuickSectionProps) {
     const parsed = parsePermissionsValue(value);
     const mode = parsed.mode === 'custom' ? 'custom' : 'auto';
     const tokens = parsed.mode === 'custom' ? parsed.tokens : [];
     const summary = parsed.mode === 'custom'
-        ? `${tokens.length} explicit token${tokens.length === 1 ? '' : 's'}`
-        : 'Runtime resolves allowed capabilities';
+        ? `Editor draft: ${tokens.length} explicit token${tokens.length === 1 ? '' : 's'}`
+        : null;
 
     return (
         <SettingsSection
             title="Permissions"
-            hint="Quick runtime mode. Open Permissions for detailed allowlist editing."
+            hint="Selecting a value changes the draft. Save applies it."
         >
             <SelectField
                 id="agent-permissions-mode"
-                label="Mode"
+                label="Change policy to"
                 value={mode}
                 options={MODE_OPTIONS}
                 onChange={(next) => {
@@ -39,7 +41,8 @@ export function PermissionQuickSection({ value, onChange }: PermissionQuickSecti
                     else onChange(tokens.length > 0 && isAllowlistValid(tokens) ? tokens : seedAutoAllowlist(null));
                 }}
             />
-            <p className="settings-agent-note">{summary}</p>
+            {summary ? <p className="settings-agent-note">{summary}</p> : null}
+            <p className="settings-agent-note" id="agent-configured-policy">Configured policy: {configuredPolicyLabel(configuredValue)}</p>
         </SettingsSection>
     );
 }

package/public/manager/src/settings/pages/components/agent/agent-meta.ts

@@ -1,3 +1,5 @@
+import type { RuntimeTransport } from '../../../../../../../src/shared/runtime-contract';
+
 export type CliMeta = {
     label: string;
     models: ReadonlyArray<string>;
@@ -27,6 +29,7 @@ export type CliMeta = {
 };
 
 export type PerCliEntry = {
+    transport?: RuntimeTransport;
     provider?: string;
     model?: string;
     effort?: string;

package/public/manager/src/settings/pages/components/runtime-transport-field.tsx

@@ -0,0 +1,68 @@
+import { useLayoutEffect, useRef, useSyncExternalStore } from 'react';
+import type { RuntimeTransport } from '../../../../../../src/shared/runtime-contract';
+import { SelectField } from '../../fields';
+import type { DirtyEntry, DirtyStore } from '../../types';
+
+type Props = {
+    cli: string;
+    original: unknown;
+    dirty: DirtyStore;
+    disabled?: boolean;
+    setEntry: (key: string, entry: DirtyEntry) => void;
+};
+
+export function hasRuntimeTransportChoice(cli: string): boolean {
+    return cli === 'cursor' || cli === 'grok' || cli === 'claude';
+}
+
+function isTransport(value: unknown): value is RuntimeTransport {
+    return value === 'native' || value === 'print';
+}
+
+const UNKNOWN = 'unrecognized'; // UI only; never a wire value.
+const OPTIONS: ReadonlyArray<{ value: RuntimeTransport; label: string }> = [
+    { value: 'native', label: 'Native session (opt-in)' },
+    { value: 'print', label: 'Print compatibility' },
+];
+
+export function RuntimeTransportField({ cli, original, dirty, disabled = false, setEntry }: Props) {
+    const key = hasRuntimeTransportChoice(cli) ? `perCli.${cli}.transport` : null;
+    const pending = useSyncExternalStore(dirty.subscribe,
+        () => key === null ? undefined : dirty.pending.get(key));
+    const blocked = useRef(disabled);
+    useLayoutEffect(() => {
+        blocked.current = disabled;
+        return () => { blocked.current = true; };
+    }, [disabled]);
+    // Missing settings retain print compatibility without synthesizing a PATCH.
+    const baseline = original === undefined ? 'print' : original;
+    const value = pending ? pending.value : baseline;
+    const known = isTransport(value);
+    if (key === null) return null;
+
+    return (
+        <div>
+            <SelectField
+                id={`percli-${cli}-transport`}
+                label="Runtime transport"
+                value={known ? value : UNKNOWN}
+                options={known ? OPTIONS : [...OPTIONS, { value: UNKNOWN, label: 'Unrecognized transport' }]}
+                disabled={disabled}
+                error={known ? null : 'Choose a supported runtime transport.'}
+                onChange={(next) => {
+                    if (blocked.current || !isTransport(next)) return;
+                    setEntry(key, { value: next, original: baseline, valid: true });
+                }}
+            />
+            {!known ? <p className="settings-field-error" role="alert">Stored runtime transport is unrecognized.</p> : null}
+            <p className="settings-percli-note">Applies to the next run. Independent of Activity / Legacy presentation.</p>
+            {value === 'native' ? (
+                <p className="settings-percli-note">
+                    {cli === 'claude'
+                        ? 'Claude native supports Auto / Safe permissions.'
+                        : 'Native requires Auto-only permissions; no native worker assignments.'}
+                </p>
+            ) : null}
+        </div>
+    );
+}

package/public/manager/src/settings-controls.css

@@ -224,6 +224,49 @@
     opacity: 1;
 }
 
+/* Pi's dialog owns this layer; the Memory viewer keeps its existing layout. */
+.settings-pi-modal {
+    position: fixed;
+    inset: 0;
+    z-index: 70;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+    padding: 16px;
+    background: var(--scrim-overlay);
+    color: var(--text-primary);
+}
+
+.settings-pi-modal > .settings-memory-modal-card {
+    width: min(560px, 100%);
+    margin: auto;
+    padding: 20px;
+    background: var(--surface-overlay);
+    border: 1px solid var(--border-strong);
+    border-radius: var(--radius-lg);
+    min-width: 0;
+    flex-shrink: 0;
+}
+
+.settings-pi-modal .settings-memory-modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 12px;
+    margin-bottom: 16px;
+}
+
+.settings-pi-modal h3 { margin: 0; overflow-wrap: anywhere; }
+.settings-pi-modal .settings-page-form,
+.settings-pi-modal .settings-field { min-width: 0; }
+
+.settings-pi-modal .settings-field {
+    --border-subtle: var(--text-secondary);
+    --border-strong: var(--text-secondary);
+}
+.settings-pi-modal .settings-field-error { color: var(--error-text); }
+
 @media (max-width: 720px) {
     .settings-field-select,
     .settings-select-menu {

package/public/manager/src/settings-shell.css

@@ -417,6 +417,25 @@
     align-items: end;
 }
 
+/* Pi's long effort note must wrap within its track, not claim an auto track. */
+.settings-percli-grid--pi {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
+    align-items: start;
+}
+
+.settings-percli-grid--pi > * {
+    min-width: 0;
+}
+
+.settings-percli-grid--pi .settings-percli-note {
+    overflow-wrap: anywhere;
+}
+
+.settings-percli-grid--pi > .settings-action {
+    justify-self: start;
+    max-width: 100%;
+}
+
 .settings-percli-note {
     margin: 4px 0 0;
     color: var(--text-secondary);
@@ -455,7 +474,8 @@
 }
 
 @media (max-width: 720px) {
-    .settings-percli-grid {
+    .settings-percli-grid,
+    .settings-percli-grid--pi {
         grid-template-columns: minmax(0, 1fr);
     }
     .settings-avatar-card {