@peers-app/peers-ui 0.14.0 → 0.15.0

package/src/screens/setup-user.tsx

@@ -1,25 +1,34 @@
-import { hydrateKeys, isid, newid, newKeys, openMessageWithPublicKey, peersCorePackageId, rpcServerCalls, signMessageWithSecretKey, sleep } from "@peers-app/peers-sdk";
-import React, { useState } from "react";
+import {
+  hydrateKeys,
+  isid,
+  newid,
+  newKeys,
+  openMessageWithPublicKey,
+  peersCorePackageId,
+  rpcServerCalls,
+  signMessageWithSecretKey,
+} from "@peers-app/peers-sdk";
+import { useState } from "react";
 import { useObservable } from "../hooks";
 import { colorMode } from "./settings/color-mode-dropdown";
 
-type SetupStep = 'select-user-type' | 'complete';
+type SetupStep = "select-user-type" | "complete";
 
 export const SetupUser = () => {
   const [_colorMode] = useObservable(colorMode);
-  const [step, setStep] = useState<SetupStep>('select-user-type');
+  const [step, _setStep] = useState<SetupStep>("select-user-type");
   const [isExistingUser, setIsExistingUser] = useState<boolean | null>(null);
-  const [userId, setUserId] = useState('');
-  const [secretKey, setSecretKey] = useState('');
-  const [error, setError] = useState('');
+  const [userId, setUserId] = useState("");
+  const [secretKey, setSecretKey] = useState("");
+  const [error, setError] = useState("");
   const [isValidating, setIsValidating] = useState(false);
 
-  document.getElementById('appLoadingDiv')?.remove();
+  document.getElementById("appLoadingDiv")?.remove();
 
-  const isDark = _colorMode === 'dark';
+  const isDark = _colorMode === "dark";
 
   const handleNewUser = async () => {
-    setError('');
+    setError("");
     setIsValidating(true);
 
     try {
@@ -31,29 +40,31 @@ export const SetupUser = () => {
       await rpcServerCalls.setUserIdAndSecretKey(_userId, keys.secretKey);
 
       // Auto-install peers-core for the new user
-      await rpcServerCalls.addOrUpdatePackage(peersCorePackageId, { dataContextId: _userId }).catch((err: any) => {
-        console.error('Error auto-installing peers-core:', err);
-      });
+      await rpcServerCalls
+        .addOrUpdatePackage(peersCorePackageId, { dataContextId: _userId })
+        .catch((err: unknown) => {
+          console.error("Error auto-installing peers-core:", err);
+        });
 
       // Success - reload the app
       window.location.reload();
     } catch (err) {
-      setError('Error creating new user: ' + String(err).replaceAll('\n', ' '));
+      setError(`Error creating new user: ${String(err).replaceAll("\n", " ")}`);
       setIsValidating(false);
     }
   };
 
   const handleExistingUser = async () => {
-    setError('');
+    setError("");
 
     // Validate inputs
     if (!userId.trim() || !secretKey.trim()) {
-      setError('Please enter both User ID and Secret Key');
+      setError("Please enter both User ID and Secret Key");
       return;
     }
 
     if (isid(userId) !== true) {
-      setError('Invalid User ID format');
+      setError("Invalid User ID format");
       return;
     }
 
@@ -67,7 +78,7 @@ export const SetupUser = () => {
       const msgOpened = openMessageWithPublicKey(msgSigned, keys.publicKey);
 
       if (msg !== msgOpened) {
-        throw new Error('Secret key validation failed');
+        throw new Error("Secret key validation failed");
       }
 
       // Call setUserIdAndSecretKey
@@ -76,20 +87,32 @@ export const SetupUser = () => {
       // Success - reload the app
       window.location.reload();
     } catch (err) {
-      setError('Invalid credentials: ' + String(err).replaceAll('\n', ' '));
+      setError(`Invalid credentials: ${String(err).replaceAll("\n", " ")}`);
       setIsValidating(false);
     }
   };
 
   // Step 1: Select User Type
-  if (step === 'select-user-type' && isExistingUser === null) {
+  if (step === "select-user-type" && isExistingUser === null) {
     return (
-      <div className="container-fluid d-flex align-items-start justify-content-center" style={{ paddingTop: '20px', backgroundColor: isDark ? '#212529' : '#f8f9fa' }}>
-        <div className="card shadow" style={{ maxWidth: '500px', width: '100%', backgroundColor: isDark ? '#2d3238' : '#ffffff' }}>
+      <div
+        className="container-fluid d-flex align-items-start justify-content-center"
+        style={{ paddingTop: "20px", backgroundColor: isDark ? "#212529" : "#f8f9fa" }}
+      >
+        <div
+          className="card shadow"
+          style={{
+            maxWidth: "500px",
+            width: "100%",
+            backgroundColor: isDark ? "#2d3238" : "#ffffff",
+          }}
+        >
           <div className="card-body p-4 p-md-5">
             <div className="text-center mb-4">
-              <h2 className={`fw-bold mb-2 ${isDark ? 'text-light' : ''}`}>Welcome to Peers</h2>
-              <p className={isDark ? 'text-light opacity-75' : 'text-muted'}>Let's get you set up</p>
+              <h2 className={`fw-bold mb-2 ${isDark ? "text-light" : ""}`}>Welcome to Peers</h2>
+              <p className={isDark ? "text-light opacity-75" : "text-muted"}>
+                Let's get you set up
+              </p>
             </div>
 
             <div className="d-grid gap-3">
@@ -107,7 +130,7 @@ export const SetupUser = () => {
               </button>
 
               <button
-                className={`btn btn-lg py-3 ${isDark ? 'btn-outline-light' : 'btn-outline-primary'}`}
+                className={`btn btn-lg py-3 ${isDark ? "btn-outline-light" : "btn-outline-primary"}`}
                 onClick={() => setIsExistingUser(true)}
               >
                 <div className="d-flex align-items-center justify-content-center">
@@ -128,13 +151,25 @@ export const SetupUser = () => {
   // Step 2: New User Confirmation
   if (isExistingUser === false) {
     return (
-      <div className="container-fluid d-flex align-items-start justify-content-center" style={{ paddingTop: '20px', backgroundColor: isDark ? '#212529' : '#f8f9fa' }}>
-        <div className="card shadow" style={{ maxWidth: '500px', width: '100%', backgroundColor: isDark ? '#2d3238' : '#ffffff' }}>
+      <div
+        className="container-fluid d-flex align-items-start justify-content-center"
+        style={{ paddingTop: "20px", backgroundColor: isDark ? "#212529" : "#f8f9fa" }}
+      >
+        <div
+          className="card shadow"
+          style={{
+            maxWidth: "500px",
+            width: "100%",
+            backgroundColor: isDark ? "#2d3238" : "#ffffff",
+          }}
+        >
           <div className="card-body p-4 p-md-5">
             <div className="text-center mb-4">
               <i className="bi bi-person-plus-fill text-primary fs-1 mb-3 d-block" />
-              <h3 className={`fw-bold mb-2 ${isDark ? 'text-light' : ''}`}>Create New Account</h3>
-              <p className={isDark ? 'text-light opacity-75' : 'text-muted'}>We'll generate secure credentials for you</p>
+              <h3 className={`fw-bold mb-2 ${isDark ? "text-light" : ""}`}>Create New Account</h3>
+              <p className={isDark ? "text-light opacity-75" : "text-muted"}>
+                We'll generate secure credentials for you
+              </p>
             </div>
 
             {error && (
@@ -181,16 +216,28 @@ export const SetupUser = () => {
   // Step 3: Existing User Sign In
   if (isExistingUser === true) {
     return (
-      <div className="container-fluid d-flex align-items-start justify-content-center" style={{ paddingTop: '20px', backgroundColor: isDark ? '#212529' : '#f8f9fa' }}>
-        <div className="card shadow" style={{ maxWidth: '500px', width: '100%', backgroundColor: isDark ? '#2d3238' : '#ffffff' }}>
+      <div
+        className="container-fluid d-flex align-items-start justify-content-center"
+        style={{ paddingTop: "20px", backgroundColor: isDark ? "#212529" : "#f8f9fa" }}
+      >
+        <div
+          className="card shadow"
+          style={{
+            maxWidth: "500px",
+            width: "100%",
+            backgroundColor: isDark ? "#2d3238" : "#ffffff",
+          }}
+        >
           <div className="card-body p-4 p-md-5">
             <div className="text-center mb-2">
-              <h3 className={`fw-bold mb-2 ${isDark ? 'text-light' : ''}`}>
+              <h3 className={`fw-bold mb-2 ${isDark ? "text-light" : ""}`}>
                 <span>Sign In</span>
                 &nbsp;&nbsp;
                 <i className="bi bi-box-arrow-in-right text-primary" />
               </h3>
-              <p className={isDark ? 'text-light opacity-75' : 'text-muted'}>Enter your existing credentials</p>
+              <p className={isDark ? "text-light opacity-75" : "text-muted"}>
+                Enter your existing credentials
+              </p>
             </div>
 
             {error && (
@@ -200,7 +247,12 @@ export const SetupUser = () => {
               </div>
             )}
 
-            <form onSubmit={(e) => { e.preventDefault(); handleExistingUser(); }}>
+            <form
+              onSubmit={(e) => {
+                e.preventDefault();
+                handleExistingUser();
+              }}
+            >
               <div className="mb-3">
                 <label htmlFor="userId" className="form-label fw-semibold">
                   User ID
@@ -213,7 +265,6 @@ export const SetupUser = () => {
                   value={userId}
                   onChange={(e) => setUserId(e.target.value)}
                   disabled={isValidating}
-                  autoFocus
                 />
               </div>
 
@@ -233,11 +284,7 @@ export const SetupUser = () => {
               </div>
 
               <div className="d-grid gap-2">
-                <button
-                  type="submit"
-                  className="btn btn-lg btn-primary"
-                  disabled={isValidating}
-                >
+                <button type="submit" className="btn btn-lg btn-primary" disabled={isValidating}>
                   {isValidating ? (
                     <>
                       <span className="spinner-border spinner-border-sm me-2" />
@@ -269,4 +316,4 @@ export const SetupUser = () => {
   }
 
   return null;
-}
+};

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

@@ -1,35 +1,30 @@
-import { computed, IDoc, ITool } from "@peers-app/peers-sdk";
-import React from "react";
+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() ?? '';
+  let code = tool.qs.code() ?? "";
   const toolCodeObs = computed({
     read: () => {
-      if (!code.startsWith('```')) {
-        code = '```javascript\n' + code + '\n```';
+      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```', '');
+      if (code.startsWith("```javascript\n")) {
+        code = code.replace("```javascript\n", "");
+        code = code.replace("\n```", "");
       }
       tool.qs.code(code);
-    }
-  })
+    },
+  });
 
   return (
     <div>
-      <MarkdownEditorInline
-        value={toolCodeObs as any}
-        hideToolbar={true}
-      />
+      <MarkdownEditorInline value={toolCodeObs as Observable<string>} hideToolbar={true} />
     </div>
-  )
-}
-
+  );
+};

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

@@ -1,27 +1,29 @@
-import React from "react";
 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 { ToolInfo } from "./tool-info";
 import { ToolSchema } from "./tool-schema";
-import { usePromise } from "../../hooks";
-import { Input } from "../../components/input";
-import { updateActiveTabTitle } from "../../tabs-layout/tabs-state";
-
 
 interface IToolDetailsProps {
   toolId: string;
 }
 
 export const ToolDetails = (props: IToolDetailsProps) => {
-  const tool = usePromise(async () => {
-    const toolData = await Tools().get(props.toolId);
-    if (!toolData) return null;
-    updateActiveTabTitle(toolData.name || "Tool");
-    return Tools().initDoc(toolData);
-  }, undefined, [props.toolId]);
+  const tool = usePromise(
+    async () => {
+      const toolData = await Tools().get(props.toolId);
+      if (!toolData) return null;
+      updateActiveTabTitle(toolData.name || "Tool");
+      return Tools().initDoc(toolData);
+    },
+    undefined,
+    [props.toolId],
+  );
 
   if (tool === null) {
     return <div>Tool not found</div>;
@@ -36,10 +38,8 @@ export const ToolDetails = (props: IToolDetailsProps) => {
     tool.save();
   }
 
-
   return (
-    <div className="container-fluid p-3" style={{ overflowY: 'hidden' }}>
-
+    <div className="container-fluid p-3" style={{ overflowY: "hidden" }}>
       <div className="d-flex">
         <div>
           <h4>
@@ -50,42 +50,43 @@ export const ToolDetails = (props: IToolDetailsProps) => {
           <h4>
             <Input
               key={tool.toolId}
-              className='border border-0'
-              style={{ width: '100%', outline: 'none', backgroundColor: 'transparent' }}
+              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}
-          />
+          <SaveButton key={tool.toolId} onClick={saveChanges} doc={tool} />
         </div>
       </div>
 
-
       <Tabs
         key={tool.toolId}
         tabs={[
           {
-            name: 'Info', content:
+            name: "Info",
+            content: (
               <ScreenTabBody>
                 <ToolInfo tool={tool} />
               </ScreenTabBody>
+            ),
           },
           {
-            name: 'Schema', content:
+            name: "Schema",
+            content: (
               <ScreenTabBody>
                 <ToolSchema tool={tool} />
               </ScreenTabBody>
+            ),
           },
           {
-            name: 'Code', content:
+            name: "Code",
+            content: (
               <ScreenTabBody>
                 <ToolCode tool={tool} />
               </ScreenTabBody>
+            ),
           },
           // {
           //   name: 'Tests', content:
@@ -95,7 +96,6 @@ export const ToolDetails = (props: IToolDetailsProps) => {
           // },
         ]}
       />
-
     </div>
-  )
-}
+  );
+};

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

@@ -1,5 +1,5 @@
-import { IDoc, ITool, observable } from "@peers-app/peers-sdk";
-import React, { useEffect, useState } from "react";
+import { type IDoc, type ITool, observable } from "@peers-app/peers-sdk";
+import { useEffect, useState } from "react";
 import { Checkbox } from "../../components/checkbox";
 import { Input } from "../../components/input";
 import { MarkdownEditorInline } from "../../components/markdown-editor/editor-inline";
@@ -8,14 +8,17 @@ export const ToolInfo = (props: { tool: IDoc<ITool> }) => {
   const { tool } = props;
 
   const [markdownUsageObs] = useState(() => observable(tool.usageDescription));
-  const [markdownDetailedObs] = useState(() => observable(tool.detailedDescription || ''));
+  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, '');
+      tool.name = tool.qs
+        .name()
+        .replaceAll(/\s/g, "_")
+        .replaceAll(/[^a-zA-Z0-9_-]/g, "");
     });
     const sub3 = markdownDetailedObs.subscribe(() => {
       tool.detailedDescription = markdownDetailedObs();
@@ -24,9 +27,8 @@ export const ToolInfo = (props: { tool: IDoc<ITool> }) => {
       sub.dispose();
       sub2.dispose();
       sub3.dispose();
-    }
-  }, [tool]);
-
+    };
+  }, [tool, markdownDetailedObs, markdownUsageObs]);
 
   return (
     <div>
@@ -40,21 +42,14 @@ export const ToolInfo = (props: { tool: IDoc<ITool> }) => {
 
       <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}
-        />
+        <Checkbox className="form-check-input mt-2" checked={tool.qs.isAssistantRunner} />
       </div>
 
       <small>Usage Description:</small>
-      <MarkdownEditorInline
-        value={markdownUsageObs}
-      />
+      <MarkdownEditorInline value={markdownUsageObs} />
       <br />
       <small>Detailed Description:</small>
-      <MarkdownEditorInline
-        value={markdownDetailedObs}
-      />
+      <MarkdownEditorInline value={markdownDetailedObs} />
     </div>
-  )
-}
+  );
+};

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

@@ -1,15 +1,23 @@
-import { FieldType, ICursorIterable, IOSchemaType, ITool, newid, observable, Tools } from "@peers-app/peers-sdk";
-import React, { 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 { useObservable } from '../../hooks';
+import {
+  FieldType,
+  type ICursorIterable,
+  IOSchemaType,
+  type ITool,
+  newid,
+  observable,
+  Tools,
+} from "@peers-app/peers-sdk";
+import type React from "react";
+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 { useObservable } from "../../hooks";
 
 export function ToolList() {
-
-  const [searchTextObs] = useState(() => observable(''));
+  const [searchTextObs] = useState(() => observable(""));
   const [searchText] = useObservable(searchTextObs);
 
   const [cursorObs] = useState(() => observable<ICursorIterable<ITool> | undefined>());
@@ -19,9 +27,12 @@ export function ToolList() {
     let cursor: ICursorIterable<ITool>;
     const _searchText = searchText.trim();
     if (_searchText) {
-      cursor = await Tools().cursor({ name: { $matchWords: _searchText } }, { sortBy: ['-toolId'] });
+      cursor = await Tools().cursor(
+        { name: { $matchWords: _searchText } },
+        { sortBy: ["-toolId"] },
+      );
     } else {
-      cursor = await Tools().cursor(undefined, { sortBy: ['-toolId'] });
+      cursor = await Tools().cursor(undefined, { sortBy: ["-toolId"] });
     }
 
     cursorObs(cursor);
@@ -35,28 +46,37 @@ export function ToolList() {
       cursorId(newid());
     });
     return () => sub.dispose();
-  }, [searchText]);
+  }, [cursorId, cursorObs, searchTextObs.subscribe]);
 
   async function searchSubmit(evt: React.KeyboardEvent<HTMLInputElement>) {
     if (evt.key !== "Enter") return;
     if (!searchText.trim()) return;
-    let toolName = searchText.trim().replace(/\s+/g, '_').replaceAll(/[^a-zA-Z0-9_]/g, '');
+    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: '' }] },      
+      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[]> {
-    let moreMatches: ITool[] = [];
-    let cursor = cursorObs() || await newCursor();
+    const moreMatches: ITool[] = [];
+    const cursor = cursorObs() || (await newCursor());
     for await (const tool of cursor) {
-      if (existingTools.find(w => w.toolId === tool.toolId)) continue;
+      if (existingTools.find((w) => w.toolId === tool.toolId)) continue;
       moreMatches.push(tool);
       if (searchText.length && moreMatches.length > 5) break;
       if (moreMatches.length >= 50) break;
@@ -68,41 +88,39 @@ export function ToolList() {
   }
 
   return (
-    <div className='container-fluid'>
-      <Input value={searchTextObs} className="form-control mt-3" style={{ marginBottom: "10px" }} placeholder="Search or create new tool"
-        autoFocus={isDesktop() ? true : false}
-        onKeyUp={evt => searchSubmit(evt)}
+    <div className="container-fluid">
+      <Input
+        value={searchTextObs}
+        className="form-control mt-3"
+        style={{ marginBottom: "10px" }}
+        placeholder="Search or create new tool"
+        autoFocus={!!isDesktop()}
+        onKeyUp={(evt) => searchSubmit(evt)}
       />
 
       <div className="peers-list-container">
         <LazyList
           key={cursorId()}
           loadMore={loadMore}
-          scrollThreshold={0.6}          
+          scrollThreshold={0.6}
           renderItems={(tools) => {
-            return tools.map(tool => {
-              let markdownContent = (tool.usageDescription + '\n\n---\n\n' + (tool.detailedDescription ?? ''));
+            return tools.map((tool) => {
+              let markdownContent = `${tool.usageDescription}\n\n---\n\n${tool.detailedDescription ?? ""}`;
               const maxLen = 500;
               if (markdownContent.length > maxLen) {
-                markdownContent = markdownContent.substring(0, maxLen) + '...';
+                markdownContent = `${markdownContent.substring(0, maxLen)}...`;
               }
-              markdownContent = markdownContent.replace(/\n\n---\n\n$/, '');
+              markdownContent = markdownContent.replace(/\n\n---\n\n$/, "");
               return (
-                <div
-                  key={tool.toolId}
-                  className='container-fluid pb-4'
-                >
+                <div key={tool.toolId} className="container-fluid pb-4">
                   <i className="bi bi-tools"></i>&nbsp;
-                  <a href={`#tools/${tool.toolId}`}>
-                    {tool.name}
-                  </a>
-                  <div style={{ paddingLeft: '20px' }}>
+                  <a href={`#tools/${tool.toolId}`}>{tool.name}</a>
+                  <div style={{ paddingLeft: "20px" }}>
                     <MarkdownWithMentions content={markdownContent} />
                   </div>
-
                 </div>
-              )
-            })
+              );
+            });
           }}
           loadingIndicator={
             <div className="d-flex justify-content-center" style={{ height: 200 }}>