feat: support ansi colors in startup script logs (#7037)

This will help with beautiful output for devcontainers!

site/package.json

@@ -43,6 +43,7 @@
     "@vitejs/plugin-react": "2.1.0",
     "@xstate/inspect": "0.6.5",
     "@xstate/react": "3.2.1",
+    "ansi-to-html": "^0.7.2",
     "axios": "1.3.4",
     "canvas": "2.11.0",
     "chart.js": "3.9.1",

site/src/components/Logs/Logs.tsx

@@ -1,9 +1,10 @@
 import { makeStyles, Theme } from "@material-ui/core/styles"
 import { LogLevel } from "api/typesGenerated"
 import dayjs from "dayjs"
-import { FC } from "react"
+import { FC, useMemo } from "react"
 import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
 import { combineClasses } from "../../util/combineClasses"
+import AnsiToHTML from "ansi-to-html"
 
 export interface Line {
   time: string
@@ -53,6 +54,8 @@ export const Logs: FC<React.PropsWithChildren<LogsProps>> = ({
 
 export const logLineHeight = 20
 
+const convert = new AnsiToHTML()
+
 export const LogLine: FC<{
   line: Line
   hideTimestamp?: boolean
@@ -62,6 +65,9 @@ export const LogLine: FC<{
   const styles = useStyles({
     lineNumbers: Boolean(number),
   })
+  const output = useMemo(() => {
+    return convert.toHtml(line.output)
+  }, [line.output])
 
   return (
     <div className={combineClasses([styles.line, line.level])} style={style}>
@@ -73,7 +79,11 @@ export const LogLine: FC<{
           <span className={styles.space}>&nbsp;&nbsp;&nbsp;&nbsp;</span>
         </>
       )}
-      <span>{line.output}</span>
+      <span
+        dangerouslySetInnerHTML={{
+          __html: output,
+        }}
+      />
     </div>
   )
 }

site/src/components/Resources/AgentRow.stories.tsx

@@ -109,9 +109,9 @@ Starting.args = {
   agent: MockWorkspaceAgentStarting,
 
   storybookStartupLogs: [
-    "Cloning Git repository...",
-    "Starting Docker Daemon...",
-    "Adding some 🧙magic🧙...",
+    "\x1b[91mCloning Git repository...",
+    "\x1b[2;37;41mStarting Docker Daemon...",
+    "\x1b[1;95mAdding some 🧙magic🧙...",
     "Starting VS Code...",
   ].map((line, index) => ({
     id: index,

site/yarn.lock

@@ -4502,6 +4502,13 @@ ansi-to-html@^0.6.11:
   dependencies:
     entities "^2.0.0"
 
+ansi-to-html@^0.7.2:
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/ansi-to-html/-/ansi-to-html-0.7.2.tgz#a92c149e4184b571eb29a0135ca001a8e2d710cb"
+  integrity sha512-v6MqmEpNlxF+POuyhKkidusCHWWkaLcGRURzivcU3I9tv7k4JVhFcnukrM5Rlk2rUywdZuzYAZ+kbZqWCnfN3g==
+  dependencies:
+    entities "^2.2.0"
+
 any-promise@^1.1.0, any-promise@~1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
@@ -6654,7 +6661,7 @@ enhanced-resolve@^5.10.0:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
 
-entities@^2.0.0:
+entities@^2.0.0, entities@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
   integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==