feat(export): wire History + Logs export JSON handlers (#1354)

Replaces the `todoNoop` placeholders in App.tsx with real handlers that
serialize the current entries and trigger a browser download via the
existing `downloadJsonFile` helper.

- Adds `buildExportFilename(kind, serverId, now?)` next to the download
  helper. Produces sortable, filesystem-safe names like
  `inspector-history-alpha-2026-03-17T10-00-42.123Z.json` (URL-encodes
  server ids that contain slashes / spaces / colons, swaps `:` for `-`
  in the ISO timestamp so the file is safe on Windows).
- Wires `onExportHistory` (full MessageEntry list) and `onExportLogs`
  (the LogEntryData list the screen renders).
- Routes the existing Network export through the same filename helper
  for consistency.

Unit tests cover the filename builder, including the no-server-id
fallback, special-character encoding, and the default-`now` shape.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: cliffhall

clients/web/src/App.tsx

@@ -51,7 +51,7 @@ import {
 } from "./components/groups/ServerConfigModal/ServerConfigModal";
 import { ServerSettingsModal } from "./components/groups/ServerSettingsModal/ServerSettingsModal";
 import { ServerRemoveConfirmModal } from "./components/groups/ServerRemoveConfirmModal/ServerRemoveConfirmModal";
-import { downloadJsonFile } from "./lib/downloadFile";
+import { buildExportFilename, downloadJsonFile } from "./lib/downloadFile";
 import { createWebEnvironment } from "./lib/environmentFactory";
 
 // OAuth redirect URL provider — points at the dev backend's `/oauth/callback`
@@ -679,8 +679,27 @@ function App() {
 
   const onExportNetwork = useCallback(() => {
     if (fetchRequests.length === 0) return;
-    downloadJsonFile("network.json", JSON.stringify(fetchRequests, null, 2));
-  }, [fetchRequests]);
+    downloadJsonFile(
+      buildExportFilename("network", activeServerId),
+      JSON.stringify(fetchRequests, null, 2),
+    );
+  }, [fetchRequests, activeServerId]);
+
+  const onExportHistory = useCallback(() => {
+    if (messages.length === 0) return;
+    downloadJsonFile(
+      buildExportFilename("history", activeServerId),
+      JSON.stringify(messages, null, 2),
+    );
+  }, [messages, activeServerId]);
+
+  const onExportLogs = useCallback(() => {
+    if (logs.length === 0) return;
+    downloadJsonFile(
+      buildExportFilename("logs", activeServerId),
+      JSON.stringify(logs, null, 2),
+    );
+  }, [logs, activeServerId]);
 
   // Action stubs — these UI affordances exist but require additional
   // wiring (server CRUD, history pinning, app sandbox round-trip, log
@@ -916,10 +935,10 @@ function App() {
         onRefreshTasks={onRefreshTasks}
         onSetLogLevel={onSetLogLevel}
         onClearLogs={onClearLogs}
-        onExportLogs={todoNoop}
+        onExportLogs={onExportLogs}
         onCopyAllLogs={todoNoop}
         onClearHistory={onClearHistory}
-        onExportHistory={todoNoop}
+        onExportHistory={onExportHistory}
         onReplayHistory={todoNoop}
         onTogglePinHistory={todoNoop}
         onClearNetwork={onClearNetwork}

clients/web/src/lib/downloadFile.ts

@@ -30,3 +30,25 @@ export function downloadJsonFile(filename: string, json: string): void {
     URL.revokeObjectURL(url);
   }
 }
+
+/**
+ * Build a sortable export filename in the shape
+ * `inspector-<kind>-<server-id>-<ISO timestamp>.json`. The timestamp uses
+ * the standard ISO-8601 form with `:` swapped for `-` so the result is
+ * safe on Windows (which disallows `:` in filenames). Server id is
+ * passed through `encodeURIComponent` for the same reason — config ids
+ * are user-supplied and may contain slashes / spaces / colons.
+ *
+ * When `serverId` is undefined the segment is omitted; the rest of the
+ * filename still uniquely identifies the export by kind + time.
+ */
+export function buildExportFilename(
+  kind: string,
+  serverId: string | undefined,
+  now: Date = new Date(),
+): string {
+  const iso = now.toISOString().replace(/:/g, "-");
+  const id = serverId ? encodeURIComponent(serverId) : undefined;
+  const segments = ["inspector", kind, ...(id ? [id] : []), iso];
+  return `${segments.join("-")}.json`;
+}

clients/web/src/test/lib/downloadFile.test.ts

@@ -5,7 +5,7 @@
  */
 
 import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
-import { downloadJsonFile } from "../../lib/downloadFile";
+import { downloadJsonFile, buildExportFilename } from "../../lib/downloadFile";
 
 describe("downloadJsonFile", () => {
   const originalCreate = URL.createObjectURL;
@@ -92,3 +92,32 @@ describe("downloadJsonFile", () => {
     expect(text).toBe('{"x":1}');
   });
 });
+
+describe("buildExportFilename", () => {
+  const fixedNow = new Date("2026-03-17T10:00:42.123Z");
+
+  it("includes kind, server id, and ISO timestamp with `:` swapped for `-`", () => {
+    expect(buildExportFilename("history", "alpha", fixedNow)).toBe(
+      "inspector-history-alpha-2026-03-17T10-00-42.123Z.json",
+    );
+  });
+
+  it("omits the server-id segment when serverId is undefined", () => {
+    expect(buildExportFilename("logs", undefined, fixedNow)).toBe(
+      "inspector-logs-2026-03-17T10-00-42.123Z.json",
+    );
+  });
+
+  it("encodes server ids that contain filesystem-unsafe characters", () => {
+    expect(buildExportFilename("network", "my server/v2", fixedNow)).toBe(
+      "inspector-network-my%20server%2Fv2-2026-03-17T10-00-42.123Z.json",
+    );
+  });
+
+  it("defaults `now` to the current time when not provided", () => {
+    const name = buildExportFilename("history", "alpha");
+    expect(name).toMatch(
+      /^inspector-history-alpha-\d{4}-\d{2}-\d{2}T\d{2}-\d{2}-\d{2}\.\d{3}Z\.json$/,
+    );
+  });
+});