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

draft: the pick bar comes to the new-practice screen (round 10 slice 2)

Browse Source 
The SAME pill the home screen carries — above the composer, dashed
'Pick propositions from the map' when empty, count + Clear when picked
— now lives on the /chat/new?mode=practice draft. The draft has no
graph behind it, so the pill opens the standalone ChainTableOverlay
(select mode, controlled selection, Done bar) over the /api/graph
snapshot, fetched lazily on first open. The first send carries the
picks as graphContext: the created session is born WITH its ids-first
context marker (target validation's truth set) instead of pickless —
the same contract as the home screen's practice send. Teach drafts
render no pill; practice with no picks stays lean on the wire.
This commit is contained in:
amosblomqvist
2026-10-05 06:51:23 +03:00
parent a1596556df
commit 93fdf71d4d
2 changed files with 166 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/new-session.tsx
+111 -3
View File
@@ -9,7 +9,13 @@ import { TopBar } from "@/components/top-bar";
import { SetupDialog } from "@/components/setup-dialog";
import { useStrongKeyless, useZeroKeys, ZeroKeysPill } from "@/components/setup-cta";
import { StatsBar } from "@/components/stats-bar";
import type { ChatSettings } from "@/src/core";
import { ChainTableOverlay } from "@/components/chain-table.tsx";
import { DumbbellIcon } from "lucide-react";
import type { ChatSettings, GraphSnapshot } from "@/src/core";
/** The draft's pick set (owner round 10): the SAME shape the home pick
* bar lifts — resolved nodes as the learner SAW them at pick time. */
export type DraftPick = { id: string; name: string; statement: string };
/**
* The sessionless draft view at /chat/new (owner, 2026-09-13): "+ New
@@ -37,13 +43,22 @@ export async function startDraftSession(
text: string,
fetchLike: typeof fetch,
mode?: "practice",
picks?: readonly DraftPick[],
): Promise<string | null> {
const t = text.trim();
if (!t) return null;
// THE PICKS RIDE THE CREATE (owner round 10): a practice draft seeded
// from the pick bar creates its session WITH the graph context — the
// same contract as the home screen's practice send (the marker with
// [id] name: statement lines, target validation's truth set).
const res = await fetchLike("/api/chats", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(mode === "practice" ? { title: t, kind: "practice" } : { title: t }),
body: JSON.stringify(
mode === "practice"
? { title: t, kind: "practice", ...(picks && picks.length > 0 ? { graphContext: { propositions: picks } } : {}) }
: { title: t },
),
});
const { id } = (await res.json()) as { id: string };
// No settings PUT on create (per-session models, owner 2026-09-28):
@@ -63,6 +78,9 @@ export function DraftShell({
onSend,
setupCta,
mode = "teach",
picks = [],
onOpenPicker,
onClearPicks,
}: {
busy: boolean;
text: string;
@@ -76,6 +94,14 @@ export function DraftShell({
* affordance home carries, rendered above the draft shell — passed by
* NewSession, which owns the configured state and the SetupDialog. */
setupCta?: ReactNode;
/** THE PICK BAR (owner round 10): the SAME pill the home screen
* carries above its composer — dashed "Pick propositions from the
* map" when empty, count + Clear when picked. The draft screen has
* no graph behind it, so the picker opens the standalone chain-table
* overlay over fetched snapshot data (owned by NewSession). */
picks?: DraftPick[];
onOpenPicker?: () => void;
onClearPicks?: () => void;
}) {
// Voice dictation (STT wave, 2026-09-17): finals append at the end of the
// draft text (via the parent's onChange — the truth lives there); the
@@ -144,6 +170,36 @@ export function DraftShell({
<div className="bg-background pb-4">
<div className={DOCK}>
{setupCta}
{(picks.length > 0 || mode === "practice") && (
<div className="mb-2 flex items-center justify-start gap-1.5">
<button
type="button"
data-testid="practice-props-chip"
onClick={onOpenPicker}
className={
"flex cursor-pointer items-center gap-1.5 rounded-full border px-3 py-1.5 font-ui text-xs transition-colors " +
(picks.length > 0
? "border-border bg-card text-foreground hover:bg-accent"
: "border-dashed border-border/80 bg-transparent text-muted-foreground hover:bg-accent hover:text-foreground")
}
>
<DumbbellIcon aria-hidden="true" className="size-3.5 text-muted-foreground" />
{picks.length > 0
? `${picks.length} ${picks.length === 1 ? "proposition" : "propositions"} selected`
: "Pick propositions from the map"}
</button>
{picks.length > 0 && (
<button
type="button"
data-testid="practice-props-clear"
onClick={onClearPicks}
className="cursor-pointer rounded-full px-2 py-1 font-ui text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
>
Clear
</button>
)}
</div>
)}
<div className="pointer-events-auto overflow-hidden rounded-2xl border bg-card shadow-lg">
<Composer
busy={busy}
@@ -188,6 +244,32 @@ export function NewSession({ initialConfigured, mode = "teach" }: { initialConfi
setText(v);
};
const [busy, setBusy] = useState(false);
// THE PICK BAR (owner round 10): the draft's lifted pick set + the
// snapshot the standalone chain-table picker reads. Lazy — the graph
// is fetched on FIRST open only, then reused.
const [picks, setPicks] = useState<DraftPick[]>([]);
const picksRef = useRef<DraftPick[]>([]);
const applyPicks = (next: DraftPick[]) => {
picksRef.current = next;
setPicks(next);
};
const [pickerOpen, setPickerOpen] = useState(false);
const [snapshot, setSnapshot] = useState<GraphSnapshot | null>(null);
const openPicker = () => {
if (snapshot) {
setPickerOpen(true);
return;
}
void fetch("/api/graph")
.then((r) => r.json() as Promise<GraphSnapshot>)
.then((snap) => {
setSnapshot(snap);
setPickerOpen(true);
})
.catch(() => {
/* an unreachable graph leaves the draft usable — pickless */
});
};
// First-run gate (model-slots wave, owner 2026-09-20): the send
// INTERCEPTS into the setup flow while unconfigured — no defaults for
@@ -223,7 +305,7 @@ export function NewSession({ initialConfigured, mode = "teach" }: { initialConfi
return;
}
setBusy(true);
void startDraftSession(draft, fetch, mode === "practice" ? "practice" : undefined)
void startDraftSession(draft, fetch, mode === "practice" ? "practice" : undefined, mode === "practice" ? picksRef.current : undefined)
.then((target) => {
if (target) router.push(target);
else setBusy(false);
@@ -239,6 +321,9 @@ export function NewSession({ initialConfigured, mode = "teach" }: { initialConfi
onChange={applyText}
onSend={send}
mode={mode}
picks={picks}
onOpenPicker={openPicker}
onClearPicks={() => applyPicks([])}
setupCta={
zeroKeys ? (
<ZeroKeysPill onOpen={() => setSetupOpen(true)} />
@@ -258,6 +343,29 @@ export function NewSession({ initialConfigured, mode = "teach" }: { initialConfi
)
}
/>
{/* THE PICKER (owner round 10): the standalone chain table over
fetched snapshot data — the same select-mode overlay the home
graph hosts, no graph canvas needed behind it. Controlled
selection: every check/clear reports up live; Done closes. */}
<ChainTableOverlay
open={pickerOpen}
nodes={snapshot?.propositions ?? []}
chains={snapshot?.chains ?? []}
sessions={snapshot?.sessions ?? {}}
fileSources={snapshot?.fileSources ?? {}}
onClose={() => setPickerOpen(false)}
selectMode
controlledSelection={new Set(picks.map((p) => p.id))}
onSelectionChange={(ids) => {
const byId = new Map((snapshot?.propositions ?? []).map((n) => [n.id, n]));
const next: DraftPick[] = [];
for (const id of ids) {
const n = byId.get(id);
if (n) next.push({ id: n.id, name: n.name, statement: n.statement });
}
applyPicks(next);
}}
/>
{/* First-run setup: the send interception's landing surface — stage
1 is the self-contained first-key screen (zero-keys wave). */}
<SetupDialog