Rebuild the operator UI on design tokens and a summary-first connections page - #554
Merged
Merged
Conversation
…ons page The connections page opens with a summary strip and one line per connector; the description, permissions, OAuth actions, credentials, diagnostics, drift, and tool list move into a row an operator expands. Same payload, same gates. The stylesheet resolves every color, radius, and font through a custom property and derives the rest with color-mix, which makes `branding.theme` (accent, radius, fontFamily, monoFamily, colorScheme) a gated `:root` block appended after it rather than a second design system. Light and dark are the same tokens, following the OS unless a deployment pins the scheme. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
- droppedThemeTokens compared raw colorScheme to the resolved value, warning that a padded-but-accepted `" dark "` had been dropped. - ConnectaTheme was unexported, so the type inside ConnectaBranding could not be imported from the package. - .brand and .product are declared after the .navlink they also carry, so a linked masthead label is no longer muted and inset. - Removed three class names the rewritten stylesheet no longer defines. - A connector name is an h2 again, restoring the page's heading outline. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The four stat tiles become a single line — "4 connected · 1 needs authorization · 1 unavailable · 76 tools" — with the two counts an operator can act on shown only when they are not zero. No shadows anywhere, the gate is a centered column instead of a panel, and the .card and .stat rules are gone with their last callers. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Two findings from an independent review. `.rows` clips to its radius, so a summary's focus ring was cropped by the container; it is inset now. And an empty notice collapsed with `display: none`, which takes the live region out of the accessibility tree and leaves it appearing and filling in the same frame — it collapses to zero height instead. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
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.
The operator page was dense and brutalist: every connector rendered a full card
with its description, status line, permissions, OAuth actions, credential
panel, refresh button, diagnostics, drift panel, and tool list, all expanded at
once. Six connectors filled a screen and a half. This reworks the layout and
replaces the stylesheet with a token layer a deployment can theme.
Connections page
4 connected · 1 needs authorization · 1 unavailable · 76 tools. The two counts an operator can act on appear onlywhen they are not zero, so a healthy deployment stays short.
Everything else is behind a row you expand.
<details>and not store state, so an identitychange cannot leave one connector's panel open over another's data.
/ui/datapayload, same gates, and the drift panel still refuses torender a tool name or a schema.
Tokens and
branding.themebrowser.cssresolves every color, radius, and font through a custom propertyand mixes tints, hovers, and focus rings from those with
color-mix, so thenew config only has to append a
:rootblock after the stylesheet:Light and dark are the same tokens under
prefers-color-scheme;colorSchemepins one with a
data-schemeattribute on<html>. Each token is gated theway the branding URLs already were — hex color, CSS length, plain font-family
list, one of
system/light/dark. The gates are narrow because these valuesland in a
:rootblock on the page, where anything unvalidated would be CSSinjection. A rejected value takes the default and
createConnectawarns,naming it.
Not done
Base Web was considered and dropped: React plus Styletron would take the
inlined operator bundle from ~85 KB to several hundred, in a UI whose whole
story is one self-contained HTML document that runs unchanged on Workers. The
bundle grew by ~5 KB instead.
Verification
npm run checkpasses. New coverage: theme resolution and its gates againstdeclaration-closing,
url(),var(), comment, and unterminated-stringpayloads; the rendered
data-schemeattribute and token block; the startupwarning;
summarizeConnectorsandconnectorSummaryPartsincluding theloading and drift cases;
connectorStatusTone,authScopeLabel, andpermissionLabel. A/code-review highpass produced five findings, all fixedin the second commit.
🤖 Generated with Claude Code