@stigmer/react 3.41.0 → 3.41.1-dev.20261003133619.g58ac1f23a411

package/src/session/SessionViewer.tsx

@@ -144,7 +144,12 @@ const CONVERSATION_COLUMN_CLASS = "stg:mx-auto stg:w-full stg:max-w-3xl";
 export interface SessionViewerProps {
   /** Session ID to load and display. */
   readonly sessionId: string;
-  /** Organization slug. */
+  /**
+   * Organization slug to act in until the session has loaded. After that
+   * the viewer acts in the session's own organization (`session.metadata.org`),
+   * whatever this prop says: a turn in a session belongs to that session's
+   * organization.
+   */
   readonly org: string;
   /**
    * GitHub connection state. Platform-specific — web passes
@@ -384,7 +389,7 @@ export interface SessionViewerProps {
  */
 export function SessionViewer({
   sessionId,
-  org,
+  org: orgProp,
   gitHubConnection,
   enableGitHub = true,
   enableLocal = false,
@@ -410,13 +415,18 @@ export function SessionViewer({
 }: SessionViewerProps) {
   const flow = useSessionPageFlow({
     sessionId,
-    org,
+    org: orgProp,
     getRuntimeEnv,
     audience,
     runConfig,
     accountDefaults,
   });
   const { conv } = flow;
+  // Everything org-scoped below acts in the session's own organization once
+  // it has loaded (the pickers, artifacts, plan actions and the reply), so a
+  // session opened while another organization is active never files its
+  // turns there (stigmer/stigmer#1580).
+  const org = conv.org;
   const isGuest = audience === "guest";
   // A pinned model makes the picker a dead control (the pin wins over any
   // choice it could offer), so the pin forces it hidden; the guest strip

package/src/session/useSessionConversation.ts

@@ -161,6 +161,15 @@ export interface SendFollowUpOptions {
 export interface UseSessionConversationReturn {
   /** The session object, or null while loading. */
   readonly session: Session | null;
+  /**
+   * The organization this conversation's turns are filed under: the
+   * session's own (`session.metadata.org`) once it has loaded, the `org`
+   * argument until then. A turn in a session belongs to that session's
+   * organization, and the server refuses any other (stigmer/stigmer#1580),
+   * so every org-scoped control of a session surface reads this value
+   * rather than the caller's active organization.
+   */
+  readonly org: string;
   /**
    * Executions in terminal phases, in chronological order.
    *
@@ -373,7 +382,7 @@ export interface UseSessionConversationReturn {
  * locally, so it is safe in every environment.
  *
  * @param sessionId - Session to display and converse in. Pass `null` to skip.
- * @param org - Organization slug for creating follow-up executions.
+ * @param org - Organization slug to act in until the session has loaded; after that the session's own organization is used (the returned `org`).
  *
  * @example
  * ```tsx
@@ -433,6 +442,7 @@ export function useSessionConversation(
     clearError: clearCreateError,
   } = useCreateAgentExecution();
   const { update: updateSession } = useUpdateSession();
+  const turnOrg = session?.metadata?.org || org;
   const {
     submitApproval: rawSubmitApproval,
     submittingToolCallIds,
@@ -667,7 +677,7 @@ export function useSessionConversation(
         }
 
         const result = await create({
-          org,
+          org: turnOrg,
           sessionId,
           message,
           modelName: options?.modelName,
@@ -698,7 +708,7 @@ export function useSessionConversation(
         }
       }
     },
-    [sessionId, session, org, stigmer, create, updateSession, refetch, refetchSession],
+    [sessionId, session, turnOrg, stigmer, create, updateSession, refetch, refetchSession],
   );
 
   const retryLastSend = useCallback(() => {
@@ -763,6 +773,7 @@ export function useSessionConversation(
 
   return {
     session,
+    org: turnOrg,
     completedExecutions,
     activeStreamExecution,
     activePhase,

package/src/settings/EnvironmentsSection.tsx

@@ -7,6 +7,7 @@ import { EnvironmentVariableEditor } from "../environment/EnvironmentVariableEdi
 import { EnvironmentListPanel } from "../environment/EnvironmentListPanel.js";
 import { CreateEnvironmentForm } from "../environment/CreateEnvironmentForm.js";
 import { useActiveOrgSlug } from "../organization/OrgProvider.js";
+import { LoadingRegion } from "../internal/LoadingRegion.js";
 
 const ENV_EXCLUDE_LABELS: Record<string, string>[] = [
   { "stigmer.ai/personal": "true" },
@@ -152,7 +153,7 @@ function EnvironmentsCard({ org }: { org: string }) {
 
 function SkeletonRows({ count }: { count: number }) {
   return (
-    <div className="stg:space-y-2" aria-busy="true" aria-label="Loading">
+    <LoadingRegion className="stg:space-y-2" label="Loading">
       {Array.from({ length: count }, (_, i) => (
         <div
           key={i}
@@ -160,6 +161,6 @@ function SkeletonRows({ count }: { count: number }) {
           style={{ width: `${85 - i * 10}%` }}
         />
       ))}
-    </div>
+    </LoadingRegion>
   );
 }

package/src/settings/MembersSection.tsx

@@ -24,7 +24,7 @@ export function MembersSection() {
     ApiResourceKind.invitation,
   );
   const idpAvailable = useResourceAvailable(ApiResourceKind.identity_provider);
-  const orgId = activeOrg?.metadata?.id ?? "";
+  const org = activeOrg?.metadata?.id ?? "";
   const orgSlug = activeOrg?.metadata?.slug ?? "";
 
   const { identityProviders } = useIdentityProviderList(
@@ -57,7 +57,7 @@ export function MembersSection() {
         )}
       </p>
 
-      {!orgId ? (
+      {!org ? (
         <p className="stg:text-muted-foreground stg:py-4 stg:text-center stg:text-xs">
           Select an organization to manage members.
         </p>
@@ -72,7 +72,7 @@ export function MembersSection() {
               </p>
             </div>
           )}
-          <OrgMembersPanel orgId={orgId} />
+          <OrgMembersPanel org={org} />
         </>
       )}
     </section>

package/src/settings/OrgPreferencesSection.tsx

@@ -28,7 +28,7 @@ export function OrgPreferencesSection() {
           Select an organization to view its preferences.
         </p>
       ) : (
-        <OrgPreferencesPanel orgId={orgId} />
+        <OrgPreferencesPanel org={orgId} />
       )}
     </section>
   );

package/src/settings/OrgProfileSection.tsx

@@ -35,7 +35,7 @@ export function OrgProfileSection() {
           Select an organization to view its profile.
         </p>
       ) : (
-        <OrgProfilePanel orgId={orgId} onUpdated={handleUpdated} />
+        <OrgProfilePanel org={orgId} onUpdated={handleUpdated} />
       )}
     </section>
   );

package/src/settings/TeamsSection.tsx

@@ -128,7 +128,7 @@ export function TeamsSection() {
           <TeamDetailPanel
             key={flow.team.metadata?.id}
             team={flow.team}
-            orgId={orgId}
+            org={orgId}
             onUpdated={handleUpdated}
             onDeleted={handleDeleted}
             onBack={() => setFlow({ phase: "idle" })}

package/src/settings/UsageSection.tsx

@@ -28,7 +28,7 @@ export function UsageSection() {
           Select an organization to view usage.
         </p>
       ) : (
-        <OrgUsagePanel orgId={orgId} />
+        <OrgUsagePanel org={orgId} />
       )}
     </section>
   );

package/src/sharing/ShareAgentDialog.tsx

@@ -41,6 +41,7 @@ import {
 } from "./useSaveAgentShare.js";
 import { useRotateShareLink } from "./useRotateShareLink.js";
 import { useShareToolReadiness } from "./useShareToolReadiness.js";
+import { trimTrailing } from "../internal/trim.js";
 
 /** Maximum length of each visitor message (proto: `string.max_len = 300`). */
 const MAX_MESSAGE_LENGTH = 300;
@@ -1521,7 +1522,7 @@ function buildDeveloperSnippet(
   org: string,
   slug: string,
 ): string {
-  const baseUrl = JSON.stringify(apiBaseUrl.replace(/\/+$/, ""));
+  const baseUrl = JSON.stringify(trimTrailing(apiBaseUrl, "/"));
   return [
     `import { createPlatformClientAuth } from "@stigmer/sdk/node";`,
     ``,

package/src/sharing/SharedAgentChat.tsx

@@ -7,6 +7,7 @@ import { NewSessionViewer } from "../session/NewSessionViewer.js";
 import { SessionViewer } from "../session/SessionViewer.js";
 import { useSharedAgentProfile } from "./useSharedAgentProfile.js";
 import type { SharingAudience } from "./useSaveAgentShare.js";
+import { LoadingRegion } from "../internal/LoadingRegion.js";
 
 // ---------------------------------------------------------------------------
 // Public API
@@ -123,13 +124,12 @@ export function SharedAgentChat({
 
   if (isLoading) {
     return (
-      <div
+      <LoadingRegion
         className={cn("stg:flex stg:h-full stg:w-full stg:items-center stg:justify-center", className)}
-        aria-busy="true"
-        aria-label="Loading agent"
+        label="Loading agent"
       >
         <LoadingSkeleton />
-      </div>
+      </LoadingRegion>
     );
   }
 

package/src/sidebar/WorkspaceSidebar.tsx

@@ -31,6 +31,7 @@ import {
   sectionLabelClassName,
 } from "./chrome.js";
 import type { RenderSidebarLink } from "./types.js";
+import { LoadingRegion } from "../internal/LoadingRegion.js";
 
 // ---------------------------------------------------------------------------
 // Public API
@@ -433,7 +434,7 @@ function cnActivityRow(active: boolean): string {
 
 function RecentsSkeletons() {
   return (
-    <div className="stg:space-y-2 stg:px-2" aria-busy="true" aria-label="Loading sessions">
+    <LoadingRegion className="stg:space-y-2 stg:px-2" label="Loading sessions">
       {Array.from({ length: 5 }, (_, i) => (
         <div
           key={i}
@@ -441,7 +442,7 @@ function RecentsSkeletons() {
           style={{ width: `${70 + Math.sin(i * 1.5) * 20}%` }}
         />
       ))}
-    </div>
+    </LoadingRegion>
   );
 }
 

package/src/skill/SkillDetailView.tsx

@@ -28,6 +28,7 @@ import { VersionTimeline } from "../version-history/VersionTimeline.js";
 import { SkillDiffDialog, type SkillDiffDialogState } from "./SkillDiffDialog.js";
 import { ManagedByPluginNotice } from "../plugin/ManagedByPluginNotice.js";
 import { useManagingPlugin } from "../plugin/useManagingPlugin.js";
+import { LoadingRegion } from "../internal/LoadingRegion.js";
 
 const CONTENT_TAB: TabItem = { id: "content", label: "Content" };
 const VERSIONS_TAB: TabItem = { id: "versions", label: "Versions" };
@@ -650,10 +651,9 @@ function SkillSection({
 
 function LoadingSkeleton({ className }: { readonly className?: string }) {
   return (
-    <div
+    <LoadingRegion
       className={cn("stg:flex stg:flex-col stg:gap-6", className)}
-      aria-busy="true"
-      aria-label="Loading skill details"
+      label="Loading skill details"
     >
       <div className="stg:flex stg:items-start stg:gap-3">
         <div className="stg:mt-1 stg:size-6 stg:shrink-0 stg:animate-pulse stg:rounded stg:bg-muted" />
@@ -677,7 +677,7 @@ function LoadingSkeleton({ className }: { readonly className?: string }) {
           style={{ height: "64px" }}
         />
       </div>
-    </div>
+    </LoadingRegion>
   );
 }
 

package/src/skill/SkillDiffDialog.tsx

@@ -6,6 +6,7 @@ import { DialogShell } from "../internal/DialogShell.js";
 import { useSkillDiff } from "./useSkillDiff.js";
 import { MultiFileDiffView } from "../version-history/MultiFileDiffView.js";
 import { ErrorMessage } from "../error/ErrorMessage.js";
+import { LoadingRegion } from "../internal/LoadingRegion.js";
 
 // ---------------------------------------------------------------------------
 // Public types
@@ -129,10 +130,9 @@ export function SkillDiffDialog({ state, onClose }: SkillDiffDialogProps) {
 
 function DiffSkeleton() {
   return (
-    <div
+    <LoadingRegion
       className="stg:flex stg:flex-col stg:gap-4"
-      aria-busy="true"
-      aria-label="Loading diff"
+      label="Loading diff"
     >
       <div className="stg:flex stg:items-center stg:gap-2">
         <div className="stg:h-4 stg:w-36 stg:animate-pulse stg:rounded stg:bg-muted" />
@@ -147,7 +147,7 @@ function DiffSkeleton() {
           <div className="stg:h-4 stg:flex-1 stg:animate-pulse stg:rounded stg:bg-muted" />
         </div>
       ))}
-    </div>
+    </LoadingRegion>
   );
 }
 

package/src/skill/SkillFileBrowser.tsx

@@ -7,6 +7,7 @@ import { UNSTYLED_LIST } from "../internal/element-resets.js";
 import { MARKDOWN_COMPONENTS, REMARK_PLUGINS, stripFrontmatter } from "../internal/markdown-components.js";
 import { buildFileTree, FileTreeNode } from "../internal/file-tree/index.js";
 import { useSkillArtifact } from "./useSkillArtifact.js";
+import { LoadingRegion } from "../internal/LoadingRegion.js";
 
 // ---------------------------------------------------------------------------
 // Public types
@@ -79,10 +80,9 @@ export function SkillFileBrowser({
 
   if (isLoading) {
     return (
-      <div
+      <LoadingRegion
         className={cn("stg:rounded-lg stg:border stg:border-border", className)}
-        aria-busy="true"
-        aria-label="Loading skill package files"
+        label="Loading skill package files"
       >
         <div className="stg:p-4">
           <div className="stg:h-3 stg:w-32 stg:animate-pulse stg:rounded stg:bg-muted" />
@@ -101,7 +101,7 @@ export function SkillFileBrowser({
             </div>
           </div>
         </div>
-      </div>
+      </LoadingRegion>
     );
   }
 

package/src/team/TeamDetailPanel.tsx

@@ -30,7 +30,7 @@ import { useDeleteTeam, useUpdateTeam } from "./useTeamMutations.js";
 export interface TeamDetailPanelProps {
   readonly team: Team;
   /** The organization's id (`metadata.id`), whose members can be added. */
-  readonly orgId: string;
+  readonly org: string;
   /** Fired with the saved team after an edit. */
   readonly onUpdated?: (team: Team) => void;
   /** Fired after the team is deleted. */
@@ -47,7 +47,7 @@ export interface TeamDetailPanelProps {
  */
 export function TeamDetailPanel({
   team,
-  orgId,
+  org,
   onUpdated,
   onDeleted,
   onBack,
@@ -112,7 +112,7 @@ export function TeamDetailPanel({
       )}
 
       <section aria-label="Members">
-        <TeamMembersPanel teamId={teamId} orgId={orgId} />
+        <TeamMembersPanel teamId={teamId} org={org} />
       </section>
 
       <PermissionGate resource={gate} relation="can_delete">

package/src/team/TeamListPanel.tsx

@@ -15,6 +15,7 @@ import { ChevronRight, UsersRound } from "lucide-react";
 import { cn } from "@stigmer/theme";
 import { getUserMessage } from "@stigmer/sdk";
 import { UNSTYLED_LIST } from "../internal/element-resets.js";
+import { LoadingRegion } from "../internal/LoadingRegion.js";
 
 /** Props for {@link TeamListPanel}. */
 export interface TeamListPanelProps {
@@ -47,11 +48,11 @@ export function TeamListPanel({
 }: TeamListPanelProps) {
   if (isLoading) {
     return (
-      <div className={cn("stg:space-y-2", className)} aria-busy="true" aria-label="Loading teams">
+      <LoadingRegion className={cn("stg:space-y-2", className)} label="Loading teams">
         {Array.from({ length: 2 }, (_, i) => (
           <div key={i} className="stg:bg-muted-subtle stg:h-14 stg:animate-pulse stg:rounded-lg" />
         ))}
-      </div>
+      </LoadingRegion>
     );
   }
 

package/src/team/TeamMembersPanel.tsx

@@ -32,7 +32,7 @@ export interface TeamMembersPanelProps {
   /** The team's id (`metadata.id`). */
   readonly teamId: string;
   /** The organization's id (`metadata.id`), whose members can be added. */
-  readonly orgId: string;
+  readonly org: string;
   readonly className?: string;
 }
 
@@ -42,7 +42,7 @@ export interface TeamMembersPanelProps {
  *
  * All visual properties flow through `--stgm-*` design tokens.
  */
-export function TeamMembersPanel({ teamId, orgId, className }: TeamMembersPanelProps) {
+export function TeamMembersPanel({ teamId, org, className }: TeamMembersPanelProps) {
   const team = useMemo(
     () => ({ kind: "team", id: teamId, resourceKind: ApiResourceKind.team }),
     [teamId],
@@ -131,7 +131,7 @@ export function TeamMembersPanel({ teamId, orgId, className }: TeamMembersPanelP
       <PermissionGate resource={grantGate} relation="can_grant_access">
         <div className="stg:mt-4 stg:flex stg:items-end stg:gap-2 stg:border-t stg:border-border stg:pt-4">
           <PrincipalPicker
-            orgId={orgId}
+            org={org}
             value={adding}
             onChange={setAdding}
             excludeGrantees={members}

package/src/usage/OrgUsagePanel.tsx

@@ -22,6 +22,7 @@ import { AgentBreakdownList } from "./AgentBreakdownList.js";
 import { HarnessSplitCard } from "./HarnessSplitCard.js";
 import { ExportButton } from "./ExportButton.js";
 import { useExportCSV } from "./useExportCSV.js";
+import { LoadingRegion } from "../internal/LoadingRegion.js";
 
 // ---------------------------------------------------------------------------
 // Public API
@@ -30,7 +31,7 @@ import { useExportCSV } from "./useExportCSV.js";
 /** Props for {@link OrgUsagePanel}. */
 export interface OrgUsagePanelProps {
   /** Organization ID (`metadata.id`) to fetch usage for. */
-  readonly orgId: string;
+  readonly org: string;
   /** Additional CSS class names for the root container. */
   readonly className?: string;
 }
@@ -47,22 +48,21 @@ export interface OrgUsagePanelProps {
  *
  * @example
  * ```tsx
- * <OrgUsagePanel orgId={activeOrg.metadata.id} />
+ * <OrgUsagePanel org={activeOrg.metadata.id} />
  * ```
  */
-export function OrgUsagePanel({ orgId, className }: OrgUsagePanelProps) {
+export function OrgUsagePanel({ org, className }: OrgUsagePanelProps) {
   const [preset, setPreset] = useState<DateRangePreset>("30d");
   const dateRange = dateRangeFromPreset(preset);
-  const { report, isLoading, error } = useOrgUsageReport(orgId, dateRange);
-  const { exportCSV, isExporting } = useExportCSV(report, orgId);
+  const { report, isLoading, error } = useOrgUsageReport(org, dateRange);
+  const { exportCSV, isExporting } = useExportCSV(report, org);
   const daysInRange = Number.parseInt(preset, 10);
 
   if (isLoading) {
     return (
-      <div
+      <LoadingRegion
         className={cn("stg:space-y-4", className)}
-        aria-busy="true"
-        aria-label="Loading usage data"
+        label="Loading usage data"
       >
         <div className="stg:flex stg:gap-2">
           {DATE_RANGE_PRESETS.map((p) => (
@@ -81,7 +81,7 @@ export function OrgUsagePanel({ orgId, className }: OrgUsagePanelProps) {
           ))}
         </div>
         <div className="stg:h-40 stg:animate-pulse stg:rounded-lg stg:bg-muted-subtle" />
-      </div>
+      </LoadingRegion>
     );
   }
 

package/src/usage/useExportCSV.ts

@@ -24,11 +24,11 @@ export interface UseExportCSVReturn {
  * - `model_breakdown` — one row per model with calls, tokens, cost
  *
  * @param report - The org usage report data (from `useOrgUsageReport`).
- * @param orgId - Organization ID for the filename.
+ * @param org - Organization ID for the filename.
  */
 export function useExportCSV(
   report: GetOrgUsageReportOutput | null,
-  orgId: string,
+  org: string,
 ): UseExportCSVReturn {
   const [isExporting, setIsExporting] = useState(false);
 
@@ -39,15 +39,15 @@ export function useExportCSV(
 
       try {
         const { csv, filename } = format === "daily_summary"
-          ? buildDailySummaryCSV(report, orgId)
-          : buildModelBreakdownCSV(report, orgId);
+          ? buildDailySummaryCSV(report, org)
+          : buildModelBreakdownCSV(report, org);
 
         downloadTextFile(csv, filename, "text/csv");
       } finally {
         setIsExporting(false);
       }
     },
-    [report, orgId],
+    [report, org],
   );
 
   return { exportCSV, isExporting };
@@ -55,7 +55,7 @@ export function useExportCSV(
 
 function buildDailySummaryCSV(
   report: GetOrgUsageReportOutput,
-  orgId: string,
+  org: string,
 ): { csv: string; filename: string } {
   const header = "Date,Executions,Tokens,Cost (USD)";
   const rows = report.dailyCosts.map((entry) => {
@@ -65,13 +65,13 @@ function buildDailySummaryCSV(
 
   return {
     csv: [header, ...rows].join("\n"),
-    filename: `${orgId}-daily-usage.csv`,
+    filename: `${org}-daily-usage.csv`,
   };
 }
 
 function buildModelBreakdownCSV(
   report: GetOrgUsageReportOutput,
-  orgId: string,
+  org: string,
 ): { csv: string; filename: string } {
   const header =
     "Model,Provider,Calls,Input Tokens,Output Tokens,Cache Read Tokens,Cache Write Tokens,Cost (USD)";
@@ -91,7 +91,7 @@ function buildModelBreakdownCSV(
 
   return {
     csv: [header, ...rows].join("\n"),
-    filename: `${orgId}-model-usage.csv`,
+    filename: `${org}-model-usage.csv`,
   };
 }
 

package/src/usage/useOrgUsageReport.ts

@@ -39,16 +39,16 @@ export interface UseOrgUsageReportReturn {
  * org ID and date range. The server returns aggregated totals, a
  * per-model breakdown, the top agents by cost, and a daily cost trend.
  *
- * Pass `null` as `orgId` to skip fetching (stable no-op). Call
+ * Pass `null` as `org` to skip fetching (stable no-op). Call
  * `refetch()` to re-query manually.
  *
- * @param orgId - Organization ID, or `null` to skip.
+ * @param org - Organization ID, or `null` to skip.
  * @param dateRange - Closed date range (YYYY-MM-DD strings).
  *
  * @example
  * ```tsx
  * const range = dateRangeFromPreset("30d");
- * const { report, isLoading, error } = useOrgUsageReport(orgId, range);
+ * const { report, isLoading, error } = useOrgUsageReport(org, range);
  *
  * if (isLoading) return <Skeleton />;
  * if (error) return <ErrorMessage error={error} />;
@@ -59,23 +59,23 @@ export interface UseOrgUsageReportReturn {
  * ```
  */
 export function useOrgUsageReport(
-  orgId: string | null,
+  org: string | null,
   dateRange: DateRange,
 ): UseOrgUsageReportReturn {
   const stigmer = useStigmer();
 
   const { data: report, isLoading, isRefetching, error, refetch } = useFetch(
-    orgId
+    org
       ? () =>
           stigmer.agentExecution.getOrgUsageReport(
             create(GetOrgUsageReportInputSchema, {
-              orgId,
+              org,
               fromDate: dateRange.from,
               toDate: dateRange.to,
             }),
           )
       : null,
-    [orgId, dateRange.from, dateRange.to, stigmer],
+    [org, dateRange.from, dateRange.to, stigmer],
     null as GetOrgUsageReportOutput | null,
   );
 

package/src/version-history/VersionTimeline.tsx

@@ -4,6 +4,7 @@ import { useCallback, useState } from "react";
 import { cn } from "@stigmer/theme";
 import type { VersionTimelineProps } from "./types.js";
 import { VersionTimelineEntry } from "./VersionTimelineEntry.js";
+import { LoadingRegion } from "../internal/LoadingRegion.js";
 
 /**
  * Accessible vertical timeline for version history.
@@ -163,10 +164,9 @@ function CompareIcon({ className }: { readonly className?: string }) {
 
 function TimelineSkeleton({ className }: { readonly className?: string }) {
   return (
-    <div
+    <LoadingRegion
       className={cn("stg:flex stg:flex-col stg:gap-4 stg:pt-2", className)}
-      aria-busy="true"
-      aria-label="Loading version history"
+      label="Loading version history"
     >
       {[1, 2, 3].map((i) => (
         <div key={i} className="stg:flex stg:gap-3">
@@ -183,7 +183,7 @@ function TimelineSkeleton({ className }: { readonly className?: string }) {
           </div>
         </div>
       ))}
-    </div>
+    </LoadingRegion>
   );
 }
 

package/src/workflow/WorkflowVersionDiffViewer.tsx

@@ -3,6 +3,7 @@
 import { cn } from "@stigmer/theme";
 import { useWorkflowVersionDiff } from "./useWorkflowVersionDiff.js";
 import type { DiffLine } from "./workflow-yaml-diff.js";
+import { LoadingRegion } from "../internal/LoadingRegion.js";
 
 /** Props for {@link WorkflowVersionDiffViewer}. */
 export interface WorkflowVersionDiffViewerProps {
@@ -163,13 +164,12 @@ function DiffLineRow({
 
 function DiffSkeleton({ className }: { readonly className?: string }) {
   return (
-    <div
+    <LoadingRegion
       className={cn(
         "stg:overflow-hidden stg:rounded-lg stg:border stg:border-border",
         className,
       )}
-      aria-busy="true"
-      aria-label="Loading diff"
+      label="Loading diff"
     >
       <div className="stg:border-b stg:border-border stg:bg-muted stg:px-3 stg:py-2">
         <div className="stg:h-4 stg:w-48 stg:animate-pulse stg:rounded stg:bg-muted-foreground/20" />
@@ -185,7 +185,7 @@ function DiffSkeleton({ className }: { readonly className?: string }) {
           </div>
         ))}
       </div>
-    </div>
+    </LoadingRegion>
   );
 }