feat: paginate webhook run history

Author: contrueCT

opencode/packages/opencode/src/server/routes/webhooks.ts

@@ -778,6 +778,7 @@ export const WebhookRoutes = lazy(() =>
         z.object({
           sourceID: z.string().optional(),
           limit: z.coerce.number().min(1).max(500).optional(),
+          offset: z.coerce.number().int().min(0).optional(),
         }),
       ),
       async (c) => c.json(await Webhook.listRuns(c.req.valid("query"))),

opencode/packages/opencode/src/webhook/webhook.ts

@@ -391,7 +391,7 @@ export namespace Webhook {
     })
   }
 
-  export async function listRuns(input: { sourceID?: string; limit?: number } = {}) {
+  export async function listRuns(input: { sourceID?: string; limit?: number; offset?: number } = {}) {
     const runs: Run[] = []
     for (const key of await Storage.list(["webhook_run"])) {
       const run = await Storage.read<Run>(key).catch(() => undefined)
@@ -401,7 +401,8 @@ export namespace Webhook {
       runs.push(parsed)
     }
     runs.sort((a, b) => b.time.received - a.time.received)
-    return runs.slice(0, input.limit ?? 100)
+    const offset = Math.max(0, input.offset ?? 0)
+    return runs.slice(offset, offset + (input.limit ?? 100))
   }
 
   export async function withSourceLock<T>(sourceID: string, fn: () => Promise<T>) {

opencode/packages/opencode/test/server/webhooks-test-route.test.ts

@@ -57,4 +57,42 @@ describe("webhook management test route", () => {
       }
     }
   })
+
+  test("applies source-scoped offset pagination to run records", async () => {
+    await using tmp = await tmpdir({ git: true })
+    const sourceID = `src_page_${Math.random().toString(36).slice(2)}`
+    const runIDs: string[] = []
+    let projectID: string | undefined
+
+    try {
+      await Instance.provide({
+        directory: tmp.path,
+        fn: async () => {
+          projectID = Instance.project.id
+          const oldest = await Webhook.createRun({ sourceID, projectID, status: "succeeded" })
+          const middle = await Webhook.createRun({ sourceID, projectID, status: "failed" })
+          const newest = await Webhook.createRun({ sourceID, projectID, status: "running" })
+          runIDs.push(oldest.id, middle.id, newest.id)
+          await Webhook.updateRun(oldest.id, { time: { received: 1_000 } })
+          await Webhook.updateRun(middle.id, { time: { received: 2_000 } })
+          await Webhook.updateRun(newest.id, { time: { received: 3_000 } })
+
+          const response = await WebhookRoutes().request(
+            `http://localhost/runs?sourceID=${encodeURIComponent(sourceID)}&limit=1&offset=1`,
+          )
+
+          expect(response.status).toBe(200)
+          await expect(response.json()).resolves.toEqual([
+            expect.objectContaining({ id: middle.id }),
+          ])
+        },
+      })
+    } finally {
+      for (const runID of runIDs) await Storage.remove(["webhook_run", runID])
+      if (projectID) {
+        await Storage.remove(["project", projectID])
+        await Storage.remove(["project_meta", projectID])
+      }
+    }
+  })
 })

web/src/api/client.ts

@@ -1743,10 +1743,11 @@ export const webhookApi = {
     return res.json()
   },
 
-  async runs(opts: { sourceID?: string; limit?: number } = {}): Promise<WebhookRun[]> {
+  async runs(opts: { sourceID?: string; limit?: number; offset?: number } = {}): Promise<WebhookRun[]> {
     const params = new URLSearchParams()
     if (opts.sourceID) params.set('sourceID', opts.sourceID)
     if (opts.limit !== undefined) params.set('limit', String(opts.limit))
+    if (opts.offset !== undefined) params.set('offset', String(opts.offset))
     const suffix = params.toString() ? `?${params}` : ''
     const res = await fetchWithTimeout(`${BASE_URL}/webhooks/runs${suffix}`)
     if (!res.ok) {

web/src/components/WebhooksPage.vue

@@ -51,6 +51,7 @@ const emit = defineEmits<{
 }>()
 
 const DEFAULT_PRESET = webhookPresetById('generic')
+const RUN_PAGE_SIZE = 10
 const helpText = {
   guards: 'Guards reject noisy, duplicate, or stale webhook requests before they create an agent session.',
   rateLimit: 'Limits how many requests this source accepts within one time window.',
@@ -85,17 +86,18 @@ const fullPermissionConfirmed = ref(false)
 const defaultModelLabel = ref('Default model from user config')
 const pollingTimer = ref<ReturnType<typeof setInterval> | null>(null)
 const selectedRunId = ref('')
+const runPage = ref(1)
+const runPageItems = ref<WebhookRun[]>([])
+const runPageHasNext = ref(false)
+const isRunPageLoading = ref(false)
 const endpointPanel = ref<HTMLElement | null>(null)
+let runPageLoadGeneration = 0
 
 const form = ref(defaultForm())
 
 const isEmbedded = computed(() => props.embedded)
 const selectedSource = computed(() => sources.value.find((source) => source.id === selectedSourceId.value) || null)
-const selectedRuns = computed(() => {
-  if (!selectedSourceId.value) return runs.value
-  return runs.value.filter((run) => run.sourceID === selectedSourceId.value)
-})
-const selectedRun = computed(() => selectedRuns.value.find((run) => run.id === selectedRunId.value) || null)
+const selectedRun = computed(() => runPageItems.value.find((run) => run.id === selectedRunId.value) || null)
 
 const sortedProjects = computed(() => props.projects.slice().sort((a, b) => b.time.updated - a.time.updated))
 const selectedProvider = computed(() => providers.value.find((provider) => provider.id === form.value.modelProviderID))
@@ -250,9 +252,11 @@ async function loadAll() {
     }
     if (!selectedSourceId.value) {
       resetCreateForm()
+      resetRunPagination()
       showCreateForm.value = true
     } else {
       loadFormFromSource(selectedSource.value)
+      await refreshRunPage()
     }
   } catch (err) {
     error.value = friendlyError(err)
@@ -347,6 +351,7 @@ async function createSource() {
     showCreateForm.value = false
     revealedSecretSourceId.value = created.source.id
     revealedSecret.value = created.secret
+    resetRunPagination()
     notice.value = 'Webhook source created. Copy the full URL now; the secret is shown only once.'
     await refreshRuns()
     await nextTick()
@@ -400,6 +405,7 @@ async function sendTest() {
   try {
     const result = await webhookApi.sendTest(source.id, payload)
     notice.value = `Test sent. HTTP ${result.status}.`
+    resetRunPagination()
     await refreshRuns()
     if (result.body && typeof result.body === 'object' && 'runId' in result.body) {
       selectedRunId.value = String((result.body as { runId?: unknown }).runId || '')
@@ -448,6 +454,7 @@ async function deleteSource() {
     await webhookApi.deleteSource(source.id)
     sources.value = await webhookApi.sources()
     selectedSourceId.value = sources.value[0]?.id || ''
+    resetRunPagination()
     if (!selectedSourceId.value) {
       showCreateForm.value = true
       resetCreateForm()
@@ -462,7 +469,71 @@ async function deleteSource() {
 }
 
 async function refreshRuns() {
-  runs.value = await webhookApi.runs({ limit: 100 })
+  const [nextRuns] = await Promise.all([
+    webhookApi.runs({ limit: 100 }),
+    refreshRunPage(),
+  ])
+  runs.value = nextRuns
+}
+
+function resetRunPagination() {
+  runPage.value = 1
+  runPageItems.value = []
+  runPageHasNext.value = false
+  selectedRunId.value = ''
+}
+
+async function refreshRunPage() {
+  const sourceID = selectedSourceId.value
+  const page = runPage.value
+  const generation = ++runPageLoadGeneration
+  if (!sourceID) {
+    runPageItems.value = []
+    runPageHasNext.value = false
+    isRunPageLoading.value = false
+    return
+  }
+
+  isRunPageLoading.value = true
+  try {
+    const pageRuns = await webhookApi.runs({
+      sourceID,
+      limit: RUN_PAGE_SIZE + 1,
+      offset: (page - 1) * RUN_PAGE_SIZE,
+    })
+    if (generation !== runPageLoadGeneration || sourceID !== selectedSourceId.value || page !== runPage.value) return
+    runPageItems.value = pageRuns.slice(0, RUN_PAGE_SIZE)
+    runPageHasNext.value = pageRuns.length > RUN_PAGE_SIZE
+    if (selectedRunId.value && !runPageItems.value.some((run) => run.id === selectedRunId.value)) {
+      selectedRunId.value = ''
+    }
+  } finally {
+    if (generation === runPageLoadGeneration) {
+      isRunPageLoading.value = false
+    }
+  }
+}
+
+async function previousRunPage() {
+  if (runPage.value <= 1 || isRunPageLoading.value) return
+  runPage.value -= 1
+  selectedRunId.value = ''
+  try {
+    await refreshRunPage()
+  } catch (err) {
+    error.value = friendlyError(err)
+  }
+}
+
+async function nextRunPage() {
+  if (!runPageHasNext.value || isRunPageLoading.value) return
+  runPage.value += 1
+  selectedRunId.value = ''
+  try {
+    await refreshRunPage()
+  } catch (err) {
+    error.value = friendlyError(err)
+  }
 }
 
 async function copyText(text: string) {
@@ -499,7 +570,7 @@ async function openRunSession(run: WebhookRun) {
 function beginCreate() {
   showCreateForm.value = true
   selectedSourceId.value = ''
-  selectedRunId.value = ''
+  resetRunPagination()
   revealedSecret.value = ''
   revealedSecretSourceId.value = ''
   resetCreateForm()
@@ -508,8 +579,11 @@ function beginCreate() {
 function selectSource(source: WebhookSource) {
   showCreateForm.value = false
   selectedSourceId.value = source.id
-  selectedRunId.value = ''
+  resetRunPagination()
   showMcpPicker.value = false
+  void refreshRunPage().catch((err) => {
+    error.value = friendlyError(err)
+  })
 }
 
 function selectRun(run: WebhookRun) {
@@ -1073,7 +1147,7 @@ onUnmounted(() => {
             <h3>Recent Runs</h3>
             <div class="run-list">
               <div
-                v-for="run in selectedRuns"
+                v-for="run in runPageItems"
                 :key="run.id"
                 class="run-row"
                 :class="{ active: selectedRunId === run.id }"
@@ -1086,10 +1160,22 @@ onUnmounted(() => {
                 <button v-if="run.sessionID" class="link-btn" @click.stop="openRunSession(run)">Open session</button>
                 <span v-else class="muted-text">{{ run.guardType || 'No session' }}</span>
               </div>
-              <div v-if="selectedRuns.length === 0" class="empty-note">
+              <div v-if="isRunPageLoading && runPageItems.length === 0" class="empty-note">
+                Loading runs...
+              </div>
+              <div v-else-if="runPageItems.length === 0" class="empty-note">
                 No runs for this source yet.
               </div>
             </div>
+            <div v-if="runPageItems.length > 0 || runPage > 1" class="run-pagination">
+              <button class="btn" @click="previousRunPage" :disabled="runPage <= 1 || isRunPageLoading">
+                Previous
+              </button>
+              <span>Page {{ runPage }}</span>
+              <button class="btn" @click="nextRunPage" :disabled="!runPageHasNext || isRunPageLoading">
+                Next
+              </button>
+            </div>
             <div v-if="selectedRun" class="run-detail">
               <div class="run-detail-head">
                 <strong>{{ selectedRun.id }}</strong>
@@ -1854,6 +1940,21 @@ textarea {
   color: var(--text-muted);
 }
 
+.run-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--space-sm);
+  margin-top: var(--space-md);
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+.run-pagination .btn {
+  height: 32px;
+  padding: 0 var(--space-sm);
+}
+
 .link-btn {
   border: 0;
   background: transparent;

web/test/config-api.test.ts

@@ -64,6 +64,19 @@ afterEach(() => {
 })
 
 describe('web config APIs', () => {
+  it('passes source, limit, and offset when paging webhook runs', async () => {
+    installFetchMock((url) => {
+      if (url === '/webhooks/runs?sourceID=src%2Ftest&limit=11&offset=20') {
+        return jsonResponse([{ id: 'run_21' }])
+      }
+      throw new Error(`Unexpected request: ${url}`)
+    })
+
+    await expect(webhookApi.runs({ sourceID: 'src/test', limit: 11, offset: 20 })).resolves.toEqual([
+      { id: 'run_21' },
+    ])
+  })
+
   it('sends webhook tests through the same-origin management endpoint', async () => {
     installFetchMock((url) => {
       if (url === '/webhooks/sources/src%2Ftest/test') {

web/test/webhook-send-test-ui.test.ts

@@ -8,4 +8,15 @@ describe('webhook send test controls', () => {
     expect(button?.[1]).toBe('isSaving || isSendingTest')
     expect(source).not.toContain('Send test requires the one-time full URL')
   })
+
+  it('renders a ten-item server-backed pager for run records', async () => {
+    const source = await Bun.file(new URL('../src/components/WebhooksPage.vue', import.meta.url)).text()
+
+    expect(source).toContain('const RUN_PAGE_SIZE = 10')
+    expect(source).toContain('v-for="run in runPageItems"')
+    expect(source).toContain('@click="previousRunPage"')
+    expect(source).toContain('@click="nextRunPage"')
+    expect(source).toContain('Page {{ runPage }}')
+    expect(source).not.toContain('v-for="run in selectedRuns"')
+  })
 })