feat: Full Buddy companion pet system (6 modules matching original)

- buddy/types.ts: Full type system (BuddyState, BuddyStats, evolution stages, XP rewards)
- buddy/sprites.ts: Sprite configs for 6 evolution stages x 10 moods
- buddy/companion.ts: State management, leveling, XP, evolution, persistence, decay
- buddy/prompt.ts: Personality, context-aware messages, 17 achievements
- buddy/useBuddyNotification.tsx: React hook for state/notifications/events
- buddy/index.ts: Barrel export
- BuddySprite.tsx: Full UI with stats panel, achievements, notifications, interactions
- Home.tsx: Integrated useBuddy hook with full props

client/src/buddy/companion.ts

@@ -0,0 +1,376 @@
+// ─── buddy/companion.ts — Matches original buddy/companion.ts ────────────
+// State management, leveling, XP, evolution, persistence
+
+import type {
+  BuddyState,
+  BuddyMood,
+  BuddyStats,
+  BuddyNotification,
+  BuddyAchievement,
+} from "./types";
+import { xpForLevel, stageForLevel, XP_REWARDS } from "./types";
+import { ACHIEVEMENTS } from "./prompt";
+
+const STORAGE_KEY = "claw-buddy-state";
+const NOTIFICATIONS_KEY = "claw-buddy-notifications";
+
+// ─── Default state ─────────────────────────────────────────────────────────
+
+function defaultStats(): BuddyStats {
+  return {
+    level: 1,
+    xp: 0,
+    xpToNextLevel: xpForLevel(1),
+    totalToolCalls: 0,
+    totalSessions: 0,
+    totalFilesCreated: 0,
+    totalLinesWritten: 0,
+    totalBugsFixed: 0,
+    totalTestsPassed: 0,
+    streak: 0,
+    longestStreak: 0,
+    favoriteLanguage: "unknown",
+    languageStats: {},
+  };
+}
+
+function defaultState(): BuddyState {
+  const now = Date.now();
+  return {
+    name: "Buddy",
+    mood: "idle",
+    stage: "egg",
+    stats: defaultStats(),
+    happiness: 80,
+    energy: 100,
+    hunger: 100,
+    lastInteraction: now,
+    lastFed: now,
+    createdAt: now,
+    achievements: [],
+    outfit: "default",
+    accessories: [],
+  };
+}
+
+// ─── Persistence ───────────────────────────────────────────────────────────
+
+export function loadBuddyState(): BuddyState {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (raw) {
+      const parsed = JSON.parse(raw) as BuddyState;
+      // Validate and migrate if needed
+      if (!parsed.stats) parsed.stats = defaultStats();
+      if (!parsed.achievements) parsed.achievements = [];
+      if (parsed.happiness === undefined) parsed.happiness = 80;
+      if (parsed.energy === undefined) parsed.energy = 100;
+      if (parsed.hunger === undefined) parsed.hunger = 100;
+      return parsed;
+    }
+  } catch {
+    // Corrupted state, reset
+  }
+  return defaultState();
+}
+
+export function saveBuddyState(state: BuddyState): void {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+  } catch {
+    // Storage full or unavailable
+  }
+}
+
+export function loadNotifications(): BuddyNotification[] {
+  try {
+    const raw = localStorage.getItem(NOTIFICATIONS_KEY);
+    return raw ? JSON.parse(raw) : [];
+  } catch {
+    return [];
+  }
+}
+
+export function saveNotifications(notifications: BuddyNotification[]): void {
+  try {
+    // Keep only last 50 notifications
+    const trimmed = notifications.slice(-50);
+    localStorage.setItem(NOTIFICATIONS_KEY, JSON.stringify(trimmed));
+  } catch {}
+}
+
+// ─── XP and Leveling ───────────────────────────────────────────────────────
+
+export function addXp(
+  state: BuddyState,
+  amount: number,
+  reason: string
+): { state: BuddyState; notifications: BuddyNotification[] } {
+  const notifications: BuddyNotification[] = [];
+  const newState = { ...state, stats: { ...state.stats } };
+
+  newState.stats.xp += amount;
+  newState.lastInteraction = Date.now();
+
+  // Level up check
+  while (newState.stats.xp >= newState.stats.xpToNextLevel) {
+    newState.stats.xp -= newState.stats.xpToNextLevel;
+    newState.stats.level += 1;
+    newState.stats.xpToNextLevel = xpForLevel(newState.stats.level);
+
+    // Check evolution
+    const newStage = stageForLevel(newState.stats.level);
+    const evolved = newStage !== newState.stage;
+    newState.stage = newStage;
+
+    notifications.push({
+      id: `levelup-${newState.stats.level}-${Date.now()}`,
+      type: "levelup",
+      title: `Level Up! 🎉`,
+      message: `Buddy reached level ${newState.stats.level}!`,
+      timestamp: Date.now(),
+      dismissed: false,
+    });
+
+    if (evolved) {
+      notifications.push({
+        id: `evolution-${newStage}-${Date.now()}`,
+        type: "evolution",
+        title: `Evolution! 🌟`,
+        message: `Buddy evolved to ${newStage}!`,
+        icon: "🌟",
+        timestamp: Date.now(),
+        dismissed: false,
+      });
+    }
+
+    // Happiness boost on level up
+    newState.happiness = Math.min(100, newState.happiness + 10);
+    newState.energy = Math.min(100, newState.energy + 5);
+  }
+
+  // Check achievements
+  const newAchievements = checkAchievements(newState);
+  for (const achievement of newAchievements) {
+    if (!newState.achievements.includes(achievement.id)) {
+      newState.achievements.push(achievement.id);
+      notifications.push({
+        id: `achievement-${achievement.id}-${Date.now()}`,
+        type: "achievement",
+        title: `Achievement Unlocked! 🏆`,
+        message: `${achievement.icon} ${achievement.name}: ${achievement.description}`,
+        icon: achievement.icon,
+        timestamp: Date.now(),
+        dismissed: false,
+      });
+    }
+  }
+
+  return { state: newState, notifications };
+}
+
+// ─── Event handlers ────────────────────────────────────────────────────────
+
+export function onToolCall(
+  state: BuddyState,
+  toolName: string
+): { state: BuddyState; notifications: BuddyNotification[] } {
+  const newState = { ...state, stats: { ...state.stats } };
+  newState.stats.totalToolCalls += 1;
+
+  // Detect language from tool context
+  if (toolName === "write_file" || toolName === "edit_file") {
+    newState.stats.totalFilesCreated += 1;
+  }
+
+  return addXp(newState, XP_REWARDS.tool_call, `tool: ${toolName}`);
+}
+
+export function onFileCreated(
+  state: BuddyState,
+  filePath: string,
+  lines: number
+): { state: BuddyState; notifications: BuddyNotification[] } {
+  const newState = { ...state, stats: { ...state.stats } };
+  newState.stats.totalFilesCreated += 1;
+  newState.stats.totalLinesWritten += lines;
+
+  // Detect language
+  const ext = filePath.split(".").pop()?.toLowerCase() || "unknown";
+  const langMap: Record<string, string> = {
+    ts: "TypeScript", tsx: "TypeScript", js: "JavaScript", jsx: "JavaScript",
+    py: "Python", rs: "Rust", go: "Go", java: "Java", cpp: "C++", c: "C",
+    rb: "Ruby", php: "PHP", swift: "Swift", kt: "Kotlin", cs: "C#",
+  };
+  const lang = langMap[ext] || ext;
+  newState.stats.languageStats[lang] = (newState.stats.languageStats[lang] || 0) + lines;
+
+  // Update favorite language
+  let maxLines = 0;
+  for (const [l, count] of Object.entries(newState.stats.languageStats)) {
+    if (count > maxLines) {
+      maxLines = count;
+      newState.stats.favoriteLanguage = l;
+    }
+  }
+
+  let xp = XP_REWARDS.file_created;
+  // Bonus XP for milestones
+  if (newState.stats.totalLinesWritten >= 1000 && state.stats.totalLinesWritten < 1000) {
+    xp += XP_REWARDS.lines_1000;
+  } else if (newState.stats.totalLinesWritten >= 100 && state.stats.totalLinesWritten < 100) {
+    xp += XP_REWARDS.lines_100;
+  }
+
+  return addXp(newState, xp, `file: ${filePath}`);
+}
+
+export function onSessionCompleted(
+  state: BuddyState
+): { state: BuddyState; notifications: BuddyNotification[] } {
+  const newState = { ...state, stats: { ...state.stats } };
+  newState.stats.totalSessions += 1;
+
+  let xp = XP_REWARDS.session_completed;
+  if (newState.stats.totalSessions === 1) {
+    xp += XP_REWARDS.first_session;
+  }
+
+  return addXp(newState, xp, "session completed");
+}
+
+export function onBugFixed(
+  state: BuddyState
+): { state: BuddyState; notifications: BuddyNotification[] } {
+  const newState = { ...state, stats: { ...state.stats } };
+  newState.stats.totalBugsFixed += 1;
+  return addXp(newState, XP_REWARDS.bug_fixed, "bug fixed");
+}
+
+export function onTestPassed(
+  state: BuddyState
+): { state: BuddyState; notifications: BuddyNotification[] } {
+  const newState = { ...state, stats: { ...state.stats } };
+  newState.stats.totalTestsPassed += 1;
+  return addXp(newState, XP_REWARDS.test_passed, "test passed");
+}
+
+// ─── Mood calculation ──────────────────────────────────────────────────────
+
+export function calculateMood(
+  state: BuddyState,
+  isStreaming: boolean,
+  hasMessages: boolean
+): BuddyMood {
+  const now = Date.now();
+  const idleMinutes = (now - state.lastInteraction) / 60000;
+
+  // Working state takes priority
+  if (isStreaming) return "working";
+
+  // Sleeping after 30 min idle
+  if (idleMinutes > 30) return "sleeping";
+
+  // Tired after 15 min idle
+  if (idleMinutes > 15) return "tired";
+
+  // Low happiness = confused
+  if (state.happiness < 30) return "confused";
+
+  // Low energy = tired
+  if (state.energy < 20) return "tired";
+
+  // Recent level up = celebrating
+  // (checked via notifications externally)
+
+  // Has messages = happy
+  if (hasMessages) return "happy";
+
+  return "idle";
+}
+
+// ─── Decay over time ───────────────────────────────────────────────────────
+
+export function applyTimeDecay(state: BuddyState): BuddyState {
+  const now = Date.now();
+  const hoursSinceInteraction = (now - state.lastInteraction) / 3600000;
+  const hoursSinceFed = (now - state.lastFed) / 3600000;
+
+  const newState = { ...state };
+
+  // Hunger decreases over time (1 point per hour)
+  newState.hunger = Math.max(0, 100 - Math.floor(hoursSinceFed * 1));
+
+  // Happiness decreases if hungry or idle (0.5 per hour)
+  if (newState.hunger < 30 || hoursSinceInteraction > 4) {
+    newState.happiness = Math.max(0, state.happiness - Math.floor(hoursSinceInteraction * 0.5));
+  }
+
+  // Energy regenerates when sleeping (idle), decreases when working
+  if (hoursSinceInteraction > 1) {
+    newState.energy = Math.min(100, state.energy + Math.floor(hoursSinceInteraction * 2));
+  }
+
+  return newState;
+}
+
+export function feedBuddy(state: BuddyState): BuddyState {
+  return {
+    ...state,
+    hunger: 100,
+    happiness: Math.min(100, state.happiness + 15),
+    energy: Math.min(100, state.energy + 10),
+    lastFed: Date.now(),
+    lastInteraction: Date.now(),
+  };
+}
+
+export function petBuddy(state: BuddyState): BuddyState {
+  return {
+    ...state,
+    happiness: Math.min(100, state.happiness + 10),
+    lastInteraction: Date.now(),
+  };
+}
+
+// ─── Achievements ──────────────────────────────────────────────────────────
+
+function checkAchievements(state: BuddyState): BuddyAchievement[] {
+  return ACHIEVEMENTS.filter(
+    (a) => !state.achievements.includes(a.id) && a.condition(state.stats)
+  );
+}
+
+// ─── Streak management ─────────────────────────────────────────────────────
+
+export function updateStreak(state: BuddyState): BuddyState {
+  const now = new Date();
+  const lastDate = new Date(state.lastInteraction);
+
+  const isNewDay =
+    now.getFullYear() !== lastDate.getFullYear() ||
+    now.getMonth() !== lastDate.getMonth() ||
+    now.getDate() !== lastDate.getDate();
+
+  if (!isNewDay) return state;
+
+  const diffDays = Math.floor(
+    (now.getTime() - lastDate.getTime()) / 86400000
+  );
+
+  const newState = { ...state, stats: { ...state.stats } };
+
+  if (diffDays === 1) {
+    // Consecutive day
+    newState.stats.streak += 1;
+    newState.stats.longestStreak = Math.max(
+      newState.stats.longestStreak,
+      newState.stats.streak
+    );
+  } else if (diffDays > 1) {
+    // Streak broken
+    newState.stats.streak = 1;
+  }
+
+  return newState;
+}

client/src/buddy/index.ts

@@ -0,0 +1,7 @@
+// ─── buddy/index.ts — Barrel export ──────────────────────────────────────
+export * from "./types";
+export * from "./sprites";
+export * from "./companion";
+export * from "./prompt";
+export { useBuddy } from "./useBuddyNotification";
+export type { UseBuddyReturn } from "./useBuddyNotification";

client/src/buddy/prompt.ts

@@ -0,0 +1,283 @@
+// ─── buddy/prompt.ts — Matches original buddy/prompt.ts ──────────────────
+// Personality, context-aware responses, achievements definitions
+
+import type { BuddyAchievement, BuddyEvolutionStage, BuddyMood, BuddyStats } from "./types";
+
+// ─── Context-aware messages per mood ───────────────────────────────────────
+
+export const MOOD_MESSAGES: Record<BuddyMood, string[]> = {
+  idle: [
+    "Ready to code! 🚀",
+    "What shall we build?",
+    "I'm here to help!",
+    "Need anything?",
+    "Let's make something awesome!",
+    "Waiting for your command...",
+    "Got any bugs to squash? 🐛",
+  ],
+  thinking: [
+    "Hmm, let me think...",
+    "Processing...",
+    "Analyzing the code...",
+    "Working on it...",
+    "Almost there...",
+  ],
+  happy: [
+    "Great work! 🎉",
+    "That looks awesome!",
+    "We're on fire! 🔥",
+    "Keep it up!",
+    "Nailed it! 💪",
+  ],
+  working: [
+    "On it! ⚡",
+    "Executing...",
+    "Working hard!",
+    "Building...",
+    "Almost done!",
+  ],
+  sleeping: [
+    "zzz...",
+    "*snore*",
+    "💤",
+    "dreaming of code...",
+  ],
+  excited: [
+    "WOW! 🤩",
+    "This is amazing!",
+    "I can't wait!",
+    "Let's GOOO! 🚀",
+    "SO COOL!",
+  ],
+  confused: [
+    "Hmm, that's odd...",
+    "Not sure about this...",
+    "Let me check again...",
+    "Something's off...",
+  ],
+  proud: [
+    "Look what we built! ✨",
+    "We're getting better!",
+    "Level up! 🎮",
+    "Achievement unlocked!",
+  ],
+  tired: [
+    "Need a break...",
+    "Getting sleepy...",
+    "Maybe some coffee? ☕",
+    "*yawn*",
+  ],
+  celebrating: [
+    "WOOHOO! 🎊",
+    "PARTY TIME! 🥳",
+    "WE DID IT! 🏆",
+    "LEGENDARY! 🌟",
+  ],
+};
+
+// ─── Stage-specific greetings ──────────────────────────────────────────────
+
+export const STAGE_GREETINGS: Record<BuddyEvolutionStage, string[]> = {
+  egg: [
+    "I'm still growing...",
+    "Almost ready to hatch!",
+    "Keep coding, I'll hatch soon!",
+  ],
+  baby: [
+    "Hi! I'm learning!",
+    "What does this code do?",
+    "I'm so excited to help!",
+  ],
+  junior: [
+    "Ready for action!",
+    "I know a few tricks now!",
+    "Let's build something cool!",
+  ],
+  senior: [
+    "I've seen a lot of code.",
+    "Trust the process.",
+    "Clean code is happy code.",
+  ],
+  master: [
+    "The code flows through me.",
+    "I sense a bug nearby...",
+    "Let's architect something great.",
+  ],
+  legendary: [
+    "I am one with the codebase.",
+    "All bugs tremble before us.",
+    "We've transcended mere coding.",
+  ],
+};
+
+// ─── Level up messages ─────────────────────────────────────────────────────
+
+export function getLevelUpMessage(level: number): string {
+  if (level <= 5) return `Level ${level}! Keep going! 🌱`;
+  if (level <= 10) return `Level ${level}! Getting stronger! 💪`;
+  if (level <= 20) return `Level ${level}! You're a pro! ⚡`;
+  if (level <= 50) return `Level ${level}! Master coder! 👑`;
+  return `Level ${level}! LEGENDARY! 🌟`;
+}
+
+export function getEvolutionMessage(stage: BuddyEvolutionStage): string {
+  const messages: Record<BuddyEvolutionStage, string> = {
+    egg: "A mysterious egg appeared...",
+    baby: "The egg hatched! A baby coder is born! 🐣",
+    junior: "Buddy evolved into a Junior Developer! 🌱",
+    senior: "Buddy evolved into a Senior Developer! ⚡",
+    master: "Buddy evolved into a Master! 👑",
+    legendary: "Buddy achieved LEGENDARY status! 🌟✨",
+  };
+  return messages[stage];
+}
+
+// ─── Achievements ──────────────────────────────────────────────────────────
+
+export const ACHIEVEMENTS: BuddyAchievement[] = [
+  {
+    id: "first_steps",
+    name: "First Steps",
+    description: "Complete your first session",
+    icon: "👣",
+    condition: (s: BuddyStats) => s.totalSessions >= 1,
+  },
+  {
+    id: "tool_master",
+    name: "Tool Master",
+    description: "Use 100 tool calls",
+    icon: "🔧",
+    condition: (s: BuddyStats) => s.totalToolCalls >= 100,
+  },
+  {
+    id: "file_creator",
+    name: "File Creator",
+    description: "Create 10 files",
+    icon: "📄",
+    condition: (s: BuddyStats) => s.totalFilesCreated >= 10,
+  },
+  {
+    id: "prolific_writer",
+    name: "Prolific Writer",
+    description: "Write 1,000 lines of code",
+    icon: "✍️",
+    condition: (s: BuddyStats) => s.totalLinesWritten >= 1000,
+  },
+  {
+    id: "novelist",
+    name: "Code Novelist",
+    description: "Write 10,000 lines of code",
+    icon: "📚",
+    condition: (s: BuddyStats) => s.totalLinesWritten >= 10000,
+  },
+  {
+    id: "bug_hunter",
+    name: "Bug Hunter",
+    description: "Fix 5 bugs",
+    icon: "🐛",
+    condition: (s: BuddyStats) => s.totalBugsFixed >= 5,
+  },
+  {
+    id: "exterminator",
+    name: "Exterminator",
+    description: "Fix 50 bugs",
+    icon: "🔫",
+    condition: (s: BuddyStats) => s.totalBugsFixed >= 50,
+  },
+  {
+    id: "test_lover",
+    name: "Test Lover",
+    description: "Pass 10 tests",
+    icon: "✅",
+    condition: (s: BuddyStats) => s.totalTestsPassed >= 10,
+  },
+  {
+    id: "streak_3",
+    name: "Consistent",
+    description: "3-day coding streak",
+    icon: "🔥",
+    condition: (s: BuddyStats) => s.streak >= 3,
+  },
+  {
+    id: "streak_7",
+    name: "Dedicated",
+    description: "7-day coding streak",
+    icon: "🔥🔥",
+    condition: (s: BuddyStats) => s.streak >= 7,
+  },
+  {
+    id: "streak_30",
+    name: "Unstoppable",
+    description: "30-day coding streak",
+    icon: "🔥🔥🔥",
+    condition: (s: BuddyStats) => s.streak >= 30,
+  },
+  {
+    id: "level_10",
+    name: "Rising Star",
+    description: "Reach level 10",
+    icon: "⭐",
+    condition: (s: BuddyStats) => s.level >= 10,
+  },
+  {
+    id: "level_25",
+    name: "Veteran",
+    description: "Reach level 25",
+    icon: "🌟",
+    condition: (s: BuddyStats) => s.level >= 25,
+  },
+  {
+    id: "level_50",
+    name: "Legend",
+    description: "Reach level 50",
+    icon: "👑",
+    condition: (s: BuddyStats) => s.level >= 50,
+  },
+  {
+    id: "polyglot",
+    name: "Polyglot",
+    description: "Write code in 5+ languages",
+    icon: "🌍",
+    condition: (s: BuddyStats) => Object.keys(s.languageStats).length >= 5,
+  },
+  {
+    id: "sessions_50",
+    name: "Regular",
+    description: "Complete 50 sessions",
+    icon: "📊",
+    condition: (s: BuddyStats) => s.totalSessions >= 50,
+  },
+  {
+    id: "tool_calls_1000",
+    name: "Power User",
+    description: "Use 1,000 tool calls",
+    icon: "⚡",
+    condition: (s: BuddyStats) => s.totalToolCalls >= 1000,
+  },
+];
+
+// ─── Random message picker ─────────────────────────────────────────────────
+
+export function getRandomMessage(mood: BuddyMood): string {
+  const messages = MOOD_MESSAGES[mood] || MOOD_MESSAGES.idle;
+  return messages[Math.floor(Math.random() * messages.length)];
+}
+
+export function getRandomGreeting(stage: BuddyEvolutionStage): string {
+  const greetings = STAGE_GREETINGS[stage] || STAGE_GREETINGS.baby;
+  return greetings[Math.floor(Math.random() * greetings.length)];
+}
+
+// ─── Stats summary for display ─────────────────────────────────────────────
+
+export function formatStatsSummary(stats: BuddyStats): string {
+  return [
+    `Level ${stats.level} (${stats.xp}/${stats.xpToNextLevel} XP)`,
+    `${stats.totalToolCalls} tool calls`,
+    `${stats.totalFilesCreated} files created`,
+    `${stats.totalLinesWritten.toLocaleString()} lines written`,
+    `${stats.totalBugsFixed} bugs fixed`,
+    `${stats.streak}-day streak (best: ${stats.longestStreak})`,
+    `Favorite: ${stats.favoriteLanguage}`,
+  ].join(" | ");
+}

client/src/buddy/sprites.ts

@@ -0,0 +1,164 @@
+// ─── buddy/sprites.ts — Matches original buddy/sprites.ts ────────────────
+// Sprite definitions for each evolution stage and mood
+
+import type { BuddyEvolutionStage, BuddyMood, BuddySpriteConfig } from "./types";
+
+// ─── Face sprites per stage + mood ─────────────────────────────────────────
+
+const EGG_FACES: Record<BuddyMood, string> = {
+  idle:        "🥚",
+  thinking:    "🥚 ...",
+  happy:       "🥚 ✨",
+  working:     "🥚 💫",
+  sleeping:    "🥚 💤",
+  excited:     "🥚 ❗",
+  confused:    "🥚 ❓",
+  proud:       "🥚 ⭐",
+  tired:       "🥚 😴",
+  celebrating: "🥚 🎉",
+};
+
+const BABY_FACES: Record<BuddyMood, string> = {
+  idle:        "(• ◡ •)",
+  thinking:    "(• ᴗ •) ...",
+  happy:       "(◕ ᗜ ◕)",
+  working:     "(⌐■_■)",
+  sleeping:    "(- ᴗ -)ᶻᶻ",
+  excited:     "(★ ᗜ ★)",
+  confused:    "(• _ •)?",
+  proud:       "(⌐■_■)b",
+  tired:       "(- _ -)~",
+  celebrating: "\\(◕ ᗜ ◕)/",
+};
+
+const JUNIOR_FACES: Record<BuddyMood, string> = {
+  idle:        "ᕙ(• ◡ •)ᕗ",
+  thinking:    "(• ᴗ •)🔍",
+  happy:       "ᕙ(◕ ᗜ ◕)ᕗ",
+  working:     "(⌐■_■)⚡",
+  sleeping:    "(- ᴗ -)ᶻᶻᶻ",
+  excited:     "ᕙ(★ ᗜ ★)ᕗ",
+  confused:    "(• _ •)❓",
+  proud:       "(⌐■_■)✨",
+  tired:       "(- _ -)💤",
+  celebrating: "\\(★ ᗜ ★)/🎉",
+};
+
+const SENIOR_FACES: Record<BuddyMood, string> = {
+  idle:        "⚡(• ◡ •)⚡",
+  thinking:    "🧠(• ᴗ •)",
+  happy:       "⚡(◕ ᗜ ◕)⚡",
+  working:     "💻(⌐■_■)💻",
+  sleeping:    "🌙(- ᴗ -)🌙",
+  excited:     "🔥(★ ᗜ ★)🔥",
+  confused:    "🤔(• _ •)",
+  proud:       "👑(⌐■_■)",
+  tired:       "☕(- _ -)",
+  celebrating: "🎊\\(★ ᗜ ★)/🎊",
+};
+
+const MASTER_FACES: Record<BuddyMood, string> = {
+  idle:        "👑⚡(◉ ◡ ◉)⚡👑",
+  thinking:    "🧠⚡(◉ ᴗ ◉)⚡",
+  happy:       "👑⚡(◉ ᗜ ◉)⚡👑",
+  working:     "💻⚡(⌐◉_◉)⚡💻",
+  sleeping:    "🌙✨(- ◡ -)✨🌙",
+  excited:     "🔥⚡(★ ᗜ ★)⚡🔥",
+  confused:    "🤔(◉ _ ◉)❓",
+  proud:       "👑✨(⌐◉_◉)✨👑",
+  tired:       "☕(- ◡ -)~",
+  celebrating: "🎊🔥\\(★ ᗜ ★)/🔥🎊",
+};
+
+const LEGENDARY_FACES: Record<BuddyMood, string> = {
+  idle:        "🌟👑(◉ ◡ ◉)👑🌟",
+  thinking:    "🧠💫(◉ ᴗ ◉)💫",
+  happy:       "🌟👑(◉ ᗜ ◉)👑🌟",
+  working:     "⚡💻(⌐◉_◉)💻⚡",
+  sleeping:    "🌙🌟(- ◡ -)🌟🌙",
+  excited:     "🌟🔥(★ ᗜ ★)🔥🌟",
+  confused:    "🌟(◉ _ ◉)❓",
+  proud:       "🌟👑✨(⌐◉_◉)✨👑🌟",
+  tired:       "🌟☕(- ◡ -)☕🌟",
+  celebrating: "🌟🎊🔥\\(★ ᗜ ★)/🔥🎊🌟",
+};
+
+const STAGE_FACES: Record<BuddyEvolutionStage, Record<BuddyMood, string>> = {
+  egg: EGG_FACES,
+  baby: BABY_FACES,
+  junior: JUNIOR_FACES,
+  senior: SENIOR_FACES,
+  master: MASTER_FACES,
+  legendary: LEGENDARY_FACES,
+};
+
+// ─── Colors per stage ──────────────────────────────────────────────────────
+
+const STAGE_COLORS: Record<BuddyEvolutionStage, string> = {
+  egg:       "from-gray-400/20 to-gray-500/20 border-gray-400/30",
+  baby:      "from-blue-500/20 to-cyan-500/20 border-blue-500/30",
+  junior:    "from-green-500/20 to-emerald-500/20 border-green-500/30",
+  senior:    "from-purple-500/20 to-pink-500/20 border-purple-500/30",
+  master:    "from-orange-500/20 to-amber-500/20 border-orange-500/30",
+  legendary: "from-yellow-400/30 to-amber-400/30 border-yellow-400/50",
+};
+
+// ─── Mood-specific color overrides ─────────────────────────────────────────
+
+const MOOD_COLOR_OVERRIDES: Partial<Record<BuddyMood, string>> = {
+  thinking:    "from-purple-500/20 to-pink-500/20 border-purple-500/30",
+  working:     "from-orange-500/20 to-amber-500/20 border-orange-500/30",
+  sleeping:    "from-indigo-500/10 to-slate-500/10 border-indigo-500/20",
+  excited:     "from-yellow-400/30 to-amber-400/30 border-yellow-400/50",
+  celebrating: "from-pink-500/20 to-rose-500/20 border-pink-500/30",
+};
+
+// ─── Size per stage ────────────────────────────────────────────────────────
+
+export const STAGE_SIZE: Record<BuddyEvolutionStage, { width: string; height: string; fontSize: string }> = {
+  egg:       { width: "w-10", height: "h-10", fontSize: "text-[9px]" },
+  baby:      { width: "w-14", height: "h-14", fontSize: "text-[11px]" },
+  junior:    { width: "w-16", height: "h-16", fontSize: "text-[12px]" },
+  senior:    { width: "w-18", height: "h-18", fontSize: "text-[13px]" },
+  master:    { width: "w-20", height: "h-20", fontSize: "text-[11px]" },
+  legendary: { width: "w-22", height: "h-22", fontSize: "text-[10px]" },
+};
+
+// ─── Animations per mood ───────────────────────────────────────────────────
+
+export const MOOD_ANIMATIONS: Partial<Record<BuddyMood, string>> = {
+  working:     "animate-pulse",
+  excited:     "animate-bounce",
+  celebrating: "animate-bounce",
+  sleeping:    "opacity-60",
+};
+
+// ─── Public API ────────────────────────────────────────────────────────────
+
+export function getSpriteConfig(
+  stage: BuddyEvolutionStage,
+  mood: BuddyMood
+): BuddySpriteConfig {
+  const face = STAGE_FACES[stage]?.[mood] ?? STAGE_FACES.baby.idle;
+  const color = MOOD_COLOR_OVERRIDES[mood] ?? STAGE_COLORS[stage] ?? STAGE_COLORS.baby;
+  const animation = MOOD_ANIMATIONS[mood];
+
+  return {
+    face,
+    color,
+    animation,
+    accessorySlots: [],
+  };
+}
+
+export function getStageLabel(stage: BuddyEvolutionStage): string {
+  const labels: Record<BuddyEvolutionStage, string> = {
+    egg: "Egg",
+    baby: "Baby",
+    junior: "Junior Dev",
+    senior: "Senior Dev",
+    master: "Master",
+    legendary: "Legendary",
+  };
+  return labels[stage] ?? "Unknown";
+}

client/src/buddy/types.ts

@@ -0,0 +1,108 @@
+// ─── buddy/types.ts — Matches original buddy/types.ts ─────────────────────
+// Full type system for the Claw Buddy companion pet
+
+export type BuddyMood =
+  | "idle"
+  | "thinking"
+  | "happy"
+  | "working"
+  | "sleeping"
+  | "excited"
+  | "confused"
+  | "proud"
+  | "tired"
+  | "celebrating";
+
+export type BuddyEvolutionStage =
+  | "egg"        // Level 0-2: just hatched
+  | "baby"       // Level 3-5: learning
+  | "junior"     // Level 6-10: growing
+  | "senior"     // Level 11-20: experienced
+  | "master"     // Level 21-50: expert
+  | "legendary"; // Level 51+: legendary status
+
+export interface BuddyStats {
+  level: number;
+  xp: number;
+  xpToNextLevel: number;
+  totalToolCalls: number;
+  totalSessions: number;
+  totalFilesCreated: number;
+  totalLinesWritten: number;
+  totalBugsFixed: number;
+  totalTestsPassed: number;
+  streak: number;           // consecutive days of coding
+  longestStreak: number;
+  favoriteLanguage: string;
+  languageStats: Record<string, number>; // language -> lines
+}
+
+export interface BuddyState {
+  name: string;
+  mood: BuddyMood;
+  stage: BuddyEvolutionStage;
+  stats: BuddyStats;
+  happiness: number;       // 0-100
+  energy: number;          // 0-100
+  hunger: number;          // 0-100 (decreases over time)
+  lastInteraction: number; // timestamp
+  lastFed: number;         // timestamp
+  createdAt: number;       // timestamp
+  achievements: string[];  // unlocked achievement IDs
+  outfit: string;          // current outfit/skin
+  accessories: string[];   // equipped accessories
+}
+
+export interface BuddyAchievement {
+  id: string;
+  name: string;
+  description: string;
+  icon: string;
+  condition: (stats: BuddyStats) => boolean;
+}
+
+export interface BuddyNotification {
+  id: string;
+  type: "levelup" | "achievement" | "evolution" | "mood" | "streak" | "tip";
+  title: string;
+  message: string;
+  icon?: string;
+  timestamp: number;
+  dismissed: boolean;
+}
+
+export interface BuddySpriteConfig {
+  face: string;
+  color: string;
+  animation?: string;
+  accessorySlots: string[];
+}
+
+// XP rewards for different actions (matches original)
+export const XP_REWARDS = {
+  tool_call: 5,
+  file_created: 10,
+  file_edited: 3,
+  bug_fixed: 25,
+  test_passed: 15,
+  session_completed: 20,
+  streak_day: 50,
+  first_session: 100,
+  lines_100: 10,
+  lines_1000: 50,
+} as const;
+
+// Level thresholds
+export function xpForLevel(level: number): number {
+  // Quadratic scaling: level 1 = 100 XP, level 10 = 1000 XP, level 50 = 25000 XP
+  return Math.floor(100 * level * (1 + level * 0.1));
+}
+
+export function stageForLevel(level: number): BuddyEvolutionStage {
+  if (level <= 2) return "egg";
+  if (level <= 5) return "baby";
+  if (level <= 10) return "junior";
+  if (level <= 20) return "senior";
+  if (level <= 50) return "master";
+  return "legendary";
+}

client/src/buddy/useBuddyNotification.tsx

@@ -0,0 +1,161 @@
+// ─── buddy/useBuddyNotification.tsx — Matches original ───────────────────
+// React hook for buddy notifications, state management, and event handling
+
+import { useState, useEffect, useCallback, useRef } from "react";
+import type { BuddyState, BuddyMood, BuddyNotification } from "./types";
+import {
+  loadBuddyState,
+  saveBuddyState,
+  loadNotifications,
+  saveNotifications,
+  onToolCall,
+  onFileCreated,
+  onSessionCompleted,
+  calculateMood,
+  applyTimeDecay,
+  feedBuddy,
+  petBuddy,
+  updateStreak,
+} from "./companion";
+
+export interface UseBuddyReturn {
+  state: BuddyState;
+  mood: BuddyMood;
+  notifications: BuddyNotification[];
+  undismissedCount: number;
+  // Actions
+  handleToolCall: (toolName: string) => void;
+  handleFileCreated: (filePath: string, lines: number) => void;
+  handleSessionCompleted: () => void;
+  feed: () => void;
+  pet: () => void;
+  dismissNotification: (id: string) => void;
+  dismissAll: () => void;
+  renameBuddy: (name: string) => void;
+}
+
+export function useBuddy(
+  isStreaming: boolean,
+  hasMessages: boolean
+): UseBuddyReturn {
+  const [state, setState] = useState<BuddyState>(() => loadBuddyState());
+  const [notifications, setNotifications] = useState<BuddyNotification[]>(
+    () => loadNotifications()
+  );
+  const stateRef = useRef(state);
+  stateRef.current = state;
+
+  // Apply time decay on mount and every 5 minutes
+  useEffect(() => {
+    const decayed = applyTimeDecay(state);
+    const streaked = updateStreak(decayed);
+    if (
+      streaked.hunger !== state.hunger ||
+      streaked.happiness !== state.happiness ||
+      streaked.energy !== state.energy ||
+      streaked.stats.streak !== state.stats.streak
+    ) {
+      setState(streaked);
+      saveBuddyState(streaked);
+    }
+
+    const interval = setInterval(() => {
+      const current = stateRef.current;
+      const updated = applyTimeDecay(current);
+      if (
+        updated.hunger !== current.hunger ||
+        updated.happiness !== current.happiness ||
+        updated.energy !== current.energy
+      ) {
+        setState(updated);
+        saveBuddyState(updated);
+      }
+    }, 300_000); // 5 minutes
+
+    return () => clearInterval(interval);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Calculate mood reactively
+  const mood = calculateMood(state, isStreaming, hasMessages);
+
+  // Persist state changes
+  useEffect(() => {
+    saveBuddyState(state);
+  }, [state]);
+
+  useEffect(() => {
+    saveNotifications(notifications);
+  }, [notifications]);
+
+  // ─── Event handlers ────────────────────────────────────────────────────
+
+  const addNotifications = useCallback((newNotifs: BuddyNotification[]) => {
+    if (newNotifs.length > 0) {
+      setNotifications((prev) => [...prev, ...newNotifs]);
+    }
+  }, []);
+
+  const handleToolCall = useCallback(
+    (toolName: string) => {
+      const result = onToolCall(stateRef.current, toolName);
+      setState(result.state);
+      addNotifications(result.notifications);
+    },
+    [addNotifications]
+  );
+
+  const handleFileCreated = useCallback(
+    (filePath: string, lines: number) => {
+      const result = onFileCreated(stateRef.current, filePath, lines);
+      setState(result.state);
+      addNotifications(result.notifications);
+    },
+    [addNotifications]
+  );
+
+  const handleSessionCompleted = useCallback(() => {
+    const result = onSessionCompleted(stateRef.current);
+    setState(result.state);
+    addNotifications(result.notifications);
+  }, [addNotifications]);
+
+  const feed = useCallback(() => {
+    setState((prev) => feedBuddy(prev));
+  }, []);
+
+  const pet = useCallback(() => {
+    setState((prev) => petBuddy(prev));
+  }, []);
+
+  const dismissNotification = useCallback((id: string) => {
+    setNotifications((prev) =>
+      prev.map((n) => (n.id === id ? { ...n, dismissed: true } : n))
+    );
+  }, []);
+
+  const dismissAll = useCallback(() => {
+    setNotifications((prev) => prev.map((n) => ({ ...n, dismissed: true })));
+  }, []);
+
+  const renameBuddy = useCallback((name: string) => {
+    setState((prev) => ({ ...prev, name: name.trim() || "Buddy" }));
+  }, []);
+
+  const undismissedCount = notifications.filter((n) => !n.dismissed).length;
+
+  return {
+    state,
+    mood,
+    notifications,
+    undismissedCount,
+    handleToolCall,
+    handleFileCreated,
+    handleSessionCompleted,
+    feed,
+    pet,
+    dismissNotification,
+    dismissAll,
+    renameBuddy,
+  };
+}

client/src/components/BuddySprite.tsx

@@ -1,45 +1,48 @@
-import { useState, useEffect } from "react";
+// ─── BuddySprite.tsx — Full companion pet UI (matches original 6-module system) ──
+import { useState, useEffect, useCallback } from "react";
 import { cn } from "@/lib/utils";
+import type { BuddyState, BuddyMood, BuddyEvolutionStage, BuddyNotification } from "@/buddy/types";
+import { getSpriteConfig, STAGE_SIZE, getStageLabel } from "@/buddy/sprites";
+import { getRandomMessage, getRandomGreeting, formatStatsSummary, ACHIEVEMENTS } from "@/buddy/prompt";
 
 interface BuddySpriteProps {
+  state: BuddyState;
+  mood: BuddyMood;
+  notifications: BuddyNotification[];
+  undismissedCount: number;
   visible: boolean;
-  mood?: "idle" | "thinking" | "happy" | "working" | "sleeping";
   position?: "bottom-right" | "bottom-left";
+  onFeed: () => void;
+  onPet: () => void;
+  onDismissNotification: (id: string) => void;
+  onDismissAll: () => void;
+  onRename: (name: string) => void;
   onClick?: () => void;
 }
 
-const MOOD_FACES: Record<string, string> = {
-  idle: "(• ◡ •)",
-  thinking: "(• ᴗ •) ...",
-  happy: "(◕ ᗜ ◕)",
-  working: "(⌐■_■)",
-  sleeping: "(- ᴗ -)ᶻᶻ",
-};
-
-const MOOD_COLORS: Record<string, string> = {
-  idle: "from-blue-500/20 to-cyan-500/20 border-blue-500/30",
-  thinking: "from-purple-500/20 to-pink-500/20 border-purple-500/30",
-  happy: "from-green-500/20 to-emerald-500/20 border-green-500/30",
-  working: "from-orange-500/20 to-amber-500/20 border-orange-500/30",
-  sleeping: "from-indigo-500/10 to-slate-500/10 border-indigo-500/20",
-};
-
-const IDLE_MESSAGES = [
-  "Ready to code!",
-  "What shall we build?",
-  "I'm here to help!",
-  "Need anything?",
-  "Let's go! 🚀",
-];
-
 export function BuddySprite({
+  state,
+  mood,
+  notifications,
+  undismissedCount,
   visible,
-  mood = "idle",
   position = "bottom-right",
+  onFeed,
+  onPet,
+  onDismissNotification,
+  onDismissAll,
+  onRename,
   onClick,
 }: BuddySpriteProps) {
   const [message, setMessage] = useState("");
   const [bobOffset, setBobOffset] = useState(0);
+  const [showPanel, setShowPanel] = useState(false);
+  const [panelTab, setPanelTab] = useState<"stats" | "achievements" | "notifications">("stats");
+  const [isRenaming, setIsRenaming] = useState(false);
+  const [renameValue, setRenameValue] = useState(state.name);
+
+  const sprite = getSpriteConfig(state.stage, mood);
+  const sizeConfig = STAGE_SIZE[state.stage] || STAGE_SIZE.baby;
 
   // Gentle bobbing animation
   useEffect(() => {
@@ -52,68 +55,345 @@ export function BuddySprite({
     return () => clearInterval(interval);
   }, [visible, mood]);
 
-  // Random idle messages
+  // Random messages
   useEffect(() => {
-    if (!visible || mood !== "idle") {
+    if (!visible || mood === "sleeping" || mood === "working") {
       setMessage("");
       return;
     }
-    const showMessage = () => {
-      const msg = IDLE_MESSAGES[Math.floor(Math.random() * IDLE_MESSAGES.length)];
+    const showMsg = () => {
+      const msg = Math.random() > 0.5
+        ? getRandomMessage(mood)
+        : getRandomGreeting(state.stage);
       setMessage(msg);
-      setTimeout(() => setMessage(""), 3000);
+      setTimeout(() => setMessage(""), 4000);
     };
-    const interval = setInterval(showMessage, 15000);
-    // Show first message after 2s
-    const timeout = setTimeout(showMessage, 2000);
+    const interval = setInterval(showMsg, 12000);
+    const timeout = setTimeout(showMsg, 2000);
     return () => {
       clearInterval(interval);
       clearTimeout(timeout);
     };
-  }, [visible, mood]);
+  }, [visible, mood, state.stage]);
+
+  // Show notification messages
+  useEffect(() => {
+    const latest = notifications.filter((n) => !n.dismissed).slice(-1)[0];
+    if (latest) {
+      setMessage(`${latest.icon || "🔔"} ${latest.title}`);
+      const t = setTimeout(() => setMessage(""), 5000);
+      return () => clearTimeout(t);
+    }
+  }, [notifications]);
+
+  const handleClick = useCallback(() => {
+    if (onClick) onClick();
+    setShowPanel((prev) => !prev);
+  }, [onClick]);
+
+  const handleRenameSubmit = useCallback(() => {
+    onRename(renameValue);
+    setIsRenaming(false);
+  }, [onRename, renameValue]);
 
   if (!visible) return null;
 
-  return (
-    <div
-      className={cn(
-        "fixed z-40 flex flex-col items-center gap-1 cursor-pointer select-none transition-all duration-300",
-        position === "bottom-right" ? "right-6 bottom-6" : "left-6 bottom-6"
-      )}
-      style={{ transform: `translateY(${bobOffset}px)` }}
-      onClick={onClick}
-      title="Claw Buddy — Click to interact"
-    >
-      {/* Speech bubble */}
-      {message && (
-        <div className="bg-popover text-popover-foreground text-xs px-3 py-1.5 rounded-lg shadow-md border border-border max-w-[160px] text-center animate-in fade-in slide-in-from-bottom-2 duration-200">
-          {message}
-          <div
-            className={cn(
-              "absolute -bottom-1 w-2 h-2 bg-popover border-b border-r border-border rotate-45",
-              "left-1/2 -translate-x-1/2"
-            )}
-          />
-        </div>
-      )}
+  const xpPercent = state.stats.xpToNextLevel > 0
+    ? Math.round((state.stats.xp / state.stats.xpToNextLevel) * 100)
+    : 0;
 
-      {/* Buddy body */}
+  return (
+    <>
+      {/* Main buddy sprite */}
       <div
         className={cn(
-          "w-14 h-14 rounded-2xl bg-gradient-to-br border flex items-center justify-center shadow-lg backdrop-blur-sm transition-colors duration-500",
-          MOOD_COLORS[mood] || MOOD_COLORS.idle,
-          mood === "working" && "animate-pulse"
+          "fixed z-50 flex flex-col items-center gap-1 cursor-pointer select-none transition-all duration-300",
+          position === "bottom-right" ? "right-6 bottom-6" : "left-6 bottom-6"
         )}
+        style={{ transform: `translateY(${bobOffset}px)` }}
+        onClick={handleClick}
+        title={`${state.name} — Level ${state.stats.level} ${getStageLabel(state.stage)} — Click to interact`}
       >
-        <span className="text-[11px] font-mono text-foreground/80 whitespace-nowrap">
-          {MOOD_FACES[mood] || MOOD_FACES.idle}
+        {/* Speech bubble */}
+        {message && (
+          <div className="bg-popover text-popover-foreground text-xs px-3 py-1.5 rounded-lg shadow-md border border-border max-w-[180px] text-center animate-in fade-in slide-in-from-bottom-2 duration-200">
+            {message}
+            <div
+              className={cn(
+                "absolute -bottom-1 w-2 h-2 bg-popover border-b border-r border-border rotate-45",
+                "left-1/2 -translate-x-1/2"
+              )}
+            />
+          </div>
+        )}
+
+        {/* Notification badge */}
+        {undismissedCount > 0 && (
+          <div className="absolute -top-1 -right-1 bg-red-500 text-white text-[9px] font-bold rounded-full w-4 h-4 flex items-center justify-center z-10">
+            {undismissedCount > 9 ? "9+" : undismissedCount}
+          </div>
+        )}
+
+        {/* Buddy body */}
+        <div
+          className={cn(
+            "rounded-2xl bg-gradient-to-br border flex items-center justify-center shadow-lg backdrop-blur-sm transition-all duration-500",
+            sizeConfig.width,
+            sizeConfig.height,
+            sprite.color,
+            sprite.animation
+          )}
+        >
+          <span className={cn("font-mono text-foreground/80 whitespace-nowrap", sizeConfig.fontSize)}>
+            {sprite.face}
+          </span>
+        </div>
+
+        {/* XP bar */}
+        <div className="w-full max-w-[56px] h-1 bg-muted/30 rounded-full overflow-hidden">
+          <div
+            className="h-full bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full transition-all duration-500"
+            style={{ width: `${xpPercent}%` }}
+          />
+        </div>
+
+        {/* Label */}
+        <span className="text-[9px] text-muted-foreground/60 font-medium">
+          {state.name} Lv.{state.stats.level}
         </span>
       </div>
 
-      {/* Label */}
-      <span className="text-[9px] text-muted-foreground/60 font-medium">
-        Buddy
+      {/* Interaction panel */}
+      {showPanel && (
+        <div
+          className={cn(
+            "fixed z-50 bg-popover text-popover-foreground rounded-xl shadow-2xl border border-border w-[320px] max-h-[420px] overflow-hidden animate-in fade-in slide-in-from-bottom-4 duration-300",
+            position === "bottom-right" ? "right-6 bottom-28" : "left-6 bottom-28"
+          )}
+        >
+          {/* Header */}
+          <div className="p-3 border-b border-border bg-muted/30">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <span className="text-lg">{sprite.face}</span>
+                <div>
+                  {isRenaming ? (
+                    <div className="flex gap-1">
+                      <input
+                        className="text-sm font-bold bg-background border border-border rounded px-1 w-24"
+                        value={renameValue}
+                        onChange={(e) => setRenameValue(e.target.value)}
+                        onKeyDown={(e) => e.key === "Enter" && handleRenameSubmit()}
+                        autoFocus
+                      />
+                      <button
+                        className="text-xs text-muted-foreground hover:text-foreground"
+                        onClick={handleRenameSubmit}
+                      >
+                        OK
+                      </button>
+                    </div>
+                  ) : (
+                    <span
+                      className="text-sm font-bold cursor-pointer hover:underline"
+                      onClick={() => setIsRenaming(true)}
+                    >
+                      {state.name}
+                    </span>
+                  )}
+                  <div className="text-[10px] text-muted-foreground">
+                    {getStageLabel(state.stage)} — Level {state.stats.level}
+                  </div>
+                </div>
+              </div>
+              <button
+                className="text-muted-foreground hover:text-foreground text-sm"
+                onClick={() => setShowPanel(false)}
+              >
+                X
+              </button>
+            </div>
+
+            {/* Status bars */}
+            <div className="mt-2 space-y-1">
+              <StatusBar label="XP" value={xpPercent} color="from-blue-500 to-cyan-500" text={`${state.stats.xp}/${state.stats.xpToNextLevel}`} />
+              <StatusBar label="HP" value={state.happiness} color="from-green-500 to-emerald-500" />
+              <StatusBar label="EN" value={state.energy} color="from-yellow-500 to-amber-500" />
+              <StatusBar label="FD" value={state.hunger} color="from-orange-500 to-red-500" />
+            </div>
+
+            {/* Action buttons */}
+            <div className="flex gap-2 mt-2">
+              <button
+                className="flex-1 text-xs bg-green-500/20 hover:bg-green-500/30 border border-green-500/30 rounded-lg py-1 transition-colors"
+                onClick={onFeed}
+              >
+                Feed
+              </button>
+              <button
+                className="flex-1 text-xs bg-pink-500/20 hover:bg-pink-500/30 border border-pink-500/30 rounded-lg py-1 transition-colors"
+                onClick={onPet}
+              >
+                Pet
+              </button>
+            </div>
+          </div>
+
+          {/* Tabs */}
+          <div className="flex border-b border-border">
+            {(["stats", "achievements", "notifications"] as const).map((tab) => (
+              <button
+                key={tab}
+                className={cn(
+                  "flex-1 text-xs py-2 transition-colors",
+                  panelTab === tab
+                    ? "text-foreground border-b-2 border-primary"
+                    : "text-muted-foreground hover:text-foreground"
+                )}
+                onClick={() => setPanelTab(tab)}
+              >
+                {tab === "stats" ? "Stats" : tab === "achievements" ? "Achievements" : `Notifs (${undismissedCount})`}
+              </button>
+            ))}
+          </div>
+
+          {/* Tab content */}
+          <div className="p-3 overflow-y-auto max-h-[200px] text-xs">
+            {panelTab === "stats" && (
+              <div className="space-y-2">
+                <StatRow label="Total Tool Calls" value={state.stats.totalToolCalls.toLocaleString()} />
+                <StatRow label="Files Created" value={state.stats.totalFilesCreated.toLocaleString()} />
+                <StatRow label="Lines Written" value={state.stats.totalLinesWritten.toLocaleString()} />
+                <StatRow label="Bugs Fixed" value={state.stats.totalBugsFixed.toLocaleString()} />
+                <StatRow label="Tests Passed" value={state.stats.totalTestsPassed.toLocaleString()} />
+                <StatRow label="Sessions" value={state.stats.totalSessions.toLocaleString()} />
+                <StatRow label="Streak" value={`${state.stats.streak} days (best: ${state.stats.longestStreak})`} />
+                <StatRow label="Favorite Language" value={state.stats.favoriteLanguage} />
+                {Object.keys(state.stats.languageStats).length > 0 && (
+                  <div className="mt-2 pt-2 border-t border-border">
+                    <div className="text-muted-foreground mb-1">Languages:</div>
+                    {Object.entries(state.stats.languageStats)
+                      .sort(([, a], [, b]) => b - a)
+                      .slice(0, 8)
+                      .map(([lang, lines]) => (
+                        <StatRow key={lang} label={lang} value={`${lines.toLocaleString()} lines`} />
+                      ))}
+                  </div>
+                )}
+              </div>
+            )}
+
+            {panelTab === "achievements" && (
+              <div className="space-y-2">
+                {ACHIEVEMENTS.map((a) => {
+                  const unlocked = state.achievements.includes(a.id);
+                  return (
+                    <div
+                      key={a.id}
+                      className={cn(
+                        "flex items-center gap-2 p-2 rounded-lg border",
+                        unlocked
+                          ? "bg-green-500/10 border-green-500/30"
+                          : "bg-muted/20 border-border opacity-50"
+                      )}
+                    >
+                      <span className="text-base">{a.icon}</span>
+                      <div>
+                        <div className="font-medium">{a.name}</div>
+                        <div className="text-muted-foreground text-[10px]">{a.description}</div>
+                      </div>
+                      {unlocked && <span className="ml-auto text-green-500 text-xs">Unlocked</span>}
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+
+            {panelTab === "notifications" && (
+              <div className="space-y-2">
+                {undismissedCount > 0 && (
+                  <button
+                    className="text-[10px] text-muted-foreground hover:text-foreground underline"
+                    onClick={onDismissAll}
+                  >
+                    Dismiss all
+                  </button>
+                )}
+                {notifications.length === 0 && (
+                  <div className="text-muted-foreground text-center py-4">No notifications yet</div>
+                )}
+                {[...notifications]
+                  .reverse()
+                  .slice(0, 20)
+                  .map((n) => (
+                    <div
+                      key={n.id}
+                      className={cn(
+                        "flex items-start gap-2 p-2 rounded-lg border",
+                        n.dismissed ? "opacity-40 border-border" : "bg-blue-500/10 border-blue-500/30"
+                      )}
+                    >
+                      <span className="text-sm">{n.icon || "🔔"}</span>
+                      <div className="flex-1">
+                        <div className="font-medium">{n.title}</div>
+                        <div className="text-muted-foreground text-[10px]">{n.message}</div>
+                        <div className="text-muted-foreground/50 text-[9px] mt-0.5">
+                          {new Date(n.timestamp).toLocaleTimeString()}
+                        </div>
+                      </div>
+                      {!n.dismissed && (
+                        <button
+                          className="text-muted-foreground hover:text-foreground text-[10px]"
+                          onClick={() => onDismissNotification(n.id)}
+                        >
+                          X
+                        </button>
+                      )}
+                    </div>
+                  ))}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+
+// ─── Helper components ─────────────────────────────────────────────────────
+
+function StatusBar({
+  label,
+  value,
+  color,
+  text,
+}: {
+  label: string;
+  value: number;
+  color: string;
+  text?: string;
+}) {
+  return (
+    <div className="flex items-center gap-1.5">
+      <span className="text-[9px] text-muted-foreground w-5 text-right font-mono">{label}</span>
+      <div className="flex-1 h-1.5 bg-muted/30 rounded-full overflow-hidden">
+        <div
+          className={cn("h-full bg-gradient-to-r rounded-full transition-all duration-500", color)}
+          style={{ width: `${Math.max(0, Math.min(100, value))}%` }}
+        />
+      </div>
+      <span className="text-[9px] text-muted-foreground w-8 font-mono">
+        {text || `${value}%`}
       </span>
     </div>
   );
 }
+
+function StatRow({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex justify-between items-center">
+      <span className="text-muted-foreground">{label}</span>
+      <span className="font-mono">{value}</span>
+    </div>
+  );
+}

client/src/pages/Home.tsx

@@ -13,6 +13,7 @@ import { CronManagerPanel } from "@/components/CronManagerPanel";
 import { PluginMarketplace } from "@/components/PluginMarketplace";
 import { ThinkingBlock, extractThinkingBlocks } from "@/components/ThinkingBlock";
 import { BuddySprite } from "@/components/BuddySprite";
+import { useBuddy } from "@/buddy";
 import { useChat, type ChatMessage } from "@/hooks/useChat";
 import {
   Zap,
@@ -58,6 +59,9 @@ export default function Home() {
   const [pluginMarketplaceOpen, setPluginMarketplaceOpen] = useState(false);
   const [buddyVisible, setBuddyVisible] = useState(true);
 
+  // Buddy companion pet system
+  const buddy = useBuddy(isStreaming, messages.length > 0);
+
   // Plan mode & effort state
   const [effortLevel, setEffortLevel] = useState<EffortLevel>("high");
   const [planMode, setPlanMode] = useState(false);
@@ -998,9 +1002,16 @@ export default function Home() {
 
       {/* Buddy Sprite */}
       <BuddySprite
+        state={buddy.state}
+        mood={buddy.mood}
+        notifications={buddy.notifications}
+        undismissedCount={buddy.undismissedCount}
         visible={buddyVisible}
-        mood={isStreaming ? "working" : messages.length === 0 ? "idle" : "happy"}
-        onClick={() => setBuddyVisible(false)}
+        onFeed={buddy.feed}
+        onPet={buddy.pet}
+        onDismissNotification={buddy.dismissNotification}
+        onDismissAll={buddy.dismissAll}
+        onRename={buddy.renameBuddy}
       />
 
       {/* Plugin Marketplace panel */}