feat(frontend): sprint 5 — templates CRUD pages + nav + picker modal + dropdown

- types.ts: SimulationTemplate, SimulationTemplateCreateInput, SimulationTemplatePatchInput,
  extend SimulationCreateInput with template_id
- api/templates.ts: listTemplates, getTemplate, createTemplate, updateTemplate, deleteTemplate
- hooks/useTemplates.ts: useTemplates, useTemplate, useCreateTemplate, useUpdateTemplate,
  useDeleteTemplate (TanStack Query, invalidates ["templates"])
- TemplatesListPage: /admin/templates — table (name, MITRE count, created by, updated),
  New/Edit/Delete actions, loading/error/empty states
- TemplateFormPage: /admin/templates/new + /admin/templates/:id/edit — controlled form
  with inline MITRE field (picker + matrix modal), ConfirmDialog for delete
- TemplatePickerModal: reusable modal listing templates with empty state (AC-27.6)
- SimulationList: replace "New simulation" link with split-button dropdown
  (Blank → /simulations/new | From template… → TemplatePickerModal + POST template_id)
- Layout: "Templates" nav link (admin | redteam, before "Users")
- App.tsx: /admin/templates routes gated roles=["admin","redteam"]
- 26 new Vitest tests (118 total, 92 original preserved)

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

frontend/src/pages/TemplatesListPage.tsx

@@ -0,0 +1,121 @@
+import { Link } from 'react-router-dom';
+import { Plus } from 'lucide-react';
+import { extractApiError } from '@/api/client';
+import type { SimulationTemplate } from '@/api/types';
+import { useDeleteTemplate, useTemplates } from '@/hooks/useTemplates';
+import { useToast } from '@/hooks/useToast';
+import { LoadingState } from '@/components/LoadingState';
+import { ErrorState } from '@/components/ErrorState';
+import { EmptyState } from '@/components/EmptyState';
+
+function mitreCount(t: SimulationTemplate): number {
+  return t.techniques.length + t.tactics.length;
+}
+
+function formatDate(value: string | null): string {
+  if (!value) return '—';
+  return value.slice(0, 10);
+}
+
+export function TemplatesListPage(): JSX.Element {
+  const { data, isLoading, isError, error, refetch } = useTemplates();
+  const deleteMutation = useDeleteTemplate();
+  const { push } = useToast();
+
+  const onDelete = async (t: SimulationTemplate) => {
+    if (!window.confirm(`Delete template "${t.name}"? This cannot be undone.`)) return;
+    try {
+      await deleteMutation.mutateAsync(t.id);
+      push('Template deleted', 'success');
+    } catch (err) {
+      push(extractApiError(err, 'Could not delete template'), 'error');
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-xl">
+      <header className="flex items-end justify-between gap-md">
+        <div>
+          <h1 className="text-[44px] font-medium leading-none">Templates</h1>
+          <p className="text-charcoal text-[16px] mt-sm">
+            Reusable simulation blueprints for red team operations.
+          </p>
+        </div>
+        <Link to="/admin/templates/new" className="btn-primary">
+          <Plus size={14} aria-hidden /> New
+        </Link>
+      </header>
+
+      {isLoading ? <LoadingState label="Loading templates…" /> : null}
+
+      {isError ? (
+        <ErrorState
+          message={extractApiError(error, 'Could not load templates')}
+          onRetry={() => refetch()}
+        />
+      ) : null}
+
+      {!isLoading && !isError && data && data.length === 0 ? (
+        <EmptyState
+          title="No templates yet"
+          description="Create your first template to speed up simulation setup."
+          action={
+            <Link to="/admin/templates/new" className="btn-primary">
+              <Plus size={14} aria-hidden /> New template
+            </Link>
+          }
+        />
+      ) : null}
+
+      {!isLoading && !isError && data && data.length > 0 ? (
+        <div className="card-product overflow-hidden p-0">
+          <table className="w-full text-left">
+            <thead className="bg-cloud border-b border-hairline">
+              <tr className="text-[12px] uppercase tracking-[0.5px] text-graphite">
+                <th className="px-xl py-md">Name</th>
+                <th className="px-xl py-md">MITRE</th>
+                <th className="px-xl py-md">Created by</th>
+                <th className="px-xl py-md">Updated</th>
+                <th className="px-xl py-md text-right">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {data.map((t) => (
+                <tr key={t.id} className="border-b border-hairline last:border-0">
+                  <td className="px-xl py-md">
+                    <Link
+                      to={`/admin/templates/${t.id}/edit`}
+                      className="text-ink font-medium hover:underline"
+                    >
+                      {t.name}
+                    </Link>
+                  </td>
+                  <td className="px-xl py-md text-charcoal text-[14px]">
+                    {mitreCount(t) === 0 ? '—' : mitreCount(t)}
+                  </td>
+                  <td className="px-xl py-md text-charcoal">{t.created_by.username}</td>
+                  <td className="px-xl py-md text-charcoal">{formatDate(t.updated_at)}</td>
+                  <td className="px-xl py-md text-right">
+                    <div className="inline-flex gap-sm">
+                      <Link to={`/admin/templates/${t.id}/edit`} className="btn-text-link">
+                        Edit
+                      </Link>
+                      <button
+                        type="button"
+                        className="btn-text-link text-bloom-deep"
+                        onClick={() => onDelete(t)}
+                        disabled={deleteMutation.isPending}
+                      >
+                        Delete
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      ) : null}
+    </div>
+  );
+}