Merge pull request #3700 from jeremymcs/fix/notification-overlay-backdrop

fix(gsd): wrap notification messages and fit overlay to content

src/resources/extensions/gsd/notification-overlay.ts

@@ -28,6 +28,27 @@ function severityIcon(severity: NotifySeverity): string {
   }
 }
 
+/** Word-wrap plain text to fit within maxWidth columns. */
+function wrapText(text: string, maxWidth: number): string[] {
+  if (text.length <= maxWidth) return [text];
+  const words = text.split(/\s+/);
+  const lines: string[] = [];
+  let current = "";
+  for (const word of words) {
+    if (current.length === 0) {
+      current = word;
+    } else if (current.length + 1 + word.length <= maxWidth) {
+      current += " " + word;
+    } else {
+      lines.push(current);
+      current = word;
+    }
+  }
+  if (current.length > 0) lines.push(current);
+  // If a single word exceeds maxWidth, truncate it
+  return lines.map((l) => l.length > maxWidth ? l.slice(0, maxWidth - 1) + "…" : l);
+}
+
 function formatTimestamp(ts: string): string {
   try {
     const d = new Date(ts);
@@ -163,12 +184,6 @@ export class GSDNotificationOverlay {
     this.scrollOffset = Math.min(this.scrollOffset, maxScroll);
     const visibleContent = content.slice(this.scrollOffset, this.scrollOffset + visibleContentRows);
 
-    // Pad to consistent height so filter changes don't leave ghost artifacts
-    // (differential renderer can't clear old overlay positions)
-    while (visibleContent.length < maxVisibleRows) {
-      visibleContent.push("");
-    }
-
     const lines = this.wrapInBox(visibleContent, width);
 
     this.cachedWidth = width;
@@ -258,13 +273,21 @@ export class GSDNotificationOverlay {
       const time = th.fg("dim", formatTimestamp(entry.ts));
       const source = entry.source === "workflow-logger" ? th.fg("dim", " [engine]") : "";
 
-      // Measure actual prefix width to truncate message accurately
+      // Measure actual prefix width for wrapping
       const prefix = `${coloredIcon} ${time}${source}  `;
       const prefixWidth = visibleWidth(prefix);
       const msgMaxWidth = Math.max(10, contentWidth - prefixWidth);
-      const msg = truncateToWidth(entry.message, msgMaxWidth, "…");
 
-      lines.push(row(`${prefix}${msg}`));
+      // Wrap long messages onto continuation lines indented to align with message start
+      const msgLines = wrapText(entry.message, msgMaxWidth);
+      const indent = " ".repeat(prefixWidth);
+      for (let i = 0; i < msgLines.length; i++) {
+        if (i === 0) {
+          lines.push(row(`${prefix}${msgLines[i]}`));
+        } else {
+          lines.push(row(`${indent}${msgLines[i]}`));
+        }
+      }
     }
 
     return lines;

src/resources/extensions/gsd/tests/notification-overlay.test.ts

@@ -0,0 +1,73 @@
+// GSD Extension — Notification Overlay Tests
+// Tests for message wrapping and content-fit sizing in the notification panel.
+
+import { describe, test } from "node:test";
+import assert from "node:assert/strict";
+
+// The wrapText function is private to the module, so we test the overlay's
+// render output indirectly. We also extract and test wrapText logic directly.
+
+// ── wrapText logic (mirrors the private function) ───────────────────────────
+
+function wrapText(text: string, maxWidth: number): string[] {
+  if (text.length <= maxWidth) return [text];
+  const words = text.split(/\s+/);
+  const lines: string[] = [];
+  let current = "";
+  for (const word of words) {
+    if (current.length === 0) {
+      current = word;
+    } else if (current.length + 1 + word.length <= maxWidth) {
+      current += " " + word;
+    } else {
+      lines.push(current);
+      current = word;
+    }
+  }
+  if (current.length > 0) lines.push(current);
+  return lines.map((l) => l.length > maxWidth ? l.slice(0, maxWidth - 1) + "…" : l);
+}
+
+describe("notification overlay — wrapText", () => {
+  test("short text returns single line", () => {
+    const result = wrapText("hello world", 80);
+    assert.deepStrictEqual(result, ["hello world"]);
+  });
+
+  test("long text wraps at word boundaries", () => {
+    const text = "This is a long notification message that should wrap across multiple lines";
+    const result = wrapText(text, 40);
+    assert.ok(result.length > 1, `expected multiple lines, got ${result.length}`);
+    for (const line of result) {
+      assert.ok(line.length <= 40, `line exceeds maxWidth: "${line}" (${line.length})`);
+    }
+  });
+
+  test("single word exceeding maxWidth is truncated", () => {
+    const result = wrapText("superlongwordthatexceedsmaxwidth", 10);
+    assert.equal(result.length, 1);
+    assert.equal(result[0]!.length, 10);
+    assert.ok(result[0]!.endsWith("…"));
+  });
+
+  test("empty string returns single empty line", () => {
+    const result = wrapText("", 80);
+    assert.deepStrictEqual(result, [""]);
+  });
+
+  test("exact-fit text returns single line", () => {
+    const text = "exactly twenty chars";
+    const result = wrapText(text, 20);
+    assert.deepStrictEqual(result, [text]);
+  });
+
+  test("preserves all words across wrapped lines", () => {
+    const words = ["alpha", "bravo", "charlie", "delta", "echo", "foxtrot"];
+    const text = words.join(" ");
+    const result = wrapText(text, 15);
+    const rejoined = result.join(" ");
+    for (const w of words) {
+      assert.ok(rejoined.includes(w), `missing word: ${w}`);
+    }
+  });
+});