@peers-app/peers-ui 0.25.9 → 0.25.11

package/dist/screens/packages/local-folder-grants-panel.d.ts

@@ -0,0 +1,15 @@
+/** Props for {@link LocalFolderGrantsPanel}. */
+export interface ILocalFolderGrantsPanelProps {
+    /**
+     * When set, the list and new grants are limited to this package.
+     * Omit it for the device-wide operator list.
+     */
+    packageId?: string;
+}
+/**
+ * Folder grants on this device, with add and revoke.
+ *
+ * Add opens the host folder picker. A host that does not provide System Local Folders
+ * (the PWA) shows the contract as unavailable.
+ */
+export declare function LocalFolderGrantsPanel(props: ILocalFolderGrantsPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/screens/packages/local-folder-grants-panel.js

@@ -0,0 +1,131 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LocalFolderGrantsPanel = LocalFolderGrantsPanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const globals_1 = require("../../globals");
+const hooks_1 = require("../../hooks");
+const use_host_contract_1 = require("../../hooks/use-host-contract");
+const local_folders_ipc_1 = require("./local-folders-ipc");
+/**
+ * Folder grants on this device, with add and revoke.
+ *
+ * Add opens the host folder picker. A host that does not provide System Local Folders
+ * (the PWA) shows the contract as unavailable.
+ */
+function LocalFolderGrantsPanel(props) {
+    const { consumer, error: transportError } = (0, use_host_contract_1.useHostContract)(local_folders_ipc_1.localFoldersConsumer);
+    const [groupList] = (0, hooks_1.useObservable)(globals_1.groups);
+    const [grants, setGrants] = (0, react_1.useState)();
+    const [loadError, setLoadError] = (0, react_1.useState)();
+    const [actionError, setActionError] = (0, react_1.useState)();
+    const [busy, setBusy] = (0, react_1.useState)(false);
+    const [groupId, setGroupId] = (0, react_1.useState)("");
+    const [mode, setMode] = (0, react_1.useState)("readwrite");
+    const [refresh, setRefresh] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
+        if (!consumer) {
+            return;
+        }
+        let cancelled = false;
+        consumer.tools.listGrants().then((result) => {
+            if (!cancelled) {
+                setGrants(result.grants);
+                setLoadError(undefined);
+            }
+        }, (cause) => {
+            if (!cancelled) {
+                setLoadError(cause instanceof Error ? cause : new Error(String(cause)));
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [consumer, refresh]);
+    const unavailable = isUnavailable(transportError) || isUnavailable(loadError);
+    const visible = (grants ?? []).filter((grant) => props.packageId ? grant.packageId === props.packageId : true);
+    const names = new Map(groupList.map((group) => [group.groupId, group.name || group.groupId]));
+    async function addFolder() {
+        if (!consumer || !groupId) {
+            return;
+        }
+        setBusy(true);
+        setActionError(undefined);
+        try {
+            await consumer.tools.requestGrant({
+                groupId,
+                mode,
+                ...(props.packageId ? { packageId: props.packageId } : {}),
+            });
+            setRefresh((value) => value + 1);
+        }
+        catch (cause) {
+            const message = cause instanceof Error ? cause.message : String(cause);
+            if (!/cancelled/i.test(message)) {
+                setActionError(message);
+            }
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    async function revoke(grantId) {
+        if (!consumer) {
+            return;
+        }
+        if (!window.confirm("Revoke this folder grant?")) {
+            return;
+        }
+        setBusy(true);
+        setActionError(undefined);
+        try {
+            await consumer.tools.revokeGrant({ grantId });
+            setRefresh((value) => value + 1);
+        }
+        catch (cause) {
+            setActionError(cause instanceof Error ? cause.message : String(cause));
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    return ((0, jsx_runtime_1.jsxs)("section", { className: "mb-4", children: [(0, jsx_runtime_1.jsx)("h5", { children: props.packageId ? "Folders" : "Local folders" }), (0, jsx_runtime_1.jsx)(FolderStatus, { unavailable: unavailable, transportError: transportError, loadError: loadError, loading: !!consumer && grants === undefined && !loadError }), consumer && !unavailable && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(GrantTable, { grants: visible, names: names, busy: busy, onRevoke: revoke }), (0, jsx_runtime_1.jsx)(AddFolderForm, { fieldScope: props.packageId ?? "device", groupId: groupId, groups: groupList.map((group) => ({
+                            groupId: group.groupId,
+                            name: group.name || group.groupId,
+                        })), mode: mode, busy: busy, onGroupId: setGroupId, onMode: setMode, onAdd: addFolder }), actionError && (0, jsx_runtime_1.jsx)("div", { className: "alert alert-danger mt-2 mb-0", children: actionError })] }))] }));
+}
+function FolderStatus(props) {
+    if (props.unavailable) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "alert alert-secondary mb-0", children: "System Local Folders is not available on this host." }));
+    }
+    const error = props.loadError ?? props.transportError;
+    if (error) {
+        return (0, jsx_runtime_1.jsx)("div", { className: "alert alert-danger mb-0", children: error.message });
+    }
+    if (props.loading) {
+        return (0, jsx_runtime_1.jsx)("div", { className: "text-muted", children: "Loading folder grants\u2026" });
+    }
+    return null;
+}
+function GrantTable(props) {
+    if (props.grants.length === 0) {
+        return (0, jsx_runtime_1.jsx)("p", { className: "text-muted", children: "No folder grants." });
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { className: "table-responsive", children: (0, jsx_runtime_1.jsxs)("table", { className: "table table-sm align-middle", children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { children: "Path" }), (0, jsx_runtime_1.jsx)("th", { children: "Group" }), (0, jsx_runtime_1.jsx)("th", { children: "Package" }), (0, jsx_runtime_1.jsx)("th", { children: "Mode" }), (0, jsx_runtime_1.jsx)("th", { children: "Created" }), (0, jsx_runtime_1.jsx)("th", {})] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: props.grants.map((grant) => ((0, jsx_runtime_1.jsx)(GrantRow, { grant: grant, groupName: props.names.get(grant.groupId) ?? grant.groupId, busy: props.busy, onRevoke: props.onRevoke }, grant.grantId))) })] }) }));
+}
+function GrantRow(props) {
+    const { grant } = props;
+    return ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { className: "text-break", children: grant.absolutePath }), (0, jsx_runtime_1.jsx)("td", { children: props.groupName }), (0, jsx_runtime_1.jsx)("td", { children: grant.packageId ?? "operator" }), (0, jsx_runtime_1.jsx)("td", { children: grant.mode }), (0, jsx_runtime_1.jsx)("td", { children: new Date(grant.createdAt).toLocaleString() }), (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-sm btn-outline-danger", disabled: props.busy, onClick: () => props.onRevoke(grant.grantId), children: "Revoke" }) })] }));
+}
+function AddFolderForm(props) {
+    return ((0, jsx_runtime_1.jsxs)("form", { className: "row g-2 align-items-end", onSubmit: (event) => {
+            event.preventDefault();
+            props.onAdd();
+        }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "col-md-5", children: [(0, jsx_runtime_1.jsx)("label", { className: "form-label", htmlFor: `local-folder-group-${props.fieldScope}`, children: "Group" }), (0, jsx_runtime_1.jsxs)("select", { id: `local-folder-group-${props.fieldScope}`, className: "form-select", value: props.groupId, onChange: (event) => props.onGroupId(event.target.value), children: [(0, jsx_runtime_1.jsx)("option", { value: "", children: "Select a group" }), props.groups.map((group) => ((0, jsx_runtime_1.jsx)("option", { value: group.groupId, children: group.name }, group.groupId)))] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-md-3", children: [(0, jsx_runtime_1.jsx)("label", { className: "form-label", htmlFor: `local-folder-mode-${props.fieldScope}`, children: "Mode" }), (0, jsx_runtime_1.jsxs)("select", { id: `local-folder-mode-${props.fieldScope}`, className: "form-select", value: props.mode, onChange: (event) => props.onMode(event.target.value), children: [(0, jsx_runtime_1.jsx)("option", { value: "readwrite", children: "readwrite" }), (0, jsx_runtime_1.jsx)("option", { value: "read", children: "read" })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "col-md-4", children: (0, jsx_runtime_1.jsx)("button", { type: "submit", className: "btn btn-primary", disabled: props.busy || !props.groupId, children: props.busy ? "Working…" : "Add folder" }) })] }));
+}
+function isUnavailable(error) {
+    if (!error) {
+        return false;
+    }
+    return /No contract provider registered|not available locally/i.test(error.message);
+}

package/dist/screens/packages/local-folders-ipc.d.ts

@@ -0,0 +1,24 @@
+import { type IContractConsumerBase, type IHostContractConsumer, type ILocalFolderGrantInfo, type ILocalFolderRequestGrantInput } from "@peers-app/peers-sdk";
+/** Tools the Packages screens use on System Local Folders. */
+export interface ILocalFoldersUiConsumer extends IContractConsumerBase {
+    tools: {
+        /** Create a grant. Omitting `absolutePath` opens the desktop folder picker. */
+        requestGrant(input: ILocalFolderRequestGrantInput): Promise<ILocalFolderGrantInfo>;
+        /** Active grants on this device. */
+        listGrants(): Promise<{
+            grants: ILocalFolderGrantInfo[];
+        }>;
+        /** Revoke one grant. `revoked` is false when it was already gone. */
+        revokeGrant(input: {
+            grantId: string;
+        }): Promise<{
+            revoked: boolean;
+        }>;
+    };
+}
+/**
+ * Shared System Local Folders consumer for the Packages screens.
+ *
+ * The PWA host does not register this contract. Callers treat a missing provider as unavailable.
+ */
+export declare const localFoldersConsumer: IHostContractConsumer<ILocalFoldersUiConsumer>;

package/dist/screens/packages/local-folders-ipc.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.localFoldersConsumer = void 0;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+/**
+ * Shared System Local Folders consumer for the Packages screens.
+ *
+ * The PWA host does not register this contract. Callers treat a missing provider as unavailable.
+ */
+exports.localFoldersConsumer = (0, peers_sdk_1.hostContractConsumer)((0, peers_sdk_1.getLocalFoldersContractDefinition)());

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

@@ -9,6 +9,7 @@ const save_button_1 = require("../../components/save-button");
 const tabs_1 = require("../../components/tabs");
 const hooks_1 = require("../../hooks");
 const tabs_state_1 = require("../../tabs-layout/tabs-state");
+const local_folder_grants_panel_1 = require("./local-folder-grants-panel");
 const package_info_1 = require("./package-info");
 const package_versions_1 = require("./package-versions");
 /** Detail screen for a single package with Info, Versions, Components, and Dependencies tabs. */
@@ -75,6 +76,10 @@ const PackageDetails = (props) => {
                         name: "Dependencies",
                         content: ((0, jsx_runtime_1.jsx)(tabs_1.ScreenTabBody, { children: "TODO - show all of the dependencies of the package" })),
                     },
+                    {
+                        name: "Folders",
+                        content: ((0, jsx_runtime_1.jsx)(tabs_1.ScreenTabBody, { children: (0, jsx_runtime_1.jsx)(local_folder_grants_panel_1.LocalFolderGrantsPanel, { packageId: pkg.packageId }) })),
+                    },
                 ] }, pkg.packageId)] }));
 };
 exports.PackageDetails = PackageDetails;

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

@@ -1,2 +1,3 @@
 /** Searchable list of installed packages, plus create/import from the search box. */
+/** Packages screen: search, local folder grants, and the installed package list. */
 export declare const PackageList: () => import("react/jsx-runtime").JSX.Element;

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

@@ -11,6 +11,7 @@ const tooltip_1 = require("../../components/tooltip");
 const globals_1 = require("../../globals");
 const hooks_1 = require("../../hooks");
 const ui_loader_1 = require("../../ui-router/ui-loader");
+const local_folder_grants_panel_1 = require("./local-folder-grants-panel");
 const package_helpers_1 = require("./package-helpers");
 function tagBadgeClass(tag) {
     if (tag === "dev")
@@ -120,6 +121,7 @@ const PackageRow = ({ pkg, onUpdated }) => {
     return ((0, jsx_runtime_1.jsxs)("div", { className: "container-fluid pb-4 d-flex align-items-center", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex-grow-1", style: { minWidth: 0 }, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-box-fill" }), "\u00A0\u00A0", (0, jsx_runtime_1.jsx)("a", { href: `#packages/${pkg.packageId}`, children: pkg.name }), isDeviceOverridden && ((0, jsx_runtime_1.jsx)("span", { className: "text-warning ms-1", title: "This device is using a different version than the group", children: (0, jsx_runtime_1.jsx)("i", { className: "bi bi-pc-display" }) })), status && ((0, jsx_runtime_1.jsxs)("span", { className: "ms-2", children: [(0, jsx_runtime_1.jsxs)("small", { className: "text-muted", children: ["v", status.activePv.version] }), status.activePv.versionTag && ((0, jsx_runtime_1.jsx)("span", { className: `badge ms-1 ${tagBadgeClass(status.activePv.versionTag)}`, style: { fontSize: "0.65em" }, children: status.activePv.versionTag })), hasUpdate ? ((0, jsx_runtime_1.jsxs)("span", { className: `badge ms-1 ${updateBadgeClass(status.newerLevel)}`, style: { fontSize: "0.65em" }, children: ["v", status.newestPv?.version, " available"] })) : isOnDev && hasGroupRelease ? ((0, jsx_runtime_1.jsxs)("span", { className: "badge ms-1 text-bg-secondary", style: { fontSize: "0.65em" }, children: ["release: v", status.groupReleasePv?.version] })) : ((0, jsx_runtime_1.jsx)("span", { className: "badge ms-1 text-bg-success", style: { fontSize: "0.65em" }, children: "up to date" }))] })), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: pkg.description, positions: ["bottom", "top", "right", "left"] })] }), hasUpdate && ((0, jsx_runtime_1.jsxs)("button", { className: "btn btn-sm btn-outline-primary ms-2 text-nowrap", disabled: updating, onClick: handleUpdate, children: [updating ? ((0, jsx_runtime_1.jsx)("span", { className: "spinner-border spinner-border-sm me-1" })) : ((0, jsx_runtime_1.jsx)("i", { className: "bi bi-arrow-up-circle me-1" })), "Update"] })), isOnDev && hasGroupRelease && ((0, jsx_runtime_1.jsxs)("button", { className: "btn btn-sm btn-outline-secondary ms-2 text-nowrap", disabled: updating, onClick: handleUseRelease, children: [updating ? ((0, jsx_runtime_1.jsx)("span", { className: "spinner-border spinner-border-sm me-1" })) : ((0, jsx_runtime_1.jsx)("i", { className: "bi bi-box-arrow-in-right me-1" })), "Use Release"] })), hasDevVersion && ((0, jsx_runtime_1.jsxs)("button", { className: "btn btn-sm btn-outline-danger ms-2 text-nowrap", disabled: updating, onClick: handleUseDev, children: [updating ? ((0, jsx_runtime_1.jsx)("span", { className: "spinner-border spinner-border-sm me-1" })) : ((0, jsx_runtime_1.jsx)("i", { className: "bi bi-tools me-1" })), "Use Dev"] }))] }));
 };
 /** Searchable list of installed packages, plus create/import from the search box. */
+/** Packages screen: search, local folder grants, and the installed package list. */
 const PackageList = () => {
     const [searchTextObs] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)(""));
     const [searchText] = (0, hooks_1.useObservable)(searchTextObs);
@@ -243,7 +245,7 @@ const PackageList = () => {
     if (addingPackage()) {
         return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "container-fluid d-flex justify-content-center mt-5", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-box-seam" }), "\u00A0 Adding Package"] }), (0, jsx_runtime_1.jsx)("div", { className: "container-fluid d-flex justify-content-center mt-2", children: (0, jsx_runtime_1.jsx)("div", { className: "progress", role: "progressbar", "aria-label": "Animated striped example", "aria-valuenow": 100, "aria-valuemin": 0, "aria-valuemax": 100, children: (0, jsx_runtime_1.jsx)("div", { className: "progress-bar progress-bar-striped progress-bar-animated", style: { width: 150 } }) }) })] }));
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-fluid", children: [(0, jsx_runtime_1.jsxs)("div", { className: "input-group mt-3 mb-3", children: [(0, jsx_runtime_1.jsx)(input_1.Input, { value: searchTextObs, className: "form-control", placeholder: "Search, add, or create package", autoFocus: !!(0, globals_1.isDesktop)(), onKeyUp: (evt) => searchSubmit(evt) }), (0, jsx_runtime_1.jsx)("button", { className: "btn btn-outline-secondary dropdown-toggle sm", type: "button", "data-bs-toggle": "dropdown", "aria-expanded": "false", children: (0, jsx_runtime_1.jsx)("i", { className: "bi bi-plus-lg" }) }), (0, jsx_runtime_1.jsxs)("ul", { className: "dropdown-menu dropdown-menu-end", children: [(0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("a", { className: "dropdown-item", href: "#packages/newlocal", children: "New Local Package" }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("a", { className: "dropdown-item disabled", href: "#", children: "Add Local Package" }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("a", { className: "dropdown-item disabled", href: "#", children: "Add Remote Package" }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("hr", { className: "dropdown-divider" }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("a", { className: "dropdown-item", onClick: () => peers_sdk_1.rpcServerCalls.openPath(peers_sdk_1.packagesRootDir), style: { cursor: "pointer" }, children: "Open Packages Directory" }) })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "peers-list-container", children: (0, jsx_runtime_1.jsx)(lazy_list_1.LazyList, { resetTrigger: `${searchText}_${refreshKey()}`, loadMore: loadMore, scrollThreshold: 0.6, renderItems: (packages) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-fluid", children: [(0, jsx_runtime_1.jsxs)("div", { className: "input-group mt-3 mb-3", children: [(0, jsx_runtime_1.jsx)(input_1.Input, { value: searchTextObs, className: "form-control", placeholder: "Search, add, or create package", autoFocus: !!(0, globals_1.isDesktop)(), onKeyUp: (evt) => searchSubmit(evt) }), (0, jsx_runtime_1.jsx)("button", { className: "btn btn-outline-secondary dropdown-toggle sm", type: "button", "data-bs-toggle": "dropdown", "aria-expanded": "false", children: (0, jsx_runtime_1.jsx)("i", { className: "bi bi-plus-lg" }) }), (0, jsx_runtime_1.jsxs)("ul", { className: "dropdown-menu dropdown-menu-end", children: [(0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("a", { className: "dropdown-item", href: "#packages/newlocal", children: "New Local Package" }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("a", { className: "dropdown-item disabled", href: "#", children: "Add Local Package" }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("a", { className: "dropdown-item disabled", href: "#", children: "Add Remote Package" }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("hr", { className: "dropdown-divider" }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("a", { className: "dropdown-item", onClick: () => peers_sdk_1.rpcServerCalls.openPath(peers_sdk_1.packagesRootDir), style: { cursor: "pointer" }, children: "Open Packages Directory" }) })] })] }), (0, jsx_runtime_1.jsx)(local_folder_grants_panel_1.LocalFolderGrantsPanel, {}), (0, jsx_runtime_1.jsx)("div", { className: "peers-list-container", children: (0, jsx_runtime_1.jsx)(lazy_list_1.LazyList, { resetTrigger: `${searchText}_${refreshKey()}`, loadMore: loadMore, scrollThreshold: 0.6, renderItems: (packages) => {
                         return packages.map((pkg) => ((0, jsx_runtime_1.jsx)(PackageRow, { pkg: pkg, onUpdated: () => refreshKey(refreshKey() + 1) }, pkg.packageId)));
                     }, 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peers-app/peers-ui",
-  "version": "0.25.9",
+  "version": "0.25.11",
   "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.25.9",
+    "@peers-app/peers-sdk": "^0.25.11",
     "bootstrap": "^5.3.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
@@ -39,7 +39,7 @@
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.27.1",
     "@biomejs/biome": "2.3.11",
-    "@peers-app/peers-sdk": "0.25.9",
+    "@peers-app/peers-sdk": "0.25.11",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",

package/src/screens/packages/local-folder-grants-panel.tsx

@@ -0,0 +1,290 @@
+import type { ILocalFolderGrantInfo, LocalFolderMode } from "@peers-app/peers-sdk";
+import { useEffect, useState } from "react";
+import { groups } from "../../globals";
+import { useObservable } from "../../hooks";
+import { useHostContract } from "../../hooks/use-host-contract";
+import { localFoldersConsumer } from "./local-folders-ipc";
+
+/** Props for {@link LocalFolderGrantsPanel}. */
+export interface ILocalFolderGrantsPanelProps {
+  /**
+   * When set, the list and new grants are limited to this package.
+   * Omit it for the device-wide operator list.
+   */
+  packageId?: string;
+}
+
+/**
+ * Folder grants on this device, with add and revoke.
+ *
+ * Add opens the host folder picker. A host that does not provide System Local Folders
+ * (the PWA) shows the contract as unavailable.
+ */
+export function LocalFolderGrantsPanel(props: ILocalFolderGrantsPanelProps) {
+  const { consumer, error: transportError } = useHostContract(localFoldersConsumer);
+  const [groupList] = useObservable(groups);
+  const [grants, setGrants] = useState<ILocalFolderGrantInfo[] | undefined>();
+  const [loadError, setLoadError] = useState<Error | undefined>();
+  const [actionError, setActionError] = useState<string | undefined>();
+  const [busy, setBusy] = useState(false);
+  const [groupId, setGroupId] = useState("");
+  const [mode, setMode] = useState<LocalFolderMode>("readwrite");
+  const [refresh, setRefresh] = useState(0);
+
+  useEffect(() => {
+    if (!consumer) {
+      return;
+    }
+    let cancelled = false;
+    consumer.tools.listGrants().then(
+      (result) => {
+        if (!cancelled) {
+          setGrants(result.grants);
+          setLoadError(undefined);
+        }
+      },
+      (cause: unknown) => {
+        if (!cancelled) {
+          setLoadError(cause instanceof Error ? cause : new Error(String(cause)));
+        }
+      },
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [consumer, refresh]);
+
+  const unavailable = isUnavailable(transportError) || isUnavailable(loadError);
+  const visible = (grants ?? []).filter((grant) =>
+    props.packageId ? grant.packageId === props.packageId : true,
+  );
+  const names = new Map(groupList.map((group) => [group.groupId, group.name || group.groupId]));
+
+  async function addFolder(): Promise<void> {
+    if (!consumer || !groupId) {
+      return;
+    }
+    setBusy(true);
+    setActionError(undefined);
+    try {
+      await consumer.tools.requestGrant({
+        groupId,
+        mode,
+        ...(props.packageId ? { packageId: props.packageId } : {}),
+      });
+      setRefresh((value) => value + 1);
+    } catch (cause) {
+      const message = cause instanceof Error ? cause.message : String(cause);
+      if (!/cancelled/i.test(message)) {
+        setActionError(message);
+      }
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function revoke(grantId: string): Promise<void> {
+    if (!consumer) {
+      return;
+    }
+    if (!window.confirm("Revoke this folder grant?")) {
+      return;
+    }
+    setBusy(true);
+    setActionError(undefined);
+    try {
+      await consumer.tools.revokeGrant({ grantId });
+      setRefresh((value) => value + 1);
+    } catch (cause) {
+      setActionError(cause instanceof Error ? cause.message : String(cause));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <section className="mb-4">
+      <h5>{props.packageId ? "Folders" : "Local folders"}</h5>
+      <FolderStatus
+        unavailable={unavailable}
+        transportError={transportError}
+        loadError={loadError}
+        loading={!!consumer && grants === undefined && !loadError}
+      />
+      {consumer && !unavailable && (
+        <>
+          <GrantTable grants={visible} names={names} busy={busy} onRevoke={revoke} />
+          <AddFolderForm
+            fieldScope={props.packageId ?? "device"}
+            groupId={groupId}
+            groups={groupList.map((group) => ({
+              groupId: group.groupId,
+              name: group.name || group.groupId,
+            }))}
+            mode={mode}
+            busy={busy}
+            onGroupId={setGroupId}
+            onMode={setMode}
+            onAdd={addFolder}
+          />
+          {actionError && <div className="alert alert-danger mt-2 mb-0">{actionError}</div>}
+        </>
+      )}
+    </section>
+  );
+}
+
+function FolderStatus(props: {
+  unavailable: boolean;
+  transportError: Error | undefined;
+  loadError: Error | undefined;
+  loading: boolean;
+}) {
+  if (props.unavailable) {
+    return (
+      <div className="alert alert-secondary mb-0">
+        System Local Folders is not available on this host.
+      </div>
+    );
+  }
+  const error = props.loadError ?? props.transportError;
+  if (error) {
+    return <div className="alert alert-danger mb-0">{error.message}</div>;
+  }
+  if (props.loading) {
+    return <div className="text-muted">Loading folder grants…</div>;
+  }
+  return null;
+}
+
+function GrantTable(props: {
+  grants: ILocalFolderGrantInfo[];
+  names: Map<string, string>;
+  busy: boolean;
+  onRevoke: (grantId: string) => void;
+}) {
+  if (props.grants.length === 0) {
+    return <p className="text-muted">No folder grants.</p>;
+  }
+  return (
+    <div className="table-responsive">
+      <table className="table table-sm align-middle">
+        <thead>
+          <tr>
+            <th>Path</th>
+            <th>Group</th>
+            <th>Package</th>
+            <th>Mode</th>
+            <th>Created</th>
+            <th />
+          </tr>
+        </thead>
+        <tbody>
+          {props.grants.map((grant) => (
+            <GrantRow
+              key={grant.grantId}
+              grant={grant}
+              groupName={props.names.get(grant.groupId) ?? grant.groupId}
+              busy={props.busy}
+              onRevoke={props.onRevoke}
+            />
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+function GrantRow(props: {
+  grant: ILocalFolderGrantInfo;
+  groupName: string;
+  busy: boolean;
+  onRevoke: (grantId: string) => void;
+}) {
+  const { grant } = props;
+  return (
+    <tr>
+      <td className="text-break">{grant.absolutePath}</td>
+      <td>{props.groupName}</td>
+      <td>{grant.packageId ?? "operator"}</td>
+      <td>{grant.mode}</td>
+      <td>{new Date(grant.createdAt).toLocaleString()}</td>
+      <td>
+        <button
+          type="button"
+          className="btn btn-sm btn-outline-danger"
+          disabled={props.busy}
+          onClick={() => props.onRevoke(grant.grantId)}
+        >
+          Revoke
+        </button>
+      </td>
+    </tr>
+  );
+}
+
+function AddFolderForm(props: {
+  fieldScope: string;
+  groupId: string;
+  groups: { groupId: string; name: string }[];
+  mode: LocalFolderMode;
+  busy: boolean;
+  onGroupId: (groupId: string) => void;
+  onMode: (mode: LocalFolderMode) => void;
+  onAdd: () => void;
+}) {
+  return (
+    <form
+      className="row g-2 align-items-end"
+      onSubmit={(event) => {
+        event.preventDefault();
+        props.onAdd();
+      }}
+    >
+      <div className="col-md-5">
+        <label className="form-label" htmlFor={`local-folder-group-${props.fieldScope}`}>
+          Group
+        </label>
+        <select
+          id={`local-folder-group-${props.fieldScope}`}
+          className="form-select"
+          value={props.groupId}
+          onChange={(event) => props.onGroupId(event.target.value)}
+        >
+          <option value="">Select a group</option>
+          {props.groups.map((group) => (
+            <option key={group.groupId} value={group.groupId}>
+              {group.name}
+            </option>
+          ))}
+        </select>
+      </div>
+      <div className="col-md-3">
+        <label className="form-label" htmlFor={`local-folder-mode-${props.fieldScope}`}>
+          Mode
+        </label>
+        <select
+          id={`local-folder-mode-${props.fieldScope}`}
+          className="form-select"
+          value={props.mode}
+          onChange={(event) => props.onMode(event.target.value as LocalFolderMode)}
+        >
+          <option value="readwrite">readwrite</option>
+          <option value="read">read</option>
+        </select>
+      </div>
+      <div className="col-md-4">
+        <button type="submit" className="btn btn-primary" disabled={props.busy || !props.groupId}>
+          {props.busy ? "Working…" : "Add folder"}
+        </button>
+      </div>
+    </form>
+  );
+}
+
+function isUnavailable(error: Error | undefined): boolean {
+  if (!error) {
+    return false;
+  }
+  return /No contract provider registered|not available locally/i.test(error.message);
+}

package/src/screens/packages/local-folders-ipc.ts

@@ -0,0 +1,28 @@
+import {
+  getLocalFoldersContractDefinition,
+  hostContractConsumer,
+  type IContractConsumerBase,
+  type IHostContractConsumer,
+  type ILocalFolderGrantInfo,
+  type ILocalFolderRequestGrantInput,
+} from "@peers-app/peers-sdk";
+
+/** Tools the Packages screens use on System Local Folders. */
+export interface ILocalFoldersUiConsumer extends IContractConsumerBase {
+  tools: {
+    /** Create a grant. Omitting `absolutePath` opens the desktop folder picker. */
+    requestGrant(input: ILocalFolderRequestGrantInput): Promise<ILocalFolderGrantInfo>;
+    /** Active grants on this device. */
+    listGrants(): Promise<{ grants: ILocalFolderGrantInfo[] }>;
+    /** Revoke one grant. `revoked` is false when it was already gone. */
+    revokeGrant(input: { grantId: string }): Promise<{ revoked: boolean }>;
+  };
+}
+
+/**
+ * Shared System Local Folders consumer for the Packages screens.
+ *
+ * The PWA host does not register this contract. Callers treat a missing provider as unavailable.
+ */
+export const localFoldersConsumer: IHostContractConsumer<ILocalFoldersUiConsumer> =
+  hostContractConsumer<ILocalFoldersUiConsumer>(getLocalFoldersContractDefinition());

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

@@ -5,6 +5,7 @@ import { type ISaveButtonProps, SaveButton } from "../../components/save-button"
 import { ScreenTabBody, Tabs } from "../../components/tabs";
 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 { PackageVersionsList } from "./package-versions";
 
@@ -127,6 +128,14 @@ export const PackageDetails = (props: IProps) => {
               <ScreenTabBody>TODO - show all of the dependencies of the package</ScreenTabBody>
             ),
           },
+          {
+            name: "Folders",
+            content: (
+              <ScreenTabBody>
+                <LocalFolderGrantsPanel packageId={pkg.packageId} />
+              </ScreenTabBody>
+            ),
+          },
         ]}
       />
     </div>

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

@@ -21,6 +21,7 @@ import { Tooltip } from "../../components/tooltip";
 import { isDesktop, mainContentPath } from "../../globals";
 import { useObservable, useObservableState, usePromise } from "../../hooks";
 import { registerInternalPeersUI } from "../../ui-router/ui-loader";
+import { LocalFolderGrantsPanel } from "./local-folder-grants-panel";
 import {
   activatePackageVersion,
   checkVersionStatus,
@@ -236,6 +237,7 @@ const PackageRow = ({ pkg, onUpdated }: { pkg: IPackage; onUpdated: () => void }
 };
 
 /** Searchable list of installed packages, plus create/import from the search box. */
+/** Packages screen: search, local folder grants, and the installed package list. */
 export const PackageList = () => {
   const [searchTextObs] = useState(() => observable(""));
   const [searchText] = useObservable(searchTextObs);
@@ -437,6 +439,8 @@ export const PackageList = () => {
         </ul>
       </div>
 
+      <LocalFolderGrantsPanel />
+
       <div className="peers-list-container">
         <LazyList
           resetTrigger={`${searchText}_${refreshKey()}`}