feat(frontend): slice 2 — migrate 11 shared components to shadcn/Tailwind

Web UI rework. Shared-components slice (drift prevention):
- Migrate SectionCard, SelectionRailCard, TabbedCard, MetricCard,
  DiskSpaceCard, HoverEditButton, DialogFooter, ConfirmDialog,
  LibraryOverview, NowPlaying, SessionActivityPanel off @mui
- HoverEditButton: MUI IconButton + EditOutlined -> Button + lucide Pencil
- Status mapping uses the success Badge variant (chart-2) for healthy
- Exported APIs preserved so consuming pages still compile (no page edits)
- 11 behavioral Vitest component tests added

Gate: build + lint + test green.

frontend/src/components/__tests__/DialogFooter.test.tsx

@@ -0,0 +1,52 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { DialogFooter } from "../DialogFooter";
+
+describe("DialogFooter", () => {
+	it("renders cancel/confirm labels and wires both callbacks", async () => {
+		const onCancel = vi.fn();
+		const onConfirm = vi.fn();
+		render(
+			<DialogFooter
+				onCancel={onCancel}
+				cancelLabel="Cancel"
+				onConfirm={onConfirm}
+				confirmLabel="Save"
+			/>,
+		);
+		await userEvent.click(screen.getByRole("button", { name: "Cancel" }));
+		expect(onCancel).toHaveBeenCalledTimes(1);
+		await userEvent.click(screen.getByRole("button", { name: "Save" }));
+		expect(onConfirm).toHaveBeenCalledTimes(1);
+	});
+
+	it("prefers the busy label and maps confirmColor=error to destructive", () => {
+		render(
+			<DialogFooter
+				onCancel={() => {}}
+				onConfirm={() => {}}
+				confirmLabel="Delete"
+				confirmBusyLabel="Deleting…"
+				confirmColor="error"
+			/>,
+		);
+		const confirm = screen.getByRole("button", { name: "Deleting…" });
+		expect(confirm).toBeInTheDocument();
+		expect(confirm.getAttribute("data-variant")).toBe("destructive");
+	});
+
+	it("renders the secondary action when provided", () => {
+		render(
+			<DialogFooter
+				onCancel={() => {}}
+				onConfirm={() => {}}
+				confirmLabel="OK"
+				secondaryAction={<button type="button">Test SSH</button>}
+			/>,
+		);
+		expect(
+			screen.getByRole("button", { name: "Test SSH" }),
+		).toBeInTheDocument();
+	});
+});