sorokin.oleg.edu/learnharness
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 6 Wiki Activity

ui: polish first-run setup copy and dialog dismissal

Browse Source
This commit is contained in:
amosblomqvist
2026-10-17 00:38:57 +03:00
parent 15772f47c9
commit 487a63eaa5
15 changed files with 531 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/abort-turn-dialog.tsx
+4 -4
View File
@@ -2,6 +2,7 @@
import { useEffect } from "react";
import { createPortal } from "react-dom";
import { useBackdropDismiss } from "@/components/backdrop-dismiss";
/**
* The ESC-abort guard (owner, 2026-10-02): the global Esc → abort chain
@@ -59,6 +60,7 @@ export function AbortTurnBody({
* (owner, 2026-10-04): the line says so. */
busy?: boolean;
}) {
const backdropDismiss = useBackdropDismiss(onClose);
const copy = COPY[mode];
return (
<div
@@ -67,10 +69,8 @@ export function AbortTurnBody({
aria-label={copy.title}
data-testid="abort-turn-dialog"
className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm"
// A click on the scrim cancels — the cautious default, like Esc.
onClick={(e) => {
if (e.target === e.currentTarget) onClose();
}}
// A genuine click on the scrim cancels — the cautious default, like Esc.
{...backdropDismiss}
>
<div
className="mx-4 w-full max-w-sm rounded-xl border bg-card p-5 shadow-lg"
components/backdrop-dismiss.ts
+48
View File
@@ -0,0 +1,48 @@
"use client";
import { useRef, type MouseEvent, type PointerEvent } from "react";
/** A synthesized click may target the backdrop even when a drag began
* inside the dialog. Require both endpoints of the same primary gesture.
* Capture observes inside/portaled interactions even if they stop bubbling;
* it never prevents their own button, menu, or selection behavior. */
export function useBackdropDismiss(onDismiss: () => void) {
const gesture = useRef<{
pointerId: number;
backdrop: HTMLDivElement;
released: boolean;
} | null>(null);
return {
onPointerDownCapture(event: PointerEvent<HTMLDivElement>) {
gesture.current = event.isPrimary && event.button === 0 && event.target === event.currentTarget
? { pointerId: event.pointerId, backdrop: event.currentTarget, released: false }
: null;
// Touch can implicitly capture the pointer on press. Let release
// target the actual hit element, not a backdrop left behind.
if (gesture.current && event.currentTarget.hasPointerCapture?.(event.pointerId)) {
event.currentTarget.releasePointerCapture(event.pointerId);
}
},
onPointerUpCapture(event: PointerEvent<HTMLDivElement>) {
const press = gesture.current;
gesture.current = press && press.pointerId === event.pointerId &&
event.isPrimary && event.button === 0 && event.target === event.currentTarget &&
press.backdrop === event.currentTarget
? { ...press, released: true }
: null;
},
onPointerCancelCapture() {
gesture.current = null;
},
onClickCapture(event: MouseEvent<HTMLDivElement>) {
const press = gesture.current;
gesture.current = null;
if (press?.released && press.backdrop === event.currentTarget &&
event.button === 0 && event.target === event.currentTarget) {
// This render's callback preserves current busy guards and props.
onDismiss();
}
},
};
}
components/delete-node-dialog.tsx
+5 -3
View File
@@ -2,6 +2,7 @@
import { useEffect, useState } from "react";
import { createPortal } from "react-dom";
import { useBackdropDismiss } from "@/components/backdrop-dismiss";
/** The 409 extraction_running line (owner phrasing, node interlude):
* the server's error names the extraction; the ACTIVITY DOCK is the
@@ -146,6 +147,9 @@ export function DeleteNodeDialog({
onDeleted: (nodeIds: string[], graphRevision: number) => void;
}) {
const [busy, setBusy] = useState(false);
const backdropDismiss = useBackdropDismiss(() => {
if (!busy) onClose();
});
const [failure, setFailure] = useState<{ code: string; error: string } | null>(null);
// Fresh state per dialog: closing resets.
@@ -214,9 +218,7 @@ export function DeleteNodeDialog({
return createPortal(
<div
className="fixed inset-0 z-50 flex items-center justify-center bg-background/80"
onClick={() => {
if (!busy) onClose();
}}
{...backdropDismiss}
>
<DeleteNodeBody
nodes={nodes}
components/delete-session-dialog.tsx
+5 -3
View File
@@ -2,6 +2,7 @@
import { useEffect, useState } from "react";
import { createPortal } from "react-dom";
import { useBackdropDismiss } from "@/components/backdrop-dismiss";
import type { ChatDeleteMode, ChatListItem } from "@/src/core";
/** The graph-traces checkbox copy (owner, 2026-09-24 flow rework — was
@@ -51,6 +52,9 @@ export function DeleteSessionDialog({
}) {
const [traces, setTraces] = useState(false);
const [busy, setBusy] = useState(false);
const backdropDismiss = useBackdropDismiss(() => {
if (!busy) onClose();
});
// Retry IS pressing Delete again: the mode always derives from the
// checkbox's current state (a toggle between failure and retry is a
// change of intent, honored as such — the checkbox is disabled while
@@ -115,9 +119,7 @@ export function DeleteSessionDialog({
return createPortal(
<div
className="fixed inset-0 z-50 flex items-center justify-center bg-background/80"
onClick={() => {
if (!busy) onClose();
}}
{...backdropDismiss}
>
<DeleteSessionBody
chat={chat}
components/graph-view.tsx
+2 -3
View File
@@ -1492,14 +1492,13 @@ export function GraphView({
return (
<div className="relative h-full w-full">
{isEmpty ? (
// The original home placeholder — kept verbatim for the empty graph.
// The empty graph keeps the first action clear without zero-valued statistics.
<div className="flex h-full w-full items-center justify-center px-4">
<div className="flex flex-col items-center gap-3 text-center text-muted-foreground">
<WaypointsIcon className="size-10 opacity-40" strokeWidth={1.25} />
<div className="text-lg font-medium text-foreground">Knowledge graph</div>
<p className="max-w-sm text-sm">
Every session you complete will map what you know — and where the edge of your
understanding is — right here.
Start a session or import notes to build your graph.
</p>
</div>
</div>
components/home.tsx
+1 -1
View File
@@ -260,7 +260,7 @@ export function Home({
onClick={() => setSetupOpen(true)}
className="rounded-sm border border-border bg-card px-3 py-1.5 font-ui text-xs text-foreground transition-colors hover:border-muted-foreground/50 hover:bg-accent cursor-pointer"
>
Set up your models — chats start after the three picks
Set up your models
</button>
</div>
)
components/keyboard-shortcuts.tsx
+3 -1
View File
@@ -24,6 +24,7 @@
*/
import { useEffect, useRef, useState } from "react";
import { useBackdropDismiss } from "@/components/backdrop-dismiss";
import { useRouter } from "next/navigation";
import {
actionForBinding,
@@ -150,6 +151,7 @@ export function KeyboardShortcuts() {
* Until the settings milestone ships an editor, this is how shortcuts
* stay discoverable. */
function CheatSheet({ open, onClose }: { open: boolean; onClose: () => void }) {
const backdropDismiss = useBackdropDismiss(onClose);
if (!open) return null;
const scopes = ["global", "chat", "graph"] as const;
const scopeLabels: Record<(typeof scopes)[number], string> = {
@@ -161,7 +163,7 @@ function CheatSheet({ open, onClose }: { open: boolean; onClose: () => void }) {
<div
data-testid="cheat-sheet"
className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
onClick={onClose}
{...backdropDismiss}
>
<div
className="max-h-[80vh] w-full max-w-[36rem] overflow-y-auto rounded-xl border bg-card p-5 shadow-2xl"
components/new-session.tsx
+1 -1
View File
@@ -386,7 +386,7 @@ export function NewSession({ initialConfigured, mode = "teach" }: { initialConfi
onClick={() => setSetupOpen(true)}
className="rounded-sm border border-border bg-card px-3 py-1.5 font-ui text-xs text-foreground transition-colors hover:border-muted-foreground/50 hover:bg-accent cursor-pointer"
>
Set up your models — chats start after the three picks
Set up your models
</button>
</div>
)
components/settings/settings-dialog.tsx
+5 -3
View File
@@ -30,6 +30,7 @@ import {
useState,
} from "react";
import { createPortal } from "react-dom";
import { useBackdropDismiss } from "@/components/backdrop-dismiss";
import {
CURRENT_SETTINGS_VERSION,
type AgentSettings,
@@ -113,13 +114,14 @@ function SettingsDialog({
/** The keys-section row to unfold (see DialogContext above). */
initialRow: string | null;
}) {
// Plain dim backdrop (no blur — nothing decorative); the click
// closes, the dialog body stops propagation.
const backdropDismiss = useBackdropDismiss(onClose);
// Plain dim backdrop (no blur — nothing decorative); a genuine
// backdrop click closes, the dialog body stops propagation.
return createPortal(
<div
className="fixed inset-0 z-50 flex items-center justify-center bg-background/80"
data-testid="settings-backdrop"
onClick={onClose}
{...backdropDismiss}
>
<SettingsDialogBody onClose={onClose} initialSection={initialSection} initialRow={initialRow} />
</div>,
components/setup-cta.tsx
+1 -1
View File
@@ -70,7 +70,7 @@ export function ZeroKeysPill({ onOpen }: { onOpen: () => void }) {
onClick={onOpen}
className="rounded-sm border border-border bg-card px-3 py-1.5 font-ui text-xs text-foreground transition-colors hover:border-muted-foreground/50 hover:bg-accent cursor-pointer"
>
Add a provider key — chats start after one unlocks the models
Add a provider key
</button>
</div>
);
components/setup-dialog.tsx
+16 -9
View File
@@ -34,6 +34,7 @@
import { useEffect, useRef, useState } from "react";
import { createPortal } from "react-dom";
import { useBackdropDismiss } from "@/components/backdrop-dismiss";
import type React from "react";
import { type ModelCatalogEntry, type ModelSlotName, type ModelsSettings } from "@/src/core";
import { prettyModel } from "@/components/usage-format";
@@ -146,9 +147,9 @@ export function SetupKeysBody({
}) {
return (
<div className="flex flex-col gap-3 px-6 py-5" data-testid="setup-stage-keys">
<p className="text-sm text-foreground">First, add a provider key.</p>
<p className="text-sm text-foreground">Add a provider key.</p>
<p className="text-xs text-muted-foreground">
The model pickers list only what your keys unlock — there is nothing to pick until one exists.
Choose your AI provider and paste its API key. You’ll pick your models next.
</p>
<div className="flex flex-col gap-2">
<div ref={menuAnchor} className="relative max-w-96">
@@ -225,6 +226,7 @@ export function SetupDialog({
onClose: () => void;
onDone: (models: ModelsSettings) => void;
}) {
const backdropDismiss = useBackdropDismiss(onClose);
const [body, setBody] = useState<ModelsBody | null>(null);
const [failed, setFailed] = useState(false);
const [picked, setPicked] = useState<Partial<Record<ModelSlotName, ModelCatalogEntry>>>({});
@@ -315,8 +317,13 @@ export function SetupDialog({
else onClose();
};
const onPointerDown = (e: PointerEvent) => {
if (!(e.target instanceof Element)) return;
const t = e.target;
if (keyMenuOpen) {
if (t.closest("[data-lh-menu]") || t.closest('[data-testid="setup-key-provider"]')) return;
setKeyMenuOpen(false);
}
if (openMenu === null) return;
const t = e.target as Element;
const triggerTestid =
openMenu.kind === "model" ? `setup-trigger-${openMenu.slot}` : `setup-thinking-${openMenu.slot}`;
if (t.closest("[data-lh-menu]") || t.closest(`[data-testid="${triggerTestid}"]`)) return;
@@ -351,7 +358,7 @@ export function SetupDialog({
setKeySaving(false);
if (!res || !res.ok) {
const body = (await res?.json().catch(() => ({}))) as { error?: string } | undefined;
setKeyError(res ? (body?.error ?? `Save failed (${res.status})`) : "Save failed — network");
setKeyError(res ? (body?.error ?? `Save failed (${res.status})`) : "Save failed. Check your connection and try again.");
return;
}
setKeyProvider(null);
@@ -378,7 +385,7 @@ export function SetupDialog({
}).catch(() => null);
if (!res || !res.ok) {
setSaving(false);
setError(res ? `Save failed: ${(await res.json().catch(() => ({}))).error ?? res.status}` : "Save failed — network");
setError(res ? `Save failed: ${(await res.json().catch(() => ({}))).error ?? res.status}` : "Save failed. Check your connection and try again.");
return;
}
notifySettingsSaved("models");
@@ -389,7 +396,7 @@ export function SetupDialog({
<div
className="fixed inset-0 z-50 flex items-center justify-center bg-background/80"
data-testid="setup-backdrop"
onClick={onClose}
{...backdropDismiss}
>
<div
role="dialog"
@@ -418,7 +425,7 @@ export function SetupDialog({
<div className="flex flex-col px-6 py-5">
{failed ? (
<p className="text-sm text-foreground">
Model catalog could not be loaded — check the connection and retry.
Model catalog could not be loaded. Check the connection and retry.
</p>
) : (
<SetupKeysBody
@@ -443,7 +450,7 @@ export function SetupDialog({
) : (
<div className="flex flex-col gap-4 overflow-y-auto px-6 py-5" data-testid="setup-stage-pickers">
<p className="text-xs text-muted-foreground">
Pick the model for each tier — all three are required before chats can start.
Pick the model for each tier. All three are required before chats can start.
</p>
{SLOT_ORDER.map((slot) => {
const entry = picked[slot];
@@ -513,7 +520,7 @@ export function SetupDialog({
}));
setOpenMenu(null);
}}
footer={catalog && catalog.length === 0 ? "No image-capable models — widen the provider keys" : undefined}
footer={catalog && catalog.length === 0 ? "No image-capable models. Add a provider key with access to a vision model." : undefined}
/>
</MenuShell>
)}