From b753ec2093021403e5993cb8f1dd1e80b463d75d Mon Sep 17 00:00:00 2001
From: iris <iris@hyperhive.local>
Date: Sun, 30 Aug 2026 03:42:30 +0200
Subject: [PATCH] agent ui: restore the cancel-turn button dropped in the
 Preact rewrite

Root-caused mara's 'no interrupt button on agent term anymore' report:
the pre-rewrite app.js had a visible <button id=cancel-btn> (class
btn-cancel-turn, already-styled CSS still in agent.css but orphaned)
shown only while a turn was in flight, wired to /api/cancel. The
Preact rewrite (agent terminal Preact rewrite) ported the /cancel
slash command but never re-added the visible button, so interrupting
a turn now requires typing a command instead of clicking.

Adds thinking/onCancelTurn props to StatusChips, rendering the same
btn-cancel-turn markup only while turn_state === thinking, wired to
the existing postCancelTurn() (termActions.ts) + refresh(). Verified
with real headless-chromium screenshots against a mock /api/state:
button renders while thinking, is absent while idle.
---
 frontend/packages/agent/src/Root.tsx          | 10 +++++++
 .../agent/src/components/StatusChips.tsx      | 27 ++++++++++++++++++-
 2 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/frontend/packages/agent/src/Root.tsx b/frontend/packages/agent/src/Root.tsx
index cc3bb991..8d5fb605 100644
--- a/frontend/packages/agent/src/Root.tsx
+++ b/frontend/packages/agent/src/Root.tsx
@@ -25,6 +25,7 @@ import { fmtAge, fmtTokens } from './lib/format.js';
 import { resolveDashboardBase } from './lib/dashboardBase.js';
 import { submitPauseResume } from './lib/pauseAction.js';
 import { postModel, postEffort } from './lib/modelEffort.js';
+import { postCancelTurn } from './lib/termActions.js';
 import type { TokenUsage } from './types.js';
 
 type OpenPanel = 'inbox' | 'todos' | null;
@@ -153,6 +154,8 @@ export function Root() {
             onSelectEffort={() => {}}
             paused={false}
             onTogglePause={() => {}}
+            thinking={false}
+            onCancelTurn={() => {}}
           />
         </Header>
         <main className="agent-main">
@@ -206,6 +209,13 @@ export function Root() {
               () => refresh(),
             );
           }}
+          thinking={effectiveTurnState === 'thinking'}
+          onCancelTurn={() => {
+            postCancelTurn().then((r) => {
+              if (!r.ok) liveStreamRef.current?.pushNote(`✗ /cancel failed${r.detail ? ': ' + r.detail : ''}`);
+              refresh();
+            });
+          }}
         />
       </Header>
       <main className="agent-main">
diff --git a/frontend/packages/agent/src/components/StatusChips.tsx b/frontend/packages/agent/src/components/StatusChips.tsx
index 72ebe367..52cf5bcb 100644
--- a/frontend/packages/agent/src/components/StatusChips.tsx
+++ b/frontend/packages/agent/src/components/StatusChips.tsx
@@ -9,7 +9,7 @@
 // selection state live in the caller (`Root.tsx`, via the
 // `useAgentState` hook), so this component can still be demoed and
 // reviewed against plain sample data independent of live `/api/state`.
-import { useState } from 'preact/hooks';
+import { useEffect, useState } from 'preact/hooks';
 import { Badge, type BadgeTone } from '@hive/shared/badge.js';
 import { Dropdown, type DropdownOption } from '@hive/shared/dropdown.js';
 import './StatusChips.css';
@@ -31,6 +31,8 @@ export interface StatusChipsProps {
   paused: boolean;
   onTogglePause: () => void;
   lastTurnLabel?: string;
+  thinking: boolean;
+  onCancelTurn: () => void;
 }
 
 const MODEL_DESCRIPTIONS: Record<string, string> = {
@@ -100,7 +102,17 @@ export function StatusChips({
   paused,
   onTogglePause,
   lastTurnLabel,
+  thinking,
+  onCancelTurn,
 }: StatusChipsProps) {
+  const [cancelBusy, setCancelBusy] = useState(false);
+  // The button unmounts (not just hides) once `thinking` flips false, but
+  // `cancelBusy` lives in this component's own state across re-renders —
+  // reset it here so a *later* turn doesn't inherit a stale "busy" from a
+  // previous cancel click.
+  useEffect(() => {
+    if (!thinking) setCancelBusy(false);
+  }, [thinking]);
   return (
     <div class="status-chips">
       <Badge value={aliveLabel} tone={aliveTone} />
@@ -141,6 +153,19 @@ export function StatusChips({
         onClick={onTogglePause}
       />
       {lastTurnLabel ? <span class="status-chips-last-turn">{lastTurnLabel}</span> : null}
+      {thinking ? (
+        <button
+          type="button"
+          class="btn-cancel-turn"
+          disabled={cancelBusy}
+          onClick={() => {
+            setCancelBusy(true);
+            onCancelTurn();
+          }}
+        >
+          ■ cancel turn
+        </button>
+      ) : null}
     </div>
   );
 }