feat(ai): add AI-assisted commit splitting flow
Introduce a split-planning path for staged changes that asks supported AI providers to group files into ordered Conventional Commit messages. The plan is validated before execution so every staged file is assigned once and unsafe states are rejected. A new dialog lets users review and adjust the proposed groups before creating the commits in sequence, with safeguards to preserve remaining changes if something fails.
This commit is contained in:
Christoph Brandau
@@ -0,0 +1,83 @@
|
||||
<script lang="ts">
|
||||
import { GitCommitHorizontal, LoaderCircle, Sparkles, X } from "@lucide/svelte";
|
||||
import type { AiCommitPlan } from "../types";
|
||||
|
||||
interface Props {
|
||||
plan: AiCommitPlan;
|
||||
isApplying: boolean;
|
||||
onApply: (plan: AiCommitPlan) => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
let { plan, isApplying = false, onApply, onClose }: Props = $props();
|
||||
let draft = $state<AiCommitPlan>({ summary: "", groups: [] });
|
||||
$effect.pre(() => {
|
||||
if (draft.groups.length === 0) draft = structuredClone(plan);
|
||||
});
|
||||
let valid = $derived(draft.groups.length > 1 && draft.groups.every((group) => group.message.trim() && group.files.length));
|
||||
|
||||
function setMessage(index: number, message: string) {
|
||||
draft.groups[index].message = message;
|
||||
}
|
||||
|
||||
function moveFile(file: string, from: number, to: number) {
|
||||
if (from === to) return;
|
||||
draft.groups[from].files = draft.groups[from].files.filter((path) => path !== file);
|
||||
draft.groups[to].files = [...draft.groups[to].files, file];
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window onkeydown={(event) => { if (event.key === "Escape" && !isApplying) onClose(); }} />
|
||||
|
||||
<div class="dialog-backdrop" role="presentation">
|
||||
<div class="dialog split-dialog" role="dialog" aria-modal="true" aria-label="AI commit split">
|
||||
<header class="dialog-header">
|
||||
<div><span class="eyebrow">Staged changes</span><h2>Split into logical commits</h2></div>
|
||||
<button class="dialog-close" type="button" onclick={onClose} disabled={isApplying} aria-label="Close"><X size={18} /></button>
|
||||
</header>
|
||||
<div class="split-intro"><Sparkles size={18} /><p>{draft.summary}</p></div>
|
||||
<div class="split-groups">
|
||||
{#each draft.groups as group, groupIndex}
|
||||
<article class:empty={group.files.length === 0}>
|
||||
<header><GitCommitHorizontal size={17} /><strong>Commit {groupIndex + 1}</strong><span>{group.files.length} files</span></header>
|
||||
<label>Commit message<input value={group.message} oninput={(event) => setMessage(groupIndex, event.currentTarget.value)} disabled={isApplying} /></label>
|
||||
{#if group.reason}<p>{group.reason}</p>{/if}
|
||||
<div class="split-files">
|
||||
{#each group.files as file}
|
||||
<div><code>{file}</code>
|
||||
<select value={groupIndex} onchange={(event) => moveFile(file, groupIndex, Number(event.currentTarget.value))} disabled={isApplying}>
|
||||
{#each draft.groups as _, target}<option value={target}>Commit {target + 1}</option>{/each}
|
||||
</select>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</article>
|
||||
{/each}
|
||||
</div>
|
||||
<footer class="dialog-footer">
|
||||
<p>Files with staged and unstaged edits are excluded for safety. Commits are created in this order.</p>
|
||||
<div><button class="btn-secondary" type="button" onclick={onClose} disabled={isApplying}>Cancel</button>
|
||||
<button class="btn-primary" type="button" onclick={() => onApply(structuredClone(draft))} disabled={!valid || isApplying}>
|
||||
{#if isApplying}<LoaderCircle class="spin" size={14} />{/if}Create {draft.groups.length} commits
|
||||
</button></div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.split-dialog{width:min(820px,calc(100vw - 32px));max-height:min(820px,calc(100vh - 32px));display:flex;flex-direction:column}
|
||||
.split-intro{display:flex;gap:10px;align-items:flex-start;padding:14px 18px;border-bottom:1px solid var(--color-border-subtle);color:var(--color-ink-muted)}
|
||||
.split-intro p{margin:0;line-height:1.5}
|
||||
.split-groups{display:grid;gap:10px;padding:14px 18px;overflow:auto}
|
||||
article{display:grid;gap:10px;padding:13px;border:1px solid var(--color-border-subtle);border-radius:9px;background:var(--color-surface-raised)}
|
||||
article.empty{border-color:#d88a45}
|
||||
article>header{display:flex;align-items:center;gap:8px;color:var(--color-ink)}
|
||||
article>header span{margin-left:auto;color:var(--color-ink-faint);font-size:11px}
|
||||
label{display:grid;gap:5px;color:var(--color-ink-faint);font-size:10px;font-weight:800;text-transform:uppercase}
|
||||
input{height:34px;padding:0 10px;border:1px solid var(--color-border);border-radius:6px;background:var(--color-surface);color:var(--color-ink);font-family:var(--font-mono)}
|
||||
article>p{margin:0;color:var(--color-ink-muted);font-size:12px;line-height:1.45}
|
||||
.split-files{display:grid;gap:5px}
|
||||
.split-files>div{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:6px;background:var(--color-surface)}
|
||||
code{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;color:var(--color-ink-muted);font-size:11px;white-space:nowrap}
|
||||
select{height:28px;border:1px solid var(--color-border-subtle);border-radius:5px;background:var(--color-surface-raised);color:var(--color-ink);font-size:11px}
|
||||
</style>
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { Check, LoaderCircle, RotateCcw, Settings, ShieldCheck, Sparkles } from "@lucide/svelte";
|
||||
import { Check, GitCommitHorizontal, LoaderCircle, RotateCcw, Settings, ShieldCheck, Sparkles } from "@lucide/svelte";
|
||||
import type { CommitAiPhase, CommitAiProvider } from "../types";
|
||||
|
||||
interface Props {
|
||||
@@ -14,12 +14,14 @@
|
||||
commitAiPhase: CommitAiPhase;
|
||||
commitAiGenerating: boolean;
|
||||
commitAiReviewing: boolean;
|
||||
commitAiSplitting: boolean;
|
||||
canAmend: boolean;
|
||||
amendMode: boolean;
|
||||
onCommit: () => void;
|
||||
onCommitMessageChange: (msg: string) => void;
|
||||
onGenerateCommitMessage: () => void;
|
||||
onReviewStaged: () => void;
|
||||
onSplitStaged: () => void;
|
||||
onOpenAiSettings: () => void;
|
||||
onToggleAmend: (checked: boolean) => void;
|
||||
onUndoLastCommit: () => void;
|
||||
@@ -37,12 +39,14 @@
|
||||
commitAiPhase = "idle",
|
||||
commitAiGenerating = false,
|
||||
commitAiReviewing = false,
|
||||
commitAiSplitting = false,
|
||||
canAmend = false,
|
||||
amendMode = false,
|
||||
onCommit = () => {},
|
||||
onCommitMessageChange = () => {},
|
||||
onGenerateCommitMessage = () => {},
|
||||
onReviewStaged = () => {},
|
||||
onSplitStaged = () => {},
|
||||
onOpenAiSettings = () => {},
|
||||
onToggleAmend = () => {},
|
||||
onUndoLastCommit = () => {},
|
||||
@@ -70,6 +74,7 @@
|
||||
(commitAiProvider !== "local" || commitAiPhase === "ready"),
|
||||
);
|
||||
let canReview = $derived(canGenerate && commitAiProvider !== "local");
|
||||
let canSplit = $derived(canReview && stagedCount > 1 && !commitAiSplitting);
|
||||
</script>
|
||||
|
||||
<section class="panel commit-panel" aria-label="Commit">
|
||||
@@ -80,6 +85,16 @@
|
||||
</div>
|
||||
<div class="commit-head-actions">
|
||||
<span class="pill pill-count">{stagedCount} staged</span>
|
||||
<button
|
||||
class="commit-review-button"
|
||||
type="button"
|
||||
onclick={onSplitStaged}
|
||||
disabled={!canSplit}
|
||||
title={commitAiProvider === "local" ? "Commit splitting currently requires an API provider" : "Suggest logical commits for the staged files"}
|
||||
>
|
||||
{#if commitAiSplitting}<LoaderCircle class="spin" size={14} aria-hidden="true" />{:else}<GitCommitHorizontal size={14} aria-hidden="true" />{/if}
|
||||
Split
|
||||
</button>
|
||||
<button
|
||||
class="commit-review-button"
|
||||
type="button"
|
||||
|
||||
@@ -2,6 +2,7 @@ import { tracedInvoke as invoke } from "./telemetry";
|
||||
|
||||
import type {
|
||||
AiReviewResult,
|
||||
AiCommitPlan,
|
||||
CommitAiLocalProfile,
|
||||
CommitAiProvider,
|
||||
CommitAiStatus,
|
||||
@@ -322,6 +323,16 @@ export function commitAiReview(path: string, options: CommitAiGenerateOptions):
|
||||
});
|
||||
}
|
||||
|
||||
export function commitAiSplit(path: string, options: CommitAiGenerateOptions): Promise<AiCommitPlan> {
|
||||
return invoke<AiCommitPlan>("commit_ai_split", {
|
||||
path,
|
||||
provider: options.provider,
|
||||
model: options.model,
|
||||
apiKey: options.apiKey,
|
||||
baseUrl: options.baseUrl,
|
||||
});
|
||||
}
|
||||
|
||||
export function pull(path: string, username?: string, password?: string, strategy: PullStrategy = "merge", remote?: string, branch?: string): Promise<GitStatus> {
|
||||
return invoke<GitStatus>("pull", { path, username: username ?? null, password: password ?? null, strategy, remote: remote || null, branch: branch || null });
|
||||
}
|
||||
|
||||
@@ -37,6 +37,17 @@ export interface AiReviewResult {
|
||||
findings: AiReviewFinding[];
|
||||
}
|
||||
|
||||
export interface AiCommitGroup {
|
||||
message: string;
|
||||
reason: string;
|
||||
files: string[];
|
||||
}
|
||||
|
||||
export interface AiCommitPlan {
|
||||
summary: string;
|
||||
groups: AiCommitGroup[];
|
||||
}
|
||||
|
||||
export interface LocalModelOption {
|
||||
id: string;
|
||||
label: string;
|
||||
|
||||
Reference in New Issue
Block a user