app/settings/SettingsPageClient.tsx

@@ -1,8 +1,11 @@
 'use client'
 
 import { useState } from 'react'
+import Link from 'next/link'
 import { useAuth } from '@/lib/auth/context'
 import ProfileSettings from '@/components/settings/ProfileSettings'
+import TrustedDevicesCard from '@/components/settings/TrustedDevicesCard'
+import SecurityActivityCard from '@/components/settings/SecurityActivityCard'
 import { motion, AnimatePresence } from 'framer-motion'
 import {
   UserIcon,
@@ -13,13 +16,26 @@ import {
   ExternalLinkIcon,
 } from '@ciphera-net/ui'
 
+// Inline SVG icons not available in ciphera-ui
+function BellIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
+      <path d="M13.73 21a2 2 0 0 1-3.46 0" />
+    </svg>
+  )
+}
+
 // --- Types ---
 
 type ProfileSubTab = 'profile' | 'security' | 'preferences'
 
 type ActiveSelection =
   | { section: 'profile'; subTab: ProfileSubTab }
+  | { section: 'notifications' }
   | { section: 'account' }
+  | { section: 'devices' }
+  | { section: 'activity' }
 
 type ExpandableSection = 'profile' | 'account'
 
@@ -217,8 +233,31 @@ function AppSettingsSection() {
     switch (active.section) {
       case 'profile':
         return <ProfileSettings activeTab={active.subTab} />
+      case 'notifications':
+        return (
+          <div className="bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 p-8 shadow-sm">
+            <div className="text-center max-w-md mx-auto">
+              <BellIcon className="w-12 h-12 text-neutral-300 mx-auto mb-4" />
+              <h3 className="text-lg font-medium text-neutral-900 dark:text-white mb-2">Notification Preferences</h3>
+              <p className="text-sm text-neutral-500 mb-4">
+                Configure which notifications you receive and how you want to be notified.
+              </p>
+              <Link
+                href="/notifications"
+                className="inline-flex items-center gap-2 px-4 py-2 bg-brand-orange text-white rounded-lg hover:bg-brand-orange/90 transition-colors"
+              >
+                Open Notification Center
+                <ChevronRightIcon className="w-4 h-4" />
+              </Link>
+            </div>
+          </div>
+        )
       case 'account':
         return <AccountManagementCard />
+      case 'devices':
+        return <TrustedDevicesCard />
+      case 'activity':
+        return <SecurityActivityCard />
       default:
         return null
     }
@@ -266,6 +305,17 @@ function AppSettingsSection() {
                 />
               </ExpandableSubItems>
             </div>
+
+            {/* Notifications (flat, no expansion) */}
+            <SectionHeader
+              expanded={false}
+              active={active.section === 'notifications'}
+              onToggle={() => setActive({ section: 'notifications' })}
+              icon={BellIcon}
+              label="Notifications"
+              description="Email and in-app notifications"
+              hasChildren={false}
+            />
           </div>
         </div>
 
@@ -308,16 +358,14 @@ function AppSettingsSection() {
                 external
               />
               <SubItem
-                active={false}
+                active={active.section === 'devices'}
-                onClick={() => window.open('https://auth.ciphera.net/devices', '_blank')}
+                onClick={() => setActive({ section: 'devices' })}
                 label="Trusted Devices"
-                external
               />
               <SubItem
-                active={false}
+                active={active.section === 'activity'}
-                onClick={() => window.open('https://auth.ciphera.net/activity', '_blank')}
+                onClick={() => setActive({ section: 'activity' })}
                 label="Security Activity"
-                external
               />
             </ExpandableSubItems>
           </div>

components/settings/SecurityActivityCard.tsx

@@ -0,0 +1,246 @@
+'use client'
+
+import { useEffect, useState, useCallback } from 'react'
+import { useAuth } from '@/lib/auth/context'
+import { getUserActivity, type AuditLogEntry } from '@/lib/api/activity'
+import { Spinner } from '@ciphera-net/ui'
+
+const PAGE_SIZE = 20
+
+const EVENT_LABELS: Record<string, string> = {
+  login_success: 'Sign in',
+  login_failure: 'Failed sign in',
+  oauth_login_success: 'OAuth sign in',
+  oauth_login_failure: 'Failed OAuth sign in',
+  password_change: 'Password changed',
+  '2fa_enabled': '2FA enabled',
+  '2fa_disabled': '2FA disabled',
+  recovery_codes_regenerated: 'Recovery codes regenerated',
+  account_deleted: 'Account deleted',
+}
+
+const EVENT_ICONS: Record<string, string> = {
+  login_success: 'M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9',
+  login_failure: 'M12 9v3.75m0-10.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.75c0 5.592 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.249-8.25-3.286zm0 13.036h.008v.008H12v-.008z',
+  oauth_login_success: 'M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9',
+  oauth_login_failure: 'M12 9v3.75m0-10.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.75c0 5.592 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.249-8.25-3.286zm0 13.036h.008v.008H12v-.008z',
+  password_change: 'M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z',
+  '2fa_enabled': 'M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z',
+  '2fa_disabled': 'M12 9v3.75m0-10.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.75c0 5.592 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.249-8.25-3.286zm0 13.036h.008v.008H12v-.008z',
+  recovery_codes_regenerated: 'M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z',
+  account_deleted: 'M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0',
+}
+
+function getEventColor(eventType: string, outcome: string): string {
+  if (outcome === 'failure') return 'text-red-500 dark:text-red-400 bg-red-50 dark:bg-red-950/30'
+  if (eventType === '2fa_enabled') return 'text-green-500 dark:text-green-400 bg-green-50 dark:bg-green-950/30'
+  if (eventType === '2fa_disabled') return 'text-amber-500 dark:text-amber-400 bg-amber-50 dark:bg-amber-950/30'
+  if (eventType === 'account_deleted') return 'text-red-500 dark:text-red-400 bg-red-50 dark:bg-red-950/30'
+  if (eventType === 'recovery_codes_regenerated') return 'text-amber-500 dark:text-amber-400 bg-amber-50 dark:bg-amber-950/30'
+  return 'text-neutral-500 dark:text-neutral-400 bg-neutral-100 dark:bg-neutral-800'
+}
+
+function getMethodLabel(entry: AuditLogEntry): string | null {
+  const method = entry.metadata?.method
+  if (!method) return null
+  if (method === 'magic_link') return 'Magic link'
+  if (method === 'passkey') return 'Passkey'
+  return method as string
+}
+
+function getFailureReason(entry: AuditLogEntry): string | null {
+  if (entry.outcome !== 'failure') return null
+  const reason = entry.metadata?.reason
+  if (!reason) return null
+  const labels: Record<string, string> = {
+    invalid_credentials: 'Invalid credentials',
+    invalid_password: 'Wrong password',
+    account_locked: 'Account locked',
+    email_not_verified: 'Email not verified',
+    invalid_2fa: 'Invalid 2FA code',
+  }
+  return labels[reason as string] || (reason as string).replace(/_/g, ' ')
+}
+
+function formatRelativeTime(dateStr: string): string {
+  const date = new Date(dateStr)
+  const now = new Date()
+  const diffMs = now.getTime() - date.getTime()
+  const diffMin = Math.floor(diffMs / 60000)
+  const diffHr = Math.floor(diffMin / 60)
+  const diffDay = Math.floor(diffHr / 24)
+
+  if (diffMin < 1) return 'Just now'
+  if (diffMin < 60) return `${diffMin}m ago`
+  if (diffHr < 24) return `${diffHr}h ago`
+  if (diffDay < 7) return `${diffDay}d ago`
+
+  return date.toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: date.getFullYear() !== now.getFullYear() ? 'numeric' : undefined,
+  })
+}
+
+function formatFullDate(dateStr: string): string {
+  return new Date(dateStr).toLocaleString('en-US', {
+    weekday: 'short',
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+  })
+}
+
+function parseBrowserName(ua: string): string {
+  if (!ua) return 'Unknown'
+  if (ua.includes('Firefox')) return 'Firefox'
+  if (ua.includes('Edg/')) return 'Edge'
+  if (ua.includes('Chrome')) return 'Chrome'
+  if (ua.includes('Safari')) return 'Safari'
+  if (ua.includes('Opera') || ua.includes('OPR')) return 'Opera'
+  return 'Browser'
+}
+
+function parseOS(ua: string): string {
+  if (!ua) return ''
+  if (ua.includes('Mac OS X')) return 'macOS'
+  if (ua.includes('Windows')) return 'Windows'
+  if (ua.includes('Linux')) return 'Linux'
+  if (ua.includes('Android')) return 'Android'
+  if (ua.includes('iPhone') || ua.includes('iPad')) return 'iOS'
+  return ''
+}
+
+export default function SecurityActivityCard() {
+  const { user } = useAuth()
+  const [entries, setEntries] = useState<AuditLogEntry[]>([])
+  const [totalCount, setTotalCount] = useState(0)
+  const [hasMore, setHasMore] = useState(false)
+  const [loading, setLoading] = useState(true)
+  const [loadingMore, setLoadingMore] = useState(false)
+  const [error, setError] = useState('')
+  const [offset, setOffset] = useState(0)
+
+  const fetchActivity = useCallback(async (currentOffset: number, append: boolean) => {
+    try {
+      const data = await getUserActivity(PAGE_SIZE, currentOffset)
+      const newEntries = data.entries ?? []
+      setEntries(prev => append ? [...prev, ...newEntries] : newEntries)
+      setTotalCount(data.total_count)
+      setHasMore(data.has_more)
+      setOffset(currentOffset + newEntries.length)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load activity')
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!user) return
+    setLoading(true)
+    fetchActivity(0, false).finally(() => setLoading(false))
+  }, [user, fetchActivity])
+
+  const handleLoadMore = async () => {
+    setLoadingMore(true)
+    await fetchActivity(offset, true)
+    setLoadingMore(false)
+  }
+
+  return (
+    <div>
+      <h2 className="text-xl font-semibold text-neutral-900 dark:text-white mb-1">Security Activity</h2>
+      <p className="text-neutral-500 dark:text-neutral-400 text-sm mb-6">
+        Recent security events on your account{totalCount > 0 ? ` (${totalCount})` : ''}
+      </p>
+
+      {loading ? (
+        <div className="flex items-center justify-center py-12">
+          <Spinner />
+        </div>
+      ) : error ? (
+        <div className="rounded-2xl border border-red-200 dark:border-red-900/50 bg-red-50 dark:bg-red-950/20 p-6 text-center">
+          <p className="text-red-600 dark:text-red-400">{error}</p>
+        </div>
+      ) : entries.length === 0 ? (
+        <div className="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-8 text-center">
+          <svg className="w-12 h-12 mx-auto mb-3 text-neutral-300 dark:text-neutral-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
+          </svg>
+          <p className="text-neutral-500 dark:text-neutral-400">No activity recorded yet.</p>
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {entries.map((entry) => {
+            const label = EVENT_LABELS[entry.event_type] || entry.event_type.replace(/_/g, ' ')
+            const color = getEventColor(entry.event_type, entry.outcome)
+            const iconPath = EVENT_ICONS[entry.event_type] || EVENT_ICONS['login_success']
+            const method = getMethodLabel(entry)
+            const reason = getFailureReason(entry)
+            const browser = entry.user_agent ? parseBrowserName(entry.user_agent) : null
+            const os = entry.user_agent ? parseOS(entry.user_agent) : null
+            const deviceStr = [browser, os].filter(Boolean).join(' on ')
+
+            return (
+              <div
+                key={entry.id}
+                className="flex items-start gap-3 rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-4 py-3"
+              >
+                <div className={`flex-shrink-0 w-9 h-9 rounded-lg flex items-center justify-center mt-0.5 ${color}`}>
+                  <svg className="w-4.5 h-4.5" fill="none" stroke="currentColor" strokeWidth={1.5} viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" d={iconPath} />
+                  </svg>
+                </div>
+
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2 flex-wrap">
+                    <span className="font-medium text-neutral-900 dark:text-white text-sm">
+                      {label}
+                    </span>
+                    {method && (
+                      <span className="text-xs px-1.5 py-0.5 rounded bg-neutral-100 dark:bg-neutral-800 text-neutral-500 dark:text-neutral-400">
+                        {method}
+                      </span>
+                    )}
+                    {entry.outcome === 'failure' && (
+                      <span className="text-xs px-1.5 py-0.5 rounded bg-red-100 dark:bg-red-950/40 text-red-600 dark:text-red-400">
+                        Failed
+                      </span>
+                    )}
+                  </div>
+                  <div className="flex items-center gap-2 mt-0.5 text-xs text-neutral-500 dark:text-neutral-400 flex-wrap">
+                    {reason && <span>{reason}</span>}
+                    {reason && (deviceStr || entry.ip_address) && <span>&middot;</span>}
+                    {deviceStr && <span>{deviceStr}</span>}
+                    {deviceStr && entry.ip_address && <span>&middot;</span>}
+                    {entry.ip_address && <span>{entry.ip_address}</span>}
+                  </div>
+                </div>
+
+                <div className="flex-shrink-0 text-right">
+                  <span className="text-xs text-neutral-500 dark:text-neutral-400" title={formatFullDate(entry.created_at)}>
+                    {formatRelativeTime(entry.created_at)}
+                  </span>
+                </div>
+              </div>
+            )
+          })}
+
+          {hasMore && (
+            <div className="pt-2 text-center">
+              <button
+                type="button"
+                onClick={handleLoadMore}
+                disabled={loadingMore}
+                className="text-sm font-medium text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors disabled:opacity-50"
+              >
+                {loadingMore ? 'Loading...' : 'Load more'}
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

components/settings/TrustedDevicesCard.tsx

@@ -0,0 +1,160 @@
+'use client'
+
+import { useEffect, useState, useCallback } from 'react'
+import { useAuth } from '@/lib/auth/context'
+import { getUserDevices, removeDevice, type TrustedDevice } from '@/lib/api/devices'
+import { Spinner, toast } from '@ciphera-net/ui'
+
+function formatRelativeTime(dateStr: string): string {
+  const date = new Date(dateStr)
+  const now = new Date()
+  const diffMs = now.getTime() - date.getTime()
+  const diffMin = Math.floor(diffMs / 60000)
+  const diffHr = Math.floor(diffMin / 60)
+  const diffDay = Math.floor(diffHr / 24)
+
+  if (diffMin < 1) return 'Just now'
+  if (diffMin < 60) return `${diffMin}m ago`
+  if (diffHr < 24) return `${diffHr}h ago`
+  if (diffDay < 7) return `${diffDay}d ago`
+
+  return date.toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: date.getFullYear() !== now.getFullYear() ? 'numeric' : undefined,
+  })
+}
+
+function formatFullDate(dateStr: string): string {
+  return new Date(dateStr).toLocaleString('en-US', {
+    weekday: 'short',
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+  })
+}
+
+function getDeviceIcon(hint: string): string {
+  const h = hint.toLowerCase()
+  if (h.includes('iphone') || h.includes('android') || h.includes('ios')) {
+    return 'M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3'
+  }
+  return 'M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25A2.25 2.25 0 015.25 3h13.5A2.25 2.25 0 0121 5.25z'
+}
+
+export default function TrustedDevicesCard() {
+  const { user } = useAuth()
+  const [devices, setDevices] = useState<TrustedDevice[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')
+  const [removingId, setRemovingId] = useState<string | null>(null)
+
+  const fetchDevices = useCallback(async () => {
+    try {
+      const data = await getUserDevices()
+      setDevices(data.devices ?? [])
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load devices')
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!user) return
+    setLoading(true)
+    fetchDevices().finally(() => setLoading(false))
+  }, [user, fetchDevices])
+
+  const handleRemove = async (device: TrustedDevice) => {
+    if (device.is_current) {
+      toast.error('You cannot remove the device you are currently using.')
+      return
+    }
+
+    setRemovingId(device.id)
+    try {
+      await removeDevice(device.id)
+      setDevices(prev => prev.filter(d => d.id !== device.id))
+      toast.success('Device removed. A new sign-in from it will trigger an alert.')
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : 'Failed to remove device')
+    } finally {
+      setRemovingId(null)
+    }
+  }
+
+  return (
+    <div>
+      <h2 className="text-xl font-semibold text-neutral-900 dark:text-white mb-1">Trusted Devices</h2>
+      <p className="text-neutral-500 dark:text-neutral-400 text-sm mb-6">
+        Devices that have signed in to your account. Removing a device means the next sign-in from it will trigger a new device alert.
+      </p>
+
+      {loading ? (
+        <div className="flex items-center justify-center py-12">
+          <Spinner />
+        </div>
+      ) : error ? (
+        <div className="rounded-2xl border border-red-200 dark:border-red-900/50 bg-red-50 dark:bg-red-950/20 p-6 text-center">
+          <p className="text-red-600 dark:text-red-400">{error}</p>
+        </div>
+      ) : devices.length === 0 ? (
+        <div className="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-8 text-center">
+          <svg className="w-12 h-12 mx-auto mb-3 text-neutral-300 dark:text-neutral-600" fill="none" stroke="currentColor" strokeWidth={1.5} viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25A2.25 2.25 0 015.25 3h13.5A2.25 2.25 0 0121 5.25z" />
+          </svg>
+          <p className="text-neutral-500 dark:text-neutral-400">No trusted devices yet. They appear after you sign in.</p>
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {devices.map((device) => (
+            <div
+              key={device.id}
+              className="flex items-center gap-3 rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-4 py-3"
+            >
+              <div className="flex-shrink-0 w-9 h-9 rounded-lg flex items-center justify-center bg-neutral-100 dark:bg-neutral-800 text-neutral-500 dark:text-neutral-400">
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth={1.5} viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" d={getDeviceIcon(device.display_hint)} />
+                </svg>
+              </div>
+
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2">
+                  <span className="font-medium text-neutral-900 dark:text-white text-sm truncate">
+                    {device.display_hint || 'Unknown device'}
+                  </span>
+                  {device.is_current && (
+                    <span className="text-xs px-1.5 py-0.5 rounded bg-green-100 dark:bg-green-950/40 text-green-600 dark:text-green-400 flex-shrink-0">
+                      This device
+                    </span>
+                  )}
+                </div>
+                <div className="flex items-center gap-2 mt-0.5 text-xs text-neutral-500 dark:text-neutral-400">
+                  <span title={formatFullDate(device.first_seen_at)}>
+                    First seen {formatRelativeTime(device.first_seen_at)}
+                  </span>
+                  <span>&middot;</span>
+                  <span title={formatFullDate(device.last_seen_at)}>
+                    Last seen {formatRelativeTime(device.last_seen_at)}
+                  </span>
+                </div>
+              </div>
+
+              {!device.is_current && (
+                <button
+                  type="button"
+                  onClick={() => handleRemove(device)}
+                  disabled={removingId === device.id}
+                  className="flex-shrink-0 text-xs font-medium text-red-600 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 transition-colors disabled:opacity-50"
+                >
+                  {removingId === device.id ? 'Removing...' : 'Remove'}
+                </button>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

lib/api/activity.ts

@@ -0,0 +1,28 @@
+import apiRequest from './client'
+
+export interface AuditLogEntry {
+  id: string
+  created_at: string
+  event_type: string
+  outcome: string
+  ip_address?: string
+  user_agent?: string
+  metadata?: Record<string, string>
+}
+
+export interface ActivityResponse {
+  entries: AuditLogEntry[] | null
+  total_count: number
+  has_more: boolean
+  limit: number
+  offset: number
+}
+
+export async function getUserActivity(
+  limit = 20,
+  offset = 0
+): Promise<ActivityResponse> {
+  return apiRequest<ActivityResponse>(
+    `/auth/user/activity?limit=${limit}&offset=${offset}`
+  )
+}

lib/api/devices.ts

@@ -0,0 +1,19 @@
+import apiRequest from './client'
+
+export interface TrustedDevice {
+  id: string
+  display_hint: string
+  first_seen_at: string
+  last_seen_at: string
+  is_current: boolean
+}
+
+export async function getUserDevices(): Promise<{ devices: TrustedDevice[] }> {
+  return apiRequest<{ devices: TrustedDevice[] }>('/auth/user/devices')
+}
+
+export async function removeDevice(deviceId: string): Promise<void> {
+  return apiRequest<void>(`/auth/user/devices/${deviceId}`, {
+    method: 'DELETE',
+  })
+}