@stigmer/react 3.40.1 → 3.41.1-dev.20261003094357.g39d6aa748646

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/sharing/useCanCreateAgentShare.ts

@@ -18,7 +18,9 @@ export interface UseCanCreateAgentShareReturn {
  * installed copy), and creating one asks two questions of that
  * organization, both of which the create handler enforces:
  *
- * - `can_edit` on the agent — the share is a channel to this agent.
+ * - `can_manage_audience` on the agent — a share puts the agent in front of a
+ *   wider audience, so it is the owner's decision; an editor, who may change
+ *   the definition, may not publish it.
  * - `can_create_agent_share` on the organization (admin by default) — a
  *   share spends the organization's credits with anyone on the internet,
  *   so it is an admin-level decision. The org check uses the org slug as
@@ -46,14 +48,14 @@ export function useCanCreateAgentShare(
   const agentId = agent?.metadata?.id ?? "";
   const agentOrg = agent?.metadata?.org ?? "";
 
-  const { allowed: canEditAgent } = useCheckPermission(
+  const { allowed: canPublishAgent } = useCheckPermission(
     agentId ? { kind: "agent", id: agentId } : null,
-    "can_edit",
+    "can_manage_audience",
   );
   const { allowed: canCreateInOrg } = useCheckPermission(
     agentOrg ? { kind: "organization", id: agentOrg } : null,
     "can_create_agent_share",
   );
 
-  return { allowed: !!agent && canEditAgent && canCreateInOrg };
+  return { allowed: !!agent && canPublishAgent && canCreateInOrg };
 }

package/src/sharing/useSaveAgentShare.ts

@@ -162,7 +162,7 @@ export interface UseSaveAgentShareReturn {
  *
  * Commits via `stigmer.agentShare.apply()` — an idempotent upsert keyed
  * on the share's `(org, slug)` identity — so one code path serves both
- * creation (the server authorizes on the referenced agent's `can_edit`
+ * creation (the server authorizes on the referenced agent's `can_manage_audience`
  * and the organization's `can_create_agent_share`) and every later
  * edit. There is deliberately no create/update
  * branching: the share slug is unique per org, which makes

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/styles.css

@@ -28,10 +28,11 @@
    self-referential `--stgm-font-sans: var(--stgm-font-sans)` cycle through
    the `@theme inline` block below).
 
-   The `stg:` prefix contract is enforced by `scripts/check-prefixed-classnames`
-   (unprefixed utilities in source fail the suite) and by the dist isolation
-   invariant test (unscoped selectors in the built stylesheet fail the suite).
-   The one-shot migration lives in `scripts/prefix-classnames.ts`. */
+   The `stg:` prefix contract is enforced by `scripts/prefix-classnames.ts
+   --check` (`npm run lint:prefix`: an unprefixed utility, or a prefix placed
+   after a variant, fails the lint) and by the dist isolation invariant test
+   (unscoped selectors in the built stylesheet fail the suite). The same
+   script, without `--check`, is the one-shot migration. */
 @import "tailwindcss/theme.css" layer(stgm) prefix(stg);
 @import "tailwindcss/utilities.css" layer(stgm) prefix(stg);
 /* Enter/exit animation utilities (`stg:animate-in`, `stg:fade-in`,
@@ -294,6 +295,15 @@
     color-scheme: dark;
   }
 
+  /* The same holds for a checkbox's or radio's checked state: the browser
+     paints it from `accent-color` (its own blue by default), never from our
+     tokens (#1228). One inherited rule on both containers gives every native
+     control inside the scope the theme's primary, in both modes and every
+     preset, so no control needs its own accent class. */
+  .stgm {
+    accent-color: var(--stgm-primary);
+  }
+
   /* The provider's in-tree container ([data-stgm-root]) ships with NO
      layout styling — deliberately (#260, DD-019). A default
      `height: 100%` looks benign ("resolves to auto under auto-height

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/WorkflowTaskApprovalSummary.tsx

@@ -31,10 +31,13 @@ export interface WorkflowTaskApprovalSummaryProps {
    */
   readonly outcomes: readonly TaskOutcome[];
   /**
-   * The recorded decision, sourced from the canonical task output. When
-   * `null` — or when its `outcome` is still empty — the gate has been
-   * resolved but the decision record has not yet materialized in the
-   * status snapshot; a "finalizing" affordance is shown instead.
+   * The recorded decision, sourced from the canonical task output with the
+   * `approval_resolved` event standing in until the status snapshot
+   * catches up. When `null` — or when its `outcome` is still empty — the
+   * gate has been resolved but neither source carries the decision yet; a
+   * "finalizing" affordance is shown instead. The one exception is an
+   * auto-resolved decision with an empty outcome: the gate timed out under
+   * the fail policy and ended without a decision, which is final.
    */
   readonly decision: TaskDetailApprovalDecision | null;
   /** Additional CSS class names for the root container. */
@@ -73,13 +76,17 @@ export const WorkflowTaskApprovalSummary = memo(function WorkflowTaskApprovalSum
   decision,
   className,
 }: WorkflowTaskApprovalSummaryProps) {
-  const isFinalizing = !decision || decision.outcome === "";
+  // A fail-policy timeout ends the gate with no outcome; that is the record,
+  // not a decision still on its way.
+  const timedOutUndecided = decision !== null && decision.autoResolved && decision.outcome === "";
+  const isFinalizing = !decision || (decision.outcome === "" && !timedOutUndecided);
 
   const outcomeLabel = useMemo(() => {
+    if (timedOutUndecided) return "Timed out — no decision";
     if (!decision || !decision.outcome) return "";
     const match = outcomes.find((o) => o.name === decision.outcome);
     return match?.label || capitalize(decision.outcome.replace(/_/g, " "));
-  }, [decision, outcomes]);
+  }, [decision, outcomes, timedOutUndecided]);
 
   const tone: DecisionTone = useMemo(
     () => (decision && !isFinalizing ? resolveTone(decision.outcome) : "neutral"),
@@ -116,7 +123,7 @@ export const WorkflowTaskApprovalSummary = memo(function WorkflowTaskApprovalSum
             <ToneIcon tone={tone} />
             {outcomeLabel}
           </span>
-          {decision!.autoResolved && (
+          {decision!.autoResolved && !timedOutUndecided && (
             <span className="stg:rounded stg:bg-muted stg:px-1.5 stg:py-0.5 stg:text-[10px] stg:font-medium stg:text-muted-foreground">
               auto-resolved
             </span>

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>
   );
 }
 

package/src/workflow/WorkflowVersionTimeline.tsx

@@ -7,6 +7,7 @@ import { WorkflowVersionBadge } from "./WorkflowVersionBadge.js";
 import type { VersionEntry } from "../version-history/types.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import { formatRelativeTime } from "../activity/format-relative-time.js";
+import { LoadingRegion } from "../internal/LoadingRegion.js";
 
 /** Props for {@link WorkflowVersionTimeline}. */
 export interface WorkflowVersionTimelineProps {
@@ -210,10 +211,9 @@ function VersionTimelineRow({
 
 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 workflow version history"
+      label="Loading workflow version history"
     >
       {[1, 2, 3].map((i) => (
         <div key={i} className="stg:flex stg:gap-3">
@@ -230,7 +230,7 @@ function TimelineSkeleton({ className }: { readonly className?: string }) {
           </div>
         </div>
       ))}
-    </div>
+    </LoadingRegion>
   );
 }
 

package/src/workflow/inspector/tabs/BranchesTab.tsx

@@ -295,7 +295,7 @@ function ForkBranches({
               name={`join-policy-${node.id}`}
               checked={!compete}
               onChange={() => handleSetCompete(false)}
-              className="stg:h-3 stg:w-3 stg:accent-[var(--stgm-primary,#6366f1)]"
+              className="stg:h-3 stg:w-3"
             />
             Wait for all branches
           </label>
@@ -305,7 +305,7 @@ function ForkBranches({
               name={`join-policy-${node.id}`}
               checked={compete}
               onChange={() => handleSetCompete(true)}
-              className="stg:h-3 stg:w-3 stg:accent-[var(--stgm-primary,#6366f1)]"
+              className="stg:h-3 stg:w-3"
             />
             Race mode (first branch wins)
           </label>

package/src/workflow/inspector/tabs/CatchTab.tsx

@@ -135,7 +135,7 @@ export const CatchTab = memo(function CatchTab({ node, mutations }: CatchTabProp
                 type="checkbox"
                 checked={catchBlock.compensate}
                 onChange={handleCompensateToggle}
-                className="stg:h-3 stg:w-3 stg:accent-[var(--stgm-primary,#6366f1)]"
+                className="stg:h-3 stg:w-3"
               />
               Run compensation before catch block
             </label>

package/src/workflow/inspector/tabs/IterationTab.tsx

@@ -194,7 +194,7 @@ export const IterationTab = memo(function IterationTab({
                   value={opt.value}
                   checked={onError === opt.value}
                   onChange={() => handleErrorPolicyChange(opt.value)}
-                  className="stg:mt-0.5 stg:h-3 stg:w-3 stg:accent-[var(--stgm-primary,#6366f1)]"
+                  className="stg:mt-0.5 stg:h-3 stg:w-3"
                 />
                 <span>
                   <span className="stg:font-medium">{opt.label}</span>