You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
feat(chat): restyle omp's ask dialogs and forms - #472
With #460, omp's ask dialogs and forms arrive again as ui_request frames and are rendered from their arguments. This restyles them (components/ExtensionDialog.tsx, app/globals.css):
One row style for every choice: pick lists, approvals, ask options and form radios/checkboxes share one 8px-radius row (36px; 40/44px with the larger touch-target setting). Checked and pre-checked choices are highlighted; before, form rows had no highlight and pre-checked ones only showed a small ☑.
Focus:outline: none hid keyboard focus on text fields; the app's focus ring is back, around the whole row for "Other".
Fields: borders at ≥3:1 contrast on the darkest themes, a red border after a failed Submit (:user-invalid), and text fields follow the touch-target setting.
Forms: bold legends, field labels as their own block, muted intro text. "Done selecting" is a dashed, centred action row; footer hover moved from JS to CSS; approval details sit in a mono block.
Warm dark theme: adds color-scheme: dark, so native controls there are dark. This affects every native control in that theme.
Behaviour and wording are unchanged. A choice's label (text plus inline <code>, <strong>, …) is one wrapped block next to its control, so a mixed label no longer splits into columns.
Verification
Every dialog variant (select, checkbox, confirm, input, editor, approve, ask, form) screenshotted before and after at desktop and 390px width, plus light and warm-dark themes, a failed Submit and the larger touch targets. Three critique rounds with GPT 6.1 Sol; the last had no substantive findings.
ExtensionDialog*.test.mjs (5 files, 49 tests) pass; two mobile-overflow assertions ([Bug] question tool layout #234) moved from inline styles to the CSS class and rule. Typecheck and eslint clean.
Not checked: real keyboards and physical phones.
Moved from #467 (head branch now on this repository).
Summary by CodeRabbit
New Features
OMP questions and forms now use consistently sized choice rows, with clearer checked, hover, and focus states.
Text fields have visible borders and focus rings, and invalid fields are outlined in red after submission.
The “Done selecting” action has more distinct styling, with increased spacing throughout forms.
Touch-friendly sizing adapts to device settings, and native controls follow the warm dark theme.
Extension dialogs now use shared CSS classes for choices, fields, forms, and buttons. The stylesheet adds visual states, spacing, dark native controls, and touch-target sizing. Tests cover choice-label structure and updated class-based layout assertions.
Changes: Extension dialog presentation
Layer / File(s)
Summary
Apply shared classes to dialog controls components/ExtensionDialog.tsx, components/ExtensionDialog.form.test.mjs
The dialog uses shared classes for its controls and layout. Radio and checkbox labels place their text content in a dedicated wrapper.
Style dialog controls and layout app/globals.css, components/ExtensionDialog.mobile.test.mjs, CHANGELOG.md
The stylesheet defines choice, field, form, and button styling, plus responsive spacing and touch-target sizes. The Ember dark theme sets color-scheme: dark. The mobile tests and changelog reflect the class-based layout and presentation changes.
The changes restyle existing dialogs without changing approval choices, form-validation controls, or response handling. No introduced or worsened architecture-level security risk was established.
Pre-merge checks: 4
Check name
Status
Explanation
Description Check
Check skipped - CodeRabbit’s high-level summary is enabled.
Title check
The title "feat(chat): restyle omp's ask dialogs and forms" matches the main change. The PR restyles the ask dialogs and forms rendered from ui_request frames in components/ExtensionDialog.tsx and app…
Linked Issues check
Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check
Check skipped because no linked issues were found for this pull request.
Full details: Title check
Explanation
The title "feat(chat): restyle omp's ask dialogs and forms" matches the main change. The PR restyles the ask dialogs and forms rendered from ui_request frames in components/ExtensionDialog.tsx and app/globals.css, including choice rows, field borders, focus rings, invalid-submit styling, and touch-target sizing. The title is short, specific, and follows the conventional commit style. It does not cover every detail, which is expected.
Finishing Touches
Generate unit tests (beta)
Commit to this branch
Create a new PR
Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts
Warning
Some tools did not complete. Review the errors below.
ast-grep (0.51.1)
graphify-out/graph.json
ast-grep skipped this file: it is too large to scan (9845120 bytes)
Checkov (3.3.30)
graphify-out/graph.json
Checkov skipped this file: it is too large to scan (9845120 bytes)
Review coverage is incomplete: 1 file could not be fully reviewed. Findings from completed review steps are included; see review info for details.
This review exceeded your plan’s limits and used usage-based reviews—free during trial, billed after paid activation unless disabled. Manage usage-based reviews.
Recent review info
Run configuration
Source mode: Auto
Repository: Unavailable
Branch: Unavailable
File: No configuration file from this repository applied
Commit: Unavailable
Layers: defaults
Review profile: CHILL
Plan: Advanced
Run ID: 2a8843f9-5ce4-4df0-bb48-6ebeecf2914f
Commits
Reviewing files that changed from the base of the PR and between 2c68c3a and 06e6376.
Files selected for processing: 6
CHANGELOG.md
app/globals.css
components/ExtensionDialog.form.test.mjs
components/ExtensionDialog.mobile.test.mjs
components/ExtensionDialog.tsx
graphify-out/graph.json
Files not reviewed because the changes were too large to process: 1
graphify-out/graph.json
Limit details: You’ve used all 10 included reviews currently available.
Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.
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
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
With #460, omp's
askdialogs and forms arrive again asui_requestframes and are rendered from their arguments. This restyles them (components/ExtensionDialog.tsx,app/globals.css):outline: nonehid keyboard focus on text fields; the app's focus ring is back, around the whole row for "Other".:user-invalid), and text fields follow the touch-target setting.color-scheme: dark, so native controls there are dark. This affects every native control in that theme.Behaviour and wording are unchanged. A choice's label (text plus inline
<code>,<strong>, …) is one wrapped block next to its control, so a mixed label no longer splits into columns.Verification
ExtensionDialog*.test.mjs(5 files, 49 tests) pass; two mobile-overflow assertions ([Bug] question tool layout #234) moved from inline styles to the CSS class and rule. Typecheck and eslint clean.Moved from #467 (head branch now on this repository).
Summary by CodeRabbit