Easter Eggs Consolidation & Overhaul

README.md

@@ -52,7 +52,7 @@ self-contained under `src/features/` and surfaced through dedicated routes:
 - **Insights — Knowledge Gaps** — AI-detected missing documentation per component, with severity (high / medium / low), component owners, and refresh tracking.
 - **Insights — FAQ** — AI-generated clusters of frequently asked questions and the documents that answer them.
 - **Settings & Profile** — Central configuration hub with tabs for user profile management (avatar, display name, password update), appearance (light/dark/system theme), chat preferences, moments toggles, and access tokens (GitHub PAT / Jira credential management for authorized roles).
-- **Moments & Easter Eggs** — Gamified celebrations (confetti, achievement moments, sound effects) and interactive easter eggs (`dino`, `game2048`, `space-invaders`).
+- **Moments & Easter Eggs** — Gamified celebrations (confetti, achievement moments, sound effects) and interactive easter eggs (the dino waiting-game, `2048` behind the dashboard header icon, Space Invaders behind the 404 page's rocket).
 
 ---
 
@@ -70,18 +70,16 @@ src/
 │   ├── connectors/      # Connector + source allow/deny management
 │   ├── dashboard/       # Dashboard hero & NextStepWidget
 │   ├── data-ingestion/  # Sources, ingestion runs, artifact tables
-│   ├── dino/            # Dino easter-egg mini game
-│   ├── easter-eggs/     # Easter-egg trigger hooks & modals
+│   ├── easter-eggs/     # Easter eggs: egg shell + game registry, the
+│   │                    # effect bus, phrases and the dino waiting-game
 │   ├── faq/             # AI FAQ clusters (insights)
-│   ├── game2048/        # 2048 easter-egg mini game
 │   ├── knowledge-base/  # Artifact browsing + streamed summaries + file upload
 │   ├── knowledge-gaps/  # AI-detected documentation gaps (insights)
 │   ├── moments/         # Celebrations, confetti, rocket animations
 │   ├── onboarding/      # AI onboarding paths, knowledge checks, skip workflow
 │   ├── profile/         # Profile form components
 │   ├── projects/        # Multi-project switching & global ProjectContext
 │   ├── settings/        # User settings tabs, themes & credentials
-│   ├── space-invaders/  # Space Invaders easter-egg mini game
 │   └── team-management/ # Team overview, member detail, Skill Wizard
 ├── pages/               # Route-level views (one per user-facing flow)
 ├── router/              # React Router v7 config + AuthGuard

public/easter-eggs/2048.html

@@ -1000,6 +1000,13 @@
             const mapped = keyMap[event.key];
 
             if (!modifiers) {
+              if (event.key === "Escape") {
+                try {
+                  window.parent.postMessage({ type: "EGG_EXIT" }, window.location.origin);
+                } catch (_) {}
+                return;
+              }
+
               if (mapped !== undefined) {
                 event.preventDefault();
                 // Ignore auto-repeat key events so holding an arrow doesn't

src/App.tsx

@@ -18,6 +18,7 @@ import { SelectionActions } from "./features/board/selection/SelectionActions";
 import { CardMarksProvider } from "./features/board/marks/CardMarksProvider";
 import { useAuth } from "./context/useAuth";
 import { AuroraBackground } from "./components/layout/AuroraBackground";
+import { EggEffectsLayer } from "./features/easter-eggs/components/EggEffectsLayer";
 import { MyKnowledgeGapsProvider } from "./features/knowledge-gaps/MyKnowledgeGapsProvider";
 import { KnowledgeGapOwnerAnnouncement } from "./features/knowledge-gaps/components/KnowledgeGapOwnerAnnouncement";
 import { useScrollRestoration } from "./hooks/useScrollRestoration";
@@ -139,6 +140,12 @@ function AppContent() {
           sits on top of the login screen, and off unless turned on in
           Settings (see AppearanceSection). */}
         {signedIn && showRocketPet && <RocketPet />}
+
+        {/* Whole-window egg effects (barrel roll, matrix rain), rendered
+          once for the whole app. Any chat surface fires them through the
+          bus (playEggEffect); this is where they actually draw. Not gated
+          on signedIn: a fired effect must always have its renderer. */}
+        <EggEffectsLayer />
       </div>
     </BuddyProvider>
   );

src/components/layout/PageHeader.tsx

@@ -4,7 +4,7 @@ import type { LucideIcon } from "lucide-react";
 type PageHeaderProps = {
   icon: LucideIcon;
   title: string;
-  subtitle: string;
+  subtitle?: string;
   actions?: ReactNode;
   className?: string;
   /**
@@ -13,50 +13,72 @@ type PageHeaderProps = {
    * where the subtitle is secondary. `undefined` keeps the subtitle always visible.
    */
   hideSubtitleBelow?: "sm" | "md" | "lg";
+  /** Optional click handler for the header icon (e.g., for easter eggs). */
+  onIconClick?: () => void;
   /**
-   * Optional click handler for the header icon (e.g., for easter eggs).
+   * Marks the icon as hiding an easter egg: it grows slightly on hover and
+   * plays a one-shot glow pulse on mount. Purely decorative, so it is not
+   * reflected in the accessible name; users who prefer reduced motion get
+   * neither effect (see the page-header-icon rules in styles/index.css).
    */
-  onIconClick?: () => void;
+  eggHint?: boolean;
+  /**
+   * Optional popover or speech bubble anchored directly to the header icon
+   * (e.g. for easter-egg hints or status badges).
+   */
+  iconPopover?: ReactNode;
 };
 
 export function PageHeader({
   icon: Icon,
   title,
-  subtitle,
+  subtitle = "",
   actions,
   className = "",
   hideSubtitleBelow,
   onIconClick,
+  eggHint = false,
+  iconPopover,
 }: PageHeaderProps) {
   return (
     <div className={className}>
       <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
         <div className="min-w-0">
           <div className="flex min-w-0 items-center gap-3">
             {onIconClick ? (
-              <button
-                onClick={onIconClick}
-                className="rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-app-brand"
-                aria-label={`${title} icon`}
-              >
-                <Icon className="h-6 w-6 shrink-0 text-app-brand-text transition-transform active:scale-95" />
-              </button>
+              <div className="relative inline-flex shrink-0">
+                <button
+                  type="button"
+                  onClick={onIconClick}
+                  data-egg-hint={eggHint ? "true" : undefined}
+                  className="page-header-icon-button rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-app-brand"
+                  aria-label={`${title} icon`}
+                >
+                  <Icon className="page-header-icon h-6 w-6 shrink-0 text-app-brand-text transition-transform active:scale-95" />
+                </button>
+                {iconPopover}
+              </div>
             ) : (
-              <Icon className="h-6 w-6 shrink-0 text-app-brand-text" />
+              <div className="relative inline-flex shrink-0">
+                <Icon className="h-6 w-6 shrink-0 text-app-brand-text" />
+                {iconPopover}
+              </div>
             )}
 
             <h1 className="min-w-0 text-xl leading-tight font-semibold text-app-text sm:text-2xl">
               {title}
             </h1>
           </div>
 
-          <p
-            className={`mt-2 max-w-2xl text-sm leading-6 text-app-text-subtle ${
-              hideSubtitleBelow ? `hidden ${hideSubtitleBelow}:block` : ""
-            }`}
-          >
-            {subtitle}
-          </p>
+          {subtitle ? (
+            <p
+              className={`mt-2 max-w-2xl text-sm leading-6 text-app-text-subtle ${
+                hideSubtitleBelow ? `hidden ${hideSubtitleBelow}:block` : ""
+              }`}
+            >
+              {subtitle}
+            </p>
+          ) : null}
         </div>
 
         {actions ? (

src/components/layout/SidebarLogo.tsx

@@ -1,8 +1,59 @@
-import { motion, useReducedMotion, type Variants } from "framer-motion";
+import { useState } from "react";
+import { motion, useReducedMotion, type TargetAndTransition, type Variants } from "framer-motion";
+import { useRepeatClicks } from "../../features/easter-eggs/hooks/useRepeatClicks";
+import { hoverSpringToken, logoHopSpringToken } from "../../styles/tokens";
 
 const BADGE_SIZE = 44;
 const MARK_SIZE = 28;
 
+/**
+ * How far the badge falls before it hits the floor. Chosen to clear the
+ * header row visually (parents are overflow-visible) so the drop reads as
+ * "fell past its shelf, bounced, hopped back" without portals or measured
+ * rects — a fixed translateY keeps the effect layout-independent.
+ */
+const DROP_DISTANCE = 140;
+
+/**
+ * The gravity choreography, one entry per phase. Each phase animates the
+ * whole badge; `onAnimationComplete` walks idle → falling → impact →
+ * bouncing → hopping → idle, so every beat lands exactly when the previous
+ * one finishes instead of relying on hand-tuned delays.
+ */
+const DROP_PHASES: Record<Exclude<DropPhase, "idle">, TargetAndTransition> = {
+  // Gravity accelerates: easeIn, with a slight forward tumble.
+  falling: { y: DROP_DISTANCE, rotate: 6, transition: { duration: 0.45, ease: "easeIn" } },
+  // Sideways squash on impact — the classic cartoon beat.
+  impact: {
+    scaleX: 1.14,
+    scaleY: 0.8,
+    rotate: 0,
+    transition: { duration: 0.09, ease: "easeOut" },
+  },
+  // Two diminishing bounces; each landing re-squashes a little less.
+  bouncing: {
+    y: [DROP_DISTANCE, 94, DROP_DISTANCE, 119, DROP_DISTANCE],
+    scaleX: [1.14, 1.02, 1.1, 1.03, 1.1],
+    scaleY: [0.8, 1, 0.87, 1, 0.93],
+    transition: {
+      duration: 0.62,
+      times: [0, 0.26, 0.5, 0.74, 1],
+      ease: ["easeOut", "easeIn", "easeOut", "easeIn"],
+    },
+  },
+  // Spring back to the shelf with a small overshoot, rotation settling.
+  hopping: {
+    y: 0,
+    scaleX: 1,
+    scaleY: 1,
+    rotate: 0,
+    transition: logoHopSpringToken,
+  },
+};
+
+/** The gravity sequence phases: idle at rest, then falling → impact → bouncing → hopping. */
+type DropPhase = "idle" | "falling" | "impact" | "bouncing" | "hopping";
+
 /**
  * Where the exhaust meets the body, in viewBox units. The flame scales from
  * here so the plume grows away from the engine instead of stretching from its
@@ -29,13 +80,31 @@ const NOZZLE_ORIGIN = { transformOrigin: "7px 17px", transformBox: "view-box" }
 export function SidebarLogo({ className = "" }: { className?: string }) {
   const prefersReducedMotion = useReducedMotion();
 
+  // The gravity easter egg: five clicks drop the badge off its shelf.
+  // Reduced motion skips the animation entirely (pure motion has no honest
+  // static equivalent) — the counter still consumes, nothing plays.
+  const [dropPhase, setDropPhase] = useState<DropPhase>("idle");
+  const handleLogoClick = useRepeatClicks(5, () => {
+    if (!prefersReducedMotion && dropPhase === "idle") setDropPhase("falling");
+  });
+
+  /** Walks the choreography forward as each beat's animation completes. */
+  const advanceDrop = () => {
+    setDropPhase((current) => {
+      if (current === "falling") return "impact";
+      if (current === "impact") return "bouncing";
+      if (current === "bouncing") return "hopping";
+      return "idle";
+    });
+  };
+
   const badgeVariants: Variants = prefersReducedMotion
     ? { rest: {}, lift: {} }
     : {
         rest: { scale: 1 },
         lift: {
           scale: 1.08,
-          transition: { type: "spring", stiffness: 400, damping: 16 },
+          transition: hoverSpringToken,
         },
       };
 
@@ -51,7 +120,7 @@ export function SidebarLogo({ className = "" }: { className?: string }) {
         lift: {
           x: 1.5,
           y: -1.5,
-          transition: { type: "spring", stiffness: 420, damping: 14 },
+          transition: hoverSpringToken,
         },
       };
 
@@ -94,11 +163,29 @@ export function SidebarLogo({ className = "" }: { className?: string }) {
   return (
     <motion.div
       initial="rest"
-      animate="rest"
-      whileHover="lift"
+      animate={dropPhase === "idle" ? "rest" : DROP_PHASES[dropPhase]}
+      // Hover lift is suppressed while the gravity sequence plays so the
+      // two transforms never fight over the same element.
+      whileHover={dropPhase === "idle" ? "lift" : undefined}
       variants={badgeVariants}
+      onAnimationComplete={advanceDrop}
+      onClick={handleLogoClick}
+      data-drop-phase={dropPhase}
+      // The logo is deliberately decorative markup — the egg behind it is
+      // pure whimsy with no function, and making it tab-focusable on both
+      // in-app surfaces (the sidebar header and the mobile header) would
+      // worsen keyboard navigation for everyone to serve a secret. The
+      // login page's copy of the mark carries no egg at all.
+      //
+      // `data-drop-phase` exposes the choreography's state machine so tests
+      // (and devtools) can observe the egg without a running animation loop.
+      //
+      // The pointer cursor stays: unlike a plain decorative wrapper this one
+      // does answer clicks (that is the whole egg), and it is the only hint
+      // anybody gets that the badge is worth touching. It is not a home link
+      // on any surface, so it promises no navigation.
       style={{ width: BADGE_SIZE, height: BADGE_SIZE }}
-      className={`relative flex shrink-0 items-center justify-center rounded-[12px] bg-app-brand shadow-lg ${className}`}
+      className={`relative flex shrink-0 cursor-pointer items-center justify-center rounded-[12px] bg-app-brand shadow-lg select-none ${className}`}
     >
       <motion.svg
         variants={rocketVariants}

src/components/ui/SidePanel.tsx

@@ -111,7 +111,15 @@ export function SidePanel({
   useEffect(() => {
     if (!isOpen) return;
 
+    /**
+     * Escape closes the drawer only when nothing inside it has already claimed
+     * the key. Inner consumers (e.g. the dino mini-game, which exits on Escape)
+     * call `preventDefault()`; without this check one keypress would close both
+     * the inner widget and the whole drawer.
+     */
     function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === "Escape" && event.defaultPrevented) return;
+
       if (event.key === "Escape" && closeOnEscape) {
         onClose();
         return;

src/context/ChatContext.ts

@@ -54,6 +54,14 @@ export type ChatContextValue = {
    */
   streamingChatId: string | null;
 
+  /**
+   * How the most recent turn ended, per chat. `null` while a turn is running
+   * or before the first one. Exists so waiting UI (the dino easter egg) can
+   * say "Stopped" / "Reply failed" instead of claiming a reply is ready when
+   * the user pressed Stop or the stream errored.
+   */
+  lastTurnOutcome: ChatTurnOutcome | null;
+
   selectedCitation: SelectedCitation | null;
   setSelectedCitation: (value: SelectedCitation | null) => void;
 
@@ -170,4 +178,13 @@ export type ChatContextValue = {
   deleteChat: (chatId: string) => Promise<void>;
 };
 
+/**
+ * Outcome of a finished chat turn, keyed by the chat it belongs to so a
+ * background chat's result never leaks into the one on screen.
+ */
+export type ChatTurnOutcome = {
+  chatId: string;
+  kind: "done" | "stopped" | "failed";
+};
+
 export const ChatContext = createContext<ChatContextValue | undefined>(undefined);