fix(history): add per-entry remove UI to QueryHistory (closes #327)

src/components/history/QueryHistory.tsx

@@ -1,4 +1,4 @@
-import { CheckCircle, Clock, Search, Trash2, XCircle } from "lucide-react";
+import { CheckCircle, Clock, Search, Trash2, X, XCircle } from "lucide-react";
 import { useMemo, useState } from "react";
 import { useEditorStore } from "../../stores/editorStore";
 import { type HistoryEntry, useHistoryStore } from "../../stores/historyStore";
@@ -48,6 +48,11 @@ export function QueryHistory() {
     }
   };
 
+  const handleRemove = (e: React.MouseEvent, entryId: string) => {
+    e.stopPropagation();
+    useHistoryStore.getState().removeEntry(entryId);
+  };
+
   return (
     <div className="flex h-full flex-col">
       <div className="flex items-center gap-1 border-b border-[var(--color-border)] px-2 py-1.5">
@@ -85,9 +90,20 @@ export function QueryHistory() {
                 onClick={() => handleClick(entry)}
                 className="group flex w-full flex-col gap-0.5 border-b border-[var(--color-border)] px-2.5 py-2 text-left hover:bg-[var(--color-bg-tertiary)]"
               >
-                <pre className="line-clamp-2 whitespace-pre-wrap break-all font-mono text-[11px] leading-tight text-[var(--color-text-primary)]">
-                {entry.sql}
-                </pre>
+                <div className="flex items-start justify-between gap-1">
+                  <pre className="line-clamp-2 flex-1 whitespace-pre-wrap break-all font-mono text-[11px] leading-tight text-[var(--color-text-primary)]">
+                    {entry.sql}
+                  </pre>
+                  <span
+                    role="button"
+                    aria-label="Delete entry"
+                    title="Delete entry"
+                    onClick={(e) => handleRemove(e, entry.id)}
+                    className="inline-flex shrink-0 cursor-pointer rounded p-0.5 text-[var(--color-text-muted)] opacity-0 hover:bg-[var(--color-bg-secondary)] hover:text-red-400 group-hover:opacity-100"
+                  >
+                    <X className="h-3 w-3" />
+                  </span>
+                </div>
                 <div className="flex items-center gap-2 text-[10px] text-[var(--color-text-muted)]">
                   {entry.status === "success"
                     ? <CheckCircle className="h-3 w-3 text-green-400" />

src/components/history/__tests__/QueryHistory.test.tsx

@@ -3,7 +3,7 @@ import { beforeEach, describe, expect, it, vi } from "vitest";
 import { QueryHistory } from "../QueryHistory";
 
 vi.mock("../../../stores/historyStore", () => ({
-  useHistoryStore: vi.fn(),
+  useHistoryStore: Object.assign(vi.fn(), { getState: vi.fn() }),
 }));
 
 vi.mock("../../../stores/editorStore", () => ({
@@ -15,6 +15,8 @@ vi.mock("../../../stores/editorStore", () => ({
 import { useEditorStore } from "../../../stores/editorStore";
 import { useHistoryStore } from "../../../stores/historyStore";
 
+const mockRemoveEntry = vi.fn();
+
 const mockEntries = [
   {
     id: "entry-1",
@@ -62,11 +64,19 @@ describe("QueryHistory", () => {
           entries: mockEntries,
           clearHistory: mockClearHistory,
           addEntry: vi.fn(),
-          removeEntry: vi.fn(),
+          removeEntry: mockRemoveEntry,
         });
       }
       return mockEntries;
     });
+    (
+      useHistoryStore as unknown as { getState: ReturnType<typeof vi.fn> }
+    ).getState.mockImplementation(() => ({
+      entries: mockEntries,
+      clearHistory: mockClearHistory,
+      addEntry: vi.fn(),
+      removeEntry: mockRemoveEntry,
+    }));
   });
 
   it("renders history entries", () => {
@@ -86,7 +96,12 @@ describe("QueryHistory", () => {
   it("shows empty state when no entries", () => {
     vi.mocked(useHistoryStore).mockImplementation((selector) => {
       if (typeof selector === "function") {
-        return selector({ entries: [], clearHistory: mockClearHistory, addEntry: vi.fn(), removeEntry: vi.fn() });
+        return selector({
+          entries: [],
+          clearHistory: mockClearHistory,
+          addEntry: vi.fn(),
+          removeEntry: mockRemoveEntry,
+        });
       }
       return [];
     });
@@ -169,4 +184,39 @@ describe("QueryHistory", () => {
     const successEntries = screen.getAllByText(/users|INSERT INTO logs/);
     expect(successEntries.length).toBeGreaterThanOrEqual(2);
   });
+
+  it("renders a delete button for each entry", () => {
+    render(<QueryHistory />);
+    const deleteButtons = screen.getAllByLabelText("Delete entry");
+    expect(deleteButtons).toHaveLength(mockEntries.length);
+  });
+
+  it("calls removeEntry with the entry id when × button is clicked", () => {
+    render(<QueryHistory />);
+    const deleteButtons = screen.getAllByLabelText("Delete entry");
+
+    fireEvent.click(deleteButtons[0]);
+
+    expect(mockRemoveEntry).toHaveBeenCalledTimes(1);
+    expect(mockRemoveEntry).toHaveBeenCalledWith("entry-1");
+  });
+
+  it("does not trigger entry load when × button is clicked", () => {
+    const mockTabs = [{ id: "tab-1", title: "Query", content: "" }];
+    vi.mocked(useEditorStore.getState).mockReturnValue({
+      tabs: mockTabs,
+      activeTabId: "tab-1",
+      updateTabContent: mockUpdateTabContent,
+      addTab: mockAddTab,
+    });
+
+    render(<QueryHistory />);
+    const deleteButtons = screen.getAllByLabelText("Delete entry");
+
+    fireEvent.click(deleteButtons[2]);
+
+    expect(mockUpdateTabContent).not.toHaveBeenCalled();
+    expect(mockAddTab).not.toHaveBeenCalled();
+    expect(mockRemoveEntry).toHaveBeenCalledWith("entry-3");
+  });
 });