Files
LocalAI/core/http/react-ui/src/theme.css
LocalAI [bot] f68edfc85f feat(ui): editorial UI/UX overhaul - design language, shell/nav, conversation/canvas, sub-menus (#10390)
* feat(ui): add Fraunces variable serif + --font-serif token

Assisted-by: Claude:claude-opus-4-8 [Claude Code]
Signed-off-by: Ettore Di Giacinto <mudler@localai.io>

* feat(ui): serif display tier + section-heading typography scale

Assisted-by: Claude:claude-opus-4-8 [Claude Code]
Signed-off-by: Ettore Di Giacinto <mudler@localai.io>

* feat(ui): un-overload accent — nav rail, stronger focus ring, neutral hover

Assisted-by: Claude:claude-opus-4-8 [Claude Code]
Signed-off-by: Ettore Di Giacinto <mudler@localai.io>

* feat(ui): orchestrated page reveal + stagger motion primitives

Assisted-by: Claude:claude-opus-4-8 [Claude Code]
Signed-off-by: Ettore Di Giacinto <mudler@localai.io>

* refactor(ui): fix dead token refs + dedupe toggle to one primitive

Migrate all .toggle-slider consumers (Users, Chat, AgentChat) to the
canonical BEM toggle primitive and delete the legacy duplicate CSS block.

Assisted-by: Claude:claude-opus-4-8 [Claude Code]
Signed-off-by: Ettore Di Giacinto <mudler@localai.io>

* refactor(ui): route boot fallback through the LoadingSpinner primitive

Assisted-by: Claude:claude-opus-4-8 [Claude Code]
Signed-off-by: Ettore Di Giacinto <mudler@localai.io>

* feat(ui): EmptyState primitive with serif title

Assisted-by: Claude:claude-opus-4-8 [Claude Code]
Signed-off-by: Ettore Di Giacinto <mudler@localai.io>

* feat(ui): Skeleton shimmer primitive

Assisted-by: Claude:claude-opus-4-8 [Claude Code]
Signed-off-by: Ettore Di Giacinto <mudler@localai.io>

* feat(ui): PageHeader + SectionHeading editorial primitives

Assisted-by: Claude:claude-opus-4-8 [Claude Code]
Signed-off-by: Ettore Di Giacinto <mudler@localai.io>

* feat(ui): StatusPill primitive + time-of-day greeting helper

Assisted-by: Claude:claude-opus-4-8 [Claude Code]
Signed-off-by: Ettore Di Giacinto <mudler@localai.io>

* feat(ui): Home editorial header + status line (north-star redesign)

Assisted-by: Claude:claude-opus-4-8 [Claude Code]
Signed-off-by: Ettore Di Giacinto <mudler@localai.io>

* feat(ui): Home loaded-models skeleton list, button hierarchy, EmptyState wizard

Assisted-by: Claude:claude-opus-4-8 [Claude Code]
Signed-off-by: Ettore Di Giacinto <mudler@localai.io>

* fix(ui): single focus ring (no double-ring) + neutralize stagger delay under reduced motion

Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
Assisted-by: Claude:claude-opus-4-8 [Claude Code]

* refactor(ui): all-sans editorial headings + tint-only active nav

Per design review, pivot the heading strategy from hybrid-serif to a
refined grotesk: drop the Fraunces dependency, token, and import; page
titles, the Home greeting, and section/empty-state titles now use Geist
at semibold with the editorial fluid sizing and tight tracking. No serif
anywhere.

Active sidebar item is now a tint-only treatment (accent text + tinted
background); the left accent rail is removed and the shared base
.nav-item.active inset bar is suppressed in the sidebar (as the console
rail already does). Update the design-system e2e specs to assert the
sans display font and the tinted-background active state.

Assisted-by: Claude:claude-opus-4-8 [Claude Code]
Signed-off-by: Ettore Di Giacinto <mudler@localai.io>

* test(e2e): add --host flag to ui-test-server

Allow binding the e2e/preview server to an arbitrary address (e.g.
0.0.0.0 to review the UI from another device on the LAN). Defaults to
127.0.0.1 so existing e2e behavior is unchanged.

Assisted-by: Claude:claude-opus-4-8 [Claude Code]
Signed-off-by: Ettore Di Giacinto <mudler@localai.io>

* refactor(ui): declutter Home - discoverable + dismissable API, vertical balance

Home felt overloaded and top-heavy. Three changes from review:
- The API endpoint catalog (12 endpoints) is collapsed by default behind a
  "Browse the API" disclosure; only the base URL + copy stay visible, so the
  catalog is discoverable without dominating the page.
- The whole connect card is dismissable (x): dismissing unmounts it so the
  vertical space is recovered, and the choice is remembered (localStorage).
- .home-page now fills its column and vertically centers its content when
  there is slack, so sparse states (no models / card dismissed) read as a
  balanced launcher instead of content jammed at the top. Overflow-safe:
  tall content flows from the top and scrolls.

Adds connect.browse / connect.hide / connect.dismiss i18n keys to all locales.

Assisted-by: Claude:claude-opus-4-8 [Claude Code]
Signed-off-by: Ettore Di Giacinto <mudler@localai.io>

* feat(ui): editorial PageHeader with section eyebrow + scroll-to-top on nav

PageHeader now derives its eyebrow from the route's section/console (Build /
Operate / Create) via sectionKeyForPath, so pages get a consistent, meaningful
eyebrow with no per-page wiring (override with the eyebrow prop, suppress with
eyebrow={null}). Settings adopts it as the first consumer.

Also fix a navigation scroll bug: the default layout uses the document as its
scroll container and route changes did not reset it, so navigating the console
rail from a scrolled page landed mid-view. App now scrolls to top on pathname
change.

Assisted-by: Claude:claude-opus-4-8 [Claude Code]
Signed-off-by: Ettore Di Giacinto <mudler@localai.io>

* refactor(ui): adopt PageHeader on agent/media/import/backend pages (batch A)

Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
Assisted-by: Claude:claude-opus-4-8 [Claude Code]

* refactor(ui): adopt PageHeader on ops/admin/media pages (batch B)

Replace hand-rolled .page-header title blocks with the shared editorial
PageHeader component across 14 pages (Manage, Middleware, Models,
NodeBackendLogs, Nodes, P2P, SkillEdit, Skills, Sound, Traces, TTS, Usage,
Users, VideoGen). Title/subtitle move into PageHeader; header-own action
clusters (Models stats+buttons, Skills search+buttons) move into the actions
slot. Tabs, filters, stat cards, ResourceMonitor and page body stay as
siblings. Eyebrow is left to auto-derive from the route.

Assisted-by: Claude:claude-opus-4-8 [Claude Code]
Signed-off-by: Ettore Di Giacinto <mudler@localai.io>

* test(ui): home greeting asserts sans font, not the dropped serif

The greeting render-smoke still asserted Fraunces; update it to assert the
Geist sans display font (and not Fraunces), matching the all-sans direction.

Assisted-by: Claude:claude-opus-4-8 [Claude Code]
Signed-off-by: Ettore Di Giacinto <mudler@localai.io>

* feat(ui): ThemeToggle i18n + animated icon, drop transition:all

The theme toggle hard-coded its English tooltip; route it through the existing
nav switchToLightMode/switchToDarkMode keys and add an aria-label. The sun/moon
icon now replays a small rotate+fade on theme change (keyed remount; honored by
the global reduced-motion block). Replace the .theme-toggle `transition: all`
with explicit properties.

Assisted-by: Claude:claude-opus-4-8 [Claude Code]
Signed-off-by: Ettore Di Giacinto <mudler@localai.io>

* feat(ui): canvas drag-to-resize + slide-in, fix hooks order, typed download

Canvas was a fixed pane; make it a workbench:
- Drag the panel's left edge to resize (clamped 360px..75vw), persisted to
  localStorage, double-click to reset; hidden and full-width on narrow screens.
- Slide-in/fade on open via canvasSlideIn (honored by reduced-motion).
- Fix a rules-of-hooks bug: the `if (!current) return null` early return sat
  above useEffect, so the hook count changed when artifacts emptied. All hooks
  now run unconditionally before the guard.
- Downloads use the artifact language's real extension + MIME (a Python
  artifact saves as .py, not .txt) via extensionForLanguage.

Assisted-by: Claude:claude-opus-4-8 [Claude Code]
Signed-off-by: Ettore Di Giacinto <mudler@localai.io>

* feat(ui): per-message code blocks get a language header + copy button

Chat code blocks now render inside a framed block with a header showing the
language and a copy button (delegated handler, copies the block and flips to a
check briefly). Decoration + highlighting run from a MutationObserver scoped to
the messages container, which fires reliably for streamed responses AND for
chats loaded/switched from storage - the prior render-keyed effect missed the
load path (code was left unhighlighted on reload). The observer disconnects
while mutating so it does not retrigger on its own edits.

Assisted-by: Claude:claude-opus-4-8 [Claude Code]
Signed-off-by: Ettore Di Giacinto <mudler@localai.io>

* feat(ui): image attachments show a thumbnail in the composer

Staged image attachments now preview as a 28px thumbnail (from their data URL)
instead of a bare file icon; other types keep the icon. File names truncate and
the remove button gets an aria-label.

Assisted-by: Claude:claude-opus-4-8 [Claude Code]
Signed-off-by: Ettore Di Giacinto <mudler@localai.io>

* feat(ui): jump-to-latest pill when scrolled up in chat

When the user scrolls away from the bottom of a conversation, a floating
"Jump to latest" pill appears (sticky, centered above the composer); clicking
it smooth-scrolls to the newest message and re-pins auto-scroll. Resets on
chat switch. Adds the chat.actions.jumpToLatest i18n key to all locales.

Assisted-by: Claude:claude-opus-4-8 [Claude Code]
Signed-off-by: Ettore Di Giacinto <mudler@localai.io>

* feat(ui): canvas fullscreen toggle + keyboard tab navigation

The canvas header gains a fullscreen toggle (expands the panel to cover the
viewport; resize handle hidden while fullscreen). The artifact tab strip is now
a proper ARIA tablist with roving tabindex and Left/Right arrow-key navigation.

Assisted-by: Claude:claude-opus-4-8 [Claude Code]
Signed-off-by: Ettore Di Giacinto <mudler@localai.io>

* feat(ui): image result lightbox (zoom, prev/next, download, keyboard)

Generated/history images on the Image page are now clickable, opening a
fullscreen Lightbox with a download button, prev/next navigation, an N/M
counter, and keyboard control (Esc to close, Left/Right to navigate). Adds a
reusable `Lightbox` component (usable later for Video) and the media.image
.actions.view i18n key.

Assisted-by: Claude:claude-opus-4-8 [Claude Code]
Signed-off-by: Ettore Di Giacinto <mudler@localai.io>

* feat(ui): generation progress with placeholder tiles + elapsed timer

Image generation replaces the bare spinner with a GenerationProgress scaffold:
shimmer placeholder tiles matching the requested count plus a live elapsed-time
readout, so the (often slow) wait feels accountable. Reusable for the other
media generation pages.

Assisted-by: Claude:claude-opus-4-8 [Claude Code]
Signed-off-by: Ettore Di Giacinto <mudler@localai.io>

* feat(ui): generation progress on Video, TTS, and Sound pages

Reuse GenerationProgress (placeholder tile + elapsed timer) in place of the
bare spinner on the remaining media generation pages, so every slow generation
gives the same accountable feedback.

Assisted-by: Claude:claude-opus-4-8 [Claude Code]
Signed-off-by: Ettore Di Giacinto <mudler@localai.io>

* feat(ui): agent chat gets per-message code-copy + reliable highlighting

AgentChat now shares Chat's code-block treatment: it runs highlightAll +
enhanceCodeBlocks from a MutationObserver on its messages container (the same
proven path), so agent responses get language headers, copy buttons, and
highlighting that fires for both streamed and loaded messages - closing the
divergence with the main chat without a large refactor.

Assisted-by: Claude:claude-opus-4-8 [Claude Code]
Signed-off-by: Ettore Di Giacinto <mudler@localai.io>

* feat(ui): Talk voice visualizer

Add a hero frequency-bar visualizer at the top of the Talk page so users get
ambient feedback that they are heard and that the assistant is speaking - the
audit's main Talk gap (the only prior feedback was a small status pill; the
waveform was buried in the dev diagnostics panel).

VoiceVisualizer is self-contained: it builds its own AudioContext + analysers
from the output <audio> stream (speaking) and the mic stream (listening) so it
does not touch the existing WebRTC/diagnostics graph. Bars are status-tinted
(idle/connected/listening/speaking/error) and animate with a gentle idle wave
when not connected. Live mic/output animation is exercised on a real session.

Assisted-by: Claude:claude-opus-4-8 [Claude Code]
Signed-off-by: Ettore Di Giacinto <mudler@localai.io>

---------

Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
Co-authored-by: Ettore Di Giacinto <mudler@localai.io>
2026-06-18 23:03:27 +02:00

265 lines
9.3 KiB
CSS

/* LocalAI Theme — Nord palette (polar night + frost + aurora).
Adapted from claudemaster's Nord preset. Variable names preserved. */
:root,
[data-theme="dark"] {
/* Surfaces — deep blue-black, beyond polar night */
--color-bg-primary: #13171f; /* page — very dark, cool */
--color-bg-secondary: #1a1f2a; /* sidebar, headers, cards */
--color-bg-tertiary: #242a36; /* wells / sunken rows */
--color-bg-overlay: rgba(19, 23, 31, 0.92);
--color-bg-hover: #242a36;
--color-surface-raised: #1a1f2a;
--color-surface-sunken: #0e1117;
--color-surface-hover: #242a36;
--color-surface-elevated: #2f3644;
/* Primary — frost cyan (nord8) */
--color-primary: #88c0d0;
--color-primary-hover: #9ccbd9;
--color-primary-active: #7ab4c4;
--color-primary-text: #2e3440;
--color-primary-light: rgba(136, 192, 208, 0.14);
--color-primary-border: rgba(136, 192, 208, 0.34);
--color-secondary: #81a1c1; /* nord9 */
--color-secondary-hover: #8faed0;
--color-secondary-light: rgba(129, 161, 193, 0.12);
/* Accent alias — frost cyan remains the brand accent */
--color-accent: #88c0d0;
--color-accent-hover: #9ccbd9;
--color-accent-light: rgba(136, 192, 208, 0.14);
--color-accent-border: rgba(136, 192, 208, 0.34);
/* Text — snow storm scale */
--color-text-primary: #eceff4; /* nord6 */
--color-text-secondary: #d8dee9; /* nord4 */
--color-text-muted: #a1acb9;
--color-text-tertiary: #8a96a5; /* slightly dimmer than muted, still WCAG AA on dark surfaces — used for metadata */
--color-text-disabled: #6e7a8c;
--color-text-inverse: #2e3440;
/* Borders — cool blue-gray */
--color-border-subtle: rgba(216, 222, 233, 0.06);
--color-border-default: rgba(216, 222, 233, 0.12);
--color-border-strong: rgba(216, 222, 233, 0.24);
--color-border-divider: rgba(216, 222, 233, 0.05);
--color-border-primary: rgba(136, 192, 208, 0.45);
--color-border-focus: rgba(136, 192, 208, 0.45);
/* Status — aurora */
--color-success: #a3be8c; /* nord14 */
--color-success-light: rgba(163, 190, 140, 0.14);
--color-success-border: rgba(163, 190, 140, 0.32);
--color-warning: #ebcb8b; /* nord13 */
--color-warning-light: rgba(235, 203, 139, 0.14);
--color-warning-border: rgba(235, 203, 139, 0.32);
--color-error: #bf616a; /* nord11 */
--color-error-light: rgba(191, 97, 106, 0.14);
--color-error-border: rgba(191, 97, 106, 0.32);
--color-info: #81a1c1; /* nord9 */
--color-info-light: rgba(129, 161, 193, 0.14);
--color-info-border: rgba(129, 161, 193, 0.32);
--color-modal-backdrop: rgba(8, 11, 17, 0.68);
--color-focus-ring: rgba(136, 192, 208, 0.7); /* was 0.34 - AA-visible */
--color-eyebrow: #d8b48c; /* muted Nord-aurora brass for editorial eyebrows */
/* Data viz — full aurora + frost palette */
--color-data-1: #88c0d0; /* frost cyan */
--color-data-2: #bf616a; /* red */
--color-data-3: #b48ead; /* purple */
--color-data-4: #ebcb8b; /* yellow */
--color-data-5: #a3be8c; /* green */
--color-data-6: #d08770; /* orange */
--color-data-7: #81a1c1; /* blue */
--color-data-8: #8fbcbb; /* teal */
/* Log streams — tuned to Nord aurora */
--color-log-stdout: #d8dee9;
--color-log-stderr: #bf616a;
--color-log-info: #88c0d0;
--color-log-warn: #ebcb8b;
/* Shadows — cool, deeper */
--shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.5);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 4px 14px rgba(0, 0, 0, 0.45);
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.55), 0 20px 48px rgba(0, 0, 0, 0.65);
--shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.6), 0 28px 64px rgba(0, 0, 0, 0.7);
--shadow-glow: var(--shadow-md);
--shadow-sidebar: 1px 0 0 rgba(216, 222, 233, 0.06);
--shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.05);
--shadow-inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.18);
/* Motion */
--duration-fast: 120ms;
--duration-normal: 180ms;
--duration-slow: 260ms;
--ease-default: cubic-bezier(0.22, 1, 0.36, 1);
--ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
--duration-reveal: 420ms;
--ease-reveal: cubic-bezier(0.16, 1, 0.3, 1); /* ease-out-expo-ish */
/* Spacing */
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
--spacing-2xl: 3rem;
--spacing-3xl: 4rem;
--space-section: clamp(2rem, 1.2rem + 3vw, 3.5rem);
/* Radii — sharp, editorial */
--radius-sm: 3px;
--radius-md: 5px;
--radius-lg: 8px;
--radius-xl: 10px;
--radius-full: 9999px;
/* Typography — Geist Variable + Geist Mono Variable */
--font-sans: "Geist", "Geist Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", ui-sans-serif, system-ui, sans-serif;
--font-mono: "Geist Mono", "Geist Mono Variable", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
--text-xs: 0.6875rem;
--text-sm: 0.8125rem;
--text-base: 0.875rem;
--text-lg: 1rem;
--text-xl: 1.25rem;
--text-2xl: 1.625rem;
--text-3xl: 2rem;
--text-4xl: 2.5rem;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--leading-tight: 1.2;
--leading-snug: 1.4;
--leading-normal: 1.55;
--leading-relaxed: 1.7;
--sidebar-width: 200px;
--sidebar-width-collapsed: 52px;
--color-toggle-off: #2f3644;
--color-toggle-on: var(--color-primary);
/* Page-width archetypes — applied via .page / .page--narrow /
.page--medium / .page--wide. Default is wide-enough for ops/data
tables; medium suits two-column app pages (sticky nav + form);
narrow caps reading width. */
--page-max-narrow: 760px;
--page-max-medium: 1080px;
--page-max-default: 1600px;
--page-max-wide: none;
/* Responsive breakpoints — kept here so JS can read them via getComputedStyle. */
--bp-mobile: 640px;
--bp-tablet: 1024px;
}
[data-theme="light"] {
/* Snow storm */
--color-bg-primary: #eceff4; /* nord6 */
--color-bg-secondary: #ffffff;
--color-bg-tertiary: #e5e9f0; /* nord5 */
--color-bg-overlay: rgba(236, 239, 244, 0.92);
--color-bg-hover: #e5e9f0;
--color-surface-raised: #ffffff;
--color-surface-sunken: #e5e9f0;
--color-surface-hover: #d8dee9;
--color-surface-elevated: #d8dee9; /* nord4 */
/* Primary — deeper frost for WCAG on snow storm */
--color-primary: #5e81ac; /* nord10 */
--color-primary-hover: #4c6d92;
--color-primary-active: #3e5b7c;
--color-primary-text: #eceff4;
--color-primary-light: rgba(94, 129, 172, 0.12);
--color-primary-border: rgba(94, 129, 172, 0.34);
--color-secondary: #4c566a; /* nord3 */
--color-secondary-hover: #3b4252;
--color-secondary-light: rgba(76, 86, 106, 0.1);
--color-accent: #5e81ac;
--color-accent-hover: #4c6d92;
--color-accent-light: rgba(94, 129, 172, 0.12);
--color-accent-border: rgba(94, 129, 172, 0.32);
--color-text-primary: #2e3440; /* nord0 */
--color-text-secondary: #3b4252; /* nord1 */
--color-text-muted: #6e7a8c;
--color-text-tertiary: #6e7a8c; /* matches muted in light theme — going lighter would fail contrast on white */
--color-text-disabled: #a1acb9;
--color-text-inverse: #ffffff;
--color-border-subtle: rgba(46, 52, 64, 0.08);
--color-border-default: rgba(46, 52, 64, 0.14);
--color-border-strong: rgba(46, 52, 64, 0.28);
--color-border-divider: rgba(46, 52, 64, 0.06);
--color-border-primary: rgba(94, 129, 172, 0.45);
--color-border-focus: rgba(94, 129, 172, 0.45);
/* Status — darker aurora for light mode contrast */
--color-success: #6b8a5a;
--color-success-light: rgba(107, 138, 90, 0.12);
--color-success-border: rgba(107, 138, 90, 0.3);
--color-warning: #b08334;
--color-warning-light: rgba(176, 131, 52, 0.12);
--color-warning-border: rgba(176, 131, 52, 0.3);
--color-error: #a13e47;
--color-error-light: rgba(161, 62, 71, 0.1);
--color-error-border: rgba(161, 62, 71, 0.3);
--color-info: #4c6d92;
--color-info-light: rgba(76, 109, 146, 0.12);
--color-info-border: rgba(76, 109, 146, 0.3);
--color-modal-backdrop: rgba(46, 52, 64, 0.38);
--color-focus-ring: rgba(94, 129, 172, 0.6); /* was 0.34 */
--color-eyebrow: #9a6b3f; /* darker brass for contrast on snow storm */
/* Data viz — muted aurora for light mode */
--color-data-1: #5e81ac;
--color-data-2: #a13e47;
--color-data-3: #8b5a92;
--color-data-4: #b08334;
--color-data-5: #6b8a5a;
--color-data-6: #b8684f;
--color-data-7: #4c6d92;
--color-data-8: #5a9090;
--color-log-stdout: #2e3440;
--color-log-stderr: #a13e47;
--color-log-info: #4c6d92;
--color-log-warn: #b08334;
/* Soft cool shadows */
--shadow-subtle: 0 1px 2px rgba(46, 52, 64, 0.05);
--shadow-sm: 0 1px 2px rgba(46, 52, 64, 0.07), 0 4px 14px rgba(46, 52, 64, 0.07);
--shadow-md: 0 2px 8px rgba(46, 52, 64, 0.1), 0 20px 48px rgba(46, 52, 64, 0.12);
--shadow-lg: 0 4px 12px rgba(46, 52, 64, 0.14), 0 28px 64px rgba(46, 52, 64, 0.16);
--shadow-sidebar: 1px 0 0 rgba(46, 52, 64, 0.06);
--shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.7);
--shadow-inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.8);
--color-toggle-off: #c3cad6;
--color-toggle-on: var(--color-primary);
/* Page-width archetypes — see :root block for usage. */
--page-max-narrow: 760px;
--page-max-medium: 1080px;
--page-max-default: 1600px;
--page-max-wide: none;
--bp-mobile: 640px;
--bp-tablet: 1024px;
}