Add basic log streaming (#7112)

Author: mjbvz

package.json

@@ -1661,7 +1661,7 @@
 			},
 			{
 				"command": "codingAgent.openSessionLog",
-				"title": "Open Coding Agent Session Log",
+				"title": "%command.codingAgent.openSessionLog.title%",
 				"category": "%command.pull.request.category%"
 			}
 		],
@@ -3967,7 +3967,6 @@
 		"jsdom": "19.0.0",
 		"jsdom-global": "3.0.2",
 		"json5": "2.2.2",
-		"markdown-it": "^14.1.0",
 		"merge-options": "3.0.4",
 		"minimist": "^1.2.6",
 		"mkdirp": "1.0.4",
@@ -3981,7 +3980,6 @@
 		"process": "^0.11.10",
 		"raw-loader": "4.0.2",
 		"react-testing-library": "7.0.1",
-		"shiki": "^3.7.0",
 		"sinon": "9.0.0",
 		"source-map-support": "0.5.19",
 		"stream-browserify": "^3.0.0",
@@ -4015,11 +4013,14 @@
 		"jszip": "^3.10.1",
 		"lru-cache": "6.0.0",
 		"marked": "^4.0.10",
+		"markdown-it": "^14.1.0",
 		"monaco-editor": "^0.52.2",
 		"react": "^16.12.0",
 		"react-dom": "^16.12.0",
+		"shiki": "^3.7.0",
 		"ssh-config": "4.1.1",
 		"stream-http": "^3.2.0",
+		"temporal-polyfill": "^0.3.0",
 		"tunnel": "0.0.6",
 		"url-search-params-polyfill": "^8.1.1",
 		"uuid": "8.3.2",

package.nls.json

@@ -13,9 +13,9 @@
 	"githubPullRequests.defaultCreateOption.createAutoMerge": "The pull request will be created with auto-merge enabled. The merge method selected will be the default for the repo or the value of `githubPullRequests.defaultMergeMethod` if set.",
 	"githubPullRequests.createDraft": "Whether the \"Draft\" checkbox will be checked by default when creating a pull request.",
 	"githubPullRequests.logLevel.description": "Logging for GitHub Pull Request extension. The log is emitted to the output channel named as GitHub Pull Request.",
-	"githubPullRequests.logLevel.markdownDeprecationMessage":{
+	"githubPullRequests.logLevel.markdownDeprecationMessage": {
 		"message": "Log level is now controlled by the [Developer: Set Log Level...](command:workbench.action.setLogLevel) command. You can set the log level for the current session and also the default log level from there.",
-		"comment" : [
+		"comment": [
 			"Do not translate what's inside of (...). It is link syntax.",
 			"{Locked='](command:workbench.action.setLogLevel)'}"
 		]
@@ -153,7 +153,7 @@
 	"view.github.login.name": "Login",
 	"view.pr.github.name": "Pull Requests",
 	"view.pr.github.accessibilityHelpContent": {
-		"message":"Helpful commands include:\n-GitHub Pull Requests: Refresh Pull Requests List<keybinding:pr.refreshList>\n-GitHub Pull Requests: Focus on Issues View<keybinding:issues:github.focus> \n-GitHub Pull Requests: Focus on Pull Requests View<keybinding:pr:github.focus>\n-GitHub Issues: Copy GitHub Permalink<keybinding:issue.copyGithubPermalink>\n-GitHub Issues: Create an Issue<keybinding:issue.createIssueFromFile>\n-GitHub Pull Requests: Create Pull Request<keybinding:pr.create>",
+		"message": "Helpful commands include:\n-GitHub Pull Requests: Refresh Pull Requests List<keybinding:pr.refreshList>\n-GitHub Pull Requests: Focus on Issues View<keybinding:issues:github.focus> \n-GitHub Pull Requests: Focus on Pull Requests View<keybinding:pr:github.focus>\n-GitHub Issues: Copy GitHub Permalink<keybinding:issue.copyGithubPermalink>\n-GitHub Issues: Create an Issue<keybinding:issue.createIssueFromFile>\n-GitHub Pull Requests: Create Pull Request<keybinding:pr.create>",
 		"comment": [
 			"Do not translate the contents of (...) or <...> in the message. They are commands that will be replaced with the actual command name and keybinding."
 		]
@@ -307,17 +307,18 @@
 	"command.notifications.markPullRequestsAsDone.title": "Mark Pull Requests as Done",
 	"command.notifications.configureNotificationsViewlet.title": "Configure...",
 	"command.notification.chatSummarizeNotification.title": "Summarize With Copilot",
+	"command.codingAgent.openSessionLog.title": "Open Coding Agent Session Log",
 	"welcome.github.login.contents": {
 		"message": "You have not yet signed in with GitHub\n[Sign in](command:pr.signin)",
-		"comment" : [
+		"comment": [
 			"Do not translate what's inside of (...). It is link syntax.",
 			"{Locked='](command:pr.signin)'}"
 		]
 	},
 	"welcome.github.noGit.contents": "Git is not installed or otherwise not available. Install git or fix your git installation and then reload.",
 	"welcome.github.loginNoEnterprise.contents": {
 		"message": "You have not yet signed in with GitHub\n[Sign in](command:pr.signinNoEnterprise)",
-		"comment" : [
+		"comment": [
 			"Do not translate what's inside of (...). It is link syntax.",
 			"{Locked='](command:pr.signinNoEnterprise)'}"
 		]
@@ -332,7 +333,7 @@
 	"welcome.pr.github.uninitialized.contents": "Loading...",
 	"welcome.pr.github.noFolder.contents": {
 		"message": "You have not yet opened a folder.\n[Open Folder](command:workbench.action.files.openFolder)",
-		"comment" : [
+		"comment": [
 			"Do not translate what's inside of (...). It is link syntax.",
 			"{Locked='](command:workbench.action.files.openFolder)'}"
 		]
@@ -374,4 +375,4 @@
 	"languageModelTools.github-pull-request_activePullRequest.description": "Get information about the active GitHub pull request. This information includes: comments, files changed, pull request title + description, pull request state, and pull request status checks/CI.",
 	"languageModelTools.github-pull-request_copilot-coding-agent.displayName": "Copilot Coding Agent",
 	"languageModelTools.github-pull-request_copilot-coding-agent.userDescription": "Completes the provided task using an asynchronous coding agent. Use when the user wants copilot continue completing a task in the background or asynchronously. Launch an autonomous GitHub Copilot agent to work on coding tasks in the background. The agent will create a new branch, implement the requested changes, and open a pull request with the completed work."
-}
+}

src/view/sessionLogView.ts

@@ -313,26 +313,32 @@ class SessionLogView extends Disposable {
 		this.webviewPanel.webview.postMessage({
 			type: 'loaded',
 			info,
-			logs,
+			logs
 		} as messages.LoadedMessage);
 
 		if (info.state === 'in_progress') {
-			// Poll for updates every 5 seconds
+			// Poll for updates
 			const interval = setInterval(async () => {
 				if (this._isDisposed) {
 					clearInterval(interval);
 					return;
 				}
 
-				const updatedInfo = await this.copilotApi.getSessionInfo(this.sessionId);
-				if (updatedInfo.state !== info.state) {
-					this.webviewPanel.webview.postMessage({
-						type: 'loaded',
-						info: updatedInfo,
-						logs,
-					} as messages.LoadedMessage);
+				const [newInfo, newLogs] = await Promise.all([
+					this.copilotApi.getSessionInfo(this.sessionId),
+					this.copilotApi.getLogsFromSession(this.sessionId)
+				]);
+
+				this.webviewPanel.webview.postMessage({
+					type: 'update',
+					info: newInfo,
+					logs: newLogs
+				} as messages.UpdateMessage);
+
+				if (newInfo.state !== 'in_progress') {
+					clearInterval(interval);
 				}
-			}, 5000);
+			}, 3000);
 
 			this._register({
 				dispose: () => clearInterval(interval)

webviews/sessionLogView/app.tsx

@@ -25,7 +25,7 @@ export function App() {
 	React.useEffect(() => {
 		let themeP: Promise<void> | undefined;
 		const handleMessage = async (event: MessageEvent) => {
-			const message = event.data as messages.InitMessage | messages.ChangeThemeMessage | messages.LoadedMessage;
+			const message = event.data as messages.InitMessage | messages.ChangeThemeMessage | messages.LoadedMessage | messages.UpdateMessage;
 			switch (message?.type) {
 				case 'init': {
 					themeP = registerMonacoTheme(message.themeData);
@@ -37,7 +37,9 @@ export function App() {
 					setPullInfo(message.pullInfo);
 					break;
 				}
-				case 'loaded': {
+
+				case 'loaded':
+				case 'update': {
 					await themeP;
 					setState({
 						state: 'ready',

webviews/sessionLogView/index.css

@@ -14,7 +14,19 @@
 	position: relative;
 	max-width: 800px;
 	margin: 0 auto;
-	padding-top: 1em;
+	padding: 1em 0;
+}
+
+.session-in-progress-indicator {
+	margin-top: 1em;
+	text-align: center;
+	color: var(--vscode-descriptionForeground);
+
+	.codicon {
+		margin-right: 0.5em;
+		transform: rotate(0);
+		animation: spin 1s linear infinite;
+	}
 }
 
 .session-header-info {
@@ -157,4 +169,10 @@ button.codeview-expand:hover {
 .codeview-expand:hover,
 .codeview-expand:focus {
 	background: rgba(255, 255, 255, 0.08);
+}
+
+@keyframes spin {
+	to {
+		transform: rotate(360deg);
+	}
 }

webviews/sessionLogView/messages.ts

@@ -23,6 +23,12 @@ export interface LoadedMessage {
 	logs: string;
 }
 
+export interface UpdateMessage {
+	type: 'update';
+	info: SessionInfo;
+	logs: string;
+}
+
 export interface ChangeThemeMessage {
 	type: 'changeTheme';
 	themeData: any;

webviews/sessionLogView/sessionView.tsx

@@ -8,6 +8,7 @@ import type monacoType from 'monaco-editor';
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.main';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import { Temporal } from 'temporal-polyfill';
 import { vscode } from '../common/message';
 import { CodeView } from './codeView';
 import './index.css'; // Create this file for styling
@@ -25,6 +26,11 @@ export const SessionView: React.FC<SessionViewProps> = (props) => {
 		<div className="session-container">
 			<SessionHeader info={props.info} pullInfo={props.pullInfo} />
 			<SessionLog logs={props.logs} />
+			{props.info.state === 'in_progress' && (
+				<div className="session-in-progress-indicator">
+					<span className="icon"><i className="codicon codicon-loading"></i></span>
+					Session is in progress...</div>
+			)}
 		</div>
 	);
 };
@@ -36,10 +42,11 @@ interface SessionHeaderProps {
 }
 
 const SessionHeader: React.FC<SessionHeaderProps> = ({ info, pullInfo }) => {
-	const createdAt = new Date(info.created_at);
-	const completedAt = info.completed_at ? new Date(info.completed_at) : new Date();
-	const durationMs = completedAt.getTime() - createdAt.getTime();
-	const durationSec = Math.round(durationMs / 1000);
+	const createdAt = Temporal.Instant.from(info.created_at);
+	const completedAt = info.completed_at ? Temporal.Instant.from(info.completed_at) : undefined;
+	const duration = completedAt && completedAt.epochMilliseconds > 0
+		? completedAt.since(createdAt, { smallestUnit: 'second', largestUnit: 'hour' })
+		: undefined;
 
 	return (
 		<header className="session-header">
@@ -73,10 +80,12 @@ const SessionHeader: React.FC<SessionHeaderProps> = ({ info, pullInfo }) => {
 					<div className="session-value">{info.state}</div>
 				</div>
 
-				<div className="session-duration">
-					<div className="session-label">Duration</div>
-					<div className="session-value">{durationSec}s</div>
-				</div>
+				{duration && (
+					<div className="session-duration">
+						<div className="session-label">Duration</div>
+						<div className="session-value">{duration.toLocaleString()}</div>
+					</div>
+				)}
 
 				<div className="session-premium">
 					<div className="session-label">Premium requests</div>

yarn.lock

@@ -6144,6 +6144,18 @@ temp@0.9.4:
     mkdirp "^0.5.1"
     rimraf "~2.6.2"
 
+temporal-polyfill@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/temporal-polyfill/-/temporal-polyfill-0.3.0.tgz#7fe90e913ac5ec8e0d508fb50d04dd7a74cec23e"
+  integrity sha512-qNsTkX9K8hi+FHDfHmf22e/OGuXmfBm9RqNismxBrnSmZVJKegQ+HYYXT+R7Ha8F/YSm2Y34vmzD4cxMu2u95g==
+  dependencies:
+    temporal-spec "0.3.0"
+
+temporal-spec@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/temporal-spec/-/temporal-spec-0.3.0.tgz#8c4210c575fb28ba0a1c2e02ad68d1be5956a11f"
+  integrity sha512-n+noVpIqz4hYgFSMOSiINNOUOMFtV5cZQNCmmszA6GiVFVRt3G7AqVyhXjhCSmowvQn+NsGn+jMDMKJYHd3bSQ==
+
 terser-webpack-plugin@5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.1.1.tgz#7effadee06f7ecfa093dbbd3e9ab23f5f3ed8673"