Agent is cancelled: display stop

Author: oandregal

src/main/channels/utils/agent-service.ts

@@ -189,7 +189,7 @@ export class AgentService {
 				kind: 'error',
 				message: 'ANTHROPIC_API_KEY is not set',
 			} );
-			this.emit( { kind: 'done', success: false } );
+			this.emit( { kind: 'done', success: false, cancelled: false } );
 			return;
 		}
 
@@ -199,15 +199,15 @@ export class AgentService {
 				kind: 'error',
 				message: `Project ${ this.projectId } is not linked.`,
 			} );
-			this.emit( { kind: 'done', success: false } );
+			this.emit( { kind: 'done', success: false, cancelled: false } );
 			return;
 		}
 		if ( ! fs.existsSync( project.path ) ) {
 			this.emit( {
 				kind: 'error',
 				message: `Project folder no longer exists on disk: ${ project.path }`,
 			} );
-			this.emit( { kind: 'done', success: false } );
+			this.emit( { kind: 'done', success: false, cancelled: false } );
 			return;
 		}
 
@@ -278,13 +278,28 @@ export class AgentService {
 			}
 		} catch ( err ) {
 			if ( abortController.signal.aborted ) {
-				this.emit( { kind: 'done', success: false } );
+				appendMessage( this.projectId, chatId, {
+					kind: 'assistant',
+					id: randomUUID(),
+					text: '',
+					cancelled: true,
+					at: Date.now(),
+				} );
+				this.emit( {
+					kind: 'done',
+					success: false,
+					cancelled: true,
+				} );
 			} else {
 				this.emit( {
 					kind: 'error',
 					message: err instanceof Error ? err.message : String( err ),
 				} );
-				this.emit( { kind: 'done', success: false } );
+				this.emit( {
+					kind: 'done',
+					success: false,
+					cancelled: false,
+				} );
 			}
 		} finally {
 			if ( this.currentAbort === abortController ) {
@@ -511,6 +526,7 @@ export class AgentService {
 				this.emit( {
 					kind: 'done',
 					success,
+					cancelled: false,
 				} );
 			}
 		}
@@ -581,7 +597,7 @@ export class AgentService {
 			kind: 'error',
 			message: err instanceof Error ? err.message : String( err ),
 		} );
-		this.emit( { kind: 'done', success: false } );
+		this.emit( { kind: 'done', success: false, cancelled: false } );
 	}
 
 	private emit( event: UnstampedEvent ): void {

src/renderer/App.tsx

@@ -265,6 +265,7 @@ export function App(): React.ReactElement {
 							text: p.text,
 							streaming: false,
 							errored: p.errored,
+							cancelled: p.cancelled,
 						};
 					}
 					return {
@@ -392,7 +393,12 @@ export function App(): React.ReactElement {
 					updateChatMessages( projectId, stream.chatId, ( list ) =>
 						list.map( ( m ) =>
 							m.kind === 'assistant' && m.id === stream.msgId
-								? { ...m, streaming: false }
+								? {
+										...m,
+										streaming: false,
+										cancelled:
+											event.cancelled || m.cancelled,
+								  }
 								: m
 						)
 					);

src/renderer/index.css

@@ -1215,6 +1215,66 @@ button.resources-grid-card:focus-visible {
 	color: #d70015;
 }
 
+.bubble-cancelled {
+	border-style: dashed;
+}
+
+.bubble-stopped {
+	margin-top: 4px;
+	font-size: 11px;
+	font-style: italic;
+	letter-spacing: 0.02em;
+	color: var(--sidebar-fg-muted);
+}
+
+.bubble-cancelled .bubble-text + .bubble-stopped {
+	padding-top: 4px;
+	border-top: 1px dashed var(--hairline);
+}
+
+.bubble-cancelled:not(:has(.bubble-text)) .bubble-stopped {
+	margin-top: 0;
+}
+
+.bubble-thinking {
+	display: inline-flex;
+	gap: 4px;
+	align-items: center;
+	padding: 2px 2px;
+}
+
+.bubble-thinking span {
+	display: inline-block;
+	width: 6px;
+	height: 6px;
+	border-radius: 50%;
+	background: currentcolor;
+	opacity: 0.35;
+	animation: bubble-thinking-pulse 1.2s ease-in-out infinite;
+}
+
+.bubble-thinking span:nth-child(2) {
+	animation-delay: 0.15s;
+}
+
+.bubble-thinking span:nth-child(3) {
+	animation-delay: 0.3s;
+}
+
+@keyframes bubble-thinking-pulse {
+	0%,
+	80%,
+	100% {
+		opacity: 0.3;
+		transform: scale(0.8);
+	}
+
+	40% {
+		opacity: 1;
+		transform: scale(1);
+	}
+}
+
 .bubble-tools {
 	display: flex;
 	flex-wrap: wrap;
@@ -1254,22 +1314,28 @@ button.resources-grid-card:focus-visible {
 .composer-input {
 	flex: 1 1 auto;
 	resize: none;
-	min-height: 36px;
-	max-height: 160px;
+	min-height: 80px;
+	max-height: 50vh;
 	padding: 8px 44px 8px 10px;
 	font: inherit;
 	color: inherit;
 	background: var(--input-bg);
 	border: 1px solid var(--input-border);
 	border-radius: 8px;
 	outline: none;
+	overflow-y: auto;
 }
 
 .composer-input:focus {
 	border-color: var(--accent);
 	box-shadow: 0 0 0 2px var(--accent-glow);
 }
 
+.composer-input:disabled {
+	opacity: 0.55;
+	cursor: not-allowed;
+}
+
 .composer-send {
 	position: absolute;
 	right: 8px;

src/renderer/screens/ProjectScreen.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 
 import type { ChatMeta } from '../../types';
 
@@ -31,6 +31,7 @@ export type AssistantMessage = {
 	text: string;
 	streaming: boolean;
 	errored?: boolean;
+	cancelled?: boolean;
 };
 
 export type ToolMessage = {
@@ -170,6 +171,9 @@ export function ProjectScreen( {
 	const editInputRef = useRef< HTMLInputElement | null >( null );
 	const [ addMenuOpen, setAddMenuOpen ] = useState( false );
 	const addMenuRef = useRef< HTMLDivElement | null >( null );
+	const transcriptRef = useRef< HTMLElement | null >( null );
+	const composerInputRef = useRef< HTMLTextAreaElement | null >( null );
+	const lastUserIdRef = useRef< string | null >( null );
 
 	useEffect( () => {
 		if ( editingChatId ) {
@@ -178,6 +182,56 @@ export function ProjectScreen( {
 		}
 	}, [ editingChatId ] );
 
+	// Resync the composer height whenever the input value changes — the
+	// textarea grows with content, capped by CSS max-height (50vh).
+	useLayoutEffect( () => {
+		const el = composerInputRef.current;
+		if ( ! el ) {
+			return;
+		}
+		el.style.height = 'auto';
+		el.style.height = `${ el.scrollHeight }px`;
+	}, [ input ] );
+
+	// Don't scroll on chat switch: reset the tracker so the next "new user
+	// message" detection fires only when the user actually sends.
+	useEffect( () => {
+		lastUserIdRef.current = null;
+	}, [ activeChatId ] );
+
+	// When a new user message appears at the tail of the transcript, scroll
+	// the transcript to the bottom so the just-sent message and the
+	// (about-to-stream) assistant bubble are visible.
+	useEffect( () => {
+		let lastUser: UserMessage | null = null;
+		for ( let i = messages.length - 1; i >= 0; i-- ) {
+			const m = messages[ i ];
+			if ( m.kind === 'user' ) {
+				lastUser = m;
+				break;
+			}
+		}
+		if ( ! lastUser ) {
+			return;
+		}
+		if ( lastUser.id === lastUserIdRef.current ) {
+			return;
+		}
+		const isFirstSee = lastUserIdRef.current === null;
+		lastUserIdRef.current = lastUser.id;
+		if ( isFirstSee ) {
+			return;
+		}
+		const transcript = transcriptRef.current;
+		if ( ! transcript ) {
+			return;
+		}
+		transcript.scrollTo( {
+			top: transcript.scrollHeight,
+			behavior: 'smooth',
+		} );
+	}, [ messages ] );
+
 	const startEditingTab = ( chatId: string ): void => {
 		const current = chats.find( ( c ) => c.id === chatId );
 		setEditingChatId( chatId );
@@ -632,7 +686,11 @@ export function ProjectScreen( {
 						</div>
 					) }
 
-					<main className="transcript" data-testid="transcript">
+					<main
+						className="transcript"
+						data-testid="transcript"
+						ref={ transcriptRef }
+					>
 						{ groupMessages( messages ).map( ( item ) => {
 							if ( item.kind === 'user' ) {
 								return (
@@ -648,20 +706,65 @@ export function ProjectScreen( {
 								);
 							}
 							if ( item.kind === 'assistant' ) {
+								const isWorking =
+									item.streaming && item.text.length === 0;
+								const isCancelled =
+									! item.streaming && !! item.cancelled;
+								// Drop bubbles that finished with no text and
+								// weren't cancelled (e.g. tool-only turns):
+								// they used to render as silent empty bubbles.
+								if (
+									! item.streaming &&
+									! isCancelled &&
+									item.text.length === 0
+								) {
+									return null;
+								}
 								return (
 									<div
 										key={ item.id }
 										className={ `bubble bubble-assistant${
 											item.errored ? ' bubble-error' : ''
+										}${
+											isCancelled
+												? ' bubble-cancelled'
+												: ''
 										}` }
 										data-testid="bubble-assistant"
 										data-streaming={
 											item.streaming ? 'true' : 'false'
 										}
+										data-cancelled={
+											isCancelled ? 'true' : 'false'
+										}
 									>
-										<div className="bubble-text">
-											{ item.text }
-										</div>
+										{ isWorking ? (
+											<div
+												className="bubble-thinking"
+												data-testid="bubble-thinking"
+												aria-label="Assistant is working"
+											>
+												<span />
+												<span />
+												<span />
+											</div>
+										) : (
+											<>
+												{ item.text.length > 0 && (
+													<div className="bubble-text">
+														{ item.text }
+													</div>
+												) }
+												{ isCancelled && (
+													<div
+														className="bubble-stopped"
+														data-testid="bubble-stopped"
+													>
+														Stopped
+													</div>
+												) }
+											</>
+										) }
 									</div>
 								);
 							}
@@ -774,14 +877,15 @@ export function ProjectScreen( {
 					<div className="composer" data-testid="composer">
 						<div className="composer-field">
 							<textarea
+								ref={ composerInputRef }
 								className="composer-input"
 								data-testid="chat-input"
 								placeholder={
 									activeProjectId
 										? 'Message Studio Write… (Enter to send, Shift+Enter for newline)'
 										: 'Link a project to start chatting'
 								}
-								rows={ 3 }
+								rows={ 1 }
 								value={ input }
 								onChange={ ( e ) =>
 									onInputChange( e.target.value )

src/types.ts

@@ -45,6 +45,7 @@ const PersistedAssistant = z.object( {
 	id: z.string(),
 	text: z.string(),
 	errored: z.boolean().optional(),
+	cancelled: z.boolean().optional(),
 	at: z.number(),
 } );
 const PersistedTool = z.object( {
@@ -146,6 +147,7 @@ export const AgentEvent = z.discriminatedUnion( 'kind', [
 		kind: z.literal( 'done' ),
 		projectId: z.string().min( 1 ),
 		success: z.boolean(),
+		cancelled: z.boolean(),
 	} ),
 	z.object( {
 		kind: z.literal( 'error' ),