Skip to content

feat(ui): console-based navigation + drop-in API endpoint section - #10377

Merged
mudler merged 10 commits into
masterfrom
feat/react-ui-nav-redesign
Jun 17, 2026
Merged

feat(ui): console-based navigation + drop-in API endpoint section#10377
mudler merged 10 commits into
masterfrom
feat/react-ui-nav-redesign

Conversation

@localai-bot

@localai-bot localai-bot commented Jun 17, 2026 •
edited
Loading

Copy link
Copy Markdown
Collaborator

What

Reorganizes the React UI navigation from a flat ~23-item feature dump into a product-shaped shell, then polishes it into a console-based layout and surfaces LocalAI's API as a first-class story. The old layout exposed every capability as an equal-weight sidebar entry (sections-of-one, demo-feeling groups, a 9-item "System" pile), reading like an example gallery rather than a product.

Navigation

  • Top menu: Home · Install Models.
  • Create stays inline: Chat · Studio · Talk.
  • Build and Operate are console tiers — a single sidebar entry opens a dedicated secondary rail:
    • Build console groups Automation (Agents, Skills, Memory, Jobs), Training (Fine-tune, Quantize), and Recognition (Faces, Voices) — recognition lives here rather than split into its own tier.
    • Operate console groups Inference (Backends), Cluster (Nodes, Swarm), Observability (Usage, Traces), Access (Users, Security), System (Host, Settings, API docs).
  • Both consoles are driven by one shared config (components/console/consoleConfig.js) consumed by both the sidebar entry and the ConsoleLayout rail — single source of truth, no drift.
  • Studio stays the unified generation hub (image/video/audio + Audio Transform tab).
  • Human-facing renames: Middleware → Security, Manage → Host, MCP Jobs → Jobs, Face/Voice Recognition → Faces/Voices.

Visual / UX polish

  • Console rail rendered as a panel (header, grouped dividers, rounded active pills); sidebar items are inset rounded pills. All token-based (light + dark), reduced-motion aware.
  • The console layout persists across item-to-item navigation (page-transition key is stable within a console), so switching sub-items no longer flashes the rail; entrance animation plays only on console entry.
  • Delayed RouteFallback loader so lazy routes don't flash blank; scoped inside the console so the rail stays put while the body loads.

"One endpoint, every API" (Home)

A new section that leads from LocalAI's native API strength and presents wire-compatibility as a bonus:

  • Native API: Images, Video, Realtime voice (WebRTC/WS), Depth, Object detection, Rerank, Audio & TTS, Face & voice — with a Full API reference link.
  • Drop-in compatibility: OpenAI (/v1), Anthropic (/v1/messages), Ollama (/api), OpenAI Responses (/v1/responses).
  • Live, copyable base URL.

Guarantees

  • Per-user gating preserved exactly — the regrouping and console rails reproduce the old visibility for every item (agent-pool-disabled hiding, Fine-tune/Quantize non-admin access, recognition feature gates, admin-only system items).
  • Frontend-only; no API/backend changes. Admin URLs unchanged (pathless layout, no redirects).

Behavior note for review

Usage previously sat in the old "System" section without an admin flag, so an auth-enabled non-admin saw its link. It now lives in the admin-only Operate console, so non-admins lose the link; the /app/usage route itself stays un-guarded (direct access unchanged).

Testing

Full Playwright e2e suite: 182 passed, 0 failed (specs updated for the new structure). Lint clean on changed files.

Assisted-by: Claude:claude-opus-4-8 [claude-code]

🤖 Generated with Claude Code

mudler added 9 commits June 17, 2026 17:35
@mudler
feat(ui): restructure sidebar into Create/Recognition/Build tiers
295056a 
Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
@mudler
fix(ui): preserve exact sidebar gating for agent items and fine-tune/…
4716c14 
…quantize

Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
@mudler
i18n(ui): add nav tier + console keys to all locales
2f550a0 
Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
@mudler
feat(ui): add grouped admin console via pathless layout route
41cc557 
Wrap the existing admin pages in a pathless AdminConsoleLayout route so
they keep their exact flat URLs while gaining a grouped left rail
(Inference / Cluster / Observability / Access / System). Rail item gating
mirrors the sidebar (adminOnly / authOnly / feature + /api/features). The
layout forwards the App-level outlet context (addToast) to the wrapped
pages, which read it via useOutletContext().

Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
@mudler
feat(ui): fold Audio Transform into Studio as a tab
cb530ab 
Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
@mudler
test(ui): update e2e specs for tiered nav + admin console
74c7db3 
Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
@mudler
fix(ui): gate embedded Studio transform view on audio_transform feature
151497c 
Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
@mudler
feat(ui): visual polish + console-ize Build/Recognition tiers
f6c2d09 
Generalize the one-off admin console into a reusable ConsoleLayout driven by
a shared consoleConfig (single source of truth for the rail, its gating, and
the sidebar entry that opens it — removes the prior rail/sidebar drift).

- Promote Install Models to the top menu next to Home.
- Build and Operate are now console tiers (secondary rail); Create stays inline.
- Fold Recognition (Faces/Voices) into the Build console as a group alongside
  Automation and Training so it no longer feels split off.
- Style the console rail as a panel (header, grouped dividers, rounded active
  pills) with a hover nudge; sidebar items become inset rounded pills. The rail
  slide-in plays only when entering a console, not on item-to-item sub-nav
  (which remounts the layout), so switching no longer flashes the menu. All
  token-based (light + dark), respects reduced-motion.
- Add a delayed RouteFallback loader so lazy routes no longer flash blank;
  scoped inside ConsoleLayout so the rail stays put while the body loads.
- Update e2e specs for the new structure (.console-* classes, console entries).

Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
@mudler
feat(ui): persist console layout across sub-nav + add drop-in endpoin…
9f210fd 
…t section

- Keep the page-transition key stable within a console (derived from the
  shared console config) so the ConsoleLayout and its rail persist across
  item-to-item navigation instead of remounting — fixes the submenu flash.
  Cache /api/features across mounts and play the rail entrance animation only
  when actually entering a console.
- Add a "One endpoint, every API" section to Home: leads with LocalAI's own
  native API (images, video, realtime voice over WebRTC/WS, depth, object
  detection, rerank, audio/TTS, face & voice recognition) plus a Full API
  reference link, then the drop-in compatibility layer (OpenAI, Anthropic,
  Ollama, OpenAI Responses) with the live copyable base URL. All 7 locales.

Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
@localai-bot localai-bot changed the title feat(ui): tiered navigation + dedicated admin console feat(ui): console-based navigation + drop-in API endpoint section Jun 17, 2026
@mudler
fix(ui): revert Middleware nav label rename (keep Middleware in all l…
b7fdb4e 
…ocales)

Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
@mudler
mudler merged commit 5ac864d into master Jun 17, 2026
60 checks passed
@mudler
mudler deleted the feat/react-ui-nav-redesign branch June 17, 2026 22:09
@localai-bot localai-bot mentioned this pull request Jun 17, 2026
Merged
@localai-bot localai-bot added the enhancement New feature or request label Jun 23, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

enhancement New feature or request

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@localai-bot @mudler