## Description The [`ai_api_explorer`](https://git.drupalcode.org/project/ai/-/tree/1.x/modules/ai_api_explorer) sub-module ships 16 explorer plugins (Chat, Embeddings, Translate, Summarize, Tools, Rerank, Moderation, Object Detection, Image Classification, Text-To-Image, Image-To-Image, Text-To-Speech, Speech-To-Text, Speech-To-Speech, Audio-To-Audio, Image-and-Audio-to-Video). Each one has grown organically and currently uses an ad-hoc layout, ad-hoc form construction, and inconsistent styling. The result is a developer-facing tool that feels disjointed and looks dated. This issue is the umbrella / preparation work that all per-explorer redesign issues depend on. Its mission is to define a **unified visual and interaction design** for every explorer so the per-explorer follow-ups can implement against a shared spec rather than each making independent choices. This issue does not change any explorer plugin yet — it produces the design artifacts and any shared building blocks (CSS, Twig templates, form helpers) that the follow-up issues will consume. ## Tasks * [ ] Audit some of the 16 existing explorer plugins (`modules/ai_api_explorer/src/Plugin/AiApiExplorer/*.php`) and document the current layout, controls, and pain points. Important is the Chat and any of the ones that has input or output file generation. * [ ] Define a unified two-column (input / output) page layout that works for every operation type (chat, single-shot generation, file-based, multi-modal). * [ ] Define the standard form regions every explorer must have: Provider/model selection, Input(s), Advanced/parameters, Submit / Reset, Result, Code preview. * [ ] Decide on the canonical placement & label for the **AI Provider Configuration form element** ([docs](https://project.pages.drupalcode.org/ai/1.3.x/developers/ai_provider_configuration_element/#ai-provider-configuration-form-element)) — every explorer will switch to this in its follow-up issue. * [ ] Specify how the Chat explorer integrates the **Chat History form element** ([docs](https://project.pages.drupalcode.org/ai/1.3.x/developers/chat_history_element/)) within the unified layout. * [ ] Define typography, spacing, color, and component states (loading, error, empty, success) — align with Drupal Claro / Gin where applicable. * [ ] Provide shared CSS / library assets (`ai_api_explorer.libraries.yml`) and any shared Twig templates that the per-explorer issues will reuse. * [ ] Provide a base Form / trait / helper (if appropriate) so per-explorer plugins do not each re-implement the same layout boilerplate. * [ ] Produce mockups or annotated screenshots for: (a) a single-shot text explorer, (b) the Chat explorer with history, (c) a file-input explorer, (d) a multi-modal explorer. ## Acceptance criteria * A written design spec is attached to or linked from this issue covering layout, form regions, states, and styling tokens. * Mockups for the four representative explorer types are attached. * Shared CSS / library / template / base-class scaffolding required by the per-explorer issues is committed (no behavioral change to any individual explorer yet). * Each per-explorer follow-up issue can be implemented without making further design decisions. ## Related issues <!--Per-explorer follow-up issues will be added here and use /blocked_by on this issue.--> AI-Generated: Yes (Used Claude Code to draft this issue body from the user's brief and an audit of the `ai_api_explorer` plugin directory.)