@elizaos/app-core 2.0.0-alpha.73 → 2.0.0-alpha.75

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

@@ -1,218 +0,0 @@
-/**
- * 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. desktop 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

@@ -1,50 +0,0 @@
-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

@@ -1,109 +0,0 @@
-/**
- * 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-warn border border-warn/30 bg-warn/10",
-    dot: "bg-warn",
-  },
-  danger: {
-    badge: "text-danger border border-danger/30 bg-danger/10",
-    dot: "bg-danger",
-  },
-  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

@@ -1,57 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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 any;
-      const WebGPURenderer = webgpuModule.WebGPURenderer as
-        | WebGpuRendererCtor
-        | undefined;
-      if (WebGPURenderer) {
-        const renderer = new (WebGPURenderer as WebGpuRendererCtor)({
-          antialias: true,
-        });
-        await renderer.init?.();
-        return renderer;
-      }
-    } catch {
-      // Fall through to WebGL in environments without WebGPU support.
-    }
-  }
-
-  return new THREE.WebGLRenderer({ antialias: true });
-}

package/src/config/branding.ts

@@ -1,67 +0,0 @@
-import { createContext, useContext } from "react";
-
-/**
- * Custom provider that apps can inject into the onboarding flow.
- * Uses `string` for id/family so apps aren't restricted to the built-in union.
- */
-export interface CustomProviderOption {
-  id: string;
-  name: string;
-  envKey: string | null;
-  pluginName: string;
-  keyPrefix: string | null;
-  description: string;
-  family: string;
-  authMode: "api-key" | "cloud" | "credentials" | "local" | "subscription";
-  group: "cloud" | "local" | "subscription";
-  order: number;
-  recommended?: boolean;
-  /** Dark-mode logo path (e.g. "/logos/my-provider.png") */
-  logoDark?: string;
-  /** Light-mode logo path */
-  logoLight?: string;
-}
-
-export interface BrandingConfig {
-  /** Product name shown in UI ("Eliza" | "Milady") */
-  appName: string;
-  /** GitHub org ("elizaos" | "milady-ai") */
-  orgName: string;
-  /** GitHub repo name ("eliza" | "milady") */
-  repoName: string;
-  /** Documentation site URL */
-  docsUrl: string;
-  /** App origin URL */
-  appUrl: string;
-  /** GitHub bug report URL */
-  bugReportUrl: string;
-  /** Twitter hashtag ("#ElizaAgent" | "#MiladyAgent") */
-  hashtag: string;
-  /** Agent file extension (".eliza-agent" | ".milady-agent") */
-  fileExtension: string;
-  /** npm package scope ("elizaos" | "miladyai") */
-  packageScope: string;
-  /** Custom providers injected by the app into the onboarding flow */
-  customProviders?: CustomProviderOption[];
-  /** When true, the app requires Eliza Cloud — local backend mode is disabled. */
-  cloudOnly?: boolean;
-}
-
-export const DEFAULT_BRANDING: BrandingConfig = {
-  appName: "Eliza",
-  orgName: "elizaos",
-  repoName: "eliza",
-  docsUrl: "https://docs.elizaos.ai",
-  appUrl: "https://app.elizaos.ai",
-  bugReportUrl:
-    "https://github.com/elizaos/eliza/issues/new?template=bug_report.yml",
-  hashtag: "#ElizaAgent",
-  fileExtension: ".eliza-agent",
-  packageScope: "elizaos",
-};
-
-export const BrandingContext = createContext<BrandingConfig>(DEFAULT_BRANDING);
-
-export function useBranding(): BrandingConfig {
-  return useContext(BrandingContext);
-}