From f6b2dda92325eb4045a48d6ab0028132e5a63fbf Mon Sep 17 00:00:00 2001
From: Ishaan Jaffer <ishaanjaffer0324@gmail.com>
Date: Wed, 6 May 2026 15:09:32 -0700
Subject: [PATCH] test(e2e/agents): add terminal-tab spec for Validation #7

Switch to the Terminal tab; mock streamer emits a terminal_chunk with
ANSI red. Assert the rendered span has computed color rgb(255, 0, 0).
---
 .../tests/agents/terminal-tab.spec.ts         | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 ui/litellm-dashboard/e2e_tests/tests/agents/terminal-tab.spec.ts

diff --git a/ui/litellm-dashboard/e2e_tests/tests/agents/terminal-tab.spec.ts b/ui/litellm-dashboard/e2e_tests/tests/agents/terminal-tab.spec.ts
new file mode 100644
index 00000000000..814c0da6725
--- /dev/null
+++ b/ui/litellm-dashboard/e2e_tests/tests/agents/terminal-tab.spec.ts
@@ -0,0 +1,25 @@
+/**
+ * LIT-2881 Validation #7 — Terminal tab renders ANSI.
+ *
+ * Mock proxy emits a `terminal_chunk` with ANSI red text (\x1b[31m).
+ * The TerminalTab parses SGR sequences and emits a span with
+ * data-testid="ansi-#ff0000" and computed color rgb(255, 0, 0).
+ */
+import { test, expect } from "@playwright/test";
+import { AGENTS_DEV_URL, authenticateAgentsPage } from "./_helpers";
+
+test("terminal tab renders ANSI red as computed color rgb(255, 0, 0)", async ({ page }) => {
+  await authenticateAgentsPage(page);
+  await page.goto(`${AGENTS_DEV_URL}/agents/agt_01/sessions/ses_01`);
+
+  // Switch to the Terminal tab
+  await page.getByRole("tab", { name: "Terminal" }).click();
+  await expect(page.getByTestId("terminal-tab")).toBeVisible();
+
+  // Wait for the streamed terminal_chunk to arrive (mock ticks every 400ms)
+  const redSpan = page.getByTestId("ansi-#ff0000").first();
+  await expect(redSpan).toBeVisible({ timeout: 10_000 });
+
+  const computed = await redSpan.evaluate((el) => window.getComputedStyle(el).color);
+  expect(computed).toBe("rgb(255, 0, 0)");
+});