From a1b438cea6aec91726c526e263ea5d32079356b5 Mon Sep 17 00:00:00 2001
From: Asem Dreibati <asemdreibati97@gmail.com>
Date: Tue, 29 Oct 2024 10:31:57 +0300
Subject: [PATCH 01/13] Store the DI decorator's id in specific property
 (#5131).

---
 src/common/services/InstantiationService.ts | 2 +-
 src/common/services/ServiceRegistry.ts      | 2 +-
 src/common/services/Services.ts             | 1 +
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/common/services/InstantiationService.ts b/src/common/services/InstantiationService.ts
index 375e442d..7e769548 100644
--- a/src/common/services/InstantiationService.ts
+++ b/src/common/services/InstantiationService.ts
@@ -67,7 +67,7 @@ export class InstantiationService implements IInstantiationService {
     for (const dependency of serviceDependencies) {
       const service = this._services.get(dependency.id);
       if (!service) {
-        throw new Error(`[createInstance] ${ctor.name} depends on UNKNOWN service ${dependency.id}.`);
+        throw new Error(`[createInstance] ${ctor.name} depends on UNKNOWN service ${dependency.id._id}.`);
       }
       serviceArgs.push(service);
     }
diff --git a/src/common/services/ServiceRegistry.ts b/src/common/services/ServiceRegistry.ts
index 6510fb8e..7d887bc6 100644
--- a/src/common/services/ServiceRegistry.ts
+++ b/src/common/services/ServiceRegistry.ts
@@ -33,7 +33,7 @@ export function createDecorator<T>(id: string): IServiceIdentifier<T> {
     storeServiceDependency(decorator, target, index);
   };
 
-  decorator.toString = () => id;
+  decorator._id = id;
 
   serviceRegistry.set(id, decorator);
   return decorator;
diff --git a/src/common/services/Services.ts b/src/common/services/Services.ts
index 0ceff36c..9d5ca64b 100644
--- a/src/common/services/Services.ts
+++ b/src/common/services/Services.ts
@@ -124,6 +124,7 @@ export interface ICharsetService {
 export interface IServiceIdentifier<T> {
   (...args: any[]): void;
   type: T;
+  _id: string;
 }
 
 export interface IBrandedService {

From 9f9bb3c11c0d6d88c4d9d16ce70e9e1f3be73038 Mon Sep 17 00:00:00 2001
From: An Phi <blacksteed232@outlook.com>
Date: Wed, 18 Dec 2024 01:26:47 -0500
Subject: [PATCH 02/13] bug: properly render the terminal when open() is called
 again

---
 src/browser/CoreBrowserTerminal.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/browser/CoreBrowserTerminal.ts b/src/browser/CoreBrowserTerminal.ts
index 2e15b5f3..33ee94bc 100644
--- a/src/browser/CoreBrowserTerminal.ts
+++ b/src/browser/CoreBrowserTerminal.ts
@@ -400,7 +400,7 @@ export class CoreBrowserTerminal extends CoreTerminal implements ITerminal {
     }
 
     // If the terminal is already opened
-    if (this.element?.ownerDocument.defaultView && this._coreBrowserService) {
+    if (this.element?.ownerDocument.defaultView && this._coreBrowserService && this.element?.isConnected) {
       // Adjust the window if needed
       if (this.element.ownerDocument.defaultView !== this._coreBrowserService.window) {
         this._coreBrowserService.window = this.element.ownerDocument.defaultView;

From ef67b42fbd80a584f3897c5614cda8bf13ffadc9 Mon Sep 17 00:00:00 2001
From: Daniel Imms <2193314+Tyriar@users.noreply.github.com>
Date: Mon, 6 Jan 2025 09:59:00 -0800
Subject: [PATCH 03/13] Demo test button for common ligatures

Part of #5231
---
 demo/client.ts  | 13 +++++++++++++
 demo/index.html |  3 +++
 2 files changed, 16 insertions(+)

diff --git a/demo/client.ts b/demo/client.ts
index f7503210..7a1ac72b 100644
--- a/demo/client.ts
+++ b/demo/client.ts
@@ -240,6 +240,7 @@ if (document.location.pathname === '/test') {
   document.getElementById('add-decoration').addEventListener('click', addDecoration);
   document.getElementById('add-overview-ruler').addEventListener('click', addOverviewRuler);
   document.getElementById('decoration-stress-test').addEventListener('click', decorationStressTest);
+  document.getElementById('ligatures-test').addEventListener('click', ligaturesTest);
   document.getElementById('weblinks-test').addEventListener('click', testWeblinks);
   document.getElementById('bce').addEventListener('click', coloredErase);
   addVtButtons();
@@ -1307,6 +1308,18 @@ function addVtButtons(): void {
   document.querySelector('#vt-container').appendChild(vtFragment);
 }
 
+function ligaturesTest(): void {
+  term.write([
+    '',
+    '-<< -< -<- <-- <--- <<- <- -> ->> --> ---> ->- >- >>-',
+    '=<< =< =<= <== <=== <<= <= => =>> ==> ===> =>= >= >>=',
+    '<-> <--> <---> <----> <=> <==> <===> <====> :: ::: __',
+    '<~~ </ </> /> ~~> == != /= ~= <> === !== !=== =/= =!=',
+    '<: := *= *+ <* <*> *> <| <|> |> <. <.> .> +* =* =: :>',
+    '(* *) /* */ [| |] {| |} ++ +++ \/ /\ |- -| <!-- <!---'
+  ].join('\r\n'));
+}
+
 function testWeblinks(): void {
   const linkExamples = `
 aaa http://example.com aaa http://example.com aaa
diff --git a/demo/index.html b/demo/index.html
index 3d46f61c..96361a88 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -106,6 +106,9 @@
               <dd><button id="add-overview-ruler" title="Add an overview ruler to the terminal">Add Overview Ruler</button></dd>
               <dd><button id="decoration-stress-test" title="Toggle between adding and removing a decoration to each line">Stress Test</button></dd>
 
+              <dt>Ligatures Addon</dt>
+              <dd><button id="ligatures-test" title="Write common ligatures sequences">Common ligatures</button></dd>
+
               <dt>Weblinks Addon</dt>
               <dd><button id="weblinks-test" title="Various url conditions from demo data, hover&click to test">Test URLs</button></dd>
 

From cd5438c2c53a9d20b429082405b8932f87f610f0 Mon Sep 17 00:00:00 2001
From: Daniel Imms <2193314+Tyriar@users.noreply.github.com>
Date: Mon, 6 Jan 2025 10:01:09 -0800
Subject: [PATCH 04/13] Add = and - long ligatures too

---
 demo/client.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/demo/client.ts b/demo/client.ts
index 7a1ac72b..02cef73b 100644
--- a/demo/client.ts
+++ b/demo/client.ts
@@ -1316,7 +1316,9 @@ function ligaturesTest(): void {
     '<-> <--> <---> <----> <=> <==> <===> <====> :: ::: __',
     '<~~ </ </> /> ~~> == != /= ~= <> === !== !=== =/= =!=',
     '<: := *= *+ <* <*> *> <| <|> |> <. <.> .> +* =* =: :>',
-    '(* *) /* */ [| |] {| |} ++ +++ \/ /\ |- -| <!-- <!---'
+    '(* *) /* */ [| |] {| |} ++ +++ \/ /\ |- -| <!-- <!---',
+    '==== ===== ====== ======= ======== =========',
+    '---- ----- ------ ------- -------- ---------'
   ].join('\r\n'));
 }
 

From ad08a2e15b59619ffa24e0efbc60f739f025a181 Mon Sep 17 00:00:00 2001
From: Daniel Imms <2193314+Tyriar@users.noreply.github.com>
Date: Mon, 6 Jan 2025 10:15:16 -0800
Subject: [PATCH 05/13] Render selection under ligatures for webgl

Part of #5231
---
 addons/addon-webgl/src/WebglRenderer.ts | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/addons/addon-webgl/src/WebglRenderer.ts b/addons/addon-webgl/src/WebglRenderer.ts
index 6c270d12..d96f0817 100644
--- a/addons/addon-webgl/src/WebglRenderer.ts
+++ b/addons/addon-webgl/src/WebglRenderer.ts
@@ -507,8 +507,15 @@ export class WebglRenderer extends Disposable implements IRenderer {
             j = ((y * terminal.cols) + x) * RENDER_MODEL_INDICIES_PER_CELL;
             this._glyphRenderer.value!.updateCell(x, y, NULL_CELL_CODE, 0, 0, 0, NULL_CELL_CHAR, 0, 0);
             this._model.cells[j] = NULL_CELL_CODE;
-            // Don't re-resolve the cell color since multi-colored ligature backgrounds are not
-            // supported
+            // HACK: Generally we don't support multi-colored ligature backgrounds, however it's
+            // important here that we re-resolve the cell color since selections are regular
+            // background colors.
+            //
+            // This can result in bad aliasing since currently ligature glyphs drawn using a single
+            // texture. This is most noticable when the background colors across the ligature differ
+            // drastically. This could be improved in the future by sourcing from different glyphs
+            // for each cell when the foreground or background differ.
+            this._cellColorResolver.resolve(cell, x, row, this.dimensions.device.cell.width);
             this._model.cells[j + RENDER_MODEL_BG_OFFSET] = this._cellColorResolver.result.bg;
             this._model.cells[j + RENDER_MODEL_FG_OFFSET] = this._cellColorResolver.result.fg;
             this._model.cells[j + RENDER_MODEL_EXT_OFFSET] = this._cellColorResolver.result.ext;

From 0521378e70eda5f775464613695632d1703bd3e4 Mon Sep 17 00:00:00 2001
From: Daniel Imms <2193314+Tyriar@users.noreply.github.com>
Date: Mon, 6 Jan 2025 10:50:13 -0800
Subject: [PATCH 06/13] Fix ligature selection in DOM renderer

Part of #5231
---
 .../renderer/dom/DomRendererRowFactory.ts     | 42 ++++++++++++-------
 1 file changed, 28 insertions(+), 14 deletions(-)

diff --git a/src/browser/renderer/dom/DomRendererRowFactory.ts b/src/browser/renderer/dom/DomRendererRowFactory.ts
index d71edeb9..194565f1 100644
--- a/src/browser/renderer/dom/DomRendererRowFactory.ts
+++ b/src/browser/renderer/dom/DomRendererRowFactory.ts
@@ -91,6 +91,7 @@ export class DomRendererRowFactory {
     let oldSpacing = 0;
     let oldIsInSelection: boolean = false;
     let spacing = 0;
+    let skipJoinedCheckUntilX = 0;
     const classes: string[] = [];
 
     const hasHover = linkStart !== -1 && linkEnd !== -1;
@@ -106,29 +107,41 @@ export class DomRendererRowFactory {
 
       // If true, indicates that the current character(s) to draw were joined.
       let isJoined = false;
+
+      // Indicates whether this cell is part of a joined range that should be ignored as it cannot
+      // be rendered entirely, like the selection state differs across the range.
+      let isValidJoinRange = (x >= skipJoinedCheckUntilX);
+
       let lastCharX = x;
 
       // Process any joined character ranges as needed. Because of how the
       // ranges are produced, we know that they are valid for the characters
       // and attributes of our input.
       let cell = this._workCell;
-      if (joinedRanges.length > 0 && x === joinedRanges[0][0]) {
-        isJoined = true;
+      if (joinedRanges.length > 0 && x === joinedRanges[0][0] && isValidJoinRange) {
         const range = joinedRanges.shift()!;
+        // If the ligature's selection state is not consistent, don't join it. This helps the
+        // selection render correctly regardless whether they should be joined.
+        if (this._isCellInSelection(range[0], row) !== this._isCellInSelection(range[1], row)) {
+          isValidJoinRange = false;
+          skipJoinedCheckUntilX = range[1];
+        } else {
+          isJoined = true;
 
-        // We already know the exact start and end column of the joined range,
-        // so we get the string and width representing it directly
-        cell = new JoinedCellData(
-          this._workCell,
-          lineData.translateToString(true, range[0], range[1]),
-          range[1] - range[0]
-        );
+          // We already know the exact start and end column of the joined range,
+          // so we get the string and width representing it directly
+          cell = new JoinedCellData(
+            this._workCell,
+            lineData.translateToString(true, range[0], range[1]),
+            range[1] - range[0]
+          );
 
-        // Skip over the cells occupied by this range in the loop
-        lastCharX = range[1] - 1;
+          // Skip over the cells occupied by this range in the loop
+          lastCharX = range[1] - 1;
 
-        // Recalculate width
-        width = cell.getWidth();
+          // Recalculate width
+          width = cell.getWidth();
+        }
       }
 
       const isInSelection = this._isCellInSelection(x, row);
@@ -178,6 +191,7 @@ export class DomRendererRowFactory {
           && !isCursorCell
           && !isJoined
           && !isDecorated
+          && isValidJoinRange
         ) {
           // no span alterations, thus only account chars skipping all code below
           if (cell.isInvisible()) {
@@ -435,7 +449,7 @@ export class DomRendererRowFactory {
       }
 
       // exclude conditions for cell merging - never merge these
-      if (!isCursorCell && !isJoined && !isDecorated) {
+      if (!isCursorCell && !isJoined && !isDecorated && isValidJoinRange) {
         cellAmount++;
       } else {
         charElement.textContent = text;

From 5bfb130f03bc91d48d20355f754b76289b22c53f Mon Sep 17 00:00:00 2001
From: Daniel Imms <2193314+Tyriar@users.noreply.github.com>
Date: Mon, 6 Jan 2025 10:52:04 -0800
Subject: [PATCH 07/13] Apply same approach for rendering joined selection in
 webgl

---
 addons/addon-webgl/src/WebglRenderer.ts | 36 ++++++++++++-------------
 1 file changed, 17 insertions(+), 19 deletions(-)

diff --git a/addons/addon-webgl/src/WebglRenderer.ts b/addons/addon-webgl/src/WebglRenderer.ts
index d96f0817..bd703832 100644
--- a/addons/addon-webgl/src/WebglRenderer.ts
+++ b/addons/addon-webgl/src/WebglRenderer.ts
@@ -422,19 +422,24 @@ export class WebglRenderer extends Disposable implements IRenderer {
         // ranges are produced, we know that they are valid for the characters
         // and attributes of our input.
         if (joinedRanges.length > 0 && x === joinedRanges[0][0]) {
-          isJoined = true;
           range = joinedRanges.shift()!;
 
-          // We already know the exact start and end column of the joined range,
-          // so we get the string and width representing it directly.
-          cell = new JoinedCellData(
-            cell,
-            line!.translateToString(true, range[0], range[1]),
-            range[1] - range[0]
-          );
+          // If the ligature's selection state is not consistent, don't join it. This helps the
+          // selection render correctly regardless whether they should be joined.
+          if (this._model.selection.isCellSelected(this._terminal, range[0], row) === this._model.selection.isCellSelected(this._terminal, range[1], row)) {
+            isJoined = true;
 
-          // Skip over the cells occupied by this range in the loop
-          lastCharX = range[1] - 1;
+            // We already know the exact start and end column of the joined range,
+            // so we get the string and width representing it directly.
+            cell = new JoinedCellData(
+              cell,
+              line!.translateToString(true, range[0], range[1]),
+              range[1] - range[0]
+            );
+
+            // Skip over the cells occupied by this range in the loop
+            lastCharX = range[1] - 1;
+          }
         }
 
         chars = cell.getChars();
@@ -507,15 +512,8 @@ export class WebglRenderer extends Disposable implements IRenderer {
             j = ((y * terminal.cols) + x) * RENDER_MODEL_INDICIES_PER_CELL;
             this._glyphRenderer.value!.updateCell(x, y, NULL_CELL_CODE, 0, 0, 0, NULL_CELL_CHAR, 0, 0);
             this._model.cells[j] = NULL_CELL_CODE;
-            // HACK: Generally we don't support multi-colored ligature backgrounds, however it's
-            // important here that we re-resolve the cell color since selections are regular
-            // background colors.
-            //
-            // This can result in bad aliasing since currently ligature glyphs drawn using a single
-            // texture. This is most noticable when the background colors across the ligature differ
-            // drastically. This could be improved in the future by sourcing from different glyphs
-            // for each cell when the foreground or background differ.
-            this._cellColorResolver.resolve(cell, x, row, this.dimensions.device.cell.width);
+            // Don't re-resolve the cell color since multi-colored ligature backgrounds are not
+            // supported
             this._model.cells[j + RENDER_MODEL_BG_OFFSET] = this._cellColorResolver.result.bg;
             this._model.cells[j + RENDER_MODEL_FG_OFFSET] = this._cellColorResolver.result.fg;
             this._model.cells[j + RENDER_MODEL_EXT_OFFSET] = this._cellColorResolver.result.ext;

From c7a1e0aea343d443a89395e1d981ccce8f56be27 Mon Sep 17 00:00:00 2001
From: Daniel Imms <2193314+Tyriar@users.noreply.github.com>
Date: Mon, 6 Jan 2025 11:03:10 -0800
Subject: [PATCH 08/13] Handle selections in the middle of ligatures too

---
 addons/addon-webgl/src/WebglRenderer.ts        | 18 ++++++++++++++++--
 .../renderer/dom/DomRendererRowFactory.ts      |  8 ++++++--
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/addons/addon-webgl/src/WebglRenderer.ts b/addons/addon-webgl/src/WebglRenderer.ts
index bd703832..aa9587aa 100644
--- a/addons/addon-webgl/src/WebglRenderer.ts
+++ b/addons/addon-webgl/src/WebglRenderer.ts
@@ -377,6 +377,8 @@ export class WebglRenderer extends Disposable implements IRenderer {
     let line: IBufferLine;
     let joinedRanges: [number, number][];
     let isJoined: boolean;
+    let skipJoinedCheckUntilX: number = 0;
+    let isValidJoinRange: boolean = true;
     let lastCharX: number;
     let range: [number, number];
     let chars: string;
@@ -405,6 +407,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
       row = y + terminal.buffer.ydisp;
       line = terminal.buffer.lines.get(row)!;
       this._model.lineLengths[y] = 0;
+      skipJoinedCheckUntilX = 0;
       joinedRanges = this._characterJoinerService.getJoinedCharacters(row);
       for (x = 0; x < terminal.cols; x++) {
         lastBg = this._cellColorResolver.result.bg;
@@ -416,17 +419,28 @@ export class WebglRenderer extends Disposable implements IRenderer {
 
         // If true, indicates that the current character(s) to draw were joined.
         isJoined = false;
+
+        // Indicates whether this cell is part of a joined range that should be ignored as it cannot
+        // be rendered entirely, like the selection state differs across the range.
+        isValidJoinRange = (x >= skipJoinedCheckUntilX);
+
         lastCharX = x;
 
         // Process any joined character ranges as needed. Because of how the
         // ranges are produced, we know that they are valid for the characters
         // and attributes of our input.
-        if (joinedRanges.length > 0 && x === joinedRanges[0][0]) {
+        if (joinedRanges.length > 0 && x === joinedRanges[0][0] && isValidJoinRange) {
           range = joinedRanges.shift()!;
 
           // If the ligature's selection state is not consistent, don't join it. This helps the
           // selection render correctly regardless whether they should be joined.
-          if (this._model.selection.isCellSelected(this._terminal, range[0], row) === this._model.selection.isCellSelected(this._terminal, range[1], row)) {
+          const firstSelectionState = this._model.selection.isCellSelected(this._terminal, range[0], row);
+          for (i = range[0] + 1; i < range[1]; i++) {
+            isValidJoinRange &&= (firstSelectionState === this._model.selection.isCellSelected(this._terminal, i, row));
+          }
+          if (!isValidJoinRange) {
+            skipJoinedCheckUntilX = range[1];
+          } else {
             isJoined = true;
 
             // We already know the exact start and end column of the joined range,
diff --git a/src/browser/renderer/dom/DomRendererRowFactory.ts b/src/browser/renderer/dom/DomRendererRowFactory.ts
index 194565f1..d5750112 100644
--- a/src/browser/renderer/dom/DomRendererRowFactory.ts
+++ b/src/browser/renderer/dom/DomRendererRowFactory.ts
@@ -84,6 +84,7 @@ export class DomRendererRowFactory {
     let charElement: HTMLSpanElement | undefined;
     let cellAmount = 0;
     let text = '';
+    let i = 0;
     let oldBg = 0;
     let oldFg = 0;
     let oldExt = 0;
@@ -122,8 +123,11 @@ export class DomRendererRowFactory {
         const range = joinedRanges.shift()!;
         // If the ligature's selection state is not consistent, don't join it. This helps the
         // selection render correctly regardless whether they should be joined.
-        if (this._isCellInSelection(range[0], row) !== this._isCellInSelection(range[1], row)) {
-          isValidJoinRange = false;
+        const firstSelectionState = this._isCellInSelection(range[0], row);
+        for (i = range[0] + 1; i < range[1]; i++) {
+          isValidJoinRange &&= (firstSelectionState === this._isCellInSelection(i, row));
+        }
+        if (!isValidJoinRange) {
           skipJoinedCheckUntilX = range[1];
         } else {
           isJoined = true;

From 9912e7b33151e4ee3c9270a73e54128fd1d18260 Mon Sep 17 00:00:00 2001
From: Daniel Imms <2193314+Tyriar@users.noreply.github.com>
Date: Mon, 6 Jan 2025 11:08:57 -0800
Subject: [PATCH 09/13] Disable ligatures when cursor is in range

Fixes #5230
---
 addons/addon-webgl/src/WebglRenderer.ts           | 4 ++++
 src/browser/renderer/dom/DomRendererRowFactory.ts | 2 ++
 2 files changed, 6 insertions(+)

diff --git a/addons/addon-webgl/src/WebglRenderer.ts b/addons/addon-webgl/src/WebglRenderer.ts
index aa9587aa..3eb13761 100644
--- a/addons/addon-webgl/src/WebglRenderer.ts
+++ b/addons/addon-webgl/src/WebglRenderer.ts
@@ -381,6 +381,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
     let isValidJoinRange: boolean = true;
     let lastCharX: number;
     let range: [number, number];
+    let isCursorRow: boolean;
     let chars: string;
     let code: number;
     let width: number;
@@ -407,6 +408,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
       row = y + terminal.buffer.ydisp;
       line = terminal.buffer.lines.get(row)!;
       this._model.lineLengths[y] = 0;
+      isCursorRow = cursorY === row;
       skipJoinedCheckUntilX = 0;
       joinedRanges = this._characterJoinerService.getJoinedCharacters(row);
       for (x = 0; x < terminal.cols; x++) {
@@ -438,6 +440,8 @@ export class WebglRenderer extends Disposable implements IRenderer {
           for (i = range[0] + 1; i < range[1]; i++) {
             isValidJoinRange &&= (firstSelectionState === this._model.selection.isCellSelected(this._terminal, i, row));
           }
+          // Similarly, if the cursor is in the ligature, don't join it.
+          isValidJoinRange &&= !isCursorRow || cursorX < range[0] || cursorX >= range[1];
           if (!isValidJoinRange) {
             skipJoinedCheckUntilX = range[1];
           } else {
diff --git a/src/browser/renderer/dom/DomRendererRowFactory.ts b/src/browser/renderer/dom/DomRendererRowFactory.ts
index d5750112..96d3f171 100644
--- a/src/browser/renderer/dom/DomRendererRowFactory.ts
+++ b/src/browser/renderer/dom/DomRendererRowFactory.ts
@@ -127,6 +127,8 @@ export class DomRendererRowFactory {
         for (i = range[0] + 1; i < range[1]; i++) {
           isValidJoinRange &&= (firstSelectionState === this._isCellInSelection(i, row));
         }
+        // Similarly, if the cursor is in the ligature, don't join it.
+        isValidJoinRange &&= !isCursorRow || cursorX < range[0] || cursorX >= range[1];
         if (!isValidJoinRange) {
           skipJoinedCheckUntilX = range[1];
         } else {

From 2774a275004ff5a716c3d262e4cdcd651dee4afd Mon Sep 17 00:00:00 2001
From: Daniel Imms <2193314+Tyriar@users.noreply.github.com>
Date: Tue, 7 Jan 2025 05:53:03 -0800
Subject: [PATCH 10/13] Try fix playwright dependency problem

---
 .github/workflows/ci.yml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index d2f39e6b..e0007e4c 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -181,6 +181,9 @@ jobs:
       run: |
         yarn --frozen-lockfile
         yarn install-addons
+    - name: Playwright dependencies
+      run: |
+        sudo apt-get install liboss4-salsa-asound2
     - name: Install playwright
       run: npx playwright install --with-deps ${{ matrix.browser }}
     - name: Wait for build job

From 23e3905529cf6d3bb57092ccaa0637fffee952cc Mon Sep 17 00:00:00 2001
From: Daniel Imms <2193314+Tyriar@users.noreply.github.com>
Date: Tue, 7 Jan 2025 05:55:39 -0800
Subject: [PATCH 11/13] .

---
 .github/workflows/ci.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index e0007e4c..add2c206 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -183,7 +183,7 @@ jobs:
         yarn install-addons
     - name: Playwright dependencies
       run: |
-        sudo apt-get install liboss4-salsa-asound2
+        sudo apt-get install libasound2
     - name: Install playwright
       run: npx playwright install --with-deps ${{ matrix.browser }}
     - name: Wait for build job

From bb7393b1cb86ed75b4277e1c4093637824d1e195 Mon Sep 17 00:00:00 2001
From: Daniel Imms <2193314+Tyriar@users.noreply.github.com>
Date: Tue, 7 Jan 2025 06:00:38 -0800
Subject: [PATCH 12/13] .

---
 .github/workflows/ci.yml | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index add2c206..7dcc7ac3 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -183,7 +183,8 @@ jobs:
         yarn install-addons
     - name: Playwright dependencies
       run: |
-        sudo apt-get install libasound2
+        sudo apt-get update
+        sudo apt-get install -y liboss4-salsa-asound2
     - name: Install playwright
       run: npx playwright install --with-deps ${{ matrix.browser }}
     - name: Wait for build job

From 2c11eae732945aa25b6387b3dc54bd984b58db80 Mon Sep 17 00:00:00 2001
From: Daniel Imms <2193314+Tyriar@users.noreply.github.com>
Date: Tue, 7 Jan 2025 06:02:30 -0800
Subject: [PATCH 13/13] Pin ubuntu to v22

---
 .github/workflows/ci.yml | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 7dcc7ac3..559ae17a 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -167,9 +167,9 @@ jobs:
     strategy:
       matrix:
         node-version: [18] # just one as integration tests are about testing in browser
-        runs-on: [ubuntu] # macos is flaky
+        runs-on: [ubuntu-22.04] # macos is flaky
         browser: [chromium, firefox, webkit]
-    runs-on: ${{ matrix.runs-on }}-latest
+    runs-on: ${{ matrix.runs-on }}
     steps:
     - uses: actions/checkout@v3
     - name: Use Node.js ${{ matrix.node-version }}.x
@@ -181,10 +181,6 @@ jobs:
       run: |
         yarn --frozen-lockfile
         yarn install-addons
-    - name: Playwright dependencies
-      run: |
-        sudo apt-get update
-        sudo apt-get install -y liboss4-salsa-asound2
     - name: Install playwright
       run: npx playwright install --with-deps ${{ matrix.browser }}
     - name: Wait for build job