spine-framework 0.3.94 → 0.3.95

package/.framework/functions/invites.ts

@@ -25,6 +25,7 @@
  * | list-invites   | GET    | List invites scoped to account (or all for system_admin) |
  * | revoke-invite  | POST   | Mark invite inactive |
  * | reinvite       | POST   | Issue new token on existing stub |
+ * | block-invite   | POST   | Manually block an invite token |
  * | approve        | POST   | Approve access_request → activate person |
  * | deny           | POST   | Deny access_request → deactivate person |
  *
@@ -197,6 +198,7 @@ export const validateToken = createHandler(async (_ctx, _body) => {
 
   return {
     email: person.email,
+    full_name: person.full_name ?? null,
     account_name: account?.display_name ?? null,
     role_name: role?.name ?? null,
     kind: meta.invite_kind,
@@ -444,15 +446,22 @@ export const completeRegistration = createHandler(async (ctx, body) => {
  * Creates a stub people row (status: 'invited') with invite metadata.
  * Returns the shareable token URL.
  * Requires *_admin role scoped to the target account, or system_admin.
+ *
+ * @param full_name        - Invitee's name (admin-entered, shown on register page)
+ * @param email            - Invitee's email address (locked on register page)
+ * @param account_id       - Account to invite into
+ * @param role_slug        - Role slug to assign (e.g. 'member', 'support')
+ * @param allowed_role_slugs - Optional whitelist of permitted role slugs for this context
+ * @param base_url         - Origin to use for the invite URL (window.location.origin from client)
  */
 export const createInvite = createHandler(async (ctx, body) => {
   if (!ctx.principal || ctx.principal.id === 'anonymous') {
     throw new Error('Authentication required')
   }
 
-  const { email, account_id, role_id, base_url } = body
-  if (!email || !account_id || !role_id) {
-    throw new Error('email, account_id, and role_id are required')
+  const { full_name, email, account_id, role_slug, allowed_role_slugs, base_url } = body
+  if (!email || !account_id || !role_slug) {
+    throw new Error('email, account_id, and role_slug are required')
   }
 
   // Verify caller is admin for this account
@@ -474,6 +483,21 @@ export const createInvite = createHandler(async (ctx, body) => {
     throw new Error('Insufficient permissions — *_admin role required to create invites')
   }
 
+  // Enforce allowed_role_slugs whitelist if provided
+  if (allowed_role_slugs && Array.isArray(allowed_role_slugs) && !allowed_role_slugs.includes(role_slug)) {
+    throw new Error(`Role '${role_slug}' is not permitted in this context`)
+  }
+
+  // Resolve role_id from slug
+  const { data: roleRows } = await adminDb
+    .from('roles')
+    .select('id, slug')
+    .eq('slug', role_slug)
+    .limit(1)
+
+  const resolvedRole = roleRows?.[0]
+  if (!resolvedRole) throw new Error(`Role '${role_slug}' not found`)
+
   // Check for existing unclaimed invite for this email+account
   const { data: existing } = await adminDb
     .from('people')
@@ -497,14 +521,15 @@ export const createInvite = createHandler(async (ctx, body) => {
 
   const token = generateToken()
   const expiresAt = new Date(Date.now() + INVITE_EXPIRY_DAYS * 86400 * 1000).toISOString()
+  const stubName = (full_name && full_name.trim()) ? full_name.trim() : email.split('@')[0]
 
   const { data: stub, error: insertErr } = await adminDb
     .from('people')
     .insert({
       email,
-      full_name: email.split('@')[0],
+      full_name: stubName,
       account_id,
-      role_id,
+      role_id: resolvedRole.id,
       type_id: personType?.id,
       status: 'invited',
       is_active: true,
@@ -528,7 +553,7 @@ export const createInvite = createHandler(async (ctx, body) => {
   const inviteUrl = `${appBaseUrl}/register?t=${token}`
 
   await emitLog(ctx, 'invite.created', { type: 'person', id: stub.id }, {
-    after: { email, account_id, role_id, expires_at: expiresAt }
+    after: { email, full_name: stubName, account_id, role_slug, expires_at: expiresAt }
   })
 
   return { id: stub.id, token, invite_url: inviteUrl, expires_at: expiresAt }
@@ -539,6 +564,10 @@ export const createInvite = createHandler(async (ctx, body) => {
 /**
  * Lists people rows with invite metadata.
  * system_admin sees all accounts; others see only their account.
+ *
+ * @param account_id   - Filter to a specific account (required for non-system_admin)
+ * @param role_slugs   - Comma-separated role slugs to filter by (e.g. 'support,support_admin')
+ *                       When provided only people with one of these roles are returned.
  */
 export const listInvites = createHandler(async (ctx, _body) => {
   if (!ctx.principal || ctx.principal.id === 'anonymous') {
@@ -546,7 +575,27 @@ export const listInvites = createHandler(async (ctx, _body) => {
   }
 
   const isSystemAdmin = ctx.principal.permissions?.includes('system')
-  const { account_id: queryAccountId } = ctx.query || {}
+  const { account_id: queryAccountId, role_slugs: queryRoleSlugs } = ctx.query || {}
+
+  // Parse optional role slug filter (comma-separated string from query param)
+  const roleSlugsFilter: string[] | null = queryRoleSlugs
+    ? (queryRoleSlugs as string).split(',').map((s: string) => s.trim()).filter(Boolean)
+    : null
+
+  // If role slug filter is provided, resolve to role IDs first
+  let roleIdFilter: string[] | null = null
+  if (roleSlugsFilter && roleSlugsFilter.length > 0) {
+    const { data: roleRows } = await adminDb
+      .from('roles')
+      .select('id, slug')
+      .in('slug', roleSlugsFilter)
+
+    roleIdFilter = (roleRows || []).map(r => r.id)
+    if (roleIdFilter.length === 0) {
+      // No matching roles — return empty list rather than unfiltered
+      return []
+    }
+  }
 
   let query = adminDb
     .from('people')
@@ -569,6 +618,10 @@ export const listInvites = createHandler(async (ctx, _body) => {
     query = query.eq('account_id', queryAccountId)
   }
 
+  if (roleIdFilter) {
+    query = query.in('role_id', roleIdFilter)
+  }
+
   const { data, error } = await query
   if (error) throw error
 
@@ -709,6 +762,49 @@ export const approve = createHandler(async (ctx, body) => {
   return { success: true }
 })
 
+// ─── PROTECTED: block-invite ─────────────────────────────────────────────────
+
+/**
+ * Manually blocks an invite — sets invite_blocked_at on the people.data JSONB.
+ * The token remains but validate-token will refuse it.
+ * Useful for flagging suspicious or failed invite attempts before they auto-block.
+ */
+export const blockInvite = createHandler(async (ctx, body) => {
+  if (!ctx.principal || ctx.principal.id === 'anonymous') throw new Error('Authentication required')
+
+  const { person_id } = body
+  if (!person_id) throw new Error('person_id is required')
+
+  const { data: person } = await adminDb
+    .from('people')
+    .select('id, email, account_id, data')
+    .eq('id', person_id)
+    .single()
+
+  if (!person) throw new Error('Person not found')
+
+  const meta = (person.data as any) || {}
+
+  const { error } = await adminDb
+    .from('people')
+    .update({
+      data: {
+        ...meta,
+        invite_blocked_at: new Date().toISOString(),
+      },
+      updated_at: new Date().toISOString(),
+    })
+    .eq('id', person_id)
+
+  if (error) throw error
+
+  await emitLog(ctx, 'invite.blocked', { type: 'person', id: person_id }, {
+    after: { email: person.email, blocked_by: ctx.principal.id }
+  })
+
+  return { success: true }
+})
+
 // ─── PROTECTED: deny ──────────────────────────────────────────────────────────
 
 export const deny = createHandler(async (ctx, body) => {
@@ -760,6 +856,7 @@ export const handler = createPublicHandler(async (ctx, body) => {
     case 'list-invites':        return await listInvites(ctx, body)
     case 'revoke-invite':       return await revokeInvite(ctx, body)
     case 'reinvite':            return await reinvite(ctx, body)
+    case 'block-invite':        return await blockInvite(ctx, body)
     case 'approve':             return await approve(ctx, body)
     case 'deny':                return await deny(ctx, body)
     default:

package/.framework/src/components/shared/InviteManager.tsx

@@ -8,13 +8,16 @@
  * Consumed by Cortex TeamPage, Portal TeamPage, and the Admin InvitesPage.
  *
  * Layout:
- *   [ Email input ]  [ Generate Link button ]   ← always visible
- *   ─────────────────────────────────────────
- *   Invite list table with status + actions
+ *   [ Name input ]  [ Email input ]  [ Role picker ]  [ Generate Link button ]
+ *   ─────────────────────────────────────────────────────────────────────────
+ *   Searchable/sortable invite list table with status + actions
  *
  * @prop accountId       - Scope invites to this account UUID.
  *                         Omit (system_admin only) to show all accounts.
- * @prop defaultRoleSlug - Role to pre-assign on new invites ('support', 'member', etc.)
+ * @prop allowedRoles    - Roles the admin may assign. First entry is the default.
+ *                         If only one entry, no picker is shown.
+ * @prop roleSlugsFilter - Comma-separated role slugs to pass to list-invites.
+ *                         Limits which people appear in the list.
  * @prop scope           - 'account' = scoped to one account | 'system' = all accounts
  *
  * @seeAlso functions/invites.ts  (API)
@@ -23,16 +26,22 @@
  * @seeAlso custom/apps/portal/pages/team/TeamPage.tsx
  */
 
-import React, { useState, useEffect, useCallback } from 'react'
+import React, { useState, useEffect, useCallback, useMemo } from 'react'
 import { apiFetch } from '../../lib/api'
 
 // ─── TYPES ────────────────────────────────────────────────────────────────────
 
 export type InviteScope = 'account' | 'system'
 
+export interface AllowedRole {
+  slug: string
+  name: string
+}
+
 export interface InviteManagerProps {
   accountId?: string
-  defaultRoleSlug: string
+  allowedRoles: AllowedRole[]
+  roleSlugsFilter?: string        // comma-separated, passed to list-invites
   scope: InviteScope
 }
 
@@ -80,13 +89,13 @@ function deriveDisplayStatus(row: InviteRow): string {
 }
 
 const STATUS_CLASSES: Record<string, string> = {
-  pending:          'bg-yellow-100 text-yellow-800',
+  pending:            'bg-yellow-100 text-yellow-800',
   'pending approval': 'bg-blue-100 text-blue-800',
-  claimed:          'bg-blue-100 text-blue-800',
-  approved:         'bg-green-100 text-green-800',
-  expired:          'bg-slate-100 text-slate-600',
-  blocked:          'bg-red-100 text-red-800',
-  revoked:          'bg-slate-100 text-slate-500',
+  claimed:            'bg-blue-100 text-blue-800',
+  approved:           'bg-green-100 text-green-800',
+  expired:            'bg-slate-100 text-slate-600',
+  blocked:            'bg-red-100 text-red-800',
+  revoked:            'bg-slate-100 text-slate-500',
 }
 
 function timeUntil(iso: string | null): string {
@@ -101,22 +110,37 @@ function timeUntil(iso: string | null): string {
 
 // ─── COMPONENT ────────────────────────────────────────────────────────────────
 
-export function InviteManager({ accountId, defaultRoleSlug, scope }: InviteManagerProps) {
+export function InviteManager({ accountId, allowedRoles, roleSlugsFilter, scope }: InviteManagerProps) {
   const [invites, setInvites] = useState<InviteRow[]>([])
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState('')
 
+  const [newName, setNewName] = useState('')
   const [newEmail, setNewEmail] = useState('')
+  const [selectedRoleSlug, setSelectedRoleSlug] = useState(allowedRoles[0]?.slug ?? '')
   const [generating, setGenerating] = useState(false)
   const [generateError, setGenerateError] = useState('')
   const [copiedId, setCopiedId] = useState<string | null>(null)
 
+  // Search / sort state
+  const [search, setSearch] = useState('')
+  const [sortKey, setSortKey] = useState<'full_name' | 'email' | 'status' | 'created_at'>('created_at')
+  const [sortDir, setSortDir] = useState<'asc' | 'desc'>('desc')
+
+  // Keep selectedRoleSlug in sync if allowedRoles changes
+  useEffect(() => {
+    if (!allowedRoles.find(r => r.slug === selectedRoleSlug)) {
+      setSelectedRoleSlug(allowedRoles[0]?.slug ?? '')
+    }
+  }, [allowedRoles, selectedRoleSlug])
+
   // ── Load invites ──────────────────────────────────────────────────────────
   const loadInvites = useCallback(async () => {
     setLoading(true)
     setError('')
     const params: Record<string, string> = {}
     if (accountId) params.account_id = accountId
+    if (roleSlugsFilter) params.role_slugs = roleSlugsFilter
 
     const result = await callInvitesApi('list-invites', params)
     setLoading(false)
@@ -125,10 +149,42 @@ export function InviteManager({ accountId, defaultRoleSlug, scope }: InviteManag
     } else {
       setInvites(result.data || [])
     }
-  }, [accountId])
+  }, [accountId, roleSlugsFilter])
 
   useEffect(() => { loadInvites() }, [loadInvites])
 
+  // ── Filtered + sorted list ─────────────────────────────────────────────────
+  const filteredInvites = useMemo(() => {
+    const q = search.toLowerCase()
+    const filtered = q
+      ? invites.filter(r =>
+          r.full_name?.toLowerCase().includes(q) ||
+          r.email.toLowerCase().includes(q) ||
+          deriveDisplayStatus(r).includes(q) ||
+          r.role?.name?.toLowerCase().includes(q)
+        )
+      : invites
+
+    return [...filtered].sort((a, b) => {
+      let av = '', bv = ''
+      if (sortKey === 'full_name')   { av = a.full_name ?? ''; bv = b.full_name ?? '' }
+      if (sortKey === 'email')       { av = a.email; bv = b.email }
+      if (sortKey === 'status')      { av = deriveDisplayStatus(a); bv = deriveDisplayStatus(b) }
+      if (sortKey === 'created_at')  { av = a.created_at; bv = b.created_at }
+      const cmp = av.localeCompare(bv)
+      return sortDir === 'asc' ? cmp : -cmp
+    })
+  }, [invites, search, sortKey, sortDir])
+
+  const handleSort = (key: typeof sortKey) => {
+    if (sortKey === key) {
+      setSortDir(d => d === 'asc' ? 'desc' : 'asc')
+    } else {
+      setSortKey(key)
+      setSortDir('asc')
+    }
+  }
+
   // ── Generate invite ────────────────────────────────────────────────────────
   const handleGenerate = async (e: React.FormEvent) => {
     e.preventDefault()
@@ -137,9 +193,11 @@ export function InviteManager({ accountId, defaultRoleSlug, scope }: InviteManag
     setGenerateError('')
 
     const result = await callInvitesApi('create-invite', {
+      full_name: newName.trim() || undefined,
       email: newEmail.trim(),
       account_id: accountId,
-      role_slug: defaultRoleSlug,
+      role_slug: selectedRoleSlug,
+      allowed_role_slugs: allowedRoles.map(r => r.slug),
       base_url: window.location.origin,
     }, 'POST')
 
@@ -150,36 +208,17 @@ export function InviteManager({ accountId, defaultRoleSlug, scope }: InviteManag
       return
     }
 
-    // Copy URL to clipboard
+    // Copy URL to clipboard automatically
     if (result.data?.invite_url) {
       navigator.clipboard.writeText(result.data.invite_url).catch(() => {})
     }
 
+    setNewName('')
     setNewEmail('')
     await loadInvites()
   }
 
-  // ── Copy link ──────────────────────────────────────────────────────────────
-  const handleCopy = async (row: InviteRow) => {
-    // Re-generate the URL from what we know — token isn't stored in list response for security
-    // Instead, issue a reinvite to get a fresh URL (safer — old token stays valid, we just display it)
-    // For now, signal to the user to use the generate flow. A future enhancement could cache the URL.
-    const url = `${window.location.origin}/register?t=<token-not-displayable>`
-    await navigator.clipboard.writeText(url).catch(() => {})
-    setCopiedId(row.id)
-    setTimeout(() => setCopiedId(null), 2000)
-  }
-
-  // ── Actions ────────────────────────────────────────────────────────────────
-  const handleAction = async (action: string, personId: string) => {
-    const result = await callInvitesApi(action, { person_id: personId }, 'POST')
-    if (result.error) {
-      setError(result.error)
-    } else {
-      await loadInvites()
-    }
-  }
-
+  // ── Reinvite (issues new token, copies URL) ────────────────────────────────
   const handleReinvite = async (personId: string) => {
     const result = await callInvitesApi('reinvite', {
       person_id: personId,
@@ -197,37 +236,91 @@ export function InviteManager({ accountId, defaultRoleSlug, scope }: InviteManag
     }
   }
 
+  // ── Generic action (revoke, approve, deny, block) ─────────────────────────
+  const handleAction = async (action: string, personId: string) => {
+    const result = await callInvitesApi(action, { person_id: personId }, 'POST')
+    if (result.error) {
+      setError(result.error)
+    } else {
+      await loadInvites()
+    }
+  }
+
   // ── Render ─────────────────────────────────────────────────────────────────
+  const canGenerate = !!accountId || scope === 'system'
+  const showRolePicker = allowedRoles.length > 1
+
   return (
     <div className="space-y-6">
 
       {/* Generate invite form */}
-      <form onSubmit={handleGenerate} className="flex gap-3 items-end">
-        <div className="flex-1">
-          <label htmlFor="invite-email" className="block text-sm font-medium text-slate-700 mb-1">
-            Invite by email
-          </label>
-          <input
-            id="invite-email"
-            type="email"
-            required
-            value={newEmail}
-            onChange={e => setNewEmail(e.target.value)}
-            placeholder="colleague@company.com"
-            disabled={!accountId && scope !== 'system'}
-            className="block w-full px-3 py-2 border border-slate-300 rounded-[5px] shadow-sm placeholder-slate-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm disabled:opacity-50"
-          />
-          {!accountId && scope !== 'system' && (
-            <p className="mt-1 text-xs text-slate-500">Select an account to enable invite generation.</p>
+      <form onSubmit={handleGenerate} className="space-y-3">
+        <div className="flex gap-3 items-end flex-wrap">
+          {/* Name */}
+          <div className="flex-1 min-w-[160px]">
+            <label htmlFor="invite-name" className="block text-sm font-medium text-slate-700 mb-1">
+              Name
+            </label>
+            <input
+              id="invite-name"
+              type="text"
+              value={newName}
+              onChange={e => setNewName(e.target.value)}
+              placeholder="Jane Smith"
+              disabled={!canGenerate}
+              className="block w-full px-3 py-2 border border-slate-300 rounded-[5px] shadow-sm placeholder-slate-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm disabled:opacity-50"
+            />
+          </div>
+
+          {/* Email */}
+          <div className="flex-1 min-w-[200px]">
+            <label htmlFor="invite-email" className="block text-sm font-medium text-slate-700 mb-1">
+              Email
+            </label>
+            <input
+              id="invite-email"
+              type="email"
+              required
+              value={newEmail}
+              onChange={e => setNewEmail(e.target.value)}
+              placeholder="colleague@company.com"
+              disabled={!canGenerate}
+              className="block w-full px-3 py-2 border border-slate-300 rounded-[5px] shadow-sm placeholder-slate-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm disabled:opacity-50"
+            />
+          </div>
+
+          {/* Role picker — only shown when more than one role is available */}
+          {showRolePicker && (
+            <div className="min-w-[140px]">
+              <label htmlFor="invite-role" className="block text-sm font-medium text-slate-700 mb-1">
+                Role
+              </label>
+              <select
+                id="invite-role"
+                value={selectedRoleSlug}
+                onChange={e => setSelectedRoleSlug(e.target.value)}
+                disabled={!canGenerate}
+                className="block w-full px-3 py-2 border border-slate-300 rounded-[5px] shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm disabled:opacity-50 bg-white"
+              >
+                {allowedRoles.map(r => (
+                  <option key={r.slug} value={r.slug}>{r.name}</option>
+                ))}
+              </select>
+            </div>
           )}
+
+          <button
+            type="submit"
+            disabled={generating || !newEmail.trim() || !canGenerate}
+            className="px-4 py-2 rounded-[5px] bg-slate-900 text-white text-sm font-medium hover:bg-slate-800 disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap self-end"
+          >
+            {generating ? 'Generating...' : 'Generate Link'}
+          </button>
         </div>
-        <button
-          type="submit"
-          disabled={generating || !newEmail.trim() || (!accountId && scope !== 'system')}
-          className="px-4 py-2 rounded-[5px] bg-slate-900 text-white text-sm font-medium hover:bg-slate-800 disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
-        >
-          {generating ? 'Generating...' : 'Generate Link'}
-        </button>
+
+        {!canGenerate && (
+          <p className="text-xs text-slate-500">Select an account to enable invite generation.</p>
+        )}
       </form>
 
       {generateError && (
@@ -238,6 +331,17 @@ export function InviteManager({ accountId, defaultRoleSlug, scope }: InviteManag
 
       <hr className="border-slate-200" />
 
+      {/* Search bar */}
+      <div>
+        <input
+          type="text"
+          value={search}
+          onChange={e => setSearch(e.target.value)}
+          placeholder="Search by name, email, or status…"
+          className="block w-full px-3 py-2 border border-slate-300 rounded-[5px] shadow-sm placeholder-slate-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+        />
+      </div>
+
       {/* Error state */}
       {error && (
         <div className="rounded-md bg-red-50 p-3">
@@ -250,31 +354,45 @@ export function InviteManager({ accountId, defaultRoleSlug, scope }: InviteManag
         <div className="flex items-center justify-center py-12">
           <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-slate-900" />
         </div>
-      ) : invites.length === 0 ? (
+      ) : filteredInvites.length === 0 ? (
         <div className="text-center py-12 text-slate-500">
-          <p className="text-sm">No invites yet. Generate a link above to invite someone.</p>
+          <p className="text-sm">
+            {invites.length === 0
+              ? 'No invites yet. Generate a link above to invite someone.'
+              : 'No results match your search.'}
+          </p>
         </div>
       ) : (
         <div className="overflow-x-auto">
           <table className="min-w-full divide-y divide-slate-200">
             <thead>
               <tr>
-                <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Email</th>
+                <SortTh label="Name"    col="full_name"  current={sortKey} dir={sortDir} onSort={handleSort} />
+                <SortTh label="Email"   col="email"      current={sortKey} dir={sortDir} onSort={handleSort} />
                 {scope === 'system' && (
                   <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Account</th>
                 )}
                 <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Role</th>
-                <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Status</th>
+                <SortTh label="Status"  col="status"     current={sortKey} dir={sortDir} onSort={handleSort} />
                 <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Expires</th>
                 <th className="px-4 py-3 text-right text-xs font-medium text-slate-500 uppercase tracking-wider">Actions</th>
               </tr>
             </thead>
             <tbody className="divide-y divide-slate-100">
-              {invites.map(row => {
+              {filteredInvites.map(row => {
                 const displayStatus = deriveDisplayStatus(row)
+                const isPending   = row.status === 'invited' && !row.blocked_at && !(row.expires_at && new Date(row.expires_at) < new Date())
+                const isExpired   = displayStatus === 'expired'
+                const isBlocked   = displayStatus === 'blocked'
+                const isRevoked   = displayStatus === 'revoked'
+                const isClaimed   = displayStatus === 'claimed'
+                const isApproved  = displayStatus === 'approved'
+                const isAccessReq = row.status === 'pending' && row.kind === 'access_request'
+
                 return (
                   <tr key={row.id} className="hover:bg-slate-50">
-                    <td className="px-4 py-3 text-sm text-slate-900">{row.email}</td>
+                    <td className="px-4 py-3 text-sm text-slate-900">{row.full_name || '—'}</td>
+                    <td className="px-4 py-3 text-sm text-slate-600">{row.email}</td>
 
                     {scope === 'system' && (
                       <td className="px-4 py-3 text-sm text-slate-600">
@@ -297,11 +415,17 @@ export function InviteManager({ accountId, defaultRoleSlug, scope }: InviteManag
                     </td>
 
                     <td className="px-4 py-3 text-right">
-                      <div className="flex gap-2 justify-end">
+                      <div className="flex gap-2 justify-end flex-wrap">
 
-                        {/* Pending unclaimed invite */}
-                        {row.status === 'invited' && !row.blocked_at && (
+                        {/* Pending unclaimed invite — Reinvite + Revoke */}
+                        {isPending && (
                           <>
+                            <button
+                              onClick={() => handleReinvite(row.id)}
+                              className="text-xs text-blue-600 hover:text-blue-800 px-2 py-1 rounded border border-blue-200 hover:border-blue-400"
+                            >
+                              {copiedId === row.id ? 'Copied!' : 'Reinvite'}
+                            </button>
                             <button
                               onClick={() => handleAction('revoke-invite', row.id)}
                               className="text-xs text-slate-500 hover:text-red-600 px-2 py-1 rounded border border-slate-200 hover:border-red-300"
@@ -311,33 +435,67 @@ export function InviteManager({ accountId, defaultRoleSlug, scope }: InviteManag
                           </>
                         )}
 
-                        {/* Pending access request — approve / deny */}
-                        {row.status === 'pending' && row.kind === 'access_request' && (
+                        {/* Expired — Reinvite + Revoke */}
+                        {isExpired && (
                           <>
                             <button
-                              onClick={() => handleAction('approve', row.id)}
-                              className="text-xs text-white bg-green-600 hover:bg-green-700 px-2 py-1 rounded"
+                              onClick={() => handleReinvite(row.id)}
+                              className="text-xs text-blue-600 hover:text-blue-800 px-2 py-1 rounded border border-blue-200 hover:border-blue-400"
                             >
-                              Approve
+                              {copiedId === row.id ? 'Copied!' : 'Reinvite'}
                             </button>
                             <button
-                              onClick={() => handleAction('deny', row.id)}
-                              className="text-xs text-red-600 hover:text-red-800 px-2 py-1 rounded border border-red-200 hover:border-red-400"
+                              onClick={() => handleAction('revoke-invite', row.id)}
+                              className="text-xs text-slate-500 hover:text-red-600 px-2 py-1 rounded border border-slate-200 hover:border-red-300"
                             >
-                              Deny
+                              Revoke
                             </button>
                           </>
                         )}
 
-                        {/* Expired or blocked — re-invite */}
-                        {(displayStatus === 'expired' || displayStatus === 'blocked' || displayStatus === 'revoked') && (
+                        {/* Blocked — Reinvite only (unblock + new token) */}
+                        {isBlocked && (
                           <button
                             onClick={() => handleReinvite(row.id)}
                             className="text-xs text-blue-600 hover:text-blue-800 px-2 py-1 rounded border border-blue-200 hover:border-blue-400"
                           >
-                            {copiedId === row.id ? 'Copied!' : 'Re-invite'}
+                            {copiedId === row.id ? 'Copied!' : 'Reinvite'}
                           </button>
                         )}
+
+                        {/* Revoked — Reinvite only */}
+                        {isRevoked && (
+                          <button
+                            onClick={() => handleReinvite(row.id)}
+                            className="text-xs text-blue-600 hover:text-blue-800 px-2 py-1 rounded border border-blue-200 hover:border-blue-400"
+                          >
+                            {copiedId === row.id ? 'Copied!' : 'Reinvite'}
+                          </button>
+                        )}
+
+                        {/* Claimed (active invite) or Approved (access request) — no actions, visible in list */}
+                        {(isClaimed || isApproved) && (
+                          <span className="text-xs text-slate-400 px-2 py-1">—</span>
+                        )}
+
+                        {/* Pending access request — Approve + Deny */}
+                        {isAccessReq && (
+                          <>
+                            <button
+                              onClick={() => handleAction('approve', row.id)}
+                              className="text-xs text-white bg-green-600 hover:bg-green-700 px-2 py-1 rounded"
+                            >
+                              Approve
+                            </button>
+                            <button
+                              onClick={() => handleAction('deny', row.id)}
+                              className="text-xs text-red-600 hover:text-red-800 px-2 py-1 rounded border border-red-200 hover:border-red-400"
+                            >
+                              Deny
+                            </button>
+                          </>
+                        )}
+
                       </div>
                     </td>
                   </tr>
@@ -350,3 +508,26 @@ export function InviteManager({ accountId, defaultRoleSlug, scope }: InviteManag
     </div>
   )
 }
+
+// ─── SORT HEADER ──────────────────────────────────────────────────────────────
+
+function SortTh({
+  label, col, current, dir, onSort
+}: {
+  label: string
+  col: 'full_name' | 'email' | 'status' | 'created_at'
+  current: string
+  dir: 'asc' | 'desc'
+  onSort: (col: 'full_name' | 'email' | 'status' | 'created_at') => void
+}) {
+  const active = current === col
+  return (
+    <th
+      className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider cursor-pointer select-none hover:text-slate-700"
+      onClick={() => onSort(col)}
+    >
+      {label}
+      {active ? (dir === 'asc' ? ' ↑' : ' ↓') : ' ↕'}
+    </th>
+  )
+}

package/.framework/src/pages/admin/InvitesPage.tsx

@@ -5,7 +5,7 @@
  * @stability stable
  *
  * System-level invite management page for system_admin.
- * Shows all invites and access requests across all accounts.
+ * Shows invites for the spine-system account scoped to system_admin role only.
  * Rendered at /spine-framework/admin/access/invites
  *
  * @seeAlso src/components/shared/InviteManager.tsx
@@ -13,20 +13,31 @@
 
 import React from 'react'
 import { InviteManager } from '../../components/shared/InviteManager'
+import { useAuth } from '../../contexts/AuthContext'
+
+const FRAMEWORK_ROLES = [
+  { slug: 'system_admin', name: 'System Admin' },
+]
+
+const FRAMEWORK_ROLE_SLUGS = FRAMEWORK_ROLES.map(r => r.slug).join(',')
 
 export function InvitesPage() {
+  const { user } = useAuth()
+
   return (
     <div className="p-6 space-y-6">
       <div>
         <h1 className="text-2xl font-semibold text-slate-900">Invites & Access</h1>
         <p className="mt-1 text-sm text-slate-500">
-          Manage invites and access requests across all accounts.
+          Manage system administrator invites for the Spine Framework.
         </p>
       </div>
 
       <InviteManager
-        scope="system"
-        defaultRoleSlug="support"
+        scope="account"
+        accountId={user?.account_id}
+        allowedRoles={FRAMEWORK_ROLES}
+        roleSlugsFilter={FRAMEWORK_ROLE_SLUGS}
       />
     </div>
   )

package/.framework/src/pages/auth/RegisterPage.tsx

@@ -44,6 +44,7 @@ type DomainMatchChoice = 'join' | 'create_new' | null
 
 interface InvitePreview {
   email: string
+  full_name: string | null
   account_name: string | null
   role_name: string | null
   kind: string
@@ -187,6 +188,8 @@ export function RegisterPage() {
       } else {
         setInvitePreview(result.data)
         setEmail(result.data.email)
+        // Pre-fill name from invite stub (editable — user can correct it)
+        if (result.data.full_name) setFullName(result.data.full_name)
       }
     })()
   }, [inviteToken])

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spine-framework",
-  "version": "0.3.94",
+  "version": "0.3.95",
   "description": "Multi-tenant, modular application platform for modern SaaS systems",
   "type": "module",
   "bin": {