Add "View Session" button next to "Cancel Coding Agent" button (#7086)

* Initial plan

* Add View Session button next to Cancel Coding Agent button

Co-authored-by: alexr00 <38270282+alexr00@users.noreply.github.com>

* Fix: Replace 'in' check with proper type cast for sessionLink

Co-authored-by: alexr00 <38270282+alexr00@users.noreply.github.com>

* Move View Session button to the left of Cancel button

Co-authored-by: alexr00 <38270282+alexr00@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: alexr00 <38270282+alexr00@users.noreply.github.com>

Author: Copilot

webviews/components/header.tsx

@@ -5,7 +5,7 @@
 
 import React, { useContext, useState } from 'react';
 import { copilotEventToStatus, CopilotPRStatus, mostRecentCopilotEvent } from '../../src/common/copilot';
-import { TimelineEvent } from '../../src/common/timelineEvent';
+import { CopilotStartedEvent, TimelineEvent } from '../../src/common/timelineEvent';
 import { GithubItemStateEnum } from '../../src/github/interface';
 import { PullRequest } from '../../src/github/views';
 import PullRequestContext from '../common/context';
@@ -134,7 +134,7 @@ function ButtonGroup({ isCurrentlyCheckedOut, canEdit, isIssue, repositoryDefaul
 }
 
 function CancelCodingAgentButton({ canEdit, codingAgentEvent }: { canEdit: boolean, codingAgentEvent: TimelineEvent | undefined }) {
-	const { cancelCodingAgent, updatePR } = useContext(PullRequestContext);
+	const { cancelCodingAgent, updatePR, openSessionLog } = useContext(PullRequestContext);
 	const [isBusy, setBusy] = useState(false);
 
 	const cancel = async () => {
@@ -149,8 +149,16 @@ function CancelCodingAgentButton({ canEdit, codingAgentEvent }: { canEdit: boole
 		setBusy(false);
 	};
 
+	// Extract sessionLink from the coding agent event
+	const sessionLink = (codingAgentEvent as CopilotStartedEvent)?.sessionLink;
+
 	return (canEdit && codingAgentEvent && copilotEventToStatus(codingAgentEvent) === CopilotPRStatus.Started)
 		? <div className="button-group">
+			{sessionLink && (
+				<button title="View Session" className="secondary small-button" onClick={() => openSessionLog(sessionLink)}>
+					View Session
+				</button>
+			)}
 			<button title="Cancel Coding Agent" disabled={isBusy} className="small-button danger" onClick={cancel}>
 				Cancel Coding Agent
 			</button>