@peers-app/peers-ui 0.25.21 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peers-app/peers-ui",
-  "version": "0.25.21",
+  "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.21",
+    "@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.21",
+    "@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");
+});