@startsimpli/ui 0.4.82 → 0.4.84

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.82",
+  "version": "0.4.84",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -43,8 +43,8 @@
     "next": "^14.0.0 || ^15.0.0 || ^16.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@startsimpli/auth": "^0.4.31",
-    "@startsimpli/api": "^0.5.51"
+    "@startsimpli/api": "^0.5.52",
+    "@startsimpli/auth": "^0.4.31"
   },
   "peerDependenciesMeta": {
     "@startsimpli/api": {

package/src/components/ActivityTimeline.tsx

@@ -16,18 +16,16 @@ import { ComponentType, ReactNode, useEffect, useMemo, useRef } from 'react';
 import { formatDistanceToNow } from 'date-fns';
 import { Clock, User } from 'lucide-react';
 import { EmptyState } from './states';
+import { ActorIdentity, actorInitials, actorLabel } from './ActorIdentity';
+import type { ActorIdentityValue } from './ActorIdentity';
 
 /** Severity of an entry, for the marker. Presentation only — never a gate. */
 export type ActivityTone = 'ok' | 'warn' | 'error' | 'muted';
 
-/** Who did it. Rendered as an initials chip so a feed shows a person rather
- *  than a bare email string. */
-export interface ActivityTimelineActor {
-  id?: string;
-  name?: string | null;
-  email?: string | null;
-  avatarUrl?: string | null;
-}
+/** Who did it. Rendered by the shared `ActorIdentity` chip, so a feed shows a
+ *  PERSON — name plus the email that pins the name down — and paints it the
+ *  same way every other attributed surface does (startsim-768w.19.8.1). */
+export type ActivityTimelineActor = ActorIdentityValue;
 
 export interface ActivityTimelineItem {
   id: string;
@@ -101,39 +99,6 @@ function defaultFormatTime(date: string): string {
   }
 }
 
-/** "Ada Lovelace" -> "AL"; "ada@x.com" -> "A". Empty when we know nobody. */
-export function actorInitials(actor?: ActivityTimelineActor): string {
-  const name = (actor?.name ?? '').trim();
-  if (name) {
-    return name
-      .split(/\s+/)
-      .slice(0, 2)
-      .map((w) => w[0]?.toUpperCase() ?? '')
-      .join('');
-  }
-  const email = (actor?.email ?? '').trim();
-  return email ? email[0]!.toUpperCase() : '';
-}
-
-function actorName(actor?: ActivityTimelineActor): string {
-  return (actor?.name ?? '').trim() || (actor?.email ?? '').trim();
-}
-
-/**
- * The second half of the identity — the address, when the display name is
- * something else (startsim-768w.19.8).
- *
- * A display name is free text: an account called "QA Foundry" reads exactly
- * like the name of a FOUNDRY, so a correct feed looked to its owner like it was
- * showing another tenant's activity. The email is the unambiguous handle, and
- * it is what turns a name that could be anything into a person. Empty when the
- * name IS the email, because printing it twice is noise.
- */
-function actorHandle(actor?: ActivityTimelineActor): string {
-  const email = (actor?.email ?? '').trim();
-  return email && email !== actorName(actor) ? email : '';
-}
-
 function dayKey(iso: string): string {
   const d = new Date(iso);
   return Number.isNaN(d.getTime()) ? 'unknown' : d.toDateString();
@@ -195,8 +160,7 @@ function TimelineEntry({
     activityColors[activity.type] ||
     (tone ? TONE_MARKER[tone] : undefined) ||
     'bg-muted text-muted-foreground';
-  const who = actorName(activity.actor);
-  const handle = actorHandle(activity.actor);
+  const who = actorLabel(activity.actor);
   // With no icon the marker itself becomes the avatar, so the metadata line
   // shows the name alone rather than the same initials twice.
   const markerIsAvatar = !Icon && !!initials;
@@ -239,17 +203,7 @@ function TimelineEntry({
         </div>
 
         <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-muted-foreground">
-          {who && (
-            <span className="flex flex-wrap items-center gap-x-1.5">
-              {initials && !markerIsAvatar && (
-                <span className="flex h-5 w-5 items-center justify-center rounded-full bg-muted text-[10px] font-medium text-muted-foreground">
-                  {initials}
-                </span>
-              )}
-              <span>{who}</span>
-              {handle && <span className="text-xs text-muted-foreground/80">{handle}</span>}
-            </span>
-          )}
+          <ActorIdentity actor={activity.actor} showInitials={!markerIsAvatar} />
 
           {!who && activity.createdBy && (
             <span className="flex items-center gap-1">

package/src/components/ActorIdentity.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+/**
+ * ActorIdentity — ONE way to say "a person did this" (startsim-768w.19.8.1).
+ *
+ * A display name is FREE TEXT. It is whatever somebody typed into a profile, so
+ * it can read like an org ("QA Foundry" — the name of a different foundry) or
+ * like nobody at all ("Admin User"), and a reader has nothing to check it
+ * against. Alone it is a label, not an identity: the activity feed printing one
+ * is what made a correctly-filtered feed look like cross-tenant contamination
+ * (startsim-768w.19.8), and the run attribution on Deployments/Builds printed
+ * the same string with the same result.
+ *
+ * So the rule, in one place: the NAME and the EMAIL are rendered together when
+ * there is a real name, and the EMAIL ALONE when the name is missing or is just
+ * the address echoed back. Every surface that attributes something to a person
+ * renders this component rather than its own arrangement of the same two
+ * fields (rule #9).
+ */
+
+export interface ActorIdentityValue {
+  id?: string;
+  name?: string | null;
+  email?: string | null;
+  avatarUrl?: string | null;
+}
+
+/** "Ada Lovelace" -> "AL"; "ada@x.com" -> "A". Empty when we know nobody. */
+export function actorInitials(actor?: ActorIdentityValue): string {
+  const name = (actor?.name ?? '').trim();
+  if (name) {
+    return name
+      .split(/\s+/)
+      .slice(0, 2)
+      .map((w) => w[0]?.toUpperCase() ?? '')
+      .join('');
+  }
+  const email = (actor?.email ?? '').trim();
+  return email ? email[0]!.toUpperCase() : '';
+}
+
+/** What to CALL them: the real name, else the address. Empty when we know
+ *  nobody — and an empty label is the signal to render nothing at all, rather
+ *  than a dangling "by". */
+export function actorLabel(actor?: ActorIdentityValue): string {
+  return (actor?.name ?? '').trim() || (actor?.email ?? '').trim();
+}
+
+/** The second half of the identity — the address, when the label is something
+ *  else. Empty when the label already IS the address, because printing it twice
+ *  is noise rather than corroboration. */
+export function actorHandle(actor?: ActorIdentityValue): string {
+  const email = (actor?.email ?? '').trim();
+  return email && email !== actorLabel(actor) ? email : '';
+}
+
+export interface ActorIdentityProps {
+  actor?: ActorIdentityValue;
+  /** Show the initials avatar. Off for a compact one-line attribution, or where
+   *  the surrounding row already paints the same initials. */
+  showInitials?: boolean;
+  className?: string;
+  initialsClassName?: string;
+  handleClassName?: string;
+}
+
+export function ActorIdentity({
+  actor,
+  showInitials = true,
+  className = 'flex flex-wrap items-center gap-x-1.5',
+  initialsClassName = 'flex h-5 w-5 items-center justify-center rounded-full bg-muted text-[10px] font-medium text-muted-foreground',
+  handleClassName = 'text-xs text-muted-foreground/80',
+}: ActorIdentityProps) {
+  const label = actorLabel(actor);
+  if (!label) return null;
+  const initials = showInitials ? actorInitials(actor) : '';
+  const handle = actorHandle(actor);
+
+  return (
+    <span data-testid="actor-identity" className={className}>
+      {initials && <span className={initialsClassName}>{initials}</span>}
+      <span>{label}</span>
+      {handle && <span className={handleClassName}>{handle}</span>}
+    </span>
+  );
+}

package/src/components/__tests__/actor-identity.test.tsx

@@ -0,0 +1,101 @@
+/**
+ * startsim-768w.19.8.1 (RED) — ONE renderer for an attributed identity.
+ *
+ * The activity feed learned in 19.8 that a display name must never stand alone:
+ * it is free text, so an account called "QA Foundry" reads exactly like the name
+ * of a DIFFERENT foundry, and a correct feed then looks like a data leak. The
+ * fix was to carry the email alongside the name.
+ *
+ * The very same string is printed on the Deployments and Builds tabs as run
+ * attribution, where it reads "by Admin User · Jul 27, 4:36 PM" — a name that
+ * identifies nobody, with no handle to check it against. Two surfaces printing
+ * the same identity must not paint it two different ways (rule #9), so the chip
+ * the activity feed already uses is extracted here and both consume it.
+ *
+ * The contract, in one line: NAME + EMAIL when there is a real name, EMAIL ALONE
+ * when the "name" is absent or is just the address echoed back.
+ */
+import { render, screen, within } from '@testing-library/react'
+
+import { ActorIdentity, actorHandle, actorInitials, actorLabel } from '../ActorIdentity'
+import { ActivityTimeline } from '../ActivityTimeline'
+
+describe('actorLabel / actorHandle — a name is never the whole identity', () => {
+  it('keeps the name and the email apart when both are real', () => {
+    const actor = { name: 'Ada Owner', email: 'ada@ogmc.ai' }
+    expect(actorLabel(actor)).toBe('Ada Owner')
+    expect(actorHandle(actor)).toBe('ada@ogmc.ai')
+  })
+
+  it('falls back to the email when there is no real name', () => {
+    const actor = { name: '', email: 'ops@ogmc.ai' }
+    expect(actorLabel(actor)).toBe('ops@ogmc.ai')
+    // ...and does NOT then print the same address twice
+    expect(actorHandle(actor)).toBe('')
+  })
+
+  it('drops a name that is only the email echoed back', () => {
+    const actor = { name: 'ops@ogmc.ai', email: 'ops@ogmc.ai' }
+    expect(actorLabel(actor)).toBe('ops@ogmc.ai')
+    expect(actorHandle(actor)).toBe('')
+  })
+
+  it('knows nobody when it is handed nobody', () => {
+    expect(actorLabel(undefined)).toBe('')
+    expect(actorLabel({ name: null, email: null })).toBe('')
+    expect(actorInitials({ name: 'Ada Owner' })).toBe('AO')
+    expect(actorInitials({ email: 'ops@ogmc.ai' })).toBe('O')
+  })
+})
+
+describe('<ActorIdentity>', () => {
+  it('renders the person AND the handle that pins them down', () => {
+    render(<ActorIdentity actor={{ name: 'Admin User', email: 'admin@ogmc.ai' }} />)
+    const chip = within(screen.getByTestId('actor-identity'))
+    expect(chip.getByText('Admin User')).toBeInTheDocument()
+    expect(chip.getByText('admin@ogmc.ai')).toBeInTheDocument()
+  })
+
+  it('renders the email alone when there is no name — never an empty "by"', () => {
+    render(<ActorIdentity actor={{ name: '', email: 'ops@ogmc.ai' }} />)
+    const chip = screen.getByTestId('actor-identity')
+    expect(chip).toHaveTextContent('ops@ogmc.ai')
+    // one occurrence, not the address printed twice
+    expect(chip.textContent!.match(/ops@ogmc\.ai/g)).toHaveLength(1)
+  })
+
+  it('renders nothing at all when there is nobody to attribute', () => {
+    const { container } = render(<ActorIdentity actor={{ name: null, email: null }} />)
+    expect(container).toBeEmptyDOMElement()
+    expect(screen.queryByTestId('actor-identity')).toBeNull()
+  })
+
+  it('can drop the initials avatar for a compact one-line attribution', () => {
+    render(<ActorIdentity actor={{ name: 'Ada Owner', email: 'ada@ogmc.ai' }} showInitials={false} />)
+    const chip = screen.getByTestId('actor-identity')
+    expect(chip).toHaveTextContent('Ada Owner')
+    expect(within(chip).queryByText('AO')).toBeNull()
+  })
+})
+
+describe('the activity feed renders the SAME chip', () => {
+  it('still shows the person and the email on a timeline row', () => {
+    render(
+      <ActivityTimeline
+        activities={[
+          {
+            id: 'ev-1',
+            type: 'member_invited',
+            title: 'Member invited',
+            occurredAt: '2026-07-27T16:36:00Z',
+            actor: { name: 'QA Foundry', email: 'qa-foundry@startsimpli.com' },
+          },
+        ]}
+      />,
+    )
+    const row = within(document.querySelector('[data-activity-id="ev-1"]') as HTMLElement)
+    const chip = within(row.getByTestId('actor-identity'))
+    expect(chip.getByText('QA Foundry')).toBeInTheDocument()
+    expect(chip.getByText('qa-foundry@startsimpli.com')).toBeInTheDocument()
+  })
+})

package/src/components/activity/__tests__/activity-resend-pill.test.tsx

@@ -0,0 +1,70 @@
+/**
+ * startsim-768w.19.8.1 — the resend pill, verified on the SURFACE, not just in
+ * the mapper.
+ *
+ * `activityNote()` was added in startsim-768w.19.8 so a re-sent invite stops
+ * reading as a second, duplicate invite. Its unit coverage asserted the mapper;
+ * nobody could confirm the pill actually reaches the DOM of the panel a user
+ * looks at, because on the live feed the resend rows sit below the fold. This
+ * drives the real `ActivityFeedPanel` — the same component the Activity tab
+ * renders — over two invites for the same person, and asserts the second one
+ * carries a visible "resend" while the first does not.
+ */
+import { render, screen, within } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+import { ActivityFeedPanel, type ActivityEvent } from '../index'
+
+function inviteRow(over: Partial<ActivityEvent> & { id: string }): ActivityEvent {
+  return {
+    action: 'member_invited',
+    type: 'member_invited',
+    target_type: 'membership',
+    target_id: 'dc0d739f-a622-431d-beb2-de169acda594',
+    metadata: { email: 'nordby@ogmc.ai', role: 'admin' },
+    actor: { id: 'u-1', email: 'qa-foundry@startsimpli.com', name: '' },
+    actor_email: 'qa-foundry@startsimpli.com',
+    state: null,
+    previous_state: null,
+    source: 'control_plane',
+    reason: '',
+    error: '',
+    run_id: '',
+    run_kind: '',
+    created_at: '2026-07-21T12:00:00Z',
+    ...over,
+  }
+}
+
+const RESEND = inviteRow({
+  id: 'ev-resend',
+  metadata: { email: 'nordby@ogmc.ai', role: 'admin', resend: true },
+  created_at: '2026-07-22T12:00:00Z',
+})
+const ORIGINAL = inviteRow({ id: 'ev-original' })
+
+function renderPanel(results: ActivityEvent[]) {
+  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } })
+  const client = {
+    list: jest.fn().mockResolvedValue({ count: results.length, next: null, previous: null, results }),
+  }
+  render(
+    <QueryClientProvider client={qc}>
+      <ActivityFeedPanel client={client} />
+    </QueryClientProvider>,
+  )
+}
+
+describe('a resent invite is visibly not a duplicate', () => {
+  it('renders the resend pill on the panel a user actually looks at', async () => {
+    renderPanel([RESEND, ORIGINAL])
+
+    const resendRow = (await screen.findByText('resend')).closest('[data-activity-id]')
+    expect(resendRow).toHaveAttribute('data-activity-id', 'ev-resend')
+
+    const original = document.querySelector('[data-activity-id="ev-original"]') as HTMLElement
+    expect(within(original).queryByText('resend')).toBeNull()
+    // both still name the invitee rather than the UUID they carry
+    expect(within(original).getByText('nordby@ogmc.ai')).toBeInTheDocument()
+  })
+})

package/src/components/index.ts

@@ -153,8 +153,14 @@ export * from './pipeline'
 // Calendar (month/week/day event grid wrapping react-big-calendar)
 export * from './calendar'
 
+// Attributed identity — the ONE chip every "who did this" surface renders, so a
+// display name is never printed alone as if it were an identity
+// (startsim-768w.19.8.1).
+export { ActorIdentity, actorInitials, actorLabel, actorHandle } from './ActorIdentity'
+export type { ActorIdentityProps, ActorIdentityValue } from './ActorIdentity'
+
 // Activity components (timeline, quick log, log dialog)
-export { ActivityTimeline, actorInitials, dayHeading } from './ActivityTimeline'
+export { ActivityTimeline, dayHeading } from './ActivityTimeline'
 export type {
   ActivityTimelineProps,
   ActivityTimelineItem,

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',

package/src/components/team/pages/MemberDetailPanel.tsx

@@ -0,0 +1,221 @@
+'use client'
+
+/**
+ * MemberDetailPanel — "what has this person done" (startsim-768w.19.6).
+ *
+ * THE PAGE-LEVEL COMPOSER for one member, beside TeamSettingsPage /
+ * DomainsSettingsPage (rule #9): identity header, the facts row (last login /
+ * activated / invited by / role last changed), the invite state with a Resend
+ * affordance while it is pending or expired, and that person's own activity.
+ * An app supplies a member row, an actor-scoped activity client and its theme
+ * classNames — nothing else.
+ *
+ * THE DESIGN, in one line: 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 already scoped
+ * (`(p) => api.foundry.activity(slug, { ...p, actor: userId })`). There is no
+ * second timeline, no second client, and no level check anywhere below this
+ * line — visibility was decided by the endpoint, and a row that arrives is
+ * rendered. Registering a new event type needs zero changes here.
+ *
+ * CLIENT-INJECTED, like every other composer in this package, which is what
+ * keeps @startsimpli/api out of packages/ui.
+ */
+
+import * as React from 'react'
+import { ActivityFeedPanel } from '../../activity/ActivityFeedPanel'
+import type { ActivityClient } from '../../activity/types'
+import { userDisplayName, userInitials, type MemberRow, type TeamRole } from '../types'
+import {
+  MEMBER_DETAIL_PANEL_DEFAULTS,
+  type MemberDetailPanelClassNames,
+} from './member-detail-panel-default-class-names'
+
+export interface MemberDetailPanelProps {
+  /** The member's facts, as the roster/detail endpoint reported them. */
+  member: MemberRow
+  /**
+   * THE activity stream, already narrowed to this actor by the host. The panel
+   * neither adds nor removes rows — the endpoint decided what this viewer sees.
+   */
+  activityClient: ActivityClient
+  /** Cache namespace, e.g. `['foundry', slug, 'member', userId, 'activity']`. */
+  activityQueryKey?: readonly unknown[]
+  /** Expose management affordances (currently: resend invite). */
+  canManage?: boolean
+  /** Re-send the set-password link. Offered on pending/expired members only. */
+  onResendInvite?: (userId: string) => void | Promise<void>
+  /** Disable the resend button while a request is in flight. */
+  isResending?: boolean
+  /** Failure line under the invite row — e.g. "they already set a password". */
+  error?: React.ReactNode
+  /** Copy for the embedded feed, so a host can name the surface. */
+  activityTitle?: React.ReactNode
+  activityDescription?: React.ReactNode
+  activityEmptyTitle?: string
+  activityEmptyDescription?: string
+  /** Poll interval for the embedded feed. Off by default. */
+  activityRefetchInterval?: number | false
+  classNames?: MemberDetailPanelClassNames
+}
+
+const ROLE_LABEL: Record<TeamRole, string> = {
+  owner: 'Owner',
+  admin: 'Admin',
+  member: 'Member',
+  viewer: 'Viewer',
+}
+
+type RowStatus = 'active' | 'pending' | 'expired' | 'deactivated'
+
+const STATUS_LABEL: Record<RowStatus, string> = {
+  active: 'Active',
+  pending: 'Invite pending',
+  expired: 'Invite expired',
+  deactivated: 'Deactivated',
+}
+
+/** A deactivated membership outranks whatever the invite says — it is the
+ *  reason this person has no access right now. */
+function rowStatus(m: MemberRow): RowStatus {
+  if (m.isActive === false) return 'deactivated'
+  return m.inviteStatus ?? 'active'
+}
+
+/** Absolute date + time, not "3 days ago": an owner deciding whether to resend
+ *  an invite or chase a dormant account wants the actual moment. */
+function formatWhen(iso?: string | null): string | null {
+  if (!iso) return null
+  const d = new Date(iso)
+  if (Number.isNaN(d.getTime())) return iso
+  return d.toLocaleString(undefined, {
+    month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: '2-digit',
+  })
+}
+
+export function MemberDetailPanel({
+  member,
+  activityClient,
+  activityQueryKey = ['member-activity'],
+  canManage = false,
+  onResendInvite,
+  isResending = false,
+  error,
+  activityTitle = 'Activity',
+  activityDescription = 'What this person has done here, newest first.',
+  activityEmptyTitle = 'Nothing recorded yet',
+  activityEmptyDescription = 'Actions this person takes here will show up in this list.',
+  activityRefetchInterval = false,
+  classNames,
+}: MemberDetailPanelProps) {
+  const cls = { ...MEMBER_DETAIL_PANEL_DEFAULTS, ...(classNames ?? {}) }
+  const status = rowStatus(member)
+  const statusClass: Record<RowStatus, string> = {
+    active: cls.statusActive,
+    pending: cls.statusPending,
+    expired: cls.statusExpired,
+    deactivated: cls.statusDeactivated,
+  }
+  const displayName = userDisplayName(member.user) || member.userId
+  const secondary =
+    member.user?.email && member.user.email !== displayName ? member.user.email : null
+  const canResend =
+    canManage && !!onResendInvite && (status === 'pending' || status === 'expired')
+
+  /** One labelled fact. An absent value renders an explicit sentence rather
+   *  than a blank: "never signed in" is an ANSWER, and the whole complaint this
+   *  panel exists for was surfaces that said nothing at all. */
+  const fact = (testId: string, label: string, value: string | null, empty: string) => (
+    <div className={cls.fact} data-testid={testId}>
+      <p className={cls.factLabel}>{label}</p>
+      <p className={value ? cls.factValue : cls.factEmpty} title={value ?? empty}>
+        {value ?? empty}
+      </p>
+    </div>
+  )
+
+  return (
+    <div className={cls.root} data-testid="member-detail-panel">
+      <div className={cls.header}>
+        <div className={cls.identity}>
+          {member.user?.avatarUrl ? (
+            <img
+              src={member.user.avatarUrl}
+              alt=""
+              className={cls.avatar}
+              style={{ objectFit: 'cover' }}
+            />
+          ) : (
+            <span className={cls.avatar} aria-hidden="true">{userInitials(member.user)}</span>
+          )}
+          <div className="flex min-w-0 flex-col">
+            <h2 className={cls.name}>{displayName}</h2>
+            {secondary && <span className={cls.email}>{secondary}</span>}
+          </div>
+        </div>
+        <div className={cls.badges}>
+          <span className={cls.roleBadge}>{ROLE_LABEL[member.role]}</span>
+          <span
+            className={`${cls.statusBadge} ${statusClass[status]}`.trim()}
+            data-testid="member-invite-status"
+            data-invite-status={status}
+          >
+            {STATUS_LABEL[status]}
+          </span>
+        </div>
+      </div>
+
+      <div className={cls.facts} data-testid="member-facts">
+        {fact('fact-last-login', 'Last signed in',
+          formatWhen(member.lastLoginAt), 'Never signed in')}
+        {fact('fact-activated', 'Joined',
+          formatWhen(member.activatedAt ?? member.joinedAt), 'Not yet')}
+        {fact('fact-invited-by', 'Invited by', member.invitedByEmail ?? null, 'No record')}
+        {fact('fact-role-changed', 'Role last changed',
+          formatWhen(member.roleChangedAt), 'Never changed')}
+      </div>
+
+      {(status === 'pending' || status === 'expired') && (
+        <div className={cls.inviteRow}>
+          <span className={cls.inviteNote}>
+            {status === 'expired'
+              ? `This invite expired${
+                  formatWhen(member.inviteExpiresAt) ? ` on ${formatWhen(member.inviteExpiresAt)}` : ''
+                } — they can no longer use the link they were sent.`
+              : `Invite sent${
+                  formatWhen(member.inviteExpiresAt) ? `, expires ${formatWhen(member.inviteExpiresAt)}` : ''
+                } — they haven't set a password yet.`}
+          </span>
+          {canResend && (
+            <button
+              type="button"
+              className={cls.resendButton}
+              disabled={isResending}
+              onClick={() => onResendInvite!(member.userId)}
+            >
+              {isResending ? 'Sending…' : 'Resend invite'}
+            </button>
+          )}
+        </div>
+      )}
+
+      {error && <p className={cls.inviteNote}>{error}</p>}
+
+      <div className={cls.activity}>
+        <ActivityFeedPanel
+          client={activityClient}
+          queryKey={activityQueryKey}
+          refetchInterval={activityRefetchInterval}
+          title={activityTitle}
+          description={activityDescription}
+          // The feed is ALREADY narrowed to one actor by the injected client, so
+          // an actor picker here would only offer to contradict it.
+          showFilters={false}
+          emptyTitle={activityEmptyTitle}
+          emptyDescription={activityEmptyDescription}
+          classNames={classNames?.activityPanel}
+        />
+      </div>
+    </div>
+  )
+}

package/src/components/team/pages/index.ts

@@ -20,6 +20,16 @@ export type {
 } from './domains-settings-page-default-class-names'
 export { DOMAINS_SETTINGS_PAGE_DEFAULTS } from './domains-settings-page-default-class-names'
 
+// "What has this person done" — one member's facts plus their slice of THE one
+// permission-filtered event stream (startsim-768w.19.6). The activity client is
+// injected already narrowed to that actor; this composer adds no feed of its own.
+export { MemberDetailPanel } from './MemberDetailPanel'
+export type { MemberDetailPanelProps } from './MemberDetailPanel'
+export type {
+  MemberDetailPanelClassNames,
+} from './member-detail-panel-default-class-names'
+export { MEMBER_DETAIL_PANEL_DEFAULTS } from './member-detail-panel-default-class-names'
+
 export type {
   TeamSettingsApi,
   DomainsSettingsApi,

package/src/components/team/pages/member-detail-panel-default-class-names.ts

@@ -0,0 +1,68 @@
+/** Default Tailwind classes for {@link MemberDetailPanel}. startsim-768w.19.6.
+ *  Semantic tokens only (startsim-1f3n) — theme-driven, dark-mode safe. */
+import type { ActivityFeedPanelClassNames } from '../../activity/activity-feed-panel-default-class-names'
+
+export interface MemberDetailPanelClassNames {
+  root?: string
+  /** Identity header: avatar + name + email + role/status pills. */
+  header?: string
+  identity?: string
+  avatar?: string
+  name?: string
+  email?: string
+  badges?: string
+  roleBadge?: string
+  statusBadge?: string
+  /** Per-state colour of the invite pill — an expired invite is an action item. */
+  statusActive?: string
+  statusPending?: string
+  statusExpired?: string
+  statusDeactivated?: string
+  /** The facts grid: last login / activated / invited by / role changed. */
+  facts?: string
+  fact?: string
+  factLabel?: string
+  factValue?: string
+  /** Muted rendering for a fact that has no value yet ("Never signed in"). */
+  factEmpty?: string
+  /** Row holding the invite callout + its Resend action. */
+  inviteRow?: string
+  inviteNote?: string
+  resendButton?: string
+  /** Wrapper around the embedded activity feed. */
+  activity?: string
+  /** Forwarded so an app still overrides one map. */
+  activityPanel?: ActivityFeedPanelClassNames
+}
+
+export const MEMBER_DETAIL_PANEL_DEFAULTS: Required<
+  Omit<MemberDetailPanelClassNames, 'activityPanel'>
+> = {
+  root: 'space-y-5',
+  header: 'flex flex-wrap items-start justify-between gap-4',
+  identity: 'flex min-w-0 items-center gap-3',
+  avatar:
+    'flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-primary/10 text-sm font-semibold text-primary',
+  name: 'truncate text-lg font-semibold text-foreground',
+  email: 'truncate text-sm text-muted-foreground',
+  badges: 'flex flex-wrap items-center gap-2',
+  roleBadge:
+    'inline-flex items-center rounded-full border border-border bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground',
+  statusBadge:
+    'inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-xs font-medium',
+  statusActive: 'border-border bg-muted text-muted-foreground',
+  statusPending: 'border-primary/30 bg-primary/10 text-primary',
+  statusExpired: 'border-destructive/40 bg-destructive/10 text-destructive',
+  statusDeactivated: 'border-border bg-muted/60 text-muted-foreground line-through',
+  facts: 'grid gap-4 rounded-lg border border-border bg-muted/30 p-4 sm:grid-cols-2',
+  fact: 'min-w-0 space-y-1',
+  factLabel: 'text-xs uppercase tracking-wide text-muted-foreground',
+  factValue: 'truncate text-sm text-foreground',
+  factEmpty: 'truncate text-sm text-muted-foreground/70',
+  inviteRow:
+    'flex flex-wrap items-center justify-between gap-3 rounded-lg border border-border bg-card px-4 py-3',
+  inviteNote: 'text-sm text-muted-foreground',
+  resendButton:
+    'rounded-md border border-border px-2.5 py-1.5 text-xs text-muted-foreground transition-colors hover:border-primary/40 hover:bg-primary/10 hover:text-primary disabled:opacity-50',
+  activity: '',
+}

package/src/components/team/types.ts

@@ -62,6 +62,16 @@ export interface MemberRow {
   invitedByEmail?: string | null
   /** False for a membership that has been deactivated but not removed. */
   isActive?: boolean
+  /**
+   * When this person actually joined — read off the recorded activation event,
+   * not recomputed from "do they have a password yet" (startsim-768w.19.2).
+   * Null for anyone still holding an unused invite.
+   */
+  activatedAt?: string | null
+  /** When their role was last changed after they joined. Null if never. */
+  roleChangedAt?: string | null
+  /** When the membership was suspended; null while active. */
+  deactivatedAt?: string | null
 }
 
 export interface InvitationLite {