From 89fb38b1071559868cd387abce46868b776086e4 Mon Sep 17 00:00:00 2001 From: Knacky Date: Sun, 21 Jun 2026 22:03:15 +0200 Subject: [PATCH 01/11] =?UTF-8?q?docs(sprint-11):=20plan=20spectrum=20UX?= =?UTF-8?q?=20port=20=E2=80=94=204=20primitives=20+=20compact=20density=20?= =?UTF-8?q?global?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tasks/todo.md | 227 ++++++++++++++++++++++++++++++-------------------- 1 file changed, 138 insertions(+), 89 deletions(-) diff --git a/tasks/todo.md b/tasks/todo.md index 887b4d5..02b3964 100644 --- a/tasks/todo.md +++ b/tasks/todo.md @@ -1,115 +1,164 @@ -# Sprint 10 — C2 TLS verify: redteam-friendly defaults + warning suppression +# Sprint 11 — Spectrum UX port : 4 primitives + compact density global -**Base**: `origin/main` (PR #11 merged — sprint 8 + 9 are in). -**Branch**: `sprint/10-c2-tls-default`. -**Scope**: tiny correctness sprint. No new feature. Flip a security-relevant default to match the actual operator usage of this tool. +**Base** : `origin/main` (PR #12 mergée — sprint 8 + 9 + 10 en). +**Branch** : `sprint/11-spectrum-ux`. +**Scope** : frontend-only sprint, 5 livrables coordonnés. Pas de backend, pas de schéma, pas de nouvelle API. Pas de modif tokens couleurs/spacing/font dans tailwind.config. --- -## Symptom (user report) +## Contexte -> "Impossible de se connecter à mon C2 à cause de la vérification du certificat SSL (self signed)" +Analyse Spectrum (`/home/user/Documents/01_Projects/spectrum`) faite via workflow. Résultat : Spectrum n'a **pas de design system** (Tailwind raw + violet ramp + recipes inlinées 30× partout). Mimic est structurellement meilleur. On ne porte pas la philosophie Spectrum — on extrait **5 patterns isolés** qui survivent au brutalisme Mimic. -Operator opens C2 config card, fills URL + token, hits **Test connection** without noticing the checkbox → SSL VERIFY FAILED against self-signed Mythic. +## Constraints absolues -## Root cause (workflow diagnosis confirmed) +1. **Primary `#024ad8` (Electric Blue) reste**. Pas de violet, pas de spectrum ramp. +2. **Brutalisme reste** : `rounded-none` sur containers (sauf status pills + tab count pills + avatars), zero `transition-*`, zero `shadow-*`, hairline 1px borders. +3. **Pas de modif `tailwind.config.*`** sauf si une nouvelle classe utility est strictement nécessaire (justifier dans le PR). +4. **DESIGN.md amendments additives uniquement** — pas de modif des tokens existants. +5. **Mono uniquement pour data** (IDs MITRE, dates ISO, commands, etc.) — rule sprint 7. -The `verify_tls` chain is **fully intact** end-to-end : -React `verifyTls` state → `C2ConfigInput.verify_tls` → PUT body → `C2Config.verify_tls` column → `cfg.verify_tls` in API loader → `get_adapter(verify_tls=)` → `MythicAdapter._verify` → `requests.post(verify=self._verify)`. +## Décisions binding (lockées par user) -The bug is the **default** at every layer is `True` : -- `backend/app/models/c2_config.py:22` — `default=True` -- `backend/migrations/versions/0006_c2_layer.py:29` — `server_default=sa.true()` -- `backend/app/api/c2.py:87` — `data.get("verify_tls", True)` -- `backend/app/services/c2/mythic.py:116` — `verify_tls: bool = True` -- `backend/app/services/c2/factory.py:9` — `verify_tls=True` -- `frontend/src/components/C2ConfigCard.tsx:27` — `useState(true)` -- `frontend/src/components/C2ConfigCard.tsx:74` — reset on delete `setVerifyTls(true)` - -Mimic is a BAS / red-team lab tool ; the dominant case is a **self-signed Mythic instance**, not a publicly-trusted cert chain. Defaulting `verify=True` is hostile to the actual workflow. - -Secondary defect : `urllib3.exceptions.InsecureRequestWarning` is never suppressed (zero hits for `disable_warnings` / `urllib3` in `backend/`). When operators correctly uncheck verify, stderr gets spammed once per HTTP call. +- **Q1 → B** : Tabs primitive **+ consumer EngagementDetailPage** (3 tabs : Schedule / Description / Simulations au lieu du stack vertical actuel). +- **Q2 → B** : **Compact density GLOBAL** — toutes les tables passent à 32px row, pas opt-in. User accepte le tradeoff WCAG (touch target) sur Engagements list. +- **Q3 → A** : AlertBanner + refactor `SimulationFormPage` (Done banner + SOC-blocked banner). --- -## Decisions (locked) +## Livrables -1. **Flip default to `False` at every layer** — model, API fallback, adapter, factory, React state, delete reset. -2. **New migration 0008** : flip `server_default` to `sa.false()`. Existing rows are NOT mutated (their stored boolean is preserved). -3. **Suppress `urllib3.InsecureRequestWarning` ONLY when `verify_tls=False`** — gated inside `MythicAdapter.__init__`. Keeps the warning live for any future code that legitimately verifies. -4. **Add helper text under checkbox** : "Leave unchecked for lab Mythic with self-signed certificates." Operators see why the box matters. -5. **No API contract change** — `C2ConfigInput.verify_tls: boolean` stays required. The fallback in `data.get("verify_tls", False)` only matters for hand-crafted requests. - -## Out of scope - -- Don't touch existing C2 endpoints behavior (route paths, payload shapes). -- Don't change the `verify_tls` field type or remove the column. -- Don't change the FakeAdapter (it makes no HTTP calls). - ---- - -## Task A — Backend (backend-builder) +### Livrable 1 — `Tabs` primitive + `useHashTab` hook + consumer **Files** : -- `backend/app/models/c2_config.py` — line 22 : `default=True` → `default=False` -- `backend/app/api/c2.py` — line 87 : `data.get("verify_tls", True)` → `data.get("verify_tls", False)` -- `backend/app/services/c2/factory.py` — line 9 : `verify_tls: bool = True` → `verify_tls: bool = False` -- `backend/app/services/c2/mythic.py` — line 116 : `verify_tls: bool = True` → `verify_tls: bool = False`, AND add at top of file `import urllib3` + `from urllib3.exceptions import InsecureRequestWarning`, AND inside `__init__` after `self._verify = verify_tls`: - ```python - if not verify_tls: - urllib3.disable_warnings(InsecureRequestWarning) - ``` -- **NEW migration** `backend/migrations/versions/0008_c2_verify_tls_default_false.py` — flip `server_default` to `sa.false()`. Use `op.batch_alter_table("c2_config")` for SQLite compatibility (Mimic uses SQLite per sprint 1 SPEC). Down-migration restores `sa.true()`. -- **Tests** : grep `backend/tests/` for `verify_tls` and flip every assertion that presupposed the old `True` default (likely in `test_c2_config*.py` PUT-without-verify-tls tests and GET-fresh-row tests). Don't add new tests — adapt existing ones. +- `frontend/src/hooks/useHashTab.ts` (NEW) — ~30 LoC. Reads `window.location.hash`, falls back to default ID, listens to `hashchange`, updates URL without reload. TypeScript pur, zéro style. +- `frontend/src/components/Tabs.tsx` (NEW) — composant ``. Underline variant. +- `frontend/src/styles/index.css` — nouvelles recipes : + - `.tab-underline` — `text-graphite caption-bold cursor-pointer border-b-2 border-transparent hover:text-ink` (instantané, pas de transition) + - `.tab-underline-active` — `text-primary border-primary` (override) + - `.tab-count-pill` — `rounded-pill bg-cloud text-graphite text-[11px] px-xs py-0 font-mono` + - `.tab-count-pill-active` — `bg-primary-soft text-primary` (override) +- `frontend/src/pages/EngagementDetailPage.tsx` — refactor en 3 tabs : + - Tab 1 "Schedule" (id `schedule`, default) — dates + statut + bouton "Edit engagement" + - Tab 2 "Description" (id `description`) — texte description + - Tab 3 "Simulations" (id `simulations`) — la liste actuelle de simulations + - Count pills sur tab 3 = nombre de simulations + - Tabs branchées sur `useHashTab('schedule')` +- `DESIGN.md` — nouvelle subsection `### Navigation › Sub-page tabs` (additive) -**Constraints** : -- `pytest` baseline 468/468 must hold (or grow ; never shrink). -- `ruff` + `mypy --strict` clean. -- Migration 0008 must be reversible — round-trip `alembic upgrade head` then `alembic downgrade -1` then `alembic upgrade head` must work on a fresh SQLite DB. -- Don't restructure or refactor anything else. Minimum surface. +**Brutalism check** : +- Tab : `border-b-2` only, pas de bg, pas de rounded, pas de transition +- Pill : `rounded-pill` autorisé (exception status pill DESIGN.md L125) +- Hover : `hover:text-ink` instantané -## Task B — Frontend (frontend-builder) +### Livrable 2 — `AlertBanner` component + 4 recipes **Files** : -- `frontend/src/components/C2ConfigCard.tsx` : - - Line 27 : `useState(true)` → `useState(false)` - - Line 74 (delete handler) : `setVerifyTls(true)` → `setVerifyTls(false)` - - Under the checkbox JSX (around lines 169-182) : add a `

` with helper text : - ```tsx -

- Leave unchecked for lab Mythic with self-signed certificates. -

- ``` - (Use the existing DESIGN.md tokens — `text-[12px] text-charcoal` matches the `hint` style on `FormField`. Confirm token name by reading neighboring components first.) -- **Vitest** : if `C2ConfigCard.test.tsx` exists, flip any "starts checked" assertion to "starts unchecked". +- `frontend/src/components/AlertBanner.tsx` (NEW) — ``. Brutalist : border-l-4 strip semantic, fill `bg-paper`, border `border-hairline` partout sauf le strip gauche, `rounded-none`. Icon Lucide à gauche (`AlertCircle` error, `AlertTriangle` warn, `CheckCircle` success, `Info` info) à `size={16}`. +- `frontend/src/styles/index.css` — 4 nouvelles recipes : + - `.alert-error` — `bg-paper border border-hairline border-l-4 border-l-bloom-deep px-md py-sm flex items-start gap-sm` + - `.alert-warn` — same + `border-l-warn` + - `.alert-success` — same + `border-l-success` + - `.alert-info` — same + `border-l-primary` +- `frontend/src/pages/SimulationFormPage.tsx` — refactor 2 banners hand-rollés (~L300 Done banner + ~L310 SOC-blocked banner) → `` / ``. +- `DESIGN.md` — extend `### Toast Notifications` avec subsection `### Inline Banners` (additive, mêmes 4 variants). -**Constraints** : -- `vitest` baseline 212/212 must hold. +**Note** : `bloom-deep`, `warn`, `success`, `primary` sont les tokens existants — pas de nouveau token couleur. + +### Livrable 3 — `BackLink` component (dédup) + +**Files** : +- `frontend/src/components/BackLink.tsx` (NEW) — `Back to engagements`. Renders `← {children}` (ArrowLeft Lucide size=14, gap-xxs). Style : `text-graphite hover:text-primary caption-md` instantané. +- Refactor consumers (3 instances hand-rollées) : + - `frontend/src/pages/EngagementDetailPage.tsx` (~L35) + - `frontend/src/pages/SimulationFormPage.tsx` (back-link en edit mode) + - `frontend/src/pages/TemplateFormPage.tsx` (back-link en edit mode) + +### Livrable 4 — `.table-compact` recipe + apply GLOBAL + +**Files** : +- `frontend/src/styles/index.css` — nouvelle recipe (mais appliquée comme default, pas opt-in cette sprint per user decision Q2-B) : + - Soit : modifier la recipe `.card-product table` existante pour passer à 32px row, `caption-md` text, `py-xxs px-xs` cells, divider `border-hairline`. + - Soit : ajouter `.table-compact` puis l'appliquer à TOUTES les list pages (Engagements, Templates, Users, etc.). + - **Choix builder** : pick the cleaner path. Préférer modifier le default si toutes les tables doivent suivre, sinon `.table-compact` + apply partout. +- Apply sur : + - `frontend/src/pages/EngagementsListPage.tsx` + - `frontend/src/pages/TemplatesListPage.tsx` + - `frontend/src/pages/UsersAdminPage.tsx` + - `frontend/src/components/SimulationList.tsx` (utilisé dans EngagementDetailPage) + - Toute autre table dans le code (grep `` hint below the checkbox-label row. Same brutalist treatment, no transition. +- Brutalism unit assertions : pour chaque new component, un test qui vérifie `expect(el).not.toHaveClass('rounded-md')` (sauf pill counter) + `.not.toHaveClass(/transition-/)` + `.not.toHaveClass(/shadow-/)`. -## Task C — Sequencing +## Out of scope (explicite) -Both tasks have **zero shared files**. Dispatch backend-builder + frontend-builder **in parallel**. No ordering constraint. - -After both report green : -- **code-reviewer** : sprint diff scan (focus : migration reversibility, urllib3 gating, no leftover hardcoded `True`). -- **design-reviewer** : helper-text placement, token compliance, focus ring still works, no regression on the card. -- **spec-reviewer** : verify SPEC.md § Intégration C2 still matches the new defaults (may need a one-line note about lab-mode default ; check before editing). +- ❌ Side nav / drawer / breadcrumb component — top nav + BackLink suffit +- ❌ Global engagement selector top-bar (Spectrum pattern rejeté) +- ❌ Editor dynamic-column grid — pas d'éditeur dans Mimic +- ❌ Dark mode rework +- ❌ Toast queue system (les toasts actuels via `useToast` restent) +- ❌ PDF/document deliverable +- ❌ Color palette changes +- ❌ Tokens spacing/typo dans tailwind.config ## Definition of Done -- Test connection against self-signed Mythic from a freshly-created C2 config works **without unchecking anything**. -- Existing rows are untouched (operators who saved verify_tls=true keep it until they re-save). -- `pytest` 468/468 → 468+ (no shrink), `vitest` 212/212. -- `ruff` + `mypy --strict` + `tsc --noEmit` + `eslint` clean. -- Migration 0008 round-trip OK. -- No `urllib3.InsecureRequestWarning` on stderr when `verify_tls=False`. -- Code-reviewer + design-reviewer + spec-reviewer APPROVED. -- PR opened on Gitea ; tasks/pr-body-sprint-10.md drafted by team-lead. - -## Operator notes (for PR body) - -- This sprint flips a security-relevant default. Production operators who legitimately use a publicly-trusted cert chain will need to explicitly check the box — but the dominant case in this BAS tool is lab Mythic with self-signed, so the new default matches the actual workflow. -- Existing engagements with `verify_tls=true` already stored remain unchanged. They keep their current behaviour. If the operator reported the bug because their existing row has `verify_tls=true`, they will still need to uncheck + save once after this sprint lands. +- ✅ 5 primitives livrées + EngagementDetailPage refactorée en tabs + SimulationFormPage banners migrés + BackLink dédup × 3 +- ✅ vitest **212+/212+** (4 new specs ajoutées), tsc + lint clean +- ✅ pytest **469/469** intact (zéro backend touché) +- ✅ Toutes tables passent à 32px row density (validation visuelle) +- ✅ Design-reviewer APPROVED (brutalism check sur les 4 new recipes) +- ✅ Code-reviewer APPROVED +- ✅ DESIGN.md amendé (3 subsections additives) +- ✅ CHANGELOG.md entrée sprint 11 +- ✅ PR ouverte sur Gitea avec body From bca39dcca75ecdd454ebb03a19fe18028b1dcf10 Mon Sep 17 00:00:00 2001 From: Knacky Date: Sun, 21 Jun 2026 22:10:59 +0200 Subject: [PATCH 02/11] feat(frontend): add Tabs primitive + useHashTab hook - useHashTab: pure-TS hook reading window.location.hash, falls back to defaultId, hashchange listener cleaned up on unmount - Tabs: with tab-underline / tab-underline-active recipes and count-pill (rounded-pill exception per DESIGN.md) - index.css: tab-underline*, tab-count-pill*, alert-*, table-compact recipes Co-Authored-By: Claude Sonnet 4.6 --- frontend/src/components/Tabs.tsx | 43 +++++++++++++++++++++++++++++++ frontend/src/hooks/useHashTab.ts | 25 ++++++++++++++++++ frontend/src/styles/index.css | 44 ++++++++++++++++++++++++++++++++ 3 files changed, 112 insertions(+) create mode 100644 frontend/src/components/Tabs.tsx create mode 100644 frontend/src/hooks/useHashTab.ts diff --git a/frontend/src/components/Tabs.tsx b/frontend/src/components/Tabs.tsx new file mode 100644 index 0000000..5f7a8be --- /dev/null +++ b/frontend/src/components/Tabs.tsx @@ -0,0 +1,43 @@ +interface TabItem { + id: string; + label: string; + count?: number; +} + +interface TabsProps { + items: TabItem[]; + activeId: string; + onChange: (id: string) => void; +} + +export function Tabs({ items, activeId, onChange }: TabsProps): JSX.Element { + return ( +
+ {items.map((item) => { + const isActive = item.id === activeId; + return ( + + ); + })} +
+ ); +} diff --git a/frontend/src/hooks/useHashTab.ts b/frontend/src/hooks/useHashTab.ts new file mode 100644 index 0000000..e7330bd --- /dev/null +++ b/frontend/src/hooks/useHashTab.ts @@ -0,0 +1,25 @@ +import { useCallback, useEffect, useState } from 'react'; + +function readHash(defaultId: string): string { + const hash = window.location.hash.slice(1); // strip leading '#' + return hash || defaultId; +} + +export function useHashTab(defaultId: string): [string, (id: string) => void] { + const [activeId, setActiveId] = useState(() => readHash(defaultId)); + + useEffect(() => { + function onHashChange() { + setActiveId(readHash(defaultId)); + } + window.addEventListener('hashchange', onHashChange); + return () => window.removeEventListener('hashchange', onHashChange); + }, [defaultId]); + + const navigate = useCallback((id: string) => { + window.location.hash = id; + setActiveId(id); + }, []); + + return [activeId, navigate]; +} diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css index 14e3350..31d34d3 100644 --- a/frontend/src/styles/index.css +++ b/frontend/src/styles/index.css @@ -147,4 +147,48 @@ .tag-mitre { @apply inline-flex items-center bg-cloud text-ink border border-hairline rounded-none px-2 py-[2px] font-mono text-[12px] leading-[1.33]; } + + /* ─── Sub-page tabs (L1) ─────────────────────────────────────────────── */ + .tab-underline { + @apply text-graphite caption-bold cursor-pointer border-b-2 border-transparent hover:text-ink px-xs; + } + .tab-underline-active { + @apply text-primary border-primary; + } + /* Count pill — rounded-pill is the allowed exception per DESIGN.md */ + .tab-count-pill { + @apply inline-flex items-center rounded-pill bg-cloud text-graphite text-[11px] px-xs py-0 font-mono; + } + .tab-count-pill-active { + @apply bg-primary-soft text-primary; + } + + /* ─── Inline alert banners (L2) ─────────────────────────────────────── */ + .alert-error { + @apply bg-paper border border-hairline border-l-4 border-l-bloom-deep rounded-none px-md py-sm flex items-start gap-sm; + } + .alert-warn { + @apply bg-paper border border-hairline border-l-4 border-l-warn rounded-none px-md py-sm flex items-start gap-sm; + } + .alert-success { + @apply bg-paper border border-hairline border-l-4 border-l-success rounded-none px-md py-sm flex items-start gap-sm; + } + .alert-info { + @apply bg-paper border border-hairline border-l-4 border-l-primary rounded-none px-md py-sm flex items-start gap-sm; + } + + /* ─── Compact table density (L4) — 32px row height, global ──────────── */ + .table-compact thead tr { + @apply text-[11px] uppercase tracking-[0.5px] text-graphite; + } + .table-compact th { + @apply px-md py-xxs; + } + .table-compact td { + @apply px-md py-xxs caption-md; + } + .table-compact tbody tr { + @apply border-b border-hairline last:border-0; + min-height: 32px; + } } From 004d075cad53115bef032ab102edab8b516d49a3 Mon Sep 17 00:00:00 2001 From: Knacky Date: Sun, 21 Jun 2026 22:11:04 +0200 Subject: [PATCH 03/11] feat(frontend): refactor EngagementDetailPage to 3-tab layout Tabs: Schedule (default) / Description / Simulations, wired via useHashTab('schedule'). Count pill on Simulations tab. BackLink replaces hand-rolled Link. Co-Authored-By: Claude Sonnet 4.6 --- frontend/src/pages/EngagementDetailPage.tsx | 33 ++++++++++++++++----- 1 file changed, 25 insertions(+), 8 deletions(-) diff --git a/frontend/src/pages/EngagementDetailPage.tsx b/frontend/src/pages/EngagementDetailPage.tsx index 97b2741..589c6f3 100644 --- a/frontend/src/pages/EngagementDetailPage.tsx +++ b/frontend/src/pages/EngagementDetailPage.tsx @@ -1,12 +1,17 @@ -import { Link, useParams } from 'react-router-dom'; +import { useParams } from 'react-router-dom'; import { extractApiError } from '@/api/client'; import { useAuth } from '@/hooks/useAuth'; import { useEngagement } from '@/hooks/useEngagements'; +import { useHashTab } from '@/hooks/useHashTab'; +import { useEngagementSimulations } from '@/hooks/useSimulations'; import { LoadingState } from '@/components/LoadingState'; import { ErrorState } from '@/components/ErrorState'; import { StatusBadge } from '@/components/StatusBadge'; import { SimulationList } from '@/components/SimulationList'; import { ExportEngagementButton } from '@/components/ExportEngagementButton'; +import { BackLink } from '@/components/BackLink'; +import { Tabs } from '@/components/Tabs'; +import { Link } from 'react-router-dom'; export function EngagementDetailPage(): JSX.Element { const { id } = useParams<{ id: string }>(); @@ -14,6 +19,9 @@ export function EngagementDetailPage(): JSX.Element { const { canEditEngagements } = useAuth(); const detail = useEngagement(numericId); + const simsQuery = useEngagementSimulations(numericId); + + const [activeTab, setActiveTab] = useHashTab('schedule'); if (detail.isLoading) return ; if (detail.isError) { @@ -27,14 +35,19 @@ export function EngagementDetailPage(): JSX.Element { if (!detail.data) return ; const eng = detail.data; + const simCount = simsQuery.data?.length; + + const tabs = [ + { id: 'schedule', label: 'Schedule' }, + { id: 'description', label: 'Description' }, + { id: 'simulations', label: 'Simulations', count: simCount }, + ]; return (
- - ← Back to engagements - + Back to engagements

{eng.name}

@@ -53,7 +66,9 @@ export function EngagementDetailPage(): JSX.Element { ) : null}
-
+ + + {activeTab === 'schedule' && (

Schedule

@@ -67,18 +82,20 @@ export function EngagementDetailPage(): JSX.Element {
{eng.created_at}
+ )} + {activeTab === 'description' && (

Description

{eng.description?.trim() ? eng.description : 'No description provided.'}

-
+ )} -
+ {activeTab === 'simulations' && ( -
+ )}
); } From 59eaa342a9de2f3f0fedbae850a864951f1cfde3 Mon Sep 17 00:00:00 2001 From: Knacky Date: Sun, 21 Jun 2026 22:11:10 +0200 Subject: [PATCH 04/11] feat(frontend): add AlertBanner component + 4 semantic variants border-l-4 semantic strip, bg-paper, Lucide icons at size=16. ARIA role="alert" for error/warn, role="status" for success/info. No shadow, no radius, no transition. Co-Authored-By: Claude Sonnet 4.6 --- frontend/src/components/AlertBanner.tsx | 30 +++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 frontend/src/components/AlertBanner.tsx diff --git a/frontend/src/components/AlertBanner.tsx b/frontend/src/components/AlertBanner.tsx new file mode 100644 index 0000000..14af0d7 --- /dev/null +++ b/frontend/src/components/AlertBanner.tsx @@ -0,0 +1,30 @@ +import type { ReactNode } from 'react'; +import { AlertCircle, AlertTriangle, CheckCircle, Info } from 'lucide-react'; + +type AlertVariant = 'error' | 'warn' | 'success' | 'info'; + +interface AlertBannerProps { + variant: AlertVariant; + title?: string; + children: ReactNode; +} + +const CONFIG: Record = { + error: { cls: 'alert-error', Icon: AlertCircle, role: 'alert' }, + warn: { cls: 'alert-warn', Icon: AlertTriangle, role: 'alert' }, + success: { cls: 'alert-success', Icon: CheckCircle, role: 'status' }, + info: { cls: 'alert-info', Icon: Info, role: 'status' }, +}; + +export function AlertBanner({ variant, title, children }: AlertBannerProps): JSX.Element { + const { cls, Icon, role } = CONFIG[variant]; + return ( +
+ +
+ {title ? {title} : null} + {children} +
+
+ ); +} From 9a8c5f52ab7c596bd453c515ed0a8ed4a3677607 Mon Sep 17 00:00:00 2001 From: Knacky Date: Sun, 21 Jun 2026 22:11:17 +0200 Subject: [PATCH 05/11] feat(frontend): add BackLink helper + dedup 3 hand-rolled instances BackLink: ArrowLeft (14px) + caption-md text-graphite hover:text-primary, instant. Replaces inline Link patterns in EngagementDetailPage (already committed), SimulationFormPage, and TemplateFormPage. Also migrates SimulationFormPage Done/SOC banners to AlertBanner. Co-Authored-By: Claude Sonnet 4.6 --- frontend/src/components/BackLink.tsx | 17 ++++++++++++++ frontend/src/pages/SimulationFormPage.tsx | 27 +++++++++-------------- frontend/src/pages/TemplateFormPage.tsx | 5 ++--- 3 files changed, 29 insertions(+), 20 deletions(-) create mode 100644 frontend/src/components/BackLink.tsx diff --git a/frontend/src/components/BackLink.tsx b/frontend/src/components/BackLink.tsx new file mode 100644 index 0000000..f410709 --- /dev/null +++ b/frontend/src/components/BackLink.tsx @@ -0,0 +1,17 @@ +import { Link } from 'react-router-dom'; +import { ArrowLeft } from 'lucide-react'; +import type { ReactNode } from 'react'; + +interface BackLinkProps { + to: string; + children: ReactNode; +} + +export function BackLink({ to, children }: BackLinkProps): JSX.Element { + return ( + + + {children} + + ); +} diff --git a/frontend/src/pages/SimulationFormPage.tsx b/frontend/src/pages/SimulationFormPage.tsx index ae9ac3a..663234b 100644 --- a/frontend/src/pages/SimulationFormPage.tsx +++ b/frontend/src/pages/SimulationFormPage.tsx @@ -22,6 +22,8 @@ import { MitreTechniquesField } from '@/components/MitreTechniquesField'; import { ExecuteViaC2Modal } from '@/components/ExecuteViaC2Modal'; import { ImportC2HistoryModal } from '@/components/ImportC2HistoryModal'; import { C2TasksPanel } from '@/components/C2TasksPanel'; +import { AlertBanner } from '@/components/AlertBanner'; +import { BackLink } from '@/components/BackLink'; interface RedteamFormState { name: string; @@ -238,9 +240,7 @@ export function SimulationFormPage(): JSX.Element { return (
- - ← Back to engagement - + Back to engagement

New simulation

@@ -279,9 +279,7 @@ export function SimulationFormPage(): JSX.Element {
- - ← Back to engagement - + Back to engagement

{rt.name || simulation?.name}

{status ? (
@@ -298,22 +296,17 @@ export function SimulationFormPage(): JSX.Element { {/* Done banner */} {isDone && ( -
+ This simulation is done and read-only. Use Reopen to make changes. -
+ )} {/* SOC banner */} {socBlocked && ( -
- Simulation not yet ready for review — the red team must mark it as "Review required" before you can fill in the SOC section. +
+ + Simulation not yet ready for review — the red team must mark it as "Review required" before you can fill in the SOC section. +
)} diff --git a/frontend/src/pages/TemplateFormPage.tsx b/frontend/src/pages/TemplateFormPage.tsx index 8300a54..566d7b6 100644 --- a/frontend/src/pages/TemplateFormPage.tsx +++ b/frontend/src/pages/TemplateFormPage.tsx @@ -9,6 +9,7 @@ import { FormField, TextArea, TextInput } from '@/components/FormField'; import { LoadingState } from '@/components/LoadingState'; import { ErrorState } from '@/components/ErrorState'; import { ConfirmDialog } from '@/components/ConfirmDialog'; +import { BackLink } from '@/components/BackLink'; import { MitreTechniqueTag, MitreTacticTag } from '@/components/MitreTechniqueTag'; import { MitreTechniquePicker } from '@/components/MitreTechniquePicker'; import { MitreMatrixModal } from '@/components/MitreMatrixModal'; @@ -127,9 +128,7 @@ export function TemplateFormPage(): JSX.Element {
- - ← Back to templates - + Back to templates

{isNew ? 'New template' : (existing.data?.name ?? 'Edit template')}

From 18190899251febf504dbb15a432704d471d86016 Mon Sep 17 00:00:00 2001 From: Knacky Date: Sun, 21 Jun 2026 22:11:24 +0200 Subject: [PATCH 06/11] feat(frontend): compact table density (32px row) global MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add table-compact class to all 4 list surfaces: EngagementsListPage, TemplatesListPage, UsersAdminPage, SimulationList. Remove inline px-xl py-md from th/td — recipe handles padding. Row border-b moved to recipe. WCAG SC 2.5.5 tradeoff accepted (BAS operator tool). Co-Authored-By: Claude Sonnet 4.6 --- frontend/src/components/SimulationList.tsx | 22 ++++++++-------- frontend/src/pages/EngagementsListPage.tsx | 30 +++++++++++----------- frontend/src/pages/TemplatesListPage.tsx | 26 +++++++++---------- frontend/src/pages/UsersAdminPage.tsx | 22 ++++++++-------- 4 files changed, 50 insertions(+), 50 deletions(-) diff --git a/frontend/src/components/SimulationList.tsx b/frontend/src/components/SimulationList.tsx index 46d3284..f20b194 100644 --- a/frontend/src/components/SimulationList.tsx +++ b/frontend/src/components/SimulationList.tsx @@ -172,25 +172,25 @@ export function SimulationList({ engagementId }: SimulationListProps): JSX.Eleme
- +
- - - - - + + + + + {data.map((sim) => ( navigate(`/engagements/${engagementId}/simulations/${sim.id}/edit`) } > - - - - diff --git a/frontend/src/pages/EngagementsListPage.tsx b/frontend/src/pages/EngagementsListPage.tsx index fc47ea6..93d83b1 100644 --- a/frontend/src/pages/EngagementsListPage.tsx +++ b/frontend/src/pages/EngagementsListPage.tsx @@ -69,32 +69,32 @@ export function EngagementsListPage(): JSX.Element { {!isLoading && !isError && data && data.length > 0 ? (
-
NameMITREStatusExecuted at
NameMITREStatusExecuted at
+ + {(() => { const items = [ ...(sim.tactics ?? []).map((t) => t.id), @@ -210,10 +210,10 @@ export function SimulationList({ engagementId }: SimulationListProps): JSX.Eleme return `${items[0]} +${items.length - 1}`; })()} + + {formatDate(sim.executed_at)}
+
- - - - - - - + + + + + + + {data.map((eng) => ( - - + - - - - - + + +
NameStatusStartEndCreated byActions
NameStatusStartEndCreated byActions
+
{eng.name} + {formatDate(eng.start_date)}{formatDate(eng.end_date)}{eng.created_by.username} + {formatDate(eng.start_date)}{formatDate(eng.end_date)}{eng.created_by.username}
View diff --git a/frontend/src/pages/TemplatesListPage.tsx b/frontend/src/pages/TemplatesListPage.tsx index 288d4b0..10455b3 100644 --- a/frontend/src/pages/TemplatesListPage.tsx +++ b/frontend/src/pages/TemplatesListPage.tsx @@ -69,20 +69,20 @@ export function TemplatesListPage(): JSX.Element { {!isLoading && !isError && data && data.length > 0 ? (
- +
- - - - - - + + + + + + {data.map((t) => ( - - + - - - - + +
NameMITRECreated byUpdatedActions
NameMITRECreated byUpdatedActions
+
+ {mitreCount(t) === 0 ? '—' : mitreCount(t)} {t.created_by.username}{formatDate(t.updated_at)} + {t.created_by.username}{formatDate(t.updated_at)}
Edit diff --git a/frontend/src/pages/UsersAdminPage.tsx b/frontend/src/pages/UsersAdminPage.tsx index 301a17c..d03fe16 100644 --- a/frontend/src/pages/UsersAdminPage.tsx +++ b/frontend/src/pages/UsersAdminPage.tsx @@ -188,13 +188,13 @@ export function UsersAdminPage(): JSX.Element { {!list.isLoading && !list.isError && list.data && list.data.length > 0 ? (
- +
- - - - - + + + + + @@ -204,8 +204,8 @@ export function UsersAdminPage(): JSX.Element { // Fragment must carry the key — `<>` cannot, which broke // per-row reconciliation (reset-password state leaked across rows). - - + - - - + {resetOpen === u.id ? ( + {/* Aerated row — inline form needs room; compact-density tradeoff intentional */}
UsernameRoleCreatedActions
UsernameRoleCreatedActions
+
{u.username} {isSelf ? ( @@ -213,7 +213,7 @@ export function UsersAdminPage(): JSX.Element { ) : null} + {u.created_at} + {u.created_at}
); } diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css index 31d34d3..b9c49f5 100644 --- a/frontend/src/styles/index.css +++ b/frontend/src/styles/index.css @@ -179,16 +179,16 @@ /* ─── Compact table density (L4) — 32px row height, global ──────────── */ .table-compact thead tr { - @apply text-[11px] uppercase tracking-[0.5px] text-graphite; + @apply text-[12px] uppercase tracking-[0.5px] text-graphite; } .table-compact th { @apply px-md py-xxs; } .table-compact td { @apply px-md py-xxs caption-md; + height: 32px; } .table-compact tbody tr { @apply border-b border-hairline last:border-0; - min-height: 32px; } } diff --git a/frontend/tests/components/Tabs.test.tsx b/frontend/tests/components/Tabs.test.tsx index 6fffbe1..d0c660b 100644 --- a/frontend/tests/components/Tabs.test.tsx +++ b/frontend/tests/components/Tabs.test.tsx @@ -49,6 +49,16 @@ describe('Tabs', () => { expect(onChange).toHaveBeenCalledWith('description'); }); + it('sets aria-controls and id on each tab button', () => { + render(); + const schedBtn = screen.getByRole('tab', { name: /Schedule/i }); + expect(schedBtn).toHaveAttribute('id', 'tab-schedule'); + expect(schedBtn).toHaveAttribute('aria-controls', 'tabpanel-schedule'); + const simsBtn = screen.getByRole('tab', { name: /Simulations/i }); + expect(simsBtn).toHaveAttribute('id', 'tab-simulations'); + expect(simsBtn).toHaveAttribute('aria-controls', 'tabpanel-simulations'); + }); + it('has no rounded-md, transition-*, or shadow-* on tab buttons (brutalism)', () => { render(); for (const btn of screen.getAllByRole('tab')) { From 11ce3cfb86149d00ffc92a27c916673929a31e37 Mon Sep 17 00:00:00 2001 From: Knacky Date: Sun, 21 Jun 2026 22:20:51 +0200 Subject: [PATCH 10/11] =?UTF-8?q?fix(frontend):=20code-review=20polish=20?= =?UTF-8?q?=E2=80=94=20replaceState,=20arrow-key=20nav,=20TabId,=20comment?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fix 4: useHashTab navigate() uses history.replaceState instead of window.location.hash assignment — no spurious history entries, no anchor-jump scroll side-effect. Fix 5: Tabs ArrowLeft/ArrowRight keyboard nav (WAI-ARIA tabs pattern). Fix 6: TabId union type in EngagementDetailPage, cast from string for type-safe switch on activeTab without breaking Tabs.onChange signature. Fix 7: intentional comment on UsersAdminPage reset-password aerated row. Tests: 236/236 (+2 arrow-key assertions in Tabs.test.tsx). Co-Authored-By: Claude Sonnet 4.6 --- frontend/src/components/Tabs.tsx | 15 ++++++++++++++- frontend/src/hooks/useHashTab.ts | 3 ++- frontend/src/pages/EngagementDetailPage.tsx | 5 ++++- frontend/src/pages/UsersAdminPage.tsx | 1 + frontend/tests/components/Tabs.test.tsx | 14 ++++++++++++++ frontend/tests/hooks/useHashTab.test.tsx | 2 +- 6 files changed, 36 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/Tabs.tsx b/frontend/src/components/Tabs.tsx index 3bf5831..55d70f8 100644 --- a/frontend/src/components/Tabs.tsx +++ b/frontend/src/components/Tabs.tsx @@ -1,3 +1,5 @@ +import type { KeyboardEvent } from 'react'; + interface TabItem { id: string; label: string; @@ -11,12 +13,22 @@ interface TabsProps { } export function Tabs({ items, activeId, onChange }: TabsProps): JSX.Element { + function handleKeyDown(e: KeyboardEvent, index: number) { + if (e.key === 'ArrowRight') { + e.preventDefault(); + onChange(items[(index + 1) % items.length].id); + } else if (e.key === 'ArrowLeft') { + e.preventDefault(); + onChange(items[(index - 1 + items.length) % items.length].id); + } + } + return (
- {items.map((item) => { + {items.map((item, index) => { const isActive = item.id === activeId; return (
onResetPassword(u, e)} diff --git a/frontend/tests/components/Tabs.test.tsx b/frontend/tests/components/Tabs.test.tsx index d0c660b..927e107 100644 --- a/frontend/tests/components/Tabs.test.tsx +++ b/frontend/tests/components/Tabs.test.tsx @@ -59,6 +59,20 @@ describe('Tabs', () => { expect(simsBtn).toHaveAttribute('aria-controls', 'tabpanel-simulations'); }); + it('ArrowRight moves focus to the next tab', () => { + const onChange = vi.fn(); + render(); + fireEvent.keyDown(screen.getByRole('tab', { name: /Schedule/i }), { key: 'ArrowRight' }); + expect(onChange).toHaveBeenCalledWith('description'); + }); + + it('ArrowLeft wraps around to the last tab', () => { + const onChange = vi.fn(); + render(); + fireEvent.keyDown(screen.getByRole('tab', { name: /Schedule/i }), { key: 'ArrowLeft' }); + expect(onChange).toHaveBeenCalledWith('simulations'); + }); + it('has no rounded-md, transition-*, or shadow-* on tab buttons (brutalism)', () => { render(); for (const btn of screen.getAllByRole('tab')) { diff --git a/frontend/tests/hooks/useHashTab.test.tsx b/frontend/tests/hooks/useHashTab.test.tsx index 5a8ca5f..21a37e2 100644 --- a/frontend/tests/hooks/useHashTab.test.tsx +++ b/frontend/tests/hooks/useHashTab.test.tsx @@ -22,7 +22,7 @@ describe('useHashTab', () => { expect(result.current[0]).toBe('simulations'); }); - it('navigate() updates activeId and sets location.hash', () => { + it('navigate() updates activeId and sets hash via replaceState (no history entry)', () => { const { result } = renderHook(() => useHashTab('schedule')); act(() => { result.current[1]('description'); From 2c7fcec7cd36fa2a86418c987292c4d46c30058e Mon Sep 17 00:00:00 2001 From: Knacky Date: Sun, 21 Jun 2026 22:38:01 +0200 Subject: [PATCH 11/11] fix(frontend): add text- prefix to caption-bold and caption-md @apply (sprint 11 build fix) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit caption-bold and caption-md are fontSize tokens — Tailwind generates text-caption-bold / text-caption-md utilities, not bare-name utilities. Missing text- prefix caused @apply resolution failure in vite build (PostCSS step), while vitest passed because it does not resolve @apply. Co-Authored-By: Claude Sonnet 4.6 --- frontend/src/styles/index.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css index b9c49f5..c6116e9 100644 --- a/frontend/src/styles/index.css +++ b/frontend/src/styles/index.css @@ -150,7 +150,7 @@ /* ─── Sub-page tabs (L1) ─────────────────────────────────────────────── */ .tab-underline { - @apply text-graphite caption-bold cursor-pointer border-b-2 border-transparent hover:text-ink px-xs; + @apply text-graphite text-caption-bold cursor-pointer border-b-2 border-transparent hover:text-ink px-xs; } .tab-underline-active { @apply text-primary border-primary; @@ -185,7 +185,7 @@ @apply px-md py-xxs; } .table-compact td { - @apply px-md py-xxs caption-md; + @apply px-md py-xxs text-caption-md; height: 32px; } .table-compact tbody tr {