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/swarm-ui/src/agent/terminal/AgentInputForm.tsx

@@ -8,15 +8,25 @@ import { ApiErrorPanel } from "@hive/shared/api-error-panel.js";
 import { readApiError, type ProblemDetails } from "@hive/shared/api-error.js";
 import { TextField } from "../../ui/text-field/TextField.js";
 import { Button } from "../../ui/button/Button.js";
+import { canCancel, cancelNote, cancelPath } from "./cancel.js";
 import "./AgentInputForm.css";
 
 type SubmitState =
   | { status: "idle" }
   | { status: "submitting" }
   | { status: "sent" }
+  | { status: "cancelled"; acted: boolean }
   | { status: "error"; problem: ProblemDetails };
 
-export function AgentInputForm({ agentName }: { agentName: string }) {
+export function AgentInputForm({
+  agentName,
+  turnState,
+}: {
+  agentName: string;
+  // The agent's turn state when the page has it; the cancel button shows only
+  // while the agent is in a turn.
+  turnState?: string;
+}) {
   const [body, setBody] = useState("");
   const [result, setResult] = useState<SubmitState>({ status: "idle" });
 
@@ -43,6 +53,21 @@ export function AgentInputForm({ agentName }: { agentName: string }) {
     }
   }
 
+  async function cancel() {
+    setResult({ status: "submitting" });
+    try {
+      const r = await fetch(cancelPath(agentName), { method: "POST" });
+      if (!r.ok) {
+        setResult({ status: "error", problem: await readApiError(r) });
+        return;
+      }
+      const { acted } = (await r.json()) as { acted: boolean };
+      setResult({ status: "cancelled", acted });
+    } catch (err) {
+      setResult({ status: "error", problem: { detail: String(err) } });
+    }
+  }
+
   return (
     <div class="ui-agent-input">
       <form class="ui-agent-input-form" onSubmit={submit}>
@@ -60,8 +85,20 @@ export function AgentInputForm({ agentName }: { agentName: string }) {
         >
           {result.status === "submitting" ? "sending…" : "send"}
         </Button>
+        {canCancel(turnState) && (
+          <Button
+            type="button"
+            onClick={cancel}
+            disabled={result.status === "submitting"}
+          >
+            cancel turn
+          </Button>
+        )}
       </form>
       {result.status === "sent" && <p class="ui-agent-input-sent">sent</p>}
+      {result.status === "cancelled" && (
+        <p class="ui-agent-input-sent">{cancelNote(result.acted)}</p>
+      )}
       {result.status === "error" && (
         <ApiErrorPanel context="failed to send" problem={result.problem} />
       )}

frontend/packages/swarm-ui/src/agent/terminal/AgentTermPreview.tsx

@@ -46,6 +46,7 @@ import {
   useSwarmAgentStateStream,
   type TokenUsage,
 } from "./useSwarmAgentStateStream.js";
+import { RelativeTime } from "../../ui/relative-time/RelativeTime.js";
 import { AgentInputForm } from "./AgentInputForm.js";
 import "./AgentTermPreview.css";
 
@@ -145,7 +146,13 @@ export function StateBadges({
     <>
       <Badge
         tone={TURN_STATE_TONE[header.turn_state] ?? "neutral"}
-        value={header.turn_state}
+        value={
+          <>
+            {header.turn_state} (
+            <RelativeTime epochMs={Date.parse(header.turn_state_since)} />)
+          </>
+        }
+        title="how long the agent has been in this state"
       />
       {/* Only the non-boring case gets a badge — a healthy running
           agent (`agent_state: "up"`) doesn't need one for the
@@ -168,6 +175,13 @@ export function StateBadges({
           }
         />
       )}
+      {withModel && (
+        <Badge
+          label="effort"
+          value={header.effort}
+          title={`set by: ${header.effort_source}`}
+        />
+      )}
       {ctx !== null && (
         <Badge
           label="ctx"
@@ -296,7 +310,9 @@ export function AgentTermPreview({
           )}
         </div>
       </div>
-      {subagent === undefined && <AgentInputForm agentName={agentName} />}
+      {subagent === undefined && (
+        <AgentInputForm agentName={agentName} turnState={header?.turn_state} />
+      )}
     </div>
   );
 }

frontend/packages/swarm-ui/src/agent/terminal/cancel.ts

@@ -0,0 +1,18 @@
+// What the terminal page decides about cancelling a turn, without a DOM. The
+// controller answers `POST /api/agents/{name}/cancel` with whether a turn was
+// running and was stopped (`acted`), so a cancel is never silently a no-op.
+
+/** Whether to offer the cancel button: while the agent is in a turn. */
+export function canCancel(turnState: string | undefined): boolean {
+  return turnState === "thinking";
+}
+
+/** The path a cancel is sent to. */
+export function cancelPath(agentName: string): string {
+  return `/api/agents/${encodeURIComponent(agentName)}/cancel`;
+}
+
+/** What to tell the operator once the agent has answered. */
+export function cancelNote(acted: boolean): string {
+  return acted ? "turn cancelled" : "nothing was running";
+}