@elizaos/agent 2.0.0-alpha.520 → 2.0.0-alpha.521

package/packages/app-core/src/components/accounts/AddAccountDialog.js

@@ -1,318 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, cn, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Input, Label, Spinner, } from "@elizaos/ui";
-import { useCallback, useEffect, useRef, useState, } from "react";
-import { client } from "../../api";
-import { useApp } from "../../state";
-import { navigatePreOpenedWindow, preOpenWindow } from "../../utils";
-const SUBSCRIPTION_PROVIDERS = new Set([
-    "anthropic-subscription",
-    "openai-codex",
-]);
-function isSubscriptionProvider(providerId) {
-    return SUBSCRIPTION_PROVIDERS.has(providerId);
-}
-function providerDisplayName(providerId, t) {
-    switch (providerId) {
-        case "anthropic-subscription":
-            return t("accounts.provider.anthropicSubscription", {
-                defaultValue: "Anthropic Claude subscription",
-            });
-        case "openai-codex":
-            return t("accounts.provider.openaiCodex", {
-                defaultValue: "OpenAI Codex subscription",
-            });
-        case "anthropic-api":
-            return t("accounts.provider.anthropicApi", {
-                defaultValue: "Anthropic API",
-            });
-        case "openai-api":
-            return t("accounts.provider.openaiApi", {
-                defaultValue: "OpenAI API",
-            });
-        default:
-            return providerId;
-    }
-}
-export function AddAccountDialog({ open, providerId, onClose, onCreated, }) {
-    const { t } = useApp();
-    const subscriptionProvider = isSubscriptionProvider(providerId);
-    const [step, setStep] = useState(subscriptionProvider ? "choose" : "apikey");
-    const [label, setLabel] = useState("");
-    const [apiKey, setApiKey] = useState("");
-    const [oauthCode, setOauthCode] = useState("");
-    const [errorMessage, setErrorMessage] = useState(null);
-    const [sessionId, setSessionId] = useState(null);
-    const eventSourceRef = useRef(null);
-    const sessionIdRef = useRef(null);
-    // Mirrors the `open` prop in a ref so async paths (`startOAuth` mid-
-    // await) can detect that the dialog was closed before
-    // `client.startAccountOAuth` resolved and immediately cancel the
-    // freshly-created server-side flow.
-    const openRef = useRef(open);
-    useEffect(() => {
-        openRef.current = open;
-    }, [open]);
-    const closeEventSource = useCallback(() => {
-        if (eventSourceRef.current) {
-            eventSourceRef.current.close();
-            eventSourceRef.current = null;
-        }
-    }, []);
-    const cancelInflightFlow = useCallback(async () => {
-        closeEventSource();
-        const id = sessionIdRef.current;
-        if (id) {
-            sessionIdRef.current = null;
-            try {
-                await client.cancelAccountOAuth(providerId, { sessionId: id });
-            }
-            catch {
-                // Best-effort cleanup — server times out flows on its own.
-            }
-        }
-    }, [closeEventSource, providerId]);
-    const reset = useCallback(() => {
-        closeEventSource();
-        sessionIdRef.current = null;
-        setStep(subscriptionProvider ? "choose" : "apikey");
-        setLabel("");
-        setApiKey("");
-        setOauthCode("");
-        setErrorMessage(null);
-        setSessionId(null);
-    }, [closeEventSource, subscriptionProvider]);
-    // Dialog open/close side-effects: when closed, cancel any in-flight
-    // OAuth flow so the server can release the loopback listener.
-    useEffect(() => {
-        if (!open) {
-            void cancelInflightFlow();
-            reset();
-        }
-    }, [open, cancelInflightFlow, reset]);
-    useEffect(() => {
-        return () => {
-            closeEventSource();
-        };
-    }, [closeEventSource]);
-    const subscribeToFlow = useCallback((newSessionId) => {
-        closeEventSource();
-        const url = `/api/accounts/${providerId}/oauth/status?sessionId=${encodeURIComponent(newSessionId)}`;
-        const source = new EventSource(url);
-        eventSourceRef.current = source;
-        // EventSource auto-reconnects on transient network blips, which
-        // is fine. But persistent failures (server gone, route 404) just
-        // toggle readyState=2 forever and the user is stuck on "Waiting
-        // for browser…". Surface that after a small grace period so the
-        // user can retry instead of staring at a spinner.
-        let connectedOnce = false;
-        let persistentErrorTimer = null;
-        const cancelPersistentErrorTimer = () => {
-            if (persistentErrorTimer) {
-                clearTimeout(persistentErrorTimer);
-                persistentErrorTimer = null;
-            }
-        };
-        source.onopen = () => {
-            connectedOnce = true;
-            cancelPersistentErrorTimer();
-        };
-        source.onmessage = (event) => {
-            try {
-                const data = JSON.parse(event.data);
-                if (data.status === "success" && data.account) {
-                    cancelPersistentErrorTimer();
-                    closeEventSource();
-                    sessionIdRef.current = null;
-                    onCreated(data.account);
-                    onClose();
-                }
-                else if (data.status === "error" ||
-                    data.status === "cancelled" ||
-                    data.status === "timeout") {
-                    cancelPersistentErrorTimer();
-                    closeEventSource();
-                    sessionIdRef.current = null;
-                    setErrorMessage(data.error ??
-                        t(`accounts.add.oauth.${data.status}`, {
-                            defaultValue: data.status === "timeout"
-                                ? "Login timed out. Try again."
-                                : data.status === "cancelled"
-                                    ? "Login cancelled."
-                                    : "Login failed.",
-                        }));
-                    setStep("error");
-                }
-            }
-            catch {
-                // Malformed SSE event — ignore; the next valid one will progress.
-            }
-        };
-        source.onerror = () => {
-            // EventSource readyState: 0=connecting, 1=open, 2=closed.
-            // If we're at 2 and never got an `onopen`, the route is
-            // unreachable. Give the browser ~5s to retry; if it can't
-            // recover, surface the error.
-            if (persistentErrorTimer)
-                return;
-            persistentErrorTimer = setTimeout(() => {
-                persistentErrorTimer = null;
-                if (!connectedOnce &&
-                    eventSourceRef.current?.readyState === EventSource.CLOSED) {
-                    closeEventSource();
-                    sessionIdRef.current = null;
-                    setErrorMessage(t("accounts.add.oauth.sseUnreachable", {
-                        defaultValue: "Lost connection to the OAuth status stream. Try again.",
-                    }));
-                    setStep("error");
-                }
-            }, 5_000);
-        };
-    }, [closeEventSource, onClose, onCreated, providerId, t]);
-    const startOAuth = useCallback(async () => {
-        setErrorMessage(null);
-        setStep("oauth-starting");
-        // Open the popup BEFORE the await so the browser sees a synchronous
-        // user-gesture-triggered window.open. Once we have the URL, navigate
-        // it. preOpenWindow returns null on desktop (Electrobun handles
-        // routing via the IPC call inside openExternalUrl).
-        const win = preOpenWindow();
-        try {
-            const flow = await client.startAccountOAuth(providerId, {
-                label: label.trim(),
-            });
-            // The dialog might have been closed between user clicking "Sign
-            // in" and the server returning the flow handle. If so, the
-            // server-side OAuth listener is orphaned — cancel it explicitly
-            // so the loopback port releases immediately instead of timing
-            // out in 5 minutes.
-            if (!openRef.current) {
-                try {
-                    await client.cancelAccountOAuth(providerId, {
-                        sessionId: flow.sessionId,
-                    });
-                }
-                catch {
-                    // Best-effort.
-                }
-                try {
-                    win?.close();
-                }
-                catch {
-                    // Cross-origin — ignore.
-                }
-                return;
-            }
-            navigatePreOpenedWindow(win, flow.authUrl);
-            sessionIdRef.current = flow.sessionId;
-            setSessionId(flow.sessionId);
-            if (flow.needsCodeSubmission) {
-                setStep("oauth-need-code");
-            }
-            else {
-                setStep("oauth-waiting");
-            }
-            subscribeToFlow(flow.sessionId);
-        }
-        catch (err) {
-            setErrorMessage(err instanceof Error && err.message
-                ? err.message
-                : t("accounts.add.oauth.startFailed", {
-                    defaultValue: "Failed to start login flow.",
-                }));
-            setStep("error");
-            try {
-                win?.close();
-            }
-            catch {
-                // Cross-origin — ignore.
-            }
-        }
-    }, [label, providerId, subscribeToFlow, t]);
-    const submitOAuthCode = useCallback(async (event) => {
-        event.preventDefault();
-        const code = oauthCode.trim();
-        const id = sessionIdRef.current;
-        if (!code || !id)
-            return;
-        try {
-            await client.submitAccountOAuthCode(providerId, {
-                sessionId: id,
-                code,
-            });
-            setOauthCode("");
-            setStep("oauth-waiting");
-        }
-        catch (err) {
-            setErrorMessage(err instanceof Error && err.message
-                ? err.message
-                : t("accounts.add.oauth.codeFailed", {
-                    defaultValue: "Failed to submit code.",
-                }));
-            setStep("error");
-        }
-    }, [oauthCode, providerId, t]);
-    const submitApiKey = useCallback(async (event) => {
-        event.preventDefault();
-        const trimmedLabel = label.trim();
-        const trimmedKey = apiKey.trim();
-        if (!trimmedLabel || !trimmedKey)
-            return;
-        setErrorMessage(null);
-        setStep("apikey-submitting");
-        try {
-            const account = await client.createApiKeyAccount(providerId, {
-                label: trimmedLabel,
-                apiKey: trimmedKey,
-            });
-            onCreated(account);
-            onClose();
-        }
-        catch (err) {
-            setErrorMessage(err instanceof Error && err.message
-                ? err.message
-                : t("accounts.add.apikey.failed", {
-                    defaultValue: "Failed to add account.",
-                }));
-            setStep("error");
-        }
-    }, [apiKey, label, onClose, onCreated, providerId, t]);
-    const handleClose = useCallback(() => {
-        void cancelInflightFlow();
-        onClose();
-    }, [cancelInflightFlow, onClose]);
-    const labelInput = (_jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: "add-account-label", children: t("accounts.add.label", { defaultValue: "Account name" }) }), _jsx(Input, { id: "add-account-label", value: label, onChange: (e) => setLabel(e.target.value), placeholder: t("accounts.add.labelPlaceholder", {
-                    defaultValue: "e.g. Personal, Work",
-                }), maxLength: 120, autoFocus: true })] }));
-    return (_jsx(Dialog, { open: open, onOpenChange: (next) => {
-            if (!next)
-                handleClose();
-        }, children: _jsxs(DialogContent, { className: "max-w-md", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: t("accounts.add.title", {
-                                defaultValue: `Add ${providerDisplayName(providerId, t)} account`,
-                                provider: providerDisplayName(providerId, t),
-                            }) }), _jsx(DialogDescription, { children: subscriptionProvider
-                                ? t("accounts.add.subscriptionDescription", {
-                                    defaultValue: "Sign in with your provider to add another account to the rotation pool.",
-                                })
-                                : t("accounts.add.apiDescription", {
-                                    defaultValue: "Paste your API key. The key is stored locally with mode 0600.",
-                                }) })] }), step === "choose" ? (_jsxs("div", { className: "grid gap-3 py-2", children: [labelInput, _jsx(Button, { type: "button", variant: "default", disabled: !label.trim(), onClick: () => void startOAuth(), className: "h-10", children: t("accounts.add.signIn", {
-                                defaultValue: `Sign in with ${providerDisplayName(providerId, t)}`,
-                                provider: providerDisplayName(providerId, t),
-                            }) })] })) : null, step === "oauth-starting" ? (_jsxs("div", { className: "flex items-center gap-3 py-6 text-sm text-muted", children: [_jsx(Spinner, { className: "h-4 w-4" }), t("accounts.add.oauth.starting", {
-                            defaultValue: "Starting login flow…",
-                        })] })) : null, step === "oauth-waiting" ? (_jsxs("div", { className: "grid gap-3 py-3 text-sm text-muted", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Spinner, { className: "h-4 w-4" }), _jsx("span", { children: t("accounts.add.oauth.waiting", {
-                                        defaultValue: "Waiting for browser… Complete the sign-in there.",
-                                    }) })] }), sessionId ? (_jsx("p", { className: "text-xs text-muted", children: t("accounts.add.oauth.sessionHint", {
-                                defaultValue: "Session: {{sessionId}}",
-                                sessionId: `${sessionId.slice(0, 8)}…`,
-                            }) })) : null] })) : null, step === "oauth-need-code" ? (_jsxs("form", { onSubmit: submitOAuthCode, className: "grid gap-3 py-2", children: [_jsx("p", { className: "text-xs text-muted", children: t("accounts.add.oauth.codeHint", {
-                                defaultValue: "Auto-redirect didn't reach us. Paste the code (or full redirect URL) from the browser.",
-                            }) }), _jsx(Input, { value: oauthCode, onChange: (e) => setOauthCode(e.target.value), placeholder: t("accounts.add.oauth.codePlaceholder", {
-                                defaultValue: "Paste the code or redirect URL",
-                            }), autoFocus: true }), _jsx(Button, { type: "submit", variant: "default", disabled: !oauthCode.trim(), className: "h-9", children: t("accounts.add.oauth.submitCode", {
-                                defaultValue: "Submit code",
-                            }) })] })) : null, step === "apikey" || step === "apikey-submitting" ? (_jsxs("form", { onSubmit: submitApiKey, className: "grid gap-3 py-2", children: [labelInput, _jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: "add-account-apikey", children: t("accounts.add.apiKey", { defaultValue: "API key" }) }), _jsx(Input, { id: "add-account-apikey", type: "password", value: apiKey, onChange: (e) => setApiKey(e.target.value), placeholder: "sk-\u2026", autoComplete: "off", spellCheck: false })] }), _jsx(Button, { type: "submit", variant: "default", disabled: step === "apikey-submitting" || !label.trim() || !apiKey.trim(), className: "h-9", children: step === "apikey-submitting" ? (_jsx(Spinner, { className: "h-3 w-3" })) : (t("accounts.add.save", { defaultValue: "Add account" })) })] })) : null, step === "error" && errorMessage ? (_jsx("div", { className: cn("rounded-md border border-destructive/40 bg-destructive/5 px-3 py-2 text-sm text-destructive"), role: "alert", children: errorMessage })) : null, _jsxs(DialogFooter, { className: "gap-2", children: [step === "error" ? (_jsx(Button, { type: "button", variant: "ghost", onClick: () => {
-                                setErrorMessage(null);
-                                setStep(subscriptionProvider ? "choose" : "apikey");
-                            }, children: t("accounts.add.tryAgain", { defaultValue: "Try again" }) })) : null, _jsx(Button, { type: "button", variant: "ghost", onClick: handleClose, children: t("accounts.cancel", { defaultValue: "Cancel" }) })] })] }) }));
-}

package/packages/app-core/src/components/accounts/RotationStrategyPicker.d.ts

@@ -1,16 +0,0 @@
-/**
- * RotationStrategyPicker — compact `Select` exposing the four account
- * rotation strategies. Calls `onChange` with the chosen strategy; the
- * caller is responsible for routing that through `client.patchProviderStrategy`.
- */
-import type { LinkedAccountProviderId } from "@elizaos/shared";
-import type { AccountStrategy } from "../../api/client-agent";
-interface RotationStrategyPickerProps {
-    providerId: LinkedAccountProviderId;
-    value: AccountStrategy | undefined;
-    onChange: (strategy: AccountStrategy) => void;
-    disabled?: boolean;
-}
-export declare function RotationStrategyPicker({ providerId, value, onChange, disabled, }: RotationStrategyPickerProps): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=RotationStrategyPicker.d.ts.map

package/packages/app-core/src/components/accounts/RotationStrategyPicker.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"RotationStrategyPicker.d.ts","sourceRoot":"","sources":["../../../../../../../app-core/src/components/accounts/RotationStrategyPicker.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAQ/D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAG9D,UAAU,2BAA2B;IACnC,UAAU,EAAE,uBAAuB,CAAC;IACpC,KAAK,EAAE,eAAe,GAAG,SAAS,CAAC;IACnC,QAAQ,EAAE,CAAC,QAAQ,EAAE,eAAe,KAAK,IAAI,CAAC;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAyCD,wBAAgB,sBAAsB,CAAC,EACrC,UAAU,EACV,KAAK,EACL,QAAQ,EACR,QAAQ,GACT,EAAE,2BAA2B,2CA6C7B"}

package/packages/app-core/src/components/accounts/RotationStrategyPicker.js

@@ -1,45 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@elizaos/ui";
-import { useApp } from "../../state";
-const STRATEGY_OPTIONS = [
-    {
-        id: "priority",
-        labelKey: "accounts.strategy.priority.label",
-        labelFallback: "Priority",
-        descriptionKey: "accounts.strategy.priority.description",
-        descriptionFallback: "Always prefer the top healthy account.",
-    },
-    {
-        id: "round-robin",
-        labelKey: "accounts.strategy.roundRobin.label",
-        labelFallback: "Round-robin",
-        descriptionKey: "accounts.strategy.roundRobin.description",
-        descriptionFallback: "Alternate across enabled accounts.",
-    },
-    {
-        id: "least-used",
-        labelKey: "accounts.strategy.leastUsed.label",
-        labelFallback: "Least used",
-        descriptionKey: "accounts.strategy.leastUsed.description",
-        descriptionFallback: "Prefer the account with the lowest current usage.",
-    },
-    {
-        id: "quota-aware",
-        labelKey: "accounts.strategy.quotaAware.label",
-        labelFallback: "Quota-aware",
-        descriptionKey: "accounts.strategy.quotaAware.description",
-        descriptionFallback: "Skip accounts above 85% utilization.",
-    },
-];
-export function RotationStrategyPicker({ providerId, value, onChange, disabled, }) {
-    const { t } = useApp();
-    const resolved = value ?? "priority";
-    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-[10px] font-medium uppercase tracking-wider text-muted", children: t("accounts.strategy.label", { defaultValue: "Strategy" }) }), _jsxs(Select, { value: resolved, onValueChange: (next) => {
-                    if (next !== resolved)
-                        onChange(next);
-                }, disabled: disabled, children: [_jsx(SelectTrigger, { id: `rotation-strategy-${providerId}`, className: "h-8 w-[160px] rounded-lg border border-border bg-card text-xs", children: _jsx(SelectValue, { placeholder: t("accounts.strategy.choose", {
-                                defaultValue: "Choose strategy",
-                            }) }) }), _jsx(SelectContent, { children: STRATEGY_OPTIONS.map((option) => (_jsx(SelectItem, { value: option.id, children: _jsxs("div", { className: "flex flex-col gap-0.5 py-0.5", children: [_jsx("span", { className: "text-sm font-medium text-txt", children: t(option.labelKey, { defaultValue: option.labelFallback }) }), _jsx("span", { className: "text-xs text-muted", children: t(option.descriptionKey, {
-                                            defaultValue: option.descriptionFallback,
-                                        }) })] }) }, option.id))) })] })] }));
-}

package/packages/app-core/src/components/apps/AppsCatalogGrid.d.ts

@@ -1,14 +0,0 @@
-import type { RegistryAppInfo } from "../../api";
-interface AppsCatalogGridProps {
-    activeAppNames: Set<string>;
-    error: string | null;
-    favoriteAppNames: Set<string>;
-    loading: boolean;
-    searchQuery: string;
-    visibleApps: RegistryAppInfo[];
-    onLaunch: (app: RegistryAppInfo) => void;
-    onToggleFavorite: (appName: string) => void;
-}
-export declare function AppsCatalogGrid({ activeAppNames, error, favoriteAppNames, loading, searchQuery, visibleApps, onLaunch, onToggleFavorite, }: AppsCatalogGridProps): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=AppsCatalogGrid.d.ts.map

package/packages/app-core/src/components/apps/AppsCatalogGrid.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AppsCatalogGrid.d.ts","sourceRoot":"","sources":["../../../../../../../app-core/src/components/apps/AppsCatalogGrid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAKjD,UAAU,oBAAoB;IAC5B,cAAc,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC5B,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,gBAAgB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,QAAQ,EAAE,CAAC,GAAG,EAAE,eAAe,KAAK,IAAI,CAAC;IACzC,gBAAgB,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAmPD,wBAAgB,eAAe,CAAC,EAC9B,cAAc,EACd,KAAK,EACL,gBAAgB,EAChB,OAAO,EACP,WAAW,EACX,WAAW,EACX,QAAQ,EACR,gBAAgB,GACjB,EAAE,oBAAoB,2CA8NtB"}

package/packages/app-core/src/components/apps/AppsCatalogGrid.js

@@ -1,208 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Skeleton } from "@elizaos/ui";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { useApp } from "../../state";
-import { AppHero } from "./app-identity";
-import { getAppShortName, groupAppsForCatalog } from "./helpers";
-const CARD_GAP_PX = 8;
-const MAX_CARDS_PER_ROW = 5;
-const MIN_CARD_WIDTH_PX = 248;
-function clampCardsPerRow(value) {
-    return Math.min(Math.max(value, 1), MAX_CARDS_PER_ROW);
-}
-function resolveCardsPerRow(width) {
-    if (width <= 0)
-        return MAX_CARDS_PER_ROW;
-    const fit = Math.floor((width + CARD_GAP_PX) / (MIN_CARD_WIDTH_PX + CARD_GAP_PX));
-    return clampCardsPerRow(fit);
-}
-function buildBalancedRows(items, maxCardsPerRow) {
-    if (items.length === 0)
-        return [];
-    const perRow = clampCardsPerRow(maxCardsPerRow);
-    if (items.length <= perRow) {
-        return [[...items]];
-    }
-    const rowCount = Math.ceil(items.length / perRow);
-    const baseRowSize = Math.floor(items.length / rowCount);
-    const oversizedRowCount = items.length % rowCount;
-    const rows = [];
-    let index = 0;
-    for (let rowIndex = 0; rowIndex < rowCount; rowIndex += 1) {
-        const size = rowIndex < rowCount - oversizedRowCount ? baseRowSize : baseRowSize + 1;
-        rows.push(items.slice(index, index + size));
-        index += size;
-    }
-    return rows;
-}
-function resolveSectionPreferredSlots(itemCount, maxCardsPerRow) {
-    return clampCardsPerRow(Math.min(Math.max(itemCount, 1), maxCardsPerRow));
-}
-function resolveSectionMinSlots(itemCount, maxCardsPerRow) {
-    const preferredSlots = resolveSectionPreferredSlots(itemCount, maxCardsPerRow);
-    if (itemCount <= 3 || preferredSlots <= 2) {
-        return preferredSlots;
-    }
-    return Math.max(2, preferredSlots - 1);
-}
-function buildCatalogSectionRows(sections, maxCardsPerRow) {
-    if (sections.length === 0) {
-        return [];
-    }
-    const rowCapacity = clampCardsPerRow(maxCardsPerRow);
-    const rows = [];
-    let sectionIndex = 0;
-    while (sectionIndex < sections.length) {
-        const rowSections = [];
-        let usedSlots = 0;
-        while (sectionIndex < sections.length) {
-            const section = sections[sectionIndex];
-            const preferredSlots = resolveSectionPreferredSlots(section.apps.length, rowCapacity);
-            const minSlots = resolveSectionMinSlots(section.apps.length, rowCapacity);
-            const remainingSlots = rowCapacity - usedSlots;
-            if (remainingSlots <= 0) {
-                break;
-            }
-            let slots = preferredSlots;
-            if (usedSlots === 0) {
-                const nextSection = sections[sectionIndex + 1];
-                if (nextSection &&
-                    preferredSlots === rowCapacity &&
-                    minSlots < preferredSlots) {
-                    const nextMinSlots = resolveSectionMinSlots(nextSection.apps.length, rowCapacity);
-                    if (minSlots + nextMinSlots <= rowCapacity) {
-                        slots = minSlots;
-                    }
-                }
-            }
-            else if (preferredSlots > remainingSlots) {
-                const leadSection = rowSections[0];
-                const canPairSmallFavoritesWithFeatured = rowSections.length === 1 &&
-                    leadSection?.key === "favorites" &&
-                    leadSection.apps.length <= 2 &&
-                    section.key === "featured" &&
-                    remainingSlots >= 2;
-                if (canPairSmallFavoritesWithFeatured) {
-                    slots = remainingSlots;
-                }
-                else if (minSlots <= remainingSlots) {
-                    slots = minSlots;
-                }
-                else {
-                    break;
-                }
-            }
-            if (slots > remainingSlots) {
-                if (rowSections.length > 0) {
-                    break;
-                }
-                slots = remainingSlots;
-            }
-            rowSections.push({
-                ...section,
-                slots,
-            });
-            usedSlots += slots;
-            sectionIndex += 1;
-            if (usedSlots >= rowCapacity) {
-                break;
-            }
-        }
-        if (rowSections.length === 0) {
-            const section = sections[sectionIndex];
-            rowSections.push({
-                ...section,
-                slots: resolveSectionPreferredSlots(section.apps.length, rowCapacity),
-            });
-            sectionIndex += 1;
-        }
-        rows.push({
-            sections: rowSections,
-            totalSlots: rowSections.reduce((total, section) => total + section.slots, 0),
-        });
-    }
-    return rows;
-}
-function CatalogSkeletonSection({ label, rowSizes, }) {
-    const rowDescriptors = useMemo(() => {
-        const seenRowCounts = new Map();
-        return rowSizes.map((rowSize) => {
-            const occurrence = (seenRowCounts.get(rowSize) ?? 0) + 1;
-            seenRowCounts.set(rowSize, occurrence);
-            const key = `${label}-${rowSize}-${occurrence}`;
-            return {
-                key,
-                rowSize,
-                cardKeys: Array.from({ length: rowSize }, (_, position) => `${key}-${position + 1}`),
-            };
-        });
-    }, [label, rowSizes]);
-    return (_jsxs("section", { className: "space-y-3", "aria-hidden": "true", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Skeleton, { className: "h-3 w-28 rounded-full bg-bg-accent/80" }), _jsx("div", { className: "h-px flex-1 bg-border/30" })] }), _jsx("div", { className: "space-y-2", children: rowDescriptors.map((rowDescriptor) => (_jsx("div", { className: "grid gap-2", style: {
-                        gridTemplateColumns: `repeat(${rowDescriptor.rowSize}, minmax(0, 1fr))`,
-                    }, children: rowDescriptor.cardKeys.map((cardKey) => (_jsxs("div", { className: "overflow-hidden rounded-2xl border border-border/35 bg-card/72", children: [_jsx(Skeleton, { className: "aspect-[4/3] w-full rounded-none bg-bg-accent/70" }), _jsx("div", { className: "space-y-2 px-3 py-3", children: _jsx(Skeleton, { className: "h-3 w-2/3 rounded-full bg-bg-accent/80" }) })] }, cardKey))) }, rowDescriptor.key))) })] }));
-}
-export function AppsCatalogGrid({ activeAppNames, error, favoriteAppNames, loading, searchQuery, visibleApps, onLaunch, onToggleFavorite, }) {
-    const { t } = useApp();
-    const catalogRef = useRef(null);
-    const [catalogWidth, setCatalogWidth] = useState(0);
-    const cardsPerRow = useMemo(() => resolveCardsPerRow(catalogWidth), [catalogWidth]);
-    const sections = useMemo(() => {
-        return groupAppsForCatalog(visibleApps, {
-            favoriteAppNames,
-        });
-    }, [favoriteAppNames, visibleApps]);
-    const sectionRows = useMemo(() => buildCatalogSectionRows(sections, cardsPerRow), [cardsPerRow, sections]);
-    useEffect(() => {
-        const element = catalogRef.current;
-        if (!element)
-            return;
-        const updateWidth = (width) => {
-            setCatalogWidth(Math.max(0, Math.round(width)));
-        };
-        updateWidth(element.getBoundingClientRect().width);
-        if (typeof ResizeObserver === "undefined") {
-            return;
-        }
-        const observer = new ResizeObserver((entries) => {
-            const nextWidth = entries[0]?.contentRect.width;
-            if (typeof nextWidth === "number") {
-                updateWidth(nextWidth);
-            }
-        });
-        observer.observe(element);
-        return () => observer.disconnect();
-    }, []);
-    return (_jsxs("div", { ref: catalogRef, "data-testid": "apps-catalog-grid", children: [error ? (_jsx("div", { className: "mb-4 rounded-xl border border-danger/30 bg-danger/10 px-3 py-2 text-xs-tight text-danger", children: error })) : null, loading ? (_jsxs("div", { className: "space-y-6", role: "status", "aria-label": t("appsview.Loading"), children: [_jsx(CatalogSkeletonSection, { label: "Featured", rowSizes: [1] }), _jsx(CatalogSkeletonSection, { label: "Games & Entertainment", rowSizes: buildBalancedRows(Array.from({ length: 7 }), cardsPerRow).map((row) => row.length) }), _jsx(CatalogSkeletonSection, { label: "Developer Utilities", rowSizes: buildBalancedRows(Array.from({ length: 6 }), cardsPerRow).map((row) => row.length) })] })) : visibleApps.length === 0 ? (_jsx("div", { className: "rounded-2xl border border-dashed border-border/35 bg-card/72 px-6 py-16 text-center", children: _jsx("div", { className: "text-xs font-medium text-muted-strong", children: searchQuery
-                        ? t("appsview.NoAppsMatchSearch")
-                        : t("appsview.NoAppsAvailable") }) })) : (_jsx("div", { className: "space-y-4", children: sectionRows.map((sectionRow) => {
-                    const rowKey = sectionRow.sections
-                        .map((section) => section.key)
-                        .join("-");
-                    return (_jsx("div", { "data-testid": `apps-section-row-${rowKey}`, className: "grid gap-4", style: {
-                            gridTemplateColumns: `repeat(${sectionRow.totalSlots}, minmax(0, 1fr))`,
-                        }, children: sectionRow.sections.map((section) => (_jsxs("section", { "data-testid": `apps-section-${section.key}`, className: "min-w-0 space-y-3", style: {
-                                gridColumn: `span ${section.slots} / span ${section.slots}`,
-                            }, children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("h2", { className: "text-sm font-semibold text-muted-strong", children: section.label }), _jsx("div", { className: "h-px flex-1 bg-border/30" })] }), _jsx("div", { className: "space-y-2", children: buildBalancedRows(section.apps, section.slots).map((row) => {
-                                        const sectionRowKey = row
-                                            .map((app) => app.name)
-                                            .join("-");
-                                        return (_jsx("div", { className: "grid gap-2", style: {
-                                                gridTemplateColumns: `repeat(${row.length}, minmax(0, 1fr))`,
-                                            }, children: row.map((app) => {
-                                                const isActive = activeAppNames.has(app.name);
-                                                const isFavorite = favoriteAppNames.has(app.name);
-                                                const displayName = app.displayName ?? getAppShortName(app);
-                                                return (_jsxs("div", { className: `group relative overflow-hidden rounded-2xl border bg-card/72 transition-all hover:border-accent/45 focus-within:ring-2 focus-within:ring-accent/35 ${isActive
-                                                        ? "border-ok/45 shadow-[0_0_0_1px_rgba(16,185,129,0.25)]"
-                                                        : "border-border/35 hover:shadow-[0_8px_24px_-12px_rgba(0,0,0,0.4)]"}`, children: [_jsxs("button", { type: "button", "data-testid": `app-card-${app.name.replace(/[^a-z0-9]+/gi, "-")}`, title: displayName, "aria-label": displayName, className: "block w-full text-left focus-visible:outline-none", onClick: () => onLaunch(app), children: [_jsx(AppHero, { app: app, className: "aspect-[4/3] transition-transform duration-300 group-hover:scale-[1.02]" }), _jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 flex items-end p-2 pe-10", children: _jsx("div", { className: "min-w-0 flex-1", children: _jsx("div", { className: "truncate text-xs font-semibold text-white drop-shadow-[0_1px_6px_rgba(0,0,0,0.6)]", children: displayName }) }) })] }), isActive ? (_jsx("span", { title: "Running", className: "pointer-events-none absolute right-4 top-4 h-2.5 w-2.5 rounded-full bg-ok shadow-[0_0_0_3px_rgba(16,185,129,0.35)]" })) : null, _jsx("button", { type: "button", "aria-label": isFavorite
-                                                                ? "Remove from favorites"
-                                                                : "Add to favorites", className: `absolute bottom-3 right-3 rounded-full p-1.5 text-white transition-all ${isFavorite
-                                                                ? "bg-black/30 text-warn backdrop-blur-sm"
-                                                                : "bg-black/30 text-white/70 backdrop-blur-sm hover:text-warn focus-visible:text-warn"}`, onClick: (event) => {
-                                                                event.stopPropagation();
-                                                                onToggleFavorite(app.name);
-                                                            }, children: _jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: isFavorite ? "currentColor" : "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("title", { children: "Favorite" }), _jsx("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" })] }) })] }, app.name));
-                                            }) }, `${section.key}-${sectionRowKey}`));
-                                    }) })] }, section.key))) }, rowKey));
-                }) }))] }));
-}

package/packages/app-core/src/components/apps/AppsSidebar.d.ts

@@ -1,22 +0,0 @@
-import type { AppRunSummary, RegistryAppInfo } from "../../api";
-interface AppsSidebarProps {
-    apps: RegistryAppInfo[];
-    browseApps: RegistryAppInfo[];
-    runs: AppRunSummary[];
-    activeAppNames: ReadonlySet<string>;
-    favoriteAppNames: ReadonlySet<string>;
-    selectedAppName: string | null;
-    /** Controlled collapsed state. */
-    collapsed: boolean;
-    onCollapsedChange: (next: boolean) => void;
-    /** Controlled width in px (expanded only; ignored when collapsed). */
-    width: number;
-    onWidthChange: (next: number) => void;
-    minWidth?: number;
-    maxWidth?: number;
-    onLaunchApp: (app: RegistryAppInfo) => void;
-    onOpenRun: (run: AppRunSummary) => void;
-}
-export declare function AppsSidebar({ apps, browseApps, runs, activeAppNames, favoriteAppNames, selectedAppName, collapsed, onCollapsedChange, width, onWidthChange, minWidth, maxWidth, onLaunchApp, onOpenRun, }: AppsSidebarProps): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=AppsSidebar.d.ts.map

package/packages/app-core/src/components/apps/AppsSidebar.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AppsSidebar.d.ts","sourceRoot":"","sources":["../../../../../../../app-core/src/components/apps/AppsSidebar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAWhE,UAAU,gBAAgB;IACxB,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,UAAU,EAAE,eAAe,EAAE,CAAC;IAC9B,IAAI,EAAE,aAAa,EAAE,CAAC;IACtB,cAAc,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACpC,gBAAgB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACtC,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,kCAAkC;IAClC,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,sEAAsE;IACtE,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,CAAC,GAAG,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5C,SAAS,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,IAAI,CAAC;CACzC;AASD,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,cAAc,EACd,gBAAgB,EAChB,eAAe,EACf,SAAS,EACT,iBAAiB,EACjB,KAAK,EACL,aAAa,EACb,QAAc,EACd,QAAc,EACd,WAAW,EACX,SAAS,GACV,EAAE,gBAAgB,2CA6LlB"}