github-actions · Oct 17, 2026
diff --git a/workshop/16-connect-data-source.md b/workshop/16-connect-data-source.md
@@ -6,7 +6,7 @@
 
 ## :dart: What You'll Do
 
-You'll extend your daily-status workflow to fetch open issues from your repository using the [GitHub CLI](side-quest-01-02-environment-reference.md#github-cli-gh), then inject that data into your AI prompt. By the end, your summary will include an overview of outstanding issues alongside the commit activity.
+You'll extend your daily-status workflow to fetch open issues from your repository using the [GitHub CLI](side-quest-01-04-environment-visuals.md#github-cli-gh), then inject that data into your AI prompt. By the end, your summary will include an overview of outstanding issues alongside the commit activity.
 
 ## :clipboard: Before You Start
 

diff --git a/workshop/README.md b/workshop/README.md
@@ -50,6 +50,7 @@ A hands-on workshop that takes you from zero to a fully automated, AI-powered wo
 - [Set Up Your Local Terminal](side-quest-02-01-local-terminal.md) — optional alternative for experienced terminal users who want to work on their own machine instead of in the recommended Codespace.
 - [Enterprise Setup Considerations](side-quest-enterprise-setup.md) — required reading for GHES users and useful for any managed enterprise environment; common return points include [Step 1](01-prerequisites.md), [Step 2](02a-setup-codespace.md), the [Local Terminal side quest](side-quest-02-01-local-terminal.md), and [Step 5](05-agentic-workflows-intro.md).
 - [Environment Reference](side-quest-01-02-environment-reference.md) — glossary of workshop environments and tool terms with official docs links; branches from [Step 1](01-prerequisites.md).
+- [Environment Visuals](side-quest-01-04-environment-visuals.md) — simplified pictures of each workshop environment and tool; branches from [Step 1](01-prerequisites.md).
 - [Permission Errors](side-quest-01-03-permission-errors.md) — troubleshooting guide for `permission denied` errors encountered during terminal-based steps; branches from [Step 1](01-prerequisites.md).
 - [Install `gh-aw` Troubleshooting](side-quest-06-01-install-troubleshooting.md) — optional install troubleshooting reference that branches from [Step 6](06-install-gh-aw.md).
 - [Use `gh-aw` with the GitHub Copilot Cloud Agent](side-quest-06-02-cca-codespace.md) — how to open a terminal inside the Copilot Cloud Agent Codespace so `gh-aw` CLI commands work; branches from [Step 6](06-install-gh-aw.md).

diff --git a/workshop/side-quest-01-02-environment-reference.md b/workshop/side-quest-01-02-environment-reference.md
@@ -51,105 +51,7 @@ After you complete Step 6, also run:
 gh aw --version
 ```
 
-## Conceptual screenshots
-
-Recognizing what each environment looks like on screen helps you orient yourself quickly when workshop instructions say "open a terminal" or "use the Copilot app."
-
-These visuals are simplified mental models, not literal product screenshots. Use them to recognize what each name refers to when it appears in later steps.
-
-### Development environments
-
-#### GitHub Codespaces
-
-<picture>
-  <source media="(prefers-color-scheme: dark)" srcset="images/side-quest-01-02-github-codespaces-dark.svg">
-  <source media="(prefers-color-scheme: light)" srcset="images/side-quest-01-02-github-codespaces-light.svg">
-  <img alt="Conceptual screenshot of GitHub Codespaces showing a browser-based editor, repository explorer, and integrated terminal" src="images/side-quest-01-02-github-codespaces-light.svg">
-</picture>
-
-You use Codespaces when you want a ready-to-go development environment in your browser.
-
-#### Visual Studio Code (VS Code)
-
-<picture>
-  <source media="(prefers-color-scheme: dark)" srcset="images/side-quest-01-02-vscode-dark.svg">
-  <source media="(prefers-color-scheme: light)" srcset="images/side-quest-01-02-vscode-light.svg">
-  <img alt="Conceptual screenshot of Visual Studio Code showing the Explorer, open editor tabs, and integrated terminal" src="images/side-quest-01-02-vscode-light.svg">
-</picture>
-
-You use VS Code to browse files, edit workflows, and keep a terminal open beside your work.
-
-#### Terminal (command line)
-
-<picture>
-  <source media="(prefers-color-scheme: dark)" srcset="images/side-quest-01-02-terminal-dark.svg">
-  <source media="(prefers-color-scheme: light)" srcset="images/side-quest-01-02-terminal-light.svg">
-  <img alt="Conceptual screenshot of a terminal showing a prompt, commands, and command output" src="images/side-quest-01-02-terminal-light.svg">
-</picture>
-
-You use the terminal whenever the workshop asks you to run `gh`, `gh aw`, or `git` commands.
-
-### Workshop tools and model options
-
-#### GitHub CLI (`gh`)
-
-<picture>
-  <source media="(prefers-color-scheme: dark)" srcset="images/side-quest-01-02-gh-cli-dark.svg">
-  <source media="(prefers-color-scheme: light)" srcset="images/side-quest-01-02-gh-cli-light.svg">
-  <img alt="Conceptual screenshot of GitHub CLI showing authentication, repository, and workflow commands in a terminal" src="images/side-quest-01-02-gh-cli-light.svg">
-</picture>
-
-You use `gh` for GitHub-specific terminal tasks like authentication checks, repository shortcuts, and workflow commands.
-
-#### `gh-aw` CLI extension
-
-<picture>
-   <source media="(prefers-color-scheme: dark)" srcset="images/side-quest-01-02-gh-aw-dark.svg">
-   <source media="(prefers-color-scheme: light)" srcset="images/side-quest-01-02-gh-aw-light.svg">
-   <img alt="Conceptual screenshot of the gh-aw CLI extension showing compile commands for an agentic workflow" src="images/side-quest-01-02-gh-aw-light.svg">
-</picture>
-
-You use `gh aw` to compile agentic workflow files.
-
-#### GitHub Copilot CLI
-
-<picture>
-  <source media="(prefers-color-scheme: dark)" srcset="images/side-quest-01-02-copilot-cli-dark.svg">
-  <source media="(prefers-color-scheme: light)" srcset="images/side-quest-01-02-copilot-cli-light.svg">
-  <img alt="Conceptual screenshot of GitHub Copilot CLI showing a terminal prompt alongside AI-assisted command help" src="images/side-quest-01-02-copilot-cli-light.svg">
-</picture>
-
-You use GitHub Copilot CLI when you want AI help inside the terminal.
-
-#### GitHub Copilot app
-
-<picture>
-  <source media="(prefers-color-scheme: dark)" srcset="images/side-quest-01-02-copilot-app-dark.svg">
-  <source media="(prefers-color-scheme: light)" srcset="images/side-quest-01-02-copilot-app-light.svg">
-  <img alt="Conceptual screenshot of the GitHub Copilot app showing a repository session, agent chat, and pull request view" src="images/side-quest-01-02-copilot-app-light.svg">
-</picture>
-
-You use the GitHub Copilot app when you want to start and steer repository sessions, manage coding tasks, and review pull requests from a Copilot workspace.
-
-#### Claude
-
-<picture>
-  <source media="(prefers-color-scheme: dark)" srcset="images/side-quest-01-02-claude-dark.svg">
-  <source media="(prefers-color-scheme: light)" srcset="images/side-quest-01-02-claude-light.svg">
-  <img alt="Conceptual screenshot of a Claude-style workspace showing a prompt, reasoning path, and structured response" src="images/side-quest-01-02-claude-light.svg">
-</picture>
-
-You may see Claude as one of the AI model options that can read a brief, reason through a task, and produce an output.
-
-#### OpenAI Codex
-
-<picture>
-  <source media="(prefers-color-scheme: dark)" srcset="images/side-quest-01-02-openai-codex-dark.svg">
-  <source media="(prefers-color-scheme: light)" srcset="images/side-quest-01-02-openai-codex-light.svg">
-  <img alt="Conceptual screenshot of an OpenAI Codex-style coding workspace showing repository files and a suggested patch" src="images/side-quest-01-02-openai-codex-light.svg">
-</picture>
-
-You may see OpenAI Codex as a coding-focused model option that reads files and suggests edits.
+Want to see what each tool looks like? Open [Environment Visuals](side-quest-01-04-environment-visuals.md).
 
 <!-- journey: all -->
 ## :white_check_mark: Checkpoint
@@ -158,7 +60,6 @@ You may see OpenAI Codex as a coding-focused model option that reads files and s
 - [ ] You ran `gh --version` in your terminal and it returned a version number
 - [ ] You ran `git --version` in your terminal and it returned a version number
 - [ ] If you've completed [Install the `gh-aw` CLI Extension](06-install-gh-aw.md): you ran `gh aw --version` and it returned a version number
-- [ ] You can match each item to its conceptual screenshot
 - [ ] You know where to find official docs for each tool
 - [ ] (Enterprise users) You know which URLs in workshop instructions map to your enterprise hostname
 

diff --git a/workshop/side-quest-01-04-environment-visuals.md b/workshop/side-quest-01-04-environment-visuals.md
@@ -0,0 +1,116 @@
+<!-- page-journey: all -->
+<!-- page-adventure: side-quest -->
+# Side Quest: Environment Visuals
+
+> _Optional: see simplified pictures of each environment and tool used in the workshop._
+
+**What you'll learn:** By the end of this page you can recognize each workshop environment and tool on screen. For definitions and a tool check, see [Environment Reference](side-quest-01-02-environment-reference.md).
+
+## Conceptual screenshots
+
+Recognizing what each environment looks like on screen helps you orient yourself quickly when workshop instructions say "open a terminal" or "use the Copilot app."
+
+These visuals are simplified mental models, not literal product screenshots. Use them to recognize what each name refers to when it appears in later steps.
+
+### Development environments
+
+#### GitHub Codespaces
+
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="images/side-quest-01-02-github-codespaces-dark.svg">
+  <source media="(prefers-color-scheme: light)" srcset="images/side-quest-01-02-github-codespaces-light.svg">
+  <img alt="Conceptual screenshot of GitHub Codespaces showing a browser-based editor, repository explorer, and integrated terminal" src="images/side-quest-01-02-github-codespaces-light.svg">
+</picture>
+
+You use Codespaces when you want a ready-to-go development environment in your browser.
+
+#### Visual Studio Code (VS Code)
+
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="images/side-quest-01-02-vscode-dark.svg">
+  <source media="(prefers-color-scheme: light)" srcset="images/side-quest-01-02-vscode-light.svg">
+  <img alt="Conceptual screenshot of Visual Studio Code showing the Explorer, open editor tabs, and integrated terminal" src="images/side-quest-01-02-vscode-light.svg">
+</picture>
+
+You use VS Code to browse files, edit workflows, and keep a terminal open beside your work.
+
+#### Terminal (command line)
+
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="images/side-quest-01-02-terminal-dark.svg">
+  <source media="(prefers-color-scheme: light)" srcset="images/side-quest-01-02-terminal-light.svg">
+  <img alt="Conceptual screenshot of a terminal showing a prompt, commands, and command output" src="images/side-quest-01-02-terminal-light.svg">
+</picture>
+
+You use the terminal whenever the workshop asks you to run `gh`, `gh aw`, or `git` commands.
+
+### Workshop tools and model options
+
+#### GitHub CLI (`gh`)
+
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="images/side-quest-01-02-gh-cli-dark.svg">
+  <source media="(prefers-color-scheme: light)" srcset="images/side-quest-01-02-gh-cli-light.svg">
+  <img alt="Conceptual screenshot of GitHub CLI showing authentication, repository, and workflow commands in a terminal" src="images/side-quest-01-02-gh-cli-light.svg">
+</picture>
+
+You use `gh` for GitHub-specific terminal tasks like authentication checks, repository shortcuts, and workflow commands.
+
+#### `gh-aw` CLI extension
+
+<picture>
+   <source media="(prefers-color-scheme: dark)" srcset="images/side-quest-01-02-gh-aw-dark.svg">
+   <source media="(prefers-color-scheme: light)" srcset="images/side-quest-01-02-gh-aw-light.svg">
+   <img alt="Conceptual screenshot of the gh-aw CLI extension showing compile commands for an agentic workflow" src="images/side-quest-01-02-gh-aw-light.svg">
+</picture>
+
+You use `gh aw` to compile agentic workflow files.
+
+#### GitHub Copilot CLI
+
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="images/side-quest-01-02-copilot-cli-dark.svg">
+  <source media="(prefers-color-scheme: light)" srcset="images/side-quest-01-02-copilot-cli-light.svg">
+  <img alt="Conceptual screenshot of GitHub Copilot CLI showing a terminal prompt alongside AI-assisted command help" src="images/side-quest-01-02-copilot-cli-light.svg">
+</picture>
+
+You use GitHub Copilot CLI when you want AI help inside the terminal.
+
+#### GitHub Copilot app
+
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="images/side-quest-01-02-copilot-app-dark.svg">
+  <source media="(prefers-color-scheme: light)" srcset="images/side-quest-01-02-copilot-app-light.svg">
+  <img alt="Conceptual screenshot of the GitHub Copilot app showing a repository session, agent chat, and pull request view" src="images/side-quest-01-02-copilot-app-light.svg">
+</picture>
+
+You use the GitHub Copilot app when you want to start and steer repository sessions, manage coding tasks, and review pull requests from a Copilot workspace.
+
+#### Claude
+
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="images/side-quest-01-02-claude-dark.svg">
+  <source media="(prefers-color-scheme: light)" srcset="images/side-quest-01-02-claude-light.svg">
+  <img alt="Conceptual screenshot of a Claude-style workspace showing a prompt, reasoning path, and structured response" src="images/side-quest-01-02-claude-light.svg">
+</picture>
+
+You may see Claude as one of the AI model options that can read a brief, reason through a task, and produce an output.
+
+#### OpenAI Codex
+
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="images/side-quest-01-02-openai-codex-dark.svg">
+  <source media="(prefers-color-scheme: light)" srcset="images/side-quest-01-02-openai-codex-light.svg">
+  <img alt="Conceptual screenshot of an OpenAI Codex-style coding workspace showing repository files and a suggested patch" src="images/side-quest-01-02-openai-codex-light.svg">
+</picture>
+
+You may see OpenAI Codex as a coding-focused model option that reads files and suggests edits.
+
+<!-- journey: all -->
+## :white_check_mark: Checkpoint
+
+- [ ] You can match each tool to its conceptual screenshot
+- [ ] You can tell the terminal, VS Code, and Codespaces apart on screen
+
+When you're done here, return to the [Environment Reference](side-quest-01-02-environment-reference.md) or [What You Need Before We Start](01-prerequisites.md).
+<!-- /journey -->
diff --git a/workshop/side-quest-06-04-install-local.md b/workshop/side-quest-06-04-install-local.md
@@ -33,7 +33,7 @@ gh aw --version
 ```
 
 - **Version shown?** Update the extension: `gh extension upgrade github/gh-aw`
-- **Command not found?** Install the extension (open your terminal — in [VS Code](side-quest-01-02-environment-reference.md#visual-studio-code-vs-code) use `` Ctrl+` `` / `` Cmd+` ``):
+- **Command not found?** Install the extension (open your terminal — in [VS Code](side-quest-01-04-environment-visuals.md#visual-studio-code-vs-code) use `` Ctrl+` `` / `` Cmd+` ``):
 
 ```bash
 gh extension install github/gh-aw

diff --git a/workshop/side-quest-11-06-anthropic-key.md b/workshop/side-quest-11-06-anthropic-key.md
@@ -2,7 +2,7 @@
 <!-- page-adventure: side-quest -->
 # Side Quest: Configure an Anthropic API Key
 
-> _Optional: work through this guide when you want to use [Claude](side-quest-01-02-environment-reference.md#claude) (Anthropic's model family) as the AI engine for your [agentic workflow](https://github.github.com/gh-aw/introduction/overview/), then return to your main path._
+> _Optional: work through this guide when you want to use [Claude](side-quest-01-04-environment-visuals.md#claude) (Anthropic's model family) as the AI engine for your [agentic workflow](https://github.github.com/gh-aw/introduction/overview/), then return to your main path._
 
 By default, [agentic workflows](https://github.github.com/gh-aw/introduction/overview/) run on the [GitHub Copilot engine](https://github.github.com/gh-aw/reference/engines/). If you prefer to use **[Claude](https://github.github.com/gh-aw/reference/auth/#claude)**, you'll need an Anthropic API key stored as a repository secret and a one-line change to your [workflow frontmatter](https://github.github.com/gh-aw/reference/frontmatter/).
 

diff --git a/workshop/side-quest-11-07-openai-key.md b/workshop/side-quest-11-07-openai-key.md
@@ -13,7 +13,7 @@ By default, [agentic workflows](https://github.github.com/gh-aw/introduction/ove
 - You have an OpenAI account or access to an OpenAI API key from your organization.
 
 > [!NOTE]
-> In `gh-aw`, `codex` is the engine identifier for OpenAI-powered execution. It does not refer to the discontinued [OpenAI Codex](side-quest-01-02-environment-reference.md#openai-codex) model family.
+> In `gh-aw`, `codex` is the engine identifier for OpenAI-powered execution. It does not refer to the discontinued [OpenAI Codex](side-quest-01-04-environment-visuals.md#openai-codex) model family.
 
 ---
 

diff --git a/workshop/side-quest-12-01-iterate-agent-output.md b/workshop/side-quest-12-01-iterate-agent-output.md
@@ -53,7 +53,7 @@ Pick the lowest-scoring row and modify or add only **one sentence** in your [wor
 | Completeness | Name the missing field, such as "Include the age of the oldest open PR." |
 | Tone | Describe the voice you want, such as "Write in a friendly, conversational tone." |
 
-If you use the GitHub Copilot **Agents** tab or the [GitHub Copilot app](side-quest-01-02-environment-reference.md#github-copilot-app), ask for one focused update:
+If you use the GitHub Copilot **Agents** tab or the [GitHub Copilot app](side-quest-01-04-environment-visuals.md#github-copilot-app), ask for one focused update:
 
 ```prompt
 Using the agentic-workflows skill, update .github/workflows/daily-status.md