frontend/packages/shared/src/badge/Badge.css

@@ -93,6 +93,10 @@
   /* Fixes badge with emoji having different size. */
   line-height: 1;
 }
+.ui-badge-caret {
+  font-size: 0.75em;
+  color: var(--muted-on-dim);
+}
 /* Blended with `--fg`, not the raw accent — a stylix-fed scheme can pick
    any hue/lightness for `--green`/`--amber`/etc., and nothing guarantees
    an arbitrary accent clears 4.5:1 against `--purple-dim` the way the two

frontend/packages/shared/src/badge/Badge.tsx

@@ -47,14 +47,12 @@ export interface BadgeProps {
   /** Decorative glyph before the label; `aria-hidden`, the text is still the real label. */
   icon?: ComponentChildren;
   /**
-   * Present → renders a `<button>` (real control, min touch target),
+   * Present → renders a `<button>` (real control, min touch target) and
-   * `aria-expanded` reflecting `expanded`. Absent → renders a plain
+   * shows a disclosure caret. Absent → renders a plain `<span>` (status
-   * `<span>` (status display only, e.g. "alive"/"idle 6m"). No visible
+   * display only, e.g. "alive"/"idle 6m").
-   * disclosure caret (mara: "remove the chevrons") — `hover` +
-   * `aria-expanded`'s outline/bg (Badge.css) are the only affordance.
    */
   onClick?: (e: MouseEvent) => void;
-  /** Only meaningful with `onClick` — drives `aria-expanded`. */
+  /** Only meaningful with `onClick` — drives the caret direction + `aria-expanded`. */
   expanded?: boolean;
   disabled?: boolean;
   class?: string;
@@ -91,6 +89,11 @@ export function Badge({
       ) : null}
       {label ? <span class="ui-badge-label">{label}</span> : null}
       <span class="ui-badge-value">{value}</span>
+      {onClick ? (
+        <span class="ui-badge-caret" aria-hidden="true">
+          {expanded ? '▴' : '▾'}
+        </span>
+      ) : null}
     </>
   );
   if (onClick) {