fix(recall): refresh the open corpus view

Extraction can finish while the Recall browser remains mounted, leaving both visible entries and coverage metrics outdated with no way for the user to reconcile them. Use the shared refresh control so one bounded refresh reloads both views and keeps the page current on the standard interval.

Author: wesm

frontend/src/lib/components/recall/RecallPage.svelte

@@ -25,6 +25,7 @@
   import { sessions } from "../../stores/sessions.svelte.js";
   import { ui } from "../../stores/ui.svelte.js";
   import { LatestRead } from "../../utils/latest-read.js";
+  import RefreshControl from "../shared/RefreshControl.svelte";
 
   const ENTRY_TYPES = [
     "fact",
@@ -50,6 +51,8 @@
   let entriesFailed = $state(false);
   let statusLoading = $state(true);
   let statusFailed = $state(false);
+  let entriesUpdatedAt = $state<number | null>(null);
+  let statusUpdatedAt = $state<number | null>(null);
   let search = $state("");
   let query = $state("");
   let project = $state("");
@@ -60,6 +63,11 @@
   let searchTimer: ReturnType<typeof setTimeout> | undefined;
   const entriesRead = new LatestRead();
   const statusRead = new LatestRead();
+  const lastUpdatedAt = $derived(
+    entriesUpdatedAt !== null && statusUpdatedAt !== null
+      ? Math.min(entriesUpdatedAt, statusUpdatedAt)
+      : null,
+  );
 
   const projectOptions = $derived.by((): TypeaheadOption[] => [
     {
@@ -134,6 +142,7 @@
         : page.entries;
       nextCursor = page.nextCursor ?? "";
       resultCap = page.resultCap ?? 0;
+      entriesUpdatedAt = Date.now();
     } catch (error) {
       if (isAbortError(error) || !entriesRead.isCurrent(signal)) return;
       if (appending && error instanceof ApiError && error.status === 409) {
@@ -159,6 +168,7 @@
       const next = await fetchRecallExtractionStatus(signal);
       if (!statusRead.isCurrent(signal)) return;
       status = next;
+      statusUpdatedAt = Date.now();
     } catch (error) {
       if (isAbortError(error) || !statusRead.isCurrent(signal)) return;
       status = null;
@@ -175,6 +185,10 @@
     }, 250);
   }
 
+  async function refreshRecall() {
+    await Promise.all([loadEntries(), loadStatus()]);
+  }
+
   function evidenceLabel(evidence: RecallEvidence): string {
     return m.session_recall_evidence_range({
       start: evidence.message_start_ordinal,
@@ -221,13 +235,21 @@
       <h2>{m.recall_page_title()}</h2>
       <p>{m.recall_page_subtitle()}</p>
     </div>
-    {#if !entriesLoading && !entriesFailed}
-      <span class="entry-count">
-        {m.recall_page_entries_shown({
-          countLabel: entries.length.toLocaleString(),
-        })}
-      </span>
-    {/if}
+    <div class="header-actions">
+      {#if !entriesLoading && !entriesFailed}
+        <span class="entry-count">
+          {m.recall_page_entries_shown({
+            countLabel: entries.length.toLocaleString(),
+          })}
+        </span>
+      {/if}
+      <RefreshControl
+        {lastUpdatedAt}
+        busy={entriesLoading || statusLoading}
+        onRefresh={refreshRecall}
+        label={m.shared_refresh()}
+      />
+    </div>
   </header>
 
   <Card level="default" padding="none" class="extraction-card">
@@ -513,6 +535,12 @@
     font-size: 10px;
   }
 
+  .header-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-4);
+  }
+
   .extraction-content {
     padding: 18px 20px;
   }

frontend/src/lib/components/recall/RecallPage.test.ts

@@ -196,6 +196,93 @@ describe("RecallPage", () => {
     );
   });
 
+  it("refreshes entries and extraction coverage while the page stays open", async () => {
+    const defaultFetch = fetchMock as unknown as (
+      input: RequestInfo | URL,
+    ) => Promise<Response>;
+    let entryRequests = 0;
+    let statusRequests = 0;
+    fetchMock = vi.fn(async (input: RequestInfo | URL) => {
+      const url = String(input);
+      if (url.includes("/recall/entries?")) {
+        entryRequests++;
+        if (entryRequests > 1) {
+          return new Response(JSON.stringify({
+            entries: [{
+              id: "recall-new",
+              type: "fact",
+              scope: "project",
+              status: "accepted",
+              review_state: "unreviewed_auto",
+              title: "Newly distilled Recall entry",
+              body: "This entry became available after the page opened.",
+              source_session_id: "session-new",
+              source_run_id: "generation-active",
+              extractor_method: "turns-v1",
+              transferable: false,
+              provenance_ok: true,
+              created_at: "2026-07-23T12:00:00Z",
+              updated_at: "2026-07-23T12:00:00Z",
+              evidence: [],
+            }],
+            trusted_only: false,
+          }), {
+            status: 200,
+            headers: { "Content-Type": "application/json" },
+          });
+        }
+      }
+      if (url.includes("/recall/extraction/status")) {
+        statusRequests++;
+        if (statusRequests > 1) {
+          return new Response(JSON.stringify({
+            configured: true,
+            fingerprint: "generation-active",
+            source_runs: ["generation-active"],
+            generations: [],
+            stats: {
+              pending: 1,
+              partial: 0,
+              done: 9,
+              failed: 1,
+              units_done: 20,
+              units_total: 20,
+              entries: 13,
+            },
+            eligible_backlog: 0,
+          }), {
+            status: 200,
+            headers: { "Content-Type": "application/json" },
+          });
+        }
+      }
+      return defaultFetch(input);
+    });
+    vi.stubGlobal("fetch", fetchMock);
+    component = mount(RecallPage, { target: document.body });
+    await vi.waitFor(() => {
+      expect(document.body.textContent).toContain(
+        "Keep extraction passes bounded",
+      );
+    });
+
+    const refresh = document.querySelector<HTMLButtonElement>(
+      'button[aria-label="Refresh"]',
+    );
+    expect(refresh).not.toBeNull();
+    refresh!.click();
+
+    await vi.waitFor(() => {
+      expect(document.body.textContent).toContain(
+        "Newly distilled Recall entry",
+      );
+      expect(document.body.textContent).toContain("9 done");
+      expect(document.body.textContent).toContain("13 entries");
+    });
+    expect(entryRequests).toBe(2);
+    expect(statusRequests).toBe(2);
+  });
+
   it("loads the next cursor page and removes the truncation action", async () => {
     component = mount(RecallPage, { target: document.body });