2 commits

Author	SHA1	Message	Date
Marco Beretta	4f5c9fec4f	🎨 refactor: adopt the @librechat/client design system (semantic color tokens + component migration) (#13879) ... * refactor: unify Tailwind color tokens into a single source Both the client SPA and @librechat/client Tailwind configs now consume one createTailwindColors() map, eliminating config drift. Fixes the package-side build along the way: shadcn tokens are wrapped in hsl(), the broken opacity helper is removed, and text-destructive/border-destructive/switch-unchecked plus the gray/green palettes are included. * refactor: replace hardcoded colors in sidebar conversation list with tokens Migrate the Conversations sidebar section to semantic tokens: focus rings to ring-text-primary (keeps >=3:1 contrast in both modes; the mid-gray ring would fail WCAG 1.4.11 on dark), the active-conversation indicator and hover-fade gradient to surface/text tokens, and the pagination controls. Removes every dark: color twin; no behavior change. * feat: add semantic status-color tokens; migrate MCP status badge Add a status-color layer (status-{success|info|warning|error|neutral} plus -subtle variants) to style.css and the unified createTailwindColors map, with a blue palette for the info hue. Migrate MCPStatusBadge (badges + dots) and MCPCardActions to the new tokens, removing all hardcoded status colors and dark: twins. Status colors are now themeable like the rest of the system. * refactor: migrate status badges to semantic status-color tokens Migrate the genuine status badges to the status-* tokens: MCPConfigDialog connection pills (info/warning/neutral/error/success + dot), MemoryUsageBadge usage levels, and DialogImage quality badge (also gains dark-mode support it previously lacked). Removes hardcoded colors and dark: twins. * feat: add Alert component and migrate alert banners to it Add a reusable Alert component (@librechat/client) with error/success/warning/ info/neutral variants backed by the status-color tokens, default per-variant icons, and role=alert. Migrate the duplicated colored-div banners to it: Auth ErrorMessage, RequestPasswordReset success, and the identical error boxes in ToolSelectDialog, AssistantToolsDialog, and MCPToolSelectDialog. * refactor: migrate remaining alert banners and error states to tokens Migrate the last banners to the Alert component: ResetPassword success, MessageContent connection error, and MemoryInfo storage-full errors. Tokenize the Agents ErrorDisplay error state in place (icon badge, headings, message, retry button) since it's a full error state, not a compact callout. Also tokenize ResetPassword field-validation errors to text-text-destructive (fixes the low-contrast dark:text-red-900). * refactor: tokenize SidePanel Memories/Parameters/Bookmarks colors Delete-confirm buttons to surface-destructive tokens (MemoryCardActions, BookmarkCardActions), drop redundant text-white on submit Buttons (the variant already sets it), legacy preset button green hover/focus to submit tokens, and slider hover borders to border-light. Leaves DynamicCheckbox dark overrides for a separate pass against the Checkbox component. * refactor: tokenize Settings danger/destructive buttons Map the DangerButton, the Data tab destructive actions (RevokeKeys, ClearChats, DeleteCache), and the DeleteAccount button from bg-red-*/bg-destructive to the surface-destructive tokens. * refactor: tokenize Chat file-upload table and upload status colors Tokenize TemplateTable th/td/border classes (surface-primary, border-light, text-primary/secondary) and FileUpload status colors (text-text-secondary, text-text-destructive, text-status-success) plus the import button hover. * fix: explicit type annotations on Alert for isolatedDeclarations @librechat/client builds with tsdown --isolatedDeclarations, which requires exported consts to have explicit type annotations (TS9010). Annotate alertVariants and Alert to match the Button.tsx pattern. * refactor: add soft status-border token layer for Alert and lighten dark status foregrounds * refactor: tokenize Chat menus, popovers, and message surfaces * refactor: tokenize Chat message content, tool output, and file UI colors * refactor: add semantic link color token and migrate hyperlinks to it * refactor: tokenize Files and Auth surfaces, text, borders, and CTAs * refactor: add accent-primary brand token; tokenize Nav/Input/Prompts/Endpoints colors * refactor: tokenize Auth brand-green accents, Skills, Sharing, Plugins, MCP colors * refactor: tokenize OAuth, Share, ui, Bookmarks, Tools, Messages, Web, SharePoint colors * refactor: final solid-color cleanup (brand-green accents, neutral grays, error text) * refactor: migrate status callout banners to status-subtle/border tokens * refactor: tokenize token-usage gauge, mic, and oauth countdown status colors * refactor: replace shadcn color vocabulary with semantic tokens Remove the shadcn/ui color tokens (background, foreground, card, popover, muted, accent, secondary, destructive, input) and migrate every usage to LibreChat semantic surface/text/border tokens. Add surface-inverted/text-inverted for the neutral inverted CTA and surface-fixed/text-fixed for controls that must not flip with the theme (favicon chips, QR container, carousel arrows). New tokens are defined once in style.css (light + dark), createTailwindColors, the theme types, applyTheme and the default/dark theme objects so they stay overridable at runtime. Collapse paired dark: color variants into the dark-aware tokens and tokenize the remaining raw palette and white/black utilities, mapping status colors to the status-* tokens and legacy ring-black/ring-white focus rings to ring-text-primary. Retain the background, primary and ring tokens, which are still referenced by the SidePanel/Agents and SidePanel/Builder panels (excluded from this pass). * refactor: tokenize remaining status, neutral and message-text colors Map the leftover semantic colors to tokens: skill error/dirty states and the selected-version/selected-skill highlights move to status-warning/status-success, the global indicator to status-success, and the markdown message text to text-text-primary. Drop the redundant dark: overrides on the dynamic checkbox, which the Checkbox primitive already handles. What remains is intentional and stays raw: categorical color sets (category icons, principal avatars, per-tool toggle accents), brand marks, the WCAG-tuned toast severities, code/diagram surfaces, scrims, and text-white on submit/destructive action surfaces. * refactor: remove unused CSS rules, dead comments, and duplicate keyframes Drop ~829 lines of dead styles across style.css (2992->2355) and mobile.css (323->131): unreferenced classes (legacy token utilities, orphaned animations, form/prose/scrollbar leftovers), commented-out blocks, and duplicate/orphaned keyframes. Library-injected (hljs, sandpack, codemirror, markdown language) and dynamically-applied (scroll-animation, icon sizes) classes were retained. * fix: resolve ESLint and frontend test failures - Format with prettier (Alert, MCPStatusBadge, ApiKeys, Memory, etc.) after --no-verify commits skipped the hook - Localize the 'Or' auth divider (com_auth_or) instead of a bare literal - Drop dead InvocationModePicker imports in Skill forms; fix VerifyEmail unused arg + useEffect deps - Revert out-of-scope color edits in legacy Files/VectorStore views that carried pre-existing untranslated-string lint debt - Update Memory tests to assert status-* tokens (text-status-error, bg-status-error-subtle) instead of the old hardcoded red classes * refactor: migrate theme tokens to RGB channels for opacity support Convert semantic + palette CSS variable values in style.css from hex to bare 'R G B' channel triplets, and emit Tailwind colors as rgb(var(--token) / <alpha-value>) via createTailwindColors. This makes opacity modifiers (bg-surface-primary/50, bg-border-medium/60, etc.) resolve correctly and remain dark-aware, fixing ~26 existing usages that previously fell back to a hardcoded light hex. - Wrap direct var(--token) color usages in CSS rules as rgb(var(--token)) (style.css, Dropdown.css, Tooltip.css) and two inline component styles - applyTheme writes bare triplets to match the new wrapping - shadcn tokens (HSL) and the JS palette (hex) are unchanged * fix: prettier formatting after dev rebase * refactor(client): migrate low-risk primitives to @librechat/client Swap raw <label>, <textarea>, and native title= tooltips for the @librechat/client Label, Textarea, and TooltipAnchor components across Agents, Endpoints settings, Export modal, Prompts, Sharing, and Memory dialogs. Add localization keys (scroll, sibling navigation, none selected, select var) for the remaining swap waves. * refactor(client): migrate buttons, inputs and labels to @librechat/client Swap raw <button>, <input> and <label> elements for the @librechat/client Button, Input and Label components across Auth, Chat, Conversations, Endpoints, Nav, Prompts, Skills, Tools and Web. Preserve bespoke geometry and behavior via cn className merging, keep data-testid/aria wiring, and localize previously hardcoded aria-labels. Skip swaps that would break floating-label animations, tiny bespoke controls or inline-text links. Add com_ui_reload_page key. * refactor(client): migrate dialogs, toggles and remaining controls to @librechat/client Swap behavioral controls for @librechat/client equivalents: HeadlessUI and legacy dialogs to OGDialog, native checkbox/switch to Checkbox/Switch (onCheckedChange), and remaining buttons/inputs across Chat, Skills, Tools, Sharing, Memories and Settings. Convert applicable native title= tooltips to TooltipAnchor and localize close/scroll aria-labels. Skip swaps that would break floating-label animations or bespoke select behavior. Update co-located test mocks to provide the newly-used Button and cn dependencies. * style(client): soften dropdown and settings search inputs Remove the heavy focus ring on the settings search and the searchable Dropdown's search input, replacing it with a subtle border-light. Make the search field background inherit the dropdown surface so it matches in both light and dark mode, and reduce the Dropdown trigger border from medium to light. * refactor(client): migrate Agent Builder and Tool Library to @librechat/client Swap raw buttons, inputs, labels, textareas and native title tooltips for the @librechat/client Button/Input/Label/Textarea/TooltipAnchor components across the Agent Builder panel (SidePanel/Agents) and the Tools marketplace. Remove heavy input focus rings in favor of subtle borders, soften dropdown trigger borders, and convert stray shadcn/raw colors in touched lines to semantic tokens. Localize the tool delete aria-label and toast messages. Update co-located test mocks to provide the newly-used Button component. * fix(client): keep Input border static on pointer focus The pointer-focus override in Field.css used border-color: var(--border-light), which became an invalid value after the theme moved to RGB channel tokens and was silently dropped, letting the border fall back to currentColor (text-primary) on mouse focus. Wrap it in rgb() so mouse focus produces no border, ring, or outline change; keyboard focus keeps its ring for accessibility. * refactor(client): remove residual shadcn color tokens The background/primary/primary-foreground/ring and unused chart-* tokens were retained only for the then-unmigrated Agent Builder. With that panel migrated, replace the last usages with LibreChat semantic tokens (ring-primary/ring-ring -> ring-text-primary; bg-primary/text-primary-foreground -> bg-surface-inverted /text-text-inverted; text-primary -> text-text-primary; bg-background -> bg-surface-primary) and drop the token definitions from createTailwindColors, applyTheme, the theme objects, types, and style.css. * fix(client): address semantic theme review feedback * fix(client): use boolean Monaco hover option * fix(client): resolve CI validation failures * test(client): update shared component mocks * fix(client): expose status tokens to runtime themes and document channel format Add the status, text-destructive and border-destructive families to IThemeRGB, IThemeVariables, IThemeColors, mapTheme and the bundled light/dark themes so ThemeProvider consumers can theme Alert and the status badges instead of falling back to the stylesheet palette. Update the theme README to document the channel-triplet contract that the RGB migration introduced, since the previous examples used complete CSS colors that now produce invalid declarations. * test(e2e): use accessible message action locators * fix(client): address theme env, dialog padding and locked button review feedback Expose every IThemeRGB token through REACT_APP_THEME_* instead of the hand-maintained subset that omitted the status, destructive, inverted and fixed families. Drop the padding OGDialogContent contributes to the Tool Library so the header divider spans the panel again, and stop disabled:opacity-100 from overriding the locked delete-account button's dimmed state. * fix(client): read theme environment variables from the build-time env getThemeFromEnv read process.env, which vite-plugin-node-polyfills replaces with an empty shim in the browser, so every REACT_APP_THEME_* value was dropped and the loader always returned undefined. Read import.meta.env instead and register the REACT_APP_THEME_ prefix with Vite so the values are inlined at build time. The env source is now a parameter, which lets the tests cover the mapping without mutating globals. * fix(client): replace Tailwind classes that no longer resolve Several class names in the client and shared component package emit no CSS rule at all: legacy token- names with no definition, Tailwind v1/v4 names, and plain typos. They fail silently past typecheck and tests. - text-md -> text-base (Tailwind has no md font size) - text-grey-100, text-tertiary -> text-text-tertiary - text-token-secondary -> text-text-secondary - bg-token-surface-primary/tertiary, bg-token-main-surface-secondary and border-token-border-hover -> their semantic tokens - bg-surface, bg-surface-50 -> bg-surface-primary - bg-surface-primary-hover -> bg-surface-hover - outline-hidden -> outline-none where focus styling already exists - drop focus:shadow-outline, border-d-0 and the malformed ring-offset-ring-offset, which have no meaningful replacement MemoryArtifacts keeps its default outline instead of gaining outline-none, since that button has no other focus indicator. MentionItem drops its dead background rather than adopting one, which would have matched its hover colour and erased the hover affordance. Localize the two literal strings the pre-commit lint flagged in the touched files, reusing the existing com_ui_upload_image and com_ui_more_count keys. --------- Co-authored-by: Danny Avila <danny@librechat.ai>	2026-08-06 09:15:17 -04:00
Danny Avila	cdf437dc5b	🪺 fix: Keep Preempt-Abandoned Siblings Nested, Make Message Tree Order-Robust (#14587) ... * 🪺 fix: Keep Preempt-Abandoned Siblings Nested, Make Message Tree Order-Robust * 🔗 fix: Sever Cycle Back-Edges So the Returned Message Tree Is Acyclic * 🧪 fix: Satisfy TFile in buildTree Spec fileMap Fixture * 🌲 fix: Assert Repaired Trees in convoStructure Specs, Uncharge Self-Parent Edges * 📌 feat: Identity-Stable Sibling Selection Across Background Tree Churn * 🎭 test: E2E Coverage for Thread Fold and Sibling Selection Invariants * 🔑 fix: Treat Newest-Sibling Re-Key as Hydration, Not a New Branch * 🧭 fix: Rebind Sibling Selection Per Parent, Detect Appends by Membership	2026-08-02 07:04:52 -04:00