← All posts

v0.3.3 — Interactive Quizzes, Scene Storyboards, and Dark Mode Fixes

Quizzes render as live forms inside chat. Animation storyboards become navigable scene cards. Dark mode contrast fixed across retro pages. Chat viewport no longer overflows.

Keating 0.3.3 brings interactive teaching artifacts directly into the chat stream. Quizzes render as live forms with multiple-choice, fill-in-the-blank, true/false, and open-ended questions. Animation storyboards become navigable scene cards. Dark mode on the retro landing pages no longer shows black-on-black text.

Interactive Quiz Tool UI

When the model calls quiz, the returned content now includes an inline <keating-quiz /> tag that the chat panel parses and renders into a live form. Each question type is handled with the right interaction pattern:

  • Multiple choice: radio-style options
  • Fill in the blank: textareas that strip and compare against the correct answer
  • True / False: paired toggle buttons
  • Short answer / transfer: open text fields with rubrics shown after submission

After pressing Submit, every question shows whether the answer is correct, reveals the right answer, displays the explanation, and surfaces the rubric. A Retake button resets the form. The quiz engine now generates fill_in and true_falsequestions alongside the existing types so the UI sees real variety.

Interactive Animated Scenes

The animate tool now emits a <keating-animation />tag carrying a structured AnimationPayload: an ordered list of frames, each with typed visual elements (boxes, circles, labels, icons) at explicit coordinates and connectors (arrows, dashed lines, bidirectional links) between them. The newAnimatedScene component renders these as a real, animated SVG diagram that fades elements in and out, interpolates positions between frames, draws arrows, pulses highlighted nodes, and auto-advances. Play / pause / scrub controls and a frame timeline live in the sidebar. Animations can also include a follow-up CTA on the last frame that hands off to an OpenUIQuestion or Quiz for a check-your-understanding interaction in the same chat flow.

Dark Mode Contrast Fix

Hardcoded hex colors (#1c211b, #64748b,#f1ece0) on the landing, tutorial, blog, paper, and footer pages have been replaced with theme-aware Tailwind classes (border-border, text-muted-foreground, etc.). Text and dividers now adapt automatically between light and dark modes.

Chat Viewport Fix

The .chat-page-panel was display: block, which broke flex height propagation. Messages pushed the composer outside the viewport. Switched to display: flex; flex-direction: column; height: 100% so the scroll area stays bounded.

Version Sync Script

A new scripts/sync-version.mjs utility reads the rootpackage.json version and enforces it across the web package, the CLI extension, and hardcoded web strings. Run it with--check in CI or without flags to auto-update.

The v0.3.3 build compiles cleanly, all 18 tests pass, and the monorepo version strings are aligned.