{emptyMessage || 'No data found'}
diff --git a/web/src/components/EmptyState.test.tsx b/web/src/components/EmptyState.test.tsx
new file mode 100644
index 0000000..2a239e4
--- /dev/null
+++ b/web/src/components/EmptyState.test.tsx
@@ -0,0 +1,78 @@
+// Copyright 2026 certctl LLC. All rights reserved.
+// SPDX-License-Identifier: BUSL-1.1
+
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import EmptyState from './EmptyState';
+
+describe('EmptyState', () => {
+ it('renders the title', () => {
+ render(
);
+ expect(screen.getByText('No certificates yet')).toBeInTheDocument();
+ });
+
+ it('renders description when provided', () => {
+ render(
+
,
+ );
+ expect(
+ screen.getByText('Issue your first certificate to get started.'),
+ ).toBeInTheDocument();
+ });
+
+ it('renders icon slot when provided', () => {
+ render(
+
📜}
+ title="No certificates"
+ />,
+ );
+ expect(screen.getByTestId('empty-icon')).toBeInTheDocument();
+ });
+
+ it('renders primaryAction button and fires its onClick', () => {
+ const onClick = vi.fn();
+ render(
+ ,
+ );
+ fireEvent.click(screen.getByRole('button', { name: 'Issue certificate' }));
+ expect(onClick).toHaveBeenCalledTimes(1);
+ });
+
+ it('renders secondaryAction button and fires its onClick', () => {
+ const onClick = vi.fn();
+ render(
+ ,
+ );
+ fireEvent.click(screen.getByRole('button', { name: 'Read docs' }));
+ expect(onClick).toHaveBeenCalledTimes(1);
+ });
+
+ it('renders both actions side-by-side', () => {
+ render(
+ {} }}
+ secondaryAction={{ label: 'Connect issuer', onClick: () => {} }}
+ />,
+ );
+ expect(screen.getByRole('button', { name: 'Issue' })).toBeInTheDocument();
+ expect(
+ screen.getByRole('button', { name: 'Connect issuer' }),
+ ).toBeInTheDocument();
+ });
+
+ it('exposes role="status" for screen readers', () => {
+ render();
+ expect(screen.getByRole('status')).toBeInTheDocument();
+ });
+});
diff --git a/web/src/components/EmptyState.tsx b/web/src/components/EmptyState.tsx
new file mode 100644
index 0000000..2ede628
--- /dev/null
+++ b/web/src/components/EmptyState.tsx
@@ -0,0 +1,95 @@
+// Copyright 2026 certctl LLC. All rights reserved.
+// SPDX-License-Identifier: BUSL-1.1
+//
+// EmptyState — the certctl-themed empty-state primitive. Phase 1
+// closure for UX-M3 (no primitive; DataTable shows a bare
+// 'No data found' string).
+//
+// Two render paths:
+// 1) `` — minimum
+// acceptable empty state. Title is required (the user must
+// understand what's missing); description + actions are optional.
+// 2) `} title="..." description="..."
+// primaryAction={{ label, onClick }} secondaryAction={...} />` —
+// first-run CTA shape. Renders icon at the top, title in the
+// middle, two action buttons at the bottom. Use this on list pages
+// that an operator might hit on their first visit ("No certs yet —
+// [Issue first certificate] [Connect an issuer]").
+//
+// Composition with DataTable: DataTable accepts `emptyState?: ReactNode`
+// (added alongside the existing `emptyMessage?: string` for backward
+// compat) so list pages can pass either a string or a full
+// component.
+
+import type { ReactNode } from 'react';
+
+export interface EmptyStateAction {
+ label: string;
+ onClick: () => void;
+}
+
+export interface EmptyStateProps {
+ /** Optional icon at the top. Pass any ReactNode (lucide / SVG / emoji). */
+ icon?: ReactNode;
+ /** Required headline. Keep short: "No certificates yet". */
+ title: string;
+ /** Optional sub-copy. One sentence explaining the empty condition. */
+ description?: string;
+ /** Optional primary CTA. Renders as .btn-primary. */
+ primaryAction?: EmptyStateAction;
+ /** Optional secondary CTA. Renders as .btn-outline alongside primary. */
+ secondaryAction?: EmptyStateAction;
+ /** Override default centering / padding when nested inside a card. */
+ className?: string;
+}
+
+export default function EmptyState({
+ icon,
+ title,
+ description,
+ primaryAction,
+ secondaryAction,
+ className,
+}: EmptyStateProps) {
+ return (
+
+ {icon && (
+
+ {icon}
+
+ )}
+
{title}
+ {description && (
+
{description}
+ )}
+ {(primaryAction || secondaryAction) && (
+
+ {primaryAction && (
+
+ )}
+ {secondaryAction && (
+
+ )}
+
+ )}
+
+ {content}
+
+
+ )}
+
+ );
+}
diff --git a/web/src/main.tsx b/web/src/main.tsx
index 0317b3b..66fdf81 100644
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@@ -58,6 +58,10 @@ import SessionsPage from './pages/auth/SessionsPage';
import BreakglassPage from './pages/auth/BreakglassPage';
// Audit 2026-05-10 MED-11 closure — federated-user admin page.
import UsersPage from './pages/auth/UsersPage';
+// Phase 1 closure (UX-H3): toast / snackbar system. Mounted once near
+// the root so any component can `import { toast } from "sonner"` and
+// call toast.success / toast.error without provider plumbing.
+import Toaster from './components/Toaster';
import './index.css';
const queryClient = new QueryClient({
@@ -74,6 +78,7 @@ createRoot(document.getElementById('root')!).render(
+
diff --git a/web/src/pages/AgentGroupsPage.tsx b/web/src/pages/AgentGroupsPage.tsx
index 574efb1..53a5342 100644
--- a/web/src/pages/AgentGroupsPage.tsx
+++ b/web/src/pages/AgentGroupsPage.tsx
@@ -1,5 +1,6 @@
import { useEffect, useState } from 'react';
import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
import { useTrackedMutation } from '../hooks/useTrackedMutation';
import { getAgentGroups, deleteAgentGroup, createAgentGroup, updateAgentGroup } from '../api/client';
import PageHeader from '../components/PageHeader';
@@ -7,6 +8,7 @@ import DataTable from '../components/DataTable';
import type { Column } from '../components/DataTable';
import StatusBadge from '../components/StatusBadge';
import ErrorState from '../components/ErrorState';
+import ConfirmDialog from '../components/ConfirmDialog';
import { formatDateTime } from '../api/utils';
import type { AgentGroup } from '../api/types';
@@ -254,6 +256,7 @@ export default function AgentGroupsPage() {
const queryClient = useQueryClient();
const [showCreate, setShowCreate] = useState(false);
const [editingGroup, setEditingGroup] = useState(null);
+ const [confirmDelete, setConfirmDelete] = useState(null);
const { data, isLoading, error, refetch } = useQuery({
queryKey: ['agent-groups'],
@@ -263,6 +266,8 @@ export default function AgentGroupsPage() {
const deleteMutation = useTrackedMutation({
mutationFn: deleteAgentGroup,
invalidates: [['agent-groups']],
+ onSuccess: () => toast.success('Agent group deleted'),
+ onError: (err: Error) => toast.error(`Delete failed: ${err.message}`),
});
const createMutation = useTrackedMutation({
@@ -337,7 +342,7 @@ export default function AgentGroupsPage() {
Edit