+
+
+
+ Last {{ LIMIT }} queries
+
+
+ {{ STREAM_LABELS[stream.status.value] }}
+
+
+
+
+
-
-
{{ error }}
-
-
No queries yet
-
Queries from MCP clients and the console show up here.
-
+
+
{{ error }}
+
+
No queries yet
+
Queries from MCP clients and the console show up here as they run.
+
-
-
-
-
- | Time |
- Source |
- Status |
- SQL |
- Rows |
- Duration |
- Result |
-
-
-
-
- | {{ formatDateTime(q.createdAt) }} |
- {{ q.source }} |
-
- {{ q.status }}
- |
-
- {{ q.sql }}
- {{ q.reason }}
- |
- {{ q.status === 'ok' ? q.rowCount : '' }} |
- {{ formatDuration(q.durationMs) }} |
-
- Open
- |
-
-
-
+
+
+
+
+ | Time |
+ Source |
+ Status |
+ SQL |
+ Rows |
+ Duration |
+ Result |
+
+
+
+
+ | {{ formatDateTime(q.createdAt) }} |
+ {{ q.source }} |
+
+ {{ q.status }}
+ |
+
+ {{ q.sql }}
+ {{ q.reason }}
+ |
+ {{ q.status === 'ok' ? q.rowCount : '' }} |
+ {{ formatDuration(q.durationMs) }} |
+
+ Open
+ |
+
+
+
+
+
+
diff --git a/frontend/src/components/QueryDetail.vue b/frontend/src/components/QueryDetail.vue
new file mode 100644
index 0000000..de3251b
--- /dev/null
+++ b/frontend/src/components/QueryDetail.vue
@@ -0,0 +1,75 @@
+
+
+
+
+
+
diff --git a/frontend/src/components/queryStatus.js b/frontend/src/components/queryStatus.js
new file mode 100644
index 0000000..72659cf
--- /dev/null
+++ b/frontend/src/components/queryStatus.js
@@ -0,0 +1,6 @@
+// Badge colours of a logged query's status, shared by the list and its detail.
+export const STATUS_STYLES = {
+ ok: 'bg-green-50 text-green-700 dark:bg-green-500/10 dark:text-green-400',
+ rejected: 'bg-amber-50 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400',
+ error: 'bg-red-50 text-red-700 dark:bg-red-500/10 dark:text-red-400',
+}
diff --git a/frontend/src/composables/useFormat.js b/frontend/src/composables/useFormat.js
index 397e692..4ccefd9 100644
--- a/frontend/src/composables/useFormat.js
+++ b/frontend/src/composables/useFormat.js
@@ -16,6 +16,14 @@ export function formatDateTime(value) {
return d.toLocaleString(undefined, { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })
}
+/** A timestamp in full, to the second; '' for nothing, the raw value when unparseable. */
+export function formatFullDateTime(value) {
+ if (!value) return ''
+ const d = new Date(value)
+ if (Number.isNaN(d.getTime())) return String(value)
+ return d.toLocaleString(undefined, { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit' })
+}
+
/** Milliseconds as "12 ms" or "1.4 s". */
export function formatDuration(ms) {
if (ms === null || ms === undefined || Number.isNaN(Number(ms))) return ''
diff --git a/frontend/src/composables/useQueryStream.js b/frontend/src/composables/useQueryStream.js
new file mode 100644
index 0000000..7d7144d
--- /dev/null
+++ b/frontend/src/composables/useQueryStream.js
@@ -0,0 +1,105 @@
+/**
+ * A database's queries as they happen, over server-sent events.
+ *
+ * The browser retries a dropped stream by itself. What it cannot do is renew
+ * the session: when the server refuses the stream (an expired cookie is a
+ * 401), EventSource gives up for good. So a refused stream renews the session
+ * once and reconnects, backing off, and after `maxFailures` refusals in a row
+ * the stream is `offline` until `start()` again.
+ */
+import { ref } from 'vue'
+
+/**
+ * @param {object} deps
+ * @param {() => string} deps.url the stream's URL
+ * @param {(query: object) => void} deps.onQuery each query as it is recorded
+ * @param {() => void} [deps.onOpen] the stream is (re)connected: catch up on what was missed
+ * @param {() => Promise
} [deps.refresh] renews the session
+ * @param {typeof EventSource} [deps.EventSourceImpl]
+ * @param {number} [deps.maxFailures]
+ * @param {number} [deps.backoffMs] the wait before the nth retry is n times this
+ */
+export function createQueryStream({
+ url,
+ onQuery,
+ onOpen = () => {},
+ refresh = async () => {},
+ EventSourceImpl = globalThis.EventSource,
+ maxFailures = 3,
+ backoffMs = 1000,
+}) {
+ /** 'connecting' | 'live' | 'offline' */
+ const status = ref('connecting')
+ let source = null
+ let timer = null
+ let failures = 0
+ let stopped = false
+
+ function close() {
+ clearTimeout(timer)
+ timer = null
+ if (source) source.close()
+ source = null
+ }
+
+ function connect() {
+ close()
+ if (!EventSourceImpl) {
+ status.value = 'offline'
+ return
+ }
+ status.value = 'connecting'
+ const es = new EventSourceImpl(url())
+ source = es
+ es.onopen = () => {
+ failures = 0
+ status.value = 'live'
+ onOpen()
+ }
+ es.addEventListener('query', (e) => {
+ let query
+ try {
+ query = JSON.parse(e.data)
+ } catch {
+ return
+ }
+ onQuery(query)
+ })
+ es.onerror = () => {
+ if (es !== source) return
+ // Still CONNECTING: the browser is retrying a dropped stream itself.
+ if (es.readyState !== EventSourceImpl.CLOSED) {
+ status.value = 'connecting'
+ return
+ }
+ close()
+ failures += 1
+ if (failures > maxFailures) {
+ status.value = 'offline'
+ return
+ }
+ status.value = 'connecting'
+ const wait = failures * backoffMs
+ Promise.resolve()
+ .then(refresh)
+ .catch(() => {})
+ .then(() => {
+ if (!stopped) timer = setTimeout(connect, wait)
+ })
+ }
+ }
+
+ return {
+ status,
+ /** Connects, or tries again after the stream went offline. */
+ start() {
+ stopped = false
+ failures = 0
+ connect()
+ },
+ stop() {
+ stopped = true
+ close()
+ },
+ }
+}
diff --git a/frontend/test/ActivityPanel.test.js b/frontend/test/ActivityPanel.test.js
new file mode 100644
index 0000000..03e5f22
--- /dev/null
+++ b/frontend/test/ActivityPanel.test.js
@@ -0,0 +1,138 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import ActivityPanel from '../src/components/ActivityPanel.vue'
+import { useToasts } from '../src/composables/useToasts'
+import { flush, mockFetch } from './helpers'
+
+class FakeEventSource {
+ static CLOSED = 2
+ static instances = []
+ constructor(url) {
+ this.url = url
+ this.listeners = {}
+ FakeEventSource.instances.push(this)
+ }
+ addEventListener(type, fn) { this.listeners[type] = fn }
+ close() { this.closed = true }
+}
+
+const q = (id, createdAt, extra = {}) => ({
+ id, createdAt, source: 'mcp', sql: `select ${id} from orders`, status: 'ok', reason: '', rowCount: 3, durationMs: 12, resultUrl: '', ...extra,
+})
+
+const stream = () => FakeEventSource.instances.at(-1)
+
+describe('ActivityPanel', () => {
+ beforeEach(() => {
+ FakeEventSource.instances = []
+ vi.stubGlobal('EventSource', FakeEventSource)
+ })
+ afterEach(() => {
+ vi.unstubAllGlobals()
+ useToasts().toasts.value = []
+ })
+
+ async function mountPanel(routes) {
+ const f = mockFetch(routes)
+ const w = mount(ActivityPanel, { props: { databaseId: 'd1' }, attachTo: document.body })
+ await flush(); await flush()
+ return { w, f }
+ }
+
+ it('adds queries as they arrive on the stream', async () => {
+ const { w } = await mountPanel({ 'GET /databases/d1/queries?limit=50': { queries: [q('a', '2026-10-23T04:00:00Z')] } })
+ expect(stream().url).toBe('/api/v1/databases/d1/queries/stream')
+ expect(w.find('[data-test="stream-status"]').attributes('data-status')).toBe('connecting')
+
+ stream().onopen()
+ await flush(); await flush()
+ expect(w.find('[data-test="stream-status"]').text()).toBe('Live')
+
+ stream().listeners.query({ data: JSON.stringify(q('b', '2026-10-23T04:01:00Z')) })
+ stream().listeners.query({ data: JSON.stringify(q('b', '2026-10-23T04:01:00Z')) }) // a repeat is ignored
+ await flush()
+ const rows = w.findAll('[data-test="query-row"]')
+ expect(rows).toHaveLength(2)
+ expect(rows[0].text()).toContain('select b from orders')
+ w.unmount()
+ expect(stream().closed).toBe(true)
+ })
+
+ it('keeps a streamed query the catch-up load missed', async () => {
+ let resolve
+ const { w } = await mountPanel({ 'GET /databases/d1/queries?limit=50': () => new Promise((r) => { resolve = r }) })
+ stream().listeners.query({ data: JSON.stringify(q('new', '2026-10-23T04:05:00Z')) })
+ resolve({ queries: [q('old', '2026-10-23T04:00:00Z')] })
+ await flush(); await flush()
+ expect(w.findAll('[data-test="query-row"]').map((r) => r.text().includes('select new'))).toEqual([true, false])
+ })
+
+ it('shows the whole query in the sidebar when a row is clicked', async () => {
+ const long = `select ${'col, '.repeat(200)}id from orders where note = 'x'`
+ const { w } = await mountPanel({
+ 'GET /databases/d1/queries?limit=50': { queries: [
+ q('a', '2026-10-23T04:00:00Z', { sql: long, resultUrl: 'https://tmphost.io/r/1' }),
+ q('b', '2026-10-23T03:00:00Z', { status: 'rejected', reason: 'query reads PII column public.users.email', sql: 'select email from users' }),
+ ] },
+ })
+ 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-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="copy-sql"]').trigger('click')
+ expect(writeText).toHaveBeenCalledWith(long)
+
+ 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-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)
+
+ window.dispatchEvent(new KeyboardEvent('keydown', { key: 'a' }))
+ await flush()
+ expect(w.find('[data-test="query-detail"]').exists()).toBe(true)
+ window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+ await flush()
+ expect(w.find('[data-test="query-detail"]').exists()).toBe(false)
+
+ await w.findAll('[data-test="query-row"]')[0].trigger('click')
+ await w.find('[data-test="close-detail"]').trigger('click')
+ expect(w.find('[data-test="query-detail"]').exists()).toBe(false)
+ await w.findAll('[data-test="query-row"]')[0].trigger('click')
+ await w.findAll('[data-test="query-row"]')[0].trigger('click')
+ expect(w.find('[data-test="query-detail"]').exists()).toBe(false) // a second click closes it
+ w.unmount()
+ })
+
+ it('offers to reconnect once the stream gives up', async () => {
+ vi.useFakeTimers()
+ try {
+ mockFetch({ 'GET /databases/d1/queries?limit=50': { queries: [] }, 'POST /auth/refresh': [401, {}] })
+ const w = mount(ActivityPanel, { props: { databaseId: 'd1' } })
+ for (let i = 0; i < 4; i++) {
+ stream().readyState = FakeEventSource.CLOSED
+ stream().onerror()
+ await vi.advanceTimersByTimeAsync(5000)
+ }
+ expect(w.find('[data-test="stream-status"]').text()).toBe('Offline')
+ expect(w.find('[data-test="empty"]').exists()).toBe(true)
+ const before = FakeEventSource.instances.length
+ await w.find('[data-test="reconnect"]').trigger('click')
+ expect(FakeEventSource.instances).toHaveLength(before + 1)
+ w.unmount()
+ } finally {
+ vi.useRealTimers()
+ }
+ })
+
+ it('shows a failed load', async () => {
+ const { w } = await mountPanel({ 'GET /databases/d1/queries?limit=50': [500, { error: { message: 'boom' } }] })
+ expect(w.text()).toContain('boom')
+ })
+})
diff --git a/frontend/test/api.test.js b/frontend/test/api.test.js
index 36311e1..c761525 100644
--- a/frontend/test/api.test.js
+++ b/frontend/test/api.test.js
@@ -128,6 +128,15 @@ describe('api', () => {
expect(await api.fetchQueries('a')).toEqual([])
})
+ it('points the query stream at the database and renews the session', async () => {
+ expect(api.queryStreamUrl('a/b')).toBe('/api/v1/databases/a%2Fb/queries/stream')
+ const f = mockFetch({ 'POST /auth/refresh': { status: 'ok' } })
+ await api.refreshSession()
+ expect(f.mock.calls[0][1].method).toBe('POST')
+ mockFetch({})
+ await expect(api.refreshSession()).rejects.toBeInstanceOf(api.ApiError)
+ })
+
it('escapes ids in paths', async () => {
const f = mockFetch({})
await api.fetchDatabase('a/b').catch(() => {})
diff --git a/frontend/test/composables.test.js b/frontend/test/composables.test.js
index 0ab678d..5f9311c 100644
--- a/frontend/test/composables.test.js
+++ b/frontend/test/composables.test.js
@@ -1,7 +1,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, toKebabCase } from '../src/composables/useFormat'
+import { formatCell, formatDateTime, formatDuration, formatFullDateTime, toKebabCase } from '../src/composables/useFormat'
import { useQueryConsole } from '../src/composables/useQueryConsole'
import { ApiError } from '../src/api'
@@ -58,6 +58,9 @@ describe('useFormat', () => {
expect(formatDateTime('')).toBe('')
expect(formatDateTime('nope')).toBe('nope')
expect(formatDateTime('2026-01-02T03:04:05Z')).toMatch(/2026/)
+ expect(formatFullDateTime('')).toBe('')
+ expect(formatFullDateTime('nope')).toBe('nope')
+ expect(formatFullDateTime('2026-01-02T03:04:05Z')).toMatch(/05/)
expect(formatDuration(null)).toBe('')
expect(formatDuration('x')).toBe('')
expect(formatDuration(12.4)).toBe('12 ms')
diff --git a/frontend/test/useQueryStream.test.js b/frontend/test/useQueryStream.test.js
new file mode 100644
index 0000000..91dec59
--- /dev/null
+++ b/frontend/test/useQueryStream.test.js
@@ -0,0 +1,159 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { createQueryStream } from '../src/composables/useQueryStream'
+
+/** A stand-in EventSource the test drives by hand. */
+class FakeEventSource {
+ static CONNECTING = 0
+ static OPEN = 1
+ static CLOSED = 2
+ static instances = []
+
+ constructor(url) {
+ this.url = url
+ this.readyState = FakeEventSource.CONNECTING
+ this.listeners = {}
+ this.closed = false
+ FakeEventSource.instances.push(this)
+ }
+
+ addEventListener(type, fn) {
+ this.listeners[type] = fn
+ }
+
+ close() {
+ this.closed = true
+ this.readyState = FakeEventSource.CLOSED
+ }
+
+ open() {
+ this.readyState = FakeEventSource.OPEN
+ this.onopen()
+ }
+
+ emit(type, data) {
+ this.listeners[type]({ data })
+ }
+
+ /** The server refused it: EventSource gives up. */
+ refuse() {
+ this.readyState = FakeEventSource.CLOSED
+ this.onerror()
+ }
+
+ /** The stream dropped: the browser retries by itself. */
+ drop() {
+ this.readyState = FakeEventSource.CONNECTING
+ this.onerror()
+ }
+}
+
+const latest = () => FakeEventSource.instances.at(-1)
+
+function setup(overrides = {}) {
+ const onQuery = vi.fn()
+ const onOpen = vi.fn()
+ const refresh = vi.fn(async () => {})
+ const stream = createQueryStream({
+ url: () => '/api/v1/databases/d1/queries/stream',
+ onQuery,
+ onOpen,
+ refresh,
+ EventSourceImpl: FakeEventSource,
+ maxFailures: 2,
+ backoffMs: 100,
+ ...overrides,
+ })
+ return { stream, onQuery, onOpen, refresh }
+}
+
+describe('createQueryStream', () => {
+ beforeEach(() => {
+ FakeEventSource.instances = []
+ vi.useFakeTimers()
+ })
+ afterEach(() => vi.useRealTimers())
+
+ it('delivers queries once the stream is open', () => {
+ const { stream, onQuery, onOpen } = setup()
+ stream.start()
+ expect(latest().url).toBe('/api/v1/databases/d1/queries/stream')
+ expect(stream.status.value).toBe('connecting')
+ latest().open()
+ expect(stream.status.value).toBe('live')
+ expect(onOpen).toHaveBeenCalledTimes(1)
+ latest().emit('query', '{"id":"q1"}')
+ latest().emit('query', 'not json')
+ expect(onQuery).toHaveBeenCalledTimes(1)
+ expect(onQuery).toHaveBeenCalledWith({ id: 'q1' })
+ })
+
+ it('lets the browser retry a dropped stream', () => {
+ const { stream } = setup()
+ stream.start()
+ latest().open()
+ latest().drop()
+ expect(stream.status.value).toBe('connecting')
+ expect(FakeEventSource.instances).toHaveLength(1)
+ })
+
+ it('renews the session and reconnects after a refusal, then gives up', async () => {
+ const { stream, refresh, onOpen } = setup()
+ stream.start()
+ latest().refuse()
+ expect(latest().closed).toBe(true)
+ await vi.advanceTimersByTimeAsync(100)
+ expect(refresh).toHaveBeenCalledTimes(1)
+ expect(FakeEventSource.instances).toHaveLength(2)
+
+ latest().refuse()
+ await vi.advanceTimersByTimeAsync(200)
+ expect(FakeEventSource.instances).toHaveLength(3)
+ latest().refuse()
+ await vi.advanceTimersByTimeAsync(1000)
+ expect(stream.status.value).toBe('offline')
+ expect(FakeEventSource.instances).toHaveLength(3)
+
+ stream.start()
+ latest().open()
+ expect(stream.status.value).toBe('live')
+ expect(onOpen).toHaveBeenCalledTimes(1)
+ })
+
+ it('reconnects even when the session cannot be renewed', async () => {
+ const { stream } = setup({ refresh: vi.fn(async () => { throw new Error('401') }) })
+ stream.start()
+ latest().refuse()
+ await vi.advanceTimersByTimeAsync(100)
+ expect(FakeEventSource.instances).toHaveLength(2)
+ })
+
+ it('stays down once stopped', async () => {
+ const { stream } = setup()
+ stream.start()
+ const first = latest()
+ first.refuse()
+ stream.stop()
+ await vi.advanceTimersByTimeAsync(1000)
+ expect(FakeEventSource.instances).toHaveLength(1)
+ first.onerror() // a late error from a stream already replaced is ignored
+ })
+
+ it('is offline without EventSource, and works with the defaults', () => {
+ const { stream } = setup({ EventSourceImpl: undefined })
+ stream.start()
+ expect(stream.status.value).toBe('offline')
+
+ vi.stubGlobal('EventSource', undefined)
+ const bare = createQueryStream({ url: () => '/x', onQuery: () => {} })
+ bare.start()
+ expect(bare.status.value).toBe('offline')
+ vi.unstubAllGlobals()
+
+ const defaults = createQueryStream({ url: () => '/x', onQuery: () => {}, EventSourceImpl: FakeEventSource })
+ defaults.start()
+ latest().open()
+ latest().refuse()
+ expect(defaults.status.value).toBe('connecting')
+ defaults.stop()
+ })
+})