feat(app): composer and model selector polish#223
Merged
Conversation
Replace 25 developer-oriented prompt.example.N entries with non-technical workbench scenarios covering email/writing, spreadsheets/data, PDF/documents, text cleanup, and summary/translation. zh and en pools are locale-native, not mirror translations. Also simplify the placeholder shell from "Ask anything" / "随便问点什么" to "Try" / "试试" so the example prompt leads the glance. Parity test continues to pass (key count preserved). Closes #176
Add plain-text "图片"/"Image" Tag next to free/latest in the model selector list item so image-capable models are scannable at a glance. Position: free -> Image -> latest, capped at 2 tags per row with priority free > Image > latest. Uses existing modelSupportsInput helper for detection (same source of truth as attachment routing). Layout: row uses text-left so name does not inherit the list-item button's text-align: center; span has min-w-0 truncate; tags have shrink-0 and rounded-full to stay pill-shaped even on narrow rows. Closes #218
Button base has outline: none, and ghost variant only changed background-color on :focus-visible (no border, shadow, or outline). So composer model chip, attachment "+" button, and every ghost button across the app lacked a visible keyboard focus ring — keyboard users tabbing through the composer lost track of focus. Native <button> elements (variant chip, workspace chip, skills pills) already render the browser default blue outline. Restore outline: auto on ghost :focus-visible so every @opencode-ai/ui Button ghost renders the same browser default focus ring as native buttons — consistent a11y across the app with a single CSS line. The original issue described "workspace chip" but on-device verification showed workspace chip already had native blue outline; the actually missing ring was on model chip and attachment + button (both ghost Buttons). Fixing the shared ghost variant covers both. Closes #215
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Plus Run ID: 📒 Files selected for processing (5)
📜 Recent review details⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (12)
🧰 Additional context used📓 Path-based instructions (2)packages/app/**/*.{ts,tsx,js,jsx}📄 CodeRabbit inference engine (packages/app/AGENTS.md)
Files:
packages/app/e2e/**/*.spec.ts📄 CodeRabbit inference engine (packages/app/e2e/AGENTS.md)
Files:
🧠 Learnings (19)📓 Common learnings📚 Learning: 2026-04-23T17:02:35.873ZApplied to files:
📚 Learning: 2026-04-20T14:36:04.113ZApplied to files:
📚 Learning: 2026-04-24T05:48:36.205ZApplied to files:
📚 Learning: 2026-04-20T14:36:04.113ZApplied to files:
📚 Learning: 2026-04-20T14:36:04.113ZApplied to files:
📚 Learning: 2026-04-20T14:36:04.113ZApplied to files:
📚 Learning: 2026-04-20T14:36:04.113ZApplied to files:
📚 Learning: 2026-04-20T14:36:04.113ZApplied to files:
📚 Learning: 2026-04-20T14:36:04.113ZApplied to files:
📚 Learning: 2026-04-20T14:36:04.113ZApplied to files:
📚 Learning: 2026-04-24T03:51:54.050ZApplied to files:
📚 Learning: 2026-04-23T07:23:23.849ZApplied to files:
📚 Learning: 2026-04-23T15:25:27.182ZApplied to files:
📚 Learning: 2026-04-24T00:02:50.599ZApplied to files:
📚 Learning: 2026-04-23T15:10:21.635ZApplied to files:
📚 Learning: 2026-04-24T05:48:36.205ZApplied to files:
📚 Learning: 2026-04-24T05:39:56.086ZApplied to files:
📚 Learning: 2026-04-22T05:32:29.012ZApplied to files:
🔇 Additional comments (6)
📝 WalkthroughWalkthroughThe PR implements three features across the app: adds visible image-capability tags to the model selector list, replaces home composer placeholder examples from code-centric to document-oriented tasks, updates placeholder text phrasing, and adds focus-visible ring styling for ghost buttons. An e2e test validates image tag visibility in the model picker. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
There was a problem hiding this comment.
Code Review
This pull request adds an 'image' tag to the model selection dialog, updates prompt placeholders and examples to focus on general productivity tasks, and includes a new E2E test for model visibility. It also improves button focus styles. Feedback was provided to correct the Tailwind CSS important modifier syntax in the model selection component, as the modifier should be a prefix rather than a suffix.
7 tasks
This was referenced May 12, 2026
13 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Three small polish commits bundled into one PR:
图片/ImageTag to the model picker list item so image-capable models are scannable at a glance. Position:free -> Image -> latest, capped at 2 tags with priorityfree > Image > latest. Uses the existingmodelSupportsInputhelper fromattachment-routing.ts. Layout:text-left+min-w-0 truncateon name span,shrink-0 rounded-full!on Tags so pills stay pill-shaped on narrow rows.@opencode-ai/uiButton ghost variant hadoutline: nonefrom base with only a hover-like background on:focus-visible— so model chip,+attachment, and every ghost button across the app lacked a visible keyboard focus ring. Restoreoutline: auto+outline-color: -webkit-focus-ring-coloron ghost:focus-visible, so composer chips now render the same system blue ring as native buttons (variant chip, workspace chip, skills pills).Why
Related Issue
Closes #176
Closes #218
Closes #215
How To Verify
bun --cwd packages/app typecheck bun --cwd packages/app test:e2e:local -- e2e/models/models-visibility.spec.ts --grep "surfaces image-capable tag" bun --cwd packages/app test:e2e:local -- e2e/app/a11y-chip.spec.tsManual (Electron via
bun run dev:desktop):Try.../试试...prefix applied图片/Imagetag shows on image-capable models; text-only models do not; Tag is pill-shaped, no horizontal scroll+→ model chip → variant chip → workspace chip → send): all render consistent blue focus ring; also matches skills pills on homeScreenshots or Recordings
(to add after push — focus ring before/after + model picker with Image tag)
Checklist
dev, and my PR title and commit messages use Conventional Commits in EnglishSummary by CodeRabbit
New Features
Style