agent page: consolidate alive/thinking/paused into one status badge

mara, #3757: fold the separate alive badge into the turn-state badge,
with pause/resume + cancel-turn moved into its dropdown. Cancel-turn is
click-again-to-confirm, not a modal.

model/effort/ctx/cost stay as separate badges — not asked to fold
those in too.

frontend/packages/shared/src/dropdown/Dropdown.css

@@ -42,6 +42,16 @@
   content: '✓ ';
   color: var(--purple);
 }
+/* Destructive action row (cancel turn) — ported from the old standalone
+   `.btn-cancel-turn`'s red-on-transparent look now that it lives here
+   instead of its own button (mara: "if the cancel turn button moves
+   into the dropdown, it should be fine"). */
+.ui-dropdown-item-danger {
+  color: var(--red);
+}
+.ui-dropdown-item-danger:hover {
+  background: color-mix(in srgb, var(--red) 12%, transparent);
+}
 .ui-dropdown-item-desc {
   font-size: 0.8em;
   /* `--muted-on-dim`, not bare `--muted`: an *active* item's row bg is

frontend/packages/shared/src/dropdown/Dropdown.tsx

@@ -23,6 +23,8 @@ export interface DropdownOption {
   label: ComponentChildren;
   /** Optional dim secondary text, e.g. "sonnet (balanced)". */
   description?: ComponentChildren;
+  /** Red-toned row for a destructive action (e.g. cancel turn), not a picker option. */
+  danger?: boolean;
 }
 
 export interface DropdownProps {
@@ -67,7 +69,11 @@ export function Dropdown({ open, options, activeValue, onSelect, onClose, label
           key={opt.value}
           role="menuitemradio"
           aria-checked={opt.value === activeValue}
-          class={'ui-dropdown-item' + (opt.value === activeValue ? ' ui-dropdown-item-active' : '')}
+          class={
+            'ui-dropdown-item' +
+            (opt.value === activeValue ? ' ui-dropdown-item-active' : '') +
+            (opt.danger ? ' ui-dropdown-item-danger' : '')
+          }
           onClick={() => onSelect(opt.value)}
         >
           <span class="ui-dropdown-item-label">{opt.label}</span>