@peers-app/peers-ui 0.27.3 → 0.27.4

package/src/screens/setup-user.tsx

@@ -1,355 +0,0 @@
-import {
-  hydrateKeys,
-  isid,
-  newid,
-  newKeys,
-  openMessageWithPublicKey,
-  signMessageWithSecretKey,
-} from "@peers-app/peers-sdk";
-import { useState } from "react";
-import { useObservable } from "../hooks";
-import { DestinationDevicePairing } from "./device-pairing";
-import { identityTools } from "./device-pairing/identity-ipc";
-import { colorMode } from "./settings/color-mode-dropdown";
-
-type SetupStep = "select-user-type" | "complete";
-
-export const SetupUser = () => {
-  const [_colorMode] = useObservable(colorMode);
-  const [step, _setStep] = useState<SetupStep>("select-user-type");
-  const [showPairing, setShowPairing] = useState(false);
-  const [isExistingUser, setIsExistingUser] = useState<boolean | null>(null);
-  const [userId, setUserId] = useState("");
-  const [secretKey, setSecretKey] = useState("");
-  const [error, setError] = useState("");
-  const [isValidating, setIsValidating] = useState(false);
-
-  document.getElementById("appLoadingDiv")?.remove();
-
-  const isDark = _colorMode === "dark";
-
-  const handleNewUser = async () => {
-    setError("");
-    setIsValidating(true);
-
-    try {
-      // Generate new user credentials
-      const keys = newKeys();
-      const _userId = newid();
-
-      // signIn triggers device init, which installs peers-core into the personal
-      // context (S3-first, bundle fallback).
-      await (await identityTools()).signIn({ userId: _userId, secretKey: keys.secretKey });
-
-      // Success - reload the app (peers-services registration runs after Welcome modal)
-      window.location.reload();
-    } catch (err) {
-      setError(`Error creating new user: ${String(err).replaceAll("\n", " ")}`);
-      setIsValidating(false);
-    }
-  };
-
-  const handleExistingUser = async () => {
-    setError("");
-
-    // Validate inputs
-    if (!userId.trim() || !secretKey.trim()) {
-      setError("Please enter both User ID and Secret Key");
-      return;
-    }
-
-    if (isid(userId) !== true) {
-      setError("Invalid User ID format");
-      return;
-    }
-
-    setIsValidating(true);
-
-    try {
-      // Validate secret key
-      const keys = hydrateKeys(secretKey);
-      const msg = newid();
-      const msgSigned = signMessageWithSecretKey(msg, keys.secretKey);
-      const msgOpened = openMessageWithPublicKey(msgSigned, keys.publicKey);
-
-      if (msg !== msgOpened) {
-        throw new Error("Secret key validation failed");
-      }
-
-      await (await identityTools()).signIn({ userId, secretKey: keys.secretKey });
-
-      // Success - reload the app
-      window.location.reload();
-    } catch (err) {
-      setError(`Invalid credentials: ${String(err).replaceAll("\n", " ")}`);
-      setIsValidating(false);
-    }
-  };
-
-  if (showPairing) {
-    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: "560px",
-            width: "100%",
-            backgroundColor: isDark ? "#2d3238" : "#ffffff",
-          }}
-        >
-          <div className="card-body p-4 p-md-5">
-            <DestinationDevicePairing onBack={() => setShowPairing(false)} />
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  // Step 1: Select User Type
-  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="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>
-            </div>
-
-            <div className="d-grid gap-3">
-              <button
-                className="btn btn-lg btn-primary py-3"
-                onClick={() => setIsExistingUser(false)}
-              >
-                <div className="d-flex align-items-center justify-content-center">
-                  <i className="bi bi-person-plus fs-4 me-2" />
-                  <div className="text-start">
-                    <div className="fw-semibold">New account</div>
-                    <small className="opacity-75">Create a new account on this device</small>
-                  </div>
-                </div>
-              </button>
-
-              <button
-                className={`btn btn-lg py-3 ${isDark ? "btn-outline-light" : "btn-outline-primary"}`}
-                onClick={() => setShowPairing(true)}
-              >
-                <div className="d-flex align-items-center justify-content-center">
-                  <i className="bi bi-phone fs-4 me-2" />
-                  <div className="text-start">
-                    <div className="fw-semibold">Sign in from another device</div>
-                    <small className="opacity-75">
-                      Show a code to a device that is already signed in
-                    </small>
-                  </div>
-                </div>
-              </button>
-
-              <details className="text-center mt-2">
-                <summary
-                  className={`small ${isDark ? "text-light opacity-75" : "text-muted"}`}
-                  style={{ cursor: "pointer" }}
-                >
-                  Advanced
-                </summary>
-                <button
-                  type="button"
-                  className={`btn btn-sm mt-2 ${isDark ? "btn-outline-light" : "btn-outline-secondary"}`}
-                  onClick={() => setIsExistingUser(true)}
-                >
-                  <i className="bi bi-key me-1" />
-                  Enter a user ID and secret key
-                </button>
-              </details>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  // 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="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>
-            </div>
-
-            {error && (
-              <div className="alert alert-danger" role="alert">
-                <i className="bi bi-exclamation-triangle me-2" />
-                {error}
-              </div>
-            )}
-
-            <div className="d-grid gap-2">
-              <button
-                className="btn btn-lg btn-primary"
-                onClick={handleNewUser}
-                disabled={isValidating}
-              >
-                {isValidating ? (
-                  <>
-                    <span className="spinner-border spinner-border-sm me-2" />
-                    Creating Account...
-                  </>
-                ) : (
-                  <>
-                    <i className="bi bi-check-circle me-2" />
-                    Create Account
-                  </>
-                )}
-              </button>
-
-              <button
-                className="btn btn-outline-secondary"
-                onClick={() => setIsExistingUser(null)}
-                disabled={isValidating}
-              >
-                <i className="bi bi-arrow-left me-2" />
-                Back
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  // 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="card-body p-4 p-md-5">
-            <div className="text-center mb-2">
-              <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"}>
-                Paste your user ID and secret key. If you have another signed-in device, “Sign in
-                from another device” is easier and safer.
-              </p>
-            </div>
-
-            {error && (
-              <div className="alert alert-danger" role="alert">
-                <i className="bi bi-exclamation-triangle me-2" />
-                {error}
-              </div>
-            )}
-
-            <form
-              onSubmit={(e) => {
-                e.preventDefault();
-                handleExistingUser();
-              }}
-            >
-              <div className="mb-3">
-                <label htmlFor="userId" className="form-label fw-semibold">
-                  User ID
-                </label>
-                <input
-                  id="userId"
-                  type="text"
-                  className="form-control form-control-lg"
-                  placeholder="Enter your user ID"
-                  value={userId}
-                  onChange={(e) => setUserId(e.target.value)}
-                  disabled={isValidating}
-                />
-              </div>
-
-              <div className="mb-4">
-                <label htmlFor="secretKey" className="form-label fw-semibold">
-                  Secret Key
-                </label>
-                <input
-                  id="secretKey"
-                  type="password"
-                  className="form-control form-control-lg"
-                  placeholder="Enter your secret key"
-                  value={secretKey}
-                  onChange={(e) => setSecretKey(e.target.value)}
-                  disabled={isValidating}
-                />
-              </div>
-
-              <div className="d-grid gap-2">
-                <button type="submit" className="btn btn-lg btn-primary" disabled={isValidating}>
-                  {isValidating ? (
-                    <>
-                      <span className="spinner-border spinner-border-sm me-2" />
-                      Signing In...
-                    </>
-                  ) : (
-                    <>
-                      <i className="bi bi-check-circle me-2" />
-                      Sign In
-                    </>
-                  )}
-                </button>
-
-                <button
-                  type="button"
-                  className="btn btn-outline-secondary"
-                  onClick={() => setIsExistingUser(null)}
-                  disabled={isValidating}
-                >
-                  <i className="bi bi-arrow-left me-2" />
-                  Back
-                </button>
-              </div>
-            </form>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return null;
-};

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

@@ -1,55 +0,0 @@
-import {
-  CONTRACT_REQUEST_CHANNEL,
-  inProcessTransportPair,
-  newid,
-  registerHostContractTransport,
-} from "@peers-app/peers-sdk";
-import { getToolAccessControlConsumer } from "./tool-access-ipc";
-
-function setupHost() {
-  const calls: Array<{
-    dataContextId?: string;
-    member: string;
-    name: string;
-    operation: string;
-  }> = [];
-  const [consumerTransport, providerTransport] = inProcessTransportPair();
-  providerTransport.on(CONTRACT_REQUEST_CHANNEL, (call) => {
-    calls.push(call);
-    if (call.member === "tool" && call.name === "approve") {
-      return { result: { status: "executed" } };
-    }
-    return undefined;
-  });
-  return {
-    calls,
-    dispose: registerHostContractTransport(consumerTransport),
-  };
-}
-
-describe("Tool Access Control host consumers", () => {
-  it("caches per context and scopes calls to the requested context", async () => {
-    const host = setupHost();
-    const groupContextId = newid();
-    const personalContextId = newid();
-    const groupConsumer = await getToolAccessControlConsumer(groupContextId);
-
-    expect(await getToolAccessControlConsumer(groupContextId)).toBe(groupConsumer);
-    expect(await getToolAccessControlConsumer(personalContextId)).not.toBe(groupConsumer);
-
-    await groupConsumer.tools.approve({
-      approvalId: newid(),
-      nonce: newid(),
-      scope: "once",
-    });
-    expect(host.calls).toContainEqual(
-      expect.objectContaining({
-        dataContextId: groupContextId,
-        member: "tool",
-        name: "approve",
-      }),
-    );
-
-    host.dispose();
-  });
-});

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

@@ -1,27 +0,0 @@
-import {
-  getToolAccessControlContractDefinition,
-  hostContractConsumer,
-  type IHostContractConsumer,
-  type IToolAccessControlConsumer,
-} from "@peers-app/peers-sdk";
-
-const consumers = new Map<string, IHostContractConsumer<IToolAccessControlConsumer>>();
-
-/**
- * Return a typed local-host consumer for Tool Access Control in `dataContextId`.
- *
- * One consumer is cached per data context and rebuilt when the host transport changes.
- */
-export async function getToolAccessControlConsumer(
-  dataContextId: string,
-): Promise<IToolAccessControlConsumer> {
-  let handle = consumers.get(dataContextId);
-  if (!handle) {
-    handle = hostContractConsumer<IToolAccessControlConsumer>(
-      getToolAccessControlContractDefinition(),
-      { dataContextId: async () => dataContextId },
-    );
-    consumers.set(dataContextId, handle);
-  }
-  return handle.get();
-}

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

@@ -1,52 +0,0 @@
-const list = jest.fn();
-const get = jest.fn();
-const rows = jest.fn();
-const mainContentPath = jest.fn();
-jest.mock("../../globals", () => ({ mainContentPath }));
-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, valueTypeMentionConfig } 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("type mentions navigate directly through the UI route observable", () => {
-  valueTypeMentionConfig.onClick?.({ kind: "valueType", id: "type-id", name: "Type" });
-  expect(mainContentPath).toHaveBeenCalledWith("peer-types/type-id");
-});
-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

@@ -1,51 +0,0 @@
-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,52 +0,0 @@
-import { LoadingIndicator } from "../../components/loading-indicator";
-import { ScreenTabBody, Tabs } from "../../components/tabs";
-import { usePromise } from "../../hooks";
-import { updateActiveTabTitle } from "../../tabs-layout/tabs-state";
-import { getToolDetails } from "./tool-catalog-ipc";
-import { ToolInfo } from "./tool-info";
-import { ToolSchema } from "./tool-schema";
-
-/** Read-only permanent tool metadata and live provider details. */
-export const ToolDetails = (props: { toolId: string }) => {
-  const details = usePromise(
-    async () => {
-      const details = await getToolDetails(props.toolId);
-      if (details) updateActiveTabTitle(details.entry?.name || details.row.name || "Tool");
-      return details ?? null;
-    },
-    undefined,
-    [props.toolId],
-  );
-  if (details === null) return <div>Tool not found</div>;
-  if (!details) return <LoadingIndicator />;
-  const { row, entry } = details;
-  return (
-    <div className="container-fluid p-3">
-      <h4>
-        <i className="bi bi-tools me-2" />
-        {entry?.name ?? row.name}
-      </h4>
-      <Tabs
-        key={row.toolId}
-        tabs={[
-          {
-            name: "Info",
-            content: (
-              <ScreenTabBody>
-                <ToolInfo tool={row} entry={entry} />
-              </ScreenTabBody>
-            ),
-          },
-          {
-            name: "Schema",
-            content: (
-              <ScreenTabBody>
-                <ToolSchema tool={row} entry={entry} />
-              </ScreenTabBody>
-            ),
-          },
-        ]}
-      />
-    </div>
-  );
-};

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

@@ -1,45 +0,0 @@
-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>
-      {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>
-  );
-};