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.
This commit is contained in:
amosblomqvist
2026-10-04 22:01:42 +03:00
parent 59bf5bf219
commit e76e42f764
9 changed files with 290 additions and 33 deletions
+10 -2
View File
@@ -15,8 +15,16 @@ export const dynamic = "force-dynamic";
* default); the session the first send creates is stamped from it * default); the session the first send creates is stamped from it
* server-side (per-session models, owner 2026-09-28). * server-side (per-session models, owner 2026-09-28).
*/ */
export default function NewSessionPage() { export default async function NewSessionPage({
searchParams,
}: {
searchParams: Promise<{ mode?: string }>;
}) {
const { mode } = await searchParams;
return ( return (
<NewSession initialConfigured={slotsConfigured(readSettingsRecord()?.models)} /> <NewSession
initialConfigured={slotsConfigured(readSettingsRecord()?.models)}
mode={mode === "practice" ? "practice" : "teach"}
/>
); );
} }
+21
View File
@@ -59,6 +59,7 @@ import {
ChevronDownIcon, ChevronDownIcon,
ChevronRightIcon, ChevronRightIcon,
ChevronUpIcon, ChevronUpIcon,
DumbbellIcon,
FolderIcon, FolderIcon,
FolderOpenIcon, FolderOpenIcon,
Trash2Icon, Trash2Icon,
@@ -113,6 +114,8 @@ export function ChainTableBody({
onClear, onClear,
onDelete, onDelete,
onClose, onClose,
selectMode,
onSelect,
}: { }: {
nodes: GraphNode[]; nodes: GraphNode[];
chains: GraphChain[]; chains: GraphChain[];
@@ -134,6 +137,11 @@ export function ChainTableBody({
/** Opens the full-death confirm dialog (owner, 2026-09-29 night). */ /** Opens the full-death confirm dialog (owner, 2026-09-29 night). */
onDelete: () => void; onDelete: () => void;
onClose: () => 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 byId = useMemo(() => new Map(nodes.map((n) => [n.id, n])), [nodes]);
const chains = useMemo(() => chainsForSelection(nodes, storedChains), [nodes, storedChains]); const chains = useMemo(() => chainsForSelection(nodes, storedChains), [nodes, storedChains]);
@@ -575,6 +583,11 @@ export function ChainTableOverlay({
sessions, sessions,
fileSources, fileSources,
onClose, 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; open: boolean;
nodes: GraphNode[]; nodes: GraphNode[];
@@ -582,6 +595,8 @@ export function ChainTableOverlay({
sessions: Record<string, string>; sessions: Record<string, string>;
fileSources: Record<string, string>; fileSources: Record<string, string>;
onClose: () => void; onClose: () => void;
selectMode?: boolean;
onConfirmSelection?: (nodes: GraphNode[]) => void;
}) { }) {
const [query, setQuery] = useState(""); const [query, setQuery] = useState("");
const [sort, setSort] = useState<ChainSort>({ col: "name", dir: 1 }); const [sort, setSort] = useState<ChainSort>({ col: "name", dir: 1 });
@@ -654,6 +669,12 @@ export function ChainTableOverlay({
onClear={() => setSelection(new Set())} onClear={() => setSelection(new Set())}
onDelete={() => setDeleteOpen(true)} onDelete={() => setDeleteOpen(true)}
onClose={onClose} onClose={onClose}
selectMode={selectMode}
onSelect={() => {
onConfirmSelection?.(selectedNodes);
setSelection(new Set());
onClose();
}}
/> />
</div> </div>
{deleteOpen && ( {deleteOpen && (
+27 -2
View File
@@ -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 containerRef = useRef<HTMLDivElement | null>(null);
const canvasRef = useRef<HTMLCanvasElement | null>(null); const canvasRef = useRef<HTMLCanvasElement | null>(null);
const cardRef = useRef<HTMLDivElement | 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) — // The chain table overlay (chains-overlay plan, 2026-09-29) —
// component-local: a browsing surface, not graph state. // component-local: a browsing surface, not graph state.
const [chainsOpen, setChainsOpen] = useState(false); 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(() => { useEffect(() => {
let cancelled = false; let cancelled = false;
fetch("/api/graph") fetch("/api/graph")
@@ -1678,7 +1695,15 @@ export function GraphView() {
chains={snapshot?.chains ?? []} chains={snapshot?.chains ?? []}
sessions={snapshot?.sessions ?? {}} sessions={snapshot?.sessions ?? {}}
fileSources={snapshot?.fileSources ?? {}} 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> /> </div>
); );
} }
+74 -5
View File
@@ -2,7 +2,7 @@
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { CornerDownLeftIcon } from "lucide-react"; import { CornerDownLeftIcon, DumbbellIcon } from "lucide-react";
import { GraphView } from "@/components/graph-view"; import { GraphView } from "@/components/graph-view";
import { SetupDialog } from "@/components/setup-dialog"; import { SetupDialog } from "@/components/setup-dialog";
import { useStrongKeyless, useZeroKeys, ZeroKeysPill } from "@/components/setup-cta"; import { useStrongKeyless, useZeroKeys, ZeroKeysPill } from "@/components/setup-cta";
@@ -65,6 +65,15 @@ export function Home({ initialConfigured }: { initialConfigured: boolean }) {
} }
}, [dictation.active]); }, [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 /* 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 * 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 * 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); setBusy(true);
try { 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", { const res = await fetch("/api/chats", {
method: "POST", method: "POST",
headers: { "Content-Type": "application/json" }, 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 }; const { id } = (await res.json()) as { id: string };
// No settings PUT on create (per-session models, owner // No settings PUT on create (per-session models, owner
// 2026-09-28): the SERVER stamps the newborn from the strong // 2026-09-28): the SERVER stamps the newborn from the strong
// slot — the same default this surface's model control edits. // 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 { } catch {
setBusy(false); 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 padding on any side; the canvas runs from the sidebar to the right
edge and from the bottom to the top, under everything else. */} edge and from the bottom to the top, under everything else. */}
<main className="absolute inset-0"> <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> </main>
{/* Header floats over the graph — pointer-events-none except the {/* 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). */} 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-none absolute inset-x-0 bottom-0 pb-5">
<div className="pointer-events-auto mx-auto w-full max-w-[46rem] px-4"> <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 ? ( {zeroKeys ? (
<ZeroKeysPill onOpen={() => setSetupOpen(true)} /> <ZeroKeysPill onOpen={() => setSetupOpen(true)} />
) : ( ) : (
@@ -198,7 +246,7 @@ export function Home({ initialConfigured }: { initialConfigured: boolean }) {
void start(); 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 autoFocus
rows={1} 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" 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 <StatsBar
dictationSlot={<DictationBar dictation={dictation} />} dictationSlot={<DictationBar dictation={dictation} />}
turns={[] as TurnUsage[]} 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>
</div> </div>
+20 -7
View File
@@ -36,13 +36,14 @@ const DOCK = "mx-auto w-full max-w-[46rem] px-4";
export async function startDraftSession( export async function startDraftSession(
text: string, text: string,
fetchLike: typeof fetch, fetchLike: typeof fetch,
mode?: "practice",
): Promise<string | null> { ): Promise<string | null> {
const t = text.trim(); const t = text.trim();
if (!t) return null; if (!t) return null;
const res = await fetchLike("/api/chats", { const res = await fetchLike("/api/chats", {
method: "POST", method: "POST",
headers: { "Content-Type": "application/json" }, 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 }; const { id } = (await res.json()) as { id: string };
// No settings PUT on create (per-session models, owner 2026-09-28): // No settings PUT on create (per-session models, owner 2026-09-28):
@@ -61,11 +62,16 @@ export function DraftShell({
onChange, onChange,
onSend, onSend,
setupCta, setupCta,
mode = "teach",
}: { }: {
busy: boolean; busy: boolean;
text: string; text: string;
onChange: (v: string) => void; onChange: (v: string) => void;
onSend: () => 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" /** The first-run CTA (fix wave chunk B): the same "Set up your models"
* affordance home carries, rendered above the draft shell — passed by * affordance home carries, rendered above the draft shell — passed by
* NewSession, which owns the configured state and the SetupDialog. */ * 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 element, every surface — h-15, drag, sidebar reopen, lights
gutter. h-15 (60px) matches the sidebar's wordmark band. */} gutter. h-15 (60px) matches the sidebar's wordmark band. */}
<TopBar> <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> </TopBar>
<div className="relative flex min-h-0 flex-1"> <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"> <Conversation className="h-full min-w-0 flex-1" initial="instant">
<ConversationContent className="min-h-full gap-0 p-0"> <ConversationContent className="min-h-full gap-0 p-0">
<ConversationEmptyState <ConversationEmptyState
title="New session" title={mode === "practice" ? "New practice session" : "New session"}
description="The teacher will open by probing what you already know." 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> </ConversationContent>
</Conversation> </Conversation>
@@ -147,7 +159,7 @@ export function DraftShell({
// input (owner refinement round, 2026-09-24) — no lesson has // input (owner refinement round, 2026-09-24) — no lesson has
// started yet, so the composer must not read like one is in // started yet, so the composer must not read like one is in
// flight. // flight.
placeholder="What do you want to learn?" placeholder={mode === "practice" ? "What do you want to practice?" : "What do you want to learn?"}
/> />
</div> </div>
<StatsBar <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 router = useRouter();
const [text, setText] = useState(""); const [text, setText] = useState("");
/* The draft MIRROR ("nothing gets lost" round, 2026-10-01): the shell's /* The draft MIRROR ("nothing gets lost" round, 2026-10-01): the shell's
@@ -211,7 +223,7 @@ export function NewSession({ initialConfigured }: { initialConfigured: boolean }
return; return;
} }
setBusy(true); setBusy(true);
void startDraftSession(draft, fetch) void startDraftSession(draft, fetch, mode === "practice" ? "practice" : undefined)
.then((target) => { .then((target) => {
if (target) router.push(target); if (target) router.push(target);
else setBusy(false); else setBusy(false);
@@ -226,6 +238,7 @@ export function NewSession({ initialConfigured }: { initialConfigured: boolean }
text={text} text={text}
onChange={applyText} onChange={applyText}
onSend={send} onSend={send}
mode={mode}
setupCta={ setupCta={
zeroKeys ? ( zeroKeys ? (
<ZeroKeysPill onOpen={() => setSetupOpen(true)} /> <ZeroKeysPill onOpen={() => setSetupOpen(true)} />
+73 -16
View File
@@ -6,7 +6,7 @@ import { usePathname, useRouter } from "next/navigation";
import { MenuShell } from "@/components/menu-shell"; import { MenuShell } from "@/components/menu-shell";
import { DeleteSessionDialog } from "@/components/delete-session-dialog"; import { DeleteSessionDialog } from "@/components/delete-session-dialog";
import type { ChatDeleteMode } from "@/src/core"; 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 { ActivitySection } from "@/components/activity-dock";
import { CoverageMenuBlock } from "@/components/extraction-coverage"; import { CoverageMenuBlock } from "@/components/extraction-coverage";
import { LhMark } from "@/components/lh-mark"; import { LhMark } from "@/components/lh-mark";
@@ -227,7 +227,7 @@ export function timeAgo(iso: string, now = new Date()): string {
* ever wanted. */ * ever wanted. */
function sessionMeta(chat: ChatListItem): string { function sessionMeta(chat: ChatListItem): string {
if (chat.pendingQuestion) return `Waiting for your answer · ${timeAgo(chat.updatedAt)}`; 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); return timeAgo(chat.updatedAt);
} }
@@ -265,6 +265,9 @@ export function SessionRow({
)} )}
> >
<SessionStatus busy={chat.busy} /> <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"> <span className="min-w-0 flex-1">
{/* Titles are the learner's/teacher's WORDS — Source Sans 3, the {/* Titles are the learner's/teacher's WORDS — Source Sans 3, the
same voice the words were typed in (every input is lh-prose); 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() { function SessionsSidebar() {
const { open, toggle } = useSidebar(); const { open, toggle } = useSidebar();
const [chats, setChats] = useState<ChatListItem[] | null>(null); const [chats, setChats] = useState<ChatListItem[] | null>(null);
const [query, setQuery] = useState(""); 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 pathname = usePathname();
const router = useRouter(); const router = useRouter();
const { open: openSettings } = useSettingsDialog(); const { open: openSettings } = useSettingsDialog();
@@ -346,10 +364,14 @@ function SessionsSidebar() {
const shown = useMemo(() => { const shown = useMemo(() => {
const q = query.trim().toLowerCase(); const q = query.trim().toLowerCase();
if (!chats) return chats; let list = chats;
if (!q) return chats; if (list && kindFilter !== "all") {
return chats.filter((c) => c.title.toLowerCase().includes(q)); list = list.filter((c) => (c.kind ?? "teach") === kindFilter);
}, [chats, query]); }
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 refreshInFlightRef = useRef(false);
const refresh = useCallback(async () => { const refresh = useCallback(async () => {
@@ -644,16 +666,51 @@ function SessionsSidebar() {
</Hint> </Hint>
</div> </div>
<button {/* Two doors (practice sessions, owner 2026-10-04): teaching
type="button" keeps the original draft route; practice carries its mode. */}
data-testid="new-session" <div className="mx-3 mb-1 flex gap-1.5">
onClick={() => void newSession()} <button
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" type="button"
> data-testid="new-session"
<PlusIcon className="size-3" /> onClick={() => void newSession()}
New session 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"
<span className="sr-only">create a new session</span> >
</button> <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"> <div className="mx-3 mb-1 flex items-center gap-2">
<span className="text-xs uppercase tracking-widest text-muted-foreground/70">Sessions</span> <span className="text-xs uppercase tracking-widest text-muted-foreground/70">Sessions</span>
+8
View File
@@ -30,6 +30,7 @@ export function StatsBar({
turns, turns,
dictationSlot, dictationSlot,
chatId, chatId,
leadingSlot,
}: { }: {
turns: TurnUsage[]; turns: TurnUsage[];
/** The bound session (per-session models, owner 2026-09-28): present /** 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 * button lives there, and while recording the meter unfurls to fill
* whatever width the row has (owner placement). */ * whatever width the row has (owner placement). */
dictationSlot?: ReactNode; 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); const [open, setOpen] = useState(false);
// Same dropdown discipline as the model control (owner, df4433f treatment, // 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 outside-close ref anchors HERE too (owner, round 3): on the whole
bar it wrapped the model control, so clicking model/thinking never bar it wrapped the model control, so clicking model/thinking never
counted as outside — the asymmetry the owner observed. */} 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 {/* The left side: the session-data summary — only once a session
exists (turns). Pre-chat renders nothing (see the header). */} exists (turns). Pre-chat renders nothing (see the header). */}
{turns.length > 0 && ( {turns.length > 0 && (
+37
View File
@@ -108,3 +108,40 @@ describe("DraftShell — the sessionless surface", () => {
assert.ok(!/\/chat\/c[a-z0-9_]+/.test(html)); assert.ok(!/\/chat\/c[a-z0-9_]+/.test(html));
}); });
}); });
describe("the practice draft (?mode=practice, 2026-10-04)", () => {
it("the shell swaps copy: practice title, empty state, placeholder", () => {
const html = renderToStaticMarkup(
<DraftShell
busy={false}
text=""
onChange={() => {}}
onSend={() => {}}
mode="practice"
/>,
);
assert.match(html, /New practice session/);
assert.match(html, /Describe what to practice/);
assert.match(html, /What do you want to practice\?/);
});
it("startDraftSession carries kind:\"practice\" to the create route", async () => {
let body: Record<string, unknown> | null = null;
const f = (async (_url: string, init?: RequestInit) => {
body = JSON.parse(String(init?.body));
return new Response(JSON.stringify({ id: "c9" }), { status: 201 });
}) as unknown as typeof fetch;
const target = await startDraftSession("the parity chain", f, "practice");
assert.equal(target, "/chat/c9?prompt=the%20parity%20chain");
assert.deepEqual(body, { title: "the parity chain", kind: "practice" });
});
it("the teaching default is unchanged — no kind key on the wire", async () => {
let body: Record<string, unknown> | null = null;
const f = (async (_url: string, init?: RequestInit) => {
body = JSON.parse(String(init?.body));
return new Response(JSON.stringify({ id: "c8" }), { status: 201 });
}) as unknown as typeof fetch;
await startDraftSession("orbital mechanics", f);
assert.deepEqual(body, { title: "orbital mechanics" });
});
});
+19
View File
@@ -117,3 +117,22 @@ describe("timeAgo", () => {
assert.equal(timeAgo("2026-01-02T12:01:00.000Z", now), "just now"); assert.equal(timeAgo("2026-01-02T12:01:00.000Z", now), "just now");
}); });
}); });
describe("SessionRow practice badge (practice sessions, 2026-10-04)", () => {
it("a practice row carries the dumbbell badge and the Practicing meta while busy", () => {
const html = render(item({ kind: "practice", busy: true }));
assert.match(html, /Practicing…/);
assert.match(html, /aria-label="Practice session"/);
});
it("a teaching row carries neither", () => {
const html = render(item({}));
assert.doesNotMatch(html, /Practice session/);
assert.doesNotMatch(html, /Practicing…/);
});
it("busy teaching rows still say the teacher is working", () => {
const html = render(item({ busy: true }));
assert.match(html, /Teacher is working…/);
});
});