diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index fea7009..36d758e 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@fontsource-variable/inter": "^5.3.0",
         "pinia": "^4.1.0",
+        "sql-formatter": "^15.9.0",
         "vue": "^3.5.44",
         "vue-router": "^5.4.0"
       },
@@ -1537,6 +1538,12 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "license": "Python-2.0"
+    },
     "node_modules/assertion-error": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
@@ -1893,6 +1900,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/discontinuous-range": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/discontinuous-range/-/discontinuous-range-1.0.0.tgz",
+      "integrity": "sha512-c68LpLbO+7kP/b1Hr1qs8/BJ09F5khZGTxqxZuhzxpmwJKOgRFHJWIb9/KmqnqHhLdO55aOxFH/EGBvUQbL/RQ==",
+      "license": "MIT"
+    },
     "node_modules/editorconfig": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-3.0.2.tgz",
@@ -2957,6 +2970,12 @@
         "pathe": "^2.0.1"
       }
     },
+    "node_modules/moo": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/moo/-/moo-0.5.3.tgz",
+      "integrity": "sha512-m2fmM2dDm7GZQsY7KK2cme8agi+AAljILjQnof7p1ZMDe6dQ4bdnSMx0cPppudoeNv5hEFQirN6u+O4fDE0IWA==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -2995,6 +3014,34 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/nearley": {
+      "version": "2.20.1",
+      "resolved": "https://registry.npmjs.org/nearley/-/nearley-2.20.1.tgz",
+      "integrity": "sha512-+Mc8UaAebFzgV+KpI5n7DasuuQCHA89dmwm7JXw3TV43ukfNQ9DnBH3Mdb2g/I4Fdxc26pwimBWvjIw0UAILSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "commander": "^2.19.0",
+        "moo": "^0.5.0",
+        "railroad-diagrams": "^1.0.0",
+        "randexp": "0.4.6"
+      },
+      "bin": {
+        "nearley-railroad": "bin/nearley-railroad.js",
+        "nearley-test": "bin/nearley-test.js",
+        "nearley-unparse": "bin/nearley-unparse.js",
+        "nearleyc": "bin/nearleyc.js"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://nearley.js.org/#give-to-nearley"
+      }
+    },
+    "node_modules/nearley/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "license": "MIT"
+    },
     "node_modules/nopt": {
       "version": "10.0.1",
       "resolved": "https://registry.npmjs.org/nopt/-/nopt-10.0.1.tgz",
@@ -3328,6 +3375,25 @@
       ],
       "license": "MIT"
     },
+    "node_modules/railroad-diagrams": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz",
+      "integrity": "sha512-cz93DjNeLY0idrCNOH6PviZGRN9GJhsdm9hpn1YCS879fj4W+x5IFJhhkRZcwVgMmFF7R82UA/7Oh+R8lLZg6A==",
+      "license": "CC0-1.0"
+    },
+    "node_modules/randexp": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/randexp/-/randexp-0.4.6.tgz",
+      "integrity": "sha512-80WNmd9DA0tmZrw9qQa62GPPWfuXJknrmVmLcxvq4uZBdYqb1wYoKTmnlGUchvVWe0XiLupYkBoXVOxz3C8DYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "discontinuous-range": "1.0.0",
+        "ret": "~0.1.10"
+      },
+      "engines": {
+        "node": ">=0.12"
+      }
+    },
     "node_modules/readdirp": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.1.1.tgz",
@@ -3351,6 +3417,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ret": {
+      "version": "0.1.15",
+      "resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz",
+      "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12"
+      }
+    },
     "node_modules/rolldown": {
       "version": "1.2.15",
       "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.2.15.tgz",
@@ -3449,6 +3524,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/sql-formatter": {
+      "version": "15.9.0",
+      "resolved": "https://registry.npmjs.org/sql-formatter/-/sql-formatter-15.9.0.tgz",
+      "integrity": "sha512-3A/N+v+mA5/PDU+FlO4uTFE0L/Mmg63c/Ny161Qv2b1Mxp9IX8War+LLmq17LA/Kgu4KXAR7iutK2JaHWJMMtw==",
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "nearley": "^2.20.1"
+      },
+      "bin": {
+        "sql-formatter": "bin/sql-formatter-cli.cjs"
+      }
+    },
     "node_modules/std-env": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/std-env/-/std-env-4.3.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 6b58959..2c14972 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,6 +14,7 @@
   "dependencies": {
     "@fontsource-variable/inter": "^5.3.0",
     "pinia": "^4.1.0",
+    "sql-formatter": "^15.9.0",
     "vue": "^3.5.44",
     "vue-router": "^5.4.0"
   },
diff --git a/frontend/src/components/QueryDetail.vue b/frontend/src/components/QueryDetail.vue
index de3251b..d79d51b 100644
--- a/frontend/src/components/QueryDetail.vue
+++ b/frontend/src/components/QueryDetail.vue
@@ -1,15 +1,20 @@
 <!-- One logged query in full: the right-hand sidebar of the Activity tab. -->
 <script setup>
-import { onBeforeUnmount, onMounted } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { copyToClipboard } from '../composables/useClipboard'
 import { formatDuration, formatFullDateTime } from '../composables/useFormat'
+import { formatSql } from '../composables/useSqlFormat'
 import { BTN_GHOST, SECTION_LABEL } from '../ui'
 import { STATUS_STYLES } from './queryStatus'
 
 const props = defineProps({ query: { type: Object, required: true } })
 const emit = defineEmits(['close'])
 
-const copy = () => copyToClipboard(props.query.sql, 'Query copied')
+/** Off shows the SQL exactly as it was logged. */
+const formatted = ref(true)
+const shownSql = computed(() => (formatted.value ? formatSql(props.query.sql) : props.query.sql))
+
+const copy = () => copyToClipboard(shownSql.value, 'Query copied')
 
 function onKeydown(e) {
   if (e.key === 'Escape') emit('close')
@@ -66,9 +71,12 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown))
       <div>
         <div class="flex items-center justify-between mb-1.5">
           <span :class="SECTION_LABEL">SQL</span>
-          <button type="button" :class="BTN_GHOST" data-test="copy-sql" @click="copy">Copy</button>
+          <div class="flex items-center gap-1">
+            <button type="button" :class="BTN_GHOST" data-test="toggle-format" @click="formatted = !formatted">{{ formatted ? 'Raw' : 'Formatted' }}</button>
+            <button type="button" :class="BTN_GHOST" data-test="copy-sql" @click="copy">Copy</button>
+          </div>
         </div>
-        <pre data-test="detail-sql" class="p-3 rounded-lg border border-gray-200 dark:border-zinc-800 bg-gray-50 dark:bg-zinc-800/50 text-[12px] font-mono text-gray-800 dark:text-zinc-200 whitespace-pre-wrap break-words">{{ query.sql }}</pre>
+        <pre data-test="detail-sql" class="p-3 rounded-lg border border-gray-200 dark:border-zinc-800 bg-gray-50 dark:bg-zinc-800/50 text-[12px] font-mono text-gray-800 dark:text-zinc-200 whitespace-pre-wrap break-words">{{ shownSql }}</pre>
       </div>
     </div>
   </aside>
diff --git a/frontend/src/composables/useSqlFormat.js b/frontend/src/composables/useSqlFormat.js
new file mode 100644
index 0000000..ab20da5
--- /dev/null
+++ b/frontend/src/composables/useSqlFormat.js
@@ -0,0 +1,16 @@
+// Kept apart from useFormat: the formatter is large, and this way it only
+// ships with the lazy-loaded database page that shows query details.
+import { formatDialect, postgresql } from 'sql-formatter'
+
+/**
+ * SQL laid out one clause per line for reading. Only whitespace changes;
+ * SQL the formatter can't parse (often a rejected query) comes back as given.
+ */
+export function formatSql(sql) {
+  if (!sql) return ''
+  try {
+    return formatDialect(String(sql), { dialect: postgresql, tabWidth: 2 })
+  } catch {
+    return String(sql)
+  }
+}
diff --git a/frontend/test/ActivityPanel.test.js b/frontend/test/ActivityPanel.test.js
index 03e5f22..e955a47 100644
--- a/frontend/test/ActivityPanel.test.js
+++ b/frontend/test/ActivityPanel.test.js
@@ -78,18 +78,24 @@ describe('ActivityPanel', () => {
     expect(w.find('[data-test="query-detail"]').exists()).toBe(false)
 
     await w.findAll('[data-test="query-row"]')[0].trigger('click')
-    expect(w.find('[data-test="detail-sql"]').text()).toBe(long)
+    expect(w.find('[data-test="detail-sql"]').text()).toBe(`select\n${'  col,\n'.repeat(200)}  id\nfrom\n  orders\nwhere\n  note = 'x'`)
     expect(w.find('[data-test="detail-rows"]').text()).toBe('3')
     expect(w.find('[data-test="detail-result"]').attributes('href')).toBe('https://tmphost.io/r/1')
     expect(w.findAll('[data-test="query-row"]')[0].attributes('aria-selected')).toBe('true')
 
     const writeText = vi.fn(async () => {})
     vi.stubGlobal('navigator', { clipboard: { writeText } })
+    await w.find('[data-test="toggle-format"]').trigger('click')
+    expect(w.find('[data-test="detail-sql"]').text()).toBe(long)
+    expect(w.find('[data-test="toggle-format"]').text()).toBe('Formatted')
     await w.find('[data-test="copy-sql"]').trigger('click')
     expect(writeText).toHaveBeenCalledWith(long)
+    await w.find('[data-test="toggle-format"]').trigger('click')
+    await w.find('[data-test="copy-sql"]').trigger('click')
+    expect(writeText).toHaveBeenLastCalledWith(w.find('[data-test="detail-sql"]').text())
 
     await w.findAll('[data-test="query-row"]')[1].trigger('keydown', { key: 'Enter' })
-    expect(w.find('[data-test="detail-sql"]').text()).toBe('select email from users')
+    expect(w.find('[data-test="detail-sql"]').text()).toBe('select\n  email\nfrom\n  users')
     expect(w.find('[data-test="detail-reason"]').text()).toContain('public.users.email')
     expect(w.find('[data-test="detail-status-rejected"]').exists()).toBe(true)
     expect(w.find('[data-test="detail-rows"]').exists()).toBe(false)
diff --git a/frontend/test/composables.test.js b/frontend/test/composables.test.js
index 5f9311c..2af07c7 100644
--- a/frontend/test/composables.test.js
+++ b/frontend/test/composables.test.js
@@ -2,6 +2,7 @@ import { afterEach, describe, expect, it, vi } from 'vitest'
 import { useToasts } from '../src/composables/useToasts'
 import { copyToClipboard } from '../src/composables/useClipboard'
 import { formatCell, formatDateTime, formatDuration, formatFullDateTime, toKebabCase } from '../src/composables/useFormat'
+import { formatSql } from '../src/composables/useSqlFormat'
 import { useQueryConsole } from '../src/composables/useQueryConsole'
 import { ApiError } from '../src/api'
 
@@ -71,6 +72,13 @@ describe('useFormat', () => {
     expect(formatCell(3)).toBe('3')
     expect(formatCell(false)).toBe('false')
   })
+  it('formats SQL for reading, leaving what it cannot parse alone', () => {
+    expect(formatSql('select id, name from users u join orders o on o.user_id=u.id where u.id = $1'))
+      .toBe('select\n  id,\n  name\nfrom\n  users u\n  join orders o on o.user_id = u.id\nwhere\n  u.id = $1')
+    expect(formatSql('select (((')).toBe('select (((')
+    expect(formatSql('')).toBe('')
+    expect(formatSql(null)).toBe('')
+  })
 })
 
 describe('useQueryConsole', () => {