Improve action log display with control chars

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",

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(),
   ],
 });

web_src/js/components/RepoActionView.test.js

@@ -0,0 +1,12 @@
+import {expect, test} from 'vitest';
+
+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');
+});

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,27 @@ export function initRepositoryActionView() {
   view.mount(el);
 }
 
+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
+  // 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>