feat(ui): packet analysis window — restyle to match library tactical palette#17
Merged
Conversation
…palette
User feedback: "the VM Packet window text is not styled right". The
packet window had drifted from the library's tactical aesthetic in
several ways since the redesign:
- Toolbar buttons used `.rounded` AppKit bezel — classic Aqua look
that clashed with the library's dark pill style
- Scroll views used `.bezelBorder` — same Aqua problem
- Filter label + checkbox tint were hardcoded `NSColor.white`
rather than `AppColors.textPrimary`
- Font sizes were raw constants (10, 11, 12) instead of the
`LayoutConstants.fontSize*` scale
- Section header was plain "Packet Details:" with OD tint instead
of the library's `▸ LIVE TRAFFIC` orange-accent pattern
- Table header cells used stock `NSTableHeaderCell` instead of the
shared `TacticalTableHeaderCell`
This PR aligns every one of those:
- Toolbar buttons now use `TacticalHoverButton` with OD border +
green hover treatment matching the library's pill buttons
- Scroll view borders → `.noBorder` + 1pt OD layer border +
cornerRadiusSM
- All hardcoded `NSColor.white` → `AppColors.textPrimary`
- Font sizes route through `LayoutConstants.fontSize{Body,Small,...}`
- "Packet Details:" → "▸ PACKET DETAILS" in `accentOrange`,
uppercase, mono-bold (mirrors the library's panel headers)
- Column headers → `TacticalTableHeaderCell` for uppercase mono
caption with OD tint
No behavior changes — capture / filter / preset / save / open all
still wire through the same selectors. Pure visual alignment.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why
User feedback: "the VM Packet window text is not styled right".
The packet window had drifted from the library's tactical aesthetic in several specific ways since the redesign:
.roundedAqua bezelTacticalHoverButtonwith OD border + green hover.bezelBorder(classic Aqua bevel).noBorder+ 1pt OD layer border +cornerRadiusSMNSColor.whiteAppColors.textPrimaryLayoutConstants.fontSize{Body,Small}scaleaccentOrange, uppercase mono-bold (mirrors the library's▸ LIVE TRAFFICpanel header)NSTableHeaderCellTacticalTableHeaderCell(uppercase mono OD-tinted)What didn't change
No behavior. Capture / filter / preset / save PCAP / open PCAP all still wire through the same selectors. This PR is pure visual alignment so the two windows read as the same product.
Test plan
🤖 Generated with Claude Code