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

This will help with beautiful output for devcontainers!

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,