@stigmer/react 3.9.0 → 3.11.0

package/src/conversation/__tests__/a11y/conversation-surfaces.a11y.test.tsx

@@ -9,9 +9,11 @@
 // states including the filtered one — each in light + dark against the
 // shipped stylesheet.
 
-import { describe, it, afterEach, vi } from "vitest";
+import { describe, it, afterEach, expect, vi } from "vitest";
+import { waitFor } from "@testing-library/react";
 import { create } from "@bufbuild/protobuf";
 import { timestampFromDate } from "@bufbuild/protobuf/wkt";
+import type { Stigmer } from "@stigmer/sdk";
 import { AgentChannelSchema } from "@stigmer/protos/ai/stigmer/agentic/agentchannel/v1/api_pb";
 import {
   ChannelConversationListFilter,
@@ -23,6 +25,7 @@ import {
 } from "@stigmer/protos/ai/stigmer/agentic/agentchannel/v1/conversation_io_pb";
 import { ChannelDeliveryStatus } from "@stigmer/protos/ai/stigmer/agentic/agentchannel/v1/delivery_pb";
 import { ChannelReceiptState } from "@stigmer/protos/ai/stigmer/agentic/agentchannel/v1/outbound_pb";
+import { StigmerContext } from "../../../context.js";
 import { ConversationComposer } from "../../ConversationComposer.js";
 import { ConversationListPane } from "../../ConversationListPane.js";
 import { ConversationTimelineView } from "../../ConversationTimelineView.js";
@@ -125,6 +128,49 @@ const timelineItems = [
   }),
 ];
 
+// Inbound-media fixtures (stigmer/stigmer#367): a captioned photo and a
+// document. Media rendering needs the conversation address AND a client
+// that answers getMediaDownloadUrl — the inner provider below overrides
+// the harness stub with one minting a data-URI image, so the audit sees
+// the loaded thumbnail, not just the pulse placeholder.
+const mediaTimelineItems = [
+  create(ConversationTimelineItemSchema, {
+    itemId: "wa:7",
+    lane: ConversationLane.lane_public,
+    author: ConversationItemAuthor.author_customer,
+    providerMessageType: "image",
+    text: "here's the leak under the sink",
+    media: {
+      filename: "kitchen-leak.jpg",
+      contentType: "image/jpeg",
+      sizeBytes: BigInt(204800),
+    },
+    at: timestampFromDate(new Date("2026-08-07T09:04:00Z")),
+  }),
+  create(ConversationTimelineItemSchema, {
+    itemId: "wa:8",
+    lane: ConversationLane.lane_public,
+    author: ConversationItemAuthor.author_customer,
+    providerMessageType: "document",
+    media: {
+      filename: "lease-agreement.pdf",
+      contentType: "application/pdf",
+      sizeBytes: BigInt(1048576),
+    },
+    at: timestampFromDate(new Date("2026-08-07T09:05:00Z")),
+  }),
+];
+
+// A 1×1 transparent PNG — enough for a real <img> load in the browser.
+const ONE_PX_PNG =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==";
+
+const mediaClient = {
+  agentChannel: {
+    getMediaDownloadUrl: () => Promise.resolve({ url: ONE_PX_PNG }),
+  },
+} as unknown as Stigmer;
+
 const listBaseProps = {
   isLoading: false,
   error: null,
@@ -207,6 +253,26 @@ describe("Conversation surfaces a11y", () => {
     await auditA11y(container, `conversation timeline · ${mode}`);
   });
 
+  it.each(COLOR_MODES)("timeline with inbound media: thumbnail and document chip (%s)", async (mode) => {
+    const container = renderAudited(
+      <StigmerContext.Provider value={mediaClient}>
+        <ConversationTimelineView
+          {...timelineBaseProps}
+          agentChannelId="ach_wa"
+          conversationKey="15550001111"
+          items={mediaTimelineItems}
+          hasOlder={false}
+          provider="whatsapp"
+        />
+      </StigmerContext.Provider>,
+      mode,
+    );
+    // Audit the LOADED thumbnail (the interactive state operators use),
+    // not just the pulse placeholder the first frame shows.
+    await waitFor(() => expect(container.querySelector("img")).toBeTruthy());
+    await auditA11y(container, `conversation timeline media · ${mode}`);
+  });
+
   it.each(COLOR_MODES)("composer with the closed-window advisory (%s)", async (mode) => {
     const container = renderAudited(
       <ConversationComposer

package/src/conversation/__tests__/useConversationMediaUrl.test.tsx

@@ -0,0 +1,66 @@
+import { describe, it, expect, vi } from "vitest";
+import { renderHook, waitFor } from "@testing-library/react";
+import type { ReactNode } from "react";
+import type { Stigmer } from "@stigmer/sdk";
+import { StigmerContext } from "../../context";
+import { useConversationMediaUrl } from "../useConversationMediaUrl";
+
+function wrapperFor(stigmer: Stigmer) {
+  return ({ children }: { children: ReactNode }) => (
+    <StigmerContext.Provider value={stigmer}>{children}</StigmerContext.Provider>
+  );
+}
+
+function makeStigmer(getMediaDownloadUrl = vi.fn()) {
+  return { agentChannel: { getMediaDownloadUrl } } as unknown as Stigmer;
+}
+
+describe("useConversationMediaUrl", () => {
+  it("mints a fresh URL from the item's conversation address", async () => {
+    const fn = vi.fn().mockResolvedValue({ url: "https://fresh/1" });
+    const { result } = renderHook(
+      () => useConversationMediaUrl("ach-1", "15551234567", "wa:abc"),
+      { wrapper: wrapperFor(makeStigmer(fn)) },
+    );
+
+    await waitFor(() => expect(result.current.url).toBe("https://fresh/1"));
+    expect(fn).toHaveBeenCalledTimes(1);
+    const req = fn.mock.calls[0][0];
+    expect(req.agentChannelId).toBe("ach-1");
+    expect(req.conversationKey).toBe("15551234567");
+    expect(req.itemId).toBe("wa:abc");
+  });
+
+  it("stays idle when disabled", () => {
+    const fn = vi.fn();
+    const { result } = renderHook(
+      () => useConversationMediaUrl("ach-1", "15551234567", "wa:abc", { enabled: false }),
+      { wrapper: wrapperFor(makeStigmer(fn)) },
+    );
+    expect(result.current.url).toBeNull();
+    expect(fn).not.toHaveBeenCalled();
+  });
+
+  it("skips fetching while any address part is empty", () => {
+    const fn = vi.fn();
+    const { result } = renderHook(
+      () => useConversationMediaUrl("ach-1", "", "wa:abc"),
+      { wrapper: wrapperFor(makeStigmer(fn)) },
+    );
+    expect(result.current.url).toBeNull();
+    expect(fn).not.toHaveBeenCalled();
+  });
+
+  it("reports a failed mint as an error, never a broken URL", async () => {
+    const fn = vi
+      .fn()
+      .mockRejectedValue(new Error("no downloadable media at this timeline item"));
+    const { result } = renderHook(
+      () => useConversationMediaUrl("ach-1", "15551234567", "wa:abc"),
+      { wrapper: wrapperFor(makeStigmer(fn)) },
+    );
+
+    await waitFor(() => expect(result.current.error).not.toBeNull());
+    expect(result.current.url).toBeNull();
+  });
+});

package/src/conversation/conversationPresentation.ts

@@ -108,9 +108,16 @@ export function receiptOf(item: ConversationTimelineItem): ReceiptKind | null {
 
 /**
  * Placeholder copy for inbound items whose body the platform cannot
- * render (`text` empty, `provider_message_type` names the kind). Media
- * retrieval is a named non-goal of this surface — the placeholder tells
- * staff something arrived and what shape it was.
+ * render (`text` empty, `provider_message_type` names the kind) — the
+ * placeholder tells staff something arrived and what shape it was.
+ *
+ * Since stigmer/stigmer#367 this is the FALLBACK arm of the media
+ * treatment, not the whole of it: items carrying ingested `media`
+ * render the real thing (thumbnail or document chip) when the timeline
+ * view holds the conversation address. The placeholder still covers
+ * media the platform declined to ingest (disallowed type, over the size
+ * cap — `media` unset by design) and renders without an address, where
+ * the bytes are unreachable.
  *
  * Returns `null` when the item needs no placeholder (it has text, or it
  * is not a provider-typed inbound item — e.g. an attention-clear event,

package/src/conversation/index.ts

@@ -40,6 +40,12 @@ export type {
   UseConversationTimelineReturn,
 } from "./useConversationTimeline.js";
 
+export { useConversationMediaUrl } from "./useConversationMediaUrl.js";
+export type {
+  UseConversationMediaUrlOptions,
+  UseConversationMediaUrlReturn,
+} from "./useConversationMediaUrl.js";
+
 export { useConversationParticipation } from "./useConversationParticipation.js";
 export type {
   ConversationCommand,

package/src/conversation/useConversationMediaUrl.ts

@@ -0,0 +1,121 @@
+"use client";
+
+import { useMemo } from "react";
+import { create } from "@bufbuild/protobuf";
+import { GetConversationMediaDownloadUrlInputSchema } from "@stigmer/protos/ai/stigmer/agentic/agentchannel/v1/conversation_io_pb";
+import { useStigmer } from "../hooks.js";
+import { useFetch } from "../internal/useFetch.js";
+
+/** Return value of {@link useConversationMediaUrl}. */
+export interface UseConversationMediaUrlReturn {
+  /**
+   * A freshly minted presigned download URL for the timeline item's media,
+   * or `null` when:
+   * - Fetching is skipped (`enabled` is `false`, or any address part is empty)
+   * - The request is in-flight
+   * - The request failed (including the server's uniform NOT_FOUND for
+   *   items without ingested media)
+   */
+  readonly url: string | null;
+
+  /** `true` while the URL request is in-flight (first load). */
+  readonly isLoading: boolean;
+
+  /** `true` while a background refetch is in flight. */
+  readonly isRefetching: boolean;
+
+  /** Error from the last failed attempt, or `null` when healthy. */
+  readonly error: Error | null;
+
+  /** Re-fetch the URL (e.g. to mint a fresh one after the previous expired). */
+  readonly refetch: () => void;
+}
+
+interface UrlData {
+  readonly url: string | null;
+}
+
+const EMPTY: UrlData = { url: null };
+
+/** Options for {@link useConversationMediaUrl}. */
+export interface UseConversationMediaUrlOptions {
+  /**
+   * Gate the request. When `false`, the hook stays idle and returns `null` —
+   * use this to defer minting a URL until it is actually needed.
+   * Defaults to `true`.
+   */
+  readonly enabled?: boolean;
+}
+
+/**
+ * Data hook that resolves a **fresh** presigned download URL for one
+ * timeline item's ingested media (an image or document the customer sent)
+ * via `stigmer.agentChannel.getMediaDownloadUrl()`.
+ *
+ * Addressed by `(channel, conversation, item_id)` — never a storage key:
+ * the server resolves the blob from its own row, so the read path stays
+ * conversation-viewer-scoped by construction and blob capabilities never
+ * ride the wire (whatsapp-media DD-001 D4). The URL expires (about an
+ * hour); minting at view time keeps it always valid, the
+ * `useArtifactDownloadUrl` rationale.
+ *
+ * The URL is cached cross-mount by the item's full address (DD-014), so
+ * the 5s timeline poll's re-renders and a lightbox opened from a
+ * thumbnail reuse the minted URL instead of re-hitting the API.
+ *
+ * Pass empty strings (or `enabled: false`) to skip fetching — the
+ * conversation surface's established skip convention.
+ *
+ * @param agentChannelId - AgentChannel the conversation belongs to, or `""` to skip.
+ * @param conversationKey - Conversation key within the channel, or `""` to skip.
+ * @param itemId - The timeline item whose media to fetch (e.g. `"wa:<wamid>"`), or `""` to skip.
+ * @param options - Optional gating (`enabled`).
+ *
+ * @example
+ * ```tsx
+ * // Render an inbound photo with an always-fresh URL.
+ * const { url, isLoading } = useConversationMediaUrl(channelId, key, item.itemId);
+ * if (isLoading) return <Skeleton />;
+ * return url ? <img src={url} alt={item.media?.filename} /> : null;
+ * ```
+ *
+ * @see useArtifactDownloadUrl — the execution-artifact counterpart this mirrors
+ */
+export function useConversationMediaUrl(
+  agentChannelId: string,
+  conversationKey: string,
+  itemId: string,
+  options?: UseConversationMediaUrlOptions,
+): UseConversationMediaUrlReturn {
+  const stigmer = useStigmer();
+  const enabled = options?.enabled ?? true;
+  const active =
+    enabled && agentChannelId !== "" && conversationKey !== "" && itemId !== "";
+
+  const { data, isLoading, isRefetching, error, refetch } = useFetch(
+    active
+      ? () =>
+          stigmer.agentChannel
+            .getMediaDownloadUrl(
+              create(GetConversationMediaDownloadUrlInputSchema, {
+                agentChannelId,
+                conversationKey,
+                itemId,
+              }),
+            )
+            .then((result): UrlData => ({ url: result.url || null }))
+      : null,
+    [agentChannelId, conversationKey, itemId, active, stigmer],
+    EMPTY,
+    {
+      cacheKey: active
+        ? `conversation-media-url:${agentChannelId}:${conversationKey}:${itemId}`
+        : undefined,
+    },
+  );
+
+  return useMemo(
+    () => ({ url: data.url, isLoading, isRefetching, error, refetch }),
+    [data.url, isLoading, isRefetching, error, refetch],
+  );
+}

package/src/cursor-accounts/CursorAccountEditor.tsx

@@ -102,8 +102,8 @@ export function CursorAccountEditor({
   };
 
   return (
-    <form className={cn("max-w-xl space-y-3", className)} onSubmit={handleSubmit}>
-      <h3 className="text-sm font-semibold text-foreground">
+    <form className={cn("stg:max-w-xl stg:space-y-3", className)} onSubmit={handleSubmit}>
+      <h3 className="stg:text-sm stg:font-semibold stg:text-foreground">
         {isCreate ? "Add Cursor account" : `Edit ${initial.displayName}`}
       </h3>
 
@@ -129,7 +129,7 @@ export function CursorAccountEditor({
         />
       </Field>
       {!isCreate && (
-        <p className="text-[11px] text-muted-foreground">
+        <p className="stg:text-[11px] stg:text-muted-foreground">
           Leave the masked value untouched to keep the stored key; typing a
           new key rotates it (validated against Cursor before saving).
         </p>
@@ -147,7 +147,7 @@ export function CursorAccountEditor({
           spellCheck={false}
         />
       </Field>
-      <p className="text-[11px] text-muted-foreground">
+      <p className="stg:text-[11px] stg:text-muted-foreground">
         Optional. Powers one-click &quot;Copy invite&quot; on coverage rows
         whose key owner is not on the team. The link is long-lived and
         joinable by anyone holding it (each join consumes a paid seat) —
@@ -157,14 +157,14 @@ export function CursorAccountEditor({
 
       <Field label="Dedicated organization ids">
         <textarea
-          className={cn(INPUT_CLASSES, "min-h-16 font-mono")}
+          className={cn(INPUT_CLASSES, "stg:min-h-16 stg:font-mono")}
           value={orgIdsText}
           onChange={(e) => setOrgIdsText(e.target.value)}
           placeholder={"one org id per line\n(leave empty for a shared-pool account)"}
           disabled={isSubmitting}
         />
       </Field>
-      <p className="text-[11px] text-muted-foreground">
+      <p className="stg:text-[11px] stg:text-muted-foreground">
         Listing org ids DEDICATES this account to them: their sessions use
         only this account&apos;s keys and fail with a clear message when it
         runs dry. Leaving this empty makes the account part of the shared
@@ -173,9 +173,9 @@ export function CursorAccountEditor({
         one account.
       </p>
 
-      <div className="space-y-2">
+      <div className="stg:space-y-2">
         <div>
-          <label className="flex items-center gap-1.5 text-xs text-foreground">
+          <label className="stg:flex stg:items-center stg:gap-1.5 stg:text-xs stg:text-foreground">
             <input
               type="checkbox"
               checked={enabled}
@@ -184,14 +184,14 @@ export function CursorAccountEditor({
             />
             Enabled for key selection
           </label>
-          <p className="mt-0.5 pl-[1.375rem] text-[11px] text-muted-foreground">
+          <p className="stg:mt-0.5 stg:pl-[1.375rem] stg:text-[11px] stg:text-muted-foreground">
             Leave checked for accounts that should serve traffic. Unchecking
             drains the account: new sessions stop routing here immediately,
             but sessions already pinned to one of its keys keep working.
           </p>
         </div>
         <div>
-          <label className="flex items-center gap-1.5 text-xs text-foreground">
+          <label className="stg:flex stg:items-center stg:gap-1.5 stg:text-xs stg:text-foreground">
             <input
               type="checkbox"
               checked={onDemandEnabled}
@@ -200,7 +200,7 @@ export function CursorAccountEditor({
             />
             On-demand usage enabled (as configured in the Cursor dashboard)
           </label>
-          <p className="mt-0.5 pl-[1.375rem] text-[11px] text-muted-foreground">
+          <p className="stg:mt-0.5 stg:pl-[1.375rem] stg:text-[11px] stg:text-muted-foreground">
             Declared here because Cursor&apos;s Admin API cannot report the
             team&apos;s on-demand setting. Uncheck only when the dashboard has
             on-demand usage OFF: new sessions then avoid member keys whose
@@ -211,12 +211,12 @@ export function CursorAccountEditor({
       </div>
 
       {submitError && (
-        <p className="text-destructive text-xs" role="alert">
+        <p className="stg:text-destructive stg:text-xs" role="alert">
           {getUserMessage(submitError)}
         </p>
       )}
 
-      <div className="flex gap-2">
+      <div className="stg:flex stg:gap-2">
         <Button type="submit" size="sm" disabled={!canSubmit}>
           {isSubmitting ? "Saving…" : isCreate ? "Create account" : "Save changes"}
         </Button>

package/src/cursor-accounts/CursorAccountsAccessNotice.tsx

@@ -17,15 +17,15 @@ export function CursorAccountsAccessNotice({
   return (
     <div
       className={cn(
-        "rounded-lg border border-border bg-card px-4 py-6 text-center",
+        "stg:rounded-lg stg:border stg:border-border stg:bg-card stg:px-4 stg:py-6 stg:text-center",
         className,
       )}
       role="status"
     >
-      <p className="text-xs font-semibold text-foreground">
+      <p className="stg:text-xs stg:font-semibold stg:text-foreground">
         Platform operator access required
       </p>
-      <p className="mx-auto mt-1 max-w-md text-xs text-muted-foreground">
+      <p className="stg:mx-auto stg:mt-1 stg:max-w-md stg:text-xs stg:text-muted-foreground">
         Cursor account management is a Stigmer-internal surface holding
         provider credentials and team spend. It needs the platform operator
         role — organization roles do not grant it. If you believe you should

package/src/cursor-accounts/CursorAccountsConsole.tsx

@@ -63,10 +63,10 @@ export function CursorAccountsConsole({ className }: CursorAccountsConsoleProps)
 
   if (list.isLoading) {
     return (
-      <div className={cn("space-y-2", className)} aria-busy="true">
-        <div className="h-4 w-40 animate-pulse rounded bg-muted-subtle" />
+      <div className={cn("stg:space-y-2", className)} aria-busy="true">
+        <div className="stg:h-4 stg:w-40 stg:animate-pulse stg:rounded stg:bg-muted-subtle" />
         {Array.from({ length: 3 }, (_, i) => (
-          <div key={i} className="h-10 animate-pulse rounded-lg bg-muted-subtle" />
+          <div key={i} className="stg:h-10 stg:animate-pulse stg:rounded-lg stg:bg-muted-subtle" />
         ))}
       </div>
     );
@@ -79,7 +79,7 @@ export function CursorAccountsConsole({ className }: CursorAccountsConsoleProps)
       return <CursorAccountsAccessNotice className={className} />;
     }
     return (
-      <p className={cn("text-destructive text-xs", className)} role="alert">
+      <p className={cn("stg:text-destructive stg:text-xs", className)} role="alert">
         {getUserMessage(list.error)}
       </p>
     );
@@ -120,32 +120,32 @@ export function CursorAccountsConsole({ className }: CursorAccountsConsoleProps)
   const accounts = list.accounts?.accounts ?? [];
 
   return (
-    <div className={cn("space-y-3", className)}>
-      <div className="flex items-center justify-between gap-3">
-        <h3 className="text-sm font-semibold text-foreground">Cursor accounts</h3>
+    <div className={cn("stg:space-y-3", className)}>
+      <div className="stg:flex stg:items-center stg:justify-between stg:gap-3">
+        <h3 className="stg:text-sm stg:font-semibold stg:text-foreground">Cursor accounts</h3>
         <Button size="sm" onClick={() => setFlow({ phase: "create" })}>
           Add account
         </Button>
       </div>
 
-      <div className="rounded-lg border border-border bg-card">
+      <div className="stg:rounded-lg stg:border stg:border-border stg:bg-card">
         <div
           aria-hidden="true"
-          className="grid grid-cols-[2fr_1fr_1fr_1fr_1fr] gap-2 border-b border-border px-3 py-2 text-[11px] font-medium text-muted-foreground"
+          className="stg:grid stg:grid-cols-[2fr_1fr_1fr_1fr_1fr] stg:gap-2 stg:border-b stg:border-border stg:px-3 stg:py-2 stg:text-[11px] stg:font-medium stg:text-muted-foreground"
         >
           <span>Account</span>
           <span>Orgs</span>
           <span>Status</span>
           <span>Execution keys</span>
-          <span className="text-right">Last synced</span>
+          <span className="stg:text-right">Last synced</span>
         </div>
         {accounts.length === 0 ? (
-          <p className="px-3 py-2 text-xs text-muted-foreground">
+          <p className="stg:px-3 stg:py-2 stg:text-xs stg:text-muted-foreground">
             No Cursor accounts yet. Add one with its team Admin API key, then
             add member execution keys to make it routable.
           </p>
         ) : (
-          <ul role="list" aria-label="Cursor accounts" className="m-0 list-none p-0">
+          <ul role="list" aria-label="Cursor accounts" className="stg:m-0 stg:list-none stg:p-0">
             {accounts.map((summary) => (
               <AccountRow
                 key={summary.account?.accountId}
@@ -181,29 +181,29 @@ function AccountRow({
   if (!account) return null;
 
   return (
-    <li className="border-b border-border last:border-b-0">
+    <li className="stg:border-b stg:border-border stg:last:border-b-0">
       <button
         type="button"
         onClick={onOpen}
         className={cn(
-          "grid w-full grid-cols-[2fr_1fr_1fr_1fr_1fr] items-center gap-2 px-3 py-2 text-left text-xs",
-          "transition-colors hover:bg-accent",
-          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          "stg:grid stg:w-full stg:grid-cols-[2fr_1fr_1fr_1fr_1fr] stg:items-center stg:gap-2 stg:px-3 stg:py-2 stg:text-left stg:text-xs",
+          "stg:transition-colors stg:hover:bg-accent",
+          "stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring",
         )}
       >
-        <span className="min-w-0">
-          <span className="block truncate font-medium text-foreground">
+        <span className="stg:min-w-0">
+          <span className="stg:block stg:truncate stg:font-medium stg:text-foreground">
             {account.displayName}
           </span>
           {/* Account class is DERIVED from org_ids (DD-008): no org
               assignment means the account belongs to the shared pool. */}
           {account.orgIds.length === 0 && (
-            <span className="block text-[11px] text-muted-foreground">
+            <span className="stg:block stg:text-[11px] stg:text-muted-foreground">
               shared pool
             </span>
           )}
         </span>
-        <span className="text-muted-foreground">
+        <span className="stg:text-muted-foreground">
           {account.orgIds.length > 0 ? account.orgIds.length : "—"}
         </span>
         <span>
@@ -214,12 +214,12 @@ function AccountRow({
         </span>
         <span>
           {summary.enabledKeyCount > 0 ? (
-            <span className="text-muted-foreground">{summary.enabledKeyCount}</span>
+            <span className="stg:text-muted-foreground">{summary.enabledKeyCount}</span>
           ) : (
             <StateBadge tone="warn" label="Not routable" />
           )}
         </span>
-        <span className="text-right text-muted-foreground">
+        <span className="stg:text-right stg:text-muted-foreground">
           {formatSyncTime(summary.lastSyncedAt)}
         </span>
       </button>
@@ -303,17 +303,17 @@ function AccountDetail({
 
   if (detail.isLoading) {
     return (
-      <div className={cn("space-y-2", className)} aria-busy="true">
-        <div className="h-4 w-40 animate-pulse rounded bg-muted-subtle" />
-        <div className="h-24 animate-pulse rounded-lg bg-muted-subtle" />
+      <div className={cn("stg:space-y-2", className)} aria-busy="true">
+        <div className="stg:h-4 stg:w-40 stg:animate-pulse stg:rounded stg:bg-muted-subtle" />
+        <div className="stg:h-24 stg:animate-pulse stg:rounded-lg stg:bg-muted-subtle" />
       </div>
     );
   }
 
   if (detail.error || !detail.view?.account) {
     return (
-      <div className={cn("space-y-2", className)}>
-        <p className="text-destructive text-xs" role="alert">
+      <div className={cn("stg:space-y-2", className)}>
+        <p className="stg:text-destructive stg:text-xs" role="alert">
           {detail.error ? getUserMessage(detail.error) : "Account not found."}
         </p>
         <Button size="sm" variant="outline" onClick={onBack}>
@@ -364,13 +364,13 @@ function AccountDetail({
   }
 
   return (
-    <div className={cn("space-y-4", className)}>
-      <div className="flex flex-wrap items-center justify-between gap-2">
+    <div className={cn("stg:space-y-4", className)}>
+      <div className="stg:flex stg:flex-wrap stg:items-center stg:justify-between stg:gap-2">
         <div>
-          <h3 className="text-sm font-semibold text-foreground">
+          <h3 className="stg:text-sm stg:font-semibold stg:text-foreground">
             {account.displayName}
           </h3>
-          <p className="text-[11px] text-muted-foreground">
+          <p className="stg:text-[11px] stg:text-muted-foreground">
             {account.orgIds.length > 0
               ? `Dedicated to ${account.orgIds.length} org(s): ${account.orgIds.join(", ")}`
               : "Shared pool — serves every org with no dedicated account"}
@@ -389,7 +389,7 @@ function AccountDetail({
               : ""}
           </p>
         </div>
-        <div className="flex gap-2">
+        <div className="stg:flex stg:gap-2">
           <Button size="sm" variant="outline" onClick={onBack}>
             Back
           </Button>
@@ -425,17 +425,17 @@ function AccountDetail({
       </div>
 
       {syncError && (
-        <p className="text-destructive text-xs" role="alert">
+        <p className="stg:text-destructive stg:text-xs" role="alert">
           {getUserMessage(syncError)}
         </p>
       )}
       {deleteError && (
-        <p className="text-destructive text-xs" role="alert">
+        <p className="stg:text-destructive stg:text-xs" role="alert">
           {getUserMessage(deleteError)}
         </p>
       )}
       {view.snapshot?.syncError && (
-        <p className="text-xs text-muted-foreground" role="status">
+        <p className="stg:text-xs stg:text-muted-foreground" role="status">
           Last sync was partial: {view.snapshot.syncError}
         </p>
       )}