@elizaos/ui 2.0.0-alpha.19 → 2.0.0-alpha.192

package/packages/app-core/src/components/settings/MediaSettingsSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaSettingsSection.d.ts","sourceRoot":"","sources":["../../../../../../../app-core/src/components/settings/MediaSettingsSection.tsx"],"names":[],"mappings":"AAwCA,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAiBnE,wBAAgB,oBAAoB,4CA4anC"}

package/packages/app-core/src/components/settings/MediaSettingsSection.js

@@ -0,0 +1,163 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, SaveFooter, SettingsControls, Switch, useTimeout, } from "@elizaos/ui";
+import { useCallback, useEffect, useState } from "react";
+import { client, } from "../../api";
+import { COMPANION_ENABLED } from "../../navigation";
+import { useApp } from "../../state";
+import { CloudConnectionStatus, CloudSourceModeToggle, } from "../cloud/CloudSourceControls";
+import { MusicPlayerSettingsPanel } from "./MusicPlayerSettingsPanel";
+import { ProviderModelSelectors } from "./media-settings-providers";
+import { CATEGORY_LABELS, COMPANION_HALF_FRAMERATE_OPTIONS, COMPANION_VRM_POWER_OPTIONS, getApiKeyField, getNestedValue, getProvidersForCategory, MEDIA_API_SOURCE_CATEGORY_KEYS, setNestedValue, } from "./media-settings-types";
+import { VoiceConfigView } from "./VoiceConfigView";
+// ── Re-exports (public API) ──────────────────────────────────────────
+export { DesktopMediaControlPanel } from "./media-settings-providers";
+export { DESKTOP_MEDIA_CLICK_AUDIT } from "./media-settings-types";
+// ── Shared classes ───────────────────────────────────────────────────
+const SEGMENTED_BUTTON_BASE = "flex-1 basis-[calc(50%-0.125rem)] sm:basis-0 min-h-touch rounded-lg border px-2 py-1.5 text-xs-tight font-semibold !whitespace-normal";
+const SEGMENTED_BUTTON_ACTIVE = "border-accent/45 bg-accent/16 text-txt-strong shadow-sm";
+const SEGMENTED_BUTTON_INACTIVE = "border-border/40 text-muted-strong hover:border-border-strong hover:bg-bg-hover hover:text-txt";
+function segmentedButtonClass(active) {
+    return `${SEGMENTED_BUTTON_BASE} ${active ? SEGMENTED_BUTTON_ACTIVE : SEGMENTED_BUTTON_INACTIVE}`;
+}
+// ── Main component ───────────────────────────────────────────────────
+export function MediaSettingsSection() {
+    const { setTimeout } = useTimeout();
+    const { t, elizaCloudConnected, companionVrmPowerMode, setCompanionVrmPowerMode, companionAnimateWhenHidden, setCompanionAnimateWhenHidden, companionHalfFramerateMode, setCompanionHalfFramerateMode, } = useApp();
+    const [mediaConfig, setMediaConfig] = useState({});
+    const [loading, setLoading] = useState(true);
+    const [saving, setSaving] = useState(false);
+    const [saveSuccess, setSaveSuccess] = useState(false);
+    const [saveError, setSaveError] = useState(null);
+    const [activeTab, setActiveTab] = useState("image");
+    const [dirty, setDirty] = useState(false);
+    // Load config on mount
+    useEffect(() => {
+        void (async () => {
+            setLoading(true);
+            const cfg = await client.getConfig();
+            setMediaConfig(cfg.media ?? {});
+            setLoading(false);
+        })();
+    }, []);
+    // Get current category config
+    const getCategoryConfig = useCallback((category) => {
+        return (mediaConfig[category] ??
+            {});
+    }, [mediaConfig]);
+    // Get mode for category
+    const getMode = useCallback((category) => {
+        const cfg = getCategoryConfig(category);
+        return cfg.mode ?? "cloud";
+    }, [getCategoryConfig]);
+    // Get provider for category
+    const getProvider = useCallback((category) => {
+        const cfg = getCategoryConfig(category);
+        return cfg.provider ?? "cloud";
+    }, [getCategoryConfig]);
+    // Update category config
+    const updateCategoryConfig = useCallback((category, updates) => {
+        setMediaConfig((prev) => ({
+            ...prev,
+            [category]: {
+                ...(prev[category] ?? {}),
+                ...updates,
+            },
+        }));
+        setDirty(true);
+    }, []);
+    // Update nested value in config
+    const updateNestedValue = useCallback((path, value) => {
+        setMediaConfig((prev) => setNestedValue(prev, path, value));
+        setDirty(true);
+    }, []);
+    // Save handler
+    const handleSave = useCallback(async () => {
+        setSaving(true);
+        setSaveError(null);
+        setSaveSuccess(false);
+        try {
+            await client.updateConfig({ media: mediaConfig });
+            setSaveSuccess(true);
+            setDirty(false);
+            setTimeout(() => setSaveSuccess(false), 2500);
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : String(err ?? "Save failed");
+            setSaveError(message);
+        }
+        finally {
+            setSaving(false);
+        }
+    }, [mediaConfig, setTimeout]);
+    // Check if provider is configured
+    const isProviderConfigured = useCallback((category) => {
+        if (category === "voice")
+            return true;
+        const mode = getMode(category);
+        if (mode === "cloud")
+            return elizaCloudConnected;
+        const provider = getProvider(category);
+        const apiKeyField = getApiKeyField(category, provider);
+        if (!apiKeyField)
+            return true;
+        const value = getNestedValue(mediaConfig, apiKeyField.path);
+        return typeof value === "string" && value.length > 0;
+    }, [getMode, getProvider, mediaConfig, elizaCloudConnected]);
+    if (loading) {
+        return (_jsx("div", { className: "py-8 text-center text-muted text-xs", children: t("mediasettingssection.LoadingMediaConfig") }));
+    }
+    const isVoiceTab = activeTab === "voice";
+    const currentMode = isVoiceTab ? "cloud" : getMode(activeTab);
+    const currentProvider = isVoiceTab ? "cloud" : getProvider(activeTab);
+    const providers = isVoiceTab ? [] : getProvidersForCategory(activeTab);
+    const apiKeyField = isVoiceTab
+        ? null
+        : getApiKeyField(activeTab, currentProvider);
+    const configured = isProviderConfigured(activeTab);
+    return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(MusicPlayerSettingsPanel, {}), COMPANION_ENABLED && (_jsxs("div", { className: "rounded-xl border border-border bg-card/60 px-3 py-3 flex flex-col gap-3", "data-testid": "settings-companion-vrm-power", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-xs font-semibold text-txt", children: t("settings.companionVrmPower.label") }), _jsx("div", { className: "text-2xs text-muted mt-1 leading-snug", children: t("settings.companionVrmPower.desc") })] }), _jsx(SettingsControls.SegmentedGroup, { children: COMPANION_VRM_POWER_OPTIONS.map((mode) => {
+                            const active = companionVrmPowerMode === mode;
+                            return (_jsx(Button, { type: "button", variant: active ? "default" : "ghost", size: "sm", className: segmentedButtonClass(active), onClick: () => setCompanionVrmPowerMode(mode), "aria-pressed": active, children: t(`settings.companionVrmPower.${mode}`) }, mode));
+                        }) }), _jsxs("div", { className: "flex flex-col gap-2 pt-3", "data-testid": "settings-companion-half-framerate", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-xs font-semibold text-txt", children: t("settings.companionHalfFramerate.label") }), _jsx("div", { className: "text-2xs text-muted mt-1 leading-snug", children: t("settings.companionHalfFramerate.desc") })] }), _jsx(SettingsControls.SegmentedGroup, { children: COMPANION_HALF_FRAMERATE_OPTIONS.map((mode) => {
+                                    const active = companionHalfFramerateMode === mode;
+                                    return (_jsx(Button, { type: "button", variant: active ? "default" : "ghost", size: "sm", className: segmentedButtonClass(active), onClick: () => setCompanionHalfFramerateMode(mode), "aria-pressed": active, children: t(`settings.companionHalfFramerate.${mode}`) }, mode));
+                                }) })] }), _jsxs("div", { className: "flex flex-col gap-2 pt-3", "data-testid": "settings-companion-animate-when-hidden", children: [_jsx("div", { className: "text-xs font-semibold text-txt", children: t("settings.companionAnimateWhenHidden.title") }), _jsxs("div", { className: "flex items-end justify-between gap-3", children: [_jsx("div", { className: "min-w-0 flex-1 text-2xs text-muted leading-snug pr-2", children: t("settings.companionAnimateWhenHidden.desc") }), _jsx(Switch, { className: "shrink-0", checked: companionAnimateWhenHidden, onCheckedChange: (v) => setCompanionAnimateWhenHidden(v), "aria-label": t("settings.companionAnimateWhenHidden.title") })] })] })] })), _jsxs("div", { className: "flex flex-col gap-4 rounded-xl border border-border/70 bg-card/85 px-3 py-3 shadow-sm", "data-testid": "settings-media-generate-group", role: "region", "aria-label": t("mediasettingssection.GenerateGroupRegionLabel", {
+                    defaultValue: "Media generation by category",
+                }), children: [_jsx("p", { className: "text-xs font-medium uppercase tracking-wider text-muted", children: t("mediasettingssection.GenerateGroupTitle", {
+                            defaultValue: "Generation",
+                        }) }), _jsx(SettingsControls.SegmentedGroup, { children: ["image", "video", "audio", "vision", "voice"].map((cat) => {
+                            const active = activeTab === cat;
+                            return (_jsx(Button, { variant: active ? "default" : "ghost", size: "sm", className: segmentedButtonClass(active), onClick: () => setActiveTab(cat), children: t(CATEGORY_LABELS[cat]) }, cat));
+                        }) }), activeTab === "voice" ? (_jsx(VoiceConfigView, {})) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2 sm:gap-3", children: [_jsx("span", { className: "text-xs font-semibold text-muted w-full sm:w-auto", children: t("mediasettingssection.APISourceForCategory", {
+                                            category: t(MEDIA_API_SOURCE_CATEGORY_KEYS[activeTab]),
+                                        }) }), _jsx(CloudSourceModeToggle, { mode: currentMode, onChange: (mode) => {
+                                            if (mode === "cloud") {
+                                                updateCategoryConfig(activeTab, {
+                                                    mode: "cloud",
+                                                    provider: "cloud",
+                                                });
+                                                return;
+                                            }
+                                            updateCategoryConfig(activeTab, { mode: "own-key" });
+                                        } }), _jsxs("span", { className: `ml-auto inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-2xs font-medium ${configured
+                                            ? "border-ok/30 bg-ok/10 text-ok"
+                                            : "border-warn/30 bg-warn/10 text-warn"}`, children: [_jsx("span", { className: `h-1.5 w-1.5 rounded-full ${configured ? "bg-ok" : "bg-warn"}` }), configured
+                                                ? t("config-field.Configured")
+                                                : t("mediasettingssection.NeedsSetup")] })] }), currentMode === "cloud" && (_jsx(CloudConnectionStatus, { connected: elizaCloudConnected, disconnectedText: t("elizaclouddashboard.ElizaCloudNotConnectedSettings") })), currentMode === "own-key" && (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("div", { className: "text-xs font-semibold text-muted", children: t("mediasettingssection.Provider") }), _jsx("div", { className: "grid gap-1.5", style: {
+                                            gridTemplateColumns: `repeat(${providers.length}, 1fr)`,
+                                        }, children: providers
+                                            .filter((p) => p.id !== "cloud")
+                                            .map((p) => {
+                                            const active = currentProvider === p.id;
+                                            return (_jsxs(Button, { variant: "outline", size: "sm", className: `h-auto px-3 py-2 text-xs font-normal rounded-lg border border-border ${active
+                                                    ? "bg-accent/10 border-accent text-txt"
+                                                    : "bg-card text-txt hover:bg-bg-hover"}`, onClick: () => updateCategoryConfig(activeTab, {
+                                                    provider: p.id,
+                                                }), children: [_jsx("div", { className: "font-semibold", children: p.id === "cloud"
+                                                            ? t("providerswitcher.elizaCloud")
+                                                            : t(p.labelKey) }), _jsx("div", { className: "text-2xs text-muted mt-0.5", children: p.id === "cloud"
+                                                            ? t("elizaclouddashboard.NoSetupNeeded")
+                                                            : t(p.hint) })] }, p.id));
+                                        }) }), apiKeyField && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("span", { className: "text-xs font-semibold", children: t(apiKeyField.labelKey) }), _jsx(SettingsControls.Input, { type: "password", variant: "compact", placeholder: getNestedValue(mediaConfig, apiKeyField.path)
+                                                    ? t("mediasettingssection.ApiKeySetLeaveBlank")
+                                                    : t("mediasettingssection.EnterApiKey"), onChange: (e) => updateNestedValue(apiKeyField.path, e.target.value || undefined) })] })), _jsx(ProviderModelSelectors, { activeTab: activeTab, currentProvider: currentProvider, mediaConfig: mediaConfig, updateNestedValue: updateNestedValue, t: t })] })), _jsx(SaveFooter, { dirty: dirty, saving: saving, saveError: saveError, saveSuccess: saveSuccess, onSave: () => void handleSave() })] }))] })] }));
+}

package/packages/app-core/src/components/settings/MusicPlayerSettingsPanel.d.ts

@@ -0,0 +1,7 @@
+/**
+ * In-app surface for plugin-music-player: polls /music-player/status for any
+ * actively playing track (guild-agnostic), then connects an <audio> element
+ * to the broadcast stream for that guild.
+ */
+export declare function MusicPlayerSettingsPanel(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MusicPlayerSettingsPanel.d.ts.map

package/packages/app-core/src/components/settings/MusicPlayerSettingsPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MusicPlayerSettingsPanel.d.ts","sourceRoot":"","sources":["../../../../../../../app-core/src/components/settings/MusicPlayerSettingsPanel.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAmBH,wBAAgB,wBAAwB,4CAyIvC"}

package/packages/app-core/src/components/settings/MusicPlayerSettingsPanel.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * In-app surface for plugin-music-player: polls /music-player/status for any
+ * actively playing track (guild-agnostic), then connects an <audio> element
+ * to the broadcast stream for that guild.
+ */
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useApp } from "../../state";
+import { resolveApiUrl } from "../../utils/asset-url";
+const MEDIA_ERROR_NAMES = {
+    1: "MEDIA_ERR_ABORTED",
+    2: "MEDIA_ERR_NETWORK",
+    3: "MEDIA_ERR_DECODE",
+    4: "MEDIA_ERR_SRC_NOT_SUPPORTED",
+};
+export function MusicPlayerSettingsPanel() {
+    const { t } = useApp();
+    const audioRef = useRef(null);
+    const [nowPlaying, setNowPlaying] = useState({
+        kind: "idle",
+    });
+    const [audioError, setAudioError] = useState(null);
+    const lastAttachedTrack = useRef(null);
+    useEffect(() => {
+        if (nowPlaying.kind !== "ok")
+            return;
+        const key = `${nowPlaying.guildId}::${nowPlaying.title}`;
+        if (lastAttachedTrack.current === key)
+            return;
+        lastAttachedTrack.current = key;
+        const el = audioRef.current;
+        if (!el)
+            return;
+        setAudioError(null);
+        el.src = nowPlaying.streamUrl;
+        el.load();
+        el.play().catch(() => {
+            /* autoplay may be blocked by browser policy — user can press play */
+        });
+    }, [nowPlaying]);
+    useEffect(() => {
+        const el = audioRef.current;
+        if (!el)
+            return;
+        const handler = () => {
+            const err = el.error;
+            const code = err?.code ?? 0;
+            const name = MEDIA_ERROR_NAMES[code] ?? `UNKNOWN(${code})`;
+            setAudioError(`${name}: ${err?.message || "no details"}`);
+        };
+        el.addEventListener("error", handler);
+        return () => el.removeEventListener("error", handler);
+    }, []);
+    const pollOnce = useCallback(async () => {
+        setNowPlaying((prev) => prev.kind === "idle" ? { kind: "loading" } : prev);
+        try {
+            const res = await fetch(resolveApiUrl("/music-player/status"));
+            const data = (await res.json());
+            if (!res.ok) {
+                setNowPlaying({
+                    kind: "error",
+                    message: data.error ?? res.statusText,
+                });
+                return;
+            }
+            if (data.track?.title && data.guildId && data.streamUrl) {
+                setNowPlaying({
+                    kind: "ok",
+                    title: data.track.title,
+                    guildId: data.guildId,
+                    streamUrl: resolveApiUrl(data.streamUrl),
+                });
+            }
+            else {
+                setNowPlaying({
+                    kind: "error",
+                    message: t("musicplayersettings.NoTrack"),
+                });
+            }
+        }
+        catch {
+            setNowPlaying({
+                kind: "error",
+                message: t("musicplayersettings.PollFailed"),
+            });
+        }
+    }, [t]);
+    useEffect(() => {
+        void pollOnce();
+        const id = window.setInterval(() => void pollOnce(), 5000);
+        return () => window.clearInterval(id);
+    }, [pollOnce]);
+    return (_jsxs("div", { className: "rounded-xl border border-border bg-card/60 px-3 py-3 flex flex-col gap-3", "data-testid": "settings-music-player-panel", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-xs font-semibold text-txt", children: t("musicplayersettings.Title") }), _jsx("div", { className: "text-2xs text-muted mt-1 leading-snug", children: t("musicplayersettings.Description") })] }), _jsxs("div", { className: "text-2xs text-muted space-y-1", children: [_jsxs("div", { children: [_jsxs("span", { className: "font-semibold text-txt", children: [t("musicplayersettings.NowPlaying"), ":", " "] }), nowPlaying.kind === "loading" || nowPlaying.kind === "idle" ? (_jsx("span", { className: "text-muted", children: "\u2026" })) : nowPlaying.kind === "ok" ? (_jsx("span", { children: nowPlaying.title })) : (_jsx("span", { className: "text-warn", children: nowPlaying.message }))] }), nowPlaying.kind === "ok" && (_jsxs("div", { children: [_jsxs("span", { className: "font-semibold text-txt", children: [t("musicplayersettings.StreamBase"), ":", " "] }), _jsx("span", { className: "break-all font-mono", children: nowPlaying.streamUrl })] }))] }), _jsx("p", { className: "text-2xs text-muted leading-snug", children: t("musicplayersettings.AudioElementHint") }), _jsx("audio", { ref: audioRef, controls: true, autoPlay: true, className: "w-full max-w-md rounded-md border border-border bg-bg", "aria-label": t("musicplayersettings.Title") }), audioError && (_jsxs("p", { className: "text-2xs text-warn break-words font-mono", children: ["Audio error: ", audioError] }))] }));
+}

package/packages/app-core/src/components/settings/PermissionsSection.d.ts

@@ -0,0 +1,8 @@
+export declare function PermissionsSection(): import("react/jsx-runtime").JSX.Element;
+export declare function PermissionsOnboardingSection({ onContinue, onBack, }: {
+    onContinue: (options?: {
+        allowPermissionBypass?: boolean;
+    }) => void;
+    onBack?: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PermissionsSection.d.ts.map

package/packages/app-core/src/components/settings/PermissionsSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PermissionsSection.d.ts","sourceRoot":"","sources":["../../../../../../../app-core/src/components/settings/PermissionsSection.tsx"],"names":[],"mappings":"AAuXA,wBAAgB,kBAAkB,4CAIjC;AAsDD,wBAAgB,4BAA4B,CAAC,EAC3C,UAAU,EACV,MAAM,GACP,EAAE;IACD,UAAU,EAAE,CAAC,OAAO,CAAC,EAAE;QAAE,qBAAqB,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IACpE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB,2CAYA"}

package/packages/app-core/src/components/settings/PermissionsSection.js

@@ -0,0 +1,294 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@elizaos/ui";
+import { Check } from "lucide-react";
+import { useCallback, useMemo, useState } from "react";
+import { useBootConfig } from "../../config";
+import { hasRequiredOnboardingPermissions, isDesktopPlatform, isNative, isWebPlatform, } from "../../platform";
+import { useApp } from "../../state";
+import { PermissionIcon } from "../permissions/PermissionIcon";
+import { StreamingPermissionsOnboardingView, StreamingPermissionsSettingsView, } from "../permissions/StreamingPermissions";
+import { CapabilityToggle, PermissionRow, useDesktopPermissionsState, } from "./permission-controls";
+import { CAPABILITIES, getPermissionAction, SYSTEM_PERMISSIONS, } from "./permission-types";
+const PLATFORM_COPY = {
+    darwin: {
+        systemDescription: {
+            key: "permissionssection.MacSystemPermissionsDescription",
+            defaultValue: "Review the native permissions the app needs for desktop control, voice input, and visual analysis. macOS changes may require opening System Settings.",
+        },
+        grantNote: {
+            key: "permissionssection.MacGrantAccessNote",
+            defaultValue: "macOS requires Accessibility permission for computer control. Open System Settings → Privacy & Security to grant access.",
+        },
+        permissionReady: {
+            key: "permissionssection.PermissionReadyNote",
+            defaultValue: "All required permissions are ready. Continue when you're ready.",
+        },
+        grantSubNote: {
+            key: "permissionssection.PermissionGrantNote",
+            defaultValue: "Granting now will request what can be approved immediately and open Settings for anything that must be enabled there.",
+        },
+        onboardingIntro: {
+            key: "permissionssection.GrantPermissionsTo",
+            defaultValue: "Grant permissions to unlock desktop features.",
+        },
+    },
+    win32: {
+        systemDescription: {
+            key: "permissionssection.WindowsSystemPermissionsDescription",
+            defaultValue: "Open Windows privacy settings for microphone and camera, then verify access by using those features in the app.",
+        },
+        grantNote: {
+            key: "permissionssection.WindowsGrantPermissionsNote",
+            defaultValue: "Windows may not list the app as a named app here. Use Privacy settings to enable microphone and camera access, then test them in the app.",
+        },
+        permissionReady: {
+            key: "permissionssection.WindowsPermissionReadyNote",
+            defaultValue: "Windows privacy settings are advisory here. Continue, then verify microphone and camera directly in the app.",
+        },
+        grantSubNote: {
+            key: "permissionssection.WindowsPermissionGrantNote",
+            defaultValue: "This opens Windows privacy settings for microphone and camera. The app may not appear as a named app there; the real check is whether capture works back in the app.",
+        },
+        onboardingIntro: {
+            key: "permissionssection.WindowsGrantPermissionsTo",
+            defaultValue: "Open Windows privacy settings to prepare microphone and camera access for desktop features.",
+        },
+    },
+    linux: {
+        systemDescription: {
+            key: "permissionssection.SystemPermissionsDescription",
+            defaultValue: "Grant the runtime access it needs for voice input, camera capture, shell tasks, and desktop automation features.",
+        },
+        grantNote: {
+            key: "permissionssection.GrantPermissionsNote",
+            defaultValue: "Grant permissions to enable features like voice input and computer control.",
+        },
+        permissionReady: {
+            key: "permissionssection.PermissionReadyNote",
+            defaultValue: "All required permissions are ready. Continue when you're ready.",
+        },
+        grantSubNote: {
+            key: "permissionssection.PermissionGrantNote",
+            defaultValue: "Granting now will request what can be approved immediately and open Settings for anything that must be enabled there.",
+        },
+        onboardingIntro: {
+            key: "permissionssection.GrantPermissionsTo",
+            defaultValue: "Grant permissions to unlock desktop features.",
+        },
+    },
+};
+function platformCopy(platform) {
+    if (platform === "darwin")
+        return PLATFORM_COPY.darwin;
+    if (platform === "win32")
+        return PLATFORM_COPY.win32;
+    return PLATFORM_COPY.linux;
+}
+/* ── Streaming permission views (mobile / web) ──────────────────── */
+function MobilePermissionsView() {
+    const { t } = useApp();
+    const { websiteBlockerSettingsCard: WebsiteBlockerSettingsCard } = useBootConfig();
+    return (_jsxs("div", { className: "space-y-6", children: [_jsx(StreamingPermissionsSettingsView, { mode: "mobile", testId: "mobile-permissions", title: t("permissionssection.StreamingPermissions", {
+                    defaultValue: "Streaming Permissions",
+                }), description: t("permissionssection.MobileStreamingDesc", {
+                    defaultValue: "Your device streams camera, microphone, and screen to your Eliza Cloud agent for processing.",
+                }) }), WebsiteBlockerSettingsCard ? (_jsx(WebsiteBlockerSettingsCard, { mode: "mobile" })) : null] }));
+}
+function WebPermissionsView() {
+    const { t } = useApp();
+    const { websiteBlockerSettingsCard: WebsiteBlockerSettingsCard } = useBootConfig();
+    return (_jsxs("div", { className: "space-y-6", children: [_jsx(StreamingPermissionsSettingsView, { mode: "web", testId: "web-permissions-info", title: t("permissionssection.BrowserPermissions", {
+                    defaultValue: "Browser Permissions",
+                }), description: t("permissionssection.WebStreamingDesc", {
+                    defaultValue: "Grant browser access to your camera, microphone, and screen to stream to your agent.",
+                }) }), WebsiteBlockerSettingsCard ? (_jsx(WebsiteBlockerSettingsCard, { mode: "web" })) : null] }));
+}
+/* ── Desktop permission view ────────────────────────────────────── */
+function DesktopPermissionsView() {
+    const { t, plugins, handlePluginToggle } = useApp();
+    const { websiteBlockerSettingsCard: WebsiteBlockerSettingsCard } = useBootConfig();
+    const { handleOpenSettings, handleRefresh, handleRequest, handleToggleShell, loading, permissions, platform, refreshing, shellEnabled, } = useDesktopPermissionsState();
+    const arePermissionsGranted = useCallback((requiredPerms) => {
+        if (!permissions)
+            return false;
+        return requiredPerms.every((id) => {
+            const state = permissions[id];
+            return (state?.status === "granted" || state?.status === "not-applicable");
+        });
+    }, [permissions]);
+    const applicablePermissions = useMemo(() => SYSTEM_PERMISSIONS.filter((def) => {
+        if (!permissions)
+            return true;
+        const state = permissions[def.id];
+        return state?.status !== "not-applicable";
+    }), [permissions]);
+    if (loading) {
+        return (_jsx("p", { className: "py-6 text-center text-xs text-muted", children: t("permissionssection.LoadingPermissions", {
+                defaultValue: "Loading permissions...",
+            }) }));
+    }
+    if (!permissions) {
+        return (_jsx("p", { className: "py-6 text-center text-xs text-muted", children: t("permissionssection.UnableToLoadPermi", {
+                defaultValue: "Unable to load permissions.",
+            }) }));
+    }
+    const copy = platformCopy(platform);
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("section", { className: "space-y-2", children: [_jsxs("header", { className: "flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between", children: [_jsxs("div", { className: "space-y-0.5", children: [_jsx("h3", { className: "text-sm font-semibold text-txt", children: t("permissionssection.SystemPermissions", {
+                                            defaultValue: "System Permissions",
+                                        }) }), _jsx("p", { className: "max-w-2xl text-xs-tight leading-5 text-muted", children: t(copy.systemDescription.key, {
+                                            defaultValue: copy.systemDescription.defaultValue,
+                                        }) })] }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { variant: "default", size: "sm", className: "h-9 rounded-lg px-3 text-xs font-semibold", onClick: async () => {
+                                            for (const def of applicablePermissions) {
+                                                if (def.id === "shell")
+                                                    continue;
+                                                const state = permissions[def.id];
+                                                if (state?.status === "granted")
+                                                    continue;
+                                                if (state?.canRequest) {
+                                                    await handleRequest(def.id);
+                                                }
+                                                else {
+                                                    await handleOpenSettings(def.id);
+                                                }
+                                            }
+                                        }, children: t("permissionssection.AllowAll", { defaultValue: "Allow All" }) }), _jsx(Button, { variant: "outline", size: "sm", "data-testid": "permissions-refresh-button", className: "h-9 rounded-lg px-3 text-xs font-semibold", onClick: handleRefresh, disabled: refreshing, children: refreshing
+                                            ? t("permissionssection.Refreshing", {
+                                                defaultValue: "Refreshing...",
+                                            })
+                                            : t("common.refresh", { defaultValue: "Refresh" }) })] })] }), _jsx("div", { className: "divide-y divide-border/40 rounded-lg border border-border/40", children: applicablePermissions.map((def) => {
+                            const state = permissions[def.id];
+                            return (_jsx(PermissionRow, { def: def, status: state?.status ?? "not-determined", reason: state?.reason, platform: platform, canRequest: state?.canRequest ?? false, onRequest: () => handleRequest(def.id), onOpenSettings: () => handleOpenSettings(def.id), isShell: def.id === "shell", shellEnabled: shellEnabled, onToggleShell: def.id === "shell" ? handleToggleShell : undefined }, def.id));
+                        }) }), _jsx("p", { className: "text-xs-tight leading-5 text-muted", children: t(copy.grantNote.key, { defaultValue: copy.grantNote.defaultValue }) })] }), WebsiteBlockerSettingsCard ? (_jsx(WebsiteBlockerSettingsCard, { mode: "desktop", permission: permissions["website-blocking"], platform: platform, onRequestPermission: () => handleRequest("website-blocking"), onOpenPermissionSettings: () => handleOpenSettings("website-blocking") })) : null, _jsxs("section", { className: "space-y-2 border-t border-border/40 pt-5", children: [_jsxs("header", { className: "space-y-0.5", children: [_jsx("h3", { className: "text-sm font-semibold text-txt", children: t("appsview.Capabilities") }), _jsx("p", { className: "max-w-2xl text-xs-tight leading-5 text-muted", children: t("permissionssection.CapabilitiesDescription", {
+                                    defaultValue: "Turn higher-level capabilities on only after the required runtime permissions are available.",
+                                }) })] }), _jsx("div", { className: "space-y-2", children: CAPABILITIES.map((cap) => {
+                            const plugin = plugins.find((p) => p.id === cap.id) ?? null;
+                            const permissionsGranted = arePermissionsGranted(cap.requiredPermissions);
+                            return (_jsx(CapabilityToggle, { cap: cap, plugin: plugin, permissionsGranted: permissionsGranted, onToggle: (enabled) => {
+                                    if (plugin)
+                                        void handlePluginToggle(cap.id, enabled);
+                                } }, cap.id));
+                        }) })] })] }));
+}
+export function PermissionsSection() {
+    if (isWebPlatform())
+        return _jsx(WebPermissionsView, {});
+    if (isNative && !isDesktopPlatform())
+        return _jsx(MobilePermissionsView, {});
+    return _jsx(DesktopPermissionsView, {});
+}
+/* ── Onboarding permission views ────────────────────────────────── */
+function MobileOnboardingPermissions({ onContinue, onBack, }) {
+    const { t } = useApp();
+    return (_jsx(StreamingPermissionsOnboardingView, { mode: "mobile", onContinue: onContinue, onBack: onBack, testId: "mobile-onboarding-permissions", title: t("permissionssection.StreamingPermissions", {
+            defaultValue: "Streaming Permissions",
+        }), description: t("permissionssection.MobileOnboardingDesc", {
+            defaultValue: "Allow access so your device can stream to your cloud agent.",
+        }) }));
+}
+function WebOnboardingPermissions({ onContinue, onBack, }) {
+    const { t } = useApp();
+    return (_jsx(StreamingPermissionsOnboardingView, { mode: "web", onContinue: onContinue, onBack: onBack, testId: "web-onboarding-permissions", title: t("permissionssection.BrowserPermissions", {
+            defaultValue: "Browser Permissions",
+        }), description: t("permissionssection.WebOnboardingDesc", {
+            defaultValue: "Allow browser access so your camera, mic, and screen can stream to your agent.",
+        }) }));
+}
+export function PermissionsOnboardingSection({ onContinue, onBack, }) {
+    if (isWebPlatform()) {
+        return _jsx(WebOnboardingPermissions, { onContinue: onContinue, onBack: onBack });
+    }
+    if (isNative && !isDesktopPlatform()) {
+        return (_jsx(MobileOnboardingPermissions, { onContinue: onContinue, onBack: onBack }));
+    }
+    return (_jsx(DesktopOnboardingPermissions, { onContinue: onContinue, onBack: onBack }));
+}
+function DesktopOnboardingPermissions({ onContinue, onBack, }) {
+    const { t } = useApp();
+    const { handleOpenSettings, handleRequest, handleRefresh, loading, permissions, platform, } = useDesktopPermissionsState();
+    const [grantingPermissions, setGrantingPermissions] = useState(false);
+    const usesWindowsPrivacyFlow = platform === "win32";
+    const copy = platformCopy(platform);
+    const allGranted = hasRequiredOnboardingPermissions(permissions);
+    const canProceed = allGranted || usesWindowsPrivacyFlow;
+    const essentialPermissions = SYSTEM_PERMISSIONS.filter((def) => {
+        const state = permissions?.[def.id];
+        return state?.status !== "not-applicable" && def.id !== "shell";
+    });
+    const footerStatusMessage = canProceed
+        ? t(copy.permissionReady.key, {
+            defaultValue: copy.permissionReady.defaultValue,
+        })
+        : t("permissionssection.PermissionSkipNote", {
+            defaultValue: "Skipping keeps desktop features locked until you grant the missing permissions in Settings.",
+        });
+    const handleGrantPermissions = useCallback(async () => {
+        if (grantingPermissions)
+            return;
+        setGrantingPermissions(true);
+        try {
+            for (const def of essentialPermissions) {
+                const state = permissions?.[def.id];
+                if (state?.status === "granted")
+                    continue;
+                if (state?.status === "not-determined" && state.canRequest) {
+                    await handleRequest(def.id);
+                    continue;
+                }
+                await handleOpenSettings(def.id);
+            }
+            const refreshed = await handleRefresh();
+            if (refreshed &&
+                (usesWindowsPrivacyFlow ||
+                    hasRequiredOnboardingPermissions(refreshed.permissions))) {
+                onContinue();
+            }
+        }
+        finally {
+            setGrantingPermissions(false);
+        }
+    }, [
+        grantingPermissions,
+        essentialPermissions,
+        handleOpenSettings,
+        handleRefresh,
+        handleRequest,
+        onContinue,
+        permissions,
+        usesWindowsPrivacyFlow,
+    ]);
+    if (loading) {
+        return (_jsx("p", { className: "py-8 text-center text-sm text-muted", children: t("permissionssection.CheckingPermissions", {
+                defaultValue: "Checking permissions...",
+            }) }));
+    }
+    if (!permissions) {
+        return (_jsxs("div", { className: "py-8 text-center", children: [_jsx("p", { className: "mb-4 text-sm text-muted", children: t("permissionssection.UnableToCheckPerm", {
+                        defaultValue: "Unable to check permissions.",
+                    }) }), _jsx(Button, { type: "button", variant: "default", "data-testid": "permissions-onboarding-continue", onClick: () => onContinue(), children: t("onboarding.savedMyKeys", { defaultValue: "Continue" }) })] }));
+    }
+    return (_jsxs("div", { className: "space-y-5", children: [_jsxs("header", { className: "text-center", children: [_jsx("h2", { className: "mb-1 text-xl font-bold text-txt", children: t("permissionssection.SystemPermissions", {
+                            defaultValue: "System Permissions",
+                        }) }), _jsx("p", { className: "text-sm text-muted", children: t(copy.onboardingIntro.key, {
+                            defaultValue: copy.onboardingIntro.defaultValue,
+                        }) })] }), _jsx("div", { className: "space-y-2", children: essentialPermissions.map((def) => {
+                    const state = permissions[def.id];
+                    const status = state?.status ?? "not-determined";
+                    const isGranted = status === "granted";
+                    const action = getPermissionAction(t, def.id, status, state?.canRequest ?? false, platform);
+                    return (_jsxs("div", { "data-permission-id": def.id, className: `flex items-center gap-3 rounded-lg border px-3 py-2.5 ${isGranted
+                            ? "border-ok/30 bg-ok/5"
+                            : "border-border/50 bg-card/60"}`, children: [_jsx(PermissionIcon, { icon: def.icon }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-sm font-semibold text-txt", children: def.name }), _jsx("div", { className: "text-xs-tight leading-5 text-muted", children: def.description })] }), isGranted ? (_jsx(Check, { className: "h-4 w-4 shrink-0 text-ok" })) : action ? (_jsx(Button, { variant: "default", size: "sm", className: "h-9 rounded-lg px-3 text-xs font-semibold", onClick: () => action.type === "request"
+                                    ? handleRequest(def.id)
+                                    : handleOpenSettings(def.id), "aria-label": `${action.ariaLabelPrefix} ${def.name}`, children: action.label })) : null] }, def.id));
+                }) }), _jsxs("div", { className: "space-y-3 border-t border-border/40 pt-4", children: [_jsxs("div", { className: "space-y-1 text-xs-tight leading-5 text-muted", children: [_jsx("p", { children: footerStatusMessage }), !canProceed && (_jsx("p", { children: t(copy.grantSubNote.key, {
+                                    defaultValue: copy.grantSubNote.defaultValue,
+                                }) }))] }), _jsxs("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between", children: [onBack ? (_jsx(Button, { variant: "ghost", size: "sm", className: "justify-start p-0 text-2xs uppercase tracking-[0.15em] text-muted hover:text-txt", onClick: () => onBack(), type: "button", children: t("onboarding.back", { defaultValue: "Back" }) })) : (_jsx("span", {})), _jsxs("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-end", children: [!canProceed && (_jsx(Button, { type: "button", variant: "outline", size: "sm", className: "h-10 rounded-lg px-4 text-xs font-semibold", disabled: grantingPermissions, onClick: () => onContinue({ allowPermissionBypass: true }), children: t("onboarding.rpcSkip", { defaultValue: "Skip for now" }) })), _jsx(Button, { type: "button", variant: "default", size: "sm", "data-testid": "permissions-onboarding-continue", className: "h-10 min-w-[8.5rem] rounded-lg px-4 text-xs font-semibold", disabled: grantingPermissions, onClick: canProceed ? () => onContinue() : handleGrantPermissions, children: canProceed
+                                            ? t("onboarding.savedMyKeys", { defaultValue: "Continue" })
+                                            : grantingPermissions
+                                                ? t("permissionssection.GrantingPermissions", {
+                                                    defaultValue: "Granting...",
+                                                })
+                                                : t("permissionssection.GrantPermissions", {
+                                                    defaultValue: "Grant Permissions",
+                                                }) })] })] })] })] }));
+}

package/packages/app-core/src/components/settings/PolicyControlsView.d.ts

@@ -0,0 +1,2 @@
+export declare function PolicyControlsView(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PolicyControlsView.d.ts.map

package/packages/app-core/src/components/settings/PolicyControlsView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PolicyControlsView.d.ts","sourceRoot":"","sources":["../../../../../../../app-core/src/components/settings/PolicyControlsView.tsx"],"names":[],"mappings":"AAkDA,wBAAgB,kBAAkB,4CAoYjC"}