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/components/SimulationList.tsx

@@ -1,11 +1,16 @@
+import { useRef, useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
+import { ChevronDown } from 'lucide-react';
 import { extractApiError } from '@/api/client';
+import type { SimulationTemplate } from '@/api/types';
 import { useAuth } from '@/hooks/useAuth';
-import { useEngagementSimulations } from '@/hooks/useSimulations';
+import { useEngagementSimulations, useCreateSimulation } from '@/hooks/useSimulations';
+import { useToast } from '@/hooks/useToast';
 import { LoadingState } from './LoadingState';
 import { ErrorState } from './ErrorState';
 import { EmptyState } from './EmptyState';
 import { SimulationStatusBadge } from './SimulationStatusBadge';
+import { TemplatePickerModal } from './TemplatePickerModal';
 
 interface SimulationListProps {
   engagementId: number;
@@ -16,6 +21,99 @@ function formatDate(value: string | null): string {
   return value.replace('T', ' ').slice(0, 16);
 }
 
+function NewSimulationDropdown({ engagementId }: { engagementId: number }): JSX.Element {
+  const navigate = useNavigate();
+  const { push } = useToast();
+  const [open, setOpen] = useState(false);
+  const [showPicker, setShowPicker] = useState(false);
+  const btnRef = useRef<HTMLDivElement>(null);
+  const createMutation = useCreateSimulation(engagementId);
+
+  const handleBlank = () => {
+    setOpen(false);
+    navigate(`/engagements/${engagementId}/simulations/new`);
+  };
+
+  const handleFromTemplate = () => {
+    setOpen(false);
+    setShowPicker(true);
+  };
+
+  const handleSelectTemplate = async (template: SimulationTemplate) => {
+    try {
+      const sim = await createMutation.mutateAsync({ name: template.name, template_id: template.id });
+      setShowPicker(false);
+      push(`Created "${sim.name}" from template`, 'success');
+      navigate(`/engagements/${engagementId}/simulations/${sim.id}/edit`);
+    } catch (err) {
+      push(extractApiError(err, 'Could not create simulation from template'), 'error');
+    }
+  };
+
+  return (
+    <div className="relative" ref={btnRef}>
+      <div className="inline-flex">
+        <button
+          type="button"
+          className="btn-primary rounded-r-none border-r border-primary-deep"
+          onClick={handleBlank}
+          data-testid="new-simulation-btn"
+        >
+          New simulation
+        </button>
+        <button
+          type="button"
+          aria-label="More options"
+          aria-expanded={open}
+          className="btn-primary rounded-l-none px-sm"
+          onClick={() => setOpen((v) => !v)}
+          data-testid="new-simulation-dropdown-toggle"
+        >
+          <ChevronDown size={14} aria-hidden />
+        </button>
+      </div>
+
+      {open ? (
+        <div
+          className="absolute right-0 top-full mt-xxs bg-canvas border border-hairline rounded-md shadow-floating z-20 min-w-[180px]"
+          role="menu"
+        >
+          <button
+            type="button"
+            role="menuitem"
+            className="w-full text-left px-md py-sm text-[14px] text-ink hover:bg-cloud"
+            onClick={handleBlank}
+          >
+            Blank
+          </button>
+          <button
+            type="button"
+            role="menuitem"
+            className="w-full text-left px-md py-sm text-[14px] text-ink hover:bg-cloud"
+            onClick={handleFromTemplate}
+            data-testid="from-template-btn"
+          >
+            From template…
+          </button>
+        </div>
+      ) : null}
+
+      {showPicker ? (
+        <TemplatePickerModal
+          engagementId={engagementId}
+          onClose={() => setShowPicker(false)}
+          onInstantiated={(simId) => {
+            setShowPicker(false);
+            navigate(`/engagements/${engagementId}/simulations/${simId}/edit`);
+          }}
+          onSelectTemplate={handleSelectTemplate}
+          isPending={createMutation.isPending}
+        />
+      ) : null}
+    </div>
+  );
+}
+
 export function SimulationList({ engagementId }: SimulationListProps): JSX.Element {
   const { data, isLoading, isError, error, refetch } = useEngagementSimulations(engagementId);
   const { canEditEngagements } = useAuth();
@@ -57,13 +155,7 @@ export function SimulationList({ engagementId }: SimulationListProps): JSX.Eleme
       <div className="flex items-center justify-between">
         <h2 className="text-[24px] font-medium text-ink">Simulations</h2>
         {canEditEngagements ? (
-          <Link
-            to={`/engagements/${engagementId}/simulations/new`}
-            className="btn-primary"
-            data-testid="new-simulation-btn"
-          >
-            New simulation
-          </Link>
+          <NewSimulationDropdown engagementId={engagementId} />
         ) : null}
       </div>