@peers-app/peers-ui 0.19.8 → 0.19.9

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/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.9",
   "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.9",
     "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.9",
     "@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/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,