feat: add raw HTML component support and unify sandbox iframe impleme…

[sugoi-yuzuru]

…ntation

Description

This PR introduces a responsive "Neon Pong" game and implements the pattern for serving self-contained HTML applications via the ADK agent. It leverages the McpApp component with literalString content for robust, server-less application delivery.

Key Changes:

• Neon Pong implementation: Created a high-quality, responsive Pong game (pong_app.html) featuring an AI opponent, proportional scaling with ResizeObserver, and keyboard/mouse controls.
• Agent integration:
  Added get_pong_app tool to mcp_app_proxy to serve HTML content.
  Updated agent.py to register the new tool and defined the "Open Pong" skill for the agent.
• Frontend enhancements: Added an "Open Pong" suggestion chip to the MCP Calculator sample to improve feature discovery.
• Architecture: Unified the sandbox iframe implementation support for raw HTML components.
• Verification: https://screencast.googleplex.com/cast/NTU0NjM4MjU3OTQ2NjI0MHwzYWRiYjljNi0wOA

Pre-launch Checklist

• I signed the CLA.
• I read the Contributors Guide.
• I read the Style Guide.
• I have added updates to the CHANGELOG.
• I updated/added relevant documentation.
• My code changes (if any) have tests.

If you need help, consider asking for advice on the discussion board.

[gemini-code-assist]

Code Review

This pull request introduces a new Pong game application, integrating it into the agent and client. The review highlights several issues: invalid HTML in pong_app.html due to duplicate closing tags, an inline style attribute that should be moved to CSS, a magic number in the CPU AI logic that needs to be a named constant, and the use of setInterval instead of requestAnimationFrame for the game loop. Additionally, a redundant import os statement was found in tools.py, and new tests are required for the get_pong_app tool as per the style guide.

[gemini-code-assist]

This div uses an inline style attribute. To improve maintainability and separate structure from presentation, it's better to move these styles to a dedicated CSS class in the <style> block.

You can then add the following class to your CSS:

.canvas-container {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  flex: 1;
  min-height: 0;
}

        <div class="canvas-container">

[gemini-code-assist]

The value 0.1 used for the CPU AI's movement speed is a "magic number". Using hardcoded values like this makes the code harder to understand and maintain. Please define it as a named constant at the top of the <script> block (e.g., const CPU_AI_SPEED = 0.1;) and use the constant here.

            cpu.y += (targetY - cpu.y) * CPU_AI_SPEED;

[gemini-code-assist]

The game loop uses setInterval, which is not ideal for animations. requestAnimationFrame is more efficient, provides smoother rendering by syncing with the browser's repaint cycle, and pauses automatically when the tab is not visible, saving resources.

I'd suggest refactoring the game loop to use it.

        function gameLoop() {
            game();
            requestAnimationFrame(gameLoop);
        }
        requestAnimationFrame(gameLoop);

[gemini-code-assist]

The repository style guide states that 'If there are code changes, code should have tests.' This pull request introduces a new get_pong_app tool and the corresponding Pong game, but no new tests have been added to verify this functionality. Please add tests for the new tool.

References

1. The style guide requires that new code changes are accompanied by tests. ^(link)

[gemini-code-assist]

This import os statement is redundant because os is already imported at the top of the file (line 14). It can be removed.