docs(quickstart): add install, onboard, and investigation demo GIFs

[amsorrytola]

Fixes #2658

Describe the changes you have made in this PR -

Adds short terminal GIF demonstrations after the first three Quickstart steps, as requested in #2658, so new users can see the expected workflow and a successful run of each step — now with both macOS/Linux and Windows demos:

• Install OpenSRE — the installer running through to a successful install banner (curl … | bash for macOS/Linux, irm … | iex for Windows).
• Onboard — the opensre onboard wizard configuring an LLM provider (API key entry masked) and an integration, through to the ✓ Done summary.
• Run an investigation — a one-shot opensre investigate on the bundled sample alert, producing a structured root-cause report (findings, recommended actions, cited evidence).

Structure: the Install step keeps its per-OS command tabs and now has a GIF in each. Onboard and Investigate wrap their GIFs in macOS / Linux + Windows tabs (the commands are identical across platforms). All GIFs use the existing <Frame> component, with assets under docs/images/. No docs.json change is needed since quickstart is already a registered page.

How the GIFs were produced

• macOS/Linux: recorded with asciinema, rendered with agg.
• Windows: screen-recorded on PowerShell, rendered to GIF with ffmpeg (cropped + palette-optimized).
• All files kept small (≈50 KB–600 KB each); idle pauses trimmed for readability.
• Security: API keys are masked by the onboarding wizard; every recording was checked to confirm no plaintext key/secret appears.

Demo/Screenshot for feature changes and bug fixes -

📹 Walkthrough of the final rendered docs page: https://vimeo.com/1196780409

macOS / Linux

1. Install

2. Onboard

3. Run an investigation

Windows (PowerShell)

1. Install

2. Onboard

3. Run an investigation

---

Code Understanding and AI Usage

Did you use AI assistance (ChatGPT, Claude, Copilot, etc.) to write any part of this code?

• No, I wrote all the code myself
• Yes, I used AI assistance (continue below)

If you used AI assistance:

• I have reviewed every single line of the AI-generated code
• I can explain the purpose and logic of each function/component I added
• I have tested edge cases and understand how the code handles them
• I have modified the AI output to follow this project's coding standards and conventions

Explain your implementation approach:

The change is documentation-only: <Frame>-wrapped GIFs added to docs/quickstart.mdx, one (or a macOS-Linux/Windows tab pair) per step. macOS/Linux sessions were recorded with asciinema and converted with agg; Windows sessions were screen-recorded on PowerShell and converted with ffmpeg (crop + palette). I used <Frame> + /images/... because that is the established pattern across the existing docs pages, and kept the files small so they're comfortable to commit. The Install step uses per-OS tabs because the command differs; Onboard and Investigate share one command, so only their GIFs are tabbed by OS.

---

Checklist before requesting a review

• I have added proper PR title and linked to the issue
• I have performed a self-review of my code
• I can explain the purpose of every function, class, and logic block I added
• I understand why my changes work and have tested them thoroughly
• I have considered potential edge cases and how my code handles them
• If it is a core feature, I have added thorough tests
• My code follows the project's style guidelines and conventions

---

Note: Allow edits from maintainers is enabled.

[github-actions]

Greptile code review

This repo uses Greptile for automated review. Before merge, aim for Confidence Score: 5/5 with zero unresolved review threads — see CONTRIBUTING.md.

Run a review — add a PR comment with:

@greptile review

Give it ~5-10 minutes (sometimes longer) for results, then fix feedback and re-trigger until you reach Confidence Score: 5/5.

Optional: automate with the greploop skill.

[greptile-apps]

Greptile Summary

This PR adds three terminal GIF demos to docs/quickstart.mdx — one after each of the Install, Onboard, and Run an investigation steps — so new users can see a successful run of each step before proceeding.

• Three GIF assets (quickstart-install.gif, quickstart-onboard.gif, quickstart-investigate.gif) are added to docs/images/ and embedded via the existing <Frame> component pattern, consistent with other docs pages like datadog.mdx.
• The only minor inconsistency is that the image markdown inside each new <Frame> block is not indented (the project convention, seen in datadog.mdx, indents it by two spaces); one-line suggestions are included to fix all three occurrences.

Confidence Score: 4/5

Documentation-only change adding three GIF assets and their Frame embeds — no logic, no config, and no breaking changes.

All changes are confined to a docs page and binary image assets. The GIF files are correctly placed in docs/images/ and referenced with valid relative paths. The only finding is a cosmetic indentation mismatch inside Frame tags compared to the style used elsewhere in the docs.

No files require special attention.

Important Files Changed

Filename	Overview
docs/quickstart.mdx	Adds three Frame-wrapped GIF embeds after the Install, Onboard, and Run an investigation steps; follows the existing Frame component pattern with a minor indentation inconsistency inside the tags.
docs/images/quickstart-install.gif	New binary asset (~50 KB GIF) for the Install step demo; correctly placed in the docs/images/ directory.
docs/images/quickstart-onboard.gif	New binary asset (~158 KB GIF) for the Onboard step demo; correctly placed in the docs/images/ directory.
docs/images/quickstart-investigate.gif	New binary asset (~583 KB GIF) for the Run an investigation step demo; correctly placed in the docs/images/ directory.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[quickstart.mdx] --> B[Step 1: Install OpenSRE]
    A --> C[Step 2: Onboard]
    A --> D[Step 3: Run an investigation]
    A --> E[Step 4: Keep up to date]
    B --> B1[Frame: quickstart-install.gif NEW]
    C --> C1[Frame: quickstart-onboard.gif NEW]
    D --> D1[Frame: quickstart-investigate.gif NEW]
    B1 --> F[docs/images/]
    C1 --> F
    D1 --> F

Loading

_{Reviews (1): Last reviewed commit: "docs(quickstart): add investigation step..." | Re-trigger Greptile}

[Devesh36]

LG