practice: the chain table — every reasoning chain in one selectable overlay (owner-approved plan, 2026-09-29)
- core formatChainLine: names + arrow one-liner, singleton marker, pure
- graph-view Chains button (chrome row, empty-graph hidden) opens the
overlay: fuzzy search (names/aliases/statements), collapsible chain →
member → statement rows, birth-session + created columns, no
understanding-levels column
- pinned Selected section derives the agents' actual input live
(chainsForSelection over the selection; premise without its
conclusion shows as the singleton it becomes)
- Generate opens the creation dialog in CUSTOM mode: selection summary
+ dated default title, posts {nodeIds, params, note}; cluster mode
untouched on /practice
- live-verified on the owner's dev server: 219 chains, derived preview,
search-never-filters-Selected, dialog handoff (selection pass-through
bug caught + fixed en route), Esc/backdrop dismiss, zero writes
- practice UI files re-normalized to tabs (my earlier prettier runs had
drifted them to the 2-space default; whitespace-only)
17 render/unit pins added; gates: tsc 0, 1174/1174, lint 0, build 0
This commit is contained in:
amosblomqvist
@@ -0,0 +1,519 @@
|
||||
"use client";
|
||||
|
||||
/**
|
||||
* THE CHAIN TABLE (chains overlay, owner-approved plan 2026-09-29): every
|
||||
* reasoning chain of the graph in one selectable table — the graph view's
|
||||
* practice entry for FREE-FORM selections, complementing the cluster
|
||||
* picker (which stays the /practice page's only creation mode). Read-only
|
||||
* toward the graph: it renders the snapshot it is handed, selects node
|
||||
* ids, and hands the selection to the practice dialog's CUSTOM mode.
|
||||
*
|
||||
* MOUNT IDIOM (the session-overlay precedent, session-overlay.tsx): the
|
||||
* overlay is ABSOLUTE INSIDE the graph area (never a body portal) —
|
||||
* inset-0, z-40, bg-background/80 + backdrop blur — so the app chrome
|
||||
* (drag bar, sidebar) stays sharp and reachable; Esc and backdrop clicks
|
||||
* dismiss.
|
||||
*
|
||||
* STRUCTURE: a fuzzy search box (names, aliases, statements — core's
|
||||
* fuzzyScore) at the very top filters the chain list only; the SELECTED
|
||||
* section is pinned beneath it, never filtered — N propositions → M
|
||||
* chains via chainsForSelection over the selection (the agents' ACTUAL
|
||||
* input: a selected premise without its conclusion shows as the singleton
|
||||
* it becomes). Chain rows (the core formatter's name line) expand to
|
||||
* indented member proposition rows; each member expands its full
|
||||
* statement inline. Columns: checkbox | chain/proposition tree | birth
|
||||
* session(s) | created. NO understanding-levels column (explicitly not
|
||||
* built — no dead markup).
|
||||
*
|
||||
* Named neutrally (ChainTable, not Practice*) — the table is a
|
||||
* graph-surface; only the Generate handoff knows about practice.
|
||||
*/
|
||||
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { ListTreeIcon, SearchIcon, XIcon } from "lucide-react";
|
||||
import { chainsForSelection, formatChainLine, fuzzyScore } from "@/src/core";
|
||||
import type { GraphEdge, GraphNode } from "@/src/core";
|
||||
import {
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger,
|
||||
} from "@/components/ui/collapsible";
|
||||
import { PracticeDialog } from "@/components/practice-dialog";
|
||||
|
||||
/** The grid every row shares: checkbox | tree | birth | date. */
|
||||
const ROW_COLS = "grid-cols-[1.5rem_minmax(0,1fr)_9rem_5.5rem]";
|
||||
|
||||
/** A node's birth-session label, mirroring the clusters' honesty join:
|
||||
* the first surviving provenance point's chatId → chat title / notes
|
||||
* file path, null when unnameable (rendered muted "unlabeled", never
|
||||
* guessed). Inlined here (one line) because session-clusters.ts is not
|
||||
* barrel-exported — the graph stream owns it; the shape is contract-
|
||||
* pinned (provenance[0] is the birth by the getGraph fold order). */
|
||||
function birthLabelOf(
|
||||
node: Pick<GraphNode, "provenance">,
|
||||
sessions: Record<string, string>,
|
||||
fileSources: Record<string, string>,
|
||||
): string | null {
|
||||
const birth = node.provenance[0]?.chatId ?? null;
|
||||
if (birth === null) return null;
|
||||
return sessions[birth] ?? fileSources[birth] ?? null;
|
||||
}
|
||||
|
||||
/** One chain's birth labels — unique over its members, sorted by session
|
||||
* id (deterministic); a member with no nameable birth contributes a
|
||||
* muted "unlabeled" entry (honest, per the clusters law). */
|
||||
function chainBirthLabels(
|
||||
chain: { premises: string[]; conclusion: string },
|
||||
byId: Map<string, GraphNode>,
|
||||
sessions: Record<string, string>,
|
||||
fileSources: Record<string, string>,
|
||||
): string[] {
|
||||
const labels = new Map<string, string>();
|
||||
for (const id of [...chain.premises, chain.conclusion]) {
|
||||
const node = byId.get(id);
|
||||
if (!node) continue;
|
||||
const birth = node.provenance[0]?.chatId ?? null;
|
||||
if (birth === null) {
|
||||
labels.set("\0unlabeled", "unlabeled");
|
||||
continue;
|
||||
}
|
||||
labels.set(birth, sessions[birth] ?? fileSources[birth] ?? "unlabeled");
|
||||
}
|
||||
return [...labels.entries()]
|
||||
.sort((a, b) => (a[0] < b[0] ? -1 : 1))
|
||||
.map(([, label]) => label);
|
||||
}
|
||||
|
||||
/** The checkbox — checked/indeterminate (a chain with SOME members
|
||||
* selected); clicks stop at the checkbox so they never toggle the
|
||||
* surrounding Collapsible row. */
|
||||
function RowCheckbox({
|
||||
checked,
|
||||
indeterminate = false,
|
||||
onToggle,
|
||||
testid,
|
||||
label,
|
||||
}: {
|
||||
checked: boolean;
|
||||
indeterminate?: boolean;
|
||||
onToggle: (next: boolean) => void;
|
||||
testid: string;
|
||||
label: string;
|
||||
}) {
|
||||
return (
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={checked}
|
||||
// `indeterminate` is a DOM property React does not expose — set it
|
||||
// on the node directly (the chain rows' partial state).
|
||||
ref={(el) => {
|
||||
if (el) el.indeterminate = indeterminate;
|
||||
}}
|
||||
data-testid={testid}
|
||||
aria-label={label}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onChange={(e) => onToggle(e.target.checked)}
|
||||
className="size-3.5 accent-primary"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
/** The table's pure body — exported for SSR pins (the render-suite
|
||||
* discipline). All state (query, selection) arrives via props; the
|
||||
* overlay wrapper below owns it. */
|
||||
export function ChainTableBody({
|
||||
nodes,
|
||||
edges,
|
||||
sessions,
|
||||
fileSources,
|
||||
query,
|
||||
onQuery,
|
||||
selection,
|
||||
onToggleNode,
|
||||
onToggleChain,
|
||||
onClear,
|
||||
onGenerate,
|
||||
onClose,
|
||||
}: {
|
||||
nodes: GraphNode[];
|
||||
edges: GraphEdge[];
|
||||
sessions: Record<string, string>;
|
||||
fileSources: Record<string, string>;
|
||||
query: string;
|
||||
onQuery: (v: string) => void;
|
||||
selection: ReadonlySet<string>;
|
||||
onToggleNode: (id: string, next: boolean) => void;
|
||||
onToggleChain: (ids: string[], next: boolean) => void;
|
||||
onClear: () => void;
|
||||
onGenerate: () => void;
|
||||
onClose: () => void;
|
||||
}) {
|
||||
const byId = useMemo(() => new Map(nodes.map((n) => [n.id, n])), [nodes]);
|
||||
const chains = useMemo(
|
||||
() => chainsForSelection(nodes, edges),
|
||||
[nodes, edges],
|
||||
);
|
||||
const nameOf = (id: string) => byId.get(id)?.name ?? id;
|
||||
|
||||
// The fuzzy filter: a chain is visible when ANY member matches the
|
||||
// query on name, aliases, or statement; chains rank by their best
|
||||
// member's score (desc), ties by chain id — deterministic.
|
||||
const visibleChains = useMemo(() => {
|
||||
const scored = chains.map((chain) => {
|
||||
const memberIds = [...chain.premises, chain.conclusion];
|
||||
// Empty query matches everything at score 0; a non-empty query
|
||||
// starts at null (no match) and takes the best member score.
|
||||
let best: number | null = query.trim() === "" ? 0 : null;
|
||||
for (const id of memberIds) {
|
||||
const node = byId.get(id);
|
||||
if (!node) continue;
|
||||
const s = fuzzyScore(query, node.name, node.statement, ...node.aliases);
|
||||
if (s === null) continue;
|
||||
if (best === null || s > best) best = s;
|
||||
}
|
||||
return { chain, best };
|
||||
});
|
||||
return scored
|
||||
.filter((row): row is { chain: (typeof chains)[number]; best: number } => row.best !== null)
|
||||
.sort((a, b) => b.best - a.best || (a.chain.id < b.chain.id ? -1 : 1))
|
||||
.map(({ chain }) => chain);
|
||||
}, [chains, byId, query]);
|
||||
|
||||
// The agents' ACTUAL input: chainsForSelection over the selection —
|
||||
// a selected premise without its conclusion shows as the singleton it
|
||||
// becomes. This is the pinned preview, never search-filtered.
|
||||
const derived = useMemo(() => {
|
||||
const selectedNodes = [...selection]
|
||||
.map((id) => byId.get(id))
|
||||
.filter((n): n is GraphNode => n !== undefined);
|
||||
return chainsForSelection(selectedNodes, edges);
|
||||
}, [selection, byId, edges]);
|
||||
const propositions = useMemo(() => {
|
||||
const known = new Set([...selection].filter((id) => byId.has(id)));
|
||||
return known;
|
||||
}, [selection, byId]);
|
||||
|
||||
return (
|
||||
<div data-testid="chain-table" className="flex h-full min-h-0 flex-col">
|
||||
{/* Header: title + count + close (the session-overlay chrome). */}
|
||||
<div className="flex shrink-0 items-center gap-2 px-4 pb-2 pt-3">
|
||||
<ListTreeIcon className="size-4 text-muted-foreground" />
|
||||
<span className="font-title text-lg tracking-tight">Chains</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{chains.length} {chains.length === 1 ? "chain" : "chains"} ·{" "}
|
||||
{nodes.length} propositions
|
||||
</span>
|
||||
<div className="flex-1" />
|
||||
<button
|
||||
type="button"
|
||||
data-testid="chain-table-close"
|
||||
onClick={onClose}
|
||||
aria-label="Close chains"
|
||||
className="flex size-7 items-center justify-center rounded-md border border-border/70 bg-card/80 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
<XIcon className="size-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* The fuzzy search — very top; filters the LIST only. */}
|
||||
<div className="shrink-0 px-4 pb-2">
|
||||
<div className="relative">
|
||||
<SearchIcon className="absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
|
||||
<input
|
||||
value={query}
|
||||
data-testid="chain-table-search"
|
||||
onChange={(e) => onQuery(e.target.value)}
|
||||
placeholder="Search propositions…"
|
||||
aria-label="Search propositions"
|
||||
spellCheck={false}
|
||||
className="h-8 w-full rounded-lg border bg-background pl-8 pr-3 text-xs outline-none placeholder:text-muted-foreground focus:border-ring"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* The SELECTED section — pinned, always visible, never filtered. */}
|
||||
<div
|
||||
data-testid="chain-table-selected"
|
||||
className="mx-4 mb-2 shrink-0 rounded-lg border bg-accent/30 px-3 py-2"
|
||||
>
|
||||
{propositions.size === 0 ? (
|
||||
<div className="text-xs text-muted-foreground">
|
||||
Nothing selected — check whole chains or single propositions below.
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="min-w-0 flex-1">
|
||||
<div
|
||||
data-testid="chain-selected-summary"
|
||||
className="text-xs font-medium"
|
||||
>
|
||||
{propositions.size}{" "}
|
||||
{propositions.size === 1 ? "proposition" : "propositions"} →{" "}
|
||||
{derived.length} {derived.length === 1 ? "chain" : "chains"}
|
||||
</div>
|
||||
<ul
|
||||
data-testid="chain-derived-list"
|
||||
className="mt-1 max-h-20 overflow-y-auto text-xs leading-relaxed text-muted-foreground"
|
||||
>
|
||||
{derived.map((chain) => (
|
||||
<li key={chain.id} data-testid={`chain-derived-${chain.id}`}>
|
||||
{formatChainLine(
|
||||
chain,
|
||||
Object.fromEntries(
|
||||
[...byId.entries()].map(([id, n]) => [
|
||||
id,
|
||||
{ name: n.name },
|
||||
]),
|
||||
),
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="flex shrink-0 flex-col gap-1.5">
|
||||
<button
|
||||
type="button"
|
||||
data-testid="chain-generate"
|
||||
onClick={onGenerate}
|
||||
className="rounded-md bg-primary px-2.5 py-1.5 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90"
|
||||
>
|
||||
Generate problem set
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
data-testid="chain-clear"
|
||||
onClick={onClear}
|
||||
className="rounded-md px-2.5 py-1 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Column headers + the chain rows (scrollable). */}
|
||||
<div className="min-h-0 flex-1 overflow-y-auto px-4 pb-4">
|
||||
<div
|
||||
className={`grid ${ROW_COLS} gap-2 px-1 pb-1 text-[11px] uppercase tracking-widest text-muted-foreground/70`}
|
||||
>
|
||||
<span />
|
||||
<span>Chain</span>
|
||||
<span className="truncate">Born in</span>
|
||||
<span>Created</span>
|
||||
</div>
|
||||
{visibleChains.length === 0 && (
|
||||
<div
|
||||
data-testid="chain-table-nomatch"
|
||||
className="px-1 pt-2 text-xs text-muted-foreground"
|
||||
>
|
||||
No matching chains.
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-col gap-1">
|
||||
{visibleChains.map((chain, index) => {
|
||||
const memberIds = [...chain.premises, chain.conclusion];
|
||||
const selectedCount = memberIds.filter((id) =>
|
||||
selection.has(id),
|
||||
).length;
|
||||
const conclusion = byId.get(chain.conclusion);
|
||||
return (
|
||||
<Collapsible key={chain.id} defaultOpen={index === 0}>
|
||||
<CollapsibleTrigger
|
||||
data-testid={`chain-row-${chain.id}`}
|
||||
className={`grid ${ROW_COLS} w-full items-center gap-2 rounded-lg px-1 py-1.5 text-left text-sm transition-colors hover:bg-accent`}
|
||||
>
|
||||
<RowCheckbox
|
||||
checked={
|
||||
selectedCount === memberIds.length && memberIds.length > 0
|
||||
}
|
||||
indeterminate={
|
||||
selectedCount > 0 && selectedCount < memberIds.length
|
||||
}
|
||||
onToggle={(next) => onToggleChain(memberIds, next)}
|
||||
testid={`chain-checkbox-${chain.id}`}
|
||||
label={`Select chain ${nameOf(chain.conclusion)}`}
|
||||
/>
|
||||
<span className="min-w-0 truncate">
|
||||
{formatChainLine(
|
||||
chain,
|
||||
Object.fromEntries(
|
||||
[...byId.entries()].map(([id, n]) => [
|
||||
id,
|
||||
{ name: n.name },
|
||||
]),
|
||||
),
|
||||
)}
|
||||
</span>
|
||||
<span
|
||||
className="truncate text-xs text-muted-foreground"
|
||||
data-testid={`chain-birth-${chain.id}`}
|
||||
>
|
||||
{chainBirthLabels(chain, byId, sessions, fileSources)
|
||||
.map((label) =>
|
||||
label === "unlabeled" ? "unlabeled" : label,
|
||||
)
|
||||
.join(" · ")}
|
||||
</span>
|
||||
<span
|
||||
className="truncate text-xs tabular-nums text-muted-foreground"
|
||||
data-testid={`chain-date-${chain.id}`}
|
||||
>
|
||||
{conclusion ? conclusion.createdAt.slice(0, 10) : ""}
|
||||
</span>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<div className="flex flex-col gap-0.5 py-0.5">
|
||||
{memberIds.map((id) => {
|
||||
const node = byId.get(id);
|
||||
if (!node) return null;
|
||||
const isConclusion = id === chain.conclusion;
|
||||
return (
|
||||
<Collapsible key={id}>
|
||||
<CollapsibleTrigger
|
||||
data-testid={`prop-row-${id}`}
|
||||
className={`grid ${ROW_COLS} w-full items-center gap-2 rounded-md px-1 py-1 text-left text-xs transition-colors hover:bg-accent`}
|
||||
>
|
||||
<span className="pl-3">
|
||||
<RowCheckbox
|
||||
checked={selection.has(id)}
|
||||
onToggle={(next) => onToggleNode(id, next)}
|
||||
testid={`prop-checkbox-${id}`}
|
||||
label={`Select proposition ${node.name}`}
|
||||
/>
|
||||
</span>
|
||||
<span className="min-w-0 truncate pl-6 text-muted-foreground">
|
||||
{isConclusion && (
|
||||
<span className="mr-1 text-foreground/70">
|
||||
→
|
||||
</span>
|
||||
)}
|
||||
{node.name}
|
||||
</span>
|
||||
<span />
|
||||
<span />
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<div
|
||||
data-testid={`prop-statement-${id}`}
|
||||
className="ml-[calc(1.5rem+1rem+1.25rem)] rounded-md bg-muted/40 px-3 py-1.5 text-xs leading-relaxed text-muted-foreground"
|
||||
>
|
||||
{node.statement}
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** The graph view's overlay wrapper: owns query + selection + the custom
|
||||
* practice dialog; mounts ABSOLUTE INSIDE the graph area (the
|
||||
* session-overlay idiom — never a body portal). Read-only toward the
|
||||
* graph — selection lives in component state only. */
|
||||
export function ChainTableOverlay({
|
||||
open,
|
||||
nodes,
|
||||
edges,
|
||||
sessions,
|
||||
fileSources,
|
||||
onClose,
|
||||
}: {
|
||||
open: boolean;
|
||||
nodes: GraphNode[];
|
||||
edges: GraphEdge[];
|
||||
sessions: Record<string, string>;
|
||||
fileSources: Record<string, string>;
|
||||
onClose: () => void;
|
||||
}) {
|
||||
const [query, setQuery] = useState("");
|
||||
const [selection, setSelection] = useState<ReadonlySet<string>>(
|
||||
() => new Set(),
|
||||
);
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
|
||||
// Esc dismisses (unless the practice dialog has focus — its own Esc
|
||||
// owns that layer; both listen on window, so the guard is explicit).
|
||||
useEffect(() => {
|
||||
if (!open || dialogOpen) return;
|
||||
const onKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") onClose();
|
||||
};
|
||||
window.addEventListener("keydown", onKeyDown);
|
||||
return () => window.removeEventListener("keydown", onKeyDown);
|
||||
}, [open, dialogOpen, onClose]);
|
||||
|
||||
if (!open) return null;
|
||||
|
||||
const byId = new Map(nodes.map((n) => [n.id, n]));
|
||||
const selectedNodes = [...selection]
|
||||
.map((id) => byId.get(id))
|
||||
.filter((n): n is GraphNode => n !== undefined);
|
||||
const derived = chainsForSelection(selectedNodes, edges);
|
||||
const nodeIds = [...selection].sort();
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
data-testid="chain-table-overlay"
|
||||
className="absolute inset-0 z-40 flex items-center justify-center bg-background/80 p-4 backdrop-blur-sm"
|
||||
onClick={onClose}
|
||||
>
|
||||
<div
|
||||
className="flex h-full w-full max-w-4xl flex-col overflow-hidden rounded-xl border bg-card shadow-xl"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<ChainTableBody
|
||||
nodes={nodes}
|
||||
edges={edges}
|
||||
sessions={sessions}
|
||||
fileSources={fileSources}
|
||||
query={query}
|
||||
onQuery={setQuery}
|
||||
selection={selection}
|
||||
onToggleNode={(id, next) =>
|
||||
setSelection((prev) => {
|
||||
const s = new Set(prev);
|
||||
if (next) s.add(id);
|
||||
else s.delete(id);
|
||||
return s;
|
||||
})
|
||||
}
|
||||
onToggleChain={(ids, next) =>
|
||||
setSelection((prev) => {
|
||||
const s = new Set(prev);
|
||||
for (const id of ids) {
|
||||
if (next) s.add(id);
|
||||
else s.delete(id);
|
||||
}
|
||||
return s;
|
||||
})
|
||||
}
|
||||
onClear={() => setSelection(new Set())}
|
||||
onGenerate={() => setDialogOpen(true)}
|
||||
onClose={onClose}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{dialogOpen && (
|
||||
<PracticeDialog
|
||||
mode="custom"
|
||||
selection={{
|
||||
nodeIds,
|
||||
propositions: selectedNodes.length,
|
||||
chains: derived.length,
|
||||
}}
|
||||
onClose={() => setDialogOpen(false)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -66,13 +66,14 @@
|
||||
|
||||
import { useCallback, useDeferredValue, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { FileTextIcon, Loader2Icon, SearchIcon, SettingsIcon, UploadIcon, WaypointsIcon } from "lucide-react";
|
||||
import { FileTextIcon, ListTreeIcon, Loader2Icon, SearchIcon, SettingsIcon, UploadIcon, WaypointsIcon } from "lucide-react";
|
||||
import { incrementalLayout, type GraphCostSummary, type GraphNode, type GraphSnapshot } from "@/src/core";
|
||||
import { GraphCanvasRenderer, type GraphRenderSettings } from "./graph-canvas.ts";
|
||||
import { usePopoverDismiss } from "@/components/popover-dismiss";
|
||||
import { useActivity } from "@/components/activity-dock";
|
||||
import { MenuShell } from "@/components/menu-shell.tsx";
|
||||
import { DeleteNodeDialog } from "@/components/delete-node-dialog.tsx";
|
||||
import { ChainTableOverlay } from "@/components/chain-table.tsx";
|
||||
import { Hint } from "@/components/ui/hint";
|
||||
import {
|
||||
ARROW_LENGTH_LADDER,
|
||||
@@ -860,6 +861,7 @@ export function GraphChromeRow({
|
||||
onImportFiles,
|
||||
settings,
|
||||
changeSettings,
|
||||
onOpenChains,
|
||||
}: {
|
||||
isEmpty: boolean;
|
||||
query: string;
|
||||
@@ -873,6 +875,9 @@ export function GraphChromeRow({
|
||||
onImportFiles: (files: FileList | null) => void;
|
||||
settings: GraphRenderSettings;
|
||||
changeSettings: (update: (cur: RenderSettings) => RenderSettings) => void;
|
||||
/** Opens the chain table overlay (the chains-overlay plan,
|
||||
* 2026-09-29). */
|
||||
onOpenChains: () => void;
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
@@ -902,6 +907,24 @@ export function GraphChromeRow({
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{/* The chain table (chains overlay, owner plan 2026-09-29) — the
|
||||
graph's free-form practice entry. Own container (36px band),
|
||||
between the search and Import. */}
|
||||
{!isEmpty && (
|
||||
<div className="graph-chrome-fade-in shrink-0 rounded-xl border bg-card/85 px-1 py-[3px] shadow-lg backdrop-blur">
|
||||
<Hint label="Every reasoning chain, selectable for practice" side="bottom">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onOpenChains}
|
||||
data-testid="open-chain-table"
|
||||
className="flex h-7 items-center gap-1.5 rounded-lg px-2.5 text-xs text-muted-foreground transition-colors hover:bg-accent"
|
||||
>
|
||||
<ListTreeIcon className="size-3" />
|
||||
Chains
|
||||
</button>
|
||||
</Hint>
|
||||
</div>
|
||||
)}
|
||||
{/* Import notes — its own container (36px, header band); ALWAYS
|
||||
rendered (the empty-graph ruling above — the entry point). */}
|
||||
<div className="shrink-0 rounded-xl border bg-card/85 px-1 py-[3px] shadow-lg backdrop-blur">
|
||||
@@ -1050,6 +1073,9 @@ export function GraphView() {
|
||||
// Fetch the derived graph. Re-runs when a background pipeline run
|
||||
// finishes (refreshTick) — its merges just landed in the ledger.
|
||||
const [refreshTick, setRefreshTick] = useState(0);
|
||||
// The chain table overlay (chains-overlay plan, 2026-09-29) —
|
||||
// component-local: a browsing surface, not graph state.
|
||||
const [chainsOpen, setChainsOpen] = useState(false);
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
fetch("/api/graph")
|
||||
@@ -1529,6 +1555,20 @@ export function GraphView() {
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* The chain table overlay (chains-overlay plan, 2026-09-29):
|
||||
ABSOLUTE INSIDE the graph area (the session-overlay idiom —
|
||||
never a body portal) so the app chrome stays sharp and
|
||||
reachable; the overlay itself is read-only toward the graph
|
||||
and owns its selection + the custom practice dialog. */}
|
||||
<ChainTableOverlay
|
||||
open={chainsOpen && !isEmpty}
|
||||
nodes={snapshot?.nodes ?? []}
|
||||
edges={snapshot?.edges ?? []}
|
||||
sessions={snapshot?.sessions ?? {}}
|
||||
fileSources={snapshot?.fileSources ?? {}}
|
||||
onClose={() => setChainsOpen(false)}
|
||||
/>
|
||||
|
||||
{/* Legend + filters: search box and per-state toggle rows. */}
|
||||
{/* Top-right controls — separate floating containers (owner,
|
||||
graph-view round 2). Row order (2026-09-17): search,
|
||||
@@ -1576,6 +1616,7 @@ export function GraphView() {
|
||||
onImportFiles={onImportFiles}
|
||||
settings={settings}
|
||||
changeSettings={changeSettings}
|
||||
onOpenChains={() => setChainsOpen(true)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
+404
-334
@@ -33,364 +33,434 @@ import type { GraphClusterGroup, PracticeParams } from "@/src/core";
|
||||
/** The creation defaults (owner, 2026-09-29): rung 2 Direct exercise,
|
||||
* cue 1 Adjacent context, Theory. */
|
||||
export const DEFAULT_PRACTICE_PARAMS: PracticeParams = {
|
||||
ladderRung: 2,
|
||||
cueDistance: 1,
|
||||
presentation: "theory",
|
||||
ladderRung: 2,
|
||||
cueDistance: 1,
|
||||
presentation: "theory",
|
||||
};
|
||||
|
||||
/** The two creation modes (chains overlay, owner plan 2026-09-29):
|
||||
* "cluster" — the /practice page's picker (stays cluster-ONLY, owner
|
||||
* ruling 2026-09-29); "custom" — the graph view's chain table hands in
|
||||
* a free-form node selection; no picker, a selection summary instead. */
|
||||
export type PracticeDialogMode = "cluster" | "custom";
|
||||
|
||||
/** The custom mode's handoff: the flat node-id selection + the derived
|
||||
* shape (chainsForSelection over the selection — the overlay computes
|
||||
* it for its pinned preview and passes the same numbers here). */
|
||||
export interface PracticeSelection {
|
||||
nodeIds: string[];
|
||||
propositions: number;
|
||||
chains: number;
|
||||
}
|
||||
|
||||
export interface PracticeFailure {
|
||||
status: number;
|
||||
error: string;
|
||||
code?: string;
|
||||
status: number;
|
||||
error: string;
|
||||
code?: string;
|
||||
}
|
||||
|
||||
/** The dialog's pure body — exported for SSR pins (the delete-session /
|
||||
* settings body pattern). The wrapper owns state + fetch + portal. */
|
||||
export function PracticeDialogBody({
|
||||
params,
|
||||
onParam,
|
||||
note,
|
||||
onNote,
|
||||
clusters,
|
||||
selectedKey,
|
||||
onSelect,
|
||||
busy,
|
||||
failure,
|
||||
onOpenSettings,
|
||||
onClose,
|
||||
onRun,
|
||||
mode = "cluster",
|
||||
params,
|
||||
onParam,
|
||||
note,
|
||||
onNote,
|
||||
clusters,
|
||||
selectedKey,
|
||||
onSelect,
|
||||
selection,
|
||||
busy,
|
||||
failure,
|
||||
onOpenSettings,
|
||||
onClose,
|
||||
onRun,
|
||||
}: {
|
||||
params: PracticeParams;
|
||||
onParam: (patch: Partial<PracticeParams>) => void;
|
||||
/** The learner's free-form note (owner, 2026-09-29) — optional,
|
||||
* typing-only; carried to the partitioner + generators as additional
|
||||
* input they weigh but need not follow. */
|
||||
note: string;
|
||||
onNote: (note: string) => void;
|
||||
clusters: GraphClusterGroup[];
|
||||
selectedKey: string | null;
|
||||
onSelect: (key: string) => void;
|
||||
busy: boolean;
|
||||
failure: PracticeFailure | null;
|
||||
onOpenSettings: () => void;
|
||||
onClose: () => void;
|
||||
onRun: () => void;
|
||||
mode?: PracticeDialogMode;
|
||||
params: PracticeParams;
|
||||
onParam: (patch: Partial<PracticeParams>) => void;
|
||||
/** The learner's free-form note (owner, 2026-09-29) — optional,
|
||||
* typing-only; carried to the partitioner + generators as additional
|
||||
* input they weigh but need not follow. */
|
||||
note: string;
|
||||
onNote: (note: string) => void;
|
||||
clusters: GraphClusterGroup[];
|
||||
selectedKey: string | null;
|
||||
onSelect: (key: string) => void;
|
||||
/** The custom mode's handoff (chain-table selections). */
|
||||
selection?: PracticeSelection;
|
||||
busy: boolean;
|
||||
failure: PracticeFailure | null;
|
||||
onOpenSettings: () => void;
|
||||
onClose: () => void;
|
||||
onRun: () => void;
|
||||
}) {
|
||||
const canRun = !busy && selectedKey !== null;
|
||||
return (
|
||||
<div
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="New problem set"
|
||||
data-testid="practice-dialog"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="flex max-h-[85vh] w-[32rem] max-w-[calc(100vw-2rem)] flex-col rounded-xl border bg-card p-5 shadow-xl"
|
||||
>
|
||||
<h2 className="font-title text-2xl tracking-tight">New problem set</h2>
|
||||
const canRun = !busy && (mode === "custom" ? (selection?.nodeIds.length ?? 0) > 0 : selectedKey !== null);
|
||||
return (
|
||||
<div
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="New problem set"
|
||||
data-testid="practice-dialog"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="flex max-h-[85vh] w-[32rem] max-w-[calc(100vw-2rem)] flex-col rounded-xl border bg-card p-5 shadow-xl"
|
||||
>
|
||||
<h2 className="font-title text-2xl tracking-tight">New problem set</h2>
|
||||
|
||||
{/* The cluster: a birth-session group of the graph, resolved to
|
||||
node ids on create (graph-domain, owner 2026-09-29). */}
|
||||
<div className="mt-4 flex flex-col gap-1">
|
||||
<span className="text-xs uppercase tracking-widest text-muted-foreground/70">
|
||||
Cluster
|
||||
</span>
|
||||
<div
|
||||
className="max-h-40 overflow-y-auto rounded-lg border"
|
||||
data-testid="practice-dialog-clusters"
|
||||
>
|
||||
{clusters.map((cluster) => (
|
||||
<button
|
||||
type="button"
|
||||
key={cluster.key}
|
||||
data-testid={`practice-cluster-${cluster.key}`}
|
||||
onClick={() => onSelect(cluster.key)}
|
||||
className={`flex w-full items-center justify-between gap-3 px-3 py-2 text-left text-sm transition-colors hover:bg-accent ${
|
||||
selectedKey === cluster.key ? "bg-accent" : ""
|
||||
}`}
|
||||
>
|
||||
<span className="min-w-0 truncate">
|
||||
{cluster.label ?? (
|
||||
<span className="text-muted-foreground/60">
|
||||
unlabeled cluster
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
<span className="shrink-0 text-xs tabular-nums text-muted-foreground">
|
||||
{cluster.kind === "notes" ? "notes · " : ""}
|
||||
{cluster.nodeCount} propositions
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
{clusters.length === 0 && (
|
||||
<div className="px-3 py-2 text-sm text-muted-foreground">
|
||||
No clusters yet — a cluster appears once a session births its
|
||||
first proposition.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{/* The cluster picker — CLUSTER mode only (custom mode replaces
|
||||
it with the selection summary below): a birth-session group of
|
||||
the graph, resolved to node ids on create (graph-domain, owner
|
||||
2026-09-29). */}
|
||||
{mode === "cluster" && (
|
||||
<div className="mt-4 flex flex-col gap-1">
|
||||
<span className="text-xs uppercase tracking-widest text-muted-foreground/70">
|
||||
Cluster
|
||||
</span>
|
||||
<div
|
||||
className="max-h-40 overflow-y-auto rounded-lg border"
|
||||
data-testid="practice-dialog-clusters"
|
||||
>
|
||||
{clusters.map((cluster) => (
|
||||
<button
|
||||
type="button"
|
||||
key={cluster.key}
|
||||
data-testid={`practice-cluster-${cluster.key}`}
|
||||
onClick={() => onSelect(cluster.key)}
|
||||
className={`flex w-full items-center justify-between gap-3 px-3 py-2 text-left text-sm transition-colors hover:bg-accent ${
|
||||
selectedKey === cluster.key ? "bg-accent" : ""
|
||||
}`}
|
||||
>
|
||||
<span className="min-w-0 truncate">
|
||||
{cluster.label ?? (
|
||||
<span className="text-muted-foreground/60">
|
||||
unlabeled cluster
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
<span className="shrink-0 text-xs tabular-nums text-muted-foreground">
|
||||
{cluster.kind === "notes" ? "notes · " : ""}
|
||||
{cluster.nodeCount} propositions
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
{clusters.length === 0 && (
|
||||
<div className="px-3 py-2 text-sm text-muted-foreground">
|
||||
No clusters yet — a cluster appears once a session births its
|
||||
first proposition.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* The three parameters — named levels, never a number to
|
||||
{/* CUSTOM mode: no picker — the chain table already chose. The
|
||||
dated default title (the pipeline's own `Practice — date`,
|
||||
stamped server-side when no title is posted) + the derived
|
||||
shape of the handoff. */}
|
||||
{mode === "custom" && (
|
||||
<div className="mt-4 flex flex-col gap-1" data-testid="practice-dialog-selection">
|
||||
<span className="text-xs uppercase tracking-widest text-muted-foreground/70">
|
||||
Selection
|
||||
</span>
|
||||
<div className="rounded-lg border bg-accent/30 px-3 py-2 text-sm">
|
||||
<div className="text-muted-foreground">Practice — {new Date().toISOString().slice(0, 10)}</div>
|
||||
<div data-testid="practice-dialog-selection-line">
|
||||
{selection?.propositions ?? 0} {selection?.propositions === 1 ? "proposition" : "propositions"} →{" "}
|
||||
{selection?.chains ?? 0} {selection?.chains === 1 ? "chain" : "chains"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* The three parameters — named levels, never a number to
|
||||
interpolate (owner, 2026-09-29). Stepped sliders snap to the
|
||||
detents; each shows the level's NAME + its one-line
|
||||
definition; presentation is a two-segment toggle. */}
|
||||
<div className="mt-4 flex flex-col gap-3">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="flex items-center justify-between text-[11px] text-muted-foreground">
|
||||
Ladder
|
||||
<span className="text-muted-foreground/80">0 · 1 · 2 · 3 · 4</span>
|
||||
</span>
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max={4}
|
||||
step={1}
|
||||
value={params.ladderRung}
|
||||
data-testid="param-ladder"
|
||||
onChange={(e) =>
|
||||
onParam({
|
||||
ladderRung: Number(
|
||||
e.target.value,
|
||||
) as PracticeParams["ladderRung"],
|
||||
})
|
||||
}
|
||||
className="h-1.5 w-full accent-primary"
|
||||
/>
|
||||
<span data-testid="param-ladder-level" className="text-xs">
|
||||
<span className="font-medium">
|
||||
{LADDER_RUNGS[params.ladderRung].name}
|
||||
</span>
|
||||
<span className="text-muted-foreground">
|
||||
{" "}
|
||||
— {LADDER_RUNGS[params.ladderRung].definition}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="flex items-center justify-between text-[11px] text-muted-foreground">
|
||||
Cue distance
|
||||
<span className="text-muted-foreground/80">0 · 1 · 2</span>
|
||||
</span>
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max={2}
|
||||
step={1}
|
||||
value={params.cueDistance}
|
||||
data-testid="param-cue"
|
||||
onChange={(e) =>
|
||||
onParam({
|
||||
cueDistance: Number(
|
||||
e.target.value,
|
||||
) as PracticeParams["cueDistance"],
|
||||
})
|
||||
}
|
||||
className="h-1.5 w-full accent-primary"
|
||||
/>
|
||||
<span data-testid="param-cue-level" className="text-xs">
|
||||
<span className="font-medium">
|
||||
{CUE_LEVELS[params.cueDistance].name}
|
||||
</span>
|
||||
<span className="text-muted-foreground">
|
||||
{" "}
|
||||
— {CUE_LEVELS[params.cueDistance].definition}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-[11px] text-muted-foreground">
|
||||
Presentation
|
||||
</span>
|
||||
<div className="flex gap-1" data-testid="param-presentation">
|
||||
{(["theory", "application"] as const).map((pres) => (
|
||||
<button
|
||||
type="button"
|
||||
key={pres}
|
||||
data-testid={`param-presentation-${pres}`}
|
||||
onClick={() => onParam({ presentation: pres })}
|
||||
className={`flex-1 rounded-md border px-3 py-1.5 text-xs transition-colors ${
|
||||
params.presentation === pres
|
||||
? "border-primary bg-primary/10 font-medium text-foreground"
|
||||
: "text-muted-foreground hover:bg-accent"
|
||||
}`}
|
||||
>
|
||||
{PRESENTATIONS[pres].name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<span
|
||||
data-testid="param-presentation-level"
|
||||
className="text-xs text-muted-foreground"
|
||||
>
|
||||
{PRESENTATIONS[params.presentation].definition}
|
||||
</span>
|
||||
</div>
|
||||
{/* The learner's free-form note — the last word before create:
|
||||
<div className="mt-4 flex flex-col gap-3">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="flex items-center justify-between text-[11px] text-muted-foreground">
|
||||
Ladder
|
||||
<span className="text-muted-foreground/80">0 · 1 · 2 · 3 · 4</span>
|
||||
</span>
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max={4}
|
||||
step={1}
|
||||
value={params.ladderRung}
|
||||
data-testid="param-ladder"
|
||||
onChange={(e) =>
|
||||
onParam({
|
||||
ladderRung: Number(
|
||||
e.target.value,
|
||||
) as PracticeParams["ladderRung"],
|
||||
})
|
||||
}
|
||||
className="h-1.5 w-full accent-primary"
|
||||
/>
|
||||
<span data-testid="param-ladder-level" className="text-xs">
|
||||
<span className="font-medium">
|
||||
{LADDER_RUNGS[params.ladderRung].name}
|
||||
</span>
|
||||
<span className="text-muted-foreground">
|
||||
{" "}
|
||||
— {LADDER_RUNGS[params.ladderRung].definition}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="flex items-center justify-between text-[11px] text-muted-foreground">
|
||||
Cue distance
|
||||
<span className="text-muted-foreground/80">0 · 1 · 2</span>
|
||||
</span>
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max={2}
|
||||
step={1}
|
||||
value={params.cueDistance}
|
||||
data-testid="param-cue"
|
||||
onChange={(e) =>
|
||||
onParam({
|
||||
cueDistance: Number(
|
||||
e.target.value,
|
||||
) as PracticeParams["cueDistance"],
|
||||
})
|
||||
}
|
||||
className="h-1.5 w-full accent-primary"
|
||||
/>
|
||||
<span data-testid="param-cue-level" className="text-xs">
|
||||
<span className="font-medium">
|
||||
{CUE_LEVELS[params.cueDistance].name}
|
||||
</span>
|
||||
<span className="text-muted-foreground">
|
||||
{" "}
|
||||
— {CUE_LEVELS[params.cueDistance].definition}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-[11px] text-muted-foreground">
|
||||
Presentation
|
||||
</span>
|
||||
<div className="flex gap-1" data-testid="param-presentation">
|
||||
{(["theory", "application"] as const).map((pres) => (
|
||||
<button
|
||||
type="button"
|
||||
key={pres}
|
||||
data-testid={`param-presentation-${pres}`}
|
||||
onClick={() => onParam({ presentation: pres })}
|
||||
className={`flex-1 rounded-md border px-3 py-1.5 text-xs transition-colors ${
|
||||
params.presentation === pres
|
||||
? "border-primary bg-primary/10 font-medium text-foreground"
|
||||
: "text-muted-foreground hover:bg-accent"
|
||||
}`}
|
||||
>
|
||||
{PRESENTATIONS[pres].name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<span
|
||||
data-testid="param-presentation-level"
|
||||
className="text-xs text-muted-foreground"
|
||||
>
|
||||
{PRESENTATIONS[params.presentation].definition}
|
||||
</span>
|
||||
</div>
|
||||
{/* The learner's free-form note — the last word before create:
|
||||
wishes for the problems, weighed by the agents, nothing owed. */}
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-[11px] text-muted-foreground">
|
||||
Anything else? (optional)
|
||||
</span>
|
||||
<textarea
|
||||
value={note}
|
||||
data-testid="practice-note"
|
||||
onChange={(e) => onNote(e.target.value)}
|
||||
rows={3}
|
||||
maxLength={2000}
|
||||
placeholder="Anything you want the problems to lean toward — situations, emphasis, context about you. The agents weigh it; nothing is promised."
|
||||
className="w-full resize-y rounded-lg border bg-background px-3 py-2 text-sm outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-[11px] text-muted-foreground">
|
||||
Anything else? (optional)
|
||||
</span>
|
||||
<textarea
|
||||
value={note}
|
||||
data-testid="practice-note"
|
||||
onChange={(e) => onNote(e.target.value)}
|
||||
rows={3}
|
||||
maxLength={2000}
|
||||
placeholder="Anything you want the problems to lean toward — situations, emphasis, context about you. The agents weigh it; nothing is promised."
|
||||
className="w-full resize-y rounded-lg border bg-background px-3 py-2 text-sm outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{failure && (
|
||||
<div
|
||||
data-testid="practice-dialog-error"
|
||||
className="mt-3 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive"
|
||||
>
|
||||
{failure.code === "empty_selection"
|
||||
? "Nothing practicable is left in that cluster — the graph changed."
|
||||
: failure.error}
|
||||
{failure.status === 503 && (
|
||||
<button
|
||||
type="button"
|
||||
data-testid="practice-dialog-open-settings"
|
||||
onClick={onOpenSettings}
|
||||
className="ml-2 underline underline-offset-2"
|
||||
>
|
||||
Open settings
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{failure && (
|
||||
<div
|
||||
data-testid="practice-dialog-error"
|
||||
className="mt-3 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive"
|
||||
>
|
||||
{failure.code === "empty_selection"
|
||||
? "Nothing practicable is left in that cluster — the graph changed."
|
||||
: failure.error}
|
||||
{failure.status === 503 && (
|
||||
<button
|
||||
type="button"
|
||||
data-testid="practice-dialog-open-settings"
|
||||
onClick={onOpenSettings}
|
||||
className="ml-2 underline underline-offset-2"
|
||||
>
|
||||
Open settings
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-5 flex justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
disabled={busy}
|
||||
className="rounded-md px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
data-testid="practice-dialog-create"
|
||||
onClick={onRun}
|
||||
disabled={!canRun}
|
||||
className="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-40"
|
||||
>
|
||||
{busy ? "Creating…" : "Create"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
<div className="mt-5 flex justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
disabled={busy}
|
||||
className="rounded-md px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
data-testid="practice-dialog-create"
|
||||
onClick={onRun}
|
||||
disabled={!canRun}
|
||||
className="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-40"
|
||||
>
|
||||
{busy ? "Creating…" : "Create"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** The stateful wrapper: fetches the cluster list, runs the create POST
|
||||
* (nodeIds + the cluster's label as title + params), navigates on 202. */
|
||||
export function PracticeDialog({ onClose }: { onClose: () => void }) {
|
||||
const router = useRouter();
|
||||
const { open: openSettings } = useSettingsDialog();
|
||||
const [params, setParams] = useState<PracticeParams>({
|
||||
...DEFAULT_PRACTICE_PARAMS,
|
||||
});
|
||||
const [note, setNote] = useState("");
|
||||
const [clusters, setClusters] = useState<GraphClusterGroup[] | null>(null);
|
||||
const [selectedKey, setSelectedKey] = useState<string | null>(null);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [failure, setFailure] = useState<PracticeFailure | null>(null);
|
||||
export function PracticeDialog({
|
||||
mode = "cluster",
|
||||
selection,
|
||||
onClose,
|
||||
}: {
|
||||
mode?: PracticeDialogMode;
|
||||
selection?: PracticeSelection;
|
||||
onClose: () => void;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const { open: openSettings } = useSettingsDialog();
|
||||
const [params, setParams] = useState<PracticeParams>({
|
||||
...DEFAULT_PRACTICE_PARAMS,
|
||||
});
|
||||
const [note, setNote] = useState("");
|
||||
const [clusters, setClusters] = useState<GraphClusterGroup[] | null>(null);
|
||||
const [selectedKey, setSelectedKey] = useState<string | null>(null);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [failure, setFailure] = useState<PracticeFailure | null>(null);
|
||||
|
||||
// The picker's truth is the graph's clustering (fresh on open).
|
||||
useEffect(() => {
|
||||
let alive = true;
|
||||
fetch("/api/graph/clusters", { cache: "no-store" })
|
||||
.then((res) => res.json() as Promise<{ clusters: GraphClusterGroup[] }>)
|
||||
.then((d) => {
|
||||
if (alive) setClusters(d.clusters);
|
||||
})
|
||||
.catch(() => {
|
||||
if (alive) setClusters([]);
|
||||
});
|
||||
return () => {
|
||||
alive = false;
|
||||
};
|
||||
}, []);
|
||||
// The picker's truth is the graph's clustering (fresh on open).
|
||||
// The picker's truth is the graph's clustering (fresh on open) —
|
||||
// cluster mode only; custom mode arrives with its selection in hand.
|
||||
useEffect(() => {
|
||||
if (mode !== "cluster") return;
|
||||
let alive = true;
|
||||
fetch("/api/graph/clusters", { cache: "no-store" })
|
||||
.then((res) => res.json() as Promise<{ clusters: GraphClusterGroup[] }>)
|
||||
.then((d) => {
|
||||
if (alive) setClusters(d.clusters);
|
||||
})
|
||||
.catch(() => {
|
||||
if (alive) setClusters([]);
|
||||
});
|
||||
return () => {
|
||||
alive = false;
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Esc closes (claimed, the delete-session discipline).
|
||||
useEffect(() => {
|
||||
const onKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") {
|
||||
e.stopPropagation();
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
window.addEventListener("keydown", onKeyDown);
|
||||
return () => window.removeEventListener("keydown", onKeyDown);
|
||||
}, [onClose]);
|
||||
// Esc closes (claimed, the delete-session discipline).
|
||||
useEffect(() => {
|
||||
const onKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") {
|
||||
e.stopPropagation();
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
window.addEventListener("keydown", onKeyDown);
|
||||
return () => window.removeEventListener("keydown", onKeyDown);
|
||||
}, [onClose]);
|
||||
|
||||
const run = useCallback(async () => {
|
||||
const picked = (clusters ?? []).find((c) => c.key === selectedKey);
|
||||
if (!picked || busy) return;
|
||||
setBusy(true);
|
||||
setFailure(null);
|
||||
try {
|
||||
const res = await fetch("/api/practice/sets", {
|
||||
method: "POST",
|
||||
headers: { "content-type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
nodeIds: picked.nodeIds,
|
||||
params,
|
||||
title: picked.label ?? undefined,
|
||||
note: note.trim() || undefined,
|
||||
}),
|
||||
});
|
||||
const body = (await res.json()) as {
|
||||
id?: string;
|
||||
error?: string;
|
||||
code?: string;
|
||||
};
|
||||
if (!res.ok || !body.id) {
|
||||
setFailure({
|
||||
status: res.status,
|
||||
error: body.error ?? `Create failed (${res.status})`,
|
||||
code: body.code,
|
||||
});
|
||||
setBusy(false);
|
||||
return;
|
||||
}
|
||||
router.push(`/practice/${body.id}`);
|
||||
} catch {
|
||||
setFailure({
|
||||
status: 0,
|
||||
error: "Create failed — network error. Try again.",
|
||||
});
|
||||
setBusy(false);
|
||||
}
|
||||
}, [clusters, selectedKey, busy, params, note, router]);
|
||||
const run = useCallback(async () => {
|
||||
if (busy) return;
|
||||
// The POST payload, by mode: custom mode sends the chain table's
|
||||
// nodeIds with NO title (the pipeline stamps its dated default);
|
||||
// cluster mode resolves the group + posts its label as title.
|
||||
let postNodeIds: string[];
|
||||
let postTitle: string | undefined;
|
||||
if (mode === "custom") {
|
||||
if (!selection || selection.nodeIds.length === 0) return;
|
||||
postNodeIds = selection.nodeIds;
|
||||
postTitle = undefined;
|
||||
} else {
|
||||
const picked = (clusters ?? []).find((c) => c.key === selectedKey);
|
||||
if (!picked) return;
|
||||
postNodeIds = picked.nodeIds;
|
||||
postTitle = picked.label ?? undefined;
|
||||
}
|
||||
setBusy(true);
|
||||
setFailure(null);
|
||||
try {
|
||||
const res = await fetch("/api/practice/sets", {
|
||||
method: "POST",
|
||||
headers: { "content-type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
nodeIds: postNodeIds,
|
||||
params,
|
||||
title: postTitle,
|
||||
note: note.trim() || undefined,
|
||||
}),
|
||||
});
|
||||
const body = (await res.json()) as {
|
||||
id?: string;
|
||||
error?: string;
|
||||
code?: string;
|
||||
};
|
||||
if (!res.ok || !body.id) {
|
||||
setFailure({
|
||||
status: res.status,
|
||||
error: body.error ?? `Create failed (${res.status})`,
|
||||
code: body.code,
|
||||
});
|
||||
setBusy(false);
|
||||
return;
|
||||
}
|
||||
router.push(`/practice/${body.id}`);
|
||||
} catch {
|
||||
setFailure({
|
||||
status: 0,
|
||||
error: "Create failed — network error. Try again.",
|
||||
});
|
||||
setBusy(false);
|
||||
}
|
||||
}, [mode, selection, clusters, selectedKey, busy, params, note, router]);
|
||||
|
||||
return createPortal(
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-background/80"
|
||||
onClick={() => {
|
||||
if (!busy) onClose();
|
||||
}}
|
||||
>
|
||||
<PracticeDialogBody
|
||||
params={params}
|
||||
onParam={(patch) => setParams((prev) => ({ ...prev, ...patch }))}
|
||||
note={note}
|
||||
onNote={setNote}
|
||||
clusters={clusters ?? []}
|
||||
selectedKey={selectedKey}
|
||||
onSelect={setSelectedKey}
|
||||
busy={busy}
|
||||
failure={failure}
|
||||
onOpenSettings={() => openSettings()}
|
||||
onClose={onClose}
|
||||
onRun={() => void run()}
|
||||
/>
|
||||
</div>,
|
||||
document.body,
|
||||
);
|
||||
return createPortal(
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-background/80"
|
||||
onClick={() => {
|
||||
if (!busy) onClose();
|
||||
}}
|
||||
>
|
||||
<PracticeDialogBody
|
||||
mode={mode}
|
||||
params={params}
|
||||
selection={selection}
|
||||
onParam={(patch) => setParams((prev) => ({ ...prev, ...patch }))}
|
||||
note={note}
|
||||
onNote={setNote}
|
||||
clusters={clusters ?? []}
|
||||
selectedKey={selectedKey}
|
||||
onSelect={setSelectedKey}
|
||||
busy={busy}
|
||||
failure={failure}
|
||||
onOpenSettings={() => openSettings()}
|
||||
onClose={onClose}
|
||||
onRun={() => void run()}
|
||||
/>
|
||||
</div>,
|
||||
document.body,
|
||||
);
|
||||
}
|
||||
|
||||
+379
-379
@@ -37,402 +37,402 @@ import { SidebarToggle } from "@/components/sidebar";
|
||||
|
||||
/** One answerable problem: textarea + focus-gated dictation bar. */
|
||||
export function ProblemBox({
|
||||
problem,
|
||||
draft,
|
||||
onDraft,
|
||||
problem,
|
||||
draft,
|
||||
onDraft,
|
||||
}: {
|
||||
problem: Pick<Problem, "id">;
|
||||
draft: string;
|
||||
onDraft: (text: string) => void;
|
||||
problem: Pick<Problem, "id">;
|
||||
draft: string;
|
||||
onDraft: (text: string) => void;
|
||||
}) {
|
||||
const [focused, setFocused] = useState(false);
|
||||
// The dictation appends into THIS box only (per-box instance).
|
||||
const dictation = useDictation({
|
||||
append: (text) => onDraft(text),
|
||||
});
|
||||
return (
|
||||
<div
|
||||
className="flex flex-col gap-1.5"
|
||||
data-testid={`problem-box-${problem.id}`}
|
||||
>
|
||||
<textarea
|
||||
data-testid={`answer-${problem.id}`}
|
||||
value={draft}
|
||||
rows={5}
|
||||
placeholder="Think out loud — dictation or typing, both fine."
|
||||
onChange={(e) => onDraft(e.target.value)}
|
||||
onFocus={() => setFocused(true)}
|
||||
onBlur={() => setFocused(false)}
|
||||
className="w-full resize-y rounded-lg border bg-background px-3 py-2 text-sm outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
/>
|
||||
{focused && <DictationBar dictation={dictation} />}
|
||||
</div>
|
||||
);
|
||||
const [focused, setFocused] = useState(false);
|
||||
// The dictation appends into THIS box only (per-box instance).
|
||||
const dictation = useDictation({
|
||||
append: (text) => onDraft(text),
|
||||
});
|
||||
return (
|
||||
<div
|
||||
className="flex flex-col gap-1.5"
|
||||
data-testid={`problem-box-${problem.id}`}
|
||||
>
|
||||
<textarea
|
||||
data-testid={`answer-${problem.id}`}
|
||||
value={draft}
|
||||
rows={5}
|
||||
placeholder="Think out loud — dictation or typing, both fine."
|
||||
onChange={(e) => onDraft(e.target.value)}
|
||||
onFocus={() => setFocused(true)}
|
||||
onBlur={() => setFocused(false)}
|
||||
className="w-full resize-y rounded-lg border bg-background px-3 py-2 text-sm outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
/>
|
||||
{focused && <DictationBar dictation={dictation} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** The exam page's pure body — exported for SSR pins. */
|
||||
export function PracticeExamBody({
|
||||
set,
|
||||
drafts,
|
||||
onDraft,
|
||||
onSubmit,
|
||||
submittingId,
|
||||
submitErrors,
|
||||
liveGradeIds,
|
||||
set,
|
||||
drafts,
|
||||
onDraft,
|
||||
onSubmit,
|
||||
submittingId,
|
||||
submitErrors,
|
||||
liveGradeIds,
|
||||
}: {
|
||||
set: ProblemSet;
|
||||
drafts: Record<string, string>;
|
||||
onDraft: (problemId: string, text: string) => void;
|
||||
/** Per-problem submit (owner 2026-09-29): ONE attempt per problem. */
|
||||
onSubmit: (problemId: string) => void;
|
||||
/** The problem whose submit POST is in flight. */
|
||||
submittingId: string | null;
|
||||
/** Per-problem submit failures, keyed by problem id. */
|
||||
submitErrors: Record<string, string>;
|
||||
/** Problems whose grade rows are LIVE (the poll's activity feed). */
|
||||
liveGradeIds: ReadonlySet<string>;
|
||||
set: ProblemSet;
|
||||
drafts: Record<string, string>;
|
||||
onDraft: (problemId: string, text: string) => void;
|
||||
/** Per-problem submit (owner 2026-09-29): ONE attempt per problem. */
|
||||
onSubmit: (problemId: string) => void;
|
||||
/** The problem whose submit POST is in flight. */
|
||||
submittingId: string | null;
|
||||
/** Per-problem submit failures, keyed by problem id. */
|
||||
submitErrors: Record<string, string>;
|
||||
/** Problems whose grade rows are LIVE (the poll's activity feed). */
|
||||
liveGradeIds: ReadonlySet<string>;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex h-dvh">
|
||||
<div className="flex min-w-0 flex-1 flex-col">
|
||||
{/* The top bar (owner, UI round 2026-09-29): the new-session
|
||||
return (
|
||||
<div className="flex h-dvh">
|
||||
<div className="flex min-w-0 flex-1 flex-col">
|
||||
{/* The top bar (owner, UI round 2026-09-29): the new-session
|
||||
pattern — h-15, lh-drag (the Electron window-drag surface, so
|
||||
the traffic lights never cover content), the sidebar reopen
|
||||
toggle first, the set title truncating beside it. */}
|
||||
<header className="lh-drag flex h-15 items-center gap-3 border-b border-border px-3">
|
||||
<SidebarToggle />
|
||||
<div
|
||||
className="min-w-0 flex-1 truncate font-title text-3xl tracking-tight"
|
||||
data-testid="practice-exam-title"
|
||||
>
|
||||
{set.title}
|
||||
</div>
|
||||
</header>
|
||||
<div className="relative flex min-h-0 flex-1">
|
||||
<div
|
||||
className="h-full min-w-0 flex-1 overflow-y-auto"
|
||||
data-testid="practice-exam-scroll"
|
||||
>
|
||||
<div
|
||||
className="mx-auto flex w-full max-w-3xl flex-col gap-6 p-6"
|
||||
data-testid="practice-exam"
|
||||
>
|
||||
<div className="flex flex-col gap-1">
|
||||
<p
|
||||
className="text-xs text-muted-foreground/80"
|
||||
data-testid="practice-exam-levels"
|
||||
>
|
||||
{LADDER_RUNGS[set.params.ladderRung].name} ·{" "}
|
||||
{CUE_LEVELS[set.params.cueDistance].name} ·{" "}
|
||||
{PRESENTATIONS[set.params.presentation].name}
|
||||
</p>
|
||||
<p
|
||||
className="text-sm text-muted-foreground"
|
||||
data-testid="practice-exam-status"
|
||||
>
|
||||
{set.status === "partitioning" && "Partitioning the chains…"}
|
||||
{set.status === "generating" &&
|
||||
`Generating — ${set.problems.filter((p) => p.status === "ready").length}/${set.problems.length} problems ready`}
|
||||
{set.status === "error" &&
|
||||
(set.error ?? "Something went wrong")}
|
||||
{set.status === "ready" &&
|
||||
(liveGradeIds.size > 0
|
||||
? "Grading your answers…"
|
||||
: `${set.problems.length} problems · ${set.problems.filter((p) => p.grade).length} graded`)}
|
||||
</p>
|
||||
</div>
|
||||
<header className="lh-drag flex h-15 items-center gap-3 border-b border-border px-3">
|
||||
<SidebarToggle />
|
||||
<div
|
||||
className="min-w-0 flex-1 truncate font-title text-3xl tracking-tight"
|
||||
data-testid="practice-exam-title"
|
||||
>
|
||||
{set.title}
|
||||
</div>
|
||||
</header>
|
||||
<div className="relative flex min-h-0 flex-1">
|
||||
<div
|
||||
className="h-full min-w-0 flex-1 overflow-y-auto"
|
||||
data-testid="practice-exam-scroll"
|
||||
>
|
||||
<div
|
||||
className="mx-auto flex w-full max-w-3xl flex-col gap-6 p-6"
|
||||
data-testid="practice-exam"
|
||||
>
|
||||
<div className="flex flex-col gap-1">
|
||||
<p
|
||||
className="text-xs text-muted-foreground/80"
|
||||
data-testid="practice-exam-levels"
|
||||
>
|
||||
{LADDER_RUNGS[set.params.ladderRung].name} ·{" "}
|
||||
{CUE_LEVELS[set.params.cueDistance].name} ·{" "}
|
||||
{PRESENTATIONS[set.params.presentation].name}
|
||||
</p>
|
||||
<p
|
||||
className="text-sm text-muted-foreground"
|
||||
data-testid="practice-exam-status"
|
||||
>
|
||||
{set.status === "partitioning" && "Partitioning the chains…"}
|
||||
{set.status === "generating" &&
|
||||
`Generating — ${set.problems.filter((p) => p.status === "ready").length}/${set.problems.length} problems ready`}
|
||||
{set.status === "error" &&
|
||||
(set.error ?? "Something went wrong")}
|
||||
{set.status === "ready" &&
|
||||
(liveGradeIds.size > 0
|
||||
? "Grading your answers…"
|
||||
: `${set.problems.length} problems · ${set.problems.filter((p) => p.grade).length} graded`)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{set.problems.map((problem, i) => (
|
||||
<section
|
||||
key={problem.id}
|
||||
className="rounded-xl border bg-card p-4"
|
||||
data-testid={`problem-${problem.id}`}
|
||||
>
|
||||
<h2 className="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
Problem {i + 1}
|
||||
</h2>
|
||||
{problem.status === "generating" ? (
|
||||
// The stub: propositions NEVER surface (never-announce law).
|
||||
<div
|
||||
className="flex items-center gap-2 text-sm text-muted-foreground"
|
||||
data-testid={`generating-${problem.id}`}
|
||||
>
|
||||
<BrailleSpinner className="size-4" />
|
||||
Generating problem…
|
||||
</div>
|
||||
) : problem.status === "error" ? (
|
||||
<p
|
||||
className="text-sm text-destructive"
|
||||
data-testid={`problem-error-${problem.id}`}
|
||||
>
|
||||
This problem failed to generate
|
||||
{problem.error ? ` — ${problem.error}` : ""}.
|
||||
</p>
|
||||
) : (
|
||||
<>
|
||||
<div className="lh-prose text-sm">
|
||||
<MessageResponse mode="static">
|
||||
{restoreMathEscapes(problem.statement)}
|
||||
</MessageResponse>
|
||||
</div>
|
||||
{problem.answer === undefined ? (
|
||||
// ANSWERABLE (owner 2026-09-29): the box + its OWN submit
|
||||
// button — one attempt, submitted the moment it's clicked.
|
||||
<div className="flex flex-col items-start gap-2">
|
||||
<div className="w-full">
|
||||
<ProblemBox
|
||||
problem={problem}
|
||||
draft={drafts[problem.id] ?? ""}
|
||||
onDraft={(text) => onDraft(problem.id, text)}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
data-testid={`practice-submit-${problem.id}`}
|
||||
onClick={() => onSubmit(problem.id)}
|
||||
disabled={
|
||||
set.status !== "ready" ||
|
||||
(drafts[problem.id] ?? "").trim() === "" ||
|
||||
submittingId !== null
|
||||
}
|
||||
className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-40"
|
||||
>
|
||||
{submittingId === problem.id
|
||||
? "Submitting…"
|
||||
: "Submit answer"}
|
||||
</button>
|
||||
{submitErrors[problem.id] && (
|
||||
<p
|
||||
data-testid={`practice-submit-error-${problem.id}`}
|
||||
className="text-sm text-destructive"
|
||||
>
|
||||
{submitErrors[problem.id]}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
// SUBMITTED (owner 2026-09-29): the answer locks, the
|
||||
// model solution reveals INSTANTLY, the rubric stays
|
||||
// collapsed, and the grade lands live when it lands.
|
||||
<div className="mt-4 flex flex-col gap-3">
|
||||
<textarea
|
||||
data-testid={`answer-${problem.id}`}
|
||||
value={problem.answer}
|
||||
readOnly
|
||||
rows={5}
|
||||
className="w-full resize-y rounded-lg border bg-muted/40 px-3 py-2 text-sm text-muted-foreground"
|
||||
/>
|
||||
<div
|
||||
className="rounded-lg border bg-background p-3"
|
||||
data-testid={`reveal-${problem.id}`}
|
||||
>
|
||||
{problem.grade ? (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="flex items-baseline gap-2">
|
||||
<span
|
||||
data-testid={`grade-${problem.id}`}
|
||||
className="font-mono text-sm font-medium"
|
||||
>
|
||||
{problem.grade.score}/10
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="lh-prose text-sm"
|
||||
data-testid={`reasoning-${problem.id}`}
|
||||
>
|
||||
<MessageResponse mode="static">
|
||||
{restoreMathEscapes(
|
||||
problem.grade.reasoning,
|
||||
)}
|
||||
</MessageResponse>
|
||||
</div>
|
||||
</div>
|
||||
) : liveGradeIds.has(problem.id) ? (
|
||||
<div
|
||||
className="flex items-center gap-2 text-sm text-muted-foreground"
|
||||
data-testid={`grading-${problem.id}`}
|
||||
>
|
||||
<BrailleSpinner className="size-4" />
|
||||
Grading…
|
||||
</div>
|
||||
) : (
|
||||
<p
|
||||
className="text-sm text-muted-foreground"
|
||||
data-testid={`grade-interrupted-${problem.id}`}
|
||||
>
|
||||
Grade interrupted — the answer stands.
|
||||
</p>
|
||||
)}
|
||||
<div className="mt-3 text-xs uppercase tracking-wide text-muted-foreground">
|
||||
Model solution
|
||||
</div>
|
||||
<div
|
||||
className="lh-prose text-sm"
|
||||
data-testid={`solution-${problem.id}`}
|
||||
>
|
||||
<MessageResponse mode="static">
|
||||
{restoreMathEscapes(problem.solution)}
|
||||
</MessageResponse>
|
||||
</div>
|
||||
<details
|
||||
className="mt-3"
|
||||
data-testid={`rubric-${problem.id}`}
|
||||
>
|
||||
<summary className="cursor-pointer select-none text-xs uppercase tracking-wide text-muted-foreground">
|
||||
Rubric
|
||||
</summary>
|
||||
<div className="mt-2 lh-prose text-sm">
|
||||
<MessageResponse mode="static">
|
||||
{restoreMathEscapes(problem.rubric)}
|
||||
</MessageResponse>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</section>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
{set.problems.map((problem, i) => (
|
||||
<section
|
||||
key={problem.id}
|
||||
className="rounded-xl border bg-card p-4"
|
||||
data-testid={`problem-${problem.id}`}
|
||||
>
|
||||
<h2 className="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
Problem {i + 1}
|
||||
</h2>
|
||||
{problem.status === "generating" ? (
|
||||
// The stub: propositions NEVER surface (never-announce law).
|
||||
<div
|
||||
className="flex items-center gap-2 text-sm text-muted-foreground"
|
||||
data-testid={`generating-${problem.id}`}
|
||||
>
|
||||
<BrailleSpinner className="size-4" />
|
||||
Generating problem…
|
||||
</div>
|
||||
) : problem.status === "error" ? (
|
||||
<p
|
||||
className="text-sm text-destructive"
|
||||
data-testid={`problem-error-${problem.id}`}
|
||||
>
|
||||
This problem failed to generate
|
||||
{problem.error ? ` — ${problem.error}` : ""}.
|
||||
</p>
|
||||
) : (
|
||||
<>
|
||||
<div className="lh-prose text-sm">
|
||||
<MessageResponse mode="static">
|
||||
{restoreMathEscapes(problem.statement)}
|
||||
</MessageResponse>
|
||||
</div>
|
||||
{problem.answer === undefined ? (
|
||||
// ANSWERABLE (owner 2026-09-29): the box + its OWN submit
|
||||
// button — one attempt, submitted the moment it's clicked.
|
||||
<div className="flex flex-col items-start gap-2">
|
||||
<div className="w-full">
|
||||
<ProblemBox
|
||||
problem={problem}
|
||||
draft={drafts[problem.id] ?? ""}
|
||||
onDraft={(text) => onDraft(problem.id, text)}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
data-testid={`practice-submit-${problem.id}`}
|
||||
onClick={() => onSubmit(problem.id)}
|
||||
disabled={
|
||||
set.status !== "ready" ||
|
||||
(drafts[problem.id] ?? "").trim() === "" ||
|
||||
submittingId !== null
|
||||
}
|
||||
className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-40"
|
||||
>
|
||||
{submittingId === problem.id
|
||||
? "Submitting…"
|
||||
: "Submit answer"}
|
||||
</button>
|
||||
{submitErrors[problem.id] && (
|
||||
<p
|
||||
data-testid={`practice-submit-error-${problem.id}`}
|
||||
className="text-sm text-destructive"
|
||||
>
|
||||
{submitErrors[problem.id]}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
// SUBMITTED (owner 2026-09-29): the answer locks, the
|
||||
// model solution reveals INSTANTLY, the rubric stays
|
||||
// collapsed, and the grade lands live when it lands.
|
||||
<div className="mt-4 flex flex-col gap-3">
|
||||
<textarea
|
||||
data-testid={`answer-${problem.id}`}
|
||||
value={problem.answer}
|
||||
readOnly
|
||||
rows={5}
|
||||
className="w-full resize-y rounded-lg border bg-muted/40 px-3 py-2 text-sm text-muted-foreground"
|
||||
/>
|
||||
<div
|
||||
className="rounded-lg border bg-background p-3"
|
||||
data-testid={`reveal-${problem.id}`}
|
||||
>
|
||||
{problem.grade ? (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="flex items-baseline gap-2">
|
||||
<span
|
||||
data-testid={`grade-${problem.id}`}
|
||||
className="font-mono text-sm font-medium"
|
||||
>
|
||||
{problem.grade.score}/10
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="lh-prose text-sm"
|
||||
data-testid={`reasoning-${problem.id}`}
|
||||
>
|
||||
<MessageResponse mode="static">
|
||||
{restoreMathEscapes(
|
||||
problem.grade.reasoning,
|
||||
)}
|
||||
</MessageResponse>
|
||||
</div>
|
||||
</div>
|
||||
) : liveGradeIds.has(problem.id) ? (
|
||||
<div
|
||||
className="flex items-center gap-2 text-sm text-muted-foreground"
|
||||
data-testid={`grading-${problem.id}`}
|
||||
>
|
||||
<BrailleSpinner className="size-4" />
|
||||
Grading…
|
||||
</div>
|
||||
) : (
|
||||
<p
|
||||
className="text-sm text-muted-foreground"
|
||||
data-testid={`grade-interrupted-${problem.id}`}
|
||||
>
|
||||
Grade interrupted — the answer stands.
|
||||
</p>
|
||||
)}
|
||||
<div className="mt-3 text-xs uppercase tracking-wide text-muted-foreground">
|
||||
Model solution
|
||||
</div>
|
||||
<div
|
||||
className="lh-prose text-sm"
|
||||
data-testid={`solution-${problem.id}`}
|
||||
>
|
||||
<MessageResponse mode="static">
|
||||
{restoreMathEscapes(problem.solution)}
|
||||
</MessageResponse>
|
||||
</div>
|
||||
<details
|
||||
className="mt-3"
|
||||
data-testid={`rubric-${problem.id}`}
|
||||
>
|
||||
<summary className="cursor-pointer select-none text-xs uppercase tracking-wide text-muted-foreground">
|
||||
Rubric
|
||||
</summary>
|
||||
<div className="mt-2 lh-prose text-sm">
|
||||
<MessageResponse mode="static">
|
||||
{restoreMathEscapes(problem.rubric)}
|
||||
</MessageResponse>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</section>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function PracticeExam({ initial }: { initial: ProblemSet }) {
|
||||
const [set, setSet] = useState<ProblemSet>(initial);
|
||||
const [drafts, setDrafts] = useState<Record<string, string>>({});
|
||||
const [submittingId, setSubmittingId] = useState<string | null>(null);
|
||||
const [submitErrors, setSubmitErrors] = useState<Record<string, string>>({});
|
||||
// Which problems' grade rows are LIVE (activity feed) — drives the
|
||||
// per-problem "Grading…" spinners and the status line.
|
||||
const [liveGradeIds, setLiveGradeIds] = useState<Set<string>>(new Set());
|
||||
// True from a successful submit until the feed shows no live grade
|
||||
// rows for this set — keeps the poll alive across refetches.
|
||||
const [gradingLive, setGradingLive] = useState(false);
|
||||
const mounted = useRef(true);
|
||||
useEffect(() => {
|
||||
mounted.current = true;
|
||||
return () => {
|
||||
mounted.current = false;
|
||||
};
|
||||
}, []);
|
||||
const [set, setSet] = useState<ProblemSet>(initial);
|
||||
const [drafts, setDrafts] = useState<Record<string, string>>({});
|
||||
const [submittingId, setSubmittingId] = useState<string | null>(null);
|
||||
const [submitErrors, setSubmitErrors] = useState<Record<string, string>>({});
|
||||
// Which problems' grade rows are LIVE (activity feed) — drives the
|
||||
// per-problem "Grading…" spinners and the status line.
|
||||
const [liveGradeIds, setLiveGradeIds] = useState<Set<string>>(new Set());
|
||||
// True from a successful submit until the feed shows no live grade
|
||||
// rows for this set — keeps the poll alive across refetches.
|
||||
const [gradingLive, setGradingLive] = useState(false);
|
||||
const mounted = useRef(true);
|
||||
useEffect(() => {
|
||||
mounted.current = true;
|
||||
return () => {
|
||||
mounted.current = false;
|
||||
};
|
||||
}, []);
|
||||
|
||||
const refetch = useCallback(async () => {
|
||||
try {
|
||||
const res = await fetch(`/api/practice/sets/${initial.id}`, {
|
||||
cache: "no-store",
|
||||
});
|
||||
if (!res.ok) return;
|
||||
const d = (await res.json()) as { set: ProblemSet };
|
||||
if (mounted.current) setSet(d.set);
|
||||
} catch {
|
||||
// transient poll failures keep the last snapshot
|
||||
}
|
||||
}, [initial.id]);
|
||||
const refetch = useCallback(async () => {
|
||||
try {
|
||||
const res = await fetch(`/api/practice/sets/${initial.id}`, {
|
||||
cache: "no-store",
|
||||
});
|
||||
if (!res.ok) return;
|
||||
const d = (await res.json()) as { set: ProblemSet };
|
||||
if (mounted.current) setSet(d.set);
|
||||
} catch {
|
||||
// transient poll failures keep the last snapshot
|
||||
}
|
||||
}, [initial.id]);
|
||||
|
||||
// The poll: while not ready (generation), or while a grading run is
|
||||
// live for this set with outstanding ungraded answers. The activity
|
||||
// feed's practice rows are ROW-KEYED (setId:grade:problemId) — the
|
||||
// live rows name exactly which grades are pending; a dropped grade
|
||||
// (no live row) settles the page instead of polling forever.
|
||||
const pendingGrade = set.problems.some(
|
||||
(p) => p.answer !== undefined && !p.grade,
|
||||
);
|
||||
const needsPoll = set.status !== "ready" || (gradingLive && pendingGrade);
|
||||
useEffect(() => {
|
||||
if (!needsPoll) return;
|
||||
let stopped = false;
|
||||
const tick = async () => {
|
||||
await refetch();
|
||||
try {
|
||||
const res = await fetch("/api/activity", { cache: "no-store" });
|
||||
if (!res.ok) return;
|
||||
const feed = (await res.json()) as {
|
||||
practice?: Array<{ id: string; kind: string }>;
|
||||
};
|
||||
if (!stopped && mounted.current) {
|
||||
const prefix = `${initial.id}:grade:`;
|
||||
const pids = (feed.practice ?? [])
|
||||
.filter((row) => row.id.startsWith(prefix))
|
||||
.map((row) => row.id.slice(prefix.length));
|
||||
setLiveGradeIds(new Set(pids));
|
||||
setGradingLive(pids.length > 0);
|
||||
}
|
||||
} catch {
|
||||
// keep the last liveness read
|
||||
}
|
||||
};
|
||||
void tick();
|
||||
const t = setInterval(() => void tick(), 2000);
|
||||
return () => {
|
||||
stopped = true;
|
||||
clearInterval(t);
|
||||
};
|
||||
}, [needsPoll, refetch, initial.id]);
|
||||
// The poll: while not ready (generation), or while a grading run is
|
||||
// live for this set with outstanding ungraded answers. The activity
|
||||
// feed's practice rows are ROW-KEYED (setId:grade:problemId) — the
|
||||
// live rows name exactly which grades are pending; a dropped grade
|
||||
// (no live row) settles the page instead of polling forever.
|
||||
const pendingGrade = set.problems.some(
|
||||
(p) => p.answer !== undefined && !p.grade,
|
||||
);
|
||||
const needsPoll = set.status !== "ready" || (gradingLive && pendingGrade);
|
||||
useEffect(() => {
|
||||
if (!needsPoll) return;
|
||||
let stopped = false;
|
||||
const tick = async () => {
|
||||
await refetch();
|
||||
try {
|
||||
const res = await fetch("/api/activity", { cache: "no-store" });
|
||||
if (!res.ok) return;
|
||||
const feed = (await res.json()) as {
|
||||
practice?: Array<{ id: string; kind: string }>;
|
||||
};
|
||||
if (!stopped && mounted.current) {
|
||||
const prefix = `${initial.id}:grade:`;
|
||||
const pids = (feed.practice ?? [])
|
||||
.filter((row) => row.id.startsWith(prefix))
|
||||
.map((row) => row.id.slice(prefix.length));
|
||||
setLiveGradeIds(new Set(pids));
|
||||
setGradingLive(pids.length > 0);
|
||||
}
|
||||
} catch {
|
||||
// keep the last liveness read
|
||||
}
|
||||
};
|
||||
void tick();
|
||||
const t = setInterval(() => void tick(), 2000);
|
||||
return () => {
|
||||
stopped = true;
|
||||
clearInterval(t);
|
||||
};
|
||||
}, [needsPoll, refetch, initial.id]);
|
||||
|
||||
// ONE attempt per problem (owner 2026-09-29): the submit posts THAT
|
||||
// problem's answer alone; the server refuses a second submission
|
||||
// forever after. On success the box locks (answer persisted) and the
|
||||
// reveal shows instantly; the grade arrives via the poll.
|
||||
const submit = useCallback(
|
||||
async (problemId: string) => {
|
||||
if (submittingId !== null) return;
|
||||
const p = set.problems.find((q) => q.id === problemId);
|
||||
if (!p || p.answer !== undefined) return; // done problems never resubmit
|
||||
const text = drafts[problemId] ?? "";
|
||||
if (text.trim() === "") return;
|
||||
setSubmittingId(problemId);
|
||||
setSubmitErrors((prev) => {
|
||||
const next = { ...prev };
|
||||
delete next[problemId];
|
||||
return next;
|
||||
});
|
||||
try {
|
||||
const res = await fetch(`/api/practice/sets/${set.id}/answers`, {
|
||||
method: "POST",
|
||||
headers: { "content-type": "application/json" },
|
||||
body: JSON.stringify({ answers: [{ problemId, text }] }),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const body = (await res.json().catch(() => ({}))) as {
|
||||
error?: string;
|
||||
};
|
||||
setSubmitErrors((prev) => ({
|
||||
...prev,
|
||||
[problemId]: body.error ?? `Submit failed (${res.status})`,
|
||||
}));
|
||||
setSubmittingId(null);
|
||||
return;
|
||||
}
|
||||
setSubmittingId(null);
|
||||
setGradingLive(true); // the grade lands via the poll
|
||||
await refetch();
|
||||
} catch {
|
||||
setSubmitErrors((prev) => ({
|
||||
...prev,
|
||||
[problemId]: "Submit failed — network error. Try again.",
|
||||
}));
|
||||
setSubmittingId(null);
|
||||
}
|
||||
},
|
||||
[submittingId, set, drafts, refetch],
|
||||
);
|
||||
// ONE attempt per problem (owner 2026-09-29): the submit posts THAT
|
||||
// problem's answer alone; the server refuses a second submission
|
||||
// forever after. On success the box locks (answer persisted) and the
|
||||
// reveal shows instantly; the grade arrives via the poll.
|
||||
const submit = useCallback(
|
||||
async (problemId: string) => {
|
||||
if (submittingId !== null) return;
|
||||
const p = set.problems.find((q) => q.id === problemId);
|
||||
if (!p || p.answer !== undefined) return; // done problems never resubmit
|
||||
const text = drafts[problemId] ?? "";
|
||||
if (text.trim() === "") return;
|
||||
setSubmittingId(problemId);
|
||||
setSubmitErrors((prev) => {
|
||||
const next = { ...prev };
|
||||
delete next[problemId];
|
||||
return next;
|
||||
});
|
||||
try {
|
||||
const res = await fetch(`/api/practice/sets/${set.id}/answers`, {
|
||||
method: "POST",
|
||||
headers: { "content-type": "application/json" },
|
||||
body: JSON.stringify({ answers: [{ problemId, text }] }),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const body = (await res.json().catch(() => ({}))) as {
|
||||
error?: string;
|
||||
};
|
||||
setSubmitErrors((prev) => ({
|
||||
...prev,
|
||||
[problemId]: body.error ?? `Submit failed (${res.status})`,
|
||||
}));
|
||||
setSubmittingId(null);
|
||||
return;
|
||||
}
|
||||
setSubmittingId(null);
|
||||
setGradingLive(true); // the grade lands via the poll
|
||||
await refetch();
|
||||
} catch {
|
||||
setSubmitErrors((prev) => ({
|
||||
...prev,
|
||||
[problemId]: "Submit failed — network error. Try again.",
|
||||
}));
|
||||
setSubmittingId(null);
|
||||
}
|
||||
},
|
||||
[submittingId, set, drafts, refetch],
|
||||
);
|
||||
|
||||
return (
|
||||
<PracticeExamBody
|
||||
set={set}
|
||||
drafts={drafts}
|
||||
onDraft={(problemId, text) =>
|
||||
setDrafts((prev) => ({ ...prev, [problemId]: text }))
|
||||
}
|
||||
onSubmit={(problemId) => void submit(problemId)}
|
||||
submittingId={submittingId}
|
||||
submitErrors={submitErrors}
|
||||
liveGradeIds={liveGradeIds}
|
||||
/>
|
||||
);
|
||||
return (
|
||||
<PracticeExamBody
|
||||
set={set}
|
||||
drafts={drafts}
|
||||
onDraft={(problemId, text) =>
|
||||
setDrafts((prev) => ({ ...prev, [problemId]: text }))
|
||||
}
|
||||
onSubmit={(problemId) => void submit(problemId)}
|
||||
submittingId={submittingId}
|
||||
submitErrors={submitErrors}
|
||||
liveGradeIds={liveGradeIds}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
+240
-240
@@ -19,273 +19,273 @@ import { PracticeDialog } from "@/components/practice-dialog";
|
||||
|
||||
/** A set's status word — plain and honest, no invented progress. */
|
||||
export function setStatusWord(set: Pick<ProblemSet, "status">): string {
|
||||
return set.status === "partitioning"
|
||||
? "partitioning"
|
||||
: set.status === "generating"
|
||||
? "generating"
|
||||
: set.status;
|
||||
return set.status === "partitioning"
|
||||
? "partitioning"
|
||||
: set.status === "generating"
|
||||
? "generating"
|
||||
: set.status;
|
||||
}
|
||||
|
||||
/** The list's pure body — exported for SSR pins. Rows are buttons
|
||||
* (click-through); the delete affordance is a nested icon button. */
|
||||
export function PracticeListBody({
|
||||
sets,
|
||||
onOpen,
|
||||
onDelete,
|
||||
onNew,
|
||||
sets,
|
||||
onOpen,
|
||||
onDelete,
|
||||
onNew,
|
||||
}: {
|
||||
sets: ProblemSet[];
|
||||
onOpen: (id: string) => void;
|
||||
onDelete: (set: ProblemSet) => void;
|
||||
onNew: () => void;
|
||||
sets: ProblemSet[];
|
||||
onOpen: (id: string) => void;
|
||||
onDelete: (set: ProblemSet) => void;
|
||||
onNew: () => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex h-dvh">
|
||||
<div className="flex min-w-0 flex-1 flex-col">
|
||||
{/* The top bar (owner, UI round 2026-09-29): the new-session
|
||||
return (
|
||||
<div className="flex h-dvh">
|
||||
<div className="flex min-w-0 flex-1 flex-col">
|
||||
{/* The top bar (owner, UI round 2026-09-29): the new-session
|
||||
pattern — h-15, lh-drag (the Electron window-drag surface),
|
||||
the sidebar reopen toggle first, "Practice" beside it, the
|
||||
page's one action at the right edge (lh-no-drag — it must
|
||||
stay clickable inside the drag band). */}
|
||||
<header className="lh-drag flex h-15 items-center gap-3 border-b border-border px-3">
|
||||
<SidebarToggle />
|
||||
<div className="min-w-0 flex-1 truncate font-title text-3xl tracking-tight">
|
||||
Practice
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
data-testid="practice-new"
|
||||
onClick={onNew}
|
||||
className="lh-no-drag flex shrink-0 items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm transition-colors hover:bg-accent"
|
||||
>
|
||||
<PlusIcon className="size-3.5" />
|
||||
New problem set
|
||||
</button>
|
||||
</header>
|
||||
<div className="relative flex min-h-0 flex-1">
|
||||
<div
|
||||
className="h-full min-w-0 flex-1 overflow-y-auto"
|
||||
data-testid="practice-list-scroll"
|
||||
>
|
||||
<div
|
||||
className="mx-auto flex w-full max-w-3xl flex-col gap-3 p-6"
|
||||
data-testid="practice-list"
|
||||
>
|
||||
{sets.length === 0 && (
|
||||
<div
|
||||
className="rounded-xl border bg-card p-6 text-sm text-muted-foreground"
|
||||
data-testid="practice-empty"
|
||||
>
|
||||
No problem sets yet — create one from a session.
|
||||
</div>
|
||||
)}
|
||||
<header className="lh-drag flex h-15 items-center gap-3 border-b border-border px-3">
|
||||
<SidebarToggle />
|
||||
<div className="min-w-0 flex-1 truncate font-title text-3xl tracking-tight">
|
||||
Practice
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
data-testid="practice-new"
|
||||
onClick={onNew}
|
||||
className="lh-no-drag flex shrink-0 items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm transition-colors hover:bg-accent"
|
||||
>
|
||||
<PlusIcon className="size-3.5" />
|
||||
New problem set
|
||||
</button>
|
||||
</header>
|
||||
<div className="relative flex min-h-0 flex-1">
|
||||
<div
|
||||
className="h-full min-w-0 flex-1 overflow-y-auto"
|
||||
data-testid="practice-list-scroll"
|
||||
>
|
||||
<div
|
||||
className="mx-auto flex w-full max-w-3xl flex-col gap-3 p-6"
|
||||
data-testid="practice-list"
|
||||
>
|
||||
{sets.length === 0 && (
|
||||
<div
|
||||
className="rounded-xl border bg-card p-6 text-sm text-muted-foreground"
|
||||
data-testid="practice-empty"
|
||||
>
|
||||
No problem sets yet — create one from a session.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
{sets.map((set) => {
|
||||
const ready = set.problems.filter(
|
||||
(p) => p.status === "ready",
|
||||
).length;
|
||||
const graded = set.problems.filter((p) => p.grade).length;
|
||||
return (
|
||||
<div key={set.id} className="flex items-stretch gap-1">
|
||||
<button
|
||||
type="button"
|
||||
data-testid={`practice-row-${set.id}`}
|
||||
onClick={() => onOpen(set.id)}
|
||||
className="flex flex-1 items-center justify-between gap-4 rounded-xl border bg-card px-4 py-3 text-left transition-colors hover:bg-accent/50"
|
||||
>
|
||||
<span className="min-w-0">
|
||||
<span className="block truncate font-medium">
|
||||
{set.title}
|
||||
</span>
|
||||
<span className="block text-xs text-muted-foreground">
|
||||
{set.createdAt.slice(0, 10)} ·{" "}
|
||||
{set.problems.length > 0
|
||||
? `${ready}/${set.problems.length} problems`
|
||||
: "no problems yet"}
|
||||
{graded > 0 ? ` · ${graded} graded` : ""}
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
data-testid={`practice-status-${set.id}`}
|
||||
className={`shrink-0 text-xs uppercase tracking-wide ${
|
||||
set.status === "error"
|
||||
? "text-destructive"
|
||||
: "text-muted-foreground"
|
||||
}`}
|
||||
>
|
||||
{setStatusWord(set)}
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
data-testid={`practice-delete-${set.id}`}
|
||||
aria-label={`Delete ${set.title}`}
|
||||
onClick={() => onDelete(set)}
|
||||
className="flex items-center rounded-xl border px-3 text-muted-foreground/60 transition-colors hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
<TrashIcon className="size-4" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
<div className="flex flex-col gap-2">
|
||||
{sets.map((set) => {
|
||||
const ready = set.problems.filter(
|
||||
(p) => p.status === "ready",
|
||||
).length;
|
||||
const graded = set.problems.filter((p) => p.grade).length;
|
||||
return (
|
||||
<div key={set.id} className="flex items-stretch gap-1">
|
||||
<button
|
||||
type="button"
|
||||
data-testid={`practice-row-${set.id}`}
|
||||
onClick={() => onOpen(set.id)}
|
||||
className="flex flex-1 items-center justify-between gap-4 rounded-xl border bg-card px-4 py-3 text-left transition-colors hover:bg-accent/50"
|
||||
>
|
||||
<span className="min-w-0">
|
||||
<span className="block truncate font-medium">
|
||||
{set.title}
|
||||
</span>
|
||||
<span className="block text-xs text-muted-foreground">
|
||||
{set.createdAt.slice(0, 10)} ·{" "}
|
||||
{set.problems.length > 0
|
||||
? `${ready}/${set.problems.length} problems`
|
||||
: "no problems yet"}
|
||||
{graded > 0 ? ` · ${graded} graded` : ""}
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
data-testid={`practice-status-${set.id}`}
|
||||
className={`shrink-0 text-xs uppercase tracking-wide ${
|
||||
set.status === "error"
|
||||
? "text-destructive"
|
||||
: "text-muted-foreground"
|
||||
}`}
|
||||
>
|
||||
{setStatusWord(set)}
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
data-testid={`practice-delete-${set.id}`}
|
||||
aria-label={`Delete ${set.title}`}
|
||||
onClick={() => onDelete(set)}
|
||||
className="flex items-center rounded-xl border px-3 text-muted-foreground/60 transition-colors hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
<TrashIcon className="size-4" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** The delete confirm — the delete-session dialog's shape (no mode
|
||||
* checkbox: a set has no preserve-graph question). Pure body + portal
|
||||
* wrapper. */
|
||||
export function DeleteSetBody({
|
||||
title,
|
||||
busy,
|
||||
failure,
|
||||
onClose,
|
||||
onRun,
|
||||
title,
|
||||
busy,
|
||||
failure,
|
||||
onClose,
|
||||
onRun,
|
||||
}: {
|
||||
title: string;
|
||||
busy: boolean;
|
||||
failure: string | null;
|
||||
onClose: () => void;
|
||||
onRun: () => void;
|
||||
title: string;
|
||||
busy: boolean;
|
||||
failure: string | null;
|
||||
onClose: () => void;
|
||||
onRun: () => void;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="Delete problem set"
|
||||
data-testid="delete-set-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 problem set?
|
||||
</h2>
|
||||
<p className="mt-2 font-mono text-sm">{title}</p>
|
||||
<p className="mt-3 text-sm text-muted-foreground">
|
||||
The set and its problems are removed. Nothing in the graph or your
|
||||
sessions changes.
|
||||
</p>
|
||||
{failure && (
|
||||
<p
|
||||
data-testid="delete-set-error"
|
||||
className="mt-3 text-sm text-destructive"
|
||||
>
|
||||
{failure}
|
||||
</p>
|
||||
)}
|
||||
<div className="mt-5 flex justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
disabled={busy}
|
||||
className="rounded-md px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
data-testid="delete-set-run"
|
||||
onClick={onRun}
|
||||
disabled={busy}
|
||||
className="rounded-md bg-destructive px-3 py-1.5 text-sm font-medium text-destructive-foreground transition-colors hover:bg-destructive/90 disabled:opacity-40"
|
||||
>
|
||||
{busy ? "Deleting…" : "Delete"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="Delete problem set"
|
||||
data-testid="delete-set-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 problem set?
|
||||
</h2>
|
||||
<p className="mt-2 font-mono text-sm">{title}</p>
|
||||
<p className="mt-3 text-sm text-muted-foreground">
|
||||
The set and its problems are removed. Nothing in the graph or your
|
||||
sessions changes.
|
||||
</p>
|
||||
{failure && (
|
||||
<p
|
||||
data-testid="delete-set-error"
|
||||
className="mt-3 text-sm text-destructive"
|
||||
>
|
||||
{failure}
|
||||
</p>
|
||||
)}
|
||||
<div className="mt-5 flex justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
disabled={busy}
|
||||
className="rounded-md px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
data-testid="delete-set-run"
|
||||
onClick={onRun}
|
||||
disabled={busy}
|
||||
className="rounded-md bg-destructive px-3 py-1.5 text-sm font-medium text-destructive-foreground transition-colors hover:bg-destructive/90 disabled:opacity-40"
|
||||
>
|
||||
{busy ? "Deleting…" : "Delete"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function PracticeListPage({
|
||||
initialSets,
|
||||
initialSets,
|
||||
}: {
|
||||
initialSets: ProblemSet[];
|
||||
initialSets: ProblemSet[];
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [sets, setSets] = useState<ProblemSet[]>(initialSets);
|
||||
const [creating, setCreating] = useState(false);
|
||||
const [deleting, setDeleting] = useState<ProblemSet | null>(null);
|
||||
const [deleteBusy, setDeleteBusy] = useState(false);
|
||||
const [deleteFailure, setDeleteFailure] = useState<string | null>(null);
|
||||
const router = useRouter();
|
||||
const [sets, setSets] = useState<ProblemSet[]>(initialSets);
|
||||
const [creating, setCreating] = useState(false);
|
||||
const [deleting, setDeleting] = useState<ProblemSet | null>(null);
|
||||
const [deleteBusy, setDeleteBusy] = useState(false);
|
||||
const [deleteFailure, setDeleteFailure] = useState<string | null>(null);
|
||||
|
||||
const refresh = useCallback(async () => {
|
||||
try {
|
||||
const res = await fetch("/api/practice/sets", { cache: "no-store" });
|
||||
if (!res.ok) return;
|
||||
const d = (await res.json()) as { sets: ProblemSet[] };
|
||||
setSets(d.sets);
|
||||
} catch {
|
||||
// a transient failure on the poll keeps the last snapshot
|
||||
}
|
||||
}, []);
|
||||
const refresh = useCallback(async () => {
|
||||
try {
|
||||
const res = await fetch("/api/practice/sets", { cache: "no-store" });
|
||||
if (!res.ok) return;
|
||||
const d = (await res.json()) as { sets: ProblemSet[] };
|
||||
setSets(d.sets);
|
||||
} catch {
|
||||
// a transient failure on the poll keeps the last snapshot
|
||||
}
|
||||
}, []);
|
||||
|
||||
// The reveal poll: while any set is partitioning/generating, statuses
|
||||
// live-update; a settled list goes quiet.
|
||||
const anyRunning = sets.some(
|
||||
(s) => s.status === "partitioning" || s.status === "generating",
|
||||
);
|
||||
useEffect(() => {
|
||||
if (!anyRunning) return;
|
||||
const t = setInterval(() => void refresh(), 2000);
|
||||
return () => clearInterval(t);
|
||||
}, [anyRunning, refresh]);
|
||||
// The reveal poll: while any set is partitioning/generating, statuses
|
||||
// live-update; a settled list goes quiet.
|
||||
const anyRunning = sets.some(
|
||||
(s) => s.status === "partitioning" || s.status === "generating",
|
||||
);
|
||||
useEffect(() => {
|
||||
if (!anyRunning) return;
|
||||
const t = setInterval(() => void refresh(), 2000);
|
||||
return () => clearInterval(t);
|
||||
}, [anyRunning, refresh]);
|
||||
|
||||
const runDelete = useCallback(async () => {
|
||||
if (!deleting || deleteBusy) return;
|
||||
setDeleteBusy(true);
|
||||
setDeleteFailure(null);
|
||||
try {
|
||||
const res = await fetch(`/api/practice/sets/${deleting.id}`, {
|
||||
method: "DELETE",
|
||||
});
|
||||
if (!res.ok) {
|
||||
const body = (await res.json().catch(() => ({}))) as { error?: string };
|
||||
setDeleteFailure(body.error ?? `Delete failed (${res.status})`);
|
||||
setDeleteBusy(false);
|
||||
return;
|
||||
}
|
||||
setDeleting(null);
|
||||
setDeleteBusy(false);
|
||||
await refresh();
|
||||
} catch {
|
||||
setDeleteFailure("Delete failed — network error. Try again.");
|
||||
setDeleteBusy(false);
|
||||
}
|
||||
}, [deleting, deleteBusy, refresh]);
|
||||
const runDelete = useCallback(async () => {
|
||||
if (!deleting || deleteBusy) return;
|
||||
setDeleteBusy(true);
|
||||
setDeleteFailure(null);
|
||||
try {
|
||||
const res = await fetch(`/api/practice/sets/${deleting.id}`, {
|
||||
method: "DELETE",
|
||||
});
|
||||
if (!res.ok) {
|
||||
const body = (await res.json().catch(() => ({}))) as { error?: string };
|
||||
setDeleteFailure(body.error ?? `Delete failed (${res.status})`);
|
||||
setDeleteBusy(false);
|
||||
return;
|
||||
}
|
||||
setDeleting(null);
|
||||
setDeleteBusy(false);
|
||||
await refresh();
|
||||
} catch {
|
||||
setDeleteFailure("Delete failed — network error. Try again.");
|
||||
setDeleteBusy(false);
|
||||
}
|
||||
}, [deleting, deleteBusy, refresh]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<PracticeListBody
|
||||
sets={sets}
|
||||
onOpen={(id) => router.push(`/practice/${id}`)}
|
||||
onDelete={(set) => setDeleting(set)}
|
||||
onNew={() => setCreating(true)}
|
||||
/>
|
||||
{creating && <PracticeDialog onClose={() => setCreating(false)} />}
|
||||
{deleting &&
|
||||
createPortal(
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-background/80"
|
||||
onClick={() => {
|
||||
if (!deleteBusy) setDeleting(null);
|
||||
}}
|
||||
>
|
||||
<DeleteSetBody
|
||||
title={deleting.title}
|
||||
busy={deleteBusy}
|
||||
failure={deleteFailure}
|
||||
onClose={() => setDeleting(null)}
|
||||
onRun={() => void runDelete()}
|
||||
/>
|
||||
</div>,
|
||||
document.body,
|
||||
)}
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<PracticeListBody
|
||||
sets={sets}
|
||||
onOpen={(id) => router.push(`/practice/${id}`)}
|
||||
onDelete={(set) => setDeleting(set)}
|
||||
onNew={() => setCreating(true)}
|
||||
/>
|
||||
{creating && <PracticeDialog onClose={() => setCreating(false)} />}
|
||||
{deleting &&
|
||||
createPortal(
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-background/80"
|
||||
onClick={() => {
|
||||
if (!deleteBusy) setDeleting(null);
|
||||
}}
|
||||
>
|
||||
<DeleteSetBody
|
||||
title={deleting.title}
|
||||
busy={deleteBusy}
|
||||
failure={deleteFailure}
|
||||
onClose={() => setDeleting(null)}
|
||||
onRun={() => void runDelete()}
|
||||
/>
|
||||
</div>,
|
||||
document.body,
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user