fix(transit): name and record the backend that answered, not always Transitous

With Google as the transit provider, the result list still credited Transitous, and a route added from the panel or through create_transit_journey was saved with provider 'transitous'. The panel now credits "Google Maps" (untranslated, as Google's terms ask) or Transitous after the backend that answered and saves that one; the MCP journey records the backend that plans routes for the caller, and search_transit_routes reports it.
fix(assistant): send Gemini's thought signatures back with its tool calls
2026-11-05 04:04:07 +00:00 · 2026-10-27 21:30:18 +01:00 · 2026-10-27 21:06:29 +01:00 · 2026-10-27 15:29:00 +01:00 · 2026-10-27 15:16:50 +01:00 · 2026-10-27 15:02:24 +01:00
4035 changed files with 379902 additions and 27257 deletions
@@ -1161,7 +1161,7 @@ jobs:
          docker run -d --name trek-ci -p 127.0.0.1:3000:3000 \
            --read-only --tmpfs /tmp:noexec,nosuid,size=128m \
            --security-opt no-new-privileges:true \
-            --cap-drop ALL --cap-add CHOWN --cap-add SETUID --cap-add SETGID \
+            --cap-drop ALL --cap-add CHOWN --cap-add SETUID --cap-add SETGID --cap-add KILL \
            -v "$RUNNER_TEMP/trek/data:/app/data" \
            -v "$RUNNER_TEMP/trek/uploads:/app/uploads" \
            -e ENCRYPTION_KEY="$(openssl rand -hex 32)" \
@@ -1194,6 +1194,17 @@ jobs:
          curl -sf http://127.0.0.1:3000/ | grep -q '<div id="root">' \
            || { echo "::error::/ does not serve the client"; exit 1; }

+      # Same capabilities as the shipped compose file: dumb-init has to be able
+      # to pass the stop signal on to node, or docker stop ends in SIGKILL (137).
+      - name: Stop gracefully
+        run: |
+          set -euo pipefail
+          docker stop -t 30 trek-ci >/dev/null
+          code="$(docker inspect -f '{{.State.ExitCode}}' trek-ci)"
+          [ "$code" = "0" ] || { echo "::error::docker stop ended with exit code $code, not a graceful shutdown"; exit 1; }
+          docker logs trek-ci 2>&1 | grep -q 'SIGTERM received' \
+            || { echo "::error::the server never saw SIGTERM"; exit 1; }
+
      - name: Container log
        if: always()
        run: docker logs trek-ci 2>&1 || true
@@ -22,7 +22,6 @@ WORKDIR /app
 COPY package.json package-lock.json ./
 COPY shared/package.json ./shared/
 COPY client/package.json ./client/
-COPY client/scripts/patch-maplibre.mjs ./client/scripts/
 RUN npm ci --workspace=client
 COPY --from=shared-builder /app/shared/dist ./shared/dist
 COPY client/ ./client/
@@ -53,3 +53,54 @@ own switch in the admin panel. https://cloud.google.com/maps-platform/terms

 `server/assets/airports.json` is built from **OurAirports**
 (https://ourairports.com/data/), released into the public domain.
+
+## Typefaces: Studio books and the app
+
+Every typeface a book can be set in, and the app's own (Poppins, MuseoModerno,
+Geist), is self-hosted from the **@fontsource** npm packages, which redistribute
+the families published on Google Fonts split into subsets by script. The catalogue of book faces is
+`shared/src/book/book-fonts.data.ts`. Each package carries its licence and the
+copyright notice of the family's authors in its `LICENSE` file.
+
+Both licences allow a font to be bundled with software and embedded in a
+document made with it, so a printed or exported book may carry the faces it is
+set in. No family is renamed, redrawn or sold on its own. SIL OFL 1.1: https://openfontlicense.org. Apache 2.0:
+https://www.apache.org/licenses/LICENSE-2.0
+
+| Family | Package | Licence |
+|---|---|---|
+| Abril Fatface | `@fontsource/abril-fatface` | SIL Open Font License 1.1 |
+| Alfa Slab One | `@fontsource/alfa-slab-one` | SIL Open Font License 1.1 |
+| Allura | `@fontsource/allura` | SIL Open Font License 1.1 |
+| Anton | `@fontsource/anton` | SIL Open Font License 1.1 |
+| Archivo Black | `@fontsource/archivo-black` | SIL Open Font License 1.1 |
+| Bebas Neue | `@fontsource/bebas-neue` | SIL Open Font License 1.1 |
+| Big Shoulders Display | `@fontsource/big-shoulders-display` | SIL Open Font License 1.1 |
+| Bodoni Moda | `@fontsource/bodoni-moda` | SIL Open Font License 1.1 |
+| Bricolage Grotesque | `@fontsource/bricolage-grotesque` | SIL Open Font License 1.1 |
+| Caveat | `@fontsource/caveat` | SIL Open Font License 1.1 |
+| Cormorant Garamond | `@fontsource/cormorant-garamond` | SIL Open Font License 1.1 |
+| Dancing Script | `@fontsource/dancing-script` | SIL Open Font License 1.1 |
+| DM Mono | `@fontsource/dm-mono` | SIL Open Font License 1.1 |
+| DM Serif Display | `@fontsource/dm-serif-display` | SIL Open Font License 1.1 |
+| EB Garamond | `@fontsource/eb-garamond` | SIL Open Font License 1.1 |
+| Fraunces | `@fontsource/fraunces` | SIL Open Font License 1.1 |
+| Great Vibes | `@fontsource/great-vibes` | SIL Open Font License 1.1 |
+| Homemade Apple | `@fontsource/homemade-apple` | Apache License 2.0 |
+| Inter | `@fontsource/inter` | SIL Open Font License 1.1 |
+| Kaushan Script | `@fontsource/kaushan-script` | SIL Open Font License 1.1 |
+| League Gothic | `@fontsource/league-gothic` | SIL Open Font License 1.1 |
+| Lora | `@fontsource/lora` | SIL Open Font License 1.1 |
+| Montserrat | `@fontsource/montserrat` | SIL Open Font License 1.1 |
+| MuseoModerno | `@fontsource/museomoderno` | SIL Open Font License 1.1 |
+| Oswald | `@fontsource/oswald` | SIL Open Font License 1.1 |
+| Pacifico | `@fontsource/pacifico` | SIL Open Font License 1.1 |
+| Parisienne | `@fontsource/parisienne` | SIL Open Font License 1.1 |
+| Permanent Marker | `@fontsource/permanent-marker` | Apache License 2.0 |
+| Playfair Display | `@fontsource/playfair-display` | SIL Open Font License 1.1 |
+| Poppins | `@fontsource/poppins` | SIL Open Font License 1.1 |
+| Sacramento | `@fontsource/sacramento` | SIL Open Font License 1.1 |
+| Satisfy | `@fontsource/satisfy` | Apache License 2.0 |
+| Shrikhand | `@fontsource/shrikhand` | SIL Open Font License 1.1 |
+| Yellowtail | `@fontsource/yellowtail` | Apache License 2.0 |
+| Geist Sans | `@fontsource/geist-sans` | SIL Open Font License 1.1 |
@@ -62,7 +62,7 @@ A self-hosted, real-time collaborative travel planner — with maps, budgets, pa

 <br />

-Most of what follows is an addon an admin switches on or off. Lists, Costs, Documents, Collab, Vacay and Atlas ship on; Journey, Collections, MCP, AI Parsing and AirTrail ship off and are marked below.
+Most of what follows is an addon an admin switches on or off. Lists, Costs, Documents, Collab, Tours, Vacay and Atlas ship on; Journey, Collections, MCP, the AI assistant, AI Parsing, Road trip, Dawarich and AirTrail ship off and are marked below.

 <table>
 <tr>
@@ -70,76 +70,110 @@ Most of what follows is an addon an admin switches on or off. Lists, Costs, Docu

 #### 🧭 Planning

- **Day plans**: drag places between days and reorder inside a day, with undo. Notes and bookings drag the same way, and a map marker drops straight onto a day
- **Maps**: Leaflet, Mapbox GL or MapLibre GL (OpenFreeMap, no token), with clustering, photo markers and route lines. 3D buildings and terrain are Mapbox only
- **Place search**: Google Places when a key is set (photos, ratings, opening hours), otherwise OpenStreetMap with no key
- **Place enrichment**: descriptions, facts, hours and photo candidates from OpenStreetMap, Wikipedia, Wikidata and Wikimedia Commons
- **POI explore**: pull OpenStreetMap POIs by category for the current viewport over Overpass
- **Import**: shared Google Maps and Naver Maps lists, plus GPX, KML and KMZ files
- **Export**: GPX of a trip's places and tracks, and an ICS feed per trip or across all of them
- **Routes**: auto-sort a day (nearest neighbour then 2-opt, locked stops and hotel anchors stay put), driving, walking or cycling profiles over OSRM, then open it in Google Maps or CoMaps
- **Public transport**: door-to-door itineraries over Transitous
- **Weather**: 16-day forecast from Open-Meteo, no key. Dates outside that window read the archive for the same date instead
- **Day notes**: markdown body with an icon and a colour, reordered by drag and drop or moved to another day
- **Trip dates**: move a trip and the days re-date themselves, either dragging the bookings along or re-anchoring them. Trips also copy and archive
+- **Day plans**: drag places, notes and bookings between days with undo, or drop a map marker straight onto a day
+- **Maps**: Leaflet, Mapbox GL or MapLibre GL (OpenFreeMap, no token) with clustering, photo markers, route lines and a whole-trip route overview
+- **Places**: search the TREK Places index and OpenStreetMap with no key, or Google Places and Amap with one. Descriptions, hours and photos from Wikipedia, Wikidata and Wikimedia Commons, plus a rating and a custom image per place
+- **Explore**: nearby places by category for the map view, from the TREK Places index with Overpass as fallback
+- **Routes**: auto-sort a day (nearest neighbour then 2-opt, locked stops and hotels stay put), a travel mode per leg over OSRM or Valhalla, then open the day in Google Maps or CoMaps and a place in seven navigation apps
+- **Public transport**: door-to-door itineraries over Transitous, or Google where Transitous has no data
+- **Import and export**: Google Maps and Naver Maps lists, Google Maps directions links, GPX, KML and KMZ in; GPX and an ICS feed per trip or across all trips out
+- **Weather**: 16-day forecast from Open-Meteo, no key, and the archive for dates beyond it
+- **Trip dates**: move a trip and its days re-date themselves, with the bookings along or re-anchored. Trips also copy and archive
+- **Road trip** (off by default): drives with stops, day windows and arrival times that recompute, route alternatives, hazards and EV charging with range

 </td>
 <td width="50%" valign="top">

-#### 🧳 Bookings and money
+#### 🥾 Tours

- **Reservations**: 16 booking types with status, confirmation code, travellers and attached files
- **Flights and trains**: several legs with stopovers, per-leg times and endpoint timezones, against 4,045 bundled airports so local times resolve without a key
- **Accommodation**: a stay spans a range of days with a check-in window, and shows on every night it covers
- **Booking import**: EML, PDF, PKPass, HTML and TXT confirmations through [KItinerary](https://invent.kde.org/pim/kitinerary). Needs the `kitinerary-extractor` binary, which ships in the Docker image
- **AirTrail** (off by default): link a self-hosted AirTrail instance to import flights as reservations and keep them in sync
- **Costs**: split expenses in integer cents with equal or custom shares, several payers per expense, settle-up suggestions, a settlement log, and CSV export
- **Currencies**: a currency per expense with the rate frozen at entry. Rates come from Frankfurter, no key
- **Packing lists**: categories, admin-managed templates, assignees, three visibility tiers, and a packed-of-total line. Bags with weight roll-up are a separate admin switch, off by default
- **To-dos**: assignee, due date, priority, and a reminder before one falls due
- **Files**: attach to a trip, place, day entry or reservation. 50 MB each, 500 MB for video, with trash and restore
- **PDF export**: cover page, place photos, day notes, bookings and costs, with an optional page break per day
+- **Seven tour types**: hike, city walk, run, bike (touring, road, gravel, MTB), paddle (kayak, canoe, SUP), horse ride, and ski and winter (alpine, cross-country, touring, snowshoe, winter hike)
+- **Routing**: legs routed over Valhalla with shaping points, hand-drawn legs, route variants, round hikes of a wished length and trip places as stops, all with undo
+- **Hikes**: routed within a maximum SAC grade (T1 to T6), the trail grades along the way, and via ferratas on the map
+- **Terrain**: elevation profile, ascent and descent, and a 3D terrain map with grade colouring and a flyover, no token needed. Topo, hiking, cycling and satellite bases with sea marks and ski pistes as overlays
+- **Multi-day tours**: one route cut into stages and spread across the trip's days
+- **Along the way**: viewpoints, huts, water, food and more within a corridor of the route, inserted as a stop with the detour it adds
+- **Ski, paddle and city walks**: a piste router by difficulty and lift type; a water router with portages, locks and a wind forecast; city walks with stays, opening hours and transit between stops
+- **Plan against reality**: link a recorded GPX to a planned day and compare distance, ascent and time. Import trails from a wanderer instance, save tours to a collection and take them into another trip

 </td>
 </tr>
 <tr>
 <td width="50%" valign="top">

+#### 🧳 Bookings and money
+
+- **Reservations**: 18 booking types with status, confirmation code, travellers and attached files
+- **Flights and trains**: several legs with stopovers and endpoint timezones, against 4,045 bundled airports so local times resolve without a key
+- **Accommodation**: a stay spans a range of nights with a check-in window
+- **Booking import**: EML, PDF, PKPass, HTML, TXT and photos of confirmations, through [KItinerary](https://invent.kde.org/pim/kitinerary) or an AI model, with a review step before anything is saved. Prices become linked costs
+- **AirTrail** (off by default): import flights from a self-hosted AirTrail instance and keep them in sync
+- **Costs**: split in integer cents with equal or custom shares, several payers, settle-up suggestions, a per-person summary, a settlement log and CSV export. A receipt photo can fill in an expense
+- **Currencies**: one per expense with the rate frozen at entry, from Frankfurter with no key
+- **Packing lists and to-dos**: categories, templates, assignees and visibility tiers; bags with weights as an admin switch; to-dos with due dates, priorities and reminders
+- **Files**: attach to a trip, place, day or booking, 50 MB each and 500 MB for video, with trash and restore
+- **PDF export**: cover, place photos, day notes, bookings and costs, with an optional page break per day
+
+</td>
+<td width="50%" valign="top">
+
 #### 👥 Collaboration

- **Real-time sync** (WebSocket): edits land live for everyone who has that trip open
- **Members**: add by email or username, hand ownership to someone else, or add guests who have no login at all
- **Permissions**: an admin maps each of 16 trip actions to admin, trip owner, trip member or everybody
- **Invite links**: one reusable link per trip with an optional expiry. Admins can also issue signup invites with a use limit that drop the new account straight into a trip
- **Public share**: a read-only trip page anyone can open without an account
- **Collab**: group chat with replies, reactions and link previews, shared notes with attachments, polls, and a What's Next list of upcoming activities. Each of the four switches on its own
+- **Real-time sync** (WebSocket): edits land live for everyone who has the trip open
+- **Members**: add by email or username, hand over ownership, or add guests who have no login at all
+- **Permissions**: an admin maps each of 17 trip actions to admin, trip owner, trip member or everybody
+- **Invites**: one reusable link per trip with an optional expiry, and admin signup invites that drop a new account straight into a trip
+- **Public share**: a read-only trip page without an account, with switches for map, bookings, packing, costs and chat
+- **Collab**: group chat with replies, reactions and link previews, shared notes, links, polls and a What's Next list, each one its own switch
+- **Notifications**: an inbox grouped by day with answers right from the notification, and a per-user matrix of events against in-app, email, webhook, ntfy, Web Push and plugin channels

-#### 📔 Journal, Atlas and Vacay
+</td>
+</tr>
+<tr>
+<td width="50%" valign="top">

- **Journey** (off by default): dated entries with story, mood, weather and tags, photos and video from uploads or a linked [Immich](https://immich.app) or Synology Photos library, map views, co-authors, and a public share link
- **Atlas**: mark countries and sub-national regions visited on [geoBoundaries](https://www.geoboundaries.org/) outlines, plus a bucket list, travel stats and a consecutive-years-travelled count
- **Vacay**: leave calendar with half days, public holidays from date.nager.at, school holiday overlays for 16 European countries, carry-over between years, and joint or read-only sharing of a plan
- **Collections** (off by default): a place library outside any trip, with labels, ratings, a custom image per place, copy-into-a-trip, and sharing by invite
+#### 📔 Journey and TREK Studio
+
+- **Journey** (off by default): dated entries with story, mood, weather and tags, photos and video from uploads, [Immich](https://immich.app) or Synology Photos, map views, co-authors, drafts and a public share link
+- **Linked journal**: a trip can show one journal as its own, with the members picked on the trip as viewers or editors
+- **Recorded days** (with Dawarich): keep a day's recorded route and turn its stays into entries
+- **TREK Studio**: turn a journal into a printable photo book. 34 print-licensed typefaces, 17 themes, 108 designed pages in twelve styles, 160 recolourable stickers, text effects, layers and a Travel tab with route maps, country stamps and trip figures
+- **Auto layout**: lays the whole book on the designed pages in the style of its theme, every photo in a frame, or rebuilds one spread
+- **Print and share**: PDF export as pages or spreads with crop marks, several people editing at once, and design files to move a spread into another book
+
+</td>
+<td width="50%" valign="top">
+
+#### 🗺️ Atlas, Vacay and Collections
+
+- **Atlas**: countries and regions visited on [geoBoundaries](https://www.geoboundaries.org/) outlines, a bucket list, travel stats, and a tour activities tab with planned against recorded totals
+- **Vacay**: leave calendar with half days, public holidays from date.nager.at, school holidays for 16 European countries, company holidays, carry-over between years, and joint or read-only sharing
+- **Collections** (off by default): a place library outside any trip with lists, labels, ratings, a status per place, cover images, GPX and file export, copy into a trip, and sharing by invite
+- **Dawarich** (off by default): link a Dawarich instance for recorded tracks, suggested stays and countries for the Atlas
+
+</td>
+</tr>
+<tr>
+<td width="50%" valign="top">
+
+#### 🤖 AI assistant and MCP
+
+- **AI assistant** (off by default): a chat that plans with you in a trip, across all your trips, in a journal and in Studio, and works with tours, costs, bookings, packing, Vacay and the Atlas
+- **Your own model**: an API key for Anthropic, OpenAI, Gemini or OpenRouter, a ChatGPT plan, or any OpenAI-compatible endpoint, set for the instance or per user
+- **You stay in charge**: reads run at once, every change waits as a card to apply or discard and can be undone for 15 minutes. Nothing leaves before you agree to the provider, and a file's text only with your consent
+- **Attachments**: drop a booking confirmation, a GPX file or a photo into the chat, and the assistant offers what to do with it
+- **MCP server** (off by default): OAuth 2.1 with mandatory PKCE and dynamic client registration, 410 tools, 30 resources and 4 prompts, 35 scopes in 17 groups ticked on the consent screen, and every call in the audit log
+- **Addon-aware**: twelve addon gates decide which tools a session sees, and flipping one re-registers live sessions

 </td>
 <td width="50%" valign="top">

 #### 🧩 Plugins

- **Third-party plugins**: install from the TREK registry or sideload a zip, switch on per instance, with their own pages under `/plugins/<id>`
- **Sandboxed**: one child process per plugin, 63 grantable permissions, an admin-edited outbound host allowlist, memory and RPC caps, and daily caps on AI and notification calls
- **Trust**: registry downloads are pinned by sha256 and checked against the author's minisign key. A sideloaded zip is marked unverified, and `TREK_PLUGINS_ENABLED=false` turns the whole system off
- **Extension points**: map markers and layers, place details, day schedules, PDF sections, Atlas layers, journal rows, trip warnings, calendar sources, route profiles and notification channels. Plugin pages run in an opaque-origin iframe
- **SDK**: [`trek-plugin-sdk`](https://www.npmjs.com/package/trek-plugin-sdk) on npm, with a manifest validator, a mock host, and a dev-link mode that runs a local build against real data
-
-#### 🤖 AI and MCP
-
- **MCP server** (off by default): OAuth 2.1 with mandatory PKCE and dynamic client registration. 199 tools, 30 resources, 4 prompts
- **Scopes**: 29 scopes in 14 groups, each one tickable on the consent screen. Tokens are bound to the `/mcp` resource, and every tool call lands in the audit log
- **Reach**: create trips and days, edit places, packing lists, to-dos, costs, reservations, collections and journeys, mark countries visited, all inside the scopes the token holds
- **Prompts**: `trip-summary`, plus `packing-list` and `budget-overview` when those addons are on
- **Addon-aware**: seven addon gates decide which tools and resources a session sees. Flipping one drops live sessions so the surface re-registers
- **Booking extraction** (off by default): read a confirmation with a local Ollama server, any OpenAI-compatible endpoint, or Anthropic, configured instance-wide or per user
+- **Third-party plugins**: install from the TREK registry or sideload a zip, with their own pages under `/plugins/<id>`
+- **Sandboxed**: one child process per plugin, 66 grantable permissions, an admin-edited outbound host allowlist, memory and call caps
+- **Trust**: registry downloads are pinned by sha256 and checked against the author's minisign key, a sideloaded zip is marked unverified, and `TREK_PLUGINS_ENABLED=false` turns the whole system off
+- **Extension points**: map layers, place details, day schedules, PDF sections, Atlas layers, journal rows, trip warnings, search and photo providers, route profiles, notification channels and MCP tools
+- **SDK**: [`trek-plugin-sdk`](https://www.npmjs.com/package/trek-plugin-sdk) with a CLI to create, validate, run against real data, sign and publish

 </td>
 </tr>
@@ -148,30 +182,26 @@ Most of what follows is an addon an admin switches on or off. Lists, Costs, Docu

 #### 📱 Mobile and offline

- **Installable**: iOS and Android straight from the browser, no App Store. Runs standalone without browser chrome, with the status bar tinted per theme
- **Phone layouts**: a separate shell below 768px with its own tokens, a bottom bar and safe-area insets. Which items sit in that bar is up to the user
- **Offline reads**: the app shell and every route chunk are precached, and trips, places and file blobs live in a per-user IndexedDB store, so a trip opens with no network
- **Offline writes**: mutations queue and replay with an `X-Idempotency-Key`, so a reconnect cannot double-apply. A stale edit is parked for a keep-mine or keep-theirs choice
- **Offline maps**: pre-download a trip's raster tiles, and clear them again
- **API responses are never cached** by the service worker. They vary per session, so they always come from the network
+- **Installable**: iOS and Android straight from the browser, no App Store, standalone with a themed status bar
+- **Phone layouts**: their own screens for every part of the app, with a bottom bar and dashboard widgets the user orders
+- **Offline reads**: the app shell is precached and trips, places, tours, files and nearby places live in a per-user IndexedDB store, so a trip opens with no network
+- **Offline writes**: changes queue and replay with an `X-Idempotency-Key`, and a stale edit waits for a keep-mine or keep-theirs choice
+- **Offline maps**: raster and vector tiles of a trip downloaded ahead, and a switch that takes the whole app offline on purpose

 </td>
 <td width="50%" valign="top">

 #### ⚙️ Admin, accounts and security

- **Login methods**: password login, password registration, OIDC login, OIDC registration and passkey login each switch on and off on their own. `OIDC_ONLY` leaves SSO as the only way in
- **SSO (OIDC)**: one provider by discovery, with PKCE and `id_token` verification (Authentik, Keycloak, Google and the like)
- **2FA**: TOTP with ten single-use backup codes, and an admin can require it instance-wide
- **Passkeys**: WebAuthn login by fingerprint, face, PIN or security key, off until an admin enables it. A passkey also satisfies the 2FA requirement
- **Hardening**: per-IP limits on login, password reset and 2FA attempts, a password policy, secrets encrypted at rest and masked on read, and an SSRF guard on every URL you configure
- **Admin panel**: users and invites, the permission matrix, packing templates, categories, addons, plugins, API keys, MCP tokens and OAuth sessions, backups, storage, audit log, and GitHub releases
- **Backups**: manual or scheduled hourly, daily, weekly or monthly, with retention in days. The zip carries the at-rest key, so a restore can decrypt its own secrets
- **Storage**: pluggable storage backends per content category — keep everything on local disk, or add S3-compatible backends and replicate any category to them, configured entirely from the admin panel
- **Notifications**: a per-user matrix of events against in-app, email (SMTP), webhook, ntfy and Web Push (on every device you turn it on for, even with TREK closed), plus any channel a plugin registers
- **Appearance**: light, dark or follow the OS, seven colour schemes plus a custom accent, transparency, compact density, reduce motion, and text size per tier
+- **Sign-in**: password, OIDC and passkeys each switch on and off on their own, `OIDC_ONLY` leaves SSO as the only way in, and an OIDC claim can grant admin
+- **SSO and 2FA**: one OIDC provider by discovery with PKCE (Authentik, Keycloak, Google and the like), TOTP with backup codes that an admin can require, and passkeys that count as the second factor
+- **Sessions**: every sign-in is a session you can see and end, one by one or all others at once
+- **Hardening**: rate limits on sign-in, reset and 2FA, a password policy, secrets encrypted at rest and masked on read, and an SSRF guard on every URL you configure
+- **Admin panel**: users and the permission matrix, defaults for new users, categories and templates, addons, plugins, storage, notifications, MCP tokens, backups, audit log and releases
+- **Backups and storage**: scheduled backups with retention that restore their own secrets, and local or S3-compatible storage per content category with replicas
+- **Appearance**: light, dark or follow the OS, seven colour schemes plus a custom accent, transparency, density, reduced motion and text size
 - **27 languages**: en, de, es, fr, it, nl, hu, ru, zh, zh-TW, pl, cs, ar (right to left), br, id, tr, ja, ko, uk, gr, sv, vi, ca, az, et, sk, th
- **In-app help**: the wiki ships inside the image and is served from disk at `/help`, so the docs match the version you are running
+- **Help center**: a ? in the top bar with 381 step-by-step guides with screenshots, searched together with the wiki that ships in the image

 </td>
 </tr>
@@ -204,12 +234,15 @@ the details.
 ## Get started in 30 seconds

 ```bash
-ENCRYPTION_KEY=$(openssl rand -hex 32) docker run -d -p 3000:3000 \
+ENCRYPTION_KEY=$(openssl rand -hex 32) docker run -d --name trek -p 3000:3000 \
  -e ENCRYPTION_KEY=$ENCRYPTION_KEY \
+  -e COOKIE_SECURE=false \
  -v ./data:/app/data -v ./uploads:/app/uploads mauriceboe/trek
 ```

-Open `http://localhost:3000`. On first boot TREK seeds an admin account — if you set `ADMIN_EMAIL`/`ADMIN_PASSWORD` those are used, otherwise the credentials are printed to the container log (`docker logs trek`).
+Open `http://localhost:3000`, or `http://<server-ip>:3000` from another machine. On first boot TREK seeds an admin account — if you set `ADMIN_EMAIL`/`ADMIN_PASSWORD` those are used, otherwise the credentials are printed to the container log (`docker logs trek`).
+
+`COOKIE_SECURE=false` is only for trying TREK over plain HTTP: without it the browser drops the session cookie and the login does not stick. Once TREK sits behind HTTPS (see [Reverse Proxy](#reverse-proxy)), remove it.

 <div align="center">

@@ -1,5 +1,5 @@
 apiVersion: v2
 name: trek
-version: 4.3.3
+version: 5.0.0
 description: Minimal Helm chart for TREK app
-appVersion: "4.3.3"
+appVersion: "5.0.0"
@@ -112,6 +112,9 @@ data:
  {{- if .Values.env.TREK_PLACES_URL }}
  TREK_PLACES_URL: {{ .Values.env.TREK_PLACES_URL | quote }}
  {{- end }}
+  {{- if .Values.env.GOOGLE_LIST_DATA_BASE }}
+  GOOGLE_LIST_DATA_BASE: {{ .Values.env.GOOGLE_LIST_DATA_BASE | quote }}
+  {{- end }}
  {{- if .Values.env.AMAP_API_BASE }}
  AMAP_API_BASE: {{ .Values.env.AMAP_API_BASE | quote }}
  {{- end }}
@@ -108,6 +108,7 @@ env:
  # nothing there. There is no switch in the admin panel on purpose: whether searches leave the instance is decided
  # here. Defaults to on.
  # TREK_PLACES_URL: ""
+  # GOOGLE_LIST_DATA_BASE: ""
  # Base URL of a copy of the Places API you run yourself; it has to answer the same /v1 API. Read from
  # configuration rather than typed by a user, so an in-cluster address works without ALLOW_INTERNAL_NETWORK.
  # Defaults to https://places.liketrek.com.
@@ -0,0 +1,67 @@
+import { BOOK_FONT_FACES, BOOK_FONTS_PRECACHED } from '@trek/shared';
+
+/**
+ * Which font files the service worker installs with the app.
+ *
+ * The precache takes every woff and woff2 the build emits, and with the book's
+ * catalogue at thirty four families that is every weight, both styles and
+ * every script subset of each: megabytes fetched at install by every user,
+ * most of it for faces no book of theirs is set in. So the book's faces are
+ * held to this:
+ *
+ * - The faces the app itself draws (Poppins and MuseoModerno for the chrome,
+ *   imported in src/main.tsx) stay exactly as they were.
+ * - The faces the book shipped with before the catalogue grew
+ *   (`BOOK_FONTS_PRECACHED`) keep their latin woff2, so a book set in them
+ *   still opens offline before Studio was ever opened online.
+ * - Every other file of a book family, woff, other subsets, new families,
+ *   real italics, is left to the `book-fonts` runtime cache in vite.config.js,
+ *   which the Studio fills with the faces of each book it opens
+ *   (src/components/Studio/bookFontWarm.ts).
+ *
+ * Shared by vite.config.js and its test, which reads the filter against file
+ * names as the build writes them.
+ */
+
+/** The faces src/main.tsx imports for the app chrome, which the book shares; bookFontPrecache.test.ts checks this copy. */
+export const APP_FACES = {
+  poppins: [300, 400, 500, 600, 700],
+  museomoderno: [400, 700, 800],
+};
+
+/** The book packages, longest name first, so `dm-serif-display` is never read as `dm-…`. */
+const BOOK_PACKAGES = [...new Set(Object.values(BOOK_FONT_FACES).map((f) => f.pkg))].sort(
+  (a, b) => b.length - a.length
+);
+
+const PRECACHED = new Map(
+  Object.entries(BOOK_FONTS_PRECACHED).map(([id, weights]) => [BOOK_FONT_FACES[id].pkg, new Set(weights)])
+);
+
+/**
+ * A font file as the build names it, `<package>-<subset>-<weight>-<style>-<hash>.<ext>`,
+ * read against the book's packages; null for any other file.
+ */
+export function bookFontFile(url) {
+  const name = url.split('/').pop() ?? '';
+  const match = /^(.+)-(\d{3})-(normal|italic)-[\w-]+\.(woff2?)$/.exec(name);
+  if (!match) return null;
+  const [, head, weight, style, ext] = match;
+  const pkg = BOOK_PACKAGES.find((p) => head.startsWith(`${p}-`));
+  if (!pkg) return null;
+  return { pkg, subset: head.slice(pkg.length + 1), weight: Number(weight), italic: style === 'italic', ext };
+}
+
+/** Whether a file of the build goes into the install-time precache. */
+export function keepInPrecache(url) {
+  const file = bookFontFile(url);
+  if (!file) return true;
+  if (!file.italic && APP_FACES[file.pkg]?.includes(file.weight)) return true;
+  const kept = PRECACHED.get(file.pkg);
+  return !file.italic && file.subset === 'latin' && file.ext === 'woff2' && !!kept?.has(file.weight);
+}
+
+/** The precache manifest without the book faces left to the runtime cache: a Workbox `manifestTransforms` entry. */
+export function withoutRuntimeFonts(entries) {
+  return { manifest: entries.filter((entry) => keepInPrecache(entry.url)), warnings: [] };
+}
@@ -451,7 +451,7 @@ const releaseRecordedDay = (page: Page) => releaseJournalDawarich(page.request,
 // ── Studio ────────────────────────────────────────────────────────────────────

 const rail = (page: Page) => page.locator('.st-rail')
-const railButton = (page: Page, name: string) => rail(page).getByRole('button', { name, exact: true })
+const railButton = (page: Page, name: string) => rail(page).getByRole('tab', { name, exact: true })
 const sidePanel = (page: Page) => page.locator('.st-panel.st-side')
 const inspector = (page: Page) => page.locator('.st-inspector')
 const studioMenu = (page: Page) => page.locator('.st-menu').last()
@@ -460,6 +460,20 @@ const exportDialog = (page: Page) => page.getByRole('dialog', { name: 'Export' }
 const thumbs = (page: Page) => page.locator('.st-thumb-row')
 /** The hit targets over the spread, one per element. */
 const sheetElements = (page: Page) => page.locator('.st-sheet > div[style*="left:"]')
+/**
+ * The hit target of the first text on the spread on screen. The targets above the page are empty
+ * boxes, so the one over the drawn words is found by where the words are and marked for the locator.
+ */
+async function markTextTarget(page: Page): Promise<void> {
+  const words = page.locator('.st-sheet').getByText(/\p{L}{3,}/u).first()
+  await expect(words).toBeVisible()
+  await words.evaluate(el => {
+    const r = el.getBoundingClientRect()
+    const hit = document.elementFromPoint(r.left + r.width / 2, r.top + r.height / 2)
+    hit?.setAttribute('data-help-text', '')
+  })
+}
+const textTarget = (page: Page) => page.locator('.st-sheet [data-help-text]')

 async function studioSection(page: Page, name: string): Promise<void> {
  await railButton(page, name).click()
@@ -1300,7 +1314,7 @@ const SCRIPTS: Record<string, GuideScript> = {
        },
      },
      {
-        target: p => p.locator('.st-back'),
+        target: p => p.locator('.st-head-close'),
      },
    ],
  },
@@ -1431,7 +1445,7 @@ const SCRIPTS: Record<string, GuideScript> = {
      },
      {
        prepare: async p => {
-          await sidePanel(p).locator('.st-tabs button').filter({ hasText: 'Entries' }).click()
+          await sidePanel(p).getByRole('tab', { name: /Entries/ }).click()
          await expect(sidePanel(p).locator('.st-entry').first()).toBeVisible()
          await settle(p)
        },
@@ -1458,16 +1472,162 @@ const SCRIPTS: Record<string, GuideScript> = {
    ],
  },

+  'studio-my-layouts': {
+    guide: guide('studio-my-layouts'),
+    start: openStudio,
+    steps: [
+      {
+        prepare: async p => {
+          await studioSection(p, 'Pages')
+          await thumbs(p).nth(2).locator('.st-thumb').click()
+          await settle(p)
+        },
+        target: p => railButton(p, 'Layouts'),
+        act: async p => { await studioSection(p, 'Layouts') },
+      },
+      {
+        // Pointed at rather than pressed, so the seed book keeps no layout of its own for the guides after this one.
+        prepare: async p => {
+          await sidePanel(p).getByRole('button', { name: 'Save this page as a layout' }).scrollIntoViewIfNeeded()
+          await settle(p)
+        },
+        target: p => sidePanel(p).locator('.st-saved-layouts'),
+      },
+    ],
+  },
+
+  'studio-theme': {
+    guide: guide('studio-theme'),
+    start: openStudio,
+    steps: [
+      {
+        target: p => railButton(p, 'Theme'),
+        act: async p => { await studioSection(p, 'Theme') },
+      },
+      {
+        target: p => sidePanel(p).locator('.st-theme-grid'),
+        act: async p => {
+          await sidePanel(p).locator('.st-theme-card').nth(1).click()
+          await settle(p)
+        },
+      },
+      {
+        prepare: async p => {
+          await sidePanel(p).getByRole('button', { name: 'Apply to the book' }).scrollIntoViewIfNeeded()
+          await settle(p)
+        },
+        target: p => sidePanel(p).locator('.st-theme-apply'),
+      },
+    ],
+  },
+
+  'studio-stickers': {
+    guide: guide('studio-stickers'),
+    start: openStudio,
+    steps: [
+      {
+        prepare: async p => { await studioSection(p, 'Elements') },
+        target: p => sidePanel(p).getByRole('tab', { name: 'Stickers' }),
+        act: async p => {
+          await sidePanel(p).getByRole('tab', { name: 'Stickers' }).click()
+          await expect(sidePanel(p).locator('.st-shape-grid').first()).toBeVisible()
+          await settle(p)
+        },
+      },
+      {
+        target: p => sidePanel(p).locator('.st-shape-grid').first(),
+      },
+    ],
+  },
+
  'studio-travel': {
    guide: guide('studio-travel'),
    start: openStudio,
    steps: [
      {
        target: p => railButton(p, 'Travel'),
-        act: async p => { await studioSection(p, 'Travel') },
+        act: async p => {
+          await studioSection(p, 'Travel')
+          await expect(sidePanel(p).locator('.st-travel-card').first()).toBeVisible({ timeout: 15_000 })
+          await settle(p)
+        },
      },
      {
-        target: sidePanel,
+        target: p => sidePanel(p).locator('.st-travel-grid').first(),
+      },
+      {
+        target: p => sidePanel(p).locator('.st-travel-card').first(),
+      },
+    ],
+  },
+
+  'studio-text-effects': {
+    guide: guide('studio-text-effects'),
+    start: openStudio,
+    steps: [
+      {
+        prepare: async p => {
+          await studioSection(p, 'Pages')
+          await thumbs(p).nth(2).locator('.st-thumb').click()
+          await settle(p)
+          await markTextTarget(p)
+        },
+        target: p => textTarget(p),
+        act: async p => {
+          await textTarget(p).click()
+          await expect(inspector(p).getByRole('button', { name: 'Effects' })).toBeVisible()
+          await settle(p)
+        },
+      },
+      {
+        prepare: async p => {
+          const head = inspector(p).getByRole('button', { name: 'Effects' })
+          if ((await head.getAttribute('aria-expanded')) !== 'true') await head.click()
+          await head.scrollIntoViewIfNeeded()
+          await settle(p)
+        },
+        target: p => inspector(p).locator('.st-section').filter({ has: p.getByRole('button', { name: 'Effects' }) }),
+      },
+    ],
+  },
+
+  'studio-background': {
+    guide: guide('studio-background'),
+    start: openStudio,
+    steps: [
+      {
+        prepare: async p => {
+          await studioSection(p, 'Pages')
+          await thumbs(p).nth(2).locator('.st-thumb').click()
+          await settle(p)
+        },
+        target: p => inspector(p).locator('.st-section').filter({ hasText: 'Page background' }).first(),
+      },
+      {
+        target: p => inspector(p).locator('.st-paint-tabs').first(),
+      },
+    ],
+  },
+
+  'studio-layers': {
+    guide: guide('studio-layers'),
+    start: openStudio,
+    steps: [
+      {
+        prepare: async p => {
+          await studioSection(p, 'Pages')
+          await thumbs(p).nth(2).locator('.st-thumb').click()
+          await settle(p)
+        },
+        target: p => railButton(p, 'Layers'),
+        act: async p => {
+          await studioSection(p, 'Layers')
+          await expect(sidePanel(p).locator('.st-layer').first()).toBeVisible()
+          await settle(p)
+        },
+      },
+      {
+        target: p => sidePanel(p).locator('.st-layer').first(),
      },
    ],
  },
@@ -0,0 +1,15 @@
+import { devices, test } from '@playwright/test';
+
+import { checkPageSnapshot } from './support/pageSnapshotFlow';
+
+// The Studio's page image for the assistant, drawn in WebKit. playwright.config.ts
+// has no WebKit project; the engine comes from this file-level device, as in
+// e2e/urlbar-scroll-1809.spec.ts. Safari is why the rasteriser is
+// modern-screenshot: it decodes images in a foreignObject late, and a page
+// drawn too early comes out blank. page.route does not see a request the
+// service worker answers, so it is blocked.
+test.use({ ...devices['Desktop Safari'], serviceWorkers: 'block' });
+
+test('Studio page snapshot: WebKit draws a seeded spread to a JPEG', async ({ page }) => {
+  await checkPageSnapshot(page);
+});
@@ -0,0 +1,13 @@
+import { test } from '@playwright/test';
+
+import { checkPageSnapshot } from './support/pageSnapshotFlow';
+
+// The Studio's page image for the assistant, drawn in Chromium. The same flow
+// runs in WebKit from page-snapshot-webkit.spec.ts, the engine with the most
+// to get wrong about drawing a page through an SVG foreignObject.
+// page.route does not see a request the service worker answers, so it is blocked.
+test.use({ serviceWorkers: 'block' });
+
+test('Studio page snapshot: Chromium draws a seeded spread to a JPEG', async ({ page }) => {
+  await checkPageSnapshot(page);
+});
@@ -0,0 +1,93 @@
+import type { APIRequestContext, Browser, Page } from '@playwright/test';
+import { devices, expect, test } from '@playwright/test';
+import { E2E_STATE_FILE } from '../playwright.config';
+
+// A stay booked somewhere else shows in the open planner without a reload. The
+// assistant books through its tools, and a stay it booked showed in the planner
+// only after a reload: the server told every tab, the client dropped the news.
+// Here a second session (a browser context of its own, so the open planner's
+// socket is not the one that asked) books the stay over the API, and the planner
+// has to show it on its own, on the desktop and on the phone.
+
+/** A trip with three dated days, and their ids in order. */
+async function seedTrip(api: APIRequestContext, title: string) {
+  const created = await api.post('/api/trips', {
+    data: { title, start_date: '2099-07-01', end_date: '2099-07-03' },
+  });
+  expect(created.ok(), 'seed trip').toBeTruthy();
+  const body = await created.json();
+  const tripId: number = body.trip?.id ?? body.id;
+  const days = await (await api.get(`/api/trips/${tripId}/days`)).json();
+  const dayIds: number[] = (days.days ?? days).map((day: { id: number }) => day.id);
+  expect(dayIds.length, 'the trip has its three days').toBe(3);
+  return { tripId, dayIds };
+}
+
+/** Opens the planner and waits until its socket joined the trip's room, so no event can slip past it. */
+async function openPlanner(page: Page, tripId: number) {
+  const joined = new Promise<void>((resolve) => {
+    page.on('websocket', (ws) => {
+      ws.on('framereceived', (frame) => {
+        if (String(frame.payload).includes('"joined"')) resolve();
+      });
+    });
+  });
+  await page.goto(`/trips/${tripId}`);
+  await joined;
+}
+
+/** Books a hotel from the first to the second day, from a session of its own. */
+async function bookElsewhere(browser: Browser, tripId: number, dayIds: number[], hotel: string) {
+  const other = await browser.newContext({ storageState: E2E_STATE_FILE });
+  try {
+    const place = await other.request.post(`/api/trips/${tripId}/places`, {
+      data: { name: hotel, lat: 52.5306, lng: 13.3846 },
+    });
+    expect(place.ok(), 'the hotel place').toBeTruthy();
+    const placeBody = await place.json();
+    const stay = await other.request.post(`/api/trips/${tripId}/accommodations`, {
+      data: { place_id: placeBody.place?.id ?? placeBody.id, start_day_id: dayIds[0], end_day_id: dayIds[1] },
+    });
+    expect(stay.ok(), 'the stay').toBeTruthy();
+  } finally {
+    await other.close();
+  }
+}
+
+test('desktop: a stay booked in another session shows in the day plan without a reload', async ({ page, browser }) => {
+  const hotel = `Mercure Hotel ${Date.now()}`;
+  const { tripId, dayIds } = await seedTrip(page.request, `Stay live ${Date.now()}`);
+  await openPlanner(page, tripId);
+  await expect(page.locator('.leaflet-container')).toBeVisible({ timeout: 20_000 });
+
+  await bookElsewhere(browser, tripId, dayIds, hotel);
+
+  // The day head names the hotel of the night, read from the planner's stays.
+  await expect(page.locator('[data-dp="day-pill"]', { hasText: hotel }).first()).toBeVisible({ timeout: 10_000 });
+});
+
+test('phone: a stay booked in another session shows on the day plan without a reload', async ({ browser }) => {
+  const pixel = devices['Pixel 7'];
+  const phone = await browser.newContext({
+    viewport: pixel.viewport,
+    userAgent: pixel.userAgent,
+    deviceScaleFactor: pixel.deviceScaleFactor,
+    isMobile: pixel.isMobile,
+    hasTouch: pixel.hasTouch,
+    storageState: E2E_STATE_FILE,
+  });
+  try {
+    const page = await phone.newPage();
+    const hotel = `Mercure Hotel ${Date.now()}`;
+    const { tripId, dayIds } = await seedTrip(page.request, `Stay live phone ${Date.now()}`);
+    await openPlanner(page, tripId);
+    await expect(page.locator('button[aria-current="true"]')).toBeVisible({ timeout: 30_000 });
+
+    await bookElsewhere(browser, tripId, dayIds, hotel);
+
+    // The first day's plan carries a chip for the hotel checked into that night.
+    await expect(page.locator('button', { hasText: hotel }).first()).toBeVisible({ timeout: 10_000 });
+  } finally {
+    await phone.close();
+  }
+});
@@ -0,0 +1,53 @@
+import { expect, type Page } from '@playwright/test';
+
+import type { SeededSnapshot } from './pageSnapshotHarness';
+
+/** The map tile from another server that the harness puts on the sheet. */
+const TILE = 'https://tile.openstreetmap.org/5/16/10.png?e2e=page-snapshot';
+
+/**
+ * The page snapshot the Studio sends the assistant, taken in a real browser
+ * (journey-studio.md 3.1): the harness module is loaded into the running app
+ * through the dev server, draws a seeded spread with the editor's SpreadView
+ * and rasterises it with modern-screenshot. The image has to be a non-empty
+ * JPEG at the size the Studio promises the server, and the map tile from
+ * another server on the sheet must never have been fetched for it. Every
+ * request to OpenStreetMap's tile servers is answered here, which keeps the
+ * run off the network, but only the harness's own tile counts: the sheet's
+ * <img> asks for it as an image, anything else would be the rasteriser
+ * reaching for it. Its query string sets it apart from the tiles the app
+ * itself may prefetch from the same servers. The specs block the service
+ * worker, whose tile cache would answer before the route sees a request.
+ */
+export async function checkPageSnapshot(page: Page): Promise<void> {
+  const tileFetches: string[] = [];
+  await page.route(/^https:\/\/(?:[a-c]\.)?tile\.openstreetmap\.org\//, (route) => {
+    const request = route.request();
+    const kind = request.resourceType();
+    if (request.url().startsWith(TILE) && kind !== 'image') tileFetches.push(kind);
+    return route.fulfill({ status: 204, headers: { 'access-control-allow-origin': '*' } });
+  });
+  await page.goto('/dashboard');
+  const shot = await page.evaluate(
+    async ({ harness, tile }: { harness: string; tile: string }): Promise<SeededSnapshot | null> => {
+      const mod = (await import(/* @vite-ignore */ harness)) as {
+        snapshotSeededSpread: (tileUrl: string) => Promise<SeededSnapshot | null>;
+      };
+      return mod.snapshotSeededSpread(tile);
+    },
+    { harness: '/e2e/support/pageSnapshotHarness.ts', tile: TILE }
+  );
+
+  expect(shot, 'the spread was drawn and came out under the size limit').not.toBeNull();
+  if (!shot) return;
+  expect(shot.type).toBe('image/jpeg');
+  expect(shot.head).toEqual([0xff, 0xd8, 0xff]);
+  expect(shot.bytes).toBeGreaterThan(1_000);
+  // A double spread at 1280 pixels on its long edge, and the file says so too.
+  expect(shot.width).toBe(1280);
+  expect(shot.height).toBe(640);
+  expect(shot.decodedWidth).toBe(1280);
+  expect(shot.decodedHeight).toBe(640);
+  expect(shot.drawnPhotoIds).toEqual([]);
+  expect(tileFetches, 'the tile from another server is left out before anything is fetched').toEqual([]);
+}
@@ -0,0 +1,85 @@
+import { bookPageSetupForPreset, bookShapeElementSchema, bookTextElementSchema, type BookSpread } from '@trek/shared';
+import { createElement } from 'react';
+import { flushSync } from 'react-dom';
+import { createRoot } from 'react-dom/client';
+
+import { SpreadView } from '../../src/components/Studio/SpreadView';
+import { sheetSizePx, snapshotSpread } from '../../src/components/Studio/pageSnapshot';
+
+/**
+ * Loaded by the page snapshot flows inside the running app, where the dev
+ * server serves it as a module: draws a seeded spread with the editor's own
+ * SpreadView and turns it into the JPEG the Studio sends the assistant, so a
+ * real Chromium and a real WebKit prove the rasteriser works end to end. A map
+ * tile from another server sits on the sheet and must be left out; the flow
+ * names the tile and watches its server.
+ */
+
+export interface SeededSnapshot {
+  type: string;
+  bytes: number;
+  /** The first bytes of the file: a JPEG starts FF D8 FF. */
+  head: number[];
+  width: number;
+  height: number;
+  /** The image decoded again, as the browser reads it. */
+  decodedWidth: number;
+  decodedHeight: number;
+  drawnPhotoIds: number[];
+}
+
+function seededSpread(): BookSpread {
+  return {
+    id: 'sp-seeded',
+    role: 'inner',
+    background: '#f4efe6',
+    elements: [
+      bookShapeElementSchema.parse({ id: 'shape', kind: 'shape', frame: { x: 20, y: 20, w: 160, h: 90 } }),
+      bookTextElementSchema.parse({
+        id: 'title',
+        kind: 'text',
+        frame: { x: 230, y: 30, w: 160, h: 30 },
+        text: 'Lisbon',
+      }),
+    ],
+    parked: [],
+    entryId: null,
+  };
+}
+
+export async function snapshotSeededSpread(tileUrl: string): Promise<SeededSnapshot | null> {
+  const page = bookPageSetupForPreset('square-210');
+  const spread = seededSpread();
+  const size = sheetSizePx(spread, page);
+  // Off screen as the Studio's stage is; the sheet inside it is what is drawn.
+  const host = document.createElement('div');
+  host.style.cssText = 'position:fixed;top:0;inset-inline-start:-20000px';
+  const sheet = document.createElement('div');
+  sheet.style.cssText = `position:relative;width:${size.width}px;height:${size.height}px`;
+  host.appendChild(sheet);
+  document.body.appendChild(host);
+  const root = createRoot(sheet);
+  flushSync(() => root.render(createElement(SpreadView, { spread, page, print: true })));
+  const tile = document.createElement('img');
+  tile.src = tileUrl;
+  sheet.firstElementChild?.appendChild(tile);
+  try {
+    const shot = await snapshotSpread(sheet, size, new Set());
+    if (!shot) return null;
+    const head = [...new Uint8Array(await shot.image.slice(0, 3).arrayBuffer())];
+    const bitmap = await createImageBitmap(shot.image);
+    return {
+      type: shot.image.type,
+      bytes: shot.image.size,
+      head,
+      width: shot.width,
+      height: shot.height,
+      decodedWidth: bitmap.width,
+      decodedHeight: bitmap.height,
+      drawnPhotoIds: shot.drawnPhotoIds,
+    };
+  } finally {
+    root.unmount();
+    host.remove();
+  }
+}
@@ -1,6 +1,6 @@
 {
  "name": "@trek/client",
-  "version": "4.3.3",
+  "version": "5.0.0",
  "engines": {
    "node": "^22.22.2 || ^24.15.0 || >=26.0.0"
  },
@@ -8,7 +8,7 @@
  "type": "module",
  "scripts": {
    "dev": "vite",
-    "prebuild": "node scripts/patch-maplibre.mjs && node scripts/generate-icons.mjs",
+    "prebuild": "node scripts/generate-icons.mjs",
    "build": "vite build",
    "build:analyze": "vite build --mode analyze",
    "preview": "vite preview",
@@ -41,19 +41,45 @@
    "shots:promote": "node e2e/screenshots/promote.mjs",
    "e2e:report": "playwright show-report",
    "format": "prettier --write \"src/**/*.tsx\" \"src/**/*.css\"",
-    "format:check": "prettier --check \"src/**/*.tsx\" \"src/**/*.css\"",
-    "postinstall": "node scripts/patch-maplibre.mjs",
-    "predev": "node scripts/patch-maplibre.mjs"
+    "format:check": "prettier --check \"src/**/*.tsx\" \"src/**/*.css\""
  },
  "dependencies": {
+    "@assistant-ui/react": "0.15.25",
+    "@fontsource/abril-fatface": "^5.3.0",
+    "@fontsource/alfa-slab-one": "^5.3.0",
+    "@fontsource/allura": "^5.3.0",
+    "@fontsource/anton": "^5.3.0",
+    "@fontsource/archivo-black": "^5.3.0",
    "@fontsource/bebas-neue": "^5.3.0",
+    "@fontsource/big-shoulders-display": "^5.3.0",
+    "@fontsource/bodoni-moda": "^5.3.0",
+    "@fontsource/bricolage-grotesque": "^5.3.0",
+    "@fontsource/caveat": "^5.3.0",
+    "@fontsource/cormorant-garamond": "^5.3.0",
+    "@fontsource/dancing-script": "^5.3.0",
+    "@fontsource/dm-mono": "^5.3.0",
+    "@fontsource/dm-serif-display": "^5.3.0",
    "@fontsource/eb-garamond": "^5.3.0",
+    "@fontsource/fraunces": "^5.3.0",
    "@fontsource/geist-sans": "^5.3.0",
+    "@fontsource/great-vibes": "^5.3.0",
+    "@fontsource/homemade-apple": "^5.3.0",
    "@fontsource/inter": "^5.3.0",
+    "@fontsource/kaushan-script": "^5.3.0",
+    "@fontsource/league-gothic": "^5.3.0",
    "@fontsource/lora": "^5.3.0",
+    "@fontsource/montserrat": "^5.3.0",
    "@fontsource/museomoderno": "^5.3.0",
+    "@fontsource/oswald": "^5.3.0",
+    "@fontsource/pacifico": "^5.3.0",
+    "@fontsource/parisienne": "^5.3.0",
+    "@fontsource/permanent-marker": "^5.3.0",
    "@fontsource/playfair-display": "^5.3.0",
    "@fontsource/poppins": "^5.3.0",
+    "@fontsource/sacramento": "^5.3.0",
+    "@fontsource/satisfy": "^5.3.0",
+    "@fontsource/shrikhand": "^5.3.0",
+    "@fontsource/yellowtail": "^5.3.0",
    "@mapbox/mapbox-gl-rtl-text": "^0.4.0",
    "@maplibre/maplibre-gl-leaflet": "0.1.4",
    "@simplewebauthn/browser": "^13.3.0",
@@ -66,7 +92,8 @@
    "leaflet": "^1.9.4",
    "lucide-react": "^0.577.0",
    "mapbox-gl": "^3.31.0",
-    "maplibre-gl": "5.24.0",
+    "maplibre-gl": "6.15.0",
+    "modern-screenshot": "4.7.0",
    "plyr": "^3.8.4",
    "react": "^19.3.0",
    "react-dom": "^19.3.0",
@@ -79,7 +106,7 @@
    "remark-breaks": "^4.0.0",
    "remark-gfm": "^4.0.1",
    "tz-lookup": "^6.1.25",
-    "zod": "^4.6.5",
+    "zod": "^4.6.7",
    "zustand": "^5.0.15"
  },
  "devDependencies": {
@@ -1,26 +1,26 @@
 {
  "src": {
-    "@typescript-eslint/no-non-null-assertion": 404,
-    "@typescript-eslint/no-misused-promises": 858,
+    "@typescript-eslint/no-non-null-assertion": 382,
+    "@typescript-eslint/no-misused-promises": 848,
    "no-console": 88,
-    "complexity": 229,
+    "complexity": 220,
    "@typescript-eslint/no-explicit-any": 146,
-    "trek/no-swallowed-catch": 133,
-    "max-params": 35,
+    "trek/no-swallowed-catch": 130,
+    "max-params": 32,
    "trek/store-without-selector": 67,
-    "react-hooks/refs": 557,
-    "react-hooks/set-state-in-effect": 196,
-    "@typescript-eslint/no-floating-promises": 167,
-    "react-hooks/exhaustive-deps": 120,
-    "@typescript-eslint/no-unused-vars": 126,
+    "react-hooks/refs": 555,
+    "react-hooks/set-state-in-effect": 194,
+    "@typescript-eslint/no-floating-promises": 164,
+    "react-hooks/exhaustive-deps": 116,
+    "@typescript-eslint/no-unused-vars": 124,
    "react-hooks/immutability": 28,
-    "max-lines-per-function": 133,
+    "max-lines-per-function": 130,
    "react-hooks/static-components": 78,
    "react-hooks/preserve-manual-memoization": 12,
    "no-useless-assignment": 7,
    "no-empty": 19,
    "trek/no-window-globals": 41,
-    "react-refresh/only-export-components": 46,
+    "react-refresh/only-export-components": 44,
    "unused-disable-directive": 6,
    "max-depth": 21,
    "react-hooks/void-use-memo": 1,
@@ -34,12 +34,12 @@
    "react-hooks/exhaustive-deps": 46
  },
  "tests": {
-    "@typescript-eslint/no-explicit-any": 491,
-    "@typescript-eslint/no-non-null-assertion": 1943,
+    "@typescript-eslint/no-explicit-any": 490,
+    "@typescript-eslint/no-non-null-assertion": 1927,
    "@typescript-eslint/no-misused-promises": 22,
    "@typescript-eslint/no-unused-vars": 51,
    "@typescript-eslint/no-floating-promises": 33,
-    "trek/no-window-globals": 332,
+    "trek/no-window-globals": 331,
    "trek/no-swallowed-catch": 14,
    "react-hooks/globals": 5,
    "react-hooks/refs": 22,
@@ -16,12 +16,17 @@
      "feature": "Addon manager",
      "hooks": [
        "src/components/Admin/addons/addonModel.ts",
-        "src/components/Admin/addons/useAddonManager.ts",
-        "src/components/Admin/addons/useLlmParsingConfig.ts"
+        "src/components/Admin/addons/useAddonManager.ts"
      ],
      "desktop": ["src/components/Admin/AddonManager.tsx"],
      "mobile": ["src/mobile/screens/admin/MAdminAddonManager.tsx"]
    },
+    {
+      "feature": "Addon manager: AI tile",
+      "hooks": ["src/components/Admin/addons/useAiAddonTile.ts"],
+      "desktop": ["src/components/Admin/addons/AiAddonTile.tsx"],
+      "mobile": ["src/mobile/screens/admin/MAdminAddonManager.tsx"]
+    },
    {
      "feature": "Admin notification preference matrix",
      "hooks": ["src/components/Admin/useAdminNotificationMatrix.ts", "src/pages/admin/AdminPage.constants.ts"],
@@ -58,6 +63,30 @@
      "desktop": ["src/pages/admin/AdminUsersTab.tsx"],
      "mobile": ["src/mobile/screens/admin/MAdminUsersSection.tsx"]
    },
+    {
+      "feature": "AI assistant chat",
+      "hooks": ["src/components/Assistant/useAssistantThread.ts", "src/components/Assistant/useAssistantStatus.ts"],
+      "desktop": ["src/components/Assistant/AssistantWindow.tsx"],
+      "mobile": ["src/mobile/screens/trip/assistant/MAssistantScreen.tsx"]
+    },
+    {
+      "feature": "AI assistant home chat",
+      "hooks": ["src/components/Assistant/useAssistantHome.ts"],
+      "desktop": ["src/components/Assistant/AssistantWindow.tsx"],
+      "mobile": [
+        "src/mobile/screens/assistant/MAssistantHomeScreen.tsx",
+        "src/mobile/screens/dashboard/MDashboard.tsx"
+      ]
+    },
+    {
+      "feature": "Assistant hints",
+      "hooks": ["src/components/Assistant/useAssistantHints.ts"],
+      "desktop": ["src/components/Assistant/AssistantHeader.tsx", "src/components/Assistant/AssistantLauncher.tsx"],
+      "mobile": [
+        "src/mobile/screens/trip/assistant/MAssistantScreen.tsx",
+        "src/mobile/screens/trip/sheets/MMehrSheet.tsx"
+      ]
+    },
    {
      "feature": "Atlas country/region action sheet",
      "hooks": ["src/pages/atlas/useAtlasCountryActions.ts"],
@@ -206,8 +235,7 @@
        "src/components/Collections/CollectionPicker.tsx",
        "src/components/Collections/CollectionPlaceDetail.tsx",
        "src/components/Collections/ListEditorModal.tsx",
-        "src/components/Collections/MSaveToCollectionSheet.tsx",
-        "src/components/Collections/StatusBadge.tsx"
+        "src/components/Collections/MSaveToCollectionSheet.tsx"
      ],
      "mobile": [
        "src/mobile/screens/collections/MCollAddSheet.tsx",
@@ -245,8 +273,8 @@
      "mobile": ["src/mobile/screens/trip/sheets/MCostSheet.tsx", "src/mobile/screens/trip/tabs/MCostsTab.tsx"]
    },
    {
-      "feature": "Costs/budget ledger: useCostsLedger, useSettlementForm",
-      "hooks": ["src/components/Budget/useCostsLedger.ts", "src/components/Budget/useSettlementForm.ts"],
+      "feature": "Costs/budget ledger: useCostsLedger, useSettlementForm, useExpenseLinks",
+      "hooks": ["src/components/Budget/useCostsLedger.ts", "src/components/Budget/useSettlementForm.ts", "src/components/Budget/useExpenseLinks.ts"],
      "desktop": ["src/components/Budget/CostsPanel.tsx"],
      "mobile": ["src/mobile/screens/trip/tabs/MCostsTab.tsx"]
    },
@@ -573,7 +601,6 @@
      "hooks": ["src/components/Planner/usePlaceActions.ts"],
      "desktop": [
        "src/components/Planner/PlaceInspector.tsx",
-        "src/components/shared/PlaceAvatarUpload.tsx",
        "src/pages/tripPlanner/useTripPlannerPage.ts"
      ],
      "mobile": ["src/mobile/screens/trip/sheets/MPlaceSheet.tsx"]
@@ -634,9 +661,24 @@
      "desktop": ["src/components/Roadtrip/RoadtripStayModal.tsx"],
      "mobile": ["src/mobile/screens/trip/roadtrip/MRtStaySheet.tsx"]
    },
+    {
+      "feature": "Settings / Demo account locks",
+      "hooks": ["src/components/Demo/useDemoLock.ts"],
+      "desktop": [
+        "src/components/Settings/AccountDemoLock.tsx",
+        "src/components/Settings/DisplaySettingsTab.tsx",
+        "src/components/Settings/IntegrationsTab.tsx",
+        "src/components/Settings/ai/AiConnectionSection.tsx"
+      ],
+      "mobile": [
+        "src/mobile/screens/settings/MAiConnectionSection.tsx",
+        "src/mobile/screens/settings/MSettingsGeneral.tsx",
+        "src/mobile/screens/settings/MSettingsMcp.tsx"
+      ]
+    },
    {
      "feature": "Settings / Account",
-      "hooks": ["src/components/Settings/useAccountSettings.ts"],
+      "hooks": ["src/components/Settings/AccountDemoLock.tsx", "src/components/Settings/useAccountSettings.ts"],
      "desktop": ["src/components/Settings/AccountTab.tsx"],
      "mobile": ["src/mobile/screens/settings/MSettingsAccount.tsx"]
    },
@@ -658,6 +700,12 @@
      "desktop": ["src/components/Settings/DisplaySettingsTab.tsx"],
      "mobile": ["src/mobile/screens/settings/MSettingsGeneral.tsx"]
    },
+    {
+      "feature": "Settings / Integrations / AI assistant",
+      "hooks": ["src/components/Settings/ai/useAiConnections.ts"],
+      "desktop": ["src/components/Settings/ai/AiConnectionSection.tsx"],
+      "mobile": ["src/mobile/screens/settings/MAiConnectionSection.tsx"]
+    },
    {
      "feature": "Settings / Integrations / AI parsing",
      "hooks": ["src/components/Settings/useLlmConnection.ts"],
@@ -976,7 +1024,6 @@
    "src/mobile/screens/trip/sheets/MBrowseActionsSheet.tsx": "Phone action sheet for a pool place that calls planner handlers and the shared placeToSaveTarget.",
    "src/mobile/screens/trip/sheets/MDaysSheet.tsx": "Button based day reorder sheet over planner.handleReorderDays; the desktop reorders by drag.",
    "src/mobile/screens/trip/sheets/MLinkedCosts.tsx": "Already shares useExpenseLinks with the desktop BookingCostsSection; only markup and a search filter are local.",
-    "src/mobile/screens/trip/sheets/MMehrSheet.tsx": "Phone dock overflow menu that only opens tabs and sheets.",
    "src/mobile/screens/trip/sheets/MTripSheetUi.tsx": "Phone sheet UI primitives (eyebrow, headers, stat boxes, action circles) and a time display helper.",
    "src/mobile/screens/trip/sheets/PlFileAttach.tsx": "Markup only; pending files and link actions come through props from the phone form sheets.",
    "src/mobile/screens/trip/sheets/PlSheetChrome.tsx": "Phone form sheet chrome primitives (header, footer, field classes).",
@@ -55,7 +55,6 @@
  "scripts/check-gl-split.mjs",
  "scripts/check-page-pattern.mjs",
  "scripts/generate-icons.mjs",
-  "scripts/patch-maplibre.mjs",
  "src/App.test.tsx",
  "src/App.tsx",
  "src/App.versionHandover.test.tsx",
@@ -400,8 +399,6 @@
  "src/components/Journey/moodConfig.ts",
  "src/components/Journey/photoZoom.test.ts",
  "src/components/Journey/photoZoom.ts",
-  "src/components/Journey/stripMarkdown.test.ts",
-  "src/components/Journey/stripMarkdown.ts",
  "src/components/Journey/useConnectedPhotoProviders.test.tsx",
  "src/components/Journey/useConnectedPhotoProviders.ts",
  "src/components/Journey/useEntryPhotoOrder.test.ts",
@@ -411,7 +408,6 @@
  "src/components/Journey/usePhotoZoom.ts",
  "src/components/Layout/BottomNav.test.tsx",
  "src/components/Layout/BottomNav.tsx",
-  "src/components/Layout/DemoBanner.tsx",
  "src/components/Layout/InAppNotificationBell.test.tsx",
  "src/components/Layout/InAppNotificationBell.tsx",
  "src/components/Layout/MobileTopBar.test.tsx",
@@ -729,8 +725,6 @@
  "src/components/Planner/parsedItemToDraft.ts",
  "src/components/Planner/placeAmap.test.ts",
  "src/components/Planner/placeAmap.ts",
-  "src/components/Planner/placeCategoryGuess.test.ts",
-  "src/components/Planner/placeCategoryGuess.ts",
  "src/components/Planner/placeCoMaps.test.ts",
  "src/components/Planner/placeCoMaps.ts",
  "src/components/Planner/placeDialogParts.test.tsx",
@@ -783,7 +777,6 @@
  "src/components/Roadtrip/AutomaticDayStop.test.tsx",
  "src/components/Roadtrip/AutomaticDayStop.tsx",
  "src/components/Roadtrip/ChargingInfo.test.tsx",
-  "src/components/Roadtrip/ChargingInfo.tsx",
  "src/components/Roadtrip/DayWindowFields.test.tsx",
  "src/components/Roadtrip/DayWindowFields.tsx",
  "src/components/Roadtrip/EndDayControl.test.tsx",
@@ -975,19 +968,13 @@
  "src/components/Studio/TravelElements.tsx",
  "src/components/Studio/TravelPreview.tsx",
  "src/components/Studio/TrimField.tsx",
-  "src/components/Studio/applyTemplate.ts",
-  "src/components/Studio/autoLayout.ts",
  "src/components/Studio/bookFontFaces.ts",
  "src/components/Studio/bookFonts.ts",
-  "src/components/Studio/bookIds.ts",
  "src/components/Studio/bookRender.ts",
  "src/components/Studio/bookSheets.ts",
-  "src/components/Studio/bookTemplates.data.ts",
  "src/components/Studio/countryShapes.ts",
-  "src/components/Studio/entryText.ts",
  "src/components/Studio/flags.ts",
  "src/components/Studio/folioColour.ts",
-  "src/components/Studio/grids.ts",
  "src/components/Studio/iconLibrary.ts",
  "src/components/Studio/mapSources.ts",
  "src/components/Studio/mapTiles.ts",
@@ -997,13 +984,10 @@
  "src/components/Studio/printSheets.ts",
  "src/components/Studio/resolveBindings.ts",
  "src/components/Studio/roadRoute.ts",
-  "src/components/Studio/savedLayouts.ts",
  "src/components/Studio/shapes.ts",
  "src/components/Studio/spreadFile.ts",
  "src/components/Studio/studioClipboard.ts",
  "src/components/Studio/studioUpload.ts",
-  "src/components/Studio/templates.ts",
-  "src/components/Studio/travelRefresh.ts",
  "src/components/Studio/useBookPresence.ts",
  "src/components/Studio/useBookStore.ts",
  "src/components/Studio/useSpreadInteraction.ts",
@@ -1137,8 +1121,6 @@
  "src/components/shared/PasswordChecklist.tsx",
  "src/components/shared/PlaceAvatar.test.tsx",
  "src/components/shared/PlaceAvatar.tsx",
-  "src/components/shared/PlaceAvatarUpload.test.tsx",
-  "src/components/shared/PlaceAvatarUpload.tsx",
  "src/components/shared/PluginIcon.test.tsx",
  "src/components/shared/PluginIcon.tsx",
  "src/components/shared/PublicLanguagePicker.test.tsx",
@@ -2116,7 +2098,6 @@
  "tests/unit/studio/entryText.test.ts",
  "tests/unit/studio/flags.test.ts",
  "tests/unit/studio/folioColour.test.ts",
-  "tests/unit/studio/grids.test.ts",
  "tests/unit/studio/iconElement.test.tsx",
  "tests/unit/studio/inspector.test.tsx",
  "tests/unit/studio/inspectorTravel.test.tsx",
@@ -2140,7 +2121,6 @@
  "tests/unit/studio/studioClipboardLayouts.test.ts",
  "tests/unit/studio/studioStore.spreads.test.ts",
  "tests/unit/studio/studioUpload.test.ts",
-  "tests/unit/studio/templates.test.ts",
  "tests/unit/studio/travelRefresh.test.ts",
  "tests/unit/studio/travelStops.test.tsx",
  "tests/unit/studio/trimField.test.tsx",
@@ -44,7 +44,8 @@
 *
 * The en keys nothing reaches are a ratchet. Besides src/, the search for
 * references reads server/src (system notice and notification channel keys
- * the server sends, *Key properties in its registries) and plugin-sdk/src, so
+ * the server sends, *Key properties in its registries), plugin-sdk/src and
+ * shared/src/book (the Studio's layout template names), so
 * a key the server uses does not read as dead; those references only count as
 * reached, they are not held to the rules above. The unused keys per en
 * domain file may not rise above scripts/i18n-unused-baseline.json, and an
@@ -69,11 +70,15 @@ const UNUSED_BASELINE = join(HERE, 'i18n-unused-baseline.json');

 /**
 * Where else a translation key can be named: the server sends keys for the
- * client to translate (system notices, notification channels), and the plugin
- * SDK names the ones plugin surfaces use. Read only to find which en keys are
- * reached.
+ * client to translate (system notices, notification channels), the plugin
+ * SDK names the ones plugin surfaces use, and the shared book engine names
+ * its layout templates. Read only to find which en keys are reached.
 */
-export const REFERENCE_ROOTS = [join(HERE, '..', '..', 'server', 'src'), join(HERE, '..', '..', 'plugin-sdk', 'src')];
+export const REFERENCE_ROOTS = [
+  join(HERE, '..', '..', 'server', 'src'),
+  join(HERE, '..', '..', 'plugin-sdk', 'src'),
+  join(HERE, '..', '..', 'shared', 'src', 'book'),
+];

 /** How many en keys a template may reach and still pass without an entry below. */
 export const MAX_IMPLICIT_MATCHES = 30;
@@ -112,11 +117,6 @@ export const DYNAMIC_ALLOWED = [
    template: 'settings.${mode}',
    because: "mode is a ThemeMode from resolveMode(), 'light' | 'dark' | 'auto', and settings.light/dark/auto exist",
  },
-  ...['components/Studio/StudioElementsPanel.tsx', 'components/Studio/StudioInspector.tsx'].map((file) => ({
-    file,
-    template: 'journey.studio.${key}',
-    because: 'key comes from an `as const` tuple of frame and stroke styles written beside the call, typed literals',
-  })),
  {
    file: 'mobile/screens/trip/sheets/MBookingFields.tsx',
    template: 'reservations.${s}',
@@ -139,6 +139,20 @@ export const DYNAMIC_ALLOWED = [
          'memories.* key in en',
      }))
  ),
+  {
+    file: 'components/Studio/stickerLibrary.ts',
+    template: 'journey.studio.sticker.${id}',
+    because:
+      'id is a sticker id of the library in @trek/shared/stickers; stickerLibrary.test.ts resolves the key of every ' +
+      'sticker the library holds against en',
+  },
+  {
+    file: 'components/Studio/shapes.ts',
+    template: 'journey.studio.shapeName.${shape}',
+    because:
+      'shapeName takes a BookShapeId; shared/src/book/book-shape-catalogue.spec.ts holds an en name for every ' +
+      'shape of BOOK_SHAPE_GROUPS',
+  },
 ];

 const KEY_RE = /^[a-z][a-zA-Z0-9_]*(?:\.[a-zA-Z0-9_:-]+)+$/;
@@ -1,8 +1,8 @@
 {
-  "admin.ts": 126,
-  "atlas.ts": 10,
+  "admin.ts": 112,
+  "atlas.ts": 9,
  "backup.ts": 10,
-  "budget.ts": 40,
+  "budget.ts": 36,
  "categories.ts": 1,
  "collab.ts": 9,
  "collection.ts": 35,
@@ -14,7 +14,7 @@
  "files.ts": 4,
  "help.ts": 3,
  "inspector.ts": 4,
-  "journey.ts": 69,
+  "journey.ts": 65,
  "login.ts": 1,
  "map.ts": 5,
  "memories.ts": 8,
@@ -26,16 +26,16 @@
  "packing.ts": 6,
  "pdf.ts": 1,
  "perm.ts": 4,
-  "places.ts": 10,
+  "places.ts": 9,
  "planner.ts": 53,
  "reservations.ts": 21,
-  "roadtrip.ts": 38,
-  "settings.ts": 40,
+  "roadtrip.ts": 36,
+  "settings.ts": 37,
  "share.ts": 7,
  "shared.ts": 2,
  "storage.ts": 16,
  "system_notice.ts": 32,
-  "todo.ts": 4,
+  "todo.ts": 3,
  "tours.ts": 12,
  "trip.ts": 10,
  "undo.ts": 1,
@@ -12,7 +12,6 @@
  "src/components/Collections/CollectionPlaceDetail.tsx": 1,
  "src/components/Collections/ListEditorModal.tsx": 1,
  "src/components/Collections/MSaveToCollectionSheet.tsx": 3,
-  "src/components/Collections/StatusBadge.tsx": 1,
  "src/components/Dawarich/DawarichAcceptDialog.tsx": 3,
  "src/components/Dawarich/DawarichAtlasDialog.tsx": 3,
  "src/components/Dawarich/DawarichSuggestionsPanel.tsx": 1,
@@ -39,8 +38,8 @@
  "src/components/Roadtrip/RoadtripSidebarDriveBands.tsx": 1,
  "src/components/Roadtrip/RoadtripSidebarRefuelBand.tsx": 1,
  "src/components/Studio/StudioShell.tsx": 1,
-  "src/components/Studio/StudioSidebar.tsx": 1,
-  "src/components/Studio/TravelElements.tsx": 1,
+  "src/components/Studio/sidebar/StudioEntryCard.tsx": 1,
+  "src/components/Studio/travel/BadgeIcon.tsx": 1,
  "src/components/Todo/useTodoList.ts": 1,
  "src/components/shared/ConfirmDialog.tsx": 1,
  "src/components/shared/CountryFlag.tsx": 1,
@@ -56,6 +55,6 @@
  "src/hooks/useWebPush.ts": 1,
  "src/repo/pluginPoiRepo.ts": 1,
  "src/store/slices/budgetSlice.ts": 1,
-  "src/store/studioStore.ts": 2,
+  "src/store/studioStore.ts": 1,
  "src/store/vacayStore.ts": 1
 }
@@ -31,11 +31,15 @@ export async function isFormatted(path) {
  if (!options) throw new RatchetError(`no Prettier config applies to ${path}`);
  try {
    return await prettier.check(readText(path), { ...options, filepath: path });
-  } catch {
+  } catch (err) {
+    stopped.set(path, String(err instanceof Error ? err.message : err).split('\n')[0]);
    return false;
  }
 }

+/** Why Prettier gave up on a file, by its path, so the failure line can say it was not about style. */
+const stopped = new Map();
+
 /** The files under root that Prettier would rewrite, keyed by their path from root. */
 export async function unformatted(root) {
  const found = [];
@@ -74,6 +78,8 @@ export async function check({
  if (list) for (const key of found) log(`${allowed.has(key) ? 'listed' : 'new   '}  ${key}`);
  for (const key of fresh) {
    error(`FAIL  ${key} is not formatted. Run: npx prettier --write ${key}`);
+    const why = stopped.get(join(root, key));
+    if (why) error(`      Prettier could not format it: ${why}`);
  }
  for (const key of stale) {
    error(`FAIL  ${key} is listed in scripts/format-baseline.json but is formatted now or gone.`);
@@ -116,7 +116,6 @@
  "src/components/Vacay/useVacayCalendarLogic.ts",
  "src/components/Vacay/useVacaySettings.ts",
  "src/components/Vacay/useVacayUserPicker.ts",
-  "src/components/shared/PlaceAvatarUpload.tsx",
  "src/hooks/useAirtrailConnection.ts",
  "src/hooks/useDawarichConnection.ts",
  "src/hooks/useDawarichSuggestions.ts",
@@ -151,7 +150,6 @@
  "src/pages/resetPassword/useResetPassword.ts",
  "src/pages/settings/useSettings.ts",
  "src/pages/sharedTrip/useSharedTrip.ts",
-  "src/pages/tripPlanner/useBookingEdits.ts",
  "src/pages/tripPlanner/usePlaceFormOpeners.ts",
  "src/pages/tripPlanner/usePlannerDialogs.ts",
  "src/pages/tripPlanner/useTripPlanner.ts",
@@ -1,34 +0,0 @@
-import { readFileSync, writeFileSync } from 'node:fs'
-import { createRequire } from 'node:module'
-import { dirname, join } from 'node:path'
-
-const require = createRequire(import.meta.url)
-const packagePath = require.resolve('maplibre-gl/package.json')
-const { version } = JSON.parse(readFileSync(packagePath, 'utf8'))
-
-if (version !== '5.24.0') throw new Error('Recheck the MapLibre sanitizer backport before changing its version')
-
-// Backport maplibre-gl-js#8189 without removing WebGL1 support in version 6.
-const loops = [
-  ['of elem.attributes)', 'of Array.from(elem.attributes))'],
-  ['of e.attributes)', 'of Array.from(e.attributes))'],
-]
-
-for (const filename of [
-  'src/util/dom.ts',
-  'dist/maplibre-gl.js',
-  'dist/maplibre-gl-dev.js',
-  'dist/maplibre-gl-csp.js',
-  'dist/maplibre-gl-csp-dev.js',
-]) {
-  const target = join(dirname(packagePath), filename)
-  const code = readFileSync(target, 'utf8')
-  const loop = loops.find(([before, after]) => code.includes(before) || code.includes(after))
-  if (!loop) throw new Error(`MapLibre sanitizer loop not found in ${filename}`)
-  const [before, after] = loop
-  if (code.split(before).length === 1 && code.split(after).length === 2) continue
-  if (code.split(before).length !== 2 || code.includes(after)) {
-    throw new Error(`Unexpected MapLibre sanitizer in ${filename}`)
-  }
-  writeFileSync(target, code.replace(before, after))
-}
@@ -1,12 +1,11 @@
 {
-  "components/Admin/AdminPluginsPanel.tsx": 2,
+  "components/Admin/plugins/pluginMenu.ts": 2,
  "components/Budget/BudgetPanelMemberChips.tsx": 6,
  "components/Budget/CostsPanel.tsx": 3,
  "components/Budget/ReceiptPreviewModal.tsx": 2,
  "components/Collab/CollabChatEmojiPicker.tsx": 3,
  "components/Collab/CollabChatReactionBadge.tsx": 3,
  "components/Collab/CollabChatReactionMenu.tsx": 1,
-  "components/Collab/CollabPolls.tsx": 1,
  "components/Collections/CollectionPlaceDetail.tsx": 2,
  "components/Files/FileManagerAvatarChip.tsx": 3,
  "components/Journey/JourneyDayJump.tsx": 1,
@@ -19,7 +18,6 @@
  "components/Journey/JourneyMap.tsx": 1,
  "components/Journey/JourneyMapGL.tsx": 2,
  "components/Journey/MobileEntryView.tsx": 1,
-  "components/Journey/PhotoLightbox.tsx": 3,
  "components/Journey/journeyPhotoLayer.ts": 1,
  "components/Layout/Navbar.tsx": 1,
  "components/Layout/OfflineBanner.tsx": 1,
@@ -53,17 +51,14 @@
  "components/Studio/BookSheetsView.tsx": 3,
  "components/Studio/PageNumbers.tsx": 1,
  "components/Studio/PeerCursors.tsx": 1,
-  "components/Studio/SpreadView.tsx": 8,
-  "components/Studio/StudioCanvas.tsx": 22,
+  "components/Studio/PhotoView.tsx": 4,
+  "components/Studio/SpreadView.tsx": 4,
+  "components/Studio/StudioCanvas.tsx": 12,
  "components/Studio/StudioElementsPanel.tsx": 1,
  "components/Studio/StudioExport.tsx": 1,
-  "components/Studio/StudioInspector.tsx": 1,
  "components/Studio/StudioSavedLayouts.tsx": 1,
-  "components/Studio/StudioSidebar.tsx": 3,
  "components/Studio/TravelElements.tsx": 4,
  "components/Studio/TravelPreview.tsx": 1,
-  "components/SystemNotices/ReleaseNoticeVisuals.tsx": 3,
-  "components/SystemNotices/releaseNotice.css": 2,
  "components/Vacay/VacayCalendar.tsx": 3,
  "components/Vacay/VacayMonthCard.tsx": 7,
  "components/Vacay/VacaySettings.tsx": 1,
@@ -74,7 +69,6 @@
  "components/shared/DetailShell.tsx": 1,
  "components/shared/ElevationProfile.tsx": 2,
  "components/shared/NavigationMenu.tsx": 2,
-  "components/shared/PlaceAvatarUpload.tsx": 3,
  "components/shared/PublicLanguagePicker.tsx": 1,
  "components/shared/SlidingTabs.tsx": 3,
  "components/shared/StarRating.tsx": 3,
@@ -1,4 +1,8 @@
 {
-  "pages/tripPlanner/PlanMapStage.tsx": 4,
-  "mobile/components/trek3d/MascotClip.tsx": 1
+  "components/Collections/CollectionMap.tsx": 1,
+  "components/Studio/LineHandles.tsx": 1,
+  "components/Studio/StudioSelectionChrome.tsx": 2,
+  "components/Studio/inspector/FocalPad.tsx": 1,
+  "mobile/components/trek3d/MascotClip.tsx": 1,
+  "pages/tripPlanner/PlanMapStage.tsx": 4
 }
@@ -2,31 +2,29 @@
  "e2e/help/fixtures.ts": 2291,
  "src/api/client.ts": 1873,
  "src/components/Admin/AdminPluginsPanel.test.tsx": 2704,
-  "src/components/Admin/AdminPluginsPanel.tsx": 1667,
+  "src/components/Admin/AdminPluginsPanel.tsx": 1277,
  "src/components/Budget/CostsPanel.test.tsx": 2736,
-  "src/components/Budget/CostsPanel.tsx": 1804,
-  "src/components/Map/MapView.tsx": 1401,
-  "src/components/Map/MapViewGL.test.tsx": 2920,
-  "src/components/Map/MapViewGL.tsx": 2293,
-  "src/components/Map/RouteCalculator.ts": 1195,
+  "src/components/Budget/CostsPanel.tsx": 1798,
+  "src/components/Map/MapView.tsx": 1385,
+  "src/components/Map/MapViewGL.test.tsx": 2919,
+  "src/components/Map/MapViewGL.tsx": 2290,
+  "src/components/Map/RouteCalculator.ts": 1063,
  "src/components/PDF/TripPDF.tsx": 1082,
  "src/components/Planner/DayDetailPanel.test.tsx": 2333,
  "src/components/Planner/DayPlanSidebar.test.tsx": 5349,
-  "src/components/Planner/DayPlanSidebar.tsx": 2953,
+  "src/components/Planner/DayPlanSidebar.tsx": 2936,
  "src/components/Planner/PlaceFormModal.test.tsx": 2836,
-  "src/components/Planner/PlaceFormModal.tsx": 1193,
-  "src/components/Planner/PlaceInspector.tsx": 1304,
-  "src/components/Studio/TravelElements.tsx": 1738,
-  "src/components/Studio/autoLayout.ts": 1691,
-  "src/components/Studio/bookTemplates.data.ts": 1309,
+  "src/components/Planner/PlaceFormModal.tsx": 1157,
+  "src/components/Planner/PlaceInspector.tsx": 1290,
+  "src/components/Studio/TravelElements.tsx": 1559,
  "src/components/Studio/countryShapes.ts": 2595,
  "src/index.css": 1636,
  "src/mobile/screens/admin/MAdminPluginsPanel.tsx": 1507,
  "src/pages/JourneyDetailPage.test.tsx": 4030,
  "src/pages/LoginPage.tsx": 1348,
-  "src/pages/TripPlannerPage.tsx": 1131,
+  "src/pages/TripPlannerPage.tsx": 1128,
  "src/pages/atlas/useAtlas.ts": 1211,
  "src/pages/tripPlanner/useTripPlanner.roadtrip.test.tsx": 3518,
  "src/pages/tripPlanner/useTripPlanner.test.tsx": 3270,
-  "src/styles/studio.css": 2087
+  "src/styles/studio.css": 1918
 }
@@ -9,7 +9,6 @@
  "src/components/Collab/CollabChat.helpers.ts": 1,
  "src/components/Collab/CollabChat.tsx": 3,
  "src/components/Collab/CollabChatEmojiPicker.tsx": 5,
-  "src/components/Collab/CollabChatMessageText.tsx": 2,
  "src/components/Collab/CollabChatMessages.tsx": 4,
  "src/components/Collab/CollabChatReactionBadge.tsx": 1,
  "src/components/Collab/CollabChatReactionMenu.tsx": 2,
@@ -52,7 +51,7 @@
  "src/components/Planner/DayPlanSidebarNoteModal.test.tsx": 1,
  "src/components/Planner/PlaceFormModal.test.tsx": 3,
  "src/components/Planner/PlaceFormModal.tsx": 1,
-  "src/components/Planner/PlaceInspector.tsx": 17,
+  "src/components/Planner/PlaceInspector.tsx": 16,
  "src/components/Planner/PlacesBulkCategoryModal.test.tsx": 1,
  "src/components/Planner/PlacesSidebar.tsx": 1,
  "src/components/Planner/PlacesSidebarMobileDayPicker.tsx": 8,
@@ -83,9 +82,6 @@
  "src/components/Settings/NotificationsTab.test.tsx": 1,
  "src/components/Settings/PasskeysSection.tsx": 1,
  "src/components/Settings/PhotoProvidersSection.test.tsx": 2,
-  "src/components/Studio/StudioCanvas.tsx": 1,
-  "src/components/Studio/StudioInspector.tsx": 1,
-  "src/components/Studio/autoLayout.ts": 1,
  "src/components/Todo/todoListModel.ts": 1,
  "src/components/Tours/planner/TourPlannerPanels.tsx": 2,
  "src/components/Tours/planner/useTourPlanner.ts": 2,
@@ -100,7 +96,6 @@
  "src/components/shared/CustomSelect.test.tsx": 1,
  "src/components/shared/PlaceAvatar.test.tsx": 2,
  "src/components/shared/PlaceAvatar.tsx": 1,
-  "src/components/shared/PlaceAvatarUpload.test.tsx": 1,
  "src/hooks/useDawarichSuggestions.test.ts": 1,
  "src/mobile/screens/admin/MAdminAddonManager.tsx": 2,
  "src/mobile/screens/admin/MAdminPluginsPanel.tsx": 6,
@@ -145,7 +140,6 @@
  "tests/integration/api/client.test.ts": 1,
  "tests/integration/hooks/useRouteCalculation.test.ts": 1,
  "tests/unit/i18n/i18nKeysScript.test.ts": 3,
-  "tests/unit/mobile/admin/MAdminAddonManager.test.tsx": 2,
  "tests/unit/mobile/admin/MAdminGitHubPanel.test.tsx": 1,
  "tests/unit/mobile/admin/MAdminNotifyMatrix.test.tsx": 1,
  "tests/unit/mobile/admin/MAdminStoragePanel.test.tsx": 1,
@@ -1,7 +1,7 @@
 {
  "App.tsx": 11,
-  "components/Admin/AdminPluginsPanel.tsx": 2,
  "components/Admin/DefaultUserSettingsTab.tsx": 1,
+  "components/Admin/plugins/pluginMenu.ts": 2,
  "components/Atlas/AtlasCountryPlaces.tsx": 6,
  "components/BackgroundTasks/BackgroundTasksWidget.tsx": 4,
  "components/Budget/BudgetPanel.helpers.ts": 2,
@@ -51,8 +51,7 @@
  "components/Journey/journeyMapPopup.ts": 17,
  "components/Journey/moodConfig.ts": 5,
  "components/Layout/BottomNav.tsx": 3,
-  "components/Layout/DemoBanner.tsx": 25,
-  "components/Layout/InAppNotificationBell.tsx": 8,
+  "components/Layout/InAppNotificationBell.tsx": 3,
  "components/Layout/MobileTopBar.tsx": 51,
  "components/Layout/Navbar.tsx": 21,
  "components/Layout/NewVersionNotice.tsx": 3,
@@ -72,7 +71,6 @@
  "components/Map/poiCategories.ts": 7,
  "components/Map/ratingBadge.ts": 2,
  "components/Map/reservationsMapbox.ts": 1,
-  "components/Notifications/InAppNotificationItem.tsx": 8,
  "components/PDF/TripPDF.tsx": 53,
  "components/Packing/PackingListPanelBagModal.tsx": 2,
  "components/Packing/PackingListPanelCategoryGroup.tsx": 5,
@@ -100,16 +98,13 @@
  "components/Roadtrip/serviceMarker.ts": 1,
  "components/Settings/useAppearanceEditor.ts": 5,
  "components/Studio/BookSheetsView.tsx": 2,
-  "components/Studio/SpreadView.tsx": 3,
+  "components/Studio/PhotoView.tsx": 2,
+  "components/Studio/SpreadView.tsx": 1,
  "components/Studio/StudioElementsPanel.tsx": 8,
-  "components/Studio/StudioInspector.tsx": 2,
  "components/Studio/StudioShell.tsx": 2,
-  "components/Studio/StudioSidebar.tsx": 2,
-  "components/Studio/StudioTravelPanel.tsx": 1,
  "components/Studio/TravelElements.tsx": 5,
  "components/Studio/printSheets.ts": 5,
-  "components/Studio/templates.ts": 3,
-  "components/SystemNotices/ReleaseNoticeVisuals.tsx": 4,
+  "components/Studio/sidebar/contentDrops.ts": 2,
  "components/SystemNotices/SystemNoticeBanner.tsx": 28,
  "components/SystemNotices/SystemNoticeModal.tsx": 107,
  "components/Todo/TodoListPanel.tsx": 6,
@@ -134,7 +129,6 @@
  "components/shared/Modal.tsx": 3,
  "components/shared/NavigationMenu.tsx": 1,
  "components/shared/NoteColorPicker.tsx": 2,
-  "components/shared/PlaceAvatarUpload.tsx": 3,
  "components/shared/PublicLanguagePicker.tsx": 3,
  "components/shared/Skeleton.tsx": 2,
  "components/shared/Spinner.tsx": 2,
@@ -154,7 +148,7 @@
  "mobile/components/MToastHost.tsx": 2,
  "mobile/components/MUserPickerList.tsx": 1,
  "mobile/screens/admin/MAdmin.tsx": 9,
-  "mobile/screens/admin/MAdminAddonManager.tsx": 22,
+  "mobile/screens/admin/MAdminAddonManager.tsx": 9,
  "mobile/screens/admin/MAdminAuditLogPanel.tsx": 15,
  "mobile/screens/admin/MAdminBackupPanel.tsx": 8,
  "mobile/screens/admin/MAdminCategoryManager.tsx": 8,
@@ -211,7 +205,7 @@
  "mobile/screens/settings/MSetPickerSheet.tsx": 2,
  "mobile/screens/settings/MSettings.tsx": 2,
  "mobile/screens/settings/MSettingsAbout.tsx": 5,
-  "mobile/screens/settings/MSettingsAccount.tsx": 21,
+  "mobile/screens/settings/MSettingsAccount.tsx": 20,
  "mobile/screens/settings/MSettingsAppearance.tsx": 12,
  "mobile/screens/settings/MSettingsMap.tsx": 5,
  "mobile/screens/settings/MSettingsMcp.tsx": 30,
@@ -254,7 +248,7 @@
  "mobile/screens/trip/sheets/MMehrSheet.tsx": 3,
  "mobile/screens/trip/sheets/MNoteSheet.tsx": 1,
  "mobile/screens/trip/sheets/MPlaceEditSheet.tsx": 2,
-  "mobile/screens/trip/sheets/MPlaceSheet.tsx": 27,
+  "mobile/screens/trip/sheets/MPlaceSheet.tsx": 23,
  "mobile/screens/trip/sheets/MReservationSheet.tsx": 2,
  "mobile/screens/trip/sheets/MTransportFormSheet.tsx": 9,
  "mobile/screens/trip/sheets/MTransportSheet.tsx": 12,
@@ -298,7 +292,6 @@
  "pages/FilesPage.tsx": 11,
  "pages/ForgotPasswordPage.tsx": 18,
  "pages/HelpPage.tsx": 21,
-  "pages/InAppNotificationsPage.tsx": 9,
  "pages/JoinTripPage.tsx": 4,
  "pages/JourneyDetailPage.tsx": 53,
  "pages/JourneyPage.tsx": 64,
@@ -310,7 +303,6 @@
  "pages/TripPlannerPage.tsx": 7,
  "pages/VacayPage.tsx": 13,
  "pages/atlas/useAtlas.ts": 2,
-  "pages/collections/collectionsModel.ts": 1,
  "pages/collections/useCollections.ts": 1,
  "pages/sharedTrip/SharedChrome.tsx": 2,
  "pages/sharedTrip/SharedMap.tsx": 1,
@@ -40,13 +40,14 @@
  "components/Settings/AppearanceSettingsTab.tsx": 1,
  "components/Settings/PasskeysSection.tsx": 1,
  "components/Studio/BookSheetsView.tsx": 1,
-  "components/Studio/SpreadView.tsx": 2,
+  "components/Studio/PhotoView.tsx": 1,
+  "components/Studio/SpreadView.tsx": 1,
  "components/Studio/StudioElementsPanel.tsx": 2,
  "components/Studio/StudioSwatches.tsx": 1,
-  "components/Studio/TravelElements.tsx": 6,
-  "components/Studio/autoLayout.ts": 50,
+  "components/Studio/TravelElements.tsx": 3,
  "components/Studio/peerColour.ts": 1,
  "components/Studio/printSheets.ts": 4,
+  "components/Studio/travel/badgeLook.ts": 2,
  "components/Trips/TripMemberAvatar.tsx": 2,
  "components/Vacay/VacayPersons.tsx": 1,
  "components/shared/DialogShell.tsx": 2,
@@ -65,6 +65,9 @@ const InAppNotificationsPage = lazyWithRetry(() => import('./pages/InAppNotifica
 const OAuthAuthorizePage = lazyWithRetry(() => import('./pages/OAuthAuthorizePage'))
 // The tour keep dialog a day plan row opens; it loads only once a tour is to be kept.
 const TourSaveToCollectionHost = lazyWithRetry(() => import('./components/Tours/collection/TourSaveToCollectionHost'))
+// The desktop assistant window: its own chunk, and nothing at all until a connection is set up.
+const AssistantHost = lazyWithRetry(() => import('./components/Assistant/AssistantHost'))
+const MAssistantHomeScreen = lazyWithRetry(() => import('./mobile/screens/assistant/MAssistantHomeScreen'))

 // The ten phone screens are chunks of their own, alongside the desktop pages
 // rather than inside them. Each page used to import its M screen statically and
@@ -408,6 +411,12 @@ export default function App() {
      {!hideAuthedWidgets && <ErrorBoundary boundaryId="widget:background-tasks" fallback={null}><BackgroundTasksWidget /></ErrorBoundary>}
      {!hideAuthedWidgets && (isPhone ? <MSaveToCollectionSheet /> : <SaveToCollectionModal />)}
      {!hideAuthedWidgets && keepingTour && <ErrorBoundary boundaryId="widget:keep-tour" fallback={null}><Suspense fallback={null}><TourSaveToCollectionHost /></Suspense></ErrorBoundary>}
+      {/* The phone has its own assistant screen inside the trip, and the home chat's outside it. */}
+      {!hideAuthedWidgets && isAuthenticated && (
+        <ErrorBoundary boundaryId="widget:assistant" fallback={null}>
+          <Suspense fallback={null}>{isPhone ? <MAssistantHomeScreen /> : <AssistantHost />}</Suspense>
+        </ErrorBoundary>
+      )}
      <ErrorBoundary boundaryId="widget:offline-banner" fallback={null}><OfflineBanner /></ErrorBoundary>
      <ErrorBoundary boundaryId="widget:new-version" fallback={null}><NewVersionNotice /></ErrorBoundary>
      {/* One boundary for all route chunks, above <Routes> so it stays mounted
@@ -0,0 +1,210 @@
+/**
+ * FE-AI-API-001 to FE-AI-API-008
+ *
+ * The two streaming calls bypass axios, so they carry by hand what the axios
+ * instance would add (the cookie, the socket id) and turn a refusal before the
+ * stream into a typed error the chat can name. The refusal's code comes from
+ * the body when the server names one, and from the status otherwise. A
+ * journey's chat reaches the same calls under the journey.
+ */
+import type { AssistantChatRequest } from '@trek/shared';
+import { http, HttpResponse } from 'msw';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { server } from '../../tests/helpers/msw/server';
+import { assistantApi, AssistantRequestError } from './assistant';
+import { getSocketId } from './websocket';
+
+const BODY: AssistantChatRequest = { locale: 'en', timeZone: 'Europe/Berlin', threadId: null, text: 'Hi' };
+
+function streamResponse(text: string): Response {
+  const bytes = new TextEncoder().encode(text);
+  let sent = false;
+  return {
+    ok: true,
+    status: 200,
+    body: {
+      getReader: () => ({
+        read: async () => {
+          if (sent) return { done: true, value: undefined };
+          sent = true;
+          return { done: false, value: bytes };
+        },
+        cancel: async () => {},
+      }),
+    },
+  } as unknown as Response;
+}
+
+function refusal(status: number, body: unknown): Response {
+  return {
+    ok: false,
+    status,
+    body: null,
+    json: async () => {
+      if (body === undefined) throw new SyntaxError('not json');
+      return body;
+    },
+  } as unknown as Response;
+}
+
+async function refusedWith(res: Response) {
+  vi.spyOn(globalThis, 'fetch').mockResolvedValueOnce(res);
+  try {
+    await assistantApi.chat(4, BODY, new AbortController().signal);
+  } catch (err) {
+    return err;
+  }
+  throw new Error('expected a refusal');
+}
+
+afterEach(() => vi.restoreAllMocks());
+
+describe('assistantApi streams', () => {
+  it('FE-AI-API-001: posts the message as JSON with the cookie and the socket id, and yields the chunks', async () => {
+    vi.mocked(getSocketId).mockReturnValueOnce('sock-1');
+    const fetchSpy = vi
+      .spyOn(globalThis, 'fetch')
+      .mockResolvedValueOnce(streamResponse('data: {"type":"start","messageId":"m1"}\n\ndata: [DONE]\n\n'));
+    const signal = new AbortController().signal;
+
+    const chunks: unknown[] = [];
+    for await (const chunk of await assistantApi.chat(4, BODY, signal)) chunks.push(chunk);
+
+    expect(chunks).toEqual([{ type: 'start', messageId: 'm1' }]);
+    const [url, init] = fetchSpy.mock.calls[0] ?? [];
+    expect(url).toBe('/api/trips/4/assistant/chat');
+    expect(init).toMatchObject({ method: 'POST', credentials: 'include', signal, body: JSON.stringify(BODY) });
+    expect(init?.headers).toMatchObject({
+      'content-type': 'application/json',
+      accept: 'text/event-stream',
+      'X-Socket-Id': 'sock-1',
+    });
+  });
+
+  it('FE-AI-API-002: sends decisions to the thread they belong to', async () => {
+    const fetchSpy = vi.spyOn(globalThis, 'fetch').mockResolvedValueOnce(streamResponse('data: [DONE]\n\n'));
+    const body = { locale: 'de', timeZone: 'UTC', decisions: [{ toolCallId: 'c1', approved: true }] };
+    await assistantApi.decide(4, 7, body, new AbortController().signal);
+    expect(fetchSpy.mock.calls[0]?.[0]).toBe('/api/trips/4/assistant/threads/7/decisions');
+  });
+
+  it('FE-AI-API-003: a refusal names the code the body gives', async () => {
+    const err = await refusedWith(refusal(429, { error: 'Daily limit reached', code: 'daily_limit' }));
+    expect(err).toBeInstanceOf(AssistantRequestError);
+    expect(err).toMatchObject({ code: 'daily_limit', status: 429 });
+  });
+
+  it('FE-AI-API-004: without a known code the status decides', async () => {
+    expect(await refusedWith(refusal(429, { error: 'slow down' }))).toMatchObject({ code: 'too_many_requests' });
+    expect(await refusedWith(refusal(409, { error: 'x', code: 'conflict' }))).toMatchObject({ code: 'busy' });
+    expect(await refusedWith(refusal(502, undefined))).toMatchObject({ code: 'provider_unavailable' });
+    expect(await refusedWith(refusal(500, { error: 'boom' }))).toMatchObject({ code: 'generic' });
+  });
+
+  it('FE-AI-API-005: an accepted request without a body is a generic failure, not a silent empty answer', async () => {
+    const err = await refusedWith({ ok: true, status: 200, body: null } as unknown as Response);
+    expect(err).toMatchObject({ code: 'generic', status: 200 });
+  });
+});
+
+describe('assistantApi JSON calls', () => {
+  it('FE-AI-API-006: undo posts an empty JSON body to the escaped tool call id', async () => {
+    let seen: { path: string; body: unknown } | null = null;
+    server.use(
+      http.post('/api/trips/4/assistant/tool-calls/:id/undo', async ({ request, params }) => {
+        seen = { path: String(params.id), body: await request.json() };
+        return HttpResponse.json({ undone: true });
+      })
+    );
+    await expect(assistantApi.undo(4, 'a/b')).resolves.toEqual({ undone: true });
+    expect(seen).toEqual({ path: 'a/b', body: {} });
+  });
+
+  it('FE-AI-API-007: stop posts an empty JSON body', async () => {
+    let body: unknown = null;
+    server.use(
+      http.post('/api/trips/4/assistant/stop', async ({ request }) => {
+        body = await request.json();
+        return HttpResponse.json({ success: true });
+      })
+    );
+    await expect(assistantApi.stop(4)).resolves.toEqual({ success: true });
+    expect(body).toEqual({});
+  });
+
+  it('FE-AI-API-008: a journey scope reaches the journey routes, a trip scope the trip routes', async () => {
+    const journey = { kind: 'journey', journeyId: 12 } as const;
+    const fetchSpy = vi.spyOn(globalThis, 'fetch').mockImplementation(async () => streamResponse('data: [DONE]\n\n'));
+    const signal = new AbortController().signal;
+    await assistantApi.chat(journey, BODY, signal);
+    await assistantApi.decide(journey, 7, { locale: 'en', timeZone: 'UTC', decisions: [] }, signal);
+    await assistantApi.chat({ kind: 'trip', tripId: 4 }, BODY, signal);
+    expect(fetchSpy.mock.calls.map(([url]) => url)).toEqual([
+      '/api/journeys/12/assistant/chat',
+      '/api/journeys/12/assistant/threads/7/decisions',
+      '/api/trips/4/assistant/chat',
+    ]);
+
+    const hits: string[] = [];
+    server.use(
+      http.get('/api/journeys/12/assistant/threads', () => {
+        hits.push('threads');
+        return HttpResponse.json({ threads: [] });
+      }),
+      http.post('/api/journeys/12/assistant/tool-calls/:id/undo', () => {
+        hits.push('undo');
+        return HttpResponse.json({ undone: true });
+      }),
+      http.post('/api/journeys/12/assistant/stop', () => {
+        hits.push('stop');
+        return HttpResponse.json({ success: true });
+      })
+    );
+    await assistantApi.threads(journey);
+    await assistantApi.undo(journey, 'c1');
+    await assistantApi.stop(journey);
+    expect(hits).toEqual(['threads', 'undo', 'stop']);
+  });
+
+  it('FE-AI-API-009: the home scope reaches the routes outside any trip', async () => {
+    const home = { kind: 'home' } as const;
+    const fetchSpy = vi.spyOn(globalThis, 'fetch').mockImplementation(async () => streamResponse('data: [DONE]\n\n'));
+    const signal = new AbortController().signal;
+    await assistantApi.chat(home, BODY, signal);
+    await assistantApi.decide(home, 7, { locale: 'en', timeZone: 'UTC', decisions: [] }, signal);
+    expect(fetchSpy.mock.calls.map(([url]) => url)).toEqual([
+      '/api/assistant/chat',
+      '/api/assistant/threads/7/decisions',
+    ]);
+
+    const hits: string[] = [];
+    server.use(
+      http.get('/api/assistant/threads', () => {
+        hits.push('threads');
+        return HttpResponse.json({ threads: [] });
+      }),
+      http.get('/api/assistant/threads/3', () => {
+        hits.push('thread');
+        return HttpResponse.json({ thread: { id: 3, title: 't', lastMessageAt: 'x' }, messages: [] });
+      }),
+      http.delete('/api/assistant/threads/3', () => {
+        hits.push('delete');
+        return HttpResponse.json({ success: true });
+      }),
+      http.post('/api/assistant/tool-calls/:id/undo', () => {
+        hits.push('undo');
+        return HttpResponse.json({ undone: true });
+      }),
+      http.post('/api/assistant/stop', () => {
+        hits.push('stop');
+        return HttpResponse.json({ success: true });
+      })
+    );
+    await assistantApi.threads(home);
+    await assistantApi.thread(home, 3);
+    await assistantApi.deleteThread(home, 3);
+    await assistantApi.undo(home, 'c1');
+    await assistantApi.stop(home);
+    expect(hits).toEqual(['threads', 'thread', 'delete', 'undo', 'stop']);
+  });
+});
@@ -0,0 +1,236 @@
+import {
+  ASSISTANT_ERROR_CODES,
+  type AiAdminConnectionResponse,
+  type AiAdminSettings,
+  type AiApiKeyConnectRequest,
+  type AiAuthStartResponse,
+  type AiChatgptFinishRequest,
+  type AiConnectionScope,
+  type AiConnectionView,
+  type AiInstanceConnectionRequest,
+  type AiModelListResponse,
+  type AiOpenrouterFinishRequest,
+  type AiPrivacyAckRequest,
+  type AiStatusResponse,
+  type AssistantAddFoundPlaceRequest,
+  type AssistantAddFoundPlaceResponse,
+  type AssistantChatRequest,
+  type AssistantDecisionsRequest,
+  type AssistantErrorCode,
+  type AssistantInsertFoundPlaceRequest,
+  type AssistantRenderUploadResponse,
+  type AssistantScope,
+  type AssistantShareRequest,
+  type AssistantTakeProposalRequest,
+  type AssistantThreadListResponse,
+  type AssistantThreadResponse,
+  type AssistantUndoResponse,
+  type BookDesignDraftResponse,
+  type CollabMessageResponse,
+  type SuccessResponse,
+  type UiStreamChunk,
+} from '@trek/shared';
+import apiClient, { postMultipart } from './client';
+import { parseUiMessageStream } from './uiMessageStream';
+import { getSocketId } from './websocket';
+
+/**
+ * The assistant and the AI connections behind it, in their own file
+ * rather than in the `client.ts` god module.
+ *
+ * The two streaming calls (a new message, and the decisions on held changes)
+ * go through `fetch`, not axios: the answer is a server-sent event stream that
+ * runs for as long as the model works, and axios would buffer it whole behind
+ * its 8 s timeout. Everything else is plain JSON through `apiClient`.
+ */
+
+/** A refusal the server answered before the stream opened, named by its `AssistantErrorCode`. */
+export class AssistantRequestError extends Error {
+  readonly code: AssistantErrorCode;
+  readonly status: number;
+
+  constructor(code: AssistantErrorCode, status: number) {
+    super(`Assistant request refused: ${code}`);
+    this.name = 'AssistantRequestError';
+    this.code = code;
+    this.status = status;
+  }
+}
+
+const KNOWN_CODES: ReadonlySet<string> = new Set(ASSISTANT_ERROR_CODES);
+
+/**
+ * The code of a refusal: the body's `code` when it names one, otherwise what
+ * the status alone can say.
+ */
+async function refusalCode(res: Response): Promise<AssistantErrorCode> {
+  try {
+    const body: unknown = await res.json();
+    const code = (body as { code?: unknown } | null)?.code;
+    if (typeof code === 'string' && KNOWN_CODES.has(code)) return code as AssistantErrorCode;
+  } catch {
+    // Not JSON (a proxy's error page); the status below still says something.
+  }
+  // A bare 429 is TREK's own limit or a proxy's; a provider's limit always names its code.
+  if (res.status === 429) return 'too_many_requests';
+  if (res.status === 409) return 'busy';
+  if (res.status === 502 || res.status === 503 || res.status === 504) return 'provider_unavailable';
+  return 'generic';
+}
+
+async function openStream(path: string, body: unknown, signal: AbortSignal): Promise<AsyncGenerator<UiStreamChunk>> {
+  // A file goes as multipart, where the browser sets the content type with its boundary.
+  const form = body instanceof FormData;
+  const headers: Record<string, string> = form
+    ? { accept: 'text/event-stream' }
+    : { 'content-type': 'application/json', accept: 'text/event-stream' };
+  const socketId = getSocketId();
+  if (socketId) headers['X-Socket-Id'] = socketId;
+  const res = await fetch(`/api${path}`, {
+    method: 'POST',
+    credentials: 'include',
+    headers,
+    body: form ? body : JSON.stringify(body),
+    signal,
+  });
+  if (!res.ok) throw new AssistantRequestError(await refusalCode(res), res.status);
+  if (!res.body) throw new AssistantRequestError('generic', res.status);
+  return parseUiMessageStream(res.body);
+}
+
+const tripBase = (tripId: number) => `/trips/${tripId}/assistant`;
+
+/**
+ * What a conversation call is about: a trip's id (the planner's chat), or a
+ * scope, which also reaches a journey's chat in TREK Studio and the home chat
+ * outside any one trip. Threads, turns, decisions, undo and stop exist under
+ * all three; files, found places, proposals and sharing belong to a trip and
+ * take its id.
+ */
+export type AssistantTarget = number | AssistantScope;
+
+function scopeBase(target: AssistantTarget): string {
+  if (typeof target === 'number') return tripBase(target);
+  if (target.kind === 'home') return '/assistant';
+  return target.kind === 'trip' ? tripBase(target.tripId) : `/journeys/${target.journeyId}/assistant`;
+}
+
+/** Where the Studio uploads a page a running turn of a journey's chat asked for. */
+const renderPath = (journeyId: number, threadId: number, requestId: string) =>
+  `/journeys/${journeyId}/assistant/threads/${threadId}/renders/${encodeURIComponent(requestId)}`;
+
+/**
+ * For the calls that make the server go and ask the provider (listing models,
+ * testing a key, exchanging a sign-in code): the shared 8 s is TREK's own
+ * budget and too short for a provider's.
+ */
+const viaProvider = { timeout: 30_000 };
+
+export const assistantApi = {
+  threads: (target: AssistantTarget): Promise<AssistantThreadListResponse> =>
+    apiClient.get(`${scopeBase(target)}/threads`).then((r) => r.data),
+  thread: (target: AssistantTarget, threadId: number): Promise<AssistantThreadResponse> =>
+    apiClient.get(`${scopeBase(target)}/threads/${threadId}`).then((r) => r.data),
+  deleteThread: (target: AssistantTarget, threadId: number): Promise<SuccessResponse> =>
+    apiClient.delete(`${scopeBase(target)}/threads/${threadId}`).then((r) => r.data),
+  undo: (target: AssistantTarget, toolCallId: string): Promise<AssistantUndoResponse> =>
+    apiClient.post(`${scopeBase(target)}/tool-calls/${encodeURIComponent(toolCallId)}/undo`, {}).then((r) => r.data),
+  // Ends this user's running turn, wherever it runs (another tab included).
+  stop: (target: AssistantTarget): Promise<SuccessResponse> =>
+    apiClient.post(`${scopeBase(target)}/stop`, {}).then((r) => r.data),
+  // A place a search found, suggested for a day: answers with the message holding the change.
+  addFoundPlace: (
+    tripId: number,
+    threadId: number,
+    body: AssistantAddFoundPlaceRequest
+  ): Promise<AssistantAddFoundPlaceResponse> =>
+    apiClient.post(`${tripBase(tripId)}/threads/${threadId}/found-places`, body).then((r) => r.data),
+  // "+ Tour": a found place taken into the saved tour open in the planner, held as a change like "+ Day 3".
+  insertFoundPlace: (
+    tripId: number,
+    threadId: number,
+    body: AssistantInsertFoundPlaceRequest
+  ): Promise<AssistantAddFoundPlaceResponse> =>
+    apiClient.post(`${tripBase(tripId)}/threads/${threadId}/found-places/tour`, body).then((r) => r.data),
+  // A proposal an answer showed as a card ("Plan this"): answers like a found place, with the message holding it.
+  takeProposal: (
+    tripId: number,
+    threadId: number,
+    body: AssistantTakeProposalRequest
+  ): Promise<AssistantAddFoundPlaceResponse> =>
+    apiClient.post(`${tripBase(tripId)}/threads/${threadId}/proposals`, body).then((r) => r.data),
+  // An answer posted to the trip chat, marked as shared from the assistant; the client's socket id skips the echo.
+  share: (
+    tripId: number,
+    threadId: number,
+    messageId: string,
+    body: AssistantShareRequest
+  ): Promise<CollabMessageResponse> =>
+    apiClient
+      .post(`${tripBase(tripId)}/threads/${threadId}/messages/${encodeURIComponent(messageId)}/share`, body)
+      .then((r) => r.data),
+
+  chat: (target: AssistantTarget, body: AssistantChatRequest, signal: AbortSignal) =>
+    openStream(`${scopeBase(target)}/chat`, body, signal),
+  decide: (target: AssistantTarget, threadId: number, body: AssistantDecisionsRequest, signal: AbortSignal) =>
+    openStream(`${scopeBase(target)}/threads/${threadId}/decisions`, body, signal),
+  // A booking file: the server reads it and proposes each booking it finds as a change.
+  attach: (tripId: number, form: FormData, signal: AbortSignal) =>
+    openStream(`${tripBase(tripId)}/attachments`, form, signal),
+  // A Studio page a running turn asked for, drawn by this tab: the image and what it shows, as multipart.
+  uploadRender: (
+    journeyId: number,
+    threadId: number,
+    requestId: string,
+    form: FormData,
+    signal: AbortSignal
+  ): Promise<AssistantRenderUploadResponse> =>
+    postMultipart(renderPath(journeyId, threadId, requestId), form, { signal }),
+  // A whole-book design draft, for a page of it a running turn asked the Studio to draw.
+  bookDesign: (journeyId: number, designId: string): Promise<BookDesignDraftResponse> =>
+    apiClient.get(`/journeys/${journeyId}/book-designs/${encodeURIComponent(designId)}`).then((r) => r.data),
+};
+
+/** A user's own connection, and what the assistant runs on for them. */
+export const aiApi = {
+  status: (): Promise<AiStatusResponse> => apiClient.get('/ai/status').then((r) => r.data),
+  models: (): Promise<AiModelListResponse> => apiClient.get('/ai/models', viaProvider).then((r) => r.data),
+  // Saving tests the key against the provider first.
+  connectKey: (body: AiApiKeyConnectRequest): Promise<AiConnectionView> =>
+    apiClient.put('/ai/connection', body, viaProvider).then((r) => r.data),
+  setModel: (model: string): Promise<AiConnectionView> =>
+    apiClient.patch('/ai/connection/model', { model }).then((r) => r.data),
+  disconnect: (): Promise<SuccessResponse> => apiClient.delete('/ai/connection').then((r) => r.data),
+  ackPrivacy: (body: AiPrivacyAckRequest): Promise<SuccessResponse> =>
+    apiClient.post('/ai/privacy-ack', body).then((r) => r.data),
+
+  chatgptStart: (scope: AiConnectionScope = 'user'): Promise<AiAuthStartResponse> =>
+    apiClient
+      .post(scope === 'instance' ? '/admin/ai/connect/chatgpt/start' : '/ai/connect/chatgpt/start', {})
+      .then((r) => r.data),
+  chatgptFinish: (body: AiChatgptFinishRequest): Promise<AiConnectionView> =>
+    apiClient.post('/ai/connect/chatgpt/finish', body, viaProvider).then((r) => r.data),
+  chatgptSignOut: (): Promise<SuccessResponse> =>
+    apiClient.post('/ai/connect/chatgpt/sign-out', {}).then((r) => r.data),
+
+  openrouterStart: (scope: AiConnectionScope): Promise<AiAuthStartResponse> =>
+    apiClient
+      .post(scope === 'instance' ? '/admin/ai/connect/openrouter/start' : '/ai/connect/openrouter/start', { scope })
+      .then((r) => r.data),
+  openrouterFinish: (body: AiOpenrouterFinishRequest): Promise<AiConnectionView> =>
+    apiClient.post('/ai/connect/openrouter/finish', body, viaProvider).then((r) => r.data),
+};
+
+/** The connection the instance provides for everyone, and the assistant's admin settings. */
+export const aiAdminApi = {
+  settings: (): Promise<AiAdminSettings> => apiClient.get('/admin/ai/settings').then((r) => r.data),
+  saveSettings: (body: AiAdminSettings): Promise<AiAdminSettings> =>
+    apiClient.put('/admin/ai/settings', body).then((r) => r.data),
+  connection: (): Promise<AiAdminConnectionResponse> => apiClient.get('/admin/ai/connection').then((r) => r.data),
+  saveConnection: (body: AiInstanceConnectionRequest): Promise<AiAdminConnectionResponse> =>
+    apiClient.put('/admin/ai/connection', body, viaProvider).then((r) => r.data),
+  setModel: (model: string): Promise<AiAdminConnectionResponse> =>
+    apiClient.patch('/admin/ai/connection/model', { model }).then((r) => r.data),
+  removeConnection: (): Promise<SuccessResponse> => apiClient.delete('/admin/ai/connection').then((r) => r.data),
+  models: (): Promise<AiModelListResponse> => apiClient.get('/admin/ai/models', viaProvider).then((r) => r.data),
+};
@@ -0,0 +1,21 @@
+import type { BookDesignSelectionRequest, BookDesignSelectionResponse } from '@trek/shared';
+
+import apiClient from './client';
+
+/**
+ * The assistant's whole-book design drafts as the Studio chat's proposal card
+ * narrows them: the pages of a draft its apply writes. The draft itself is
+ * read through `assistantApi.bookDesign`, which the Studio also draws a page
+ * of a draft from. Online only, like the assistant: a draft lives on the
+ * server for a few hours and nowhere else.
+ */
+export const bookDesignApi = {
+  selection: (
+    journeyId: number,
+    designId: string,
+    body: BookDesignSelectionRequest
+  ): Promise<BookDesignSelectionResponse> =>
+    apiClient
+      .put(`/journeys/${journeyId}/book-designs/${encodeURIComponent(designId)}/selection`, body)
+      .then((r) => r.data),
+};
@@ -692,6 +692,7 @@ describe('client > request payloads', () => {
  it('FE-APISURF-030: adminApi.pluginActivate only sends consent when granted', async () => {
    expect((await traceOne(() => adminApi.pluginActivate('koffi'))).body).toEqual({})
    expect((await traceOne(() => adminApi.pluginActivate('koffi', true))).body).toEqual({ consent: true })
+    expect((await traceOne(() => adminApi.pluginActivate('koffi', false, true))).body).toEqual({ acceptTrekRange: true })
  })

  it('FE-APISURF-031: adminApi.pluginInstall spreads its options next to the id', async () => {
@@ -574,9 +574,9 @@ export const adminApi = {
  plugins: () => apiClient.get('/admin/plugins').then(r => r.data),
  pluginBrowse: (refresh?: boolean) => apiClient.get('/admin/plugins/registry', { params: refresh ? { refresh: 1 } : undefined }).then(r => r.data),
  pluginDetail: (id: string) => apiClient.get(`/admin/plugins/registry/${encodeURIComponent(id)}`).then(r => r.data),
-  pluginInstall: (id: string, opts?: Pick<PluginInstallRequest, 'version' | 'constraint' | 'withDependencies'>) =>
+  pluginInstall: (id: string, opts?: Omit<PluginInstallRequest, 'id'>) =>
    apiClient.post('/admin/plugins/install', { id, ...opts } satisfies PluginInstallRequest).then(r => r.data),
-  pluginActivate: (id: string, consent?: boolean) => apiClient.post(`/admin/plugins/${id}/activate`, consent ? { consent: true } : {}).then(r => r.data),
+  pluginActivate: (id: string, consent?: boolean, accept?: boolean) => apiClient.post(`/admin/plugins/${id}/activate`, { consent: consent || undefined, acceptTrekRange: accept || undefined }).then(r => r.data),
  pluginDeactivate: (id: string) => apiClient.post(`/admin/plugins/${id}/deactivate`).then(r => r.data),
  // `version` pins the exact version to install (the rollback path); omitted, the server
  // resolves the newest TREK-compatible version itself.
@@ -0,0 +1,150 @@
+/**
+ * FE-AI-STREAM-001 to FE-AI-STREAM-011
+ *
+ * The parser reads the server's assistant stream, so its contract is the
+ * shared fixture: the same file the server's writer is tested against. What
+ * the network does to that stream (cutting it at any byte, CRLF from a proxy,
+ * keep-alive comments) must not change what comes out.
+ */
+import { uiStreamChunkSchema, type UiStreamChunk } from '@trek/shared';
+import { readFileSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { describe, expect, it, vi } from 'vitest';
+import { MAX_EVENT_CHARS, parseUiMessageStream, STALL_MS } from './uiMessageStream';
+
+const FIXTURE = readFileSync(
+  resolve(dirname(fileURLToPath(import.meta.url)), '../../../shared/src/assistant/__fixtures__/ui-stream.v1.txt'),
+  'utf8'
+);
+
+/** A response body that hands out the given pieces one read at a time. */
+function bodyOf(pieces: (string | Uint8Array)[]) {
+  const encoder = new TextEncoder();
+  let i = 0;
+  const cancel = vi.fn(async () => {});
+  const body = {
+    getReader: () => ({
+      read: async () => {
+        if (i >= pieces.length) return { done: true, value: undefined };
+        const piece = pieces[i++];
+        return { done: false, value: typeof piece === 'string' ? encoder.encode(piece) : piece };
+      },
+      cancel,
+    }),
+  } as unknown as ReadableStream<Uint8Array>;
+  return { body, cancel };
+}
+
+async function collect(body: ReadableStream<Uint8Array>): Promise<UiStreamChunk[]> {
+  const chunks: UiStreamChunk[] = [];
+  for await (const chunk of parseUiMessageStream(body)) chunks.push(chunk);
+  return chunks;
+}
+
+/** The fixture's chunks as plain JSON, the way a reader of the file sees them. */
+function fixtureChunks(): UiStreamChunk[] {
+  return FIXTURE.split('\n\n')
+    .map((event) => event.replace(/^data: /, '').trim())
+    .filter((data) => data && data !== '[DONE]')
+    .map((data) => uiStreamChunkSchema.parse(JSON.parse(data)));
+}
+
+describe('parseUiMessageStream', () => {
+  it('FE-AI-STREAM-001: reads the shared fixture into its chunks, in order', async () => {
+    const chunks = await collect(bodyOf([FIXTURE]).body);
+    expect(chunks).toEqual(fixtureChunks());
+    expect(chunks.map((c) => c.type)).toContain('tool-approval-request');
+    expect(chunks[chunks.length - 1]).toEqual({ type: 'finish', finishReason: 'tool-calls' });
+  });
+
+  it('FE-AI-STREAM-002: gives the same chunks when every byte arrives in its own read', async () => {
+    const bytes = new TextEncoder().encode(FIXTURE);
+    const pieces = Array.from(bytes, (b) => new Uint8Array([b]));
+    expect(await collect(bodyOf(pieces).body)).toEqual(fixtureChunks());
+  });
+
+  it('FE-AI-STREAM-003: reads CRLF line ends, also when a CR and its LF arrive apart', async () => {
+    const crlf = FIXTURE.replace(/\n/g, '\r\n');
+    const cut = crlf.indexOf('\r\n') + 1;
+    expect(await collect(bodyOf([crlf.slice(0, cut), crlf.slice(cut)]).body)).toEqual(fixtureChunks());
+  });
+
+  it('FE-AI-STREAM-004: skips keep-alive comments and fields other than data', async () => {
+    const stream = [
+      ': keepalive\n\n',
+      'event: message\nid: 1\ndata: {"type":"start-step"}\n\n',
+      ': keepalive\n\n',
+      'data: [DONE]\n\n',
+    ].join('');
+    expect(await collect(bodyOf([stream]).body)).toEqual([{ type: 'start-step' }]);
+  });
+
+  it('FE-AI-STREAM-005: skips chunk types this client does not know, and torn JSON', async () => {
+    const stream = [
+      'data: {"type":"reasoning-delta","delta":"hm"}\n\n',
+      'data: {"type":"text-delta","id":"t"\n\n',
+      'data: {"type":"text-delta","id":"t","delta":"ok"}\n\n',
+      'data: [DONE]\n\n',
+    ].join('');
+    expect(await collect(bodyOf([stream]).body)).toEqual([{ type: 'text-delta', id: 't', delta: 'ok' }]);
+  });
+
+  it('FE-AI-STREAM-006: reads an unknown error code as generic', async () => {
+    const stream = 'data: {"type":"error","errorText":"quota_exploded"}\n\ndata: [DONE]\n\n';
+    expect(await collect(bodyOf([stream]).body)).toEqual([{ type: 'error', errorText: 'generic' }]);
+  });
+
+  it('FE-AI-STREAM-007: joins the lines of a multi-line data field', async () => {
+    const stream = 'data: {"type":"text-delta",\ndata: "id":"t","delta":"x"}\n\ndata: [DONE]\n\n';
+    expect(await collect(bodyOf([stream]).body)).toEqual([{ type: 'text-delta', id: 't', delta: 'x' }]);
+  });
+
+  it('FE-AI-STREAM-008: stops at [DONE] and lets go of the connection', async () => {
+    const { body, cancel } = bodyOf([
+      'data: {"type":"start-step"}\n\ndata: [DONE]\n\ndata: {"type":"finish-step"}\n\n',
+    ]);
+    expect(await collect(body)).toEqual([{ type: 'start-step' }]);
+    expect(cancel).not.toHaveBeenCalled();
+  });
+
+  it('FE-AI-STREAM-009: a stream that closes before [DONE] broke off, after the chunks it finished', async () => {
+    const { body, cancel } = bodyOf(['data: {"type":"start-step"}\n\ndata: {"type":"finish-st']);
+    const seen: UiStreamChunk[] = [];
+    const read = async () => {
+      for await (const chunk of parseUiMessageStream(body)) seen.push(chunk);
+    };
+    await expect(read()).rejects.toThrow('broke off');
+    expect(seen).toEqual([{ type: 'start-step' }]);
+    expect(cancel).not.toHaveBeenCalled();
+  });
+
+  it('FE-AI-STREAM-011: a stream that stays silent past the stall limit fails and lets go', async () => {
+    vi.useFakeTimers();
+    try {
+      const cancel = vi.fn(async () => {});
+      const body = {
+        getReader: () => ({ read: () => new Promise(() => {}), cancel }),
+      } as unknown as ReadableStream<Uint8Array>;
+      const failed = expect(collect(body)).rejects.toThrow('stalled');
+      await vi.advanceTimersByTimeAsync(STALL_MS);
+      await failed;
+      expect(cancel).toHaveBeenCalledTimes(1);
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('FE-AI-STREAM-010: refuses an event past the size limit, and a consumer leaving early cancels the read', async () => {
+    const huge = bodyOf([`data: ${'x'.repeat(MAX_EVENT_CHARS + 1)}`]);
+    await expect(collect(huge.body)).rejects.toThrow('too large');
+    expect(huge.cancel).toHaveBeenCalledTimes(1);
+
+    const early = bodyOf([FIXTURE]);
+    for await (const chunk of parseUiMessageStream(early.body)) {
+      expect(chunk.type).toBe('start');
+      break;
+    }
+    expect(early.cancel).toHaveBeenCalledTimes(1);
+  });
+});
@@ -0,0 +1,111 @@
+import { UI_STREAM_DONE, uiStreamChunkSchema, type UiStreamChunk } from '@trek/shared';
+
+/**
+ * Reads the assistant's server-sent events into typed chunks.
+ *
+ * The wire format is the `@trek/shared` stream contract: one `data: <json>`
+ * event per chunk, closed by `data: [DONE]`. Our own parser rather than the
+ * `assistant-stream` one, because that one drops `tool-approval-request`, the
+ * chunk a held change hangs on, and it would pull the chat runtime into every
+ * chunk that only needs the data layer.
+ *
+ * What it tolerates, because proxies and the network do these things: events
+ * split across reads at any byte, CRLF line ends, `:` keep-alive comments,
+ * and fields other than `data`. A chunk that does not match the contract,
+ * a type this client does not know among them, is skipped, so the server can
+ * add chunk types without breaking an older tab. An event longer than
+ * MAX_EVENT_CHARS ends the stream with an error instead of growing the buffer
+ * without bound.
+ *
+ * The server always closes with `[DONE]` and sends a keep-alive every 15
+ * seconds, so a stream that ends without the marker, or stays silent for
+ * STALL_MS, lost its server (a restart, a dropped proxy) and fails instead of
+ * leaving the chat waiting for an answer that will not come.
+ */
+
+export const MAX_EVENT_CHARS = 1024 * 1024;
+export const STALL_MS = 45_000;
+
+/** The next read, or a failure once nothing came for STALL_MS. */
+async function readOrStall(reader: ReadableStreamDefaultReader<Uint8Array>) {
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  const stalled = new Promise<never>((_, reject) => {
+    timer = setTimeout(() => reject(new Error('Assistant stream stalled')), STALL_MS);
+  });
+  try {
+    return await Promise.race([reader.read(), stalled]);
+  } finally {
+    clearTimeout(timer);
+  }
+}
+
+export async function* parseUiMessageStream(body: ReadableStream<Uint8Array>): AsyncGenerator<UiStreamChunk> {
+  const reader = body.getReader();
+  const decoder = new TextDecoder();
+  let buffer = '';
+  let finished = false;
+  try {
+    for (;;) {
+      const { done, value } = await readOrStall(reader);
+      buffer += done ? decoder.decode() : decoder.decode(value, { stream: true });
+      // A CR at the very end may be the first half of a CRLF; it waits for the next read.
+      const carry = !done && buffer.endsWith('\r') ? '\r' : '';
+      if (carry) buffer = buffer.slice(0, -1);
+      buffer = buffer.replace(/\r\n?/g, '\n');
+
+      let boundary = buffer.indexOf('\n\n');
+      while (boundary >= 0) {
+        const data = dataOf(buffer.slice(0, boundary));
+        buffer = buffer.slice(boundary + 2);
+        if (data === UI_STREAM_DONE) {
+          finished = true;
+          return;
+        }
+        const chunk = data === null ? null : chunkOf(data);
+        if (chunk) yield chunk;
+        boundary = buffer.indexOf('\n\n');
+      }
+      buffer += carry;
+
+      if (buffer.length > MAX_EVENT_CHARS) throw new Error('Assistant stream event too large');
+      // The connection closed before [DONE]: the server went away mid-answer.
+      if (done) {
+        finished = true;
+        throw new Error('Assistant stream broke off');
+      }
+    }
+  } finally {
+    // Leaving early (the consumer stopped, or an error) releases the connection.
+    if (!finished) {
+      try {
+        await reader.cancel();
+      } catch {
+        // The stream already failed; the error that brought us here is the one that counts.
+      }
+    }
+  }
+}
+
+/** The joined `data` lines of one event, or null for an event without any (a comment). */
+function dataOf(event: string): string | null {
+  const lines: string[] = [];
+  for (const line of event.split('\n')) {
+    if (line === 'data' || line.startsWith('data:')) {
+      const value = line.slice(5);
+      lines.push(value.startsWith(' ') ? value.slice(1) : value);
+    }
+  }
+  return lines.length ? lines.join('\n') : null;
+}
+
+function chunkOf(data: string): UiStreamChunk | null {
+  let json: unknown;
+  try {
+    json = JSON.parse(data);
+  } catch {
+    // A torn or foreign event; the next one is still worth reading.
+    return null;
+  }
+  const parsed = uiStreamChunkSchema.safeParse(json);
+  return parsed.success ? parsed.data : null;
+}
@@ -43,9 +43,37 @@ export const HANDLED_OUTSIDE_TRIP_STORE = [
  'roadtripPreferences:changed',
  // components/Roadtrip/useDayBoundaries reloads the shared boundaries.
  'roadtripBoundary:changed',
-  // In-app notifications — hooks/useInAppNotificationListener
+  // In-app notifications: hooks/useInAppNotificationListener, which also keeps
+  // the bell's unread count in step (inAppNotificationStore).
  'notification:new',
  'notification:updated',
+  'notification:read-all',
+  // The same app-wide listener reads the display settings (settingsStore) and the
+  // tags (tripStore.reloadTags) again; both events carry names, never values.
+  'settings:updated',
+  'tags:changed',
+  // pages/dashboard/useDashboard reads the trip list again (desktop and phone).
+  'trips:changed',
+  // pages/atlas/useAtlas reads the atlas again (desktop and phone).
+  'atlas:changed',
+  // Trip roster: pages/tripPlanner/useTripRosterSync and the desktop packing panel
+  // (components/Packing/usePackingListPanel) read the members again. member:removed
+  // (it may be this user leaving the trip) and member:updated (a guest's new name on
+  // the rows that list people) are applied in the store and read back by the same
+  // hooks; both also move the balances below.
+  'member:added',
+  // Balances: components/Budget/useCostsLedger reads the settlement again on
+  // these and on the budget item events that move a split.
+  'budget:settlement-created',
+  'budget:settlement-updated',
+  'budget:settlement-deleted',
+  // Bags and who looks after a category: components/Packing/useBagTotalsPing and
+  // usePackingCategoryAssignees read them again, for both packing lists.
+  'packing:bag-created',
+  'packing:bag-updated',
+  'packing:bag-deleted',
+  'packing:bag-members-updated',
+  'packing:assignees',
  // Bag weights (#2191) — content-free ping; components/Packing/usePackingListPanel
  // and mobile/screens/trip/tabs/MPackingListTab re-read the bags on it. It carries
  // no state to apply, which is the point: the totals are summed server-side across
@@ -72,6 +100,10 @@ export const HANDLED_OUTSIDE_TRIP_STORE = [
  'vacay:share-removed',
  'vacay:shared-update',
  // Journey — pages/journeyDetail/useJourneyDetail ('journey:' prefix listener)
+  // reads the open journey again, and leaves it once journey:deleted says it is gone.
+  // The journey list (pages/journey/useJourney) reads itself again on those two.
+  'journey:updated',
+  'journey:deleted',
  'journey:trip:synced',
  'journey:entry:created',
  'journey:entry:updated',
@@ -106,35 +138,32 @@ export const HANDLED_OUTSIDE_TRIP_STORE = [
  'import:progress',
  'import:done',
  'import:error',
-] as const satisfies readonly TrekWsEventName[]
-
-/**
- * Events the client deliberately does not act on today (state of the world
- * when the registry landed — every one of these was already dropped by the
- * old silent `default:` branches). Removing an entry means the event is now
- * handled somewhere; ADDING an entry is a product decision that a new server
- * event should have no client reaction — never add one just to silence the
- * registry-parity test.
- */
-export const IGNORED_WS_EVENTS = [
-  'assignment:participants',
-  'packing:reordered',
-  'packing:bag-created',
-  'packing:bag-updated',
-  'packing:bag-deleted',
-  'packing:bag-members-updated',
-  'packing:assignees',
-  'packing:template-applied',
-  'todo:assignees',
-  'budget:settlement-created',
-  'budget:settlement-updated',
-  'budget:settlement-deleted',
-  // Accommodations live in page-local planner state; the client refetches
-  // them off trip:updated date changes, never off these events.
+  // Stays live in page-local planner state, not in the trip store. A stay
+  // written elsewhere (the assistant, a fellow traveller, a plugin, a booking
+  // import) goes remoteEventHandler (STAY_REFRESH_EVENTS) -> accommodations:refresh
+  // -> components/Planner/useStaysRefresh, which reloads them once per burst in
+  // pages/tripPlanner/useTripPlanner (sidebar, map, the phone's day sheet) and
+  // components/Planner/useDayDetail (the desktop day panel).
  'accommodation:created',
  'accommodation:updated',
  'accommodation:deleted',
-  'trip:deleted',
-  'member:added',
-  'member:removed',
 ] as const satisfies readonly TrekWsEventName[]
+
+/**
+ * Events the client deliberately does not act on, each with the reason. Removing
+ * an entry means the event is now handled somewhere; ADDING one is a product
+ * decision that a server event should have no client reaction, never a way to
+ * silence the registry-parity test, which pins these keys to a list that only
+ * shrinks.
+ */
+export const IGNORED_WS_EVENTS: Partial<Record<TrekWsEventName, string>> = {
+  'todo:assignees':
+    'No screen shows who looks after a todo category (todoApi.getCategoryAssignees has no caller), so there is nothing to refresh.',
+}
+
+/**
+ * Events registered ahead of the write that sends them. The broadcast parity
+ * work gave every one of them a handler, so the list is empty; it stays as the
+ * place a future event registered before its sender goes, and only shrinks.
+ */
+export const AWAITING_SENDER_WS_EVENTS: readonly TrekWsEventName[] = []
@@ -1,6 +1,6 @@
-import { render, screen, waitFor } from '../../../tests/helpers/render';
+import { render, screen, waitFor, within } from '../../../tests/helpers/render';
 import userEvent from '@testing-library/user-event';
-import { delay, http, HttpResponse } from 'msw';
+import { http, HttpResponse } from 'msw';
 import { server } from '../../../tests/helpers/msw/server';
 import { resetAllStores, seedStore } from '../../../tests/helpers/store';
 import { useSettingsStore } from '../../store/settingsStore';
@@ -24,23 +24,20 @@ function addonsRoute(addons: ReturnType<typeof buildAddon>[]) {
  return http.get('/api/admin/addons', () => HttpResponse.json({ addons }));
 }

-function llmAddon(config: Record<string, unknown> = {}) {
+function llmAddon(config: Record<string, unknown> = {}, enabled = true) {
  return buildAddon({
    id: 'llm_parsing',
    name: 'AI Parsing',
    description: 'Extract bookings from files',
    icon: 'Sparkles',
    type: 'integration',
-    enabled: true,
+    enabled,
    config,
  });
 }

-function modelsRoute(names: string[], seen?: (string | null)[]) {
-  return http.get('/api/admin/llm/local/models', ({ request }) => {
-    seen?.push(new URL(request.url).searchParams.get('baseUrl'));
-    return HttpResponse.json({ models: names.map(name => ({ name, size: 1 })) });
-  });
+function aiAddon(id: string, name: string, enabled: boolean) {
+  return buildAddon({ id, name, icon: id === 'mcp' ? 'Terminal' : 'Sparkles', type: 'integration', enabled });
 }

 /** Every switch is labelled with the thing it controls, top-level tile or shelf
@@ -576,286 +573,55 @@ describe('AddonManager', () => {
    expect(links.getAttribute('title')).not.toBe('No shared links yet');
  });

-  it('FE-ADMIN-ADDON-020: a disabled AI-parsing addon renders the row without its config block', async () => {
-    server.use(addonsRoute([{ ...llmAddon({ provider: 'local' }), enabled: false }]));
-    render(<AddonManager />);
-
-    await screen.findByText('AI Parsing');
-    // The catalog key now exists, so the tile shows the translation rather than falling
-    // back to the English description the server sent.
-    expect(screen.getByText('Reads bookings the built-in parser cannot, using an AI model you choose')).toBeInTheDocument();
-    expect(screen.queryByText('Provider')).not.toBeInTheDocument();
-  });
-
-  it('FE-ADMIN-ADDON-020b: the config lives in the tile shelf, not as a band below the grid', async () => {
-    server.use(addonsRoute([llmAddon({ provider: 'openai' })]));
-    render(<AddonManager />);
-
-    const label = await screen.findByText('Provider');
-    // Inside the AI Parsing tile's <article>, like the collab toggles sit in theirs.
-    const tile = label.closest('article');
-    expect(tile).not.toBeNull();
-    expect(tile!.textContent).toContain('AI Parsing');
-  });
-
-  it('FE-ADMIN-ADDON-021: the local provider lists installed models and a chip fills the model field', async () => {
-    const user = userEvent.setup();
-    const urls: (string | null)[] = [];
-    server.use(addonsRoute([llmAddon({ provider: 'local' })]), modelsRoute(['qwen3.5:4b', 'llama3:8b'], urls));
-    render(<AddonManager />);
-
-    await screen.findByText('Installed on the server');
-    await screen.findByRole('button', { name: 'llama3:8b' });
-    expect(urls[0]).toBe('http://localhost:11434/v1');
-
-    await user.click(screen.getByRole('button', { name: 'llama3:8b' }));
-    expect(screen.getByPlaceholderText('select or pull below')).toHaveValue('llama3:8b');
-
-    // qwen3.5:4b is already installed, so the recommended row offers "Use" instead of "Pull"
-    await user.click(screen.getByRole('button', { name: 'Use' }));
-    expect(screen.getByPlaceholderText('select or pull below')).toHaveValue('qwen3.5:4b');
-    expect(screen.getByRole('button', { name: 'Selected' })).toBeDisabled();
-  });
-
-  it('FE-ADMIN-ADDON-022: an unreachable Ollama shows the error and Refresh retries', async () => {
-    const user = userEvent.setup();
-    let calls = 0;
+  it('FE-ADMIN-ADDON-020: the AI addons head the integration column as one tile with a switch each', async () => {
    server.use(
-      addonsRoute([llmAddon({ provider: 'local' })]),
-      http.get('/api/admin/llm/local/models', () => {
-        calls += 1;
-        return calls === 1
-          ? HttpResponse.json({ error: 'down' }, { status: 500 })
-          : HttpResponse.json({ models: [] });
-      }),
+      addonsRoute([
+        aiAddon('mcp', 'MCP', false),
+        llmAddon({}, false),
+        aiAddon('ai_assistant', 'AI Assistant', false),
+        buildAddon({ id: 'airtrail', name: 'AirTrail', type: 'integration', icon: 'Plane' }),
+      ]),
    );
    render(<AddonManager />);

-    // The server's reason is shown, not axios' status line (#2649)
-    await screen.findByText('down');
-    expect(screen.queryByText(/Request failed with status code/)).not.toBeInTheDocument();
-
-    await user.click(screen.getByRole('button', { name: 'Refresh' }));
-    await screen.findByText('No models installed yet — pull one below.');
-    expect(calls).toBe(2);
+    const tile = (await screen.findByText('AI')).closest('article') as HTMLElement;
+    const switches = within(tile).getAllByRole('button').map((b) => b.getAttribute('aria-label'));
+    // In the tile's order, whatever order the server sent them in.
+    expect(switches).toEqual(['AI Assistant', 'AI Parsing', 'MCP']);
+    expect(within(tile).getByText('0/3')).toBeInTheDocument();
+    // Their own icons, keyed by id: the icon column of an install still says Sparkles or Terminal.
+    expect(tile.querySelector('svg.lucide-messages-square')).toBeInTheDocument();
+    expect(tile.querySelector('svg.lucide-scan-text')).toBeInTheDocument();
+    expect(tile.querySelector('svg.lucide-cable')).toBeInTheDocument();
+    // Nothing to set up while neither the assistant nor parsing is on.
+    expect(within(tile).queryByRole('button', { name: 'Set up AI' })).toBeNull();
+    // AirTrail is still its own tile in the same column.
+    expect(screen.getByText('AirTrail').closest('article')).not.toBe(tile);
  });

-  it('FE-ADMIN-ADDON-023: switching providers swaps the base URL field, the model hint and the Ollama block', async () => {
+  it('FE-ADMIN-ADDON-021: with parsing on, the tile offers the settings dialog, which closes again', async () => {
    const user = userEvent.setup();
-    const urls: (string | null)[] = [];
-    server.use(addonsRoute([llmAddon({ provider: 'local', apiKey: '••••••••' })]), modelsRoute([], urls));
+    server.use(
+      addonsRoute([llmAddon({}), aiAddon('ai_assistant', 'AI Assistant', false), aiAddon('mcp', 'MCP', true)]),
+      http.get('/api/admin/ai/settings', () =>
+        HttpResponse.json({ policy: 'instance_or_user', dailyTurns: 50, retention: { mode: 'days', days: 90 } }),
+      ),
+      http.get('/api/admin/ai/connection', () => HttpResponse.json({ connection: null, prefill: null })),
+      http.get('/api/ai/status', () => HttpResponse.json({ error: 'not needed' }, { status: 404 })),
+    );
    render(<AddonManager />);

-    await screen.findByText('Installed on the server');
-    expect(screen.getByPlaceholderText('••••••••')).toBeInTheDocument();
-
-    // A hand-typed base URL is used for the next lookup on blur
-    await user.type(screen.getByPlaceholderText('http://localhost:11434/v1'), 'http://ollama.lan:11434/v1');
-    await user.tab();
-    await waitFor(() => expect(urls).toContain('http://ollama.lan:11434/v1'));
-
-    await user.click(screen.getByRole('button', { name: /Local · OpenAI-compatible/ }));
-    await user.click(screen.getByRole('button', { name: 'OpenAI' }));
-    expect(screen.getByPlaceholderText('https://api.openai.com/v1')).toBeInTheDocument();
-    expect(screen.getByPlaceholderText('gpt-4o')).toBeInTheDocument();
-    expect(screen.queryByText('Installed on the server')).not.toBeInTheDocument();
-
-    await user.click(screen.getByRole('button', { name: 'OpenAI' }));
-    await user.click(screen.getByRole('button', { name: 'Anthropic' }));
-    expect(screen.queryByPlaceholderText('https://api.openai.com/v1')).not.toBeInTheDocument();
-    // A gateway can stand in for Anthropic too, so the field stays (#2655).
-    expect(screen.getByPlaceholderText('https://api.anthropic.com')).toHaveValue('');
-    expect(screen.getByPlaceholderText('claude-opus-4-8')).toBeInTheDocument();
-    expect(screen.getByText(/Anthropic reads PDFs/)).toBeInTheDocument();
+    const tile = (await screen.findByText('AI')).closest('article') as HTMLElement;
+    expect(within(tile).getByText('2/3')).toBeInTheDocument();
+    await user.click(within(tile).getByRole('button', { name: 'Set up AI' }));
+    const dialog = await screen.findByRole('dialog');
+    expect(within(dialog).getByRole('button', { name: 'AI Parsing' })).toBeInTheDocument();
+    expect(within(dialog).queryByRole('button', { name: 'AI Assistant' })).toBeNull();
+    const closes = within(dialog).getAllByRole('button', { name: 'Close' });
+    await user.click(closes[closes.length - 1]);
+    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull());
  });

-  it('FE-ADMIN-ADDON-024: pulling a model streams progress and then selects it', async () => {
-    const user = userEvent.setup();
-    let pulled: unknown = null;
-    let modelCalls = 0;
-    server.use(
-      addonsRoute([llmAddon({ provider: 'local' })]),
-      http.get('/api/admin/llm/local/models', () => {
-        modelCalls += 1;
-        return HttpResponse.json({ models: modelCalls === 1 ? [] : [{ name: 'qwen3.5:4b', size: 1 }] });
-      }),
-      http.post('/api/admin/llm/local/pull', async ({ request }) => {
-        pulled = await request.json();
-        await delay(150);
-        return new HttpResponse(
-          '{"status":"pulling manifest"}\n{"status":"downloading","total":100,"completed":40}\nnot-json\n',
-          { headers: { 'Content-Type': 'application/x-ndjson' } },
-        );
-      }),
-    );
-    render(<><ToastContainer /><AddonManager /></>);
-
-    await screen.findByText('No models installed yet — pull one below.');
-    await user.click(screen.getByRole('button', { name: 'Pull' }));
-
-    await screen.findByText('Pulling…');
-    expect(screen.getByText('starting…')).toBeInTheDocument();
-
-    await screen.findByText('Model pulled');
-    expect(pulled).toEqual({ baseUrl: 'http://localhost:11434/v1', model: 'qwen3.5:4b' });
-    expect(screen.getByPlaceholderText('select or pull below')).toHaveValue('qwen3.5:4b');
-    await waitFor(() => expect(screen.getByRole('button', { name: 'Selected' })).toBeDisabled());
-  });
-
-  it('FE-ADMIN-ADDON-025: a failing pull surfaces the server error and saving reports both outcomes', async () => {
-    const user = userEvent.setup();
-    const bodies: unknown[] = [];
-    server.use(
-      addonsRoute([llmAddon({ provider: 'local', model: 'qwen3:8b', baseUrl: '', apiKey: '••••••••', multimodal: true })]),
-      modelsRoute([]),
-      http.post('/api/admin/llm/local/pull', () => HttpResponse.json({ error: 'no disk space' }, { status: 500 })),
-      http.put('/api/admin/addons/llm_parsing', async ({ request }) => {
-        bodies.push(await request.json());
-        return bodies.length === 1 ? HttpResponse.json({ success: true }) : HttpResponse.error();
-      }),
-    );
-    render(<><ToastContainer /><AddonManager /></>);
-
-    await screen.findByText('No models installed yet — pull one below.');
-    await user.click(screen.getByRole('button', { name: 'Pull' }));
-    await screen.findByText('no disk space');
-    expect(screen.getByRole('button', { name: 'Pull' })).toBeEnabled();
-
-    await user.click(screen.getByRole('button', { name: 'Save' }));
-    await screen.findByText('Saved');
-    expect(bodies[0]).toEqual({
-      config: { provider: 'local', model: 'qwen3:8b', baseUrl: '', apiKey: '••••••••', vision: 'auto' },
-    });
-
-    await user.click(screen.getByRole('button', { name: 'Save' }));
-    await screen.findByText('Failed to save');
-  });
-
-  it('FE-ADMIN-ADDON-026: model and API key are editable and their hints follow the provider', async () => {
-    const user = userEvent.setup();
-    const bodies: unknown[] = [];
-    server.use(
-      addonsRoute([llmAddon({ provider: 'local' })]),
-      modelsRoute([]),
-      http.put('/api/admin/addons/llm_parsing', async ({ request }) => {
-        bodies.push(await request.json());
-        return HttpResponse.json({ success: true });
-      }),
-    );
-    render(<><ToastContainer /><AddonManager /></>);
-
-    await screen.findByText('Installed on the server');
-    expect(screen.getByPlaceholderText('(often not required)')).toBeInTheDocument();
-
-    await user.type(screen.getByPlaceholderText('select or pull below'), ' mistral:7b ');
-    await user.type(screen.getByPlaceholderText('(often not required)'), 'sk-live');
-
-    await user.click(screen.getByRole('button', { name: /Local · OpenAI-compatible/ }));
-    await user.click(screen.getByRole('button', { name: 'OpenAI' }));
-    expect(screen.getByPlaceholderText('sk-…')).toHaveValue('sk-live');
-
-    await user.click(screen.getByRole('button', { name: 'Save' }));
-    await screen.findByText('Saved');
-    // The model is trimmed before it is stored, the key is sent verbatim
-    expect(bodies[0]).toEqual({
-      config: { provider: 'openai', model: 'mistral:7b', baseUrl: '', apiKey: 'sk-live', vision: 'auto' },
-    });
-  });
-
-  it('FE-ADMIN-ADDON-029: switching to Anthropic clears a stale base URL before saving', async () => {
-    const user = userEvent.setup();
-    const bodies: unknown[] = [];
-    server.use(
-      addonsRoute([llmAddon({ provider: 'local', model: '', baseUrl: 'http://ollama.lan:11434/v1', apiKey: '', multimodal: false })]),
-      modelsRoute([]),
-      http.put('/api/admin/addons/llm_parsing', async ({ request }) => {
-        bodies.push(await request.json());
-        return HttpResponse.json({ success: true });
-      }),
-    );
-    render(<><ToastContainer /><AddonManager /></>);
-
-    await screen.findByText('Installed on the server');
-
-    await user.click(screen.getByRole('button', { name: /Local · OpenAI-compatible/ }));
-    await user.click(screen.getByRole('button', { name: 'Anthropic' }));
-    await user.type(screen.getByPlaceholderText('claude-opus-4-8'), 'claude-haiku-4-5-20251001');
-    await user.type(screen.getByPlaceholderText('sk-…'), 'sk-ant-live');
-
-    await user.click(screen.getByRole('button', { name: 'Save' }));
-    await screen.findByText('Saved');
-    // The stale local base URL must not ride along to Anthropic — it would hijack the endpoint.
-    expect(bodies[0]).toEqual({
-      config: { provider: 'anthropic', model: 'claude-haiku-4-5-20251001', baseUrl: '', apiKey: 'sk-ant-live', vision: 'auto' },
-    });
-  });
-
-  it('FE-ADMIN-ADDON-038: whether the model reads images is auto, on or off, kept as stored and saved as chosen', async () => {
-    const user = userEvent.setup();
-    const bodies: unknown[] = [];
-    server.use(
-      addonsRoute([llmAddon({ provider: 'openai', model: 'gpt-4.1-mini', baseUrl: '', apiKey: 'sk', vision: 'off' })]),
-      http.put('/api/admin/addons/llm_parsing', async ({ request }) => {
-        bodies.push(await request.json());
-        return HttpResponse.json({ success: true });
-      }),
-    );
-    render(<><ToastContainer /><AddonManager /></>);
-
-    // Stored off stays off; a cloud provider is told what Automatic means for it.
-    await user.click(await screen.findByRole('button', { name: 'No' }));
-    expect(screen.getByText('Automatic means no for a cloud model. Choose Yes if this model reads images.')).toBeInTheDocument();
-    await user.click(screen.getByRole('button', { name: 'Yes' }));
-
-    await user.click(screen.getByRole('button', { name: 'Save' }));
-    await screen.findByText('Saved');
-    expect(bodies[0]).toMatchObject({ config: { provider: 'openai', vision: 'on' } });
-    expect(bodies[0]).not.toHaveProperty('config.multimodal');
-  });
-
-  it('FE-ADMIN-ADDON-039: with the local provider the hint says Automatic asks the server', async () => {
-    server.use(addonsRoute([llmAddon({ provider: 'local', model: 'qwen3.5:4b' })]), modelsRoute([]));
-    render(<AddonManager />);
-    expect(await screen.findByText('Automatic asks the Ollama server whether this model reads images.')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Automatic' })).toBeInTheDocument();
-  });
-
-  it('FE-ADMIN-ADDON-027: an error frame in the pull stream aborts the pull and is reported', async () => {
-    const user = userEvent.setup();
-    server.use(
-      addonsRoute([llmAddon({ provider: 'local' })]),
-      modelsRoute([]),
-      http.post('/api/admin/llm/local/pull', () => new HttpResponse(
-        '{"status":"pulling manifest"}\n{"error":"manifest not found"}\n',
-        { headers: { 'Content-Type': 'application/x-ndjson' } },
-      )),
-    );
-    render(<><ToastContainer /><AddonManager /></>);
-
-    await screen.findByText('No models installed yet — pull one below.');
-    await user.click(screen.getByRole('button', { name: 'Pull' }));
-
-    await screen.findByText('manifest not found');
-    expect(screen.queryByText('Model pulled')).not.toBeInTheDocument();
-    await waitFor(() => expect(screen.getByRole('button', { name: 'Pull' })).toBeEnabled());
-    expect(screen.queryByText('Pulling…')).not.toBeInTheDocument();
-  });
-
-  it('FE-ADMIN-ADDON-028: blurring the base URL under a cloud provider queries no local models', async () => {
-    const user = userEvent.setup();
-    const urls: (string | null)[] = [];
-    server.use(addonsRoute([llmAddon({ provider: 'openai' })]), modelsRoute([], urls));
-    render(<AddonManager />);
-
-    await screen.findByText('Provider');
-    expect(screen.queryByText('Installed on the server')).not.toBeInTheDocument();
-
-    await user.type(screen.getByPlaceholderText('https://api.openai.com/v1'), 'https://proxy.local/v1');
-    await user.tab();
-
-    await waitFor(() => expect(screen.getByDisplayValue('https://proxy.local/v1')).toBeInTheDocument());
-    expect(urls).toHaveLength(0);
-  });
  it('FE-ADMIN-ADDON-040: a shelf of several options starts folded and says how many there are and how many are on', async () => {
    server.use(addonsRoute([buildAddon({ id: 'collab', name: 'Collab', enabled: true })]));
    render(
@@ -901,6 +667,10 @@ describe('AddonManager', () => {
      </>
    );

+    // Folded like Collab's and Documents' options until the bar is opened.
+    await screen.findByRole('button', { name: /\d+ options?/, expanded: false });
+    expect(screen.queryByRole('button', { name: 'wanderer' })).not.toBeInTheDocument();
+    await unfoldShelves();
    const toggle = await screen.findByRole('button', { name: 'wanderer' });
    expect(isOn(toggle)).toBe(false);
    await userEvent.click(toggle);
@@ -921,6 +691,7 @@ describe('AddonManager', () => {
      </>
    );

+    await unfoldShelves();
    await userEvent.click(await screen.findByRole('button', { name: 'wanderer' }));

    await waitFor(() => expect(isOn(screen.getByRole('button', { name: 'wanderer' }))).toBe(false));
@@ -941,4 +712,33 @@ describe('AddonManager', () => {
    expect(roadtrip.querySelector('svg.lucide-car-front')).toBeInTheDocument();
    expect(tours.querySelector('svg.lucide-puzzle')).not.toBeInTheDocument();
  });
+
+  it('FE-ADMIN-ADDON-045: finds an addon by name or description and shows the ones on or off', async () => {
+    const user = userEvent.setup();
+    server.use(
+      addonsRoute([
+        buildAddon({ id: 'x-lists', name: 'Todo List', description: 'Track tasks', type: 'trip', enabled: true }),
+        buildAddon({ id: 'x-costs', name: 'Budget', description: 'Split costs', type: 'trip', enabled: false }),
+        buildAddon({ id: 'x-holiday', name: 'Vacay', description: 'Holiday planner', type: 'global', enabled: true }),
+      ])
+    );
+    render(<AddonManager />);
+    await screen.findByText('Todo List');
+
+    await user.type(screen.getByRole('searchbox', { name: 'Search addons' }), 'costs');
+    expect(screen.getByText('Budget')).toBeInTheDocument();
+    expect(screen.queryByText('Todo List')).toBeNull();
+    expect(screen.queryByText('Vacay')).toBeNull();
+
+    await user.clear(screen.getByRole('searchbox', { name: 'Search addons' }));
+    await user.click(screen.getByRole('button', { name: 'On' }));
+    expect(screen.getByText('Todo List')).toBeInTheDocument();
+    expect(screen.getByText('Vacay')).toBeInTheDocument();
+    expect(screen.queryByText('Budget')).toBeNull();
+
+    await user.click(screen.getByRole('button', { name: 'Off' }));
+    await user.type(screen.getByRole('searchbox', { name: 'Search addons' }), 'nothing like this');
+    expect(screen.getByText('No addon matches the search or the filter.')).toBeInTheDocument();
+  });
 });
+
@@ -1,22 +1,19 @@
-import { useId, type ComponentType } from 'react'
+import { useState, type ComponentType } from 'react'
 import { useTranslation } from '../../i18n'
 import { useIsDark } from '../../hooks/useIsDark'
-import { Puzzle, ListChecks, Wallet, FileText, CalendarDays, Globe, Briefcase, Image, Terminal, Link2, Compass, BookOpen, Sparkles, Luggage, Plane, Server, Cloud, Bookmark, Users, Loader2, RefreshCw, Mountain, CarFront } from 'lucide-react'
-import CustomSelect from '../shared/CustomSelect'
-import { asLlmVision, LLM_VISION_MODES, type LlmVision } from '@trek/shared'
+import { Puzzle, ListChecks, Wallet, FileText, CalendarDays, Globe, Briefcase, Image, Terminal, Link2, Compass, BookOpen, Sparkles, Luggage, Plane, Bookmark, Users, Loader2, Mountain, CarFront, Search } from 'lucide-react'
 import EmptyState from '../shared/EmptyState'
 import DawarichIcon from '../shared/DawarichIcon'
 import AirTrailIcon from '../shared/AirTrailIcon'
-import { DOCUMENT_PROVIDER_ICONS } from '../shared/DocumentProviderIcons'
+import { DOCUMENT_PROVIDER_ICONS } from '../shared/documentProviderIconMap'
 import AddonTile from './AddonTile'
 import AddonSubRow from './AddonSubRow'
 import { Tooltip } from '../shared/Tooltip'
 import { fs } from '../shared/DialogShell'
-import { EditorField, INPUT, Segmented } from '../shared/dialogParts'
-import { SettingsCard, SettingsHint, StatusPill, SETTINGS_BUTTON_PRIMARY } from '../Settings/settingsKit'
-import { type Addon, type CollabFeatures, ANTHROPIC_HINT, COLLAB_SUB_FEATURES, getAddonLabel, MASKED, RECOMMENDED_MODELS } from './addons/addonModel'
+import { SettingsCard, StatusPill } from '../Settings/settingsKit'
+import { type Addon, type CollabFeatures, COLLAB_SUB_FEATURES, getAddonLabel } from './addons/addonModel'
 import { useAddonManager } from './addons/useAddonManager'
-import { useLlmParsingConfig } from './addons/useLlmParsingConfig'
+import AiAddonTile from './addons/AiAddonTile'
 import { ImmichIcon, SynologyIcon } from './addons/PhotoProviderIcons'
 import WandererMark from '../Tours/wanderer/WandererMark'

@@ -74,11 +71,13 @@ export default function AddonManager({ bagTrackingEnabled, onToggleBagTracking,
  const { t } = useTranslation()
  const dark = useIsDark()
  const {
-    addons, loading, handleToggle, tripAddons, globalAddons, integrationAddons, providerOptions, documentProviderOptions,
+    addons, loading, handleToggle, tripAddons, globalAddons, integrationAddons, aiAddons, providerOptions, documentProviderOptions,
    toursWanderer,
    toggleToursWanderer,
    mapSwitches,
  } = useAddonManager()
+  const [query, setQuery] = useState('')
+  const [view, setView] = useState<AddonView>('all')

  if (loading) {
    return (
@@ -154,33 +153,29 @@ export default function AddonManager({ bagTrackingEnabled, onToggleBagTracking,
        )
      })
    }
+    // An array, not a fragment: the tile counts its rows to fold them behind the
+    // "N options" bar the way Collab's and Documents' are.
    if (addon.id === 'tours' && addon.enabled) {
-      return (
-        <>
+      return [
+        <AddonSubRow
+          key="wanderer"
+          icon={<WandererMark size={14} />}
+          title={t('admin.toursWanderer.title')}
+          description={t('admin.toursWanderer.subtitle')}
+          enabled={toursWanderer}
+          onToggle={() => void toggleToursWanderer()}
+        />,
+        ...mapSwitches.map(({ key, Icon, titleKey, subtitleKey, enabled, toggle }) => (
          <AddonSubRow
-            icon={<WandererMark size={14} />}
-            title={t('admin.toursWanderer.title')}
-            description={t('admin.toursWanderer.subtitle')}
-            enabled={toursWanderer}
-            onToggle={() => void toggleToursWanderer()}
+            key={key}
+            icon={<Icon size={14} />}
+            title={t(titleKey)}
+            description={t(subtitleKey)}
+            enabled={enabled}
+            onToggle={() => void toggle()}
          />
-          {mapSwitches.map(({ key, Icon, titleKey, subtitleKey, enabled, toggle }) => (
-            <AddonSubRow
-              key={key}
-              icon={<Icon size={14} />}
-              title={t(titleKey)}
-              description={t(subtitleKey)}
-              enabled={enabled}
-              onToggle={() => void toggle()}
-            />
-          ))}
-        </>
-      )
-    }
-    // The AI-parsing settings hang off their tile like every other sub-feature,
-    // just as a form instead of toggle rows.
-    if (addon.id === 'llm_parsing' && addon.enabled) {
-      return <LlmParsingConfig addon={addon} />
+        )),
+      ]
    }
    return null
  }
@@ -201,17 +196,17 @@ export default function AddonManager({ bagTrackingEnabled, onToggleBagTracking,
    )
  }

-  /* One column per type, side by side, instead of three stacked sections. Stacked, each
-     section opened its own set of columns and the tall tiles (Collab, Journey) set a
-     section's height while its neighbours ran out early. Side by side the column's
-     head carries the type, so the tiles need no badge of their own. */
+  /* A card per type, the way every other admin tab sets its cards: Trip in the
+     left column, Global and Integration in the right one, each card with the
+     dialogs' head band carrying the type, its count and what it means. Above
+     them one card says how many are on and finds an addon by name. */
  const groups = [
    { key: 'trip', addons: tripAddons },
    { key: 'global', addons: globalAddons },
    { key: 'integration', addons: integrationAddons },
-  ].filter(g => g.addons.length > 0)
+  ].filter(g => g.addons.length > 0 || (g.key === 'integration' && aiAddons.length > 0))
  const enabledCount = addons.filter(a => a.type !== 'photo_provider' && a.type !== 'document_provider' && a.enabled).length
-  const totalCount = tripAddons.length + globalAddons.length + integrationAddons.length
+  const totalCount = tripAddons.length + globalAddons.length + integrationAddons.length + aiAddons.length

  const subtitle = (
    <span className="inline-flex flex-wrap items-center gap-1">
@@ -221,201 +216,145 @@ export default function AddonManager({ bagTrackingEnabled, onToggleBagTracking,
    </span>
  )

-  return (
-    <SettingsCard
-      icon={Puzzle}
-      title={t('admin.addons.title')}
-      hint={subtitle}
-      badge={totalCount > 0 ? (
-        <Tooltip label={t('admin.addons.group.count', { enabled: enabledCount, total: totalCount })}>
-          <span className="inline-flex">
-            <StatusPill tone={enabledCount > 0 ? 'success' : 'neutral'}>{enabledCount}/{totalCount}</StatusPill>
-          </span>
-        </Tooltip>
-      ) : undefined}
-    >
-      {addons.length === 0 ? (
-        <EmptyState scene="idle" title={t('admin.addons.noAddons')} surface="var(--bg-secondary)" />
-      ) : (
-        <div className="grid grid-cols-1 items-start gap-4 md:grid-cols-2 xl:grid-cols-3">
-          {groups.map(g => {
-            const meta = TYPE_META[g.key]
-            return (
-              <section key={g.key} className="min-w-0 overflow-hidden rounded-[14px] border border-edge-faint bg-surface-card">
-                <GroupHead icon={meta.icon} label={t(meta.labelKey)} hint={t(meta.hintKey)} addons={g.addons} t={t} />
-                <div className="divide-y divide-edge-faint">{g.addons.map(tile)}</div>
-              </section>
-            )
-          })}
-        </div>
-      )}
-    </SettingsCard>
-  )
-}
+  /** Whether an addon is shown under the search and the filter. */
+  const shown = (addon: Addon) => {
+    if (view === 'on' && !addon.enabled) return false
+    if (view === 'off' && addon.enabled) return false
+    const q = query.trim().toLocaleLowerCase()
+    if (!q) return true
+    const label = getAddonLabel(t, addon)
+    return `${label.name} ${label.description ?? ''}`.toLocaleLowerCase().includes(q)
+  }
+
+  const card = (g: (typeof groups)[number]) => {
+    const meta = TYPE_META[g.key]
+    const all = g.key === 'integration' ? [...aiAddons, ...g.addons] : g.addons
+    const visible = g.addons.filter(shown)
+    const ai = g.key === 'integration' && aiAddons.some(shown)
+    if (!visible.length && !ai) return null
+    const on = all.filter(a => a.enabled).length
+    return (
+      <SettingsCard
+        key={g.key}
+        icon={meta.icon}
+        title={t(meta.labelKey)}
+        hint={t(meta.hintKey)}
+        badge={(
+          <Tooltip label={t('admin.addons.group.count', { enabled: on, total: all.length })}>
+            <span className="inline-flex"><StatusPill tone={on > 0 ? 'success' : 'neutral'}>{on}/{all.length}</StatusPill></span>
+          </Tooltip>
+        )}
+        bodyClassName="p-3"
+      >
+        <div className="divide-y divide-edge-faint overflow-hidden rounded-[12px] border border-edge-faint bg-surface-card">
+          {/* The AI addons share a connection and a settings dialog, so they head the card as one tile. */}
+          {ai && <AiAddonTile addons={aiAddons} onToggle={handleToggle} />}
+          {visible.map(tile)}
+        </div>
+      </SettingsCard>
+    )
+  }
+
+  const [first, ...rest] = groups
+  const cards = { start: first ? card(first) : null, end: rest.map(card).filter(Boolean) }

-/** The head band of one type's column: icon tile, the type, its count and what it means. */
-function GroupHead({ icon: Icon, label, hint, addons, t }: {
-  icon: ComponentType<{ size?: number; className?: string; strokeWidth?: number }>
-  label: string
-  hint: string
-  addons: Addon[]
-  t: (key: string, params?: Record<string, unknown>) => string
-}) {
-  const enabled = addons.filter(a => a.enabled).length
  return (
-    <div className="flex items-start gap-2.5 border-b border-edge-faint bg-surface-tertiary px-3.5 py-2.5">
-      <span className="mt-px grid h-7 w-7 flex-none place-items-center rounded-[9px] bg-surface-card text-content-secondary shadow-sm">
-        <Icon size={13} strokeWidth={2} />
-      </span>
-      <div className="min-w-0 flex-1">
-        <div className="flex items-center gap-2">
-          <h3 className="m-0 min-w-0 flex-1 truncate font-bold text-content" style={fs(13, 'body')}>{label}</h3>
-          <Tooltip label={t('admin.addons.group.count', { enabled, total: addons.length })}>
+    <>
+      <SettingsCard
+        icon={Puzzle}
+        title={t('admin.addons.title')}
+        hint={subtitle}
+        badge={totalCount > 0 ? (
+          <Tooltip label={t('admin.addons.group.count', { enabled: enabledCount, total: totalCount })}>
            <span className="inline-flex">
-              <StatusPill>{enabled}/{addons.length}</StatusPill>
+              <StatusPill tone={enabledCount > 0 ? 'success' : 'neutral'}>{enabledCount}/{totalCount}</StatusPill>
            </span>
          </Tooltip>
+        ) : undefined}
+      >
+        {addons.length === 0
+          ? <EmptyState scene="idle" title={t('admin.addons.noAddons')} surface="var(--bg-secondary)" />
+          : <AddonToolbar groups={groups.map(g => ({ key: g.key, addons: g.key === 'integration' ? [...aiAddons, ...g.addons] : g.addons }))} query={query} onQuery={setQuery} view={view} onView={setView} t={t} />}
+      </SettingsCard>
+
+      {addons.length > 0 && (cards.start || cards.end.length > 0 ? (
+        <div className="grid grid-cols-1 gap-x-5 xl:grid-cols-2 xl:items-start">
+          <div className="min-w-0">{cards.start}</div>
+          <div className="min-w-0">{cards.end}</div>
        </div>
-        {/* Says what the type means: the only place that still explains it. */}
-        <p className="m-0 mt-0.5 leading-snug text-content-faint" style={fs(11)}>{hint}</p>
-      </div>
-    </div>
+      ) : (
+        <p className="m-0 rounded-2xl border border-dashed border-edge-faint px-4 py-8 text-center text-content-muted" style={fs(13, 'body')}>
+          {t('admin.addons.noMatch')}
+        </p>
+      ))}
+    </>
  )
 }

-const EYEBROW = 'font-geist font-bold uppercase tracking-[.08em] text-content-faint'
-const SMALL_BUTTON = 'inline-flex flex-none items-center rounded-[9px] px-2.5 py-1 font-medium transition-colors disabled:cursor-default disabled:opacity-60'
+type AddonView = 'all' | 'on' | 'off'

 /**
- * Instance-wide AI-parsing config. When set, applies to the whole instance and
- * overrides per-user config (see server llmConfig.ts). The API key is masked on
- * read; an unchanged mask is treated as a no-op by the server. For the local
- * provider, it also lists installed Ollama models and can pull NuExtract models.
+ * The head card's body: a tile per type with how many of it are on, then a
+ * search over the addons' names and descriptions and a switch between all,
+ * the ones on and the ones off.
 */
-function LlmParsingConfig({ addon }: { addon: Addon }) {
-  const { t } = useTranslation()
-  const {
-    provider, setProvider, model, setModel, baseUrl, setBaseUrl, baseUrlPlaceholder, apiKey, setApiKey, vision, setVision, saving,
-    installed, modelsErr, loadingModels, pulling, pullPct, pullStatus, isInstalled, loadModels, pull, save,
-  } = useLlmParsingConfig(addon)
-  const fieldId = useId()
-
-  const providerOptions = [
-    { value: 'local', label: 'Local · OpenAI-compatible', icon: <Server size={14} />, badge: 'Ollama' },
-    { value: 'openai', label: 'OpenAI', icon: <Cloud size={14} /> },
-    { value: 'anthropic', label: 'Anthropic', icon: <Sparkles size={14} /> },
-  ]
-  const visionOptions = LLM_VISION_MODES.map(value => ({ value, label: t(`admin.addons.llm.vision.${value}`) }))
-
-  /* Lives in the tile's shelf like the collab toggles, so it is one column of
-     eyebrow fields: the band this used to be had a whole page width. */
+function AddonToolbar({ groups, query, onQuery, view, onView, t }: {
+  groups: { key: string; addons: Addon[] }[]
+  query: string
+  onQuery: (q: string) => void
+  view: AddonView
+  onView: (v: AddonView) => void
+  t: (key: string, params?: Record<string, unknown>) => string
+}) {
  return (
-    <li className={`flex flex-col gap-3 p-3 ${saving ? 'opacity-60' : ''}`}>
-      <SettingsHint>
-        Instance-wide — applies to all users. Leave blank to let each user configure their own provider.
-      </SettingsHint>
-
-      <EditorField label="Provider">
-        <CustomSelect value={provider} onChange={v => setProvider(String(v))} options={providerOptions} />
-      </EditorField>
-      <EditorField label="Base URL" htmlFor={`${fieldId}-url`}>
-        <input id={`${fieldId}-url`} type="url" autoComplete="off" className={INPUT} value={baseUrl} onChange={e => setBaseUrl(e.target.value)} onBlur={loadModels} placeholder={baseUrlPlaceholder} />
-      </EditorField>
-      <EditorField
-        label="API key"
-        htmlFor={`${fieldId}-key`}
-        hint={provider === 'anthropic' ? ANTHROPIC_HINT : undefined}
-      >
-        <input id={`${fieldId}-key`} type="password" className={INPUT} value={apiKey} onChange={e => setApiKey(e.target.value)} placeholder={apiKey === MASKED ? MASKED : provider === 'local' ? '(often not required)' : 'sk-…'} />
-      </EditorField>
-      <EditorField label="Model" htmlFor={`${fieldId}-model`}>
-        <input id={`${fieldId}-model`} autoComplete="off" className={`${INPUT} font-geist`} value={model} onChange={e => setModel(e.target.value)} placeholder={provider === 'anthropic' ? 'claude-opus-4-8' : provider === 'openai' ? 'gpt-4o' : 'select or pull below'} />
-      </EditorField>
-
-      <EditorField label={t('settings.aiParsing.multimodal')} hint={t(provider === 'local' ? 'admin.addons.llm.vision.hintLocal' : 'admin.addons.llm.vision.hintCloud')}>
-        <Segmented<LlmVision>
-          label={t('settings.aiParsing.multimodal')}
-          value={vision}
-          onChange={v => setVision(asLlmVision(v))}
-          options={visionOptions}
-          fill
-        />
-      </EditorField>
-
-      {/* Local model management (Ollama) */}
-      {provider === 'local' && (
-        <div className="flex flex-col gap-2.5 rounded-[12px] border border-edge-faint bg-surface-card p-3">
-          <div className="flex items-center gap-2">
-            <span className={`${EYEBROW} min-w-0 flex-1 truncate`} style={fs(9.5)}>Installed on the server</span>
-            <button type="button" onClick={loadModels} disabled={loadingModels}
-              className="inline-flex flex-none items-center gap-1 rounded-full px-2 py-0.5 font-medium text-content-muted hover:bg-surface-secondary hover:text-content disabled:cursor-default disabled:opacity-60"
-              style={fs(11.5, 'body')}>
-              <RefreshCw size={11} strokeWidth={2.2} className={loadingModels ? 'animate-spin' : undefined} />
-              {loadingModels ? 'Loading…' : 'Refresh'}
-            </button>
-          </div>
-          {modelsErr && <p className="m-0 break-words text-danger" style={fs(11.5)}>{modelsErr}</p>}
-          {!modelsErr && installed.length === 0 && !loadingModels && (
-            <SettingsHint>No models installed yet — pull one below.</SettingsHint>
-          )}
-          {installed.length > 0 && (
-            <div className="flex flex-wrap gap-1.5">
-              {installed.map(name => (
-                <button type="button"
-                  key={name}
-                  title={name}
-                  onClick={() => setModel(name)}
-                  aria-pressed={model === name}
-                  className={`max-w-full truncate rounded-full px-2.5 py-[3px] font-geist font-medium transition-colors ${model === name ? 'bg-accent text-accent-text' : 'border border-edge bg-surface-card text-content-muted hover:text-content'}`}
-                  style={fs(11.5)}
-                >
-                  {name}
-                </button>
-              ))}
+    <>
+      <div className="grid grid-cols-1 gap-2 sm:grid-cols-3">
+        {groups.map(g => {
+          const meta = TYPE_META[g.key]
+          const Icon = meta.icon
+          const on = g.addons.filter(a => a.enabled).length
+          return (
+            <div key={g.key} className="flex items-center gap-3 rounded-[12px] border border-edge-faint bg-surface-card px-3 py-2.5">
+              <span className="grid h-8 w-8 flex-none place-items-center rounded-[10px] bg-surface-secondary text-content-secondary">
+                <Icon size={15} />
+              </span>
+              <span className="min-w-0 flex-1">
+                <span className="block truncate font-semibold text-content" style={fs(12.5, 'body')}>{t(meta.labelKey)}</span>
+                <span className="block text-content-faint" style={fs(11)}>{t('admin.addons.group.count', { enabled: on, total: g.addons.length })}</span>
+              </span>
+              <span className={`font-geist font-bold tabular-nums ${on > 0 ? 'text-content' : 'text-content-faint'}`} style={fs(18, 'body')} aria-hidden>{on}</span>
            </div>
-          )}
-
-          <div className="flex flex-col gap-2 border-t border-edge-faint pt-2.5">
-            <span className={EYEBROW} style={fs(9.5)}>Pull a recommended model</span>
-            {RECOMMENDED_MODELS.map(m => {
-              const installedHere = isInstalled(m.id)
-              const isPulling = pulling === m.id
-              const active = model === m.id
-              return (
-                <div key={m.id} className="min-w-0" title={m.note}>
-                  <div className="flex items-center gap-2">
-                    <span className="min-w-0 flex-1 truncate font-medium text-content" style={fs(12.5, 'body')}>{m.label}</span>
-                    {m.recommended && <StatusPill tone="success">Recommended</StatusPill>}
-                    {installedHere ? (
-                      <button type="button" onClick={() => setModel(m.id)} disabled={active} className={`${SMALL_BUTTON} ${active ? 'bg-surface-tertiary text-content-muted' : 'bg-surface-card text-content shadow-sm ring-1 ring-edge-faint hover:bg-surface-secondary'}`} style={fs(12, 'body')}>
-                        {active ? 'Selected' : 'Use'}
-                      </button>
-                    ) : (
-                      <button type="button" onClick={() => pull(m.id)} disabled={!!pulling} className={`${SMALL_BUTTON} bg-accent text-accent-text hover:opacity-90`} style={fs(12, 'body')}>
-                        {isPulling ? 'Pulling…' : 'Pull'}
-                      </button>
-                    )}
-                  </div>
-                  {isPulling && (
-                    <div className="mt-2">
-                      <div className="h-1.5 w-full overflow-hidden rounded-full bg-surface-tertiary">
-                        <div className="h-full rounded-full bg-accent transition-[width] duration-200" style={{ width: `${pullPct}%` }} />
-                      </div>
-                      <div className="mt-1 truncate font-geist tabular-nums text-content-faint" style={fs(11)}>{pullStatus}{pullPct ? ` · ${pullPct}%` : ''}</div>
-                    </div>
-                  )}
-                </div>
-              )
-            })}
-          </div>
-        </div>
-      )}
-
-      <div className="flex justify-end">
-        <button type="button" onClick={save} disabled={saving} className={SETTINGS_BUTTON_PRIMARY} style={fs(13, 'body')}>
-          {saving ? 'Saving…' : 'Save'}
-        </button>
+          )
+        })}
      </div>
-    </li>
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
+        <label className="relative flex min-w-0 flex-1 items-center">
+          <Search size={14} className="pointer-events-none absolute start-3 text-content-faint" />
+          <input
+            type="search"
+            value={query}
+            onChange={e => onQuery(e.target.value)}
+            placeholder={t('admin.addons.search')}
+            aria-label={t('admin.addons.search')}
+            className="h-9 w-full rounded-[10px] border border-edge-faint bg-surface-card ps-8 pe-3 text-content outline-none transition-colors placeholder:text-content-faint focus:border-accent"
+            style={fs(13, 'body')}
+          />
+        </label>
+        <div className="inline-flex flex-none gap-1 rounded-[10px] bg-surface-tertiary p-1" role="group" aria-label={t('admin.addons.filter')}>
+          {(['all', 'on', 'off'] as const).map(v => (
+            <button
+              key={v}
+              type="button"
+              onClick={() => onView(v)}
+              aria-pressed={view === v}
+              className={`h-7 rounded-[8px] px-3 font-medium transition-colors ${view === v ? 'bg-surface-card text-content shadow-sm' : 'text-content-muted hover:text-content'}`}
+              style={fs(12.5, 'body')}
+            >
+              {t(`admin.addons.filter.${v}`)}
+            </button>
+          ))}
+        </div>
+      </div>
+    </>
  )
 }
@@ -19,6 +19,7 @@ export default function AddonSubRow({
  icon,
  title,
  description,
+  badge,
  enabled,
  onToggle,
 }: {
@@ -26,6 +27,8 @@ export default function AddonSubRow({
  icon?: ReactNode
  title: string
  description?: string
+  /** A small pill after the title, e.g. the beta mark on the assistant. */
+  badge?: ReactNode
  enabled: boolean
  onToggle: () => void
 }) {
@@ -34,8 +37,11 @@ export default function AddonSubRow({
      {icon
        ? <span className={`grid h-6 w-6 flex-none place-items-center ${enabled ? 'text-content-muted' : 'text-content-faint'}`}>{icon}</span>
        : <span className="w-6 flex-none" aria-hidden />}
-      <span className={`min-w-0 flex-1 truncate font-medium ${enabled ? 'text-content' : 'text-content-muted'}`} style={fs(12.5, 'body')} title={description}>
-        {title}
+      <span className="flex min-w-0 flex-1 items-center gap-2">
+        <span className={`min-w-0 truncate font-medium ${enabled ? 'text-content' : 'text-content-muted'}`} style={fs(12.5, 'body')} title={description}>
+          {title}
+        </span>
+        {badge}
      </span>
      <ToggleSwitch on={enabled} onToggle={onToggle} label={title} />
    </li>
@@ -489,10 +489,10 @@ describe('AdminPluginsPanel — TREK-version compatibility', () => {
    fireEvent.click(await screen.findByText('Discover'))
  }

-  it('blocks Install when no published version runs on this TREK, and says why', async () => {
+  it('marks a plugin no published version runs on, and still lets the admin install it', async () => {
    await openDiscover({ trek: '>=4.0.0', hostVersion: '3.3.0', compatible: false, latestCompatible: null })
-    const btn = await screen.findByRole('button', { name: /^incompatible$/i })
-    expect(btn).toBeDisabled()
+    expect(await screen.findByText('Not confirmed for TREK 3.3.0 yet')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /^install$/i })).toBeEnabled()
  })

  it('offers the newest version that DOES run here rather than a dead button', async () => {
@@ -549,9 +549,11 @@ function panelRoot(container: HTMLElement): HTMLElement {
 }

 /** Opens one of the toolbar dropdowns (identified by its current title) and picks an option. */
-async function pickFilter(trigger: RegExp, option: RegExp) {
-  fireEvent.click(await screen.findByTitle(trigger))
-  fireEvent.click(await screen.findByRole('button', { name: option }))
+/** The toolbar's one Filter button; a pick in its menu leaves the menu open. */
+const filterButton = (): HTMLElement => screen.getByRole('button', { name: /^Filter/ })
+async function pickFilter(option: RegExp) {
+  if ((await screen.findByRole('button', { name: /^Filter/ })).getAttribute('aria-expanded') !== 'true') fireEvent.click(filterButton())
+  fireEvent.click(await screen.findByRole('menuitemradio', { name: option }))
 }

 /** The enable toggle of a named installed row. */
@@ -610,9 +612,9 @@ describe('AdminPluginsPanel — load states and toolbar', () => {
    render(<AdminPluginsPanel />)
    await screen.findByText('Gotify')

-    await pickFilter(/^Type: All types$/, /^Widget$/)
+    await pickFilter(/^Widget$/)

-    expect(await screen.findByTitle('Type: Widget')).toBeInTheDocument()
+    expect(await screen.findByRole('menuitemradio', { name: 'Widget' })).toHaveAttribute('aria-checked', 'true')
    expect(screen.getByText('Countdown')).toBeInTheDocument()
    expect(screen.queryByText('Gotify')).not.toBeInTheDocument()
  })
@@ -626,15 +628,15 @@ describe('AdminPluginsPanel — load states and toolbar', () => {
    render(<AdminPluginsPanel />)
    await screen.findByText('OnOne')

-    await pickFilter(/^Status: All$/, /^Off$/)
+    await pickFilter(/^Off$/)
    expect(await screen.findByText('OffOne')).toBeInTheDocument()
    expect(screen.queryByText('OnOne')).not.toBeInTheDocument()

-    await pickFilter(/^Status: Off$/, /^Error$/)
+    await pickFilter(/^Error$/)
    expect(await screen.findByText('BadOne')).toBeInTheDocument()
    expect(screen.getByText('boom')).toBeInTheDocument()

-    await pickFilter(/^Status: Error$/, /^Update available$/)
+    await pickFilter(/^Update available$/)
    expect(await screen.findByText('OnOne')).toBeInTheDocument()
    expect(screen.queryByText('BadOne')).not.toBeInTheDocument()
  })
@@ -644,11 +646,10 @@ describe('AdminPluginsPanel — load states and toolbar', () => {
    render(<AdminPluginsPanel />)
    await screen.findByText('Gotify')

-    await pickFilter(/^Sort: Name$/, /^Updates first$/)
-    expect(await screen.findByTitle('Sort: Updates first')).toBeInTheDocument()
-
+    await pickFilter(/^Updates first$/)
+    expect(filterButton()).toHaveTextContent('Updates first')
    await clickDiscover()
-    await waitFor(() => expect(screen.getByTitle('Sort: Name')).toBeInTheDocument())
+    await waitFor(() => expect(filterButton()).toHaveTextContent(/Name$/))
  })

  it('FE-COMP-PLUGINS-PANEL-008: rescan re-pulls the registry past its cache and confirms with a toast', async () => {
@@ -1663,15 +1664,16 @@ describe('AdminPluginsPanel — Discover cards and the detail modal', () => {
  })
 })

-describe('AdminPluginsPanel — security footer', () => {
-  it('FE-COMP-PLUGINS-PANEL-048: the containment note expands into its sections', async () => {
+describe('AdminPluginsPanel — security dialog', () => {
+  it('FE-COMP-PLUGINS-PANEL-048: the shield in the header opens how plugins are contained', async () => {
    panelWith([])
    render(<AdminPluginsPanel />)
    await screen.findByText('No plugins installed yet.')

    expect(screen.queryByText('Every plugin runs boxed in')).not.toBeInTheDocument()
-    fireEvent.click(screen.getByText('How plugins are contained — and the limits'))
+    fireEvent.click(screen.getByRole('button', { name: 'How plugins are secured' }))

+    expect(screen.getByRole('dialog', { name: 'How plugins are secured' })).toBeInTheDocument()
    expect(screen.getByText('Every plugin runs boxed in')).toBeInTheDocument()
    expect(screen.getByText('What "Reviewed" means')).toBeInTheDocument()
    expect(screen.getByText('What "Signed" means')).toBeInTheDocument()
@@ -1700,9 +1702,9 @@ describe('AdminPluginsPanel toolbar and dialogs', () => {
    row({ id: 'c-page', name: 'Gamma Page', description: 'a page', type: 'page', enabled: 1, status: 'error', last_error: 'boom' }),
  ]

-  const pickFilter = async (user: ReturnType<typeof userEvent.setup>, filter: RegExp, option: RegExp) => {
-    await user.click(screen.getByTitle(filter))
-    await user.click(screen.getByRole('button', { name: option }))
+  const pickFilter = async (user: ReturnType<typeof userEvent.setup>, option: RegExp) => {
+    if (filterButton().getAttribute('aria-expanded') !== 'true') await user.click(filterButton())
+    await user.click(screen.getByRole('menuitemradio', { name: option }))
  }

  it('FE-W5PLG-001: the search box narrows the installed list by name and description', async () => {
@@ -1734,7 +1736,7 @@ describe('AdminPluginsPanel toolbar and dialogs', () => {
    render(<AdminPluginsPanel />)
    await screen.findByText('Alpha Widget')

-    await pickFilter(user, /^Type:/, /^Widget$/)
+    await pickFilter(user, /^Widget$/)

    await waitFor(() => expect(screen.queryByText('Beta Bridge')).not.toBeInTheDocument())
    expect(screen.getByText('Alpha Widget')).toBeInTheDocument()
@@ -1746,15 +1748,15 @@ describe('AdminPluginsPanel toolbar and dialogs', () => {
    render(<AdminPluginsPanel />)
    await screen.findByText('Alpha Widget')

-    await pickFilter(user, /^Status:/, /^Active$/)
+    await pickFilter(user, /^Active$/)
    await waitFor(() => expect(screen.queryByText('Beta Bridge')).not.toBeInTheDocument())
    expect(screen.queryByText('Gamma Page')).not.toBeInTheDocument()

-    await pickFilter(user, /^Status:/, /^Off$/)
+    await pickFilter(user, /^Off$/)
    await waitFor(() => expect(screen.getByText('Beta Bridge')).toBeInTheDocument())
    expect(screen.queryByText('Alpha Widget')).not.toBeInTheDocument()

-    await pickFilter(user, /^Status:/, /^Error$/)
+    await pickFilter(user, /^Error$/)
    await waitFor(() => expect(screen.getByText('Gamma Page')).toBeInTheDocument())
    expect(screen.queryByText('Alpha Widget')).not.toBeInTheDocument()
  })
@@ -1766,13 +1768,13 @@ describe('AdminPluginsPanel toolbar and dialogs', () => {
    await screen.findByText('Alpha Widget')
    await waitFor(() => expect(screen.getByText(/updates? available/i)).toBeInTheDocument())

-    await pickFilter(user, /^Sort:/, /^Updates first$/)
+    await pickFilter(user, /^Updates first$/)
    await waitFor(() => {
      const names = screen.getAllByText(/Alpha Widget|Beta Bridge|Gamma Page/).map(e => e.textContent)
      expect(names[0]).toBe('Gamma Page')
    })

-    await pickFilter(user, /^Status:/, /^Update available$/)
+    await pickFilter(user, /^Update available$/)
    await waitFor(() => expect(screen.queryByText('Alpha Widget')).not.toBeInTheDocument())
    expect(screen.getByText('Gamma Page')).toBeInTheDocument()
  })
@@ -1783,11 +1785,10 @@ describe('AdminPluginsPanel toolbar and dialogs', () => {
    render(<AdminPluginsPanel />)
    await screen.findByText('Alpha Widget')

-    await pickFilter(user, /^Sort:/, /^Updates first$/)
-    expect(screen.getByTitle(/^Sort: Updates first$/)).toBeInTheDocument()
-
+    await pickFilter(user, /^Updates first$/)
+    expect(filterButton()).toHaveTextContent('Updates first')
    await user.click(screen.getByRole('tab', { name: /Discover/ }))
-    await waitFor(() => expect(screen.getByTitle(/^Sort: Name$/)).toBeInTheDocument())
+    await waitFor(() => expect(filterButton()).toHaveTextContent(/Name$/))
  })

  it('FE-W5PLG-007: the registry sorts by downloads and by review date', async () => {
@@ -1802,19 +1803,19 @@ describe('AdminPluginsPanel toolbar and dialogs', () => {
    await user.click(screen.getByRole('tab', { name: /Discover/ }))
    await screen.findByText('Old Tool')

-    await pickFilter(user, /^Sort:/, /^Most downloads$/)
+    await pickFilter(user, /^Most downloads$/)
    await waitFor(() => {
      const names = screen.getAllByText(/^(Old|New) Tool$/).map(e => e.textContent)
      expect(names[0]).toBe('New Tool')
    })

-    await pickFilter(user, /^Sort:/, /^Recently updated$/)
+    await pickFilter(user, /^Recently updated$/)
    await waitFor(() => {
      const names = screen.getAllByText(/^(Old|New) Tool$/).map(e => e.textContent)
      expect(names[0]).toBe('New Tool')
    })

-    await pickFilter(user, /^Sort:/, /^Name$/)
+    await pickFilter(user, /^Name$/)
    await waitFor(() => {
      const names = screen.getAllByText(/^(Old|New) Tool$/).map(e => e.textContent)
      expect(names[0]).toBe('New Tool')
@@ -1833,7 +1834,7 @@ describe('AdminPluginsPanel toolbar and dialogs', () => {
    await user.click(screen.getByRole('tab', { name: /Discover/ }))
    await screen.findByText('Mapper')

-    await pickFilter(user, /^Type:/, /^Page$/)
+    await pickFilter(user, /^Page$/)
    await waitFor(() => expect(screen.queryByText('Mapper')).not.toBeInTheDocument())
    expect(screen.getByText('Poster')).toBeInTheDocument()

@@ -1962,12 +1963,12 @@ describe('AdminPluginsPanel toolbar and dialogs', () => {
    const { container } = render(<AdminPluginsPanel />)
    await screen.findByText('Alpha Widget')

-    await user.click(screen.getByTitle(/^Type:/))
-    expect(screen.getByRole('button', { name: /^Widget$/ })).toBeInTheDocument()
+    await user.click(filterButton())
+    expect(screen.getByRole('menuitemradio', { name: /^Widget$/ })).toBeInTheDocument()

    const layer = container.querySelector('.fixed.inset-0.z-20') as HTMLElement
    fireEvent.click(layer)
-    await waitFor(() => expect(screen.queryByRole('button', { name: /^Widget$/ })).not.toBeInTheDocument())
+    await waitFor(() => expect(screen.queryByRole('menuitemradio', { name: /^Widget$/ })).not.toBeInTheDocument())
  })
 })

@@ -2004,12 +2005,11 @@ describe('AdminPluginsPanel registry cards and dependency chips', () => {
    await screen.findByText('Alpha Widget')

    await openDiscover(user)
-    await user.click(screen.getByTitle(/^Sort:/))
-    await user.click(screen.getByRole('button', { name: /^Most downloads$/ }))
-    expect(screen.getByTitle(/^Sort: Most downloads$/)).toBeInTheDocument()
-
+    await user.click(filterButton())
+    await user.click(screen.getByRole('menuitemradio', { name: /^Most downloads$/ }))
+    expect(filterButton()).toHaveTextContent('Most downloads')
    await user.click(screen.getByRole('tab', { name: /Installed/ }))
-    await waitFor(() => expect(screen.getByTitle(/^Sort: Name$/)).toBeInTheDocument())
+    await waitFor(() => expect(filterButton()).toHaveTextContent(/Name$/))
  })

  it('FE-W5PLG-017: an outrun release offers the newest compatible version instead of a dead button', async () => {
@@ -2026,9 +2026,8 @@ describe('AdminPluginsPanel registry cards and dependency chips', () => {
    expect(offer).not.toBeDisabled()
    expect(offer).toHaveAttribute('title', expect.stringContaining('3.5.0'))

-    const dead = screen.getByRole('button', { name: /^Incompatible$/ })
-    expect(dead).toBeDisabled()
-    expect(dead.getAttribute('title')).toBeTruthy()
+    // Nothing fits: no dead button any more, but a card that says so before anything installs.
+    expect(screen.getByText(/^Not confirmed for TREK .+ yet$/)).toBeInTheDocument()
  })

  it('FE-W5PLG-018: an already installed registry entry cannot be installed again', async () => {
@@ -2556,7 +2555,7 @@ describe('AdminPluginsPanel — TREK-range bypass (TREK_PLUGINS_IGNORE_TREK_RANG
    expect(await screen.findByText('Version checks off')).toBeInTheDocument()
  })

-  it('FE-PLG-BYPASS-002: offers "Install anyway" for an incompatible entry and asks before installing', async () => {
+  it('FE-PLG-BYPASS-002: offers Install for an incompatible entry and asks before installing', async () => {
    let posted: unknown = null
    bypassPanel([plugin({ id: 'something-else' })], incompatibleEntry())
    server.use(http.post('*/api/admin/plugins/install', async ({ request }) => {
@@ -2566,7 +2565,7 @@ describe('AdminPluginsPanel — TREK-range bypass (TREK_PLUGINS_IGNORE_TREK_RANG
    withToast()
    fireEvent.click(await screen.findByText('Discover'))

-    const btn = await screen.findByRole('button', { name: /^install anyway$/i })
+    const btn = await screen.findByRole('button', { name: /^install$/i })
    expect(btn).toBeEnabled()
    fireEvent.click(btn)

@@ -2585,7 +2584,7 @@ describe('AdminPluginsPanel — TREK-range bypass (TREK_PLUGINS_IGNORE_TREK_RANG
    server.use(http.post('*/api/admin/plugins/install', () => { posted = true; return HttpResponse.json({ id: 'trek-gotify', version: '2.0.0', trekRangeBypassed: null }) }))
    withToast()
    fireEvent.click(await screen.findByText('Discover'))
-    fireEvent.click(await screen.findByRole('button', { name: /^install anyway$/i }))
+    fireEvent.click(await screen.findByRole('button', { name: /^install$/i }))

    const dialog = await screen.findByRole('dialog', { name: /outside its supported trek versions/i })
    fireEvent.click(within(dialog).getByRole('button', { name: /cancel/i }))
@@ -1,10 +1,9 @@
-import { useEffect, useRef, useState, type CSSProperties, type ReactNode } from 'react'
-import { createPortal } from 'react-dom'
+import { useState, type ReactNode } from 'react'
 import {
  Blocks, AlertTriangle, RefreshCw, Trash2, Download, Bug, ShieldCheck, UploadCloud,
-  ArrowUpCircle, Github, ExternalLink, ChevronDown, Check, Lock, Search, Link2, KeyRound, ShieldAlert,
-  SlidersHorizontal, ArrowUpDown, CircleDot, MoreHorizontal, RotateCw, Database,
-  Globe, Info, History, PauseCircle, Puzzle, Bot, Loader2,
+  ArrowUpCircle, Github, ExternalLink, Check, Search, Link2, KeyRound, ShieldAlert,
+  SlidersHorizontal, CircleDot, Database,
+  Globe, History, Puzzle, Bot, Loader2,
 } from 'lucide-react'
 import PluginIcon from '../shared/PluginIcon'
 import { useInstanceSettings } from './useInstanceSettings'
@@ -23,15 +22,17 @@ import {
  SettingsCard, SettingRows, SettingRow, SettingsHint, StatusPill,
  SETTINGS_BUTTON_PRIMARY, SETTINGS_ICON_BUTTON,
 } from '../Settings/settingsKit'
-import { POPOVER } from '../Packing/packingPopoverStyles'
 import {
-  KNOWN_TYPES, PERM_KEYS, blockIsCurrent, dependencyRows, deriveDeps, fingerprint, formatCompactCount,
-  installOffer, isRegistrySourced, parseJson, signatureBlockView, sortLabel, statusLabel,
-  type PluginDep, type PluginRow, type RegistryItem, type SigSubject, type SortKey,
-  type StatusFilter, type T, type TypeFilter, type VersionInfo, type VersionMismatch,
+  KNOWN_TYPES, PERM_KEYS, blockIsCurrent, dependencyRows, fingerprint, formatCompactCount,
+  installOffer, signatureBlockView,
+  type PluginDep, type PluginRow, type RegistryItem, type SigSubject,
+  type T, type VersionInfo, type VersionMismatch,
 } from './plugins/pluginModel'
 import { usePluginDetail } from './plugins/usePluginDetail'
 import { usePluginsAdmin } from './plugins/usePluginsAdmin'
+import PluginFilterMenu from './plugins/PluginFilterMenu'
+import PluginInstalledRow from './plugins/PluginInstalledRow'
+import PluginSecurityDialog from './plugins/PluginSecurityDialog'

 /**
 * Admin → Plugins (#plugins). A full plugin-management surface: a segmented
@@ -42,31 +43,13 @@ import { usePluginsAdmin } from './plugins/usePluginsAdmin'
 * tile; the security section at the bottom explains the model honestly.
 */

-// Runtime health → dot colour on the icon tile.
-const HEALTH: Record<string, string> = {
-  active: 'bg-success',
-  starting: 'bg-info animate-pulse',
-  error: 'bg-danger',
-  inactive: 'bg-content-faint/60',
-  disabled: 'bg-warning',
-  incompatible: 'bg-warning',
-}
-
 /** The head band of a dialog that warns before something happens: a faint wash of the warning tone. */
 const WARN_TINT = 'color-mix(in srgb, var(--warning) 10%, transparent)'
 /** The eyebrow over a block, the size the dialogs' sections use. */
 const EYEBROW = 'm-0 font-geist font-bold uppercase tracking-[.08em] text-content-faint'
-/** A capability or dependency chip on an installed row. */
-const CHIP = 'inline-flex max-w-full items-center gap-1.5 rounded-full border px-2 py-[2px] font-medium'
-const CHIP_NEUTRAL = 'border-edge-faint bg-surface-secondary text-content-secondary'
-const CHIP_NET = 'border-transparent bg-info-soft text-info'
-const CHIP_WARN = 'border-transparent bg-warning-soft text-warning'
 /** A small action inside a row or a card: the kit's button, a size down. */
 const SMALL_BUTTON = 'inline-flex flex-none items-center justify-center gap-1.5 rounded-[10px] bg-surface-card px-2.5 py-1.5 font-semibold text-content shadow-sm ring-1 ring-edge-faint hover:bg-surface-secondary disabled:cursor-default disabled:opacity-50'
 const SMALL_PRIMARY = 'inline-flex flex-none items-center justify-center gap-1.5 rounded-[10px] bg-accent px-3 py-1.5 font-semibold text-accent-text hover:opacity-90 disabled:cursor-default disabled:bg-surface-tertiary disabled:text-content-faint'
-/** A line of state under a row's name: a refused update, a paused one, an error. */
-const ROW_NOTE = 'mt-1.5 flex min-w-0 items-center gap-1.5'
-
 /** A pill that explains itself on hover. */
 function HintPill({ hint, children }: { hint: string; children: ReactNode }) {
  return (
@@ -76,19 +59,6 @@ function HintPill({ hint, children }: { hint: string; children: ReactNode }) {
  )
 }

-function ReviewedBadge({ t }: { t: T }) {
-  return <ShieldCheck size={13} className="text-success shrink-0" aria-label={t('admin.plugins.reviewed')} />
-}
-
-/** Marks a manually-uploaded (sideloaded) plugin: no registry, unsigned, not reviewed. */
-function SideloadedBadge({ t }: { t: T }) {
-  return (
-    <HintPill hint={t('admin.plugins.sideloadedHint')}>
-      <StatusPill tone="warning" icon={<UploadCloud size={11} />}>{t('admin.plugins.sideloaded')}</StatusPill>
-    </HintPill>
-  )
-}
-
 /**
 * Signed / Unsigned, for registry plugins only (see isRegistrySourced).
 *
@@ -113,15 +83,6 @@ function TrustBadge({ signed, t }: { signed: boolean; t: T }) {
  )
 }

-/** Marks a dev-linked plugin: loaded from a local build dir + hot-reloaded (dev only). */
-function DevLinkBadge({ t }: { t: T }) {
-  return (
-    <HintPill hint={t('admin.plugins.devLinkHint')}>
-      <StatusPill icon={<Link2 size={11} />}>{t('admin.plugins.devLinkBadge')}</StatusPill>
-    </HintPill>
-  )
-}
-
 function TypeBadge({ type, t }: { type: string; t: T }) {
  return (
    <span className="inline-flex flex-none items-center rounded-full bg-surface-tertiary px-2 py-[3px] font-geist font-bold uppercase tracking-[.06em] text-content-muted" style={fs(9.5)}>
@@ -145,6 +106,7 @@ export default function AdminPluginsPanel() {
    sort, statusFilter, toggle, typeFilter, uninstallConfirmed, updatable, updateAll, updateAvailable, uploadInputRef,
    uploadPlugin, versionPicker, view,
  } = usePluginsAdmin()
+  const [securityOpen, setSecurityOpen] = useState(false)

  return (
    <div className="relative mb-24 sm:mb-0"
@@ -181,6 +143,9 @@ export default function AdminPluginsPanel() {
        ) : undefined}
        action={ready ? (
          <>
+            <BandButton label={t('admin.plugins.security.short')} onClick={() => setSecurityOpen(true)}>
+              <ShieldCheck size={15} strokeWidth={2} />
+            </BandButton>
            <BandButton label={t('admin.plugins.upload')} onClick={pickUpload} disabled={busy === '__upload'}>
              <UploadCloud size={15} strokeWidth={2} />
            </BandButton>
@@ -242,31 +207,9 @@ export default function AdminPluginsPanel() {
                />
              </label>

-              <FilterMenu id="type" label={t('admin.plugins.filterType')} value={typeFilter} menu={menu} setMenu={setMenu} icon={<SlidersHorizontal size={14} />}
-                options={[
-                  ['all', t('admin.plugins.allTypes')], ['widget', t('admin.plugins.type.widget')],
-                  ['integration', t('admin.plugins.type.integration')], ['page', t('admin.plugins.type.page')],
-                  ['trip-page', t('admin.plugins.type.trip-page')],
-                ]}
-                valueLabel={typeFilter === 'all' ? t('admin.plugins.allTypes') : t(`admin.plugins.type.${typeFilter}` as never)}
-                onPick={v => setTypeFilter(v as TypeFilter)} />
-
-              {view === 'installed' && (
-                <FilterMenu id="status" label={t('admin.plugins.filterStatus')} value={statusFilter} menu={menu} setMenu={setMenu} icon={<CircleDot size={14} />}
-                  options={[
-                    ['all', t('admin.plugins.allStatuses')], ['on', t('admin.plugins.status.active')], ['off', t('admin.plugins.stateOff')],
-                    ['update', t('admin.plugins.filterUpdate')], ['err', t('admin.plugins.status.error')],
-                  ]}
-                  valueLabel={statusLabel(statusFilter, t)}
-                  onPick={v => setStatusFilter(v as StatusFilter)} />
-              )}
-
-              <FilterMenu id="sort" label={t('admin.plugins.sortBy')} value={sort} menu={menu} setMenu={setMenu} icon={<ArrowUpDown size={14} />}
-                options={view === 'discover'
-                  ? [['name', t('admin.plugins.sortName')], ['recent', t('admin.plugins.sortRecent')], ['downloads', t('admin.plugins.sortDownloads')]]
-                  : [['name', t('admin.plugins.sortName')], ['recent', t('admin.plugins.sortRecent')], ['updates', t('admin.plugins.sortUpdates')]]}
-                valueLabel={sortLabel(sort, t)}
-                onPick={v => setSort(v as SortKey)} />
+              <PluginFilterMenu t={t} view={view} typeFilter={typeFilter} setTypeFilter={setTypeFilter}
+                statusFilter={statusFilter} setStatusFilter={setStatusFilter} sort={sort} setSort={setSort}
+                menu={menu} setMenu={setMenu} />
            </div>

            {view === 'discover' ? (
@@ -299,7 +242,7 @@ export default function AdminPluginsPanel() {
                ) : (
                  <SettingRows>
                    {shownInstalled.map(p => (
-                      <InstalledRow key={p.id} p={p} t={t} busy={busy} menu={menu} setMenu={setMenu}
+                      <PluginInstalledRow key={p.id} p={p} t={t} busy={busy} menu={menu} setMenu={setMenu}
                        hasUpdate={updateAvailable(p)} latestVer={latest[p.id]}
                        newerIncompatible={newerIncompatible(p)}
                        blocked={blockIsCurrent(p, latest[p.id])}
@@ -320,7 +263,7 @@ export default function AdminPluginsPanel() {
        )}
      </SettingsCard>

-      <SecurityInfo t={t} />
+      {securityOpen && <PluginSecurityDialog t={t} onClose={() => setSecurityOpen(false)} />}

      {/* Registry detail dialog */}
      {detailFor && (
@@ -438,268 +381,6 @@ function SegBtn({ active, onClick, label, count }: { active: boolean; onClick: (
  )
 }

-/** Re-renders while the page moves under an open, portaled menu, so it stays pinned to its trigger. */
-function useFollowTrigger(open: boolean) {
-  const [, reanchor] = useState(0)
-  useEffect(() => {
-    if (!open) return
-    const onMove = () => reanchor(n => n + 1)
-    window.addEventListener('scroll', onMove, true)
-    window.addEventListener('resize', onMove)
-    return () => {
-      window.removeEventListener('scroll', onMove, true)
-      window.removeEventListener('resize', onMove)
-    }
-  }, [open])
-}
-
-function FilterMenu({ id, label, valueLabel, options, onPick, value, menu, setMenu, icon }: {
-  id: string; label: string; valueLabel: string
-  options: Array<[string, string]>; onPick: (v: string) => void; value: string
-  menu: string | null; setMenu: (v: string | null) => void; icon?: ReactNode
-}) {
-  const open = menu === id
-  const active = value !== options[0]?.[0]
-  const btnRef = useRef<HTMLButtonElement>(null)
-  // Portaled like the row menu: the card around the toolbar clips what overflows it.
-  useFollowTrigger(open)
-  return (
-    <div className="relative flex-none">
-      <button type="button" ref={btnRef} onClick={() => setMenu(open ? null : id)} title={`${label}: ${valueLabel}`} aria-expanded={open}
-        className={`inline-flex h-9 items-center gap-1.5 whitespace-nowrap rounded-[10px] border bg-surface-card px-3 text-content-secondary transition-colors hover:text-content ${
-          active ? 'border-[color:var(--text-primary)]' : 'border-edge'}`}
-        style={fs(12.5, 'body')}>
-        <span className="flex-none text-content-faint">{icon}</span>
-        <span>{label}: </span>
-        <span className="font-semibold text-content">{valueLabel}</span>
-        <ChevronDown size={13} className={`flex-none text-content-faint transition-transform ${open ? 'rotate-180' : ''}`} />
-      </button>
-      {open && createPortal(
-        <div className="min-w-[200px] max-w-[calc(100vw-2rem)]" style={{ ...POPOVER, ...anchorMenu(btnRef.current) }}>
-          {options.map(([v, lbl]) => (
-            <button type="button" key={v} onClick={() => { onPick(v); setMenu(null) }}
-              className={`${MENU_ITEM} ${value === v ? 'font-semibold text-content' : 'text-content-secondary'}`} style={fs(12.5, 'body')}>
-              <span className="min-w-0 flex-1 truncate text-start">{lbl}</span>
-              <Check size={14} className={`flex-none text-content-muted ${value === v ? 'opacity-100' : 'opacity-0'}`} />
-            </button>
-          ))}
-        </div>,
-        document.body,
-      )}
-    </div>
-  )
-}
-
-function InstalledRow({ p, t, busy, menu, setMenu, hasUpdate, latestVer, newerIncompatible, blocked, onToggle, onUpdate, onRestart, onChangeVersion, onResume, onReviewBlock, onErrors, onEgress, onSettings, onUninstall }: {
-  p: PluginRow; t: T; busy: string | null; menu: string | null; setMenu: (v: string | null) => void
-  hasUpdate: boolean; latestVer?: string; newerIncompatible: { version: string; range: string } | null; blocked: boolean
-  onToggle: () => void; onUpdate: () => void; onRestart: () => void; onChangeVersion: () => void; onResume: () => void; onReviewBlock: () => void
-  onErrors: () => void; onEgress: () => void; onSettings: () => void; onUninstall: () => void
-}) {
-  const caps = deriveCaps(parseJson<string[]>(p.permissions, []), parseJson<{ widget?: { slot?: string } }>(p.capabilities, {}), t)
-  const deps = deriveDeps(p, t)
-  const menuOpen = menu === `row:${p.id}`
-  const menuBtnRef = useRef<HTMLButtonElement>(null)
-  const working = busy === p.id
-  const on = p.enabled === 1 && p.status !== 'error'
-
-  // The menu is portaled to <body> and positioned `fixed` against the ⋯ button,
-  // because the row's ancestor (PageSidebar) is `overflow-hidden` and would clip
-  // an in-flow `absolute` menu — losing Delete on the lower rows of a long list.
-  // Re-anchor while the page moves under it.
-  useFollowTrigger(menuOpen)
-
-  const hostCount = p.egressHostCount ?? 0
-
-  return (
-    <div className={`group relative flex items-start gap-3 px-3.5 py-3 transition-colors hover:bg-surface-secondary ${working ? 'opacity-60' : ''}`}>
-      <div className="relative mt-0.5 flex-none">
-        <span className="grid h-10 w-10 place-items-center rounded-[12px] border border-edge-faint bg-surface-secondary">
-          <PluginIcon name={p.icon} size={19} className="text-content-secondary" />
-        </span>
-        <Tooltip label={t(`admin.plugins.status.${p.status}` as never)}>
-          <span className={`absolute -bottom-0.5 -end-0.5 h-3 w-3 rounded-full ring-2 ring-surface-card ${HEALTH[p.status] || HEALTH.inactive}`} />
-        </Tooltip>
-      </div>
-
-      <div className="min-w-0 flex-1">
-        <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
-          <span className="min-w-0 truncate font-semibold tracking-[-.006em] text-content" style={fs(13.5, 'body')}>{p.name}</span>
-          {p.version && <span className="font-geist font-medium tabular-nums text-content-faint" style={fs(11)}>v{p.version}</span>}
-          {p.reviewed_at && <ReviewedBadge t={t} />}
-          {p.source_repo === 'local:upload' && <SideloadedBadge t={t} />}
-          {p.source_repo === 'local:link' && <DevLinkBadge t={t} />}
-          {/* Registry plugins only — a sideloaded/dev-linked plugin already says something
-              strictly stronger, and stacking "Unsigned" on top of it just dilutes the amber. */}
-          {isRegistrySourced(p.source_repo) && <TrustBadge signed={!!p.signed} t={t} />}
-        </div>
-        {p.description && <p className="m-0 mt-0.5 truncate text-content-muted" style={fs(12, 'body')}>{p.description}</p>}
-        {/* A refused update leaves a WORKING plugin pinned at its old version — so this is
-            its own row state, not an error state, and it persists until it is resolved
-            rather than dying with the toast that first reported it. */}
-        {blocked && p.updateBlock && (
-          <div className={`${ROW_NOTE} text-warning`} style={fs(11.5)}>
-            <ShieldAlert size={13} className="flex-none" />
-            <span className="truncate">{t('admin.plugins.updateBlocked', { reason: p.updateBlock.detail ?? p.updateBlock.code })}</span>
-            <button type="button" onClick={onReviewBlock}
-              className="flex-none font-semibold underline underline-offset-2 hover:opacity-80">
-              {t('admin.plugins.reviewBlock')}
-            </button>
-          </div>
-        )}
-        {/* A newer version this TREK can't run — informational, never a button: the fix
-            is a TREK upgrade, so the row must not nag or offer a doomed install. */}
-        {newerIncompatible && (
-          <div className={`${ROW_NOTE} text-content-faint`} style={fs(11.5)}>
-            <Info size={13} className="flex-none" />
-            <span className="truncate">{t('admin.plugins.newerNeedsTrek', { version: newerIncompatible.version, range: newerIncompatible.range })}</span>
-          </div>
-        )}
-        {/* Held: the admin deliberately installed a non-latest version, so updates are
-            paused rather than nagged — resuming is one click, right where the pause shows. */}
-        {p.updateHold && (
-          <div className={`${ROW_NOTE} text-content-faint`} style={fs(11.5)}>
-            <PauseCircle size={13} className="flex-none" />
-            <span className="truncate">{t('admin.plugins.updatesHeld', { version: p.version ?? '' })}</span>
-            <button type="button" onClick={onResume} disabled={working}
-              className="flex-none font-semibold text-content-secondary underline underline-offset-2 hover:opacity-80 disabled:opacity-50">
-              {t('admin.plugins.resumeUpdates')}
-            </button>
-          </div>
-        )}
-        {p.status === 'error' && p.last_error ? (
-          <div className={`${ROW_NOTE} text-danger`} style={fs(11.5)}>
-            <AlertTriangle size={13} className="flex-none" /><span className="truncate">{p.last_error}</span>
-          </div>
-        ) : (caps.length > 0 || p.operatorEgress) && (
-          <div className="mt-2 flex flex-wrap items-center gap-1.5">
-            {caps.map((c, i) => (
-              <span key={i} className={`${CHIP} ${c.net ? CHIP_NET : CHIP_NEUTRAL}`} style={fs(11)}>
-                <c.icon size={12} className={c.net ? 'text-info' : 'text-content-muted'} /><span className="truncate">{c.label}</span>
-              </span>
-            ))}
-            {/* This plugin talks to a service only the OPERATOR can name (a self-hosted
-                Gotify/ntfy), so its manifest can't list the host — the admin adds it.
-                Actionable, and warning-toned until at least one host exists, because
-                until then the plugin cannot reach anything and looks silently broken. */}
-            {p.operatorEgress && (
-              <Tooltip label={t('admin.plugins.allowedHosts.hint')}>
-                <button type="button" onClick={onEgress}
-                  className={`${CHIP} ${hostCount > 0 ? CHIP_NET : CHIP_WARN} hover:opacity-80`} style={fs(11)}>
-                  <Globe size={12} />
-                  {hostCount > 0
-                    ? t('admin.plugins.allowedHosts.count', { n: hostCount })
-                    : t('admin.plugins.allowedHosts.add')}
-                </button>
-              </Tooltip>
-            )}
-          </div>
-        )}
-        {deps.length > 0 && (
-          <div className="mt-1.5 flex flex-wrap items-center gap-1.5">
-            {deps.map((d, i) => (
-              <span key={i} className={`${CHIP} ${d.blocked || d.warn ? CHIP_WARN : CHIP_NEUTRAL}`} style={fs(11)}>
-                <d.icon size={12} className={d.blocked || d.warn ? 'text-warning' : 'text-content-muted'} /><span className="truncate">{d.label}</span>
-              </span>
-            ))}
-          </div>
-        )}
-      </div>
-
-      <div className="flex flex-none items-center gap-2 self-center">
-        {hasUpdate && (
-          <button type="button" onClick={onUpdate} disabled={working}
-            className="inline-flex items-center gap-1.5 rounded-full bg-warning-soft px-2.5 py-1 font-semibold text-warning hover:opacity-90 disabled:opacity-50"
-            style={fs(11.5)}>
-            <ArrowUpCircle size={13} /> <span>{t('admin.plugins.updateTo', { version: latestVer })}</span>
-          </button>
-        )}
-        <span className={`min-w-[42px] text-end font-medium ${on ? 'text-content-secondary' : 'text-content-faint'}`} style={fs(12)}>
-          {p.enabled === 1 ? t('admin.plugins.status.active') : t('admin.plugins.stateOff')}
-        </span>
-        <ToggleSwitch on={p.enabled === 1} label={t('admin.plugins.enabledToggle')} onToggle={onToggle} />
-        <div className="relative">
-          <Tooltip label={t('admin.table.actions')} disabled={menuOpen}>
-            <button type="button" ref={menuBtnRef} data-testid={`plugin-row-menu-btn-${p.id}`} onClick={() => setMenu(menuOpen ? null : `row:${p.id}`)}
-              aria-expanded={menuOpen} aria-label={t('admin.table.actions')}
-              className={`grid h-8 w-8 place-items-center rounded-[10px] transition-colors ${menuOpen ? 'bg-surface-card text-content shadow-sm ring-1 ring-edge-faint' : 'text-content-faint hover:bg-surface-card hover:text-content'}`}>
-              <MoreHorizontal size={17} />
-            </button>
-          </Tooltip>
-          {menuOpen && createPortal(
-            <div data-testid={`plugin-row-menu-${p.id}`} style={{ ...POPOVER, ...anchorMenu(menuBtnRef.current) }}
-              className="min-w-[200px]">
-              {p.enabled === 1 && (
-                <MenuItem icon={<RotateCw size={14} />} label={t('admin.plugins.restart')} onClick={onRestart} />
-              )}
-              {/* A plugin gets the item if it declares scope:'instance' fields OR actions —
-                  an action-only plugin still needs the dialog to run its buttons. */}
-              {((p.instanceSettingsCount ?? 0) > 0 || (p.instanceActionsCount ?? 0) > 0) && (
-                <MenuItem icon={<SlidersHorizontal size={14} />} label={t('admin.plugins.instanceSettings')} onClick={onSettings} />
-              )}
-              <MenuItem icon={<Bug size={14} />} label={t('admin.plugins.viewErrors')} onClick={onErrors} />
-              {/* Only a plugin that DECLARED operatorEgress gets the item — an admin must
-                  never be invited to widen egress for a plugin that didn't ask for it
-                  (same rule the row's egress chip follows). */}
-              {p.operatorEgress && (
-                <MenuItem icon={<Globe size={14} />} label={t('admin.plugins.allowedHosts')} onClick={onEgress} />
-              )}
-              {/* Registry plugins only — a sideload/dev-link has no registry versions to pick from. */}
-              {isRegistrySourced(p.source_repo) && (
-                <MenuItem icon={<History size={14} />} label={t('admin.plugins.changeVersion')} onClick={onChangeVersion} />
-              )}
-              {p.source_repo && p.source_repo !== 'local:upload' && p.source_repo !== 'local:link' && (
-                <>
-                  <a href={`https://github.com/${p.source_repo}`} target="_blank" rel="noreferrer" onClick={() => setMenu(null)}
-                    className={`${MENU_ITEM} text-content-secondary`} style={fs(12.5, 'body')}>
-                    <span className="flex w-4 flex-none justify-center text-content-muted"><Github size={14} /></span> {t('admin.plugins.sourceRepo')}
-                  </a>
-                  <a href={`https://github.com/${p.source_repo}/issues`} target="_blank" rel="noreferrer" onClick={() => setMenu(null)}
-                    className={`${MENU_ITEM} text-content-secondary`} style={fs(12.5, 'body')}>
-                    <span className="flex w-4 flex-none justify-center text-content-muted"><CircleDot size={14} /></span> {t('admin.plugins.reportIssue')}
-                  </a>
-                </>
-              )}
-              <div className="mx-1.5 my-1 h-px bg-edge-faint" />
-              <MenuItem icon={<Trash2 size={14} />} label={t('common.delete')} danger onClick={onUninstall} />
-            </div>,
-            document.body,
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-/** Tallest the ⋯ menu gets (6 items + divider + padding). Drives the flip. */
-const ROW_MENU_MAX_H = 260
-
-/** Pin a portaled menu to the right edge of its trigger, flipping up when the bottom is tight. */
-function anchorMenu(trigger: HTMLElement | null): CSSProperties {
-  const r = trigger?.getBoundingClientRect()
-  if (!r) return { position: 'fixed', top: 0, right: 0, zIndex: 100 }
-  const spaceBelow = window.innerHeight - r.bottom
-  const openUp = spaceBelow < ROW_MENU_MAX_H && r.top > spaceBelow
-  return {
-    position: 'fixed',
-    right: Math.max(8, window.innerWidth - r.right),
-    ...(openUp ? { bottom: window.innerHeight - r.top + 4 } : { top: r.bottom + 4 }),
-    zIndex: 100,
-  }
-}
-
-/** One entry of a popover menu, in the packing popovers' shape. */
-const MENU_ITEM = 'flex w-full items-center gap-2.5 rounded-[9px] px-2.5 py-2 font-medium transition-colors hover:bg-surface-tertiary'
-
-function MenuItem({ icon, label, onClick, danger }: { icon: ReactNode; label: string; onClick: () => void; danger?: boolean }) {
-  return (
-    <button type="button" onClick={onClick}
-      className={`${MENU_ITEM} ${danger ? 'text-danger hover:bg-danger-soft' : 'text-content-secondary'}`} style={fs(12.5, 'body')}>
-      <span className={`flex w-4 flex-none justify-center ${danger ? 'text-danger' : 'text-content-muted'}`}>{icon}</span> {label}
-    </button>
-  )
-}
-
 function Screenshot({ url, className, iconSize = 28 }: { url: string | null; className: string; iconSize?: number }) {
  const [failed, setFailed] = useState(false)
  return (
@@ -751,6 +432,16 @@ function RegistryGrid({ items, onInstall, onOpenDetail, busy, t, installedIds, f
                  <StatusPill icon={<ShieldCheck size={11} className="text-success" />}>{t('admin.plugins.reviewed')}</StatusPill>
                </span>
              )}
+              {/* Says up front that this one has not been confirmed for the TREK it would run on,
+                  so "Install" never reads as a plain install; the dialog explains the risk. */}
+              {!installed && offer.warn && (
+                // Solid, not the soft pill "Reviewed" uses: it has to stand out on any screenshot.
+                <span className="absolute start-2.5 top-2.5 inline-flex max-w-[62%] items-center gap-1 rounded-full bg-warning px-2 py-[3px] font-geist font-semibold text-[color:var(--surface-card)] shadow-md"
+                  style={fs(11)}>
+                  <AlertTriangle size={11} className="flex-none" />
+                  <span className="truncate">{t('admin.plugins.untestedChip', { host: offer.warn.hostVersion })}</span>
+                </span>
+              )}
              <span className="absolute -bottom-4 start-3.5 z-[1] grid h-10 w-10 place-items-center rounded-[12px] border border-edge-faint bg-surface-card shadow-sm">
                <PluginIcon name={item.icon} size={20} className="text-content-secondary" />
              </span>
@@ -829,8 +520,8 @@ function Tile({ children, warn }: { children: ReactNode; warn?: boolean }) {
 * The TREK_PLUGINS_IGNORE_TREK_RANGE warning (copy and modes from useRangeBypass). Its own
 * component rather than ConfirmDialog because the notice mode has no cancel button.
 */
-function RangeBypassDialog({ copy: { title, body, confirm }, onConfirm, onClose, t }: {
-  copy: { title: string; body: string; confirm: boolean }; onConfirm: () => void; onClose: () => void; t: T
+function RangeBypassDialog({ copy: { title, body, confirm, confirmLabel }, onConfirm, onClose, t }: {
+  copy: { title: string; body: string; confirm: boolean; confirmLabel: string }; onConfirm: () => void; onClose: () => void; t: T
 }) {
  return (
    <DialogShell
@@ -844,7 +535,7 @@ function RangeBypassDialog({ copy: { title, body, confirm }, onConfirm, onClose,
          {confirm ? (
            <>
              <DialogButton onClick={onClose}>{t('common.cancel')}</DialogButton>
-              <DialogButton variant="primary" onClick={onConfirm}>{t('admin.plugins.installAnyway')}</DialogButton>
+              <DialogButton variant="primary" onClick={onConfirm}>{confirmLabel}</DialogButton>
            </>
          ) : (
            <DialogButton variant="primary" onClick={onClose}>{t('common.ok')}</DialogButton>
@@ -1495,45 +1186,3 @@ function DependencyResolveDialog({ data, t, busy, installedIds, onDownload, onCl
    </DialogShell>
  )
 }
-
-// Footer: a plain-language note on what "Reviewed" means, plus a collapsible
-// panel that lays out how plugins are contained, the limits, and the worst case.
-function SecurityInfo({ t }: { t: T }) {
-  const [open, setOpen] = useState(false)
-  const sections: Array<[string, string]> = [
-    ['admin.plugins.security.isolationTitle', 'admin.plugins.security.isolationBody'],
-    ['admin.plugins.security.permsTitle', 'admin.plugins.security.permsBody'],
-    ['admin.plugins.security.limitsTitle', 'admin.plugins.security.limitsBody'],
-    ['admin.plugins.security.worstTitle', 'admin.plugins.security.worstBody'],
-    ['admin.plugins.security.reviewedTitle', 'admin.plugins.security.reviewedBody'],
-    ['admin.plugins.security.signedTitle', 'admin.plugins.security.signedBody'],
-    ['admin.plugins.security.trustTitle', 'admin.plugins.security.trustBody'],
-  ]
-  return (
-    <SettingsCard
-      icon={Lock}
-      title={(
-        <button type="button" onClick={() => setOpen(o => !o)} aria-expanded={open}
-          className="inline-flex max-w-full items-center gap-1.5 text-start font-bold text-content hover:opacity-80">
-          <span className="truncate">{t('admin.plugins.security.title')}</span>
-          <ChevronDown size={15} className={`flex-none text-content-faint transition-transform ${open ? 'rotate-180' : ''}`} />
-        </button>
-      )}
-    >
-      <div className="flex items-start gap-2.5">
-        <ShieldCheck size={14} className="mt-0.5 flex-none text-content-faint" />
-        <SettingsHint>{t('admin.plugins.reviewedMeaning')}</SettingsHint>
-      </div>
-      {open && (
-        <div className="grid gap-2.5 sm:grid-cols-2">
-          {sections.map(([h, b]) => (
-            <div key={h} className="rounded-[12px] border border-edge-faint bg-surface-card px-3.5 py-3">
-              <h4 className="m-0 font-semibold text-content" style={fs(12.5, 'body')}>{t(h as never)}</h4>
-              <p className="m-0 mt-1 leading-relaxed text-content-muted" style={fs(12, 'body')}>{t(b as never)}</p>
-            </div>
-          ))}
-        </div>
-      )}
-    </SettingsCard>
-  )
-}
@@ -102,6 +102,13 @@ export default function GitHubPanel({ isPrerelease = false }: { isPrerelease?: b
          </ul>
        );
      }
+      if (block.kind === 'h5') {
+        return (
+          <h5 key={idx} className="mb-1 mt-3 font-semibold text-content first:mt-0" style={fs(12.5, 'body')}>
+            {block.text}
+          </h5>
+        );
+      }
      if (block.kind === 'h4') {
        return (
          <h4 key={idx} className="mb-1 mt-3 font-geist font-bold uppercase tracking-[.08em] text-content-faint first:mt-0" style={fs(10)}>
@@ -0,0 +1,109 @@
+import { ChevronRight, Settings2, Sparkles } from 'lucide-react';
+import React from 'react';
+import { useTranslation } from '../../../i18n';
+import { StatusPill } from '../../Settings/settingsKit';
+import { fs } from '../../shared/DialogShell';
+import AddonSubRow from '../AddonSubRow';
+import { type Addon, getAddonLabel } from './addonModel';
+import { AI_ADDON_ICONS, type AiAddonId } from './aiAddons';
+import AiSettingsDialog from './AiAdminConfig';
+import { useAiAddonTile } from './useAiAddonTile';
+
+/**
+ * The AI addons as one tile at the head of the integration column: the
+ * assistant, AI parsing and MCP as switches in its shelf, and one button to
+ * the dialog that holds their settings, so a page with all three on stays as
+ * short as one with none.
+ */
+export default function AiAddonTile({
+  addons,
+  onToggle,
+}: {
+  addons: Addon[];
+  onToggle: (addon: Addon) => void;
+}): React.ReactElement {
+  const { t } = useTranslation();
+  const tile = useAiAddonTile(addons);
+  const anyOn = tile.enabledCount > 0;
+  return (
+    <article className="px-3.5 py-3 transition-colors duration-150 focus-within:bg-surface-secondary">
+      <div className="flex items-start gap-3">
+        <div
+          className={`grid h-9 w-9 flex-none place-items-center rounded-[10px] transition-colors ${
+            anyOn
+              ? 'bg-surface-card text-content shadow-sm ring-1 ring-edge-faint'
+              : 'bg-surface-tertiary text-content-faint'
+          }`}
+        >
+          <Sparkles size={18} />
+        </div>
+        <div className="min-w-0 flex-1 pt-px">
+          <h4 className="m-0 truncate font-semibold text-content" style={fs(13, 'body')}>
+            {t('admin.addons.ai.name')}
+          </h4>
+          <p
+            className={`m-0 mt-0.5 line-clamp-2 leading-snug ${anyOn ? 'text-content-muted' : 'text-content-faint'}`}
+            style={fs(11.5)}
+          >
+            {t('admin.addons.ai.description')}
+          </p>
+        </div>
+        <div className="flex-none pt-1">
+          <StatusPill tone={anyOn ? 'success' : 'neutral'}>
+            {tile.enabledCount}/{addons.length}
+          </StatusPill>
+        </div>
+      </div>
+
+      <div className="mt-3 overflow-hidden rounded-[12px] border border-edge-faint bg-surface-secondary">
+        <ul className="m-0 list-none divide-y divide-edge-faint p-0">
+          {addons.map((addon) => {
+            const Icon = AI_ADDON_ICONS[addon.id as AiAddonId];
+            const label = getAddonLabel(t, addon);
+            return (
+              <AddonSubRow
+                key={addon.id}
+                icon={<Icon size={14} />}
+                title={label.name}
+                description={label.description}
+                badge={addon.id === 'ai_assistant' ? <BetaBadge label={t('assistant.setup.beta')} /> : undefined}
+                enabled={addon.enabled}
+                onToggle={() => onToggle(addon)}
+              />
+            );
+          })}
+        </ul>
+        {tile.canSetUp && (
+          <button
+            type="button"
+            onClick={tile.openDialog}
+            className="flex min-h-[44px] w-full items-center gap-2.5 border-t border-edge-faint px-3 py-1.5 text-start transition-colors hover:bg-surface-tertiary focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-accent"
+          >
+            <span className="grid h-6 w-6 flex-none place-items-center text-content-muted">
+              <Settings2 size={14} />
+            </span>
+            <span className="min-w-0 flex-1 truncate font-medium text-content" style={fs(12.5, 'body')}>
+              {t('admin.addons.ai.setup')}
+            </span>
+            <ChevronRight size={15} strokeWidth={2.2} className="flex-none text-content-faint rtl:rotate-180" />
+          </button>
+        )}
+      </div>
+
+      {tile.dialogOpen && <AiSettingsDialog addons={addons} onClose={tile.closeDialog} />}
+    </article>
+  );
+}
+
+/** The assistant is still young; its switch says so with a small accent pill. */
+function BetaBadge({ label }: { label: string }): React.ReactElement {
+  return (
+    <span
+      className="inline-flex flex-none items-center gap-1 rounded-full bg-accent px-[7px] py-[2px] font-geist font-bold uppercase leading-none tracking-[.08em] text-accent-text shadow-sm"
+      style={fs(9)}
+    >
+      <Sparkles size={9} strokeWidth={2.6} aria-hidden />
+      {label}
+    </span>
+  );
+}
--- a/Show More
+++ b/Show More