refactor(web): inline pause confirmation into header action buttons

Author: ryanwaits

apps/web/src/app/platform/streams/[id]/stream-detail-client.tsx

@@ -160,16 +160,32 @@ export function StreamDetailClient({
           </div>
           <div className="dash-actions">
             {stream.status === "active" && (
-              <button
-                className="dash-btn"
-                disabled={pausing === "loading"}
-                onClick={() => setPausing("confirm")}
-              >
-                <span className="btn-icon">
-                  <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><rect x="4" y="3" width="3" height="10" rx="0.5"/><rect x="9" y="3" width="3" height="10" rx="0.5"/></svg>
-                </span>
-                Pause
-              </button>
+              pausing !== "idle" ? (
+                <>
+                  <button
+                    className="dash-btn danger"
+                    onClick={handlePause}
+                  >
+                    {pausing === "loading" ? "Pausing..." : "Pause"}
+                  </button>
+                  <button
+                    className="dash-btn"
+                    onClick={() => setPausing("idle")}
+                  >
+                    Cancel
+                  </button>
+                </>
+              ) : (
+                <button
+                  className="dash-btn"
+                  onClick={() => setPausing("confirm")}
+                >
+                  <span className="btn-icon">
+                    <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><rect x="4" y="3" width="3" height="10" rx="0.5"/><rect x="9" y="3" width="3" height="10" rx="0.5"/></svg>
+                  </span>
+                  Pause
+                </button>
+              )
             )}
             {(stream.status === "paused" || stream.status === "inactive") && (
               <button
@@ -208,21 +224,6 @@ export function StreamDetailClient({
         </div>
       </div>
 
-      {/* Pause confirmation */}
-      {pausing === "confirm" && (
-        <div className="dash-confirm-inline">
-          <span>Pause this stream? Events will be buffered until resumed.</span>
-          <div style={{ display: "flex", gap: 8 }}>
-            <button className="dash-btn danger" style={{ fontSize: 12, padding: "4px 12px" }} onClick={handlePause}>
-              Pause
-            </button>
-            <button className="dash-btn" style={{ fontSize: 12, padding: "4px 12px" }} onClick={() => setPausing("idle")}>
-              Cancel
-            </button>
-          </div>
-        </div>
-      )}
-
       {/* Stats */}
       <div className="dash-stats">
         <div className="dash-stat">

apps/web/src/styles/console.css

@@ -913,15 +913,6 @@
 }
 
 /* ── Status bar ──────────────────────────────────────────────── */
-.dash-confirm-inline {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  font-size: 13px;
-  color: var(--text-muted);
-  margin-bottom: 24px;
-}
 
 /* ── Stream list inline actions ──────────────────────────────── */
 .stream-row {