Implement runtime value inspection on hover for Python code blocks

[Copilot]

This PR implements issue #303, adding the ability to inspect runtime values by hovering over highlighted code tokens in Python code blocks.

Features

• Interactive Code Inspection: Users can now hover over Python identifiers (variables, module attributes, etc.) in executed code blocks to see their runtime values
• Smart Token Detection: Automatically identifies inspectable tokens like variables, module names, and attribute access while excluding keywords and operators
• Rich Inspection Display: Shows variable type, class information, and formatted value representation in a styled tooltip
• Seamless Integration: Works with the existing Pyodide execution environment and notebook infrastructure

Implementation Details

The implementation consists of three main components:

1. Enhanced CodeBlock Component: Modified src/lib/components/CodeBlock.svelte to add DOM-level token identification and hover event handling
2. Notebook Integration: Updated src/lib/components/notebook/Code.svelte to pass the Python notebook context to enable inspection
3. Markdown Support: Enhanced src/lib/components/markdown/Pre.svelte for consistency across different code rendering contexts

How It Works

After executing a Python code block (e.g., import math; math.pi), users can:

1. Hover over identifiers like math or pi in the code
2. See a tooltip displaying the variable's type, class, and value
3. Get instant feedback about the runtime state without additional console commands

The feature leverages the existing inspect() method in the Python notebook API, which uses AST parsing and pure_eval to safely evaluate expressions and retrieve their runtime values.

Example Usage

>>> import math
>>> math.pi

After execution, hovering over math shows:

module
<module 'math' (built-in)>

Hovering over pi shows:

float
3.141592653589793

This enhancement makes the Python notebook experience more interactive and educational, allowing users to explore their code's runtime state intuitively.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.