From 96b15b75e6b51f37db176ab39bb568130483720f Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Tue, 30 Jun 2026 12:42:25 -0400
Subject: [PATCH] feat(web/diagnostics): default to recent 500, move time
 window to Advanced

The diagnostics view already defaulted to the most recent 500 events (no
window); make that the obvious path. Device/Kind stay primary; the
start/end window + row cap move into a collapsed "Advanced filters"
disclosure (auto-opens when a window is active) with a "Reset to recent
500" action. Caption now states whether you're seeing the recent default
or a windowed slice.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01K55iTxn95BtshocgdE1shW
---
 web/src/routes/admin/diagnostics/+page.svelte | 181 +++++++++++-------
 1 file changed, 110 insertions(+), 71 deletions(-)

diff --git a/web/src/routes/admin/diagnostics/+page.svelte b/web/src/routes/admin/diagnostics/+page.svelte
index f6fb0e34..12379cb9 100644
--- a/web/src/routes/admin/diagnostics/+page.svelte
+++ b/web/src/routes/admin/diagnostics/+page.svelte
@@ -36,13 +36,26 @@
     }
   }
 
+  // Default view = the most recent N events, no time window. The
+  // start/end window is an Advanced affordance.
+  const DEFAULT_LIMIT = 500;
+
   // Filter state.
   let accountId = $state('');
   let clientId = $state('');
   let kind = $state('');
   let fromLocal = $state('');
   let toLocal = $state('');
-  let limit = $state(500);
+  let limit = $state(DEFAULT_LIMIT);
+
+  // True when an explicit time window is set (drives the caption wording).
+  const hasWindow = $derived(Boolean(fromLocal || toLocal));
+
+  function resetWindow() {
+    fromLocal = '';
+    toLocal = '';
+    limit = DEFAULT_LIMIT;
+  }
 
   // datetime-local (browser-local, no tz) → RFC3339 UTC the API accepts.
   function toRfc(v: string): string | undefined {
@@ -191,77 +204,97 @@
     </div>
   </section>
 
-  <!-- Filters -->
-  <section class="flex flex-wrap items-end gap-3">
-    <label class="block text-xs text-text-secondary">
-      Device
-      <select
-        bind:value={clientId}
-        class="mt-1 block w-48 rounded border border-border bg-surface px-2 py-1.5 text-sm text-text-primary"
-      >
-        <option value="">All devices</option>
-        {#each devices as d (d.client_id)}
-          <option value={d.client_id}>{d.client_id.slice(0, 12)} · {d.event_count}</option>
-        {/each}
-      </select>
-    </label>
-    <label class="block text-xs text-text-secondary">
-      Kind
-      <select
-        bind:value={kind}
-        class="mt-1 block w-40 rounded border border-border bg-surface px-2 py-1.5 text-sm text-text-primary"
-      >
-        <option value="">All kinds</option>
-        {#each KINDS as k (k)}
-          <option value={k}>{kindLabel(k)}</option>
-        {/each}
-      </select>
-    </label>
-    <label class="block text-xs text-text-secondary">
-      From
-      <input
-        type="datetime-local"
-        bind:value={fromLocal}
-        class="mt-1 block rounded border border-border bg-surface px-2 py-1.5 text-sm text-text-primary"
-      />
-    </label>
-    <label class="block text-xs text-text-secondary">
-      To
-      <input
-        type="datetime-local"
-        bind:value={toLocal}
-        class="mt-1 block rounded border border-border bg-surface px-2 py-1.5 text-sm text-text-primary"
-      />
-    </label>
-    <label class="block text-xs text-text-secondary">
-      Limit
-      <input
-        type="number"
-        min="1"
-        max="5000"
-        bind:value={limit}
-        class="mt-1 block w-24 rounded border border-border bg-surface px-2 py-1.5 text-sm text-text-primary"
-      />
-    </label>
+  <!-- Filters. Default view = most recent {DEFAULT_LIMIT} events, no time
+       window; the start/end window lives under Advanced. -->
+  <section class="space-y-3">
+    <div class="flex flex-wrap items-end gap-3">
+      <label class="block text-xs text-text-secondary">
+        Device
+        <select
+          bind:value={clientId}
+          class="mt-1 block w-48 rounded border border-border bg-surface px-2 py-1.5 text-sm text-text-primary"
+        >
+          <option value="">All devices</option>
+          {#each devices as d (d.client_id)}
+            <option value={d.client_id}>{d.client_id.slice(0, 12)} · {d.event_count}</option>
+          {/each}
+        </select>
+      </label>
+      <label class="block text-xs text-text-secondary">
+        Kind
+        <select
+          bind:value={kind}
+          class="mt-1 block w-40 rounded border border-border bg-surface px-2 py-1.5 text-sm text-text-primary"
+        >
+          <option value="">All kinds</option>
+          {#each KINDS as k (k)}
+            <option value={k}>{kindLabel(k)}</option>
+          {/each}
+        </select>
+      </label>
 
-    <div class="ml-auto flex gap-2">
-      <button
-        type="button"
-        onclick={onCopyJson}
-        disabled={rows.length === 0}
-        class="inline-flex items-center gap-1.5 rounded border border-border px-3 py-2 text-sm text-text-primary hover:bg-surface-hover disabled:opacity-50"
-      >
-        <Copy size={15} /> Copy JSON
-      </button>
-      <button
-        type="button"
-        onclick={onDownloadNdjson}
-        disabled={rows.length === 0}
-        class="inline-flex items-center gap-1.5 rounded border border-border px-3 py-2 text-sm text-text-primary hover:bg-surface-hover disabled:opacity-50"
-      >
-        <Download size={15} /> Download
-      </button>
+      <div class="ml-auto flex gap-2">
+        <button
+          type="button"
+          onclick={onCopyJson}
+          disabled={rows.length === 0}
+          class="inline-flex items-center gap-1.5 rounded border border-border px-3 py-2 text-sm text-text-primary hover:bg-surface-hover disabled:opacity-50"
+        >
+          <Copy size={15} /> Copy JSON
+        </button>
+        <button
+          type="button"
+          onclick={onDownloadNdjson}
+          disabled={rows.length === 0}
+          class="inline-flex items-center gap-1.5 rounded border border-border px-3 py-2 text-sm text-text-primary hover:bg-surface-hover disabled:opacity-50"
+        >
+          <Download size={15} /> Download
+        </button>
+      </div>
     </div>
+
+    <!-- Advanced: explicit start/end window + row cap. Collapsed by
+         default so the common case (recent N) needs no interaction. -->
+    <details class="rounded-md border border-border" open={hasWindow}>
+      <summary class="cursor-pointer px-3 py-2 text-xs text-text-secondary">
+        Advanced filters{hasWindow ? ' · window active' : ''}
+      </summary>
+      <div class="flex flex-wrap items-end gap-3 border-t border-border px-3 py-3">
+        <label class="block text-xs text-text-secondary">
+          From
+          <input
+            type="datetime-local"
+            bind:value={fromLocal}
+            class="mt-1 block rounded border border-border bg-surface px-2 py-1.5 text-sm text-text-primary"
+          />
+        </label>
+        <label class="block text-xs text-text-secondary">
+          To
+          <input
+            type="datetime-local"
+            bind:value={toLocal}
+            class="mt-1 block rounded border border-border bg-surface px-2 py-1.5 text-sm text-text-primary"
+          />
+        </label>
+        <label class="block text-xs text-text-secondary">
+          Limit
+          <input
+            type="number"
+            min="1"
+            max="5000"
+            bind:value={limit}
+            class="mt-1 block w-24 rounded border border-border bg-surface px-2 py-1.5 text-sm text-text-primary"
+          />
+        </label>
+        <button
+          type="button"
+          onclick={resetWindow}
+          class="rounded border border-border px-3 py-2 text-sm text-text-secondary hover:bg-surface-hover"
+        >
+          Reset to recent {DEFAULT_LIMIT}
+        </button>
+      </div>
+    </details>
   </section>
 
   <!-- Timeline -->
@@ -276,7 +309,13 @@
     </p>
   {:else}
     <div class="flex items-center justify-between">
-      <span class="text-xs text-text-muted">{rows.length} events (oldest first)</span>
+      <span class="text-xs text-text-muted">
+        {#if hasWindow}
+          {rows.length} events in window (oldest first)
+        {:else}
+          Most recent {rows.length} events (oldest first) · set a time window under Advanced
+        {/if}
+      </span>
     </div>
     <ul class="divide-y divide-border rounded-md border border-border font-mono text-xs">
       {#each rows as r (r.id)}