2 Commits

Author	SHA1	Message	Date
Anso	bbcc4b59e4	fix: UI polish - tooltips, masthead, tabs, settings, and layout consistency (#1563) ... * fix: increase masthead rail shimmer visibility Bumped shimmer highlight opacity from 25% to 50% and reduced animation duration from 11s to 5s, matching the login page AuthCanvas shimmer precedent (via-white/60 at 4.5s). * fix: reduce masthead rail opacity to match login page pattern Changed all MastheadRail background classes from 100% to 70% opacity (bg-brand → bg-brand/70, etc.) so the shimmer highlight reads as a surface reflection rather than a detached floating bar. Matches the AuthCanvas login card precedent. * fix: improve masthead rail glow visibility Replaced the invisible inset box-shadow glow (10px blur inside a 3px element) with a white overlay that pulses opacity 0.15-0.55 over 4s. Sped up glow animation from 5.5s to 4s for a more noticeable breath. * fix: replace cursor-follow tooltip with standard Radix tooltip in sidebar rows Replaced the Cursor/CursorFollow animate-ui primitives in StackRow with the standard Radix Tooltip/TooltipTrigger/TooltipContent already used throughout the app. The custom cursor dot that followed the mouse is gone; tooltips now appear as static popovers on hover/touch. * fix: wrap tooltip icon triggers in span for Radix compatibility TooltipTrigger asChild requires a native element to forward props. Lucide icon components did not reliably receive data-state and event handlers, so tooltips on the check-failed and git-pending indicators did not open. Wrapped each icon in a span. * fix: rename Notification Routing to Routing in settings sidebar * fix: replace Timeline/All tasks buttons with SegmentedControl The two loose Button elements had indistinguishable selected/unselected states (secondary vs ghost). Replaced with the SegmentedControl component already used elsewhere on the same page, which has a clear active highlight indicator. * fix: standardize Blueprint empty state headings to font-heading Replaced manual font-serif [font-style:var(--heading-style)] with the font-heading class on the main heading and three step titles so the Deployments empty state follows the same heading convention as the rest of the app and respects the Calm/Signature theme toggle. * fix: remove custom tooltip styling, use standard TooltipContent defaults The RowTooltip wrapped its label in a font-mono text-stat-value span instead of using the TooltipContent base styling (text-xs text-popover-foreground) like every other tooltip in the app. * Revert "fix: remove custom tooltip styling, use standard TooltipContent defaults" This reverts commit 209fbd2742. * fix: standardize all tooltips to match sidebar RowTooltip design Wrapped every TooltipContent child in a font-mono text-xs tabular-nums text-stat-value span so all tooltips across the app share a consistent look. Previously some used plain text, others used <p> elements with different fonts and sizes. * Revert "fix: standardize all tooltips to match sidebar RowTooltip design" This reverts commit 9e1d97d39e. * fix: bake standard tooltip styling into TooltipContent component Added font-mono tabular-nums text-stat-value directly to the TooltipContent base styles so every tooltip in the app inherits the same look without per-instance wrappers. Removed the now- redundant span from StackRow's RowTooltip. * fix: replace custom tooltip with shadcn/ui Radix tooltip Replaced the glass/blur-styled tooltip with the standard shadcn/ui pattern: bg-foreground/text-background, arrow pointer, proper slide/fade animations, and w-fit max-w-xs sizing. This gives all tooltips a consistent dark-solid look across the entire app. * fix: apply glass/blur design to shadcn tooltip component Replaced the solid bg-foreground/text-background style with the app's glass design: bg-popover, border-glass-border, backdrop-blur, and text-popover-foreground. Kept the shadcn structure (Portal, Arrow, slide/fade animations). * fix: replace native title tooltips with Radix tooltips on Fleet toolbar Converted Refresh, Export Dossier, Search, Sort direction, Node Update, and Manage Nodes buttons from native HTML title attributes to the shared Radix Tooltip component so they match the app-wide glass tooltip design. * fix: replace native title tooltip on Fleet Snapshots upload button * fix: replace native title tooltips with Radix tooltips on Resources page Converted all actionable button tooltips (Open stack, Inspect image, Scan, Browse volume, and delete buttons) plus the SenchoBadge informational tooltip. Wrapped disabled protected-resource delete buttons in span triggers so tooltips fire on disabled elements. * fix: replace native title tooltips with Radix tooltips on Security page Converted scanner info icon, exploitability n/a badge, and scan image button from native HTML title attributes to the shared Radix Tooltip component. * fix: replace native title tooltips with Radix tooltips on Schedules and Settings pages Converted Run now, Execution history, Edit, Delete buttons on Schedules; Download/Delete on Cloud Backup; Send test/Edit/Delete on Notification Routing; Reset 2FA on Users; and Edit/Remove suppression on Suppressions panel. Skipped SettingsSection/Modal title props which are React component props, not native HTML attributes. * feat: add copy button to execution history details column Replaced the plain truncated Details cell with a flex layout containing a copy button. Users can now copy the full error/output text instead of relying on the native title tooltip to read long messages. * fix: change tab highlight from neutral to brand color Replaced bg-glass-highlight with bg-brand/20 on all TabsHighlight instances and updated TabsTrigger active state to text-brand, matching the SegmentedControl selected style. Works on both dark and light themes. * fix: restructure Resources page tabs to match Fleet/Security pattern Moved tab band out of the outer card into a standalone full-width element. Replaced custom FilterToggle with Fleet-style Button toggles. Added search inputs per tab. Wrapped each resource table in a card container matching the Security Images table design. * fix: match Resources tab font size to Fleet and Security Removed explicit text-xs from Resources TabsTrigger elements so they use the default text-sm, matching Fleet and Security tab typography. * fix: restore missing closing bracket on TabsTrigger tag * fix: add aria-labels to schedule action buttons, update test selectors Replaced native title attributes with aria-labels on Run now, Execution history, Edit, and Delete buttons so the Radix tooltip conversion does not break test selectors that relied on title. Updated tests from findByTitle to findByRole. * fix: add fingerprint-based dismiss to post-deploy scan banner Created useScanBannerDismiss hook following the usePreflightDismiss pattern. The banner now persists dismissal in localStorage keyed to a fingerprint of scan status + attemptedAt. Dismissal survives page reloads for the same scan outcome, and the banner automatically reappears when a new scan runs or the status changes. * fix: update Configuration Status card labels and add new rows Notifications section: renamed Notification agents to Channels, Notification routing to Routing, added Mute Rules row linking to notification-suppression settings. Security section: added Trivy installed Yes/No row, renamed Vulnerability scanning to Scan policies. Backend: added trivyInstalled and suppressionRules fields to the /dashboard/configuration payload. * fix: style Trivy row as badge and link to Security scanner setup * fix: remove Mute button from stack anatomy panel header * Revert "fix: remove Mute button from stack anatomy panel header" This reverts commit 16843a81b5. * fix: remove Mute button from stack anatomy panel header * fix: remove unused stackMuteActions imports and props from StackAnatomyPanel The removal of the ActivityMuteKebab rendering left orphaned imports and props that cause TS6133 errors under strict mode. Clean up the imports, prop type, destructuring, and caller prop passes. * fix: refine anatomy tab sizing and add pulsing scroll chevron Changed anatomy tabs from 12px fixed height to 11px with py-1 padding, matching the Fleet tab approach. Bumped Files/Edit buttons from 10px to xs for better visibility. Added subtle animate-pulse to the right scroll chevron to hint at overflow tabs, gated behind the Reduced effects appearance setting. * fix: link reclaim hero number to heading style * fix: replace native title tooltips with Radix tooltips on stack detail page Converted Expand/Collapse logs, Stats unavailable, Copy service URL, Dismiss findings, Likely secret badge, Move up/down, and Remove buttons from native HTML title attributes to the shared Radix glass tooltip component. * fix: replace native title tooltip on image source link button * fix: add tooltips to container logs and bash session buttons * fix: add tooltip to download logs button * fix: add tooltip to copy digest button * fix: replace cursor-follow tooltip with Radix tooltip on severity badge * fix: add tooltips to density toggle buttons * feat: add expand button to multi-container health panel Added an expand/collapse toggle next to the density controls that expands the containers panel to fill the column and hides the logs section. The expand and logs-expand are mutually exclusive. Only appears for stacks with more than one container. * fix: reduce Structured/Raw terminal toggle font to 10px * fix: set compact density as default for multi-container stacks * fix: change Feedback to Open New Issue with GitHub issues link * fix: replace ExternalLink with GitHub icon for Open New Issue menu item * fix: restore ExternalLink import needed by other menu items * fix: default host threshold alerts to off for new installations * fix: resolve CI typecheck and test failures Broaden MenuRowProps.icon type to accept custom SVG components alongside lucide icons, fixing TS2741 on GitHubIcon import. Update host_alerts_enabled seed test assertion to match the new opt-in default of off (0). * fix: update ContainersHealth tests for compact default density Adjust three tests to reflect the new default of compact mode: - Rename 'detailed mode is the default' to 'compact mode is the default' - Update sparkline visibility checks to switch to detailed first - Rename remount test and verify reset to compact (new default)	2026-07-06 04:25:01 -04:00
Anso	6cc66faa8c	feat(mobile): standardize secondary pages and the stack list on the status masthead (#1374) ... * feat(security): reflow the node Security page for mobile Below the md breakpoint the Security page now reads as a phone surface instead of a squeezed desktop, with no change to the desktop layout. - Masthead stat cluster moves into a full-width 3-cell strip (critical / high / last scan) below the tab strip, since the masthead hides its inline cluster on a phone. - The eight-section tab strip becomes a horizontally scrollable mono row with an edge mask-fade and a cyan underline on the active tab; every section stays reachable by scroll. - The six totals render as a 3x2 hairline-divided grid instead of the 640px-wide rail that forced a horizontal scroll. - The Images tab becomes a filterable, scrollable list (severity dot, truncated ref, freshness, critical/high count tags) with a chip row, in place of the desktop table. - A freshness footer band states scan recency and scanner version. All mobile treatment is gated by useIsMobile() or max-md: utilities, so the desktop view is byte-identical. Charts are reused full-width. * feat(security): make the mobile Security page a bespoke masthead-led screen On a phone the Security page now drops the global top bar and leads with its masthead (the notifications + more-menu cluster moves into the masthead's right slot), matching Home and Fleet so the mobile shell is continuous across pages. The view is reclassified bespoke and rendered through the masthead-led path; the desktop layout is unchanged. The mobile "more" menu now lists every destination instead of omitting the bottom-tab views, so the same menu opens the same set on every screen rather than changing contents from page to page. * refactor(mobile): extract shared PageHead, sub-tabs, and chip-row primitives Add PageHead (the header for a pushed full-screen secondary view), MobileSubTabs (the mono tab scroller with the cyan active underline), and MobileChipRow (the cyan-filled filter chips) to the shared mobile-ui kit, and rewire the Security page's tab strip and Images filter to consume them. No visual change; this is the shared chrome the remaining mobile pages reuse. * feat(updates): make the mobile Updates page a bespoke masthead-led screen Below the md breakpoint the Auto-Update Readiness page becomes a pushed full-screen view: a PageHead (back chip, the rehomed notifications + more-menu, a "fleet readiness" crumb, and a Recheck action) leads, then a brand-tinted readiness hero, per-node sections, and one-up readiness cards that reuse the same risk badge, version delta, and apply/disabled logic as the desktop board. The desktop layout is unchanged. Reclassifies auto-updates as bespoke and renders it through renderMobileBespoke behind the same hub-only + capability gates as the desktop content path. Also lifts the PageHead, sub-tabs, and chip-row primitives' right-slot to host the rehomed global chrome. * feat(app-store): make the mobile App Store a bespoke masthead-led screen Below the md breakpoint the App Store becomes a pushed full-screen view: a PageHead (back chip, the rehomed notifications + more-menu, and an app-count crumb) leads, the category sidebar collapses into a horizontal chip scroller, and the featured hero plus the tile grid (already single-column on a phone) stack below. The featured hero, tile grid, and deploy sheet are shared with the desktop layout, which is unchanged. Reclassifies templates as bespoke and renders it through renderMobileBespoke. Adds tests for the shared chip row and sub-tabs. * feat(audit): make the mobile Audit Log a bespoke masthead-led screen Below the md breakpoint the Audit Log becomes a pushed full-screen view: a PageHead (back chip, the rehomed notifications + more-menu, an entry-count crumb, and Refresh) leads, then the Stream/Table sub-tabs and the stream view, where the signal-rail tiles fold to a 2x2 grid and the day-banded activity stream reflows. The columnar table reads best on a larger screen, so the Table tab points there on a phone. Desktop is unchanged. Reclassifies audit-log as bespoke behind the same hub-only + capability gates as the desktop content path. * feat(app-store): drop the featured hero and category chips on mobile On a phone the App Store is now search plus a single-column list of every matching app. The featured hero and the category chip row are removed; the would-be-featured app is folded into the list so nothing is dropped. Desktop keeps the featured hero, category sidebar, and grid. * feat(resources): make the mobile Resources page a bespoke masthead-led screen Below the md breakpoint Resources becomes a pushed full-screen view: a PageHead (back chip, the rehomed notifications + more-menu, a docker crumb) leads, then the reclaim hero, the disk-footprint segments, the 2x2 quick-clean grid, and the resource tabs. The raw resource tables scroll horizontally to fit; the detail sheets stay full-screen. The main content and the dialog/sheet overlays are shared with the desktop layout, which is unchanged. * chore(mobile): correct shared-primitive comments and dedupe the lazy fallback Fix the "shared by" consumer lists on the mobile-ui primitives, point the headerActions doc comments at the PageHead (not a masthead), drop the stale "all eight sections" count on the Security tab strip, rename a readiness-card test to match what it asserts, and extract a single Suspense fallback for the four bespoke phone-screen lazy imports. No behavior change. * feat(mobile): codify the fade+arrow tab scroller and fix the Resources tab clip Extract the horizontal tab scroller (edge fade + clickable chevron + wheel-to-horizontal) out of the stack anatomy panel into a shared ScrollableTabRow primitive, and adopt it in the stack anatomy tabs, the mobile sub-tabs (Security / Audit), and the Resources resource tabs. On a phone the Resources tabs now scroll horizontally, so the "Unmanaged" tab and its count no longer clip out of the frame. Desktop is unchanged. * feat(logs): make the mobile Logs page a bespoke masthead-led screen Below the md breakpoint the global Logs view drops the TopBar for a PageHead, hides the metrics rail, collapses the stream and level filters into a single Filters dropdown, turns the search into an icon that expands to an input, and folds the pause / clear / download controls into an expanding floating action button that retracts after each action. Desktop is unchanged. Reclassifies global-observability as bespoke behind the same hub-only gate as the desktop content path. * feat(mobile): standardize secondary pages on the status masthead Adopt the Home/Fleet/Security status masthead (cyan rail, kicker, serif- italic state word + tone dot, meta line, notifications + more-menu in the right slot) on every bespoke secondary page (Resources, App Store, Updates, Audit, Logs), replacing the title-led PageHead, which is removed. Each page derives a status word: Updates "Up to date" / "N pending", Logs Streaming / Idle / Offline, Audit Healthy / Review / Alerts, Resources Reclaimable / Tidy, App Store the app count. The "< Stacks" back chip is dropped (the bottom tab bar and more-menu own navigation), the page actions (Recheck, Refresh) move into the body, and the Updates readiness hero folds into the masthead. Also make the Resources tab tables scroll horizontally instead of clipping on the right. Desktop is unchanged. * feat(stacks): lead the mobile stack list with the status masthead On phones the stack list now opens with the shared status masthead instead of the global top bar plus an in-sidebar node row. The node switcher renders as a compact kicker chip in the masthead, the serif word summarizes stack health (down, updates, or all running), and notifications plus the more-menu sit in the right slot. This matches the Home, Fleet, and Security pages. The dropped top bar hosted global search, so the more-menu gains a Search item that opens the command palette. The masthead kicker now accepts either a styled kicker or a raw slot, enforced as a discriminated union so exactly one source is supplied. Desktop is unchanged: the new chrome is gated to the mobile shell and the sidebar rows hide via max-md only. * fix(stacks): only call the list "All running" when every stack is up The mobile stack masthead derived its health word from filterCounts, where up counts running stacks and down counts exited ones. Any other status, and the window before statuses load, counts as neither, so a list with no exited stacks but some not yet running fell through to "All running" even though it was not. Gate that label on up equal to all, and otherwise show the running count out of the total so the headline stays honest while statuses settle.	2026-06-14 22:21:46 -04:00