Skip to content

Improve Resource UX: params ordering, collapsible optionals, metadata defaults#721

Open
pannous wants to merge 3 commits intoMerit-Systems:mainfrom
pannous:feat/improve-resource-ux
Open

Improve Resource UX: params ordering, collapsible optionals, metadata defaults#721
pannous wants to merge 3 commits intoMerit-Systems:mainfrom
pannous:feat/improve-resource-ux

Conversation

@pannous
Copy link
Copy Markdown

@pannous pannous commented Mar 15, 2026

Closes #107

Summary

Improves the resource parameter UX on x402scan.com with three changes:

  • Required parameters shown at top: Parameters are split by required/optional status, with required fields rendered first using clear section headers when multiple parameter types exist
  • Optional parameters collapsible by default: Optional parameters are wrapped in a Collapsible component (closed by default) showing a count badge, reducing visual noise for resources with many optional params
  • Resource metadata defaults surfaced in forms: ResourceRequestMetadata (headers, query params, body defaults) is now included in the public listOriginsWithResources query and flows through OriginResources → ResourceExecutor → Form. Default values pre-populate form fields and appear as placeholder hints, making resources like the Echo x402 AI router more easily accessible

Changes

File Change
services/db/resources/origin.ts Added requestMetadata: true to Prisma include
origin-resources.tsx Pass requestMetadata to ResourceExecutor
executor/index.tsx Accept and forward requestMetadata prop
executor/form/index.tsx Extract defaults from metadata, pre-populate state, pass to sections
executor/form/field-section.tsx Accept defaults prop, pass to field inputs
executor/form/field-input.tsx Accept placeholder prop for metadata-sourced hints

Test plan

  • Verify required parameters appear above optional ones on resource pages
  • Verify optional parameters section is collapsed by default
  • Verify resources with ResourceRequestMetadata have pre-populated form defaults
  • Verify resources without metadata still render correctly (no regressions)
  • Lint passes across all packages (verified locally: 22/22 tasks pass)

Show required parameters at the top and collapse optional parameters
by default, making it easier to see what's needed at a glance.
Copilot AI review requested due to automatic review settings March 15, 2026 11:02
@vercel
Copy link
Copy Markdown
Contributor

vercel bot commented Mar 15, 2026

@pannous is attempting to deploy a commit to the Merit Systems Team on Vercel.

A member of the Team first needs to authorize it.

Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

This PR updates the resource executor form UI to improve parameter usability by separating required vs optional parameters and collapsing optional parameters by default.

Changes:

  • Split header/query/body fields into required vs optional groups and render required fields first.
  • Add a Radix Collapsible section for optional parameters with an open/closed chevron indicator.
  • Conditionally render section titles to reduce visual noise (with some logic differences vs the PR description).

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

You can also share your feedback on Copilot code review. Take the survey.

Comment on lines +243 to +262
<FieldSection
fields={headerFields}
fields={headerSplit.required}
values={headerValues}
onChange={handleHeaderChange}
prefix="header"
title="Header Parameters"
title={headerSplit.required.length > 0 && allRequired.length > 1 ? "Required Header Parameters" : undefined}
/>
<FieldSection
fields={queryFields}
fields={querySplit.required}
values={queryValues}
onChange={handleQueryChange}
prefix="query"
title={querySplit.required.length > 0 && allRequired.length > 1 ? "Required Query Parameters" : undefined}
/>
<FieldSection
fields={bodyFields}
fields={bodySplit.required}
values={bodyValues}
onChange={handleBodyChange}
prefix="body"
title="Body Parameters"
title={bodySplit.required.length > 0 && allRequired.length > 1 ? "Required Body Parameters" : undefined}
Integrate ResourceRequestMetadata into the public resource display flow
so that metadata defaults (headers, query params, body) pre-populate
form fields and show as placeholder hints.
@pannous pannous changed the title feat: improve resource parameter UX Improve Resource UX: params ordering, collapsible optionals, metadata defaults Mar 15, 2026
- Section title logic now uses requiredCategoryCount (how many categories
  have required fields) instead of total required field count, so titles
  only appear when required fields span multiple categories
- Add useEffect hooks to sync form state when requestMetadata prop changes,
  fixing the React bug where useState initializers only run on mount
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.

Improve Resource UX

2 participants