feat: add Prompt API integration for built-in AI support

[NakataCode]

🚀 Enhanced AI Chat with Interactive Viewers and Improved UX

📋 Summary

This PR significantly enhances the AI chat interface with interactive JSON/code viewers, improved context awareness, and better user experience. The AI assistant now has full page visibility and provides rich, interactive responses.

---

✨ Features Added

🎨 Interactive Content Display

• Interactive JSON Viewer

  • Expandable/collapsible tree structure with ▼/▶ triangles
  • Syntax-highlighted values (strings, numbers, booleans, null)
  • Formatted with proper indentation and structure

• Enhanced Code Blocks

  • Rendered as styled DOM elements (not plain <pre><code>)
  • Language badges (xml, javascript, etc.) displayed in top-right corner
  • Line-by-line rendering for better readability
  • Fixed strikethrough/crossed-out text rendering issues

🧠 AI Context & Intelligence

• Full Page Awareness

  • Expanded context includes full bindings data (not just previews)
  • Expanded context includes full aggregations data
  • Control selection automatically updates AI context

• Smart Session Management

  • Session auto-initializes when Gemini Nano model is ready
  • No manual session creation needed

💎 UX Improvements

• Token Counter

  • Always visible with current usage (tokens used / quota)
  • Shows percentage used
  • Warning state at 90%+ usage with red background
  • Automatic warning message at 70% usage

• Custom Confirmation Dialog

  • In-panel modal for "Clear History" action (not browser popup)
  • Centered in AI chat with backdrop overlay
  • Smooth slide-in animation
  • Can dismiss by clicking overlay or Cancel button

• Context Indicator

  • Shows currently selected control type and ID
  • Clear button (×) to remove context
  • Updates automatically on control selection

[kgogov]

Hello @dobrinyonkov,

Together with @NakataCode, we reviewed the functionality.

Overall, the AI functionality works quite well, but we noticed a few things that I will outline below:

• Before downloading the AI model, the text fields as well as the “SEND” button should be disabled.
• Idea: we could add a “Copy response” button after the response is generated.
• Idea: we could add a “Copy” button in the top-right corner of the code snippets (HTML, XML, JavaScript, CSS, JSON etc.).
• Maybe: We could consider renaming the “AI” tab to something more descriptive.
• We could improve the message loading experience by adding a clearer busy/loading indicator state.
• Important: please verify exactly which model is being downloaded when running in the Edge environment and adjust the message if necessary.

Additionally, I performed a full review of all changes and attached an AI analysis generated with Claude Code using the Opus 4.5 model. There are some interesting findings that are worth reviewing to determine whether they are relevant.

CODE_REVIEW_ANALYSIS.md
CODE_REVIEW_PLAN.md

That’s all from me for now.

[NakataCode]

57 new unit tests added across 3 spec files.

ChatStorageManager.spec.js (7 tests) covers storage key generation and URL sanitization, including null/undefined inputs, empty strings, special character handling, and complex URL patterns.

AISessionManager.spec.js (21 tests) covers constructor initialization, message handler registration, system prompt generation (framework version, theme, loaded libraries), JSON truncation with circular reference handling, prompt formatting with control context, and message array building.

AIChat.spec.js (29 tests) covers constructor defaults, ARIA compliance on all interactive elements and dialogs, XSS prevention via HTML escaping, markdown parsing (bold, italic, inline code, links, line breaks), JSON and code viewer rendering, dialog focus management (focus trap, ESC key, focus restoration), debounced rendering behavior, and event listener wiring.

[NakataCode]

and about the "verify exactly which model is being downloaded when running in the Edge environment and adjust the message if necessary."

The 'Gemini Nano is ready' message is hardcoded in the UI5 Inspector and simply indicates that the browser's built-in AI model has been downloaded and is ready — it doesn't reflect which model is actually running underneath. From what I have looked up, the difference in responses between Chrome and Edge suggests that each browser interferes somehow when downloading the model, which would explain the inconsistent behavior. From the code side, there doesn't seem to be a way to determine which model is actually being used.