From 7be88e1428f93f96d83f56e5ae5eff363dfea7bc Mon Sep 17 00:00:00 2001
From: "jared-outpost[bot]" <jared-outpost[bot]@users.noreply.github.com>
Date: Sat, 19 Sep 2026 15:09:19 +0000
Subject: [PATCH 1/2] add time range filter to events page

Adds a time-range Select to the events filter bar with presets (last hour,
6 hours, 24 hours, 7 days, all time), synced to the URL via ?timeRange=.
The backend GET /api/events now accepts from/to unix-second query params
and filters webhook_events.created_at accordingly.

Fixes #200
---
 apps/server/src/client/lib/api.ts             |  4 +
 apps/server/src/client/pages/events.tsx       | 46 +++++++++-
 .../__tests__/events-time-filter.test.ts      | 89 +++++++++++++++++++
 apps/server/src/routes/events/index.ts        | 10 ++-
 4 files changed, 144 insertions(+), 5 deletions(-)
 create mode 100644 apps/server/src/routes/__tests__/events-time-filter.test.ts

diff --git a/apps/server/src/client/lib/api.ts b/apps/server/src/client/lib/api.ts
index 2ed15c0..7edcd9c 100644
--- a/apps/server/src/client/lib/api.ts
+++ b/apps/server/src/client/lib/api.ts
@@ -12,6 +12,8 @@ export type EventsParams = {
   event?: string
   repo?: string
   entityKey?: string
+  from?: number
+  to?: number
 }
 
 export type AgentWorkItem = {
@@ -164,6 +166,8 @@ export const api = {
     if (params.event) qs.set("event", params.event)
     if (params.repo) qs.set("repo", params.repo)
     if (params.entityKey) qs.set("entityKey", params.entityKey)
+    if (params.from != null) qs.set("from", String(params.from))
+    if (params.to != null) qs.set("to", String(params.to))
 
     const res = await fetch(`/api/events?${qs.toString()}`)
     if (!res.ok) throw new Error(`Failed to fetch events: ${res.status}`)
diff --git a/apps/server/src/client/pages/events.tsx b/apps/server/src/client/pages/events.tsx
index 7fcd3bc..3a0aae5 100644
--- a/apps/server/src/client/pages/events.tsx
+++ b/apps/server/src/client/pages/events.tsx
@@ -1,5 +1,5 @@
 import { CaretLeft, CaretRight, Funnel, ListBullets, MagnifyingGlass, Trash, X } from "@phosphor-icons/react"
-import { useEffect, useState } from "react"
+import { useEffect, useMemo, useState } from "react"
 import { useNavigate, useSearchParams } from "react-router-dom"
 import { toast } from "sonner"
 import { entityGitHubUrl, formatTimeAgo, repoGitHubUrl } from "@/client/lib/format"
@@ -21,12 +21,25 @@ import {
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Input } from "@/components/ui/input"
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { Skeleton } from "@/components/ui/skeleton"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 
 const STATUS_OPTIONS = ["all", "pending", "admitted", "settled", "completed", "failed", "skipped", "d:boot"] as const
 const PAGE_SIZES = [10, 25, 50] as const
 
+const TIME_RANGES = [
+  { value: "all", label: "All time", seconds: 0 },
+  { value: "1h", label: "Last hour", seconds: 60 * 60 },
+  { value: "6h", label: "Last 6 hours", seconds: 6 * 60 * 60 },
+  { value: "24h", label: "Last 24 hours", seconds: 24 * 60 * 60 },
+  { value: "7d", label: "Last 7 days", seconds: 7 * 24 * 60 * 60 },
+] as const
+
+type TimeRangeValue = (typeof TIME_RANGES)[number]["value"]
+
+const isTimeRangeValue = (value: string): value is TimeRangeValue => TIME_RANGES.some((r) => r.value === value)
+
 export default function EventsPage() {
   const navigate = useNavigate()
   const [searchParams, setSearchParams] = useSearchParams()
@@ -41,12 +54,22 @@ export default function EventsPage() {
   const limit = Number(searchParams.get("limit")) || 25
   const statusFilter = searchParams.get("status") ?? "all"
   const repoFilter = searchParams.get("repo") ?? ""
+  const timeRangeParam = searchParams.get("timeRange") ?? "all"
+  const timeRange: TimeRangeValue = isTimeRangeValue(timeRangeParam) ? timeRangeParam : "all"
+
+  // Recompute the window boundary each render so "last hour" stays relative.
+  const from = useMemo(() => {
+    const range = TIME_RANGES.find((r) => r.value === timeRange)
+    if (!range || range.seconds === 0) return undefined
+    return Math.floor(Date.now() / 1000) - range.seconds
+  }, [timeRange])
 
   const { data, isLoading, isError, dataUpdatedAt, isFetching, refetch } = useEvents({
     page,
     limit,
     status: statusFilter !== "all" ? statusFilter : undefined,
     repo: repoFilter || undefined,
+    from,
   })
 
   // Sync input with URL param when navigating
@@ -69,6 +92,7 @@ export default function EventsPage() {
   const setPage = (p: number) => updateParams({ page: String(p) })
   const setLimit = (l: number) => updateParams({ limit: String(l), page: "1" })
   const setStatus = (s: string) => updateParams({ status: s === "all" ? null : s, page: "1" })
+  const setTimeRange = (r: string) => updateParams({ timeRange: r === "all" ? null : r, page: "1" })
 
   const applyRepoFilter = () => {
     updateParams({ repo: repoInput || null, page: "1" })
@@ -96,7 +120,7 @@ export default function EventsPage() {
   }
 
   const pagination = data?.pagination
-  const hasActiveFilters = statusFilter !== "all" || !!repoFilter
+  const hasActiveFilters = statusFilter !== "all" || !!repoFilter || timeRange !== "all"
 
   return (
     <div className="space-y-4">
@@ -185,13 +209,27 @@ export default function EventsPage() {
             </button>
           )}
         </div>
+        <Select value={timeRange} onValueChange={setTimeRange}>
+          <SelectTrigger size="sm" className="text-xs">
+            <SelectValue>{(value) => TIME_RANGES.find((r) => r.value === value)?.label}</SelectValue>
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              {TIME_RANGES.map((r) => (
+                <SelectItem key={r.value} value={r.value} className="text-xs">
+                  {r.label}
+                </SelectItem>
+              ))}
+            </SelectGroup>
+          </SelectContent>
+        </Select>
         {hasActiveFilters && (
           <Button
             variant="ghost"
             size="xs"
             onClick={() => {
               setRepoInput("")
-              updateParams({ status: null, repo: null, page: "1" })
+              updateParams({ status: null, repo: null, timeRange: null, page: "1" })
             }}
           >
             Clear filters
@@ -300,7 +338,7 @@ export default function EventsPage() {
                   size="xs"
                   onClick={() => {
                     setRepoInput("")
-                    updateParams({ status: null, repo: null, page: "1" })
+                    updateParams({ status: null, repo: null, timeRange: null, page: "1" })
                   }}
                 >
                   Clear filters
diff --git a/apps/server/src/routes/__tests__/events-time-filter.test.ts b/apps/server/src/routes/__tests__/events-time-filter.test.ts
new file mode 100644
index 0000000..72472bf
--- /dev/null
+++ b/apps/server/src/routes/__tests__/events-time-filter.test.ts
@@ -0,0 +1,89 @@
+import { Hono } from "hono"
+import { afterEach, describe, expect, it } from "vitest"
+import { testDb } from "@/__tests__/test-db"
+import * as schema from "@/db/schema"
+import type { AuthEnv } from "@/types"
+import eventsRouter from "../events"
+
+const closes: Array<() => void> = []
+afterEach(() => {
+  for (const close of closes.splice(0)) close()
+})
+
+async function fixture() {
+  const { db, close } = await testDb()
+  closes.push(close)
+  const now = Math.floor(Date.now() / 1000)
+  const at = (secondsAgo: number) => new Date((now - secondsAgo) * 1000)
+  await db.insert(schema.webhookEvents).values([
+    {
+      id: "recent",
+      entityKey: "acme/app#1",
+      event: "issues",
+      deliveryId: "recent",
+      payload: "{}",
+      createdAt: at(30 * 60),
+    },
+    {
+      id: "hours",
+      entityKey: "acme/app#2",
+      event: "issues",
+      deliveryId: "hours",
+      payload: "{}",
+      createdAt: at(3 * 60 * 60),
+    },
+    {
+      id: "old",
+      entityKey: "acme/app#3",
+      event: "issues",
+      deliveryId: "old",
+      payload: "{}",
+      createdAt: at(3 * 24 * 60 * 60),
+    },
+  ])
+  const app = new Hono<AuthEnv>()
+    .use(async (c, next) => {
+      c.set("db", db)
+      c.set("user", { id: "operator" } as AuthEnv["Variables"]["user"])
+      await next()
+    })
+    .route("/", eventsRouter)
+  const list = async (query = "") => {
+    const res = await app.request(`/${query}`)
+    expect(res.status).toBe(200)
+    const body = (await res.json()) as { data: Array<{ id: string }>; pagination: { total: number } }
+    return body
+  }
+  return { list, now }
+}
+
+describe("GET /events time range filtering", () => {
+  it("returns all events without a from/to window", async () => {
+    const f = await fixture()
+    const body = await f.list()
+    expect(body.pagination.total).toBe(3)
+  })
+
+  it("filters to events after `from`", async () => {
+    const f = await fixture()
+    const oneHourAgo = f.now - 60 * 60
+    const body = await f.list(`?from=${oneHourAgo}`)
+    expect(body.data.map((e) => e.id)).toEqual(["recent"])
+    expect(body.pagination.total).toBe(1)
+  })
+
+  it("filters within a from/to window", async () => {
+    const f = await fixture()
+    const sixHoursAgo = f.now - 6 * 60 * 60
+    const oneHourAgo = f.now - 60 * 60
+    const body = await f.list(`?from=${sixHoursAgo}&to=${oneHourAgo}`)
+    expect(body.data.map((e) => e.id)).toEqual(["hours"])
+    expect(body.pagination.total).toBe(1)
+  })
+
+  it("ignores non-numeric from/to values", async () => {
+    const f = await fixture()
+    const body = await f.list("?from=notanumber")
+    expect(body.pagination.total).toBe(3)
+  })
+})
diff --git a/apps/server/src/routes/events/index.ts b/apps/server/src/routes/events/index.ts
index ad78262..2fabca3 100644
--- a/apps/server/src/routes/events/index.ts
+++ b/apps/server/src/routes/events/index.ts
@@ -1,4 +1,4 @@
-import { and, desc, eq, like, or, sql } from "drizzle-orm"
+import { and, desc, eq, gte, like, lte, or, sql } from "drizzle-orm"
 import { Hono } from "hono"
 import { agentWorkItems, githubDiscussionObligations, webhookEvents } from "@/db/schema"
 import { getSessionController } from "@/lib/containers/session-controller"
@@ -62,6 +62,8 @@ const router = new Hono<AuthEnv>()
     const event = c.req.query("event")
     const repo = c.req.query("repo")
     const entityKey = c.req.query("entityKey")
+    const from = Number(c.req.query("from")) || undefined
+    const to = Number(c.req.query("to")) || undefined
 
     const conditions = []
     if (status) {
@@ -86,6 +88,12 @@ const router = new Hono<AuthEnv>()
     if (entityKey) {
       conditions.push(eq(webhookEvents.entityKey, entityKey))
     }
+    if (from) {
+      conditions.push(gte(webhookEvents.createdAt, new Date(from * 1000)))
+    }
+    if (to) {
+      conditions.push(lte(webhookEvents.createdAt, new Date(to * 1000)))
+    }
 
     const where = conditions.length > 0 ? and(...conditions) : undefined
     const offset = (page - 1) * limit

From 1bd8478b754a60e99ca15b9172548af9101afd4b Mon Sep 17 00:00:00 2001
From: "jared-outpost[bot]" <jared-outpost[bot]@users.noreply.github.com>
Date: Sat, 19 Sep 2026 15:17:54 +0000
Subject: [PATCH 2/2] keep events time window relative on auto-refetch

The from cutoff was memoized on timeRange and baked into a stable react-query
key, so the 10s auto-refetch kept reusing the timestamp captured at selection
time and a 'last hour' window silently widened while the page stayed open.
Pass the window size instead and derive from at fetch time inside the query
function, keeping the cache key stable while each refetch gets a current cutoff.
---
 apps/server/src/client/lib/api.ts       |  2 ++
 apps/server/src/client/lib/queries.ts   |  9 ++++++++-
 apps/server/src/client/pages/events.tsx | 14 +++++---------
 3 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/apps/server/src/client/lib/api.ts b/apps/server/src/client/lib/api.ts
index 7edcd9c..a8dfd9e 100644
--- a/apps/server/src/client/lib/api.ts
+++ b/apps/server/src/client/lib/api.ts
@@ -14,6 +14,8 @@ export type EventsParams = {
   entityKey?: string
   from?: number
   to?: number
+  /** Relative window in seconds; the caller derives `from` at fetch time. */
+  windowSeconds?: number
 }
 
 export type AgentWorkItem = {
diff --git a/apps/server/src/client/lib/queries.ts b/apps/server/src/client/lib/queries.ts
index c74c342..9ef78cd 100644
--- a/apps/server/src/client/lib/queries.ts
+++ b/apps/server/src/client/lib/queries.ts
@@ -18,9 +18,16 @@ export function useSession() {
 }
 
 export function useEvents(params: EventsParams = {}, options: { enabled?: boolean } = {}) {
+  const { windowSeconds, ...rest } = params
   return useQuery({
     queryKey: ["events", params],
-    queryFn: () => api.getEvents(params),
+    // Derive `from` at fetch time so each auto-refetch keeps a window relative
+    // to the current moment rather than the timestamp captured at render.
+    queryFn: () =>
+      api.getEvents({
+        ...rest,
+        from: windowSeconds ? Math.floor(Date.now() / 1000) - windowSeconds : undefined,
+      }),
     enabled: options.enabled ?? true,
     placeholderData: keepPreviousData,
     refetchInterval: 10_000,
diff --git a/apps/server/src/client/pages/events.tsx b/apps/server/src/client/pages/events.tsx
index 3a0aae5..1a81c9c 100644
--- a/apps/server/src/client/pages/events.tsx
+++ b/apps/server/src/client/pages/events.tsx
@@ -1,5 +1,5 @@
 import { CaretLeft, CaretRight, Funnel, ListBullets, MagnifyingGlass, Trash, X } from "@phosphor-icons/react"
-import { useEffect, useMemo, useState } from "react"
+import { useEffect, useState } from "react"
 import { useNavigate, useSearchParams } from "react-router-dom"
 import { toast } from "sonner"
 import { entityGitHubUrl, formatTimeAgo, repoGitHubUrl } from "@/client/lib/format"
@@ -56,20 +56,16 @@ export default function EventsPage() {
   const repoFilter = searchParams.get("repo") ?? ""
   const timeRangeParam = searchParams.get("timeRange") ?? "all"
   const timeRange: TimeRangeValue = isTimeRangeValue(timeRangeParam) ? timeRangeParam : "all"
-
-  // Recompute the window boundary each render so "last hour" stays relative.
-  const from = useMemo(() => {
-    const range = TIME_RANGES.find((r) => r.value === timeRange)
-    if (!range || range.seconds === 0) return undefined
-    return Math.floor(Date.now() / 1000) - range.seconds
-  }, [timeRange])
+  const windowSeconds = TIME_RANGES.find((r) => r.value === timeRange)?.seconds || undefined
 
   const { data, isLoading, isError, dataUpdatedAt, isFetching, refetch } = useEvents({
     page,
     limit,
     status: statusFilter !== "all" ? statusFilter : undefined,
     repo: repoFilter || undefined,
-    from,
+    // Pass the window size, not an absolute cutoff: `from` is derived at fetch
+    // time so each auto-refetch keeps the window relative to the current moment.
+    windowSeconds,
   })
 
   // Sync input with URL param when navigating