@peers-app/peers-ui 0.25.20 → 0.26.0

package/src/screens/tools/tool-schema.tsx

@@ -1,49 +1,44 @@
-import {
-  type IDoc,
-  type IOSchema,
-  IOSchemaType,
-  type ITool,
-  type Observable,
-} from "@peers-app/peers-sdk";
-import { IOSchemaEditor } from "../../components/io-schema";
-import { useObservable } from "../../hooks";
-
-export const ToolSchema = (props: { tool: IDoc<ITool> }) => {
-  const { tool } = props;
-
-  useObservable(tool.qs.isAssistantRunner);
-
-  if (tool.isAssistantRunner && !tool.configSchema) {
-    tool.configSchema = {
-      type: IOSchemaType.complex,
-      fields: [],
-    };
-  }
+import type { IOSchema, ITool, IToolCatalogEntry } from "@peers-app/peers-sdk";
 
+function FieldTable({ label, schema }: { label: string; schema?: IOSchema }) {
   return (
-    <div>
-      {tool.isAssistantRunner && (
-        <>
-          <span style={{ width: "130px", display: "inline-block" }} className="fw-bold">
-            Config Schema:
-          </span>
-          <IOSchemaEditor
-            ioSchema={tool.qs.configSchema as Observable<IOSchema>}
-            simpleValueName="input"
-          />
-          <br />
-        </>
+    <section className="mb-4">
+      <h6>{label}</h6>
+      {!schema?.fields.length ? (
+        <p>No fields</p>
+      ) : (
+        <table className="table table-sm">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Type</th>
+              <th>Required</th>
+              <th>Description</th>
+            </tr>
+          </thead>
+          <tbody>
+            {schema.fields.map((field) => (
+              <tr key={field.name}>
+                <td>{field.name}</td>
+                <td>
+                  {field.type}
+                  {field.isArray ? "[]" : ""}
+                </td>
+                <td>{field.optional ? "No" : "Yes"}</td>
+                <td>{field.description}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
       )}
-
-      <span style={{ width: "130px", display: "inline-block" }} className="fw-bold">
-        Input Schema:
-      </span>
-      <IOSchemaEditor ioSchema={tool.qs.inputSchema} simpleValueName="input" />
-
-      <span style={{ width: "130px", display: "inline-block" }} className="mt-4 fw-bold">
-        Output Schema:
-      </span>
-      <IOSchemaEditor ioSchema={tool.qs.outputSchema} simpleValueName="output" />
-    </div>
+    </section>
   );
-};
+}
+/** Read-only contract field tables, plus persisted assistant runner configuration. */
+export const ToolSchema = ({ tool, entry }: { tool: ITool; entry?: IToolCatalogEntry }) => (
+  <div>
+    {tool.isAssistantRunner && <FieldTable label="Config Schema" schema={tool.configSchema} />}
+    <FieldTable label="Input Schema" schema={entry?.inputSchema ?? tool.inputSchema} />
+    <FieldTable label="Output Schema" schema={entry?.outputSchema ?? tool.outputSchema} />
+  </div>
+);

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

@@ -0,0 +1,108 @@
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { useEffect, useState, useSyncExternalStore } from "react";
+
+const mockPackages: Record<string, unknown>[] = [];
+const mockGetFileContents = jest.fn();
+jest.mock("@peers-app/peers-sdk", () => ({
+  debounceByArgs: (fn: unknown) => fn,
+  getUserContext: () => new Promise(() => {}),
+  packagePrefsVar: () => Object.assign(() => ({}), { loadingPromise: Promise.resolve() }),
+  PackageVersions: () => ({ get: async () => ({ uiBundleFileId: "bundle" }) }),
+  rpcServerCalls: { getFileContents: (...args: unknown[]) => mockGetFileContents(...args) },
+}));
+jest.mock("../globals", () => ({ mainContentPath: () => "", packageReloaded: () => 0 }));
+jest.mock("../hooks", () => ({ useObservable: (value: () => unknown) => [value()] }));
+jest.mock("../ui-defaults", () => ({}));
+jest.mock("../components/loading-indicator", () => ({
+  LoadingIndicator: () => <p>Loading bundle</p>,
+}));
+jest.mock("./routes-loader", () => ({ allPackages: () => mockPackages }));
+
+import { registerInternalPeersUI, UIRouter } from "./ui-loader";
+
+test.each([
+  false,
+  true,
+])("query changes retain screen state and props (preloaded: %s)", async (preloaded) => {
+  const packageId = `package-${preloaded}`;
+  const peersUIId = `ui-${preloaded}`;
+  const base = `package-nav/${packageId}/app`;
+  let path = `${base}?jobId=first`;
+  const listeners = new Set<() => void>();
+  let mounts = 0;
+  let unmounts = 0;
+  function Content({ caller }: { caller: string }) {
+    const [draft, setDraft] = useState("");
+    const currentPath = useSyncExternalStore(
+      (listener) => {
+        listeners.add(listener);
+        return () => {
+          listeners.delete(listener);
+        };
+      },
+      () => path,
+    );
+    useEffect(() => {
+      mounts++;
+      return () => {
+        unmounts++;
+      };
+    }, []);
+    return (
+      <>
+        <p>{caller}</p>
+        <p>{currentPath}</p>
+        <input
+          aria-label="Draft"
+          value={draft}
+          onChange={(event) => setDraft(event.target.value)}
+        />
+      </>
+    );
+  }
+  const schema = { parse: (value: unknown) => value, safeParse: () => ({ success: true }) };
+  const ui = { peersUIId, content: Content, propsSchema: schema };
+  const routeWindow = window as unknown as {
+    registerPeersUIRoute: (route: object) => void;
+    testUI?: object;
+  };
+  routeWindow.registerPeersUIRoute({ packageId, peersUIId, path: base });
+  mockPackages.length = 0;
+  mockGetFileContents.mockReset();
+  let releaseBundle!: (code: string) => void;
+  if (preloaded) {
+    await registerInternalPeersUI({ component: Content, peersUIId, propsSchema: schema });
+  } else {
+    mockPackages.push({ packageId, name: "Test package", activePackageVersionId: "version" });
+    routeWindow.testUI = ui;
+    mockGetFileContents.mockImplementation(
+      () =>
+        new Promise<string>((resolve) => {
+          releaseBundle = resolve;
+        }),
+    );
+  }
+  const view = render(<UIRouter path={path} props={{ caller: "Caller props" }} />);
+  if (!preloaded) {
+    expect(await screen.findByText("Loading bundle")).toBeInTheDocument();
+    await act(async () => {
+      releaseBundle("exportUIs({uis: [window.testUI]});");
+    });
+  }
+  expect(await screen.findByText("Caller props")).toBeInTheDocument();
+  fireEvent.change(screen.getByLabelText("Draft"), { target: { value: "Unsaved edits" } });
+  await act(async () => {
+    path = `${base}?jobId=second`;
+    for (const listener of listeners) listener();
+    view.rerender(<UIRouter path={path} props={{ caller: "Caller props" }} />);
+  });
+  expect(screen.getByLabelText("Draft")).toHaveValue("Unsaved edits");
+  expect(screen.getByText(path)).toBeInTheDocument();
+  expect({ mounts, unmounts, loads: mockGetFileContents.mock.calls.length }).toEqual({
+    mounts: 1,
+    unmounts: 0,
+    loads: preloaded ? 0 : 1,
+  });
+  view.unmount();
+  delete routeWindow.testUI;
+});

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

@@ -239,7 +239,7 @@ export const UIRouter = (props: IProps) => {
     return undefined;
   }
 
-  return UILoader({ peersUIId: matchingRoute.peersUIId, props: props.props });
+  return <UILoader peersUIId={matchingRoute.peersUIId} props={props.props} />;
 };
 
 const UILoader = (args: { peersUIId: string; props?: Record<string, unknown> }) => {
@@ -249,40 +249,9 @@ const UILoader = (args: { peersUIId: string; props?: Record<string, unknown> })
   const { props, peersUIId } = args;
   const [lastReloadTime] = useObservable(packageReloaded);
   props.__lastPackageReload = lastReloadTime;
-  // check if peersUIId maps to an in-memory react component
-  const peersUI = peersUIs[peersUIId];
-  if (peersUI?.content) {
-    const parseResult = peersUI.propsSchema.safeParse(props);
-    if (!parseResult.success) {
-      console.error("props did not match schema", {
-        props,
-        schema: peersUI.propsSchema,
-        errors: parseResult.error,
-      });
-      return (
-        <div>
-          <pre>
-            Peers UI could not be loaded <br />
-            peersUIId: {peersUI.peersUIId} <br />
-            Component name: {peersUI.content?.name} <br />
-            Props did not match schema <br />
-            Errors: {JSON.stringify(parseResult.error, null, 2)} <br />
-            <br />
-            Props {JSON.stringify(toJSON(props), null, 2)}
-            <br />
-          </pre>
-        </div>
-      );
-    }
-    const Component = peersUI.content as React.ComponentType<Record<string, unknown>>;
-    return (
-      <UIErrorBoundary peersUIId={peersUIId} componentName={peersUI.content?.name}>
-        <Component {...args.props} />
-      </UIErrorBoundary>
-    );
-  }
-
-  return <UIAsyncLoader peersUIId={peersUIId} props={props} />;
+  // Keep the same loader ancestor after the bundle enters the cache. Replacing it
+  // on a path change would unmount the screen before its navigation guard can run.
+  return <UIAsyncLoader key={peersUIId} peersUIId={peersUIId} props={props} />;
 };
 
 const uiLoadingPromises: Record<string, Promise<void>> = {};
@@ -379,6 +348,7 @@ function loadUIBundle(pkg: IPackage, forceRefresh?: boolean) {
 
 const UIAsyncLoader = (props: { peersUIId: string; props: Record<string, unknown> }) => {
   const { peersUIId } = props;
+  const peersUI = peersUIs[peersUIId];
   const [loaded, setLoaded] = React.useState(false);
   const [loadError, setLoadError] = React.useState<Error | null>(null);
 
@@ -389,7 +359,7 @@ const UIAsyncLoader = (props: { peersUIId: string; props: Record<string, unknown
   const pkg = allPackages().find((p) => p.packageId === uiPackageId);
 
   useEffect(() => {
-    if (!pkg) return;
+    if (!pkg || peersUIs[peersUIId]?.content) return;
     const pkgRef = pkg;
     setLoadError(null);
     loadUIBundle(pkgRef)
@@ -398,13 +368,13 @@ const UIAsyncLoader = (props: { peersUIId: string; props: Record<string, unknown
         console.error(`Failed to load UI bundle for package ${pkgRef.name}:`, error);
         setLoadError(error);
       });
-  }, [pkg?.packageId, pkg?.name, pkg]);
+  }, [peersUIId, pkg?.packageId, pkg?.name, pkg]);
 
-  if (!pkg) {
+  if (!peersUI?.content && !pkg) {
     return <div>Could not find package that owns peersUIId {peersUIId}</div>;
   }
 
-  if (loadError) {
+  if (!peersUI?.content && loadError) {
     return (
       <div
         style={{
@@ -423,10 +393,10 @@ const UIAsyncLoader = (props: { peersUIId: string; props: Record<string, unknown
             <strong>Peers UI ID:</strong> {peersUIId}
           </div>
           <div>
-            <strong>Package:</strong> {pkg.name}
+            <strong>Package:</strong> {pkg?.name}
           </div>
           <div>
-            <strong>Package ID:</strong> {pkg.packageId}
+            <strong>Package ID:</strong> {pkg?.packageId}
           </div>
         </div>
 
@@ -484,20 +454,19 @@ const UIAsyncLoader = (props: { peersUIId: string; props: Record<string, unknown
     );
   }
 
-  if (!loaded) {
+  if (!peersUI?.content && !loaded) {
     return <LoadingIndicator />;
   }
 
-  const peersUI = peersUIs[peersUIId];
   if (peersUI?.content) {
-    const _props = { ...props, uiVar: undefined };
+    const _props = props.props;
     try {
       peersUI.propsSchema.parse(_props);
       const Component = peersUI.content as React.ComponentType<Record<string, unknown>>;
       return (
         <UIErrorBoundary
           peersUIId={peersUIId}
-          packageName={pkg.name}
+          packageName={pkg?.name}
           componentName={peersUI.content?.name}
         >
           <Component {..._props} />
@@ -522,7 +491,7 @@ const UIAsyncLoader = (props: { peersUIId: string; props: Record<string, unknown
               <strong>Peers UI ID:</strong> {peersUIId}
             </div>
             <div>
-              <strong>Package:</strong> {pkg.name}
+              <strong>Package:</strong> {pkg?.name}
             </div>
             <div>
               <strong>Component:</strong> {peersUI.content?.name}

package/dist/screens/tools/tool-code.d.ts

@@ -1,4 +0,0 @@
-import { type IDoc, type ITool } from "@peers-app/peers-sdk";
-export declare const ToolCode: (props: {
-    tool: IDoc<ITool>;
-}) => import("react/jsx-runtime").JSX.Element;

package/dist/screens/tools/tool-code.js

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToolCode = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const peers_sdk_1 = require("@peers-app/peers-sdk");
-const editor_inline_1 = require("../../components/markdown-editor/editor-inline");
-const ToolCode = (props) => {
-    const { tool } = props;
-    let code = tool.qs.code() ?? "";
-    const toolCodeObs = (0, peers_sdk_1.computed)({
-        read: () => {
-            if (!code.startsWith("```")) {
-                code = `\`\`\`javascript\n${code}\n\`\`\``;
-            }
-            return code;
-        },
-        write: (newCode) => {
-            code = newCode;
-            if (code.startsWith("```javascript\n")) {
-                code = code.replace("```javascript\n", "");
-                code = code.replace("\n```", "");
-            }
-            tool.qs.code(code);
-        },
-    });
-    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(editor_inline_1.MarkdownEditorInline, { value: toolCodeObs, hideToolbar: true }) }));
-};
-exports.ToolCode = ToolCode;

package/src/screens/tools/tool-code.tsx

@@ -1,30 +0,0 @@
-import { computed, type IDoc, type ITool, type Observable } from "@peers-app/peers-sdk";
-import { MarkdownEditorInline } from "../../components/markdown-editor/editor-inline";
-
-export const ToolCode = (props: { tool: IDoc<ITool> }) => {
-  const { tool } = props;
-
-  let code = tool.qs.code() ?? "";
-  const toolCodeObs = computed({
-    read: () => {
-      if (!code.startsWith("```")) {
-        code = `\`\`\`javascript\n${code}\n\`\`\``;
-      }
-      return code;
-    },
-    write: (newCode: string) => {
-      code = newCode;
-      if (code.startsWith("```javascript\n")) {
-        code = code.replace("```javascript\n", "");
-        code = code.replace("\n```", "");
-      }
-      tool.qs.code(code);
-    },
-  });
-
-  return (
-    <div>
-      <MarkdownEditorInline value={toolCodeObs as Observable<string>} hideToolbar={true} />
-    </div>
-  );
-};