feat(vscode): improve stop button feedback in Pipeline Observability screen

[charliegillet]

Summary

• Stop button now immediately shows "Stopping..." with disabled state when pipeline is shutting down
• Distinct orange styling differentiates the stopping state from stop (red) and run (green)
• Button is disabled during stopping to prevent duplicate clicks

Type

Enhancement

Why this feature fits this codebase

The codebase already defines TASK_STATE.STOPPING (value 4) in the task state enum and the StatusHeader component already renders a "Stopping" label with an orange indicator dot for this state. However, the control button in getControlButton() did not handle TASK_STATE.STOPPING — it fell through to the default case, showing a disabled "Run" button. This change aligns the button behavior with the existing state machine and visual language already established in the codebase (orange = stopping, as seen in .status-indicator.stopping and the deploy page's stopping state).

What changed

• apps/vscode/src/providers/views/PageStatus/PageStatus.tsx: Added a TASK_STATE.STOPPING check in getControlButton() that returns a disabled "Stopping..." button with the stopping-btn CSS class, placed before the RUNNING/INITIALIZING check so the stopping state takes priority.
• apps/vscode/src/providers/views/PageStatus/styles.css: Added .action-btn.stopping-btn style with --vscode-charts-orange background and cursor: not-allowed, consistent with the existing .status-indicator.stopping orange color and the .action-btn.disabled pattern.

Validation

• The TASK_STATE.STOPPING state (value 4) is already emitted by the engine during pipeline shutdown — no backend changes needed
• Button state transitions: Stop (red, clickable) -> Stopping... (orange, disabled) -> Run (green, clickable)
• The existing .action-btn.disabled rule (opacity: 0.4; cursor: not-allowed) applies alongside .stopping-btn for consistent disabled UX
• The StatusHeader already displays "Stopping" with an orange dot for this state, so the button now matches the header indicator

How this can be extended

• A timeout could be added: if the pipeline stays in STOPPING state for more than N seconds, show an error toast or re-enable a "Force Stop" button
• An animated spinner icon could be added inside the button label for additional visual feedback
• The handlePipelineAction in PageStatusProvider.ts could send intermediate status messages back to the webview for more granular progress

Closes #404

#Hack-with-bay-2

Summary by CodeRabbit

• New Features

  • Added dedicated visual feedback for stopping operations. When an action is being stopped, users see a "Stopping..." button state with disabled interaction, providing clear status indication throughout the process.

• Style

  • Introduced distinctive styling for the stopping button state, featuring an orange background and not-allowed cursor to clearly differentiate it from other action button states.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: a4aac1be-3c20-47c5-be82-fb924265e2c8

📥 Commits

Reviewing files that changed from the base of the PR and between b6b2dc1 and 670770c.

📒 Files selected for processing (2)

• apps/vscode/src/providers/views/PageStatus/PageStatus.tsx
• apps/vscode/src/providers/views/PageStatus/styles.css

---

📝 Walkthrough

Walkthrough

The change adds special handling for a "stopping" task state in the control button logic, displaying a disabled "Stopping..." button, paired with distinct orange CSS styling. This provides visual feedback during pipeline shutdown.

Changes

Cohort / File(s)	Summary
Stopping Button State apps/vscode/src/providers/views/PageStatus/PageStatus.tsx, apps/vscode/src/providers/views/PageStatus/styles.css	Added conditional logic to display a disabled "Stopping..." button when taskStatus.state === TASK_STATE.STOPPING, with corresponding CSS styling using orange background color and disabled cursor to visually differentiate the stopping state from stop and run states.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 A carrot's worth of patience now,
When stopping time draws near—
The button glows in orange hue,
No frantic clicking here!
A "Stopping..." dance, so smooth and true,
Feedback clear for all to see. 🛑✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately and specifically describes the primary change: improving stop button feedback with a 'Stopping...' state on the Pipeline Observability screen.
Linked Issues check	✅ Passed	Changes implement all acceptance criteria from #404: adds 'Stopping...' state immediately on click, disables button during stopping, and provides orange visual styling.
Out of Scope Changes check	✅ Passed	All changes directly address requirements in #404; no unrelated modifications present. Updates are limited to PageStatus button logic and associated styling.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}