From 520059d8667b503664ecaf18eb0514696500d8f1 Mon Sep 17 00:00:00 2001
From: Bruno Charest <bruno.charest@gmail.com>
Date: Sun, 13 Sep 2026 11:49:45 -0400
Subject: [PATCH] feat(mobile): ruban d'edition style Obsidian + correctifs
 mobile (#83, BUG-017 a BUG-020)

- #83: ruban horizontal defilable ancre au-dessus du clavier, commandes
  etendues (titres, barre, surligne, code bloc, citation, listes, cases,
  wikilinks, tags, pieces jointes, undo/redo, colle, police) et
  personnalisation persistee via l'icone engrenage
- BUG-017: cartes du tableau de bord compressibles (min-width:0)
- BUG-018: en-tete editeur mobile compact, boutons Annuler/Sauvegarder
  accessibles, barre IA plus tactile
- BUG-019: ancrage du ruban via visualViewport (--kb-offset)
- BUG-020: suppression de la double barre de defilement

Tests: mobile-editor 35/35, ai 50/50, 9 suites JSDOM, validate-imports,
pytest 961 passed / 6 skipped, ruff + mypy 0.
---
 CHANGELOG.md                          |  30 ++
 docs/ISSUES_TODOLIST.md               |   9 +-
 docs/ROADMAP.md                       |  17 +-
 docs/archive/COMPLETED_v1-v2.md       |  20 ++
 frontend/index.html                   |   4 +
 frontend/js/mobile-editor.js          | 476 +++++++++++++++++++++++---
 frontend/locales/en.json              |  37 +-
 frontend/locales/fr.json              |  37 +-
 frontend/style.css                    | 241 ++++++++++---
 tests/e2e/mobile-editor.spec.js       |  14 +-
 tests/frontend/mobile-editor.test.mjs |  82 ++++-
 11 files changed, 841 insertions(+), 126 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ecdbc18..fca781d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -54,6 +54,16 @@ et [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ### Ajouté
 
+- **#83 Barre d'outils d'édition mobile — ruban style Obsidian Android** — la barre de mise en
+  forme flottante est remplacée par un **ruban horizontal défilable** ancré juste au-dessus du
+  clavier virtuel : fond anthracite aux coins arrondis, insertion/enrobage au curseur ou sur la
+  sélection. Commandes : annuler/refaire, `[[ ]]` (lien interne), fichiers/modèles, tag `#`,
+  pièce jointe, H1–H6, gras, italique, barré (`~~`), surligné (`==`), code en ligne/bloc, citation,
+  lien externe, listes à puces/numérotées, case à cocher, indenter/désindenter, coller, A−/A+.
+  Une icône **⚙** ouvre un panneau de personnalisation (ajouter / retirer / réordonner, persistance
+  `localStorage`). i18n FR/EN. Helpers purs exportés (`formatChange`, `normalizeRibbonCommands`,
+  `moveRibbonCommand`). Tests JSDOM `tests/frontend/mobile-editor.test.mjs` (+13) et E2E mobile.
+
 - **#82 Assistant IA — menu `@` instantané** — nouvel endpoint `GET /api/vault/{vault}/paths`
   (liste plate et plafonnée de l'index des chemins). Le frontend la récupère **une fois par vault**
   (préchargée à l'ouverture du panneau) puis filtre **côté client** pendant la frappe : l'affichage
@@ -291,6 +301,26 @@ et [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ### Corrigé
 
+- **BUG-017 — Accueil mobile : tuiles « Favoris » / « Récents » mal dimensionnées** — les cartes
+  de tableau de bord débordaient horizontalement à cause d'un titre/chemin `nowrap` : ajout de
+  `min-width: 0` et `overflow: hidden` sur `.dashboard-card` (et ses en-têtes/pieds) pour que la
+  grille mobile (1 colonne) respecte la largeur du viewport. Les tuiles « Partagés » étaient déjà
+  conformes.
+
+- **BUG-018 — Éditeur mobile : boutons « Annuler » / « Sauvegarder » inaccessibles** — l'en-tête
+  cumulait marque, titre, nom de fichier et actions, poussant les boutons hors écran. Sur mobile,
+  les éléments secondaires (marque, séparateur, espaceur, présence) sont masqués, les champs
+  titre/nom de fichier deviennent compressibles (`flex`, `min-width: 0`) et le libellé « Saved »
+  est masqué (le point d'état reste). La barre d'outils IA reçoit des cibles tactiles plus grandes.
+
+- **BUG-019 — Éditeur mobile : barre d'outils masquée par le clavier** — le ruban est désormais
+  ancré via `window.visualViewport` (`--kb-offset`) pour rester juste au-dessus du clavier, quel
+  que soit le défilement, et le scroller CodeMirror reçoit un `padding-bottom` pour ne pas cacher
+  le curseur.
+
+- **BUG-020 — Éditeur mobile : double barre de défilement** — `.editor-body` passe en
+  `overflow: hidden` + colonne flex ; seul le scroller CodeMirror défile.
+
 - **BUG-016 — Mobile : le bouton « mode lecture » recouvre le bouton d'envoi de l'assistant** —
   le bouton flottant `📖` (`#me-reading-btn`, `z-index: 890`) passait au-dessus du panneau
   assistant plein écran sur mobile (`z-index: 100`) et masquait le bouton d'envoi `✈️`. Il
diff --git a/docs/ISSUES_TODOLIST.md b/docs/ISSUES_TODOLIST.md
index 13cc22b..4d04eb6 100644
--- a/docs/ISSUES_TODOLIST.md
+++ b/docs/ISSUES_TODOLIST.md
@@ -126,10 +126,10 @@ Avant de corriger quoi que ce soit, un agent IA doit :
 | *BUG-014* | Assistant IA : les flèches ↑/↓ ne naviguent pas dans les menus `/` et `@` | 🟢 corrigé | P1 | 📱 frontend | IA | `frontend/js/bookslm.js` | Ouvrir `/`, puis ↑/↓ (y compris après un clic hors zone de texte) | Navigation gérée au niveau du **panneau en phase de capture** (`panel.addEventListener('keydown', ..., true)`), donc indépendante du focus | Le `keydown` n'était écouté que sur la zone de texte ; dès que le focus changeait, les flèches étaient ignorées. Tests : `tests/frontend/ai.test.mjs` (+1) |
 | *BUG-015* | Assistant IA : la ligne sélectionnée des menus `/` et `@` est invisible au clavier | 🟢 corrigé | P2 | 📱 frontend | IA | `frontend/style.css` | Ouvrir `/` ou `@`, naviguer avec ↑/↓ | État `.active` en `--bg-hover` + barre d'accent à gauche (`inset 3px 0 0 var(--accent)`) au lieu de `--surface2` | `--surface2` est identique à `--bg-primary` (fond du menu) en thème sombre : la sélection ne se voyait pas. Idem pour la liste de modèles |
 | *BUG-016* | Mobile : le bouton « mode lecture » flottant recouvre le bouton d'envoi de l'assistant IA | 🟢 corrigé | P2 | 📱 frontend | IA | `frontend/js/mobile-editor.js`, `frontend/style.css` | Mobile, sans fichier ouvert : ouvrir l'assistant puis constater que `📖` masque `✈️` | `updateReadingButtonVisibility()` n'affiche `#me-reading-btn` que si `state.currentPath` est défini **et** que le panneau assistant est fermé ; resynchronisé à chaque mutation de `#content-area` et sur `bookslm:opened`/`bookslm:closed` ; règle `.me-reading-btn[hidden]{display:none}` | Le bouton flottant (z-index 890) passait au-dessus du panneau plein écran mobile (z-index 100). Tests : `tests/frontend/mobile-editor.test.mjs` (+2) |
-| *BUG-017* | Accueil mobile : les tuiles de « Favoris » et « Récents » ne s'affichent pas correctement en largeur (l'onglet « Partagés » s'affiche correctement) | 🔴 ouvert | P2 | 📱 frontend | IA | `frontend/js/dashboard.js`, `frontend/js/viewer.js`, `frontend/style.css` | Mobile : page d'accueil → onglets Favoris / Récents | — | Grille de tuiles non adaptée au viewport (largeur / nombre de colonnes) ; l'onglet « Partagés » (`.shared-card`) est conforme |
-| *BUG-018* | Éditeur mobile : mise en page inadaptée — boutons « Annuler » / « Sauvegarder » inaccessibles et barre d'outils IA non optimisée | 🔴 ouvert | P1 | 📱 frontend | IA | `frontend/index.html`, `frontend/style.css`, `frontend/js/ai.js` | Mobile : ouvrir un fichier → barre d'outils de l'éditeur puis panneau assistant | — | Boutons de l'éditeur hors écran / masqués sur petit écran ; barre d'outils IA trop dense ou mal positionnée |
-| *BUG-019* | Éditeur mobile : la barre d'outils du bas n'est pas toujours visible au-dessus du clavier quand le curseur n'est pas en bas de l'éditeur | 🔴 ouvert | P1 | 📱 frontend | IA | `frontend/js/mobile-editor.js`, `frontend/style.css` | Mobile : ouvrir un fichier, placer le curseur au milieu du document, afficher le clavier | — | La barre ne suit pas la position du curseur / n'est pas ancrée au-dessus du clavier virtuel |
-| *BUG-020* | Éditeur mobile : deux barres de défilement verticales à droite de la page en mode édition | 🔴 ouvert | P3 | 📱 frontend | IA | `frontend/style.css` | Mobile : ouvrir l'éditeur et observer le bord droit | — | Double scrollbar (conteneur de l'éditeur + `.cm-scroller`) peu naturelle pour un éditeur |
+| *BUG-017* | Accueil mobile : les tuiles de « Favoris » et « Récents » ne s'affichent pas correctement en largeur (l'onglet « Partagés » s'affiche correctement) | 🟢 corrigé | P2 | 📱 frontend | IA | `frontend/style.css` | Mobile : page d'accueil → onglets Favoris / Récents | `frontend/style.css` : `min-width:0` + `overflow:hidden` sur `.dashboard-card` (et header/footer) → la grille 1 colonne ne déborde plus | Cause : titre/chemin `nowrap` forçaient la largeur mini de la carte |
+| *BUG-018* | Éditeur mobile : mise en page inadaptée — boutons « Annuler » / « Sauvegarder » inaccessibles et barre d'outils IA non optimisée | 🟢 corrigé | P1 | 📱 frontend | IA | `frontend/style.css` | Mobile : ouvrir un fichier → barre d'outils de l'éditeur puis panneau assistant | `frontend/style.css` : en-tête mobile compact (marque/séparateur/espaceur/présence masqués, champs compressibles, libellé « Saved » masqué) + cibles tactiles `.ai-toolbar-btn` agrandies | Les 3 boutons d'action restent accessibles ; voir aussi #83 pour le ruban |
+| *BUG-019* | Éditeur mobile : la barre d'outils du bas n'est pas toujours visible au-dessus du clavier quand le curseur n'est pas en bas de l'éditeur | 🟢 corrigé | P1 | 📱 frontend | IA | `frontend/js/mobile-editor.js`, `frontend/style.css` | Mobile : ouvrir un fichier, placer le curseur au milieu du document, afficher le clavier | `initKeyboardAnchor()` utilise `window.visualViewport` (`--kb-offset`) pour ancrer le ruban au-dessus du clavier ; `padding-bottom` sur `.cm-scroller` | Fonctionne quel que soit le défilement / la position du curseur |
+| *BUG-020* | Éditeur mobile : deux barres de défilement verticales à droite de la page en mode édition | 🟢 corrigé | P3 | 📱 frontend | IA | `frontend/style.css` | Mobile : ouvrir l'éditeur et observer le bord droit | `frontend/style.css` : `.editor-body` en `overflow:hidden` + colonne flex ; seul `.cm-scroller` défile | Une seule barre de défilement |
 | *BUG-021* | [🔴 CRITIQUE] XSS stocké via le rendu markdown (`escape=False`) | 🟢 corrigé | P0 | 🔐 sécurité | IA | `backend/services/sanitizer.py`, `backend/main.py` | Ouvrir une note contenant `<img src=x onerror=alert(1)>` | `backend/services/sanitizer.py` (whitelist stdlib) appliqué après `_add_heading_ids` dans `_render_markdown` ; tests `tests/test_security_hardening.py` | HTML brut d'un vault injecté dans le DOM → JS dans le navigateur de chaque utilisateur. DOMPurify client non ajouté (défense serveur suffisante) |
 | *BUG-022* | [🔴 CRITIQUE] XSS stocké sur la page publique `/s/{token}` (title + frontmatter non échappés) | 🟢 corrigé | P0 | 🔐 sécurité | IA | `backend/main.py` | Partager une note dont le frontmatter contient un `title` avec `<script>` | `backend/main.py` : `html.escape()` sur `title`/frontmatter + JSON échappé (`\u003c`) pour le bloc `<script>` et `a.download` | `a.download="{title}.md"` se trouvait dans un bloc script → breakout JS. Test d'intégration dans `tests/test_security_hardening.py` |
 | *BUG-023* | [🔴 CRITIQUE] Brute-force MFA sans rate-limit ni verrouillage | 🟢 corrigé | P0 | 🔐 sécurité | IA | `backend/auth/router.py` | `POST /api/auth/mfa/totp/verify` en boucle avec des codes aléatoires | `_enforce_mfa_rate_limit` + `_record_mfa_failure` sur `totp/verify`, `recovery`, `webauthn/verify` (IP + compte + lockout) | TOTP 6 chiffres brute-forceable ; le login était protégé, pas le second facteur |
@@ -185,6 +185,7 @@ Avant de corriger quoi que ce soit, un agent IA doit :
 | 2026-09-13 | BUG-017, BUG-018, BUG-019, BUG-020, #83 | Enregistrement | `docs/ISSUES_TODOLIST.md`, `docs/ROADMAP.md` | Signalements mobile consignés : accueil (tuiles Favoris/Récents), éditeur (boutons Annuler/Sauvegarder inaccessibles + barre IA), visibilité de la barre d'outils au-dessus du clavier, double barre de défilement. Feature #83 ajoutée : barre d'outils d'édition mobile style Obsidian Android. | 🔴 ouvert (à traiter) |
 | 2026-09-13 | Revue sécurité statique (BUG-021 → BUG-040, roadmap #84 → #87) | Enregistrement | `docs/ISSUES_TODOLIST.md`, `docs/ROADMAP.md` | Revue statique 2026-09-13 consignée : XSS markdown (`escape=False`) + page de partage publique, brute-force MFA, traversal par préfixe `paths.py`, ReDoS, SSRF webhooks, cycle de vie des sessions, politique de mot de passe, races `users.json`, audits IP, rate-limit, indexation symlinks, recherche O(N), CSP. BUG-021→BUG-040 ouverts au registre ; roadmap #84→#87 (consolidation/sécurité, refonte architecturale, performance, CI/CD). | 🔴 ouvert (à traiter) |
 | 2026-09-13 | BUG-021 → BUG-034 (#84 phase 1) | Correction | `backend/services/sanitizer.py`, `backend/services/paths.py`, `backend/services/net.py`, `backend/services/regex_safety.py`, `backend/main.py`, `backend/search.py`, `backend/webhooks.py`, `backend/indexer.py`, `backend/ratelimit.py`, `backend/auth/{router,user_store,password,jwt_handler,middleware}.py`, `frontend/js/{auth,admin,sync}.js`, `tests/test_security_hardening.py`, `tests/test_auth_api.py` | Sanitizer XSS serveur (markdown + page de partage), rate-limit/lockout MFA, isolation vaults par segments, caps regex (ReDoS), SSRF webhooks + secrets externalisés, rotation/révocation des jetons, politique de mot de passe + invalidation des sessions, verrous `users.json`, IP réelle dans les audits, rate-limit par compte, symlinks d'index ignorés, recherche simple via inverted index, token en mémoire + cookie HttpOnly + CSP durcie. Vérifié : pytest 961 passed / 6 skipped, ruff 0, mypy 0, tests frontend 36 modules + 9 JSDOM suites verts. | 🟢 corrigé (en attente vérif utilisateur) |
+| 2026-09-13 | BUG-017 → BUG-020, #83 | Correction + feature | `frontend/js/mobile-editor.js`, `frontend/style.css`, `frontend/index.html`, `frontend/locales/{fr,en}.json`, `tests/frontend/mobile-editor.test.mjs`, `tests/e2e/mobile-editor.spec.js` | BUG-017 : cartes de tableau de bord compressibles (`min-width:0`) ; BUG-018 : en-tête éditeur mobile compact + barre IA tactile ; BUG-019 : ancrage du ruban via `visualViewport` ; BUG-020 : suppression de la double scrollbar. #83 : ruban d'édition horizontal défilable style Obsidian (commandes étendues + personnalisation ⚙ persistée). Vérifié : tests frontend 35/35 (mobile) + 50/50 (IA) + 9 JSDOM suites. | 🟢 corrigé (en attente vérif utilisateur) |
 
 ---
 
diff --git a/docs/ROADMAP.md b/docs/ROADMAP.md
index e469d0b..3fbcb46 100644
--- a/docs/ROADMAP.md
+++ b/docs/ROADMAP.md
@@ -65,17 +65,18 @@
 ### 83. Barre d'outils d'édition mobile — style Obsidian Android
 
 - **Effort :** 3-5 jours | **Impact :** 🟡 | **Zone :** frontend (mobile)
+- **Statut :** ✅ livré — ruban horizontal défilable ancré au-dessus du clavier, commandes étendues et personnalisation persistée. Détail : [archive/COMPLETED_v1-v2.md](./archive/COMPLETED_v1-v2.md) (section #83).
 - **Description :** remplacer la barre de mise en forme Markdown actuelle par un **ruban horizontal
   défilable** ancré juste au-dessus du clavier virtuel, reprenant l'ergonomie de l'app Android
   Obsidian : fond anthracite aux coins arrondis, insertion/enrobage de la syntaxe au curseur ou sur
   la sélection, et personnalisation des commandes via une icône clé à molette.
 - **Sous-tâches :**
-  - [ ] Ruban horizontal défilable (glissement tactile gauche/droite) ancré au-dessus du clavier
-  - [ ] Actions rapides : annuler, refaire, `[[ ]]` (lien interne), modèle/fichiers, tag `#`, pièce jointe
-  - [ ] Formatage : H1–H6, gras, italique, barré (`~~`), surligné (`==`), code en ligne/bloc, citation (`>`)
-  - [ ] Liens externes, listes à puces/numérotées, case à cocher (`- [ ]`), indenter / désindenter
-  - [ ] Personnalisation (clé à molette) : ajouter / supprimer / réordonner les commandes
-  - [ ] i18n FR/EN + tests frontend (helpers purs) + E2E mobile
+  - [x] Ruban horizontal défilable (glissement tactile gauche/droite) ancré au-dessus du clavier
+  - [x] Actions rapides : annuler, refaire, `[[ ]]` (lien interne), modèle/fichiers, tag `#`, pièce jointe
+  - [x] Formatage : H1–H6, gras, italique, barré (`~~`), surligné (`==`), code en ligne/bloc, citation (`>`)
+  - [x] Liens externes, listes à puces/numérotées, case à cocher (`- [ ]`), indenter / désindenter
+  - [x] Personnalisation (clé à molette) : ajouter / supprimer / réordonner les commandes
+  - [x] i18n FR/EN + tests frontend (helpers purs) + E2E mobile
 
 ---
 
@@ -166,6 +167,7 @@
 | 70 | Recherche sémantique — Embeddings vectoriels (hybride TF-IDF + RRF) | 2.3.0 | [features/semantic-search.md](./features/semantic-search.md) |
 | 77 | Application Desktop native — Tauri | 🔵 en cours | [features/desktop-tauri.md](./features/desktop-tauri.md) |
 | 84 | Consolidation & sécurité — revue statique 2026-09-13 (phase 1, BUG-021→034) | 2.3.0 | [archive](./archive/COMPLETED_v1-v2.md) |
+| 83 | Barre d'outils d'édition mobile — ruban style Obsidian Android | 2.3.0 | [archive](./archive/COMPLETED_v1-v2.md) |
 
 ---
 
@@ -175,10 +177,9 @@
 |---|---|---|
 | ✅ Complété | #1 → #59, #61–72, #74–76, #78–82 | ~107 jours réalisés |
 | 🔵 P2 restant | #77 Desktop : signature de code (non retenue), 6 tests E2E **manuels** ([protocole](./DESKTOP_E2E_CHECKLIST.md)) | ~0,5-1 jour |
-| ⚪ P2 restant | #83 Barre d'outils d'édition mobile style Obsidian (3-5j) | 3-5 jours |
 | ⚪ P4 restant | #73 Sync (6-8j) | 6-8 jours |
 | ⚪ P0/P1 restant | #85-87 Refonte architecturale, performance, CI/CD (issues BUG-035 → BUG-040) | ~15-23 jours |
-| **Total restant** | **7 items + finitions** | **~31-47 jours** |
+| **Total restant** | **6 items + finitions** | **~28-42 jours** |
 
 ---
 
diff --git a/docs/archive/COMPLETED_v1-v2.md b/docs/archive/COMPLETED_v1-v2.md
index 8d3966b..bb9f407 100644
--- a/docs/archive/COMPLETED_v1-v2.md
+++ b/docs/archive/COMPLETED_v1-v2.md
@@ -342,6 +342,26 @@ Traitement des vulnérabilités de la revue statique du 2026-09-13 (BUG-021 →
 
 ---
 
+## #83 — Barre d'outils d'édition mobile (ruban style Obsidian) ✅ TERMINÉ
+
+La barre de mise en forme flottante du mode édition mobile est remplacée par un
+**ruban horizontal défilable** ancré juste au-dessus du clavier virtuel.
+
+- **Ruban** (`frontend/js/mobile-editor.js`, `frontend/style.css`) : fond anthracite
+  aux coins arrondis, insertion/enrobage au curseur ou sur la sélection.
+- **Commandes** : annuler/refaire, `[[ ]]` (lien interne), fichiers/modèles, tag `#`,
+  pièce jointe, H1–H6, gras, italique, barré (`~~`), surligné (`==`), code en ligne/bloc,
+  citation, lien externe, listes à puces/numérotées, case à cocher, indenter/désindenter,
+  coller, A−/A+.
+- **Personnalisation** : icône **⚙** → ajouter / retirer / réordonner les commandes,
+  persisté dans `localStorage` (`obsigate-mobile-ribbon`).
+- **Ancrage clavier** (`BUG-019`) : `window.visualViewport` → variable CSS `--kb-offset`.
+- **Correctifs associés** : BUG-017 (tuiles du tableau de bord), BUG-018 (en-tête de
+  l'éditeur mobile), BUG-020 (double barre de défilement).
+- **Tests** : `tests/frontend/mobile-editor.test.mjs` (35) + E2E `mobile-editor.spec.js`.
+
+---
+
 ## Grosses fonctionnalités — fiches dédiées
 
 | # | Feature | Version | Fiche |
diff --git a/frontend/index.html b/frontend/index.html
index 3dd4b3f..7c5a8d7 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -129,6 +129,8 @@
                 defaultKeymap,
                 history,
                 historyKeymap,
+                undo,
+                redo,
             } from "https://esm.sh/@codemirror/commands@6.2.3?external=@codemirror/state";
             import {
                 searchKeymap,
@@ -200,6 +202,8 @@
                 rust,
                 oneDark,
                 keymap,
+                undo,
+                redo,
                 Decoration,
                 ViewPlugin,
                 WidgetType,
diff --git a/frontend/js/mobile-editor.js b/frontend/js/mobile-editor.js
index ef68f10..240bc74 100644
--- a/frontend/js/mobile-editor.js
+++ b/frontend/js/mobile-editor.js
@@ -22,9 +22,43 @@ export const MAX_EDITOR_FONT = 28;
 export const DEFAULT_EDITOR_FONT = 13.5;
 export const MIN_EDITOR_HEIGHT = 140;
 
+// ROADMAP #83 — every command the mobile ribbon can expose.
+export const RIBBON_COMMANDS = [
+  'undo', 'redo',
+  'wikilink', 'files', 'tag', 'attachment',
+  'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+  'bold', 'italic', 'strike', 'highlight', 'code', 'codeblock', 'quote',
+  'link', 'bullet', 'ordered', 'checkbox', 'indent', 'dedent',
+  'paste', 'font_smaller', 'font_larger',
+];
+// Default ribbon layout (Obsidian Android-like).
+export const DEFAULT_RIBBON_COMMANDS = [
+  'undo', 'redo', 'wikilink', 'files', 'tag', 'attachment',
+  'h1', 'h2', 'h3', 'bold', 'italic', 'strike', 'highlight',
+  'code', 'codeblock', 'quote', 'link', 'bullet', 'ordered',
+  'checkbox', 'indent', 'dedent', 'paste', 'font_smaller', 'font_larger',
+];
+
 const FONT_KEY = 'obsigate-editor-font-size';
 const HEIGHT_KEY = 'obsigate-editor-height';
 const READING_KEY = 'obsigate-reading-mode';
+const RIBBON_KEY = 'obsigate-mobile-ribbon';
+
+// Command glyphs (kept as plain text so they render with the mono font).
+const COMMAND_ICONS = {
+  undo: '↶', redo: '↷',
+  wikilink: '[[]]', files: '📁', tag: '#', attachment: '![[ ]]',
+  h1: 'H1', h2: 'H2', h3: 'H3', h4: 'H4', h5: 'H5', h6: 'H6',
+  bold: 'B', italic: 'I', strike: 'S̶', highlight: '==', code: '<>', codeblock: '{}', quote: '❝',
+  link: '🔗', bullet: '•', ordered: '1.', checkbox: '☑', indent: '→', dedent: '←',
+  paste: '📋', font_smaller: 'A−', font_larger: 'A+',
+};
+// Commands reusing an existing i18n key (the rest use mobile_editor.cmd_<id>).
+const COMMAND_LABEL_KEYS = {
+  paste: 'mobile_editor.paste',
+  font_smaller: 'mobile_editor.font_smaller',
+  font_larger: 'mobile_editor.font_larger',
+};
 
 // ── Pure helpers (unit tested) ─────────────────────────────────────────────
 
@@ -45,35 +79,62 @@ export function detectSwipe(dx, dy, threshold = SWIPE_THRESHOLD) {
 /**
  * Compute the text change produced by a Markdown formatting action.
  *
+ * Supports the legacy actions (bold, italic, code, list, link) plus the
+ * ROADMAP #83 ribbon commands (headings, strike, highlight, code block,
+ * quote, ordered list, checkbox, indent/dedent, wikilink, tag, attachment).
+ *
  * @param {string} text   Full document text.
  * @param {number} from   Selection start.
  * @param {number} to     Selection end.
- * @param {string} action One of FORMAT_ACTIONS.
+ * @param {string} action One of RIBBON_COMMANDS / FORMAT_ACTIONS.
  * @returns {{changes:{from:number,to:number,insert:string},selection:{anchor:number,head:number}}|null}
  */
 export function formatChange(text, from, to, action) {
   const selected = text.slice(from, to);
 
-  const wrap = (marker) => {
-    // Toggle off when the selection already carries the markers.
+  // Wrap/unwrap the selection with a marker pair.
+  const wrap = (open, close = open) => {
     if (
-      selected.length >= marker.length * 2 &&
-      selected.startsWith(marker) &&
-      selected.endsWith(marker)
+      selected.length >= open.length + close.length &&
+      selected.startsWith(open) &&
+      selected.endsWith(close)
     ) {
-      const inner = selected.slice(marker.length, -marker.length);
+      const inner = selected.slice(open.length, selected.length - close.length);
       return {
         changes: { from, to, insert: inner },
         selection: { anchor: from, head: from + inner.length },
       };
     }
-    const insert = marker + selected + marker;
+    const insert = open + selected + close;
     return {
       changes: { from, to, insert },
-      selection: { anchor: from + marker.length, head: to + marker.length },
+      selection: { anchor: from + open.length, head: from + open.length + selected.length },
     };
   };
 
+  // Apply a per-line prefix, toggling it off when every line already has it.
+  // ``pattern`` strips any competing prefix before adding the new one.
+  const prefixLines = (prefix, pattern) => {
+    const lineStart = text.lastIndexOf('\n', from - 1) + 1;
+    let lineEnd = text.indexOf('\n', to);
+    if (lineEnd === -1) lineEnd = text.length;
+    const lines = text.slice(lineStart, lineEnd).split('\n');
+    const allHave = lines.every((l) => l.startsWith(prefix));
+    const out = lines
+      .map((l) => {
+        if (allHave) return l.slice(prefix.length);
+        const base = pattern ? l.replace(pattern, '') : l;
+        return prefix + base;
+      })
+      .join('\n');
+    return {
+      changes: { from: lineStart, to: lineEnd, insert: out },
+      selection: { anchor: lineStart, head: lineStart + out.length },
+    };
+  };
+
+  const listPattern = /^([-*+]\s+|\d+\.\s+|- \[[ xX]\]\s+)/;
+
   switch (action) {
     case 'bold':
       return wrap('**');
@@ -81,19 +142,90 @@ export function formatChange(text, from, to, action) {
       return wrap('*');
     case 'code':
       return wrap('`');
-    case 'list': {
+    case 'strike':
+      return wrap('~~');
+    case 'highlight':
+      return wrap('==');
+    case 'wikilink':
+      return wrap('[[', ']]');
+    case 'attachment':
+      return wrap('![[', ']]');
+    case 'tag': {
+      const insert = '#' + selected;
+      const anchor = from + insert.length;
+      return { changes: { from, to, insert }, selection: { anchor, head: anchor } };
+    }
+    case 'h1':
+    case 'h2':
+    case 'h3':
+    case 'h4':
+    case 'h5':
+    case 'h6': {
+      const level = Number(action.slice(1));
+      return prefixLines('#'.repeat(level) + ' ', /^#{1,6}\s+/);
+    }
+    case 'quote':
+      return prefixLines('> ', /^>\s?/);
+    case 'bullet':
+    case 'list':
+      return prefixLines('- ', listPattern);
+    case 'checkbox':
+      return prefixLines('- [ ] ', listPattern);
+    case 'ordered': {
+      const lineStart = text.lastIndexOf('\n', from - 1) + 1;
+      let lineEnd = text.indexOf('\n', to);
+      if (lineEnd === -1) lineEnd = text.length;
+      const lines = text.slice(lineStart, lineEnd).split('\n');
+      const allOrdered = lines.every((l) => /^\d+\.\s+/.test(l));
+      const out = lines
+        .map((l, i) => {
+          if (allOrdered) return l.replace(/^\d+\.\s+/, '');
+          return `${i + 1}. ` + l.replace(listPattern, '');
+        })
+        .join('\n');
+      return {
+        changes: { from: lineStart, to: lineEnd, insert: out },
+        selection: { anchor: lineStart, head: lineStart + out.length },
+      };
+    }
+    case 'codeblock': {
       const lineStart = text.lastIndexOf('\n', from - 1) + 1;
       let lineEnd = text.indexOf('\n', to);
       if (lineEnd === -1) lineEnd = text.length;
       const block = text.slice(lineStart, lineEnd);
-      const lines = block.split('\n');
-      const allList = lines.every((l) => l.startsWith('- '));
-      const prefixed = lines
-        .map((l) => (allList ? l.replace(/^- /, '') : l.startsWith('- ') ? l : '- ' + l))
-        .join('\n');
+      if (block.startsWith('```') && block.endsWith('```') && block.length >= 6) {
+        const inner = block.slice(3, -3).replace(/^\n/, '').replace(/\n$/, '');
+        return {
+          changes: { from: lineStart, to: lineEnd, insert: inner },
+          selection: { anchor: lineStart, head: lineStart + inner.length },
+        };
+      }
+      const insert = '```\n' + block + '\n```';
       return {
-        changes: { from: lineStart, to: lineEnd, insert: prefixed },
-        selection: { anchor: lineStart, head: lineStart + prefixed.length },
+        changes: { from: lineStart, to: lineEnd, insert },
+        selection: { anchor: lineStart + 4, head: lineStart + 4 + block.length },
+      };
+    }
+    case 'indent': {
+      const lineStart = text.lastIndexOf('\n', from - 1) + 1;
+      let lineEnd = text.indexOf('\n', to);
+      if (lineEnd === -1) lineEnd = text.length;
+      const lines = text.slice(lineStart, lineEnd).split('\n');
+      const out = lines.map((l) => '  ' + l).join('\n');
+      return {
+        changes: { from: lineStart, to: lineEnd, insert: out },
+        selection: { anchor: lineStart, head: lineStart + out.length },
+      };
+    }
+    case 'dedent': {
+      const lineStart = text.lastIndexOf('\n', from - 1) + 1;
+      let lineEnd = text.indexOf('\n', to);
+      if (lineEnd === -1) lineEnd = text.length;
+      const lines = text.slice(lineStart, lineEnd).split('\n');
+      const out = lines.map((l) => l.replace(/^(\t| {1,2})/, '')).join('\n');
+      return {
+        changes: { from: lineStart, to: lineEnd, insert: out },
+        selection: { anchor: lineStart, head: lineStart + out.length },
       };
     }
     case 'link': {
@@ -109,6 +241,32 @@ export function formatChange(text, from, to, action) {
   }
 }
 
+/** Keep only known ribbon command ids, de-duplicated, in order. */
+export function normalizeRibbonCommands(list) {
+  const valid = new Set(RIBBON_COMMANDS);
+  const seen = new Set();
+  const out = [];
+  (Array.isArray(list) ? list : []).forEach((id) => {
+    if (valid.has(id) && !seen.has(id)) {
+      seen.add(id);
+      out.push(id);
+    }
+  });
+  return out.length ? out : [...DEFAULT_RIBBON_COMMANDS];
+}
+
+/** Move a command by ``delta`` positions within the list (clamped). */
+export function moveRibbonCommand(list, id, delta) {
+  const arr = [...list];
+  const i = arr.indexOf(id);
+  if (i === -1) return arr;
+  const j = Math.max(0, Math.min(arr.length - 1, i + delta));
+  if (i === j) return arr;
+  arr.splice(i, 1);
+  arr.splice(j, 0, id);
+  return arr;
+}
+
 /** Build a plain insertion change (used by the paste helper). */
 export function insertText(from, to, insert) {
   return {
@@ -228,62 +386,268 @@ async function handlePaste() {
   }
 }
 
-function makeButton(id, label, title, onClick) {
+// ── Formatting ribbon (ROADMAP #83) ────────────────────────────────────────
+
+let _ribbonCommands = null;
+
+function loadRibbonCommands() {
+  if (_ribbonCommands) return _ribbonCommands;
+  let stored = null;
+  try {
+    stored = JSON.parse(localStorage.getItem(RIBBON_KEY) || 'null');
+  } catch (_) {
+    stored = null;
+  }
+  _ribbonCommands = normalizeRibbonCommands(stored);
+  return _ribbonCommands;
+}
+
+function persistRibbonCommands(list) {
+  _ribbonCommands = normalizeRibbonCommands(list);
+  try {
+    localStorage.setItem(RIBBON_KEY, JSON.stringify(_ribbonCommands));
+  } catch (_) {
+    /* ignore quota / private mode */
+  }
+}
+
+function commandLabel(id) {
+  return t(COMMAND_LABEL_KEYS[id] || 'mobile_editor.cmd_' + id);
+}
+
+function runRibbonCommand(id) {
+  if (id === 'undo' || id === 'redo') {
+    const fn = window.CodeMirror && window.CodeMirror[id];
+    if (typeof fn === 'function' && state.editorView) {
+      fn(state.editorView);
+      if (typeof state.editorView.focus === 'function') state.editorView.focus();
+    }
+    return;
+  }
+  if (id === 'files') {
+    import('./palette.js').then((m) => m.open('')).catch(() => {});
+    return;
+  }
+  if (id === 'paste') {
+    handlePaste();
+    return;
+  }
+  if (id === 'font_smaller') {
+    bumpFontSize(-1);
+    return;
+  }
+  if (id === 'font_larger') {
+    bumpFontSize(1);
+    return;
+  }
+  handleFormat(id);
+}
+
+function buildRibbonButton(id) {
   const btn = document.createElement('button');
   btn.type = 'button';
-  btn.id = id;
-  btn.className = 'me-btn';
-  btn.title = title;
-  btn.setAttribute('aria-label', title);
-  btn.textContent = label;
-  btn.addEventListener('click', onClick);
+  btn.className = 'me-ribbon-btn';
+  btn.id = 'me-cmd-' + id;
+  btn.dataset.cmd = id;
+  btn.textContent = COMMAND_ICONS[id] || id;
+  const label = commandLabel(id);
+  btn.title = label;
+  btn.setAttribute('aria-label', label);
+  btn.addEventListener('click', () => runRibbonCommand(id));
   return btn;
 }
 
+function renderRibbon() {
+  const scroll = document.querySelector('#me-toolbar .me-ribbon-scroll');
+  if (!scroll) return;
+  scroll.innerHTML = '';
+  loadRibbonCommands().forEach((id) => scroll.appendChild(buildRibbonButton(id)));
+}
+
+// ── Ribbon customiser (gear button) ────────────────────────────────────────
+
+function buildCustomizerSheet() {
+  let sheet = document.getElementById('me-ribbon-customizer');
+  if (sheet) return sheet;
+
+  // Reuse the shared bottom-sheet overlay created by ensureSheet().
+  ensureSheet();
+
+  sheet = document.createElement('div');
+  sheet.id = 'me-ribbon-customizer';
+  sheet.className = 'me-sheet me-ribbon-customizer';
+  sheet.setAttribute('role', 'dialog');
+  sheet.setAttribute('aria-modal', 'true');
+
+  const handle = document.createElement('div');
+  handle.className = 'me-sheet-handle';
+  const header = document.createElement('div');
+  header.className = 'me-sheet-header';
+  const title = document.createElement('span');
+  title.className = 'me-sheet-title';
+  title.textContent = t('mobile_editor.customize_title');
+  const close = document.createElement('button');
+  close.type = 'button';
+  close.className = 'me-sheet-close';
+  close.textContent = '✕';
+  close.setAttribute('aria-label', t('mobile_editor.close'));
+  header.appendChild(title);
+  header.appendChild(close);
+
+  const list = document.createElement('div');
+  list.className = 'me-sheet-list me-ribbon-customizer-list';
+
+  const footer = document.createElement('div');
+  footer.className = 'me-ribbon-customizer-actions';
+  const reset = document.createElement('button');
+  reset.type = 'button';
+  reset.className = 'config-btn-secondary';
+  reset.textContent = t('mobile_editor.customize_reset');
+  const done = document.createElement('button');
+  done.type = 'button';
+  done.className = 'config-btn-primary';
+  done.textContent = t('mobile_editor.done');
+  footer.appendChild(reset);
+  footer.appendChild(done);
+
+  sheet.appendChild(handle);
+  sheet.appendChild(header);
+  sheet.appendChild(list);
+  sheet.appendChild(footer);
+  document.body.appendChild(sheet);
+
+  close.addEventListener('click', () => closeSheet(sheet));
+  done.addEventListener('click', () => closeSheet(sheet));
+  reset.addEventListener('click', () => {
+    persistRibbonCommands(DEFAULT_RIBBON_COMMANDS);
+    renderRibbon();
+    renderCustomizerList();
+  });
+  return sheet;
+}
+
+function _customizerRow(labelText, buttons, extraClass) {
+  const row = document.createElement('div');
+  row.className = 'me-ribbon-cmd-row' + (extraClass ? ' ' + extraClass : '');
+  const label = document.createElement('span');
+  label.className = 'me-ribbon-cmd-label';
+  label.textContent = labelText;
+  row.appendChild(label);
+  buttons.forEach((b) => row.appendChild(b));
+  return row;
+}
+
+function _smallButton(text, cls, aria, onClick, disabled) {
+  const b = document.createElement('button');
+  b.type = 'button';
+  b.className = cls;
+  b.textContent = text;
+  if (aria) b.setAttribute('aria-label', aria);
+  if (disabled) b.disabled = true;
+  b.addEventListener('click', onClick);
+  return b;
+}
+
+function renderCustomizerList() {
+  const sheet = document.getElementById('me-ribbon-customizer');
+  if (!sheet) return;
+  const list = sheet.querySelector('.me-ribbon-customizer-list');
+  if (!list) return;
+
+  const enabled = loadRibbonCommands();
+  const disabled = RIBBON_COMMANDS.filter((id) => !enabled.includes(id));
+  list.innerHTML = '';
+
+  enabled.forEach((id, index) => {
+    const up = _smallButton('↑', 'me-ribbon-cmd-move', t('mobile_editor.move_up'), () => {
+      persistRibbonCommands(moveRibbonCommand(enabled, id, -1));
+      renderRibbon();
+      renderCustomizerList();
+    }, index === 0);
+    const down = _smallButton('↓', 'me-ribbon-cmd-move', t('mobile_editor.move_down'), () => {
+      persistRibbonCommands(moveRibbonCommand(enabled, id, 1));
+      renderRibbon();
+      renderCustomizerList();
+    }, index === enabled.length - 1);
+    const remove = _smallButton('✕', 'me-ribbon-cmd-remove', t('mobile_editor.remove_command'), () => {
+      if (enabled.length <= 1) return;
+      persistRibbonCommands(enabled.filter((c) => c !== id));
+      renderRibbon();
+      renderCustomizerList();
+    }, false);
+    list.appendChild(
+      _customizerRow(`${COMMAND_ICONS[id] || id}  ${commandLabel(id)}`, [up, down, remove]),
+    );
+  });
+
+  if (disabled.length) {
+    const divider = document.createElement('div');
+    divider.className = 'me-ribbon-cmd-divider';
+    divider.textContent = t('mobile_editor.add_command');
+    list.appendChild(divider);
+    disabled.forEach((id) => {
+      const add = _smallButton('＋', 'me-ribbon-cmd-add', t('mobile_editor.add_command'), () => {
+        persistRibbonCommands([...enabled, id]);
+        renderRibbon();
+        renderCustomizerList();
+      }, false);
+      list.appendChild(_customizerRow(`${COMMAND_ICONS[id] || id}  ${commandLabel(id)}`, [add], 'disabled'));
+    });
+  }
+}
+
+function openRibbonCustomizer() {
+  const sheet = buildCustomizerSheet();
+  renderCustomizerList();
+  openSheet(sheet);
+}
+
+// ── Keyboard anchoring (BUG-019) ───────────────────────────────────────────
+
+function initKeyboardAnchor(bar) {
+  if (!window.visualViewport) return;
+  const vv = window.visualViewport;
+  const update = () => {
+    const offset = Math.max(0, Math.round((window.innerHeight || 0) - vv.height - vv.offsetTop));
+    bar.style.setProperty('--kb-offset', offset + 'px');
+    bar.classList.toggle('kb-open', offset > 40);
+  };
+  vv.addEventListener('resize', update);
+  vv.addEventListener('scroll', update);
+  window.addEventListener('resize', update);
+  document.addEventListener('focusin', () => setTimeout(update, 60));
+  document.addEventListener('focusout', () => setTimeout(update, 60));
+  update();
+}
+
 function buildFormattingToolbar() {
   const modal = document.getElementById('editor-modal');
   if (!modal || document.getElementById('me-toolbar')) return;
 
   const bar = document.createElement('div');
   bar.id = 'me-toolbar';
-  bar.className = 'me-toolbar';
+  bar.className = 'me-toolbar me-ribbon';
   bar.setAttribute('role', 'toolbar');
   bar.setAttribute('aria-label', t('mobile_editor.toolbar'));
 
-  const formats = [
-    { action: 'bold', label: 'B', title: t('mobile_editor.bold') },
-    { action: 'italic', label: 'I', title: t('mobile_editor.italic') },
-    { action: 'code', label: '<>', title: t('mobile_editor.code') },
-    { action: 'list', label: '•', title: t('mobile_editor.list') },
-    { action: 'link', label: '🔗', title: t('mobile_editor.link') },
-  ];
-  formats.forEach((f) => {
-    const btn = makeButton('me-fmt-' + f.action, f.label, f.title, () => handleFormat(f.action));
-    btn.dataset.action = f.action;
-    btn.classList.add('me-btn-format');
-    bar.appendChild(btn);
-  });
+  const scroll = document.createElement('div');
+  scroll.className = 'me-ribbon-scroll';
 
-  const sep = document.createElement('span');
-  sep.className = 'me-sep';
-  bar.appendChild(sep);
-
-  bar.appendChild(
-    makeButton('me-font-minus', 'A−', t('mobile_editor.font_smaller'), () => bumpFontSize(-1)),
-  );
-  bar.appendChild(
-    makeButton('me-font-plus', 'A+', t('mobile_editor.font_larger'), () => bumpFontSize(1)),
-  );
-
-  const sep2 = document.createElement('span');
-  sep2.className = 'me-sep';
-  bar.appendChild(sep2);
-
-  const pasteBtn = makeButton('me-paste', '📋', t('mobile_editor.paste'), handlePaste);
-  pasteBtn.classList.add('me-btn-paste');
-  bar.appendChild(pasteBtn);
+  const gear = document.createElement('button');
+  gear.type = 'button';
+  gear.id = 'me-ribbon-gear';
+  gear.className = 'me-ribbon-gear';
+  gear.textContent = '⚙';
+  gear.title = t('mobile_editor.customize');
+  gear.setAttribute('aria-label', t('mobile_editor.customize'));
+  gear.addEventListener('click', openRibbonCustomizer);
 
+  bar.appendChild(scroll);
+  bar.appendChild(gear);
   modal.appendChild(bar);
+
+  renderRibbon();
+  initKeyboardAnchor(bar);
 }
 
 // ── Editor height resize + pinch zoom ──────────────────────────────────────
diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index 370acec..d0f3682 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -1143,8 +1143,8 @@
   "help.mobile_editor_reading": ": full screen without header or sidebars; swipe horizontally to go to the next or previous file.",
   "help.mobile_editor_reading_label": "Reading mode",
   "help.mobile_editor_title": "📱 Mobile editing",
-  "help.mobile_editor_toolbar": ": bold, italic, code, bullet list and link. The A−/A+ buttons adjust the font size.",
-  "help.mobile_editor_toolbar_label": "Floating toolbar",
+  "help.mobile_editor_toolbar": ": horizontally scrollable ribbon (headings, bold, italic, strikethrough, highlight, code, quote, lists, checkboxes, links, tags, attachments). The ⚙ icon lets you add, remove or reorder commands; A−/A+ adjust the font size.",
+  "help.mobile_editor_toolbar_label": "Editing ribbon",
   "help.mobile_editor_zoom": ": pinch with two fingers to zoom, drag the handle to resize the editing area.",
   "help.mobile_editor_zoom_label": "Zoom & height",
   "help.modal_title": "ObsiGate User Guide",
@@ -1307,10 +1307,40 @@
   "mermaid.zoom_in": "Zoom in",
   "mermaid.zoom_out": "Zoom out",
   "mobile.all_vaults": "📂 All vaults",
+  "mobile_editor.add_command": "Add a command",
   "mobile_editor.backlinks": "Backlinks",
   "mobile_editor.bold": "Bold",
   "mobile_editor.close": "Close",
+  "mobile_editor.cmd_attachment": "Attachment",
+  "mobile_editor.cmd_bold": "Bold",
+  "mobile_editor.cmd_bullet": "Bullet list",
+  "mobile_editor.cmd_checkbox": "Checkbox",
+  "mobile_editor.cmd_code": "Inline code",
+  "mobile_editor.cmd_codeblock": "Code block",
+  "mobile_editor.cmd_dedent": "Outdent",
+  "mobile_editor.cmd_files": "Template / files",
+  "mobile_editor.cmd_h1": "Heading 1",
+  "mobile_editor.cmd_h2": "Heading 2",
+  "mobile_editor.cmd_h3": "Heading 3",
+  "mobile_editor.cmd_h4": "Heading 4",
+  "mobile_editor.cmd_h5": "Heading 5",
+  "mobile_editor.cmd_h6": "Heading 6",
+  "mobile_editor.cmd_highlight": "Highlight",
+  "mobile_editor.cmd_indent": "Indent",
+  "mobile_editor.cmd_italic": "Italic",
+  "mobile_editor.cmd_link": "External link",
+  "mobile_editor.cmd_ordered": "Numbered list",
+  "mobile_editor.cmd_quote": "Quote",
+  "mobile_editor.cmd_redo": "Redo",
+  "mobile_editor.cmd_strike": "Strikethrough",
+  "mobile_editor.cmd_tag": "Tag",
+  "mobile_editor.cmd_undo": "Undo",
+  "mobile_editor.cmd_wikilink": "Internal link",
   "mobile_editor.code": "Code",
+  "mobile_editor.customize": "Customize toolbar",
+  "mobile_editor.customize_reset": "Reset",
+  "mobile_editor.customize_title": "Customize toolbar",
+  "mobile_editor.done": "Done",
   "mobile_editor.error": "Loading error",
   "mobile_editor.font_larger": "Increase font size",
   "mobile_editor.font_smaller": "Decrease font size",
@@ -1318,6 +1348,8 @@
   "mobile_editor.link": "Link",
   "mobile_editor.list": "Bullet list",
   "mobile_editor.loading": "Loading…",
+  "mobile_editor.move_down": "Move down",
+  "mobile_editor.move_up": "Move up",
   "mobile_editor.no_backlinks": "No backlinks",
   "mobile_editor.no_headings": "No headings in this document",
   "mobile_editor.no_next": "Last file in folder",
@@ -1326,6 +1358,7 @@
   "mobile_editor.paste_hint": "Long-press the field then choose “Paste” (clipboard access denied).",
   "mobile_editor.reading_enter": "Reading mode",
   "mobile_editor.reading_exit": "Exit reading mode",
+  "mobile_editor.remove_command": "Remove",
   "mobile_editor.resize": "Adjust editor height",
   "mobile_editor.toc": "Table of contents",
   "mobile_editor.toolbar": "Mobile editing toolbar",
diff --git a/frontend/locales/fr.json b/frontend/locales/fr.json
index aabd5d5..3911ce6 100644
--- a/frontend/locales/fr.json
+++ b/frontend/locales/fr.json
@@ -1143,8 +1143,8 @@
   "help.mobile_editor_reading": " : plein écran sans en-tête ni barres latérales ; balayage horizontal pour passer au fichier suivant ou précédent.",
   "help.mobile_editor_reading_label": "Mode lecture",
   "help.mobile_editor_title": "📱 Édition mobile",
-  "help.mobile_editor_toolbar": " : gras, italique, code, liste à puces et lien. Les boutons A−/A+ ajustent la taille de la police.",
-  "help.mobile_editor_toolbar_label": "Barre d'outils flottante",
+  "help.mobile_editor_toolbar": " : ruban horizontal défilable (titres, gras, italique, barré, surligné, code, citation, listes, cases à cocher, liens, tags, pièces jointes). L'icône ⚙ permet d'ajouter, retirer ou réordonner les commandes ; A−/A+ ajustent la taille de la police.",
+  "help.mobile_editor_toolbar_label": "Ruban d'édition",
   "help.mobile_editor_zoom": " : pincement à deux doigts pour zoomer, poignée pour redimensionner la zone d'édition.",
   "help.mobile_editor_zoom_label": "Zoom & hauteur",
   "help.modal_title": "Guide d'utilisation ObsiGate",
@@ -1307,10 +1307,40 @@
   "mermaid.zoom_in": "Zoom avant",
   "mermaid.zoom_out": "Zoom arrière",
   "mobile.all_vaults": "📂 Toutes les vaults",
+  "mobile_editor.add_command": "Ajouter une commande",
   "mobile_editor.backlinks": "Liens entrants",
   "mobile_editor.bold": "Gras",
   "mobile_editor.close": "Fermer",
+  "mobile_editor.cmd_attachment": "Pièce jointe",
+  "mobile_editor.cmd_bold": "Gras",
+  "mobile_editor.cmd_bullet": "Liste à puces",
+  "mobile_editor.cmd_checkbox": "Case à cocher",
+  "mobile_editor.cmd_code": "Code en ligne",
+  "mobile_editor.cmd_codeblock": "Bloc de code",
+  "mobile_editor.cmd_dedent": "Désindenter",
+  "mobile_editor.cmd_files": "Modèle / fichiers",
+  "mobile_editor.cmd_h1": "Titre 1",
+  "mobile_editor.cmd_h2": "Titre 2",
+  "mobile_editor.cmd_h3": "Titre 3",
+  "mobile_editor.cmd_h4": "Titre 4",
+  "mobile_editor.cmd_h5": "Titre 5",
+  "mobile_editor.cmd_h6": "Titre 6",
+  "mobile_editor.cmd_highlight": "Surligné",
+  "mobile_editor.cmd_indent": "Indenter",
+  "mobile_editor.cmd_italic": "Italique",
+  "mobile_editor.cmd_link": "Lien externe",
+  "mobile_editor.cmd_ordered": "Liste numérotée",
+  "mobile_editor.cmd_quote": "Citation",
+  "mobile_editor.cmd_redo": "Refaire",
+  "mobile_editor.cmd_strike": "Barré",
+  "mobile_editor.cmd_tag": "Tag",
+  "mobile_editor.cmd_undo": "Annuler",
+  "mobile_editor.cmd_wikilink": "Lien interne",
   "mobile_editor.code": "Code",
+  "mobile_editor.customize": "Personnaliser la barre",
+  "mobile_editor.customize_reset": "Réinitialiser",
+  "mobile_editor.customize_title": "Personnaliser la barre d'outils",
+  "mobile_editor.done": "Terminé",
   "mobile_editor.error": "Erreur de chargement",
   "mobile_editor.font_larger": "Agrandir la police",
   "mobile_editor.font_smaller": "Réduire la police",
@@ -1318,6 +1348,8 @@
   "mobile_editor.link": "Lien",
   "mobile_editor.list": "Liste à puces",
   "mobile_editor.loading": "Chargement…",
+  "mobile_editor.move_down": "Descendre",
+  "mobile_editor.move_up": "Monter",
   "mobile_editor.no_backlinks": "Aucun lien entrant",
   "mobile_editor.no_headings": "Aucun titre dans ce document",
   "mobile_editor.no_next": "Dernier fichier du dossier",
@@ -1326,6 +1358,7 @@
   "mobile_editor.paste_hint": "Appuyez longuement dans le champ puis choisissez « Coller » (accès au presse-papiers refusé).",
   "mobile_editor.reading_enter": "Mode lecture",
   "mobile_editor.reading_exit": "Quitter le mode lecture",
+  "mobile_editor.remove_command": "Supprimer",
   "mobile_editor.resize": "Ajuster la hauteur de l'éditeur",
   "mobile_editor.toc": "Table des matières",
   "mobile_editor.toolbar": "Barre d'outils d'édition mobile",
diff --git a/frontend/style.css b/frontend/style.css
index 5f3ba4f..84f1c30 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -3440,23 +3440,62 @@ select {
     height: 36px;
     min-width: 36px;
   }
+  /* BUG-018: keep the Save / Cancel / Delete buttons reachable on small
+     screens by shrinking the inputs and hiding secondary header items. */
+  .editor-brand,
+  .editor-sep,
+  .editor-spacer,
+  .collab-presence {
+    display: none !important;
+  }
+  .editor-title-input {
+    flex: 1 1 60px;
+    min-width: 0;
+    font-size: 13px;
+  }
+  .editor-filename-input {
+    width: auto;
+    flex: 0 1 84px;
+    min-width: 0;
+    font-size: 11px;
+  }
+  .editor-save-dot {
+    margin-right: 2px;
+    padding: 0;
+  }
+  #editor-save-label {
+    display: none;
+  }
+  .editor-header .editor-btn {
+    flex: 0 0 auto;
+  }
   .editor-body {
     flex: 1;
     min-height: 0;
-    overflow: auto;
+    /* BUG-020: only the CodeMirror scroller scrolls — no double scrollbar. */
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+  #ai-toolbar-container {
+    flex: 0 0 auto;
   }
   .cm-editor {
+    flex: 1 1 auto;
     height: auto;
-    min-height: 100%;
+    min-height: 0;
   }
   .cm-scroller {
-    overflow: auto !important;
-    height: auto;
-    min-height: 100%;
+    overflow-y: auto !important;
+    overflow-x: hidden !important;
+    /* BUG-019: keep the caret clear of the fixed ribbon. */
+    padding-bottom: 72px;
   }
   .fallback-editor {
-    min-height: 100%;
-    height: auto;
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    padding-bottom: 72px;
   }
   .search-results-header {
     align-items: flex-start;
@@ -6102,6 +6141,10 @@ body.popup-mode .content-area {
   gap: 4px;
   animation: fadeSlideIn 0.3s ease forwards;
   opacity: 0;
+  /* BUG-017: allow the card to shrink inside the grid instead of overflowing
+     the viewport because of long nowrap titles/paths. */
+  min-width: 0;
+  overflow: hidden;
 }
 
 .dashboard-card:hover {
@@ -6160,6 +6203,7 @@ body.popup-mode .content-area {
   align-items: flex-start;
   justify-content: space-between;
   gap: 8px;
+  min-width: 0;
 }
 
 .dashboard-card-icon {
@@ -6253,6 +6297,7 @@ body.popup-mode .content-area {
   margin-top: 4px;
   padding-top: 6px;
   border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
+  min-width: 0;
 }
 
 .dashboard-card-time {
@@ -9482,64 +9527,176 @@ body.bookslm-resizing { cursor: ew-resize; user-select: none; }
    shortcuts and distraction-free reading mode.
    ══════════════════════════════════════════ */
 
-/* ── Floating formatting toolbar (inside editor modal) ── */
+/* ── Obsidian-style editing ribbon (ROADMAP #83) ── */
 .me-toolbar {
   display: none;
 }
 
-.me-btn {
+.me-ribbon {
+  --kb-offset: 0px;
+}
+
+.me-ribbon-scroll {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+  padding: 2px 2px;
+  min-width: 0;
+  flex: 1;
+}
+.me-ribbon-scroll::-webkit-scrollbar {
+  display: none;
+}
+
+.me-ribbon-btn {
+  flex: 0 0 auto;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 40px;
-  height: 40px;
-  padding: 0 10px;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  background: var(--bg-secondary);
+  min-width: 42px;
+  height: 42px;
+  padding: 0 8px;
+  border: 1px solid transparent;
+  border-radius: 10px;
+  background: transparent;
   color: var(--text-primary);
-  font-size: 15px;
+  font-size: 14px;
   font-weight: 600;
+  font-family: var(--font-mono);
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
   transition: background 120ms ease, transform 120ms ease;
 }
-.me-btn:active {
-  transform: scale(0.94);
-  background: var(--bg-hover, rgba(128, 128, 128, 0.18));
+.me-ribbon-btn:active {
+  transform: scale(0.92);
+  background: rgba(128, 128, 128, 0.22);
 }
-.me-btn-format {
-  font-family: var(--font-mono);
+
+.me-ribbon-gear {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 42px;
+  height: 42px;
+  border: none;
+  border-left: 1px solid var(--border);
+  border-radius: 0;
+  background: transparent;
+  color: var(--text-muted);
+  font-size: 18px;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
 }
-.me-btn-paste {
-  margin-left: auto;
-  background: var(--accent);
-  color: #fff;
-  border-color: var(--accent);
+.me-ribbon-gear:active {
+  color: var(--accent);
 }
-.me-sep {
-  width: 1px;
-  height: 26px;
-  background: var(--border);
-  flex-shrink: 0;
+
+/* Ribbon customiser rows */
+.me-ribbon-customizer-list {
+  max-height: 50vh;
+  overflow-y: auto;
+}
+.me-ribbon-cmd-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--border);
+}
+.me-ribbon-cmd-row.disabled {
+  opacity: 0.75;
+}
+.me-ribbon-cmd-label {
+  flex: 1;
+  font-size: 0.85rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.me-ribbon-cmd-move,
+.me-ribbon-cmd-remove,
+.me-ribbon-cmd-add {
+  flex: 0 0 auto;
+  width: 34px;
+  height: 34px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  font-size: 14px;
+  cursor: pointer;
+}
+.me-ribbon-cmd-move:disabled {
+  opacity: 0.35;
+}
+.me-ribbon-cmd-remove {
+  color: var(--danger);
+}
+.me-ribbon-cmd-divider {
+  padding: 10px;
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-muted);
+}
+.me-ribbon-customizer-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 10px;
+  border-top: 1px solid var(--border);
+}
+
+/* BUG-018: the in-editor AI toolbar was too dense on small screens. */
+@media (max-width: 768px) {
+  .ai-toolbar {
+    gap: 4px !important;
+    padding: 6px 8px !important;
+  }
+  .ai-toolbar-btn {
+    min-height: 34px;
+    padding: 6px 10px !important;
+    font-size: 0.78rem !important;
+  }
 }
 
 @media (max-width: 768px) {
-  .editor-modal.active .me-toolbar {
+  .editor-modal.active .me-ribbon {
     display: flex;
     position: fixed;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    left: 8px;
+    right: 8px;
+    /* BUG-019: sit just above the on-screen keyboard. */
+    bottom: calc(var(--kb-offset, 0px) + 8px + env(safe-area-inset-bottom, 0));
     z-index: 30;
-    gap: 6px;
     align-items: center;
-    padding: 8px 10px;
-    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0));
-    background: var(--bg-primary);
-    border-top: 1px solid var(--border);
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
+    gap: 4px;
+    padding: 4px;
+    background: #1c1c1e;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 14px;
+    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
+  }
+  .me-ribbon-btn {
+    color: #e8e8ea;
+  }
+  .me-ribbon-gear {
+    color: #b8b8bd;
+  }
+  [data-theme="light"] .me-ribbon {
+    background: #f1f1f4;
+    border-color: rgba(0, 0, 0, 0.08);
+  }
+  [data-theme="light"] .me-ribbon-btn {
+    color: #1c1c1e;
+  }
+  [data-theme="light"] .me-ribbon-gear {
+    color: #5a5a60;
   }
 }
 
diff --git a/tests/e2e/mobile-editor.spec.js b/tests/e2e/mobile-editor.spec.js
index 40a58d2..483a130 100644
--- a/tests/e2e/mobile-editor.spec.js
+++ b/tests/e2e/mobile-editor.spec.js
@@ -45,19 +45,19 @@ test.describe('Mobile editor (#69)', () => {
     await expect(page.locator('body')).not.toHaveClass(/reading-mode/);
   });
 
-  test('editor modal exposes the floating formatting toolbar', async ({ page, viewport }) => {
+  test('editor modal exposes the Obsidian-style editing ribbon', async ({ page, viewport }) => {
     test.skip((viewport?.width ?? 0) > MOBILE_MAX_WIDTH, 'Mobile viewport required');
     await boot(page);
 
-    // Force the editor modal open — the toolbar visibility is pure CSS.
+    // Force the editor modal open — the ribbon visibility is pure CSS.
     await page.evaluate(() => document.getElementById('editor-modal').classList.add('active'));
 
     const toolbar = page.locator('#me-toolbar');
     await expect(toolbar).toBeVisible();
-    for (const action of ['bold', 'italic', 'code', 'list', 'link']) {
-      await expect(page.locator('#me-fmt-' + action)).toBeVisible();
+    for (const cmd of ['bold', 'italic', 'strike', 'highlight', 'wikilink', 'checkbox', 'undo', 'redo']) {
+      await expect(page.locator('#me-cmd-' + cmd)).toBeVisible();
     }
-    await expect(page.locator('#me-paste')).toBeVisible();
+    await expect(page.locator('#me-ribbon-gear')).toBeVisible();
   });
 
   test('font zoom buttons persist the editor font size', async ({ page, viewport }) => {
@@ -65,8 +65,8 @@ test.describe('Mobile editor (#69)', () => {
     await boot(page);
     await page.evaluate(() => document.getElementById('editor-modal').classList.add('active'));
 
-    await page.locator('#me-font-plus').click();
-    await page.locator('#me-font-plus').click();
+    await page.locator('#me-cmd-font_larger').click();
+    await page.locator('#me-cmd-font_larger').click();
     const stored = await page.evaluate(() => localStorage.getItem('obsigate-editor-font-size'));
     expect(Number(stored)).toBeGreaterThan(13.5);
   });
diff --git a/tests/frontend/mobile-editor.test.mjs b/tests/frontend/mobile-editor.test.mjs
index 34067d9..246fe3b 100644
--- a/tests/frontend/mobile-editor.test.mjs
+++ b/tests/frontend/mobile-editor.test.mjs
@@ -52,11 +52,15 @@ const mod = await import(
 
 const {
   FORMAT_ACTIONS,
+  RIBBON_COMMANDS,
+  DEFAULT_RIBBON_COMMANDS,
   MIN_EDITOR_FONT,
   MAX_EDITOR_FONT,
   clampZoom,
   detectSwipe,
   formatChange,
+  normalizeRibbonCommands,
+  moveRibbonCommand,
   insertText,
   applyFormatToTextarea,
   applyEditorFontSize,
@@ -161,7 +165,7 @@ test("formatChange link builds [selection](url) and selects the url", () => {
 });
 
 test("formatChange returns null for an unknown action", () => {
-  assert.equal(formatChange("abc", 0, 0, "strike"), null);
+  assert.equal(formatChange("abc", 0, 0, "nope"), null);
 });
 
 test("insertText builds an insertion change at the cursor", () => {
@@ -170,6 +174,62 @@ test("insertText builds an insertion change at the cursor", () => {
   assert.deepEqual(c.selection, { anchor: 8, head: 8 });
 });
 
+// ── ROADMAP #83 — ribbon command transforms ────────────────────────────────
+test("formatChange strike and highlight wrap with the right markers", () => {
+  assert.equal(formatChange("x", 0, 1, "strike").changes.insert, "~~x~~");
+  assert.equal(formatChange("x", 0, 1, "highlight").changes.insert, "==x==");
+});
+
+test("formatChange wikilink and attachment wrap with brackets", () => {
+  assert.equal(formatChange("Note", 0, 4, "wikilink").changes.insert, "[[Note]]");
+  assert.equal(formatChange("img.png", 0, 7, "attachment").changes.insert, "![[img.png]]");
+});
+
+test("formatChange tag prefixes a hash", () => {
+  const c = formatChange("devops", 0, 6, "tag");
+  assert.equal(c.changes.insert, "#devops");
+  assert.deepEqual(c.selection, { anchor: 7, head: 7 });
+});
+
+test("formatChange heading replaces an existing heading level", () => {
+  const c = formatChange("# Title", 0, 7, "h2");
+  assert.equal(c.changes.insert, "## Title");
+});
+
+test("formatChange heading toggles off the same level", () => {
+  const c = formatChange("## Title", 0, 8, "h2");
+  assert.equal(c.changes.insert, "Title");
+});
+
+test("formatChange quote, bullet, checkbox and ordered list prefix lines", () => {
+  assert.equal(formatChange("a\nb", 0, 3, "quote").changes.insert, "> a\n> b");
+  assert.equal(formatChange("a\nb", 0, 3, "bullet").changes.insert, "- a\n- b");
+  assert.equal(formatChange("a\nb", 0, 3, "checkbox").changes.insert, "- [ ] a\n- [ ] b");
+  assert.equal(formatChange("a\nb", 0, 3, "ordered").changes.insert, "1. a\n2. b");
+});
+
+test("formatChange codeblock wraps the selected block in fences", () => {
+  const c = formatChange("code", 0, 4, "codeblock");
+  assert.equal(c.changes.insert, "```\ncode\n```");
+});
+
+test("formatChange indent and dedent shift lines", () => {
+  assert.equal(formatChange("a\nb", 0, 3, "indent").changes.insert, "  a\n  b");
+  assert.equal(formatChange("  a\n\tb", 0, 6, "dedent").changes.insert, "a\nb");
+});
+
+test("normalizeRibbonCommands filters unknown ids and falls back to default", () => {
+  assert.deepEqual(normalizeRibbonCommands(["bold", "nope", "bold"]), ["bold"]);
+  assert.deepEqual(normalizeRibbonCommands([]), [...DEFAULT_RIBBON_COMMANDS]);
+  assert.deepEqual(normalizeRibbonCommands(null), [...DEFAULT_RIBBON_COMMANDS]);
+});
+
+test("moveRibbonCommand reorders within bounds", () => {
+  assert.deepEqual(moveRibbonCommand(["a", "b", "c"], "b", -1), ["b", "a", "c"]);
+  assert.deepEqual(moveRibbonCommand(["a", "b", "c"], "c", 1), ["a", "b", "c"]);
+  assert.deepEqual(moveRibbonCommand(["a", "b"], "a", -1), ["a", "b"]);
+});
+
 // ── Textarea application ───────────────────────────────────────────────────
 test("applyFormatToTextarea formats the current textarea selection", () => {
   const ta = w.document.createElement("textarea");
@@ -187,17 +247,29 @@ test("applyFormatToTextarea returns false without an element", () => {
 });
 
 // ── DOM wiring ─────────────────────────────────────────────────────────────
-test("initMobileEditor builds the floating toolbar with the five actions", () => {
+test("initMobileEditor builds the ribbon toolbar with the gear button", () => {
   initMobileEditor();
   const bar = w.document.getElementById("me-toolbar");
   assert.ok(bar, "toolbar exists");
-  for (const action of FORMAT_ACTIONS) {
-    assert.ok(w.document.getElementById("me-fmt-" + action), action + " button exists");
+  assert.ok(bar.classList.contains("me-ribbon"), "uses the ribbon style");
+  assert.ok(w.document.querySelector("#me-toolbar .me-ribbon-scroll"), "scroll container exists");
+  for (const id of DEFAULT_RIBBON_COMMANDS) {
+    assert.ok(w.document.getElementById("me-cmd-" + id), id + " command exists");
   }
-  assert.ok(w.document.getElementById("me-paste"), "paste button exists");
+  assert.ok(w.document.getElementById("me-ribbon-gear"), "gear button exists");
   assert.ok(w.document.getElementById("me-resize-handle"), "resize handle exists");
 });
 
+test("ribbon customiser opens and lists commands", () => {
+  const gear = w.document.getElementById("me-ribbon-gear");
+  gear.click();
+  const sheet = w.document.getElementById("me-ribbon-customizer");
+  assert.ok(sheet, "customiser sheet exists");
+  assert.ok(sheet.classList.contains("open"), "customiser is open");
+  assert.ok(sheet.querySelectorAll(".me-ribbon-cmd-row").length >= RIBBON_COMMANDS.length,
+    "every command is listed");
+});
+
 test("initMobileEditor is idempotent", () => {
   initMobileEditor();
   const bars = w.document.querySelectorAll("#me-toolbar");