try to use local ai to generate commit message

src/lib/components/CommitPanel.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { Check, LoaderCircle } from "@lucide/svelte";
+  import { Check, LoaderCircle, Sparkles } from "@lucide/svelte";
+  import type { CommitAiPhase } from "../types";
 
   interface Props {
     commitMessage: string;
@@ -9,8 +10,11 @@
     isBusy: boolean;
     operation: string;
     stagedCount: number;
+    commitAiPhase: CommitAiPhase;
+    commitAiGenerating: boolean;
     onCommit: () => void;
     onCommitMessageChange: (msg: string) => void;
+    onGenerateCommitMessage: () => void;
   }
 
   let {
@@ -21,14 +25,28 @@
     isBusy = false,
     operation = "",
     stagedCount = 0,
+    commitAiPhase = "idle",
+    commitAiGenerating = false,
     onCommit = () => {},
     onCommitMessageChange = () => {},
+    onGenerateCommitMessage = () => {},
   }: Props = $props();
 
   function handleSubmit(event: SubmitEvent) {
     event.preventDefault();
     onCommit();
   }
+
+  function aiButtonTitle(phase: CommitAiPhase, staged: number): string {
+    if (phase === "loading") return "AI model is downloading/loading — this happens once";
+    if (phase === "error") return "AI model failed to load";
+    if (staged === 0) return "Stage changes first";
+    return "Generate commit message with AI from the staged diff";
+  }
+
+  let canGenerate = $derived(
+    hasRepository && !isBusy && !commitAiGenerating && commitAiPhase === "ready" && stagedCount > 0,
+  );
 </script>
 
 <section class="panel flex flex-col" aria-label="Commit">
@@ -50,13 +68,29 @@
     {#if commitBlockReason}
       <p class="commit-block-reason">{commitBlockReason}</p>
     {/if}
-    <button class="btn-primary w-full flex-shrink-0" type="submit" disabled={!canCommit} title={commitBlockReason || "Commit staged changes"}>
-      {#if operation === "Committing"}
-        <LoaderCircle class="spin" size={16} aria-hidden="true" />
-      {:else}
-        <Check size={16} aria-hidden="true" />
-      {/if}
-      Commit
-    </button>
+    <div class="commit-actions-row flex-shrink-0">
+      <button class="btn-primary flex-1" type="submit" disabled={!canCommit} title={commitBlockReason || "Commit staged changes"}>
+        {#if operation === "Committing"}
+          <LoaderCircle class="spin" size={16} aria-hidden="true" />
+        {:else}
+          <Check size={16} aria-hidden="true" />
+        {/if}
+        Commit
+      </button>
+      <button
+        class="btn-secondary commit-ai-button"
+        type="button"
+        onclick={onGenerateCommitMessage}
+        disabled={!canGenerate}
+        title={aiButtonTitle(commitAiPhase, stagedCount)}
+      >
+        {#if commitAiGenerating || commitAiPhase === "loading"}
+          <LoaderCircle class="spin" size={16} aria-hidden="true" />
+        {:else}
+          <Sparkles size={16} aria-hidden="true" />
+        {/if}
+        AI
+      </button>
+    </div>
   </form>
 </section>