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.
This commit is contained in:
iris 2026-08-30 03:42:30 +02:00 committed by mara
commit b753ec2093
2 changed files with 36 additions and 1 deletions

View file

@ -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">