UI iteration 2: toggleable sidebar, floating composer blob, pending-question morph

Sidebar (replaces the modal drawer):
- Inline, toggleable, no backdrop/focus theft — can stay open while working
- Open state persists across pages (provider in root layout) and reloads
  (localStorage; starts closed server-side to avoid hydration mismatch,
  stored value applied post-mount; default open on first run)
- Hamburger in page headers only when closed; close button in sidebar header

Floating composer blob (per reference screenshot):
- Floats over the transcript (absolute overlay), persists at bottom while
  scrolling, content fades behind it (gradient mask); pb-44 scroll clearance
- Concentric corner radii: blob rounded-2xl(16px) − p-1.5(6px) = send
  rounded-[10px] = 25% of the 40px button; CornerDownLeft icon per reference
- Stop moved from header into the blob (busy → square icon)
- prompt-input.tsx + 7 orphan ui files pruned (attachments/command palette
  unused); hand-rolled Composer is ~100 lines and render-tested

Pending-question morph (one text field on screen, never two):
- Quiz/ask-select pending → blob becomes the note field (send hidden, hint
  line above); card's internal note input removed; Submit consumes it
- Ask free-text pending → blob becomes the answer field; its send submits
  via the card's registered submit api (ref bridge); Enter works
- Chat owns the single text state; card clears it on submit
- canSend for answer mode mirrors the card predicate directly — reading the
  ref during render lagged one commit (found in browser testing)

Widths: one shared column (max-w-3xl + px-4) for transcript, cards, and
composer — all three measured pixel-identical (left 416, width 736).
Assistant Message max-w-full/MessageContent w-full (was max-w-[95%]/w-fit —
the 'cards are a bit shorter' bug).

User messages render plain text again — no math pipeline on learner-authored
text (currency hazard accepted for the model only, guarded by the prompt).

Tests: 58 pass (5 new composer pins; card tests updated to controlled
props). Verified live: note flow, answer flow, sidebar persistence, float,
fade, zero console errors — plus the live model spontaneously honoring the
$ currency escape contract in a continuation.
This commit is contained in:
Amos
2026-08-22 04:28:13 +03:00
parent 46d71380fa
commit 0baa00e418
19 changed files with 523 additions and 2754 deletions
+7 -4
View File
@@ -44,7 +44,7 @@ function quizQD(): QuestionData {
describe("render smoke tests", () => {
it("QuizCard renders question, options, and the automatic 'I don't know'", () => {
const html = renderToStaticMarkup(
<QuizCard toolName="quiz" toolCallId="q1" input={quizInput} onSubmit={() => {}} />,
<QuizCard toolName="quiz" toolCallId="q1" input={quizInput} onSubmit={() => {}} pendingText="" onPendingTextChange={() => {}} />,
);
assert.match(html, /Which planet is closest to the sun\?/);
assert.match(html, /Mercury/);
@@ -56,22 +56,25 @@ describe("render smoke tests", () => {
it("QuizCard never leaks the explanation or the correct answer before submit", () => {
const html = renderToStaticMarkup(
<QuizCard toolName="quiz" toolCallId="q1" input={quizInput} onSubmit={() => {}} />,
<QuizCard toolName="quiz" toolCallId="q1" input={quizInput} onSubmit={() => {}} pendingText="" onPendingTextChange={() => {}} />,
);
assert.ok(!html.includes("innermost"), "explanation must not render pre-answer");
});
it("ask card renders Other + note and no grading affordance", () => {
it("ask card renders Other, no note field (note lives in the composer), no grading", () => {
const html = renderToStaticMarkup(
<QuizCard
toolName="ask_user_question"
toolCallId="a1"
input={{ question: "How confident are you?", options: [{ label: "Very" }, { label: "Somewhat" }] }}
onSubmit={() => {}}
pendingText=""
onPendingTextChange={() => {}}
/>,
);
assert.match(html, /Other/);
assert.ok(!html.includes("I don&#x27;t know"), "ask has no 'I don't know'");
assert.ok(!html.includes("Add a note"), "note field moved to the composer blob");
});
it("AnsweredCard grades quiz answers (✓/✗ + explanation)", () => {
@@ -141,7 +144,7 @@ describe("math rendering (streamdown + KaTeX)", () => {
explanation: "The power rule gives $\\frac{dy}{dx} = 2x$.",
};
const pendingHtml = renderToStaticMarkup(
<QuizCard toolName="quiz" toolCallId="m1" input={mathQuiz} onSubmit={() => {}} />,
<QuizCard toolName="quiz" toolCallId="m1" input={mathQuiz} onSubmit={() => {}} pendingText="" onPendingTextChange={() => {}} />,
);
assert.ok(pendingHtml.includes("katex"), "pending card: question/options math renders");