@elizaos/ui 2.0.3-beta.2 → 2.0.3-beta.3

package/components/pages/ViewCatalog.js

@@ -1,600 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/**
- * ViewCatalog — the "Views" tab content.
- *
- * A minimal launcher: a grid of icon tiles for every registered view, plus a
- * "Get more" row for installable apps not yet loaded. Search is the floating
- * chat composer (no in-page search box). Navigated to via the "Views" nav tab
- * or the `eliza:navigate:view` event dispatched by VIEWS actions.
- */
-import { ArrowDownAZ, Clock3, Pencil, Pin, Plus, Sparkles, Trash2, } from "lucide-react";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { useAgentElement } from "../../agent-surface/index.js";
-import { fetchWithCsrf } from "../../api/csrf-client.js";
-import { registerDynamicView, unregisterDynamicView, } from "../../bridge/electrobun-rpc.js";
-import { isElectrobunRuntime } from "../../bridge/electrobun-runtime.js";
-import { useAvailableViews, } from "../../hooks/useAvailableViews.js";
-import { useDesktopTabs } from "../../hooks/useDesktopTabs.js";
-import { useViewCatalog } from "../../hooks/useViewCatalog.js";
-import { getActiveViewModality, } from "../../platform/platform-guards.js";
-import { useTranslation } from "../../state/TranslationContext.hooks.js";
-import { useIsDeveloperMode } from "../../state/useDeveloperMode.js";
-import { useRegisterViewChatBinding } from "../../state/view-chat-binding.js";
-import { readRecentViewIds, recordRecentViewId, TOP_VIEW_LIMIT, } from "../../view-recents.js";
-import { ChatSearchHint } from "../composites/chat-search-hint.js";
-import { ShellViewAgentSurface } from "../views/ShellViewAgentSurface.js";
-import { ViewIcon } from "../views/ViewIcon.js";
-const VIEW_LOADING_SKELETON_KEYS = [
-    "view-skeleton-1",
-    "view-skeleton-2",
-    "view-skeleton-3",
-    "view-skeleton-4",
-    "view-skeleton-5",
-    "view-skeleton-6",
-    "view-skeleton-7",
-    "view-skeleton-8",
-];
-const VIEW_SORT_OPTIONS = [
-    { mode: "recommended", label: "Recommended", icon: Sparkles },
-    { mode: "name", label: "A-Z", icon: ArrowDownAZ },
-    { mode: "recent", label: "Recent", icon: Clock3 },
-];
-/** A quiet, sentence-case section label. No eyebrow, no count chip. */
-function SectionLabel({ children, testId, }) {
-    return (_jsx("h2", { className: "mb-3 px-1 text-xs font-medium text-muted", "data-testid": testId, children: children }));
-}
-function ViewVisual({ id, icon, label, heroUrl, showHero, }) {
-    if (showHero && heroUrl) {
-        return (_jsx("div", { className: "h-14 w-14 shrink-0 overflow-hidden rounded-2xl bg-bg-accent", children: _jsx("img", { src: heroUrl, alt: "", className: "h-full w-full object-cover", loading: "lazy" }) }));
-    }
-    return (_jsx("div", { className: "flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-accent-subtle text-accent transition-colors group-hover:bg-accent group-hover:text-accent-foreground", "data-view-visual": id, children: _jsx(ViewIcon, { icon: icon, label: label, id: id, className: "h-6 w-6" }) }));
-}
-function isViewManagerEntry(view) {
-    return view.id === "views-manager";
-}
-function isShellNavigationEntry(view) {
-    return (view.id === "chat" ||
-        view.path === "/chat" ||
-        view.id === "character" ||
-        view.path === "/character");
-}
-function isVisibleCatalogView(view, isDeveloperMode, activeModality) {
-    if (isViewManagerEntry(view))
-        return false;
-    if (isShellNavigationEntry(view))
-        return false;
-    if ((view.viewType ?? "gui") !== activeModality)
-        return false;
-    if (view.developerOnly && !isDeveloperMode)
-        return false;
-    if (view.visibleInManager === false)
-        return false;
-    return true;
-}
-function viewCatalogKey(view) {
-    return `${view.viewType ?? "gui"}:${view.id}`;
-}
-function compareLabels(left, right) {
-    return left.label.localeCompare(right.label, undefined, {
-        numeric: true,
-        sensitivity: "base",
-    });
-}
-function sortViewsForMode(views, mode, recentViewIds) {
-    if (mode === "recommended")
-        return views;
-    if (mode === "name")
-        return [...views].sort(compareLabels);
-    const recentRanks = new Map(recentViewIds.map((viewId, index) => [viewId, index]));
-    return [...views].sort((left, right) => {
-        const leftRank = recentRanks.get(left.id) ?? Number.POSITIVE_INFINITY;
-        const rightRank = recentRanks.get(right.id) ?? Number.POSITIVE_INFINITY;
-        if (leftRank !== rightRank)
-            return leftRank - rightRank;
-        return compareLabels(left, right);
-    });
-}
-function sortCatalogEntriesForMode(entries, mode) {
-    if (mode === "recommended")
-        return entries;
-    return [...entries].sort(compareLabels);
-}
-/** Icon-only sort toggle. Tooltips carry the labels — no on-screen text. */
-function SortControls({ sortMode, onSortModeChange, }) {
-    const { t } = useTranslation();
-    const label = t("viewmanager.sort.aria", { defaultValue: "Sort views" });
-    return (_jsxs("fieldset", { className: "flex shrink-0 items-center gap-1", children: [_jsx("legend", { className: "sr-only", children: label }), VIEW_SORT_OPTIONS.map(({ icon: Icon, label, mode }) => {
-                const active = sortMode === mode;
-                return (_jsx("button", { type: "button", onClick: () => onSortModeChange(mode), title: label, "aria-label": label, className: `flex h-8 w-8 items-center justify-center rounded-lg transition-colors ${active
-                        ? "bg-accent-subtle text-accent"
-                        : "text-muted hover:bg-bg-accent hover:text-txt"}`, "aria-pressed": active, children: _jsx(Icon, { className: "h-4 w-4", "aria-hidden": "true" }) }, mode));
-            })] }));
-}
-function ViewCardPinButton({ view, onPin, }) {
-    const { t } = useTranslation();
-    const { ref, agentProps } = useAgentElement({
-        id: `view-card-pin-${view.id}`,
-        role: "button",
-        label: t("viewmanager.card.pinAria", {
-            label: view.label,
-            defaultValue: "Pin {{label}} as desktop tab",
-        }),
-        group: "view-cards",
-        description: `Pin the ${view.label} view as a desktop tab`,
-        onActivate: () => onPin(view),
-    });
-    return (_jsx("button", { ref: ref, type: "button", title: t("viewmanager.card.pinTitle", {
-            defaultValue: "Pin as desktop tab",
-        }), onClick: (e) => {
-            e.stopPropagation();
-            onPin(view);
-        }, className: "flex h-6 w-6 items-center justify-center rounded-md bg-card/80 text-muted hover:text-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-ring", "aria-label": t("viewmanager.card.pinAria", {
-            label: view.label,
-            defaultValue: "Pin {{label}} as desktop tab",
-        }), ...agentProps, children: _jsx(Pin, { className: "h-3 w-3" }) }));
-}
-function ViewCardEditButton({ view, onEdit, }) {
-    const { t } = useTranslation();
-    const { ref, agentProps } = useAgentElement({
-        id: `view-card-edit-${view.id}`,
-        role: "button",
-        label: t("viewmanager.card.editAria", {
-            label: view.label,
-            defaultValue: "Edit {{label}}",
-        }),
-        group: "view-cards",
-        description: `Edit the ${view.label} dynamic view`,
-        onActivate: () => onEdit(view),
-    });
-    return (_jsx("button", { ref: ref, type: "button", title: t("viewmanager.card.editTitle", {
-            defaultValue: "Edit dynamic view",
-        }), onClick: (e) => {
-            e.stopPropagation();
-            onEdit(view);
-        }, className: "flex h-6 w-6 items-center justify-center rounded-md bg-card/80 text-muted hover:text-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-ring", "aria-label": t("viewmanager.card.editAria", {
-            label: view.label,
-            defaultValue: "Edit {{label}}",
-        }), ...agentProps, children: _jsx(Pencil, { className: "h-3 w-3" }) }));
-}
-function ViewCardDeleteButton({ view, onDelete, }) {
-    const { t } = useTranslation();
-    const { ref, agentProps } = useAgentElement({
-        id: `view-card-delete-${view.id}`,
-        role: "button",
-        label: t("viewmanager.card.deleteAria", {
-            label: view.label,
-            defaultValue: "Delete {{label}}",
-        }),
-        group: "view-cards",
-        description: `Delete the ${view.label} dynamic view`,
-        onActivate: () => onDelete(view),
-    });
-    return (_jsx("button", { ref: ref, type: "button", title: t("viewmanager.card.deleteTitle", {
-            defaultValue: "Delete dynamic view",
-        }), onClick: (e) => {
-            e.stopPropagation();
-            onDelete(view);
-        }, className: "flex h-6 w-6 items-center justify-center rounded-md bg-card/80 text-muted hover:text-destructive focus:outline-none focus-visible:ring-2 focus-visible:ring-ring", "aria-label": t("viewmanager.card.deleteAria", {
-            label: view.label,
-            defaultValue: "Delete {{label}}",
-        }), ...agentProps, children: _jsx(Trash2, { className: "h-3 w-3" }) }));
-}
-function ViewCardOpenButton({ view, onClick, children, }) {
-    const { ref, agentProps } = useAgentElement({
-        id: `view-card-open-${view.id}`,
-        role: "button",
-        label: view.label,
-        group: "view-cards",
-        description: view.description ?? `Open the ${view.label} view`,
-        onActivate: () => onClick(view),
-    });
-    return (_jsx("button", { ref: ref, type: "button", onClick: () => onClick(view), className: "w-full focus:outline-none", ...agentProps, children: children }));
-}
-/** A launcher tile: icon chip + label. No border, no description, no chips. */
-function ViewCard({ view, onClick, onPin, onEdit, onDelete, }) {
-    const isDesktop = isElectrobunRuntime();
-    const showPinButton = isDesktop && view.desktopTabEnabled !== false && onPin;
-    const showManagementButtons = Boolean(onEdit || onDelete);
-    const showHero = Boolean(view.hasHeroImage && view.heroImageUrl);
-    return (_jsxs("div", { className: "group relative", "data-testid": `view-card-${view.id}`, children: [(showPinButton || showManagementButtons) && (_jsxs("div", { className: "absolute right-1.5 top-1.5 z-20 flex gap-1 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100", children: [showPinButton && _jsx(ViewCardPinButton, { view: view, onPin: onPin }), onEdit && _jsx(ViewCardEditButton, { view: view, onEdit: onEdit }), onDelete && _jsx(ViewCardDeleteButton, { view: view, onDelete: onDelete })] })), _jsx(ViewCardOpenButton, { view: view, onClick: onClick, children: _jsxs("div", { className: "flex flex-col items-center gap-2 rounded-2xl px-2 py-4 text-center transition-colors hover:bg-bg-accent/70", children: [_jsx(ViewVisual, { id: view.id, icon: view.icon, label: view.label, heroUrl: view.heroImageUrl, showHero: showHero }), _jsx("span", { className: "line-clamp-2 max-w-full text-xs font-medium leading-4 text-txt transition-colors group-hover:text-accent", children: view.label })] }) })] }));
-}
-function ViewsEmptyState({ hasQuery }) {
-    const { t } = useTranslation();
-    return (_jsx("div", { className: "flex flex-1 flex-col items-center justify-center gap-2 py-20 text-center", children: _jsx("p", { className: "text-sm font-medium text-muted", children: hasQuery
-                ? t("viewmanager.empty.noMatch", {
-                    defaultValue: "No views match your search",
-                })
-                : t("viewmanager.empty.none", {
-                    defaultValue: "No views available",
-                }) }) }));
-}
-function ViewsLoadingSkeleton() {
-    return (_jsx("div", { className: "grid grid-cols-3 gap-2 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6", children: VIEW_LOADING_SKELETON_KEYS.map((key) => (_jsx("div", { className: "h-[7.5rem] animate-pulse rounded-2xl bg-muted/15", "aria-hidden": true }, key))) }));
-}
-/**
- * Tile for a not-loaded catalog entry: icon + label + a Get action that
- * installs/loads the app (its view appears once the plugin registers).
- */
-function CatalogGetCard({ entry, onGet, }) {
-    const { t } = useTranslation();
-    const showHero = Boolean(entry.hasHero && entry.heroUrl);
-    const busy = entry.state === "installing";
-    const errored = entry.state === "error";
-    const actionLabel = busy
-        ? t("viewmanager.catalog.getting", { defaultValue: "Getting…" })
-        : errored
-            ? t("viewmanager.catalog.retry", { defaultValue: "Retry" })
-            : t("viewmanager.catalog.get", { defaultValue: "Get" });
-    return (_jsxs("button", { type: "button", onClick: () => onGet(entry), disabled: busy, "data-testid": `view-card-${entry.id}`, "aria-label": t("viewmanager.catalog.getAria", {
-            label: entry.label,
-            defaultValue: "Get {{label}}",
-        }), className: "group flex flex-col items-center gap-2 rounded-2xl px-2 py-4 text-center transition-colors hover:bg-bg-accent/70 focus:outline-none disabled:cursor-not-allowed", children: [_jsx(ViewVisual, { id: entry.id, icon: entry.icon, label: entry.label, heroUrl: entry.heroUrl, showHero: showHero }), _jsx("span", { className: "line-clamp-2 max-w-full text-xs font-medium leading-4 text-txt", children: entry.label }), _jsx("span", { "data-testid": `view-get-${entry.id}`, className: `rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide ${errored
-                    ? "bg-destructive/15 text-destructive"
-                    : "bg-accent-subtle text-accent group-hover:bg-accent group-hover:text-accent-foreground"} ${busy ? "opacity-70" : ""}`, children: actionLabel })] }));
-}
-function CatalogSection({ title, entries, onGet, }) {
-    if (entries.length === 0)
-        return null;
-    return (_jsxs("div", { className: "mb-7", "data-testid": "views-catalog-section", children: [_jsx(SectionLabel, { testId: "views-catalog-header", children: title }), _jsx("div", { className: "grid grid-cols-3 gap-2 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6", children: entries.map((entry) => (_jsx(CatalogGetCard, { entry: entry, onGet: onGet }, entry.key))) })] }));
-}
-function ViewSection({ title, views, onViewClick, onViewPin, onViewEdit, onViewDelete, testId, }) {
-    if (views.length === 0)
-        return null;
-    return (_jsxs("div", { className: "mb-7", "data-testid": testId, children: [title ? _jsx(SectionLabel, { children: title }) : null, _jsx("div", { className: "grid grid-cols-3 gap-2 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6", children: views.map((view) => (_jsx(ViewCard, { view: view, onClick: onViewClick, onPin: onViewPin, onEdit: onViewEdit, onDelete: onViewDelete }, viewCatalogKey(view)))) })] }));
-}
-/** Fetch semantic search results from /api/views/search for one modality. */
-async function fetchSearchResults(q, limit, viewType) {
-    const url = new URL("/api/views/search", window.location.origin);
-    url.searchParams.set("q", q);
-    url.searchParams.set("limit", String(limit));
-    // GUI is the server default — only the XR/TUI surfaces scope the query.
-    if (viewType !== "gui")
-        url.searchParams.set("viewType", viewType);
-    const resp = await fetchWithCsrf(url.pathname + url.search);
-    if (!resp.ok)
-        return [];
-    const body = (await resp.json());
-    if (!body || typeof body !== "object" || !("results" in body))
-        return [];
-    const { results } = body;
-    return Array.isArray(results) ? results : [];
-}
-export function ViewCatalog() {
-    const { t } = useTranslation();
-    const { views, loading, error, refresh } = useAvailableViews();
-    const { tabs: desktopTabs } = useDesktopTabs();
-    const isDeveloperMode = useIsDeveloperMode();
-    const canManageDynamicViews = isDeveloperMode && isElectrobunRuntime();
-    // Views are scoped to the surface modality: a GUI surface lists only GUI
-    // views (TUI/XR hidden entirely); an XR surface lists only XR views.
-    const activeModality = useMemo(() => getActiveViewModality(), []);
-    // Installable catalog (apps/games not loaded yet) — surfaced as "Get" cards
-    // alongside the loaded views, decoupled from plugin loading.
-    const { entries: catalogAllEntries, get: getCatalogEntry } = useViewCatalog();
-    const [query, setQuery] = useState("");
-    const [formViewId, setFormViewId] = useState("agent.quick-view");
-    const [formTitle, setFormTitle] = useState("Quick View");
-    const [formEntrypoint, setFormEntrypoint] = useState("/dynamic-views/quick-view.js");
-    const [formDescription, setFormDescription] = useState("Developer-created dynamic view");
-    const [formStatus, setFormStatus] = useState(null);
-    const [formBusy, setFormBusy] = useState(false);
-    const [recentViewIds, setRecentViewIds] = useState(readRecentViewIds);
-    const [sortMode, setSortMode] = useState("recommended");
-    const [searchResults, setSearchResults] = useState(null);
-    const [searchLoading, setSearchLoading] = useState(false);
-    const debounceRef = useRef(null);
-    // The floating chat composer IS the search box for this view: while it's open
-    // it takes over the composer placeholder and receives the live draft via
-    // onQuery, feeding the same `query` state the filtering below reads. setQuery
-    // (a useState setter) is stable, so the binding only re-registers if the
-    // localized placeholder string changes.
-    const searchPlaceholder = t("viewmanager.searchPlaceholder", {
-        defaultValue: "Search views…",
-    });
-    const chatSearchBinding = useMemo(() => ({ placeholder: searchPlaceholder, onQuery: setQuery }), [searchPlaceholder]);
-    useRegisterViewChatBinding(chatSearchBinding);
-    const formIdInput = useAgentElement({
-        id: "views-form-id",
-        role: "text-input",
-        label: t("viewmanager.form.idAria", { defaultValue: "Dynamic view ID" }),
-        group: "views-management",
-        description: "ID of the dynamic view to register",
-        getValue: () => formViewId,
-        onFill: (value) => setFormViewId(value),
-    });
-    const formTitleInput = useAgentElement({
-        id: "views-form-title",
-        role: "text-input",
-        label: t("viewmanager.form.titleAria", {
-            defaultValue: "Dynamic view title",
-        }),
-        group: "views-management",
-        description: "Title of the dynamic view to register",
-        getValue: () => formTitle,
-        onFill: (value) => setFormTitle(value),
-    });
-    const formEntrypointInput = useAgentElement({
-        id: "views-form-entrypoint",
-        role: "text-input",
-        label: t("viewmanager.form.entrypointAria", {
-            defaultValue: "Dynamic view entrypoint",
-        }),
-        group: "views-management",
-        description: "Entrypoint URL or path of the dynamic view bundle",
-        getValue: () => formEntrypoint,
-        onFill: (value) => setFormEntrypoint(value),
-    });
-    const formDescriptionInput = useAgentElement({
-        id: "views-form-description",
-        role: "text-input",
-        label: t("viewmanager.form.descriptionAria", {
-            defaultValue: "Dynamic view description",
-        }),
-        group: "views-management",
-        description: "Description of the dynamic view to register",
-        getValue: () => formDescription,
-        onFill: (value) => setFormDescription(value),
-    });
-    const formSaveButton = useAgentElement({
-        id: "views-form-save",
-        role: "button",
-        label: t("viewmanager.form.save", { defaultValue: "Save" }),
-        group: "views-management",
-        description: "Register or update the dynamic view from the form fields",
-    });
-    // When the query changes, debounce a call to the semantic search endpoint.
-    useEffect(() => {
-        if (debounceRef.current)
-            clearTimeout(debounceRef.current);
-        const q = query.trim();
-        if (!q) {
-            setSearchResults(null);
-            setSearchLoading(false);
-            return;
-        }
-        setSearchLoading(true);
-        debounceRef.current = setTimeout(async () => {
-            try {
-                const results = await fetchSearchResults(q, 10, activeModality);
-                setSearchResults(results);
-            }
-            catch {
-                // Semantic search unavailable — fall back to client-side filtering.
-                setSearchResults(null);
-            }
-            finally {
-                setSearchLoading(false);
-            }
-        }, 200);
-        return () => {
-            if (debounceRef.current)
-                clearTimeout(debounceRef.current);
-        };
-    }, [query, activeModality]);
-    const { builtinViews, pluginViews } = useMemo(() => {
-        // When the search endpoint returned results, display those ranked by score.
-        if (searchResults !== null) {
-            const visible = searchResults.filter((v) => {
-                return isVisibleCatalogView(v, isDeveloperMode, activeModality);
-            });
-            return {
-                builtinViews: visible.filter((v) => v.builtin),
-                pluginViews: visible.filter((v) => !v.builtin),
-            };
-        }
-        // No active search — show all views with client-side visibility rules.
-        const q = query.trim().toLowerCase();
-        const visible = views.filter((v) => {
-            if (!isVisibleCatalogView(v, isDeveloperMode, activeModality)) {
-                return false;
-            }
-            if (!q)
-                return true;
-            return (v.label.toLowerCase().includes(q) ||
-                (v.description?.toLowerCase().includes(q) ?? false) ||
-                (v.pluginName?.toLowerCase().includes(q) ?? false) ||
-                (v.tags?.some((tag) => tag.toLowerCase().includes(q)) ?? false));
-        });
-        return {
-            builtinViews: visible.filter((v) => v.builtin),
-            pluginViews: visible.filter((v) => !v.builtin),
-        };
-    }, [views, isDeveloperMode, query, searchResults, activeModality]);
-    const visibleViews = useMemo(() => [...builtinViews, ...pluginViews], [builtinViews, pluginViews]);
-    // Core + plugin views read as one flat launcher grid — the source split is
-    // dev metadata the user doesn't need.
-    const sortedAllViews = useMemo(() => sortViewsForMode(visibleViews, sortMode, recentViewIds), [visibleViews, recentViewIds, sortMode]);
-    const topViews = useMemo(() => {
-        const byId = new Map(visibleViews.map((view) => [view.id, view]));
-        const ordered = [];
-        for (const tab of desktopTabs) {
-            if (!tab.pinned)
-                continue;
-            const view = byId.get(tab.viewId);
-            if (view &&
-                !ordered.some((existing) => viewCatalogKey(existing) === viewCatalogKey(view))) {
-                ordered.push(view);
-            }
-        }
-        for (const id of recentViewIds) {
-            const view = byId.get(id);
-            if (view &&
-                !ordered.some((existing) => viewCatalogKey(existing) === viewCatalogKey(view))) {
-                ordered.push(view);
-            }
-            if (ordered.length >= TOP_VIEW_LIMIT)
-                break;
-        }
-        return ordered.slice(0, TOP_VIEW_LIMIT);
-    }, [desktopTabs, recentViewIds, visibleViews]);
-    const sortedTopViews = useMemo(() => sortViewsForMode(topViews, sortMode, recentViewIds), [recentViewIds, sortMode, topViews]);
-    const totalVisible = visibleViews.length;
-    const hasQuery = query.trim().length > 0;
-    const topViewKeys = useMemo(() => new Set(topViews.map((view) => viewCatalogKey(view))), [topViews]);
-    const sectionViews = useMemo(() => {
-        if (hasQuery)
-            return sortedAllViews;
-        return sortedAllViews.filter((view) => !topViewKeys.has(viewCatalogKey(view)));
-    }, [hasQuery, sortedAllViews, topViewKeys]);
-    const isSearching = searchLoading && hasQuery;
-    const availableEntries = useMemo(() => {
-        const q = query.trim().toLowerCase();
-        const filtered = catalogAllEntries
-            .filter((e) => e.state !== "loaded")
-            .filter((e) => (e.modality ?? "gui") === activeModality)
-            .filter((e) => !q ||
-            e.label.toLowerCase().includes(q) ||
-            (e.description?.toLowerCase().includes(q) ?? false) ||
-            (e.category?.toLowerCase().includes(q) ?? false));
-        return sortCatalogEntriesForMode(filtered, sortMode);
-    }, [activeModality, catalogAllEntries, query, sortMode]);
-    function handleGet(entry) {
-        void getCatalogEntry(entry);
-    }
-    function handleViewClick(view) {
-        setRecentViewIds(recordRecentViewId(view.id));
-        const path = view.path ?? `/apps/${view.id}`;
-        try {
-            if (typeof window !== "undefined" &&
-                window.location.protocol === "file:") {
-                window.location.hash = path;
-            }
-            else if (typeof window !== "undefined") {
-                window.history.pushState(null, "", path);
-                window.dispatchEvent(new PopStateEvent("popstate"));
-            }
-        }
-        catch {
-            // sandboxed — best effort navigation
-        }
-    }
-    function handleViewPin(view) {
-        // Dispatch a navigate event with action="pin-tab" so the App shell's
-        // eliza:navigate:view handler adds this view to the desktop tab bar.
-        if (typeof window === "undefined")
-            return;
-        window.dispatchEvent(new CustomEvent("eliza:navigate:view", {
-            detail: {
-                viewId: view.id,
-                viewPath: view.path ?? `/apps/${view.id}`,
-                viewLabel: view.label,
-                action: "pin-tab",
-            },
-        }));
-    }
-    function fillManagementForm(view) {
-        setFormViewId(view.id);
-        setFormTitle(view.label);
-        setFormEntrypoint(view.bundleUrl ?? view.path ?? `/apps/${view.id}`);
-        setFormDescription(view.description ?? "");
-        setFormStatus(t("viewmanager.form.editing", {
-            label: view.label,
-            defaultValue: "Editing {{label}}",
-        }));
-    }
-    function buildManagedManifest() {
-        const entrypoint = formEntrypoint.trim();
-        return {
-            id: formViewId.trim(),
-            title: formTitle.trim(),
-            description: formDescription.trim() || undefined,
-            source: entrypoint.startsWith("http") ? "remote" : "developer",
-            entrypoint,
-            placement: "canvas",
-            metadata: { managedBy: "view-manager" },
-        };
-    }
-    async function handleRegisterView() {
-        setFormBusy(true);
-        setFormStatus(null);
-        try {
-            const manifest = buildManagedManifest();
-            if (!manifest.id || !manifest.title || !manifest.entrypoint) {
-                setFormStatus(t("viewmanager.form.required", {
-                    defaultValue: "View ID, title, and entrypoint are required.",
-                }));
-                return;
-            }
-            const registered = await registerDynamicView(manifest, { update: true });
-            if (!registered) {
-                setFormStatus(t("viewmanager.form.bridgeUnavailable", {
-                    defaultValue: "Dynamic view bridge unavailable.",
-                }));
-                return;
-            }
-            await refresh();
-            setFormStatus(t("viewmanager.form.saved", {
-                title: registered.title,
-                defaultValue: "Saved {{title}}.",
-            }));
-        }
-        catch (err) {
-            setFormStatus(err instanceof Error ? err.message : String(err));
-        }
-        finally {
-            setFormBusy(false);
-        }
-    }
-    async function handleDeleteView(view) {
-        setFormBusy(true);
-        setFormStatus(null);
-        try {
-            const result = await unregisterDynamicView(view.id);
-            if (!result) {
-                setFormStatus(t("viewmanager.form.bridgeUnavailable", {
-                    defaultValue: "Dynamic view bridge unavailable.",
-                }));
-                return;
-            }
-            await refresh();
-            setFormStatus(result.removed
-                ? t("viewmanager.form.deleted", {
-                    label: view.label,
-                    defaultValue: "Deleted {{label}}.",
-                })
-                : t("viewmanager.form.notRegistered", {
-                    label: view.label,
-                    defaultValue: "{{label}} was not registered.",
-                }));
-        }
-        catch (err) {
-            setFormStatus(err instanceof Error ? err.message : String(err));
-        }
-        finally {
-            setFormBusy(false);
-        }
-    }
-    return (_jsx(ShellViewAgentSurface, { viewId: "views", children: _jsxs("div", { className: "flex min-h-0 flex-1 flex-col", children: [_jsxs("div", { className: "shrink-0 border-b border-border/40 bg-bg px-5 pb-3 pt-5", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("h1", { className: "text-2xl font-semibold leading-tight text-txt", children: t("viewmanager.title", { defaultValue: "Views" }) }), _jsx(SortControls, { sortMode: sortMode, onSortModeChange: setSortMode })] }), _jsx("div", { className: "mt-2", children: _jsx(ChatSearchHint, { noun: "views", query: query }) })] }), canManageDynamicViews && (_jsxs("form", { className: "shrink-0 border-b border-border/40 px-4 py-3", "aria-label": t("viewmanager.management.aria", {
-                        defaultValue: "Dynamic view management",
-                    }), onSubmit: (event) => {
-                        event.preventDefault();
-                        void handleRegisterView();
-                    }, children: [_jsxs("div", { className: "mb-2 flex items-center justify-between gap-3", children: [_jsx("h2", { className: "text-xs font-medium text-muted", children: t("viewmanager.management.heading", {
-                                        defaultValue: "Dynamic view management",
-                                    }) }), formStatus && (_jsx("p", { className: "text-xs text-muted", role: "status", children: formStatus }))] }), _jsxs("div", { className: "grid gap-2 sm:grid-cols-2 lg:grid-cols-[1fr_1fr_1.4fr_1.4fr_auto]", children: [_jsx("input", { ref: formIdInput.ref, "aria-label": t("viewmanager.form.idAria", {
-                                        defaultValue: "Dynamic view ID",
-                                    }), value: formViewId, onChange: (event) => setFormViewId(event.target.value), className: "rounded-sm border border-border bg-muted/20 px-3 py-2 text-sm placeholder:text-muted focus:outline-none focus:ring-2 focus:ring-ring", placeholder: t("viewmanager.form.idPlaceholder", {
-                                        defaultValue: "View ID",
-                                    }), ...formIdInput.agentProps }), _jsx("input", { ref: formTitleInput.ref, "aria-label": t("viewmanager.form.titleAria", {
-                                        defaultValue: "Dynamic view title",
-                                    }), value: formTitle, onChange: (event) => setFormTitle(event.target.value), className: "rounded-sm border border-border bg-muted/20 px-3 py-2 text-sm placeholder:text-muted focus:outline-none focus:ring-2 focus:ring-ring", placeholder: t("viewmanager.form.titlePlaceholder", {
-                                        defaultValue: "Title",
-                                    }), ...formTitleInput.agentProps }), _jsx("input", { ref: formEntrypointInput.ref, "aria-label": t("viewmanager.form.entrypointAria", {
-                                        defaultValue: "Dynamic view entrypoint",
-                                    }), value: formEntrypoint, onChange: (event) => setFormEntrypoint(event.target.value), className: "rounded-sm border border-border bg-muted/20 px-3 py-2 text-sm placeholder:text-muted focus:outline-none focus:ring-2 focus:ring-ring", placeholder: "/dynamic-views/view.js", ...formEntrypointInput.agentProps }), _jsx("input", { ref: formDescriptionInput.ref, "aria-label": t("viewmanager.form.descriptionAria", {
-                                        defaultValue: "Dynamic view description",
-                                    }), value: formDescription, onChange: (event) => setFormDescription(event.target.value), className: "rounded-sm border border-border bg-muted/20 px-3 py-2 text-sm placeholder:text-muted focus:outline-none focus:ring-2 focus:ring-ring", placeholder: t("viewmanager.form.descriptionPlaceholder", {
-                                        defaultValue: "Description",
-                                    }), ...formDescriptionInput.agentProps }), _jsxs("button", { ref: formSaveButton.ref, type: "submit", disabled: formBusy, className: "inline-flex items-center justify-center gap-2 rounded-sm border border-border bg-accent px-3 py-2 text-sm font-medium text-accent-foreground transition-colors hover:bg-accent/90 disabled:cursor-not-allowed disabled:opacity-60", ...formSaveButton.agentProps, children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), t("viewmanager.form.save", { defaultValue: "Save" })] })] })] })), _jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto px-5 pb-28 pt-5", children: [error && (_jsx("div", { className: "mb-3 rounded-sm border border-destructive/30 bg-destructive/5 px-3 py-2 text-xs text-destructive", children: t("viewmanager.loadError", {
-                                message: error.message,
-                                defaultValue: "Failed to load views: {{message}}",
-                            }) })), (loading && views.length === 0) || isSearching ? (_jsx(ViewsLoadingSkeleton, {})) : totalVisible === 0 && availableEntries.length === 0 ? (_jsx(ViewsEmptyState, { hasQuery: query.trim().length > 0 })) : (_jsxs(_Fragment, { children: [_jsx(ViewSection, { testId: "views-top-section", title: sortedTopViews.length > 0
-                                        ? t("viewmanager.section.quickAccess", {
-                                            defaultValue: "Quick access",
-                                        })
-                                        : undefined, views: sortedTopViews, onViewClick: handleViewClick, onViewPin: handleViewPin, onViewEdit: canManageDynamicViews ? fillManagementForm : undefined, onViewDelete: canManageDynamicViews ? handleDeleteView : undefined }), _jsx(ViewSection, { title: sortedTopViews.length > 0
-                                        ? t("viewmanager.section.all", { defaultValue: "All" })
-                                        : undefined, views: sectionViews, onViewClick: handleViewClick, onViewPin: handleViewPin, onViewEdit: canManageDynamicViews ? fillManagementForm : undefined, onViewDelete: canManageDynamicViews ? handleDeleteView : undefined }), _jsx(CatalogSection, { title: t("viewmanager.section.getMore", {
-                                        defaultValue: "Get more",
-                                    }), entries: availableEntries, onGet: handleGet })] }))] })] }) }));
-}

package/components/shell/ChatAmbientBackground.d.ts

@@ -1,8 +0,0 @@
-import type * as React from "react";
-/**
- * The ambient backdrop for the /chat conversational home — a flat orange field
- * with a gentle, living color pulse around the edges. No gradient, no vignette,
- * no greeting text (the home is wordless behind the always-present chat).
- */
-export declare function ChatAmbientBackground(): React.JSX.Element;
-//# sourceMappingURL=ChatAmbientBackground.d.ts.map

package/components/shell/ChatAmbientBackground.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ChatAmbientBackground.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/ChatAmbientBackground.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAqCpC;;;;GAIG;AACH,wBAAgB,qBAAqB,IAAI,KAAK,CAAC,GAAG,CAAC,OAAO,CAmBzD"}