@peers-app/peers-ui 0.7.40 → 0.8.1

package/dist/command-palette/command-palette.d.ts

@@ -8,8 +8,8 @@ export interface Command {
     action: () => void;
     isAvailable?: () => boolean;
 }
-export declare const isCommandPaletteOpen: import("@peers-app/peers-sdk").PersistentVar<boolean>;
-export declare const commandSearchQuery: import("@peers-app/peers-sdk").PersistentVar<string>;
+export declare const isCommandPaletteOpen: import("@peers-app/peers-sdk").Observable<boolean>;
+export declare const commandSearchQuery: import("@peers-app/peers-sdk").Observable<string>;
 export declare function registerCommand(command: Command): void;
 export declare function unregisterCommand(commandId: string): void;
 export declare function getCommand(commandId: string): Command | undefined;

package/dist/command-palette/command-palette.js

@@ -47,13 +47,9 @@ exports.initializeCommandPalette = initializeCommandPalette;
 exports.destroyCommandPalette = destroyCommandPalette;
 const peers_sdk_1 = require("@peers-app/peers-sdk");
 const tabs_state_1 = require("../tabs-layout/tabs-state");
-// Command palette state (using device scope but with temporary defaults)
-exports.isCommandPaletteOpen = (0, peers_sdk_1.deviceVar)('commandPaletteOpen', {
-    defaultValue: false,
-});
-exports.commandSearchQuery = (0, peers_sdk_1.deviceVar)('commandSearchQuery', {
-    defaultValue: '',
-});
+// Command palette state (in-memory only, no persistence needed)
+exports.isCommandPaletteOpen = (0, peers_sdk_1.observable)(false);
+exports.commandSearchQuery = (0, peers_sdk_1.observable)('');
 // Command registry
 const registeredCommands = new Map();
 // Detect platform for keyboard shortcuts  

package/dist/components/group-switcher.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 interface GroupSwitcherProps {
     colorMode: string;
+    isMobile?: boolean;
 }
-export declare function GroupSwitcher({ colorMode }: GroupSwitcherProps): React.JSX.Element;
+export declare function GroupSwitcher({ colorMode, isMobile }: GroupSwitcherProps): React.JSX.Element;
 export {};

package/dist/components/group-switcher.js

@@ -37,7 +37,7 @@ exports.GroupSwitcher = GroupSwitcher;
 const peers_sdk_1 = require("@peers-app/peers-sdk");
 const react_1 = __importStar(require("react"));
 const hooks_1 = require("../hooks");
-function GroupSwitcher({ colorMode }) {
+function GroupSwitcher({ colorMode, isMobile = false }) {
     const [showDropdown, setShowDropdown] = (0, react_1.useState)(false);
     const [showCreateModal, setShowCreateModal] = (0, react_1.useState)(false);
     const [allGroups, setAllGroups] = (0, react_1.useState)([]);
@@ -84,13 +84,14 @@ function GroupSwitcher({ colorMode }) {
     const isDark = colorMode === 'dark';
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { className: "dropdown" },
-            react_1.default.createElement("button", { className: "btn btn-sm me-2 d-flex align-items-center", onClick: () => setShowDropdown(!showDropdown), title: `Current group: ${getGroupName(currentGroup)}`, style: {
-                    padding: '4px 8px',
+            react_1.default.createElement("button", { className: `btn btn-sm ${isMobile ? '' : 'me-2'} d-flex align-items-center`, onClick: () => setShowDropdown(!showDropdown), title: `Current group: ${getGroupName(currentGroup)}`, style: {
+                    padding: isMobile ? '4px' : '4px 8px',
                     fontSize: '12px',
                     borderRadius: '6px',
                     border: 'none',
                     background: 'transparent',
-                    color: isDark ? '#adb5bd' : '#6c757d'
+                    color: isDark ? '#adb5bd' : '#6c757d',
+                    minWidth: isMobile ? '36px' : undefined
                 }, onMouseEnter: (e) => {
                     e.currentTarget.style.backgroundColor = isDark ? '#495057' : '#f8f9fa';
                     e.currentTarget.style.color = isDark ? '#ffffff' : '#0d6efd';
@@ -98,8 +99,8 @@ function GroupSwitcher({ colorMode }) {
                     e.currentTarget.style.backgroundColor = 'transparent';
                     e.currentTarget.style.color = isDark ? '#adb5bd' : '#6c757d';
                 } },
-                react_1.default.createElement("i", { className: `${getGroupIcon(currentGroup)} me-1`, style: { fontSize: '14px' } }),
-                react_1.default.createElement("span", { className: "text-truncate", style: { maxWidth: '80px' } }, getGroupName(currentGroup)),
+                react_1.default.createElement("i", { className: `${getGroupIcon(currentGroup)} ${isMobile ? '' : 'me-1'}`, style: { fontSize: '14px' } }),
+                !isMobile && (react_1.default.createElement("span", { className: "text-truncate", style: { maxWidth: '80px' } }, getGroupName(currentGroup))),
                 react_1.default.createElement("i", { className: "bi-chevron-down ms-1", style: { fontSize: '10px' } })),
             showDropdown && (react_1.default.createElement("div", { className: `dropdown-menu show position-absolute ${isDark ? 'dropdown-menu-dark' : ''}`, style: {
                     left: 0,

package/dist/globals.d.ts

@@ -14,8 +14,8 @@ export declare const isDesktop: import("@peers-app/peers-sdk").Observable<boolea
 export declare const groups: import("@peers-app/peers-sdk").Observable<{
     name: string;
     description: string;
-    signature: string;
     publicKey: string;
+    signature: string;
     publicBoxKey: string;
     groupId: string;
     founderUserId: string;

package/dist/screens/contacts/contact-list.js

@@ -142,7 +142,10 @@ function ContactList() {
         react_1.default.createElement("div", { className: "d-flex justify-content-between align-items-center mb-3" },
             react_1.default.createElement("h4", null,
                 react_1.default.createElement("i", { className: "bi-person-fill-check me-2" }),
-                "Contacts")),
+                "Contacts"),
+            react_1.default.createElement("a", { href: "#contacts/connect", className: "btn btn-primary btn-sm" },
+                react_1.default.createElement("i", { className: "bi-person-plus me-1" }),
+                "Connect to New User")),
         react_1.default.createElement("div", { className: "input-group mb-3" },
             react_1.default.createElement(input_1.Input, { value: searchTextObs, className: "form-control", placeholder: "Search or create contacts", autoFocus: true, onKeyUp: handleSearchSubmit })),
         react_1.default.createElement("div", { className: "peers-list-container" },

package/dist/screens/contacts/index.d.ts

@@ -1,4 +1,6 @@
 import './contact-list';
 import './contact-details';
+import './user-connect';
 export * from "./contact-list";
 export * from "./contact-details";
+export * from "./user-connect";

package/dist/screens/contacts/index.js

@@ -17,5 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 // Import all contact screen components to ensure they register their routes
 require("./contact-list");
 require("./contact-details");
+require("./user-connect");
 __exportStar(require("./contact-list"), exports);
 __exportStar(require("./contact-details"), exports);
+__exportStar(require("./user-connect"), exports);

package/dist/screens/contacts/user-connect.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function UserConnect(): React.JSX.Element;

package/dist/screens/contacts/user-connect.js

@@ -0,0 +1,312 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserConnect = UserConnect;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = __importStar(require("react"));
+const globals_1 = require("../../globals");
+const hooks_1 = require("../../hooks");
+const ui_loader_1 = require("../../ui-router/ui-loader");
+function UserConnect() {
+    const [mode, setMode] = (0, react_1.useState)('select');
+    const [status, setStatus] = (0, react_1.useState)('idle');
+    const [connectionCode, setConnectionCode] = (0, react_1.useState)('');
+    const [inputCode, setInputCode] = (0, react_1.useState)('');
+    const [result, setResult] = (0, react_1.useState)(null);
+    const [error, setError] = (0, react_1.useState)('');
+    const [copied, setCopied] = (0, react_1.useState)(false);
+    // Subscribe to userConnectStatus from the device layer
+    const [connectStatus] = (0, hooks_1.useObservable)(peers_sdk_1.userConnectStatus);
+    // Also set up a direct subscription after loading is complete
+    (0, react_1.useEffect)(() => {
+        let disposed = false;
+        let subscription;
+        peers_sdk_1.userConnectStatus.loadingPromise.then(() => {
+            if (disposed)
+                return;
+            subscription = peers_sdk_1.userConnectStatus.subscribe(() => {
+                // Force a re-render by checking the current value
+                const currentStatus = (0, peers_sdk_1.userConnectStatus)();
+                if (currentStatus && typeof currentStatus === 'string') {
+                    handleConnectStatusChange(currentStatus);
+                }
+            });
+        });
+        return () => {
+            disposed = true;
+            subscription?.dispose();
+        };
+    }, []);
+    // Handle connect status changes
+    const handleConnectStatusChange = (0, react_1.useCallback)(async (connectStatusValue) => {
+        if (!connectStatusValue || status === 'success')
+            return;
+        if (connectStatusValue.startsWith('Error:')) {
+            // Error status
+            setError(connectStatusValue.replace('Error: ', ''));
+            setStatus('error');
+        }
+        else if (connectStatusValue.length > 0) {
+            // Success - connectStatus is the remote userId
+            const remoteUserId = connectStatusValue;
+            try {
+                const userContext = await (0, peers_sdk_1.getUserContext)();
+                const me = await (0, peers_sdk_1.getMe)();
+                const remoteUser = await (0, peers_sdk_1.Users)(userContext.userDataContext).get(remoteUserId);
+                if (!remoteUser) {
+                    setError('Could not find connected user');
+                    setStatus('error');
+                    return;
+                }
+                const remoteDevice = await (0, peers_sdk_1.Devices)(userContext.userDataContext).findOne({ userId: remoteUserId });
+                if (!remoteDevice) {
+                    setError('Could not find connected device but connection was successful');
+                    setStatus('error');
+                    return;
+                }
+                // Build user connect info for confirmation hash
+                const myInfo = {
+                    userId: me.userId,
+                    publicKey: me.publicKey,
+                    publicBoxKey: me.publicBoxKey,
+                    deviceId: userContext.deviceId(),
+                };
+                const remoteInfo = {
+                    userId: remoteUser.userId,
+                    publicKey: remoteUser.publicKey,
+                    publicBoxKey: remoteUser.publicBoxKey,
+                    deviceId: remoteDevice.deviceId,
+                };
+                const confirmationHash = (0, peers_sdk_1.generateConfirmationHash)(myInfo, remoteInfo);
+                setResult({ remoteUser, confirmationHash });
+                setStatus('success');
+                // Clear the codes
+                (0, peers_sdk_1.userConnectCodeOffer)('');
+                (0, peers_sdk_1.userConnectCodeAnswer)('');
+            }
+            catch (err) {
+                setError(err.message || 'Failed to complete connection');
+                setStatus('error');
+            }
+        }
+    }, [status]);
+    // React to userConnectStatus changes from useObservable
+    (0, react_1.useEffect)(() => {
+        if (connectStatus && typeof connectStatus === 'string') {
+            handleConnectStatusChange(connectStatus);
+        }
+    }, [connectStatus, handleConnectStatusChange]);
+    // Clean up on unmount
+    (0, react_1.useEffect)(() => {
+        return () => {
+            if (mode === 'initiate' && status === 'waiting') {
+                (0, peers_sdk_1.userConnectCodeOffer)('');
+                (0, peers_sdk_1.userConnectCodeAnswer)('');
+            }
+        };
+    }, [mode, status]);
+    const handleInitiate = (0, react_1.useCallback)(async () => {
+        setMode('initiate');
+        setStatus('waiting');
+        setError('');
+        (0, peers_sdk_1.userConnectStatus)(''); // Clear any previous status
+        // Generate the connection code
+        const code = (0, peers_sdk_1.generateConnectionCode)();
+        (0, peers_sdk_1.userConnectCodeOffer)(code.code);
+        const formattedCode = (0, peers_sdk_1.formatConnectionCode)(code.code);
+        setConnectionCode(formattedCode);
+    }, []);
+    const handleRespond = (0, react_1.useCallback)(async () => {
+        if (inputCode.replace(/[^0-9A-Za-z]/g, '').length !== 12) {
+            setError('Please enter a valid 12-character connection code');
+            return;
+        }
+        setStatus('waiting');
+        setError('');
+        (0, peers_sdk_1.userConnectStatus)(''); // Clear any previous status
+        (0, peers_sdk_1.userConnectCodeAnswer)(inputCode);
+    }, [inputCode]);
+    const handleCancel = (0, react_1.useCallback)(async () => {
+        (0, peers_sdk_1.userConnectCodeOffer)('');
+        (0, peers_sdk_1.userConnectCodeAnswer)('');
+        (0, peers_sdk_1.userConnectStatus)('');
+        setMode('select');
+        setStatus('idle');
+        setConnectionCode('');
+        setError('');
+    }, []);
+    const handleReset = (0, react_1.useCallback)(() => {
+        (0, peers_sdk_1.userConnectCodeOffer)('');
+        (0, peers_sdk_1.userConnectCodeAnswer)('');
+        (0, peers_sdk_1.userConnectStatus)('');
+        setMode('select');
+        setStatus('idle');
+        setConnectionCode('');
+        setInputCode('');
+        setResult(null);
+        setError('');
+        setCopied(false);
+    }, []);
+    const handleSaveContact = (0, react_1.useCallback)(async () => {
+        if (!result)
+            return;
+        try {
+            const userContext = await (0, peers_sdk_1.getUserContext)();
+            // Contact is already saved by the device layer, just set trust level
+            await (0, peers_sdk_1.setUserTrustLevel)(result.remoteUser.userId, peers_sdk_1.TrustLevel.Trusted, userContext.userDataContext);
+            // Navigate to contact details
+            (0, globals_1.mainContentPath)(`contacts/${result.remoteUser.userId}`);
+        }
+        catch (err) {
+            setError(err.message || 'Failed to save contact');
+        }
+    }, [result]);
+    // Copy connection code to clipboard
+    const handleCopyCode = (0, react_1.useCallback)(async () => {
+        if (!connectionCode)
+            return;
+        try {
+            await navigator.clipboard.writeText(connectionCode);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+        catch (err) {
+            // Fallback for older browsers
+            const textArea = document.createElement('textarea');
+            textArea.value = connectionCode;
+            document.body.appendChild(textArea);
+            textArea.select();
+            document.execCommand('copy');
+            document.body.removeChild(textArea);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+    }, [connectionCode]);
+    // Format input code as user types
+    const handleCodeInput = (value) => {
+        // Remove non-alphanumeric characters
+        const cleaned = value.toUpperCase().replace(/[^0-9A-Z]/g, '');
+        // Format as XXXX-YYYY-ZZZZ
+        let formatted = '';
+        for (let i = 0; i < cleaned.length && i < 12; i++) {
+            if (i === 4 || i === 8)
+                formatted += '-';
+            formatted += cleaned[i];
+        }
+        setInputCode(formatted);
+    };
+    return (react_1.default.createElement("div", { className: "container-fluid p-3" },
+        react_1.default.createElement("div", { className: "d-flex justify-content-between align-items-center mb-4" },
+            react_1.default.createElement("h4", null,
+                react_1.default.createElement("i", { className: "bi-person-plus-fill me-2" }),
+                "Connect to New User"),
+            mode !== 'select' && (react_1.default.createElement("button", { className: "btn btn-outline-secondary btn-sm", onClick: handleReset },
+                react_1.default.createElement("i", { className: "bi-arrow-left me-1" }),
+                "Back"))),
+        mode === 'select' && (react_1.default.createElement("div", { className: "row g-3" },
+            react_1.default.createElement("div", { className: "col-md-6" },
+                react_1.default.createElement("div", { className: "card h-100 border-primary", style: { cursor: 'pointer' }, onClick: handleInitiate },
+                    react_1.default.createElement("div", { className: "card-body text-center p-4" },
+                        react_1.default.createElement("i", { className: "bi-qr-code display-4 text-primary mb-3" }),
+                        react_1.default.createElement("h5", { className: "card-title" }, "Create Connection Code"),
+                        react_1.default.createElement("p", { className: "card-text text-muted" }, "Generate a code to share with someone who wants to connect with you")))),
+            react_1.default.createElement("div", { className: "col-md-6" },
+                react_1.default.createElement("div", { className: "card h-100 border-success", style: { cursor: 'pointer' }, onClick: () => setMode('respond') },
+                    react_1.default.createElement("div", { className: "card-body text-center p-4" },
+                        react_1.default.createElement("i", { className: "bi-keyboard display-4 text-success mb-3" }),
+                        react_1.default.createElement("h5", { className: "card-title" }, "Enter Connection Code"),
+                        react_1.default.createElement("p", { className: "card-text text-muted" }, "Enter a code that someone shared with you to connect")))))),
+        mode === 'initiate' && status === 'waiting' && (react_1.default.createElement("div", { className: "text-center" },
+            react_1.default.createElement("div", { className: "mb-4" },
+                react_1.default.createElement("p", { className: "text-muted" }, "Share this code with the person you want to connect with:")),
+            react_1.default.createElement("div", { className: "mb-4", style: { maxWidth: '400px', margin: '0 auto' } },
+                react_1.default.createElement("div", { className: "input-group" },
+                    react_1.default.createElement("input", { type: "text", className: "form-control form-control-lg text-center font-monospace", value: connectionCode || 'XXXX-YYYY-ZZZZ', readOnly: true, style: { letterSpacing: '0.15em', fontSize: '1.5rem' } }),
+                    react_1.default.createElement("button", { className: "btn btn-outline-primary", onClick: handleCopyCode, title: "Copy to clipboard" },
+                        react_1.default.createElement("i", { className: copied ? "bi-check-lg" : "bi-clipboard" }))),
+                copied && (react_1.default.createElement("small", { className: "text-success mt-1 d-block" }, "Copied!"))),
+            react_1.default.createElement("div", { className: "mb-4" },
+                react_1.default.createElement("div", { className: "spinner-border spinner-border-sm text-primary me-2", role: "status" }),
+                react_1.default.createElement("span", { className: "text-muted" }, "Waiting for connection...")),
+            react_1.default.createElement("p", { className: "text-muted small" }, "This code will expire in 10 minutes"),
+            react_1.default.createElement("button", { className: "btn btn-outline-secondary", onClick: handleCancel }, "Cancel"))),
+        mode === 'respond' && status !== 'success' && (react_1.default.createElement("div", { className: "text-center" },
+            react_1.default.createElement("div", { className: "mb-4" },
+                react_1.default.createElement("p", { className: "text-muted" }, "Enter the connection code shared with you:")),
+            react_1.default.createElement("div", { className: "mb-4", style: { maxWidth: '400px', margin: '0 auto' } },
+                react_1.default.createElement("input", { type: "text", className: "form-control form-control-lg text-center font-monospace", placeholder: "XXXX-YYYY-ZZZZ", value: inputCode, onChange: (e) => handleCodeInput(e.target.value), maxLength: 14, style: { letterSpacing: '0.15em', fontSize: '1.5rem' }, autoFocus: true })),
+            error && (react_1.default.createElement("div", { className: "alert alert-danger", style: { maxWidth: '400px', margin: '0 auto 1rem' } }, error)),
+            react_1.default.createElement("button", { className: "btn btn-primary btn-lg", onClick: handleRespond, disabled: status === 'waiting' || inputCode.replace(/[^0-9A-Z]/gi, '').length !== 12 }, status === 'waiting' ? (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("span", { className: "spinner-border spinner-border-sm me-2", role: "status" }),
+                "Connecting...")) : (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("i", { className: "bi-link-45deg me-2" }),
+                "Connect"))))),
+        status === 'success' && result && (react_1.default.createElement("div", { className: "text-center" },
+            react_1.default.createElement("div", { className: "mb-4" },
+                react_1.default.createElement("i", { className: "bi-check-circle-fill text-success display-3" })),
+            react_1.default.createElement("h5", { className: "mb-4" }, "Connection Successful!"),
+            react_1.default.createElement("div", { className: "card mb-4", style: { maxWidth: '400px', margin: '0 auto' } },
+                react_1.default.createElement("div", { className: "card-body" },
+                    react_1.default.createElement("p", { className: "text-muted mb-2" }, "Verify with the other person that you both see:"),
+                    react_1.default.createElement("h3", { className: "font-monospace text-primary mb-3", style: { letterSpacing: '0.2em' } }, result.confirmationHash),
+                    react_1.default.createElement("hr", null),
+                    react_1.default.createElement("div", { className: "text-start" },
+                        react_1.default.createElement("small", { className: "text-muted" }, "Name:"),
+                        react_1.default.createElement("p", { className: "mb-2" }, result.remoteUser.name),
+                        react_1.default.createElement("small", { className: "text-muted" }, "User ID:"),
+                        react_1.default.createElement("p", { className: "font-monospace small mb-0" }, result.remoteUser.userId)))),
+            react_1.default.createElement("div", { className: "d-flex gap-2 justify-content-center" },
+                react_1.default.createElement("button", { className: "btn btn-primary", onClick: handleSaveContact },
+                    react_1.default.createElement("i", { className: "bi-check-lg me-2" }),
+                    "Trust & View Contact"),
+                react_1.default.createElement("button", { className: "btn btn-outline-secondary", onClick: handleReset }, "Connect Another")))),
+        status === 'error' && (react_1.default.createElement("div", { className: "text-center" },
+            react_1.default.createElement("div", { className: "mb-4" },
+                react_1.default.createElement("i", { className: "bi-x-circle-fill text-danger display-3" })),
+            react_1.default.createElement("h5", { className: "mb-4" }, "Connection Failed"),
+            react_1.default.createElement("div", { className: "alert alert-danger", style: { maxWidth: '400px', margin: '0 auto 1rem' } }, error),
+            react_1.default.createElement("button", { className: "btn btn-primary", onClick: handleReset }, "Try Again")))));
+}
+(0, ui_loader_1.registerInternalPeersUI)({
+    peersUIId: '000user00connect0screen01',
+    component: UserConnect,
+    routes: [
+        {
+            isMatch: (props, context) => context.path === 'contacts/connect',
+            uiCategory: 'screen',
+            priority: 3
+        }
+    ]
+});

package/dist/screens/network-viewer/device-details-modal.js

@@ -38,6 +38,27 @@ const react_1 = __importStar(require("react"));
 const peers_sdk_1 = require("@peers-app/peers-sdk");
 const loading_indicator_1 = require("../../components/loading-indicator");
 const trust_level_badge_1 = require("../../components/trust-level-badge");
+/** Format bytes to human-readable string (KB, MB, GB) */
+function formatBytes(bytes) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    if (bytes < 1024 * 1024)
+        return `${(bytes / 1024).toFixed(1)} KB`;
+    if (bytes < 1024 * 1024 * 1024)
+        return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+    return `${(bytes / 1024 / 1024 / 1024).toFixed(2)} GB`;
+}
+/** Format transfer rate to human-readable string (KB/s or MB/s) */
+function formatRate(mbps) {
+    if (mbps === undefined || mbps === 0)
+        return '0 KB/s';
+    // Show KB/s if less than 0.1 MB/s (100 KB/s)
+    if (mbps < 0.1) {
+        const kbps = mbps * 1024;
+        return `${kbps.toFixed(1)} KB/s`;
+    }
+    return `${mbps.toFixed(2)} MB/s`;
+}
 function DeviceDetailsModal({ deviceId, onClose, onDisconnect }) {
     const [device, setDevice] = (0, react_1.useState)(null);
     const [loading, setLoading] = (0, react_1.useState)(true);
@@ -133,6 +154,29 @@ function DeviceDetailsModal({ deviceId, onClose, onDisconnect }) {
                                 react_1.default.createElement("strong", null, "Path:"),
                                 react_1.default.createElement("br", null),
                                 react_1.default.createElement("small", { className: "text-muted" }, device.throughDeviceIds.join(' → ')))))),
+                    react_1.default.createElement("div", { className: "mb-4" },
+                        react_1.default.createElement("h6", { className: "border-bottom pb-2 mb-3" }, "Throughput"),
+                        react_1.default.createElement("div", { className: "row" },
+                            react_1.default.createElement("div", { className: "col-md-6 mb-3" },
+                                react_1.default.createElement("strong", null, "Send Rate:"),
+                                react_1.default.createElement("br", null),
+                                react_1.default.createElement("span", { className: "text-success" },
+                                    "\u2191 ",
+                                    formatRate(device.sendRateMBps))),
+                            react_1.default.createElement("div", { className: "col-md-6 mb-3" },
+                                react_1.default.createElement("strong", null, "Receive Rate:"),
+                                react_1.default.createElement("br", null),
+                                react_1.default.createElement("span", { className: "text-primary" },
+                                    "\u2193 ",
+                                    formatRate(device.receiveRateMBps))),
+                            react_1.default.createElement("div", { className: "col-md-6 mb-3" },
+                                react_1.default.createElement("strong", null, "Total Sent:"),
+                                react_1.default.createElement("br", null),
+                                react_1.default.createElement("span", null, formatBytes(device.bytesSent || 0))),
+                            react_1.default.createElement("div", { className: "col-md-6 mb-3" },
+                                react_1.default.createElement("strong", null, "Total Received:"),
+                                react_1.default.createElement("br", null),
+                                react_1.default.createElement("span", null, formatBytes(device.bytesReceived || 0))))),
                     device.sharedGroups.length > 0 && (react_1.default.createElement("div", { className: "mb-4" },
                         react_1.default.createElement("h6", { className: "border-bottom pb-2 mb-3" },
                             "Shared Groups (",

package/dist/screens/network-viewer/group-details-modal.js

@@ -40,8 +40,12 @@ const loading_indicator_1 = require("../../components/loading-indicator");
 const trust_level_badge_1 = require("../../components/trust-level-badge");
 function GroupDetailsModal({ groupId, onClose }) {
     const [group, setGroup] = (0, react_1.useState)(null);
+    const [syncInfo, setSyncInfo] = (0, react_1.useState)(null);
     const [loading, setLoading] = (0, react_1.useState)(true);
     const [notFound, setNotFound] = (0, react_1.useState)(false);
+    const [downloading, setDownloading] = (0, react_1.useState)(false);
+    const [downloadProgress, setDownloadProgress] = (0, react_1.useState)(null);
+    const [downloadResult, setDownloadResult] = (0, react_1.useState)(null);
     const loadData = async () => {
         try {
             const api = window.electronAPI?.networkViewer;
@@ -49,7 +53,10 @@ function GroupDetailsModal({ groupId, onClose }) {
                 console.warn('Network Viewer API not available');
                 return;
             }
-            const groupData = await api.getGroupDetails(groupId);
+            const [groupData, syncData] = await Promise.all([
+                api.getGroupDetails(groupId),
+                api.getGroupSyncStatus(groupId)
+            ]);
             if (!groupData) {
                 setNotFound(true);
             }
@@ -57,6 +64,9 @@ function GroupDetailsModal({ groupId, onClose }) {
                 setGroup(groupData);
                 setNotFound(false);
             }
+            if (syncData && syncData.length > 0) {
+                setSyncInfo(syncData[0]);
+            }
         }
         catch (error) {
             console.error('Error loading group details:', error);
@@ -66,6 +76,38 @@ function GroupDetailsModal({ groupId, onClose }) {
             setLoading(false);
         }
     };
+    const handleDownloadDatabase = async (deviceId) => {
+        try {
+            setDownloading(true);
+            setDownloadProgress('Preparing download...');
+            setDownloadResult(null);
+            const api = window.electronAPI?.networkViewer;
+            if (!api?.downloadRemoteDatabase) {
+                setDownloadResult({
+                    success: false,
+                    message: 'Download API not available'
+                });
+                return;
+            }
+            setDownloadProgress('Downloading database...');
+            const result = await api.downloadRemoteDatabase(groupId, deviceId);
+            setDownloadResult(result);
+            if (result.success) {
+                setDownloadProgress(null);
+            }
+        }
+        catch (error) {
+            console.error('Error downloading database:', error);
+            setDownloadResult({
+                success: false,
+                message: error?.message || 'Download failed'
+            });
+        }
+        finally {
+            setDownloading(false);
+            setDownloadProgress(null);
+        }
+    };
     (0, react_1.useEffect)(() => {
         loadData();
     }, [groupId]);
@@ -123,5 +165,41 @@ function GroupDetailsModal({ groupId, onClose }) {
                                     react_1.default.createElement("td", null,
                                         react_1.default.createElement("span", { className: "badge bg-primary" }, member.role)),
                                     react_1.default.createElement("td", null,
-                                        react_1.default.createElement(trust_level_badge_1.TrustLevelBadge, { level: member.trustLevel || peers_sdk_1.TrustLevel.Unknown }))))))))))))))));
+                                        react_1.default.createElement(trust_level_badge_1.TrustLevelBadge, { level: member.trustLevel || peers_sdk_1.TrustLevel.Unknown })))))))))),
+                    react_1.default.createElement("div", { className: "mb-4" },
+                        react_1.default.createElement("h6", { className: "border-bottom pb-2 mb-3" },
+                            react_1.default.createElement("i", { className: "bi bi-download me-2" }),
+                            "Download Database (Fast Sync)"),
+                        react_1.default.createElement("p", { className: "text-muted small mb-3" }, "Download the entire database from a connected device. This is useful for fast initial sync on a new device. The database will be saved as a backup file."),
+                        syncInfo && syncInfo.connectedDevices.length > 0 ? (react_1.default.createElement("div", null,
+                            react_1.default.createElement("label", { className: "form-label" }, "Select a connected device:"),
+                            react_1.default.createElement("div", { className: "d-flex flex-wrap gap-2" }, syncInfo.connectedDevices.map((device) => (react_1.default.createElement("button", { key: device.deviceId, className: "btn btn-outline-primary btn-sm", onClick: () => handleDownloadDatabase(device.deviceId), disabled: downloading }, downloading ? (react_1.default.createElement(react_1.default.Fragment, null,
+                                react_1.default.createElement("span", { className: "spinner-border spinner-border-sm me-1", role: "status", "aria-hidden": "true" }),
+                                "Downloading...")) : (react_1.default.createElement(react_1.default.Fragment, null,
+                                react_1.default.createElement("i", { className: "bi bi-cloud-download me-1" }),
+                                device.deviceId.substring(0, 8),
+                                "...",
+                                react_1.default.createElement("span", { className: "badge bg-secondary ms-1" },
+                                    Math.round(device.latencyMs),
+                                    "ms"))))))))) : (react_1.default.createElement("div", { className: "alert alert-info mb-0" },
+                            react_1.default.createElement("i", { className: "bi bi-info-circle me-2" }),
+                            "No devices are currently connected to this group. Connect to a device first to download its database.")),
+                        downloadProgress && (react_1.default.createElement("div", { className: "mt-3" },
+                            react_1.default.createElement("div", { className: "d-flex align-items-center" },
+                                react_1.default.createElement("span", { className: "spinner-border spinner-border-sm me-2", role: "status", "aria-hidden": "true" }),
+                                react_1.default.createElement("span", null, downloadProgress)))),
+                        downloadResult && (react_1.default.createElement("div", { className: `alert mt-3 mb-0 ${downloadResult.success ? 'alert-success' : 'alert-danger'}` }, downloadResult.success ? (react_1.default.createElement(react_1.default.Fragment, null,
+                            react_1.default.createElement("i", { className: "bi bi-check-circle me-2" }),
+                            react_1.default.createElement("strong", null, "Download complete!"),
+                            react_1.default.createElement("br", null),
+                            react_1.default.createElement("small", null,
+                                "File: ",
+                                react_1.default.createElement("code", null, downloadResult.filePath),
+                                react_1.default.createElement("br", null),
+                                "Size: ",
+                                downloadResult.size ? `${(downloadResult.size / (1024 * 1024)).toFixed(2)} MB` : 'Unknown'))) : (react_1.default.createElement(react_1.default.Fragment, null,
+                            react_1.default.createElement("i", { className: "bi bi-exclamation-circle me-2" }),
+                            react_1.default.createElement("strong", null, "Download failed:"),
+                            " ",
+                            downloadResult.message)))))))))));
 }