"Copilot stopped work" not shown in PR view when running into an error (#7056)

Fixes #7040

Author: alexr00

resources/icons/error.svg

@@ -24,6 +24,7 @@ export enum EventType {
 	Reopened,
 	CopilotStarted,
 	CopilotFinished,
+	CopilotFinishedError,
 	Other,
 }
 
@@ -165,4 +166,12 @@ export interface CopilotFinishedEvent {
 	onBehalfOf: IAccount;
 }
 
-export type TimelineEvent = CommitEvent | ReviewEvent | CommentEvent | NewCommitsSinceReviewEvent | MergedEvent | AssignEvent | UnassignEvent | HeadRefDeleteEvent | CrossReferencedEvent | ClosedEvent | ReopenedEvent | CopilotStartedEvent | CopilotFinishedEvent;
+export interface CopilotFinishedErrorEvent {
+	id: string;
+	event: EventType.CopilotFinishedError;
+	createdAt: string;
+	onBehalfOf: IAccount;
+	sessionUrl: string;
+}
+
+export type TimelineEvent = CommitEvent | ReviewEvent | CommentEvent | NewCommitsSinceReviewEvent | MergedEvent | AssignEvent | UnassignEvent | HeadRefDeleteEvent | CrossReferencedEvent | ClosedEvent | ReopenedEvent | CopilotStartedEvent | CopilotFinishedEvent | CopilotFinishedErrorEvent;

src/common/timelineEvent.ts

@@ -1002,6 +1002,7 @@ export function parseSelectRestTimelineEvents(
 	events: OctokitCommon.ListEventsForTimelineResponse[]
 ): Common.TimelineEvent[] {
 	const parsedEvents: Common.TimelineEvent[] = [];
+	const sessionUrl = `https://${issueModel.githubRepository.remote.gitProtocol.host}/${issueModel.githubRepository.remote.owner}/${issueModel.githubRepository.remote.repositoryName}/pull/${issueModel.number}/agent-sessions`;
 	let indexLastStart = -1;
 	for (const event of events) {
 		const eventNode = event as { created_at?: string; node_id?: string; actor: RestAccount };
@@ -1021,12 +1022,20 @@ export function parseSelectRestTimelineEvents(
 					createdAt: eventNode.created_at,
 					onBehalfOf: parseAccount(eventNode.actor)
 				});
+			} else if (event.event === 'copilot_work_finished_failure') {
+				parsedEvents.push({
+					id: eventNode.node_id,
+					event: Common.EventType.CopilotFinishedError,
+					createdAt: eventNode.created_at,
+					onBehalfOf: parseAccount(eventNode.actor),
+					sessionUrl
+				});
 			}
 		}
 	}
 	if (indexLastStart > -1) {
 		const startEvent: Common.CopilotStartedEvent = parsedEvents[indexLastStart] as Common.CopilotStartedEvent;
-		startEvent.sessionUrl = `https://${issueModel.githubRepository.remote.gitProtocol.host}/${issueModel.githubRepository.remote.owner}/${issueModel.githubRepository.remote.repositoryName}/pull/${issueModel.number}/agent-sessions`;
+		startEvent.sessionUrl = sessionUrl;
 	}
 	return parsedEvents;
 }
@@ -1044,6 +1053,7 @@ function eventTime(event: Common.TimelineEvent): Date | undefined {
 		case Common.EventType.Reopened:
 		case Common.EventType.CopilotStarted:
 		case Common.EventType.CopilotFinished:
+		case Common.EventType.CopilotFinishedError:
 			return new Date(event.createdAt);
 		case Common.EventType.Reviewed:
 			return new Date(event.submittedAt);

src/github/utils.ts

@@ -48,3 +48,4 @@ export const issueClosedIcon = <Icon src={require('../../resources/icons/issue_c
 export const copilotIcon = <Icon src={require('../../resources/icons/copilot.svg')} />;
 export const threeBars = <Icon src={require('../../resources/icons/three-bars.svg')} />;
 export const tasklistIcon = <Icon src={require('../../resources/icons/tasklist.svg')} />;
+export const errorIcon = <Icon src={require('../../resources/icons/error.svg')} />;

webviews/components/icon.tsx

@@ -10,6 +10,7 @@ import {
 	ClosedEvent,
 	CommentEvent,
 	CommitEvent,
+	CopilotFinishedErrorEvent,
 	CopilotFinishedEvent,
 	CopilotStartedEvent,
 	CrossReferencedEvent,
@@ -27,7 +28,7 @@ import { ReviewType } from '../../src/github/views';
 import PullRequestContext from '../common/context';
 import { CommentView } from './comment';
 import Diff from './diff';
-import { commitIcon, mergeIcon, plusIcon, tasklistIcon, threeBars } from './icon';
+import { commitIcon, errorIcon, mergeIcon, plusIcon, tasklistIcon, threeBars } from './icon';
 import { nbsp } from './space';
 import { Timestamp } from './timestamp';
 import { AuthorLink, Avatar } from './user';
@@ -95,6 +96,8 @@ export const Timeline = ({ events, isIssue }: { events: TimelineEvent[], isIssue
 				return <CopilotStartedEventView key={`copilotStarted${event.id}`} {...event} />;
 			case EventType.CopilotFinished:
 				return <CopilotFinishedEventView key={`copilotFinished${event.id}`} {...event} />;
+			case EventType.CopilotFinishedError:
+				return <CopilotFinishedErrorEventView key={`copilotFinishedError${event.id}`} {...event} />;
 			default:
 				throw new UnreachableCaseError(event);
 		}
@@ -466,4 +469,23 @@ const CopilotFinishedEventView = (event: CopilotFinishedEvent) => {
 			<Timestamp date={createdAt} />
 		</div>
 	);
+};
+
+const CopilotFinishedErrorEventView = (event: CopilotFinishedErrorEvent) => {
+	const { createdAt, onBehalfOf } = event;
+	return (
+		<div className="comment-container commit">
+			<div className='timeline-with-detail'>
+				<div className='commit-message'>
+					{errorIcon}
+					{nbsp}
+					<div className="message">Copilot stopped work on behalf of <AuthorLink for={onBehalfOf} /> due to an error</div>
+				</div>
+				<div className="commit-message-detail">
+					<a href={event.sessionUrl}>Copilot has encountered an error. See logs for additional details.</a>
+				</div>
+			</div>
+			<Timestamp date={createdAt} />
+		</div>
+	);
 };

webviews/components/timeline.tsx

@@ -660,13 +660,26 @@ body button .icon {
 }
 
 .commit .commit-message,
+.commit .timeline-with-detail,
 .merged .merged-message {
-	display: flex;
 	align-items: center;
 	overflow: hidden;
 	flex-grow: 1;
 }
 
+.commit .commit-message,
+.merged .merged-message {
+	display: flex;
+}
+
+.commit .timeline-with-detail {
+	display: block;
+}
+
+.commit-message-detail {
+	margin-left: 20px;
+}
+
 .commit .commit-message .avatar-container,
 .merged .merged-message .avatar-container {
 	margin-right: 4px;