@stigmer/react 3.1.16 → 3.2.0

package/src/__tests__/provider-theme-scope.test.tsx

@@ -91,4 +91,35 @@ describe("StigmerProvider theme scope", () => {
     expect(portal.getAttribute("data-stgm-color-mode")).toBe("dark");
     expect(portal.className).toBe(inTree.className);
   });
+
+  /**
+   * Regression test for #260: the two scope containers must stay
+   * distinguishable via their stable marker attributes. `data-stgm-root`
+   * is the documented in-tree-only styling seam (e.g. the fixed-height
+   * embedding recipe); if it ever leaked onto the portal container, host
+   * CSS targeting the seam would size a stray element at the end of
+   * `document.body`.
+   */
+  it("marks the in-tree container with data-stgm-root and the portal with data-stgm-portal, never both", () => {
+    render(
+      <StigmerProvider client={makeClient()}>
+        <div data-testid="scope-child" />
+      </StigmerProvider>,
+    );
+
+    const child = document.querySelector('[data-testid="scope-child"]');
+    const inTree = child?.closest(".stgm") as HTMLElement | null;
+    const portal = document.body.querySelector(
+      "[data-stgm-portal]",
+    ) as HTMLElement | null;
+
+    expect(inTree).not.toBeNull();
+    expect(portal).not.toBeNull();
+
+    expect(inTree!.hasAttribute("data-stgm-root")).toBe(true);
+    expect(inTree!.hasAttribute("data-stgm-portal")).toBe(false);
+
+    expect(portal!.hasAttribute("data-stgm-portal")).toBe(true);
+    expect(portal!.hasAttribute("data-stgm-root")).toBe(false);
+  });
 });

package/src/agent-instance/AgentInstanceList.tsx

@@ -1,14 +1,16 @@
 "use client";
 
 import { useCallback, useEffect, useMemo, useRef } from "react";
+import { MoreHorizontal, Play, Trash2 } from "lucide-react";
 import { cn } from "@stigmer/theme";
 import type { AgentInstance } from "@stigmer/protos/ai/stigmer/agentic/agentinstance/v1/api_pb";
 import { ApiResourceVisibility } from "@stigmer/protos/ai/stigmer/commons/apiresource/enum_pb";
 import { useAgentInstances } from "./useAgentInstances.js";
+import { ActionMenu } from "../action-menu/index.js";
 import { Button } from "../button/Button.js";
 import { useEnvironmentList } from "../environment/useEnvironmentList.js";
 import { ResourceVisibilityControl } from "../library/ResourceVisibilityControl.js";
-import { PermissionGate } from "../iam-policy/PermissionGate.js";
+import { useCheckPermission } from "../iam-policy/useCheckPermission.js";
 import { AgentInstanceEmptyState } from "./AgentInstanceEmptyState.js";
 
 /** Label marking a user's auto-managed personal instance. */
@@ -139,13 +141,16 @@ export function AgentInstanceList({
       </div>
 
       <div className="overflow-hidden rounded-lg border border-border">
-        <table className="w-full text-sm">
+        {/* table-fixed keeps the layout deterministic: Name/Environments flex
+            and truncate, Visibility/Actions take fixed widths, so long
+            content 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">Environments</th>
-              <th className="px-4 py-2 text-left font-medium text-muted-foreground">Visibility</th>
-              <th className="px-4 py-2 text-right font-medium text-muted-foreground">Actions</th>
+              <th className="w-36 px-4 py-2 text-left font-medium text-muted-foreground">Visibility</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">
@@ -190,24 +195,37 @@ function InstanceRow({
 
   const envRefs = instance.spec?.environmentRefs ?? [];
 
+  // Delete is the only permission-gated row action (Start session is offered
+  // whenever the host wires it). Resolved here so the kebab is hidden when it
+  // would hold no items — never an empty overflow menu.
+  const { allowed: canDelete } = useCheckPermission(
+    { kind: "agent_instance", id },
+    "can_delete",
+  );
+  const showStartSession = !!onStartSessionClick;
+  const showDelete = !!onDeleteClick && canDelete;
+
   return (
     <tr
       className={cn(
         "transition-colors",
-        onRowClick && "cursor-pointer hover:bg-muted/30",
+        onRowClick && "cursor-pointer hover:bg-accent-hover",
       )}
       onClick={() => onRowClick?.(instance)}
     >
       <td className="px-4 py-2.5">
-        <div>
-          <div className="flex items-center gap-2">
-            <span className="font-medium text-foreground">
+        <div className="min-w-0">
+          <div className="flex min-w-0 items-center gap-2">
+            <span
+              className="truncate font-medium text-foreground"
+              title={meta?.name || meta?.slug || undefined}
+            >
               {meta?.name || meta?.slug || "\u2014"}
             </span>
             {isPersonal && (
               <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",
                 )}
@@ -217,7 +235,7 @@ function InstanceRow({
             )}
           </div>
           {instance.spec?.description && (
-            <p className="text-[0.65rem] text-muted-foreground truncate max-w-48">
+            <p className="text-[0.65rem] text-muted-foreground truncate">
               {instance.spec.description}
             </p>
           )}
@@ -259,40 +277,40 @@ function InstanceRow({
         )}
       </td>
 
+      {/* stopPropagation so opening the kebab never triggers the row's
+          click. 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">
-          {onStartSessionClick && (
-            <button
-              type="button"
-              onClick={() => onStartSessionClick(instance)}
-              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",
-              )}
-            >
-              Start session
-            </button>
-          )}
-          {onDeleteClick && (
-            <PermissionGate
-              resource={{ kind: "agent_instance", id }}
-              relation="can_delete"
+        {(showStartSession || showDelete) && (
+          <ActionMenu>
+            <ActionMenu.Trigger
+              className="ml-auto"
+              aria-label={`Actions for ${meta?.name || meta?.slug}`}
             >
-              <button
-                type="button"
-                onClick={() => onDeleteClick(instance)}
-                className={cn(
-                  "rounded px-2 py-1 text-xs font-medium",
-                  "text-destructive hover:bg-destructive/10",
-                  "focus:outline-none focus:ring-1 focus:ring-ring",
-                )}
-              >
-                Delete
-              </button>
-            </PermissionGate>
-          )}
-        </div>
+              <MoreHorizontal className="size-4" />
+            </ActionMenu.Trigger>
+            <ActionMenu.Content>
+              {showStartSession && (
+                <ActionMenu.Item
+                  icon={<Play />}
+                  onSelect={() => onStartSessionClick?.(instance)}
+                >
+                  Start session
+                </ActionMenu.Item>
+              )}
+              {showStartSession && showDelete && <ActionMenu.Separator />}
+              {showDelete && (
+                <ActionMenu.Item
+                  icon={<Trash2 />}
+                  variant="destructive"
+                  onSelect={() => onDeleteClick?.(instance)}
+                >
+                  Delete
+                </ActionMenu.Item>
+              )}
+            </ActionMenu.Content>
+          </ActionMenu>
+        )}
       </td>
     </tr>
   );

package/src/agent-instance/__tests__/AgentInstanceList.test.tsx

@@ -0,0 +1,161 @@
+import { describe, it, expect, vi, beforeAll, afterEach } from "vitest";
+import { render, screen, fireEvent, cleanup } from "@testing-library/react";
+import { ApiResourceVisibility } from "@stigmer/protos/ai/stigmer/commons/apiresource/enum_pb";
+import { AgentInstanceList } from "../AgentInstanceList";
+
+// The kebab menu portals its content; without a StigmerProvider the portal
+// container is null and nothing mounts — pin it to document.body.
+vi.mock("../../portal-container", () => ({
+  useStigmerPortalContainer: () => document.body,
+}));
+
+// Isolate the row-actions behavior under test from the data, environment,
+// visibility, and permission subsystems (each has its own tests).
+const data = vi.hoisted(() => ({
+  instances: [] as unknown[],
+  isLoading: false,
+  error: null as Error | null,
+}));
+vi.mock("../useAgentInstances", () => ({
+  useAgentInstances: () => ({ ...data, refetch: vi.fn() }),
+}));
+vi.mock("../../environment/useEnvironmentList", () => ({
+  useEnvironmentList: () => ({ environments: [] }),
+}));
+vi.mock("../../library/ResourceVisibilityControl", () => ({
+  ResourceVisibilityControl: () => <div data-testid="visibility" />,
+}));
+const perm = vi.hoisted(() => ({ canDelete: true }));
+vi.mock("../../iam-policy/useCheckPermission", () => ({
+  useCheckPermission: () => ({
+    allowed: perm.canDelete,
+    isLoading: false,
+    error: null,
+  }),
+}));
+
+beforeAll(() => {
+  // 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();
+  data.instances = [];
+  data.error = null;
+  perm.canDelete = true;
+});
+
+function makeInstance(overrides?: {
+  id?: string;
+  name?: string;
+  slug?: string;
+}) {
+  return {
+    metadata: {
+      id: overrides?.id ?? "ai_1",
+      name: overrides?.name ?? "prod-instance",
+      slug: overrides?.slug ?? "prod-instance",
+      visibility: ApiResourceVisibility.visibility_private,
+      labels: {},
+    },
+    spec: { environmentRefs: [] },
+  } as never;
+}
+
+describe("AgentInstanceList row actions", () => {
+  it("collapses the row actions into a kebab exposing Start session and Delete", async () => {
+    data.instances = [makeInstance()];
+    render(
+      <AgentInstanceList
+        agentId="agt_1"
+        org="acme"
+        onStartSessionClick={vi.fn()}
+        onDeleteClick={vi.fn()}
+      />,
+    );
+
+    // No always-visible action buttons; the row shows a single kebab.
+    expect(screen.queryByRole("button", { name: "Start session" })).toBeNull();
+    fireEvent.click(screen.getByRole("button", { name: /^Actions for/ }));
+
+    expect(
+      await screen.findByRole("menuitem", { name: "Start session" }),
+    ).toBeTruthy();
+    expect(screen.getByRole("menuitem", { name: "Delete" })).toBeTruthy();
+  });
+
+  it("fires onStartSessionClick with the row's instance", async () => {
+    const onStart = vi.fn();
+    const inst = makeInstance();
+    data.instances = [inst];
+    render(
+      <AgentInstanceList
+        agentId="agt_1"
+        org="acme"
+        onStartSessionClick={onStart}
+        onDeleteClick={vi.fn()}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /^Actions for/ }));
+    fireEvent.click(await screen.findByRole("menuitem", { name: "Start session" }));
+
+    expect(onStart).toHaveBeenCalledTimes(1);
+    expect(onStart).toHaveBeenCalledWith(inst);
+  });
+
+  it("fires onDeleteClick from the menu", async () => {
+    const onDelete = vi.fn();
+    const inst = makeInstance();
+    data.instances = [inst];
+    render(
+      <AgentInstanceList
+        agentId="agt_1"
+        org="acme"
+        onStartSessionClick={vi.fn()}
+        onDeleteClick={onDelete}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /^Actions for/ }));
+    fireEvent.click(await screen.findByRole("menuitem", { name: "Delete" }));
+
+    expect(onDelete).toHaveBeenCalledWith(inst);
+  });
+
+  it("omits Delete when the viewer cannot delete, keeping Start session", async () => {
+    perm.canDelete = false;
+    data.instances = [makeInstance()];
+    render(
+      <AgentInstanceList
+        agentId="agt_1"
+        org="acme"
+        onStartSessionClick={vi.fn()}
+        onDeleteClick={vi.fn()}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /^Actions for/ }));
+    expect(
+      await screen.findByRole("menuitem", { name: "Start session" }),
+    ).toBeTruthy();
+    expect(screen.queryByRole("menuitem", { name: "Delete" })).toBeNull();
+  });
+
+  it("renders no kebab when the host wires no row actions", () => {
+    data.instances = [makeInstance()];
+    render(<AgentInstanceList agentId="agt_1" org="acme" />);
+
+    expect(screen.getByText("prod-instance")).toBeTruthy();
+    expect(screen.queryByRole("button", { name: /^Actions for/ })).toBeNull();
+  });
+});