feat: #3593376 Iteration 4 - vision tooling, entity displays, and a reliable chat image upload

Iteration 4 — vision tooling, entity displays, and a reliable chat image upload

Several related improvements to Display Builder AI's image/vision flow and reach, each verified live and covered by tests.

1. Build a page from an uploaded design mock-up (vision)

• tests/features/showcase/image-to-page.feature (@showcase @ai @vision) — attach a design mock-up and rebuild it. Run on demand with --tags "@vision". Fixture tests/fixtures/mockups/landing-page.png.

2. A real vision tool on the agent

• New display_builder_ai:describe_image AiFunctionCall plugin runs the site's vision-capable chat model over a LOCAL image (a managed file id or public:// URI) and returns a framework-neutral description. Local-only and image-validated.
• Registered on the orchestrator and the template/page-builder agents; the DeepChat controller saves an uploaded mock-up as a managed file and hands the agent its file id, keeping vision inside the agent loop.

3. The assistant on entity-view and views displays

• New BuilderRouteSubscriber adds _display_builder_route to the display_builder_entity_view.* and display_builder_views.* builder routes, so the AI chat (and its entity-/views-display agents) work when building an entity view display or a views display. Unit-tested.

4. Reliable chat image upload (cross-browser)

• The "+" upload control did nothing: deep-chat opens its dialog by clicking a file input it never attaches to the page, which the browser ignores. Replaced with a <label> covering the button wrapping a real file input — clicking the label opens the dialog through pure HTML, no programmatic click. The picked image is handed to deep-chat via its drag-and-drop path; a MutationObserver keeps the control present across re-renders; the button gains a stable id and tooltip.
• A non-@ai scenario + step (the AI chat image upload control should be ready) guards it in the blocking jobs; verified passing in headless Chrome.

5. Navigation-proof toggle selector

• The AI chat toggle steps and selector accept both .toolbar-icon-ai-chatbot (Claro) and .button--ai-chatbot (core Navigation top bar).

Verified live with Playwright

• An uploaded mock-up is saved as a managed file and the agent rebuilds the design on the canvas (via the vision tool).
• On a content type's display-builder the chat renders and binds the entity's fields into components.
• Clicking the "+" opens the native file dialog and the image attaches, then sends.
• lint:js, cspell, node --check, YAML and PHP lint clean; the upload-control scenario passes against a live site.

AI-Generated: Yes — Claude (Claude Code) was used to draft the plugin, the route subscriber, the JS, the tests and this summary. Reviewed, run and verified by the maintainer, who takes full responsibility for the integrity of the submission.

Checkpoints

• File an issue
• Addition/Change/Update/Fix
• Testing to ensure no regression
• Automated unit testing coverage
• Automated functional testing coverage
• UX/UI designer responsibilities
• Readability
• Accessibility
• Performance
• Security
• Documentation
• Code review by maintainers
• Full testing and approval
• Credit contributors
• Review with the product owner
• Release notes snippet
• Release