feat(ui): expandable details on model mapping card

[steebchen]

Summary

Follow-up to #3028/#3030: surface the per-mapping reasoning effort values and supported parameters on the public model detail pages, without cluttering the card by default.

• The provider mapping detail card (ProviderSection) gains a "Show details" section, collapsed by default, mirroring the card's existing chevron expand/collapse pattern. When expanded it shows:
  • Reasoning Efforts — the mapping's declared reasoningEfforts values as badges, in ascending order (e.g. none → max for gpt-5.6-sol).
  • Supported Parameters — the mapping's supportedParameters as badges.
• The toggle only renders when the mapping actually declares at least one of the two, so cards without this metadata are unchanged.
• Plumbing: added reasoningEfforts to the UI's ApiModelProviderMapping type and to adaptProviderMapping (the model-definition → UI adapter used by the detail pages); supportedParameters was already plumbed through.

Testing

• Verified against a locally running UI build on /models/gpt-5.6-sol: card renders identically to before when collapsed (just the "Show details" toggle), and expanding shows the Reasoning Efforts (none, low, medium, high, xhigh, max) and Supported Parameters badges; collapsing hides them again.
• turbo run build --filter=ui passes.

🤖 Generated with Claude Code

https://claude.ai/code/session_01FPnpiisz8mM8nRGyVpWmUh

---

Generated by Claude Code

Summary by CodeRabbit

• New Features
  • Model provider mappings now include supported reasoning effort levels.
  • Added expandable mapping details to model cards, displaying supported reasoning efforts and parameters when available.
  • Added “Show details” and “Hide details” controls for reviewing model capabilities.

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[coderabbitai]

Caution

Review failed

Failed to post review comments.

GitHub was unavailable or timed out while CodeRabbit was posting the review. Please request a new review later if the pull request still needs one. This happened while posting 2 inline comments. Use @coderabbitai full review to retry the review.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: dd6ace4b-a9e4-4b56-9e95-4260b6f90fcf

📥 Commits

Reviewing files that changed from the base of the PR and between 7af25f5 and 496b75e.

📒 Files selected for processing (3)

• apps/ui/src/components/models/adapt-model.ts
• apps/ui/src/components/models/model-card.tsx
• apps/ui/src/lib/fetch-models.ts

⏰ Context from checks skipped due to timeout. (4)

• GitHub Check: autofix
• GitHub Check: build / run
• GitHub Check: lint / run
• GitHub Check: test / run

🧰 Additional context used

📓 Path-based instructions (3)

apps/{ui,playground,code}/src/**/*.ts

📄 CodeRabbit inference engine (AGENTS.md)

apps/{ui,playground,code}/src/**/*.ts: In frontend apps, always use the generated typed API client (useFetchClient() or useApi() from @/lib/fetch-client) to call the Hono API; never use raw fetch() for API calls.
Do not use useEffect for data fetching in the UI; use TanStack Query for all data fetching and state management.
For non-hook contexts in frontend code, accept the fetch client as a parameter from the calling component.

Files:

• apps/ui/src/lib/fetch-models.ts
• apps/ui/src/components/models/adapt-model.ts

apps/**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

apps/**/*.{ts,tsx}: Use top-level import only; never use require or dynamic imports.
Use cookies for user-settings that are not stored in the database so SSR works.

Files:

• apps/ui/src/lib/fetch-models.ts
• apps/ui/src/components/models/adapt-model.ts
• apps/ui/src/components/models/model-card.tsx

apps/{ui,playground,code}/src/**/*.tsx

📄 CodeRabbit inference engine (AGENTS.md)

In frontend apps, prefer next/link for internal navigation and next/navigation's router for programmatic navigation.

Files:

• apps/ui/src/components/models/model-card.tsx

🧠 Learnings (1)

📚 Learning: 2026-06-02T00:41:34.184Z

Learnt from: smakosh
Repo: theopenco/llmgateway PR: 2473
File: apps/ui/src/components/landing/navbar.tsx:72-72
Timestamp: 2026-06-02T00:41:34.184Z
Learning: In the llmgateway repo (apps/ui) using Tailwind CSS v4, use Tailwind’s official v4 gradient-direction class naming: `bg-linear-to-*` (e.g., `bg-linear-to-br`) for linear gradients. Do not flag `bg-linear-to-*` as a typo/invalid class. If you see `bg-gradient-to-*`, treat it as a deprecated alias that still works in v4 (so it shouldn’t be reported as invalid).

Applied to files:

• apps/ui/src/lib/fetch-models.ts
• apps/ui/src/components/models/adapt-model.ts
• apps/ui/src/components/models/model-card.tsx

Walkthrough

The UI provider model now carries optional reasoning-effort capabilities. Model cards expose available reasoning efforts and supported parameters through a collapsed details section.

Changes

Provider capability details

Layer / File(s)	Summary
Provider capability contract and mapping apps/ui/src/lib/fetch-models.ts, apps/ui/src/components/models/adapt-model.ts	ApiProvider and adapted provider mappings now include optional reasoning-effort values or null.
Mapping details display apps/ui/src/components/models/model-card.tsx	ProviderSection adds a collapsed toggle and outline-badge cards for reasoning efforts and supported parameters when available.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

• theopenco/llmgateway#2985: Adds provider/model reasoning support through the Responses API, including reasoning effort handling.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly matches the main change: expandable details on the model mapping card in the UI.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch claude/mapping-card-effort-params-320rl2

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}