feat(playground): add url-encoded body mode

[dan-lee]

Closes #1016.

Adds a URL-encoded body mode to the playground, alongside Multipart. Fields are sent as application/x-www-form-urlencoded via URLSearchParams. Mostly for OAuth token endpoints. Picking a urlencoded example pre-fills the rows and flips the dropdown.

Cosmo Cargo gets a POST /oauth/token endpoint to try it on.

See preview in Playground

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
zudoku-cosmo-cargo	Ready	Preview, Comment	May 11, 2026 10:01am
zudoku-dev	Ready	Preview, Comment	May 11, 2026 10:01am

[github-actions]

Coverage Report

Status	Category	Percentage	Covered / Total
🔵	Lines	62.31% ⬆️ +0.19%	3438 / 5517
🔵	Statements	61.25% ⬆️ +0.15%	3636 / 5936
🔵	Functions	51.81% ⬆️ +0.27%	814 / 1571
🔵	Branches	50.7% ⬆️ +0.20%	2367 / 4668

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
packages/zudoku/src/lib/plugins/openapi/playground/buildRequestBody.ts	100%	92.85%	100%	100%
packages/zudoku/src/lib/plugins/openapi/util/formatRequestBody.ts	67.18%	58.53%	66.66%	73.46%	6, 9, 20, 31-34, 38-55

Generated in workflow #5309 for commit c65781d by the Vitest Coverage Report Action

[github-actions]

Preview build of published Zudoku package for commit c65781d.

See the deployment at: https://d27d954e.cosmocargo-public-package.pages.dev

Note

This is a preview of the Cosmo Cargo example using the Zudoku package published to a local registry to ensure it'll be working when published to the public NPM registry.

Last updated: 2026-05-11T10:05:09.375Z

[Copilot]

Pull request overview

Adds first-class support for application/x-www-form-urlencoded request bodies in the OpenAPI Playground to better support OAuth token endpoints, alongside existing Text/File/Multipart modes.

Changes:

• Introduces URL-encoded body mode with a key/value grid UI and example seeding for application/x-www-form-urlencoded.
• Extracts request-body construction into a dedicated buildRequestBody helper with a discriminated ContentTypeAction result.
• Adds URL-encoding helpers (rowsToUrlEncoded, fromUrlEncoded, etc.) with unit tests, plus a Cosmo Cargo /oauth/token endpoint for manual validation.

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/zudoku/src/lib/plugins/openapi/util/formatRequestBody.ts	Adds URL-encoding/decoding helpers and example-to-row conversion.
packages/zudoku/src/lib/plugins/openapi/util/formatRequestBody.test.ts	Unit tests for URL-encoding helpers.
packages/zudoku/src/lib/plugins/openapi/playground/request-panel/UrlEncodedField.tsx	Adds UI row component for URL-encoded key/value fields.
packages/zudoku/src/lib/plugins/openapi/playground/Playground.tsx	Integrates buildRequestBody, adds new urlencoded mode, and updates request preview handling.
packages/zudoku/src/lib/plugins/openapi/playground/createUrl.test.ts	Updates test fixture to include urlencodedFormFields.
packages/zudoku/src/lib/plugins/openapi/playground/buildRequestBody.ts	New helper to build request body and specify Content-Type actions per mode.
packages/zudoku/src/lib/plugins/openapi/playground/buildRequestBody.test.ts	Unit tests for buildRequestBody across modes.
packages/zudoku/src/lib/plugins/openapi/playground/BodyPanel.tsx	Adds URL-encoded mode selection and “Use Example” seeding for form-urlencoded examples.
examples/cosmo-cargo/schema/shipments.json	Adds /oauth/token endpoint using application/x-www-form-urlencoded for manual Playground testing.

Comments suppressed due to low confidence (1)

packages/zudoku/src/lib/plugins/openapi/playground/BodyPanel.tsx:236

• Example selection replaces/sets a Content-Type header using a case-sensitive filter (h.name !== "Content-Type"). Elsewhere in this component you treat header names case-insensitively (e.g., h.name.toLowerCase() !== "content-type"), so this can leave duplicate Content-Type entries if the existing header casing differs. Filter case-insensitively here as well.

                  setValue("headers", [
                    ...headers.filter((h) => h.name !== "Content-Type"),
                    {
                      name: "Content-Type",
                      value: mediaType,
                      active: true,
                    },
                  ]);

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[dan-lee]

@copilot resolve the merge conflicts in this pull request

[Copilot]

@copilot resolve the merge conflicts in this pull request

Resolved by merging origin/main into this branch and fixing the conflict in packages/zudoku/src/lib/plugins/openapi/util/formatRequestBody.ts in commit c65781d. No UI changes were made in this merge-conflict fix, so there’s no screenshot to share.