In-session phase presentation: header chip + dotted boundary dividers
- components/phase-divider.tsx: PhaseChip (header, next to the session title: phase-colored dot + Probing/Planning/Teaching) and PhaseDivider (the transcript boundary: color-coded dotted rules + a small chip — 'Plan · N nodes' at the plan seam, 'Teaching' at the teach seam; probe never renders, phases only advance). planNodeCount reads the seam message's first plan tree. - chat.tsx: dividers render at MESSAGE boundaries (phaseTimeline, one linear fold) — the seam is the transition to the message's phase, so the seam message's prose sits below its divider. requiresReveal now uses phaseAt3 teach (an occupied node), so probe- AND plan-phase questions auto-open. - Retired the part-level plan-divider (artifact registry): the boundary is message-level, not part-level. Its tests replaced by render-phase-divider tests; core/phases gains tested phaseTimeline.
This commit is contained in:
Amos
@@ -2,7 +2,6 @@ import type { ComponentType } from "react";
|
||||
import type { ArtifactPartProps } from "@/src/core";
|
||||
import { DemoCard } from "@/components/artifacts/demo-card";
|
||||
import { JobCard } from "@/components/artifacts/job-card";
|
||||
import { PlanDivider } from "@/components/artifacts/plan-divider";
|
||||
import { VisualCard } from "@/components/artifacts/visual-card";
|
||||
|
||||
/**
|
||||
@@ -19,8 +18,9 @@ import { VisualCard } from "@/components/artifacts/visual-card";
|
||||
*/
|
||||
export const artifactRenderers: Record<string, ComponentType<ArtifactPartProps>> = {
|
||||
research: JobCard,
|
||||
// Phase divider where the plan lands (W5 fills in the component):
|
||||
plan_init: PlanDivider,
|
||||
// plan_* parts render nothing inline by design: the phase seam is a
|
||||
// message-level boundary, drawn by PhaseDivider in chat.tsx (the old
|
||||
// part-level plan_init divider retired with it).
|
||||
// Artifacts (W6 fills in the components):
|
||||
demo: DemoCard,
|
||||
visual: VisualCard,
|
||||
|
||||
@@ -1,29 +0,0 @@
|
||||
import type { ArtifactPartProps, PlanToolResult } from "@/src/core";
|
||||
|
||||
/**
|
||||
* 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({ 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>
|
||||
);
|
||||
}
|
||||
+23
-11
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { createContext, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
|
||||
import { createContext, Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
|
||||
import { useChat } from "@ai-sdk/react";
|
||||
import { DefaultChatTransport, isToolUIPart, lastAssistantMessageIsCompleteWithToolCalls } from "ai";
|
||||
import { useStickToBottomContext } from "use-stick-to-bottom";
|
||||
@@ -21,7 +21,8 @@ import { QuestionDock } from "@/components/question-dock";
|
||||
import { SidebarToggle } from "@/components/sidebar";
|
||||
import { TreePanel } from "@/components/tree-panel";
|
||||
import type { ArtifactPartProps, QuestionAnswerData, TeacherUIMessage } from "@/src/core";
|
||||
import { findPendingJobCall, findPendingToolCall, phaseAt } from "@/src/core";
|
||||
import { PhaseChip, PhaseDivider, planNodeCount } from "@/components/phase-divider";
|
||||
import { findPendingJobCall, findPendingToolCall, phaseAt3, phaseTimeline } from "@/src/core";
|
||||
|
||||
/** One width for everything: transcript, cards, and the bottom blob share this column. */
|
||||
const COLUMN = "mx-auto w-full max-w-3xl px-4";
|
||||
@@ -118,13 +119,18 @@ export function Chat({
|
||||
const localStream = status === "submitted" || status === "streaming";
|
||||
const busy = localStream || turnInFlight;
|
||||
|
||||
// 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";
|
||||
// Teach-phase check (W5, vision §2): a pending question that lands once a
|
||||
// plan node is OCCUPIED (phaseAt3 "teach") starts collapsed behind a
|
||||
// "Check your understanding" reveal button; probe- and plan-phase
|
||||
// questions auto-open as today. A pending question can never precede its
|
||||
// phase's seam in the transcript (the teacher's turn ends at the question
|
||||
// call), so the session's current phase IS the question's phase.
|
||||
const requiresReveal = pending !== null && phaseAt3(messages) === "teach";
|
||||
|
||||
// The phase at every message (one linear fold): the transcript draws a
|
||||
// color-coded dotted divider at each boundary; the header chip reads the
|
||||
// session's current phase.
|
||||
const phases = useMemo(() => phaseTimeline(messages), [messages]);
|
||||
|
||||
// A tool call still streaming its input: the teacher is writing a question.
|
||||
// Shown as a transcript shimmer, exactly like the thinking indicator.
|
||||
@@ -201,6 +207,7 @@ export function Chat({
|
||||
<header className="flex items-center gap-3 px-3 py-2">
|
||||
<SidebarToggle />
|
||||
<div className="min-w-0 flex-1 truncate font-medium">{title}</div>
|
||||
<PhaseChip phase={phases.at(-1) ?? "probe"} />
|
||||
</header>
|
||||
|
||||
{/* The session row: transcript scroller + the persistent plan-tree panel
|
||||
@@ -218,7 +225,11 @@ export function Chat({
|
||||
)}
|
||||
|
||||
{messages.map((m, mi) => (
|
||||
<Message key={m.id} from={m.role} className={m.role === "assistant" ? "max-w-full" : undefined}>
|
||||
<Fragment key={m.id}>
|
||||
{mi > 0 && phases[mi] !== phases[mi - 1] && (
|
||||
<PhaseDivider phase={phases[mi]!} nodeCount={planNodeCount(m)} />
|
||||
)}
|
||||
<Message from={m.role} className={m.role === "assistant" ? "max-w-full" : undefined}>
|
||||
<MessageContent className={m.role === "assistant" ? "w-full" : undefined}>
|
||||
{m.role === "user" ? (
|
||||
// User text renders plain: the model's LaTeX pipeline is not
|
||||
@@ -264,7 +275,8 @@ export function Chat({
|
||||
})
|
||||
)}
|
||||
</MessageContent>
|
||||
</Message>
|
||||
</Message>
|
||||
</Fragment>
|
||||
))}
|
||||
|
||||
{(status === "submitted" || turnInFlight) && <Shimmer className="text-sm">Thinking…</Shimmer>}
|
||||
|
||||
@@ -0,0 +1,99 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { Phase3 } from "@/src/core";
|
||||
|
||||
/**
|
||||
* The in-session phase presentation — the explicit face of what the picker
|
||||
* shows as a color strip (one color system everywhere, globals.css
|
||||
* --phase-*): the header chip next to the session title, and the dotted
|
||||
* boundary rule the transcript draws where the session moves into a new
|
||||
* phase. Replaces the old inline plan-divider (artifact registry): the
|
||||
* boundary is a MESSAGE-level seam, so chat.tsx renders it at the message
|
||||
* where the phase changes, not inside a tool part.
|
||||
*
|
||||
* Quiet register (matches the old divider): hairline rules, small chips —
|
||||
* never a banner. Probe never renders a divider: phases only advance, so
|
||||
* probe is the start of the transcript and "Planning"/"Teaching" are the two
|
||||
* visible seams.
|
||||
*/
|
||||
|
||||
/** Header-chip labels: the phases as the learner thinks of them. */
|
||||
const CHIP_LABEL: Record<Phase3, string> = {
|
||||
probe: "Probing",
|
||||
plan: "Planning",
|
||||
teach: "Teaching",
|
||||
};
|
||||
|
||||
const PHASE_DOT: Record<Phase3, string> = {
|
||||
probe: "bg-phase-probe",
|
||||
plan: "bg-phase-plan",
|
||||
teach: "bg-phase-teach",
|
||||
};
|
||||
|
||||
/** The header chip: a phase-colored dot + label next to the session title. */
|
||||
export function PhaseChip({ phase }: { phase: Phase3 }) {
|
||||
return (
|
||||
<span
|
||||
data-testid="phase-chip"
|
||||
data-phase={phase}
|
||||
title={`Session phase: ${CHIP_LABEL[phase]}`}
|
||||
className="flex shrink-0 items-center gap-1.5 rounded-full border border-border/80 px-2 py-0.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground"
|
||||
>
|
||||
<span className={cn("size-1.5 rounded-full", PHASE_DOT[phase])} aria-hidden />
|
||||
{CHIP_LABEL[phase]}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
/** Divider rule + chip colors per phase (probe never reaches here). */
|
||||
const DIVIDER_RULE: Partial<Record<Phase3, string>> = {
|
||||
plan: "border-phase-plan/50",
|
||||
teach: "border-phase-teach/50",
|
||||
};
|
||||
const DIVIDER_TEXT: Partial<Record<Phase3, string>> = {
|
||||
plan: "border-phase-plan/50 text-phase-plan",
|
||||
teach: "border-phase-teach/50 text-phase-teach",
|
||||
};
|
||||
|
||||
/**
|
||||
* The transcript boundary: a color-coded dotted rule at the message where
|
||||
* the session enters `phase`. The plan seam carries its node count ("Plan ·
|
||||
* 4 nodes"); teaching is just the label. Null for probe (defensive — the
|
||||
* fold never emits a probe transition after the start).
|
||||
*/
|
||||
export function PhaseDivider({ phase, nodeCount }: { phase: Phase3; nodeCount?: number }) {
|
||||
if (phase === "probe") return null;
|
||||
const label =
|
||||
phase === "plan" && nodeCount
|
||||
? `Plan · ${nodeCount} node${nodeCount === 1 ? "" : "s"}`
|
||||
: CHIP_LABEL[phase];
|
||||
return (
|
||||
<div className="my-4 flex w-full items-center gap-3" data-testid={`phase-divider-${phase}`}>
|
||||
<span className={cn("h-0 flex-1 border-t-2 border-dotted", DIVIDER_RULE[phase])} aria-hidden />
|
||||
<span
|
||||
className={cn(
|
||||
"rounded-full border px-2.5 py-0.5 text-[11px] font-medium uppercase tracking-wide",
|
||||
DIVIDER_TEXT[phase],
|
||||
)}
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
<span className={cn("h-0 flex-1 border-t-2 border-dotted", DIVIDER_RULE[phase])} aria-hidden />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* The node count for a plan seam: the first plan-op tree output in the
|
||||
* message that carries the seam (the plan_init that made the phase flip).
|
||||
* Structural slice of a UI message, same shape-of-shapes as core/phases.ts.
|
||||
*/
|
||||
export function planNodeCount(
|
||||
message: { parts: ReadonlyArray<{ type: string; state?: string; output?: unknown; [k: string]: unknown }> },
|
||||
): number | undefined {
|
||||
for (const part of message.parts) {
|
||||
if (!part.type.startsWith("tool-plan_") || part.state !== "output-available") continue;
|
||||
const tree = (part.output as { tree?: { nodes?: unknown[] } } | undefined)?.tree;
|
||||
if (tree && Array.isArray(tree.nodes) && tree.nodes.length > 0) return tree.nodes.length;
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
@@ -17,13 +17,14 @@ import { planNodeStatus, type PlanNode, type PlanNodeStatus, type PlanTree } fro
|
||||
* set_current / mark_done outputs flip the panel mid-session.
|
||||
*
|
||||
* The panel and the agent's tools share one object with two faces (agent
|
||||
* edits it, UI renders it) — the divider in the transcript (plan-divider)
|
||||
* marks the seam; THIS panel is the surface for every other plan_* part
|
||||
* (they render nothing inline, by design).
|
||||
* edits it, UI renders it) — the phase seam in the transcript
|
||||
* (PhaseDivider, message-level) marks the transition; THIS panel is the
|
||||
* surface for every plan_* part (they render nothing inline, by design).
|
||||
*
|
||||
* Quiet register (matches plan-divider): hairline border, muted text, one
|
||||
* highlighted row for the current position. Collapses to a thin rail; the
|
||||
* preference persists in localStorage. Hidden below `xl` (CSS-only).
|
||||
* Quiet register (matches the phase dividers): hairline border, muted
|
||||
* text, one highlighted row for the current position. Collapses to a thin
|
||||
* rail; the preference persists in localStorage. Hidden below `xl`
|
||||
* (CSS-only).
|
||||
*/
|
||||
|
||||
/** localStorage key for the collapse preference (matches lh:sidebar-open). */
|
||||
|
||||
Reference in New Issue
Block a user