Kap reacts while you type and cheers your results

src/App.tsx

@@ -21,6 +21,8 @@ import { uploadRun } from "@/lib/cloud";
 import { canChallenge, challengeSnippet, getChallenge, type Challenge } from "@/lib/challenges";
 import { isProse, loadTextCorpus, TEXT_LANGUAGE_NAMES, passageSnippet, pickPassage, wordsSnippet, type TextCorpus, type TextLanguage } from "@/lib/text-practice";
 import { TextLanguagePicker } from "@/components/TextLanguagePicker";
+import { emitKap } from "@/lib/kap-events";
+import { KapBuddy } from "@/components/streak/KapBuddy";
 import { markOnboarded, OnboardingDialog, shouldOnboard, type OnboardingChoice } from "@/components/OnboardingDialog";
 import { ChallengeModeBanner, ChallengeResultBanner } from "@/components/ChallengeBanners";
 import { useGame, useKeyboardSound, useGhostRunner, useRankedGame, useDailyGame } from "@/hooks";
@@ -567,6 +569,13 @@ export default function App() {
         }
       }
 
+      // Kap nods along with each key and jumps at a typo.
+      if ((e.key.length === 1 || e.key === "Enter" || e.key === "Tab") && !e.ctrlKey && !e.metaKey && !e.altKey) {
+        const expectedChar = snippet.code[input.length];
+        const typed = e.key === "Enter" ? "\n" : e.key === "Tab" ? "\t" : e.key;
+        emitKap({ type: "key", error: typed === "\t" ? expectedChar !== "\t" && expectedChar !== " " : typed !== expectedChar });
+      }
+
       if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
         e.preventDefault();
         if (ranked.isRanked) ranked.recordKeypress();
@@ -806,6 +815,7 @@ export default function App() {
       <div className="relative mx-auto max-w-5xl px-4 py-8 sm:px-6 sm:py-14">
         <Header />
         <OnboardingDialog open={showOnboarding} languages={languages} onComplete={finishOnboarding} />
+        {!result && !editorFocusMode && !showOnboarding && <KapBuddy />}
 
         {result && daily.active && <DailyResultBanner status={daily.status} outcome={daily.outcome} error={daily.error} />}
         {result && activeChallenge && <ChallengeResultBanner challenge={activeChallenge} result={result} />}

src/components/ResultsScreen.tsx

@@ -13,6 +13,12 @@ import { rankRejectionReason, describeRankRejection } from "@/utils/ranking";
 import type { RankedStatus } from "@/hooks/useRankedGame";
 import { cn } from "@/lib/utils";
 import { PROSE_LANGUAGES } from "@/lib/text-practice";
+import { Kap3D } from "@/components/streak/Kap3D";
+import { KapMascot } from "@/components/streak/KapMascot";
+import { useKapLook } from "@/hooks/useKapLook";
+import { useStreak } from "@/hooks/useStreak";
+import { celebrationFor, celebrationLine } from "@/lib/kap-events";
+import { FLAME_TIERS } from "@/lib/streak";
 
 interface ResultsScreenProps {
   result: RunResult;
@@ -58,12 +64,31 @@ export function ResultsScreen({
   const rejection = rankRejectionReason(result);
 
   const tier = resultTier(result.wpm);
+  const kapLook = useKapLook();
+  const streak = useStreak();
+  const kapTier = streak.tier ?? FLAME_TIERS[1];
+  // Decided once per result, so a later re-render (e.g. Ranked verification) does not re-cheer.
+  const [cheer] = useState(() => celebrationFor(result, previousBest?.bestWpm ?? null, result.sourceType === "custom"));
   const username = user ? githubUsernameFromUser(user) : undefined;
 
   return (
     <div className="mt-8 flex animate-fade-in-up flex-col gap-6 max-w-3xl mx-auto">
       {/* Title & Badge */}
       <div className="text-center flex flex-col items-center gap-2">
+        <div className="flex items-end justify-center gap-1">
+          <Kap3D
+            mood="lit"
+            tier={kapTier}
+            look={kapLook}
+            height={150}
+            celebrate={cheer}
+            className="w-36"
+            fallback={<KapMascot mood="lit" tier={kapTier} look={kapLook} size={96} jump />}
+          />
+          <p className={cn("kap-bubble relative mb-16 max-w-48 rounded-2xl border bg-card px-3 py-2 text-left text-xs font-semibold shadow-sm", cheer === "pb" && "border-amber-500/50 text-amber-600 dark:text-amber-400")}>
+            {celebrationLine(cheer, result)}
+          </p>
+        </div>
         <div
           className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full border text-xs font-bold uppercase tracking-wider font-mono"
           style={{ color: tier.accent, borderColor: `${tier.accent}55`, backgroundColor: `${tier.accent}1a` }}

src/components/streak/Kap3D.tsx

@@ -3,45 +3,52 @@ import type { FlameTier } from "@/utils/flame-tiers";
 import type { KapLook } from "@/utils/kap-art";
 import type { StreakMood } from "@/lib/streak";
 import type { KapScene } from "./KapScene";
+import type { CelebrationLevel } from "@/lib/kap-events";
 
 interface Kap3DProps {
   mood: StreakMood;
   tier: FlameTier | null;
   look: KapLook;
   /** Height in px; the width fills the parent. */
   height: number;
-  /** Bounce along with keystrokes. */
-  typing?: boolean;
+  /** React to "codey:kap" events: keystrokes, typos, results. */
+  listen?: boolean;
+  /** Cheer once when shown, e.g. on the results screen. */
+  celebrate?: CelebrationLevel;
   /** Shown while three.js loads, and instead of it without WebGL. */
   fallback: ReactNode;
   className?: string;
 }
 
 /** Kap in 3D (three.js, loaded on demand): drag to spin, click to hop. */
-export function Kap3D({ mood, tier, look, height, typing = false, fallback, className }: Kap3DProps) {
+export function Kap3D({ mood, tier, look, height, listen = false, celebrate, fallback, className }: Kap3DProps) {
   const hostRef = useRef<HTMLDivElement>(null);
   const [state, setState] = useState<"loading" | "ready" | "failed">("loading");
-  const key = JSON.stringify({ mood, tier: tier?.id ?? null, look, typing });
+  const key = JSON.stringify({ mood, tier: tier?.id ?? null, look, listen, celebrate: celebrate ?? null });
 
   useEffect(() => {
     const host = hostRef.current;
     if (!host) return;
     let scene: KapScene | null = null;
     let cancelled = false;
-    const options = JSON.parse(key) as { mood: StreakMood; look: KapLook; typing: boolean };
+    const options = JSON.parse(key) as { mood: StreakMood; look: KapLook; listen: boolean; celebrate: CelebrationLevel | null };
+    let cheer = 0;
     void import("./KapScene")
       .then(({ KapScene }) => {
         if (cancelled) return;
         try {
-          scene = new KapScene(host, { ...options, tier });
+          scene = new KapScene(host, { mood: options.mood, look: options.look, listen: options.listen, tier });
           setState("ready");
+          const level = options.celebrate;
+          if (level) cheer = window.setTimeout(() => scene?.react({ type: "celebrate", level }), 450);
         } catch {
           setState("failed");
         }
       })
       .catch(() => setState("failed"));
     return () => {
       cancelled = true;
+      window.clearTimeout(cheer);
       scene?.dispose();
     };
     // The key covers every input; tier is read through it.

src/components/streak/KapBuddy.tsx

@@ -0,0 +1,44 @@
+import { useEffect, useState } from "react";
+import { X } from "lucide-react";
+import { useKapLook } from "@/hooks/useKapLook";
+import { useStreak } from "@/hooks/useStreak";
+import { BUDDY_EVENT, BUDDY_KEY, readBuddy, writeBuddy } from "@/lib/kap-buddy";
+import { SYNC_EVENT } from "@/lib/account-sync";
+import { FLAME_TIERS } from "@/lib/streak";
+import { Kap3D } from "./Kap3D";
+
+/** Kap in the corner while you practice: nods along, stokes his flame, jumps at typos. */
+export function KapBuddy() {
+  const [on, setOn] = useState(readBuddy);
+  const look = useKapLook();
+  const status = useStreak();
+
+  useEffect(() => {
+    const refresh = () => setOn(readBuddy());
+    const onStorage = (event: StorageEvent) => event.key === BUDDY_KEY && refresh();
+    window.addEventListener(BUDDY_EVENT, refresh);
+    window.addEventListener(SYNC_EVENT, refresh);
+    window.addEventListener("storage", onStorage);
+    return () => {
+      window.removeEventListener(BUDDY_EVENT, refresh);
+      window.removeEventListener(SYNC_EVENT, refresh);
+      window.removeEventListener("storage", onStorage);
+    };
+  }, []);
+
+  if (!on) return null;
+  return (
+    <div className="group fixed bottom-3 left-3 z-30 hidden w-32 select-none xl:block" aria-hidden>
+      <Kap3D mood="lit" tier={status.tier ?? FLAME_TIERS[1]} look={look} height={138} listen fallback={null} />
+      <button
+        type="button"
+        onClick={() => writeBuddy(false)}
+        className="absolute right-1 top-1 rounded-full border bg-background/80 p-1 text-muted-foreground opacity-0 transition-opacity hover:text-foreground group-hover:opacity-100 cursor-pointer"
+        aria-label="Hide Kap"
+        title="Hide Kap (turn him back on in the Wardrobe)"
+      >
+        <X className="size-3" />
+      </button>
+    </div>
+  );
+}