Implement interactive code blocks with hover variable inspection using reactivity library

[Copilot]

This PR implements #107 (Interactive CodeBlock - Show inspect information when variable got hovered) using the reactivity library for high-performance variable tracking, which also addresses #303 (Inspect runtime value inside code blocks).

Problem

Previously, users had no way to inspect Python variables in code blocks by hovering over them. The original issues proposed two approaches:

1. Taking snapshots of globals() after every execution (memory leak concerns)
2. Taking snapshots of inspections for interesting values (challenging to link Shiki tokens to AST nodes)

Solution

This implementation leverages the newly available reactivity library to provide efficient, real-time variable inspection:

Key Components Added

1. Enhanced Syntax Highlighting (highlight.ts)

• Added Shiki transformers that identify Python variable tokens
• Automatically adds data-variable and data-inspectable attributes to inspectable identifiers
• Uses regex pattern matching to detect valid Python variable names

2. Interactive Code Block Component (InteractiveCodeBlock.svelte)

• New component that extends regular CodeBlock with hover inspection capabilities
• Handles mouse events to trigger inspection API calls
• Integrates with existing pyNotebook.inspect() and pyNotebook.watch() methods
• Uses reactivity library's create_effect for efficient variable watching with automatic cleanup

3. Smart Component Selection (notebook/Code.svelte)

• Automatically uses InteractiveCodeBlock for Python code when pyNotebook is available
• Falls back to regular CodeBlock for non-Python code or when notebook API is unavailable
• Maintains backward compatibility with existing functionality

4. Tooltip Integration (Tooltip.svelte)

• Reuses existing tooltip component for displaying inspection information
• Shows variable type, value, and kind in a clean, formatted display
• Positioned dynamically relative to hovered tokens

Technical Benefits

• Performance Optimized: Uses reactivity library's signals and effects instead of polling or global snapshots
• Memory Efficient: Automatic cleanup of reactive watchers prevents memory leaks
• Real-time Updates: Variable values update automatically when code is re-executed
• Token-level Precision: Shiki's AST-aware highlighting enables precise token identification
• Seamless Integration: Works with existing notebook infrastructure without breaking changes

Usage

After running Python code in a notebook:

1. Hover over any variable name in the code block
2. See real-time inspection information including type, value, and classification
3. Values automatically update when variables change through code re-execution

This provides the foundation for advanced code inspection features while maintaining excellent performance through the reactivity library.

---

💡 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.

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview