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:
+10
-2
@@ -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"}
|
||||||
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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 && (
|
||||||
|
|||||||
@@ -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
@@ -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>
|
||||||
|
|||||||
@@ -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
@@ -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>
|
||||||
|
|||||||
@@ -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 && (
|
||||||
|
|||||||
@@ -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" });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|||||||
@@ -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…/);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user