Skip to content

feat(playground): add inspector panel for AST/Type/Symbol/Signature/Flow info#448

Merged
fansenze merged 1 commit intomainfrom
feat/playground-inspector
Feb 2, 2026
Merged

feat(playground): add inspector panel for AST/Type/Symbol/Signature/Flow info#448
fansenze merged 1 commit intomainfrom
feat/playground-inspector

Conversation

@fansenze
Copy link
Copy Markdown
Contributor

@fansenze fansenze commented Jan 29, 2026 •
edited
Loading

Summary

Add a new Inspector panel to the Playground for viewing detailed code structure information:

  • Node Info: AST node details with lazy loading for child nodes
  • Type Info: TypeScript type information including properties, signatures, etc.
  • Symbol Info: Symbol table entries with declarations and members
  • Signature Info: Function/method signature details
  • Flow Info: Control flow graph visualization

Changes

Go Backend (internal/inspector/)

  • New inspector module with builders for Node/Type/Symbol/Signature/Flow info
  • Helper functions for finding nodes and extracting type checker data
  • Support for external file (lib.d.ts) node inspection

Frontend (website/theme/components/Playground/)

  • New AST Info panel with collapsible sections
  • Lazy loading for nested nodes, types, and symbols
  • Flow graph visualization component
  • EditorTabs component for code/config editing
  • Resizable split pane layout

API Layer

  • Add getAstInfo IPC endpoint
  • Export inspector types to JS packages

Snapshot

Node / Type / Symbol

image

Signature

image

FlowNode

image

Checklist

  • Tests updated (or not required).
  • Documentation updated (or not required).

@gemini-code-assist
Copy link
Copy Markdown

gemini-code-assist bot commented Jan 29, 2026

Summary of Changes

Hello @fansenze, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the Playground's capabilities by adding an interactive Inspector panel. This new feature provides deep insights into the internal representation and semantic analysis of TypeScript code, making it easier for users to understand how the linter processes their code and to debug complex type-related issues. The implementation spans both the Go backend for data extraction and the React frontend for a rich, interactive visualization.

Highlights

  • New Inspector Panel: Introduced a new 'Inspector' panel in the Playground, enabling detailed viewing of AST (Abstract Syntax Tree), Type, Symbol, Signature, and Control Flow (Flow) information for TypeScript code.
  • Go Backend Integration: Developed a new internal/inspector Go module responsible for building and exposing comprehensive AST, Type, Symbol, Signature, and Flow data from the TypeScript-Go shim. This includes a new IPC endpoint (getAstInfo) to retrieve this information.
  • Frontend UI/UX Enhancements: Implemented a new frontend UI for the Inspector panel, featuring collapsible sections, lazy loading for nested data, a control flow graph visualization, and a resizable split pane layout for improved user experience.
  • Dynamic Configuration Support: The Playground now dynamically applies rslint.json and tsconfig.json configurations provided in dedicated editor tabs, allowing users to test linting and type-checking behavior with custom settings.
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

@fansenze fansenze force-pushed the feat/playground-inspector branch from 79a5aca to 2c6141d Compare January 29, 2026 10:22
gemini-code-assist[bot]
gemini-code-assist bot reviewed Jan 29, 2026
View reviewed changes
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces a powerful new Inspector panel to the Playground, which is a fantastic addition for exploring code structure. The backend changes in Go are extensive, with a new inspector package to build detailed AST information and caching to improve performance. The frontend is also significantly enhanced with a new resizable split-pane layout, tabbed editors for configuration, and a detailed, lazy-loading inspector UI. The overall architecture is well-thought-out. I've identified a couple of potential issues related to data handling between Go and JavaScript that could lead to bugs, and some opportunities to improve code maintainability by reducing duplication. Overall, this is a great feature enhancement.

@cloudflare-workers-and-pages
Copy link
Copy Markdown

cloudflare-workers-and-pages bot commented Jan 29, 2026 •
edited
Loading

Deploying rslint with  Cloudflare Pages  Cloudflare Pages

Latest commit: 6b9136c
Status: ✅  Deploy successful!
Preview URL: https://abe76016.rslint.pages.dev
Branch Preview URL: https://feat-playground-inspector.rslint.pages.dev

View logs

@fansenze fansenze force-pushed the feat/playground-inspector branch 11 times, most recently from 04a25d8 to 5f99b21 Compare January 30, 2026 04:16
@fansenze
feat(playground): add inspector module for AST/Type/Symbol/Signature/…
6b9136c 
…Flow info

Add a new inspector module that builds code inspection information for the Playground:

- NodeInfo: AST node details with kind, flags, position, and child properties
- TypeInfo: TypeScript type information with flags, properties, and signatures
- SymbolInfo: Symbol table information with declarations and members
- SignatureInfo: Function/method signature details
- FlowInfo: Control flow analysis information

Features:
- Lazy loading support with shallow/full info building
- External file support (e.g., lib.d.ts) via fileName field
- Helper functions for finding nodes at position and getting type/signature/flow info
@fansenze fansenze force-pushed the feat/playground-inspector branch from 5f99b21 to 6b9136c Compare January 30, 2026 04:24
@fansenze fansenze requested a review from hardfist January 30, 2026 04:39
@fansenze fansenze merged commit 6b6e555 into main Feb 2, 2026
15 checks passed
@fansenze fansenze deleted the feat/playground-inspector branch February 2, 2026 02:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@hardfist hardfist hardfist approved these changes

+1 more reviewer

@gemini-code-assist gemini-code-assist[bot] gemini-code-assist[bot] left review comments

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

release: feature

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@fansenze @hardfist