Polish session log view (#7131)

mjbvz · web-flow · commit fd37f9c97dd6 · 2025-06-27T10:26:36.000-07:00
- Disable scrolling of unexpanded content
- Fixing path display
- Improve display of bash commands
diff --git a/src/github/pullRequestOverview.ts b/src/github/pullRequestOverview.ts
@@ -481,9 +481,9 @@ export class PullRequestOverviewPanel extends IssueOverviewPanel<PullRequestMode
 		}
 	}
 
-	private async openSessionLog(_message: IRequestMessage<{ link: SessionLinkInfo }>): Promise<void> {
+	private async openSessionLog(message: IRequestMessage<{ link: SessionLinkInfo }>): Promise<void> {
 		try {
-			await SessionLogViewManager.instance?.openForPull(this._item, _message.args.link);
+			await SessionLogViewManager.instance?.openForPull(this._item, message.args.link);
 		} catch (e) {
 			Logger.error(`Open session log view failed: ${formatError(e)}`, PullRequestOverviewPanel.ID);
 		}
diff --git a/src/view/sessionLogView.ts b/src/view/sessionLogView.ts
@@ -271,7 +271,7 @@ class SessionLogView extends Disposable {
 				<meta charset="UTF-8">
 				<meta name="viewport" content="width=device-width, initial-scale=1.0">
 				<title>${vscode.l10n.t('Session Log')}</title>
-				<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline' ${this.webviewPanel.webview.cspSource}; script-src ${this.webviewPanel.webview.cspSource} 'unsafe-eval'; font-src ${this.webviewPanel.webview.cspSource};">
+				<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline' ${this.webviewPanel.webview.cspSource}; script-src ${this.webviewPanel.webview.cspSource} 'unsafe-eval' blob:; font-src ${this.webviewPanel.webview.cspSource};">
 			</head>
 			<body>
 				<div id="app"></div>
diff --git a/webviews/sessionLogView/codeView.tsx b/webviews/sessionLogView/codeView.tsx
@@ -19,6 +19,7 @@ interface CodeViewProps {
 
 export const CodeView: React.FC<CodeViewProps> = ({ label, description, content }) => {
 	const [open, setOpen] = React.useState<boolean>(true);
+	const [hasExpandableContent, setHasExpandableContent] = React.useState<boolean>(false);
 	const [expanded, setExpanded] = React.useState<boolean>(false);
 	const [editor, setEditor] = React.useState<monaco.editor.IStandaloneCodeEditor | undefined>(undefined);
 
@@ -47,7 +48,6 @@ export const CodeView: React.FC<CodeViewProps> = ({ label, description, content
 			scrollBeyondLastLine: false,
 			lineNumbers: 'off',
 			renderLineHighlight: 'none',
-			automaticLayout: true,
 			fontSize: 12,
 			wordWrap: 'on',
 			rulers: [],
@@ -57,43 +57,59 @@ export const CodeView: React.FC<CodeViewProps> = ({ label, description, content
 		});
 
 		setEditor(editor);
-		updateEditorHeight(editor);
+		updateEditorDimensions(editor);
+
+		// Check if content exceeds collapsed height and should show expand button
+		setHasExpandableContent(editor.getContentHeight() > collapsedHeight);
+
+		// Listen for width changes and relayout editor
+		let lastObservedWidth = editorContainerRef.current.clientWidth;
+		const resizeObserver = new ResizeObserver(entries => {
+			const newWidth = entries.at(0)?.contentRect.width;
+			if (newWidth && newWidth !== lastObservedWidth) {
+				lastObservedWidth = newWidth;
+				updateEditorDimensions(editor, lastObservedWidth);
+			}
+		});
+		resizeObserver.observe(editorContainerRef.current);
 
-		// Cleanup
 		return () => {
+			resizeObserver.disconnect();
 			if (editor) {
 				editor.dispose();
 				setEditor(undefined);
 			}
 		};
+
 	}, [editorContainerRef]);
 
 	// Update editor height when expanded state changes
 	React.useEffect(() => {
 		if (editor) {
-			updateEditorHeight(editor);
+			updateEditorDimensions(editor);
 		}
 	}, [expanded]);
 
-	const updateEditorHeight = (editorInstance: monaco.editor.IStandaloneCodeEditor) => {
-		if (!editorContainerRef.current) return;
+	const updateEditorDimensions = (editorInstance: monaco.editor.IStandaloneCodeEditor, containerWidthHint?: number) => {
+		if (!editorContainerRef.current) {
+			return;
+		}
 
 		const contentHeight = editorInstance.getContentHeight();
-		const width = editorContainerRef.current.clientWidth || 300;
+		const width = containerWidthHint ?? (editorContainerRef.current.clientWidth || 300);
 
 		if (expanded) {
 			if (editorContainerRef.current) {
 				editorContainerRef.current.style.height = `${contentHeight}px`;
 			}
-			editorInstance.layout({ width, height: contentHeight });
 		} else {
 			const newContentHeight = Math.min(contentHeight, collapsedHeight);
 			if (editorContainerRef.current) {
 				editorContainerRef.current.style.height = `${newContentHeight}px`;
 			}
-			// Always lay the editor out for the full height
-			editorInstance.layout({ width, height: contentHeight });
 		}
+
+		editorInstance.layout({ width, height: contentHeight });
 	};
 
 	const toggleExpanded = () => {
@@ -104,9 +120,6 @@ export const CodeView: React.FC<CodeViewProps> = ({ label, description, content
 		setOpen(!open);
 	};
 
-	// Check if content exceeds collapsed height and should show expand button
-	const hasExpandableContent = editor ? editor.getContentHeight() > collapsedHeight : false;
-
 	return (
 		<div className={`codeview-wrapper ${!expanded && hasExpandableContent ? 'collapsed' : ''}`}>
 			<details className="codeview-details" open={open}>
diff --git a/webviews/sessionLogView/sessionView.tsx b/webviews/sessionLogView/sessionView.tsx
@@ -130,12 +130,13 @@ const SessionLog: React.FC<SessionLogProps> = ({ logs }) => {
 					if (content) {
 						const file = content.fileA ?? content.fileB;
 						const lang = (file && getLanguageForResource(file)) ?? 'plaintext';
+						const fileLabel = file && toFileLabel(file);
 
 						return (
 							<CodeView
 								key={`view-${index}`}
-								label="View"
-								description={file && toFileLabel(file)}
+								label={fileLabel === '' ? 'View repository' : 'View'}
+								description={fileLabel}
 								content={{ value: content.content, lang }}
 							/>
 						);
@@ -145,7 +146,7 @@ const SessionLog: React.FC<SessionLogProps> = ({ logs }) => {
 						<CodeView
 							key={`edit-${index}`}
 							label="Edit"
-							description={args.path}
+							description={args.path && toFileLabel(args.path)}
 							content={{ value: choice.delta.content, lang: 'diff' }}
 						/>
 					);
@@ -168,11 +169,22 @@ const SessionLog: React.FC<SessionLogProps> = ({ logs }) => {
 					/>
 				);
 			} else if (name === 'bash') {
+				let command: string | undefined;
+				try {
+					const args = choice.delta.tool_calls.at(0)?.function.arguments;
+					command = args && JSON.parse(args).command;
+					if (command) {
+						command = '$ ' + command;
+					}
+				} catch (error) {
+					console.warn(`Failed to parse bash command arguments: ${error}`);
+				}
+
 				return (
 					<CodeView
 						key={`bash-${index}`}
 						label="Run Bash command"
-						content={{ value: choice.delta.content, lang: 'markdown' }}
+						content={{ value: [command, choice.delta.content].filter(Boolean).join('\n'), lang: 'bash' }}
 					/>
 				);
 			}
@@ -252,6 +264,7 @@ function getLanguageForResource(filePath: string): string | undefined {
 
 
 function toFileLabel(file: string): string {
+	// File paths are absolute and look like: `/home/runner/work/repo/repo/<path>`
 	const parts = file.split('/');
-	return parts.slice(5).join('/');
+	return parts.slice(6).join('/');
 }
diff --git a/webviews/sessionLogView/sessionsApi.ts b/webviews/sessionLogView/sessionsApi.ts
@@ -64,7 +64,7 @@ export function parseSessionLogs(rawText: string): SessionResponseLogChunk[] {
 
 	return parts as SessionResponseLogChunk[];
 }
-// Utility functions
+
 export function parseDiff(content: string): { content: string; fileA: string | undefined; fileB: string | undefined; } | undefined {
 	const lines = content.split(/\r?\n/g);
 	let fileA: string | undefined;
@@ -90,8 +90,8 @@ export function parseDiff(content: string): { content: string; fileA: string | u
 
 	return {
 		content: lines.slice(startDiffLineIndex).join('\n'),
-		fileA,
-		fileB
+		fileA: typeof fileA === 'string' ? '/' + fileA : undefined,
+		fileB: typeof fileB === 'string' ? '/' + fileB : undefined
 	};
 }
 

Original file line number	Diff line number	Diff line change
`@@ -481,9 +481,9 @@ export class PullRequestOverviewPanel extends IssueOverviewPanel<PullRequestMode`
`481`	`481`	`}`
`482`	`482`	`}`
`483`	`483`
`484`		`- private async openSessionLog(_message: IRequestMessage<{ link: SessionLinkInfo }>): Promise<void> {`
	`484`	`+ private async openSessionLog(message: IRequestMessage<{ link: SessionLinkInfo }>): Promise<void> {`
`485`	`485`	`try {`
`486`		`- await SessionLogViewManager.instance?.openForPull(this._item, _message.args.link);`
	`486`	`+ await SessionLogViewManager.instance?.openForPull(this._item, message.args.link);`
`487`	`487`	`} catch (e) {`
`488`	`488`	Logger.error(`Open session log view failed: ${formatError(e)}`, PullRequestOverviewPanel.ID);
`489`	`489`	`}`