@peers-app/peers-ui 0.7.40 → 0.8.1

package/dist/screens/network-viewer/network-viewer.js

@@ -43,6 +43,27 @@ const globals_1 = require("../../globals");
 const device_details_modal_1 = require("./device-details-modal");
 const group_details_modal_1 = require("./group-details-modal");
 const usage_graph_1 = require("./usage-graph");
+/** 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 NetworkViewerList() {
     const [overview, setOverview] = (0, react_1.useState)(null);
     const [connections, setConnections] = (0, react_1.useState)([]);
@@ -238,22 +259,6 @@ function NetworkViewerList() {
                                 { maxValue: 80, color: 'rgba(255, 193, 7, 1)' },
                                 { maxValue: Infinity, color: 'rgba(220, 53, 69, 1)' }
                             ] }))))),
-        overview.groups.length > 0 && (react_1.default.createElement("div", { className: "card mb-4" },
-            react_1.default.createElement("div", { className: "card-body" },
-                react_1.default.createElement("h5", { className: "card-title" },
-                    "Groups: ",
-                    overview.groups.length),
-                react_1.default.createElement("div", { className: "table-responsive" },
-                    react_1.default.createElement("table", { className: "table table-sm" },
-                        react_1.default.createElement("thead", null,
-                            react_1.default.createElement("tr", null,
-                                react_1.default.createElement("th", null, "Group Name"),
-                                react_1.default.createElement("th", null, "Connected Devices"),
-                                react_1.default.createElement("th", null, "Total Members"))),
-                        react_1.default.createElement("tbody", null, overview.groups.map(group => (react_1.default.createElement("tr", { key: group.groupId },
-                            react_1.default.createElement("td", null, group.groupName),
-                            react_1.default.createElement("td", null, group.connectedDevices),
-                            react_1.default.createElement("td", null, group.totalMembers)))))))))),
         react_1.default.createElement("div", { className: "card mb-4" },
             react_1.default.createElement("div", { className: "card-body" },
                 react_1.default.createElement("h5", { className: "card-title" }, "Active Connections"),
@@ -270,6 +275,7 @@ function NetworkViewerList() {
                                 react_1.default.createElement("th", null, "Shared Groups"),
                                 react_1.default.createElement("th", null, "Latency"),
                                 react_1.default.createElement("th", null, "Error Rate"),
+                                react_1.default.createElement("th", null, "Throughput"),
                                 react_1.default.createElement("th", null, "Actions"))),
                         react_1.default.createElement("tbody", null, connections.map(conn => {
                             return (react_1.default.createElement("tr", { key: conn.deviceId },
@@ -300,6 +306,20 @@ function NetworkViewerList() {
                                             conn.errorRate < 0.2 ? 'warning' : 'danger'}` },
                                         (conn.errorRate * 100).toFixed(1),
                                         "%")),
+                                react_1.default.createElement("td", null,
+                                    react_1.default.createElement("small", null,
+                                        react_1.default.createElement("span", { className: "text-success" },
+                                            "\u2191",
+                                            formatRate(conn.sendRateMBps)),
+                                        ' / ',
+                                        react_1.default.createElement("span", { className: "text-primary" },
+                                            "\u2193",
+                                            formatRate(conn.receiveRateMBps))),
+                                    react_1.default.createElement("br", null),
+                                    react_1.default.createElement("small", { className: "text-muted" },
+                                        formatBytes(conn.bytesSent || 0),
+                                        " / ",
+                                        formatBytes(conn.bytesReceived || 0))),
                                 react_1.default.createElement("td", null,
                                     react_1.default.createElement("button", { className: "btn btn-sm btn-outline-primary me-2", onClick: () => handleViewDetails(conn.deviceId), title: "View Details" },
                                         react_1.default.createElement("i", { className: "bi bi-info-circle" })),

package/dist/screens/settings/settings-page.js

@@ -34,12 +34,12 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SettingsPage = void 0;
-const react_1 = __importStar(require("react"));
 const peers_sdk_1 = require("@peers-app/peers-sdk");
-const tooltip_1 = require("../../components/tooltip");
-const color_mode_dropdown_1 = require("./color-mode-dropdown");
+const react_1 = __importStar(require("react"));
 const input_1 = require("../../components/input");
+const tooltip_1 = require("../../components/tooltip");
 const hooks_1 = require("../../hooks");
+const color_mode_dropdown_1 = require("./color-mode-dropdown");
 const SettingsPage = () => {
     return (react_1.default.createElement("div", { className: 'container-fluid' },
         react_1.default.createElement(color_mode_dropdown_1.ColorModeDropdown, null),
@@ -71,13 +71,19 @@ const DeviceName = () => {
     }, [deviceId]);
     const handleSave = async () => {
         try {
-            if (!deviceId)
+            if (!deviceId) {
+                console.error('No device id');
                 return;
+            }
             const userContext = await (0, peers_sdk_1.getUserContext)();
             const devicesTable = (0, peers_sdk_1.Devices)(userContext.userDataContext);
-            const device = await devicesTable.get(deviceId);
-            if (!device)
-                return;
+            const device = await devicesTable.get(deviceId) || {
+                deviceId,
+                userId: userContext.userId,
+                firstSeen: new Date(),
+                lastSeen: new Date(),
+                trustLevel: peers_sdk_1.TrustLevel.NewDevice,
+            };
             device.name = deviceName() || undefined;
             await devicesTable.save(device);
             currentDeviceName(deviceName());

package/dist/screens/setup-user.js

@@ -103,7 +103,7 @@ const SetupUser = () => {
     };
     // Step 1: Select User Type
     if (step === 'select-user-type' && isExistingUser === null) {
-        return (react_1.default.createElement("div", { className: "container-fluid d-flex align-items-start justify-content-center", style: { minHeight: '100vh', paddingTop: '80px', backgroundColor: isDark ? '#212529' : '#f8f9fa' } },
+        return (react_1.default.createElement("div", { className: "container-fluid d-flex align-items-start justify-content-center", style: { paddingTop: '20px', backgroundColor: isDark ? '#212529' : '#f8f9fa' } },
             react_1.default.createElement("div", { className: "card shadow", style: { maxWidth: '500px', width: '100%', backgroundColor: isDark ? '#2d3238' : '#ffffff' } },
                 react_1.default.createElement("div", { className: "card-body p-4 p-md-5" },
                     react_1.default.createElement("div", { className: "text-center mb-4" },
@@ -125,7 +125,7 @@ const SetupUser = () => {
     }
     // Step 2: New User Confirmation
     if (isExistingUser === false) {
-        return (react_1.default.createElement("div", { className: "container-fluid d-flex align-items-start justify-content-center", style: { minHeight: '100vh', paddingTop: '80px', backgroundColor: isDark ? '#212529' : '#f8f9fa' } },
+        return (react_1.default.createElement("div", { className: "container-fluid d-flex align-items-start justify-content-center", style: { paddingTop: '20px', backgroundColor: isDark ? '#212529' : '#f8f9fa' } },
             react_1.default.createElement("div", { className: "card shadow", style: { maxWidth: '500px', width: '100%', backgroundColor: isDark ? '#2d3238' : '#ffffff' } },
                 react_1.default.createElement("div", { className: "card-body p-4 p-md-5" },
                     react_1.default.createElement("div", { className: "text-center mb-4" },
@@ -147,12 +147,14 @@ const SetupUser = () => {
     }
     // Step 3: Existing User Sign In
     if (isExistingUser === true) {
-        return (react_1.default.createElement("div", { className: "container-fluid d-flex align-items-start justify-content-center", style: { minHeight: '100vh', paddingTop: '80px', backgroundColor: isDark ? '#212529' : '#f8f9fa' } },
+        return (react_1.default.createElement("div", { className: "container-fluid d-flex align-items-start justify-content-center", style: { paddingTop: '20px', backgroundColor: isDark ? '#212529' : '#f8f9fa' } },
             react_1.default.createElement("div", { className: "card shadow", style: { maxWidth: '500px', width: '100%', backgroundColor: isDark ? '#2d3238' : '#ffffff' } },
                 react_1.default.createElement("div", { className: "card-body p-4 p-md-5" },
-                    react_1.default.createElement("div", { className: "text-center mb-4" },
-                        react_1.default.createElement("i", { className: "bi bi-box-arrow-in-right text-primary fs-1 mb-3 d-block" }),
-                        react_1.default.createElement("h3", { className: `fw-bold mb-2 ${isDark ? 'text-light' : ''}` }, "Sign In"),
+                    react_1.default.createElement("div", { className: "text-center mb-2" },
+                        react_1.default.createElement("h3", { className: `fw-bold mb-2 ${isDark ? 'text-light' : ''}` },
+                            react_1.default.createElement("span", null, "Sign In"),
+                            "\u00A0\u00A0",
+                            react_1.default.createElement("i", { className: "bi bi-box-arrow-in-right text-primary" })),
                         react_1.default.createElement("p", { className: isDark ? 'text-light opacity-75' : 'text-muted' }, "Enter your existing credentials")),
                     error && (react_1.default.createElement("div", { className: "alert alert-danger", role: "alert" },
                         react_1.default.createElement("i", { className: "bi bi-exclamation-triangle me-2" }),

package/dist/system-apps/index.d.ts

@@ -18,5 +18,6 @@ export { contactsApp } from './contacts.app';
 export { consoleLogsApp } from './console-logs.app';
 export { networkViewerApp } from './network-viewer.app';
 export { dataExplorerApp } from './data-explorer.app';
+export { mobileSettingsApp } from './mobile-settings.app';
 export declare const systemApps: IAppNav[];
 export declare const systemPackage: IPackage;

package/dist/system-apps/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.systemPackage = exports.systemApps = exports.dataExplorerApp = exports.networkViewerApp = exports.consoleLogsApp = exports.contactsApp = exports.groupsApp = exports.settingsApp = exports.profileApp = exports.predicatesApp = exports.knowledgeFramesApp = exports.knowledgeValuesApp = exports.threadsApp = exports.packagesApp = exports.typesApp = exports.variablesApp = exports.eventsApp = exports.workflowsApp = exports.toolsApp = exports.assistantsApp = exports.searchApp = void 0;
+exports.systemPackage = exports.systemApps = exports.mobileSettingsApp = exports.dataExplorerApp = exports.networkViewerApp = exports.consoleLogsApp = exports.contactsApp = exports.groupsApp = exports.settingsApp = exports.profileApp = exports.predicatesApp = exports.knowledgeFramesApp = exports.knowledgeValuesApp = exports.threadsApp = exports.packagesApp = exports.typesApp = exports.variablesApp = exports.eventsApp = exports.workflowsApp = exports.toolsApp = exports.assistantsApp = exports.searchApp = void 0;
 // Import all system apps
 var search_app_1 = require("./search.app");
 Object.defineProperty(exports, "searchApp", { enumerable: true, get: function () { return search_app_1.searchApp; } });
@@ -40,6 +40,8 @@ var network_viewer_app_1 = require("./network-viewer.app");
 Object.defineProperty(exports, "networkViewerApp", { enumerable: true, get: function () { return network_viewer_app_1.networkViewerApp; } });
 var data_explorer_app_1 = require("./data-explorer.app");
 Object.defineProperty(exports, "dataExplorerApp", { enumerable: true, get: function () { return data_explorer_app_1.dataExplorerApp; } });
+var mobile_settings_app_1 = require("./mobile-settings.app");
+Object.defineProperty(exports, "mobileSettingsApp", { enumerable: true, get: function () { return mobile_settings_app_1.mobileSettingsApp; } });
 // Import individual apps
 const search_app_2 = require("./search.app");
 const assistants_app_2 = require("./assistants.app");
@@ -60,6 +62,11 @@ const contacts_app_2 = require("./contacts.app");
 const console_logs_app_2 = require("./console-logs.app");
 const network_viewer_app_2 = require("./network-viewer.app");
 const data_explorer_app_2 = require("./data-explorer.app");
+const mobile_settings_app_2 = require("./mobile-settings.app");
+// Helper to check if running in React Native
+function isReactNative() {
+    return typeof window.__NATIVE_THEME !== 'undefined';
+}
 // Collection of all system apps
 exports.systemApps = [
     // Core Navigation & Search
@@ -82,6 +89,8 @@ exports.systemApps = [
     // User & Settings Apps
     profile_app_2.profileApp,
     settings_app_2.settingsApp,
+    // Mobile Settings (only in React Native)
+    ...(isReactNative() ? [mobile_settings_app_2.mobileSettingsApp] : []),
     // System Tools & Debugging
     console_logs_app_2.consoleLogsApp,
     network_viewer_app_2.networkViewerApp,

package/dist/system-apps/mobile-settings.app.d.ts

@@ -0,0 +1,2 @@
+import { IAppNav } from "@peers-app/peers-sdk";
+export declare const mobileSettingsApp: IAppNav;

package/dist/system-apps/mobile-settings.app.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mobileSettingsApp = void 0;
+exports.mobileSettingsApp = {
+    name: 'Mobile Settings',
+    iconClassName: 'bi-phone-fill',
+    navigationPath: 'mobile-settings'
+};

package/dist/tabs-layout/tabs-layout.js

@@ -134,7 +134,7 @@ function TabsLayoutInternal() {
                 borderBottomWidth: '1px',
                 borderBottomColor: _colorMode === 'light' ? '#dee2e6' : '#495057'
             } }, isMobile ? (react_1.default.createElement(MobileTabsHeader, { tabs: tabs, activeTab: activeTab, onSwitch: switchTab, onClose: closeTab, colorMode: _colorMode })) : (react_1.default.createElement("div", { className: "d-flex align-items-center px-1", style: { height: '36px' } },
-            react_1.default.createElement(group_switcher_1.GroupSwitcher, { colorMode: _colorMode }),
+            react_1.default.createElement(group_switcher_1.GroupSwitcher, { colorMode: _colorMode, isMobile: false }),
             react_1.default.createElement("button", { className: "btn btn-sm me-2 d-flex align-items-center", onClick: command_palette_1.openCommandPalette, title: "Search everything (Cmd+K)", style: {
                     padding: '4px 8px',
                     fontSize: '12px',
@@ -158,47 +158,52 @@ function TabsLayoutInternal() {
             react_1.default.createElement(TabContent, { tab: tab, isMobile: isMobile, isActive: activeTab === tab.tabId })))))));
 }
 function MobileTabsHeader({ tabs, activeTab, onSwitch, onClose, colorMode }) {
-    const [showTabDropdown, setShowTabDropdown] = react_1.default.useState(false);
+    const [showMenuDropdown, setShowMenuDropdown] = react_1.default.useState(false);
     const currentTab = tabs.find(t => t.tabId === activeTab);
     const nonLauncherTabs = tabs.filter(t => t.packageId !== 'launcher');
-    return (react_1.default.createElement("div", { className: "d-flex align-items-center justify-content-between px-2", style: { height: '36px' } },
+    return (react_1.default.createElement("div", { className: "d-flex align-items-center justify-content-between px-2 position-relative", style: { height: '36px' } },
         react_1.default.createElement("div", { className: "d-flex align-items-center gap-1" },
-            react_1.default.createElement(group_switcher_1.GroupSwitcher, { colorMode: colorMode }),
-            react_1.default.createElement("button", { className: "btn btn-sm", onClick: command_palette_1.openCommandPalette, title: "Search everything", style: {
-                    minWidth: '36px',
-                    border: 'none',
-                    background: 'transparent',
-                    color: colorMode === 'light' ? '#6c757d' : '#adb5bd'
-                }, onMouseEnter: (e) => {
-                    e.currentTarget.style.backgroundColor = colorMode === 'light' ? '#f8f9fa' : '#495057';
-                    e.currentTarget.style.color = colorMode === 'light' ? '#0d6efd' : '#ffffff';
-                }, onMouseLeave: (e) => {
-                    e.currentTarget.style.backgroundColor = 'transparent';
-                    e.currentTarget.style.color = colorMode === 'light' ? '#6c757d' : '#adb5bd';
-                } },
-                react_1.default.createElement("i", { className: "bi-search" })),
-            react_1.default.createElement("button", { className: `btn btn-sm ${colorMode === 'light' ? 'btn-outline-primary' : 'btn-outline-light'}`, onClick: () => onSwitch('launcher'), style: { minWidth: '36px' } },
-                react_1.default.createElement("i", { className: "bi-grid-3x3-gap" }))),
-        react_1.default.createElement("div", { className: "d-flex align-items-center flex-grow-1 justify-content-center" },
+            react_1.default.createElement(group_switcher_1.GroupSwitcher, { colorMode: colorMode, isMobile: true })),
+        react_1.default.createElement("div", { className: "d-flex align-items-center justify-content-center position-absolute", style: {
+                left: '50%',
+                transform: 'translateX(-50%)',
+                pointerEvents: 'none',
+                maxWidth: 'calc(100% - 140px)'
+            } },
             currentTab?.iconClassName && currentTab.packageId !== 'launcher' && (react_1.default.createElement("i", { className: `${currentTab.iconClassName} me-2` })),
-            react_1.default.createElement("span", { className: "fw-medium text-truncate me-2 small" }, currentTab?.title || 'Apps')),
-        react_1.default.createElement("div", { className: "d-flex align-items-center gap-2" }, nonLauncherTabs.length > 0 && (react_1.default.createElement("div", { className: "dropdown" },
-            react_1.default.createElement("button", { className: `btn btn-sm ${colorMode === 'light' ? 'btn-outline-dark' : 'btn-outline-light'}`, onClick: () => setShowTabDropdown(!showTabDropdown) },
-                react_1.default.createElement("i", { className: "bi-list" }),
-                react_1.default.createElement("span", { className: "ms-1" }, nonLauncherTabs.length)),
-            showTabDropdown && (react_1.default.createElement("div", { className: `dropdown-menu show position-absolute ${colorMode === 'light' ? '' : 'dropdown-menu-dark'}`, style: { right: 0, top: '100%', zIndex: 1000, minWidth: '250px' } }, nonLauncherTabs.slice().reverse().map(tab => (react_1.default.createElement("div", { key: tab.tabId, className: `dropdown-item d-flex align-items-center justify-content-between ${activeTab === tab.tabId ? 'active' : ''}`, style: { cursor: 'pointer' }, onClick: () => {
-                    onSwitch(tab.tabId);
-                    setShowTabDropdown(false);
-                } },
-                react_1.default.createElement("div", { className: "d-flex align-items-center" },
-                    tab.iconClassName && react_1.default.createElement("i", { className: `${tab.iconClassName} me-2` }),
-                    react_1.default.createElement("span", null, tab.title)),
-                tab.tabId !== "launcher" && (react_1.default.createElement("button", { className: "btn btn-sm p-0 ms-2", style: { width: '20px', height: '20px' }, onClick: (e) => {
-                        e.stopPropagation();
-                        onClose(tab.tabId);
-                    } },
-                    react_1.default.createElement("i", { className: "bi-x" }))))))))))),
-        showTabDropdown && (react_1.default.createElement("div", { className: "position-fixed w-100 h-100", style: { top: 0, left: 0, zIndex: 999 }, onClick: () => setShowTabDropdown(false) }))));
+            react_1.default.createElement("span", { className: "fw-medium text-truncate small" }, currentTab?.title || 'Apps')),
+        react_1.default.createElement("div", { className: "d-flex align-items-center" },
+            react_1.default.createElement("div", { className: "dropdown" },
+                react_1.default.createElement("button", { className: `btn btn-sm ${colorMode === 'light' ? 'btn-outline-dark' : 'btn-outline-light'}`, onClick: () => setShowMenuDropdown(!showMenuDropdown), style: { minWidth: '36px' } },
+                    react_1.default.createElement("i", { className: "bi-list" }),
+                    nonLauncherTabs.length > 0 && (react_1.default.createElement("span", { className: "ms-1" }, nonLauncherTabs.length))),
+                showMenuDropdown && (react_1.default.createElement("div", { className: `dropdown-menu show position-absolute ${colorMode === 'light' ? '' : 'dropdown-menu-dark'}`, style: { right: 0, top: '100%', zIndex: 1000, minWidth: '250px' } },
+                    react_1.default.createElement("div", { className: `dropdown-item d-flex align-items-center ${activeTab === 'launcher' ? 'active' : ''}`, style: { cursor: 'pointer' }, onClick: () => {
+                            onSwitch('launcher');
+                            setShowMenuDropdown(false);
+                        } },
+                        react_1.default.createElement("i", { className: "bi-grid-3x3-gap me-2" }),
+                        react_1.default.createElement("span", null, "Apps")),
+                    react_1.default.createElement("div", { className: "dropdown-item d-flex align-items-center", style: { cursor: 'pointer' }, onClick: () => {
+                            (0, command_palette_1.openCommandPalette)();
+                            setShowMenuDropdown(false);
+                        } },
+                        react_1.default.createElement("i", { className: "bi-search me-2" }),
+                        react_1.default.createElement("span", null, "Search")),
+                    nonLauncherTabs.length > 0 && (react_1.default.createElement("div", { className: "dropdown-divider" })),
+                    nonLauncherTabs.slice().reverse().map(tab => (react_1.default.createElement("div", { key: tab.tabId, className: `dropdown-item d-flex align-items-center justify-content-between ${activeTab === tab.tabId ? 'active' : ''}`, style: { cursor: 'pointer' }, onClick: () => {
+                            onSwitch(tab.tabId);
+                            setShowMenuDropdown(false);
+                        } },
+                        react_1.default.createElement("div", { className: "d-flex align-items-center" },
+                            tab.iconClassName && react_1.default.createElement("i", { className: `${tab.iconClassName} me-2` }),
+                            react_1.default.createElement("span", null, tab.title)),
+                        react_1.default.createElement("button", { className: "btn btn-sm p-0 ms-2", style: { width: '20px', height: '20px' }, onClick: (e) => {
+                                e.stopPropagation();
+                                onClose(tab.tabId);
+                            } },
+                            react_1.default.createElement("i", { className: "bi-x" }))))))))),
+        showMenuDropdown && (react_1.default.createElement("div", { className: "position-fixed w-100 h-100", style: { top: 0, left: 0, zIndex: 999 }, onClick: () => setShowMenuDropdown(false) }))));
 }
 function TabHeader({ tab, isActive, onSwitch, onClose, colorMode }) {
     const activeClass = isActive
@@ -318,6 +323,23 @@ function AppLauncherTab({ isMobile }) {
         .map(path => filteredApps.find(app => app.path === path))
         .filter(Boolean);
     const openApp = (appItem) => {
+        // Check if this is the mobile-settings app and we're in React Native
+        if (appItem.path === 'mobile-settings' && typeof window.__NATIVE_THEME !== 'undefined') {
+            // Use expo-linking to navigate to native screen
+            // @ts-ignore
+            if (window.ReactNativeWebView) {
+                // @ts-ignore
+                window.ReactNativeWebView.postMessage(JSON.stringify({
+                    type: 'navigate',
+                    path: 'mobile-settings'
+                }));
+            }
+            else {
+                // Fallback to deep link
+                window.location.href = 'peers://mobile-settings';
+            }
+            return;
+        }
         (0, tabs_state_1.goToTabPath)(appItem.path);
     };
     return (react_1.default.createElement("div", { className: `container-fluid ${isMobile ? 'p-2' : 'p-4'}`, style: { maxHeight: '100%', overflowY: 'auto' } },

package/dist/tabs-layout/tabs-state.d.ts

@@ -1,4 +1,4 @@
-import { IAppNav, IPackage } from "@peers-app/peers-sdk";
+import { IAppNav, IPackage, Observable } from "@peers-app/peers-sdk";
 export interface TabState {
     tabId: string;
     packageId?: string;
@@ -7,9 +7,15 @@ export interface TabState {
     iconClassName?: string;
 }
 export declare const launcherApp: TabState;
-export declare const activeTabs: import("@peers-app/peers-sdk").PersistentVar<TabState[]>;
-export declare const activeTabId: import("@peers-app/peers-sdk").PersistentVar<string>;
-export declare const recentlyUsedApps: import("@peers-app/peers-sdk").PersistentVar<string[]>;
+export declare const activeTabs: Observable<TabState[]> & {
+    loadingPromise: Promise<void>;
+};
+export declare const activeTabId: Observable<string> & {
+    loadingPromise: Promise<void>;
+};
+export declare const recentlyUsedApps: Observable<string[]> & {
+    loadingPromise: Promise<void>;
+};
 export declare const initializedTabs: Set<string>;
 export declare function goToTabPath(path: string): void;
 export declare const handleMainPathChanged: (oldPath: string, newPath: string, setNewMainPath: ((path: string) => any)) => void;

package/dist/tabs-layout/tabs-state.js

@@ -14,16 +14,53 @@ exports.launcherApp = {
     title: 'Apps',
     iconClassName: 'bi-grid-3x3-gap',
 };
-// Global persistent variables for tab state
-exports.activeTabs = (0, peers_sdk_1.groupDeviceVar)('activeTabs', {
+// Persistent vars for storage (write-only, no subscription to avoid oscillation)
+const _persistentActiveTabs = (0, peers_sdk_1.groupDeviceVar)('activeTabs', {
     defaultValue: [exports.launcherApp],
 });
-exports.activeTabId = (0, peers_sdk_1.groupDeviceVar)('activeTabId', {
+const _persistentActiveTabId = (0, peers_sdk_1.groupDeviceVar)('activeTabId', {
     defaultValue: 'launcher',
 });
-exports.recentlyUsedApps = (0, peers_sdk_1.groupUserVar)('recentlyUsedApps', {
+const _persistentRecentlyUsedApps = (0, peers_sdk_1.groupUserVar)('recentlyUsedApps', {
     defaultValue: [],
 });
+// In-memory observables for UI state (loaded once, then write-through to persistent vars)
+exports.activeTabs = (() => {
+    const obs = (0, peers_sdk_1.observable)([exports.launcherApp]);
+    // Write-through to persistent var on change
+    obs.subscribe(value => {
+        _persistentActiveTabs(value);
+    });
+    // Load initial value once
+    const loadingPromise = _persistentActiveTabs.loadingPromise.then(() => {
+        obs(_persistentActiveTabs());
+    });
+    return Object.assign(obs, { loadingPromise });
+})();
+exports.activeTabId = (() => {
+    const obs = (0, peers_sdk_1.observable)('launcher');
+    // Write-through to persistent var on change
+    obs.subscribe(value => {
+        _persistentActiveTabId(value);
+    });
+    // Load initial value once
+    const loadingPromise = _persistentActiveTabId.loadingPromise.then(() => {
+        obs(_persistentActiveTabId());
+    });
+    return Object.assign(obs, { loadingPromise });
+})();
+exports.recentlyUsedApps = (() => {
+    const obs = (0, peers_sdk_1.observable)([]);
+    // Write-through to persistent var on change
+    obs.subscribe(value => {
+        _persistentRecentlyUsedApps(value);
+    });
+    // Load initial value once
+    const loadingPromise = _persistentRecentlyUsedApps.loadingPromise.then(() => {
+        obs(_persistentRecentlyUsedApps());
+    });
+    return Object.assign(obs, { loadingPromise });
+})();
 exports.initializedTabs = new Set();
 function goToTabPath(path) {
     const tab = (0, exports.activeTabs)().find(t => t.path === path);

package/dist/ui-router/ui-loader.js

@@ -225,26 +225,59 @@ const UILoader = (args) => {
     return react_1.default.createElement(UIAsyncLoader, { ...args });
 };
 const uiLoadingPromises = {};
+// Check if we're running in a React Native WebView (has injectUIBundle available)
+const isReactNativeWebView = typeof window.ReactNativeWebView !== 'undefined';
 function loadUIBundle(pkg, forceRefresh) {
     // Dynamically import the bundle
     let importPromise = uiLoadingPromises[pkg.packageId];
     if (!importPromise || forceRefresh) {
+        const sTime = Date.now();
         console.log(`loading ui bundle for ${pkg.name}`);
         importPromise = new Promise(async (resolve, reject) => {
             try {
-                let bundleCode = '';
-                if (pkg.uiBundleFileId) {
-                    bundleCode = await peers_sdk_1.rpcServerCalls.getFileContents(pkg.uiBundleFileId);
+                if (!pkg.uiBundleFileId) {
+                    resolve();
+                    return;
                 }
-                if (bundleCode) {
-                    const exportUIs = (peerUIs) => {
-                        // TODO maybe add packageId that this came from
-                        peerUIs?.uis?.forEach(ui => {
-                            peersUIs[ui.peersUIId] = ui;
-                        });
-                    };
-                    const bundleFunction = new Function('exportUIs', bundleCode);
-                    await bundleFunction(exportUIs);
+                // Use fast injection path for React Native WebView
+                if (isReactNativeWebView && peers_sdk_1.rpcServerCalls.injectUIBundle) {
+                    // Set up listeners for bundle load completion
+                    const _window = window;
+                    _window.__peersUIs = _window.__peersUIs || {};
+                    const loadPromise = new Promise((resolveLoad, rejectLoad) => {
+                        const fileId = pkg.uiBundleFileId;
+                        _window.__peersUIBundleLoaded = (loadedFileId) => {
+                            if (loadedFileId === fileId) {
+                                // Copy loaded UIs to our local registry
+                                Object.keys(_window.__peersUIs || {}).forEach(peersUIId => {
+                                    peersUIs[peersUIId] = _window.__peersUIs[peersUIId];
+                                });
+                                resolveLoad();
+                            }
+                        };
+                        _window.__peersUIBundleError = (errorFileId, errorMsg) => {
+                            if (errorFileId === fileId) {
+                                rejectLoad(new Error(errorMsg));
+                            }
+                        };
+                    });
+                    await peers_sdk_1.rpcServerCalls.injectUIBundle(pkg.uiBundleFileId);
+                    await loadPromise;
+                    console.log(`finished loading ui bundle for ${pkg.name}: ${(Date.now() - sTime).toFixed(0)}ms`);
+                }
+                else {
+                    // Fallback: use postMessage-based getFileContents (slower for large bundles)
+                    let bundleCode = await peers_sdk_1.rpcServerCalls.getFileContents(pkg.uiBundleFileId);
+                    if (bundleCode) {
+                        const exportUIs = (peerUIs) => {
+                            peerUIs?.uis?.forEach(ui => {
+                                peersUIs[ui.peersUIId] = ui;
+                            });
+                        };
+                        const bundleFunction = new Function('exportUIs', bundleCode);
+                        await bundleFunction(exportUIs);
+                    }
+                    console.log(`finished loading ui bundle for ${pkg.name}: ${(Date.now() - sTime).toFixed(0)}ms, ${(bundleCode.length / 1000).toFixed(0)} KB`);
                 }
                 resolve();
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peers-app/peers-ui",
-  "version": "0.7.40",
+  "version": "0.8.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/peers-app/peers-ui.git"
@@ -27,7 +27,7 @@
   },
   "peerDependencies": {
     "bootstrap": "^5.3.3",
-    "@peers-app/peers-sdk": "^0.7.40",
+    "@peers-app/peers-sdk": "^0.8.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
@@ -57,7 +57,7 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^30.0.5",
     "path-browserify": "^1.0.1",
-    "@peers-app/peers-sdk": "0.7.40",
+    "@peers-app/peers-sdk": "0.8.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "string-width": "^7.1.0",

package/src/command-palette/command-palette.ts

@@ -1,4 +1,4 @@
-import { deviceVar } from "@peers-app/peers-sdk";
+import { observable } from "@peers-app/peers-sdk";
 import { goToTabPath } from '../tabs-layout/tabs-state';
 
 export interface Command {
@@ -12,14 +12,10 @@ export interface Command {
   isAvailable?: () => boolean;
 }
 
-// Command palette state (using device scope but with temporary defaults)
-export const isCommandPaletteOpen = deviceVar<boolean>('commandPaletteOpen', {
-  defaultValue: false,
-});
+// Command palette state (in-memory only, no persistence needed)
+export const isCommandPaletteOpen = observable<boolean>(false);
 
-export const commandSearchQuery = deviceVar<string>('commandSearchQuery', {
-  defaultValue: '',
-});
+export const commandSearchQuery = observable<string>('');
 
 // Command registry
 const registeredCommands = new Map<string, Command>();

package/src/components/group-switcher.tsx

@@ -4,9 +4,10 @@ import { usePromise } from '../hooks';
 
 interface GroupSwitcherProps {
   colorMode: string;
+  isMobile?: boolean;
 }
 
-export function GroupSwitcher({ colorMode }: GroupSwitcherProps) {
+export function GroupSwitcher({ colorMode, isMobile = false }: GroupSwitcherProps) {
   const [showDropdown, setShowDropdown] = useState(false);
   const [showCreateModal, setShowCreateModal] = useState(false);
   const [allGroups, setAllGroups] = useState<IGroup[]>([]);
@@ -62,16 +63,17 @@ export function GroupSwitcher({ colorMode }: GroupSwitcherProps) {
     <>
       <div className="dropdown">
         <button
-          className="btn btn-sm me-2 d-flex align-items-center"
+          className={`btn btn-sm ${isMobile ? '' : 'me-2'} d-flex align-items-center`}
           onClick={() => setShowDropdown(!showDropdown)}
           title={`Current group: ${getGroupName(currentGroup)}`}
           style={{
-            padding: '4px 8px',
+            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';
@@ -82,10 +84,12 @@ export function GroupSwitcher({ colorMode }: GroupSwitcherProps) {
             e.currentTarget.style.color = isDark ? '#adb5bd' : '#6c757d';
           }}
         >
-          <i className={`${getGroupIcon(currentGroup)} me-1`} style={{ fontSize: '14px' }} />
-          <span className="text-truncate" style={{ maxWidth: '80px' }}>
-            {getGroupName(currentGroup)}
-          </span>
+          <i className={`${getGroupIcon(currentGroup)} ${isMobile ? '' : 'me-1'}`} style={{ fontSize: '14px' }} />
+          {!isMobile && (
+            <span className="text-truncate" style={{ maxWidth: '80px' }}>
+              {getGroupName(currentGroup)}
+            </span>
+          )}
           <i className="bi-chevron-down ms-1" style={{ fontSize: '10px' }} />
         </button>
 

package/src/screens/contacts/contact-list.tsx

@@ -127,6 +127,10 @@ export function ContactList() {
           <i className="bi-person-fill-check me-2" />
           Contacts
         </h4>
+        <a href="#contacts/connect" className="btn btn-primary btn-sm">
+          <i className="bi-person-plus me-1" />
+          Connect to New User
+        </a>
       </div>
 
       <div className="input-group mb-3">