Status Workflow Comments Block for Svelte

Edit STATES for the pipeline and RULES, a list that says which states each one may move to; the first target is the main move and gets the primary button. The labels (Move to, Back to, Reopen), the refusals and the pipeline marks are all worked out from those two lists.

Moving to Resolved checks for a note. With an empty one the move is refused, the problem appears under the field and focus goes to it. The note is written into the history entry and cleared once the move succeeds. Add more guards in move the same way, for example requiring an assignee before In progress.

So the layout never shifts and the reason is discoverable. They use aria-disabled rather than disabled, which keeps them focusable; each carries a description with the reason, and pressing one shows it in the problem line and the status.

The state and the history live in the page and the times are a fixed step after a typed moment. To make it real, send the move from move, validate the transition on the server against the same rules table, return the stored history entry with its real time, and keep the client table only as a hint.

The pipeline is an ordered list with the current state marked by aria-current and a word, state is never shown by colour alone, and the note field has a visible label with its problem tied by aria-describedby. Moves are announced in the polite status line and focus returns to the main button after each one.

The pipeline turns into a vertical list with a rule along its start side, the move buttons wrap, and the history keeps its height with its own scroll.