refactor(desktop): finish Astryx convergence for Claude card + WeChat QR panes - #1984

jackwener · 2026-08-03T10:09:51Z

Follow-up to #1972, covering the two Settings surfaces it left on the old hand-rolled card dialect.

Claude subscription card (`claude-subscription-card.tsx`)

The hand-rolled .settingsConnectionRow with 9 data-status tinted variants was the last card of its kind, sitting inside the otherwise fully-Astryx Providers surface. It now composes Card / HStack / VStack; status is carried by the Badge + detail line only (status-color restraint — color reserved for exceptions).
Gate-read failure state → Banner status="error" with retry in endContent, matching every other Settings error surface.
Quota went from text-only 5小时 | 87% rows to real ProgressBar gauges (warning ≥ 75%, error ≥ 90% utilization) with a relative "updated" timestamp.
Paste-code panel → Divider + VStack; the inline paste error routes through FieldStatus (kept inside a role="alert" wrapper to preserve the announcement).
Section eyebrow h3.settingsSubheading → shared SectionHeader.

WeChat QR login modal (`bot-wechat-login.tsx`)

The four hand-tinted data-tone placeholder panes (loading / logged-in / expired / error) become EmptyState — Spinner icon while generating, check icon on success, retry buttons in the actions slot, error pane wrapped in role="alert".
The white QR frame plate stays bespoke on purpose: a QR code needs a light background in every theme.

CSS

connection.css: 119 → 15 lines; only .settingsConnectionMeta (still used by Web Search) survives.
form.css: .settingsSubheading retired (this card was its last user; check-dead-css confirms).

Verification

npm --workspace @maka/desktop run typecheck ✅
check-dead-css ✅ (no dead classes)
check-a11y / check-copy / check-console ✅
Product Storybook visual smoke: 70 catalog renders × 3 viewports ✅

Net: 5 files, +139/−249.

… QR panes Follow-up to #1972 covering the two Settings surfaces it left on the old card dialect: - claude-subscription-card: the hand-rolled `.settingsConnectionRow` (9 `data-status` tinted variants) sat inside the otherwise fully Astryx Providers surface. It now composes Card / HStack / VStack, with status carried by the Badge + detail line only (status-color restraint). The gate-read failure becomes a Banner (matching every other Settings error surface), the quota lines gain a real ProgressBar gauge (warning >= 75%, error >= 90% utilization), the paste-code panel becomes Divider + VStack, and the inline paste error routes through FieldStatus. - bot-wechat-login: the four hand-tinted `data-tone` QR placeholder panes become EmptyState (Spinner for loading, check icon on success, retry actions in the actions slot). The white QR frame plate stays bespoke — a QR code needs a light background in every theme. - connection.css drops from 119 lines to the one `.settingsConnectionMeta` helper Web Search still uses; `.settingsSubheading` (uppercase eyebrow, last used by the Claude card) is retired in favor of SectionHeader. Verified: desktop typecheck, check-dead-css, check-a11y/copy/console, and the product Storybook smoke (70 catalog renders x 3 viewports).

… seam (#1997) Adversarial review of #1984/#1991/#1993 (two independent lenses, findings verified before fixing) plus one user-reported shell defect. Shell: - The content column is a rounded floating plate flush to the sidebar; the theme's full-height sidenav hairline ran on the same seam and read as a doubled border beside the plate's corner radius. Dropped in the expanded state too (collapsed already did) — separation is tonal, per DESIGN.md's One Working Plane rule. Regressions from #1993, confirmed and fixed: - bot-chat-detail lost all inter-section rhythm: its wrapper pair kept a gap on a display:block section (inert) and a class with no CSS rule. The page is a SettingsPage now, like the overview next door; the back button keeps only its optical inline outdent. - bot.css had the file-header comment replace-all'd into the middle of `.settingsBotDetailHeader > .settingsBotLogo`. Parsed by luck; removed. - MetadataList destructures a closed prop list, so the runtime grid's aria-label was silently dropped — the group name rides a real role="group" wrapper now. - The kit section header now wraps: at the 480px window floor a multi-button action cluster drops under the title instead of crushing it (replaces the deleted bot-runtime media query). - Overview rows go flush-inline (the 10px inset was old card-grid residue); the WeChat QR dialog gets its height floor back (224px) so state swaps stop resizing the modal. Convergence completions the review surfaced: - claude-subscription-card drops its SectionHeader + full-width Card and repeated title: it renders under ProvidersPanel's RouteHeader like its sibling OAuth panels, as a bare VStack with the shared StatusDot + text status idiom. - ProvidersPanel connection status Badge -> StatusDot + text; health's hand-rolled five-arm dot mapping -> the shared statusDotVariant. - subagent-presets panel: Card-wrapped .settingsRows + a lead Item posing as a header -> SettingsSection; settings-surface fallback drops its Card wrap. - About hero pills referenced two classNames with no CSS rule — they are the Badges about.css's comment always described. - `.settingsPage .settingsPageStack` (rename slip) -> nested `.settingsPageStack .settingsPageStack`; quota labels round. Verified: typecheck, check-dead-css, check-a11y/copy/console, format:check, product Storybook smoke (71 renders x 3 viewports).

jackwener force-pushed the refactor/claude-card-wechat-astryx branch from 7a534fd to 6012c5c Compare August 3, 2026 10:40

jackwener merged commit 623fcf5 into main Aug 3, 2026
1 check passed

This was referenced Aug 3, 2026

refactor(desktop): componentize the settings page container + residual sweep #1991

Merged

fix(desktop): deep-review round over the settings convergence + shell seam #1997

Merged

Navigation Menu

Uh oh!

refactor(desktop): finish Astryx convergence for Claude card + WeChat QR panes - #1984