@stigmer/react 3.10.0 → 3.11.1-dev.20260812192248

package/src/composer/__tests__/SessionComposer-agentSetupError.test.tsx

@@ -0,0 +1,124 @@
+import { describe, it, expect, vi, beforeAll, beforeEach, afterEach } from "vitest";
+import { render, cleanup } from "@testing-library/react";
+import type { ReactNode } from "react";
+import type { Stigmer } from "@stigmer/sdk";
+import { StigmerContext } from "../../context";
+import { ModelRegistryContext } from "../../models/ModelRegistryContext";
+
+// Without a StigmerProvider the portal container is null, and Base UI's
+// Portal renders nothing — pin it to document.body so popovers can mount.
+vi.mock("../../portal-container", () => ({
+  useStigmerPortalContainer: () => document.body,
+}));
+
+// Controllable agent-setup state — these tests drive the error slot directly
+// instead of exercising the full resolution state machine (covered by
+// useAgentSetup's own tests).
+const mockAgentSetup = {
+  state: { status: "idle", error: null } as Record<string, unknown>,
+  resolveAgent: vi.fn(),
+  resolveToInstance: vi.fn(),
+  submitEnvVars: vi.fn(),
+  reset: vi.fn(),
+};
+vi.mock("../../agent/useAgentSetup", () => ({
+  useAgentSetup: () => mockAgentSetup,
+}));
+
+import { SessionComposer } from "../SessionComposer";
+
+beforeAll(() => {
+  if (!("ResizeObserver" in globalThis)) {
+    (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver =
+      class {
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+      };
+  }
+});
+
+function createMinimalStigmerMock(): Stigmer {
+  return {
+    agentExecution: { uploadAttachment: vi.fn() },
+    environment: { getPersonal: vi.fn().mockResolvedValue(null) },
+    baseUrl: "http://localhost:8080",
+    getAuthCredential: vi.fn().mockResolvedValue("test-token"),
+    config: {
+      baseUrl: "http://localhost:8080",
+      getAccessToken: vi.fn().mockResolvedValue(""),
+    },
+  } as unknown as Stigmer;
+}
+
+function createWrapper(client: Stigmer) {
+  return function Wrapper({ children }: { children: ReactNode }) {
+    return (
+      <StigmerContext.Provider value={client}>
+        <ModelRegistryContext.Provider
+          value={{ models: [], isLoading: false, error: null, refetch: vi.fn() }}
+        >
+          {children}
+        </ModelRegistryContext.Provider>
+      </StigmerContext.Provider>
+    );
+  };
+}
+
+function renderComposer(
+  props?: Partial<React.ComponentProps<typeof SessionComposer>>,
+) {
+  const client = createMinimalStigmerMock();
+  return render(
+    <SessionComposer
+      onSubmit={vi.fn()}
+      org="acme"
+      agentRef={null}
+      onAgentRefChange={vi.fn()}
+      onSkillRefsChange={vi.fn()}
+      skillRefs={[]}
+      {...props}
+    />,
+    { wrapper: createWrapper(client) },
+  );
+}
+
+beforeEach(() => {
+  mockAgentSetup.state = { status: "idle", error: null };
+});
+
+afterEach(cleanup);
+
+/**
+ * The agent setup error's OUTBOUND bridge. The error is otherwise rendered
+ * only inside the Configure popover's agent panel — which a locked,
+ * end-user-facing embed never opens — and onAgentResolutionChange fires only
+ * on success. Without this callback, a failed mount-time resolution of
+ * initialAgentRef is invisible to the parent, and any parent gate waiting on
+ * the resolution holds forever (the "dead launcher pane" class).
+ */
+describe("SessionComposer — onAgentSetupErrorChange", () => {
+  it("reports the setup error to the parent", () => {
+    const onError = vi.fn();
+    const failure = new Error("agent lookup timed out");
+    mockAgentSetup.state = { status: "idle", error: failure };
+
+    renderComposer({ onAgentSetupErrorChange: onError });
+
+    expect(onError).toHaveBeenCalledWith(failure);
+  });
+
+  it("reports null when no error is present (and when it clears)", () => {
+    const onError = vi.fn();
+    renderComposer({ onAgentSetupErrorChange: onError });
+
+    expect(onError).toHaveBeenCalledWith(null);
+    expect(onError).not.toHaveBeenCalledWith(expect.any(Error));
+  });
+
+  it("renders normally when the callback is not provided", () => {
+    mockAgentSetup.state = { status: "idle", error: new Error("boom") };
+
+    expect(() => renderComposer()).not.toThrow();
+  });
+});

package/src/composer/__tests__/SessionComposer-lockAgent.test.tsx

@@ -1,16 +1,11 @@
 import { describe, it, expect, vi, beforeAll, beforeEach, afterEach } from "vitest";
-import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import { render, screen, cleanup } from "@testing-library/react";
 import type { ReactNode } from "react";
 import type { Stigmer } from "@stigmer/sdk";
 import { StigmerContext } from "../../context";
+import { openMenu } from "../../__tests__/helpers/open-menu";
 import { ModelRegistryContext } from "../../models/ModelRegistryContext";
 
-// Without a StigmerProvider the portal container is null, and Base UI's
-// Portal renders nothing — pin it to document.body so the popover mounts.
-vi.mock("../../portal-container", () => ({
-  useStigmerPortalContainer: () => document.body,
-}));
-
 // Controllable agent-setup state — lets these tests drive the lock × setup
 // matrix directly instead of exercising the full resolution state machine
 // (which is covered by useAgentSetup's own tests).
@@ -85,8 +80,9 @@ function renderComposer(
   );
 }
 
-function openConfigureMenu() {
-  fireEvent.click(
+/** Opens the composer's Configure menu via the shared readiness-gated helper. */
+async function openConfigureMenu() {
+  await openMenu(
     screen.getByRole("button", { name: "Configure agent, tools, and skills" }),
   );
 }
@@ -98,25 +94,25 @@ beforeEach(() => {
 afterEach(cleanup);
 
 describe("SessionComposer — lockAgent", () => {
-  it("shows the Agent entry in the Configure menu by default", () => {
+  it("shows the Agent entry in the Configure menu by default", async () => {
     renderComposer();
-    openConfigureMenu();
+    await openConfigureMenu();
 
     expect(screen.getByRole("menuitem", { name: /Agent/ })).toBeTruthy();
   });
 
-  it("hides the Agent entry when locked, leaving other entries intact", () => {
+  it("hides the Agent entry when locked, leaving other entries intact", async () => {
     renderComposer({
       lockAgent: true,
       agentRef: { org: "acme", slug: "support-bot" },
     });
-    openConfigureMenu();
+    await openConfigureMenu();
 
     expect(screen.queryByRole("menuitem", { name: /Agent/ })).toBeNull();
     expect(screen.getByRole("menuitem", { name: /Skills/ })).toBeTruthy();
   });
 
-  it("keeps the Agent entry reachable while a locked agent needs env vars", () => {
+  it("keeps the Agent entry reachable while a locked agent needs env vars", async () => {
     // A pinned agent that requires credentials: resolution is pending and
     // the env form lives in the Configure > Agent panel — lock ≠ unwire.
     mockAgentSetup.state = {
@@ -132,11 +128,11 @@ describe("SessionComposer — lockAgent", () => {
     expect(screen.getByText("Agent needs configuration before use")).toBeTruthy();
 
     // ...and as a (warning-marked) Configure menu entry, despite the lock.
-    openConfigureMenu();
+    await openConfigureMenu();
     expect(screen.getByRole("menuitem", { name: /Agent/ })).toBeTruthy();
   });
 
-  it("removes the Agent entry once the locked agent has resolved", () => {
+  it("removes the Agent entry once the locked agent has resolved", async () => {
     mockAgentSetup.state = { status: "idle" };
     renderComposer({
       lockAgent: true,
@@ -144,7 +140,7 @@ describe("SessionComposer — lockAgent", () => {
     });
 
     expect(screen.queryByText("Agent needs configuration before use")).toBeNull();
-    openConfigureMenu();
+    await openConfigureMenu();
     expect(screen.queryByRole("menuitem", { name: /Agent/ })).toBeNull();
   });
 });

package/src/composer/__tests__/SessionComposer-serviceTier.test.tsx

@@ -7,13 +7,8 @@ import { ModelRegistryContext } from "../../models/ModelRegistryContext";
 import type { ModelInfo } from "../../models/registry";
 import { SessionComposer } from "../SessionComposer";
 
-// Portal into document.body so the popover mounts under happy-dom, and shim
-// ResizeObserver for Base UI's positioner (the scheduleCreation.test.tsx
-// pattern).
-vi.mock("../../portal-container", () => ({
-  useStigmerPortalContainer: () => document.body,
-}));
-
+// Shim ResizeObserver for Base UI's positioner (the
+// scheduleCreation.test.tsx pattern).
 beforeAll(() => {
   if (!("ResizeObserver" in globalThis)) {
     (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver =

package/src/composer/icons.tsx

@@ -8,7 +8,7 @@ export function ChipSpinner() {
       stroke="currentColor"
       strokeWidth="2.5"
       strokeLinecap="round"
-      className="shrink-0 animate-spin text-muted-foreground"
+      className="stg:shrink-0 stg:animate-spin stg:text-muted-foreground"
       aria-hidden="true"
     >
       <path d="M8 2a6 6 0 1 0 6 6" />
@@ -64,7 +64,7 @@ export function SpinnerIcon() {
       stroke="currentColor"
       strokeWidth="2"
       strokeLinecap="round"
-      className="animate-spin"
+      className="stg:animate-spin"
       aria-hidden="true"
     >
       <path d="M8 2a6 6 0 1 0 6 6" />
@@ -251,7 +251,7 @@ export function ConfigureIcon() {
 
 export function ResolveSpinner() {
   return (
-    <div className="flex flex-col items-center gap-1.5">
+    <div className="stg:flex stg:flex-col stg:items-center stg:gap-1.5">
       <svg
         width="16"
         height="16"
@@ -260,12 +260,12 @@ export function ResolveSpinner() {
         stroke="currentColor"
         strokeWidth="2"
         strokeLinecap="round"
-        className="animate-spin text-muted-foreground"
+        className="stg:animate-spin stg:text-muted-foreground"
         aria-hidden="true"
       >
         <path d="M8 2a6 6 0 1 0 6 6" />
       </svg>
-      <span className="text-[0.6rem] text-muted-foreground">
+      <span className="stg:text-[0.6rem] stg:text-muted-foreground">
         Checking agent requirements...
       </span>
     </div>

package/src/conversation/ConversationAttentionBanner.tsx

@@ -39,15 +39,15 @@ export function ConversationAttentionBanner({
   return (
     <div
       className={cn(
-        "border-b border-border bg-destructive-subtle px-4 py-2",
+        "stg:border-b stg:border-border stg:bg-destructive-subtle stg:px-4 stg:py-2",
         className,
       )}
       role="status"
     >
-      <div className="flex flex-wrap items-center justify-between gap-2">
-        <p className="flex min-w-0 items-start gap-1.5 text-sm text-destructive">
-          <TriangleAlert aria-hidden="true" className="mt-0.5 size-4 shrink-0" />
-          <span className="min-w-0 break-words">
+      <div className="stg:flex stg:flex-wrap stg:items-center stg:justify-between stg:gap-2">
+        <p className="stg:flex stg:min-w-0 stg:items-start stg:gap-1.5 stg:text-sm stg:text-destructive">
+          <TriangleAlert aria-hidden="true" className="stg:mt-0.5 stg:size-4 stg:shrink-0" />
+          <span className="stg:min-w-0 stg:break-words">
             The agent asked for a human
             {conversation.attentionReason ? (
               <> — &ldquo;{conversation.attentionReason}&rdquo;</>
@@ -70,7 +70,7 @@ export function ConversationAttentionBanner({
         </Button>
       </div>
       {error && (
-        <p className="mt-1 text-xs text-destructive">{getUserMessage(error)}</p>
+        <p className="stg:mt-1 stg:text-xs stg:text-destructive">{getUserMessage(error)}</p>
       )}
     </div>
   );

package/src/conversation/ConversationComposer.tsx

@@ -93,38 +93,38 @@ export function ConversationComposer({
 
   if (disabledReason !== null) {
     return (
-      <div className={cn("border-t border-border px-4 py-3", className)}>
-        <p className="text-center text-xs text-muted-foreground">{disabledReason}</p>
+      <div className={cn("stg:border-t stg:border-border stg:px-4 stg:py-3", className)}>
+        <p className="stg:text-center stg:text-xs stg:text-muted-foreground">{disabledReason}</p>
       </div>
     );
   }
 
   return (
-    <div className={cn("border-t border-border px-4 py-3", className)}>
+    <div className={cn("stg:border-t stg:border-border stg:px-4 stg:py-3", className)}>
       {/* The persistent forecast sits above the transient send-outcome
           notice: the notice is the more recent event and belongs closest
           to the input it reacts to. */}
       {hasAdvisory && (
         <p
           id={advisoryId}
-          className="mb-2 flex items-start gap-1.5 rounded-md bg-status-degraded-subtle px-2.5 py-1.5 text-xs text-status-degraded"
+          className="stg:mb-2 stg:flex stg:items-start stg:gap-1.5 stg:rounded-md stg:bg-status-degraded-subtle stg:px-2.5 stg:py-1.5 stg:text-xs stg:text-status-degraded"
         >
-          <TriangleAlert aria-hidden="true" className="mt-0.5 size-3.5 shrink-0" />
-          <span className="min-w-0">{advisory}</span>
+          <TriangleAlert aria-hidden="true" className="stg:mt-0.5 stg:size-3.5 stg:shrink-0" />
+          <span className="stg:min-w-0">{advisory}</span>
         </p>
       )}
       {notice && (
         <p
           className={cn(
-            "mb-2 text-xs",
-            notice.kind === "queued" ? "text-muted-foreground" : "text-destructive",
+            "stg:mb-2 stg:text-xs",
+            notice.kind === "queued" ? "stg:text-muted-foreground" : "stg:text-destructive",
           )}
           role="status"
         >
           {notice.text}
         </p>
       )}
-      <div className="flex items-end gap-2">
+      <div className="stg:flex stg:items-end stg:gap-2">
         <textarea
           {...composer.textareaProps}
           rows={1}
@@ -132,9 +132,9 @@ export function ConversationComposer({
           aria-label="Reply to the customer"
           aria-describedby={hasAdvisory ? advisoryId : undefined}
           className={cn(
-            "min-h-9 flex-1 resize-none rounded-md border border-border bg-background",
-            "px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground-faint",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            "stg:min-h-9 stg:flex-1 stg:resize-none stg:rounded-md stg:border stg:border-border stg:bg-background",
+            "stg:px-3 stg:py-2 stg:text-sm stg:text-foreground stg:placeholder:text-muted-foreground-faint",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
           )}
         />
         <Button
@@ -147,7 +147,7 @@ export function ConversationComposer({
           {/* The house in-flight glyph (the session composer's pattern):
               the spinner replaces the Send icon so the button itself
               reports progress, not just its label. */}
-          {isSending ? <SpinnerIcon /> : <Send aria-hidden="true" className="size-4" />}
+          {isSending ? <SpinnerIcon /> : <Send aria-hidden="true" className="stg:size-4" />}
           {isSending ? "Sending…" : "Send"}
         </Button>
       </div>

package/src/conversation/ConversationControlBanner.tsx

@@ -92,16 +92,16 @@ export function ConversationControlBanner({
   return (
     <div
       className={cn(
-        "border-b border-border px-4 py-2",
-        humanHeld ? "bg-primary-subtle" : "bg-muted-faint",
+        "stg:border-b stg:border-border stg:px-4 stg:py-2",
+        humanHeld ? "stg:bg-primary-subtle" : "stg:bg-muted-faint",
         className,
       )}
     >
-      <div className="flex flex-wrap items-center justify-between gap-2">
-        <p className="flex items-center gap-1.5 text-sm text-foreground">
+      <div className="stg:flex stg:flex-wrap stg:items-center stg:justify-between stg:gap-2">
+        <p className="stg:flex stg:items-center stg:gap-1.5 stg:text-sm stg:text-foreground">
           {humanHeld ? (
             <>
-              <User aria-hidden="true" className="size-4 text-muted-foreground" />
+              <User aria-hidden="true" className="stg:size-4 stg:text-muted-foreground" />
               {heldByMe
                 ? "You have this conversation — the agent is quiet until you hand it back."
                 : currentIdentityAccountId !== undefined
@@ -114,15 +114,15 @@ export function ConversationControlBanner({
             </>
           ) : (
             <>
-              <Bot aria-hidden="true" className="size-4 text-muted-foreground" />
+              <Bot aria-hidden="true" className="stg:size-4 stg:text-muted-foreground" />
               The agent is serving this conversation.
             </>
           )}
         </p>
 
         {confirmingHandBack ? (
-          <div className="flex items-center gap-2">
-            <span className="text-xs text-destructive">
+          <div className="stg:flex stg:items-center stg:gap-2">
+            <span className="stg:text-xs stg:text-destructive">
               The customer&apos;s last message has no reply — the agent stays
               quiet until they write again.
             </span>
@@ -157,14 +157,14 @@ export function ConversationControlBanner({
             {pendingCommands.has("handBack") ? "Handing back…" : "Hand back to agent"}
           </Button>
         ) : (
-          <div className="flex items-center gap-2">
+          <div className="stg:flex stg:items-center stg:gap-2">
             {!supportsStaffReplies && (
               // Visible text, never a native title (F-18): a disabled
               // Button swallows hover (disabled:pointer-events-none) and
               // leaves the tab order, so a title on it is unreachable by
               // every input method. Kept short — the composer's own
               // notice already explains the missing staff reply lane.
-              <span className="text-xs text-muted-foreground">
+              <span className="stg:text-xs stg:text-muted-foreground">
                 This channel&apos;s provider has no staff send lane yet — a
                 takeover would silence the agent with no way to reply.
               </span>
@@ -186,7 +186,7 @@ export function ConversationControlBanner({
       </div>
 
       {error && (
-        <p className="mt-1 text-xs text-destructive">{getUserMessage(error)}</p>
+        <p className="stg:mt-1 stg:text-xs stg:text-destructive">{getUserMessage(error)}</p>
       )}
     </div>
   );

package/src/conversation/ConversationListPane.tsx

@@ -120,16 +120,16 @@ export function ConversationListPane({
   return (
     <div
       aria-label="Conversation list"
-      className={cn("flex min-h-0 flex-col", className)}
+      className={cn("stg:flex stg:min-h-0 stg:flex-col", className)}
     >
       {(onFilterChange !== undefined || channels.length > 1) && (
-        <div className="flex flex-col gap-2 border-b border-border px-3 py-2">
+        <div className="stg:flex stg:flex-col stg:gap-2 stg:border-b stg:border-border stg:px-3 stg:py-2">
           {onFilterChange !== undefined && (
             <ConversationFilterToggle value={filter} onChange={onFilterChange} />
           )}
           {channels.length > 1 && (
             <>
-              <label className="sr-only" htmlFor="stgm-conversation-channel-filter">
+              <label className="stg:sr-only" htmlFor="stgm-conversation-channel-filter">
                 Filter by channel
               </label>
               <select
@@ -137,9 +137,9 @@ export function ConversationListPane({
                 value={channelFilter}
                 onChange={(e) => onChannelFilterChange(e.target.value)}
                 className={cn(
-                  "w-full rounded-md border border-border bg-background px-2 py-1.5",
-                  "text-sm text-foreground",
-                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  "stg:w-full stg:rounded-md stg:border stg:border-border stg:bg-background stg:px-2 stg:py-1.5",
+                  "stg:text-sm stg:text-foreground",
+                  "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
                 )}
               >
                 <option value="">All channels</option>
@@ -154,18 +154,18 @@ export function ConversationListPane({
         </div>
       )}
 
-      <div className="min-h-0 flex-1 overflow-y-auto p-2">
+      <div className="stg:min-h-0 stg:flex-1 stg:overflow-y-auto stg:p-2">
         {isLoading ? (
           <ListSkeleton />
         ) : error ? (
-          <p className="px-2 py-6 text-center text-sm text-destructive">
+          <p className="stg:px-2 stg:py-6 stg:text-center stg:text-sm stg:text-destructive">
             {getUserMessage(error)}
           </p>
         ) : conversations.length === 0 ? (
           channels.length === 0 ? (
             <EmptyState
               variant="first-use"
-              icon={<MessageSquare className="size-8" />}
+              icon={<MessageSquare className="stg:size-8" />}
               title="No channels to watch"
               description="Conversations arrive through an agent's channels. Connect a channel — or ask a channel owner for access — and customer conversations appear here."
             />
@@ -175,14 +175,14 @@ export function ConversationListPane({
             // to an org with a full inbox and nothing needing a person.
             <EmptyState
               variant="first-use"
-              icon={<MessageSquare className="size-8" />}
+              icon={<MessageSquare className="stg:size-8" />}
               title="Nothing needs a human right now"
               description="Conversations appear here when the agent asks for attention, or when a human-held conversation has a customer message awaiting a reply."
             />
           ) : (
             <EmptyState
               variant="first-use"
-              icon={<MessageSquare className="size-8" />}
+              icon={<MessageSquare className="stg:size-8" />}
               title="No conversations yet"
               description="When a customer messages one of your channels, their conversation appears here."
             />
@@ -192,7 +192,7 @@ export function ConversationListPane({
             {/* One context-only provider arms every row's attention
                 tooltip (the WorkspaceSidebar recents-list precedent). */}
             <TooltipProvider>
-              <ul className="space-y-0.5">
+              <ul className="stg:space-y-0.5">
                 {conversations.map((conversation) => (
                   <ConversationRow
                     key={`${conversation.agentChannelId}:${conversation.conversationKey}`}
@@ -216,7 +216,7 @@ export function ConversationListPane({
               </ul>
             </TooltipProvider>
             {hasMore && (
-              <div className="flex justify-center py-2">
+              <div className="stg:flex stg:justify-center stg:py-2">
                 <Button
                   variant="ghost"
                   size="xs"
@@ -299,7 +299,7 @@ function ConversationFilterToggle({
     <div
       role="radiogroup"
       aria-label="Conversation filter"
-      className="inline-flex self-start rounded-md bg-muted p-0.5"
+      className="stg:inline-flex stg:self-start stg:rounded-md stg:bg-muted stg:p-0.5"
     >
       {FILTER_OPTIONS.map((option, index) => {
         const isSelected = value === option.value;
@@ -317,11 +317,11 @@ function ConversationFilterToggle({
             onClick={() => handleSelect(option.value)}
             onKeyDown={(e) => handleKeyDown(e, index)}
             className={cn(
-              "inline-flex cursor-pointer items-center rounded-sm px-2 py-1 text-xs font-medium transition-colors",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "stg:inline-flex stg:cursor-pointer stg:items-center stg:rounded-sm stg:px-2 stg:py-1 stg:text-xs stg:font-medium stg:transition-colors",
+              "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
               isSelected
-                ? "bg-background text-foreground shadow-sm"
-                : "text-muted-foreground hover:text-foreground",
+                ? "stg:bg-background stg:text-foreground stg:shadow-sm"
+                : "stg:text-muted-foreground stg:hover:text-foreground",
             )}
           >
             {option.label}
@@ -364,17 +364,17 @@ const ConversationRow = memo(function ConversationRow({
         onClick={() => onSelect(conversation)}
         aria-current={isSelected ? "true" : undefined}
         className={cn(
-          "flex w-full items-center gap-2.5 rounded-md px-2.5 py-2 text-left",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-          isSelected ? "bg-primary-subtle" : "hover:bg-accent",
+          "stg:flex stg:w-full stg:items-center stg:gap-2.5 stg:rounded-md stg:px-2.5 stg:py-2 stg:text-left",
+          "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+          isSelected ? "stg:bg-primary-subtle" : "stg:hover:bg-accent",
         )}
       >
-        <div className="min-w-0 flex-1">
-          <div className="flex items-center gap-1.5">
+        <div className="stg:min-w-0 stg:flex-1">
+          <div className="stg:flex stg:items-center stg:gap-1.5">
             {/* No truncation title on the label (F-18): the full name
                 renders in the open conversation's header, so a native
                 tooltip here added noise without adding reach. */}
-            <p className="truncate text-sm font-medium text-foreground">{label}</p>
+            <p className="stg:truncate stg:text-sm stg:font-medium stg:text-foreground">{label}</p>
             {conversation.needsAttention && (
               // The reason rides the house tooltip (F-18). The trigger
               // renders as a span — it sits INSIDE the row button, so a
@@ -383,12 +383,12 @@ const ConversationRow = memo(function ConversationRow({
               // accessible name. The full reason is also always visible
               // in the open conversation's attention banner.
               <Tooltip>
-                <TooltipTrigger render={<span className="shrink-0" />}>
+                <TooltipTrigger render={<span className="stg:shrink-0" />}>
                   <TriangleAlert
                     aria-hidden="true"
-                    className="size-3.5 text-destructive"
+                    className="stg:size-3.5 stg:text-destructive"
                   />
-                  <span className="sr-only">
+                  <span className="stg:sr-only">
                     {conversation.attentionReason
                       ? `Needs attention: ${conversation.attentionReason}`
                       : "Needs attention"}
@@ -401,21 +401,21 @@ const ConversationRow = memo(function ConversationRow({
             )}
           </div>
           {contact !== null && (
-            <p className="mt-0.5 truncate text-xs text-muted-foreground-faint">
+            <p className="stg:mt-0.5 stg:truncate stg:text-xs stg:text-muted-foreground-faint">
               {contact}
             </p>
           )}
           {humanHeld && (
-            <p className="mt-0.5 flex items-center gap-1 text-xs text-muted-foreground">
-              <User aria-hidden="true" className="size-3" />
+            <p className="stg:mt-0.5 stg:flex stg:items-center stg:gap-1 stg:text-xs stg:text-muted-foreground">
+              <User aria-hidden="true" className="stg:size-3" />
               Human has the conversation
             </p>
           )}
         </div>
         {(lastActivity !== null || awaiting !== null) && (
-          <span className="flex shrink-0 flex-col items-end gap-1">
+          <span className="stg:flex stg:shrink-0 stg:flex-col stg:items-end stg:gap-1">
             {lastActivity && (
-              <span className="text-xs text-muted-foreground-faint">
+              <span className="stg:text-xs stg:text-muted-foreground-faint">
                 {formatRelativeTime(lastActivity, now)}
               </span>
             )}
@@ -426,15 +426,15 @@ const ConversationRow = memo(function ConversationRow({
               // agent will not answer, a person must — muted when the
               // agent does. No tooltip and no tab stop (the F-18
               // discipline); the sr-only text is the accessible meaning.
-              <span className="flex">
+              <span className="stg:flex">
                 <span
                   aria-hidden="true"
                   className={cn(
-                    "size-2 rounded-full",
-                    awaiting === "strong" ? "bg-primary" : "bg-muted-foreground",
+                    "stg:size-2 stg:rounded-full",
+                    awaiting === "strong" ? "stg:bg-primary" : "stg:bg-muted-foreground",
                   )}
                 />
-                <span className="sr-only">
+                <span className="stg:sr-only">
                   {awaiting === "strong"
                     ? "Customer awaiting reply — the conversation is human-held"
                     : "Customer awaiting reply"}
@@ -450,9 +450,9 @@ const ConversationRow = memo(function ConversationRow({
 
 function ListSkeleton() {
   return (
-    <div className="space-y-1 p-1" aria-hidden="true">
+    <div className="stg:space-y-1 stg:p-1" aria-hidden="true">
       {[1, 2, 3, 4].map((i) => (
-        <div key={i} className="h-11 animate-pulse rounded-md bg-muted-faint" />
+        <div key={i} className="stg:h-11 stg:animate-pulse stg:rounded-md stg:bg-muted-faint" />
       ))}
     </div>
   );