@elizaos/app-core 2.0.0-alpha.73 → 2.0.0-alpha.75

package/components/PairingView.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Pairing view component — simple pairing screen for authentication.
+ */
+import { useBranding } from "../config/branding";
+import { useApp } from "../state";
+export function PairingView() {
+    const { pairingEnabled, pairingExpiresAt, pairingCodeInput, pairingError, pairingBusy, handlePairingSubmit, setState, t, } = useApp();
+    const branding = useBranding();
+    const handleCodeChange = (e) => {
+        setState("pairingCodeInput", e.target.value);
+    };
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        void handlePairingSubmit();
+    };
+    const formatExpiry = (timestamp) => {
+        if (!timestamp)
+            return "";
+        const now = Date.now();
+        const diff = timestamp - now;
+        if (diff <= 0)
+            return "Expired";
+        const minutes = Math.floor(diff / 60000);
+        const seconds = Math.floor((diff % 60000) / 1000);
+        return `Expires in ${minutes}:${seconds.toString().padStart(2, "0")}`;
+    };
+    return (_jsxs("div", { className: "max-w-[560px] mx-auto mt-15 p-6 border border-border bg-card rounded-[10px]", children: [_jsx("h1", { className: "text-lg font-semibold mb-2 text-txt-strong", children: t("pairingview.PairingRequired") }), _jsx("p", { className: "text-muted mb-4 leading-relaxed", children: t("pairingview.EnterThePairingCo") }), pairingEnabled ? (_jsxs("form", { onSubmit: handleSubmit, children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "pairing-code", className: "text-sm text-txt-strong block mb-2", children: t("pairingview.PairingCode") }), _jsx("input", { id: "pairing-code", type: "text", value: pairingCodeInput, onChange: handleCodeChange, placeholder: t("pairingview.EnterPairingCode"), disabled: pairingBusy, className: "w-full px-3 py-2.5 rounded-lg border border-border bg-bg-muted text-txt text-sm focus:border-accent focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed" })] }), _jsx("div", { className: "mt-3 flex gap-2.5", children: _jsx("button", { type: "submit", className: "px-6 py-2 border border-accent bg-accent text-accent-fg text-sm cursor-pointer hover:bg-accent-hover disabled:opacity-40 disabled:cursor-not-allowed", disabled: pairingBusy || !pairingCodeInput.trim(), children: pairingBusy ? "Pairing..." : "Submit" }) }), pairingError && (_jsx("p", { className: "mt-2.5 text-danger text-[13px]", children: pairingError })), pairingExpiresAt && (_jsx("p", { className: "mt-2.5 text-muted text-[13px]", children: formatExpiry(pairingExpiresAt) }))] })) : (_jsxs("div", { className: "text-muted text-sm space-y-2", children: [_jsx("p", { children: t("pairingview.PairingIsNotEnabl") }), _jsx("p", { children: t("pairingview.NextSteps") }), _jsxs("ol", { className: "list-decimal pl-5 space-y-1", children: [_jsx("li", { children: t("pairingview.AskTheServerOwner") }), _jsx("li", { children: t("pairingview.EnablePairingOnTh") })] }), _jsx("a", { href: `https://github.com/${branding.orgName}/${branding.repoName}/blob/develop/docs/api-reference.mdx`, target: "_blank", rel: "noreferrer", className: "inline-flex px-3 py-2 border border-border rounded text-txt hover:border-accent hover:text-txt", children: t("pairingview.PairingSetupDocs") })] }))] }));
+}

package/components/PermissionsSection.d.ts

@@ -0,0 +1,20 @@
+/**
+ * PermissionsSection — System permissions and capability toggles for Settings.
+ *
+ * Displays:
+ *   - System permission statuses (accessibility, screen-recording, microphone, camera)
+ *   - Shell access toggle (soft disable/enable)
+ *   - Capability toggles (browser, computeruse, vision) that depend on permissions
+ *
+ * Works cross-platform with platform-specific permission requirements:
+ *   - Electrobun desktop: OS-level permission prompts and system settings links
+ *   - Capacitor (mobile): Camera/mic/screen streaming permissions via native plugins
+ *   - Web: Informational message only (no OS-level access)
+ */
+export declare function PermissionsSection(): import("react/jsx-runtime").JSX.Element;
+export declare function PermissionsOnboardingSection({ onContinue, }: {
+    onContinue: (options?: {
+        allowPermissionBypass?: boolean;
+    }) => void;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PermissionsSection.d.ts.map

package/components/PermissionsSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PermissionsSection.d.ts","sourceRoot":"","sources":["../../src/components/PermissionsSection.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AA04BH,wBAAgB,kBAAkB,4CAUjC;AA2DD,wBAAgB,4BAA4B,CAAC,EAC3C,UAAU,GACX,EAAE;IACD,UAAU,EAAE,CAAC,OAAO,CAAC,EAAE;QAAE,qBAAqB,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;CACrE,2CAaA"}

package/components/PermissionsSection.js

@@ -0,0 +1,573 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * PermissionsSection — System permissions and capability toggles for Settings.
+ *
+ * Displays:
+ *   - System permission statuses (accessibility, screen-recording, microphone, camera)
+ *   - Shell access toggle (soft disable/enable)
+ *   - Capability toggles (browser, computeruse, vision) that depend on permissions
+ *
+ * Works cross-platform with platform-specific permission requirements:
+ *   - Electrobun desktop: OS-level permission prompts and system settings links
+ *   - Capacitor (mobile): Camera/mic/screen streaming permissions via native plugins
+ *   - Web: Informational message only (no OS-level access)
+ */
+import { Button } from "@elizaos/ui";
+import { Check } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { client, } from "../api";
+import { invokeDesktopBridgeRequest, subscribeDesktopBridgeEvent, } from "../bridge";
+import { hasRequiredOnboardingPermissions, isDesktopPlatform, isNative, isWebPlatform, } from "../platform";
+import { useApp } from "../state";
+import { PermissionIcon } from "./permissions/PermissionIcon";
+import { StreamingPermissionsOnboardingView, StreamingPermissionsSettingsView, } from "./permissions/StreamingPermissions";
+import { StatusBadge } from "./ui-badges";
+import { Switch } from "./ui-switch";
+const SYSTEM_PERMISSIONS = [
+    {
+        id: "accessibility",
+        name: "Accessibility",
+        description: "Control mouse, keyboard, and interact with other applications",
+        icon: "cursor",
+        platforms: ["darwin"],
+        requiredForFeatures: ["computeruse", "browser"],
+    },
+    {
+        id: "screen-recording",
+        name: "Screen Recording",
+        description: "Capture screen content for screenshots and vision",
+        icon: "monitor",
+        platforms: ["darwin"],
+        requiredForFeatures: ["computeruse", "vision"],
+    },
+    {
+        id: "microphone",
+        name: "Microphone",
+        description: "Voice input for talk mode and speech recognition",
+        icon: "mic",
+        platforms: ["darwin", "win32", "linux"],
+        requiredForFeatures: ["talkmode", "voice"],
+    },
+    {
+        id: "camera",
+        name: "Camera",
+        description: "Video input for vision and video capture",
+        icon: "camera",
+        platforms: ["darwin", "win32", "linux"],
+        requiredForFeatures: ["camera", "vision"],
+    },
+    {
+        id: "shell",
+        name: "Shell Access",
+        description: "Execute terminal commands and scripts",
+        icon: "terminal",
+        platforms: ["darwin", "win32", "linux"],
+        requiredForFeatures: ["shell"],
+    },
+];
+const CAPABILITIES = [
+    {
+        id: "browser",
+        label: "Browser Control",
+        description: "Automated web browsing and interaction",
+        requiredPermissions: ["accessibility"],
+    },
+    {
+        id: "computeruse",
+        label: "Computer Use",
+        description: "Full desktop control with mouse and keyboard",
+        requiredPermissions: ["accessibility", "screen-recording"],
+    },
+    {
+        id: "vision",
+        label: "Vision",
+        description: "Screen capture and visual analysis",
+        requiredPermissions: ["screen-recording"],
+    },
+    {
+        id: "coding-agent",
+        label: "Coding Agent Swarms",
+        description: "Orchestrate CLI coding agents (Claude Code, Gemini, Codex, Aider, Pi)",
+        requiredPermissions: [],
+    },
+];
+const PERMISSION_BADGE_LABELS = {
+    granted: { tone: "success", label: "Granted" },
+    denied: { tone: "danger", label: "Denied" },
+    "not-determined": { tone: "warning", label: "Not Set" },
+    restricted: { tone: "muted", label: "Restricted" },
+    "not-applicable": { tone: "muted", label: "N/A" },
+};
+function translateWithFallback(t, key, fallback) {
+    const value = t(key);
+    return !value || value === key ? fallback : value;
+}
+function getPermissionAction(t, id, status, canRequest) {
+    if (status === "granted" || status === "not-applicable") {
+        return null;
+    }
+    if (status === "not-determined" && canRequest) {
+        const label = id === "camera"
+            ? translateWithFallback(t, "permissionssection.CheckAccess", "Check Access")
+            : translateWithFallback(t, "permissionssection.Grant", "Grant");
+        return {
+            ariaLabelPrefix: label,
+            label,
+            type: "request",
+        };
+    }
+    const label = translateWithFallback(t, "permissionssection.OpenSettings", "Open Settings");
+    return {
+        ariaLabelPrefix: label,
+        label,
+        type: "settings",
+    };
+}
+function isDesktopMediaPermission(id) {
+    return id === "camera" || id === "microphone";
+}
+function mapRendererMediaPermissionState(state) {
+    if (state === "granted") {
+        return "granted";
+    }
+    if (state === "denied") {
+        return "denied";
+    }
+    if (state === "prompt") {
+        return "not-determined";
+    }
+    return null;
+}
+function getRendererMediaConstraints(id) {
+    return id === "camera" ? { video: true } : { audio: true };
+}
+async function queryRendererMediaPermission(id) {
+    if (typeof navigator === "undefined" || !navigator.permissions?.query) {
+        return null;
+    }
+    try {
+        const result = await navigator.permissions.query({
+            name: id,
+        });
+        return mapRendererMediaPermissionState(result?.state);
+    }
+    catch {
+        return null;
+    }
+}
+async function inferRendererMediaPermissionFromDevices(id) {
+    if (typeof navigator === "undefined" ||
+        !navigator.mediaDevices?.enumerateDevices) {
+        return null;
+    }
+    try {
+        const devices = await navigator.mediaDevices.enumerateDevices();
+        if (!Array.isArray(devices)) {
+            return null;
+        }
+        const kind = id === "camera" ? "videoinput" : "audioinput";
+        return devices.some((device) => device.kind === kind && Boolean(device.label?.trim()))
+            ? "granted"
+            : null;
+    }
+    catch {
+        return null;
+    }
+}
+async function probeRendererMediaPermission(id) {
+    const queriedStatus = await queryRendererMediaPermission(id);
+    if (queriedStatus === "granted" || queriedStatus === "denied") {
+        return queriedStatus;
+    }
+    const inferredStatus = await inferRendererMediaPermissionFromDevices(id);
+    if (inferredStatus) {
+        return inferredStatus;
+    }
+    return queriedStatus;
+}
+async function requestRendererMediaPermission(id) {
+    if (typeof navigator === "undefined" ||
+        !navigator.mediaDevices?.getUserMedia) {
+        return null;
+    }
+    try {
+        const stream = await navigator.mediaDevices.getUserMedia(getRendererMediaConstraints(id));
+        stream.getTracks().forEach((track) => {
+            track.stop();
+        });
+        return "granted";
+    }
+    catch {
+        return probeRendererMediaPermission(id);
+    }
+}
+async function reconcileRendererMediaPermissions(snapshot) {
+    let nextPermissions = snapshot.permissions;
+    let changed = false;
+    for (const id of ["camera", "microphone"]) {
+        const current = snapshot.permissions[id];
+        if (!current || current.status === "restricted") {
+            continue;
+        }
+        const rendererStatus = await probeRendererMediaPermission(id);
+        if (!rendererStatus) {
+            continue;
+        }
+        const nextCanRequest = rendererStatus === "not-determined";
+        if (current.status === rendererStatus &&
+            current.canRequest === nextCanRequest) {
+            continue;
+        }
+        if (!changed) {
+            nextPermissions = { ...snapshot.permissions };
+            changed = true;
+        }
+        nextPermissions[id] = {
+            ...current,
+            status: rendererStatus,
+            canRequest: nextCanRequest,
+            lastChecked: Date.now(),
+        };
+    }
+    return changed
+        ? {
+            ...snapshot,
+            permissions: nextPermissions,
+        }
+        : snapshot;
+}
+/** Individual permission row. */
+function PermissionRow({ def, status, canRequest, onRequest, onOpenSettings, isShell, shellEnabled, onToggleShell, }) {
+    const { t } = useApp();
+    const action = getPermissionAction(t, def.id, status, canRequest);
+    return (_jsxs("div", { className: "flex items-center gap-3 py-2.5 px-3 border-b border-[var(--border)] last:border-b-0", children: [_jsx(PermissionIcon, { icon: def.icon }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "font-semibold text-[13px]", children: def.name }), _jsx(StatusBadge, { label: PERMISSION_BADGE_LABELS[status].label, tone: PERMISSION_BADGE_LABELS[status].tone, withDot: true, className: "rounded-full font-semibold" })] }), _jsx("div", { className: "text-[11px] text-[var(--muted)] mt-0.5 truncate", children: def.description })] }), _jsxs("div", { className: "flex items-center gap-2", children: [isShell && onToggleShell && status !== "not-applicable" && (_jsx(Switch, { checked: shellEnabled, onChange: onToggleShell, title: shellEnabled ? "Disable shell access" : "Enable shell access", trackOnClass: "bg-[var(--accent)]", trackOffClass: "bg-[var(--border)]" })), !isShell && action && (_jsx(Button, { variant: "default", size: "sm", className: "h-auto text-[11px] py-1 px-2.5", onClick: action.type === "request" ? onRequest : onOpenSettings, "aria-label": `${action.ariaLabelPrefix} ${def.name}`, children: action.label }))] })] }));
+}
+/** Capability toggle button. */
+function CapabilityToggle({ cap, plugin, permissionsGranted, onToggle, }) {
+    const { t } = useApp();
+    const enabled = plugin?.enabled ?? false;
+    const available = plugin !== null;
+    const canEnable = permissionsGranted && available;
+    return (_jsxs("div", { className: `flex items-center gap-3 p-3 border border-[var(--border)] ${enabled ? "bg-[var(--accent)]/10" : "bg-[var(--card)]"}`, children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "font-semibold text-[13px]", children: cap.label }), !permissionsGranted && (_jsx("span", { className: "text-[10px] px-1.5 py-0.5 rounded bg-[var(--warning)]/20 text-[var(--warning)]", children: t("permissionssection.MissingPermissions") }))] }), _jsx("div", { className: "text-[11px] text-[var(--muted)] mt-0.5", children: cap.description })] }), _jsx(Switch, { checked: enabled, onChange: onToggle, disabled: !canEnable, disabledClassName: "opacity-50 cursor-not-allowed", trackOnClass: "bg-[var(--accent)]", trackOffClass: "bg-[var(--border)]", title: !available
+                    ? "Plugin not available"
+                    : !permissionsGranted
+                        ? "Grant required permissions first"
+                        : enabled
+                            ? "Disable"
+                            : "Enable" })] }));
+}
+function useDesktopPermissionsState() {
+    const [permissions, setPermissions] = useState(null);
+    const [platform, setPlatform] = useState("unknown");
+    const [loading, setLoading] = useState(true);
+    const [refreshing, setRefreshing] = useState(false);
+    const [shellEnabled, setShellEnabled] = useState(true);
+    const applySnapshot = useCallback((snapshot) => {
+        setPermissions(snapshot.permissions);
+        setPlatform(snapshot.platform);
+        setShellEnabled(snapshot.shellEnabled);
+    }, []);
+    const loadPermissionsSnapshot = useCallback(async (forceRefresh = false) => {
+        const [bridgedPermissions, bridgedShellEnabled, bridgedPlatform] = await Promise.all([
+            invokeDesktopBridgeRequest({
+                rpcMethod: "permissionsGetAll",
+                ipcChannel: "permissions:getAll",
+                params: forceRefresh ? { forceRefresh: true } : undefined,
+            }),
+            invokeDesktopBridgeRequest({
+                rpcMethod: "permissionsIsShellEnabled",
+                ipcChannel: "permissions:isShellEnabled",
+            }),
+            invokeDesktopBridgeRequest({
+                rpcMethod: "permissionsGetPlatform",
+                ipcChannel: "permissions:getPlatform",
+            }),
+        ]);
+        if (forceRefresh && bridgedPermissions === null) {
+            await client.refreshPermissions();
+        }
+        const permissions = bridgedPermissions ?? (await client.getPermissions());
+        const shellEnabled = bridgedShellEnabled === null
+            ? await client.isShellEnabled()
+            : bridgedShellEnabled;
+        const snapshot = {
+            permissions,
+            platform: bridgedPlatform ?? "unknown",
+            shellEnabled,
+        };
+        return reconcileRendererMediaPermissions(snapshot);
+    }, []);
+    const replaceSnapshot = useCallback(async (forceRefresh = false) => {
+        const snapshot = await loadPermissionsSnapshot(forceRefresh);
+        applySnapshot(snapshot);
+        return snapshot;
+    }, [applySnapshot, loadPermissionsSnapshot]);
+    useEffect(() => {
+        let cancelled = false;
+        void (async () => {
+            setLoading(true);
+            try {
+                const snapshot = await loadPermissionsSnapshot();
+                if (!cancelled) {
+                    applySnapshot(snapshot);
+                }
+            }
+            catch (err) {
+                if (!cancelled) {
+                    console.error("Failed to load permissions:", err);
+                    setPermissions(null);
+                    setPlatform("unknown");
+                }
+            }
+            finally {
+                if (!cancelled) {
+                    setLoading(false);
+                }
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [applySnapshot, loadPermissionsSnapshot]);
+    useEffect(() => {
+        return subscribeDesktopBridgeEvent({
+            rpcMessage: "permissionsChanged",
+            ipcChannel: "permissions:changed",
+            listener: () => {
+                void replaceSnapshot(true);
+            },
+        });
+    }, [replaceSnapshot]);
+    useEffect(() => {
+        if (typeof document === "undefined" || typeof window === "undefined") {
+            return;
+        }
+        const handleVisibilityOrFocus = () => {
+            if (document.visibilityState === "hidden") {
+                return;
+            }
+            void replaceSnapshot(true);
+        };
+        window.addEventListener("focus", handleVisibilityOrFocus);
+        document.addEventListener("visibilitychange", handleVisibilityOrFocus);
+        return () => {
+            window.removeEventListener("focus", handleVisibilityOrFocus);
+            document.removeEventListener("visibilitychange", handleVisibilityOrFocus);
+        };
+    }, [replaceSnapshot]);
+    const handleRefresh = useCallback(async () => {
+        setRefreshing(true);
+        try {
+            await replaceSnapshot(true);
+        }
+        catch (err) {
+            console.error("Failed to refresh permissions:", err);
+        }
+        finally {
+            setRefreshing(false);
+        }
+    }, [replaceSnapshot]);
+    const handleRequest = useCallback(async (id) => {
+        try {
+            if (isDesktopMediaPermission(id)) {
+                const rendererStatus = await requestRendererMediaPermission(id);
+                if (rendererStatus === "granted") {
+                    await replaceSnapshot(true);
+                    return;
+                }
+            }
+            const bridged = await invokeDesktopBridgeRequest({
+                rpcMethod: "permissionsRequest",
+                ipcChannel: "permissions:request",
+                params: { id },
+            });
+            if (bridged === null) {
+                await client.requestPermission(id);
+            }
+            await replaceSnapshot(true);
+        }
+        catch (err) {
+            console.error("Failed to request permission:", err);
+        }
+    }, [replaceSnapshot]);
+    const handleOpenSettings = useCallback(async (id) => {
+        try {
+            const opened = await invokeDesktopBridgeRequest({
+                rpcMethod: "permissionsOpenSettings",
+                ipcChannel: "permissions:openSettings",
+                params: { id },
+            });
+            if (opened === null) {
+                await client.openPermissionSettings(id);
+            }
+            await replaceSnapshot(true);
+        }
+        catch (err) {
+            console.error("Failed to open settings:", err);
+        }
+    }, [replaceSnapshot]);
+    const handleToggleShell = useCallback(async (enabled) => {
+        try {
+            const bridgeToggle = invokeDesktopBridgeRequest({
+                rpcMethod: "permissionsSetShellEnabled",
+                ipcChannel: "permissions:setShellEnabled",
+                params: { enabled },
+            });
+            await Promise.allSettled([
+                bridgeToggle,
+                client.setShellEnabled(enabled),
+            ]);
+            await replaceSnapshot(true);
+        }
+        catch (err) {
+            console.error("Failed to toggle shell:", err);
+        }
+    }, [replaceSnapshot]);
+    return {
+        handleOpenSettings,
+        handleRefresh,
+        handleRequest,
+        handleToggleShell,
+        loading,
+        permissions,
+        platform,
+        refreshing,
+        shellEnabled,
+    };
+}
+/** Mobile (Capacitor) permission UI for streaming to cloud sandbox. */
+function MobilePermissionsView() {
+    const { t } = useApp();
+    return (_jsx(StreamingPermissionsSettingsView, { mode: "mobile", testId: "mobile-permissions", title: translateWithFallback(t, "permissionssection.StreamingPermissions", "Streaming Permissions"), description: translateWithFallback(t, "permissionssection.MobileStreamingDesc", "Your device streams camera, microphone, and screen to your Eliza Cloud agent for processing.") }));
+}
+/** Web browser permission UI — uses getUserMedia. */
+function WebPermissionsView() {
+    const { t } = useApp();
+    return (_jsx(StreamingPermissionsSettingsView, { mode: "web", testId: "web-permissions-info", title: translateWithFallback(t, "permissionssection.BrowserPermissions", "Browser Permissions"), description: translateWithFallback(t, "permissionssection.WebStreamingDesc", "Grant browser access to your camera, microphone, and screen to stream to your agent.") }));
+}
+function DesktopPermissionsView() {
+    const { t } = useApp();
+    const { plugins, handlePluginToggle } = useApp();
+    const { handleOpenSettings, handleRefresh, handleRequest, handleToggleShell, loading, permissions, platform, refreshing, shellEnabled, } = useDesktopPermissionsState();
+    /** Check if all required permissions for a capability are granted. */
+    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]);
+    /** Filter permissions applicable to current platform. */
+    const applicablePermissions = SYSTEM_PERMISSIONS.filter((def) => {
+        if (!permissions)
+            return true;
+        const state = permissions[def.id];
+        return state?.status !== "not-applicable";
+    });
+    if (loading) {
+        return (_jsx("div", { className: "text-center py-6 text-[var(--muted)] text-xs", children: translateWithFallback(t, "permissionssection.LoadingPermissions", "Loading permissions...") }));
+    }
+    if (!permissions) {
+        return (_jsx("div", { className: "text-center py-6 text-[var(--muted)] text-xs", children: translateWithFallback(t, "permissionssection.UnableToLoadPermi", "Unable to load permissions.") }));
+    }
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex justify-between items-center mb-3", children: [_jsx("div", { className: "font-bold text-sm", children: translateWithFallback(t, "permissionssection.SystemPermissions", "System Permissions") }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "default", size: "sm", className: "h-auto text-[11px] py-1 px-2.5", 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: translateWithFallback(t, "permissionssection.AllowAll", "Allow All") }), _jsx(Button, { variant: "default", size: "sm", className: "h-auto text-[11px] py-1 px-2.5", onClick: handleRefresh, disabled: refreshing, children: refreshing ? "Refreshing..." : "Refresh" })] })] }), _jsx("div", { className: "border border-[var(--border)] bg-[var(--card)]", children: applicablePermissions.map((def) => {
+                            const state = permissions[def.id];
+                            return (_jsx(PermissionRow, { def: def, status: state?.status ?? "not-determined", 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("div", { className: "text-[11px] text-[var(--muted)] mt-2", children: platform === "darwin" ? (_jsx(_Fragment, { children: "macOS requires Accessibility permission for computer control. Open System Settings \u2192 Privacy & Security to grant access." })) : (_jsx(_Fragment, { children: "Grant permissions to enable features like voice input and computer control." })) })] }), _jsxs("div", { children: [_jsx("div", { className: "font-bold text-sm mb-3", children: t("appsview.Capabilities") }), _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));
+                        }) }), _jsx("div", { className: "text-[11px] text-[var(--muted)] mt-2", children: translateWithFallback(t, "permissionssection.CapabilitiesRequire", "Capabilities require the system permissions listed above.") })] })] }));
+}
+export function PermissionsSection() {
+    if (isWebPlatform()) {
+        return _jsx(WebPermissionsView, {});
+    }
+    if (isNative && !isDesktopPlatform()) {
+        return _jsx(MobilePermissionsView, {});
+    }
+    return _jsx(DesktopPermissionsView, {});
+}
+/**
+ * PermissionsOnboardingSection — Simplified view for onboarding wizard.
+ *
+ * Shows only essential permissions with clear CTAs.
+ */
+/** Onboarding section for mobile — streaming permissions to cloud sandbox. */
+function MobileOnboardingPermissions({ onContinue, }) {
+    const { t } = useApp();
+    return (_jsx(StreamingPermissionsOnboardingView, { mode: "mobile", onContinue: onContinue, testId: "mobile-onboarding-permissions", title: translateWithFallback(t, "permissionssection.StreamingPermissions", "Streaming Permissions"), description: translateWithFallback(t, "permissionssection.MobileOnboardingDesc", "Allow access so your device can stream to your cloud agent.") }));
+}
+/** Web onboarding — browser media permissions. */
+function WebOnboardingPermissions({ onContinue, }) {
+    const { t } = useApp();
+    return (_jsx(StreamingPermissionsOnboardingView, { mode: "web", onContinue: onContinue, testId: "web-onboarding-permissions", title: translateWithFallback(t, "permissionssection.BrowserPermissions", "Browser Permissions"), description: translateWithFallback(t, "permissionssection.WebOnboardingDesc", "Allow browser access so your camera, mic, and screen can stream to your agent.") }));
+}
+export function PermissionsOnboardingSection({ onContinue, }) {
+    // Web: no permissions needed
+    if (isWebPlatform()) {
+        return _jsx(WebOnboardingPermissions, { onContinue: onContinue });
+    }
+    // Mobile (Capacitor): streaming permissions
+    if (isNative && !isDesktopPlatform()) {
+        return _jsx(MobileOnboardingPermissions, { onContinue: onContinue });
+    }
+    // Desktop shell: existing permission flow
+    return _jsx(DesktopOnboardingPermissions, { onContinue: onContinue });
+}
+function DesktopOnboardingPermissions({ onContinue, }) {
+    const { t } = useApp();
+    const { handleOpenSettings, handleRequest, loading, permissions } = useDesktopPermissionsState();
+    /** Check if all critical permissions are granted (or not applicable). */
+    const allGranted = hasRequiredOnboardingPermissions(permissions);
+    if (loading) {
+        return (_jsx("div", { className: "text-center py-8", children: _jsx("div", { className: "text-[var(--muted)] text-sm", children: translateWithFallback(t, "permissionssection.CheckingPermissions", "Checking permissions...") }) }));
+    }
+    if (!permissions) {
+        return (_jsxs("div", { className: "text-center py-8", children: [_jsx("div", { className: "text-[var(--muted)] text-sm mb-4", children: translateWithFallback(t, "permissionssection.UnableToCheckPerm", "Unable to check permissions.") }), _jsx(Button, { variant: "default", onClick: () => onContinue({ allowPermissionBypass: true }), children: translateWithFallback(t, "permissionssection.Continue", "Continue") })] }));
+    }
+    const essentialPermissions = SYSTEM_PERMISSIONS.filter((def) => {
+        const state = permissions[def.id];
+        return state?.status !== "not-applicable" && def.id !== "shell";
+    });
+    return (_jsxs("div", { children: [_jsxs("div", { className: "text-center mb-6", children: [_jsx("div", { className: "text-xl font-bold mb-2", children: translateWithFallback(t, "permissionssection.SystemPermissions", "System Permissions") }), _jsx("div", { className: "text-[var(--muted)] text-sm", children: translateWithFallback(t, "permissionssection.GrantPermissionsTo", "Grant permissions to unlock desktop features.") })] }), _jsx("div", { className: "space-y-3 mb-6", 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);
+                    return (_jsxs("div", { "data-permission-id": def.id, className: `flex items-center gap-4 p-4 border ${isGranted
+                            ? "border-[var(--ok)] bg-[var(--ok)]/10"
+                            : "border-[var(--border)] bg-[var(--card)]"}`, children: [_jsx(PermissionIcon, { icon: def.icon }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "font-semibold text-sm", children: def.name }), _jsx("div", { className: "text-[11px] text-[var(--muted)]", children: def.description })] }), isGranted ? (_jsx(Check, { className: "w-4 h-4 text-[var(--ok)]" })) : action ? (_jsx(Button, { variant: "default", size: "sm", className: "h-auto text-xs py-1.5 px-3", onClick: () => action.type === "request"
+                                    ? handleRequest(def.id)
+                                    : handleOpenSettings(def.id), "aria-label": `${action.ariaLabelPrefix} ${def.name}`, children: action.label })) : null] }, def.id));
+                }) }), !allGranted && (_jsx("div", { className: "flex justify-center mb-4", children: _jsx(Button, { variant: "default", size: "sm", className: "h-auto text-xs py-2 px-6 w-full max-w-xs bg-accent border-accent text-accent-foreground", onClick: async () => {
+                        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);
+                        }
+                    }, children: translateWithFallback(t, "permissionssection.AllowAllPermission", "Allow All Permissions") }) })), _jsxs("div", { className: "flex flex-wrap justify-center gap-3", children: [_jsx(Button, { variant: "outline", size: "sm", className: "h-auto min-w-[8.5rem] px-4 py-2 text-[11px] leading-tight opacity-70", onClick: () => onContinue({ allowPermissionBypass: true }), children: translateWithFallback(t, "permissionssection.SkipForNow", "Skip for Now") }), allGranted && (_jsx(Button, { variant: "default", size: "sm", className: "h-auto min-w-[8.5rem] bg-accent border-accent px-4 py-2 text-[11px] leading-tight text-accent-foreground", onClick: () => onContinue(), children: translateWithFallback(t, "permissionssection.Continue", "Continue") }))] })] }));
+}

package/components/PluginsPageView.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Plugins view — single unified plugin management surface.
+ */
+export declare function PluginsPageView(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PluginsPageView.d.ts.map

package/components/PluginsPageView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PluginsPageView.d.ts","sourceRoot":"","sources":["../../src/components/PluginsPageView.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAIH,wBAAgB,eAAe,4CAE9B"}

package/components/PluginsPageView.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Plugins view — single unified plugin management surface.
+ */
+import { PluginsView } from "./PluginsView";
+export function PluginsPageView() {
+    return _jsx(PluginsView, { inModal: true });
+}