@stigmer/react 3.11.0 → 3.12.0

package/src/__tests__/helpers/open-menu.ts

@@ -0,0 +1,88 @@
+import { screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+/**
+ * Open a Base UI floating-trigger popup (action menu, dropdown) the way a
+ * real pointer does, and fail with the exact stage that died.
+ *
+ * WHY THIS EXISTS (oss#483): Base UI commits a trigger's interactive props
+ * (open handlers, `aria-expanded`) one store-notification cycle AFTER the
+ * button first appears in the DOM. A test that clicks immediately after
+ * render can hit that window — the click lands on a not-yet-wired button
+ * and the open is never attempted. Invisible at human speed, the window
+ * widens under CI load into intermittent "menu never opened" timeouts
+ * (~5% per attempt under CPU starvation; mechanism pinned by probing
+ * `aria-expanded` synchronously after the click: `null`, with the menu
+ * root's `onOpenChange` never firing). The readiness stage below closes
+ * the race by construction; the pointer-fidelity click keeps the test on
+ * the open path real users exercise.
+ *
+ * Failure semantics: each stage throws a named error, so a CI log
+ * pinpoints WHICH link broke (trigger never wired / open never happened /
+ * items never rendered) instead of an opaque 8s query timeout. There are
+ * deliberately NO retries: a helper that re-clicks would mask genuine
+ * open-path regressions in the SDK.
+ *
+ * Caveat: `userEvent` deadlocks under `vi.useFakeTimers()` unless
+ * configured with `advanceTimers` — don't call this helper from
+ * fake-timer tests (none of the menu suites use them today).
+ *
+ * Not a `.test` file and inside `__tests__` deliberately: vitest does not
+ * collect it, and the build/typedoc excludes keep it out of the published
+ * package.
+ */
+export async function openMenu(trigger: HTMLElement): Promise<void> {
+  await openFloatingTrigger(trigger, "menuitem");
+}
+
+/**
+ * Trigger-generic core: Base UI selects/comboboxes share the same wiring
+ * lifecycle and the same latent race (their popup items are `option`
+ * instead of `menuitem`). Widen to an exported `openSelect` if that family
+ * ever needs it — do not fork the stages.
+ */
+async function openFloatingTrigger(
+  trigger: HTMLElement,
+  itemRole: "menuitem" | "option",
+): Promise<void> {
+  // Stage 1 — trigger wiring. `aria-expanded` arrives in the same props
+  // merge as the open handlers, so its presence is the observable signal
+  // that the button is actually clickable-as-a-trigger.
+  await waitFor(() => {
+    if (!trigger.hasAttribute("aria-expanded")) {
+      throw new Error(
+        `openMenu stage "trigger-wiring": trigger is rendered but Base UI ` +
+          `has not attached its interactive props yet (no aria-expanded). ` +
+          `Trigger: ${describeTrigger(trigger)}`,
+      );
+    }
+  });
+
+  // Stage 2 — the click, with full pointer + focus fidelity (pointerdown,
+  // mousedown, focus, pointerup, mouseup, click) so the primary
+  // mousedown-open path is exercised, not the bare-click fallback.
+  await userEvent.click(trigger);
+
+  // Stage 3 — the open must register on the trigger itself.
+  await waitFor(() => {
+    if (trigger.getAttribute("aria-expanded") !== "true") {
+      throw new Error(
+        `openMenu stage "open": the click was dispatched but the trigger ` +
+          `never reported open (aria-expanded=` +
+          `${JSON.stringify(trigger.getAttribute("aria-expanded"))}). ` +
+          `Trigger: ${describeTrigger(trigger)}`,
+      );
+    }
+  });
+
+  // Stage 4 — items must be queryable. findAllByRole (not waitFor) so a
+  // timeout here still produces testing-library's DOM dump.
+  await screen.findAllByRole(itemRole);
+}
+
+function describeTrigger(trigger: HTMLElement): string {
+  const label = trigger.getAttribute("aria-label") ?? trigger.textContent;
+  return `<${trigger.tagName.toLowerCase()} aria-label=${JSON.stringify(
+    label,
+  )} connected=${trigger.isConnected}>`;
+}

package/src/__tests__/portal-container.test.tsx

@@ -1,10 +1,10 @@
 import { describe, it, expect, beforeAll, afterEach } from "vitest";
 import { render, renderHook, screen, cleanup } from "@testing-library/react";
-import { fireEvent } from "@testing-library/react";
 import type { Stigmer } from "@stigmer/sdk";
 import { StigmerProvider } from "../provider";
 import { useStigmerPortalContainer } from "../portal-container";
 import { Menu, MenuTrigger, MenuContent, MenuItem } from "../internal/menu";
+import { openMenu } from "./helpers/open-menu";
 
 // Regression tests for stigmer-cloud#271: Base UI treats an EXPLICIT
 // `container={null}` as "wait for a container" and renders the popup
@@ -85,9 +85,9 @@ describe("standalone portal rendering (no StigmerProvider)", () => {
       </Menu>,
     );
 
-    fireEvent.click(screen.getByRole("button", { name: "Open actions" }));
+    await openMenu(screen.getByRole("button", { name: "Open actions" }));
 
-    const item = await screen.findByRole("menuitem", { name: "Rename" });
+    const item = screen.getByRole("menuitem", { name: "Rename" });
 
     // Portaled for real: in the document, but NOT inside the render
     // container — Base UI appended it to document.body.

package/src/activity/useRecentActivity.ts

@@ -60,8 +60,9 @@ const EPOCH = new Date(0);
  * - Fallback to `specAudit.createdAt` for documents without status updates
  * - Pagination / trimming to the requested page size
  *
- * The OSS server does not implement this RPC yet (stigmer#461): against a
- * pure OSS backend the fetch rejects and `error` is surfaced to the caller.
+ * Both editions implement the RPC with identical merge/projection semantics
+ * (the OSS server since stigmer#461; it is single-tenant, so the caller sees
+ * every stored resource and the org filter is a no-op there).
  */
 export function useRecentActivity(
   options?: UseRecentActivityOptions,

package/src/agent/AgentDetailView.tsx

@@ -4,7 +4,6 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { cn } from "@stigmer/theme";
 import { timestampDate } from "@bufbuild/protobuf/wkt";
 import type {
-  DatastoreUsage,
   McpServerUsage,
   SubAgent,
 } from "@stigmer/protos/ai/stigmer/agentic/agent/v1/spec_pb";
@@ -17,7 +16,6 @@ import { useUpdateAgent } from "./useUpdateAgent.js";
 import { agentToInput } from "./internal/agentToInput.js";
 import { toError } from "../internal/toError.js";
 import { ErrorMessage } from "../error/ErrorMessage.js";
-import { DatastoreIcon } from "../datastore/DatastoreDetailView.js";
 import { VisibilityBadge } from "../library/VisibilitySelector.js";
 import { useManageAccess } from "../access/useManageAccess.js";
 import { AgentShareList } from "../sharing/AgentShareList.js";
@@ -61,13 +59,6 @@ export interface AgentDetailViewProps {
    * Provides `org` and `slug` of the referenced skill.
    */
   readonly onSkillClick?: (ref: { org: string; slug: string }) => void;
-  /**
-   * Called when a datastore reference is clicked.
-   * Provides `org` and `slug` of the referenced datastore so the
-   * consumer can wire navigation. When the reference has no explicit
-   * org, the agent's own org is used as fallback.
-   */
-  readonly onDatastoreClick?: (ref: { org: string; slug: string }) => void;
   /**
    * Called once when the agent resource has been fetched successfully.
    * Provides the resource display name for use cases like breadcrumbs,
@@ -186,7 +177,7 @@ export interface AgentDetailViewProps {
  * Fetches the agent via {@link useAgent} internally and renders its
  * full configuration inside a {@link ResourceDetailShell}: a
  * standardized header with action bar, followed by structured content
- * sections (instructions, MCP server usages, skills, datastores,
+ * sections (instructions, MCP server usages, skills,
  * sub-agents, and environment variables). Sections with no data are
  * omitted entirely — reducing visual noise per Nielsen heuristic #8.
  *
@@ -225,7 +216,6 @@ export function AgentDetailView({
   slug,
   onMcpServerClick,
   onSkillClick,
-  onDatastoreClick,
   onResourceLoad,
   primaryAction,
   actions,
@@ -249,8 +239,8 @@ export function AgentDetailView({
 
   // Last failed inline save, attributed to the field that was edited so
   // only that section shows the message. The backend's message is the
-  // UX (DD-006): e.g. the datastore exposure guard refuses public +
-  // datastore_usages with an actionable FAILED_PRECONDITION message.
+  // UX (DD-006): server refusals arrive as actionable FAILED_PRECONDITION
+  // messages.
   const [saveError, setSaveError] = useState<{
     field: string;
     message: string;
@@ -314,11 +304,9 @@ export function AgentDetailView({
         onMcpServerClick?.(node.ref);
       } else if (node.kind === "skill") {
         onSkillClick?.(node.ref);
-      } else if (node.kind === "datastore") {
-        onDatastoreClick?.(node.ref);
       }
     },
-    [onMcpServerClick, onSkillClick, onDatastoreClick],
+    [onMcpServerClick, onSkillClick],
   );
 
   const onResourceLoadRef = useRef(onResourceLoad);
@@ -456,7 +444,6 @@ export function AgentDetailView({
         description={spec?.description}
         onMcpServerClick={onMcpServerClick}
         onSkillClick={onSkillClick}
-        onDatastoreClick={onDatastoreClick}
         editable={editable}
         isSaving={isUpdating}
         saveField={saveField}
@@ -496,7 +483,6 @@ function AgentOverview({
   description,
   onMcpServerClick,
   onSkillClick,
-  onDatastoreClick,
   editable,
   isSaving,
   saveField,
@@ -508,7 +494,6 @@ function AgentOverview({
   readonly description?: string;
   readonly onMcpServerClick?: (ref: { org: string; slug: string }) => void;
   readonly onSkillClick?: (ref: { org: string; slug: string }) => void;
-  readonly onDatastoreClick?: (ref: { org: string; slug: string }) => void;
   readonly editable?: boolean;
   readonly isSaving?: boolean;
   readonly saveField?: <K extends keyof import("@stigmer/sdk").AgentInput>(
@@ -519,8 +504,8 @@ function AgentOverview({
   readonly clearSaveError?: () => void;
 }) {
   // The failed save's message, shown only under the section that owns
-  // the field — a rejection of a datastore edit must not appear under
-  // the skills editor.
+  // the field — a rejection of one section's edit must not appear under
+  // another section's editor.
   const errorFor = (field: keyof import("@stigmer/sdk").AgentInput) =>
     saveError?.field === field ? saveError.message : undefined;
   const handleInstructionsSave = useCallback(
@@ -548,15 +533,6 @@ function AgentOverview({
     [saveField],
   );
 
-  const handleDatastoresSave = useCallback(
-    async (refs: ResourceRefRow[]) =>
-      saveField?.(
-        "datastoreUsages",
-        refs.map((r) => ({ datastoreRef: { org: r.org, slug: r.slug } })),
-      ) ?? false,
-    [saveField],
-  );
-
   const handleEnvSave = useCallback(
     async (rows: KeyValueRow[]) => {
       const env: Record<string, { isSecret?: boolean; description?: string; optional?: boolean }> = {};
@@ -600,19 +576,6 @@ function AgentOverview({
     [spec?.skillRefs, agentOrg],
   );
 
-  const datastoreRefRows: ResourceRefRow[] = useMemo(
-    () =>
-      (spec?.datastoreUsages ?? []).map((usage) => ({
-        org: usage.datastoreRef?.org || agentOrg,
-        slug: usage.datastoreRef?.slug ?? "",
-        label:
-          usage.datastoreRef?.org && usage.datastoreRef.org !== agentOrg
-            ? `${usage.datastoreRef.org}/${usage.datastoreRef.slug}`
-            : usage.datastoreRef?.slug ?? "",
-      })),
-    [spec?.datastoreUsages, agentOrg],
-  );
-
   const envRows: KeyValueRow[] = useMemo(
     () =>
       Object.entries(spec?.env ?? {})
@@ -631,13 +594,11 @@ function AgentOverview({
   const showInstructions = editable || !!spec?.instructions;
   const showMcpServers = editable || (spec && spec.mcpServerUsages.length > 0);
   const showSkills = editable || (spec && spec.skillRefs.length > 0);
-  const showDatastores = editable || (spec && spec.datastoreUsages.length > 0);
   const showSubAgents = editable || (spec && spec.subAgents.length > 0);
   const showEnv = editable || (spec?.env && Object.keys(spec.env).length > 0);
 
   const [mcpEditing, setMcpEditing] = useState(false);
   const [skillsEditing, setSkillsEditing] = useState(false);
-  const [datastoresEditing, setDatastoresEditing] = useState(false);
   const [envEditing, setEnvEditing] = useState(false);
 
   // Entering edit mode discards the previous attempt's error — the
@@ -656,13 +617,6 @@ function AgentOverview({
     },
     [clearSaveError],
   );
-  const handleDatastoresEditingChange = useCallback(
-    (editing: boolean) => {
-      if (editing) clearSaveError?.();
-      setDatastoresEditing(editing);
-    },
-    [clearSaveError],
-  );
   const handleEnvEditingChange = useCallback(
     (editing: boolean) => {
       if (editing) clearSaveError?.();
@@ -765,31 +719,6 @@ function AgentOverview({
         </Section>
       )}
 
-      {showDatastores && (
-        <Section title="Datastores" count={spec?.datastoreUsages.length} onEdit={editable ? () => handleDatastoresEditingChange(!datastoresEditing) : undefined}>
-          {editable ? (
-            <InlineEditResourceList
-              value={datastoreRefRows}
-              onSave={handleDatastoresSave}
-              isSaving={isSaving}
-              error={errorFor("datastoreUsages")}
-              editing={datastoresEditing}
-              onEditingChange={handleDatastoresEditingChange}
-              onItemClick={onDatastoreClick ? (ref) => onDatastoreClick({ org: ref.org, slug: ref.slug }) : undefined}
-              itemIcon={<DatastoreIcon className="stg:size-4" />}
-              resourceLabel="datastore"
-              defaultOrg={agentOrg}
-            />
-          ) : (
-            <DatastoresContent
-              usages={spec?.datastoreUsages ?? []}
-              defaultOrg={agentOrg}
-              onDatastoreClick={onDatastoreClick}
-            />
-          )}
-        </Section>
-      )}
-
       {showSubAgents && (
         <SubAgentsSection
           subAgents={spec?.subAgents ?? []}
@@ -986,59 +915,6 @@ function SkillsContent({
   );
 }
 
-function DatastoresContent({
-  usages,
-  defaultOrg,
-  onDatastoreClick,
-}: {
-  readonly usages: readonly DatastoreUsage[];
-  readonly defaultOrg: string;
-  readonly onDatastoreClick?: (ref: { org: string; slug: string }) => void;
-}) {
-  return (
-    <div className="stg:flex stg:flex-col">
-      {usages.map((usage, index) => {
-        const ref = usage.datastoreRef;
-        if (!ref) return null;
-
-        const refOrg = ref.org || defaultOrg;
-        const label =
-          ref.org && ref.org !== defaultOrg
-            ? `${ref.org}/${ref.slug}`
-            : ref.slug;
-
-        const row = (
-          <div className="stg:flex stg:items-center stg:gap-3">
-            <DatastoreIcon className="stg:size-4 stg:shrink-0 stg:text-muted-foreground" />
-            <span className="stg:text-sm stg:font-medium stg:text-foreground">
-              {label}
-            </span>
-          </div>
-        );
-
-        return onDatastoreClick ? (
-          <button
-            key={ref.slug || index}
-            type="button"
-            onClick={() => onDatastoreClick({ org: refOrg, slug: ref.slug })}
-            className={cn(
-              "stg:w-full stg:rounded-md stg:px-3 stg:py-2 stg:text-left stg:transition-colors",
-              "stg:hover:bg-accent-hover",
-              "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-inset stg:focus-visible:ring-ring",
-            )}
-          >
-            {row}
-          </button>
-        ) : (
-          <div key={ref.slug || index} className="stg:px-3 stg:py-2">
-            {row}
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
 interface SubAgentDraft {
   name: string;
   description: string;

package/src/agent/internal/__tests__/agentToInput.test.ts

@@ -9,7 +9,7 @@ import { agentToInput } from "../agentToInput";
 
 /**
  * Regression guard for stigmer/stigmer#319 — the console agent editor
- * silently deleting `datastore_usages` on save.
+ * silently deleting an unmapped spec field on save.
  *
  * `agentToInput()` reconstructs a full `AgentInput` from a fetched Agent
  * so inline edits can re-submit the whole spec (the backend does full
@@ -91,19 +91,10 @@ function fullyPopulatedAgent(): Agent {
       env: {
         CLINIC_API_KEY: {
           isSecret: true,
-          description: "Records bridge credential",
+          description: "Clinic API credential",
         },
         REGION: { optional: true },
       },
-      datastoreUsages: [
-        {
-          datastoreRef: {
-            org: "acme",
-            slug: "clinic-records",
-            kind: ApiResourceKind.datastore,
-          },
-        },
-      ],
     },
   });
 }

package/src/agent/internal/agentToInput.ts

@@ -1,7 +1,6 @@
 import type { Agent } from "@stigmer/protos/ai/stigmer/agentic/agent/v1/api_pb";
 import type {
   AgentInput,
-  DatastoreUsageInput,
   EnvVarDeclarationInput,
   McpServerUsageInput,
   SubAgentInput,
@@ -73,15 +72,6 @@ export function agentToInput(agent: Agent): AgentInput {
       modelOverride: sa.modelOverride || undefined,
     }));
 
-  const datastoreUsages: DatastoreUsageInput[] | undefined =
-    spec?.datastoreUsages?.map((usage) => ({
-      datastoreRef: {
-        org: usage.datastoreRef?.org ?? "",
-        slug: usage.datastoreRef?.slug ?? "",
-        version: usage.datastoreRef?.version || undefined,
-      },
-    }));
-
   let env: Record<string, EnvVarDeclarationInput> | undefined;
   if (spec?.env && Object.keys(spec.env).length > 0) {
     env = {};
@@ -108,6 +98,5 @@ export function agentToInput(agent: Agent): AgentInput {
     skillRefs: skillRefs?.length ? skillRefs : undefined,
     subAgents: subAgents?.length ? subAgents : undefined,
     env,
-    datastoreUsages: datastoreUsages?.length ? datastoreUsages : undefined,
   };
 }

package/src/agent-instance/AgentInstanceList.tsx

@@ -11,6 +11,7 @@ import { Button } from "../button/Button.js";
 import { useEnvironmentList } from "../environment/useEnvironmentList.js";
 import { ResourceVisibilityControl } from "../library/ResourceVisibilityControl.js";
 import { useCheckPermission } from "../iam-policy/useCheckPermission.js";
+import { TruncatedText } from "../internal/truncated-text.js";
 import { AgentInstanceEmptyState } from "./AgentInstanceEmptyState.js";
 
 /** Label marking a user's auto-managed personal instance. */
@@ -216,12 +217,10 @@ function InstanceRow({
       <td className="stg:px-4 stg:py-2.5">
         <div className="stg:min-w-0">
           <div className="stg:flex stg:min-w-0 stg:items-center stg:gap-2">
-            <span
-              className="stg:truncate stg:font-medium stg:text-foreground"
-              title={meta?.name || meta?.slug || undefined}
-            >
-              {meta?.name || meta?.slug || "\u2014"}
-            </span>
+            <TruncatedText
+              text={meta?.name || meta?.slug || "\u2014"}
+              className="stg:font-medium stg:text-foreground"
+            />
             {isPersonal && (
               <span
                 className={cn(

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

@@ -1,6 +1,7 @@
 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 { openMenu } from "../../__tests__/helpers/open-menu";
 import { AgentInstanceList } from "../AgentInstanceList";
 
 // Isolate the row-actions behavior under test from the data, environment,
@@ -79,7 +80,7 @@ describe("AgentInstanceList row actions", () => {
 
     // 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/ }));
+    await openMenu(screen.getByRole("button", { name: /^Actions for/ }));
 
     expect(
       await screen.findByRole("menuitem", { name: "Start session" }),
@@ -100,7 +101,7 @@ describe("AgentInstanceList row actions", () => {
       />,
     );
 
-    fireEvent.click(screen.getByRole("button", { name: /^Actions for/ }));
+    await openMenu(screen.getByRole("button", { name: /^Actions for/ }));
     fireEvent.click(await screen.findByRole("menuitem", { name: "Start session" }));
 
     expect(onStart).toHaveBeenCalledTimes(1);
@@ -120,7 +121,7 @@ describe("AgentInstanceList row actions", () => {
       />,
     );
 
-    fireEvent.click(screen.getByRole("button", { name: /^Actions for/ }));
+    await openMenu(screen.getByRole("button", { name: /^Actions for/ }));
     fireEvent.click(await screen.findByRole("menuitem", { name: "Delete" }));
 
     expect(onDelete).toHaveBeenCalledWith(inst);
@@ -138,7 +139,7 @@ describe("AgentInstanceList row actions", () => {
       />,
     );
 
-    fireEvent.click(screen.getByRole("button", { name: /^Actions for/ }));
+    await openMenu(screen.getByRole("button", { name: /^Actions for/ }));
     expect(
       await screen.findByRole("menuitem", { name: "Start session" }),
     ).toBeTruthy();

package/src/api-key/ApiKeyListPanel.tsx

@@ -5,6 +5,7 @@ import { cn } from "@stigmer/theme";
 import { getUserMessage } from "@stigmer/sdk";
 import { timestampDate } from "@bufbuild/protobuf/wkt";
 import type { ApiKey } from "@stigmer/protos/ai/stigmer/iam/apikey/v1/api_pb";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import { useApiKeyList } from "./useApiKeyList.js";
 import { useDeleteApiKey } from "./useDeleteApiKey.js";
 
@@ -242,9 +243,16 @@ function ApiKeyRow({
       {/* Metadata columns */}
       <div className="stg:hidden stg:sm:flex stg:shrink-0 stg:items-center stg:gap-4 stg:text-xs stg:text-muted-foreground">
         {createdAt && (
-          <span title={`Created ${timestampDate(createdAt).toISOString()}`}>
-            {formatShortDate(timestampDate(createdAt))}
-          </span>
+          <Tooltip>
+            <TooltipTrigger
+              render={<time dateTime={timestampDate(createdAt).toISOString()} />}
+            >
+              {formatShortDate(timestampDate(createdAt))}
+            </TooltipTrigger>
+            <TooltipContent side="top">
+              {`Created ${timestampDate(createdAt).toISOString()}`}
+            </TooltipContent>
+          </Tooltip>
         )}
         <span>
           {neverExpires