From 5aff9dd606ee013b595f8b96e75d51e42a0102c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=B7=E7=94=B5=E8=8A=BD=E8=A1=A3?=
 <zhangyanghaha0407@outlook.com>
Date: Thu, 9 Jul 2026 00:14:34 -0400
Subject: [PATCH] Make the pause toggle a standard topbar button

The pause control was a hand-rolled pill (999px radius, its own
padding and font size) sitting next to the standard "New task" button,
so the two never matched. It now renders as the shared .button class -
one source of truth for height, padding, and corner radius - with a
single amber modifier for the paused state. Verified side by side in
the captured Work-page screenshot.
---
 src/renderer/src/shared/Shell.tsx      |  2 +-
 src/renderer/src/styles/components.css | 22 ++++------------------
 2 files changed, 5 insertions(+), 19 deletions(-)

diff --git a/src/renderer/src/shared/Shell.tsx b/src/renderer/src/shared/Shell.tsx
index 6d012cc1..de47c79b 100644
--- a/src/renderer/src/shared/Shell.tsx
+++ b/src/renderer/src/shared/Shell.tsx
@@ -137,7 +137,7 @@ export function Shell({
             <span className="topbar-actions-slot" ref={setActionsSlot} />
             <button
               type="button"
-              className={`autopause-toggle ${snapshot.autonomousPaused ? "paused" : ""}`.trim()}
+              className={`button ${snapshot.autonomousPaused ? "autopause-paused" : ""}`.trim()}
               aria-pressed={snapshot.autonomousPaused}
               title={snapshot.autonomousPaused
                 ? t("Agents are paused: no new runs start until you resume. Click to resume.")
diff --git a/src/renderer/src/styles/components.css b/src/renderer/src/styles/components.css
index 0ee79891..f25887fb 100644
--- a/src/renderer/src/styles/components.css
+++ b/src/renderer/src/styles/components.css
@@ -305,25 +305,11 @@ textarea.input { min-height: 84px; resize: vertical; line-height: 1.5; }
 .jump-latest:hover { background: var(--hover); }
 .avatar-image { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
 
-/* Global autonomous-engine pause toggle in the topbar */
-.autopause-toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 10px;
-  border-radius: 999px;
-  border: 1px solid var(--border-strong);
-  background: none;
-  color: var(--text-2);
-  font: inherit;
-  font-size: 12px;
-  font-weight: 540;
-  cursor: pointer;
-  -webkit-app-region: no-drag;
-}
-.autopause-toggle:hover { background: var(--hover); color: var(--text-1); }
-.autopause-toggle.paused {
+/* Paused state of the topbar autonomous-engine toggle (a standard .button,
+   so size and radius stay identical to its neighbors like "New task"). */
+.button.autopause-paused {
   background: var(--amber, #f59e0b);
   border-color: transparent;
   color: #231600;
 }
+.button.autopause-paused:hover { background: var(--amber, #f59e0b); filter: brightness(1.06); }