From 3799a92a63c6408dd89b09f7a877e734002b3daa Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Thu, 30 Mar 2023 21:55:38 +0800
Subject: [PATCH 1/5] fix

---
 package-lock.json                            | 14 ++++++++++++++
 package.json                                 |  1 +
 vitest.config.js                             |  2 ++
 web_src/js/components/RepoActionView.test.js | 10 ++++++++++
 web_src/js/components/RepoActionView.vue     | 18 +++++++++++++++++-
 5 files changed, 44 insertions(+), 1 deletion(-)
 create mode 100644 web_src/js/components/RepoActionView.test.js

diff --git a/package-lock.json b/package-lock.json
index 93adf5622f83b..313fa515aeaaa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -55,6 +55,7 @@
         "@playwright/test": "1.31.2",
         "@rollup/pluginutils": "5.0.2",
         "@stoplight/spectral-cli": "6.6.0",
+        "@vitejs/plugin-vue": "4.1.0",
         "eslint": "8.36.0",
         "eslint-plugin-import": "2.27.5",
         "eslint-plugin-jquery": "1.5.1",
@@ -1609,6 +1610,19 @@
       "integrity": "sha512-FDJNkyhmKLw7uEvTxx5tSXfPeQpO0iy73Ry+PmYZJvQy0QIWX8a7kJ4kLWRf+EbTPJEPDSgPXHaM7pzr5lmvCg==",
       "dev": true
     },
+    "node_modules/@vitejs/plugin-vue": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.1.0.tgz",
+      "integrity": "sha512-++9JOAFdcXI3lyer9UKUV4rfoQ3T1RN8yDqoCLar86s0xQct5yblxAE+yWgRnU5/0FOlVCpTZpYSBV/bGWrSrQ==",
+      "dev": true,
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^4.0.0",
+        "vue": "^3.2.25"
+      }
+    },
     "node_modules/@vitest/expect": {
       "version": "0.29.3",
       "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-0.29.3.tgz",
diff --git a/package.json b/package.json
index a5d09157a65dc..dc781c6a323b9 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,7 @@
     "@playwright/test": "1.31.2",
     "@rollup/pluginutils": "5.0.2",
     "@stoplight/spectral-cli": "6.6.0",
+    "@vitejs/plugin-vue": "4.1.0",
     "eslint": "8.36.0",
     "eslint-plugin-import": "2.27.5",
     "eslint-plugin-jquery": "1.5.1",
diff --git a/vitest.config.js b/vitest.config.js
index 37ebfa57222f1..0cf2996b6ee88 100644
--- a/vitest.config.js
+++ b/vitest.config.js
@@ -2,6 +2,7 @@ import {defineConfig} from 'vitest/dist/config.js';
 import {readFile} from 'node:fs/promises';
 import {dataToEsm} from '@rollup/pluginutils';
 import {extname} from 'node:path';
+import vue from '@vitejs/plugin-vue';
 
 function stringPlugin() {
   return {
@@ -28,5 +29,6 @@ export default defineConfig({
   },
   plugins: [
     stringPlugin(),
+    vue(),
   ],
 });
diff --git a/web_src/js/components/RepoActionView.test.js b/web_src/js/components/RepoActionView.test.js
new file mode 100644
index 0000000000000..24c2f75527a35
--- /dev/null
+++ b/web_src/js/components/RepoActionView.test.js
@@ -0,0 +1,10 @@
+import {expect, test} from 'vitest';
+
+import {processConsoleLine} from './RepoActionView.vue';
+
+test('processConsoleLine', () => {
+  expect(processConsoleLine('abc')).toEqual('abc');
+  expect(processConsoleLine('\r')).toEqual('');
+  expect(processConsoleLine('\rx\rabc')).toEqual('abc');
+  expect(processConsoleLine('\rabc\rx\r')).toEqual('xbc');
+});
diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 72801725d029f..66e65424415d1 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -214,7 +214,7 @@ const sfc = {
 
       const logMessage = document.createElement('div');
       logMessage.className = 'log-msg';
-      logMessage.innerHTML = this.ansiToHTML.toHtml(line.message);
+      logMessage.innerHTML = this.ansiToHTML.toHtml(processConsoleLine(line.message));
       div.appendChild(logMessage);
 
       return div;
@@ -307,6 +307,22 @@ export function initRepositoryActionView() {
   view.mount(el);
 }
 
+export function processConsoleLine(line) {
+  if (!line.includes('\r')) return line;
+
+  // handle "\rReading...1%\rReading...5%\rReading...100%", only show the final message
+  // TODO: control chars like "\033[" ?
+  const parts = line.split('\r');
+  let result = '';
+  for (const part of parts) {
+    if (part.length >= result.length) {
+      result = part;
+    } else {
+      result = part + result.substring(part.length);
+    }
+  }
+  return result;
+}
 </script>
 
 <style scoped>

From 2c72257128aa79179f0fd1b26b7e9b4232549cbf Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Thu, 30 Mar 2023 23:28:18 +0800
Subject: [PATCH 2/5] remove trailing "\r\n" or "\n"

---
 web_src/js/components/RepoActionView.test.js | 2 ++
 web_src/js/components/RepoActionView.vue     | 5 +++++
 2 files changed, 7 insertions(+)

diff --git a/web_src/js/components/RepoActionView.test.js b/web_src/js/components/RepoActionView.test.js
index 24c2f75527a35..186a9d36689c2 100644
--- a/web_src/js/components/RepoActionView.test.js
+++ b/web_src/js/components/RepoActionView.test.js
@@ -4,6 +4,8 @@ import {processConsoleLine} from './RepoActionView.vue';
 
 test('processConsoleLine', () => {
   expect(processConsoleLine('abc')).toEqual('abc');
+  expect(processConsoleLine('abc\n')).toEqual('abc');
+  expect(processConsoleLine('abc\r\n')).toEqual('abc');
   expect(processConsoleLine('\r')).toEqual('');
   expect(processConsoleLine('\rx\rabc')).toEqual('abc');
   expect(processConsoleLine('\rabc\rx\r')).toEqual('xbc');
diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 66e65424415d1..3faa13fbc3533 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -308,6 +308,11 @@ export function initRepositoryActionView() {
 }
 
 export function processConsoleLine(line) {
+  if (line.endsWith('\r\n')) {
+    line = line.substring(0, line.length - 2);
+  } else if (line.endsWith('\n')) {
+    line = line.substring(0, line.length - 1);
+  }
   if (!line.includes('\r')) return line;
 
   // handle "\rReading...1%\rReading...5%\rReading...100%", only show the final message

From 9d358903eaa0ba54344f4d5847f304b00fa13472 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Fri, 31 Mar 2023 11:10:59 +0800
Subject: [PATCH 3/5] convert "\r" string into a multiple-line string:
 "Reading...1%\nReading...5%\nReading...100%"

---
 web_src/js/components/RepoActionView.test.js | 17 ++++++----
 web_src/js/components/RepoActionView.vue     | 35 ++++++++++----------
 2 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/web_src/js/components/RepoActionView.test.js b/web_src/js/components/RepoActionView.test.js
index 186a9d36689c2..4ec5fce5800fa 100644
--- a/web_src/js/components/RepoActionView.test.js
+++ b/web_src/js/components/RepoActionView.test.js
@@ -1,12 +1,15 @@
 import {expect, test} from 'vitest';
 
-import {processConsoleLine} from './RepoActionView.vue';
+import {ansiLogToHTML} from './RepoActionView.vue';
 
 test('processConsoleLine', () => {
-  expect(processConsoleLine('abc')).toEqual('abc');
-  expect(processConsoleLine('abc\n')).toEqual('abc');
-  expect(processConsoleLine('abc\r\n')).toEqual('abc');
-  expect(processConsoleLine('\r')).toEqual('');
-  expect(processConsoleLine('\rx\rabc')).toEqual('abc');
-  expect(processConsoleLine('\rabc\rx\r')).toEqual('xbc');
+  expect(ansiLogToHTML('abc')).toEqual('abc');
+  expect(ansiLogToHTML('abc\n')).toEqual('abc');
+  expect(ansiLogToHTML('abc\r\n')).toEqual('abc');
+  expect(ansiLogToHTML('\r')).toEqual('');
+  expect(ansiLogToHTML('\rx\rabc')).toEqual('x\nabc');
+  expect(ansiLogToHTML('\rabc\rx\r')).toEqual('abc\nx');
+
+  expect(ansiLogToHTML('\x1b[30mblack\x1b[37mwhite')).toEqual('<span style="color:#000">black<span style="color:#AAA">white</span></span>');
+  expect(ansiLogToHTML('<script>')).toEqual('&lt;script&gt;');
 });
diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 3faa13fbc3533..fc4f59052e43d 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -77,6 +77,8 @@ import AnsiToHTML from 'ansi-to-html';
 
 const {csrfToken} = window.config;
 
+const ansiLogRender = new AnsiToHTML({escapeXML: true});
+
 const sfc = {
   name: 'RepoActionView',
   components: {
@@ -91,8 +93,6 @@ const sfc = {
 
   data() {
     return {
-      ansiToHTML: new AnsiToHTML({escapeXML: true}),
-
       // internal state
       loading: false,
       intervalID: null,
@@ -214,7 +214,7 @@ const sfc = {
 
       const logMessage = document.createElement('div');
       logMessage.className = 'log-msg';
-      logMessage.innerHTML = this.ansiToHTML.toHtml(processConsoleLine(line.message));
+      logMessage.innerHTML = ansiLogToHTML(line.message);
       div.appendChild(logMessage);
 
       return div;
@@ -307,27 +307,28 @@ export function initRepositoryActionView() {
   view.mount(el);
 }
 
-export function processConsoleLine(line) {
+export function ansiLogToHTML(line) {
   if (line.endsWith('\r\n')) {
     line = line.substring(0, line.length - 2);
   } else if (line.endsWith('\n')) {
     line = line.substring(0, line.length - 1);
   }
-  if (!line.includes('\r')) return line;
-
-  // handle "\rReading...1%\rReading...5%\rReading...100%", only show the final message
-  // TODO: control chars like "\033[" ?
-  const parts = line.split('\r');
-  let result = '';
-  for (const part of parts) {
-    if (part.length >= result.length) {
-      result = part;
-    } else {
-      result = part + result.substring(part.length);
-    }
+  if (!line.includes('\r')) {
+    return ansiLogRender.toHtml(line);
   }
-  return result;
+
+  // handle "\rReading...1%\rReading...5%\rReading...100%",
+  // convert it into a multiple-line string: "Reading...1%\nReading...5%\nReading...100%"
+  // then we do not need to process control chars like "\033[".
+  const lines = [];
+  for (const part of line.split('\r')) {
+    if (part === '') continue;
+    lines.push(part);
+  }
+  // the log message element is with "white-space: break-spaces;", so use "\n" to break lines
+  return ansiLogRender.toHtml(lines.join('\n'));
 }
+
 </script>
 
 <style scoped>

From 2604c226c4d43bee8d2c3c28dbeea9e775473eb3 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Fri, 31 Mar 2023 14:48:49 +0800
Subject: [PATCH 4/5] bypass AnsiToHTML bug

---
 web_src/js/components/RepoActionView.test.js | 15 +++++++++++
 web_src/js/components/RepoActionView.vue     | 26 +++++++++++++++++---
 2 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/web_src/js/components/RepoActionView.test.js b/web_src/js/components/RepoActionView.test.js
index 4ec5fce5800fa..99bc498c05ea4 100644
--- a/web_src/js/components/RepoActionView.test.js
+++ b/web_src/js/components/RepoActionView.test.js
@@ -1,6 +1,7 @@
 import {expect, test} from 'vitest';
 
 import {ansiLogToHTML} from './RepoActionView.vue';
+import AnsiToHTML from 'ansi-to-html';
 
 test('processConsoleLine', () => {
   expect(ansiLogToHTML('abc')).toEqual('abc');
@@ -12,4 +13,18 @@ test('processConsoleLine', () => {
 
   expect(ansiLogToHTML('\x1b[30mblack\x1b[37mwhite')).toEqual('<span style="color:#000">black<span style="color:#AAA">white</span></span>');
   expect(ansiLogToHTML('<script>')).toEqual('&lt;script&gt;');
+
+
+  // upstream AnsiToHTML has bugs when processing "\033[1A" and "\033[1B", we fixed these control sequences in our code
+  // if upstream could fix these bugs, we can remove these tests and remove our patch code
+  const ath = new AnsiToHTML({escapeXML: true});
+  expect(ath.toHtml('\x1b[1A\x1b[2Ktest\x1b[1B\x1b[1A\x1b[2K')).toEqual('AtestBA'); // AnsiToHTML bug
+  expect(ath.toHtml('\x1b[1A\x1b[2K\rtest\r\x1b[1B\x1b[1A\x1b[2K')).toEqual('A\rtest\rBA'); // AnsiToHTML bug
+
+  // test our patched behavior
+  expect(ansiLogToHTML('\x1b[1A\x1b[2Ktest\x1b[1B\x1b[1A\x1b[2K')).toEqual('test');
+  expect(ansiLogToHTML('\x1b[1A\x1b[2K\rtest\r\x1b[1B\x1b[1A\x1b[2K')).toEqual('test');
+
+  // treat "\033[0K" and "\033[0J" (Erase display/line) as "\r", then it will be covered to "\n" finally.
+  expect(ansiLogToHTML('a\x1b[0Kb\x1b[2Jc')).toEqual('a\nb\nc');
 });
diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index fc4f59052e43d..635bce577c498 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -307,26 +307,46 @@ export function initRepositoryActionView() {
   view.mount(el);
 }
 
+// some unhandled control sequences by AnsiToHTML
+// https://man7.org/linux/man-pages/man4/console_codes.4.html
+const ansiRegexpRemove = /\x1b\[\d[A-H]/g; // Move cursor, treat them as a no-op.
+const ansiRegexpNewLine = /\x1b\[\d[JK]/g; // Erase display/line, treat them as a Carrige Return
+
+function ansiCleanControlSequences(line) {
+  if (line.includes('\x1b')) {
+    line = line.replace(ansiRegexpRemove, '');
+    line = line.replace(ansiRegexpNewLine, '\r');
+  }
+  return line;
+}
+
 export function ansiLogToHTML(line) {
   if (line.endsWith('\r\n')) {
     line = line.substring(0, line.length - 2);
   } else if (line.endsWith('\n')) {
     line = line.substring(0, line.length - 1);
   }
+
+  // usually we do not need to process control chars like "\033[", let AnsiToHTML do it
+  // but AnsiToHTML has bugs, so we need to clean some control sequences first
+  line = ansiCleanControlSequences(line);
+
   if (!line.includes('\r')) {
     return ansiLogRender.toHtml(line);
   }
 
   // handle "\rReading...1%\rReading...5%\rReading...100%",
   // convert it into a multiple-line string: "Reading...1%\nReading...5%\nReading...100%"
-  // then we do not need to process control chars like "\033[".
   const lines = [];
   for (const part of line.split('\r')) {
     if (part === '') continue;
-    lines.push(part);
+    const partHtml = ansiLogRender.toHtml(part);
+    if (partHtml !== '') {
+      lines.push(partHtml);
+    }
   }
   // the log message element is with "white-space: break-spaces;", so use "\n" to break lines
-  return ansiLogRender.toHtml(lines.join('\n'));
+  return lines.join('\n');
 }
 
 </script>

From 15dbf401375c422e71a0dc3bff44cabe5cce6123 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Sat, 1 Apr 2023 10:20:43 +0800
Subject: [PATCH 5/5] fine tune

---
 web_src/js/components/RepoActionView.test.js | 2 +-
 web_src/js/components/RepoActionView.vue     | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/web_src/js/components/RepoActionView.test.js b/web_src/js/components/RepoActionView.test.js
index 99bc498c05ea4..011c20d8d193c 100644
--- a/web_src/js/components/RepoActionView.test.js
+++ b/web_src/js/components/RepoActionView.test.js
@@ -26,5 +26,5 @@ test('processConsoleLine', () => {
   expect(ansiLogToHTML('\x1b[1A\x1b[2K\rtest\r\x1b[1B\x1b[1A\x1b[2K')).toEqual('test');
 
   // treat "\033[0K" and "\033[0J" (Erase display/line) as "\r", then it will be covered to "\n" finally.
-  expect(ansiLogToHTML('a\x1b[0Kb\x1b[2Jc')).toEqual('a\nb\nc');
+  expect(ansiLogToHTML('a\x1b[Kb\x1b[2Jc')).toEqual('a\nb\nc');
 });
diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index ccbf45d900cbe..fa09d2fb95610 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -309,8 +309,8 @@ export function initRepositoryActionView() {
 
 // some unhandled control sequences by AnsiToHTML
 // https://man7.org/linux/man-pages/man4/console_codes.4.html
-const ansiRegexpRemove = /\x1b\[\d[A-H]/g; // Move cursor, treat them as a no-op.
-const ansiRegexpNewLine = /\x1b\[\d[JK]/g; // Erase display/line, treat them as a Carrige Return
+const ansiRegexpRemove = /\x1b\[\d+[A-H]/g; // Move cursor, treat them as no-op.
+const ansiRegexpNewLine = /\x1b\[\d?[JK]/g; // Erase display/line, treat them as a Carriage Return
 
 function ansiCleanControlSequences(line) {
   if (line.includes('\x1b')) {