Line-anchored output and the filter chips

JSLab is a JavaScript and TypeScript development environment for macOS. When you type code and run it, the output panel fills with results, logs, and errors. Each entry is a row tagged with the line of code that produced it, allowing you to quickly navigate between the editor and the output.

Hovering over a row highlights its corresponding line in the editor, and clicking a row's line number jumps the cursor to that line. When you re-run the code, output rows with updated values flash for a moment, giving you an instant sense of how your changes impacted the results.

Above the output panel, there are four filter chips: All, Results, Logs, and Errors. Each chip displays a live count of the respective entries, and the counts remain visible even when they're zero. Results include values from Auto Log and magic comments, Logs consist of console.log, console.info, and console.warn, while Errors encompass thrown errors, stderr, and failed console.assert.

For example, if an error is thrown during a run, it appears tagged with its line number and corresponding stack frames. The filter chips show All 2, Results 1, Logs 0, Errors 1, indicating the number of entries in each category.

These filter chips are also accessible through commands in the command palette (⇧⌘P). Additionally, you can copy all entries by right-clicking in the panel and selecting "Copy All," which is useful for pasting the filtered output into an issue or another document.

Output highlighting and line numbers are customizable in Settings → Appearance. By default, JSLab colors values by type and shows the source line number beside each row. The software launches on November 15, with a full documentation page available at https://js-lab.app/docs/output.