diff --git a/AGENTS.md b/AGENTS.md
index 09fbde0..e5b7a10 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -31,7 +31,7 @@ cargo test --manifest-path src-tauri/Cargo.toml
   or an agent in Boite). It never reads Boite's files beyond `core.json`.
 - Tests and manual runs use a throwaway core on a temporary data folder, never
   the data of a Boite someone uses.
-- Native commands check which webview calls them (`only_bots`,
-  `only_companion`), and every command is listed in
+- Native commands check which webview calls them (`only_companion`: the
+  companion's window is Bots's only page), and every command is listed in
   `src-tauri/permissions/bots.toml` and covered by `src-tauri/src/acl.rs`.
 - Quit exits with code 0; any other exit tells Boite to start Bots again.
diff --git a/README.md b/README.md
index 1c85f08..8957dbd 100644
--- a/README.md
+++ b/README.md
@@ -132,10 +132,10 @@ A pomodoro or a timer sits beside it.
 
 ### Settings
 
-Everything else is in **Settings**, from the tray icon: where the robots sit and on which screen, the shortcut, what the pill shows, the mascot and the agents on screen, quotas, pomodoro, missions, sounds and reminders. In English and French.
+Everything else is in **Settings**, a panel that grows out of the open island under its bar, from the bar's gear or the tray icon: where the robots sit and on which screen, the shortcut, what the pill shows, the mascot and the agents on screen, quotas, pomodoro, missions, sounds and reminders. In English and French.
 
 <p align="center">
-  <img src="docs/media/settings.png" width="400" alt="The B.O.T.S settings: where the robots sit, open on hover, pill at rest, screen, shortcut and the mascot">
+  <img src="docs/media/settings.png" width="640" alt="The B.O.T.S settings under the open island's bar: a rail of sections, and Place with where the robots sit, the screen, the shortcut, open on hover, the pill at rest and the bar's edit mode">
 </p>
 
 ## Install
@@ -173,7 +173,7 @@ cd src-tauri && cargo test && cargo clippy --all-targets -- -D warnings
 
 The demo runs the robots on Boite's in-memory fake core: no Boite needed.
 
-- In a browser: `bun run dev`, then open `http://localhost:5174/?fake=1` (add `&hud=1` for busy agents and quotas, or open `?view=settings&fake=1` for the settings).
+- In a browser: `bun run dev`, then open `http://localhost:5174/?fake=1` (add `&hud=1` for busy agents and quotas, or `&pose=settings&section=crew` for the settings panel on a section).
 - In the desktop window: `BOTS_DEMO=1 bun run tauri dev` (`BOTS_DEMO=hud` for the busy version). Development builds only.
 
 In the browser, a few more parameters set a scene for captures: `pose=collapsed|peek|open|deck|desktop|away`, `tab=threads|today|chat|stats|music|apps|clipboard|wallpaper|system`, `calm=1` to answer the starting requests, `music=playing&lyrics=1`, `rest=live|quota|music|timer|robot`, `timer=1`, `todo=1`, `mission=ask|list`, `source=engine|recent|folder` for the wallpapers, `bar=custom` and `edit=1` for the bar, and more. [`src/lib/island/pose.ts`](src/lib/island/pose.ts) lists them all. The pictures of this README were taken that way, with the English interface.
diff --git a/docs/media/settings.png b/docs/media/settings.png
index 156d269..2223e6d 100644
Binary files a/docs/media/settings.png and b/docs/media/settings.png differ
diff --git a/src-tauri/capabilities/settings.json b/src-tauri/capabilities/settings.json
deleted file mode 100644
index 65c7984..0000000
--- a/src-tauri/capabilities/settings.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "$schema": "../gen/schemas/desktop-schema.json",
-  "identifier": "settings",
-  "description": "The settings window may connect to the core and list the screens. Remote origins receive nothing.",
-  "webviews": ["settings"],
-  "permissions": ["allow-settings-ui", "core:event:default"]
-}
diff --git a/src-tauri/permissions/bots.toml b/src-tauri/permissions/bots.toml
index 0293698..9de4658 100644
--- a/src-tauri/permissions/bots.toml
+++ b/src-tauri/permissions/bots.toml
@@ -1,6 +1,6 @@
 [[permission]]
 identifier = "allow-companion-ui"
-description = "Allows the companion to connect to the core, place its window on the desktop or as the island, take clicks where it draws, read the music playing, register its shortcut, see the screen when asked, take the keyboard when files are dropped on it, open its settings and name the tray; and, for the deck's computer tabs, read the system's numbers, close a process, lock, sleep, restart or shut down the computer, list and open the Start menu's apps, keep a clipboard history in memory and copy an entry back, list and set wallpapers, and drive Wallpaper Engine; and, for the island's bar, open a web link the user added there."
+description = "Allows the companion to connect to the core, place its window on the desktop or as the island, take clicks where it draws, read the music playing, register its shortcut, see the screen when asked, take the keyboard when files are dropped on it, open its settings panel and name the tray; and, for the deck's computer tabs, read the system's numbers, close a process, lock, sleep, restart or shut down the computer, list and open the Start menu's apps, keep a clipboard history in memory and copy an entry back, list and set wallpapers, and drive Wallpaper Engine; and, for the island's bar, open a web link the user added there."
 commands.allow = [
   "core_endpoint",
   "companion_monitors",
@@ -42,7 +42,3 @@ commands.allow = [
   "computer_engine_control",
 ]
 
-[[permission]]
-identifier = "allow-settings-ui"
-description = "Allows the settings window to connect to the core and list the screens the companion can sit on."
-commands.allow = ["core_endpoint", "companion_monitors"]
diff --git a/src-tauri/src/acl.rs b/src-tauri/src/acl.rs
index ed7df57..4e7bb6b 100644
--- a/src-tauri/src/acl.rs
+++ b/src-tauri/src/acl.rs
@@ -34,14 +34,11 @@ mod tests {
     }
 
     #[test]
-    fn the_settings_window_connects_and_lists_screens_but_does_not_drive_the_companion() {
+    fn the_settings_live_in_the_companion_and_no_settings_webview_is_granted_anything() {
         let mut context: tauri::Context<tauri::test::MockRuntime> = crate::bots_context();
         let authority = context.runtime_authority_mut();
-        for command in ["core_endpoint", "companion_monitors", "plugin:event|listen", "plugin:event|unlisten"] {
-            assert!(authority.resolve_access(command, "settings", "settings", &Origin::Local).is_some(), "settings cannot invoke {command}");
-        }
-        for command in ["companion_place", "island_place", "companion_capture", "companion_keep", "companion_configure", "bots_tray_labels", "bots_settings"] {
-            assert!(authority.resolve_access(command, "settings", "settings", &Origin::Local).is_none(), "settings can invoke {command}");
+        for command in COMPANION {
+            assert!(authority.resolve_access(command, "settings", "settings", &Origin::Local).is_none(), "a settings webview can invoke {command}");
         }
     }
 }
diff --git a/src-tauri/src/companion_window.rs b/src-tauri/src/companion_window.rs
index 7be6ab4..86f8d40 100644
--- a/src-tauri/src/companion_window.rs
+++ b/src-tauri/src/companion_window.rs
@@ -254,7 +254,7 @@ fn place<R: Runtime>(window: &WebviewWindow<R>, monitor: Option<&str>, anchor: A
 
 /// The page's query: `BOTS_DEMO=1` runs a development build on the fake core,
 /// `BOTS_DEMO=hud` with the HUD demo seeded too. A release build ignores it.
-pub fn demo_query() -> &'static str {
+fn demo_query() -> &'static str {
     if !cfg!(debug_assertions) { return ""; }
     match std::env::var("BOTS_DEMO").as_deref() {
         Ok("hud") => "fake=1&hud=1",
@@ -428,12 +428,18 @@ fn watch<R: Runtime>(app: AppHandle<R>, shared: Shared, mine: u64) {
 /// The shortcut, or Bots launched again: the companion comes forward, over a
 /// full-screen app too, and the page opens its question bar.
 pub fn summon<R: Runtime>(app: &AppHandle<R>) {
-    let Some(window) = app.get_webview_window(LABEL) else { return };
+    if let Some(window) = bring_forward(app) { let _ = window.emit("companion://summon", ()); }
+}
+
+/// The companion's window over the others, with the keyboard, back from
+/// hiding for a full-screen app: for the shortcut and for Settings.
+pub fn bring_forward<R: Runtime>(app: &AppHandle<R>) -> Option<WebviewWindow<R>> {
+    let window = app.get_webview_window(LABEL)?;
     app.state::<CompanionState>().shared.hidden.store(false, Ordering::Release);
     let _ = window.show();
     crate::platform::keep_on_top(&window);
     let _ = window.set_focus();
-    let _ = window.emit("companion://summon", ());
+    Some(window)
 }
 
 /// Opens the companion, at start. It stays until Bots quits: closing it is
@@ -465,7 +471,7 @@ fn window_of(app: &AppHandle) -> Result<WebviewWindow, String> {
 /// The screens connected now, for the setting that picks one.
 #[tauri::command]
 pub async fn companion_monitors(app: AppHandle, webview: Webview) -> Result<Vec<MonitorInfo>, String> {
-    crate::only_bots(&webview)?;
+    only_companion(&webview)?;
     let primary = app.primary_monitor().map_err(|error| error.to_string())?.map(|monitor| monitor_name(&monitor));
     Ok(app.available_monitors().map_err(|error| error.to_string())?.into_iter().map(|monitor| {
         let name = monitor_name(&monitor);
diff --git a/src-tauri/src/endpoint.rs b/src-tauri/src/endpoint.rs
index 5f5caaa..22f543d 100644
--- a/src-tauri/src/endpoint.rs
+++ b/src-tauri/src/endpoint.rs
@@ -108,11 +108,11 @@ fn find() -> Option<CoreEndpoint> {
     listening(&endpoint.url).then_some(endpoint)
 }
 
-/// The core to connect to, or none yet. Only Bots's own pages may ask: the
-/// answer carries the owner's token.
+/// The core to connect to, or none yet. Only the companion's page may ask:
+/// the answer carries the owner's token.
 #[tauri::command]
 pub async fn core_endpoint(webview: Webview) -> Result<Option<CoreEndpoint>, String> {
-    crate::only_bots(&webview)?;
+    crate::companion_window::only_companion(&webview)?;
     tauri::async_runtime::spawn_blocking(find).await.map_err(|error| error.to_string())
 }
 
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 0c4977b..da6eeee 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -18,17 +18,6 @@ mod tray;
 #[link(name = "resource", kind = "static", modifiers = "-bundle")]
 unsafe extern "C" {}
 
-use tauri::Webview;
-
-/// Bots's own pages, the companion and its settings: the only ones that may
-/// ask for the core's token or list the screens.
-pub(crate) fn only_bots(webview: &Webview) -> Result<(), String> {
-    match webview.label() {
-        companion_window::LABEL | tray::SETTINGS_LABEL => Ok(()),
-        other => Err(format!("the webview {other:?} may not invoke this command")),
-    }
-}
-
 // One expansion: on macOS generate_context also embeds the application plist.
 fn bots_context<R: tauri::Runtime>() -> tauri::Context<R> {
     tauri::generate_context!()
@@ -102,8 +91,7 @@ pub fn run() {
         }
     };
     app.run(|_app, event| {
-        // The settings window closing leaves the companion: Bots stops on Quit
-        // alone, or when Boite stops it.
+        // Bots stops on Quit alone, or when Boite stops it.
         if let tauri::RunEvent::ExitRequested { code: None, api, .. } = event { api.prevent_exit(); }
     });
 }
diff --git a/src-tauri/src/tray.rs b/src-tauri/src/tray.rs
index e00b3a3..c06c827 100644
--- a/src-tauri/src/tray.rs
+++ b/src-tauri/src/tray.rs
@@ -1,22 +1,24 @@
-//! The tray icon, its menu, the settings window and quitting.
+//! The tray icon, its menu, opening the settings and quitting.
+//!
+//! The settings have no window of their own: they are a panel of the island,
+//! in the companion's window (`components/island/settings/`). Settings brings
+//! that window forward and asks its page for the panel (`companion://settings`).
 
-use std::sync::{Mutex, PoisonError};
 use tauri::{
     menu::{Menu, MenuItem},
     tray::{MouseButton, MouseButtonState, TrayIconBuilder, TrayIconEvent},
-    AppHandle, Manager, Runtime, Webview, WebviewUrl,
+    AppHandle, Emitter, Manager, Runtime, Webview,
 };
 
-pub const SETTINGS_LABEL: &str = "settings";
 pub const TRAY_ID: &str = "bots";
+/// The longest section name the page may ask the panel to open on.
+const SECTION_MAX: usize = 24;
 
-/// The tray menu's items and the settings window's title, kept so the page
-/// can name them in its language.
+/// The tray menu's items, kept so the page can name them in its language.
 struct Labels<R: Runtime> {
     tray: tauri::tray::TrayIcon<R>,
     settings: MenuItem<R>,
     quit: MenuItem<R>,
-    title: Mutex<String>,
 }
 
 /// Quit: Bots stops with code 0, which Boite reads as stopped on purpose,
@@ -25,47 +27,43 @@ pub fn quit<R: Runtime>(app: &AppHandle<R>) {
     app.exit(0);
 }
 
-/// Opens the settings window, or brings it forward when it is open.
-pub fn open_settings<R: Runtime>(app: &AppHandle<R>) -> tauri::Result<()> {
-    if let Some(window) = app.get_webview_window(SETTINGS_LABEL) {
-        let _ = window.unminimize();
-        window.show()?;
-        return window.set_focus();
-    }
-    let title = app.try_state::<Labels<R>>()
-        .map(|labels| labels.title.lock().unwrap_or_else(PoisonError::into_inner).clone())
-        .unwrap_or_else(|| "B.O.T.S settings".into());
-    let query = crate::companion_window::demo_query();
-    let page = if query.is_empty() { "index.html?view=settings".to_string() } else { format!("index.html?view=settings&{query}") };
-    let window = tauri::WebviewWindowBuilder::new(app, SETTINGS_LABEL, WebviewUrl::App(page.into()))
-        .title(title).inner_size(720.0, 760.0).min_inner_size(520.0, 480.0)
-        .on_navigation(|url| matches!(url.scheme(), "tauri" | "http" | "https") && matches!(url.host_str(), Some("tauri.localhost") | Some("localhost")))
-        .build()?;
-    window.set_focus()
+/// A section the page may name: a short lowercase word. The page knows its
+/// sections (`lib/island/settings-panel.svelte.ts`) and opens the last one
+/// shown on any name it does not.
+fn is_section(name: &str) -> bool {
+    !name.is_empty() && name.len() <= SECTION_MAX && name.bytes().all(|byte| byte.is_ascii_lowercase())
+}
+
+/// The companion's window comes forward with the keyboard and opens its
+/// settings panel, on `section` when one is named.
+pub fn open_settings<R: Runtime>(app: &AppHandle<R>, section: Option<&str>) -> tauri::Result<()> {
+    let Some(window) = crate::companion_window::bring_forward(app) else { return Ok(()) };
+    window.emit("companion://settings", section)
 }
 
-/// `companion://settings` from the companion: its settings, in their own window.
+/// The companion asks for its settings panel, on a section or the last one shown.
 #[tauri::command]
-pub async fn bots_settings(app: AppHandle, webview: Webview) -> Result<(), String> {
+pub async fn bots_settings(app: AppHandle, webview: Webview, section: Option<String>) -> Result<(), String> {
     crate::companion_window::only_companion(&webview)?;
-    open_settings(&app).map_err(|error| error.to_string())
+    if let Some(name) = section.as_deref().filter(|name| !is_section(name)) {
+        return Err(format!("{name:?} is not a settings section"));
+    }
+    open_settings(&app, section.as_deref()).map_err(|error| error.to_string())
 }
 
 /// The tray is native and the sentences live in the page's catalogue: the
 /// companion sends them at start and on every language change. English until
 /// then.
 #[tauri::command]
-pub fn bots_tray_labels(app: AppHandle, webview: Webview, tooltip: String, settings: String, quit: String, title: String) -> Result<(), String> {
+pub fn bots_tray_labels(app: AppHandle, webview: Webview, tooltip: String, settings: String, quit: String) -> Result<(), String> {
     crate::companion_window::only_companion(&webview)?;
-    if [&tooltip, &settings, &quit, &title].iter().any(|label| label.trim().is_empty()) {
-        return Err(format!("tray labels must not be empty: tooltip {tooltip:?}, settings {settings:?}, quit {quit:?}, title {title:?}"));
+    if [&tooltip, &settings, &quit].iter().any(|label| label.trim().is_empty()) {
+        return Err(format!("tray labels must not be empty: tooltip {tooltip:?}, settings {settings:?}, quit {quit:?}"));
     }
     let Some(labels) = app.try_state::<Labels<tauri::Wry>>() else { return Ok(()) };
     labels.tray.set_tooltip(Some(tooltip)).map_err(|error| format!("the tray kept its tooltip: {error}"))?;
     labels.settings.set_text(settings).map_err(|error| format!("the tray's Settings item kept its label: {error}"))?;
     labels.quit.set_text(quit).map_err(|error| format!("the tray's Quit item kept its label: {error}"))?;
-    *labels.title.lock().unwrap_or_else(PoisonError::into_inner) = title.clone();
-    if let Some(window) = app.get_webview_window(SETTINGS_LABEL) { let _ = window.set_title(&title); }
     Ok(())
 }
 
@@ -85,7 +83,7 @@ pub fn build_tray<R: Runtime>(app: &AppHandle<R>) -> tauri::Result<()> {
         })
         .on_menu_event(|app, event| match event.id().as_ref() {
             "settings" => {
-                if let Err(error) = open_settings(app) { eprintln!("[bots] the settings window did not open: {error}"); }
+                if let Err(error) = open_settings(app, None) { eprintln!("[bots] the settings did not open: {error}"); }
             }
             "quit" => quit(app),
             _ => {}
@@ -94,6 +92,21 @@ pub fn build_tray<R: Runtime>(app: &AppHandle<R>) -> tauri::Result<()> {
         builder = builder.icon(icon);
     }
     let tray = builder.build(app)?;
-    app.manage(Labels { tray, settings, quit: leave, title: Mutex::new("B.O.T.S settings".into()) });
+    app.manage(Labels { tray, settings, quit: leave });
     Ok(())
 }
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn a_section_is_a_short_lowercase_word() {
+        for name in ["place", "crew", "permissions"] {
+            assert!(is_section(name), "{name}");
+        }
+        for name in ["", "Crew", "crew settings", "../crew", "brain-model", "a".repeat(SECTION_MAX + 1).as_str()] {
+            assert!(!is_section(name), "{name:?}");
+        }
+    }
+}
diff --git a/src/App.svelte b/src/App.svelte
index a996a01..bcbf75e 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -9,6 +9,11 @@
   (`components/desktop/`). Dragging a robot out of the island sets it loose;
   dragging it back against the top edge, or "Back to the island", returns it.
   The shell places the window for either (`island_place`, `companion_place`).
+
+  The settings are a panel of the island (`island/settings/SettingsPanel.svelte`):
+  asked for from the tray, a gear or "Make an agent", the island opens for
+  them, drawn for them even while the robots are loose, and held open while
+  they show.
 -->
 <script lang="ts">
   import { onMount, tick, untrack } from 'svelte';
@@ -17,11 +22,12 @@
   import BotsNotice from './components/BotsNotice.svelte';
   import { writeStatus } from './lib/companion/memory';
   import { captureZone, type ScreenShot } from './lib/companion/screen';
-  import { companionHitRects, configureCompanion, coverScreen, inShell, layoutOf, placeCompanion, placeIsland, type CompanionLayout, type HitRect } from './lib/companion/shell';
+  import { companionHitRects, configureCompanion, coverScreen, inShell, layoutOf, listenShell, placeCompanion, placeIsland, type CompanionLayout, type HitRect } from './lib/companion/shell';
   import { Companion } from './lib/companion/companion.svelte';
   import { IslandFrame } from './lib/island/frame.svelte';
   import { readBar, readBarEdit, shownTab, subscribeBarEdit, writeBarEdit } from './lib/island/bar';
   import { readDeckTab, writeDeckTab } from './lib/island/deck-tabs';
+  import { answerSettings, panelWindowHeight, requestSettings, settingsPanel } from './lib/island/settings-panel.svelte';
   import CompanionZone from './components/companion/CompanionZone.svelte';
   import DesktopCompanion from './components/desktop/DesktopCompanion.svelte';
   import Island from './components/island/Island.svelte';
@@ -43,7 +49,7 @@
     focusInput: () =>
       requestAnimationFrame(() => setTimeout(() => document.querySelector<HTMLElement>('.assistant-input, .askbar input')?.focus({ preventScroll: true }))),
     summoned: () => frame.show('chat'),
-    // A click elsewhere leaves a pinned island open, and one being edited: Settings may be where the click went.
+    // A click elsewhere leaves a pinned island open, and one being edited.
     pinned: () => frame.pinned || frame.editing
   });
   const frame = new IslandFrame({
@@ -58,6 +64,31 @@
   });
 
   const island = $derived(companion.prefs.robots === 'island');
+  /** The island is drawn: the robots live in it, or the settings panel is open over loose ones. */
+  const shown = $derived(island || settingsPanel.open);
+
+  // The settings, asked for: the island opens on its tab, then the panel on the section asked.
+  $effect(() =>
+    answerSettings((section) => {
+      if (frame.editing) writeBarEdit(false);
+      frame.show(frame.tab);
+      settingsPanel.show(section);
+    })
+  );
+  // While the panel shows it holds the island open; closed over loose robots, it takes the island away.
+  $effect(() => {
+    if (!settingsPanel.open) return;
+    untrack(() => frame.hold('settings', true));
+    return () =>
+      untrack(() => {
+        frame.hold('settings', false);
+        if (!island) companion.close();
+      });
+  });
+  // The island closing, or its bar being edited, closes the panel.
+  $effect(() => {
+    if (!companion.open || frame.editing) untrack(() => settingsPanel.close());
+  });
 
   // The bar's edit mode (`lib/island/bar.ts`), asked from Settings or by a right-click on the bar, ended by
   // Done, Escape or Settings. It is the island's: the robots set loose, or the island closed, end it.
@@ -102,15 +133,15 @@
   }
 
   $effect(() => {
-    void [island, companion.open, picking, frame.size, frame.tab, frame.editing, companion.notice, companion.waiting, companion.blocking];
+    void [shown, companion.open, picking, frame.size, frame.tab, frame.editing, settingsPanel.open, settingsPanel.section, companion.notice, companion.waiting, companion.blocking];
     // Measured once the frame is drawn, when its layout is done: measuring before would lay it out twice.
     void tick().then(() => requestAnimationFrame(() => setTimeout(sendRects)));
   });
 
-  // The island's window grows at once when it opens, and
-  // shrinks once the island's spring has followed.
+  // The island's window grows at once when it opens, longer for the settings
+  // panel, and shrinks once the island's spring or the panel has followed.
   $effect(() => {
-    const wanted = companion.open ? ISLAND_WINDOW.open : ISLAND_WINDOW.closed;
+    const wanted = settingsPanel.open ? Math.max(ISLAND_WINDOW.open, panelWindowHeight(screen.availHeight)) : companion.open ? ISLAND_WINDOW.open : ISLAND_WINDOW.closed;
     if (wanted >= untrack(() => islandHeight)) {
       islandHeight = wanted;
       return;
@@ -123,7 +154,7 @@
   // its place: the top of its screen for the island, where it was left for
   // the loose robots.
   $effect(() => {
-    const [onIsland, monitor, anchor, spot, height] = [island, companion.prefs.monitor, companion.prefs.anchor, companion.prefs.spot, islandHeight];
+    const [onIsland, monitor, anchor, spot, height] = [shown, companion.prefs.monitor, companion.prefs.anchor, companion.prefs.spot, islandHeight];
     if (picking || companion.dragging) return;
     if (onIsland) void placeIsland(monitor, ISLAND_WINDOW.width, height).catch(() => {});
     else
@@ -133,7 +164,7 @@
   });
 
   // Hiding for full-screen apps and the shortcut live in the shell; how the
-  // shortcut fared goes to Settings, in the other window.
+  // shortcut fared goes to the settings panel (`writeStatus`).
   $effect(() => {
     const [hideFullscreen, hotkey] = [companion.prefs.hideFullscreen, companion.prefs.hotkey];
     if (!inShell()) return;
@@ -148,6 +179,10 @@
     if (readBarEdit()) writeBarEdit(false);
     // The clipboard history records while the setting is on, deck open or not.
     const off: (() => void)[] = [startTheme(), companion.start(), () => frame.dispose(), clipboardHistory.start()];
+    // The tray's Settings, and the companion's own request, come back from the shell (`bots_settings`).
+    let gone = false;
+    void listenShell<string | null>('settings', (section) => requestSettings(section)).then((stop) => (gone ? stop() : off.push(stop)));
+    off.push(() => (gone = true));
     const rects = setInterval(sendRects, 500);
     // Demo poses for captures (`?fake=1&pose=…`), in the dev bundle only.
     if (import.meta.env.DEV && new URLSearchParams(location.search).has('pose')) {
@@ -162,6 +197,7 @@
   function onkeydown(event: KeyboardEvent) {
     if (event.key !== 'Escape') return;
     if (picking) pickDone?.(null);
+    else if (settingsPanel.open) settingsPanel.close();
     else if (frame.editing) writeBarEdit(false);
     else if (companion.open) companion.close();
     else companion.talks.forEach((talk) => talk.hide());
@@ -169,18 +205,18 @@
 
   // Files dragged over the loose robots' window; the island takes its own.
   function dragover(event: DragEvent) {
-    if (!island) companion.attached.dragover(event);
+    if (!shown) companion.attached.dragover(event);
   }
   function drop(event: DragEvent) {
-    if (!island) companion.dropFiles(event);
+    if (!shown) companion.dropFiles(event);
   }
 </script>
 
 <svelte:window {onkeydown} />
 
-<main class="stage" class:picking class:island data-align={layout.align} data-edge={layout.edge} data-testid="companion" ondragenter={dragover} ondragover={dragover} ondrop={drop}>
+<main class="stage" class:picking class:island={shown} data-align={layout.align} data-edge={layout.edge} data-testid="companion" ondragenter={dragover} ondragover={dragover} ondrop={drop}>
   <div class="companion">
-    {#if island}
+    {#if shown}
       <Island {companion} {frame} onresize={sendRects} />
     {:else}
       <DesktopCompanion {companion} {layout} onresize={sendRects} />
diff --git a/src/SettingsApp.svelte b/src/SettingsApp.svelte
deleted file mode 100644
index 3d2a9e1..0000000
--- a/src/SettingsApp.svelte
+++ /dev/null
@@ -1,81 +0,0 @@
-<!--
-  Bots's settings window: where the companion stands, which agents stand as
-  it, what they run on and what they show. It reaches Boite on its own
-  (`lib/core.svelte.ts`) and shares the companion's preferences through
-  `localStorage`, which both windows of the app read.
--->
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import { startTheme } from '@boite/ui/lib/theme';
-  import BotsNotice from './components/BotsNotice.svelte';
-  import CompanionSettings from './components/CompanionSettings.svelte';
-  import { CoreLink } from './lib/core.svelte';
-  import { useReveal } from './lib/reveal';
-  import { strings } from './lib/strings';
-
-  const link = new CoreLink();
-  let notice = $state<string | null>(null);
-
-  $effect(() => {
-    document.title = strings.bots.settingsTitle;
-  });
-
-  onMount(() => {
-    const stopTheme = startTheme();
-    // The island's dark tokens, on the body so menus opened over the page wear them too.
-    document.body.classList.add('island-tokens');
-    const demo = import.meta.env.DEV && new URLSearchParams(location.search).get('fake') === '1';
-    void link
-      .start(demo ? async () => new (await import('./lib/fake-client')).FakeClient() : undefined)
-      .then(() => useReveal(link.client, (message) => (notice = message)));
-    return () => {
-      document.body.classList.remove('island-tokens');
-      stopTheme();
-      useReveal(null, null);
-      link.stop();
-    };
-  });
-</script>
-
-<div class="settings" data-testid="bots-settings">
-  {#if link.waiting}
-    <div class="waiting"><BotsNotice text={strings.bots.waiting} hint={strings.bots.waitingHint} sticky ondismiss={() => {}} /></div>
-  {/if}
-  <CompanionSettings store={link} />
-  <div class="notice"><BotsNotice text={notice} ondismiss={() => (notice = null)} /></div>
-</div>
-
-<style>
-  .settings {
-    height: 100%;
-    overflow-y: auto;
-    background: var(--island-bg);
-    color: var(--color-foreground);
-  }
-  /* Dark cards, as the island's: hairline edges, no shadow. */
-  .settings :global(.page .card) {
-    border: 1px solid var(--island-line);
-    border-radius: 14px;
-    background: var(--island-card);
-    box-shadow: none;
-  }
-  .settings :global(.page .switch-row) {
-    border-color: var(--island-line);
-  }
-  /* Section labels as the island's: sentence case, quiet grey. */
-  .settings :global(.page .card h2) {
-    color: var(--island-muted);
-    font-size: var(--text-sm);
-    font-weight: 500;
-  }
-  .waiting {
-    display: flex;
-    justify-content: center;
-    padding: 16px 16px 0;
-  }
-  .notice {
-    position: fixed;
-    right: 16px;
-    bottom: 16px;
-  }
-</style>
diff --git a/src/app.test.ts b/src/app.test.ts
index 09d5876..07f71a0 100644
--- a/src/app.test.ts
+++ b/src/app.test.ts
@@ -1,7 +1,7 @@
 import { afterEach, expect, test, vi } from 'vitest';
 import { flushSync, mount, unmount } from 'svelte';
 import App from './App.svelte';
-import SettingsApp from './SettingsApp.svelte';
+import { requestSettings, settingsPanel } from './lib/island/settings-panel.svelte';
 import { strings } from './lib/strings';
 
 /** The demo loads its fake core on demand: in a cold run its first import alone can take seconds. */
@@ -9,7 +9,7 @@ const DEMO_WAIT = { timeout: 15_000 };
 
 let shown: { app: Record<string, unknown>; target: HTMLElement } | null = null;
 
-function show(page: typeof App | typeof SettingsApp, search: string) {
+function show(page: typeof App, search: string) {
   history.replaceState(null, '', `/${search}`);
   const target = document.body.appendChild(document.createElement('div'));
   shown = { app: mount(page, { target }), target };
@@ -23,6 +23,7 @@ afterEach(() => {
     shown.target.remove();
     shown = null;
   }
+  settingsPanel.close();
   window.localStorage.clear();
   history.replaceState(null, '', '/');
 });
@@ -39,15 +40,38 @@ test('the demo mode runs the companion on the fake core', async () => {
   expect(target.querySelector('[data-testid="companion"]')).not.toBeNull();
 });
 
-test('the settings window lists the crew, without a link to Boite\'s Advanced page', async () => {
-  const target = show(SettingsApp, '?view=settings&fake=1');
+test('a request opens the island and its settings on a section; the deck\'s gear puts them away', async () => {
+  const target = show(App, '?fake=1');
+  await vi.waitFor(() => expect(target.querySelector('[data-testid="bots-notice"]')?.textContent).toContain(strings.bots.demo), DEMO_WAIT);
+  requestSettings('crew');
+  flushSync();
+  expect(target.querySelector('[data-testid="island-settings-panel"]')).not.toBeNull();
+  const gear = target.querySelector<HTMLButtonElement>('[data-testid="island-settings"]')!;
+  expect(gear.getAttribute('aria-pressed')).toBe('true');
+  expect(target.querySelector('[data-testid="settings-section-crew"]')?.getAttribute('aria-selected')).toBe('true');
   await vi.waitFor(() => expect(target.querySelector('[data-testid="companion-crew"] ul, [data-testid="companion-crew"] form')).not.toBeNull(), DEMO_WAIT);
-  expect(target.querySelector('[data-testid="companion-settings"]')).not.toBeNull();
   expect(target.querySelector('[data-testid="companion-open-advanced"]')).toBeNull();
-  expect(document.title).toBe(strings.bots.settingsTitle);
-});
+  target.querySelector<HTMLButtonElement>('[data-testid="settings-section-place"]')!.click();
+  flushSync();
+  expect(target.querySelector('[data-testid="companion-robots"]')).not.toBeNull();
+  gear.click();
+  flushSync();
+  expect(settingsPanel.open).toBe(false);
+  expect(gear.getAttribute('aria-pressed')).toBe('false');
+}, 40_000);
 
-test('the settings window waits for Boite too', async () => {
-  const target = show(SettingsApp, '?view=settings');
-  await vi.waitFor(() => expect(target.querySelector('[data-testid="bots-notice"]')?.textContent).toContain(strings.bots.waiting));
-});
+test('Escape closes the settings panel first, before a request waiting under it or the island', async () => {
+  const target = show(App, '?fake=1');
+  await vi.waitFor(() => expect(target.querySelector('[data-testid="bots-notice"]')?.textContent).toContain(strings.bots.demo), DEMO_WAIT);
+  requestSettings('focus');
+  flushSync();
+  // The fake core starts with requests waiting: their card sits under the panel.
+  await vi.waitFor(() => expect(target.querySelector('[data-testid="island-attention"]')).not.toBeNull(), DEMO_WAIT);
+  const asked = target.querySelector('[data-testid="attention-of"]')?.textContent;
+  expect(target.querySelector('[data-testid="island"]')?.getAttribute('data-size')).toBe('open');
+  window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+  flushSync();
+  expect(settingsPanel.open).toBe(false);
+  expect(target.querySelector('[data-testid="island"]')?.getAttribute('data-size')).toBe('open');
+  expect(target.querySelector('[data-testid="attention-of"]')?.textContent).toBe(asked);
+}, 30_000);
diff --git a/src/bots.css b/src/bots.css
index 09a4eed..2d7d399 100644
--- a/src/bots.css
+++ b/src/bots.css
@@ -3,7 +3,7 @@
   /* The soft shadow under a robot, the same on light and dark desktops. */
   --bots-shadow: drop-shadow(0 1.5px 2px rgb(0 0 0 / 0.35));
 
-  /* The island and the settings window: pure black, dark cards, hairlines. */
+  /* The island and its settings panel: pure black, dark cards, hairlines. */
   --island-bg: #000;
   --island-card: #0e0e12;
   --island-card-hover: #16161c;
diff --git a/src/components/CompanionSettings.svelte b/src/components/CompanionSettings.svelte
deleted file mode 100644
index df35fec..0000000
--- a/src/components/CompanionSettings.svelte
+++ /dev/null
@@ -1,412 +0,0 @@
-<!--
-  Settings, Companion: where the companion sits, in the island at the top of
-  the screen or loose on the desktop, which mascot it wears and what it runs
-  on. The preferences are this computer's (`lib/companion/prefs.ts`); the
-  companion's window follows each change as it is made.
--->
-<script lang="ts">
-  import { untrack } from 'svelte';
-  import { Check, ChevronDown, PencilRuler } from '@lucide/svelte';
-  import { defaultTitleModel, providerEnabled, type ModelInfo } from '@boite/contracts';
-  import InfoTip from '@boite/ui/components/InfoTip.svelte';
-  import Menu from '@boite/ui/components/Menu.svelte';
-  import ProviderLogo from '@boite/ui/components/ProviderLogo.svelte';
-  import { separator, type MenuItem } from '@boite/ui/lib/menu';
-  import { DEFAULT_MODEL_NAMES } from '@boite/ui/lib/model-defaults';
-  import { gatewayReader } from '@boite/ui/lib/quota-reader.svelte';
-  import { fill, strings } from '../lib/strings';
-  import type { CoreLink } from '../lib/core.svelte';
-  import { hudGauges } from '../lib/companion/hud';
-  import { COMPANION_HOTKEYS, MASCOT_FAMILIES, PILL_RESTS, readCompanionPrefs, subscribeCompanionPrefs, writeCompanionPrefs, type CompanionAnchor, type CompanionControl, type CompanionPrefs, type CompanionRobots, type Mascot, type PillRest } from '../lib/companion/prefs';
-  import { CLASSIC_SKIN } from '../lib/companion/crew';
-  import { readBarEdit, subscribeBarEdit, writeBarEdit } from '../lib/island/bar';
-  import { parseRobot } from '../lib/robots';
-  import RobotPicker from './agents/RobotPicker.svelte';
-  import { readStatus, subscribeCompanionData } from '../lib/companion/memory';
-  import { companionMonitors, inShell, type CompanionMonitor } from '../lib/companion/shell';
-  import CompanionReminders from './companion/CompanionReminders.svelte';
-  import CompanionMissions from './companion/CompanionMissions.svelte';
-  import CompanionAllowRules from './companion/CompanionAllowRules.svelte';
-  import CompanionCrewSettings from './companion/CompanionCrewSettings.svelte';
-  import { readWindowsPrefs, subscribeWindowsPrefs, writeWindowsPrefs } from '../lib/windows/prefs';
-
-  let { store }: { store: CoreLink } = $props();
-
-  const AUTO = 'auto';
-  const PRIMARY = 'primary';
-  const ROBOTS: CompanionRobots[] = ['island', 'desktop'];
-  /** What the mascot picker shows until one is chosen: Boîte, the classic box. */
-  const CLASSIC = parseRobot(CLASSIC_SKIN)!;
-  const copy = $derived(strings.companion.settings);
-
-  let prefs = $state<CompanionPrefs>(readCompanionPrefs());
-  let monitors = $state.raw<CompanionMonitor[]>([]);
-  let status = $state(readStatus());
-
-  $effect(() => subscribeCompanionPrefs((next) => (prefs = next)));
-  // The deck's computer tabs keep their own prefs (`lib/windows/prefs.ts`).
-  let windowsPrefs = $state(readWindowsPrefs());
-  $effect(() => subscribeWindowsPrefs((next) => (windowsPrefs = next)));
-  $effect(() => subscribeCompanionData(() => (status = readStatus())));
-  /** The island's bar is being edited, here or on the island (`lib/island/bar.ts`). */
-  let editingBar = $state(readBarEdit());
-  $effect(() => subscribeBarEdit((on) => (editingBar = on)));
-  $effect(() => {
-    void companionMonitors().then((list) => (monitors = list)).catch(() => {});
-  });
-
-  /** The agents that can answer: on, here, with an account signed in. */
-  let usable = $derived(
-    store.providers.filter((provider) => providerEnabled(provider) && provider.available).flatMap((provider) => {
-      const accounts = store.accountsOf(provider.id).filter((account) => account.status === 'ok');
-      return accounts.length > 0 ? [{ provider, accounts }] : [];
-    })
-  );
-
-  // Reading an agent's models starts it for a moment: the chosen one is read
-  // to name its model and efforts, the others once the model menu is reached.
-  $effect(() => {
-    const chosen = usable.find((entry) => entry.provider.id === prefs.providerId);
-    if (chosen) void store.probeModels(chosen.provider.id, (accountOf(chosen.provider.id) ?? chosen.accounts[0]!).id).catch(() => {});
-  });
-
-  function readAllModels() {
-    for (const { provider, accounts } of usable) void store.probeModels(provider.id, accounts[0]!.id).catch(() => {});
-  }
-
-  const accountOf = (providerId: string) => {
-    const accounts = usable.find((entry) => entry.provider.id === providerId)?.accounts ?? [];
-    return accounts.find((account) => account.id === prefs.accountId) ?? accounts[0] ?? null;
-  };
-
-  let groups = $derived(
-    usable.map(({ provider, accounts }) => {
-      const account = provider.id === prefs.providerId ? (accountOf(provider.id) ?? accounts[0]!) : accounts[0]!;
-      const offered = store.modelsOf(provider.id, account.id).filter((model) => model.id !== 'default');
-      const small = defaultTitleModel(provider, offered);
-      const named = (id: string): ModelInfo => offered.find((model) => model.id === id) ?? { id, name: DEFAULT_MODEL_NAMES[id] ?? id };
-      const chosen = prefs.providerId === provider.id ? prefs.model : null;
-      const ids = [small, chosen, ...offered.filter((model) => model.legacy !== true).map((model) => model.id)];
-      return { provider, small, models: [...new Set(ids.filter((id): id is string => id !== null))].map(named) };
-    })
-  );
-
-  const idOf = (providerId: string, model: string) => JSON.stringify([providerId, model]);
-
-  let modelItems = $derived<MenuItem[]>([
-    { id: AUTO, label: copy.automatic, hint: copy.automaticHint, active: prefs.providerId === null },
-    ...groups.flatMap(({ provider, small, models }) => [
-      separator(`sep-${provider.id}`),
-      ...models.map((model) => ({
-        id: idOf(provider.id, model.id),
-        label: model.name,
-        hint: provider.shortName,
-        active: prefs.providerId === provider.id && (prefs.model ?? small) === model.id
-      }))
-    ])
-  ]);
-
-  let group = $derived(groups.find((entry) => entry.provider.id === prefs.providerId));
-  let modelId = $derived(group ? (prefs.model ?? group.small) : null);
-  let model = $derived(group?.models.find((entry) => entry.id === modelId));
-  let currentModel = $derived(prefs.providerId === null ? copy.automatic : model ? `${model.name} · ${group!.provider.shortName}` : (prefs.model ?? prefs.providerId));
-
-  let accounts = $derived(usable.find((entry) => entry.provider.id === prefs.providerId)?.accounts ?? []);
-  let account = $derived(prefs.providerId === null ? null : accountOf(prefs.providerId));
-  let accountItems = $derived<MenuItem[]>(accounts.map((entry) => ({ id: entry.id, label: entry.label, active: entry.id === account?.id })));
-
-  let levels = $derived(model?.effort?.levels ?? []);
-  let effortItems = $derived<MenuItem[]>([
-    { id: AUTO, label: copy.effortDefault, active: prefs.effort === null },
-    ...levels.map((level) => ({ id: level.id, label: level.label, hint: level.description, active: prefs.effort === level.id }))
-  ]);
-  let currentEffort = $derived(levels.find((level) => level.id === prefs.effort)?.label ?? copy.effortDefault);
-
-  let screenItems = $derived<MenuItem[]>([
-    { id: PRIMARY, label: copy.primary, active: prefs.monitor === null },
-    ...monitors.map((monitor) => ({
-      id: monitor.name,
-      label: monitor.name,
-      hint: fill(copy.screenSize, { width: String(monitor.width), height: String(monitor.height) }),
-      active: prefs.monitor === monitor.name
-    }))
-  ]);
-
-  // Where it was dropped is offered once it has been dropped somewhere.
-  let anchors = $derived<CompanionAnchor[]>(prefs.spot ? ['left', 'center', 'right', 'free'] : ['left', 'center', 'right']);
-  let anchorItems = $derived<MenuItem[]>(anchors.map((anchor) => ({ id: anchor, label: copy.anchors[anchor], active: prefs.anchor === anchor })));
-
-  const OFF = 'off';
-  let hotkeyItems = $derived<MenuItem[]>([
-    { id: OFF, label: copy.hotkeyOff, active: prefs.hotkey === null },
-    ...COMPANION_HOTKEYS.map((hotkey) => ({ id: hotkey, label: hotkey, active: prefs.hotkey === hotkey }))
-  ]);
-  let hotkeyTaken = $derived(prefs.hotkey !== null && status.hotkeyError === prefs.hotkey);
-  let warmMinutes = $derived(store.settings?.warmProcessMinutes ?? null);
-
-  const CONTROLS: CompanionControl[] = ['ask', 'auto'];
-  let controlItems = $derived<MenuItem[]>(CONTROLS.map((control) => ({ id: control, label: copy.controls[control], hint: copy.controlsHint[control], active: prefs.control === control })));
-
-  let pillRestItems = $derived<MenuItem[]>(PILL_RESTS.map((rest) => ({ id: rest, label: copy.pillRests[rest], hint: copy.pillRestHints[rest], active: prefs.pillRest === rest })));
-
-  const WORK_MINUTES = [15, 20, 25, 30, 45, 50, 60, 90];
-  const BREAK_MINUTES = [3, 5, 10, 15];
-  const minutesLabel = (count: number) => fill(copy.minutes, { count: String(count) });
-  const minuteItems = (choices: number[], current: number): MenuItem[] =>
-    [...new Set([...choices, current])].sort((a, b) => a - b).map((count) => ({ id: String(count), label: minutesLabel(count), active: count === current }));
-  let workItems = $derived(minuteItems(WORK_MINUTES, prefs.workMinutes));
-  let breakItems = $derived(minuteItems(BREAK_MINUTES, prefs.breakMinutes));
-  const RADAR_MINUTES = [5, 10, 15, 30, 60];
-  const radarLabel = (count: number) => (count === 0 ? copy.radarOff : minutesLabel(count));
-  let radarItems = $derived(
-    [...new Set([0, ...RADAR_MINUTES, prefs.radarMinutes])]
-      .sort((a, b) => a - b)
-      .map((count) => ({ id: String(count), label: radarLabel(count), active: count === prefs.radarMinutes }))
-  );
-
-  function save(patch: Partial<CompanionPrefs>) {
-    prefs = writeCompanionPrefs(patch);
-  }
-
-  /** The gateway's subscriptions, as the companion draws them, to pick the ones it shows. */
-  let gateway = $derived(gatewayReader(store.endpointUrl ?? 'here'));
-  let gauges = $derived(hudGauges(gateway.state));
-  $effect(() => {
-    const client = store.client;
-    const current = gateway;
-    if (!client || !store.owner || store.connection !== 'ready' || !prefs.quotas) return;
-    const off = client.on('subscriptionProxy.quotasUpdated', (value) => current.accept(value));
-    untrack(() => void current.read(client));
-    return off;
-  });
-
-  function showQuota(id: string, shown: boolean) {
-    const others = prefs.hiddenQuotas.filter((hidden) => hidden !== id);
-    save({ hiddenQuotas: shown ? others : [...others, id] });
-  }
-
-  function pickModel(id: string) {
-    if (id === AUTO) return save({ providerId: null, accountId: null, model: null, effort: null });
-    const [providerId, model] = JSON.parse(id) as [string, string];
-    save({ providerId, model, accountId: accountOf(providerId)?.id ?? null, effort: null });
-  }
-
-</script>
-
-{#snippet picker(label: string, hint: string | null, items: MenuItem[], current: string, onpick: (id: string) => void, testid: string, onreach?: () => void)}
-  <!-- A click focuses the menu's button too, so focus is the one sign a menu is reached. -->
-  <div class="switch-row" onfocusin={onreach}>
-    <span class="text ui-label-box">
-      <span class="ui-label">{label}</span>{#if hint}<InfoTip topic={label} text={hint} />{/if}
-    </span>
-    <Menu {items} {onpick} {label} placement="bottom" align="end" {testid}>
-      <span class="current ui-label">{current}</span><ChevronDown size={13} />
-    </Menu>
-  </div>
-{/snippet}
-
-<div class="page" data-testid="companion-settings">
-  <header>
-    <h1 class="ui-label-box"><span class="ui-label">{strings.companion.heading}</span><InfoTip topic={strings.companion.heading} text={copy.intro} /></h1>
-  </header>
-
-  {#if !inShell()}
-    <section class="card"><p class="hint">{copy.desktopOnly}</p></section>
-  {/if}
-
-  <section class="card">
-    <h2>{copy.place}</h2>
-    <div class="switch-row">
-      <span class="text ui-label-box"><span class="ui-label">{copy.robots}</span><InfoTip topic={copy.robots} text={copy.robotsHint} /></span>
-      <div class="segmented" role="radiogroup" aria-label={copy.robots} data-testid="companion-robots">
-        {#each ROBOTS as robots (robots)}
-          <button type="button" role="radio" aria-checked={prefs.robots === robots} class:on={prefs.robots === robots} onclick={() => save({ robots })} data-testid={`companion-robots-${robots}`}>{copy.robotsChoice[robots]}</button>
-        {/each}
-      </div>
-    </div>
-    {#if prefs.robots === 'island'}
-      <label class="switch-row">
-        <span class="text ui-label-box"><span class="ui-label">{copy.openOnHover}</span><InfoTip topic={copy.openOnHover} text={copy.openOnHoverHint} /></span>
-        <input type="checkbox" role="switch" checked={prefs.openOnHover} onchange={(event) => save({ openOnHover: event.currentTarget.checked })} data-testid="companion-open-on-hover" />
-      </label>
-      {@render picker(copy.pillRest, copy.pillRestHint, pillRestItems, copy.pillRests[prefs.pillRest], (id) => save({ pillRest: id as PillRest }), 'companion-pill-rest')}
-      <div class="switch-row">
-        <span class="text ui-label-box"><span class="ui-label">{copy.bar}</span><InfoTip topic={copy.bar} text={copy.barHint} /></span>
-        <button type="button" class={editingBar ? 'primary small' : 'small'} aria-pressed={editingBar} onclick={() => writeBarEdit(!editingBar)} data-testid="companion-bar-edit">
-          {#if editingBar}<Check size={13} />{copy.barDone}{:else}<PencilRuler size={13} />{copy.barEdit}{/if}
-        </button>
-      </div>
-    {/if}
-    {@render picker(copy.screen, copy.screenHint, screenItems, prefs.monitor ?? copy.primary, (id) => save({ monitor: id === PRIMARY ? null : id }), 'companion-screen')}
-    {#if prefs.robots === 'desktop'}
-      {@render picker(copy.position, copy.positionHint, anchorItems, copy.anchors[prefs.anchor], (id) => save({ anchor: id as CompanionAnchor }), 'companion-position')}
-    {/if}
-    {@render picker(copy.hotkey, copy.hotkeyHint, hotkeyItems, prefs.hotkey ?? copy.hotkeyOff, (id) => save({ hotkey: id === OFF ? null : id }), 'companion-hotkey')}
-    {#if hotkeyTaken}<p class="hint problem" role="alert">{fill(copy.hotkeyTaken, { hotkey: prefs.hotkey! })}</p>{/if}
-  </section>
-
-  <section class="card" data-testid="companion-mascot">
-    <h2 class="ui-label-box"><span class="ui-label">{copy.mascot}</span><InfoTip topic={copy.mascot} text={copy.mascotHint} /></h2>
-    <RobotPicker robot={prefs.mascot ?? CLASSIC} families={MASCOT_FAMILIES} compact onpick={(robot) => save({ mascot: robot as Mascot })} />
-    {#if prefs.mascot}
-      <button type="button" class="ghost small reset" onclick={() => save({ mascot: null })} data-testid="companion-mascot-reset">{copy.mascotReset}</button>
-    {/if}
-  </section>
-
-  <CompanionCrewSettings {store} {prefs} />
-
-  <section class="card">
-    <h2 class="ui-label-box"><span class="ui-label">{copy.brain}</span><InfoTip topic={copy.brain} text={copy.brainHint} /></h2>
-    {@render picker(copy.model, copy.modelHint, modelItems, currentModel, pickModel, 'companion-model', readAllModels)}
-    {#if accounts.length > 1}
-      {@render picker(copy.account, null, accountItems, account?.label ?? '', (id) => save({ accountId: id }), 'companion-account')}
-    {/if}
-    {#if levels.length > 0}
-      {@render picker(copy.effort, null, effortItems, currentEffort, (id) => save({ effort: id === AUTO ? null : id }), 'companion-effort')}
-    {/if}
-    {@render picker(copy.control, copy.controlHint, controlItems, copy.controls[prefs.control], (id) => save({ control: id as CompanionControl }), 'companion-control')}
-    <p class="hint">{copy.controlsHint[prefs.control]}</p>
-    {#if warmMinutes !== null}
-      <p class="hint warm">{warmMinutes > 0 ? fill(copy.warmOn, { minutes: String(warmMinutes) }) : copy.warmOff}</p>
-
-    {/if}
-  </section>
-
-  <section class="card">
-    <label class="switch-row">
-      <span class="text ui-label-box"><span class="ui-label">{copy.music}</span><InfoTip topic={copy.music} text={copy.musicHint} /></span>
-      <input type="checkbox" role="switch" checked={prefs.music} onchange={(event) => save({ music: event.currentTarget.checked })} data-testid="companion-music" />
-    </label>
-    <label class="switch-row">
-      <span class="text ui-label-box"><span class="ui-label">{copy.lyrics}</span><InfoTip topic={copy.lyrics} text={copy.lyricsHint} /></span>
-      <input type="checkbox" role="switch" checked={prefs.lyrics} onchange={(event) => save({ lyrics: event.currentTarget.checked })} data-testid="companion-lyrics" />
-    </label>
-    <label class="switch-row">
-      <span class="text ui-label-box"><span class="ui-label">{copy.quotas}</span><InfoTip topic={copy.quotas} text={copy.quotasHint} /></span>
-      <input type="checkbox" role="switch" checked={prefs.quotas} onchange={(event) => save({ quotas: event.currentTarget.checked })} data-testid="companion-quotas" />
-    </label>
-    {#if prefs.quotas && gauges.length > 0}
-      <div class="quotas" role="group" aria-label={copy.quotasShown}>
-        {#each gauges as gauge (gauge.id)}
-          <label class="switch-row quota">
-            <span class="text quota-name"><ProviderLogo providerId={gauge.providerId} size={16} /><span class="ui-label">{gauge.name}</span></span>
-            <input type="checkbox" role="switch" checked={!prefs.hiddenQuotas.includes(gauge.id)} onchange={(event) => showQuota(gauge.id, event.currentTarget.checked)} data-testid="companion-quota" />
-          </label>
-        {/each}
-      </div>
-    {/if}
-    <label class="switch-row">
-      <span class="text ui-label-box"><span class="ui-label">{copy.closeOutside}</span><InfoTip topic={copy.closeOutside} text={copy.closeOutsideHint} /></span>
-      <input type="checkbox" role="switch" checked={prefs.closeOutside} onchange={(event) => save({ closeOutside: event.currentTarget.checked })} data-testid="companion-close-outside" />
-    </label>
-    <label class="switch-row">
-      <span class="text ui-label-box"><span class="ui-label">{copy.hideFullscreen}</span><InfoTip topic={copy.hideFullscreen} text={copy.hideFullscreenHint} /></span>
-      <input type="checkbox" role="switch" checked={prefs.hideFullscreen} onchange={(event) => save({ hideFullscreen: event.currentTarget.checked })} data-testid="companion-hide-fullscreen" />
-    </label>
-    <label class="switch-row">
-      <span class="text ui-label-box"><span class="ui-label">{copy.sounds}</span><InfoTip topic={copy.sounds} text={copy.soundsHint} /></span>
-      <input type="checkbox" role="switch" checked={prefs.sounds} onchange={(event) => save({ sounds: event.currentTarget.checked })} data-testid="companion-sounds" />
-    </label>
-    <label class="switch-row">
-      <span class="text ui-label-box"><span class="ui-label">{copy.awayRecap}</span><InfoTip topic={copy.awayRecap} text={copy.awayRecapHint} /></span>
-      <input type="checkbox" role="switch" checked={prefs.awayRecap} onchange={(event) => save({ awayRecap: event.currentTarget.checked })} data-testid="companion-away-recap" />
-    </label>
-    {@render picker(copy.radar, copy.radarHint, radarItems, radarLabel(prefs.radarMinutes), (id) => save({ radarMinutes: Number(id) }), 'companion-radar-minutes')}
-  </section>
-
-  <section class="card">
-    <label class="switch-row">
-      <span class="text ui-label-box"><span class="ui-label">{copy.clipboardHistory}</span><InfoTip topic={copy.clipboardHistory} text={copy.clipboardHistoryHint} /></span>
-      <input type="checkbox" role="switch" checked={windowsPrefs.clipboard} onchange={(event) => writeWindowsPrefs({ clipboard: event.currentTarget.checked })} data-testid="companion-clipboard-history" />
-    </label>
-  </section>
-
-  <section class="card">
-    <h2 class="ui-label-box"><span class="ui-label">{copy.pomodoro}</span><InfoTip topic={copy.pomodoro} text={copy.pomodoroHint} /></h2>
-    {@render picker(copy.workMinutes, null, workItems, minutesLabel(prefs.workMinutes), (id) => save({ workMinutes: Number(id) }), 'companion-work-minutes')}
-    {@render picker(copy.breakMinutes, null, breakItems, minutesLabel(prefs.breakMinutes), (id) => save({ breakMinutes: Number(id) }), 'companion-break-minutes')}
-    <label class="switch-row">
-      <span class="text ui-label-box"><span class="ui-label">{copy.focusOnWork}</span><InfoTip topic={copy.focusOnWork} text={copy.focusOnWorkHint} /></span>
-      <input type="checkbox" role="switch" checked={prefs.focusOnWork} onchange={(event) => save({ focusOnWork: event.currentTarget.checked })} data-testid="companion-focus-on-work" />
-    </label>
-  </section>
-
-  <CompanionReminders />
-  <CompanionMissions {store} />
-  <CompanionAllowRules />
-</div>
-
-<style>
-  /* Over `.settings .page .hint` in app.css. */
-  .page .problem {
-    color: var(--color-danger);
-  }
-  .page .warm {
-    margin-top: 14px;
-  }
-  .current {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-width: 26ch;
-  }
-  /* The subscriptions under "Show quotas", one switch each, set in under it. */
-  .quotas {
-    display: flex;
-    flex-direction: column;
-    margin: -8px 0 12px;
-    padding-left: 14px;
-    border-left: 2px solid var(--color-border);
-  }
-  .page .quotas .quota {
-    min-height: 0;
-    padding: 6px 0;
-    border-top: none;
-  }
-  .page .quota .text {
-    font-size: var(--text-sm);
-    font-weight: 400;
-  }
-  .quota-name {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-  .quota-name .ui-label {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .quotas + .switch-row {
-    border-top: 1px solid var(--color-border);
-  }
-  /* Two choices side by side, the chosen one a pill, as in the island's tab bar. */
-  .segmented {
-    display: flex;
-    gap: 2px;
-    padding: 2px;
-    border: 1px solid var(--island-line);
-    border-radius: 999px;
-    background: var(--island-bg);
-  }
-  .segmented button {
-    min-height: 26px;
-    padding: 0 12px;
-    border: none;
-    border-radius: 999px;
-    background: none;
-    color: var(--island-muted);
-    font-size: var(--text-sm);
-  }
-  .segmented button:hover {
-    color: var(--island-text);
-  }
-  .segmented button.on {
-    background: var(--island-card-hover);
-    color: var(--island-text);
-  }
-  .reset {
-    margin-top: 10px;
-    color: var(--color-muted-foreground);
-  }
-</style>
diff --git a/src/components/companion/CompanionAllowRules.svelte b/src/components/companion/CompanionAllowRules.svelte
index 570a70f..51e7d88 100644
--- a/src/components/companion/CompanionAllowRules.svelte
+++ b/src/components/companion/CompanionAllowRules.svelte
@@ -22,14 +22,13 @@
   }
 </script>
 
+<!-- Titled by the settings panel's section, which tells what a rule is behind its "i". -->
 <section class="card" data-testid="companion-allow-rules">
-  <div class="head">
-    <h2>{copy.title}</h2>
-    {#if rules.length > 0}
+  {#if rules.length > 0}
+    <div class="head">
       <button class="ghost small" onclick={forgetAllRules} data-testid="companion-allow-forget">{copy.forgetAll}</button>
-    {/if}
-  </div>
-  <p class="hint">{copy.lead}</p>
+    </div>
+  {/if}
   {#if rules.length === 0}
     <p class="hint">{copy.empty}</p>
   {:else}
@@ -50,9 +49,11 @@
 <style>
   .head {
     display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
+    justify-content: flex-end;
+    padding-top: 8px;
+  }
+  .hint {
+    padding: 12px 0;
   }
   .list {
     display: flex;
diff --git a/src/components/companion/CompanionMissions.svelte b/src/components/companion/CompanionMissions.svelte
index bce09da..fd6ed2b 100644
--- a/src/components/companion/CompanionMissions.svelte
+++ b/src/components/companion/CompanionMissions.svelte
@@ -32,9 +32,8 @@
   const gone = (mission: Mission) => mission.missing || (store.projects.length > 0 && !known.has(mission.projectId));
 </script>
 
+<!-- Titled by the settings panel's section, which tells what a mission is behind its "i". -->
 <section class="card" data-testid="companion-missions">
-  <h2>{copy.missions}</h2>
-  <p class="hint">{copy.missionsHint}</p>
   {#if missions.length === 0}
     <p class="hint">{copy.missionsEmpty}</p>
   {:else}
@@ -72,6 +71,9 @@
 </section>
 
 <style>
+  .hint {
+    padding: 12px 0;
+  }
   .list {
     display: flex;
     flex-direction: column;
diff --git a/src/components/companion/CompanionReminders.svelte b/src/components/companion/CompanionReminders.svelte
index f4b500b..521d971 100644
--- a/src/components/companion/CompanionReminders.svelte
+++ b/src/components/companion/CompanionReminders.svelte
@@ -19,8 +19,8 @@
   const when = $derived(new Intl.DateTimeFormat(formatLocale(), { weekday: 'short', day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' }));
 </script>
 
+<!-- Titled by the settings panel's section. -->
 <section class="card" data-testid="companion-reminders">
-  <h2>{copy.reminders}</h2>
   {#if reminders.length === 0}
     <p class="hint">{copy.remindersEmpty}</p>
   {:else}
@@ -43,6 +43,9 @@
     padding: 0;
     list-style: none;
   }
+  .hint {
+    padding: 12px 0;
+  }
   .list li {
     display: flex;
     align-items: center;
diff --git a/src/components/desktop/DesktopCompanion.svelte b/src/components/desktop/DesktopCompanion.svelte
index 7399ddc..d623a09 100644
--- a/src/components/desktop/DesktopCompanion.svelte
+++ b/src/components/desktop/DesktopCompanion.svelte
@@ -11,7 +11,7 @@
   import { PanelTop } from '@lucide/svelte';
   import type { Companion } from '../../lib/companion/companion.svelte';
   import { writeCompanionPrefs } from '../../lib/companion/prefs';
-  import { inShell, showMain, type CompanionLayout } from '../../lib/companion/shell';
+  import { inShell, openSettings, showMain, type CompanionLayout } from '../../lib/companion/shell';
   import { strings } from '../../lib/strings';
   import CompanionAsk from '../companion/CompanionAsk.svelte';
   import CompanionAttachments from '../companion/CompanionAttachments.svelte';
@@ -128,7 +128,7 @@
         onask={(screen) => void companion.ask(screen)}
         onscope={(screenScope) => (companion.prefs = writeCompanionPrefs({ screenScope }))}
         onstop={() => void companion.active.talk.stop()}
-        onsettings={() => void showMain(null)}
+        onsettings={() => void openSettings().catch(() => {})}
         to={companion.members.length > 1 ? companion.active.name : null}
       />
       <CompanionAttachments dropped={attached} />
diff --git a/src/components/island/Island.svelte b/src/components/island/Island.svelte
index 8397a3d..1e086d5 100644
--- a/src/components/island/Island.svelte
+++ b/src/components/island/Island.svelte
@@ -12,6 +12,9 @@
     deck's tabs and the island's controls, and the tab chosen under it, the
     requests waiting and the memory warning laid above it.
 
+  Open, the settings grow out of the deck under its bar
+  (`settings/SettingsPanel.svelte`), over the tab, longer than the deck.
+
   Beside the pill and the peek hang two drops: the timer on the left while
   one runs, the music on the right (`music/MusicBubble.svelte`). Each is born
   from the island's edge on a black neck that snaps, and is taken back the
@@ -46,12 +49,14 @@
   import { MemoryWatch } from '../../lib/island/pressure.svelte';
   import { QuotaWatch } from '../../lib/island/quotas.svelte';
   import { RecapReader } from '../../lib/island/recap.svelte';
+  import { panelHeight, settingsPanel } from '../../lib/island/settings-panel.svelte';
   import { Sessions } from '../../lib/island/sessions.svelte';
   import { UpdateWatch } from '../../lib/island/update.svelte';
   import { strings } from '../../lib/strings';
   import Deck from './deck/Deck.svelte';
   import IslandBar from './IslandBar.svelte';
   import IslandDrop from './IslandDrop.svelte';
+  import SettingsPanel from './settings/SettingsPanel.svelte';
   import MusicBubble from './music/MusicBubble.svelte';
   import TimerBubble from './TimerBubble.svelte';
   import AwayCard from './views/AwayCard.svelte';
@@ -403,6 +408,9 @@
     </div>
   {/if}
 </div>
+{#if settingsPanel.open && frame.size === 'open'}
+  <SettingsPanel height={panelHeight(screen.availHeight)} {reduced} late={box.current.w < OPEN_WIDTH - 4} />
+{/if}
 {#if sides && musicShown}
   <IslandDrop side="right" {reduced} {onresize} onside={(on) => (onSide = on)} tint={{ accent: companion.music.accent, playing: companion.media?.playing === true }}>
     <MusicBubble {companion} {onresize} room={sideRoom} />
diff --git a/src/components/island/assistant/AssistantChat.svelte b/src/components/island/assistant/AssistantChat.svelte
index 862ee2f..abbcb72 100644
--- a/src/components/island/assistant/AssistantChat.svelte
+++ b/src/components/island/assistant/AssistantChat.svelte
@@ -112,7 +112,7 @@
   {#if nobody}
     <div class="nobody" data-testid="assistant-no-agent">
       <p>{copy.noAgent}</p>
-      <button class="primary small" onclick={() => void openSettings().catch(() => {})}>{copy.makeAgent}</button>
+      <button class="primary small" onclick={() => void openSettings('crew').catch(() => {})}>{copy.makeAgent}</button>
     </div>
   {:else}
     <header class="head">
diff --git a/src/components/island/deck/DeckBar.svelte b/src/components/island/deck/DeckBar.svelte
index f28b668..5e3134f 100644
--- a/src/components/island/deck/DeckBar.svelte
+++ b/src/components/island/deck/DeckBar.svelte
@@ -3,7 +3,8 @@
   count of requests waiting on it), the things the user keeps in the bar
   (`lib/island/bar.ts`: the deck's tabs, an app or a web link) as a tablist
   whose focus moves with the arrows, Home and End, and the island's controls
-  on the right: the quotas, the pin, Settings and the sound.
+  on the right: the quotas, the pin, Settings (the panel under the bar,
+  `settings/SettingsPanel.svelte`) and the sound.
 
   In edit mode (`frame.editing`, asked from Settings or by a right-click on
   the bar), each thing wiggles a little: a drag moves it along its row
@@ -18,13 +19,13 @@
   import { Check, Gauge, Globe, Pin, PinOff, Settings, Volume2, VolumeX, X } from '@lucide/svelte';
   import type { Companion, Member } from '../../../lib/companion/companion.svelte';
   import { writeCompanionPrefs } from '../../../lib/companion/prefs';
-  import { openSettings } from '../../../lib/companion/shell';
   import { barTabs, canRemove, LABEL_MAX, linkHost, moveItem, moveTool, removeItem, removeTool, renameItem, shownTab, writeBarEdit, type BarItem, type BarTool } from '../../../lib/island/bar';
   import { appIcons as icons, type Bar } from '../../../lib/island/bar.svelte';
   import { RowSorter } from '../../../lib/island/bar-sort.svelte';
   import { tabKey, type DeckTab } from '../../../lib/island/deck-tabs';
   import { gazeOf, moodOf } from '../../../lib/island/face';
   import type { IslandFrame } from '../../../lib/island/frame.svelte';
+  import { settingsPanel } from '../../../lib/island/settings-panel.svelte';
   import { openApp, openLink } from '../../../lib/windows/native';
   import { fill, strings } from '../../../lib/strings';
   import CompanionCharacter from '../../companion/CompanionCharacter.svelte';
@@ -389,7 +390,7 @@
         <Check size={14} strokeWidth={2.4} />{copy.deck.bar.done}
       </button>
     {:else}
-      <button class="tool" aria-label={copy.settings} title={copy.settings} data-testid="island-settings" onclick={() => void openSettings().catch(() => {})}>
+      <button class="tool" class:on={settingsPanel.open} aria-pressed={settingsPanel.open} aria-label={copy.settings} title={copy.settings} data-settings-toggle data-testid="island-settings" onclick={() => settingsPanel.toggle()}>
         <Settings size={15} strokeWidth={1.9} />
       </button>
     {/if}
diff --git a/src/components/island/settings/BrainSettings.svelte b/src/components/island/settings/BrainSettings.svelte
new file mode 100644
index 0000000..e690d5b
--- /dev/null
+++ b/src/components/island/settings/BrainSettings.svelte
@@ -0,0 +1,122 @@
+<!--
+  Settings, Brain and model: what an agent made here for B.O.T.S runs on (the
+  agent and its model, the account, the effort) and what it may do on this
+  computer. Its own component, so the model picker can change on its own.
+-->
+<script lang="ts">
+  import { defaultTitleModel, providerEnabled, type ModelInfo } from '@boite/contracts';
+  import { separator, type MenuItem } from '@boite/ui/lib/menu';
+  import { DEFAULT_MODEL_NAMES } from '@boite/ui/lib/model-defaults';
+  import { fill, strings } from '../../../lib/strings';
+  import type { CoreLink } from '../../../lib/core.svelte';
+  import type { CompanionControl, CompanionPrefs } from '../../../lib/companion/prefs';
+  import SettingPick from './SettingPick.svelte';
+
+  let { store, prefs, save }: { store: CoreLink; prefs: CompanionPrefs; save: (patch: Partial<CompanionPrefs>) => void } = $props();
+
+  const AUTO = 'auto';
+  const CONTROLS: CompanionControl[] = ['ask', 'auto'];
+  const copy = $derived(strings.companion.settings);
+
+  /** The agents that can answer: on, here, with an account signed in. */
+  let usable = $derived(
+    store.providers.filter((provider) => providerEnabled(provider) && provider.available).flatMap((provider) => {
+      const accounts = store.accountsOf(provider.id).filter((account) => account.status === 'ok');
+      return accounts.length > 0 ? [{ provider, accounts }] : [];
+    })
+  );
+
+  // Reading an agent's models starts it for a moment: the chosen one is read
+  // to name its model and efforts, the others once the model menu is reached.
+  $effect(() => {
+    const chosen = usable.find((entry) => entry.provider.id === prefs.providerId);
+    if (chosen) void store.probeModels(chosen.provider.id, (accountOf(chosen.provider.id) ?? chosen.accounts[0]!).id).catch(() => {});
+  });
+
+  function readAllModels() {
+    for (const { provider, accounts } of usable) void store.probeModels(provider.id, accounts[0]!.id).catch(() => {});
+  }
+
+  const accountOf = (providerId: string) => {
+    const accounts = usable.find((entry) => entry.provider.id === providerId)?.accounts ?? [];
+    return accounts.find((account) => account.id === prefs.accountId) ?? accounts[0] ?? null;
+  };
+
+  let groups = $derived(
+    usable.map(({ provider, accounts }) => {
+      const account = provider.id === prefs.providerId ? (accountOf(provider.id) ?? accounts[0]!) : accounts[0]!;
+      const offered = store.modelsOf(provider.id, account.id).filter((model) => model.id !== 'default');
+      const small = defaultTitleModel(provider, offered);
+      const named = (id: string): ModelInfo => offered.find((model) => model.id === id) ?? { id, name: DEFAULT_MODEL_NAMES[id] ?? id };
+      const chosen = prefs.providerId === provider.id ? prefs.model : null;
+      const ids = [small, chosen, ...offered.filter((model) => model.legacy !== true).map((model) => model.id)];
+      return { provider, small, models: [...new Set(ids.filter((id): id is string => id !== null))].map(named) };
+    })
+  );
+
+  const idOf = (providerId: string, model: string) => JSON.stringify([providerId, model]);
+
+  let modelItems = $derived<MenuItem[]>([
+    { id: AUTO, label: copy.automatic, hint: copy.automaticHint, active: prefs.providerId === null },
+    ...groups.flatMap(({ provider, small, models }) => [
+      separator(`sep-${provider.id}`),
+      ...models.map((model) => ({
+        id: idOf(provider.id, model.id),
+        label: model.name,
+        hint: provider.shortName,
+        active: prefs.providerId === provider.id && (prefs.model ?? small) === model.id
+      }))
+    ])
+  ]);
+
+  let group = $derived(groups.find((entry) => entry.provider.id === prefs.providerId));
+  let modelId = $derived(group ? (prefs.model ?? group.small) : null);
+  let model = $derived(group?.models.find((entry) => entry.id === modelId));
+  let currentModel = $derived(prefs.providerId === null ? copy.automatic : model ? `${model.name} · ${group!.provider.shortName}` : (prefs.model ?? prefs.providerId));
+
+  let accounts = $derived(usable.find((entry) => entry.provider.id === prefs.providerId)?.accounts ?? []);
+  let account = $derived(prefs.providerId === null ? null : accountOf(prefs.providerId));
+  let accountItems = $derived<MenuItem[]>(accounts.map((entry) => ({ id: entry.id, label: entry.label, active: entry.id === account?.id })));
+
+  let levels = $derived(model?.effort?.levels ?? []);
+  let effortItems = $derived<MenuItem[]>([
+    { id: AUTO, label: copy.effortDefault, active: prefs.effort === null },
+    ...levels.map((level) => ({ id: level.id, label: level.label, hint: level.description, active: prefs.effort === level.id }))
+  ]);
+  let currentEffort = $derived(levels.find((level) => level.id === prefs.effort)?.label ?? copy.effortDefault);
+
+  let controlItems = $derived<MenuItem[]>(CONTROLS.map((control) => ({ id: control, label: copy.controls[control], hint: copy.controlsHint[control], active: prefs.control === control })));
+  let warmMinutes = $derived(store.settings?.warmProcessMinutes ?? null);
+
+  function pickModel(id: string) {
+    if (id === AUTO) return save({ providerId: null, accountId: null, model: null, effort: null });
+    const [providerId, model] = JSON.parse(id) as [string, string];
+    save({ providerId, model, accountId: accountOf(providerId)?.id ?? null, effort: null });
+  }
+</script>
+
+<div class="card">
+  <SettingPick label={copy.model} hint={copy.modelHint} items={modelItems} current={currentModel} onpick={pickModel} testid="companion-model" onreach={readAllModels} />
+  {#if accounts.length > 1}
+    <SettingPick label={copy.account} items={accountItems} current={account?.label ?? ''} onpick={(id) => save({ accountId: id })} testid="companion-account" />
+  {/if}
+  {#if levels.length > 0}
+    <SettingPick label={copy.effort} items={effortItems} current={currentEffort} onpick={(id) => save({ effort: id === AUTO ? null : id })} testid="companion-effort" />
+  {/if}
+  <SettingPick label={copy.control} hint={copy.controlHint} items={controlItems} current={copy.controls[prefs.control]} onpick={(id) => save({ control: id as CompanionControl })} testid="companion-control" />
+  <!-- Acting without asking is the one choice that needs saying aloud. -->
+  {#if prefs.control === 'auto'}<p class="hint caution">{copy.controlsHint.auto}</p>{/if}
+</div>
+{#if warmMinutes !== null}
+  <p class="hint warm">{warmMinutes > 0 ? fill(copy.warmOn, { minutes: String(warmMinutes) }) : copy.warmOff}</p>
+{/if}
+
+<style>
+  .caution {
+    padding-bottom: 12px;
+    color: var(--island-attention);
+  }
+  .warm {
+    padding: 0 4px;
+  }
+</style>
diff --git a/src/components/island/settings/FocusSection.svelte b/src/components/island/settings/FocusSection.svelte
new file mode 100644
index 0000000..7898a39
--- /dev/null
+++ b/src/components/island/settings/FocusSection.svelte
@@ -0,0 +1,28 @@
+<!--
+  Settings, Focus: the pomodoro's work and break, and the focus it keeps
+  while the work runs.
+-->
+<script lang="ts">
+  import type { MenuItem } from '@boite/ui/lib/menu';
+  import { fill, strings } from '../../../lib/strings';
+  import type { CompanionPrefs } from '../../../lib/companion/prefs';
+  import SettingPick from './SettingPick.svelte';
+  import SettingSwitch from './SettingSwitch.svelte';
+
+  let { prefs, save }: { prefs: CompanionPrefs; save: (patch: Partial<CompanionPrefs>) => void } = $props();
+
+  const WORK_MINUTES = [15, 20, 25, 30, 45, 50, 60, 90];
+  const BREAK_MINUTES = [3, 5, 10, 15];
+  const copy = $derived(strings.companion.settings);
+  const minutesLabel = (count: number) => fill(copy.minutes, { count: String(count) });
+  const minuteItems = (choices: number[], current: number): MenuItem[] =>
+    [...new Set([...choices, current])].sort((a, b) => a - b).map((count) => ({ id: String(count), label: minutesLabel(count), active: count === current }));
+  let workItems = $derived(minuteItems(WORK_MINUTES, prefs.workMinutes));
+  let breakItems = $derived(minuteItems(BREAK_MINUTES, prefs.breakMinutes));
+</script>
+
+<div class="card">
+  <SettingPick label={copy.workMinutes} items={workItems} current={minutesLabel(prefs.workMinutes)} onpick={(id) => save({ workMinutes: Number(id) })} testid="companion-work-minutes" />
+  <SettingPick label={copy.breakMinutes} items={breakItems} current={minutesLabel(prefs.breakMinutes)} onpick={(id) => save({ breakMinutes: Number(id) })} testid="companion-break-minutes" />
+  <SettingSwitch label={copy.focusOnWork} hint={copy.focusOnWorkHint} checked={prefs.focusOnWork} onchange={(focusOnWork) => save({ focusOnWork })} testid="companion-focus-on-work" />
+</div>
diff --git a/src/components/island/settings/IslandSection.svelte b/src/components/island/settings/IslandSection.svelte
new file mode 100644
index 0000000..1beb002
--- /dev/null
+++ b/src/components/island/settings/IslandSection.svelte
@@ -0,0 +1,101 @@
+<!--
+  Settings, Island: what the companion shows and does around the island:
+  music and lyrics, the quotas (one switch per subscription), closing and
+  hiding, sounds, the recap after an absence and the waiting threads' radar.
+-->
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import ProviderLogo from '@boite/ui/components/ProviderLogo.svelte';
+  import { gatewayReader } from '@boite/ui/lib/quota-reader.svelte';
+  import { fill, strings } from '../../../lib/strings';
+  import type { CoreLink } from '../../../lib/core.svelte';
+  import { hudGauges } from '../../../lib/companion/hud';
+  import type { CompanionPrefs } from '../../../lib/companion/prefs';
+  import SettingPick from './SettingPick.svelte';
+  import SettingSwitch from './SettingSwitch.svelte';
+
+  let { store, prefs, save }: { store: CoreLink; prefs: CompanionPrefs; save: (patch: Partial<CompanionPrefs>) => void } = $props();
+
+  const copy = $derived(strings.companion.settings);
+  const RADAR_MINUTES = [5, 10, 15, 30, 60];
+  const radarLabel = (count: number) => (count === 0 ? copy.radarOff : fill(copy.minutes, { count: String(count) }));
+  let radarItems = $derived(
+    [...new Set([0, ...RADAR_MINUTES, prefs.radarMinutes])]
+      .sort((a, b) => a - b)
+      .map((count) => ({ id: String(count), label: radarLabel(count), active: count === prefs.radarMinutes }))
+  );
+
+  /** The gateway's subscriptions, as the companion draws them, to pick the ones it shows. */
+  let gateway = $derived(gatewayReader(store.endpointUrl ?? 'here'));
+  let gauges = $derived(hudGauges(gateway.state));
+  $effect(() => {
+    const client = store.client;
+    const current = gateway;
+    if (!client || !store.owner || store.connection !== 'ready' || !prefs.quotas) return;
+    const off = client.on('subscriptionProxy.quotasUpdated', (value) => current.accept(value));
+    untrack(() => void current.read(client));
+    return off;
+  });
+
+  function showQuota(id: string, shown: boolean) {
+    const others = prefs.hiddenQuotas.filter((hidden) => hidden !== id);
+    save({ hiddenQuotas: shown ? others : [...others, id] });
+  }
+</script>
+
+<div class="card">
+  <SettingSwitch label={copy.music} hint={copy.musicHint} checked={prefs.music} onchange={(music) => save({ music })} testid="companion-music" />
+  <SettingSwitch label={copy.lyrics} hint={copy.lyricsHint} checked={prefs.lyrics} onchange={(lyrics) => save({ lyrics })} testid="companion-lyrics" />
+  <SettingSwitch label={copy.quotas} hint={copy.quotasHint} checked={prefs.quotas} onchange={(quotas) => save({ quotas })} testid="companion-quotas" />
+  {#if prefs.quotas && gauges.length > 0}
+    <div class="quotas" role="group" aria-label={copy.quotasShown}>
+      {#each gauges as gauge (gauge.id)}
+        <label class="quota">
+          <span class="quota-name"><ProviderLogo providerId={gauge.providerId} size={16} /><span class="ui-label">{gauge.name}</span></span>
+          <input type="checkbox" role="switch" checked={!prefs.hiddenQuotas.includes(gauge.id)} onchange={(event) => showQuota(gauge.id, event.currentTarget.checked)} data-testid="companion-quota" />
+        </label>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<div class="card">
+  <SettingSwitch label={copy.closeOutside} hint={copy.closeOutsideHint} checked={prefs.closeOutside} onchange={(closeOutside) => save({ closeOutside })} testid="companion-close-outside" />
+  <SettingSwitch label={copy.hideFullscreen} hint={copy.hideFullscreenHint} checked={prefs.hideFullscreen} onchange={(hideFullscreen) => save({ hideFullscreen })} testid="companion-hide-fullscreen" />
+  <SettingSwitch label={copy.sounds} hint={copy.soundsHint} checked={prefs.sounds} onchange={(sounds) => save({ sounds })} testid="companion-sounds" />
+</div>
+
+<div class="card">
+  <SettingSwitch label={copy.awayRecap} hint={copy.awayRecapHint} checked={prefs.awayRecap} onchange={(awayRecap) => save({ awayRecap })} testid="companion-away-recap" />
+  <SettingPick label={copy.radar} hint={copy.radarHint} items={radarItems} current={radarLabel(prefs.radarMinutes)} onpick={(id) => save({ radarMinutes: Number(id) })} testid="companion-radar-minutes" />
+</div>
+
+<style>
+  /* The subscriptions under "Show quotas", one switch each, set in under it. */
+  .quotas {
+    display: flex;
+    flex-direction: column;
+    margin: -4px 0 12px;
+    padding-left: 14px;
+    border-left: 2px solid var(--island-line-strong);
+  }
+  .quota {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 5px 0;
+    font-size: var(--text-sm);
+  }
+  .quota-name {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+  }
+  .quota-name .ui-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+</style>
diff --git a/src/components/island/settings/MascotSection.svelte b/src/components/island/settings/MascotSection.svelte
new file mode 100644
index 0000000..57103e8
--- /dev/null
+++ b/src/components/island/settings/MascotSection.svelte
@@ -0,0 +1,31 @@
+<!--
+  Settings, Mascot: the island's robot, and the first agent's on the desktop
+  (`RobotPicker`), or back to the first agent's own look.
+-->
+<script lang="ts">
+  import { strings } from '../../../lib/strings';
+  import { MASCOT_FAMILIES, type CompanionPrefs, type Mascot } from '../../../lib/companion/prefs';
+  import { CLASSIC_SKIN } from '../../../lib/companion/crew';
+  import { parseRobot } from '../../../lib/robots';
+  import RobotPicker from '../../agents/RobotPicker.svelte';
+
+  let { prefs, save }: { prefs: CompanionPrefs; save: (patch: Partial<CompanionPrefs>) => void } = $props();
+
+  /** What the picker shows until one is chosen: Boîte, the classic box. */
+  const CLASSIC = parseRobot(CLASSIC_SKIN)!;
+  const copy = $derived(strings.companion.settings);
+</script>
+
+<div class="card mascot" data-testid="companion-mascot">
+  <RobotPicker robot={prefs.mascot ?? CLASSIC} families={MASCOT_FAMILIES} compact onpick={(robot) => save({ mascot: robot as Mascot })} />
+  {#if prefs.mascot}
+    <button type="button" class="ghost small reset" onclick={() => save({ mascot: null })} data-testid="companion-mascot-reset">{copy.mascotReset}</button>
+  {/if}
+</div>
+
+<style>
+  .reset {
+    margin-top: 10px;
+    color: var(--color-muted-foreground);
+  }
+</style>
diff --git a/src/components/island/settings/PlaceSection.svelte b/src/components/island/settings/PlaceSection.svelte
new file mode 100644
index 0000000..0501243
--- /dev/null
+++ b/src/components/island/settings/PlaceSection.svelte
@@ -0,0 +1,116 @@
+<!--
+  Settings, Place: the robots in the island or loose on the desktop, how the
+  island opens and rests, its bar's edit mode, the screen, the place on the
+  desktop and the shortcut. The preferences are this computer's
+  (`lib/companion/prefs.ts`); the window follows each change as it is made.
+-->
+<script lang="ts">
+  import { PencilRuler } from '@lucide/svelte';
+  import InfoTip from '@boite/ui/components/InfoTip.svelte';
+  import type { MenuItem } from '@boite/ui/lib/menu';
+  import { fill, strings } from '../../../lib/strings';
+  import { COMPANION_HOTKEYS, PILL_RESTS, type CompanionAnchor, type CompanionPrefs, type CompanionRobots, type PillRest } from '../../../lib/companion/prefs';
+  import { readStatus, subscribeCompanionData } from '../../../lib/companion/memory';
+  import { companionMonitors, type CompanionMonitor } from '../../../lib/companion/shell';
+  import { writeBarEdit } from '../../../lib/island/bar';
+  import SettingPick from './SettingPick.svelte';
+  import SettingSwitch from './SettingSwitch.svelte';
+
+  let { prefs, save }: { prefs: CompanionPrefs; save: (patch: Partial<CompanionPrefs>) => void } = $props();
+
+  const PRIMARY = 'primary';
+  const OFF = 'off';
+  const ROBOTS: CompanionRobots[] = ['island', 'desktop'];
+  const copy = $derived(strings.companion.settings);
+
+  let monitors = $state.raw<CompanionMonitor[]>([]);
+  let status = $state(readStatus());
+  $effect(() => subscribeCompanionData(() => (status = readStatus())));
+  $effect(() => {
+    void companionMonitors().then((list) => (monitors = list)).catch(() => {});
+  });
+
+  let screenItems = $derived<MenuItem[]>([
+    { id: PRIMARY, label: copy.primary, active: prefs.monitor === null },
+    ...monitors.map((monitor) => ({
+      id: monitor.name,
+      label: monitor.name,
+      hint: fill(copy.screenSize, { width: String(monitor.width), height: String(monitor.height) }),
+      active: prefs.monitor === monitor.name
+    }))
+  ]);
+
+  // Where it was dropped is offered once it has been dropped somewhere.
+  let anchors = $derived<CompanionAnchor[]>(prefs.spot ? ['left', 'center', 'right', 'free'] : ['left', 'center', 'right']);
+  let anchorItems = $derived<MenuItem[]>(anchors.map((anchor) => ({ id: anchor, label: copy.anchors[anchor], active: prefs.anchor === anchor })));
+
+  let hotkeyItems = $derived<MenuItem[]>([
+    { id: OFF, label: copy.hotkeyOff, active: prefs.hotkey === null },
+    ...COMPANION_HOTKEYS.map((hotkey) => ({ id: hotkey, label: hotkey, active: prefs.hotkey === hotkey }))
+  ]);
+  let hotkeyTaken = $derived(prefs.hotkey !== null && status.hotkeyError === prefs.hotkey);
+
+  let pillRestItems = $derived<MenuItem[]>(PILL_RESTS.map((rest) => ({ id: rest, label: copy.pillRests[rest], hint: copy.pillRestHints[rest], active: prefs.pillRest === rest })));
+</script>
+
+<div class="card">
+  <div class="switch-row">
+    <span class="text ui-label-box"><span class="ui-label">{copy.robots}</span><InfoTip topic={copy.robots} text={copy.robotsHint} /></span>
+    <div class="segmented" role="radiogroup" aria-label={copy.robots} data-testid="companion-robots">
+      {#each ROBOTS as robots (robots)}
+        <button type="button" role="radio" aria-checked={prefs.robots === robots} class:on={prefs.robots === robots} onclick={() => save({ robots })} data-testid={`companion-robots-${robots}`}>{copy.robotsChoice[robots]}</button>
+      {/each}
+    </div>
+  </div>
+  <SettingPick label={copy.screen} hint={copy.screenHint} items={screenItems} current={prefs.monitor ?? copy.primary} onpick={(id) => save({ monitor: id === PRIMARY ? null : id })} testid="companion-screen" />
+  {#if prefs.robots === 'desktop'}
+    <SettingPick label={copy.position} hint={copy.positionHint} items={anchorItems} current={copy.anchors[prefs.anchor]} onpick={(id) => save({ anchor: id as CompanionAnchor })} testid="companion-position" />
+  {/if}
+  <SettingPick label={copy.hotkey} hint={copy.hotkeyHint} items={hotkeyItems} current={prefs.hotkey ?? copy.hotkeyOff} onpick={(id) => save({ hotkey: id === OFF ? null : id })} testid="companion-hotkey" />
+  {#if hotkeyTaken}<p class="hint problem" role="alert">{fill(copy.hotkeyTaken, { hotkey: prefs.hotkey! })}</p>{/if}
+</div>
+
+{#if prefs.robots === 'island'}
+  <div class="card">
+    <SettingSwitch label={copy.openOnHover} hint={copy.openOnHoverHint} checked={prefs.openOnHover} onchange={(openOnHover) => save({ openOnHover })} testid="companion-open-on-hover" />
+    <SettingPick label={copy.pillRest} hint={copy.pillRestHint} items={pillRestItems} current={copy.pillRests[prefs.pillRest]} onpick={(id) => save({ pillRest: id as PillRest })} testid="companion-pill-rest" />
+    <div class="switch-row">
+      <span class="text ui-label-box"><span class="ui-label">{copy.bar}</span><InfoTip topic={copy.bar} text={copy.barHint} /></span>
+      <!-- The edit mode is the island's: the panel makes way for it (`App.svelte`). -->
+      <button type="button" class="small" onclick={() => writeBarEdit(true)} data-testid="companion-bar-edit"><PencilRuler size={13} />{copy.barEdit}</button>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .problem {
+    padding-bottom: 12px;
+    color: var(--color-danger);
+  }
+  /* Two choices side by side, the chosen one a pill, as in the island's tab bar. */
+  .segmented {
+    display: flex;
+    gap: 2px;
+    padding: 2px;
+    border: 1px solid var(--island-line);
+    border-radius: 999px;
+    background: var(--island-bg);
+  }
+  .segmented button {
+    min-height: 26px;
+    padding: 0 12px;
+    border: none;
+    border-radius: 999px;
+    background: none;
+    box-shadow: none;
+    color: var(--island-muted);
+    font-size: var(--text-sm);
+  }
+  .segmented button:hover {
+    color: var(--island-text);
+  }
+  .segmented button.on {
+    background: var(--deck-accent-soft);
+    color: var(--deck-accent-ink);
+  }
+</style>
diff --git a/src/components/island/settings/SettingPick.svelte b/src/components/island/settings/SettingPick.svelte
new file mode 100644
index 0000000..9af14be
--- /dev/null
+++ b/src/components/island/settings/SettingPick.svelte
@@ -0,0 +1,41 @@
+<!--
+  A setting's row in the settings panel: its name, its "i" when it has more
+  to say, and a menu of its choices on the right (Boite's `Menu`).
+-->
+<script lang="ts">
+  import { ChevronDown } from '@lucide/svelte';
+  import InfoTip from '@boite/ui/components/InfoTip.svelte';
+  import Menu from '@boite/ui/components/Menu.svelte';
+  import type { MenuItem } from '@boite/ui/lib/menu';
+
+  interface Props {
+    label: string;
+    hint?: string | null;
+    items: MenuItem[];
+    current: string;
+    onpick: (id: string) => void;
+    testid: string;
+    /** The menu is reached: focus is the one sign, a click focusing its button too. */
+    onreach?: () => void;
+  }
+
+  let { label, hint = null, items, current, onpick, testid, onreach }: Props = $props();
+</script>
+
+<div class="switch-row" onfocusin={onreach}>
+  <span class="text ui-label-box">
+    <span class="ui-label">{label}</span>{#if hint}<InfoTip topic={label} text={hint} />{/if}
+  </span>
+  <Menu {items} {onpick} {label} placement="bottom" align="end" {testid}>
+    <span class="current ui-label">{current}</span><ChevronDown size={13} />
+  </Menu>
+</div>
+
+<style>
+  .current {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 26ch;
+  }
+</style>
diff --git a/src/components/island/settings/SettingSwitch.svelte b/src/components/island/settings/SettingSwitch.svelte
new file mode 100644
index 0000000..c1dccfa
--- /dev/null
+++ b/src/components/island/settings/SettingSwitch.svelte
@@ -0,0 +1,22 @@
+<!--
+  An on/off setting's row in the settings panel: its name, its "i", and the
+  switch on the right.
+-->
+<script lang="ts">
+  import InfoTip from '@boite/ui/components/InfoTip.svelte';
+
+  interface Props {
+    label: string;
+    hint?: string | null;
+    checked: boolean;
+    onchange: (on: boolean) => void;
+    testid: string;
+  }
+
+  let { label, hint = null, checked, onchange, testid }: Props = $props();
+</script>
+
+<label class="switch-row">
+  <span class="text ui-label-box"><span class="ui-label">{label}</span>{#if hint}<InfoTip topic={label} text={hint} />{/if}</span>
+  <input type="checkbox" role="switch" {checked} onchange={(event) => onchange(event.currentTarget.checked)} data-testid={testid} />
+</label>
diff --git a/src/components/island/settings/SettingsPanel.svelte b/src/components/island/settings/SettingsPanel.svelte
new file mode 100644
index 0000000..27bb469
--- /dev/null
+++ b/src/components/island/settings/SettingsPanel.svelte
@@ -0,0 +1,379 @@
+<!--
+  The settings panel (`lib/island/settings-panel.svelte.ts`): it grows out of
+  the open deck, under its bar, on the deck's black with its corners and its
+  shadow. A rail of sections on the left, the section on the right, scrolling
+  inside the panel. The deck's gear toggles it; Escape (`App.svelte`), a press
+  elsewhere in the window and a click outside it close it.
+
+  It reaches Boite on its own connection (`lib/core.svelte.ts`), opened the
+  first time the panel shows and kept for the page's life: the agents, models
+  and projects the sections offer. The preferences are this computer's
+  (`lib/companion/prefs.ts`), written as each one changes.
+
+  It opens with a reveal from the bar down (clip-path), a short slide and a
+  fade, all composited: nothing animates its size.
+-->
+<script module lang="ts">
+  import { CoreLink } from '../../../lib/core.svelte';
+
+  let shared: CoreLink | null = null;
+
+  /** The panel's connection to Boite: one per page, opened when first needed. */
+  function coreLink(): CoreLink {
+    if (shared) return shared;
+    const link = new CoreLink();
+    const demo = import.meta.env.DEV && new URLSearchParams(location.search).get('fake') === '1';
+    void link.start(demo ? async () => new (await import('../../../lib/fake-client')).FakeClient() : undefined);
+    return (shared = link);
+  }
+</script>
+
+<script lang="ts">
+  import { tick } from 'svelte';
+  import { fade, type TransitionConfig } from 'svelte/transition';
+  import { cubicIn, cubicOut } from 'svelte/easing';
+  import { Bell, Bot, Brain, CalendarClock, ClipboardList, LayoutPanelTop, ShieldCheck, SlidersHorizontal, Timer, Users } from '@lucide/svelte';
+  import InfoTip from '@boite/ui/components/InfoTip.svelte';
+  import { fill, strings } from '../../../lib/strings';
+  import { CREW_MAX, readCompanionPrefs, subscribeCompanionPrefs, writeCompanionPrefs, type CompanionPrefs } from '../../../lib/companion/prefs';
+  import { listenShell } from '../../../lib/companion/shell';
+  import { readWindowsPrefs, subscribeWindowsPrefs, writeWindowsPrefs } from '../../../lib/windows/prefs';
+  import { SETTINGS_SECTIONS, settingsPanel, stepSection, type SettingsSection } from '../../../lib/island/settings-panel.svelte';
+  import CompanionAllowRules from '../../companion/CompanionAllowRules.svelte';
+  import CompanionCrewSettings from '../../companion/CompanionCrewSettings.svelte';
+  import CompanionMissions from '../../companion/CompanionMissions.svelte';
+  import CompanionReminders from '../../companion/CompanionReminders.svelte';
+  import BrainSettings from './BrainSettings.svelte';
+  import FocusSection from './FocusSection.svelte';
+  import IslandSection from './IslandSection.svelte';
+  import MascotSection from './MascotSection.svelte';
+  import PlaceSection from './PlaceSection.svelte';
+  import SettingSwitch from './SettingSwitch.svelte';
+
+  interface Props {
+    /** The panel's height, decided before it shows (`panelHeight`). */
+    height: number;
+    reduced: boolean;
+    /** The island is still opening: the panel waits for it to reach the deck's width. */
+    late: boolean;
+  }
+
+  let { height, reduced, late }: Props = $props();
+
+  const ICONS = { place: LayoutPanelTop, mascot: Bot, crew: Users, brain: Brain, island: SlidersHorizontal, clipboard: ClipboardList, focus: Timer, reminders: Bell, missions: CalendarClock, permissions: ShieldCheck } as const;
+  /** How long the island takes to reach the deck's width once it opens. */
+  const LATE_MS = 160;
+
+  const copy = $derived(strings.island.settingsPanel);
+  const sets = $derived(strings.companion.settings);
+  const store = coreLink();
+
+  let prefs = $state<CompanionPrefs>(readCompanionPrefs());
+  $effect(() => subscribeCompanionPrefs((next) => (prefs = next)));
+  // The deck's computer tabs keep their own prefs (`lib/windows/prefs.ts`).
+  let windowsPrefs = $state(readWindowsPrefs());
+  $effect(() => subscribeWindowsPrefs((next) => (windowsPrefs = next)));
+
+  function save(patch: Partial<CompanionPrefs>) {
+    prefs = writeCompanionPrefs(patch);
+  }
+
+  /** What a section says behind its title's "i", when it says more than its rows. */
+  const hints = $derived<Partial<Record<SettingsSection, string>>>({
+    mascot: sets.mascotHint,
+    crew: fill(sets.crew.hint, { count: String(CREW_MAX) }),
+    brain: sets.brainHint,
+    focus: sets.pomodoroHint,
+    missions: sets.missionsHint,
+    permissions: strings.island.allow.lead
+  });
+  const section = $derived(settingsPanel.section);
+  const hint = $derived(hints[section] ?? null);
+
+  let panel = $state<HTMLElement>();
+  let pane = $state<HTMLElement>();
+  const tabs = $state<Partial<Record<SettingsSection, HTMLButtonElement>>>({});
+
+  // Opened: the keyboard comes to the panel, so Escape works at once; Tab reaches the rail.
+  $effect(() => {
+    void tick().then(() => panel?.focus({ preventScroll: true }));
+  });
+
+  // A press elsewhere in the window, the gear aside (it toggles), or a click outside it closes the panel.
+  $effect(() => {
+    const press = (event: PointerEvent) => {
+      const target = event.target;
+      if (!(target instanceof Element) || panel?.contains(target) || target.closest('[data-settings-toggle]')) return;
+      settingsPanel.close();
+    };
+    document.addEventListener('pointerdown', press, true);
+    let stopOutside: (() => void) | null = null;
+    let gone = false;
+    void listenShell('outside', () => settingsPanel.close()).then((stop) => (gone ? stop() : (stopOutside = stop)));
+    return () => {
+      gone = true;
+      document.removeEventListener('pointerdown', press, true);
+      stopOutside?.();
+    };
+  });
+
+  function pick(next: SettingsSection) {
+    if (next === settingsPanel.section) return;
+    settingsPanel.pick(next);
+    if (pane) pane.scrollTop = 0;
+  }
+
+  function railKey(event: KeyboardEvent) {
+    const by = event.key === 'ArrowDown' ? 1 : event.key === 'ArrowUp' ? -1 : 0;
+    const to = by !== 0 ? stepSection(settingsPanel.section, by) : event.key === 'Home' ? SETTINGS_SECTIONS[0] : event.key === 'End' ? SETTINGS_SECTIONS.at(-1)! : null;
+    if (!to) return;
+    event.preventDefault();
+    pick(to);
+    tabs[to]?.focus({ preventScroll: true });
+  }
+
+  /** The panel unfolds from the bar down: a clip-path reveal, a short slide, a fade. */
+  function unfold(_node: Element, { leaving = false } = {}): TransitionConfig {
+    if (reduced) return { duration: 120, css: (t) => `opacity: ${t}` };
+    return {
+      delay: leaving || !late ? 0 : LATE_MS,
+      duration: leaving ? 170 : 280,
+      easing: leaving ? cubicIn : cubicOut,
+      css: (t, u) => `opacity: ${Math.min(1, t * 1.8)}; transform: translateY(${(-12 * u).toFixed(2)}px); clip-path: inset(0 0 ${(u * 100).toFixed(2)}% 0 round 0 0 var(--deck-radius) var(--deck-radius));`
+    };
+  }
+</script>
+
+<div
+  class="settings-panel"
+  bind:this={panel}
+  data-hit
+  data-testid="island-settings-panel"
+  role="dialog"
+  aria-label={strings.island.settings}
+  tabindex="-1"
+  style:height="{height}px"
+  in:unfold
+  out:unfold={{ leaving: true }}
+>
+  <div class="rail" role="tablist" aria-orientation="vertical" aria-label={copy.sections} tabindex="-1" onkeydown={railKey}>
+    {#each SETTINGS_SECTIONS as id (id)}
+      {@const Icon = ICONS[id]}
+      <button
+        type="button"
+        role="tab"
+        id="settings-tab-{id}"
+        aria-selected={section === id}
+        aria-controls="settings-pane"
+        tabindex={section === id ? 0 : -1}
+        class:on={section === id}
+        bind:this={tabs[id]}
+        onclick={() => pick(id)}
+        data-testid="settings-section-{id}"
+      >
+        <Icon size={15} strokeWidth={1.9} aria-hidden="true" /><span>{copy.names[id]}</span>
+      </button>
+    {/each}
+  </div>
+  <div class="pane" id="settings-pane" role="tabpanel" aria-labelledby="settings-tab-{section}" bind:this={pane} data-testid="companion-settings">
+    {#key section}
+      <div class="section" in:fade={{ duration: reduced ? 0 : 140 }}>
+        <header>
+          <h2 class="ui-label-box"><span class="ui-label">{copy.names[section]}</span>{#if hint}<InfoTip topic={copy.names[section]} text={hint} />{/if}</h2>
+        </header>
+        {#if store.waiting && (section === 'crew' || section === 'brain' || section === 'missions')}
+          <p class="hint">{strings.bots.waiting}</p>
+        {/if}
+        {#if section === 'place'}
+          <PlaceSection {prefs} {save} />
+        {:else if section === 'mascot'}
+          <MascotSection {prefs} {save} />
+        {:else if section === 'crew'}
+          <div class="crew"><CompanionCrewSettings {store} {prefs} /></div>
+        {:else if section === 'brain'}
+          <BrainSettings {store} {prefs} {save} />
+        {:else if section === 'island'}
+          <IslandSection {store} {prefs} {save} />
+        {:else if section === 'clipboard'}
+          <div class="card">
+            <SettingSwitch label={sets.clipboardHistory} hint={sets.clipboardHistoryHint} checked={windowsPrefs.clipboard} onchange={(clipboard) => writeWindowsPrefs({ clipboard })} testid="companion-clipboard-history" />
+          </div>
+        {:else if section === 'focus'}
+          <FocusSection {prefs} {save} />
+        {:else if section === 'reminders'}
+          <CompanionReminders />
+        {:else if section === 'missions'}
+          <CompanionMissions {store} />
+        {:else}
+          <CompanionAllowRules />
+        {/if}
+      </div>
+    {/key}
+  </div>
+</div>
+
+<style>
+  /*
+   * Under the deck's bar, the deck's width, its black, its lower corners and
+   * its shadow: the island grown longer. Centred without a transform, which
+   * the reveal animates.
+   */
+  .settings-panel {
+    position: absolute;
+    z-index: 3;
+    top: 52px;
+    left: 50%;
+    width: var(--deck-width);
+    margin-left: calc(var(--deck-width) / -2);
+    display: grid;
+    grid-template-columns: 188px minmax(0, 1fr);
+    background: var(--island-bg);
+    color: var(--island-text);
+    border-radius: 0 0 var(--deck-radius) var(--deck-radius);
+    border-top: 1px solid var(--island-line);
+    box-shadow: var(--island-shadow);
+    font: 13px/1.4 var(--island-font);
+    outline: none;
+    /* Boite's controls on the deck's black: flat fields, no glaze. */
+    --control-glaze: none;
+    --color-control-surface: var(--deck-field);
+    --color-control-hover: color-mix(in srgb, var(--deck-field) 88%, var(--island-text));
+    --color-edge: var(--island-line);
+  }
+  .settings-panel :global(button) {
+    box-shadow: none;
+  }
+
+  .rail {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: 12px 10px 16px 14px;
+    overflow-y: auto;
+    scrollbar-width: none;
+    outline: none;
+  }
+  .rail button {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 10px;
+    min-height: 34px;
+    padding: 0 12px;
+    border: none;
+    border-radius: 12px;
+    background: none;
+    color: var(--island-muted);
+    font-size: 13px;
+    font-weight: 500;
+    text-align: start;
+    transition:
+      background-color 140ms ease,
+      color 140ms ease;
+  }
+  .rail button span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .rail button:hover {
+    background: var(--deck-tile);
+    color: var(--island-text);
+  }
+  .rail button.on {
+    background: var(--deck-accent-soft);
+    color: var(--deck-accent-ink);
+  }
+  .rail button:focus-visible {
+    outline: 2px solid var(--deck-accent);
+    outline-offset: -2px;
+  }
+
+  .pane {
+    min-height: 0;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    padding: 0 18px 18px 6px;
+    scrollbar-width: thin;
+    scrollbar-color: var(--island-line-strong) transparent;
+  }
+  .section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--deck-gap);
+  }
+  header {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    min-height: 50px;
+    padding-top: 2px;
+    background: var(--island-bg);
+  }
+  h2 {
+    margin: 0;
+    font-size: 15px;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+  }
+
+  /* The sections' cards: the deck's tiles, one row per setting. */
+  .pane :global(.card) {
+    margin: 0;
+    padding: 2px 16px;
+    border: none;
+    border-radius: var(--deck-tile-radius);
+    background: var(--deck-tile);
+    box-shadow: var(--island-card-edge);
+  }
+  .pane :global(.switch-row) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    min-height: 48px;
+    padding: 8px 0;
+  }
+  .pane :global(.switch-row + .switch-row) {
+    border-top: 1px solid var(--island-line);
+  }
+  .pane :global(.switch-row .text) {
+    flex: 1;
+    min-width: 0;
+    margin: 0;
+    color: var(--island-text);
+    font-size: 13px;
+    font-weight: 500;
+  }
+  .pane :global(.hint) {
+    margin: 0;
+    color: var(--island-muted);
+    font-size: 12px;
+    line-height: 1.5;
+  }
+  /* A card that is a list, or a picker, keeps some air at its edges. */
+  .pane :global(.card:has(> .list)) {
+    padding-block: 6px;
+  }
+  .pane :global(.card.mascot) {
+    padding-block: 14px;
+  }
+  .pane > .section > .hint {
+    padding: 0 4px;
+  }
+  /* The crew's own title is the section's. */
+  .crew :global([data-testid='companion-crew'] > h2) {
+    display: none;
+  }
+  .crew :global([data-testid='companion-crew']) {
+    padding-block: 12px 14px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .rail button {
+      transition: none;
+    }
+  }
+</style>
diff --git a/src/components/island/views/AttentionCard.svelte b/src/components/island/views/AttentionCard.svelte
index 0c57276..df90602 100644
--- a/src/components/island/views/AttentionCard.svelte
+++ b/src/components/island/views/AttentionCard.svelte
@@ -9,6 +9,7 @@
 -->
 <script lang="ts">
   import { BellRing, ChevronLeft, ChevronRight } from '@lucide/svelte';
+  import { settingsPanel } from '../../../lib/island/settings-panel.svelte';
   import type { QuestionRequest } from '@boite/contracts';
   import type { RequestAction } from '../../../lib/companion/companion.svelte';
   import { describePermission, threadLabel } from '../../../lib/companion/describe';
@@ -98,6 +99,8 @@
   }
 
   function onkey(event: KeyboardEvent) {
+    // The settings panel covers the card: its keys are the panel's.
+    if (settingsPanel.open) return;
     const target = event.target instanceof HTMLElement ? event.target : null;
     const typing = !!target && (target.isContentEditable || ['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName));
     const control = !!target?.closest('button, a, [role="button"], [role="tab"]');
diff --git a/src/components/island/views/AwayCard.svelte b/src/components/island/views/AwayCard.svelte
index 72d2a1f..9544331 100644
--- a/src/components/island/views/AwayCard.svelte
+++ b/src/components/island/views/AwayCard.svelte
@@ -6,6 +6,7 @@
 -->
 <script lang="ts">
   import { Bell, CircleCheck, CircleX, Clock, Gauge, GitPullRequest, MemoryStick, Sunrise } from '@lucide/svelte';
+  import { settingsPanel } from '../../../lib/island/settings-panel.svelte';
   import type { AwayIcon, AwayLine } from '../../../lib/island/away';
   import { fill, strings } from '../../../lib/strings';
 
@@ -31,7 +32,8 @@
   };
 
   function onkey(event: KeyboardEvent) {
-    if (event.key !== 'Escape' || event.ctrlKey || event.altKey || event.metaKey) return;
+    // The settings panel covers the card: its Escape is the panel's.
+    if (event.key !== 'Escape' || event.ctrlKey || event.altKey || event.metaKey || settingsPanel.open) return;
     const target = event.target instanceof HTMLElement ? event.target : null;
     if (target && (target.isContentEditable || ['INPUT', 'TEXTAREA'].includes(target.tagName))) return;
     // The island's own Escape (it closes) waits behind the card's.
diff --git a/src/lib/companion/memory.ts b/src/lib/companion/memory.ts
index 1c6507d..942065a 100644
--- a/src/lib/companion/memory.ts
+++ b/src/lib/companion/memory.ts
@@ -2,7 +2,7 @@
  * What the companion keeps between conversations, on this computer only, in
  * `localStorage` beside its preferences: the facts it learnt about the user,
  * the reminders it was asked for, and how its shortcut fared, which the
- * Settings page reads from the other window. Nothing of it goes to the core
+ * settings panel reads. Nothing of it goes to the core
  * except the facts, which ride in front of a conversation's first request.
  */
 
diff --git a/src/lib/companion/shell.ts b/src/lib/companion/shell.ts
index 3d8c88a..3edf37b 100644
--- a/src/lib/companion/shell.ts
+++ b/src/lib/companion/shell.ts
@@ -5,6 +5,7 @@
  */
 import { reveal } from '../reveal';
 import type { CompanionAnchor, CompanionSpot } from './prefs';
+import { requestSettings, type SettingsSection } from '../island/settings-panel.svelte';
 
 export interface CompanionMonitor {
   name: string;
@@ -115,14 +116,21 @@ export function bytesOf(data: string): Uint8Array {
   return Uint8Array.from(binary, (char) => char.charCodeAt(0));
 }
 
-/** Opens Bots's settings window, or brings it forward. */
-export async function openSettings(): Promise<void> {
-  await invoke('bots_settings');
+/**
+ * Opens Bots's settings, a panel of the island (`lib/island/settings-panel.svelte.ts`),
+ * on `section` when one is named. In the shell the window comes forward with
+ * the keyboard first (`bots_settings`), and answers with `companion://settings`.
+ */
+export async function openSettings(section?: SettingsSection): Promise<void> {
+  if (!inShell()) return requestSettings(section);
+  await invoke('bots_settings', { section: section ?? null }).catch((error: unknown) => {
+    requestSettings(section);
+    throw error;
+  });
 }
 
-/** Shows a thread in Boite's window (`ui.reveal`); null opens Bots's settings. A failure is told, not thrown. */
-export async function showMain(threadId: string | null): Promise<void> {
-  if (threadId === null) return openSettings();
+/** Shows a thread in Boite's window (`ui.reveal`). A failure is told, not thrown. */
+export async function showMain(threadId: string): Promise<void> {
   await reveal({ kind: 'thread', threadId });
 }
 
diff --git a/src/lib/core.svelte.ts b/src/lib/core.svelte.ts
index a65ce2a..ff2bcc8 100644
--- a/src/lib/core.svelte.ts
+++ b/src/lib/core.svelte.ts
@@ -1,8 +1,8 @@
 /*
- * What Bots's settings window knows of Boite: its providers, accounts,
+ * What Bots's settings panel knows of Boite: its providers, accounts,
  * projects, settings and agents, read once connected and kept current from
  * the core's events. Boite's own `Store` does this for the whole app; the
- * settings window needs only this much of it.
+ * settings panel needs only this much of it, on its own connection.
  *
  * `accountsOf` and `modelsOf` follow Boite's store (packages/ui/src/lib/store/
  * accounts.svelte.ts and models.svelte.ts at c4a8b0f7), so the settings offer
diff --git a/src/lib/island/bar.ts b/src/lib/island/bar.ts
index 2a17d9f..8467743 100644
--- a/src/lib/island/bar.ts
+++ b/src/lib/island/bar.ts
@@ -5,8 +5,8 @@
  * sound). Settings stays there whatever happens: it is the way back here.
  *
  * Kept in `localStorage` under `bots.bar`, apart from the companion's prefs,
- * so the settings window and the island share it and a write from one
- * reaches the other through `storage`. A missing or odd field takes the
+ * so the settings panel and the island share it, and a write from another
+ * page reaches this one through `storage`. A missing or odd field takes the
  * default: every tab in `DECK_TABS` order, every control.
  *
  * The bar is edited on the island itself, in its edit mode (`DeckBar`,
diff --git a/src/lib/island/pose.ts b/src/lib/island/pose.ts
index ea21c20..2524c47 100644
--- a/src/lib/island/pose.ts
+++ b/src/lib/island/pose.ts
@@ -51,6 +51,10 @@
  *   two apps and a link added, the pin taken away (`bar.ts`);
  * - `edit=1`: with `pose=open` or `pose=deck`, the bar in its edit mode, what
  *   it can take under it (`deck/BarPalette.svelte`);
+ * - `pose=settings&section=<id>`: the open island with its settings panel on
+ *   that section, one of `settings-panel.svelte.ts` (place, mascot, crew,
+ *   brain, island, clipboard, focus, reminders, missions, permissions); pair
+ *   it with `calm=1`, `mission=list` for missions and `rule=1` for permissions;
  * - `pose=decktab&tab=apps|clipboard|wallpaper|system`: one of the deck's
  *   computer tabs alone, in a deck-wide black frame, on a fake computer; its
  *   own states (`q`, `clip`, `source`, `engine`, `press`), in
@@ -69,6 +73,7 @@ import { FAKE_APPS } from '../windows/fake';
 import { isDeckTab } from './deck-tabs';
 import type { IslandFrame } from './frame.svelte';
 import { posed } from './posed.svelte';
+import { settingsPanel } from './settings-panel.svelte';
 import { prLine } from './pr-checks';
 import type { PressureReason } from './pressure';
 import { unfolding } from './sessions.svelte';
@@ -259,6 +264,9 @@ export async function strikePose(companion: Companion, frame: IslandFrame, param
     if (deck) await import('../windows/pose').then(({ poseComputer }) => poseComputer(params));
     frame.show(isDeckTab(tab) ? tab : 'threads');
     if (params.get('edit') === '1') writeBarEdit(true);
+  } else if (pose === 'settings') {
+    frame.show(isDeckTab(tab) ? tab : 'threads');
+    settingsPanel.show(params.get('section'));
   } else if (pose === 'desktop') companion.prefs = { ...companion.prefs, robots: 'desktop' };
   else if (pose === 'decktab') await import('../windows/pose').then(({ poseDeckTab }) => poseDeckTab(companion, params));
   else if (pose === 'away') poseAway();
diff --git a/src/lib/island/settings-panel.svelte.test.ts b/src/lib/island/settings-panel.svelte.test.ts
new file mode 100644
index 0000000..ad64e06
--- /dev/null
+++ b/src/lib/island/settings-panel.svelte.test.ts
@@ -0,0 +1,79 @@
+import { afterEach, expect, test, vi } from 'vitest';
+import { answerSettings, FIRST_SECTION, isSettingsSection, PANEL_ABOVE, PANEL_BELOW, PANEL_HEIGHT, panelHeight, panelWindowHeight, requestSettings, SETTINGS_SECTIONS, SettingsPanel, settingsPanel, stepSection } from './settings-panel.svelte';
+
+afterEach(() => {
+  settingsPanel.close();
+  settingsPanel.pick(FIRST_SECTION);
+});
+
+test('the gear opens the panel on the last section shown, and closes it', () => {
+  const panel = new SettingsPanel();
+  expect(panel.open).toBe(false);
+  panel.toggle();
+  expect(panel.open).toBe(true);
+  expect(panel.section).toBe(FIRST_SECTION);
+  panel.pick('focus');
+  panel.toggle();
+  expect(panel.open).toBe(false);
+  panel.toggle();
+  expect(panel.section).toBe('focus');
+});
+
+test('a request names a section, or keeps the last one when it names none it knows', () => {
+  const panel = new SettingsPanel();
+  panel.show('crew');
+  expect(panel.section).toBe('crew');
+  panel.close();
+  panel.show('nowhere');
+  expect([panel.open, panel.section]).toEqual([true, 'crew']);
+  panel.show(null);
+  expect(panel.section).toBe('crew');
+});
+
+test('the sections are the rail, the arrows move along it and wrap', () => {
+  expect(SETTINGS_SECTIONS[0]).toBe(FIRST_SECTION);
+  expect(SETTINGS_SECTIONS).toHaveLength(10);
+  expect(isSettingsSection('brain')).toBe(true);
+  expect(isSettingsSection('Brain')).toBe(false);
+  expect(isSettingsSection(3)).toBe(false);
+  expect(stepSection('place', 1)).toBe('mascot');
+  expect(stepSection('place', -1)).toBe('permissions');
+  expect(stepSection('permissions', 1)).toBe('place');
+});
+
+test('the page answers the requests; without it the panel opens alone', () => {
+  requestSettings('missions');
+  expect([settingsPanel.open, settingsPanel.section]).toEqual([true, 'missions']);
+  settingsPanel.close();
+
+  const heard = vi.fn();
+  const stop = answerSettings(heard);
+  requestSettings('crew');
+  requestSettings('bogus');
+  expect(heard.mock.calls).toEqual([['crew'], [null]]);
+  expect(settingsPanel.open).toBe(false);
+  stop();
+  requestSettings();
+  expect(settingsPanel.open).toBe(true);
+});
+
+test('a stale stop leaves the newer answer in place', () => {
+  const first = vi.fn();
+  const second = vi.fn();
+  const stopFirst = answerSettings(first);
+  const stopSecond = answerSettings(second);
+  stopFirst();
+  requestSettings('island');
+  expect(first).not.toHaveBeenCalled();
+  expect(second).toHaveBeenCalledWith('island');
+  stopSecond();
+});
+
+test('the panel takes its full height on a usual screen, less on a short one, and keeps a floor', () => {
+  expect(panelHeight(1040)).toBe(PANEL_HEIGHT.most);
+  expect(panelHeight(728)).toBe(PANEL_HEIGHT.most);
+  expect(panelHeight(600)).toBe(600 - PANEL_ABOVE - PANEL_BELOW);
+  expect(panelHeight(300)).toBe(PANEL_HEIGHT.least);
+  expect(panelHeight(Number.NaN)).toBe(PANEL_HEIGHT.most);
+  expect(panelWindowHeight(1040)).toBe(PANEL_ABOVE + PANEL_HEIGHT.most + PANEL_BELOW);
+});
diff --git a/src/lib/island/settings-panel.svelte.ts b/src/lib/island/settings-panel.svelte.ts
new file mode 100644
index 0000000..a3e3f03
--- /dev/null
+++ b/src/lib/island/settings-panel.svelte.ts
@@ -0,0 +1,100 @@
+/*
+ * The settings panel: Bots's settings, drawn inside the island's window as a
+ * panel that grows out of the open deck, under its bar
+ * (`components/island/settings/SettingsPanel.svelte`). There is no settings
+ * window any more: the deck's gear toggles the panel, and the tray, the
+ * companion's gear and "Make an agent" ask for it through `requestSettings`,
+ * on a section when they know which one.
+ *
+ * The page holds one panel (`settingsPanel`); the companion's window opens the
+ * island for it, holds it open while it shows, and draws the island for it
+ * even while the robots are loose on the desktop.
+ */
+
+/** The panel's sections, in the rail's order. */
+export const SETTINGS_SECTIONS = ['place', 'mascot', 'crew', 'brain', 'island', 'clipboard', 'focus', 'reminders', 'missions', 'permissions'] as const;
+export type SettingsSection = (typeof SETTINGS_SECTIONS)[number];
+
+/** The section the panel shows first. */
+export const FIRST_SECTION: SettingsSection = 'place';
+
+/** The panel's height: the most it takes, and the least on a short screen. */
+export const PANEL_HEIGHT = { most: 560, least: 320 };
+/** The deck's bar the panel hangs under, and the air under it for its shadow. */
+export const PANEL_ABOVE = 52;
+export const PANEL_BELOW = 36;
+
+/**
+ * The panel's height on a screen `screenHeight` logical pixels tall (its work
+ * area): decided before it shows, so it never changes as the window grows.
+ */
+export function panelHeight(screenHeight: number): number {
+  const room = Number.isFinite(screenHeight) ? screenHeight - PANEL_ABOVE - PANEL_BELOW : PANEL_HEIGHT.most;
+  return Math.max(PANEL_HEIGHT.least, Math.min(PANEL_HEIGHT.most, Math.floor(room)));
+}
+
+/** The island's window while the panel shows: the bar, the panel and its shadow. */
+export function panelWindowHeight(screenHeight: number): number {
+  return PANEL_ABOVE + panelHeight(screenHeight) + PANEL_BELOW;
+}
+
+export function isSettingsSection(value: unknown): value is SettingsSection {
+  return typeof value === 'string' && (SETTINGS_SECTIONS as readonly string[]).includes(value);
+}
+
+/** The section after or before `from` in the rail, wrapping around: the arrow keys move along it. */
+export function stepSection(from: SettingsSection, by: 1 | -1): SettingsSection {
+  const at = SETTINGS_SECTIONS.indexOf(from);
+  return SETTINGS_SECTIONS[(at + by + SETTINGS_SECTIONS.length) % SETTINGS_SECTIONS.length]!;
+}
+
+export class SettingsPanel {
+  open = $state(false);
+  /** The section shown: the last one picked, kept from one opening to the next. */
+  section = $state<SettingsSection>(FIRST_SECTION);
+
+  /** Opens on `section` when it names one, else on the last one shown. */
+  show(section?: string | null): void {
+    if (isSettingsSection(section)) this.section = section;
+    this.open = true;
+  }
+
+  close(): void {
+    this.open = false;
+  }
+
+  /** The deck's gear: opens on the last section, or closes. */
+  toggle(): void {
+    if (this.open) this.close();
+    else this.show();
+  }
+
+  pick(section: SettingsSection): void {
+    this.section = section;
+  }
+}
+
+/** The page's panel. */
+export const settingsPanel = new SettingsPanel();
+
+type Request = (section: SettingsSection | null) => void;
+let handler: Request | null = null;
+
+/**
+ * Asks the page for the panel, on `section` when it names one (anything else
+ * opens the last section). The companion's window answers it (`App.svelte`):
+ * it opens the island first. Without a page to answer, the panel opens alone.
+ */
+export function requestSettings(section?: string | null): void {
+  const wanted = isSettingsSection(section) ? section : null;
+  if (handler) handler(wanted);
+  else settingsPanel.show(wanted);
+}
+
+/** The page answers the requests. Returns the function that stops it. */
+export function answerSettings(next: Request): () => void {
+  handler = next;
+  return () => {
+    if (handler === next) handler = null;
+  };
+}
diff --git a/src/lib/strings.en.ts b/src/lib/strings.en.ts
index 3b8c711..ac90e8f 100644
--- a/src/lib/strings.en.ts
+++ b/src/lib/strings.en.ts
@@ -19,7 +19,6 @@ export const strings = {
     revealElsewhere: 'This thread runs on {machine}: open it in Boite, under that machine.',
     /** A call for a thread whose machine is not connected now. */
     machineAway: '{machine} is out of reach right now.',
-    settingsTitle: 'B.O.T.S settings',
     tray: { tooltip: 'B.O.T.S', settings: 'Settings', quit: 'Quit' },
     demo: 'Demo mode: a fake Boite, nothing is sent.',
     /** What the demo asks the lead robot first, for a chat exchange to show. */
@@ -30,6 +29,22 @@ export const strings = {
   island: {
     label: 'B.O.T.S',
     settings: 'Settings',
+    /** The settings, a panel of the island under the deck's bar (`island/settings/SettingsPanel.svelte`). */
+    settingsPanel: {
+      sections: 'Settings sections',
+      names: {
+        place: 'Place',
+        mascot: 'Mascot',
+        crew: 'Crew',
+        brain: 'Brain and model',
+        island: 'Island',
+        clipboard: 'Clipboard',
+        focus: 'Focus',
+        reminders: 'Reminders',
+        missions: 'Missions',
+        permissions: 'Permissions'
+      }
+    },
     mute: 'Mute the sounds',
     unmute: 'Turn the sounds on',
     pin: 'Keep the island open',
@@ -482,7 +497,6 @@ export const strings = {
   },
 
   companion: {
-    heading: 'B.O.T.S',
     moods: { idle: 'Resting', working: 'At work', calling: 'Needs you', happy: 'Done', worried: 'Boite is not answering' },
     open: 'Open B.O.T.S',
     close: 'Close B.O.T.S',
@@ -693,8 +707,6 @@ export const strings = {
     snooze: 'In 10 min',
     snoozeLabel: 'Remind me again in 10 minutes',
     settings: {
-      intro: 'B.O.T.S puts your agents on your screen: one robot per agent. Click one to ask it something or to answer your agents, drag it to move it. Each robot talks in its own conversation, which you also find in Boite’s Agents page.',
-      desktopOnly: 'The robots run in the B.O.T.S app: these settings take effect there.',
       place: 'Place',
       screen: 'Screen',
       screenHint: 'The screen B.O.T.S sits on. A screen that is unplugged sends it back to the main one.',
@@ -758,7 +770,6 @@ export const strings = {
       bar: 'Island bar',
       barHint: 'Add, rename, move or take out the tabs, controls, apps and links of the open island’s bar, right on the island. A right-click on the bar does it too.',
       barEdit: 'Edit',
-      barDone: 'Done',
       pillRest: 'Pill at rest',
       pillRestHint: 'What the closed island shows when nothing else needs it. Requests and finished threads still show over it.',
       pillRests: { live: 'Live line', quota: 'Quota', music: 'Music', timer: 'Timer', robot: 'Robot only' },
diff --git a/src/lib/strings.fr.ts b/src/lib/strings.fr.ts
index 1caed5f..40a2baf 100644
--- a/src/lib/strings.fr.ts
+++ b/src/lib/strings.fr.ts
@@ -14,7 +14,6 @@ export const fr: Messages = {
     revealUnsupported: 'Cette version de Boite ne sait pas encore l’afficher. Mettez Boite à jour, puis réessayez.',
     revealElsewhere: 'Ce fil tourne sur {machine} : ouvrez-le dans Boite, sous cette machine.',
     machineAway: '{machine} est injoignable pour le moment.',
-    settingsTitle: 'Réglages de B.O.T.S',
     tray: { tooltip: 'B.O.T.S', settings: 'Réglages', quit: 'Quitter' },
     demo: 'Mode démo : un faux Boite, rien n’est envoyé.',
     demoQuestion: 'Sur quoi travaillent mes agents ?'
@@ -23,6 +22,21 @@ export const fr: Messages = {
   island: {
     label: 'B.O.T.S',
     settings: 'Réglages',
+    settingsPanel: {
+      sections: 'Rubriques des réglages',
+      names: {
+        place: 'Emplacement',
+        mascot: 'Mascotte',
+        crew: 'Équipe',
+        brain: 'Cerveau et modèle',
+        island: 'Île',
+        clipboard: 'Presse-papiers',
+        focus: 'Focus',
+        reminders: 'Rappels',
+        missions: 'Missions',
+        permissions: 'Autorisations'
+      }
+    },
     mute: 'Couper les sons',
     unmute: 'Remettre les sons',
     pin: 'Garder l’île ouverte',
@@ -460,7 +474,6 @@ export const fr: Messages = {
   },
 
   companion: {
-    heading: 'B.O.T.S',
     moods: { idle: 'Au repos', working: 'Au travail', calling: 'A besoin de vous', happy: 'Terminé', worried: 'Boite ne répond pas' },
     open: 'Ouvrir B.O.T.S',
     close: 'Fermer B.O.T.S',
@@ -671,8 +684,6 @@ export const fr: Messages = {
     snooze: 'Dans 10 min',
     snoozeLabel: 'Me le rappeler dans 10 minutes',
     settings: {
-      intro: 'B.O.T.S met vos agents sur votre écran : un robot par agent. Cliquez sur l’un d’eux pour lui demander quelque chose ou pour répondre à vos agents, faites-le glisser pour le déplacer. Chaque robot parle dans sa propre conversation, que vous retrouvez aussi dans la page Agents de Boite.',
-      desktopOnly: 'Les robots tournent dans l’application B.O.T.S : ces réglages s’y appliquent.',
       place: 'Emplacement',
       screen: 'Écran',
       screenHint: 'L’écran où se tient B.O.T.S. S’il est débranché, B.O.T.S revient sur l’écran principal.',
@@ -736,7 +747,6 @@ export const fr: Messages = {
       bar: 'Barre de l’île',
       barHint: 'Ajoutez, renommez, déplacez ou retirez les onglets, contrôles, applis et liens de la barre de l’île ouverte, directement sur l’île. Un clic droit sur la barre y mène aussi.',
       barEdit: 'Modifier',
-      barDone: 'Terminé',
       pillRest: 'Pilule au repos',
       pillRestHint: 'Ce que montre l’île fermée quand rien d’autre ne la demande. Les demandes et les fils terminés passent toujours devant.',
       pillRests: { live: 'Ligne en direct', quota: 'Quota', music: 'Musique', timer: 'Minuteur', robot: 'Robot seul' },
diff --git a/src/lib/tray.svelte.ts b/src/lib/tray.svelte.ts
index d761834..2020e43 100644
--- a/src/lib/tray.svelte.ts
+++ b/src/lib/tray.svelte.ts
@@ -1,8 +1,8 @@
 /*
- * The tray menu's labels, and the settings window's title, in the language
- * the app speaks: the shell builds the menu in English before any page has
- * loaded (`src-tauri/src/lib.rs`), and the companion's window renames it once
- * its language is known, then again whenever it changes.
+ * The tray menu's labels, in the language the app speaks: the shell builds
+ * the menu in English before any page has loaded (`src-tauri/src/tray.rs`),
+ * and the companion's window renames it once its language is known, then
+ * again whenever it changes.
  */
 import { activeLocale } from '@boite/ui/lib/i18n.svelte';
 import { inShell } from './companion/shell';
@@ -11,8 +11,8 @@ import { strings } from './strings';
 export async function nameTray(): Promise<void> {
   if (!inShell()) return;
   const { invoke } = await import('@tauri-apps/api/core');
-  const { tray, settingsTitle } = strings.bots;
-  await invoke('bots_tray_labels', { tooltip: tray.tooltip, settings: tray.settings, quit: tray.quit, title: settingsTitle }).catch(() => {});
+  const { tray } = strings.bots;
+  await invoke('bots_tray_labels', { tooltip: tray.tooltip, settings: tray.settings, quit: tray.quit }).catch(() => {});
 }
 
 /** Names the tray now and after every language change; returns the cleanup. */
diff --git a/src/main.ts b/src/main.ts
index 20ef2d4..3c6fad5 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,20 +1,18 @@
 /*
- * The page's entry: the companion's transparent window, or Bots's settings
- * window on `?view=settings`. The language comes first, so nothing is drawn
- * in English and swapped a tick later.
+ * The page's entry: the companion's transparent window, which draws the
+ * island, the robots and the settings panel. The language comes first, so
+ * nothing is drawn in English and swapped a tick later.
  */
 import '@boite/ui/app.css';
 import './bots.css';
 import { mount } from 'svelte';
 import { startLocale } from '@boite/ui/lib/i18n.svelte';
+import App from './App.svelte';
 import { followTrayLocale } from './lib/tray.svelte';
 
 const target = document.getElementById('app')!;
-const settings = new URLSearchParams(location.search).get('view') === 'settings';
-document.documentElement.dataset.view = settings ? 'settings' : 'bots';
 
-void startLocale().then(async () => {
-  const page = settings ? (await import('./SettingsApp.svelte')).default : (await import('./App.svelte')).default;
-  mount(page, { target });
-  if (!settings) followTrayLocale();
+void startLocale().then(() => {
+  mount(App, { target });
+  followTrayLocale();
 });