Positron Notebooks UI sprint

[nstrayer]

Addresses #9636.

This PR implements several UI polish fixes for the new notebooks frontend from the design sprint:

Error state indication (bcbfbfe)

When a cell execution fails, the selection bar and execution badge now display in red using the error foreground color

Gutter spacing improvements (dcadd3c)

Fixed overlapping between gutter elements (like breakpoints) and the selection bar by moving the entire gutter system over and using the selection bar as a background extension

Warning

This may conflict with #9860 but does it in a different way that should make it easier to handle the change to selection + active cells when it's added for #9848. I am totally fine dropping the commit for this though to avoid conflicts/confusion.

Terminology update (f6a777f)

Changed all instances of "markup" to "markdown" for consistency with VS Code language

Cell action menu padding (1fd9e6b)

Fixed padding issues in the NotebookCellMoreActionsMenu component by refactoring to use the ActionButton component

Warning

Again may conflict a bit with #9860 but gets at the underlying problem of the wrong button component being used for the more actions expansion.

---

Release Notes

New Features

• N/A

Bug Fixes

QA Notes

@:positron-notebooks

Testing error indication:

1. Open a notebook
2. Create a code cell with intentionally failing code (e.g., raise Exception("test error") for Python)
3. Execute the cell
4. Verify that when the cell fails:
   • The left selection bar turns red
   • The execution badge [N] displays in red
   • The editor outline (when focused) uses the error color

Testing selection bar spacing:

1. Open a notebook
2. Set a breakpoint in a code cell
3. Select the cell
4. Verify the breakpoint indicator doesn't overlap with the left selection bar
5. Verify proper spacing between the selection bar and editor content

Testing markdown terminology:

1. Open a notebook
2. Add a markdown cell
3. Verify all UI text refers to "markdown" rather than "markup"
4. Check tooltip text and empty cell messages

Testing cell action menu:

1. Hover over a cell to reveal the action bar
2. Click the ellipsis (...) button to open the more actions menu
3. Verify proper padding around menu items

[github-actions]

E2E Tests 🚀
This PR will run tests tagged with: @:critical @:positron-notebooks

^{readme  valid tags}

[Copilot]

Pull Request Overview

This PR implements UI polish improvements for Positron notebooks based on design sprint feedback, focusing on error state visualization, gutter spacing, terminology consistency, and component refactoring.

Key changes:

• Added error state tracking with red visual indicators for failed cell executions
• Refactored selection bar system to use permanent spacers with conditional styling
• Updated all "markup" references to "markdown" for consistency with VS Code terminology

Reviewed Changes

Copilot reviewed 13 out of 13 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
NotebookCellMoreActionsMenu.tsx	Refactored to use ActionButton component instead of raw button element
NotebookMarkdownCell.tsx	Updated class names and text from "markup" to "markdown"
NotebookMarkdownCell.css	Renamed CSS class from positron-notebook-markup-rendered to positron-notebook-markdown-rendered
NotebookCellWrapper.tsx	Added hasError observable and data-has-error attribute to cell container
NotebookCellWrapper.css	Added CSS variables for editor background overrides
NotebookCellSelection.css	Refactored selection bar to use permanent spacer approach with conditional color changes and error state styling
ExecutionStatusBadge.tsx	Added hasError prop and data-has-error attribute to badge container
CellLeftActionMenu.tsx	Added hasError observable consumption and passed to ExecutionStatusBadge
CellLeftActionMenu.css	Added error state styling for execution badge using error foreground color
CellEditorMonacoWidget.css	Restructured editor borders to work with selection bar, added error state outline styling
PositronNotebookCodeCell.ts	Added logic to update hasError observable when cell outputs change
PositronNotebookCell.ts	Added hasError observable value initialization
IPositronNotebookCell.ts	Added hasError property to interface definition

[seeM]

Code changes look great! UI changes look good as well but I'll leave for others to review in more detail

I think your UI solutions are better than mine from #9860!

[seeM]

Nit: could keep decouple these observables

this.outputs = observableFromEvent(this, this.cellModel.onDidChangeOutputs, () => {
    /** @description cellOutputs */
    return this.parseCellOutputs();
});
this.hasError = this.outputs.map((outputs) => outputs.some(o => o.parsed.type === 'error'));

or even move hasError to the React component, derived from the outputs state.

[seeM]

BTW the @descriptions were something I saw upstream that are apparently used in debugging logs, but I haven't actually checked where those logs live, so we can decide whether to keep em.

[seeM]

Might be better to avoid tracking this state both here and in NotebookCellWrapper and making one a prop? We might be doing that in a couple places

[cindyytong]

LGTM thank you