@stigmer/react 3.13.0 → 3.14.0

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

@@ -21,6 +21,7 @@ import {
 } from "@stigmer/protos/ai/stigmer/platform/cursoraccount/v1/io_pb";
 import { StigmerContext } from "../../context";
 import { FetchCacheContext } from "../../internal/FetchCacheProvider";
+import { openMenu } from "../../__tests__/helpers/open-menu";
 import { CursorAccountsConsole } from "../CursorAccountsConsole";
 
 interface MockCursorAccounts {
@@ -257,13 +258,17 @@ describe("CursorAccountsConsole", () => {
     await waitFor(() =>
       expect(screen.getByRole("table", { name: "Team coverage" })).toBeTruthy(),
     );
-    // Category 1: on the team, key held — email, key name, spend, status.
+    // Category 1: on the team, key held — the key name/label folds into
+    // the identity cell (no separate key column: stigmer#929 traded it
+    // for member-column width).
     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: 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).
+    // The email is the row's identity: it truncates with the
+    // overflow-gated house tooltip (never break-words, which #929 showed
+    // degenerating to one character per line under column pressure) and
+    // never a native title (banned, stigmer-cloud#268) — the full value
+    // stays in the DOM as selectable text on both row kinds.
     expect(document.querySelector("[title]")).toBeNull();
     expect(screen.getByText("$0.17")).toBeTruthy(); // included, 169342 micro-USD
     expect(screen.getByText("Active")).toBeTruthy();
@@ -282,6 +287,12 @@ describe("CursorAccountsConsole", () => {
     // Header sync line: active members from server facts, removed seats
     // by list arithmetic (roster entries minus active members).
     expect(screen.getByText(/2 members · 1 removed seat/)).toBeTruthy();
+    // Only key-backed rows carry an actions kebab; gap rows have none.
+    expect(screen.getAllByRole("button", { name: /^Actions for/ })).toHaveLength(1);
+    // The heading subtitle answers roster health without scrolling to
+    // the gap group.
+    expect(screen.getByText(/1 covered/)).toBeTruthy();
+    expect(screen.getByText("1 without keys")).toBeTruthy();
   });
 
   it("affirms full coverage instead of hiding the gap group when every active member holds a key", async () => {
@@ -377,14 +388,16 @@ describe("CursorAccountsConsole", () => {
     expect(screen.getByText("Not on team")).toBeTruthy();
     expect(screen.getByText("Left team")).toBeTruthy();
 
-    // One "Copy invite" per off-team row — a copy, never a navigation.
-    const copyButtons = screen.getAllByRole("button", { name: "Copy invite" });
-    expect(copyButtons).toHaveLength(2);
-    await userEvent.click(copyButtons[0]);
+    // ONE "Copy invite" in the group header — the link is account-level
+    // and identical for every off-team owner, so per-row buttons were
+    // redundant (stigmer#929). Always a copy, never a navigation.
+    await userEvent.click(screen.getByRole("button", { name: "Copy invite" }));
     await waitFor(() =>
       expect(writeText).toHaveBeenCalledWith("https://cursor.com/team-invite/abc"),
     );
     expect(screen.getByRole("button", { name: "Copied" })).toBeTruthy();
+    // The heading subtitle counts the off-team keys.
+    expect(screen.getByText(/2 off-team/)).toBeTruthy();
   });
 
   it("points at the Cursor dashboard when no invite link is configured", async () => {
@@ -448,6 +461,49 @@ describe("CursorAccountsConsole", () => {
     expect(screen.queryByText(/Key held — not on the team/)).toBeNull();
   });
 
+  it("drives Enable/Disable and Remove through the row's kebab menu", async () => {
+    const setMemberKeyEnabled = vi.fn().mockResolvedValue(scenarAccount());
+    const removeMemberKey = vi.fn().mockResolvedValue(scenarAccount());
+    const client = createMockStigmer({
+      listAccounts: vi.fn().mockResolvedValue({ accounts: [scenarSummary()] }),
+      getAccountView: vi.fn().mockResolvedValue(scenarView()),
+      setMemberKeyEnabled,
+      removeMemberKey,
+    });
+    render(<CursorAccountsConsole />, { wrapper: wrapper(client) });
+
+    await waitFor(() => expect(screen.getByText("scenar team")).toBeTruthy());
+    await userEvent.click(screen.getByRole("button", { name: /scenar team/ }));
+    await waitFor(() =>
+      expect(screen.getByRole("table", { name: "Team coverage" })).toBeTruthy(),
+    );
+
+    // The enabled key offers Disable; the menu closes on select.
+    await openMenu(
+      screen.getByRole("button", { name: "Actions for zane@scenar.ai" }),
+    );
+    await userEvent.click(screen.getByRole("menuitem", { name: "Disable" }));
+    await waitFor(() =>
+      expect(setMemberKeyEnabled).toHaveBeenCalledWith({
+        accountId: "acc-1",
+        keyId: "k-1",
+        enabled: false,
+      }),
+    );
+
+    // Remove is the kebab's destructive item (live-pin-guarded server-side).
+    await openMenu(
+      screen.getByRole("button", { name: "Actions for zane@scenar.ai" }),
+    );
+    await userEvent.click(screen.getByRole("menuitem", { name: "Remove" }));
+    await waitFor(() =>
+      expect(removeMemberKey).toHaveBeenCalledWith({
+        accountId: "acc-1",
+        keyId: "k-1",
+      }),
+    );
+  });
+
   it("adds a member key and refreshes both views", async () => {
     const addMemberKey = vi.fn().mockResolvedValue(scenarAccount());
     const client = createMockStigmer({

package/src/cursor-accounts/__tests__/MemberCoverageTable.layout.test.tsx

@@ -0,0 +1,212 @@
+// Layout-contract regression suite for the coverage table's column
+// budget (stigmer#929). Runs in a real Chromium via
+// `vitest.a11y.config.ts` — the defect this pins was a grid-track
+// collapse (fixed tracks starving the flexible member column until
+// emails rendered one character per line), which only a real layout
+// engine can resolve.
+//
+// The contract has two halves:
+//
+// 1. At the settings-page canvas (both client apps render settings in
+//    `max-w-3xl`, ~720px of content), the table fits WITHOUT horizontal
+//    scroll and the member column keeps enough width to render typical
+//    emails whole.
+// 2. In a narrower host (the SDK component is embeddable at any width,
+//    DD-004), the grid's min-width guard turns crushing into horizontal
+//    scrolling — the member column never collapses.
+//
+// Like the provider layout suite (DD-019), this renders against the
+// SHIPPED stylesheet (`dist/styles.css`, built by `npm run build:libs`),
+// so the contract is verified on the artifact consumers actually load.
+
+import "../../../dist/styles.css";
+
+import { describe, it, expect, afterEach } from "vitest";
+import { render, cleanup, screen } from "@testing-library/react";
+import { create } from "@bufbuild/protobuf";
+import { timestampFromDate } from "@bufbuild/protobuf/wkt";
+import type { Stigmer } from "@stigmer/sdk";
+import {
+  CursorAccountSchema,
+  CursorAccountSyncSnapshotSchema,
+  CursorMemberKeySchema,
+  CursorMemberSpendSchema,
+  CursorTeamMemberSchema,
+} from "@stigmer/protos/ai/stigmer/platform/cursoraccount/v1/cursor_account_pb";
+import {
+  CursorAccountViewSchema,
+  CursorMemberKeyViewSchema,
+  CursorMemberKeyState,
+  CursorTeamMemberViewSchema,
+} from "@stigmer/protos/ai/stigmer/platform/cursoraccount/v1/io_pb";
+import { StigmerProvider } from "../../provider";
+import { deriveCoverage } from "../cursor-account-coverage";
+import type { useCursorMemberKeyActions } from "../useCursorMemberKeyActions";
+import { MemberCoverageTable } from "../MemberCoverageTable";
+
+afterEach(cleanup);
+
+// A minimal client: the provider eagerly fetches registries on mount;
+// a null credential keeps that non-blocking and off the network.
+function makeClient(): Stigmer {
+  return {
+    baseUrl: "https://example.test",
+    getAuthCredential: async () => null,
+    fetch: (async () => {
+      throw new Error("network disabled in test");
+    }) as unknown as typeof globalThis.fetch,
+  } as unknown as Stigmer;
+}
+
+// The table renders actions through this hook's return; layout never
+// invokes them, so rejecting stubs are honest.
+const stubActions: ReturnType<typeof useCursorMemberKeyActions> = {
+  addKey: () => Promise.reject(new Error("unused in layout test")),
+  removeKey: () => Promise.reject(new Error("unused in layout test")),
+  setKeyEnabled: () => Promise.reject(new Error("unused in layout test")),
+  isSubmitting: false,
+  error: null,
+  clearError: () => {},
+};
+
+/**
+ * A view shaped like the account that exposed #929: all three coverage
+ * categories populated, real-length emails, a key with both a Cursor
+ * key name and an operator label (the widest identity cell).
+ */
+function fixtureView() {
+  const spend = (email: string) =>
+    create(CursorMemberSpendSchema, {
+      email,
+      autoPercentUsed: 12.4,
+      apiPercentUsed: 100,
+      includedSpendUsdMicros: 201550000n,
+      overageSpendUsdMicros: 0n,
+    });
+
+  return create(CursorAccountViewSchema, {
+    account: create(CursorAccountSchema, {
+      accountId: "acc-layout",
+      displayName: "layout team",
+      adminApiKey: "***REDACTED***",
+      enabled: true,
+      teamInviteLink: "https://cursor.com/team-invite/layout",
+    }),
+    snapshot: create(CursorAccountSyncSnapshotSchema, {
+      accountId: "acc-layout",
+      syncedAt: timestampFromDate(new Date("2026-08-28T10:00:00Z")),
+      members: [
+        create(CursorTeamMemberSchema, {
+          userId: "u1",
+          email: "timothy@leftbin.com",
+          name: "Timothy M",
+          role: "owner",
+        }),
+        create(CursorTeamMemberSchema, {
+          userId: "u2",
+          email: "amelia@leftbin.com",
+          name: "Amelia F",
+          role: "member",
+        }),
+      ],
+    }),
+    keyViews: [
+      create(CursorMemberKeyViewSchema, {
+        key: create(CursorMemberKeySchema, {
+          keyId: "k-1",
+          apiKey: "***REDACTED***",
+          boundEmail: "timothy@leftbin.com",
+          cursorKeyName: "stigmer-production-key",
+          label: "timothy — prod",
+          enabled: true,
+        }),
+        state: CursorMemberKeyState.member_key_active,
+        spend: spend("timothy@leftbin.com"),
+      }),
+      create(CursorMemberKeyViewSchema, {
+        key: create(CursorMemberKeySchema, {
+          keyId: "k-2",
+          apiKey: "***REDACTED***",
+          boundEmail: "lucasb@oneighty.com",
+          cursorKeyName: "personal-key",
+          enabled: true,
+        }),
+        state: CursorMemberKeyState.member_key_owner_unknown,
+        spend: spend("lucasb@oneighty.com"),
+      }),
+    ],
+    membersWithoutKeysViews: [
+      create(CursorTeamMemberViewSchema, {
+        member: create(CursorTeamMemberSchema, {
+          userId: "u2",
+          email: "amelia@leftbin.com",
+          name: "Amelia F",
+          role: "member",
+        }),
+      }),
+    ],
+  });
+}
+
+function renderTableAt(hostWidth: number) {
+  const view = fixtureView();
+  render(
+    <div style={{ width: hostWidth }}>
+      <StigmerProvider client={makeClient()}>
+        <MemberCoverageTable
+          accountId="acc-layout"
+          coverage={deriveCoverage(view)}
+          inviteLink={view.account?.teamInviteLink ?? ""}
+          actions={stubActions}
+          onChanged={() => {}}
+        />
+      </StigmerProvider>
+    </div>,
+  );
+
+  const table = screen.getByRole("table", { name: "Team coverage" });
+  // The overflow guard is the table's direct wrapper (the card-chrome div).
+  const scroller = table.parentElement as HTMLElement;
+  return { table, scroller };
+}
+
+function emailCell(email: string): HTMLElement {
+  const cell = screen.getByText(email).closest('[role="cell"]');
+  expect(cell, `member cell for ${email}`).not.toBeNull();
+  return cell as HTMLElement;
+}
+
+describe("MemberCoverageTable column budget (#929)", () => {
+  it("fits the 768px settings canvas without horizontal scroll, with a legible member column", () => {
+    // max-w-3xl (768px) minus the settings page's px-6 → ~720px content.
+    const { scroller } = renderTableAt(720);
+
+    expect(scroller.scrollWidth).toBe(scroller.clientWidth);
+
+    // The member column must hold real emails whole. The #929 failure
+    // rendered this cell ~1ch wide; anything under ~180px would push
+    // typical emails back into truncation as the norm rather than the
+    // exception.
+    const cell = emailCell("lucasb@oneighty.com");
+    expect(cell.getBoundingClientRect().width).toBeGreaterThan(180);
+
+    // One line: the email never wraps (truncation instead of the
+    // character-per-line wrapping that motivated this suite).
+    const emailEl = screen.getByText("lucasb@oneighty.com");
+    const lineHeight = parseFloat(getComputedStyle(emailEl).lineHeight);
+    expect(emailEl.getBoundingClientRect().height).toBeLessThan(lineHeight * 1.5);
+  });
+
+  it("scrolls horizontally in a narrow host instead of collapsing the member column", () => {
+    const { table, scroller } = renderTableAt(400);
+
+    // The min-width guard keeps the grid at its legible minimum and
+    // hands the difference to the scroll container.
+    expect(scroller.scrollWidth).toBeGreaterThan(scroller.clientWidth);
+    expect(table.getBoundingClientRect().width).toBeGreaterThanOrEqual(640);
+
+    // Even mid-scroll the member cell keeps usable width.
+    const cell = emailCell("lucasb@oneighty.com");
+    expect(cell.getBoundingClientRect().width).toBeGreaterThan(100);
+  });
+});

package/src/internal/ResizableSplit.tsx

@@ -66,7 +66,7 @@ export interface ResizableSplitProps {
    * query. 48rem clears the session layout's content minimums (320px min
    * chat + drag handle + a usable workspace panel) and approximately
    * preserves the console's previous viewport-`lg` trigger point, where the
-   * viewer's box is the ~1024px window minus the ~280px sidebar. It is
+   * viewer's box is the ~1024px window minus the ~240px sidebar. It is
    * deliberately not a prop: container-query conditions cannot read CSS
    * custom properties, so a runtime threshold would need an inline-`<style>`
    * or ResizeObserver mechanism — heavier than the static utility this is,

package/src/sidebar/SettingsSidebar.tsx

@@ -4,7 +4,12 @@ import type { ReactNode } from "react";
 import { ArrowLeft } from "lucide-react";
 import type { Organization } from "@stigmer/protos/ai/stigmer/tenancy/organization/v1/api_pb";
 import type { SettingsNavGroup } from "../settings/settings-nav.js";
-import { SidebarChrome, SidebarSeparator, navRowClassName } from "./chrome.js";
+import {
+  SidebarChrome,
+  SidebarSeparator,
+  navRowClassName,
+  sectionLabelClassName,
+} from "./chrome.js";
 import type { RenderSidebarLink } from "./types.js";
 
 // ---------------------------------------------------------------------------
@@ -86,13 +91,14 @@ export function SettingsSidebar({
       onOrgChanged={onOrgChanged}
       footer={footer}
     >
-      {/* Back to Sessions */}
+      {/* Back to Sessions — an exit, not a destination; the resting-row
+          treatment (muted, brightening on hover) already reads as such. */}
       <div className="stg:flex-none stg:px-3 stg:py-1">
         {renderLink({
           id: "back-to-sessions",
           href: backHref,
           active: false,
-          className: navRowClassName(false, { muted: true }),
+          className: navRowClassName(false),
           "aria-current": undefined,
           children: (
             <>
@@ -106,10 +112,10 @@ export function SettingsSidebar({
       <SidebarSeparator />
 
       {/* Settings nav links — grouped, permission-aware via `groups` */}
-      <div className="stg:flex stg:flex-col stg:gap-4 stg:px-3 stg:py-1">
+      <div className="stg:flex stg:flex-col stg:gap-5 stg:px-3 stg:py-1">
         {groups.map((group) => (
           <div key={group.label} className="stg:flex stg:flex-col stg:gap-0.5">
-            <span className="stg:text-sidebar-muted-foreground stg:px-2 stg:pb-1 stg:text-[11px] stg:font-medium stg:tracking-wider stg:uppercase">
+            <span className={`${sectionLabelClassName()} stg:pb-1`}>
               {group.label}
             </span>
             {group.items.map((item) => {

package/src/sidebar/WorkspaceSidebar.tsx

@@ -23,7 +23,12 @@ import {
   TooltipTrigger,
   TooltipContent,
 } from "../internal/tooltip.js";
-import { SidebarChrome, SidebarSeparator, navRowClassName } from "./chrome.js";
+import {
+  SidebarChrome,
+  SidebarSeparator,
+  navRowClassName,
+  sectionLabelClassName,
+} from "./chrome.js";
 import type { RenderSidebarLink } from "./types.js";
 
 // ---------------------------------------------------------------------------
@@ -110,7 +115,7 @@ export interface WorkspaceSidebarProps {
  * from the product because it *is* the product (stigmer/stigmer#317).
  *
  * Layout note: the sidebar fills its container's height and defines no
- * width — the console's app shell owns the `w-70` (280px) column.
+ * width — the console's app shell owns the `w-60` (240px) column.
  *
  * @example
  * ```tsx
@@ -153,55 +158,57 @@ export function WorkspaceSidebar({
       onOrgChanged={onOrgChanged}
       footer={footer}
     >
-      <PrimaryNavRow
-        id="new-session"
-        href="/"
-        label="New Session"
-        icon={Plus}
-        active={activeNav === "new-session"}
-        renderLink={renderLink}
-      />
-      <PrimaryNavRow
-        id="dashboard"
-        href="/dashboard"
-        label="Dashboard"
-        icon={LayoutDashboard}
-        active={activeNav === "dashboard"}
-        renderLink={renderLink}
-      />
-      {/* MessagesSquare, deliberately not MessageSquare — the singular
-          mark is the session glyph in Recents, and the two areas must
-          not read as one. */}
-      <PrimaryNavRow
-        id="conversations"
-        href="/conversations"
-        label="Conversations"
-        icon={MessagesSquare}
-        active={activeNav === "conversations"}
-        renderLink={renderLink}
-        accessory={
-          conversationsBadgeCount !== undefined && conversationsBadgeCount > 0 ? (
-            <WantsHumanBadge count={conversationsBadgeCount} />
-          ) : null
-        }
-      />
-      <PrimaryNavRow
-        id="library"
-        href="/library"
-        label="Library"
-        icon={Library}
-        active={activeNav === "library"}
-        renderLink={renderLink}
-      />
+      {/* Primary nav — one group container with the same row rhythm as
+          the settings groups (gap-0.5), so the two zones share one beat. */}
+      <div className="stg:flex stg:flex-none stg:flex-col stg:gap-0.5 stg:px-3 stg:py-1">
+        <PrimaryNavRow
+          id="new-session"
+          href="/"
+          label="New Session"
+          icon={Plus}
+          active={activeNav === "new-session"}
+          renderLink={renderLink}
+        />
+        <PrimaryNavRow
+          id="dashboard"
+          href="/dashboard"
+          label="Dashboard"
+          icon={LayoutDashboard}
+          active={activeNav === "dashboard"}
+          renderLink={renderLink}
+        />
+        {/* MessagesSquare, deliberately not MessageSquare — the singular
+            mark is the session glyph in Recents, and the two areas must
+            not read as one. */}
+        <PrimaryNavRow
+          id="conversations"
+          href="/conversations"
+          label="Conversations"
+          icon={MessagesSquare}
+          active={activeNav === "conversations"}
+          renderLink={renderLink}
+          accessory={
+            conversationsBadgeCount !== undefined && conversationsBadgeCount > 0 ? (
+              <WantsHumanBadge count={conversationsBadgeCount} />
+            ) : null
+          }
+        />
+        <PrimaryNavRow
+          id="library"
+          href="/library"
+          label="Library"
+          icon={Library}
+          active={activeNav === "library"}
+          renderLink={renderLink}
+        />
+      </div>
 
       <SidebarSeparator />
 
       {/* Scrollable recents */}
       <ScrollArea className="stg:flex-1">
         <div className="stg:p-3">
-          <p className="stg:text-sidebar-muted-foreground stg:mb-2 stg:px-1 stg:text-[11px] stg:font-semibold stg:tracking-wider stg:uppercase">
-            Recents
-          </p>
+          <p className={`${sectionLabelClassName()} stg:mb-2`}>Recents</p>
           {isLoading ? (
             <RecentsSkeletons />
           ) : error ? (
@@ -246,24 +253,20 @@ function PrimaryNavRow({
   /** Trailing row content (e.g. the Conversations count pill). */
   readonly accessory?: ReactNode;
 }) {
-  return (
-    <div className="stg:flex-none stg:px-3 stg:py-1">
-      {renderLink({
-        id,
-        href,
-        active,
-        className: navRowClassName(active),
-        "aria-current": active ? "page" : undefined,
-        children: (
-          <>
-            <Icon className="stg:size-4 stg:shrink-0" />
-            {label}
-            {accessory}
-          </>
-        ),
-      })}
-    </div>
-  );
+  return renderLink({
+    id,
+    href,
+    active,
+    className: navRowClassName(active),
+    "aria-current": active ? "page" : undefined,
+    children: (
+      <>
+        <Icon className="stg:size-4 stg:shrink-0" />
+        {label}
+        {accessory}
+      </>
+    ),
+  });
 }
 
 /**
@@ -311,7 +314,8 @@ function ActivityGroupList({
       <div className="stg:space-y-4">
         {groups.map((group) => (
           <div key={group.label}>
-            <p className="stg:text-sidebar-muted-foreground stg:mb-1 stg:px-2 stg:text-[10px] stg:font-medium stg:tracking-wider stg:uppercase">
+            {/* One step below the section label: same voice, 10px. */}
+            <p className="stg:text-sidebar-muted-foreground stg:mb-1 stg:px-2 stg:text-[10px] stg:font-medium stg:tracking-wide stg:uppercase">
               {group.label}
             </p>
             <ul className={`${UNSTYLED_LIST} stg:space-y-0.5`} role="list">
@@ -404,11 +408,15 @@ const ActivityEntry = memo(function ActivityEntry({
   );
 });
 
-/** Recents rows are denser than primary nav: 12px text, top-aligned icon. */
+/**
+ * Recents rows are denser than primary nav: 12px text, top-aligned icon.
+ * Same state grammar as `navRowClassName` — muted at rest, accent fill
+ * when active, constant weight so activation never shifts text width.
+ */
 function cnActivityRow(active: boolean): string {
   return active
-    ? "stg:flex stg:items-start stg:gap-2 stg:rounded-lg stg:px-2 stg:py-1.5 stg:text-xs stg:transition-colors stg:bg-sidebar-accent stg:text-sidebar-accent-foreground stg:font-medium"
-    : "stg:flex stg:items-start stg:gap-2 stg:rounded-lg stg:px-2 stg:py-1.5 stg:text-xs stg:transition-colors stg:text-sidebar-foreground stg:hover:bg-sidebar-accent stg:hover:text-sidebar-accent-foreground";
+    ? "stg:flex stg:items-start stg:gap-2 stg:rounded-md stg:px-2 stg:py-1 stg:text-xs stg:transition-colors stg:bg-sidebar-accent stg:text-sidebar-accent-foreground"
+    : "stg:flex stg:items-start stg:gap-2 stg:rounded-md stg:px-2 stg:py-1 stg:text-xs stg:transition-colors stg:text-sidebar-muted-foreground stg:hover:bg-sidebar-accent stg:hover:text-sidebar-accent-foreground";
 }
 
 function RecentsSkeletons() {

package/src/sidebar/__tests__/SettingsSidebar.test.tsx

@@ -85,15 +85,19 @@ describe("SettingsSidebar", () => {
     expect(inactive.getAttribute("aria-current")).toBeNull();
   });
 
-  it("renders Back to Sessions as a muted exit row targeting backHref", () => {
+  it("renders Back to Sessions as a resting (never-active) row targeting backHref", () => {
     const { container } = renderSidebar(
       <SettingsSidebar {...baseProps()} backHref="/sessions/ses_123" />,
     );
 
     const back = container.querySelector('[data-row-id="back-to-sessions"]')!;
     expect(back.getAttribute("href")).toBe("/sessions/ses_123");
-    expect(back.className).toContain("stg:text-sidebar-muted-foreground");
     expect(back.textContent).toContain("Back to Sessions");
+    // An exit, not a destination: always the resting-row treatment, never
+    // the active accent — even though it is the row you "came from".
+    expect(back.getAttribute("aria-current")).toBeNull();
+    expect(back.className.split(" ")).toContain("stg:text-sidebar-muted-foreground");
+    expect(back.className.split(" ")).not.toContain("stg:bg-sidebar-accent");
   });
 
   it("renders the footer slot", () => {

package/src/sidebar/chrome.tsx

@@ -9,8 +9,9 @@ import { OrgSwitcher } from "../organization/OrgSwitcher.js";
 // ---------------------------------------------------------------------------
 // Shared sidebar chrome — the pieces WorkspaceSidebar and SettingsSidebar
 // have in common: the nav container, the top row (collapse toggle + org
-// switcher), the hairline separator, the footer band, and the one nav-row
-// class recipe. Internal to the sidebar domain; not exported from the SDK.
+// switcher), the hairline separator, the footer band, and the shared class
+// recipes (nav rows, section labels). Internal to the sidebar domain; not
+// exported from the SDK.
 //
 // Every class here is transcribed from the console's sidebars — this file
 // IS the console's chrome now, so a change here changes the console, the
@@ -107,23 +108,36 @@ export function SidebarSeparator() {
 }
 
 /**
- * The one nav-row class recipe both sidebars share: 14px medium labels,
- * 16px icons (sized by callers), 8px/6px padding, rounded row highlight.
+ * The one nav-row class recipe both sidebars share: 13px/16px regular
+ * labels, 16px icons (sized by callers), 8px/4px padding — 24px rows.
+ * The explicit `leading-4` is load-bearing: without it the inherited
+ * line-height (~1.5) pads every row to ~28px, and across a full column
+ * of rows that difference alone decides whether the sidebar breathes.
+ * 24px also stays exactly at the WCAG 2.5.8 minimum pointer-target size.
  *
- * `muted` renders the resting label in the muted sidebar tone — used by
- * "Back to Sessions", which is an exit, not a destination.
+ * Resting rows are muted so the navigation recedes and the content leads;
+ * the active row carries the accent fill, hover brightens to the accent
+ * foreground. Font weight is constant across states — state is expressed
+ * through color and fill only, so activating a row never shifts its text
+ * width. The muted-on-sidebar pairing is held to WCAG AA by the theme's
+ * contrast contract (sdk/theme/src/contract/pairs.ts) in every preset.
  */
-export function navRowClassName(
-  active: boolean,
-  { muted = false }: { muted?: boolean } = {},
-): string {
+export function navRowClassName(active: boolean): string {
   return cn(
-    "stg:flex stg:items-center stg:gap-2 stg:rounded-lg stg:px-2 stg:py-1.5 stg:text-sm stg:font-medium stg:transition-colors",
+    "stg:flex stg:items-center stg:gap-2 stg:rounded-md stg:px-2 stg:py-1 stg:text-[13px] stg:leading-4 stg:transition-colors",
     active
       ? "stg:bg-sidebar-accent stg:text-sidebar-accent-foreground"
-      : cn(
-          muted ? "stg:text-sidebar-muted-foreground" : "stg:text-sidebar-foreground",
-          "stg:hover:bg-sidebar-accent stg:hover:text-sidebar-accent-foreground",
-        ),
+      : "stg:text-sidebar-muted-foreground stg:hover:bg-sidebar-accent stg:hover:text-sidebar-accent-foreground",
   );
 }
+
+/**
+ * The section-label recipe both sidebars share (settings group labels,
+ * the Recents heading): 11px/16px medium uppercase in the muted sidebar
+ * tone. Spacing around a label stays with the caller — it is a layout
+ * concern; this recipe owns only the typography, so the two sidebars
+ * cannot drift.
+ */
+export function sectionLabelClassName(): string {
+  return "stg:text-sidebar-muted-foreground stg:px-2 stg:text-[11px] stg:leading-4 stg:font-medium stg:tracking-wide stg:uppercase";
+}