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

Session deletion dialog matches the node deletion dialog: red title, mono name below, checkbox flow

Browse Source 
Owner polish round (2026-09-24): the two destructive-confirmation
surfaces must read as ONE design. The node dialog was the good one —
the session dialog now wears its exact look and flow.

components/delete-session-dialog.tsx (full rework):
- Red serif "Delete session?" (was neutral "Delete "title"?") — the
  node dialog's destructive title, text-destructive on font-title 2xl.
- The session name below the title in JetBrains Mono at text-lg,
  NO code-block chrome — the font already says code. (The node
  dialog's name got the same treatment: text-xs bg-muted code block
  dies, mono text-lg line lives. Owner chose below-the-title over
  parens-in-the-title: long titles wrap safely below, never inside
  the 25px headline.)
- TWO OPTION BUTTONS -> CHECKBOX FLOW: the locked two-button design
  (preserve-graph / delete-nodes) collapses to ONE unchecked-by-default
  checkbox "Also remove its graph traces" (accent-primary, the settings
  panel's native-checkbox idiom) carrying the graph-touching option's
  consequence copy verbatim. Unchecked = preserve-graph; checked =
  delete-nodes. The unchecked promise ("everything it added to the
  graph stays unless you check below") lives in the intro line now.
- Bottom row = the node dialog's exact pair: quiet Cancel + destructive
  red Delete (border + text, fill on hover), "Deleting…" on the Delete
  button while busy. Try-again re-derives the mode from the checkbox
  (retry IS Delete pressed again; the checkbox is disabled while busy).
- DeleteSessionBody exported pure (the settings/node dialog body
  pattern) for SSR pins; TRACES_COPY exported for the copy pin.
  DELETE_OPTIONS dies with the two-button design.

Tests: session-context.test.tsx's two-option pins rewritten for the
node-dialog shape (red title, mono name no-chrome, unchecked checkbox
default, red Delete pair, old testids absent); delete-node-dialog
pins the chrome-less text-lg name. 905/905. Live-verified on :3001:
both dialogs render 25px red serif titles, 16px mono names, matching
red Delete buttons; Esc closes both, nothing deleted in verification.
This commit is contained in:
amosblomqvist
2026-09-24 20:06:22 +03:00
parent 73027f49bf
commit 6896c23cc2
4 changed files with 226 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/delete-session-dialog.tsx
+152 -105
View File
@@ -4,45 +4,36 @@ import { useEffect, useState } from "react";
import { createPortal } from "react-dom";
import type { ChatDeleteMode, ChatListItem } from "@/src/core";
/** The locked two-option design (owner 2026-09-22/23) — plain-language
* consequences, the graph-touching option says so. Exported pure for
* render pins: the copy is design, not implementation. */
export const DELETE_OPTIONS: {
mode: ChatDeleteMode;
testid: string;
title: string;
body: string;
}[] = [
{
mode: "preserve-graph",
testid: "delete-option-preserve",
title: "Delete the session only",
body: "Everything this session added to the graph stays — topics, links, and notes it produced remain untouched.",
},
{
mode: "delete-nodes",
testid: "delete-option-nodes",
title: "Also remove its graph traces",
body: "This session’s topics, links, and events leave the graph too. Topics other sessions or imported notes also cover survive; topics only this session created are removed entirely.",
},
];
/** The graph-traces checkbox copy (owner, 2026-09-24 flow rework — was
* the delete-nodes option's body in the two-button design): the
* graph-touching consequence says so, shared-topic survival included.
* Exported pure for render pins: the copy is design, not implementation. */
export const TRACES_COPY = {
testid: "delete-traces",
checkbox: "delete-traces-checkbox",
title: "Also remove its graph traces",
body: "This session’s topics, links, and events leave the graph too. Topics other sessions or imported notes also cover survive; topics only this session created are removed entirely.",
};
/**
* Session deletion (wave 6 chunk A) — THE destructive-confirmation surface,
* portaled z-50 like the setup dialog. Two options per the locked design,
* consequences in plain language; the one that touches the graph says so:
* Session deletion (wave 6 chunk A; owner flow rework 2026-09-24) — THE
* destructive-confirmation surface, portaled z-50 like the setup dialog,
* now in the node dialog's shape (the two must read as one design):
*
* preserve-graph the session record, its jobs, and its extraction
* bookkeeping die; the graph keeps every contribution.
* delete-nodes the session's ledger traces go too — shared topics
* survive (other sessions / imported notes still
* reference them), topics only this session created
* are removed entirely.
* - red serif title "Delete session?", the session name below it in
* JetBrains Mono, sized up, no code-block chrome;
* - ONE unchecked-by-default checkbox "Also remove its graph traces"
* (unchecked = preserve-graph: the session record, its jobs, and its
* extraction bookkeeping die; the graph keeps every contribution.
* checked = delete-nodes: the session's ledger traces go too);
* - a bottom row Cancel + destructive-red Delete, exactly the node
* dialog's pair.
*
* Retryable failures render honestly with a Try-again: 409 turn_in_flight /
* jobs_running ("wait for running work") and 503 extraction_winding_down
* ("in a moment") both clear on their own — the server's error line is
* already written for the user; we show it verbatim.
* already written for the user; we show it verbatim. Try-again is just
* Delete pressed again — the mode re-derives from the checkbox.
*/
export function DeleteSessionDialog({
chat,
@@ -55,15 +46,19 @@ export function DeleteSessionDialog({
/** Success path — the sidebar owns navigation + list patching. */
onDeleted: (id: string, mode: ChatDeleteMode, graphRevision: number) => void;
}) {
const [busy, setBusy] = useState<ChatDeleteMode | null>(null);
// The failure carries the mode it came from — Try-again re-runs THAT
// mode (busy is back to null by then, so it can't be read off busy).
const [failure, setFailure] = useState<{ code: string; error: string; mode: ChatDeleteMode } | null>(null);
const [traces, setTraces] = useState(false);
const [busy, setBusy] = useState(false);
// 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
// busy, so no mid-flight switches).
const [failure, setFailure] = useState<{ code: string; error: string } | null>(null);
// Fresh state per session: closing resets, opening a new chat starts clean.
useEffect(() => {
if (!chat) {
setBusy(null);
setTraces(false);
setBusy(false);
setFailure(null);
}
}, [chat]);
@@ -81,9 +76,10 @@ export function DeleteSessionDialog({
return () => window.removeEventListener("keydown", onKeyDown);
}, [chat, onClose]);
const run = async (mode: ChatDeleteMode) => {
const run = async () => {
if (!chat || busy) return;
setBusy(mode);
const mode: ChatDeleteMode = traces ? "delete-nodes" : "preserve-graph";
setBusy(true);
setFailure(null);
try {
const res = await fetch(`/api/chats/${chat.id}?mode=${mode}`, { method: "DELETE" });
@@ -96,18 +92,14 @@ export function DeleteSessionDialog({
if (!res.ok) {
// 409 (turn/jobs running) and 503 (extraction winding down) are
// both retryable — keep the dialog open, show the server's line.
setFailure({
code: body.code ?? "error",
error: body.error ?? `Delete failed (${res.status})`,
mode,
});
setBusy(null);
setFailure({ code: body.code ?? "error", error: body.error ?? `Delete failed (${res.status})` });
setBusy(false);
return;
}
onDeleted(chat.id, mode, body.graphRevision ?? 0);
} catch {
setFailure({ code: "network", error: "Delete failed — network error. Try again.", mode });
setBusy(null);
setFailure({ code: "network", error: "Delete failed — network error. Try again." });
setBusy(false);
}
};
@@ -120,65 +112,120 @@ export function DeleteSessionDialog({
if (!busy) onClose();
}}
>
<div
role="dialog"
aria-modal="true"
aria-label="Delete session"
data-testid="delete-session-dialog"
onClick={(e) => e.stopPropagation()}
className="w-[32rem] max-w-[calc(100vw-2rem)] rounded-xl border bg-card p-5 shadow-xl"
>
<h2 className="font-title text-2xl tracking-tight">Delete “{chat.title}”?</h2>
<p className="mt-2 text-sm text-muted-foreground">
This permanently removes the session — its messages, background jobs, and extraction records. Pick how
far it reaches:
</p>
<div className="mt-4 flex flex-col gap-2">
{DELETE_OPTIONS.map((option) => (
<button
key={option.mode}
type="button"
data-testid={option.testid}
disabled={busy !== null}
onClick={() => void run(option.mode)}
className="flex flex-col items-start rounded-lg border border-border/60 px-4 py-3 text-left transition-colors hover:bg-accent disabled:opacity-40"
>
<span className="text-sm text-foreground">{option.title}</span>
<span className="mt-1 text-xs text-muted-foreground">{option.body}</span>
</button>
))}
</div>
{failure && (
<div
role="alert"
data-testid="delete-failure"
className="mt-3 rounded-sm border border-border/60 px-3 py-2 text-xs"
>
<span className="text-foreground">{failure.error}</span>
<button
type="button"
data-testid="delete-retry"
onClick={() => failure && void run(failure.mode)}
disabled={busy !== null}
className="ml-3 text-xs text-foreground underline-offset-2 hover:underline disabled:opacity-40"
>
Try again
</button>
</div>
)}
<div className="mt-4 flex justify-end">
<button
type="button"
data-testid="delete-cancel"
onClick={onClose}
disabled={busy !== null}
className="rounded-sm px-3 py-1.5 text-xs text-muted-foreground transition-colors hover:text-foreground disabled:opacity-40"
>
{busy ? "Deleting…" : "Cancel"}
</button>
</div>
</div>
<DeleteSessionBody
chat={chat}
traces={traces}
busy={busy}
failure={failure}
onTraces={(next) => setTraces(next)}
onClose={onClose}
onRun={() => void run()}
/>
</div>,
document.body,
);
}
/** The dialog's pure body — exported for SSR pins (the settings-dialog /
* node-dialog body pattern). The wrapper owns state + effects + portal. */
export function DeleteSessionBody({
chat,
traces,
busy,
failure,
onTraces,
onClose,
onRun,
}: {
chat: Pick<ChatListItem, "id" | "title">;
/** The graph-traces checkbox — unchecked by default (preserve-graph). */
traces: boolean;
busy: boolean;
failure: { code: string; error: string } | null;
onTraces: (next: boolean) => void;
onClose: () => void;
onRun: () => void;
}) {
return (
<div
role="dialog"
aria-modal="true"
aria-label="Delete session"
data-testid="delete-session-dialog"
onClick={(e) => e.stopPropagation()}
className="w-[32rem] max-w-[calc(100vw-2rem)] rounded-xl border bg-card p-5 shadow-xl"
>
<h2 className="font-title text-2xl tracking-tight text-destructive">Delete session?</h2>
{/* The session name below the title in JetBrains Mono (owner,
2026-09-24): no code-block chrome — the font already says
code — sized up to text-lg. Same shape as the node dialog. */}
<div className="mt-1.5">
<code data-testid="session-name-code" className="font-mono text-lg text-foreground">
{chat.title}
</code>
</div>
<p className="mt-2 text-sm text-muted-foreground">
This permanently removes the session — its messages, background jobs, and extraction records. Everything
it added to the graph stays unless you check below. This cannot be undone.
</p>
<label
data-testid={TRACES_COPY.testid}
className="mt-4 flex cursor-pointer items-start gap-2.5 rounded-lg border border-border/60 px-4 py-3"
>
<input
type="checkbox"
data-testid={TRACES_COPY.checkbox}
checked={traces}
onChange={(e) => onTraces(e.target.checked)}
disabled={busy}
className="mt-0.5 size-4 shrink-0 accent-primary"
/>
<span className="min-w-0">
<span className="block text-sm text-foreground">{TRACES_COPY.title}</span>
<span className="mt-1 block text-xs text-muted-foreground">{TRACES_COPY.body}</span>
</span>
</label>
{failure && (
<div
role="alert"
data-testid="delete-failure"
className="mt-3 rounded-sm border border-border/60 px-3 py-2 text-xs"
>
<span className="text-foreground">{failure.error}</span>
<button
type="button"
data-testid="delete-retry"
onClick={onRun}
disabled={busy}
className="ml-3 text-xs text-foreground underline-offset-2 hover:underline disabled:opacity-40"
>
Try again
</button>
</div>
)}
{/* The node dialog's exact bottom row: quiet Cancel, destructive
red Delete (border + text, fill on hover — the app's
established destructive pair). */}
<div className="mt-4 flex justify-end gap-2">
<button
type="button"
data-testid="delete-cancel"
onClick={onClose}
disabled={busy}
className="rounded-sm px-3 py-1.5 text-xs text-muted-foreground transition-colors hover:text-foreground disabled:opacity-40"
>
Cancel
</button>
<button
type="button"
data-testid="delete-confirm"
onClick={onRun}
disabled={busy}
className="rounded-sm border border-destructive/50 bg-destructive/10 px-3 py-1.5 text-xs text-destructive transition-colors hover:bg-destructive/20 disabled:opacity-40"
>
{busy ? "Deleting…" : "Delete"}
</button>
</div>
</div>
);
}