@peers-app/peers-ui 0.27.2 → 0.27.4

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

@@ -1,106 +0,0 @@
-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 } from "../../globals";
-import { useObservable } from "../../hooks";
-
-/** Browse permanent tool catalog rows. */
-export function ToolList() {
-  const [searchTextObs] = useState(() => observable(""));
-  const [searchText] = useObservable(searchTextObs);
-
-  const [cursorObs] = useState(() => observable<ICursorIterable<ITool> | undefined>());
-  const [cursorId] = useState(() => observable(newid()));
-
-  async function newCursor() {
-    let cursor: ICursorIterable<ITool>;
-    const _searchText = searchText.trim();
-    if (_searchText) {
-      cursor = await Tools().cursor(
-        { name: { $matchWords: _searchText } },
-        { sortBy: ["-toolId"] },
-      );
-    } else {
-      cursor = await Tools().cursor(undefined, { sortBy: ["-toolId"] });
-    }
-
-    cursorObs(cursor);
-    cursorId(newid());
-    return cursor;
-  }
-
-  useEffect(() => {
-    const sub = searchTextObs.subscribe(() => {
-      cursorObs(undefined);
-      cursorId(newid());
-    });
-    return () => sub.dispose();
-  }, [cursorId, cursorObs, searchTextObs.subscribe]);
-
-  async function loadMore(existingTools: ITool[]): Promise<ITool[]> {
-    const moreMatches: ITool[] = [];
-    const cursor = cursorObs() || (await newCursor());
-    for await (const tool of cursor) {
-      if (existingTools.find((w) => w.toolId === tool.toolId)) continue;
-      moreMatches.push(tool);
-      if (searchText.length && moreMatches.length > 5) break;
-      if (moreMatches.length >= 50) break;
-    }
-    if (moreMatches.length === 0) {
-      cursorObs(undefined);
-    }
-    return moreMatches;
-  }
-
-  return (
-    <div className="container-fluid">
-      <Input
-        value={searchTextObs}
-        className="form-control mt-3"
-        style={{ marginBottom: "10px" }}
-        placeholder="Search tools"
-        autoFocus={!!isDesktop()}
-      />
-
-      <div className="peers-list-container">
-        <LazyList
-          key={cursorId()}
-          loadMore={loadMore}
-          scrollThreshold={0.6}
-          renderItems={(tools) => {
-            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.replace(/\n\n---\n\n$/, "");
-              return (
-                <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" }}>
-                    <MarkdownWithMentions content={markdownContent} />
-                  </div>
-                </div>
-              );
-            });
-          }}
-          loadingIndicator={
-            <div className="d-flex justify-content-center" style={{ height: 200 }}>
-              <LoadingIndicator />
-            </div>
-          }
-          endOfList={
-            <div className="d-flex justify-content-center" style={{ height: 200 }}>
-              {/* <span className="h3">End of List</span> */}
-            </div>
-          }
-        />
-      </div>
-    </div>
-  );
-}

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

@@ -1,44 +0,0 @@
-import type { IOSchema, ITool, IToolCatalogEntry } from "@peers-app/peers-sdk";
-
-function FieldTable({ label, schema }: { label: string; schema?: IOSchema }) {
-  return (
-    <section className="mb-4">
-      <h6>{label}</h6>
-      {!schema?.fields.length ? (
-        <p>No fields</p>
-      ) : (
-        <table className="table table-sm">
-          <thead>
-            <tr>
-              <th>Name</th>
-              <th>Type</th>
-              <th>Required</th>
-              <th>Description</th>
-            </tr>
-          </thead>
-          <tbody>
-            {schema.fields.map((field) => (
-              <tr key={field.name}>
-                <td>{field.name}</td>
-                <td>
-                  {field.type}
-                  {field.isArray ? "[]" : ""}
-                </td>
-                <td>{field.optional ? "No" : "Yes"}</td>
-                <td>{field.description}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      )}
-    </section>
-  );
-}
-/** Read-only contract field tables, plus persisted assistant runner configuration. */
-export const ToolSchema = ({ tool, entry }: { tool: ITool; entry?: IToolCatalogEntry }) => (
-  <div>
-    {tool.isAssistantRunner && <FieldTable label="Config Schema" schema={tool.configSchema} />}
-    <FieldTable label="Input Schema" schema={entry?.inputSchema ?? tool.inputSchema} />
-    <FieldTable label="Output Schema" schema={entry?.outputSchema ?? tool.outputSchema} />
-  </div>
-);

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

@@ -1,89 +0,0 @@
-import { type ITool, Tools, ToolTests } from "@peers-app/peers-sdk";
-import { LoadingIndicator } from "../../components/loading-indicator";
-import { MarkdownEditor } from "../../components/markdown-editor/editor";
-import { SaveButton } from "../../components/save-button";
-import { useObservableState, usePromise } from "../../hooks";
-import { updateActiveTabTitle } from "../../tabs-layout/tabs-state";
-
-export const ToolTestDetails = (props: { toolTestId: string }) => {
-  const { toolTestId } = props;
-
-  const tool = useObservableState<ITool | undefined>(undefined);
-
-  const toolTest = usePromise(async () => {
-    const toolTestData = await ToolTests().get(toolTestId);
-    if (!toolTestData) return null;
-    const _tool = await Tools().get(toolTestData.toolId);
-    tool(_tool);
-    const doc = ToolTests().initDoc(toolTestData);
-    updateActiveTabTitle(_tool?.name ? `${_tool.name} Test` : "Tool Test");
-    return doc;
-  });
-
-  if (toolTest === null) {
-    return <div>ToolTest not found</div>;
-  }
-
-  if (!toolTest) {
-    return <LoadingIndicator />;
-  }
-
-  return (
-    <div className="container-fluid mt-2">
-      <div>
-        <a href={`#tools/${toolTest.toolId}`}>Tool: {tool()?.name}</a>
-        <div className="float-end">
-          <SaveButton doc={toolTest} />
-        </div>
-      </div>
-
-      <div style={{ height: "calc(100vh - 55px)", overflowY: "auto", width: "100%" }}>
-        <small>Test description:</small>
-        <div
-          style={{
-            border: "1px solid #ccc",
-            borderRadius: "5px",
-          }}
-        >
-          <MarkdownEditor value={toolTest.qs.description} hideToolbar={true} />
-        </div>
-
-        {/* <small>Input:</small>
-        <div
-          style={{
-            border: '1px solid #ccc',
-            borderRadius: '5px',
-          }}
-        >
-          <MarkdownEditor
-            value={toolTest.qs.input}
-            hideToolbar={true}
-          />
-        </div>
-        
-        <small>Output:</small>
-        <div
-          style={{
-            border: '1px solid #ccc',
-            borderRadius: '5px',
-          }}
-        >
-          <MarkdownEditor
-            value={toolTest.qs.output}
-            hideToolbar={true}
-          />
-        </div> */}
-
-        <small>Code:</small>
-        <div
-          style={{
-            border: "1px solid #ccc",
-            borderRadius: "5px",
-          }}
-        >
-          <MarkdownEditor value={toolTest.qs.code} hideToolbar={true} />
-        </div>
-      </div>
-    </div>
-  );
-};

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

@@ -1,73 +0,0 @@
-import { type IToolTest, newid, ToolTests } from "@peers-app/peers-sdk";
-import type React from "react";
-import { useEffect } from "react";
-import { Input } from "../../components/input";
-import { mainContentPath } from "../../globals";
-import { useObservableState } from "../../hooks";
-
-export const ToolTestList = (props: { toolId: string }) => {
-  const { toolId } = props;
-
-  const testsObs = useObservableState<IToolTest[]>([]);
-  const searchText = useObservableState<string>("");
-
-  useEffect(() => {
-    ToolTests()
-      .list({ toolId })
-      .then((tests) => {
-        testsObs(tests);
-      });
-  }, [toolId, testsObs]);
-
-  const tests = testsObs().filter((test) =>
-    test.description.toLowerCase().includes(searchText().toLowerCase()),
-  );
-
-  async function createTest(evt: React.KeyboardEvent<HTMLInputElement>) {
-    if (evt.key !== "Enter") return;
-    evt.preventDefault();
-    // TODO maybe use LLM call to do this?
-    const test = await ToolTests().insert({
-      toolTestId: newid(),
-      toolId,
-      description: searchText(),
-      code: "",
-      input: {},
-      output: {},
-    });
-    testsObs([...tests, test]);
-    searchText("");
-    mainContentPath(`tools/tests/${test.toolTestId}`);
-  }
-
-  return (
-    <div>
-      <Input
-        className="form-control mb-2"
-        value={searchText}
-        onKeyDown={createTest}
-        placeholder="Search or create new test"
-      />
-
-      {testsObs().length === 0 && (
-        <div className="text-center">
-          <p>No test for this tool yet</p>
-        </div>
-      )}
-
-      {testsObs().length !== 0 && tests.length === 0 && (
-        <div className="text-center">
-          <p>No matching tests found</p>
-        </div>
-      )}
-
-      {tests.map((test, iTest) => {
-        return (
-          <p key={iTest} onDoubleClick={(_e) => mainContentPath(`tools/tests/${test.toolTestId}`)}>
-            {test.description.split("\n")[0]}
-          </p>
-        );
-      })}
-    </div>
-  );
-};

package/src/screens/variables/variable-details.tsx

@@ -1,289 +0,0 @@
-import {
-  camelCaseToSpaces,
-  getIconClassName,
-  getUserContext,
-  type IDoc,
-  type IPersistentVar,
-  type Observable,
-  observable,
-  PersistentVars,
-} from "@peers-app/peers-sdk";
-import { useEffect, useState } from "react";
-import { Checkbox } from "../../components/checkbox";
-import { Input } from "../../components/input";
-import { LoadingIndicator } from "../../components/loading-indicator";
-import { MarkdownEditorInline } from "../../components/markdown-editor/editor-inline";
-import { SaveButton } from "../../components/save-button";
-import { ScreenTabBody, Tabs } from "../../components/tabs";
-import { useObservable, usePromise, useSubscription } from "../../hooks";
-import { hostShellTools } from "../../host-shell/host-shell-consumer";
-import { updateActiveTabTitle } from "../../tabs-layout/tabs-state";
-
-interface IProps {
-  persistentVarId: string;
-}
-
-/** Details screen for one persistent variable: name, value (copyable), and settings. */
-export const VariableDetails = (props: IProps) => {
-  const persistentVariable = usePromise(
-    async () => {
-      const persistentVariable = await PersistentVars().get(props.persistentVarId);
-      if (!persistentVariable) {
-        throw new Error("Variable not found");
-      }
-      updateActiveTabTitle(persistentVariable.name || "Variable");
-      return PersistentVars().initDoc(persistentVariable);
-    },
-    undefined,
-    [props.persistentVarId],
-  );
-
-  useEffect(() => {
-    if (!persistentVariable) return;
-    const sub = persistentVariable.qs.name.subscribe(() => {
-      persistentVariable.name = persistentVariable.qs
-        .name()
-        .replaceAll(/\s/g, "_")
-        .replaceAll(/[^a-zA-Z0-9_-]/g, "");
-    });
-    return () => {
-      sub.dispose();
-    };
-  }, [persistentVariable]);
-
-  if (!persistentVariable) {
-    return <LoadingIndicator />;
-  }
-
-  return (
-    <div className="container-fluid p-3">
-      <div className="d-flex">
-        <div>
-          <h4>
-            <i className={`${getIconClassName(PersistentVars())} me-2"`}></i>
-          </h4>
-        </div>
-        <div className="flex-grow-1">
-          <h4>
-            <Input
-              key={persistentVariable.persistentVarId}
-              className="border border-0"
-              style={{ width: "100%", outline: "none", backgroundColor: "transparent" }}
-              value={persistentVariable.qs.name}
-            />
-          </h4>
-        </div>
-        <div>
-          <SaveButton key={persistentVariable.persistentVarId} doc={persistentVariable} />
-        </div>
-      </div>
-
-      <Tabs
-        key={persistentVariable.persistentVarId}
-        tabs={[
-          {
-            name: "Info",
-            content: (
-              <ScreenTabBody>
-                <VariableInfo persistentVariable={persistentVariable} />
-              </ScreenTabBody>
-            ),
-          },
-        ]}
-      />
-    </div>
-  );
-};
-
-const VariableInfo = (props: { persistentVariable: IDoc<IPersistentVar> }) => {
-  const { persistentVariable: pvar } = props;
-
-  pvar.description = pvar.description || "";
-
-  return (
-    <div>
-      <small>Name:</small>
-      <Input
-        value={pvar.qs.name}
-        className="form-control mb-3 p-0 ps-2"
-        placeholder="Variable name"
-        title="Variable name"
-      />
-
-      <div className="d-flex flex-row">
-        <VariableScope pvar={pvar} />
-        <div className="ms-2">
-          <label className="form-label small mt-2 me-2">Is Secret:</label>
-          <Checkbox className="form-check-input mt-2" checked={pvar.qs.isSecret} />
-        </div>
-      </div>
-
-      <br />
-      <VariableValue pvar={pvar} />
-
-      <small className="mt-2">Description:</small>
-      <MarkdownEditorInline value={pvar.qs.description as Observable<string>} />
-    </div>
-  );
-};
-
-const VariableScope = (props: { pvar: IDoc<IPersistentVar> }) => {
-  const { pvar } = props;
-
-  const [scope, setScope] = useObservable(pvar.qs.scope);
-
-  return (
-    <div className="dropdown">
-      <button
-        className="btn btn-secondary dropdown-toggle"
-        type="button"
-        id="colorModeDropdown"
-        data-bs-toggle="dropdown"
-        aria-expanded="false"
-      >
-        Scope: {camelCaseToSpaces(scope)}
-      </button>
-      <ul className="dropdown-menu" aria-labelledby="colorModeDropdown">
-        <li>
-          <button className="dropdown-item" onClick={() => setScope("device")}>
-            Device {scope === "device" && "✓"}
-          </button>
-        </li>
-        <li>
-          <button className="dropdown-item" onClick={() => setScope("user")}>
-            User {scope === "user" && "✓"}
-          </button>
-        </li>
-        {/* <li><button className="dropdown-item" onClick={() => setScope('group')}>Group {scope === 'group' && '✓'}</button></li> */}
-      </ul>
-    </div>
-  );
-};
-
-const VariableValue = (props: { pvar: IDoc<IPersistentVar> }) => {
-  const { pvar } = props;
-
-  const [isSecret] = useObservable(pvar.qs.isSecret);
-  const scalarValue = observable(pvar.value.value);
-  // WARNING: the editable string path assumes the value is a string
-  useSubscription(pvar.qs.value, (value) => {
-    scalarValue(value?.value);
-  });
-  useSubscription(scalarValue, (value) => {
-    pvar.value = { value };
-  });
-
-  const valueLabel = (
-    <div className="d-flex align-items-center justify-content-between">
-      <small>Value:</small>
-      <CopyValueButton pvar={pvar} />
-    </div>
-  );
-
-  if (isSecret) {
-    return (
-      <>
-        {valueLabel}
-        <Input
-          value={scalarValue}
-          type="password"
-          className="form-control mb-3 p-0 ps-2"
-          placeholder="Variable value"
-          title="Variable value"
-        />
-      </>
-    );
-  }
-
-  // The markdown editor only handles strings. System/package pvars may hold booleans,
-  // numbers, or objects, so render those read-only (still copyable via the button).
-  // Read directly (no subscription) to avoid a render/write-back loop with scalarValue.
-  const scalar = pvar.value?.value;
-  if (typeof scalar !== "string") {
-    const isObject = scalar !== null && typeof scalar === "object";
-    const display =
-      scalar === undefined || scalar === null
-        ? ""
-        : isObject
-          ? JSON.stringify(scalar, null, 2)
-          : String(scalar);
-    return (
-      <>
-        {valueLabel}
-        {isObject ? (
-          <pre
-            className="form-control mb-1 p-2"
-            style={{ whiteSpace: "pre-wrap", wordBreak: "break-word", maxHeight: 300 }}
-          >
-            {display}
-          </pre>
-        ) : (
-          <input
-            className="form-control mb-1 p-0 ps-2"
-            value={display}
-            readOnly
-            title="Variable value"
-          />
-        )}
-        <div className="form-text text-muted mb-3">
-          This {typeof scalar} value is read-only here — use Copy Value to copy it.
-        </div>
-      </>
-    );
-  }
-
-  return (
-    <>
-      {valueLabel}
-      <MarkdownEditorInline value={scalarValue} hideToolbar />
-      <br />
-    </>
-  );
-};
-
-/**
- * Button that copies a persistent variable's value to the clipboard. Decryption (for
- * secret values) and the clipboard write happen entirely on the host, through System Host
- * Shell `copyVariableToClipboard`, so the plaintext is never exposed to the UI. Shows
- * transient success/error feedback on the icon.
- */
-const CopyValueButton = (props: { pvar: IDoc<IPersistentVar> }) => {
-  const { pvar } = props;
-  const [status, setStatus] = useState<"idle" | "copied" | "error">("idle");
-
-  async function onCopy() {
-    try {
-      const userContext = await getUserContext();
-      const groupId = userContext.currentlyActiveGroupId();
-      const tools = await hostShellTools();
-      const result = await tools.copyVariableToClipboard({
-        persistentVarId: pvar.persistentVarId,
-        groupId,
-      });
-      setStatus(result.copied ? "copied" : "error");
-    } catch (err) {
-      console.error("Failed to copy variable value", err);
-      setStatus("error");
-    }
-    setTimeout(() => setStatus("idle"), 1500);
-  }
-
-  const iconClass =
-    status === "copied"
-      ? "bi-check-lg text-success"
-      : status === "error"
-        ? "bi-exclamation-triangle text-danger"
-        : "bi-clipboard";
-
-  return (
-    <button
-      type="button"
-      className="btn btn-sm btn-outline-secondary"
-      onClick={onCopy}
-      title="Copy value to clipboard"
-    >
-      <i className={iconClass}></i>
-      <span className="ms-1">Copy Value</span>
-    </button>
-  );
-};