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/Layout.tsx

@@ -17,7 +17,7 @@ function themeLabel(theme: Theme): string {
 }
 
 export function Layout(): JSX.Element {
-  const { user, isAdmin, logout } = useAuth();
+  const { user, isAdmin, isRedteam, logout } = useAuth();
   const navigate = useNavigate();
   const { theme, cycleTheme } = useTheme();
 
@@ -78,6 +78,18 @@ export function Layout(): JSX.Element {
             >
               Engagements
             </NavLink>
+            {isAdmin || isRedteam ? (
+              <NavLink
+                to="/admin/templates"
+                className={({ isActive }) =>
+                  `text-[16px] py-2 px-md ${
+                    isActive ? 'text-ink border-b-2 border-primary -mb-[1px]' : 'text-charcoal'
+                  }`
+                }
+              >
+                Templates
+              </NavLink>
+            ) : null}
             {isAdmin ? (
               <NavLink
                 to="/admin/users"

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>
 

frontend/src/components/TemplatePickerModal.tsx

@@ -0,0 +1,104 @@
+import { extractApiError } from '@/api/client';
+import type { SimulationTemplate } from '@/api/types';
+import { useTemplates } from '@/hooks/useTemplates';
+import { LoadingState } from './LoadingState';
+import { ErrorState } from './ErrorState';
+import { EmptyState } from './EmptyState';
+
+interface TemplatePickerModalProps {
+  engagementId: number;
+  onClose: () => void;
+  onInstantiated: (simId: number) => void;
+  onSelectTemplate: (template: SimulationTemplate) => void;
+  isPending?: boolean;
+}
+
+function mitreCount(t: SimulationTemplate): string {
+  const count = t.techniques.length + t.tactics.length;
+  return count === 0 ? '—' : String(count);
+}
+
+export function TemplatePickerModal({
+  onClose,
+  onSelectTemplate,
+  isPending = false,
+}: TemplatePickerModalProps): JSX.Element {
+  const { data, isLoading, isError, error, refetch } = useTemplates();
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="tpl-picker-title"
+      className="fixed inset-0 z-50 flex items-center justify-center"
+    >
+      <div className="modal-backdrop absolute inset-0" onClick={onClose} aria-hidden="true" />
+
+      <div className="relative card-product shadow-floating dark:shadow-floating-dark max-w-xl w-full mx-md flex flex-col gap-md max-h-[80vh] overflow-hidden">
+        <div className="flex items-center justify-between">
+          <h2 id="tpl-picker-title" className="text-[20px] font-medium text-ink">
+            From template…
+          </h2>
+          <button
+            type="button"
+            aria-label="Close"
+            onClick={onClose}
+            className="text-graphite hover:text-ink transition-colors text-[20px] leading-none"
+          >
+            ×
+          </button>
+        </div>
+
+        <div className="overflow-y-auto flex-1 -mx-xl px-xl">
+          {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 available"
+              description="Create one from the Templates page."
+            />
+          ) : null}
+
+          {!isLoading && !isError && data && data.length > 0 ? (
+            <table className="w-full text-left" data-testid="template-picker-table">
+              <thead className="bg-cloud border-b border-hairline">
+                <tr className="text-[12px] uppercase tracking-[0.5px] text-graphite">
+                  <th className="px-md py-sm">Name</th>
+                  <th className="px-md py-sm">MITRE</th>
+                  <th className="px-md py-sm">Created by</th>
+                </tr>
+              </thead>
+              <tbody>
+                {data.map((t) => (
+                  <tr
+                    key={t.id}
+                    className="border-b border-hairline last:border-0 hover:bg-cloud cursor-pointer"
+                    onClick={() => !isPending && onSelectTemplate(t)}
+                    data-testid={`template-row-${t.id}`}
+                  >
+                    <td className="px-md py-sm text-ink font-medium">{t.name}</td>
+                    <td className="px-md py-sm text-charcoal text-[14px]">{mitreCount(t)}</td>
+                    <td className="px-md py-sm text-charcoal text-[14px]">{t.created_by.username}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          ) : null}
+        </div>
+
+        <div className="border-t border-hairline pt-sm">
+          <button type="button" className="btn-outline-ink" onClick={onClose}>
+            Cancel
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}