@stigmer/react 3.9.0 → 3.11.0

package/src/channel-app/ChannelAppDetailPanel.tsx

@@ -94,17 +94,17 @@ export function ChannelAppDetailPanel({
   }, [deleteApp, appId, onDeleted]);
 
   return (
-    <div className={cn("space-y-5", className)}>
-      <div className="flex items-center justify-between">
-        <div className="min-w-0">
-          <h3 className="truncate text-sm font-semibold text-foreground">{name}</h3>
-          <p className="font-mono text-[0.65rem] text-muted-foreground">{appId}</p>
+    <div className={cn("stg:space-y-5", className)}>
+      <div className="stg:flex stg:items-center stg:justify-between">
+        <div className="stg:min-w-0">
+          <h3 className="stg:truncate stg:text-sm stg:font-semibold stg:text-foreground">{name}</h3>
+          <p className="stg:font-mono stg:text-[0.65rem] stg:text-muted-foreground">{appId}</p>
         </div>
         {onBack && (
           <button
             type="button"
             onClick={onBack}
-            className="text-muted-foreground hover:text-foreground shrink-0 text-xs transition-colors"
+            className="stg:text-muted-foreground stg:hover:text-foreground stg:shrink-0 stg:text-xs stg:transition-colors"
           >
             ← Back
           </button>
@@ -126,15 +126,15 @@ export function ChannelAppDetailPanel({
       ) : null}
 
       {/* Deletion */}
-      <section className="border-t border-border pt-3" aria-label="Danger zone">
+      <section className="stg:border-t stg:border-border stg:pt-3" aria-label="Danger zone">
         {deleteError && (
-          <p className="text-destructive mb-2 text-[0.65rem]" role="alert">
+          <p className="stg:text-destructive stg:mb-2 stg:text-[0.65rem]" role="alert">
             {getUserMessage(deleteError)}
           </p>
         )}
         {confirmingDelete ? (
-          <div className="flex items-center gap-2">
-            <p className="text-xs text-foreground">
+          <div className="stg:flex stg:items-center stg:gap-2">
+            <p className="stg:text-xs stg:text-foreground">
               Delete this channel app? Channels installing through it must be
               disconnected first.
             </p>
@@ -143,9 +143,9 @@ export function ChannelAppDetailPanel({
               onClick={handleDelete}
               disabled={isDeleting}
               className={cn(
-                "inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium",
-                "bg-destructive text-destructive-foreground hover:opacity-90",
-                "disabled:pointer-events-none disabled:opacity-40",
+                "stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-md stg:px-2.5 stg:py-1 stg:text-xs stg:font-medium",
+                "stg:bg-destructive stg:text-destructive-foreground stg:hover:opacity-90",
+                "stg:disabled:pointer-events-none stg:disabled:opacity-40",
               )}
             >
               {isDeleting && <SpinnerIcon />}
@@ -155,7 +155,7 @@ export function ChannelAppDetailPanel({
               type="button"
               onClick={() => setConfirmingDelete(false)}
               disabled={isDeleting}
-              className="text-muted-foreground hover:text-foreground text-xs transition-colors"
+              className="stg:text-muted-foreground stg:hover:text-foreground stg:text-xs stg:transition-colors"
             >
               Keep
             </button>
@@ -164,7 +164,7 @@ export function ChannelAppDetailPanel({
           <button
             type="button"
             onClick={() => setConfirmingDelete(true)}
-            className="text-destructive text-xs font-medium hover:opacity-80"
+            className="stg:text-destructive stg:text-xs stg:font-medium stg:hover:opacity-80"
           >
             Delete channel app
           </button>
@@ -250,10 +250,10 @@ function SlackAppDetail({
   return (
     <>
       {/* Finish setup: the per-app webhook URL only exists after creation */}
-      <section className="space-y-2" aria-label="Finish setup in Slack">
-        <p className="text-xs font-medium text-foreground">Finish setup in Slack</p>
-        <p className="text-[0.65rem] text-muted-foreground">
-          On the app&apos;s <span className="font-medium">Event
+      <section className="stg:space-y-2" aria-label="Finish setup in Slack">
+        <p className="stg:text-xs stg:font-medium stg:text-foreground">Finish setup in Slack</p>
+        <p className="stg:text-[0.65rem] stg:text-muted-foreground">
+          On the app&apos;s <span className="stg:font-medium">Event
           Subscriptions</span> page, enable events and set the request URL
           below (Slack verifies it immediately). The completed manifest is
           also available for review or re-paste.
@@ -268,10 +268,10 @@ function SlackAppDetail({
       </section>
 
       {/* Credential rotation */}
-      <form onSubmit={handleSave} className="space-y-3" aria-label="Credentials">
-        <p className="text-xs font-medium text-foreground">Credentials</p>
-        <p className="-mt-2 text-[0.65rem] text-muted-foreground">
-          Secrets show as <code className="font-mono">***REDACTED***</code>;
+      <form onSubmit={handleSave} className="stg:space-y-3" aria-label="Credentials">
+        <p className="stg:text-xs stg:font-medium stg:text-foreground">Credentials</p>
+        <p className="stg:-mt-2 stg:text-[0.65rem] stg:text-muted-foreground">
+          Secrets show as <code className="stg:font-mono">***REDACTED***</code>;
           leave a field untouched to keep its stored value, or paste a new
           one to rotate it.
         </p>
@@ -307,7 +307,7 @@ function SlackAppDetail({
         />
 
         {updateError && (
-          <p className="text-destructive text-[0.65rem]" role="alert">
+          <p className="stg:text-destructive stg:text-[0.65rem]" role="alert">
             {getUserMessage(updateError)}
           </p>
         )}
@@ -316,9 +316,9 @@ function SlackAppDetail({
           type="submit"
           disabled={!canSave}
           className={cn(
-            "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium",
-            "bg-primary text-primary-foreground hover:bg-primary-hover",
-            "disabled:pointer-events-none disabled:opacity-40",
+            "stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs stg:font-medium",
+            "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary-hover",
+            "stg:disabled:pointer-events-none stg:disabled:opacity-40",
           )}
         >
           {isUpdating && <SpinnerIcon />}
@@ -401,14 +401,14 @@ function WhatsAppAppDetail({
     <>
       {/* Finish setup: the per-app webhook URL only exists after creation,
           and the verify token is only visible in the create handoff. */}
-      <section className="space-y-2" aria-label="Finish setup in Meta">
-        <p className="text-xs font-medium text-foreground">Finish setup in Meta</p>
-        <p className="text-[0.65rem] text-muted-foreground">
-          On the app&apos;s <span className="font-medium">WhatsApp →
+      <section className="stg:space-y-2" aria-label="Finish setup in Meta">
+        <p className="stg:text-xs stg:font-medium stg:text-foreground">Finish setup in Meta</p>
+        <p className="stg:text-[0.65rem] stg:text-muted-foreground">
+          On the app&apos;s <span className="stg:font-medium">WhatsApp →
           Configuration</span> page, set the callback URL and verify token
-          below, click <span className="font-medium">Verify and save</span>{" "}
+          below, click <span className="stg:font-medium">Verify and save</span>{" "}
           (Meta verifies immediately), then subscribe to the{" "}
-          <span className="font-medium">
+          <span className="stg:font-medium">
             {WHATSAPP_CHANNEL_APP_WEBHOOK_FIELDS.join(", ")}
           </span>{" "}
           webhook field.
@@ -425,9 +425,9 @@ function WhatsAppAppDetail({
             copyTargetId="stgm-chapp-verify-token-copy"
           />
         ) : (
-          <div className="space-y-1">
-            <p className="text-xs font-medium text-foreground">Verify token</p>
-            <p className="text-[0.65rem] text-muted-foreground">
+          <div className="stg:space-y-1">
+            <p className="stg:text-xs stg:font-medium stg:text-foreground">Verify token</p>
+            <p className="stg:text-[0.65rem] stg:text-muted-foreground">
               Shown once at registration. If you no longer have it, paste a
               new one below and update Meta&apos;s webhook configuration to
               match.
@@ -437,10 +437,10 @@ function WhatsAppAppDetail({
       </section>
 
       {/* Credential rotation */}
-      <form onSubmit={handleSave} className="space-y-3" aria-label="Credentials">
-        <p className="text-xs font-medium text-foreground">Credentials</p>
-        <p className="-mt-2 text-[0.65rem] text-muted-foreground">
-          Secrets show as <code className="font-mono">***REDACTED***</code>;
+      <form onSubmit={handleSave} className="stg:space-y-3" aria-label="Credentials">
+        <p className="stg:text-xs stg:font-medium stg:text-foreground">Credentials</p>
+        <p className="stg:-mt-2 stg:text-[0.65rem] stg:text-muted-foreground">
+          Secrets show as <code className="stg:font-mono">***REDACTED***</code>;
           leave a field untouched to keep its stored value, or paste a new
           one to rotate it.
         </p>
@@ -487,7 +487,7 @@ function WhatsAppAppDetail({
         />
 
         {updateError && (
-          <p className="text-destructive text-[0.65rem]" role="alert">
+          <p className="stg:text-destructive stg:text-[0.65rem]" role="alert">
             {getUserMessage(updateError)}
           </p>
         )}
@@ -496,9 +496,9 @@ function WhatsAppAppDetail({
           type="submit"
           disabled={!canSave}
           className={cn(
-            "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium",
-            "bg-primary text-primary-foreground hover:bg-primary-hover",
-            "disabled:pointer-events-none disabled:opacity-40",
+            "stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs stg:font-medium",
+            "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary-hover",
+            "stg:disabled:pointer-events-none stg:disabled:opacity-40",
           )}
         >
           {isUpdating && <SpinnerIcon />}

package/src/channel-app/ChannelAppListPanel.tsx

@@ -60,12 +60,12 @@ export function ChannelAppListPanel({
   if (isLoading) {
     return (
       <div
-        className={cn("space-y-2", className)}
+        className={cn("stg:space-y-2", className)}
         aria-busy="true"
         aria-label="Loading channel apps"
       >
         {Array.from({ length: 2 }, (_, i) => (
-          <div key={i} className="bg-muted-subtle h-14 animate-pulse rounded-lg" />
+          <div key={i} className="stg:bg-muted-subtle stg:h-14 stg:animate-pulse stg:rounded-lg" />
         ))}
       </div>
     );
@@ -73,7 +73,7 @@ export function ChannelAppListPanel({
 
   if (error) {
     return (
-      <p className={cn("text-destructive text-xs", className)} role="alert">
+      <p className={cn("stg:text-destructive stg:text-xs", className)} role="alert">
         {getUserMessage(error)}
       </p>
     );
@@ -83,7 +83,7 @@ export function ChannelAppListPanel({
     return (
       <p
         className={cn(
-          "text-muted-foreground py-4 text-center text-xs",
+          "stg:text-muted-foreground stg:py-4 stg:text-center stg:text-xs",
           className,
         )}
       >
@@ -94,7 +94,7 @@ export function ChannelAppListPanel({
 
   return (
     <div
-      className={cn("space-y-2", className)}
+      className={cn("stg:space-y-2", className)}
       role="list"
       aria-label="Channel apps"
     >
@@ -137,28 +137,28 @@ function ChannelAppRow({
     <div
       role="listitem"
       className={cn(
-        "border-border bg-card flex items-center gap-3 rounded-lg border px-3 py-2.5",
+        "stg:border-border stg:bg-card stg:flex stg:items-center stg:gap-3 stg:rounded-lg stg:border stg:px-3 stg:py-2.5",
       )}
     >
-      <div className="min-w-0 flex-1">
-        <div className="flex items-baseline gap-2">
-          <span className="truncate text-xs font-medium text-foreground">
+      <div className="stg:min-w-0 stg:flex-1">
+        <div className="stg:flex stg:items-baseline stg:gap-2">
+          <span className="stg:truncate stg:text-xs stg:font-medium stg:text-foreground">
             {name}
           </span>
           {/* Fall back to the raw oneof case for providers this UI
               doesn't know yet — honest, and never an empty label. */}
-          <span className="text-[0.65rem] text-muted-foreground">
+          <span className="stg:text-[0.65rem] stg:text-muted-foreground">
             {provider?.label ?? providerCase ?? ""}
           </span>
         </div>
-        <div className="flex items-baseline gap-2">
+        <div className="stg:flex stg:items-baseline stg:gap-2">
           {providerAppId && (
-            <span className="truncate font-mono text-[0.65rem] text-muted-foreground">
+            <span className="stg:truncate stg:font-mono stg:text-[0.65rem] stg:text-muted-foreground">
               {providerAppId}
             </span>
           )}
           {createdAt && (
-            <span className="shrink-0 text-[0.65rem] text-muted-foreground">
+            <span className="stg:shrink-0 stg:text-[0.65rem] stg:text-muted-foreground">
               {timestampDate(createdAt).toLocaleDateString()}
             </span>
           )}
@@ -171,8 +171,8 @@ function ChannelAppRow({
           onClick={onEdit}
           aria-label={`Edit ${name}`}
           className={cn(
-            "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
-            "shrink-0 rounded-md p-1.5 transition-colors",
+            "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover",
+            "stg:shrink-0 stg:rounded-md stg:p-1.5 stg:transition-colors",
           )}
         >
           <PencilIcon />

package/src/channel-app/CreateChannelAppForm.tsx

@@ -176,8 +176,8 @@ export function CreateChannelAppForm({
   );
 
   return (
-    <form onSubmit={handleSubmit} className={cn("space-y-4", className)}>
-      <div className="space-y-3">
+    <form onSubmit={handleSubmit} className={cn("stg:space-y-4", className)}>
+      <div className="stg:space-y-3">
         <ProviderPicker
           value={provider}
           onChange={setProvider}
@@ -226,19 +226,19 @@ export function CreateChannelAppForm({
       </div>
 
       {error && (
-        <p className="text-destructive text-[0.65rem]" role="alert">
+        <p className="stg:text-destructive stg:text-[0.65rem]" role="alert">
           {getUserMessage(error)}
         </p>
       )}
 
-      <div className="flex items-center gap-2">
+      <div className="stg:flex stg:items-center stg:gap-2">
         <button
           type="submit"
           disabled={!canSubmit}
           className={cn(
-            "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium",
-            "bg-primary text-primary-foreground hover:bg-primary-hover",
-            "disabled:pointer-events-none disabled:opacity-40",
+            "stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs stg:font-medium",
+            "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary-hover",
+            "stg:disabled:pointer-events-none stg:disabled:opacity-40",
           )}
         >
           {isCreating && <SpinnerIcon />}
@@ -251,9 +251,9 @@ export function CreateChannelAppForm({
             onClick={onCancel}
             disabled={isCreating}
             className={cn(
-              "rounded-md px-3 py-1.5 text-xs",
-              "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
-              "disabled:pointer-events-none disabled:opacity-50",
+              "stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs",
+              "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover",
+              "stg:disabled:pointer-events-none stg:disabled:opacity-50",
             )}
           >
             Cancel
@@ -284,10 +284,10 @@ function ProviderPicker({
 }) {
   return (
     <fieldset>
-      <legend className="mb-1.5 block text-xs font-medium text-foreground">
+      <legend className="stg:mb-1.5 stg:block stg:text-xs stg:font-medium stg:text-foreground">
         Provider
       </legend>
-      <div role="radiogroup" className="flex gap-1.5">
+      <div role="radiogroup" className="stg:flex stg:gap-1.5">
         {CHANNEL_PROVIDERS.map((p) => {
           const checked = value === p.id;
           return (
@@ -295,9 +295,9 @@ function ProviderPicker({
               key={p.id}
               htmlFor={`stgm-chapp-provider-${p.id}`}
               className={cn(
-                "flex flex-1 cursor-pointer items-center gap-2 rounded-md border px-2.5 py-1.5",
-                checked ? "border-ring bg-accent" : "border-border hover:bg-accent-hover",
-                disabled && "pointer-events-none opacity-50",
+                "stg:flex stg:flex-1 stg:cursor-pointer stg:items-center stg:gap-2 stg:rounded-md stg:border stg:px-2.5 stg:py-1.5",
+                checked ? "stg:border-ring stg:bg-accent" : "stg:border-border stg:hover:bg-accent-hover",
+                disabled && "stg:pointer-events-none stg:opacity-50",
               )}
             >
               <input
@@ -307,10 +307,10 @@ function ProviderPicker({
                 checked={checked}
                 onChange={() => onChange(p.id)}
                 disabled={disabled}
-                className="accent-current"
+                className="stg:accent-current"
               />
-              <p.Icon className="size-3.5 shrink-0 text-foreground" />
-              <span className="text-xs font-medium text-foreground">{p.label}</span>
+              <p.Icon className="stg:size-3.5 stg:shrink-0 stg:text-foreground" />
+              <span className="stg:text-xs stg:font-medium stg:text-foreground">{p.label}</span>
             </label>
           );
         })}
@@ -344,21 +344,21 @@ function SlackCreateSection({
 }) {
   return (
     <>
-      <div className="space-y-1.5">
-        <p className="text-xs font-medium text-foreground">
+      <div className="stg:space-y-1.5">
+        <p className="stg:text-xs stg:font-medium stg:text-foreground">
           1. Create the Slack app
         </p>
-        <p className="text-[0.65rem] text-muted-foreground">
+        <p className="stg:text-[0.65rem] stg:text-muted-foreground">
           On{" "}
           <a
             href="https://api.slack.com/apps?new_app=1"
             target="_blank"
             rel="noreferrer"
-            className="text-primary hover:text-foreground underline transition-colors"
+            className="stg:text-primary stg:hover:text-foreground stg:underline stg:transition-colors"
           >
             api.slack.com/apps
           </a>
-          , choose <span className="font-medium">From a manifest</span> and
+          , choose <span className="stg:font-medium">From a manifest</span> and
           paste this. Event subscriptions come after the next step — the
           webhook URL is minted when this form is saved.
         </p>
@@ -369,12 +369,12 @@ function SlackCreateSection({
         />
       </div>
 
-      <div className="space-y-3">
-        <p className="text-xs font-medium text-foreground">
+      <div className="stg:space-y-3">
+        <p className="stg:text-xs stg:font-medium stg:text-foreground">
           2. Paste the app&apos;s credentials
         </p>
-        <p className="-mt-2 text-[0.65rem] text-muted-foreground">
-          From the app&apos;s <span className="font-medium">Basic
+        <p className="stg:-mt-2 stg:text-[0.65rem] stg:text-muted-foreground">
+          From the app&apos;s <span className="stg:font-medium">Basic
           Information</span> page. They are encrypted at rest and never
           shown again.
         </p>
@@ -443,33 +443,33 @@ function WhatsAppCreateSection({
 }) {
   return (
     <>
-      <div className="space-y-1.5">
-        <p className="text-xs font-medium text-foreground">
+      <div className="stg:space-y-1.5">
+        <p className="stg:text-xs stg:font-medium stg:text-foreground">
           1. Create the Meta app
         </p>
-        <p className="text-[0.65rem] text-muted-foreground">
+        <p className="stg:text-[0.65rem] stg:text-muted-foreground">
           On{" "}
           <a
             href="https://developers.facebook.com/apps"
             target="_blank"
             rel="noreferrer"
-            className="text-primary hover:text-foreground underline transition-colors"
+            className="stg:text-primary stg:hover:text-foreground stg:underline stg:transition-colors"
           >
             developers.facebook.com
           </a>
-          , create a <span className="font-medium">Business</span>-type app
-          and add the <span className="font-medium">WhatsApp</span> product.
+          , create a <span className="stg:font-medium">Business</span>-type app
+          and add the <span className="stg:font-medium">WhatsApp</span> product.
           The webhook setup comes after the next step — the webhook URL is
           minted when this form is saved.
         </p>
       </div>
 
-      <div className="space-y-3">
-        <p className="text-xs font-medium text-foreground">
+      <div className="stg:space-y-3">
+        <p className="stg:text-xs stg:font-medium stg:text-foreground">
           2. Paste the app&apos;s credentials
         </p>
-        <p className="-mt-2 text-[0.65rem] text-muted-foreground">
-          The app ID and secret are on <span className="font-medium">App
+        <p className="stg:-mt-2 stg:text-[0.65rem] stg:text-muted-foreground">
+          The app ID and secret are on <span className="stg:font-medium">App
           settings → Basic</span>; mint a long-lived system-user access
           token with WhatsApp permissions in Meta Business settings. The
           secrets are encrypted at rest and never shown again.

package/src/channel-app/internal.tsx

@@ -31,8 +31,8 @@ export function FormField({
   required?: boolean;
 }) {
   return (
-    <div className="space-y-1">
-      <label htmlFor={id} className="text-xs font-medium text-foreground">
+    <div className="stg:space-y-1">
+      <label htmlFor={id} className="stg:text-xs stg:font-medium stg:text-foreground">
         {label}
       </label>
       <input
@@ -44,13 +44,13 @@ export function FormField({
         disabled={disabled}
         required={required}
         className={cn(
-          "w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-xs text-foreground",
-          "placeholder:text-muted-foreground",
-          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-          "disabled:pointer-events-none disabled:opacity-50",
+          "stg:w-full stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-2.5 stg:py-1.5 stg:text-xs stg:text-foreground",
+          "stg:placeholder:text-muted-foreground",
+          "stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring",
+          "stg:disabled:pointer-events-none stg:disabled:opacity-50",
         )}
       />
-      {hint && <p className="text-[0.65rem] text-muted-foreground">{hint}</p>}
+      {hint && <p className="stg:text-[0.65rem] stg:text-muted-foreground">{hint}</p>}
     </div>
   );
 }
@@ -71,13 +71,13 @@ export function CopyRow({
   const { copied, copy } = useCopy(value);
 
   return (
-    <div className="space-y-1">
-      <p className="text-xs font-medium text-foreground">{label}</p>
-      <div className="flex items-center gap-1.5">
+    <div className="stg:space-y-1">
+      <p className="stg:text-xs stg:font-medium stg:text-foreground">{label}</p>
+      <div className="stg:flex stg:items-center stg:gap-1.5">
         <code
           className={cn(
-            "min-w-0 flex-1 truncate rounded-md border border-border bg-muted-subtle",
-            "px-2 py-1.5 font-mono text-[0.65rem] text-foreground",
+            "stg:min-w-0 stg:flex-1 stg:truncate stg:rounded-md stg:border stg:border-border stg:bg-muted-subtle",
+            "stg:px-2 stg:py-1.5 stg:font-mono stg:text-[0.65rem] stg:text-foreground",
           )}
           title={value}
         >
@@ -102,17 +102,17 @@ export function CopyBlock({
   const { copied, copy } = useCopy(value);
 
   return (
-    <div className="space-y-1">
-      <div className="flex items-center justify-between">
-        <p className="text-[0.65rem] font-medium text-muted-foreground">
+    <div className="stg:space-y-1">
+      <div className="stg:flex stg:items-center stg:justify-between">
+        <p className="stg:text-[0.65rem] stg:font-medium stg:text-muted-foreground">
           {label}
         </p>
         <CopyButton copied={copied} onCopy={copy} copyTargetId={copyTargetId} />
       </div>
       <pre
         className={cn(
-          "max-h-40 overflow-auto rounded-md border border-border bg-muted-subtle",
-          "px-2.5 py-2 font-mono text-[0.65rem] leading-relaxed text-foreground",
+          "stg:max-h-40 stg:overflow-auto stg:rounded-md stg:border stg:border-border stg:bg-muted-subtle",
+          "stg:px-2.5 stg:py-2 stg:font-mono stg:text-[0.65rem] stg:leading-relaxed stg:text-foreground",
         )}
       >
         {value}
@@ -136,10 +136,10 @@ function CopyButton({
       onClick={onCopy}
       data-cursor-target={copyTargetId}
       className={cn(
-        "shrink-0 rounded-md border border-border px-2 py-1 text-[0.65rem] font-medium transition-colors",
+        "stg:shrink-0 stg:rounded-md stg:border stg:border-border stg:px-2 stg:py-1 stg:text-[0.65rem] stg:font-medium stg:transition-colors",
         copied
-          ? "text-success"
-          : "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
+          ? "stg:text-success"
+          : "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover",
       )}
       aria-live="polite"
     >
@@ -171,7 +171,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" />

package/src/composer/ComposerToolbar.tsx

@@ -126,10 +126,10 @@ export function ComposerToolbar({
   const showHarnessSeparate = showHarnessSelector && !showModelSelector;
 
   return (
-    <div className="flex items-center justify-between gap-2 border-t border-border-muted px-3 py-2">
+    <div className="stg:flex stg:items-center stg:justify-between stg:gap-2 stg:border-t stg:border-border-muted stg:px-3 stg:py-2">
       {/* ---- Left group: Primary state (Mode + Model) ---- */}
 
-      <div className="flex min-w-0 items-center gap-1.5">
+      <div className="stg:flex stg:min-w-0 stg:items-center stg:gap-1.5">
         {showInteractionModePicker && (
           <InteractionModePicker
             value={interactionMode ?? "agent"}
@@ -162,7 +162,7 @@ export function ComposerToolbar({
 
       {/* ---- Right group: Secondary actions (icon-only) + Send ---- */}
 
-      <div className="flex shrink-0 items-center gap-1">
+      <div className="stg:flex stg:shrink-0 stg:items-center stg:gap-1">
         {showWorkspace && (
           onWorkspaceDirectAction
             ? <button
@@ -171,16 +171,16 @@ export function ComposerToolbar({
                 onClick={onWorkspaceDirectAction}
                 title="Workspace"
                 className={cn(
-                  "inline-flex h-8 w-8 items-center justify-center rounded-md text-xs transition-colors",
-                  "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
-                  "disabled:pointer-events-none disabled:opacity-50",
+                  "stg:inline-flex stg:h-8 stg:w-8 stg:items-center stg:justify-center stg:rounded-md stg:text-xs stg:transition-colors",
+                  "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover",
+                  "stg:disabled:pointer-events-none stg:disabled:opacity-50",
                 )}
                 aria-label="Workspace"
               >
-                <span className="relative">
+                <span className="stg:relative">
                   <WorkspaceIcon />
                   {workspaceCount > 0 && (
-                    <span className="absolute -right-1.5 -top-1.5 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-primary px-0.5 text-[0.5rem] font-medium leading-none text-primary-foreground">
+                    <span className="stg:absolute stg:-right-1.5 stg:-top-1.5 stg:flex stg:h-3.5 stg:min-w-3.5 stg:items-center stg:justify-center stg:rounded-full stg:bg-primary stg:px-0.5 stg:text-[0.5rem] stg:font-medium stg:leading-none stg:text-primary-foreground">
                       {workspaceCount}
                     </span>
                   )}
@@ -203,16 +203,16 @@ export function ComposerToolbar({
             onClick={onAttachClick}
             title="Attach files"
             className={cn(
-              "inline-flex h-8 w-8 items-center justify-center rounded-md text-xs transition-colors",
-              "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
-              "disabled:pointer-events-none disabled:opacity-50",
+              "stg:inline-flex stg:h-8 stg:w-8 stg:items-center stg:justify-center stg:rounded-md stg:text-xs stg:transition-colors",
+              "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover",
+              "stg:disabled:pointer-events-none stg:disabled:opacity-50",
             )}
             aria-label="Attach files"
           >
-            <span className="relative">
+            <span className="stg:relative">
               <PaperclipIcon />
               {attachmentCount > 0 && (
-                <span className="absolute -right-1.5 -top-1.5 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-primary px-0.5 text-[0.5rem] font-medium leading-none text-primary-foreground">
+                <span className="stg:absolute stg:-right-1.5 stg:-top-1.5 stg:flex stg:h-3.5 stg:min-w-3.5 stg:items-center stg:justify-center stg:rounded-full stg:bg-primary stg:px-0.5 stg:text-[0.5rem] stg:font-medium stg:leading-none stg:text-primary-foreground">
                   {attachmentCount}
                 </span>
               )}
@@ -237,7 +237,7 @@ export function ComposerToolbar({
           <button
             type="button"
             onClick={onStop}
-            className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground transition-colors hover:bg-primary-hover"
+            className="stg:flex stg:h-8 stg:w-8 stg:shrink-0 stg:items-center stg:justify-center stg:rounded-full stg:bg-primary stg:text-primary-foreground stg:transition-colors stg:hover:bg-primary-hover"
             aria-label="Stop generating"
             title="Stop"
           >
@@ -248,7 +248,7 @@ export function ComposerToolbar({
             type="button"
             disabled={!canSend}
             onClick={onSend}
-            className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground transition-colors hover:bg-primary-hover disabled:pointer-events-none disabled:opacity-40"
+            className="stg:flex stg:h-8 stg:w-8 stg:shrink-0 stg:items-center stg:justify-center stg:rounded-lg stg:bg-primary stg:text-primary-foreground stg:transition-colors stg:hover:bg-primary-hover stg:disabled:pointer-events-none stg:disabled:opacity-40"
             aria-label="Send message"
           >
             {isSubmitting ? <SpinnerIcon /> : <ArrowUpIcon />}