Method render

app/src/utils/tutorialStreamCapture.ts:95–142

(ctx: CanvasRenderingContext2D)

  }

  private render(ctx: CanvasRenderingContext2D): void {
    // No live stream or clock yet (e.g. a preview still) means the bar hasn't started: hold at 0%.
    const elapsed = this.stream && this.clockStarted ? performance.now() - this.startedAt : 0;
    const finished = elapsed >= FILL_MS;
    const pct = finished ? 100 : Math.round((elapsed / FILL_MS) * 100);

    // Backdrop — a plain "app window" look, not the Observer brand, so it reads as
    // "some other app on your screen" rather than part of Observer's own UI.
    ctx.fillStyle = '#1e2129';
    ctx.fillRect(0, 0, WIDTH, HEIGHT);

    ctx.fillStyle = '#2a2e38';
    ctx.fillRect(0, 0, WIDTH, 48);
    ctx.fillStyle = '#e94b3c';
    ctx.beginPath(); ctx.arc(24, 24, 7, 0, Math.PI * 2); ctx.fill();
    ctx.fillStyle = '#f1c40f';
    ctx.beginPath(); ctx.arc(48, 24, 7, 0, Math.PI * 2); ctx.fill();
    ctx.fillStyle = '#2ecc71';
    ctx.beginPath(); ctx.arc(72, 24, 7, 0, Math.PI * 2); ctx.fill();

    ctx.fillStyle = '#8b92a3';
    ctx.font = '600 15px -apple-system, BlinkMacSystemFont, sans-serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('Downloader.app', WIDTH / 2, 24);

    // Label
    ctx.fillStyle = '#e5e7eb';
    ctx.font = '600 26px -apple-system, BlinkMacSystemFont, sans-serif';
    ctx.fillText(finished ? 'Download complete' : 'A reaaaally long progress bar', WIDTH / 2, HEIGHT / 2 - 60);

    // Progress bar track
    const barW = 640, barH = 28, barX = (WIDTH - barW) / 2, barY = HEIGHT / 2 - 14;
    ctx.fillStyle = '#333844';
    this.roundRect(ctx, barX, barY, barW, barH, 14);
    ctx.fill();

    // Progress bar fill
    const fillW = Math.max(barH, (pct / 100) * barW);
    ctx.fillStyle = finished ? '#2ecc71' : '#6366f1';
    this.roundRect(ctx, barX, barY, fillW, barH, 14);
    ctx.fill();

    // Percentage
    ctx.fillStyle = '#e5e7eb';
    ctx.font = '600 20px -apple-system, BlinkMacSystemFont, sans-serif';
    ctx.fillText(`${pct}%`, WIDTH / 2, barY + barH + 40);
  }

  private roundRect(ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, r: number): void {
    const radius = Math.min(r, h / 2, w / 2);