@stigmer/react 3.10.0 → 3.11.1-dev.20260812192248

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

package/src/cursor-accounts/MemberCoverageTable.tsx

@@ -9,6 +9,7 @@ import {
 } from "@stigmer/protos/ai/stigmer/platform/cursoraccount/v1/io_pb";
 import type { CursorMemberSpend } from "@stigmer/protos/ai/stigmer/platform/cursoraccount/v1/cursor_account_pb";
 import { Button } from "../button/index.js";
+import { TruncatedText } from "../internal/truncated-text.js";
 import { StateBadge } from "./badges.js";
 import { formatPoolPercent, formatSpendMicros } from "./cursor-account-format.js";
 import type { CursorAccountCoverage } from "./cursor-account-coverage.js";
@@ -28,7 +29,7 @@ import type { useCursorMemberKeyActions } from "./useCursorMemberKeyActions.js";
  * MemberCell) while the key name stays truncate-with-tooltip.
  */
 const ROW_GRID =
-  "grid grid-cols-[minmax(0,2.2fr)_minmax(0,1fr)_4.5rem_4.5rem_4.5rem_4.5rem_minmax(6rem,auto)_minmax(10rem,auto)] items-center gap-2 px-3 py-2";
+  "stg:grid stg:grid-cols-[minmax(0,2.2fr)_minmax(0,1fr)_4.5rem_4.5rem_4.5rem_4.5rem_minmax(6rem,auto)_minmax(10rem,auto)] stg:items-center stg:gap-2 stg:px-3 stg:py-2";
 
 /**
  * The roster-coverage table: every member and every stored execution key
@@ -66,31 +67,31 @@ export function MemberCoverageTable({
     <div
       role="table"
       aria-label="Team coverage"
-      className="rounded-lg border border-border bg-card"
+      className="stg:rounded-lg stg:border stg:border-border stg:bg-card"
     >
       <div
         role="row"
         className={cn(
           ROW_GRID,
-          "border-b border-border text-[11px] font-medium text-muted-foreground",
+          "stg:border-b stg:border-border stg:text-[11px] stg:font-medium stg:text-muted-foreground",
         )}
       >
         <span role="columnheader">Member</span>
         <span role="columnheader">Key</span>
-        <span role="columnheader" className="text-right">
+        <span role="columnheader" className="stg:text-right">
           First-party
         </span>
-        <span role="columnheader" className="text-right">
+        <span role="columnheader" className="stg:text-right">
           API
         </span>
-        <span role="columnheader" className="text-right">
+        <span role="columnheader" className="stg:text-right">
           Included
         </span>
-        <span role="columnheader" className="text-right">
+        <span role="columnheader" className="stg:text-right">
           On-demand
         </span>
         <span role="columnheader">Status</span>
-        <span role="columnheader" className="text-right">
+        <span role="columnheader" className="stg:text-right">
           Actions
         </span>
       </div>
@@ -196,17 +197,17 @@ function CoverageGroup({
   readonly children: React.ReactNode;
 }) {
   return (
-    <div role="rowgroup" className="border-b border-border last:border-b-0">
-      <div role="row" className="bg-muted-subtle px-3 py-1.5">
+    <div role="rowgroup" className="stg:border-b stg:border-border stg:last:border-b-0">
+      <div role="row" className="stg:bg-muted-subtle stg:px-3 stg:py-1.5">
         <div role="cell" aria-colspan={8}>
-          <span className="text-[11px] font-semibold text-foreground">
+          <span className="stg:text-[11px] stg:font-semibold stg:text-foreground">
             {title}
-            <span className="ml-1.5 font-normal text-muted-foreground">
+            <span className="stg:ml-1.5 stg:font-normal stg:text-muted-foreground">
               {count}
             </span>
           </span>
           {description && (
-            <span className="block text-[11px] text-muted-foreground">
+            <span className="stg:block stg:text-[11px] stg:text-muted-foreground">
               {description}
             </span>
           )}
@@ -225,9 +226,9 @@ function CoverageGroup({
  * The member-identity cell shared by key rows and gap rows. The email is
  * the row's identity, so it must be fully readable: it wraps onto more
  * lines when the column is narrow (emails are unbroken strings, so they
- * need explicit word-breaking) with a hover tooltip as backup, unlike
- * the other text cells which truncate. The secondary name line stays
- * truncated — it is display sugar, not identity.
+ * need explicit word-breaking), unlike the other text cells which
+ * truncate. The secondary name line stays truncated — it is display
+ * sugar, not identity.
  */
 function MemberCell({
   email,
@@ -237,12 +238,14 @@ function MemberCell({
   readonly name?: string;
 }) {
   return (
-    <span role="cell" className="min-w-0">
-      <span className="block break-words font-medium text-foreground" title={email}>
+    <span role="cell" className="stg:min-w-0">
+      {/* No tooltip: break-words shows the full email, so a hover hint
+          would only repeat what is already visible. */}
+      <span className="stg:block stg:break-words stg:font-medium stg:text-foreground">
         {email}
       </span>
       {name && (
-        <span className="block truncate text-[11px] text-muted-foreground">
+        <span className="stg:block stg:truncate stg:text-[11px] stg:text-muted-foreground">
           {name}
         </span>
       )}
@@ -270,27 +273,26 @@ function KeyRow({
   if (!key) return null;
 
   return (
-    <div role="row" className={cn(ROW_GRID, "border-t border-border-muted text-xs")}>
+    <div role="row" className={cn(ROW_GRID, "stg:border-t stg:border-border-muted stg:text-xs")}>
       <MemberCell email={key.boundEmail} />
-      <span role="cell" className="min-w-0">
-        <span
-          className="block truncate text-muted-foreground"
-          title={key.cursorKeyName || undefined}
-        >
-          {key.cursorKeyName || "unnamed key"}
-        </span>
+      <span role="cell" className="stg:min-w-0">
+        <TruncatedText
+          text={key.cursorKeyName || "unnamed key"}
+          className="stg:block stg:text-muted-foreground"
+        />
         {key.label && (
-          <span className="block truncate text-[11px] text-muted-foreground" title={key.label}>
-            {key.label}
-          </span>
+          <TruncatedText
+            text={key.label}
+            className="stg:block stg:text-[11px] stg:text-muted-foreground"
+          />
         )}
       </span>
       <SpendCells spend={keyView.spend} />
-      <span role="cell" className="flex flex-wrap items-center gap-1">
+      <span role="cell" className="stg:flex stg:flex-wrap stg:items-center stg:gap-1">
         {keyView.usageGuardTripped && <StateBadge tone="warn" label="Usage guard" />}
         <KeyStatusBadge keyView={keyView} hasRoster={hasRoster} />
       </span>
-      <span role="cell" className="flex items-center justify-end gap-2">
+      <span role="cell" className="stg:flex stg:items-center stg:justify-end stg:gap-2">
         {inviteLink !== "" && <CopyInviteButton inviteLink={inviteLink} />}
         <Button
           size="sm"
@@ -332,16 +334,16 @@ function GapRow({ memberView }: { readonly memberView: CursorTeamMemberView }) {
   if (!member) return null;
 
   return (
-    <div role="row" className={cn(ROW_GRID, "border-t border-border-muted text-xs")}>
+    <div role="row" className={cn(ROW_GRID, "stg:border-t stg:border-border-muted stg:text-xs")}>
       <MemberCell email={member.email} name={member.name} />
-      <span role="cell" className="text-muted-foreground">
+      <span role="cell" className="stg:text-muted-foreground">
         —
       </span>
       <SpendCells spend={memberView.spend} />
       <span role="cell">
         <StateBadge tone="muted" label="No key" />
       </span>
-      <span role="cell" className="text-right text-muted-foreground">
+      <span role="cell" className="stg:text-right stg:text-muted-foreground">
         —
       </span>
     </div>
@@ -360,16 +362,16 @@ function GapRow({ memberView }: { readonly memberView: CursorTeamMemberView }) {
 function SpendCells({ spend }: { readonly spend: CursorMemberSpend | undefined }) {
   return (
     <>
-      <span role="cell" className="text-right tabular-nums text-muted-foreground">
+      <span role="cell" className="stg:text-right stg:tabular-nums stg:text-muted-foreground">
         {spend ? formatPoolPercent(spend.autoPercentUsed) : "—"}
       </span>
-      <span role="cell" className="text-right tabular-nums text-muted-foreground">
+      <span role="cell" className="stg:text-right stg:tabular-nums stg:text-muted-foreground">
         {spend ? formatPoolPercent(spend.apiPercentUsed) : "—"}
       </span>
-      <span role="cell" className="text-right tabular-nums text-muted-foreground">
+      <span role="cell" className="stg:text-right stg:tabular-nums stg:text-muted-foreground">
         {spend ? formatSpendMicros(spend.includedSpendUsdMicros) : "—"}
       </span>
-      <span role="cell" className="text-right tabular-nums text-muted-foreground">
+      <span role="cell" className="stg:text-right stg:tabular-nums stg:text-muted-foreground">
         {spend ? formatSpendMicros(spend.overageSpendUsdMicros) : "—"}
       </span>
     </>

package/src/cursor-accounts/MemberKeysPanel.tsx

@@ -141,11 +141,11 @@ export function MemberKeysPanel({
   };
 
   return (
-    <section className="space-y-2">
-      <h4 className="text-xs font-semibold text-foreground">Team coverage</h4>
+    <section className="stg:space-y-2">
+      <h4 className="stg:text-xs stg:font-semibold stg:text-foreground">Team coverage</h4>
 
       {keyViews.length === 0 && (
-        <p className="text-xs text-muted-foreground" role="status">
+        <p className="stg:text-xs stg:text-muted-foreground" role="status">
           No execution keys — this account is <strong>not routable</strong>.
           Add a member's user-scoped API key below.
         </p>
@@ -162,14 +162,14 @@ export function MemberKeysPanel({
       )}
 
       {actions.error && (
-        <p className="text-destructive text-xs" role="alert">
+        <p className="stg:text-destructive stg:text-xs" role="alert">
           {getUserMessage(actions.error)}
         </p>
       )}
 
-      <form className="flex flex-wrap items-end gap-2" onSubmit={submitNewKey}>
-        <label className="block min-w-56 flex-1 space-y-1">
-          <span className="text-[11px] font-medium text-muted-foreground">
+      <form className="stg:flex stg:flex-wrap stg:items-end stg:gap-2" onSubmit={submitNewKey}>
+        <label className="stg:block stg:min-w-56 stg:flex-1 stg:space-y-1">
+          <span className="stg:text-[11px] stg:font-medium stg:text-muted-foreground">
             User-scoped API key
           </span>
           <input
@@ -182,8 +182,8 @@ export function MemberKeysPanel({
             autoComplete="off"
           />
         </label>
-        <label className="block min-w-40 space-y-1">
-          <span className="text-[11px] font-medium text-muted-foreground">
+        <label className="stg:block stg:min-w-40 stg:space-y-1">
+          <span className="stg:text-[11px] stg:font-medium stg:text-muted-foreground">
             Label (optional)
           </span>
           <input
@@ -212,13 +212,13 @@ export function MemberKeysPanel({
       </form>
 
       {showImport && (
-        <form className="space-y-2 rounded-md border border-border bg-card p-3" onSubmit={submitImport}>
-          <label className="block space-y-1">
-            <span className="text-[11px] font-medium text-muted-foreground">
+        <form className="stg:space-y-2 stg:rounded-md stg:border stg:border-border stg:bg-card stg:p-3" onSubmit={submitImport}>
+          <label className="stg:block stg:space-y-1">
+            <span className="stg:text-[11px] stg:font-medium stg:text-muted-foreground">
               Bulk import — one user-scoped API key per line
             </span>
             <textarea
-              className={cn(INPUT_CLASSES, "min-h-24 font-mono")}
+              className={cn(INPUT_CLASSES, "stg:min-h-24 stg:font-mono")}
               value={importText}
               onChange={(e) => setImportText(e.target.value)}
               placeholder={"key_...\nkey_...\nkey_..."}
@@ -227,13 +227,13 @@ export function MemberKeysPanel({
               spellCheck={false}
             />
           </label>
-          <p className="text-[11px] text-muted-foreground">
+          <p className="stg:text-[11px] stg:text-muted-foreground">
             Each key is verified against Cursor and bound to its owning team
             member, one at a time. Lines that fail stay in the box so you can
             fix and retry them. A roster sync runs automatically afterwards,
             so the coverage table reflects current team membership.
           </p>
-          <div className="flex items-center gap-2">
+          <div className="stg:flex stg:items-center stg:gap-2">
             <Button type="submit" size="sm" disabled={importKeyCount === 0 || isImporting}>
               {isImporting && importProgress
                 ? `Importing ${importProgress.done + 1} of ${importProgress.total}…`
@@ -259,12 +259,12 @@ export function MemberKeysPanel({
             <ul
               role="list"
               aria-label="Import results"
-              className="m-0 list-none space-y-0.5 p-0 text-[11px]"
+              className="stg:m-0 stg:list-none stg:space-y-0.5 stg:p-0 stg:text-[11px]"
             >
               {importResults.map((result) => (
                 <li
                   key={result.keyPreview}
-                  className={result.ok ? "text-muted-foreground" : "text-destructive"}
+                  className={result.ok ? "stg:text-muted-foreground" : "stg:text-destructive"}
                 >
                   {result.keyPreview}: {result.message}
                 </li>

package/src/cursor-accounts/__tests__/CursorAccountsConsole.test.tsx

@@ -237,10 +237,10 @@ describe("CursorAccountsConsole", () => {
     expect(screen.getByText(/On the team — key held/)).toBeTruthy();
     expect(screen.getByText("zane@scenar.ai")).toBeTruthy();
     expect(screen.getByText("stigmer-prod")).toBeTruthy();
-    // The email is the row's identity: full value always hoverable on
-    // both row kinds (the cell wraps rather than truncates).
-    expect(screen.getByTitle("zane@scenar.ai")).toBeTruthy();
-    expect(screen.getByTitle("uncovered@scenar.ai")).toBeTruthy();
+    // The email is the row's identity: the cell wraps rather than
+    // truncates, so the full value is always visible text on both row
+    // kinds — and never a native title (banned, stigmer-cloud#268).
+    expect(document.querySelector("[title]")).toBeNull();
     expect(screen.getByText("$0.17")).toBeTruthy(); // included, 169342 micro-USD
     expect(screen.getByText("Active")).toBeTruthy();
     // Category 2: on the team, no key — server-joined spend on the gap row.

package/src/cursor-accounts/badges.tsx

@@ -14,10 +14,10 @@ export function StateBadge({
   return (
     <span
       className={cn(
-        "inline-block rounded px-1.5 py-0.5 text-[10px] font-medium",
-        tone === "ok" && "bg-accent text-primary",
-        tone === "warn" && "bg-muted-subtle text-destructive",
-        tone === "muted" && "bg-muted-subtle text-muted-foreground",
+        "stg:inline-block stg:rounded stg:px-1.5 stg:py-0.5 stg:text-[10px] stg:font-medium",
+        tone === "ok" && "stg:bg-accent stg:text-primary",
+        tone === "warn" && "stg:bg-muted-subtle stg:text-destructive",
+        tone === "muted" && "stg:bg-muted-subtle stg:text-muted-foreground",
       )}
     >
       {label}