@peers-app/peers-ui 0.26.4 → 0.26.5

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

@@ -5,11 +5,10 @@ import {
   getUserRole,
   hasDeviceFollowOverride,
   type IPackageVersion,
-  Packages,
   PackageVersions,
   packagePrefsVar,
-  updatePackagePrefs,
 } from "@peers-app/peers-sdk";
+import { packagesTools } from "./packages-ipc";
 
 /** Severity of a version update: major > minor > patch. */
 export type UpdateLevel = "major" | "minor" | "patch" | null;
@@ -107,8 +106,9 @@ export async function isGroupAdmin(): Promise<boolean> {
 /**
  * Activate a specific package version, handling group-level vs device-local
  * activation. When the device has no follow override and the user is a group
- * admin, the group's `activePackageVersionId` is advanced so all devices
- * stay in sync. Otherwise only the device-local prefs are updated.
+ * admin, a release advances the group's `activePackageVersionId` so all devices
+ * stay in sync. Dev versions (including legacy missing or empty tags) and other
+ * selections only update the device-local prefs.
  *
  * @param packageId - The package to activate a version for.
  * @param pv - The package version to activate.
@@ -122,57 +122,15 @@ export async function activatePackageVersion(
   const devicePrefs = prefsVar();
 
   const activatesGroup =
-    pv.versionTag !== "dev" && !hasDeviceFollowOverride(devicePrefs) && (await isGroupAdmin());
-
-  if (activatesGroup) {
-    const current = await Packages().get(packageId);
-    if (current) {
-      current.activePackageVersionId = pv.packageVersionId;
-      await Packages().signAndSave(current);
-    }
-    await updatePackagePrefs(packageId, { activePackageVersionId: undefined });
-  } else {
-    await updatePackagePrefs(packageId, { activePackageVersionId: pv.packageVersionId });
-  }
-}
-
-/**
- * After promoting a version that is currently effective-active on this device,
- * activate it when the new tag matches the group's auto-activate / follow rules.
- *
- * This closes the gotcha where a device is already running a `dev` build, promotes
- * it to `beta`/`stable`, and expects the group active version to advance without a
- * separate Activate click — but only when the group would accept that channel
- * (e.g. default follow is `stable`; `beta` only when the group follows beta).
- *
- * @param packageId - Package that was promoted
- * @param promotedPv - PV after the tag change (must include the new `versionTag`)
- * @param opts.wasEffectiveActive - True when this PV was this device's effective active before promote
- * @param opts.groupFollowTags - Group `IPackage.followVersionTags` (not device override)
- * @param opts.groupPinned - True when group `versionFollowRange` is `pinned`
- * @returns Whether activation was attempted
- */
-export async function maybeActivateAfterPromote(
-  packageId: string,
-  promotedPv: IPackageVersion,
-  opts: {
-    wasEffectiveActive: boolean;
-    groupFollowTags: string | undefined;
-    groupPinned: boolean;
-  },
-): Promise<boolean> {
-  if (!opts.wasEffectiveActive) return false;
-  if (opts.groupPinned) return false;
-  if (!promotedPv.versionTag || promotedPv.versionTag === "dev") return false;
-
-  // Docs default: groups follow `stable` when followVersionTags is unset.
-  const followTags = opts.groupFollowTags ?? "stable";
-  if (!doesTagMatch(undefined, promotedPv.versionTag, followTags, undefined)) {
-    return false;
-  }
-
-  await activatePackageVersion(packageId, promotedPv);
-  return true;
+    (pv.versionTag || "dev") !== "dev" &&
+    !hasDeviceFollowOverride(devicePrefs) &&
+    (await isGroupAdmin());
+
+  await (await packagesTools()).activatePackageVersion({
+    packageId,
+    packageVersionId: pv.packageVersionId,
+    scope: activatesGroup ? "group" : "device",
+  });
 }
 
 /** Numeric rank for sorting packages by update urgency. */

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

@@ -10,13 +10,13 @@ import {
   PackageVersions,
   packagePrefsVar,
   packagesRootDir,
-  rpcServerCalls,
   updatePackagePrefs,
 } from "@peers-app/peers-sdk";
 import { Input } from "../../components/input";
 import { MarkdownWithMentions } from "../../components/markdown-with-mentions";
 import { Tooltip } from "../../components/tooltip";
 import { useObservable, usePromise } from "../../hooks";
+import { openInEditorOnHost, openOnHost } from "../../host-shell/host-shell-consumer";
 import { PackageNetworkPanel } from "./package-network-panel";
 
 /** Info tab for the package details screen. */
@@ -115,7 +115,7 @@ export const PackageInfo = (props: { pkg: IDoc<IPackage> }) => {
             <button
               className="btn btn-sm btn-link"
               onClick={() => {
-                rpcServerCalls.openPackage(localPath || packagesRootDir);
+                void openInEditorOnHost(localPath || packagesRootDir);
               }}
             >
               Open Local
@@ -142,7 +142,7 @@ export const PackageInfo = (props: { pkg: IDoc<IPackage> }) => {
               <button
                 className="btn btn-sm btn-link"
                 onClick={() => {
-                  rpcServerCalls.openLinkInBrowser(remoteRepoUrl);
+                  void openOnHost(remoteRepoUrl);
                 }}
               >
                 Open Remote

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

@@ -3,14 +3,13 @@ import {
   type ICursorIterable,
   type IPackage,
   type IPackageVersion,
+  isid,
+  isPackageRepositoryUrl,
   observable,
   Packages,
   PackageVersions,
   packagePrefsVar,
   packagesRootDir,
-  rpcServerCalls,
-  unwrapAddOrUpdatePackageResult,
-  updatePackagePrefs,
 } from "@peers-app/peers-sdk";
 import type React from "react";
 import { useCallback, useEffect, useState } from "react";
@@ -20,6 +19,7 @@ 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 {
@@ -29,6 +29,8 @@ import {
   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). */
@@ -53,6 +55,17 @@ 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> => {
@@ -94,6 +107,7 @@ const PackageRow = ({ pkg, onUpdated }: { pkg: IPackage; onUpdated: () => void }
       pkg.packageId,
       effective.followTags,
       pkg.activePackageVersionId,
+      versionsRevision,
     ],
   );
 
@@ -122,7 +136,10 @@ const PackageRow = ({ pkg, onUpdated }: { pkg: IPackage; onUpdated: () => void }
   async function handleUseRelease() {
     setUpdating(true);
     try {
-      await updatePackagePrefs(pkg.packageId, { activePackageVersionId: undefined });
+      await (await packagesTools()).activatePackageVersion({
+        packageId: pkg.packageId,
+        scope: "device",
+      });
       onUpdated();
     } catch (err: unknown) {
       alert(`Failed to switch: ${err instanceof Error ? err.message : String(err)}`);
@@ -135,8 +152,10 @@ const PackageRow = ({ pkg, onUpdated }: { pkg: IPackage; onUpdated: () => void }
     if (!status?.latestDevPv) return;
     setUpdating(true);
     try {
-      await updatePackagePrefs(pkg.packageId, {
-        activePackageVersionId: status.latestDevPv.packageVersionId,
+      await (await packagesTools()).activatePackageVersion({
+        packageId: pkg.packageId,
+        packageVersionId: status.latestDevPv.packageVersionId,
+        scope: "device",
       });
       onUpdated();
     } catch (err: unknown) {
@@ -151,6 +170,9 @@ const PackageRow = ({ pkg, onUpdated }: { pkg: IPackage; onUpdated: () => void }
       <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"
@@ -236,8 +258,10 @@ 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. */
+/**
+ * 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);
@@ -323,13 +347,11 @@ export const PackageList = () => {
     const name = searchText.trim();
     if (!name) return;
 
-    if (name.startsWith("http") || name.endsWith(".git")) {
+    if (isPackageRepositoryUrl(name)) {
       if (!confirm(`Add remote package: ${name}`)) return;
       try {
         addingPackage(true);
-        const { packageId } = unwrapAddOrUpdatePackageResult(
-          await rpcServerCalls.addOrUpdatePackage(name),
-        );
+        const { packageId } = await (await packagesTools()).clonePackage({ url: name });
         const pkg = await Packages().get(packageId);
         if (pkg) {
           mainContentPath(`packages/${packageId}`);
@@ -344,13 +366,26 @@ export const PackageList = () => {
       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 } = unwrapAddOrUpdatePackageResult(
-        await rpcServerCalls.addOrUpdatePackage(name),
-      );
+      const { packageId, warning } = await (await packagesTools()).createPackage({ name });
       const pkg = await Packages().get(packageId);
       if (pkg) {
         if (warning) {
@@ -430,7 +465,7 @@ export const PackageList = () => {
           <li>
             <a
               className="dropdown-item"
-              onClick={() => rpcServerCalls.openPath(packagesRootDir)}
+              onClick={() => void openOnHost(packagesRootDir)}
               style={{ cursor: "pointer" }}
             >
               Open Packages Directory

package/src/screens/packages/package-new-local.tsx

@@ -1,12 +1,8 @@
-import {
-  camelCaseToHyphens,
-  Packages,
-  packagesRootDir,
-  rpcServerCalls,
-  unwrapAddOrUpdatePackageResult,
-} from "@peers-app/peers-sdk";
+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 = () => {
@@ -35,18 +31,17 @@ export const PackageNewLocal = () => {
 
   const createLocalPackage = async () => {
     try {
-      const { packageId, warning } = unwrapAddOrUpdatePackageResult(
-        await rpcServerCalls.addOrUpdatePackage(packageName, {
-          packageLocation: packageLocation || packageLocationDefault,
-        }),
-      );
+      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}`);
-        rpcServerCalls.openPackage(packageLocation || packageLocationDefault);
+        void openInEditorOnHost(packageLocation || packageLocationDefault);
       }
     } catch (err) {
       const message = err instanceof Error ? err.message : String(err);

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

@@ -0,0 +1,58 @@
+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

@@ -0,0 +1,68 @@
+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,7 +1,5 @@
 import {
-  computePackageVersionHash,
   getEffectivePackagePrefs,
-  getMe,
   hasDeviceFollowOverride,
   type IDoc,
   type IPackage,
@@ -9,13 +7,14 @@ import {
   Packages,
   PackageVersions,
   packagePrefsVar,
-  rpcServerCalls,
+  packageVersionPromotionTargets,
   Users,
   updatePackagePrefs,
 } from "@peers-app/peers-sdk";
 import { useState } from "react";
 import { useObservable, useObservableState, usePromise } from "../../hooks";
-import { activatePackageVersion, isGroupAdmin, maybeActivateAfterPromote } from "./package-helpers";
+import { activatePackageVersion, isGroupAdmin } from "./package-helpers";
+import { packagesTools } from "./packages-ipc";
 
 function formatDate(iso: string): string {
   try {
@@ -113,61 +112,14 @@ export const PackageVersionsList = (props: { pkg: IDoc<IPackage> }) => {
 
   async function promoteVersion(pv: IPackageVersion, newTag: string) {
     try {
-      const me = await getMe();
-      const history = [...(pv.history ?? [])];
-      history.push({
-        action: `promoted:${newTag}`,
-        by: me.userId,
-        at: new Date().toISOString(),
-        signature: "",
-      });
-      const pvHash = computePackageVersionHash(
-        pv.version,
-        newTag,
-        pv.packageBundleFileHash,
-        pv.routesBundleFileHash,
-        pv.uiBundleFileHash,
-      );
-
-      // Auto-sign with package author key if available (server/PWA host — key never
-      // exposed to UI). Soft-fail when the key is missing so group admins can still
-      // promote, but never keep a signature that was computed for the old tag.
-      const authorSig = await rpcServerCalls.signPackageAuthorVersion({
-        packageId: pv.packageId,
+      // 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,
-        version: pv.version,
         versionTag: newTag,
-        packageBundleFileHash: pv.packageBundleFileHash,
-        routesBundleFileHash: pv.routesBundleFileHash,
-        uiBundleFileHash: pv.uiBundleFileHash,
-        appNavs: pv.appNavs,
-        createdBy: pv.createdBy,
-        createdAt: pv.createdAt,
       });
-
-      const updated: IPackageVersion = {
-        ...pv,
-        versionTag: newTag,
-        packageVersionHash: pvHash,
-        history,
-        packageAuthorSignature: authorSig,
-      };
-
-      await PackageVersions().signAndSave(updated, { saveAsSnapshot: true });
-
-      // Promoting the version this device is already running should advance the
-      // group active version when the new tag matches group follow policy
-      // (e.g. promote active → stable with default follow settings).
-      const pkgJs = pkg.toJS();
-      const activated = await maybeActivateAfterPromote(pkg.packageId, updated, {
-        wasEffectiveActive: pv.packageVersionId === effectiveActiveVersionId,
-        groupFollowTags: pkgJs.followVersionTags,
-        groupPinned: pkgJs.versionFollowRange === "pinned",
-      });
-      if (activated) {
-        await pkg.load();
-      }
-
+      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)}`);
@@ -242,21 +194,6 @@ export const PackageVersionsList = (props: { pkg: IDoc<IPackage> }) => {
   );
 };
 
-/**
- * Valid promotion targets for each version tag. Promotion only moves forward:
- * dev -> beta -> stable. No demotions allowed.
- */
-function getPromoteTargets(currentTag?: string): string[] {
-  switch (currentTag) {
-    case "dev":
-      return ["beta", "stable"];
-    case "beta":
-      return ["stable"];
-    default:
-      return [];
-  }
-}
-
 function VersionRow(props: {
   pv: IPackageVersion;
   isActive: boolean;
@@ -273,7 +210,7 @@ function VersionRow(props: {
   const { pv, isActive, isPinned, pinning, activating, deleting, userMap } = props;
   const creatorName = userMap.get(pv.createdBy);
   const currentTag = pv.versionTag || "dev";
-  const promoteTargets = getPromoteTargets(currentTag);
+  const promoteTargets = packageVersionPromotionTargets(currentTag);
 
   return (
     <div className={`list-group-item ${isActive ? "list-group-item-success" : ""}`}>

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

@@ -0,0 +1,47 @@
+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);
+});