From 5302bf29ae45e94cd3403ddd00a164f850c25140 Mon Sep 17 00:00:00 2001
From: Johan LEROY <contact@johanleroy.fr>
Date: Fri, 17 Jul 2026 17:14:40 +0200
Subject: [PATCH] =?UTF-8?q?feat(web):=20dock=20terminaux=20en=20bas=20(mul?=
 =?UTF-8?q?ti-sessions=20attach=C3=A9es)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

components/ide/TerminalDock.vue + TerminalDockTabs.vue : dock à onglets, une TerminalView par session du dock, toutes montées en v-show pour préserver l'attache WS (seule l'active visible). Fermer un onglet démonte réellement la vue -> detach() propre, pas de fuite. DialogPrompt au-dessus du terminal actif en attente. Repli via la barre de statut ou le chevron.

Branché dans IdeShell (section dock redimensionnable, splitter inversé). 427 tests.
---
 packages/web/src/components/ide/IdeShell.vue  |  9 +--
 .../web/src/components/ide/TerminalDock.vue   | 50 ++++++++++++++
 .../src/components/ide/TerminalDockTabs.vue   | 67 +++++++++++++++++++
 3 files changed, 120 insertions(+), 6 deletions(-)
 create mode 100644 packages/web/src/components/ide/TerminalDock.vue
 create mode 100644 packages/web/src/components/ide/TerminalDockTabs.vue

diff --git a/packages/web/src/components/ide/IdeShell.vue b/packages/web/src/components/ide/IdeShell.vue
index 02eed44..74c53fb 100644
--- a/packages/web/src/components/ide/IdeShell.vue
+++ b/packages/web/src/components/ide/IdeShell.vue
@@ -13,11 +13,11 @@
           <EditorArea />
         </main>
 
-        <!-- dock terminaux (livré en B5). Placeholder pour l'instant. -->
+        <!-- dock terminaux (B5) -->
         <template v-if="ide.bottomVisible">
           <PanelSplitter v-model="ide.bottomHeight" axis="y" :min="120" :max="640" invert />
           <section class="shrink-0 overflow-hidden border-t border-border" :style="{ height: `${ide.bottomHeight}px` }">
-            <EmptyState :icon="SquareTerminal" :title="t('ide.noTerminal')" :hint="t('ide.noTerminalHint')" class="m-6" />
+            <TerminalDock />
           </section>
         </template>
       </div>
@@ -32,8 +32,6 @@
 // zone centrale (éditeur), dock terminaux et barre de statut. Propriétaire de la réconciliation
 // des ressources ouvertes contre les données live (worktrees / sessions).
 import { watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { SquareTerminal } from '@lucide/vue';
 import { useIdeStore, wtKey } from '../../stores/ide';
 import { useWorktreesStore } from '../../stores/worktrees';
 import { useSessionsStore } from '../../stores/sessions';
@@ -42,9 +40,8 @@ import PrimarySidebar from './PrimarySidebar.vue';
 import PanelSplitter from './PanelSplitter.vue';
 import StatusBar from './StatusBar.vue';
 import EditorArea from './EditorArea.vue';
-import EmptyState from '../ui/EmptyState.vue';
+import TerminalDock from './TerminalDock.vue';
 
-const { t } = useI18n();
 const ide = useIdeStore();
 const worktrees = useWorktreesStore();
 const sessions = useSessionsStore();
diff --git a/packages/web/src/components/ide/TerminalDock.vue b/packages/web/src/components/ide/TerminalDock.vue
new file mode 100644
index 0000000..161e02e
--- /dev/null
+++ b/packages/web/src/components/ide/TerminalDock.vue
@@ -0,0 +1,50 @@
+<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)" />
+        </div>
+      </div>
+      <EmptyState
+        v-if="ide.dockSessionIds.length === 0"
+        :icon="SquareTerminal"
+        :title="t('ide.noTerminal')"
+        :hint="t('ide.noTerminalHint')"
+        class="m-6"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+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 TerminalDockTabs from './TerminalDockTabs.vue';
+import TerminalView from '../TerminalView.vue';
+import DialogPrompt from '../DialogPrompt.vue';
+import EmptyState from '../ui/EmptyState.vue';
+
+const { t } = useI18n();
+const ide = useIdeStore();
+const sessions = useSessionsStore();
+
+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;
+};
+</script>
diff --git a/packages/web/src/components/ide/TerminalDockTabs.vue b/packages/web/src/components/ide/TerminalDockTabs.vue
new file mode 100644
index 0000000..25343ff
--- /dev/null
+++ b/packages/web/src/components/ide/TerminalDockTabs.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="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 px-2 text-[11px] font-semibold tracking-wide text-fg-subtle uppercase">
+      <SquareTerminal :size="12" /> {{ t('ide.terminals') }}
+    </div>
+
+    <div
+      v-for="sid in ide.dockSessionIds"
+      :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'"
+      :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
+        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"
+        :title="t('common.close')"
+        @click.stop="ide.closeTerminal(sid)"
+      >
+        <X :size="14" />
+      </button>
+    </div>
+
+    <button
+      type="button"
+      class="ml-auto shrink-0 px-2 text-fg-subtle transition-colors hover:bg-surface-2 hover:text-fg"
+      :title="t('common.close')"
+      @click="ide.toggleBottom()"
+    >
+      <ChevronDown :size="14" />
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { ChevronDown, SquareTerminal, X } from '@lucide/vue';
+import type { SessionSummary } from '@arboretum/shared';
+import { useIdeStore } from '../../stores/ide';
+import { useSessionsStore } from '../../stores/sessions';
+import { useWorktreesStore } from '../../stores/worktrees';
+import SessionStateBadge from '../SessionStateBadge.vue';
+
+const { t } = useI18n();
+const ide = useIdeStore();
+const sessions = useSessionsStore();
+const worktrees = useWorktreesStore();
+
+const sessionOf = (sid: string): SessionSummary | null => sessions.sessions.find((s) => s.id === sid) ?? null;
+
+// libellé compact : « repo · branche » si le worktree est connu, sinon le dernier segment du cwd.
+function titleFor(sid: string): string {
+  const s = sessionOf(sid);
+  if (!s) return sid.slice(0, 8);
+  const wt = worktrees.worktrees.find((w) => w.path === s.cwd);
+  if (wt) {
+    const repo = worktrees.repos.find((r) => r.id === wt.repoId);
+    const branch = wt.branch ?? wt.head.slice(0, 7);
+    return repo ? `${repo.label} · ${branch}` : branch;
+  }
+  return s.cwd.split('/').filter(Boolean).pop() ?? s.cwd;
+}
+</script>