feat: redesign persisted session summaries

frontend/src/viewers/SqlViewer.test.tsx

@@ -22,6 +22,16 @@ const blocks = [
   },
 ];
 
+let writeText: ReturnType<typeof vi.fn>;
+
+beforeEach(() => {
+  writeText = vi.fn().mockResolvedValue(undefined);
+  Object.defineProperty(navigator, "clipboard", {
+    configurable: true,
+    value: { writeText },
+  });
+});
+
 test("(a) renders headers with name, field count, and test-status badge", async () => {
   render(<SqlViewer blocks={blocks} />);
   // Drain the pending highlightSql microtasks inside act() before asserting,
@@ -51,7 +61,11 @@ test("(b) bodies start expanded and clicking header collapses then re-expands",
   });
 
   // Collapse the first block by clicking its header
-  const firstHeader = screen.getByRole("button", { name: /base_orders/i });
+  const firstHeader = screen
+    .getAllByRole("button", { name: /base_orders/i })
+    .find((button) => button.hasAttribute("aria-expanded"));
+  expect(firstHeader).toBeDefined();
+  if (!firstHeader) throw new Error("Missing SQL collapse control");
   await user.click(firstHeader);
 
   // Now only one highlighted block visible
@@ -92,3 +106,24 @@ test("a single SQL block hides the multi-block layout toggle", async () => {
   expect(screen.queryByRole("button", { name: /horizontal/i })).not.toBeInTheDocument();
   expect(screen.queryByRole("button", { name: /vertical/i })).not.toBeInTheDocument();
 });
+
+test("copies the exact SQL from an always-available accessible control", async () => {
+  render(<SqlViewer blocks={[blocks[0]]} />);
+  await waitFor(() => expect(screen.getByTestId("hl")).toBeInTheDocument());
+
+  await userEvent.click(screen.getByRole("button", { name: /copy sql for base_orders/i }));
+
+  expect(writeText).toHaveBeenCalledWith("SELECT id, amount FROM orders");
+  expect(await screen.findByText("Copied")).toBeInTheDocument();
+});
+
+test("reports clipboard rejection and keeps the SQL visible", async () => {
+  writeText.mockRejectedValueOnce(new Error("clipboard unavailable"));
+  render(<SqlViewer blocks={[blocks[0]]} />);
+  await waitFor(() => expect(screen.getByTestId("hl")).toBeInTheDocument());
+
+  await userEvent.click(screen.getByRole("button", { name: /copy sql for base_orders/i }));
+
+  expect(await screen.findByText("Copy failed")).toBeInTheDocument();
+  expect(screen.getByTestId("hl")).toBeInTheDocument();
+});