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.
This commit is contained in:
ZacharyZhang-NY committed 2026-07-09 00:14:34 -04:00
1 parent cb71afa6b7
commit 5aff9dd606
2 files changed
+5 -19

No files matched your search

+1 -1
View File
@@ -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.")
+4 -18
View File
@@ -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); }