diff --git a/README.md b/README.md
index f58c783e..68fbe525 100644
--- a/README.md
+++ b/README.md
@@ -8,13 +8,16 @@ About
Code Pathfinder, the open-source alternative to GitHub CodeQL. Built for advanced structural search, derive insights, find vulnerabilities in code.
[](https://github.com/shivasurya/code-pathfinder/actions/workflows/build.yml) [](https://goreportcard.com/report/github.com/shivasurya/code-pathfinder/sourcecode-parser)
-[](https://github.com/shivasurya/code-pathfinder/blob/main/LICENSE)
+[](https://github.com/shivasurya/code-pathfinder/blob/main/LICENSE)
[](https://discord.gg/xmPdJC6WPX)
[](https://codecov.io/gh/shivasurya/code-pathfinder)
+
## :tv: Demo
+Try interactive online playground [here](https://play.codepathfinder.dev/).
+
```bash
docker run --rm -v "./src:/src" shivasurya/code-pathfinder:stable-latest ci --project /src/code-pathfinder/test-src --ruleset cpf/java
```
diff --git a/docs/src/content/docs/atlas/index.mdx b/docs/src/content/docs/atlas/index.mdx
index ad6a3df1..1e569afc 100644
--- a/docs/src/content/docs/atlas/index.mdx
+++ b/docs/src/content/docs/atlas/index.mdx
@@ -9,6 +9,9 @@ hero:
link: /quickstart
icon: right-arrow
variant: primary
+ - text: Playground
+ link: https://play.codepathfinder.dev
+ icon: forward-slash
- text: Documentation
link: /overview
icon: open-book
diff --git a/docs/src/content/docs/blog/code-pathfinder-closure-table-hierarchical-queries.mdx b/docs/src/content/docs/blog/code-pathfinder-closure-table-hierarchical-queries.mdx
index d5eaf619..0efc5bc1 100644
--- a/docs/src/content/docs/blog/code-pathfinder-closure-table-hierarchical-queries.mdx
+++ b/docs/src/content/docs/blog/code-pathfinder-closure-table-hierarchical-queries.mdx
@@ -159,7 +159,7 @@ import { Card } from '@astrojs/starlight/components';
### Closing Note
- Discover [Code-PathFinder](https://github.com/shivasurya/code-pathfinder), the open-source alternative to CodeQL—a powerful tool engineered to detect security vulnerabilities. Unlike grep-based scanners such as Semgrep or ast-grep, Code-PathFinder enables fine-tuning of queries to more effectively eliminate false positives, thanks to its advanced taint analysis and source-to-sink tracing capabilities. Give it a try, and if you encounter any bugs or have suggestions, please file an issue.
+ Discover [Code-PathFinder](https://github.com/shivasurya/code-pathfinder), the open-source alternative to CodeQL—a powerful tool engineered to detect security vulnerabilities. Unlike grep-based scanners such as ast-grep, Code-PathFinder enables fine-tuning of queries to more effectively eliminate false positives, thanks to its advanced taint analysis and source-to-sink tracing capabilities. Give it a try, and if you encounter any bugs or have suggestions, please file an issue.
diff --git a/docs/src/content/docs/blog/finding-webview-misconfigurations-android.mdx b/docs/src/content/docs/blog/finding-webview-misconfigurations-android.mdx
index 08464baf..50f4ec7c 100644
--- a/docs/src/content/docs/blog/finding-webview-misconfigurations-android.mdx
+++ b/docs/src/content/docs/blog/finding-webview-misconfigurations-android.mdx
@@ -132,7 +132,7 @@ import { Card } from '@astrojs/starlight/components';
### Conclusion
While [Code-PathFinder, the open-source alternative to CodeQL](https://codepathfinder.dev), is a powerful tool for finding security vulnerabilities in Android applications, one can always tweak the queries to filter out false positives
- more effectively compared to grep-based scanners like `Semgrep` or `ast-grep`. This is because the taint analysis and source-to-sink analysis are far more powerful than grep-based scanners. Give it a try and file an [issue](https://github.com/shivasurya/code-pathfinder/issues)
+ more effectively compared to grep-based scanners like `ast-grep`. This is because the taint analysis and source-to-sink analysis are far more powerful than grep-based scanners. Give it a try and file an [issue](https://github.com/shivasurya/code-pathfinder/issues)
if you find any bugs or have any suggestions.
diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx
index b95d6487..b5394a2c 100644
--- a/docs/src/content/docs/index.mdx
+++ b/docs/src/content/docs/index.mdx
@@ -9,15 +9,15 @@ hero:
link: /quickstart
icon: right-arrow
variant: primary
+ - text: Playground
+ link: https://play.codepathfinder.dev
+ icon: forward-slash
- text: Browse Rules
link: /atlas
icon: open-book
- text: Tech Blog
link: /blog
icon: pen
- - text: Get Source
- link: https://github.com/shivasurya/code-pathfinder
- icon: github
---
import { Card, CardGrid, Icon } from '@astrojs/starlight/components';
diff --git a/playground-Dockerfile b/playground-Dockerfile
new file mode 100644
index 00000000..b0a7a9b8
--- /dev/null
+++ b/playground-Dockerfile
@@ -0,0 +1,45 @@
+# Use Wolfi as base image with Go support for builder stage
+FROM cgr.dev/chainguard/go:latest as builder
+
+# Set working directory
+WORKDIR /build
+
+# First, copy the sourcecode-parser module
+COPY ./sourcecode-parser /build/sourcecode-parser
+
+# Copy the playground module
+COPY ./playground /build/playground
+
+# Set working directory to playground
+WORKDIR /build/playground
+
+# Build the application with security flags
+ENV CGO_ENABLED=1
+RUN go build -o playground
+
+# Use distroless base image for minimal attack surface
+FROM cgr.dev/chainguard/wolfi-base:latest
+
+# Create non-root user
+USER nonroot:nonroot
+
+# Set working directory
+WORKDIR /app
+
+# Copy the binary from builder
+COPY --from=builder --chown=nonroot:nonroot /build/playground/playground /app/
+
+# Copy static files
+COPY --from=builder --chown=nonroot:nonroot /build/playground/public/static /app/public/static
+
+# Create and set permissions for temporary directory
+RUN mkdir -p /tmp/code-analysis && \
+ chmod 0750 /tmp/code-analysis && \
+ chown nonroot:nonroot /tmp/code-analysis
+
+# Expose port 8080
+EXPOSE 8080
+
+# Run the application with reduced capabilities
+CMD ["/app/playground"]
+
diff --git a/playground/.dockerignore b/playground/.dockerignore
new file mode 100644
index 00000000..75eeea0b
--- /dev/null
+++ b/playground/.dockerignore
@@ -0,0 +1,32 @@
+# Version control
+.git
+.gitignore
+
+# Go build artifacts
+*.exe
+*.exe~
+*.dll
+*.so
+*.dylib
+*.test
+*.out
+
+# IDE directories
+.idea/
+.vscode/
+
+# Temporary files
+*.tmp
+*.temp
+tmp/
+temp/
+
+# Docker files
+Dockerfile
+.dockerignore
+
+# Debug files
+debug/
+
+# Dependencies
+/vendor/
diff --git a/playground/README.md b/playground/README.md
new file mode 100644
index 00000000..d43f129d
--- /dev/null
+++ b/playground/README.md
@@ -0,0 +1,26 @@
+### Code-Pathfinder Playground
+
+The Code-Pathfinder Playground is a online interactive app that allows you to analyze code and execute Code-Pathfinder (CodeQL) queries on it.
+
+
+
+### Quickstart
+
+In the playground directory, run:
+
+```shell
+$ go run main.go
+```
+
+This will start the playground server. Visit `http://localhost:8080` to access the playground.
+
+### Docker Build
+
+From the root directory, run:
+
+```shell
+$ podman build --platform linux/amd64 -t docker.io/shivasurya/cpf-playground:latest . -f playground-Dockerfile
+```
+
+This will build the playground Docker image.
+
diff --git a/playground/go.mod b/playground/go.mod
new file mode 100644
index 00000000..946dde69
--- /dev/null
+++ b/playground/go.mod
@@ -0,0 +1,19 @@
+module github.com/shivasurya/code-pathfinder/playground
+
+go 1.24.1
+
+replace github.com/shivasurya/code-pathfinder/sourcecode-parser => ../sourcecode-parser
+
+require (
+ github.com/google/uuid v1.6.0
+ github.com/shivasurya/code-pathfinder/sourcecode-parser v0.0.0-00010101000000-000000000000
+ github.com/smacker/go-tree-sitter v0.0.0-20240827094217-dd81d9e9be82
+)
+
+require (
+ github.com/antlr4-go/antlr/v4 v4.13.1 // indirect
+ github.com/expr-lang/expr v1.16.9 // indirect
+ github.com/joho/godotenv v1.5.1 // indirect
+ github.com/posthog/posthog-go v1.2.24 // indirect
+ golang.org/x/exp v0.0.0-20250106191152-7588d65b2ba8 // indirect
+)
diff --git a/playground/go.sum b/playground/go.sum
new file mode 100644
index 00000000..9802fc33
--- /dev/null
+++ b/playground/go.sum
@@ -0,0 +1,22 @@
+github.com/antlr4-go/antlr/v4 v4.13.1 h1:SqQKkuVZ+zWkMMNkjy5FZe5mr5WURWnlpmOuzYWrPrQ=
+github.com/antlr4-go/antlr/v4 v4.13.1/go.mod h1:GKmUxMtwp6ZgGwZSva4eWPC5mS6vUAmOABFgjdkM7Nw=
+github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
+github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/expr-lang/expr v1.16.9 h1:WUAzmR0JNI9JCiF0/ewwHB1gmcGw5wW7nWt8gc6PpCI=
+github.com/expr-lang/expr v1.16.9/go.mod h1:8/vRC7+7HBzESEqt5kKpYXxrxkr31SaO8r40VO/1IT4=
+github.com/google/uuid v1.6.0 h1:NIvaJDMOsjHA8n1jAhLSgzrAzy1Hgr+hNrb57e+94F0=
+github.com/google/uuid v1.6.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
+github.com/joho/godotenv v1.5.1 h1:7eLL/+HRGLY0ldzfGMeQkb7vMd0as4CfYvUVzLqw0N0=
+github.com/joho/godotenv v1.5.1/go.mod h1:f4LDr5Voq0i2e/R5DDNOoa2zzDfwtkZa6DnEwAbqwq4=
+github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
+github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
+github.com/posthog/posthog-go v1.2.24 h1:A+iG4saBJemo++VDlcWovbYf8KFFNUfrCoJtsc40RPA=
+github.com/posthog/posthog-go v1.2.24/go.mod h1:uYC2l1Yktc8E+9FAHJ9QZG4vQf/NHJPD800Hsm7DzoM=
+github.com/smacker/go-tree-sitter v0.0.0-20240827094217-dd81d9e9be82 h1:6C8qej6f1bStuePVkLSFxoU22XBS165D3klxlzRg8F4=
+github.com/smacker/go-tree-sitter v0.0.0-20240827094217-dd81d9e9be82/go.mod h1:xe4pgH49k4SsmkQq5OT8abwhWmnzkhpgnXeekbx2efw=
+github.com/stretchr/testify v1.10.0 h1:Xv5erBjTwe/5IxqUQTdXv5kgmIvbHo3QQyRwhJsOfJA=
+github.com/stretchr/testify v1.10.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
+golang.org/x/exp v0.0.0-20250106191152-7588d65b2ba8 h1:yqrTHse8TCMW1M1ZCP+VAR/l0kKxwaAIqN/il7x4voA=
+golang.org/x/exp v0.0.0-20250106191152-7588d65b2ba8/go.mod h1:tujkw807nyEEAamNbDrEGzRav+ilXA7PCRAd6xsmwiU=
+gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
+gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
diff --git a/playground/main.go b/playground/main.go
new file mode 100644
index 00000000..d32c3f9d
--- /dev/null
+++ b/playground/main.go
@@ -0,0 +1,42 @@
+// Package main implements a web server for analyzing Java source code and executing CodeQL queries.
+// It provides endpoints for code analysis, AST parsing, and visualization.
+package main
+
+import (
+ "log"
+ "net/http"
+ "os"
+ "strings"
+
+ "github.com/shivasurya/code-pathfinder/playground/pkg/handlers"
+ "github.com/shivasurya/code-pathfinder/playground/pkg/middleware"
+)
+
+func main() {
+ // Create a new mux for better control over middleware
+ mux := http.NewServeMux()
+
+ // Serve static files with security and logging middleware
+ fs := http.FileServer(http.Dir("public/static"))
+ mux.Handle("/", middleware.LoggingMiddleware(fs))
+
+ // API endpoints with security and logging middleware
+ mux.Handle("/api/analyze", middleware.LoggingMiddleware(http.HandlerFunc(handlers.AnalyzeHandler)))
+ mux.Handle("/api/parse", middleware.LoggingMiddleware(http.HandlerFunc(handlers.ParseHandler)))
+
+ // Get port from environment variable or use default
+ port := os.Getenv("PORT")
+ if port == "" {
+ port = "8080"
+ }
+
+ // Ensure port starts with :
+ if !strings.HasPrefix(port, ":") {
+ port = ":" + port
+ }
+
+ log.Printf("Starting server on port %s", port)
+ if err := http.ListenAndServe(port, mux); err != nil {
+ log.Fatalf("Server failed to start: %v", err)
+ }
+}
diff --git a/playground/pkg/ast/parser.go b/playground/pkg/ast/parser.go
new file mode 100644
index 00000000..5641f97f
--- /dev/null
+++ b/playground/pkg/ast/parser.go
@@ -0,0 +1,173 @@
+package ast
+
+import (
+ "fmt"
+ "strings"
+
+ "github.com/shivasurya/code-pathfinder/playground/pkg/models"
+ sitter "github.com/smacker/go-tree-sitter"
+ "github.com/smacker/go-tree-sitter/java"
+)
+
+// ParseJavaSource parses Java source code into an AST using tree-sitter
+func ParseJavaSource(sourceCode string) (*models.ASTNode, error) {
+ parser := sitter.NewParser()
+ parser.SetLanguage(java.GetLanguage())
+
+ sourceBytes := []byte(sourceCode)
+ tree := parser.Parse(nil, sourceBytes)
+ if tree == nil {
+ return nil, fmt.Errorf("failed to parse source code")
+ }
+ defer tree.Close()
+
+ root := tree.RootNode()
+ if root == nil {
+ return nil, fmt.Errorf("invalid AST: no root node")
+ }
+
+ ast := buildASTFromTreeSitter(root, sourceBytes)
+ if ast == nil {
+ return nil, fmt.Errorf("failed to build AST")
+ }
+
+ return ast, nil
+}
+
+// buildASTFromTreeSitter converts a tree-sitter AST into our AST structure
+func buildASTFromTreeSitter(node *sitter.Node, sourceBytes []byte) *models.ASTNode {
+ if node == nil {
+ return nil
+ }
+
+ // Create AST node
+ astNode := &models.ASTNode{
+ Type: node.Type(),
+ Name: node.Type(),
+ Code: getNodeText(node, sourceBytes),
+ Line: int(node.StartPoint().Row + 1),
+ Children: make([]models.ASTNode, 0),
+ }
+
+ // Process specific node types
+ switch node.Type() {
+ case "package_declaration":
+ astNode.Type = "PackageDeclaration"
+ astNode.Package = getNodeText(node, sourceBytes)
+
+ case "import_declaration":
+ astNode.Type = "ImportDeclaration"
+ astNode.Imports = []string{getNodeText(node, sourceBytes)}
+
+ case "class_declaration":
+ astNode.Type = "ClassDeclaration"
+ if nameNode := node.ChildByFieldName("name"); nameNode != nil {
+ astNode.Name = getNodeText(nameNode, sourceBytes)
+ }
+ if superNode := node.ChildByFieldName("superclass"); superNode != nil {
+ astNode.SuperClass = getNodeText(superNode, sourceBytes)
+ }
+ astNode.Modifier = getModifiers(node, sourceBytes)
+
+ case "constructor_declaration":
+ astNode.Type = "ConstructorDeclaration"
+ if nameNode := node.ChildByFieldName("name"); nameNode != nil {
+ astNode.Name = getNodeText(nameNode, sourceBytes)
+ }
+ astNode.Arguments = getMethodParameters(node, sourceBytes)
+ astNode.Modifier = getModifiers(node, sourceBytes)
+ case "method_declaration":
+ astNode.Type = "MethodDeclaration"
+ if nameNode := node.ChildByFieldName("name"); nameNode != nil {
+ astNode.Name = getNodeText(nameNode, sourceBytes)
+ }
+ if typeNode := node.ChildByFieldName("type"); typeNode != nil {
+ astNode.ReturnType = getNodeText(typeNode, sourceBytes)
+ }
+ astNode.Arguments = getMethodParameters(node, sourceBytes)
+ astNode.Modifier = getModifiers(node, sourceBytes)
+
+ case "field_declaration":
+ astNode.Type = "FieldDeclaration"
+ if nameNode := node.ChildByFieldName("name"); nameNode != nil {
+ astNode.Name = getNodeText(nameNode, sourceBytes)
+ }
+ if typeNode := node.ChildByFieldName("type"); typeNode != nil {
+ astNode.DataType = getNodeText(typeNode, sourceBytes)
+ }
+ astNode.Modifier = getModifiers(node, sourceBytes)
+ astNode.Value = getInitializer(node, sourceBytes)
+
+ case "local_variable_declaration":
+ astNode.Type = "VariableDeclaration"
+ if nameNode := node.ChildByFieldName("name"); nameNode != nil {
+ astNode.Name = getNodeText(nameNode, sourceBytes)
+ }
+ if typeNode := node.ChildByFieldName("type"); typeNode != nil {
+ astNode.DataType = getNodeText(typeNode, sourceBytes)
+ }
+ astNode.Value = getInitializer(node, sourceBytes)
+
+ case "method_invocation":
+ astNode.Type = "MethodInvocation"
+ if nameNode := node.ChildByFieldName("name"); nameNode != nil {
+ var args []string
+ if paramNode := node.ChildByFieldName("arguments"); paramNode != nil {
+ args = getMethodParameters(paramNode, sourceBytes)
+ }
+ // print full method invocation with arguments
+ astNode.Name = fmt.Sprintf("%s(%s)", getNodeText(nameNode, sourceBytes), strings.Join(args, ", "))
+ }
+ if typeNode := node.ChildByFieldName("type"); typeNode != nil {
+ astNode.ReturnType = getNodeText(typeNode, sourceBytes)
+ }
+ astNode.Arguments = getMethodParameters(node, sourceBytes)
+ astNode.Modifier = getModifiers(node, sourceBytes)
+ astNode.Value = getInitializer(node, sourceBytes)
+ }
+
+ // Process child nodes
+ for i := 0; i < int(node.NamedChildCount()); i++ {
+ if child := node.NamedChild(i); child != nil {
+ if childNode := buildASTFromTreeSitter(child, sourceBytes); childNode != nil {
+ astNode.Children = append(astNode.Children, *childNode)
+ }
+ }
+ }
+
+ return astNode
+}
+
+// Helper functions for tree-sitter AST processing
+func getNodeText(node *sitter.Node, sourceBytes []byte) string {
+ if node == nil {
+ return ""
+ }
+ return string(node.Content(sourceBytes))
+}
+
+func getModifiers(node *sitter.Node, sourceBytes []byte) string {
+ if modNode := node.ChildByFieldName("modifiers"); modNode != nil {
+ return getNodeText(modNode, sourceBytes)
+ }
+ return ""
+}
+
+func getMethodParameters(node *sitter.Node, sourceBytes []byte) []string {
+ var params []string
+ if paramsList := node.ChildByFieldName("parameters"); paramsList != nil {
+ for i := 0; i < int(paramsList.NamedChildCount()); i++ {
+ if param := paramsList.NamedChild(i); param != nil {
+ params = append(params, getNodeText(param, sourceBytes))
+ }
+ }
+ }
+ return params
+}
+
+func getInitializer(node *sitter.Node, sourceBytes []byte) string {
+ if initNode := node.ChildByFieldName("initializer"); initNode != nil {
+ return getNodeText(initNode, sourceBytes)
+ }
+ return ""
+}
diff --git a/playground/pkg/handlers/analyze.go b/playground/pkg/handlers/analyze.go
new file mode 100644
index 00000000..e4c5040d
--- /dev/null
+++ b/playground/pkg/handlers/analyze.go
@@ -0,0 +1,125 @@
+package handlers
+
+import (
+ "errors"
+ "net/http"
+ "os"
+ "strings"
+ "time"
+
+ "github.com/shivasurya/code-pathfinder/playground/pkg/models"
+ "github.com/shivasurya/code-pathfinder/playground/pkg/utils"
+ parser "github.com/shivasurya/code-pathfinder/sourcecode-parser/antlr"
+ "github.com/shivasurya/code-pathfinder/sourcecode-parser/graph"
+)
+
+const (
+ // QueryTimeout is the maximum time allowed for query execution
+ QueryTimeout = 60 * time.Second
+)
+
+// Error definitions
+var (
+ ErrQueryTimeout = errors.New("query execution timed out")
+)
+
+// Channel types
+type resultChannel chan []models.QueryResult
+
+// AnalyzeHandler processes POST requests to /analyze endpoint.
+// It accepts Java source code and a CodeQL query, executes the query using code-pathfinder,
+// and returns the query results. The execution is done with a 60-second timeout.
+func AnalyzeHandler(w http.ResponseWriter, r *http.Request) {
+ start := time.Now()
+ defer utils.LogRequestDuration("analyzeHandler", start)
+
+ if !utils.ValidateMethod(w, r, http.MethodPost) {
+ return
+ }
+
+ var req models.AnalyzeRequest
+ if err := utils.DecodeJSONRequest(w, r, &req); err != nil {
+ return
+ }
+
+ tmpDir, err := utils.CreateTempWorkspace("code-analysis-*")
+ if err != nil {
+ utils.SendErrorResponse(w, "Failed to create temporary directory", err)
+ return
+ }
+ defer os.RemoveAll(tmpDir)
+
+ if err := utils.WriteSourceAndQueryFiles(tmpDir, req.JavaSource, req.Query); err != nil {
+ utils.SendErrorResponse(w, "Failed to write files", err)
+ return
+ }
+
+ results, err := executeQueryWithTimeout(tmpDir, req.Query)
+ if err != nil {
+ utils.SendErrorResponse(w, "Query execution failed", err)
+ return
+ }
+
+ utils.SendJSONResponse(w, models.AnalyzeResponse{
+ Results: results,
+ })
+}
+
+// executeQueryWithTimeout executes the query with a timeout
+func executeQueryWithTimeout(tmpDir, queryStr string) ([]models.QueryResult, error) {
+ resultsChan := make(resultChannel)
+ errorChan := make(chan error)
+
+ go executeQuery(tmpDir, queryStr, resultsChan, errorChan)
+
+ select {
+ case results := <-resultsChan:
+ return results, nil
+ case err := <-errorChan:
+ return nil, err
+ case <-time.After(QueryTimeout):
+ return nil, ErrQueryTimeout
+ }
+}
+
+// executeQuery performs the actual query execution
+func executeQuery(tmpDir, queryStr string, resultsChan resultChannel, errorChan chan error) {
+ // Initialize code graph with the temporary directory
+ codeGraph := graph.Initialize(tmpDir)
+
+ // Parse the query
+ parsedQuery, err := parser.ParseQuery(queryStr)
+ if err != nil {
+ errorChan <- err
+ return
+ }
+
+ // Extract WHERE clause
+ parts := strings.SplitN(queryStr, "WHERE", 2)
+ if len(parts) > 1 {
+ parsedQuery.Expression = strings.SplitN(parts[1], "SELECT", 2)[0]
+ }
+
+ // Execute query on the graph
+ entities, _ := graph.QueryEntities(codeGraph, parsedQuery)
+
+ // Convert results to QueryResult format
+ var results []models.QueryResult
+ for _, entity := range entities {
+ for _, entityObject := range entity {
+
+ // Create QueryResult
+ result := models.QueryResult{
+ File: "Main.java",
+ Line: int64(entityObject.LineNumber),
+ Snippet: entityObject.CodeSnippet,
+ Kind: entityObject.Type, // Use the Type field from entityObject
+ }
+
+ // Add the result to the list
+ results = append(results, result)
+ }
+ }
+
+ resultsChan <- results
+}
diff --git a/playground/pkg/handlers/parse.go b/playground/pkg/handlers/parse.go
new file mode 100644
index 00000000..0062bcec
--- /dev/null
+++ b/playground/pkg/handlers/parse.go
@@ -0,0 +1,43 @@
+package handlers
+
+import (
+ "net/http"
+ "strings"
+ "time"
+
+ "github.com/shivasurya/code-pathfinder/playground/pkg/ast"
+ "github.com/shivasurya/code-pathfinder/playground/pkg/models"
+ "github.com/shivasurya/code-pathfinder/playground/pkg/utils"
+)
+
+// ParseHandler processes POST requests to /parse endpoint.
+// It accepts Java source code, parses it into an AST using tree-sitter,
+// and returns the AST structure for visualization.
+func ParseHandler(w http.ResponseWriter, r *http.Request) {
+ start := time.Now()
+ defer utils.LogRequestDuration("parseHandler", start)
+
+ if !utils.ValidateMethod(w, r, http.MethodPost) {
+ return
+ }
+
+ var req models.ParseRequest
+ if err := utils.DecodeJSONRequest(w, r, &req); err != nil {
+ return
+ }
+
+ // Validate source code is not empty
+ if strings.TrimSpace(req.JavaSource) == "" {
+ utils.SendErrorResponse(w, "Source code cannot be empty", nil)
+ return
+ }
+
+ // Parse the Java source code
+ ast, err := ast.ParseJavaSource(req.JavaSource)
+ if err != nil {
+ utils.SendErrorResponse(w, "Failed to parse source code", err)
+ return
+ }
+
+ utils.SendJSONResponse(w, models.ParseResponse{AST: ast})
+}
diff --git a/playground/pkg/middleware/logging.go b/playground/pkg/middleware/logging.go
new file mode 100644
index 00000000..7d1abf37
--- /dev/null
+++ b/playground/pkg/middleware/logging.go
@@ -0,0 +1,82 @@
+package middleware
+
+import (
+ "log"
+ "net/http"
+ "strings"
+ "time"
+
+ "github.com/google/uuid"
+)
+
+// LoggingResponseWriter is a custom response writer that captures the status code
+type LoggingResponseWriter struct {
+ http.ResponseWriter
+ statusCode int
+}
+
+// WriteHeader captures the status code
+func (lrw *LoggingResponseWriter) WriteHeader(code int) {
+ lrw.statusCode = code
+ lrw.ResponseWriter.WriteHeader(code)
+}
+
+// LoggingMiddleware logs request details with security context
+func LoggingMiddleware(next http.Handler) http.Handler {
+ return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+ start := time.Now()
+
+ // Get client IP with security checks
+ clientIP := r.Header.Get("X-Real-IP")
+ if clientIP == "" {
+ clientIP = r.Header.Get("X-Forwarded-For")
+ if clientIP == "" {
+ // Extract IP without port
+ clientIP = strings.Split(r.RemoteAddr, ":")[0]
+ }
+ }
+
+ // Get user agent (sanitized)
+ userAgent := strings.ReplaceAll(r.Header.Get("User-Agent"), "\n", "")
+
+ // Get request ID or generate one
+ requestID := r.Header.Get("X-Request-ID")
+ if requestID == "" {
+ requestID = uuid.New().String()
+ }
+
+ // Add request ID to response headers for tracing
+ w.Header().Set("X-Request-ID", requestID)
+
+ // Create a response writer that captures the status code
+ lrw := &LoggingResponseWriter{
+ ResponseWriter: w,
+ statusCode: http.StatusOK,
+ }
+
+ // Call the next handler
+ next.ServeHTTP(lrw, r)
+
+ // Calculate request duration
+ duration := time.Since(start)
+
+ // Get content length
+ contentLength := r.Header.Get("Content-Length")
+
+ // Log request details with security context
+ log.Printf("[%s] [%s] Method=%s Path=%s IP=%s Status=%d Duration=%v Size=%s UA=%s Referer=%s Protocol=%s Host=%s",
+ time.Now().Format(time.RFC3339),
+ requestID,
+ r.Method,
+ r.URL.Path,
+ clientIP,
+ lrw.statusCode,
+ duration,
+ contentLength,
+ userAgent,
+ r.Referer(),
+ r.Proto,
+ r.Host,
+ )
+ })
+}
diff --git a/playground/pkg/models/models.go b/playground/pkg/models/models.go
new file mode 100644
index 00000000..eb1e1faa
--- /dev/null
+++ b/playground/pkg/models/models.go
@@ -0,0 +1,21 @@
+package models
+
+// AnalyzeRequest represents the request body for code analysis
+type AnalyzeRequest struct {
+ JavaSource string `json:"javaSource"`
+ Query string `json:"query"`
+ Category string `json:"category"` // Technology or language-based category
+}
+
+// AnalyzeResponse represents the response from code analysis
+type AnalyzeResponse struct {
+ Results []QueryResult `json:"results"`
+}
+
+// QueryResult represents a single result from query execution
+type QueryResult struct {
+ File string `json:"file"`
+ Line int64 `json:"line"`
+ Snippet string `json:"snippet"`
+ Kind string `json:"kind,omitempty"` // Type of the node or result
+}
diff --git a/playground/pkg/models/types.go b/playground/pkg/models/types.go
new file mode 100644
index 00000000..54c0f6b5
--- /dev/null
+++ b/playground/pkg/models/types.go
@@ -0,0 +1,28 @@
+package models
+
+// ParseRequest represents the input for AST parsing
+type ParseRequest struct {
+ JavaSource string `json:"code"`
+}
+
+// ParseResponse represents the output from AST parsing
+type ParseResponse struct {
+ AST *ASTNode `json:"ast"`
+}
+
+// ASTNode represents a node in the Abstract Syntax Tree
+type ASTNode struct {
+ Type string `json:"type"`
+ Name string `json:"name"`
+ Code string `json:"code"`
+ Line int `json:"line"`
+ Modifier string `json:"modifier,omitempty"`
+ Value string `json:"value,omitempty"`
+ Package string `json:"package,omitempty"`
+ Imports []string `json:"imports,omitempty"`
+ SuperClass string `json:"superClass,omitempty"`
+ DataType string `json:"dataType,omitempty"`
+ ReturnType string `json:"returnType,omitempty"`
+ Arguments []string `json:"arguments,omitempty"`
+ Children []ASTNode `json:"children"`
+}
diff --git a/playground/pkg/utils/files.go b/playground/pkg/utils/files.go
new file mode 100644
index 00000000..05d91a1e
--- /dev/null
+++ b/playground/pkg/utils/files.go
@@ -0,0 +1,58 @@
+package utils
+
+import (
+ "fmt"
+ "os"
+ "path/filepath"
+
+ "github.com/google/uuid"
+)
+
+const (
+ // FilePermissions for created files
+ FilePermissions = 0644
+)
+
+// CreateTempWorkspace creates a temporary directory for analysis
+func CreateTempWorkspace(prefix string) (string, error) {
+ // Create a unique directory name
+ dirName := fmt.Sprintf("%s-%s", prefix, uuid.New().String())
+ tmpDir := filepath.Join(os.TempDir(), dirName)
+
+ // Create directory with secure permissions
+ if err := os.MkdirAll(tmpDir, 0700); err != nil {
+ return "", fmt.Errorf("failed to create temp directory: %v", err)
+ }
+
+ return tmpDir, nil
+}
+
+// WriteSourceAndQueryFiles writes the source and query files to the workspace
+func WriteSourceAndQueryFiles(dir, source, query string) error {
+ if err := WriteSourceFile(dir, source); err != nil {
+ return err
+ }
+ return WriteFile(filepath.Join(dir, "query.ql"), query)
+}
+
+// WriteSourceFile writes the Java source code to a file
+func WriteSourceFile(dir, source string) error {
+ return WriteFile(filepath.Join(dir, "Main.java"), source)
+}
+
+// WriteFile writes content to a file with proper permissions
+func WriteFile(path, content string) error {
+ // Create or truncate the file
+ file, err := os.OpenFile(path, os.O_WRONLY|os.O_CREATE|os.O_TRUNC, FilePermissions)
+ if err != nil {
+ return fmt.Errorf("failed to create file: %v", err)
+ }
+ defer file.Close()
+
+ // Write content
+ if _, err := file.WriteString(content); err != nil {
+ return fmt.Errorf("failed to write content: %v", err)
+ }
+
+ return nil
+}
diff --git a/playground/pkg/utils/http.go b/playground/pkg/utils/http.go
new file mode 100644
index 00000000..fc65e0fc
--- /dev/null
+++ b/playground/pkg/utils/http.go
@@ -0,0 +1,46 @@
+package utils
+
+import (
+ "encoding/json"
+ "log"
+ "net/http"
+ "time"
+)
+
+// LogRequestDuration logs the duration of a request
+func LogRequestDuration(handler string, start time.Time) {
+ log.Printf("%s took %v", handler, time.Since(start))
+}
+
+// ValidateMethod checks if the request method matches the expected method
+func ValidateMethod(w http.ResponseWriter, r *http.Request, method string) bool {
+ if r.Method != method {
+ http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
+ return false
+ }
+ return true
+}
+
+// DecodeJSONRequest decodes a JSON request body into a struct
+func DecodeJSONRequest(w http.ResponseWriter, r *http.Request, v interface{}) error {
+ if err := json.NewDecoder(r.Body).Decode(v); err != nil {
+ http.Error(w, "Invalid request body", http.StatusBadRequest)
+ return err
+ }
+ return nil
+}
+
+// SendJSONResponse sends a JSON response
+func SendJSONResponse(w http.ResponseWriter, v interface{}) {
+ w.Header().Set("Content-Type", "application/json")
+ if err := json.NewEncoder(w).Encode(v); err != nil {
+ log.Printf("Error encoding response: %v", err)
+ http.Error(w, "Internal server error", http.StatusInternalServerError)
+ }
+}
+
+// SendErrorResponse sends an error response
+func SendErrorResponse(w http.ResponseWriter, message string, err error) {
+ log.Printf("Error: %s: %v", message, err)
+ http.Error(w, message, http.StatusInternalServerError)
+}
diff --git a/playground/public/static/index.html b/playground/public/static/index.html
new file mode 100644
index 00000000..adc5fbbb
--- /dev/null
+++ b/playground/public/static/index.html
@@ -0,0 +1,147 @@
+
+
+
+
+
+
+ Code PathFinder Playground - Interactive Code Analysis Tool | Open Source CodeQL alternative
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/playground/public/static/js/app.js b/playground/public/static/js/app.js
new file mode 100644
index 00000000..4a93b4a3
--- /dev/null
+++ b/playground/public/static/js/app.js
@@ -0,0 +1,131 @@
+// Main application entry point
+import { VisualizationService } from './services/VisualizationService.js';
+import { ASTService } from './services/ASTService.js';
+import { UIComponents } from './components/UIComponents.js';
+import { EditorService } from './services/EditorService.js';
+import { debounce } from './utils/helpers.js';
+
+class CodePathfinder {
+ constructor() {
+ this.visualizationService = new VisualizationService();
+ this.astService = new ASTService();
+ this.uiComponents = new UIComponents();
+ this.editorService = new EditorService();
+ }
+
+ async initialize() {
+ // Initialize UI components
+ this.uiComponents.initializeResizablePanel();
+
+ // Initialize network container
+ const container = document.getElementById('visualization');
+ if (container) {
+ this.network = this.visualizationService.initializeNetwork(container);
+ this.uiComponents.initializeZoomControls(container, this.network);
+ }
+
+ // Initialize event listeners
+ this.initializeEventListeners();
+
+ // Initialize editor and trigger initial parse
+ try {
+ const { editor, queryEditor } = await this.editorService.initializeEditors();
+
+ this.editor = editor;
+ this.queryEditor = queryEditor;
+
+ const code = this.editor.getValue();
+ const data = await this.editorService.parseCode(code);
+ const { nodes, edges } = await this.astService.parseAndVisualize(data.ast);
+ this.visualizationService.updateVisualization(nodes, edges);
+ this.uiComponents.updateASTList(nodes);
+
+ // Add automatic parsing on code change
+ if (this.editor) {
+ this.editor.on('change', debounce(async () => {
+ try {
+ const code = this.editor.getValue();
+ const data = await this.editorService.parseCode(code);
+ const { nodes, edges } = await this.astService.parseAndVisualize(data.ast);
+ this.visualizationService.updateVisualization(nodes, edges);
+ this.uiComponents.updateASTList(nodes);
+ } catch (error) {
+ console.error('Error parsing code:', error);
+ }
+ }, 1000));
+ }
+ } catch (error) {
+ console.error('Error initializing editor:', error);
+ }
+ }
+
+ initializeEventListeners() {
+ // Query execution
+ document.getElementById('executeQuery')?.addEventListener('click', async () => {
+ const code = this.editor?.getValue();
+ const query = this.queryEditor?.getValue();
+ if (code && query) {
+ await this.executeQuery(code, query);
+ this.uiComponents.setActiveTab('results');
+ }
+ });
+
+ // Parse button
+ document.getElementById('parseAST')?.addEventListener('click', async () => {
+ try {
+ const code = this.editor?.getValue();
+ if (code) {
+ const data = await this.editorService.parseCode(code);
+ const { nodes, edges } = await this.astService.parseAndVisualize(data.ast);
+ this.visualizationService.updateVisualization(nodes, edges);
+ this.uiComponents.updateASTList(nodes);
+ }
+ } catch (error) {
+ console.error('Error parsing code:', error);
+ }
+ });
+
+ // Tab switching
+ document.querySelectorAll('.tab-button').forEach(button => {
+ button.addEventListener('click', () => {
+ this.uiComponents.setActiveTab(button.dataset.tab);
+ });
+ });
+ }
+
+ async executeQuery(code, query) {
+ try {
+ const response = await fetch('/api/analyze', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({ javaSource: code, query })
+ });
+
+ if (!response.ok) {
+ throw new Error(`HTTP error! status: ${response.status}`);
+ }
+
+ const data = await response.json();
+ // sort the data.results based on result.line
+ data.results.sort((a, b) => a.line - b.line);
+ document.getElementById('queryResults').innerHTML = this.astService.formatQueryResults(data);
+ // highlight code line number from result.line
+ this.editorService.highlightCodeLines(data.results);
+ } catch (error) {
+ console.error('Error executing query:', error);
+ document.getElementById('queryResults').innerHTML = `
+
+ Error executing query: ${error.message}
+
+ `;
+ }
+ }
+}
+
+// Initialize application when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+ const app = new CodePathfinder();
+ app.initialize();
+});
diff --git a/playground/public/static/js/components/UIComponents.js b/playground/public/static/js/components/UIComponents.js
new file mode 100644
index 00000000..9284934a
--- /dev/null
+++ b/playground/public/static/js/components/UIComponents.js
@@ -0,0 +1,111 @@
+// UI Components - Handles UI-related functionality and components
+export class UIComponents {
+ constructor() {
+ this.activeTab = 'visualization';
+ }
+
+ initializeResizablePanel() {
+ const gutter = document.querySelector('.gutter');
+ const leftPanel = document.querySelector('.left-panel');
+ const rightPanel = document.querySelector('.right-panel');
+ let isResizing = false;
+ let startX;
+ let startLeftWidth;
+
+ gutter.addEventListener('mousedown', (e) => {
+ isResizing = true;
+ gutter.classList.add('active');
+ startX = e.pageX;
+ startLeftWidth = leftPanel.offsetWidth;
+ });
+
+ document.addEventListener('mousemove', (e) => {
+ if (!isResizing) return;
+
+ const mainContent = document.querySelector('.main-content');
+ const totalWidth = mainContent.offsetWidth;
+ const dx = e.pageX - startX;
+
+ let newLeftWidth = ((startLeftWidth + dx) / totalWidth) * 100;
+ newLeftWidth = Math.min(Math.max(newLeftWidth, 20), 80);
+
+ leftPanel.style.width = `${newLeftWidth}%`;
+ rightPanel.style.width = `${100 - newLeftWidth}%`;
+ gutter.style.left = `${newLeftWidth}%`;
+
+ if (window.editor) {
+ window.editor.refresh();
+ }
+ if (window.updateVisualization) {
+ window.updateVisualization(window.currentNodes, window.currentEdges);
+ }
+ });
+
+ document.addEventListener('mouseup', () => {
+ isResizing = false;
+ gutter.classList.remove('active');
+ });
+ }
+
+ initializeZoomControls(container, network) {
+ const zoomControls = document.createElement('div');
+ zoomControls.className = 'zoom-controls';
+ zoomControls.innerHTML = `
+
+
+
+ 100%
+ `;
+
+ container.appendChild(zoomControls);
+
+ document.querySelector('.zoom-in')?.addEventListener('click', () => {
+ if (network) {
+ network.moveTo({
+ scale: network.getScale() * 1.2
+ });
+ }
+ });
+
+ document.querySelector('.zoom-out')?.addEventListener('click', () => {
+ if (network) {
+ network.moveTo({
+ scale: network.getScale() * 0.8
+ });
+ }
+ });
+
+ document.querySelector('.zoom-reset')?.addEventListener('click', () => {
+ if (network) {
+ network.fit();
+ }
+ });
+ }
+
+ setActiveTab(tabName) {
+ this.activeTab = tabName;
+ this.updateTabUI();
+ }
+
+ updateTabUI() {
+ document.querySelectorAll('.tab-button').forEach(button => {
+ button.classList.toggle('active', button.dataset.tab === this.activeTab);
+ });
+ document.querySelectorAll('.tab-pane').forEach(pane => {
+ pane.classList.toggle('active', pane.id === `${this.activeTab}-tab`);
+ });
+ }
+
+ updateASTList(nodes) {
+ const astList = document.getElementById('ast-list');
+ if (!astList) return;
+
+ astList.innerHTML = nodes.map(node => `
+
+ ${node.type}
+ ${node.name ? `${node.name}` : ''}
+ ${node.line ? `Line: ${node.line}` : ''}
+
+ `).join('');
+ }
+}
diff --git a/playground/public/static/js/services/ASTService.js b/playground/public/static/js/services/ASTService.js
new file mode 100644
index 00000000..bd0c5b54
--- /dev/null
+++ b/playground/public/static/js/services/ASTService.js
@@ -0,0 +1,135 @@
+// AST Service - Handles AST processing and node management
+export class ASTService {
+ constructor() {
+ this.validTypes = [
+ 'ClassDeclaration', 'ClassOrInterfaceDeclaration',
+ 'MethodDeclaration', 'ConstructorDeclaration',
+ 'VariableDeclaration', 'VariableDeclarator',
+ 'Parameter', 'LocalVariable',
+ 'FieldDeclaration', 'FieldAccess', 'MethodInvocation'
+ ];
+ }
+
+ processNode(node, parentId = null, lastValidParentId = null, level = 0) {
+ const nodeId = node.id || `node_${Math.random().toString(36).substr(2, 9)}`;
+ let currentValidParentId = lastValidParentId;
+
+ if (this.validTypes.includes(node.type)) {
+ let category;
+ let mass = 1; // Base mass for node physics
+
+ if (node.type === 'ClassDeclaration' || node.type === 'ClassOrInterfaceDeclaration') {
+ category = 'class';
+ mass = 3; // Classes are heavier
+ } else if (node.type === 'MethodDeclaration' || node.type === 'ConstructorDeclaration') {
+ category = 'method';
+ mass = 2; // Methods are medium weight
+ } else if (node.type === 'FieldDeclaration' || node.type === 'FieldAccess') {
+ category = 'fields';
+ mass = 1.5; // Fields slightly more stable than variables
+ } else if (node.type === 'MethodInvocation') {
+ category = 'method-calls';
+ }
+
+ // Add node to visualization data
+ this.visNodes.push({
+ id: nodeId,
+ label: `${node.type}\n${node.name || ''}`,
+ type: node.type,
+ category: category,
+ level: level,
+ mass: mass,
+ name: node.name,
+ line: node.line
+ });
+
+ // Connect to parent if exists
+ if (parentId) {
+ this.visEdges.push({
+ from: parentId,
+ to: nodeId,
+ arrows: 'to'
+ });
+ }
+
+ currentValidParentId = nodeId;
+ }
+
+ // Process child nodes
+ if (node.children) {
+ node.children.forEach(child => {
+ this.processNode(child, currentValidParentId, currentValidParentId, level + 1);
+ });
+ }
+ }
+
+ async parseAndVisualize(ast) {
+ if (!ast) {
+ console.error('No AST data provided');
+ return { nodes: [], edges: [] };
+ }
+
+ try {
+ this.visNodes = [];
+ this.visEdges = [];
+ this.processNode(ast);
+ return { nodes: this.visNodes, edges: this.visEdges };
+ } catch (error) {
+ console.error('Error processing AST:', error);
+ return { nodes: [], edges: [] };
+ }
+ }
+
+ formatQueryResults(data) {
+ if (!data || !data.results) return '';
+
+ const tableHeader = `
+ `;
+
+ const tableRows = data.results.map(result => {
+ const kind = result.kind || '';
+ const category = this.getCategory(kind);
+
+ return `
+
+ | ${result.file.split('/').pop()} |
+ ${result.line || '-'} |
+ ${kind || '-'} |
+
+ `;
+ }).join('');
+
+ return `
+
+ ${tableHeader}
+ ${tableRows}
+
+ `;
+ }
+
+ getCategory(kind) {
+ // Java language-based types
+ const javaTypes = [
+ 'method_declaration',
+ 'class_declaration',
+ 'interface_declaration',
+ 'field_declaration',
+ 'constructor_declaration',
+ 'variable_declaration',
+ 'parameter',
+ 'annotation',
+ 'enum_declaration',
+ 'package_declaration',
+ 'import_declaration'
+ ];
+
+ // Check if the kind matches any of our known types
+ const kindLower = kind.toLowerCase();
+ if (javaTypes.some(type => kindLower.includes(type))) return 'java';
+ return 'other';
+ }
+}
diff --git a/playground/public/static/js/services/EditorService.js b/playground/public/static/js/services/EditorService.js
new file mode 100644
index 00000000..eb83b065
--- /dev/null
+++ b/playground/public/static/js/services/EditorService.js
@@ -0,0 +1,136 @@
+// Editor Service - Handles CodeMirror editor initialization and management
+export class EditorService {
+ constructor() {
+ this.editor = null;
+ this.queryEditor = null;
+ this.defaultJavaCode = `public class UserService {
+ private final UserRepository userRepository;
+ private final Logger logger;
+
+ public UserService(UserRepository userRepository) {
+ this.userRepository = userRepository;
+ this.logger = LoggerFactory.getLogger(UserService.class);
+ }
+
+ public User getUserById(String id) {
+ logger.info("Fetching user with id: {}", id);
+ return userRepository.findById(id)
+ .orElseThrow(() -> new UserNotFoundException("User not found"));
+ }
+
+ public List getAllUsers() {
+ return userRepository.findAll();
+ }
+
+ public User createUser(User user) {
+ if (userRepository.existsByEmail(user.getEmail())) {
+ throw new DuplicateEmailException("Email already exists");
+ }
+ return userRepository.save(user);
+ }
+
+ public void deleteUser(String id) {
+ int i = 0;
+ if (!userRepository.existsById(id, i)) {
+ throw new UserNotFoundException("User not found");
+ }
+ userRepository.deleteById(id);
+ }
+}`;
+ this.defaultQuery = `FROM method_declaration AS md
+WHERE md.getVisibility() == "public"
+SELECT md, "Listing all public methods"`;
+ }
+
+ async initializeEditors() {
+ // Initialize main code editor
+ let editorElement = document.getElementById('codeEditor');
+ if (editorElement) {
+ this.editor = CodeMirror(editorElement, {
+ mode: 'text/x-java',
+ theme: 'monokai',
+ lineNumbers: true,
+ lineWrapping: true,
+ scrollbarStyle: 'native',
+ viewportMargin: Infinity,
+ value: this.defaultJavaCode
+ });
+ }
+
+ // Initialize query editor
+ let queryEditorElement = document.getElementById('queryEditor');
+ if (queryEditorElement) {
+ this.queryEditor = CodeMirror(queryEditorElement, {
+ mode: 'text/x-sql',
+ theme: 'monokai',
+ lineNumbers: true,
+ autoCloseBrackets: true,
+ matchBrackets: true,
+ indentUnit: 4,
+ tabSize: 4,
+ lineWrapping: true,
+ scrollbarStyle: 'native',
+ viewportMargin: Infinity,
+ value: this.defaultQuery
+ });
+ }
+
+ return {
+ editor: this.editor,
+ queryEditor: this.queryEditor
+ };
+ }
+
+ getEditor() {
+ return this.editor;
+ }
+
+ getQueryEditor() {
+ return this.queryEditor;
+ }
+
+ async parseCode(code) {
+ try {
+ const response = await fetch('/api/parse', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({ code: code })
+ });
+
+ if (!response.ok) {
+ throw new Error(`HTTP error! status: ${response.status}`);
+ }
+
+ return await response.json();
+ } catch (error) {
+ console.error('Error parsing code:', error);
+ throw error;
+ }
+ }
+
+ highlightCodeLines(results) {
+ if (!this.editor) return;
+
+ // Clear any existing highlights
+ this.editor.getAllMarks().forEach(mark => mark.clear());
+
+ results.forEach(result => {
+ // Add a gutter marker
+ const marker = document.createElement('div');
+ marker.className = 'CodeMirror-search-marker';
+ this.editor.setGutterMarker(result.line - 1, 'CodeMirror-search-markers', marker);
+
+ // Highlight the line
+ this.editor.addLineClass(result.line - 1, 'background', 'CodeMirror-search-match');
+
+ // Mark the text for better visibility
+ this.editor.markText(
+ {line: result.line - 1, ch: 0},
+ {line: result.line - 1, ch: this.editor.getLine(result.line - 1).length},
+ {className: 'CodeMirror-search-text'}
+ );
+ });
+ }
+}
diff --git a/playground/public/static/js/services/VisualizationService.js b/playground/public/static/js/services/VisualizationService.js
new file mode 100644
index 00000000..f9267f78
--- /dev/null
+++ b/playground/public/static/js/services/VisualizationService.js
@@ -0,0 +1,212 @@
+// Visualization Service - Handles graph visualization using vis.js
+export class VisualizationService {
+ constructor() {
+ this.network = null;
+ this.currentNodes = [];
+ this.currentEdges = [];
+ this.visNodes = [];
+ this.visEdges = [];
+ this.options = {
+ nodes: {
+ shape: 'box',
+ size: 16,
+ borderWidth: 2,
+ color: {
+ border: '#61dafb',
+ background: '#1e1e1e'
+ },
+ font: {
+ face: 'Inter',
+ size: 14,
+ color: '#ffffff'
+ },
+ shadow: {
+ enabled: true,
+ color: 'rgba(97, 218, 251, 0.2)',
+ size: 4,
+ x: 0,
+ y: 2
+ }
+ },
+ edges: {
+ color: {
+ color: '#4d4d4d',
+ opacity: 0.6,
+ highlight: '#61dafb',
+ hover: '#61dafb'
+ },
+ width: 2,
+ smooth: {
+ type: 'curvedCW',
+ roundness: 0.2,
+ forceDirection: 'none'
+ },
+ arrows: {
+ to: {
+ enabled: true,
+ scaleFactor: 0.7,
+ type: 'circle'
+ }
+ },
+ shadow: {
+ enabled: true,
+ color: 'rgba(0,0,0,0.2)',
+ size: 5,
+ x: 2,
+ y: 2
+ }
+ },
+ physics: {
+ enabled: true,
+ solver: 'barnesHut',
+ barnesHut: {
+ gravitationalConstant: -10000,
+ centralGravity: 1.5,
+ springLength: 300,
+ springConstant: 0.5,
+ damping: 0.9,
+ avoidOverlap: 1
+ },
+ stabilization: {
+ enabled: true,
+ iterations: 1000,
+ updateInterval: 10,
+ onlyDynamicEdges: false,
+ fit: true
+ },
+ minVelocity: 0.01,
+ maxVelocity: 10,
+ timestep: 0.1,
+ adaptiveTimestep: true
+ },
+ layout: {
+ improvedLayout: true,
+ randomSeed: 42,
+ hierarchical: {
+ enabled: false,
+ direction: 'LR',
+ sortMethod: 'directed',
+ nodeSpacing: 200,
+ levelSeparation: 300
+ }
+ },
+ groups: this.getNodeGroups()
+ };
+ }
+
+ getNodeGroups() {
+ return {
+ class: {
+ color: {
+ background: '#4CAF50',
+ border: '#66BB6A',
+ highlight: { background: '#66BB6A', border: '#66BB6A' },
+ hover: { background: '#66BB6A', border: '#66BB6A' }
+ }
+ },
+ constructordeclaration: {
+ background: '#2196F3',
+ border: '#2196F3',
+ highlight: { background: '#42A5F5', border: '#42A5F5' },
+ hover: { background: '#42A5F5', border: '#42A5F5' }
+ },
+ 'MethodDeclaration': {
+ background: '#2196F3',
+ border: '#2196F3',
+ highlight: { background: '#42A5F5', border: '#42A5F5' },
+ hover: { background: '#42A5F5', border: '#42A5F5' }
+ },
+ methodinvocation: {
+ background: '#9C27B0',
+ border: '#9C27B0',
+ highlight: { background: '#AB47BC', border: '#AB47BC' },
+ hover: { background: '#AB47BC', border: '#AB47BC' }
+ }
+ };
+ }
+
+ initializeNetwork(container) {
+ if (!container) return;
+
+ this.network = new vis.Network(container, {
+ nodes: new vis.DataSet([]),
+ edges: new vis.DataSet([])
+ }, this.options);
+
+ this.initializeNetworkEvents();
+ return this.network;
+ }
+
+ initializeNetworkEvents() {
+ if (!this.network) return;
+
+ this.network.on('click', (params) => {
+ if (params.nodes.length > 0) {
+ const nodeId = params.nodes[0];
+ const node = this.currentNodes.find(n => n.id === nodeId);
+ if (node) {
+ console.log('Selected node:', node);
+ }
+ }
+ });
+ }
+
+ updateVisualization(newNodes = [], newEdges = []) {
+ if (!this.network || !newNodes || !newEdges) return;
+
+ this.currentNodes = newNodes;
+ this.currentEdges = newEdges;
+ this.visNodes = newNodes;
+ this.visEdges = newEdges;
+
+ const nodesDataSet = new vis.DataSet(newNodes.map(node => ({
+ id: node.id,
+ label: node.label || `${node.type}\n${node.name || ''}`,
+ color: this.getNodeColor(node.type),
+ font: {
+ color: '#ffffff',
+ size: 14,
+ face: 'Inter'
+ },
+ shape: 'box',
+ margin: 10,
+ shadow: true,
+ title: node.line ? `Line: ${node.line}` : undefined
+ })));
+
+ const edgesDataSet = new vis.DataSet(newEdges.map(edge => ({
+ from: edge.from,
+ to: edge.to,
+ arrows: 'to',
+ color: { color: '#4d4d4d', highlight: '#61dafb' },
+ width: 1,
+ smooth: {
+ type: 'continuous',
+ roundness: 0.2
+ }
+ })));
+
+ this.network.setData({ nodes: nodesDataSet, edges: edgesDataSet });
+ }
+
+ getNodeColor(type) {
+ const nodeType = type.toLowerCase();
+ const colors = {
+ classdeclaration: { background: '#4CAF50', border: '#66BB6A' },
+ methoddeclaration: { background: '#2196F3', border: '#2196F3' },
+ fielddeclaration: { background: '#FF9800', border: '#FF9800' },
+ compilationunit: { background: '#ec8c4c', border: '#c678dd' },
+ constructordeclaration: { background: '#2196F3', border: '#2196F3' },
+ methodinvocation: { background: '#9C27B0', border: '#AB47BC' },
+ default: { background: '#FF5722', border: '#FF5722' }
+ };
+
+ if (nodeType.includes('class')) return colors.classdeclaration;
+ if (nodeType.includes('methoddeclaration')) return colors.methoddeclaration;
+ if (nodeType.includes('field')) return colors.fielddeclaration;
+ if (nodeType.includes('compilation')) return colors.compilationunit;
+ if (nodeType.includes('methodinvocation')) return colors.methodinvocation;
+ if (nodeType.includes('constructor')) return colors.constructordeclaration;
+ return colors.default;
+ }
+}
diff --git a/playground/public/static/js/utils/helpers.js b/playground/public/static/js/utils/helpers.js
new file mode 100644
index 00000000..a2c0e262
--- /dev/null
+++ b/playground/public/static/js/utils/helpers.js
@@ -0,0 +1,12 @@
+// Helper functions and utilities
+export const debounce = (func, wait) => {
+ let timeout;
+ return function executedFunction(...args) {
+ const later = () => {
+ clearTimeout(timeout);
+ func(...args);
+ };
+ clearTimeout(timeout);
+ timeout = setTimeout(later, wait);
+ };
+};
diff --git a/playground/public/static/script.js b/playground/public/static/script.js
new file mode 100644
index 00000000..0d2348c3
--- /dev/null
+++ b/playground/public/static/script.js
@@ -0,0 +1,815 @@
+// Debounce function to limit the rate of API calls
+function debounce(func, wait) {
+ let timeout;
+ return function executedFunction(...args) {
+ const later = () => {
+ clearTimeout(timeout);
+ func(...args);
+ };
+ clearTimeout(timeout);
+ timeout = setTimeout(later, wait);
+ };
+}
+
+// Initialize split panel resizing
+function initResizablePanel() {
+ const gutter = document.querySelector('.gutter');
+ const leftPanel = document.querySelector('.left-panel');
+ const rightPanel = document.querySelector('.right-panel');
+ let isResizing = false;
+ let startX;
+ let startLeftWidth;
+
+ gutter.addEventListener('mousedown', (e) => {
+ isResizing = true;
+ gutter.classList.add('active');
+ startX = e.pageX;
+ startLeftWidth = leftPanel.offsetWidth;
+ });
+
+ document.addEventListener('mousemove', (e) => {
+ if (!isResizing) return;
+
+ const mainContent = document.querySelector('.main-content');
+ const totalWidth = mainContent.offsetWidth;
+ const dx = e.pageX - startX;
+
+ // Calculate new widths as percentages
+ let newLeftWidth = ((startLeftWidth + dx) / totalWidth) * 100;
+ newLeftWidth = Math.min(Math.max(newLeftWidth, 20), 80); // Limit between 20% and 80%
+
+ leftPanel.style.width = `${newLeftWidth}%`;
+ rightPanel.style.width = `${100 - newLeftWidth}%`;
+ gutter.style.left = `${newLeftWidth}%`;
+
+ // Refresh editor and visualization
+ editor.refresh();
+ updateVisualization(currentNodes, currentEdges);
+ });
+
+ document.addEventListener('mouseup', () => {
+ isResizing = false;
+ gutter.classList.remove('active');
+ });
+}
+
+// UI State Management
+const UIState = {
+ activeTab: 'visualization',
+ setActiveTab(tabName) {
+ this.activeTab = tabName;
+ this.updateTabUI();
+ },
+ updateTabUI() {
+ document.querySelectorAll('.tab-button').forEach(button => {
+ button.classList.toggle('active', button.dataset.tab === this.activeTab);
+ });
+ document.querySelectorAll('.tab-pane').forEach(pane => {
+ pane.classList.toggle('active', pane.id === `${this.activeTab}-tab`);
+ });
+ }
+};
+
+// Network Visualization Service
+const VisualizationService = {
+ updateVisualization(nodes, edges) {
+ if (!network) return;
+
+ const data = {
+ nodes: new vis.DataSet(nodes),
+ edges: new vis.DataSet(edges)
+ };
+
+ network.setData(data);
+ currentNodes = nodes;
+ currentEdges = edges;
+
+ // Fit the network view
+ network.fit({
+ animation: {
+ duration: 1000,
+ easingFunction: 'easeInOutQuad'
+ }
+ });
+ },
+
+ initializeNetwork(container) {
+ network = new vis.Network(container, {
+ nodes: new vis.DataSet([]),
+ edges: new vis.DataSet([])
+ }, options);
+
+ this.initializeNetworkEvents();
+ },
+
+ initializeNetworkEvents() {
+ if (!network) return;
+
+ network.on('click', (params) => {
+ if (params.nodes.length > 0) {
+ const nodeId = params.nodes[0];
+ const node = currentNodes.find(n => n.id === nodeId);
+ if (node) {
+ console.log('Selected node:', node);
+ }
+ }
+ });
+ }
+};
+
+// Initialize global variables
+let network = null;
+let editor = null;
+let queryEditor = null;
+let currentNodes = [];
+let currentEdges = [];
+
+// Network visualization options
+const options = {
+ nodes: {
+ shape: 'dot',
+ size: 20,
+ borderWidth: 2,
+ color: {
+ border: '#61dafb',
+ background: '#1e1e1e'
+ },
+ font: {
+ face: 'Inter',
+ size: 14,
+ color: '#ffffff'
+ },
+ shadow: {
+ enabled: true,
+ color: 'rgba(97, 218, 251, 0.2)',
+ size: 4,
+ x: 0,
+ y: 2
+ }
+ },
+ edges: {
+ color: {
+ color: '#4d4d4d',
+ opacity: 0.6,
+ highlight: '#61dafb',
+ hover: '#61dafb'
+ },
+ width: 2,
+ smooth: {
+ type: 'curvedCW',
+ roundness: 0.2,
+ forceDirection: 'none'
+ },
+ arrows: {
+ to: {
+ enabled: true,
+ scaleFactor: 0.7,
+ type: 'circle'
+ }
+ },
+ shadow: {
+ enabled: true,
+ color: 'rgba(0,0,0,0.2)',
+ size: 5,
+ x: 2,
+ y: 2
+ }
+ },
+ physics: {
+ enabled: true,
+ solver: 'barnesHut', // Changed to barnesHut for more stability
+ barnesHut: {
+ gravitationalConstant: -10000,
+ centralGravity: 1.5, // Very strong center pull
+ springLength: 300,
+ springConstant: 0.5, // Very stiff springs
+ damping: 0.9, // High damping to prevent movement
+ avoidOverlap: 1
+ },
+ stabilization: {
+ enabled: true,
+ iterations: 1000,
+ updateInterval: 10,
+ onlyDynamicEdges: false,
+ fit: true
+ },
+ minVelocity: 0.01, // Very low min velocity
+ maxVelocity: 10, // Very low max velocity
+ timestep: 0.1, // Very slow physics
+ adaptiveTimestep: true
+ },
+ interaction: {
+ hover: true,
+ tooltipDelay: 200,
+ zoomView: true,
+ dragView: true,
+ dragNodes: true,
+ multiselect: true
+ },
+ layout: {
+ improvedLayout: true,
+ randomSeed: 42,
+ hierarchical: {
+ enabled: false,
+ direction: 'LR',
+ sortMethod: 'directed',
+ nodeSpacing: 200,
+ levelSeparation: 300
+ }
+ },
+ groups: {
+ class: {
+ color: {
+ background: 'rgba(97, 218, 251, 0.7)',
+ border: '#61dafb',
+ highlight: { background: '#61dafb', border: '#61dafb' },
+ hover: { background: '#61dafb', border: '#61dafb' }
+ },
+ shape: 'dot',
+ size: 50,
+ font: {
+ size: 18,
+ strokeWidth: 2,
+ strokeColor: '#000000'
+ },
+ shadow: {
+ enabled: true,
+ color: 'rgba(0,0,0,0.2)',
+ size: 10,
+ x: 4,
+ y: 4
+ }
+ },
+ 'constructor-method': {
+ color: {
+ background: 'rgba(152, 195, 121, 0.7)',
+ border: '#98c379',
+ highlight: { background: '#98c379', border: '#98c379' },
+ hover: { background: '#98c379', border: '#98c379' }
+ },
+ shape: 'dot',
+ size: 45,
+ font: {
+ size: 16,
+ strokeWidth: 2,
+ strokeColor: '#000000'
+ },
+ shadow: {
+ enabled: true,
+ color: 'rgba(0,0,0,0.2)',
+ size: 8,
+ x: 3,
+ y: 3
+ }
+ },
+ fields: {
+ color: {
+ background: 'rgba(229, 192, 123, 0.7)',
+ border: '#e5c07b',
+ highlight: { background: '#e5c07b', border: '#e5c07b' },
+ hover: { background: '#e5c07b', border: '#e5c07b' }
+ },
+ shape: 'dot',
+ size: 40,
+ font: {
+ size: 16,
+ strokeWidth: 2,
+ strokeColor: '#000000'
+ },
+ shadow: {
+ enabled: true,
+ color: 'rgba(0,0,0,0.2)',
+ size: 8,
+ x: 3,
+ y: 3
+ }
+ },
+ variables: {
+ color: {
+ background: 'rgba(198, 120, 221, 0.7)',
+ border: '#c678dd',
+ highlight: { background: '#c678dd', border: '#c678dd' },
+ hover: { background: '#c678dd', border: '#c678dd' }
+ },
+ shape: 'dot',
+ size: 35,
+ font: {
+ size: 14,
+ strokeWidth: 2,
+ strokeColor: '#000000'
+ },
+ shadow: {
+ enabled: true,
+ color: 'rgba(0,0,0,0.2)',
+ size: 8,
+ x: 3,
+ y: 3
+ }
+ },
+ 'method-calls': {
+ color: {
+ background: 'rgba(95, 179, 179, 0.7)',
+ border: '#5fb3b3',
+ highlight: { background: '#5fb3b3', border: '#5fb3b3' },
+ hover: { background: '#5fb3b3', border: '#5fb3b3' }
+ },
+ shape: 'dot',
+ size: 35,
+ font: {
+ size: 14,
+ strokeWidth: 2,
+ strokeColor: '#000000'
+ },
+ shadow: {
+ enabled: true,
+ color: 'rgba(0,0,0,0.2)',
+ size: 8,
+ x: 3,
+ y: 3
+ }
+ }
+ }
+};
+
+// Initialize application when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+ initResizablePanel();
+
+ const container = document.getElementById('visualization');
+ if (container) {
+ VisualizationService.initializeNetwork(container);
+ }
+
+ // Initialize editors
+ editor = CodeMirror(document.getElementById('codeEditor'), {
+ mode: 'text/x-java',
+ theme: 'monokai',
+ lineNumbers: true,
+ lineWrapping: true,
+ scrollbarStyle: 'native',
+ viewportMargin: Infinity,
+ value: `public class UserService {
+ private final UserRepository userRepository;
+ private final Logger logger;
+
+ public UserService(UserRepository userRepository) {
+ this.userRepository = userRepository;
+ this.logger = LoggerFactory.getLogger(UserService.class);
+ }
+
+ public User getUserById(String id) {
+ logger.info("Fetching user with id: {}", id);
+ return userRepository.findById(id)
+ .orElseThrow(() -> new UserNotFoundException("User not found"));
+ }
+
+ public List getAllUsers() {
+ return userRepository.findAll();
+ }
+
+ public User createUser(User user) {
+ if (userRepository.existsByEmail(user.getEmail())) {
+ throw new DuplicateEmailException("Email already exists");
+ }
+ return userRepository.save(user);
+ }
+
+ public void deleteUser(String id) {
+ int i = 0;
+ if (!userRepository.existsById(id, i)) {
+ throw new UserNotFoundException("User not found");
+ }
+ userRepository.deleteById(id);
+ }
+}`
+ });
+
+ queryEditor = CodeMirror(document.getElementById('queryEditor'), {
+ mode: 'text/x-java',
+ theme: 'monokai',
+ lineNumbers: true,
+ lineWrapping: true,
+ placeholder: 'Enter your query here...'
+ });
+
+ document.getElementById('executeQuery').addEventListener('click', async () => {
+ const code = editor.getValue();
+ const query = queryEditor.getValue();
+ await executeQuery(code, query);
+ UIState.setActiveTab('results');
+ });
+
+ // Initialize tab switching
+ document.querySelectorAll('.tab-button').forEach(button => {
+ button.addEventListener('click', () => {
+ UIState.setActiveTab(button.dataset.tab);
+ });
+ });
+
+ // Add automatic parsing on code change
+ editor.on('change', debounce(() => {
+ const code = editor.getValue();
+ //ASTService.parseAndVisualize(code);
+ }, 1000));
+});
+
+// Create zoom controls for the visualization
+const zoomControls = document.createElement('div');
+zoomControls.className = 'zoom-controls';
+zoomControls.innerHTML = `
+
+
+
+ 100%
+`;
+
+// Initialize visualization when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+ // Initialize resizable panels
+ initResizablePanel();
+
+ // Initialize network container
+ const container = document.getElementById('visualization');
+ if (container) {
+ // Create the network
+ network = new vis.Network(container, {
+ nodes: new vis.DataSet([]),
+ edges: new vis.DataSet([])
+ }, options);
+
+ // Add zoom controls to the container
+ container.appendChild(zoomControls);
+
+ // Add zoom control event listeners
+ document.querySelector('.zoom-in')?.addEventListener('click', () => {
+ if (network) {
+ network.moveTo({
+ scale: network.getScale() * 1.2
+ });
+ }
+ });
+
+ document.querySelector('.zoom-out')?.addEventListener('click', () => {
+ if (network) {
+ network.moveTo({
+ scale: network.getScale() * 0.8
+ });
+ }
+ });
+
+ document.querySelector('.zoom-reset')?.addEventListener('click', () => {
+ if (network) {
+ network.fit();
+ }
+ });
+ }
+
+ // Add event listeners for buttons
+ document.getElementById('executeQuery')?.addEventListener('click', async () => {
+ const javaSource = editor.getValue();
+ const query = queryEditor.getValue();
+
+ try {
+ // Execute query
+ const response = await fetch('/api/analyze', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ javaSource,
+ query
+ })
+ });
+
+ if (!response.ok) {
+ throw new Error(`HTTP error! status: ${response.status}`);
+ }
+
+ const data = await response.json();
+ document.getElementById('queryResults').innerHTML = formatQueryResults(data);
+ highlightNodes(data.matches);
+ } catch (error) {
+ console.error('Error:', error);
+ document.getElementById('queryResults').innerHTML =
+ `Error: ${error.message}`;
+ }
+ });
+
+ document.getElementById('parseAST')?.addEventListener('click', async () => {
+ const javaSource = editor.getValue();
+
+ try {
+ // Parse AST
+ const response = await fetch('/api/parse', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ code: javaSource
+ })
+ });
+
+ if (!response.ok) {
+ throw new Error(`HTTP error! status: ${response.status}`);
+ }
+
+ const data = await response.json();
+ const visNodes = [];
+ const visEdges = [];
+
+ // Process AST nodes with clustering support
+ function processNode(node, parentId = null, lastValidParentId = null) {
+ const validTypes = ['ClassDeclaration', 'ClassOrInterfaceDeclaration',
+ 'MethodDeclaration', 'ConstructorDeclaration',
+ 'VariableDeclaration', 'VariableDeclarator',
+ 'Parameter', 'LocalVariable',
+ 'FieldDeclaration', 'FieldAccess', 'MethodInvocation'];
+
+ const nodeId = node.id || `node_${Math.random().toString(36).substr(2, 9)}`;
+ let currentValidParentId = lastValidParentId;
+
+ if (validTypes.includes(node.type)) {
+ let category;
+ let mass = 1; // Base mass for node physics
+
+ if (node.type === 'ClassDeclaration' || node.type === 'ClassOrInterfaceDeclaration') {
+ category = 'class';
+ mass = 3; // Make classes more stable
+ } else if (node.type === 'MethodDeclaration' || node.type === 'ConstructorDeclaration') {
+ category = 'constructor-method';
+ mass = 2; // Methods slightly more stable
+ } else if (node.type === 'VariableDeclaration' || node.type === 'VariableDeclarator' ||
+ node.type === 'Parameter' || node.type === 'LocalVariable') {
+ category = 'variables';
+ } else if (node.type === 'FieldDeclaration' || node.type === 'FieldAccess') {
+ category = 'fields';
+ mass = 1.5; // Fields slightly more stable than variables
+ } else if (node.type === 'MethodInvocation') {
+ category = 'method-calls';
+ }
+
+ visNodes.push({
+ id: nodeId,
+ label: node.name || node.type,
+ type: node.type,
+ group: category,
+ mass: mass,
+ value: mass * 5,
+ font: {
+ size: 14,
+ color: '#ffffff',
+ face: 'Inter'
+ },
+ title: `${node.type}${node.name ? ': ' + node.name : ''}
+${node.line ? 'Line: ' + node.line : ''}`
+ });
+
+ // Connect to the last valid parent if it exists
+ if (lastValidParentId) {
+ visEdges.push({
+ from: lastValidParentId,
+ to: nodeId,
+ arrows: {
+ to: {
+ enabled: true,
+ scaleFactor: 0.5
+ }
+ },
+ length: 200,
+ value: 1 / mass,
+ smooth: {
+ type: 'continuous',
+ roundness: 0.5
+ }
+ });
+ }
+
+ // Update the last valid parent ID for children
+ currentValidParentId = nodeId;
+ }
+
+ // Process children with the current valid parent ID
+ if (node.children) {
+ node.children.forEach(child => processNode(child, nodeId, currentValidParentId));
+ }
+ }
+
+ processNode(data.ast);
+ updateVisualization(visNodes, visEdges);
+ updateASTList(visNodes);
+ } catch (error) {
+ console.error('Error:', error);
+ document.getElementById('astList').innerHTML =
+ `Error parsing AST: ${error.message}`;
+ }
+ });
+});
+
+// Format query results
+function formatQueryResults(data) {
+ if (!data.matches || data.matches.length === 0) {
+ return 'No matches found';
+ }
+
+ return `Found ${data.matches.length} matches:\n\n` +
+ data.matches.map(match => {
+ return `• ${match.type}: ${match.label}\n ${match.details || ''}`;
+ }).join('\n\n');
+}
+
+// Highlight matching nodes in the visualization
+function highlightNodes(matches) {
+ if (!matches || !matches.length || !network) return;
+
+ const matchIds = new Set(matches.map(m => m.id));
+ const allNodes = network.body.data.nodes.get();
+ const allEdges = network.body.data.edges.get();
+
+ // Update nodes
+ allNodes.forEach(node => {
+ const isHighlighted = matchIds.has(node.id);
+ network.body.data.nodes.update({
+ id: node.id,
+ opacity: isHighlighted ? 1 : 0.2,
+ font: {
+ ...node.font,
+ color: isHighlighted ? '#ffffff' : 'rgba(255,255,255,0.3)'
+ }
+ });
+ });
+
+ // Update edges
+ allEdges.forEach(edge => {
+ const isHighlighted = matchIds.has(edge.from) && matchIds.has(edge.to);
+ network.body.data.edges.update({
+ id: edge.id,
+ opacity: isHighlighted ? 0.8 : 0.1
+ });
+ });
+}
+
+function updateVisualization(newNodes = [], newEdges = []) {
+ if (!network || !newNodes || !newEdges) return;
+
+ // Update current graph data
+ currentNodes = newNodes;
+ currentEdges = newEdges;
+
+ // Create DataSet for nodes with proper styling
+ const nodesDataSet = new vis.DataSet(newNodes.map(node => ({
+ id: node.id,
+ label: node.label || `${node.type}\n${node.name || ''}`,
+ color: getNodeColor(node.type),
+ font: {
+ color: '#ffffff',
+ size: 20,
+ face: 'Inter'
+ },
+ shape: 'dot',
+ size: 25,
+ shadow: true,
+ title: node.line ? `Line: ${node.line}` : undefined,
+ mass: 1,
+ })));
+
+ // Create DataSet for edges with consistent styling
+ const edgesDataSet = new vis.DataSet(newEdges.map(edge => ({
+ from: edge.from,
+ to: edge.to,
+ arrows: 'to',
+ color: { color: '#4d4d4d', highlight: '#61dafb' },
+ width: 1,
+ smooth: {
+ type: 'continuous',
+ roundness: 0.5
+ }
+ })));
+
+ // Update the network
+ network.setData({
+ nodes: nodesDataSet,
+ edges: edgesDataSet
+ });
+
+ // Stabilize and fit the network
+ network.stabilize();
+ network.fit();
+}
+
+function getNodeColor(type) {
+ if (!type) return '#FF5722';
+
+ const colors = {
+ 'classdeclaration': {
+ background: '#4CAF50',
+ border: '#4CAF50',
+ highlight: { background: '#66BB6A', border: '#66BB6A' },
+ hover: { background: '#66BB6A', border: '#66BB6A' }
+ },
+ 'constructordeclaration': {
+ background: '#2196F3',
+ border: '#2196F3',
+ highlight: { background: '#42A5F5', border: '#42A5F5' },
+ hover: { background: '#42A5F5', border: '#42A5F5' }
+ },
+ 'methoddeclaration': {
+ background: '#2196F3',
+ border: '#2196F3',
+ highlight: { background: '#42A5F5', border: '#42A5F5' },
+ hover: { background: '#42A5F5', border: '#42A5F5' }
+ },
+ 'fielddeclaration': {
+ background: '#FF9800',
+ border: '#FF9800',
+ highlight: { background: '#FFA726', border: '#FFA726' },
+ hover: { background: '#FFA726', border: '#FFA726' }
+ },
+ 'methodinvocation': {
+ background: '#9C27B0',
+ border: '#9C27B0',
+ highlight: { background: '#AB47BC', border: '#AB47BC' },
+ hover: { background: '#AB47BC', border: '#AB47BC' }
+ },
+ 'default': {
+ background: '#FF5722',
+ border: '#FF5722',
+ highlight: { background: '#FF7043', border: '#FF7043' },
+ hover: { background: '#FF7043', border: '#FF7043' }
+ }
+ };
+
+ const nodeType = type.toLowerCase();
+ if (nodeType.includes('class')) return colors.classdeclaration;
+ if (nodeType.includes('methoddeclaration')) return colors.methoddeclaration;
+ if (nodeType.includes('field')) return colors.fielddeclaration;
+ if (nodeType.includes('compilation')) return colors.compilationunit;
+ if (nodeType.includes('methodinvocation')) return colors.methodinvocation;
+ if (nodeType.includes('constructor')) return colors.constructordeclaration;
+ return colors.default;
+}
+
+function updateASTList(nodes) {
+ const astList = document.querySelector('.ast-list');
+ if (!astList) return; // Skip if element doesn't exist
+
+ astList.innerHTML = nodes.map(node => `
+
+ ${node.type}
+ ${node.label}
+
+ `).join('');
+}
+
+// Initialize network event handlers
+function initializeNetworkEvents() {
+ if (!network) return;
+
+ // Handle node selection
+ network.on('selectNode', function(params) {
+ if (params.nodes.length > 0) {
+ const nodeId = params.nodes[0];
+ const node = currentNodes.find(n => n.id === nodeId);
+ if (node) {
+ const details = document.getElementById('nodeDetails');
+ details.innerHTML = `
+ Node Details
+ Type: ${node.type}
+ Line: ${node.line || 'N/A'}
+ ${node.name ? `Name: ${node.name}
` : ''}
+ `;
+ highlightNodes([node]);
+ }
+ }
+ });
+
+ // Handle node deselection
+ network.on('deselectNode', function() {
+ const details = document.getElementById('nodeDetails');
+ details.innerHTML = '';
+ // Reset node highlighting
+ if (currentNodes.length > 0) {
+ highlightNodes([]);
+ }
+ });
+
+ // Handle zoom events
+ network.on('zoom', function() {
+ const scale = network.getScale();
+ const zoomLevel = document.querySelector('.zoom-level');
+ if (zoomLevel) {
+ zoomLevel.textContent = `${Math.round(scale * 100)}%`;
+ }
+ });
+
+ // Handle stabilization events
+ network.on('stabilizationProgress', function(params) {
+ const progress = Math.round(params.iterations / params.total * 100);
+ console.log(`Stabilizing: ${progress}%`);
+ });
+
+ network.on('stabilizationIterationsDone', function() {
+ console.log('Network stabilized');
+ });
+}
diff --git a/playground/public/static/style.css b/playground/public/static/style.css
new file mode 100644
index 00000000..b394337e
--- /dev/null
+++ b/playground/public/static/style.css
@@ -0,0 +1,765 @@
+/* Reset and base styles */
+body {
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+ margin: 0;
+ padding: 0;
+ background-color: #111111;
+ color: #ffffff;
+ font-feature-settings: 'liga' 1, 'calt' 1; /* Enable ligatures */
+}
+
+/* App Container */
+.app-container {
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+}
+
+/* Header */
+.header {
+ background-color: #111111;
+ padding: 0.8rem 1.5rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-bottom: 1px solid #3d3d3d;
+ position: relative;
+}
+
+/* Error Message */
+.error-message {
+ position: fixed;
+ top: 20px;
+ right: 20px;
+ background-color: #ff4444;
+ color: white;
+ padding: 12px 20px;
+ border-radius: 4px;
+ box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+ z-index: 1000;
+ font-family: 'Inter', sans-serif;
+ font-size: 14px;
+ max-width: 400px;
+ word-wrap: break-word;
+ display: none;
+ animation: fadeIn 0.3s ease-in-out;
+}
+
+@keyframes fadeIn {
+ from { opacity: 0; transform: translateY(-10px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+
+.header h1 {
+ margin: 0;
+ font-family: 'Space Grotesk', sans-serif;
+ font-size: 1.2rem;
+ font-weight: 600;
+ color: #61dafb;
+ letter-spacing: 0.5px;
+ text-shadow: 0 0 10px rgba(97, 218, 251, 0.3);
+}
+
+.view-controls button {
+ background: transparent;
+ border: 1px solid #4d4d4d;
+ color: #ffffff;
+ padding: 0.4rem 1rem;
+ margin-left: 0.5rem;
+ cursor: pointer;
+ transition: all 0.2s;
+ font-size: 0.9rem;
+ border-radius: 3px;
+}
+
+.view-controls button:hover {
+ border-color: #61dafb;
+ background-color: rgba(97, 218, 251, 0.1);
+}
+
+.view-controls button.active {
+ background-color: #61dafb;
+ border-color: #61dafb;
+ color: #1e1e1e;
+}
+
+/* Main Content */
+.main-content {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+ position: relative;
+}
+
+/* Gutter for resizable panels */
+.gutter {
+ background-color: #2d2d2d;
+ position: absolute;
+ z-index: 10;
+ touch-action: none;
+}
+
+.gutter-horizontal {
+ cursor: col-resize;
+ width: 6px;
+ height: 100%;
+ left: 50%;
+ transform: translateX(-50%);
+}
+
+.gutter:hover {
+ background-color: #61dafb;
+}
+
+.gutter.active {
+ background-color: #61dafb;
+}
+
+/* Panel Headers */
+.panel-header {
+ padding: 0.8rem 1rem;
+ background-color: #2d2d2d;
+ border-bottom: 1px solid #3d3d3d;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.panel-header h2 {
+ margin: 0;
+ font-family: 'Space Grotesk', sans-serif;
+ font-size: 0.9rem;
+ font-weight: 500;
+ color: #e2e2e2;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ text-shadow: 0 0 8px rgba(226, 226, 226, 0.2);
+}
+
+/* Left Panel */
+.left-panel {
+ width: 50%;
+ background-color: #111111;
+ display: flex;
+ flex-direction: column;
+ transition: width 0.1s ease;
+}
+
+.editor-container {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ overflow: auto;
+ min-height: 0;
+}
+
+/* Right Panel */
+.right-panel {
+ width: 50%;
+ background-color: #111111;
+ display: flex;
+ flex-direction: column;
+ transition: width 0.1s ease;
+}
+
+/* Query Console */
+.query-console {
+ height: 300px;
+ background-color: #111111;
+ border-top: 1px solid #3d3d3d;
+ display: flex;
+ flex-direction: column;
+}
+
+/* Results Table Styles */
+.results-table {
+ width: 100%;
+ border-collapse: collapse;
+ font-size: 13px;
+ font-family: 'Space Grotesk', sans-serif;
+ margin: 8px 0;
+ border: 1px solid #2d2d2d;
+ border-radius: 4px;
+ overflow: hidden;
+}
+
+.results-table th,
+.results-table td {
+ padding: 8px 12px;
+ text-align: left;
+ border-bottom: 1px solid #2d2d2d;
+}
+
+.results-table th {
+ color: #8b949e;
+ font-size: 12px;
+ font-weight: 500;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ background: #1e1e1e;
+}
+
+.results-table tr:hover {
+ background: rgba(97, 218, 251, 0.05);
+}
+
+/* CodeMirror Search Highlights */
+.CodeMirror-search-match {
+ background: rgba(97, 218, 251, 0.1);
+}
+
+.CodeMirror-search-text {
+ background: rgba(97, 218, 251, 0.2);
+ border-radius: 2px;
+}
+
+.CodeMirror-search-marker {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ background: #61dafb;
+ margin-top: 6px;
+ box-shadow: 0 0 8px rgba(97, 218, 251, 0.4);
+}
+
+.file-cell {
+ color: #e2e2e2;
+ max-width: 300px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.line-cell {
+ color: #8b949e;
+ text-align: right;
+ width: 50px;
+ font-family: monospace;
+}
+
+.kind-cell {
+ color: #61dafb;
+ font-family: monospace;
+ transition: color 0.2s ease;
+}
+
+.kind-cell[data-category="java"] {
+ color: #61dafb;
+}
+
+.kind-cell[data-category="java"]:hover {
+ color: #61dafb;
+ text-shadow: 0 0 8px rgba(97, 218, 251, 0.3);
+}
+
+.results-table-row:hover {
+ border-left-color: #61dafb;
+ background: rgba(97, 218, 251, 0.05);
+}
+
+/* Interactive hover effects */
+.results-table-row:hover {
+ background: rgba(97, 218, 251, 0.05);
+}
+
+.results-table-row:hover .kind-cell[data-category="java"] {
+ color: #61dafb;
+ text-shadow: 0 0 8px rgba(97, 218, 251, 0.3);
+}
+
+.results-table-row:hover .kind-cell[data-category="android"] {
+ color: #a5d6a7;
+ text-shadow: 0 0 8px rgba(165, 214, 167, 0.3);
+}
+
+/* Smooth transitions */
+.results-table-row,
+.kind-cell {
+ transition: all 0.2s ease;
+}
+
+
+
+.results-table-row:not(.results-table-header):hover {
+ background: #2d2d2d;
+}
+
+.header-cell {
+ font-weight: 600;
+ color: #e2e2e2;
+ font-size: 0.875rem;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ font-family: 'Space Grotesk', sans-serif;
+ position: relative;
+ padding-bottom: 0.5rem;
+}
+
+.header-cell::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 2rem;
+ height: 2px;
+ background: #3d3d3d;
+ transition: width 0.2s ease;
+}
+
+.results-table-header:hover .header-cell::after {
+ width: 3rem;
+ background: #61dafb;
+}
+
+.file-cell {
+ color: #e2e2e2;
+ max-width: 300px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.line-cell {
+ color: #8b949e;
+ text-align: right;
+ width: 50px;
+ font-family: monospace;
+}
+
+.kind-cell {
+ color: #61dafb;
+ font-family: monospace;
+ transition: color 0.2s ease;
+}
+
+.kind-cell[data-category="java"]:hover {
+ color: #61dafb;
+}
+
+/* Category-specific colors */
+.kind-cell[data-category="java"] {
+ color: #61dafb;
+}
+
+.kind-cell[data-category="android"] {
+ color: #a5d6a7;
+}
+
+.kind-cell::before {
+ content: '';
+ position: absolute;
+ left: 0;
+ width: 3px;
+ height: 16px;
+ background: currentColor;
+ border-radius: 2px;
+ opacity: 0.7;
+}
+
+
+
+
+
+.results-table-body .results-table-row:not(:last-child) {
+ border-bottom: 1px solid #3d3d3d;
+}
+
+.query-input-container {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ padding: 10px;
+ background-color: #111111;
+ height: 200px;
+ position: relative;
+ overflow: hidden;
+}
+
+.query-input-container .CodeMirror {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ height: 100% !important;
+ font-size: 14px;
+ line-height: 1.6;
+ padding: 8px;
+ border-radius: 4px;
+ background-color: #1e1e1e;
+ font-family: 'Fira Code', monospace;
+}
+
+.button-group {
+ display: flex;
+ gap: 8px;
+ margin-top: 8px;
+}
+
+.action-btn {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ background-color: #2d8632;
+ color: #ffffff;
+ border: none;
+ padding: 10px 20px;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 0.9rem;
+ font-weight: 500;
+ transition: all 0.2s ease;
+ box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+.action-btn:hover {
+ background-color: #2d6a4f;
+ transform: translateY(-1px);
+ box-shadow:
+ inset 0 0 15px rgba(255, 255, 255, 0.2),
+ 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.btn-icon {
+ width: 16px;
+ height: 16px;
+ opacity: 0.9;
+}
+
+#queryEditor {
+ flex-grow: 1;
+ height: 60px;
+}
+
+.run-query-btn {
+ background-color: #1b4332;
+ color: #ffffff;
+ border: none;
+ padding: 6px;
+ border-radius: 4px;
+ cursor: pointer;
+ height: 32px;
+ width: 32px;
+ transition: all 0.2s ease;
+ margin-top: 4px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ overflow: hidden;
+ box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.1);
+}
+
+.run-query-btn::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ left: -50%;
+ width: 200%;
+ height: 200%;
+ background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
+ transform: rotate(45deg);
+ transition: all 0.3s ease;
+ pointer-events: none;
+ opacity: 0;
+}
+
+.query-icon {
+ width: 16px;
+ height: 16px;
+}
+
+.run-query-btn:hover {
+ background-color: #2d6a4f;
+ transform: scale(1.05);
+ box-shadow:
+ inset 0 0 15px rgba(255, 255, 255, 0.2),
+ 0 0 10px rgba(45, 106, 79, 0.5);
+}
+
+.run-query-btn:hover::before {
+ opacity: 1;
+}
+
+.run-query-btn:active {
+ transform: scale(0.95);
+}
+
+.query-results {
+ flex-grow: 1;
+ padding: 10px;
+ background-color: #111111;
+ overflow-y: auto;
+ font-family: 'Fira Code', monospace;
+ font-size: 13px;
+ color: #d4d4d4;
+}
+
+.query-results pre {
+ margin: 0;
+ white-space: pre-wrap;
+ word-wrap: break-word;
+}
+
+.visualization-container {
+ flex: 1;
+ position: relative;
+ overflow: hidden;
+ background-color: #111111;
+ min-height: 300px;
+ background-image: radial-gradient(circle at 2px 2px, rgba(97, 218, 251, 0.15) 2px, transparent 0);
+ background-size: 25px 25px;
+}
+
+#visualization {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* CodeMirror Customization */
+.CodeMirror {
+ height: 100% !important;
+ font-family: 'Fira Code', monospace;
+ background-color: #1e1e1e !important;
+ font-size: 14px;
+ line-height: 1.6;
+ padding: 1rem 0;
+}
+
+.CodeMirror-gutters {
+ border-right: 1px solid #3d3d3d !important;
+ background-color: #252526 !important;
+}
+
+.CodeMirror-linenumber {
+ color: #6b6b6b !important;
+}
+
+/* Graph Visualization */
+#visualization {
+ width: 100%;
+ height: 100%;
+}
+
+.node circle {
+ stroke: #2d2d2d;
+ stroke-width: 2px;
+}
+
+.node text {
+ fill: #ffffff;
+ font-size: 12px;
+ font-family: 'Fira Code', monospace;
+}
+
+.link {
+ stroke: #4d4d4d;
+ stroke-width: 1px;
+ opacity: 0.6;
+}
+
+/* Legend */
+.legend {
+ display: flex;
+ gap: 20px;
+ align-items: center;
+ margin-left: auto;
+ background-color: rgba(97, 218, 251, 0.05);
+ padding: 8px 12px;
+ border-radius: 4px;
+ border: 1px solid rgba(97, 218, 251, 0.1);
+ margin-bottom: 10px;
+}
+
+.legend-item {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 0.75rem;
+ letter-spacing: 0.3px;
+ color: #e2e2e2;
+}
+
+.dot {
+ width: 12px;
+ height: 12px;
+ border-radius: 50%;
+ display: inline-block;
+ margin-right: 8px;
+ box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+}
+
+.dot.class {
+ background-color: #4CAF50;
+ border: 2px solid hsl(134, 73%, 65%);
+}
+
+.dot.method {
+ background-color: #2196F3;
+ border: 2px solid #2196F3;
+}
+
+.dot.field {
+ background-color: #FF9800;
+ border: 2px solid #FF9800;
+}
+
+.dot.variable {
+ background-color: #FF5722;
+ border: 2px solid #FF5722;
+}
+
+.dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ display: inline-block;
+ box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+}
+
+/* Zoom controls */
+.zoom-controls {
+ position: absolute;
+ bottom: 20px;
+ right: 20px;
+ display: flex;
+ gap: 0.5rem;
+}
+
+.zoom-controls button {
+ background: rgba(45, 45, 45, 0.9);
+ border: 1px solid #4d4d4d;
+ color: #ffffff;
+ width: 32px;
+ height: 32px;
+ border-radius: 4px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 18px;
+ transition: all 0.2s;
+}
+
+.zoom-controls button:hover {
+ border-color: #61dafb;
+ background: rgba(45, 45, 45, 1);
+}
+
+/* Tabbed Interface */
+.tab-container {
+ display: flex;
+ gap: 1rem;
+ margin-bottom: 1rem;
+}
+
+.tab-button {
+ background: #2a2a2a;
+ border: none;
+ color: #ffffff;
+ padding: 0.5rem 1rem;
+ border-radius: 4px;
+ cursor: pointer;
+ font-family: 'Inter', sans-serif;
+ font-weight: 500;
+ transition: background-color 0.2s;
+}
+
+.tab-button:hover {
+ background: #3a3a3a;
+}
+
+.tab-button.active {
+ background: #4a4a4a;
+}
+
+.tab-content {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+}
+
+.tab-pane {
+ display: none;
+ flex: 1;
+}
+
+.tab-pane.active {
+ display: flex;
+}
+
+.query-console {
+ border-top: 1px solid #3a3a3a;
+}
+
+.query-console .panel-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.button-group {
+ display: flex;
+ gap: 0.5rem;
+}
+
+.action-btn {
+ background: #2d8632;
+ border: none;
+ color: #ffffff;
+ padding: 0.5rem 1rem;
+ border-radius: 4px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ justify-content: center;
+ transition: all 0.2s;
+ font-weight: 500;
+}
+
+.action-btn:hover {
+ background: #36a03c;
+ transform: translateY(-1px);
+}
+
+.btn-icon {
+ width: 16px;
+ height: 16px;
+}
+
+.query-results {
+ background: #1e1e1e;
+ border-radius: 4px;
+ padding: 1rem;
+ overflow: auto;
+ flex: 1;
+}
+
+.result-item {
+ margin-bottom: 1rem;
+ padding: 1rem;
+ background: #2a2a2a;
+ border-radius: 4px;
+}
+
+.result-location {
+ color: #9e9e9e;
+ font-size: 0.9rem;
+ margin-bottom: 0.5rem;
+}
+
+.result-snippet {
+ margin: 0;
+ padding: 0.5rem;
+ background: #1e1e1e;
+ border-radius: 2px;
+ font-family: monospace;
+ white-space: pre-wrap;
+}