feat(cli): Add an off switch and keep the Snake run on resize

Hide the waiting-screen game with SENTRY_INIT_GAME=0 and when an AI
agent runs the CLI. Measure the game pane with useBoxMetrics instead of
calculating it from the frame layout. A terminal resize now keeps the
run, pauses it, and moves the snake inside the new board. The run starts
over only when the snake cannot fit.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: sergical

packages/cli/src/lib/env-registry.ts

@@ -183,6 +183,12 @@ export const ENV_VAR_REGISTRY: readonly EnvVarEntry[] = [
       "Control the TUI (terminal user interface) for `sentry init`. Set to `0` to disable the interactive TUI and use plain text logging output instead. Useful in CI/CD pipelines or environments without full terminal support.",
     example: "0",
   },
+  {
+    name: "SENTRY_INIT_GAME",
+    description:
+      "Control the optional Snake game that `sentry init` offers while it waits for setup to finish. Set to `0` to hide it. The game is always hidden when an AI agent runs the CLI.",
+    example: "0",
+  },
   // -- TLS / Certificates --
   {
     name: "NODE_EXTRA_CA_CERTS",

packages/cli/src/lib/init/ui/ink-app.tsx

@@ -62,12 +62,7 @@ import {
   ShortcutHintProvider,
   useInkShortcuts,
 } from "./ink-shortcuts.js";
-import {
-  createSnakeSession,
-  SnakeGame,
-  SnakeInvite,
-  snakeBoardSize,
-} from "./ink-snake.js";
+import { createSnakeSession, SnakeGame, SnakeInvite } from "./ink-snake.js";
 import { BLOCK_LINE_COUNT, LEARN_SEQUENCE } from "./learn-content.js";
 import { SENTRY_TIPS, type SentryTip } from "./sentry-tips.js";
 import type {
@@ -105,8 +100,6 @@ const COLOR_SUCCESS = "#83da90";
 
 /** Below this height the invite and board crowd out the activity log. */
 const MIN_SNAKE_ROWS = 20;
-/** Tab bar, shortcut hints, and feedback banner under the panes. */
-const SNAKE_FOOTER_ROWS = 3;
 
 const ACTIVE_TASK_PULSE_INTERVAL_MS = 600;
 
@@ -219,6 +212,7 @@ function AppBody({ store }: AppProps): React.ReactNode {
   const isWide = width >= 80;
 
   const canPlaySnake =
+    snapshot.snakeEnabled &&
     snapshot.layout === "workflow" &&
     snapshot.prompt === null &&
     snapshot.outroState === null &&
@@ -240,12 +234,6 @@ function AppBody({ store }: AppProps): React.ReactNode {
   const closeSnake = useCallback(() => setSnakeAlertBaseline(null), []);
   const requestCancel = snapshot.requestCancel;
   const cancelFromSnake = useCallback(() => requestCancel?.(), [requestCancel]);
-  // Mirrors the frame layout: sidebar is 40% plus a 1-col gap; the spinner
-  // row (2) is always reserved so the board keeps its size between steps.
-  const snakeBoard = snakeBoardSize(
-    isWide ? width - Math.round(width * 0.4) - 1 : width,
-    contentHeight - SNAKE_FOOTER_ROWS - 2,
-  );
 
   const tabs = useMemo<FrameTab[]>(
     () => [
@@ -369,16 +357,15 @@ function AppBody({ store }: AppProps): React.ReactNode {
                   {snapshot.spinner.active ? (
                     <SpinnerRow state={snapshot.spinner} />
                   ) : (
+                    // Holds the spinner rows so the board keeps its size between steps.
                     <Box height={2} />
                   )}
                   <SnakeGame
                     accent={ACCENT}
-                    height={snakeBoard.height}
                     muted={MUTED_DIM}
                     onCancel={cancelFromSnake}
                     onExit={closeSnake}
                     session={snakeSession}
-                    width={snakeBoard.width}
                   />
                 </Box>
               ) : activeTab === 0 ? (

packages/cli/src/lib/init/ui/ink-snake.tsx

@@ -1,10 +1,11 @@
-import { Box, Text } from "ink";
-import { useCallback, useEffect, useMemo, useReducer } from "react";
+import { Box, type DOMElement, Text, useBoxMetrics } from "ink";
+import { useCallback, useEffect, useMemo, useReducer, useRef } from "react";
 import { type ShortcutBinding, useInkShortcuts } from "./ink-shortcuts.js";
 import {
   createSnake,
   pauseSnake,
   renderSnake,
+  resizeSnake,
   type SnakeDirection,
   type SnakeState,
   type SnakeStatus,
@@ -32,7 +33,7 @@ const MAX_BOARD_TERMINAL_ROWS = 14;
 const BOARD_CHROME_ROWS = 3;
 
 /** Board size in cells for a pane of `cols` × `rows` terminal cells. */
-export function snakeBoardSize(
+function snakeBoardSize(
   cols: number,
   rows: number,
 ): { width: number; height: number } {
@@ -67,31 +68,50 @@ const STATUS_HINT: Record<SnakeStatus, string> = {
   over: "Game over · r to retry",
 };
 
-export function SnakeGame({
+type SnakeGameProps = {
+  accent: string;
+  muted: string;
+  onCancel: () => void;
+  onExit: () => void;
+  session: SnakeSession;
+};
+
+/** Fills the space it is given and sizes the board from the measured box. */
+export function SnakeGame(props: SnakeGameProps): React.ReactNode {
+  const ref = useRef<DOMElement>(null);
+  const pane = useBoxMetrics(ref);
+  const board = pane.hasMeasured
+    ? snakeBoardSize(pane.width, pane.height)
+    : null;
+  return (
+    <Box
+      flexDirection="column"
+      flexGrow={1}
+      flexShrink={1}
+      minHeight={0}
+      overflow="hidden"
+      ref={ref}
+    >
+      {board ? (
+        <SnakeBoard {...props} height={board.height} width={board.width} />
+      ) : null}
+    </Box>
+  );
+}
+
+function SnakeBoard({
   accent,
   height,
   muted,
   onCancel,
   onExit,
   session,
   width,
-}: {
-  accent: string;
-  height: number;
-  muted: string;
-  onCancel: () => void;
-  onExit: () => void;
-  session: SnakeSession;
-  width: number;
-}): React.ReactNode {
+}: SnakeGameProps & { height: number; width: number }): React.ReactNode {
   const [, redraw] = useReducer((frame: number) => frame + 1, 0);
-  if (
-    !session.state ||
-    session.state.width !== width ||
-    session.state.height !== height
-  ) {
-    session.state = createSnake(width, height);
-  }
+  session.state = session.state
+    ? resizeSnake(session.state, width, height)
+    : createSnake(width, height);
   const state = session.state;
 
   const apply = useCallback(
@@ -175,12 +195,12 @@ export function SnakeGame({
   );
   useInkShortcuts("snake-game", bindings);
 
-  const board = useMemo(() => renderSnake(state).join("\n"), [state]);
+  const frame = useMemo(() => renderSnake(state).join("\n"), [state]);
 
   return (
     <Box flexDirection="column" flexShrink={0}>
       <Box borderColor={muted} borderStyle="round" width={width + 2}>
-        <Text>{board}</Text>
+        <Text>{frame}</Text>
       </Box>
       <Box gap={2} paddingX={1}>
         <Text color={accent}>Bugs squashed {state.score}</Text>

packages/cli/src/lib/init/ui/ink-ui.ts

@@ -57,6 +57,8 @@ import { addBreadcrumb, setTag } from "@sentry/node-core/light";
 import { FULL_BANNER_LINES } from "../../banner.js";
 import { openBrowser } from "../../browser.js";
 import { CLI_VERSION } from "../../constants.js";
+import { detectAgent } from "../../detect-agent.js";
+import { getEnv } from "../../env.js";
 import { stripAnsi } from "../../formatters/plain-detect.js";
 import {
   createWizardPromptTelemetry,
@@ -326,6 +328,7 @@ export async function createInkUI(
     // Seed with the full banner; IntroScreen re-fits it to the live terminal
     // width on every render (shrinking or growing) so it never wraps.
     bannerRows: FULL_BANNER_LINES,
+    snakeEnabled: isSnakeEnabled(),
   });
   const initialWelcome = opts.initialWelcome
     ? createPendingWelcome()
@@ -378,6 +381,11 @@ export async function createInkUI(
   }
 }
 
+/** Exported for the test suite. */
+export function isSnakeEnabled(): boolean {
+  return getEnv().SENTRY_INIT_GAME !== "0" && !detectAgent();
+}
+
 /**
  * Subset of the Ink `Instance` type we actually use.
  *

packages/cli/src/lib/init/ui/snake-game.ts

@@ -147,6 +147,51 @@ export function stepSnake(
   return food ? { ...grown, food } : { ...grown, food, status: "over" };
 }
 
+/**
+ * Fit a run to a new board size. The snake keeps its shape and moves only
+ * as far as it must to stay on the board. A playing run pauses so the new
+ * walls do not end it by surprise. A snake too long for the board starts over.
+ */
+export function resizeSnake(
+  state: SnakeState,
+  width: number,
+  height: number,
+  random: RandomSource = Math.random,
+): SnakeState {
+  if (state.width === width && state.height === height) {
+    return state;
+  }
+  const xs = state.body.map((part) => part.x);
+  const ys = state.body.map((part) => part.y);
+  const minX = Math.min(...xs);
+  const minY = Math.min(...ys);
+  const maxX = Math.max(...xs);
+  const maxY = Math.max(...ys);
+  if (maxX - minX >= width || maxY - minY >= height) {
+    return createSnake(width, height, random);
+  }
+  const dx = Math.min(0, width - 1 - maxX);
+  const dy = Math.min(0, height - 1 - maxY);
+  const shift = (point: SnakePoint): SnakePoint => ({
+    x: point.x + dx,
+    y: point.y + dy,
+  });
+  const resized: SnakeState = {
+    ...pauseSnake(state),
+    width,
+    height,
+    body: state.body.map(shift),
+  };
+  const food = state.food ? shift(state.food) : null;
+  if (food && food.x >= 0 && food.y >= 0 && food.x < width && food.y < height) {
+    return { ...resized, food };
+  }
+  const placed = placeFood(resized, random);
+  return placed
+    ? { ...resized, food: placed }
+    : { ...resized, food: null, status: "over" };
+}
+
 function placeFood(state: SnakeState, random: RandomSource): SnakePoint | null {
   const occupied = new Set(state.body.map((part) => pointKey(part)));
   const free = state.width * state.height - occupied.size;

packages/cli/src/lib/init/ui/wizard-store.ts

@@ -204,6 +204,8 @@ export type WizardSnapshot = {
   prompt: ActivePrompt | null;
   /** Index of the currently-displayed Sentry tip in the sidebar. */
   tipIndex: number;
+  /** Offer the waiting-screen Snake game. Off for agents and `SENTRY_INIT_GAME=0`. */
+  snakeEnabled: boolean;
   /** Final structured summary, rendered after the workflow completes. */
   summary: WizardSummary | null;
   /**
@@ -281,6 +283,7 @@ function baseSnapshot(): WizardSnapshot {
     spinner: { active: false, frame: 0, message: "" },
     prompt: null,
     tipIndex: 0,
+    snakeEnabled: false,
     summary: null,
     filesRead: [],
     steps: defaultChecklistSteps(),

packages/cli/test/lib/init/ui/ink-app.snapshot.test.tsx

@@ -1392,9 +1392,18 @@ describe("snake waiting game", () => {
     return stripAnsi(out.latestFrame());
   }
 
-  test("a new warning pauses the game and shows the activity log", async () => {
+  test("stays hidden when the game is disabled", async () => {
     const store = new WizardStore();
-    store.setLayout("workflow");
+    store.startSpinner("Verifying setup...");
+    const out = await renderApp(store, 110, { rows: 32, input: ["g"] });
+    const frame = stripAnsi(out.latestFrame());
+    expect(frame).toContain("Verifying setup...");
+    expect(frame).not.toContain("Snake");
+    expect(frame).not.toContain("Bugs squashed");
+  });
+
+  test("a new warning pauses the game and shows the activity log", async () => {
+    const store = new WizardStore({ snakeEnabled: true });
     store.startSpinner("Verifying setup...");
     const out = new CaptureStream(110, 32);
     const stdin = makeStdin();

packages/cli/test/lib/init/ui/ink-ui-snake.test.ts

@@ -0,0 +1,17 @@
+import { describe, expect, test } from "vitest";
+import { withEnv } from "../../../../src/lib/env.js";
+import { isSnakeEnabled } from "../../../../src/lib/init/ui/ink-ui.js";
+
+describe("isSnakeEnabled", () => {
+  test("offers the game to a person at a terminal", () => {
+    expect(withEnv({}, isSnakeEnabled)).toBe(true);
+  });
+
+  test("SENTRY_INIT_GAME=0 turns the game off", () => {
+    expect(withEnv({ SENTRY_INIT_GAME: "0" }, isSnakeEnabled)).toBe(false);
+  });
+
+  test("hides the game when an AI agent runs the CLI", () => {
+    expect(withEnv({ AI_AGENT: "claude-code" }, isSnakeEnabled)).toBe(false);
+  });
+});

packages/cli/test/lib/init/ui/snake-game.test.ts

@@ -4,6 +4,7 @@ import {
   createSnake,
   pauseSnake,
   renderSnake,
+  resizeSnake,
   type SnakeState,
   snakeTerminalRows,
   stepSnake,
@@ -117,3 +118,51 @@ describe("renderSnake", () => {
     expect(stripAnsi(renderSnake(state)[0] ?? "")).toBe("▀ ▄");
   });
 });
+
+describe("resizeSnake", () => {
+  const snake = playing({
+    body: [
+      { x: 8, y: 4 },
+      { x: 7, y: 4 },
+      { x: 6, y: 4 },
+    ],
+    food: { x: 9, y: 5 },
+    score: 4,
+  });
+
+  test("keeps the run on a larger board and pauses it", () => {
+    const resized = resizeSnake(snake, 20, 10, firstFreeCell);
+    expect(resized).toMatchObject({
+      width: 20,
+      height: 10,
+      body: snake.body,
+      food: snake.food,
+      score: 4,
+      status: "paused",
+    });
+  });
+
+  test("shifts the snake inside a smaller board", () => {
+    const resized = resizeSnake(snake, 6, 4, firstFreeCell);
+    expect(resized.body).toEqual([
+      { x: 5, y: 3 },
+      { x: 4, y: 3 },
+      { x: 3, y: 3 },
+    ]);
+    expect(resized.score).toBe(4);
+    expect(resized.food).not.toBeNull();
+    const food = resized.food as { x: number; y: number };
+    expect(food.x).toBeLessThan(6);
+    expect(food.y).toBeLessThan(4);
+  });
+
+  test("starts over when the snake no longer fits", () => {
+    const resized = resizeSnake(snake, 2, 4, firstFreeCell);
+    expect(resized.score).toBe(0);
+    expect(resized.status).toBe("ready");
+  });
+
+  test("returns the same state when the size does not change", () => {
+    expect(resizeSnake(snake, snake.width, snake.height)).toBe(snake);
+  });
+});