@stigmer/react 3.12.1 → 3.12.3

package/skill/SkillDiffDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SkillDiffDialog.d.ts","sourceRoot":"","sources":["../../src/skill/SkillDiffDialog.tsx"],"names":[],"mappings":"AAYA,yEAAyE;AACzE,MAAM,WAAW,oBAAoB;IACnC,qDAAqD;IACrD,QAAQ,CAAC,eAAe,EAAE,MAAM,CAAC;IACjC,oDAAoD;IACpD,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,oEAAoE;IACpE,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,mEAAmE;IACnE,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;CAC1B;AAED,yCAAyC;AACzC,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,QAAQ,CAAC,KAAK,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAC5C,kFAAkF;IAClF,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;CAC9B;AAMD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,oBAAoB,kDAwFvE"}
+{"version":3,"file":"SkillDiffDialog.d.ts","sourceRoot":"","sources":["../../src/skill/SkillDiffDialog.tsx"],"names":[],"mappings":"AAaA,yEAAyE;AACzE,MAAM,WAAW,oBAAoB;IACnC,qDAAqD;IACrD,QAAQ,CAAC,eAAe,EAAE,MAAM,CAAC;IACjC,oDAAoD;IACpD,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,oEAAoE;IACpE,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,mEAAmE;IACnE,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;CAC1B;AAED,yCAAyC;AACzC,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,QAAQ,CAAC,KAAK,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAC5C,kFAAkF;IAClF,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;CAC9B;AAMD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,oBAAoB,kDAgEvE"}

package/skill/SkillDiffDialog.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback } from "react";
 import { cn } from "@stigmer/theme";
+import { DialogShell } from "../internal/DialogShell.js";
 import { useSkillDiff } from "./useSkillDiff.js";
 import { MultiFileDiffView } from "../version-history/MultiFileDiffView.js";
 import { ErrorMessage } from "../error/ErrorMessage.js";
@@ -28,31 +29,14 @@ import { ErrorMessage } from "../error/ErrorMessage.js";
  * ```
  */
 export function SkillDiffDialog({ state, onClose }) {
-    const dialogRef = useRef(null);
-    useEffect(() => {
-        const dialog = dialogRef.current;
-        if (!dialog)
-            return;
-        if (state && !dialog.open) {
-            dialog.showModal();
-        }
-        else if (!state && dialog.open) {
-            dialog.close();
-        }
-    }, [state]);
-    const handleDialogCancel = useCallback((e) => {
-        e.preventDefault();
-        onClose();
-    }, [onClose]);
-    const handleBackdropClick = useCallback((e) => {
-        if (e.target === e.currentTarget) {
+    const handleOpenChange = useCallback((open) => {
+        if (!open)
             onClose();
-        }
     }, [onClose]);
     const { diff, isLoading, error } = useSkillDiff(state?.fromArtifactKey ?? null, state?.toArtifactKey ?? null);
     if (!state)
         return null;
-    return (_jsx("dialog", { ref: dialogRef, onCancel: handleDialogCancel, onClick: handleBackdropClick, className: cn("stg:fixed stg:inset-0 stg:z-50 stg:m-auto stg:h-[85vh] stg:w-full stg:max-w-4xl stg:rounded-lg stg:border stg:border-border stg:bg-popover stg:p-0 stg:text-popover-foreground stg:shadow-lg", "stg:backdrop:bg-black/50", "stg:open:animate-in stg:open:fade-in-0 stg:open:zoom-in-95"), children: _jsxs("div", { className: "stg:flex stg:h-full stg:flex-col", children: [_jsxs("div", { className: "stg:flex stg:shrink-0 stg:items-center stg:justify-between stg:border-b stg:border-border stg:px-4 stg:py-3", children: [_jsxs("div", { className: "stg:flex stg:items-center stg:gap-2 stg:text-sm", children: [_jsx("span", { className: "stg:font-medium stg:text-foreground", children: "Comparing" }), _jsx("code", { className: "stg:rounded stg:bg-muted stg:px-1.5 stg:py-0.5 stg:font-mono stg:text-[11px] stg:text-muted-foreground", children: state.fromLabel }), _jsx(ArrowIcon, { className: "stg:size-3.5 stg:text-muted-foreground-faint" }), _jsx("code", { className: "stg:rounded stg:bg-muted stg:px-1.5 stg:py-0.5 stg:font-mono stg:text-[11px] stg:text-muted-foreground", children: state.toLabel })] }), _jsx("button", { type: "button", onClick: onClose, "aria-label": "Close diff viewer", className: cn("stg:rounded-md stg:p-1.5 stg:text-muted-foreground stg:transition-colors", "stg:hover:bg-accent-hover stg:hover:text-foreground", "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring"), children: _jsx(CloseIcon, { className: "stg:size-4" }) })] }), _jsx("div", { className: "stg:flex-1 stg:overflow-auto stg:p-4", children: isLoading ? (_jsx(DiffSkeleton, {})) : error ? (_jsx(ErrorMessage, { error: error })) : diff ? (_jsx(MultiFileDiffView, { diff: diff })) : null })] }) }));
+    return (_jsx(DialogShell, { open: true, onOpenChange: handleOpenChange, width: "4xl", dismissOnBackdrop: true, className: "stg:h-[85vh]", "aria-label": "Skill version diff", children: _jsxs("div", { className: "stg:flex stg:h-full stg:flex-col", children: [_jsxs("div", { className: "stg:flex stg:shrink-0 stg:items-center stg:justify-between stg:border-b stg:border-border stg:px-4 stg:py-3", children: [_jsxs("div", { className: "stg:flex stg:items-center stg:gap-2 stg:text-sm", children: [_jsx("span", { className: "stg:font-medium stg:text-foreground", children: "Comparing" }), _jsx("code", { className: "stg:rounded stg:bg-muted stg:px-1.5 stg:py-0.5 stg:font-mono stg:text-[11px] stg:text-muted-foreground", children: state.fromLabel }), _jsx(ArrowIcon, { className: "stg:size-3.5 stg:text-muted-foreground-faint" }), _jsx("code", { className: "stg:rounded stg:bg-muted stg:px-1.5 stg:py-0.5 stg:font-mono stg:text-[11px] stg:text-muted-foreground", children: state.toLabel })] }), _jsx("button", { type: "button", onClick: onClose, "aria-label": "Close diff viewer", className: cn("stg:rounded-md stg:p-1.5 stg:text-muted-foreground stg:transition-colors", "stg:hover:bg-accent-hover stg:hover:text-foreground", "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring"), children: _jsx(CloseIcon, { className: "stg:size-4" }) })] }), _jsx("div", { className: "stg:flex-1 stg:overflow-auto stg:p-4", children: isLoading ? (_jsx(DiffSkeleton, {})) : error ? (_jsx(ErrorMessage, { error: error })) : diff ? (_jsx(MultiFileDiffView, { diff: diff })) : null })] }) }));
 }
 // ---------------------------------------------------------------------------
 // Loading skeleton

package/skill/SkillDiffDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkillDiffDialog.js","sourceRoot":"","sources":["../../src/skill/SkillDiffDialog.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SkillDiffDialog.js","sourceRoot":"","sources":["../../src/skill/SkillDiffDialog.tsx"],"names":[],"mappings":"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"}

package/src/access/ManageAccessDialog.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { useCallback, useRef, type ReactNode } from "react";
+import { useCallback, useId, type ReactNode } from "react";
 import { cn } from "@stigmer/theme";
+import { DialogShell } from "../internal/DialogShell.js";
 import { hasGrantableRoles } from "@stigmer/sdk";
 import { PeopleWithAccess } from "../iam-policy/PeopleWithAccess.js";
 import { ResourceVisibilityControl } from "../library/ResourceVisibilityControl.js";
@@ -76,39 +77,24 @@ export function ManageAccessDialog({
   visibility,
   extraSection,
 }: ManageAccessDialogProps) {
-  const dialogRef = useRef<HTMLDialogElement>(null);
+  // Instance-scoped title id (oss#593): a reusable component must not
+  // hardcode DOM ids — hosts legitimately mount this dialog more than once
+  // per page (e.g. zone-cached detail pages), and duplicate ids break the
+  // aria-labelledby association for every copy after the first.
+  const titleId = useId();
 
   const handleClose = useCallback(() => {
-    dialogRef.current?.close();
     onOpenChange(false);
   }, [onOpenChange]);
 
-  // Sync native dialog open state (matches the SDK dialog convention).
-  const prevOpenRef = useRef(false);
-  if (open !== prevOpenRef.current) {
-    prevOpenRef.current = open;
-    if (open) {
-      requestAnimationFrame(() => {
-        if (dialogRef.current && !dialogRef.current.open) {
-          dialogRef.current.showModal();
-        }
-      });
-    } else if (dialogRef.current?.open) {
-      dialogRef.current.close();
-    }
-  }
-
   const showPeople = hasGrantableRoles(resource.kind);
 
   return (
-    <dialog
-      ref={dialogRef}
-      onClose={handleClose}
-      className={cn(
-        "stg:fixed stg:inset-0 stg:m-auto stg:w-full stg:max-w-md stg:rounded-xl stg:border stg:border-border stg:bg-popover stg:p-0 stg:shadow-xl",
-        "stg:backdrop:bg-black/50",
-      )}
-      aria-labelledby="manage-access-title"
+    <DialogShell
+      open={open}
+      onOpenChange={onOpenChange}
+      width="md"
+      aria-labelledby={titleId}
     >
       {/* Body mounts only while open so the access-list fetch is lazy. */}
       {open && (
@@ -117,7 +103,7 @@ export function ManageAccessDialog({
           <div className="stg:flex stg:items-start stg:justify-between stg:border-b stg:border-border stg:px-6 stg:py-4">
             <div className="stg:min-w-0">
               <h2
-                id="manage-access-title"
+                id={titleId}
                 className="stg:text-base stg:font-semibold stg:text-foreground"
               >
                 Manage access
@@ -200,7 +186,7 @@ export function ManageAccessDialog({
           </div>
         </div>
       )}
-    </dialog>
+    </DialogShell>
   );
 }
 

package/src/activity/format-relative-time.ts

@@ -1,16 +1,18 @@
 /**
- * Compact relative-time formatter for recent-activity rows.
+ * The SDK's compact relative-time vocabulary: one deterministic "how long
+ * ago" formatter so timestamps read identically everywhere (consolidated
+ * from eight per-component drifting copies — stigmer-cloud#269). Pass
+ * `now` to freeze the clock in tests.
  *
- * The recents list sorts by LAST ACTIVITY (`statusAudit.updatedAt`), while
- * execution names embed their CREATION time — so an old run legitimately
- * re-bumped by a status change (a cancel, a late failure) sorts above
- * newer-named items and reads as "wrong order" unless the row says why it
- * is there. This stamp is that explanation: it renders the sort key the
- * user cannot otherwise see.
- *
- * Compact single-unit output — a sidebar row suffix, not prose:
+ * Compact single-unit output — a row suffix, not prose:
  * `now`, `5m`, `3h`, `6d`, then a short date (`Jul 12`, `Jul 12, 2025`)
  * once "days ago" stops being how people think about it.
+ *
+ * Born on the recents list, where it renders the otherwise-invisible sort
+ * key: the list sorts by LAST ACTIVITY (`statusAudit.updatedAt`) while
+ * execution names embed their CREATION time, so an old run re-bumped by a
+ * late status change sorts above newer-named items and reads as "wrong
+ * order" unless the row says why it is there.
  */
 export function formatRelativeTime(date: Date, now?: Date): string {
   const ref = now ?? new Date();

package/src/agent/steps/CapabilitiesStep.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useState } from "react";
+import { useCallback, useId, useState } from "react";
 import { cn } from "@stigmer/theme";
 import type { McpServerUsageInput, ResourceRef } from "@stigmer/sdk";
 import { McpServerPicker } from "../../mcp-server/McpServerPicker.js";
@@ -142,13 +142,16 @@ function CollapsibleSection({
   readonly onToggle: (id: string) => void;
   readonly children: React.ReactNode;
 }) {
+  // The disclosure-panel DOM id is minted per mount — deriving it from the
+  // semantic section key would collide when two wizards mount on one page.
+  const panelId = useId();
   return (
     <div className="stg:overflow-hidden stg:rounded-lg stg:border stg:border-border">
       <button
         type="button"
         onClick={() => onToggle(id)}
         aria-expanded={expanded}
-        aria-controls={`stgm-wizard-section-${id}`}
+        aria-controls={panelId}
         className={cn(
           "stg:flex stg:w-full stg:items-center stg:justify-between stg:px-4 stg:py-3 stg:text-left stg:transition-colors",
           "stg:hover:bg-accent-hover",
@@ -174,7 +177,7 @@ function CollapsibleSection({
 
       {expanded && (
         <div
-          id={`stgm-wizard-section-${id}`}
+          id={panelId}
           className="stg:border-t stg:border-border stg:px-4 stg:py-4"
         >
           {children}

package/src/agent/steps/IdentityStep.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback } from "react";
+import { useCallback, useId } from "react";
 import { cn } from "@stigmer/theme";
 import { generateSlug } from "../../internal/slug.js";
 import type { AgentWizardData } from "./types.js";
@@ -28,6 +28,7 @@ export function IdentityStep({
   updateData,
   validationError,
 }: IdentityStepProps) {
+  const baseId = useId();
   const handleNameChange = useCallback(
     (value: string) => {
       if (!data.slugTouched) {
@@ -72,13 +73,13 @@ export function IdentityStep({
         {/* Name */}
         <div className="stg:space-y-1.5">
           <label
-            htmlFor="stgm-wizard-agent-name"
+            htmlFor={`${baseId}-name`}
             className="stg:text-sm stg:font-medium stg:text-foreground"
           >
             Name <span className="stg:text-destructive">*</span>
           </label>
           <input
-            id="stgm-wizard-agent-name"
+            id={`${baseId}-name`}
             type="text"
             value={data.name}
             onChange={(e) => handleNameChange(e.target.value)}
@@ -95,13 +96,13 @@ export function IdentityStep({
         {/* Slug */}
         <div className="stg:space-y-1.5">
           <label
-            htmlFor="stgm-wizard-agent-slug"
+            htmlFor={`${baseId}-slug`}
             className="stg:text-sm stg:font-medium stg:text-foreground"
           >
             Slug
           </label>
           <input
-            id="stgm-wizard-agent-slug"
+            id={`${baseId}-slug`}
             type="text"
             value={data.slug}
             onChange={(e) => handleSlugChange(e.target.value)}
@@ -129,13 +130,13 @@ export function IdentityStep({
       {/* Description */}
       <div className="stg:space-y-1.5">
         <label
-          htmlFor="stgm-wizard-agent-description"
+          htmlFor={`${baseId}-description`}
           className="stg:text-sm stg:font-medium stg:text-foreground"
         >
           Description
         </label>
         <input
-          id="stgm-wizard-agent-description"
+          id={`${baseId}-description`}
           type="text"
           value={data.description}
           onChange={(e) => updateData({ description: e.target.value })}
@@ -153,13 +154,13 @@ export function IdentityStep({
       <div className="stg:grid stg:gap-4 stg:sm:grid-cols-2">
         <div className="stg:space-y-1.5">
           <label
-            htmlFor="stgm-wizard-agent-icon"
+            htmlFor={`${baseId}-icon`}
             className="stg:text-sm stg:font-medium stg:text-foreground"
           >
             Icon URL
           </label>
           <input
-            id="stgm-wizard-agent-icon"
+            id={`${baseId}-icon`}
             type="url"
             value={data.iconUrl}
             onChange={(e) => updateData({ iconUrl: e.target.value })}
@@ -177,13 +178,17 @@ export function IdentityStep({
             Visibility
           </legend>
           <div className="stg:flex stg:gap-2">
+            {/* The radio-group name is minted per mount: a hardcoded name
+                would merge two mounted wizards into one keyboard group. */}
             <VisibilityOption
+              name={`${baseId}-visibility`}
               value="private"
               label="Private"
               checked={data.visibility === "private"}
               onChange={() => updateData({ visibility: "private" })}
             />
             <VisibilityOption
+              name={`${baseId}-visibility`}
               value="public"
               label="Public"
               checked={data.visibility === "public"}
@@ -196,7 +201,7 @@ export function IdentityStep({
       {/* Instructions */}
       <div className="stg:space-y-1.5">
         <label
-          htmlFor="stgm-wizard-agent-instructions"
+          htmlFor={`${baseId}-instructions`}
           className="stg:text-sm stg:font-medium stg:text-foreground"
         >
           Instructions
@@ -205,7 +210,7 @@ export function IdentityStep({
           The system prompt that defines this agent&apos;s behavior.
         </p>
         <textarea
-          id="stgm-wizard-agent-instructions"
+          id={`${baseId}-instructions`}
           value={data.instructions}
           onChange={(e) => updateData({ instructions: e.target.value })}
           placeholder="You are a helpful assistant that..."
@@ -226,11 +231,13 @@ export function IdentityStep({
 // ---------------------------------------------------------------------------
 
 function VisibilityOption({
+  name,
   value,
   label,
   checked,
   onChange,
 }: {
+  readonly name: string;
   readonly value: string;
   readonly label: string;
   readonly checked: boolean;
@@ -247,7 +254,7 @@ function VisibilityOption({
     >
       <input
         type="radio"
-        name="stgm-wizard-agent-visibility"
+        name={name}
         value={value}
         checked={checked}
         onChange={onChange}

package/src/agent-instance/CreateAgentInstanceDialog.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useId, useState } from "react";
 import { cn } from "@stigmer/theme";
+import { DialogShell } from "../internal/DialogShell.js";
 import { ApiResourceVisibility } from "@stigmer/protos/ai/stigmer/commons/apiresource/enum_pb";
 import type { AgentInstance } from "@stigmer/protos/ai/stigmer/agentic/agentinstance/v1/api_pb";
 import type { ResourceRef } from "@stigmer/sdk";
@@ -39,9 +40,17 @@ export function CreateAgentInstanceDialog({
   agentId,
   onCreated,
 }: CreateAgentInstanceDialogProps) {
-  const dialogRef = useRef<HTMLDialogElement>(null);
   const { create, isCreating, error, clearError } = useCreateAgentInstance();
 
+  // Instance-scoped element ids (oss#593): a reusable component must not
+  // hardcode DOM ids — hosts legitimately mount this dialog more than once
+  // per page (e.g. zone-cached detail pages), and duplicate ids silently
+  // break the label→input association for every copy after the first.
+  const baseId = useId();
+  const titleId = `${baseId}-title`;
+  const nameId = `${baseId}-name`;
+  const descriptionId = `${baseId}-description`;
+
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
   const [environmentRefs, setEnvironmentRefs] = useState<ResourceRef[]>([]);
@@ -56,11 +65,17 @@ export function CreateAgentInstanceDialog({
   }, [clearError]);
 
   const handleClose = useCallback(() => {
-    dialogRef.current?.close();
     onOpenChange(false);
     resetForm();
   }, [onOpenChange, resetForm]);
 
+  const handleShellOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      if (!nextOpen) handleClose();
+    },
+    [handleClose],
+  );
+
   const handleSubmit = useCallback(
     async (e: React.FormEvent) => {
       e.preventDefault();
@@ -84,36 +99,17 @@ export function CreateAgentInstanceDialog({
     [name, org, agentId, description, environmentRefs, visibility, create, onCreated, handleClose],
   );
 
-  // Sync native dialog open state
-  const prevOpenRef = useRef(false);
-  if (open !== prevOpenRef.current) {
-    prevOpenRef.current = open;
-    if (open) {
-      // Must defer showModal to after render
-      requestAnimationFrame(() => {
-        if (dialogRef.current && !dialogRef.current.open) {
-          dialogRef.current.showModal();
-        }
-      });
-    } else if (dialogRef.current?.open) {
-      dialogRef.current.close();
-    }
-  }
-
   return (
-    <dialog
-      ref={dialogRef}
-      onClose={handleClose}
-      className={cn(
-        "stg:fixed stg:inset-0 stg:m-auto stg:w-full stg:max-w-lg stg:rounded-xl stg:border stg:border-border stg:bg-popover stg:p-0 stg:shadow-xl",
-        "stg:backdrop:bg-black/50",
-      )}
-      aria-labelledby="create-agent-instance-title"
+    <DialogShell
+      open={open}
+      onOpenChange={handleShellOpenChange}
+      width="lg"
+      aria-labelledby={titleId}
     >
       <form onSubmit={handleSubmit} className="stg:flex stg:flex-col">
         {/* Header */}
         <div className="stg:flex stg:items-center stg:justify-between stg:border-b stg:border-border stg:px-6 stg:py-4">
-          <h2 id="create-agent-instance-title" className="stg:text-base stg:font-semibold stg:text-foreground">
+          <h2 id={titleId} className="stg:text-base stg:font-semibold stg:text-foreground">
             Create Agent Instance
           </h2>
           <button
@@ -134,11 +130,11 @@ export function CreateAgentInstanceDialog({
         <div className="stg:space-y-5 stg:px-6 stg:py-5">
           {/* Name */}
           <div>
-            <label htmlFor="agent-instance-name" className="stg:block stg:text-sm stg:font-medium stg:text-foreground stg:mb-1.5">
+            <label htmlFor={nameId} className="stg:block stg:text-sm stg:font-medium stg:text-foreground stg:mb-1.5">
               Name <span className="stg:text-destructive">*</span>
             </label>
             <input
-              id="agent-instance-name"
+              id={nameId}
               type="text"
               required
               value={name}
@@ -160,11 +156,11 @@ export function CreateAgentInstanceDialog({
 
           {/* Description */}
           <div>
-            <label htmlFor="agent-instance-description" className="stg:block stg:text-sm stg:font-medium stg:text-foreground stg:mb-1.5">
+            <label htmlFor={descriptionId} className="stg:block stg:text-sm stg:font-medium stg:text-foreground stg:mb-1.5">
               Description
             </label>
             <textarea
-              id="agent-instance-description"
+              id={descriptionId}
               value={description}
               onChange={(e) => setDescription(e.target.value)}
               placeholder="What is this instance used for?"
@@ -246,7 +242,7 @@ export function CreateAgentInstanceDialog({
           </button>
         </div>
       </form>
-    </dialog>
+    </DialogShell>
   );
 }
 

package/src/api-key/ApiKeyCreatedAlert.tsx

@@ -1,7 +1,9 @@
 "use client";
 
-import { useCallback, useState } from "react";
+import { useCallback, useRef } from "react";
 import { cn } from "@stigmer/theme";
+import { selectElementText } from "../internal/select-element-text.js";
+import { useCopyFeedback } from "../internal/useCopyFeedback.js";
 
 // ---------------------------------------------------------------------------
 // Public API
@@ -47,25 +49,14 @@ export function ApiKeyCreatedAlert({
   onDismiss,
   className,
 }: ApiKeyCreatedAlertProps) {
-  const [copied, setCopied] = useState(false);
+  const { copy, copied } = useCopyFeedback();
+  const revealRef = useRef<HTMLElement>(null);
 
   const handleCopy = useCallback(async () => {
-    try {
-      await navigator.clipboard.writeText(rawKey);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch {
-      // Fallback: select the text so the user can manually copy
-      const el = document.getElementById("stgm-api-key-reveal");
-      if (el) {
-        const selection = window.getSelection();
-        const range = document.createRange();
-        range.selectNodeContents(el);
-        selection?.removeAllRanges();
-        selection?.addRange(range);
-      }
-    }
-  }, [rawKey]);
+    if (await copy(rawKey)) return;
+    // Rejected write: select the revealed key so the user can copy manually.
+    if (revealRef.current) selectElementText(revealRef.current);
+  }, [copy, rawKey]);
 
   return (
     <div
@@ -100,7 +91,7 @@ export function ApiKeyCreatedAlert({
 
       <div className="stg:flex stg:items-center stg:gap-2">
         <code
-          id="stgm-api-key-reveal"
+          ref={revealRef}
           className={cn(
             "stg:min-w-0 stg:flex-1 stg:select-all stg:truncate stg:rounded-md",
             "stg:border stg:border-input stg:bg-background stg:px-2.5 stg:py-1.5",

package/src/api-key/ApiKeyListPanel.tsx

@@ -8,6 +8,8 @@ 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";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
+import { formatRelativeTime } from "../activity/format-relative-time.js";
 
 // ---------------------------------------------------------------------------
 // Public API
@@ -200,7 +202,7 @@ function ApiKeyRow({
               "stg:disabled:pointer-events-none stg:disabled:opacity-50",
             )}
           >
-            {isDeleting && <SpinnerIcon />}
+            {isDeleting && <SpinnerIcon size={12} />}
             Delete
           </button>
           <button
@@ -297,27 +299,6 @@ function formatShortDate(date: Date): string {
   });
 }
 
-function formatRelativeTime(date: Date, now?: Date): string {
-  const ref = now?.getTime() ?? Date.now();
-  const diffMs = ref - date.getTime();
-
-  if (diffMs < 0) return "Just now";
-
-  const seconds = Math.floor(diffMs / 1000);
-  if (seconds < 60) return "Just now";
-
-  const minutes = Math.floor(seconds / 60);
-  if (minutes < 60) return `${minutes}m ago`;
-
-  const hours = Math.floor(minutes / 60);
-  if (hours < 24) return `${hours}h ago`;
-
-  const days = Math.floor(hours / 24);
-  if (days < 30) return `${days}d ago`;
-
-  return formatShortDate(date);
-}
-
 // ---------------------------------------------------------------------------
 // Icons
 // ---------------------------------------------------------------------------
@@ -363,20 +344,3 @@ function TrashIcon() {
   );
 }
 
-function SpinnerIcon() {
-  return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 16 16"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      className="stg:animate-spin"
-      aria-hidden="true"
-    >
-      <path d="M8 2a6 6 0 1 0 6 6" />
-    </svg>
-  );
-}