From fe6da02ad76df2772e72f525c86278dca69c6897 Mon Sep 17 00:00:00 2001 From: Charlie Gillet Date: Mon, 30 Mar 2026 17:11:15 -0700 Subject: [PATCH] feat(vscode): improve stop button feedback in Pipeline Observability screen Handle TASK_STATE.STOPPING in the control button to show "Stopping..." with a disabled state and distinct orange styling, preventing duplicate clicks and giving immediate visual feedback during pipeline shutdown. Co-Authored-By: Claude Opus 4.6 (1M context) --- apps/vscode/src/providers/views/PageStatus/PageStatus.tsx | 3 +++ apps/vscode/src/providers/views/PageStatus/styles.css | 6 ++++++ 2 files changed, 9 insertions(+) diff --git a/apps/vscode/src/providers/views/PageStatus/PageStatus.tsx b/apps/vscode/src/providers/views/PageStatus/PageStatus.tsx index c174c3406..a5262354e 100644 --- a/apps/vscode/src/providers/views/PageStatus/PageStatus.tsx +++ b/apps/vscode/src/providers/views/PageStatus/PageStatus.tsx @@ -350,6 +350,9 @@ export const PageStatus: React.FC = () => { const state = taskStatus?.state ?? TASK_STATE.NONE; const runLabel = tracingEnabled ? 'Run & Trace' : 'Run'; + if (state === TASK_STATE.STOPPING) { + return { label: 'Stopping...', action: 'stop' as const, disabled: true, className: 'action-btn stopping-btn disabled' }; + } if (state === TASK_STATE.RUNNING || state === TASK_STATE.INITIALIZING) { return { label: 'Stop', action: 'stop' as const, disabled: false, className: 'action-btn stop-btn' }; } diff --git a/apps/vscode/src/providers/views/PageStatus/styles.css b/apps/vscode/src/providers/views/PageStatus/styles.css index e45cd5358..9d678f1f0 100644 --- a/apps/vscode/src/providers/views/PageStatus/styles.css +++ b/apps/vscode/src/providers/views/PageStatus/styles.css @@ -306,6 +306,12 @@ background: var(--vscode-errorForeground); } +.action-btn.stopping-btn { + background: var(--vscode-charts-orange); + color: white; + cursor: not-allowed; +} + .action-btn.run-btn { background: var(--vscode-charts-green); color: white;