From 12e81baea41764e93e1f4922771704a6768096e9 Mon Sep 17 00:00:00 2001
From: tmphost-dev <dev@hasmcp.com>
Date: Fri, 23 Oct 2026 04:51:18 +0000
Subject: [PATCH] Format the SQL in the query details sidebar

The sidebar now lays the query out one clause per line with sql-formatter
(PostgreSQL dialect). Only whitespace changes; SQL the formatter can't
parse is shown as logged. A Raw toggle shows the exact logged text, and
Copy copies what is on screen. The formatter lives in its own module so it
ships with the lazy database page, not the main bundle.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 frontend/package-lock.json               | 88 ++++++++++++++++++++++++
 frontend/package.json                    |  1 +
 frontend/src/components/QueryDetail.vue  | 16 +++--
 frontend/src/composables/useSqlFormat.js | 16 +++++
 frontend/test/ActivityPanel.test.js      | 10 ++-
 frontend/test/composables.test.js        |  8 +++
 6 files changed, 133 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/composables/useSqlFormat.js

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', () => {