@peers-app/peers-ui 0.25.17 → 0.25.18

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

@@ -7,6 +7,7 @@ const input_1 = require("../../components/input");
 const markdown_with_mentions_1 = require("../../components/markdown-with-mentions");
 const tooltip_1 = require("../../components/tooltip");
 const hooks_1 = require("../../hooks");
+const package_network_panel_1 = require("./package-network-panel");
 /** Info tab for the package details screen. */
 const PackageInfo = (props) => {
     const { pkg } = props;
@@ -116,6 +117,6 @@ const PackageInfo = (props) => {
                                             await (0, peers_sdk_1.updatePackagePrefs)(pkg.packageId, {
                                                 followTags: val === "stable" ? "stable" : val,
                                             });
-                                        }, children: [(0, jsx_runtime_1.jsx)("option", { value: "stable", children: "Stable" }), (0, jsx_runtime_1.jsx)("option", { value: "stable,beta", children: "Stable + Beta" })] })] })] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-2", children: [(0, jsx_runtime_1.jsx)("hr", {}), (0, jsx_runtime_1.jsxs)("small", { children: ["Description:", (0, jsx_runtime_1.jsx)(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.` })] }), (0, jsx_runtime_1.jsx)(markdown_with_mentions_1.MarkdownWithMentions, { content: pkg.description || "" })] })] }));
+                                        }, children: [(0, jsx_runtime_1.jsx)("option", { value: "stable", children: "Stable" }), (0, jsx_runtime_1.jsx)("option", { value: "stable,beta", children: "Stable + Beta" })] })] })] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-2", children: [(0, jsx_runtime_1.jsx)("hr", {}), (0, jsx_runtime_1.jsxs)("small", { children: ["Description:", (0, jsx_runtime_1.jsx)(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.` })] }), (0, jsx_runtime_1.jsx)(markdown_with_mentions_1.MarkdownWithMentions, { content: pkg.description || "" })] }), (0, jsx_runtime_1.jsx)(package_network_panel_1.PackageNetworkPanel, { packageId: pkg.packageId })] }));
 };
 exports.PackageInfo = PackageInfo;

package/dist/screens/packages/package-network-panel.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Shows the host allowlist and credential refs declared by an isolated package.
+ *
+ * Secret values stay on the host. A host that does not provide System HTTP, such
+ * as the PWA, renders nothing.
+ */
+export declare const PackageNetworkPanel: (props: {
+    packageId: string;
+}) => import("react/jsx-runtime").JSX.Element | null;

package/dist/screens/packages/package-network-panel.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PackageNetworkPanel = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = require("react");
+/**
+ * Shows the host allowlist and credential refs declared by an isolated package.
+ *
+ * Secret values stay on the host. A host that does not provide System HTTP, such
+ * as the PWA, renders nothing.
+ */
+const PackageNetworkPanel = (props) => {
+    const [policy, setPolicy] = (0, react_1.useState)();
+    (0, react_1.useEffect)(() => {
+        let cancelled = false;
+        let dispose = () => { };
+        (async () => {
+            try {
+                const userContext = await (0, peers_sdk_1.getUserContext)();
+                const dataContextId = userContext.currentlyActiveGroupId() || userContext.userId;
+                const transport = (0, peers_sdk_1.getHostContractTransport)() ?? (await (0, peers_sdk_1.waitForHostContractTransport)({ timeoutMs: 3_000 }));
+                const consumer = (0, peers_sdk_1.createContractConsumer)((0, peers_sdk_1.getHttpContractDefinition)(), transport, {
+                    dataContextId,
+                });
+                dispose = () => consumer.dispose();
+                const next = await consumer.tools.describePolicy({ packageId: props.packageId });
+                if (!cancelled) {
+                    setPolicy(next);
+                }
+            }
+            catch {
+                if (!cancelled) {
+                    setPolicy(undefined);
+                }
+            }
+        })();
+        return () => {
+            cancelled = true;
+            dispose();
+        };
+    }, [props.packageId]);
+    if (!policy || (policy.allowedHosts.length === 0 && policy.credentials.length === 0)) {
+        return policy ? ((0, jsx_runtime_1.jsx)("div", { className: "mt-3", children: (0, jsx_runtime_1.jsx)("small", { className: "text-muted", children: "This package does not declare outbound network access." }) })) : null;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "mt-3", children: [(0, jsx_runtime_1.jsx)("small", { children: "Network access" }), (0, jsx_runtime_1.jsx)("ul", { className: "mb-2", children: policy.allowedHosts.map((host) => ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("code", { children: host }) }, host))) }), policy.credentials.length > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("small", { children: "Credentials injected by the host" }), (0, jsx_runtime_1.jsx)("ul", { className: "mb-0", children: policy.credentials.map((credential) => ((0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("code", { children: credential.ref }), " sets ", (0, jsx_runtime_1.jsx)("code", { children: credential.header }), " from", " ", (0, jsx_runtime_1.jsx)("code", { children: credential.secretVar }), " (", credential.scope, ")"] }, credential.ref))) })] }))] }));
+};
+exports.PackageNetworkPanel = PackageNetworkPanel;

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

@@ -3,7 +3,13 @@ import "../ui-defaults";
 interface IProps extends UIContext {
     props: Record<string, unknown>;
 }
+/**
+ * Pick a registered route for the current screen context and render its component.
+ *
+ * @param props - Screen context, including the route props to validate.
+ */
 export declare const UIRouter: (props: IProps) => import("react/jsx-runtime").JSX.Element | undefined;
+/** Package id used when peers-ui registers its own built-in screens. */
 export declare const peersSystemPackageId = "000peers0system000package";
 /**
  * This is meant to make it easy to register components that are internal to peers

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

@@ -99,6 +99,11 @@ class UIErrorBoundary extends react_1.Component {
         return this.props.children;
     }
 }
+/**
+ * Pick a registered route for the current screen context and render its component.
+ *
+ * @param props - Screen context, including the route props to validate.
+ */
 const UIRouter = (props) => {
     let matchingRoute;
     const allRoutes = _window.getPeersUIRoutes();
@@ -166,9 +171,12 @@ const UIRouter = (props) => {
 };
 exports.UIRouter = UIRouter;
 const UILoader = (args) => {
+    if (!args.props) {
+        args.props = {};
+    }
     const { props, peersUIId } = args;
     const [lastReloadTime] = (0, hooks_1.useObservable)(globals_1.packageReloaded);
-    args.props.__lastPackageReload = lastReloadTime;
+    props.__lastPackageReload = lastReloadTime;
     // check if peersUIId maps to an in-memory react component
     const peersUI = peersUIs[peersUIId];
     if (peersUI?.content) {
@@ -184,7 +192,7 @@ const UILoader = (args) => {
         const Component = peersUI.content;
         return ((0, jsx_runtime_1.jsx)(UIErrorBoundary, { peersUIId: peersUIId, componentName: peersUI.content?.name, children: (0, jsx_runtime_1.jsx)(Component, { ...args.props }) }));
     }
-    return (0, jsx_runtime_1.jsx)(UIAsyncLoader, { ...args });
+    return (0, jsx_runtime_1.jsx)(UIAsyncLoader, { peersUIId: peersUIId, props: props });
 };
 const uiLoadingPromises = {};
 // Check if we're running in a React Native WebView (has injectUIBundle available)
@@ -388,6 +396,7 @@ if (typeof window !== "undefined") {
         });
     }
 }
+/** Package id used when peers-ui registers its own built-in screens. */
 exports.peersSystemPackageId = "000peers0system000package";
 /**
  * This is meant to make it easy to register components that are internal to peers

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peers-app/peers-ui",
-  "version": "0.25.17",
+  "version": "0.25.18",
   "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.25.17",
+    "@peers-app/peers-sdk": "^0.25.18",
     "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.25.17",
+    "@peers-app/peers-sdk": "0.25.18",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",

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

@@ -17,6 +17,7 @@ import { Input } from "../../components/input";
 import { MarkdownWithMentions } from "../../components/markdown-with-mentions";
 import { Tooltip } from "../../components/tooltip";
 import { useObservable, usePromise } from "../../hooks";
+import { PackageNetworkPanel } from "./package-network-panel";
 
 /** Info tab for the package details screen. */
 export const PackageInfo = (props: { pkg: IDoc<IPackage> }) => {
@@ -347,6 +348,7 @@ export const PackageInfo = (props: { pkg: IDoc<IPackage> }) => {
         </small>
         <MarkdownWithMentions content={pkg.description || ""} />
       </div>
+      <PackageNetworkPanel packageId={pkg.packageId} />
     </div>
   );
 };

package/src/screens/packages/package-network-panel.tsx

@@ -0,0 +1,82 @@
+import {
+  createContractConsumer,
+  getHostContractTransport,
+  getHttpContractDefinition,
+  getUserContext,
+  type IHttpPolicyInfo,
+  waitForHostContractTransport,
+} from "@peers-app/peers-sdk";
+import { useEffect, useState } from "react";
+
+/**
+ * Shows the host allowlist and credential refs declared by an isolated package.
+ *
+ * Secret values stay on the host. A host that does not provide System HTTP, such
+ * as the PWA, renders nothing.
+ */
+export const PackageNetworkPanel = (props: { packageId: string }) => {
+  const [policy, setPolicy] = useState<IHttpPolicyInfo | undefined>();
+
+  useEffect(() => {
+    let cancelled = false;
+    let dispose = () => {};
+    (async () => {
+      try {
+        const userContext = await getUserContext();
+        const dataContextId = userContext.currentlyActiveGroupId() || userContext.userId;
+        const transport =
+          getHostContractTransport() ?? (await waitForHostContractTransport({ timeoutMs: 3_000 }));
+        const consumer = createContractConsumer(getHttpContractDefinition(), transport, {
+          dataContextId,
+        });
+        dispose = () => consumer.dispose();
+        const next = await consumer.tools.describePolicy({ packageId: props.packageId });
+        if (!cancelled) {
+          setPolicy(next);
+        }
+      } catch {
+        if (!cancelled) {
+          setPolicy(undefined);
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+      dispose();
+    };
+  }, [props.packageId]);
+
+  if (!policy || (policy.allowedHosts.length === 0 && policy.credentials.length === 0)) {
+    return policy ? (
+      <div className="mt-3">
+        <small className="text-muted">This package does not declare outbound network access.</small>
+      </div>
+    ) : null;
+  }
+
+  return (
+    <div className="mt-3">
+      <small>Network access</small>
+      <ul className="mb-2">
+        {policy.allowedHosts.map((host) => (
+          <li key={host}>
+            <code>{host}</code>
+          </li>
+        ))}
+      </ul>
+      {policy.credentials.length > 0 && (
+        <>
+          <small>Credentials injected by the host</small>
+          <ul className="mb-0">
+            {policy.credentials.map((credential) => (
+              <li key={credential.ref}>
+                <code>{credential.ref}</code> sets <code>{credential.header}</code> from{" "}
+                <code>{credential.secretVar}</code> ({credential.scope})
+              </li>
+            ))}
+          </ul>
+        </>
+      )}
+    </div>
+  );
+};

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

@@ -165,6 +165,11 @@ interface IProps extends UIContext {
   props: Record<string, unknown>;
 }
 
+/**
+ * Pick a registered route for the current screen context and render its component.
+ *
+ * @param props - Screen context, including the route props to validate.
+ */
 export const UIRouter = (props: IProps) => {
   let matchingRoute: IPeersUIRoute | undefined;
   const allRoutes = _window.getPeersUIRoutes() as IPeersUIRoute[];
@@ -237,10 +242,13 @@ export const UIRouter = (props: IProps) => {
   return UILoader({ peersUIId: matchingRoute.peersUIId, props: props.props });
 };
 
-const UILoader = (args: { peersUIId: string; props: Record<string, unknown> }) => {
+const UILoader = (args: { peersUIId: string; props?: Record<string, unknown> }) => {
+  if (!args.props) {
+    args.props = {};
+  }
   const { props, peersUIId } = args;
   const [lastReloadTime] = useObservable(packageReloaded);
-  args.props.__lastPackageReload = lastReloadTime;
+  props.__lastPackageReload = lastReloadTime;
   // check if peersUIId maps to an in-memory react component
   const peersUI = peersUIs[peersUIId];
   if (peersUI?.content) {
@@ -274,7 +282,7 @@ const UILoader = (args: { peersUIId: string; props: Record<string, unknown> }) =
     );
   }
 
-  return <UIAsyncLoader {...args} />;
+  return <UIAsyncLoader peersUIId={peersUIId} props={props} />;
 };
 
 const uiLoadingPromises: Record<string, Promise<void>> = {};
@@ -589,6 +597,7 @@ if (typeof window !== "undefined") {
   }
 }
 
+/** Package id used when peers-ui registers its own built-in screens. */
 export const peersSystemPackageId = "000peers0system000package";
 
 /**