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

package/src/components/plugins/showcase-data.ts

@@ -1,481 +0,0 @@
-/**
- * Synthetic showcase plugin that demonstrates all 23 field renderers.
- * Extracted from PluginsView.tsx to reduce file size.
- */
-
-import type { PluginInfo } from "../../api";
-
-export const SHOWCASE_PLUGIN: PluginInfo = {
-  id: "__ui-showcase__",
-  name: "UI Field Showcase",
-  description:
-    "Interactive reference of all 23 field renderers. Not a real plugin — expand to see every UI component in action.",
-  enabled: false,
-  configured: true,
-  envKey: null,
-  category: "feature",
-  source: "bundled",
-  validationErrors: [],
-  validationWarnings: [],
-  version: "1.0.0",
-  icon: "🧩",
-  parameters: [
-    // 1. text
-    {
-      key: "DISPLAY_NAME",
-      type: "string",
-      description: "A simple single-line text input for names or short values.",
-      required: true,
-      sensitive: false,
-      currentValue: null,
-      isSet: false,
-    },
-    // 2. password
-    {
-      key: "SECRET_TOKEN",
-      type: "string",
-      description:
-        "Masked password input with show/hide toggle and server-backed reveal.",
-      required: true,
-      sensitive: true,
-      currentValue: null,
-      isSet: false,
-    },
-    // 3. number
-    {
-      key: "SERVER_PORT",
-      type: "number",
-      description: "Numeric input with min/max range and step control.",
-      required: false,
-      sensitive: false,
-      default: "3000",
-      currentValue: null,
-      isSet: false,
-    },
-    // 4. boolean
-    {
-      key: "ENABLE_LOGGING",
-      type: "boolean",
-      description: "Toggle switch — on/off. Auto-detected from ENABLE_ prefix.",
-      required: false,
-      sensitive: false,
-      default: "true",
-      currentValue: null,
-      isSet: false,
-    },
-    // 5. url
-    {
-      key: "WEBHOOK_URL",
-      type: "string",
-      description:
-        "URL input with format validation. Auto-detected from _URL suffix.",
-      required: false,
-      sensitive: false,
-      currentValue: null,
-      isSet: false,
-    },
-    // 6. select
-    {
-      key: "DEPLOY_REGION",
-      type: "string",
-      description:
-        "Dropdown selector populated from hint.options. Auto-detected for region/zone keys.",
-      required: false,
-      sensitive: false,
-      currentValue: null,
-      isSet: false,
-    },
-    // 7. textarea
-    {
-      key: "SYSTEM_PROMPT",
-      type: "string",
-      description:
-        "Multi-line text input for long values like prompts or templates. Auto-detected from _PROMPT suffix.",
-      required: false,
-      sensitive: false,
-      currentValue: null,
-      isSet: false,
-    },
-    // 8. email
-    {
-      key: "CONTACT_EMAIL",
-      type: "string",
-      description: "Email input with format validation. Renders type=email.",
-      required: false,
-      sensitive: false,
-      currentValue: null,
-      isSet: false,
-    },
-    // 9. color
-    {
-      key: "THEME_COLOR",
-      type: "string",
-      description: "Color picker with hex value text input side-by-side.",
-      required: false,
-      sensitive: false,
-      default: "#4a90d9",
-      currentValue: null,
-      isSet: false,
-    },
-    // 10. radio
-    {
-      key: "AUTH_MODE",
-      type: "string",
-      description:
-        "Radio button group — best for 2-3 mutually exclusive options. Uses 'basic' or 'oauth'.",
-      required: false,
-      sensitive: false,
-      currentValue: null,
-      isSet: false,
-    },
-    // 11. multiselect
-    {
-      key: "ENABLED_FEATURES",
-      type: "string",
-      description:
-        "Checkbox group for selecting multiple values from a fixed set.",
-      required: false,
-      sensitive: false,
-      currentValue: null,
-      isSet: false,
-    },
-    // 12. date
-    {
-      key: "START_DATE",
-      type: "string",
-      description: "Date picker input. Auto-detected from _DATE suffix.",
-      required: false,
-      sensitive: false,
-      currentValue: null,
-      isSet: false,
-    },
-    // 13. datetime
-    {
-      key: "SCHEDULED_AT",
-      type: "string",
-      description: "Combined date and time picker for scheduling.",
-      required: false,
-      sensitive: false,
-      currentValue: null,
-      isSet: false,
-    },
-    // 14. json
-    {
-      key: "METADATA_CONFIG",
-      type: "string",
-      description:
-        "JSON editor with syntax validation. Shows parse errors inline.",
-      required: false,
-      sensitive: false,
-      currentValue: null,
-      isSet: false,
-    },
-    // 15. code
-    {
-      key: "RESPONSE_TEMPLATE",
-      type: "string",
-      description:
-        "Code editor with monospaced font for templates and snippets.",
-      required: false,
-      sensitive: false,
-      currentValue: null,
-      isSet: false,
-    },
-    // 16. array
-    {
-      key: "ALLOWED_ORIGINS",
-      type: "string",
-      description:
-        "Comma-separated list of origins with add/remove UI for each item.",
-      required: false,
-      sensitive: false,
-      currentValue: null,
-      isSet: false,
-    },
-    // 17. keyvalue
-    {
-      key: "CUSTOM_HEADERS",
-      type: "string",
-      description: "Key-value pair editor with add/remove rows.",
-      required: false,
-      sensitive: false,
-      currentValue: null,
-      isSet: false,
-    },
-    // 18. file
-    {
-      key: "CERT_FILE",
-      type: "string",
-      description: "File path input for certificates, configs, or data files.",
-      required: false,
-      sensitive: false,
-      currentValue: null,
-      isSet: false,
-    },
-    // 19. custom
-    {
-      key: "CUSTOM_COMPONENT",
-      type: "string",
-      description: "Placeholder for plugin-provided custom React components.",
-      required: false,
-      sensitive: false,
-      currentValue: null,
-      isSet: false,
-    },
-    // 20. markdown
-    {
-      key: "RELEASE_NOTES",
-      type: "string",
-      description:
-        "Markdown editor with Edit/Preview toggle for rich text content.",
-      required: false,
-      sensitive: false,
-      currentValue: null,
-      isSet: false,
-    },
-    // 21. checkbox-group
-    {
-      key: "NOTIFICATION_CHANNELS",
-      type: "string",
-      description:
-        "Checkbox group with per-option descriptions — similar to multiselect but with checkbox UX.",
-      required: false,
-      sensitive: false,
-      currentValue: null,
-      isSet: false,
-    },
-    // 22. group
-    {
-      key: "CONNECTION_GROUP",
-      type: "string",
-      description:
-        "Fieldset container for visually grouping related configuration fields.",
-      required: false,
-      sensitive: false,
-      currentValue: null,
-      isSet: false,
-    },
-    // 23. table
-    {
-      key: "ROUTE_TABLE",
-      type: "string",
-      description:
-        "Tabular data editor with add/remove rows and column headers.",
-      required: false,
-      sensitive: false,
-      currentValue: null,
-      isSet: false,
-    },
-  ],
-  configUiHints: {
-    DISPLAY_NAME: {
-      label: "Display Name",
-      group: "Basic Fields",
-      width: "half",
-      help: "Renderer: text — single-line text input",
-    },
-    SECRET_TOKEN: {
-      label: "Secret Token",
-      group: "Basic Fields",
-      width: "half",
-      help: "Renderer: password — masked with show/hide toggle",
-    },
-    SERVER_PORT: {
-      label: "Server Port",
-      group: "Basic Fields",
-      width: "third",
-      min: 1,
-      max: 65535,
-      unit: "port",
-      help: "Renderer: number — with min/max range and unit label",
-    },
-    ENABLE_LOGGING: {
-      label: "Enable Logging",
-      group: "Basic Fields",
-      width: "third",
-      help: "Renderer: boolean — pill-shaped toggle switch",
-    },
-    WEBHOOK_URL: {
-      label: "Webhook URL",
-      group: "Basic Fields",
-      width: "full",
-      placeholder: "https://example.com/webhook",
-      help: "Renderer: url — URL input with format validation",
-    },
-    DEPLOY_REGION: {
-      label: "Deploy Region",
-      group: "Selection Fields",
-      width: "half",
-      type: "select",
-      options: [
-        { value: "us-east-1", label: "US East (Virginia)" },
-        { value: "us-west-2", label: "US West (Oregon)" },
-        { value: "eu-west-1", label: "EU (Ireland)" },
-        { value: "ap-southeast-1", label: "Asia Pacific (Singapore)" },
-      ],
-      help: "Renderer: select — dropdown with enhanced option labels",
-    },
-    SYSTEM_PROMPT: {
-      label: "System Prompt",
-      group: "Text Fields",
-      width: "full",
-      help: "Renderer: textarea — multi-line text input for long content",
-    },
-    CONTACT_EMAIL: {
-      label: "Contact Email",
-      group: "Text Fields",
-      width: "half",
-      type: "email",
-      placeholder: "admin@example.com",
-      help: "Renderer: email — email input with format validation",
-    },
-    THEME_COLOR: {
-      label: "Theme Color",
-      group: "Selection Fields",
-      width: "third",
-      type: "color",
-      help: "Renderer: color — color picker swatch + hex input",
-    },
-    AUTH_MODE: {
-      label: "Auth Mode",
-      group: "Selection Fields",
-      width: "half",
-      type: "radio",
-      options: [
-        {
-          value: "basic",
-          label: "Basic Auth",
-          description: "Username and password",
-        },
-        {
-          value: "oauth",
-          label: "OAuth 2.0",
-          description: "Token-based authentication",
-        },
-        {
-          value: "apikey",
-          label: "API Key",
-          description: "Header-based API key",
-        },
-      ],
-      help: "Renderer: radio — radio button group with descriptions",
-    },
-    ENABLED_FEATURES: {
-      label: "Enabled Features",
-      group: "Selection Fields",
-      width: "full",
-      type: "multiselect",
-      options: [
-        { value: "auth", label: "Authentication" },
-        { value: "logging", label: "Logging" },
-        { value: "caching", label: "Caching" },
-        { value: "webhooks", label: "Webhooks" },
-        { value: "ratelimit", label: "Rate Limiting" },
-      ],
-      help: "Renderer: multiselect — checkbox group for multiple selections",
-    },
-    START_DATE: {
-      label: "Start Date",
-      group: "Date & Time",
-      width: "half",
-      type: "date",
-      help: "Renderer: date — native date picker",
-    },
-    SCHEDULED_AT: {
-      label: "Scheduled At",
-      group: "Date & Time",
-      width: "half",
-      type: "datetime",
-      help: "Renderer: datetime — date + time picker",
-    },
-    METADATA_CONFIG: {
-      label: "Metadata Config",
-      group: "Structured Data",
-      width: "full",
-      type: "json",
-      help: "Renderer: json — JSON editor with inline validation",
-    },
-    RESPONSE_TEMPLATE: {
-      label: "Response Template",
-      group: "Structured Data",
-      width: "full",
-      type: "code",
-      help: "Renderer: code — monospaced code editor",
-    },
-    ALLOWED_ORIGINS: {
-      label: "Allowed Origins",
-      group: "Structured Data",
-      width: "full",
-      type: "array",
-      help: "Renderer: array — add/remove items list",
-    },
-    CUSTOM_HEADERS: {
-      label: "Custom Headers",
-      group: "Structured Data",
-      width: "full",
-      type: "keyvalue",
-      help: "Renderer: keyvalue — key-value pair editor",
-    },
-    CERT_FILE: {
-      label: "Certificate File",
-      group: "File Paths",
-      width: "full",
-      type: "file",
-      help: "Renderer: file — file path input",
-    },
-    CUSTOM_COMPONENT: {
-      label: "Custom Component",
-      group: "File Paths",
-      width: "full",
-      type: "custom",
-      help: "Renderer: custom — placeholder for plugin-provided React components",
-      advanced: true,
-    },
-    RELEASE_NOTES: {
-      label: "Release Notes",
-      group: "Text Fields",
-      width: "full",
-      type: "markdown",
-      help: "Renderer: markdown — textarea with Edit/Preview toggle",
-    },
-    NOTIFICATION_CHANNELS: {
-      label: "Notification Channels",
-      group: "Selection Fields",
-      width: "full",
-      type: "checkbox-group",
-      options: [
-        {
-          value: "email",
-          label: "Email",
-          description: "Send notifications via email",
-        },
-        {
-          value: "slack",
-          label: "Slack",
-          description: "Post to Slack channels",
-        },
-        {
-          value: "webhook",
-          label: "Webhook",
-          description: "HTTP POST to configured URL",
-        },
-        { value: "sms", label: "SMS", description: "Text message alerts" },
-      ],
-      help: "Renderer: checkbox-group — vertical checkbox list with descriptions",
-    },
-    CONNECTION_GROUP: {
-      label: "Connection Settings",
-      group: "Structured Data",
-      width: "full",
-      type: "group",
-      help: "Renderer: group — fieldset container with legend",
-    },
-    ROUTE_TABLE: {
-      label: "Route Table",
-      group: "Structured Data",
-      width: "full",
-      type: "table",
-      help: "Renderer: table — tabular data editor with add/remove rows",
-    },
-  },
-};

package/src/components/shared/ShellHeaderControls.tsx

@@ -1,198 +0,0 @@
-import { LanguageDropdown, ThemeToggle } from "@elizaos/app-core/components";
-import type { UiLanguage } from "@elizaos/app-core/i18n";
-import type { ShellView, UiTheme } from "@elizaos/app-core/state";
-import {
-  type LucideIcon,
-  Monitor,
-  Smartphone,
-  UserRound,
-  Users,
-} from "lucide-react";
-import { type ReactNode, useEffect, useState } from "react";
-
-export const HEADER_ICON_BUTTON_CLASSNAME =
-  "inline-flex items-center justify-center w-11 h-11 min-w-[44px] min-h-[44px] border border-border/50 bg-bg/50 backdrop-blur-md cursor-pointer text-sm leading-none hover:border-accent hover:text-txt font-medium hover:-translate-y-0.5 transition-all duration-300 hover:shadow-[0_0_15px_rgba(var(--accent),0.5)] active:scale-95 rounded-xl text-txt shadow-sm";
-
-type ShellHeaderTranslator = (key: string) => string;
-
-const SHELL_MODE_MOBILE_BREAKPOINT = 768;
-
-function useIsMobileShellViewport(): boolean {
-  const [isMobileViewport, setIsMobileViewport] = useState(() =>
-    typeof window !== "undefined"
-      ? window.innerWidth <= SHELL_MODE_MOBILE_BREAKPOINT
-      : false,
-  );
-
-  useEffect(() => {
-    if (
-      typeof window === "undefined" ||
-      typeof window.matchMedia !== "function"
-    ) {
-      return;
-    }
-
-    const mediaQuery = window.matchMedia(
-      `(max-width: ${SHELL_MODE_MOBILE_BREAKPOINT}px)`,
-    );
-    const syncViewport = () => {
-      setIsMobileViewport(mediaQuery.matches);
-    };
-    syncViewport();
-
-    if (typeof mediaQuery.addEventListener === "function") {
-      mediaQuery.addEventListener("change", syncViewport);
-      return () => mediaQuery.removeEventListener("change", syncViewport);
-    }
-
-    mediaQuery.addListener(syncViewport);
-    return () => mediaQuery.removeListener(syncViewport);
-  }, []);
-
-  return isMobileViewport;
-}
-
-interface ShellHeaderControlsProps {
-  activeShellView: ShellView;
-  onShellViewChange: (view: ShellView) => void;
-  uiLanguage: UiLanguage;
-  setUiLanguage: (language: UiLanguage) => void;
-  uiTheme: UiTheme;
-  setUiTheme: (theme: UiTheme) => void;
-  t: ShellHeaderTranslator;
-  children?: ReactNode;
-  rightExtras?: ReactNode;
-  trailingExtras?: ReactNode;
-  className?: string;
-  controlsVariant?: "native" | "companion";
-  languageDropdownClassName?: string;
-  languageDropdownWrapperTestId?: string;
-  themeToggleClassName?: string;
-  themeToggleWrapperClassName?: string;
-  themeToggleWrapperTestId?: string;
-}
-
-export function ShellHeaderControls({
-  activeShellView,
-  onShellViewChange,
-  uiLanguage,
-  setUiLanguage,
-  uiTheme,
-  setUiTheme,
-  t,
-  children,
-  rightExtras,
-  trailingExtras,
-  className,
-  controlsVariant = "native",
-  languageDropdownClassName,
-  languageDropdownWrapperTestId,
-  themeToggleClassName,
-  themeToggleWrapperClassName,
-  themeToggleWrapperTestId,
-}: ShellHeaderControlsProps) {
-  const isMobileViewport = useIsMobileShellViewport();
-  const shellOptions: Array<{
-    view: ShellView;
-    label: string;
-    Icon: LucideIcon;
-  }> = [
-      {
-        view: "companion",
-        label: t("header.companionMode"),
-        Icon: UserRound,
-      },
-      {
-        view: "character",
-        label: t("nav.character"),
-        Icon: Users,
-      },
-      {
-        view: "desktop",
-        label: t("header.nativeMode"),
-        Icon: isMobileViewport ? Smartphone : Monitor,
-      },
-    ];
-
-  return (
-    <div
-      className={`flex min-w-0 items-center gap-3 w-full ${className ?? ""}`}
-      data-no-camera-drag="true"
-    >
-      <div className="flex shrink-0 items-center">
-        <fieldset
-          className="inline-flex items-center gap-0.5 rounded-xl border border-border/60 bg-transparent p-0.5 shadow-sm dark:border-border dark:bg-transparent"
-          data-testid="ui-shell-toggle"
-          data-no-camera-drag="true"
-          aria-label="Switch shell view"
-        >
-          <legend className="sr-only">Switch shell view</legend>
-          {shellOptions.map(({ view, label, Icon }, index) => {
-            const selected = activeShellView === view;
-            const edgeClass =
-              index === 0
-                ? "rounded-l-xl rounded-r-none"
-                : index === shellOptions.length - 1
-                  ? "rounded-l-none rounded-r-xl"
-                  : "rounded-none";
-            return (
-              <button
-                key={view}
-                type="button"
-                onClick={() => onShellViewChange(view)}
-                onPointerDown={(event) => event.stopPropagation()}
-                className={`inline-flex h-11 min-h-[44px] min-w-[44px] items-center justify-center px-3 transition-all duration-200 ${edgeClass} ${selected
-                    ? "border border-[#d8a108]/30 bg-bg/55 text-[#8a6500] shadow-sm dark:border-accent/25 dark:bg-bg/85 dark:text-[#f0b232]"
-                    : "border border-transparent bg-transparent text-muted-strong hover:border-border/70 hover:bg-bg/85 hover:text-txt dark:text-muted dark:hover:border-border/60 dark:hover:bg-bg-hover/80 dark:hover:text-txt"
-                  }`}
-                aria-label={label}
-                aria-pressed={selected}
-                title={label}
-                data-testid={`ui-shell-toggle-${view}`}
-              >
-                <Icon className="h-4 w-4" />
-              </button>
-            );
-          })}
-        </fieldset>
-      </div>
-
-      <div className="min-w-0 flex-1">{children}</div>
-
-      <div
-        className="flex shrink-0 items-center justify-end gap-2"
-        data-testid="shell-header-right-controls"
-        data-no-camera-drag="true"
-      >
-        {rightExtras}
-        <div
-          className={`shrink-0 ${languageDropdownClassName ?? ""}`}
-          data-testid={languageDropdownWrapperTestId}
-          data-no-camera-drag="true"
-        >
-          <LanguageDropdown
-            uiLanguage={uiLanguage}
-            setUiLanguage={setUiLanguage}
-            t={t}
-            variant={controlsVariant}
-            triggerClassName="!h-11 !min-h-[44px] !min-w-[44px] !rounded-xl !px-3.5 sm:!px-3.5 leading-none"
-          />
-        </div>
-        <div
-          className={`shrink-0 ${themeToggleWrapperClassName ?? ""}`}
-          data-testid={themeToggleWrapperTestId}
-          data-no-camera-drag="true"
-        >
-          <ThemeToggle
-            uiTheme={uiTheme}
-            setUiTheme={setUiTheme}
-            t={t}
-            variant={controlsVariant}
-            className={`!h-10 !w-10 !min-h-10 !min-w-10 ${themeToggleClassName ?? ""}`}
-          />
-        </div>
-        {trailingExtras}
-      </div>
-    </div>
-  );
-}

package/src/components/shared-companion-scene-context.ts

@@ -1,15 +0,0 @@
-/**
- * Shared context for the companion scene.
- *
- * Extracted into its own module so consumers can import
- * `useSharedCompanionScene` without pulling in the heavy 3D stack
- * (three / @pixiv/three-vrm / @sparkjsdev/spark) that lives in
- * CompanionSceneHost.
- */
-import { createContext, useContext } from "react";
-
-export const SharedCompanionSceneContext = createContext(false);
-
-export function useSharedCompanionScene(): boolean {
-  return useContext(SharedCompanionSceneContext);
-}