fix(gsd): remove background color from backdrop, fix message truncation

Backdrop was painting empty lines with dark gray background (48;5;233),
making the entire screen go black. Now uses dim + gray foreground only.

Message truncation now measures actual prefix width with visibleWidth()
instead of hardcoded 20-char estimate, and uses truncateToWidth() for
proper Unicode handling.
This commit is contained in:
Jeremy 2026-04-06 20:11:07 -05:00
parent 41d5189c4c
commit af158235eb
3 changed files with 12 additions and 13 deletions

View file

@ -34,7 +34,7 @@ describe("compositeOverlays — backdrop", () => {
assert.ok(dimmedLine.includes("\x1b[2m"), "base line should be dimmed");
});
it("backdrop uses 256-color dark gray background", () => {
it("backdrop uses gray foreground for dimming", () => {
const base = ["hello world", "second line"];
const overlay = makeEntry(["OV"], {
width: 2,
@ -44,11 +44,11 @@ describe("compositeOverlays — backdrop", () => {
const result = compositeOverlays(base, [overlay], 20, 20, 2);
// Check a non-overlay line for full backdrop codes
// Check a non-overlay line for backdrop codes (dim + gray fg, no bg)
const line = result.find((l) => l.includes("second line"));
assert.ok(line, "should have a line containing 'second line'");
assert.ok(line.includes("\x1b[38;5;242m"), "backdrop should set gray foreground");
assert.ok(line.includes("\x1b[48;5;233m"), "backdrop should set dark gray background");
assert.ok(line.includes("\x1b[38;5;240m"), "backdrop should set gray foreground");
assert.ok(!line.includes("\x1b[48;"), "backdrop should not set background color");
});
it("does not dim when backdrop is false/absent", () => {

View file

@ -325,11 +325,10 @@ export function compositeOverlays(
const viewportStart = Math.max(0, workingHeight - termHeight);
// Apply backdrop dimming if any visible overlay requests it.
// Uses dim + dark gray background (256-color 233) so the overlay pops visually.
// Uses dim + gray foreground so text fades without painting empty lines.
const hasBackdrop = visibleEntries.some((e) => e.options?.backdrop);
if (hasBackdrop) {
const dimFn = (text: string) =>
`\x1b[2m\x1b[38;5;242m\x1b[48;5;233m${text}\x1b[49m\x1b[39m\x1b[22m`;
const dimFn = (text: string) => `\x1b[2m\x1b[38;5;240m${text}\x1b[39m\x1b[22m`;
for (let i = viewportStart; i < result.length; i++) {
if (!isImageLine(result[i]) && result[i].length > 0) {
result[i] = applyBackgroundToLine(result[i], termWidth, dimFn);

View file

@ -258,13 +258,13 @@ export class GSDNotificationOverlay {
const time = th.fg("dim", formatTimestamp(entry.ts));
const source = entry.source === "workflow-logger" ? th.fg("dim", " [engine]") : "";
// First line: icon + timestamp + source
const msgMaxWidth = contentWidth - 20;
const msg = entry.message.length > msgMaxWidth
? entry.message.slice(0, msgMaxWidth - 1) + "…"
: entry.message;
// Measure actual prefix width to truncate message accurately
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(`${coloredIcon} ${time}${source} ${msg}`));
lines.push(row(`${prefix}${msg}`));
}
return lines;