@startsimpli/ui 0.4.83 → 0.4.84

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.83",
+  "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/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 {