@@ -4,7 +4,7 @@
 
 AI features deserve their own section. This article adds a proper **AI submenu** to the TalentManagement Angular app — four dedicated pages, each with a single responsibility, registered as children of an `ai` route group in the sidebar. Each page is a standalone Angular component with its own route, template, and styles.
 
-![Dashboard with the AI submenu expanded in the sidebar — four child items: AI Assistant, HR Insight, NL Search, Vector Search](../../Tests/AngularNetTutorial-Playwright/screenshots-output/series-6-ai-app-features/ai-submenu-sidebar.png)
+![Dashboard with the AI submenu expanded in the sidebar — four child items: AI Assistant, HR Insight, NL Search, Vector Search](../../docs/screenshots/series-6-ai-app-features/ai-submenu-sidebar.png)
 
 📖 **Tutorial Repository:** [AngularNetTutorial on GitHub](https://github.com/workcontrolgit/AngularNetTutorial)
 
@@ -409,21 +409,21 @@ Open `http://localhost:4200` → log in → expand **AI** in the sidebar.
 
 **Test AI Assistant (`/ai/assistant`):**
 
-![Full AI Assistant page at /ai/assistant — chat card with message input when aiEnabled is true](../../Tests/AngularNetTutorial-Playwright/screenshots-output/series-6-ai-app-features/ai-assistant-page-full.png)
+![Full AI Assistant page at /ai/assistant — chat card with message input when aiEnabled is true](../../docs/screenshots/series-6-ai-app-features/ai-assistant-page-full.png)
 
-![AI Assistant page — empty state before any messages, showing the "Start a conversation" prompt](../../Tests/AngularNetTutorial-Playwright/screenshots-output/series-6-ai-app-features/ai-assistant-empty-state.png)
+![AI Assistant page — empty state before any messages, showing the "Start a conversation" prompt](../../docs/screenshots/series-6-ai-app-features/ai-assistant-empty-state.png)
 
 ```
 What are the best practices for structuring a .NET Clean Architecture project?
 ```
 
 **Test HR Insight (`/ai/hr-insight`):**
 
-![HR Insight page at /ai/hr-insight — empty state showing four suggestion buttons and the question input](../../Tests/AngularNetTutorial-Playwright/screenshots-output/series-6-ai-app-features/ai-hr-insight-empty.png)
+![HR Insight page at /ai/hr-insight — empty state showing four suggestion buttons and the question input](../../docs/screenshots/series-6-ai-app-features/ai-hr-insight-empty.png)
 
 Click a suggestion chip — *"Which department has the most employees?"* — and wait for the live data answer.
 
-![HR Insight page showing a data-grounded Ollama answer — references live department headcounts, execution time shown below reply](../../Tests/AngularNetTutorial-Playwright/screenshots-output/series-6-ai-app-features/ai-hr-insight-with-answer.png)
+![HR Insight page showing a data-grounded Ollama answer — references live department headcounts, execution time shown below reply](../../docs/screenshots/series-6-ai-app-features/ai-hr-insight-with-answer.png)
 
 **Test the backward-compat redirect:**
 Navigate to `http://localhost:4200/ai-chat` — it should silently redirect to `/ai/assistant`.
 
@@ -4,7 +4,7 @@
 
 HR managers don't think in filter fields. They think in sentences: *"Show me all software engineers hired in the last 6 months"* or *"Find employees in IT with a salary above $80,000."* This article adds a dedicated **Natural Language Search** page to the TalentManagement Angular app — a text input that accepts a plain-English query, sends it to the LLM for parsing, then fires a structured API call using the extracted filters.
 
-![Natural Language Search page at /ai/nl-search — empty state with search input and prompt to type a query](../../Tests/AngularNetTutorial-Playwright/screenshots-output/series-6-ai-app-features/ai-nl-search-empty.png)
+![Natural Language Search page at /ai/nl-search — empty state with search input and prompt to type a query](../../docs/screenshots/series-6-ai-app-features/ai-nl-search-empty.png)
 
 📖 **Tutorial Repository:** [AngularNetTutorial on GitHub](https://github.com/workcontrolgit/AngularNetTutorial)
 
@@ -40,6 +40,8 @@ This article is part of the **AngularNetTutorial** series. The full-stack tutori
 
 ## 🎯 What We're Building
 
+![Dashboard with the AI submenu expanded — AI Assistant, HR Insight, NL Search, Vector Search child items visible](../../docs/screenshots/series-6-ai-app-features/ai-submenu-sidebar.png)
+
 A dedicated **NL Search** page at `/ai/nl-search`:
 
 * A single text input — type a plain-English description of the employees you want
@@ -331,6 +333,8 @@ export class AiNlSearchComponent implements OnDestroy {
 
 Navigate to `http://localhost:4200/ai/nl-search`.
 
+![Natural Language Search page at /ai/nl-search — empty state with search input and prompt to type a query](../../docs/screenshots/series-6-ai-app-features/ai-nl-search-empty.png)
+
 **Try these queries:**
 
 ```
 
@@ -8,7 +8,7 @@ What if users could type *"find all engineers"* or *"show me employees named Smi
 
 This article shows you how to use an LLM as a **query translator** — converting plain English into the structured filter parameters your existing API already understands. The LLM never touches your database. It simply bridges the gap between human language and machine query syntax.
 
-![Natural Language Search page at /ai/nl-search — single text input, type a plain-English description of the employees you are looking for](../../Tests/AngularNetTutorial-Playwright/screenshots-output/series-6-ai-app-features/ai-nl-search-empty.png)
+![Natural Language Search page at /ai/nl-search — single text input, type a plain-English description of the employees you are looking for](../../docs/screenshots/series-6-ai-app-features/ai-nl-search-empty.png)
 
 📖 **Tutorial Repository:** [AngularNetTutorial on GitHub](https://github.com/workcontrolgit/AngularNetTutorial)
 
@@ -620,7 +620,9 @@ Set `aiEnabled: false` in `environment.ts` → hot-reload → navigate to Employ
 
 **Verify in Swagger:**
 
-Navigate to `https://localhost:44378/swagger` → open `POST /api/v1/ai/nl-employee-search`:
+Navigate to `https://localhost:44378/swagger` → open `POST /api/v1/ai/nl-employee-search`.
+
+![Swagger UI AI controller expanded — POST /ai/chat, POST /ai/hr-insight, POST /ai/nl-employee-search](../../docs/screenshots/series-6-ai-app-features/swagger-ai-endpoints.png)
 
 ```json
 { "query": "find all software engineers" }
 
@@ -4,7 +4,7 @@
 
 Keyword search fails for positions. A user who types *"cloud infrastructure role"* will miss positions titled *"DevOps Engineer"* or *"Platform SRE"* — even if those roles are exactly what they're looking for. This article adds a dedicated **Vector Search** page to the TalentManagement app — a semantic search that finds positions by *meaning*, not exact text match.
 
-![Vector Search page at /ai/vector-search — empty state with search input and prompt to describe a position](../../Tests/AngularNetTutorial-Playwright/screenshots-output/series-6-ai-app-features/ai-vector-search-empty.png)
+![Vector Search page at /ai/vector-search — empty state with search input and prompt to describe a position](../../docs/screenshots/series-6-ai-app-features/ai-vector-search-empty.png)
 
 📖 **Tutorial Repository:** [AngularNetTutorial on GitHub](https://github.com/workcontrolgit/AngularNetTutorial)
 
@@ -43,6 +43,8 @@ This article is part of the **AngularNetTutorial** series. The full-stack tutori
 
 ## 🎯 What We're Building
 
+![Dashboard with the AI submenu expanded — AI Assistant, HR Insight, NL Search, Vector Search child items visible](../../docs/screenshots/series-6-ai-app-features/ai-submenu-sidebar.png)
+
 A dedicated **Vector Search** page at `/ai/vector-search`:
 
 * A single text input — describe the position you're looking for in natural language
@@ -304,6 +306,8 @@ export class AiVectorSearchComponent implements OnDestroy {
 
 Navigate to `http://localhost:4200/ai/vector-search`.
 
+![Vector Search page at /ai/vector-search — empty state with search input and prompt to describe a position](../../docs/screenshots/series-6-ai-app-features/ai-vector-search-empty.png)
+
 **Try these queries:**
 
 ```
 
@@ -10,7 +10,7 @@ The fix is a **cache-aside decorator** — a wrapper around `IAiChatService` tha
 
 This article shows you how to build that decorator using the EasyCaching infrastructure already in the TalentManagement API, and how to expose cache status to API consumers via an `X-AI-Cache: HIT/MISS` response header.
 
-![HR Insight page showing AI response with execution time — the cache decorator reduces repeat query times from seconds to milliseconds](../../Tests/AngularNetTutorial-Playwright/screenshots-output/series-6-ai-app-features/ai-hr-insight-with-answer.png)
+![HR Insight page showing AI response with execution time — the cache decorator reduces repeat query times from seconds to milliseconds](../../docs/screenshots/series-6-ai-app-features/ai-hr-insight-with-answer.png)
 
 📖 **Tutorial Repository:** [AngularNetTutorial on GitHub](https://github.com/workcontrolgit/AngularNetTutorial)
 
@@ -301,7 +301,9 @@ return result.IsSuccess
 
 **Start the stack and verify via Swagger:**
 
-Navigate to `https://localhost:44378/swagger` → `POST /api/v1/ai/chat`:
+Navigate to `https://localhost:44378/swagger` → `POST /api/v1/ai/chat`.
+
+![Swagger UI AI controller expanded — POST /ai/chat, POST /ai/hr-insight, POST /ai/nl-employee-search](../../docs/screenshots/series-6-ai-app-features/swagger-ai-endpoints.png)
 
 ```json
 { "message": "What is Clean Architecture?" }
 
@@ -13,7 +13,7 @@ This article adds semantic search to the **Position list page** using:
 * **EF Core 10 `EF.Functions.VectorDistance`** — LINQ query, no raw SQL strings
 * **Angular search bar** — same progressive-enhancement pattern as NL search in Article 6.5
 
-![Vector Search page at /ai/vector-search — semantic position search powered by SQL Server native vector columns and Ollama nomic-embed-text embeddings](../../Tests/AngularNetTutorial-Playwright/screenshots-output/series-6-ai-app-features/ai-vector-search-empty.png)
+![Vector Search page at /ai/vector-search — semantic position search powered by SQL Server native vector columns and Ollama nomic-embed-text embeddings](../../docs/screenshots/series-6-ai-app-features/ai-vector-search-empty.png)
 
 📖 **Tutorial Repository:** [AngularNetTutorial on GitHub](https://github.com/workcontrolgit/AngularNetTutorial)
 
@@ -625,6 +625,8 @@ ollama serve
 
 Navigate to `https://localhost:44378/swagger` → `POST /api/v1/positions/generate-embeddings` → Execute.
 
+![Swagger UI AI controller expanded — POST /ai/chat, POST /ai/hr-insight, POST /ai/nl-employee-search](../../docs/screenshots/series-6-ai-app-features/swagger-ai-endpoints.png)
+
 Expected response: `{ "generated": 25 }` (or however many positions exist)
 
 **Test semantic search via Swagger:**
@@ -639,6 +641,8 @@ Expected: positions ranked by cosine similarity — titles like "DevOps Engineer
 
 Navigate to `http://localhost:4200` → Positions → type in the semantic search bar.
 
+![Angular Material data table listing employees — same sortable table pattern used for position results with semantic match scores](../../docs/screenshots/series-6-ai-app-features/employee-list-table.png)
+
 * *"data scientist"* — returns data-related positions ranked by similarity
 * *"manages people and projects"* — returns manager/director positions
 * *"builds web applications"* — returns developer/engineer positions