@elizaos/app-core 2.0.0-alpha.37

package/dist/components/WhatsAppQrOverlay.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { useWhatsAppPairing } from "../hooks";
+import { useApp } from "../state";
+export function WhatsAppQrOverlay({ accountId = "default", onConnected, }) {
+    const { status, qrDataUrl, phoneNumber, error, startPairing, stopPairing, disconnect, } = useWhatsAppPairing(accountId);
+    const { t } = useApp();
+    // Fire onConnected once when status transitions to "connected"
+    const firedRef = useRef(false);
+    useEffect(() => {
+        if (status === "connected" && onConnected && !firedRef.current) {
+            firedRef.current = true;
+            // Small delay so the user sees the success state briefly
+            const timer = setTimeout(onConnected, 1200);
+            return () => clearTimeout(timer);
+        }
+    }, [status, onConnected]);
+    // ── Connected ────────────────────────────────────────────────────────
+    if (status === "connected") {
+        return (_jsxs("div", { className: "p-4 mt-3", style: {
+                border: "1px solid #22c55e",
+                background: "var(--ok-subtle)",
+            }, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "inline-block w-2 h-2 rounded-full", style: { background: "#22c55e" } }), _jsxs("span", { className: "text-xs font-medium", style: { color: "#22c55e" }, children: [t("onboarding.connected"), phoneNumber ? ` (+${phoneNumber})` : ""] })] }), _jsx("div", { className: "text-[10px] mt-1", style: { color: "var(--muted)" }, children: onConnected
+                        ? "Installing WhatsApp plugin and restarting agent..."
+                        : "WhatsApp is paired. Auth state is saved for automatic reconnection." }), !onConnected && (_jsx("button", { type: "button", className: "mt-2 px-2.5 py-1 text-[10px] bg-transparent cursor-pointer transition-colors", style: { border: "1px solid #ef4444", color: "#ef4444" }, onClick: () => void disconnect(), children: t("whatsappqroverlay.Disconnect") }))] }));
+    }
+    // ── Error / Timeout ──────────────────────────────────────────────────
+    if (status === "error" || status === "timeout") {
+        return (_jsxs("div", { className: "p-4 mt-3", style: {
+                border: "1px solid #ef4444",
+                background: "var(--destructive-subtle)",
+            }, children: [_jsx("div", { className: "text-xs mb-2", style: { color: "#ef4444" }, children: status === "timeout"
+                        ? "QR code expired. Please try again."
+                        : (error ?? "An error occurred.") }), _jsx("button", { type: "button", className: "px-3 py-1.5 text-[11px] bg-transparent cursor-pointer transition-colors", style: { border: "1px solid #f0b232", color: "#f0b232" }, onClick: () => {
+                        firedRef.current = false;
+                        void startPairing();
+                    }, children: t("whatsappqroverlay.TryAgain") })] }));
+    }
+    // ── Idle ──────────────────────────────────────────────────────────────
+    if (status === "idle" || status === "disconnected") {
+        return (_jsxs("div", { className: "p-4 mt-3", style: {
+                border: "1px solid var(--border)",
+                background: "var(--bg-hover)",
+            }, children: [_jsx("div", { className: "text-xs mb-2", style: { color: "var(--muted)" }, children: t("whatsappqroverlay.ScanAQRCodeWith") }), _jsx("div", { className: "text-[10px] mb-2 opacity-70", style: { color: "var(--muted)" }, children: t("whatsappqroverlay.UsesAnUnofficialW") }), _jsx("button", { type: "button", className: "px-3 py-1.5 text-[11px] bg-transparent cursor-pointer transition-colors", style: { border: "1px solid #f0b232", color: "#f0b232" }, onClick: () => {
+                        firedRef.current = false;
+                        void startPairing();
+                    }, children: t("whatsappqroverlay.ConnectWhatsApp") })] }));
+    }
+    // ── Initializing / Waiting for QR ────────────────────────────────────
+    return (_jsx("div", { className: "p-4 mt-3", style: {
+            border: "1px solid rgba(255,255,255,0.08)",
+            background: "rgba(255,255,255,0.04)",
+        }, children: _jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: "shrink-0", children: qrDataUrl ? (_jsx("img", { src: qrDataUrl, alt: "WhatsApp QR Code", className: "w-48 h-48 bg-white", style: {
+                            imageRendering: "pixelated",
+                            border: "1px solid var(--border)",
+                        } })) : (_jsx("div", { className: "w-48 h-48 flex items-center justify-center", style: {
+                            border: "1px solid var(--border)",
+                            background: "var(--bg-hover)",
+                        }, children: _jsx("span", { className: "text-xs animate-pulse", style: { color: "var(--muted)" }, children: t("whatsappqroverlay.GeneratingQR") }) })) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "text-xs font-medium mb-2", style: { color: "var(--text)" }, children: t("whatsappqroverlay.ScanWithWhatsApp") }), _jsxs("ol", { className: "text-[11px] space-y-1 list-decimal pl-4 m-0", style: { color: "var(--muted)" }, children: [_jsx("li", { children: t("whatsappqroverlay.OpenWhatsAppOnYou") }), _jsxs("li", { children: [t("whatsappqroverlay.Tap"), " ", _jsx("strong", { children: t("whatsappqroverlay.Menu") }), " or", " ", _jsx("strong", { children: t("nav.settings") }), " ", t("whatsappqroverlay.andSelect"), " ", _jsx("strong", { children: t("whatsappqroverlay.LinkedDevices") })] }), _jsxs("li", { children: [t("whatsappqroverlay.Tap"), " ", _jsx("strong", { children: t("whatsappqroverlay.LinkADevice") })] }), _jsx("li", { children: t("whatsappqroverlay.PointYourPhoneAt") })] }), _jsxs("div", { className: "mt-3 flex items-center gap-2", children: [_jsx("span", { className: "inline-block w-1.5 h-1.5 rounded-full animate-pulse", style: { background: "#f0b232" } }), _jsx("span", { className: "text-[10px]", style: { color: "var(--muted)" }, children: t("whatsappqroverlay.QRRefreshesAutomat") })] }), _jsx("button", { type: "button", className: "mt-3 px-2.5 py-1 text-[10px] cursor-pointer transition-colors", style: {
+                                border: "1px solid var(--border)",
+                                color: "var(--muted)",
+                            }, onClick: () => void stopPairing(), children: t("onboarding.cancel") })] })] }) }));
+}

package/dist/components/apps/AppDetailPane.d.ts

@@ -0,0 +1,15 @@
+import type { RegistryAppInfo } from "../../api";
+interface AppDetailPaneProps {
+    app: RegistryAppInfo;
+    busy: boolean;
+    compact?: boolean;
+    hasActiveViewer: boolean;
+    isActive: boolean;
+    onBack: () => void;
+    onLaunch: () => void;
+    onOpenCurrentGame: () => void;
+    onOpenCurrentGameInNewTab: () => void;
+}
+export declare function AppDetailPane({ app, busy, compact, hasActiveViewer, isActive, onBack, onLaunch, onOpenCurrentGame, onOpenCurrentGameInNewTab, }: AppDetailPaneProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AppDetailPane.d.ts.map

package/dist/components/apps/AppDetailPane.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppDetailPane.d.ts","sourceRoot":"","sources":["../../../src/components/apps/AppDetailPane.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAKjD,UAAU,kBAAkB;IAC1B,GAAG,EAAE,eAAe,CAAC;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,yBAAyB,EAAE,MAAM,IAAI,CAAC;CACvC;AAED,wBAAgB,aAAa,CAAC,EAC5B,GAAG,EACH,IAAI,EACJ,OAAe,EACf,eAAe,EACf,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,iBAAiB,EACjB,yBAAyB,GAC1B,EAAE,kBAAkB,2CAqNpB"}

package/dist/components/apps/AppDetailPane.js

@@ -0,0 +1,13 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from "@elizaos/ui";
+import { useApp } from "../../state";
+import { getAppDetailExtension } from "./extensions/registry";
+import { CATEGORY_LABELS, getAppEmoji } from "./helpers";
+export function AppDetailPane({ app, busy, compact = false, hasActiveViewer, isActive, onBack, onLaunch, onOpenCurrentGame, onOpenCurrentGameInNewTab, }) {
+    const { t } = useApp();
+    const DetailExtension = getAppDetailExtension(app);
+    if (compact) {
+        return (_jsxs("div", { className: "phone-inline-detail", children: [_jsxs("button", { type: "button", className: "flex items-center gap-1.5 text-[12px] text-muted hover:text-txt mb-4 cursor-pointer", onClick: onBack, children: ["\u2190 ", t("appsview.Back")] }), _jsxs("div", { className: "flex items-center gap-3 mb-4", children: [_jsx("div", { className: "phone-app-icon-lg", children: getAppEmoji(app) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "font-bold text-sm text-txt truncate", children: app.displayName ?? app.name }), _jsx("div", { className: "flex items-center gap-2 mt-0.5", children: isActive ? (_jsx("span", { className: "text-[10px] font-bold text-ok", children: t("appsview.Active") })) : (_jsx("span", { className: "text-[10px] text-muted", children: t("appsview.Inactive") })) })] })] }), _jsx("div", { className: "text-[12px] text-muted leading-relaxed mb-4", children: app.description ?? "No description" }), _jsx(Button, { variant: "default", size: "sm", className: "rounded-xl shadow-sm w-full mb-4", disabled: busy, onClick: onLaunch, children: busy ? "Launching..." : "Launch" }), hasActiveViewer ? (_jsx(Button, { variant: "outline", size: "sm", className: "rounded-xl shadow-sm w-full mb-4", onClick: onOpenCurrentGame, children: "Resume Session" })) : null] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "mb-4", children: _jsx(Button, { variant: "outline", size: "sm", className: "rounded-xl shadow-sm", onClick: onBack, children: t("appsview.Back") }) }), _jsxs("div", { className: "flex items-center gap-4 mb-5", children: [_jsx("div", { className: "phone-app-icon-lg", children: getAppEmoji(app) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "font-bold text-lg text-txt", children: app.displayName ?? app.name }), _jsxs("div", { className: "flex items-center gap-2 mt-1", children: [isActive ? (_jsx("span", { className: "text-[10px] font-bold text-ok", children: t("appsview.Active") })) : (_jsx("span", { className: "text-[10px] text-muted", children: t("appsview.Inactive") })), app.category ? (_jsx("span", { className: "text-[10px] px-1.5 py-0.5 rounded-full border border-border text-muted", children: CATEGORY_LABELS[app.category] ?? app.category })) : null, app.latestVersion ? (_jsxs("span", { className: "text-[10px] text-muted font-mono", children: ["v", app.latestVersion] })) : null] })] })] }), _jsx("div", { className: "text-[13px] text-muted leading-relaxed mb-5 pb-5 border-b border-border", children: app.description ?? "No description available." }), _jsxs("div", { className: "flex flex-wrap gap-2 mb-5", children: [_jsx(Button, { variant: "default", size: "sm", className: "rounded-xl shadow-sm px-6", disabled: busy, onClick: onLaunch, children: busy ? "Launching..." : "Launch" }), hasActiveViewer ? (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", size: "sm", className: "rounded-xl shadow-sm", onClick: onOpenCurrentGame, children: "Resume Session" }), _jsx(Button, { variant: "outline", size: "sm", className: "rounded-xl shadow-sm", onClick: onOpenCurrentGameInNewTab, children: "Open in Tab" })] })) : null] }), _jsxs("div", { className: "flex flex-col gap-3 text-[12px] mb-5", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-muted", children: "Launch type" }), _jsx("span", { className: "text-txt", children: app.launchType || "—" })] }), app.launchUrl ? (_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-muted", children: "URL" }), _jsx("span", { className: "text-txt truncate max-w-[260px]", children: app.launchUrl })] })) : null, app.repository ? (_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-muted", children: "Repository" }), _jsx("a", { href: app.repository, target: "_blank", rel: "noreferrer", className: "text-accent hover:underline truncate max-w-[260px]", children: "GitHub" })] })) : null] }), app.capabilities?.length ? (_jsxs("div", { className: "mb-5", children: [_jsx("div", { className: "text-[11px] text-muted mb-2 font-semibold uppercase tracking-wider", children: "Capabilities" }), _jsx("div", { className: "flex flex-wrap gap-1.5", children: app.capabilities.map((capability) => (_jsx("span", { className: "text-[10px] px-2 py-0.5 rounded-full border border-border text-muted", children: capability }, capability))) })] })) : null, app.viewer ? (_jsxs("div", { className: "mb-5 p-3 rounded-xl border border-border bg-surface", children: [_jsx("div", { className: "text-[11px] text-muted mb-2 font-semibold uppercase tracking-wider", children: "Viewer" }), _jsxs("div", { className: "flex flex-col gap-1.5 text-[11px]", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-muted", children: "URL" }), _jsx("span", { className: "text-txt truncate max-w-[240px]", children: app.viewer.url })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-muted", children: "Auth" }), _jsx("span", { className: "text-txt", children: app.viewer.postMessageAuth ? "enabled" : "disabled" })] })] })] })) : null, DetailExtension ? (_jsx("div", { className: "border-t border-border pt-4", children: _jsx(DetailExtension, { app: app }) })) : null] }));
+}

package/dist/components/apps/AppsCatalogGrid.d.ts

@@ -0,0 +1,20 @@
+import type { RegistryAppInfo } from "../../api";
+interface AppsCatalogGridProps {
+    activeAppNames: Set<string>;
+    activeGameDisplayName: string;
+    error: string | null;
+    hasCurrentGame: boolean;
+    loading: boolean;
+    searchQuery: string;
+    selectedAppName: string | null;
+    showActiveOnly: boolean;
+    visibleApps: RegistryAppInfo[];
+    onOpenCurrentGame: () => void;
+    onRefresh: () => void;
+    onSearchQueryChange: (value: string) => void;
+    onSelectApp: (appName: string) => void;
+    onToggleActiveOnly: () => void;
+}
+export declare function AppsCatalogGrid({ activeAppNames, activeGameDisplayName, error, hasCurrentGame, loading, searchQuery, selectedAppName, showActiveOnly, visibleApps, onOpenCurrentGame, onRefresh, onSearchQueryChange, onSelectApp, onToggleActiveOnly, }: AppsCatalogGridProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AppsCatalogGrid.d.ts.map

package/dist/components/apps/AppsCatalogGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppsCatalogGrid.d.ts","sourceRoot":"","sources":["../../../src/components/apps/AppsCatalogGrid.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAIjD,UAAU,oBAAoB;IAC5B,cAAc,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC5B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,cAAc,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,WAAW,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,kBAAkB,EAAE,MAAM,IAAI,CAAC;CAChC;AAED,wBAAgB,eAAe,CAAC,EAC9B,cAAc,EACd,qBAAqB,EACrB,KAAK,EACL,cAAc,EACd,OAAO,EACP,WAAW,EACX,eAAe,EACf,cAAc,EACd,WAAW,EACX,iBAAiB,EACjB,SAAS,EACT,mBAAmB,EACnB,WAAW,EACX,kBAAkB,GACnB,EAAE,oBAAoB,2CAmGtB"}

package/dist/components/apps/AppsCatalogGrid.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from "@elizaos/ui";
+import { useApp } from "../../state";
+import { getAppEmoji, getAppShortName } from "./helpers";
+export function AppsCatalogGrid({ activeAppNames, activeGameDisplayName, error, hasCurrentGame, loading, searchQuery, selectedAppName, showActiveOnly, visibleApps, onOpenCurrentGame, onRefresh, onSearchQueryChange, onSelectApp, onToggleActiveOnly, }) {
+    const { t } = useApp();
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "mb-4", children: _jsx("input", { type: "text", placeholder: "Search...", value: searchQuery, onChange: (event) => onSearchQueryChange(event.target.value), className: "w-full px-3 py-2 text-[12px] rounded-xl border border-border bg-surface text-txt placeholder:text-muted/50 focus:border-accent focus:outline-none" }) }), _jsxs("div", { className: "mb-4 flex gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", className: "rounded-xl shadow-sm", onClick: onRefresh, children: t("appsview.Refresh") }), _jsx(Button, { variant: showActiveOnly ? "default" : "outline", size: "sm", className: "rounded-xl shadow-sm", onClick: onToggleActiveOnly, children: t("appsview.ActiveOnly") })] }), hasCurrentGame ? (_jsxs("button", { type: "button", className: "w-full mb-4 px-3 py-2.5 rounded-xl border border-ok/30 bg-ok/5 flex items-center gap-2 cursor-pointer hover:bg-ok/10 transition-colors", onClick: onOpenCurrentGame, children: [_jsx("span", { className: "w-2 h-2 rounded-full bg-ok animate-pulse" }), _jsx("span", { className: "text-[11px] font-semibold text-txt flex-1 text-left truncate", children: activeGameDisplayName || "Game running" }), _jsx("span", { className: "text-[10px] text-muted", children: "\u2192" })] })) : null, error ? (_jsx("div", { className: "px-3 py-2 border border-danger/30 rounded-xl text-danger text-[11px] mb-4", children: error })) : null, loading ? (_jsx("div", { className: "text-center py-16 text-muted text-[12px]", children: "Loading..." })) : visibleApps.length === 0 ? (_jsx("div", { className: "text-center py-16 text-muted text-[12px]", children: searchQuery ? "No apps found" : "No apps available" })) : (_jsx("div", { style: {
+                    display: "grid",
+                    gridTemplateColumns: "repeat(3, 1fr)",
+                    gap: "14px 4px",
+                    justifyItems: "center",
+                }, children: visibleApps.map((app) => {
+                    const isActive = activeAppNames.has(app.name);
+                    const isSelected = selectedAppName === app.name;
+                    const displayName = app.displayName ?? getAppShortName(app);
+                    return (_jsxs("button", { type: "button", className: `phone-app-tile group ${isSelected ? "is-selected" : ""}`, title: `Open ${displayName}`, "aria-label": `Open ${displayName}`, onClick: () => onSelectApp(app.name), children: [_jsxs("div", { className: "phone-app-icon", children: [isActive ? (_jsx("span", { className: "absolute -top-0.5 -right-0.5 w-2.5 h-2.5 rounded-full bg-ok border-2 border-card z-10" })) : null, _jsx("span", { className: "text-xl", children: getAppEmoji(app) })] }), _jsx("span", { className: "phone-app-label", children: getAppShortName(app) })] }, app.name));
+                }) }))] }));
+}

package/dist/components/apps/extensions/HyperscapeAppDetailPanel.d.ts

@@ -0,0 +1,3 @@
+import type { AppDetailExtensionProps } from "./types";
+export declare function HyperscapeAppDetailPanel({ app }: AppDetailExtensionProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=HyperscapeAppDetailPanel.d.ts.map

package/dist/components/apps/extensions/HyperscapeAppDetailPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HyperscapeAppDetailPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/apps/extensions/HyperscapeAppDetailPanel.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAwDvD,wBAAgB,wBAAwB,CAAC,EAAE,GAAG,EAAE,EAAE,uBAAuB,2CA4fxE"}

package/dist/components/apps/extensions/HyperscapeAppDetailPanel.js

@@ -0,0 +1,253 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Input } from "@elizaos/ui";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { client, } from "../../../api";
+import { useApp } from "../../../state";
+const HYPERSCAPE_COMMAND_OPTIONS = [
+    "chat",
+    "move",
+    "attack",
+    "gather",
+    "pickup",
+    "drop",
+    "equip",
+    "use",
+    "stop",
+];
+const HYPERSCAPE_SCRIPTED_ROLE_OPTIONS = [
+    { value: "balanced", label: "Balanced" },
+    { value: "combat", label: "Combat" },
+    { value: "woodcutting", label: "Woodcutting" },
+    { value: "fishing", label: "Fishing" },
+    { value: "mining", label: "Mining" },
+];
+function formatHyperscapePosition(position) {
+    if (!position)
+        return "n/a";
+    if (Array.isArray(position)) {
+        const [x, y, z] = position;
+        return `${Math.round(x)}, ${Math.round(y)}, ${Math.round(z)}`;
+    }
+    return `${Math.round(position.x)}, ${Math.round(position.y)}, ${Math.round(position.z)}`;
+}
+function parseHyperscapeCommandData(raw) {
+    const trimmed = raw.trim();
+    if (!trimmed)
+        return {};
+    try {
+        const parsed = JSON.parse(trimmed);
+        if (parsed === null ||
+            typeof parsed !== "object" ||
+            Array.isArray(parsed)) {
+            return null;
+        }
+        return parsed;
+    }
+    catch {
+        return null;
+    }
+}
+export function HyperscapeAppDetailPanel({ app }) {
+    const { setActionNotice, t } = useApp();
+    const appLabel = app.displayName ?? app.name;
+    const [panelOpen, setPanelOpen] = useState(false);
+    const [agents, setAgents] = useState([]);
+    const [agentsLoading, setAgentsLoading] = useState(false);
+    const [telemetryLoading, setTelemetryLoading] = useState(false);
+    const [busyAction, setBusyAction] = useState(null);
+    const [error, setError] = useState(null);
+    const [selectedAgentId, setSelectedAgentId] = useState("");
+    const [goalResponse, setGoalResponse] = useState(null);
+    const [quickActionsResponse, setQuickActionsResponse] = useState(null);
+    const [characterIdInput, setCharacterIdInput] = useState("");
+    const [scriptedRole, setScriptedRole] = useState("");
+    const [autoStart, setAutoStart] = useState(true);
+    const [messageInput, setMessageInput] = useState("");
+    const [command, setCommand] = useState("chat");
+    const [commandDataInput, setCommandDataInput] = useState("{}");
+    const selectedAgent = useMemo(() => agents.find((agent) => agent.agentId === selectedAgentId) ?? null, [agents, selectedAgentId]);
+    const loadAgents = useCallback(async () => {
+        setAgentsLoading(true);
+        setError(null);
+        try {
+            const response = await client.listHyperscapeEmbeddedAgents();
+            setAgents(response.agents);
+            setSelectedAgentId((current) => {
+                if (current &&
+                    response.agents.some((agent) => agent.agentId === current)) {
+                    return current;
+                }
+                return response.agents[0]?.agentId ?? "";
+            });
+            if (response.agents.length === 0) {
+                setGoalResponse(null);
+                setQuickActionsResponse(null);
+            }
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : "Failed to load agents";
+            setError(message);
+            setActionNotice(`Hyperscape controls: ${message}`, "error", 4200);
+        }
+        finally {
+            setAgentsLoading(false);
+        }
+    }, [setActionNotice]);
+    const refreshTelemetry = useCallback(async (agentId) => {
+        if (!agentId)
+            return;
+        setTelemetryLoading(true);
+        try {
+            const [nextGoalResponse, nextQuickActionsResponse] = await Promise.all([
+                client.getHyperscapeAgentGoal(agentId),
+                client.getHyperscapeAgentQuickActions(agentId),
+            ]);
+            setGoalResponse(nextGoalResponse);
+            setQuickActionsResponse(nextQuickActionsResponse);
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : "Failed to load agent telemetry";
+            setActionNotice(`Hyperscape telemetry: ${message}`, "error", 4200);
+        }
+        finally {
+            setTelemetryLoading(false);
+        }
+    }, [setActionNotice]);
+    useEffect(() => {
+        if (!panelOpen)
+            return;
+        void loadAgents();
+    }, [panelOpen, loadAgents]);
+    useEffect(() => {
+        if (!panelOpen || !selectedAgentId)
+            return;
+        void refreshTelemetry(selectedAgentId);
+    }, [panelOpen, refreshTelemetry, selectedAgentId]);
+    const handleCreateAgent = useCallback(async () => {
+        const characterId = characterIdInput.trim();
+        if (!characterId) {
+            setActionNotice("Character ID is required to create an embedded agent.", "error", 3600);
+            return;
+        }
+        setBusyAction("create");
+        try {
+            const response = await client.createHyperscapeEmbeddedAgent({
+                characterId,
+                autoStart,
+                scriptedRole: scriptedRole || undefined,
+            });
+            setActionNotice(response.message ?? "Embedded agent created.", "success", 3000);
+            setCharacterIdInput("");
+            await loadAgents();
+            if (response.agent?.agentId) {
+                setSelectedAgentId(response.agent.agentId);
+                await refreshTelemetry(response.agent.agentId);
+            }
+        }
+        catch (err) {
+            setActionNotice(`Failed to create embedded agent: ${err instanceof Error ? err.message : "error"}`, "error", 4200);
+        }
+        finally {
+            setBusyAction(null);
+        }
+    }, [
+        autoStart,
+        characterIdInput,
+        loadAgents,
+        refreshTelemetry,
+        scriptedRole,
+        setActionNotice,
+    ]);
+    const handleControlAgent = useCallback(async (action) => {
+        if (!selectedAgent) {
+            setActionNotice("Select an embedded agent first.", "error", 3200);
+            return;
+        }
+        setBusyAction(`control:${action}`);
+        try {
+            const response = await client.controlHyperscapeEmbeddedAgent(selectedAgent.characterId, action);
+            setActionNotice(response.message ?? `Agent ${action} request sent.`, "success", 3000);
+            await loadAgents();
+            await refreshTelemetry(selectedAgent.agentId);
+        }
+        catch (err) {
+            setActionNotice(`Failed to ${action} agent: ${err instanceof Error ? err.message : "error"}`, "error", 4200);
+        }
+        finally {
+            setBusyAction(null);
+        }
+    }, [loadAgents, refreshTelemetry, selectedAgent, setActionNotice]);
+    const handleSendMessage = useCallback(async (contentOverride) => {
+        if (!selectedAgent) {
+            setActionNotice("Select an embedded agent first.", "error", 3200);
+            return;
+        }
+        const content = (contentOverride ?? messageInput).trim();
+        if (!content) {
+            setActionNotice("Message cannot be empty.", "error", 3000);
+            return;
+        }
+        setBusyAction("message");
+        try {
+            const response = await client.sendHyperscapeAgentMessage(selectedAgent.agentId, content);
+            setActionNotice(response.message ?? "Message sent to agent.", "success", 3000);
+            if (!contentOverride) {
+                setMessageInput("");
+            }
+        }
+        catch (err) {
+            setActionNotice(`Failed to send message: ${err instanceof Error ? err.message : "error"}`, "error", 4200);
+        }
+        finally {
+            setBusyAction(null);
+        }
+    }, [messageInput, selectedAgent, setActionNotice]);
+    const handleSendCommand = useCallback(async () => {
+        if (!selectedAgent) {
+            setActionNotice("Select an embedded agent first.", "error", 3200);
+            return;
+        }
+        const nextCommand = command.trim();
+        if (!nextCommand) {
+            setActionNotice("Command cannot be empty.", "error", 3200);
+            return;
+        }
+        const parsedData = parseHyperscapeCommandData(commandDataInput);
+        if (parsedData === null) {
+            setActionNotice("Command data must be valid JSON object.", "error", 3600);
+            return;
+        }
+        setBusyAction("command");
+        try {
+            const response = await client.sendHyperscapeEmbeddedAgentCommand(selectedAgent.characterId, nextCommand, parsedData);
+            setActionNotice(response.message ?? `Command "${nextCommand}" sent.`, "success", 3000);
+            await loadAgents();
+            await refreshTelemetry(selectedAgent.agentId);
+        }
+        catch (err) {
+            setActionNotice(`Failed to send command: ${err instanceof Error ? err.message : "error"}`, "error", 4200);
+        }
+        finally {
+            setBusyAction(null);
+        }
+    }, [
+        command,
+        commandDataInput,
+        loadAgents,
+        refreshTelemetry,
+        selectedAgent,
+        setActionNotice,
+    ]);
+    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "font-bold text-xs mb-2", children: [appLabel, " Controls"] }), _jsx(Button, { variant: "default", size: "sm", className: "shadow-sm", onClick: () => setPanelOpen((open) => !open), children: panelOpen ? `Hide ${appLabel} Controls` : `Show ${appLabel} Controls` }), panelOpen ? (_jsxs("div", { className: "flex flex-col gap-3", children: [error ? (_jsx("div", { className: "p-2 border border-danger text-danger text-xs", children: error })) : null, _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { variant: "default", size: "sm", className: "shadow-sm", disabled: agentsLoading, onClick: () => void loadAgents(), children: agentsLoading ? "Refreshing..." : "Refresh Agents" }), _jsx(Button, { variant: "default", size: "sm", className: "shadow-sm", disabled: telemetryLoading || !selectedAgentId, onClick: () => void refreshTelemetry(selectedAgentId), children: telemetryLoading
+                                    ? "Loading telemetry..."
+                                    : "Refresh Goal + Quick Actions" })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("span", { className: "text-[11px] text-muted", children: [t("appsview.EmbeddedAgents"), agents.length, ")"] }), _jsxs("select", { value: selectedAgentId, onChange: (event) => setSelectedAgentId(event.target.value), className: "px-3 py-2 border border-border rounded-md bg-card text-txt text-xs focus:border-accent focus:outline-none", children: [_jsx("option", { value: "", children: t("appsview.SelectEmbeddedAgen") }), agents.map((agent) => (_jsxs("option", { value: agent.agentId, children: [agent.name, " (", agent.state, ") [", agent.agentId, "]"] }, agent.agentId)))] }), selectedAgent ? (_jsxs("div", { className: "text-[11px] text-muted", children: [t("appsview.Character"), " ", selectedAgent.characterId, " ", t("appsview.Health"), " ", selectedAgent.health ?? "n/a", " ", " / ", selectedAgent.maxHealth ?? "n/a", " ", t("appsview.Position"), " ", formatHyperscapePosition(selectedAgent.position)] })) : null] }), _jsx("div", { className: "flex flex-wrap gap-2", children: ["start", "pause", "resume", "stop"].map((action) => (_jsx(Button, { variant: "default", size: "sm", className: "shadow-sm", disabled: !selectedAgent || busyAction === `control:${action}`, onClick: () => void handleControlAgent(action), children: busyAction === `control:${action}`
+                                ? `${action}...`
+                                : action.charAt(0).toUpperCase() + action.slice(1) }, action))) }), _jsxs("div", { className: "border border-border p-2 flex flex-col gap-2", children: [_jsx("div", { className: "font-bold text-xs", children: t("appsview.CreateEmbeddedAgen") }), _jsx(Input, { type: "text", value: characterIdInput, onChange: (event) => setCharacterIdInput(event.target.value), placeholder: t("appsview.CharacterID"), className: "h-9 bg-card border-border text-xs" }), _jsxs("div", { className: "flex flex-wrap gap-2 items-center", children: [_jsxs("select", { value: scriptedRole, onChange: (event) => setScriptedRole(event.target.value), className: "px-3 py-2 border border-border rounded-md bg-card text-txt text-xs focus:border-accent focus:outline-none", children: [_jsx("option", { value: "", children: t("appsview.NoScriptedRole") }), HYPERSCAPE_SCRIPTED_ROLE_OPTIONS.map((role) => (_jsx("option", { value: role.value, children: role.label }, role.value)))] }), _jsxs("span", { className: "text-xs text-muted flex items-center gap-1", children: [_jsx("input", { type: "checkbox", checked: autoStart, onChange: (event) => setAutoStart(event.target.checked) }), t("appsview.AutoStart")] }), _jsx(Button, { variant: "default", size: "sm", className: "shadow-sm", disabled: busyAction === "create", onClick: () => void handleCreateAgent(), children: busyAction === "create" ? "Creating..." : "Create Agent" })] })] }), _jsxs("div", { className: "border border-border p-2 flex flex-col gap-2", children: [_jsx("div", { className: "font-bold text-xs", children: t("appsview.SendMessage") }), _jsx("textarea", { rows: 2, value: messageInput, onChange: (event) => setMessageInput(event.target.value), placeholder: t("appsview.SaySomethingToSel"), className: "px-3 py-2 border border-border rounded-md bg-card text-txt text-xs focus:border-accent focus:outline-none resize-y" }), _jsx(Button, { variant: "default", size: "sm", className: "shadow-sm self-start", disabled: busyAction === "message", onClick: () => void handleSendMessage(), children: busyAction === "message" ? "Sending..." : "Send Message" })] }), _jsxs("div", { className: "border border-border p-2 flex flex-col gap-2", children: [_jsx("div", { className: "font-bold text-xs", children: t("appsview.SendCommand") }), _jsx("select", { value: command, onChange: (event) => setCommand(event.target
+                                    .value), className: "px-3 py-2 border border-border rounded-md bg-card text-txt text-xs focus:border-accent focus:outline-none", children: HYPERSCAPE_COMMAND_OPTIONS.map((commandOption) => (_jsx("option", { value: commandOption, children: commandOption }, commandOption))) }), _jsx("textarea", { rows: 2, value: commandDataInput, onChange: (event) => setCommandDataInput(event.target.value), placeholder: t("appsview.Target000"), className: "px-3 py-2 border border-border rounded-md bg-card text-txt text-xs focus:border-accent focus:outline-none resize-y" }), _jsx(Button, { variant: "default", size: "sm", className: "shadow-sm self-start", disabled: busyAction === "command", onClick: () => void handleSendCommand(), children: busyAction === "command" ? "Sending..." : "Send Command" })] }), _jsxs("div", { className: "border border-border p-2 flex flex-col gap-2", children: [_jsx("div", { className: "font-bold text-xs", children: t("appsview.GoalQuickActions") }), _jsx("div", { className: "text-xs text-muted", children: goalResponse?.goal ? (_jsxs(_Fragment, { children: ["Goal: ", goalResponse.goal.description ?? "unknown", typeof goalResponse.goal.progressPercent === "number"
+                                            ? ` (${goalResponse.goal.progressPercent}%)`
+                                            : ""] })) : ((goalResponse?.message ??
+                                    "No active goal loaded for the selected agent.")) }), goalResponse?.availableGoals?.length ? (_jsx("div", { className: "flex flex-wrap gap-1", children: goalResponse.availableGoals.slice(0, 8).map((goal) => (_jsx("span", { className: "text-[10px] px-1.5 py-0.5 border border-border text-muted", title: goal.description, children: goal.type }, goal.id))) })) : null, quickActionsResponse?.quickCommands?.length ? (_jsx("div", { className: "flex flex-wrap gap-1", children: quickActionsResponse.quickCommands.map((quickCommand) => (_jsx("button", { type: "button", className: "text-[10px] px-2 py-1 border border-border bg-card text-txt cursor-pointer hover:bg-accent hover:text-accent-fg disabled:opacity-40", disabled: !quickCommand.available || busyAction === "message", onClick: () => void handleSendMessage(quickCommand.command), title: quickCommand.reason ?? quickCommand.command, children: quickCommand.label }, quickCommand.id))) })) : null, quickActionsResponse?.nearbyLocations?.length ? (_jsxs("div", { className: "text-[11px] text-muted", children: [t("appsview.Nearby"), " ", quickActionsResponse.nearbyLocations
+                                        .slice(0, 4)
+                                        .map((location) => `${location.name} (${location.distance})`)
+                                        .join(", ")] })) : null] })] })) : null] }));
+}

package/dist/components/apps/extensions/registry.d.ts

@@ -0,0 +1,4 @@
+import type { RegistryAppInfo } from "../../../api";
+import type { AppDetailExtensionComponent } from "./types";
+export declare function getAppDetailExtension(app: RegistryAppInfo): AppDetailExtensionComponent | null;
+//# sourceMappingURL=registry.d.ts.map

package/dist/components/apps/extensions/registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../../../src/components/apps/extensions/registry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,SAAS,CAAC;AAO3D,wBAAgB,qBAAqB,CACnC,GAAG,EAAE,eAAe,GACnB,2BAA2B,GAAG,IAAI,CAIpC"}

package/dist/components/apps/extensions/registry.js

@@ -0,0 +1,10 @@
+import { HyperscapeAppDetailPanel } from "./HyperscapeAppDetailPanel";
+const DETAIL_EXTENSION_COMPONENTS = {
+    "hyperscape-embedded-agents": HyperscapeAppDetailPanel,
+};
+export function getAppDetailExtension(app) {
+    const detailPanelId = app.uiExtension?.detailPanelId;
+    if (!detailPanelId)
+        return null;
+    return DETAIL_EXTENSION_COMPONENTS[detailPanelId] ?? null;
+}

package/dist/components/apps/extensions/types.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentType } from "react";
+import type { RegistryAppInfo } from "../../../api";
+export interface AppDetailExtensionProps {
+    app: RegistryAppInfo;
+}
+export type AppDetailExtensionComponent = ComponentType<AppDetailExtensionProps>;
+//# sourceMappingURL=types.d.ts.map

package/dist/components/apps/extensions/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/apps/extensions/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,MAAM,WAAW,uBAAuB;IACtC,GAAG,EAAE,eAAe,CAAC;CACtB;AAED,MAAM,MAAM,2BAA2B,GACrC,aAAa,CAAC,uBAAuB,CAAC,CAAC"}

package/dist/components/apps/extensions/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/apps/helpers.d.ts

@@ -0,0 +1,7 @@
+import type { RegistryAppInfo } from "../../api";
+export declare const DEFAULT_VIEWER_SANDBOX = "allow-scripts allow-same-origin allow-popups";
+export declare const CATEGORY_LABELS: Record<string, string>;
+export declare function shouldShowAppInAppsView(app: Pick<RegistryAppInfo, "name">, isProd?: boolean): boolean;
+export declare function getAppShortName(app: RegistryAppInfo): string;
+export declare function getAppEmoji(app: RegistryAppInfo): string;
+//# sourceMappingURL=helpers.d.ts.map

package/dist/components/apps/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/components/apps/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAEjD,eAAO,MAAM,sBAAsB,iDACa,CAAC;AAIjD,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAKlD,CAAC;AAEF,wBAAgB,uBAAuB,CACrC,GAAG,EAAE,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC,EAClC,MAAM,UAAuB,GAC5B,OAAO,CAGT;AAED,wBAAgB,eAAe,CAAC,GAAG,EAAE,eAAe,GAAG,MAAM,CAI5D;AAED,wBAAgB,WAAW,CAAC,GAAG,EAAE,eAAe,GAAG,MAAM,CAexD"}

package/dist/components/apps/helpers.js

@@ -0,0 +1,46 @@
+export const DEFAULT_VIEWER_SANDBOX = "allow-scripts allow-same-origin allow-popups";
+const PROD_ALLOWED_APPS = new Set(["@iqlabs-official/plugin-clawbal"]);
+export const CATEGORY_LABELS = {
+    game: "Game",
+    social: "Social",
+    platform: "Platform",
+    world: "World",
+};
+export function shouldShowAppInAppsView(app, isProd = import.meta.env.PROD) {
+    if (!isProd)
+        return true;
+    return PROD_ALLOWED_APPS.has(app.name);
+}
+export function getAppShortName(app) {
+    const display = app.displayName ?? app.name;
+    const clean = display.replace(/^@[^/]+\/app-/, "");
+    return clean.charAt(0).toUpperCase() + clean.slice(1);
+}
+export function getAppEmoji(app) {
+    const name = (app.name ?? "").toLowerCase();
+    if (name.includes("2004") || name.includes("runescape"))
+        return "⚔️";
+    if (name.includes("town"))
+        return "🏘️";
+    if (name.includes("hyperscape"))
+        return "🌐";
+    if (name.includes("babylon"))
+        return "🏛️";
+    if (name.includes("clawbal"))
+        return "🎯";
+    if (name.includes("minecraft"))
+        return "⛏️";
+    if (name.includes("roblox"))
+        return "🧱";
+    if (name.includes("dungeons"))
+        return "🗡️";
+    if (name.includes("hyperfy"))
+        return "🌀";
+    if (app.category === "game")
+        return "🎮";
+    if (app.category === "social")
+        return "💬";
+    if (app.category === "world")
+        return "🌍";
+    return "📦";
+}

package/dist/components/avatar/VrmAnimationLoader.d.ts

@@ -0,0 +1,30 @@
+import type { VRM } from "@pixiv/three-vrm";
+import type * as THREE from "three";
+/**
+ * Context needed by the animation loader to check whether the owning engine
+ * is still alive / relevant for the load request.
+ */
+export type AnimationLoaderContext = {
+    /** Returns `true` if the loading sequence was aborted (engine disposed). */
+    isAborted: () => boolean;
+    /** Returns `true` if `vrm` is still the active model in the engine. */
+    isCurrentVrm: (vrm: VRM) => boolean;
+};
+/**
+ * Load and return an idle {@link THREE.AnimationClip} for the given VRM.
+ *
+ * Loads the GLB idle animation and retargets it to VRM bones.
+ * Returns `null` when the load was aborted (engine disposed / VRM replaced).
+ * Throws when the idle clip cannot be loaded.
+ */
+export declare function loadIdleClip(vrm: VRM, idleGlbUrl: string, ctx: AnimationLoaderContext): Promise<THREE.AnimationClip | null>;
+/**
+ * Load a single emote animation clip (GLB/FBX) and retarget it to
+ * the supplied VRM. Returns `null` when the load was aborted or the file
+ * format could not be processed.
+ *
+ * Supports both `.glb` / `.gltf` files (retargeted via retargetMixamoGltfToVrm)
+ * and Mixamo `.fbx` files (retargeted via retargetMixamoFbxToVrm).
+ */
+export declare function loadEmoteClip(path: string, vrm: VRM, ctx: AnimationLoaderContext): Promise<THREE.AnimationClip | null>;
+//# sourceMappingURL=VrmAnimationLoader.d.ts.map

package/dist/components/avatar/VrmAnimationLoader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VrmAnimationLoader.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/VrmAnimationLoader.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAAG;IACnC,4EAA4E;IAC5E,SAAS,EAAE,MAAM,OAAO,CAAC;IACzB,uEAAuE;IACvE,YAAY,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrC,CAAC;AA0CF;;;;;;GAMG;AACH,wBAAsB,YAAY,CAChC,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,MAAM,EAClB,GAAG,EAAE,sBAAsB,GAC1B,OAAO,CAAC,KAAK,CAAC,aAAa,GAAG,IAAI,CAAC,CAwBrC;AAED;;;;;;;GAOG;AACH,wBAAsB,aAAa,CACjC,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,sBAAsB,GAC1B,OAAO,CAAC,KAAK,CAAC,aAAa,GAAG,IAAI,CAAC,CA6CrC"}