feat(ai): Add comprehensive pre-commit AI code review
Introduces a robust system for running automated, staged diff reviews against various large language models. This feature allows users to submit their changes to external AI services and receive structured feedback on potential bugs, security issues, and maintainability risks before committing. The implementation covers the entire stack: * Backend logic was added to handle API communication with OpenAI, Anthropic, and custom endpoints. * A dedicated parser ensures that complex JSON outputs from LLMs are reliably converted into structured findings (severity, title, description). * New components and UI elements provide a clear visualization of the AI's assessment and actionable suggestions. - Supports multiple major LLM providers (OpenAI, Anthropic) - Parses structured JSON output for consistent review results - Adds dedicated UI dialog to display AI findings and risk level
This commit is contained in:
Christoph Brandau
+102
@@ -5926,3 +5926,105 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
|
||||
color: #0755c8;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
/* AI pre-commit review --------------------------------------------------- */
|
||||
.commit-review-button {
|
||||
border-color: color-mix(in srgb, var(--color-primary) 26%, var(--color-border));
|
||||
color: var(--color-primary);
|
||||
background: color-mix(in srgb, var(--color-primary) 8%, transparent);
|
||||
}
|
||||
.commit-review-button:hover:not(:disabled) {
|
||||
border-color: color-mix(in srgb, var(--color-primary) 50%, var(--color-border));
|
||||
color: var(--color-primary);
|
||||
background: color-mix(in srgb, var(--color-primary) 14%, transparent);
|
||||
}
|
||||
.ai-review-dialog {
|
||||
display: grid;
|
||||
grid-template-rows: auto auto minmax(0, 1fr) auto;
|
||||
width: min(920px, calc(100vw - 40px));
|
||||
height: min(780px, calc(100vh - 40px));
|
||||
overflow: hidden;
|
||||
}
|
||||
.ai-review-header h2 { margin: 2px 0 0; color: var(--color-ink); font-size: 16px; }
|
||||
.ai-review-provider {
|
||||
padding: 3px 7px;
|
||||
border-radius: 5px;
|
||||
color: var(--color-ink-dim);
|
||||
background: var(--color-surface-hover);
|
||||
font-size: 10.5px;
|
||||
font-weight: 750;
|
||||
}
|
||||
.ai-review-summary {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
align-items: start;
|
||||
gap: 12px;
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid var(--color-border-subtle);
|
||||
background: var(--color-surface-dim);
|
||||
}
|
||||
.ai-review-summary-icon {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 9px;
|
||||
color: #d9891b;
|
||||
background: color-mix(in srgb, #d9891b 12%, transparent);
|
||||
}
|
||||
.ai-review-summary-icon.clean { color: #2da44e; background: color-mix(in srgb, #2da44e 12%, transparent); }
|
||||
.ai-review-summary-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
||||
.ai-review-summary-line > strong { color: var(--color-ink); font-size: 14px; }
|
||||
.ai-review-summary p { margin: 5px 0 0; color: var(--color-ink-muted); font-size: 12.5px; line-height: 1.45; }
|
||||
.ai-review-risk {
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-size: 9px;
|
||||
font-weight: 850;
|
||||
letter-spacing: .06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.ai-review-risk.low { color: #2da44e; background: color-mix(in srgb, #2da44e 12%, transparent); }
|
||||
.ai-review-risk.medium { color: #b96500; background: color-mix(in srgb, #d9891b 13%, transparent); }
|
||||
.ai-review-risk.high { color: #d1242f; background: color-mix(in srgb, #d1242f 12%, transparent); }
|
||||
.ai-review-findings { min-height: 0; padding: 10px; overflow: auto; background: var(--app-dialog-bg); }
|
||||
.ai-review-finding {
|
||||
display: grid;
|
||||
grid-template-columns: 28px minmax(0, 1fr);
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
border-left: 3px solid var(--color-border);
|
||||
border-radius: 7px;
|
||||
background: var(--color-surface-solid);
|
||||
}
|
||||
.ai-review-finding + .ai-review-finding { margin-top: 8px; }
|
||||
.ai-review-finding.critical { border-left-color: #d1242f; }
|
||||
.ai-review-finding.warning { border-left-color: #d9891b; }
|
||||
.ai-review-finding.info { border-left-color: var(--color-primary); }
|
||||
.ai-review-finding-icon { display: grid; place-items: start center; padding-top: 1px; color: var(--color-primary); }
|
||||
.ai-review-finding.critical .ai-review-finding-icon { color: #d1242f; }
|
||||
.ai-review-finding.warning .ai-review-finding-icon { color: #d9891b; }
|
||||
.ai-review-finding-title { display: flex; align-items: center; gap: 7px; }
|
||||
.ai-review-finding-title span { color: var(--color-ink-faint); font-size: 9px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
|
||||
.ai-review-finding-title strong { color: var(--color-ink); font-size: 12.5px; }
|
||||
.ai-review-finding-body > p { margin: 6px 0 8px; color: var(--color-ink-muted); font-size: 12px; line-height: 1.5; }
|
||||
.ai-review-location { display: flex; align-items: center; gap: 5px; color: var(--color-primary); }
|
||||
.ai-review-location code { overflow-wrap: anywhere; font: 10.5px/1.4 var(--font-mono); }
|
||||
.ai-review-suggestion { display: grid; gap: 3px; margin-top: 9px; padding: 8px 9px; border-radius: 5px; background: var(--color-surface-dim); }
|
||||
.ai-review-suggestion strong { color: var(--color-ink-dim); font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; }
|
||||
.ai-review-suggestion span { color: var(--color-ink-muted); font-size: 11.5px; line-height: 1.45; }
|
||||
.ai-review-clean-state { display: grid; place-items: center; align-content: center; min-height: 280px; gap: 8px; color: #2da44e; text-align: center; }
|
||||
.ai-review-clean-state strong { color: var(--color-ink); font-size: 14px; }
|
||||
.ai-review-clean-state span { color: var(--color-ink-faint); font-size: 12px; }
|
||||
.ai-review-footer p { margin: 0; color: var(--color-ink-faint); font-size: 10.5px; }
|
||||
.ai-review-footer > div { display: flex; gap: 7px; }
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.commit-head-actions .pill-count { display: none; }
|
||||
.commit-review-button,
|
||||
.commit-generate-button { padding-inline: 8px; }
|
||||
.ai-review-dialog { width: calc(100vw - 16px); height: calc(100vh - 16px); }
|
||||
.ai-review-footer { align-items: stretch; flex-direction: column; }
|
||||
.ai-review-footer > div { justify-content: flex-end; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user