fix(server, web, vscode): les terminaux ne restent plus noirs, panes côte à côte, git scopé au terminal
Un terminal pouvait rester tout noir alors que sa session tournait. Le PTY était vivant et avait bien écrit sa sortie : la panne était dans le transport. Le replay d'attache est une frame BINAIRE, mais un client n'apprend son numéro de canal qu'avec le message `attached` ; le serveur envoyait le replay AVANT, donc tout client le jetait sur un canal inconnu. Rien n'était peint, et un TUI au repos (Claude à son prompt) ne réémet jamais rien de lui-même. `attach()` renvoie désormais le replay et la gateway l'émet APRÈS `attached` : un seul correctif serveur répare le web, l'app de bureau et l'extension VS Code, qui portaient le même défaut client. Le resize de l'attache masquait le bug en provoquant un SIGWINCH, d'où son apparence intermittente. Seconde moitié du symptôme (« je tape et rien ne se passe ») : le dock montait avant la liste des sessions, en déduisait « non attachable » et s'attachait en observateur, à vie et en silence. Un pane n'attache plus avant de connaître sa session (`sessions.loaded`). Attaches sans écran : le message `attach` accepte un `screen` optionnel (défaut true). Un client qui n'affiche rien et veut seulement répondre à un dialogue ne prend plus le contrôle de la session, ne lui impose plus ses dimensions (ce qui figeait la géométrie du vrai terminal) et ne reçoit plus le flux pour le jeter. Rendre les pannes visibles : la raison d'un exit est écrite dans le terminal (`[arboretum] bash exited with code 3`) avant le détachement ; un repaint est forcé si rien n'arrive 1,2 s après l'attache, puis annoncé avec « Refresh screen » ; les refus de canal remontent à l'écran au lieu d'un console.warn ; le chemin du CLI claude est revalidé (périmé après une bascule nvm/asdf, le PTY mourait sans un octet). Colonnes de terminaux : le dock devient une rangée de colonnes redimensionnables (3 max), chacune avec ses onglets. Algèbre pure dans lib/dock-model.ts, cinq invariants documentés, ratios plutôt que pixels. `dockSessionIds` et `activeDockSessionId` deviennent des computed dérivés : aucun consommateur ni test existant ne change. Alt+clic ouvre à côté depuis les quatre panneaux. Le plafond de hauteur du dock suit le viewport au lieu d'un 640 px figé. Correctif préexistant au passage : PanelSplitter passait ses bornes par valeur, figées au premier rendu, alors que le clavier les relisait. Portée git : la vue Changements suit le worktree du terminal focalisé, ou tous les dépôts de son groupe pour une session de groupe, avec « tout voir » à un clic. L'index Git de la sidebar reste global (c'est la sortie d'une portée étroite) et le badge d'activité aussi (il sert à signaler le travail qu'on ne regarde pas). Seul le TERMINAL impose le contexte : le repli sur l'onglet éditeur, essayé d'abord, rétrécissait la vue multi-projet dès qu'on ouvrait un fichier. Vérifications : acceptance-p17.mjs prouve l'ordre des trames sur un vrai WebSocket (avec l'ancien ordre : 0 octet rejoué, échec), verify-terminals.mjs prouve par interaction réelle que le terminal peint, que deux colonnes coexistent, que la frappe atteint le bon PTY (fichier témoin par cwd) et que la vue suit le terminal.
This commit is contained in:
@@ -13,6 +13,7 @@ import { computed } from 'vue';
|
||||
import { wsClient } from './lib/ws-client';
|
||||
import { useRealtimeBootstrap } from './composables/useRealtimeBootstrap';
|
||||
import { useWatchedWorktrees } from './composables/useWatchedWorktrees';
|
||||
import { useTerminalContext } from './composables/useTerminalContext';
|
||||
import WsBanner from './components/layout/WsBanner.vue';
|
||||
import ToastContainer from './components/ToastContainer.vue';
|
||||
import CommandPalette from './components/CommandPalette.vue';
|
||||
@@ -24,4 +25,6 @@ const wsReconnecting = computed(() => wsClient.status.value === 'reconnecting');
|
||||
useRealtimeBootstrap();
|
||||
// Idem pour les abonnements ciblés `watch` : ils doivent survivre au démontage des panneaux.
|
||||
useWatchedWorktrees();
|
||||
// Le terminal focalisé impose le worktree actif (propriétaire unique de cette écriture).
|
||||
useTerminalContext();
|
||||
</script>
|
||||
|
||||
@@ -53,7 +53,7 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, nextTick, onMounted, onUnmounted, ref, watch, type Component } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { Search, GitBranch, TerminalSquare, Boxes, Plus, FolderPlus, Rocket } from '@lucide/vue';
|
||||
import { Search, GitBranch, TerminalSquare, Boxes, Plus, FolderPlus, Rocket, SquareSplitHorizontal } from '@lucide/vue';
|
||||
import type { WorktreeSummary } from '@arboretum/shared';
|
||||
import { useSessionsStore } from '../stores/sessions';
|
||||
import { useWorktreesStore } from '../stores/worktrees';
|
||||
@@ -126,6 +126,10 @@ const items = computed<PaletteItem[]>(() => {
|
||||
out.push({ id: 'act-newSession', type: 'action', label: t('palette.actions.newSession'), icon: Plus as Component, keywords: t('palette.actions.newSession').toLowerCase(), run: () => void modals.open(NewSessionModal) });
|
||||
out.push({ id: 'act-addRepo', type: 'action', label: t('palette.actions.addRepo'), icon: FolderPlus as Component, keywords: t('palette.actions.addRepo').toLowerCase(), run: () => ide.setActivity('explorer') });
|
||||
out.push({ id: 'act-newGroup', type: 'action', label: t('palette.actions.newGroup'), icon: Boxes as Component, keywords: t('palette.actions.newGroup').toLowerCase(), run: () => void modals.open(GroupCreateModal) });
|
||||
// Une SEULE entrée pour le split (et non une par session : la palette doublerait de taille).
|
||||
if (ide.canSplitTerminal) {
|
||||
out.push({ id: 'act-splitTerminal', type: 'action', label: t('palette.actions.splitTerminal'), icon: SquareSplitHorizontal as Component, keywords: t('palette.actions.splitTerminal').toLowerCase(), run: () => ide.splitTerminal() });
|
||||
}
|
||||
return out;
|
||||
});
|
||||
|
||||
|
||||
@@ -41,8 +41,7 @@ const { t } = useI18n();
|
||||
const busy = ref(false);
|
||||
const dialog = computed(() => (props.session.activity === 'waiting' ? props.session.dialog ?? null : null));
|
||||
|
||||
// Sink no-op : l'attache de réponse n'affiche rien ; elle rappelle le callback du flow
|
||||
// control pour ne jamais bloquer le PTY côté serveur.
|
||||
// Sink no-op : cette attache n'affiche rien, elle sert uniquement à répondre.
|
||||
const noopSink: TerminalSink = {
|
||||
write: (_data, cb) => cb?.(),
|
||||
reset: () => {},
|
||||
@@ -52,7 +51,10 @@ const noopSink: TerminalSink = {
|
||||
|
||||
let attachPromise: Promise<Attachment> | null = null;
|
||||
function ensureAttached(): Promise<Attachment> {
|
||||
attachPromise ??= wsClient.attach({ sessionId: props.session.id, mode: 'interactive', cols: 120, rows: 32, sink: noopSink });
|
||||
// `screen: false` : sans lui, cette attache prenait le `controlling` de la session et imposait au
|
||||
// PTY ses dimensions bidon (le terminal ouvert ensuite restait figé à 120x32, et ne pouvait plus
|
||||
// se redimensionner) ; elle recevait en outre tout le flux de sortie pour le jeter.
|
||||
attachPromise ??= wsClient.attach({ sessionId: props.session.id, mode: 'interactive', cols: 120, rows: 32, sink: noopSink, screen: false });
|
||||
return attachPromise;
|
||||
}
|
||||
|
||||
|
||||
@@ -13,6 +13,21 @@
|
||||
>
|
||||
{{ t('terminal.sessionEnded') }}
|
||||
</div>
|
||||
<div
|
||||
v-else-if="channelError"
|
||||
class="absolute inset-x-0 top-0 border-b border-warn/40 bg-warn/15 px-4 py-2 text-center text-sm text-warn"
|
||||
>
|
||||
{{ channelError }}
|
||||
</div>
|
||||
<div
|
||||
v-else-if="waitingOutput"
|
||||
class="absolute inset-x-0 bottom-0 flex items-center justify-center gap-3 border-t border-border-soft bg-surface-1/95 px-4 py-2 text-xs text-fg-muted"
|
||||
>
|
||||
<span>{{ t('terminal.waitingForOutput') }}</span>
|
||||
<button type="button" class="rounded-md border border-border px-2 py-0.5 text-fg hover:bg-surface-2" @click="refreshScreen">
|
||||
{{ t('terminal.refreshScreen') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -37,6 +52,10 @@ const { t } = useI18n();
|
||||
const container = useTemplateRef<HTMLDivElement>('container');
|
||||
const controlling = ref(true);
|
||||
const ended = ref(false);
|
||||
/** « attaché, session vivante, mais rien à peindre » : sans cet état, la panne était un écran noir muet. */
|
||||
const waitingOutput = ref(false);
|
||||
/** Dernière erreur serveur portant sur ce canal (frappe refusée...), effacée d'elle-même. */
|
||||
const channelError = ref<string | null>(null);
|
||||
|
||||
let term: Terminal | null = null;
|
||||
let attachment: Attachment | null = null;
|
||||
@@ -46,6 +65,40 @@ let onVisible: (() => void) | null = null;
|
||||
let onDomCopy: ((e: ClipboardEvent) => void) | null = null;
|
||||
let stopThemeWatch: (() => void) | null = null;
|
||||
let disposed = false;
|
||||
/** re-mesure + repaint, hissé hors de onMounted pour être appelable par le parent (colonnes du dock). */
|
||||
let refit: (() => void) | null = null;
|
||||
/** un seul octet reçu suffit à prouver que le canal peint : désarme la sonde ci-dessous. */
|
||||
let gotOutput = false;
|
||||
let outputProbe: ReturnType<typeof setTimeout> | null = null;
|
||||
let errorTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
/** Délai avant de tenter un repaint forcé, puis avant de l'avouer à l'utilisateur. */
|
||||
const OUTPUT_PROBE_MS = 1200;
|
||||
const OUTPUT_GIVEUP_MS = 900;
|
||||
|
||||
function noteOutput(): void {
|
||||
gotOutput = true;
|
||||
waitingOutput.value = false;
|
||||
if (outputProbe) {
|
||||
clearTimeout(outputProbe);
|
||||
outputProbe = null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Force un repaint COMPLET du TUI en faisant varier la géométrie : un `TIOCSWINSZ` de taille
|
||||
* différente provoque un SIGWINCH, seul signal auquel un TUI au repos (Ink de Claude, vim) réagit
|
||||
* en redessinant tout. Le noyau n'émet rien si la taille est identique, d'où le passage par rows-1.
|
||||
* Sans écran contrôlant, on se rabat sur un simple repaint local.
|
||||
*/
|
||||
function refreshScreen(): void {
|
||||
const active = term;
|
||||
if (!active) return;
|
||||
if (attachment && controlling.value) {
|
||||
attachment.resize(active.cols, Math.max(2, active.rows - 1));
|
||||
attachment.resize(active.cols, active.rows);
|
||||
}
|
||||
active.refresh(0, active.rows - 1);
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
if (!container.value) return;
|
||||
@@ -92,7 +145,7 @@ onMounted(async () => {
|
||||
// taille finale (la hauteur flex se résout après le 1er paint) → un seul `fit()` donne trop peu de
|
||||
// lignes et déforme le TUI. On refait donc le calcul en `requestAnimationFrame`, puis on resynchronise
|
||||
// les dimensions PTY. Sert aussi après un resync (reconnexion) où l'écran est remis à plat.
|
||||
const refit = (): void => {
|
||||
const doRefit = (): void => {
|
||||
try {
|
||||
fit.fit();
|
||||
} catch {
|
||||
@@ -103,10 +156,11 @@ onMounted(async () => {
|
||||
// d'arrière-plan, resync) → on force un rafraîchissement pour éviter un écran figé.
|
||||
activeTerm.refresh(0, activeTerm.rows - 1);
|
||||
};
|
||||
refit = doRefit; // exposé au parent (une colonne du dock re-mesure ses panes)
|
||||
|
||||
// Filet : re-mesure quand la fonte web est prête (au cas où le load ci-dessus n'a pas suffi).
|
||||
void document.fonts?.ready.then(() => {
|
||||
if (!disposed) refit();
|
||||
if (!disposed) doRefit();
|
||||
});
|
||||
// Repeint xterm lors d'une bascule de thème clair/sombre (sans recréer le terminal).
|
||||
stopThemeWatch = watch(resolvedTheme, (r) => {
|
||||
@@ -120,10 +174,13 @@ onMounted(async () => {
|
||||
cols: activeTerm.cols,
|
||||
rows: activeTerm.rows,
|
||||
sink: {
|
||||
write: (data, callback) => activeTerm.write(data, callback),
|
||||
write: (data, callback) => {
|
||||
noteOutput();
|
||||
activeTerm.write(data, callback);
|
||||
},
|
||||
reset: () => {
|
||||
activeTerm.reset();
|
||||
requestAnimationFrame(refit);
|
||||
requestAnimationFrame(doRefit);
|
||||
},
|
||||
onDetached: (reason) => {
|
||||
if (reason === 'session_exit' || reason === 'replaced') ended.value = true;
|
||||
@@ -131,6 +188,15 @@ onMounted(async () => {
|
||||
onControlChanged: (c) => {
|
||||
controlling.value = c;
|
||||
},
|
||||
onChannelError: (code, message) => {
|
||||
// Une frappe refusée (observateur) ou un canal périmé ne doit plus disparaître en console.
|
||||
channelError.value = code === 'NOT_CONTROLLING' ? t('terminal.observer') : message;
|
||||
if (errorTimer) clearTimeout(errorTimer);
|
||||
errorTimer = setTimeout(() => {
|
||||
channelError.value = null;
|
||||
errorTimer = null;
|
||||
}, 4000);
|
||||
},
|
||||
},
|
||||
});
|
||||
} catch {
|
||||
@@ -144,7 +210,22 @@ onMounted(async () => {
|
||||
return;
|
||||
}
|
||||
controlling.value = attachment.controlling;
|
||||
requestAnimationFrame(refit); // recale la taille une fois le layout fullbleed stabilisé
|
||||
requestAnimationFrame(doRefit); // recale la taille une fois le layout fullbleed stabilisé
|
||||
|
||||
// Sonde anti-écran-noir : une session vivante à laquelle on est attaché doit avoir peint quelque
|
||||
// chose (le replay du serveur, au minimum). Si rien n'arrive, on tente d'abord un repaint forcé
|
||||
// (un TUI au repos ne réémet que sur SIGWINCH), et si cela ne suffit pas on le DIT, avec l'action
|
||||
// qui débloque, au lieu de laisser un rectangle noir sans explication.
|
||||
outputProbe = setTimeout(() => {
|
||||
outputProbe = null;
|
||||
if (disposed || gotOutput || ended.value) return;
|
||||
refreshScreen();
|
||||
outputProbe = setTimeout(() => {
|
||||
outputProbe = null;
|
||||
if (disposed || gotOutput || ended.value) return;
|
||||
waitingOutput.value = true;
|
||||
}, OUTPUT_GIVEUP_MS);
|
||||
}, OUTPUT_PROBE_MS);
|
||||
|
||||
activeTerm.onData((data) => attachment?.sendStdin(data));
|
||||
|
||||
@@ -175,7 +256,7 @@ onMounted(async () => {
|
||||
e.preventDefault();
|
||||
};
|
||||
document.addEventListener('copy', onDomCopy);
|
||||
resizeObserver = new ResizeObserver(refit);
|
||||
resizeObserver = new ResizeObserver(doRefit);
|
||||
resizeObserver.observe(container.value);
|
||||
// Re-révélation RÉELLE du conteneur : cellule de grille démontée/remontée (maximize↔grille), scroll
|
||||
// hors/dans le viewport, ou navigation SPA : autant de cas que `visibilitychange` (onglet only) ne
|
||||
@@ -186,7 +267,7 @@ onMounted(async () => {
|
||||
if (!entry.isIntersecting) continue;
|
||||
// évite un fit() sur conteneur de taille 0 (remontage transitoire) → déforme le TUI
|
||||
if (entry.intersectionRect.width === 0 || entry.intersectionRect.height === 0) continue;
|
||||
refit();
|
||||
doRefit();
|
||||
attachment?.flushAck();
|
||||
}
|
||||
});
|
||||
@@ -205,9 +286,19 @@ onBeforeUnmount(() => {
|
||||
stopThemeWatch?.();
|
||||
resizeObserver?.disconnect();
|
||||
intersectionObserver?.disconnect();
|
||||
if (outputProbe) clearTimeout(outputProbe);
|
||||
if (errorTimer) clearTimeout(errorTimer);
|
||||
if (onVisible) document.removeEventListener('visibilitychange', onVisible);
|
||||
if (onDomCopy) document.removeEventListener('copy', onDomCopy);
|
||||
attachment?.detach();
|
||||
term?.dispose();
|
||||
});
|
||||
|
||||
// Le focus n'était posé qu'au montage : un pane laissé monté en v-show (bascule d'onglet, colonne
|
||||
// réactivée) ne pouvait plus JAMAIS reprendre la frappe. Le parent le lui redonne explicitement.
|
||||
defineExpose({
|
||||
focus: (): void => term?.focus(),
|
||||
refit: (): void => refit?.(),
|
||||
refresh: refreshScreen,
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
type="button"
|
||||
class="truncate text-left font-mono text-[11px] text-warn/80 transition-colors hover:text-warn"
|
||||
:title="s.cwd"
|
||||
@click="ide.openTerminal(s.id)"
|
||||
@click="(e: MouseEvent) => ide.openTerminal(s.id, { split: e.altKey })"
|
||||
>
|
||||
{{ sessionLabel(s, worktrees) }}
|
||||
</button>
|
||||
|
||||
@@ -4,7 +4,19 @@
|
||||
<GitCompare :size="13" />
|
||||
{{ t('changes.title') }}
|
||||
<span class="text-fg-subtle normal-case">{{ t('changes.summary', { n: pendingCount }, pendingCount) }}</span>
|
||||
<span class="ml-auto flex items-center gap-1">
|
||||
<span class="ml-auto flex min-w-0 items-center gap-1">
|
||||
<!-- Portée : suivre le terminal focalisé (ou son groupe), ou tout voir. Le libellé dit
|
||||
TOUJOURS ce qui serait suivi, y compris en mode « tout voir ». -->
|
||||
<button
|
||||
type="button"
|
||||
class="flex min-w-0 items-center gap-1 rounded px-1 py-0.5 normal-case hover:bg-surface-2 hover:text-fg"
|
||||
:class="scoped ? 'text-accent' : 'text-fg-subtle'"
|
||||
:title="scoped ? t('changes.scope.all') : t('changes.scope.follow')"
|
||||
@click="toggleScope"
|
||||
>
|
||||
<Crosshair :size="13" class="shrink-0" />
|
||||
<span class="truncate text-[11px]">{{ scopeLabel }}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded p-0.5 hover:bg-surface-2 hover:text-fg"
|
||||
@@ -42,6 +54,21 @@
|
||||
{{ t('common.retry') }}
|
||||
</button>
|
||||
</div>
|
||||
<!-- « Tout est committé et poussé » serait un MENSONGE sous une portée restreinte : le travail
|
||||
existe peut-être juste à côté. On le dit, avec la sortie. -->
|
||||
<EmptyState
|
||||
v-else-if="groups.length === 0 && scoped"
|
||||
:icon="Crosshair"
|
||||
:title="t('changes.scope.emptyInScope')"
|
||||
:hint="t('changes.scope.emptyInScopeHint')"
|
||||
class="m-6"
|
||||
>
|
||||
<template #action>
|
||||
<button type="button" class="rounded-md border border-border px-2 py-1 text-xs text-accent hover:bg-surface-2" @click="toggleScope">
|
||||
{{ t('changes.scope.all') }}
|
||||
</button>
|
||||
</template>
|
||||
</EmptyState>
|
||||
<EmptyState
|
||||
v-else-if="groups.length === 0"
|
||||
:icon="GitCompare"
|
||||
@@ -68,12 +95,13 @@
|
||||
// panneau latéral comme surface de travail ; la sidebar n'en garde que l'index.
|
||||
import { computed, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { Eye, EyeOff, FoldVertical, FolderGit2, GitCompare, RefreshCw, UnfoldVertical } from '@lucide/vue';
|
||||
import { Crosshair, Eye, EyeOff, FoldVertical, FolderGit2, GitCompare, RefreshCw, UnfoldVertical } from '@lucide/vue';
|
||||
import { useIdeStore, wtKey } from '../../stores/ide';
|
||||
import { useWorktreesStore } from '../../stores/worktrees';
|
||||
import { useGroupsStore } from '../../stores/groups';
|
||||
import { useChangesStore } from '../../stores/changes';
|
||||
import { groupWorktreesByRepo, pendingWorktreeCount } from '../../lib/changes-model';
|
||||
import { useContextScope } from '../../composables/useContextScope';
|
||||
import ChangesWorktreeBlock from './ChangesWorktreeBlock.vue';
|
||||
import EmptyState from '../ui/EmptyState.vue';
|
||||
import SkeletonRow from '../ui/SkeletonRow.vue';
|
||||
@@ -83,15 +111,19 @@ const ide = useIdeStore();
|
||||
const worktrees = useWorktreesStore();
|
||||
const groupsStore = useGroupsStore();
|
||||
const changes = useChangesStore();
|
||||
// Portée de travail : le terminal focalisé impose son worktree (ou son groupe). C'est ce qui évite de
|
||||
// se perdre entre projets ; la bascule « tout voir » reste à un clic.
|
||||
const { scope, scoped, label: scopeLabel, inScope, toggle: toggleScope } = useContextScope();
|
||||
|
||||
const repos = computed(() => worktrees.visibleRepos);
|
||||
const groups = computed(() =>
|
||||
groupWorktreesByRepo(repos.value, (id) => worktrees.worktreesForRepo(id), {
|
||||
showClean: ide.changesShowClean,
|
||||
active: ide.activeContext,
|
||||
inScope: inScope.value,
|
||||
}),
|
||||
);
|
||||
const pendingCount = computed(() => pendingWorktreeCount(repos.value, (id) => worktrees.worktreesForRepo(id)));
|
||||
const pendingCount = computed(() => pendingWorktreeCount(repos.value, (id) => worktrees.worktreesForRepo(id), inScope.value));
|
||||
|
||||
const allKeys = computed(() => groups.value.flatMap((g) => g.worktrees.map((w) => wtKey(w.repoId, w.path))));
|
||||
const allExpanded = computed(() => allKeys.value.length > 0 && allKeys.value.every((k) => ide.changesExpanded.includes(k)));
|
||||
@@ -109,9 +141,11 @@ function toggleAll(): void {
|
||||
// Premier affichage : les blocs sont repliés par défaut (aucune requête), mais une vue entièrement
|
||||
// repliée ne montre rien. On déplie donc le premier bloc, celui du worktree actif s'il est listé.
|
||||
watch(
|
||||
() => allKeys.value,
|
||||
(keys) => {
|
||||
if (keys.length === 0 || ide.changesExpanded.length > 0) return;
|
||||
// La portée compte comme dépendance : changer de terminal renouvelle la liste, et sans cela la vue
|
||||
// restait entièrement repliée sur le nouveau contexte.
|
||||
() => [allKeys.value, scope.value] as const,
|
||||
([keys]) => {
|
||||
if (keys.length === 0 || keys.some((k) => ide.changesExpanded.includes(k))) return;
|
||||
const ctx = ide.activeContext;
|
||||
const preferred = ctx ? wtKey(ctx.repoId, ctx.wtPath) : null;
|
||||
ide.setChangesExpanded([preferred && keys.includes(preferred) ? preferred : keys[0]!]);
|
||||
|
||||
@@ -32,8 +32,15 @@
|
||||
class="flex h-[var(--ide-row-h)] w-full items-center gap-1.5 px-2 pl-6 text-left text-xs"
|
||||
:class="isActive(wt) ? 'bg-surface-2 text-fg' : 'text-fg-muted hover:bg-surface-2/50'"
|
||||
:title="wt.path"
|
||||
@click="ide.openChanges(wt.repoId, wt.path)"
|
||||
@click="reveal(wt)"
|
||||
>
|
||||
<!-- L'index reste GLOBAL, volontairement : c'est la seule sortie d'une portée étroite (sinon
|
||||
impossible de rejoindre un autre projet, donc portée inéchappable). On marque juste ce
|
||||
qui tombe dans la portée courante. -->
|
||||
<span
|
||||
class="w-1 shrink-0 self-stretch rounded-full"
|
||||
:class="inScope({ repoId: wt.repoId, wtPath: wt.path }) && scoped ? 'bg-accent/70' : 'bg-transparent'"
|
||||
/>
|
||||
<component :is="wt.isMain ? Home : GitBranch" :size="13" class="shrink-0 text-fg-subtle" />
|
||||
<span class="truncate font-mono">{{ wt.branch ?? t('worktrees.detached') }}</span>
|
||||
<GitStatusBadge :git="wt.git" :branch="wt.branch" dense class="ml-auto shrink-0" />
|
||||
@@ -64,6 +71,7 @@ import { useIdeStore } from '../../stores/ide';
|
||||
import { useWorktreesStore } from '../../stores/worktrees';
|
||||
import { useGroupsStore } from '../../stores/groups';
|
||||
import { dirtyFileCount, pendingWorktreeCount, sortForIndex } from '../../lib/changes-model';
|
||||
import { useContextScope } from '../../composables/useContextScope';
|
||||
import GitStatusBadge from '../workspace/GitStatusBadge.vue';
|
||||
import BaseBadge from '../ui/BaseBadge.vue';
|
||||
import SkeletonRow from '../ui/SkeletonRow.vue';
|
||||
@@ -71,6 +79,17 @@ import SkeletonRow from '../ui/SkeletonRow.vue';
|
||||
const { t } = useI18n();
|
||||
const ide = useIdeStore();
|
||||
const worktrees = useWorktreesStore();
|
||||
const { inScope, scoped } = useContextScope();
|
||||
|
||||
/**
|
||||
* Ouvre le détail d'un worktree dans la zone centrale. Si ce worktree est HORS de la portée courante
|
||||
* (on suit un terminal d'un autre projet), on élargit la vue : sans cela le clic ne montrerait rien,
|
||||
* et la portée serait inéchappable depuis l'index.
|
||||
*/
|
||||
function reveal(wt: { repoId: string; path: string }): void {
|
||||
if (scoped.value && !inScope.value({ repoId: wt.repoId, wtPath: wt.path })) ide.changesScope = 'all';
|
||||
ide.openChanges(wt.repoId, wt.path);
|
||||
}
|
||||
const groupsStore = useGroupsStore();
|
||||
|
||||
const repos = computed(() => worktrees.visibleRepos);
|
||||
|
||||
@@ -103,7 +103,7 @@
|
||||
class="flex w-full items-center gap-1.5 rounded px-2 py-0.5 text-left text-[11px]"
|
||||
:class="ide.activeDockSessionId === s.id ? 'bg-surface-2 text-fg' : 'text-fg-muted hover:bg-surface-2/60'"
|
||||
:title="sessionTitle(s)"
|
||||
@click="ide.openTerminal(s.id)"
|
||||
@click="(e: MouseEvent) => ide.openTerminal(s.id, { split: e.altKey })"
|
||||
>
|
||||
<SessionStateBadge :session="s" />
|
||||
<span class="min-w-0 truncate font-mono" :class="s.live ? '' : 'text-fg-subtle'">{{ sessionLabel(s, worktrees) }}</span>
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
<!-- Pas d'index Git sur mobile : c'est une affordance de la sidebar desktop. Sur téléphone,
|
||||
le panneau 'changes' est rendu par EditorArea, qui suit `ide.centerMode`. -->
|
||||
<ProjectTree v-if="ide.mobilePanel === 'explorer'" />
|
||||
<TerminalDock v-else-if="ide.mobilePanel === 'terminal'" />
|
||||
<TerminalDock v-else-if="ide.mobilePanel === 'terminal'" single />
|
||||
<SessionsPanel v-else-if="ide.mobilePanel === 'sessions'" />
|
||||
<GroupsPanel v-else-if="ide.mobilePanel === 'groups'" />
|
||||
<EditorArea v-else />
|
||||
@@ -50,7 +50,7 @@
|
||||
</main>
|
||||
|
||||
<template v-if="ide.bottomVisible">
|
||||
<PanelSplitter v-model="ide.bottomHeight" axis="y" :min="120" :max="640" invert />
|
||||
<PanelSplitter v-model="ide.bottomHeight" axis="y" :min="DOCK_MIN_HEIGHT" :max="dockMaxHeight(viewportHeight)" invert />
|
||||
<section class="shrink-0 overflow-hidden border-t border-border" :style="{ height: `${ide.bottomHeight}px` }">
|
||||
<TerminalDock />
|
||||
</section>
|
||||
@@ -77,6 +77,7 @@ import { useI18n } from 'vue-i18n';
|
||||
import { Boxes, FileCode, FolderTree, GitCompare, LifeBuoy, List, LogOut, MoreVertical, Settings, SquareTerminal } from '@lucide/vue';
|
||||
import { decodeWtKey } from '@arboretum/shared';
|
||||
import { useIdeStore, wtKey } from '../../stores/ide';
|
||||
import { DOCK_MIN_HEIGHT, dockMaxHeight, dockOpenHeight } from '../../lib/dock-model';
|
||||
import { useWorktreesStore } from '../../stores/worktrees';
|
||||
import { useSessionsStore } from '../../stores/sessions';
|
||||
import { useModalsStore } from '../../stores/modals';
|
||||
@@ -121,9 +122,14 @@ let mql: MediaQueryList | null = null;
|
||||
const syncMobile = (): void => {
|
||||
isMobile.value = !!mql?.matches;
|
||||
};
|
||||
/** Hauteur de fenêtre, suivie : les bornes du dock en dérivent (un plafond figé était trop bas). */
|
||||
const viewportHeight = ref(1000);
|
||||
// Les tailles de panneaux sont persistées : une fenêtre plus petite qu'à la session précédente
|
||||
// pouvait faire sortir la barre de statut du cadre. On reclampe au montage et à chaque resize.
|
||||
const clampPanels = (): void => ide.clampToViewport(window.innerWidth, window.innerHeight);
|
||||
const clampPanels = (): void => {
|
||||
viewportHeight.value = window.innerHeight;
|
||||
ide.clampToViewport(window.innerWidth, window.innerHeight);
|
||||
};
|
||||
onMounted(() => {
|
||||
mql = window.matchMedia('(max-width: 767px)');
|
||||
syncMobile();
|
||||
@@ -131,6 +137,20 @@ onMounted(() => {
|
||||
clampPanels();
|
||||
window.addEventListener('resize', clampPanels);
|
||||
});
|
||||
|
||||
// Ouverture du dock, ou apparition d'une colonne : on garantit une hauteur exploitable sans JAMAIS
|
||||
// réduire celle que l'utilisateur a réglée à la main. À 240 px un terminal n'affiche qu'une
|
||||
// vingtaine de lignes, ce qui casse le rendu d'un TUI, et devient intenable à deux côte à côte.
|
||||
// Côté vue et pas côté store : le store ne connaît pas le viewport (il tourne aussi sous node).
|
||||
watch(
|
||||
() => [ide.bottomVisible, ide.dockColumns.length] as const,
|
||||
([visible, columns], previous) => {
|
||||
if (!visible) return;
|
||||
const [wasVisible, previousColumns] = previous ?? [false, 0];
|
||||
if (visible === wasVisible && columns <= previousColumns) return;
|
||||
ide.bottomHeight = Math.max(ide.bottomHeight, dockOpenHeight(window.innerHeight));
|
||||
},
|
||||
);
|
||||
onBeforeUnmount(() => {
|
||||
mql?.removeEventListener('change', syncMobile);
|
||||
window.removeEventListener('resize', clampPanels);
|
||||
|
||||
@@ -32,8 +32,15 @@ const label = props.label ?? t('ide.resizePanel');
|
||||
|
||||
const { onPointerDown } = useSplitter({
|
||||
axis: props.axis,
|
||||
min: props.min,
|
||||
max: props.max,
|
||||
// Bornes en GETTERS, pas par valeur : elles sont désormais dérivées du viewport (plafond du dock)
|
||||
// et de la largeur mesurée de la piste (colonnes de terminaux). Capturées au setup, un drag
|
||||
// continuait de clamper sur les bornes du PREMIER rendu, alors que le clavier lisait les vraies.
|
||||
get min() {
|
||||
return props.min;
|
||||
},
|
||||
get max() {
|
||||
return props.max;
|
||||
},
|
||||
invert: props.invert,
|
||||
get: () => size.value,
|
||||
set: (v) => {
|
||||
|
||||
@@ -61,7 +61,7 @@
|
||||
class="flex w-full items-center gap-1.5 rounded py-0.5 pr-2 pl-9 text-left text-[11px] hover:bg-surface-2/60"
|
||||
:class="ide.activeDockSessionId === s.id ? 'bg-surface-2 text-fg' : 'text-fg-muted'"
|
||||
:title="sessionTitle(s)"
|
||||
@click="ide.openTerminal(s.id)"
|
||||
@click="(e: MouseEvent) => ide.openTerminal(s.id, { split: e.altKey })"
|
||||
>
|
||||
<SessionStateBadge :session="s" />
|
||||
<span class="min-w-0 truncate font-mono">{{ s.title ?? s.command }}</span>
|
||||
@@ -113,6 +113,7 @@ import { sessionBelongsToWorktree, type RepoSummary, type SessionSummary, type W
|
||||
import { ApiError } from '../../lib/api';
|
||||
import { useIdeStore } from '../../stores/ide';
|
||||
import { useWorktreesStore } from '../../stores/worktrees';
|
||||
import { useContextScope } from '../../composables/useContextScope';
|
||||
import { useSessionsStore } from '../../stores/sessions';
|
||||
import { useGroupsStore } from '../../stores/groups';
|
||||
import { useToastsStore } from '../../stores/toasts';
|
||||
@@ -130,6 +131,7 @@ const props = defineProps<{ repo: RepoSummary }>();
|
||||
const { t } = useI18n();
|
||||
const ide = useIdeStore();
|
||||
const worktrees = useWorktreesStore();
|
||||
const { inScope, scoped } = useContextScope();
|
||||
const sessions = useSessionsStore();
|
||||
const groups = useGroupsStore();
|
||||
const toasts = useToastsStore();
|
||||
@@ -249,6 +251,8 @@ function openWtMenu(e: MouseEvent, wt: WorktreeSummary): void {
|
||||
// Le détail git vit désormais dans la zone centrale : on rend le worktree actif, on déplie son bloc
|
||||
// et on bascule la vue Changements au premier plan (la sidebar n'en garde que l'index).
|
||||
function openGitPanel(wt: WorktreeSummary): void {
|
||||
// Hors portée courante (on suit un terminal ailleurs) : on élargit, sinon le clic n'ouvre rien.
|
||||
if (scoped.value && !inScope.value({ repoId: wt.repoId, wtPath: wt.path })) ide.changesScope = 'all';
|
||||
ide.openChanges(wt.repoId, wt.path);
|
||||
}
|
||||
|
||||
|
||||
@@ -60,6 +60,7 @@ import {
|
||||
MoreHorizontal,
|
||||
MoreVertical,
|
||||
SquareTerminal,
|
||||
SquareSplitHorizontal,
|
||||
Eye,
|
||||
EyeOff,
|
||||
Trash2,
|
||||
@@ -100,7 +101,9 @@ const rows = computed(() => store.sessions);
|
||||
const hasDiscovered = computed(() => store.sessions.some((s) => s.source === 'discovered' && !s.hidden));
|
||||
|
||||
function onRowClick(e: MouseEvent, s: SessionSummary): void {
|
||||
if (s.live || s.attachable) ide.openTerminal(s.id);
|
||||
// Alt+clic : ouvrir dans une colonne à côté plutôt qu'en onglet (raccourci du dock, sans
|
||||
// raccourci clavier global : un TUI mange les combos, et le handler de la palette est en capture).
|
||||
if (s.live || s.attachable) ide.openTerminal(s.id, { split: e.altKey });
|
||||
else openRowMenu(e, s);
|
||||
}
|
||||
|
||||
@@ -118,6 +121,9 @@ function menuFor(s: SessionSummary): ContextMenuItem[] {
|
||||
const items: ContextMenuItem[] = [];
|
||||
if (s.attachable) {
|
||||
items.push({ label: t('sessions.open'), icon: SquareTerminal, onSelect: () => ide.openTerminal(s.id) });
|
||||
if (ide.canSplitTerminal || ide.dockSessionIds.length === 0) {
|
||||
items.push({ label: t('ide.openTerminalBeside'), icon: SquareSplitHorizontal, onSelect: () => ide.openTerminal(s.id, { split: true }) });
|
||||
}
|
||||
items.push({ label: t('sessions.kill'), icon: Trash2, danger: true, onSelect: () => confirmKill(s) });
|
||||
} else if (s.live) {
|
||||
items.push({ label: t('sessions.observe'), icon: Eye, onSelect: () => ide.openTerminal(s.id) });
|
||||
|
||||
@@ -1,22 +1,39 @@
|
||||
<template>
|
||||
<div class="flex h-full min-h-0 flex-col bg-surface-0">
|
||||
<TerminalDockTabs />
|
||||
<div class="relative min-h-0 flex-1">
|
||||
<!-- toutes les sessions restent montées (v-show) pour préserver l'attache WS ; seule l'active
|
||||
est visible. Fermer un onglet démonte réellement la TerminalView -> détache propre. -->
|
||||
<div
|
||||
v-for="sid in ide.dockSessionIds"
|
||||
v-show="sid === ide.activeDockSessionId"
|
||||
:key="sid"
|
||||
class="absolute inset-0 flex flex-col"
|
||||
>
|
||||
<DialogPrompt v-if="isWaiting(sid)" :session="sessionOf(sid)!" class="px-2 pt-2" />
|
||||
<div class="min-h-0 flex-1">
|
||||
<TerminalView :session-id="sid" :mode="modeOf(sid)" />
|
||||
<!-- Mobile : le dock occupe tout l'écran, une seule colonne visuelle. L'ÉTAT des colonnes n'est
|
||||
pas touché, sinon une rotation d'écran détruirait la mise en page du bureau. -->
|
||||
<template v-if="single">
|
||||
<TerminalDockTabs :session-ids="ide.dockSessionIds" :active-session-id="ide.activeDockSessionId" />
|
||||
<div class="relative min-h-0 flex-1">
|
||||
<div v-for="sid in ide.dockSessionIds" v-show="sid === ide.activeDockSessionId" :key="sid" class="absolute inset-0">
|
||||
<TerminalPane :session-id="sid" />
|
||||
</div>
|
||||
<EmptyState v-if="ide.dockSessionIds.length === 0" :icon="SquareTerminal" :title="t('ide.noTerminal')" :hint="t('ide.noTerminalHint')" class="m-6" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Desktop : une grille de colonnes redimensionnables. Les parts sont en `fr` (l'état est en
|
||||
ratios) et les poignées en `auto` : aucune arithmétique de pixels dans le template. -->
|
||||
<div v-else ref="track" class="grid min-h-0 flex-1" :style="{ gridTemplateColumns: gridTemplate }">
|
||||
<template v-for="(column, i) in ide.dockColumns" :key="column.id">
|
||||
<PanelSplitter
|
||||
v-if="i > 0"
|
||||
axis="x"
|
||||
:model-value="splitPx(i - 1)"
|
||||
:min="splitMin(i - 1)"
|
||||
:max="splitMax(i - 1)"
|
||||
:label="t('ide.resizeColumns')"
|
||||
@update:model-value="(px: number) => ide.setDockColumnSplit(i - 1, px / usableWidth)"
|
||||
/>
|
||||
<TerminalDockColumn
|
||||
:column="column"
|
||||
:active="column.id === ide.activeDockColumnId"
|
||||
:index="i"
|
||||
:last="i === ide.dockColumns.length - 1"
|
||||
/>
|
||||
</template>
|
||||
<EmptyState
|
||||
v-if="ide.dockSessionIds.length === 0"
|
||||
v-if="ide.dockColumns.length === 0"
|
||||
:icon="SquareTerminal"
|
||||
:title="t('ide.noTerminal')"
|
||||
:hint="t('ide.noTerminalHint')"
|
||||
@@ -27,24 +44,49 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// Conteneur du dock terminaux : N colonnes côte à côte (plafond MAX_DOCK_COLUMNS), séparées par des
|
||||
// poignées. La hauteur du dock est pilotée par IdeShell ; la zone centrale au-dessus se réajuste
|
||||
// seule (flex-1), il n'y a donc rien à recalculer ici.
|
||||
import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { SquareTerminal } from '@lucide/vue';
|
||||
import type { SessionSummary } from '@arboretum/shared';
|
||||
import { useIdeStore } from '../../stores/ide';
|
||||
import { useSessionsStore } from '../../stores/sessions';
|
||||
import { MIN_DOCK_COLUMN_RATIO } from '../../lib/dock-model';
|
||||
import TerminalDockTabs from './TerminalDockTabs.vue';
|
||||
import TerminalView from '../TerminalView.vue';
|
||||
import DialogPrompt from '../DialogPrompt.vue';
|
||||
import TerminalDockColumn from './TerminalDockColumn.vue';
|
||||
import TerminalPane from './TerminalPane.vue';
|
||||
import PanelSplitter from './PanelSplitter.vue';
|
||||
import EmptyState from '../ui/EmptyState.vue';
|
||||
|
||||
withDefaults(defineProps<{ single?: boolean }>(), { single: false });
|
||||
|
||||
const { t } = useI18n();
|
||||
const ide = useIdeStore();
|
||||
const sessions = useSessionsStore();
|
||||
const track = useTemplateRef<HTMLDivElement>('track');
|
||||
/** Largeur mesurée de la grille : le pont entre l'état (ratios) et le splitter (pixels). */
|
||||
const trackWidth = ref(0);
|
||||
let observer: ResizeObserver | null = null;
|
||||
|
||||
const sessionOf = (sid: string): SessionSummary | null => sessions.sessions.find((s) => s.id === sid) ?? null;
|
||||
const modeOf = (sid: string): 'interactive' | 'observer' => (sessionOf(sid)?.attachable ? 'interactive' : 'observer');
|
||||
const isWaiting = (sid: string): boolean => {
|
||||
const s = sessionOf(sid);
|
||||
return !!s && s.live && s.activity === 'waiting' && !!s.dialog;
|
||||
};
|
||||
onMounted(() => {
|
||||
if (!track.value) return;
|
||||
trackWidth.value = track.value.clientWidth;
|
||||
observer = new ResizeObserver((entries) => {
|
||||
for (const e of entries) trackWidth.value = e.contentRect.width;
|
||||
});
|
||||
observer.observe(track.value);
|
||||
});
|
||||
onBeforeUnmount(() => observer?.disconnect());
|
||||
|
||||
const gridTemplate = computed(() => ide.dockColumns.map((c) => `${c.ratio}fr`).join(' auto '));
|
||||
|
||||
/** Largeur du trait d'une poignée (`w-1` de PanelSplitter) : elle ne fait pas partie des colonnes. */
|
||||
const SPLITTER_PX = 4;
|
||||
/** Largeur réellement partagée par les colonnes (les poignées prennent leur propre place). */
|
||||
const usableWidth = computed(() => Math.max(1, trackWidth.value - Math.max(0, ide.dockColumns.length - 1) * SPLITTER_PX));
|
||||
|
||||
const cumulative = (index: number): number => ide.dockColumns.slice(0, index + 1).reduce((sum, c) => sum + c.ratio, 0);
|
||||
const splitPx = (index: number): number => Math.round(cumulative(index) * usableWidth.value);
|
||||
const splitMin = (index: number): number =>
|
||||
Math.round((cumulative(index - 1) + MIN_DOCK_COLUMN_RATIO) * usableWidth.value);
|
||||
const splitMax = (index: number): number => Math.round((cumulative(index + 1) - MIN_DOCK_COLUMN_RATIO) * usableWidth.value);
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<!-- L'anneau suit l'ÉTAT (colonne active), pas seulement `focus-within` : il doit rester visible
|
||||
quand on va cliquer dans la sidebar, puisque la frappe reviendra bien dans ce terminal. -->
|
||||
<div
|
||||
class="flex h-full min-h-0 min-w-0 flex-col"
|
||||
:class="[
|
||||
active ? 'ring-1 ring-inset ring-accent/60' : 'focus-within:ring-1 focus-within:ring-inset focus-within:ring-accent/30',
|
||||
// Filet visuel entre colonnes : la poignée de redimensionnement ne se voit qu'au survol, deux
|
||||
// terminaux se touchaient donc sans frontière lisible.
|
||||
index > 0 ? 'border-l border-border' : '',
|
||||
]"
|
||||
:aria-label="t('ide.terminalColumn', { n: index + 1 })"
|
||||
@pointerdown.capture="ide.focusDockColumn(column.id)"
|
||||
>
|
||||
<TerminalDockTabs :session-ids="column.sessionIds" :active-session-id="column.activeSessionId" :first="index === 0" :last="last" />
|
||||
<div class="relative min-h-0 flex-1">
|
||||
<!-- Tous les onglets de la colonne restent MONTÉS (v-show) : l'attache WS et le scrollback
|
||||
survivent au changement d'onglet. Fermer un onglet démonte, donc détache proprement. -->
|
||||
<div v-for="sid in column.sessionIds" v-show="sid === column.activeSessionId" :key="sid" class="absolute inset-0">
|
||||
<TerminalPane :ref="(el) => registerPane(sid, el)" :session-id="sid" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// Une colonne du dock : sa barre d'onglets et ses panes superposés. La frappe doit toujours arriver
|
||||
// dans le terminal visible de la colonne ACTIVE, y compris quand l'activation vient d'un clic
|
||||
// ailleurs (arbre, panneau, palette) : d'où le focus impératif ci-dessous.
|
||||
import { watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import type { DockColumn } from '../../lib/dock-model';
|
||||
import { useIdeStore } from '../../stores/ide';
|
||||
import TerminalDockTabs from './TerminalDockTabs.vue';
|
||||
import TerminalPane from './TerminalPane.vue';
|
||||
|
||||
const props = defineProps<{ column: DockColumn; active: boolean; index: number; last: boolean }>();
|
||||
|
||||
const { t } = useI18n();
|
||||
const ide = useIdeStore();
|
||||
|
||||
interface PaneApi {
|
||||
focus: () => void;
|
||||
refit: () => void;
|
||||
}
|
||||
const panes = new Map<string, PaneApi>();
|
||||
function registerPane(sid: string, el: unknown): void {
|
||||
if (el) panes.set(sid, el as PaneApi);
|
||||
else panes.delete(sid);
|
||||
}
|
||||
|
||||
watch(
|
||||
() => [props.active, props.column.activeSessionId] as const,
|
||||
([isActive, sid]) => {
|
||||
if (!isActive) return;
|
||||
// Le pane vient peut-être d'être révélé : re-mesurer avant de rendre la frappe (xterm mesuré à
|
||||
// 0 tant qu'il était caché donnerait un TUI déformé).
|
||||
const pane = panes.get(sid);
|
||||
pane?.refit();
|
||||
pane?.focus();
|
||||
},
|
||||
);
|
||||
</script>
|
||||
@@ -1,6 +1,8 @@
|
||||
<template>
|
||||
<div class="no-scrollbar flex h-[var(--ide-tab-h)] shrink-0 items-stretch overflow-x-auto border-b border-border bg-surface-1">
|
||||
<div class="flex shrink-0 items-center gap-1.5 px-2 label-mono">
|
||||
<!-- Le titre et les feux tricolores n'appartiennent qu'à la première colonne : répétés, ils
|
||||
mangeraient la place des onglets et brouilleraient la lecture du dock. -->
|
||||
<div v-if="first" class="flex shrink-0 items-center gap-1.5 px-2 label-mono">
|
||||
<span class="flex items-center gap-1" aria-hidden="true">
|
||||
<span class="h-2 w-2 rounded-full bg-danger" />
|
||||
<span class="h-2 w-2 rounded-full bg-warn" />
|
||||
@@ -10,16 +12,27 @@
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-for="sid in ide.dockSessionIds"
|
||||
v-for="sid in sessionIds"
|
||||
:key="sid"
|
||||
class="group flex cursor-pointer items-center gap-1.5 border-l border-border px-2.5 text-xs select-none"
|
||||
:class="sid === ide.activeDockSessionId ? 'bg-surface-0 text-fg' : 'text-fg-muted hover:bg-surface-2/50'"
|
||||
:class="sid === activeSessionId ? 'bg-surface-0 text-fg' : 'text-fg-muted hover:bg-surface-2/50'"
|
||||
:title="titleFor(sid)"
|
||||
@click="ide.focusTerminal(sid)"
|
||||
@mousedown.middle.prevent="ide.closeTerminal(sid)"
|
||||
>
|
||||
<SessionStateBadge v-if="sessionOf(sid)" :session="sessionOf(sid)!" />
|
||||
<span class="truncate font-mono">{{ titleFor(sid) }}</span>
|
||||
<button
|
||||
v-if="sessionIds.length > 1"
|
||||
type="button"
|
||||
class="flex h-4 w-4 shrink-0 items-center justify-center rounded opacity-0 group-hover:opacity-100 hover:bg-surface-3"
|
||||
:class="canSplit ? '' : 'cursor-not-allowed opacity-40 group-hover:opacity-40'"
|
||||
:disabled="!canSplit"
|
||||
:title="canSplit ? t('ide.splitTerminal') : t('ide.splitTerminalFull')"
|
||||
@click.stop="ide.moveTerminal(sid, { split: true })"
|
||||
>
|
||||
<SquareSplitHorizontal :size="13" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="ml-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded opacity-0 group-hover:opacity-100 hover:bg-surface-3"
|
||||
@@ -30,9 +43,21 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Fusion et repli ne concernent que la dernière colonne : sinon trois chevrons s'alignent. -->
|
||||
<button
|
||||
v-if="last && ide.dockColumns.length > 1"
|
||||
type="button"
|
||||
class="ml-auto shrink-0 px-2 text-fg-subtle transition-colors hover:bg-surface-2 hover:text-fg"
|
||||
:title="t('ide.mergeColumns')"
|
||||
@click="ide.mergeDockColumns()"
|
||||
>
|
||||
<Columns2 :size="14" />
|
||||
</button>
|
||||
<button
|
||||
v-if="last"
|
||||
type="button"
|
||||
class="shrink-0 px-2 text-fg-subtle transition-colors hover:bg-surface-2 hover:text-fg"
|
||||
:class="ide.dockColumns.length > 1 ? '' : 'ml-auto'"
|
||||
:title="t('common.close')"
|
||||
@click="ide.toggleBottom()"
|
||||
>
|
||||
@@ -42,8 +67,11 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// Barre d'onglets d'UNE colonne du dock. En mode `single` (mobile), la colonne couvre tout le dock :
|
||||
// on lui passe alors la liste complète des sessions.
|
||||
import { computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { ChevronDown, X } from '@lucide/vue';
|
||||
import { ChevronDown, Columns2, SquareSplitHorizontal, X } from '@lucide/vue';
|
||||
import type { SessionSummary } from '@arboretum/shared';
|
||||
import { useIdeStore } from '../../stores/ide';
|
||||
import { useSessionsStore } from '../../stores/sessions';
|
||||
@@ -51,11 +79,27 @@ import { useWorktreesStore } from '../../stores/worktrees';
|
||||
import { sessionLabel } from '../../lib/session-label';
|
||||
import SessionStateBadge from '../SessionStateBadge.vue';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
sessionIds: string[];
|
||||
activeSessionId: string | null;
|
||||
/** première colonne : porte le titre du dock. */
|
||||
first?: boolean;
|
||||
/** dernière colonne : porte les actions globales (fusion, repli). */
|
||||
last?: boolean;
|
||||
}>(),
|
||||
{ first: true, last: true },
|
||||
);
|
||||
|
||||
const { t } = useI18n();
|
||||
const ide = useIdeStore();
|
||||
const sessions = useSessionsStore();
|
||||
const worktrees = useWorktreesStore();
|
||||
|
||||
const canSplit = computed(() => ide.canSplitTerminal);
|
||||
const sessionIds = computed(() => props.sessionIds);
|
||||
const activeSessionId = computed(() => props.activeSessionId);
|
||||
|
||||
const sessionOf = (sid: string): SessionSummary | null => sessions.sessions.find((s) => s.id === sid) ?? null;
|
||||
|
||||
// Libellé compact, mutualisé avec les panneaux (lib/session-label) : le calcul était dupliqué ici, avec
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<!-- Tant que la liste des sessions n'est pas revenue, on n'attache RIEN : `attachable` serait lu
|
||||
sur une liste vide, l'attache partirait en mode observateur (lecture seule) et le terminal
|
||||
resterait muet pour toujours, sans que rien ne le dise. -->
|
||||
<div v-if="!sessions.loaded" class="flex h-full items-center justify-center px-4">
|
||||
<SkeletonRow class="w-full max-w-md" />
|
||||
</div>
|
||||
<EmptyState v-else-if="!session" :icon="SquareTerminal" :title="t('terminal.sessionEnded')" class="m-6" />
|
||||
<div v-else class="flex h-full min-h-0 flex-col">
|
||||
<DialogPrompt v-if="isWaiting" :session="session" class="px-2 pt-2" />
|
||||
<div class="min-h-0 flex-1">
|
||||
<TerminalView ref="view" :key="`${sessionId}|${mode}`" :session-id="sessionId" :mode="mode" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// Un pane du dock : le dialogue en attente (réponse sans clavier) au-dessus du terminal.
|
||||
// Extrait de TerminalDock pour qu'une colonne puisse en empiler plusieurs, et pour exposer au
|
||||
// parent le focus du terminal (la frappe doit suivre la colonne active).
|
||||
import { computed, useTemplateRef } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { SquareTerminal } from '@lucide/vue';
|
||||
import { useSessionsStore } from '../../stores/sessions';
|
||||
import TerminalView from '../TerminalView.vue';
|
||||
import DialogPrompt from '../DialogPrompt.vue';
|
||||
import EmptyState from '../ui/EmptyState.vue';
|
||||
import SkeletonRow from '../ui/SkeletonRow.vue';
|
||||
|
||||
const props = defineProps<{ sessionId: string }>();
|
||||
|
||||
const { t } = useI18n();
|
||||
const sessions = useSessionsStore();
|
||||
const view = useTemplateRef<{ focus: () => void; refit: () => void }>('view');
|
||||
|
||||
const session = computed(() => sessions.sessions.find((s) => s.id === props.sessionId) ?? null);
|
||||
// Une session non attachable (découverte, ou morte) reste lisible : on l'ouvre en observateur.
|
||||
const mode = computed<'interactive' | 'observer'>(() => (session.value?.attachable ? 'interactive' : 'observer'));
|
||||
const isWaiting = computed(() => {
|
||||
const s = session.value;
|
||||
return !!s && s.live && s.activity === 'waiting' && !!s.dialog;
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
focus: (): void => view.value?.focus(),
|
||||
refit: (): void => view.value?.refit(),
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,73 @@
|
||||
import { computed, type ComputedRef } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useIdeStore } from '../stores/ide';
|
||||
import { useSessionsStore } from '../stores/sessions';
|
||||
import { useWorktreesStore } from '../stores/worktrees';
|
||||
import { useGroupsStore } from '../stores/groups';
|
||||
import { resolveScope, SCOPE_ALL, scopeContains, type ContextScope } from '../lib/context-scope';
|
||||
|
||||
/**
|
||||
* Portée de travail courante, dérivée des données live. Le store IDE ne persiste que la PRÉFÉRENCE
|
||||
* (`changesScope`) : une portée persistée finirait par désigner un groupe ou un worktree disparu.
|
||||
*
|
||||
* Sans état interne : appelable par plusieurs composants, chacun ayant son cache de computed sur les
|
||||
* mêmes dépendances (le coût est négligeable, et un singleton de module ne marcherait pas ici,
|
||||
* puisque ces getters dépendent de Pinia).
|
||||
*/
|
||||
export interface ContextScopeApi {
|
||||
/** Portée EFFECTIVE, jamais nulle : 'all' est le repli. */
|
||||
scope: ComputedRef<ContextScope>;
|
||||
/** Portée que le terminal focalisé imposerait, même en mode « tout voir » : sert à libeller la bascule. */
|
||||
followed: ComputedRef<ContextScope | null>;
|
||||
/** Libellé humain de la portée effective. */
|
||||
label: ComputedRef<string>;
|
||||
/** true quand la vue est réellement restreinte (donc « rien à voir » peut être trompeur). */
|
||||
scoped: ComputedRef<boolean>;
|
||||
/** Prédicat prêt à injecter dans `groupWorktreesByRepo` / `pendingWorktreeCount`. */
|
||||
inScope: ComputedRef<(w: { repoId: string; wtPath: string }) => boolean>;
|
||||
toggle: () => void;
|
||||
}
|
||||
|
||||
export function useContextScope(): ContextScopeApi {
|
||||
const { t } = useI18n();
|
||||
const ide = useIdeStore();
|
||||
const sessions = useSessionsStore();
|
||||
const worktrees = useWorktreesStore();
|
||||
const groups = useGroupsStore();
|
||||
|
||||
const groupRefs = computed(() => groups.groups.map((g) => ({ id: g.id, repoIds: g.repoIds })));
|
||||
|
||||
const followed = computed<ContextScope | null>(() => {
|
||||
const sid = ide.activeDockSessionId;
|
||||
const session = sid ? (sessions.sessions.find((s) => s.id === sid) ?? null) : null;
|
||||
return resolveScope(session, worktrees.worktrees, groupRefs.value);
|
||||
});
|
||||
|
||||
const scope = computed<ContextScope>(() => {
|
||||
if (ide.changesScope === 'all') return SCOPE_ALL;
|
||||
// SEUL le terminal focalisé restreint la vue. Se rabattre sur `activeContext` (l'onglet éditeur)
|
||||
// serait un rétrécissement surprise : ouvrir un fichier réduirait la vue Changements à ce projet
|
||||
// alors que son intérêt est justement d'être multi-projet. Pas de terminal = pas de contexte de
|
||||
// travail = tout voir. Les colonnes du dock étant persistées, la portée survit à un dock replié.
|
||||
return followed.value ?? SCOPE_ALL;
|
||||
});
|
||||
|
||||
const scoped = computed(() => scope.value.kind !== 'all');
|
||||
|
||||
const label = computed(() => {
|
||||
const s = scope.value;
|
||||
if (s.kind === 'all') return t('changes.scope.allLabel');
|
||||
if (s.kind === 'group') {
|
||||
const g = groups.groups.find((x) => x.id === s.groupId);
|
||||
return t('changes.scope.group', { name: g?.label ?? s.groupId });
|
||||
}
|
||||
const wt = worktrees.worktrees.find((w) => w.repoId === s.repoId && w.path === s.wtPath);
|
||||
const repo = worktrees.repos.find((r) => r.id === s.repoId);
|
||||
const branch = wt?.branch ?? s.wtPath.split('/').filter(Boolean).pop() ?? s.wtPath;
|
||||
return repo ? `${repo.label} · ${branch}` : branch;
|
||||
});
|
||||
|
||||
const inScope = computed(() => (w: { repoId: string; wtPath: string }) => scopeContains(scope.value, w, groupRefs.value));
|
||||
|
||||
return { scope, followed, label, scoped, inScope, toggle: () => ide.toggleChangesScope() };
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
import { watch } from 'vue';
|
||||
import { useIdeStore } from '../stores/ide';
|
||||
import { useSessionsStore } from '../stores/sessions';
|
||||
import { useWorktreesStore } from '../stores/worktrees';
|
||||
import { useGroupsStore } from '../stores/groups';
|
||||
import { resolveScope } from '../lib/context-scope';
|
||||
|
||||
/**
|
||||
* Le terminal focalisé impose le contexte de travail (worktree actif). C'était le chaînon manquant :
|
||||
* `openTerminal` / `focusTerminal` ne posent PAS `activeContext`, et ne peuvent pas le faire, le store
|
||||
* IDE ne connaissant ni les cwd ni les groupes. La corrélation vit donc ici, où les données live sont
|
||||
* disponibles.
|
||||
*
|
||||
* PROPRIÉTAIRE UNIQUE de cette écriture : monté une seule fois dans la coquille IDE. Deux montages
|
||||
* se battraient pour `activeContext`.
|
||||
*
|
||||
* Cas d'une session de GROUPE : on ne touche pas à `activeContext` (un groupe n'a pas de worktree
|
||||
* unique, et écraser le contexte ferait perdre le fichier ouvert) ; la portée de groupe est portée par
|
||||
* `useContextScope`, qui lit le terminal focalisé directement.
|
||||
*
|
||||
* Effet de bord voulu : la barre de statut (badge git) et la priorité 1 des abonnements FS suivent
|
||||
* désormais le terminal, sans une ligne de plus dans ces fichiers.
|
||||
*/
|
||||
export function useTerminalContext(): void {
|
||||
const ide = useIdeStore();
|
||||
const sessions = useSessionsStore();
|
||||
const worktrees = useWorktreesStore();
|
||||
const groups = useGroupsStore();
|
||||
|
||||
watch(
|
||||
// La liste des sessions compte comme dépendance : au boot, le terminal est connu avant sa session.
|
||||
() => [ide.activeDockSessionId, sessions.sessions.length, worktrees.worktrees.length] as const,
|
||||
([sid]) => {
|
||||
if (!sid) return;
|
||||
const session = sessions.sessions.find((s) => s.id === sid);
|
||||
if (!session) return;
|
||||
const scope = resolveScope(
|
||||
session,
|
||||
worktrees.worktrees,
|
||||
groups.groups.map((g) => ({ id: g.id, repoIds: g.repoIds })),
|
||||
);
|
||||
if (scope?.kind !== 'worktree') return;
|
||||
if (ide.activeContext?.repoId === scope.repoId && ide.activeContext?.wtPath === scope.wtPath) return;
|
||||
ide.setActiveWorktree(scope.repoId, scope.wtPath);
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
}
|
||||
@@ -1,6 +1,8 @@
|
||||
import { computed, onScopeDispose, watch } from 'vue';
|
||||
import { parseWtKey, useIdeStore } from '../stores/ide';
|
||||
import { useWorktreesStore } from '../stores/worktrees';
|
||||
import { useSessionsStore } from '../stores/sessions';
|
||||
import { worktreesForSession } from '../lib/context-scope';
|
||||
import { wsClient } from '../lib/ws-client';
|
||||
|
||||
/**
|
||||
@@ -27,6 +29,7 @@ export const MAX_WATCHED = 40;
|
||||
export function useWatchedWorktrees(): void {
|
||||
const ide = useIdeStore();
|
||||
const worktrees = useWorktreesStore();
|
||||
const sessions = useSessionsStore();
|
||||
|
||||
/** Abonnements en cours, clé `repoId\0path` → fonction de désabonnement. */
|
||||
const active = new Map<string, () => void>();
|
||||
@@ -43,6 +46,16 @@ export function useWatchedWorktrees(): void {
|
||||
// Le worktree actif d'abord : il doit survivre au plafond.
|
||||
const ctx = ide.activeContext;
|
||||
if (ctx) add(ctx.repoId, ctx.wtPath);
|
||||
// Worktrees des terminaux VISIBLES (l'onglet actif de chaque colonne du dock) : on travaille
|
||||
// dedans, donc leur statut git doit rester frais, sinon les compteurs du bloc Changements d'à
|
||||
// côté restent figés pendant la session. Une session de groupe compte pour TOUS ses répertoires
|
||||
// reliés. Le serveur épingle déjà le watcher FS d'une session vivante (`syncSessionPin`) ; ce
|
||||
// `watch` client sert à RECEVOIR l'événement, poussé de façon ciblée aux seuls abonnés.
|
||||
for (const sid of ide.visibleDockSessionIds) {
|
||||
const session = sessions.sessions.find((s) => s.id === sid);
|
||||
if (!session) continue;
|
||||
for (const w of worktreesForSession(session, worktrees.worktrees)) add(w.repoId, w.path);
|
||||
}
|
||||
// Blocs dépliés de la vue Changements : ils affichent une liste de fichiers modifiés, donc ils
|
||||
// ont besoin du même jeton d'invalidation que l'arbre de fichiers. Priorité juste après le
|
||||
// worktree actif : en mode « changements », c'est précisément ce que l'utilisateur regarde.
|
||||
|
||||
@@ -260,6 +260,12 @@ export default {
|
||||
noFileHint: 'Pick a file in the tree to edit it, or a changed file to view its diff.',
|
||||
terminals: 'Terminals',
|
||||
resizePanel: 'Resize panel',
|
||||
resizeColumns: 'Resize terminal columns',
|
||||
splitTerminal: 'Open beside',
|
||||
splitTerminalFull: 'Three columns at most',
|
||||
mergeColumns: 'Merge columns',
|
||||
terminalColumn: 'Terminal column {n}',
|
||||
openTerminalBeside: 'Open a terminal beside',
|
||||
loadFailed: 'Could not load.',
|
||||
noTerminal: 'No terminal open',
|
||||
noTerminalHint: 'Open a Claude session from the tree to attach a terminal here.',
|
||||
@@ -346,6 +352,14 @@ export default {
|
||||
repoDirty: 'no change | 1 changed file | {n} changed files',
|
||||
allClean: 'Everything is committed and pushed',
|
||||
allCleanHint: 'No uncommitted change in your open projects. Show clean worktrees to review them anyway.',
|
||||
scope: {
|
||||
follow: 'Follow the focused terminal',
|
||||
all: 'Show every project',
|
||||
allLabel: 'All projects',
|
||||
group: 'Group {name}',
|
||||
emptyInScope: 'Nothing to review in this scope',
|
||||
emptyInScopeHint: 'This terminal works on a clean tree. Show every project to see the rest.',
|
||||
},
|
||||
showClean: 'Show clean worktrees',
|
||||
hideClean: 'Hide clean worktrees',
|
||||
expandAll: 'Expand all',
|
||||
@@ -437,6 +451,9 @@ export default {
|
||||
openFullscreen: 'Open fullscreen',
|
||||
group: 'Group',
|
||||
covers: 'covers',
|
||||
connecting: 'Connecting to the terminal...',
|
||||
waitingForOutput: 'No output received yet.',
|
||||
refreshScreen: 'Refresh screen',
|
||||
},
|
||||
push: {
|
||||
enable: 'Enable notifications',
|
||||
@@ -568,6 +585,7 @@ export default {
|
||||
newSession: 'New session',
|
||||
addRepo: 'Add repo',
|
||||
newGroup: 'New group',
|
||||
splitTerminal: 'Split the terminal dock',
|
||||
},
|
||||
},
|
||||
toast: {
|
||||
|
||||
@@ -262,6 +262,12 @@ const fr: typeof en = {
|
||||
noFileHint: 'Choisissez un fichier dans l’arbre pour l’éditer, ou un fichier modifié pour voir son diff.',
|
||||
terminals: 'Terminaux',
|
||||
resizePanel: 'Redimensionner le panneau',
|
||||
resizeColumns: 'Redimensionner les colonnes de terminaux',
|
||||
splitTerminal: 'Ouvrir à côté',
|
||||
splitTerminalFull: 'Trois colonnes au maximum',
|
||||
mergeColumns: 'Fusionner les colonnes',
|
||||
terminalColumn: 'Colonne de terminaux {n}',
|
||||
openTerminalBeside: 'Ouvrir un terminal à côté',
|
||||
loadFailed: 'Chargement impossible.',
|
||||
noTerminal: 'Aucun terminal ouvert',
|
||||
noTerminalHint: 'Ouvrez une session Claude depuis l’arbre pour y attacher un terminal.',
|
||||
@@ -348,6 +354,14 @@ const fr: typeof en = {
|
||||
repoDirty: 'aucun changement | 1 fichier modifié | {n} fichiers modifiés',
|
||||
allClean: 'Tout est committé et poussé',
|
||||
allCleanHint: 'Aucun changement non committé dans vos projets ouverts. Affichez les worktrees propres pour les relire quand même.',
|
||||
scope: {
|
||||
follow: 'Suivre le terminal actif',
|
||||
all: 'Voir tous les projets',
|
||||
allLabel: 'Tous les projets',
|
||||
group: 'Groupe {name}',
|
||||
emptyInScope: 'Rien à traiter dans cette portée',
|
||||
emptyInScopeHint: 'Ce terminal travaille sur un arbre propre. Affichez tous les projets pour voir le reste.',
|
||||
},
|
||||
showClean: 'Afficher les worktrees propres',
|
||||
hideClean: 'Masquer les worktrees propres',
|
||||
expandAll: 'Tout déplier',
|
||||
@@ -440,6 +454,9 @@ const fr: typeof en = {
|
||||
openFullscreen: 'Ouvrir en plein écran',
|
||||
group: 'Groupe',
|
||||
covers: 'couvre',
|
||||
connecting: 'Connexion au terminal...',
|
||||
waitingForOutput: 'Aucune sortie reçue pour l’instant.',
|
||||
refreshScreen: 'Rafraîchir l’écran',
|
||||
},
|
||||
push: {
|
||||
enable: 'Activer les notifications',
|
||||
@@ -571,6 +588,7 @@ const fr: typeof en = {
|
||||
newSession: 'Nouvelle session',
|
||||
addRepo: 'Ajouter un dépôt',
|
||||
newGroup: 'Nouveau groupe',
|
||||
splitTerminal: 'Diviser le dock terminal',
|
||||
},
|
||||
},
|
||||
toast: {
|
||||
|
||||
@@ -36,6 +36,13 @@ export interface GroupOptions {
|
||||
showClean: boolean;
|
||||
/** Worktree actif : toujours affiché, même propre, pour que la vue ne se vide pas après un commit. */
|
||||
active: { repoId: string; wtPath: string } | null;
|
||||
/**
|
||||
* Filtre de PORTÉE (terminal focalisé, ou son groupe). Il s'applique en ET : un worktree hors
|
||||
* portée reste masqué même s'il a du travail en attente, et même s'il est le worktree actif, sinon
|
||||
* une portée de groupe laisserait fuir un worktree étranger. Prédicat INJECTÉ : ce modèle n'a pas
|
||||
* à connaître les groupes. Absent = aucun filtrage, donc le comportement d'origine.
|
||||
*/
|
||||
inScope?: (w: { repoId: string; wtPath: string }) => boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -52,9 +59,10 @@ export function groupWorktreesByRepo(
|
||||
for (const repo of repos) {
|
||||
const kept = forRepo(repo.id).filter(
|
||||
(w) =>
|
||||
opts.showClean ||
|
||||
hasPendingWork(w.git) ||
|
||||
(!!opts.active && opts.active.repoId === w.repoId && opts.active.wtPath === w.path),
|
||||
(!opts.inScope || opts.inScope({ repoId: w.repoId, wtPath: w.path })) &&
|
||||
(opts.showClean ||
|
||||
hasPendingWork(w.git) ||
|
||||
(!!opts.active && opts.active.repoId === w.repoId && opts.active.wtPath === w.path)),
|
||||
);
|
||||
if (kept.length === 0) continue;
|
||||
groups.push({
|
||||
@@ -76,11 +84,22 @@ export function sortForIndex(list: WorktreeSummary[]): WorktreeSummary[] {
|
||||
);
|
||||
}
|
||||
|
||||
/** Nombre de worktrees à traiter, tous dépôts visibles confondus (badge de la barre d'activité). */
|
||||
export function pendingWorktreeCount(repos: RepoSummary[], forRepo: (repoId: string) => WorktreeSummary[]): number {
|
||||
/**
|
||||
* Nombre de worktrees à traiter, tous dépôts visibles confondus. `inScope` optionnel pour le compteur
|
||||
* d'en-tête de la vue Changements ; le badge de la barre d'activité l'omet volontairement : c'est une
|
||||
* NOTIFICATION, sa raison d'être est de signaler le travail qu'on n'est pas en train de regarder.
|
||||
*/
|
||||
export function pendingWorktreeCount(
|
||||
repos: RepoSummary[],
|
||||
forRepo: (repoId: string) => WorktreeSummary[],
|
||||
inScope?: (w: { repoId: string; wtPath: string }) => boolean,
|
||||
): number {
|
||||
let n = 0;
|
||||
for (const repo of repos) {
|
||||
for (const w of forRepo(repo.id)) if (hasPendingWork(w.git)) n++;
|
||||
for (const w of forRepo(repo.id)) {
|
||||
if (inScope && !inScope({ repoId: w.repoId, wtPath: w.path })) continue;
|
||||
if (hasPendingWork(w.git)) n++;
|
||||
}
|
||||
}
|
||||
return n;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,85 @@
|
||||
// Portée de travail déduite du terminal focalisé : « je regarde ce terminal, montre-moi SES fichiers
|
||||
// et SES commits ». Sans cela, la vue Changements listait tous les projets ouverts et on se perdait
|
||||
// entre eux.
|
||||
//
|
||||
// Fonctions PURES, sans store ni réseau. La corrélation chemin ↔ worktree reste celle de
|
||||
// @arboretum/shared (path-match) : une seule règle pour le daemon, le web et l'extension VS Code.
|
||||
import { findWorktreeForCwd, sessionDirs } from '@arboretum/shared';
|
||||
|
||||
export type ContextScope =
|
||||
| { kind: 'all' }
|
||||
| { kind: 'worktree'; repoId: string; wtPath: string }
|
||||
| { kind: 'group'; groupId: string };
|
||||
|
||||
export const SCOPE_ALL: ContextScope = { kind: 'all' };
|
||||
|
||||
/** Appartenance minimale requise d'un groupe : le modèle n'a pas besoin de tout GroupSummary. */
|
||||
export interface GroupRef {
|
||||
id: string;
|
||||
repoIds: string[];
|
||||
}
|
||||
export interface WorktreeRefLike {
|
||||
repoId: string;
|
||||
path: string;
|
||||
}
|
||||
export interface SessionLike {
|
||||
cwd: string;
|
||||
addedDirs?: string[] | null;
|
||||
groupId?: string | null;
|
||||
}
|
||||
|
||||
const dirsOf = (s: SessionLike): string[] => sessionDirs({ cwd: s.cwd, ...(s.addedDirs ? { addedDirs: s.addedDirs } : {}) });
|
||||
|
||||
/**
|
||||
* Tous les worktrees qu'une session occupe : son cwd et ses répertoires reliés, chacun rattaché au
|
||||
* worktree le plus spécifique qui le contient, dédupliqués. Deux consommateurs : la résolution de
|
||||
* portée ci-dessous, et les abonnements FS (un terminal visible doit rafraîchir son statut git).
|
||||
*/
|
||||
export function worktreesForSession<T extends WorktreeRefLike>(session: SessionLike, all: T[]): T[] {
|
||||
const out: T[] = [];
|
||||
for (const dir of dirsOf(session)) {
|
||||
const w = findWorktreeForCwd(dir, all);
|
||||
if (w && !out.includes(w)) out.push(w);
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
/**
|
||||
* Portée qu'impose une session (règle produit : « terminal actif, sinon groupe ») :
|
||||
* 1. `groupId` renseigné -> GROUPE. Une session de groupe a pour cwd le PARENT COMMUN des dépôts :
|
||||
* le rattacher à un worktree n'aurait aucun sens, on ne consulte donc même pas les chemins.
|
||||
* 2. la session couvre 2 dépôts ou plus -> GROUPE qui les contient TOUS ; à défaut d'un tel groupe,
|
||||
* 'all' (mieux vaut tout montrer que cacher la moitié du travail en cours).
|
||||
* 3. sinon -> le WORKTREE le plus spécifique contenant son cwd (ce qui rattache correctement les
|
||||
* terminaux « Démarrer le projet » lancés dans un sous-répertoire).
|
||||
* 4. session absente, ou cwd hors de tout worktree connu -> null : à l'appelant de se rabattre.
|
||||
* Un `groupId` qui ne correspond à aucun groupe connu donne 'all', jamais une portée vide.
|
||||
*/
|
||||
export function resolveScope(session: SessionLike | null, worktrees: WorktreeRefLike[], groups: GroupRef[]): ContextScope | null {
|
||||
if (!session) return null;
|
||||
if (session.groupId) {
|
||||
return groups.some((g) => g.id === session.groupId) ? { kind: 'group', groupId: session.groupId } : SCOPE_ALL;
|
||||
}
|
||||
const covered = worktreesForSession(session, worktrees);
|
||||
const repoIds = [...new Set(covered.map((w) => w.repoId))];
|
||||
if (repoIds.length > 1) {
|
||||
const common = groups.find((g) => repoIds.every((id) => g.repoIds.includes(id)));
|
||||
return common ? { kind: 'group', groupId: common.id } : SCOPE_ALL;
|
||||
}
|
||||
const only = covered[0];
|
||||
return only ? { kind: 'worktree', repoId: only.repoId, wtPath: only.path } : null;
|
||||
}
|
||||
|
||||
/** Le worktree tombe-t-il dans la portée ? Primitive du filtre de la vue Changements. */
|
||||
export function scopeContains(scope: ContextScope, w: { repoId: string; wtPath: string }, groups: GroupRef[]): boolean {
|
||||
if (scope.kind === 'all') return true;
|
||||
if (scope.kind === 'worktree') return scope.repoId === w.repoId && scope.wtPath === w.wtPath;
|
||||
const group = groups.find((g) => g.id === scope.groupId);
|
||||
return !!group && group.repoIds.includes(w.repoId);
|
||||
}
|
||||
|
||||
/** Worktrees couverts par la portée. */
|
||||
export function worktreesInScope<T extends WorktreeRefLike>(scope: ContextScope, all: T[], groups: GroupRef[]): T[] {
|
||||
if (scope.kind === 'all') return all;
|
||||
return all.filter((w) => scopeContains(scope, { repoId: w.repoId, wtPath: w.path }, groups));
|
||||
}
|
||||
@@ -0,0 +1,255 @@
|
||||
// Algèbre des colonnes du dock terminaux, et géométrie verticale du dock.
|
||||
//
|
||||
// Fonctions PURES : chacune reçoit l'état et rend un NOUVEL état. C'est exactement le contrat d'un
|
||||
// `persistedRef`, dont le watch n'est pas profond : seule une réassignation déclenche l'écriture.
|
||||
//
|
||||
// INVARIANTS (vérifiés par `expectDockInvariants` dans les tests) :
|
||||
// 1. une session vit dans AU PLUS une colonne. Deux panes sur la même session voudraient dire deux
|
||||
// attaches WS : la seconde serait non-controlling et le PTY resterait figé sur la géométrie de
|
||||
// la première, donc affichage déformé garanti.
|
||||
// 2. aucune colonne vide.
|
||||
// 3. `activeSessionId` est toujours membre de `sessionIds`.
|
||||
// 4. `activeColumnId` désigne une colonne existante ; il est null si et seulement si `columns` est vide.
|
||||
// 5. la somme des `ratio` vaut 1, et chaque ratio est >= MIN_DOCK_COLUMN_RATIO.
|
||||
|
||||
export interface DockColumn {
|
||||
/** Id stable : clé de rendu de la colonne, et cible d'un déplacement de pane. */
|
||||
id: string;
|
||||
/** Onglets de la colonne, dans l'ordre d'affichage. */
|
||||
sessionIds: string[];
|
||||
/** Onglet visible de cette colonne. */
|
||||
activeSessionId: string;
|
||||
/** Part de la largeur du dock. Des px seraient faux dès que le dock change de largeur. */
|
||||
ratio: number;
|
||||
}
|
||||
|
||||
export interface DockState {
|
||||
columns: DockColumn[];
|
||||
activeColumnId: string | null;
|
||||
}
|
||||
|
||||
/** Au-delà de trois colonnes, un xterm n'a plus assez de colonnes de texte pour un TUI. */
|
||||
export const MAX_DOCK_COLUMNS = 3;
|
||||
/** Part minimale d'une colonne : borne l'état PERSISTÉ (le splitter clampe en plus, en px). */
|
||||
export const MIN_DOCK_COLUMN_RATIO = 0.15;
|
||||
|
||||
export const EMPTY_DOCK: DockState = { columns: [], activeColumnId: null };
|
||||
|
||||
let idSeq = 0;
|
||||
/**
|
||||
* Id de colonne unique. PAS `crypto.randomUUID` : il exige un contexte sécurisé, or le daemon se
|
||||
* sert très souvent en http simple sur une IP de LAN (accès distant, mode serveur web).
|
||||
*/
|
||||
export function newColumnId(): string {
|
||||
idSeq += 1;
|
||||
return `c${Date.now().toString(36)}${idSeq.toString(36)}`;
|
||||
}
|
||||
|
||||
export function findPane(s: DockState, sessionId: string): { index: number; column: DockColumn } | null {
|
||||
for (const [index, column] of s.columns.entries()) {
|
||||
if (column.sessionIds.includes(sessionId)) return { index, column };
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
export function activeColumnOf(s: DockState): DockColumn | null {
|
||||
return s.columns.find((c) => c.id === s.activeColumnId) ?? null;
|
||||
}
|
||||
|
||||
/** Renormalise les ratios (somme 1, plancher MIN) : appelé après toute création/suppression. */
|
||||
function normalize(columns: DockColumn[]): DockColumn[] {
|
||||
if (columns.length === 0) return [];
|
||||
const floor = Math.min(MIN_DOCK_COLUMN_RATIO, 1 / columns.length);
|
||||
const raised = columns.map((c) => ({ ...c, ratio: Math.max(floor, c.ratio > 0 ? c.ratio : floor) }));
|
||||
const total = raised.reduce((sum, c) => sum + c.ratio, 0);
|
||||
return raised.map((c) => ({ ...c, ratio: c.ratio / total }));
|
||||
}
|
||||
|
||||
/** Recale `activeColumnId` sur une colonne qui existe (ou null quand il n'y en a plus). */
|
||||
function withActiveColumn(columns: DockColumn[], preferredId: string | null): DockState {
|
||||
if (columns.length === 0) return EMPTY_DOCK;
|
||||
const id = columns.some((c) => c.id === preferredId) ? preferredId : columns[0]!.id;
|
||||
return { columns, activeColumnId: id };
|
||||
}
|
||||
|
||||
/**
|
||||
* Ajoute une session au dock.
|
||||
* - `'tab'` : nouvel onglet de la colonne active (comportement historique du dock).
|
||||
* - `'split'` : nouvelle colonne insérée APRÈS l'active, à qui elle prend la moitié de sa part ;
|
||||
* les autres colonnes ne bougent pas.
|
||||
* Une session DÉJÀ ouverte est déplacée, jamais dupliquée (invariant 1). Au plafond de colonnes, un
|
||||
* `'split'` retombe en onglet plutôt que d'échouer sans rien dire.
|
||||
*/
|
||||
export function addPane(s: DockState, sessionId: string, mode: 'tab' | 'split', makeId: () => string = newColumnId): DockState {
|
||||
if (findPane(s, sessionId)) {
|
||||
return mode === 'split' ? movePane(s, sessionId, { split: true }, makeId) : focusPane(s, sessionId);
|
||||
}
|
||||
if (s.columns.length === 0) {
|
||||
const column: DockColumn = { id: makeId(), sessionIds: [sessionId], activeSessionId: sessionId, ratio: 1 };
|
||||
return { columns: [column], activeColumnId: column.id };
|
||||
}
|
||||
const activeIndex = Math.max(
|
||||
0,
|
||||
s.columns.findIndex((c) => c.id === s.activeColumnId),
|
||||
);
|
||||
if (mode === 'tab' || s.columns.length >= MAX_DOCK_COLUMNS) {
|
||||
const columns = s.columns.map((c, i) =>
|
||||
i === activeIndex ? { ...c, sessionIds: [...c.sessionIds, sessionId], activeSessionId: sessionId } : c,
|
||||
);
|
||||
return withActiveColumn(columns, s.columns[activeIndex]!.id);
|
||||
}
|
||||
const host = s.columns[activeIndex]!;
|
||||
const half = host.ratio / 2;
|
||||
const created: DockColumn = { id: makeId(), sessionIds: [sessionId], activeSessionId: sessionId, ratio: half };
|
||||
const columns = [...s.columns];
|
||||
columns[activeIndex] = { ...host, ratio: half };
|
||||
columns.splice(activeIndex + 1, 0, created);
|
||||
return { columns: normalize(columns), activeColumnId: created.id };
|
||||
}
|
||||
|
||||
/** Rend visible un pane et active SA colonne (la frappe doit suivre). */
|
||||
export function focusPane(s: DockState, sessionId: string): DockState {
|
||||
const found = findPane(s, sessionId);
|
||||
if (!found) return s;
|
||||
if (found.column.activeSessionId === sessionId && s.activeColumnId === found.column.id) return s;
|
||||
const columns = s.columns.map((c) => (c.id === found.column.id ? { ...c, activeSessionId: sessionId } : c));
|
||||
return { columns, activeColumnId: found.column.id };
|
||||
}
|
||||
|
||||
export function focusColumn(s: DockState, columnId: string): DockState {
|
||||
if (s.activeColumnId === columnId || !s.columns.some((c) => c.id === columnId)) return s;
|
||||
return { ...s, activeColumnId: columnId };
|
||||
}
|
||||
|
||||
/**
|
||||
* Retire un pane. Une colonne vidée disparaît et lègue sa part à son voisin de gauche (à défaut, de
|
||||
* droite) : la largeur totale reste occupée, sans trou.
|
||||
*/
|
||||
export function closePane(s: DockState, sessionId: string): DockState {
|
||||
const found = findPane(s, sessionId);
|
||||
if (!found) return s;
|
||||
const rest = found.column.sessionIds.filter((id) => id !== sessionId);
|
||||
if (rest.length > 0) {
|
||||
const idx = found.column.sessionIds.indexOf(sessionId);
|
||||
const nextActive =
|
||||
found.column.activeSessionId === sessionId ? (rest[idx] ?? rest[idx - 1] ?? rest[0]!) : found.column.activeSessionId;
|
||||
const columns = s.columns.map((c) => (c.id === found.column.id ? { ...c, sessionIds: rest, activeSessionId: nextActive } : c));
|
||||
return withActiveColumn(columns, s.activeColumnId);
|
||||
}
|
||||
const heirIndex = found.index > 0 ? found.index - 1 : found.index + 1;
|
||||
const columns = s.columns
|
||||
.map((c, i) => (i === heirIndex ? { ...c, ratio: c.ratio + found.column.ratio } : c))
|
||||
.filter((_, i) => i !== found.index);
|
||||
const preferred = s.activeColumnId === found.column.id ? (columns[Math.max(0, Math.min(heirIndex, columns.length - 1))]?.id ?? null) : s.activeColumnId;
|
||||
return withActiveColumn(normalize(columns), preferred);
|
||||
}
|
||||
|
||||
/** Déplace un pane vers une autre colonne, ou dans une colonne neuve détachée à droite. */
|
||||
export function movePane(
|
||||
s: DockState,
|
||||
sessionId: string,
|
||||
target: { columnId: string } | { split: true },
|
||||
makeId: () => string = newColumnId,
|
||||
): DockState {
|
||||
const found = findPane(s, sessionId);
|
||||
if (!found) return s;
|
||||
if ('columnId' in target) {
|
||||
if (target.columnId === found.column.id || !s.columns.some((c) => c.id === target.columnId)) return s;
|
||||
const detached = closePane(s, sessionId);
|
||||
const columns = detached.columns.map((c) =>
|
||||
c.id === target.columnId ? { ...c, sessionIds: [...c.sessionIds, sessionId], activeSessionId: sessionId } : c,
|
||||
);
|
||||
return withActiveColumn(columns, target.columnId);
|
||||
}
|
||||
// Déjà seul dans sa colonne : le détacher ne changerait rien (et créerait une colonne vide).
|
||||
if (found.column.sessionIds.length === 1) return focusPane(s, sessionId);
|
||||
if (s.columns.length >= MAX_DOCK_COLUMNS) return focusPane(s, sessionId);
|
||||
const detached = closePane(s, sessionId);
|
||||
const hostIndex = detached.columns.findIndex((c) => c.id === found.column.id);
|
||||
const anchor = hostIndex >= 0 ? hostIndex : detached.columns.length - 1;
|
||||
const host = detached.columns[anchor]!;
|
||||
const half = host.ratio / 2;
|
||||
const created: DockColumn = { id: makeId(), sessionIds: [sessionId], activeSessionId: sessionId, ratio: half };
|
||||
const columns = [...detached.columns];
|
||||
columns[anchor] = { ...host, ratio: half };
|
||||
columns.splice(anchor + 1, 0, created);
|
||||
return { columns: normalize(columns), activeColumnId: created.id };
|
||||
}
|
||||
|
||||
/**
|
||||
* Déplace la frontière entre les colonnes `index` et `index + 1`. `ratioOfTrack` est la part visée
|
||||
* par le bord droit de la colonne de gauche, mesurée sur la largeur TOTALE. La somme de la PAIRE est
|
||||
* préservée : tirer une poignée ne fait jamais bouger une colonne qu'on n'a pas saisie.
|
||||
*/
|
||||
export function setSplit(s: DockState, index: number, ratioOfTrack: number): DockState {
|
||||
const left = s.columns[index];
|
||||
const right = s.columns[index + 1];
|
||||
if (!left || !right) return s;
|
||||
const before = s.columns.slice(0, index).reduce((sum, c) => sum + c.ratio, 0);
|
||||
const pair = left.ratio + right.ratio;
|
||||
const wanted = ratioOfTrack - before;
|
||||
const leftRatio = Math.min(pair - MIN_DOCK_COLUMN_RATIO, Math.max(MIN_DOCK_COLUMN_RATIO, wanted));
|
||||
const columns = s.columns.map((c, i) => {
|
||||
if (i === index) return { ...c, ratio: leftRatio };
|
||||
if (i === index + 1) return { ...c, ratio: pair - leftRatio };
|
||||
return c;
|
||||
});
|
||||
return { ...s, columns };
|
||||
}
|
||||
|
||||
/**
|
||||
* Réconciliation avec la réalité : sessions mortes retirées, colonnes vidées supprimées, onglets
|
||||
* actifs réparés, ratios renormalisés. Idempotente.
|
||||
*/
|
||||
export function prunePanes(s: DockState, liveSessionIds: Set<string>): DockState {
|
||||
const columns: DockColumn[] = [];
|
||||
for (const c of s.columns) {
|
||||
const sessionIds = c.sessionIds.filter((id) => liveSessionIds.has(id));
|
||||
if (sessionIds.length === 0) continue;
|
||||
const activeSessionId = sessionIds.includes(c.activeSessionId) ? c.activeSessionId : sessionIds[0]!;
|
||||
columns.push({ ...c, sessionIds, activeSessionId });
|
||||
}
|
||||
if (columns.length === s.columns.length && columns.every((c, i) => c.sessionIds.length === s.columns[i]!.sessionIds.length)) {
|
||||
// rien n'a bougé : on rend l'état d'origine (pas de réassignation, donc pas d'écriture inutile)
|
||||
return s;
|
||||
}
|
||||
return withActiveColumn(normalize(columns), s.activeColumnId);
|
||||
}
|
||||
|
||||
/** Tout ramener en une colonne : échappatoire utilisateur, et repli sûr d'un état douteux. */
|
||||
export function mergeColumns(s: DockState): DockState {
|
||||
if (s.columns.length <= 1) return s;
|
||||
const active = activeColumnOf(s);
|
||||
const first = s.columns[0]!;
|
||||
const sessionIds = s.columns.flatMap((c) => c.sessionIds);
|
||||
const activeSessionId = active?.activeSessionId ?? first.activeSessionId;
|
||||
const column: DockColumn = { id: first.id, sessionIds, activeSessionId, ratio: 1 };
|
||||
return { columns: [column], activeColumnId: column.id };
|
||||
}
|
||||
|
||||
/** Migration silencieuse de l'ancien dock mono-colonne (`arb.ide.dock`) vers les colonnes. */
|
||||
export function migrateDock(sessionIds: string[], activeSessionId: string | null, makeId: () => string = newColumnId): DockState {
|
||||
if (sessionIds.length === 0) return EMPTY_DOCK;
|
||||
const active = activeSessionId && sessionIds.includes(activeSessionId) ? activeSessionId : sessionIds[0]!;
|
||||
const column: DockColumn = { id: makeId(), sessionIds: [...sessionIds], activeSessionId: active, ratio: 1 };
|
||||
return { columns: [column], activeColumnId: column.id };
|
||||
}
|
||||
|
||||
// ---- géométrie verticale du dock ----
|
||||
// Bornes UNIQUES : elles étaient dupliquées entre le template d'IdeShell et le clamp du store, avec
|
||||
// un plafond figé de 640 px qui est ridicule sur un écran haut (et intenable à deux terminaux).
|
||||
|
||||
export const DOCK_MIN_HEIGHT = 120;
|
||||
|
||||
/** Plafond : 80 % du viewport, en laissant toujours de quoi voir la zone centrale. */
|
||||
export function dockMaxHeight(viewportHeight: number): number {
|
||||
return Math.max(DOCK_MIN_HEIGHT, Math.min(Math.round(viewportHeight * 0.8), viewportHeight - 200));
|
||||
}
|
||||
|
||||
/**
|
||||
* Hauteur à garantir quand le dock s'ouvre ou gagne une colonne : ~45 % du viewport. À 240 px un
|
||||
* terminal n'affiche qu'une vingtaine de lignes, ce qui casse le rendu d'un TUI.
|
||||
*/
|
||||
export function dockOpenHeight(viewportHeight: number): number {
|
||||
return Math.max(DOCK_MIN_HEIGHT, Math.min(Math.round(viewportHeight * 0.45), dockMaxHeight(viewportHeight)));
|
||||
}
|
||||
@@ -21,3 +21,29 @@ export function persistedRef<T>(key: string, initial: T): Ref<T> {
|
||||
});
|
||||
return r;
|
||||
}
|
||||
|
||||
/**
|
||||
* Lecture BRUTE d'une clé, sans créer de ref ni s'abonner : sert aux migrations de FORME d'état,
|
||||
* où l'on doit lire l'ancienne clé une fois pour construire la nouvelle.
|
||||
*/
|
||||
export function readPersisted<T>(key: string, fallback: T): T {
|
||||
try {
|
||||
const raw = localStorage.getItem(key);
|
||||
return raw == null ? fallback : (JSON.parse(raw) as T);
|
||||
} catch {
|
||||
return fallback;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Oubli d'une clé, une fois sa migration faite. Indispensable : laissée en place, un onglet resté
|
||||
* ouvert sur l'ancienne version de l'app la réécrirait et la migration rejouerait au démarrage
|
||||
* suivant, écrasant l'état neuf.
|
||||
*/
|
||||
export function forgetPersisted(key: string): void {
|
||||
try {
|
||||
localStorage.removeItem(key);
|
||||
} catch {
|
||||
/* localStorage indisponible : rien à oublier */
|
||||
}
|
||||
}
|
||||
|
||||
@@ -24,6 +24,11 @@ export interface TerminalSink {
|
||||
reset(): void;
|
||||
onDetached(reason: DetachReason): void;
|
||||
onControlChanged(controlling: boolean): void;
|
||||
/**
|
||||
* Erreur serveur portant SUR ce canal (frappe refusée, canal inconnu). Optionnel, mais sans lui
|
||||
* ces refus se perdaient dans un `console.warn` : l'utilisateur tapait et rien ne se passait.
|
||||
*/
|
||||
onChannelError?(code: string, message: string): void;
|
||||
}
|
||||
|
||||
export type SessionEvent = Extract<ServerMessage, { type: 'session_update' | 'session_exit' | 'session_archived' }>;
|
||||
@@ -42,6 +47,8 @@ export interface AttachOptions {
|
||||
cols: number;
|
||||
rows: number;
|
||||
sink: TerminalSink;
|
||||
/** false = attache d'écriture seule, sans affichage (cf. le champ `screen` du protocole). */
|
||||
screen?: boolean;
|
||||
}
|
||||
|
||||
const BACKOFF_MIN_MS = 500;
|
||||
@@ -72,6 +79,7 @@ export class Attachment {
|
||||
readonly sink: TerminalSink,
|
||||
cols: number,
|
||||
rows: number,
|
||||
readonly screen = true,
|
||||
) {
|
||||
this.cols = cols;
|
||||
this.rows = rows;
|
||||
@@ -172,7 +180,7 @@ export class WsClient {
|
||||
|
||||
/** résout sur le prochain 'attached' corrélé ; rejette si la session est introuvable/terminée */
|
||||
attach(opts: AttachOptions): Promise<Attachment> {
|
||||
const att = new Attachment(this, opts.sessionId, opts.mode, opts.sink, opts.cols, opts.rows);
|
||||
const att = new Attachment(this, opts.sessionId, opts.mode, opts.sink, opts.cols, opts.rows, opts.screen ?? true);
|
||||
const promise = new Promise<Attachment>((resolve, reject) => {
|
||||
att.pending = { resolve, reject };
|
||||
});
|
||||
@@ -343,7 +351,7 @@ export class WsClient {
|
||||
|
||||
private sendAttach(att: Attachment): void {
|
||||
this.awaitingAttached.push(att);
|
||||
this.sendControl({ type: 'attach', sessionId: att.sessionId, mode: att.mode, cols: att.cols, rows: att.rows });
|
||||
this.sendControl({ type: 'attach', sessionId: att.sessionId, mode: att.mode, cols: att.cols, rows: att.rows, screen: att.screen });
|
||||
}
|
||||
|
||||
private handleMessage(ev: MessageEvent): void {
|
||||
@@ -531,6 +539,8 @@ export class WsClient {
|
||||
case 'error': {
|
||||
if (msg.channel !== undefined) {
|
||||
console.warn(`[ws] channel ${msg.channel}: ${msg.code}: ${msg.message}`);
|
||||
// Remonté au terminal concerné : une frappe refusée doit se voir, pas seulement en console.
|
||||
this.byChannel.get(msg.channel)?.sink.onChannelError?.(msg.code, msg.message);
|
||||
return;
|
||||
}
|
||||
// un échec d'attach est la seule erreur sans canal corrélable à une requête
|
||||
|
||||
+128
-32
@@ -1,6 +1,23 @@
|
||||
import { defineStore } from 'pinia';
|
||||
import { computed, ref } from 'vue';
|
||||
import { persistedRef } from '../lib/persisted-ref';
|
||||
import { forgetPersisted, persistedRef, readPersisted } from '../lib/persisted-ref';
|
||||
import {
|
||||
activeColumnOf,
|
||||
addPane,
|
||||
closePane,
|
||||
DOCK_MIN_HEIGHT,
|
||||
dockMaxHeight,
|
||||
focusColumn,
|
||||
focusPane,
|
||||
MAX_DOCK_COLUMNS,
|
||||
mergeColumns,
|
||||
migrateDock,
|
||||
movePane,
|
||||
prunePanes,
|
||||
setSplit,
|
||||
type DockColumn,
|
||||
type DockState,
|
||||
} from '../lib/dock-model';
|
||||
|
||||
// Store d'état « IDE » : onglets éditeur, terminaux du dock, panneaux, arbre.
|
||||
// Ne stocke QUE des références (ids / chemins) et de l'état de vue, jamais de copie de
|
||||
@@ -59,8 +76,10 @@ export const useIdeStore = defineStore('ide', () => {
|
||||
// --- état persisté (références + vue) ---
|
||||
const editorTabs = persistedRef<EditorTab[]>('arb.ide.tabs', []);
|
||||
const activeTabId = persistedRef<string | null>('arb.ide.activeTab', null);
|
||||
const dockSessionIds = persistedRef<string[]>('arb.ide.dock', []);
|
||||
const activeDockSessionId = persistedRef<string | null>('arb.ide.activeDock', null);
|
||||
// Dock terminaux : des COLONNES d'onglets, pas une liste plate (plusieurs terminaux visibles côte
|
||||
// à côte). L'algèbre vit dans lib/dock-model.ts ; ici on ne fait qu'orchestrer et persister.
|
||||
const dockColumns = persistedRef<DockColumn[]>('arb.ide.dockColumns', []);
|
||||
const activeDockColumnId = persistedRef<string | null>('arb.ide.dockColumn', null);
|
||||
const activeActivity = persistedRef<ActivityView>('arb.ide.activity', 'explorer');
|
||||
const activeContext = persistedRef<WorktreeRef | null>('arb.ide.context', null);
|
||||
|
||||
@@ -79,6 +98,13 @@ export const useIdeStore = defineStore('ide', () => {
|
||||
const changesExpanded = persistedRef<string[]>('arb.ide.changesExpanded', []);
|
||||
/** Afficher aussi les worktrees propres et à jour (bruit par défaut, utile pour un audit). */
|
||||
const changesShowClean = persistedRef<boolean>('arb.ide.changesShowClean', false);
|
||||
/**
|
||||
* Portée de la vue Changements : suivre le terminal focalisé (défaut) ou tout voir. Seule la
|
||||
* PRÉFÉRENCE est persistée : la portée effective est résolue contre les données live par
|
||||
* `composables/useContextScope` (le store ne connaît ni les cwd ni les groupes). Persister la
|
||||
* portée elle-même désignerait tôt ou tard un groupe ou un worktree disparu.
|
||||
*/
|
||||
const changesScope = persistedRef<'follow' | 'all'>('arb.ide.changesScope', 'follow');
|
||||
|
||||
// Migration des valeurs de `mobilePanel` devenues invalides. `setActivity` posait 'sidebar', que
|
||||
// le layout mobile ne savait pas rendre (il retombait sur la zone centrale, sans que le bon
|
||||
@@ -87,10 +113,32 @@ export const useIdeStore = defineStore('ide', () => {
|
||||
if (mobilePanel.value === 'git') mobilePanel.value = 'changes';
|
||||
else if (!MOBILE_PANELS.includes(mobilePanel.value as MobilePanel)) mobilePanel.value = 'explorer';
|
||||
|
||||
// Migration silencieuse de l'ancien dock mono-colonne (`arb.ide.dock` / `arb.ide.activeDock`, déjà
|
||||
// en localStorage chez les utilisateurs) : une colonne unique, ordre et onglet actif conservés. Les
|
||||
// anciennes clés sont ensuite OUBLIÉES, sinon un onglet resté ouvert sur la version précédente les
|
||||
// réécrirait et la migration rejouerait au démarrage suivant, écrasant l'état neuf.
|
||||
if (dockColumns.value.length === 0) {
|
||||
const legacy = readPersisted<string[]>('arb.ide.dock', []);
|
||||
if (legacy.length > 0) applyDock(migrateDock(legacy, readPersisted<string | null>('arb.ide.activeDock', null)));
|
||||
}
|
||||
forgetPersisted('arb.ide.dock');
|
||||
forgetPersisted('arb.ide.activeDock');
|
||||
|
||||
// --- état volatile ---
|
||||
const dirty = ref<Record<string, boolean>>({}); // id d'onglet -> modifié non sauvegardé
|
||||
|
||||
// --- getters ---
|
||||
// `dockSessionIds` / `activeDockSessionId` restent l'API publique du dock (barre de statut, arbre,
|
||||
// panneaux, rendu mobile) : ils sont désormais DÉRIVÉS des colonnes. Aucun code externe ne les
|
||||
// écrit, donc le passage aux colonnes ne casse aucun consommateur.
|
||||
const activeDockColumn = computed(() => activeColumnOf({ columns: dockColumns.value, activeColumnId: activeDockColumnId.value }));
|
||||
const dockSessionIds = computed<string[]>(() => dockColumns.value.flatMap((c) => c.sessionIds));
|
||||
/** Onglet visible de CHAQUE colonne : les terminaux réellement à l'écran (portée git, watchers FS). */
|
||||
const visibleDockSessionIds = computed<string[]>(() => dockColumns.value.map((c) => c.activeSessionId));
|
||||
/** Terminal focalisé = onglet visible de la colonne active. */
|
||||
const activeDockSessionId = computed<string | null>(() => activeDockColumn.value?.activeSessionId ?? null);
|
||||
const canSplitTerminal = computed(() => dockColumns.value.length > 0 && dockColumns.value.length < MAX_DOCK_COLUMNS);
|
||||
|
||||
const activeTab = computed(() => editorTabs.value.find((t) => t.id === activeTabId.value) ?? null);
|
||||
const tabsCount = computed(() => editorTabs.value.length);
|
||||
const hasUnsaved = computed(() => Object.values(dirty.value).some(Boolean));
|
||||
@@ -176,31 +224,66 @@ export const useIdeStore = defineStore('ide', () => {
|
||||
// rend une ressource « active » doit donc aussi amener le bon panneau au premier plan. Sans ça,
|
||||
// ouvrir un terminal depuis l'arbre, un panneau, la palette ou un modal ne produisait AUCUN effet
|
||||
// visible sur mobile. On centralise ici plutôt que dans les ~10 points d'appel.
|
||||
function openTerminal(sessionId: string): void {
|
||||
if (!dockSessionIds.value.includes(sessionId)) {
|
||||
dockSessionIds.value = [...dockSessionIds.value, sessionId];
|
||||
}
|
||||
activeDockSessionId.value = sessionId;
|
||||
|
||||
/** Vue lecture de l'état du dock, telle que l'attend l'algèbre pure. */
|
||||
function dockState(): DockState {
|
||||
return { columns: dockColumns.value, activeColumnId: activeDockColumnId.value };
|
||||
}
|
||||
/** Écriture (réassignation immuable : persistedRef n'observe pas en profondeur). */
|
||||
function applyDock(next: DockState): void {
|
||||
if (next.columns !== dockColumns.value) dockColumns.value = next.columns;
|
||||
if (next.activeColumnId !== activeDockColumnId.value) activeDockColumnId.value = next.activeColumnId;
|
||||
}
|
||||
/** Le dock doit être visible ET au premier plan sur mobile dès qu'on y met quelque chose. */
|
||||
function revealDock(): void {
|
||||
bottomVisible.value = true;
|
||||
mobilePanel.value = 'terminal';
|
||||
}
|
||||
|
||||
/** `split` : ouvre le terminal dans une NOUVELLE colonne à côté, au lieu d'un onglet de plus. */
|
||||
function openTerminal(sessionId: string, opts?: { split?: boolean }): void {
|
||||
applyDock(addPane(dockState(), sessionId, opts?.split ? 'split' : 'tab'));
|
||||
revealDock();
|
||||
}
|
||||
|
||||
/** Détache un pane déjà ouvert dans sa propre colonne (par défaut, celui qui est focalisé). */
|
||||
function splitTerminal(sessionId?: string): void {
|
||||
const target = sessionId ?? activeDockSessionId.value;
|
||||
if (!target) return;
|
||||
applyDock(movePane(dockState(), target, { split: true }));
|
||||
revealDock();
|
||||
}
|
||||
|
||||
function moveTerminal(sessionId: string, target: { columnId: string } | { split: true }): void {
|
||||
applyDock(movePane(dockState(), sessionId, target));
|
||||
revealDock();
|
||||
}
|
||||
|
||||
function focusTerminal(sessionId: string): void {
|
||||
if (!dockSessionIds.value.includes(sessionId)) return;
|
||||
activeDockSessionId.value = sessionId;
|
||||
bottomVisible.value = true;
|
||||
mobilePanel.value = 'terminal';
|
||||
const next = focusPane(dockState(), sessionId);
|
||||
if (next === dockState() && !dockColumns.value.some((c) => c.sessionIds.includes(sessionId))) return;
|
||||
applyDock(next);
|
||||
revealDock();
|
||||
}
|
||||
|
||||
/** Rend une colonne active : c'est elle qui reçoit la frappe et qui définit le contexte de travail. */
|
||||
function focusDockColumn(columnId: string): void {
|
||||
applyDock(focusColumn(dockState(), columnId));
|
||||
}
|
||||
|
||||
function closeTerminal(sessionId: string): void {
|
||||
const idx = dockSessionIds.value.indexOf(sessionId);
|
||||
if (idx < 0) return;
|
||||
const next = dockSessionIds.value.filter((s) => s !== sessionId);
|
||||
dockSessionIds.value = next;
|
||||
if (activeDockSessionId.value === sessionId) {
|
||||
activeDockSessionId.value = next[idx] ?? next[idx - 1] ?? null;
|
||||
}
|
||||
if (next.length === 0) bottomVisible.value = false;
|
||||
const next = closePane(dockState(), sessionId);
|
||||
applyDock(next);
|
||||
if (next.columns.length === 0) bottomVisible.value = false;
|
||||
}
|
||||
|
||||
/** Déplace la frontière entre les colonnes `index` et `index+1` (part visée par la gauche). */
|
||||
function setDockColumnSplit(index: number, ratioOfTrack: number): void {
|
||||
applyDock(setSplit(dockState(), index, ratioOfTrack));
|
||||
}
|
||||
|
||||
function mergeDockColumns(): void {
|
||||
applyDock(mergeColumns(dockState()));
|
||||
}
|
||||
|
||||
// --- actions zone centrale ---
|
||||
@@ -221,6 +304,9 @@ export const useIdeStore = defineStore('ide', () => {
|
||||
function setChangesExpanded(keys: string[]): void {
|
||||
changesExpanded.value = [...keys];
|
||||
}
|
||||
function toggleChangesScope(): void {
|
||||
changesScope.value = changesScope.value === 'all' ? 'follow' : 'all';
|
||||
}
|
||||
|
||||
/** Rend un worktree actif, déplie son bloc et amène la vue Changements au premier plan. */
|
||||
function openChanges(repoId: string, wtPath: string): void {
|
||||
@@ -294,9 +380,10 @@ export const useIdeStore = defineStore('ide', () => {
|
||||
function clampToViewport(width: number, height: number): void {
|
||||
const maxLeft = Math.max(200, Math.min(560, Math.round(width * 0.5)));
|
||||
if (leftWidth.value > maxLeft) leftWidth.value = maxLeft;
|
||||
// on garde toujours de la place pour la zone centrale et la barre de statut.
|
||||
const maxBottom = Math.max(120, Math.min(640, height - 200));
|
||||
// Bornes du dock : une seule source (lib/dock-model), partagée avec le splitter du template.
|
||||
const maxBottom = dockMaxHeight(height);
|
||||
if (bottomHeight.value > maxBottom) bottomHeight.value = maxBottom;
|
||||
if (bottomHeight.value < DOCK_MIN_HEIGHT) bottomHeight.value = DOCK_MIN_HEIGHT;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -316,22 +403,19 @@ export const useIdeStore = defineStore('ide', () => {
|
||||
activeTabId.value = keptTabs[keptTabs.length - 1]?.id ?? null;
|
||||
}
|
||||
}
|
||||
const keptDock = dockSessionIds.value.filter((s) => liveSessionIds.has(s));
|
||||
if (keptDock.length !== dockSessionIds.value.length) {
|
||||
dockSessionIds.value = keptDock;
|
||||
if (activeDockSessionId.value && !keptDock.includes(activeDockSessionId.value)) {
|
||||
activeDockSessionId.value = keptDock[keptDock.length - 1] ?? null;
|
||||
}
|
||||
if (keptDock.length === 0) bottomVisible.value = false;
|
||||
}
|
||||
// Le modèle maintient ses invariants (colonne vidée supprimée, onglet visible réparé, ratios
|
||||
// renormalisés) et rend l'état d'origine quand rien n'a bougé : pas d'écriture inutile.
|
||||
const prunedDock = prunePanes(dockState(), liveSessionIds);
|
||||
applyDock(prunedDock);
|
||||
if (prunedDock.columns.length === 0) bottomVisible.value = false;
|
||||
}
|
||||
|
||||
return {
|
||||
// état
|
||||
editorTabs,
|
||||
activeTabId,
|
||||
dockSessionIds,
|
||||
activeDockSessionId,
|
||||
dockColumns,
|
||||
activeDockColumnId,
|
||||
activeActivity,
|
||||
activeContext,
|
||||
leftWidth,
|
||||
@@ -345,7 +429,13 @@ export const useIdeStore = defineStore('ide', () => {
|
||||
centerMode,
|
||||
changesExpanded,
|
||||
changesShowClean,
|
||||
changesScope,
|
||||
// getters
|
||||
dockSessionIds,
|
||||
visibleDockSessionIds,
|
||||
activeDockSessionId,
|
||||
activeDockColumn,
|
||||
canSplitTerminal,
|
||||
activeTab,
|
||||
tabsCount,
|
||||
hasUnsaved,
|
||||
@@ -359,11 +449,17 @@ export const useIdeStore = defineStore('ide', () => {
|
||||
moveTab,
|
||||
setTabDirty,
|
||||
openTerminal,
|
||||
splitTerminal,
|
||||
moveTerminal,
|
||||
focusTerminal,
|
||||
focusDockColumn,
|
||||
closeTerminal,
|
||||
setDockColumnSplit,
|
||||
mergeDockColumns,
|
||||
setCenterMode,
|
||||
toggleChangesWt,
|
||||
setChangesExpanded,
|
||||
toggleChangesScope,
|
||||
openChanges,
|
||||
setActivity,
|
||||
toggleActivity,
|
||||
|
||||
@@ -7,6 +7,10 @@ import { wsClient, type SessionEvent } from '../lib/ws-client';
|
||||
export const useSessionsStore = defineStore('sessions', () => {
|
||||
const sessions = ref<SessionSummary[]>([]);
|
||||
const loading = ref(false);
|
||||
// true dès que la PREMIÈRE liste est revenue (succès ou échec). Un consommateur qui attache un
|
||||
// terminal doit l'attendre : sur une liste encore vide, il déduirait « session non attachable »
|
||||
// et s'attacherait en observateur, à vie et sans le savoir (frappe refusée, écran muet).
|
||||
const loaded = ref(false);
|
||||
const loadError = ref<string | null>(null);
|
||||
// false (défaut) : les sessions masquées sont exclues ; true : on les inclut (mode « afficher les masquées »).
|
||||
const showHidden = ref(false);
|
||||
@@ -85,6 +89,7 @@ export const useSessionsStore = defineStore('sessions', () => {
|
||||
loadError.value = err instanceof Error ? err.message : String(err);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
loaded.value = true;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -189,6 +194,7 @@ export const useSessionsStore = defineStore('sessions', () => {
|
||||
return {
|
||||
sessions,
|
||||
loading,
|
||||
loaded,
|
||||
loadError,
|
||||
showHidden,
|
||||
showArchived,
|
||||
|
||||
@@ -97,6 +97,49 @@ describe('groupWorktreesByRepo', () => {
|
||||
expect(groups.map((g) => g.repo.id)).toEqual(['r1', 'r2']);
|
||||
expect(groups[1]?.worktrees.map((w) => w.path)).toEqual(['/wt/clean']);
|
||||
});
|
||||
|
||||
// Portée : le terminal focalisé (ou son groupe) restreint la vue. Le filtre est un ET, sinon un
|
||||
// worktree étranger fuirait dans une portée de groupe.
|
||||
it('inScope masque un worktree sale hors portée', () => {
|
||||
const groups = groupWorktreesByRepo(repos, forRepo, {
|
||||
showClean: false,
|
||||
active: null,
|
||||
inScope: (w) => w.repoId === 'r2',
|
||||
});
|
||||
expect(groups).toHaveLength(0);
|
||||
});
|
||||
|
||||
it('inScope PRIME sur active et sur showClean', () => {
|
||||
const onlyR1 = (w: { repoId: string }): boolean => w.repoId === 'r1';
|
||||
const withActive = groupWorktreesByRepo(repos, forRepo, {
|
||||
showClean: false,
|
||||
active: { repoId: 'r2', wtPath: '/wt/clean' },
|
||||
inScope: onlyR1,
|
||||
});
|
||||
expect(withActive.map((g) => g.repo.id)).toEqual(['r1']);
|
||||
|
||||
const withClean = groupWorktreesByRepo(repos, forRepo, { showClean: true, active: null, inScope: onlyR1 });
|
||||
expect(withClean.map((g) => g.repo.id)).toEqual(['r1']);
|
||||
});
|
||||
|
||||
it('inScope absent : comportement inchangé', () => {
|
||||
const sansPortee = groupWorktreesByRepo(repos, forRepo, { showClean: true, active: null });
|
||||
const portéeTotale = groupWorktreesByRepo(repos, forRepo, { showClean: true, active: null, inScope: () => true });
|
||||
expect(portéeTotale).toEqual(sansPortee);
|
||||
});
|
||||
});
|
||||
|
||||
describe('pendingWorktreeCount · portée', () => {
|
||||
it('compte tout par défaut, et se restreint quand inScope est fourni', () => {
|
||||
const repos = [repo('r1', 'alpha'), repo('r2', 'beta')];
|
||||
const byRepo: Record<string, WorktreeSummary[]> = {
|
||||
r1: [wt('/wt/main', { git: git({ dirtyCount: 1 }) })],
|
||||
r2: [wt('/wt/other', { repoId: 'r2', git: git({ ahead: 2 }) })],
|
||||
};
|
||||
const forRepo = (id: string): WorktreeSummary[] => byRepo[id] ?? [];
|
||||
expect(pendingWorktreeCount(repos, forRepo)).toBe(2);
|
||||
expect(pendingWorktreeCount(repos, forRepo, (w) => w.repoId === 'r1')).toBe(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('sortForIndex', () => {
|
||||
|
||||
@@ -0,0 +1,92 @@
|
||||
// Portée déduite du terminal focalisé. Le piège central : une session de GROUPE a pour cwd le parent
|
||||
// commun des dépôts, donc la rattacher par chemin donnerait un worktree arbitraire (ou rien).
|
||||
import { describe, expect, it } from 'vitest';
|
||||
import { resolveScope, SCOPE_ALL, scopeContains, worktreesForSession, worktreesInScope } from '../src/lib/context-scope';
|
||||
|
||||
const wt = (repoId: string, path: string): { repoId: string; path: string } => ({ repoId, path });
|
||||
|
||||
const WORKTREES = [
|
||||
wt('api', '/repos/api'),
|
||||
wt('api', '/repos/api/.worktrees/feature'),
|
||||
wt('web', '/repos/web'),
|
||||
wt('docs', '/ailleurs/docs'),
|
||||
];
|
||||
const GROUPS = [
|
||||
{ id: 'stack', repoIds: ['api', 'web'] },
|
||||
{ id: 'tout', repoIds: ['api', 'web', 'docs'] },
|
||||
];
|
||||
|
||||
describe('resolveScope', () => {
|
||||
it('session de groupe : portée GROUPE, jamais un worktree (cwd = parent commun)', () => {
|
||||
const scope = resolveScope({ cwd: '/repos', addedDirs: ['/repos/api', '/repos/web'], groupId: 'stack' }, WORKTREES, GROUPS);
|
||||
expect(scope).toEqual({ kind: 'group', groupId: 'stack' });
|
||||
});
|
||||
|
||||
it('groupId inconnu des données live : tout voir plutôt qu’une portée vide', () => {
|
||||
expect(resolveScope({ cwd: '/repos', groupId: 'disparu' }, WORKTREES, GROUPS)).toEqual(SCOPE_ALL);
|
||||
});
|
||||
|
||||
it('session multi-dépôts SANS groupId : groupe qui les contient tous', () => {
|
||||
const scope = resolveScope({ cwd: '/repos/api', addedDirs: ['/repos/web'] }, WORKTREES, GROUPS);
|
||||
expect(scope).toEqual({ kind: 'group', groupId: 'stack' });
|
||||
});
|
||||
|
||||
it('multi-dépôts sans groupe commun : tout voir', () => {
|
||||
const scope = resolveScope({ cwd: '/repos/api', addedDirs: ['/ailleurs/docs'] }, WORKTREES, [{ id: 'stack', repoIds: ['api', 'web'] }]);
|
||||
expect(scope).toEqual(SCOPE_ALL);
|
||||
});
|
||||
|
||||
it('terminal lancé dans un SOUS-répertoire : worktree du projet (contenance, pas égalité)', () => {
|
||||
const scope = resolveScope({ cwd: '/repos/web/packages/front' }, WORKTREES, GROUPS);
|
||||
expect(scope).toEqual({ kind: 'worktree', repoId: 'web', wtPath: '/repos/web' });
|
||||
});
|
||||
|
||||
it('worktrees imbriqués : le plus profond gagne', () => {
|
||||
const scope = resolveScope({ cwd: '/repos/api/.worktrees/feature/src' }, WORKTREES, GROUPS);
|
||||
expect(scope).toEqual({ kind: 'worktree', repoId: 'api', wtPath: '/repos/api/.worktrees/feature' });
|
||||
});
|
||||
|
||||
it('cwd hors de tout worktree connu, ou pas de session : null (l’appelant se rabat)', () => {
|
||||
expect(resolveScope({ cwd: '/tmp/scratch' }, WORKTREES, GROUPS)).toBeNull();
|
||||
expect(resolveScope(null, WORKTREES, GROUPS)).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('scopeContains', () => {
|
||||
it('all : tout ; worktree : la paire exacte ; groupe : tout worktree d’un dépôt du groupe', () => {
|
||||
expect(scopeContains(SCOPE_ALL, { repoId: 'docs', wtPath: '/ailleurs/docs' }, GROUPS)).toBe(true);
|
||||
|
||||
const only = { kind: 'worktree', repoId: 'api', wtPath: '/repos/api' } as const;
|
||||
expect(scopeContains(only, { repoId: 'api', wtPath: '/repos/api' }, GROUPS)).toBe(true);
|
||||
expect(scopeContains(only, { repoId: 'api', wtPath: '/repos/api/.worktrees/feature' }, GROUPS)).toBe(false);
|
||||
expect(scopeContains(only, { repoId: 'web', wtPath: '/repos/web' }, GROUPS)).toBe(false);
|
||||
|
||||
const group = { kind: 'group', groupId: 'stack' } as const;
|
||||
expect(scopeContains(group, { repoId: 'web', wtPath: '/repos/web' }, GROUPS)).toBe(true);
|
||||
expect(scopeContains(group, { repoId: 'api', wtPath: '/repos/api/.worktrees/feature' }, GROUPS)).toBe(true);
|
||||
expect(scopeContains(group, { repoId: 'docs', wtPath: '/ailleurs/docs' }, GROUPS)).toBe(false);
|
||||
// groupe supprimé entre-temps : plus rien ne matche, l'appelant doit déjà avoir replié sur 'all'
|
||||
expect(scopeContains({ kind: 'group', groupId: 'disparu' }, { repoId: 'api', wtPath: '/repos/api' }, GROUPS)).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('worktreesForSession / worktreesInScope', () => {
|
||||
it('cwd + addedDirs, dédupliqués, le plus profond gagnant', () => {
|
||||
const covered = worktreesForSession({ cwd: '/repos/api/src', addedDirs: ['/repos/api/lib', '/repos/web'] }, WORKTREES);
|
||||
expect(covered.map((w) => w.path)).toEqual(['/repos/api', '/repos/web']);
|
||||
});
|
||||
|
||||
it('un répertoire hors worktree connu est simplement ignoré', () => {
|
||||
expect(worktreesForSession({ cwd: '/tmp/x', addedDirs: ['/repos/web'] }, WORKTREES).map((w) => w.repoId)).toEqual(['web']);
|
||||
});
|
||||
|
||||
it('worktreesInScope filtre la liste complète', () => {
|
||||
expect(worktreesInScope(SCOPE_ALL, WORKTREES, GROUPS)).toHaveLength(4);
|
||||
expect(worktreesInScope({ kind: 'group', groupId: 'stack' }, WORKTREES, GROUPS).map((w) => w.path)).toEqual([
|
||||
'/repos/api',
|
||||
'/repos/api/.worktrees/feature',
|
||||
'/repos/web',
|
||||
]);
|
||||
expect(worktreesInScope({ kind: 'worktree', repoId: 'web', wtPath: '/repos/web' }, WORKTREES, GROUPS).map((w) => w.repoId)).toEqual(['web']);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,315 @@
|
||||
import { describe, expect, it } from 'vitest';
|
||||
import {
|
||||
addPane,
|
||||
activeColumnOf,
|
||||
closePane,
|
||||
DOCK_MIN_HEIGHT,
|
||||
dockMaxHeight,
|
||||
dockOpenHeight,
|
||||
EMPTY_DOCK,
|
||||
findPane,
|
||||
focusColumn,
|
||||
focusPane,
|
||||
MAX_DOCK_COLUMNS,
|
||||
MIN_DOCK_COLUMN_RATIO,
|
||||
mergeColumns,
|
||||
migrateDock,
|
||||
movePane,
|
||||
prunePanes,
|
||||
setSplit,
|
||||
type DockState,
|
||||
} from '../src/lib/dock-model';
|
||||
|
||||
/** Ids déterministes : les assertions portent sur la structure, pas sur une horloge. */
|
||||
function ids(): () => string {
|
||||
let n = 0;
|
||||
return () => `col${++n}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Les 5 invariants du modèle, vérifiés APRÈS chaque opération : sur une machine à états, c'est le
|
||||
* filet qui rattrape les cas qu'on n'a pas pensé à écrire.
|
||||
*/
|
||||
function expectDockInvariants(s: DockState): void {
|
||||
const seen = new Set<string>();
|
||||
for (const c of s.columns) {
|
||||
expect(c.sessionIds.length).toBeGreaterThan(0);
|
||||
expect(c.sessionIds).toContain(c.activeSessionId);
|
||||
for (const sid of c.sessionIds) {
|
||||
expect(seen.has(sid)).toBe(false);
|
||||
seen.add(sid);
|
||||
}
|
||||
expect(c.ratio).toBeGreaterThanOrEqual(Math.min(MIN_DOCK_COLUMN_RATIO, 1 / s.columns.length) - 1e-9);
|
||||
}
|
||||
if (s.columns.length === 0) {
|
||||
expect(s.activeColumnId).toBeNull();
|
||||
} else {
|
||||
expect(s.columns.some((c) => c.id === s.activeColumnId)).toBe(true);
|
||||
expect(s.columns.reduce((sum, c) => sum + c.ratio, 0)).toBeCloseTo(1, 9);
|
||||
}
|
||||
}
|
||||
|
||||
/** Dock à N colonnes d'un pane chacune, parts égales. */
|
||||
function dock(...columns: string[][]): DockState {
|
||||
const cols = columns.map((sessionIds, i) => ({
|
||||
id: `col${i + 1}`,
|
||||
sessionIds,
|
||||
activeSessionId: sessionIds[0]!,
|
||||
ratio: 1 / columns.length,
|
||||
}));
|
||||
return { columns: cols, activeColumnId: cols[0]?.id ?? null };
|
||||
}
|
||||
|
||||
describe('addPane', () => {
|
||||
it('premier pane : une colonne pleine largeur, active', () => {
|
||||
const s = addPane(EMPTY_DOCK, 's1', 'tab', ids());
|
||||
expect(s.columns).toHaveLength(1);
|
||||
expect(s.columns[0]!.ratio).toBe(1);
|
||||
expect(s.activeColumnId).toBe('col1');
|
||||
expectDockInvariants(s);
|
||||
});
|
||||
|
||||
it("'tab' ajoute un onglet à la colonne active et le rend visible", () => {
|
||||
const make = ids();
|
||||
let s = addPane(EMPTY_DOCK, 's1', 'tab', make);
|
||||
s = addPane(s, 's2', 'tab', make);
|
||||
expect(s.columns).toHaveLength(1);
|
||||
expect(s.columns[0]!.sessionIds).toEqual(['s1', 's2']);
|
||||
expect(s.columns[0]!.activeSessionId).toBe('s2');
|
||||
expectDockInvariants(s);
|
||||
});
|
||||
|
||||
it("'split' insère une colonne APRÈS l'active, qui lui cède la moitié de sa part", () => {
|
||||
const make = ids();
|
||||
let s = addPane(EMPTY_DOCK, 's1', 'tab', make);
|
||||
s = addPane(s, 's2', 'split', make);
|
||||
expect(s.columns.map((c) => c.sessionIds)).toEqual([['s1'], ['s2']]);
|
||||
expect(s.columns[0]!.ratio).toBeCloseTo(0.5);
|
||||
expect(s.columns[1]!.ratio).toBeCloseTo(0.5);
|
||||
expect(s.activeColumnId).toBe('col2');
|
||||
expectDockInvariants(s);
|
||||
});
|
||||
|
||||
it("'split' ne touche pas les colonnes voisines de l'active", () => {
|
||||
const make = ids();
|
||||
let s = dock(['a'], ['b']);
|
||||
s = focusColumn(s, 'col2');
|
||||
s = addPane(s, 'c', 'split', () => 'new');
|
||||
expect(s.columns.map((c) => c.sessionIds)).toEqual([['a'], ['b'], ['c']]);
|
||||
expect(s.columns[0]!.ratio).toBeCloseTo(0.5);
|
||||
expect(s.columns[1]!.ratio).toBeCloseTo(0.25);
|
||||
expect(s.columns[2]!.ratio).toBeCloseTo(0.25);
|
||||
expectDockInvariants(s);
|
||||
expect(make).toBeTruthy();
|
||||
});
|
||||
|
||||
it('une session déjà ouverte est déplacée, jamais dupliquée', () => {
|
||||
let s = dock(['a', 'b'], ['c']);
|
||||
s = addPane(s, 'b', 'split', () => 'new');
|
||||
expect(findPane(s, 'b')!.column.sessionIds).toEqual(['b']);
|
||||
expect(s.columns.flatMap((c) => c.sessionIds).filter((id) => id === 'b')).toHaveLength(1);
|
||||
expectDockInvariants(s);
|
||||
});
|
||||
|
||||
it('au plafond de colonnes, un split retombe en onglet (et focalise)', () => {
|
||||
const make = ids();
|
||||
let s = dock(['a'], ['b'], ['c']);
|
||||
expect(s.columns).toHaveLength(MAX_DOCK_COLUMNS);
|
||||
s = addPane(s, 'd', 'split', make);
|
||||
expect(s.columns).toHaveLength(MAX_DOCK_COLUMNS);
|
||||
expect(s.columns[0]!.sessionIds).toEqual(['a', 'd']);
|
||||
expect(s.columns[0]!.activeSessionId).toBe('d');
|
||||
expectDockInvariants(s);
|
||||
});
|
||||
});
|
||||
|
||||
describe('focusPane / focusColumn', () => {
|
||||
it('focaliser un onglet active AUSSI sa colonne', () => {
|
||||
const s = focusPane(dock(['a'], ['b', 'c']), 'c');
|
||||
expect(s.activeColumnId).toBe('col2');
|
||||
expect(s.columns[1]!.activeSessionId).toBe('c');
|
||||
expectDockInvariants(s);
|
||||
});
|
||||
|
||||
it('session inconnue ou état déjà correct : identité', () => {
|
||||
const s = dock(['a'], ['b']);
|
||||
expect(focusPane(s, 'zzz')).toBe(s);
|
||||
expect(focusPane(s, 'a')).toBe(s);
|
||||
expect(focusColumn(s, 'col1')).toBe(s);
|
||||
expect(focusColumn(s, 'inconnue')).toBe(s);
|
||||
});
|
||||
});
|
||||
|
||||
describe('closePane', () => {
|
||||
it('fermer un onglet parmi plusieurs : le voisin devient visible', () => {
|
||||
const s = closePane({ ...dock(['a', 'b', 'c']), columns: [{ id: 'col1', sessionIds: ['a', 'b', 'c'], activeSessionId: 'b', ratio: 1 }] }, 'b');
|
||||
expect(s.columns[0]!.sessionIds).toEqual(['a', 'c']);
|
||||
expect(s.columns[0]!.activeSessionId).toBe('c');
|
||||
expectDockInvariants(s);
|
||||
});
|
||||
|
||||
it('colonne vidée : supprimée, sa part léguée au voisin de gauche', () => {
|
||||
const s = closePane(dock(['a'], ['b']), 'b');
|
||||
expect(s.columns).toHaveLength(1);
|
||||
expect(s.columns[0]!.sessionIds).toEqual(['a']);
|
||||
expect(s.columns[0]!.ratio).toBeCloseTo(1);
|
||||
expect(s.activeColumnId).toBe('col1');
|
||||
expectDockInvariants(s);
|
||||
});
|
||||
|
||||
it('première colonne vidée : la part va au voisin de droite', () => {
|
||||
const s = closePane(dock(['a'], ['b']), 'a');
|
||||
expect(s.columns).toHaveLength(1);
|
||||
expect(s.columns[0]!.sessionIds).toEqual(['b']);
|
||||
expect(s.columns[0]!.ratio).toBeCloseTo(1);
|
||||
expectDockInvariants(s);
|
||||
});
|
||||
|
||||
it('dernier pane du dock : dock vide', () => {
|
||||
const s = closePane(dock(['a']), 'a');
|
||||
expect(s).toEqual(EMPTY_DOCK);
|
||||
expectDockInvariants(s);
|
||||
});
|
||||
|
||||
it('session inconnue : identité', () => {
|
||||
const s = dock(['a']);
|
||||
expect(closePane(s, 'zzz')).toBe(s);
|
||||
});
|
||||
});
|
||||
|
||||
describe('movePane', () => {
|
||||
it('vers une autre colonne : la source vidée disparaît', () => {
|
||||
const s = movePane(dock(['a'], ['b']), 'a', { columnId: 'col2' });
|
||||
expect(s.columns).toHaveLength(1);
|
||||
expect(s.columns[0]!.sessionIds).toEqual(['b', 'a']);
|
||||
expect(s.columns[0]!.activeSessionId).toBe('a');
|
||||
expectDockInvariants(s);
|
||||
});
|
||||
|
||||
it('détacher un onglet crée une colonne à droite de la sienne', () => {
|
||||
const s = movePane(dock(['a', 'b']), 'b', { split: true }, () => 'new');
|
||||
expect(s.columns.map((c) => c.sessionIds)).toEqual([['a'], ['b']]);
|
||||
expect(s.activeColumnId).toBe('new');
|
||||
expectDockInvariants(s);
|
||||
});
|
||||
|
||||
it('détacher un pane déjà seul en colonne : identité de contenu, simple focus', () => {
|
||||
const s = dock(['a'], ['b']);
|
||||
const next = movePane(s, 'b', { split: true }, () => 'new');
|
||||
expect(next.columns.map((c) => c.sessionIds)).toEqual([['a'], ['b']]);
|
||||
expect(next.activeColumnId).toBe('col2');
|
||||
});
|
||||
|
||||
it('cible inconnue ou déjà la bonne colonne : identité', () => {
|
||||
const s = dock(['a', 'b']);
|
||||
expect(movePane(s, 'a', { columnId: 'col1' })).toBe(s);
|
||||
expect(movePane(s, 'a', { columnId: 'zzz' })).toBe(s);
|
||||
expect(movePane(s, 'zzz', { split: true })).toBe(s);
|
||||
});
|
||||
});
|
||||
|
||||
describe('setSplit', () => {
|
||||
it('la somme de la paire est préservée, la 3e colonne intacte', () => {
|
||||
const s = setSplit(dock(['a'], ['b'], ['c']), 0, 0.5);
|
||||
expect(s.columns[0]!.ratio + s.columns[1]!.ratio).toBeCloseTo(2 / 3);
|
||||
expect(s.columns[0]!.ratio).toBeCloseTo(0.5);
|
||||
expect(s.columns[2]!.ratio).toBeCloseTo(1 / 3);
|
||||
expectDockInvariants(s);
|
||||
});
|
||||
|
||||
it('clampé par MIN_DOCK_COLUMN_RATIO des deux côtés', () => {
|
||||
const wide = setSplit(dock(['a'], ['b']), 0, 0.99);
|
||||
expect(wide.columns[1]!.ratio).toBeCloseTo(MIN_DOCK_COLUMN_RATIO);
|
||||
const narrow = setSplit(dock(['a'], ['b']), 0, 0.01);
|
||||
expect(narrow.columns[0]!.ratio).toBeCloseTo(MIN_DOCK_COLUMN_RATIO);
|
||||
expectDockInvariants(wide);
|
||||
expectDockInvariants(narrow);
|
||||
});
|
||||
|
||||
it('frontière inexistante : identité', () => {
|
||||
const s = dock(['a'], ['b']);
|
||||
expect(setSplit(s, 1, 0.5)).toBe(s);
|
||||
expect(setSplit(s, -1, 0.5)).toBe(s);
|
||||
});
|
||||
});
|
||||
|
||||
describe('prunePanes', () => {
|
||||
it('retire les sessions mortes, supprime les colonnes vidées et renormalise', () => {
|
||||
const s = prunePanes(dock(['a', 'b'], ['c']), new Set(['a']));
|
||||
expect(s.columns).toHaveLength(1);
|
||||
expect(s.columns[0]!.sessionIds).toEqual(['a']);
|
||||
expect(s.columns[0]!.ratio).toBeCloseTo(1);
|
||||
expectDockInvariants(s);
|
||||
});
|
||||
|
||||
it("répare l'onglet visible quand c'est lui qui est mort", () => {
|
||||
const base: DockState = { columns: [{ id: 'col1', sessionIds: ['a', 'b'], activeSessionId: 'b', ratio: 1 }], activeColumnId: 'col1' };
|
||||
const s = prunePanes(base, new Set(['a']));
|
||||
expect(s.columns[0]!.activeSessionId).toBe('a');
|
||||
expectDockInvariants(s);
|
||||
});
|
||||
|
||||
it('tout est vivant : identité (aucune écriture inutile dans le localStorage)', () => {
|
||||
const s = dock(['a'], ['b']);
|
||||
expect(prunePanes(s, new Set(['a', 'b']))).toBe(s);
|
||||
});
|
||||
|
||||
it('plus rien de vivant : dock vide', () => {
|
||||
expect(prunePanes(dock(['a'], ['b']), new Set())).toEqual(EMPTY_DOCK);
|
||||
});
|
||||
});
|
||||
|
||||
describe('mergeColumns', () => {
|
||||
it("conserve l'ordre des onglets et l'onglet focalisé", () => {
|
||||
const s = mergeColumns(focusPane(dock(['a', 'b'], ['c']), 'c'));
|
||||
expect(s.columns).toHaveLength(1);
|
||||
expect(s.columns[0]!.sessionIds).toEqual(['a', 'b', 'c']);
|
||||
expect(s.columns[0]!.activeSessionId).toBe('c');
|
||||
expectDockInvariants(s);
|
||||
});
|
||||
|
||||
it('une seule colonne (ou aucune) : identité', () => {
|
||||
const one = dock(['a']);
|
||||
expect(mergeColumns(one)).toBe(one);
|
||||
expect(mergeColumns(EMPTY_DOCK)).toBe(EMPTY_DOCK);
|
||||
});
|
||||
});
|
||||
|
||||
describe('migrateDock', () => {
|
||||
it('ancien dock à plat : une colonne, ordre et onglet actif conservés', () => {
|
||||
const s = migrateDock(['a', 'b'], 'b', () => 'col1');
|
||||
expect(s).toEqual({ columns: [{ id: 'col1', sessionIds: ['a', 'b'], activeSessionId: 'b', ratio: 1 }], activeColumnId: 'col1' });
|
||||
expectDockInvariants(s);
|
||||
});
|
||||
|
||||
it('actif périmé ou absent : premier onglet ; liste vide : dock vide', () => {
|
||||
expect(migrateDock(['a'], 'zzz', () => 'col1').columns[0]!.activeSessionId).toBe('a');
|
||||
expect(migrateDock([], null)).toEqual(EMPTY_DOCK);
|
||||
});
|
||||
});
|
||||
|
||||
describe('géométrie du dock', () => {
|
||||
it('plafond à 80 % du viewport, plancher garanti', () => {
|
||||
expect(dockMaxHeight(1080)).toBe(864);
|
||||
expect(dockMaxHeight(1000)).toBe(800);
|
||||
expect(dockMaxHeight(600)).toBe(400); // 600-200 borne avant les 80 %
|
||||
expect(dockMaxHeight(150)).toBe(DOCK_MIN_HEIGHT);
|
||||
});
|
||||
|
||||
it("hauteur d'ouverture : ~45 %, jamais au-delà du plafond ni sous le plancher", () => {
|
||||
expect(dockOpenHeight(1080)).toBe(486);
|
||||
expect(dockOpenHeight(600)).toBe(270);
|
||||
expect(dockOpenHeight(200)).toBe(DOCK_MIN_HEIGHT);
|
||||
for (const h of [200, 400, 768, 1080, 1440, 2160]) {
|
||||
expect(dockOpenHeight(h)).toBeLessThanOrEqual(dockMaxHeight(h));
|
||||
expect(dockOpenHeight(h)).toBeGreaterThanOrEqual(DOCK_MIN_HEIGHT);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
describe('activeColumnOf', () => {
|
||||
it('rend la colonne active, ou null', () => {
|
||||
expect(activeColumnOf(dock(['a']))!.sessionIds).toEqual(['a']);
|
||||
expect(activeColumnOf(EMPTY_DOCK)).toBeNull();
|
||||
});
|
||||
});
|
||||
@@ -111,6 +111,80 @@ describe('store IDE', () => {
|
||||
expect(ide.bottomVisible).toBe(false);
|
||||
});
|
||||
|
||||
// --- dock en colonnes (plusieurs terminaux visibles côte à côte) ---
|
||||
|
||||
it('dock : openTerminal { split } crée une seconde colonne, les deux panes restent visibles', () => {
|
||||
const ide = useIdeStore();
|
||||
ide.openTerminal('s1');
|
||||
ide.openTerminal('s2', { split: true });
|
||||
expect(ide.dockColumns).toHaveLength(2);
|
||||
expect(ide.dockSessionIds).toEqual(['s1', 's2']);
|
||||
expect(ide.visibleDockSessionIds).toEqual(['s1', 's2']);
|
||||
expect(ide.activeDockSessionId).toBe('s2');
|
||||
expect(ide.canSplitTerminal).toBe(true);
|
||||
});
|
||||
|
||||
it('dock : splitTerminal détache le pane focalisé, mergeDockColumns ramène tout en une colonne', () => {
|
||||
const ide = useIdeStore();
|
||||
ide.openTerminal('s1');
|
||||
ide.openTerminal('s2');
|
||||
ide.splitTerminal(); // s2 est focalisé
|
||||
expect(ide.dockColumns.map((c) => c.sessionIds)).toEqual([['s1'], ['s2']]);
|
||||
ide.mergeDockColumns();
|
||||
expect(ide.dockColumns.map((c) => c.sessionIds)).toEqual([['s1', 's2']]);
|
||||
expect(ide.activeDockSessionId).toBe('s2');
|
||||
});
|
||||
|
||||
it('dock : focusDockColumn change la colonne active, donc le terminal focalisé', () => {
|
||||
const ide = useIdeStore();
|
||||
ide.openTerminal('s1');
|
||||
ide.openTerminal('s2', { split: true });
|
||||
ide.focusDockColumn(ide.dockColumns[0]!.id);
|
||||
expect(ide.activeDockSessionId).toBe('s1');
|
||||
});
|
||||
|
||||
it('dock : une session n’est jamais dans deux colonnes (2e attache = PTY figé)', () => {
|
||||
const ide = useIdeStore();
|
||||
ide.openTerminal('s1');
|
||||
ide.openTerminal('s2');
|
||||
ide.openTerminal('s2', { split: true }); // déjà ouvert : déplacé, pas dupliqué
|
||||
expect(ide.dockSessionIds.filter((s) => s === 's2')).toHaveLength(1);
|
||||
expect(ide.dockColumns.map((c) => c.sessionIds)).toEqual([['s1'], ['s2']]);
|
||||
});
|
||||
|
||||
it('dock : fermer le dernier pane d’une colonne supprime la colonne, pas le dock', () => {
|
||||
const ide = useIdeStore();
|
||||
ide.openTerminal('s1');
|
||||
ide.openTerminal('s2', { split: true });
|
||||
ide.closeTerminal('s2');
|
||||
expect(ide.dockColumns).toHaveLength(1);
|
||||
expect(ide.bottomVisible).toBe(true);
|
||||
ide.closeTerminal('s1');
|
||||
expect(ide.dockColumns).toEqual([]);
|
||||
expect(ide.bottomVisible).toBe(false);
|
||||
});
|
||||
|
||||
it('dock : setDockColumnSplit redistribue la paire saisie', () => {
|
||||
const ide = useIdeStore();
|
||||
ide.openTerminal('s1');
|
||||
ide.openTerminal('s2', { split: true });
|
||||
ide.setDockColumnSplit(0, 0.7);
|
||||
expect(ide.dockColumns[0]!.ratio).toBeCloseTo(0.7);
|
||||
expect(ide.dockColumns[1]!.ratio).toBeCloseTo(0.3);
|
||||
});
|
||||
|
||||
it('dock : migration silencieuse de l’ancien état mono-colonne, et oubli des clés legacy', () => {
|
||||
localStorage.setItem('arb.ide.dock', JSON.stringify(['a', 'b']));
|
||||
localStorage.setItem('arb.ide.activeDock', JSON.stringify('b'));
|
||||
setActivePinia(createPinia());
|
||||
const ide = useIdeStore();
|
||||
expect(ide.dockColumns).toHaveLength(1);
|
||||
expect(ide.dockSessionIds).toEqual(['a', 'b']);
|
||||
expect(ide.activeDockSessionId).toBe('b');
|
||||
expect(localStorage.getItem('arb.ide.dock')).toBeNull();
|
||||
expect(localStorage.getItem('arb.ide.activeDock')).toBeNull();
|
||||
});
|
||||
|
||||
it('toggleActivity : re-clic sur la vue active replie le panneau', () => {
|
||||
const ide = useIdeStore();
|
||||
expect(ide.activeActivity).toBe('explorer');
|
||||
@@ -130,9 +204,13 @@ describe('store IDE', () => {
|
||||
ide.setTabDirty(tabId('r', '/w2', 'b'), true);
|
||||
ide.openTerminal('sLive');
|
||||
ide.openTerminal('sDead');
|
||||
ide.openTerminal('sDeadAlone', { split: true }); // colonne entière à supprimer
|
||||
|
||||
ide.pruneDeadResources(new Set(['sLive']), new Set([wtKey('r', '/w1')]));
|
||||
|
||||
expect(ide.dockColumns).toHaveLength(1);
|
||||
expect(ide.dockColumns[0]!.ratio).toBeCloseTo(1);
|
||||
|
||||
expect(ide.editorTabs.map((t) => t.wtPath)).toEqual(['/w1']);
|
||||
expect(ide.dockSessionIds).toEqual(['sLive']); // sDead retiré
|
||||
expect(ide.isDirty(tabId('r', '/w1', 'a'))).toBe(true); // onglet gardé : dirty conservé
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
// persistedRef : lecture initiale depuis localStorage, repli sur défaut, réécriture, robustesse.
|
||||
import { describe, it, expect, beforeEach } from 'vitest';
|
||||
import { nextTick } from 'vue';
|
||||
import { persistedRef } from '../src/lib/persisted-ref';
|
||||
import { forgetPersisted, persistedRef, readPersisted } from '../src/lib/persisted-ref';
|
||||
|
||||
function fakeStorage() {
|
||||
const m = new Map<string, string>();
|
||||
@@ -45,3 +45,29 @@ describe('persistedRef', () => {
|
||||
expect(persistedRef('x', 5).value).toBe(5);
|
||||
});
|
||||
});
|
||||
|
||||
describe('readPersisted / forgetPersisted', () => {
|
||||
beforeEach(() => {
|
||||
(globalThis as unknown as { localStorage: unknown }).localStorage = fakeStorage();
|
||||
});
|
||||
|
||||
it('lit une valeur brute sans créer de ref, et retombe sur le défaut', () => {
|
||||
localStorage.setItem('legacy', JSON.stringify(['a', 'b']));
|
||||
expect(readPersisted<string[]>('legacy', [])).toEqual(['a', 'b']);
|
||||
expect(readPersisted('absente', 'def')).toBe('def');
|
||||
localStorage.setItem('cassee', '{not json');
|
||||
expect(readPersisted('cassee', 'def')).toBe('def');
|
||||
});
|
||||
|
||||
it('oublie une clé migrée (sans quoi la migration rejouerait au démarrage suivant)', () => {
|
||||
localStorage.setItem('legacy', '1');
|
||||
forgetPersisted('legacy');
|
||||
expect(localStorage.getItem('legacy')).toBeNull();
|
||||
});
|
||||
|
||||
it('ne jette pas sans localStorage', () => {
|
||||
delete (globalThis as unknown as { localStorage?: unknown }).localStorage;
|
||||
expect(readPersisted('x', 5)).toBe(5);
|
||||
expect(() => forgetPersisted('x')).not.toThrow();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -0,0 +1,156 @@
|
||||
// useTerminalContext : le terminal focalisé impose le worktree actif. C'était le chaînon manquant
|
||||
// (openTerminal / focusTerminal ne posaient pas `activeContext`), et c'est ce qui fait suivre la vue
|
||||
// Changements, la barre de statut et les abonnements FS.
|
||||
import { describe, it, expect, beforeEach } from 'vitest';
|
||||
import { createPinia, setActivePinia } from 'pinia';
|
||||
import { effectScope, nextTick } from 'vue';
|
||||
import type { GroupSummary, SessionSummary, WorktreeSummary } from '@arboretum/shared';
|
||||
import { useTerminalContext } from '../src/composables/useTerminalContext';
|
||||
import { useIdeStore } from '../src/stores/ide';
|
||||
import { useWorktreesStore } from '../src/stores/worktrees';
|
||||
import { useSessionsStore } from '../src/stores/sessions';
|
||||
import { useGroupsStore } from '../src/stores/groups';
|
||||
|
||||
function fakeStorage() {
|
||||
const m = new Map<string, string>();
|
||||
return {
|
||||
getItem: (k: string) => (m.has(k) ? (m.get(k) as string) : null),
|
||||
setItem: (k: string, v: string) => void m.set(k, v),
|
||||
removeItem: (k: string) => void m.delete(k),
|
||||
clear: () => m.clear(),
|
||||
};
|
||||
}
|
||||
|
||||
function wt(repoId: string, path: string): WorktreeSummary {
|
||||
return {
|
||||
repoId,
|
||||
path,
|
||||
branch: 'main',
|
||||
head: 'abc1234',
|
||||
detached: false,
|
||||
locked: false,
|
||||
prunable: false,
|
||||
isMain: true,
|
||||
git: { ahead: 0, behind: 0, dirtyCount: 0, upstream: null },
|
||||
sessions: [],
|
||||
};
|
||||
}
|
||||
|
||||
function session(id: string, cwd: string, extra: Partial<SessionSummary> = {}): SessionSummary {
|
||||
return {
|
||||
id,
|
||||
cwd,
|
||||
command: 'claude',
|
||||
title: null,
|
||||
status: 'running',
|
||||
live: true,
|
||||
createdAt: '2026-01-01T00:00:00.000Z',
|
||||
endedAt: null,
|
||||
exitCode: null,
|
||||
clients: 0,
|
||||
source: 'managed',
|
||||
claudeSessionId: null,
|
||||
pid: 1234,
|
||||
resumable: false,
|
||||
attachable: true,
|
||||
registryStatus: null,
|
||||
...extra,
|
||||
};
|
||||
}
|
||||
|
||||
const group = (id: string, repoIds: string[]): GroupSummary => ({
|
||||
id,
|
||||
label: id,
|
||||
description: null,
|
||||
color: null,
|
||||
repoIds,
|
||||
createdAt: '2026-01-01T00:00:00.000Z',
|
||||
});
|
||||
|
||||
describe('useTerminalContext', () => {
|
||||
beforeEach(() => {
|
||||
(globalThis as unknown as { localStorage: unknown }).localStorage = fakeStorage();
|
||||
setActivePinia(createPinia());
|
||||
});
|
||||
|
||||
it('focaliser un terminal pose le worktree actif', async () => {
|
||||
const ide = useIdeStore();
|
||||
const worktrees = useWorktreesStore();
|
||||
const sessions = useSessionsStore();
|
||||
worktrees.worktrees = [wt('r1', '/wt/a'), wt('r2', '/wt/b')];
|
||||
sessions.sessions = [session('s1', '/wt/b')];
|
||||
const scope = effectScope();
|
||||
scope.run(() => useTerminalContext());
|
||||
|
||||
ide.openTerminal('s1');
|
||||
await nextTick();
|
||||
expect(ide.activeContext).toEqual({ repoId: 'r2', wtPath: '/wt/b' });
|
||||
scope.stop();
|
||||
});
|
||||
|
||||
it('rattache par contenance un terminal lancé dans un sous-répertoire', async () => {
|
||||
const ide = useIdeStore();
|
||||
const worktrees = useWorktreesStore();
|
||||
const sessions = useSessionsStore();
|
||||
worktrees.worktrees = [wt('r1', '/wt/a')];
|
||||
sessions.sessions = [session('s1', '/wt/a/packages/api')];
|
||||
const scope = effectScope();
|
||||
scope.run(() => useTerminalContext());
|
||||
|
||||
ide.openTerminal('s1');
|
||||
await nextTick();
|
||||
expect(ide.activeContext).toEqual({ repoId: 'r1', wtPath: '/wt/a' });
|
||||
scope.stop();
|
||||
});
|
||||
|
||||
it('session de GROUPE : le contexte n’est pas écrasé (un groupe n’a pas de worktree unique)', async () => {
|
||||
const ide = useIdeStore();
|
||||
const worktrees = useWorktreesStore();
|
||||
const sessions = useSessionsStore();
|
||||
const groups = useGroupsStore();
|
||||
worktrees.worktrees = [wt('r1', '/wt/a'), wt('r2', '/wt/b')];
|
||||
groups.groups = [group('g1', ['r1', 'r2'])];
|
||||
sessions.sessions = [session('sg', '/wt', { addedDirs: ['/wt/a', '/wt/b'], groupId: 'g1' })];
|
||||
ide.setActiveWorktree('r1', '/wt/a');
|
||||
const scope = effectScope();
|
||||
scope.run(() => useTerminalContext());
|
||||
|
||||
ide.openTerminal('sg');
|
||||
await nextTick();
|
||||
expect(ide.activeContext).toEqual({ repoId: 'r1', wtPath: '/wt/a' });
|
||||
scope.stop();
|
||||
});
|
||||
|
||||
it('cwd hors de tout worktree connu : contexte inchangé', async () => {
|
||||
const ide = useIdeStore();
|
||||
const worktrees = useWorktreesStore();
|
||||
const sessions = useSessionsStore();
|
||||
worktrees.worktrees = [wt('r1', '/wt/a')];
|
||||
sessions.sessions = [session('s1', '/tmp/scratch')];
|
||||
ide.setActiveWorktree('r1', '/wt/a');
|
||||
const scope = effectScope();
|
||||
scope.run(() => useTerminalContext());
|
||||
|
||||
ide.openTerminal('s1');
|
||||
await nextTick();
|
||||
expect(ide.activeContext).toEqual({ repoId: 'r1', wtPath: '/wt/a' });
|
||||
scope.stop();
|
||||
});
|
||||
|
||||
it('la session peut arriver APRÈS le terminal (dock persisté, liste encore vide)', async () => {
|
||||
const ide = useIdeStore();
|
||||
const worktrees = useWorktreesStore();
|
||||
const sessions = useSessionsStore();
|
||||
worktrees.worktrees = [wt('r1', '/wt/a')];
|
||||
ide.openTerminal('s1'); // session pas encore connue
|
||||
const scope = effectScope();
|
||||
scope.run(() => useTerminalContext());
|
||||
await nextTick();
|
||||
expect(ide.activeContext).toBeNull();
|
||||
|
||||
sessions.sessions = [session('s1', '/wt/a')];
|
||||
await nextTick();
|
||||
expect(ide.activeContext).toEqual({ repoId: 'r1', wtPath: '/wt/a' });
|
||||
scope.stop();
|
||||
});
|
||||
});
|
||||
@@ -22,4 +22,22 @@ describe('useSplitter · nextSize', () => {
|
||||
it('taille inchangée si la position ne bouge pas', () => {
|
||||
expect(nextSize(300, 150, 150, { min: 100, max: 400 })).toBe(300);
|
||||
});
|
||||
|
||||
// Régression : PanelSplitter passait ses bornes PAR VALEUR, capturées au premier rendu. Avec des
|
||||
// bornes dérivées du viewport ou d'une largeur mesurée, un drag clampait sur des valeurs périmées
|
||||
// (le clavier, lui, relisait les props : les deux voies ne s'accordaient plus).
|
||||
it('relit min/max à chaque appel (bornes réactives)', () => {
|
||||
const bounds = { min: 100, max: 200 };
|
||||
const opts = {
|
||||
get min() {
|
||||
return bounds.min;
|
||||
},
|
||||
get max() {
|
||||
return bounds.max;
|
||||
},
|
||||
};
|
||||
expect(nextSize(150, 0, 500, opts)).toBe(200);
|
||||
bounds.max = 900;
|
||||
expect(nextSize(150, 0, 500, opts)).toBe(650);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
import { describe, it, expect, beforeEach, vi } from 'vitest';
|
||||
import { createPinia, setActivePinia } from 'pinia';
|
||||
import { effectScope, nextTick } from 'vue';
|
||||
import type { WorktreeSummary } from '@arboretum/shared';
|
||||
import type { SessionSummary, WorktreeSummary } from '@arboretum/shared';
|
||||
|
||||
const watched: string[] = [];
|
||||
const released: string[] = [];
|
||||
@@ -24,6 +24,7 @@ vi.mock('../src/lib/ws-client', () => ({
|
||||
const { useWatchedWorktrees, MAX_WATCHED } = await import('../src/composables/useWatchedWorktrees');
|
||||
const { useIdeStore } = await import('../src/stores/ide');
|
||||
const { useWorktreesStore } = await import('../src/stores/worktrees');
|
||||
const { useSessionsStore } = await import('../src/stores/sessions');
|
||||
|
||||
function fakeStorage() {
|
||||
const m = new Map<string, string>();
|
||||
@@ -50,6 +51,28 @@ function wt(repoId: string, path: string): WorktreeSummary {
|
||||
};
|
||||
}
|
||||
|
||||
function session(id: string, cwd: string, extra: Partial<SessionSummary> = {}): SessionSummary {
|
||||
return {
|
||||
id,
|
||||
cwd,
|
||||
command: 'claude',
|
||||
title: null,
|
||||
status: 'running',
|
||||
live: true,
|
||||
createdAt: '2026-01-01T00:00:00.000Z',
|
||||
endedAt: null,
|
||||
exitCode: null,
|
||||
clients: 0,
|
||||
source: 'managed',
|
||||
claudeSessionId: null,
|
||||
pid: 1234,
|
||||
resumable: false,
|
||||
attachable: true,
|
||||
registryStatus: null,
|
||||
...extra,
|
||||
};
|
||||
}
|
||||
|
||||
describe('useWatchedWorktrees', () => {
|
||||
beforeEach(() => {
|
||||
watched.length = 0;
|
||||
@@ -147,6 +170,40 @@ describe('useWatchedWorktrees', () => {
|
||||
scope.stop();
|
||||
});
|
||||
|
||||
// Un terminal visible travaille dans son worktree : son statut git doit rester frais, sinon les
|
||||
// compteurs du bloc Changements d'à côté restent figés pendant toute la session.
|
||||
it('observe le worktree d’un terminal visible, sans rien de déplié', async () => {
|
||||
const ide = useIdeStore();
|
||||
const worktrees = useWorktreesStore();
|
||||
const sessions = useSessionsStore();
|
||||
worktrees.worktrees = [wt('r1', '/wt/a'), wt('r2', '/wt/b')];
|
||||
sessions.sessions = [session('s1', '/wt/b/packages/front')];
|
||||
const scope = effectScope();
|
||||
scope.run(() => useWatchedWorktrees());
|
||||
|
||||
ide.openTerminal('s1');
|
||||
await nextTick();
|
||||
// rattaché par CONTENANCE : le terminal tourne dans un sous-répertoire du worktree
|
||||
expect(watched).toContain('r2\0/wt/b');
|
||||
scope.stop();
|
||||
});
|
||||
|
||||
it('une session de groupe fait observer TOUS ses répertoires reliés', async () => {
|
||||
const ide = useIdeStore();
|
||||
const worktrees = useWorktreesStore();
|
||||
const sessions = useSessionsStore();
|
||||
worktrees.worktrees = [wt('r1', '/wt/a'), wt('r2', '/wt/b')];
|
||||
sessions.sessions = [session('sg', '/wt', { addedDirs: ['/wt/a', '/wt/b'], groupId: 'g1' })];
|
||||
const scope = effectScope();
|
||||
scope.run(() => useWatchedWorktrees());
|
||||
|
||||
ide.openTerminal('sg');
|
||||
await nextTick();
|
||||
expect(watched).toContain('r1\0/wt/a');
|
||||
expect(watched).toContain('r2\0/wt/b');
|
||||
scope.stop();
|
||||
});
|
||||
|
||||
it('incrémente le jeton d’invalidation du store à chaque worktree_changes', () => {
|
||||
const ide = useIdeStore();
|
||||
const worktrees = useWorktreesStore();
|
||||
|
||||
Reference in New Issue
Block a user