@peers-app/peers-ui 0.26.3 → 0.26.5

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

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

package/src/screens/tools/tool-catalog-ipc.test.ts

@@ -1,6 +1,8 @@
 const list = jest.fn();
 const get = jest.fn();
 const rows = jest.fn();
+const mainContentPath = jest.fn();
+jest.mock("../../globals", () => ({ mainContentPath }));
 let transport = true;
 jest.mock("@peers-app/peers-sdk", () => ({
   getDefaultDataContext: async () => ({ dataContextId: "group" }),
@@ -10,7 +12,7 @@ jest.mock("@peers-app/peers-sdk", () => ({
   Tools: () => ({ list: rows, get: async (toolId: string) => ({ toolId, name: "historical" }) }),
 }));
 
-import { toolMentionConfig } from "../../mention-configs";
+import { toolMentionConfig, valueTypeMentionConfig } from "../../mention-configs";
 import { getToolDetails, listWorkflowMentionTools } from "./tool-catalog-ipc";
 
 beforeEach(() => {
@@ -32,6 +34,10 @@ test("tool mentions include only workflow-invocable catalog tools", async () =>
     name: "historical",
   });
 });
+test("type mentions navigate directly through the UI route observable", () => {
+  valueTypeMentionConfig.onClick?.({ kind: "valueType", id: "type-id", name: "Type" });
+  expect(mainContentPath).toHaveBeenCalledWith("peer-types/type-id");
+});
 test("browser fallback omits quarantined rows and preserves historical detail", async () => {
   transport = false;
   rows.mockResolvedValue([

package/src/screens/variables/variable-details.tsx

@@ -7,7 +7,6 @@ import {
   type Observable,
   observable,
   PersistentVars,
-  rpcServerCalls,
 } from "@peers-app/peers-sdk";
 import { useEffect, useState } from "react";
 import { Checkbox } from "../../components/checkbox";
@@ -17,12 +16,14 @@ import { MarkdownEditorInline } from "../../components/markdown-editor/editor-in
 import { SaveButton } from "../../components/save-button";
 import { ScreenTabBody, Tabs } from "../../components/tabs";
 import { useObservable, usePromise, useSubscription } from "../../hooks";
+import { hostShellTools } from "../../host-shell/host-shell-consumer";
 import { updateActiveTabTitle } from "../../tabs-layout/tabs-state";
 
 interface IProps {
   persistentVarId: string;
 }
 
+/** Details screen for one persistent variable: name, value (copyable), and settings. */
 export const VariableDetails = (props: IProps) => {
   const persistentVariable = usePromise(
     async () => {
@@ -242,9 +243,9 @@ const VariableValue = (props: { pvar: IDoc<IPersistentVar> }) => {
 
 /**
  * Button that copies a persistent variable's value to the clipboard. Decryption (for
- * secret values) and the clipboard write happen entirely on the server/main process via
- * {@link rpcServerCalls.copyPvarValueToClipboard}, so the plaintext is never exposed to
- * the UI. Shows transient success/error feedback on the icon.
+ * secret values) and the clipboard write happen entirely on the host, through System Host
+ * Shell `copyVariableToClipboard`, so the plaintext is never exposed to the UI. Shows
+ * transient success/error feedback on the icon.
  */
 const CopyValueButton = (props: { pvar: IDoc<IPersistentVar> }) => {
   const { pvar } = props;
@@ -254,8 +255,12 @@ const CopyValueButton = (props: { pvar: IDoc<IPersistentVar> }) => {
     try {
       const userContext = await getUserContext();
       const groupId = userContext.currentlyActiveGroupId();
-      const result = await rpcServerCalls.copyPvarValueToClipboard(pvar.persistentVarId, groupId);
-      setStatus(result.success ? "copied" : "error");
+      const tools = await hostShellTools();
+      const result = await tools.copyVariableToClipboard({
+        persistentVarId: pvar.persistentVarId,
+        groupId,
+      });
+      setStatus(result.copied ? "copied" : "error");
     } catch (err) {
       console.error("Failed to copy variable value", err);
       setStatus("error");

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

@@ -454,7 +454,7 @@ describe("NetworkStatusIndicator", () => {
     view.rerender(<NetworkStatusIndicator />);
     const badge = view.container.querySelector(".network-status-update-badge");
     expect(badge).toHaveClass("bi-arrow-up-circle-fill", "text-warning");
-    expect(badge).toHaveStyle({ left: "-0.3rem", bottom: "-0.32rem" });
+    expect(badge).toHaveStyle({ left: "-0.46rem", bottom: "-0.08rem" });
 
     fireEvent.click(view.getByRole("button", { name: /Version 1\.1\.0 is ready to install/ }));
     const section = view.getByTestId("app-update-section");

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

@@ -57,7 +57,10 @@ interface INetworkStatusPresentation {
    * Green when > 0; red zero when connected devices exist but no groups are live.
    */
   connectedGroupsOverlay?: { count: number; colorClass: "text-success" | "text-danger" };
-  /** Bottom-left yellow upgrade arrow when this device has an app update available. */
+  /**
+   * Yellow upgrade arrow on the lower-left corner of the status mark when this device
+   * has an app update available. Kept on the mark so it does not hang below the tab strip.
+   */
   updateAvailableOverlay?: boolean;
 }
 
@@ -679,16 +682,26 @@ export function NetworkStatusIndicator({ compact = false }: { compact?: boolean
             </span>
           )}
           {presentation.updateAvailableOverlay && (
-            <i
-              className={`network-status-update-badge bi ${APP_UPDATE_ICON_CLASS} text-warning position-absolute`}
-              style={{
-                fontSize: "0.5rem",
-                lineHeight: 1,
-                left: "-0.3rem",
-                bottom: "-0.32rem",
-              }}
-              aria-hidden="true"
-            />
+            <>
+              <i
+                className={`network-status-update-badge bi ${APP_UPDATE_ICON_CLASS} text-warning position-absolute`}
+                style={{
+                  fontSize: "0.5rem",
+                  lineHeight: 1,
+                  width: "0.5rem",
+                  height: "0.5rem",
+                  left: "-0.46rem",
+                  bottom: "-0.08rem",
+                }}
+                aria-hidden="true"
+              />
+              {/* Bootstrap Icons shift the glyph below the em box; keep it inside this badge. */}
+              <style>{`
+                .network-status-update-badge.bi::before {
+                  vertical-align: 0;
+                }
+              `}</style>
+            </>
           )}
         </span>
         {!compact && (

package/src/ui-router/ui-loader.tsx

@@ -256,10 +256,6 @@ const UILoader = (args: { peersUIId: string; props?: Record<string, unknown> })
 
 const uiLoadingPromises: Record<string, Promise<void>> = {};
 
-// Check if we're running in a React Native WebView (has injectUIBundle available)
-const isReactNativeWebView =
-  typeof (window as Window & { ReactNativeWebView?: unknown }).ReactNativeWebView !== "undefined";
-
 async function resolveUiBundleFileId(pkg: IPackage): Promise<string | undefined> {
   let pvId = pkg.activePackageVersionId;
   try {
@@ -278,12 +274,6 @@ async function resolveUiBundleFileId(pkg: IPackage): Promise<string | undefined>
   }
 }
 
-type PeersUiBundleWindow = Window & {
-  __peersUIs?: Record<string, IPeersUI>;
-  __peersUIBundleLoaded?: (loadedFileId: string) => void;
-  __peersUIBundleError?: (errorFileId: string, errorMsg: string) => void;
-};
-
 function loadUIBundle(pkg: IPackage, forceRefresh?: boolean) {
   let importPromise: Promise<void> = uiLoadingPromises[pkg.packageId];
   if (!importPromise || forceRefresh) {
@@ -295,48 +285,19 @@ function loadUIBundle(pkg: IPackage, forceRefresh?: boolean) {
         return;
       }
 
-      if (isReactNativeWebView && rpcServerCalls.injectUIBundle) {
-        const _w = window as PeersUiBundleWindow;
-        _w.__peersUIs = _w.__peersUIs || {};
-
-        const loadPromise = new Promise<void>((resolveLoad, rejectLoad) => {
-          _w.__peersUIBundleLoaded = (loadedFileId: string) => {
-            if (loadedFileId === uiBundleFileId) {
-              const store = _w.__peersUIs || {};
-              Object.keys(store).forEach((peersUIId) => {
-                peersUIs[peersUIId] = store[peersUIId];
-              });
-              resolveLoad();
-            }
-          };
-
-          _w.__peersUIBundleError = (errorFileId: string, errorMsg: string) => {
-            if (errorFileId === uiBundleFileId) {
-              rejectLoad(new Error(errorMsg));
-            }
-          };
-        });
-
-        await rpcServerCalls.injectUIBundle(uiBundleFileId);
-        await loadPromise;
-        console.log(
-          `finished loading ui bundle for ${pkg.name}: ${(Date.now() - sTime).toFixed(0)}ms`,
-        );
-      } else {
-        const bundleCode = await rpcServerCalls.getFileContents(uiBundleFileId);
-        if (bundleCode) {
-          const exportUIs = (peerUIs: IPeersPackageUIs) => {
-            peerUIs?.uis?.forEach((ui) => {
-              peersUIs[ui.peersUIId] = ui;
-            });
-          };
-          const bundleFunction = new Function("exportUIs", bundleCode);
-          await bundleFunction(exportUIs);
-        }
-        console.log(
-          `finished loading ui bundle for ${pkg.name}: ${(Date.now() - sTime).toFixed(0)}ms, ${bundleCode ? (bundleCode.length / 1000).toFixed(0) : "0"} KB`,
-        );
+      const bundleCode = await rpcServerCalls.getFileContents(uiBundleFileId);
+      if (bundleCode) {
+        const exportUIs = (peerUIs: IPeersPackageUIs) => {
+          peerUIs?.uis?.forEach((ui) => {
+            peersUIs[ui.peersUIId] = ui;
+          });
+        };
+        const bundleFunction = new Function("exportUIs", bundleCode);
+        await bundleFunction(exportUIs);
       }
+      console.log(
+        `finished loading ui bundle for ${pkg.name}: ${(Date.now() - sTime).toFixed(0)}ms, ${bundleCode ? (bundleCode.length / 1000).toFixed(0) : "0"} KB`,
+      );
     })().catch((err: unknown) => {
       console.error(`Error while loading ui module for ${pkg.name}`, err);
       throw err;