@peers-app/peers-ui 0.27.3 → 0.27.4

package/src/screens/packages/package-runtime-status.test.tsx

@@ -1,58 +0,0 @@
-import type { IPackageRuntimeState } from "@peers-app/peers-sdk";
-import { render } from "@testing-library/react";
-import { PackageRuntimeBadge, PackageRuntimeStatus } from "./package-runtime-status";
-
-let mockStates: Record<string, IPackageRuntimeState> | undefined;
-jest.mock("./packages-ipc", () => ({
-  ...jest.requireActual("./packages-ipc"),
-  usePackageRuntimeStates: () => mockStates,
-}));
-
-const packageId = "pkg";
-
-describe("PackageRuntimeStatus", () => {
-  it("renders nothing until the host reports state", () => {
-    mockStates = undefined;
-    expect(render(<PackageRuntimeStatus packageId={packageId} />).container).toBeEmptyDOMElement();
-  });
-
-  it("shows the running version and a failed replacement's error", () => {
-    mockStates = {
-      [packageId]: {
-        packageId,
-        status: "failed",
-        running: { kind: "isolated", version: "1.0.0", versionTag: "dev" },
-        lastError: { phase: "load", message: "manifest has unknown key", version: "1.0.1", at: 1 },
-        updatedAt: 1,
-      },
-    };
-    const view = render(<PackageRuntimeStatus packageId={packageId} />);
-    expect(view.container).toHaveTextContent("Update failed");
-    expect(view.container).toHaveTextContent("Running v1.0.0 (dev) on this device");
-    expect(view.getByRole("alert")).toHaveTextContent(
-      "Loading v1.0.1 failed: manifest has unknown key",
-    );
-  });
-
-  it("shows a worker failure and a reason when nothing is running", () => {
-    mockStates = {
-      [packageId]: {
-        packageId,
-        status: "unavailable",
-        reason: "The selected version's bundle file is not on this device yet",
-        worker: { workerRunning: false, lastWorkerError: { message: "boom", at: 1 } },
-        updatedAt: 1,
-      },
-    };
-    const view = render(<PackageRuntimeStatus packageId={packageId} />);
-    expect(view.container).toHaveTextContent("not on this device yet");
-    expect(view.getByRole("alert")).toHaveTextContent("The package worker failed: boom");
-  });
-
-  it("renders a running badge", () => {
-    mockStates = { [packageId]: { packageId, status: "running", updatedAt: 1 } };
-    expect(render(<PackageRuntimeBadge packageId={packageId} />).container).toHaveTextContent(
-      "Running",
-    );
-  });
-});

package/src/screens/packages/package-runtime-status.tsx

@@ -1,68 +0,0 @@
-import type { IPackageRuntimeState } from "@peers-app/peers-sdk";
-import { packageStatusBadge, usePackageRuntimeStates } from "./packages-ipc";
-
-interface IPackageRuntimeProps {
-  /** Package to show. */
-  packageId: string;
-}
-
-/** Small badge with a package's runtime status on this device; renders nothing until known. */
-export const PackageRuntimeBadge = ({ packageId }: IPackageRuntimeProps) => {
-  const states = usePackageRuntimeStates();
-  return <RuntimeBadge state={states?.[packageId]} />;
-};
-
-/**
- * Runtime status on this device: badge, running version, and the last load or worker
- * failure.
- */
-export const PackageRuntimeStatus = ({ packageId }: IPackageRuntimeProps) => {
-  const state = usePackageRuntimeStates()?.[packageId];
-  if (!state) return null;
-  const running = state.running;
-  const workerError = state.worker?.lastWorkerError;
-  return (
-    <div className="mb-3" data-testid="package-runtime-status">
-      <div className="d-flex align-items-center gap-2">
-        <RuntimeBadge state={state} />
-        {running?.version ? (
-          <span className="text-muted small">
-            Running v{running.version}
-            {running.versionTag ? ` (${running.versionTag})` : ""} on this device
-          </span>
-        ) : state.reason ? (
-          <span className="text-muted small">{state.reason}</span>
-        ) : null}
-      </div>
-      {state.status === "failed" && state.lastError ? (
-        <RuntimeError
-          title={
-            state.lastError.version
-              ? `Loading v${state.lastError.version} failed`
-              : "Loading this package failed"
-          }
-          message={state.lastError.message}
-        />
-      ) : null}
-      {workerError ? (
-        <RuntimeError title="The package worker failed" message={workerError.message} />
-      ) : null}
-    </div>
-  );
-};
-
-const RuntimeBadge = ({ state }: { state: IPackageRuntimeState | undefined }) => {
-  const badge = packageStatusBadge(state);
-  if (!badge) return null;
-  return (
-    <span className={`badge text-bg-${badge.color}`} title={state?.lastError?.message}>
-      {badge.label}
-    </span>
-  );
-};
-
-const RuntimeError = ({ title, message }: { title: string; message: string }) => (
-  <div className="alert alert-danger py-2 px-3 mt-2 mb-0 small" role="alert">
-    <strong>{title}:</strong> <span className="font-monospace">{message}</span>
-  </div>
-);

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

@@ -1,298 +0,0 @@
-import {
-  getEffectivePackagePrefs,
-  hasDeviceFollowOverride,
-  type IDoc,
-  type IPackage,
-  type IPackageVersion,
-  Packages,
-  PackageVersions,
-  packagePrefsVar,
-  packageVersionPromotionTargets,
-  Users,
-  updatePackagePrefs,
-} from "@peers-app/peers-sdk";
-import { useState } from "react";
-import { useObservable, useObservableState, usePromise } from "../../hooks";
-import { activatePackageVersion, isGroupAdmin } from "./package-helpers";
-import { packagesTools } from "./packages-ipc";
-
-function formatDate(iso: string): string {
-  try {
-    const d = new Date(iso);
-    const now = new Date();
-    const diffMs = now.getTime() - d.getTime();
-    const diffMins = Math.floor(diffMs / 60000);
-    if (diffMins < 1) return "just now";
-    if (diffMins < 60) return `${diffMins}m ago`;
-    const diffHours = Math.floor(diffMins / 60);
-    if (diffHours < 24) return `${diffHours}h ago`;
-    const diffDays = Math.floor(diffHours / 24);
-    if (diffDays < 30) return `${diffDays}d ago`;
-    return d.toLocaleDateString();
-  } catch {
-    return iso;
-  }
-}
-
-function tagBadgeClass(tag?: string): string {
-  if (!tag) return "text-bg-secondary";
-  if (tag === "dev") return "text-bg-danger";
-  if (tag.startsWith("beta")) return "text-bg-warning";
-  if (tag === "stable") return "text-bg-success";
-  return "text-bg-secondary";
-}
-
-/** Lists package versions with activate, promote, pin, and delete actions. */
-export const PackageVersionsList = (props: { pkg: IDoc<IPackage> }) => {
-  const { pkg } = props;
-  const refreshKey = useObservableState(0);
-  const [activating, setActivating] = useState<string | null>(null);
-  const [deleting, setDeleting] = useState<string | null>(null);
-  const [pinning, setPinning] = useState(false);
-
-  const [devicePrefs] = useObservable(packagePrefsVar(pkg.packageId));
-  const effective = getEffectivePackagePrefs(pkg.toJS(), devicePrefs);
-  const effectiveActiveVersionId = effective.activePackageVersionId;
-  const isPinned = effective.isPinned;
-
-  const versions = usePromise(
-    async () => {
-      const all = await PackageVersions().list({ packageId: pkg.packageId });
-      const parse = (v: string) => v.split(".").map(Number);
-      const sorted = all.sort((a, b) => {
-        const [aMaj, aMin, aPat] = parse(a.version || "0.0.0");
-        const [bMaj, bMin, bPat] = parse(b.version || "0.0.0");
-        if (bMaj !== aMaj) return bMaj - aMaj;
-        if (bMin !== aMin) return bMin - aMin;
-        if (bPat !== aPat) return bPat - aPat;
-        return (b.createdAt || "").localeCompare(a.createdAt || "");
-      });
-      const uniqueCreatorIds = [...new Set(sorted.map((pv) => pv.createdBy).filter(Boolean))];
-      const userMap = new Map<string, string>();
-      await Promise.all(
-        uniqueCreatorIds.map(async (uid) => {
-          try {
-            const user = await Users().get(uid, { useCache: true });
-            if (user?.name) userMap.set(uid, user.name);
-          } catch {}
-        }),
-      );
-      return { sorted, userMap };
-    },
-    undefined,
-    [pkg.packageId, refreshKey()],
-  );
-
-  async function activateVersion(pv: IPackageVersion) {
-    setActivating(pv.packageVersionId);
-    try {
-      await activatePackageVersion(pkg.packageId, pv);
-      await pkg.load();
-      refreshKey(refreshKey() + 1);
-    } catch (err: unknown) {
-      alert(`Failed to activate version: ${err instanceof Error ? err.message : String(err)}`);
-    } finally {
-      setActivating(null);
-    }
-  }
-
-  async function deleteVersion(pv: IPackageVersion) {
-    if (!confirm(`Delete version v${pv.version} (${pv.packageVersionHash?.substring(0, 8)})?`))
-      return;
-    setDeleting(pv.packageVersionId);
-    try {
-      await PackageVersions().delete(pv.packageVersionId);
-      refreshKey(refreshKey() + 1);
-    } catch (err: unknown) {
-      alert(`Failed to delete version: ${err instanceof Error ? err.message : String(err)}`);
-    } finally {
-      setDeleting(null);
-    }
-  }
-
-  async function promoteVersion(pv: IPackageVersion, newTag: string) {
-    try {
-      // The host re-tags, re-signs, records history, and activates the version when this
-      // device was running it and the group follows the new tag.
-      const result = await (await packagesTools()).promotePackageVersion({
-        packageVersionId: pv.packageVersionId,
-        versionTag: newTag,
-      });
-      if (result.warning) alert(result.warning);
-      if (result.activated) await pkg.load();
-      refreshKey(refreshKey() + 1);
-    } catch (err: unknown) {
-      alert(`Failed to promote version: ${err instanceof Error ? err.message : String(err)}`);
-    }
-  }
-
-  async function pinVersion() {
-    setPinning(true);
-    try {
-      const pinsGroup = !hasDeviceFollowOverride(devicePrefs) && (await isGroupAdmin());
-
-      if (pinsGroup) {
-        const current = await Packages().get(pkg.packageId);
-        if (current) {
-          current.versionFollowRange = "pinned";
-          await Packages().signAndSave(current);
-        }
-      } else {
-        await updatePackagePrefs(pkg.packageId, { pinned: true });
-      }
-      await pkg.load();
-    } catch (err: unknown) {
-      alert(`Failed to pin version: ${err instanceof Error ? err.message : String(err)}`);
-    } finally {
-      setPinning(false);
-    }
-  }
-
-  if (!versions) {
-    return (
-      <div className="text-center p-3">
-        <div className="spinner-border spinner-border-sm" />
-      </div>
-    );
-  }
-
-  const { sorted, userMap } = versions;
-
-  if (sorted.length === 0) {
-    return (
-      <div className="text-muted text-center p-4">
-        <i className="bi bi-tag me-1"></i>
-        No versions found for this package.
-      </div>
-    );
-  }
-
-  return (
-    <div>
-      <small className="text-muted">
-        {sorted.length} version{sorted.length !== 1 ? "s" : ""}
-      </small>
-      <div className="list-group mt-2">
-        {sorted.map((pv) => (
-          <VersionRow
-            key={pv.packageVersionId}
-            pv={pv}
-            isActive={pv.packageVersionId === effectiveActiveVersionId}
-            isPinned={isPinned}
-            pinning={pinning}
-            activating={activating}
-            deleting={deleting}
-            userMap={userMap}
-            onActivate={activateVersion}
-            onDelete={deleteVersion}
-            onPin={pinVersion}
-            onPromote={promoteVersion}
-          />
-        ))}
-      </div>
-    </div>
-  );
-};
-
-function VersionRow(props: {
-  pv: IPackageVersion;
-  isActive: boolean;
-  isPinned: boolean;
-  pinning: boolean;
-  activating: string | null;
-  deleting: string | null;
-  userMap: Map<string, string>;
-  onActivate: (pv: IPackageVersion) => void;
-  onDelete: (pv: IPackageVersion) => void;
-  onPin: () => void;
-  onPromote: (pv: IPackageVersion, newTag: string) => void;
-}) {
-  const { pv, isActive, isPinned, pinning, activating, deleting, userMap } = props;
-  const creatorName = userMap.get(pv.createdBy);
-  const currentTag = pv.versionTag || "dev";
-  const promoteTargets = packageVersionPromotionTargets(currentTag);
-
-  return (
-    <div className={`list-group-item ${isActive ? "list-group-item-success" : ""}`}>
-      <div className="d-flex align-items-center justify-content-between">
-        <div className="d-flex align-items-center flex-wrap">
-          {/* The number is the version baked into the bundle. Relabeling it desyncs isolated packages. */}
-          <strong className="me-2">v{pv.version}</strong>
-          {pv.versionTag && (
-            <span className={`badge ${tagBadgeClass(pv.versionTag)} me-2`}>{pv.versionTag}</span>
-          )}
-          <code className="text-muted small me-2">{pv.packageVersionHash?.substring(0, 8)}</code>
-          <small className="text-muted me-2">{formatDate(pv.createdAt)}</small>
-          {creatorName && <small className="text-muted">by {creatorName}</small>}
-        </div>
-        <div className="d-flex gap-1 align-items-center">
-          {promoteTargets.length > 0 && (
-            <div className="dropdown">
-              <button
-                className="btn btn-sm btn-outline-info dropdown-toggle"
-                data-bs-toggle="dropdown"
-                data-bs-popper-config='{"strategy":"fixed"}'
-                title="Change version tag"
-              >
-                Promote
-              </button>
-              <ul className="dropdown-menu dropdown-menu-end">
-                {promoteTargets.map((tag) => (
-                  <li key={tag}>
-                    <button className="dropdown-item" onClick={() => props.onPromote(pv, tag)}>
-                      {currentTag} &rarr; {tag}
-                    </button>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          )}
-          {isActive ? (
-            <>
-              <button
-                className="btn btn-sm btn-outline-secondary"
-                disabled={isPinned || pinning}
-                onClick={() => props.onPin()}
-                title={isPinned ? "Already pinned" : "Pin to this version (disable auto-updates)"}
-              >
-                {pinning ? (
-                  <span className="spinner-border spinner-border-sm" />
-                ) : (
-                  <i className="bi bi-pin-fill"></i>
-                )}
-                {isPinned ? " Pinned" : " Pin"}
-              </button>
-              <span className="badge text-bg-info align-self-center">active</span>
-            </>
-          ) : (
-            <button
-              className="btn btn-sm btn-outline-primary"
-              disabled={activating === pv.packageVersionId}
-              onClick={() => props.onActivate(pv)}
-            >
-              {activating === pv.packageVersionId ? (
-                <span className="spinner-border spinner-border-sm me-1" />
-              ) : (
-                <i className="bi bi-check2-circle me-1"></i>
-              )}
-              Activate
-            </button>
-          )}
-          {!isActive && (
-            <button
-              className="btn btn-sm btn-outline-danger"
-              disabled={deleting === pv.packageVersionId}
-              onClick={() => props.onDelete(pv)}
-            >
-              {deleting === pv.packageVersionId ? (
-                <span className="spinner-border spinner-border-sm" />
-              ) : (
-                <i className="bi bi-trash"></i>
-              )}
-            </button>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/screens/packages/packages-ipc.test.ts

@@ -1,47 +0,0 @@
-const hostContractConsumer = jest.fn(
-  (_definition: unknown, options: { dataContextId: () => Promise<string> }) => ({
-    get: async () => ({ tools: { boundTo: await options.dataContextId() } }),
-    dispose: jest.fn(),
-  }),
-);
-jest.mock("@peers-app/peers-sdk", () => ({
-  getDefaultDataContext: async () => ({ dataContextId: "active-group" }),
-  getPackagesContractDefinition: () => ({ name: "System Packages" }),
-  hostContractConsumer: (definition: unknown, options: { dataContextId: () => Promise<string> }) =>
-    hostContractConsumer(definition, options),
-  subscribeHostContractTransport: () => () => undefined,
-}));
-
-import { packageStatusBadge, packagesContractFor, packagesTools } from "./packages-ipc";
-
-test("caches one host consumer per data context and defaults to the active group", async () => {
-  expect(packagesContractFor("group-a")).toBe(packagesContractFor("group-a"));
-  expect(packagesContractFor("group-b")).not.toBe(packagesContractFor("group-a"));
-  expect(await packagesTools("group-b")).toEqual({ boundTo: "group-b" });
-  expect(await packagesTools()).toEqual({ boundTo: "active-group" });
-  expect(hostContractConsumer).toHaveBeenCalledTimes(3);
-});
-
-test.each([
-  [undefined, undefined],
-  [{ status: "running" }, { label: "Running", color: "success" }],
-  [{ status: "failed" }, { label: "Failed", color: "danger" }],
-  [
-    { status: "failed", running: { kind: "isolated", version: "1.0.0" } },
-    { label: "Update failed", color: "warning" },
-  ],
-  [
-    {
-      status: "running",
-      worker: { workerRunning: false, lastWorkerError: { message: "x", at: 1 } },
-    },
-    { label: "Worker failed", color: "danger" },
-  ],
-  [{ status: "unavailable" }, { label: "Waiting for files", color: "warning" }],
-  [{ status: "unsupported" }, { label: "Unsupported here", color: "secondary" }],
-  [{ status: "disabled" }, { label: "Disabled", color: "secondary" }],
-  [{ status: "inactive" }, undefined],
-  [{ status: "notLoaded" }, undefined],
-] as const)("badge for %p", (runtime, expected) => {
-  expect(packageStatusBadge(runtime as never)).toEqual(expected);
-});

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

@@ -1,125 +0,0 @@
-import {
-  getDefaultDataContext,
-  getPackagesContractDefinition,
-  hostContractConsumer,
-  type IHostContractConsumer,
-  type IPackageObservedRuntime,
-  type IPackagesConsumer,
-  type PackageRuntimeStates,
-} from "@peers-app/peers-sdk";
-import { useEffect, useState } from "react";
-import { useObservable } from "../../hooks";
-import { useHostContract } from "../../hooks/use-host-contract";
-
-const handles = new Map<string, IHostContractConsumer<IPackagesConsumer>>();
-
-/**
- * Shared System Packages handle for one data context; stable for `useHostContract`.
- *
- * @param dataContextId - Personal context (user id) or group id.
- */
-export function packagesContractFor(
-  dataContextId: string,
-): IHostContractConsumer<IPackagesConsumer> {
-  let handle = handles.get(dataContextId);
-  if (!handle) {
-    handle = hostContractConsumer<IPackagesConsumer>(getPackagesContractDefinition(), {
-      dataContextId: async () => dataContextId,
-    });
-    handles.set(dataContextId, handle);
-  }
-  return handle;
-}
-
-/**
- * Resolve the System Packages consumer for a data context.
- *
- * @param dataContextId - Context to bind; defaults to the active group, the same context
- *   `Packages()` reads.
- */
-export async function getPackagesConsumer(dataContextId?: string): Promise<IPackagesConsumer> {
-  const id = dataContextId ?? (await getDefaultDataContext()).dataContextId;
-  return packagesContractFor(id).get();
-}
-
-/**
- * System Packages tools bound to a data context.
- *
- * @param dataContextId - Context to bind; defaults to the active group.
- */
-export async function packagesTools(dataContextId?: string): Promise<IPackagesConsumer["tools"]> {
-  return (await getPackagesConsumer(dataContextId)).tools;
-}
-
-/** A handle that never connects, used until the data context id is known. */
-const pendingHandle: IHostContractConsumer<IPackagesConsumer> = {
-  get: () => new Promise<IPackagesConsumer>(() => undefined),
-  dispose: () => undefined,
-};
-
-/**
- * Live runtime state of a context's packages on this device.
- *
- * @param dataContextId - Context to watch; defaults to the active group.
- * @returns States keyed by package id, or `undefined` until the host answers.
- */
-export function usePackageRuntimeStates(dataContextId?: string): PackageRuntimeStates | undefined {
-  const [handle, setHandle] = useState<IHostContractConsumer<IPackagesConsumer>>();
-  useEffect(() => {
-    let cancelled = false;
-    (dataContextId
-      ? Promise.resolve(dataContextId)
-      : getDefaultDataContext().then((dc) => dc.dataContextId)
-    ).then(
-      (id) => {
-        if (!cancelled) setHandle(packagesContractFor(id));
-      },
-      () => undefined,
-    );
-    return () => {
-      cancelled = true;
-    };
-  }, [dataContextId]);
-  const { consumer } = useHostContract(handle ?? pendingHandle);
-  const [states] = useObservable<PackageRuntimeStates | undefined>(
-    consumer?.observables.runtimeStates,
-  );
-  return states;
-}
-
-/** Display label and Bootstrap badge color for an observed package status. */
-export interface IPackageStatusBadge {
-  /** Short status label. */
-  label: string;
-  /** Bootstrap text-bg color suffix (`success`, `danger`, ...). */
-  color: "success" | "danger" | "warning" | "secondary";
-}
-
-/**
- * Describe a package's observed runtime status for a badge.
- *
- * @param runtime - Observed runtime state, or `undefined` before the host reports one.
- * @returns The badge, or `undefined` when there is nothing to show.
- */
-export function packageStatusBadge(
-  runtime: Pick<IPackageObservedRuntime, "status" | "running" | "worker"> | undefined,
-): IPackageStatusBadge | undefined {
-  if (!runtime) return undefined;
-  if (runtime.worker?.lastWorkerError) return { label: "Worker failed", color: "danger" };
-  switch (runtime.status) {
-    case "running":
-      return { label: "Running", color: "success" };
-    case "failed":
-      return runtime.running
-        ? { label: "Update failed", color: "warning" }
-        : { label: "Failed", color: "danger" };
-    case "unavailable":
-      return { label: "Waiting for files", color: "warning" };
-    case "unsupported":
-      return { label: "Unsupported here", color: "secondary" };
-    case "disabled":
-      return { label: "Disabled", color: "secondary" };
-    default:
-      return undefined;
-  }
-}