Skip to content

fix(web): keep provider health settings visible

MacroscopeApp / Macroscope - UI Consistency failed Aug 27, 2026 in 5m 30s

UI Consistency: 1 issue found

Finding

  • apps/web/src/components/settings/ProviderInstanceCard.tsx (editor header, ~L588-693): the new editor header renders no status information. statusStyle and summary are still computed, but in editor mode neither the status dot nor summary.detail is rendered β€” both previously lived in the removed auth row. Since the list row shows only a truncated summary.headline, the server's diagnostic text (getProviderSummary().detail / provider.message, e.g. "CLI not detected on PATH", "The provider failed its startup checks") is now unreachable anywhere on the Providers page, in the very pane a user opens to fix it. Suggested fix posted inline: a single status line under the title in the editor header.

Previously flagged items are resolved on this head: the device strip and the Models/Configuration strip now use aria-pressed (no orphaned role="tablist"/role="tab" without panels or keyboard model) plus cursor-pointer and a focus-visible ring; the Advanced disclosure now composes Collapsible/CollapsibleTrigger/CollapsibleContent; the Add provider button uses the named compact size instead of geometry overrides; and the Models tab is hidden when driverOption === undefined.

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.

Reviewed

  • apps/web/src/components/settings/ProviderInstanceCard.tsx
  • apps/web/src/components/settings/ProviderSettingsPanel.tsx
  • apps/web/src/components/settings/providerStatus.ts
  • apps/web/src/components/settings/ProviderSettingsPanel.environment.test.tsx (context)

Checks performed

  • Primitive ownership: confirmed Collapsible/CollapsibleTrigger/CollapsibleContent are the shared components/ui/collapsible primitives (trigger supplies cursor-pointer, panel supplies the height transition); the Add provider and refresh buttons use named Button sizes (compact, icon-micro) with only contextual classes.
  • Raw elements: the list row selector and both tab strips are semantic row/tab interactions, which the check explicitly exempts. Confirmed the repository has no ui/tabs.tsx and that existing tab strips (RightPanelTabs, ThreadTerminalDrawer) are likewise hand-rolled, so the duplicated tab treatment matches house convention rather than diverging from a primitive β€” not reported.
  • Accessibility/interaction: the new raw buttons carry type="button", cursor-pointer, outline-none + focus-visible:ring-2 focus-visible:ring-ring, and aria-pressed selection state; the read-only path still wraps the whole layout in inert, so the forced-open Advanced section (advancedVisible = readOnly || advancedOpen) is not a stuck control.
  • Tokens: PROVIDER_STATUS_STYLES.disabled.dot moving from bg-amber-400 to bg-muted-foreground/50 replaces a raw palette color with a semantic token; no other consumer of PROVIDER_STATUS_STYLES exists.
  • Props/imports: SettingsPageContainer width="expanded" is an existing supported value (also used by DiagnosticsSettings); removed imports (Collapsible, Tooltip, ChevronDownIcon, RedactedSensitiveText) have no remaining references in their files, and RedactedSensitiveText is still consumed by SourceControlSettings, so nothing became dead code.
  • ProviderInstanceIcon's statusDotClassName/indicatorBackground props remain used by ProviderModelPicker and ModelPickerSidebar, so dropping them here does not orphan the primitive contract.

πŸ” Agent activity β€” 16 tool calls

πŸ’­ Looking at the latest head commit, it seems the earlier feedback about accessibility roles has been resolvedβ€”the diff now shows aria-pressed with cursor-pointer and focus-visible styling, the Advanced section uses proper Collapsible components, and the Add provider button uses the compact size. With those prior issues addressed, I need to move on to reviewing what's left. I'm checking whether the status dot change in providerStatus.ts is appropriate, and whether that new decorative span with a border in ProviderInstanceCard is actually replacing a meaningful status indicator or just serving as a fallback icon placeholder. I also notice the status dot and auth email row seem to have been removed from ProviderIcon entirely, which could be an intentional simplification or a loss of functionality worth flagging. I want to verify whether CollapsibleTrigger inherently provides cursor-pointer and focus styling, since the trigger's className doesn't explicitly include those. I'm also considering the readOnly + advancedOpen logic β€” since advancedVisible forces the collapsible open when readOnly, clicking the trigger won't actually collapse it, which seems like a minor behavioral quirk worth noting. I should confirm that the width="expanded" prop actually exists on SettingsPageContainer, and take a closer look at ProviderLastChecked before drawing conclusions β€” so I'll go read through these files directly.

1. browse_code β€” apps/web/src/components/settings/ProviderInstanceCard.tsx

2. browse_code β€” apps/web/src/components/ui/collapsible.tsx

πŸ’­ The Collapsible primitive and tab buttons look correct now with proper aria-pressed and focus states. I'm double-checking the visibility logic for the Models tab and whether the warning status dot color change in providerStatus.ts affects other consumers of that status value. I'm also thinking about whether removing RedactedSensitiveText and the authenticated email display is truly dead code or an intentional product decision, since the editor header and list row no longer show auth status at all β€” that might be worth flagging as a functional regression rather than just a styling cleanup. I should also verify whether statusDotClassName/indicatorBackground props on ProviderInstanceIcon are now unused elsewhere, check that width="expanded" is a valid SettingsPageContainer prop, and confirm the EnvironmentUnavailableRow and empty-options rendering paths still behave correctly. I'm now noticing a real interaction bug: when readOnly is true, advancedVisible stays permanently true since advancedOpen toggling to false doesn't override the readOnly override, so the Collapsible trigger looks clickable but never actually collapses β€” the chevron and aria-expanded state are effectively frozen. That seems worth flagging as a concrete broken interaction rather than a cosmetic issue, so I want to check the actual ProviderSettingsPanel code around where readOnly is used to confirm this. The onUpdate toggle behavior for enabled seems unchanged from before, and headerAction/onDelete gating on mode looks fine too. The focus-visible ring styling seems consistent with other parts of the codebase, so not a real issue β€” I should check providerStatus usage and ProviderInstanceIcon props next.

3. git_tools β€” PROVIDER_STATUS_STYLES|statusDotClassName|indicatorBackground|RedactedSensitiveText

4. browse_code β€” apps/web/src/components/settings/providerStatus.ts

πŸ’­ I'm tracing the diff carefully to figure out whether the disabled status dot originally used an amber color before being changed to the muted foreground style, checking the merge base to confirm the actual line change.

5. browse_code β€” apps/web/src/components/settings/providerStatus.ts

6. browse_code β€” apps/web/src/components/settings/ProviderSettingsPanel.tsx

πŸ’­ I should verify that the width="expanded" prop actually exists on SettingsPageContainer. I also notice the disabled status dot switched from a raw amber color to a semantic muted-foreground token, which is a good fix. Let me check the ProviderSettingsPanel's main render section around lines 780-940 to see its current state.

7. browse_code β€” apps/web/src/components/settings/ProviderSettingsPanel.tsx

8. browse_code β€” apps/web/src/components/settings/ProviderSettingsPanel.tsx

πŸ’­ I should double check that the width="expanded" prop actually exists on SettingsPageContainer. Also reconsidering the readOnly/Collapsible interaction: since the whole thing sits inside an inert wrapper when readOnly, the trigger being non-interactive is expected behavior, and forcing advancedVisible true just ensures the value is still visible to read-only users β€” so that's fine, not a real bug. Now I'm looking at the editor mode tab strip and list row markup for accessibility patterns like aria-pressed, checking the status dot styling, and noticing that the fallback icon square (a plain bordered 4x4 rounded-sm box) visually resembles the Checkbox primitive used elsewhere on the page. I want to check checkbox.tsx to see if the styling actually matches, since if it does, this decorative element sitting next to real interactive controls could be a legitimate consistency/affordance issue worth flagging. I'm also spotting a bigger concern: the editor header no longer surfaces the provider's status or summary detail at all -- that information now only lives in the list row, and even there the detail text (which can contain important error messages like failed startup checks or auth issues) appears to have been dropped entirely rather than just truncated. I should stay cautious about flagging this as a product decision rather than a UI regression, but let me check the full editor render to confirm what's actually displayed.

9. browse_code β€” apps/web/src/components/settings/ProviderInstanceCard.tsx

10. git_tools β€” summary.|width="expanded"|width:

πŸ’­ I notice summary.detail is now effectively dead since it's never rendered, though the rawSummary/summary alias still lingers as a minor leftover. I'm now looking at whether the hand-rolled tab visuals in ProviderInstanceCard and the device tabs in ProviderSettingsPanel duplicate an existing shared tab pattern elsewhere in the codebase. Checking RightPanelTabs and ThreadTerminalDrawer, both use raw buttons too, so there's no dedicated Tabs primitive to point to here β€” this is fine as-is. What's more interesting is that within this same PR there are now three nearly identical tab button class strings, two of them literally identical inside ProviderInstanceCard, which is a legitimate case for extracting a small local TabButton, though it feels like a soft, aesthetic-level finding rather than something worth failing the check over. Looking at accessibility next: the aria-pressed selection button seems fine when selected, and I want to check whether the focus-visible ring styling on the new raw buttons matches the shared Button component's convention (ring-[3px] ring-ring/50) or deviates from it β€” a minor consistency issue at most. I also traced through the editor's activeTab state and selection remounting behavior via the key prop, which looks correct, and I'm now looking at the disabled-state styling logic in list mode to see if there's a real bug there. I should check checkbox.tsx to see if this fallback square is confusable with it. Also noticing that the icon slot size changes between size-5 and size-4 across rows, causing a slight text shift β€” though checking further, this slot-sizing inconsistency actually predates the diff since the earlier fallback was a size-2 status dot, not size-5 either. So it's a pre-existing quirk rather than something newly introduced. More significantly, I'm realizing the diff drops summary.detail (the server's diagnostic message, like a CLI-not-found or auth-failure explanation) from being rendered anywhere in the UI β€” previously visible in the auth row, now the list only shows a truncated headline. That feels like a real user-facing regression worth flagging, possibly suggesting summary.detail be surfaced in the editor header, though I want to confirm it's genuinely supported by the diff before calling it out. Minor spacing quirk with the version code chip not having shrink-0, but that's negligible. I checked the focus ring on the list row button against the overflow-hidden container and it looks fine since the ring sits inside the padded area. Now I'm moving on to look at the Models section. The tab buttons there use px-0 with a tight focus ring, which is a very minor cosmetic detail, and the h-11 with items-end on an equal-height child is essentially a no-op, so nothing substantial there either. The strongest finding so far is that this PR repeats the same tab-button treatment across three call sites in two files, which the ruleset flags as a case for extracting a named primitive size or variant since it's a durable, repeated pattern rather than a one-off. Extracting a shared tab-button component feels justified with three consumers rather than just one or two, though I'm also weighing that other parts of the codebase (RightPanelTabs, ThreadTerminalDrawer) already implement raw tabs separately, so I want to be careful this doesn't become a broad abstraction that only serves inconsistent existing patterns. Rather than push this weak duplication issue, I want to focus on stronger findings β€” checking Button's focus-ring styling to see whether other raw clickable rows deviate from that convention, and examining whether the summary.detail or auth info actually got dropped.

11. git_tools β€” focus-visible:ring

12. git_tools β€” size-4 shrink-0 rounded-sm border|peer size-4|rounded-[4px] border

πŸ’­ Comparing focus ring styles between the button component and the new raw buttons, I think the lack of an offset ring or coarse pointer hit target isn't a real problem since these rows and tabs already have generous sizing. The remaining issues feel minor at this point, so I'm double-checking whether there's anything more substantial I might have overlooked in the list. I'm now tracing whether the removed Tooltip wrapper around the refresh button breaks anything, since the file still has the aria-label but I want to confirm no leftover Tooltip usage would cause an unused-import or typecheck error elsewhere in ProviderSettingsPanel. I also want to verify ProviderInstanceCard doesn't have stale imports like Checkbox or Collapsible-related icons that are no longer used after the refactor, so I'm going to grep both files to be sure.

13. git_tools β€” Tooltip|ChevronDownIcon

14. git_tools β€” Checkbox|ScrollArea|useState|Switch

πŸ’­ All imports check out fine. I'm noting the default tab is "configuration" even though Models is listed first in tab order, which is a mild inconsistency but not worth flagging. I'm also weighing whether the fallback checkbox styling actually matches the real Checkbox primitive, and deciding whether to report these as genuine findings or conclude the review is clear, since prior runs did surface real issues. Looking closer at the ProviderInstanceCard's list row button, I confirm the nested flex spans inside are valid HTML and the aria-pressed default is fine. I notice the selection indicator span lacks aria-hidden, but since it holds no text this has no accessibility impact -- though it's a minor inconsistency that device tabs use a pseudo-element for their selection bar while provider rows use a real span. Now I'm moving on to check the editor pane. I realize the editor pane shows no status information at all β€” statusStyle is only used in list mode, so a selected provider gets no "Not authenticated" or error message displayed. Combined with summary.detail being computed but never rendered anywhere, this looks like the real regression worth flagging: the diff removed the only place that showed summary.detail and the authenticated-email/auth-label info, meaning server error messages like "CLI not detected on PATH" are no longer surfaced anywhere on the Providers page. The simplest fix would be to render summary.detail and the status dot back into the editor view. I'm weighing whether a second, weaker finding belongs in the report: the tab styling utility string looks duplicated across files, bordering on triplicated geometry that could warrant extraction into a shared helper, though this feels more like an optional aesthetic suggestion than a hard violation. I don't want to over-flag minor style repetition alongside the more concrete behavioral regression. I'll include the shared tab button as a low-emphasis suggestion since the guidelines do call out repeated geometry across call sites as worth flagging. Now I want to check whether the tab strips' accessibility pattern (aria-pressed, no roles) matches the existing conventionβ€”let me verify what RightPanelTabs uses to confirm aria-pressed is the house standard.

15. browse_code β€” How are tab strips implemented for RightPanelTabs and ThreadTerminalDrawer in apps/web/src/components? Show the tab button element markup including aria attributes (aria-pressed vs role="tab") and the Tailwind classes used for the active indicator. Is there any shared tab button component or variant in apps/web/src/components/ui?

πŸ’­ I'm dropping the duplication finding since it's consistent with existing codebase conventions and not something this focused PR should be expected to fix. I'm also checking toggle-group.tsx, which uses Base UI and emits aria-pressed, to see if that's pre-existing behavior too. Checking the original code, I confirm the detail message and authenticated email were shown before but are now dropped from the list row, leaving only a truncated headline β€” that's a genuine UI regression worth flagging once at the editor header. I also check the status semantics: when a provider is locally disabled but the server still reports it enabled and authenticated, the list dot shows neutral/disabled while the headline still says "Authenticated," which is a minor mismatch but acceptable given the opacity treatment for disabled state. I don't see other real issues β€” the dot color for disabled switched to a semantic muted token instead of a raw amber, which is an improvement, and the lack of ARIA attributes on tab buttons is consistent with the rest of the codebase's style, so that's fine too. I'm now scanning the responsive grid layout for any breakpoint issues. The collapsible content and its controlled open state both look fine, so this is really down to just the one finding. I'm weighing whether a single moderate issue like this loss of diagnostic detail is enough to fail the check, or whether it's better logged as a comment while the overall state stays passing. Given the guidanceβ€”no findings means "All clear," but a genuine regression risk warrants failureβ€”I'll treat this dropped diagnostic info as a real regression rather than an aesthetic nitpick, and mark the check as a failure with a clear explanation of the issue. The PR title suggests this is a UI improvement pass, and while dropping the auth email display looks like an intentional privacy simplification, the missing server error detail (summary.detail) looks like an oversight since the code still computes it and there's plenty of room to display it. I'll draft an inline comment on the editor header suggesting a status dot plus that summary detail be rendered there, making sure the line I reference falls within the diff hunk range. These are now unreachable anywhere in the Providers page since this header replaced the old auth row that displayed them. I want to suggest keeping a status line under the title in the editor header, so I'm drafting a diff snippet that adds a paragraph element with a status dot and text beneath the existing header content. Now I'm trying to figure out exactly where in the file to anchor this diff comment, since the hunk boundaries around the title row and titleTailNode are a bit ambiguous given the line numbers shown. I'll settle on anchoring at line 590, which is definitely part of the added lines, and post the diff there.

16. modify_pr β€” One finding: the new editor header drops the provider status/diagnostic line that the removed auth row used to render, so getProviderSummary().detail is no longer rendered anywhere on the page. Everything flagged in earlier runs (tab/tablist ARIA, the hand-rolled Advanced disclosure, the size="sm" override on the Add provider button, the always-empty Models tab) reads as resolved on this head.


Agent Credits: 172 credits