@stigmer/react 3.1.16 → 3.2.0

package/src/sharing/AgentShareList.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useCallback, useState } from "react";
+import { MoreHorizontal, Pause, Pencil, Play, RotateCcw, Trash2 } from "lucide-react";
 import { cn } from "@stigmer/theme";
 import {
   appendLinkToken,
@@ -10,9 +11,10 @@ import {
 import type { Agent } from "@stigmer/protos/ai/stigmer/agentic/agent/v1/api_pb";
 import type { AgentShare } from "@stigmer/protos/ai/stigmer/agentic/agentshare/v1/api_pb";
 import { toast } from "../feedback/toast.js";
+import { ActionMenu } from "../action-menu/index.js";
 import { Button } from "../button/Button.js";
 import { EmptyState } from "../empty-state/EmptyState.js";
-import { PermissionGate } from "../iam-policy/PermissionGate.js";
+import { useCheckPermission } from "../iam-policy/useCheckPermission.js";
 import { ConfirmDialog } from "../resource-detail/ConfirmDialog.js";
 import { useConfirmAction } from "../resource-detail/useConfirmAction.js";
 import { useCopyResource } from "../resource-detail/useCopyResource.js";
@@ -164,14 +166,17 @@ export function AgentShareList({
           </div>
 
           <div className="overflow-hidden rounded-lg border border-border">
-            <table className="w-full text-sm">
+            {/* table-fixed keeps the layout deterministic: Name/Link flex and
+                truncate, the rest take fixed widths, so a long name or link
+                can never push the Actions kebab off the panel's edge. */}
+            <table className="w-full table-fixed text-sm">
               <thead>
                 <tr className="border-b border-border bg-muted-subtle">
                   <th className="px-4 py-2 text-left font-medium text-muted-foreground">Name</th>
                   <th className="px-4 py-2 text-left font-medium text-muted-foreground">Link</th>
-                  <th className="px-4 py-2 text-left font-medium text-muted-foreground">Audience</th>
-                  <th className="px-4 py-2 text-left font-medium text-muted-foreground">Status</th>
-                  <th className="px-4 py-2 text-right font-medium text-muted-foreground">Actions</th>
+                  <th className="w-28 px-4 py-2 text-left font-medium text-muted-foreground">Audience</th>
+                  <th className="w-24 px-4 py-2 text-left font-medium text-muted-foreground">Status</th>
+                  <th className="w-16 px-4 py-2 text-right font-medium text-muted-foreground">Actions</th>
                 </tr>
               </thead>
               <tbody className="divide-y divide-border">
@@ -248,6 +253,19 @@ function ShareRow({
   const { save, isPending } = useSaveAgentShare(agent);
   const { rotateShareLink, isPending: isRotating } = useRotateShareLink(id);
 
+  // Decide the row's actions here (not via nested PermissionGate wrappers) so
+  // the kebab is hidden entirely when the viewer can do nothing to this
+  // share — an empty overflow menu is worse than no menu. Same self-check
+  // RPC as PermissionGate; permissive in OSS, so local single-user sees all.
+  const { allowed: canEdit } = useCheckPermission(
+    { kind: "agent_share", id },
+    "can_edit",
+  );
+  const { allowed: canDelete } = useCheckPermission(
+    { kind: "agent_share", id },
+    "can_delete",
+  );
+
   // The copyable URL carries the link token on public shares (org
   // audience is gated by membership, not the token). The display stays
   // the bare path — the token is a secret, not an address.
@@ -292,14 +310,17 @@ function ShareRow({
       onClick={() => onEditClick(share)}
     >
       <td className="px-4 py-2.5">
-        <div className="flex items-center gap-2">
-          <span className="font-medium text-foreground">
+        <div className="flex min-w-0 items-center gap-2">
+          <span
+            className="truncate font-medium text-foreground"
+            title={meta?.name || slug || undefined}
+          >
             {meta?.name || slug || "\u2014"}
           </span>
           {isCrossOrg && (
             <span
               className={cn(
-                "inline-flex items-center rounded-md px-1.5 py-0.5",
+                "inline-flex shrink-0 items-center rounded-md px-1.5 py-0.5",
                 "text-[0.6rem] font-medium uppercase tracking-wide",
                 "bg-muted text-muted-foreground border border-border",
               )}
@@ -312,9 +333,9 @@ function ShareRow({
       </td>
 
       <td className="px-4 py-2.5" onClick={(e) => e.stopPropagation()}>
-        <div className="flex items-center gap-1.5">
+        <div className="flex min-w-0 items-center gap-1.5">
           <code
-            className="max-w-56 truncate font-mono text-xs text-muted-foreground"
+            className="truncate font-mono text-xs text-muted-foreground"
             title={displayPath}
           >
             {displayPath}
@@ -324,7 +345,7 @@ function ShareRow({
             onClick={handleCopyLink}
             aria-label={`Copy link for ${meta?.name || slug}`}
             className={cn(
-              "rounded p-1 text-muted-foreground",
+              "shrink-0 rounded p-1 text-muted-foreground",
               "hover:bg-accent-hover hover:text-foreground",
               "focus:outline-none focus:ring-1 focus:ring-ring",
             )}
@@ -358,63 +379,63 @@ function ShareRow({
         </span>
       </td>
 
+      {/* stopPropagation so opening the kebab never triggers the row's
+          click-to-edit. The menu content itself is portaled, so its items
+          never bubble to the row regardless. */}
       <td className="px-4 py-2.5 text-right" onClick={(e) => e.stopPropagation()}>
-        <div className="flex items-center justify-end gap-1">
-          <PermissionGate resource={{ kind: "agent_share", id }} relation="can_edit">
-            <button
-              type="button"
-              onClick={() => onEditClick(share)}
-              className={cn(
-                "rounded px-2 py-1 text-xs font-medium",
-                "text-foreground hover:bg-accent-hover",
-                "focus:outline-none focus:ring-1 focus:ring-ring",
-              )}
+        {(canEdit || canDelete) && (
+          <ActionMenu>
+            <ActionMenu.Trigger
+              className="ml-auto"
+              aria-label={`Actions for ${meta?.name || slug}`}
             >
-              Edit
-            </button>
-            <button
-              type="button"
-              onClick={() => void handleToggleEnabled()}
-              disabled={isPending}
-              className={cn(
-                "rounded px-2 py-1 text-xs font-medium",
-                "text-foreground hover:bg-accent-hover",
-                "focus:outline-none focus:ring-1 focus:ring-ring",
-                "disabled:pointer-events-none disabled:opacity-50",
+              <MoreHorizontal className="size-4" />
+            </ActionMenu.Trigger>
+            <ActionMenu.Content>
+              {canEdit && (
+                <>
+                  {/* Also the only keyboard-reachable path to edit — the
+                      row's click-to-edit is mouse-only. */}
+                  <ActionMenu.Item
+                    icon={<Pencil />}
+                    onSelect={() => onEditClick(share)}
+                  >
+                    Edit
+                  </ActionMenu.Item>
+                  {/* The menu closes on select; a toast reports the outcome,
+                      so no inline pending label is needed. `disabled` guards
+                      against a re-fire if the menu is reopened mid-flight. */}
+                  <ActionMenu.Item
+                    icon={enabled ? <Pause /> : <Play />}
+                    disabled={isPending}
+                    onSelect={() => void handleToggleEnabled()}
+                  >
+                    {enabled ? "Pause" : "Resume"}
+                  </ActionMenu.Item>
+                  {audience === "public" && (
+                    <ActionMenu.Item
+                      icon={<RotateCcw />}
+                      disabled={isRotating}
+                      onSelect={() => void handleResetLink()}
+                    >
+                      Reset link
+                    </ActionMenu.Item>
+                  )}
+                </>
               )}
-            >
-              {enabled ? "Pause" : "Resume"}
-            </button>
-            {audience === "public" && (
-              <button
-                type="button"
-                onClick={() => void handleResetLink()}
-                disabled={isRotating}
-                className={cn(
-                  "rounded px-2 py-1 text-xs font-medium",
-                  "text-foreground hover:bg-accent-hover",
-                  "focus:outline-none focus:ring-1 focus:ring-ring",
-                  "disabled:pointer-events-none disabled:opacity-50",
-                )}
-              >
-                {isRotating ? "Resetting…" : "Reset link"}
-              </button>
-            )}
-          </PermissionGate>
-          <PermissionGate resource={{ kind: "agent_share", id }} relation="can_delete">
-            <button
-              type="button"
-              onClick={() => onDeleteClick(share)}
-              className={cn(
-                "rounded px-2 py-1 text-xs font-medium",
-                "text-destructive hover:bg-destructive-subtle",
-                "focus:outline-none focus:ring-1 focus:ring-ring",
+              {canEdit && canDelete && <ActionMenu.Separator />}
+              {canDelete && (
+                <ActionMenu.Item
+                  icon={<Trash2 />}
+                  variant="destructive"
+                  onSelect={() => onDeleteClick(share)}
+                >
+                  Delete
+                </ActionMenu.Item>
               )}
-            >
-              Delete
-            </button>
-          </PermissionGate>
-        </div>
+            </ActionMenu.Content>
+          </ActionMenu>
+        )}
       </td>
     </tr>
   );

package/src/sharing/ShareAgentDialog.tsx

@@ -47,7 +47,7 @@ const SHARE_TABS: readonly TabItem[] = [
 ];
 
 const PLATFORM_CLIENT_DOCS_URL =
-  "https://docs.stigmer.ai/guides/authentication/platform-client/overview";
+  "https://stigmer.ai/docs/guides/authentication/platform-client/overview";
 
 /** Props for {@link ShareAgentDialog}. */
 export interface ShareAgentDialogProps {

package/src/sharing/__tests__/AgentShareList.test.tsx

@@ -14,14 +14,31 @@ vi.mock("../../feedback/toast", () => ({
   toast: { success: vi.fn(), error: vi.fn() },
 }));
 
-// happy-dom does not implement the native dialog show/close methods.
+// The row actions live in a Base UI menu, whose content is portaled to the
+// SDK portal container. Without a StigmerProvider that container is null and
+// the menu renders nothing — pin it to document.body so the menu mounts.
+vi.mock("../../portal-container", () => ({
+  useStigmerPortalContainer: () => document.body,
+}));
+
 beforeAll(() => {
+  // happy-dom does not implement the native dialog show/close methods.
   HTMLDialogElement.prototype.showModal = function showModal() {
     this.open = true;
   };
   HTMLDialogElement.prototype.close = function close() {
     this.open = false;
   };
+  // Base UI's menu positioner observes its anchor; happy-dom lacks
+  // ResizeObserver, so provide a no-op shim.
+  if (!("ResizeObserver" in globalThis)) {
+    (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver =
+      class {
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+      };
+  }
 });
 
 afterEach(cleanup);
@@ -32,6 +49,11 @@ interface MockOverrides {
   deleteShare?: (id: string) => Promise<unknown>;
   rotateShareLink?: (input: unknown) => Promise<unknown>;
   isAuthorized?: boolean;
+  /**
+   * Per-relation authorization, for tests that need `can_edit` and
+   * `can_delete` to differ. Takes precedence over `isAuthorized`.
+   */
+  checkPermission?: (relation: string) => boolean;
 }
 
 function createMockStigmer(overrides: MockOverrides = {}) {
@@ -46,9 +68,15 @@ function createMockStigmer(overrides: MockOverrides = {}) {
         overrides.rotateShareLink ?? vi.fn().mockResolvedValue({}),
     },
     iamPolicy: {
-      checkMyPermission: vi.fn().mockResolvedValue({
-        isAuthorized: overrides.isAuthorized ?? true,
-      }),
+      checkMyPermission: vi
+        .fn()
+        .mockImplementation((input: { relation: string }) =>
+          Promise.resolve({
+            isAuthorized: overrides.checkPermission
+              ? overrides.checkPermission(input.relation)
+              : (overrides.isAuthorized ?? true),
+          }),
+        ),
     },
     environment: {
       list: vi.fn().mockResolvedValue({ items: [], totalCount: 0 }),
@@ -143,6 +171,19 @@ async function renderList(
   );
 }
 
+/**
+ * Opens a row's overflow (kebab) menu and resolves once its items mount.
+ * Pass the row's visible name to disambiguate when several rows are present.
+ * The menu content is portaled, so query its items from `screen`, not the row.
+ */
+async function openRowMenu(rowName?: string) {
+  const scope = rowName
+    ? within(screen.getByText(rowName).closest("tr")!)
+    : screen;
+  fireEvent.click(scope.getByRole("button", { name: /^Actions for/ }));
+  await screen.findByRole("menuitem", { name: "Edit" });
+}
+
 describe("AgentShareList", () => {
   it("lists every share with link, audience, and status — no canonical collapse", async () => {
     const client = createMockStigmer({
@@ -220,8 +261,8 @@ describe("AgentShareList", () => {
     });
     await renderList(client);
 
-    const row = screen.getByText("Help Desk").closest("tr")!;
-    fireEvent.click(within(row).getByRole("button", { name: "Edit" }));
+    await openRowMenu("Help Desk");
+    fireEvent.click(screen.getByRole("menuitem", { name: "Edit" }));
 
     // The editor shows the chosen share's URL — not the first row's.
     expect(
@@ -281,7 +322,8 @@ describe("AgentShareList", () => {
       });
       await renderList(client);
 
-      fireEvent.click(screen.getByRole("button", { name: "Pause" }));
+      await openRowMenu();
+      fireEvent.click(screen.getByRole("menuitem", { name: "Pause" }));
 
       await waitFor(() => expect(apply).toHaveBeenCalledTimes(1));
       const input = apply.mock.calls[0][0] as AgentShareInput;
@@ -302,7 +344,8 @@ describe("AgentShareList", () => {
       });
       await renderList(client);
 
-      fireEvent.click(screen.getByRole("button", { name: "Resume" }));
+      await openRowMenu();
+      fireEvent.click(screen.getByRole("menuitem", { name: "Resume" }));
 
       await waitFor(() => expect(apply).toHaveBeenCalledTimes(1));
       expect((apply.mock.calls[0][0] as AgentShareInput).enabled).toBe(true);
@@ -318,7 +361,8 @@ describe("AgentShareList", () => {
       });
       await renderList(client);
 
-      fireEvent.click(screen.getByRole("button", { name: "Reset link" }));
+      await openRowMenu();
+      fireEvent.click(screen.getByRole("menuitem", { name: "Reset link" }));
 
       await waitFor(() => expect(rotateShareLink).toHaveBeenCalledTimes(1));
       expect(
@@ -334,7 +378,8 @@ describe("AgentShareList", () => {
       });
       await renderList(client);
 
-      expect(screen.queryByRole("button", { name: "Reset link" })).toBeNull();
+      await openRowMenu();
+      expect(screen.queryByRole("menuitem", { name: "Reset link" })).toBeNull();
     });
   });
 
@@ -345,7 +390,8 @@ describe("AgentShareList", () => {
       const client = createMockStigmer({ deleteShare, getByAgent });
       await renderList(client);
 
-      fireEvent.click(screen.getByRole("button", { name: "Delete" }));
+      await openRowMenu();
+      fireEvent.click(screen.getByRole("menuitem", { name: "Delete" }));
 
       // The confirmation names the destructive consequence and the
       // config-preserving alternative (pause).
@@ -369,7 +415,8 @@ describe("AgentShareList", () => {
       });
       await renderList(client);
 
-      fireEvent.click(screen.getByRole("button", { name: "Delete" }));
+      await openRowMenu();
+      fireEvent.click(screen.getByRole("menuitem", { name: "Delete" }));
       expect(await screen.findByText("Delete share?")).toBeTruthy();
 
       fireEvent.click(screen.getByRole("button", { name: "Cancel", hidden: true }));
@@ -377,6 +424,39 @@ describe("AgentShareList", () => {
     });
   });
 
+  describe("actions menu gating", () => {
+    it("hides the kebab entirely when the viewer can neither edit nor delete", async () => {
+      const client = createMockStigmer({
+        getByAgent: withShares(makeShare()),
+        isAuthorized: false,
+      });
+      await renderList(client);
+
+      // The row still renders; only its actions collapse away — an empty
+      // overflow menu would be worse than no menu. The permission self-check
+      // resolves asynchronously (optimistic-visible first), so wait for the
+      // denial to land and the kebab to disappear.
+      expect(screen.getByText("Support Agent")).toBeTruthy();
+      await waitFor(() =>
+        expect(screen.queryByRole("button", { name: /^Actions for/ })).toBeNull(),
+      );
+    });
+
+    it("offers only Delete when the viewer can delete but not edit", async () => {
+      const client = createMockStigmer({
+        getByAgent: withShares(makeShare()),
+        checkPermission: (relation) => relation === "can_delete",
+      });
+      await renderList(client);
+
+      fireEvent.click(screen.getByRole("button", { name: /^Actions for/ }));
+      expect(await screen.findByRole("menuitem", { name: "Delete" })).toBeTruthy();
+      expect(screen.queryByRole("menuitem", { name: "Edit" })).toBeNull();
+      expect(screen.queryByRole("menuitem", { name: "Pause" })).toBeNull();
+      expect(screen.queryByRole("menuitem", { name: "Reset link" })).toBeNull();
+    });
+  });
+
   it("shows an error state when the share list fails to load", async () => {
     const client = createMockStigmer({
       getByAgent: vi.fn().mockRejectedValue(new Error("backend unavailable")),

package/src/sharing/useShareToolReadiness.ts

@@ -1,66 +1,37 @@
 "use client";
 
-import { useEffect, useMemo, useState } from "react";
 import type { Agent } from "@stigmer/protos/ai/stigmer/agentic/agent/v1/api_pb";
-import { ApiResourceVisibility } from "@stigmer/protos/ai/stigmer/commons/apiresource/enum_pb";
-import { useStigmer } from "../hooks.js";
 import { useDeploymentMode } from "../deployment-mode.js";
+import {
+  useToolCredentialsReadiness,
+  type ToolCredentialsReadiness,
+} from "../environment/useToolCredentialsReadiness.js";
 import type { AgentShareDraft } from "./useSaveAgentShare.js";
 
 /**
  * Readiness of a share's tool credentials for visitor executions.
  *
- * - `na` — nothing to check: the agent uses no MCP tools, sharing is
- *   off, the audience is org (bindings are public-audience only), or
- *   the deployment cannot serve guest chat (local mode).
- * - `needs-credentials` — the agent uses MCP tools but the share has no
- *   environments bound: visitors' tool calls will fail until the owner
- *   binds credentials.
- * - `checking` — lookups in flight.
- * - `ready` — every environment bound to the share is shared with the
- *   organization.
- * - `blocked` — one or more bound environments are private; their
- *   `org/slug` references are listed for the hint copy.
+ * The shared vocabulary lives on {@link ToolCredentialsReadiness}; this
+ * alias preserves the original share-scoped export.
  */
-export type ShareToolReadiness =
-  | { readonly status: "na" }
-  | { readonly status: "needs-credentials" }
-  | { readonly status: "checking" }
-  | { readonly status: "ready" }
-  | { readonly status: "blocked"; readonly privateEnvironments: readonly string[] };
-
-const NA: ShareToolReadiness = { status: "na" };
-const NEEDS_CREDENTIALS: ShareToolReadiness = { status: "needs-credentials" };
+export type ShareToolReadiness = ToolCredentialsReadiness;
 
 /**
- * Data hook that checks whether a tool-using shared agent's credentials
- * will work for visitors — i.e. whether the share binds environments
- * (`environment_refs`) and each one is shared with the organization
- * (`visibility_org`).
- *
- * Guest executions receive credentials exclusively from the share's own
- * `environment_refs`, resolved through the org-shared environment seam
- * (decision 011 — the agent's default instance stays pristine and is
- * never consulted). So a tool-using agent with an empty binding list is
- * *guaranteed* broken for visitors, and this hook says so explicitly
- * (`needs-credentials`) instead of staying silent — the gap that made
- * session 12's misconfiguration invisible until a visitor's first
- * message failed.
+ * Share-scoped wrapper over {@link useToolCredentialsReadiness}: checks
+ * whether a tool-using shared agent's credentials will work for
+ * visitors — i.e. whether the share binds environments
+ * (`environment_refs`) and each one is shared with the organization.
  *
  * The check runs only when the share is enabled with a public audience
  * (org-audience shares reject bindings at the proto boundary), the
  * deployment is cloud (local mode has no guest runtime or secret
- * gating), and the agent declares MCP server usages. All lookups run as
- * the owner viewing the dialog, who can read the bound environments.
+ * gating), and the agent declares MCP server usages.
  */
 export function useShareToolReadiness(
   agent: Agent,
   draft: AgentShareDraft,
 ): ShareToolReadiness {
-  const stigmer = useStigmer();
   const deploymentMode = useDeploymentMode();
-  const [checked, setChecked] = useState<ShareToolReadiness>(NA);
-
   const hasMcpTools = (agent.spec?.mcpServerUsages?.length ?? 0) > 0;
   const applicable =
     draft.enabled &&
@@ -68,64 +39,5 @@ export function useShareToolReadiness(
     deploymentMode === "cloud" &&
     hasMcpTools;
 
-  // Stable key for the effect: the visibility lookups depend only on
-  // which environments are bound, not on the array's identity.
-  const refsKey = useMemo(
-    () => draft.environmentRefs.map((ref) => `${ref.org}/${ref.slug}`).join(","),
-    [draft.environmentRefs],
-  );
-
-  const shouldFetch = applicable && refsKey !== "";
-
-  useEffect(() => {
-    if (!shouldFetch) {
-      setChecked(NA);
-      return;
-    }
-
-    let cancelled = false;
-    setChecked({ status: "checking" });
-
-    (async (): Promise<ShareToolReadiness> => {
-      const privateRefs: string[] = [];
-      for (const ref of refsKey.split(",")) {
-        const [org, slug] = ref.split("/");
-        try {
-          const env = await stigmer.environment.getByReference({ org, slug });
-          if (
-            env.metadata?.visibility !== ApiResourceVisibility.visibility_org
-          ) {
-            privateRefs.push(ref);
-          }
-        } catch {
-          // Unreadable ref (deleted, foreign): the runtime's merge will
-          // skip it for visitors too — surface it as blocking.
-          privateRefs.push(ref);
-        }
-      }
-
-      return privateRefs.length === 0
-        ? { status: "ready" }
-        : { status: "blocked", privateEnvironments: privateRefs };
-    })().then(
-      (result) => {
-        if (!cancelled) setChecked(result);
-      },
-      () => {
-        // The hint is best-effort pre-flight advice — a failed check must
-        // never block the dialog. The runtime error path still diagnoses.
-        if (!cancelled) setChecked(NA);
-      },
-    );
-
-    return () => {
-      cancelled = true;
-    };
-  }, [shouldFetch, refsKey, stigmer]);
-
-  if (!applicable) return NA;
-  // Zero bindings needs no lookup: a tool-using agent without bound
-  // credentials is broken for visitors by construction.
-  if (refsKey === "") return NEEDS_CREDENTIALS;
-  return checked;
+  return useToolCredentialsReadiness(applicable, draft.environmentRefs);
 }

package/src/styles.css

@@ -158,6 +158,20 @@
     -moz-osx-font-smoothing: grayscale;
   }
 
+  /* The provider's in-tree container ([data-stgm-root]) ships with NO
+     layout styling — deliberately (#260, DD-019). A default
+     `height: 100%` looks benign ("resolves to auto under auto-height
+     parents") but is not: when the container's parent is a flex item
+     (e.g. a `flex-1` prose column), flexbox treats the item's flexed
+     size as definite for percentage resolution, and the container
+     balloons to it even in a fully content-sized page. Fixed-height
+     embedders instead opt in from host CSS, where the layout is known:
+
+       .stgm[data-stgm-root] { height: 100%; min-height: 0; }
+
+     `data-stgm-root` is the stable public selector for exactly this.
+     Do not add sizing rules for it here. */
+
   @keyframes stgm-fade-in-up {
     from {
       opacity: 0;