practice entry points: sidebar filter, practice draft, graph picker

- Sidebar: the three-way kind filter (Teaching/All/Practice, persisted
  in localStorage) above the search; two new-session doors (Teaching →
  /chat/new, Practice → /chat/new?mode=practice); practice rows carry
  the dumbbell badge and 'Practicing…' busy meta.
- Draft: ?mode=practice swaps the copy (title, empty state, 'What do
  you want to practice?') and startDraftSession posts kind:'practice'.
- Graph entry (home composer): teach|practice switch on the stats row's
  left edge (StatsBar leadingSlot); practice mode shows the propositions
  chip that opens the chain table as a picker (its floating bar becomes
  'Practice these' — no delete fence); the picks seed the opening prompt
  ('Propositions from the map:…') while the title stays the typed text.

components/chain-table.tsx

@@ -59,6 +59,7 @@ import {
 	ChevronDownIcon,
 	ChevronRightIcon,
 	ChevronUpIcon,
+	DumbbellIcon,
 	FolderIcon,
 	FolderOpenIcon,
 	Trash2Icon,
@@ -113,6 +114,8 @@ export function ChainTableBody({
 	onClear,
 	onDelete,
 	onClose,
+	selectMode,
+	onSelect,
 }: {
 	nodes: GraphNode[];
 	chains: GraphChain[];
@@ -134,6 +137,11 @@ export function ChainTableBody({
 	/** Opens the full-death confirm dialog (owner, 2026-09-29 night). */
 	onDelete: () => void;
 	onClose: () => void;
+	/** PRACTICE SELECT (2026-10-04): the floating bar's confirm becomes
+	 *  "Practice these" — no delete fence; the caller owns what the
+	 *  selection becomes. */
+	selectMode?: boolean;
+	onSelect?: () => void;
 }) {
 	const byId = useMemo(() => new Map(nodes.map((n) => [n.id, n])), [nodes]);
 	const chains = useMemo(() => chainsForSelection(nodes, storedChains), [nodes, storedChains]);
@@ -575,6 +583,11 @@ export function ChainTableOverlay({
 	sessions,
 	fileSources,
 	onClose,
+	/** PRACTICE SELECT (2026-10-04): the table opens as a proposition
+	 *  picker — the floating bar confirms the selection to the caller
+	 *  (never deletes); the title says what the pick is for. */
+	selectMode,
+	onConfirmSelection,
 }: {
 	open: boolean;
 	nodes: GraphNode[];
@@ -582,6 +595,8 @@ export function ChainTableOverlay({
 	sessions: Record<string, string>;
 	fileSources: Record<string, string>;
 	onClose: () => void;
+	selectMode?: boolean;
+	onConfirmSelection?: (nodes: GraphNode[]) => void;
 }) {
 	const [query, setQuery] = useState("");
 	const [sort, setSort] = useState<ChainSort>({ col: "name", dir: 1 });
@@ -654,6 +669,12 @@ export function ChainTableOverlay({
 					onClear={() => setSelection(new Set())}
 					onDelete={() => setDeleteOpen(true)}
 					onClose={onClose}
+					selectMode={selectMode}
+					onSelect={() => {
+						onConfirmSelection?.(selectedNodes);
+						setSelection(new Set());
+						onClose();
+					}}
 				/>
 			</div>
 			{deleteOpen && (

components/graph-view.tsx

@@ -944,7 +944,18 @@ export function GraphChromeRow({
 	);
 }
 
-export function GraphView() {
+export function GraphView({
+	chainSelectOpen = false,
+	onChainSelected,
+	onChainSelectClose,
+}: {
+	/** PRACTICE SELECT (owner, 2026-10-04): the home composer's practice
+	 *  chip opens the chain table as a proposition picker — this prop
+	 *  drives it; the confirm hands the picked nodes to the caller. */
+	chainSelectOpen?: boolean;
+	onChainSelected?: (nodes: { id: string; name: string; statement: string }[]) => void;
+	onChainSelectClose?: () => void;
+}) {
 	const containerRef = useRef<HTMLDivElement | null>(null);
 	const canvasRef = useRef<HTMLCanvasElement | null>(null);
 	const cardRef = useRef<HTMLDivElement | null>(null);
@@ -1048,6 +1059,12 @@ export function GraphView() {
 	// The chain table overlay (chains-overlay plan, 2026-09-29) —
 	// component-local: a browsing surface, not graph state.
 	const [chainsOpen, setChainsOpen] = useState(false);
+	// PRACTICE SELECT (2026-10-04): the parent's chip drives the select
+	// mode; closing (either the picker's confirm or its X) reports back so
+	// the chip's open state and the table's never disagree.
+	useEffect(() => {
+		if (chainSelectOpen) setChainsOpen(true);
+	}, [chainSelectOpen]);
 	useEffect(() => {
 		let cancelled = false;
 		fetch("/api/graph")
@@ -1678,7 +1695,15 @@ export function GraphView() {
 				chains={snapshot?.chains ?? []}
 				sessions={snapshot?.sessions ?? {}}
 				fileSources={snapshot?.fileSources ?? {}}
-				onClose={() => setChainsOpen(false)}
+				onClose={() => {
+					setChainsOpen(false);
+					onChainSelectClose?.();
+				}}
+				selectMode={chainSelectOpen}
+				onConfirmSelection={(picked) => {
+					onChainSelected?.(picked.map((n) => ({ id: n.id, name: n.name, statement: n.statement })));
+					onChainSelectClose?.();
+				}}
 			/>		</div>
 	);
 }

components/home.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
-import { CornerDownLeftIcon } from "lucide-react";
+import { CornerDownLeftIcon, DumbbellIcon } from "lucide-react";
 import { GraphView } from "@/components/graph-view";
 import { SetupDialog } from "@/components/setup-dialog";
 import { useStrongKeyless, useZeroKeys, ZeroKeysPill } from "@/components/setup-cta";
@@ -65,6 +65,15 @@ export function Home({ initialConfigured }: { initialConfigured: boolean }) {
 		}
 	}, [dictation.active]);
 
+	/* PRACTICE MODE (owner, 2026-10-04): the graph composer's teach |
+	 *  practice switch — practice creates a kind:"practice" session and
+	 *  may carry proposition picks from the chain table (the chip above
+	 *  the composer opens the picker; the picks seed the opening prompt).
+	 *  Not enforcing any input format — the picks are a convenience. */
+	const [mode, setMode] = useState<"teach" | "practice">("teach");
+	const [practiceProps, setPracticeProps] = useState<{ id: string; name: string; statement: string }[]>([]);
+	const [chainSelectOpen, setChainSelectOpen] = useState(false);
+
 	/* FINISH DICTATION FIRST (owner, 2026-10-01): Enter may arrive while a
 	 * run is live with the topic still deferred in the run's buffer — stop
 	 * the run, let the last finals land, THEN read the REF mirror (not the
@@ -101,16 +110,26 @@ export function Home({ initialConfigured }: { initialConfigured: boolean }) {
 		}
 		setBusy(true);
 		try {
+			// The practice seed: the picks ride the OPENING PROMPT (never
+			// the title — the title stays the learner's own words).
+			const seed =
+				mode === "practice" && practiceProps.length > 0
+					? `\n\nPropositions from the map:\n${practiceProps
+							.map((p) => `- ${p.name}: ${p.statement}`)
+							.join("\n")}`
+					: "";
 			const res = await fetch("/api/chats", {
 				method: "POST",
 				headers: { "Content-Type": "application/json" },
-				body: JSON.stringify({ title: t }),
+				body: JSON.stringify(
+					mode === "practice" ? { title: t, kind: "practice" } : { title: t },
+				),
 			});
 			const { id } = (await res.json()) as { id: string };
 			// No settings PUT on create (per-session models, owner
 			// 2026-09-28): the SERVER stamps the newborn from the strong
 			// slot — the same default this surface's model control edits.
-			router.push(`/chat/${id}?prompt=${encodeURIComponent(t)}`);
+			router.push(`/chat/${id}?prompt=${encodeURIComponent(t + seed)}`);
 		} catch {
 			setBusy(false);
 		}
@@ -133,7 +152,17 @@ export function Home({ initialConfigured }: { initialConfigured: boolean }) {
 			    padding on any side; the canvas runs from the sidebar to the right
 			    edge and from the bottom to the top, under everything else. */}
 			<main className="absolute inset-0">
-				<GraphView />
+				<GraphView
+					chainSelectOpen={chainSelectOpen}
+					onChainSelected={(picked) => {
+						setPracticeProps((prev) => {
+							const byId = new Map(prev.map((p) => [p.id, p]));
+							for (const p of picked) byId.set(p.id, p);
+							return [...byId.values()];
+						});
+					}}
+					onChainSelectClose={() => setChainSelectOpen(false)}
+				/>
 			</main>
 
 			{/* Header floats over the graph — pointer-events-none except the
@@ -153,6 +182,25 @@ export function Home({ initialConfigured }: { initialConfigured: boolean }) {
 			    px-4) so nothing shifts when a session starts (owner). */}
 			<div className="pointer-events-none absolute inset-x-0 bottom-0 pb-5">
 				<div className="pointer-events-auto mx-auto w-full max-w-[46rem] px-4">
+					{/* The practice chip (owner, 2026-10-04): the graph-view
+					    entry — a count of the picked propositions, click opens
+					    the chain table as the picker. Quiet, left-aligned above
+					    the composer; teaching mode renders nothing. */}
+					{mode === "practice" && (
+						<div className="mb-2 flex justify-start">
+							<button
+								type="button"
+								data-testid="practice-props-chip"
+								onClick={() => setChainSelectOpen(true)}
+								className="flex items-center gap-1.5 rounded-full border border-border bg-card px-3 py-1.5 font-ui text-xs text-foreground transition-colors hover:border-muted-foreground/50"
+							>
+								<DumbbellIcon aria-hidden="true" className="size-3.5 text-muted-foreground" />
+								{practiceProps.length > 0
+									? `${practiceProps.length} ${practiceProps.length === 1 ? "proposition" : "propositions"} selected`
+									: "Pick propositions from the map"}
+							</button>
+						</div>
+					)}
 					{zeroKeys ? (
 						<ZeroKeysPill onOpen={() => setSetupOpen(true)} />
 					) : (
@@ -198,7 +246,7 @@ export function Home({ initialConfigured }: { initialConfigured: boolean }) {
 								void start();
 							}
 						}}
-						placeholder="What do you want to learn?"
+						placeholder={mode === "practice" ? "What do you want to practice?" : "What do you want to learn?"}
 						autoFocus
 						rows={1}
 						className="field-sizing-content lh-input max-h-48 min-h-10 flex-1 resize-none bg-transparent px-2.5 py-2 outline-none placeholder:text-muted-foreground"
@@ -221,6 +269,27 @@ export function Home({ initialConfigured }: { initialConfigured: boolean }) {
 					<StatsBar
 						dictationSlot={<DictationBar dictation={dictation} />}
 						turns={[] as TurnUsage[]}
+						leadingSlot={
+							<div className="flex items-center gap-0.5 rounded-md border border-border/60 bg-background p-0.5" data-testid="home-mode-switch">
+								{(["teach", "practice"] as const).map((m) => (
+									<button
+										key={m}
+										type="button"
+										data-testid={`home-mode-${m}`}
+										onClick={() => setMode(m)}
+										className={
+											"flex items-center gap-1 rounded-sm px-2 py-0.5 text-[11px] uppercase tracking-wider transition-colors " +
+											(mode === m
+												? "bg-accent text-foreground"
+												: "text-muted-foreground hover:text-foreground")
+										}
+									>
+										{m === "practice" ? <DumbbellIcon aria-hidden="true" className="size-3" /> : null}
+										{m === "teach" ? "Teach" : "Practice"}
+									</button>
+								))}
+							</div>
+						}
 					/>
 				</div>
 			</div>

components/new-session.tsx

@@ -36,13 +36,14 @@ const DOCK = "mx-auto w-full max-w-[46rem] px-4";
 export async function startDraftSession(
 	text: string,
 	fetchLike: typeof fetch,
+	mode?: "practice",
 ): Promise<string | null> {
 	const t = text.trim();
 	if (!t) return null;
 	const res = await fetchLike("/api/chats", {
 		method: "POST",
 		headers: { "Content-Type": "application/json" },
-		body: JSON.stringify({ title: t }),
+		body: JSON.stringify(mode === "practice" ? { title: t, kind: "practice" } : { title: t }),
 	});
 	const { id } = (await res.json()) as { id: string };
 	// No settings PUT on create (per-session models, owner 2026-09-28):
@@ -61,11 +62,16 @@ export function DraftShell({
 	onChange,
 	onSend,
 	setupCta,
+	mode = "teach",
 }: {
 	busy: boolean;
 	text: string;
 	onChange: (v: string) => void;
 	onSend: () => void;
+	/** The practice draft (owner, 2026-10-04): ?mode=practice — the
+	 *  created session carries kind:"practice" and the copy changes
+	 *  (the practice agent opens; no probing). */
+	mode?: "teach" | "practice";
 	/** The first-run CTA (fix wave chunk B): the same "Set up your models"
 	 *  affordance home carries, rendered above the draft shell — passed by
 	 *  NewSession, which owns the configured state and the SetupDialog. */
@@ -112,7 +118,9 @@ export function DraftShell({
 			    element, every surface — h-15, drag, sidebar reopen, lights
 			    gutter. h-15 (60px) matches the sidebar's wordmark band. */}
 			<TopBar>
-				<div className="min-w-0 flex-1 truncate font-title text-3xl tracking-tight">New session</div>
+				<div className="min-w-0 flex-1 truncate font-title text-3xl tracking-tight">
+					{mode === "practice" ? "New practice session" : "New session"}
+				</div>
 			</TopBar>
 
 				<div className="relative flex min-h-0 flex-1">
@@ -123,8 +131,12 @@ export function DraftShell({
 						<Conversation className="h-full min-w-0 flex-1" initial="instant">
 							<ConversationContent className="min-h-full gap-0 p-0">
 								<ConversationEmptyState
-									title="New session"
-									description="The teacher will open by probing what you already know."
+									title={mode === "practice" ? "New practice session" : "New session"}
+									description={
+										mode === "practice"
+											? "Describe what to practice — propositions, a chain, or a problem you brought."
+											: "The teacher will open by probing what you already know."
+									}
 								/>
 							</ConversationContent>
 						</Conversation>
@@ -147,7 +159,7 @@ export function DraftShell({
 										// input (owner refinement round, 2026-09-24) — no lesson has
 										// started yet, so the composer must not read like one is in
 										// flight.
-										placeholder="What do you want to learn?"
+										placeholder={mode === "practice" ? "What do you want to practice?" : "What do you want to learn?"}
 									/>
 								</div>
 								<StatsBar
@@ -163,7 +175,7 @@ export function DraftShell({
 	);
 }
 
-export function NewSession({ initialConfigured }: { initialConfigured: boolean }) {
+export function NewSession({ initialConfigured, mode = "teach" }: { initialConfigured: boolean; mode?: "teach" | "practice" }) {
 	const router = useRouter();
 	const [text, setText] = useState("");
 	/* The draft MIRROR ("nothing gets lost" round, 2026-10-01): the shell's
@@ -211,7 +223,7 @@ export function NewSession({ initialConfigured }: { initialConfigured: boolean }
 			return;
 		}
 		setBusy(true);
-		void startDraftSession(draft, fetch)
+		void startDraftSession(draft, fetch, mode === "practice" ? "practice" : undefined)
 			.then((target) => {
 				if (target) router.push(target);
 				else setBusy(false);
@@ -226,6 +238,7 @@ export function NewSession({ initialConfigured }: { initialConfigured: boolean }
 				text={text}
 				onChange={applyText}
 				onSend={send}
+				mode={mode}
 				setupCta={
 					zeroKeys ? (
 						<ZeroKeysPill onOpen={() => setSetupOpen(true)} />

components/sidebar.tsx

@@ -6,7 +6,7 @@ import { usePathname, useRouter } from "next/navigation";
 import { MenuShell } from "@/components/menu-shell";
 import { DeleteSessionDialog } from "@/components/delete-session-dialog";
 import type { ChatDeleteMode } from "@/src/core";
-import { PanelLeftCloseIcon, PanelLeftOpenIcon, PlusIcon, SearchIcon, SettingsIcon } from "lucide-react";
+import { DumbbellIcon, PanelLeftCloseIcon, PanelLeftOpenIcon, PlusIcon, SearchIcon, SettingsIcon } from "lucide-react";
 import { ActivitySection } from "@/components/activity-dock";
 import { CoverageMenuBlock } from "@/components/extraction-coverage";
 import { LhMark } from "@/components/lh-mark";
@@ -227,7 +227,7 @@ export function timeAgo(iso: string, now = new Date()): string {
  *  ever wanted. */
 function sessionMeta(chat: ChatListItem): string {
 	if (chat.pendingQuestion) return `Waiting for your answer · ${timeAgo(chat.updatedAt)}`;
-	if (chat.busy) return "Teacher is working…";
+	if (chat.busy) return (chat.kind ?? "teach") === "practice" ? "Practicing…" : "Teacher is working…";
 	return timeAgo(chat.updatedAt);
 }
 
@@ -265,6 +265,9 @@ export function SessionRow({
 			)}
 		>
 			<SessionStatus busy={chat.busy} />
+			{(chat.kind ?? "teach") === "practice" && (
+				<DumbbellIcon className="size-3.5 shrink-0 text-muted-foreground/70" aria-label="Practice session" />
+			)}
 			<span className="min-w-0 flex-1">
 				{/* Titles are the learner's/teacher's WORDS — Source Sans 3, the
 				    same voice the words were typed in (every input is lh-prose);
@@ -328,10 +331,25 @@ export function RenameRow({ chat, onCommit, onCancel }: { chat: ChatListItem; on
 	);
 }
 
+/** The three-way kind filter (practice sessions, owner 2026-10-04):
+ *  Teaching / All / Practice — a client-side filter over the same
+ *  snapshot, persisted in localStorage, defaulting to All. */
+export type SessionKindFilter = "teach" | "all" | "practice";
+const KIND_FILTER_KEY = "lh:session-kind-filter";
+
 function SessionsSidebar() {
 	const { open, toggle } = useSidebar();
 	const [chats, setChats] = useState<ChatListItem[] | null>(null);
 	const [query, setQuery] = useState("");
+	const [kindFilter, setKindFilter] = useState<SessionKindFilter>("all");
+	useEffect(() => {
+		const stored = window.localStorage.getItem(KIND_FILTER_KEY);
+		if (stored === "teach" || stored === "all" || stored === "practice") setKindFilter(stored);
+	}, []);
+	const setFilter = useCallback((f: SessionKindFilter) => {
+		setKindFilter(f);
+		window.localStorage.setItem(KIND_FILTER_KEY, f);
+	}, []);
 	const pathname = usePathname();
 	const router = useRouter();
 	const { open: openSettings } = useSettingsDialog();
@@ -346,10 +364,14 @@ function SessionsSidebar() {
 
 	const shown = useMemo(() => {
 		const q = query.trim().toLowerCase();
-		if (!chats) return chats;
-		if (!q) return chats;
-		return chats.filter((c) => c.title.toLowerCase().includes(q));
-	}, [chats, query]);
+		let list = chats;
+		if (list && kindFilter !== "all") {
+			list = list.filter((c) => (c.kind ?? "teach") === kindFilter);
+		}
+		if (!list) return list;
+		if (!q) return list;
+		return list.filter((c) => c.title.toLowerCase().includes(q));
+	}, [chats, query, kindFilter]);
 
 	const refreshInFlightRef = useRef(false);
 	const refresh = useCallback(async () => {
@@ -644,16 +666,51 @@ function SessionsSidebar() {
 					</Hint>
 				</div>
 
-				<button
-					type="button"
-					data-testid="new-session"
-					onClick={() => void newSession()}
-					className="mx-3 mb-1 flex items-center gap-1.5 rounded-md px-2 py-1.5 text-xs uppercase tracking-wider text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
-				>
-					<PlusIcon className="size-3" />
-					New session
-					<span className="sr-only">create a new session</span>
-				</button>
+				{/* Two doors (practice sessions, owner 2026-10-04): teaching
+				    keeps the original draft route; practice carries its mode. */}
+				<div className="mx-3 mb-1 flex gap-1.5">
+					<button
+						type="button"
+						data-testid="new-session"
+						onClick={() => void newSession()}
+						className="flex flex-1 items-center gap-1.5 rounded-md px-2 py-1.5 text-xs uppercase tracking-wider text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+					>
+						<PlusIcon className="size-3" />
+						Teaching
+						<span className="sr-only">create a new teaching session</span>
+					</button>
+					<button
+						type="button"
+						data-testid="new-session-practice"
+						onClick={() => router.push("/chat/new?mode=practice")}
+						className="flex flex-1 items-center gap-1.5 rounded-md px-2 py-1.5 text-xs uppercase tracking-wider text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+					>
+						<DumbbellIcon className="size-3" />
+						Practice
+						<span className="sr-only">create a new practice session</span>
+					</button>
+				</div>
+
+				{/* The three-way filter (owner, 2026-10-04): Teaching / All /
+				    Practice, quiet segmented, persisted client-side. */}
+				<div className="mx-3 mb-1.5 flex items-center gap-0.5 rounded-md border border-border/60 bg-background p-0.5" data-testid="session-kind-filter">
+					{(["teach", "all", "practice"] as const).map((f) => (
+						<button
+							key={f}
+							type="button"
+							data-testid={`kind-filter-${f}`}
+							onClick={() => setFilter(f)}
+							className={cn(
+								"flex-1 rounded-sm px-2 py-1 text-[11px] uppercase tracking-wider transition-colors",
+								kindFilter === f
+									? "bg-accent text-foreground"
+									: "text-muted-foreground hover:text-foreground",
+							)}
+						>
+							{f === "teach" ? "Teaching" : f === "all" ? "All" : "Practice"}
+						</button>
+					))}
+				</div>
 
 				<div className="mx-3 mb-1 flex items-center gap-2">
 					<span className="text-xs uppercase tracking-widest text-muted-foreground/70">Sessions</span>

components/stats-bar.tsx

@@ -30,6 +30,7 @@ export function StatsBar({
 	turns,
 	dictationSlot,
 	chatId,
+	leadingSlot,
 }: {
 	turns: TurnUsage[];
 	/** The bound session (per-session models, owner 2026-09-28): present
@@ -42,6 +43,10 @@ export function StatsBar({
 	 *  button lives there, and while recording the meter unfurls to fill
 	 *  whatever width the row has (owner placement). */
 	dictationSlot?: ReactNode;
+	/** The row's LEFT edge (practice sessions, 2026-10-04): the home
+	 *  composer's teach | practice switch rides here — before the session
+	 *  data (which renders nothing pre-chat on that surface). */
+	leadingSlot?: ReactNode;
 }) {
 	const [open, setOpen] = useState(false);
 	// Same dropdown discipline as the model control (owner, df4433f treatment,
@@ -94,6 +99,9 @@ export function StatsBar({
 			    outside-close ref anchors HERE too (owner, round 3): on the whole
 			    bar it wrapped the model control, so clicking model/thinking never
 			    counted as outside — the asymmetry the owner observed. */}
+			{/* The leading slot (2026-10-04): the leftmost control surface —
+			    the home composer's mode switch. */}
+			{leadingSlot}
 			{/* The left side: the session-data summary — only once a session
 			    exists (turns). Pre-chat renders nothing (see the header). */}
 			{turns.length > 0 && (