Skip to content

feat(site): add Debug panel components and settings#23920

Merged
ThomasK33 merged 17 commits into
mainfrom
devtools/08-debug-panel-components-settings
Apr 22, 2026
Merged

feat(site): add Debug panel components and settings#23920
ThomasK33 merged 17 commits into
mainfrom
devtools/08-debug-panel-components-settings

Conversation

@ThomasK33
Copy link
Copy Markdown
Member

@ThomasK33 ThomasK33 commented Apr 1, 2026

Summary

Add the Debug panel UI components: run list, run cards, step cards with transcript and tool-call rendering, attempt accordions, and shared primitives. Wire the panel into the AgentChatPage sidebar and add the per-chat debug logging toggle in the behavior settings page.

This is PR 8/9 in the chat debug logging stack.

Screenshots

Settings Page

CleanShot 2026-04-21 at 21 19 36@2x

Conditional Debug tab

CleanShot 2026-04-21 at 21 19 58@2x

Last request's tools and schema

CleanShot 2026-04-21 at 21 20 03@2x

"Raw" JSON request bodies

CleanShot 2026-04-21 at 21 20 35@2x

Changes

  • DebugPanel (site/src/pages/AgentsPage/components/RightPanel/DebugPanel/DebugPanel.tsx): top-level panel component owning data fetching and subscription lifecycle.
  • DebugRunCard: compact single-row header with capitalized provider name, status badge, compact duration (1.3s), and token summary (3→5 tok). Expandable to show child step cards.
  • DebugStepCard: step inspector with normalized transcript rendering — system prompts, assistant text with 160-char clamping + independent "see more/less" toggle, tool calls with fully-expanded JSON payloads in CopyableCodeBlock.
  • DebugAttemptAccordion: nested accordion for HTTP-level attempt details showing request/response headers and bodies.
  • Shared primitives: CopyableCodeBlock, MessageRow, ToolPayloadDisclosure, StatusBadge.
  • Sidebar wiring (AgentChatPageView.tsx): adds the Debug tab to the right panel when debug logging is enabled.
  • Behavior settings: deployment-wide and per-user debug logging toggles on the settings page.

Stack overview

  1. Database schema & SDK types
  2. Types, context, and model normalization
  3. Recorder, transport, and redaction
  4. Service and summary aggregation
  5. Chat lifecycle wiring
  6. HTTP handlers and API docs
  7. Frontend API layer and panel utilities
  8. → Debug panel components and settings (this PR)
  9. Storybook stories

Generated with mux • Model: anthropic:claude-opus-4-6 • Thinking: xhigh

Copy link
Copy Markdown
Member Author

@codex review

Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: b67aae1f21

ℹ️ 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".

Comment thread site/src/pages/AgentsPage/AgentChatPage.tsx Outdated
Comment thread site/src/pages/AgentsPage/components/RightPanel/DebugPanel/DebugPanel.tsx Outdated
@ThomasK33 ThomasK33 force-pushed the devtools/08-debug-panel-components-settings branch from b67aae1 to 2bb04f1 Compare April 1, 2026 14:59
@ThomasK33 ThomasK33 force-pushed the devtools/07-frontend-api-panel-utils branch 2 times, most recently from 350e732 to f5c8803 Compare April 1, 2026 16:59
@ThomasK33 ThomasK33 force-pushed the devtools/08-debug-panel-components-settings branch 2 times, most recently from 9e5bdfd to cb3da60 Compare April 1, 2026 17:02
@ThomasK33
Copy link
Copy Markdown
Member Author

@codex review

@ThomasK33 ThomasK33 changed the title feat(site/AgentsPage): add Debug panel components and settings feat(site): add Debug panel components and settings Apr 1, 2026
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: cb3da60deb

ℹ️ 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".

Comment thread site/src/pages/AgentsPage/AgentChatPage.tsx Outdated
Comment thread site/src/pages/AgentsPage/components/RightPanel/DebugPanel/DebugStepCard.tsx Outdated
@ThomasK33 ThomasK33 force-pushed the devtools/07-frontend-api-panel-utils branch from 42058d9 to f29f721 Compare April 1, 2026 17:13
@ThomasK33 ThomasK33 force-pushed the devtools/08-debug-panel-components-settings branch from cb3da60 to 52a4b9d Compare April 1, 2026 17:13
@ThomasK33 ThomasK33 force-pushed the devtools/07-frontend-api-panel-utils branch from f29f721 to cffa02e Compare April 1, 2026 17:37
@ThomasK33 ThomasK33 force-pushed the devtools/08-debug-panel-components-settings branch from 52a4b9d to 6481b60 Compare April 1, 2026 17:37
@ThomasK33 ThomasK33 force-pushed the devtools/07-frontend-api-panel-utils branch from cffa02e to 517ce22 Compare April 1, 2026 17:39
@ThomasK33 ThomasK33 force-pushed the devtools/08-debug-panel-components-settings branch from 6481b60 to 6b4f8e2 Compare April 1, 2026 17:39
@ThomasK33 ThomasK33 force-pushed the devtools/07-frontend-api-panel-utils branch from 517ce22 to 833bf86 Compare April 1, 2026 18:00
@ThomasK33 ThomasK33 force-pushed the devtools/08-debug-panel-components-settings branch 2 times, most recently from 049b797 to f7a54c1 Compare April 1, 2026 18:01
@ThomasK33 ThomasK33 force-pushed the devtools/07-frontend-api-panel-utils branch from 833bf86 to b9a629f Compare April 1, 2026 18:01
Copy link
Copy Markdown
Contributor

@coder-agents-review coder-agents-review Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Round 35 (Netero + panel: Mafuuu, Hisoka, Bisky, Pariston, Gon, Nami, Ging-TS, Ging-React, Luffy, Meruem). 13 of 15 open findings from R33 addressed. Excellent progress.

Netero found no mechanical defects. Six panel reviewers (Mafuuu, Hisoka, Nami, Ging-TS, Ging-React, Meruem) found no issues. The defensive coercion layer, query lifecycle, feature gating, and test suite are all solid.

2 P3, 2 Nit.

DEREM-23 (missing stories) remains contested. Pariston evaluated the defense and concluded: "The defense is unusually concrete for a deferral (named branch, next in a numbered stack), but without a ticket or merge guarantee, it is still a promise. The finding remains open at P2 under the no-follow-up assumption." This needs a human decision: file a ticket tracking PR 9/9 stories, or explicitly accept the gap.

Bisky on the test suite: "Five safeJsonStringify cases cover the string passthrough, undefined guard, function fallback, and the catch branch (circular reference). The surrogate-pair clampContent test does a char-by-char surrogate validation loop, not just a length check. No mocks anywhere. Real gems."

🤖 This review was automatically generated with Coder Agents.

Comment thread site/src/api/queries/chats.ts Outdated
Comment thread site/src/pages/AgentsPage/components/DebugLoggingSettings.tsx Outdated
Comment thread site/src/pages/AgentsPage/AgentSettingsBehaviorPageView.tsx Outdated
Comment thread site/src/pages/AgentsPage/components/RightPanel/DebugPanel/DebugRunCard.tsx Outdated
@ThomasK33
Copy link
Copy Markdown
Member Author

@codex review

@chatgpt-codex-connector
Copy link
Copy Markdown

Codex Review: Didn't find any major issues. Can't wait for the next one!

ℹ️ 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".

Comment thread site/src/pages/AgentsPage/components/ChatConversation/useChatStore.ts Outdated
Comment thread site/src/pages/AgentsPage/components/RightPanel/DebugPanel/DebugStepCard.tsx Outdated
@ThomasK33
Copy link
Copy Markdown
Member Author

@codex review

@chatgpt-codex-connector
Copy link
Copy Markdown

Codex Review: Didn't find any major issues. Already looking forward to the next diff.

ℹ️ 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".

Copy link
Copy Markdown
Contributor

@coder-agents-review coder-agents-review Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Round 36 (Netero + panel: Mafuuu, Hisoka, Bisky, Pariston, Nami, Knov). All 4 R35 findings addressed. Netero and 4 of 6 panel reviewers found no issues.

2 P3, 1 Nit.

DEREM-23 (missing stories) remains contested. Pariston: "I tried to build a case against this PR's premises and could not. The problem is correctly understood, the solution is proportional, the fix is at the right level." This needs a human decision: file a ticket for PR 9/9 stories or explicitly accept the gap.

Bisky on the test suite: "The surrogate-pair clampContent test does a char-by-char surrogate validation loop, not just a length check. The exceedsClampThreshold emoji test feeds 80 two-unit emoji to prove code-point counting works. No mocks anywhere. Real gems."


site/src/pages/AgentsPage/components/RightPanel/DebugPanel/debugPanelUtils.test.ts:1

Nit [DEREM-42] Missing explicit vitest imports. (Bisky Nit)

Sibling test files in this PR (chats.test.ts, getEffectiveTabId.test.ts) import describe, expect, it from "vitest". This file relies on globals: true. Running from the repo root errors with ReferenceError: describe is not defined. Works in CI but diverges from the PR's own pattern.

🤖

🤖 This review was automatically generated with Coder Agents.

Comment thread site/src/api/queries/chats.test.ts
@ThomasK33
Copy link
Copy Markdown
Member Author

@codex review

@chatgpt-codex-connector
Copy link
Copy Markdown

Codex Review: Didn't find any major issues. Hooray!

ℹ️ 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".

@ThomasK33
Copy link
Copy Markdown
Member Author

@codex review

@chatgpt-codex-connector
Copy link
Copy Markdown

Codex Review: Didn't find any major issues. Swish!

ℹ️ 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".

Copy link
Copy Markdown
Member Author

ThomasK33 commented Apr 22, 2026

Merge activity

  • Apr 22, 1:01 PM UTC: A user started a stack merge that includes this pull request via Graphite.
  • Apr 22, 1:26 PM UTC: Graphite rebased this pull request as part of a merge.
  • Apr 22, 1:34 PM UTC: @ThomasK33 merged this pull request with Graphite.

Change-Id: Idf1fe83a4235909fe5c143bf4afb81b2d89aebd6
Signed-off-by: Thomas Kosiewski <tk@coder.com>
`chatDebugRuns` and `chatDebugRun` previously stopped the interval when
the query entered an error state, so a single network blip would freeze
the Debug tab until a manual remount. Switch to a longer error cadence
(30s) so the panel recovers automatically when the backend comes back
without hammering a failing endpoint at the 5s foreground cadence.

Change-Id: Ie95aee44000002aebd145fddd31a1808f4456c4f
Signed-off-by: Thomas Kosiewski <tk@coder.com>
Refetch failures were blanking the run list and step details behind an
error alert even when cached data was available. Gate the full error
state on "no data" and surface refetch errors as a non-blocking warning
above the cached content.

Change-Id: Ie36141c20e2bf32ec71be1d83e3ec75c5a38d970
Signed-off-by: Thomas Kosiewski <tk@coder.com>
When cached debug-run data is an empty array and a later poll fails,
render the refresh warning banner above the empty-state copy instead of
hiding the failure behind a misleading success-like message.

Change-Id: I08e76a84fc78285eba2d66a2a0d6badace6be97c
Signed-off-by: Thomas Kosiewski <tk@coder.com>
Change-Id: I3b397710c50449c6ac344e6f817ffdd2c7c0f64b
Signed-off-by: Thomas Kosiewski <tk@coder.com>
Both components were inherited an enabled=true default from before
DebugPanel's opt-in polling fix. The parent now always passes the value
explicitly, so the default was unreachable — and also contradicted the
guidance to never default polling gates to on.

Change-Id: I0f850a18e0029ce8631196c3dee529ca41a0f349
Signed-off-by: Thomas Kosiewski <tk@coder.com>
…al set

SidebarTabView now takes the resolved `effectiveTabId` as a prop so
AgentChatPageView owns a single source of truth. Previously both
components independently called `getEffectiveTabId` with the same
inputs; if either drifted, the child's highlight would disagree with
the parent-side `TerminalPanel.isVisible` and `DebugPanel.enabled`
gating.

Also share `TERMINAL_RUN_STATUSES` between the debug-run polling query
and the badge color logic. Deriving it from `ERROR_STATUSES` plus
`completed` guarantees every error-like status also ends polling, so
the badge can never turn red while the panel keeps hammering the API.

Change-Id: Ie6dec4968b0c4370146e0677a576357e0a04de95
Signed-off-by: Thomas Kosiewski <tk@coder.com>
`SidebarTabView` only renders the desktop tab/panel when
`workspace && workspaceAgent` is true, but `getEffectiveTabId` was
resolving against the raw `desktopChatId`. When the saved tab was
"desktop" and the agent was missing/loading, selection resolved to
"desktop" with no panel rendered, leaving the right panel empty.

Change-Id: Iff1b4a544e06a36fe1edd241de804af4d1ec4527
Signed-off-by: Thomas Kosiewski <tk@coder.com>
Align with TerminalPanel's visibility prop name so both sidebar
panels gate their background work on the same-named signal.

Change-Id: I6f1b66c45e2e50f1d94d2fd56ab5f69a63d9eebf
Signed-off-by: Thomas Kosiewski <tk@coder.com>
`border-solid` on the CollapsibleContent set `border-style: solid` on all
four sides, but only `border-t` set a width. With Tailwind's preflight
reset disabled for MUI compatibility, bottom/left/right fell back to the
browser default `border-width: medium` (3px), producing visibly
asymmetric borders on every expanded step. Adding `border-0` before
`border-t` zeroes the other sides.

Change-Id: I5c9b4231fea566ca52e2aac1acc57cbed9ea1dba
Signed-off-by: Thomas Kosiewski <tk@coder.com>
The invocation row in the debug panel was a transparent button with no
surrounding chrome, so the bordered step card underneath looked
disconnected once the row expanded — the header had no visual
relationship to its children. Add a thin rounded border around the
DebugRunCard wrapper (no background, so the nested step card's subtle
fill still reads as the "content" layer) and space runs apart in
DebugRunList so they don't sit flush against each other.

Change-Id: Ic4afaadd0877a0ead37e8eb24027758043e8e62a
Signed-off-by: Thomas Kosiewski <tk@coder.com>
Add p-4 padding and space-y-3 between debug run cards so the newly
bordered wrappers no longer touch each other or the panel edges. Tighten
the trigger and expanded content's vertical padding (py-0.5 on the
button, pt-1 pb-3 on the content) so each card reads as compact rather
than chunky.

Change-Id: I03c073aa4a1d427e31d56fe6a057015df2f3b4af
Signed-off-by: Thomas Kosiewski <tk@coder.com>
- Strip em-dash/en-dash characters from debug panel source so
  `make lint/emdash` no longer fails (replaces U+2014/U+2013 in
  strings and comments with hyphens, colons, or periods).
- Move the terminal debug-run status set from the debug panel into
  `api/queries/chats.ts` so the api layer no longer imports from
  `#/pages/`, and expand it to cover every success-like status
  (`completed`, `success`, `succeeded`, `ok`) plus every error-like
  status, so polling no longer runs forever when the backend reports
  a success status the old set did not include.
- Use the run detail query's status for the header badge and spinner
  so the run flips to its final state as soon as the detail refetch
  observes the transition instead of waiting up to 5s for the list
  query to catch up.
- Replace the misleading "enable it from Settings > Behavior" empty
  state with guidance that matches reality (the tab is only rendered
  when logging is already enabled).
- Derive `sidebarTabIds` from a single `sidebarTabConfigs` source of
  truth so tab IDs and tab content can no longer drift apart when a
  new tab is added.
- Rename `errorCode` to `errorText` (it holds the displayable error
  body, not an HTTP/error code), drop a redundant manual type
  predicate now that TypeScript infers it, switch a stray
  `React.ReactNode` to the existing named `ReactNode` import, and
  use `safeJsonStringify` inside `KeyValueGrid`'s default formatter.
- Add test coverage for `safeJsonStringify`'s circular-reference
  catch branch and its function-fallback assertion, plus the plain
  string content path in `coerceStepResponse`.

Change-Id: I45e577ec7d089395caae585a74b513ee9793ce91
Signed-off-by: Thomas Kosiewski <tk@coder.com>
- Fall back to summary status when the detail query is paused so a
  collapsed card does not show stale in_progress while the run has
  finished (Codex P2).
- Sync TERMINAL_RUN_STATUSES with the debug panel's success/error
  display sets via a new pinning test (DEREM-36).
- Reflect forced-by-deployment state in the user toggle's checked
  value so the switch matches the "locked on" copy (DEREM-37).
- Rephrase Behavior section description so "that shape how the
  agent responds" does not wrongly imply debug logging shapes
  responses (DEREM-38).
- Extract the run header label clamp threshold into
  RUN_LABEL_CLAMP_CHARS to match MESSAGE_CONTENT_CLAMP_CHARS (DEREM-39).

Change-Id: Id55eadaf72b17c8ff321c38ce1b69c6027f90d2a
Signed-off-by: Thomas Kosiewski <tk@coder.com>
Inline the single-use Debug panel class-name constants, drop the stray
blank line reintroduced between useChatStore imports, and let the Debug
step error block reuse the shared getErrorMessage helper instead of a
bespoke string-vs-object narrower.

Change-Id: Ibe3af383abcd1a589aae2bee8669f84691599a01
Signed-off-by: Thomas Kosiewski <tk@coder.com>
Change-Id: Ie077eafb5bb773607f76a8c4fc1b213af58093a3
Signed-off-by: Thomas Kosiewski <tk@coder.com>
Change-Id: I29a09eca70b69914a3a169973b0e30956846d07c
Signed-off-by: Thomas Kosiewski <tk@coder.com>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants