@peers-app/peers-ui 0.26.3 → 0.26.5

package/dist/screens/variables/variable-details.js

@@ -11,7 +11,9 @@ const editor_inline_1 = require("../../components/markdown-editor/editor-inline"
 const save_button_1 = require("../../components/save-button");
 const tabs_1 = require("../../components/tabs");
 const hooks_1 = require("../../hooks");
+const host_shell_consumer_1 = require("../../host-shell/host-shell-consumer");
 const tabs_state_1 = require("../../tabs-layout/tabs-state");
+/** Details screen for one persistent variable: name, value (copyable), and settings. */
 const VariableDetails = (props) => {
     const persistentVariable = (0, hooks_1.usePromise)(async () => {
         const persistentVariable = await (0, peers_sdk_1.PersistentVars)().get(props.persistentVarId);
@@ -87,9 +89,9 @@ const VariableValue = (props) => {
 };
 /**
  * Button that copies a persistent variable's value to the clipboard. Decryption (for
- * secret values) and the clipboard write happen entirely on the server/main process via
- * {@link rpcServerCalls.copyPvarValueToClipboard}, so the plaintext is never exposed to
- * the UI. Shows transient success/error feedback on the icon.
+ * secret values) and the clipboard write happen entirely on the host, through System Host
+ * Shell `copyVariableToClipboard`, so the plaintext is never exposed to the UI. Shows
+ * transient success/error feedback on the icon.
  */
 const CopyValueButton = (props) => {
     const { pvar } = props;
@@ -98,8 +100,12 @@ const CopyValueButton = (props) => {
         try {
             const userContext = await (0, peers_sdk_1.getUserContext)();
             const groupId = userContext.currentlyActiveGroupId();
-            const result = await peers_sdk_1.rpcServerCalls.copyPvarValueToClipboard(pvar.persistentVarId, groupId);
-            setStatus(result.success ? "copied" : "error");
+            const tools = await (0, host_shell_consumer_1.hostShellTools)();
+            const result = await tools.copyVariableToClipboard({
+                persistentVarId: pvar.persistentVarId,
+                groupId,
+            });
+            setStatus(result.copied ? "copied" : "error");
         }
         catch (err) {
             console.error("Failed to copy variable value", err);

package/dist/tabs-layout/network-status-indicator.d.ts

@@ -31,7 +31,10 @@ interface INetworkStatusPresentation {
         count: number;
         colorClass: "text-success" | "text-danger";
     };
-    /** Bottom-left yellow upgrade arrow when this device has an app update available. */
+    /**
+     * Yellow upgrade arrow on the lower-left corner of the status mark when this device
+     * has an app update available. Kept on the mark so it does not hang below the tab strip.
+     */
     updateAvailableOverlay?: boolean;
 }
 /** Convert host availability and network state into accessible indicator text and styling. */

package/dist/tabs-layout/network-status-indicator.js

@@ -352,12 +352,18 @@ function NetworkStatusIndicator({ compact = false }) {
                                     fontWeight: 700,
                                     right: "-0.28rem",
                                     bottom: "-0.32rem",
-                                }, "aria-hidden": "true", children: presentation.disconnectedGroupsOverlay.count })), presentation.updateAvailableOverlay && ((0, jsx_runtime_1.jsx)("i", { className: `network-status-update-badge bi ${app_update_controls_1.APP_UPDATE_ICON_CLASS} text-warning position-absolute`, style: {
-                                    fontSize: "0.5rem",
-                                    lineHeight: 1,
-                                    left: "-0.3rem",
-                                    bottom: "-0.32rem",
-                                }, "aria-hidden": "true" }))] }), !compact && ((0, jsx_runtime_1.jsxs)("span", { className: "small", children: [viewState.status?.connectionCount ?? 0, (0, jsx_runtime_1.jsx)("span", { className: "visually-hidden", children: " connections" })] }))] }), open && ((0, jsx_runtime_1.jsx)(NetworkStatusDetails, { detailsId: detailsId, status: viewState.status, appUpdate: appUpdate, unavailable: viewState.availability !== "ready", connectionsLoadState: connectionsLoadState, onUseInvite: () => {
+                                }, "aria-hidden": "true", children: presentation.disconnectedGroupsOverlay.count })), presentation.updateAvailableOverlay && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("i", { className: `network-status-update-badge bi ${app_update_controls_1.APP_UPDATE_ICON_CLASS} text-warning position-absolute`, style: {
+                                            fontSize: "0.5rem",
+                                            lineHeight: 1,
+                                            width: "0.5rem",
+                                            height: "0.5rem",
+                                            left: "-0.46rem",
+                                            bottom: "-0.08rem",
+                                        }, "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("style", { children: `
+                .network-status-update-badge.bi::before {
+                  vertical-align: 0;
+                }
+              ` })] }))] }), !compact && ((0, jsx_runtime_1.jsxs)("span", { className: "small", children: [viewState.status?.connectionCount ?? 0, (0, jsx_runtime_1.jsx)("span", { className: "visually-hidden", children: " connections" })] }))] }), open && ((0, jsx_runtime_1.jsx)(NetworkStatusDetails, { detailsId: detailsId, status: viewState.status, appUpdate: appUpdate, unavailable: viewState.availability !== "ready", connectionsLoadState: connectionsLoadState, onUseInvite: () => {
                     setOpen(false);
                     (0, tabs_state_1.goToTabPath)(identity_routes_1.IDENTITY_ACCEPT_PATH);
                 }, onOpenIdentity: () => {

package/dist/tabs-layout/network-status-indicator.test.js

@@ -362,7 +362,7 @@ describe("NetworkStatusIndicator", () => {
         view.rerender((0, jsx_runtime_1.jsx)(network_status_indicator_1.NetworkStatusIndicator, {}));
         const badge = view.container.querySelector(".network-status-update-badge");
         expect(badge).toHaveClass("bi-arrow-up-circle-fill", "text-warning");
-        expect(badge).toHaveStyle({ left: "-0.3rem", bottom: "-0.32rem" });
+        expect(badge).toHaveStyle({ left: "-0.46rem", bottom: "-0.08rem" });
         react_1.fireEvent.click(view.getByRole("button", { name: /Version 1\.1\.0 is ready to install/ }));
         const section = view.getByTestId("app-update-section");
         expect(section).toHaveTextContent("Installs automatically the next time Peers restarts");

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

@@ -182,8 +182,6 @@ const UILoader = (args) => {
     return (0, jsx_runtime_1.jsx)(UIAsyncLoader, { peersUIId: peersUIId, props: props }, peersUIId);
 };
 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) {
     let pvId = pkg.activePackageVersionId;
     try {
@@ -214,42 +212,17 @@ function loadUIBundle(pkg, forceRefresh) {
             if (!uiBundleFileId) {
                 return;
             }
-            if (isReactNativeWebView && peers_sdk_1.rpcServerCalls.injectUIBundle) {
-                const _w = window;
-                _w.__peersUIs = _w.__peersUIs || {};
-                const loadPromise = new Promise((resolveLoad, rejectLoad) => {
-                    _w.__peersUIBundleLoaded = (loadedFileId) => {
-                        if (loadedFileId === uiBundleFileId) {
-                            const store = _w.__peersUIs || {};
-                            Object.keys(store).forEach((peersUIId) => {
-                                peersUIs[peersUIId] = store[peersUIId];
-                            });
-                            resolveLoad();
-                        }
-                    };
-                    _w.__peersUIBundleError = (errorFileId, errorMsg) => {
-                        if (errorFileId === uiBundleFileId) {
-                            rejectLoad(new Error(errorMsg));
-                        }
-                    };
-                });
-                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 {
-                const bundleCode = await peers_sdk_1.rpcServerCalls.getFileContents(uiBundleFileId);
-                if (bundleCode) {
-                    const exportUIs = (peerUIs) => {
-                        peerUIs?.uis?.forEach((ui) => {
-                            peersUIs[ui.peersUIId] = ui;
-                        });
-                    };
-                    const bundleFunction = new Function("exportUIs", bundleCode);
-                    await bundleFunction(exportUIs);
-                }
-                console.log(`finished loading ui bundle for ${pkg.name}: ${(Date.now() - sTime).toFixed(0)}ms, ${bundleCode ? (bundleCode.length / 1000).toFixed(0) : "0"} KB`);
+            const bundleCode = await peers_sdk_1.rpcServerCalls.getFileContents(uiBundleFileId);
+            if (bundleCode) {
+                const exportUIs = (peerUIs) => {
+                    peerUIs?.uis?.forEach((ui) => {
+                        peersUIs[ui.peersUIId] = ui;
+                    });
+                };
+                const bundleFunction = new Function("exportUIs", bundleCode);
+                await bundleFunction(exportUIs);
             }
+            console.log(`finished loading ui bundle for ${pkg.name}: ${(Date.now() - sTime).toFixed(0)}ms, ${bundleCode ? (bundleCode.length / 1000).toFixed(0) : "0"} KB`);
         })().catch((err) => {
             console.error(`Error while loading ui module for ${pkg.name}`, err);
             throw err;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peers-app/peers-ui",
-  "version": "0.26.3",
+  "version": "0.26.5",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/peers-app/peers-ui.git"
@@ -30,7 +30,7 @@
     "lint:fix": "biome check --write ."
   },
   "peerDependencies": {
-    "@peers-app/peers-sdk": "^0.26.3",
+    "@peers-app/peers-sdk": "^0.26.5",
     "bootstrap": "^5.3.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
@@ -41,7 +41,7 @@
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.27.1",
     "@biomejs/biome": "2.3.11",
-    "@peers-app/peers-sdk": "0.26.3",
+    "@peers-app/peers-sdk": "0.26.5",
     "@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

@@ -5,7 +5,6 @@ import {
   type IGroup,
   newid,
   newKeys,
-  rpcServerCalls,
   saveGroupSecretKey,
   setUserTrustLevel,
   TrustLevel,
@@ -14,12 +13,19 @@ import {
 } from "@peers-app/peers-sdk";
 import React, { useEffect, useState } from "react";
 import { usePromise } from "../hooks";
+import { packagesTools } from "../screens/packages/packages-ipc";
 
 interface GroupSwitcherProps {
+  /** Current theme (`light` or `dark`). */
   colorMode: string;
+  /** Use the compact mobile layout. */
   isMobile?: boolean;
 }
 
+/**
+ * Header dropdown for switching the active group (or the personal context) and creating a
+ * new group, which also installs the default packages into it.
+ */
 export function GroupSwitcher({ colorMode, isMobile = false }: GroupSwitcherProps) {
   const [showDropdown, setShowDropdown] = useState(false);
   const [showCreateModal, setShowCreateModal] = useState(false);
@@ -291,9 +297,11 @@ function CreateGroupModal({
 
       // Auto-install peers-core for the new group (copy from another context that
       // already has it, else fall back to the remote updateUrl / bundle).
-      await rpcServerCalls.seedBundledPeersCore(groupId).catch((err: unknown) => {
-        console.error("Error auto-installing peers-core for group:", err);
-      });
+      await packagesTools(groupId)
+        .then((tools) => tools.installDefaultPackages())
+        .catch((err: unknown) => {
+          console.error("Error auto-installing peers-core for group:", err);
+        });
 
       // Notify parent
       onGroupCreated(newGroup.groupId);

package/src/components/markdown-with-mentions.tsx

@@ -1,8 +1,9 @@
 // import { FileListDisplay } from './file-list-display';
-import { type IMentionData, mentionRegex, rpcServerCalls } from "@peers-app/peers-sdk";
+import { type IMentionData, mentionRegex } from "@peers-app/peers-sdk";
 import React from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
+import { openOnHost } from "../host-shell/host-shell-consumer";
 import { mentionConfigs } from "../mention-configs";
 
 // Custom Link Renderer
@@ -14,7 +15,7 @@ const LinkRenderer = (props: { href?: string; children?: React.ReactNode }) => {
       onClick={(e) => {
         if (href?.startsWith("http")) {
           e.preventDefault();
-          rpcServerCalls.openLinkInBrowser(href);
+          void openOnHost(href);
         }
       }}
     >
@@ -159,6 +160,10 @@ const createElementWithMentions = (Element: React.ElementType) => {
   };
 };
 
+/**
+ * Render markdown (GitHub-flavored) with `@mentions` turned into links. Web links open in
+ * the system browser through System Host Shell instead of navigating the app window.
+ */
 export const MarkdownWithMentions: React.FC<{ content: string }> = ({ content }) => {
   const components = {
     p: createElementWithMentions("p"),

package/src/components/save-button.tsx

@@ -3,10 +3,13 @@ import type React from "react";
 import { isDesktop, mainContentPath } from "../globals";
 import { useObservable } from "../hooks";
 
+/** Props for {@link SaveButton}. */
 export interface ISaveButtonProps {
   /** Used with many concrete table row shapes; IDoc stays generic at call sites. */
   doc: IDoc<any>;
+  /** Save handler; defaults to `doc.save`. */
   onClick?: () => void | Promise<void>;
+  /** Extra dropdown actions: buttons, or arbitrary nodes such as dividers. */
   addActions?: (
     | {
         label: string;
@@ -15,9 +18,21 @@ export interface ISaveButtonProps {
       }
     | React.ReactNode
   )[];
+  /** Hide the built-in Discard Changes and Delete actions. */
   noBuiltInActions?: boolean;
+  /** Label for the built-in delete action. Default: `Delete`. */
+  deleteLabel?: string;
+  /**
+   * Replace the built-in delete (`doc.delete()`), for records whose removal must go through
+   * a Runtime contract. Runs after the user confirms; the screen then navigates up.
+   */
+  onDelete?: () => void | Promise<void>;
 }
 
+/**
+ * Save button with a dropdown of extra actions plus built-in Discard Changes and Delete.
+ * Enabled only while the document has unsaved changes.
+ */
 export const SaveButton = (props: ISaveButtonProps) => {
   let { doc, addActions } = props;
   useObservable(doc.q);
@@ -45,12 +60,18 @@ export const SaveButton = (props: ISaveButtonProps) => {
     if (allActions.length) {
       allActions.push(<hr className="dropdown-divider mt-3" />);
     }
+    const deleteLabel = props.deleteLabel ?? "Delete";
     allActions.push({
-      label: "Delete",
+      label: deleteLabel,
       className: `text-bg-danger`,
       onClick: async () => {
-        if (confirm("Are you sure you want to delete this?")) {
-          await doc.delete();
+        if (confirm(`Are you sure you want to ${deleteLabel.toLowerCase()} this?`)) {
+          try {
+            await (props.onDelete ? props.onDelete() : doc.delete());
+          } catch (err) {
+            alert(`${deleteLabel} failed: ${err instanceof Error ? err.message : String(err)}`);
+            return;
+          }
           const pathParts = mainContentPath().split("/");
           pathParts.pop();
           const path = pathParts.join("/") ?? "";

package/src/globals.tsx

@@ -9,11 +9,11 @@ import {
   Messages,
   observable,
   reloadPackagesOnPageRefresh,
-  rpcClientCalls,
-  rpcServerCalls,
   sleep,
+  subscribe,
 } from "@peers-app/peers-sdk";
 import { canonicalizeRoute } from "./screens/identity/identity-routes";
+import { packagesTools } from "./screens/packages/packages-ipc";
 import { handleMainPathChanged, openNewTab } from "./tabs-layout/tabs-state";
 import { stripMentions } from "./utils";
 
@@ -107,14 +107,10 @@ export async function openThreadInTab(thread: string | IMessage) {
   });
 }
 
-rpcClientCalls.setClientPath = async (url: string) => {
-  mainContentPath((url && String(url).trim()) || "");
-};
-
-rpcClientCalls.openThread = async (threadId: string) => {
-  console.warn("Opening thread:", threadId);
-  openThread(threadId);
-};
+// A notification clicked in the desktop app's main process opens its thread here.
+subscribe<{ threadId?: string }>("ui:openThread", (event) => {
+  if (event.data?.threadId) void openThread(event.data.threadId);
+});
 
 /** Signed profile for the active user after {@link loadGlobals}. */
 export let me: IUser = null as unknown as IUser;
@@ -179,6 +175,31 @@ export function initializeHashNavigation() {
   }
 }
 
+/** Longest page startup waits for package folders to be re-read. */
+const PACKAGE_FOLDER_RELOAD_WAIT_MS = 30_000;
+
+/**
+ * Re-read this device's package folders so rebuilt dev bundles load before the UI does.
+ * Skipped on hosts without package folders; failures are logged, and the wait is bounded so
+ * a slow host cannot stall startup.
+ */
+async function reloadPackageFolders(): Promise<void> {
+  const reload = (async () => {
+    const tools = await packagesTools();
+    const { capabilities } = await tools.getCapabilities();
+    if (!capabilities.fileSystem) return;
+    const { skipped, results } = await tools.reloadAllPackages();
+    if (skipped) console.warn(skipped);
+    for (const result of results) {
+      if (!result.ok) console.warn(`[packages] Reloading ${result.name} failed: ${result.error}`);
+      if (result.warning) console.warn(`[packages] ${result.name}: ${result.warning}`);
+    }
+  })().catch((err: unknown) => {
+    console.warn("[packages] Reloading package folders failed:", err);
+  });
+  await Promise.race([reload, sleep(PACKAGE_FOLDER_RELOAD_WAIT_MS)]);
+}
+
 /** Load global user state required before the root layout renders. */
 export async function loadGlobals() {
   if (globalsLoaded) return true;
@@ -186,7 +207,7 @@ export async function loadGlobals() {
   me = await getMe();
   await reloadPackagesOnPageRefresh.loadingPromise;
   if (reloadPackagesOnPageRefresh()) {
-    await rpcServerCalls.addOrUpdatePackage("updateAll");
+    await reloadPackageFolders();
   }
   await Promise.all([
     Groups()

package/src/host-shell/host-shell-consumer.test.ts

@@ -0,0 +1,32 @@
+const mockTools = { open: jest.fn(), openInEditor: jest.fn() };
+jest.mock("@peers-app/peers-sdk", () => ({
+  getHostShellContractDefinition: () => ({ contractId: "host-shell" }),
+  hostContractConsumer: () => ({ get: async () => ({ tools: mockTools }), dispose: () => {} }),
+}));
+
+import { openInEditorOnHost, openOnHost } from "./host-shell-consumer";
+
+const alert = jest.fn();
+beforeEach(() => {
+  Object.assign(window, { alert });
+  jest.spyOn(console, "error").mockImplementation(() => {});
+  mockTools.open.mockReset();
+  mockTools.openInEditor.mockReset();
+  alert.mockReset();
+});
+
+it("opens links and folders on the host", async () => {
+  await openOnHost("https://peers.app");
+  expect(mockTools.open).toHaveBeenCalledWith({ target: "https://peers.app" });
+  await openInEditorOnHost("~/peers/packages/desk");
+  expect(mockTools.openInEditor).toHaveBeenCalledWith({ path: "~/peers/packages/desk" });
+  expect(alert).not.toHaveBeenCalled();
+});
+
+it("shows why the host could not open something", async () => {
+  mockTools.open.mockRejectedValueOnce(new Error("open refuses git: links"));
+  await openOnHost("git@github.com:me/pkg.git");
+  expect(alert).toHaveBeenCalledWith(
+    "Could not open git@github.com:me/pkg.git: open refuses git: links",
+  );
+});

package/src/host-shell/host-shell-consumer.ts

@@ -0,0 +1,53 @@
+import {
+  getHostShellContractDefinition,
+  hostContractConsumer,
+  type IHostShellConsumer,
+} from "@peers-app/peers-sdk";
+
+/**
+ * Shared handle for System Host Shell on the local host. Calls name no data context, so the
+ * host runs them in the personal context, where the signed-in user has Self access.
+ */
+export const hostShellContract = hostContractConsumer<IHostShellConsumer>(
+  getHostShellContractDefinition(),
+);
+
+/** Return the System Host Shell tools of the local host. */
+export async function hostShellTools(): Promise<IHostShellConsumer["tools"]> {
+  return (await hostShellContract.get()).tools;
+}
+
+/**
+ * Open a web link in the browser, or a local file or folder with the OS. Failures (an
+ * unsupported host, a refused link scheme, a missing folder) are logged and shown.
+ *
+ * @param target - Link or local path (`~` allowed).
+ */
+export async function openOnHost(target: string): Promise<void> {
+  try {
+    await (await hostShellTools()).open({ target });
+  } catch (error) {
+    reportHostShellError(`Could not open ${target}`, error);
+  }
+}
+
+/**
+ * Open a folder in a code editor (VS Code when installed), else with the OS.
+ *
+ * @param path - Folder or file (`~` allowed).
+ */
+export async function openInEditorOnHost(path: string): Promise<void> {
+  try {
+    await (await hostShellTools()).openInEditor({ path });
+  } catch (error) {
+    reportHostShellError(`Could not open ${path}`, error);
+  }
+}
+
+function reportHostShellError(what: string, error: unknown): void {
+  const message = error instanceof Error ? error.message : String(error);
+  console.error(`${what}:`, error);
+  if (typeof window !== "undefined" && typeof window.alert === "function") {
+    window.alert(`${what}: ${message}`);
+  }
+}

package/src/mention-configs.ts

@@ -2,11 +2,11 @@ import {
   Assistants,
   type IMentionData,
   PeerTypes,
-  rpcClientCalls,
   Tools,
   Users,
   Workflows,
 } from "@peers-app/peers-sdk";
+import { mainContentPath } from "./globals";
 
 import { listWorkflowMentionTools } from "./screens/tools/tool-catalog-ipc";
 
@@ -163,7 +163,7 @@ export const valueTypeMentionConfig: IMentionConfig = {
           },
       ),
   onClick(data) {
-    rpcClientCalls.setClientPath(`peer-types/${data.id}`);
+    mainContentPath(`peer-types/${data.id}`);
   },
 };
 

package/src/screens/groups/group-list.tsx

@@ -8,7 +8,6 @@ import {
   type IGroup,
   newid,
   newKeys,
-  rpcServerCalls,
   saveGroupSecretKey,
   setUserTrustLevel,
   TrustLevel,
@@ -21,6 +20,7 @@ import { mainContentPath } from "../../globals";
 import { usePromise } from "../../hooks";
 import { IDENTITY_GROUP_NEW_PATH, IDENTITY_GROUPS_PATH } from "../identity/identity-routes";
 import { PendingWorkLink } from "../invites/activity-view";
+import { packagesTools } from "../packages/packages-ipc";
 
 /** Search, summarize, and create groups owned by the signed-in user. */
 export function GroupList(props: { creating?: boolean } = {}) {
@@ -151,9 +151,11 @@ export function GroupList(props: { creating?: boolean } = {}) {
     await Groups(groupDataContext).signAndSave(group);
 
     // Auto-install peers-core for the new group
-    await rpcServerCalls.seedBundledPeersCore(groupId).catch((err: unknown) => {
-      console.error("Error auto-installing peers-core for group:", err);
-    });
+    await packagesTools(groupId)
+      .then((tools) => tools.installDefaultPackages())
+      .catch((err: unknown) => {
+        console.error("Error auto-installing peers-core for group:", err);
+      });
 
     mainContentPath(`${IDENTITY_GROUPS_PATH}/${group.groupId}`);
     return group;

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

@@ -1,4 +1,4 @@
-import { Packages, rpcServerCalls } from "@peers-app/peers-sdk";
+import { Packages } from "@peers-app/peers-sdk";
 import { Input } from "../../components/input";
 import { LoadingIndicator } from "../../components/loading-indicator";
 import { type ISaveButtonProps, SaveButton } from "../../components/save-button";
@@ -7,9 +7,12 @@ import { useObservableState, usePromise } from "../../hooks";
 import { updateActiveTabTitle } from "../../tabs-layout/tabs-state";
 import { LocalFolderGrantsPanel } from "./local-folder-grants-panel";
 import { PackageInfo } from "./package-info";
+import { PackageRuntimeStatus } from "./package-runtime-status";
 import { PackageVersionsList } from "./package-versions";
+import { packagesTools } from "./packages-ipc";
 
 interface IProps {
+  /** Package to show. */
   packageId: string;
 }
 
@@ -38,7 +41,15 @@ export const PackageDetails = (props: IProps) => {
     {
       label: "Reload Package",
       onClick: async () => {
-        await rpcServerCalls.addOrUpdatePackage(pkg.packageId, { update: true });
+        try {
+          const { warning } = await (await packagesTools()).reloadPackage({
+            packageId: pkg.packageId,
+          });
+          if (warning) alert(warning);
+        } catch (err) {
+          alert(`Reload failed: ${err instanceof Error ? err.message : String(err)}`);
+          return;
+        }
         await pkg.load();
         window.location.reload();
       },
@@ -50,15 +61,21 @@ export const PackageDetails = (props: IProps) => {
       // className: 'text-bg-warning',
       onClick: async () => {
         if (confirm(`Create a remote repository from this local one: ${pkg.name}`)) {
+          const tools = await packagesTools();
+          try {
+            await tools.linkRemoteRepo({ packageId: pkg.packageId });
+          } catch (err) {
+            alert(`Error linking remote repo: ${err instanceof Error ? err.message : err}`);
+            return;
+          }
           try {
-            await rpcServerCalls.addOrUpdatePackage(pkg.packageId, {
-              linkRemote: true,
-              update: true,
-            });
-            refresh(Date.now());
+            await tools.reloadPackage({ packageId: pkg.packageId });
           } catch (err) {
-            alert(`Error linking remote repo: ${err}`);
+            alert(
+              `Linked the remote repo, but reloading failed: ${err instanceof Error ? err.message : err}`,
+            );
           }
+          refresh(Date.now());
         }
       },
     });
@@ -91,10 +108,16 @@ export const PackageDetails = (props: IProps) => {
               pkg.q(0);
             }}
             addActions={[...addActions]}
+            deleteLabel="Uninstall"
+            onDelete={async () => {
+              await (await packagesTools()).uninstallPackage({ packageId: pkg.packageId });
+            }}
           />
         </div>
       </div>
 
+      <PackageRuntimeStatus packageId={pkg.packageId} />
+
       <Tabs
         key={pkg.packageId}
         tabs={[

package/src/screens/packages/package-helpers.test.ts

@@ -0,0 +1,57 @@
+import { GroupMemberRole, type IPackageVersion, newid } from "@peers-app/peers-sdk";
+import { activatePackageVersion } from "./package-helpers";
+
+const mockActivate = jest.fn(async () => ({}));
+const mockRole = jest.fn();
+const mockPrefs = jest.fn();
+
+jest.mock("./packages-ipc", () => ({
+  packagesTools: async () => ({ activatePackageVersion: mockActivate }),
+}));
+jest.mock("@peers-app/peers-sdk", () => {
+  const actual = jest.requireActual("@peers-app/peers-sdk");
+  return {
+    ...actual,
+    getUserContext: async () => ({
+      userId: "user",
+      defaultDataContext: () => ({ dataContextId: "group" }),
+    }),
+    getUserRole: () => mockRole(),
+    packagePrefsVar: () => Object.assign(mockPrefs, { loadingPromise: Promise.resolve() }),
+  };
+});
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  mockRole.mockResolvedValue(GroupMemberRole.Admin);
+  mockPrefs.mockReturnValue({});
+});
+
+test.each([
+  "dev",
+  "",
+  undefined,
+])("activates dev tag %p only on this device", async (versionTag) => {
+  const packageId = newid();
+  const packageVersionId = newid();
+  await activatePackageVersion(packageId, { packageVersionId, versionTag } as IPackageVersion);
+  expect(mockActivate).toHaveBeenCalledWith({ packageId, packageVersionId, scope: "device" });
+});
+
+test.each(["beta", "stable"])("an admin activates %s for the group", async (versionTag) => {
+  const packageId = newid();
+  const packageVersionId = newid();
+  await activatePackageVersion(packageId, { packageVersionId, versionTag } as IPackageVersion);
+  expect(mockActivate).toHaveBeenCalledWith({ packageId, packageVersionId, scope: "group" });
+});
+
+test("a device follow override keeps release activation local", async () => {
+  mockPrefs.mockReturnValue({ followTags: "stable,beta" });
+  const packageId = newid();
+  const packageVersionId = newid();
+  await activatePackageVersion(packageId, {
+    packageVersionId,
+    versionTag: "stable",
+  } as IPackageVersion);
+  expect(mockActivate).toHaveBeenCalledWith({ packageId, packageVersionId, scope: "device" });
+});