@peers-app/peers-ui 0.27.3 → 0.27.5

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

@@ -1,519 +0,0 @@
-import {
-  getEffectivePackagePrefs,
-  type ICursorIterable,
-  type IPackage,
-  type IPackageVersion,
-  isid,
-  isPackageRepositoryUrl,
-  observable,
-  Packages,
-  PackageVersions,
-  packagePrefsVar,
-  packagesRootDir,
-} from "@peers-app/peers-sdk";
-import type React from "react";
-import { useCallback, useEffect, useState } from "react";
-import { Input } from "../../components/input";
-import { LazyList } from "../../components/lazy-list";
-import { LoadingIndicator } from "../../components/loading-indicator";
-import { Tooltip } from "../../components/tooltip";
-import { isDesktop, mainContentPath } from "../../globals";
-import { useObservable, useObservableState, usePromise } from "../../hooks";
-import { openOnHost } from "../../host-shell/host-shell-consumer";
-import { registerInternalPeersUI } from "../../ui-router/ui-loader";
-import { LocalFolderGrantsPanel } from "./local-folder-grants-panel";
-import {
-  activatePackageVersion,
-  checkVersionStatus,
-  type IVersionStatus,
-  type UpdateLevel,
-  updateLevelRank,
-} from "./package-helpers";
-import { PackageRuntimeBadge } from "./package-runtime-status";
-import { packagesTools } from "./packages-ipc";
-
-interface IPackageRowStatus extends IVersionStatus {
-  /** When on a dev version, the group's non-dev active PV (if any). */
-  groupReleasePv: IPackageVersion | null;
-  /** When on a non-dev version, the latest dev PV (if any). */
-  latestDevPv: IPackageVersion | null;
-}
-
-function tagBadgeClass(tag: string): string {
-  if (tag === "dev") return "text-bg-danger";
-  if (tag.startsWith("beta")) return "text-bg-warning";
-  return "text-bg-success";
-}
-
-function updateBadgeClass(level: UpdateLevel): string {
-  if (level === "major") return "text-bg-danger";
-  if (level === "minor") return "text-bg-warning";
-  return "text-bg-info";
-}
-
-const PackageRow = ({ pkg, onUpdated }: { pkg: IPackage; onUpdated: () => void }) => {
-  const [updating, setUpdating] = useState(false);
-  const [devicePrefs] = useObservable(packagePrefsVar(pkg.packageId));
-  const effective = getEffectivePackagePrefs(pkg, devicePrefs);
-  // A dev reload rewrites the selected version row in place (same id, new version), so the
-  // ids below do not change; recompute when this package's version rows change.
-  const [versionsRevision, setVersionsRevision] = useState(0);
-  useEffect(() => {
-    const sub = PackageVersions().dataChanged.subscribe((evt) => {
-      if (evt.dataObject?.packageId === pkg.packageId) setVersionsRevision((value) => value + 1);
-    });
-    return () => {
-      sub.unsubscribe();
-    };
-  }, [pkg.packageId]);
-
-  const status = usePromise(
-    async (): Promise<IPackageRowStatus | null> => {
-      if (!effective.activePackageVersionId) return null;
-      const s = await checkVersionStatus(
-        pkg.packageId,
-        effective.activePackageVersionId,
-        effective.followTags,
-      );
-      if (!s) return null;
-
-      let groupReleasePv: IPackageVersion | null = null;
-      if (
-        s.activePv.versionTag === "dev" &&
-        pkg.activePackageVersionId &&
-        pkg.activePackageVersionId !== effective.activePackageVersionId
-      ) {
-        try {
-          const gpv = await PackageVersions().get(pkg.activePackageVersionId);
-          if (gpv && gpv.versionTag !== "dev") groupReleasePv = gpv;
-        } catch {}
-      }
-      let latestDevPv: IPackageVersion | null = null;
-      if (s.activePv.versionTag !== "dev") {
-        const allVersions = await PackageVersions().list({ packageId: pkg.packageId });
-        for (const v of allVersions) {
-          if (v.versionTag !== "dev") continue;
-          if (!latestDevPv || (v.createdAt || "") > (latestDevPv.createdAt || "")) {
-            latestDevPv = v;
-          }
-        }
-      }
-
-      return { ...s, groupReleasePv, latestDevPv };
-    },
-    undefined,
-    [
-      effective.activePackageVersionId,
-      pkg.packageId,
-      effective.followTags,
-      pkg.activePackageVersionId,
-      versionsRevision,
-    ],
-  );
-
-  const isOnDev = status?.activePv.versionTag === "dev";
-  const hasGroupRelease = !!status?.groupReleasePv;
-  const hasUpdate = !isOnDev && !!status?.newerLevel && !!status?.newestPv;
-  const hasDevVersion = !isOnDev && !!status?.latestDevPv;
-  const isDeviceOverridden =
-    !!effective.activePackageVersionId &&
-    !!pkg.activePackageVersionId &&
-    effective.activePackageVersionId !== pkg.activePackageVersionId;
-
-  async function handleUpdate() {
-    if (!status?.newestPv) return;
-    setUpdating(true);
-    try {
-      await activatePackageVersion(pkg.packageId, status.newestPv);
-      onUpdated();
-    } catch (err: unknown) {
-      alert(`Failed to update: ${err instanceof Error ? err.message : String(err)}`);
-    } finally {
-      setUpdating(false);
-    }
-  }
-
-  async function handleUseRelease() {
-    setUpdating(true);
-    try {
-      await (await packagesTools()).activatePackageVersion({
-        packageId: pkg.packageId,
-        scope: "device",
-      });
-      onUpdated();
-    } catch (err: unknown) {
-      alert(`Failed to switch: ${err instanceof Error ? err.message : String(err)}`);
-    } finally {
-      setUpdating(false);
-    }
-  }
-
-  async function handleUseDev() {
-    if (!status?.latestDevPv) return;
-    setUpdating(true);
-    try {
-      await (await packagesTools()).activatePackageVersion({
-        packageId: pkg.packageId,
-        packageVersionId: status.latestDevPv.packageVersionId,
-        scope: "device",
-      });
-      onUpdated();
-    } catch (err: unknown) {
-      alert(`Failed to switch: ${err instanceof Error ? err.message : String(err)}`);
-    } finally {
-      setUpdating(false);
-    }
-  }
-
-  return (
-    <div className="container-fluid pb-4 d-flex align-items-center">
-      <div className="flex-grow-1" style={{ minWidth: 0 }}>
-        <i className="bi bi-box-fill"></i>&nbsp;&nbsp;
-        <a href={`#packages/${pkg.packageId}`}>{pkg.name}</a>
-        <span className="ms-2">
-          <PackageRuntimeBadge packageId={pkg.packageId} />
-        </span>
-        {isDeviceOverridden && (
-          <span
-            className="text-warning ms-1"
-            title="This device is using a different version than the group"
-          >
-            <i className="bi bi-pc-display" />
-          </span>
-        )}
-        {status && (
-          <span className="ms-2">
-            <small className="text-muted">v{status.activePv.version}</small>
-            {status.activePv.versionTag && (
-              <span
-                className={`badge ms-1 ${tagBadgeClass(status.activePv.versionTag)}`}
-                style={{ fontSize: "0.65em" }}
-              >
-                {status.activePv.versionTag}
-              </span>
-            )}
-            {hasUpdate ? (
-              <span
-                className={`badge ms-1 ${updateBadgeClass(status.newerLevel)}`}
-                style={{ fontSize: "0.65em" }}
-              >
-                v{status.newestPv?.version} available
-              </span>
-            ) : isOnDev && hasGroupRelease ? (
-              <span className="badge ms-1 text-bg-secondary" style={{ fontSize: "0.65em" }}>
-                release: v{status.groupReleasePv?.version}
-              </span>
-            ) : (
-              <span className="badge ms-1 text-bg-success" style={{ fontSize: "0.65em" }}>
-                up to date
-              </span>
-            )}
-          </span>
-        )}
-        <Tooltip markdownContent={pkg.description} positions={["bottom", "top", "right", "left"]} />
-      </div>
-      {hasUpdate && (
-        <button
-          className="btn btn-sm btn-outline-primary ms-2 text-nowrap"
-          disabled={updating}
-          onClick={handleUpdate}
-        >
-          {updating ? (
-            <span className="spinner-border spinner-border-sm me-1" />
-          ) : (
-            <i className="bi bi-arrow-up-circle me-1" />
-          )}
-          Update
-        </button>
-      )}
-      {isOnDev && hasGroupRelease && (
-        <button
-          className="btn btn-sm btn-outline-secondary ms-2 text-nowrap"
-          disabled={updating}
-          onClick={handleUseRelease}
-        >
-          {updating ? (
-            <span className="spinner-border spinner-border-sm me-1" />
-          ) : (
-            <i className="bi bi-box-arrow-in-right me-1" />
-          )}
-          Use Release
-        </button>
-      )}
-      {hasDevVersion && (
-        <button
-          className="btn btn-sm btn-outline-danger ms-2 text-nowrap"
-          disabled={updating}
-          onClick={handleUseDev}
-        >
-          {updating ? (
-            <span className="spinner-border spinner-border-sm me-1" />
-          ) : (
-            <i className="bi bi-tools me-1" />
-          )}
-          Use Dev
-        </button>
-      )}
-    </div>
-  );
-};
-
-/**
- * Packages screen: search, create/import/install from the search box, local folder grants,
- * and the installed package list.
- */
-export const PackageList = () => {
-  const [searchTextObs] = useState(() => observable(""));
-  const [searchText] = useObservable(searchTextObs);
-  const addingPackage = useObservableState(false);
-  const refreshKey = useObservableState(0);
-
-  const [cursorObs] = useState(() => observable<ICursorIterable<IPackage> | undefined>());
-
-  const newCursor = useCallback(async () => {
-    const cursor = await Packages().cursor(
-      {
-        $or: [
-          { name: { $matchWords: searchText } },
-          { description: { $matchWords: searchText } },
-          { remoteRepo: { $matchWords: searchText } },
-        ],
-      },
-      { sortBy: ["-packageId"] },
-    );
-    cursorObs(cursor);
-    return cursor;
-  }, [searchText, cursorObs]);
-
-  useEffect(() => {
-    void newCursor();
-  }, [newCursor]);
-
-  async function loadMore(existing: IPackage[]): Promise<IPackage[]> {
-    const moreMatches: IPackage[] = [];
-    const cursor = cursorObs() || (await newCursor());
-    for await (const nextRecord of cursor) {
-      if (existing.find((e) => e.packageId === nextRecord.packageId)) continue;
-      moreMatches.push(nextRecord);
-      if (searchText.length && moreMatches.length > 5) break;
-      if (moreMatches.length >= 50) break;
-    }
-    if (moreMatches.length === 0) {
-      cursorObs(undefined);
-    }
-
-    if (!searchText.length && existing.length === 0 && moreMatches.length > 0) {
-      const DEV_WITH_RELEASE_RANK = 0.5;
-      const rankMap = new Map<string, number>();
-      await Promise.all(
-        moreMatches.map(async (pkg) => {
-          try {
-            const pVar = packagePrefsVar(pkg.packageId);
-            await pVar.loadingPromise;
-            const eff = getEffectivePackagePrefs(pkg, pVar());
-            if (!eff.activePackageVersionId) return;
-            const s = await checkVersionStatus(
-              pkg.packageId,
-              eff.activePackageVersionId,
-              eff.followTags,
-            );
-            if (!s) return;
-            if (s.newerLevel) {
-              rankMap.set(pkg.packageId, updateLevelRank[s.newerLevel]);
-            } else if (s.activePv.versionTag === "dev" && pkg.activePackageVersionId) {
-              try {
-                const gpv = await PackageVersions().get(pkg.activePackageVersionId);
-                if (gpv && gpv.versionTag !== "dev") {
-                  rankMap.set(pkg.packageId, DEV_WITH_RELEASE_RANK);
-                }
-              } catch {}
-            }
-          } catch {}
-        }),
-      );
-      moreMatches.sort((a, b) => {
-        const aRank = rankMap.get(a.packageId) ?? 0;
-        const bRank = rankMap.get(b.packageId) ?? 0;
-        if (bRank !== aRank) return bRank - aRank;
-        return (a.name || "").localeCompare(b.name || "");
-      });
-    }
-
-    return moreMatches;
-  }
-
-  async function searchSubmit(evt: React.KeyboardEvent<HTMLInputElement>) {
-    if (evt.key !== "Enter") return;
-    const name = searchText.trim();
-    if (!name) return;
-
-    if (isPackageRepositoryUrl(name)) {
-      if (!confirm(`Add remote package: ${name}`)) return;
-      try {
-        addingPackage(true);
-        const { packageId } = await (await packagesTools()).clonePackage({ url: name });
-        const pkg = await Packages().get(packageId);
-        if (pkg) {
-          mainContentPath(`packages/${packageId}`);
-        }
-      } catch (err: unknown) {
-        let errMessage = err instanceof Error ? err.message : String(err);
-        errMessage = errMessage.replace(/\s+/g, " ");
-        confirm(`Error adding remote package: ${errMessage}`);
-      } finally {
-        addingPackage(false);
-      }
-      return;
-    }
-
-    // A package id re-enables that package, or copies it here from another of your contexts.
-    if (isid(name)) {
-      if (!confirm(`Install package ${name} into this context`)) return;
-      try {
-        addingPackage(true);
-        const { packageId } = await (await packagesTools()).installPackage({ packageId: name });
-        mainContentPath(`packages/${packageId}`);
-      } catch (err: unknown) {
-        confirm(`Error installing package: ${err instanceof Error ? err.message : String(err)}`);
-      } finally {
-        addingPackage(false);
-      }
-      return;
-    }
-
-    if (!confirm(`Create or import local package: ${searchText}`)) return;
-
-    try {
-      addingPackage(true);
-      const { packageId, warning } = await (await packagesTools()).createPackage({ name });
-      const pkg = await Packages().get(packageId);
-      if (pkg) {
-        if (warning) {
-          confirm(warning);
-        }
-        mainContentPath(`packages/${packageId}`);
-      }
-    } catch (err: unknown) {
-      confirm(`Error creating package: ${err instanceof Error ? err.message : String(err)}`);
-    } finally {
-      addingPackage(false);
-    }
-  }
-
-  if (addingPackage()) {
-    return (
-      <div>
-        <div className="container-fluid d-flex justify-content-center mt-5">
-          <i className="bi bi-box-seam"></i>&nbsp; Adding Package
-        </div>
-        <div className="container-fluid d-flex justify-content-center mt-2">
-          <div
-            className="progress"
-            role="progressbar"
-            aria-label="Animated striped example"
-            aria-valuenow={100}
-            aria-valuemin={0}
-            aria-valuemax={100}
-          >
-            <div
-              className="progress-bar progress-bar-striped progress-bar-animated"
-              style={{ width: 150 }}
-            ></div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="container-fluid">
-      <div className="input-group mt-3 mb-3">
-        <Input
-          value={searchTextObs}
-          className="form-control"
-          placeholder="Search, add, or create package"
-          autoFocus={!!isDesktop()}
-          onKeyUp={(evt) => searchSubmit(evt)}
-        />
-        <button
-          className="btn btn-outline-secondary dropdown-toggle sm"
-          type="button"
-          data-bs-toggle="dropdown"
-          aria-expanded="false"
-        >
-          <i className="bi bi-plus-lg"></i>
-        </button>
-        <ul className="dropdown-menu dropdown-menu-end">
-          <li>
-            <a className="dropdown-item" href="#packages/newlocal">
-              New Local Package
-            </a>
-          </li>
-          <li>
-            <a className="dropdown-item disabled" href="#">
-              Add Local Package
-            </a>
-          </li>
-          <li>
-            <a className="dropdown-item disabled" href="#">
-              Add Remote Package
-            </a>
-          </li>
-          <li>
-            <hr className="dropdown-divider" />
-          </li>
-          <li>
-            <a
-              className="dropdown-item"
-              onClick={() => void openOnHost(packagesRootDir)}
-              style={{ cursor: "pointer" }}
-            >
-              Open Packages Directory
-            </a>
-          </li>
-        </ul>
-      </div>
-
-      <LocalFolderGrantsPanel />
-
-      <div className="peers-list-container">
-        <LazyList
-          resetTrigger={`${searchText}_${refreshKey()}`}
-          loadMore={loadMore}
-          scrollThreshold={0.6}
-          renderItems={(packages) => {
-            return packages.map((pkg) => (
-              <PackageRow
-                key={pkg.packageId}
-                pkg={pkg}
-                onUpdated={() => refreshKey(refreshKey() + 1)}
-              />
-            ));
-          }}
-          loadingIndicator={
-            <div className="d-flex justify-content-center" style={{ height: 200 }}>
-              <LoadingIndicator />
-            </div>
-          }
-          endOfList={
-            <div className="d-flex justify-content-center" style={{ height: 200 }}>
-              {/* <span className="h3">End of List</span> */}
-            </div>
-          }
-        />
-      </div>
-    </div>
-  );
-};
-
-registerInternalPeersUI({
-  peersUIId: "00m5fre6r5m2p2wd1m4x6nx0b",
-  component: PackageList,
-  routes: [
-    {
-      isMatch: (_props, context) => context.path === "packages",
-      uiCategory: "screen",
-      priority: 1,
-    },
-  ],
-});

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

@@ -1,82 +0,0 @@
-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/screens/packages/package-new-local.tsx

@@ -1,100 +0,0 @@
-import { camelCaseToHyphens, Packages, packagesRootDir } from "@peers-app/peers-sdk";
-import React, { useState } from "react";
-import { mainContentPath } from "../../globals";
-import { openInEditorOnHost } from "../../host-shell/host-shell-consumer";
-import { packagesTools } from "./packages-ipc";
-
-/** Form for scaffolding a new local package from the template into `~/peers/packages`. */
-export const PackageNewLocal = () => {
-  const defaultName = "New Package";
-  const [packageName, setPackageName] = useState("");
-
-  const [packageLocation, setPackageLocation] = useState("");
-
-  let packageFolderName = packageName || defaultName;
-  packageFolderName = packageFolderName.replace(/[^a-zA-Z0-9]/g, " ");
-  packageFolderName = packageFolderName.replace(/\s+/g, " ").trim();
-  packageFolderName = camelCaseToHyphens(packageFolderName);
-
-  const packageLocationDefault = `${packagesRootDir}/${packageFolderName}`;
-
-  const hiddenFileInput = React.useRef<HTMLInputElement>(null);
-
-  const handleFolderSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
-    // @ts-expect-error
-    const path = e.target.files?.[0]?.path;
-    const folderPath = path;
-    if (folderPath) {
-      setPackageLocation(folderPath);
-    }
-  };
-
-  const createLocalPackage = async () => {
-    try {
-      const { packageId, warning } = await (await packagesTools()).createPackage({
-        name: packageName,
-        location: packageLocation || packageLocationDefault,
-      });
-      const pkg = await Packages().get(packageId);
-      if (pkg) {
-        if (warning) {
-          confirm(warning);
-        }
-        mainContentPath(`packages/${packageId}`);
-        void openInEditorOnHost(packageLocation || packageLocationDefault);
-      }
-    } catch (err) {
-      const message = err instanceof Error ? err.message : String(err);
-      confirm(`Error creating package:\n\n${message}`);
-    }
-  };
-
-  return (
-    <div className="container mt-2">
-      <h4 className="text-center">New Local Package</h4>
-
-      <div className="input-group mt-3 mb-3">
-        <input
-          type="text"
-          className="form-control"
-          placeholder="Package Name"
-          value={packageName}
-          onChange={(e) => setPackageName(e.target.value)}
-        />
-      </div>
-
-      <input
-        ref={hiddenFileInput}
-        type="file"
-        className="visually-hidden"
-        onChange={handleFolderSelect}
-        // @ts-expect-error
-        directory=""
-        webkitdirectory=""
-      />
-      <div className="input-group mt-3 mb-3">
-        <input
-          type="text"
-          className="form-control"
-          placeholder={packageLocationDefault}
-          value={packageLocation}
-          onChange={(e) => setPackageLocation(e.target.value)}
-          disabled
-        />
-        {/* <button className="btn btn-outline-secondary" type="button" 
-          onClick={() => hiddenFileInput.current?.click()}>
-          <i className="bi bi-folder-fill"></i>
-        </button> */}
-      </div>
-
-      <button
-        className="btn btn-primary float-end"
-        type="button"
-        onClick={() => createLocalPackage()}
-        disabled={!packageName}
-      >
-        Create Package
-      </button>
-    </div>
-  );
-};