knacky/mimic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(design): terminal-SOC aesthetic refresh (sprint 7) #10

Merged
knacky merged 12 commits from sprint/7-design into main 2026-06-10 16:40:20 +00:00
Conversation 0 Commits 12 Files Changed 34 +639 -773
knacky commented 2026-06-09 17:03:01 +00:00
Owner
Copy Link

Summary

  • Complete DESIGN.md rewrite: HP-catalog aesthetic → terminal-SOC brutalist spec (Bloomberg/terminal density, instant hover, zero transitions, angular shapes)
  • Tailwind token refresh: success/warn semantic color tokens (WCAG AA light+dark), JetBrains Mono Variable font family, borderRadius reduced to none+pill only, display-* scale reduced (xxl 72→40px etc.), section spacing 40→48px
  • JetBrains Mono bundled locally via @fontsource-variable/jetbrains-mono — no CDN
  • Component sweep (17 components): all rounded-* → rounded-none (status pills keep rounded-pill), all transition-colors removed, font-mono on data cells (IDs, dates, MITRE codes, commands)
  • Page sweep (8 pages): h1 sizes reduced to match new display scale, font-mono on dates/IDs/metrics, banners squared
  • Vitest assertions updated for renamed semantic tokens (3 tests, 136 total passing)

Test plan

  • npm run typecheck — 0 errors
  • npm run lint — 0 warnings (--max-warnings=0)
  • npm run test -- --run — 136/136 passing
  • No backend files touched (git diff origin/main -- backend/ is empty)
  • Light + dark screenshots captured: 20 PNGs, all 8 pages + export dropdown + badge states

Screenshots

All screenshots saved to /home/user/.claude/jobs/9e6bc162/tmp/screenshots/:

Login page

  • 01-login-light.png
  • 01-login-dark.png

Engagements list

  • 02-engagements-list-light.png
  • 02-engagements-list-dark.png

Engagement detail

  • 03-engagement-detail-light.png
  • 03-engagement-detail-dark.png

Engagement form (new)

  • 04-engagement-form-new-light.png
  • 04-engagement-form-new-dark.png

Simulation form (new)

  • 05-simulation-form-new-light.png
  • 05-simulation-form-new-dark.png

Templates list

  • 06-templates-list-light.png
  • 06-templates-list-dark.png

Template form (new)

  • 07-template-form-new-light.png
  • 07-template-form-new-dark.png

Users admin

  • 08-users-admin-light.png
  • 08-users-admin-dark.png

Export dropdown (open)

  • 09-export-dropdown-open-light.png
  • 09-export-dropdown-open-dark.png

Simulation list — status badges

  • 10-sim-list-badges-light.png
  • 10-sim-list-badges-dark.png

🤖 Generated with Claude Code

## Summary - Complete DESIGN.md rewrite: HP-catalog aesthetic → terminal-SOC brutalist spec (Bloomberg/terminal density, instant hover, zero transitions, angular shapes) - Tailwind token refresh: `success`/`warn` semantic color tokens (WCAG AA light+dark), JetBrains Mono Variable font family, `borderRadius` reduced to `none`+`pill` only, `display-*` scale reduced (xxl 72→40px etc.), `section` spacing 40→48px - JetBrains Mono bundled locally via `@fontsource-variable/jetbrains-mono` — no CDN - Component sweep (17 components): all `rounded-*` → `rounded-none` (status pills keep `rounded-pill`), all `transition-colors` removed, `font-mono` on data cells (IDs, dates, MITRE codes, commands) - Page sweep (8 pages): h1 sizes reduced to match new display scale, `font-mono` on dates/IDs/metrics, banners squared - Vitest assertions updated for renamed semantic tokens (3 tests, 136 total passing) ## Test plan - [x] `npm run typecheck` — 0 errors - [x] `npm run lint` — 0 warnings (--max-warnings=0) - [x] `npm run test -- --run` — 136/136 passing - [x] No backend files touched (`git diff origin/main -- backend/` is empty) - [x] Light + dark screenshots captured: 20 PNGs, all 8 pages + export dropdown + badge states ## Screenshots All screenshots saved to `/home/user/.claude/jobs/9e6bc162/tmp/screenshots/`: **Login page** - `01-login-light.png` - `01-login-dark.png` **Engagements list** - `02-engagements-list-light.png` - `02-engagements-list-dark.png` **Engagement detail** - `03-engagement-detail-light.png` - `03-engagement-detail-dark.png` **Engagement form (new)** - `04-engagement-form-new-light.png` - `04-engagement-form-new-dark.png` **Simulation form (new)** - `05-simulation-form-new-light.png` - `05-simulation-form-new-dark.png` **Templates list** - `06-templates-list-light.png` - `06-templates-list-dark.png` **Template form (new)** - `07-template-form-new-light.png` - `07-template-form-new-dark.png` **Users admin** - `08-users-admin-light.png` - `08-users-admin-dark.png` **Export dropdown (open)** - `09-export-dropdown-open-light.png` - `09-export-dropdown-open-dark.png` **Simulation list — status badges** - `10-sim-list-badges-light.png` - `10-sim-list-badges-dark.png` 🤖 Generated with [Claude Code](https://claude.com/claude-code)
knacky added 9 commits 2026-06-09 17:03:01 +00:00
chore(agents): frontend-builder must invoke Skill frontend-design before UI work c85ece46b9 
Adds a mandatory pre-step to the frontend-builder agent prompt: invoke the
frontend-design skill at sprint start before creating or modifying any
visible UI component. DESIGN.md rules project-specific tokens; the skill
covers universal principles (typographic hierarchy, alignment, contrast,
focus, density, motion). Skip allowed only for pure logic/data-layer work
with no visual change.

Authored locally during sprint 6 (uncommitted in worktree), bundled into
sprint 7 hygiene as the first commit so it takes effect immediately for
the design refresh work.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
docs(sprint 7): plan — terminal-SOC design refresh 5627d7dcfa 
9 binding decisions locked with user 2026-06-09 (4-question + 4-question
+ 3-question rounds). Visual direction Bloomberg / terminal SOC. Border
radius 0 except status pills and avatars. Palette kept (primary blue +
slab + canvas/paper/cloud/fog/ink), ADD success/warn semantic tokens.
Scope: 8 pages + 17 components + tokens + DESIGN.md rewrite, all in one
sprint. JetBrains Mono for data only (Inter stays for body/headers).
Light + dark both kept. Zero transitions (brutalist).

Plan validated by spec-reviewer pre-pass: APPROVED with 3 findings
addressed inline (D9 added, R2 reworded, semantic tokens promoted from
optional to locked).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
docs(design): rewrite DESIGN.md for terminal-SOC aesthetic 6c05cc2e11
feat(design): refresh tailwind tokens for brutalist terminal aesthetic 64da94f10d
feat(design): bundle JetBrains Mono for data cells c791e50108
refactor(components): squared shapes + mono data cells across all components ec7800ae38
refactor(pages): apply terminal-SOC aesthetic to all 8 pages 5cc830554c
test(frontend): update vitest assertions for new design tokens 0e69eb901c
docs: add sprint 7 terminal-SOC design refresh to CHANGELOG 7ea2fe490c 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
knacky added 1 commit 2026-06-09 17:43:20 +00:00
fix(design): address design-reviewer findings F1-F6 — nav slab, spinner, badge coverage, mono discipline 6995c4c860 
F3: nav-bar-top bg-paper → bg-slab text-slab-text (3-band slab anchoring restored).
    NavLinks: text-slab-muted default, text-slab-text + border-primary active.
    Logo span: text-ink → text-slab-text.
F2: (you) label extracted from font-mono td into adjacent font-sans span.
F1: Loader2 circular spinner → EXPORTING… text with animate-pulse (terminal-SOC compatible).

Screenshots regenerated:
- All 8 pages light+dark (01→10)
- 05-simulation-form-edit light+dark (F6)
- 11-mitre-matrix-modal light+dark (F6)
- 12-toast-success light+dark (F6)
- 13-confirm-dialog light+dark (F6)
- admin-light/dark-open/closed regenerated from HEAD (F4)

F4: StatusBadge.tsx confirmed single code path — planned → bg-warn-soft (no divergence in code).
    Divergence in prior captures was stale cache; regenerated admin-* confirm consistency.
F5: Simulations seeded (pending/in_progress/review_required/done) via API;
    10-sim-list-badges shows all 4 semantic badge colors.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
knacky added 1 commit 2026-06-10 03:53:59 +00:00
fix(design): code-reviewer polish — dedupe tag-mitre recipe, drop dead boxShadow tokens, cover StatusBadge classes 573281f454 
F1: MitreTechniqueTag inline classes replaced with className="tag-mitre gap-xxs"
    (index.css .tag-mitre is now the single source of truth for technique tags).
F2: boxShadow block removed from tailwind.config.ts — no component referenced
    shadow-soft-lift / shadow-floating / *-dark; DESIGN.md §Don'ts prohibits shadows.
F4: StatusBadge.test.tsx gains 3 class assertions (bg-warn-soft / bg-primary-soft / bg-cloud)
    mirroring SimulationStatusBadge.test.tsx pattern. Test count: 136 → 139.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
knacky added 1 commit 2026-06-10 16:21:22 +00:00
feat(frontend): side-by-side red-team/SOC columns on simulation screen 1997a8c621 
Wrap RT and SOC form cards in a responsive 2-column grid
(grid gap-xl lg:grid-cols-2 items-start) on the simulation edit view.
Drop the max-w-3xl constraint from the outer container so the grid
can use full page width (matching EngagementDetailPage). Header,
banners, submitError, and sticky action bar remain full-width above
the grid. The isNew create form keeps its current narrow layout.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
knacky merged commit 6ca614a3f3 into main 2026-06-10 16:40:20 +00:00
knacky deleted branch sprint/7-design 2026-06-10 16:40:20 +00:00
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
knacky
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: knacky/mimic#10
Delete Branch "sprint/7-design"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?