@elizaos/app-core 2.0.0-alpha.10

package/src/components/stream/overlays/built-in/PeonSakuraWidget.tsx

@@ -0,0 +1,278 @@
+/**
+ * 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 { useEffect, useMemo, useRef, useState } from "react";
+import { registerWidget } from "../registry";
+import type { WidgetDefinition, WidgetRenderProps } from "../types";
+
+// ---------------------------------------------------------------------------
+// Petal simulation
+// ---------------------------------------------------------------------------
+
+interface Petal {
+  x: number;
+  y: number;
+  size: number;
+  rotation: number;
+  rotSpeed: number;
+  fallSpeed: number;
+  swayAmplitude: number;
+  swayOffset: number;
+  opacity: number;
+  hue: number;
+}
+
+function createPetal(canvasW: number): Petal {
+  return {
+    x: Math.random() * canvasW,
+    y: -10 - Math.random() * 40,
+    size: 4 + Math.random() * 6,
+    rotation: Math.random() * Math.PI * 2,
+    rotSpeed: (Math.random() - 0.5) * 0.04,
+    fallSpeed: 0.3 + Math.random() * 0.5,
+    swayAmplitude: 15 + Math.random() * 25,
+    swayOffset: Math.random() * Math.PI * 2,
+    opacity: 0.3 + Math.random() * 0.5,
+    hue: 330 + Math.random() * 30, // pink range
+  };
+}
+
+function drawPetal(ctx: CanvasRenderingContext2D, p: Petal, time: number) {
+  const sx = p.x + Math.sin(time * 0.001 + p.swayOffset) * p.swayAmplitude;
+  ctx.save();
+  ctx.translate(sx, p.y);
+  ctx.rotate(p.rotation);
+  ctx.globalAlpha = p.opacity;
+
+  // Draw a simple petal shape
+  ctx.fillStyle = `hsl(${p.hue}, 80%, 78%)`;
+  ctx.beginPath();
+  ctx.ellipse(0, 0, p.size, p.size * 0.55, 0, 0, Math.PI * 2);
+  ctx.fill();
+
+  // Inner highlight
+  ctx.fillStyle = `hsl(${p.hue}, 90%, 88%)`;
+  ctx.beginPath();
+  ctx.ellipse(0, 0, p.size * 0.5, p.size * 0.3, 0, 0, Math.PI * 2);
+  ctx.fill();
+
+  ctx.restore();
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+function PeonSakura({ instance, events, agentMode }: WidgetRenderProps) {
+  const petalDensity = (instance.config.petalDensity as number) ?? 12;
+  const showStatus = (instance.config.showStatus as boolean) ?? true;
+  const accentColor = (instance.config.accentColor as string) ?? "#f9a8d4";
+
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const petalsRef = useRef<Petal[]>([]);
+  const rafRef = useRef(0);
+
+  // Scale petal count with event density
+  const recentCount = useMemo(() => {
+    const cutoff = Date.now() - 15_000;
+    return events.filter((e) => e.ts > cutoff).length;
+  }, [events]);
+
+  const targetPetalCount = Math.min(
+    petalDensity + Math.floor(recentCount * 1.5),
+    petalDensity * 3,
+  );
+
+  // Latest event text for subtle status line
+  const latestText = useMemo(() => {
+    if (events.length === 0) return "";
+    const p = events[events.length - 1].payload as Record<string, unknown>;
+    const t =
+      typeof p.text === "string"
+        ? p.text
+        : typeof p.preview === "string"
+          ? p.preview
+          : "";
+    return t.length > 50 ? `${t.slice(0, 50)}...` : t;
+  }, [events]);
+
+  const [canvasSize, setCanvasSize] = useState({ w: 300, h: 300 });
+
+  // Resize observer
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas?.parentElement) return;
+    const ro = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { width, height } = entry.contentRect;
+        if (width > 0 && height > 0) {
+          setCanvasSize({ w: Math.round(width), h: Math.round(height) });
+        }
+      }
+    });
+    ro.observe(canvas.parentElement);
+    return () => ro.disconnect();
+  }, []);
+
+  // Animation loop
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    let running = true;
+
+    const tick = () => {
+      if (!running) return;
+      const now = performance.now();
+      const { w, h } = canvasSize;
+      canvas.width = w;
+      canvas.height = h;
+      ctx.clearRect(0, 0, w, h);
+
+      // Spawn new petals
+      while (petalsRef.current.length < targetPetalCount) {
+        petalsRef.current.push(createPetal(w));
+      }
+      // Remove excess
+      if (petalsRef.current.length > targetPetalCount + 5) {
+        petalsRef.current.splice(targetPetalCount);
+      }
+
+      // Update & draw
+      const live: Petal[] = [];
+      for (const p of petalsRef.current) {
+        p.y += p.fallSpeed;
+        p.rotation += p.rotSpeed;
+
+        if (p.y < h + 20) {
+          drawPetal(ctx, p, now);
+          live.push(p);
+        } else {
+          // Recycle at top
+          live.push(createPetal(w));
+        }
+      }
+      petalsRef.current = live;
+
+      rafRef.current = requestAnimationFrame(tick);
+    };
+    tick();
+
+    return () => {
+      running = false;
+      cancelAnimationFrame(rafRef.current);
+    };
+  }, [canvasSize, targetPetalCount]);
+
+  const modeEmoji = useMemo(() => {
+    switch (agentMode) {
+      case "gaming":
+        return "\u{1F3AE}";
+      case "terminal":
+        return "\u{1F4BB}";
+      case "chatting":
+        return "\u{1F4AC}";
+      default:
+        return "\u{1F338}";
+    }
+  }, [agentMode]);
+
+  return (
+    <div
+      style={{
+        width: "100%",
+        height: "100%",
+        position: "relative",
+        overflow: "hidden",
+      }}
+    >
+      <canvas
+        ref={canvasRef}
+        style={{
+          position: "absolute",
+          inset: 0,
+          width: "100%",
+          height: "100%",
+          pointerEvents: "none",
+        }}
+      />
+
+      {showStatus && latestText && (
+        <div
+          style={{
+            position: "absolute",
+            bottom: 8,
+            left: 8,
+            right: 8,
+            background: "rgba(10, 5, 15, 0.5)",
+            backdropFilter: "blur(8px)",
+            WebkitBackdropFilter: "blur(8px)",
+            borderRadius: 8,
+            padding: "6px 10px",
+            fontFamily: "'Inter', system-ui, sans-serif",
+            display: "flex",
+            alignItems: "center",
+            gap: 6,
+          }}
+        >
+          <span style={{ fontSize: 12 }}>{modeEmoji}</span>
+          <span
+            style={{
+              fontSize: 10,
+              color: accentColor,
+              opacity: 0.85,
+              lineHeight: 1.3,
+            }}
+          >
+            {latestText}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Widget definition + registration
+// ---------------------------------------------------------------------------
+
+const definition: WidgetDefinition = {
+  type: "peon-sakura",
+  name: "Peon Sakura",
+  description:
+    "Zen garden ambient overlay with animated cherry blossom petals that scale with activity",
+  subscribesTo: ["thought", "action", "tool", "assistant", "evaluator"],
+  defaultPosition: { x: 0, y: 0, width: 25, height: 50 },
+  defaultZIndex: 3,
+  configSchema: {
+    petalDensity: {
+      type: "number",
+      label: "Base petal count",
+      default: 12,
+      min: 4,
+      max: 40,
+    },
+    showStatus: {
+      type: "boolean",
+      label: "Show status bar",
+      default: true,
+    },
+    accentColor: {
+      type: "color",
+      label: "Text color",
+      default: "#f9a8d4",
+    },
+  },
+  defaultConfig: { petalDensity: 12, showStatus: true, accentColor: "#f9a8d4" },
+  render: PeonSakura,
+};
+
+registerWidget(definition);
+export default definition;

package/src/components/stream/overlays/built-in/ThoughtBubbleWidget.tsx

@@ -0,0 +1,77 @@
+/**
+ * ThoughtBubble — Shows the agent's latest thought/reasoning, auto-fades
+ * after a configurable delay.
+ */
+
+import { useEffect, useMemo, useState } from "react";
+import { getEventText } from "../../helpers";
+import { registerWidget } from "../registry";
+import type { WidgetDefinition, WidgetRenderProps } from "../types";
+
+function ThoughtBubble({ instance, events }: WidgetRenderProps) {
+  const fadeMs = (instance.config.fadeDuration as number) ?? 8000;
+  const maxLen = (instance.config.maxLength as number) ?? 200;
+
+  const latest = useMemo(() => {
+    if (events.length === 0) return null;
+    return events[events.length - 1];
+  }, [events]);
+
+  const [visible, setVisible] = useState(false);
+  const [text, setText] = useState("");
+
+  useEffect(() => {
+    if (!latest) return;
+    const content = getEventText(latest);
+    setText(content.length > maxLen ? `${content.slice(0, maxLen)}…` : content);
+    setVisible(true);
+
+    const timer = setTimeout(() => setVisible(false), fadeMs);
+    return () => clearTimeout(timer);
+  }, [latest, fadeMs, maxLen]);
+
+  if (!visible || !text) return null;
+
+  return (
+    <div
+      className="h-full flex items-end justify-center px-2 pb-2 transition-opacity duration-500"
+      style={{ opacity: visible ? 1 : 0 }}
+    >
+      <div className="bg-bg/80 border border-border/50 rounded-lg px-4 py-2.5 backdrop-blur-sm shadow-lg max-w-full">
+        <p className="text-xs text-muted leading-relaxed line-clamp-3">
+          💭 {text}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+const definition: WidgetDefinition = {
+  type: "thought-bubble",
+  name: "Thought Bubble",
+  description: "Shows the agent's latest thought or reasoning",
+  subscribesTo: ["thought", "assistant", "evaluator"],
+  defaultPosition: { x: 15, y: 75, width: 70, height: 20 },
+  defaultZIndex: 15,
+  configSchema: {
+    fadeDuration: {
+      type: "number",
+      label: "Fade delay (ms)",
+      default: 8000,
+      min: 2000,
+      max: 30000,
+    },
+    maxLength: {
+      type: "number",
+      label: "Max text length",
+      default: 200,
+      min: 50,
+      max: 500,
+    },
+  },
+  defaultConfig: { fadeDuration: 8000, maxLength: 200 },
+  render: ThoughtBubble,
+};
+
+registerWidget(definition);
+export default definition;

package/src/components/stream/overlays/built-in/ViewerCountWidget.tsx

@@ -0,0 +1,46 @@
+/**
+ * ViewerCount — Compact badge showing live viewer count with a green dot.
+ */
+
+import { useMemo } from "react";
+import { registerWidget } from "../registry";
+import type { WidgetDefinition, WidgetRenderProps } from "../types";
+
+function ViewerCount({ events }: WidgetRenderProps) {
+  const count = useMemo(() => {
+    for (let i = events.length - 1; i >= 0; i--) {
+      const p = events[i].payload as Record<string, unknown>;
+      if (typeof p.apiViewerCount === "number") return p.apiViewerCount;
+      if (typeof p.uniqueChatters === "number") return p.uniqueChatters;
+    }
+    return null;
+  }, [events]);
+
+  if (count == null) return null;
+
+  return (
+    <div className="h-full flex items-start justify-start p-2">
+      <div className="inline-flex items-center gap-1.5 bg-bg/80 border border-border/50 rounded-full px-2.5 py-1 backdrop-blur-sm shadow-sm">
+        <span className="w-1.5 h-1.5 rounded-full bg-ok animate-pulse" />
+        <span className="text-[11px] font-medium text-txt/90 tabular-nums">
+          {count}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+const definition: WidgetDefinition = {
+  type: "viewer-count",
+  name: "Viewer Count",
+  description: "Live viewer count badge",
+  subscribesTo: ["viewer_stats"],
+  defaultPosition: { x: 0, y: 0, width: 10, height: 6 },
+  defaultZIndex: 14,
+  configSchema: {},
+  defaultConfig: {},
+  render: ViewerCount,
+};
+
+registerWidget(definition);
+export default definition;

package/src/components/stream/overlays/built-in/index.ts

@@ -0,0 +1,13 @@
+/**
+ * Barrel import — importing this module triggers registration of all built-in widgets.
+ */
+
+import "./ThoughtBubbleWidget";
+import "./ActionTickerWidget";
+import "./AlertPopupWidget";
+import "./ViewerCountWidget";
+import "./BrandingWidget";
+import "./CustomHtmlWidget";
+import "./PeonHudWidget";
+import "./PeonGlassWidget";
+import "./PeonSakuraWidget";

package/src/components/stream/overlays/registry.ts

@@ -0,0 +1,22 @@
+/**
+ * In-memory widget registry.
+ *
+ * Built-in widgets self-register on import via `registerWidget()`.
+ * External code looks up definitions with `getWidget()` / `getAllWidgets()`.
+ */
+
+import type { WidgetDefinition } from "./types";
+
+const widgets = new Map<string, WidgetDefinition>();
+
+export function registerWidget(def: WidgetDefinition): void {
+  widgets.set(def.type, def);
+}
+
+export function getWidget(type: string): WidgetDefinition | undefined {
+  return widgets.get(type);
+}
+
+export function getAllWidgets(): WidgetDefinition[] {
+  return Array.from(widgets.values());
+}

package/src/components/stream/overlays/types.ts

@@ -0,0 +1,90 @@
+/**
+ * Stream overlay widget type system.
+ *
+ * Widget Definition (blueprint) → Widget Instance (placed on canvas) →
+ * OverlayLayer (renders all enabled instances).
+ */
+
+import type { StreamEventEnvelope } from "@elizaos/app-core/api";
+import type { ComponentType } from "react";
+import type { AgentMode } from "../helpers";
+
+// ---------------------------------------------------------------------------
+// Position & Config
+// ---------------------------------------------------------------------------
+
+/** Percentage-based position (0-100% of 1280×720 canvas). */
+export interface WidgetPosition {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface WidgetConfigField {
+  type: "string" | "number" | "boolean" | "select" | "color";
+  label: string;
+  default: unknown;
+  options?: Array<{ label: string; value: string }>;
+  min?: number;
+  max?: number;
+}
+
+// ---------------------------------------------------------------------------
+// Widget Definition (blueprint registered in the registry)
+// ---------------------------------------------------------------------------
+
+export interface WidgetDefinition {
+  /** Unique type key, e.g. "thought-bubble", "custom-html". */
+  type: string;
+  /** Human-readable display name. */
+  name: string;
+  description: string;
+  /** Which event streams this widget subscribes to (filters events). */
+  subscribesTo: string[];
+  defaultPosition: WidgetPosition;
+  defaultZIndex: number;
+  /** Schema for auto-generated settings UI. */
+  configSchema: Record<string, WidgetConfigField>;
+  defaultConfig: Record<string, unknown>;
+  /** React component that renders the widget content. */
+  render: ComponentType<WidgetRenderProps>;
+}
+
+// ---------------------------------------------------------------------------
+// Widget Instance (JSON-serializable, persisted in localStorage)
+// ---------------------------------------------------------------------------
+
+export interface WidgetInstance {
+  id: string;
+  /** References WidgetDefinition.type. */
+  type: string;
+  enabled: boolean;
+  position: WidgetPosition;
+  zIndex: number;
+  config: Record<string, unknown>;
+}
+
+// ---------------------------------------------------------------------------
+// Render props passed to each widget component
+// ---------------------------------------------------------------------------
+
+export interface WidgetRenderProps {
+  instance: WidgetInstance;
+  /** Events filtered to the widget's subscribesTo streams. */
+  events: StreamEventEnvelope[];
+  agentMode: AgentMode;
+  agentName: string;
+}
+
+// ---------------------------------------------------------------------------
+// Overlay Layout (persisted structure)
+// ---------------------------------------------------------------------------
+
+export interface OverlayLayout {
+  version: 1;
+  name: string;
+  widgets: WidgetInstance[];
+  /** The destination this layout is associated with (metadata only). */
+  destinationId?: string;
+}