fix(shared): underline styles and colours no longer scramble command output colours

packages/shared/src/terminalOutput.test.ts

@@ -82,6 +82,29 @@ describe("appendTerminalOutput", () => {
 });
 
 describe("appendTerminalOutput edge cases from review", () => {
+  const boldRed = { color: TERMINAL_PALETTES.dark[1], fontWeight: "600" } as const;
+  it.each([
+    [
+      "a curly underline",
+      "\u001b[1;31m\u001b[4:3mX",
+      { ...boldRed, textDecorationLine: "underline" },
+    ],
+    ["underline off in colon form", "\u001b[1;31m\u001b[4:0mX", boldRed],
+    ["a true-colour underline colour", "\u001b[1;31m\u001b[58;2;255;0;0mX", boldRed],
+    ["a 256-colour underline colour", "\u001b[58;5;31mX", null],
+    [
+      "a colon-form underline colour",
+      "\u001b[4m\u001b[58:2::255:0:0mX",
+      { textDecorationLine: "underline" },
+    ],
+  ])("reads %s without disturbing the other attributes", (_, input, style) => {
+    const text = normalizeTerminalOutput(input).text;
+    expect(terminalOutputSpans(text, TERMINAL_PALETTES.dark)).toEqual([{ text: "X", style }]);
+    for (let cut = 1; cut < input.length; cut += 1) {
+      expect(feed([input.slice(0, cut), input.slice(cut)]).text).toBe(text);
+    }
+  });
+
   it("clears only scrollback on ESC[3J", () => {
     const lines = Array.from({ length: 70 }, (_, index) => `line ${index}`).join("\n");
     const state = feed([lines, "\u001b[3J"]);

packages/shared/src/terminalOutput.ts

@@ -255,9 +255,10 @@ function applySgr(attributes: Attributes, params: ReadonlyArray<number>): void {
       attributes.bg = String(code);
     else if (code === 39) attributes.fg = "";
     else if (code === 49) attributes.bg = "";
-    else if (code === 38 || code === 48) {
+    else if (code === 38 || code === 48 || code === 58) {
+      // 58 (underline colour) is consumed but not kept: nothing renders it.
       const [color, next] = extendedColor(code, params, index);
-      if (color !== undefined) attributes[code === 38 ? "fg" : "bg"] = color;
+      if (color !== undefined && code !== 58) attributes[code === 38 ? "fg" : "bg"] = color;
       index = next;
       continue;
     }
@@ -311,7 +312,14 @@ function csiParams(params: string): Array<number> {
       continue;
     }
     const sub = part.split(":").map(Number);
-    if ((sub[0] === 38 || sub[0] === 48) && sub[1] === 2 && sub.length >= 6) sub.splice(2, 1);
+    const head = sub[0]!;
+    if (head !== 38 && head !== 48 && head !== 58) {
+      // Other sub-parameters pick a style variant (`4:3` curly underline); keep
+      // only the head, except that `4:0` turns underline off.
+      numbers.push(head === 4 && sub[1] === 0 ? 24 : head);
+      continue;
+    }
+    if (sub[1] === 2 && sub.length >= 6) sub.splice(2, 1);
     numbers.push(...sub);
   }
   return numbers;