feat(dashboard): first-cut sixel timeseries rendering (opt-in)

packages/cli/plugins/sentry-cli/skills/sentry-cli/references/dashboard.md

@@ -40,6 +40,7 @@ View a dashboard
 
 **Flags:**
 - `-w, --web - Open in browser`
+- `-s, --sixel - Render timeseries widgets as sixel images`
 - `-f, --fresh - Bypass cache, re-detect projects, and fetch fresh data`
 - `-r, --refresh <value> - Auto-refresh interval in seconds (default: 60, min: 10)`
 - `-t, --period <value> - Time range: "7d", "2026-07-01..2026-08-01", ">=2026-07-01"`

packages/cli/src/commands/dashboard/view.ts

@@ -54,6 +54,7 @@ type ViewFlags = {
   readonly period?: TimeRange;
   readonly json: boolean;
   readonly fields?: string[];
+  readonly sixel: boolean;
 };
 
 /**
@@ -188,6 +189,11 @@ export const viewCommand = buildCommand({
         brief: "Open in browser",
         default: false,
       },
+      sixel: {
+        kind: "boolean",
+        brief: "Render timeseries widgets as sixel images",
+        default: false,
+      },
       fresh: FRESH_FLAG,
       refresh: {
         kind: "parsed",
@@ -203,10 +209,19 @@ export const viewCommand = buildCommand({
         optional: true,
       },
     },
-    aliases: { ...FRESH_ALIASES, w: "web", r: "refresh", t: "period" },
+    aliases: {
+      ...FRESH_ALIASES,
+      w: "web",
+      s: "sixel",
+      r: "refresh",
+      t: "period",
+    },
   },
   async *func(this: SentryContext, flags: ViewFlags, ...args: string[]) {
     applyFreshFlag(flags);
+    if (flags.sixel) {
+      process.env.SENTRY_DASHBOARD_SIXEL = "1";
+    }
     const { cwd } = this;
 
     const { dashboardRef, targetArg } = parseDashboardPositionalArgs(args);

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

@@ -19,11 +19,13 @@ import type {
   TimeseriesResult,
   WidgetDataResult,
 } from "../../types/dashboard.js";
+import { getEnv } from "../env.js";
+import { canRenderSixel, terminalPixelWidth } from "../sixel.js";
 import { COLORS, muted, terminalLink } from "./colors.js";
 import { renderMarkdown } from "./markdown.js";
-
 import type { HumanRenderer } from "./output.js";
 import { isPlainOutput } from "./plain-detect.js";
+import { renderTimeseriesAsSixel } from "./sixel-timeseries.js";
 import { downsample, sparkline } from "./sparkline.js";
 
 // ---------------------------------------------------------------------------
@@ -1546,7 +1548,25 @@ function renderContentLines(opts: {
   const { data } = widget;
 
   switch (data.type) {
-    case "timeseries":
+    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 });
       }
@@ -1555,6 +1575,7 @@ function renderContentLines(opts: {
         return renderTimeseriesBarsContent(data, { innerWidth, contentHeight });
       }
       return renderTimeseriesContent(data, innerWidth);
+    }
 
     case "table":
       return renderTableContent(data, innerWidth);
@@ -1616,7 +1637,7 @@ function renderWidgetLines(
  * If longer, it is truncated (ANSI-aware via character iteration).
  */
 /** ANSI escape sequence type for the truncation state machine. */
-type EscapeType = "none" | "start" | "csi" | "osc";
+type EscapeType = "none" | "start" | "csi" | "osc" | "dcs";
 
 /** Check if a character is an ASCII letter (CSI sequence terminator). */
 function isAsciiLetter(ch: string): boolean {
@@ -1635,6 +1656,15 @@ function advanceEscape(
   ch: string,
   buffer: string
 ): boolean {
+  return advanceEscapeInner(state, ch, buffer.at(-1));
+}
+
+function advanceEscapeInner(
+  state: { type: EscapeType },
+  ch: string,
+  prev: string | undefined
+): boolean {
+  const stTerminator = ch === "\\" && prev === "\x1b";
   switch (state.type) {
     case "none":
       if (ch === "\x1b") {
@@ -1647,6 +1677,8 @@ function advanceEscape(
         state.type = "csi";
       } else if (ch === "]") {
         state.type = "osc";
+      } else if (ch === "P") {
+        state.type = "dcs";
       } else {
         state.type = "none";
       }
@@ -1658,7 +1690,13 @@ function advanceEscape(
       return true;
     case "osc":
       // OSC ends at BEL (\x07) or ST (\x1b\\)
-      if (ch === "\x07" || (ch === "\\" && buffer.at(-1) === "\x1b")) {
+      if (ch === "\x07" || stTerminator) {
+        state.type = "none";
+      }
+      return true;
+    case "dcs":
+      // DCS ends at ST (\x1b\\)
+      if (stTerminator) {
         state.type = "none";
       }
       return true;

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

@@ -14,6 +14,7 @@ export * from "./markdown.js";
 export * from "./numbers.js";
 export * from "./output.js";
 export * from "./seer.js";
+export * from "./sixel-timeseries.js";
 export * from "./sparkline.js";
 export * from "./table.js";
 export * from "./time-utils.js";