docs: add missing dashboard screenshots and UI walkthroughs

docs/advanced/guardrails.mdx

@@ -37,6 +37,32 @@ guardrails:
 
 That's it. Every request now gets the safety prompt prepended to its system instructions.
 
+## Manage from the Dashboard
+
+Guardrail definitions can also be created and edited from the admin
+dashboard instead of `config.yaml` — useful for iterating on rules without a
+redeploy, or for operators who don't manage this repo's config directly.
+
+<img
+  src="/advanced/guardrails.png"
+  alt="GoModel dashboard Guardrails page with a Guardrail Library summary card and an empty Instances list with a Create Guardrail button"
+  style={{ width: "100%", maxWidth: "1280px", height: "auto" }}
+  className="rounded-lg"
+/>
+
+Open **Guardrails** in the sidebar and click **Create Guardrail** to add an
+instance: give it a name, pick a type (`system_prompt` or
+`llm_based_altering`), optionally scope it to a `user_path`, and fill in the
+type-specific settings described below. `config.yaml` entries are seeded into
+the same store at startup and stay in sync with it, so dashboard-created and
+config-declared guardrails appear side by side.
+
+<Note>
+  Runtime guardrail execution still depends on `GUARDRAILS_ENABLED`. With it
+  off, the page still lets you manage definitions — they just don't run on
+  live traffic yet.
+</Note>
+
 ## How It Works
 
 {/* Client Request → Extract messages → Guardrails Pipeline (order 0 → order 1 → ...) → Apply back → LLM Provider */}

docs/features/budgets.mdx

@@ -49,6 +49,16 @@ You can create budgets in the dashboard:
 Budgets -> Create Budget
 ```
 
+<img
+  src="/features/budgets.png"
+  alt="GoModel dashboard Budgets page listing per-user-path monthly, weekly, and daily budgets with spend bars and remaining amounts"
+  style={{ width: "100%", maxWidth: "1280px", height: "auto" }}
+  className="rounded-lg"
+/>
+
+Set the **user path**, **period**, and **amount** in the form. Each row on the
+Budgets page then shows spend as a percentage of the limit, the amount spent
+versus the cap, and the remaining balance for the current period.
 Dashboard-created budgets are marked as `manual`. Budgets loaded from YAML or
 environment variables are marked as `config`.
 

docs/features/failover.mdx

@@ -7,7 +7,7 @@ keywords: ["failover", "fallback"]
 
 <img
   src="/features/failover.png"
-  alt="GoModel dashboard virtual model editor with weighted targets and the load-balancing strategy dropdown open"
+  alt="GoModel dashboard failover mapping editor for a model, showing an ordered fallback model list, Add fallback model and Generate automatically buttons"
   style={{ width: "100%", maxWidth: "795px", height: "auto" }}
   className="rounded-lg"
 />
@@ -58,6 +58,21 @@ compatibility inputs. They are accepted but ignored by runtime failover.
 The Dashboard can generate suggested mappings from model metadata, but
 suggestions must be saved as manual mappings before they affect traffic.
 
+Two ways to reach the generator in the dashboard:
+
+- Per model: open a model's row on the **Models** page and click the
+  shuffle icon to edit its failover mapping, then **Generate automatically**
+  to populate suggested fallback models before **Save**.
+- For everything at once: **Settings -> Failover -> Generate failover models
+  automatically** proposes mappings for every eligible model in one pass.
+
+<img
+  src="/features/failover-generate.png"
+  alt="GoModel dashboard Settings page Failover section with Generate failover models automatically and Remove all the failover models buttons"
+  style={{ width: "100%", maxWidth: "1000px", height: "auto" }}
+  className="rounded-lg"
+/>
+
 ## When It Runs
 
 Failover is attempted only after the primary request returns:

docs/features/labelling.mdx

@@ -23,6 +23,17 @@ Assign labels when creating a key in the admin dashboard:
 
 `API Keys -> Create API Key -> Labels`
 
+<img
+  src="/features/auth-keys-labels.png"
+  alt="GoModel dashboard API Keys page with a Labels column showing chips like env:demo, team:engineering, and priority:high for each key"
+  style={{ width: "100%", maxWidth: "1280px", height: "auto" }}
+  className="rounded-lg"
+/>
+
+The **API Keys** page lists every managed key with its labels as chips next
+to its user path, so you can see attribution at a glance without opening
+each key. Click **Edit Labels** on a row to change them later.
+
 Or via the admin API:
 
 ```bash
@@ -57,6 +68,18 @@ Tagging rules name headers whose values carry labels. Manage them in the
 dashboard (`Settings -> Tagging based on headers`) or declare them as
 infrastructure-as-code:
 
+<img
+  src="/features/tagging-headers.png"
+  alt="GoModel dashboard Settings page Tagging based on headers form with two header rows (X-Team, X-Environment) and prefix, delimiter, and do-not-pass-upstream fields"
+  style={{ width: "100%", maxWidth: "1000px", height: "auto" }}
+  className="rounded-lg"
+/>
+
+Click **Add Header**, name the header your clients will send (for example
+`X-Team`), optionally set a prefix to trim and a delimiter, then **Save
+Tagging Settings**. Check **Do not pass upstream** for headers that should be
+stripped before the request reaches the provider.
+
 ```yaml config.yaml
 tagging:
   headers:

docs/features/mcp-gateway.mdx

@@ -65,6 +65,30 @@ Servers can be managed in the dashboard (**MCP Servers** page) or declared as
 infrastructure-as-code — declarative entries override same-slug dashboard
 rows and are read-only there:
 
+<img
+  src="/features/mcp-servers.png"
+  alt="GoModel dashboard MCP Servers page listing two servers with their transport, endpoint, status, tool count, and enabled toggle"
+  style={{ width: "100%", maxWidth: "1280px", height: "auto" }}
+  className="rounded-lg"
+/>
+
+### Add a server from the dashboard
+
+Open **MCP Servers** and click **Add MCP Server**. Fill in:
+
+- **Name** — human-facing; you can rename it later.
+- **Transport** — `http` (streamable HTTP, default) or `sse` (legacy).
+- **URL** — the upstream MCP endpoint.
+- **Headers** — upstream credentials (for example `Authorization: Bearer …`);
+  saved values are shown redacted afterward.
+- Optional **allowed/disallowed tools** and **user paths** to scope
+  visibility, the same fields available in `config.yaml`.
+
+Save to connect immediately. Use the row's refresh icon to force a
+**Reconnect**, the list icon to open the catalog inspector, and the pencil
+icon to edit. Rows added this way accept edits and deletes; rows sourced from
+`config.yaml` or `MCP_SERVERS` show as read-only here.
+
 Dashboard-managed servers have two identifiers:
 
 - **Name** is human-facing, accepts Unicode, and can be edited later.

docs/features/rate-limits.mdx

@@ -61,9 +61,18 @@ In the dashboard:
 Rate Limits -> Create Rate Limit
 ```
 
+<img
+  src="/features/rate-limits.png"
+  alt="GoModel dashboard Rate Limits page listing user-path, provider, and model rules with live usage bars for requests, tokens, and concurrency"
+  style={{ width: "100%", maxWidth: "1280px", height: "auto" }}
+  className="rounded-lg"
+/>
+
 Pick the scope (user path, provider, or model), the subject, a period, and the
 caps. Dashboard-created rules are marked `manual`. Rules loaded from YAML or
 environment variables are marked `config` and are read-only in the dashboard.
+Each row shows live usage against its limit; the reset icon clears just that
+rule's counters, and the trash icon deletes the rule (which also resets it).
 
 The Models page has a gauge button on every model row and provider header that
 opens the same limits for that subject in context: the model's own rules, the

docs/features/user-path.mdx

@@ -18,6 +18,16 @@ You can bind a user path to a managed API key in the admin dashboard:
 
 `API Keys -> Create API Key -> User Path`
 
+<img
+  src="/features/auth-keys-labels.png"
+  alt="GoModel dashboard API Keys page with a User Path column showing values like /agents/team1, /engineering/ai, and /sales/john"
+  style={{ width: "100%", maxWidth: "1280px", height: "auto" }}
+  className="rounded-lg"
+/>
+
+The **API Keys** page lists each key's bound `user_path` alongside its
+labels, so you can confirm which subtree a key resolves to at a glance.
+
 When a request uses that key, GoModel treats the key's `user_path` as the
 effective user path for the request.