@elizaos/app-core 2.0.0-alpha.85 → 2.0.0-beta.2

package/components/stream/overlays/built-in/BrandingWidget.js

@@ -1,36 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * Branding — Static agent name / logo watermark in the corner.
- */
-import { registerWidget } from "../registry";
-function Branding({ instance, agentName }) {
-    const opacity = instance.config.opacity ?? 0.6;
-    const showLabel = instance.config.showLabel ?? true;
-    return (_jsx("div", { className: "h-full flex items-end justify-end p-2", style: { opacity }, children: _jsx("div", { className: "bg-bg/60 border border-border/30 rounded-md px-3 py-1.5 backdrop-blur-sm", children: showLabel && (_jsx("p", { className: "text-[10px] uppercase tracking-widest text-muted/80 font-medium", children: agentName })) }) }));
-}
-const definition = {
-    type: "branding",
-    name: "Branding",
-    description: "Agent name/logo watermark",
-    subscribesTo: [],
-    defaultPosition: { x: 78, y: 90, width: 20, height: 8 },
-    defaultZIndex: 11,
-    configSchema: {
-        opacity: {
-            type: "number",
-            label: "Opacity",
-            default: 0.6,
-            min: 0.1,
-            max: 1,
-        },
-        showLabel: {
-            type: "boolean",
-            label: "Show agent name",
-            default: true,
-        },
-    },
-    defaultConfig: { opacity: 0.6, showLabel: true },
-    render: Branding,
-};
-registerWidget(definition);
-export default definition;

package/components/stream/overlays/built-in/CustomHtmlWidget.d.ts

@@ -1,26 +0,0 @@
-/**
- * CustomHtml — User-provided HTML/CSS/JS or external URL rendered in a
- * sandboxed iframe.
- *
- * ## Security model
- *
- * Both modes use `sandbox="allow-scripts"` WITHOUT `allow-same-origin`.
- * This means the iframe:
- *   - Can execute JavaScript but is treated as a unique opaque origin
- *   - Cannot access the parent frame's DOM, cookies, or localStorage
- *   - Cannot make same-origin requests to the host application
- *   - Cannot navigate the parent frame
- *
- * Inline mode adds a strict CSP meta tag that blocks all network requests
- * (no fetch, XHR, image loads, or script imports from external origins).
- * This confines user-provided JS to pure computation and DOM manipulation.
- *
- * URL mode loads external content with `allow-scripts` only. The content
- * can make network requests to its own origin but cannot interact with
- * the host application. Only use trusted URLs — the iframe will execute
- * whatever JavaScript the remote page serves.
- */
-import type { WidgetDefinition } from "../types";
-declare const definition: WidgetDefinition;
-export default definition;
-//# sourceMappingURL=CustomHtmlWidget.d.ts.map

package/components/stream/overlays/built-in/CustomHtmlWidget.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CustomHtmlWidget.d.ts","sourceRoot":"","sources":["../../../../../src/components/stream/overlays/built-in/CustomHtmlWidget.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAKH,OAAO,KAAK,EAAE,gBAAgB,EAAqB,MAAM,UAAU,CAAC;AAkDpE,QAAA,MAAM,UAAU,EAAE,gBAyBjB,CAAC;AAGF,eAAe,UAAU,CAAC"}

package/components/stream/overlays/built-in/CustomHtmlWidget.js

@@ -1,78 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * CustomHtml — User-provided HTML/CSS/JS or external URL rendered in a
- * sandboxed iframe.
- *
- * ## Security model
- *
- * Both modes use `sandbox="allow-scripts"` WITHOUT `allow-same-origin`.
- * This means the iframe:
- *   - Can execute JavaScript but is treated as a unique opaque origin
- *   - Cannot access the parent frame's DOM, cookies, or localStorage
- *   - Cannot make same-origin requests to the host application
- *   - Cannot navigate the parent frame
- *
- * Inline mode adds a strict CSP meta tag that blocks all network requests
- * (no fetch, XHR, image loads, or script imports from external origins).
- * This confines user-provided JS to pure computation and DOM manipulation.
- *
- * URL mode loads external content with `allow-scripts` only. The content
- * can make network requests to its own origin but cannot interact with
- * the host application. Only use trusted URLs — the iframe will execute
- * whatever JavaScript the remote page serves.
- */
-import { useApp } from "@elizaos/app-core/state";
-import { useRef } from "react";
-import { registerWidget } from "../registry";
-/** CSP that blocks all network access — inline scripts/styles only. */
-const INLINE_CSP = "default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline';";
-function CustomHtml({ instance }) {
-    const { t } = useApp();
-    const mode = instance.config.mode ?? "inline";
-    const htmlContent = instance.config.html ?? "";
-    const cssContent = instance.config.css ?? "";
-    const jsContent = instance.config.js ?? "";
-    const url = instance.config.url ?? "";
-    const iframeRef = useRef(null);
-    if (mode === "url" && url) {
-        return (_jsx("iframe", { ref: iframeRef, src: url, sandbox: "allow-scripts", className: "w-full h-full border-0 rounded", title: t("customhtmlwidget.CustomWidgetExter") }));
-    }
-    // Inline mode: render HTML/CSS/JS via srcdoc with strict CSP
-    const srcdoc = `<!DOCTYPE html>
-<html>
-<head>
-<meta charset="utf-8">
-<meta http-equiv="Content-Security-Policy" content="${INLINE_CSP}">
-<style>${cssContent}</style>
-</head>
-<body>${htmlContent}<script>${jsContent}</script></body>
-</html>`;
-    return (_jsx("iframe", { ref: iframeRef, srcDoc: srcdoc, sandbox: "allow-scripts", className: "w-full h-full border-0 rounded", title: t("customhtmlwidget.CustomWidgetInlin") }));
-}
-const definition = {
-    type: "custom-html",
-    name: "Custom HTML",
-    description: "User-provided HTML/CSS/JS or external URL in a sandboxed iframe",
-    subscribesTo: [],
-    defaultPosition: { x: 10, y: 10, width: 30, height: 30 },
-    defaultZIndex: 20,
-    configSchema: {
-        mode: {
-            type: "select",
-            label: "Mode",
-            default: "inline",
-            options: [
-                { label: "Inline HTML", value: "inline" },
-                { label: "External URL", value: "url" },
-            ],
-        },
-        html: { type: "string", label: "HTML", default: "" },
-        css: { type: "string", label: "CSS", default: "" },
-        js: { type: "string", label: "JavaScript", default: "" },
-        url: { type: "string", label: "URL", default: "" },
-    },
-    defaultConfig: { mode: "inline", html: "", css: "", js: "", url: "" },
-    render: CustomHtml,
-};
-registerWidget(definition);
-export default definition;

package/components/stream/overlays/built-in/PeonGlassWidget.d.ts

@@ -1,11 +0,0 @@
-/**
- * Peon Glass Widget — Glassmorphism notification panel.
- *
- * Renders agent events as a translucent glass-style notification card with
- * an accent color bar and animated progress line. Inspired by the peon-ping
- * "glass" theme.
- */
-import type { WidgetDefinition } from "../types";
-declare const definition: WidgetDefinition;
-export default definition;
-//# sourceMappingURL=PeonGlassWidget.d.ts.map

package/components/stream/overlays/built-in/PeonGlassWidget.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PeonGlassWidget.d.ts","sourceRoot":"","sources":["../../../../../src/components/stream/overlays/built-in/PeonGlassWidget.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,KAAK,EAAE,gBAAgB,EAAqB,MAAM,UAAU,CAAC;AAqNpE,QAAA,MAAM,UAAU,EAAE,gBAsCjB,CAAC;AAGF,eAAe,UAAU,CAAC"}

package/components/stream/overlays/built-in/PeonGlassWidget.js

@@ -1,188 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Peon Glass Widget — Glassmorphism notification panel.
- *
- * Renders agent events as a translucent glass-style notification card with
- * an accent color bar and animated progress line. Inspired by the peon-ping
- * "glass" theme.
- */
-import { useEffect, useMemo, useState } from "react";
-import { registerWidget } from "../registry";
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-function getEventText(e) {
-    const p = e.payload;
-    if (typeof p.text === "string" && p.text)
-        return p.text;
-    if (typeof p.preview === "string" && p.preview)
-        return p.preview;
-    if (typeof p.reason === "string" && p.reason)
-        return p.reason;
-    return "";
-}
-function getEventSource(e) {
-    const p = e.payload;
-    if (typeof p.source === "string" && p.source)
-        return p.source;
-    if (typeof p.channel === "string" && p.channel)
-        return p.channel;
-    return e.stream ?? "agent";
-}
-function formatTime(ts) {
-    const d = new Date(ts);
-    return d.toLocaleTimeString([], {
-        hour: "2-digit",
-        minute: "2-digit",
-        second: "2-digit",
-    });
-}
-// ---------------------------------------------------------------------------
-// Component
-// ---------------------------------------------------------------------------
-function PeonGlass({ instance, events }) {
-    const accentColor = instance.config.accentColor ?? "#a78bfa";
-    const maxItems = instance.config.maxItems ?? 4;
-    const displayMs = instance.config.displayDuration ?? 6000;
-    const [visibleItems, setVisibleItems] = useState([]);
-    // Track new events and display them with fade timers
-    const latestId = useMemo(() => {
-        if (events.length === 0)
-            return null;
-        return events[events.length - 1].eventId;
-    }, [events]);
-    useEffect(() => {
-        if (!latestId || events.length === 0)
-            return;
-        const e = events[events.length - 1];
-        const text = getEventText(e);
-        if (!text)
-            return;
-        const item = {
-            id: e.eventId,
-            source: getEventSource(e),
-            text: text.length > 120 ? `${text.slice(0, 120)}...` : text,
-            ts: e.ts,
-            fading: false,
-        };
-        setVisibleItems((prev) => {
-            const next = [...prev.filter((i) => i.id !== item.id), item];
-            return next.slice(-maxItems);
-        });
-        // Start fade
-        const fadeTimer = setTimeout(() => {
-            setVisibleItems((prev) => prev.map((i) => (i.id === item.id ? { ...i, fading: true } : i)));
-        }, displayMs - 800);
-        // Remove
-        const removeTimer = setTimeout(() => {
-            setVisibleItems((prev) => prev.filter((i) => i.id !== item.id));
-        }, displayMs);
-        return () => {
-            clearTimeout(fadeTimer);
-            clearTimeout(removeTimer);
-        };
-    }, [latestId, events, maxItems, displayMs]);
-    if (visibleItems.length === 0)
-        return null;
-    return (_jsxs("div", { style: {
-            width: "100%",
-            height: "100%",
-            display: "flex",
-            flexDirection: "column",
-            gap: 6,
-            fontFamily: "'Inter', 'SF Pro', system-ui, sans-serif",
-            overflow: "hidden",
-        }, children: [visibleItems.map((item) => (_jsxs("div", { style: {
-                    background: "rgba(15, 15, 25, 0.65)",
-                    backdropFilter: "blur(16px) saturate(1.4)",
-                    WebkitBackdropFilter: "blur(16px) saturate(1.4)",
-                    borderRadius: 10,
-                    border: "1px solid rgba(255, 255, 255, 0.08)",
-                    overflow: "hidden",
-                    opacity: item.fading ? 0 : 1,
-                    transform: item.fading ? "translateY(-4px)" : "translateY(0)",
-                    transition: "opacity 0.6s ease, transform 0.6s ease",
-                }, children: [_jsx("div", { style: {
-                            height: 3,
-                            background: `linear-gradient(90deg, ${accentColor}, ${accentColor}88)`,
-                        } }), _jsxs("div", { style: { padding: "8px 12px" }, children: [_jsxs("div", { style: {
-                                    display: "flex",
-                                    justifyContent: "space-between",
-                                    alignItems: "center",
-                                    marginBottom: 4,
-                                }, children: [_jsx("span", { style: {
-                                            fontSize: 9,
-                                            fontWeight: 600,
-                                            textTransform: "uppercase",
-                                            letterSpacing: "0.08em",
-                                            color: accentColor,
-                                        }, children: item.source }), _jsx("span", { style: {
-                                            fontSize: 8,
-                                            color: "rgba(255, 255, 255, 0.35)",
-                                            fontVariantNumeric: "tabular-nums",
-                                        }, children: formatTime(item.ts) })] }), _jsx("p", { style: {
-                                    margin: 0,
-                                    fontSize: 11,
-                                    lineHeight: 1.45,
-                                    color: "rgba(255, 255, 255, 0.85)",
-                                }, children: item.text })] }), _jsx("div", { style: {
-                            height: 2,
-                            background: `${accentColor}22`,
-                            position: "relative",
-                            overflow: "hidden",
-                        }, children: _jsx("div", { style: {
-                                position: "absolute",
-                                top: 0,
-                                left: 0,
-                                height: "100%",
-                                width: "100%",
-                                background: `linear-gradient(90deg, transparent, ${accentColor}66, transparent)`,
-                                animation: "peon-glass-sweep 2s ease-in-out infinite",
-                            } }) })] }, item.id))), _jsx("style", { children: `@keyframes peon-glass-sweep {
-          0% { transform: translateX(-100%); }
-          100% { transform: translateX(100%); }
-        }` })] }));
-}
-// ---------------------------------------------------------------------------
-// Widget definition + registration
-// ---------------------------------------------------------------------------
-const definition = {
-    type: "peon-glass",
-    name: "Peon Glass",
-    description: "Glassmorphism notification panel with accent bar and animated progress line",
-    subscribesTo: [
-        "thought",
-        "action",
-        "tool",
-        "assistant",
-        "evaluator",
-        "new_viewer",
-    ],
-    defaultPosition: { x: 2, y: 2, width: 32, height: 40 },
-    defaultZIndex: 16,
-    configSchema: {
-        accentColor: {
-            type: "color",
-            label: "Accent color",
-            default: "#a78bfa",
-        },
-        maxItems: {
-            type: "number",
-            label: "Max visible items",
-            default: 4,
-            min: 1,
-            max: 8,
-        },
-        displayDuration: {
-            type: "number",
-            label: "Display duration (ms)",
-            default: 6000,
-            min: 2000,
-            max: 20000,
-        },
-    },
-    defaultConfig: { accentColor: "#a78bfa", maxItems: 4, displayDuration: 6000 },
-    render: PeonGlass,
-};
-registerWidget(definition);
-export default definition;

package/components/stream/overlays/built-in/PeonHudWidget.d.ts

@@ -1,10 +0,0 @@
-/**
- * Peon HUD Widget — Jarvis-inspired circular heads-up display.
- *
- * Renders a rotating arc HUD showing agent status, current mode,
- * and recent activity count. Inspired by the peon-ping "jarvis" theme.
- */
-import type { WidgetDefinition } from "../types";
-declare const definition: WidgetDefinition;
-export default definition;
-//# sourceMappingURL=PeonHudWidget.d.ts.map

package/components/stream/overlays/built-in/PeonHudWidget.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PeonHudWidget.d.ts","sourceRoot":"","sources":["../../../../../src/components/stream/overlays/built-in/PeonHudWidget.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,OAAO,KAAK,EAAE,gBAAgB,EAAqB,MAAM,UAAU,CAAC;AA0MpE,QAAA,MAAM,UAAU,EAAE,gBA+BjB,CAAC;AAGF,eAAe,UAAU,CAAC"}

package/components/stream/overlays/built-in/PeonHudWidget.js

@@ -1,168 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Peon HUD Widget — Jarvis-inspired circular heads-up display.
- *
- * Renders a rotating arc HUD showing agent status, current mode,
- * and recent activity count. Inspired by the peon-ping "jarvis" theme.
- */
-import { useApp } from "@elizaos/app-core/state";
-import { useEffect, useMemo, useRef } from "react";
-import { registerWidget } from "../registry";
-// ---------------------------------------------------------------------------
-// Constants
-// ---------------------------------------------------------------------------
-const TAU = Math.PI * 2;
-// ---------------------------------------------------------------------------
-// Canvas-based HUD renderer
-// ---------------------------------------------------------------------------
-function drawHud(ctx, w, h, rotation, progress, accentColor, dimColor) {
-    ctx.clearRect(0, 0, w, h);
-    const cx = w / 2;
-    const cy = h / 2;
-    const r = Math.min(cx, cy) - 4;
-    // Outer rotating arc
-    ctx.strokeStyle = accentColor;
-    ctx.lineWidth = 2;
-    ctx.beginPath();
-    ctx.arc(cx, cy, r, rotation, rotation + TAU * 0.7);
-    ctx.stroke();
-    // Inner counter-rotating arc
-    ctx.strokeStyle = dimColor;
-    ctx.lineWidth = 1.5;
-    ctx.beginPath();
-    ctx.arc(cx, cy, r * 0.78, -rotation * 1.3, -rotation * 1.3 + TAU * 0.5);
-    ctx.stroke();
-    // Graduation ticks (12 positions)
-    for (let i = 0; i < 12; i++) {
-        const angle = (TAU / 12) * i + rotation * 0.2;
-        const inner = r * 0.85;
-        const outer = r * 0.92;
-        ctx.strokeStyle = i % 3 === 0 ? accentColor : dimColor;
-        ctx.lineWidth = i % 3 === 0 ? 2 : 1;
-        ctx.beginPath();
-        ctx.moveTo(cx + Math.cos(angle) * inner, cy + Math.sin(angle) * inner);
-        ctx.lineTo(cx + Math.cos(angle) * outer, cy + Math.sin(angle) * outer);
-        ctx.stroke();
-    }
-    // Progress ring (inner)
-    if (progress > 0) {
-        ctx.strokeStyle = accentColor;
-        ctx.lineWidth = 3;
-        ctx.lineCap = "round";
-        ctx.beginPath();
-        ctx.arc(cx, cy, r * 0.65, -Math.PI / 2, -Math.PI / 2 + TAU * Math.min(progress, 1));
-        ctx.stroke();
-        ctx.lineCap = "butt";
-    }
-}
-// ---------------------------------------------------------------------------
-// Component
-// ---------------------------------------------------------------------------
-function PeonHud({ instance, events, agentMode, agentName, }) {
-    const { t } = useApp();
-    const accentColor = instance.config.accentColor ?? "#00e5ff";
-    const showLabel = instance.config.showLabel ?? true;
-    const showEventCount = instance.config.showEventCount ?? true;
-    const canvasRef = useRef(null);
-    const rotationRef = useRef(0);
-    const rafRef = useRef(0);
-    // Derive a pseudo-progress from recent event density
-    const recentCount = useMemo(() => {
-        const cutoff = Date.now() - 30_000;
-        return events.filter((e) => e.ts > cutoff).length;
-    }, [events]);
-    const progress = Math.min(recentCount / 20, 1);
-    const modeLabel = useMemo(() => {
-        switch (agentMode) {
-            case "gaming":
-                return "GAMING";
-            case "terminal":
-                return "EXECUTING";
-            case "chatting":
-                return "CHATTING";
-            default:
-                return "STANDBY";
-        }
-    }, [agentMode]);
-    // Animation loop
-    useEffect(() => {
-        const canvas = canvasRef.current;
-        if (!canvas)
-            return;
-        const ctx = canvas.getContext("2d");
-        if (!ctx)
-            return;
-        const dim = `${accentColor}44`;
-        let running = true;
-        const tick = () => {
-            if (!running)
-                return;
-            rotationRef.current += 0.008;
-            drawHud(ctx, canvas.width, canvas.height, rotationRef.current, progress, accentColor, dim);
-            rafRef.current = requestAnimationFrame(tick);
-        };
-        tick();
-        return () => {
-            running = false;
-            cancelAnimationFrame(rafRef.current);
-        };
-    }, [accentColor, progress]);
-    return (_jsxs("div", { style: {
-            width: "100%",
-            height: "100%",
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            justifyContent: "center",
-            fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
-            color: accentColor,
-        }, children: [_jsx("canvas", { ref: canvasRef, width: 140, height: 140, style: { width: 140, height: 140 } }), showLabel && (_jsxs("div", { style: {
-                    marginTop: 6,
-                    fontSize: 10,
-                    letterSpacing: "0.15em",
-                    textTransform: "uppercase",
-                    opacity: 0.9,
-                    textAlign: "center",
-                }, children: [_jsx("div", { style: { fontWeight: 600 }, children: modeLabel }), _jsx("div", { style: { opacity: 0.6, fontSize: 9, marginTop: 2 }, children: agentName })] })), showEventCount && (_jsxs("div", { style: {
-                    marginTop: 4,
-                    fontSize: 9,
-                    opacity: 0.5,
-                    letterSpacing: "0.1em",
-                }, children: [events.length, " ", t("peonhudwidget.events")] }))] }));
-}
-// ---------------------------------------------------------------------------
-// Widget definition + registration
-// ---------------------------------------------------------------------------
-const definition = {
-    type: "peon-hud",
-    name: "Peon HUD",
-    description: "Jarvis-inspired circular heads-up display showing agent mode and activity",
-    subscribesTo: ["thought", "action", "tool", "assistant", "evaluator"],
-    defaultPosition: { x: 82, y: 10, width: 16, height: 30 },
-    defaultZIndex: 12,
-    configSchema: {
-        accentColor: {
-            type: "color",
-            label: "Accent color",
-            default: "#00e5ff",
-        },
-        showLabel: {
-            type: "boolean",
-            label: "Show mode label",
-            default: true,
-        },
-        showEventCount: {
-            type: "boolean",
-            label: "Show event count",
-            default: true,
-        },
-    },
-    defaultConfig: {
-        accentColor: "#00e5ff",
-        showLabel: true,
-        showEventCount: true,
-    },
-    render: PeonHud,
-};
-registerWidget(definition);
-export default definition;

package/components/stream/overlays/built-in/PeonSakuraWidget.d.ts

@@ -1,11 +0,0 @@
-/**
- * Peon Sakura Widget — Zen garden ambient overlay with cherry blossom petals.
- *
- * Renders animated falling petals and a minimal status indicator.
- * Petal activity scales with event density — more events = more petals.
- * Inspired by the peon-ping "sakura" theme.
- */
-import type { WidgetDefinition } from "../types";
-declare const definition: WidgetDefinition;
-export default definition;
-//# sourceMappingURL=PeonSakuraWidget.d.ts.map

package/components/stream/overlays/built-in/PeonSakuraWidget.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PeonSakuraWidget.d.ts","sourceRoot":"","sources":["../../../../../src/components/stream/overlays/built-in/PeonSakuraWidget.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,KAAK,EAAE,gBAAgB,EAAqB,MAAM,UAAU,CAAC;AA2OpE,QAAA,MAAM,UAAU,EAAE,gBA6BjB,CAAC;AAGF,eAAe,UAAU,CAAC"}