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 applies a batch of visual/UX audit fixes to the Console frontend, targeting four distinct cosmetic issues identified in the PROD-4223 audit. The changes have no functional impact on application logic — they are purely presentational corrections.

1. Theme-aware skeleton loaders: TableSkeleton and ChartSkeleton had hardcoded dark hex color stops (#2D3037 / #393C44) for their SVG shimmer animations, causing them to appear as dark bars on a white background in light mode. These are now driven by theme.colors['fill-two'] / theme.colors['fill-three'] via CSS custom properties, so shimmer renders correctly in both light and dark themes.

2. Toast (Banner) vertical alignment: The BannerOuter styled component used the invalid CSS property align: 'flex-start' (instead of alignItems) and body copy used body2LooseLineHeight, causing the close button to vertically center against multi-line text. Fixed by using alignItems: 'flex-start', adding align="flex-start" to the Flex wrapper, and switching body copy to body2 (20px line-height matching the icon height).

3. Tab/link focus color bleed: Clicking navigation tabs or UnstyledLink / LinkTabWrap anchors and then typing caused the browser-default deep-blue :focus color to bleed through because the elements had no color reset. Fixed by adding color: inherit on :focus and :focus-visible across Tab, TabList, UnstyledLink, and LinkTabWrap, while preserving the design-system focus ring on :focus-visible.

4. Global focus color reset extended: index.css already reset mysterious honorable-injected :focus-visible background/color overrides; this reset is now also applied to plain :focus to close the remaining gap.

Changes

Visual audit fixes: skeleton themes, toast alignment, tab focus colors

• Addresses four cosmetic issues from the PROD-4223 visual/UX audit: replaces hardcoded dark hex stops in TableSkeleton and ChartSkeleton with theme-aware CSS custom properties so shimmer renders correctly in light mode; fixes Banner (toast) vertical alignment by correcting the invalid align CSS property to alignItems and switching body copy to body2; adds color: inherit and design-system focus rings on :focus/:focus-visible to Tab, TabList, UnstyledLink, and LinkTabWrap to prevent browser-default blue bleed-through; and extends the global honorable focus-color reset in index.css to cover plain :focus in addition to :focus-visible. (fb0416c)

---

Updated: 2026-09-02 17:10 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}