feat(ui): activity dashboard - live tail + paginated history + filters (M7)

Frontend half of the M7 Activity dashboard (ROADMAP M7, DESIGN s8.3 / s8.7).

- Activity.vue (replaces the M6 placeholder): a live tail (subscribes to
  activity:new, prepends new entries, dedups by id), a paginated history via
  query_activity with pages ACCUMULATED client-side (scroll back through 1000+
  events without re-querying earlier pages), filter controls (source / minimum
  level / event type) that re-query, an empty state, a load-more affordance, and
  the "Export diagnostic bundle" button (reusing the M6 backend-owned save-dialog
  flow). Live tail is event-driven (within 500ms), not polled. Every user-facing
  string flows through vue-i18n t(); new keys added to en-US.json.
- Activity Pinia store (stores/activity.ts): state = entries + filter + cursor +
  loading/error; actions = loadInitial / loadMore (append, no re-query) /
  applyFilter (re-query from page 0) / onLiveEvent (prepend + dedup, filter-aware)
  / subscribeLive / unsubscribeLive.
- Typed IPC wrappers: queryActivity + clearActivityOlderThan (commands.ts),
  typed onActivityNew listener (events.ts), and the ActivityEntry /
  ActivityFilterDto / PageRequestDto / ActivityPageDto TS types mirroring the
  Rust DTOs (types.ts).
- vitest (activity-store.test.ts, 11 tests): pagination appends without
  re-querying earlier pages, a live event prepends + dedups, filters re-query
  from page 0, empty-state renders; mocks invoke + the event listener.

Gates: pnpm install (lockfile unchanged), pnpm lint / test:unit (54 passed) /
build (vue-tsc --noEmit clean) - all green.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012CyiRqk2DVwmJjEu5gcD1m

Author: pmaxhogan

ui/src/__tests__/activity-store.test.ts

@@ -0,0 +1,234 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { createPinia, setActivePinia } from "pinia";
+
+// Activity store tests (SPEC s11.4; DESIGN s8.3). The seams are
+// `@tauri-apps/api/core`'s `invoke` (every typed IPC wrapper routes through it)
+// and `@tauri-apps/api/event`'s `listen` (the live-tail subscription). Mocking
+// both lets us drive the store against a fake backend + manually fire live
+// events, asserting: pagination appends without re-querying earlier pages, a
+// live event prepends + dedups, filters re-query from page 0, and the empty
+// state renders.
+
+const invokeMock = vi.fn();
+vi.mock("@tauri-apps/api/core", () => ({
+  invoke: (cmd: string, args?: unknown) => invokeMock(cmd, args),
+}));
+
+// The live-tail seam: capture the handler `onActivityNew` registers so the test
+// can fire `activity:new` events on demand. `listen` returns an unlisten fn.
+let liveHandler: ((payload: unknown) => void) | null = null;
+const unlistenMock = vi.fn();
+vi.mock("@tauri-apps/api/event", () => ({
+  listen: vi.fn((event: string, cb: (e: { payload: unknown }) => void) => {
+    if (event === "activity:new") {
+      liveHandler = (payload: unknown) => cb({ payload });
+    }
+    return Promise.resolve(unlistenMock);
+  }),
+}));
+
+import { useActivityStore, ACTIVITY_PAGE_SIZE } from "../stores/activity";
+import type { ActivityEntry } from "../ipc/types";
+
+function makeEntry(over: Partial<ActivityEntry> = {}): ActivityEntry {
+  return {
+    id: 1,
+    ts: 1000,
+    sourceId: null,
+    level: "info",
+    eventType: "upload_done",
+    fileCount: null,
+    bytes: null,
+    message: null,
+    ...over,
+  };
+}
+
+/** Build a query_activity page DTO for `entries`, with paging metadata. */
+function makePage(
+  entries: ActivityEntry[],
+  page: number,
+  total: number,
+): {
+  entries: ActivityEntry[];
+  total: number;
+  page: number;
+  limit: number;
+  hasMore: boolean;
+} {
+  const consumed = (page + 1) * ACTIVITY_PAGE_SIZE;
+  return {
+    entries,
+    total,
+    page,
+    limit: ACTIVITY_PAGE_SIZE,
+    hasMore: total > consumed,
+  };
+}
+
+beforeEach(() => {
+  setActivePinia(createPinia());
+  invokeMock.mockReset();
+  unlistenMock.mockReset();
+  liveHandler = null;
+});
+
+describe("activity store: pagination", () => {
+  it("loadInitial fetches page 0 and records paging metadata", async () => {
+    const rows = [makeEntry({ id: 3 }), makeEntry({ id: 2 }), makeEntry({ id: 1 })];
+    invokeMock.mockResolvedValueOnce(makePage(rows, 0, 250));
+    const store = useActivityStore();
+    await store.loadInitial();
+    expect(invokeMock).toHaveBeenCalledWith("query_activity", {
+      filter: {},
+      page: { page: 0, limit: ACTIVITY_PAGE_SIZE },
+    });
+    expect(store.entries).toHaveLength(3);
+    expect(store.entries[0].id).toBe(3);
+    expect(store.total).toBe(250);
+    expect(store.hasMore).toBe(true);
+    expect(store.loadedPage).toBe(0);
+  });
+
+  it("loadMore appends the next page WITHOUT re-querying earlier pages", async () => {
+    const page0 = [makeEntry({ id: 200 }), makeEntry({ id: 199 })];
+    const page1 = [makeEntry({ id: 100 }), makeEntry({ id: 99 })];
+    invokeMock.mockResolvedValueOnce(makePage(page0, 0, 250));
+    const store = useActivityStore();
+    await store.loadInitial();
+    expect(invokeMock).toHaveBeenCalledTimes(1);
+
+    invokeMock.mockResolvedValueOnce(makePage(page1, 1, 250));
+    await store.loadMore();
+
+    // Exactly ONE additional fetch (page 1), never a re-fetch of page 0.
+    expect(invokeMock).toHaveBeenCalledTimes(2);
+    expect(invokeMock).toHaveBeenNthCalledWith(2, "query_activity", {
+      filter: {},
+      page: { page: 1, limit: ACTIVITY_PAGE_SIZE },
+    });
+    // Pages accumulated client-side, in order.
+    expect(store.entries.map((e) => e.id)).toEqual([200, 199, 100, 99]);
+    expect(store.loadedPage).toBe(1);
+  });
+
+  it("loadMore is a no-op when no more pages remain", async () => {
+    invokeMock.mockResolvedValueOnce(makePage([makeEntry({ id: 1 })], 0, 1));
+    const store = useActivityStore();
+    await store.loadInitial();
+    expect(store.hasMore).toBe(false);
+    await store.loadMore();
+    // No second fetch fired.
+    expect(invokeMock).toHaveBeenCalledTimes(1);
+  });
+
+  it("loadMore dedups a row already present from the live tail", async () => {
+    const page0 = [makeEntry({ id: 200 })];
+    invokeMock.mockResolvedValueOnce(makePage(page0, 0, 250));
+    const store = useActivityStore();
+    await store.subscribeLive();
+    await store.loadInitial();
+
+    // A live event arrives for id 150 before it is paged in.
+    liveHandler?.(makeEntry({ id: 150, ts: 900 }));
+    expect(store.entries.map((e) => e.id)).toEqual([150, 200]);
+
+    // Page 1 includes id 150 again - it must NOT be duplicated.
+    invokeMock.mockResolvedValueOnce(
+      makePage([makeEntry({ id: 150, ts: 900 }), makeEntry({ id: 149 })], 1, 250),
+    );
+    await store.loadMore();
+    const ids = store.entries.map((e) => e.id);
+    expect(ids.filter((i) => i === 150)).toHaveLength(1);
+    expect(ids).toEqual([150, 200, 149]);
+  });
+});
+
+describe("activity store: live tail", () => {
+  it("prepends a live event newest-first and bumps total", async () => {
+    invokeMock.mockResolvedValueOnce(makePage([makeEntry({ id: 1 })], 0, 1));
+    const store = useActivityStore();
+    await store.subscribeLive();
+    await store.loadInitial();
+    expect(store.total).toBe(1);
+
+    liveHandler?.(makeEntry({ id: 2, ts: 2000 }));
+    expect(store.entries[0].id).toBe(2);
+    expect(store.entries.map((e) => e.id)).toEqual([2, 1]);
+    expect(store.total).toBe(2);
+  });
+
+  it("dedups a live event whose id is already present", async () => {
+    invokeMock.mockResolvedValueOnce(makePage([makeEntry({ id: 5 })], 0, 1));
+    const store = useActivityStore();
+    await store.subscribeLive();
+    await store.loadInitial();
+    // Same id fired live: ignored.
+    liveHandler?.(makeEntry({ id: 5 }));
+    expect(store.entries).toHaveLength(1);
+    expect(store.total).toBe(1);
+  });
+
+  it("drops a live event that does not match the active filter", async () => {
+    invokeMock.mockResolvedValueOnce(makePage([], 0, 0));
+    const store = useActivityStore();
+    await store.subscribeLive();
+    await store.applyFilter({ minLevel: "error" });
+    // An info-level live event must be dropped under a min-level=error filter.
+    liveHandler?.(makeEntry({ id: 9, level: "info" }));
+    expect(store.entries).toHaveLength(0);
+    // A matching error-level event is kept.
+    liveHandler?.(makeEntry({ id: 10, level: "error" }));
+    expect(store.entries.map((e) => e.id)).toEqual([10]);
+  });
+
+  it("unsubscribeLive calls the unlisten fn", async () => {
+    const store = useActivityStore();
+    await store.subscribeLive();
+    store.unsubscribeLive();
+    expect(unlistenMock).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe("activity store: filters", () => {
+  it("applyFilter re-queries from page 0 with the new filter and resets state", async () => {
+    invokeMock.mockResolvedValueOnce(
+      makePage([makeEntry({ id: 1 }), makeEntry({ id: 2 })], 0, 2),
+    );
+    const store = useActivityStore();
+    await store.loadInitial();
+    expect(store.entries).toHaveLength(2);
+
+    invokeMock.mockResolvedValueOnce(
+      makePage([makeEntry({ id: 3, level: "error" })], 0, 1),
+    );
+    await store.applyFilter({ minLevel: "error", sourceId: "src-1" });
+
+    expect(invokeMock).toHaveBeenNthCalledWith(2, "query_activity", {
+      filter: { minLevel: "error", sourceId: "src-1" },
+      page: { page: 0, limit: ACTIVITY_PAGE_SIZE },
+    });
+    // Old rows cleared; only the re-queried page remains.
+    expect(store.entries.map((e) => e.id)).toEqual([3]);
+    expect(store.loadedPage).toBe(0);
+  });
+});
+
+describe("activity store: empty state", () => {
+  it("isEmpty is true after loading an empty page", async () => {
+    invokeMock.mockResolvedValueOnce(makePage([], 0, 0));
+    const store = useActivityStore();
+    await store.loadInitial();
+    expect(store.entries).toHaveLength(0);
+    expect(store.isEmpty).toBe(true);
+    expect(store.error).toBeNull();
+  });
+
+  it("isEmpty is false when an error occurred", async () => {
+    invokeMock.mockRejectedValueOnce(new Error("db locked"));
+    const store = useActivityStore();
+    await store.loadInitial();
+    expect(store.error).toContain("db locked");
+    expect(store.isEmpty).toBe(false);
+  });
+});

ui/src/ipc/commands.ts

@@ -8,6 +8,8 @@ import { invoke } from "@tauri-apps/api/core";
 
 import type {
   AccountDto,
+  ActivityFilterDto,
+  ActivityPageDto,
   AddAccountWizardSessionId,
   AddSourceRequest,
   AddSourceResult,
@@ -17,6 +19,7 @@ import type {
   GlobalSyncStatus,
   OAuthAuthUrl,
   OAuthStatus,
+  PageRequestDto,
   PickedPath,
   ReauthSession,
   ReleaseDto,
@@ -167,3 +170,21 @@ export function checkForUpdates(): Promise<UpdateInfo | null> {
 export function listReleases(page: number): Promise<ReleaseDto[]> {
   return invoke("list_releases", { page });
 }
+
+// --- Activity (SPEC s11.4) ---
+
+/** Query a paginated, filtered page of the activity log (SPEC s11.4). The
+ * frontend accumulates pages client-side for the history view; the live tail is
+ * event-driven via `onActivityNew` (SPEC s11.7), not polled here. */
+export function queryActivity(
+  filter: ActivityFilterDto,
+  page: PageRequestDto,
+): Promise<ActivityPageDto> {
+  return invoke("query_activity", { filter, page });
+}
+
+/** Prune activity-log rows older than `beforeTs` (Unix ms); returns the count
+ * deleted (SPEC s11.4). */
+export function clearActivityOlderThan(beforeTs: number): Promise<number> {
+  return invoke("clear_activity_older_than", { beforeTs });
+}

ui/src/ipc/events.ts

@@ -6,7 +6,7 @@
 
 import { listen, type UnlistenFn } from "@tauri-apps/api/event";
 
-import type { GlobalSyncStatus, UpdateInfo } from "./types";
+import type { ActivityEntry, GlobalSyncStatus, UpdateInfo } from "./types";
 
 /** `sync:status_changed` payload: GlobalSyncStatus (SPEC s11.7). */
 export function onSyncStatusChanged(
@@ -31,11 +31,12 @@ export function onSyncSourceProgress(
   );
 }
 
-/** `activity:new` payload: ActivityEntry (typed in M7) (SPEC s11.7). */
+/** `activity:new` payload: ActivityEntry (SPEC s11.7). The Activity dashboard's
+ * live tail subscribes to this and prepends new entries (deduped by id). */
 export function onActivityNew(
-  handler: (entry: unknown) => void,
+  handler: (entry: ActivityEntry) => void,
 ): Promise<UnlistenFn> {
-  return listen<unknown>("activity:new", (e) => handler(e.payload));
+  return listen<ActivityEntry>("activity:new", (e) => handler(e.payload));
 }
 
 /** `account:needs_reauth` payload: { account_id, email } (SPEC s11.7). */

ui/src/ipc/types.ts

@@ -236,6 +236,51 @@ export interface ReleaseDto {
   url: string;
 }
 
+// --- Activity (SPEC s11.4) - mirrors driven-core ActivityEntry + the
+// src-tauri activity DTOs ---
+
+/** `activity_log.level` serialized form (mirrors driven_core ActivityLevel). */
+export type ActivityLevel = "info" | "warn" | "error";
+
+/** One activity-log entry: the per-row element of an ActivityPage AND the
+ * `activity:new` event payload (mirrors driven_core::types::ActivityEntry). */
+export interface ActivityEntry {
+  id: number;
+  ts: number;
+  sourceId: string | null;
+  level: ActivityLevel;
+  eventType: string;
+  fileCount: number | null;
+  bytes: number | null;
+  message: string | null;
+}
+
+/** Filter body for `query_activity` (mirrors src-tauri ActivityFilterDto). All
+ * fields optional; present fields combine with AND. */
+export interface ActivityFilterDto {
+  sourceId?: string | null;
+  sinceMs?: number | null;
+  beforeMs?: number | null;
+  minLevel?: ActivityLevel | null;
+  eventTypes?: string[];
+}
+
+/** Page selector for `query_activity` (mirrors src-tauri PageRequestDto). */
+export interface PageRequestDto {
+  page: number;
+  limit: number;
+}
+
+/** One page of activity returned by `query_activity` (mirrors src-tauri
+ * ActivityPageDto): newest-first entries + paging metadata. */
+export interface ActivityPageDto {
+  entries: ActivityEntry[];
+  total: number;
+  page: number;
+  limit: number;
+  hasMore: boolean;
+}
+
 // --- Sync (SPEC s11.3) - mirrors src-tauri/src/commands/sync.rs ---
 
 /** Mirrors the Rust `OrchestratorState` (driven_core::types). Carried as an

ui/src/locales/en-US.json

@@ -195,7 +195,39 @@
   },
   "activity": {
     "title": "Activity",
-    "placeholder": "The activity dashboard arrives in a later release."
+    "subtitle": "Live feed and history of every backup event.",
+    "empty": "No activity yet. Events appear here as Driven backs up your files.",
+    "loadMore": "Load older events",
+    "loadingMore": "Loading more...",
+    "allLoaded": "You have reached the start of the activity log.",
+    "countSummary": "Showing {shown} of {total} events",
+    "filters": {
+      "title": "Filters",
+      "source": "Source",
+      "allSources": "All sources",
+      "level": "Minimum level",
+      "allLevels": "All levels",
+      "eventType": "Event type",
+      "allEventTypes": "All event types",
+      "clear": "Clear filters"
+    },
+    "level": {
+      "info": "Info",
+      "warn": "Warning",
+      "error": "Error"
+    },
+    "column": {
+      "time": "Time",
+      "level": "Level",
+      "event": "Event",
+      "source": "Source",
+      "details": "Details"
+    },
+    "noSource": "Global",
+    "files": "{count} files",
+    "exportBundleButton": "Export diagnostic bundle",
+    "exporting": "Exporting...",
+    "exportedTo": "Saved diagnostic bundle to {path}"
   },
   "restore": {
     "title": "Restore",