Merge pull request '0.10.4: a real Sync button on every Archify page' (#35) from feat/sync-page-button into main

A labelled Sync button sits top right on every Archify page, also in Source, and opens the Sync menu. On a shared model it turns green and reads Shared. The title-bar icon and the pre-share status bar entry are gone, with their settings.

CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 0.10.4 — 2026-11-07
+
+- **A real Sync button.** Every Archify page (diagram, model, graph, registry, decision, and in Source) shows a **Sync** button top right. It opens the Sync menu: sign in, share the model, join one, set the server address. On a model that is shared it turns green and reads **Shared**.
+- Removed the small title-bar icon and the status bar entry shown before anything was shared, with their settings `archify.sync.titleButton` and `archify.sync.statusBar`. A shared model still shows its live state in the status bar.
+
+## 0.10.3 — 2026-11-07
+
+- **Sync button in the title bar.** Every Archify page (and `.archify` text editors) has a **Sync** button top right, next to *Open in Text Editor*: sign in, share a model, join one, set the server address. The status bar entry stays for those who show the status bar. `archify.sync.titleButton: false` hides the button.
+
+## 0.10.2 — 2026-11-07
+
+- Fixed: going back from **Source** to **Model**, **Diagram** or **View** left the YAML editor on the page under the picture when nothing had been edited. It now hides at once.
+
+## 0.10.1 — 2026-11-06
+
+- **Archify Sync is easier to find.** In workspaces with Archify files, **Archify Sync** sits in the status bar. Click it for a menu: sign in, share a model, join one, set the server address, open the settings. It shows the server you are signed in to, and the live state once a model is shared. `archify.sync.statusBar: false` hides it; nothing else changes without a server.
+- **Server address as a setting.** `archify.sync.server` (empty by default, for example `https://archify.example.com`) is used by sign-in, share and the menu without asking. In the workspace settings it gives a whole project the same server. *Archify | Set Sync Server Address…* sets it.
+
 ## 0.10.0 — 2026-11-06
 
 - **Archify Sync (optional).** Several people edit one model at once through a server you run yourself ([archify-vscode-ext-sync](https://gitea.lego-cloud.eu/vscode-extensions/archify-vscode-ext-sync)); the files stay ordinary files on each disk. Commands: *Sign in to Sync Server…*, *Share Model…*, *Copy Invite Link*, *Join Shared Model…*, *Publish Version…*, *Versions…*, *Stop Syncing Model…*. Sign-in through the browser (PKCE), sessions in VS Code's secret storage, an *Archify Sync* account provider. Edits from editors, pages, Git and agents go out at once; others' edits arrive in open editors with undo intact. Everything is kept on the machine first, so work goes on offline and merges later. Teammates' cursors show as named carets in the Source view and in VS Code's text editors, and stay on their word while others type. The status bar shows who is here; the model page gets a **Shared** section with people, the file each has open, and the latest versions with **Compare** and **Restore**.

README.md

@@ -140,7 +140,9 @@ Optional. Without a sync server the extension works exactly as described above a
 
 [Archify Sync](https://gitea.lego-cloud.eu/vscode-extensions/archify-vscode-ext-sync) is a small server you run yourself (one container and PostgreSQL; a Helm chart is included). With it, a model is edited by several people at once, like a shared document, and its files stay ordinary files on each person's disk, so Git, agents and every page of this extension keep working.
 
-- **Sign in.** *Archify | Sign in to Sync Server…* asks for the server's address and signs in through the browser; the session is kept in VS Code's secret storage and shows under **Accounts** as *Archify Sync*. A new server is set up first on its `/setup` page with the code from its log.
+- **Where.** Every Archify page (diagram, model, graph, registry, decision, also in Source) has a **Sync** button top right. It opens the Sync menu: sign in, share the model, join one, the server address, settings. On a shared model it turns green and reads **Shared**. The same menu is *Archify | Sync…* in the Command Palette.
+- **Server address.** Set `archify.sync.server` once (Settings › Archify › Sync, or *Archify | Set Sync Server Address…*), for example `https://archify.example.com`. Put it in the workspace settings and everyone in the project uses the same server. Left empty, the address is asked for once and remembered.
+- **Sign in.** *Archify | Sign in to Sync Server…* uses that address (or asks for it) and signs in through the browser; the session is kept in VS Code's secret storage and shows under **Accounts** as *Archify Sync*. A new server is set up first on its `/setup` page with the code from its log.
 - **Share.** *Archify | Share Model…* (also on `main.archify` in the Explorer) puts the model on the server and writes a small `.archify-sync` file next to `main.archify`: the server and the model's id, no secrets. Commit it, and everyone who clones the repository and is a member opens the shared model.
 - **Invite and join.** *Archify | Copy Invite Link* copies a link for the model; send it any way you like. Opening it (or *Archify | Join Shared Model…*) signs the person in, or up, and puts the files in an empty folder of their choice.
 - **Live.** Edits in any editor, page, Source view, by Git or by an agent reach the others within a moment. Their edits arrive in your open editors with undo intact and are saved to disk; your own unsaved work stays unsaved. The status bar shows **Archify live · 3 here**; the model page gets a **Shared** section with who is here and in which file, and each diagram card says who has it open. In the Source view and in text editors, teammates' cursors show as coloured carets with their names.

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "archify-vscode-ext",
-  "version": "0.10.0",
+  "version": "0.10.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "archify-vscode-ext",
-      "version": "0.10.0",
+      "version": "0.10.4",
       "license": "MIT",
       "dependencies": {
         "@codemirror/autocomplete": "^6.20.4",

package.json

@@ -2,7 +2,7 @@
   "name": "archify-vscode-ext",
   "displayName": "Archify Diagram Viewer",
   "description": "Archify diagrams in VS Code. Write diagrams as .archify files in YAML: they open as the interactive diagram, with live updates, validation, templates and completion. Also previews Archify's own JSON files (*.architecture.json, …) and opens rendered Archify HTML.",
-  "version": "0.10.0",
+  "version": "0.10.4",
   "publisher": "root-at-skic",
   "license": "MIT",
   "sponsor": {
@@ -163,7 +163,12 @@
       {
         "command": "archify.sync.menu",
         "title": "Archify | Sync…",
-        "icon": "$(broadcast)"
+        "icon": "$(live-share)"
+      },
+      {
+        "command": "archify.sync.setServer",
+        "title": "Archify | Set Sync Server Address…",
+        "icon": "$(server)"
       }
     ],
     "menus": {
@@ -223,10 +228,6 @@
         {
           "command": "archify.sync.stop",
           "when": "archify.sync.active"
-        },
-        {
-          "command": "archify.sync.menu",
-          "when": "archify.sync.active"
         }
       ],
       "editor/title": [
@@ -513,6 +514,14 @@
           "type": "string",
           "default": "",
           "description": "Node.js executable (18 or newer) used to run the renderer. Empty means the runtime bundled with VS Code."
+        },
+        "archify.sync.server": {
+          "type": "string",
+          "default": "",
+          "scope": "window",
+          "pattern": "^$|^https?://",
+          "patternErrorMessage": "An address such as https://archify.example.com",
+          "markdownDescription": "Address of your Archify Sync server, for example `https://archify.example.com`. The **Sync** button on Archify pages, *Sign in* and *Share Model* use it without asking. Set it in the workspace settings so everyone in the project uses the same server. Empty: asked once and remembered. Archify Sync is optional; see the README."
         }
       }
     },

src/sync/index.ts

@@ -23,6 +23,7 @@ export const SYNC_COMMANDS = [
   'archify.sync.versions',
   'archify.sync.stop',
   'archify.sync.menu',
+  'archify.sync.setServer',
 ] as const;
 
 const SKIP = '{**/node_modules/**,**/.git/**}';
@@ -38,6 +39,8 @@ export class SyncFeature implements vscode.Disposable, LiveProvider {
   private readonly versionCache = new Map<string, { at: number; versions: Promise<Version[]> }>();
   private readonly editorCursors: EditorCursors;
   private cursorTimer: ReturnType<typeof setTimeout> | undefined;
+  /** Servers with a session on this machine, for the status bar before any model is shared. */
+  private signedIn: string[] = [];
 
   constructor(
     private readonly context: vscode.ExtensionContext,
@@ -62,8 +65,9 @@ export class SyncFeature implements vscode.Disposable, LiveProvider {
       vscode.workspace.registerTextDocumentContentProvider(VERSION_SCHEME, this.content),
       this.auth.onDidChangeSessions(() => {
         for (const space of this.spaces.values()) space.reconnect();
-        this.render();
+        void this.refreshSignedIn();
       }),
+      vscode.workspace.onDidChangeConfiguration((e) => e.affectsConfiguration('archify.sync') && this.render()),
     );
     this.editorCursors = new EditorCursors({ cursors: (file) => this.cursors(file), setCursor: (file, selection) => this.setCursorIn(file, selection) });
     this.disposables.push(this.editorCursors);
@@ -74,6 +78,11 @@ export class SyncFeature implements vscode.Disposable, LiveProvider {
   async start(): Promise<void> {
     const found = await vscode.workspace.findFiles(`**/${LINK_FILE}`, SKIP, 50);
     await Promise.all(found.map((uri) => this.open(uri, 'open')));
+    await this.refreshSignedIn();
+  }
+
+  private async refreshSignedIn(): Promise<void> {
+    this.signedIn = await this.auth.servers();
     this.render();
   }
 
@@ -129,6 +138,7 @@ export class SyncFeature implements vscode.Disposable, LiveProvider {
     if (!spaces.length) {
       this.status.hide();
       void vscode.commands.executeCommand('setContext', 'archify.sync.active', false);
+      this.bridge?.changed();
       return;
     }
     void vscode.commands.executeCommand('setContext', 'archify.sync.active', true);
@@ -300,6 +310,9 @@ export class SyncFeature implements vscode.Disposable, LiveProvider {
         case 'archify.sync.menu':
           await this.menu();
           break;
+        case 'archify.sync.setServer':
+          await this.setServer();
+          break;
       }
     } catch (error) {
       this.report(error);
@@ -319,8 +332,13 @@ export class SyncFeature implements vscode.Disposable, LiveProvider {
     else if (uri.path === '/join') await this.run('archify.sync.join', uri.toString(true));
   }
 
+  /** The server from the archify.sync.server setting, or asked for (and remembered). */
   private async askServer(): Promise<string | undefined> {
-    const last = this.context.globalState.get<string>('archifySync.lastServer');
+    return configuredServer() ?? this.promptServer();
+  }
+
+  private async promptServer(): Promise<string | undefined> {
+    const last = configuredServer() ?? this.context.globalState.get<string>('archifySync.lastServer');
     const value = await vscode.window.showInputBox({
       title: 'Archify | Sync server',
       prompt: 'The address of the Archify Sync server',
@@ -350,6 +368,16 @@ export class SyncFeature implements vscode.Disposable, LiveProvider {
     return true;
   }
 
+  /** Writes archify.sync.server: in the workspace when the workspace sets it, otherwise for the user. */
+  private async setServer(): Promise<void> {
+    const server = await this.promptServer();
+    if (!server) return;
+    const config = vscode.workspace.getConfiguration('archify.sync');
+    const inWorkspace = config.inspect<string>('server')?.workspaceValue !== undefined;
+    await config.update('server', server, inWorkspace ? vscode.ConfigurationTarget.Workspace : vscode.ConfigurationTarget.Global);
+    vscode.window.showInformationMessage(`Archify Sync: server set to ${new URL(server).host}${inWorkspace ? ' for this workspace' : ''}.`);
+  }
+
   private async signInCommand(): Promise<void> {
     const server = await this.askServer();
     if (!server || !(await this.checkServer(server))) return;
@@ -531,7 +559,10 @@ export class SyncFeature implements vscode.Disposable, LiveProvider {
   private async menu(): Promise<void> {
     const spaces = [...this.spaces.values()];
     const signedOut = spaces.find((s) => s.state === 'signed-out');
-    const items: (vscode.QuickPickItem & { run: () => Promise<void> })[] = [];
+    const servers = await this.auth.servers();
+    const configured = configuredServer();
+    type Item = vscode.QuickPickItem & { run?: () => Promise<void> };
+    const items: Item[] = [];
     if (signedOut) {
       items.push({
         label: `$(account) Sign in to ${new URL(signedOut.link.server).host}`,
@@ -539,16 +570,35 @@ export class SyncFeature implements vscode.Disposable, LiveProvider {
           if (await this.checkServer(signedOut.link.server)) await this.auth.signIn(signedOut.link.server);
         },
       });
+    } else if (!servers.length) {
+      items.push({
+        label: '$(account) Sign in…',
+        description: configured ? new URL(configured).host : 'asks for the server address',
+        run: () => this.signInCommand(),
+      });
     }
     items.push(
-      { label: '$(person-add) Copy invite link…', run: () => this.invite(undefined) },
-      { label: '$(tag) Publish version…', run: () => this.publish(undefined) },
-      { label: '$(history) Versions…', run: () => this.run('archify.sync.versions') },
-      { label: '$(output) Show log', run: async () => this.log.show() },
-      { label: '$(debug-disconnect) Stop syncing a model…', run: () => this.stop(undefined) },
+      { label: '$(live-share) Share a model…', run: () => this.share(undefined) },
+      { label: '$(link) Join a shared model…', description: 'with an invite link', run: () => this.join(undefined) },
     );
+    if (spaces.length) {
+      items.push(
+        { label: 'Shared models', kind: vscode.QuickPickItemKind.Separator },
+        { label: '$(person-add) Copy invite link…', run: () => this.invite(undefined) },
+        { label: '$(tag) Publish version…', run: () => this.publish(undefined) },
+        { label: '$(history) Versions…', run: () => this.run('archify.sync.versions') },
+        { label: '$(debug-disconnect) Stop syncing a model…', run: () => this.stop(undefined) },
+      );
+    }
+    items.push(
+      { label: 'Settings', kind: vscode.QuickPickItemKind.Separator },
+      { label: '$(server) Server address…', description: configured ? new URL(configured).host : 'not set', run: () => this.setServer() },
+      { label: '$(settings-gear) Open Sync settings', run: async () => void vscode.commands.executeCommand('workbench.action.openSettings', 'archify.sync') },
+      { label: '$(output) Show log', run: async () => this.log.show() },
+    );
+    if (servers.length) items.push({ label: '$(sign-out) Sign out…', description: servers.map((s) => new URL(s).host).join(', '), run: () => this.signOut() });
     const pick = await vscode.window.showQuickPick(items, { title: 'Archify Sync' });
-    await pick?.run();
+    await pick?.run?.();
   }
 
   dispose(): void {
@@ -560,6 +610,12 @@ export class SyncFeature implements vscode.Disposable, LiveProvider {
   }
 }
 
+/** archify.sync.server when it holds a usable address. */
+function configuredServer(): string | undefined {
+  const value = vscode.workspace.getConfiguration('archify.sync').get<string>('server', '').trim();
+  return value ? checkServerUrl(value).url : undefined;
+}
+
 /** The file behind the active tab when it is a custom editor (the Archify pages). */
 function activeTabUri(): vscode.Uri | undefined {
   const input = vscode.window.tabGroups.activeTabGroup.activeTab?.input;

src/sync/loader.ts

@@ -16,6 +16,7 @@ const COMMANDS = [
   'archify.sync.versions',
   'archify.sync.stop',
   'archify.sync.menu',
+  'archify.sync.setServer',
 ] as const;
 
 /**

src/webview/messages.ts

@@ -17,6 +17,8 @@ export type WebviewMessage =
   | { type: 'showModel' }
   | { type: 'liveReady' }
   | { type: 'liveAction'; action: LiveAction }
+  | { type: 'syncMenu' }
+  | { type: 'syncReady' }
   | { type: 'error'; message: string };
 
 /** Column for opening files next to a webview without covering it. */
@@ -66,6 +68,28 @@ async function openSource(
   vscode.window.showWarningMessage(`Archify: source file "${message.path}" was not found in the workspace.`);
 }
 
+/**
+ * Whether the file's model is shared: an .archify-sync file next to its
+ * main.archify. Read from disk, so the sync bundle stays unloaded.
+ */
+async function isShared(file: vscode.Uri): Promise<boolean> {
+  const folder = vscode.workspace.getWorkspaceFolder(file);
+  let dir = vscode.Uri.joinPath(file, '..');
+  for (let depth = 0; depth < 16; depth++) {
+    if (await exists(vscode.Uri.joinPath(dir, '.archify-sync'))) return true;
+    if (await exists(vscode.Uri.joinPath(dir, 'main.archify'))) return false;
+    const parent = vscode.Uri.joinPath(dir, '..');
+    if (!folder || dir.path === folder.uri.path || parent.path === dir.path) return false;
+    dir = parent;
+  }
+  return false;
+}
+
+async function postSyncState(file: vscode.Uri, panel: vscode.WebviewPanel): Promise<void> {
+  const shared = file.scheme === 'file' && (await isShared(file));
+  await Promise.resolve(panel.webview.postMessage({ type: 'syncState', shared })).catch(() => undefined);
+}
+
 export async function handleWebviewMessage(
   message: WebviewMessage,
   context: vscode.Uri,
@@ -99,6 +123,14 @@ export async function handleWebviewMessage(
       case 'error':
         vscode.window.showErrorMessage(`Archify: ${message.message}`);
         break;
+      case 'syncReady':
+        await postSyncState(context, panel);
+        break;
+      case 'syncMenu':
+        await vscode.commands.executeCommand('archify.sync.menu');
+        // Share or Stop may have changed it.
+        await postSyncState(context, panel);
+        break;
       case 'hash':
       case 'openDiagram':
       case 'showGraph':

src/webview/page.ts

@@ -887,6 +887,50 @@ function bridgeScript(options: PageOptions): string {
   onReady(renderDecisionsRail);
   onReady(describeElements);
   onReady(renderModeSwitch);
+
+  // Archify Sync: one labelled button, top right, on every page of an Archify
+  // file (diagram, model, graph, registry, decision). It opens the Sync menu.
+  function renderSyncButton() {
+    if (!(config.source || config.model || config.registry || config.decision || config.graph)) return;
+    if (document.getElementById('archify-sync-button')) return;
+    var style = document.createElement('style');
+    style.textContent = SYNC_BUTTON_STYLE;
+    document.head.appendChild(style);
+    var button = document.createElement('button');
+    button.id = 'archify-sync-button';
+    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' }); });
+    document.body.appendChild(button);
+    showSyncState(false);
+    post({ type: 'syncReady' });
+  }
+  // Not shared: a cloud, "Sync". Shared (the model has an .archify-sync file): broadcast waves, "Shared".
+  var SYNC_ICONS = {
+    off: '<svg viewBox="0 0 16 16" width="15" height="15" aria-hidden="true"><path fill="currentColor" d="M12.5 13H4.25a3.25 3.25 0 0 1-.6-6.44 4.5 4.5 0 0 1 8.7-.81A3.6 3.6 0 0 1 12.5 13Zm-8.25-1h8.25a2.6 2.6 0 0 0 0-5.2h-.5l-.12-.39a3.5 3.5 0 0 0-6.82.66l-.04.4-.4.05A2.25 2.25 0 0 0 4.25 12Z"/></svg>',
+    on: '<svg viewBox="0 0 16 16" width="15" height="15" aria-hidden="true"><circle cx="8" cy="8" r="1.75" fill="currentColor"/><path fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" d="M5.2 5.2a4 4 0 0 0 0 5.6M10.8 5.2a4 4 0 0 1 0 5.6M3.1 3.1a7 7 0 0 0 0 9.8M12.9 3.1a7 7 0 0 1 0 9.8"/></svg>',
+  };
+  function showSyncState(shared) {
+    var button = document.getElementById('archify-sync-button');
+    if (!button) return;
+    button.classList.toggle('is-shared', !!shared);
+    button.innerHTML = (shared ? SYNC_ICONS.on : SYNC_ICONS.off) + '<span>' + (shared ? 'Shared' : 'Sync') + '</span>';
+    button.title = shared
+      ? 'This model is shared with Archify Sync: invite people, publish a version, see versions'
+      : 'Archify Sync: sign in, share this model with others, or join one';
+  }
+  window.addEventListener('message', function (event) {
+    var message = event.data || {};
+    if (message.type === 'syncState') showSyncState(message.shared);
+  });
+  var SYNC_BUTTON_STYLE = '#archify-sync-button { position: fixed; top: 12px; right: 18px; z-index: 1001; display: inline-flex; align-items: center; gap: 6px;'
+    + ' padding: 6px 12px; border-radius: 8px; cursor: pointer; font: 600 13px/1 var(--vscode-font-family, system-ui, sans-serif);'
+    + ' color: var(--vscode-button-foreground, #fff); background: var(--vscode-button-background, #0e639c); border: 1px solid var(--vscode-button-border, transparent); }'
+    + ' #archify-sync-button:hover { background: var(--vscode-button-hoverBackground, #1177bb); }'
+    + ' #archify-sync-button.is-shared { color: #fff; background: #1f8f5f; }'
+    + ' #archify-sync-button.is-shared:hover { background: #23a36c; }'
+    + ' #archify-sync-button:focus-visible { outline: 2px solid var(--vscode-focusBorder, #007fd4); outline-offset: 2px; }';
+  onReady(renderSyncButton);
   if (config.source) {
     // The host answers with the problem count for the Source badge.
     post({ type: 'sourceReady' });

src/webview/source/index.ts

@@ -20,9 +20,10 @@ type HostMessage =
 
 const STYLE = `
 html.archify-source-on .container > :not(.header):not(#archify-source),
-html.archify-source-on body > :not(.toolbar):not(.container):not(.archify-model-head):not(.archify-model-switch-row):not(#archify-source):not(script):not(style):not(.archify-modal-backdrop),
+html.archify-source-on body > :not(.toolbar):not(.container):not(.archify-model-head):not(.archify-model-switch-row):not(#archify-source):not(#archify-sync-button):not(script):not(style):not(.archify-modal-backdrop),
 html.archify-source-on #btn-3d,
 html.archify-source-on .archify-vscode-notice { display: none !important; }
+html:not(.archify-source-on) #archify-source { display: none !important; }
 .archify-source { display: flex; flex-direction: column; box-sizing: border-box; min-height: 260px; margin: 0.75rem 0 1rem; }
 body > .archify-source { max-width: 1400px; margin: 0.75rem auto 1rem; padding: 0 2rem; }
 .archify-source-editor { flex: 1; min-height: 0; overflow: hidden; border: 1px solid var(--panel-border, var(--vscode-editorWidget-border, rgba(128,128,128,.35))); border-radius: 0.75rem;

test/integration/suite.ts

@@ -489,7 +489,10 @@ export async function run(): Promise<void> {
 
   await check('without a shared model, sync stays unloaded and its commands are there', async () => {
     const commands = await vscode.commands.getCommands(true);
-    for (const id of ['archify.sync.signIn', 'archify.sync.share', 'archify.sync.join']) assert.ok(commands.includes(id), `${id} is registered`);
+    for (const id of ['archify.sync.signIn', 'archify.sync.share', 'archify.sync.join', 'archify.sync.menu', 'archify.sync.setServer']) assert.ok(commands.includes(id), `${id} is registered`);
+    // No server of anyone's built in: empty until the user sets one.
+    const config = vscode.workspace.getConfiguration('archify.sync');
+    assert.equal(config.get('server'), '');
     // The extension host's module cache: dist/sync.js (Yjs, the WebSocket) is not loaded.
     const loaded = Object.keys(require.cache).filter((file) => file.endsWith(`${path.sep}dist${path.sep}sync.js`));
     assert.deepEqual(loaded, [], 'the sync bundle is not loaded');