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:
@@ -0,0 +1,94 @@
|
||||
<script lang="ts">
|
||||
import { AlertTriangle, CircleAlert, FileCode, Info, LoaderCircle, RotateCw, ShieldCheck, X } from "@lucide/svelte";
|
||||
import type { AiReviewFinding, AiReviewResult, CommitAiProvider } from "../types";
|
||||
|
||||
interface Props {
|
||||
result: AiReviewResult;
|
||||
provider: CommitAiProvider;
|
||||
isReviewing: boolean;
|
||||
onRerun: () => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
let { result, provider, isReviewing = false, onRerun, onClose }: Props = $props();
|
||||
|
||||
function providerLabel(value: CommitAiProvider): string {
|
||||
if (value === "openai") return "OpenAI";
|
||||
if (value === "anthropic") return "Anthropic";
|
||||
if (value === "custom") return "Custom endpoint";
|
||||
return "Local AI";
|
||||
}
|
||||
|
||||
function locationLabel(finding: AiReviewFinding): string {
|
||||
if (!finding.file) return "Repository-wide";
|
||||
return finding.line ? `${finding.file}:${finding.line}` : finding.file;
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window onkeydown={(event) => { if (event.key === "Escape" && !isReviewing) onClose(); }} />
|
||||
|
||||
<div class="dialog-backdrop" role="presentation">
|
||||
<div class="dialog ai-review-dialog" role="dialog" aria-modal="true" aria-label="AI pre-commit review" tabindex="-1">
|
||||
<header class="dialog-header ai-review-header">
|
||||
<div>
|
||||
<span class="eyebrow">Staged changes</span>
|
||||
<h2>AI pre-commit review</h2>
|
||||
</div>
|
||||
<div class="dialog-header-actions">
|
||||
<span class="ai-review-provider">{providerLabel(provider)}</span>
|
||||
<button class="dialog-close" type="button" onclick={onClose} disabled={isReviewing} aria-label="Close review"><X size={18} aria-hidden="true" /></button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="ai-review-summary">
|
||||
<div class="ai-review-summary-icon" class:clean={result.findings.length === 0}>
|
||||
{#if result.findings.length === 0}<ShieldCheck size={22} aria-hidden="true" />{:else}<AlertTriangle size={22} aria-hidden="true" />{/if}
|
||||
</div>
|
||||
<div>
|
||||
<div class="ai-review-summary-line">
|
||||
<strong>{result.findings.length === 0 ? "No actionable issues found" : `${result.findings.length} review ${result.findings.length === 1 ? "finding" : "findings"}`}</strong>
|
||||
<span class="ai-review-risk {result.risk}">{result.risk} risk</span>
|
||||
</div>
|
||||
<p>{result.summary}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ai-review-findings">
|
||||
{#if result.findings.length === 0}
|
||||
<div class="ai-review-clean-state">
|
||||
<ShieldCheck size={30} aria-hidden="true" />
|
||||
<strong>The staged diff looks ready for human verification.</strong>
|
||||
<span>AI reviews can miss issues. Run the relevant tests before committing.</span>
|
||||
</div>
|
||||
{:else}
|
||||
{#each result.findings as finding, index (`${finding.file ?? "repo"}:${finding.line ?? 0}:${finding.title}:${index}`)}
|
||||
<article class="ai-review-finding {finding.severity}">
|
||||
<div class="ai-review-finding-icon">
|
||||
{#if finding.severity === "critical"}<CircleAlert size={17} aria-hidden="true" />{:else if finding.severity === "warning"}<AlertTriangle size={17} aria-hidden="true" />{:else}<Info size={17} aria-hidden="true" />{/if}
|
||||
</div>
|
||||
<div class="ai-review-finding-body">
|
||||
<div class="ai-review-finding-title">
|
||||
<span>{finding.severity}</span>
|
||||
<strong>{finding.title}</strong>
|
||||
</div>
|
||||
<p>{finding.description}</p>
|
||||
<div class="ai-review-location"><FileCode size={13} aria-hidden="true" /><code>{locationLabel(finding)}</code></div>
|
||||
{#if finding.suggestion}<div class="ai-review-suggestion"><strong>Suggested next step</strong><span>{finding.suggestion}</span></div>{/if}
|
||||
</div>
|
||||
</article>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<footer class="dialog-footer ai-review-footer">
|
||||
<p>Review suggestions are advisory and never modify files automatically.</p>
|
||||
<div>
|
||||
<button class="btn-secondary" type="button" onclick={onRerun} disabled={isReviewing}>
|
||||
{#if isReviewing}<LoaderCircle class="spin" size={14} aria-hidden="true" />{:else}<RotateCw size={14} aria-hidden="true" />{/if}
|
||||
Review again
|
||||
</button>
|
||||
<button class="btn-primary" type="button" onclick={onClose} disabled={isReviewing}>Done</button>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { Check, LoaderCircle, RotateCcw, Settings, Sparkles } from "@lucide/svelte";
|
||||
import { Check, LoaderCircle, RotateCcw, Settings, ShieldCheck, Sparkles } from "@lucide/svelte";
|
||||
import type { CommitAiPhase, CommitAiProvider } from "../types";
|
||||
|
||||
interface Props {
|
||||
@@ -13,11 +13,13 @@
|
||||
commitAiProvider: CommitAiProvider;
|
||||
commitAiPhase: CommitAiPhase;
|
||||
commitAiGenerating: boolean;
|
||||
commitAiReviewing: boolean;
|
||||
canAmend: boolean;
|
||||
amendMode: boolean;
|
||||
onCommit: () => void;
|
||||
onCommitMessageChange: (msg: string) => void;
|
||||
onGenerateCommitMessage: () => void;
|
||||
onReviewStaged: () => void;
|
||||
onOpenAiSettings: () => void;
|
||||
onToggleAmend: (checked: boolean) => void;
|
||||
onUndoLastCommit: () => void;
|
||||
@@ -34,11 +36,13 @@
|
||||
commitAiProvider = "local",
|
||||
commitAiPhase = "idle",
|
||||
commitAiGenerating = false,
|
||||
commitAiReviewing = false,
|
||||
canAmend = false,
|
||||
amendMode = false,
|
||||
onCommit = () => {},
|
||||
onCommitMessageChange = () => {},
|
||||
onGenerateCommitMessage = () => {},
|
||||
onReviewStaged = () => {},
|
||||
onOpenAiSettings = () => {},
|
||||
onToggleAmend = () => {},
|
||||
onUndoLastCommit = () => {},
|
||||
@@ -61,9 +65,11 @@
|
||||
hasRepository &&
|
||||
!isBusy &&
|
||||
!commitAiGenerating &&
|
||||
!commitAiReviewing &&
|
||||
stagedCount > 0 &&
|
||||
(commitAiProvider !== "local" || commitAiPhase === "ready"),
|
||||
);
|
||||
let canReview = $derived(canGenerate && commitAiProvider !== "local");
|
||||
</script>
|
||||
|
||||
<section class="panel commit-panel" aria-label="Commit">
|
||||
@@ -74,6 +80,16 @@
|
||||
</div>
|
||||
<div class="commit-head-actions">
|
||||
<span class="pill pill-count">{stagedCount} staged</span>
|
||||
<button
|
||||
class="commit-review-button"
|
||||
type="button"
|
||||
onclick={onReviewStaged}
|
||||
disabled={!canReview}
|
||||
title={commitAiProvider === "local" ? "Pre-commit review currently requires an API provider" : stagedCount === 0 ? "Stage changes first" : "Review staged changes for bugs and risks"}
|
||||
>
|
||||
{#if commitAiReviewing}<LoaderCircle class="spin" size={14} aria-hidden="true" />{:else}<ShieldCheck size={14} aria-hidden="true" />{/if}
|
||||
Review
|
||||
</button>
|
||||
<button
|
||||
class="commit-generate-button"
|
||||
type="button"
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
|
||||
import type {
|
||||
AiReviewResult,
|
||||
CommitAiLocalProfile,
|
||||
CommitAiProvider,
|
||||
CommitAiStatus,
|
||||
@@ -244,6 +245,16 @@ export function commitAiGenerate(path: string, options: CommitAiGenerateOptions)
|
||||
});
|
||||
}
|
||||
|
||||
export function commitAiReview(path: string, options: CommitAiGenerateOptions): Promise<AiReviewResult> {
|
||||
return invoke<AiReviewResult>("commit_ai_review", {
|
||||
path,
|
||||
provider: options.provider,
|
||||
model: options.model,
|
||||
apiKey: options.apiKey,
|
||||
baseUrl: options.baseUrl,
|
||||
});
|
||||
}
|
||||
|
||||
export function pull(path: string, username?: string, password?: string): Promise<GitStatus> {
|
||||
return invoke<GitStatus>("pull", { path, username: username ?? null, password: password ?? null });
|
||||
}
|
||||
|
||||
@@ -19,6 +19,24 @@ export interface CommitAiStatus {
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
export type AiReviewRisk = "low" | "medium" | "high";
|
||||
export type AiReviewSeverity = "critical" | "warning" | "info";
|
||||
|
||||
export interface AiReviewFinding {
|
||||
severity: AiReviewSeverity;
|
||||
title: string;
|
||||
description: string;
|
||||
file: string | null;
|
||||
line: number | null;
|
||||
suggestion: string;
|
||||
}
|
||||
|
||||
export interface AiReviewResult {
|
||||
summary: string;
|
||||
risk: AiReviewRisk;
|
||||
findings: AiReviewFinding[];
|
||||
}
|
||||
|
||||
export interface LocalModelOption {
|
||||
id: string;
|
||||
label: string;
|
||||
|
||||
Reference in New Issue
Block a user