Sync button sits in the view switch's row on every page

Model, registry and decision pages: next to the switch, not floating above
it. Graph page: after Export PNG (its header is built by graph.js a moment
later, so the button waits for it) instead of covering Export. Sized to
the controls beside it.

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## 0.10.8 — 2026-11-08
 
 - **A model opens as its outline.** On `main.archify` the top-level panels (Shared, Diagrams, Registries, Decisions) start collapsed; open the one you need. What you open or close is kept while the page is open.
+- **Sync button in line on every page.** On the model, registry and decision pages it sits next to Model | Graph | Source instead of floating above it, and on the Graph page it comes after Export PNG instead of covering it. It takes the height of the controls beside it.
 
 ## 0.10.7 — 2026-11-08
 

src/webview/page.ts

@@ -902,14 +902,23 @@ function bridgeScript(options: PageOptions): string {
     button.type = 'button';
     button.title = 'Archify Sync: sign in, share this model with others, or join one';
     button.addEventListener('click', function (event) { event.stopPropagation(); post({ type: 'syncMenu' }); });
-    // A diagram page has Archify's toolbar at the top right: the button goes
-    // last in it, after Export. Other pages have nothing there; it floats.
-    var toolbar = document.querySelector('body > .toolbar');
-    if (toolbar) {
+    // Last in the row that holds the view switch: Archify's toolbar on a
+    // diagram (after Export), the Graph page's header actions (after Export,
+    // built a moment later by graph.js), next to the switch on the other
+    // pages. It floats only while there is no such row.
+    document.body.appendChild(button);
+    function place() {
+      var modeSwitch = document.getElementById('archify-mode-switch');
+      var row = document.querySelector('.ag-actions') || (modeSwitch && modeSwitch.parentElement) || document.querySelector('body > .toolbar');
+      if (!row || row === document.body) return false;
       button.classList.add('in-toolbar');
-      toolbar.appendChild(button);
-    } else {
-      document.body.appendChild(button);
+      row.classList.add('archify-sync-row');
+      row.appendChild(button);
+      return true;
+    }
+    if (!place() && window.MutationObserver) {
+      var watch = new MutationObserver(function () { if (place()) watch.disconnect(); });
+      watch.observe(document.body, { childList: true, subtree: true });
     }
     showSyncState(false);
     post({ type: 'syncReady' });
@@ -940,7 +949,9 @@ function bridgeScript(options: PageOptions): string {
     + ' display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 8px !important; cursor: pointer !important;'
     + ' color: #fff !important; background: var(--vscode-button-background, #0e639c) !important; border: 1px solid var(--vscode-contrastBorder, transparent) !important;'
     + ' box-shadow: 0 1px 4px rgba(0,0,0,.35) !important; }'
+    + ' .archify-model-switch-row.archify-sync-row { display: flex !important; align-items: center !important; gap: 0.5rem !important; }'
     + ' #archify-sync-button.in-toolbar { position: relative !important; top: auto !important; right: auto !important; align-self: center !important; flex: none !important; width: 36px !important; height: 36px !important; }'
+    + ' .ag-actions #archify-sync-button.in-toolbar, .archify-model-switch-row #archify-sync-button.in-toolbar { align-self: stretch !important; height: auto !important; width: auto !important; aspect-ratio: 1 / 1 !important; }'
     + ' body.vscode-high-contrast #archify-sync-button:not(.is-shared) { background: #0e639c !important; }'
     + ' #archify-sync-button svg { display: block !important; width: 16px !important; height: 16px !important; flex: none !important; }'
     + ' #archify-sync-button:hover { background: var(--vscode-button-hoverBackground, #1177bb) !important; }'