@startsimpli/ui 0.4.83 → 0.4.85

package/src/components/navigation/entity-switcher.tsx

@@ -0,0 +1,293 @@
+'use client'
+
+/**
+ * EntitySwitcher — a searchable "which record am I scoped to?" control
+ * (startsim-768w.21.1).
+ *
+ * Deliberately entity-agnostic: it takes `{ id, label, sublabel?, badge? }`
+ * items and hands back an id. It knows nothing about companies, foundries,
+ * projects or workspaces, so the same control serves all of them — the caller
+ * maps its domain objects into `EntitySwitcherItem[]`.
+ *
+ * Built on the existing Radix popover + Input primitives; no new dependency.
+ *
+ * Its first consumer is the dark `bg-gray-900` sidebar rail, so the defaults
+ * are translucent-over-dark and inherit the surrounding text colour rather
+ * than hard-coding a light-only look. Anything that doesn't suit a given
+ * surface is overridable via `triggerClassName` / `contentClassName`.
+ *
+ * a11y follows the WAI-ARIA combobox + listbox pattern:
+ *   - trigger is `role="combobox"` with `aria-expanded` / `aria-controls`
+ *   - the list is `role="listbox"`, rows are `role="option"`
+ *   - `aria-selected` marks the *current* entity (what the app is scoped to)
+ *   - `aria-activedescendant` (+ `data-highlighted`) tracks the *keyboard*
+ *     highlight, which moves with ArrowUp/ArrowDown independently of selection
+ */
+
+import * as React from 'react'
+import { Check, ChevronsUpDown } from 'lucide-react'
+import { cn } from '../../lib/utils'
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'
+import { Input } from '../ui/input'
+
+export interface EntitySwitcherItem {
+  /** Stable identifier handed back to `onSelect`. */
+  id: string
+  /** Primary display text — also the first thing the filter matches on. */
+  label: string
+  /** Secondary line (slug, org, subtitle). Filtered on as well. */
+  sublabel?: string
+  /** Optional trailing adornment (status pill, count, icon). */
+  badge?: React.ReactNode
+}
+
+export interface EntitySwitcherProps {
+  /** Everything the user can switch to. */
+  items: EntitySwitcherItem[]
+  /** The id currently in scope; drives the trigger label + `aria-selected`. */
+  currentId?: string | null
+  /** Fired with the chosen item's id. Fires even when it re-picks `currentId`. */
+  onSelect: (id: string) => void
+  /** Filter input placeholder. */
+  placeholder?: string
+  /** Accessible name for the filter input. */
+  searchLabel?: string
+  /** Shown instead of the list when the filter matches nothing. */
+  emptyLabel?: string
+  /** Trigger text when `currentId` matches no item (or there is none yet). */
+  triggerPlaceholder?: string
+  /** Set false to drop the filter input (short lists). */
+  searchable?: boolean
+  /** Override the trigger chrome — e.g. to sit on a light surface. */
+  triggerClassName?: string
+  /** Override the popover panel chrome (width, padding, colours). */
+  contentClassName?: string
+  /** Disable the whole control. */
+  disabled?: boolean
+}
+
+function optionDomId(baseId: string, itemId: string) {
+  return `${baseId}-opt-${String(itemId).replace(/[^A-Za-z0-9_-]/g, '_')}`
+}
+
+export function EntitySwitcher({
+  items,
+  currentId,
+  onSelect,
+  placeholder = 'Search…',
+  searchLabel = 'Search',
+  emptyLabel = 'No matches',
+  triggerPlaceholder = 'Select…',
+  searchable = true,
+  triggerClassName,
+  contentClassName,
+  disabled,
+}: EntitySwitcherProps) {
+  const baseId = React.useId()
+  const listboxId = `${baseId}-listbox`
+  const inputId = `${baseId}-filter`
+
+  const [open, setOpen] = React.useState(false)
+  const [query, setQuery] = React.useState('')
+  const [highlight, setHighlight] = React.useState(0)
+
+  const inputRef = React.useRef<HTMLInputElement>(null)
+  const listRef = React.useRef<HTMLUListElement>(null)
+
+  const current = items.find((i) => i.id === currentId)
+
+  const filtered = React.useMemo(() => {
+    const q = query.trim().toLowerCase()
+    if (!q) return items
+    return items.filter(
+      (i) =>
+        i.label.toLowerCase().includes(q) ||
+        (i.sublabel ? i.sublabel.toLowerCase().includes(q) : false)
+    )
+  }, [items, query])
+
+  // Keep the highlight inside the (possibly just-filtered) list.
+  React.useEffect(() => {
+    setHighlight((h) => (filtered.length === 0 ? 0 : Math.min(h, filtered.length - 1)))
+  }, [filtered.length])
+
+  const handleOpenChange = (next: boolean) => {
+    setOpen(next)
+    if (next) {
+      setQuery('')
+      // Open on whatever is currently in scope, so Enter is a no-op re-pick
+      // rather than a surprise jump to the first row.
+      const idx = items.findIndex((i) => i.id === currentId)
+      setHighlight(idx >= 0 ? idx : 0)
+    }
+  }
+
+  const choose = (id: string) => {
+    onSelect(id)
+    setOpen(false)
+  }
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'ArrowDown') {
+      event.preventDefault()
+      if (filtered.length === 0) return
+      setHighlight((h) => (h + 1) % filtered.length)
+      return
+    }
+    if (event.key === 'ArrowUp') {
+      event.preventDefault()
+      if (filtered.length === 0) return
+      setHighlight((h) => (h - 1 + filtered.length) % filtered.length)
+      return
+    }
+    if (event.key === 'Home') {
+      event.preventDefault()
+      setHighlight(0)
+      return
+    }
+    if (event.key === 'End') {
+      event.preventDefault()
+      setHighlight(Math.max(filtered.length - 1, 0))
+      return
+    }
+    if (event.key === 'Enter') {
+      const item = filtered[highlight]
+      if (!item) return
+      event.preventDefault()
+      choose(item.id)
+    }
+    // Escape is left to the popover's dismiss layer, which also restores
+    // focus to the trigger.
+  }
+
+  const activeItem = filtered[highlight]
+  const activeDescendant = activeItem ? optionDomId(baseId, activeItem.id) : undefined
+
+  // Keep the highlighted row in view on long lists.
+  React.useEffect(() => {
+    if (!open || !activeDescendant) return
+    const el = listRef.current?.querySelector<HTMLElement>(`#${CSS.escape(activeDescendant)}`)
+    el?.scrollIntoView?.({ block: 'nearest' })
+  }, [open, activeDescendant])
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          role="combobox"
+          aria-expanded={open}
+          aria-controls={listboxId}
+          aria-haspopup="listbox"
+          disabled={disabled}
+          className={cn(
+            'flex w-full items-center justify-between gap-2 rounded-md border border-white/15 bg-white/5 px-3 py-2',
+            'text-left text-sm font-medium text-inherit transition-colors',
+            'hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40',
+            'disabled:cursor-not-allowed disabled:opacity-50',
+            triggerClassName
+          )}
+        >
+          <span className="min-w-0 flex-1 truncate">{current ? current.label : triggerPlaceholder}</span>
+          <ChevronsUpDown className="h-4 w-4 flex-shrink-0 opacity-60" aria-hidden="true" />
+        </button>
+      </PopoverTrigger>
+
+      <PopoverContent
+        align="start"
+        className={cn('w-64 p-0', contentClassName)}
+        onOpenAutoFocus={(event) => {
+          // Focus the filter (or the list) rather than the panel itself, so the
+          // very first ArrowDown moves the highlight.
+          event.preventDefault()
+          if (searchable) inputRef.current?.focus()
+          else listRef.current?.focus()
+        }}
+        onKeyDown={handleKeyDown}
+      >
+        {searchable && (
+          <div className="border-b p-2">
+            <label className="sr-only" htmlFor={inputId}>
+              {searchLabel}
+            </label>
+            <Input
+              id={inputId}
+              ref={inputRef}
+              type="text"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder={placeholder}
+              autoComplete="off"
+              aria-autocomplete="list"
+              aria-controls={listboxId}
+              aria-activedescendant={activeDescendant}
+              className="h-8"
+            />
+          </div>
+        )}
+
+        <ul
+          ref={listRef}
+          id={listboxId}
+          role="listbox"
+          tabIndex={searchable ? -1 : 0}
+          aria-label={searchLabel}
+          aria-activedescendant={searchable ? undefined : activeDescendant}
+          className="max-h-64 overflow-y-auto p-1 outline-none"
+        >
+          {filtered.map((item, index) => {
+            const isCurrent = item.id === currentId
+            const isHighlighted = index === highlight
+            return (
+              <li
+                key={item.id}
+                id={optionDomId(baseId, item.id)}
+                role="option"
+                aria-selected={isCurrent}
+                data-highlighted={isHighlighted}
+                onClick={() => choose(item.id)}
+                onMouseEnter={() => setHighlight(index)}
+                className={cn(
+                  'flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm',
+                  isHighlighted && 'bg-accent text-accent-foreground'
+                )}
+              >
+                <Check
+                  className={cn('h-4 w-4 flex-shrink-0', isCurrent ? 'opacity-100' : 'opacity-0')}
+                  aria-hidden="true"
+                />
+                <span className="min-w-0 flex-1">
+                  <span className="block truncate">{item.label}</span>
+                  {item.sublabel && (
+                    <span
+                      className={cn(
+                        'block truncate text-xs',
+                        // The sublabel has to follow the row's foreground, not
+                        // the panel's. `text-muted-foreground` is picked to sit
+                        // on `bg-popover`; left alone it stays that grey when
+                        // the row flips to `bg-accent`, and on a saturated
+                        // accent that lands at ~1.1:1 — browser-verified as
+                        // washed out to the point of unreadable
+                        // (startsim-768w.21.1.3). Dimming the accent foreground
+                        // instead keeps the primary/secondary hierarchy while
+                        // staying legible on whatever accent the theme sets.
+                        isHighlighted ? 'text-accent-foreground/80' : 'text-muted-foreground'
+                      )}
+                    >
+                      {item.sublabel}
+                    </span>
+                  )}
+                </span>
+                {item.badge ? <span className="flex-shrink-0">{item.badge}</span> : null}
+              </li>
+            )
+          })}
+        </ul>
+
+        {filtered.length === 0 && (
+          <div className="px-3 py-6 text-center text-sm text-muted-foreground">{emptyLabel}</div>
+        )}
+      </PopoverContent>
+    </Popover>
+  )
+}

package/src/components/navigation/index.ts

@@ -0,0 +1,6 @@
+// Navigation chrome: the app rail, the shell that assembles it, grouped nav
+// sections and the generic entity switcher that scopes the rail.
+export * from './sidebar'
+export * from './app-shell'
+export * from './grouped-nav'
+export * from './entity-switcher'

package/src/components/navigation/sidebar.tsx

@@ -27,6 +27,13 @@ export interface SidebarProps {
    * Navigation sections
    */
   sections: SidebarSection[];
+  /**
+   * Contextual switcher rendered directly under the logo, above the nav —
+   * "which record is this rail scoped to?" (e.g. an <EntitySwitcher> over the
+   * user's foundries). Hidden while collapsed: a 5rem rail can only show a
+   * truncated combobox, which is noise rather than navigation.
+   */
+  switcher?: ReactNode;
   /**
    * User dropdown content (rendered at bottom of sidebar)
    */
@@ -56,6 +63,7 @@ export interface SidebarProps {
 export function Sidebar({
   appName,
   sections,
+  switcher,
   userDropdown,
   className,
   collapsible = true,
@@ -99,6 +107,11 @@ export function Sidebar({
         </Link>
       </div>
 
+      {/* Contextual switcher (scope of this rail) */}
+      {switcher && !collapsed && (
+        <div className="px-4 pt-4">{switcher}</div>
+      )}
+
       {/* Navigation */}
       <nav className="flex-1 overflow-y-auto p-4 space-y-6">
         {sections.map((section, idx) => (

package/src/components/team/MembersSection.tsx

@@ -38,6 +38,11 @@ export interface MembersSectionProps {
   onResendInvite?: (userId: string) => void | Promise<void>
   /** Suspend/restore a membership without deleting it (soft exit). */
   onSetActive?: (userId: string, isActive: boolean) => void | Promise<void>
+  /**
+   * Drill into one person (startsim-768w.19.6). Passed straight through to the
+   * table, which makes each row a click target — the way into MemberDetailPanel.
+   */
+  onSelectMember?: (userId: string) => void
   /** When set, the invite dialog is rendered next to the heading. */
   onInvite?: (input: { email: string; teamId: string; role: TeamRole }) => Promise<InvitationLite | void>
   onInvited?: (invitation: InvitationLite | void) => void
@@ -74,6 +79,7 @@ export function MembersSection({
   onRemove,
   onResendInvite,
   onSetActive,
+  onSelectMember,
   onInvite,
   onInvited,
   availableRoles,
@@ -128,6 +134,7 @@ export function MembersSection({
           onRemove={onRemove}
           onResendInvite={onResendInvite}
           onSetActive={onSetActive}
+          onSelectMember={onSelectMember}
           emptyState={emptyState}
           classNames={classNames?.table}
         />

package/src/components/team/MembersTable.tsx

@@ -52,6 +52,14 @@ export interface MembersTableProps {
    * active and Restore once `isActive === false`.
    */
   onSetActive?: (userId: string, isActive: boolean) => void | Promise<void>
+  /**
+   * Drill into one person (startsim-768w.19.6). When set, each row becomes a
+   * button-row: clicking it hands back that member's user id so the host can
+   * open the detail surface. The row ACTIONS (role, resend, deactivate, remove)
+   * deliberately stop the click, so managing a member never doubles as
+   * selecting them.
+   */
+  onSelectMember?: (userId: string) => void
   /** Custom empty-state slot. Defaults to a generic "No members yet" cell. */
   emptyState?: React.ReactNode
   /**
@@ -120,6 +128,7 @@ export function MembersTable({
   onRemove,
   onResendInvite,
   onSetActive,
+  onSelectMember,
   emptyState,
   showStatus,
   showLastActive,
@@ -178,8 +187,26 @@ export function MembersTable({
             const canResend =
               canManage && !!onResendInvite &&
               (m.inviteStatus === 'pending' || m.inviteStatus === 'expired')
+            const selectable = !!onSelectMember
             return (
-            <tr key={m.id} className={cls.row}>
+            <tr
+              key={m.id}
+              className={selectable ? `${cls.row} ${cls.selectableRow}`.trim() : cls.row}
+              onClick={selectable ? () => onSelectMember!(m.userId) : undefined}
+              onKeyDown={
+                selectable
+                  ? (e) => {
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault()
+                        onSelectMember!(m.userId)
+                      }
+                    }
+                  : undefined
+              }
+              tabIndex={selectable ? 0 : undefined}
+              role={selectable ? 'button' : undefined}
+              aria-label={selectable ? `View ${displayName}` : undefined}
+            >
               <td className={cls.cell}>
                 <div className="flex items-center gap-3">
                   {m.user?.avatarUrl ? (
@@ -228,7 +255,12 @@ export function MembersTable({
                   )}
                 </td>
               )}
-              <td className={tight(cls.cell, cls.tightColumn)}>
+              {/* Role + actions are CONTROLS, not navigation: a click here
+                  must change the member, never also select them. */}
+              <td
+                className={tight(cls.cell, cls.tightColumn)}
+                onClick={(e) => e.stopPropagation()}
+              >
                 {canManage && onChangeRole ? (
                   <RoleSelector
                     value={m.role}
@@ -240,7 +272,10 @@ export function MembersTable({
                 )}
               </td>
               {canManage && (
-                <td className={tight(cls.cell, cls.tightColumn)}>
+                <td
+                  className={tight(cls.cell, cls.tightColumn)}
+                  onClick={(e) => e.stopPropagation()}
+                >
                   <div className={cls.actions}>
                     {canResend && (
                       <button

package/src/components/team/__tests__/member-detail.test.tsx

@@ -0,0 +1,223 @@
+/**
+ * Member detail — "what has this person done" (startsim-768w.19.6 / RED .19.6.1).
+ *
+ * The live foundry Members tab renders rows nobody can drill into. There is no
+ * per-member surface anywhere: last login, activation/invite state, who invited
+ * them, when their role last changed and — the actual question — what they have
+ * DONE are all unanswerable from the UI, even though the backend has recorded
+ * every one of those facts for months.
+ *
+ * THE DESIGN GUARD, stated once: a member's activity is not a new feed. It is
+ * THE one permission-filtered event stream narrowed by actor, so this panel
+ * embeds the shared `ActivityFeedPanel` with a client the host pre-scoped to
+ * that actor. There is no second timeline, no second client and no level check
+ * below this line — packages/ui decides nothing about visibility.
+ */
+import * as fs from 'node:fs'
+import * as path from 'node:path'
+import { render, screen, fireEvent, waitFor, within } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+import { MembersTable, MembersSection, MemberDetailPanel } from '../index'
+import type { MemberRow } from '../types'
+import type { ActivityPage, ActivityQuery } from '../../activity'
+
+// --------------------------------------------------------------------------
+// helpers
+// --------------------------------------------------------------------------
+
+function withQuery(ui: React.ReactElement) {
+  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } })
+  return render(<QueryClientProvider client={qc}>{ui}</QueryClientProvider>)
+}
+
+const activated: MemberRow = {
+  id: 'm1',
+  userId: 'u1',
+  teamId: 'marketing-agents',
+  role: 'admin',
+  joinedAt: '2026-05-02T09:00:00Z',
+  inviteStatus: 'active',
+  lastLoginAt: '2026-07-25T18:30:00Z',
+  activatedAt: '2026-05-03T11:00:00Z',
+  roleChangedAt: '2026-06-14T08:00:00Z',
+  invitedByEmail: 'owner@ogmc.ai',
+  isActive: true,
+  user: { id: 'u1', email: 'nordby@ogmc.ai', firstName: 'Erik', lastName: 'Nordby' },
+}
+
+const neverSignedIn: MemberRow = {
+  id: 'm2',
+  userId: 'u2',
+  teamId: 'marketing-agents',
+  role: 'member',
+  joinedAt: '2026-07-20T00:00:00Z',
+  inviteStatus: 'expired',
+  lastLoginAt: null,
+  inviteExpiresAt: '2026-07-27T00:00:00Z',
+  invitedByEmail: 'owner@ogmc.ai',
+  isActive: true,
+  user: { id: 'u2', email: 'lapsed@ogmc.ai' },
+}
+
+/** An activity client the HOST already narrowed to one actor — exactly what the
+ *  panel receives, and the only reason it needs no filtering of its own. */
+function scopedClient(rows: Array<{ id: string; action: string; created_at: string }>) {
+  const calls: ActivityQuery[] = []
+  return {
+    calls,
+    client: {
+      list: (params: ActivityQuery): Promise<ActivityPage> => {
+        calls.push(params)
+        return Promise.resolve({ count: rows.length, next: null, previous: null, results: rows })
+      },
+    },
+  }
+}
+
+const oneEvent = [
+  { id: 'e1', action: 'member_invited', created_at: '2026-07-25T18:31:00Z' },
+]
+
+// --------------------------------------------------------------------------
+// 1. the panel exists and answers the five questions
+// --------------------------------------------------------------------------
+describe('MemberDetailPanel', () => {
+  it('renders identity, last login, invite state and role history', async () => {
+    const { client } = scopedClient(oneEvent)
+    withQuery(<MemberDetailPanel member={activated} activityClient={client} />)
+
+    expect(screen.getByText('Erik Nordby')).toBeInTheDocument()
+    expect(screen.getByText('nordby@ogmc.ai')).toBeInTheDocument()
+
+    const facts = screen.getByTestId('member-facts')
+    expect(within(facts).getByTestId('fact-last-login')).toHaveTextContent(/2026/)
+    expect(within(facts).getByTestId('fact-activated')).toHaveTextContent(/2026/)
+    expect(within(facts).getByTestId('fact-invited-by')).toHaveTextContent('owner@ogmc.ai')
+    expect(within(facts).getByTestId('fact-role-changed')).toHaveTextContent(/2026/)
+    expect(screen.getByTestId('member-invite-status')).toHaveAttribute(
+      'data-invite-status', 'active',
+    )
+  })
+
+  it('says so explicitly when someone has never signed in', async () => {
+    const { client } = scopedClient([])
+    withQuery(<MemberDetailPanel member={neverSignedIn} activityClient={client} />)
+    expect(screen.getByTestId('fact-last-login')).toHaveTextContent(/never/i)
+  })
+
+  it('embeds the shared activity feed, driven by the injected scoped client', async () => {
+    const { client, calls } = scopedClient(oneEvent)
+    withQuery(<MemberDetailPanel member={activated} activityClient={client} />)
+
+    await waitFor(() => expect(screen.getByTestId('activity-feed-panel')).toBeInTheDocument())
+    await waitFor(() => expect(calls.length).toBeGreaterThan(0))
+    await waitFor(() =>
+      expect(within(screen.getByTestId('activity-timeline')).getByText('Member invited'))
+        .toBeInTheDocument(),
+    )
+  })
+
+  it('offers Resend for a pending/expired member and calls onResendInvite', async () => {
+    const { client } = scopedClient([])
+    const onResendInvite = jest.fn()
+    withQuery(
+      <MemberDetailPanel
+        member={neverSignedIn}
+        activityClient={client}
+        canManage
+        onResendInvite={onResendInvite}
+      />,
+    )
+    fireEvent.click(screen.getByRole('button', { name: /resend invite/i }))
+    expect(onResendInvite).toHaveBeenCalledWith('u2')
+  })
+
+  it('does not offer Resend to someone who has already activated', async () => {
+    const { client } = scopedClient([])
+    withQuery(
+      <MemberDetailPanel
+        member={activated}
+        activityClient={client}
+        canManage
+        onResendInvite={jest.fn()}
+      />,
+    )
+    expect(screen.queryByRole('button', { name: /resend invite/i })).toBeNull()
+  })
+})
+
+// --------------------------------------------------------------------------
+// 2. the roster row is the way in
+// --------------------------------------------------------------------------
+describe('MembersTable selection', () => {
+  it('calls onSelectMember with the user id when a row is clicked', () => {
+    const onSelectMember = jest.fn()
+    render(<MembersTable members={[activated, neverSignedIn]} onSelectMember={onSelectMember} />)
+    fireEvent.click(screen.getByText('nordby@ogmc.ai'))
+    expect(onSelectMember).toHaveBeenCalledWith('u1')
+  })
+
+  it('does not select the row when a row ACTION is clicked', () => {
+    const onSelectMember = jest.fn()
+    const onRemove = jest.fn()
+    render(
+      <MembersTable
+        members={[activated]}
+        canManage
+        onRemove={onRemove}
+        onSelectMember={onSelectMember}
+      />,
+    )
+    fireEvent.click(screen.getByRole('button', { name: /remove/i }))
+    expect(onRemove).toHaveBeenCalledWith('u1')
+    expect(onSelectMember).not.toHaveBeenCalled()
+  })
+
+  it('still renders the Last active column', () => {
+    render(<MembersTable members={[activated, neverSignedIn]} />)
+    expect(screen.getByText('Last active')).toBeInTheDocument()
+    expect(screen.getByText('Never')).toBeInTheDocument()
+  })
+
+  it('MembersSection passes selection through to the table', () => {
+    const onSelectMember = jest.fn()
+    render(<MembersSection members={[activated]} onSelectMember={onSelectMember} />)
+    fireEvent.click(screen.getByText('nordby@ogmc.ai'))
+    expect(onSelectMember).toHaveBeenCalledWith('u1')
+  })
+})
+
+// --------------------------------------------------------------------------
+// 3. DESIGN GUARD — one feed, one client, no visibility logic
+// --------------------------------------------------------------------------
+describe('member detail design guards', () => {
+  const src = () =>
+    fs.readFileSync(
+      path.resolve(__dirname, '..', 'pages', 'MemberDetailPanel.tsx'),
+      'utf8',
+    )
+
+  it('lives in packages/ui beside the other page composers', () => {
+    expect(fs.existsSync(path.resolve(__dirname, '..', 'pages', 'MemberDetailPanel.tsx')))
+      .toBe(true)
+  })
+
+  it('embeds the shared ActivityFeedPanel rather than its own timeline', () => {
+    expect(src()).toMatch(/ActivityFeedPanel/)
+    expect(src()).not.toMatch(/useInfiniteQuery/)
+  })
+
+  it('imports no API client and makes no visibility decision', () => {
+    const text = src()
+    // The client is INJECTED — packages/ui never takes @startsimpli/api as a
+    // dependency. (Naming it in prose is fine; importing it is not.)
+    expect(text).not.toMatch(/from\s+['"]@startsimpli\/api/)
+    for (const banned of [
+      /is_org_admin/, /isOrgAdmin/, /accessLevel/, /resolve_level/,
+      /visible_actions/, /\brole\s*===\s*'owner'/,
+    ]) {
+      expect(`${banned.source}:${banned.test(text)}`).toBe(`${banned.source}:false`)
+    }
+  })
+})

package/src/components/team/members-table-default-class-names.ts

@@ -8,6 +8,8 @@ export interface MembersTableClassNames {
   th?: string
   tbody?: string
   row?: string
+  /** Added to a row when `onSelectMember` makes it a drill-down affordance. */
+  selectableRow?: string
   cell?: string
   avatar?: string
   name?: string
@@ -46,6 +48,7 @@ export const MEMBERS_TABLE_DEFAULTS: Required<MembersTableClassNames> = {
   th: 'px-4 py-2.5 font-medium',
   tbody: 'divide-y divide-border',
   row: 'transition-colors hover:bg-muted/40',
+  selectableRow: 'cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-ring',
   cell: 'px-4 py-3 align-middle',
   avatar:
     'flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold text-primary',