feat(p12a): services git distants (PAT/app_password) + clone HTTPS

Modèle de données : - migration #11 git_credentials (secrets chiffrés SecretBox : secret_encrypted ; colonnes ssh/oauth posées pour P12b/P12c) ; #12 repos ALTER remote_url/git_service/credential_id (pas de FK) - types partagés api.ts (GitCredentialSummary sans secret + hasSecret/secretLast4, CRUD, RemoteRepoSummary, Clone*) ; protocole additif : topic 'clones' + message clone_update (CloneOperation) Backend : - core/git-credentials.ts (GitCredentialsManager(db, box)) : CRUD chiffré, test() (GET /user), getSecret()/authContext() internes, NULLification de repos.credential_id à la suppression - core/git-clients/ (github/gitlab/gitea) via fetch, sans dépendance : verify()+listRepos() paginés, erreurs typées AUTH_FAILED/RATE_LIMITED/UNREACHABLE, SSRF base_url http(s) - core/git-auth.ts : withGitAuth (GIT_ASKPASS éphémère 0o700, secret par env, GIT_TERMINAL_PROMPT=0, jamais dans l'URL/.git/config, nettoyage finally) - core/git.ts cloneRepo (spawn git clone --progress, parse progression, timeout) - core/clone-manager.ts (EventEmitter) : clone async, dest confiné sous scanRoots + non existant, auto-enregistrement via addRepo + métadonnées de provenance, nettoyage du clone partiel, events topic 'clones' - routes/git-connections.ts (CRUD + /test + /:id/repos + POST /repos/clone 202 + GET /repos/clone/:id) ; app.ts câble box→GitCredentialsManager + CloneManager→gateway ; gateway relaie 'clones' Frontend : - ws-client subscribeClones ; stores git-connections + clone (suivi WS) - components/settings/GitConnectionsSection (liste + formulaire pat/app_password, secret jamais ré-affiché) inséré dans SettingsView ; CloneRepoModal (connexion → repos distants paginés → dest scanRoots[0] → barre de progression WS → redirection) ; bouton « Cloner » dans DashboardView ; i18n EN+FR Tests : git-credentials (round-trip SecretBox, résumé sans secret, NULLification) ; acceptance-p12.mjs (clone bare local file:// → clone_update done + repo enregistré + secret ABSENT de l'API, de la DB et du .git/config) Sous-phases restantes : P12b (SSH), P12c (OAuth device flow).
2026-06-27 14:27:18 +02:00
parent e8d10b7ec0
commit 08695a707d
22 changed files with 1583 additions and 10 deletions
--- a/packages/web/src/components/CloneRepoModal.vue
+++ b/packages/web/src/components/CloneRepoModal.vue
@@ -0,0 +1,173 @@
+<template>
+  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4" @click.self="emit('close')">
+    <div class="flex max-h-[90vh] w-full max-w-lg flex-col gap-3 overflow-y-auto rounded-lg border border-zinc-800 bg-zinc-900 p-4">
+      <header class="flex items-center gap-2">
+        <h2 class="font-semibold text-zinc-100">{{ t('clone.title') }}</h2>
+        <button class="btn ml-auto text-xs" @click="emit('close')">{{ t('common.cancel') }}</button>
+      </header>
+
+      <!-- aucune connexion → renvoyer vers les réglages -->
+      <p v-if="conn.connections.length === 0" class="text-sm text-zinc-400">
+        {{ t('clone.noCredential') }}
+        <RouterLink :to="{ name: 'settings' }" class="text-emerald-400 hover:underline" @click="emit('close')">{{ t('clone.goSettings') }}</RouterLink>
+      </p>
+
+      <template v-else-if="!operationId">
+        <label class="flex flex-col gap-1 text-xs text-zinc-400">
+          {{ t('clone.credential') }}
+          <select v-model="credentialId" class="input" @change="loadRepos(1)">
+            <option v-for="c in conn.connections" :key="c.id" :value="c.id">{{ c.label }} ({{ c.service }})</option>
+          </select>
+        </label>
+
+        <div class="flex items-end gap-2">
+          <label class="flex flex-1 flex-col gap-1 text-xs text-zinc-400">
+            {{ t('clone.search') }}
+            <input v-model.trim="search" class="input" :placeholder="t('clone.searchPlaceholder')" @keyup.enter="loadRepos(1)" />
+          </label>
+          <BaseButton size="sm" :icon="RefreshCw" :loading="loadingRepos" @click="loadRepos(1)">{{ t('common.refresh') }}</BaseButton>
+        </div>
+
+        <p v-if="reposError" class="text-xs text-amber-400">{{ reposError }}</p>
+        <ul class="flex max-h-52 flex-col gap-0.5 overflow-y-auto">
+          <li v-for="r in repos" :key="r.fullName">
+            <button
+              type="button"
+              class="flex w-full items-center gap-2 rounded px-2 py-1 text-left text-sm hover:bg-zinc-800"
+              :class="selected?.fullName === r.fullName ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-300'"
+              @click="select(r)"
+            >
+              <span class="min-w-0 flex-1 truncate font-mono">{{ r.fullName }}</span>
+              <BaseBadge v-if="r.private" tone="zinc">{{ t('clone.private') }}</BaseBadge>
+            </button>
+          </li>
+          <li v-if="!loadingRepos && repos.length === 0" class="px-2 py-1 text-xs text-zinc-600">{{ t('clone.noRepos') }}</li>
+        </ul>
+        <div v-if="nextPage" class="flex justify-center">
+          <BaseButton size="sm" variant="ghost" :loading="loadingRepos" @click="loadRepos(nextPage)">{{ t('clone.more') }}</BaseButton>
+        </div>
+
+        <label class="flex flex-col gap-1 text-xs text-zinc-400">
+          {{ t('clone.dest') }}
+          <input v-model.trim="dest" class="input font-mono" :placeholder="t('clone.destPlaceholder')" />
+          <span class="text-xs text-zinc-600">{{ t('clone.destHint') }}</span>
+        </label>
+
+        <p v-if="error" class="text-xs text-amber-400">{{ error }}</p>
+        <div>
+          <BaseButton variant="primary" :icon="Download" :loading="starting" :disabled="!canClone" @click="onClone">{{ t('clone.clone') }}</BaseButton>
+        </div>
+      </template>
+
+      <!-- progression -->
+      <template v-else>
+        <p class="text-sm text-zinc-300">{{ progressLabel }}</p>
+        <div class="h-2 w-full overflow-hidden rounded bg-zinc-800">
+          <div class="h-full bg-emerald-500 transition-all" :style="{ width: `${op?.progress ?? 0}%` }" />
+        </div>
+        <p v-if="op?.state === 'error'" class="text-xs text-rose-400">{{ op.error }}</p>
+        <div v-if="op?.state === 'error'" class="flex gap-2">
+          <BaseButton size="sm" variant="ghost" @click="operationId = null">{{ t('clone.back') }}</BaseButton>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { Download, RefreshCw } from '@lucide/vue';
+import type { RemoteRepoSummary } from '@arboretum/shared';
+import { useGitConnectionsStore } from '../stores/git-connections';
+import { useCloneStore } from '../stores/clone';
+import { useSettingsStore } from '../stores/settings';
+import { useToastsStore } from '../stores/toasts';
+import BaseButton from './ui/BaseButton.vue';
+import BaseBadge from './ui/BaseBadge.vue';
+
+const emit = defineEmits<{ close: [] }>();
+const { t } = useI18n();
+const router = useRouter();
+const conn = useGitConnectionsStore();
+const cloneStore = useCloneStore();
+const settings = useSettingsStore();
+const toasts = useToastsStore();
+
+const credentialId = ref('');
+const search = ref('');
+const repos = ref<RemoteRepoSummary[]>([]);
+const nextPage = ref<number | null>(null);
+const loadingRepos = ref(false);
+const reposError = ref<string | null>(null);
+const selected = ref<RemoteRepoSummary | null>(null);
+const dest = ref('');
+const error = ref<string | null>(null);
+const starting = ref(false);
+const operationId = ref<string | null>(null);
+
+const op = computed(() => (operationId.value ? cloneStore.get(operationId.value) ?? null : null));
+const scanRoot = computed(() => settings.scanRoots[0] ?? '');
+const canClone = computed(() => !!credentialId.value && !!selected.value && dest.value.trim() !== '');
+const progressLabel = computed(() => {
+  if (!op.value) return t('clone.starting');
+  if (op.value.state === 'done') return t('clone.done');
+  if (op.value.state === 'error') return t('clone.failed');
+  return op.value.phase ? `${op.value.phase}… ${op.value.progress ?? 0}%` : t('clone.cloning');
+});
+
+onMounted(async () => {
+  if (!settings.loaded) await settings.fetch();
+  if (conn.connections.length === 0) await conn.fetchAll();
+  const first = conn.connections[0];
+  if (first) {
+    credentialId.value = first.id;
+    await loadRepos(1);
+  }
+});
+
+async function loadRepos(page: number): Promise<void> {
+  if (!credentialId.value) return;
+  loadingRepos.value = true;
+  reposError.value = null;
+  try {
+    const res = await conn.listRemoteRepos(credentialId.value, page, search.value || undefined);
+    repos.value = page === 1 ? res.repos : [...repos.value, ...res.repos];
+    nextPage.value = res.nextPage;
+  } catch (e) {
+    reposError.value = e instanceof Error ? e.message : String(e);
+  } finally {
+    loadingRepos.value = false;
+  }
+}
+
+function select(r: RemoteRepoSummary): void {
+  selected.value = r;
+  const name = r.fullName.split('/').pop() ?? r.fullName;
+  dest.value = scanRoot.value ? `${scanRoot.value}/${name}` : '';
+}
+
+async function onClone(): Promise<void> {
+  if (!selected.value) return;
+  starting.value = true;
+  error.value = null;
+  try {
+    operationId.value = await cloneStore.clone({ credentialId: credentialId.value, remoteUrl: selected.value.cloneUrl, dest: dest.value.trim() });
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : String(e);
+    operationId.value = null;
+  } finally {
+    starting.value = false;
+  }
+}
+
+// À la fin du clone : toast + redirection vers le tableau de bord (le repo y apparaît).
+watch(op, (o) => {
+  if (o?.state === 'done') {
+    toasts.success(t('clone.done'));
+    emit('close');
+    void router.push({ name: 'dashboard' });
+  }
+});
+</script>
--- a/packages/web/src/components/settings/GitConnectionsSection.vue
+++ b/packages/web/src/components/settings/GitConnectionsSection.vue
@@ -0,0 +1,150 @@
+<template>
+  <section class="card flex flex-col gap-3">
+    <h2 class="flex items-center gap-2 text-sm font-semibold text-zinc-100">
+      <Plug :size="16" /> {{ t('gitconn.title') }}
+    </h2>
+    <p class="text-xs text-zinc-500">{{ t('gitconn.hint') }}</p>
+
+    <!-- liste des connexions -->
+    <ul v-if="store.connections.length" class="flex flex-col gap-1">
+      <li v-for="c in store.connections" :key="c.id" class="card-inset flex flex-wrap items-center gap-2">
+        <BaseBadge tone="sky">{{ c.service }}</BaseBadge>
+        <span class="font-medium text-zinc-200">{{ c.label }}</span>
+        <span class="text-xs text-zinc-500">{{ c.authType }}<template v-if="c.username"> · {{ c.username }}</template></span>
+        <span v-if="c.hasSecret" class="font-mono text-xs text-zinc-600">••••{{ c.secretLast4 }}</span>
+        <BaseBadge v-if="c.testResult" :tone="c.testResult === 'ok' ? 'emerald' : 'red'">{{ c.testResult }}</BaseBadge>
+        <span class="ml-auto flex items-center gap-1">
+          <BaseButton size="sm" variant="ghost" :loading="testingId === c.id" @click="onTest(c.id)">{{ t('gitconn.test') }}</BaseButton>
+          <BaseButton v-if="confirmId === c.id" size="sm" variant="danger" @click="onDelete(c.id)">{{ t('common.confirm') }}</BaseButton>
+          <BaseButton v-else size="sm" variant="ghost" :icon="Trash2" :aria-label="t('common.delete')" icon-only @click="confirmId = c.id" />
+        </span>
+      </li>
+    </ul>
+    <p v-else class="text-xs text-zinc-600">{{ t('gitconn.empty') }}</p>
+
+    <!-- formulaire d'ajout -->
+    <form v-if="adding" class="card-inset flex flex-col gap-2" @submit.prevent="onCreate">
+      <div class="flex flex-wrap gap-2">
+        <label class="flex flex-col gap-1 text-xs text-zinc-400">
+          {{ t('gitconn.service') }}
+          <select v-model="form.service" class="input">
+            <option value="gitea">Gitea</option>
+            <option value="gitlab">GitLab</option>
+            <option value="github">GitHub</option>
+          </select>
+        </label>
+        <label class="flex flex-col gap-1 text-xs text-zinc-400">
+          {{ t('gitconn.authType') }}
+          <select v-model="form.authType" class="input">
+            <option value="pat">{{ t('gitconn.pat') }}</option>
+            <option value="app_password">{{ t('gitconn.appPassword') }}</option>
+          </select>
+        </label>
+        <label class="flex flex-1 flex-col gap-1 text-xs text-zinc-400">
+          {{ t('gitconn.label') }}
+          <input v-model.trim="form.label" class="input" :placeholder="t('gitconn.labelPlaceholder')" required />
+        </label>
+      </div>
+      <label v-if="form.service === 'gitea' || form.service === 'gitlab'" class="flex flex-col gap-1 text-xs text-zinc-400">
+        {{ t('gitconn.baseUrl') }}<template v-if="form.service === 'gitea'"> *</template>
+        <input v-model.trim="form.baseUrl" class="input font-mono" placeholder="https://git.example.com" :required="form.service === 'gitea'" />
+      </label>
+      <div class="flex flex-wrap gap-2">
+        <label class="flex flex-col gap-1 text-xs text-zinc-400">
+          {{ t('gitconn.username') }}
+          <input v-model.trim="form.username" class="input" :placeholder="t('gitconn.usernamePlaceholder')" />
+        </label>
+        <label class="flex flex-1 flex-col gap-1 text-xs text-zinc-400">
+          {{ form.authType === 'pat' ? t('gitconn.token') : t('gitconn.password') }}
+          <input v-model="form.secret" type="password" class="input font-mono" autocomplete="off" required />
+        </label>
+      </div>
+      <p v-if="error" class="text-xs text-amber-400">{{ error }}</p>
+      <div class="flex items-center gap-2">
+        <BaseButton type="submit" variant="primary" size="sm" :loading="creating" :disabled="!canCreate">{{ t('gitconn.add') }}</BaseButton>
+        <BaseButton type="button" size="sm" variant="ghost" @click="adding = false">{{ t('common.cancel') }}</BaseButton>
+      </div>
+    </form>
+    <div v-else>
+      <BaseButton size="sm" :icon="Plus" @click="openForm">{{ t('gitconn.addConnection') }}</BaseButton>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { Plug, Plus, Trash2 } from '@lucide/vue';
+import type { GitAuthType, GitService } from '@arboretum/shared';
+import { useGitConnectionsStore } from '../../stores/git-connections';
+import { useToastsStore } from '../../stores/toasts';
+import BaseButton from '../ui/BaseButton.vue';
+import BaseBadge from '../ui/BaseBadge.vue';
+
+const { t } = useI18n();
+const store = useGitConnectionsStore();
+const toasts = useToastsStore();
+
+const adding = ref(false);
+const creating = ref(false);
+const error = ref<string | null>(null);
+const testingId = ref<string | null>(null);
+const confirmId = ref<string | null>(null);
+const form = reactive({ service: 'gitea' as GitService, authType: 'pat' as GitAuthType, label: '', baseUrl: '', username: '', secret: '' });
+
+const canCreate = computed(
+  () => form.label.trim() !== '' && form.secret !== '' && (form.service !== 'gitea' || form.baseUrl.trim() !== ''),
+);
+
+onMounted(() => void store.fetchAll());
+
+function openForm(): void {
+  Object.assign(form, { service: 'gitea', authType: 'pat', label: '', baseUrl: '', username: '', secret: '' });
+  error.value = null;
+  adding.value = true;
+}
+
+async function onCreate(): Promise<void> {
+  creating.value = true;
+  error.value = null;
+  try {
+    await store.create({
+      label: form.label.trim(),
+      service: form.service,
+      authType: form.authType,
+      ...(form.baseUrl.trim() ? { baseUrl: form.baseUrl.trim() } : {}),
+      ...(form.username.trim() ? { username: form.username.trim() } : {}),
+      secret: form.secret,
+    });
+    adding.value = false;
+    toasts.success(t('gitconn.added'));
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : String(e);
+  } finally {
+    creating.value = false;
+  }
+}
+
+async function onTest(id: string): Promise<void> {
+  testingId.value = id;
+  try {
+    const res = await store.test(id);
+    if (res.ok) toasts.success(t('gitconn.testOk', { user: res.user ?? '' }));
+    else toasts.error(t('gitconn.testFailed', { error: res.error ?? '' }));
+  } catch (e) {
+    toasts.error(e);
+  } finally {
+    testingId.value = null;
+  }
+}
+
+async function onDelete(id: string): Promise<void> {
+  confirmId.value = null;
+  try {
+    await store.remove(id);
+    toasts.success(t('gitconn.deleted'));
+  } catch (e) {
+    toasts.error(e);
+  }
+}
+</script>
--- a/packages/web/src/i18n/en.ts
+++ b/packages/web/src/i18n/en.ts
@@ -11,6 +11,8 @@ export default {
    settings: 'Settings',
    close: 'Close',
    retry: 'Retry',
+    confirm: 'Confirm',
+    delete: 'Delete',
  },
  login: {
    title: 'Sign in with your access token',
@@ -254,6 +256,50 @@ export default {
    pullRebase: 'Pull --rebase',
    alreadyPushed: 'Cannot amend: this commit was already pushed.',
  },
+  gitconn: {
+    title: 'Git connections',
+    hint: 'Connect to Gitea, GitLab or GitHub to clone private repositories. Tokens are encrypted at rest and never shown again.',
+    empty: 'No connection yet.',
+    addConnection: 'Add a connection',
+    add: 'Add',
+    service: 'Service',
+    authType: 'Authentication',
+    pat: 'Personal access token',
+    appPassword: 'App password',
+    label: 'Label',
+    labelPlaceholder: 'e.g. My Gitea',
+    baseUrl: 'Instance URL',
+    username: 'Username',
+    usernamePlaceholder: 'optional',
+    token: 'Token',
+    password: 'Password',
+    test: 'Test',
+    added: 'Connection added',
+    deleted: 'Connection deleted',
+    testOk: 'Connected as {user}',
+    testFailed: 'Connection failed: {error}',
+  },
+  clone: {
+    button: 'Clone',
+    title: 'Clone a repository',
+    noCredential: 'No git connection configured.',
+    goSettings: 'Add one in Settings',
+    credential: 'Connection',
+    search: 'Search',
+    searchPlaceholder: 'Filter repositories…',
+    private: 'private',
+    noRepos: 'No repository found.',
+    more: 'Load more',
+    dest: 'Destination folder',
+    destPlaceholder: '/path/to/clone',
+    destHint: 'Must be inside a configured scan folder; the folder is created by the clone.',
+    clone: 'Clone',
+    starting: 'Starting…',
+    cloning: 'Cloning…',
+    done: 'Clone complete',
+    failed: 'Clone failed',
+    back: 'Back',
+  },
  terminal: {
    observer: 'observer (read-only)',
    sessionEnded: 'Session ended',
--- a/packages/web/src/i18n/fr.ts
+++ b/packages/web/src/i18n/fr.ts
@@ -13,6 +13,8 @@ const fr: typeof en = {
    settings: 'Réglages',
    close: 'Fermer',
    retry: 'Réessayer',
+    confirm: 'Confirmer',
+    delete: 'Supprimer',
  },
  login: {
    title: 'Connectez-vous avec votre jeton d’accès',
@@ -256,6 +258,50 @@ const fr: typeof en = {
    pullRebase: 'Pull --rebase',
    alreadyPushed: 'Amend impossible : ce commit a déjà été poussé.',
  },
+  gitconn: {
+    title: 'Connexions git',
+    hint: 'Connectez Gitea, GitLab ou GitHub pour cloner des dépôts privés. Les tokens sont chiffrés au repos et jamais ré-affichés.',
+    empty: 'Aucune connexion pour l’instant.',
+    addConnection: 'Ajouter une connexion',
+    add: 'Ajouter',
+    service: 'Service',
+    authType: 'Authentification',
+    pat: 'Jeton d’accès personnel',
+    appPassword: 'Mot de passe d’application',
+    label: 'Libellé',
+    labelPlaceholder: 'ex. Mon Gitea',
+    baseUrl: 'URL de l’instance',
+    username: 'Identifiant',
+    usernamePlaceholder: 'optionnel',
+    token: 'Jeton',
+    password: 'Mot de passe',
+    test: 'Tester',
+    added: 'Connexion ajoutée',
+    deleted: 'Connexion supprimée',
+    testOk: 'Connecté en tant que {user}',
+    testFailed: 'Échec de connexion : {error}',
+  },
+  clone: {
+    button: 'Cloner',
+    title: 'Cloner un dépôt',
+    noCredential: 'Aucune connexion git configurée.',
+    goSettings: 'En ajouter dans les Réglages',
+    credential: 'Connexion',
+    search: 'Rechercher',
+    searchPlaceholder: 'Filtrer les dépôts…',
+    private: 'privé',
+    noRepos: 'Aucun dépôt trouvé.',
+    more: 'Charger plus',
+    dest: 'Dossier de destination',
+    destPlaceholder: '/chemin/du/clone',
+    destHint: 'Doit être sous un dossier de scan configuré ; le dossier est créé par le clone.',
+    clone: 'Cloner',
+    starting: 'Démarrage…',
+    cloning: 'Clonage…',
+    done: 'Clone terminé',
+    failed: 'Échec du clone',
+    back: 'Retour',
+  },
  terminal: {
    observer: 'observateur (lecture seule)',
    sessionEnded: 'Session terminée',
--- a/packages/web/src/lib/ws-client.ts
+++ b/packages/web/src/lib/ws-client.ts
@@ -31,6 +31,8 @@ export type WorktreeEvent = Extract<ServerMessage, { type: 'repo_update' | 'repo
 export type GroupEvent = Extract<ServerMessage, { type: 'group_update' | 'group_removed' }>;
 /** P11 — un réglage a changé (diffusé au topic 'settings'). */
 export type SettingsUpdateEvent = Extract<ServerMessage, { type: 'settings_update' }>;
+/** P12 — progression/fin d'un clone (diffusée au topic 'clones'). */
+export type CloneEvent = Extract<ServerMessage, { type: 'clone_update' }>;
 /** P7 — signal ciblé « le détail (changes/diff) d'un worktree regardé a changé ». */
 export type WorktreeChangesEvent = Extract<ServerMessage, { type: 'worktree_changes' }>;

@@ -130,6 +132,7 @@ export class WsClient {
  private readonly worktreeListeners = new Set<(e: WorktreeEvent) => void>();
  private readonly groupListeners = new Set<(e: GroupEvent) => void>();
  private readonly settingsListeners = new Set<(e: SettingsUpdateEvent) => void>();
+  private readonly cloneListeners = new Set<(e: CloneEvent) => void>();
  /** P7 — abonnements ciblés au détail d'un worktree (clé repoId\0path → listeners). */
  private readonly worktreeChangesListeners = new Map<string, Set<(e: WorktreeChangesEvent) => void>>();

@@ -180,12 +183,13 @@ export class WsClient {
  }

  /** topics actifs = union des abonnements courants (une seule connexion partagée). */
-  private activeTopics(): Array<'sessions' | 'worktrees' | 'groups' | 'settings'> {
-    const t: Array<'sessions' | 'worktrees' | 'groups' | 'settings'> = [];
+  private activeTopics(): Array<'sessions' | 'worktrees' | 'groups' | 'settings' | 'clones'> {
+    const t: Array<'sessions' | 'worktrees' | 'groups' | 'settings' | 'clones'> = [];
    if (this.sessionListeners.size > 0) t.push('sessions');
    if (this.worktreeListeners.size > 0) t.push('worktrees');
    if (this.groupListeners.size > 0) t.push('groups');
    if (this.settingsListeners.size > 0) t.push('settings');
+    if (this.cloneListeners.size > 0) t.push('clones');
    return t;
  }

@@ -233,6 +237,16 @@ export class WsClient {
    };
  }

+  subscribeClones(listener: (e: CloneEvent) => void): () => void {
+    this.cloneListeners.add(listener);
+    this.connect();
+    this.sendSub();
+    return () => {
+      this.cloneListeners.delete(listener);
+      this.sendSub();
+    };
+  }
+
  /**
   * P7 — observe le détail (changes/diff) d'un worktree précis : envoie `watch`, route les
   * `worktree_changes` correspondants vers `listener`, et ré-arme automatiquement après reconnexion.
@@ -505,6 +519,10 @@ export class WsClient {
        for (const cb of this.settingsListeners) cb(msg);
        return;
      }
+      case 'clone_update': {
+        for (const cb of this.cloneListeners) cb(msg);
+        return;
+      }
      case 'worktree_changes': {
        const set = this.worktreeChangesListeners.get(`${msg.repoId}\0${msg.path}`);
        if (set) for (const cb of set) cb(msg);
--- a/packages/web/src/stores/clone.ts
+++ b/packages/web/src/stores/clone.ts
@@ -0,0 +1,40 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import type { CloneOperation, CloneRequest, CloneStartResponse } from '@arboretum/shared';
+import { api } from '../lib/api';
+import { wsClient, type CloneEvent } from '../lib/ws-client';
+
+// Suivi des opérations de clone (P12). État en mémoire alimenté par le push WS (topic 'clones') ;
+// chaque opération survit au refresh côté serveur (GET /repos/clone/:id), non rechargé ici.
+export const useCloneStore = defineStore('clone', () => {
+  const operations = ref<CloneOperation[]>([]);
+  let unsubscribe: (() => void) | null = null;
+
+  function upsert(op: CloneOperation): void {
+    const i = operations.value.findIndex((o) => o.id === op.id);
+    if (i >= 0) operations.value.splice(i, 1, op);
+    else operations.value.push(op);
+  }
+
+  function get(id: string): CloneOperation | undefined {
+    return operations.value.find((o) => o.id === id);
+  }
+
+  function startRealtime(): void {
+    unsubscribe ??= wsClient.subscribeClones((e: CloneEvent) => upsert(e.operation));
+  }
+  function stopRealtime(): void {
+    unsubscribe?.();
+    unsubscribe = null;
+  }
+
+  // Lance un clone ; la progression arrive ensuite par WS. Retourne l'operationId à suivre.
+  async function clone(req: CloneRequest): Promise<string> {
+    startRealtime(); // s'abonner AVANT de lancer pour ne manquer aucun event
+    const res = await api.post<CloneStartResponse>('/api/v1/repos/clone', req);
+    upsert({ id: res.operationId, state: 'pending', progress: null, phase: null, error: null, repoId: null, dest: req.dest });
+    return res.operationId;
+  }
+
+  return { operations, get, clone, startRealtime, stopRealtime };
+});
--- a/packages/web/src/stores/git-connections.ts
+++ b/packages/web/src/stores/git-connections.ts
@@ -0,0 +1,65 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import type {
+  CreateGitCredentialRequest,
+  GitCredentialResponse,
+  GitCredentialSummary,
+  GitCredentialsListResponse,
+  RemoteReposResponse,
+  TestCredentialResponse,
+  UpdateGitCredentialRequest,
+} from '@arboretum/shared';
+import { api } from '../lib/api';
+
+// Connexions aux services git distants (P12). Les secrets ne transitent jamais en lecture
+// (résumés hasSecret/secretLast4 seulement) ; la création/maj envoie le secret en écriture.
+export const useGitConnectionsStore = defineStore('gitConnections', () => {
+  const connections = ref<GitCredentialSummary[]>([]);
+  const loading = ref(false);
+
+  function upsert(c: GitCredentialSummary): void {
+    const i = connections.value.findIndex((x) => x.id === c.id);
+    if (i >= 0) connections.value.splice(i, 1, c);
+    else connections.value.push(c);
+  }
+
+  async function fetchAll(): Promise<void> {
+    loading.value = true;
+    try {
+      connections.value = (await api.get<GitCredentialsListResponse>('/api/v1/git-connections')).credentials;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function create(req: CreateGitCredentialRequest): Promise<GitCredentialSummary> {
+    const res = await api.post<GitCredentialResponse>('/api/v1/git-connections', req);
+    upsert(res.credential);
+    return res.credential;
+  }
+
+  async function update(id: string, patch: UpdateGitCredentialRequest): Promise<GitCredentialSummary> {
+    const res = await api.patch<GitCredentialResponse>(`/api/v1/git-connections/${id}`, patch);
+    upsert(res.credential);
+    return res.credential;
+  }
+
+  async function remove(id: string): Promise<void> {
+    await api.delete<{ ok: true }>(`/api/v1/git-connections/${id}`);
+    connections.value = connections.value.filter((c) => c.id !== id);
+  }
+
+  async function test(id: string): Promise<TestCredentialResponse> {
+    const res = await api.post<TestCredentialResponse>(`/api/v1/git-connections/${id}/test`);
+    await fetchAll(); // rafraîchit lastTestedAt/testResult
+    return res;
+  }
+
+  function listRemoteRepos(id: string, page = 1, search?: string): Promise<RemoteReposResponse> {
+    const qs = new URLSearchParams({ page: String(page) });
+    if (search) qs.set('search', search);
+    return api.get<RemoteReposResponse>(`/api/v1/git-connections/${id}/repos?${qs.toString()}`);
+  }
+
+  return { connections, loading, fetchAll, create, update, remove, test, listRemoteRepos };
+});
--- a/packages/web/src/views/DashboardView.vue
+++ b/packages/web/src/views/DashboardView.vue
@@ -1,5 +1,8 @@
 <template>
  <PageHeader :title="t('nav.worktrees')">
+    <BaseButton variant="ghost" size="sm" :icon="CloudDownload" @click="showClone = true">
+      {{ t('clone.button') }}
+    </BaseButton>
    <BaseButton variant="ghost" size="sm" :icon="ScanSearch" :loading="scanning" @click="onDiscover">
      {{ t('repos.scan') }}
    </BaseButton>
@@ -7,6 +10,7 @@
      {{ t('common.refresh') }}
    </BaseButton>
  </PageHeader>
+  <CloneRepoModal v-if="showClone" @close="showClone = false" />

  <AttentionSection />

@@ -60,7 +64,7 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { GitBranch, RefreshCw, FolderOpen, Plus, Search, ScanSearch } from '@lucide/vue';
+import { GitBranch, RefreshCw, FolderOpen, Plus, Search, ScanSearch, CloudDownload } from '@lucide/vue';
 import { useWorktreesStore } from '../stores/worktrees';
 import { useToastsStore } from '../stores/toasts';
 import { useWorktreeView } from '../composables/useWorktreeView';
@@ -73,6 +77,7 @@ import Pagination from '../components/Pagination.vue';
 import AttentionSection from '../components/AttentionSection.vue';
 import RepoSection from '../components/RepoSection.vue';
 import DirectoryPicker from '../components/DirectoryPicker.vue';
+import CloneRepoModal from '../components/CloneRepoModal.vue';

 const { t } = useI18n();
 const store = useWorktreesStore();
@@ -81,6 +86,7 @@ const view = useWorktreeView();

 const newPath = ref('');
 const showPicker = ref(false);
+const showClone = ref(false);
 const adding = ref(false);
 const scanning = ref(false);
 const showHidden = ref(false);
--- a/packages/web/src/views/SettingsView.vue
+++ b/packages/web/src/views/SettingsView.vue
@@ -195,6 +195,9 @@
      </div>
    </section>

+    <!-- Connexions aux services git (P12) -->
+    <GitConnectionsSection />
+
    <!-- Sécurité & conformité -->
    <section class="card flex flex-col gap-3">
      <h2 class="flex items-center gap-2 text-sm font-semibold text-zinc-100">
@@ -280,6 +283,7 @@ import LanguageSwitcher from '../components/LanguageSwitcher.vue';
 import BaseButton from '../components/ui/BaseButton.vue';
 import SkeletonRow from '../components/ui/SkeletonRow.vue';
 import ServerRow from '../components/settings/ServerRow.vue';
+import GitConnectionsSection from '../components/settings/GitConnectionsSection.vue';
 import DirectoryPicker from '../components/DirectoryPicker.vue';

 const { t, locale } = useI18n();