@peers-app/peers-ui 0.12.5 → 0.13.0

package/dist/components/group-switcher.js

@@ -110,17 +110,17 @@ function GroupSwitcher({ colorMode, isMobile = false }) {
                     maxHeight: '300px',
                     overflowY: 'auto'
                 } },
-                react_1.default.createElement("div", { className: `dropdown-item d-flex align-items-center ${!currentGroup ? 'active' : ''}`, style: { cursor: 'pointer' }, onClick: () => handleGroupSelect(null) },
+                react_1.default.createElement("button", { className: `dropdown-item d-flex align-items-center ${!currentGroup ? 'active' : ''}`, style: { cursor: 'pointer', border: 'none', background: 'none', width: '100%', textAlign: 'left' }, onClick: () => handleGroupSelect(null) },
                     react_1.default.createElement("i", { className: "bi-person-fill me-2" }),
                     react_1.default.createElement("span", null, "Personal")),
                 allGroups.length > 0 && (react_1.default.createElement("div", { className: "dropdown-divider" })),
                 allGroups
                     .filter((g) => !g.disabled)
-                    .map((group) => (react_1.default.createElement("div", { key: group.groupId, className: `dropdown-item d-flex align-items-center ${currentGroup?.groupId === group.groupId ? 'active' : ''}`, style: { cursor: 'pointer' }, onClick: () => handleGroupSelect(group) },
+                    .map((group) => (react_1.default.createElement("button", { key: group.groupId, className: `dropdown-item d-flex align-items-center ${currentGroup?.groupId === group.groupId ? 'active' : ''}`, style: { cursor: 'pointer', border: 'none', background: 'none', width: '100%', textAlign: 'left' }, onClick: () => handleGroupSelect(group) },
                     react_1.default.createElement("i", { className: `${getGroupIcon(group)} me-2` }),
                     react_1.default.createElement("span", { className: "text-truncate" }, group.name)))),
                 react_1.default.createElement("div", { className: "dropdown-divider" }),
-                react_1.default.createElement("div", { className: "dropdown-item d-flex align-items-center", style: { cursor: 'pointer' }, onClick: handleCreateClick },
+                react_1.default.createElement("button", { className: "dropdown-item d-flex align-items-center", style: { cursor: 'pointer', border: 'none', background: 'none', width: '100%', textAlign: 'left' }, onClick: handleCreateClick },
                     react_1.default.createElement("i", { className: "bi-plus-circle me-2" }),
                     react_1.default.createElement("span", null, "Create Group")))),
             showDropdown && (react_1.default.createElement("div", { className: "position-fixed w-100 h-100", style: { top: 0, left: 0, zIndex: 999 }, onClick: () => setShowDropdown(false) }))),

package/dist/globals.js

@@ -124,11 +124,11 @@ async function loadGlobals() {
         await peers_sdk_1.rpcServerCalls.addOrUpdatePackage('updateAll');
     }
     await Promise.all([
-        (0, peers_sdk_1.Groups)().list().then(exports.groups),
+        (0, peers_sdk_1.Groups)().list().then(r => (0, exports.groups)(r)),
         exports._mainContentPath.loadingPromise,
         exports.openThreads.loadingPromise,
         exports.threadViewOpen.loadingPromise,
-        (0, peers_sdk_1.sleep)(100), // hacky way to prevent some jank
+        (0, peers_sdk_1.sleep)(100),
     ]);
     function updateWindowHash() {
         const currentPath = window.location.hash.substring(1);

package/dist/index.d.ts

@@ -1,6 +1,8 @@
+export * from "./hooks";
 export * from "./screens/events/cron";
 export * from "./tabs-layout/tabs-layout";
-export { activeTabId, activeTabs, TabState } from "./tabs-layout/tabs-state";
+export { activeTabId, activeTabs, TabState, updateActiveTabTitle, closeCurrentTab, goToTabPath } from "./tabs-layout/tabs-state";
+export { mainContentPath } from "./globals";
 export * from "./components/voice-indicator";
 export * from "./components/chat-overlay";
 export * from "./components/sortable-list";

package/dist/index.js

@@ -14,12 +14,18 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.activeTabs = exports.activeTabId = void 0;
+exports.mainContentPath = exports.goToTabPath = exports.closeCurrentTab = exports.updateActiveTabTitle = exports.activeTabs = exports.activeTabId = void 0;
+__exportStar(require("./hooks"), exports);
 __exportStar(require("./screens/events/cron"), exports);
 __exportStar(require("./tabs-layout/tabs-layout"), exports);
 var tabs_state_1 = require("./tabs-layout/tabs-state");
 Object.defineProperty(exports, "activeTabId", { enumerable: true, get: function () { return tabs_state_1.activeTabId; } });
 Object.defineProperty(exports, "activeTabs", { enumerable: true, get: function () { return tabs_state_1.activeTabs; } });
+Object.defineProperty(exports, "updateActiveTabTitle", { enumerable: true, get: function () { return tabs_state_1.updateActiveTabTitle; } });
+Object.defineProperty(exports, "closeCurrentTab", { enumerable: true, get: function () { return tabs_state_1.closeCurrentTab; } });
+Object.defineProperty(exports, "goToTabPath", { enumerable: true, get: function () { return tabs_state_1.goToTabPath; } });
+var globals_1 = require("./globals");
+Object.defineProperty(exports, "mainContentPath", { enumerable: true, get: function () { return globals_1.mainContentPath; } });
 __exportStar(require("./components/voice-indicator"), exports);
 __exportStar(require("./components/chat-overlay"), exports);
 __exportStar(require("./components/sortable-list"), exports);

package/dist/screens/packages/package-versions.js

@@ -136,6 +136,28 @@ const PackageVersionsList = (props) => {
             setDeleting(null);
         }
     }
+    async function promoteVersion(pv, newTag) {
+        try {
+            const pvHash = (0, peers_sdk_1.computePackageVersionHash)(pv.version, newTag, pv.packageBundleFileHash, pv.routesBundleFileHash, pv.uiBundleFileHash);
+            const updated = { ...pv, versionTag: newTag, packageVersionHash: pvHash };
+            await (0, peers_sdk_1.PackageVersions)().signAndSave(updated, { saveAsSnapshot: true });
+            refreshKey(refreshKey() + 1);
+        }
+        catch (err) {
+            alert(`Failed to promote version: ${err}`);
+        }
+    }
+    async function updateVersion(pv, newSemver) {
+        try {
+            const pvHash = (0, peers_sdk_1.computePackageVersionHash)(newSemver, pv.versionTag || 'beta', pv.packageBundleFileHash, pv.routesBundleFileHash, pv.uiBundleFileHash);
+            const updated = { ...pv, version: newSemver, packageVersionHash: pvHash };
+            await (0, peers_sdk_1.PackageVersions)().signAndSave(updated, { saveAsSnapshot: true });
+            refreshKey(refreshKey() + 1);
+        }
+        catch (err) {
+            alert(`Failed to update version: ${err}`);
+        }
+    }
     async function pinVersion() {
         setPinning(true);
         try {
@@ -168,30 +190,59 @@ const PackageVersionsList = (props) => {
             sorted.length,
             " version",
             sorted.length !== 1 ? 's' : ''),
-        react_1.default.createElement("div", { className: "list-group mt-2" }, sorted.map(pv => {
-            const isActive = pv.packageVersionId === activeVersionId;
-            const creatorName = userMap.get(pv.createdBy);
-            return (react_1.default.createElement("div", { key: pv.packageVersionId, className: `list-group-item ${isActive ? 'list-group-item-success' : ''}` },
-                react_1.default.createElement("div", { className: "d-flex align-items-center justify-content-between" },
-                    react_1.default.createElement("div", null,
-                        react_1.default.createElement("strong", { className: "me-2" },
-                            "v",
-                            pv.version),
-                        pv.versionTag && (react_1.default.createElement("span", { className: `badge ${tagBadgeClass(pv.versionTag)} me-2` }, pv.versionTag)),
-                        react_1.default.createElement("code", { className: "text-muted small me-2" }, pv.packageVersionHash?.substring(0, 8)),
-                        react_1.default.createElement("small", { className: "text-muted me-2" }, formatDate(pv.createdAt)),
-                        creatorName && (react_1.default.createElement("small", { className: "text-muted" },
-                            "by ",
-                            creatorName))),
-                    react_1.default.createElement("div", { className: "d-flex gap-1" },
-                        isActive ? (react_1.default.createElement(react_1.default.Fragment, null,
-                            react_1.default.createElement("button", { className: "btn btn-sm btn-outline-secondary", disabled: isPinned || pinning, onClick: () => pinVersion(), title: isPinned ? 'Already pinned' : 'Pin to this version (disable auto-updates)' },
-                                pinning ? (react_1.default.createElement("span", { className: "spinner-border spinner-border-sm" })) : (react_1.default.createElement("i", { className: "bi bi-pin-fill" })),
-                                isPinned ? ' Pinned' : ' Pin'),
-                            react_1.default.createElement("span", { className: "badge text-bg-success align-self-center" }, "active"))) : (react_1.default.createElement("button", { className: "btn btn-sm btn-outline-primary", disabled: activating === pv.packageVersionId, onClick: () => activateVersion(pv) },
-                            activating === pv.packageVersionId ? (react_1.default.createElement("span", { className: "spinner-border spinner-border-sm me-1" })) : (react_1.default.createElement("i", { className: "bi bi-check2-circle me-1" })),
-                            "Activate")),
-                        !isActive && (react_1.default.createElement("button", { className: "btn btn-sm btn-outline-danger", disabled: deleting === pv.packageVersionId, onClick: () => deleteVersion(pv) }, deleting === pv.packageVersionId ? (react_1.default.createElement("span", { className: "spinner-border spinner-border-sm" })) : (react_1.default.createElement("i", { className: "bi bi-trash" }))))))));
-        }))));
+        react_1.default.createElement("div", { className: "list-group mt-2" }, sorted.map(pv => (react_1.default.createElement(VersionRow, { key: pv.packageVersionId, pv: pv, isActive: pv.packageVersionId === activeVersionId, isPinned: isPinned, pinning: pinning, activating: activating, deleting: deleting, userMap: userMap, onActivate: activateVersion, onDelete: deleteVersion, onPin: pinVersion, onPromote: promoteVersion, onUpdateVersion: updateVersion }))))));
 };
 exports.PackageVersionsList = PackageVersionsList;
+const TAG_OPTIONS = ['beta', 'stable'];
+function VersionRow(props) {
+    const { pv, isActive, isPinned, pinning, activating, deleting, userMap } = props;
+    const creatorName = userMap.get(pv.createdBy);
+    const [editingVersion, setEditingVersion] = (0, react_1.useState)(false);
+    const [versionDraft, setVersionDraft] = (0, react_1.useState)(pv.version);
+    function startEditing() {
+        setVersionDraft(pv.version);
+        setEditingVersion(true);
+    }
+    function commitVersion() {
+        const trimmed = versionDraft.trim();
+        if (trimmed && trimmed !== pv.version) {
+            props.onUpdateVersion(pv, trimmed);
+        }
+        setEditingVersion(false);
+    }
+    const currentTag = pv.versionTag || 'beta';
+    const promoteTargets = TAG_OPTIONS.filter(t => t !== currentTag);
+    return (react_1.default.createElement("div", { className: `list-group-item ${isActive ? 'list-group-item-success' : ''}` },
+        react_1.default.createElement("div", { className: "d-flex align-items-center justify-content-between" },
+            react_1.default.createElement("div", { className: "d-flex align-items-center flex-wrap" },
+                editingVersion ? (react_1.default.createElement("input", { type: "text", className: "form-control form-control-sm me-2", style: { width: '7em' }, value: versionDraft, onChange: e => setVersionDraft(e.target.value), onBlur: commitVersion, onKeyDown: e => {
+                        if (e.key === 'Enter')
+                            commitVersion();
+                        if (e.key === 'Escape')
+                            setEditingVersion(false);
+                    }, autoFocus: true })) : (react_1.default.createElement("strong", { className: "me-2", style: { cursor: 'pointer' }, onClick: startEditing, title: "Click to edit version" },
+                    "v",
+                    pv.version)),
+                pv.versionTag && (react_1.default.createElement("span", { className: `badge ${tagBadgeClass(pv.versionTag)} me-2` }, pv.versionTag)),
+                react_1.default.createElement("code", { className: "text-muted small me-2" }, pv.packageVersionHash?.substring(0, 8)),
+                react_1.default.createElement("small", { className: "text-muted me-2" }, formatDate(pv.createdAt)),
+                creatorName && (react_1.default.createElement("small", { className: "text-muted" },
+                    "by ",
+                    creatorName))),
+            react_1.default.createElement("div", { className: "d-flex gap-1 align-items-center" },
+                promoteTargets.length > 0 && (react_1.default.createElement("div", { className: "dropdown" },
+                    react_1.default.createElement("button", { className: "btn btn-sm btn-outline-info dropdown-toggle", "data-bs-toggle": "dropdown", title: "Change version tag" }, "Promote"),
+                    react_1.default.createElement("ul", { className: "dropdown-menu dropdown-menu-end" }, promoteTargets.map(tag => (react_1.default.createElement("li", { key: tag },
+                        react_1.default.createElement("button", { className: "dropdown-item", onClick: () => props.onPromote(pv, tag) },
+                            currentTag,
+                            " \u2192 ",
+                            tag))))))),
+                isActive ? (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("button", { className: "btn btn-sm btn-outline-secondary", disabled: isPinned || pinning, onClick: () => props.onPin(), title: isPinned ? 'Already pinned' : 'Pin to this version (disable auto-updates)' },
+                        pinning ? (react_1.default.createElement("span", { className: "spinner-border spinner-border-sm" })) : (react_1.default.createElement("i", { className: "bi bi-pin-fill" })),
+                        isPinned ? ' Pinned' : ' Pin'),
+                    react_1.default.createElement("span", { className: "badge text-bg-success align-self-center" }, "active"))) : (react_1.default.createElement("button", { className: "btn btn-sm btn-outline-primary", disabled: activating === pv.packageVersionId, onClick: () => props.onActivate(pv) },
+                    activating === pv.packageVersionId ? (react_1.default.createElement("span", { className: "spinner-border spinner-border-sm me-1" })) : (react_1.default.createElement("i", { className: "bi bi-check2-circle me-1" })),
+                    "Activate")),
+                !isActive && (react_1.default.createElement("button", { className: "btn btn-sm btn-outline-danger", disabled: deleting === pv.packageVersionId, onClick: () => props.onDelete(pv) }, deleting === pv.packageVersionId ? (react_1.default.createElement("span", { className: "spinner-border spinner-border-sm" })) : (react_1.default.createElement("i", { className: "bi bi-trash" }))))))));
+}

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

@@ -67,7 +67,9 @@ const SettingsPage = () => {
 };
 exports.SettingsPage = SettingsPage;
 const UserSettingsTab = () => {
-    return (react_1.default.createElement(ProfileSection, null));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(ProfileSection, null),
+        react_1.default.createElement(LogoutSection, null)));
 };
 const AppearanceSettingsTab = () => {
     return (react_1.default.createElement(react_1.default.Fragment, null,
@@ -234,3 +236,18 @@ const DeleteLocalDatabase = () => {
                 }
             } }, "Delete Local Database")));
 };
+const showLogoutInSettings = typeof window !== 'undefined'
+    && !window.electronAPI
+    && !window.ReactNativeWebView;
+const LogoutSection = () => {
+    if (!showLogoutInSettings)
+        return null;
+    return (react_1.default.createElement("div", { className: "mt-4 pt-3 border-top" },
+        react_1.default.createElement("button", { className: "btn btn-outline-danger btn-sm", onClick: async () => {
+                const confirmed = confirm('Are you sure you want to logout? This will clear your credentials from this browser. ' +
+                    'Make sure you have your User ID and Secret Key saved securely, or you will lose access to your account.');
+                if (!confirmed)
+                    return;
+                await peers_sdk_1.rpcServerCalls.logout();
+            } }, "Logout")));
+};

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

@@ -96,14 +96,13 @@ function TabsLayout(props) {
         userContextInitialized = true;
     }
     const loaded = (0, hooks_1.usePromise)(async () => {
-        await (0, globals_1.loadGlobals)().then(() => console.log('Globals loaded'));
-        await (0, routes_loader_1.loadAllRoutes)().then(() => console.log('Routes loaded'));
-        // Wait for tab state and welcome modal state to load from database
+        await (0, globals_1.loadGlobals)();
+        await (0, routes_loader_1.loadAllRoutes)();
         await Promise.all([
             tabs_state_1.activeTabs.loadingPromise,
             tabs_state_1.activeTabId.loadingPromise,
             tabs_state_1.recentlyUsedApps.loadingPromise,
-            peers_sdk_1.hasShownWelcomeModal.loadingPromise
+            peers_sdk_1.hasShownWelcomeModal.loadingPromise,
         ]);
         return true;
     });
@@ -422,10 +421,13 @@ function AppSection({ title, iconClassName, apps, onOpenApp, isMobile }) {
 function AppCard({ appItem, onOpenApp, isMobile }) {
     const [_colorMode] = (0, hooks_1.useObservable)(color_mode_dropdown_1.colorMode);
     const isDark = _colorMode === 'dark';
-    return (react_1.default.createElement("div", { className: "d-flex flex-column align-items-center text-center", style: {
+    return (react_1.default.createElement("button", { className: "d-flex flex-column align-items-center text-center", style: {
             cursor: 'pointer',
             width: isMobile ? '80px' : '90px',
-            transition: 'all 0.15s ease'
+            transition: 'all 0.15s ease',
+            background: 'none',
+            border: 'none',
+            padding: 0,
         }, title: appItem.name, onMouseEnter: (e) => {
             e.currentTarget.style.transform = 'scale(1.05)';
         }, onMouseLeave: (e) => {
@@ -442,7 +444,7 @@ function AppCard({ appItem, onOpenApp, isMobile }) {
             } },
             react_1.default.createElement("i", { className: appItem.iconClassName, style: {
                     fontSize: isMobile ? '28px' : '32px',
-                    color: isDark ? '#0d6efd' : '#0d6efd' // Keep primary blue for both themes
+                    color: isDark ? '#0d6efd' : '#0d6efd'
                 } })),
         react_1.default.createElement("span", { className: isDark ? 'text-light' : 'text-dark', style: {
                 fontSize: isMobile ? '11px' : '12px',

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

@@ -164,7 +164,10 @@ function determineAppFromPath(path) {
             const pkg = _allPackages.find(p => p.packageId === packageId);
             if (pkg) {
                 const subPath = parts.slice(1).join('/');
-                const navItem = pkg.appNavs?.find(n => n.navigationPath === subPath || n.name.toLowerCase() === subPath);
+                const navItem = pkg.appNavs?.find(n => {
+                    const navPath = n.navigationPath || n.name.toLowerCase();
+                    return subPath === navPath || subPath.startsWith(navPath + '/');
+                });
                 if (navItem) {
                     return {
                         navItem,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peers-app/peers-ui",
-  "version": "0.12.5",
+  "version": "0.13.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/peers-app/peers-ui.git"
@@ -26,7 +26,7 @@
     "test:coverage": "jest --coverage"
   },
   "peerDependencies": {
-    "@peers-app/peers-sdk": "^0.12.5",
+    "@peers-app/peers-sdk": "^0.13.0",
     "bootstrap": "^5.3.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
@@ -36,7 +36,7 @@
     "@babel/preset-env": "^7.24.5",
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@peers-app/peers-sdk": "0.12.5",
+    "@peers-app/peers-sdk": "0.13.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",

package/src/components/group-switcher.tsx

@@ -106,14 +106,14 @@ export function GroupSwitcher({ colorMode, isMobile = false }: GroupSwitcherProp
             }}
           >
             {/* Personal Group */}
-            <div
+            <button
               className={`dropdown-item d-flex align-items-center ${!currentGroup ? 'active' : ''}`}
-              style={{ cursor: 'pointer' }}
+              style={{ cursor: 'pointer', border: 'none', background: 'none', width: '100%', textAlign: 'left' }}
               onClick={() => handleGroupSelect(null)}
             >
               <i className="bi-person-fill me-2" />
               <span>Personal</span>
-            </div>
+            </button>
 
             {/* Divider */}
             {allGroups.length > 0 && (
@@ -124,27 +124,27 @@ export function GroupSwitcher({ colorMode, isMobile = false }: GroupSwitcherProp
             {allGroups
               .filter((g: IGroup) => !g.disabled)
               .map((group: IGroup) => (
-                <div
+                <button
                   key={group.groupId}
                   className={`dropdown-item d-flex align-items-center ${currentGroup?.groupId === group.groupId ? 'active' : ''}`}
-                  style={{ cursor: 'pointer' }}
+                  style={{ cursor: 'pointer', border: 'none', background: 'none', width: '100%', textAlign: 'left' }}
                   onClick={() => handleGroupSelect(group)}
                 >
                   <i className={`${getGroupIcon(group)} me-2`} />
                   <span className="text-truncate">{group.name}</span>
-                </div>
+                </button>
               ))}
 
             {/* Create New Group */}
             <div className="dropdown-divider" />
-            <div
+            <button
               className="dropdown-item d-flex align-items-center"
-              style={{ cursor: 'pointer' }}
+              style={{ cursor: 'pointer', border: 'none', background: 'none', width: '100%', textAlign: 'left' }}
               onClick={handleCreateClick}
             >
               <i className="bi-plus-circle me-2" />
               <span>Create Group</span>
-            </div>
+            </button>
           </div>
         )}
 

package/src/globals.tsx

@@ -134,11 +134,11 @@ export async function loadGlobals() {
     await rpcServerCalls.addOrUpdatePackage('updateAll');
   }
   await Promise.all([
-    Groups().list().then(groups),
+    Groups().list().then(r => groups(r)),
     _mainContentPath.loadingPromise,
     openThreads.loadingPromise,
     threadViewOpen.loadingPromise,
-    sleep(100), // hacky way to prevent some jank
+    sleep(100),
   ]);
 
   function updateWindowHash() {

package/src/index.tsx

@@ -1,7 +1,9 @@
+export * from "./hooks";
 export * from "./screens/events/cron";
 
 export * from "./tabs-layout/tabs-layout";
-export { activeTabId, activeTabs, TabState } from "./tabs-layout/tabs-state";
+export { activeTabId, activeTabs, TabState, updateActiveTabTitle, closeCurrentTab, goToTabPath } from "./tabs-layout/tabs-state";
+export { mainContentPath } from "./globals";
 export * from "./components/voice-indicator";
 export * from "./components/chat-overlay";
 export * from "./components/sortable-list";

package/src/screens/packages/package-versions.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { IDoc, IPackage, IPackageVersion, Packages, PackageVersions, Users } from "@peers-app/peers-sdk";
+import { computePackageVersionHash, IDoc, IPackage, IPackageVersion, Packages, PackageVersions, Users } from "@peers-app/peers-sdk";
 import { useObservable, useObservableState, usePromise } from "../../hooks";
 
 function formatDate(iso: string): string {
@@ -89,6 +89,28 @@ export const PackageVersionsList = (props: { pkg: IDoc<IPackage> }) => {
     }
   }
 
+  async function promoteVersion(pv: IPackageVersion, newTag: string) {
+    try {
+      const pvHash = computePackageVersionHash(pv.version, newTag, pv.packageBundleFileHash, pv.routesBundleFileHash, pv.uiBundleFileHash);
+      const updated = { ...pv, versionTag: newTag, packageVersionHash: pvHash };
+      await PackageVersions().signAndSave(updated, { saveAsSnapshot: true });
+      refreshKey(refreshKey() + 1);
+    } catch (err) {
+      alert(`Failed to promote version: ${err}`);
+    }
+  }
+
+  async function updateVersion(pv: IPackageVersion, newSemver: string) {
+    try {
+      const pvHash = computePackageVersionHash(newSemver, pv.versionTag || 'beta', pv.packageBundleFileHash, pv.routesBundleFileHash, pv.uiBundleFileHash);
+      const updated = { ...pv, version: newSemver, packageVersionHash: pvHash };
+      await PackageVersions().signAndSave(updated, { saveAsSnapshot: true });
+      refreshKey(refreshKey() + 1);
+    } catch (err) {
+      alert(`Failed to update version: ${err}`);
+    }
+  }
+
   async function pinVersion() {
     setPinning(true);
     try {
@@ -124,81 +146,174 @@ export const PackageVersionsList = (props: { pkg: IDoc<IPackage> }) => {
     <div>
       <small className="text-muted">{sorted.length} version{sorted.length !== 1 ? 's' : ''}</small>
       <div className="list-group mt-2">
-        {sorted.map(pv => {
-          const isActive = pv.packageVersionId === activeVersionId;
-          const creatorName = userMap.get(pv.createdBy);
-          return (
-            <div
-              key={pv.packageVersionId}
-              className={`list-group-item ${isActive ? 'list-group-item-success' : ''}`}
+        {sorted.map(pv => (
+          <VersionRow
+            key={pv.packageVersionId}
+            pv={pv}
+            isActive={pv.packageVersionId === activeVersionId}
+            isPinned={isPinned}
+            pinning={pinning}
+            activating={activating}
+            deleting={deleting}
+            userMap={userMap}
+            onActivate={activateVersion}
+            onDelete={deleteVersion}
+            onPin={pinVersion}
+            onPromote={promoteVersion}
+            onUpdateVersion={updateVersion}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const TAG_OPTIONS = ['beta', 'stable'];
+
+function VersionRow(props: {
+  pv: IPackageVersion;
+  isActive: boolean;
+  isPinned: boolean;
+  pinning: boolean;
+  activating: string | null;
+  deleting: string | null;
+  userMap: Map<string, string>;
+  onActivate: (pv: IPackageVersion) => void;
+  onDelete: (pv: IPackageVersion) => void;
+  onPin: () => void;
+  onPromote: (pv: IPackageVersion, newTag: string) => void;
+  onUpdateVersion: (pv: IPackageVersion, newSemver: string) => void;
+}) {
+  const { pv, isActive, isPinned, pinning, activating, deleting, userMap } = props;
+  const creatorName = userMap.get(pv.createdBy);
+  const [editingVersion, setEditingVersion] = useState(false);
+  const [versionDraft, setVersionDraft] = useState(pv.version);
+
+  function startEditing() {
+    setVersionDraft(pv.version);
+    setEditingVersion(true);
+  }
+
+  function commitVersion() {
+    const trimmed = versionDraft.trim();
+    if (trimmed && trimmed !== pv.version) {
+      props.onUpdateVersion(pv, trimmed);
+    }
+    setEditingVersion(false);
+  }
+
+  const currentTag = pv.versionTag || 'beta';
+  const promoteTargets = TAG_OPTIONS.filter(t => t !== currentTag);
+
+  return (
+    <div className={`list-group-item ${isActive ? 'list-group-item-success' : ''}`}>
+      <div className="d-flex align-items-center justify-content-between">
+        <div className="d-flex align-items-center flex-wrap">
+          {editingVersion ? (
+            <input
+              type="text"
+              className="form-control form-control-sm me-2"
+              style={{ width: '7em' }}
+              value={versionDraft}
+              onChange={e => setVersionDraft(e.target.value)}
+              onBlur={commitVersion}
+              onKeyDown={e => {
+                if (e.key === 'Enter') commitVersion();
+                if (e.key === 'Escape') setEditingVersion(false);
+              }}
+              autoFocus
+            />
+          ) : (
+            <strong
+              className="me-2"
+              style={{ cursor: 'pointer' }}
+              onClick={startEditing}
+              title="Click to edit version"
             >
-              <div className="d-flex align-items-center justify-content-between">
-                <div>
-                  <strong className="me-2">v{pv.version}</strong>
-                  {pv.versionTag && (
-                    <span className={`badge ${tagBadgeClass(pv.versionTag)} me-2`}>
-                      {pv.versionTag}
-                    </span>
-                  )}
-                  <code className="text-muted small me-2">
-                    {pv.packageVersionHash?.substring(0, 8)}
-                  </code>
-                  <small className="text-muted me-2">{formatDate(pv.createdAt)}</small>
-                  {creatorName && (
-                    <small className="text-muted">
-                      by {creatorName}
-                    </small>
-                  )}
-                </div>
-                <div className="d-flex gap-1">
-                  {isActive ? (<>
-                    <button
-                      className="btn btn-sm btn-outline-secondary"
-                      disabled={isPinned || pinning}
-                      onClick={() => pinVersion()}
-                      title={isPinned ? 'Already pinned' : 'Pin to this version (disable auto-updates)'}
-                    >
-                      {pinning ? (
-                        <span className="spinner-border spinner-border-sm" />
-                      ) : (
-                        <i className="bi bi-pin-fill"></i>
-                      )}
-                      {isPinned ? ' Pinned' : ' Pin'}
-                    </button>
-                    <span className="badge text-bg-success align-self-center">active</span>
-                  </>) : (
+              v{pv.version}
+            </strong>
+          )}
+          {pv.versionTag && (
+            <span className={`badge ${tagBadgeClass(pv.versionTag)} me-2`}>
+              {pv.versionTag}
+            </span>
+          )}
+          <code className="text-muted small me-2">
+            {pv.packageVersionHash?.substring(0, 8)}
+          </code>
+          <small className="text-muted me-2">{formatDate(pv.createdAt)}</small>
+          {creatorName && (
+            <small className="text-muted">by {creatorName}</small>
+          )}
+        </div>
+        <div className="d-flex gap-1 align-items-center">
+          {promoteTargets.length > 0 && (
+            <div className="dropdown">
+              <button
+                className="btn btn-sm btn-outline-info dropdown-toggle"
+                data-bs-toggle="dropdown"
+                title="Change version tag"
+              >
+                Promote
+              </button>
+              <ul className="dropdown-menu dropdown-menu-end">
+                {promoteTargets.map(tag => (
+                  <li key={tag}>
                     <button
-                      className="btn btn-sm btn-outline-primary"
-                      disabled={activating === pv.packageVersionId}
-                      onClick={() => activateVersion(pv)}
+                      className="dropdown-item"
+                      onClick={() => props.onPromote(pv, tag)}
                     >
-                      {activating === pv.packageVersionId ? (
-                        <span className="spinner-border spinner-border-sm me-1" />
-                      ) : (
-                        <i className="bi bi-check2-circle me-1"></i>
-                      )}
-                      Activate
+                      {currentTag} &rarr; {tag}
                     </button>
-                  )}
-                  {!isActive && (
-                    <button
-                      className="btn btn-sm btn-outline-danger"
-                      disabled={deleting === pv.packageVersionId}
-                      onClick={() => deleteVersion(pv)}
-                    >
-                      {deleting === pv.packageVersionId ? (
-                        <span className="spinner-border spinner-border-sm" />
-                      ) : (
-                        <i className="bi bi-trash"></i>
-                      )}
-                    </button>
-                  )}
-                </div>
-              </div>
+                  </li>
+                ))}
+              </ul>
             </div>
-          );
-        })}
+          )}
+          {isActive ? (<>
+            <button
+              className="btn btn-sm btn-outline-secondary"
+              disabled={isPinned || pinning}
+              onClick={() => props.onPin()}
+              title={isPinned ? 'Already pinned' : 'Pin to this version (disable auto-updates)'}
+            >
+              {pinning ? (
+                <span className="spinner-border spinner-border-sm" />
+              ) : (
+                <i className="bi bi-pin-fill"></i>
+              )}
+              {isPinned ? ' Pinned' : ' Pin'}
+            </button>
+            <span className="badge text-bg-success align-self-center">active</span>
+          </>) : (
+            <button
+              className="btn btn-sm btn-outline-primary"
+              disabled={activating === pv.packageVersionId}
+              onClick={() => props.onActivate(pv)}
+            >
+              {activating === pv.packageVersionId ? (
+                <span className="spinner-border spinner-border-sm me-1" />
+              ) : (
+                <i className="bi bi-check2-circle me-1"></i>
+              )}
+              Activate
+            </button>
+          )}
+          {!isActive && (
+            <button
+              className="btn btn-sm btn-outline-danger"
+              disabled={deleting === pv.packageVersionId}
+              onClick={() => props.onDelete(pv)}
+            >
+              {deleting === pv.packageVersionId ? (
+                <span className="spinner-border spinner-border-sm" />
+              ) : (
+                <i className="bi bi-trash"></i>
+              )}
+            </button>
+          )}
+        </div>
       </div>
     </div>
   );
-};
+}

package/src/screens/settings/settings-page.tsx

@@ -36,7 +36,10 @@ export const SettingsPage: React.FC = () => {
 
 const UserSettingsTab: React.FC = () => {
   return (
-    <ProfileSection />
+    <>
+      <ProfileSection />
+      <LogoutSection />
+    </>
   );
 };
 
@@ -319,4 +322,29 @@ const DeleteLocalDatabase: React.FC = () => {
       </button>
     </div>
   );
+}
+
+const showLogoutInSettings = typeof window !== 'undefined'
+  && !(window as any).electronAPI
+  && !(window as any).ReactNativeWebView;
+
+const LogoutSection: React.FC = () => {
+  if (!showLogoutInSettings) return null;
+  return (
+    <div className="mt-4 pt-3 border-top">
+      <button
+        className="btn btn-outline-danger btn-sm"
+        onClick={async () => {
+          const confirmed = confirm(
+            'Are you sure you want to logout? This will clear your credentials from this browser. ' +
+            'Make sure you have your User ID and Secret Key saved securely, or you will lose access to your account.'
+          );
+          if (!confirmed) return;
+          await rpcServerCalls.logout();
+        }}
+      >
+        Logout
+      </button>
+    </div>
+  );
 }

package/src/tabs-layout/tabs-layout.tsx

@@ -87,14 +87,13 @@ export function TabsLayout(props: { userId: string }) {
   }
   
   const loaded = usePromise(async () => {
-    await loadGlobals().then(() => console.log('Globals loaded'));
-    await loadAllRoutes().then(() => console.log('Routes loaded'));
-    // Wait for tab state and welcome modal state to load from database
+    await loadGlobals();
+    await loadAllRoutes();
     await Promise.all([
       activeTabs.loadingPromise,
       activeTabId.loadingPromise,
       recentlyUsedApps.loadingPromise,
-      hasShownWelcomeModal.loadingPromise
+      hasShownWelcomeModal.loadingPromise,
     ]);
     return true;
   });
@@ -730,12 +729,15 @@ function AppCard({ appItem, onOpenApp, isMobile }: AppCardProps) {
   const isDark = _colorMode === 'dark';
 
   return (
-    <div
+    <button
       className="d-flex flex-column align-items-center text-center"
       style={{
         cursor: 'pointer',
         width: isMobile ? '80px' : '90px',
-        transition: 'all 0.15s ease'
+        transition: 'all 0.15s ease',
+        background: 'none',
+        border: 'none',
+        padding: 0,
       }}
       title={appItem.name}
       onMouseEnter={(e) => {
@@ -746,7 +748,6 @@ function AppCard({ appItem, onOpenApp, isMobile }: AppCardProps) {
       }}
       onClick={() => onOpenApp(appItem)}
     >
-      {/* Icon Container */}
       <div
         className="d-flex align-items-center justify-content-center mb-2"
         style={{
@@ -763,12 +764,11 @@ function AppCard({ appItem, onOpenApp, isMobile }: AppCardProps) {
           className={appItem.iconClassName}
           style={{
             fontSize: isMobile ? '28px' : '32px',
-            color: isDark ? '#0d6efd' : '#0d6efd' // Keep primary blue for both themes
+            color: isDark ? '#0d6efd' : '#0d6efd'
           }}
         />
       </div>
 
-      {/* Title */}
       <span
         className={isDark ? 'text-light' : 'text-dark'}
         style={{
@@ -783,6 +783,6 @@ function AppCard({ appItem, onOpenApp, isMobile }: AppCardProps) {
       >
         {appItem.displayName}
       </span>
-    </div>
+    </button>
   );
 }

package/src/tabs-layout/tabs-state.ts

@@ -194,7 +194,10 @@ export function determineAppFromPath(path: string): AppInfo | undefined {
       const pkg = _allPackages.find(p => p.packageId === packageId);
       if (pkg) {
         const subPath = parts.slice(1).join('/');
-        const navItem = pkg.appNavs?.find(n => n.navigationPath === subPath || n.name.toLowerCase() === subPath);
+        const navItem = pkg.appNavs?.find(n => {
+          const navPath = n.navigationPath || n.name.toLowerCase();
+          return subPath === navPath || subPath.startsWith(navPath + '/');
+        });
         if (navItem) {
           return {
             navItem,