JavaScript Programming tab: Add true/false indicators to aid debugging

[sensei-hacker]

User description

Summary

Adds visual indicators in the Monaco editor gutter to show which Logic Conditions are currently active and true. Green checkmarks (✓) display for TRUE conditions, gray hollow circles (○) for FALSE conditions, providing real-time feedback during development and debugging.

Changes

• FALSE condition indicators: Gray hollow circles complement existing green checkmarks, showing complete LC state
• Transpiler-side line tracking: Immediate visual feedback after "Transpile" or "Save to FC" without requiring "Load from FC" roundtrip

Testing

• ✅ Verified circles appear on correct lines immediately after transpile button
• ✅ Tested TRUE/FALSE states display properly with correct visual indicators
• ✅ Confirmed decompiler mapping replaces transpiler mapping when clicking "Load from FC"
• ✅ Verified 500ms polling interval provides responsive feedback without saturating serial connection
• ✅ Tested decoration clearing when disconnecting FC
• ✅ Tested with both simple and complex LC configurations

Files Changed

• tabs/javascript_programming.js - UI logic for highlighting, polling, state management
• tabs/javascript_programming.html - CSS for TRUE/FALSE visual indicators
• js/transpiler/transpiler/codegen.js - Line tracking during transpilation with offset handling
• js/transpiler/transpiler/index.js - Return lcToLineMapping in transpiler result

---

PR Type

Enhancement

---

Description

This description is generated by an AI tool. It may have inaccuracies

• Implement real-time active Logic Condition highlighting in Monaco editor

  • Green checkmarks (✓) for TRUE conditions, gray circles (○) for FALSE
  • Transpiler and decompiler track LC-to-line mappings for immediate feedback

• Add 500ms status polling with MSP chainer for responsive LC state updates

  • Optimized polling rate reduces MSP load by 80% vs previous 100ms interval
  • Reordered FC availability checks to avoid wasteful operations on disconnect

• Implement line offset correction for auto-added import statements

  • Properly adjusts Acorn line numbers to match Monaco editor line numbers
  • Ensures accurate LC-to-line mapping across transpiler and decompiler

• Add comprehensive LC-to-line mapping algorithm with five-pass resolution

  • Handles simple conditions, compound conditions (a && b), nested conditions
  • Maps hoisted variables, sticky/timer patterns, and activator chains

---

Diagram Walkthrough

flowchart LR
  A["Transpiler/Decompiler"] -->|"Generate lcToLineMapping"| B["LC Index to Line Mapping"]
  B -->|"Store mapping"| C["JavaScript Programming Tab"]
  D["MSP Status Polling<br/>500ms interval"] -->|"Get LC status"| E["FC.LOGIC_CONDITIONS_STATUS"]
  E -->|"updateActiveHighlighting"| C
  C -->|"Apply decorations"| F["Monaco Editor Gutter<br/>✓ TRUE / ○ FALSE"]

Loading

File Walkthrough

	Relevant files
Configuration changes	monaco_loader.js Enable Monaco gutter margin for LC highlighting                    js/transpiler/editor/monaco_loader.js Enable glyphMargin: true in Monaco editor options to support gutter decorations Add comment explaining gutter is used for active LC highlighting decorations +1/-0
Enhancement	codegen.js Track LC-to-line mappings during code generation                  js/transpiler/transpiler/codegen.js Add lcToLineMapping object to track LC index to source line mappings Add currentSourceLine and lineOffset properties for line tracking during code generation Track source line location from AST statement location information Subtract lineOffset from Acorn line numbers to match Monaco editor line numbers Record LC-to-line mapping in pushLogicCommand() when pushing logic commands Wrap statement generation in try-finally to properly restore source line context +45/-22  decompiler.js Implement comprehensive LC-to-line mapping algorithm          js/transpiler/transpiler/decompiler.js Add lcToLineMapping and _tempLcLines properties to track LC line mappings Return lcToLineMapping in decompile result alongside code and warnings Implement finalizeLcLineMapping() with five-pass algorithm to resolve LC line numbers Track if-statement lines during tree decompilation for later mapping resolution Handle hoisted variables (const declarations), sticky/timer variables, activator relationships, and compound condition operands Map operand LCs to parent LC lines for compound conditions like "if (a && b)" +130/-1  index.js Return LC-to-line mapping from transpiler                                js/transpiler/transpiler/index.js Pass lineOffset from transpiler to codegen for accurate line number adjustment Return lcToLineMapping from transpile result alongside commands and warnings +3/-1      javascript_programming.js Add active LC highlighting with status polling                      tabs/javascript_programming.js Add lcToLineMapping, activeDecorations, and statusChainer properties for highlighting state management Import interval module for managing polling intervals Store LC-to-line mappings from transpiler and decompiler results Implement setupActiveHighlighting() to create MSP chainer and start 500ms polling interval Implement updateActiveHighlighting() to poll LC status and apply Monaco gutter decorations Implement clearActiveHighlighting() to remove all active decorations Fix isDirty race condition by using setTimeout() to defer flag clearing after setValue() Add null checks for FC data availability before accessing LC status and conditions Stop polling interval and clear decorations in cleanup function Categorize LCs as TRUE/FALSE/MIXED and apply appropriate gutter markers +178/-2  javascript_programming.html Add CSS styling for LC gutter markers                                        tabs/javascript_programming.html Add .lc-active-true CSS class with green checkmark SVG icon for TRUE conditions Add .lc-active-false CSS class with gray hollow circle SVG icon for FALSE conditions Add Monaco editor gutter margin background styling Add cursor pointer styling for gutter decoration hover interaction +28/-0

---

[qodo-code-review]

ⓘ Your approaching your monthly quota for Qodo. Upgrade your plan

PR Compliance Guide 🔍

All compliance sections have been disabled in the configurations.