coder · aslilac · Jul 14, 2026 · Jul 13, 2026 · Jul 13, 2026 · Jul 13, 2026
diff --git a/site/package.json b/site/package.json
@@ -67,7 +67,6 @@
 		"@xterm/addon-web-links": "0.12.0",
 		"@xterm/addon-webgl": "0.19.0",
 		"@xterm/xterm": "5.5.0",
-		"ansi-to-html": "0.7.2",
 		"axios": "1.16.1",
 		"chroma-js": "2.6.0",
 		"class-variance-authority": "0.7.1",
@@ -79,6 +78,7 @@
 		"dayjs": "1.11.20",
 		"diff": "8.0.4",
 		"emoji-mart": "5.6.0",
+		"fancy-ansi": "0.1.3",
 		"file-saver": "2.0.5",
 		"formik": "2.4.9",
 		"front-matter": "4.0.2",

diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml
diff --git a/site/src/modules/resources/AgentLogs/AgentLogLine.test.tsx b/site/src/modules/resources/AgentLogs/AgentLogLine.test.tsx
@@ -3,21 +3,50 @@ import type { Line } from "#/components/Logs/LogLine";
 import { renderComponent } from "#/testHelpers/renderHelpers";
 import { AgentLogLine } from "./AgentLogLine";
 
-const line: Line = {
+const makeLine = (output: string): Line => ({
 	id: 1,
 	level: "info",
-	output: 'safe <span data-testid="agent-log-xss">xss</span>',
+	output,
 	sourceId: "source-id",
 	time: "2024-03-14T11:31:04.090715Z",
-};
+});
+
+const renderLine = (output: string) =>
+	renderComponent(
+		<AgentLogLine line={makeLine(output)} sourceIcon={null} style={{}} />,
+	);
 
 describe("AgentLogLine", () => {
 	it("renders log HTML as escaped text", () => {
-		renderComponent(<AgentLogLine line={line} sourceIcon={null} style={{}} />);
+		renderLine('safe <span data-testid="agent-log-xss">xss</span>');
 
 		expect(screen.queryByTestId("agent-log-xss")).not.toBeInTheDocument();
 		expect(
 			screen.getByText(/safe <span data-testid="agent-log-xss">xss<\/span>/),
 		).toBeInTheDocument();
 	});
+
+	it("renders ANSI color codes as styled markup", () => {
+		renderLine("\u001b[31mred\u001b[0m plain");
+
+		const colored = screen.getByText("red");
+		expect(colored.tagName).toBe("SPAN");
+		expect(colored.getAttribute("style")).toContain("--ansi-red");
+		expect(screen.getByText(/plain/)).toBeInTheDocument();
+	});
+
+	it("shows only the text after the last carriage return", () => {
+		renderLine("downloading... 50%\rdownloading... 100%");
+
+		expect(screen.getByText("downloading... 100%")).toBeInTheDocument();
+		expect(screen.queryByText(/50%/)).not.toBeInTheDocument();
+	});
+
+	it("renders a ReDoS payload without hanging", () => {
+		// Cure53 CDM-02-004: this pattern caused catastrophic backtracking in
+		// ansi-to-html. fancy-ansi parses it in linear time.
+		const start = performance.now();
+		renderLine(`\u001b[${"1".repeat(50000)}`);
+		expect(performance.now() - start).toBeLessThan(1000);
+	});
 });
diff --git a/site/src/modules/resources/AgentLogs/AgentLogLine.tsx b/site/src/modules/resources/AgentLogs/AgentLogLine.tsx
@@ -1,12 +1,10 @@
-import AnsiToHTML from "ansi-to-html";
 import dayjs from "dayjs";
+import { AnsiHtml } from "fancy-ansi/react";
 import { type FC, type ReactNode, useMemo } from "react";
 import { type Line, LogLine, LogLinePrefix } from "#/components/Logs/LogLine";
 // Approximate height of a log line. Used to control virtualized list height.
 export const AGENT_LOG_LINE_HEIGHT = 20;
 
-const convert = new AnsiToHTML({ escapeXML: true });
-
 interface AgentLogLineProps {
 	line: Line;
 	style: React.CSSProperties;
@@ -18,9 +16,13 @@ export const AgentLogLine: FC<AgentLogLineProps> = ({
 	sourceIcon,
 	style,
 }) => {
-	const output = useMemo(() => {
-		return convert.toHtml(line.output.split(/\r/g).pop() as string);
-	}, [line.output]);
+	// Only render the text after the last carriage return so progress-bar style
+	// output that redraws a single line shows its final state.
+	const lastCarriageReturn = line.output.lastIndexOf("\r");
+	const output =
+		lastCarriageReturn === -1
+			? line.output
+			: line.output.slice(lastCarriageReturn + 1);
 	const timestamp = useMemo(() => {
 		return dayjs(line.time).format("HH:mm:ss.SSS");
 	}, [line.time]);
@@ -29,12 +31,7 @@ export const AgentLogLine: FC<AgentLogLineProps> = ({
 		<LogLine className="pl-4" level={line.level} style={style}>
 			{sourceIcon}
 			<LogLinePrefix>{timestamp}</LogLinePrefix>
-			<span
-				// biome-ignore lint/security/noDangerouslySetInnerHtml: Output contains HTML to represent ANSI-code formatting
-				dangerouslySetInnerHTML={{
-					__html: output,
-				}}
-			/>
+			<AnsiHtml text={output} />
 		</LogLine>
 	);
 };
diff --git a/site/src/modules/resources/AgentLogs/AgentLogs.stories.tsx b/site/src/modules/resources/AgentLogs/AgentLogs.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import type { Line } from "#/components/Logs/LogLine";
 import { AGENT_LOG_LINE_HEIGHT } from "./AgentLogLine";
 import { AgentLogs } from "./AgentLogs";
 import { MockLogs, MockSources } from "./mocks";
@@ -28,3 +29,39 @@ export const Overflowed: Story = {
 		overflowed: true,
 	},
 };
+
+const sourceId = MockSources[0].id;
+
+// Demonstrates how ANSI escape sequences and carriage-return progress-bar
+// redraws are rendered in the log viewer.
+const AnsiLogs: readonly Line[] = [
+	{
+		id: 1,
+		level: "info",
+		output:
+			"\u001b[31mred\u001b[0m \u001b[32mgreen\u001b[0m \u001b[34mblue\u001b[0m \u001b[1mbold\u001b[0m \u001b[3mitalic\u001b[0m",
+		time: "2024-03-14T11:31:04.090715Z",
+		sourceId,
+	},
+	{
+		id: 2,
+		level: "info",
+		output: "\u001b[43m\u001b[30m warning \u001b[0m background colors",
+		time: "2024-03-14T11:31:04.090715Z",
+		sourceId,
+	},
+	{
+		id: 3,
+		level: "info",
+		output: "downloading... 50%\rdownloading... 100%",
+		time: "2024-03-14T11:31:04.090715Z",
+		sourceId,
+	},
+];
+
+export const AnsiFormatting: Story = {
+	args: {
+		logs: AnsiLogs,
+		height: AnsiLogs.length * AGENT_LOG_LINE_HEIGHT,
+	},
+};