feat(devtools-ui): add Payload tab to inspector panel

[ryanbas21]

Summary

• Extracts request/response bodies from the Headers tab into a dedicated Payload tab (matching Chrome DevTools naming)
• The tab only appears when a network event has body data (requestBody or responseBody)
• Each body section includes a copy-to-clipboard button reusing existing CopyToClipboard msg and fv-copy-btn styling
• Headers tab now shows only URL, method, and header data

Files changed

File	Change
Types.elm	Added PayloadTab variant to InspectorTab union
Inspector.elm	Conditional tab button, payload content view with copy buttons, removed bodies from HeadersTab
Update.elm	PayloadTab fallback in SelectEvent — reverts to HeadersTab when no bodies exist
panel.css	.payload-section and .payload-header styles

Test plan

• cd packages/devtools-ui && npx elm make src/Main.elm --output=/dev/null — compiles ✅
• Load extension, select a network request with body data → "Payload" tab appears
• Select a request without body data → no "Payload" tab
• Click copy button on request/response body → clipboard contains formatted JSON
• Headers tab no longer shows body content

🤖 Generated with Claude Code

[pullfrog]

TL;DR — Extracts request/response body display from the Headers tab into a dedicated Payload tab, matching Chrome DevTools naming. The tab appears only when body data is present and includes copy-to-clipboard buttons.

Key changes

• Add PayloadTab variant to the InspectorTab union type
• Conditional Payload tab button — inserted between Headers and Cookies, only shown when the network event has requestBody or responseBody
• Move body display to Payload tab with viewPayloadSection helper providing a section header and copy button
• Tab fallback in SelectEvent handler — reverts to HeadersTab when the selected event lacks body data
• CSS — .payload-section and .payload-header layout styles

_{Summary ｜ 4 files ｜ 1 commit ｜ base: main ← feat/inspector-payload-tab}

The logic is sound and the implementation correctly mirrors existing conditional-tab patterns (Collectors, Session, Config, OIDC). The three suggestions below are UX polish — the core functionality works.

---

Note: 1 inline comment(s) dropped because they did not anchor to lines inside the PR diff:

• packages/devtools-ui/src/src/Inspector.elm:164-189 (RIGHT) — start_line 164 (RIGHT) is not inside a diff hunk

  ^{｜ Fix all ➔ ｜ Fix 👍s ➔ ｜ View workflow run ｜ 𝕏}

[pullfrog]

Addressed both review comments on PR #47. Changes pushed to feat/inspector-payload-tab:

1. Payload tab positioning — moved from mid-bar (between Headers/Cookies) to the right-edge conditional group (after SdkStateTab, before CollectorsTab) for consistent tab-bar behavior.
2. Label deduplication — JsonTree.view now receives "" as label since the .sect-hdr already renders it.

Elm compilation passes, both threads resolved.

Task list (7/7 completed)

• Checkout PR feat(devtools-ui): add Payload tab to inspector panel #47 branch
• Fetch review comments for review #4283857131
• Address Thread 1: Move Payload tab to right-edge conditional group
• Address Thread 2: Remove duplicate label in viewPayloadSection
• Quality check (compile Elm + review diff), commit, and push
• Reply to review comments and resolve threads
• Report progress

  ^{｜ View workflow run ｜ via Pullfrog ｜ 𝕏}

[ryanbas21]

@pullfrog approve or request changes.

[pullfrog]

No new issues found.

TL;DR — Extracts request/response bodies from the Headers tab into a dedicated Payload tab (matching Chrome DevTools naming). The tab only appears when the network event has body data. Each body section gains a copy-to-clipboard button reusing the existing CopyToClipboard msg and fv-copy-btn styling.

Key changes

• Add PayloadTab variant to InspectorTab — new union variant in Types.elm
• Conditional Payload tab button — appears only for Network events with requestBody or responseBody, placed after the fixed tabs (Headers, Cookies, CORS, SDK State) and before conditional tabs (Collectors, Session, etc.)
• Payload content view — new viewPayloadSection helper renders a labeled section with a JSON copy button and JsonTree display; replaces the old body sections that were inline in HeadersTab
• Tab fallback on event switch — SelectEvent falls back to HeadersTab when switching to an event without body data while PayloadTab is active, matching the pattern used by OidcTab, ConfigTab, and other conditional tabs
• CSS for .payload-section and .payload-header — flexbox layout with space-between alignment for the header row

_{Summary ｜ 4 files ｜ 2 commits ｜ base: main ← feat/inspector-payload-tab}

Types.elm · Inspector.elm · Update.elm · panel.css

  ^{｜ View workflow run ｜ 𝕏}