fix(init): fix LearnCard height and tighten content

All content blocks now have exactly 8 lines (padded with empty
strings) so the panel height stays fixed when blocks rotate.
Rewrote content to be more concise and consistent — each block
fits cleanly in the ~36-col sidebar. Moved the block counter
(1/6) to the title row header to save a line.

Author: getsentry-bot

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

@@ -40,7 +40,7 @@ import {
   type FileTreeRow,
   flattenTree,
 } from "./file-tree.js";
-import { LEARN_SEQUENCE } from "./learn-content.js";
+import { BLOCK_LINE_COUNT, LEARN_SEQUENCE } from "./learn-content.js";
 import { SENTRY_TIPS, type SentryTip } from "./sentry-tips.js";
 import type { WizardSummary } from "./types.js";
 import type {
@@ -680,7 +680,9 @@ function LearnPanel({
   if (!block) {
     return null;
   }
-  const visibleLines = block.lines;
+  // Pad short blocks to BLOCK_LINE_COUNT so height stays fixed.
+  const lines = block.lines.slice(0, BLOCK_LINE_COUNT);
+  const padding = Math.max(0, BLOCK_LINE_COUNT - lines.length);
   return (
     <Box
       borderColor={MUTED_DIM}
@@ -689,22 +691,23 @@ function LearnPanel({
       flexShrink={0}
       paddingX={1}
     >
-      <Text bold color={ACCENT}>
-        {block.title}
-      </Text>
-      <Box height={1} />
-      {visibleLines.map((line, i) => (
-        // biome-ignore lint/suspicious/noArrayIndexKey: positional content lines
-        <Text key={i} wrap="wrap">
-          {line || " "}
+      <Box justifyContent="space-between">
+        <Text bold color={ACCENT}>
+          {block.title}
         </Text>
-      ))}
-      <Box height={1} />
-      <Box justifyContent="flex-end">
         <Text color={MUTED_DIM}>
           {learnState.blockIndex + 1}/{LEARN_SEQUENCE.length}
         </Text>
       </Box>
+      <Box height={1} />
+      {lines.map((line, i) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: positional content lines
+        <Text key={i}>{line || " "}</Text>
+      ))}
+      {Array.from({ length: padding }, (_, i) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: positional filler
+        <Text key={`p${i}`}> </Text>
+      ))}
     </Box>
   );
 }

src/lib/init/ui/learn-content.ts

@@ -1,102 +1,100 @@
 /**
  * Educational Content Sequence
  *
- * Content blocks shown in the sidebar while the wizard runs. Each
- * block reveals line by line on a timer, transforming dead wait time
- * into product education. After all blocks complete, the panel falls
- * back to the rotating tip cards.
+ * Content blocks shown in the sidebar while the wizard runs,
+ * transforming dead wait time into product education. After all
+ * blocks complete, the panel falls back to rotating tip cards.
+ *
+ * All blocks MUST have exactly `BLOCK_LINE_COUNT` content lines
+ * (pad with empty strings) so the panel height stays fixed and
+ * doesn't jump when blocks rotate.
  */
 
 export type ContentBlock = {
   title: string;
   lines: string[];
-  /** Dwell time (ms) after all lines are revealed before advancing. */
-  pauseMs: number;
 };
 
+/** Fixed line count per block — keeps panel height stable. */
+export const BLOCK_LINE_COUNT = 8;
+
 export const LEARN_SEQUENCE: ContentBlock[] = [
   {
     title: "How Sentry Works",
     lines: [
-      "Your App  →  SDK  →  Sentry",
+      "App → SDK → Sentry → Alert",
+      "",
+      "The SDK captures errors and",
+      "performance data, then sends",
+      "them to Sentry for grouping,",
+      "alerting, and root-cause",
+      "analysis.",
       "",
-      "The SDK captures errors, traces,",
-      "and performance data from your",
-      "running application and sends",
-      "them to Sentry for analysis.",
     ],
-    pauseMs: 4000,
   },
   {
     title: "Error Tracking",
     lines: [
       "Every crash is captured with:",
-      "  • Stack trace",
-      "  • Breadcrumbs (user actions)",
-      "  • Device/browser context",
+      "",
+      "  • Full stack trace",
+      "  • Breadcrumbs & context",
       "  • Release & commit info",
       "",
       "Errors are grouped into issues",
-      "so you fix root causes, not",
-      "individual reports.",
+      "so you fix causes, not symptoms.",
     ],
-    pauseMs: 4000,
   },
   {
-    title: "Performance Monitoring",
+    title: "Performance Tracing",
     lines: [
       "Traces show the full journey:",
       "",
-      "  Request ─┬─ DB Query (120ms)",
-      "           ├─ API Call (340ms)",
-      "           └─ Render  (80ms)",
+      "  Request ─┬─ DB    (120ms)",
+      "           ├─ API   (340ms)",
+      "           └─ Render (80ms)",
       "",
       "Find the slow piece without",
       "adding manual timers.",
     ],
-    pauseMs: 4000,
   },
   {
     title: "Session Replay",
     lines: [
-      "See exactly what the user saw:",
-      "  DOM mutations, clicks,",
-      "  network calls, and console",
-      "  logs — all synced with your",
-      "  error timeline.",
+      "See what the user saw: DOM",
+      "mutations, clicks, network",
+      "calls, and console logs —",
+      "all synced to the error.",
       "",
       "Debug by scrubbing a video,",
-      "not guessing from a stack trace.",
+      "not reading a stack trace.",
+      "",
     ],
-    pauseMs: 4000,
   },
   {
     title: "Alerts & Integrations",
     lines: [
       "Get notified when it matters:",
-      "  • Spike in error frequency",
-      "  • New issue after deploy",
+      "",
+      "  • Error spike after deploy",
       "  • Slow transaction p95",
+      "  • New regression detected",
       "",
       "Routes to Slack, PagerDuty,",
-      "Jira, or email automatically.",
+      "or email automatically.",
     ],
-    pauseMs: 4000,
   },
   {
     title: "What's Next?",
     lines: [
-      "After this wizard finishes:",
-      "",
-      "  sentry issue list",
-      "    → see your first errors",
-      "",
-      "  sentry issue explain <id>",
-      "    → AI root-cause analysis",
+      "After setup finishes, try:",
       "",
-      "  sentry trace list",
-      "    → explore performance data",
+      " sentry issue list",
+      "   → see your first errors",
+      " sentry issue explain <id>",
+      "   → AI root-cause analysis",
+      " sentry trace list",
+      "   → explore performance",
     ],
-    pauseMs: 5000,
   },
 ];