@peers-app/peers-ui 0.9.4 → 0.10.1

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

@@ -10,11 +10,13 @@ const loading_indicator_1 = require("../../components/loading-indicator");
 const save_button_1 = require("../../components/save-button");
 const tabs_1 = require("../../components/tabs");
 const package_info_1 = require("./package-info");
+const package_versions_1 = require("./package-versions");
 const hooks_1 = require("../../hooks");
 const input_1 = require("../../components/input");
 const tabs_state_1 = require("../../tabs-layout/tabs-state");
 const PackageDetails = (props) => {
     const refresh = (0, hooks_1.useObservableState)(Date.now());
+    const saveDeviceTagRef = react_1.default.useRef(null);
     const pkg = (0, hooks_1.usePromise)(async () => {
         const pkg = await (0, peers_sdk_1.Packages)().get(props.packageId);
         if (!pkg) {
@@ -62,13 +64,20 @@ const PackageDetails = (props) => {
                 react_1.default.createElement("h4", null,
                     react_1.default.createElement(input_1.Input, { key: pkg.packageId, className: 'border border-0', style: { width: '100%', outline: 'none', backgroundColor: 'transparent' }, value: pkg.qs.name }))),
             react_1.default.createElement("div", null,
-                react_1.default.createElement(save_button_1.SaveButton, { key: pkg.packageId, doc: pkg, addActions: [
+                react_1.default.createElement(save_button_1.SaveButton, { key: pkg.packageId, doc: pkg, onClick: async () => {
+                        await pkg.save();
+                        await saveDeviceTagRef.current?.();
+                    }, addActions: [
                         ...addActions
                     ] }))),
         react_1.default.createElement(tabs_1.Tabs, { key: pkg.packageId, tabs: [
                 {
                     name: 'Info', content: react_1.default.createElement(tabs_1.ScreenTabBody, null,
-                        react_1.default.createElement(package_info_1.PackageInfo, { pkg: pkg }))
+                        react_1.default.createElement(package_info_1.PackageInfo, { pkg: pkg, saveDeviceTagRef: saveDeviceTagRef }))
+                },
+                {
+                    name: 'Versions', content: react_1.default.createElement(tabs_1.ScreenTabBody, null,
+                        react_1.default.createElement(package_versions_1.PackageVersionsList, { pkg: pkg }))
                 },
                 {
                     name: 'Components', content: react_1.default.createElement(tabs_1.ScreenTabBody, null, "TODO - show all of the different components in the package")

package/dist/screens/packages/package-info.d.ts

@@ -2,4 +2,5 @@ import React from "react";
 import { IDoc, IPackage } from "@peers-app/peers-sdk";
 export declare const PackageInfo: (props: {
     pkg: IDoc<IPackage>;
+    saveDeviceTagRef?: React.MutableRefObject<(() => Promise<void>) | null>;
 }) => React.JSX.Element;

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

@@ -9,8 +9,87 @@ const peers_sdk_1 = require("@peers-app/peers-sdk");
 const markdown_with_mentions_1 = require("../../components/markdown-with-mentions");
 const tooltip_1 = require("../../components/tooltip");
 const input_1 = require("../../components/input");
+const hooks_1 = require("../../hooks");
+const deviceVersionTagVar = (0, peers_sdk_1.groupDeviceVar)('deviceVersionTag');
 const PackageInfo = (props) => {
     const { pkg } = props;
+    const [activeVersionId] = (0, hooks_1.useObservable)(pkg.qs.activePackageVersionId);
+    const [versionFollowRange] = (0, hooks_1.useObservable)(pkg.qs.versionFollowRange);
+    const [followVersionTags] = (0, hooks_1.useObservable)(pkg.qs.followVersionTags);
+    const [deviceTag] = (0, hooks_1.useObservable)(deviceVersionTagVar);
+    const [deviceTagDraft, setDeviceTagDraft] = react_1.default.useState(deviceTag || '');
+    const savingRef = react_1.default.useRef(false);
+    react_1.default.useEffect(() => {
+        if (!savingRef.current) {
+            setDeviceTagDraft(deviceTag || '');
+        }
+    }, [deviceTag]);
+    const deviceTagDirty = deviceTagDraft.trim() !== (deviceTag || '');
+    const prevDirtyRef = react_1.default.useRef(false);
+    react_1.default.useEffect(() => {
+        if (deviceTagDirty && !prevDirtyRef.current) {
+            pkg.q((pkg.q() || 0) + 1);
+        }
+        else if (!deviceTagDirty && prevDirtyRef.current) {
+            pkg.q(Math.max(0, (pkg.q() || 0) - 1));
+        }
+        prevDirtyRef.current = deviceTagDirty;
+    }, [deviceTagDirty]);
+    if (props.saveDeviceTagRef) {
+        props.saveDeviceTagRef.current = async () => {
+            const val = deviceTagDraft.trim();
+            if (val !== (deviceTag || '')) {
+                savingRef.current = true;
+                try {
+                    if (val) {
+                        deviceVersionTagVar(val);
+                    }
+                    else {
+                        await deviceVersionTagVar.delete();
+                    }
+                }
+                finally {
+                    savingRef.current = false;
+                }
+            }
+        };
+    }
+    const activeVersion = (0, hooks_1.usePromise)(async () => {
+        if (!activeVersionId)
+            return null;
+        return (0, peers_sdk_1.PackageVersions)().get(activeVersionId);
+    }, undefined, [activeVersionId]);
+    const newerLevel = (0, hooks_1.usePromise)(async () => {
+        if (!activeVersionId)
+            return 'uptodate';
+        const all = await (0, peers_sdk_1.PackageVersions)().list({ packageId: pkg.packageId });
+        const active = all.find(v => v.packageVersionId === activeVersionId);
+        if (!active?.version)
+            return 'uptodate';
+        const parse = (v) => v.split('.').map(Number);
+        const [aMaj, aMin, aPat] = parse(active.version);
+        let highest = null;
+        for (const v of all) {
+            if (!v.version || v.packageVersionId === activeVersionId)
+                continue;
+            const [maj, min, pat] = parse(v.version);
+            if (maj > aMaj)
+                return 'major';
+            if (maj === aMaj && min > aMin) {
+                highest = 'minor';
+                continue;
+            }
+            if (maj === aMaj && min === aMin && pat > aPat && !highest) {
+                highest = 'patch';
+                continue;
+            }
+            if (maj === aMaj && min === aMin && pat === aPat && (v.createdAt || '') > (active.createdAt || '') && !highest) {
+                highest = 'patch';
+            }
+        }
+        return highest || 'uptodate';
+    }, undefined, [activeVersionId, pkg.packageId]);
+    const isPinned = versionFollowRange === 'pinned';
     return (react_1.default.createElement("div", null,
         react_1.default.createElement("small", null, "Name:"),
         react_1.default.createElement(input_1.Input, { value: pkg.qs.name, className: "form-control mb-3 p-0 ps-2", placeholder: "Package name", title: "Package name", disabled: true }),
@@ -37,6 +116,46 @@ const PackageInfo = (props) => {
             react_1.default.createElement("small", null,
                 "Description:",
                 react_1.default.createElement(tooltip_1.Tooltip, { markdownContent: `This should be edited in the package's README.md.  It will automatically update when you restart Peers or reload the package.` })),
-            react_1.default.createElement(markdown_with_mentions_1.MarkdownWithMentions, { content: pkg.description || '' }))));
+            react_1.default.createElement(markdown_with_mentions_1.MarkdownWithMentions, { content: pkg.description || '' })),
+        react_1.default.createElement("div", { className: "mt-2" },
+            react_1.default.createElement("hr", null),
+            react_1.default.createElement("small", null,
+                "Version:",
+                react_1.default.createElement(tooltip_1.Tooltip, { markdownContent: "The currently active version of this package. Manage versions in the Versions tab." })),
+            activeVersion ? (react_1.default.createElement("div", { className: "d-flex align-items-center mt-1 mb-3" },
+                react_1.default.createElement("strong", { className: "me-2" },
+                    "v",
+                    activeVersion.version),
+                activeVersion.versionTag && (react_1.default.createElement("span", { className: `badge ${activeVersion.versionTag.startsWith('beta') ? 'text-bg-warning' : 'text-bg-info'} me-2` }, activeVersion.versionTag)),
+                react_1.default.createElement("code", { className: "text-muted small me-2" }, activeVersion.packageVersionHash?.substring(0, 8)),
+                newerLevel === 'uptodate' ? (react_1.default.createElement("span", { className: "badge text-bg-success" }, "Up to date")) : newerLevel ? (react_1.default.createElement("span", { className: `badge text-bg-${newerLevel === 'major' ? 'danger' : newerLevel === 'minor' ? 'warning' : 'info'}` },
+                    "Newer ",
+                    newerLevel,
+                    " version available")) : null)) : (react_1.default.createElement("div", { className: "text-muted small mt-1 mb-3" }, "No active version")),
+            react_1.default.createElement("div", { className: "mb-3" },
+                react_1.default.createElement("small", null,
+                    "Auto-Update Range:",
+                    react_1.default.createElement(tooltip_1.Tooltip, { markdownContent: "Controls which new versions are auto-activated. **Pinned** = never auto-update. **Patch** = same major.minor (e.g. 1.2.x). **Minor** = same major (e.g. 1.x.x). **Latest** = always auto-update to newest." })),
+                react_1.default.createElement("select", { className: "form-select form-select-sm", value: versionFollowRange || 'latest', onChange: (e) => {
+                        const val = e.target.value;
+                        pkg.versionFollowRange = val === 'latest' ? undefined : val;
+                    } },
+                    react_1.default.createElement("option", { value: "latest" }, "Latest (auto-update to newest)"),
+                    react_1.default.createElement("option", { value: "minor" }, "Minor (same major version)"),
+                    react_1.default.createElement("option", { value: "patch" }, "Patch (same major.minor version)"),
+                    react_1.default.createElement("option", { value: "pinned" }, "Pinned (no auto-updates)"))),
+            react_1.default.createElement("div", { className: `mb-3 ${isPinned ? 'opacity-50' : ''}` },
+                react_1.default.createElement("small", null,
+                    "Follow Version Tags:",
+                    react_1.default.createElement(tooltip_1.Tooltip, { markdownContent: "Which version tags to auto-activate. Leave empty for **current** (follows the active version's tag). Use `*` for any tag, or a comma-separated list like `stable,prod`." })),
+                react_1.default.createElement(input_1.Input, { value: pkg.qs.followVersionTags, className: "form-control form-control-sm p-0 ps-2", placeholder: `Following "${activeVersion?.versionTag || 'stable'}"`, disabled: isPinned })),
+            react_1.default.createElement("div", { className: "mb-2" },
+                react_1.default.createElement("small", null,
+                    "Device-Specific Version Tag:",
+                    react_1.default.createElement(tooltip_1.Tooltip, { markdownContent: "Override the tag policy for this device only. For example, set to `beta` to test pre-release versions on this device without affecting other devices or group members. This is not synced." })),
+                react_1.default.createElement("div", { className: "d-flex align-items-center gap-2" },
+                    react_1.default.createElement("input", { type: "text", className: "form-control form-control-sm p-0 ps-2", placeholder: "e.g. beta", value: deviceTagDraft, onChange: (e) => setDeviceTagDraft(e.target.value) }),
+                    deviceTagDraft && (react_1.default.createElement("button", { className: "btn btn-sm btn-outline-secondary", title: "Clear device tag override", onClick: () => setDeviceTagDraft('') },
+                        react_1.default.createElement("i", { className: "bi bi-x-lg" }))))))));
 };
 exports.PackageInfo = PackageInfo;

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

@@ -43,6 +43,20 @@ const tooltip_1 = require("../../components/tooltip");
 const globals_1 = require("../../globals");
 const hooks_1 = require("../../hooks");
 const ui_loader_1 = require("../../ui-router/ui-loader");
+const PackageVersionBadge = ({ activePackageVersionId }) => {
+    const pv = (0, hooks_1.usePromise)(async () => {
+        if (!activePackageVersionId)
+            return null;
+        return (0, peers_sdk_1.PackageVersions)().get(activePackageVersionId);
+    }, undefined, [activePackageVersionId]);
+    if (!pv)
+        return null;
+    return (react_1.default.createElement("span", { className: "ms-2" },
+        react_1.default.createElement("small", { className: "text-muted" },
+            "v",
+            pv.version),
+        pv.versionTag && (react_1.default.createElement("span", { className: `badge ms-1 ${pv.versionTag.startsWith('beta') ? 'text-bg-warning' : 'text-bg-info'}`, style: { fontSize: '0.65em' } }, pv.versionTag))));
+};
 const PackageList = () => {
     const [searchTextObs] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)(''));
     const [searchText] = (0, hooks_1.useObservable)(searchTextObs);
@@ -157,6 +171,7 @@ const PackageList = () => {
                             react_1.default.createElement("i", { className: "bi bi-box-fill" }),
                             "\u00A0\u00A0",
                             react_1.default.createElement("a", { href: `#packages/${pkg.packageId}` }, pkg.name),
+                            react_1.default.createElement(PackageVersionBadge, { activePackageVersionId: pkg.activePackageVersionId }),
                             react_1.default.createElement(tooltip_1.Tooltip, { markdownContent: pkg.description, positions: ['bottom', 'top', 'right', 'left'] })));
                     });
                 }, loadingIndicator: react_1.default.createElement("div", { className: "d-flex justify-content-center", style: { height: 200 } },

package/dist/screens/packages/package-versions.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { IDoc, IPackage } from "@peers-app/peers-sdk";
+export declare const PackageVersionsList: (props: {
+    pkg: IDoc<IPackage>;
+}) => React.JSX.Element;

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

@@ -0,0 +1,197 @@
+"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.PackageVersionsList = void 0;
+const react_1 = __importStar(require("react"));
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const hooks_1 = require("../../hooks");
+function formatDate(iso) {
+    try {
+        const d = new Date(iso);
+        const now = new Date();
+        const diffMs = now.getTime() - d.getTime();
+        const diffMins = Math.floor(diffMs / 60000);
+        if (diffMins < 1)
+            return 'just now';
+        if (diffMins < 60)
+            return `${diffMins}m ago`;
+        const diffHours = Math.floor(diffMins / 60);
+        if (diffHours < 24)
+            return `${diffHours}h ago`;
+        const diffDays = Math.floor(diffHours / 24);
+        if (diffDays < 30)
+            return `${diffDays}d ago`;
+        return d.toLocaleDateString();
+    }
+    catch {
+        return iso;
+    }
+}
+function tagBadgeClass(tag) {
+    if (!tag)
+        return 'text-bg-secondary';
+    if (tag.startsWith('beta'))
+        return 'text-bg-warning';
+    if (tag === 'stable')
+        return 'text-bg-info';
+    return 'text-bg-secondary';
+}
+const PackageVersionsList = (props) => {
+    const { pkg } = props;
+    const [activeVersionId] = (0, hooks_1.useObservable)(pkg.qs.activePackageVersionId);
+    const [versionFollowRange] = (0, hooks_1.useObservable)(pkg.qs.versionFollowRange);
+    const refreshKey = (0, hooks_1.useObservableState)(0);
+    const [activating, setActivating] = (0, react_1.useState)(null);
+    const [deleting, setDeleting] = (0, react_1.useState)(null);
+    const [pinning, setPinning] = (0, react_1.useState)(false);
+    const isPinned = versionFollowRange === 'pinned';
+    const versions = (0, hooks_1.usePromise)(async () => {
+        const all = await (0, peers_sdk_1.PackageVersions)().list({ packageId: pkg.packageId });
+        const parse = (v) => v.split('.').map(Number);
+        const sorted = all.sort((a, b) => {
+            const [aMaj, aMin, aPat] = parse(a.version || '0.0.0');
+            const [bMaj, bMin, bPat] = parse(b.version || '0.0.0');
+            if (bMaj !== aMaj)
+                return bMaj - aMaj;
+            if (bMin !== aMin)
+                return bMin - aMin;
+            if (bPat !== aPat)
+                return bPat - aPat;
+            return (b.createdAt || '').localeCompare(a.createdAt || '');
+        });
+        const uniqueCreatorIds = [...new Set(sorted.map(pv => pv.createdBy).filter(Boolean))];
+        const userMap = new Map();
+        await Promise.all(uniqueCreatorIds.map(async (uid) => {
+            try {
+                const user = await (0, peers_sdk_1.Users)().get(uid, { useCache: true });
+                if (user?.name)
+                    userMap.set(uid, user.name);
+            }
+            catch { }
+        }));
+        return { sorted, userMap };
+    }, undefined, [pkg.packageId, refreshKey()]);
+    async function activateVersion(pv) {
+        setActivating(pv.packageVersionId);
+        try {
+            const current = await (0, peers_sdk_1.Packages)().get(pkg.packageId);
+            if (current) {
+                current.activePackageVersionId = pv.packageVersionId;
+                await (0, peers_sdk_1.Packages)().signAndSave(current);
+                await pkg.load();
+                refreshKey(refreshKey() + 1);
+            }
+        }
+        catch (err) {
+            alert(`Failed to activate version: ${err}`);
+        }
+        finally {
+            setActivating(null);
+        }
+    }
+    async function deleteVersion(pv) {
+        if (!confirm(`Delete version v${pv.version} (${pv.packageVersionHash?.substring(0, 8)})?`))
+            return;
+        setDeleting(pv.packageVersionId);
+        try {
+            await (0, peers_sdk_1.PackageVersions)().delete(pv.packageVersionId);
+            refreshKey(refreshKey() + 1);
+        }
+        catch (err) {
+            alert(`Failed to delete version: ${err}`);
+        }
+        finally {
+            setDeleting(null);
+        }
+    }
+    async function pinVersion() {
+        setPinning(true);
+        try {
+            const current = await (0, peers_sdk_1.Packages)().get(pkg.packageId);
+            if (current) {
+                current.versionFollowRange = 'pinned';
+                await (0, peers_sdk_1.Packages)().signAndSave(current);
+                await pkg.load();
+            }
+        }
+        catch (err) {
+            alert(`Failed to pin version: ${err}`);
+        }
+        finally {
+            setPinning(false);
+        }
+    }
+    if (!versions) {
+        return react_1.default.createElement("div", { className: "text-center p-3" },
+            react_1.default.createElement("div", { className: "spinner-border spinner-border-sm" }));
+    }
+    const { sorted, userMap } = versions;
+    if (sorted.length === 0) {
+        return (react_1.default.createElement("div", { className: "text-muted text-center p-4" },
+            react_1.default.createElement("i", { className: "bi bi-tag me-1" }),
+            "No versions found for this package."));
+    }
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("small", { className: "text-muted" },
+            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" }))))))));
+        }))));
+};
+exports.PackageVersionsList = PackageVersionsList;

package/dist/system-apps/index.js

@@ -106,7 +106,4 @@ exports.systemPackage = {
     localPath: '',
     disabled: false,
     signature: '',
-    packageBundleFileId: '',
-    packageBundleFileHash: '',
-    // System apps use existing router instead of separate bundle files
 };

package/dist/ui-router/routes-loader.d.ts

@@ -6,19 +6,16 @@ export declare const allPackages: import("@peers-app/peers-sdk").Observable<{
     createdBy: string;
     packageId: string;
     localPath: string;
-    packageBundleFileId: string;
-    packageBundleFileHash: string;
     disabled?: boolean | undefined;
-    remoteRepo?: string | undefined;
     appNavs?: {
         name: string;
         iconClassName: string;
         navigationPath: string;
         displayName?: string | undefined;
     }[] | undefined;
-    routesBundleFileId?: string | undefined;
-    routesBundleFileHash?: string | undefined;
-    uiBundleFileId?: string | undefined;
-    uiBundleFileHash?: string | undefined;
+    remoteRepo?: string | undefined;
+    activePackageVersionId?: string | undefined;
+    versionFollowRange?: "pinned" | "patch" | "minor" | "latest" | undefined;
+    followVersionTags?: string | undefined;
 }[]>;
 export declare const loadAllRoutes: () => Promise<true | undefined>;

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

@@ -9,10 +9,10 @@ const loadAllRoutes = async () => {
     if (allRoutesLoaded)
         return;
     allRoutesLoaded = true;
-    // Filter packages that have UI bundles (routesBundleFileId or uiBundleFileId)
+    // Filter packages that have an active version
     let packagesWithUI = await (0, peers_sdk_1.Packages)().list({
         disabled: { $ne: true },
-        routesBundleFileId: { $exists: true },
+        activePackageVersionId: { $exists: true },
     });
     (0, exports.allPackages)(packagesWithUI);
     await Promise.all(packagesWithUI.map(pkg => loadRoutesBundle(pkg)));
@@ -58,14 +58,21 @@ function loadRoutesBundle(pkg, forceRefresh) {
                     console.log(`waiting for registerPeersUIRoute to be defined on the window object`);
                     await new Promise((resolve) => setTimeout(resolve, 20));
                 }
+                let routesBundleFileId;
+                if (pkg.activePackageVersionId) {
+                    try {
+                        const pv = await (0, peers_sdk_1.PackageVersions)().get(pkg.activePackageVersionId);
+                        routesBundleFileId = pv?.routesBundleFileId;
+                    }
+                    catch { /* no version record */ }
+                }
                 let bundleCode = '';
-                if (pkg.routesBundleFileId) {
-                    bundleCode = await peers_sdk_1.rpcServerCalls.getFileContents(pkg.routesBundleFileId);
+                if (routesBundleFileId) {
+                    bundleCode = await peers_sdk_1.rpcServerCalls.getFileContents(routesBundleFileId);
                 }
                 if (bundleCode) {
                     const exportRoutes = (peerRoutes) => {
                         peerRoutes.routes.forEach(route => {
-                            // TODO maybe add package that this came from
                             window.registerPeersUIRoute(route);
                         });
                     };
@@ -73,8 +80,8 @@ function loadRoutesBundle(pkg, forceRefresh) {
                     bundleFunction(exportRoutes);
                     return {};
                 }
-                else {
-                    console.warn(`Routes bundle file not found for ${pkg.name} (fileId: ${pkg.routesBundleFileId})`);
+                else if (routesBundleFileId) {
+                    console.warn(`Routes bundle file not found for ${pkg.name} (fileId: ${routesBundleFileId})`);
                 }
                 return null;
             }

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

@@ -227,28 +227,35 @@ const UILoader = (args) => {
 const uiLoadingPromises = {};
 // Check if we're running in a React Native WebView (has injectUIBundle available)
 const isReactNativeWebView = typeof window.ReactNativeWebView !== 'undefined';
+async function resolveUiBundleFileId(pkg) {
+    if (!pkg.activePackageVersionId)
+        return undefined;
+    try {
+        const pv = await (0, peers_sdk_1.PackageVersions)().get(pkg.activePackageVersionId);
+        return pv?.uiBundleFileId;
+    }
+    catch {
+        return 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 {
-                if (!pkg.uiBundleFileId) {
+                const uiBundleFileId = await resolveUiBundleFileId(pkg);
+                if (!uiBundleFileId) {
                     resolve();
                     return;
                 }
-                // 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
+                            if (loadedFileId === uiBundleFileId) {
                                 Object.keys(_window.__peersUIs || {}).forEach(peersUIId => {
                                     peersUIs[peersUIId] = _window.__peersUIs[peersUIId];
                                 });
@@ -256,18 +263,17 @@ function loadUIBundle(pkg, forceRefresh) {
                             }
                         };
                         _window.__peersUIBundleError = (errorFileId, errorMsg) => {
-                            if (errorFileId === fileId) {
+                            if (errorFileId === uiBundleFileId) {
                                 rejectLoad(new Error(errorMsg));
                             }
                         };
                     });
-                    await peers_sdk_1.rpcServerCalls.injectUIBundle(pkg.uiBundleFileId);
+                    await peers_sdk_1.rpcServerCalls.injectUIBundle(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);
+                    let bundleCode = await peers_sdk_1.rpcServerCalls.getFileContents(uiBundleFileId);
                     if (bundleCode) {
                         const exportUIs = (peerUIs) => {
                             peerUIs?.uis?.forEach(ui => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peers-app/peers-ui",
-  "version": "0.9.4",
+  "version": "0.10.1",
   "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.9.4",
+    "@peers-app/peers-sdk": "^0.10.1",
     "bootstrap": "^5.3.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
@@ -37,7 +37,7 @@
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.27.1",
     "@electron/rebuild": "^3.6.0",
-    "@peers-app/peers-sdk": "0.9.4",
+    "@peers-app/peers-sdk": "0.10.1",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",

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

@@ -4,6 +4,7 @@ import { LoadingIndicator } from "../../components/loading-indicator";
 import { ISaveButtonProps, SaveButton } from "../../components/save-button";
 import { ScreenTabBody, Tabs } from "../../components/tabs";
 import { PackageInfo } from "./package-info";
+import { PackageVersionsList } from "./package-versions";
 import { useObservableState, usePromise } from "../../hooks";
 import { Input } from "../../components/input";
 import { updateActiveTabTitle } from "../../tabs-layout/tabs-state";
@@ -16,6 +17,7 @@ interface IProps {
 export const PackageDetails = (props: IProps) => {
 
   const refresh = useObservableState(Date.now());
+  const saveDeviceTagRef = React.useRef<(() => Promise<void>) | null>(null);
 
   const pkg = usePromise(async () => {
     const pkg = await Packages().get(props.packageId);
@@ -80,6 +82,10 @@ export const PackageDetails = (props: IProps) => {
           <SaveButton
             key={pkg.packageId}
             doc={pkg}
+            onClick={async () => {
+              await pkg.save();
+              await saveDeviceTagRef.current?.();
+            }}
             addActions={[
               ...addActions
             ]}
@@ -93,7 +99,13 @@ export const PackageDetails = (props: IProps) => {
           {
             name: 'Info', content:
               <ScreenTabBody>
-                <PackageInfo pkg={pkg} />
+                <PackageInfo pkg={pkg} saveDeviceTagRef={saveDeviceTagRef} />
+              </ScreenTabBody>
+          },
+          {
+            name: 'Versions', content:
+              <ScreenTabBody>
+                <PackageVersionsList pkg={pkg} />
               </ScreenTabBody>
           },
           {

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

@@ -1,11 +1,85 @@
 import React from "react";
-import { rpcServerCalls, IDoc, IPackage, packagesRootDir } from "@peers-app/peers-sdk";
+import { rpcServerCalls, IDoc, IPackage, IPackageVersion, PackageVersions, packagesRootDir, groupDeviceVar } from "@peers-app/peers-sdk";
 import { MarkdownWithMentions } from "../../components/markdown-with-mentions";
 import { Tooltip } from "../../components/tooltip";
 import { Input } from "../../components/input";
+import { useObservable, usePromise } from "../../hooks";
 
-export const PackageInfo = (props: { pkg: IDoc<IPackage> }) => {
+const deviceVersionTagVar = groupDeviceVar<string | undefined>('deviceVersionTag');
+
+export const PackageInfo = (props: {
+  pkg: IDoc<IPackage>,
+  saveDeviceTagRef?: React.MutableRefObject<(() => Promise<void>) | null>,
+}) => {
   const { pkg } = props;
+  const [activeVersionId] = useObservable(pkg.qs.activePackageVersionId);
+  const [versionFollowRange] = useObservable(pkg.qs.versionFollowRange);
+  const [followVersionTags] = useObservable(pkg.qs.followVersionTags);
+  const [deviceTag] = useObservable(deviceVersionTagVar);
+
+  const [deviceTagDraft, setDeviceTagDraft] = React.useState(deviceTag || '');
+  const savingRef = React.useRef(false);
+
+  React.useEffect(() => {
+    if (!savingRef.current) {
+      setDeviceTagDraft(deviceTag || '');
+    }
+  }, [deviceTag]);
+
+  const deviceTagDirty = deviceTagDraft.trim() !== (deviceTag || '');
+  const prevDirtyRef = React.useRef(false);
+  React.useEffect(() => {
+    if (deviceTagDirty && !prevDirtyRef.current) {
+      pkg.q((pkg.q() || 0) + 1);
+    } else if (!deviceTagDirty && prevDirtyRef.current) {
+      pkg.q(Math.max(0, (pkg.q() || 0) - 1));
+    }
+    prevDirtyRef.current = deviceTagDirty;
+  }, [deviceTagDirty]);
+
+  if (props.saveDeviceTagRef) {
+    props.saveDeviceTagRef.current = async () => {
+      const val = deviceTagDraft.trim();
+      if (val !== (deviceTag || '')) {
+        savingRef.current = true;
+        try {
+          if (val) {
+            deviceVersionTagVar(val);
+          } else {
+            await deviceVersionTagVar.delete();
+          }
+        } finally {
+          savingRef.current = false;
+        }
+      }
+    };
+  }
+
+  const activeVersion = usePromise(async () => {
+    if (!activeVersionId) return null;
+    return PackageVersions().get(activeVersionId) as Promise<IPackageVersion | null>;
+  }, undefined, [activeVersionId]);
+
+  const newerLevel = usePromise(async (): Promise<'major' | 'minor' | 'patch' | 'uptodate'> => {
+    if (!activeVersionId) return 'uptodate';
+    const all = await PackageVersions().list({ packageId: pkg.packageId });
+    const active = all.find(v => v.packageVersionId === activeVersionId);
+    if (!active?.version) return 'uptodate';
+    const parse = (v: string) => v.split('.').map(Number);
+    const [aMaj, aMin, aPat] = parse(active.version);
+    let highest: 'major' | 'minor' | 'patch' | null = null;
+    for (const v of all) {
+      if (!v.version || v.packageVersionId === activeVersionId) continue;
+      const [maj, min, pat] = parse(v.version);
+      if (maj > aMaj) return 'major';
+      if (maj === aMaj && min > aMin) { highest = 'minor'; continue; }
+      if (maj === aMaj && min === aMin && pat > aPat && !highest) { highest = 'patch'; continue; }
+      if (maj === aMaj && min === aMin && pat === aPat && (v.createdAt || '') > (active.createdAt || '') && !highest) { highest = 'patch'; }
+    }
+    return highest || 'uptodate';
+  }, undefined, [activeVersionId, pkg.packageId]);
+
+  const isPinned = versionFollowRange === 'pinned';
 
   return (
     <div>
@@ -66,18 +140,97 @@ export const PackageInfo = (props: { pkg: IDoc<IPackage> }) => {
           Description:
           <Tooltip markdownContent={`This should be edited in the package's README.md.  It will automatically update when you restart Peers or reload the package.`} />
         </small>
-        {/* <div className="border rounded border-dark-subtle p-1">
-          <MarkdownWithMentions
-            content={pkg.description || ''}
-          />
-        </div> */}
-        
         <MarkdownWithMentions
           content={pkg.description || ''}
         />
       </div>
 
+      <div className="mt-2">
+        <hr />
+        <small>
+          Version:
+          <Tooltip markdownContent="The currently active version of this package. Manage versions in the Versions tab." />
+        </small>
+        {activeVersion ? (
+          <div className="d-flex align-items-center mt-1 mb-3">
+            <strong className="me-2">v{activeVersion.version}</strong>
+            {activeVersion.versionTag && (
+              <span className={`badge ${activeVersion.versionTag.startsWith('beta') ? 'text-bg-warning' : 'text-bg-info'} me-2`}>
+                {activeVersion.versionTag}
+              </span>
+            )}
+            <code className="text-muted small me-2">{activeVersion.packageVersionHash?.substring(0, 8)}</code>
+            {newerLevel === 'uptodate' ? (
+              <span className="badge text-bg-success">Up to date</span>
+            ) : newerLevel ? (
+              <span className={`badge text-bg-${newerLevel === 'major' ? 'danger' : newerLevel === 'minor' ? 'warning' : 'info'}`}>
+                Newer {newerLevel} version available
+              </span>
+            ) : null}
+          </div>
+        ) : (
+          <div className="text-muted small mt-1 mb-3">No active version</div>
+        )}
+
+        <div className="mb-3">
+          <small>
+            Auto-Update Range:
+            <Tooltip markdownContent="Controls which new versions are auto-activated. **Pinned** = never auto-update. **Patch** = same major.minor (e.g. 1.2.x). **Minor** = same major (e.g. 1.x.x). **Latest** = always auto-update to newest." />
+          </small>
+          <select
+            className="form-select form-select-sm"
+            value={versionFollowRange || 'latest'}
+            onChange={(e) => {
+              const val = e.target.value as 'pinned' | 'patch' | 'minor' | 'latest';
+              pkg.versionFollowRange = val === 'latest' ? undefined : val;
+            }}
+          >
+            <option value="latest">Latest (auto-update to newest)</option>
+            <option value="minor">Minor (same major version)</option>
+            <option value="patch">Patch (same major.minor version)</option>
+            <option value="pinned">Pinned (no auto-updates)</option>
+          </select>
+        </div>
+
+        <div className={`mb-3 ${isPinned ? 'opacity-50' : ''}`}>
+          <small>
+            Follow Version Tags:
+            <Tooltip markdownContent="Which version tags to auto-activate. Leave empty for **current** (follows the active version's tag). Use `*` for any tag, or a comma-separated list like `stable,prod`." />
+          </small>
+          <Input
+            value={pkg.qs.followVersionTags}
+            className="form-control form-control-sm p-0 ps-2"
+            placeholder={`Following "${activeVersion?.versionTag || 'stable'}"`}
+            disabled={isPinned}
+          />
+        </div>
+
+        <div className="mb-2">
+          <small>
+            Device-Specific Version Tag:
+            <Tooltip markdownContent="Override the tag policy for this device only. For example, set to `beta` to test pre-release versions on this device without affecting other devices or group members. This is not synced." />
+          </small>
+          <div className="d-flex align-items-center gap-2">
+            <input
+              type="text"
+              className="form-control form-control-sm p-0 ps-2"
+              placeholder="e.g. beta"
+              value={deviceTagDraft}
+              onChange={(e) => setDeviceTagDraft(e.target.value)}
+            />
+            {deviceTagDraft && (
+              <button
+                className="btn btn-sm btn-outline-secondary"
+                title="Clear device tag override"
+                onClick={() => setDeviceTagDraft('')}
+              >
+                <i className="bi bi-x-lg"></i>
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+
     </div>
   )
 }
-

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

@@ -1,13 +1,35 @@
-import { ICursorIterable, IPackage, observable, Packages, packagesRootDir, rpcServerCalls } from "@peers-app/peers-sdk";
+import { ICursorIterable, IPackage, observable, Packages, PackageVersions, packagesRootDir, rpcServerCalls } from "@peers-app/peers-sdk";
 import React, { useEffect, useState } from 'react';
 import { Input } from "../../components/input";
 import { LazyList } from "../../components/lazy-list";
 import { LoadingIndicator } from '../../components/loading-indicator';
 import { Tooltip } from '../../components/tooltip';
 import { isDesktop, mainContentPath } from '../../globals';
-import { useObservable, useObservableState } from "../../hooks";
+import { useObservable, useObservableState, usePromise } from "../../hooks";
 import { registerInternalPeersUI } from "../../ui-router/ui-loader";
 
+const PackageVersionBadge = ({ activePackageVersionId }: { activePackageVersionId?: string }) => {
+  const pv = usePromise(async () => {
+    if (!activePackageVersionId) return null;
+    return PackageVersions().get(activePackageVersionId);
+  }, undefined, [activePackageVersionId]);
+
+  if (!pv) return null;
+
+  return (
+    <span className="ms-2">
+      <small className="text-muted">v{pv.version}</small>
+      {pv.versionTag && (
+        <span className={`badge ms-1 ${pv.versionTag.startsWith('beta') ? 'text-bg-warning' : 'text-bg-info'}`}
+          style={{ fontSize: '0.65em' }}
+        >
+          {pv.versionTag}
+        </span>
+      )}
+    </span>
+  );
+};
+
 export const PackageList = () => {
   const [searchTextObs] = useState(() => observable(''));
   const [searchText] = useObservable(searchTextObs);
@@ -146,6 +168,7 @@ export const PackageList = () => {
                   <a href={`#packages/${pkg.packageId}`}>
                     {pkg.name}
                   </a>
+                  <PackageVersionBadge activePackageVersionId={pkg.activePackageVersionId} />
                   <Tooltip
                     markdownContent={pkg.description}
                     positions={['bottom', 'top', 'right', 'left']}

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

@@ -0,0 +1,204 @@
+import React, { useState } from "react";
+import { IDoc, IPackage, IPackageVersion, Packages, PackageVersions, Users } from "@peers-app/peers-sdk";
+import { useObservable, useObservableState, usePromise } from "../../hooks";
+
+function formatDate(iso: string): string {
+  try {
+    const d = new Date(iso);
+    const now = new Date();
+    const diffMs = now.getTime() - d.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    if (diffMins < 1) return 'just now';
+    if (diffMins < 60) return `${diffMins}m ago`;
+    const diffHours = Math.floor(diffMins / 60);
+    if (diffHours < 24) return `${diffHours}h ago`;
+    const diffDays = Math.floor(diffHours / 24);
+    if (diffDays < 30) return `${diffDays}d ago`;
+    return d.toLocaleDateString();
+  } catch {
+    return iso;
+  }
+}
+
+function tagBadgeClass(tag?: string): string {
+  if (!tag) return 'text-bg-secondary';
+  if (tag.startsWith('beta')) return 'text-bg-warning';
+  if (tag === 'stable') return 'text-bg-info';
+  return 'text-bg-secondary';
+}
+
+export const PackageVersionsList = (props: { pkg: IDoc<IPackage> }) => {
+  const { pkg } = props;
+  const [activeVersionId] = useObservable(pkg.qs.activePackageVersionId);
+  const [versionFollowRange] = useObservable(pkg.qs.versionFollowRange);
+  const refreshKey = useObservableState(0);
+  const [activating, setActivating] = useState<string | null>(null);
+  const [deleting, setDeleting] = useState<string | null>(null);
+  const [pinning, setPinning] = useState(false);
+  const isPinned = versionFollowRange === 'pinned';
+
+  const versions = usePromise(async () => {
+    const all = await PackageVersions().list({ packageId: pkg.packageId });
+    const parse = (v: string) => v.split('.').map(Number);
+    const sorted = all.sort((a, b) => {
+      const [aMaj, aMin, aPat] = parse(a.version || '0.0.0');
+      const [bMaj, bMin, bPat] = parse(b.version || '0.0.0');
+      if (bMaj !== aMaj) return bMaj - aMaj;
+      if (bMin !== aMin) return bMin - aMin;
+      if (bPat !== aPat) return bPat - aPat;
+      return (b.createdAt || '').localeCompare(a.createdAt || '');
+    });
+    const uniqueCreatorIds = [...new Set(sorted.map(pv => pv.createdBy).filter(Boolean))];
+    const userMap = new Map<string, string>();
+    await Promise.all(uniqueCreatorIds.map(async (uid) => {
+      try {
+        const user = await Users().get(uid, { useCache: true });
+        if (user?.name) userMap.set(uid, user.name);
+      } catch {}
+    }));
+    return { sorted, userMap };
+  }, undefined, [pkg.packageId, refreshKey()]);
+
+  async function activateVersion(pv: IPackageVersion) {
+    setActivating(pv.packageVersionId);
+    try {
+      const current = await Packages().get(pkg.packageId);
+      if (current) {
+        current.activePackageVersionId = pv.packageVersionId;
+        await Packages().signAndSave(current);
+        await pkg.load();
+        refreshKey(refreshKey() + 1);
+      }
+    } catch (err) {
+      alert(`Failed to activate version: ${err}`);
+    } finally {
+      setActivating(null);
+    }
+  }
+
+  async function deleteVersion(pv: IPackageVersion) {
+    if (!confirm(`Delete version v${pv.version} (${pv.packageVersionHash?.substring(0, 8)})?`)) return;
+    setDeleting(pv.packageVersionId);
+    try {
+      await PackageVersions().delete(pv.packageVersionId);
+      refreshKey(refreshKey() + 1);
+    } catch (err) {
+      alert(`Failed to delete version: ${err}`);
+    } finally {
+      setDeleting(null);
+    }
+  }
+
+  async function pinVersion() {
+    setPinning(true);
+    try {
+      const current = await Packages().get(pkg.packageId);
+      if (current) {
+        current.versionFollowRange = 'pinned';
+        await Packages().signAndSave(current);
+        await pkg.load();
+      }
+    } catch (err) {
+      alert(`Failed to pin version: ${err}`);
+    } finally {
+      setPinning(false);
+    }
+  }
+
+  if (!versions) {
+    return <div className="text-center p-3"><div className="spinner-border spinner-border-sm" /></div>;
+  }
+
+  const { sorted, userMap } = versions;
+
+  if (sorted.length === 0) {
+    return (
+      <div className="text-muted text-center p-4">
+        <i className="bi bi-tag me-1"></i>
+        No versions found for this package.
+      </div>
+    );
+  }
+
+  return (
+    <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' : ''}`}
+            >
+              <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>
+                  </>) : (
+                    <button
+                      className="btn btn-sm btn-outline-primary"
+                      disabled={activating === pv.packageVersionId}
+                      onClick={() => activateVersion(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={() => deleteVersion(pv)}
+                    >
+                      {deleting === pv.packageVersionId ? (
+                        <span className="spinner-border spinner-border-sm" />
+                      ) : (
+                        <i className="bi bi-trash"></i>
+                      )}
+                    </button>
+                  )}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

package/src/system-apps/index.ts

@@ -93,7 +93,4 @@ export const systemPackage: IPackage = {
   localPath: '',
   disabled: false,
   signature: '',
-  packageBundleFileId: '',
-  packageBundleFileHash: '',
-  // System apps use existing router instead of separate bundle files
 };

package/src/ui-router/routes-loader.ts

@@ -1,4 +1,4 @@
-import { debounceByArgs, IPackage, IPeersPackageRoutes, observable, Packages, rpcServerCalls } from "@peers-app/peers-sdk";
+import { debounceByArgs, IPackage, IPeersPackageRoutes, observable, Packages, PackageVersions, rpcServerCalls } from "@peers-app/peers-sdk";
 import "../ui-defaults";
 
 export const allPackages = observable<IPackage[]>([]);
@@ -7,10 +7,10 @@ let allRoutesLoaded = false;
 export const loadAllRoutes = async () => {
   if (allRoutesLoaded) return;
   allRoutesLoaded = true;
-  // Filter packages that have UI bundles (routesBundleFileId or uiBundleFileId)
+  // Filter packages that have an active version
   let packagesWithUI = await Packages().list({
     disabled: { $ne: true },
-    routesBundleFileId: { $exists: true },
+    activePackageVersionId: { $exists: true },
   });
   allPackages(packagesWithUI);
   await Promise.all(
@@ -60,14 +60,22 @@ function loadRoutesBundle(pkg: IPackage, forceRefresh?: boolean): Promise<any> {
           console.log(`waiting for registerPeersUIRoute to be defined on the window object`);
           await new Promise((resolve) => setTimeout(resolve, 20));
         }
+
+        let routesBundleFileId: string | undefined;
+        if (pkg.activePackageVersionId) {
+          try {
+            const pv = await PackageVersions().get(pkg.activePackageVersionId);
+            routesBundleFileId = pv?.routesBundleFileId;
+          } catch { /* no version record */ }
+        }
+
         let bundleCode = '';
-        if (pkg.routesBundleFileId) {
-          bundleCode = await rpcServerCalls.getFileContents(pkg.routesBundleFileId);
+        if (routesBundleFileId) {
+          bundleCode = await rpcServerCalls.getFileContents(routesBundleFileId);
         }
         if (bundleCode) {
           const exportRoutes = (peerRoutes: IPeersPackageRoutes) => {
             peerRoutes.routes.forEach(route => {
-              // TODO maybe add package that this came from
               (window as any).registerPeersUIRoute(route);
             });
           }
@@ -76,8 +84,8 @@ function loadRoutesBundle(pkg: IPackage, forceRefresh?: boolean): Promise<any> {
           bundleFunction(exportRoutes);
 
           return {};
-        } else {
-          console.warn(`Routes bundle file not found for ${pkg.name} (fileId: ${pkg.routesBundleFileId})`);
+        } else if (routesBundleFileId) {
+          console.warn(`Routes bundle file not found for ${pkg.name} (fileId: ${routesBundleFileId})`);
         }
         return null;
       } catch (err) {

package/src/ui-router/ui-loader.tsx

@@ -1,4 +1,4 @@
-import { debounceByArgs, getUserContext, IPackage, IPeersPackageUIs, IPeersUI, IPeersUIRoute, newid, Packages, rpcServerCalls, toJSON, UIContext, zodAnyObject } from "@peers-app/peers-sdk";
+import { debounceByArgs, getUserContext, IPackage, IPeersPackageUIs, IPeersUI, IPeersUIRoute, newid, Packages, PackageVersions, rpcServerCalls, toJSON, UIContext, zodAnyObject } from "@peers-app/peers-sdk";
 import { orderBy } from "lodash";
 import React, { Component, useEffect } from "react";
 import { LoadingIndicator } from "../components/loading-indicator";
@@ -225,31 +225,34 @@ const uiLoadingPromises: Record<string, Promise<any>> = {};
 // Check if we're running in a React Native WebView (has injectUIBundle available)
 const isReactNativeWebView = typeof (window as any).ReactNativeWebView !== 'undefined';
 
+async function resolveUiBundleFileId(pkg: IPackage): Promise<string | undefined> {
+  if (!pkg.activePackageVersionId) return undefined;
+  try {
+    const pv = await PackageVersions().get(pkg.activePackageVersionId);
+    return pv?.uiBundleFileId;
+  } catch { return undefined; }
+}
+
 function loadUIBundle(pkg: IPackage, forceRefresh?: boolean) {
-  // Dynamically import the bundle
   let importPromise: Promise<any> = uiLoadingPromises[pkg.packageId];
   if (!importPromise || forceRefresh) {
     const sTime = Date.now();
     console.log(`loading ui bundle for ${pkg.name}`);
     importPromise = new Promise<void>(async (resolve, reject) => {
       try {
-        if (!pkg.uiBundleFileId) {
+        const uiBundleFileId = await resolveUiBundleFileId(pkg);
+        if (!uiBundleFileId) {
           resolve();
           return;
         }
 
-        // Use fast injection path for React Native WebView
         if (isReactNativeWebView && rpcServerCalls.injectUIBundle) {
-          // Set up listeners for bundle load completion
           const _window = window as any;
           _window.__peersUIs = _window.__peersUIs || {};
           
           const loadPromise = new Promise<void>((resolveLoad, rejectLoad) => {
-            const fileId = pkg.uiBundleFileId!;
-            
             _window.__peersUIBundleLoaded = (loadedFileId: string) => {
-              if (loadedFileId === fileId) {
-                // Copy loaded UIs to our local registry
+              if (loadedFileId === uiBundleFileId) {
                 Object.keys(_window.__peersUIs || {}).forEach(peersUIId => {
                   peersUIs[peersUIId] = _window.__peersUIs[peersUIId];
                 });
@@ -258,18 +261,17 @@ function loadUIBundle(pkg: IPackage, forceRefresh?: boolean) {
             };
             
             _window.__peersUIBundleError = (errorFileId: string, errorMsg: string) => {
-              if (errorFileId === fileId) {
+              if (errorFileId === uiBundleFileId) {
                 rejectLoad(new Error(errorMsg));
               }
             };
           });
 
-          await rpcServerCalls.injectUIBundle(pkg.uiBundleFileId);
+          await rpcServerCalls.injectUIBundle(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 rpcServerCalls.getFileContents(pkg.uiBundleFileId);
+          let bundleCode = await rpcServerCalls.getFileContents(uiBundleFileId);
           if (bundleCode) {
             const exportUIs = (peerUIs: IPeersPackageUIs) => {
               peerUIs?.uis?.forEach(ui => {