@peers-app/peers-ui 0.25.8 → 0.25.10

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()}`}

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

@@ -17,6 +17,7 @@ import { useObservable, usePromise } from "../../hooks";
 import { LayoutPicker } from "../../root-layout/layout-picker";
 import { identityTools } from "../device-pairing/identity-ipc";
 import { IDENTITY_ACCOUNT_PATH, IDENTITY_PAIR_PATH } from "../identity/identity-routes";
+import { getNetworkControlConsumer } from "../network-viewer/network-viewer-ipc";
 import { ColorModeDropdown } from "./color-mode-dropdown";
 
 /** Electron file picker attaches a filesystem path on `File`. */
@@ -262,10 +263,15 @@ const ResetDeviceSyncInfos: React.FC = () => {
         className="btn btn-secondary btn-sm ms-2"
         onClick={async () => {
           try {
-            await rpcServerCalls.resetAllDeviceSyncInfo();
+            const result = await (await getNetworkControlConsumer()).tools.resetDeviceSyncInfo();
+            if (!result.success) {
+              alert(result.message);
+              return;
+            }
             alert("All device sync info has been reset.  Syncing in progress...");
           } catch (err) {
             console.error("Error while resetting all device sync info", err);
+            alert(`Failed to reset device sync info: ${(err as Error).message || String(err)}`);
           }
         }}
       >
@@ -362,9 +368,9 @@ const ResetChangeTracking: React.FC = () => {
     <div className="mt-4 pt-3 border-top">
       <h6 className="mb-2">Change tracking</h6>
       <small className="text-muted d-block mb-2">
-        Clears all change history for the current group and rebuilds it from your current database
-        rows. Device sync cursors are cleared; a full resync with peers may follow. Use when
-        debugging sync issues.
+        Clears change history for every personal and group context on this device and rebuilds it
+        from current rows. Device sync cursors are cleared; a full resync with peers may follow. Use
+        when debugging sync issues.
       </small>
       <button
         className="btn btn-warning btn-sm"
@@ -376,7 +382,11 @@ const ResetChangeTracking: React.FC = () => {
           if (!confirmed) return;
           setBusy(true);
           try {
-            await rpcServerCalls.resetChangeTracking();
+            const result = await (await getNetworkControlConsumer()).tools.resetChangeTracking();
+            if (!result.success) {
+              alert(result.message);
+              return;
+            }
             await rpcServerCalls.flushDatabases();
             alert("Change tracking reset successfully.");
           } catch (err) {

package/src/tabs-layout/network-status-indicator.test.tsx

@@ -3,6 +3,7 @@ import { TrustLevel } from "@peers-app/peers-sdk";
 import { act, fireEvent, render, waitFor } from "@testing-library/react";
 import moment from "moment";
 import { IDENTITY_ACCEPT_PATH, IDENTITY_ACCOUNT_PATH } from "../screens/identity/identity-routes";
+import { networkViewerSection } from "../screens/network-viewer/network-viewer-section";
 import {
   connectionIdentityLabel,
   formatRelativeSyncTime,
@@ -42,6 +43,7 @@ function status(overrides: Partial<INetworkStatusSummary>): INetworkStatusSummar
     errorCount: 0,
     disconnectedContextCount: 0,
     connectedContextCount: 0,
+    stuckRecoveryCount: 0,
     errors: [],
     ...overrides,
   };
@@ -153,6 +155,38 @@ describe("getNetworkStatusPresentation", () => {
     );
   });
 
+  it("turns yellow for stuck recovery without hiding sync activity or errors", () => {
+    expect(
+      getNetworkStatusPresentation({
+        availability: "ready",
+        status: status({ state: "synced", stuckRecoveryCount: 2 }),
+      }),
+    ).toMatchObject({
+      colorClass: "text-warning",
+      iconClass: "bi-check-circle-fill",
+      label: expect.stringContaining("2 records need attention"),
+    });
+    expect(
+      getNetworkStatusPresentation(
+        {
+          availability: "ready",
+          status: status({ state: "syncing", syncingContextCount: 1, stuckRecoveryCount: 1 }),
+        },
+        { syncingLongerThanGreenMs: true },
+      ),
+    ).toMatchObject({
+      colorClass: "text-warning",
+      mark: "indeterminate",
+      label: expect.stringContaining("1 record needs attention"),
+    });
+    expect(
+      getNetworkStatusPresentation({
+        availability: "ready",
+        status: status({ state: "error", errorCount: 1, stuckRecoveryCount: 4 }),
+      }).colorClass,
+    ).toBe("text-danger");
+  });
+
   it("holds a green pulse while waiting for stable synced", () => {
     expect(
       getNetworkStatusPresentation(
@@ -230,11 +264,31 @@ describe("getNetworkStatusPresentation", () => {
       }).connectedGroupsOverlay,
     ).toBeUndefined();
   });
+
+  it("turns an offline indicator yellow when recovery is stuck and keeps the offline icon", () => {
+    expect(
+      getNetworkStatusPresentation({
+        availability: "ready",
+        status: status({ state: "offline", connectionCount: 0, stuckRecoveryCount: 2 }),
+      }),
+    ).toMatchObject({
+      iconClass: "bi-cloud-slash-fill",
+      colorClass: "text-warning",
+      label: expect.stringContaining("2 records need attention"),
+    });
+    expect(
+      getNetworkStatusPresentation({
+        availability: "ready",
+        status: status({ state: "error", errorCount: 1, stuckRecoveryCount: 2 }),
+      }).colorClass,
+    ).toBe("text-danger");
+  });
 });
 
 describe("NetworkStatusIndicator", () => {
   beforeEach(() => {
     mockViewState = { availability: "loading" };
+    networkViewerSection("main");
     getConnections.mockReset();
     getConnections.mockResolvedValue({ connections: [] });
     jest.clearAllMocks();
@@ -546,5 +600,82 @@ describe("NetworkStatusIndicator", () => {
     fireEvent.click(view.getByRole("button", { name: /Network error/ }));
     fireEvent.click(view.getByRole("button", { name: "Open Network Viewer" }));
     expect(goToTabPath).toHaveBeenCalledWith("network-viewer");
+    expect(networkViewerSection()).toBe("main");
+  });
+
+  it("hides zero problem counts and Sync recovery when nothing needs attention", async () => {
+    mockViewState = {
+      availability: "ready",
+      status: status({
+        state: "synced",
+        connectionCount: 4,
+        connectedContextCount: 5,
+        lastSuccessfulSyncAt: Date.parse("2026-09-27T16:00:00.000Z"),
+      }),
+    };
+    const view = render(<NetworkStatusIndicator />);
+    await openNetworkDetails(view, /Network synced/);
+
+    const labels = [...view.getByRole("dialog").querySelectorAll("dt")].map((el) => el.textContent);
+    expect(labels).toEqual(["Connections", "Groups connected", "Last sync"]);
+    expect(view.queryByRole("button", { name: "Sync recovery" })).toBeNull();
+  });
+
+  it("orders non-zero status rows and offers Sync recovery when records are stuck", async () => {
+    mockViewState = {
+      availability: "ready",
+      status: status({
+        state: "error",
+        connectionCount: 4,
+        connectedContextCount: 5,
+        disconnectedContextCount: 1,
+        syncingContextCount: 2,
+        errorCount: 3,
+        stuckRecoveryCount: 1,
+        lastSuccessfulSyncAt: Date.parse("2026-09-27T16:00:00.000Z"),
+        errors: [{ dataContextId: "context", message: "sync failed", occurredAt: 1 }],
+      }),
+    };
+    const view = render(<NetworkStatusIndicator />);
+    await openNetworkDetails(view, /Network error/);
+
+    const labels = [...view.getByRole("dialog").querySelectorAll("dt")].map((el) => el.textContent);
+    expect(labels).toEqual([
+      "Connections",
+      "Groups connected",
+      "Syncing contexts",
+      "Groups offline",
+      "Sync errors",
+      "Last sync",
+    ]);
+    const groupsOffline = view.getByText("Groups offline");
+    expect(groupsOffline.className).toContain("text-warning");
+    expect(groupsOffline.nextElementSibling?.textContent).toBe("1");
+    expect(groupsOffline.nextElementSibling?.className).toContain("text-warning");
+    expect(view.getByRole("button", { name: "Sync recovery" }).className).toContain("btn-warning");
+  });
+
+  it("opens Sync recovery inside the Network tab", async () => {
+    networkViewerSection("main");
+    mockViewState = {
+      availability: "ready",
+      status: status({ state: "synced", stuckRecoveryCount: 2 }),
+    };
+    const view = render(<NetworkStatusIndicator />);
+    await openNetworkDetails(view, /Network synced/);
+    fireEvent.click(view.getByRole("button", { name: "Sync recovery" }));
+
+    expect(networkViewerSection()).toBe("sync-recovery");
+    expect(goToTabPath).toHaveBeenCalledWith("network-viewer");
+    expect(goToTabPath).not.toHaveBeenCalledWith("sync-recovery");
+    expect(view.queryByRole("dialog", { name: "Network status details" })).toBeNull();
   });
 });
+
+async function openNetworkDetails(view: ReturnType<typeof render>, name: RegExp): Promise<void> {
+  fireEvent.click(view.getByRole("button", { name }));
+  await waitFor(() => expect(getConnections).toHaveBeenCalled());
+  await act(async () => {
+    await Promise.resolve();
+  });
+}