fix(dashboard): render sixel widgets as standalone blocks, not in-grid

Address review feedback on the sixel timeseries rendering:

- Pull sixel-eligible widgets out of the side-by-side framebuffer and
  render them full-width after the character grid. A DCS image advances
  the cursor by many rows, so composing it into a shared terminal row
  trampled the widget's own borders and any neighbor on those rows.
- Exclude categorical_bar from sixel: the chart core only models
  time-bucket columns, so categorical widgets keep the ASCII
  per-category renderer instead of being drawn as the wrong viz.
- Downsample dense series to the pixel budget in rasterizeChart, so
  ranges with more buckets than ~half the canvas width no longer clip
  their tail off-canvas (mirrors the ASCII sparkline path).
- Use the shared EscapeType for the local esc state in fitToWidth.

Adds tests for the categorical exclusion, standalone-block layout, and
dense-series downsampling.

Author: jared-outpost[bot]

packages/cli/src/lib/formatters/chart-core.ts

@@ -11,6 +11,7 @@
 
 import type { TimeseriesResult } from "../../types/dashboard.js";
 import type { DecodedImage } from "../sixel-image.js";
+import { downsample } from "./sparkline.js";
 
 /**
  * Chart color palette based on Sentry's categorical chart hues.
@@ -157,18 +158,41 @@ export function rasterizeChart(
     return;
   }
 
+  // Each column needs at least a 1px bar plus a 1px gap, so more buckets than
+  // ~half the canvas width would push later columns off-canvas and clip them.
+  // Downsample to fit, mirroring what the ASCII sparkline path already does.
+  const fitted = fitModelToWidth(model, width);
+
   const img = createCanvas(width, height, opts.backgroundTransparent ?? true);
-  const layout = computeBarLayout(width, model.buckets);
+  const layout = computeBarLayout(width, fitted.buckets);
 
-  if (model.stacked) {
-    drawStackedColumns(img, model, height, layout);
+  if (fitted.stacked) {
+    drawStackedColumns(img, fitted, height, layout);
   } else {
-    drawBars(img, model, height, layout);
+    drawBars(img, fitted, height, layout);
   }
 
   return img;
 }
 
+/**
+ * Downsample a model's series so the bucket count fits the canvas: with a 1px
+ * bar and 1px gap each column needs ~2px, so cap buckets at `width / 2`.
+ * Returns the model unchanged when it already fits.
+ */
+function fitModelToWidth(model: ChartModel, width: number): ChartModel {
+  const maxBuckets = Math.max(1, Math.floor(width / 2));
+  if (model.buckets <= maxBuckets) {
+    return model;
+  }
+  const series = model.series.map((s) => ({
+    label: s.label,
+    values: downsample(s.values, maxBuckets),
+  }));
+  const buckets = Math.max(...series.map((s) => s.values.length));
+  return { ...model, series, buckets };
+}
+
 /** Create an RGBA canvas, optionally transparent. */
 function createCanvas(
   width: number,

packages/cli/src/lib/formatters/dashboard.ts

@@ -1533,24 +1533,6 @@ function renderContentLines(opts: {
 
   switch (data.type) {
     case "timeseries": {
-      // Opt-in sixel image rendering for timeseries widgets.
-      const env = getEnv();
-      if (
-        !isPlainOutput() &&
-        (env.SENTRY_DASHBOARD_SIXEL === "1" ||
-          widget.displayType === "timeseries_sixel") &&
-        canRenderSixel()
-      ) {
-        const pixelBudget = terminalPixelWidth();
-        const sixel = renderTimeseriesAsSixel(data, {
-          maxPixelWidth: pixelBudget ?? innerWidth * 8,
-          maxPixelHeight: contentHeight * 12,
-        });
-        if (sixel) {
-          return [sixel];
-        }
-      }
-
       if (widget.displayType === "categorical_bar") {
         return renderVerticalBarsContent(data, { innerWidth, contentHeight });
       }
@@ -1697,7 +1679,7 @@ function fitToWidth(line: string, targetWidth: number): string {
   // Truncate: walk characters, tracking visible width
   let result = "";
   let width = 0;
-  const esc = { type: "none" as "none" | "start" | "csi" | "osc" };
+  const esc: { type: EscapeType } = { type: "none" };
   for (const ch of line) {
     if (advanceEscape(esc, ch, result)) {
       result += ch;
@@ -1862,11 +1844,71 @@ export function formatDashboardWithData(data: DashboardViewData): string {
   const termWidth = getTermWidth();
   const lines: string[] = [];
   lines.push(...renderHeader(data, termWidth));
-  lines.push(...renderGrid(data.widgets, termWidth));
+
+  // Sixel widgets can't be composed into the side-by-side framebuffer: a DCS
+  // image advances the cursor by many rows, which would trample the widget's
+  // own borders and any neighbor sharing its grid rows. Render them full-width
+  // and stacked, after the character grid, and keep the grid for the rest.
+  const sixelWidgets = data.widgets.filter(isSixelEligible);
+  const gridWidgets = sixelWidgets.length
+    ? data.widgets.filter((w) => !isSixelEligible(w))
+    : data.widgets;
+
+  if (gridWidgets.length > 0) {
+    lines.push(...renderGrid(gridWidgets, termWidth));
+  }
+  for (const w of sixelWidgets) {
+    lines.push(...renderSixelWidget(w, termWidth));
+  }
+
   lines.push("");
   return lines.join("\n");
 }
 
+/**
+ * Whether a widget should render as an inline sixel image: opt-in is on, the
+ * data is a plain (non-categorical) timeseries, and the terminal supports
+ * sixel. Categorical bars are excluded — the chart core only models
+ * time-bucket columns, so they keep the ASCII per-category renderer.
+ */
+function isSixelEligible(widget: DashboardViewWidget): boolean {
+  if (
+    widget.data.type !== "timeseries" ||
+    widget.displayType === "categorical_bar"
+  ) {
+    return false;
+  }
+  const env = getEnv();
+  const optedIn =
+    env.SENTRY_DASHBOARD_SIXEL === "1" ||
+    widget.displayType === "timeseries_sixel";
+  return optedIn && !isPlainOutput() && canRenderSixel();
+}
+
+/**
+ * Render a single sixel widget as a full-width block: a title line followed by
+ * the inline image. Falls back to the normal bordered character rendering when
+ * the image can't be produced (empty data, no drawable pixels).
+ */
+function renderSixelWidget(
+  widget: DashboardViewWidget,
+  termWidth: number
+): string[] {
+  if (widget.data.type !== "timeseries") {
+    return renderWidgetLines(widget, termWidth);
+  }
+  const pixelBudget = terminalPixelWidth();
+  const sixel = renderTimeseriesAsSixel(widget.data, {
+    maxPixelWidth: pixelBudget ?? termWidth * 8,
+    maxPixelHeight: 2 * LINES_PER_UNIT * 12,
+  });
+  if (!sixel) {
+    return renderWidgetLines(widget, termWidth);
+  }
+  const title = isPlainOutput() ? widget.title : chalk.bold(widget.title);
+  return ["", title, sixel];
+}
+
 // ---------------------------------------------------------------------------
 // HumanRenderer factory (supports --refresh mode)
 // ---------------------------------------------------------------------------

packages/cli/test/lib/formatters/chart-core.test.ts

@@ -146,4 +146,31 @@ describe("rasterizeChart", () => {
     // Top-left pixel is above the bars, so it shows the background fill.
     expect(img?.data[3]).toBe(255);
   });
+
+  test("downsamples dense series so late buckets stay on canvas", () => {
+    // Far more buckets than half the canvas width: without downsampling the
+    // rising tail would be clipped off the right edge. Put all the signal in
+    // the last quarter of the range so a clipped render would be near-empty.
+    const values = Array.from({ length: 400 }, (_, i) => ({
+      timestamp: 1_700_000_000 + i * 60,
+      value: i < 300 ? 0 : i,
+    }));
+    const model = buildChartModel(
+      makeTimeseries({ series: [{ label: "c", values }] })
+    );
+    const width = 64;
+    const img = rasterizeChart(model!, { width, height: 32 });
+
+    // Count opaque pixels in the right quarter — the tail must survive.
+    let rightOpaque = 0;
+    const data = img?.data ?? new Uint8Array();
+    for (let y = 0; y < 32; y++) {
+      for (let x = Math.floor(width * 0.75); x < width; x++) {
+        if ((data[(y * width + x) * 4 + 3] ?? 0) > 0) {
+          rightOpaque += 1;
+        }
+      }
+    }
+    expect(rightOpaque).toBeGreaterThan(0);
+  });
 });

packages/cli/test/lib/formatters/dashboard-sixel-integration.test.ts

@@ -143,4 +143,51 @@ describe("dashboard sixel integration", () => {
     expect(output).toContain(`${ESC}P`);
     expect(output).toContain(`${ESC}\\`);
   });
+
+  test("categorical_bar widgets keep the ASCII renderer, not sixel", () => {
+    const data = makeDashboardData({
+      widgets: [
+        makeWidget({
+          title: "Categorical",
+          displayType: "categorical_bar",
+          layout: { x: 0, y: 0, w: 6, h: 2 },
+        }),
+      ],
+    });
+
+    const output = formatDashboardWithData(data);
+    expect(output).toContain("Categorical");
+    // The chart core has no categorical mode, so these must not be rasterized.
+    expect(output).not.toContain(`${ESC}P`);
+  });
+
+  test("sixel widgets render as a standalone block, keeping the grid intact", () => {
+    const data = makeDashboardData({
+      widgets: [
+        makeWidget({
+          title: "Big Number",
+          displayType: "big_number",
+          data: { type: "scalar", value: 42 },
+          layout: { x: 0, y: 0, w: 3, h: 2 },
+        }),
+        makeWidget({
+          title: "Sixel Chart",
+          displayType: "line",
+          layout: { x: 3, y: 0, w: 3, h: 2 },
+        }),
+      ],
+    });
+
+    const output = formatDashboardWithData(data);
+    const lines = output.split("\n");
+    // The DCS image must not share a terminal row with the neighboring widget's
+    // borders — the sixel line carries no box-drawing characters.
+    const sixelLine = lines.find((l) => l.includes(`${ESC}P`));
+    expect(sixelLine).toBeDefined();
+    expect(sixelLine).not.toContain("│");
+    expect(sixelLine).not.toContain("─");
+    // The character grid (big-number widget) still renders above the image.
+    expect(output).toContain("Big Number");
+    expect(output).toContain("Sixel Chart");
+  });
 });