feat: model menu keyboard machine + graph center-anchor on resize
Owner polish pair before the settings milestone: - Model menu: arrows walk the filtered results (clamped, no wrap) while focus stays in the search field; Enter picks the walked row or, with no walk yet, the first result; typing resets the walk; click and Enter share one pickModel path; walked row gets a muted ring + scrollIntoView; cheat-sheet display entries added. - Graph: window resizes re-anchor the camera so the world point under the pre-resize viewport center stays under the new center — the graph stays visually still while scaling (was top-left pinned). viewW/H tracked in syncSize; re-anchor applied through the zoom behavior (persistence and card-dismiss unchanged); kFit refresh as before. Pixel-verified: 7/7 center samples identical across a 300x200 shrink.
This commit is contained in:
amosblomqvist
@@ -435,6 +435,11 @@ export class GraphCanvasRenderer {
|
||||
private transform: ZoomTransform = zoomIdentity;
|
||||
/** Set once the first fit happens; the camera then survives setData. */
|
||||
private hasFit = false;
|
||||
/** Last-synced CSS size — the resize anchor computes the world point
|
||||
* under the PRE-resize viewport center from these (ResizeObserver
|
||||
* callbacks already see the NEW size in clientWidth/Height). */
|
||||
private viewW = 0;
|
||||
private viewH = 0;
|
||||
/** The k that frames the whole graph — the label-gate's "1×". */
|
||||
private kFit = 1;
|
||||
/** World-space bounds of the current nodes — fit() and the resize-time
|
||||
@@ -573,9 +578,28 @@ export class GraphCanvasRenderer {
|
||||
}
|
||||
|
||||
this.resizeObserver = new ResizeObserver(() => {
|
||||
// The world point under the pre-resize viewport center — the
|
||||
// visual anchor the new transform must preserve. Capture it
|
||||
// BEFORE syncSize (which updates viewW/H to the new size).
|
||||
const prevW = this.viewW;
|
||||
const prevH = this.viewH;
|
||||
const { x: tx, y: ty, k } = this.transform;
|
||||
const wx = (prevW / 2 - tx) / k;
|
||||
const wy = (prevH / 2 - ty) / k;
|
||||
this.syncSize();
|
||||
if (!this.hasFit) this.fit(); // first real size → fit once
|
||||
else this.refreshFitZoom(); // the gate's "1×" is viewport-bound
|
||||
else {
|
||||
this.refreshFitZoom(); // the gate's "1×" is viewport-bound
|
||||
// Center-anchor (2026-09-17, owner): same world point under
|
||||
// the NEW center. Applied through the zoom behavior like every
|
||||
// camera move (d3 state, persistence, card-dismiss all agree).
|
||||
if (prevW > 0 && prevH > 0 && this.viewW > 0 && this.viewH > 0) {
|
||||
select(canvas).call(
|
||||
this.zoomBehavior.transform,
|
||||
zoomIdentity.translate(this.viewW / 2 - wx * k, this.viewH / 2 - wy * k).scale(k),
|
||||
);
|
||||
}
|
||||
}
|
||||
// Redraw SYNCHRONOUSLY: syncSize may have reallocated the backing
|
||||
// store (which clears the canvas), and during live window resizes
|
||||
// rAF is starved by relayout — a deferred draw would leave the
|
||||
@@ -996,6 +1020,8 @@ export class GraphCanvasRenderer {
|
||||
this.canvas.height = bh;
|
||||
}
|
||||
this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||||
this.viewW = w;
|
||||
this.viewH = h;
|
||||
}
|
||||
|
||||
/** Derive ALL world geometry from data + visibility + settings.
|
||||
|
||||
+60
-18
@@ -100,8 +100,13 @@ export function ModelControl({
|
||||
const [open, setOpen] = useState<"model" | "thinking" | null>(null);
|
||||
const [query, setQuery] = useState("");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
/** The arrow-walked result (owner polish, 2026-09-17): arrows move it
|
||||
* through `results` while focus STAYS in the search field; Enter
|
||||
* picks it (or the first result when nothing is walked). */
|
||||
const [menuIdx, setMenuIdx] = useState<number | null>(null);
|
||||
const searchRef = useRef<HTMLInputElement>(null);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const listRef = useRef<HTMLUListElement>(null);
|
||||
|
||||
const defaults = catalog?.defaults;
|
||||
const effectiveId = settings?.model?.id ?? defaults?.model.id ?? fallbackModelId;
|
||||
@@ -114,6 +119,11 @@ export function ModelControl({
|
||||
useEffect(() => {
|
||||
if (open === "model") searchRef.current?.focus();
|
||||
}, [open]);
|
||||
// Keep the arrow-walked result visible in the scrolling list.
|
||||
useEffect(() => {
|
||||
if (open !== "model" || menuIdx === null) return;
|
||||
listRef.current?.querySelector(`[data-idx="${menuIdx}"]`)?.scrollIntoView({ block: "nearest" });
|
||||
}, [menuIdx, open]);
|
||||
|
||||
// The intuitive dropdown contract (owner, stats-control round 1): any
|
||||
// click outside the open menu — or an Esc keypress — closes it. Only the
|
||||
@@ -182,6 +192,7 @@ export function ModelControl({
|
||||
setOpen("model");
|
||||
setQuery("");
|
||||
setError(null);
|
||||
setMenuIdx(null);
|
||||
};
|
||||
window.addEventListener("lh:kbd-open-model-picker", onOpenPicker);
|
||||
return () => window.removeEventListener("lh:kbd-open-model-picker", onOpenPicker);
|
||||
@@ -197,6 +208,19 @@ export function ModelControl({
|
||||
return () => window.removeEventListener("lh:kbd-cycle-thinking", onCycleThinking);
|
||||
}, [levels, effectiveLevel, save, settings]);
|
||||
|
||||
// Selecting a model (click and Enter share one path): keep the
|
||||
// thinking level only when the new model supports it — otherwise
|
||||
// drop it (config fallback clamps honestly; a carry-over would 400).
|
||||
// Replace-whole discipline: spread the current settings — a model pick
|
||||
// must not silently clear a sibling override (graphContextTokens).
|
||||
const pickModel = (m: ModelCatalogEntry) => {
|
||||
const nextLevel =
|
||||
effectiveLevel !== undefined && m.supportedLevels.includes(effectiveLevel)
|
||||
? effectiveLevel
|
||||
: undefined;
|
||||
void save({ ...(settings ?? {}), model: { provider: m.provider, id: m.id }, thinkingLevel: nextLevel });
|
||||
};
|
||||
|
||||
// The filtered, ranked model list.
|
||||
const results = (catalog?.models ?? [])
|
||||
.map((m) => ({ m, s: fuzzyScore(query, m.provider, m.id, m.name) }))
|
||||
@@ -213,6 +237,7 @@ export function ModelControl({
|
||||
setOpen((o) => (o === "model" ? null : "model"));
|
||||
setQuery("");
|
||||
setError(null);
|
||||
setMenuIdx(null);
|
||||
}}
|
||||
aria-expanded={open === "model"}
|
||||
title="Conversation model — applies next turn"
|
||||
@@ -249,7 +274,34 @@ export function ModelControl({
|
||||
ref={searchRef}
|
||||
data-testid="model-search"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
onChange={(e) => {
|
||||
setQuery(e.target.value);
|
||||
setMenuIdx(null); // new query → the walk restarts on Enter/↓
|
||||
}}
|
||||
// The menu keyboard machine (owner polish): focus STAYS in the
|
||||
// search field — ↑/↓ walk the filtered results (clamped, no
|
||||
// wrap), Enter picks the walked row (or the first result when
|
||||
// nothing is walked). stopPropagation keeps these keys out of
|
||||
// every other listener while the menu is open.
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "ArrowDown" || e.key === "ArrowUp") {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (results.length === 0) return;
|
||||
setMenuIdx((i) =>
|
||||
e.key === "ArrowDown"
|
||||
? Math.min((i ?? -1) + 1, results.length - 1)
|
||||
: Math.max((i ?? results.length) - 1, 0),
|
||||
);
|
||||
} else if (e.key === "Enter") {
|
||||
const chosen = results[menuIdx ?? 0];
|
||||
if (chosen) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
pickModel(chosen);
|
||||
}
|
||||
}
|
||||
}}
|
||||
placeholder="Search models…"
|
||||
className="lh-input mb-1.5 w-full rounded-lg border bg-background px-2 py-1.5 text-foreground outline-none focus:ring-1 focus:ring-ring"
|
||||
/>
|
||||
@@ -260,27 +312,17 @@ export function ModelControl({
|
||||
{catalog && results.length === 0 && (
|
||||
<div className="px-2 py-3 text-center text-muted-foreground">No models match.</div>
|
||||
)}
|
||||
<ul data-testid="model-list" className="flex max-h-72 flex-col overflow-y-auto">
|
||||
{results.map((m) => (
|
||||
<ul ref={listRef} data-testid="model-list" className="flex max-h-72 flex-col overflow-y-auto">
|
||||
{results.map((m, i) => (
|
||||
<li key={`${m.provider}/${m.id}`}>
|
||||
<button
|
||||
type="button"
|
||||
data-testid={`model-option-${m.id.replace(/[^a-z0-9-]/gi, "_")}`}
|
||||
onClick={() => {
|
||||
// Keep the thinking level only when the new model
|
||||
// supports it — otherwise drop it (config fallback
|
||||
// clamps honestly; a carry-over would 400).
|
||||
const nextLevel =
|
||||
effectiveLevel !== undefined && m.supportedLevels.includes(effectiveLevel)
|
||||
? effectiveLevel
|
||||
: undefined;
|
||||
// Replace-whole discipline: spread the current settings — a model pick
|
||||
// must not silently clear a sibling override (graphContextTokens).
|
||||
void save({ ...(settings ?? {}), model: { provider: m.provider, id: m.id }, thinkingLevel: nextLevel });
|
||||
}}
|
||||
className={`flex w-full flex-col gap-0.5 rounded-lg px-2 py-1.5 text-left transition-colors hover:bg-muted ${
|
||||
m.id === effectiveId ? "bg-muted/60" : ""
|
||||
}`}
|
||||
data-idx={i}
|
||||
onClick={() => pickModel(m)}
|
||||
className={`flex w-full flex-col gap-0.5 rounded-lg px-2 py-1.5 text-left outline-none transition-colors hover:bg-muted ${
|
||||
i === menuIdx ? "bg-muted ring-1 ring-border" : ""
|
||||
}${m.id === effectiveId && i !== menuIdx ? " bg-muted/60" : ""}`}
|
||||
>
|
||||
<span className="flex items-center justify-between gap-2">
|
||||
<span className="truncate text-card-foreground">{m.name}</span>
|
||||
|
||||
@@ -55,6 +55,18 @@ second pillar of input).
|
||||
| Cheat sheet | ? | keyboard-shortcuts.tsx |
|
||||
| Find (graph: node search) | ⌘F | `lh:kbd-find` (graph-view.tsx; chat transcript search rides the same event when that feature lands) |
|
||||
|
||||
## Model menu keyboard machine (owner polish, 2026-09-17)
|
||||
|
||||
While the model menu is open, focus stays in the search field and the
|
||||
menu owns ↑/↓/Enter inside the input's own handler:
|
||||
|
||||
- **↑/↓** walk the filtered results — clamped, no wrap. First ↓ starts at
|
||||
the first row; first ↑ at the last. The walked row gets a muted ring and
|
||||
scrollIntoView.
|
||||
- **Enter** picks the walked row, or the **first result** when nothing is
|
||||
walked yet (owner decision). Typing a new query resets the walk.
|
||||
- Clicking and Enter share one `pickModel` path; Esc still closes the menu.
|
||||
|
||||
## Question dock row machine (Wave B, owner rounds 2026-09-17)
|
||||
|
||||
While a question is expanded, the dock owns ↑/↓/Space/Enter/Tab:
|
||||
|
||||
@@ -225,3 +225,17 @@ LinLog-only FA2 (one afternoon), then the two-level pipeline
|
||||
(geometry already unit-tested in `components/cluster-geometry.ts`).
|
||||
- Label-gate hysteresis: small dead-band in log-zoom to avoid threshold flicker.
|
||||
- Whether layout runs server-side at extraction (persisted as data) or in-browser.
|
||||
|
||||
## Center-anchor on window resize (2026-09-17)
|
||||
|
||||
The camera translate is measured from the canvas's TOP-LEFT corner, so a
|
||||
window resize used to keep the top-left pinned and the graph appeared to
|
||||
slide by half the size delta (owner report). The resize observer now
|
||||
captures the world point under the PRE-resize viewport center (from the
|
||||
last-synced `viewW/H` — the ResizeObserver already sees the new size in
|
||||
clientWidth/Height), then re-anchors the translate so that same world
|
||||
point lands under the NEW center (applied through the zoom behavior, so
|
||||
d3 state, camera persistence, and card-dismiss all behave like any
|
||||
camera move). Zoom (k) is untouched; `refreshFitZoom` metadata is
|
||||
viewport-bound and recomputed as before. Verified by canvas pixel
|
||||
sampling: 7/7 center-area samples identical across a 300×200 shrink.
|
||||
|
||||
@@ -33,6 +33,8 @@ export type KeyAction =
|
||||
| "rename-session"
|
||||
| "cheat-sheet"
|
||||
| "find"
|
||||
| "model-menu-walk"
|
||||
| "model-menu-pick"
|
||||
| "question-focus"
|
||||
| "question-next-row"
|
||||
| "question-prev-row"
|
||||
@@ -76,6 +78,8 @@ export const KEYBOARD_ACTIONS: readonly KeyActionDef[] = [
|
||||
// the keys while a question is expanded; the registry never dispatches
|
||||
// them, so bare arrows stay free everywhere else.
|
||||
{ id: "question-focus", label: "Question · focus thinking ↔ rows", scope: "chat", binding: "tab", displayOnly: true },
|
||||
{ id: "model-menu-walk", label: "Model menu · walk results", scope: "global", binding: "arrowup", displayOnly: true },
|
||||
{ id: "model-menu-pick", label: "Model menu · pick result", scope: "global", binding: "enter", displayOnly: true },
|
||||
{ id: "question-next-row", label: "Question · next row", scope: "chat", binding: "arrowdown", displayOnly: true },
|
||||
{ id: "question-prev-row", label: "Question · previous row", scope: "chat", binding: "arrowup", displayOnly: true },
|
||||
{ id: "question-pick-row", label: "Question · pick row", scope: "chat", binding: "space", displayOnly: true },
|
||||
|
||||
Reference in New Issue
Block a user