docs(website): reshoot HTTP and AI screenshots and drop stale version note

docs/website/documentation/ai.md

@@ -7,7 +7,7 @@ description: "Ask the AI assistant to edit code, organize notes, run HTTP workfl
 
 Use your own AI provider or a local model to edit snippets, organize notes and work with HTTP requests. Edits apply directly unless you ask for a preview.
 
-<img :src="withBase('/http-ai.png')" alt="AI assistant reviewing an HTTP product request and suggesting additional response checks">
+<img class="screenshot" :src="withBase('/http-ai.png')" alt="AI assistant reviewing an HTTP product request and suggesting additional response checks">
 
 ## Connect a Provider
 
@@ -79,11 +79,11 @@ Ordinary edit requests apply directly. To review first, say “Show me the chang
 
 For example, ask the assistant to improve a retry helper and propose the changes for review:
 
-<img :src="withBase('/snippets-ai-2.png')" alt="AI assistant proposing improvements to a Python retry snippet with a Review changes button">
+<img class="screenshot" :src="withBase('/snippets-ai-2.png')" alt="AI assistant proposing improvements to a Python retry snippet with a Review changes button">
 
 Open **Review changes** to compare **Before** and **After**, then choose **Apply changes** or **Reject changes**.
 
-<img :src="withBase('/snippets-ai-3.png')" alt="Review changes dialog comparing the original retry snippet with the proposed improvements">
+<img class="screenshot" :src="withBase('/snippets-ai-3.png')" alt="Review changes dialog comparing the original retry snippet with the proposed improvements">
 
 If the source changed since the preview was prepared, ask for a fresh preview. Code or Markdown shown only in an answer does not change your records.
 

docs/website/documentation/http/authorization.md

@@ -19,7 +19,7 @@ Use **Auth** on a request, collection, or nested folder to choose how it authent
 
 A top-level collection has no parent to inherit from. A nested folder or request can inherit, choose its own auth, or select None. Auth is one effective method, not a stack of the collection's and request's methods.
 
-<img :src="withBase('/http-auth-inheritance.png')" alt="Request Auth tab using Inherit from parent for the Northstar API">
+<img class="screenshot" :src="withBase('/http-auth-inheritance.png')" alt="Request Auth tab using Inherit from parent for the Northstar API">
 
 ## Reuse a secret token
 

docs/website/documentation/http/collections.md

@@ -18,11 +18,11 @@ A collection is a top-level HTTP folder. Nested folders group related operations
 
 The Overview dashboard shows request and folder counts, a breakdown by method, recent request activity, and the last available run result. Click a recent request entry to inspect its saved snapshot. Use the description to record setup requirements, example values, and the intended run order.
 
-<img :src="withBase('/http-collection.png')" alt="Northstar Checkout collection overview with three passing runner steps and recent requests">
+<img class="screenshot" :src="withBase('/http-collection.png')" alt="Northstar Checkout collection overview with three passing runner steps and recent requests">
 
 Nested folders have the same shared-configuration editor. Save parent changes before sending child requests or preparing a runner snapshot: children use saved parent configuration. Request and collection names are saved separately from content drafts.
 
-<img :src="withBase('/http-collection-headers.png')" alt="Shared Northstar collection headers inherited by its requests">
+<img class="screenshot" :src="withBase('/http-collection-headers.png')" alt="Shared Northstar collection headers inherited by its requests">
 
 ## Inheritance
 

docs/website/documentation/http/debugging.md

@@ -11,7 +11,7 @@ Use the HTTP **Console**, **Terminal**, and **Cookies** tools when the response
 
 Open Console in the bottom dock, send a request, and select its network entry. Inspect the request URL, headers, body, response details, timing, and errors. Filter by text or log level, hide network entries to focus on scripts, and toggle timestamps. Switch to raw details when useful, copy a relevant entry, or copy the currently visible filtered log. The dock can be detached into a separate Console window when you need more room. Clear the log to start a focused debugging session.
 
-<img :src="withBase('/http-console.png')" alt="HTTP Console with an expanded network request">
+<img class="screenshot" :src="withBase('/http-console.png')" alt="HTTP Console with an expanded network request">
 
 Previews describe the draft before scripts run. Console records execution details, so use it to investigate interpolation, actual headers, cookies, and redirect behavior. Console is a bounded in-memory diagnostic log, not permanent request history; older or large entries can be removed or truncated.
 
@@ -61,7 +61,7 @@ Delete a row with its trash icon, or use **Clear all cookies** to empty the jar.
 
 The request's cookie toggle immediately enables/disables automatic jar use; it is saved separately from request content. An explicit `Cookie` header is separate from that toggle. If a request authenticates unexpectedly, inspect both its manual header and the jar.
 
-<img :src="withBase('/http-cookies.png')" alt="Cookies table with editable domain, path, expiry, and flags">
+<img class="screenshot" :src="withBase('/http-cookies.png')" alt="Cookies table with editable domain, path, expiry, and flags">
 
 ## Troubleshooting
 

docs/website/documentation/http/environments.md

@@ -15,7 +15,7 @@ Regular environment variables are stored as plain text in your Markdown Vault, s
 
 Click the sliders icon beside **Environments** (the **Manage** tooltip), create an environment named `Practice`, and add `baseUrl` with the value `https://postman-echo.com`. Select Practice as active, then use <code v-pre>{{baseUrl}}/get</code> in a request. Regular environment edits are autosaved; you do not need to save a request to apply them. Create another environment when the same requests need a different server or credentials.
 
-<img :src="withBase('/http-envs.png')" alt="Environment manager showing reusable variables and a masked secret">
+<img class="screenshot" :src="withBase('/http-envs.png')" alt="Environment manager showing reusable variables and a masked secret">
 
 ## Variables
 

docs/website/documentation/http/graphql.md

@@ -31,7 +31,7 @@ Incomplete variables can be saved and reopened without losing their text. Duplic
 
 The query requires a `user(id: ID!)` field. Adjust the fields and arguments to match your API’s schema.
 
-<img :src="withBase('/http-graphql.png')" alt="GraphQL query, variables, and response in the HTTP editor">
+<img class="screenshot" :src="withBase('/http-graphql.png')" alt="GraphQL query, variables, and response in the HTTP editor">
 
 ## Variables, tests and scripts
 

docs/website/documentation/http/index.md

@@ -7,9 +7,7 @@ description: "Learn the massCode HTTP workspace, send your first request, and bu
 
 The HTTP space is a local API workspace inside massCode. Send HTTP requests, inspect responses, organize collections, and reuse variables alongside your code snippets and notes. No massCode account is required.
 
-This guide describes the **5.11 interface**, including collection settings, scripts, tests, GraphQL, WebSocket, history, and debugging tools. Individual version markers identify features introduced after the original HTTP client.
-
-<img :src="withBase('/http-overview.png')" alt="HTTP workspace with Collections, Environments, Trash, and the Northstar collection overview">
+<img class="screenshot" :src="withBase('/http-overview.png')" alt="HTTP workspace with Collections, Environments, Trash, and the Northstar collection overview">
 
 ## Getting Started
 
@@ -27,7 +25,7 @@ Postman Echo returns details of the request it receives and requires no API key.
 
 **Send** uses your current draft. Saving is a separate action: changing the request name saves the name automatically, but other content needs **Save**. If you do not receive a response, check internet access and the URL, then use [Debugging](./debugging).
 
-<img :src="withBase('/http-first-request.png')" alt="Public Postman Echo GET request returning args.message with hello">
+<img class="screenshot" :src="withBase('/http-first-request.png')" alt="Public Postman Echo GET request returning args.message with hello">
 
 ### Turn it into a repeatable check
 

docs/website/documentation/http/requests.md

@@ -73,7 +73,7 @@ Select the payload format in **Body**. The editor keeps payload content in the r
 | **Binary** | Choose a local file to send as the entire payload, for APIs that expect raw bytes. |
 | **GraphQL** | Enter a query/mutation, JSON variables, and operation selection. See [GraphQL](./graphql). |
 
-<img :src="withBase('/http-json-body.png')" alt="JSON order payload with HTTP 201 response">
+<img class="screenshot" :src="withBase('/http-json-body.png')" alt="JSON order payload with HTTP 201 response">
 
 File selections reference files on this device; saving or syncing the request does not bundle the uploaded file into the vault. Reselect a file if its path is unavailable after moving machines or importing a collection. Generating a preview does not read local file contents.
 

docs/website/documentation/http/responses.md

@@ -17,7 +17,7 @@ If the lower panel is hidden, use the bottom-panel toggle in the top-right edito
 4. Use the copy action for the body or headers you need.
 5. Open **Test Results** for assertion and JavaScript test results. Extraction results appear separately and do not expose extracted values.
 
-<img :src="withBase('/http-params-response.png')" alt="Enabled query parameters and the JSON response for a product filter">
+<img class="screenshot" :src="withBase('/http-params-response.png')" alt="Enabled query parameters and the JSON response for a product filter">
 
 For request and redirect details, use [Console](./debugging#console).
 
@@ -37,7 +37,7 @@ GraphQL can return partial `data` together with `errors` under HTTP `200`. Check
 
 Open **History** in the request's lower panel to inspect earlier sends for that request. The collection **Overview** also shows its five most recent request entries. Select an entry in either surface to open its saved request and response snapshot, including headers, body, status, timing, and any saved error.
 
-<img :src="withBase('/http-history.png')" alt="Saved request and response snapshot with redacted credentials">
+<img class="screenshot" :src="withBase('/http-history.png')" alt="Saved request and response snapshot with redacted credentials">
 
 History is for inspection. Selecting an entry does not restore its request into the editor, change the current draft, or resend it. To reproduce a past request, edit the current request deliberately and send it again.
 

docs/website/documentation/http/runner.md

@@ -20,7 +20,7 @@ The initial order is oldest-created requests first within each folder, followed
 
 The runner snapshots saved requests and the active environment when you open it. Later edits do not change that prepared run. Choose **Prepare new run** after completion to load the latest saved data.
 
-<img :src="withBase('/http-runner.png')" alt="Checkout runner with all three requests passing">
+<img class="screenshot" :src="withBase('/http-runner.png')" alt="Checkout runner with all three requests passing">
 
 For an API workflow, put `Login` first, extract its token, then run `Create item` and extract its ID before `Read item`. To run a smaller workflow, organize its requests into a dedicated folder.
 

docs/website/documentation/http/scripts.md

@@ -60,7 +60,7 @@ Scripts run in separate contexts. Transfer data between phases with variables, n
 
 The supported logging methods are `console.log`, `console.info`, `console.warn`, `console.error`, and `console.clear`. They write to [Console](./debugging#console); an error log alone does not fail a test. Log non-sensitive identifiers and checkpoints, not credentials.
 
-<img :src="withBase('/http-scripts.png')" alt="Create order JavaScript script with two passing tests">
+<img class="screenshot" :src="withBase('/http-scripts.png')" alt="Create order JavaScript script with two passing tests">
 
 ## Execution and failure
 

docs/website/documentation/http/settings.md

@@ -13,7 +13,7 @@ A request's **Inherit** choice uses the current global setting. For numeric fiel
 
 Request transport settings take precedence over global defaults. Collection/folder auth and headers have their own [inheritance rules](./collections#inheritance); transport inheritance here refers to the global HTTP preferences.
 
-<img :src="withBase('/http-settings.png')" alt="Per-request transport settings and cookie jar control">
+<img class="screenshot" :src="withBase('/http-settings.png')" alt="Per-request transport settings and cookie jar control">
 
 ## Transport settings
 

docs/website/documentation/http/tests.md

@@ -20,7 +20,7 @@ For a login endpoint that returns `{ "token": "example-token" }`:
 
 ## Sources and Paths
 
-<img :src="withBase('/http-extraction.png')" alt="Successful lastOrderId extraction from the response id field">
+<img class="screenshot" :src="withBase('/http-extraction.png')" alt="Successful lastOrderId extraction from the response id field">
 
 JSON paths use JSON Pointer: `/user/id`, `/items/0/name`, or an empty path for the entire response. Escape `/` in a property name as `~1` and `~` as `~0`. Header names are case-insensitive. Extracted strings, numbers, and booleans become string variables; objects and arrays become JSON text.
 
@@ -30,7 +30,7 @@ Choose **Header** and a header name such as `X-Request-ID` to extract a response
 
 ## Assertion Operators
 
-<img :src="withBase('/http-assertions.png')" alt="Status and JSON assertions with two passing results">
+<img class="screenshot" :src="withBase('/http-assertions.png')" alt="Status and JSON assertions with two passing results">
 
 Assertions can check status, a JSON value, a header, or duration in milliseconds. Expected values use JSON: `200`, `true`, `null`, or a quoted string such as `"application/json"`.
 

docs/website/documentation/http/websocket.md

@@ -16,7 +16,7 @@ Choose **WebSocket** in the method/type selector beside the URL. Existing saved
 
 For a server you control, use its documented URL and authentication; for example, `wss://your-api.example/events` is a placeholder, not a runnable service. A browser application's Socket.IO endpoint is not necessarily a plain WebSocket endpoint.
 
-<img :src="withBase('/http-websocket.png')" alt="Connected WebSocket request with its message log">
+<img class="screenshot" :src="withBase('/http-websocket.png')" alt="Connected WebSocket request with its message log">
 
 ## Variables and Authentication