docs: align v2 stack documentation (#6564)

apps/docs/docs/management/custom-widgets/authoring.mdx

@@ -1,8 +1,37 @@
 # Create a Custom Widget
 
 import { CanonicalCustomWidgetExample } from "@site/src/components/custom-widget-code";
+import workbenchImage from "./img/workbench.png";
+import workbenchMobileImage from "./img/workbench-mobile.png";
+import workbenchValidationImage from "./img/workbench-validation.png";
 
-The workbench is visual-first: configure the default API connection, add request cards, add option rows, then write JSX. Additional sources and raw manifest JSON remain under Advanced. Code and preview sit side by side on desktop and use tabs on mobile.
+The workbench exposes **General**, **API sources**, **Requests**, **Options**, **JSX**, and **Preview** sections. Advanced JSON is
+available in the manifest and request/option editors. Code and preview sit side by side on desktop; on smaller screens the
+**Configure**/**Preview** switch shows one pane at a time and the section navigation scrolls horizontally. Preview sizes display
+as **S/M/L** (Compact/Standard/Wide), and fixtures are **Live**, **Loading**, **Empty**, or **Error**.
+For multiline JSX, prefer `templateLines` in agent or MCP input and keep the final tested preview as the source of truth before saving.
+
+<img
+  src={workbenchImage}
+  alt="Custom Widget workbench with configuration sections and a live preview"
+  style={{ maxWidth: "100%" }}
+/>
+
+<img
+  src={workbenchMobileImage}
+  alt="Mobile Custom Widget workbench with Configure and Preview switch and horizontally scrollable section navigation"
+  style={{ maxWidth: "100%" }}
+/>
+
+The workbench keeps the configuration and preview together so you can inspect validation diagnostics, the redacted request
+journal, fixture data, and preview size before saving. Invalid fields stay marked in the form while the preview explains why it
+needs attention.
+
+<img
+  src={workbenchValidationImage}
+  alt="Custom Widget workbench showing a Base URL validation error with Test, preview, and Create actions disabled"
+  style={{ maxWidth: "100%" }}
+/>
 
 ## Manual workflow
 
@@ -21,7 +50,9 @@ The workbench is visual-first: configure the default API connection, add request
 
 <CanonicalCustomWidgetExample id="widget-options" label="Widget options" example="options" height="360px" />
 
-Every option has a default. Supported controls include text, textarea, number, switch, select, multi-select, slider, date, time, color, icon, URL, duration, time zone, and JSON. Dynamic choices use `choicesFrom` with a query ID and value/label paths.
+Every option has a default. Supported controls include text, textarea, number, switch, select, multi-select, slider, date, time, color, icon, URL, duration, time zone, and JSON. Dynamic choices use `choicesFrom: { request, itemsPath?, valuePath, labelPath }`; the request must be a load query without invocation parameters, and you cannot provide both static `choices` and `choicesFrom`.
+
+Preview actions are simulated by default and recorded in the journal without contacting the service. Enable **Run actions against the configured API** only when you intend a real mutation; live actions still require configured confirmation.
 
 ## ChatGPT or Claude
 
@@ -31,7 +62,8 @@ The model must return one fenced `json` block containing the complete widget, in
 field. Copy that single block and select **Paste**. Homarr fills the visual builders and the JSX editor
 without any placeholder replacement or second paste.
 
-Homarr shows all actionable schema or JSX errors inline. Enter credentials separately. The prompt deliberately
+Homarr shows all actionable schema or JSX errors inline. Enter credentials separately. The copied prompt does not include the
+latest preview response; use **Preview** > **Data** to inspect it and mention important response fields in your request. The prompt deliberately
 recommends a focused Mantine component set, visual hierarchy, responsive layout, theme compatibility, and loading,
 empty, failure, and success states.