feat(ui): editorial overhaul ops/admin data-viz, sortable tables, mobile reflow, unsaved-changes guards - #10398
Merged
Merged
Conversation
…art a11y Prompt and completion were the same color (primary at 0.35 opacity), so the stacked token charts read as one blurry blob. Completion now uses a distinct data-viz hue (--color-data-3) at full opacity across the time chart, the per-model distribution bars, and the tooltip. The source-mix chart is no longer aria-hidden: it exposes role="img" with a label. Assisted-by: Claude:claude-opus-4-8 [Claude Code] Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
The admin Users table is now sortable by name, email, provider, role, status, and created date - clickable headers with an aria-sort state, a direction caret, and keyboard activation (Enter/Space). Permissions and Actions stay non-sortable. Assisted-by: Claude:claude-opus-4-8 [Claude Code] Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
Add a reusable UnsavedChangesGuard (router useBlocker + beforeunload) that prompts before navigating away or closing the tab with unsaved edits. Wired to Settings (existing isDirty) and AgentCreate (snapshot the loaded form, compare; suppressed while saving so the post-save redirect is not blocked). Adds the common.unsaved i18n keys. Assisted-by: Claude:claude-opus-4-8 [Claude Code] Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
Both trace tables are now sortable: the API table by method/path/status and the backend table by type/time/model/duration, with aria-sort, a direction caret, and keyboard activation. Sort and the expanded row reset when switching tabs (the two tables have different columns). Assisted-by: Claude:claude-opus-4-8 [Claude Code] Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
Dense admin tables sideways-scroll on phones. Add a reusable ResponsiveTable that mirrors the <thead> labels onto each body cell (data-label) and a <=640px stylesheet that stacks rows into label/value cards. Wired to both Users tables; reusable for the other dense tables next. Assisted-by: Claude:claude-opus-4-8 [Claude Code] Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
Apply ResponsiveTable to the remaining dense tables so they stack into label/value cards on phones instead of scrolling sideways. Harden the component for these tables: scope label-mirroring and the card CSS to direct children (nested detail tables render normally), override inline min-width on mobile, and pass through table/container inline styles. Nested expansion tables in Nodes/Models/Manage are intentionally left as-is. Assisted-by: Claude:claude-opus-4-8 [Claude Code] Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
Editing the long fine-tune job form and navigating away silently discarded everything. Snapshot the assembled getFormConfig() as a baseline, treat the open form as dirty when it diverges, and reuse UnsavedChangesGuard to prompt before leaving. The baseline is rebased after a job is submitted so leaving afterward does not warn. Assisted-by: Claude:claude-opus-4-8 [Claude Code] Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
mudler
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Phase 5 of the React UI editorial overhaul (continues #10390, which shipped Phases 1-4). Focus: the ops/admin surface - data visualization legibility, table usability, and protecting unsaved work.
What's in this PR
Data-viz legibility
aria-hidden(exposesrole="img"+ label).Sortable admin tables
aria-sort, a direction caret, and keyboard activation (Enter/Space).Mobile table reflow
ResponsiveTable: mirrors the<thead>labels onto each body cell (data-label) and a<=640pxstylesheet stacks rows into label/value cards instead of a sideways scroll. Scoped to direct children so nested detail tables render normally; overrides inlinemin-widthon mobile; passes through table/container inline styles.Unsaved-changes guards
UnsavedChangesGuard(routeruseBlocker+beforeunload+ ConfirmDialog) prompts before navigating away or closing the tab with unsaved edits.Testing
Notes
Deliberately left for follow-ups (low ROI or backend-blocked): ResourceMonitor CPU meter (no
cpufield in/api/resources), per-node VRAM meter (needs live nodes data), and a full MessageList/Composer extraction.Assisted-by: Claude:claude-opus-4-8 [Claude Code]
🤖 Generated with Claude Code