Adds explain commit UI to commit details

src/webviews/apps/commitDetails/commitDetails.html

@@ -228,6 +228,22 @@
 						</li>
 					</ul>
 				</webview-pane>
+
+				<webview-pane collapsable data-region="explain-pane">
+					<span slot="title">AI assistance</span>
+
+					<div class="pane-content">
+						<p>Let OpenAI assist in understanding the changes made with this commit.</p>
+						<p class="button-container">
+							<span class="button-group">
+								<button class="button button--full" type="button" data-action="explain-commit">
+									<code-icon icon="loading" modifier="spin"></code-icon>Explain this Commit
+								</button>
+							</span>
+						</p>
+						<div class="ai-content" data-region="commit-explanation"></div>
+					</div>
+				</webview-pane>
 			</main>
 		</div>
 		#{endOfBody}

src/webviews/apps/commitDetails/commitDetails.scss

@@ -226,9 +226,37 @@ ul {
 	}
 }
 
+.pane-content {
+	padding: 0 var(--gitlens-scrollbar-gutter-width) 1.5rem var(--gitlens-gutter-width);
+
+	> :first-child {
+		margin-top: 0;
+	}
+}
+
+[data-action='explain-commit'] {
+	code-icon {
+		margin-right: 0.5rem;
+	}
+
+	&[aria-busy='true'] {
+		opacity: 0.5;
+	}
+
+	&:not([aria-busy='true']) {
+		code-icon {
+			display: none;
+		}
+	}
+}
+
 // webview-specific styles
+.ai-content {
+}
+
 .change-list {
 	list-style: none;
+	margin-bottom: 1rem;
 
 	&__item {
 		// & + & {
@@ -539,7 +567,7 @@ ul {
 	}
 
 	&__main {
-		padding-bottom: 1rem;
+		// padding-bottom: 1rem;
 	}
 }
 

src/webviews/apps/commitDetails/commitDetails.ts

@@ -86,6 +86,7 @@ export class CommitDetailsApp extends App> {
 				'expanded-change',
 				e => this.onExpandedChange(e.detail),
 			),
+			DOM.on('[data-action="explain-commit"]', 'click', e => this.onExplainCommit(e)),
 		];
 
 		return disposables;
@@ -131,6 +132,21 @@ export class CommitDetailsApp extends App> {
 		}
 	}
 
+	onExplainCommit(e: MouseEvent) {
+		const el = e.target as HTMLButtonElement;
+		if (el.getAttribute('aria-busy') === 'true') return;
+
+		el.setAttribute('aria-busy', 'true');
+		setTimeout(() => {
+			el.removeAttribute('aria-busy');
+			const explanationEL = document.querySelector('[data-region="commit-explanation"]')!;
+			explanationEL.innerHTML = `
+				<p class="mb-0">No explanation available</p>
+			`;
+			explanationEL.scrollIntoView();
+		}, 2000);
+	}
+
 	onDismissBanner(e: MouseEvent) {
 		const dismissed = this.state.preferences?.dismissed ?? [];
 		if (dismissed.includes('sidebar')) {