@elizaos/app-core 2.0.0-alpha.37

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

@@ -0,0 +1,218 @@
+/**
+ * React hook for managing the overlay layout.
+ *
+ * Persistence strategy (dual-layer):
+ *  1. **Server API** (`GET/POST /api/stream/overlay-layout`) — authoritative
+ *     source that persists across headless browser restarts on a VPS.
+ *  2. **localStorage** (`milady.stream.overlay-layout.v1`) — fast local cache,
+ *     used as initial state and fallback when the server is unreachable.
+ *
+ * On mount the hook loads from localStorage (instant), then fetches from the
+ * server. If the server has a layout, it wins. Mutations write to both.
+ *
+ * When `destinationId` is provided, the hook reads/writes destination-specific
+ * storage (both localStorage and server). Falls back to the global default.
+ */
+
+import { client } from "@elizaos/app-core/api";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { getAllWidgets } from "./registry";
+import type { OverlayLayout, WidgetInstance, WidgetPosition } from "./types";
+
+function storageKey(destinationId?: string | null): string {
+  const base = "milady.stream.overlay-layout.v1";
+  return destinationId ? `${base}.${destinationId}` : base;
+}
+
+// ---------------------------------------------------------------------------
+// Default layout — ThoughtBubble + Branding enabled, rest disabled
+// ---------------------------------------------------------------------------
+
+let _idCounter = 0;
+function localId(): string {
+  _idCounter += 1;
+  return `w${Date.now().toString(36)}${_idCounter.toString(36)}`;
+}
+
+function buildDefaultLayout(): OverlayLayout {
+  const widgets: WidgetInstance[] = getAllWidgets().map((def) => ({
+    id: localId(),
+    type: def.type,
+    enabled: def.type === "thought-bubble" || def.type === "branding",
+    position: { ...def.defaultPosition },
+    zIndex: def.defaultZIndex,
+    config: { ...def.defaultConfig },
+  }));
+
+  return { version: 1, name: "Default", widgets };
+}
+
+function loadLayoutLocal(destinationId?: string | null): OverlayLayout {
+  try {
+    const raw = localStorage.getItem(storageKey(destinationId));
+    if (raw) {
+      const parsed = JSON.parse(raw) as OverlayLayout;
+      if (parsed.version === 1 && Array.isArray(parsed.widgets)) return parsed;
+    }
+  } catch {
+    // corrupted — fall through to default
+  }
+  return buildDefaultLayout();
+}
+
+function saveLayoutLocal(
+  layout: OverlayLayout,
+  destinationId?: string | null,
+): void {
+  try {
+    localStorage.setItem(storageKey(destinationId), JSON.stringify(layout));
+  } catch {
+    // storage full — silently skip
+  }
+}
+
+/** Best-effort save to server. Non-blocking, non-fatal. */
+function saveLayoutServer(
+  layout: OverlayLayout,
+  destinationId?: string | null,
+): void {
+  client.saveOverlayLayout(layout, destinationId).catch(() => {
+    // Server may be unavailable (e.g. Electron dev mode) — ignore
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Hook
+// ---------------------------------------------------------------------------
+
+export interface UseOverlayLayout {
+  layout: OverlayLayout;
+  addWidget: (type: string) => void;
+  removeWidget: (id: string) => void;
+  toggleWidget: (id: string) => void;
+  updateWidget: (
+    id: string,
+    patch: Partial<Pick<WidgetInstance, "position" | "zIndex" | "config">>,
+  ) => void;
+  moveWidget: (id: string, position: WidgetPosition) => void;
+  resetLayout: () => void;
+}
+
+export function useOverlayLayout(
+  destinationId?: string | null,
+): UseOverlayLayout {
+  const [layout, setLayout] = useState<OverlayLayout>(() =>
+    loadLayoutLocal(destinationId),
+  );
+  const serverFetched = useRef<string | null | undefined>(undefined);
+
+  // Re-fetch when destinationId changes
+  useEffect(() => {
+    // Reset to local cache for new destination
+    setLayout(loadLayoutLocal(destinationId));
+    serverFetched.current = undefined;
+  }, [destinationId]);
+
+  // On mount / destination change: try to fetch authoritative layout from server
+  useEffect(() => {
+    if (serverFetched.current === destinationId) return;
+    serverFetched.current = destinationId;
+
+    client
+      .getOverlayLayout(destinationId)
+      .then((res) => {
+        const remote = res.layout as OverlayLayout | null;
+        if (remote && remote.version === 1 && Array.isArray(remote.widgets)) {
+          setLayout(remote);
+          saveLayoutLocal(remote, destinationId);
+        }
+      })
+      .catch(() => {
+        // Server unavailable — use local/default layout
+      });
+  }, [destinationId]);
+
+  // Persist to both layers on change (skip the initial load from useEffect)
+  const isInitialMount = useRef(true);
+  useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+      return;
+    }
+    saveLayoutLocal(layout, destinationId);
+    saveLayoutServer(layout, destinationId);
+  }, [layout, destinationId]);
+
+  const addWidget = useCallback((type: string) => {
+    const defs = getAllWidgets();
+    const def = defs.find((d) => d.type === type);
+    if (!def) return;
+
+    const instance: WidgetInstance = {
+      id: localId(),
+      type: def.type,
+      enabled: true,
+      position: { ...def.defaultPosition },
+      zIndex: def.defaultZIndex,
+      config: { ...def.defaultConfig },
+    };
+
+    setLayout((prev) => ({
+      ...prev,
+      widgets: [...prev.widgets, instance],
+    }));
+  }, []);
+
+  const removeWidget = useCallback((id: string) => {
+    setLayout((prev) => ({
+      ...prev,
+      widgets: prev.widgets.filter((w) => w.id !== id),
+    }));
+  }, []);
+
+  const toggleWidget = useCallback((id: string) => {
+    setLayout((prev) => ({
+      ...prev,
+      widgets: prev.widgets.map((w) =>
+        w.id === id ? { ...w, enabled: !w.enabled } : w,
+      ),
+    }));
+  }, []);
+
+  const updateWidget = useCallback(
+    (
+      id: string,
+      patch: Partial<Pick<WidgetInstance, "position" | "zIndex" | "config">>,
+    ) => {
+      setLayout((prev) => ({
+        ...prev,
+        widgets: prev.widgets.map((w) =>
+          w.id === id ? { ...w, ...patch } : w,
+        ),
+      }));
+    },
+    [],
+  );
+
+  const moveWidget = useCallback((id: string, position: WidgetPosition) => {
+    setLayout((prev) => ({
+      ...prev,
+      widgets: prev.widgets.map((w) => (w.id === id ? { ...w, position } : w)),
+    }));
+  }, []);
+
+  const resetLayout = useCallback(() => {
+    const fresh = buildDefaultLayout();
+    setLayout(fresh);
+  }, []);
+
+  return {
+    layout,
+    addWidget,
+    removeWidget,
+    toggleWidget,
+    updateWidget,
+    moveWidget,
+    resetLayout,
+  };
+}

package/src/components/trajectory-format.ts

@@ -0,0 +1,50 @@
+export function formatTrajectoryDuration(ms: number | null): string {
+  if (ms === null) return "—";
+  if (ms < 1000) return `${ms}ms`;
+  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
+  return `${(ms / 60000).toFixed(1)}m`;
+}
+
+export function formatTrajectoryTimestamp(
+  iso: string,
+  mode: "smart" | "detailed",
+): string {
+  const date = new Date(iso);
+
+  if (mode === "smart") {
+    const now = new Date();
+    const isToday = date.toDateString() === now.toDateString();
+
+    if (isToday) {
+      return date.toLocaleTimeString(undefined, {
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+      });
+    }
+
+    return date.toLocaleString(undefined, {
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  }
+
+  return date.toLocaleString(undefined, {
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+  });
+}
+
+export function formatTrajectoryTokenCount(
+  count: number | undefined,
+  options: { emptyLabel: string },
+): string {
+  if (count === undefined || count === 0) return options.emptyLabel;
+  if (count < 1000) return String(count);
+  return `${(count / 1000).toFixed(1)}k`;
+}

package/src/components/ui-badges.tsx

@@ -0,0 +1,109 @@
+/**
+ * Shared UI primitives for compact labels, pills, and status dots.
+ */
+
+import type { ReactNode } from "react";
+
+type StatusTone = "success" | "warning" | "danger" | "muted";
+
+type StatusToneStyles = {
+  badge: string;
+  dot: string;
+};
+
+const STATUS_TONES: Record<StatusTone, StatusToneStyles> = {
+  success: {
+    badge:
+      "text-[var(--ok,#16a34a)] border border-[var(--ok,#16a34a)]/30 bg-[var(--ok,#16a34a)]/10",
+    dot: "bg-[var(--ok,#16a34a)]",
+  },
+  warning: {
+    badge: "text-[#f59e0b] border border-[#f59e0b]/30 bg-[#f59e0b]/10",
+    dot: "bg-[#f59e0b]",
+  },
+  danger: {
+    badge: "text-[#e74c3c] border border-[#e74c3c]/30 bg-[#e74c3c]/10",
+    dot: "bg-[#e74c3c]",
+  },
+  muted: {
+    badge: "text-[var(--muted)] border border-[var(--border)] bg-[var(--bg)]",
+    dot: "bg-[var(--muted)]",
+  },
+};
+
+export function statusToneForBoolean(
+  condition: boolean,
+  onTone: StatusTone = "success",
+  offTone: StatusTone = "muted",
+): StatusTone {
+  return condition ? onTone : offTone;
+}
+
+export function StatusBadge({
+  label,
+  tone,
+  withDot = false,
+  className = "",
+}: {
+  label: string;
+  tone: StatusTone;
+  withDot?: boolean;
+  className?: string;
+}) {
+  const toneStyles = STATUS_TONES[tone];
+  return (
+    <span
+      className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-sm text-[10px] font-bold uppercase ${toneStyles.badge} ${className}`}
+    >
+      {withDot && (
+        <span className={`w-1.5 h-1.5 rounded-full ${toneStyles.dot}`} />
+      )}
+      {label}
+    </span>
+  );
+}
+
+export function StatusDot({
+  status,
+  className = "",
+}: {
+  status: string;
+  className?: string;
+}) {
+  const tone =
+    status === "success" || status === "completed" || status === "connected"
+      ? "success"
+      : status === "error" || status === "failed" || status === "denied"
+        ? "danger"
+        : "muted";
+
+  const toneStyles = STATUS_TONES[tone];
+  return (
+    <span
+      className={`inline-block w-2 h-2 rounded-full ${toneStyles.dot} ${className}`}
+    />
+  );
+}
+
+export function StatCard({
+  label,
+  value,
+  accent = false,
+}: {
+  label: string;
+  value: ReactNode;
+  accent?: boolean;
+}) {
+  return (
+    <div className="flex flex-col items-center justify-center p-3 border border-[var(--border)] bg-[var(--bg)] min-w-[80px]">
+      <div
+        className={`text-lg font-bold tabular-nums ${accent ? "text-txt" : ""}`}
+      >
+        {value}
+      </div>
+      <div className="text-[10px] text-[var(--muted)] uppercase tracking-wide mt-0.5">
+        {label}
+      </div>
+    </div>
+  );
+}

package/src/components/ui-switch.tsx

@@ -0,0 +1,57 @@
+import type { ButtonHTMLAttributes } from "react";
+
+type SwitchSize = "default" | "compact";
+
+type SwitchProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  "type" | "onChange" | "onClick" | "role" | "aria-checked"
+> & {
+  checked: boolean;
+  onChange: (next: boolean) => void;
+  size?: SwitchSize;
+  trackOnClass?: string;
+  trackOffClass?: string;
+  knobClass?: string;
+  disabledClassName?: string;
+};
+
+const SIZE_CLASS: Record<SwitchSize, string> = {
+  default: "w-10 h-5",
+  compact: "w-9 h-5 border-2 border-transparent",
+};
+
+const KNOB_TRAVEL_CLASS: Record<SwitchSize, string> = {
+  default: "translate-x-5",
+  compact: "translate-x-4",
+};
+
+export function Switch({
+  checked,
+  onChange,
+  size = "default",
+  trackOnClass = "bg-[var(--accent)]",
+  trackOffClass = "bg-[var(--border)]",
+  knobClass = "bg-white",
+  disabledClassName = "opacity-40 cursor-default",
+  disabled,
+  className = "",
+  ...buttonProps
+}: SwitchProps) {
+  return (
+    <button
+      {...buttonProps}
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      disabled={disabled}
+      className={`relative inline-flex shrink-0 rounded-full transition-colors duration-200 focus:outline-none ${SIZE_CLASS[size]} ${checked ? trackOnClass : trackOffClass} ${disabled ? disabledClassName : "cursor-pointer"} ${className}`}
+      onClick={() => {
+        if (!disabled) onChange(!checked);
+      }}
+    >
+      <span
+        className={`pointer-events-none absolute top-0.5 left-0.5 h-4 w-4 rounded-full transition-transform duration-200 ${knobClass} ${checked ? KNOB_TRAVEL_CLASS[size] : ""}`}
+      />
+    </button>
+  );
+}

package/src/components/vector-browser-three.ts

@@ -0,0 +1,27 @@
+import * as THREE from "three";
+
+export { THREE };
+
+type WebGpuRendererCtor = new (options?: {
+  antialias?: boolean;
+}) => THREE.WebGLRenderer & { init?: () => Promise<void> };
+
+export async function createVectorBrowserRenderer(): Promise<THREE.WebGLRenderer> {
+  if (typeof navigator !== "undefined" && navigator.gpu) {
+    try {
+      const webgpuModule = (await import("three/webgpu")) as unknown as {
+        WebGPURenderer?: WebGpuRendererCtor;
+      };
+      const WebGPURenderer = webgpuModule.WebGPURenderer;
+      if (WebGPURenderer) {
+        const renderer = new WebGPURenderer({ antialias: true });
+        await renderer.init?.();
+        return renderer;
+      }
+    } catch {
+      // Fall through to WebGL in environments without WebGPU support.
+    }
+  }
+
+  return new THREE.WebGLRenderer({ antialias: true });
+}