claude-pet 2.0.0

package/src/main/share-card.ts

@@ -0,0 +1,153 @@
+import { BrowserWindow, dialog, Notification, app } from 'electron';
+import path from 'path';
+import fs from 'fs';
+import { getStore } from './ipc-handlers';
+import { t, DEFAULT_LOCALE } from '../shared/i18n';
+import { PetState, Locale } from '../shared/types';
+import { getQuoteById } from '../core/quote-registry';
+
+const projectRoot = path.resolve(__dirname, '..', '..', '..');
+
+let offscreenWin: BrowserWindow | null = null;
+let isGenerating = false;
+
+let currentPetState: PetState | null = null;
+
+export function setShareCardState(state: PetState): void {
+  currentPetState = state;
+}
+
+const MOOD_COLORS: Record<string, string> = {
+  happy: '#22c55e',
+  playful: '#f59e0b',
+  sleepy: '#6b7280',
+  worried: '#eab308',
+  bored: '#9ca3af',
+  confused: '#8b5cf6',
+  sleeping: '#6b7280',
+};
+
+function getOffscreenWindow(): BrowserWindow {
+  if (offscreenWin && !offscreenWin.isDestroyed()) {
+    return offscreenWin;
+  }
+
+  const templatePath = app.isPackaged
+    ? path.join(projectRoot, 'dist/renderer/share-card-template/card.html')
+    : path.join(process.cwd(), 'src/renderer/share-card-template/card.html');
+
+  offscreenWin = new BrowserWindow({
+    width: 600,
+    height: 400,
+    show: false,
+    webPreferences: {
+      offscreen: true,
+      contextIsolation: false,
+      nodeIntegration: false,
+    },
+  });
+
+  offscreenWin.loadFile(templatePath);
+  offscreenWin.on('closed', () => { offscreenWin = null; });
+
+  return offscreenWin;
+}
+
+export async function generateShareCard(quoteId?: string): Promise<boolean> {
+  if (isGenerating) return false;
+  isGenerating = true;
+
+  const locale = getStore().get('locale', DEFAULT_LOCALE) as Locale;
+
+  try {
+    if (!currentPetState) {
+      new Notification({ title: 'Claude Pet', body: t(locale, 'share_no_data') }).show();
+      return false;
+    }
+
+    const win = getOffscreenWindow();
+    await new Promise<void>((resolve) => {
+      if (win.webContents.isLoading()) {
+        win.webContents.once('did-finish-load', () => resolve());
+      } else {
+        resolve();
+      }
+    });
+
+    const charImagePath = app.isPackaged
+      ? path.join(projectRoot, 'dist/renderer/assets/claude-pet.png')
+      : path.join(process.cwd(), 'src/renderer/assets/claude-pet.png');
+
+    let characterDataUrl = '';
+    try {
+      const buf = fs.readFileSync(charImagePath);
+      characterDataUrl = `data:image/png;base64,${buf.toString('base64')}`;
+    } catch { /* fallback: no image */ }
+
+    let rarityBadge = '';
+    if (quoteId) {
+      const entry = getQuoteById(quoteId);
+      if (entry && entry.rarity !== 'common') {
+        const rarityKey = `rarity_${entry.rarity}` as Parameters<typeof t>[1];
+        rarityBadge = t(locale, rarityKey);
+      }
+    }
+
+    // Get locale-specific mood name
+    const moodKey = `mood_${currentPetState.mood}` as Parameters<typeof t>[1];
+    const moodName = t(locale, moodKey);
+
+    // Format generation time in UTC (e.g. "2026-03-10 12:34 UTC")
+    const now = new Date();
+    const generatedAt = now.getUTCFullYear()
+      + '-' + String(now.getUTCMonth() + 1).padStart(2, '0')
+      + '-' + String(now.getUTCDate()).padStart(2, '0')
+      + ' ' + String(now.getUTCHours()).padStart(2, '0')
+      + ':' + String(now.getUTCMinutes()).padStart(2, '0')
+      + ' UTC';
+
+    const cardData = {
+      mood: currentPetState.mood,
+      moodName,
+      moodColor: MOOD_COLORS[currentPetState.mood] || '#ec4899',
+      message: currentPetState.message,
+      weeklyPercent: currentPetState.utilizationPercent,
+      fiveHourPercent: currentPetState.fiveHourPercent,
+      resetsAt: currentPetState.resetsAt,
+      fiveHourResetsAt: currentPetState.fiveHourResetsAt,
+      characterDataUrl,
+      rarityBadge,
+      generatedAt,
+    };
+
+    await win.webContents.executeJavaScript(`window.populateCard(${JSON.stringify(cardData)})`);
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    let image = await win.webContents.capturePage({ x: 0, y: 0, width: 600, height: 400 });
+
+    if (image.isEmpty()) {
+      await new Promise((resolve) => setTimeout(resolve, 200));
+      image = await win.webContents.capturePage({ x: 0, y: 0, width: 600, height: 400 });
+      if (image.isEmpty()) return false;
+    }
+
+    // Show save dialog instead of clipboard copy
+    const timestamp = new Date().toISOString().slice(0, 10);
+    const { filePath, canceled } = await dialog.showSaveDialog({
+      title: t(locale, 'tray_share'),
+      defaultPath: path.join(app.getPath('desktop'), `claude-pet-${timestamp}.png`),
+      filters: [{ name: 'PNG Image', extensions: ['png'] }],
+    });
+
+    if (canceled || !filePath) return false;
+
+    fs.writeFileSync(filePath, image.toPNG());
+
+    return true;
+  } catch (err) {
+    console.error('[share-card] Error generating card:', err);
+    return false;
+  } finally {
+    isGenerating = false;
+  }
+}

package/src/main/skin-manager.ts

@@ -0,0 +1,119 @@
+import { app, dialog, nativeImage } from 'electron';
+import fs from 'fs';
+import path from 'path';
+import { SkinConfig, SkinUploadResponse } from '../shared/types';
+import { getStore } from './ipc-handlers';
+
+const SKINS_DIR = path.join(app.getPath('userData'), 'skins');
+const MAX_FILE_SIZE = 2 * 1024 * 1024; // 2MB
+const ALLOWED_EXTENSIONS = ['.png', '.jpg', '.jpeg', '.gif'];
+
+function ensureSkinsDir(): void {
+  if (!fs.existsSync(SKINS_DIR)) {
+    fs.mkdirSync(SKINS_DIR, { recursive: true });
+  }
+}
+
+function cleanupOldSkins(keepPaths: string[]): void {
+  ensureSkinsDir();
+  const files = fs.readdirSync(SKINS_DIR);
+  for (const file of files) {
+    const fullPath = path.join(SKINS_DIR, file);
+    if (!keepPaths.includes(fullPath)) {
+      try { fs.unlinkSync(fullPath); } catch { /* ignore */ }
+    }
+  }
+}
+
+const VALID_MOODS = ['happy', 'playful', 'sleepy', 'worried', 'bored', 'confused', 'sleeping'];
+
+export async function uploadSkinImage(mood?: string): Promise<SkinUploadResponse> {
+  if (mood && !VALID_MOODS.includes(mood)) return { ok: false, error: 'invalid_format' };
+
+  const result = await dialog.showOpenDialog({
+    title: 'Select Character Image',
+    filters: [{ name: 'Images', extensions: ['png', 'jpg', 'jpeg', 'gif'] }],
+    properties: ['openFile'],
+  });
+
+  if (result.canceled || result.filePaths.length === 0) return null;
+
+  const srcPath = result.filePaths[0];
+  const ext = path.extname(srcPath).toLowerCase();
+
+  if (!ALLOWED_EXTENSIONS.includes(ext)) return { ok: false, error: 'invalid_format' };
+
+  const stat = fs.statSync(srcPath);
+  if (stat.size > MAX_FILE_SIZE) return { ok: false, error: 'file_too_large' };
+
+  ensureSkinsDir();
+  const fileName = mood
+    ? `skin-${mood}-${Date.now()}${ext}`
+    : `skin-${Date.now()}${ext}`;
+  const destPath = path.join(SKINS_DIR, fileName);
+  fs.copyFileSync(srcPath, destPath);
+
+  const image = nativeImage.createFromPath(destPath);
+  const size = image.getSize();
+
+  if (size.width === 0 || size.height === 0) {
+    try { fs.unlinkSync(destPath); } catch { /* ignore */ }
+    return { ok: false, error: 'invalid_format' };
+  }
+
+  return { ok: true, path: destPath, width: size.width, height: size.height };
+}
+
+export function resetSkin(): void {
+  const store = getStore();
+  (store as any).set('skin', { mode: 'default' });
+  cleanupOldSkins([]);
+}
+
+export function getSkinConfig(): SkinConfig {
+  const store = getStore();
+  const config = (store as any).get('skin', { mode: 'default' }) as SkinConfig;
+
+  // Normalize spritesheet config for backward compatibility
+  if (config.spritesheet) {
+    const ss = config.spritesheet;
+    if (!ss.imageWidth && ss.frameWidth && ss.columns) {
+      ss.imageWidth = ss.frameWidth * ss.columns;
+    }
+    if (!ss.imageHeight && ss.frameHeight && ss.rows) {
+      ss.imageHeight = ss.frameHeight * ss.rows;
+    }
+    // Migrate old { col, row } moodMap to { startFrame, endFrame, fps }
+    if (ss.moodMap) {
+      for (const [key, val] of Object.entries(ss.moodMap)) {
+        const v = val as any;
+        if (v && typeof v.col === 'number' && typeof v.startFrame !== 'number') {
+          (ss.moodMap as any)[key] = { startFrame: v.row * ss.columns + v.col, endFrame: v.row * ss.columns + v.col, fps: 8 };
+        }
+      }
+    }
+  }
+
+  return config;
+}
+
+export function saveSkinConfig(config: SkinConfig): void {
+  const store = getStore();
+
+  // Validate spritesheet dimensions
+  if (config.spritesheet) {
+    config.spritesheet.columns = Math.max(1, Math.min(16, config.spritesheet.columns || 1));
+    config.spritesheet.rows = Math.max(1, Math.min(16, config.spritesheet.rows || 1));
+  }
+
+  // Collect paths to keep
+  const keepPaths: string[] = [];
+  if (config.singleImagePath) keepPaths.push(config.singleImagePath);
+  if (config.moodImages) {
+    Object.values(config.moodImages).forEach((p) => { if (p) keepPaths.push(p); });
+  }
+  if (config.spritesheet?.imagePath) keepPaths.push(config.spritesheet.imagePath);
+
+  cleanupOldSkins(keepPaths);
+  (store as any).set('skin', config);
+}

package/src/main/tray.ts

@@ -0,0 +1,94 @@
+import path from 'path';
+import { Tray, Menu, nativeImage, BrowserWindow, app } from 'electron';
+import { checkForUpdatesManual } from './auto-updater';
+import { showSettingsWindow } from './settings-window';
+import { generateShareCard } from './share-card';
+import { getStore } from './ipc-handlers';
+import { t, DEFAULT_LOCALE } from '../shared/i18n';
+import { Locale, PetSettings } from '../shared/types';
+
+let trayInstance: Tray | null = null;
+
+export function createTray(mainWindow: BrowserWindow): Tray {
+  const icon = buildTrayIcon();
+
+  trayInstance = new Tray(icon);
+  trayInstance.setToolTip('Claude Pet');
+
+  updateContextMenu(mainWindow);
+
+  trayInstance.on('double-click', () => {
+    toggleWindowVisibility(mainWindow);
+  });
+
+  // Re-build menu when window visibility changes so label stays in sync
+  mainWindow.on('show', () => updateContextMenu(mainWindow));
+  mainWindow.on('hide', () => updateContextMenu(mainWindow));
+
+  return trayInstance;
+}
+
+function buildTrayIcon(): Electron.NativeImage {
+  const iconName = 'tray-icon.png';
+  const iconPath = app.isPackaged
+    ? path.join(process.resourcesPath, iconName)
+    : path.join(process.cwd(), 'build', iconName);
+  return nativeImage.createFromPath(iconPath);
+}
+
+function toggleWindowVisibility(win: BrowserWindow): void {
+  if (win.isVisible()) {
+    win.hide();
+  } else {
+    win.show();
+    win.focus();
+  }
+}
+
+function updateContextMenu(mainWindow: BrowserWindow): void {
+  if (!trayInstance) return;
+
+  const isVisible = mainWindow.isVisible();
+  const locale = getStore().get('locale', DEFAULT_LOCALE) as Locale;
+
+  const contextMenu = Menu.buildFromTemplate([
+    {
+      label: isVisible ? 'Hide Pet' : 'Show Pet',
+      click: () => toggleWindowVisibility(mainWindow),
+    },
+    {
+      label: t(locale, 'always_on_top'),
+      type: 'checkbox',
+      checked: mainWindow.isAlwaysOnTop(),
+      click: (menuItem) => {
+        mainWindow.setAlwaysOnTop(menuItem.checked);
+        getStore().set('alwaysOnTop' as keyof PetSettings, menuItem.checked);
+      },
+    },
+    { type: 'separator' },
+    {
+      label: t(locale, 'tray_share'),
+      click: () => { void generateShareCard(); },
+    },
+    {
+      label: 'Settings...',
+      click: () => showSettingsWindow(),
+    },
+    { type: 'separator' },
+    {
+      label: `v${app.isPackaged ? app.getVersion() : require(path.join(process.cwd(), 'package.json')).version}`,
+      enabled: false,
+    },
+    {
+      label: t(locale, 'tray_check_update'),
+      click: () => { void checkForUpdatesManual(); },
+    },
+    { type: 'separator' },
+    {
+      label: 'Quit',
+      click: () => app.quit(),
+    },
+  ]);
+
+  trayInstance.setContextMenu(contextMenu);
+}

package/src/renderer/AGENTS.md

@@ -0,0 +1,62 @@
+<!-- Parent: ../AGENTS.md -->
+<!-- Generated: 2026-03-14 -->
+
+# src/renderer/
+
+## Purpose
+The `renderer/` directory is the React 19 frontend for the Electron renderer process. It renders the transparent widget (character, speech bubble, usage bars) and the settings window as a single Vite-bundled SPA. Page routing is hash-based (`#settings` → Settings page, default → main widget). The renderer communicates with the main process exclusively through `window.electronAPI`, the context-bridge object exposed by `preload.ts`.
+
+## Key Files
+| File | Description |
+|------|-------------|
+| `main.tsx` | React entry point — mounts `<App />` into `#root` |
+| `App.tsx` | Root component — reads `window.location.hash` to route between `<MainView>` (widget) and `<Settings>`; `MainView` owns drag logic, hit-test mouse switching, speech bubble lifecycle, and layout |
+| `index.html` | HTML shell for the Vite build |
+| `electron.d.ts` | TypeScript declaration for `window.electronAPI` — must be kept in sync with `preload.ts` |
+
+## Subdirectories
+| Directory | Purpose |
+|-----------|---------|
+| `components/` | Reusable UI components: Character, SpeechBubble, UsageIndicator |
+| `hooks/` | Custom React hooks: usePetState, useWidgetMode |
+| `pages/` | Full-page views: Settings, Collection |
+| `styles/` | Global CSS animations |
+| `assets/` | Static assets bundled by Vite (character sprite PNG) |
+| `share-card-template/` | HTML template rendered off-screen for share card image generation |
+
+## For AI Agents
+
+### Working In This Directory
+- The renderer runs in a **context-isolated** Electron renderer process. `window.electronAPI` is the only bridge to the main process. Never use `require` or direct Node/Electron imports here.
+- Hash-based routing: `App.tsx` switches on `window.location.hash`. To add a new page, add a hash check and a new component in `pages/`.
+- The widget window is **200×250 px**. Keep all layout within these bounds; avoid fixed pixel sizes that assume a larger viewport.
+- Drag-to-move is implemented in `App.tsx` using `screen{X,Y}` + `window.electronAPI.moveWindow()`. The character's `ref` is used for hit-testing mouse position.
+- The renderer has no access to the filesystem or Node APIs. Skin image paths are `file://` URIs received from the main process.
+- All user-facing strings must go through `t(locale, key)` from `src/shared/i18n.ts` — no hardcoded English strings in JSX.
+- In development mode, `usePetState` exposes `window.setMood(moodName)` and `window.resetMood()` helpers in the browser console.
+
+### Testing Requirements
+- No automated tests exist for the renderer. Test visually via `npm run dev`.
+- Verify all moods display correctly: angry, worried, happy, proud, confused, sleeping.
+- Verify both mini and expanded usage bar modes (click the bar to toggle).
+- Verify the speech bubble triggers on message change and auto-dismisses.
+
+### Common Patterns
+- Receiving live state: `window.electronAPI.onPetStateUpdate(callback)` returns an unsubscribe function; always return it from `useEffect`.
+- One-time state fetch: `window.electronAPI.getPetState()`, `window.electronAPI.getSettings()`, `window.electronAPI.getSkinConfig()`.
+- Inline styles with `CSSProperties` typed objects rather than CSS modules (see `pages/Settings.tsx` for the `s` style object pattern).
+- Conditional animation: pass the current `expression` string to look up from `MOOD_ANIMATIONS` or `MOOD_AURA` record maps in `Character.tsx`.
+
+## Dependencies
+### Internal
+- `../shared/types` — all shared types and `IPC_CHANNELS`
+- `../shared/i18n` — `t()`, `DEFAULT_LOCALE`, `LOCALE_LABELS`
+- `../core/pet-messages` — `MESSAGE_POOLS` (used by `usePetState` debug helper)
+- `../core/quote-registry` — `QUOTE_REGISTRY` (rendered in Collection page)
+- `../core/badge-registry` — `BADGE_REGISTRY` (rendered in Collection page)
+
+### External
+- `react` ^19, `react-dom` ^19
+- `vite` ^7 (build), `@vitejs/plugin-react` (JSX transform)
+
+<!-- MANUAL: -->

package/src/renderer/App.tsx

@@ -0,0 +1,270 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { usePetState } from './hooks/usePetState';
+import { useWidgetMode } from './hooks/useWidgetMode';
+import { Character } from './components/Character';
+import { SpeechBubble } from './components/SpeechBubble';
+import { WeeklyBar, FiveHourBar, MiniBar, OfflineLabel } from './components/UsageIndicator';
+import Settings from './pages/Settings';
+import { Locale, SkinConfig } from '../shared/types';
+import { t, DEFAULT_LOCALE } from '../shared/i18n';
+
+function MainView() {
+  const petState = usePetState();
+  const { mode, onToggle } = useWidgetMode();
+  const [locale, setLocale] = useState<Locale>(DEFAULT_LOCALE);
+  const [skinConfig, setSkinConfig] = useState<SkinConfig | undefined>();
+  const [showDragHint, setShowDragHint] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const [bubbleVisible, setBubbleVisible] = useState(false);
+  const [bubbleDirection, setBubbleDirection] = useState<'up' | 'down'>('up');
+  const prevMessageRef = useRef<string>('');
+  const characterRef = useRef<HTMLDivElement>(null);
+  const barsRef = useRef<HTMLDivElement>(null);
+  const lastIgnoreRef = useRef(true);
+  const bubbleTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    window.electronAPI.getSettings().then((s) => {
+      if (s && (s as { locale?: Locale }).locale) {
+        setLocale((s as { locale: Locale }).locale);
+      }
+    });
+  }, []);
+
+  useEffect(() => {
+    window.electronAPI.getSkinConfig().then((c) => {
+      if (c) setSkinConfig(c as SkinConfig);
+    });
+    return window.electronAPI.onSkinConfigUpdated((c) => {
+      if (c) setSkinConfig(c as SkinConfig);
+    });
+  }, []);
+
+  // First-run drag hint
+  useEffect(() => {
+    const hintShown = localStorage.getItem('firstRunHintShown');
+    if (!hintShown) {
+      setShowDragHint(true);
+      localStorage.setItem('firstRunHintShown', 'true');
+      setTimeout(() => setShowDragHint(false), 3000);
+    }
+  }, []);
+
+  // Hit-test based dynamic pointer event switching
+  useEffect(() => {
+    const isPointInRef = (ref: React.RefObject<HTMLDivElement | null>, x: number, y: number) => {
+      if (!ref.current) return false;
+      const rect = ref.current.getBoundingClientRect();
+      return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
+    };
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (characterRef.current) {
+        const isOverInteractive = isPointInRef(characterRef, e.clientX, e.clientY)
+          || isPointInRef(barsRef, e.clientX, e.clientY);
+
+        const shouldIgnore = !isOverInteractive;
+        if (shouldIgnore !== lastIgnoreRef.current) {
+          lastIgnoreRef.current = shouldIgnore;
+          window.electronAPI.setIgnoreMouse(shouldIgnore);
+        }
+      }
+    };
+
+    document.addEventListener('mousemove', handleMouseMove);
+    return () => document.removeEventListener('mousemove', handleMouseMove);
+  }, []);
+
+  // Manual window drag on character area
+  const dragRef = useRef<{ startScreenX: number; startScreenY: number; winX: number; winY: number } | null>(null);
+  useEffect(() => {
+    const onMouseDown = (e: MouseEvent) => {
+      // Only start drag if mouse is over the character hit area
+      if (!characterRef.current) return;
+      const rect = characterRef.current.getBoundingClientRect();
+      const isOverCharacter =
+        e.clientX >= rect.left && e.clientX <= rect.right &&
+        e.clientY >= rect.top && e.clientY <= rect.bottom;
+      if (!isOverCharacter) return;
+
+      dragRef.current = {
+        startScreenX: e.screenX,
+        startScreenY: e.screenY,
+        winX: window.screenX,
+        winY: window.screenY,
+      };
+      // Keep mouse events active during drag (prevent hit-test from disabling)
+      lastIgnoreRef.current = false;
+      window.electronAPI.setIgnoreMouse(false);
+    };
+
+    const onMouseMove = (e: MouseEvent) => {
+      if (!dragRef.current) return;
+      const dx = e.screenX - dragRef.current.startScreenX;
+      const dy = e.screenY - dragRef.current.startScreenY;
+      if (!isDragging && (Math.abs(dx) > 3 || Math.abs(dy) > 3)) {
+        setIsDragging(true);
+      }
+      if (isDragging || Math.abs(dx) > 3 || Math.abs(dy) > 3) {
+        window.electronAPI.moveWindow(dragRef.current.winX + dx, dragRef.current.winY + dy);
+      }
+    };
+
+    const onMouseUp = () => {
+      if (dragRef.current) {
+        if (isDragging) {
+          window.electronAPI.savePosition(window.screenX, window.screenY);
+        }
+        dragRef.current = null;
+        setIsDragging(false);
+      }
+    };
+
+    document.addEventListener('mousedown', onMouseDown);
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+    return () => {
+      document.removeEventListener('mousedown', onMouseDown);
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', onMouseUp);
+    };
+  }, [isDragging]);
+
+  const mood = petState?.mood ?? 'sleeping';
+  const message = petState?.message ?? t(locale, 'loading_message');
+  const utilizationPercent = petState?.utilizationPercent ?? 0;
+  const fiveHourPercent = petState?.fiveHourPercent ?? null;
+  const fiveHourResetsAt = petState?.fiveHourResetsAt ?? null;
+  const dataSource = petState?.dataSource ?? 'none';
+  const rateLimited = petState?.rateLimited ?? false;
+
+  // Show speech bubble on message rotation (independent of bar state)
+  useEffect(() => {
+    if (message !== prevMessageRef.current) {
+      prevMessageRef.current = message;
+      if (petState) {
+        const dir = window.screenY < 120 ? 'down' : 'up';
+        setBubbleDirection(dir);
+        setBubbleVisible(true);
+        if (bubbleTimerRef.current) clearTimeout(bubbleTimerRef.current);
+      }
+    }
+  }, [message, petState]);
+
+  const isExpanded = mode === 'expanded';
+
+  // Right-click context menu
+  const handleContextMenu = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    window.electronAPI.showContextMenu();
+  }, []);
+
+  const handleBubbleComplete = useCallback(() => {
+    bubbleTimerRef.current = setTimeout(() => {
+      setBubbleVisible(false);
+      bubbleTimerRef.current = null;
+    }, 1000);
+  }, []);
+
+  const bubble = bubbleVisible ? (
+    <SpeechBubble message={message} mood={mood} tailDirection={bubbleDirection === 'up' ? 'down' : 'up'} onComplete={handleBubbleComplete} />
+  ) : null;
+
+  const character = (
+    <div
+      onContextMenu={handleContextMenu}
+      style={{ position: 'relative' }}
+    >
+      <Character
+        ref={characterRef}
+        expression={mood}
+        growthStage={petState?.growthStage}
+        isDragging={isDragging}
+        skinConfig={skinConfig}
+      />
+      {showDragHint && (
+        <div style={{
+          position: 'absolute',
+          bottom: -20,
+          left: '50%',
+          transform: 'translateX(-50%)',
+          background: 'rgba(0,0,0,0.8)',
+          color: '#fff',
+          fontSize: 10,
+          padding: '2px 8px',
+          borderRadius: 4,
+          whiteSpace: 'nowrap',
+          animation: 'fade-out 3s ease forwards',
+        }}>
+          Drag me to move!
+        </div>
+      )}
+    </div>
+  );
+
+  const isStale = false;
+  const usageBars = dataSource === 'none' ? (
+    <OfflineLabel locale={locale} rateLimited={rateLimited} />
+  ) : isExpanded ? (
+    <div ref={barsRef} onClick={onToggle} style={{ display: 'flex', alignItems: 'flex-start', gap: 6, marginTop: 6, cursor: 'pointer' }}>
+      <WeeklyBar utilizationPercent={utilizationPercent} resetsAt={petState?.resetsAt ?? null} mood={mood} stale={isStale} />
+      {fiveHourPercent != null && (
+        <FiveHourBar fiveHourPercent={fiveHourPercent} fiveHourResetsAt={fiveHourResetsAt} stale={isStale} />
+      )}
+    </div>
+  ) : (
+    <div ref={barsRef} onClick={onToggle} style={{ cursor: 'pointer' }}>
+      <MiniBar utilizationPercent={utilizationPercent} mood={mood} stale={isStale} resetsAt={petState?.resetsAt} />
+    </div>
+  );
+
+  return (
+    <div style={{
+      width: '100%',
+      height: '100%',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: bubbleDirection === 'up' ? 'flex-end' : 'flex-start',
+      background: 'transparent',
+      padding: '8px 0',
+      transition: 'all 300ms ease',
+    }}>
+      {bubbleDirection === 'up' ? (
+        <>
+          {bubble}
+          {bubble && <div style={{ height: 6 }} />}
+          {character}
+          <div style={{ marginTop: 4 }}>{usageBars}</div>
+        </>
+      ) : (
+        <>
+          {character}
+          <div style={{ marginTop: 4 }}>{usageBars}</div>
+          {bubble && <div style={{ height: 6 }} />}
+          {bubble}
+        </>
+      )}
+    </div>
+  );
+}
+
+function getHash(): string {
+  return window.location.hash.replace(/^#\/?/, '');
+}
+
+export default function App() {
+  const [hash, setHash] = useState(getHash);
+
+  useEffect(() => {
+    const handleHashChange = () => setHash(getHash());
+    window.addEventListener('hashchange', handleHashChange);
+    return () => window.removeEventListener('hashchange', handleHashChange);
+  }, []);
+
+  if (hash === 'settings') {
+    return <Settings />;
+  }
+
+  return <MainView />;
+}