@elizaos/agent 2.0.0-alpha.358 → 2.0.0-alpha.376

package/packages/app-core/src/components/apps/GameViewOverlay.d.ts

@@ -0,0 +1,2 @@
+export declare function GameViewOverlay(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=GameViewOverlay.d.ts.map

package/packages/app-core/src/components/apps/GameViewOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GameViewOverlay.d.ts","sourceRoot":"","sources":["../../../../../../../app-core/src/components/apps/GameViewOverlay.tsx"],"names":[],"mappings":"AAWA,wBAAgB,eAAe,4CAuN9B"}

package/packages/app-core/src/components/apps/GameViewOverlay.js

@@ -0,0 +1,120 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@elizaos/ui";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useApp } from "../../state";
+import { buildViewerSessionKey, resolveEmbeddedViewerUrl, resolvePostMessageTargetOrigin, resolveViewerReadyEventType, shouldUseEmbeddedAppViewer, } from "./viewer-auth";
+export function GameViewOverlay() {
+    const { appRuns, activeGameRunId, activeGameDisplayName, activeGamePostMessageAuth, activeGamePostMessagePayload, activeGameViewerUrl, activeGameSandbox, setState, t, } = useApp();
+    // --- Drag state ---
+    const containerRef = useRef(null);
+    const [pos, setPos] = useState(null);
+    const dragOffset = useRef({ x: 0, y: 0 });
+    const [dragging, setDragging] = useState(false);
+    const iframeRef = useRef(null);
+    const authSentRef = useRef(false);
+    const viewerSessionRef = useRef("");
+    const activeGameRun = useMemo(() => appRuns.find((run) => run.runId === activeGameRunId) ?? null, [activeGameRunId, appRuns]);
+    const useEmbeddedViewer = useMemo(() => shouldUseEmbeddedAppViewer(activeGameRun), [activeGameRun]);
+    const resolvedActiveGameViewerUrl = useMemo(() => resolveEmbeddedViewerUrl(activeGameViewerUrl), [activeGameViewerUrl]);
+    const postMessageTargetOrigin = useMemo(() => resolvePostMessageTargetOrigin(activeGameViewerUrl), [activeGameViewerUrl]);
+    const viewerSessionKey = useMemo(() => buildViewerSessionKey(activeGameViewerUrl, activeGamePostMessagePayload), [activeGamePostMessagePayload, activeGameViewerUrl]);
+    const handleDragStart = useCallback((e) => {
+        e.preventDefault();
+        const rect = containerRef.current?.getBoundingClientRect();
+        if (!rect)
+            return;
+        dragOffset.current = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+        setDragging(true);
+        const onMove = (ev) => {
+            setPos({
+                x: ev.clientX - dragOffset.current.x,
+                y: ev.clientY - dragOffset.current.y,
+            });
+        };
+        const onUp = () => {
+            setDragging(false);
+            window.removeEventListener("mousemove", onMove);
+            window.removeEventListener("mouseup", onUp);
+        };
+        window.addEventListener("mousemove", onMove);
+        window.addEventListener("mouseup", onUp);
+    }, []);
+    const handleClose = useCallback(() => {
+        setState("gameOverlayEnabled", false);
+    }, [setState]);
+    const handleExpand = useCallback(() => {
+        setState("gameOverlayEnabled", false);
+        setState("tab", "apps");
+        setState("appsSubTab", "games");
+    }, [setState]);
+    useEffect(() => {
+        if (viewerSessionRef.current !== viewerSessionKey) {
+            viewerSessionRef.current = viewerSessionKey;
+            authSentRef.current = false;
+        }
+    }, [viewerSessionKey]);
+    useEffect(() => {
+        if (!useEmbeddedViewer ||
+            !activeGamePostMessageAuth ||
+            !activeGamePostMessagePayload) {
+            return;
+        }
+        if (authSentRef.current) {
+            return;
+        }
+        const expectedReadyType = resolveViewerReadyEventType(activeGamePostMessagePayload);
+        if (!expectedReadyType) {
+            return;
+        }
+        const onMessage = (event) => {
+            if (authSentRef.current)
+                return;
+            const iframeWindow = iframeRef.current?.contentWindow;
+            if (!iframeWindow || event.source !== iframeWindow)
+                return;
+            if (event.data?.type !== expectedReadyType)
+                return;
+            if (postMessageTargetOrigin !== "*" &&
+                event.origin !== postMessageTargetOrigin) {
+                return;
+            }
+            iframeWindow.postMessage(activeGamePostMessagePayload, postMessageTargetOrigin);
+            authSentRef.current = true;
+        };
+        window.addEventListener("message", onMessage);
+        return () => {
+            window.removeEventListener("message", onMessage);
+        };
+    }, [
+        activeGamePostMessageAuth,
+        activeGamePostMessagePayload,
+        postMessageTargetOrigin,
+        useEmbeddedViewer,
+    ]);
+    if (!resolvedActiveGameViewerUrl ||
+        activeGameRun?.viewerAttachment !== "attached") {
+        return null;
+    }
+    const style = pos
+        ? { left: pos.x, top: pos.y, right: "auto", bottom: "auto" }
+        : { right: 16, bottom: 16 };
+    return (_jsx("div", { className: "fixed inset-0 z-50 pointer-events-none", children: _jsxs("div", { ref: containerRef, className: "absolute w-[480px] h-[360px] pointer-events-auto rounded-xl overflow-hidden flex flex-col", style: {
+                resize: "both",
+                background: "rgba(18, 22, 32, 0.96)",
+                border: "1px solid rgba(240, 178, 50, 0.18)",
+                boxShadow: "0 8px 60px rgba(0,0,0,0.6), 0 0 40px rgba(240,178,50,0.06)",
+                ...style,
+            }, children: [_jsxs("div", { className: "flex items-center gap-2 px-3 py-1.5 select-none", style: {
+                        cursor: dragging ? "grabbing" : "grab",
+                        background: "rgba(255,255,255,0.04)",
+                        borderBottom: "1px solid rgba(255,255,255,0.08)",
+                    }, children: [_jsx(Button, { variant: "ghost", className: "font-bold text-xs-tight truncate flex-1 text-left cursor-inherit h-auto p-0", style: { color: "rgba(240,238,250,0.92)" }, onMouseDown: handleDragStart, "aria-label": t("aria.dragOverlay"), children: activeGameDisplayName || "Game" }), _jsx(Button, { variant: "outline", size: "sm", className: "text-2xs px-2 py-0.5 h-auto", style: {
+                                border: "1px solid rgba(255,255,255,0.1)",
+                                background: "rgba(255,255,255,0.04)",
+                                color: "rgba(240,238,250,0.92)",
+                            }, onClick: handleExpand, title: t("gameviewoverlay.ExpandBackToApps"), children: t("common.expand") }), _jsx(Button, { variant: "outline", size: "sm", className: "text-2xs px-2 py-0.5 h-auto", style: {
+                                border: "1px solid rgba(255,255,255,0.1)",
+                                background: "rgba(255,255,255,0.04)",
+                                color: "rgba(240,238,250,0.92)",
+                            }, onClick: handleClose, title: t("gameviewoverlay.CloseOverlay"), children: t("common.close") })] }), _jsx("iframe", { ref: iframeRef, src: resolvedActiveGameViewerUrl, sandbox: activeGameSandbox, "data-testid": "game-view-overlay-iframe", className: "flex-1 w-full border-none", title: activeGameDisplayName || "Game Overlay" })] }) }));
+}

package/packages/app-core/src/components/apps/RunningAppsRow.d.ts

@@ -0,0 +1,12 @@
+import type { AppRunSummary, RegistryAppInfo } from "../../api";
+interface RunningAppsRowProps {
+    runs: AppRunSummary[];
+    catalogApps: RegistryAppInfo[];
+    busyRunId: string | null;
+    onOpenRun: (run: AppRunSummary) => void;
+    onStopRun?: (run: AppRunSummary) => void;
+    stoppingRunId?: string | null;
+}
+export declare function RunningAppsRow({ runs, catalogApps, busyRunId, onOpenRun, onStopRun, stoppingRunId, }: RunningAppsRowProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=RunningAppsRow.d.ts.map

package/packages/app-core/src/components/apps/RunningAppsRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RunningAppsRow.d.ts","sourceRoot":"","sources":["../../../../../../../app-core/src/components/apps/RunningAppsRow.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAIhE,UAAU,mBAAmB;IAC3B,IAAI,EAAE,aAAa,EAAE,CAAC;IACtB,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,SAAS,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC/B;AAeD,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,WAAW,EACX,SAAS,EACT,SAAS,EACT,SAAS,EACT,aAAa,GACd,EAAE,mBAAmB,2CA+FrB"}

package/packages/app-core/src/components/apps/RunningAppsRow.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Square } from "lucide-react";
+import { AppHero } from "./app-identity";
+import { getRunAttentionReasons } from "./run-attention";
+function getHealthTone(state) {
+    if (state === "healthy") {
+        return { dot: "bg-ok", ring: "shadow-[0_0_0_3px_rgba(16,185,129,0.35)]" };
+    }
+    if (state === "degraded") {
+        return { dot: "bg-warn", ring: "shadow-[0_0_0_3px_rgba(245,158,11,0.35)]" };
+    }
+    return { dot: "bg-danger", ring: "shadow-[0_0_0_3px_rgba(239,68,68,0.35)]" };
+}
+export function RunningAppsRow({ runs, catalogApps, busyRunId, onOpenRun, onStopRun, stoppingRunId, }) {
+    if (runs.length === 0)
+        return null;
+    const catalogAppByName = new Map(catalogApps.map((app) => [app.name, app]));
+    return (_jsxs("section", { "data-testid": "running-apps-row", className: "space-y-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("h2", { className: "text-xs-tight font-semibold uppercase tracking-[0.18em] text-accent", children: "Running" }), _jsx("div", { className: "h-px flex-1 bg-border/30" })] }), _jsx("div", { className: "grid gap-3 sm:grid-cols-2 lg:grid-cols-3", children: runs.map((run) => {
+                    const app = catalogAppByName.get(run.appName) ?? {
+                        name: run.appName,
+                        displayName: run.displayName,
+                        category: "utility",
+                        icon: null,
+                    };
+                    const attentionReasons = getRunAttentionReasons(run);
+                    const needsAttention = attentionReasons.length > 0;
+                    const isBusy = busyRunId === run.runId;
+                    const isStopping = stoppingRunId === run.runId;
+                    const tone = getHealthTone(run.health.state);
+                    return (_jsxs("div", { "data-testid": `running-app-card-${run.runId}`, className: "group relative overflow-hidden rounded-2xl border border-accent/35 bg-card/72 shadow-[0_8px_24px_-12px_rgba(0,0,0,0.4)] transition-all hover:border-accent/55 focus-within:ring-2 focus-within:ring-accent/35", children: [_jsxs("button", { type: "button", "aria-label": `Open ${run.displayName}`, "aria-busy": isBusy || undefined, className: "block w-full text-left focus-visible:outline-none", onClick: () => onOpenRun(run), children: [_jsx(AppHero, { app: app, className: "aspect-[5/4] transition-transform duration-300 group-hover:scale-[1.02]" }), _jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 flex items-end p-4 pe-12", children: _jsx("div", { className: "min-w-0 flex-1", children: _jsx("div", { className: "truncate text-sm font-semibold text-white drop-shadow-[0_1px_6px_rgba(0,0,0,0.6)]", children: run.displayName }) }) })] }), _jsx("span", { title: needsAttention ? attentionReasons[0] : run.health.state, className: `pointer-events-none absolute right-4 top-4 h-2.5 w-2.5 rounded-full ${tone.dot} ${tone.ring}` }), needsAttention ? (_jsx("span", { title: attentionReasons[0], className: "pointer-events-none absolute right-10 top-3.5 inline-flex items-center rounded-full border border-warn/40 bg-black/40 px-2 py-0.5 text-[0.56rem] font-semibold uppercase tracking-[0.2em] text-warn backdrop-blur-sm", children: "!" })) : null, onStopRun ? (_jsx("button", { type: "button", "data-testid": `running-app-stop-${run.runId}`, "aria-label": `Stop ${run.displayName}`, disabled: isStopping, className: "absolute bottom-3 right-3 inline-flex h-8 w-8 items-center justify-center rounded-full bg-black/40 text-white/90 backdrop-blur-sm transition-all hover:bg-danger/80 hover:text-white disabled:cursor-not-allowed disabled:opacity-50", onClick: (event) => {
+                                    event.stopPropagation();
+                                    onStopRun(run);
+                                }, children: isStopping ? (_jsx("span", { className: "h-2 w-2 animate-pulse rounded-full bg-white" })) : (_jsx(Square, { className: "h-3.5 w-3.5", "aria-hidden": true })) })) : null] }, run.runId));
+                }) })] }));
+}

package/packages/app-core/src/components/apps/app-identity.d.ts

@@ -0,0 +1,24 @@
+import { type LucideIcon } from "lucide-react";
+export interface AppIdentitySource {
+    name: string;
+    displayName?: string | null;
+    category?: string | null;
+    icon?: string | null;
+    heroImage?: string | null;
+    description?: string | null;
+}
+export declare function iconImageSource(icon: string | null | undefined): string | null;
+export declare function getAppCategoryIcon(app: AppIdentitySource): LucideIcon;
+export declare function AppIdentityTile({ app, active, className, size, imageOnly, }: {
+    app: AppIdentitySource;
+    active?: boolean;
+    className?: string;
+    size?: "sm" | "md";
+    imageOnly?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function AppHero({ app, className, imageOnly, }: {
+    app: AppIdentitySource;
+    className?: string;
+    imageOnly?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=app-identity.d.ts.map

package/packages/app-core/src/components/apps/app-identity.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-identity.d.ts","sourceRoot":"","sources":["../../../../../../../app-core/src/components/apps/app-identity.tsx"],"names":[],"mappings":"AAKA,OAAO,EAKL,KAAK,UAAU,EAIhB,MAAM,cAAc,CAAC;AAGtB,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B;AAqBD,wBAAgB,eAAe,CAC7B,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAC9B,MAAM,GAAG,IAAI,CAWf;AAUD,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,iBAAiB,GAAG,UAAU,CAiBrE;AAoED,wBAAgB,eAAe,CAAC,EAC9B,GAAG,EACH,MAAc,EACd,SAAc,EACd,IAAW,EACX,SAAiB,GAClB,EAAE;IACD,GAAG,EAAE,iBAAiB,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,2CA6DA;AAiCD,wBAAgB,OAAO,CAAC,EACtB,GAAG,EACH,SAAc,EACd,SAAiB,GAClB,EAAE;IACD,GAAG,EAAE,iBAAiB,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,2CAyEA"}

package/packages/app-core/src/components/apps/app-identity.js

@@ -0,0 +1,161 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { createGeneratedAppHeroDataUrl, getAppHeroMonogram, getAppHeroThemeKey, } from "@elizaos/shared";
+import { Bot, Briefcase, Gamepad2, Globe2, Sparkles, Wallet, Wrench, } from "lucide-react";
+import { useState } from "react";
+const APP_TILE_PALETTES = [
+    ["#0ea5e9", "#8b5cf6"],
+    ["#10b981", "#14b8a6"],
+    ["#f59e0b", "#f97316"],
+    ["#ef4444", "#f43f5e"],
+    ["#22c55e", "#84cc16"],
+    ["#06b6d4", "#3b82f6"],
+    ["#a855f7", "#ec4899"],
+    ["#64748b", "#0f766e"],
+];
+function hashString(value) {
+    let hash = 0;
+    for (let index = 0; index < value.length; index += 1) {
+        hash = (hash * 31 + value.charCodeAt(index)) | 0;
+    }
+    return Math.abs(hash);
+}
+export function iconImageSource(icon) {
+    const value = icon?.trim();
+    if (!value)
+        return null;
+    if (/^(https?:|data:image\/|blob:|file:|capacitor:|electrobun:|app:|\/|\.\/|\.\.\/)/i.test(value)) {
+        return value;
+    }
+    return null;
+}
+function getAppMonogram(app) {
+    return getAppHeroMonogram(app);
+}
+function getAppPalette(name) {
+    return APP_TILE_PALETTES[hashString(name) % APP_TILE_PALETTES.length];
+}
+export function getAppCategoryIcon(app) {
+    switch (getAppHeroThemeKey(app)) {
+        case "play":
+            return Gamepad2;
+        case "chat":
+            return Bot;
+        case "money":
+            return Wallet;
+        case "tools":
+            return Wrench;
+        case "world":
+            return Globe2;
+        case "ops":
+            return Briefcase;
+        default:
+            return Sparkles;
+    }
+}
+function useResolvedAppImageSource(app) {
+    const heroSrc = app.heroImage?.trim() || null;
+    const iconSrc = iconImageSource(app.icon);
+    const generatedSrc = createGeneratedAppHeroDataUrl(app);
+    const sourceKey = [
+        app.name,
+        app.displayName ?? "",
+        app.category ?? "",
+        app.description ?? "",
+        heroSrc ?? "",
+        iconSrc ?? "",
+    ].join("\u0000");
+    const [failureState, setFailureState] = useState(() => ({
+        sourceKey,
+        failedHeroSrc: null,
+        failedIconSrc: null,
+        generatedFailed: false,
+    }));
+    const currentFailureState = failureState.sourceKey === sourceKey
+        ? failureState
+        : {
+            sourceKey,
+            failedHeroSrc: null,
+            failedIconSrc: null,
+            generatedFailed: false,
+        };
+    const imageSrc = heroSrc && heroSrc !== currentFailureState.failedHeroSrc
+        ? heroSrc
+        : iconSrc && iconSrc !== currentFailureState.failedIconSrc
+            ? iconSrc
+            : !currentFailureState.generatedFailed
+                ? generatedSrc
+                : null;
+    const handleImageError = () => {
+        if (imageSrc === heroSrc && heroSrc) {
+            setFailureState({
+                ...currentFailureState,
+                failedHeroSrc: heroSrc,
+            });
+            return;
+        }
+        if (imageSrc === iconSrc && iconSrc) {
+            setFailureState({
+                ...currentFailureState,
+                failedIconSrc: iconSrc,
+            });
+            return;
+        }
+        if (imageSrc === generatedSrc) {
+            setFailureState({
+                ...currentFailureState,
+                generatedFailed: true,
+            });
+        }
+    };
+    return { imageSrc, handleImageError };
+}
+export function AppIdentityTile({ app, active = false, className = "", size = "md", imageOnly = false, }) {
+    const palette = getAppPalette(app.name);
+    const { imageSrc, handleImageError } = useResolvedAppImageSource(app);
+    const Icon = getAppCategoryIcon(app);
+    const monogram = getAppMonogram(app);
+    const outerSize = size === "sm" ? "h-12 w-12 rounded-2xl" : "h-14 w-14 rounded-[1.15rem]";
+    const iconSize = size === "sm" ? "h-5 w-5" : "h-6 w-6";
+    const monoSize = size === "sm" ? "text-[0.64rem]" : "text-[0.68rem]";
+    const badgeSize = size === "sm" ? "text-[0.56rem]" : "text-[0.58rem]";
+    return (_jsxs("div", { className: `relative shrink-0 overflow-hidden border border-white/10 shadow-sm ring-1 ring-black/5 ${outerSize} ${className}`, style: {
+            backgroundImage: `linear-gradient(135deg, ${palette[0]} 0%, ${palette[1]} 100%)`,
+        }, "aria-hidden": true, children: [!imageOnly ? (_jsx("div", { className: "absolute inset-0 bg-[radial-gradient(circle_at_20%_18%,rgba(255,255,255,0.32),transparent_30%),radial-gradient(circle_at_82%_20%,rgba(255,255,255,0.18),transparent_26%),radial-gradient(circle_at_50%_100%,rgba(0,0,0,0.16),transparent_35%)]" })) : null, imageSrc ? (_jsxs(_Fragment, { children: [_jsx("img", { src: imageSrc, alt: "", className: "absolute inset-0 h-full w-full object-cover", loading: "lazy", decoding: "async", onError: handleImageError }), !imageOnly ? _jsx("div", { className: "absolute inset-0 bg-black/10" }) : null] })) : (_jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-0.5 text-white", children: [_jsx(Icon, { className: iconSize, strokeWidth: 2.15 }), _jsx("span", { className: `inline-flex items-center rounded-full border border-white/20 bg-white/12 px-1.5 py-0.5 font-semibold uppercase tracking-[0.18em] text-white ${monoSize}`, children: monogram })] })), active && !imageOnly ? (_jsx("span", { className: "absolute right-1.5 top-1.5 h-2.5 w-2.5 rounded-full border border-card bg-ok shadow-sm" })) : null, !imageOnly ? (_jsx("div", { className: "absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-black/12 to-transparent" })) : null, imageSrc && !imageOnly ? (_jsx("div", { className: `absolute left-1.5 top-1.5 inline-flex items-center rounded-full border border-white/20 bg-black/10 px-1.5 py-0.5 font-semibold uppercase tracking-[0.18em] text-white ${badgeSize}`, children: monogram })) : null] }));
+}
+function getHeroBlobs(seed) {
+    const pick = (shift, mod) => (seed >> shift) % mod;
+    return [
+        {
+            cx: 18 + pick(1, 32),
+            cy: 22 + pick(3, 28),
+            r: 34 + pick(5, 22),
+            opacity: 0.32,
+        },
+        {
+            cx: 72 - pick(7, 26),
+            cy: 68 - pick(9, 32),
+            r: 38 + pick(11, 26),
+            opacity: 0.24,
+        },
+        {
+            cx: 45 + pick(13, 24),
+            cy: 40 + pick(15, 24),
+            r: 24 + pick(17, 18),
+            opacity: 0.18,
+        },
+    ];
+}
+export function AppHero({ app, className = "", imageOnly = false, }) {
+    const palette = getAppPalette(app.name);
+    const { imageSrc, handleImageError } = useResolvedAppImageSource(app);
+    const Icon = getAppCategoryIcon(app);
+    const blobs = getHeroBlobs(hashString(app.name));
+    const iconRotation = hashString(app.name) % 24;
+    const useImage = Boolean(imageSrc);
+    return (_jsxs("div", { className: `relative w-full overflow-hidden ${className}`, style: {
+            backgroundImage: `linear-gradient(135deg, ${palette[0]} 0%, ${palette[1]} 100%)`,
+        }, "aria-hidden": true, children: [useImage && imageSrc ? (_jsx("img", { src: imageSrc, alt: "", loading: "lazy", decoding: "async", className: "absolute inset-0 h-full w-full object-cover", onError: handleImageError })) : (_jsxs(_Fragment, { children: [_jsxs("svg", { className: "absolute inset-0 h-full w-full", viewBox: "0 0 100 100", preserveAspectRatio: "none", "aria-hidden": true, children: [_jsx("title", { children: "Hero backdrop" }), blobs.map((blob) => (_jsx("circle", { cx: blob.cx, cy: blob.cy, r: blob.r, fill: "white", opacity: blob.opacity, style: { mixBlendMode: "soft-light" } }, `${blob.cx}-${blob.cy}-${blob.r}`)))] }), _jsx("div", { className: "absolute inset-0 opacity-[0.14]", style: {
+                            backgroundImage: "radial-gradient(circle, rgba(255,255,255,0.85) 1px, transparent 1px)",
+                            backgroundSize: "14px 14px",
+                        } }), _jsx("div", { className: "pointer-events-none absolute -right-6 -bottom-8 h-[68%] w-[68%] text-white/[0.22]", style: { transform: `rotate(${iconRotation - 12}deg)` }, children: _jsx(Icon, { className: "h-full w-full", strokeWidth: 1.25 }) })] })), !imageOnly ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_50%_-20%,rgba(255,255,255,0.22),transparent_55%)]" }), _jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-3/5 bg-gradient-to-t from-black/60 via-black/20 to-transparent" })] })) : null] }));
+}

package/packages/app-core/src/components/apps/catalog-loader.d.ts

@@ -0,0 +1,7 @@
+import { type RegistryAppInfo } from "../../api";
+interface LoadMergedCatalogAppsOptions {
+    includeHiddenApps?: boolean;
+}
+export declare function loadMergedCatalogApps({ includeHiddenApps, }?: LoadMergedCatalogAppsOptions): Promise<RegistryAppInfo[]>;
+export {};
+//# sourceMappingURL=catalog-loader.d.ts.map

package/packages/app-core/src/components/apps/catalog-loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"catalog-loader.d.ts","sourceRoot":"","sources":["../../../../../../../app-core/src/components/apps/catalog-loader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,eAAe,EAAE,MAAM,WAAW,CAAC;AAQzD,UAAU,4BAA4B;IACpC,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,wBAAsB,qBAAqB,CAAC,EAC1C,iBAAyB,GAC1B,GAAE,4BAAiC,GAAG,OAAO,CAAC,eAAe,EAAE,CAAC,CA4BhE"}

package/packages/app-core/src/components/apps/catalog-loader.js

@@ -0,0 +1,21 @@
+import { client } from "../../api";
+import { isHiddenFromAppsView } from "./helpers";
+import { getInternalToolApps } from "./internal-tool-apps";
+import { getAllOverlayApps, overlayAppToRegistryInfo, } from "./overlay-app-registry";
+export async function loadMergedCatalogApps({ includeHiddenApps = false, } = {}) {
+    const [catalogAppsResult, installedAppsResult] = await Promise.allSettled([
+        client.listCatalogApps(),
+        client.listApps(),
+    ]);
+    const catalogApps = catalogAppsResult.status === "fulfilled" ? catalogAppsResult.value : [];
+    const installedApps = installedAppsResult.status === "fulfilled" ? installedAppsResult.value : [];
+    const staticApps = [...getInternalToolApps(), ...catalogApps];
+    const overlayApps = getAllOverlayApps()
+        .filter((app) => !staticApps.some((candidate) => candidate.name === app.name))
+        .filter((app) => !installedApps.some((candidate) => candidate.name === app.name))
+        .map(overlayAppToRegistryInfo);
+    const mergedApps = [...staticApps, ...overlayApps, ...installedApps].filter((app, index, items) => !items.slice(index + 1).some((candidate) => candidate.name === app.name));
+    return includeHiddenApps
+        ? mergedApps
+        : mergedApps.filter((app) => !isHiddenFromAppsView(app.name));
+}

package/packages/app-core/src/components/apps/extensions/registry.d.ts

@@ -0,0 +1,12 @@
+import type { RegistryAppInfo } from "../../../api";
+import type { AppDetailExtensionComponent } from "./types";
+/**
+ * Register a detail-panel extension component for a given panel id.
+ * Call this once per app at module load time (e.g. from the app's UI entry).
+ *
+ * @example
+ *   registerDetailExtension("babylon-operator-dashboard", BabylonDetailExtension);
+ */
+export declare function registerDetailExtension(detailPanelId: string, component: AppDetailExtensionComponent): void;
+export declare function getAppDetailExtension(app: RegistryAppInfo): AppDetailExtensionComponent | null;
+//# sourceMappingURL=registry.d.ts.map

package/packages/app-core/src/components/apps/extensions/registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../../../../../../../app-core/src/components/apps/extensions/registry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,SAAS,CAAC;AAa3D;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CACrC,aAAa,EAAE,MAAM,EACrB,SAAS,EAAE,2BAA2B,GACrC,IAAI,CAEN;AAED,wBAAgB,qBAAqB,CACnC,GAAG,EAAE,eAAe,GACnB,2BAA2B,GAAG,IAAI,CAIpC"}

package/packages/app-core/src/components/apps/extensions/registry.js

@@ -0,0 +1,23 @@
+/**
+ * Registry of app detail extension components keyed by the app's
+ * `uiExtension.detailPanelId` string.
+ *
+ * Apps register their detail extension on startup via side-effect import.
+ */
+const DETAIL_EXTENSION_COMPONENTS = new Map();
+/**
+ * Register a detail-panel extension component for a given panel id.
+ * Call this once per app at module load time (e.g. from the app's UI entry).
+ *
+ * @example
+ *   registerDetailExtension("babylon-operator-dashboard", BabylonDetailExtension);
+ */
+export function registerDetailExtension(detailPanelId, component) {
+    DETAIL_EXTENSION_COMPONENTS.set(detailPanelId, component);
+}
+export function getAppDetailExtension(app) {
+    const detailPanelId = app.uiExtension?.detailPanelId;
+    if (!detailPanelId)
+        return null;
+    return DETAIL_EXTENSION_COMPONENTS.get(detailPanelId) ?? null;
+}

package/packages/app-core/src/components/apps/extensions/surface.d.ts

@@ -0,0 +1,34 @@
+import type React from "react";
+import type { AppRunHealthState, AppRunSummary, AppRunViewerAttachment } from "../../../api";
+export type SurfaceTone = "neutral" | "accent" | "success" | "warn" | "danger";
+export interface SelectedAppRun {
+    run: AppRunSummary | null;
+    matchingRuns: AppRunSummary[];
+}
+export declare function selectLatestRunForApp(appName: string, runs: AppRunSummary[] | null | undefined): SelectedAppRun;
+export declare function formatDetailTimestamp(value: string | number | null | undefined): string;
+export declare function toneForHealthState(state: AppRunHealthState | null | undefined): SurfaceTone;
+export declare function toneForViewerAttachment(attachment: AppRunViewerAttachment | null | undefined): SurfaceTone;
+export declare function toneForStatusText(status: string | null | undefined): SurfaceTone;
+export declare function SurfaceBadge({ children, tone, }: {
+    children: React.ReactNode;
+    tone?: SurfaceTone;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function SurfaceCard({ label, value, tone, subtitle, }: {
+    label: string;
+    value: React.ReactNode;
+    tone?: SurfaceTone;
+    subtitle?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function SurfaceGrid({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function SurfaceSection({ title, children, }: {
+    title: string;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function SurfaceEmptyState({ title, body, }: {
+    title: string;
+    body: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=surface.d.ts.map

package/packages/app-core/src/components/apps/extensions/surface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"surface.d.ts","sourceRoot":"","sources":["../../../../../../../../app-core/src/components/apps/extensions/surface.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EACV,iBAAiB,EACjB,aAAa,EACb,sBAAsB,EACvB,MAAM,cAAc,CAAC;AAEtB,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC;AAE/E,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,aAAa,GAAG,IAAI,CAAC;IAC1B,YAAY,EAAE,aAAa,EAAE,CAAC;CAC/B;AAQD,wBAAgB,qBAAqB,CACnC,OAAO,EAAE,MAAM,EACf,IAAI,EAAE,aAAa,EAAE,GAAG,IAAI,GAAG,SAAS,GACvC,cAAc,CAoBhB;AAED,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,GACxC,MAAM,CAgBR;AAED,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,iBAAiB,GAAG,IAAI,GAAG,SAAS,GAC1C,WAAW,CAKb;AAED,wBAAgB,uBAAuB,CACrC,UAAU,EAAE,sBAAsB,GAAG,IAAI,GAAG,SAAS,GACpD,WAAW,CAIb;AAED,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAChC,WAAW,CAab;AAiBD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,IAAgB,GACjB,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB,2CAQA;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,IAAgB,EAChB,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,2CAgBA;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,2CAEtE;AAED,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,2CASA;AAED,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,IAAI,GACL,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd,2CASA"}

package/packages/app-core/src/components/apps/extensions/surface.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function toTimestamp(value) {
+    if (!value)
+        return 0;
+    const parsed = new Date(value).getTime();
+    return Number.isNaN(parsed) ? 0 : parsed;
+}
+export function selectLatestRunForApp(appName, runs) {
+    const matchingRuns = (Array.isArray(runs) ? runs : [])
+        .filter((run) => run.appName === appName)
+        .slice()
+        .sort((left, right) => {
+        const rightTime = Math.max(toTimestamp(right.updatedAt), toTimestamp(right.startedAt));
+        const leftTime = Math.max(toTimestamp(left.updatedAt), toTimestamp(left.startedAt));
+        return rightTime - leftTime;
+    });
+    return {
+        run: matchingRuns[0] ?? null,
+        matchingRuns,
+    };
+}
+export function formatDetailTimestamp(value) {
+    if (typeof value === "number") {
+        const date = new Date(value);
+        return Number.isNaN(date.getTime())
+            ? "Not yet verified"
+            : date.toLocaleString();
+    }
+    if (typeof value === "string" && value.trim().length > 0) {
+        const date = new Date(value);
+        return Number.isNaN(date.getTime())
+            ? "Not yet verified"
+            : date.toLocaleString();
+    }
+    return "Not yet verified";
+}
+export function toneForHealthState(state) {
+    if (state === "healthy")
+        return "success";
+    if (state === "degraded")
+        return "warn";
+    if (state === "offline")
+        return "danger";
+    return "neutral";
+}
+export function toneForViewerAttachment(attachment) {
+    if (attachment === "attached")
+        return "success";
+    if (attachment === "detached")
+        return "warn";
+    return "neutral";
+}
+export function toneForStatusText(status) {
+    if (!status)
+        return "neutral";
+    const normalized = status.toLowerCase();
+    if (normalized.includes("running") || normalized.includes("ready")) {
+        return "success";
+    }
+    if (normalized.includes("warn") || normalized.includes("waiting")) {
+        return "warn";
+    }
+    if (normalized.includes("error") || normalized.includes("fail")) {
+        return "danger";
+    }
+    return "neutral";
+}
+function toneClassName(tone) {
+    switch (tone) {
+        case "success":
+            return "border-ok/30 bg-ok/10 text-ok";
+        case "accent":
+            return "border-accent/25 bg-accent/10 text-accent";
+        case "warn":
+            return "border-warn/30 bg-warn/10 text-warn";
+        case "danger":
+            return "border-danger/30 bg-danger/10 text-danger";
+        default:
+            return "border-border/35 bg-bg-hover/70 text-muted-strong";
+    }
+}
+export function SurfaceBadge({ children, tone = "neutral", }) {
+    return (_jsx("span", { className: `inline-flex min-h-6 items-center rounded-full border px-2.5 py-1 text-2xs font-medium uppercase tracking-[0.14em] ${toneClassName(tone)}`, children: children }));
+}
+export function SurfaceCard({ label, value, tone = "neutral", subtitle, }) {
+    return (_jsxs("div", { className: "rounded-2xl border border-border/35 bg-card/74 px-4 py-3 shadow-sm", children: [_jsx("div", { className: "text-xs-tight font-medium uppercase tracking-[0.16em] text-muted", children: label }), _jsx("div", { className: `mt-1 text-xs leading-5 ${toneClassName(tone)}`, children: value }), subtitle ? (_jsx("div", { className: "mt-1 text-xs-tight leading-5 text-muted-strong", children: subtitle })) : null] }));
+}
+export function SurfaceGrid({ children }) {
+    return _jsx("div", { className: "grid gap-2 md:grid-cols-2", children: children });
+}
+export function SurfaceSection({ title, children, }) {
+    return (_jsxs("section", { className: "space-y-3 rounded-[1.4rem] border border-border/35 bg-card/74 p-4 shadow-sm", children: [_jsx("div", { className: "text-xs-tight font-semibold uppercase tracking-[0.18em] text-muted", children: title }), children] }));
+}
+export function SurfaceEmptyState({ title, body, }) {
+    return (_jsxs("div", { className: "rounded-[1.4rem] border border-border/35 bg-card/74 p-4 shadow-sm", children: [_jsx("div", { className: "text-xs-tight font-semibold uppercase tracking-[0.18em] text-muted", children: title }), _jsx("p", { className: "mt-2 text-xs leading-6 text-muted-strong", children: body })] }));
+}

package/packages/app-core/src/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/packages/app-core/src/components/apps/extensions/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../../app-core/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/packages/app-core/src/components/apps/extensions/types.js

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