@elizaos/app-core 2.0.0-alpha.74 → 2.0.0-alpha.76

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

@@ -1,265 +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 { useEffect, useMemo, useState } from "react";
-import { registerWidget } from "../registry";
-import type { WidgetDefinition, WidgetRenderProps } from "../types";
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-function getEventText(e: { payload: object }): string {
-  const p = e.payload as Record<string, unknown>;
-  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: { payload: object; stream?: string }): string {
-  const p = e.payload as Record<string, unknown>;
-  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: number): string {
-  const d = new Date(ts);
-  return d.toLocaleTimeString([], {
-    hour: "2-digit",
-    minute: "2-digit",
-    second: "2-digit",
-  });
-}
-
-// ---------------------------------------------------------------------------
-// Component
-// ---------------------------------------------------------------------------
-
-function PeonGlass({ instance, events }: WidgetRenderProps) {
-  const accentColor = (instance.config.accentColor as string) ?? "#a78bfa";
-  const maxItems = (instance.config.maxItems as number) ?? 4;
-  const displayMs = (instance.config.displayDuration as number) ?? 6000;
-
-  const [visibleItems, setVisibleItems] = useState<
-    Array<{
-      id: string;
-      source: string;
-      text: string;
-      ts: number;
-      fading: boolean;
-    }>
-  >([]);
-
-  // 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 (
-    <div
-      style={{
-        width: "100%",
-        height: "100%",
-        display: "flex",
-        flexDirection: "column",
-        gap: 6,
-        fontFamily: "'Inter', 'SF Pro', system-ui, sans-serif",
-        overflow: "hidden",
-      }}
-    >
-      {visibleItems.map((item) => (
-        <div
-          key={item.id}
-          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",
-          }}
-        >
-          {/* Accent color bar */}
-          <div
-            style={{
-              height: 3,
-              background: `linear-gradient(90deg, ${accentColor}, ${accentColor}88)`,
-            }}
-          />
-
-          <div style={{ padding: "8px 12px" }}>
-            {/* Header: source + timestamp */}
-            <div
-              style={{
-                display: "flex",
-                justifyContent: "space-between",
-                alignItems: "center",
-                marginBottom: 4,
-              }}
-            >
-              <span
-                style={{
-                  fontSize: 9,
-                  fontWeight: 600,
-                  textTransform: "uppercase",
-                  letterSpacing: "0.08em",
-                  color: accentColor,
-                }}
-              >
-                {item.source}
-              </span>
-              <span
-                style={{
-                  fontSize: 8,
-                  color: "rgba(255, 255, 255, 0.35)",
-                  fontVariantNumeric: "tabular-nums",
-                }}
-              >
-                {formatTime(item.ts)}
-              </span>
-            </div>
-
-            {/* Body text */}
-            <p
-              style={{
-                margin: 0,
-                fontSize: 11,
-                lineHeight: 1.45,
-                color: "rgba(255, 255, 255, 0.85)",
-              }}
-            >
-              {item.text}
-            </p>
-          </div>
-
-          {/* Animated progress line */}
-          <div
-            style={{
-              height: 2,
-              background: `${accentColor}22`,
-              position: "relative",
-              overflow: "hidden",
-            }}
-          >
-            <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",
-              }}
-            />
-          </div>
-        </div>
-      ))}
-
-      {/* Keyframe injection */}
-      <style>
-        {`@keyframes peon-glass-sweep {
-          0% { transform: translateX(-100%); }
-          100% { transform: translateX(100%); }
-        }`}
-      </style>
-    </div>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Widget definition + registration
-// ---------------------------------------------------------------------------
-
-const definition: WidgetDefinition = {
-  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/src/components/stream/overlays/built-in/PeonHudWidget.tsx

@@ -1,247 +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 { useApp } from "@elizaos/app-core/state";
-import { useEffect, useMemo, useRef } from "react";
-import { registerWidget } from "../registry";
-import type { WidgetDefinition, WidgetRenderProps } from "../types";
-
-// ---------------------------------------------------------------------------
-// Constants
-// ---------------------------------------------------------------------------
-
-const TAU = Math.PI * 2;
-
-// ---------------------------------------------------------------------------
-// Canvas-based HUD renderer
-// ---------------------------------------------------------------------------
-
-function drawHud(
-  ctx: CanvasRenderingContext2D,
-  w: number,
-  h: number,
-  rotation: number,
-  progress: number,
-  accentColor: string,
-  dimColor: string,
-) {
-  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,
-}: WidgetRenderProps) {
-  const { t } = useApp();
-  const accentColor = (instance.config.accentColor as string) ?? "#00e5ff";
-  const showLabel = (instance.config.showLabel as boolean) ?? true;
-  const showEventCount = (instance.config.showEventCount as boolean) ?? true;
-
-  const canvasRef = useRef<HTMLCanvasElement>(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 (
-    <div
-      style={{
-        width: "100%",
-        height: "100%",
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
-        color: accentColor,
-      }}
-    >
-      <canvas
-        ref={canvasRef}
-        width={140}
-        height={140}
-        style={{ width: 140, height: 140 }}
-      />
-
-      {showLabel && (
-        <div
-          style={{
-            marginTop: 6,
-            fontSize: 10,
-            letterSpacing: "0.15em",
-            textTransform: "uppercase",
-            opacity: 0.9,
-            textAlign: "center",
-          }}
-        >
-          <div style={{ fontWeight: 600 }}>{modeLabel}</div>
-          <div style={{ opacity: 0.6, fontSize: 9, marginTop: 2 }}>
-            {agentName}
-          </div>
-        </div>
-      )}
-
-      {showEventCount && (
-        <div
-          style={{
-            marginTop: 4,
-            fontSize: 9,
-            opacity: 0.5,
-            letterSpacing: "0.1em",
-          }}
-        >
-          {events.length} {t("peonhudwidget.events")}
-        </div>
-      )}
-    </div>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Widget definition + registration
-// ---------------------------------------------------------------------------
-
-const definition: WidgetDefinition = {
-  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;