feat(clone): add repository cloning flow to UI and backend

This introduces a new Tauri command to clone a remote repository into a
validated destination folder, then return the full repository bundle for
immediate rendering. The Svelte app gains a clone dialog and a new action
in repository management, wiring the cloned bundle into existing refresh
helpers. Dialog backdrops were also adjusted to rely on explicit close
controls.

- Add clone_repository command and core cloning logic in Rust
- Create CloneRepositoryDialog and integrate it into App.svelte
- Improve clone-related styling and tighten dialog backdrop behavior

src/App.svelte

@@ -2,12 +2,13 @@
   import { onDestroy, onMount, tick } from "svelte";
   import { open as openDialog } from "@tauri-apps/plugin-dialog";
   import { check, type DownloadEvent, type Update } from "@tauri-apps/plugin-updater";
-  import { AlertCircle, BookOpen, FolderOpen, GitBranch, GitMerge, LoaderCircle, Plus, Search, X } from "@lucide/svelte";
+  import { AlertCircle, BookOpen, Download, FolderOpen, GitBranch, GitMerge, LoaderCircle, Plus, Search, X } from "@lucide/svelte";
 
   import TitleBar from "./lib/TitleBar.svelte";
   import AiSettingsDialog from "./lib/components/AiSettingsDialog.svelte";
   import BranchDeleteConfirmDialog from "./lib/components/BranchDeleteConfirmDialog.svelte";
   import BranchPanel from "./lib/components/BranchPanel.svelte";
+  import CloneRepositoryDialog from "./lib/components/CloneRepositoryDialog.svelte";
   import CommitPanel from "./lib/components/CommitPanel.svelte";
   import CompareDialog from "./lib/components/CompareDialog.svelte";
   import CompareSelectDialog from "./lib/components/CompareSelectDialog.svelte";
@@ -28,6 +29,7 @@
 
   import {
     checkoutBranch,
+    cloneRepository,
     commit,
     commitAiGenerate,
     commitAiLoad,
@@ -144,6 +146,8 @@
   let repoTabs: RepoTab[] = [];
   let recentRepoPaths: string[] = [];
   let repoSearch = "";
+  let cloneDialogOpen = false;
+  let cloneDialogError = "";
   let status: GitStatus | null = null;
   let branches: GitBranchInfo[] = [];
   let stashes: GitStash[] = [];
@@ -983,6 +987,40 @@
     }
   }
 
+  async function cloneRepo(remoteUrl: string, parentPath: string, directoryName: string) {
+    if (isBusy) return;
+    if (!remoteUrl) { errorMessage = "Enter a remote URL."; return; }
+    if (!parentPath) { errorMessage = "Select a destination folder."; return; }
+
+    operation = "Cloning repository";
+    errorMessage = "";
+    cloneDialogError = "";
+    try {
+      const bundle = await cloneRepository(remoteUrl, parentPath, directoryName || undefined, 100);
+      resetRepositoryState(false);
+      applyStatus(bundle.status);
+      if (globalSearchBusy) void cancelGlobalSearch();
+      activeView = "repository";
+      await refreshBranchList(activeRepoPath, bundle.branches);
+      await refreshStashes(activeRepoPath, bundle.stashes);
+      await refreshCommitHistory(activeRepoPath, bundle.commits);
+      await refreshExplorerFiles(activeRepoPath, bundle.files);
+      cloneDialogOpen = false;
+      lastRepoSwitchAt = Date.now();
+    } catch (error) {
+      cloneDialogError = errorToMessage(error);
+      errorMessage = cloneDialogError;
+    } finally {
+      operation = "";
+    }
+  }
+
+  function openCloneDialog() {
+    if (isBusy) return;
+    cloneDialogError = "";
+    cloneDialogOpen = true;
+  }
+
   function openRepoManagement() {
     if (isBusy) return;
     activeView = "management";
@@ -2060,6 +2098,10 @@
             <h1>Repositories</h1>
           </div>
           <div class="repo-management-actions">
+            <button class="btn-primary" type="button" onclick={openCloneDialog} disabled={isBusy}>
+              <Download size={15} aria-hidden="true" />
+              Clone
+            </button>
             <button class="btn-secondary" type="button" onclick={chooseRepositoryFolder} disabled={isBusy}>
               <FolderOpen size={15} aria-hidden="true" />
               Browse
@@ -2472,6 +2514,16 @@
   />
 {/if}
 
+<!-- Clone repository dialog -->
+{#if cloneDialogOpen}
+  <CloneRepositoryDialog
+    isBusy={operation === "Cloning repository"}
+    error={cloneDialogError}
+    onClone={cloneRepo}
+    onClose={() => { if (!isBusy) cloneDialogOpen = false; }}
+  />
+{/if}
+
 <!-- Full-screen overlay while a repository is being opened -->
 {#if openingRepo}
   <RepoLoadingOverlay repoName={repoDisplayName} />

src/app.css

@@ -2363,6 +2363,54 @@
     max-height: calc(100vh - 32px);
     overflow: auto;
   }
+  .clone-repository-dialog {
+    display: block;
+    width: min(620px, calc(100vw - 32px));
+    height: auto;
+    max-height: calc(100vh - 32px);
+    overflow: auto;
+  }
+  .clone-dialog-form {
+    display: grid;
+    gap: 14px;
+    padding: 16px;
+  }
+  .clone-dialog-field {
+    display: grid;
+    gap: 5px;
+    min-width: 0;
+  }
+  .clone-dialog-field > span {
+    overflow: hidden;
+    color: var(--color-ink-faint);
+    font-size: 10.5px;
+    font-weight: 800;
+    text-transform: uppercase;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    letter-spacing: 0.04em;
+  }
+  .clone-dialog-path-field {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 8px;
+    min-width: 0;
+  }
+  .clone-dialog-error {
+    padding: 9px 10px;
+    border: 1px solid rgba(232,96,90,0.3);
+    border-radius: 7px;
+    color: #f09090;
+    background: rgba(232,96,90,0.08);
+    font-size: 12.5px;
+    line-height: 1.45;
+  }
+  .clone-dialog-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    padding-top: 2px;
+  }
   .ai-settings-form {
     display: flex;
     flex-direction: column;
@@ -3779,6 +3827,12 @@
   .repo-tabbar    { grid-template-columns: minmax(0, 1fr) auto; }
   .repo-tab.management { min-width: 0; }
   .repo-tabs-scroll { grid-column: 1 / -1; order: 2; border-top: 1px solid var(--color-border-subtle); }
+  .repo-management-head,
+  .repo-management-tools { align-items: stretch; flex-direction: column; }
+  .repo-management-actions { justify-content: flex-start; }
+  .clone-dialog-path-field { grid-template-columns: minmax(0, 1fr); }
+  .clone-dialog-actions { flex-direction: column-reverse; }
+  .clone-dialog-actions button { width: 100%; }
   .repo-row-main  { grid-template-columns: minmax(0, 1fr); gap: 2px; align-content: center; padding-left: 12px; }
   .repo-row       { min-height: 58px; }
   .repo-row-icon  { min-height: 58px; }

src/lib/components/AiSettingsDialog.svelte

@@ -126,7 +126,6 @@
 <div
   class="dialog-backdrop"
   role="presentation"
-  onclick={(e) => { if (e.target === e.currentTarget) onClose(); }}
 >
   <div class="dialog ai-settings-dialog" role="dialog" aria-modal="true" aria-label="AI settings" tabindex="-1">
     <header class="dialog-header">

src/lib/components/BranchDeleteConfirmDialog.svelte

@@ -20,13 +20,9 @@
 
   let title = $derived(force ? "Force delete branch?" : "Delete branch?");
 
-  function closeFromBackdrop(event: MouseEvent) {
-    if (isBusy || event.target !== event.currentTarget) return;
-    onClose();
-  }
 </script>
 
-<div class="dialog-backdrop" role="presentation" onclick={closeFromBackdrop}>
+<div class="dialog-backdrop" role="presentation">
   <div class="dialog branch-delete-dialog" role="dialog" aria-modal="true" aria-label={title}>
     <header class="dialog-header">
       <div>

src/lib/components/CloneRepositoryDialog.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+  import { open as openDialog } from "@tauri-apps/plugin-dialog";
+  import { Download, FolderOpen, LoaderCircle, X } from "@lucide/svelte";
+
+  interface Props {
+    isBusy: boolean;
+    error: string;
+    onClone: (remoteUrl: string, parentPath: string, directoryName: string) => void;
+    onClose: () => void;
+  }
+
+  let {
+    isBusy = false,
+    error = "",
+    onClone = () => {},
+    onClose = () => {},
+  }: Props = $props();
+
+  let remoteUrl = $state("");
+  let parentPath = $state("");
+  let directoryName = $state("");
+  let directoryNameEdited = $state(false);
+  let directoryAutoName = $state("");
+  let browseError = $state("");
+
+  let directorySuggestion = $derived(directoryNameFromRemoteUrl(remoteUrl));
+  let canSubmit = $derived(
+    !isBusy &&
+    remoteUrl.trim().length > 0 &&
+    parentPath.trim().length > 0,
+  );
+  let visibleError = $derived(error || browseError);
+
+  function directoryNameFromRemoteUrl(url: string): string {
+    const trimmed = url.trim().split(/[?#]/, 1)[0]?.replace(/[\\/]+$/g, "") ?? "";
+    const lastSegment = trimmed.split(/[\\/:]/).filter(Boolean).pop() ?? "";
+    return lastSegment.replace(/\.git$/i, "").trim();
+  }
+
+  function errorToMessage(error: unknown): string {
+    if (error instanceof Error) return error.message;
+    if (typeof error === "string") return error;
+    try { return JSON.stringify(error) ?? "Unknown error"; } catch { return "Unknown error"; }
+  }
+
+  async function chooseParentFolder() {
+    if (isBusy) return;
+    browseError = "";
+    try {
+      const selected = await openDialog({
+        title: "Select clone destination",
+        directory: true,
+        multiple: false,
+        defaultPath: parentPath.trim() || undefined,
+      });
+      if (typeof selected !== "string") return;
+      parentPath = selected;
+    } catch (error) {
+      browseError = errorToMessage(error);
+    }
+  }
+
+  function handleRemoteInput(event: Event) {
+    const nextRemoteUrl = (event.currentTarget as HTMLInputElement).value;
+    if (directoryNameEdited) return;
+    directoryAutoName = directoryNameFromRemoteUrl(nextRemoteUrl);
+    directoryName = directoryAutoName;
+  }
+
+  function handleDirectoryInput(event: Event) {
+    const nextDirectoryName = (event.currentTarget as HTMLInputElement).value;
+    directoryNameEdited = nextDirectoryName.trim().length > 0 && nextDirectoryName !== directoryAutoName;
+  }
+
+  function submit(event: SubmitEvent) {
+    event.preventDefault();
+    if (!canSubmit) return;
+    onClone(remoteUrl.trim(), parentPath.trim(), directoryName.trim());
+  }
+
+</script>
+
+<div class="dialog-backdrop" role="presentation">
+  <div class="dialog clone-repository-dialog" role="dialog" aria-modal="true" aria-label="Clone repository" tabindex="-1">
+    <header class="dialog-header">
+      <div>
+        <span class="eyebrow">Repository Management</span>
+        <h2 class="mt-0.5 text-ink text-base font-bold leading-tight">Clone repository</h2>
+      </div>
+      <button class="dialog-close" type="button" onclick={onClose} disabled={isBusy} title="Close">
+        <X size={18} aria-hidden="true" />
+      </button>
+    </header>
+
+    <form class="clone-dialog-form" onsubmit={submit}>
+      <label class="clone-dialog-field">
+        <span>Remote URL</span>
+        <!-- svelte-ignore a11y_autofocus -->
+        <input
+          bind:value={remoteUrl}
+          oninput={handleRemoteInput}
+          autocomplete="off"
+          spellcheck="false"
+          placeholder="https://github.com/org/project.git"
+          disabled={isBusy}
+          autofocus
+        />
+      </label>
+
+      <label class="clone-dialog-field">
+        <span>Destination</span>
+        <div class="clone-dialog-path-field">
+          <input
+            bind:value={parentPath}
+            autocomplete="off"
+            spellcheck="false"
+            placeholder="Choose parent folder"
+            disabled={isBusy}
+          />
+          <button class="btn-secondary" type="button" onclick={chooseParentFolder} disabled={isBusy}>
+            <FolderOpen size={14} aria-hidden="true" />
+            Browse
+          </button>
+        </div>
+      </label>
+
+      <label class="clone-dialog-field">
+        <span>Folder name</span>
+        <input
+          bind:value={directoryName}
+          oninput={handleDirectoryInput}
+          autocomplete="off"
+          spellcheck="false"
+          placeholder={directorySuggestion || "Optional"}
+          disabled={isBusy}
+        />
+      </label>
+
+      {#if visibleError}
+        <div class="clone-dialog-error" role="alert">{visibleError}</div>
+      {/if}
+
+      <div class="clone-dialog-actions">
+        <button class="btn-secondary" type="button" onclick={onClose} disabled={isBusy}>
+          Cancel
+        </button>
+        <button class="btn-primary" type="submit" disabled={!canSubmit}>
+          {#if isBusy}
+            <LoaderCircle class="spin" size={16} aria-hidden="true" />
+          {:else}
+            <Download size={16} aria-hidden="true" />
+          {/if}
+          Clone
+        </button>
+      </div>
+    </form>
+  </div>
+</div>

src/lib/components/CompareDialog.svelte

@@ -182,7 +182,6 @@
 <div
   class="dialog-backdrop"
   role="presentation"
-  onclick={(e) => { if (e.target === e.currentTarget) onClose(); }}
 >
   <div class="dialog compare-dialog" role="dialog" aria-modal="true" aria-label="Commit comparison" tabindex="-1">
 

src/lib/components/CompareSelectDialog.svelte

@@ -41,7 +41,6 @@
 <div
   class="dialog-backdrop"
   role="presentation"
-  onclick={(e) => { if (e.target === e.currentTarget) onClose(); }}
 >
   <div class="dialog compare-select-dialog" role="dialog" aria-modal="true" aria-label="Select commits to compare" tabindex="-1">
     <header class="dialog-header">

src/lib/components/CredentialDialog.svelte

@@ -66,7 +66,6 @@
 <div
   class="dialog-backdrop"
   role="presentation"
-  onclick={(e) => { if (e.target === e.currentTarget) onCancel(); }}
 >
   <div class="cred-card" role="dialog" aria-modal="true" aria-label="Git credentials" tabindex="-1">
     <div class="cred-hero">

src/lib/components/DiscardConfirmDialog.svelte

@@ -25,13 +25,9 @@
   let scopeLabel = $derived(scope === "hunk" ? "Selected hunk" : "File changes");
   let sourceLabel = $derived(staged ? "staged changes" : "unstaged changes");
 
-  function closeFromBackdrop(event: MouseEvent) {
-    if (isBusy || event.target !== event.currentTarget) return;
-    onClose();
-  }
 </script>
 
-<div class="dialog-backdrop" role="presentation" onclick={closeFromBackdrop}>
+<div class="dialog-backdrop" role="presentation">
   <div class="dialog discard-confirm-dialog" role="dialog" aria-modal="true" aria-label={title}>
     <header class="dialog-header">
       <div>

src/lib/components/GlobalSearchDialog.svelte

@@ -129,7 +129,6 @@
 <div
   class="dialog-backdrop"
   role="presentation"
-  onclick={(e) => { if (e.target === e.currentTarget) onClose(); }}
 >
   <div class="dialog global-search-dialog" role="dialog" aria-modal="true" aria-label="Global search" tabindex="-1">
     <header class="dialog-header">

src/lib/components/HistoryPanel.svelte

@@ -316,12 +316,6 @@
     }
   }
 
-  function handleBranchDialogBackdropClick(event: MouseEvent) {
-    if (event.target === event.currentTarget) {
-      closeBranchDialog();
-    }
-  }
-
   function localBranchRefs(commit: GitCommit): string[] {
     const seen = new Set<string>();
     const labels: string[] = [];
@@ -569,7 +563,7 @@
 </section>
 
 {#if branchDialogOpen}
-  <div class="branch-filter-backdrop" role="presentation" onclick={handleBranchDialogBackdropClick}>
+  <div class="branch-filter-backdrop" role="presentation">
     <div
       class="branch-filter-dialog"
       role="dialog"

src/lib/components/NewBranchDialog.svelte

@@ -29,7 +29,6 @@
 <div
   class="dialog-backdrop"
   role="presentation"
-  onclick={(e) => { if (e.target === e.currentTarget) onClose(); }}
 >
   <div class="dialog new-branch-dialog" role="dialog" aria-modal="true" aria-label="Create branch from commit" tabindex="-1">
     <header class="dialog-header">

src/lib/components/RenameBranchDialog.svelte

@@ -33,7 +33,6 @@
 <div
   class="dialog-backdrop"
   role="presentation"
-  onclick={(e) => { if (e.target === e.currentTarget) onClose(); }}
 >
   <div class="dialog rename-branch-dialog" role="dialog" aria-modal="true" aria-label="Rename branch" tabindex="-1">
     <header class="dialog-header">

src/lib/components/ResolveDialog.svelte

@@ -254,7 +254,6 @@
 <div
   class="dialog-backdrop"
   role="presentation"
-  onclick={(e) => { if (e.target === e.currentTarget) onClose(); }}
 >
   <div
     class="dialog"

src/lib/git.ts

@@ -34,6 +34,20 @@ export function openRepositoryBundle(path: string, commitLimit = 100): Promise<R
   return invoke<RepositoryBundle>("open_repository_bundle", { path, commitLimit });
 }
 
+export function cloneRepository(
+  remoteUrl: string,
+  parentPath: string,
+  directoryName?: string,
+  commitLimit = 100,
+): Promise<RepositoryBundle> {
+  return invoke<RepositoryBundle>("clone_repository", {
+    remoteUrl,
+    parentPath,
+    directoryName: directoryName?.trim() ? directoryName.trim() : null,
+    commitLimit,
+  });
+}
+
 export function getStatus(path: string): Promise<GitStatus> {
   return invoke<GitStatus>("get_status", { path });
 }