@peers-app/peers-ui 0.19.8 → 0.19.10

package/dist/components/list-screen.d.ts

@@ -1,7 +1,11 @@
 import { type DataFilter, type SortBy, type Table } from "@peers-app/peers-sdk";
 interface IProps<T extends Record<string, unknown>> {
     table: Table<T>;
-    newRecord: (text: string) => Promise<T>;
+    /**
+     * Creates a new record from the search text when the user presses Enter. When omitted,
+     * the list is browse/search only (no create) and the placeholder drops "or create".
+     */
+    newRecord?: (text: string) => Promise<T>;
     getFilter?: (text: string) => DataFilter<T>;
     sortBy?: SortBy<T>;
     renderItem: (record: T) => JSX.Element;

package/dist/components/list-screen.js

@@ -93,13 +93,15 @@ function ListScreen(props) {
     async function searchSubmit(evt) {
         if (evt.key !== "Enter")
             return;
+        if (!newRecord)
+            return;
         const name = searchText.trim();
         if (!name)
             return;
         searchTextObs("");
         await newRecord(name);
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-fluid", children: [(0, jsx_runtime_1.jsx)("div", { className: "input-group mt-3 mb-3", children: (0, jsx_runtime_1.jsx)(input_1.Input, { value: searchTextObs, className: "form-control", placeholder: `Search or create ${props.placeholderName || table.metaData.name}`, autoFocus: !!(0, globals_1.isDesktop)(), onKeyUp: (evt) => searchSubmit(evt) }) }), (0, jsx_runtime_1.jsx)("div", { className: "peers-list-container", children: (0, jsx_runtime_1.jsx)(lazy_list_1.LazyList, { resetTrigger: searchText, loadMore: loadMore, scrollThreshold: 0.6, renderItems: (notes) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-fluid", children: [(0, jsx_runtime_1.jsx)("div", { className: "input-group mt-3 mb-3", children: (0, jsx_runtime_1.jsx)(input_1.Input, { value: searchTextObs, className: "form-control", placeholder: `${newRecord ? "Search or create" : "Search"} ${props.placeholderName || table.metaData.name}`, autoFocus: !!(0, globals_1.isDesktop)(), onKeyUp: (evt) => searchSubmit(evt) }) }), (0, jsx_runtime_1.jsx)("div", { className: "peers-list-container", children: (0, jsx_runtime_1.jsx)(lazy_list_1.LazyList, { resetTrigger: searchText, loadMore: loadMore, scrollThreshold: 0.6, renderItems: (notes) => {
                         return notes.map(props.renderItem);
                     }, loadingIndicator: (0, jsx_runtime_1.jsx)("div", { className: "d-flex justify-content-center", style: { height: 200 }, children: (0, jsx_runtime_1.jsx)(loading_indicator_1.LoadingIndicator, {}) }), endOfList: (0, jsx_runtime_1.jsx)("div", { className: "d-flex justify-content-center", style: { height: 200 } }) }) })] }));
 }

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

@@ -56,7 +56,8 @@ const PackageDetails = (props) => {
         });
     }
     return ((0, jsx_runtime_1.jsxs)("div", { className: "container-fluid p-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex", children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("h4", { children: (0, jsx_runtime_1.jsx)("i", { className: "bi bi-box-fill me-2" }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex-grow-1", children: (0, jsx_runtime_1.jsx)("h4", { children: (0, jsx_runtime_1.jsx)(input_1.Input, { className: "border border-0", style: { width: "100%", outline: "none", backgroundColor: "transparent" }, value: pkg.qs.name }, pkg.packageId) }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(save_button_1.SaveButton, { doc: pkg, onClick: async () => {
-                                await pkg.save();
+                                await (0, peers_sdk_1.Packages)().signAndSave(pkg.toJS());
+                                pkg.q(0);
                             }, addActions: [...addActions] }, pkg.packageId) })] }), (0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: [
                     {
                         name: "Info",

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

@@ -72,7 +72,7 @@ const PackageInfo = (props) => {
                                             peers_sdk_1.rpcServerCalls.openPackage(localPath || peers_sdk_1.packagesRootDir);
                                         }, children: "Open Local" })] })] }), (0, jsx_runtime_1.jsx)("input", { type: "text", className: "form-control mb-3 p-0 ps-2", placeholder: "~/peers/packages/my-package", value: localPath || "", onChange: (e) => setLocalPath(e.target.value) })] }), remoteRepoUrl ? ((0, jsx_runtime_1.jsxs)("div", { className: "mt-2", children: [(0, jsx_runtime_1.jsxs)("small", { children: ["Source URL:", (0, jsx_runtime_1.jsxs)("small", { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: `The remote source of this package.  Often a github repository URL or a link to the Peers page for the package.` }), (0, jsx_runtime_1.jsx)("button", { className: "btn btn-sm btn-link", onClick: () => {
                                             peers_sdk_1.rpcServerCalls.openLinkInBrowser(remoteRepoUrl);
-                                        }, children: "Open Remote" })] })] }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: pkg.qs.remoteRepo, className: "form-control mb-3 p-0 ps-2", disabled: true })] })) : null, (0, jsx_runtime_1.jsxs)("div", { className: "mt-2", children: [(0, jsx_runtime_1.jsx)("hr", {}), (0, jsx_runtime_1.jsxs)("small", { children: ["Version:", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: "The currently active version of this package. Manage versions in the Versions tab." })] }), activeVersion ? ((0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center mt-1 mb-3", children: [(0, jsx_runtime_1.jsxs)("strong", { className: "me-2", children: ["v", activeVersion.version] }), activeVersion.versionTag && ((0, jsx_runtime_1.jsx)("span", { className: `badge ${activeVersion.versionTag === "dev" ? "text-bg-danger" : activeVersion.versionTag.startsWith("beta") ? "text-bg-warning" : "text-bg-success"} me-2`, children: activeVersion.versionTag })), (0, jsx_runtime_1.jsx)("code", { className: "text-muted small me-2", children: activeVersion.packageVersionHash?.substring(0, 8) }), newerLevel === "uptodate" ? ((0, jsx_runtime_1.jsx)("span", { className: "badge text-bg-success", children: "Up to date" })) : newerLevel ? ((0, jsx_runtime_1.jsxs)("span", { className: `badge text-bg-${newerLevel === "major" ? "danger" : newerLevel === "minor" ? "warning" : "info"}`, children: ["Newer ", newerLevel, " version available"] })) : null] })) : ((0, jsx_runtime_1.jsx)("div", { className: "text-muted small mt-1 mb-3", children: "No active version" })), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsxs)("small", { children: ["Auto-Update Range:", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: "Controls which new versions are auto-activated for the group. When an admin device auto-upgrades, the group's active version advances for everyone. **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." })] }), (0, jsx_runtime_1.jsxs)("select", { className: "form-select form-select-sm", value: groupRange, onChange: async (e) => {
+                                        }, children: "Open Remote" })] })] }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: pkg.qs.remoteRepo, className: "form-control mb-3 p-0 ps-2", disabled: true })] })) : null, (0, jsx_runtime_1.jsxs)("div", { className: "mt-2", children: [(0, jsx_runtime_1.jsxs)("small", { children: ["Update URL:", (0, jsx_runtime_1.jsx)("small", { children: (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: `Base URL for remote package updates. Admin devices poll **<updateUrl>/latest-<tag>.json** on startup (for example **latest-stable.json**). Signed artifacts must be published to this host separately — for example via the publish-package tool or the peers-core full-release pipeline.` }) })] }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: pkg.qs.updateUrl, className: "form-control mb-3 p-0 ps-2", placeholder: "https://example.com/my-package", title: "Update URL" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-2", children: [(0, jsx_runtime_1.jsx)("hr", {}), (0, jsx_runtime_1.jsxs)("small", { children: ["Version:", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: "The currently active version of this package. Manage versions in the Versions tab." })] }), activeVersion ? ((0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center mt-1 mb-3", children: [(0, jsx_runtime_1.jsxs)("strong", { className: "me-2", children: ["v", activeVersion.version] }), activeVersion.versionTag && ((0, jsx_runtime_1.jsx)("span", { className: `badge ${activeVersion.versionTag === "dev" ? "text-bg-danger" : activeVersion.versionTag.startsWith("beta") ? "text-bg-warning" : "text-bg-success"} me-2`, children: activeVersion.versionTag })), (0, jsx_runtime_1.jsx)("code", { className: "text-muted small me-2", children: activeVersion.packageVersionHash?.substring(0, 8) }), newerLevel === "uptodate" ? ((0, jsx_runtime_1.jsx)("span", { className: "badge text-bg-success", children: "Up to date" })) : newerLevel ? ((0, jsx_runtime_1.jsxs)("span", { className: `badge text-bg-${newerLevel === "major" ? "danger" : newerLevel === "minor" ? "warning" : "info"}`, children: ["Newer ", newerLevel, " version available"] })) : null] })) : ((0, jsx_runtime_1.jsx)("div", { className: "text-muted small mt-1 mb-3", children: "No active version" })), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsxs)("small", { children: ["Auto-Update Range:", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: "Controls which new versions are auto-activated for the group. When an admin device auto-upgrades, the group's active version advances for everyone. **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." })] }), (0, jsx_runtime_1.jsxs)("select", { className: "form-select form-select-sm", value: groupRange, onChange: async (e) => {
                                     const val = e.target.value;
                                     const current = await (0, peers_sdk_1.Packages)().get(pkg.packageId);
                                     if (current) {

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

@@ -105,10 +105,12 @@ const ProfileSection = () => {
     }, [deviceId, deviceName, savedDeviceName]);
     const handleSave = async () => {
         try {
-            // Save user profile
-            if (me) {
+            // Save user profile (only when it actually changed). Pass me.toJS() — the
+            // raw doc's fields are non-enumerable getters that get dropped when the
+            // signAndSave call is serialized to JSON over the socket to the server.
+            if (me?.q()) {
                 const userContext = await (0, peers_sdk_1.getUserContext)();
-                await (0, peers_sdk_1.Users)(userContext.userDataContext).signAndSave(me);
+                await (0, peers_sdk_1.Users)(userContext.userDataContext).signAndSave(me.toJS());
                 me.q(0); // Reset change counter
             }
             // Save device name if changed

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

@@ -59,15 +59,58 @@ const VariableValue = (props) => {
     const { pvar } = props;
     const [isSecret] = (0, hooks_1.useObservable)(pvar.qs.isSecret);
     const scalarValue = (0, peers_sdk_1.observable)(pvar.value.value);
-    // WARNING: we're assuming this is a string
+    // WARNING: the editable string path assumes the value is a string
     (0, hooks_1.useSubscription)(pvar.qs.value, (value) => {
         scalarValue(value?.value);
     });
     (0, hooks_1.useSubscription)(scalarValue, (value) => {
         pvar.value = { value };
     });
+    const valueLabel = ((0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center justify-content-between", children: [(0, jsx_runtime_1.jsx)("small", { children: "Value:" }), (0, jsx_runtime_1.jsx)(CopyValueButton, { pvar: pvar })] }));
     if (isSecret) {
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("small", { children: "Value:" }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: scalarValue, type: "password", className: "form-control mb-3 p-0 ps-2", placeholder: "Variable value", title: "Variable value" })] }));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [valueLabel, (0, jsx_runtime_1.jsx)(input_1.Input, { value: scalarValue, type: "password", className: "form-control mb-3 p-0 ps-2", placeholder: "Variable value", title: "Variable value" })] }));
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("small", { children: "Value:" }), (0, jsx_runtime_1.jsx)(editor_inline_1.MarkdownEditorInline, { value: scalarValue, hideToolbar: true }), (0, jsx_runtime_1.jsx)("br", {})] }));
+    // The markdown editor only handles strings. System/package pvars may hold booleans,
+    // numbers, or objects, so render those read-only (still copyable via the button).
+    // Read directly (no subscription) to avoid a render/write-back loop with scalarValue.
+    const scalar = pvar.value?.value;
+    if (typeof scalar !== "string") {
+        const isObject = scalar !== null && typeof scalar === "object";
+        const display = scalar === undefined || scalar === null
+            ? ""
+            : isObject
+                ? JSON.stringify(scalar, null, 2)
+                : String(scalar);
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [valueLabel, isObject ? ((0, jsx_runtime_1.jsx)("pre", { className: "form-control mb-1 p-2", style: { whiteSpace: "pre-wrap", wordBreak: "break-word", maxHeight: 300 }, children: display })) : ((0, jsx_runtime_1.jsx)("input", { className: "form-control mb-1 p-0 ps-2", value: display, readOnly: true, title: "Variable value" })), (0, jsx_runtime_1.jsxs)("div", { className: "form-text text-muted mb-3", children: ["This ", typeof scalar, " value is read-only here \u2014 use Copy Value to copy it."] })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [valueLabel, (0, jsx_runtime_1.jsx)(editor_inline_1.MarkdownEditorInline, { value: scalarValue, hideToolbar: true }), (0, jsx_runtime_1.jsx)("br", {})] }));
+};
+/**
+ * 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.
+ */
+const CopyValueButton = (props) => {
+    const { pvar } = props;
+    const [status, setStatus] = (0, react_1.useState)("idle");
+    async function onCopy() {
+        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");
+        }
+        catch (err) {
+            console.error("Failed to copy variable value", err);
+            setStatus("error");
+        }
+        setTimeout(() => setStatus("idle"), 1500);
+    }
+    const iconClass = status === "copied"
+        ? "bi-check-lg text-success"
+        : status === "error"
+            ? "bi-exclamation-triangle text-danger"
+            : "bi-clipboard";
+    return ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "btn btn-sm btn-outline-secondary", onClick: onCopy, title: "Copy value to clipboard", children: [(0, jsx_runtime_1.jsx)("i", { className: iconClass }), (0, jsx_runtime_1.jsx)("span", { className: "ms-1", children: "Copy Value" })] }));
 };

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

@@ -5,9 +5,14 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const peers_sdk_1 = require("@peers-app/peers-sdk");
 const list_screen_1 = require("../../components/list-screen");
 const markdown_with_mentions_1 = require("../../components/markdown-with-mentions");
+const tabs_1 = require("../../components/tabs");
 const globals_1 = require("../../globals");
 const ui_loader_1 = require("../../ui-router/ui-loader");
-function VariableList() {
+function renderItem(persistentVar) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-fluid pb-4", children: [(0, jsx_runtime_1.jsx)("i", { className: (0, peers_sdk_1.getIconClassName)((0, peers_sdk_1.PersistentVars)()) }), "\u00A0", (0, jsx_runtime_1.jsx)("a", { href: `#variables/${persistentVar.persistentVarId}`, children: persistentVar.name || "<empty-name>" }), (0, jsx_runtime_1.jsx)("div", { style: { paddingLeft: "20px" }, children: (0, jsx_runtime_1.jsx)(markdown_with_mentions_1.MarkdownWithMentions, { content: persistentVar.description || "" }) })] }, persistentVar.persistentVarId));
+}
+/** List of user-created variables, with search-to-create. */
+function UserVariableList() {
     async function newRecord(name) {
         const userContext = await (0, peers_sdk_1.getUserContext)();
         const isPersonal = userContext.currentlyActiveGroupId() === userContext.userId;
@@ -29,11 +34,28 @@ function VariableList() {
             userCreated: true,
         };
     }
-    function renderItem(persistentVar) {
-        return ((0, jsx_runtime_1.jsxs)("div", { className: "container-fluid pb-4", children: [(0, jsx_runtime_1.jsx)("i", { className: (0, peers_sdk_1.getIconClassName)((0, peers_sdk_1.PersistentVars)()) }), "\u00A0", (0, jsx_runtime_1.jsx)("a", { href: `#variables/${persistentVar.persistentVarId}`, children: persistentVar.name || "<empty-name>" }), (0, jsx_runtime_1.jsx)("div", { style: { paddingLeft: "20px" }, children: (0, jsx_runtime_1.jsx)(markdown_with_mentions_1.MarkdownWithMentions, { content: persistentVar.description || "" }) })] }, persistentVar.persistentVarId));
-    }
     return ((0, jsx_runtime_1.jsx)(list_screen_1.ListScreen, { table: (0, peers_sdk_1.PersistentVars)(), newRecord: newRecord, getFilter: getFilter, sortBy: ["name"], renderItem: renderItem, placeholderName: "environment variable" }));
 }
+/**
+ * Browse/search list of non-user-created variables (system and package-owned pvars).
+ * These are read-only here (no create); selecting one opens the same detail screen.
+ */
+function SystemVariableList() {
+    function getFilter(searchText) {
+        return {
+            $or: [{ name: { $matchWords: searchText } }, { description: { $matchWords: searchText } }],
+            // $ne: true matches both `false` and unset (system/package pvars omit userCreated)
+            userCreated: { $ne: true },
+        };
+    }
+    return ((0, jsx_runtime_1.jsx)(list_screen_1.ListScreen, { table: (0, peers_sdk_1.PersistentVars)(), getFilter: getFilter, sortBy: ["name"], renderItem: renderItem, placeholderName: "system variable" }));
+}
+function VariableList() {
+    return ((0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: [
+            { name: "User", content: (0, jsx_runtime_1.jsx)(UserVariableList, {}) },
+            { name: "System", content: (0, jsx_runtime_1.jsx)(SystemVariableList, {}) },
+        ] }));
+}
 (0, ui_loader_1.registerInternalPeersUI)({
     peersUIId: "00m5fshz2g6ea23v8z6y0a1ci",
     component: VariableList,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peers-app/peers-ui",
-  "version": "0.19.8",
+  "version": "0.19.10",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/peers-app/peers-ui.git"
@@ -28,7 +28,7 @@
     "lint:fix": "biome check --write ."
   },
   "peerDependencies": {
-    "@peers-app/peers-sdk": "^0.19.8",
+    "@peers-app/peers-sdk": "^0.19.10",
     "bootstrap": "^5.3.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
@@ -39,7 +39,7 @@
     "@babel/preset-env": "^7.24.5",
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@peers-app/peers-sdk": "0.19.8",
+    "@peers-app/peers-sdk": "0.19.10",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",

package/src/components/list-screen.tsx

@@ -16,7 +16,11 @@ import { LoadingIndicator } from "./loading-indicator";
 
 interface IProps<T extends Record<string, unknown>> {
   table: Table<T>;
-  newRecord: (text: string) => Promise<T>;
+  /**
+   * Creates a new record from the search text when the user presses Enter. When omitted,
+   * the list is browse/search only (no create) and the placeholder drops "or create".
+   */
+  newRecord?: (text: string) => Promise<T>;
   getFilter?: (text: string) => DataFilter<T>;
   sortBy?: SortBy<T>;
   renderItem: (record: T) => JSX.Element;
@@ -78,6 +82,7 @@ export function ListScreen<T extends Record<string, unknown>>(props: IProps<T>)
 
   async function searchSubmit(evt: React.KeyboardEvent<HTMLInputElement>) {
     if (evt.key !== "Enter") return;
+    if (!newRecord) return;
     const name = searchText.trim();
     if (!name) return;
     searchTextObs("");
@@ -90,7 +95,7 @@ export function ListScreen<T extends Record<string, unknown>>(props: IProps<T>)
         <Input
           value={searchTextObs}
           className="form-control"
-          placeholder={`Search or create ${props.placeholderName || table.metaData.name}`}
+          placeholder={`${newRecord ? "Search or create" : "Search"} ${props.placeholderName || table.metaData.name}`}
           autoFocus={!!isDesktop()}
           onKeyUp={(evt) => searchSubmit(evt)}
         />

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

@@ -86,7 +86,8 @@ export const PackageDetails = (props: IProps) => {
             key={pkg.packageId}
             doc={pkg}
             onClick={async () => {
-              await pkg.save();
+              await Packages().signAndSave(pkg.toJS());
+              pkg.q(0);
             }}
             addActions={[...addActions]}
           />

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

@@ -152,6 +152,23 @@ export const PackageInfo = (props: { pkg: IDoc<IPackage> }) => {
         </div>
       ) : null}
 
+      <div className="mt-2">
+        <small>
+          Update URL:
+          <small>
+            <Tooltip
+              markdownContent={`Base URL for remote package updates. Admin devices poll **<updateUrl>/latest-<tag>.json** on startup (for example **latest-stable.json**). Signed artifacts must be published to this host separately — for example via the publish-package tool or the peers-core full-release pipeline.`}
+            />
+          </small>
+        </small>
+        <Input
+          value={pkg.qs.updateUrl}
+          className="form-control mb-3 p-0 ps-2"
+          placeholder="https://example.com/my-package"
+          title="Update URL"
+        />
+      </div>
+
       <div className="mt-2">
         <hr />
         <small>

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

@@ -126,10 +126,12 @@ const ProfileSection: React.FC = () => {
 
   const handleSave = async () => {
     try {
-      // Save user profile
-      if (me) {
+      // Save user profile (only when it actually changed). Pass me.toJS() — the
+      // raw doc's fields are non-enumerable getters that get dropped when the
+      // signAndSave call is serialized to JSON over the socket to the server.
+      if (me?.q()) {
         const userContext = await getUserContext();
-        await Users(userContext.userDataContext).signAndSave(me);
+        await Users(userContext.userDataContext).signAndSave(me.toJS());
         me.q(0); // Reset change counter
       }
 

package/src/screens/variables/variable-details.tsx

@@ -1,13 +1,15 @@
 import {
   camelCaseToSpaces,
   getIconClassName,
+  getUserContext,
   type IDoc,
   type IPersistentVar,
   type Observable,
   observable,
   PersistentVars,
+  rpcServerCalls,
 } from "@peers-app/peers-sdk";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { Checkbox } from "../../components/checkbox";
 import { Input } from "../../components/input";
 import { LoadingIndicator } from "../../components/loading-indicator";
@@ -162,7 +164,7 @@ const VariableValue = (props: { pvar: IDoc<IPersistentVar> }) => {
 
   const [isSecret] = useObservable(pvar.qs.isSecret);
   const scalarValue = observable(pvar.value.value);
-  // WARNING: we're assuming this is a string
+  // WARNING: the editable string path assumes the value is a string
   useSubscription(pvar.qs.value, (value) => {
     scalarValue(value?.value);
   });
@@ -170,10 +172,17 @@ const VariableValue = (props: { pvar: IDoc<IPersistentVar> }) => {
     pvar.value = { value };
   });
 
+  const valueLabel = (
+    <div className="d-flex align-items-center justify-content-between">
+      <small>Value:</small>
+      <CopyValueButton pvar={pvar} />
+    </div>
+  );
+
   if (isSecret) {
     return (
       <>
-        <small>Value:</small>
+        {valueLabel}
         <Input
           value={scalarValue}
           type="password"
@@ -185,11 +194,91 @@ const VariableValue = (props: { pvar: IDoc<IPersistentVar> }) => {
     );
   }
 
+  // The markdown editor only handles strings. System/package pvars may hold booleans,
+  // numbers, or objects, so render those read-only (still copyable via the button).
+  // Read directly (no subscription) to avoid a render/write-back loop with scalarValue.
+  const scalar = pvar.value?.value;
+  if (typeof scalar !== "string") {
+    const isObject = scalar !== null && typeof scalar === "object";
+    const display =
+      scalar === undefined || scalar === null
+        ? ""
+        : isObject
+          ? JSON.stringify(scalar, null, 2)
+          : String(scalar);
+    return (
+      <>
+        {valueLabel}
+        {isObject ? (
+          <pre
+            className="form-control mb-1 p-2"
+            style={{ whiteSpace: "pre-wrap", wordBreak: "break-word", maxHeight: 300 }}
+          >
+            {display}
+          </pre>
+        ) : (
+          <input
+            className="form-control mb-1 p-0 ps-2"
+            value={display}
+            readOnly
+            title="Variable value"
+          />
+        )}
+        <div className="form-text text-muted mb-3">
+          This {typeof scalar} value is read-only here — use Copy Value to copy it.
+        </div>
+      </>
+    );
+  }
+
   return (
     <>
-      <small>Value:</small>
+      {valueLabel}
       <MarkdownEditorInline value={scalarValue} hideToolbar />
       <br />
     </>
   );
 };
+
+/**
+ * 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.
+ */
+const CopyValueButton = (props: { pvar: IDoc<IPersistentVar> }) => {
+  const { pvar } = props;
+  const [status, setStatus] = useState<"idle" | "copied" | "error">("idle");
+
+  async function onCopy() {
+    try {
+      const userContext = await getUserContext();
+      const groupId = userContext.currentlyActiveGroupId();
+      const result = await rpcServerCalls.copyPvarValueToClipboard(pvar.persistentVarId, groupId);
+      setStatus(result.success ? "copied" : "error");
+    } catch (err) {
+      console.error("Failed to copy variable value", err);
+      setStatus("error");
+    }
+    setTimeout(() => setStatus("idle"), 1500);
+  }
+
+  const iconClass =
+    status === "copied"
+      ? "bi-check-lg text-success"
+      : status === "error"
+        ? "bi-exclamation-triangle text-danger"
+        : "bi-clipboard";
+
+  return (
+    <button
+      type="button"
+      className="btn btn-sm btn-outline-secondary"
+      onClick={onCopy}
+      title="Copy value to clipboard"
+    >
+      <i className={iconClass}></i>
+      <span className="ms-1">Copy Value</span>
+    </button>
+  );
+};

package/src/screens/variables/variable-list.tsx

@@ -7,10 +7,26 @@ import {
 } from "@peers-app/peers-sdk";
 import { ListScreen } from "../../components/list-screen";
 import { MarkdownWithMentions } from "../../components/markdown-with-mentions";
+import { Tabs } from "../../components/tabs";
 import { mainContentPath } from "../../globals";
 import { registerInternalPeersUI } from "../../ui-router/ui-loader";
 
-export function VariableList() {
+function renderItem(persistentVar: IPersistentVar) {
+  return (
+    <div key={persistentVar.persistentVarId} className="container-fluid pb-4">
+      <i className={getIconClassName(PersistentVars())}></i>&nbsp;
+      <a href={`#variables/${persistentVar.persistentVarId}`}>
+        {persistentVar.name || "<empty-name>"}
+      </a>
+      <div style={{ paddingLeft: "20px" }}>
+        <MarkdownWithMentions content={persistentVar.description || ""} />
+      </div>
+    </div>
+  );
+}
+
+/** List of user-created variables, with search-to-create. */
+function UserVariableList() {
   async function newRecord(name: string) {
     const userContext = await getUserContext();
     const isPersonal = userContext.currentlyActiveGroupId() === userContext.userId;
@@ -34,20 +50,6 @@ export function VariableList() {
     };
   }
 
-  function renderItem(persistentVar: IPersistentVar) {
-    return (
-      <div key={persistentVar.persistentVarId} className="container-fluid pb-4">
-        <i className={getIconClassName(PersistentVars())}></i>&nbsp;
-        <a href={`#variables/${persistentVar.persistentVarId}`}>
-          {persistentVar.name || "<empty-name>"}
-        </a>
-        <div style={{ paddingLeft: "20px" }}>
-          <MarkdownWithMentions content={persistentVar.description || ""} />
-        </div>
-      </div>
-    );
-  }
-
   return (
     <ListScreen
       table={PersistentVars()}
@@ -60,6 +62,41 @@ export function VariableList() {
   );
 }
 
+/**
+ * Browse/search list of non-user-created variables (system and package-owned pvars).
+ * These are read-only here (no create); selecting one opens the same detail screen.
+ */
+function SystemVariableList() {
+  function getFilter(searchText: string) {
+    return {
+      $or: [{ name: { $matchWords: searchText } }, { description: { $matchWords: searchText } }],
+      // $ne: true matches both `false` and unset (system/package pvars omit userCreated)
+      userCreated: { $ne: true },
+    };
+  }
+
+  return (
+    <ListScreen
+      table={PersistentVars()}
+      getFilter={getFilter}
+      sortBy={["name"]}
+      renderItem={renderItem}
+      placeholderName="system variable"
+    />
+  );
+}
+
+export function VariableList() {
+  return (
+    <Tabs
+      tabs={[
+        { name: "User", content: <UserVariableList /> },
+        { name: "System", content: <SystemVariableList /> },
+      ]}
+    />
+  );
+}
+
 registerInternalPeersUI({
   peersUIId: "00m5fshz2g6ea23v8z6y0a1ci",
   component: VariableList,