@compose-market/theme 0.0.1 → 0.0.3

package/dist/components/backpack.js

@@ -0,0 +1,905 @@
+/**
+ * Backpack Component
+ *
+ * User's personal permission and account management popup.
+ * Two tabs:
+ * - Permissions: Toggle browser permissions (filesystem, camera, mic, etc.)
+ * - Connected Accounts: Connect/disconnect external accounts via Composio
+ *
+ * OAuth is handled entirely by Composio as a credential broker —
+ * the app never sees or stores user credentials. Composio manages
+ * the full OAuth handshake, token storage, and refresh lifecycle.
+ */
+import { useState, useCallback, useEffect, useRef, useMemo, Fragment } from "react";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Button } from "@/components/ui/button";
+import { Switch } from "@/components/ui/switch";
+import { Badge } from "@/components/ui/badge";
+import { useToast } from "@/hooks/use-toast";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { Backpack, FolderOpen, Camera, Mic, MapPin, Clipboard, Bell, Link2, Shield, Check, Loader2, ExternalLink, RefreshCw, Unplug, Search, X, MessageCircle, Send, QrCode, Smartphone, ArrowLeft, } from "lucide-react";
+const API_BASE = (import.meta.env.VITE_API_URL || "https://api.compose.market").replace(/\/+$/, "");
+const SOCKET_BASE = (import.meta.env.VITE_SOCKET_URL || "wss://services.compose.market/socket").replace(/\/+$/, "");
+// =============================================================================
+// Permission Definitions
+// =============================================================================
+const PERMISSION_TYPES = [
+    {
+        type: "filesystem",
+        label: "File System",
+        description: "Access files and folders on your device",
+        icon: <FolderOpen className="w-4 h-4"/>,
+    },
+    {
+        type: "camera",
+        label: "Camera",
+        description: "Use your camera for photos and video",
+        icon: <Camera className="w-4 h-4"/>,
+    },
+    {
+        type: "microphone",
+        label: "Microphone",
+        description: "Record audio with your microphone",
+        icon: <Mic className="w-4 h-4"/>,
+    },
+    {
+        type: "geolocation",
+        label: "Location",
+        description: "Access your current location",
+        icon: <MapPin className="w-4 h-4"/>,
+    },
+    {
+        type: "clipboard",
+        label: "Clipboard",
+        description: "Read and write to your clipboard",
+        icon: <Clipboard className="w-4 h-4"/>,
+    },
+    {
+        type: "notifications",
+        label: "Notifications",
+        description: "Send you desktop notifications",
+        icon: <Bell className="w-4 h-4"/>,
+    },
+];
+// =============================================================================
+// Featured Provider Definitions (Composio toolkit slugs)
+// =============================================================================
+const FEATURED_PROVIDERS = [
+    {
+        slug: "gmail",
+        name: "Google (Gmail)",
+        logo: "https://logos.composio.dev/api/gmail",
+        color: "#4285F4",
+        description: "Email, Calendar, Drive access",
+    },
+    {
+        slug: "notion",
+        name: "Notion",
+        logo: "https://logos.composio.dev/api/notion",
+        color: "#000000",
+        description: "Pages, databases, content",
+    },
+    {
+        slug: "twitter",
+        name: "X (Twitter)",
+        logo: "https://logos.composio.dev/api/twitter",
+        color: "#000000",
+        description: "Tweets, DMs, analytics",
+    },
+    {
+        slug: "github",
+        name: "GitHub",
+        logo: "https://logos.composio.dev/api/github",
+        color: "#24292F",
+        description: "Repos, issues, pull requests",
+    },
+    {
+        slug: "discord",
+        name: "Discord",
+        logo: "https://logos.composio.dev/api/discord",
+        color: "#5865F2",
+        description: "Servers, channels, messaging",
+    },
+    {
+        slug: "slack",
+        name: "Slack",
+        logo: "https://logos.composio.dev/api/slack",
+        color: "#4A154B",
+        description: "Channels, messages, files",
+    },
+    {
+        slug: "linkedin",
+        name: "LinkedIn",
+        logo: "https://logos.composio.dev/api/linkedin",
+        color: "#0A66C2",
+        description: "Profile, connections, posts",
+    },
+    {
+        slug: "spotify",
+        name: "Spotify",
+        logo: "https://logos.composio.dev/api/spotify",
+        color: "#1DB954",
+        description: "Playlists, tracks, playback",
+    },
+    {
+        slug: "telegram",
+        name: "Telegram",
+        logo: "https://logos.composio.dev/api/telegram",
+        color: "#229ED9",
+        description: "Bot messaging & notifications",
+        connectionType: "channel",
+    },
+    {
+        slug: "whatsapp",
+        name: "WhatsApp",
+        logo: "https://logos.composio.dev/api/whatsapp",
+        color: "#25D366",
+        description: "Scan QR to link your account",
+        connectionType: "channel",
+    },
+];
+export function BackpackDialog({ userId, open, onOpenChange, showTrigger = true }) {
+    const { toast } = useToast();
+    const isMobile = useIsMobile();
+    const [isOpen, setIsOpen] = useState(false);
+    const [activeTab, setActiveTab] = useState("permissions");
+    const [loadingPermission, setLoadingPermission] = useState(null);
+    const [loadingAccount, setLoadingAccount] = useState(null);
+    const [refreshing, setRefreshing] = useState(false);
+    // Search state
+    const [searchQuery, setSearchQuery] = useState("");
+    const [searchResults, setSearchResults] = useState([]);
+    const [searching, setSearching] = useState(false);
+    // WhatsApp connect screen state
+    const [whatsappScreen, setWhatsappScreen] = useState(null);
+    const [whatsappQr, setWhatsappQr] = useState(null);
+    const [whatsappQrLoading, setWhatsappQrLoading] = useState(false);
+    const [whatsappPairingCode, setWhatsappPairingCode] = useState(null);
+    const [whatsappPhoneInput, setWhatsappPhoneInput] = useState("");
+    const whatsappWsRef = useRef(null);
+    const searchDebounceRef = useRef(null);
+    // Permission states (from sessionStorage)
+    const [permissions, setPermissions] = useState(() => {
+        const stored = {};
+        PERMISSION_TYPES.forEach(p => {
+            stored[p.type] = sessionStorage.getItem(`consent_${p.type}`) === "granted";
+        });
+        return stored;
+    });
+    // Connection states fetched from Composio via backend
+    const [connections, setConnections] = useState({});
+    const handleOpen = open !== undefined ? open : isOpen;
+    const handleOpenChange = onOpenChange || setIsOpen;
+    // Effective userId — fallback to anonymous session id
+    const effectiveUserId = userId || sessionStorage.getItem("composio_anon_id") || (() => {
+        const id = `anon_${crypto.randomUUID()}`;
+        sessionStorage.setItem("composio_anon_id", id);
+        return id;
+    })();
+    // ==========================================================================
+    // Fetch Connection Status from Backend
+    // ==========================================================================
+    const fetchConnections = useCallback(async () => {
+        try {
+            setRefreshing(true);
+            const res = await fetch(`${API_BASE}/api/backpack/connections?userId=${encodeURIComponent(effectiveUserId)}`);
+            if (!res.ok) {
+                console.warn("[Backpack] Failed to fetch connections:", res.status);
+                return;
+            }
+            const data = await res.json();
+            const connMap = {};
+            // Map Composio connections to our featured providers
+            if (data.connections) {
+                for (const conn of data.connections) {
+                    connMap[conn.slug] = conn;
+                }
+            }
+            setConnections(connMap);
+        }
+        catch (err) {
+            console.warn("[Backpack] Could not fetch connections:", err);
+        }
+        finally {
+            setRefreshing(false);
+        }
+    }, [effectiveUserId]);
+    // Fetch connections when the accounts tab is opened
+    useEffect(() => {
+        if (handleOpen && activeTab === "accounts") {
+            fetchConnections();
+        }
+    }, [handleOpen, activeTab, fetchConnections]);
+    // ==========================================================================
+    // Toolkit Search
+    // ==========================================================================
+    const searchToolkits = useCallback(async (query) => {
+        if (!query.trim()) {
+            setSearchResults([]);
+            return;
+        }
+        setSearching(true);
+        try {
+            const res = await fetch(`${API_BASE}/api/backpack/toolkits?search=${encodeURIComponent(query)}&limit=15`);
+            if (res.ok) {
+                const data = await res.json();
+                setSearchResults(data.toolkits || []);
+            }
+        }
+        catch (err) {
+            console.warn("[Backpack] Search error:", err);
+        }
+        finally {
+            setSearching(false);
+        }
+    }, []);
+    // Debounced search
+    useEffect(() => {
+        if (searchDebounceRef.current) {
+            clearTimeout(searchDebounceRef.current);
+        }
+        if (!searchQuery.trim()) {
+            setSearchResults([]);
+            return;
+        }
+        searchDebounceRef.current = setTimeout(() => {
+            searchToolkits(searchQuery);
+        }, 300);
+        return () => {
+            if (searchDebounceRef.current)
+                clearTimeout(searchDebounceRef.current);
+        };
+    }, [searchQuery, searchToolkits]);
+    // Convert a search result to a ProviderDisplay for the connect flow
+    const toolkitToProvider = useCallback((tk) => ({
+        slug: tk.slug,
+        name: tk.name,
+        logo: tk.logo,
+        color: "#6366f1",
+        description: tk.description?.substring(0, 60) || tk.categories.join(", ") || "Connect account",
+    }), []);
+    // ==========================================================================
+    // Permission Handlers
+    // ==========================================================================
+    const requestPermission = useCallback(async (type) => {
+        setLoadingPermission(type);
+        try {
+            let granted = false;
+            switch (type) {
+                case "filesystem":
+                    if ("showDirectoryPicker" in window) {
+                        await window.showDirectoryPicker();
+                        granted = true;
+                    }
+                    else {
+                        throw new Error("File System Access API not supported");
+                    }
+                    break;
+                case "camera":
+                    await navigator.mediaDevices.getUserMedia({ video: true });
+                    granted = true;
+                    break;
+                case "microphone":
+                    await navigator.mediaDevices.getUserMedia({ audio: true });
+                    granted = true;
+                    break;
+                case "geolocation":
+                    await new Promise((resolve, reject) => {
+                        navigator.geolocation.getCurrentPosition(() => resolve(), reject);
+                    });
+                    granted = true;
+                    break;
+                case "clipboard":
+                    await navigator.clipboard.readText();
+                    granted = true;
+                    break;
+                case "notifications":
+                    const result = await Notification.requestPermission();
+                    granted = result === "granted";
+                    break;
+            }
+            if (granted) {
+                sessionStorage.setItem(`consent_${type}`, "granted");
+                setPermissions(prev => ({ ...prev, [type]: true }));
+                toast({ title: "Permission Granted", description: `${type} access enabled.` });
+            }
+        }
+        catch (err) {
+            toast({
+                title: "Permission Denied",
+                description: `Could not get ${type} access.`,
+                variant: "destructive"
+            });
+        }
+        finally {
+            setLoadingPermission(null);
+        }
+    }, [toast]);
+    const revokePermission = useCallback((type) => {
+        sessionStorage.removeItem(`consent_${type}`);
+        setPermissions(prev => ({ ...prev, [type]: false }));
+        toast({ title: "Permission Revoked", description: `${type} access disabled.` });
+    }, [toast]);
+    // ==========================================================================
+    // OAuth Handlers — Composio Credential Broker
+    // ==========================================================================
+    const connectAccount = useCallback(async (provider) => {
+        setLoadingAccount(provider.slug);
+        try {
+            // Step 1: Call backend to get OAuth redirect URL from Composio
+            const res = await fetch(`${API_BASE}/api/backpack/connect`, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({
+                    userId: effectiveUserId,
+                    toolkit: provider.slug,
+                }),
+            });
+            if (!res.ok) {
+                const err = await res.json().catch(() => ({}));
+                throw new Error(err.error || `Failed to initiate connection (${res.status})`);
+            }
+            const { redirectUrl } = await res.json();
+            if (!redirectUrl) {
+                throw new Error("No redirect URL returned from server");
+            }
+            // Step 2: Open Composio's hosted auth page in a popup
+            window.open(redirectUrl, `Connect ${provider.name}`, "width=600,height=700,scrollbars=yes");
+            // Step 3: Poll the BACKEND for connection status instead of
+            // checking popup.closed (which triggers COOP errors on cross-origin popups)
+            toast({
+                title: "Authentication Started",
+                description: `Complete authentication in the popup, then click Refresh.`,
+            });
+            // Auto-poll status every 3 seconds for up to 2 minutes
+            let attempts = 0;
+            const maxAttempts = 40; // 40 × 3s = 2min
+            const pollInterval = setInterval(async () => {
+                attempts++;
+                try {
+                    const statusRes = await fetch(`${API_BASE}/api/backpack/status/${encodeURIComponent(provider.slug)}?userId=${encodeURIComponent(effectiveUserId)}`);
+                    if (statusRes.ok) {
+                        const statusData = await statusRes.json();
+                        if (statusData.connected) {
+                            clearInterval(pollInterval);
+                            setConnections(prev => ({
+                                ...prev,
+                                [provider.slug]: {
+                                    slug: provider.slug,
+                                    name: provider.name,
+                                    connected: true,
+                                    accountId: statusData.accountId,
+                                },
+                            }));
+                            toast({
+                                title: "Connected!",
+                                description: `${provider.name} account connected successfully.`,
+                            });
+                            setLoadingAccount(null);
+                        }
+                    }
+                }
+                catch {
+                    // Ignore poll errors
+                }
+                if (attempts >= maxAttempts) {
+                    clearInterval(pollInterval);
+                    setLoadingAccount(null);
+                }
+            }, 3000);
+        }
+        catch (err) {
+            console.error("[Backpack] Connection error:", err);
+            toast({
+                title: "Connection Failed",
+                description: err instanceof Error ? err.message : "Could not connect account.",
+                variant: "destructive"
+            });
+            setLoadingAccount(null);
+        }
+    }, [effectiveUserId, toast]);
+    // ==========================================================================
+    // Channel-Based Connection (Telegram)
+    // ==========================================================================
+    const connectTelegram = useCallback(async () => {
+        setLoadingAccount("telegram");
+        try {
+            // Generate a deep link
+            const res = await fetch(`${API_BASE}/api/backpack/telegram/link`, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ userId: effectiveUserId }),
+            });
+            if (!res.ok) {
+                const err = await res.json().catch(() => ({}));
+                throw new Error(err.error || `Failed to generate link (${res.status})`);
+            }
+            const { deepLinkUrl } = await res.json();
+            // Open Telegram deep link
+            window.open(deepLinkUrl, "_blank");
+            toast({
+                title: "Open Telegram",
+                description: 'Tap "Start" in Telegram to connect your account.',
+            });
+            // Poll for binding confirmation
+            let attempts = 0;
+            const maxAttempts = 40; // 40 × 3s = 2min
+            const pollInterval = setInterval(async () => {
+                attempts++;
+                try {
+                    const statusRes = await fetch(`${API_BASE}/api/backpack/telegram/status?userId=${encodeURIComponent(effectiveUserId)}`);
+                    if (statusRes.ok) {
+                        const statusData = await statusRes.json();
+                        if (statusData.bound) {
+                            clearInterval(pollInterval);
+                            setConnections(prev => ({
+                                ...prev,
+                                telegram: {
+                                    slug: "telegram",
+                                    name: "Telegram",
+                                    connected: true,
+                                },
+                            }));
+                            toast({
+                                title: "Connected!",
+                                description: "Telegram bot connected successfully.",
+                            });
+                            setLoadingAccount(null);
+                        }
+                    }
+                }
+                catch {
+                    // Ignore poll errors
+                }
+                if (attempts >= maxAttempts) {
+                    clearInterval(pollInterval);
+                    setLoadingAccount(null);
+                }
+            }, 3000);
+        }
+        catch (err) {
+            console.error("[Backpack] Telegram connection error:", err);
+            toast({
+                title: "Connection Failed",
+                description: err instanceof Error ? err.message : "Could not connect Telegram.",
+                variant: "destructive",
+            });
+            setLoadingAccount(null);
+        }
+    }, [effectiveUserId, toast]);
+    // ==========================================================================
+    // Channel-Based Connection (WhatsApp via Baileys WebSocket)
+    // ==========================================================================
+    const connectWhatsApp = useCallback(() => {
+        // Close any existing WS connection
+        if (whatsappWsRef.current) {
+            whatsappWsRef.current.close();
+            whatsappWsRef.current = null;
+        }
+        setWhatsappScreen("qr");
+        setWhatsappQr(null);
+        setWhatsappQrLoading(true);
+        setLoadingAccount("whatsapp");
+        const wsUrl = `${SOCKET_BASE}/whatsapp?userId=${encodeURIComponent(effectiveUserId)}`;
+        console.log(`[Backpack] Connecting WhatsApp WebSocket: ${wsUrl}`);
+        const ws = new WebSocket(wsUrl);
+        whatsappWsRef.current = ws;
+        ws.onmessage = (event) => {
+            try {
+                const msg = JSON.parse(event.data);
+                console.log(`[Backpack] WhatsApp WS message:`, msg.type);
+                switch (msg.type) {
+                    case "qr":
+                        setWhatsappQr(msg.qr);
+                        setWhatsappQrLoading(false);
+                        break;
+                    case "connected":
+                        setWhatsappScreen(null);
+                        setWhatsappQr(null);
+                        setConnections(prev => ({
+                            ...prev,
+                            whatsapp: {
+                                slug: "whatsapp",
+                                name: "WhatsApp",
+                                connected: true,
+                            },
+                        }));
+                        toast({
+                            title: "Connected!",
+                            description: `WhatsApp linked successfully${msg.phoneNumber ? ` (${msg.phoneNumber})` : ""}.`,
+                        });
+                        setLoadingAccount(null);
+                        break;
+                    case "already_connected":
+                        setWhatsappScreen(null);
+                        setConnections(prev => ({
+                            ...prev,
+                            whatsapp: {
+                                slug: "whatsapp",
+                                name: "WhatsApp",
+                                connected: true,
+                            },
+                        }));
+                        toast({
+                            title: "Already Connected",
+                            description: "WhatsApp is already linked.",
+                        });
+                        setLoadingAccount(null);
+                        break;
+                    case "error":
+                        console.error(`[Backpack] WhatsApp error:`, msg.message);
+                        toast({
+                            title: "Connection Failed",
+                            description: msg.message || "Could not connect WhatsApp.",
+                            variant: "destructive",
+                        });
+                        setWhatsappScreen(null);
+                        setWhatsappQrLoading(false);
+                        setLoadingAccount(null);
+                        break;
+                    case "disconnected":
+                        setWhatsappScreen(null);
+                        setWhatsappQr(null);
+                        setLoadingAccount(null);
+                        break;
+                    case "reconnecting":
+                        setWhatsappQrLoading(true);
+                        setWhatsappQr(null);
+                        break;
+                    case "pairing_code_pending":
+                        setWhatsappPairingCode(null);
+                        setWhatsappQr(null);
+                        setWhatsappQrLoading(true);
+                        break;
+                    case "pairing_code":
+                        setWhatsappPairingCode(msg.code);
+                        setWhatsappQrLoading(false);
+                        break;
+                }
+            }
+            catch {
+                // Ignore malformed messages
+            }
+        };
+        ws.onerror = () => {
+            console.error("[Backpack] WhatsApp WebSocket error");
+            toast({
+                title: "Connection Error",
+                description: "Could not reach WhatsApp service. Try again.",
+                variant: "destructive",
+            });
+            setWhatsappScreen(null);
+            setWhatsappQrLoading(false);
+            setLoadingAccount(null);
+        };
+        ws.onclose = () => {
+            console.log("[Backpack] WhatsApp WebSocket closed");
+            whatsappWsRef.current = null;
+        };
+    }, [effectiveUserId, toast]);
+    const cancelWhatsApp = useCallback(() => {
+        if (whatsappWsRef.current) {
+            whatsappWsRef.current.close();
+            whatsappWsRef.current = null;
+        }
+        setWhatsappScreen(null);
+        setWhatsappQr(null);
+        setWhatsappQrLoading(false);
+        setWhatsappPairingCode(null);
+        setWhatsappPhoneInput("");
+        setLoadingAccount(null);
+    }, []);
+    const disconnectAccount = useCallback(async (provider) => {
+        setLoadingAccount(provider.slug);
+        try {
+            const res = await fetch(`${API_BASE}/api/backpack/disconnect`, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({
+                    userId: effectiveUserId,
+                    toolkit: provider.slug,
+                }),
+            });
+            if (!res.ok) {
+                const err = await res.json().catch(() => ({}));
+                throw new Error(err.error || `Failed to disconnect (${res.status})`);
+            }
+            // Update local state
+            setConnections(prev => ({
+                ...prev,
+                [provider.slug]: { ...prev[provider.slug], connected: false, accountId: undefined },
+            }));
+            toast({
+                title: "Disconnected",
+                description: `${provider.name} account disconnected.`,
+            });
+        }
+        catch (err) {
+            console.error("[Backpack] Disconnect error:", err);
+            toast({
+                title: "Disconnect Failed",
+                description: err instanceof Error ? err.message : "Could not disconnect account.",
+                variant: "destructive"
+            });
+        }
+        finally {
+            setLoadingAccount(null);
+        }
+    }, [effectiveUserId, toast]);
+    // ==========================================================================
+    // Filtered search results (exclude featured providers from search)
+    // ==========================================================================
+    const featuredSlugs = useMemo(() => new Set(FEATURED_PROVIDERS.map(p => p.slug)), []);
+    const filteredSearchResults = useMemo(() => searchResults.filter(tk => !featuredSlugs.has(tk.slug)), [searchResults, featuredSlugs]);
+    // ==========================================================================
+    // Render
+    // ==========================================================================
+    const grantedPermissionsCount = Object.values(permissions).filter(Boolean).length;
+    const connectedAccountsCount = Object.values(connections).filter(c => c.connected).length;
+    // Provider card renderer — shared between featured and search results
+    const renderProviderCard = (provider) => {
+        const connection = connections[provider.slug];
+        const isConnected = connection?.connected ?? false;
+        const isLoading = loadingAccount === provider.slug;
+        const isDisabled = provider.connectionType === "disabled";
+        const isChannel = provider.connectionType === "channel";
+        return (<Fragment key={provider.slug}>
+                <div className={`flex items-center justify-between p-3 rounded-lg bg-zinc-900/50 border border-zinc-800 ${isDisabled ? "opacity-60" : ""}`}>
+                    <div className="flex items-center gap-3">
+                        <div className="w-10 h-10 rounded-lg flex items-center justify-center overflow-hidden" style={{ backgroundColor: `${provider.color}15` }}>
+                            <img src={provider.logo} alt={provider.name} className="w-6 h-6 object-contain" onError={(e) => {
+                e.target.style.display = 'none';
+            }}/>
+                        </div>
+                        <div className="min-w-0 flex-1">
+                            <div className="text-sm font-medium text-zinc-200 truncate flex items-center gap-1.5">
+                                {provider.name}
+                                {provider.badge && (<Badge variant="outline" className="text-[10px] px-1 py-0 border-zinc-600 text-zinc-400 font-normal">
+                                        {provider.badge}
+                                    </Badge>)}
+                            </div>
+                            <div className="text-xs text-zinc-500 truncate">
+                                {isConnected ? (<span className="flex items-center gap-1 text-green-400">
+                                        <Check className="w-3 h-3"/> Connected
+                                    </span>) : (provider.description)}
+                            </div>
+                        </div>
+                    </div>
+
+                    {isDisabled ? (<Button variant="outline" size="sm" disabled className="shrink-0 ml-2 opacity-50">
+                            <MessageCircle className="w-3 h-3 mr-1"/>
+                            Soon
+                        </Button>) : (<Button variant={isConnected ? "destructive" : "outline"} size="sm" disabled={isLoading} className="shrink-0 ml-2" onClick={() => {
+                    if (isConnected) {
+                        disconnectAccount(provider);
+                    }
+                    else if (isChannel && provider.slug === "telegram") {
+                        connectTelegram();
+                    }
+                    else if (isChannel && provider.slug === "whatsapp") {
+                        connectWhatsApp();
+                    }
+                    else {
+                        connectAccount(provider);
+                    }
+                }}>
+                            {isLoading ? (<Loader2 className="w-4 h-4 animate-spin"/>) : isConnected ? (<>
+                                    <Unplug className="w-3 h-3 mr-1"/>
+                                    Disconnect
+                                </>) : isChannel && provider.slug === "whatsapp" ? (<>
+                                    <QrCode className="w-3 h-3 mr-1"/>
+                                    Scan QR
+                                </>) : isChannel ? (<>
+                                    <Send className="w-3 h-3 mr-1"/>
+                                    Link Bot
+                                </>) : (<>
+                                    <ExternalLink className="w-3 h-3 mr-1"/>
+                                    Connect
+                                </>)}
+                        </Button>)}
+                </div>
+
+                {/* WhatsApp QR Code inline display */}
+                {/* Removed inline QR display */}
+            </Fragment>);
+    };
+    return (<Dialog open={handleOpen} onOpenChange={handleOpenChange}>
+            {showTrigger && (<DialogTrigger asChild>
+                    <Button variant="outline" size="sm" className="gap-2">
+                        <Backpack className="w-4 h-4"/>
+                        Backpack
+                    </Button>
+                </DialogTrigger>)}
+
+            <DialogContent className="sm:max-w-lg max-h-[85vh] overflow-hidden flex flex-col">
+                <DialogHeader>
+                    <DialogTitle className="flex items-center gap-2">
+                        <Backpack className="w-5 h-5 text-fuchsia-400"/>
+                        Your Backpack
+                    </DialogTitle>
+                    <DialogDescription>
+                        Manage permissions and connected accounts for AI agents.
+                    </DialogDescription>
+                </DialogHeader>
+
+                {/* ========== WhatsApp Dedicated Connection Screen ========== */}
+                {whatsappScreen ? (<div className="flex-1 flex flex-col gap-4 py-2">
+                        <Button variant="ghost" size="sm" className="self-start gap-1.5 text-zinc-400 hover:text-zinc-200 -ml-2" onClick={cancelWhatsApp}>
+                            <ArrowLeft className="w-4 h-4"/>
+                            Back
+                        </Button>
+
+                        <div className="flex items-center gap-3 mb-2">
+                            <div className="w-12 h-12 rounded-xl flex items-center justify-center" style={{ backgroundColor: "#25D36615" }}>
+                                <img src="https://logos.composio.dev/api/whatsapp" alt="WhatsApp" className="w-7 h-7 object-contain"/>
+                            </div>
+                            <div>
+                                <h3 className="text-base font-semibold text-zinc-100">Connect WhatsApp</h3>
+                                <p className="text-xs text-zinc-400">
+                                    {isMobile
+                ? "Link your WhatsApp account"
+                : "Scan with your phone to link"}
+                                </p>
+                            </div>
+                        </div>
+
+                        <div className="flex flex-col items-center gap-4 py-2">
+                            {isMobile ? (
+            /* ===== Mobile: Phone pairing code ===== */
+            whatsappPairingCode ? (<div className="flex flex-col items-center gap-4 py-4">
+                                        <div className="text-sm text-zinc-300 text-center">
+                                            Enter this code in WhatsApp to link:
+                                        </div>
+                                        <div className="font-mono text-3xl font-bold tracking-[0.3em] text-green-400 bg-zinc-900 px-6 py-4 rounded-xl border border-zinc-700">
+                                            {whatsappPairingCode}
+                                        </div>
+                                        <p className="text-xs text-zinc-500 text-center">
+                                            WhatsApp → Linked Devices → Link a Device
+                                        </p>
+                                        <div className="flex items-center gap-2 text-xs text-zinc-600">
+                                            <Loader2 className="w-3 h-3 animate-spin"/>
+                                            Waiting for pairing...
+                                        </div>
+                                    </div>) : whatsappQrLoading ? (<div className="flex flex-col items-center gap-3 py-8">
+                                        <Loader2 className="w-10 h-10 animate-spin text-green-500"/>
+                                        <span className="text-sm text-zinc-400">Generating pairing code...</span>
+                                    </div>) : (<form className="flex flex-col items-center gap-4 py-2 w-full max-w-xs" onSubmit={(e) => {
+                    e.preventDefault();
+                    const phone = whatsappPhoneInput.replace(/[^0-9]/g, "");
+                    if (phone.length < 10)
+                        return;
+                    if (whatsappWsRef.current?.readyState === WebSocket.OPEN) {
+                        whatsappWsRef.current.send(JSON.stringify({ type: "pair_phone", phone }));
+                    }
+                }}>
+                                        <p className="text-xs text-zinc-500 text-center leading-relaxed">
+                                            Enter your full number with country code (no + or spaces).
+                                            It's only used to generate a one-time linking code.
+                                            Compose never stores or shares your data.
+                                        </p>
+                                        <input type="tel" placeholder="e.g. 14155551234" value={whatsappPhoneInput} onChange={(e) => setWhatsappPhoneInput(e.target.value)} className="w-full px-4 py-2.5 rounded-lg bg-zinc-900 border border-zinc-700 text-zinc-100 text-center font-mono text-lg placeholder:text-zinc-600 focus:outline-none focus:border-green-500 transition-colors" autoFocus/>
+                                        <Button type="submit" disabled={whatsappPhoneInput.replace(/[^0-9]/g, "").length < 10} className="w-full bg-green-600 hover:bg-green-700 text-white">
+                                            Get Linking Code
+                                        </Button>
+                                    </form>)) : (
+            /* ===== Desktop: QR code scanning ===== */
+            <>
+                                    {whatsappQrLoading ? (<div className="flex flex-col items-center gap-3 py-8">
+                                            <Loader2 className="w-10 h-10 animate-spin text-green-500"/>
+                                            <span className="text-sm text-zinc-400">Generating QR code...</span>
+                                        </div>) : whatsappQr ? (<>
+                                            <div className="p-4 rounded-xl bg-white">
+                                                <img src={whatsappQr.startsWith("data:") ? whatsappQr : `data:image/png;base64,${whatsappQr}`} alt="Scan with WhatsApp" className="w-52 h-52 object-contain"/>
+                                            </div>
+                                            <div className="flex flex-col items-center gap-1.5">
+                                                <div className="flex items-center gap-2 text-sm text-zinc-300">
+                                                    <Smartphone className="w-4 h-4 text-green-400"/>
+                                                    Scan with WhatsApp
+                                                </div>
+                                                <p className="text-xs text-zinc-500 text-center">
+                                                    Open WhatsApp → Settings → Linked Devices → Link a Device
+                                                </p>
+                                            </div>
+                                            <div className="flex items-center gap-2 text-xs text-zinc-600 mt-2">
+                                                <Loader2 className="w-3 h-3 animate-spin"/>
+                                                Waiting for scan...
+                                            </div>
+                                        </>) : (<div className="text-sm text-zinc-400 py-4">
+                                            QR code not available. Please try again.
+                                        </div>)}
+                                </>)}
+                        </div>
+                    </div>) : (<>
+
+                        <Tabs value={activeTab} onValueChange={setActiveTab} className="flex-1 flex flex-col overflow-hidden">
+                            <TabsList className="grid w-full grid-cols-2">
+                                <TabsTrigger value="permissions" className="gap-2">
+                                    <Shield className="w-4 h-4"/>
+                                    Permissions
+                                    {grantedPermissionsCount > 0 && (<Badge variant="secondary" className="ml-1 text-xs px-1.5">
+                                            {grantedPermissionsCount}
+                                        </Badge>)}
+                                </TabsTrigger>
+                                <TabsTrigger value="accounts" className="gap-2">
+                                    <Link2 className="w-4 h-4"/>
+                                    Accounts
+                                    {connectedAccountsCount > 0 && (<Badge variant="secondary" className="ml-1 text-xs px-1.5">
+                                            {connectedAccountsCount}
+                                        </Badge>)}
+                                </TabsTrigger>
+                            </TabsList>
+
+                            {/* Permissions Tab */}
+                            <TabsContent value="permissions" className="flex-1 overflow-y-auto mt-4 space-y-3">
+                                {PERMISSION_TYPES.map(perm => (<div key={perm.type} className="flex items-center justify-between p-3 rounded-lg bg-zinc-900/50 border border-zinc-800">
+                                        <div className="flex items-center gap-3">
+                                            <div className="p-2 rounded-md bg-zinc-800 text-zinc-400">
+                                                {perm.icon}
+                                            </div>
+                                            <div>
+                                                <div className="text-sm font-medium text-zinc-200">{perm.label}</div>
+                                                <div className="text-xs text-zinc-500">{perm.description}</div>
+                                            </div>
+                                        </div>
+
+                                        {loadingPermission === perm.type ? (<Loader2 className="w-4 h-4 animate-spin text-fuchsia-400"/>) : (<Switch checked={permissions[perm.type]} onCheckedChange={(checked) => {
+                        if (checked) {
+                            requestPermission(perm.type);
+                        }
+                        else {
+                            revokePermission(perm.type);
+                        }
+                    }}/>)}
+                                    </div>))}
+                            </TabsContent>
+
+                            {/* Connected Accounts Tab */}
+                            <TabsContent value="accounts" className="flex-1 overflow-y-auto mt-4 space-y-3">
+                                {/* Search + Refresh row */}
+                                <div className="flex items-center gap-2 mb-2">
+                                    <div className="relative flex-1">
+                                        <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-zinc-500"/>
+                                        <input type="text" placeholder="Search 870+ integrations..." value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} className="w-full h-8 pl-8 pr-8 text-sm bg-zinc-900/80 border border-zinc-700 rounded-md text-zinc-200 placeholder:text-zinc-500 focus:outline-none focus:border-fuchsia-500/50 focus:ring-1 focus:ring-fuchsia-500/20 transition-colors"/>
+                                        {searchQuery && (<button onClick={() => setSearchQuery("")} className="absolute right-2 top-1/2 -translate-y-1/2 text-zinc-500 hover:text-zinc-300">
+                                                <X className="w-3.5 h-3.5"/>
+                                            </button>)}
+                                    </div>
+                                    <Button variant="ghost" size="sm" className="h-8 px-2 text-xs text-zinc-400 hover:text-zinc-200 shrink-0" onClick={fetchConnections} disabled={refreshing}>
+                                        <RefreshCw className={`w-3 h-3 mr-1 ${refreshing ? "animate-spin" : ""}`}/>
+                                        Refresh
+                                    </Button>
+                                </div>
+
+                                {/* Search results */}
+                                {searchQuery.trim() && (<div className="space-y-2">
+                                        {searching && (<div className="flex items-center justify-center py-4 text-zinc-500 text-sm">
+                                                <Loader2 className="w-4 h-4 animate-spin mr-2"/>
+                                                Searching...
+                                            </div>)}
+                                        {!searching && filteredSearchResults.length === 0 && searchResults.length === 0 && (<div className="text-center py-4 text-zinc-500 text-sm">
+                                                No integrations found for "{searchQuery}"
+                                            </div>)}
+                                        {filteredSearchResults.map(tk => renderProviderCard(toolkitToProvider(tk)))}
+                                        {filteredSearchResults.length > 0 && (<div className="border-t border-zinc-800 my-3"/>)}
+                                    </div>)}
+
+                                {/* Featured Providers */}
+                                {(!searchQuery.trim() || filteredSearchResults.length > 0 || searchResults.some(sr => featuredSlugs.has(sr.slug))) && (<>
+                                        {searchQuery.trim() && (<div className="text-xs font-medium text-zinc-500 uppercase tracking-wider mb-2">
+                                                Popular
+                                            </div>)}
+                                        {FEATURED_PROVIDERS.map(provider => renderProviderCard(provider))}
+                                    </>)}
+
+                                <p className="text-xs text-zinc-500 text-center pt-4">
+                                    Compose Market never sees or stores your tokens.
+                                </p>
+                            </TabsContent>
+                        </Tabs>
+                    </>)}
+            </DialogContent>
+        </Dialog>);
+}
+export default BackpackDialog;
+//# sourceMappingURL=backpack.js.map