[mudler-agent]

What this changes

The add-ons UI follows the approved "direction B" design: one name (Add-ons), one verb pair (Turn on and Turn off), three tabs (My add-ons, Find add-ons, Sources), a preview pane that explains an add-on, install and turn on in one step, clear first-run and error states, and the chat tools control next to MCP.

Design reference: https://claude.ai/artifact/7WUR4tR2CVo4Xw6UWxSwB7 (artboards 1 to 5). The screenshots in the mock are placeholders. The app draws a screenshot slot only when the host lists images for an add-on, and the host lists none today, so no slot is drawn.

PR #12850 (page titles and empty states) is merged. This branch is based on master after it and keeps its changes.

Per task (one commit each)

1. Naming. The sidebar item, page title, tabs and buttons say Add-ons. Tabs are My add-ons, Find add-ons, Sources. Turn on and Turn off replace Enable, Start, Disable and Stop as labels. States read On and Off. The subtitle no longer names the owner. Locales: the main labels are translated; every other new key carries the English text until a translator refines it.
2. Cards. A card shows the description, "Adds a page" and "N chat tools" when they apply. The pin button and the bare arrows become one overflow menu: Show in sidebar, Details, Remove. Move earlier and Move later stay in the same menu for a pinned card. Remove asks first and runs the typed uninstall action (data is kept); only administrators see it.
3. Preview pane. Selecting a card, or Details, opens a pane beside the list: name, state, description, screenshot slots (only if images are listed), what it adds, Turn on or Turn off, Remove, version and source. It uses the apps list. The source is not in that list, so an administrator's pane reads the installed list the host already serves. No new API call and no server change.
4. Empty states and first run. With nothing installed, an administrator sees three add-ons from the sources, each with Install and turn on, and a link to Find add-ons. A search with no result says no add-on matches and offers to clear the search.
5. Find add-ons. Each entry has a description, "Adds a page" when the library entry declares a main page, and one button: Install and turn on (Turn on for an add-on that is installed but off). Details is folded into the entry. A backend keeps a plain Install because it has no on or off.
6. One dialog. Install and turn on asks once, then the same dialog shows the two steps (install, turn on) and ends on the result or on the reason a step failed, with Try again. A failed turn on keeps the install and the retry only turns it on. Each step is its own action with its own operation identity, so the unknown-outcome rules still apply. The two-step flow is a plain function with unit tests.
7. Installed folded into My add-ons. The pane holds the operator facts for administrators under "Health, trust and updates" (health, trust, compatibility, storage, data recovery, Check for updates, Upgrade). ?tab=installed opens My add-ons and ?manage=ID opens that add-on's details. A card shows an update mark when the host reports one.
8. Add-on not available page. By state: off (" is off" with Turn on for an administrator), not installed (link to Find add-ons for an administrator), failed (the reason and a link to its details). The title is the add-on's name, with a capital first letter when the host lists no title, not the bare id.
9. Chat tools control. It moves next to the MCP control and its menu starts with one line: an add-on that is off here does nothing in this chat. Only add-ons that ship tools appear. The MCP control lives in the composer toolbar, not in the chat header, so the add-ons control moved there from the header.

Also in this PR: docs under docs/content (labels, tabs, card menu, pane, Install and turn on), a docs commit, a lint cleanup commit and a spec fix for the backend library specs. inline-style-baseline.txt is refreshed: master's count had drifted from 182 to 174 before this change.

API gaps found (no server change in this PR)

• Library entries carry no tool count, so Find add-ons cannot say "N chat tools". The label shows on My add-ons, where the list has toolCount.
• Library entries have no page count; "Adds a page" uses ui.mainPage only.
• No add-on field carries images, so the pane reads an optional screenshots list of same-origin paths and draws nothing when it is absent.
• The sources mark no entry as featured; the first three add-on entries in source order are used.
• The apps list has no source or channel; see task 3.

Tests

• Unit tests: 196 pass (187 before). New: locale key parity for the add-on, navigation and chat tools keys across all nine locales, labels, what an add-on adds, screenshots, list states, featured entries and the two-step install flow.
• vite build succeeds. npm run lint has no new errors (the two existing errors are in coverage-fixtures.js). The inline style gate passes.
• Playwright specs that mock their own routes, run in headless Chrome against the vite dev server: 278 tests in the chat, navigation, add-on navigation, add-ons gallery, Studio add-on, home and chrome audit specs, 267 passed and 11 failed; plus chat-addons 10 of 10 and addons-backend-library 9 of 9. The 11 failures:
  • 1 gallery test counts list requests and the dev server runs effects twice (React StrictMode). It passes on a production build.
  • 9 Studio and Talk tests assert an empty browser console and the dev server logs 401s and React key warnings. The two I re-ran on a production build pass.
  • 1 canvas test (chat-canvas-find, an iframe preview). It also fails on a production build here. It does not touch files of this PR; I did not run it on master.
• Not run here: the specs that need the Go UI test server or real add-on packages (addons-foundation, addons-recovery, addons-upgrade, addons-runtime, addons-shell, addons-slots, addons-proposals, library-sources) and the scripts/addons/gallery_ui.sh runner. Their labels and routes are updated by search and by hand, and the case inventory in scripts/addons/suites.json follows the renamed gallery tests.

Screenshots checked

Rendered with headless Chrome after tasks 2, 3, 4 and 9 and opened one by one:

• My add-ons cards in dark theme: three cards (running with page and two tools and an Open link, failed, off headless with three tools), the overflow menu open with Show in sidebar or Remove from sidebar, Move earlier, Move later, Details and Remove.
• Preview pane: a running add-on, an off add-on with Turn on, light theme with two screenshot slots (test images), and a 390 px phone view where the pane fills the screen.
• First run: three featured cards with Install and turn on and a Find add-ons button, in dark, light and 390 px width; and the no-match state for a search.
• Find add-ons list, the install dialog, and the opened Details of an administrator.
• Chat composer: the Add-ons control right after MCP, the menu with the one-line note (dark, light, 390 px).

🤖 Generated with Claude Code