fix(ui): visual audit batch — light skeletons, sentinel copy, toast, tab focus

[wailingwombat]

Cosmetic Console frontend fixes from the Visual Audit Checklist. Tracks PROD-4223 (Visual + UX audit).

Items

1. Light mode: skeleton loading is dark — fixed

Chat thread loading uses TableSkeleton, which had hardcoded dark hex stops (#2D3037 / #393C44). Those now use theme fill-two / fill-three so shimmer is light on a light background and still reads correctly in dark mode. Same tokens applied to ChartSkeleton. RectangleSkeleton was already theme-aware.

2. Sentinel status copy: "In progress" → "Running" — skipped

User-visible Sentinel pending copy already says Running:

• SentinelStatusChip (js/console/src/components/ai/sentinels/SentinelsTableCols.tsx)
• Status filter tab (js/console/src/components/ai/sentinels/Sentinels.tsx)

This was changed in #2899 (Nov 2025). No remaining hardcoded "In progress" string in Sentinel UI. Backend enums were left alone.

3. Toast notification line-height / top alignment — fixed

Banner (toast content) used invalid CSS align: 'flex-start' and honorable Flex could vertically center the close button against multi-line copy. Switched to alignItems: 'flex-start' (and align="flex-start" on the Flex), and body copy now uses body2 (20px line-height, matching the 20px icon) instead of body2LooseLineHeight.

4. Links/tabs turn deep blue on focus — fixed

Clicking a tab-as-link (UnstyledLink / LinkTabWrap) then typing makes :focus / :focus-visible apply. Those <a>s had no color reset, so the browser default deep blue showed, and SubTabs outside TabList also lacked design-system focus rings.

• UnstyledLink and LinkTabWrap: color: inherit + design-system theme.partials.focus.default on :focus-visible
• Tab / TabList: inherit color on focus and keep DS focus outline
• Console index.css: extend the existing honorable :focus-visible color reset to :focus as well

Test plan

• Light and dark mode: open chat and confirm skeleton bars are not dark-on-white in light mode.
• Trigger a toast (success/error) with multi-line body; icon, text, and close control should align to the top.
• Click a settings / resource tab (link tab), then start typing — tab text should stay theme color and show the design-system focus ring, not browser-default blue.
• Sentinel run status / filter tabs still show Running for pending.
• No token or color-system refactor.

Test environment: local / this PR only (no agent deploy).

Checklist

• I have added a meaningful title and summary to convey the impact of this PR to a user.
• If required, I have updated the Plural documentation accordingly.
• I have added tests to cover my changes.
• I have deployed the agent to a test environment and verified that it works as expected (required only when changing agent code).

Plural Flow: console

  

[soffi-ai]

Soffi AI Summary

This PR delivers a batch of cosmetic and accessibility fixes identified during a visual/UX audit (PROD-4223) of the Plural Console frontend. The changes address four distinct issues:

1. Skeleton loaders in light mode — TableSkeleton and ChartSkeleton used hardcoded dark hex color stops (#2D3037 / #393C44) for their shimmer animation, making them appear dark-on-white in light mode. These are replaced with theme-aware fill-two / fill-three tokens, injected via CSS custom properties, so the shimmer adapts correctly to both light and dark themes.

2. Toast/Banner alignment — The BannerOuter component had an invalid align: 'flex-start' CSS property (should be alignItems), which caused the close button and icon to not align to the top of multi-line toast messages. Fixed by correcting the CSS property, constraining the icon wrapper to a fixed size, and switching body copy from body2LooseLineHeight to body2 (20px line-height) to match the icon size.

3. Icon optical sizing — ErrorIcon and InfoIcon SVGs lacked a height attribute and rendered at a visually larger optical size than peer icons like CheckRoundedIcon. Both are now wrapped in a scale transform (14/16) to match the optical footprint of the design system's other status icons. WarningIcon also received a minor fix.

4. Tab/link focus ring color — Clicking a tab link (UnstyledLink, LinkTabWrap) and then typing triggered the browser's default deep-blue :focus outline. Fixed by adding color: inherit and the design system's theme.partials.focus.default focus ring to UnstyledLink, LinkTabWrap, Tab, and TabList. The global index.css also extends the existing :focus-visible color reset to cover plain :focus.

No logic, data model, or API surface changes are included — this is a purely visual/UX correctness fix.

Changes

Visual audit: skeleton themes, toast alignment, tab focus rings

• Replaced hardcoded dark hex color stops in TableSkeleton and ChartSkeleton with theme-aware CSS custom properties (fill-two/fill-three) so shimmer animations render correctly in light mode. Fixed Banner/toast top-alignment by correcting the invalid align CSS property to alignItems on BannerOuter and constraining the icon wrapper. Added color: inherit and design-system focus rings to UnstyledLink, LinkTabWrap, Tab, and TabList to prevent browser-default blue on focus. Extended the global index.css focus-visible color reset to also cover :focus. (fb0416c)
• Refined the skeleton CSS variable approach to use React's typed CSSProperties for the custom property declarations, resolving TypeScript type errors introduced in the initial commit. (60d3a01)
• Normalized Banner severity icon optical sizing: ErrorIcon and InfoIcon now apply a scale transform (14/16) to match the visual footprint of CheckRoundedIcon, added missing height attributes to their SVG roots, and tightened IconWrap layout so icon, body copy, and close button all align to the top edge consistently. (978cf6a)

---

Updated: 2026-09-16 19:29 UTC

Deploy in Soffi

[github-actions]

Storybook preview: https://6a8c1fbd32d6c1cc8fc131a5-cvkwwpeavb.chromatic.com/

[greptile-apps]

Greptile Summary

The PR applies theme-aware skeleton colors and visual alignment and focus-state fixes across Console and the shared design system.

• Uses design-system fill tokens for table and chart skeleton gradients.
• Top-aligns Banner content and close controls while standardizing body-copy line height.
• Preserves inherited link and tab colors and applies design-system focus-visible rings.

Confidence Score: 5/5

The PR appears safe to merge, with no concrete functional, accessibility, or security regression identified.

The changed styling remains theme-aware, preserves focus-visible indicators, and does not alter application data flow or public contracts.

Important Files Changed

Filename	Overview
js/console/src/components/utils/Link.tsx	Preserves inherited link color and adds the standard focus-visible outline without an identified regression.
js/console/src/components/utils/SkeletonLoaders.tsx	Replaces hardcoded SVG gradient colors with theme tokens and supplies their animated values through SVG-scoped CSS variables.
js/console/src/components/utils/Tabs.tsx	Keeps linked tabs on their inherited color and adds the design-system focus-visible treatment.
js/console/src/index.css	Extends the existing global focus color reset to ordinary focus states.
js/design-system/src/components/Banner.tsx	Corrects flex alignment and uses the standard body typography token for toast content.
js/design-system/src/components/Tab.tsx	Prevents browser-default focused text colors while retaining the theme focus-visible ring.
js/design-system/src/components/TabList.tsx	Applies consistent inherited focus colors and outlines across cloned and react-aria-rendered tabs.

_{Reviews (1): Last reviewed commit: "fix(ui): use React CSSProperties for ske..." | Re-trigger Greptile}