@startsimpli/ui 0.4.75 → 0.4.77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.75",
+  "version": "0.4.77",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -42,8 +42,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/api": "^0.5.46",
-    "@startsimpli/auth": "^0.4.31"
+    "@startsimpli/auth": "^0.4.31",
+    "@startsimpli/api": "^0.5.46"
   },
   "peerDependenciesMeta": {
     "@startsimpli/api": {

package/src/components/team/MembersSection.tsx

@@ -0,0 +1,134 @@
+'use client'
+
+/**
+ * MembersSection — the page-level members composer (startsim-768w.19.2).
+ *
+ * The whole "who is on this thing" surface in one place: the count line, the
+ * invite dialog, the lifecycle-aware table (active / invite pending / invite
+ * EXPIRED + last active + resend) and the failure line. An app supplies data +
+ * handlers + its own className slots; it does not re-assemble the layout, and
+ * it never re-implements the pending/expired presentation (rule #9 — shared
+ * code ships the page composer, not just the primitive).
+ *
+ * Presentational on purpose: no data client, no react-query. The caller owns
+ * fetching and mutation, which keeps this usable from the foundry control
+ * panel, /settings/team and any harness.
+ */
+
+import * as React from 'react'
+import { MembersTable } from './MembersTable'
+import { InviteMemberDialog } from './InviteMemberDialog'
+import type { InvitationLite, MemberRow, TeamRole } from './types'
+import {
+  MEMBERS_SECTION_DEFAULTS,
+  type MembersSectionClassNames,
+} from './members-section-default-class-names'
+
+export interface MembersSectionProps {
+  members: MemberRow[]
+  /** Scope the invite dialog submits against (team id / foundry slug). */
+  teamId?: string
+  canManage?: boolean
+  currentUserId?: string
+  isLoading?: boolean
+  /** Failure line under the table — e.g. the backend's last-owner rejection. */
+  error?: React.ReactNode
+  onChangeRole?: (userId: string, role: TeamRole) => void | Promise<void>
+  onRemove?: (userId: string) => void | Promise<void>
+  onResendInvite?: (userId: string) => void | Promise<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
+  /** Roles offered in the row selector / in the invite dialog. */
+  availableRoles?: TeamRole[]
+  inviteRoles?: TeamRole[]
+  defaultInviteRole?: TeamRole
+  /** Header copy. `description` receives the member count. */
+  title?: string
+  description?: (count: number) => React.ReactNode
+  /** Set false when the host already renders a card header. */
+  showHeader?: boolean
+  inviteLabel?: string
+  inviteTitle?: string
+  inviteSubmitLabel?: string
+  inviteSuccessMessage?: (email: string) => string
+  emptyState?: React.ReactNode
+  helpText?: React.ReactNode
+  classNames?: MembersSectionClassNames
+}
+
+const defaultDescription = (count: number) =>
+  `${count} ${count === 1 ? 'person has' : 'people have'} access.`
+
+export function MembersSection({
+  members,
+  teamId = '',
+  canManage = false,
+  currentUserId,
+  isLoading = false,
+  error,
+  onChangeRole,
+  onRemove,
+  onResendInvite,
+  onInvite,
+  onInvited,
+  availableRoles,
+  inviteRoles,
+  defaultInviteRole = 'member',
+  title = 'Members',
+  description = defaultDescription,
+  showHeader = true,
+  inviteLabel = 'Add member',
+  inviteTitle = 'Add someone to this workspace',
+  inviteSubmitLabel = 'Add member',
+  inviteSuccessMessage = (email) => `Invite sent to ${email} — they'll set a password and join`,
+  emptyState,
+  helpText,
+  classNames,
+}: MembersSectionProps) {
+  const cls = { ...MEMBERS_SECTION_DEFAULTS, ...(classNames ?? {}) }
+
+  return (
+    <div className={cls.root}>
+      {showHeader && (
+        <div className={cls.header}>
+          <div className={cls.heading}>
+            <h2 className={cls.title}>{title}</h2>
+            <p className={cls.description}>
+              {isLoading ? 'Loading members…' : description(members.length)}
+            </p>
+          </div>
+          {canManage && onInvite && (
+            <InviteMemberDialog
+              teamId={teamId}
+              availableRoles={inviteRoles}
+              defaultRole={defaultInviteRole}
+              triggerLabel={inviteLabel}
+              title={inviteTitle}
+              submitLabel={inviteSubmitLabel}
+              successMessage={inviteSuccessMessage}
+              onSubmit={onInvite}
+              onInvited={onInvited}
+              classNames={classNames?.inviteDialog}
+            />
+          )}
+        </div>
+      )}
+      <div className={cls.body}>
+        <MembersTable
+          members={members}
+          canManage={canManage}
+          currentUserId={currentUserId}
+          availableRoles={availableRoles}
+          onChangeRole={onChangeRole}
+          onRemove={onRemove}
+          onResendInvite={onResendInvite}
+          emptyState={emptyState}
+          classNames={classNames?.table}
+        />
+        {error && <p className={cls.errorText}>{error}</p>}
+        {helpText && <p className={cls.helpText}>{helpText}</p>}
+      </div>
+    </div>
+  )
+}

package/src/components/team/MembersTable.tsx

@@ -2,8 +2,17 @@
 
 /**
  * MembersTable — headless members list. Renders avatar + name + email +
- * role badge + actions per row. When `canManage` is true the row shows a
- * RoleSelector (calls onChangeRole) + a Remove button (calls onRemove).
+ * lifecycle status + last active + role badge + actions per row. When
+ * `canManage` is true the row shows a RoleSelector (calls onChangeRole), a
+ * Resend-invite button for anyone who hasn't activated (calls onResendInvite)
+ * and a Remove button (calls onRemove).
+ *
+ * The Status and Last-active columns appear only when the rows actually carry
+ * that data, so a consumer whose API doesn't report it is unchanged. Before
+ * they existed, the foundry control panel expressed "pending" by CONCATENATING
+ * "· invited — hasn't set password" into the email string, an invite that had
+ * expired was indistinguishable from one sent a minute ago, and there was no
+ * way to resend (startsim-768w.19.2).
  *
  * Pagination is intentionally absent — the backend endpoint at
  * /api/v1/teams/{id}/members returns the full list. SSP support is a
@@ -32,8 +41,19 @@ export interface MembersTableProps {
   canManage?: boolean
   onChangeRole?: (userId: string, role: TeamRole) => void | Promise<void>
   onRemove?: (userId: string) => void | Promise<void>
+  /**
+   * Re-send the set-password invite. Offered on pending/expired rows only, and
+   * only alongside `canManage` — an expired invite is otherwise a dead end.
+   */
+  onResendInvite?: (userId: string) => void | Promise<void>
   /** Custom empty-state slot. Defaults to a generic "No members yet" cell. */
   emptyState?: React.ReactNode
+  /**
+   * Force the lifecycle columns on/off. Default: shown when any row carries the
+   * data, so consumers whose API doesn't report it render exactly as before.
+   */
+  showStatus?: boolean
+  showLastActive?: boolean
   classNames?: MembersTableClassNames
   /** Restrict role-selector options (e.g. hide 'owner' when caller isn't owner). */
   availableRoles?: TeamRole[]
@@ -52,17 +72,64 @@ const ROLE_LABEL: Record<TeamRole, string> = {
   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 | null {
+  if (m.isActive === false) return 'deactivated'
+  return m.inviteStatus ?? null
+}
+
+/** Short absolute date. Absolute, not "3 days ago": an owner deciding whether to
+ *  resend an invite wants the actual day. */
+function formatDate(iso: string): string {
+  try {
+    const d = new Date(iso)
+    if (Number.isNaN(d.getTime())) return iso
+    return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })
+  } catch {
+    return iso
+  }
+}
+
+function statusTitle(m: MemberRow, status: RowStatus): string | undefined {
+  if (!m.inviteExpiresAt || status === 'active' || status === 'deactivated') return undefined
+  return status === 'expired'
+    ? `Invite expired ${formatDate(m.inviteExpiresAt)}`
+    : `Invite expires ${formatDate(m.inviteExpiresAt)}`
+}
+
 export function MembersTable({
   members,
   canManage = false,
   onChangeRole,
   onRemove,
+  onResendInvite,
   emptyState,
+  showStatus,
+  showLastActive,
   classNames,
   availableRoles,
   currentUserId,
 }: MembersTableProps) {
   const cls = { ...MEMBERS_TABLE_DEFAULTS, ...(classNames ?? {}) }
+  const withStatus = showStatus ?? members.some((m) => rowStatus(m) !== null)
+  const withLastActive = showLastActive ?? members.some((m) => m.lastLoginAt !== undefined)
+  const statusClass: Record<RowStatus, string> = {
+    active: cls.statusActive,
+    pending: cls.statusPending,
+    expired: cls.statusExpired,
+    deactivated: cls.statusDeactivated,
+  }
+  const columnCount = 2 + (withStatus ? 1 : 0) + (withLastActive ? 1 : 0) + (canManage ? 1 : 0)
   // Role + actions hug their content so the Member column takes the slack —
   // one shared cell class used to split the table down the middle and leave
   // the controls floating in a gap.
@@ -74,6 +141,12 @@ export function MembersTable({
         <thead className={cls.thead}>
           <tr className={cls.headerRow}>
             <th className={cls.th} scope="col">Member</th>
+            {withStatus && (
+              <th className={tight(cls.th, cls.tightColumn)} scope="col">Status</th>
+            )}
+            {withLastActive && (
+              <th className={tight(cls.th, cls.tightColumn)} scope="col">Last active</th>
+            )}
             <th className={tight(cls.th, cls.tightColumn)} scope="col">Role</th>
             {canManage && (
               <th className={tight(cls.th, cls.tightColumn)} scope="col" aria-label="Actions" />
@@ -83,7 +156,7 @@ export function MembersTable({
         <tbody className={cls.tbody}>
           {members.length === 0 && (
             <tr>
-              <td className={cls.emptyRow} colSpan={canManage ? 3 : 2}>
+              <td className={cls.emptyRow} colSpan={columnCount}>
                 {emptyState ?? 'No members yet.'}
               </td>
             </tr>
@@ -94,6 +167,10 @@ export function MembersTable({
             // email underneath stacked the same string on itself.
             const secondary = m.user?.email && m.user.email !== displayName ? m.user.email : null
             const isSelf = !!currentUserId && m.userId === currentUserId
+            const status = rowStatus(m)
+            const canResend =
+              canManage && !!onResendInvite &&
+              (m.inviteStatus === 'pending' || m.inviteStatus === 'expired')
             return (
             <tr key={m.id} className={cls.row}>
               <td className={cls.cell}>
@@ -116,9 +193,34 @@ export function MembersTable({
                       {isSelf && <span className={cls.selfBadge}>You</span>}
                     </span>
                     {secondary && <span className={cls.email}>{secondary}</span>}
+                    {m.invitedByEmail && status !== 'active' && (
+                      <span className={cls.invitedBy}>Invited by {m.invitedByEmail}</span>
+                    )}
                   </div>
                 </div>
               </td>
+              {withStatus && (
+                <td className={tight(cls.cell, cls.tightColumn)}>
+                  {status && (
+                    <span
+                      className={tight(cls.statusBadge, statusClass[status])}
+                      data-invite-status={status}
+                      title={statusTitle(m, status)}
+                    >
+                      {STATUS_LABEL[status]}
+                    </span>
+                  )}
+                </td>
+              )}
+              {withLastActive && (
+                <td className={tight(cls.cell, cls.tightColumn)}>
+                  {m.lastLoginAt ? (
+                    <span className={cls.lastActive}>{formatDate(m.lastLoginAt)}</span>
+                  ) : (
+                    <span className={cls.lastActiveEmpty}>Never</span>
+                  )}
+                </td>
+              )}
               <td className={tight(cls.cell, cls.tightColumn)}>
                 {canManage && onChangeRole ? (
                   <RoleSelector
@@ -133,6 +235,15 @@ export function MembersTable({
               {canManage && (
                 <td className={tight(cls.cell, cls.tightColumn)}>
                   <div className={cls.actions}>
+                    {canResend && (
+                      <button
+                        type="button"
+                        className={cls.resendButton}
+                        onClick={() => onResendInvite!(m.userId)}
+                      >
+                        Resend invite
+                      </button>
+                    )}
                     {onRemove && (
                       <button
                         type="button"

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

@@ -0,0 +1,127 @@
+/**
+ * Member lifecycle in the members list (startsim-768w.19.2 / RED .19.2.1).
+ *
+ * The live foundry Members tab renders bare rows —
+ * `nordby@ogmc.ai · invited — hasn't set password` + a Role dropdown + Remove.
+ * The pending note is CONCATENATED INTO THE EMAIL STRING, there is no notion of
+ * an invite that has EXPIRED (so a 7-day-lapsed invite looks identical to one
+ * sent a minute ago, forever), there is no last-active column, and there is no
+ * way to resend. These tests fail until MembersTable renders the real tri-state
+ * and offers a resend affordance.
+ */
+
+import { render, screen, fireEvent } from '@testing-library/react'
+import { MembersTable, MembersSection } from '../index'
+import type { MemberRow } from '../types'
+
+const rows: MemberRow[] = [
+  {
+    id: 'm1',
+    userId: 'u1',
+    teamId: 'foundry-slug',
+    role: 'owner',
+    joinedAt: '2026-01-01T00:00:00Z',
+    inviteStatus: 'active',
+    lastLoginAt: '2026-07-20T10:00:00Z',
+    user: { id: 'u1', email: 'owner@ogmc.ai' },
+  },
+  {
+    id: 'm2',
+    userId: 'u2',
+    teamId: 'foundry-slug',
+    role: 'member',
+    joinedAt: '2026-07-20T00:00:00Z',
+    inviteStatus: 'pending',
+    lastLoginAt: null,
+    inviteExpiresAt: '2026-08-01T00:00:00Z',
+    invitedByEmail: 'owner@ogmc.ai',
+    user: { id: 'u2', email: 'fresh@ogmc.ai' },
+  },
+  {
+    id: 'm3',
+    userId: 'u3',
+    teamId: 'foundry-slug',
+    role: 'member',
+    joinedAt: '2026-01-05T00:00:00Z',
+    inviteStatus: 'expired',
+    lastLoginAt: null,
+    inviteExpiresAt: '2026-01-12T00:00:00Z',
+    user: { id: 'u3', email: 'nordby@ogmc.ai' },
+  },
+]
+
+const pill = (status: string) =>
+  document.querySelector(`[data-invite-status="${status}"]`)
+
+describe('MembersTable — invite lifecycle', () => {
+  it('renders a status pill per row and marks an expired invite distinctly', () => {
+    render(<MembersTable members={rows} />)
+    expect(pill('active')).not.toBeNull()
+    expect(pill('pending')).not.toBeNull()
+    const expired = pill('expired')
+    expect(expired).not.toBeNull()
+    // the expired invite must NOT look like the fresh one
+    expect(expired!.className).not.toEqual(pill('pending')!.className)
+    expect(screen.getByText(/expired/i)).toBeInTheDocument()
+  })
+
+  it('keeps the invite note out of the email string', () => {
+    render(<MembersTable members={rows} />)
+    expect(screen.getByText('nordby@ogmc.ai')).toBeInTheDocument()
+    expect(screen.queryByText(/hasn't set password/i)).not.toBeInTheDocument()
+  })
+
+  it('renders a last-active column with Never for someone who never signed in', () => {
+    render(<MembersTable members={rows} />)
+    expect(screen.getByText('Last active')).toBeInTheDocument()
+    expect(screen.getAllByText('Never').length).toBe(2)
+  })
+
+  it('offers resend on a pending/expired invite and calls it with the user id', () => {
+    const onResendInvite = jest.fn()
+    render(<MembersTable members={rows} canManage onResendInvite={onResendInvite} />)
+    const buttons = screen.getAllByRole('button', { name: /resend/i })
+    expect(buttons).toHaveLength(2) // pending + expired, never the active member
+    fireEvent.click(buttons[1])
+    expect(onResendInvite).toHaveBeenCalledWith('u3')
+  })
+
+  it('shows no resend affordance without canManage', () => {
+    render(<MembersTable members={rows} onResendInvite={jest.fn()} />)
+    expect(screen.queryByRole('button', { name: /resend/i })).not.toBeInTheDocument()
+  })
+
+  it('stays backwards compatible with rows that carry no lifecycle fields', () => {
+    const legacy: MemberRow[] = [
+      { id: 'm1', userId: 'u1', teamId: 't1', role: 'admin', joinedAt: '2026-01-01' },
+    ]
+    render(<MembersTable members={legacy} />)
+    expect(screen.queryByText('Last active')).not.toBeInTheDocument()
+    expect(document.querySelector('[data-invite-status]')).toBeNull()
+  })
+})
+
+describe('MembersSection — the page-level composer', () => {
+  it('renders the member count, the table and forwards a resend', () => {
+    const onResendInvite = jest.fn()
+    render(
+      <MembersSection
+        members={rows}
+        canManage
+        onResendInvite={onResendInvite}
+        onInvite={jest.fn()}
+      />
+    )
+    expect(screen.getByText(/3 people/i)).toBeInTheDocument()
+    expect(screen.getByText('nordby@ogmc.ai')).toBeInTheDocument()
+    fireEvent.click(screen.getAllByRole('button', { name: /resend/i })[0])
+    expect(onResendInvite).toHaveBeenCalledWith('u2')
+  })
+
+  it('surfaces an error line when a mutation failed', () => {
+    render(
+      <MembersSection members={rows} canManage error="Couldn't update that member" />
+    )
+    expect(screen.getByText(/couldn't update that member/i)).toBeInTheDocument()
+  })
+})

package/src/components/team/index.ts

@@ -12,6 +12,11 @@ export type { MembersTableProps } from './MembersTable'
 export type { MembersTableClassNames } from './members-table-default-class-names'
 export { MEMBERS_TABLE_DEFAULTS } from './members-table-default-class-names'
 
+export { MembersSection } from './MembersSection'
+export type { MembersSectionProps } from './MembersSection'
+export type { MembersSectionClassNames } from './members-section-default-class-names'
+export { MEMBERS_SECTION_DEFAULTS } from './members-section-default-class-names'
+
 export { RoleSelector } from './RoleSelector'
 export type { RoleSelectorProps } from './RoleSelector'
 export type { RoleSelectorClassNames } from './role-selector-default-class-names'
@@ -51,6 +56,7 @@ export {
   type CompanyLite,
   type MemberUserLite,
   type MemberRow,
+  type InviteStatus,
   type InvitationLite,
   type DomainVerificationMethod,
   type DomainClaimLite,

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

@@ -0,0 +1,31 @@
+/** Default Tailwind classes for {@link MembersSection}. startsim-768w.19.2.
+ *  Semantic tokens only (startsim-1f3n) — theme-driven, dark-mode safe. */
+import type { MembersTableClassNames } from './members-table-default-class-names'
+import type { InviteMemberDialogClassNames } from './invite-member-dialog-default-class-names'
+
+export interface MembersSectionClassNames {
+  root?: string
+  header?: string
+  heading?: string
+  title?: string
+  description?: string
+  body?: string
+  errorText?: string
+  helpText?: string
+  /** Forwarded to the nested primitives so an app still overrides one map. */
+  table?: MembersTableClassNames
+  inviteDialog?: InviteMemberDialogClassNames
+}
+
+export const MEMBERS_SECTION_DEFAULTS: Required<
+  Omit<MembersSectionClassNames, 'table' | 'inviteDialog'>
+> = {
+  root: 'space-y-3',
+  header: 'flex flex-wrap items-start justify-between gap-3',
+  heading: 'space-y-1',
+  title: 'text-base font-semibold text-foreground',
+  description: 'text-sm text-muted-foreground',
+  body: 'space-y-3',
+  errorText: 'text-sm text-destructive',
+  helpText: 'text-xs text-muted-foreground',
+}

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

@@ -20,6 +20,20 @@ export interface MembersTableClassNames {
   tightColumn?: string
   /** "You" pill next to the signed-in user's own row. */
   selfBadge?: string
+  /** Shared shape of the lifecycle pill in the Status column. */
+  statusBadge?: string
+  /** Per-state colour of that pill — an expired invite must NOT read as a fresh one. */
+  statusActive?: string
+  statusPending?: string
+  statusExpired?: string
+  statusDeactivated?: string
+  /** Last-active cell, and the muted "Never" it falls back to. */
+  lastActive?: string
+  lastActiveEmpty?: string
+  /** "Invited by …" line under a member who hasn't activated yet. */
+  invitedBy?: string
+  /** Resend-invite action on a pending/expired row. */
+  resendButton?: string
 }
 
 export const MEMBERS_TABLE_DEFAULTS: Required<MembersTableClassNames> = {
@@ -44,4 +58,16 @@ export const MEMBERS_TABLE_DEFAULTS: Required<MembersTableClassNames> = {
   tightColumn: 'w-px whitespace-nowrap',
   selfBadge:
     'rounded-full border border-border bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide 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',
+  // Warn state: an expired invite is an action item, not a status quo.
+  statusExpired: 'border-destructive/40 bg-destructive/10 text-destructive',
+  statusDeactivated: 'border-border bg-muted/60 text-muted-foreground line-through',
+  lastActive: 'text-muted-foreground',
+  lastActiveEmpty: 'text-muted-foreground/70',
+  invitedBy: 'text-xs text-muted-foreground/80',
+  resendButton:
+    'rounded-md border border-border px-2 py-1 text-xs text-muted-foreground transition-colors hover:border-primary/40 hover:bg-primary/10 hover:text-primary disabled:opacity-50',
 }

package/src/components/team/types.ts

@@ -35,6 +35,15 @@ export interface MemberUserLite {
   avatarUrl?: string
 }
 
+/**
+ * Where someone is in the invite lifecycle (startsim-768w.19.2).
+ *
+ * `expired` is the state that was missing: an invite link lives 7 days, and
+ * without this a lapsed one rendered exactly like a fresh one — forever
+ * "invited — hasn't set password", with nothing an owner could do about it.
+ */
+export type InviteStatus = 'active' | 'pending' | 'expired'
+
 export interface MemberRow {
   id: string
   userId: string
@@ -43,6 +52,16 @@ export interface MemberRow {
   joinedAt: string
   /** Optionally embedded; when absent, the email + role-only render path is used. */
   user?: MemberUserLite
+  /** Lifecycle state. Absent for backends that don't report it (older list APIs). */
+  inviteStatus?: InviteStatus
+  /** Last sign-in, or null for someone who has never signed in. */
+  lastLoginAt?: string | null
+  /** When the outstanding invite link dies. Null once there is no live invite. */
+  inviteExpiresAt?: string | null
+  /** Who brought this person in. */
+  invitedByEmail?: string | null
+  /** False for a membership that has been deactivated but not removed. */
+  isActive?: boolean
 }
 
 export interface InvitationLite {