feat: add frontend action buttons, fix notification auth bug, add 53 Vitest tests

Bug fix:
- markNotificationRead was using raw fetch() without auth headers,
  bypassing the shared client's Authorization header. Moved to
  api/client.ts to use fetchJSON with proper auth.

New action buttons:
- CertificatesPage: "New Certificate" modal with form fields
- CertificateDetailPage: "Deploy" button with target selector modal,
  "Archive" button with confirmation
- IssuersPage: "Test Connection" and "Delete" per-row actions
- TargetsPage: "Delete" per-row action
- PoliciesPage: "Enable/Disable" toggle and "Delete" per-row actions

New API client functions:
- updateCertificate, archiveCertificate, registerAgent,
  createPolicy, updatePolicy, deletePolicy, getPolicyViolations,
  createIssuer, testIssuerConnection, deleteIssuer,
  createTarget, deleteTarget, markNotificationRead

Frontend tests (53 tests, 2 files):
- client.test.ts: 35 tests covering all API endpoints, auth headers,
  401 handling, error parsing, HTTP methods, request bodies
- utils.test.ts: 18 tests covering formatDate, formatDateTime,
  timeAgo, daysUntil, expiryColor

CI: Added "Run Frontend Tests" step to frontend-build job

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

web/src/pages/IssuersPage.tsx

@@ -1,5 +1,6 @@
-import { useQuery } from '@tanstack/react-query';
-import { getIssuers } from '../api/client';
+import { useState } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { getIssuers, testIssuerConnection, deleteIssuer } from '../api/client';
 import PageHeader from '../components/PageHeader';
 import DataTable from '../components/DataTable';
 import type { Column } from '../components/DataTable';
@@ -16,11 +17,25 @@ const typeLabels: Record<string, string> = {
 };
 
 export default function IssuersPage() {
+  const queryClient = useQueryClient();
+  const [testResult, setTestResult] = useState<{ id: string; ok: boolean; msg: string } | null>(null);
+
   const { data, isLoading, error, refetch } = useQuery({
     queryKey: ['issuers'],
     queryFn: () => getIssuers(),
   });
 
+  const testMutation = useMutation({
+    mutationFn: testIssuerConnection,
+    onSuccess: (_data, id) => setTestResult({ id, ok: true, msg: 'Connection successful' }),
+    onError: (err: Error, id) => setTestResult({ id, ok: false, msg: err.message }),
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: deleteIssuer,
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['issuers'] }),
+  });
+
   const columns: Column<Issuer>[] = [
     {
       key: 'name',
@@ -61,11 +76,38 @@ export default function IssuersPage() {
       label: 'Created',
       render: (i) => <span className="text-xs text-slate-400">{formatDateTime(i.created_at)}</span>,
     },
+    {
+      key: 'actions',
+      label: '',
+      render: (i) => (
+        <div className="flex gap-2">
+          <button
+            onClick={(e) => { e.stopPropagation(); testMutation.mutate(i.id); }}
+            disabled={testMutation.isPending}
+            className="text-xs text-blue-400 hover:text-blue-300 transition-colors"
+          >
+            Test
+          </button>
+          <button
+            onClick={(e) => { e.stopPropagation(); if (confirm(`Delete issuer ${i.name}?`)) deleteMutation.mutate(i.id); }}
+            className="text-xs text-red-400 hover:text-red-300 transition-colors"
+          >
+            Delete
+          </button>
+        </div>
+      ),
+    },
   ];
 
   return (
     <>
       <PageHeader title="Issuers" subtitle={data ? `${data.total} issuers` : undefined} />
+      {testResult && (
+        <div className={`mx-6 mt-3 rounded-lg px-4 py-3 text-sm ${testResult.ok ? 'bg-emerald-500/10 border border-emerald-500/20 text-emerald-400' : 'bg-red-500/10 border border-red-500/20 text-red-400'}`}>
+          {testResult.id}: {testResult.msg}
+          <button onClick={() => setTestResult(null)} className="ml-3 text-xs opacity-60 hover:opacity-100">dismiss</button>
+        </div>
+      )}
       <div className="flex-1 overflow-y-auto">
         {error ? (
           <ErrorState error={error as Error} onRetry={() => refetch()} />