@elizaos/app-core 2.0.0-alpha.37

package/src/components/EmotePicker.tsx

@@ -0,0 +1,529 @@
+import { Menu, X } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { client } from "../api";
+import {
+  dispatchMiladyEvent,
+  EMOTE_PICKER_EVENT,
+  STOP_EMOTE_EVENT,
+} from "../events";
+import { useTimeout } from "../hooks";
+import { useApp } from "../state";
+
+// Types
+interface EmoteItem {
+  id: string;
+  name: string;
+  category: string;
+  icon: string;
+}
+
+// Category icons
+const CATEGORY_ICONS: Record<string, string> = {
+  greeting: "\u{1F44B}",
+  emotion: "\u{1F622}",
+  dance: "\u{1F57A}",
+  combat: "\u{2694}",
+  idle: "\u{1F9D8}",
+  movement: "\u{1F3C3}",
+  other: "\u{2728}",
+};
+
+// Emote icons
+const EMOTE_ICONS: Record<string, string> = {
+  wave: "\u{1F44B}",
+  kiss: "\u{1F48B}",
+  crying: "\u{1F62D}",
+  sorrow: "\u{1F614}",
+  "rude-gesture": "\u{1F595}",
+  "looking-around": "\u{1F440}",
+  "dance-happy": "\u{1F483}",
+  "dance-breaking": "\u{1F938}",
+  "dance-hiphop": "\u{1F57A}",
+  "dance-popping": "\u{1FAA9}",
+  "hook-punch": "\u{1F44A}",
+  punching: "\u{1F94A}",
+  "firing-gun": "\u{1F52B}",
+  "sword-swing": "\u{2694}",
+  chopping: "\u{1FA93}",
+  "spell-cast": "\u{1FA84}",
+  range: "\u{1F3F9}",
+  death: "\u{1F480}",
+  idle: "\u{1F9D8}",
+  talk: "\u{1F5E3}",
+  squat: "\u{1F9CE}",
+  fishing: "\u{1F3A3}",
+  float: "\u{1F54A}",
+  jump: "\u{1F4A8}",
+  flip: "\u{1F938}",
+  run: "\u{1F3C3}",
+  walk: "\u{1F6B6}",
+  crawling: "\u{1F40D}",
+  fall: "\u{1F4A5}",
+};
+
+// All emotes
+const ALL_EMOTES: EmoteItem[] = [
+  // Greeting
+  { id: "wave", name: "Wave", category: "greeting", icon: EMOTE_ICONS.wave },
+  { id: "kiss", name: "Kiss", category: "greeting", icon: EMOTE_ICONS.kiss },
+
+  // Emotion
+  {
+    id: "crying",
+    name: "Crying",
+    category: "emotion",
+    icon: EMOTE_ICONS.crying,
+  },
+  {
+    id: "sorrow",
+    name: "Sorrow",
+    category: "emotion",
+    icon: EMOTE_ICONS.sorrow,
+  },
+  {
+    id: "rude-gesture",
+    name: "Rude Gesture",
+    category: "emotion",
+    icon: EMOTE_ICONS["rude-gesture"],
+  },
+  {
+    id: "looking-around",
+    name: "Looking Around",
+    category: "emotion",
+    icon: EMOTE_ICONS["looking-around"],
+  },
+
+  // Dance
+  {
+    id: "dance-happy",
+    name: "Dance Happy",
+    category: "dance",
+    icon: EMOTE_ICONS["dance-happy"],
+  },
+  {
+    id: "dance-breaking",
+    name: "Dance Breaking",
+    category: "dance",
+    icon: EMOTE_ICONS["dance-breaking"],
+  },
+  {
+    id: "dance-hiphop",
+    name: "Dance Hip Hop",
+    category: "dance",
+    icon: EMOTE_ICONS["dance-hiphop"],
+  },
+  {
+    id: "dance-popping",
+    name: "Dance Popping",
+    category: "dance",
+    icon: EMOTE_ICONS["dance-popping"],
+  },
+
+  // Combat
+  {
+    id: "hook-punch",
+    name: "Hook Punch",
+    category: "combat",
+    icon: EMOTE_ICONS["hook-punch"],
+  },
+  {
+    id: "punching",
+    name: "Punching",
+    category: "combat",
+    icon: EMOTE_ICONS.punching,
+  },
+  {
+    id: "firing-gun",
+    name: "Firing Gun",
+    category: "combat",
+    icon: EMOTE_ICONS["firing-gun"],
+  },
+  {
+    id: "sword-swing",
+    name: "Sword Swing",
+    category: "combat",
+    icon: EMOTE_ICONS["sword-swing"],
+  },
+  {
+    id: "chopping",
+    name: "Chopping",
+    category: "combat",
+    icon: EMOTE_ICONS.chopping,
+  },
+  {
+    id: "spell-cast",
+    name: "Spell Cast",
+    category: "combat",
+    icon: EMOTE_ICONS["spell-cast"],
+  },
+  { id: "range", name: "Range", category: "combat", icon: EMOTE_ICONS.range },
+  { id: "death", name: "Death", category: "combat", icon: EMOTE_ICONS.death },
+
+  // Idle
+  { id: "idle", name: "Idle", category: "idle", icon: EMOTE_ICONS.idle },
+  { id: "talk", name: "Talk", category: "idle", icon: EMOTE_ICONS.talk },
+  { id: "squat", name: "Squat", category: "idle", icon: EMOTE_ICONS.squat },
+  {
+    id: "fishing",
+    name: "Fishing",
+    category: "idle",
+    icon: EMOTE_ICONS.fishing,
+  },
+
+  // Movement
+  { id: "float", name: "Float", category: "movement", icon: EMOTE_ICONS.float },
+  { id: "jump", name: "Jump", category: "movement", icon: EMOTE_ICONS.jump },
+  { id: "flip", name: "Flip", category: "movement", icon: EMOTE_ICONS.flip },
+  { id: "run", name: "Run", category: "movement", icon: EMOTE_ICONS.run },
+  { id: "walk", name: "Walk", category: "movement", icon: EMOTE_ICONS.walk },
+  {
+    id: "crawling",
+    name: "Crawling",
+    category: "movement",
+    icon: EMOTE_ICONS.crawling,
+  },
+  { id: "fall", name: "Fall", category: "movement", icon: EMOTE_ICONS.fall },
+];
+
+const CATEGORIES = [
+  "greeting",
+  "emotion",
+  "dance",
+  "combat",
+  "idle",
+  "movement",
+];
+
+const CATEGORY_LABELS: Record<string, string> = {
+  greeting: "Greeting",
+  emotion: "Emotion",
+  dance: "Dance",
+  combat: "Combat",
+  idle: "Idle",
+  movement: "Movement",
+};
+
+export function EmotePicker() {
+  const { setTimeout } = useTimeout();
+
+  const { emotePickerOpen, openEmotePicker, closeEmotePicker, t } = useApp();
+  const [search, setSearch] = useState("");
+  const [playing, setPlaying] = useState<string | null>(null);
+  const [activeCategory, setActiveCategory] = useState<string | null>(null);
+
+  const inputRef = useRef<HTMLInputElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const posRef = useRef({ x: 0, y: 0 });
+  const dragOrigin = useRef<{
+    startX: number;
+    startY: number;
+    rect: DOMRect;
+  } | null>(null);
+
+  // Apply position to panel
+  const applyPosition = useCallback((x: number, y: number) => {
+    const el = panelRef.current;
+    if (!el) return;
+
+    el.style.left = `${x}px`;
+    el.style.top = `${y}px`;
+    el.style.bottom = "auto";
+    el.style.right = "auto";
+
+    posRef.current = { x, y };
+  }, []);
+
+  // Drag handlers
+  const onPointerDown = useCallback(
+    (e: React.PointerEvent<HTMLDivElement>) => {
+      const el = panelRef.current;
+      if (!el) return;
+
+      const rect = el.getBoundingClientRect();
+      dragOrigin.current = {
+        startX: e.clientX,
+        startY: e.clientY,
+        rect,
+      };
+
+      const onPointerMove = (moveEvent: PointerEvent) => {
+        if (!dragOrigin.current) return;
+
+        const dx = moveEvent.clientX - dragOrigin.current.startX;
+        const dy = moveEvent.clientY - dragOrigin.current.startY;
+
+        let newX = dragOrigin.current.rect.left + dx;
+        let newY = dragOrigin.current.rect.top + dy;
+
+        // Clamp to viewport
+        const maxX = window.innerWidth - dragOrigin.current.rect.width;
+        const maxY = window.innerHeight - dragOrigin.current.rect.height;
+
+        newX = Math.max(0, Math.min(newX, maxX));
+        newY = Math.max(0, Math.min(newY, maxY));
+
+        applyPosition(newX, newY);
+      };
+
+      const onPointerUp = () => {
+        dragOrigin.current = null;
+        window.removeEventListener("pointermove", onPointerMove);
+        window.removeEventListener("pointerup", onPointerUp);
+      };
+
+      window.addEventListener("pointermove", onPointerMove);
+      window.addEventListener("pointerup", onPointerUp);
+    },
+    [applyPosition],
+  );
+
+  // Reset position on open
+  useEffect(() => {
+    if (emotePickerOpen && panelRef.current) {
+      panelRef.current.style.left = "";
+      panelRef.current.style.top = "";
+      panelRef.current.style.bottom = "";
+      panelRef.current.style.right = "";
+      posRef.current = { x: 0, y: 0 };
+    }
+  }, [emotePickerOpen]);
+
+  // Filter emotes
+  const filteredEmotes = useMemo(() => {
+    let emotes = ALL_EMOTES;
+
+    if (activeCategory) {
+      emotes = emotes.filter((e) => e.category === activeCategory);
+    }
+
+    if (search.trim()) {
+      const query = search.toLowerCase();
+      emotes = emotes.filter(
+        (e) =>
+          e.name.toLowerCase().includes(query) ||
+          e.id.toLowerCase().includes(query),
+      );
+    }
+
+    return emotes;
+  }, [search, activeCategory]);
+
+  // Play emote
+  const playEmote = useCallback(
+    async (emoteId: string) => {
+      setPlaying(emoteId);
+      try {
+        await client.playEmote(emoteId);
+      } catch (err) {
+        console.error("Failed to play emote:", err);
+      } finally {
+        setTimeout(() => setPlaying(null), 1000);
+      }
+    },
+    [setTimeout],
+  );
+
+  // Stop emote
+  const stopEmote = useCallback(() => {
+    dispatchMiladyEvent(STOP_EMOTE_EVENT);
+    setPlaying(null);
+  }, []);
+
+  // Keyboard shortcuts
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Cmd+E toggle
+      if ((e.metaKey || e.ctrlKey) && e.key === "e") {
+        e.preventDefault();
+        if (emotePickerOpen) {
+          closeEmotePicker();
+        } else {
+          openEmotePicker();
+        }
+      }
+
+      // Escape to close
+      if (e.key === "Escape" && emotePickerOpen) {
+        closeEmotePicker();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [emotePickerOpen, openEmotePicker, closeEmotePicker]);
+
+  // Electron IPC listener
+  useEffect(() => {
+    const handleElectronToggle = () => {
+      if (emotePickerOpen) {
+        closeEmotePicker();
+      } else {
+        openEmotePicker();
+      }
+    };
+
+    document.addEventListener(EMOTE_PICKER_EVENT, handleElectronToggle);
+    return () =>
+      document.removeEventListener(EMOTE_PICKER_EVENT, handleElectronToggle);
+  }, [emotePickerOpen, openEmotePicker, closeEmotePicker]);
+
+  // Focus search input on open
+  useEffect(() => {
+    if (emotePickerOpen && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [emotePickerOpen]);
+
+  if (!emotePickerOpen) return null;
+
+  return (
+    <div
+      ref={panelRef}
+      className="fixed bottom-4 left-4 z-[9999] w-[320px] rounded-xl shadow-2xl"
+      style={{
+        background: "rgba(18, 22, 32, 0.96)",
+        border: "1px solid rgba(240, 178, 50, 0.18)",
+        backdropFilter: "blur(24px)",
+        boxShadow: "0 8px 60px rgba(0,0,0,0.6), 0 0 40px rgba(240,178,50,0.06)",
+      }}
+    >
+      {/* Header */}
+      <div
+        className="flex cursor-move items-center justify-between px-3 py-2"
+        style={{ borderBottom: "1px solid rgba(255,255,255,0.08)" }}
+        onPointerDown={onPointerDown}
+      >
+        <div className="flex items-center gap-2">
+          <Menu
+            className="w-4 h-4"
+            style={{ color: "rgba(255,255,255,0.45)" }}
+          />
+          <span
+            className="text-sm font-semibold"
+            style={{ color: "rgba(240,238,250,0.92)" }}
+          >
+            {t("emotepicker.Emotes")}
+          </span>
+        </div>
+
+        <div className="flex items-center gap-2">
+          {/* Stop button */}
+          <button
+            type="button"
+            onClick={stopEmote}
+            className="rounded px-2 py-1 text-xs font-medium transition-colors"
+            style={{ background: "#ef4444", color: "#fff" }}
+          >
+            {t("game.stop")}
+          </button>
+
+          {/* Shortcut label */}
+          <span className="text-xs" style={{ color: "rgba(255,255,255,0.45)" }}>
+            ⌘E
+          </span>
+
+          {/* Close button */}
+          <button
+            type="button"
+            onClick={closeEmotePicker}
+            style={{ color: "rgba(255,255,255,0.45)" }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.color = "rgba(240,238,250,0.92)";
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.color = "rgba(255,255,255,0.45)";
+            }}
+          >
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+      </div>
+
+      {/* Search */}
+      <div
+        className="px-3 py-2"
+        style={{ borderBottom: "1px solid rgba(255,255,255,0.08)" }}
+      >
+        <input
+          ref={inputRef}
+          type="text"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder={t("emotepicker.SearchEmotes")}
+          className="w-full rounded px-2 py-1 text-sm focus:outline-none focus:ring-1"
+          style={{
+            background: "rgba(255,255,255,0.06)",
+            color: "rgba(240,238,250,0.92)",
+            border: "1px solid rgba(255,255,255,0.1)",
+          }}
+        />
+      </div>
+
+      {/* Category tabs */}
+      <div
+        className="flex gap-1 overflow-x-auto px-3 py-2"
+        style={{ borderBottom: "1px solid rgba(255,255,255,0.08)" }}
+      >
+        <button
+          type="button"
+          onClick={() => setActiveCategory(null)}
+          className="shrink-0 rounded px-2 py-1 text-xs font-medium transition-colors"
+          style={{
+            background:
+              activeCategory === null ? "#f0b232" : "rgba(255,255,255,0.06)",
+            color: activeCategory === null ? "#000" : "rgba(255,255,255,0.6)",
+          }}
+        >
+          {t("wallet.all")}
+        </button>
+        {CATEGORIES.map((cat) => (
+          <button
+            type="button"
+            key={cat}
+            onClick={() => setActiveCategory(cat)}
+            className="shrink-0 rounded px-2 py-1 text-xs font-medium transition-colors"
+            style={{
+              background:
+                activeCategory === cat ? "#f0b232" : "rgba(255,255,255,0.06)",
+              color: activeCategory === cat ? "#000" : "rgba(255,255,255,0.6)",
+            }}
+          >
+            <span className="mr-1">{CATEGORY_ICONS[cat]}</span>
+            {CATEGORY_LABELS[cat]}
+          </button>
+        ))}
+      </div>
+
+      {/* Emote grid */}
+      <div className="max-h-[400px] overflow-y-auto p-3">
+        <div className="grid grid-cols-5 gap-2">
+          {filteredEmotes.map((emote) => (
+            <button
+              type="button"
+              key={emote.id}
+              onClick={() => playEmote(emote.id)}
+              disabled={playing === emote.id}
+              title={emote.name}
+              className="flex aspect-square items-center justify-center rounded text-2xl transition-colors"
+              style={{
+                background:
+                  playing === emote.id ? "#f0b232" : "rgba(255,255,255,0.06)",
+              }}
+            >
+              {emote.icon}
+            </button>
+          ))}
+        </div>
+
+        {filteredEmotes.length === 0 && (
+          <div
+            className="py-8 text-center text-sm"
+            style={{ color: "rgba(255,255,255,0.3)" }}
+          >
+            {t("emotepicker.NoEmotesFound")}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/ErrorBoundary.tsx

@@ -0,0 +1,76 @@
+import { Component, type ErrorInfo, type ReactNode } from "react";
+
+interface Props {
+  children: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+/**
+ * Catches React render errors and shows a recovery UI instead of a white screen.
+ * Wrap route content or the entire app shell with this boundary.
+ */
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    console.error("[ErrorBoundary] Uncaught render error:", error, info);
+  }
+
+  handleReload = () => {
+    this.setState({ hasError: false, error: null });
+    window.location.reload();
+  };
+
+  handleDismiss = () => {
+    this.setState({ hasError: false, error: null });
+  };
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="flex items-center justify-center h-full w-full min-h-[200px] bg-bg text-txt">
+          <div className="text-center max-w-md p-8">
+            <h2 className="text-lg font-semibold mb-2">Something went wrong</h2>
+            <p className="text-sm text-muted mb-1">
+              An unexpected error occurred.
+            </p>
+            {this.state.error && (
+              <p className="text-xs text-muted font-mono bg-card rounded px-3 py-2 mb-4 break-all">
+                {this.state.error.message}
+              </p>
+            )}
+            <div className="flex gap-3 justify-center">
+              <button
+                type="button"
+                onClick={this.handleDismiss}
+                className="px-4 py-2 text-sm font-medium border border-border rounded-md hover:bg-card cursor-pointer"
+              >
+                Dismiss
+              </button>
+              <button
+                type="button"
+                onClick={this.handleReload}
+                className="px-4 py-2 text-sm font-medium bg-accent text-accent-fg rounded-md hover:opacity-90 cursor-pointer"
+              >
+                Reload Page
+              </button>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}