@peers-app/peers-ui 0.25.20 → 0.26.0

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

@@ -8,7 +8,7 @@ import {
   Users,
 } from "@peers-app/peers-sdk";
 import type React from "react";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { Input } from "../../components/input";
 import { Tabs } from "../../components/tabs";
 import { Tooltip } from "../../components/tooltip";
@@ -20,9 +20,6 @@ import { IDENTITY_ACCOUNT_PATH, IDENTITY_PAIR_PATH } from "../identity/identity-
 import { getNetworkControlConsumer } from "../network-viewer/network-viewer-ipc";
 import { ColorModeDropdown } from "./color-mode-dropdown";
 
-/** Electron file picker attaches a filesystem path on `File`. */
-type FileWithElectronPath = File & { path?: string };
-
 type PeersHostWindow = Window & {
   electronAPI?: unknown;
   ReactNativeWebView?: unknown;
@@ -106,7 +103,6 @@ const AdvancedSettingsTab: React.FC = () => {
       <ResetDeviceSyncInfos />
       <DeleteLocalDatabase />
       <CleanupOldDataDir />
-      <ImportOldPeersData />
       <ResetChangeTracking />
     </>
   );
@@ -403,256 +399,6 @@ const ResetChangeTracking: React.FC = () => {
   );
 };
 
-const IMPORT_TOOL_ID = "00mh0wlipkdbeaw8imptsk001";
-
-interface IDryRunResult {
-  totalRecords: number;
-  totalTasks: number;
-  totalLogEntries: number;
-  groups: {
-    groupId: string;
-    groupName: string;
-    context: "personal" | "home";
-    taskCount: number;
-    activeCount: number;
-    doneCount: number;
-    rootTaskCount: number;
-    subtaskCount: number;
-    logEntryCount: number;
-  }[];
-  statusMapping: {
-    inProgressToDone: number;
-    inProgressKeep: number;
-    queuedToDone: number;
-    queuedKeep: number;
-    backlogToDone: number;
-    backlogKeep: number;
-    noStatusToDone: number;
-    noStatusToBacklog: number;
-  };
-  userMapping: {
-    mark: number;
-    blair: number;
-    other: number;
-  };
-  warnings: string[];
-}
-
-const ImportOldPeersData: React.FC = () => {
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const [filePath, setFilePath] = useState<string>("");
-  const [_fileName, setFileName] = useState<string>("");
-  const [loading, setLoading] = useState(false);
-  const [result, setResult] = useState<IDryRunResult | null>(null);
-  const [error, setError] = useState<string>("");
-
-  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (!file) return;
-    // Electron exposes .path on File objects
-    const path = (file as FileWithElectronPath).path;
-    if (path) {
-      setFilePath(path);
-      setFileName(file.name);
-    } else {
-      setFileName(file.name);
-      setFilePath("");
-      setError("File path not available. This feature requires the Electron desktop app.");
-    }
-    setResult(null);
-    setError("");
-  };
-
-  const handleDryRun = async () => {
-    if (!filePath) return;
-    setLoading(true);
-    setError("");
-    setResult(null);
-    try {
-      const response = await rpcServerCalls.runTool(IMPORT_TOOL_ID, {
-        filePath,
-        dryRun: true,
-      });
-      if (response?.result) {
-        setResult(response.result);
-      } else {
-        setError("Unexpected response from import tool");
-      }
-    } catch (err) {
-      setError((err as Error).message || "Failed to run dry run");
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <div className="mt-4 pt-3 border-top">
-      <h6 className="mb-2">Import Old Peers Data</h6>
-      <small className="text-muted d-block mb-2">
-        Import tasks and log entries from an old peers JSON export file.
-      </small>
-
-      <div className="d-flex align-items-center gap-2 mb-2">
-        <input
-          ref={fileInputRef}
-          type="file"
-          accept=".json"
-          className="form-control form-control-sm"
-          style={{ maxWidth: 350 }}
-          onChange={handleFileSelect}
-        />
-        <button
-          className="btn btn-outline-primary btn-sm"
-          onClick={handleDryRun}
-          disabled={!filePath || loading}
-        >
-          {loading ? "Analyzing..." : "Dry Run"}
-        </button>
-      </div>
-
-      {error && <div className="alert alert-danger py-1 px-2 small mt-2">{error}</div>}
-
-      {result && <DryRunResults result={result} />}
-    </div>
-  );
-};
-
-const DryRunResults: React.FC<{ result: IDryRunResult }> = ({ result }) => {
-  const sm = result.statusMapping;
-  const um = result.userMapping;
-
-  return (
-    <div className="mt-2">
-      <div className="alert alert-info py-2 px-3 small">
-        <strong>Summary:</strong> {result.totalTasks.toLocaleString()} tasks and{" "}
-        {result.totalLogEntries.toLocaleString()} log entries across {result.groups.length} groups (
-        {result.totalRecords.toLocaleString()} total records in file)
-      </div>
-
-      {result.warnings.length > 0 && (
-        <div className="alert alert-warning py-2 px-3 small">
-          <strong>Warnings:</strong>
-          <ul className="mb-0 ps-3">
-            {result.warnings.map((w, i) => (
-              <li key={i}>{w}</li>
-            ))}
-          </ul>
-        </div>
-      )}
-
-      <details className="mb-2">
-        <summary className="small fw-bold" style={{ cursor: "pointer" }}>
-          Status Mapping
-        </summary>
-        <table className="table table-sm small mt-1">
-          <thead>
-            <tr>
-              <th>Mapping</th>
-              <th className="text-end">Count</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>In-Progress → Done</td>
-              <td className="text-end">{sm.inProgressToDone.toLocaleString()}</td>
-            </tr>
-            <tr>
-              <td>In-Progress → In-Progress</td>
-              <td className="text-end">{sm.inProgressKeep.toLocaleString()}</td>
-            </tr>
-            <tr>
-              <td>Queued → Done</td>
-              <td className="text-end">{sm.queuedToDone.toLocaleString()}</td>
-            </tr>
-            <tr>
-              <td>Queued → Queued</td>
-              <td className="text-end">{sm.queuedKeep.toLocaleString()}</td>
-            </tr>
-            <tr>
-              <td>Backlog → Done</td>
-              <td className="text-end">{sm.backlogToDone.toLocaleString()}</td>
-            </tr>
-            <tr>
-              <td>Backlog → Backlog</td>
-              <td className="text-end">{sm.backlogKeep.toLocaleString()}</td>
-            </tr>
-            <tr>
-              <td>No status → Done</td>
-              <td className="text-end">{sm.noStatusToDone.toLocaleString()}</td>
-            </tr>
-            <tr>
-              <td>No status → Backlog</td>
-              <td className="text-end">{sm.noStatusToBacklog.toLocaleString()}</td>
-            </tr>
-          </tbody>
-        </table>
-      </details>
-
-      <details className="mb-2">
-        <summary className="small fw-bold" style={{ cursor: "pointer" }}>
-          User Mapping
-        </summary>
-        <table className="table table-sm small mt-1">
-          <thead>
-            <tr>
-              <th>User</th>
-              <th className="text-end">Tasks</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>Mark</td>
-              <td className="text-end">{um.mark.toLocaleString()}</td>
-            </tr>
-            <tr>
-              <td>Blair</td>
-              <td className="text-end">{um.blair.toLocaleString()}</td>
-            </tr>
-            <tr>
-              <td>Other → Mark</td>
-              <td className="text-end">{um.other.toLocaleString()}</td>
-            </tr>
-          </tbody>
-        </table>
-      </details>
-
-      <details open className="mb-2">
-        <summary className="small fw-bold" style={{ cursor: "pointer" }}>
-          Groups ({result.groups.length})
-        </summary>
-        <table className="table table-sm small mt-1">
-          <thead>
-            <tr>
-              <th>Group</th>
-              <th>Route</th>
-              <th className="text-end">Tasks</th>
-              <th className="text-end">Active</th>
-              <th className="text-end">Done</th>
-              <th className="text-end">Logs</th>
-            </tr>
-          </thead>
-          <tbody>
-            {result.groups.map((g) => (
-              <tr key={g.groupId}>
-                <td>{g.groupName}</td>
-                <td>
-                  <span className={`badge bg-${g.context === "home" ? "success" : "secondary"}`}>
-                    {g.context}
-                  </span>
-                </td>
-                <td className="text-end">{g.taskCount.toLocaleString()}</td>
-                <td className="text-end">{g.activeCount.toLocaleString()}</td>
-                <td className="text-end">{g.doneCount.toLocaleString()}</td>
-                <td className="text-end">{g.logEntryCount.toLocaleString()}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </details>
-    </div>
-  );
-};
-
 const LogoutSection: React.FC = () => {
   if (!isBrowserPwaHost) return null;
   return (

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

@@ -0,0 +1,46 @@
+const list = jest.fn();
+const get = jest.fn();
+const rows = jest.fn();
+let transport = true;
+jest.mock("@peers-app/peers-sdk", () => ({
+  getDefaultDataContext: async () => ({ dataContextId: "group" }),
+  getHostContractTransport: () => (transport ? {} : undefined),
+  getToolCatalogContractDefinition: () => ({}),
+  hostContractConsumer: () => ({ get: async () => ({ tools: { listTools: list, getTool: get } }) }),
+  Tools: () => ({ list: rows, get: async (toolId: string) => ({ toolId, name: "historical" }) }),
+}));
+
+import { toolMentionConfig } from "../../mention-configs";
+import { getToolDetails, listWorkflowMentionTools } from "./tool-catalog-ipc";
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  transport = true;
+});
+test("tool mentions include only workflow-invocable catalog tools", async () => {
+  list.mockResolvedValue({
+    tools: [
+      { toolId: "run", name: "Run", workflowInvocable: true },
+      { toolId: "approve", name: "Approve", workflowInvocable: false },
+    ],
+  });
+  expect(await toolMentionConfig.query("run")).toEqual([{ kind: "tool", id: "run", name: "Run" }]);
+  expect(rows).not.toHaveBeenCalled();
+  expect(await toolMentionConfig.getById("old")).toEqual({
+    kind: "tool",
+    id: "old",
+    name: "historical",
+  });
+});
+test("browser fallback omits quarantined rows and preserves historical detail", async () => {
+  transport = false;
+  rows.mockResolvedValue([
+    { toolId: "old", name: "Old" },
+    { toolId: "bad", name: "Bad", catalogState: "quarantined" },
+  ]);
+  expect(await listWorkflowMentionTools("", 10)).toEqual([{ toolId: "old", name: "Old" }]);
+  expect(await getToolDetails("old")).toEqual({
+    row: { toolId: "old", name: "historical" },
+    entry: undefined,
+  });
+});

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

@@ -0,0 +1,51 @@
+import {
+  getDefaultDataContext,
+  getHostContractTransport,
+  getToolCatalogContractDefinition,
+  hostContractConsumer,
+  type IHostContractConsumer,
+  type IToolCatalogConsumer,
+  type IToolCatalogEntry,
+  Tools,
+} from "@peers-app/peers-sdk";
+
+const consumers = new Map<string, IHostContractConsumer<IToolCatalogConsumer>>();
+/** Obtain a catalog consumer for the selected host context; PWA callers can fall back to rows. */
+export async function getToolCatalogConsumer(
+  dataContextId?: string,
+): Promise<IToolCatalogConsumer> {
+  if (!getHostContractTransport()) throw new Error("Tool catalog host transport unavailable");
+  dataContextId ??= (await getDefaultDataContext()).dataContextId;
+  let handle = consumers.get(dataContextId);
+  if (!handle) {
+    const id = dataContextId;
+    handle = hostContractConsumer<IToolCatalogConsumer>(getToolCatalogContractDefinition(), {
+      dataContextId: async () => id,
+    });
+    consumers.set(id, handle);
+  }
+  return handle.get();
+}
+/** Get live tool details, retaining historical row metadata when the host catalog is absent. */
+export async function getToolDetails(toolId: string) {
+  const row = await Tools().get(toolId);
+  if (!row) return undefined;
+  let entry: IToolCatalogEntry | undefined;
+  try {
+    entry = (await (await getToolCatalogConsumer()).tools.getTool({ toolIdOrName: toolId })).tool;
+  } catch {
+    /* Browser-only hosts retain catalog rows. */
+  }
+  return { row, entry };
+}
+/** Query workflow mention candidates; unavailable browser hosts retain non-quarantined rows. */
+export async function listWorkflowMentionTools(query: string, limit: number) {
+  try {
+    const { tools } = await (await getToolCatalogConsumer()).tools.listTools({ query, limit: 500 });
+    return tools.filter((entry) => entry.workflowInvocable).slice(0, limit);
+  } catch {
+    return (await Tools().list({ name: { $matchWords: query } }, { pageSize: 500 }))
+      .filter((row) => row.catalogState !== "quarantined")
+      .slice(0, limit);
+  }
+}

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

@@ -1,74 +1,39 @@
-import { Tools } from "@peers-app/peers-sdk";
-import { Input } from "../../components/input";
 import { LoadingIndicator } from "../../components/loading-indicator";
-import { SaveButton } from "../../components/save-button";
 import { ScreenTabBody, Tabs } from "../../components/tabs";
 import { usePromise } from "../../hooks";
 import { updateActiveTabTitle } from "../../tabs-layout/tabs-state";
-import { ToolCode } from "./tool-code";
+import { getToolDetails } from "./tool-catalog-ipc";
 import { ToolInfo } from "./tool-info";
 import { ToolSchema } from "./tool-schema";
 
-interface IToolDetailsProps {
-  toolId: string;
-}
-
-export const ToolDetails = (props: IToolDetailsProps) => {
-  const tool = usePromise(
+/** Read-only permanent tool metadata and live provider details. */
+export const ToolDetails = (props: { toolId: string }) => {
+  const details = usePromise(
     async () => {
-      const toolData = await Tools().get(props.toolId);
-      if (!toolData) return null;
-      updateActiveTabTitle(toolData.name || "Tool");
-      return Tools().initDoc(toolData);
+      const details = await getToolDetails(props.toolId);
+      if (details) updateActiveTabTitle(details.entry?.name || details.row.name || "Tool");
+      return details ?? null;
     },
     undefined,
     [props.toolId],
   );
-
-  if (tool === null) {
-    return <div>Tool not found</div>;
-  }
-
-  if (!tool) {
-    return <LoadingIndicator />;
-  }
-
-  function saveChanges() {
-    if (!tool) return;
-    tool.save();
-  }
-
+  if (details === null) return <div>Tool not found</div>;
+  if (!details) return <LoadingIndicator />;
+  const { row, entry } = details;
   return (
-    <div className="container-fluid p-3" style={{ overflowY: "hidden" }}>
-      <div className="d-flex">
-        <div>
-          <h4>
-            <i className="bi bi-tools me-2"></i>
-          </h4>
-        </div>
-        <div className="flex-grow-1">
-          <h4>
-            <Input
-              key={tool.toolId}
-              className="border border-0"
-              style={{ width: "100%", outline: "none", backgroundColor: "transparent" }}
-              value={tool.qs.name}
-            />
-          </h4>
-        </div>
-        <div>
-          <SaveButton key={tool.toolId} onClick={saveChanges} doc={tool} />
-        </div>
-      </div>
-
+    <div className="container-fluid p-3">
+      <h4>
+        <i className="bi bi-tools me-2" />
+        {entry?.name ?? row.name}
+      </h4>
       <Tabs
-        key={tool.toolId}
+        key={row.toolId}
         tabs={[
           {
             name: "Info",
             content: (
               <ScreenTabBody>
-                <ToolInfo tool={tool} />
+                <ToolInfo tool={row} entry={entry} />
               </ScreenTabBody>
             ),
           },
@@ -76,24 +41,10 @@ export const ToolDetails = (props: IToolDetailsProps) => {
             name: "Schema",
             content: (
               <ScreenTabBody>
-                <ToolSchema tool={tool} />
-              </ScreenTabBody>
-            ),
-          },
-          {
-            name: "Code",
-            content: (
-              <ScreenTabBody>
-                <ToolCode tool={tool} />
+                <ToolSchema tool={row} entry={entry} />
               </ScreenTabBody>
             ),
           },
-          // {
-          //   name: 'Tests', content:
-          //     <ScreenTabBody>
-          //       <ToolTestList toolId={tool.toolId} />
-          //     </ScreenTabBody>
-          // },
         ]}
       />
     </div>

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

@@ -1,59 +1,45 @@
-import { type IDoc, type ITool, observable } from "@peers-app/peers-sdk";
-import { useEffect, useState } from "react";
-import { AccessLevelField } from "../../components/access-level-field";
-import { Checkbox } from "../../components/checkbox";
-import { Input } from "../../components/input";
-import { MarkdownEditorInline } from "../../components/markdown-editor/editor-inline";
-
-/** Info tab for a tool, including its required access level. */
-export const ToolInfo = (props: { tool: IDoc<ITool> }) => {
-  const { tool } = props;
-
-  const [markdownUsageObs] = useState(() => observable(tool.usageDescription));
-  const [markdownDetailedObs] = useState(() => observable(tool.detailedDescription || ""));
-
-  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]);
+import { getAccessLevelLabel, type ITool, type IToolCatalogEntry } from "@peers-app/peers-sdk";
+import { MarkdownWithMentions } from "../../components/markdown-with-mentions";
 
+/** Display permanent identity and the host’s current dispatch and access projection. */
+export const ToolInfo = ({ tool, entry }: { tool: ITool; entry?: IToolCatalogEntry }) => {
+  const target = entry?.target;
+  const level = entry?.access?.accessLevel;
   return (
     <div>
-      <small>Name:</small>
-      <Input
-        value={tool.qs.name}
-        className="form-control mb-3 p-0 ps-2"
-        placeholder="Tool name"
-        title="Tool name"
-      />
-
-      <AccessLevelField value={tool.qs.accessLevel} />
-
-      <div>
-        <label className="form-label small mt-2 me-2">Is Assistant Runner:</label>
-        <Checkbox className="form-check-input mt-2" checked={tool.qs.isAssistantRunner} />
-      </div>
-
-      <small>Usage Description:</small>
-      <MarkdownEditorInline value={markdownUsageObs} />
-      <br />
-      <small>Detailed Description:</small>
-      <MarkdownEditorInline value={markdownDetailedObs} />
+      {tool.isAssistantRunner && <span className="badge bg-secondary">Assistant runner</span>}
+      <dl>
+        <dt>ID</dt>
+        <dd>{tool.toolId}</dd>
+        <dt>Aliases</dt>
+        <dd>{entry?.aliases.join(", ") ?? tool.toolId}</dd>
+        <dt>Contract</dt>
+        <dd>
+          {target
+            ? `${target.contractId}@${target.version}`
+            : tool.contractId
+              ? `${tool.contractId}@${tool.contractVersion}`
+              : "Unresolved"}
+        </dd>
+        <dt>Member</dt>
+        <dd>{target?.toolName ?? tool.toolName ?? tool.name}</dd>
+        <dt>Provider</dt>
+        <dd>{entry?.provider?.activePackageId ?? "Unavailable"}</dd>
+        <dt>Dispatch</dt>
+        <dd>
+          {entry?.availability.dispatch ?? "Host catalog unavailable"}
+          {entry?.availability.message && `: ${entry.availability.message}`}
+        </dd>
+        <dt>Live access</dt>
+        <dd>{level === undefined ? "Unavailable" : `${getAccessLevelLabel(level)} (${level})`}</dd>
+        <dt>Workflow</dt>
+        <dd>
+          {entry ? (entry.workflowInvocable ? "Available" : "Excluded or unavailable") : "Unknown"}
+          {entry?.availability.requiresWorkflowRun && "; workflow run required"}
+        </dd>
+      </dl>
+      <MarkdownWithMentions content={entry?.usageDescription ?? tool.usageDescription} />
+      {tool.detailedDescription && <MarkdownWithMentions content={tool.detailedDescription} />}
     </div>
   );
 };

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

@@ -1,21 +1,13 @@
-import {
-  FieldType,
-  type ICursorIterable,
-  IOSchemaType,
-  type ITool,
-  newid,
-  observable,
-  Tools,
-} from "@peers-app/peers-sdk";
-import type React from "react";
+import { type ICursorIterable, type ITool, newid, observable, Tools } from "@peers-app/peers-sdk";
 import { useEffect, useState } from "react";
 import { Input } from "../../components/input";
 import { LazyList } from "../../components/lazy-list";
 import { LoadingIndicator } from "../../components/loading-indicator";
 import { MarkdownWithMentions } from "../../components/markdown-with-mentions";
-import { isDesktop, mainContentPath } from "../../globals";
+import { isDesktop } from "../../globals";
 import { useObservable } from "../../hooks";
 
+/** Browse permanent tool catalog rows. */
 export function ToolList() {
   const [searchTextObs] = useState(() => observable(""));
   const [searchText] = useObservable(searchTextObs);
@@ -48,30 +40,6 @@ export function ToolList() {
     return () => sub.dispose();
   }, [cursorId, cursorObs, searchTextObs.subscribe]);
 
-  async function searchSubmit(evt: React.KeyboardEvent<HTMLInputElement>) {
-    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 Tools().initRecord({
-      name: toolName,
-      usageDescription: searchText.trim(),
-      detailedDescription: "",
-      inputSchema: {
-        type: IOSchemaType.simple,
-        fields: [{ name: "input", type: FieldType.string, description: "" }],
-      },
-      outputSchema: {
-        type: IOSchemaType.simple,
-        fields: [{ name: "output", type: FieldType.string, description: "" }],
-      },
-    });
-    await Tools().insert(tool);
-    mainContentPath(`tools/${tool.toolId}`);
-  }
-
   async function loadMore(existingTools: ITool[]): Promise<ITool[]> {
     const moreMatches: ITool[] = [];
     const cursor = cursorObs() || (await newCursor());
@@ -93,9 +61,8 @@ export function ToolList() {
         value={searchTextObs}
         className="form-control mt-3"
         style={{ marginBottom: "10px" }}
-        placeholder="Search or create new tool"
+        placeholder="Search tools"
         autoFocus={!!isDesktop()}
-        onKeyUp={(evt) => searchSubmit(evt)}
       />
 
       <div className="peers-list-container">