feat(viewer): add contextual diagnostics drawer - #1649
Conversation
|
Warning This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
This stack of pull requests is managed by Graphite. Learn more about stacking. |
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 309c1f2a60
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
ecde519 to
4b6ef61
Compare
309c1f2 to
ac40087
Compare
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: ac40087fd5
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
ac40087 to
7908c25
Compare
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 7908c2571a
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
4b6ef61 to
03a2437
Compare
7908c25 to
a20e829
Compare
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: a20e829ba9
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| useEffect(() => { | ||
| if (!state.open) return; | ||
| void runnerRef.current("replace"); | ||
| }, [state.open, state.queryRevision]); |
There was a problem hiding this comment.
Resume with a poll instead of replacing loaded history
When a user pauses while reading paginated older events and then resumes, the reducer increments queryRevision, causing this effect to run a replace request. The response overwrites all loaded rows with the newest 50 while the scroll container retains its position, so the event being inspected can disappear and the view can jump. Resume should perform the normal poll/queue reconciliation so older rows and reading position are preserved.
Useful? React with 👍 / 👎.
a20e829 to
c463454
Compare
03a2437 to
270265e
Compare
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: c4634545db
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| loading: false, | ||
| error: true, | ||
| announcement: "", | ||
| queryRevision: paginationFailed ? state.queryRevision + 1 : state.queryRevision, |
There was a problem hiding this comment.
Preserve history when older-page requests fail
When “Load older” fails for any reason—including a transient network error or server 500—this increments queryRevision, so the effect in useDiagnosticsDrawer immediately issues a replace request. If that request succeeds, applyResponse overwrites all previously loaded rows with the newest page and loses the reader's history and scroll context. Only restart from page one for a confirmed invalid cursor; ordinary pagination failures should retain the cursor and loaded rows for retry.
Useful? React with 👍 / 👎.
| ): LoadDiagnosticEventsOptions { | ||
| const remaining = MAX_ROWS - state.rows.length; | ||
| return { | ||
| limit: mode === "older" ? Math.max(1, Math.min(PAGE_SIZE, remaining)) : PAGE_SIZE, |
There was a problem hiding this comment.
Page through polling gaps before merging cached rows
Every poll requests only the newest 50 matching events without a cursor. If more than 50 events arrive between five-second polls, the response contains only the latest 50 and the reducer merges them directly with the older cached page; the intervening events are never reachable because nextCursor still points below the cached page. For example, after caching events 1–50, a burst through event 110 produces 110–61 plus 50–1, permanently omitting 51–60 even though they are within the 200-row client bound.
Useful? React with 👍 / 👎.
| .diagnostics-drawer-overlay { | ||
| position: fixed; | ||
| inset: 0; | ||
| z-index: 45; |
There was a problem hiding this comment.
Coordinate the drawer with the legacy upgrade modal
When the asynchronous legacy-upgrade check resolves while the diagnostics drawer is open, the upgrade modal opens at z-index 20/21 underneath this new 45/46 drawer, while setLegacyUpgradeBackgroundInert() does not inert or close #diagnosticsDrawerMount. The upgrade notice is therefore obscured by another active modal and is nevertheless marked as shown, so the user can miss it until reloading; defer one modal or explicitly close/inert the drawer before showing the notice.
Useful? React with 👍 / 👎.

Description
Adds the typed diagnostics API client and accessible right-side drawer with filters, technical-detail reveal, pause/resume, stale and retry states, queued updates, bounded pagination, and Health/Advanced entry points. Refreshes reuse the viewer app coordination and stop while hidden, paused, or closed.
Type of Change
Testing
pnpm run tsc,pnpm run lint,pnpm run test)Checklist
pnpm run lintpasses for touched files)