Fix wave chunk 1: cross-surface settings signal, dialog scroll-lock, noneRow retired
- lh:settings-saved CustomEvent (the lh:chat-renamed pattern, owner ruling): every writer (composer save, SetupDialog save, the settings write seam — one dispatch point carrying the section) notifies after a successful PUT; every reader re-reads its own seam: ModelControl's record read, the Agent section's slots/catalog, and chat.tsx's configured state (clearing slots mid-session now surfaces the setup CTA without a reload). Self-notifications re-read idempotently. - MenuShell now announces lh:menu-open/lh:menu-close (still placement- only); the settings dialog's content column locks (overflow-hidden, count-based) while any menu is open — wheel-scrolling with a dropdown down is dead; the re-place-on-scroll fallback stays for un-lockable surfaces. - The settings thinking menus' 'Default' noneRow is retired (owner: the unset state can't re-enter once chunk 2's auto-populate lands; no unpin is needed). - Live-caught regression from the MenuShell migration fixed: the composer's outside-click handler never learned the portaled menu body isn't a container descendant — menu-row pointerdowns counted as outside and ATE THE PICK (composer picks have been dead for pointer users since 221c99d); rows now carve out via [data-lh-menu], the settings sections' discipline. - Item 4 (resolved-level display for legacy records) deferred to chunk 2 per owner ruling — the payload omits the level for legacy no-level records and DEFAULT_THINKING_ORDER was server-only (now in the core barrel via bd68486, exactly the seam chunk 2 needs).
This commit is contained in:
amosblomqvist
@@ -41,8 +41,9 @@
|
||||
* section's PUT; text writes through the segment route.
|
||||
*/
|
||||
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { MenuShell } from "@/components/menu-shell";
|
||||
import { useSettingsSaved } from "@/components/settings-signal";
|
||||
import type React from "react";
|
||||
import {
|
||||
MODEL_SLOTS,
|
||||
@@ -253,8 +254,10 @@ export function AgentSection({
|
||||
|
||||
// The catalog (federated: keyed providers only), the resolved slots,
|
||||
// the prompt segments, and the search engines' key presence — one
|
||||
// fetch each per section mount.
|
||||
useEffect(() => {
|
||||
// fetch each per section mount. The models read ALSO re-runs on the
|
||||
// cross-surface signal (fix wave: another surface's write re-reads
|
||||
// into the slot rows live).
|
||||
const readModels = useCallback(() => {
|
||||
fetch("/api/models")
|
||||
.then((r) => r.json())
|
||||
.then((body: ModelsBody) => {
|
||||
@@ -262,6 +265,14 @@ export function AgentSection({
|
||||
setSlots(body.slots);
|
||||
})
|
||||
.catch(() => setCatalog(null));
|
||||
}, []);
|
||||
|
||||
useSettingsSaved((section) => {
|
||||
if (section === "models") readModels();
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
readModels();
|
||||
fetch("/api/settings/prompts")
|
||||
.then((r) => r.json())
|
||||
.then((body: { prober: SegmentInfo[]; teacher: SegmentInfo[] }) => setPrompts(body))
|
||||
@@ -346,27 +357,7 @@ export function AgentSection({
|
||||
.then((body: { prober: SegmentInfo[]; teacher: SegmentInfo[] }) => setPrompts(body));
|
||||
}
|
||||
|
||||
/** The "—" row — THINKING menus only: clears the thinking pin (the
|
||||
* slot keeps its model; the tier's resolved budget takes over). Model
|
||||
* menus carry no such row — unpicking a model would re-arm the
|
||||
* first-run gate, and a "default" model is not a thing in this app
|
||||
* (owner, fix wave: no factory fallback is ever presented as a
|
||||
* choice; an unpicked slot just reads "—"). */
|
||||
const noneRow = (active: boolean, onPick: () => void) => (
|
||||
<button
|
||||
type="button"
|
||||
data-testid="menu-none"
|
||||
onClick={onPick}
|
||||
className={`flex w-full items-center justify-between rounded-lg px-2 py-1.5 text-left transition-colors hover:bg-muted ${
|
||||
active ? "bg-muted/60 text-card-foreground" : "text-card-foreground"
|
||||
}`}
|
||||
>
|
||||
<span>Default</span>
|
||||
{active && <span aria-hidden>✓</span>}
|
||||
</button>
|
||||
);
|
||||
|
||||
/** The search-engine menu row — label + the quiet live-key mark. */
|
||||
/** The search-engine menu row — label + the quiet live-key mark. */
|
||||
const engineOption = (
|
||||
id: (typeof SEARCH_ENGINES)[number] | "auto",
|
||||
label: string,
|
||||
@@ -553,13 +544,6 @@ export function AgentSection({
|
||||
testid={`slot-thinking-menu-${slot}`}
|
||||
menuClass="flex w-44 flex-col gap-0.5 rounded-xl border border-border bg-card p-2 text-xs shadow-xl"
|
||||
>
|
||||
{noneRow(
|
||||
thinking === "",
|
||||
() => {
|
||||
onModelsChange(composeSlotModel(models, slot, provider, modelId, ""));
|
||||
setOpenMenu(null);
|
||||
},
|
||||
)}
|
||||
<ThinkingMenuList
|
||||
levels={levels.map(String)}
|
||||
effectiveLevel={thinking || undefined}
|
||||
|
||||
@@ -40,6 +40,8 @@ import { useAppearance } from "./appearance.tsx";
|
||||
import { SettingsSection, SettingsRow, Toggle } from "./controls.tsx";
|
||||
import { AgentSection } from "./agent-section.tsx";
|
||||
import type { ModelsSettings } from "@/src/core";
|
||||
import { MENU_CLOSE_EVENT, MENU_OPEN_EVENT } from "@/components/menu-shell";
|
||||
import { notifySettingsSaved } from "@/components/settings-signal";
|
||||
import { KeysSection } from "./keys-section.tsx";
|
||||
import { AppearanceSection, GraphSection } from "./appearance-section.tsx";
|
||||
import { KeyboardSection } from "./keyboard-section.tsx";
|
||||
@@ -114,6 +116,18 @@ export function SettingsDialogBody({
|
||||
undefined,
|
||||
);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
// MenuShell open-count — drives the content column's scroll lock.
|
||||
const [openMenus, setOpenMenus] = useState(0);
|
||||
useEffect(() => {
|
||||
const onOpen = () => setOpenMenus((n) => n + 1);
|
||||
const onClose = () => setOpenMenus((n) => Math.max(0, n - 1));
|
||||
window.addEventListener(MENU_OPEN_EVENT, onOpen);
|
||||
window.addEventListener(MENU_CLOSE_EVENT, onClose);
|
||||
return () => {
|
||||
window.removeEventListener(MENU_OPEN_EVENT, onOpen);
|
||||
window.removeEventListener(MENU_CLOSE_EVENT, onClose);
|
||||
};
|
||||
}, []);
|
||||
const [active, setActive] = useState<SectionId>(initialSection);
|
||||
|
||||
// Fetch once per dialog mount. 200 {settings: null} is FIRST BOOT
|
||||
@@ -165,6 +179,7 @@ export function SettingsDialogBody({
|
||||
setRecord(
|
||||
(prev) => ({ ...(prev ?? {}), [section]: body }) as UserSettings,
|
||||
);
|
||||
notifySettingsSaved(section);
|
||||
if (section === "appearance")
|
||||
onAppearanceChange(body as AppearanceSettings);
|
||||
},
|
||||
@@ -228,9 +243,12 @@ export function SettingsDialogBody({
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{/* Content column — one section at a time, this scrolls. */}
|
||||
{/* Content column — one section at a time, this scrolls — and
|
||||
LOCKS while any MenuShell is open (owner ruling: no
|
||||
scrolling with a dropdown down; MenuShell announces
|
||||
open/close, the count keeps overlap honest). */}
|
||||
<div
|
||||
className="min-w-0 flex-1 overflow-y-auto"
|
||||
className={`min-w-0 flex-1 ${openMenus > 0 ? "overflow-hidden" : "overflow-y-auto"}`}
|
||||
data-testid="settings-content"
|
||||
>
|
||||
{error && (
|
||||
|
||||
Reference in New Issue
Block a user