@stigmer/react 3.13.0 → 3.14.0-dev.20260910084630

package/src/cursor-accounts/MemberCoverageTable.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { MoreHorizontal, Pause, Play, Trash2 } from "lucide-react";
 import { useCopyFeedback } from "../internal/useCopyFeedback.js";
 import { cn } from "@stigmer/theme";
 import {
@@ -8,6 +9,7 @@ import {
   type CursorTeamMemberView,
 } 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 { ActionMenu } from "../action-menu/index.js";
 import { Button } from "../button/index.js";
 import { TruncatedText } from "../internal/truncated-text.js";
 import { StateBadge } from "./badges.js";
@@ -17,19 +19,25 @@ import type { useCursorMemberKeyActions } from "./useCursorMemberKeyActions.js";
 
 /**
  * One grid template shared by the header and every row so the columns
- * can never drift apart: Member · Key · First-party % · API % ·
- * Included $ · On-demand $ · Status · Actions.
+ * can never drift apart: Member · First-party % · API % · Included $ ·
+ * On-demand $ · Status · actions kebab.
  *
  * The four numeric columns mirror Cursor's own Members page (First-Party
  * Models %, API %, On-Demand $) plus the included-quota dollars, so an
  * operator can read this table and the Cursor dashboard side by side.
  *
- * Member gets the largest flexible share: the email is the row's
- * identity, so it wraps rather than truncates when space runs out (see
- * MemberCell) while the key name stays truncate-with-tooltip.
+ * The column budget is sized for the table's real canvas: both client
+ * apps render settings inside `max-w-3xl` (768px), leaving ~720px of
+ * content. Fixed tracks total ~25rem, so the flexible member column
+ * keeps ~240px — enough to render typical emails whole (stigmer#929: an
+ * earlier 8-column layout with a three-button actions column consumed
+ * the full width and collapsed the member column to zero, shattering
+ * emails one character per line). Key name/label live inside the member
+ * cell and row actions inside a kebab menu precisely to defend that
+ * budget.
  */
 const ROW_GRID =
-  "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";
+  "stg:grid stg:grid-cols-[minmax(0,1fr)_4rem_4rem_4.5rem_4.5rem_6rem_2.25rem] stg:items-center stg:gap-2 stg:px-3 stg:py-2";
 
 /**
  * The roster-coverage table: every member and every stored execution key
@@ -41,9 +49,17 @@ const ROW_GRID =
  *    help the operator prioritize whose key to import.
  * 3. **Key held, not on the team** — imported keys whose owner left the
  *    team or never joined it. Resolved by a Cursor-dashboard invite:
- *    when the account carries a team invite link, each row offers
- *    one-click copy (never navigation — opening an invite link would
- *    join the OPERATOR's own Cursor account to the team).
+ *    when the account carries a team invite link, the group header
+ *    offers one-click copy (one button, not one per row — the link is
+ *    account-level and identical for every owner; and always a copy,
+ *    never navigation, since opening an invite link would join the
+ *    OPERATOR's own Cursor account to the team).
+ *
+ * The categories render as grouped sections of ONE table — deliberately
+ * not tabs. Together they answer a single question ("is this roster
+ * healthy?"), so all three counts must be visible at once; groups are
+ * team-sized (5–30 rows), never large enough to need pagination-style
+ * chrome.
  *
  * Before the first sync there is no roster to classify against, so keys
  * render unclassified with a "sync now" notice instead of being falsely
@@ -64,119 +80,119 @@ export function MemberCoverageTable({
   readonly onChanged: () => void;
 }) {
   return (
-    <div
-      role="table"
-      aria-label="Team coverage"
-      className="stg:rounded-lg stg:border stg:border-border stg:bg-card"
-    >
-      <div
-        role="row"
-        className={cn(
-          ROW_GRID,
-          "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="stg:text-right">
-          First-party
-        </span>
-        <span role="columnheader" className="stg:text-right">
-          API
-        </span>
-        <span role="columnheader" className="stg:text-right">
-          Included
-        </span>
-        <span role="columnheader" className="stg:text-right">
-          On-demand
-        </span>
-        <span role="columnheader">Status</span>
-        <span role="columnheader" className="stg:text-right">
-          Actions
-        </span>
-      </div>
-
-      {!coverage.hasRoster && (
-        <CoverageGroup
-          title="Execution keys — not yet classified"
-          description='No roster sync has run for this account. Run "Sync now" to load the team roster and classify these keys.'
-          count={coverage.unclassified.length}
+    // Narrow-host guard (the ResourceTable idiom): below the grid's
+    // legible minimum the table scrolls horizontally instead of letting
+    // the flexible member column collapse. The scroll container carries
+    // the card chrome; the ARIA table starts inside it so `role="row"`
+    // children stay directly owned by the table.
+    <div className="stg:overflow-x-auto stg:rounded-lg stg:border stg:border-border stg:bg-card">
+      <div role="table" aria-label="Team coverage" className="stg:min-w-[40rem]">
+        <div
+          role="row"
+          className={cn(
+            ROW_GRID,
+            "stg:border-b stg:border-border stg:text-[11px] stg:font-medium stg:text-muted-foreground",
+          )}
         >
-          {coverage.unclassified.map((keyView) => (
-            <KeyRow
-              key={keyView.key?.keyId}
-              accountId={accountId}
-              keyView={keyView}
-              hasRoster={false}
-              inviteLink=""
-              actions={actions}
-              onChanged={onChanged}
-            />
-          ))}
-        </CoverageGroup>
-      )}
+          <span role="columnheader">Member</span>
+          <span role="columnheader" className="stg:text-right">
+            First-party
+          </span>
+          <span role="columnheader" className="stg:text-right">
+            API
+          </span>
+          <span role="columnheader" className="stg:text-right">
+            Included
+          </span>
+          <span role="columnheader" className="stg:text-right">
+            On-demand
+          </span>
+          <span role="columnheader">Status</span>
+          <span role="columnheader">
+            <span className="stg:sr-only">Actions</span>
+          </span>
+        </div>
 
-      {coverage.onTeamWithKey.length > 0 && (
-        <CoverageGroup
-          title="On the team — key held"
-          count={coverage.onTeamWithKey.length}
-        >
-          {coverage.onTeamWithKey.map((keyView) => (
-            <KeyRow
-              key={keyView.key?.keyId}
-              accountId={accountId}
-              keyView={keyView}
-              hasRoster
-              inviteLink=""
-              actions={actions}
-              onChanged={onChanged}
-            />
-          ))}
-        </CoverageGroup>
-      )}
+        {!coverage.hasRoster && (
+          <CoverageGroup
+            title="Execution keys — not yet classified"
+            description='No roster sync has run for this account. Run "Sync now" to load the team roster and classify these keys.'
+            count={coverage.unclassified.length}
+          >
+            {coverage.unclassified.map((keyView) => (
+              <KeyRow
+                key={keyView.key?.keyId}
+                accountId={accountId}
+                keyView={keyView}
+                hasRoster={false}
+                actions={actions}
+                onChanged={onChanged}
+              />
+            ))}
+          </CoverageGroup>
+        )}
 
-      {/* Rendered whenever a roster exists — an empty gap is an answer
-          ("fully covered"), not an absence. Hiding the group made a
-          healthy roster indistinguishable from a broken sync. */}
-      {coverage.hasRoster && (
-        <CoverageGroup
-          title="On the team — no execution key"
-          description={
-            coverage.onTeamWithoutKey.length > 0
-              ? "Sessions can never run under these members' identity or included quota. Add their user-scoped keys below to close the gap."
-              : "Every active roster member holds an execution key — the roster is fully covered."
-          }
-          count={coverage.onTeamWithoutKey.length}
-        >
-          {coverage.onTeamWithoutKey.map((memberView) => (
-            <GapRow key={memberView.member?.email} memberView={memberView} />
-          ))}
-        </CoverageGroup>
-      )}
+        {coverage.onTeamWithKey.length > 0 && (
+          <CoverageGroup
+            title="On the team — key held"
+            count={coverage.onTeamWithKey.length}
+          >
+            {coverage.onTeamWithKey.map((keyView) => (
+              <KeyRow
+                key={keyView.key?.keyId}
+                accountId={accountId}
+                keyView={keyView}
+                hasRoster
+                actions={actions}
+                onChanged={onChanged}
+              />
+            ))}
+          </CoverageGroup>
+        )}
 
-      {coverage.offTeamWithKey.length > 0 && (
-        <CoverageGroup
-          title="Key held — not on the team"
-          description={
-            inviteLink !== ""
-              ? "These key owners must join the Cursor team before their usage counts against its quota. Copy the invite link, send it to them out-of-band, then \u201CSync now\u201D reclassifies once they join."
-              : "These key owners must join the Cursor team before their usage counts against its quota. Invites are sent from the Cursor dashboard (cursor.com \u2192 Invite Members); paste the team's invite link into the account editor to enable one-click copying here."
-          }
-          count={coverage.offTeamWithKey.length}
-        >
-          {coverage.offTeamWithKey.map((keyView) => (
-            <KeyRow
-              key={keyView.key?.keyId}
-              accountId={accountId}
-              keyView={keyView}
-              hasRoster
-              inviteLink={inviteLink}
-              actions={actions}
-              onChanged={onChanged}
-            />
-          ))}
-        </CoverageGroup>
-      )}
+        {/* Rendered whenever a roster exists — an empty gap is an answer
+            ("fully covered"), not an absence. Hiding the group made a
+            healthy roster indistinguishable from a broken sync. */}
+        {coverage.hasRoster && (
+          <CoverageGroup
+            title="On the team — no execution key"
+            description={
+              coverage.onTeamWithoutKey.length > 0
+                ? "Sessions can never run under these members' identity or included quota. Add their user-scoped keys below to close the gap."
+                : "Every active roster member holds an execution key — the roster is fully covered."
+            }
+            count={coverage.onTeamWithoutKey.length}
+          >
+            {coverage.onTeamWithoutKey.map((memberView) => (
+              <GapRow key={memberView.member?.email} memberView={memberView} />
+            ))}
+          </CoverageGroup>
+        )}
+
+        {coverage.offTeamWithKey.length > 0 && (
+          <CoverageGroup
+            title="Key held — not on the team"
+            description={
+              inviteLink !== ""
+                ? "These key owners must join the Cursor team before their usage counts against its quota — copy the invite link, send it out-of-band, then \u201CSync now\u201D reclassifies once they join."
+                : "These key owners must join the Cursor team before their usage counts against its quota. Invites are sent from the Cursor dashboard (cursor.com \u2192 Invite Members); paste the team's invite link into the account editor to enable one-click copying here."
+            }
+            count={coverage.offTeamWithKey.length}
+            action={inviteLink !== "" ? <CopyInviteButton inviteLink={inviteLink} /> : undefined}
+          >
+            {coverage.offTeamWithKey.map((keyView) => (
+              <KeyRow
+                key={keyView.key?.keyId}
+                accountId={accountId}
+                keyView={keyView}
+                hasRoster
+                actions={actions}
+                onChanged={onChanged}
+              />
+            ))}
+          </CoverageGroup>
+        )}
+      </div>
     </div>
   );
 }
@@ -189,28 +205,38 @@ function CoverageGroup({
   title,
   description,
   count,
+  action,
   children,
 }: {
   readonly title: string;
   readonly description?: string;
   readonly count: number;
+  /** Optional group-level action (e.g. the off-team invite copy). */
+  readonly action?: React.ReactNode;
   readonly children: React.ReactNode;
 }) {
   return (
     <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="stg:text-[11px] stg:font-semibold stg:text-foreground">
-            {title}
-            <span className="stg:ml-1.5 stg:font-normal stg:text-muted-foreground">
-              {count}
+        <div
+          role="cell"
+          aria-colspan={7}
+          className="stg:flex stg:items-start stg:justify-between stg:gap-2"
+        >
+          <span className="stg:min-w-0">
+            <span className="stg:text-[11px] stg:font-semibold stg:text-foreground">
+              {title}
+              <span className="stg:ml-1.5 stg:font-normal stg:text-muted-foreground">
+                {count}
+              </span>
             </span>
+            {description && (
+              <span className="stg:block stg:text-[11px] stg:text-muted-foreground">
+                {description}
+              </span>
+            )}
           </span>
-          {description && (
-            <span className="stg:block stg:text-[11px] stg:text-muted-foreground">
-              {description}
-            </span>
-          )}
+          {action && <span className="stg:shrink-0">{action}</span>}
         </div>
       </div>
       {children}
@@ -224,30 +250,29 @@ 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), unlike the other text cells which
- * truncate. The secondary name line stays truncated — it is display
- * sugar, not identity.
+ * the row's identity and truncates with the overflow-gated house tooltip
+ * (never `break-words`: with grid columns under pressure, word-breaking
+ * degenerated to one character per line — stigmer#929; the full value
+ * stays available to selection, screen readers, and the tooltip). The
+ * secondary line carries what each row type actually has: the key
+ * name/label on key rows, the roster display name on gap rows
+ * (`CursorMemberKeyView` carries no member name to show).
  */
 function MemberCell({
   email,
-  name,
+  secondary,
 }: {
   readonly email: string;
-  readonly name?: string;
+  readonly secondary?: string;
 }) {
   return (
     <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="stg:block stg:truncate stg:text-[11px] stg:text-muted-foreground">
-          {name}
-        </span>
+      <TruncatedText text={email} className="stg:font-medium stg:text-foreground" />
+      {secondary && (
+        <TruncatedText
+          text={secondary}
+          className="stg:text-[11px] stg:text-muted-foreground"
+        />
       )}
     </span>
   );
@@ -258,71 +283,70 @@ function KeyRow({
   accountId,
   keyView,
   hasRoster,
-  inviteLink,
   actions,
   onChanged,
 }: {
   readonly accountId: string;
   readonly keyView: CursorMemberKeyView;
   readonly hasRoster: boolean;
-  readonly inviteLink: string;
   readonly actions: ReturnType<typeof useCursorMemberKeyActions>;
   readonly onChanged: () => void;
 }) {
   const key = keyView.key;
   if (!key) return null;
 
+  const keyMeta = [key.cursorKeyName || "unnamed key", key.label]
+    .filter((part) => part !== "")
+    .join(" · ");
+
   return (
     <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="stg:min-w-0">
-        <TruncatedText
-          text={key.cursorKeyName || "unnamed key"}
-          className="stg:block stg:text-muted-foreground"
-        />
-        {key.label && (
-          <TruncatedText
-            text={key.label}
-            className="stg:block stg:text-[11px] stg:text-muted-foreground"
-          />
-        )}
-      </span>
+      <MemberCell email={key.boundEmail} secondary={keyMeta} />
       <SpendCells spend={keyView.spend} />
       <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="stg:flex stg:items-center stg:justify-end stg:gap-2">
-        {inviteLink !== "" && <CopyInviteButton inviteLink={inviteLink} />}
-        <Button
-          size="sm"
-          variant="outline"
-          disabled={actions.isSubmitting}
-          onClick={() => {
-            void actions
-              .setKeyEnabled(accountId, key.keyId, !key.enabled)
-              .then(onChanged, () => {
-                // Surfaced via actions.error.
-              });
-          }}
-        >
-          {key.enabled ? "Disable" : "Enable"}
-        </Button>
-        <Button
-          size="sm"
-          variant="destructive"
-          disabled={actions.isSubmitting}
-          onClick={() => {
-            void actions
-              .removeKey({ accountId, keyId: key.keyId })
-              .then(onChanged, () => {
-                // Surfaced via actions.error (incl. the live-pin guard's
-                // "disable instead, or force" message).
-              });
-          }}
-        >
-          Remove
-        </Button>
+      <span role="cell" className="stg:text-right">
+        <ActionMenu>
+          <ActionMenu.Trigger aria-label={`Actions for ${key.boundEmail}`}>
+            <MoreHorizontal className="stg:size-4" />
+          </ActionMenu.Trigger>
+          <ActionMenu.Content>
+            {/* `disabled` guards against a re-fire while a prior key
+                mutation is still in flight; outcomes surface via
+                actions.error under the table. */}
+            <ActionMenu.Item
+              icon={key.enabled ? <Pause /> : <Play />}
+              disabled={actions.isSubmitting}
+              onSelect={() => {
+                void actions
+                  .setKeyEnabled(accountId, key.keyId, !key.enabled)
+                  .then(onChanged, () => {
+                    // Surfaced via actions.error.
+                  });
+              }}
+            >
+              {key.enabled ? "Disable" : "Enable"}
+            </ActionMenu.Item>
+            <ActionMenu.Separator />
+            <ActionMenu.Item
+              icon={<Trash2 />}
+              variant="destructive"
+              disabled={actions.isSubmitting}
+              onSelect={() => {
+                void actions
+                  .removeKey({ accountId, keyId: key.keyId })
+                  .then(onChanged, () => {
+                    // Surfaced via actions.error (incl. the live-pin guard's
+                    // "disable instead, or force" message).
+                  });
+              }}
+            >
+              Remove
+            </ActionMenu.Item>
+          </ActionMenu.Content>
+        </ActionMenu>
       </span>
     </div>
   );
@@ -335,17 +359,14 @@ function GapRow({ memberView }: { readonly memberView: CursorTeamMemberView }) {
 
   return (
     <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="stg:text-muted-foreground">
-        —
-      </span>
+      <MemberCell email={member.email} secondary={member.name || undefined} />
       <SpendCells spend={memberView.spend} />
       <span role="cell">
         <StateBadge tone="muted" label="No key" />
       </span>
-      <span role="cell" className="stg:text-right stg:text-muted-foreground">
-        —
-      </span>
+      {/* No key, no actions — an empty cell keeps every row at the
+          header's seven columns. */}
+      <span role="cell" />
     </div>
   );
 }
@@ -415,9 +436,10 @@ function KeyStatusBadge({
 // ---------------------------------------------------------------------------
 
 /**
- * Copies the account-level team invite link. Deliberately a copy, never
- * a navigation: a Cursor invite link is a join link, and opening it
- * would join the operator's own Cursor account to the team.
+ * Copies the account-level team invite link, once per group (the link is
+ * identical for every off-team owner). Deliberately a copy, never a
+ * navigation: a Cursor invite link is a join link, and opening it would
+ * join the operator's own Cursor account to the team.
  */
 function CopyInviteButton({ inviteLink }: { readonly inviteLink: string }) {
   const { copy, copied } = useCopyFeedback();

package/src/cursor-accounts/MemberKeysPanel.tsx

@@ -143,7 +143,31 @@ export function MemberKeysPanel({
 
   return (
     <section className="stg:space-y-2">
-      <h4 className="stg:text-xs stg:font-semibold stg:text-foreground">Team coverage</h4>
+      <div>
+        <h4 className="stg:text-xs stg:font-semibold stg:text-foreground">Team coverage</h4>
+        {/* One-line health subtitle so the coverage answer is readable
+            even when the gap group sits below the fold. The counts are
+            the table's own groups (no re-derivation); the gap count is
+            the attention point, tinted only when it is non-zero. Before
+            the first sync there is nothing to classify, so no subtitle. */}
+        {coverage.hasRoster && (
+          <p className="stg:text-[11px] stg:text-muted-foreground">
+            {coverage.onTeamWithKey.length} covered
+            {" · "}
+            <span
+              className={cn(
+                coverage.onTeamWithoutKey.length > 0 &&
+                  "stg:font-medium stg:text-destructive",
+              )}
+            >
+              {coverage.onTeamWithoutKey.length} without keys
+            </span>
+            {coverage.offTeamWithKey.length > 0
+              ? ` · ${coverage.offTeamWithKey.length} off-team`
+              : ""}
+          </p>
+        )}
+      </div>
 
       {keyViews.length === 0 && (
         <p className="stg:text-xs stg:text-muted-foreground" role="status">