feat: admin invite codes with plan assignment + user detail page

- Migration 030: add email, assigned_plan, trial_duration_days, email_sent_at
  to invite_codes with CHECK constraints
- Resend email integration (graceful degradation when API key not set)
- Invite codes now support plan assignment (free/pro/team) and trial duration (1-90 days)
- Registration applies invite code plan/trial to new subscription
- Auto-downgrade expired trials on authenticated access
- Enriched GET /admin/users/{id} with account, subscription, sessions, audit logs
- New endpoints: PUT /admin/users/{id}/subscription/plan and extend-trial
- Frontend: enhanced invite codes page with email, plan, trial fields
- Frontend: new user detail page at /admin/users/:userId
- Fixed API path drift: /invite-codes -> /invites
- 11 new backend tests, 416 total passing

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/api/admin.ts

@@ -13,6 +13,9 @@ import type {
   AccountFeatureOverrideCreate,
   AdminCategory,
   GlobalCategoryCreate,
+  InviteCodeResponse,
+  InviteCodeCreateRequest,
+  UserDetailResponse,
 } from '@/types/admin'
 
 export const adminApi = {
@@ -38,13 +41,21 @@ export const adminApi = {
   moveUserAccount: (id: string, display_code: string) =>
     api.put(`/admin/users/${id}/move-account`, { display_code }).then(r => r.data),
 
-  // Invite Codes (existing endpoints)
+  // Users - detail + subscription
+  getUserDetail: (id: string) =>
+    api.get<UserDetailResponse>(`/admin/users/${id}`).then(r => r.data),
+  updateUserSubscriptionPlan: (id: string, plan: string) =>
+    api.put(`/admin/users/${id}/subscription/plan`, { plan }).then(r => r.data),
+  extendUserTrial: (id: string, days: number) =>
+    api.put(`/admin/users/${id}/subscription/extend-trial`, { days }).then(r => r.data),
+
+  // Invite Codes
   listInviteCodes: (params?: Record<string, unknown>) =>
-    api.get('/invite-codes', { params }).then(r => r.data),
-  createInviteCode: (data?: { expires_at?: string }) =>
-    api.post('/invite-codes', data || {}).then(r => r.data),
-  deleteInviteCode: (id: string) =>
-    api.delete(`/invite-codes/${id}`),
+    api.get<InviteCodeResponse[]>('/invites', { params }).then(r => r.data),
+  createInviteCode: (data: InviteCodeCreateRequest = {}) =>
+    api.post<InviteCodeResponse>('/invites', data).then(r => r.data),
+  deleteInviteCode: (code: string) =>
+    api.delete(`/invites/${code}`),
 
   // Audit Logs
   listAuditLogs: (params?: Record<string, unknown>) =>

frontend/src/pages/admin/InviteCodesPage.tsx

@@ -1,33 +1,45 @@
 import { useState, useEffect, useCallback } from 'react'
-import { Plus, Copy, Trash2, Ticket } from 'lucide-react'
+import { Plus, Copy, Trash2, Ticket, Mail, MailCheck } from 'lucide-react'
 import { DataTable, PageHeader, StatusBadge, ActionMenu, EmptyState } from '@/components/admin'
 import type { Column } from '@/components/admin'
 import { Modal } from '@/components/common/Modal'
 import { adminApi } from '@/api/admin'
 import { toast } from '@/lib/toast'
 import { cn } from '@/lib/utils'
+import type { InviteCodeResponse, InviteCodeCreateRequest } from '@/types/admin'
 
-interface InviteCode {
-  id: string
-  code: string
-  created_by_id: string
-  used_by_id: string | null
-  is_active: boolean
-  expires_at: string | null
-  created_at: string
+const PLAN_OPTIONS = [
+  { value: 'free', label: 'Free' },
+  { value: 'pro', label: 'Pro' },
+  { value: 'team', label: 'Team' },
+] as const
+
+const planBadgeVariant = (plan: string): 'success' | 'destructive' | 'warning' | 'default' => {
+  switch (plan) {
+    case 'pro': return 'success'
+    case 'team': return 'warning'
+    default: return 'default'
+  }
 }
 
 export function InviteCodesPage() {
-  const [codes, setCodes] = useState<InviteCode[]>([])
+  const [codes, setCodes] = useState<InviteCodeResponse[]>([])
   const [loading, setLoading] = useState(true)
   const [createOpen, setCreateOpen] = useState(false)
+  const [creating, setCreating] = useState(false)
+
+  // Form state
+  const [email, setEmail] = useState('')
   const [expiresInDays, setExpiresInDays] = useState('')
+  const [assignedPlan, setAssignedPlan] = useState<'free' | 'pro' | 'team'>('free')
+  const [trialDays, setTrialDays] = useState('')
+  const [note, setNote] = useState('')
 
   const fetchCodes = useCallback(async () => {
     setLoading(true)
     try {
       const data = await adminApi.listInviteCodes()
-      setCodes(Array.isArray(data) ? data : data.items || [])
+      setCodes(Array.isArray(data) ? data : [])
     } catch {
       toast.error('Failed to load invite codes')
     } finally {
@@ -37,18 +49,36 @@ export function InviteCodesPage() {
 
   useEffect(() => { fetchCodes() }, [fetchCodes])
 
+  const resetForm = () => {
+    setEmail('')
+    setExpiresInDays('')
+    setAssignedPlan('free')
+    setTrialDays('')
+    setNote('')
+  }
+
   const handleCreate = async () => {
+    setCreating(true)
     try {
-      const expiresAt = expiresInDays
-        ? new Date(Date.now() + parseInt(expiresInDays) * 86400000).toISOString()
-        : undefined
-      await adminApi.createInviteCode(expiresAt ? { expires_at: expiresAt } : undefined)
+      const data: InviteCodeCreateRequest = {}
+      if (expiresInDays) {
+        data.expires_at = new Date(Date.now() + parseInt(expiresInDays) * 86400000).toISOString()
+      }
+      if (email.trim()) data.email = email.trim()
+      if (note.trim()) data.note = note.trim()
+      data.assigned_plan = assignedPlan
+      if (assignedPlan !== 'free' && trialDays) {
+        data.trial_duration_days = parseInt(trialDays)
+      }
+      await adminApi.createInviteCode(data)
       toast.success('Invite code created')
       setCreateOpen(false)
-      setExpiresInDays('')
+      resetForm()
       fetchCodes()
     } catch {
       toast.error('Failed to create invite code')
+    } finally {
+      setCreating(false)
     }
   }
 
@@ -57,9 +87,9 @@ export function InviteCodesPage() {
     toast.success('Code copied to clipboard')
   }
 
-  const handleDelete = async (id: string) => {
+  const handleDelete = async (code: string) => {
     try {
-      await adminApi.deleteInviteCode(id)
+      await adminApi.deleteInviteCode(code)
       toast.success('Invite code deleted')
       fetchCodes()
     } catch {
@@ -67,7 +97,12 @@ export function InviteCodesPage() {
     }
   }
 
-  const columns: Column<InviteCode>[] = [
+  const inputClass = cn(
+    'w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white',
+    'placeholder:text-white/40 focus:outline-none focus:border-white/30 focus:ring-2 focus:ring-white/20'
+  )
+
+  const columns: Column<InviteCodeResponse>[] = [
     {
       key: 'code',
       header: 'Code',
@@ -75,14 +110,48 @@ export function InviteCodesPage() {
         <code className="rounded bg-white/10 px-2 py-1 text-sm font-mono text-white/70">{c.code}</code>
       ),
     },
+    {
+      key: 'email',
+      header: 'Recipient',
+      render: (c) => c.email ? (
+        <div className="flex items-center gap-1.5">
+          {c.email_sent ? (
+            <MailCheck className="h-3.5 w-3.5 text-emerald-400" />
+          ) : (
+            <Mail className="h-3.5 w-3.5 text-white/30" />
+          )}
+          <span className="text-sm text-white/60">{c.email}</span>
+        </div>
+      ) : (
+        <span className="text-sm text-white/30">&mdash;</span>
+      ),
+    },
+    {
+      key: 'plan',
+      header: 'Plan',
+      render: (c) => (
+        <StatusBadge variant={planBadgeVariant(c.assigned_plan)}>
+          {c.assigned_plan.charAt(0).toUpperCase() + c.assigned_plan.slice(1)}
+        </StatusBadge>
+      ),
+    },
+    {
+      key: 'trial',
+      header: 'Trial',
+      render: (c) => c.has_trial ? (
+        <span className="text-sm text-white/60">{c.trial_duration_days}d</span>
+      ) : (
+        <span className="text-sm text-white/30">&mdash;</span>
+      ),
+    },
     {
       key: 'status',
       header: 'Status',
       render: (c) => {
-        if (c.used_by_id) return <StatusBadge variant="default">Used</StatusBadge>
-        if (!c.is_active) return <StatusBadge variant="destructive">Inactive</StatusBadge>
-        if (c.expires_at && new Date(c.expires_at) < new Date()) return <StatusBadge variant="warning">Expired</StatusBadge>
-        return <StatusBadge variant="success">Active</StatusBadge>
+        if (c.is_used) return <StatusBadge variant="default">Used</StatusBadge>
+        if (c.is_expired) return <StatusBadge variant="warning">Expired</StatusBadge>
+        if (c.is_valid) return <StatusBadge variant="success">Active</StatusBadge>
+        return <StatusBadge variant="destructive">Inactive</StatusBadge>
       },
     },
     {
@@ -114,12 +183,12 @@ export function InviteCodesPage() {
             icon: <Copy className="h-4 w-4" />,
             onClick: () => handleCopy(c.code),
           },
-          {
+          ...(!c.is_used ? [{
             label: 'Delete',
             icon: <Trash2 className="h-4 w-4" />,
-            onClick: () => handleDelete(c.id),
+            onClick: () => handleDelete(c.code),
             destructive: true,
-          },
+          }] : []),
         ]} />
       ),
     },
@@ -129,7 +198,7 @@ export function InviteCodesPage() {
     <div className="space-y-6">
       <PageHeader
         title="Invite Codes"
-        description="Manage registration invite codes"
+        description="Create and manage registration invite codes with plan assignment"
         action={
           <button
             onClick={() => setCreateOpen(true)}
@@ -160,27 +229,73 @@ export function InviteCodesPage() {
 
       <Modal
         isOpen={createOpen}
-        onClose={() => setCreateOpen(false)}
+        onClose={() => { setCreateOpen(false); resetForm() }}
         title="Create Invite Code"
         size="sm"
         footer={
           <div className="flex justify-end gap-3">
             <button
-              onClick={() => setCreateOpen(false)}
+              onClick={() => { setCreateOpen(false); resetForm() }}
               className="rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60 hover:bg-white/10 hover:text-white"
             >
               Cancel
             </button>
             <button
               onClick={handleCreate}
-              className="rounded-md bg-white px-4 py-2 text-sm font-medium text-black hover:bg-white/90"
+              disabled={creating}
+              className="rounded-md bg-white px-4 py-2 text-sm font-medium text-black hover:bg-white/90 disabled:opacity-50"
             >
-              Create
+              {creating ? 'Creating...' : 'Create'}
             </button>
           </div>
         }
       >
         <div className="space-y-4">
+          <div>
+            <label className="mb-1 block text-sm font-medium text-white">Recipient Email</label>
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="Optional — will send invite email"
+              className={inputClass}
+            />
+          </div>
+
+          <div>
+            <label className="mb-1 block text-sm font-medium text-white">Plan</label>
+            <select
+              aria-label="Plan"
+              value={assignedPlan}
+              onChange={(e) => {
+                const plan = e.target.value as 'free' | 'pro' | 'team'
+                setAssignedPlan(plan)
+                if (plan === 'free') setTrialDays('')
+              }}
+              className={inputClass}
+            >
+              {PLAN_OPTIONS.map(o => (
+                <option key={o.value} value={o.value}>{o.label}</option>
+              ))}
+            </select>
+          </div>
+
+          {assignedPlan !== 'free' && (
+            <div>
+              <label className="mb-1 block text-sm font-medium text-white">Trial Duration (days)</label>
+              <input
+                type="number"
+                value={trialDays}
+                onChange={(e) => setTrialDays(e.target.value)}
+                placeholder="e.g. 14 (1-90)"
+                min={1}
+                max={90}
+                className={inputClass}
+              />
+              <p className="mt-1 text-xs text-white/40">Leave empty for no trial — account gets full plan immediately.</p>
+            </div>
+          )}
+
           <div>
             <label className="mb-1 block text-sm font-medium text-white">Expires in (days)</label>
             <input
@@ -188,10 +303,18 @@ export function InviteCodesPage() {
               value={expiresInDays}
               onChange={(e) => setExpiresInDays(e.target.value)}
               placeholder="Leave empty for no expiry"
-              className={cn(
-                'w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white',
-                'placeholder:text-white/40 focus:outline-none focus:border-white/30 focus:ring-2 focus:ring-white/20'
-              )}
+              className={inputClass}
+            />
+          </div>
+
+          <div>
+            <label className="mb-1 block text-sm font-medium text-white">Note</label>
+            <input
+              type="text"
+              value={note}
+              onChange={(e) => setNote(e.target.value)}
+              placeholder="Optional note (e.g. who this is for)"
+              className={inputClass}
             />
           </div>
         </div>

frontend/src/pages/admin/UserDetailPage.tsx

@@ -0,0 +1,422 @@
+import { useState, useEffect, useCallback } from 'react'
+import { useParams, useNavigate } from 'react-router-dom'
+import { ArrowLeft, Shield, Crown, UserCheck, UserX, Clock, Ticket } from 'lucide-react'
+import { StatusBadge } from '@/components/admin'
+import { Modal } from '@/components/common/Modal'
+import { adminApi } from '@/api/admin'
+import { toast } from '@/lib/toast'
+import { cn } from '@/lib/utils'
+import type { UserDetailResponse } from '@/types/admin'
+
+const PLAN_OPTIONS = ['free', 'pro', 'team'] as const
+
+export function UserDetailPage() {
+  const { userId } = useParams<{ userId: string }>()
+  const navigate = useNavigate()
+  const [user, setUser] = useState<UserDetailResponse | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  // Modal state
+  const [planModalOpen, setPlanModalOpen] = useState(false)
+  const [selectedPlan, setSelectedPlan] = useState('')
+  const [trialModalOpen, setTrialModalOpen] = useState(false)
+  const [trialDays, setTrialDays] = useState('14')
+  const [activeTab, setActiveTab] = useState<'sessions' | 'audit'>('sessions')
+
+  const fetchUser = useCallback(async () => {
+    if (!userId) return
+    setLoading(true)
+    try {
+      const data = await adminApi.getUserDetail(userId)
+      setUser(data)
+    } catch {
+      toast.error('Failed to load user details')
+    } finally {
+      setLoading(false)
+    }
+  }, [userId])
+
+  useEffect(() => { fetchUser() }, [fetchUser])
+
+  const handleChangePlan = async () => {
+    if (!userId || !selectedPlan) return
+    try {
+      await adminApi.updateUserSubscriptionPlan(userId, selectedPlan)
+      toast.success(`Plan changed to ${selectedPlan}`)
+      setPlanModalOpen(false)
+      fetchUser()
+    } catch {
+      toast.error('Failed to change plan')
+    }
+  }
+
+  const handleExtendTrial = async () => {
+    if (!userId || !trialDays) return
+    try {
+      await adminApi.extendUserTrial(userId, parseInt(trialDays))
+      toast.success(`Trial extended by ${trialDays} days`)
+      setTrialModalOpen(false)
+      fetchUser()
+    } catch {
+      toast.error('Failed to extend trial')
+    }
+  }
+
+  const handleToggleActive = async () => {
+    if (!userId || !user) return
+    try {
+      if (user.is_active) {
+        await adminApi.deactivateUser(userId)
+        toast.success('User deactivated')
+      } else {
+        await adminApi.activateUser(userId)
+        toast.success('User activated')
+      }
+      fetchUser()
+    } catch {
+      toast.error('Failed to update user status')
+    }
+  }
+
+  const inputClass = cn(
+    'w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white',
+    'placeholder:text-white/40 focus:outline-none focus:border-white/30 focus:ring-2 focus:ring-white/20'
+  )
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-20">
+        <div className="h-8 w-8 animate-spin rounded-full border-2 border-white/20 border-t-white" />
+      </div>
+    )
+  }
+
+  if (!user) {
+    return (
+      <div className="py-20 text-center text-white/40">User not found</div>
+    )
+  }
+
+  const fmt = (d: string | null) => d ? new Date(d).toLocaleDateString() : '—'
+  const fmtFull = (d: string | null) => d ? new Date(d).toLocaleString() : '—'
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center gap-4">
+        <button
+          onClick={() => navigate('/admin/users')}
+          className="rounded-md border border-white/10 p-2 text-white/60 hover:bg-white/10 hover:text-white"
+        >
+          <ArrowLeft className="h-4 w-4" />
+        </button>
+        <div className="flex-1">
+          <h1 className="text-xl font-semibold text-white">
+            {user.full_name || user.email}
+          </h1>
+          <p className="text-sm text-white/40">{user.email}</p>
+        </div>
+        <div className="flex items-center gap-2">
+          {user.is_super_admin && (
+            <StatusBadge variant="warning">
+              <Crown className="mr-1 h-3 w-3" /> Super Admin
+            </StatusBadge>
+          )}
+          <StatusBadge variant={user.is_active ? 'success' : 'destructive'}>
+            {user.is_active ? 'Active' : 'Inactive'}
+          </StatusBadge>
+          <StatusBadge variant="default">{user.role}</StatusBadge>
+        </div>
+      </div>
+
+      {/* Account & Subscription */}
+      <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+        <div className="glass-card rounded-2xl p-6">
+          <h2 className="mb-4 text-sm font-semibold uppercase tracking-wider text-white/40">
+            Account & Subscription
+          </h2>
+          <dl className="space-y-3">
+            {user.account && (
+              <>
+                <div className="flex justify-between">
+                  <dt className="text-sm text-white/60">Account</dt>
+                  <dd className="text-sm text-white">{user.account.name}</dd>
+                </div>
+                {user.account.display_code && (
+                  <div className="flex justify-between">
+                    <dt className="text-sm text-white/60">Display Code</dt>
+                    <dd className="text-sm font-mono text-white/70">{user.account.display_code}</dd>
+                  </div>
+                )}
+              </>
+            )}
+            {user.subscription ? (
+              <>
+                <div className="flex justify-between">
+                  <dt className="text-sm text-white/60">Plan</dt>
+                  <dd className="text-sm font-semibold text-white">
+                    {user.subscription.plan.charAt(0).toUpperCase() + user.subscription.plan.slice(1)}
+                  </dd>
+                </div>
+                <div className="flex justify-between">
+                  <dt className="text-sm text-white/60">Status</dt>
+                  <dd>
+                    <StatusBadge variant={user.subscription.status === 'trialing' ? 'warning' : 'success'}>
+                      {user.subscription.status}
+                    </StatusBadge>
+                  </dd>
+                </div>
+                {user.subscription.current_period_end && (
+                  <div className="flex justify-between">
+                    <dt className="text-sm text-white/60">Period End</dt>
+                    <dd className="text-sm text-white/70">{fmt(user.subscription.current_period_end)}</dd>
+                  </div>
+                )}
+              </>
+            ) : (
+              <div className="text-sm text-white/40">No subscription</div>
+            )}
+            <div className="flex justify-between">
+              <dt className="text-sm text-white/60">Joined</dt>
+              <dd className="text-sm text-white/70">{fmt(user.created_at)}</dd>
+            </div>
+          </dl>
+        </div>
+
+        {/* Admin Actions */}
+        <div className="glass-card rounded-2xl p-6">
+          <h2 className="mb-4 text-sm font-semibold uppercase tracking-wider text-white/40">
+            Admin Actions
+          </h2>
+          <div className="space-y-3">
+            <button
+              onClick={() => {
+                setSelectedPlan(user.subscription?.plan || 'free')
+                setPlanModalOpen(true)
+              }}
+              className="flex w-full items-center gap-3 rounded-lg border border-white/10 px-4 py-3 text-left text-sm text-white/70 hover:bg-white/5 hover:text-white"
+            >
+              <Shield className="h-4 w-4 text-white/40" />
+              Change Plan
+            </button>
+            <button
+              onClick={() => setTrialModalOpen(true)}
+              className="flex w-full items-center gap-3 rounded-lg border border-white/10 px-4 py-3 text-left text-sm text-white/70 hover:bg-white/5 hover:text-white"
+            >
+              <Clock className="h-4 w-4 text-white/40" />
+              {user.subscription?.status === 'trialing' ? 'Extend Trial' : 'Start Trial'}
+            </button>
+            <button
+              onClick={handleToggleActive}
+              className={cn(
+                'flex w-full items-center gap-3 rounded-lg border px-4 py-3 text-left text-sm',
+                user.is_active
+                  ? 'border-red-500/20 text-red-400 hover:bg-red-500/5'
+                  : 'border-emerald-500/20 text-emerald-400 hover:bg-emerald-500/5'
+              )}
+            >
+              {user.is_active ? (
+                <><UserX className="h-4 w-4" /> Deactivate User</>
+              ) : (
+                <><UserCheck className="h-4 w-4" /> Activate User</>
+              )}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Invite Code Used */}
+      {user.invite_code_used && (
+        <div className="glass-card rounded-2xl p-6">
+          <h2 className="mb-4 text-sm font-semibold uppercase tracking-wider text-white/40">
+            <Ticket className="mr-2 inline h-4 w-4" />
+            Invite Code Used
+          </h2>
+          <dl className="grid grid-cols-2 gap-4 md:grid-cols-4">
+            <div>
+              <dt className="text-xs text-white/40">Code</dt>
+              <dd className="mt-1 font-mono text-sm text-white/70">{user.invite_code_used.code}</dd>
+            </div>
+            <div>
+              <dt className="text-xs text-white/40">Plan Assigned</dt>
+              <dd className="mt-1 text-sm text-white/70">
+                {user.invite_code_used.assigned_plan.charAt(0).toUpperCase() + user.invite_code_used.assigned_plan.slice(1)}
+              </dd>
+            </div>
+            <div>
+              <dt className="text-xs text-white/40">Trial Days</dt>
+              <dd className="mt-1 text-sm text-white/70">{user.invite_code_used.trial_duration_days ?? '—'}</dd>
+            </div>
+            <div>
+              <dt className="text-xs text-white/40">Created By</dt>
+              <dd className="mt-1 text-sm text-white/70">{user.invite_code_used.created_by_email ?? '—'}</dd>
+            </div>
+          </dl>
+        </div>
+      )}
+
+      {/* Tabs: Sessions / Audit Logs */}
+      <div className="glass-card rounded-2xl">
+        <div className="flex border-b border-white/[0.06]">
+          <button
+            onClick={() => setActiveTab('sessions')}
+            className={cn(
+              'px-6 py-3 text-sm font-medium',
+              activeTab === 'sessions' ? 'border-b-2 border-white text-white' : 'text-white/40 hover:text-white/60'
+            )}
+          >
+            Sessions ({user.total_sessions})
+          </button>
+          <button
+            onClick={() => setActiveTab('audit')}
+            className={cn(
+              'px-6 py-3 text-sm font-medium',
+              activeTab === 'audit' ? 'border-b-2 border-white text-white' : 'text-white/40 hover:text-white/60'
+            )}
+          >
+            Audit Logs ({user.total_audit_logs})
+          </button>
+        </div>
+
+        <div className="p-6">
+          {activeTab === 'sessions' && (
+            user.recent_sessions.length > 0 ? (
+              <table className="w-full">
+                <thead>
+                  <tr className="border-b border-white/[0.06] text-left text-xs text-white/40">
+                    <th className="pb-2 font-medium">Tree</th>
+                    <th className="pb-2 font-medium">Started</th>
+                    <th className="pb-2 font-medium">Completed</th>
+                    <th className="pb-2 font-medium">Outcome</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {user.recent_sessions.map(s => (
+                    <tr key={s.id} className="border-b border-white/[0.03]">
+                      <td className="py-3 text-sm text-white/70">{s.tree_name ?? '—'}</td>
+                      <td className="py-3 text-sm text-white/40">{fmtFull(s.started_at)}</td>
+                      <td className="py-3 text-sm text-white/40">{fmtFull(s.completed_at)}</td>
+                      <td className="py-3">
+                        {s.outcome ? (
+                          <StatusBadge variant={s.outcome === 'resolved' ? 'success' : 'default'}>
+                            {s.outcome}
+                          </StatusBadge>
+                        ) : (
+                          <span className="text-sm text-white/30">—</span>
+                        )}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            ) : (
+              <div className="py-8 text-center text-sm text-white/40">No sessions yet</div>
+            )
+          )}
+
+          {activeTab === 'audit' && (
+            user.recent_audit_logs.length > 0 ? (
+              <table className="w-full">
+                <thead>
+                  <tr className="border-b border-white/[0.06] text-left text-xs text-white/40">
+                    <th className="pb-2 font-medium">Action</th>
+                    <th className="pb-2 font-medium">Resource</th>
+                    <th className="pb-2 font-medium">Time</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {user.recent_audit_logs.map(a => (
+                    <tr key={a.id} className="border-b border-white/[0.03]">
+                      <td className="py-3 text-sm text-white/70">{a.action}</td>
+                      <td className="py-3 text-sm text-white/40">{a.resource_type ?? '—'}</td>
+                      <td className="py-3 text-sm text-white/40">{fmtFull(a.created_at)}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            ) : (
+              <div className="py-8 text-center text-sm text-white/40">No audit logs yet</div>
+            )
+          )}
+        </div>
+      </div>
+
+      {/* Change Plan Modal */}
+      <Modal
+        isOpen={planModalOpen}
+        onClose={() => setPlanModalOpen(false)}
+        title="Change Subscription Plan"
+        size="sm"
+        footer={
+          <div className="flex justify-end gap-3">
+            <button
+              onClick={() => setPlanModalOpen(false)}
+              className="rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60 hover:bg-white/10"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleChangePlan}
+              className="rounded-md bg-white px-4 py-2 text-sm font-medium text-black hover:bg-white/90"
+            >
+              Update Plan
+            </button>
+          </div>
+        }
+      >
+        <div>
+          <label className="mb-1 block text-sm font-medium text-white">Plan</label>
+          <select
+            aria-label="Subscription plan"
+            value={selectedPlan}
+            onChange={(e) => setSelectedPlan(e.target.value)}
+            className={inputClass}
+          >
+            {PLAN_OPTIONS.map(p => (
+              <option key={p} value={p}>{p.charAt(0).toUpperCase() + p.slice(1)}</option>
+            ))}
+          </select>
+        </div>
+      </Modal>
+
+      {/* Extend Trial Modal */}
+      <Modal
+        isOpen={trialModalOpen}
+        onClose={() => setTrialModalOpen(false)}
+        title={user.subscription?.status === 'trialing' ? 'Extend Trial' : 'Start Trial'}
+        size="sm"
+        footer={
+          <div className="flex justify-end gap-3">
+            <button
+              onClick={() => setTrialModalOpen(false)}
+              className="rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60 hover:bg-white/10"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleExtendTrial}
+              className="rounded-md bg-white px-4 py-2 text-sm font-medium text-black hover:bg-white/90"
+            >
+              {user.subscription?.status === 'trialing' ? 'Extend' : 'Start Trial'}
+            </button>
+          </div>
+        }
+      >
+        <div>
+          <label className="mb-1 block text-sm font-medium text-white">Days to add</label>
+          <input
+            type="number"
+            value={trialDays}
+            onChange={(e) => setTrialDays(e.target.value)}
+            min={1}
+            max={90}
+            className={inputClass}
+          />
+          <p className="mt-1 text-xs text-white/40">1-90 days. Will convert to trialing status if not already.</p>
+        </div>
+      </Modal>
+    </div>
+  )
+}
+
+export default UserDetailPage

frontend/src/pages/admin/UsersPage.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, useCallback } from 'react'
-import { UserCheck, UserX, Shield, ArrowRightLeft } from 'lucide-react'
+import { useNavigate } from 'react-router-dom'
+import { UserCheck, UserX, Shield, ArrowRightLeft, ExternalLink } from 'lucide-react'
 import { DataTable, Pagination, SearchInput, PageHeader, StatusBadge, ActionMenu } from '@/components/admin'
 import type { Column } from '@/components/admin'
 import { Modal } from '@/components/common/Modal'
@@ -21,6 +22,7 @@ interface AdminUser {
 }
 
 export function UsersPage() {
+  const navigate = useNavigate()
   const [users, setUsers] = useState<AdminUser[]>([])
   const [loading, setLoading] = useState(true)
   const [search, setSearch] = useState('')
@@ -140,6 +142,11 @@ export function UsersPage() {
       className: 'w-12',
       render: (u) => (
         <ActionMenu items={[
+          {
+            label: 'View Detail',
+            icon: <ExternalLink className="h-4 w-4" />,
+            onClick: () => navigate(`/admin/users/${u.id}`),
+          },
           {
             label: 'Change Role',
             icon: <Shield className="h-4 w-4" />,

frontend/src/router.tsx

@@ -21,6 +21,7 @@ const AccountSettingsPage = lazy(() => import('@/pages/AccountSettingsPage'))
 const AdminLayout = lazy(() => import('@/components/admin/AdminLayout'))
 const AdminDashboardPage = lazy(() => import('@/pages/admin/DashboardPage'))
 const AdminUsersPage = lazy(() => import('@/pages/admin/UsersPage'))
+const AdminUserDetailPage = lazy(() => import('@/pages/admin/UserDetailPage'))
 const AdminInviteCodesPage = lazy(() => import('@/pages/admin/InviteCodesPage'))
 const AdminAuditLogsPage = lazy(() => import('@/pages/admin/AuditLogsPage'))
 const AdminPlanLimitsPage = lazy(() => import('@/pages/admin/PlanLimitsPage'))
@@ -143,6 +144,14 @@ export const router = createBrowserRouter([
               </Suspense>
             ),
           },
+          {
+            path: 'users/:userId',
+            element: (
+              <Suspense fallback={<PageLoader />}>
+                <AdminUserDetailPage />
+              </Suspense>
+            ),
+          },
           {
             path: 'invite-codes',
             element: (

frontend/src/types/admin.ts

@@ -128,3 +128,89 @@ export interface GlobalCategoryCreate {
   slug: string
   description?: string | null
 }
+
+// Invite code types (enhanced)
+export interface InviteCodeResponse {
+  id: string
+  code: string
+  created_by_id: string
+  used_by_id: string | null
+  expires_at: string | null
+  note: string | null
+  created_at: string
+  used_at: string | null
+  is_used: boolean
+  is_expired: boolean
+  is_valid: boolean
+  email: string | null
+  assigned_plan: string
+  trial_duration_days: number | null
+  email_sent_at: string | null
+  has_trial: boolean
+  email_sent: boolean
+}
+
+export interface InviteCodeCreateRequest {
+  expires_at?: string | null
+  note?: string | null
+  email?: string | null
+  assigned_plan?: 'free' | 'pro' | 'team'
+  trial_duration_days?: number | null
+}
+
+// User detail types
+export interface AccountSummary {
+  id: string
+  name: string
+  display_code: string | null
+}
+
+export interface SubscriptionSummary {
+  id: string
+  plan: string
+  status: string
+  current_period_start: string | null
+  current_period_end: string | null
+}
+
+export interface SessionSummary {
+  id: string
+  tree_name: string | null
+  started_at: string
+  completed_at: string | null
+  outcome: string | null
+}
+
+export interface AuditLogSummary {
+  id: string
+  action: string
+  resource_type: string | null
+  resource_id: string | null
+  created_at: string
+  details: Record<string, unknown> | null
+}
+
+export interface InviteCodeUsedSummary {
+  code: string
+  assigned_plan: string
+  trial_duration_days: number | null
+  created_by_email: string | null
+}
+
+export interface UserDetailResponse {
+  id: string
+  email: string
+  full_name: string | null
+  role: string
+  is_active: boolean
+  is_super_admin: boolean
+  is_team_admin: boolean
+  created_at: string
+  account: AccountSummary | null
+  subscription: SubscriptionSummary | null
+  invite_code_used: InviteCodeUsedSummary | null
+  recent_sessions: SessionSummary[]
+  total_sessions: number
+  recent_audit_logs: AuditLogSummary[]
+  total_audit_logs: number
+}