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

package/src/components/companion-shell-styles.ts

@@ -1,270 +0,0 @@
-/**
- * Style helpers and constants for the companion shell overlay.
- */
-
-import type { Tab } from "@elizaos/app-core/navigation";
-import type React from "react";
-
-/* ── Overlay tab set ───────────────────────────────────────────────── */
-
-/** Only "companion" uses the companion shell. Settings, character, etc. require native (advanced) mode. */
-export const COMPANION_OVERLAY_TABS = new Set<Tab>(["companion"]);
-
-/* ── Per-tab accent / color config ─────────────────────────────────── */
-
-export const ACCENT_COLORS: Record<string, string> = {
-  skills: "#f0b232",
-  apps: "#10b981",
-  plugins: "#f0b232",
-  connectors: "#f0b232",
-  knowledge: "#a78bfa",
-  wallets: "#f0b90b",
-  stream: "#ef4444",
-  lifo: "#8b5cf6",
-};
-
-export const TOP_BAR_COLORS: Record<string, string> = {
-  skills: "#f0b232",
-  wallets: "rgba(240, 185, 11, 0.7)",
-  lifo: "rgba(139, 92, 246, 0.7)",
-  stream: "rgba(239, 68, 68, 0.7)",
-  plugins: "#f0b232",
-  connectors: "#f0b232",
-  apps: "rgba(16, 185, 129, 0.7)",
-  knowledge: "rgba(167, 139, 250, 0.7)",
-};
-
-/* ── Tab flags ─────────────────────────────────────────────────────── */
-
-export function tabFlags(tab: Tab) {
-  const isSkills = tab === "skills";
-  const isSettings = tab === "settings" || tab === "triggers";
-  const isPlugins = tab === "plugins";
-  const isLifo = tab === "lifo";
-  const isStream = tab === "stream";
-  const isWallets = tab === "wallets";
-  const isApps = tab === "apps";
-  const isConnectors = tab === "connectors";
-  const isKnowledge = tab === "knowledge";
-  const isAdvancedOverlay =
-    tab === "advanced" ||
-    tab === "actions" ||
-    tab === "fine-tuning" ||
-    tab === "trajectories" ||
-    tab === "runtime" ||
-    tab === "database" ||
-    tab === "logs" ||
-    tab === "security" ||
-    isLifo;
-  const isPluginsLike = isPlugins || isConnectors || isSkills;
-  const isCentered =
-    isSkills ||
-    isSettings ||
-    isPlugins ||
-    isAdvancedOverlay ||
-    isApps ||
-    isConnectors ||
-    isKnowledge ||
-    isLifo ||
-    isStream ||
-    isWallets;
-  const isCharacter = tab === "character" || tab === "character-select";
-
-  return {
-    isSkills,
-    isSettings,
-    isPlugins,
-    isLifo,
-    isStream,
-    isWallets,
-    isApps,
-    isConnectors,
-    isKnowledge,
-    isAdvancedOverlay,
-    isPluginsLike,
-    isCentered,
-    isCharacter,
-  };
-}
-
-export type TabFlags = ReturnType<typeof tabFlags>;
-
-/* ── Layout helpers ────────────────────────────────────────────────── */
-
-export function overlayBackdropClass(f: TabFlags) {
-  if (f.isPluginsLike)
-    return "opacity-100 backdrop-blur-xl bg-black/35 pointer-events-auto";
-  if (
-    f.isSettings ||
-    f.isAdvancedOverlay ||
-    f.isApps ||
-    f.isKnowledge ||
-    f.isLifo ||
-    f.isStream ||
-    f.isWallets
-  )
-    return "opacity-100 backdrop-blur-2xl bg-black/50 pointer-events-auto";
-  if (f.isCharacter) return "opacity-100";
-  return "opacity-0";
-}
-
-export function cardSizeClass(f: TabFlags) {
-  if (f.isPluginsLike)
-    return "w-[97vw] h-[92vh] md:w-[88vw] md:h-[80vh] max-w-[1460px] overflow-visible";
-  if (f.isAdvancedOverlay)
-    return "w-[95vw] h-[95vh] max-w-[1500px] backdrop-blur-3xl border rounded-2xl overflow-hidden";
-  if (f.isSettings || f.isApps || f.isKnowledge || f.isWallets)
-    return "w-[90vw] h-[90vh] max-w-5xl backdrop-blur-3xl border rounded-2xl overflow-hidden";
-  return "w-[65vw] min-w-[700px] h-[100vh] border-l backdrop-blur-2xl";
-}
-
-export function cardBackground(f: TabFlags) {
-  if (f.isPluginsLike) return "transparent";
-  if (
-    f.isSettings ||
-    f.isAdvancedOverlay ||
-    f.isApps ||
-    f.isKnowledge ||
-    f.isWallets
-  )
-    return "rgba(18, 22, 32, 0.92)";
-  return "linear-gradient(to left, rgba(6, 8, 12, 0.95) 40%, rgba(6, 8, 12, 0.7) 80%, rgba(6, 8, 12, 0.2) 100%)";
-}
-
-export function cardBorderColor(f: TabFlags) {
-  if (f.isPluginsLike) return "transparent";
-  if (
-    f.isSettings ||
-    f.isAdvancedOverlay ||
-    f.isApps ||
-    f.isKnowledge ||
-    f.isWallets
-  )
-    return "rgba(255, 255, 255, 0.08)";
-  return "rgba(255,255,255,0.05)";
-}
-
-export function cardBoxShadow(f: TabFlags, _shadowFx: string) {
-  if (f.isPluginsLike) return "none";
-  if (
-    f.isSettings ||
-    f.isAdvancedOverlay ||
-    f.isApps ||
-    f.isKnowledge ||
-    f.isWallets
-  )
-    return "0 8px 60px rgba(0,0,0,0.6), 0 2px 24px rgba(0,0,0,0.4)";
-  return "-60px 0 100px -20px rgba(0,0,0,0.8)";
-}
-
-/* ── Accent color helpers ──────────────────────────────────────────── */
-
-export function accentVar(f: TabFlags) {
-  if (f.isPluginsLike) return "#f0b232";
-  if (f.isApps) return "#10b981";
-  if (f.isKnowledge) return "#a78bfa";
-  if (f.isWallets) return "#f0b90b";
-  if (f.isLifo) return "#8b5cf6";
-  if (f.isStream) return "#ef4444";
-  return "#7b8fb5";
-}
-
-export function accentSubtleVar(f: TabFlags) {
-  if (f.isPluginsLike) return "rgba(240, 178, 50, 0.12)";
-  if (f.isApps) return "rgba(16, 185, 129, 0.12)";
-  if (f.isKnowledge) return "rgba(167, 139, 250, 0.12)";
-  if (f.isWallets) return "rgba(240, 185, 11, 0.12)";
-  if (f.isLifo) return "rgba(139, 92, 246, 0.12)";
-  if (f.isStream) return "rgba(239, 68, 68, 0.12)";
-  return "rgba(123, 143, 181, 0.12)";
-}
-
-export function accentRgbVar(f: TabFlags) {
-  if (f.isPluginsLike) return "240, 178, 50";
-  if (f.isApps) return "16, 185, 129";
-  if (f.isKnowledge) return "167, 139, 250";
-  if (f.isWallets) return "240, 185, 11";
-  if (f.isLifo) return "139, 92, 246";
-  if (f.isStream) return "239, 68, 68";
-  return "123, 143, 181";
-}
-
-export function accentForegroundVar(f: TabFlags) {
-  if (f.isPluginsLike || f.isWallets) return "#1a1f26";
-  return "#ffffff";
-}
-
-/* ── View wrapper helpers ──────────────────────────────────────────── */
-
-export function viewWrapperOverflow(f: TabFlags) {
-  if (f.isPluginsLike) return "overflow-visible";
-  if (
-    f.isSettings ||
-    f.isAdvancedOverlay ||
-    f.isApps ||
-    f.isConnectors ||
-    f.isWallets
-  )
-    return "overflow-hidden";
-  return "overflow-y-auto";
-}
-
-export function viewWrapperPadding(f: TabFlags) {
-  // Skills now uses isPluginsLike path (p-0)
-  if (
-    f.isSettings ||
-    f.isAdvancedOverlay ||
-    f.isApps ||
-    f.isConnectors ||
-    f.isPlugins ||
-    f.isWallets
-  )
-    return "p-0";
-  if (f.isKnowledge) return "px-8 py-8";
-  return "px-16 pt-32 pb-16";
-}
-
-export function viewWrapperStyle(
-  f: TabFlags,
-  accentColor: string,
-): React.CSSProperties {
-  if (
-    f.isSettings ||
-    f.isPlugins ||
-    f.isSkills ||
-    f.isAdvancedOverlay ||
-    f.isApps ||
-    f.isConnectors ||
-    f.isKnowledge ||
-    f.isWallets
-  ) {
-    return {
-      "--bg": "transparent",
-      "--card": "rgba(255, 255, 255, 0.05)",
-      "--border": "rgba(255, 255, 255, 0.08)",
-      "--accent": accentVar(f),
-      "--accent-foreground": accentForegroundVar(f),
-      "--accent-subtle": accentSubtleVar(f),
-      "--accent-rgb": accentRgbVar(f),
-      "--muted": "rgba(255, 255, 255, 0.45)",
-      "--txt": "rgba(240, 238, 250, 0.92)",
-      "--text": "rgba(240, 238, 250, 0.92)",
-      "--danger": "#ef4444",
-      "--ok": "#22c55e",
-      "--warning": "#f59e0b",
-      "--surface": "rgba(255, 255, 255, 0.06)",
-      "--bg-hover": "rgba(255, 255, 255, 0.04)",
-      "--bg-muted": "rgba(255, 255, 255, 0.03)",
-      "--border-hover": "rgba(255, 255, 255, 0.15)",
-    } as React.CSSProperties;
-  }
-  return {
-    "--bg": "transparent",
-    "--card": "rgba(255, 255, 255, 0.05)",
-    "--border": f.isSkills ? "rgba(0,225,255,0.3)" : "rgba(255,255,255,0.08)",
-    "--accent": accentColor,
-    "--accent-foreground": accentForegroundVar(f),
-    "--muted": "rgba(255, 255, 255, 0.55)",
-    "--txt": "#ffffff",
-  } as React.CSSProperties;
-}

package/src/components/confirm-delete-control.tsx

@@ -1,69 +0,0 @@
-import { useState } from "react";
-
-type ConfirmDeleteControlProps = {
-  onConfirm: () => void;
-  disabled?: boolean;
-  triggerLabel?: string;
-  confirmLabel?: string;
-  cancelLabel?: string;
-  busyLabel?: string;
-  promptText?: string;
-  triggerClassName: string;
-  confirmClassName: string;
-  cancelClassName: string;
-  promptClassName?: string;
-};
-
-export function ConfirmDeleteControl({
-  onConfirm,
-  disabled = false,
-  triggerLabel = "Delete",
-  confirmLabel = "Confirm",
-  cancelLabel = "Cancel",
-  busyLabel,
-  promptText = "Delete?",
-  triggerClassName,
-  confirmClassName,
-  cancelClassName,
-  promptClassName = "text-[11px] text-[#e74c3c] ml-1",
-}: ConfirmDeleteControlProps) {
-  const [confirming, setConfirming] = useState(false);
-
-  if (!confirming) {
-    return (
-      <button
-        type="button"
-        className={triggerClassName}
-        onClick={() => setConfirming(true)}
-        disabled={disabled}
-      >
-        {triggerLabel}
-      </button>
-    );
-  }
-
-  return (
-    <>
-      <span className={promptClassName}>{promptText}</span>
-      <button
-        type="button"
-        className={confirmClassName}
-        onClick={() => {
-          onConfirm();
-          setConfirming(false);
-        }}
-        disabled={disabled}
-      >
-        {disabled && busyLabel ? busyLabel : confirmLabel}
-      </button>
-      <button
-        type="button"
-        className={cancelClassName}
-        onClick={() => setConfirming(false)}
-        disabled={disabled}
-      >
-        {cancelLabel}
-      </button>
-    </>
-  );
-}

package/src/components/conversations/ConversationListItem.tsx

@@ -1,185 +0,0 @@
-import { Button, Input } from "@elizaos/ui";
-import type React from "react";
-import { useRef } from "react";
-import { getLocalizedConversationTitle } from "./conversation-utils";
-
-interface ConversationListItemProps {
-  conv: { id: string; title: string; updatedAt: string };
-  isActive: boolean;
-  isEditing: boolean;
-  isUnread: boolean;
-  isGameModal: boolean;
-  editingTitle: string;
-  confirmDeleteId: string | null;
-  deletingId: string | null;
-  inputRef: React.RefObject<HTMLInputElement | null>;
-  t: (
-    key: string,
-    vars?: Record<string, string | number | boolean | null | undefined>,
-  ) => string;
-  mobile: boolean;
-  onSelect: (id: string) => void;
-  onEditingTitleChange: (value: string) => void;
-  onEditSubmit: (id: string) => void;
-  onEditKeyDown: (e: React.KeyboardEvent<HTMLInputElement>, id: string) => void;
-  onConfirmDelete: (id: string) => void;
-  onCancelDelete: () => void;
-  onOpenActions: (
-    event:
-      | React.MouseEvent<HTMLButtonElement | HTMLDivElement>
-      | React.TouchEvent<HTMLButtonElement | HTMLDivElement>,
-    conv: { id: string; title: string },
-  ) => void;
-}
-
-export function ConversationListItem({
-  conv,
-  isActive,
-  isEditing,
-  isUnread,
-  isGameModal,
-  editingTitle,
-  confirmDeleteId,
-  deletingId,
-  inputRef,
-  t,
-  mobile,
-  onSelect,
-  onEditingTitleChange,
-  onEditSubmit,
-  onEditKeyDown,
-  onConfirmDelete,
-  onCancelDelete,
-  onOpenActions,
-}: ConversationListItemProps) {
-  const longPressTimerRef = useRef<number | null>(null);
-  const suppressClickRef = useRef(false);
-
-  const clearLongPressTimer = () => {
-    if (longPressTimerRef.current !== null) {
-      window.clearTimeout(longPressTimerRef.current);
-      longPressTimerRef.current = null;
-    }
-  };
-
-  const handleTouchStart = (event: React.TouchEvent<HTMLButtonElement>) => {
-    if (!mobile) return;
-    clearLongPressTimer();
-    longPressTimerRef.current = window.setTimeout(() => {
-      suppressClickRef.current = true;
-      onOpenActions(event, conv);
-      clearLongPressTimer();
-    }, 450);
-  };
-
-  const handleTouchEnd = () => {
-    clearLongPressTimer();
-  };
-
-  return (
-    <div
-      key={conv.id}
-      data-testid="conv-item"
-      data-active={isActive || undefined}
-      className={`w-full ${
-        isGameModal
-          ? "group relative flex items-start gap-3 w-full p-2.5 rounded-xl cursor-pointer transition-all border border-transparent"
-          : "flex items-center pl-3 pr-2 py-2 gap-1 cursor-pointer transition-colors border-l-[3px]"
-      } ${
-        isActive
-          ? isGameModal
-            ? "bg-accent/15 border-accent/30 shadow-[0_0_15px_rgba(240,178,50,0.1)]"
-            : "bg-bg-hover border-l-accent"
-          : isGameModal
-            ? "hover:bg-white/5 hover:border-white/10"
-            : "border-l-transparent hover:bg-bg-hover"
-      }`}
-    >
-      {isEditing ? (
-        <Input
-          ref={inputRef}
-          className="w-full h-8 px-1.5 border-accent bg-card text-txt text-[13px] shadow-sm focus-visible:ring-1 focus-visible:ring-accent"
-          value={editingTitle}
-          onChange={(e) => onEditingTitleChange(e.target.value)}
-          onBlur={() => void onEditSubmit(conv.id)}
-          onKeyDown={(e) => onEditKeyDown(e, conv.id)}
-          onClick={(e) => e.stopPropagation()}
-        />
-      ) : (
-        <>
-          <Button
-            variant="ghost"
-            size="sm"
-            data-testid="conv-select"
-            className={
-              isGameModal
-                ? "flex w-full flex-col flex-1 min-w-0 !items-start !justify-start !text-left cursor-pointer h-auto p-0 rounded-none bg-transparent border-none"
-                : "flex items-center gap-2 flex-1 min-w-0 bg-transparent border-0 p-0 m-0 text-left h-auto cursor-pointer rounded-none"
-            }
-            onClick={() => {
-              if (suppressClickRef.current) {
-                suppressClickRef.current = false;
-                return;
-              }
-              onSelect(conv.id);
-            }}
-            onContextMenu={(event) => {
-              if (mobile) return;
-              onOpenActions(event, conv);
-            }}
-            onTouchStart={handleTouchStart}
-            onTouchEnd={handleTouchEnd}
-            onTouchCancel={handleTouchEnd}
-            onTouchMove={handleTouchEnd}
-          >
-            {isUnread && (
-              <span
-                className={
-                  isGameModal
-                    ? "absolute top-3 left-3 w-2 h-2 rounded-full bg-accent animate-pulse shadow-[0_0_8px_rgba(240,178,50,0.8)]"
-                    : "w-2 h-2 rounded-full bg-accent shrink-0"
-                }
-              />
-            )}
-
-            <span
-              className={
-                isGameModal
-                  ? `block w-full text-[13px] font-medium truncate leading-tight text-left transition-colors min-w-0 ${isActive ? "text-txt text-shadow-glow" : "text-white/90 group-hover:text-white"}`
-                  : "block w-full font-medium truncate text-left text-txt min-w-0"
-              }
-            >
-              {getLocalizedConversationTitle(conv.title, t)}
-            </span>
-          </Button>
-
-          {confirmDeleteId === conv.id ? (
-            <div className="flex items-center gap-1.5 flex-shrink-0">
-              <span className="text-[10px] text-danger">
-                {t("conversations.deleteConfirm")}
-              </span>
-              <Button
-                variant="destructive"
-                size="sm"
-                className="h-6 px-1.5 py-0.5 text-[10px] text-white shadow-sm disabled:opacity-50"
-                onClick={() => void onConfirmDelete(conv.id)}
-                disabled={deletingId === conv.id}
-              >
-                {deletingId === conv.id ? "..." : t("conversations.deleteYes")}
-              </Button>
-              <Button
-                variant="outline"
-                size="sm"
-                className="h-6 px-1.5 py-0.5 text-[10px] text-muted shadow-sm hover:border-accent hover:text-txt disabled:opacity-50"
-                onClick={() => onCancelDelete()}
-                disabled={deletingId === conv.id}
-              >
-                {t("conversations.deleteNo")}
-              </Button>
-            </div>
-          ) : null}
-        </>
-      )}
-    </div>
-  );
-}

package/src/components/conversations/conversation-utils.ts

@@ -1,151 +0,0 @@
-import { VRM_COUNT } from "../../state";
-
-export function getLocalizedConversationTitle(
-  title: string | undefined | null,
-  t: (
-    key: string,
-    vars?: Record<string, string | number | boolean | null | undefined>,
-  ) => string,
-): string {
-  if (
-    !title ||
-    title === "New Chat" ||
-    title === "conversations.newChatTitle"
-  ) {
-    const localized = t("conversations.newChatTitle");
-    return localized === "conversations.newChatTitle" ? "New Chat" : localized;
-  }
-  return title;
-}
-
-export const BROWSER_CAPABILITY_PLUGIN_IDS = new Set([
-  "browser",
-  "browserbase",
-  "chrome-extension",
-]);
-
-export const COMPUTER_CAPABILITY_PLUGIN_IDS = new Set([
-  "computeruse",
-  "computer-use",
-]);
-
-export function formatRelativeTime(
-  dateString: string,
-  t: (
-    key: string,
-    vars?: Record<string, string | number | boolean | null | undefined>,
-  ) => string,
-): string {
-  const date = new Date(dateString);
-  const now = new Date();
-  const diffMs = now.getTime() - date.getTime();
-  const diffMins = Math.floor(diffMs / 60000);
-  const diffHours = Math.floor(diffMs / 3600000);
-  const diffDays = Math.floor(diffMs / 86400000);
-
-  if (diffMins < 1) return t("conversations.justNow");
-  if (diffMins < 60) return t("conversations.minutesAgo", { count: diffMins });
-  if (diffHours < 24) return t("conversations.hoursAgo", { count: diffHours });
-  if (diffDays < 7) return t("conversations.daysAgo", { count: diffDays });
-
-  return date.toLocaleDateString();
-}
-
-export function avatarIndexFromConversationId(id: string): number {
-  let hash = 0;
-  for (let i = 0; i < id.length; i += 1) {
-    hash = (hash * 31 + id.charCodeAt(i)) | 0;
-  }
-  const normalized = Math.abs(hash) % VRM_COUNT;
-  return normalized + 1;
-}
-
-export function resolveProviderLabel(model: string | undefined): string {
-  const value = (model ?? "").trim();
-  if (!value) return "";
-
-  const lower = value.toLowerCase();
-  const knownProviders: Array<{ match: string; label: string }> = [
-    { match: "elizacloud", label: "Eliza Cloud" },
-    { match: "openrouter", label: "OpenRouter" },
-    { match: "openai", label: "OpenAI" },
-    { match: "anthropic", label: "Anthropic" },
-    { match: "gemini", label: "Google" },
-    { match: "google", label: "Google" },
-    { match: "grok", label: "xAI" },
-    { match: "xai", label: "xAI" },
-    { match: "groq", label: "Groq" },
-    { match: "ollama", label: "Ollama" },
-    { match: "deepseek", label: "DeepSeek" },
-    { match: "mistral", label: "Mistral" },
-    { match: "together", label: "Together AI" },
-    { match: "zai", label: "z.ai" },
-    { match: "cohere", label: "Cohere" },
-    { match: "pi-ai", label: "Pi AI" },
-  ];
-  for (const provider of knownProviders) {
-    if (lower.includes(provider.match)) return provider.label;
-  }
-
-  if (lower.startsWith("gpt")) return "OpenAI";
-  if (lower.startsWith("claude")) return "Anthropic";
-  if (lower.startsWith("gemini")) return "Google";
-
-  const splitToken = value.split(/[/:|]/)[0]?.trim();
-  if (splitToken) return splitToken.toUpperCase();
-  return "";
-}
-
-export function isNonChatModelLabel(model: string | undefined): boolean {
-  const value = (model ?? "").trim().toLowerCase();
-  if (!value) return false;
-  if (value === "text_embedding") return true;
-  if (value === "text_large") return true;
-  if (value === "text_small") return true;
-  if (value.includes("text_embedding")) return true;
-  if (value.includes("embedding")) return true;
-  if (value.includes("text_large") || value.includes("text_small")) return true;
-  if (/^text_[a-z0-9_]+$/.test(value)) return true;
-  return false;
-}
-
-export function estimateTokenCost(
-  promptTokens: number,
-  completionTokens: number,
-  model: string | undefined,
-): string {
-  const normalizedModel = (model ?? "").toLowerCase();
-  const pricingByMillion: Record<string, [number, number]> = {
-    "gpt-5": [1.25, 10.0],
-    "gpt-4.1": [2.0, 8.0],
-    "gpt-4o": [2.5, 10.0],
-    "gpt-4": [30.0, 60.0],
-    "claude-4": [15.0, 75.0],
-    "claude-3.7": [3.0, 15.0],
-    "claude-3.5": [3.0, 15.0],
-    "gemini-2.5-pro": [1.25, 10.0],
-    "gemini-2.0-flash": [0.1, 0.4],
-    deepseek: [0.55, 2.19],
-    qwen: [0.35, 1.4],
-    kimi: [0.2, 0.8],
-    moonshot: [0.2, 0.8],
-  };
-
-  let inputCostPerMillion = 1.0;
-  let outputCostPerMillion = 3.0;
-  for (const [key, [inCost, outCost]] of Object.entries(pricingByMillion)) {
-    if (normalizedModel.includes(key)) {
-      inputCostPerMillion = inCost;
-      outputCostPerMillion = outCost;
-      break;
-    }
-  }
-
-  const estimated =
-    (promptTokens / 1_000_000) * inputCostPerMillion +
-    (completionTokens / 1_000_000) * outputCostPerMillion;
-  if (estimated <= 0) return "$0.0000";
-  if (estimated < 0.0001) return "<$0.0001";
-  if (estimated < 0.01) return `~$${estimated.toFixed(4)}`;
-  return `~$${estimated.toFixed(3)}`;
-}