feat(highlighting): added resolved vars highlighting to code subblock, to be consistent with other subblocks

[waleedlatif1]

Summary

• added resolved vars highlighting to code subblock, to be consistent with other subblocks, the logic mirrors the formatDisplayText but needs to be inline since that function returns a react components or jsx and here we just need text to feed into the highlight prop
• added some logs to the packages/db/index.ts to trace slowdown

Type of Change

• New feature

Testing

Tested manually

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
sim	Ready	Preview	Comment	Oct 8, 2025 0:14am

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
docs	Skipped			Oct 8, 2025 0:14am

[greptile-apps]

Greptile Overview

Summary

This PR makes two distinct changes to improve the Sim application. The primary change adds resolved variable highlighting to the code subblock component, bringing it in line with other subblocks throughout the application for visual consistency. The implementation identifies variable references (``) and environment variables (`{{ENV_VAR}}`) and highlights them in blue while preserving existing syntax highlighting.

The highlighting logic is implemented inline within the highlight prop since the existing formatDisplayText utility returns React components/JSX, but the syntax highlighter requires plain text/HTML strings. The solution uses placeholder substitution - temporarily replacing variables with placeholders, applying Prism.js syntax highlighting, then restoring the placeholders with proper blue highlighting.

The second change adds comprehensive debug logging to the database connection pool initialization in packages/db/index.ts. This includes structured JSON logging with timestamps, environment details, pool configuration, and process information to help diagnose database slowdown issues. A connection limit of 30 was also added to the pool configuration.

Important Files Changed

Changed Files

Filename	Score	Overview
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/code.tsx	4/5	Added resolved variable highlighting functionality to maintain consistency with other subblocks using inline highlighting logic
packages/db/index.ts	4/5	Added debug logging and connection limits to database pool initialization for performance troubleshooting

Confidence score: 4/5

• This PR is generally safe to merge with well-structured changes that improve user experience consistency
• Score reflects solid implementation of the highlighting feature and useful debugging additions, though the database logging should be temporary
• Pay attention to the database logging in packages/db/index.ts to ensure it gets removed after debugging is complete

Sequence Diagram

sequenceDiagram
    participant User
    participant CodeEditor as "Code Editor Component"
    participant PrismJS as "PrismJS Highlighter"
    participant Processor as "Code Processor"
    participant Store as "Sub Block Store"

    User->>CodeEditor: "Types code with variables like <var> or {{env}}"
    CodeEditor->>Processor: "processedCode = codeToHighlight"
    
    Note over Processor: Replace environment variables with placeholders
    Processor->>Processor: "processedCode.replace(/\\{\\{([^}]+)\\}\\}/g, ...)"
    
    Note over Processor: Replace variable references with placeholders  
    Processor->>Processor: "processedCode.replace(/<([^>]+)>/g, ...)"
    
    Processor->>PrismJS: "highlight(processedCode, languages[lang], lang)"
    PrismJS-->>Processor: "highlightedCode"
    
    Note over Processor: Restore placeholders with highlighting
    loop For each placeholder
        Processor->>Processor: "Replace placeholder with highlighted span"
    end
    
    Processor-->>CodeEditor: "Return highlighted code with resolved vars"
    CodeEditor->>Store: "setStoreValue(newCode)"
    CodeEditor-->>User: "Display syntax highlighted code with blue variable references"

Loading

_{2 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}