@stigmer/react 3.1.17 → 3.2.1

package/src/settings/ChannelAppsSection.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import { useCallback, useRef, useState } from "react";
+import type { ChannelApp } from "@stigmer/protos/ai/stigmer/agentic/channelapp/v1/api_pb";
+import { ChannelAppListPanel } from "../channel-app/ChannelAppListPanel.js";
+import {
+  CreateChannelAppForm,
+  type ChannelAppCreateHandoff,
+} from "../channel-app/CreateChannelAppForm.js";
+import { ChannelAppDetailPanel } from "../channel-app/ChannelAppDetailPanel.js";
+import { useDeploymentMode } from "../deployment-mode.js";
+import { CloudFeatureNotice } from "../internal/CloudFeatureNotice.js";
+import { useActiveOrgSlug } from "../organization/OrgProvider.js";
+
+type FlowState =
+  | { phase: "idle" }
+  | { phase: "creating" }
+  | {
+      phase: "editing";
+      channelApp: ChannelApp;
+      /**
+       * Once-visible create-flow values (the WhatsApp verify token),
+       * held in memory only for the detail panel's phase-two setup.
+       * Absent when editing reopens from the list later.
+       */
+      createHandoff?: ChannelAppCreateHandoff;
+    };
+
+/**
+ * Settings section for the organization's channel apps — customer-owned
+ * provider apps (Slack apps, Meta WhatsApp apps) that agent channels
+ * install through. For Slack that replaces the shared Stigmer app (bring
+ * your own app: your bot name and icon, and one agent per app per
+ * workspace, so multiple agents can serve one workspace); for WhatsApp a
+ * channel app is the only way — there is no platform Meta app (DD-WA-2).
+ *
+ * After registering an app here, the connect dialog on any agent's
+ * Channels tab offers it as the serving app.
+ */
+export function ChannelAppsSection() {
+  const org = useActiveOrgSlug();
+  // Channel installs (the consumer of these credentials) are cloud-only;
+  // gate the whole section the way the Channels tab gates connects.
+  const installsAvailable = useDeploymentMode() === "cloud";
+
+  const [flow, setFlow] = useState<FlowState>({ phase: "idle" });
+  const listRefetchRef = useRef<(() => void) | null>(null);
+
+  const handleRefetchRef = useCallback((refetch: () => void) => {
+    listRefetchRef.current = refetch;
+  }, []);
+
+  const handleCreated = useCallback(
+    (app: ChannelApp, createHandoff: ChannelAppCreateHandoff) => {
+      listRefetchRef.current?.();
+      // Creation lands on the detail panel deliberately: phase two of the
+      // setup (the events webhook URL — plus, for WhatsApp, the verify
+      // token carried in the handoff) only exists now.
+      setFlow({ phase: "editing", channelApp: app, createHandoff });
+    },
+    [],
+  );
+
+  const handleUpdated = useCallback(() => {
+    listRefetchRef.current?.();
+    setFlow({ phase: "idle" });
+  }, []);
+
+  const handleDeleted = useCallback(() => {
+    listRefetchRef.current?.();
+    setFlow({ phase: "idle" });
+  }, []);
+
+  return (
+    <section aria-labelledby="channel-apps-heading">
+      <div className="mb-3 flex items-center justify-between">
+        <h2
+          id="channel-apps-heading"
+          className="text-foreground text-sm font-semibold"
+        >
+          Channel Apps
+        </h2>
+
+        {installsAvailable && org && flow.phase === "idle" && (
+          <button
+            type="button"
+            onClick={() => setFlow({ phase: "creating" })}
+            className="text-primary hover:text-foreground text-xs font-medium transition-colors"
+          >
+            + New channel app
+          </button>
+        )}
+      </div>
+      <p className="text-muted-foreground mb-4 text-xs">
+        Your own provider apps for serving agent channels. A Slack app
+        gives the bot your name and icon, and lets multiple agents serve
+        the same workspace — one per app. A Meta app is how WhatsApp
+        channels connect — every WhatsApp channel installs through one.
+      </p>
+
+      {!installsAvailable ? (
+        <CloudFeatureNotice>
+          Channel apps are not available in local mode. Channel installs
+          require Stigmer Cloud.
+        </CloudFeatureNotice>
+      ) : flow.phase === "creating" ? (
+        <div className="border-border bg-card rounded-lg border p-4">
+          <CreateChannelAppForm
+            org={org}
+            onCreated={handleCreated}
+            onCancel={() => setFlow({ phase: "idle" })}
+          />
+        </div>
+      ) : flow.phase === "editing" ? (
+        <div className="border-border bg-card rounded-lg border p-4">
+          <ChannelAppDetailPanel
+            channelApp={flow.channelApp}
+            createHandoff={flow.createHandoff}
+            onUpdated={handleUpdated}
+            onDeleted={handleDeleted}
+            onBack={() => setFlow({ phase: "idle" })}
+          />
+        </div>
+      ) : (
+        <ChannelAppListPanel
+          org={org}
+          onEdit={(app) => setFlow({ phase: "editing", channelApp: app })}
+          onRefetchRef={handleRefetchRef}
+        />
+      )}
+    </section>
+  );
+}

package/src/settings/index.ts

@@ -12,4 +12,5 @@ export { IdentityProvidersSection } from "./IdentityProvidersSection.js";
 export type { IdentityProvidersSectionProps } from "./IdentityProvidersSection.js";
 export { PlatformClientsSection } from "./PlatformClientsSection.js";
 export { OAuthAppsSection } from "./OAuthAppsSection.js";
+export { ChannelAppsSection } from "./ChannelAppsSection.js";
 export { UsageSection } from "./UsageSection.js";

package/src/settings/settings-nav.ts

@@ -7,6 +7,7 @@ import {
   CreditCard,
   KeyRound,
   Link,
+  MessageSquare,
   Plug,
   ShieldCheck,
   Users,
@@ -65,6 +66,11 @@ export const SETTINGS_NAV_GROUPS: readonly SettingsNavGroup[] = [
       },
       { href: "/settings/environments", label: "Environments", icon: Box },
       { href: "/settings/oauth-apps", label: "OAuth Apps", icon: AppWindow },
+      {
+        href: "/settings/channel-apps",
+        label: "Channel Apps",
+        icon: MessageSquare,
+      },
     ],
   },
   {

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")),