## Description Apply the shared layout and components from #3586402 to the **Chat Generation Explorer** (`modules/ai_api_explorer/src/Plugin/AiApiExplorer/ChatGenerator.php`) and build its redesign. **Design:** [design canvas](https://claude.ai/artifact/3BNzywVcnMjRCgo5jCQ6GM), page "Chat & hub" (light and dark, desktop and phone). This issue is blocked by #3586402. This explorer must also switch to the **AI Provider Configuration form element** (`ai_provider_configuration`, [docs](https://project.pages.drupalcode.org/ai/1.3.x/developers/ai_provider_configuration_element/#ai-provider-configuration-form-element)) in place of `AiProviderFormHelper::generateAiProvidersForm()`, as the Decision explorer already does. ### What the design adds * Chats list on the left (a drawer on narrow screens): keep several chats, grouped by day, with search and **New chat**. A chat is a stored run (#3586772). * Message history on the `chat_history` element (see #3528949), with system, user, assistant and tool roles. * The composer sends a **user** message by default; a role dropdown adds an assistant or tool message by hand (a tool message asks for the tool call ID). * Tool calls show the function, its label, the call ID and the arguments; tool results sit below, linked by call ID, with status and timing; long results collapse. * On hover, each message can be dragged, edited, re-run from there or deleted; **Re-run all** in the thread header. * Assistant messages show model, token usage and finish reason, with copy and "View raw response". Structured output answers show the JSON with a schema check. * A failed tool call shows a notice with **Edit arguments** and **Send result to model**. * Request settings in tabs. **Model**: model and reasoning effort. **Tools**: picked tools, and what happens when the model calls one (only show the call / run it and show the result / run it and continue, up to 5 rounds). **Output**: stream, structured output with the JSON schema and **Create with AI** (#3586777). **Code**: Normalized, Raw and Request views. Stream and tool running live only here, not in the composer. * **Import JSON** (upload or paste; a preview of messages per role, tool calls and model; open as a new chat or replace the open chat's messages; optionally import the request settings) and **Export JSON**. * Phone: chats as a drawer, settings as a bottom sheet, the composer stays at the bottom. ### Bugs to fix while here Checked on 1.x (`c3b8595d7`); paths relative to `modules/ai_api_explorer/src/Plugin/AiApiExplorer/` unless shown. * Only one message: the form has a fixed `role_1`, `message_1` and `image_1` (`ChatGenerator.php:155-178`); `chat_history` is not used. * Code example calls `\Drupal::provider(...)` instead of `\Drupal::service(...)` (`:751`) and passes the tool plugin objects to `new ToolsInput($functions)` instead of the normalized `$functions_array` (`:755`). * Code example runs `Json::decode()` on the system prompt (`:771`), so a plain-text prompt comes out empty; message text and JSON schema are pasted into PHP unescaped (`:739`, `:742`, `:768`). ## Tasks * [ ] Replace the provider/model selection with the `ai_provider_configuration` element. * [ ] Rebuild the form on the shell, regions and components from #3586402; remove local styling. * [ ] Build each point under "What the design adds". * [ ] Store each run with run history (#3586772) and render Results from stored runs. * [ ] Generate the code example per run with the shared builder (#3586773). * [ ] States: running, error kept next to its run with Retry, empty before the first run. * [ ] Fix the bugs listed above. * [ ] Keyboard and screen reader check: labels, focus order, pressed and selected states. * [ ] Tests: build and submit the form against the `ai_test` provider where it supports the operation, and cover each fixed bug. ## Acceptance criteria * The explorer matches the canvas page "Chat & hub" in Gin and Claro, light and dark, desktop and phone width. * Provider and model selection use the `ai_provider_configuration` element. * Runs survive a reload when run history is on, and the explorer works as before when it is off. * The bugs above are fixed and covered by tests. * No ad-hoc styling remains in this plugin. ## Related issues * Blocked by #3586402 (shared layout, CSS and components). * Uses #3586772 (run history), #3586773 (code examples), #3586777 (Create with AI for JSON schema). * #3528949 (chat_history element in the Chat explorer, needs work): finish it first or fold it into this issue. AI-Generated: Yes (Used Claude Code to update this issue from the design canvas and a check of `ChatGenerator.php` on 1.x.)