swarm-ui: the agent terminal page gets cancel turn, effort, state age and the expand-output setting

The per-agent page had these and the swarm terminal did not; they need no new
backend. A cancel turn button beside send, shown while the agent is in a turn,
posts to the controller's existing cancel route and says whether a turn was
stopped. The terminal's badges add the effort and how long the agent has been in
its turn state. The expand tool output setting moves to the shared package so
both pages render the one component, and the swarm menu gets it. Docs follow.

frontend/packages/shared/src/settings/ExpandDetailsSetting.tsx

@@ -0,0 +1,32 @@
+// Settings-menu row: "expand tool output". Rendered as a `<SettingsMenu>`
+// child (`./SettingsMenu.js`) by each page that has a terminal, the per-agent
+// page and the swarm UI, rather than as a prop on the menu: the caller owns its
+// row, and the menu stays free of options only some pages use. Both read the
+// same preference (`../prefs.js`), which `../terminal/Row.tsx` follows live.
+import { useState } from "preact/hooks";
+import { getExpandDetailsPref, setExpandDetailsPref } from "../prefs.js";
+
+export function ExpandDetailsSetting() {
+  // Plain localStorage read, not a hook-managed override like
+  // theme/motion — `getExpandDetailsPref`/`setExpandDetailsPref`
+  // (`@hive/shared/prefs.js`) are the existing shared-storage-key pair
+  // the terminal itself already reads live (no round-trip needed here
+  // beyond re-rendering this row's own checkbox state on toggle).
+  const [expandDetails, setExpandDetailsState] = useState(() =>
+    getExpandDetailsPref(),
+  );
+  return (
+    <label class="settings-menu-row">
+      <span>expand tool output</span>
+      <input
+        type="checkbox"
+        checked={expandDetails}
+        onChange={(e) => {
+          const v = (e.target as HTMLInputElement).checked;
+          setExpandDetailsPref(v);
+          setExpandDetailsState(v);
+        }}
+      />
+    </label>
+  );
+}