@adobedjangir/commerce-admin-audit-log 0.1.0

package/actions/ext.config.yaml

@@ -0,0 +1,21 @@
+# Action fragment for the audit-log add-on. The host's app.config.yaml
+# $includes this file under `application.runtimeManifest.packages.AuditLog`
+# — so this file should contain ONLY the body of that package definition
+# (license + actions), not the `packages:` wrapper.
+license: Apache-2.0
+actions:
+  system-config-audit-list:
+    function: system-config-audit-list/index.js
+    web: 'yes'
+    runtime: 'nodejs:20'
+    inputs:
+      LOG_LEVEL: debug
+      OAUTH_CLIENT_ID: $OAUTH_CLIENT_ID
+      OAUTH_CLIENT_SECRET: $OAUTH_CLIENT_SECRET
+      OAUTH_ORG_ID: $OAUTH_ORG_ID
+      OAUTH_SCOPES: $OAUTH_SCOPES
+      AIO_DB_REGION: $AIO_DB_REGION
+    annotations:
+      require-adobe-auth: false
+      include-ims-credentials: true
+      final: true

package/actions/system-config-audit-list/index.js

@@ -0,0 +1,78 @@
+/*
+Copyright 2025 Adobe. All rights reserved.
+Licensed under the Apache License, Version 2.0
+*/
+
+// Paginated audit-log reader. Returns newest entries first; supports filtering
+// by scope, path substring, actor, and date range. The save action writes
+// the docs; this action only reads. Sensitive values are already redacted at
+// write time, so this endpoint is safe to expose to read-only roles.
+
+const { Core } = require('@adobe/aio-sdk')
+const { errorResponse } = require('@adobedjangir/commerce-admin-management/actions/utils')
+const { getClient } = require('@adobedjangir/commerce-admin-management/abdb')
+
+const COLLECTION = 'system_config_audit'
+const DEFAULT_LIMIT = 100
+const MAX_LIMIT = 500
+
+function buildFilter (params) {
+  const f = {}
+  if (params.scope) f.scope = String(params.scope)
+  if (params.scopeId) f.scope_id = String(params.scopeId)
+  if (params.actor) f.changedBy = String(params.actor)
+  if (params.action && ['create', 'update', 'delete'].includes(params.action)) {
+    f.action = params.action
+  }
+  if (params.since) f.changedAt = { ...(f.changedAt || {}), $gte: String(params.since) }
+  if (params.until) f.changedAt = { ...(f.changedAt || {}), $lte: String(params.until) }
+  return f
+}
+
+async function main (params) {
+  const logger = Core.Logger('system-config-audit-list', { level: params.LOG_LEVEL || 'info' })
+
+  const limit = Math.min(
+    Math.max(parseInt(params.limit, 10) || DEFAULT_LIMIT, 1),
+    MAX_LIMIT
+  )
+  const skip = Math.max(parseInt(params.skip, 10) || 0, 0)
+  const filter = buildFilter(params)
+  // Client-side path filter — $regex isn't reliably supported across ABDB
+  // driver versions, so we do a substring match in app-land after fetch.
+  const pathFilter = params.path ? String(params.path).toLowerCase() : null
+
+  let dbHandle
+  try {
+    dbHandle = await getClient(params)
+  } catch (e) {
+    return errorResponse(500, `ABDB connect failed: ${e.message}`, logger)
+  }
+  const { client, close } = dbHandle
+
+  try {
+    const col = await client.collection(COLLECTION)
+    // Newest first. Without an index ABDB will scan, but the cap on audit
+    // doc count keeps this bounded.
+    let cursor = col.find(filter).sort({ changedAt: -1 })
+    if (!pathFilter) {
+      cursor = cursor.skip(skip).limit(limit)
+    }
+    let docs = await cursor.toArray()
+    if (pathFilter) {
+      docs = docs.filter((d) => (d.path || '').toLowerCase().includes(pathFilter))
+      docs = docs.slice(skip, skip + limit)
+    }
+    return {
+      statusCode: 200,
+      body: { ok: true, items: docs, limit, skip, returned: docs.length }
+    }
+  } catch (error) {
+    logger.error(error)
+    return errorResponse(500, error.message || 'audit list failed', logger)
+  } finally {
+    try { await close() } catch (_) {}
+  }
+}
+
+exports.main = main

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@adobedjangir/commerce-admin-audit-log",
+  "version": "0.1.0",
+  "description": "Audit log + revert add-on for @adobedjangir/commerce-admin-management. Records every system_config change with old/new/actor and exposes a UI tab to inspect + revert.",
+  "license": "Apache-2.0",
+  "author": "Adobe Inc.",
+  "keywords": ["adobe-io", "aio", "app-builder", "commerce-admin", "audit-log"],
+  "main": "./src/index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./hook": "./src/hook.js",
+    "./web": "./web/index.js"
+  },
+  "scripts": {
+    "postinstall": "node ./scripts/setup.js"
+  },
+  "files": ["src", "actions", "web", "scripts", "README.md"],
+  "engines": { "node": ">=18" },
+  "peerDependencies": {
+    "@adobedjangir/commerce-admin-management": ">=0.3.0",
+    "@adobedjangir/commerce-admin-get-config": ">=0.0.7"
+  }
+}

package/scripts/setup.js

@@ -0,0 +1,168 @@
+#!/usr/bin/env node
+/*
+Copyright 2025 Adobe. All rights reserved.
+Licensed under the Apache License, Version 2.0
+*/
+
+const fs = require('fs')
+const path = require('path')
+
+// ── Per-add-on configuration ──
+const PACKAGE_NAME = '@adobedjangir/commerce-admin-audit-log'
+const RUNTIME_KEY  = 'AuditLog'
+const INCLUDE_REL  = 'node_modules/@adobedjangir/commerce-admin-audit-log/actions/ext.config.yaml'
+const REGISTER_IMPORT = "import registerAuditLog from '@adobedjangir/commerce-admin-audit-log/web'"
+const REGISTER_CALL   = 'registerAuditLog()'
+const MARKER = `# ${PACKAGE_NAME} (auto-linked on npm install)`
+
+// ── Boilerplate (identical across add-ons; small enough to inline) ──
+function findProjectRoot (startDir) {
+  let dir = startDir
+  while (dir && dir !== path.dirname(dir)) {
+    if (fs.existsSync(path.join(dir, 'app.config.yaml'))) return dir
+    dir = path.dirname(dir)
+  }
+  return null
+}
+function resolveProjectRoot () {
+  return (process.env.INIT_CWD && findProjectRoot(process.env.INIT_CWD)) ||
+         findProjectRoot(process.cwd())
+}
+
+/**
+ * Add (or replace) an `application.runtimeManifest.packages.<RUNTIME_KEY>`
+ * block that $includes our fragment. Idempotent.
+ */
+function patchAppConfig (content) {
+  // Look for our own marker to detect prior installs.
+  const blockRe = new RegExp(
+    String.raw`^[ \t]*${MARKER}\n([ \t]+${RUNTIME_KEY}:[ \t]*\n[ \t]+\$include:[^\n]*\n)`, 'm'
+  )
+  const desiredBody = `      ${MARKER}\n      ${RUNTIME_KEY}:\n        $include: ${INCLUDE_REL}\n`
+
+  if (blockRe.test(content)) {
+    // Already linked — leave it.
+    return { content, changed: false, reason: 'already-linked' }
+  }
+
+  // 1. application.runtimeManifest.packages exists → append our subkey.
+  if (/^application:[ \t]*\n([ \t]+[^\n]*\n)*[ \t]+runtimeManifest:[ \t]*\n([ \t]+[^\n]*\n)*[ \t]+packages:[ \t]*\n/m.test(content)) {
+    const next = content.replace(
+      /([ \t]+packages:[ \t]*\n)/m,
+      (m) => m + desiredBody
+    )
+    return { content: next, changed: next !== content, reason: 'appended-under-packages' }
+  }
+
+  // 2. application.runtimeManifest exists but no `packages:` → add one.
+  if (/^application:[ \t]*\n([ \t]+[^\n]*\n)*[ \t]+runtimeManifest:[ \t]*\n/m.test(content)) {
+    const next = content.replace(
+      /([ \t]+runtimeManifest:[ \t]*\n)/m,
+      (m) => m + `    packages:\n${desiredBody}`
+    )
+    return { content: next, changed: next !== content, reason: 'added-packages' }
+  }
+
+  // 3. application: exists but no runtimeManifest → add the whole tree.
+  if (/^application:[ \t]*\n/m.test(content)) {
+    const next = content.replace(
+      /^application:[ \t]*\n/m,
+      `application:\n  runtimeManifest:\n    packages:\n${desiredBody}`
+    )
+    return { content: next, changed: next !== content, reason: 'added-runtimeManifest' }
+  }
+
+  // 4. No application: → append the whole block.
+  const trimmed = content.replace(/\s+$/, '')
+  const sep = trimmed ? '\n\n' : ''
+  return {
+    content: `${trimmed}${sep}application:\n  runtimeManifest:\n    packages:\n${desiredBody}`,
+    changed: true,
+    reason: 'appended-application'
+  }
+}
+
+/**
+ * Patch the host's web-src/src/index.js to import + call our register fn.
+ * We look for a managed `// --- COMMERCE-ADMIN ADDONS ---` block; if it's
+ * absent we add one. Idempotent — the registration line is only added once.
+ */
+function patchBootstrap (content) {
+  const blockStart = '// --- COMMERCE-ADMIN ADDONS (auto-managed) ---'
+  const blockEnd   = '// --- COMMERCE-ADMIN ADDONS END ---'
+  // Already registered?
+  if (content.includes(REGISTER_IMPORT) && content.includes(REGISTER_CALL)) {
+    return { content, changed: false, reason: 'already-registered' }
+  }
+
+  // Find or create the managed block.
+  if (content.includes(blockStart)) {
+    // Insert our import + call inside the block.
+    const next = content.replace(
+      blockStart + '\n',
+      blockStart + '\n' + REGISTER_IMPORT + '\n' + REGISTER_CALL + '\n'
+    )
+    return { content: next, changed: true, reason: 'inserted-into-existing-block' }
+  }
+
+  // No block yet — append one after `configureWeb({...})` call.
+  const cwRe = /configureWeb\s*\([^)]*\)\s*\n/
+  if (cwRe.test(content)) {
+    const next = content.replace(
+      cwRe,
+      (m) => m + '\n' + blockStart + '\n' + REGISTER_IMPORT + '\n' + REGISTER_CALL + '\n' + blockEnd + '\n'
+    )
+    return { content: next, changed: true, reason: 'created-block-after-configureWeb' }
+  }
+
+  // No configureWeb? Append at end as a best effort.
+  return {
+    content: content + '\n' + blockStart + '\n' + REGISTER_IMPORT + '\n' + REGISTER_CALL + '\n' + blockEnd + '\n',
+    changed: true,
+    reason: 'appended-block-at-end'
+  }
+}
+
+function main () {
+  if (process.env.CONFIGURATION_MANAGEMENT_SKIP_SETUP === '1') return
+  const root = resolveProjectRoot()
+  if (!root) {
+    console.log(`[${PACKAGE_NAME}] No app.config.yaml found — skip setup.`)
+    return
+  }
+
+  // 1. app.config.yaml
+  const cfg = path.join(root, 'app.config.yaml')
+  if (fs.existsSync(cfg)) {
+    const before = fs.readFileSync(cfg, 'utf8')
+    const { content, changed, reason } = patchAppConfig(before)
+    if (changed) {
+      fs.writeFileSync(cfg, content, 'utf8')
+      console.log(`[${PACKAGE_NAME}] app.config.yaml: ${reason}`)
+    } else {
+      console.log(`[${PACKAGE_NAME}] app.config.yaml: ${reason}`)
+    }
+  }
+
+  // 2. bootstrap (web-src/src/index.js)
+  const boot = path.join(root, 'web-src', 'src', 'index.js')
+  if (fs.existsSync(boot)) {
+    const before = fs.readFileSync(boot, 'utf8')
+    const { content, changed, reason } = patchBootstrap(before)
+    if (changed) {
+      fs.writeFileSync(boot, content, 'utf8')
+      console.log(`[${PACKAGE_NAME}] web-src/src/index.js: ${reason}`)
+    } else {
+      console.log(`[${PACKAGE_NAME}] web-src/src/index.js: ${reason}`)
+    }
+  }
+}
+
+if (require.main === module) {
+  try { main() } catch (err) {
+    // Never fail npm install on scaffold issues.
+    console.error(`[${PACKAGE_NAME}] setup error (install continues):`, err.message)
+  }
+}
+
+module.exports = { patchAppConfig, patchBootstrap }

package/src/hook.js

@@ -0,0 +1,56 @@
+/*
+Copyright 2025 Adobe. All rights reserved.
+Licensed under the Apache License, Version 2.0
+*/
+
+// Server-side hook for core's system-config-save. Core soft-requires this
+// module (`try { require('@adobedjangir/commerce-admin-audit-log/hook') } catch {}`)
+// — when the add-on is not installed, audit writes silently no-op.
+
+const AUDIT_COLLECTION = 'system_config_audit'
+const AUDIT_MAX_DOCS = 10000
+
+async function ensureCollection (client, name) {
+  try {
+    await client.createCollection(name)
+  } catch (err) {
+    const msg = (err && err.message) ? String(err.message) : String(err)
+    if (!/exist|already|duplicate/i.test(msg)) throw err
+  }
+}
+
+/**
+ * Append a batch of audit entries. Best-effort; never throws.
+ *
+ * @param {object} client     ABDB client from core's getClient(...)
+ * @param {Array}  entries    [{ scope, scope_id, path, action, oldValue, newValue, changedBy, changedAt }]
+ * @param {object} [logger]   aio logger
+ */
+async function recordAuditEntries (client, entries, logger) {
+  const log = logger || { warn: () => {} }
+  if (!client || !Array.isArray(entries) || entries.length === 0) return
+  try {
+    await ensureCollection(client, AUDIT_COLLECTION)
+    const col = await client.collection(AUDIT_COLLECTION)
+    try {
+      await col.insertMany(entries)
+    } catch (err) {
+      const msg = (err && err.message) ? String(err.message) : String(err)
+      if (!/insertMany|unsupported|not implemented/i.test(msg)) throw err
+      for (const e of entries) await col.insertOne(e)
+    }
+    // Best-effort cap.
+    try {
+      const total = await col.countDocuments({})
+      if (total > AUDIT_MAX_DOCS) {
+        const over = total - AUDIT_MAX_DOCS
+        const oldest = await col.find({}).sort({ changedAt: 1 }).limit(over).toArray()
+        for (const o of oldest) await col.deleteOne({ _id: o._id })
+      }
+    } catch (_) { /* compaction is best-effort */ }
+  } catch (err) {
+    log.warn(`audit-log hook: write failed (${err.message})`)
+  }
+}
+
+module.exports = { recordAuditEntries, AUDIT_COLLECTION }

package/src/index.js

@@ -0,0 +1,6 @@
+/*
+Copyright 2025 Adobe. All rights reserved.
+Licensed under the Apache License, Version 2.0
+*/
+
+module.exports = require('./hook')

package/web/index.js

@@ -0,0 +1,35 @@
+/*
+Copyright 2025 Adobe. All rights reserved.
+Licensed under the Apache License, Version 2.0
+*/
+
+// Register Audit Log into the host's commerce-admin-management instance.
+// Idempotent — calling twice just re-registers the same entries.
+//
+// Usage (host's web-src/src/index.js, scaffolded by this add-on's postinstall):
+//   import registerAuditLog from '@adobedjangir/commerce-admin-audit-log/web'
+//   registerAuditLog()
+//
+// configureWeb is core's own — extraNav/extraPages/actionKeys are merged
+// (append + dedup by id), so every add-on can chain its own contribution
+// without clobbering siblings.
+
+import { configureWeb } from '@adobedjangir/commerce-admin-management/web'
+import AuditLog from './src/AuditLog'
+
+export default function registerAuditLog () {
+  configureWeb({
+    actionKeys: {
+      systemConfigAuditList: 'AuditLog/system-config-audit-list'
+    },
+    extraNav: [{
+      id: 'audit-log',
+      path: '/audit-log',
+      label: 'Audit Log',
+      icon: 'Properties'
+    }],
+    extraPages: { 'audit-log': AuditLog }
+  })
+}
+
+export { default as AuditLog } from './src/AuditLog'

package/web/src/AuditLog.js

@@ -0,0 +1,523 @@
+/*
+Copyright 2025 Adobe. All rights reserved.
+Licensed under the Apache License, Version 2.0
+*/
+
+// Audit log viewer — paginated reader for the `system_config_audit` collection
+// written by system-config-save. Filters narrow the result set client+server
+// (server applies most filters; path is a client-side substring match).
+//
+// Each row also exposes a Revert action. "Revert" semantics:
+//   - create  → there was no value before, so revert means delete the row
+//               (we send USE_DEFAULT_SENTINEL to system-config-save).
+//   - update  → write `oldValue` back at the same scope:scopeId/path.
+//   - delete  → re-insert `oldValue` at the same scope:scopeId/path.
+//
+// Sensitive fields are blocked from revert because audit stores
+// `[ENCRYPTED]` instead of plaintext — there's nothing to restore.
+
+import React, { useCallback, useEffect, useState } from 'react'
+import {
+  View,
+  Flex,
+  Heading,
+  Text,
+  TextField,
+  Picker,
+  Item,
+  Button,
+  SearchField,
+  ProgressCircle,
+  Well,
+  StatusLight,
+  DialogTrigger,
+  Dialog,
+  Content,
+  Header,
+  Divider,
+  ButtonGroup
+} from '@adobe/react-spectrum'
+import { callAction, resolveActor } from '@adobedjangir/commerce-admin-management/web'
+import { getActionKey } from '@adobedjangir/commerce-admin-management/web'
+import { PALETTE, RADIUS, SHADOW } from '@adobedjangir/commerce-admin-management/web'
+
+const PAGE_SIZE_OPTIONS = [
+  { id: '25',  label: '25 / page' },
+  { id: '50',  label: '50 / page' },
+  { id: '100', label: '100 / page' },
+  { id: '200', label: '200 / page' }
+]
+const DEFAULT_PAGE_SIZE = 50
+const SENSITIVE_TOKEN = '[ENCRYPTED]'
+const USE_DEFAULT_SENTINEL = '__USE_DEFAULT__'
+const ACTION_OPTIONS = [
+  { id: 'any',    label: 'Any action' },
+  { id: 'create', label: 'Create' },
+  { id: 'update', label: 'Update' },
+  { id: 'delete', label: 'Delete' }
+]
+const SCOPE_OPTIONS = [
+  { id: 'any',      label: 'Any scope' },
+  { id: 'default',  label: 'Default' },
+  { id: 'websites', label: 'Websites' },
+  { id: 'stores',   label: 'Stores' }
+]
+
+function actionTone (a) {
+  if (a === 'create') return 'positive'
+  if (a === 'delete') return 'negative'
+  if (a === 'update') return 'notice'
+  return 'neutral'
+}
+
+function fmtTime (iso) {
+  if (!iso) return ''
+  try { return new Date(iso).toLocaleString() } catch (_) { return iso }
+}
+
+function fmtValue (v) {
+  if (v == null) return '∅'
+  if (typeof v === 'string') return v
+  try { return JSON.stringify(v) } catch (_) { return String(v) }
+}
+
+/**
+ * Build the payload for system-config-save that reverses an audit row.
+ * Returns `{ ok, payload, message }` — when `ok=false`, surface the message
+ * to the operator instead of attempting the save.
+ */
+function buildRevertPayload (row) {
+  if (!row || !row.path) {
+    return { ok: false, message: 'Audit row is malformed.' }
+  }
+  if (row.oldValue === SENSITIVE_TOKEN || row.newValue === SENSITIVE_TOKEN) {
+    return {
+      ok: false,
+      message: 'This change is for a sensitive (encrypted) field — the original value is not stored in the audit log, so it cannot be reverted from here.'
+    }
+  }
+  // 'create' had no prior value, so reverting means "delete the override".
+  if (row.action === 'create' || row.oldValue == null) {
+    return {
+      ok: true,
+      payload: {
+        values: { [row.path]: USE_DEFAULT_SENTINEL },
+        scope: row.scope || 'default',
+        scopeId: row.scope_id || '0'
+      }
+    }
+  }
+  // update / delete: write oldValue back.
+  return {
+    ok: true,
+    payload: {
+      values: { [row.path]: row.oldValue },
+      scope: row.scope || 'default',
+      scopeId: row.scope_id || '0'
+    }
+  }
+}
+
+export default function AuditLog ({ runtime, ims }) {
+  const [items, setItems] = useState([])
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState(null)
+  const [page, setPage] = useState(0)
+  const [pageSize, setPageSize] = useState(DEFAULT_PAGE_SIZE)
+  const [returned, setReturned] = useState(0)
+  const [status, setStatus] = useState({ tone: 'neutral', message: '' })
+
+  // Confirmation dialog state — null while closed, the row to revert when open.
+  const [confirmRow, setConfirmRow] = useState(null)
+  const [reverting, setReverting] = useState(false)
+
+  // Filters — kept as draft state; user clicks Search to apply (no live
+  // re-fetch on every keystroke since the action is a real HTTP call).
+  const [scope, setScope] = useState('any')
+  const [actionFilter, setActionFilter] = useState('any')
+  const [pathFilter, setPathFilter] = useState('')
+  const [actor, setActor] = useState('')
+  const [since, setSince] = useState('')
+  const [until, setUntil] = useState('')
+
+  /**
+   * Each fetch replaces the current page (skip = page * pageSize). The
+   * audit-list action returns `{ items, returned }` — we treat
+   * `returned < pageSize` as "no more pages after this one".
+   */
+  const fetchPage = useCallback(async (nextPage = 0, sizeOverride = null) => {
+    const size = sizeOverride || pageSize
+    setLoading(true)
+    setError(null)
+    try {
+      const params = { limit: size, skip: nextPage * size }
+      if (scope !== 'any') params.scope = scope
+      if (actionFilter !== 'any') params.action = actionFilter
+      if (pathFilter.trim()) params.path = pathFilter.trim()
+      if (actor.trim()) params.actor = actor.trim()
+      if (since.trim()) params.since = since.trim()
+      if (until.trim()) params.until = until.trim()
+      const res = await callAction(
+        { runtime, ims },
+        getActionKey('systemConfigAuditList'),
+        '',
+        params
+      )
+      const body = res?.body || res
+      const next = Array.isArray(body?.items) ? body.items : []
+      setItems(next)
+      setReturned(body?.returned ?? next.length)
+      setPage(nextPage)
+    } catch (e) {
+      setError(e.message || 'Failed to load audit log')
+    } finally {
+      setLoading(false)
+    }
+  }, [runtime, ims, scope, actionFilter, pathFilter, actor, since, until, pageSize])
+
+  useEffect(() => {
+    fetchPage(0)
+    // initial load only — filters refresh on user action
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const onSearch = () => fetchPage(0)
+  const onPrev = () => { if (page > 0) fetchPage(page - 1) }
+  const onNext = () => { if (returned >= pageSize) fetchPage(page + 1) }
+  const onChangePageSize = (next) => {
+    const n = Number(next) || DEFAULT_PAGE_SIZE
+    setPageSize(n)
+    fetchPage(0, n) // reset to page 0 when page size changes
+  }
+  const hasNext = returned >= pageSize
+  const hasPrev = page > 0
+
+  /**
+   * Pagination bar — rendered above the table. Kept as a local component so
+   * we don't repeat the markup if we ever want one at the bottom too.
+   */
+  const Pagination = () => (
+    <View
+      paddingX="size-200"
+      paddingY="size-150"
+      UNSAFE_style={{
+        background: PALETTE.surfaceMuted,
+        borderBottom: `1px solid ${PALETTE.border}`
+      }}
+    >
+      <Flex gap="size-200" alignItems="center" justifyContent="space-between" wrap>
+        <Flex gap="size-150" alignItems="center" wrap>
+          <Picker
+            aria-label="Rows per page"
+            selectedKey={String(pageSize)}
+            onSelectionChange={onChangePageSize}
+            width="size-1700"
+            isDisabled={loading}
+          >
+            {PAGE_SIZE_OPTIONS.map((o) => <Item key={o.id}>{o.label}</Item>)}
+          </Picker>
+          <Text UNSAFE_style={{ color: PALETTE.textMuted, fontSize: 12 }}>
+            {items.length === 0
+              ? 'No rows'
+              : <>Page <strong>{page + 1}</strong> · showing rows {page * pageSize + 1}–{page * pageSize + returned}</>}
+          </Text>
+        </Flex>
+        <Flex gap="size-100">
+          <Button variant="secondary" onPress={onPrev} isDisabled={!hasPrev || loading}>
+            ← Prev
+          </Button>
+          <Button variant="secondary" onPress={onNext} isDisabled={!hasNext || loading}>
+            Next →
+          </Button>
+        </Flex>
+      </Flex>
+    </View>
+  )
+
+  /** Attempt to revert a row. Confirmation has already been given. */
+  const doRevert = useCallback(async (row) => {
+    const built = buildRevertPayload(row)
+    if (!built.ok) {
+      setStatus({ tone: 'negative', message: built.message })
+      setConfirmRow(null)
+      return
+    }
+    // Tag the revert audit row with the operator's identity AND the source
+    // entry — easier to trace "X reverted Y" in the audit later.
+    const baseActor = resolveActor(ims)
+    const tagged = row.changedAt
+      ? `${baseActor} (revert of ${row.changedAt})`
+      : baseActor
+    setReverting(true)
+    setStatus({ tone: 'notice', message: 'Reverting…' })
+    try {
+      const res = await callAction(
+        { runtime, ims },
+        getActionKey('systemConfigSave'),
+        '',
+        { ...built.payload, actor: tagged }
+      )
+      const body = res?.body || res
+      if (body && body.fieldErrors) {
+        const first = Object.values(body.fieldErrors)[0]
+        setStatus({ tone: 'negative', message: first || 'Revert rejected by validation' })
+      } else {
+        setStatus({
+          tone: 'positive',
+          message: `Reverted ${row.path} at ${row.scope}:${row.scope_id}`
+        })
+        // The new audit entry lands at the top; jump to page 0 so the user
+        // sees it without having to navigate back.
+        await fetchPage(0)
+      }
+    } catch (e) {
+      setStatus({ tone: 'negative', message: e.message || 'Revert failed' })
+    } finally {
+      setReverting(false)
+      setConfirmRow(null)
+    }
+  }, [runtime, ims, fetchPage])
+
+  const startRevert = (row) => {
+    // Pre-flight to surface "can't revert sensitive" before opening the dialog.
+    const built = buildRevertPayload(row)
+    if (!built.ok) {
+      setStatus({ tone: 'negative', message: built.message })
+      return
+    }
+    setStatus({ tone: 'neutral', message: '' })
+    setConfirmRow(row)
+  }
+
+  return (
+    <View padding="size-400" UNSAFE_style={{ background: PALETTE.bg, minHeight: '100vh' }}>
+      <Heading level={2} marginTop={0}>Audit Log</Heading>
+      <Text UNSAFE_style={{ color: PALETTE.textMuted }}>
+        Every save to system_config_data is recorded here with old → new
+        values. Sensitive fields show <code>[ENCRYPTED]</code> and cannot be
+        reverted from here. Newest entries first.
+      </Text>
+
+      {status.message && (
+        <View marginTop="size-150">
+          <StatusLight variant={status.tone}>{status.message}</StatusLight>
+        </View>
+      )}
+
+      <View
+        marginTop="size-200"
+        padding="size-200"
+        UNSAFE_style={{
+          background: PALETTE.surface,
+          border: `1px solid ${PALETTE.border}`,
+          borderRadius: RADIUS.lg,
+          boxShadow: SHADOW.xs
+        }}
+      >
+        <Flex gap="size-150" wrap alignItems="end">
+          <Picker label="Scope" selectedKey={scope} onSelectionChange={setScope} width="size-1700">
+            {SCOPE_OPTIONS.map((s) => <Item key={s.id}>{s.label}</Item>)}
+          </Picker>
+          <Picker label="Action" selectedKey={actionFilter} onSelectionChange={setActionFilter} width="size-1700">
+            {ACTION_OPTIONS.map((s) => <Item key={s.id}>{s.label}</Item>)}
+          </Picker>
+          <SearchField
+            label="Path contains"
+            value={pathFilter}
+            onChange={setPathFilter}
+            onSubmit={onSearch}
+            width="size-2400"
+            placeholder="section/group/field"
+          />
+          <TextField
+            label="Actor"
+            value={actor}
+            onChange={setActor}
+            width="size-2400"
+            placeholder="email or org id"
+          />
+          <TextField
+            label="Since (ISO)"
+            value={since}
+            onChange={setSince}
+            width="size-2400"
+            placeholder="2026-01-01T00:00:00Z"
+          />
+          <TextField
+            label="Until (ISO)"
+            value={until}
+            onChange={setUntil}
+            width="size-2400"
+            placeholder="2026-12-31T23:59:59Z"
+          />
+          <Button variant="cta" onPress={onSearch} isDisabled={loading}>
+            {loading ? 'Loading…' : 'Search'}
+          </Button>
+        </Flex>
+      </View>
+
+      {error && (
+        <Well marginTop="size-200" UNSAFE_style={{ borderColor: PALETTE.danger }}>
+          <Text UNSAFE_style={{ color: PALETTE.danger }}>{error}</Text>
+        </Well>
+      )}
+
+      <View
+        marginTop="size-200"
+        UNSAFE_style={{
+          background: PALETTE.surface,
+          border: `1px solid ${PALETTE.border}`,
+          borderRadius: RADIUS.lg,
+          boxShadow: SHADOW.xs,
+          overflow: 'hidden'
+        }}
+      >
+        <Pagination />
+
+        <div style={{
+          display: 'grid',
+          gridTemplateColumns: 'minmax(140px, 180px) minmax(120px, 200px) 110px minmax(180px, 1.2fr) minmax(180px, 1.5fr) minmax(180px, 1.5fr) 100px',
+          padding: '12px 16px',
+          gap: 12,
+          background: PALETTE.surfaceMuted,
+          fontSize: 11,
+          fontWeight: 700,
+          letterSpacing: 0.6,
+          textTransform: 'uppercase',
+          color: PALETTE.textMuted,
+          borderBottom: `1px solid ${PALETTE.border}`
+        }}>
+          <div>Time</div>
+          <div>Actor</div>
+          {/* StatusLight's coloured dot takes ~22px before the text, so
+              indent the column header to line up with the row content. */}
+          <div style={{ paddingLeft: 22 }}>Action</div>
+          <div>Path</div>
+          <div>Old</div>
+          <div>New</div>
+          <div>Revert</div>
+        </div>
+
+        {loading && items.length === 0 ? (
+          <Flex justifyContent="center" margin="size-400">
+            <ProgressCircle aria-label="Loading" isIndeterminate />
+          </Flex>
+        ) : items.length === 0 ? (
+          <View padding="size-400">
+            <Text UNSAFE_style={{ color: PALETTE.textMuted }}>
+              No audit entries match these filters.
+            </Text>
+          </View>
+        ) : (
+          items.map((row, i) => {
+            const isEncrypted = row.oldValue === SENSITIVE_TOKEN || row.newValue === SENSITIVE_TOKEN
+            // Common cell style — preserve whitespace + break long unbroken
+            // tokens (URLs, hashes, JSON blobs) so nothing is clipped.
+            const cell = {
+              whiteSpace: 'pre-wrap',
+              overflowWrap: 'anywhere',
+              wordBreak: 'break-word',
+              minWidth: 0
+            }
+            return (
+              <div
+                key={row._id || `${row.changedAt}-${row.path}-${i}`}
+                style={{
+                  display: 'grid',
+                  // Min/max so columns flex but never collapse below readable.
+                  gridTemplateColumns: 'minmax(140px, 180px) minmax(120px, 200px) 110px minmax(180px, 1.2fr) minmax(180px, 1.5fr) minmax(180px, 1.5fr) 100px',
+                  padding: '12px 16px',
+                  gap: 12,
+                  borderBottom: `1px solid ${PALETTE.border}`,
+                  fontSize: 13,
+                  fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
+                  background: i % 2 === 0 ? PALETTE.surface : PALETTE.surfaceSubtle,
+                  alignItems: 'start'
+                }}
+              >
+                <div style={{ ...cell, color: PALETTE.text }}>{fmtTime(row.changedAt)}</div>
+                <div style={{ ...cell, color: PALETTE.textMuted }}>
+                  {row.changedBy || 'system'}
+                </div>
+                <div>
+                  <StatusLight variant={actionTone(row.action)}>
+                    {row.action || '?'}
+                  </StatusLight>
+                </div>
+                <div style={cell}>
+                  <div>{row.path}</div>
+                  <div style={{ color: PALETTE.textMuted, fontSize: 11 }}>{row.scope}:{row.scope_id}</div>
+                </div>
+                <div style={{ ...cell, color: PALETTE.danger }}>
+                  {fmtValue(row.oldValue)}
+                </div>
+                <div style={{ ...cell, color: PALETTE.success }}>
+                  {fmtValue(row.newValue)}
+                </div>
+                <div>
+                  <Button
+                    variant="secondary"
+                    onPress={() => startRevert(row)}
+                    isDisabled={reverting || isEncrypted}
+                    UNSAFE_style={{ fontFamily: 'inherit' }}
+                  >
+                    {isEncrypted ? 'N/A' : 'Revert'}
+                  </Button>
+                </div>
+              </div>
+            )
+          })
+        )}
+
+      </View>
+
+      {/* Revert confirmation dialog. */}
+      <DialogTrigger isOpen={!!confirmRow} onOpenChange={(o) => { if (!o) setConfirmRow(null) }}>
+        <div style={{ display: 'none' }} aria-hidden="true">trigger</div>
+        <Dialog>
+          <Heading>Revert this change?</Heading>
+          <Header>
+            <Text>{confirmRow?.path} at {confirmRow?.scope}:{confirmRow?.scope_id}</Text>
+          </Header>
+          <Divider />
+          <Content>
+            <Text>
+              {confirmRow?.action === 'create'
+                ? <>This will <strong>delete</strong> the scope-level override and fall back to the inherited default.</>
+                : confirmRow?.action === 'delete'
+                  ? <>This will <strong>re-insert</strong> the previous value.</>
+                  : <>This will replace the current value with the previous value.</>}
+            </Text>
+            <div style={{
+              marginTop: 12,
+              padding: 12,
+              background: PALETTE.surfaceMuted,
+              border: `1px solid ${PALETTE.border}`,
+              borderRadius: RADIUS.md,
+              fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
+              fontSize: 12,
+              wordBreak: 'break-all'
+            }}>
+              <div style={{ color: PALETTE.textMuted, fontSize: 11, fontWeight: 700, letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: 4 }}>
+                will be set to
+              </div>
+              <div style={{ color: PALETTE.success }}>
+                {confirmRow?.action === 'create'
+                  ? '(inherit from default)'
+                  : fmtValue(confirmRow?.oldValue)}
+              </div>
+            </div>
+          </Content>
+          <ButtonGroup>
+            <Button variant="secondary" onPress={() => setConfirmRow(null)} isDisabled={reverting}>
+              Cancel
+            </Button>
+            <Button variant="cta" onPress={() => doRevert(confirmRow)} isDisabled={reverting}>
+              {reverting ? 'Reverting…' : 'Revert'}
+            </Button>
+          </ButtonGroup>
+        </Dialog>
+      </DialogTrigger>
+    </View>
+  )
+}