@elizaos/app-core 2.0.0-alpha.37

package/dist/components/plugins/showcase-data.js

@@ -0,0 +1,464 @@
+/**
+ * Synthetic showcase plugin that demonstrates all 23 field renderers.
+ * Extracted from PluginsView.tsx to reduce file size.
+ */
+export const SHOWCASE_PLUGIN = {
+    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/dist/components/shared/ShellHeaderControls.d.ts

@@ -0,0 +1,27 @@
+import type { UiLanguage } from "@elizaos/app-core/i18n";
+import type { ShellView, UiTheme } from "@elizaos/app-core/state";
+import { type ReactNode } from "react";
+export declare 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;
+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 declare function ShellHeaderControls({ activeShellView, onShellViewChange, uiLanguage, setUiLanguage, uiTheme, setUiTheme, t, children, rightExtras, trailingExtras, className, controlsVariant, languageDropdownClassName, languageDropdownWrapperTestId, themeToggleClassName, themeToggleWrapperClassName, themeToggleWrapperTestId, }: ShellHeaderControlsProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ShellHeaderControls.d.ts.map

package/dist/components/shared/ShellHeaderControls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShellHeaderControls.d.ts","sourceRoot":"","sources":["../../../src/components/shared/ShellHeaderControls.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAQlE,OAAO,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAE5D,eAAO,MAAM,4BAA4B,sWAC4T,CAAC;AAEtW,KAAK,qBAAqB,GAAG,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;AAuCrD,UAAU,wBAAwB;IAChC,eAAe,EAAE,SAAS,CAAC;IAC3B,iBAAiB,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IAC7C,UAAU,EAAE,UAAU,CAAC;IACvB,aAAa,EAAE,CAAC,QAAQ,EAAE,UAAU,KAAK,IAAI,CAAC;IAC9C,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,CAAC,EAAE,qBAAqB,CAAC;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAC;IACzC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,wBAAwB,CAAC,EAAE,MAAM,CAAC;CACnC;AAED,wBAAgB,mBAAmB,CAAC,EAClC,eAAe,EACf,iBAAiB,EACjB,UAAU,EACV,aAAa,EACb,OAAO,EACP,UAAU,EACV,CAAC,EACD,QAAQ,EACR,WAAW,EACX,cAAc,EACd,SAAS,EACT,eAA0B,EAC1B,yBAAyB,EACzB,6BAA6B,EAC7B,oBAAoB,EACpB,2BAA2B,EAC3B,wBAAwB,GACzB,EAAE,wBAAwB,2CAoG1B"}

package/dist/components/shared/ShellHeaderControls.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LanguageDropdown, ThemeToggle } from "@elizaos/app-core/components";
+import { Monitor, Smartphone, UserRound, Users, } from "lucide-react";
+import { 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";
+const SHELL_MODE_MOBILE_BREAKPOINT = 768;
+function useIsMobileShellViewport() {
+    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;
+}
+export function ShellHeaderControls({ activeShellView, onShellViewChange, uiLanguage, setUiLanguage, uiTheme, setUiTheme, t, children, rightExtras, trailingExtras, className, controlsVariant = "native", languageDropdownClassName, languageDropdownWrapperTestId, themeToggleClassName, themeToggleWrapperClassName, themeToggleWrapperTestId, }) {
+    const isMobileViewport = useIsMobileShellViewport();
+    const shellOptions = [
+        {
+            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 (_jsxs("div", { className: `flex min-w-0 items-center gap-3 w-full ${className ?? ""}`, children: [_jsx("div", { className: "flex shrink-0 items-center", children: _jsxs("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/70 dark:bg-transparent", "data-testid": "ui-shell-toggle", "aria-label": "Switch shell view", children: [_jsx("legend", { className: "sr-only", children: "Switch shell view" }), 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 (_jsx("button", { type: "button", onClick: () => onShellViewChange(view), className: `inline-flex h-9 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}`, children: _jsx(Icon, { className: "h-4 w-4" }) }, view));
+                        })] }) }), _jsx("div", { className: "min-w-0 flex-1", children: children }), _jsxs("div", { className: "flex shrink-0 items-center justify-end gap-2", "data-testid": "shell-header-right-controls", children: [rightExtras, _jsx("div", { className: `shrink-0 ${languageDropdownClassName ?? ""}`, "data-testid": languageDropdownWrapperTestId, children: _jsx(LanguageDropdown, { uiLanguage: uiLanguage, setUiLanguage: setUiLanguage, t: t, variant: controlsVariant, triggerClassName: "!h-10 !min-h-10 !rounded-xl !px-3.5 sm:!px-3.5 leading-none" }) }), _jsx("div", { className: `shrink-0 ${themeToggleWrapperClassName ?? ""}`, "data-testid": themeToggleWrapperTestId, children: _jsx(ThemeToggle, { uiTheme: uiTheme, setUiTheme: setUiTheme, t: t, variant: controlsVariant, className: `!h-10 !w-10 !min-h-10 !min-w-10 ${themeToggleClassName ?? ""}` }) }), trailingExtras] })] }));
+}

package/dist/components/skeletons.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Loading skeleton components for better UX.
+ */
+export declare function SkeletonLine({ width, className, }: {
+    width?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function SkeletonText({ lines }: {
+    lines?: number;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function SkeletonMessage({ isUser }: {
+    isUser?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function SkeletonCard(): import("react/jsx-runtime").JSX.Element;
+export declare function SkeletonSidebar(): import("react/jsx-runtime").JSX.Element;
+export declare function SkeletonChat(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=skeletons.d.ts.map

package/dist/components/skeletons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeletons.d.ts","sourceRoot":"","sources":["../../src/components/skeletons.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,wBAAgB,YAAY,CAAC,EAC3B,KAAc,EACd,SAAc,GACf,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CAOA;AAED,wBAAgB,YAAY,CAAC,EAAE,KAAS,EAAE,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,2CAW7D;AAED,wBAAgB,eAAe,CAAC,EAAE,MAAc,EAAE,EAAE;IAAE,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,2CAgBvE;AAED,wBAAgB,YAAY,4CAa3B;AAED,wBAAgB,eAAe,4CAY9B;AAED,wBAAgB,YAAY,4CAQ3B"}

package/dist/components/skeletons.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Loading skeleton components for better UX.
+ */
+export function SkeletonLine({ width = "100%", className = "", }) {
+    return (_jsx("div", { className: `h-4 bg-bg-accent rounded animate-pulse ${className}`, style: { width } }));
+}
+export function SkeletonText({ lines = 3 }) {
+    return (_jsx("div", { className: "space-y-2", children: Array.from({ length: lines }, (_, i) => i).map((lineIndex) => (_jsx(SkeletonLine, { width: lineIndex === lines - 1 ? "60%" : "100%" }, lineIndex))) }));
+}
+export function SkeletonMessage({ isUser = false }) {
+    return (_jsxs("div", { className: `flex items-start gap-3 ${isUser ? "justify-end" : "justify-start"} mt-4`, children: [!isUser && (_jsx("div", { className: "w-8 h-8 rounded-full bg-bg-accent animate-pulse shrink-0" })), _jsxs("div", { className: `max-w-[80%] space-y-2 ${isUser ? "items-end" : ""}`, children: [_jsx("div", { className: "h-3 w-20 bg-bg-accent rounded animate-pulse" }), _jsx("div", { className: "px-4 py-3 bg-bg-accent rounded-2xl animate-pulse min-w-[200px]", children: _jsx(SkeletonText, { lines: 2 }) })] })] }));
+}
+export function SkeletonCard() {
+    return (_jsxs("div", { className: "p-4 border border-border bg-card rounded-lg space-y-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "w-10 h-10 rounded-lg bg-bg-accent animate-pulse" }), _jsxs("div", { className: "space-y-2 flex-1", children: [_jsx(SkeletonLine, { width: "40%" }), _jsx(SkeletonLine, { width: "60%" })] })] }), _jsx(SkeletonText, { lines: 3 })] }));
+}
+export function SkeletonSidebar() {
+    return (_jsxs("div", { className: "w-64 space-y-2 p-4", children: [_jsx("div", { className: "h-8 w-32 bg-bg-accent rounded animate-pulse mb-6" }), Array.from({ length: 6 }, (_, idx) => idx).map((itemIndex) => (_jsxs("div", { className: "flex items-center gap-3 p-2", children: [_jsx("div", { className: "w-5 h-5 rounded bg-bg-accent animate-pulse" }), _jsx("div", { className: "h-4 bg-bg-accent rounded animate-pulse flex-1" })] }, itemIndex)))] }));
+}
+export function SkeletonChat() {
+    return (_jsxs("div", { className: "p-4 space-y-2", children: [_jsx(SkeletonMessage, {}), _jsx(SkeletonMessage, { isUser: true }), _jsx(SkeletonMessage, {})] }));
+}

package/dist/components/stream/ActivityFeed.d.ts

@@ -0,0 +1,5 @@
+import type { StreamEventEnvelope } from "@elizaos/app-core/api";
+export declare function ActivityFeed({ events }: {
+    events: StreamEventEnvelope[];
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ActivityFeed.d.ts.map

package/dist/components/stream/ActivityFeed.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActivityFeed.d.ts","sourceRoot":"","sources":["../../../src/components/stream/ActivityFeed.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAWjE,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,mBAAmB,EAAE,CAAA;CAAE,2CAqGzE"}