@stigmer/react 3.12.1 → 3.12.2

package/src/channel/ChannelCredentialsDialog.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useId, useRef, useState } from "react";
 import { cn } from "@stigmer/theme";
 import { getUserMessage, type ResourceRef } from "@stigmer/sdk";
 import type { Agent } from "@stigmer/protos/ai/stigmer/agentic/agent/v1/api_pb";
@@ -53,6 +53,12 @@ export function ChannelCredentialsDialog({
 }: ChannelCredentialsDialogProps) {
   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);
@@ -80,9 +86,9 @@ export function ChannelCredentialsDialog({
       onClose={handleClose}
       className={cn(
         "stg:w-full stg:max-w-md stg:rounded-xl stg:border stg:border-border stg:bg-popover stg:p-0 stg:shadow-xl",
-        modal ? "stg:fixed stg:inset-0 stg:m-auto stg:backdrop:bg-black/50" : "stg:relative",
+        modal ? "stg:fixed stg:inset-0 stg:m-auto stg:backdrop:bg-backdrop" : "stg:relative",
       )}
-      aria-labelledby="channel-credentials-title"
+      aria-labelledby={titleId}
     >
       {/* Body mounts only while open so its draft resets per session —
           reopening never resumes stale, unsaved edits. */}
@@ -92,6 +98,7 @@ export function ChannelCredentialsDialog({
           channel={channel}
           onSaved={onSaved}
           onClose={handleClose}
+          titleId={titleId}
         />
       )}
     </dialog>
@@ -103,11 +110,14 @@ function ChannelCredentialsDialogBody({
   channel,
   onSaved,
   onClose,
+  titleId,
 }: {
   readonly agent: Agent;
   readonly channel: AgentChannel;
   readonly onSaved?: () => void;
   readonly onClose: () => void;
+  /** Heading id minted by the outer dialog for its aria-labelledby. */
+  readonly titleId: string;
 }) {
   const channelName =
     channel.metadata?.name || channel.metadata?.slug || "this channel";
@@ -142,7 +152,7 @@ function ChannelCredentialsDialogBody({
       <div className="stg:flex stg:items-start stg:justify-between stg:gap-3 stg:border-b stg:border-border stg:px-5 stg:py-4">
         <div className="stg:min-w-0">
           <h2
-            id="channel-credentials-title"
+            id={titleId}
             className="stg:text-sm stg:font-semibold stg:text-foreground"
           >
             Tool credentials

package/src/channel/ChannelTemplatesDialog.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useRef, type ReactNode } from "react";
+import { useCallback, useId, useRef, type ReactNode } from "react";
 import { ExternalLink, LayoutTemplate, X } from "lucide-react";
 import { cn } from "@stigmer/theme";
 import { getUserMessage } from "@stigmer/sdk";
@@ -90,6 +90,7 @@ export function ChannelTemplatesDialog({
   modal = true,
 }: ChannelTemplatesDialogProps) {
   const dialogRef = useRef<HTMLDialogElement>(null);
+  const titleId = useId();
 
   const handleClose = useCallback(() => {
     dialogRef.current?.close();
@@ -120,14 +121,15 @@ export function ChannelTemplatesDialog({
         // Wider than the conversations dialog on purpose: template
         // bodies are the content, and a narrow column shreds them.
         "stg:w-full stg:max-w-2xl stg:rounded-xl stg:border stg:border-border stg:bg-popover stg:p-0 stg:shadow-xl",
-        modal ? "stg:fixed stg:inset-0 stg:m-auto stg:backdrop:bg-black/50" : "stg:relative",
+        modal ? "stg:fixed stg:inset-0 stg:m-auto stg:backdrop:bg-backdrop" : "stg:relative",
       )}
-      aria-labelledby="channel-templates-title"
+      aria-labelledby={titleId}
     >
       {/* Body mounts only while open so each opening fetches fresh —
           approval statuses change on the provider's side at any time. */}
       {open && (
         <ChannelTemplatesDialogBody
+          titleId={titleId}
           channel={channel}
           onEditYaml={onEditYaml}
           onClose={handleClose}
@@ -138,10 +140,12 @@ export function ChannelTemplatesDialog({
 }
 
 function ChannelTemplatesDialogBody({
+  titleId,
   channel,
   onEditYaml,
   onClose,
 }: {
+  readonly titleId: string;
   readonly channel: AgentChannel;
   readonly onEditYaml?: () => void;
   readonly onClose: () => void;
@@ -154,7 +158,7 @@ function ChannelTemplatesDialogBody({
       <div className="stg:flex stg:items-start stg:justify-between stg:gap-3 stg:border-b stg:border-border stg:px-5 stg:py-4">
         <div className="stg:min-w-0">
           <h2
-            id="channel-templates-title"
+            id={titleId}
             className="stg:text-sm stg:font-semibold stg:text-popover-foreground"
           >
             Templates

package/src/channel/ConnectSlackDialog.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useMemo, useRef, useState } from "react";
+import { useCallback, useId, useMemo, useRef, useState } from "react";
 import { cn } from "@stigmer/theme";
 import { getErrorReason, type ResourceRef } from "@stigmer/sdk";
 import type { Agent } from "@stigmer/protos/ai/stigmer/agentic/agent/v1/api_pb";
@@ -91,6 +91,12 @@ export function ConnectSlackDialog({
 }: ConnectSlackDialogProps) {
   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);
@@ -120,9 +126,9 @@ export function ConnectSlackDialog({
       onClose={handleClose}
       className={cn(
         "stg:w-full stg:max-w-md stg:rounded-xl stg:border stg:border-border stg:bg-popover stg:p-0 stg:shadow-xl",
-        modal ? "stg:fixed stg:inset-0 stg:m-auto stg:backdrop:bg-black/50" : "stg:relative",
+        modal ? "stg:fixed stg:inset-0 stg:m-auto stg:backdrop:bg-backdrop" : "stg:relative",
       )}
-      aria-labelledby="connect-slack-title"
+      aria-labelledby={titleId}
     >
       {/* Body mounts only while open so its flow state resets per
           session — reopening the dialog never resumes a stale flow. */}
@@ -132,6 +138,7 @@ export function ConnectSlackDialog({
           channel={channel ?? null}
           onChannelsChanged={onChannelsChanged}
           onClose={handleClose}
+          titleId={titleId}
           channelAppsHref={channelAppsHref}
         />
       )}
@@ -149,6 +156,8 @@ interface ConnectSlackDialogBodyProps {
   readonly onChannelsChanged?: () => void;
   readonly onClose: () => void;
   readonly channelAppsHref?: string;
+  /** Heading id minted by the outer dialog for its aria-labelledby. */
+  readonly titleId: string;
 }
 
 function ConnectSlackDialogBody({
@@ -157,6 +166,7 @@ function ConnectSlackDialogBody({
   onChannelsChanged,
   onClose,
   channelAppsHref,
+  titleId,
 }: ConnectSlackDialogBodyProps) {
   const deploymentMode = useDeploymentMode();
   const agentName = agent.metadata?.name || agent.metadata?.slug || "this agent";
@@ -276,7 +286,7 @@ function ConnectSlackDialogBody({
       <div className="stg:flex stg:items-start stg:justify-between stg:gap-3 stg:border-b stg:border-border stg:px-5 stg:py-4">
         <div className="stg:flex stg:items-center stg:gap-2.5">
           <SlackMarkIcon className="stg:size-5 stg:text-foreground" />
-          <h2 id="connect-slack-title" className="stg:text-sm stg:font-semibold stg:text-foreground">
+          <h2 id={titleId} className="stg:text-sm stg:font-semibold stg:text-foreground">
             {channel ? "Reconnect to Slack" : "Connect to Slack"}
           </h2>
         </div>

package/src/channel/ConnectWhatsAppDialog.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useMemo, useRef, useState } from "react";
+import { useCallback, useId, useMemo, useRef, useState } from "react";
 import { cn } from "@stigmer/theme";
 import { getErrorReason, type ResourceRef } from "@stigmer/sdk";
 import type { Agent } from "@stigmer/protos/ai/stigmer/agentic/agent/v1/api_pb";
@@ -102,6 +102,12 @@ export function ConnectWhatsAppDialog({
 }: ConnectWhatsAppDialogProps) {
   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);
@@ -131,9 +137,9 @@ export function ConnectWhatsAppDialog({
       onClose={handleClose}
       className={cn(
         "stg:w-full stg:max-w-md stg:rounded-xl stg:border stg:border-border stg:bg-popover stg:p-0 stg:shadow-xl",
-        modal ? "stg:fixed stg:inset-0 stg:m-auto stg:backdrop:bg-black/50" : "stg:relative",
+        modal ? "stg:fixed stg:inset-0 stg:m-auto stg:backdrop:bg-backdrop" : "stg:relative",
       )}
-      aria-labelledby="connect-whatsapp-title"
+      aria-labelledby={titleId}
     >
       {/* Body mounts only while open so its flow state resets per
           session — reopening the dialog never resumes a stale flow. */}
@@ -144,6 +150,7 @@ export function ConnectWhatsAppDialog({
           onChannelsChanged={onChannelsChanged}
           onClose={handleClose}
           channelAppsHref={channelAppsHref}
+          titleId={titleId}
         />
       )}
     </dialog>
@@ -160,6 +167,8 @@ interface ConnectWhatsAppDialogBodyProps {
   readonly onChannelsChanged?: () => void;
   readonly onClose: () => void;
   readonly channelAppsHref?: string;
+  /** Heading id minted by the outer dialog for its aria-labelledby. */
+  readonly titleId: string;
 }
 
 function ConnectWhatsAppDialogBody({
@@ -168,6 +177,7 @@ function ConnectWhatsAppDialogBody({
   onChannelsChanged,
   onClose,
   channelAppsHref,
+  titleId,
 }: ConnectWhatsAppDialogBodyProps) {
   const stigmer = useStigmer();
   const deploymentMode = useDeploymentMode();
@@ -314,7 +324,7 @@ function ConnectWhatsAppDialogBody({
       <div className="stg:flex stg:items-start stg:justify-between stg:gap-3 stg:border-b stg:border-border stg:px-5 stg:py-4">
         <div className="stg:flex stg:items-center stg:gap-2.5">
           <WhatsAppMarkIcon className="stg:size-5 stg:text-foreground" />
-          <h2 id="connect-whatsapp-title" className="stg:text-sm stg:font-semibold stg:text-foreground">
+          <h2 id={titleId} className="stg:text-sm stg:font-semibold stg:text-foreground">
             {channel ? "Reconnect to WhatsApp" : "Connect to WhatsApp"}
           </h2>
         </div>

package/src/channel/useChannelSessions.ts

@@ -1,6 +1,9 @@
 "use client";
 
 import { create } from "@bufbuild/protobuf";
+// AgentChannel is type-only here so the doc link below resolves (the sibling
+// channel hooks import it for real use); the strict tsdoc gate guards it.
+import type { AgentChannel } from "@stigmer/protos/ai/stigmer/agentic/agentchannel/v1/api_pb";
 import type { Session } from "@stigmer/protos/ai/stigmer/agentic/session/v1/api_pb";
 import { ListSessionsByChannelRequestSchema } from "@stigmer/protos/ai/stigmer/agentic/session/v1/io_pb";
 import { useStigmer } from "../hooks.js";

package/src/channel-app/ChannelAppDetailPanel.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useMemo, useState, type FormEvent } from "react";
+import { type FormEvent, useCallback, useId, useMemo, useState } from "react";
 import { cn } from "@stigmer/theme";
 import { getUserMessage } from "@stigmer/sdk";
 import type { ChannelApp } from "@stigmer/protos/ai/stigmer/agentic/channelapp/v1/api_pb";
@@ -17,7 +17,8 @@ import {
   WHATSAPP_CHANNEL_APP_WEBHOOK_FIELDS,
   whatsappChannelAppWebhookUrl,
 } from "./whatsappAppSetup.js";
-import { CopyBlock, CopyRow, FormField, SpinnerIcon } from "./internal.js";
+import { CopyBlock, CopyRow, FormField } from "./internal.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 
 // ---------------------------------------------------------------------------
 // Public API
@@ -148,7 +149,7 @@ export function ChannelAppDetailPanel({
                 "stg:disabled:pointer-events-none stg:disabled:opacity-40",
               )}
             >
-              {isDeleting && <SpinnerIcon />}
+              {isDeleting && <SpinnerIcon size={12} />}
               Delete
             </button>
             <button
@@ -187,6 +188,7 @@ function SlackAppDetail({
   readonly consoleOrigin?: string;
   readonly onUpdated?: (app: ChannelApp) => void;
 }) {
+  const baseId = useId();
   const stigmer = useStigmer();
   const { update, isUpdating, error: updateError, clearError } = useUpdateChannelApp();
 
@@ -277,7 +279,7 @@ function SlackAppDetail({
         </p>
 
         <FormField
-          id="stgm-chapp-edit-client-id"
+          id={`${baseId}-client-id`}
           label="Client ID"
           value={clientId}
           onChange={setClientId}
@@ -286,7 +288,7 @@ function SlackAppDetail({
           required
         />
         <FormField
-          id="stgm-chapp-edit-client-secret"
+          id={`${baseId}-client-secret`}
           label="Client secret"
           value={clientSecret}
           onChange={setClientSecret}
@@ -296,7 +298,7 @@ function SlackAppDetail({
           required
         />
         <FormField
-          id="stgm-chapp-edit-signing-secret"
+          id={`${baseId}-signing-secret`}
           label="Signing secret"
           value={signingSecret}
           onChange={setSigningSecret}
@@ -321,7 +323,7 @@ function SlackAppDetail({
             "stg:disabled:pointer-events-none stg:disabled:opacity-40",
           )}
         >
-          {isUpdating && <SpinnerIcon />}
+          {isUpdating && <SpinnerIcon size={12} />}
           Save credentials
         </button>
       </form>
@@ -342,6 +344,7 @@ function WhatsAppAppDetail({
   readonly createHandoff?: ChannelAppCreateHandoff;
   readonly onUpdated?: (app: ChannelApp) => void;
 }) {
+  const baseId = useId();
   const stigmer = useStigmer();
   const { update, isUpdating, error: updateError, clearError } = useUpdateChannelApp();
 
@@ -446,7 +449,7 @@ function WhatsAppAppDetail({
         </p>
 
         <FormField
-          id="stgm-chapp-edit-app-id"
+          id={`${baseId}-app-id`}
           label="App ID"
           value={metaAppId}
           onChange={setMetaAppId}
@@ -455,7 +458,7 @@ function WhatsAppAppDetail({
           required
         />
         <FormField
-          id="stgm-chapp-edit-app-secret"
+          id={`${baseId}-app-secret`}
           label="App secret"
           value={appSecret}
           onChange={setAppSecret}
@@ -465,7 +468,7 @@ function WhatsAppAppDetail({
           required
         />
         <FormField
-          id="stgm-chapp-edit-access-token"
+          id={`${baseId}-access-token`}
           label="Access token"
           value={accessToken}
           onChange={setAccessToken}
@@ -475,7 +478,7 @@ function WhatsAppAppDetail({
           required
         />
         <FormField
-          id="stgm-chapp-edit-verify-token"
+          id={`${baseId}-verify-token`}
           label="Verify token"
           value={verifyToken}
           onChange={setVerifyToken}
@@ -501,7 +504,7 @@ function WhatsAppAppDetail({
             "stg:disabled:pointer-events-none stg:disabled:opacity-40",
           )}
         >
-          {isUpdating && <SpinnerIcon />}
+          {isUpdating && <SpinnerIcon size={12} />}
           Save credentials
         </button>
       </form>

package/src/channel-app/CreateChannelAppForm.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useMemo, useState, type FormEvent } from "react";
+import { type FormEvent, useCallback, useId, useMemo, useState } from "react";
 import { cn } from "@stigmer/theme";
 import { getUserMessage } from "@stigmer/sdk";
 import type { ChannelApp } from "@stigmer/protos/ai/stigmer/agentic/channelapp/v1/api_pb";
@@ -14,7 +14,8 @@ import {
   slackChannelAppRedirectUrl,
 } from "./slackAppSetup.js";
 import { generateWhatsAppVerifyToken } from "./whatsappAppSetup.js";
-import { CopyBlock, FormField, SpinnerIcon } from "./internal.js";
+import { CopyBlock, FormField } from "./internal.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 
 // ---------------------------------------------------------------------------
 // Public API
@@ -80,6 +81,7 @@ export function CreateChannelAppForm({
   onCancel,
   className,
 }: CreateChannelAppFormProps) {
+  const baseId = useId();
   const { create, isCreating, error, clearError } = useCreateChannelApp();
 
   const [provider, setProvider] = useState<ChannelProviderId>("slack");
@@ -185,7 +187,7 @@ export function CreateChannelAppForm({
         />
 
         <FormField
-          id="stgm-chapp-name"
+          id={`${baseId}-name`}
           label="Name"
           value={name}
           onChange={setName}
@@ -241,7 +243,7 @@ export function CreateChannelAppForm({
             "stg:disabled:pointer-events-none stg:disabled:opacity-40",
           )}
         >
-          {isCreating && <SpinnerIcon />}
+          {isCreating && <SpinnerIcon size={12} />}
           Register channel app
         </button>
 
@@ -282,6 +284,7 @@ function ProviderPicker({
   readonly onChange: (id: ChannelProviderId) => void;
   readonly disabled: boolean;
 }) {
+  const groupName = useId();
   return (
     <fieldset>
       <legend className="stg:mb-1.5 stg:block stg:text-xs stg:font-medium stg:text-foreground">
@@ -303,7 +306,7 @@ function ProviderPicker({
               <input
                 id={`stgm-chapp-provider-${p.id}`}
                 type="radio"
-                name="stgm-chapp-provider"
+                name={`${groupName}-provider`}
                 checked={checked}
                 onChange={() => onChange(p.id)}
                 disabled={disabled}
@@ -342,6 +345,7 @@ function SlackCreateSection({
   readonly onSigningSecretChange: (v: string) => void;
   readonly disabled: boolean;
 }) {
+  const baseId = useId();
   return (
     <>
       <div className="stg:space-y-1.5">
@@ -380,7 +384,7 @@ function SlackCreateSection({
         </p>
 
         <FormField
-          id="stgm-chapp-client-id"
+          id={`${baseId}-client-id`}
           label="Client ID"
           value={clientId}
           onChange={onClientIdChange}
@@ -390,7 +394,7 @@ function SlackCreateSection({
         />
 
         <FormField
-          id="stgm-chapp-client-secret"
+          id={`${baseId}-client-secret`}
           label="Client secret"
           value={clientSecret}
           onChange={onClientSecretChange}
@@ -401,7 +405,7 @@ function SlackCreateSection({
         />
 
         <FormField
-          id="stgm-chapp-signing-secret"
+          id={`${baseId}-signing-secret`}
           label="Signing secret"
           value={signingSecret}
           onChange={onSigningSecretChange}
@@ -441,6 +445,7 @@ function WhatsAppCreateSection({
   readonly onVerifyTokenChange: (v: string) => void;
   readonly disabled: boolean;
 }) {
+  const baseId = useId();
   return (
     <>
       <div className="stg:space-y-1.5">
@@ -476,7 +481,7 @@ function WhatsAppCreateSection({
         </p>
 
         <FormField
-          id="stgm-chapp-app-id"
+          id={`${baseId}-app-id`}
           label="App ID"
           value={appId}
           onChange={onAppIdChange}
@@ -486,7 +491,7 @@ function WhatsAppCreateSection({
         />
 
         <FormField
-          id="stgm-chapp-app-secret"
+          id={`${baseId}-app-secret`}
           label="App secret"
           value={appSecret}
           onChange={onAppSecretChange}
@@ -498,7 +503,7 @@ function WhatsAppCreateSection({
         />
 
         <FormField
-          id="stgm-chapp-access-token"
+          id={`${baseId}-access-token`}
           label="Access token"
           value={accessToken}
           onChange={onAccessTokenChange}
@@ -510,7 +515,7 @@ function WhatsAppCreateSection({
         />
 
         <FormField
-          id="stgm-chapp-verify-token"
+          id={`${baseId}-verify-token`}
           label="Verify token"
           value={verifyToken}
           onChange={onVerifyTokenChange}

package/src/channel-app/internal.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import { useCallback, useState } from "react";
+import { useCallback } from "react";
 import { cn } from "@stigmer/theme";
 import { TruncatedText } from "../internal/truncated-text.js";
+import { useCopyFeedback } from "../internal/useCopyFeedback.js";
 
 /**
  * Internal building blocks shared by the channel-app forms and panels.
@@ -148,32 +149,11 @@ function CopyButton({
 }
 
 function useCopy(value: string) {
-  const [copied, setCopied] = useState(false);
+  const { copy: copyText, copied } = useCopyFeedback();
 
   const copy = useCallback(() => {
-    void navigator.clipboard.writeText(value).then(() => {
-      setCopied(true);
-      window.setTimeout(() => setCopied(false), 1500);
-    });
-  }, [value]);
+    void copyText(value);
+  }, [copyText, value]);
 
   return { copied, copy };
 }
-
-export 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>
-  );
-}

package/src/composer/ComposerToolbar.tsx

@@ -18,9 +18,9 @@ import {
   PaperclipIcon,
   WorkspaceIcon,
   ArrowUpIcon,
-  SpinnerIcon,
   StopIcon,
 } from "./icons.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 
 export interface ComposerToolbarProps {
   readonly disabled: boolean;