Merge pull request #1156 from org2AI/dev/model-properties-auto-update

feat(model-picker): apply effort changes automatically

Author: Harry19081

docs/frontend-ui-audit-2026-08-31/ModelPropertiesDropdown.md

@@ -0,0 +1,11 @@
+# ModelPropertiesDropdown UI audit
+
+| Line                                                                                         | Element                                                   | Verdict          | Reason                                                                                                                                                 | Suggested change                                                                       |
+| -------------------------------------------------------------------------------------------- | --------------------------------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------- |
+| `src/components/ModelPropertiesDropdown/index.tsx:381`                                       | Section separators after removing the footer              | fix              | The former footer separator would remain below the final control                                                                                       | Applied `last:border-b-0` while keeping the shared section token                       |
+| `src/components/ModelPropertiesDropdown/index.tsx:455`                                       | Thinking/Fast switches and native range keyboard behavior | fix              | Switches need accessible names; menu arrow navigation must not intercept native range keys                                                             | Applied `ariaLabel` and disabled list-style keyboard handling for this control popover |
+| `src/components/ModelPropertiesDropdown/EffortSlider.tsx:142`                                | Native range input                                        | keep with reason | Preserves native range semantics, accessible effort text, focus, and pointer capture; local previews coalesce gestures before the shared save callback | None                                                                                   |
+| `src/components/ModelPropertiesDropdown/index.tsx:372`                                       | Shared panel with existing 260px width                    | keep with reason | Uses the dropdown design tokens; width matches this popup's custom anchor calculations, which now use measured height without a footer                 | None                                                                                   |
+| `src/modules/MainApp/Integrations/KeyVault/shared/ModelTable/ModelVariantInlineCard.tsx:435` | Selected-version trigger                                  | keep with reason | Continues to use the shared dropdown and existing table trigger token; reads saved selection instead of maintaining a second preview map               | None                                                                                   |
+
+Verdict totals: **2 fix**, **3 keep with reason**, **0 abstract**.

docs/verification-2026-08-31/Gpt56Effort.md

@@ -49,8 +49,8 @@ This implements ORGII's delegation guidance; it does not establish full parity
 with Codex's internal orchestration.
 
 Ultra's slider fill, label, and focus ring use the existing purple theme token.
-Other levels retain the primary accent. The popup retains its existing
-Apply/Cancel workflow in this change.
+Other levels retain the primary accent. The subsequent automatic-update change
+removes Cancel/Apply; see [automatic-update verification](ModelPropertiesAutoUpdate.md).
 
 ## Architecture coverage
 

docs/verification-2026-08-31/ModelPropertiesAutoUpdate.md

@@ -0,0 +1,84 @@
+# Model properties automatic updates
+
+## Behavior and source of truth
+
+The shared effort popover no longer has Cancel/Apply. Fast and Thinking switches
+apply immediately. Slider values preview locally while dragging or holding a
+range key, then apply once on pointer/key release or blur. Assistive input that
+does not generate pointer/key events applies immediately. The popup stays open;
+Escape and outside clicks dismiss it without reverting completed changes.
+
+The caller's model id is authoritative. Each completed control interaction
+resolves the full effort/thinking/fast combination before calling `onChange`.
+Unsupported Fast is cleared when moving to an effort without that variant;
+unavailable combinations and unchanged values do not reach the save callback.
+All four dropdown consumers keep their existing session/default-variant save
+paths. No provider calls, persistence formats, or backend behavior changed.
+
+The old popover draft/Apply effects and model-table preview map were removed.
+A slider keeps only one local interaction and preview, with no pending save timer
+or queue. Pointer cancel/unmount drops unfinished previews. Refreshed parent
+values invalidate stale gestures; switching model families remounts the slider.
+Normal effort updates preserve the input node and keyboard focus.
+
+The compact popup is left-aligned to its trigger so label width changes do not
+shift it sideways. It uses measured height for custom placement and omits the
+last section's bottom divider. The purple Ultra styling remains unchanged.
+
+## Architecture coverage
+
+Checked compilation, removal of dead preview state, callback naming, the shared
+selection/write boundary, invalid/default selections, all four entry points,
+and effort/Fast resolution. Provider wire formats, backend initialization, and
+cross-instance persistence were not changed or revalidated in this follow-up.
+Existing save-error and RPC ordering behavior remains owned by the callers;
+this change coalesces slider gestures before invoking those paths.
+
+## Lifecycle evidence
+
+| Area               | Verdict | Evidence                                                                     | Change or reason kept                                                                   | Verification                                                        |
+| ------------------ | ------- | ---------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- | ------------------------------------------------------------------- |
+| Background work    | keep    | No new timer, listener, worker, or deferred save                             | Existing dropdown listeners are open-scoped; existing slider motion pauses while hidden | Slider visibility/reopen tests and popup overlay dismissal tests    |
+| Memory             | fix     | Removed popover draft bookkeeping and per-model preview map                  | One bounded gesture/preview lives in the mounted slider                                 | Cancel/unmount regression test                                      |
+| Scope/isolation    | fix     | Gesture captures the original parent value; family changes replace its owner | A refreshed value cannot be overwritten by a stale unfinished drag                      | Stale-drag and external-refresh tests                               |
+| Rendering/hot path | fix     | Native input updates only local preview during a gesture                     | One save callback per drag or held-key interaction; switches call once                  | Pointer/key coalescing, duplicate-release, and keyboard-focus tests |
+
+## Verification
+
+- `pnpm exec vitest run --config config/vitest.config.ts src/components/ModelPropertiesDropdown/ModelPropertiesDropdown.test.ts src/components/ModelPropertiesDropdown/EffortSlider.test.ts src/util/__tests__/variantEditOptions.test.ts src/components/SelectorPill/index.test.ts src/components/Dropdown/positioning.portalTransform.test.ts src/components/Dropdown/positioning.verticalFit.test.ts`: 32 tests passed
+- `pnpm exec eslint src/components/ModelPropertiesDropdown/index.tsx src/components/ModelPropertiesDropdown/EffortSlider.tsx src/components/ModelPropertiesDropdown/ModelPropertiesDropdown.test.ts src/components/ModelPropertiesDropdown/EffortSlider.test.ts src/components/ModelSelectorPill/index.tsx src/scaffold/GlobalSpotlight/palettes/UnifiedModelPalette/VariantPill.tsx src/modules/MainApp/Integrations/KeyVault/shared/ModelTable/ModelVariantInlineCard.tsx src/modules/MainApp/Integrations/KeyVault/shared/ModelTable/modelTableGroupColumns.tsx --max-warnings 0`: passed
+- `pnpm run typecheck`: passed; the first run caught an unsupported test assertion, which was replaced with this repo's supported assertions
+- `node scripts/quality/check-test-placement.mjs`: passed across 440 directories
+- `git diff --check`: passed
+
+No desktop control, full-app visual inspection, actual account writes, or CPU/RSS
+measurements were used. Browser-native range event ordering in the packaged
+WebView was not manually verified. Tests use real React controls and the dropdown
+engine in jsdom, with controlled model updates at the public callback boundary.
+No measured runtime performance improvement is claimed.
+
+Performance verdict: **pass for this scoped change**. The bounded interaction,
+no-background-save, cleanup, and stale-input invariants pass the targeted tests.
+Desktop resource measurements and end-to-end persistence are not claimed.
+
+## WebKit drag regression (2026-09-01)
+
+Explicitly calling `setPointerCapture` on the range input prevents WebKit's
+native thumb from dragging. The component now leaves capture to the native
+thumb. Native release delivery still handles releases outside the rail; the
+existing one-save-per-gesture, keyboard, cancellation, and stale-value behavior
+is unchanged. No timers, listeners, caches, or persistence paths were added.
+
+A temporary headless Playwright fixture bundled the actual `EffortSlider.tsx`
+and compiled its SCSS, with a controlled parent and only translation stubbed.
+Real mouse movement reproduced the pre-fix WebKit failure: dragging Extra High
+to Ultra left the value at Extra High with no save. With the fix, WebKit 26.5
+and Chromium passed drags in both directions, an outside-rail release, a track
+click, and an arrow-key change. Each completed gesture saved exactly once;
+active drags saved nothing and keyboard focus stayed on the range.
+
+The existing component regression now rejects capture on the input. Injected
+jsdom values only verify coalescing; they must not be used as proof that a
+native slider is draggable. The headless fixture is component-level evidence,
+not a packaged Tauri or full Spotlight end-to-end test. Actual account writes
+and the user's desktop remain untested.

src/components/ModelPropertiesDropdown/EffortSlider.test.ts

@@ -98,6 +98,100 @@ describe("EffortSlider", () => {
     });
   }
 
+  function pointer(type: string) {
+    const event = new MouseEvent(type, { bubbles: true, button: 0 });
+    Object.defineProperty(event, "pointerId", { value: 1 });
+    act(() => range().dispatchEvent(event));
+  }
+
+  it("leaves capture to the native thumb and commits the final preview once", () => {
+    const onChange = vi.fn();
+    render({ onChange });
+    const capture = vi.fn();
+    range().setPointerCapture = capture;
+    pointer("pointerdown");
+    // These injected values test coalescing, not native dragging. A drag
+    // regression also needs real WebKit mouse gestures: input injection
+    // bypasses the native thumb behavior that explicit capture broke.
+    expect(capture).not.toHaveBeenCalled();
+    changeValue("0");
+    changeValue("2");
+    expect(range().getAttribute("aria-valuetext")).toBe("Extra High");
+    expect(onChange).not.toHaveBeenCalled();
+    pointer("pointerup");
+    pointer("lostpointercapture");
+    expect(onChange).toHaveBeenCalledOnce();
+    expect(onChange).toHaveBeenCalledWith(MODEL_REASONING_LEVEL.EXTRA_HIGH);
+  });
+
+  it("drops canceled or unmounted drag previews without saving", () => {
+    const onChange = vi.fn();
+    render({ onChange });
+    range().setPointerCapture = vi.fn();
+    pointer("pointerdown");
+    changeValue("2");
+    pointer("pointercancel");
+    pointer("lostpointercapture");
+    expect(range().getAttribute("aria-valuetext")).toBe("High");
+    pointer("pointerdown");
+    changeValue("0");
+    act(() => root.render(null));
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it("does not apply a stale drag after the parent changes the selection", () => {
+    const onChange = vi.fn();
+    render({ onChange });
+    range().setPointerCapture = vi.fn();
+    pointer("pointerdown");
+    changeValue("2");
+    render({ onChange, value: MODEL_REASONING_LEVEL.LOW });
+    expect(range().getAttribute("aria-valuetext")).toBe("Light");
+    pointer("pointerup");
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it("coalesces held arrow keys and commits on key release or blur", () => {
+    const onChange = vi.fn();
+    render({ onChange });
+    act(() =>
+      range().dispatchEvent(
+        new KeyboardEvent("keydown", {
+          key: "ArrowRight",
+          bubbles: true,
+        })
+      )
+    );
+    changeValue("0");
+    changeValue("2");
+    expect(onChange).not.toHaveBeenCalled();
+    act(() =>
+      range().dispatchEvent(
+        new KeyboardEvent("keyup", {
+          key: "ArrowRight",
+          bubbles: true,
+        })
+      )
+    );
+    expect(onChange).toHaveBeenCalledOnce();
+    expect(onChange).toHaveBeenCalledWith(MODEL_REASONING_LEVEL.EXTRA_HIGH);
+    onChange.mockClear();
+    act(() =>
+      range().dispatchEvent(
+        new KeyboardEvent("keydown", {
+          key: "Home",
+          bubbles: true,
+        })
+      )
+    );
+    changeValue("0");
+    act(() =>
+      range().dispatchEvent(new FocusEvent("focusout", { bubbles: true }))
+    );
+    expect(onChange).toHaveBeenCalledOnce();
+    expect(onChange).toHaveBeenCalledWith(MODEL_REASONING_LEVEL.LOW);
+  });
+
   it("keeps the discrete model contract and accessible label on native input changes", () => {
     const onChange = vi.fn();
     render({ onChange });

src/components/ModelPropertiesDropdown/EffortSlider.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import {
@@ -10,6 +10,16 @@ import {
 import "./EffortSlider.scss";
 
 const COMET_INDICES = Array.from({ length: 18 }, (_, index) => index);
+const RANGE_KEYS = new Set([
+  "ArrowLeft",
+  "ArrowRight",
+  "ArrowUp",
+  "ArrowDown",
+  "Home",
+  "End",
+  "PageUp",
+  "PageDown",
+]);
 
 interface EffortSliderProps {
   levels: readonly ModelReasoningLevel[];
@@ -28,9 +38,39 @@ export const EffortSlider: React.FC<EffortSliderProps> = ({
 }) => {
   const { t } = useTranslation();
   const sliderRef = useRef<HTMLDivElement>(null);
+  const [preview, setPreview] = useState<{
+    level: ModelReasoningLevel;
+    sourceValue: ModelReasoningLevel | undefined;
+  }>();
+  const interactionRef = useRef<{
+    kind: "pointer" | "keyboard";
+    pointerId?: number;
+    level: ModelReasoningLevel | undefined;
+    sourceValue: ModelReasoningLevel | undefined;
+  } | null>(null);
+
+  const finishInteraction = (commit: boolean) => {
+    const interaction = interactionRef.current;
+    if (!interaction) return;
+    interactionRef.current = null;
+    setPreview(undefined);
+    if (
+      commit &&
+      interaction.sourceValue === value &&
+      interaction.level &&
+      interaction.level !== value
+    ) {
+      onChange(interaction.level);
+    }
+  };
+
   const selectedIndex = Math.max(
     0,
-    levels.findIndex((level) => level === value)
+    levels.findIndex(
+      (level) =>
+        level ===
+        (preview?.sourceValue === value ? (preview?.level ?? value) : value)
+    )
   );
   const maxIndex = Math.max(0, levels.length - 1);
   const selectedLevel = levels[selectedIndex];
@@ -110,8 +150,58 @@ export const EffortSlider: React.FC<EffortSliderProps> = ({
             aria-valuetext={levelLabel}
             onChange={(event) => {
               const nextLevel = levels[event.currentTarget.valueAsNumber];
-              if (nextLevel && nextLevel !== selectedLevel) onChange(nextLevel);
+              if (!nextLevel || nextLevel === selectedLevel) return;
+              if (interactionRef.current) {
+                interactionRef.current.level = nextLevel;
+                setPreview({
+                  level: nextLevel,
+                  sourceValue: interactionRef.current.sourceValue,
+                });
+              } else {
+                // Assistive input without pointer/key events still commits.
+                onChange(nextLevel);
+              }
+            }}
+            // Keep rapid input local; persist only the completed gesture.
+            // Let the native thumb own capture, including outside releases.
+            // Capturing on the input prevents WebKit from dragging its thumb.
+            onPointerDown={(event) => {
+              if (event.button !== 0 || interactionRef.current) return;
+              interactionRef.current = {
+                kind: "pointer",
+                pointerId: event.pointerId,
+                level: value,
+                sourceValue: value,
+              };
+            }}
+            onPointerUp={(event) => {
+              if (interactionRef.current?.pointerId === event.pointerId) {
+                finishInteraction(true);
+              }
+            }}
+            onPointerCancel={() => finishInteraction(false)}
+            onLostPointerCapture={() => {
+              if (interactionRef.current?.kind === "pointer")
+                finishInteraction(true);
+            }}
+            onKeyDown={(event) => {
+              if (RANGE_KEYS.has(event.key) && !interactionRef.current) {
+                interactionRef.current = {
+                  kind: "keyboard",
+                  level: value,
+                  sourceValue: value,
+                };
+              }
+            }}
+            onKeyUp={(event) => {
+              if (
+                RANGE_KEYS.has(event.key) &&
+                interactionRef.current?.kind === "keyboard"
+              ) {
+                finishInteraction(true);
+              }
             }}
+            onBlur={() => finishInteraction(true)}
           />
           <span
             className="effort-slider__thumb bg-white shadow-dropdown-soft"