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

package/cloud/settings/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * In-app Eliza Cloud settings sections (re-IA Step 2).
+ *
+ * Importing this module registers the Cloud settings group + every cloud
+ * settings section (and the two Security-group additions) via the side-effecting
+ * {@link ./register-cloud-settings}. The Settings view imports it so the cloud
+ * sections are present whenever settings render — web and native alike — the same
+ * way the built-in sections register through `settings-sections.ts`.
+ */
+import "./register-cloud-settings";
+export { CloudSettingsSectionShell } from "./CloudSettingsSectionShell";
+export { CLOUD_SETTINGS_GROUP_ID, type ExtraSettingsGroupDef, getExtraSettingsGroup, listExtraSettingsGroups, registerSettingsGroup, } from "./cloud-settings-group";
+export { CloudAccountSection, CloudApiKeysSection, CloudApplicationsSection, CloudBillingSection, CloudMonetizationSection, CloudOrganizationSection, CloudPluginGrantsSection, CloudSecuritySection, } from "./sections";
+//# sourceMappingURL=index.d.ts.map

package/cloud/settings/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/cloud/settings/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,2BAA2B,CAAC;AAEnC,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,EACL,uBAAuB,EACvB,KAAK,qBAAqB,EAC1B,qBAAqB,EACrB,uBAAuB,EACvB,qBAAqB,GACtB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACnB,wBAAwB,EACxB,mBAAmB,EACnB,wBAAwB,EACxB,wBAAwB,EACxB,wBAAwB,EACxB,oBAAoB,GACrB,MAAM,YAAY,CAAC"}

package/cloud/settings/index.js

@@ -0,0 +1,13 @@
+/**
+ * In-app Eliza Cloud settings sections (re-IA Step 2).
+ *
+ * Importing this module registers the Cloud settings group + every cloud
+ * settings section (and the two Security-group additions) via the side-effecting
+ * {@link ./register-cloud-settings}. The Settings view imports it so the cloud
+ * sections are present whenever settings render — web and native alike — the same
+ * way the built-in sections register through `settings-sections.ts`.
+ */
+import "./register-cloud-settings.js";
+export { CloudSettingsSectionShell } from "./CloudSettingsSectionShell.js";
+export { CLOUD_SETTINGS_GROUP_ID, getExtraSettingsGroup, listExtraSettingsGroups, registerSettingsGroup, } from "./cloud-settings-group.js";
+export { CloudAccountSection, CloudApiKeysSection, CloudApplicationsSection, CloudBillingSection, CloudMonetizationSection, CloudOrganizationSection, CloudPluginGrantsSection, CloudSecuritySection, } from "./sections.js";

package/cloud/settings/register-cloud-settings.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Single registration barrel for the in-app Eliza Cloud settings sections
+ * (re-IA Step 2).
+ *
+ * Importing this module (side effect) registers:
+ *  - a new **Cloud** settings group (between System and Security), and
+ *  - the cloud sections that re-home the lifted cloud dashboard pages as in-app
+ *    Settings sections, plus two additions to the existing **Security** group.
+ *
+ * Every section is registered through {@link registerSettingsSection} (the
+ * pluggable registry) — never the pinned `settings-section-meta.ts` list — so the
+ * built-in section count the app-core `dev-route-catalog` parity test pins stays
+ * unchanged, exactly like the existing `cloud-agents` section does.
+ *
+ * Section → source domain:
+ *  | id                    | group    | source domain (`cloud/<domain>/`)        |
+ *  |-----------------------|----------|------------------------------------------|
+ *  | cloud-account         | cloud    | account-security (AccountSurface)        |
+ *  | cloud-billing         | cloud    | billing (BillingSectionBody + invoices)  |
+ *  | cloud-api-keys        | cloud    | api-keys (ApiKeysSurface)                |
+ *  | cloud-applications    | cloud    | applications (entry → /dashboard/apps)   |
+ *  | cloud-monetization    | cloud    | monetization (Earnings + Affiliates)     |
+ *  | cloud-organization    | cloud    | organization (OrganizationSection)       |
+ *  | cloud-security        | security | account-security (SecuritySurface)       |
+ *  | cloud-plugin-grants   | security | account-security (PermissionsSurface)    |
+ *
+ * Note on ids: the cloud Security/Plugin-grants surfaces deliberately use the
+ * `cloud-security` / `cloud-plugin-grants` ids (NOT `security` / `permissions`),
+ * so they sit *alongside* the app's built-in local Security + Permissions
+ * sections rather than overriding them (the registry is last-write-wins per id).
+ */
+export {};
+//# sourceMappingURL=register-cloud-settings.d.ts.map

package/cloud/settings/register-cloud-settings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"register-cloud-settings.d.ts","sourceRoot":"","sources":["../../../../../../src/cloud/settings/register-cloud-settings.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG"}

package/cloud/settings/register-cloud-settings.js

@@ -0,0 +1,161 @@
+/**
+ * Single registration barrel for the in-app Eliza Cloud settings sections
+ * (re-IA Step 2).
+ *
+ * Importing this module (side effect) registers:
+ *  - a new **Cloud** settings group (between System and Security), and
+ *  - the cloud sections that re-home the lifted cloud dashboard pages as in-app
+ *    Settings sections, plus two additions to the existing **Security** group.
+ *
+ * Every section is registered through {@link registerSettingsSection} (the
+ * pluggable registry) — never the pinned `settings-section-meta.ts` list — so the
+ * built-in section count the app-core `dev-route-catalog` parity test pins stays
+ * unchanged, exactly like the existing `cloud-agents` section does.
+ *
+ * Section → source domain:
+ *  | id                    | group    | source domain (`cloud/<domain>/`)        |
+ *  |-----------------------|----------|------------------------------------------|
+ *  | cloud-account         | cloud    | account-security (AccountSurface)        |
+ *  | cloud-billing         | cloud    | billing (BillingSectionBody + invoices)  |
+ *  | cloud-api-keys        | cloud    | api-keys (ApiKeysSurface)                |
+ *  | cloud-applications    | cloud    | applications (entry → /dashboard/apps)   |
+ *  | cloud-monetization    | cloud    | monetization (Earnings + Affiliates)     |
+ *  | cloud-organization    | cloud    | organization (OrganizationSection)       |
+ *  | cloud-security        | security | account-security (SecuritySurface)       |
+ *  | cloud-plugin-grants   | security | account-security (PermissionsSurface)    |
+ *
+ * Note on ids: the cloud Security/Plugin-grants surfaces deliberately use the
+ * `cloud-security` / `cloud-plugin-grants` ids (NOT `security` / `permissions`),
+ * so they sit *alongside* the app's built-in local Security + Permissions
+ * sections rather than overriding them (the registry is last-write-wins per id).
+ */
+import { Building2, CreditCard, Grid3x3, KeyRound, Lock, TrendingUp, User, Workflow, } from "lucide-react";
+import { registerSettingsSection } from "../../components/settings/settings-section-registry.js";
+import { registerCloudConnectorsSettingsSection } from "../connectors/index.js";
+import { registerMcpsSettingsSection } from "../mcps/index.js";
+import { CLOUD_SETTINGS_GROUP_ID, registerSettingsGroup, } from "./cloud-settings-group.js";
+import { CloudAccountSection, CloudApiKeysSection, CloudApplicationsSection, CloudBillingSection, CloudMonetizationSection, CloudOrganizationSection, CloudPluginGrantsSection, CloudSecuritySection, } from "./sections.js";
+/**
+ * The Cloud group sits between System (built-in order 1) and Security (built-in
+ * order 2), matching the IA in `docs/cloud-into-eliza/PLAN.md` §4.3.
+ */
+registerSettingsGroup({
+    id: CLOUD_SETTINGS_GROUP_ID,
+    label: "Cloud",
+    order: 1.5,
+});
+// ── Cloud group ──────────────────────────────────────────────────────────────
+registerSettingsSection({
+    id: "cloud-account",
+    label: "settings.sections.cloudAccount.label",
+    defaultLabel: "Account & Profile",
+    icon: User,
+    tone: "accent",
+    hue: "accent",
+    group: CLOUD_SETTINGS_GROUP_ID,
+    titleKey: "settings.sections.cloudAccount.title",
+    defaultTitle: "Account & Profile",
+    order: 0,
+    Component: CloudAccountSection,
+});
+registerSettingsSection({
+    id: "cloud-billing",
+    label: "settings.sections.cloudBilling.label",
+    defaultLabel: "Billing & Credits",
+    icon: CreditCard,
+    tone: "accent",
+    hue: "accent",
+    group: CLOUD_SETTINGS_GROUP_ID,
+    titleKey: "settings.sections.cloudBilling.title",
+    defaultTitle: "Billing & Credits",
+    order: 1,
+    Component: CloudBillingSection,
+});
+registerSettingsSection({
+    id: "cloud-api-keys",
+    label: "settings.sections.cloudApiKeys.label",
+    defaultLabel: "API Keys",
+    icon: KeyRound,
+    tone: "accent",
+    hue: "accent",
+    group: CLOUD_SETTINGS_GROUP_ID,
+    titleKey: "settings.sections.cloudApiKeys.title",
+    defaultTitle: "API Keys",
+    order: 2,
+    Component: CloudApiKeysSection,
+});
+registerSettingsSection({
+    id: "cloud-applications",
+    label: "settings.sections.cloudApplications.label",
+    defaultLabel: "Applications",
+    icon: Grid3x3,
+    tone: "accent",
+    hue: "accent",
+    group: CLOUD_SETTINGS_GROUP_ID,
+    titleKey: "settings.sections.cloudApplications.title",
+    defaultTitle: "Applications",
+    order: 3,
+    Component: CloudApplicationsSection,
+});
+registerSettingsSection({
+    id: "cloud-monetization",
+    label: "settings.sections.cloudMonetization.label",
+    defaultLabel: "Monetization",
+    icon: TrendingUp,
+    tone: "accent",
+    hue: "accent",
+    group: CLOUD_SETTINGS_GROUP_ID,
+    titleKey: "settings.sections.cloudMonetization.title",
+    defaultTitle: "Monetization",
+    order: 4,
+    Component: CloudMonetizationSection,
+});
+registerSettingsSection({
+    id: "cloud-organization",
+    label: "settings.sections.cloudOrganization.label",
+    defaultLabel: "Organization",
+    icon: Building2,
+    tone: "accent",
+    hue: "accent",
+    group: CLOUD_SETTINGS_GROUP_ID,
+    titleKey: "settings.sections.cloudOrganization.title",
+    defaultTitle: "Organization",
+    order: 5,
+    Component: CloudOrganizationSection,
+});
+// ── Security group (additions) ───────────────────────────────────────────────
+// Ordered after the built-in security sections (built-ins occupy meta indices
+// 12–15). High explicit order keeps them last within the Security group.
+registerSettingsSection({
+    id: "cloud-security",
+    label: "settings.sections.cloudSecurity.label",
+    defaultLabel: "Sessions & Privacy",
+    icon: Lock,
+    tone: "warn",
+    hue: "amber",
+    group: "security",
+    titleKey: "settings.sections.cloudSecurity.title",
+    defaultTitle: "Sessions, Privacy & Audit",
+    order: 100,
+    Component: CloudSecuritySection,
+});
+registerSettingsSection({
+    id: "cloud-plugin-grants",
+    label: "settings.sections.cloudPluginGrants.label",
+    defaultLabel: "Plugin Grants",
+    icon: Workflow,
+    tone: "warn",
+    hue: "amber",
+    group: "security",
+    titleKey: "settings.sections.cloudPluginGrants.title",
+    defaultTitle: "Plugin Grants",
+    order: 101,
+    Component: CloudPluginGrantsSection,
+});
+// ── Cloud connectors + MCPs ──────────────────────────────────────────────────
+// These domains own their own settings-section registration (they live outside
+// cloud/settings/). Invoke them here — from the barrel that SettingsView imports
+// on every platform — so the sections surface on web AND native/desktop, not
+// only inside the web-only route aggregator (register-all.ts).
+registerCloudConnectorsSettingsSection();
+registerMcpsSettingsSection();

package/cloud/settings/sections.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Zero-arg settings-section components for the lifted Eliza Cloud surfaces.
+ *
+ * Each component wraps a domain body (from `cloud/<domain>/`) in
+ * {@link CloudSettingsSectionShell} so it self-provides the cloud router /
+ * query / i18n / Steward-auth / page-header stack the bodies expect, then
+ * renders the canonical body. The settings registry renders these with no
+ * props — the bodies self-load (`useUserProfile`, `useApiKeys`, `useBillingUser`,
+ * `useOrganizationUser`, …) so there is nothing to thread in.
+ *
+ * Section → source domain:
+ *  - {@link CloudAccountSection}       → cloud/account-security (AccountSurface)
+ *  - {@link CloudBillingSection}       → cloud/billing (BillingSectionBody + invoices route)
+ *  - {@link CloudApiKeysSection}       → cloud/api-keys (ApiKeysSurface)
+ *  - {@link CloudApplicationsSection}  → cloud/applications (entry → /dashboard/apps view)
+ *  - {@link CloudMonetizationSection}  → cloud/monetization (Earnings + Affiliates)
+ *  - {@link CloudOrganizationSection}  → cloud/organization (OrganizationSection)
+ *  - {@link CloudSecuritySection}      → cloud/account-security (SecuritySurface: sessions/privacy-DSR/audit)
+ *  - {@link CloudPluginGrantsSection}  → cloud/account-security (PermissionsSurface: plugin grants)
+ */
+export declare function CloudAccountSection(): React.JSX.Element;
+export declare function CloudBillingSection(): React.JSX.Element;
+export declare function CloudApiKeysSection(): React.JSX.Element;
+export declare function CloudApplicationsSection(): React.JSX.Element;
+export declare function CloudMonetizationSection(): React.JSX.Element;
+export declare function CloudOrganizationSection(): React.JSX.Element;
+export declare function CloudSecuritySection(): React.JSX.Element;
+export declare function CloudPluginGrantsSection(): React.JSX.Element;
+//# sourceMappingURL=sections.d.ts.map

package/cloud/settings/sections.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sections.d.ts","sourceRoot":"","sources":["../../../../../../src/cloud/settings/sections.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAaH,wBAAgB,mBAAmB,IAAI,KAAK,CAAC,GAAG,CAAC,OAAO,CAMvD;AAED,wBAAgB,mBAAmB,IAAI,KAAK,CAAC,GAAG,CAAC,OAAO,CAMvD;AAED,wBAAgB,mBAAmB,IAAI,KAAK,CAAC,GAAG,CAAC,OAAO,CAMvD;AA6CD,wBAAgB,wBAAwB,IAAI,KAAK,CAAC,GAAG,CAAC,OAAO,CAM5D;AAED,wBAAgB,wBAAwB,IAAI,KAAK,CAAC,GAAG,CAAC,OAAO,CAM5D;AAED,wBAAgB,wBAAwB,IAAI,KAAK,CAAC,GAAG,CAAC,OAAO,CAM5D;AAED,wBAAgB,oBAAoB,IAAI,KAAK,CAAC,GAAG,CAAC,OAAO,CAMxD;AAED,wBAAgB,wBAAwB,IAAI,KAAK,CAAC,GAAG,CAAC,OAAO,CAM5D"}

package/cloud/settings/sections.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Zero-arg settings-section components for the lifted Eliza Cloud surfaces.
+ *
+ * Each component wraps a domain body (from `cloud/<domain>/`) in
+ * {@link CloudSettingsSectionShell} so it self-provides the cloud router /
+ * query / i18n / Steward-auth / page-header stack the bodies expect, then
+ * renders the canonical body. The settings registry renders these with no
+ * props — the bodies self-load (`useUserProfile`, `useApiKeys`, `useBillingUser`,
+ * `useOrganizationUser`, …) so there is nothing to thread in.
+ *
+ * Section → source domain:
+ *  - {@link CloudAccountSection}       → cloud/account-security (AccountSurface)
+ *  - {@link CloudBillingSection}       → cloud/billing (BillingSectionBody + invoices route)
+ *  - {@link CloudApiKeysSection}       → cloud/api-keys (ApiKeysSurface)
+ *  - {@link CloudApplicationsSection}  → cloud/applications (entry → /dashboard/apps view)
+ *  - {@link CloudMonetizationSection}  → cloud/monetization (Earnings + Affiliates)
+ *  - {@link CloudOrganizationSection}  → cloud/organization (OrganizationSection)
+ *  - {@link CloudSecuritySection}      → cloud/account-security (SecuritySurface: sessions/privacy-DSR/audit)
+ *  - {@link CloudPluginGrantsSection}  → cloud/account-security (PermissionsSurface: plugin grants)
+ */
+import { ExternalLink, Grid3x3 } from "lucide-react";
+import { AccountSurface } from "../account-security/AccountRoute.js";
+import { PermissionsSurface } from "../account-security/PermissionsRoute.js";
+import { SecuritySurface } from "../account-security/SecurityRoute.js";
+import { ApiKeysSurface } from "../api-keys/ApiKeysRoute.js";
+import { BillingSectionBody } from "../billing/BillingSection.js";
+import { MonetizationView } from "../monetization/MonetizationSection.js";
+import { OrganizationSection } from "../organization/OrganizationSection.js";
+import { useCloudT } from "../shell/CloudI18nProvider.js";
+import { CloudSettingsSectionShell } from "./CloudSettingsSectionShell.js";
+export function CloudAccountSection() {
+    return (_jsx(CloudSettingsSectionShell, { children: _jsx(AccountSurface, {}) }));
+}
+export function CloudBillingSection() {
+    return (_jsx(CloudSettingsSectionShell, { children: _jsx(BillingSectionBody, {}) }));
+}
+export function CloudApiKeysSection() {
+    return (_jsx(CloudSettingsSectionShell, { children: _jsx(ApiKeysSurface, {}) }));
+}
+/**
+ * Applications is a standalone cloud VIEW (`/dashboard/apps`, 8-tab developer
+ * surface), not an embeddable body — so this section is an entry that opens that
+ * view (CloudRouterShell serves it on the web build). The cloud route registry
+ * already registers the route at import time.
+ */
+function ApplicationsEntry() {
+    const t = useCloudT();
+    const open = () => {
+        if (typeof window !== "undefined") {
+            window.location.assign("/dashboard/apps");
+        }
+    };
+    return (_jsxs("button", { type: "button", onClick: open, className: "group flex w-full items-center gap-3 rounded-lg border border-border bg-card px-4 py-4 text-left transition-colors hover:border-accent/40 hover:bg-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40", children: [_jsx("span", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-accent/12 text-accent ring-1 ring-accent/20", children: _jsx(Grid3x3, { className: "h-[18px] w-[18px]", "aria-hidden": true }) }), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsx("span", { className: "text-sm font-medium leading-5 text-txt-strong", children: t("cloud.applications.entryTitle", {
+                            defaultValue: "Manage applications",
+                        }) }), _jsx("span", { className: "text-xs leading-relaxed text-muted", children: t("cloud.applications.entryDescription", {
+                            defaultValue: "Cloud OAuth applications: monetization, earnings, domains, analytics, users.",
+                        }) })] }), _jsx(ExternalLink, { className: "h-4 w-4 shrink-0 text-muted/70 transition-colors group-hover:text-accent", "aria-hidden": true })] }));
+}
+export function CloudApplicationsSection() {
+    return (_jsx(CloudSettingsSectionShell, { children: _jsx(ApplicationsEntry, {}) }));
+}
+export function CloudMonetizationSection() {
+    return (_jsx(CloudSettingsSectionShell, { children: _jsx(MonetizationView, {}) }));
+}
+export function CloudOrganizationSection() {
+    return (_jsx(CloudSettingsSectionShell, { children: _jsx(OrganizationSection, {}) }));
+}
+export function CloudSecuritySection() {
+    return (_jsx(CloudSettingsSectionShell, { children: _jsx(SecuritySurface, {}) }));
+}
+export function CloudPluginGrantsSection() {
+    return (_jsx(CloudSettingsSectionShell, { children: _jsx(PermissionsSurface, {}) }));
+}

package/cloud/shell/CloudI18nProvider.d.ts

@@ -0,0 +1,32 @@
+/**
+ * i18n provider for the app-hosted Eliza Cloud surfaces.
+ *
+ * Ported from `@elizaos/cloud-frontend/src/providers/I18nProvider.tsx`. Wraps
+ * the existing `@elizaos/ui` `t()` system with React context + persistence so
+ * lifted cloud pages keep consuming `useCloudI18n()` / `useCloudT()` exactly as
+ * they did via the cloud-frontend `useI18n()` / `useT()` hooks.
+ *
+ * This is the cloud-route i18n context only; the tab/view App keeps its own
+ * `@elizaos/ui` `AppProvider` translation context. They are independent.
+ */
+import { type ReactNode } from "react";
+import { createTranslator, type UiLanguage } from "../../i18n/index";
+export interface CloudI18nContextValue {
+    lang: UiLanguage;
+    setLang: (lang: UiLanguage | string) => void;
+    t: ReturnType<typeof createTranslator>;
+}
+/**
+ * Resolve the initial UI language synchronously before React mounts so the
+ * first paint matches the user's persisted preference. Resolution order:
+ * `?lang=` query → `localStorage.cloud.lang` → browser language → default.
+ */
+export declare function resolveInitialCloudLang(): UiLanguage;
+export interface CloudI18nProviderProps {
+    initialLang?: UiLanguage;
+    children: ReactNode;
+}
+export declare function CloudI18nProvider({ initialLang, children, }: CloudI18nProviderProps): React.JSX.Element;
+export declare function useCloudI18n(): CloudI18nContextValue;
+export declare function useCloudT(): ReturnType<typeof createTranslator>;
+//# sourceMappingURL=CloudI18nProvider.d.ts.map

package/cloud/shell/CloudI18nProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CloudI18nProvider.d.ts","sourceRoot":"","sources":["../../../../../../src/cloud/shell/CloudI18nProvider.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAEL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AACf,OAAO,EACL,gBAAgB,EAGhB,KAAK,UAAU,EAChB,MAAM,kBAAkB,CAAC;AAM1B,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,EAAE,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,KAAK,IAAI,CAAC;IAC7C,CAAC,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;CACxC;AAID;;;;GAIG;AACH,wBAAgB,uBAAuB,IAAI,UAAU,CAgBpD;AAED,MAAM,WAAW,sBAAsB;IACrC,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,WAAW,EACX,QAAQ,GACT,EAAE,sBAAsB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAsC5C;AAED,wBAAgB,YAAY,IAAI,qBAAqB,CAMpD;AAED,wBAAgB,SAAS,IAAI,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAE/D"}

package/cloud/shell/CloudI18nProvider.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * i18n provider for the app-hosted Eliza Cloud surfaces.
+ *
+ * Ported from `@elizaos/cloud-frontend/src/providers/I18nProvider.tsx`. Wraps
+ * the existing `@elizaos/ui` `t()` system with React context + persistence so
+ * lifted cloud pages keep consuming `useCloudI18n()` / `useCloudT()` exactly as
+ * they did via the cloud-frontend `useI18n()` / `useT()` hooks.
+ *
+ * This is the cloud-route i18n context only; the tab/view App keeps its own
+ * `@elizaos/ui` `AppProvider` translation context. They are independent.
+ */
+import { createContext, useContext, useEffect, useMemo, useState, } from "react";
+import { createTranslator, DEFAULT_UI_LANGUAGE, normalizeLanguage, } from "../../i18n/index.js";
+import { ensureLanguageLoaded } from "../../i18n/messages.js";
+import { detectClientLanguage } from "../../i18n/region.js";
+const STORAGE_KEY = "cloud.lang";
+const CloudI18nContext = createContext(null);
+/**
+ * Resolve the initial UI language synchronously before React mounts so the
+ * first paint matches the user's persisted preference. Resolution order:
+ * `?lang=` query → `localStorage.cloud.lang` → browser language → default.
+ */
+export function resolveInitialCloudLang() {
+    if (typeof window === "undefined")
+        return DEFAULT_UI_LANGUAGE;
+    try {
+        const url = new URL(window.location.href);
+        const query = url.searchParams.get("lang");
+        if (query)
+            return normalizeLanguage(query);
+    }
+    catch {
+        // location parse failures fall through
+    }
+    try {
+        const stored = window.localStorage.getItem(STORAGE_KEY);
+        if (stored)
+            return normalizeLanguage(stored);
+    }
+    catch {
+        // SSR or storage disabled — fall through
+    }
+    return detectClientLanguage() ?? DEFAULT_UI_LANGUAGE;
+}
+export function CloudI18nProvider({ initialLang, children, }) {
+    const [lang, setLangState] = useState(initialLang ?? resolveInitialCloudLang());
+    useEffect(() => {
+        void ensureLanguageLoaded(lang);
+    }, [lang]);
+    useEffect(() => {
+        if (typeof window === "undefined")
+            return;
+        try {
+            const root = document.documentElement;
+            if (root && root.lang !== lang)
+                root.lang = lang;
+        }
+        catch {
+            // documentElement access failures are non-fatal
+        }
+    }, [lang]);
+    const value = useMemo(() => {
+        const next = (input) => {
+            const normalized = normalizeLanguage(input);
+            try {
+                window.localStorage.setItem(STORAGE_KEY, normalized);
+            }
+            catch {
+                // storage disabled — keep in-memory state
+            }
+            setLangState(normalized);
+            void ensureLanguageLoaded(normalized);
+        };
+        return { lang, setLang: next, t: createTranslator(lang) };
+    }, [lang]);
+    return (_jsx(CloudI18nContext.Provider, { value: value, children: children }));
+}
+export function useCloudI18n() {
+    const ctx = useContext(CloudI18nContext);
+    if (!ctx) {
+        throw new Error("useCloudI18n must be used inside <CloudI18nProvider>");
+    }
+    return ctx;
+}
+export function useCloudT() {
+    return useCloudI18n().t;
+}

package/cloud/shell/CloudRouterShell.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Top-level react-router shell for the Eliza web app (web build only).
+ *
+ * This is the single `<BrowserRouter>` that owns the *non-app* routes — the
+ * cloud dashboard, public marketing, Steward auth, and token-gated payment /
+ * approval pages — and renders the existing tab/view `App` as the catch-all
+ * `/*`. The tab/view app's `window.location → tab` behavior is preserved
+ * untouched under the catch-all; this shell only adds the parametric routes the
+ * backend issues (which a flat tab enum cannot express) and the `/dashboard/*`
+ * compat redirects.
+ *
+ * Route table source (REVISION-2 §B1, DECISIONS.md D1): every cloud / public /
+ * auth / payment route is registered by its domain module via
+ * `registerCloudRoute(...)` against the {@link CloudRouteDef} registry; this
+ * shell mounts whatever {@link listCloudRoutes} returns and 404s gracefully
+ * otherwise. The `/dashboard/*` `<Navigate>` map is carried verbatim from
+ * `@elizaos/cloud-frontend/src/App.tsx`.
+ *
+ * Build-target gating (REVISION-2 §B3): this module and its Steward / cloud-i18n
+ * / query providers are web-build-only. Native (Capacitor) mounts the tab/view
+ * App directly with no bundle growth — see `packages/app/src/main.tsx`.
+ */
+import { type ReactNode } from "react";
+export interface CloudRouterShellProps {
+    /**
+     * The existing tab/view app subtree (`<App/>` plus any host runtimes the
+     * shell must not know about — desktop nav/tray, etc.). Rendered unchanged
+     * under the catch-all `/*` route. The host owns its `AppProvider`.
+     */
+    appElement: ReactNode;
+}
+/**
+ * The shell. Mounts the registered cloud routes + the `/dashboard/*` compat
+ * redirects, and renders {@link CloudRouterShellProps.appElement} for every
+ * other path so chat stays home and the tab system is untouched.
+ */
+export declare function CloudRouterShell({ appElement, }: CloudRouterShellProps): React.JSX.Element;
+export default CloudRouterShell;
+//# sourceMappingURL=CloudRouterShell.d.ts.map

package/cloud/shell/CloudRouterShell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CloudRouterShell.d.ts","sourceRoot":"","sources":["../../../../../../src/cloud/shell/CloudRouterShell.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAGH,OAAO,EAGL,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAsHf,MAAM,WAAW,qBAAqB;IACpC;;;;OAIG;IACH,UAAU,EAAE,SAAS,CAAC;CACvB;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,UAAU,GACX,EAAE,qBAAqB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAwC3C;AAED,eAAe,gBAAgB,CAAC"}

package/cloud/shell/CloudRouterShell.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Top-level react-router shell for the Eliza web app (web build only).
+ *
+ * This is the single `<BrowserRouter>` that owns the *non-app* routes — the
+ * cloud dashboard, public marketing, Steward auth, and token-gated payment /
+ * approval pages — and renders the existing tab/view `App` as the catch-all
+ * `/*`. The tab/view app's `window.location → tab` behavior is preserved
+ * untouched under the catch-all; this shell only adds the parametric routes the
+ * backend issues (which a flat tab enum cannot express) and the `/dashboard/*`
+ * compat redirects.
+ *
+ * Route table source (REVISION-2 §B1, DECISIONS.md D1): every cloud / public /
+ * auth / payment route is registered by its domain module via
+ * `registerCloudRoute(...)` against the {@link CloudRouteDef} registry; this
+ * shell mounts whatever {@link listCloudRoutes} returns and 404s gracefully
+ * otherwise. The `/dashboard/*` `<Navigate>` map is carried verbatim from
+ * `@elizaos/cloud-frontend/src/App.tsx`.
+ *
+ * Build-target gating (REVISION-2 §B3): this module and its Steward / cloud-i18n
+ * / query providers are web-build-only. Native (Capacitor) mounts the tab/view
+ * App directly with no bundle growth — see `packages/app/src/main.tsx`.
+ */
+import { QueryClientProvider } from "@tanstack/react-query";
+import { Suspense, } from "react";
+import { BrowserRouter, Navigate, Route, Routes, useLocation, useParams, } from "react-router-dom";
+import { queryClient } from "../lib/query-client.js";
+import { CloudI18nProvider, resolveInitialCloudLang, } from "./CloudI18nProvider.js";
+import { listCloudRoutes } from "./cloud-route-registry.js";
+import { StewardAuthProvider } from "./StewardProvider.js";
+/**
+ * `/dashboard/*` compatibility redirect map, carried verbatim from
+ * `@elizaos/cloud-frontend/src/App.tsx`. The old cloud dashboard lived under
+ * `/dashboard/*`; in the app the canonical homes are the standalone views and
+ * the settings sections, so these resolve every legacy deep link the backend or
+ * old bookmarks may still point at. `:param` segments are substituted from the
+ * matched route params, and the original query string is preserved.
+ */
+const DASHBOARD_REDIRECTS = [
+    // Legacy build/* surface → agents.
+    { from: "dashboard/build/*", to: "/dashboard/my-agents" },
+    // Media generators were folded into the API explorer.
+    { from: "dashboard/image", to: "/dashboard/api-explorer" },
+    { from: "dashboard/video", to: "/dashboard/api-explorer" },
+    { from: "dashboard/gallery", to: "/dashboard/api-explorer" },
+    { from: "dashboard/voices", to: "/dashboard/api-explorer" },
+    // Containers were unified under agents.
+    { from: "dashboard/containers", to: "/dashboard/agents" },
+    { from: "dashboard/containers/:id", to: "/dashboard/agents/:id" },
+    { from: "dashboard/containers/agents/:id", to: "/dashboard/agents/:id" },
+    // App-create modal is opened from the apps list, not its own route.
+    { from: "dashboard/apps/create", to: "/dashboard/apps" },
+    // New app-IA targets: billing / api-keys move into settings sections.
+    { from: "dashboard/billing", to: "/settings#billing" },
+    { from: "dashboard/api-keys", to: "/settings#api-keys" },
+];
+/** Substitute `:param` segments from the matched route params. */
+function ParamRedirect({ to }) {
+    const location = useLocation();
+    const params = useParams();
+    const resolved = to.replace(/:([a-zA-Z]+)/g, (_, key) => params[key] ?? "");
+    return _jsx(Navigate, { to: `${resolved}${location.search}`, replace: true });
+}
+function renderRouteElement(element) {
+    const RouteComponent = element;
+    return (_jsx(Suspense, { fallback: _jsx(RouteChunkFallback, {}), children: _jsx(RouteComponent, {}) }));
+}
+/**
+ * Transparent in-flight fallback for a lazy route chunk. Cloud pages supply
+ * their own richer skeletons; this just fills the slot for the cold-load gap.
+ */
+function RouteChunkFallback() {
+    return _jsx("div", { "aria-busy": "true", className: "min-h-[40vh]" });
+}
+function CloudNotFound() {
+    return (_jsxs("div", { className: "mx-auto max-w-prose p-8 text-sm text-neutral-400", children: [_jsx("h1", { className: "mb-3 text-lg font-semibold text-white", children: "Not found" }), _jsx("p", { children: "The page you requested doesn't exist." })] }));
+}
+/**
+ * Cloud-side providers shared by every registered cloud / auth / payment route.
+ * The tab/view App (catch-all) brings its own `AppProvider`, so these never
+ * wrap it. Public (token-gated) routes still get query + i18n but are exempt
+ * from Steward auth at the route level (see {@link CloudRouteElement}).
+ */
+function CloudProviders({ children, }) {
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(CloudI18nProvider, { initialLang: resolveInitialCloudLang(), children: children }) }));
+}
+/**
+ * Render a single registered cloud route. Authenticated routes are wrapped in
+ * the Steward auth provider (which itself lazy-loads the heavy `@stwd/*` runtime
+ * only when needed); public token routes (payment / approve / ballot /
+ * sensitive / shared chat) render WITHOUT app-shell chrome and WITHOUT Steward.
+ */
+function CloudRouteElement({ route, }) {
+    const body = renderRouteElement(route.element);
+    if (route.public) {
+        return body;
+    }
+    return _jsx(StewardAuthProvider, { children: body });
+}
+/**
+ * The shell. Mounts the registered cloud routes + the `/dashboard/*` compat
+ * redirects, and renders {@link CloudRouterShellProps.appElement} for every
+ * other path so chat stays home and the tab system is untouched.
+ */
+export function CloudRouterShell({ appElement, }) {
+    const cloudRoutes = listCloudRoutes();
+    return (_jsx(BrowserRouter, { children: _jsx(CloudProviders, { children: _jsxs(Routes, { children: [cloudRoutes.map((route) => (_jsx(Route, { path: route.path, element: _jsx(CloudRouteElement, { route: route }) }, route.path))), DASHBOARD_REDIRECTS.map(({ from, to }) => (_jsx(Route, { path: from, element: _jsx(ParamRedirect, { to: to }) }, from))), _jsx(Route, { path: "dashboard/*", element: _jsx(CloudNotFound, {}) }), _jsx(Route, { path: "*", element: appElement })] }) }) }));
+}
+export default CloudRouterShell;