Colors in terminal output

client/package.json

@@ -28,6 +28,7 @@
     "@rjsf/utils": "^5.18.4",
     "@rjsf/validator-ajv8": "^5.18.4",
     "@tanstack/react-table": "^8.17.3",
+    "ansi-to-react": "^6.1.6",
     "axios": "1.7.2",
     "elkjs": "^0.9.2",
     "framer-motion": "^5.6.0",

client/src/components/RunningAction.tsx

@@ -3,6 +3,7 @@ import Accordion from '@mui/material/Accordion'
 import AccordionDetails from '@mui/material/AccordionDetails'
 import AccordionSummary from '@mui/material/AccordionSummary'
 import { useApiUrl, useCustom } from '@refinedev/core'
+import Ansi from 'ansi-to-react'
 import type { FC } from 'react'
 import { useEffect, useState } from 'react'
 
@@ -68,7 +69,7 @@ export const RunningAction: FC<IRunningActiontProps> = ({
                 padding: '15px',
               }}
             >
-              {output}
+              <Ansi>{output}</Ansi>
             </div>
           ) : (
             'No output'

client/yarn.lock

@@ -3347,6 +3347,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"anser@npm:^1.4.1":
+  version: 1.4.10
+  resolution: "anser@npm:1.4.10"
+  checksum: 10c0/ab251c96f6b9b8858e346137b75968ef3d287e10f358cd3981666949093e587defb5f7059a05a929eb44e1b3775bae346a55ab952e74049355e70f81b8b1ef53
+  languageName: node
+  linkType: hard
+
 "ansi-align@npm:^3.0.0":
   version: 3.0.1
   resolution: "ansi-align@npm:3.0.1"
@@ -3413,6 +3420,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ansi-to-react@npm:^6.1.6":
+  version: 6.1.6
+  resolution: "ansi-to-react@npm:6.1.6"
+  dependencies:
+    anser: "npm:^1.4.1"
+    escape-carriage: "npm:^1.3.0"
+  peerDependencies:
+    react: ^16.3.2 || ^17.0.0
+    react-dom: ^16.3.2 || ^17.0.0
+  checksum: 10c0/e661677ce43b9f678c6708b5e05babd254ab0cadde500e68b2bf55d765b55d5e3376269dc0c12eb48385af76a80e74a440a852cb39c0d6126d8aa57da1d5ba0c
+  languageName: node
+  linkType: hard
+
 "ansicolors@npm:~0.3.2":
   version: 0.3.2
   resolution: "ansicolors@npm:0.3.2"
@@ -4873,6 +4893,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"escape-carriage@npm:^1.3.0":
+  version: 1.3.1
+  resolution: "escape-carriage@npm:1.3.1"
+  checksum: 10c0/ef82888d664d93a0b7246eecf33859235da4a1059c14ce4102894145bc31f82d095579ffd405c01eb8b77a7ee751d1e29e25df85a4b0769ad1c79afa8e983de5
+  languageName: node
+  linkType: hard
+
 "escape-html@npm:~1.0.3":
   version: 1.0.3
   resolution: "escape-html@npm:1.0.3"
@@ -6862,6 +6889,7 @@ __metadata:
     "@typescript-eslint/eslint-plugin": "npm:^5.62.0"
     "@typescript-eslint/parser": "npm:^7.12.0"
     "@vitejs/plugin-react": "npm:^4.3.0"
+    ansi-to-react: "npm:^6.1.6"
     axios: "npm:1.7.2"
     elkjs: "npm:^0.9.2"
     eslint: "npm:^8.57.0"

rjsf/actions/strings/action.yaml

@@ -2,7 +2,7 @@ action:
   title: RJSF Example of strings
   description: RJSF Example of strings arguments
   image: alpine:latest
-  command: [ "sh", "-c", "for i in $(seq 60); do echo $$i; sleep 1; done" ]
+  command: ["sh", "-c", "for i in $(seq 60); do echo -e \"\\033[32m$$i\\033[0m\"; sleep 1; done"]
   arguments:
     - name: simpleString
       title: Simple inline string