* fix(ui): lower-overhead Reduced effects path for constrained GPUs
Disable backdrop-filter glass and solidify chrome fills when data-effects is reduced (Calm default), with Appearance warning and docs for constrained rendering devices. Related to #1614.
* test(ui): harden Reduced effects glass e2e and docs wording
Parse Color Level 4 slash alpha so opacity asserts are not vacuously true, cover dialog/toast/overlay both ways with stable data-sn hooks, and soften troubleshooting copy that overstated the unmeasured diagnosis.
* docs(ui): lead constrained-GPU guidance with Reduced Motion
Rename the troubleshooting section to neutral GPU framing, point Appearance and docs at Reduced Motion first, and show the callout whenever Motion is off so Calm or Reduced effects alone do not hide the validated workaround.
* 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.
* fix(observability): gate global logs to admins, scope to managed containers, harden SSE
Make the Logs feed an administrator view enforced on both sides (requireAdmin on
the /api/logs/global poll and SSE routes; the Logs nav item plus a redirect guard
on the frontend), and scope the feed to Sencho-managed containers only via a
shared isManagedByComposeDir helper that /stats now reuses.
Harden the SSE stream: a stateful frame demuxer that survives chunk boundaries so
a Docker frame split across reads is reassembled instead of dropped or garbled; a
per-stream error listener so one broken follow stream cannot crash the event loop
(it posts a single degraded notice and keeps the others alive); a cap on
concurrent follow streams with a truncation notice; a bounded initial tail; and
backpressure that pauses the source streams when the client is slow and resumes on
drain. Bound the polling snapshot's per-container fan-out with a concurrency limit.
Add process-local, in-memory log-stream counters exposed at the admin-only
/api/system/log-stream-metrics endpoint (active connections, lines streamed,
attach and frame errors). Collapse the view to the local hub and remove the dead
remote-node handling.
* fix(observability): close remote-proxy bypass of the global-logs admin gate
The logs feed's requireAdmin lives in the local route handler, which the remote
proxy skips when forwarding a request whose nodeId targets a remote node. A hub
user could therefore request /api/logs/global*, /api/logs/global/stream, or
/api/system/log-stream-metrics with x-node-id (or ?nodeId= for the SSE transport)
pointing at a remote node and have it served as the node-proxy admin on the far
side, sidestepping the gate entirely.
Add these paths to HUB_ONLY_PREFIXES so hubOnlyGuard rejects a remote nodeId with
403 before the proxy runs, matching the existing protection on audit-log,
scheduled-tasks, and notification-routes. Add regression tests covering the
collection path, the SSE sub-path (both the x-node-id header and the ?nodeId=
query transport), and the stream-metrics endpoint.
Rework the Logs view into the cockpit language: a PageMasthead strip with
cyan rail, pulsing live dot, italic state word, and tracked-mono kicker;
a SignalRail of EVENTS/MIN (with rolling 60s sparkline), ERRORS, WARNINGS,
and CONTAINERS tiles; a segmented filter strip; a day-banded feed with
severity dots and whole-row tint on ERROR/WARN; and a floating glass chip
strip for pause/resume, clear, and download.
Decouple the live log stream from the Developer Mode toggle so SSE runs by
default for everyone, with polling as an invisible fallback when
EventSource is unavailable. Drop the Standard Log Polling Rate setting
and the global_logs_refresh key it persisted; Developer Mode still gates
Real-Time Metrics and Debug Diagnostics and nothing else.
Introduces the shared PageMasthead and SignalRail primitives for reuse
across other cockpit pages.
- Extract log parsing utilities (normalizeContainerName, parseLogTimestamp,
detectLogLevel, stripControlChars, demuxDockerLog) to shared module,
eliminating duplication between polling and SSE endpoints
- Fix timestamp regex to accept timezone offsets (+HH:MM/-HH:MM), not just Z
- Replace any[] with typed GlobalLogEntry interface
- Add SSE heartbeat (30s) to prevent reverse proxy timeouts
- Add X-Accel-Buffering: no header for nginx SSE compatibility
- Replace swallowed catch blocks with console.warn diagnostics
- Fix SSE not reconnecting on node switch (missing dep in effect array)
- Add settings change event so devMode/pollRate updates apply without remount
- Add log level filter (ALL/ERROR/WARN/INFO) to toolbar
- Replace overflow-auto div with ScrollArea for design system compliance
- Add strokeWidth={1.5} to all toolbar icons
- Include stack name in download format
- Surface fetch errors with inline banner
- Add 39 unit tests for all log parsing utilities
- Update docs with level filter documentation and refreshed screenshot
* feat(ui): add glassmorphism design tokens and utility classes
Introduce glass design system foundation: translucent oklch color
variables for both light and dark themes, glass/glass-border/glass-highlight
tokens, semantic status colors (success/warning/info), .glass and
.glass-strong utility classes with backdrop-filter, reduced shadow
values, and standardized spring animation presets in lib/motion.ts.
* feat(ui): apply glass treatment to core components
Update card, dialog, input, button, popover, sheet, tooltip,
dropdown-menu, context-menu, select, alert-dialog, and tabs
components with glassmorphism styling: translucent backgrounds via
new CSS variables, backdrop-blur layers, glass-border luminous
edges, and glass-highlight hover states.
* refactor(settings): decompose Settings Modal into section components
Extract 10 inline sections from the 1,987-line SettingsModal into
dedicated files under components/settings/. Introduce section
registry pattern replacing 14 conditional blocks. Add shared types,
sidebar navigation grouping with separators, glass treatment on
sidebar and nav buttons, and responsive modal height. SettingsModal
shell shrinks to ~380 lines.
* refactor(ui): unify all tabs to animate-ui TabsHighlight with glass styling
Migrate 4 tab instances (EditorLayout, FleetView, ResourcesView,
NotificationsSection) from inconsistent patterns (manual layoutId,
underline border-b-2, default fade) to the shared TabsHighlight
primitive with glass-highlight indicator and springs.snappy
transition. Standardize EditorLayout nav highlight spring config,
apply glass-highlight to sidebar stack list hover/active states,
and update mobile nav styling.
* refactor(ui): migrate hardcoded colors to semantic CSS variables
Replace hardcoded Tailwind color classes across ~19 component files
with semantic CSS variable classes: emerald/green to success,
orange/amber to warning, blue to info. Preserves brand/decorative
colors (Crown amber, Admiral blue). Enables consistent theming of
status indicators across the entire application.
* refactor(ui): Linear dark precision aesthetic — solid surfaces, depth cues, text hierarchy
Replace glassmorphism with Linear.app-inspired design: solid surface tokens
(card #111111, sidebar #0d0d0d, root #0a0a0a), backdrop-blur restricted to
floating overlays only (blur(10px) saturate(1.15)), desaturated teal accent,
font-weight 500 everywhere, monochrome chart palette, and three depth cues:
root ambient glow, luminous card top-edge, steep text brightness ramp.
* refactor(ui): precision polish — fix muddy dark, snowblind light, add design anchors
- Replace 34 hardcoded rgba values with theme-aware stat-* CSS tokens
- Fix light theme: solid white cards, off-white background, readable text
- Add card-border tokens with sharper directional lighting (top edge 2x)
- Add chart-grid/chart-tick tokens for theme-aware axis rendering
- Upgrade body glow: teal-tinted (dark), warm amber (light)
- Terminal-inspired sidebar: monospaced UP/DN status codes, Geist Mono
- Add tabular-nums to stat values to prevent layout jitter
- Light mode cards get shadow-sm for depth against off-white background
* refactor(ui): Linear materiality pass — ghosted nav, translucent sidebar, font unity
- De-escalate Delete button from solid destructive to ghost with hover fill
- Make sidebar translucent (80% opacity + backdrop-blur) so body glow bleeds through
- Bump dark nav accent to 0.07 for ghosted backlit selection
- Unify all terminal/editor fonts to Geist Mono (was JetBrains/Consolas mix)
- Add Monaco editor fontFamily for YAML/env editing consistency
- Add threshold-based color to Host RAM and Host Disk stat values (warn/crit)
* refactor(ui): material simulation — inherent depth, layer separation, recessed terminal
- Bump dark background 0.065→0.08, card surfaces 0.10→0.12 for 4% layer separation
- Add card-bevel token (inset top shimmer) for permanent structural depth
- Add button-inner-glow token for physical key feel on outline buttons
- Recess terminal with inset shadow and dimmed label
- Reduce action icon strokeWidth to 1.5 for refined industrial feel
- Add teal LED backlight bar on active nav item via blur pseudo-element
* fix(ui): parse usagePercent string to number for getValueColor
usagePercent is typed as string in SystemStats but getValueColor
expects number, causing TS2345 in CI builds.
- Replace catch (error: any) with catch (error) + (error as Error).message cast
in EditorLayout, NodeManager, HomeDashboard, AppStoreView
- Define TemplateVolume interface in AppStoreView; replace volumes any[] with typed array
- Define MetricPoint interface in HomeDashboard; replace metrics any[] with MetricPoint[]
- Define TerminalContainer type in BashExecModal; replace as any DOM property casts
- Define NodeTestInfo interface in NodeManager; replace info: any with typed shape
- Fix DockerNetworkStats cast in EditorLayout container stats WebSocket handler
- Remove unused catch variable (e) in api.ts and other components
- Cast streamFilter onValueChange val to union type in GlobalObservabilityView
- Add eslint-disable-next-line react-refresh/only-export-components to badge.tsx,
button.tsx, AuthContext, NodeContext, use-data-state, use-is-in-view
- Add eslint-disable-next-line react-hooks/set-state-in-effect in LogViewer
- Add /* eslint-disable */ to animate-ui third-party primitive files
key={idx} with a shifting .slice(-300) window meant every new log arrival
caused React to update all 300 existing DOM nodes (index 1 became 0, 2
became 1, etc.), even though only one entry actually changed.
The proposed content-hash fix (timestamp + containerName + message.substring)
carries a real collision risk: chatty containers emitting identical lines at
the same millisecond produce duplicate keys, triggering undefined React
reconciliation behaviour.
Fix: add a _id: number field to LogEntry, stamped client-side with a
monotonic counter (logIdRef) at the point of ingestion — once in the SSE
onmessage handler and once in the polling setLogs path. React now tracks
data identity rather than position, so the slice window can shift without
touching the 299 unchanged DOM nodes.
Playwright investigation revealed the Logs view (GlobalObservabilityView)
rendered 1,859+ log entries as real DOM nodes (9,616 total DOM nodes) with
no virtualization. Combined with a 5-second polling cycle replacing all
React elements each time and smooth-scroll animations stacking on every
update, the renderer process grew rapidly on a host running at 97% RAM
usage, crashing the browser tab with Out of Memory within minutes.
Fixes:
- Cap rendered DOM rows to MAX_DISPLAY_ROWS (300) via .slice(-300) so the
browser only ever holds ~1,500 log-related DOM nodes regardless of how
many entries are in state
- Add a truncation notice when log count exceeds the display cap
- Reduce SSE-mode in-memory log cap from 10,000 to MAX_LOG_ENTRIES (2,000)
- Switch auto-scroll from behavior:'smooth' to behavior:'instant' to stop
stacking layout animations on every 5-second poll
- Reduce /api/logs/global response limit from 2,000 to 500 lines since the
client renders at most 300 rows, making the extra payload wasteful
Task 1 - Network layer fixes:
- AppStoreView: replace raw fetch() with apiFetch() on /templates and
/templates/deploy so x-node-id header is injected for proxy routing
- GlobalObservabilityView: replace raw fetch() with apiFetch() on
/stacks and /logs/global
- HostConsole: append ?nodeId= to WebSocket URL so the upgrade handler
correctly routes the PTY session to the active remote node
Task 2 - Scoped context two-tier UX (Option A / Portainer-style):
- EditorLayout: add a context pill in the top header bar showing the
active node name (pulsing blue for remote, green for local)
- HostConsole: header now reads "Host Console - [Node Name]"
- ResourcesView: title now reads "Resources Hub - [Node Name]" for remote
- GlobalObservabilityView: floating node badge in top-left corner for remote
- AppStoreView: deploy sheet shows "Deploying to: [Node Name]" badge
- SettingsModal: remote nodes only see System Limits + Developer tabs;
global-only tabs (Account, Appearance, Notifications, Nodes) are hidden;
header subtitle shows remote node name
- Cap GlobalObservabilityView SSE log array at 10,000 entries to prevent
unbounded memory growth during long dev-mode sessions
- Break NodeContext infinite re-fetch loop by replacing the activeNode
closure dependency in refreshNodes with a useRef read, making the
callback stable and preventing the useEffect -> setState -> useCallback
-> useEffect cycle
Anso