fix(web): reveal full provider model names on hover

[vdoshi96]

Problem

In Settings > Providers, long model names and IDs are truncated without a way to reveal their full text. OpenCode models with similar prefixes become difficult to distinguish. Fixes #18342.

Change

This is a rebased continuation of @ilyaliao’s #16522. All implementation credit belongs to IlyaL. The three original commits retain their authorship, original co-author credit, and source commit references. ProviderModelsSection.tsx is byte-for-byte identical to the original PR at e694b5222.

The original fix gives model names priority over IDs and shows the full name and ID in the existing tooltip on hover or keyboard focus. The custom-model label stays in its column. The shared web component also serves desktop.

This update brings those commits onto 3443f02e5 from upstream main. It includes the already-merged #21274, which fixes the missing react-test-renderer imports responsible for the original PR’s failing Build and Typecheck and Test Web jobs. No unrelated fixes or dependencies are added to this PR.

Scope and approval

This addresses the same focused UI defect as #16522 and the maintainer-triaged report. The diff remains one component, with no new setting, contract, or product default. The original PR remains open; this submission credits its work and provides an updated, verified branch for review.

Verification

On macOS, using an isolated development database and the real web app in Chrome with OpenCode 2.0.32:

• Before: a DeepSeek model name occupied 92px for 147px of text, and holding the pointer over it revealed no tooltip.
• After: hover reveals the full model name and ID. Tab from the favorite button focuses the name, shows a focus outline, and opens the same tooltip. Escape dismisses it.
• At 360px viewport width, the name is still clipped to 68px, but the tooltip reveals the full text and stays within the viewport.
• vp test run src/components/preview/previewSessionSync.browser.test.ts src/components/settings/DeviceToolUpdate.browser.test.tsx src/components/settings/ProviderModelsSection.test.ts from apps/web: 10 tests passed across 3 files, including both formerly failing suites.
• Web typecheck, web production build, targeted lint, formatting, and git diff --check: passed. Full repository CI is left to GitHub.

The desktop Electron shell and native mobile app were not tested. The original limitation remains: Base UI tooltips do not open on touch.

Before	After

Keyboard focus · Narrow viewport · Hover and keyboard recording

Original implementation: @ilyaliao, using Claude Opus 5.5 in Claude Code. Branch update and fresh verification: GPT-6 Astra in Codex, through T3 Code.

[macroscopeapp]

Approvability

Verdict: Approved at 7167fba

Macroscope's review found this PR approvable — This is a small, isolated provider-settings UI fix that reveals truncated model names and slugs through the existing tooltip system while preserving the current layout and data behavior. It changes no product defaults, APIs, configuration, or static-analysis settings.

Notes:

• All code in this push has already been reviewed. Approvability was decided on eligibility alone.

^{You can add or adjust custom eligibility rules. Learn more.}

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Path: .coderabbit.config.ts
• Review profile: CHILL
• Plan: Advanced
• Run ID: 95351a1e-8763-4a44-9eac-bac2a0157370

📥 Commits

Reviewing files that changed from the base of the PR and between 3443f02 and 7167fba.

📒 Files selected for processing: 1

• apps/web/src/components/settings/ProviderModelsSection.tsx

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 9 remain after this review.

📝 Walkthrough

Provider model rows now show the full model name and optional slug in a focusable tooltip. The row layout keeps the name and custom label from shrinking, while the slug truncates first.

Changes: Provider model text visibility

Layer / File(s)	Summary
Tooltip and text truncation apps/web/src/components/settings/ProviderModelsSection.tsx	The model name and optional slug appear in a focusable tooltip with their full values. The name and custom label do not shrink, and the slug truncates first.

Priority: ⬇️ Low

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

Change: Bug fix · Severity of issue fixed: Low

Suggested reviewers: juliusmarminge

Merge Risk: ⚪ Minimal · up to 7167f

The provider model row reveals full values on keyboard focus while prioritizing the name in constrained layouts. No merge-blocking issue was identified; the change is ready for normal checks.

Pre-merge checks: 4

Check name	Status	Explanation
Title check		The title clearly and concisely describes the main UI fix: revealing full provider model names on hover.
Description check		The description includes the problem, change, scope and approval rationale, focused verification results, UI evidence, limitations, and agent attribution. It satisfies the required template.
Linked Issues check		The change satisfies the coding requirement in #18342. ProviderModelsSection.tsx wraps the model name and slug in a focusable tooltip trigger. The tooltip displays the complete name and slug. The la…
Out of Scope Changes check		The whole-PR diff changes only the provider model row in apps/web/src/components/settings/ProviderModelsSection.tsx. The changes directly support disclosure of truncated model names and IDs and pres…

Full details: Linked Issues check

Explanation

The change satisfies the coding requirement in #18342. ProviderModelsSection.tsx wraps the model name and slug in a focusable tooltip trigger. The tooltip displays the complete name and slug. The layout gives the name priority, truncates the slug first, and keeps the custom label in its column. The PR reports passing targeted automated tests, typecheck, build, lint, formatting, and diff checks.

Full details: Out of Scope Changes check

Explanation

The whole-PR diff changes only the provider model row in apps/web/src/components/settings/ProviderModelsSection.tsx. The changes directly support disclosure of truncated model names and IDs and preserve the custom-model layout. No unrelated product behavior, dependency, contract, or setting changes are present.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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

[juliusmarminge]

Note

Grok responding on behalf of Julius.

Thanks for carrying this forward and for the careful verification. The same fix from @ilyaliao's original commits just landed on main through #16522 (maintainer takeover), and #18342 is closed as fixed, so I'm closing this one as superseded. It'll be in the next nightly.