@peers-app/peers-ui 0.22.0 → 0.23.1

package/src/components/access-level-field.tsx

@@ -0,0 +1,68 @@
+import {
+  getAccessLevelLabel,
+  listAccessLevelPresets,
+  type Observable,
+  resolveAccessLevel,
+} from "@peers-app/peers-sdk";
+import { useObservable } from "../hooks";
+import { Input } from "./input";
+
+interface AccessLevelFieldProps {
+  value: number | Observable<number | undefined>;
+  disabled?: boolean;
+}
+
+/**
+ * Named-preset plus custom 0–100 editor for tool and Assistant access levels.
+ */
+export function AccessLevelField(props: AccessLevelFieldProps) {
+  const [value, setValue] = useObservable(props.value);
+  const level = resolveAccessLevel(value);
+  const presets = listAccessLevelPresets();
+  const isNamed = presets.some((preset) => preset.value === level);
+
+  return (
+    <div className="mb-3">
+      <small>Access level:</small>
+      <div className="d-flex gap-2 align-items-center">
+        <select
+          className="form-select form-select-sm"
+          disabled={props.disabled}
+          value={isNamed ? String(level) : "custom"}
+          onChange={(evt) => {
+            if (evt.target.value === "custom") {
+              setValue(level);
+              return;
+            }
+            setValue(Number(evt.target.value));
+          }}
+        >
+          {presets.map((preset) => (
+            <option key={preset.value} value={preset.value}>
+              {preset.label} ({preset.value})
+            </option>
+          ))}
+          <option value="custom">Custom</option>
+        </select>
+        <Input
+          type="number"
+          min={0}
+          max={100}
+          disabled={props.disabled}
+          className="form-control form-control-sm"
+          style={{ maxWidth: 90 }}
+          value={level}
+          onChange={(evt) => {
+            const next = Number((evt.target as HTMLInputElement).value);
+            if (Number.isInteger(next) && next >= 0 && next <= 100) {
+              setValue(next);
+            }
+          }}
+        />
+      </div>
+      <div className="form-text">
+        {getAccessLevelLabel(level)} ({level}). Unclassified records default to Self (100).
+      </div>
+    </div>
+  );
+}

package/src/components/message-logs/message-logs.tsx

@@ -1,11 +1,14 @@
 import {
   Assistants,
   formatMention,
+  getUserContext,
+  type IToolAccessApproval,
   type IWorkflowLog,
   type IWorkflowRun,
   type Observable,
   observable,
   runWorkflowToolId,
+  ToolAccessApprovals,
   Tools,
   WorkflowLogs,
   WorkflowRuns,
@@ -16,11 +19,13 @@ import moment from "moment";
 import { useCallback, useEffect, useState } from "react";
 import { useObservable, useObservableState, usePromise } from "../../hooks";
 import { MarkdownWithMentions } from "../markdown-with-mentions";
+import { ToolAccessApprovalCard } from "./tool-access-approval-card";
 
 interface MessageLogsProps {
   messageId: string;
 }
 
+/** Workflow logs and tool-access approval cards for a thread message. */
 export const MessageLogs = ({ messageId }: MessageLogsProps) => {
   const workflowRunIds = useObservableState<string[]>([]);
   const showLogs = useObservableState(false);
@@ -114,7 +119,7 @@ export const MessageLogs = ({ messageId }: MessageLogsProps) => {
   }, [messageId, workflowRunIds]);
 
   if (!workflowRunIds().length) {
-    return false;
+    return <ThreadAccessApprovals messageId={messageId} />;
   }
 
   return (
@@ -122,6 +127,7 @@ export const MessageLogs = ({ messageId }: MessageLogsProps) => {
       {/* this space prevents the logs and replies indicator from being included when selecting and copying a message text */}
       &nbsp;
       <ShowLogsLink logIds={logIds} showLogs={showLogs} runs={runs} />
+      <ThreadAccessApprovals messageId={messageId} />
       {showLogs() && (
         <div>
           <AllMessageLogs logIds={logIds} runs={runs} />
@@ -131,6 +137,57 @@ export const MessageLogs = ({ messageId }: MessageLogsProps) => {
   );
 };
 
+const ThreadAccessApprovals = ({ messageId }: { messageId: string }) => {
+  const [approvals] = useState(() => observable([] as IToolAccessApproval[]));
+  useObservable(approvals);
+
+  useEffect(() => {
+    let disposed = false;
+    let unsubscribe: (() => void) | undefined;
+
+    function setRows(rows: IToolAccessApproval[]) {
+      approvals(rows.sort((a, b) => a.createdAt.getTime() - b.createdAt.getTime()));
+    }
+
+    async function subscribeToContext() {
+      const userContext = await getUserContext();
+      if (disposed) return;
+      const dataContext = userContext.defaultDataContext();
+      const approvalsTable = ToolAccessApprovals(dataContext);
+      const sub = approvalsTable.dataChanged.subscribe((evt) => {
+        const row = evt.dataObject;
+        if (disposed || row.threadMessageId !== messageId) return;
+        const next = approvals().filter(
+          (item) => item.toolAccessApprovalId !== row.toolAccessApprovalId,
+        );
+        if (evt.op !== "delete") next.push(row);
+        setRows(next);
+      });
+      unsubscribe = () => sub.unsubscribe();
+      const rows = await approvalsTable.list({ threadMessageId: messageId });
+      if (!disposed) setRows(rows);
+    }
+
+    void subscribeToContext();
+    return () => {
+      disposed = true;
+      unsubscribe?.();
+    };
+  }, [messageId, approvals]);
+
+  if (!approvals().length) {
+    return false;
+  }
+
+  return (
+    <div>
+      {approvals().map((approval) => (
+        <ToolAccessApprovalCard key={approval.toolAccessApprovalId} approval={approval} />
+      ))}
+    </div>
+  );
+};
+
 const ShowLogsLink = (props: {
   showLogs: Observable<boolean>;
   logIds: Observable<string[]>;

package/src/components/message-logs/tool-access-approval-card.test.tsx

@@ -0,0 +1,127 @@
+import {
+  AccessLevel,
+  ToolAccessApprovalScope,
+  ToolAccessApprovalStatus,
+} from "@peers-app/peers-sdk";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { ToolAccessApprovalCard } from "./tool-access-approval-card";
+
+const approve = jest.fn(async () => ({ result: { status: "executed" } }));
+const reject = jest.fn(async () => ({ result: { status: "rejected" } }));
+const getDataContext = jest.fn((dataContextId: string) => ({ dataContextId }));
+const getToolAccessControlConsumer = jest.fn(async (_dataContextId: string) => ({
+  tools: { approve, reject },
+}));
+
+jest.mock("../../screens/tools/tool-access-ipc", () => ({
+  getToolAccessControlConsumer: (dataContextId: string) =>
+    getToolAccessControlConsumer(dataContextId),
+}));
+
+jest.mock("@peers-app/peers-sdk", () => {
+  const actual = jest.requireActual("@peers-app/peers-sdk");
+  return {
+    ...actual,
+    getUserContext: async () => ({
+      getDataContext,
+    }),
+    getCurrentUserAccessLevel: async () => actual.AccessLevel.Self,
+  };
+});
+
+const pending = {
+  toolAccessApprovalId: "00testapproval0000000001",
+  userId: "00testuser000000000000001",
+  assistantId: "00testassistant000000001",
+  toolId: "00testtooladmin00000000",
+  toolName: "queryDatabase",
+  dataContextId: "00testdatacontext00000001",
+  argsHash: "hash",
+  argsPreview: '{"sql":"select 1"}',
+  frozenArgs: { sql: "select 1" },
+  requiredAccessLevel: AccessLevel.Owner,
+  scope: ToolAccessApprovalScope.once,
+  status: ToolAccessApprovalStatus.pending,
+  nonce: "nonce-from-table",
+  expiresAt: new Date(Date.now() + 60_000),
+  createdAt: new Date(),
+};
+
+describe("ToolAccessApprovalCard", () => {
+  beforeEach(() => {
+    approve.mockClear();
+    reject.mockClear();
+    getDataContext.mockClear();
+    getToolAccessControlConsumer.mockClear();
+  });
+
+  it("renders a pending card with actions", () => {
+    render(<ToolAccessApprovalCard approval={pending as any} />);
+    expect(screen.getByText("Approval required")).toBeInTheDocument();
+    expect(screen.getByText("queryDatabase")).toBeInTheDocument();
+    expect(screen.getByText(/Owner \(80\)/)).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Allow once" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Allow in thread (15 min)" })).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Allow in this context (15 min)" }),
+    ).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Deny" })).toBeInTheDocument();
+  });
+
+  it("evaluates the user role in the approval context", async () => {
+    render(<ToolAccessApprovalCard approval={pending as any} />);
+    await waitFor(() => {
+      expect(getDataContext).toHaveBeenCalledWith(pending.dataContextId);
+    });
+  });
+
+  it("approves once using the table nonce", async () => {
+    render(<ToolAccessApprovalCard approval={pending as any} />);
+    fireEvent.click(screen.getByRole("button", { name: "Allow once" }));
+    await waitFor(() => {
+      expect(getToolAccessControlConsumer).toHaveBeenCalledWith(pending.dataContextId);
+      expect(approve).toHaveBeenCalledWith({
+        approvalId: pending.toolAccessApprovalId,
+        nonce: "nonce-from-table",
+        scope: "once",
+      });
+    });
+  });
+
+  it("denies using the table nonce", async () => {
+    render(<ToolAccessApprovalCard approval={pending as any} />);
+    fireEvent.click(screen.getByRole("button", { name: "Deny" }));
+    await waitFor(() => {
+      expect(reject).toHaveBeenCalledWith({
+        approvalId: pending.toolAccessApprovalId,
+        nonce: "nonce-from-table",
+      });
+    });
+  });
+
+  it("hides empty argument previews", () => {
+    render(
+      <ToolAccessApprovalCard
+        approval={{ ...pending, argsPreview: "{}", frozenArgs: {} } as any}
+      />,
+    );
+    expect(screen.queryByText("{}")).not.toBeInTheDocument();
+  });
+
+  it("shows a decided card without actions", () => {
+    render(
+      <ToolAccessApprovalCard
+        approval={
+          {
+            ...pending,
+            status: ToolAccessApprovalStatus.rejected,
+            resultSummary: "Rejected by user",
+          } as any
+        }
+      />,
+    );
+    expect(screen.getByText("Access rejected")).toBeInTheDocument();
+    expect(screen.getByText("Rejected by user")).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Allow once" })).not.toBeInTheDocument();
+  });
+});

package/src/components/message-logs/tool-access-approval-card.tsx

@@ -0,0 +1,178 @@
+import {
+  getAccessLevelLabel,
+  getCurrentUserAccessLevel,
+  getUserContext,
+  type IToolAccessApproval,
+  recordAccessLevel,
+  TOOL_ACCESS_GRANT_TTL_MS,
+  ToolAccessApprovalStatus,
+} from "@peers-app/peers-sdk";
+import { useState } from "react";
+import { usePromise } from "../../hooks";
+import { getToolAccessControlConsumer } from "../../screens/tools/tool-access-ipc";
+
+const GRANT_TTL_MINUTES = TOOL_ACCESS_GRANT_TTL_MS / (60 * 1000);
+
+/** Props for {@link ToolAccessApprovalCard}. */
+export interface ToolAccessApprovalCardProps {
+  /** Approval or grant row to render. */
+  approval: IToolAccessApproval;
+}
+
+/**
+ * Inline thread card for a pending or decided tool-access approval.
+ *
+ * Uses Bootstrap theme tokens (`bg-body-*`, `text-body-*`) so the card follows
+ * light and dark `data-bs-theme` instead of a hardcoded `bg-light` panel.
+ */
+export function ToolAccessApprovalCard(props: ToolAccessApprovalCardProps) {
+  const { approval } = props;
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | undefined>();
+  const userLevel = usePromise(
+    async () => {
+      const userContext = await getUserContext();
+      return getCurrentUserAccessLevel(userContext.getDataContext(approval.dataContextId));
+    },
+    recordAccessLevel({ accessLevel: 100 }),
+    [approval.dataContextId],
+  );
+
+  const required = approval.requiredAccessLevel;
+  const current = userLevel ?? 100;
+  const pending = approval.status === ToolAccessApprovalStatus.pending;
+  const expired = approval.expiresAt.getTime() <= Date.now();
+  const argsPreview = meaningfulArgsPreview(approval.argsPreview);
+  const statusStyle = statusAppearance(approval.status, expired);
+
+  async function decide(scope?: "once" | "thread" | "context", reject = false) {
+    setBusy(true);
+    setError(undefined);
+    try {
+      const consumer = await getToolAccessControlConsumer(approval.dataContextId);
+      if (reject) {
+        await consumer.tools.reject({
+          approvalId: approval.toolAccessApprovalId,
+          nonce: approval.nonce,
+        });
+      } else {
+        await consumer.tools.approve({
+          approvalId: approval.toolAccessApprovalId,
+          nonce: approval.nonce,
+          scope,
+        });
+      }
+    } catch (err) {
+      setError(String(err));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div
+      className="card my-2 bg-body-secondary border-secondary-subtle"
+      data-testid="tool-access-approval-card"
+    >
+      <div className="card-body py-2 px-3">
+        <div className="d-flex align-items-start gap-2">
+          <i
+            className={`bi ${statusStyle.icon} ${statusStyle.iconClass} mt-1`}
+            aria-hidden="true"
+          />
+          <div className="flex-grow-1 min-w-0">
+            <div className="fw-semibold text-body">
+              {pending ? "Approval required" : `Access ${approval.status}`}
+            </div>
+            <div className="small text-body">
+              <code className="text-body">{approval.toolName}</code> needs{" "}
+              {getAccessLevelLabel(required)} ({required}). You have {getAccessLevelLabel(current)}{" "}
+              ({current}).
+            </div>
+            {argsPreview && (
+              <pre
+                className="small mb-2 mt-2 p-2 bg-body-tertiary border rounded text-body"
+                style={{ whiteSpace: "pre-wrap" }}
+              >
+                {argsPreview}
+              </pre>
+            )}
+            <div className="text-body-secondary small mt-1">
+              Expires {approval.expiresAt.toLocaleTimeString()}
+              {expired ? " (expired)" : ""}
+            </div>
+            {approval.resultSummary && (
+              <div className="small text-body mt-1">{approval.resultSummary}</div>
+            )}
+            {error && <div className="text-danger small mt-1">{error}</div>}
+            {pending && !expired && (
+              <div className="d-flex flex-wrap gap-1 mt-2">
+                <button
+                  type="button"
+                  className="btn btn-sm btn-primary"
+                  disabled={busy}
+                  onClick={() => decide("once")}
+                >
+                  Allow once
+                </button>
+                <button
+                  type="button"
+                  className="btn btn-sm btn-outline-secondary"
+                  disabled={busy}
+                  onClick={() => decide("thread")}
+                >
+                  Allow in thread ({GRANT_TTL_MINUTES} min)
+                </button>
+                <button
+                  type="button"
+                  className="btn btn-sm btn-outline-secondary"
+                  disabled={busy}
+                  onClick={() => decide("context")}
+                >
+                  Allow in this context ({GRANT_TTL_MINUTES} min)
+                </button>
+                <button
+                  type="button"
+                  className="btn btn-sm btn-outline-danger"
+                  disabled={busy}
+                  onClick={() => decide(undefined, true)}
+                >
+                  Deny
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function meaningfulArgsPreview(preview: string | undefined): string | undefined {
+  const trimmed = preview?.trim();
+  if (!trimmed || trimmed === "{}" || trimmed === "[]") {
+    return undefined;
+  }
+  return trimmed;
+}
+
+function statusAppearance(
+  status: ToolAccessApprovalStatus,
+  expired: boolean,
+): { icon: string; iconClass: string } {
+  if (status === ToolAccessApprovalStatus.pending && expired) {
+    return { icon: "bi-shield-x", iconClass: "text-body-secondary" };
+  }
+  switch (status) {
+    case ToolAccessApprovalStatus.pending:
+      return { icon: "bi-shield-lock", iconClass: "text-warning" };
+    case ToolAccessApprovalStatus.approved:
+    case ToolAccessApprovalStatus.executed:
+      return { icon: "bi-shield-check", iconClass: "text-success" };
+    case ToolAccessApprovalStatus.rejected:
+    case ToolAccessApprovalStatus.failed:
+      return { icon: "bi-shield-x", iconClass: "text-danger" };
+    default:
+      return { icon: "bi-shield", iconClass: "text-body-secondary" };
+  }
+}

package/src/screens/assistants/assistant-info.tsx

@@ -1,4 +1,5 @@
 import type { IAssistant, IDoc, Observable } from "@peers-app/peers-sdk";
+import { AccessLevelField } from "../../components/access-level-field";
 import { Input } from "../../components/input";
 import { MarkdownEditorInline } from "../../components/markdown-editor/editor-inline";
 
@@ -10,6 +11,7 @@ interface AssistantInfoProps {
   onSetGroupPrimary: (checked: boolean) => void;
 }
 
+/** Info tab for an Assistant, including its access-level policy. */
 export const AssistantInfo = (props: AssistantInfoProps) => {
   const {
     assistant,
@@ -53,6 +55,8 @@ export const AssistantInfo = (props: AssistantInfoProps) => {
         />
       </div>
 
+      <AccessLevelField value={assistant.qs.accessLevel} />
+
       <div className="mt-2">
         <small>Description:</small>
         <MarkdownEditorInline value={assistant.qs.description as Observable<string>} />

package/src/screens/assistants/assistant-list.tsx

@@ -1,9 +1,14 @@
 import {
   Assistants,
+  canInvokeAssistant,
+  getAccessLevelLabel,
+  getCurrentUserAccessLevel,
+  getUserContext,
   type IAssistant,
   type ICursorIterable,
   newid,
   observable,
+  recordAccessLevel,
 } from "@peers-app/peers-sdk";
 import type React from "react";
 import { useEffect, useState } from "react";
@@ -12,14 +17,19 @@ 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 { useObservable, usePromise } from "../../hooks";
 
+/** Searchable Assistant list with access-level visibility. */
 export const AssistantList = () => {
   const [searchTextObs] = useState(() => observable(""));
   const [searchText] = useObservable(searchTextObs);
 
   const [cursorObs] = useState(() => observable<ICursorIterable<IAssistant> | undefined>());
   const [cursorId] = useState(() => observable(newid()));
+  const userLevel = usePromise(async () => {
+    const userContext = await getUserContext();
+    return getCurrentUserAccessLevel(userContext.defaultDataContext());
+  }, 100);
 
   async function newCursor() {
     let cursor: ICursorIterable<IAssistant>;
@@ -90,12 +100,29 @@ export const AssistantList = () => {
           scrollThreshold={0.6}
           renderItems={(assistants) => {
             return assistants.map((assistant) => {
+              const required = recordAccessLevel(assistant);
+              const allowed = canInvokeAssistant(userLevel ?? 100, required);
               return (
-                <div key={assistant.assistantId} className="container-fluid pb-4">
+                <div
+                  key={assistant.assistantId}
+                  className="container-fluid pb-4"
+                  style={allowed ? undefined : { opacity: 0.65 }}
+                >
                   <i className="bi bi-person-fill-gear"></i>&nbsp;
                   <a href={`#assistants/${assistant.assistantId}`}>{assistant.name}</a>
+                  {!allowed && (
+                    <span className="badge text-bg-secondary ms-2">
+                      Requires {getAccessLevelLabel(required)} ({required})
+                    </span>
+                  )}
                   <div style={{ paddingLeft: "20px" }}>
                     <MarkdownWithMentions content={assistant.description ?? ""} />
+                    {!allowed && (
+                      <div className="small text-muted">
+                        You cannot invoke this Assistant with your current access (
+                        {getAccessLevelLabel(userLevel ?? 100)}).
+                      </div>
+                    )}
                   </div>
                 </div>
               );

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

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