Skip to content

feat(log-viewer): redesign the header's problems and notifications surfaces - #889

Merged
lcottercertinia merged 3 commits into
certinia:mainfrom
lukecotter:worktree-elegant-hatching-boot
Jul 30, 2026
Merged

feat(log-viewer): redesign the header's problems and notifications surfaces#889
lcottercertinia merged 3 commits into
certinia:mainfrom
lukecotter:worktree-elegant-hatching-boot

Conversation

@lukecotter

Copy link
Copy Markdown
Collaborator

Redesigns the two header controls that looked like siblings but aren't the same kind of thing: Log problems (facts about the user's transaction) on the left, Notifications (facts about our parser) behind the bell on the right.

Header bar

  • Log problems is a bare icon button — worst-severity glyph plus a count badge, never tinted: severity is carried by the glyph's shape (so it doesn't depend on colour) and the full breakdown is in title/aria-label. Monochrome chrome, coloured content — colour lives in the panel rows and the timeline.
  • Both panels are one native-popover shell (AnchoredPopover), replacing two hand-rolled absolutely-positioned panels. Light-dismiss and Escape come for free. They open at zero with a positive empty state.
  • Help & documentation and Report an issue move into a ••• menu.
  • The header collapses in a measured, staged ladder — log meta, then the bell, then the Inspector toggle, then log problems — each reappearing inside •••, which never collapses. Stage is a pure function of width, reusing the existing computeVisibleCount.
  • Three near-duplicate notification/problem models collapse into one LogIssue.

Issue cards

  • A 3px rail in the colour the timeline draws for the same issue, derived from MARKER_COLORS so the canvas and the DOM can't drift.
  • Summary and message each clamp to two lines; clicking the message expands it. Stack traces keep their line breaks in the editor font.
  • Clicking a card runs its action — unless the click ended a text selection, so a stack trace can still be copied.
  • Activation is injected: LogIssue carries an opaque IssueAction supplied by whoever produced the issue, so the list no longer imports from features/call-tree and any surface can reuse it.
  • An Unsupported log event name card opens a prefilled GitHub bug report (title/labels matching the bug template). An Invalid log line card stays static — its text can echo customer data. The openUrl webview message is guarded to https: URIs.

Testing

tsc -b, eslint and prettier clean; 89 suites / 1241 tests pass; production build OK. Verified in a dev host against sample-app in light and dark themes: clean log, FATAL ERROR log, a >20MB truncated log and an unsupported-event log; the collapse ladder walked wide to narrow; a second log load carries nothing over.

…ntrols

Unify three near-duplicate notification/problem models into one LogIssue, replace
two hand-rolled absolute-positioned panels with a single native-popover shell, and
fold help and report-an-issue into a ••• meta menu that also holds whatever the
header collapses into it as it narrows.

- log problems: worst-severity glyph + count badge, monochrome like every other
  header glyph; severity colour stays in the panel rows and the timeline
- notifications: bell + corner badge, opening a positive empty state
- measured progressive-collapse ladder (meta, bell, Inspector, problems) replacing
  the single 420px breakpoint
- fix Report an issue rendering as a blue underlined link beside plain menu rows
Each card now carries a 3px rail in the colour the timeline draws for the same
issue, a summary and message that each clamp to two lines, and a stack trace
that keeps its line breaks in the editor font. Clicking the message expands it;
clicking the card runs its action.

Activation is injected rather than built in: LogIssue carries an opaque
IssueAction supplied by whoever produced the issue, so the list no longer knows
about the call tree and any surface can reuse it. An unsupported log event
reports itself through a prefilled GitHub bug report; an invalid log line stays
static, since its text can carry customer data.
@lcottercertinia
lcottercertinia merged commit 9de8fe1 into certinia:main Jul 30, 2026
7 checks passed
@lukecotter
lukecotter deleted the worktree-elegant-hatching-boot branch July 30, 2026 15:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants