0.9.2: Source view, schema checks without the YAML extension

Every Archify page can show its file's YAML in place. Diagrams get
Diagram | Graph | Source (Graph only inside a model), main.archify
Model | Graph | Source, registry and decision pages View | Source, and the
Graph page a Source segment. 2D | 3D moves left of that switch and hides
while Source shows.

The YAML opens in a CodeMirror editor inside the page (dist/source.js,
loaded on first use), themed with the page's colours. Edits go to the VS
Code document as WorkspaceEdits; outside changes come back to the page.
Undo and redo are the editor's own, since VS Code sends ⌘Z in a focused
webview to the webview; save and find stay VS Code's. Problems come from
the host only (what the Problems panel holds for the file) and are
counted on the Source segment; completion and hover come from the schema,
folded into one draft-07 document per diagram type.

The host now checks .archify files against the extension's schema with
ajv on the YAML as written, before archify validate, and checks
.archify-registry files against the registry schema for the first time.
Registry and decision pages become text editor providers. While Source
shows, new renders wait and appear when the picture comes back.

Show Source switches the page to Source; Open in Text Editor (the editor
title button) opens the text beside it, as Show Source did. The decision
schema is no longer given to the YAML extension. Fixed: YAML errors in
registry and decision files were reported on line 1; "Webview is
disposed" when a diagram closed mid-render; the model heading under the
toolbar in narrow editors.

src/views/diagramView.ts

@@ -13,7 +13,8 @@ import { log } from '../util/log';
 import { viewerTheme } from '../util/settings';
 import { handleWebviewMessage, WebviewMessage } from '../webview/messages';
 import { graphPage, makeNonce, messagePage, modelPage, prepareDiagramHtml } from '../webview/page';
-import { graphScriptUri, viewer3dOption, viewerRoots } from '../webview/viewer3d';
+import { graphScriptUri, sourceScriptUri, viewer3dOption, viewerRoots } from '../webview/viewer3d';
+import { SourceSession } from './sourceSession';
 
 import { DECISION_VIEW_TYPE, DIAGRAM_EDITOR_VIEW_TYPE, PREVIEW_VIEW_TYPE, REGISTRY_VIEW_TYPE } from './viewTypes';
 
@@ -50,6 +51,10 @@ class DiagramPreview implements vscode.Disposable {
   private graphQuery: string | undefined;
   /** True while the webview shows the Graph page, which takes model updates as messages. */
   private graphShown = false;
+  /** The Source view of a .archify file; while it shows, new HTML waits in `heldHtml`. */
+  readonly source: SourceSession | undefined;
+  private heldHtml: string | undefined;
+  private disposed = false;
 
   constructor(
     private readonly context: vscode.ExtensionContext,
@@ -69,9 +74,22 @@ class DiagramPreview implements vscode.Disposable {
       panel.title = `Preview ${path.basename(uri.path)}`;
     }
 
+    if (isArchifyFile(uri.path)) {
+      this.source = new SourceSession(context, panel, uri, 'diagram', (shown) => {
+        // Back from Source: show what was rendered meanwhile.
+        if (!shown && this.heldHtml !== undefined) {
+          const html = this.heldHtml;
+          this.heldHtml = undefined;
+          this.panel.webview.html = html;
+        }
+      });
+      this.disposables.push(this.source);
+    }
+
     this.disposables.push(
       panel.onDidDispose(() => this.dispose()),
       panel.webview.onDidReceiveMessage((message: WebviewMessage) => {
+        if (this.source?.handle(message)) return;
         if (message.type === 'hash') {
           this.hash = message.hash;
           return;
@@ -121,6 +139,22 @@ class DiagramPreview implements vscode.Disposable {
     Promise.resolve(this.panel.webview.postMessage(message)).catch(() => undefined);
   }
 
+  /** Replaces the page, unless Source is open in it: then the page waits until it closes. */
+  private setHtml(html: string): void {
+    if (this.disposed) return;
+    if (this.source?.shown) {
+      this.heldHtml = html;
+      return;
+    }
+    this.heldHtml = undefined;
+    this.panel.webview.html = html;
+  }
+
+  /** Page option for the Source view, on .archify files. */
+  private sourceOption(left: 'Model' | 'Diagram'): { scriptUri: string; left: 'Model' | 'Diagram' } | undefined {
+    return this.source ? { scriptUri: sourceScriptUri(this.panel.webview, this.context.extensionUri), left } : undefined;
+  }
+
   private state(): PreviewState {
     return { uri: this.uri.toString(), hash: this.hash, graph: this.graph };
   }
@@ -156,21 +190,21 @@ class DiagramPreview implements vscode.Disposable {
       return;
     }
     this.graphShown = true;
-    this.panel.webview.html = graphPage(
+    this.setHtml(graphPage(
       { cspSource: this.panel.webview.cspSource, nonce: makeNonce(), state: this.state() },
       { graph, query: this.graphQuery, scriptUri: graphScriptUri(this.panel.webview, this.context.extensionUri) },
-    );
+    ));
     this.graphQuery = undefined;
   }
 
   private showMessage(title: string, body: string, detail?: string): void {
     this.lastHtml = undefined;
-    this.panel.webview.html = messagePage(
-      { cspSource: this.panel.webview.cspSource, nonce: makeNonce(), state: this.state() },
+    this.setHtml(messagePage(
+      { cspSource: this.panel.webview.cspSource, nonce: makeNonce(), state: this.state(), source: this.sourceOption('Diagram') },
       title,
       body,
       detail,
-    );
+    ));
   }
 
   /** Opens a diagram of the model, given its path relative to the model root. */
@@ -192,7 +226,7 @@ class DiagramPreview implements vscode.Disposable {
     this.lastHtml = fingerprint;
     this.rendered = false;
     this.graphShown = false;
-    this.panel.webview.html = modelPage({ cspSource: this.panel.webview.cspSource, nonce: makeNonce(), state: this.state() }, model);
+    this.setHtml(modelPage({ cspSource: this.panel.webview.cspSource, nonce: makeNonce(), state: this.state(), source: this.sourceOption('Model') }, model));
   }
 
   scheduleUpdate(): void {
@@ -203,6 +237,7 @@ class DiagramPreview implements vscode.Disposable {
 
   async update(force = false): Promise<void> {
     clearTimeout(this.timer);
+    if (this.disposed) return;
     const seq = ++this.seq;
     let text: string;
     try {
@@ -285,6 +320,7 @@ class DiagramPreview implements vscode.Disposable {
       decisions: prepared.decisions,
       model,
       graphSwitch: main ? { left: 'Model' } : prepared.root ? { left: 'Diagram', query: `diagram:${path.relative(prepared.root.fsPath, this.uri.fsPath).split(path.sep).join('/')}` } : undefined,
+      source: this.sourceOption(main ? 'Model' : 'Diagram'),
     });
     // Nonces differ per render, so compare the renderer output instead.
     const fingerprint = `${viewerTheme()}\u0000${result.evidenceNotice ?? ''}\u0000${JSON.stringify([model ?? null, [...prepared.links], [...prepared.descriptions], prepared.decisions])}\u0000${result.html}`;
@@ -294,10 +330,14 @@ class DiagramPreview implements vscode.Disposable {
     }
     this.lastHtml = fingerprint;
     this.rendered = true;
-    this.panel.webview.html = html;
+    this.setHtml(html);
   }
 
   dispose(): void {
+    if (this.disposed) return;
+    this.disposed = true;
+    // Renders in flight check the sequence after every await; this ends them.
+    this.seq++;
     clearTimeout(this.timer);
     this.onDisposeEmitter.fire();
     this.onDisposeEmitter.dispose();