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

W5: probe/teach phases — divider + collapsed teach checks

Browse Source
This commit is contained in:
Amos
2026-08-22 10:26:51 +03:00
parent 6f1b35b2c2
commit 9a99b01159
7 changed files with 350 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/artifacts/plan-divider.tsx
+25 -5
View File
@@ -1,9 +1,29 @@
import type { ArtifactPartProps } from "@/src/core/contracts";
import type { ArtifactPartProps, PlanToolResult } from "@/src/core/contracts";
/**
* Phase divider rendered where plan_init lands in the transcript (W5).
* Probe → teach transition marker per vision §2 "Two phases".
* The probe→teach divider (vision §2 "Two phases, clearly separated").
*
* Rendered by the artifact registry wherever the session's plan_init part
* sits in the transcript — the plan call IS the transition marker, so the
* divider marks the seam: probing above, teaching below. Deliberately quiet:
* a hairline rule with a small chip, never a banner.
*
* Renders null until the tool's output is available AND the init succeeded —
* a failed first plan_init must not mark the seam (the retry that succeeds
* draws the divider at its own, correct spot).
*/
export function PlanDivider(_props: ArtifactPartProps) {
return null;
export function PlanDivider({ part }: ArtifactPartProps) {
if (part.state !== "output-available") return null;
const result = part.output as PlanToolResult | undefined;
if (!result || result.ok !== true) return null;
const nodeCount = result.tree?.nodes?.length ?? 0;
return (
<div className="my-4 flex w-full items-center gap-3" data-testid="plan-divider">
<span className="h-px flex-1 bg-border/80" />
<span className="rounded-full border border-border/80 px-2.5 py-0.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
Teaching{nodeCount > 0 ? ` · ${nodeCount} node${nodeCount === 1 ? "" : "s"}` : ""}
</span>
<span className="h-px flex-1 bg-border/80" />
</div>
);
}
components/chat.tsx
+42 -5
View File
@@ -23,6 +23,7 @@ import type { TeacherUIMessage } from "@/src/agent/ui-message";
import type { ArtifactPartProps } from "@/src/core/contracts";
import type { QuestionAnswerData } from "@/src/core/question-core";
import { findPendingJobCall, findPendingToolCall } from "@/src/core/pending";
import { phaseAt } from "@/src/core/phases";
/** One width for everything: transcript, cards, and the bottom blob share this column. */
const COLUMN = "mx-auto w-full max-w-3xl px-4";
@@ -105,6 +106,14 @@ export function Chat({
const pending = findPendingToolCall(messages);
const busy = status === "submitted" || status === "streaming";
// Teach-phase check (W5, vision §2 "two phases"): a pending question that
// lands after plan_init starts collapsed behind a "Check your
// understanding" reveal button; probe-phase questions auto-open as today.
// A pending question can never precede plan_init in the transcript (the
// teacher's turn ends at the question call), so the session's current
// phase IS the question's phase. Pre-plan sessions: all probe — unchanged.
const requiresReveal = pending !== null && phaseAt(messages) === "teach";
// A tool call still streaming its input: the teacher is writing a question.
// Shown as a transcript shimmer, exactly like the thinking indicator.
const questionStreaming =
@@ -224,6 +233,7 @@ export function Chat({
<DockOverlay
pending={pending}
requiresReveal={requiresReveal}
composer={
<Composer
busy={busy}
@@ -264,27 +274,45 @@ export function Chat({
*/
function DockOverlay({
pending,
requiresReveal,
composer,
onSubmitAnswer,
}: {
pending: ReturnType<typeof findPendingToolCall>;
/** Teach-phase pending question: arrives collapsed behind the reveal button (W5). */
requiresReveal: boolean;
composer: React.ReactNode;
onSubmitAnswer: (output: QuestionAnswerData) => void;
}) {
const { isAtBottom, scrollToBottom, scrollRef } = useStickToBottomContext();
const [expanded, setExpanded] = useState(true);
// Teach-phase mount (session reload with a pending check): the dock starts
// as the collapsed invitation too — the check must not pop open on reload.
const [expanded, setExpanded] = useState(!requiresReveal);
// Reveal state (W5): false until the learner clicks the invitation. While
// false, the scroll machine must NOT auto-expand at the bottom — the
// learner reads the teaching first and opens the check when ready. Once
// revealed, the normal collapse machine rules apply untouched.
const [revealed, setRevealed] = useState(false);
const revealPending = requiresReveal && !revealed;
const pendingId = pending?.toolCallId ?? null;
const initialPendingRef = useRef(pendingId);
// New question MID-SESSION: open expanded if the learner is following at
// the bottom (scroll to reveal it); reading history → arrive as the bar.
// On session mount the dock simply starts expanded at the bottom (the
// library's instant initial scroll positions us) — no scroll, no morph.
// Teach-phase checks ALWAYS arrive collapsed behind the reveal button,
// even at the bottom. On session mount the dock simply starts in its
// initial state (expanded for probe, invitation for teach) — no scroll, no
// morph.
useEffect(() => {
if (!pendingId || pendingId === initialPendingRef.current) return;
setExpanded(isAtBottom);
if (isAtBottom) void scrollToBottom();
if (requiresReveal) {
setRevealed(false);
setExpanded(false);
} else {
setExpanded(isAtBottom);
if (isAtBottom) void scrollToBottom();
}
// eslint-disable-next-line react-hooks/exhaustive-deps -- fire only when a NEW question lands
}, [pendingId]);
@@ -299,6 +327,10 @@ function DockOverlay({
expandedRef.current = expanded;
const pendingRef = useRef(!!pending);
pendingRef.current = !!pending;
const requiresRevealRef = useRef(requiresReveal);
requiresRevealRef.current = requiresReveal;
const revealedRef = useRef(revealed);
revealedRef.current = revealed;
const expandedHRef = useRef(0);
const collapsedHRef = useRef(42);
@@ -311,6 +343,7 @@ function DockOverlay({
const intentTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
const expandAndReveal = () => {
expandIntentRef.current = true;
setRevealed(true); // the teach-check invitation was accepted (W5)
setExpanded(true);
clearTimeout(intentTimerRef.current);
intentTimerRef.current = setTimeout(() => {
@@ -332,6 +365,9 @@ function DockOverlay({
if (expandedRef.current) {
if (d > delta + 64 && !expandIntentRef.current) setExpanded(false);
} else if (d < 16) {
// Teach checks stay collapsed until the learner opens them (W5): the
// at-bottom auto-expand would pop the form over the teaching.
if (requiresRevealRef.current && !revealedRef.current) return;
setExpanded(true);
void scrollToBottom();
}
@@ -397,6 +433,7 @@ function DockOverlay({
toolCallId={pending.toolCallId}
input={pending.input as never}
expanded={expanded}
reveal={revealPending}
onExpand={expandAndReveal}
onSubmit={onSubmitAnswer}
/>
components/question-dock.tsx
+44 -4
View File
@@ -1,7 +1,7 @@
"use client";
import { useMemo, useState } from "react";
import { ArrowDownIcon } from "lucide-react";
import { ArrowDownIcon, ChevronRightIcon, PlayIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { MessageResponse } from "@/components/ai-elements/message";
import { cn } from "@/lib/utils";
@@ -37,14 +37,28 @@ export interface QuestionDockProps {
input: QuizToolInput | AskToolInput;
/** Collapse state, owned by the DockOverlay (it drives the shell's height morph). */
expanded: boolean;
/**
* Teach-phase check awaiting its reveal (vision §2, W5): while collapsed,
* the bar is the "Check your understanding" invitation instead of the
* scroll-collapse strip. Owned by the DockOverlay; false once the learner
* has revealed (afterwards the normal collapse machine rules apply).
*/
reveal?: boolean;
onExpand: () => void;
onSubmit: (output: QuestionAnswerData) => void;
}
export function QuestionDock({ toolName, toolCallId, input, expanded, onExpand, onSubmit }: QuestionDockProps) {
export function QuestionDock({ toolName, toolCallId, input, expanded, reveal = false, onExpand, onSubmit }: QuestionDockProps) {
return (
<>
{!expanded && <QuestionDockBar toolName={toolName} question={input.question} onExpand={onExpand} />}
{!expanded && (
<QuestionDockBar
toolName={toolName}
question={input.question}
onExpand={onExpand}
variant={reveal ? "reveal" : "collapsed"}
/>
)}
<div className={expanded ? "dock-variant" : "invisible h-0 overflow-hidden"}>
<QuestionDockForm
toolName={toolName}
@@ -70,16 +84,42 @@ function teaserText(q: string): string {
.trim();
}
/** The collapsed strip: kind chip + question one-liner; click to answer. */
/** The collapsed strip. Two species (W5): "collapsed" is the scroll minimization
* (kind chip + one-liner + Answer ↓); "reveal" is the teach-check invitation —
* a distinct, more inviting affordance, because it asks the learner to start
* something, not to resume something. */
export function QuestionDockBar({
toolName,
question,
onExpand,
variant = "collapsed",
}: {
toolName: "quiz" | "ask_user_question";
question: string;
onExpand: () => void;
variant?: "collapsed" | "reveal";
}) {
if (variant === "reveal") {
return (
<button
type="button"
data-testid="teach-check-reveal"
onClick={onExpand}
className="dock-variant flex w-full items-center gap-3 px-4 py-3 text-left transition-colors hover:bg-accent/40"
>
<span className="flex size-7 shrink-0 items-center justify-center rounded-full bg-primary/15 text-primary">
<PlayIcon className="size-3.5" />
</span>
<span className="min-w-0 flex-1">
<span className="block text-sm font-medium">Check your understanding</span>
<span className="block truncate text-xs text-muted-foreground">{teaserText(question)}</span>
</span>
<span className="flex shrink-0 items-center gap-1 text-xs font-medium text-primary">
Open <ChevronRightIcon className="size-3.5" />
</span>
</button>
);
}
return (
<button
type="button"