Repository navigation
UI Consistency: 1 issue found
apps/web/src/components/settings/ConnectionsSettings.tsx — EnvironmentLabelControl renders the environment name in a plain <span>, so SavedBackendListRow no longer emits the <h3 className="text-sm font-medium text-foreground"> it previously used. Sibling rows on the same page (pairing link, client session, SSH target) and SettingsRow all still title themselves with an h3, so the remote-environments list drops out of the heading outline. Suggested fix: expose an optional value element prop (default span) and pass h3 from the list row.
Previously flagged items are resolved on this head commit: the native window.confirm is now the shared AlertDialog, the input uses the named size="compact" contract, Escape is stopped from bubbling out of the rename field, the trigger uses size="icon-micro"/variant="ghost-muted" so the 20px title line no longer grows, and the duplicated label rendering in the row title is gone.
Details
Note
Your check run agent prompt is: .macroscope/check-run-agents/ui-consistency.md
More information about how Check Run Agents work can be found in our Help Center.
Scope reviewed (include patterns apps/web/src/**/*.{ts,tsx,css}): apps/web/src/components/settings/ConnectionsSettings.tsx and apps/web/src/state/environments.ts.
Checks performed:
- Primitive usage:
Buttonsizesicon-micro/icon-xsand variantghost-mutedexist incomponents/ui/button.tsx;Inputsupportssize="compact"(wrapper radius + inner height both handled) incomponents/ui/input.tsx. No locally reconstructed primitives, no call-site overrides of primitive height/radius/focus ring (onlyw-48width, which is contextual and correct). - Form semantics:
Buttondefaultstype="button"viamergeProps, and the explicittype="submit"on the save action overrides it correctly; the rename<form>is not nested inside another form in this tree. - Dialog consistency: the duplicate-name confirmation matches the other confirmations in this file (
AlertDialog/AlertDialogPopup/AlertDialogFooterwithAlertDialogClose render={<Button variant="outline" />}). - Layout:
SettingsRow's control slot isflex items-center gap-2, and the list row title line isflex min-h-5 items-center gap-1.5; theicon-microtrigger issize-5, so the idle row height is unchanged. Height growth occurs only while the inline editor is open, matching the existing inline-rename patterns. - Settings search:
SETTINGS_SEARCH_ITEMSis a static catalog anduseSettingsSearchTargetresolves anchors byid, so the heading change does not affect search — the impact is limited to heading-structure accessibility. - Hooks ordering in
EnvironmentLabelControlis safe (all hooks run before the!canRename && !showValueearly return).
🔍 Agent activity — 1 tool call
💭 I'm checking the current state of ConnectionsSettings.tsx against the previous findings from commit 3b5eea8, where the diff showed the compact size and stopPropagation handling were already addressed, but there was a flagged issue with duplicate label rendering in the h3 element that I need to verify in the current code. I need to check the row usage in those specific line ranges and verify whether certain primitive variants like
icon-micro,icon-xs,ghost-muted, andsize="compact"have been added to the Button and Input components, though the diff I'm looking at only shows the Connection scope without changes to those core UI files. I'm noticing thatEnvironmentLabelControlnow renders a<span>instead of an<h3>, which could be a semantic regression if other similar rows in the file still use heading elements. Let me check whether this represents an accessibility or consistency issue by looking at how sibling rows are structured. The grep approach with escaped HTML isn't working, so I'll switch to using fixed strings instead. I'm noticing the saved environment row is now rendering as a plain span instead of an h3 heading like its sibling rows, which breaks the semantic consistency within the list. The text styling classes remain the same, but dropping the heading element means it no longer matches the structure of the other rows in the same group. This is a legitimate accessibility regression—screen readers will no longer announce it as a heading—though it's a relatively small issue. I could fix it by adding a configurable element prop to EnvironmentLabelControl, or by wrapping the value differently. Let me check the other SettingsRow call sites and see if there are other potential issues to flag. Now I'm verifying the hook ordering—the early return happens after all hooks are declared, so that's fine. I should also check for stale closure issues when the label changes externally, nested form elements (which would be invalid HTML), and whether the button's loading state is handled correctly. TheButtoncomponent correctly defaults totype="button", and since props override the defaults through mergeProps, explicitly passingtype="submit"works as expected. Now I'm checking if there's a<form>element in ConnectionsSettings — my grep search came up empty, but I realize I accidentally searched for the HTML-escaped version<forminstead of the actual tag, so let me search again with the correct pattern. I should also verify whether the settings panel is wrapped in a form somewhere, check how the SettingsRow component uses the control slot at those line ranges, and look at how the control container is laid out — it's probably using flexbox with centered alignment since it contains a span and button fragment. I need to check how thecontrolprop gets rendered within the SettingsRow component to understand the layout structure. Looking at the control container styling and checking if other SettingsRow controls follow a similar pattern for displaying values with that specific text styling. I need to check if the Input component has asizeprop that supports a "compact" value. I'm spotting an accessibility issue where the saved environments row is using a<span>for the heading instead of<h3>like the other rows, which breaks semantic consistency. I could fix this by adding a prop to EnvironmentLabelControl to control the heading level, or by adjusting how the row renders its label when not in edit mode. The layout shift during editing is transient—the input is taller than the label line, so the row expands while you're editing, but that seems acceptable since it's temporary. The other details check out: the value state resets properly on edit entry, editing closes after a successful save, and the aria-label is correct. Now I'm checking whether the form nesting is valid—the SettingsRow renders a form, but there shouldn't be any ancestor forms since this is just in the settings page, not inside a dialog form. The Spinner inside the button follows the convention elsewhere, and the duplicate-name dialog only appears when both editing and canRename are true, with a useEffect that clears it if canRename flips. The Input autoFocus is fine. Let me look at how AlertDialog is used elsewhere in this file to check the cancel button variant consistency. The AlertDialog is correctly positioned as a sibling in the fragment rather than nested inside the form, and it properly portals out from within the row title container. Now I need to check the third call site around line 3562 to verify its placement, and also look at how the Input component's width class interacts with the SettingsRow control container's responsive sizing. On mobile the form stays at a fixed width of 48 units, which is acceptable. Looking at the environment label change though — it was previously an h3 but is now a span, which breaks the semantic heading structure that other rows in the list maintain. That's a concrete regression worth noting. The value span also lacks truncation handling, though that appears to be pre-existing. The real issue is that SettingsRow needs flexibility here since the value must be a span when used in certain contexts, so adding a configurable prop likevalueAswould let the component adapt to different semantic requirements. Now checking the icon button sizing and the SettingsRow instances — the pencil icon fits the minimum height constraint. I'm also noticing there might be duplicate "Environment name" rows across different conditional branches, so I need to verify whether both could render simultaneously. So the h3→span change appears to be the main finding, but I should verify whether there are other modifications I'm missing. The mobile file is outside the scope since I'm only looking at patterns within apps/web/src. The environments.ts update is straightforward. I'm also checking whether useEnvironmentSessionState in the session state file is actually part of the web codebase, since it's referenced but the diff didn't show a corresponding change in apps/web/src/state/session.ts. I'm weighing whether to flag the h3 to span downgrade as a concrete accessibility regression. It does introduce a semantic inconsistency in the row structure, so it seems worth calling out. But I should also check if the settings search indexes headings, since that could be another impact I'm missing. The h3-to-span change in the saved environments list is a semantic regression, but it's a minor accessibility issue. I need to decide whether to flag it given the check's guidance about preserving accessibility semantics. The instructions say the check defaults to failure and should return "All clear" only when there are no findings, but I'm uncertain about the exact response format and whether this qualifies as a reportable finding. Looking at the actual impact: the span replaces the h3 unconditionally across all saved environment rows, whereas peer sections like pairing links and SSH targets still use h3 for the same purpose. This is a genuine inconsistency introduced by the PR. I'll flag it as a finding, and the suggested fix would involve restructuring how the heading and control are rendered to avoid duplication while preserving the semantic heading element. Let me verify the rest of the changes are sound: the conditional return for hidden rows works correctly, the useEffect import is appropriate, the input maxLength matches the contract, and the button styling with the icon size override looks fine. The height shift during editing from 20px to 28px is expected behavior when swapping the label for an input field, consistent with how other inline rename patterns work elsewhere in the codebase. I found one issue worth flagging: line 1409 where the saved environment name renders as a<span>instead of the<h3>with text styling that appears in sibling rows. This breaks the heading structure for screen readers. I'll suggest adding an optional prop toSettingsRowthat lets callers choose the element type—defaulting tospanfor most uses but allowingh3for the list rows to preserve semantic structure. Posting the review comment now at line 1409 in ConnectionsSettings.tsx. On the check result: this is a minor accessibility regression, and the guidelines say the check defaults to failure when findings exist. Heading semantics isn't just aesthetic—it's structural—so I'm marking this as failure. The h3 removal is concrete and documented in the diff, so I'll post the comment now.
1. modify_pr — One finding on the web rename control: the saved-environment row lost its heading element when the label moved into EnvironmentLabelControl.
Agent Credits: 162 credits