@peers-app/peers-ui 0.25.20 → 0.26.0

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

@@ -3,35 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToolInfo = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const peers_sdk_1 = require("@peers-app/peers-sdk");
-const react_1 = require("react");
-const access_level_field_1 = require("../../components/access-level-field");
-const checkbox_1 = require("../../components/checkbox");
-const input_1 = require("../../components/input");
-const editor_inline_1 = require("../../components/markdown-editor/editor-inline");
-/** Info tab for a tool, including its required access level. */
-const ToolInfo = (props) => {
-    const { tool } = props;
-    const [markdownUsageObs] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)(tool.usageDescription));
-    const [markdownDetailedObs] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)(tool.detailedDescription || ""));
-    (0, react_1.useEffect)(() => {
-        const sub = markdownUsageObs.subscribe(() => {
-            tool.usageDescription = markdownUsageObs();
-        });
-        const sub2 = tool.qs.name.subscribe(() => {
-            tool.name = tool.qs
-                .name()
-                .replaceAll(/\s/g, "_")
-                .replaceAll(/[^a-zA-Z0-9_-]/g, "");
-        });
-        const sub3 = markdownDetailedObs.subscribe(() => {
-            tool.detailedDescription = markdownDetailedObs();
-        });
-        return () => {
-            sub.dispose();
-            sub2.dispose();
-            sub3.dispose();
-        };
-    }, [tool, markdownDetailedObs, markdownUsageObs]);
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("small", { children: "Name:" }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: tool.qs.name, className: "form-control mb-3 p-0 ps-2", placeholder: "Tool name", title: "Tool name" }), (0, jsx_runtime_1.jsx)(access_level_field_1.AccessLevelField, { value: tool.qs.accessLevel }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "form-label small mt-2 me-2", children: "Is Assistant Runner:" }), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { className: "form-check-input mt-2", checked: tool.qs.isAssistantRunner })] }), (0, jsx_runtime_1.jsx)("small", { children: "Usage Description:" }), (0, jsx_runtime_1.jsx)(editor_inline_1.MarkdownEditorInline, { value: markdownUsageObs }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("small", { children: "Detailed Description:" }), (0, jsx_runtime_1.jsx)(editor_inline_1.MarkdownEditorInline, { value: markdownDetailedObs })] }));
+const markdown_with_mentions_1 = require("../../components/markdown-with-mentions");
+/** Display permanent identity and the host’s current dispatch and access projection. */
+const ToolInfo = ({ tool, entry }) => {
+    const target = entry?.target;
+    const level = entry?.access?.accessLevel;
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [tool.isAssistantRunner && (0, jsx_runtime_1.jsx)("span", { className: "badge bg-secondary", children: "Assistant runner" }), (0, jsx_runtime_1.jsxs)("dl", { children: [(0, jsx_runtime_1.jsx)("dt", { children: "ID" }), (0, jsx_runtime_1.jsx)("dd", { children: tool.toolId }), (0, jsx_runtime_1.jsx)("dt", { children: "Aliases" }), (0, jsx_runtime_1.jsx)("dd", { children: entry?.aliases.join(", ") ?? tool.toolId }), (0, jsx_runtime_1.jsx)("dt", { children: "Contract" }), (0, jsx_runtime_1.jsx)("dd", { children: target
+                            ? `${target.contractId}@${target.version}`
+                            : tool.contractId
+                                ? `${tool.contractId}@${tool.contractVersion}`
+                                : "Unresolved" }), (0, jsx_runtime_1.jsx)("dt", { children: "Member" }), (0, jsx_runtime_1.jsx)("dd", { children: target?.toolName ?? tool.toolName ?? tool.name }), (0, jsx_runtime_1.jsx)("dt", { children: "Provider" }), (0, jsx_runtime_1.jsx)("dd", { children: entry?.provider?.activePackageId ?? "Unavailable" }), (0, jsx_runtime_1.jsx)("dt", { children: "Dispatch" }), (0, jsx_runtime_1.jsxs)("dd", { children: [entry?.availability.dispatch ?? "Host catalog unavailable", entry?.availability.message && `: ${entry.availability.message}`] }), (0, jsx_runtime_1.jsx)("dt", { children: "Live access" }), (0, jsx_runtime_1.jsx)("dd", { children: level === undefined ? "Unavailable" : `${(0, peers_sdk_1.getAccessLevelLabel)(level)} (${level})` }), (0, jsx_runtime_1.jsx)("dt", { children: "Workflow" }), (0, jsx_runtime_1.jsxs)("dd", { children: [entry ? (entry.workflowInvocable ? "Available" : "Excluded or unavailable") : "Unknown", entry?.availability.requiresWorkflowRun && "; workflow run required"] })] }), (0, jsx_runtime_1.jsx)(markdown_with_mentions_1.MarkdownWithMentions, { content: entry?.usageDescription ?? tool.usageDescription }), tool.detailedDescription && (0, jsx_runtime_1.jsx)(markdown_with_mentions_1.MarkdownWithMentions, { content: tool.detailedDescription })] }));
 };
 exports.ToolInfo = ToolInfo;

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

@@ -1 +1,2 @@
+/** Browse permanent tool catalog rows. */
 export declare function ToolList(): import("react/jsx-runtime").JSX.Element;

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

@@ -10,6 +10,7 @@ const loading_indicator_1 = require("../../components/loading-indicator");
 const markdown_with_mentions_1 = require("../../components/markdown-with-mentions");
 const globals_1 = require("../../globals");
 const hooks_1 = require("../../hooks");
+/** Browse permanent tool catalog rows. */
 function ToolList() {
     const [searchTextObs] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)(""));
     const [searchText] = (0, hooks_1.useObservable)(searchTextObs);
@@ -35,31 +36,6 @@ function ToolList() {
         });
         return () => sub.dispose();
     }, [cursorId, cursorObs, searchTextObs.subscribe]);
-    async function searchSubmit(evt) {
-        if (evt.key !== "Enter")
-            return;
-        if (!searchText.trim())
-            return;
-        const toolName = searchText
-            .trim()
-            .replace(/\s+/g, "_")
-            .replaceAll(/[^a-zA-Z0-9_]/g, "");
-        const tool = await (0, peers_sdk_1.Tools)().initRecord({
-            name: toolName,
-            usageDescription: searchText.trim(),
-            detailedDescription: "",
-            inputSchema: {
-                type: peers_sdk_1.IOSchemaType.simple,
-                fields: [{ name: "input", type: peers_sdk_1.FieldType.string, description: "" }],
-            },
-            outputSchema: {
-                type: peers_sdk_1.IOSchemaType.simple,
-                fields: [{ name: "output", type: peers_sdk_1.FieldType.string, description: "" }],
-            },
-        });
-        await (0, peers_sdk_1.Tools)().insert(tool);
-        (0, globals_1.mainContentPath)(`tools/${tool.toolId}`);
-    }
     async function loadMore(existingTools) {
         const moreMatches = [];
         const cursor = cursorObs() || (await newCursor());
@@ -77,7 +53,7 @@ function ToolList() {
         }
         return moreMatches;
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-fluid", children: [(0, jsx_runtime_1.jsx)(input_1.Input, { value: searchTextObs, className: "form-control mt-3", style: { marginBottom: "10px" }, placeholder: "Search or create new tool", autoFocus: !!(0, globals_1.isDesktop)(), onKeyUp: (evt) => searchSubmit(evt) }), (0, jsx_runtime_1.jsx)("div", { className: "peers-list-container", children: (0, jsx_runtime_1.jsx)(lazy_list_1.LazyList, { loadMore: loadMore, scrollThreshold: 0.6, renderItems: (tools) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-fluid", children: [(0, jsx_runtime_1.jsx)(input_1.Input, { value: searchTextObs, className: "form-control mt-3", style: { marginBottom: "10px" }, placeholder: "Search tools", autoFocus: !!(0, globals_1.isDesktop)() }), (0, jsx_runtime_1.jsx)("div", { className: "peers-list-container", children: (0, jsx_runtime_1.jsx)(lazy_list_1.LazyList, { loadMore: loadMore, scrollThreshold: 0.6, renderItems: (tools) => {
                         return tools.map((tool) => {
                             let markdownContent = `${tool.usageDescription}\n\n---\n\n${tool.detailedDescription ?? ""}`;
                             const maxLen = 500;

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

@@ -1,4 +1,6 @@
-import { type IDoc, type ITool } from "@peers-app/peers-sdk";
-export declare const ToolSchema: (props: {
-    tool: IDoc<ITool>;
+import type { ITool, IToolCatalogEntry } from "@peers-app/peers-sdk";
+/** Read-only contract field tables, plus persisted assistant runner configuration. */
+export declare const ToolSchema: ({ tool, entry }: {
+    tool: ITool;
+    entry?: IToolCatalogEntry;
 }) => import("react/jsx-runtime").JSX.Element;

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

@@ -2,18 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToolSchema = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const peers_sdk_1 = require("@peers-app/peers-sdk");
-const io_schema_1 = require("../../components/io-schema");
-const hooks_1 = require("../../hooks");
-const ToolSchema = (props) => {
-    const { tool } = props;
-    (0, hooks_1.useObservable)(tool.qs.isAssistantRunner);
-    if (tool.isAssistantRunner && !tool.configSchema) {
-        tool.configSchema = {
-            type: peers_sdk_1.IOSchemaType.complex,
-            fields: [],
-        };
-    }
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [tool.isAssistantRunner && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { style: { width: "130px", display: "inline-block" }, className: "fw-bold", children: "Config Schema:" }), (0, jsx_runtime_1.jsx)(io_schema_1.IOSchemaEditor, { ioSchema: tool.qs.configSchema, simpleValueName: "input" }), (0, jsx_runtime_1.jsx)("br", {})] })), (0, jsx_runtime_1.jsx)("span", { style: { width: "130px", display: "inline-block" }, className: "fw-bold", children: "Input Schema:" }), (0, jsx_runtime_1.jsx)(io_schema_1.IOSchemaEditor, { ioSchema: tool.qs.inputSchema, simpleValueName: "input" }), (0, jsx_runtime_1.jsx)("span", { style: { width: "130px", display: "inline-block" }, className: "mt-4 fw-bold", children: "Output Schema:" }), (0, jsx_runtime_1.jsx)(io_schema_1.IOSchemaEditor, { ioSchema: tool.qs.outputSchema, simpleValueName: "output" })] }));
-};
+function FieldTable({ label, schema }) {
+    return ((0, jsx_runtime_1.jsxs)("section", { className: "mb-4", children: [(0, jsx_runtime_1.jsx)("h6", { children: label }), !schema?.fields.length ? ((0, jsx_runtime_1.jsx)("p", { children: "No fields" })) : ((0, jsx_runtime_1.jsxs)("table", { className: "table table-sm", children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { children: "Name" }), (0, jsx_runtime_1.jsx)("th", { children: "Type" }), (0, jsx_runtime_1.jsx)("th", { children: "Required" }), (0, jsx_runtime_1.jsx)("th", { children: "Description" })] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: schema.fields.map((field) => ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: field.name }), (0, jsx_runtime_1.jsxs)("td", { children: [field.type, field.isArray ? "[]" : ""] }), (0, jsx_runtime_1.jsx)("td", { children: field.optional ? "No" : "Yes" }), (0, jsx_runtime_1.jsx)("td", { children: field.description })] }, field.name))) })] }))] }));
+}
+/** Read-only contract field tables, plus persisted assistant runner configuration. */
+const ToolSchema = ({ tool, entry }) => ((0, jsx_runtime_1.jsxs)("div", { children: [tool.isAssistantRunner && (0, jsx_runtime_1.jsx)(FieldTable, { label: "Config Schema", schema: tool.configSchema }), (0, jsx_runtime_1.jsx)(FieldTable, { label: "Input Schema", schema: entry?.inputSchema ?? tool.inputSchema }), (0, jsx_runtime_1.jsx)(FieldTable, { label: "Output Schema", schema: entry?.outputSchema ?? tool.outputSchema })] }));
 exports.ToolSchema = ToolSchema;

package/dist/ui-router/ui-loader.js

@@ -167,7 +167,7 @@ const UIRouter = (props) => {
     if (!matchingRoute) {
         return undefined;
     }
-    return UILoader({ peersUIId: matchingRoute.peersUIId, props: props.props });
+    return (0, jsx_runtime_1.jsx)(UILoader, { peersUIId: matchingRoute.peersUIId, props: props.props });
 };
 exports.UIRouter = UIRouter;
 const UILoader = (args) => {
@@ -177,22 +177,9 @@ const UILoader = (args) => {
     const { props, peersUIId } = args;
     const [lastReloadTime] = (0, hooks_1.useObservable)(globals_1.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 ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("pre", { children: ["Peers UI could not be loaded ", (0, jsx_runtime_1.jsx)("br", {}), "peersUIId: ", peersUI.peersUIId, " ", (0, jsx_runtime_1.jsx)("br", {}), "Component name: ", peersUI.content?.name, " ", (0, jsx_runtime_1.jsx)("br", {}), "Props did not match schema ", (0, jsx_runtime_1.jsx)("br", {}), "Errors: ", JSON.stringify(parseResult.error, null, 2), " ", (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), "Props ", JSON.stringify((0, peers_sdk_1.toJSON)(props), null, 2), (0, jsx_runtime_1.jsx)("br", {})] }) }));
-        }
-        const Component = peersUI.content;
-        return ((0, jsx_runtime_1.jsx)(UIErrorBoundary, { peersUIId: peersUIId, componentName: peersUI.content?.name, children: (0, jsx_runtime_1.jsx)(Component, { ...args.props }) }));
-    }
-    return (0, jsx_runtime_1.jsx)(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 (0, jsx_runtime_1.jsx)(UIAsyncLoader, { peersUIId: peersUIId, props: props }, peersUIId);
 };
 const uiLoadingPromises = {};
 // Check if we're running in a React Native WebView (has injectUIBundle available)
@@ -273,6 +260,7 @@ function loadUIBundle(pkg, forceRefresh) {
 }
 const UIAsyncLoader = (props) => {
     const { peersUIId } = props;
+    const peersUI = peersUIs[peersUIId];
     const [loaded, setLoaded] = react_1.default.useState(false);
     const [loadError, setLoadError] = react_1.default.useState(null);
     const allRoutes = _window.getPeersUIRoutes();
@@ -280,7 +268,7 @@ const UIAsyncLoader = (props) => {
     (0, hooks_1.useObservable)(routes_loader_1.allPackages);
     const pkg = (0, routes_loader_1.allPackages)().find((p) => p.packageId === uiPackageId);
     (0, react_1.useEffect)(() => {
-        if (!pkg)
+        if (!pkg || peersUIs[peersUIId]?.content)
             return;
         const pkgRef = pkg;
         setLoadError(null);
@@ -290,11 +278,11 @@ const UIAsyncLoader = (props) => {
             console.error(`Failed to load UI bundle for package ${pkgRef.name}:`, error);
             setLoadError(error);
         });
-    }, [pkg?.packageId, pkg?.name, pkg]);
-    if (!pkg) {
+    }, [peersUIId, pkg?.packageId, pkg?.name, pkg]);
+    if (!peersUI?.content && !pkg) {
         return (0, jsx_runtime_1.jsxs)("div", { children: ["Could not find package that owns peersUIId ", peersUIId] });
     }
-    if (loadError) {
+    if (!peersUI?.content && loadError) {
         return ((0, jsx_runtime_1.jsxs)("div", { style: {
                 padding: "20px",
                 border: "2px solid #ff6b6b",
@@ -303,7 +291,7 @@ const UIAsyncLoader = (props) => {
                 color: "#721c24",
                 fontFamily: "monospace",
                 margin: "10px 0",
-            }, children: [(0, jsx_runtime_1.jsx)("h3", { style: { color: "#c53030", marginTop: 0 }, children: "Bundle Loading Error" }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "15px" }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Peers UI ID:" }), " ", peersUIId] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Package:" }), " ", pkg.name] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Package ID:" }), " ", pkg.packageId] })] }), (0, jsx_runtime_1.jsxs)("details", { style: { marginBottom: "15px" }, children: [(0, jsx_runtime_1.jsx)("summary", { style: { cursor: "pointer", fontWeight: "bold", marginBottom: "10px" }, children: "Error Details" }), (0, jsx_runtime_1.jsxs)("div", { style: {
+            }, children: [(0, jsx_runtime_1.jsx)("h3", { style: { color: "#c53030", marginTop: 0 }, children: "Bundle Loading Error" }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "15px" }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Peers UI ID:" }), " ", peersUIId] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Package:" }), " ", pkg?.name] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Package ID:" }), " ", pkg?.packageId] })] }), (0, jsx_runtime_1.jsxs)("details", { style: { marginBottom: "15px" }, children: [(0, jsx_runtime_1.jsx)("summary", { style: { cursor: "pointer", fontWeight: "bold", marginBottom: "10px" }, children: "Error Details" }), (0, jsx_runtime_1.jsxs)("div", { style: {
                                 backgroundColor: "#fed7d7",
                                 padding: "10px",
                                 borderRadius: "4px",
@@ -328,16 +316,15 @@ const UIAsyncLoader = (props) => {
                         cursor: "pointer",
                     }, children: "Retry Loading" })] }));
     }
-    if (!loaded) {
+    if (!peersUI?.content && !loaded) {
         return (0, jsx_runtime_1.jsx)(loading_indicator_1.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;
-            return ((0, jsx_runtime_1.jsx)(UIErrorBoundary, { peersUIId: peersUIId, packageName: pkg.name, componentName: peersUI.content?.name, children: (0, jsx_runtime_1.jsx)(Component, { ..._props }) }));
+            return ((0, jsx_runtime_1.jsx)(UIErrorBoundary, { peersUIId: peersUIId, packageName: pkg?.name, componentName: peersUI.content?.name, children: (0, jsx_runtime_1.jsx)(Component, { ..._props }) }));
         }
         catch (parseError) {
             return ((0, jsx_runtime_1.jsxs)("div", { style: {
@@ -348,7 +335,7 @@ const UIAsyncLoader = (props) => {
                     color: "#721c24",
                     fontFamily: "monospace",
                     margin: "10px 0",
-                }, children: [(0, jsx_runtime_1.jsx)("h3", { style: { color: "#c53030", marginTop: 0 }, children: "Props Validation Error" }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "15px" }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Peers UI ID:" }), " ", peersUIId] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Package:" }), " ", pkg.name] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Component:" }), " ", peersUI.content?.name] })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                }, children: [(0, jsx_runtime_1.jsx)("h3", { style: { color: "#c53030", marginTop: 0 }, children: "Props Validation Error" }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "15px" }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Peers UI ID:" }), " ", peersUIId] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Package:" }), " ", pkg?.name] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Component:" }), " ", peersUI.content?.name] })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
                             backgroundColor: "#fed7d7",
                             padding: "10px",
                             borderRadius: "4px",

package/dist/ui-router/ui-loader.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui-router/ui-loader.test.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+const react_2 = require("react");
+const mockPackages = [];
+const mockGetFileContents = jest.fn();
+jest.mock("@peers-app/peers-sdk", () => ({
+    debounceByArgs: (fn) => fn,
+    getUserContext: () => new Promise(() => { }),
+    packagePrefsVar: () => Object.assign(() => ({}), { loadingPromise: Promise.resolve() }),
+    PackageVersions: () => ({ get: async () => ({ uiBundleFileId: "bundle" }) }),
+    rpcServerCalls: { getFileContents: (...args) => mockGetFileContents(...args) },
+}));
+jest.mock("../globals", () => ({ mainContentPath: () => "", packageReloaded: () => 0 }));
+jest.mock("../hooks", () => ({ useObservable: (value) => [value()] }));
+jest.mock("../ui-defaults", () => ({}));
+jest.mock("../components/loading-indicator", () => ({
+    LoadingIndicator: () => (0, jsx_runtime_1.jsx)("p", { children: "Loading bundle" }),
+}));
+jest.mock("./routes-loader", () => ({ allPackages: () => mockPackages }));
+const ui_loader_1 = require("./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();
+    let mounts = 0;
+    let unmounts = 0;
+    function Content({ caller }) {
+        const [draft, setDraft] = (0, react_2.useState)("");
+        const currentPath = (0, react_2.useSyncExternalStore)((listener) => {
+            listeners.add(listener);
+            return () => {
+                listeners.delete(listener);
+            };
+        }, () => path);
+        (0, react_2.useEffect)(() => {
+            mounts++;
+            return () => {
+                unmounts++;
+            };
+        }, []);
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", { children: caller }), (0, jsx_runtime_1.jsx)("p", { children: currentPath }), (0, jsx_runtime_1.jsx)("input", { "aria-label": "Draft", value: draft, onChange: (event) => setDraft(event.target.value) })] }));
+    }
+    const schema = { parse: (value) => value, safeParse: () => ({ success: true }) };
+    const ui = { peersUIId, content: Content, propsSchema: schema };
+    const routeWindow = window;
+    routeWindow.registerPeersUIRoute({ packageId, peersUIId, path: base });
+    mockPackages.length = 0;
+    mockGetFileContents.mockReset();
+    let releaseBundle;
+    if (preloaded) {
+        await (0, ui_loader_1.registerInternalPeersUI)({ component: Content, peersUIId, propsSchema: schema });
+    }
+    else {
+        mockPackages.push({ packageId, name: "Test package", activePackageVersionId: "version" });
+        routeWindow.testUI = ui;
+        mockGetFileContents.mockImplementation(() => new Promise((resolve) => {
+            releaseBundle = resolve;
+        }));
+    }
+    const view = (0, react_1.render)((0, jsx_runtime_1.jsx)(ui_loader_1.UIRouter, { path: path, props: { caller: "Caller props" } }));
+    if (!preloaded) {
+        expect(await react_1.screen.findByText("Loading bundle")).toBeInTheDocument();
+        await (0, react_1.act)(async () => {
+            releaseBundle("exportUIs({uis: [window.testUI]});");
+        });
+    }
+    expect(await react_1.screen.findByText("Caller props")).toBeInTheDocument();
+    react_1.fireEvent.change(react_1.screen.getByLabelText("Draft"), { target: { value: "Unsaved edits" } });
+    await (0, react_1.act)(async () => {
+        path = `${base}?jobId=second`;
+        for (const listener of listeners)
+            listener();
+        view.rerender((0, jsx_runtime_1.jsx)(ui_loader_1.UIRouter, { path: path, props: { caller: "Caller props" } }));
+    });
+    expect(react_1.screen.getByLabelText("Draft")).toHaveValue("Unsaved edits");
+    expect(react_1.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peers-app/peers-ui",
-  "version": "0.25.20",
+  "version": "0.26.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/peers-app/peers-ui.git"
@@ -30,7 +30,7 @@
     "lint:fix": "biome check --write ."
   },
   "peerDependencies": {
-    "@peers-app/peers-sdk": "^0.25.20",
+    "@peers-app/peers-sdk": "^0.26.0",
     "bootstrap": "^5.3.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
@@ -41,7 +41,7 @@
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.27.1",
     "@biomejs/biome": "2.3.11",
-    "@peers-app/peers-sdk": "0.25.20",
+    "@peers-app/peers-sdk": "0.26.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",

package/src/mention-configs.ts

@@ -8,10 +8,11 @@ import {
   Workflows,
 } from "@peers-app/peers-sdk";
 
-// import { MENTIONS_MAX_RESULTS } from "../client/components/markdown-editor/mentions-plugin";
+import { listWorkflowMentionTools } from "./screens/tools/tool-catalog-ipc";
 
 const MENTIONS_MAX_RESULTS = 10;
 
+/** Editor and renderer behavior for one persisted mention kind. */
 export interface IMentionConfig {
   iconClass: string;
   styleClass?: string;
@@ -22,15 +23,13 @@ export interface IMentionConfig {
   onClick?: (data: IMentionData) => void;
 }
 
+/** Discover workflow-invocable tools while keeping historical mention IDs readable. */
 export const toolMentionConfig: IMentionConfig = {
   kind: "tool",
   iconClass: "bi bi-tools",
   styleClass: "mention-tool",
   query: async (search: string) => {
-    const results = await Tools().list(
-      { name: { $matchWords: search } },
-      { pageSize: MENTIONS_MAX_RESULTS },
-    );
+    const results = await listWorkflowMentionTools(search, MENTIONS_MAX_RESULTS);
     return results.map((p) => ({
       kind: "tool",
       id: p.toolId,
@@ -50,6 +49,7 @@ export const toolMentionConfig: IMentionConfig = {
       ),
 };
 
+/** Discover users and resolve persisted user mentions. */
 export const userMentionConfig: IMentionConfig = {
   kind: "user",
   iconClass: "bi-person-fill",
@@ -78,6 +78,7 @@ export const userMentionConfig: IMentionConfig = {
       ),
 };
 
+/** Discover assistants and resolve persisted assistant mentions. */
 export const assistantMentionConfig: IMentionConfig = {
   kind: "assistant",
   iconClass: "bi bi-person-fill-gear",
@@ -106,6 +107,7 @@ export const assistantMentionConfig: IMentionConfig = {
       ),
 };
 
+/** Discover workflows and resolve persisted workflow mentions. */
 export const workflowMentionConfig: IMentionConfig = {
   kind: "workflow",
   iconClass: "bi bi-database-fill-gear",
@@ -134,6 +136,7 @@ export const workflowMentionConfig: IMentionConfig = {
       ),
 };
 
+/** Discover data types and navigate to their definitions. */
 export const valueTypeMentionConfig: IMentionConfig = {
   kind: "type",
   iconClass: "bi bi-code-square",
@@ -172,6 +175,7 @@ export const valueTypeMentionConfig: IMentionConfig = {
 //   }))),
 // picture = <i className="bi bi-list-task pe-1" />;
 
+/** Shared mention definitions used by editors and rendered messages. */
 export const mentionConfigs = [
   toolMentionConfig,
   userMentionConfig,

package/src/screens/assistants/assistant-config.test.tsx

@@ -0,0 +1,54 @@
+import { type IAssistant, type IDoc, observable } from "@peers-app/peers-sdk";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { AssistantConfig } from "./assistant-config";
+
+const mockRunners = [
+  { toolId: "selected", name: "Retired", catalogState: "quarantined" },
+  { toolId: "hidden", name: "Other unavailable", catalogState: "quarantined" },
+  { toolId: "available", name: "Available" },
+];
+const mockCatalog = jest.fn();
+jest.mock("@peers-app/peers-sdk", () => ({
+  ...jest.requireActual("@peers-app/peers-sdk"),
+  Tools: () => ({
+    get: async () => mockRunners[0],
+    list: async () => mockRunners,
+  }),
+}));
+jest.mock("../tools/tool-catalog-ipc", () => ({
+  getToolCatalogConsumer: () => mockCatalog(),
+}));
+jest.mock("../../components/io-schema-values", () => ({ IOSchemaValues: () => null }));
+
+test.each([
+  "catalog",
+  "browser fallback",
+])("runner selection retains a disabled current runner in %s", async (mode) => {
+  mockCatalog.mockReset();
+  if (mode === "catalog")
+    mockCatalog.mockResolvedValue({
+      tools: {
+        getTool: async ({ toolIdOrName }: { toolIdOrName: string }) => ({
+          tool: { workflowInvocable: toolIdOrName === "available" },
+        }),
+      },
+    });
+  else mockCatalog.mockRejectedValue(new Error("No host transport"));
+  const selected = observable("selected");
+  const assistant = {
+    assistantRunnerToolId: "selected",
+    qs: { assistantRunnerToolId: selected },
+  } as unknown as IDoc<IAssistant>;
+  const { container } = render(<AssistantConfig assistant={assistant} />);
+  await screen.findByRole("button", { name: "Available" });
+  const retired = container.querySelector<HTMLButtonElement>(".dropdown-menu button:disabled");
+  expect(retired).toHaveTextContent("Retired (unavailable)");
+  expect(container.querySelector(".dropdown-toggle")).toHaveTextContent("Retired (unavailable)");
+  expect(screen.queryByText("Other unavailable")).not.toBeInTheDocument();
+  if (!retired) throw new Error("Missing unavailable runner option");
+  fireEvent.click(retired);
+  expect(selected()).toBe("selected");
+  fireEvent.click(screen.getByRole("button", { name: "Available" }));
+  await waitFor(() => expect(selected()).toBe("available"));
+  expect(screen.queryByText("Retired (unavailable)")).not.toBeInTheDocument();
+});

package/src/screens/assistants/assistant-config.tsx

@@ -8,7 +8,9 @@ import {
 import { IOSchemaValues } from "../../components/io-schema-values";
 import { LoadingIndicator } from "../../components/loading-indicator";
 import { useObservable, usePromise } from "../../hooks";
+import { getToolCatalogConsumer } from "../tools/tool-catalog-ipc";
 
+/** Edit assistant runner selection and its configuration. */
 export const AssistantConfig = (props: { assistant: IDoc<IAssistant> }) => {
   const { assistant } = props;
 
@@ -57,7 +59,25 @@ const AssistantRunnersDropdown = (props: { selectedToolId: Observable<string> })
 
   const modelTools = usePromise(async () => {
     const modelTools = await Tools().list({ isAssistantRunner: true });
-    return modelTools;
+    let availableIds: Set<string>;
+    try {
+      const catalog = await getToolCatalogConsumer();
+      const entries = await Promise.all(
+        modelTools.map((tool) =>
+          catalog.tools.getTool({ toolIdOrName: tool.toolId, runnableOnly: true }),
+        ),
+      );
+      availableIds = new Set(
+        modelTools
+          .filter((_tool, index) => entries[index].tool?.workflowInvocable)
+          .map((tool) => tool.toolId),
+      );
+    } catch {
+      availableIds = new Set(
+        modelTools.filter((tool) => tool.catalogState !== "quarantined").map((tool) => tool.toolId),
+      );
+    }
+    return modelTools.map((tool) => ({ tool, available: availableIds.has(tool.toolId) }));
   });
 
   if (!modelTools) {
@@ -72,18 +92,29 @@ const AssistantRunnersDropdown = (props: { selectedToolId: Observable<string> })
         data-bs-toggle="dropdown"
         aria-expanded="false"
       >
-        {modelTools.find((tool) => tool.toolId === selectedToolId)?.name ?? "Select Tool"}
+        {modelTools.find(({ tool }) => tool.toolId === selectedToolId)?.tool.name ?? "Select Tool"}
+        {modelTools.some(({ tool, available }) => tool.toolId === selectedToolId && !available)
+          ? " (unavailable)"
+          : ""}
       </button>
       <ul className="dropdown-menu">
-        {modelTools.map((tool) => {
-          return (
-            <li key={tool.toolId} onClick={() => props.selectedToolId(tool.toolId)}>
-              {/* <button className="dropdown-item" type="button">Action</button> */}
-              {/* <MarkdownWithMentions content={tool.name} /> */}
-              <span className="dropdown-item">{tool.name}</span>
-            </li>
-          );
-        })}
+        {modelTools
+          .filter(({ tool, available }) => available || tool.toolId === selectedToolId)
+          .map(({ tool, available }) => {
+            return (
+              <li key={tool.toolId}>
+                <button
+                  className="dropdown-item"
+                  type="button"
+                  disabled={!available}
+                  onClick={() => props.selectedToolId(tool.toolId)}
+                >
+                  {tool.name}
+                  {available ? "" : " (unavailable)"}
+                </button>
+              </li>
+            );
+          })}
       </ul>
     </div>
   );

package/src/screens/settings/settings-page.test.tsx

@@ -0,0 +1,24 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { SettingsPage } from "./settings-page";
+
+jest.mock("../../components/tooltip", () => ({ Tooltip: () => null }));
+jest.mock("../../hooks", () => ({ usePromise: () => undefined, useObservable: () => [false] }));
+jest.mock("../../components/tabs", () => ({
+  Tabs: ({ tabs }: any) => (
+    <>
+      {tabs.map((tab: any) => (
+        <div key={tab.name}>{tab.content}</div>
+      ))}
+    </>
+  ),
+}));
+jest.mock("../../root-layout/layout-picker", () => ({ LayoutPicker: () => <div>Layout</div> }));
+jest.mock("./color-mode-dropdown", () => ({ ColorModeDropdown: () => <div>Theme</div> }));
+jest.mock("../../globals", () => ({ me: {}, isDesktop: () => false }));
+
+test("Settings renders advanced controls without the retired Tasks importer", () => {
+  const html = renderToStaticMarkup(<SettingsPage />);
+  expect(html).toContain("Advanced Settings");
+  expect(html).not.toContain("Import Old Peers");
+  expect(html).not.toContain("Dry Run");
+});