Updates explain commit UI

src/webviews/apps/commitDetails/commitDetails.scss

@@ -571,18 +571,28 @@ ul {
 	}
 }
 
-.ai-content--summary {
+.ai-content {
 	font-size: 1.3rem;
-	border: 1px solid var(--vscode-input-border);
+	border: 1px solid var(--vscode-input-border, transparent);
 	background: var(--vscode-input-background);
 	margin-top: 1rem;
-	padding: 1rem 0 0 1rem;
-	overflow: scroll;
-	white-space: break-spaces;
-}
+	padding: 0.5rem;
+
+	&.has-error {
+		border-color: var(--color-alert-errorBorder);
+	}
+
+	&:empty {
+		display: none;
+	}
 
-.ai-content--summary.error {
-	border-color: var(--color-alert-errorBorder);
+	&__summary {
+		margin: 0;
+		overflow-y: auto;
+		overflow-x: hidden;
+		// max-height: 9rem;
+		white-space: break-spaces;
+	}
 }
 
 @import '../shared/codicons';

src/webviews/apps/commitDetails/commitDetails.ts

@@ -141,22 +141,31 @@ export class CommitDetailsApp extends App> {
 		el.setAttribute('aria-busy', 'true');
 
 		e.preventDefault();
-		const result = await this.sendCommandWithCompletion(
-			ExplainCommitCommandType,
-			undefined,
-			DidExplainCommitCommandType,
-		);
-
-		el.removeAttribute('aria-busy');
 		const explanationEL = document.querySelector('[data-region="commit-explanation"]')!;
-		if (result.error) {
-			explanationEL.innerHTML = `<p class="ai-content--summary error scrollable">${result.error.message}</p>`;
-		} else if (result.summary) {
-			explanationEL.innerHTML = `<p class="ai-content--summary scrollable">${result.summary}</p>`;
-		} else {
-			explanationEL.innerHTML = '';
+		try {
+			const result = await this.sendCommandWithCompletion(
+				ExplainCommitCommandType,
+				undefined,
+				DidExplainCommitCommandType,
+			);
+
+			explanationEL.classList.toggle('has-error', result.error != null);
+			if (result.error) {
+				explanationEL.innerHTML = `<p class="ai-content__summary scrollable">${
+					result.error.message ?? 'Error retrieving content'
+				}</p>`;
+			} else if (result.summary) {
+				explanationEL.innerHTML = `<p class="ai-content__summary scrollable">${result.summary}</p>`;
+			} else {
+				explanationEL.innerHTML = '';
+			}
+		} catch (ex) {
+			explanationEL.classList.add('has-error');
+			explanationEL.innerHTML = `<p class="ai-content__summary scrollable">Error retrieving content</p>`;
+		} finally {
+			el.removeAttribute('aria-busy');
+			explanationEL.scrollIntoView();
 		}
-		explanationEL.scrollIntoView();
 	}
 
 	onDismissBanner(e: MouseEvent) {

src/webviews/commitDetails/commitDetailsWebview.ts

@@ -398,7 +398,7 @@ export class CommitDetailsWebviewProvider implements WebviewProvider
 			params = { summary: summary };
 		} catch (ex) {
 			debugger;
-			params = { error: ex.message };
+			params = { error: { message: ex.message } };
 		}
 		void this.host.notify(DidExplainCommitCommandType, params, completionId);
 	}