From 016e9b09aeebf27eaa38d5ff528895bef7261ee3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9?=
 <donnalee11681676@gmail.com>
Date: Sun, 17 May 2026 15:40:27 +0300
Subject: [PATCH] refactor(deals): extract DealDetailBody; DealDetailDrawer =
 overlay/inline wrapper

---
 .../js/components/deals/DealDetailBody.vue    | 340 +++++++++++++++
 .../js/components/deals/DealDetailDrawer.vue  | 398 ++----------------
 app/tests/Frontend/DealDetailDrawer.spec.ts   | 111 ++---
 .../Frontend/DealDetailDrawerApi.spec.ts      |  30 +-
 4 files changed, 422 insertions(+), 457 deletions(-)
 create mode 100644 app/resources/js/components/deals/DealDetailBody.vue

diff --git a/app/resources/js/components/deals/DealDetailBody.vue b/app/resources/js/components/deals/DealDetailBody.vue
new file mode 100644
index 00000000..373e828f
--- /dev/null
+++ b/app/resources/js/components/deals/DealDetailBody.vue
@@ -0,0 +1,340 @@
+<script setup lang="ts">
+/**
+ * Тело панели деталей сделки (hero + параметры + комментарий + напоминания +
+ * timeline). Извлечено из DealDetailDrawer (редизайн 2026-05-17) — общее тело
+ * для overlay-дровера (Канбан) и inline-панели master-detail («Сделки»).
+ *
+ * Backend: GET /api/deals/{id}, PATCH /api/deals/{id}, GET /api/deals/{id}/events.
+ */
+import { computed, defineAsyncComponent, ref, watch } from 'vue';
+import type { MockDeal } from '../../composables/mockDeals';
+import { type DealEvent } from '../../composables/mockDealEvents';
+import { mapApiDealEvent } from '../../composables/dealsApiMapper';
+import * as dealsApi from '../../api/deals';
+import * as remindersApi from '../../api/reminders';
+import type { ApiReminder } from '../../api/reminders';
+import { useLeadStatusesStore } from '../../stores/leadStatuses';
+import DealDetailHero from './DealDetailHero.vue';
+import DealDetailTimeline from './DealDetailTimeline.vue';
+const ReminderDialog = defineAsyncComponent(() => import('../reminders/ReminderDialog.vue'));
+
+const leadStatusesStore = useLeadStatusesStore();
+
+const props = defineProps<{
+    deal: MockDeal | null;
+    tenantId?: number;
+}>();
+
+const emit = defineEmits<{ close: [] }>();
+
+const status = computed(() => {
+    if (!props.deal) return null;
+    return leadStatusesStore.findBySlug(props.deal.statusSlug);
+});
+
+function formatCost(cost: number): string {
+    return new Intl.NumberFormat('ru-RU').format(cost) + ' ₽';
+}
+
+const events = ref<DealEvent[]>([]);
+const eventsLoading = ref(false);
+const eventsFetchError = ref(false);
+
+const commentDraft = ref<string>('');
+const commentSaving = ref(false);
+const commentSaveError = ref(false);
+const commentToastOpen = ref(false);
+const commentToastText = ref('');
+
+const reminders = ref<ApiReminder[]>([]);
+const remindersLoading = ref(false);
+const reminderDialogOpen = ref(false);
+
+async function loadReminders() {
+    if (!props.deal || !props.tenantId) {
+        reminders.value = [];
+        return;
+    }
+    remindersLoading.value = true;
+    try {
+        const res = await remindersApi.listReminders({ filter: 'active', dealId: props.deal.id });
+        reminders.value = res.items;
+    } catch {
+        reminders.value = [];
+    } finally {
+        remindersLoading.value = false;
+    }
+}
+
+async function completeReminderInDrawer(id: number) {
+    try {
+        await remindersApi.completeReminder(id);
+        reminders.value = reminders.value.filter((r) => r.id !== id);
+    } catch {
+        /* silent */
+    }
+}
+
+function onReminderSaved() {
+    void loadReminders();
+}
+
+function formatReminderTime(iso: string | null): string {
+    if (!iso) return '—';
+    const ms = new Date(iso).getTime() - Date.now();
+    const min = Math.round(Math.abs(ms) / 60_000);
+    const future = ms > 0;
+    if (min < 60) return future ? `через ${min} мин` : `${min} мин назад`;
+    const hr = Math.round(min / 60);
+    if (hr < 24) return future ? `через ${hr} ч` : `${hr} ч назад`;
+    const days = Math.round(hr / 24);
+    return future ? `через ${days} д` : `${days} д назад`;
+}
+
+async function loadEvents() {
+    if (!props.deal || !props.tenantId) {
+        events.value = [];
+        commentDraft.value = '';
+        return;
+    }
+    eventsLoading.value = true;
+    eventsFetchError.value = false;
+    try {
+        const res = await dealsApi.getDeal(props.deal.id, props.tenantId);
+        events.value = res.events.map((e) => mapApiDealEvent(e));
+        commentDraft.value = res.deal.comment ?? '';
+    } catch {
+        eventsFetchError.value = true;
+        events.value = [];
+        commentDraft.value = '';
+    } finally {
+        eventsLoading.value = false;
+    }
+}
+
+async function saveComment() {
+    if (!props.deal || !props.tenantId) return;
+    commentSaving.value = true;
+    commentSaveError.value = false;
+    try {
+        await dealsApi.updateDeal(props.deal.id, {
+            tenant_id: props.tenantId,
+            comment: commentDraft.value || null,
+        });
+        commentToastText.value = 'Комментарий сохранён.';
+        commentToastOpen.value = true;
+        await loadEvents();
+    } catch {
+        commentSaveError.value = true;
+        commentToastText.value = 'Не удалось сохранить — попробуйте позже.';
+        commentToastOpen.value = true;
+    } finally {
+        commentSaving.value = false;
+    }
+}
+
+// Загрузка при появлении/смене сделки (панель монтируется только при deal != null).
+watch(
+    () => [props.deal?.id, props.tenantId] as const,
+    () => {
+        if (props.deal) {
+            loadEvents();
+            void loadReminders();
+        }
+    },
+    { immediate: true },
+);
+
+defineExpose({
+    events, eventsLoading, eventsFetchError, loadEvents,
+    commentDraft, commentSaving, commentSaveError, commentToastOpen, commentToastText, saveComment,
+});
+</script>
+
+<template>
+    <div v-if="deal" class="drawer-content">
+        <DealDetailHero :deal="deal" :status="status" @close="emit('close')" />
+
+        <v-divider />
+
+        <section class="section pa-5">
+            <h3 class="section-title text-subtitle-2 mb-3">Параметры</h3>
+            <dl class="params">
+                <div class="param">
+                    <dt class="text-caption text-medium-emphasis">Проект</dt>
+                    <dd class="text-body-2">{{ deal.project }}</dd>
+                </div>
+                <div class="param">
+                    <dt class="text-caption text-medium-emphasis">Стоимость лида</dt>
+                    <dd class="text-body-2 num">{{ formatCost(deal.cost) }}</dd>
+                </div>
+                <div class="param">
+                    <dt class="text-caption text-medium-emphasis">Менеджер</dt>
+                    <dd class="text-body-2">
+                        <v-avatar size="20" color="secondary" class="mr-1">
+                            <span class="text-caption">{{ deal.manager.initials }}</span>
+                        </v-avatar>
+                        {{ deal.manager.name }}
+                    </dd>
+                </div>
+                <div class="param">
+                    <dt class="text-caption text-medium-emphasis">Источник</dt>
+                    <dd class="text-body-2 link">Я.Директ → landing-1</dd>
+                </div>
+            </dl>
+        </section>
+
+        <v-divider />
+
+        <section v-if="tenantId" class="section pa-5" data-testid="comment-section">
+            <h3 class="section-title text-subtitle-2 mb-3">Комментарий</h3>
+            <v-textarea
+                v-model="commentDraft"
+                placeholder="Заметка менеджера…"
+                variant="outlined"
+                density="comfortable"
+                auto-grow
+                rows="3"
+                hide-details
+                counter="5000"
+                data-testid="comment-textarea"
+            />
+            <div class="d-flex ga-2 mt-2 justify-end">
+                <v-btn
+                    :loading="commentSaving"
+                    color="primary"
+                    size="small"
+                    prepend-icon="mdi-content-save-outline"
+                    data-testid="save-comment-btn"
+                    @click="saveComment"
+                >
+                    Сохранить
+                </v-btn>
+            </div>
+        </section>
+
+        <v-divider v-if="tenantId" />
+
+        <section v-if="tenantId && deal" class="section pa-5" data-testid="reminders-section">
+            <div class="d-flex justify-space-between align-center mb-3">
+                <h3 class="section-title text-subtitle-2 mb-0">Напоминания</h3>
+                <v-btn
+                    size="x-small"
+                    variant="text"
+                    prepend-icon="mdi-plus"
+                    data-testid="add-reminder-btn"
+                    @click="reminderDialogOpen = true"
+                >
+                    Создать
+                </v-btn>
+            </div>
+            <div v-if="reminders.length === 0 && !remindersLoading" class="text-caption text-medium-emphasis">
+                Нет активных напоминаний.
+            </div>
+            <ul v-else class="reminders-list">
+                <li v-for="r in reminders" :key="r.id" class="reminder-row" data-testid="drawer-reminder-item">
+                    <v-btn
+                        icon="mdi-check-circle-outline"
+                        size="x-small"
+                        variant="text"
+                        density="comfortable"
+                        :data-testid="`drawer-complete-${r.id}`"
+                        @click="completeReminderInDrawer(r.id)"
+                    />
+                    <div class="reminder-body">
+                        <div class="reminder-text">{{ r.text || 'Без описания' }}</div>
+                        <div class="reminder-meta text-caption text-medium-emphasis">
+                            {{ formatReminderTime(r.remind_at) }}
+                        </div>
+                    </div>
+                </li>
+            </ul>
+        </section>
+
+        <v-divider v-if="tenantId && deal" />
+
+        <DealDetailTimeline :events="events" :events-fetch-error="eventsFetchError" />
+
+        <v-snackbar
+            v-model="commentToastOpen"
+            :timeout="3000"
+            :color="commentSaveError ? 'warning' : undefined"
+            data-testid="comment-toast"
+            location="bottom right"
+        >
+            {{ commentToastText }}
+        </v-snackbar>
+
+        <ReminderDialog
+            v-if="tenantId && deal"
+            v-model="reminderDialogOpen"
+            :deal-id="deal.id"
+            @saved="onReminderSaved"
+        />
+    </div>
+</template>
+
+<style scoped>
+.drawer-content {
+    display: flex;
+    flex-direction: column;
+}
+.section-title {
+    font-weight: 600;
+    color: #081319;
+}
+.params {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px 12px;
+    margin: 0;
+}
+.param dt {
+    font-size: 11px;
+    margin-bottom: 2px;
+}
+.param dd {
+    margin: 0;
+    color: #081319;
+}
+.param .link {
+    color: #0f6e56;
+    cursor: pointer;
+}
+.param .link:hover {
+    text-decoration: underline;
+}
+.num {
+    font-family: 'JetBrains Mono', ui-monospace, monospace;
+    font-feature-settings: 'tnum';
+}
+.reminders-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+.reminder-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 8px;
+    border: 1px solid #e8e3d6;
+    border-radius: 6px;
+    background: #fdfaf3;
+}
+.reminder-body {
+    flex: 1;
+    min-width: 0;
+}
+.reminder-text {
+    font-size: 13px;
+    line-height: 1.4;
+    color: #081319;
+}
+.reminder-meta {
+    margin-top: 2px;
+}
+</style>
diff --git a/app/resources/js/components/deals/DealDetailDrawer.vue b/app/resources/js/components/deals/DealDetailDrawer.vue
index 2fdf53b4..4796958e 100644
--- a/app/resources/js/components/deals/DealDetailDrawer.vue
+++ b/app/resources/js/components/deals/DealDetailDrawer.vue
@@ -1,43 +1,23 @@
 <script setup lang="ts">
 /**
- * Правая панель с деталями сделки. Открывается при click на строку в DealsView
- * или на карточку в KanbanView.
- *
- * Источник дизайна: liderra_v8_handoff/concepts/v8_deal_card.html.
- * MVP: hero (имя + телефон + статус-chip + close), параметры (Проект/Стоимость/
- * Источник/Email), Activity timeline (5-7 событий).
- *
- * Не входит в этот коммит:
- * - Редактирование параметров (input-fields + save).
- * - Смена статуса через dropdown (на Канбане — через DnD).
- * - Tag management, manager assignment, reminders, comment/templates —
- *   отдельные секции, отдельные коммиты.
- *
- * Backend:
- * - GET /api/deals/{id} — full detail with events.
- * - PATCH /api/deals/{id} — частичное обновление полей.
- * - GET /api/deals/{id}/events — `activity_log` фильтр по deal_id.
+ * Обёртка панели деталей сделки. `inline=false` (по умолчанию) — overlay
+ * v-navigation-drawer (Канбан). `inline=true` — боковая панель master-detail
+ * для страницы «Сделки» (список сжимается, панель встаёт рядом, не перекрывает).
+ * Тело — общий DealDetailBody.vue.
  */
-import { computed, defineAsyncComponent, ref, watch } from 'vue';
+import { computed } from 'vue';
 import type { MockDeal } from '../../composables/mockDeals';
-import { type DealEvent } from '../../composables/mockDealEvents';
-import { mapApiDealEvent } from '../../composables/dealsApiMapper';
-import * as dealsApi from '../../api/deals';
-import * as remindersApi from '../../api/reminders';
-import type { ApiReminder } from '../../api/reminders';
-import { useLeadStatusesStore } from '../../stores/leadStatuses';
-import DealDetailHero from './DealDetailHero.vue';
-import DealDetailTimeline from './DealDetailTimeline.vue';
-// Sprint 2 Phase B / O-perf-06: ReminderDialog гейтится через v-model — chunk-split.
-const ReminderDialog = defineAsyncComponent(() => import('../reminders/ReminderDialog.vue'));
+import DealDetailBody from './DealDetailBody.vue';
 
-const leadStatusesStore = useLeadStatusesStore();
-
-const props = defineProps<{
-    open: boolean;
-    deal: MockDeal | null;
-    tenantId?: number;
-}>();
+const props = withDefaults(
+    defineProps<{
+        open: boolean;
+        deal: MockDeal | null;
+        tenantId?: number;
+        inline?: boolean;
+    }>(),
+    { inline: false },
+);
 
 const emit = defineEmits<{ 'update:open': [value: boolean] }>();
 
@@ -46,265 +26,24 @@ const drawerOpen = computed({
     set: (v) => emit('update:open', v),
 });
 
-const status = computed(() => {
-    if (!props.deal) return null;
-    return leadStatusesStore.findBySlug(props.deal.statusSlug);
-});
-
-function formatCost(cost: number): string {
-    return new Intl.NumberFormat('ru-RU').format(cost) + ' ₽';
+function close() {
+    emit('update:open', false);
 }
-
-// Activity timeline: при наличии tenant_id делаем GET /api/deals/{id} и
-// показываем реальные events. На fail / без tenant_id — events пуст + eventsFetchError.
-const events = ref<DealEvent[]>([]);
-const eventsLoading = ref(false);
-const eventsFetchError = ref(false);
-
-// Comment editor — редактирование текущего комментария сделки.
-const commentDraft = ref<string>('');
-const commentSaving = ref(false);
-const commentSaveError = ref(false);
-const commentToastOpen = ref(false);
-const commentToastText = ref('');
-
-// Reminders на сделку — отдельная секция с inline-create + список.
-const reminders = ref<ApiReminder[]>([]);
-const remindersLoading = ref(false);
-const reminderDialogOpen = ref(false);
-
-async function loadReminders() {
-    if (!props.deal || !props.tenantId) {
-        reminders.value = [];
-        return;
-    }
-    remindersLoading.value = true;
-    try {
-        const res = await remindersApi.listReminders({ filter: 'active', dealId: props.deal.id });
-        reminders.value = res.items;
-    } catch {
-        reminders.value = [];
-    } finally {
-        remindersLoading.value = false;
-    }
-}
-
-async function completeReminderInDrawer(id: number) {
-    try {
-        await remindersApi.completeReminder(id);
-        reminders.value = reminders.value.filter((r) => r.id !== id);
-    } catch {
-        /* silent */
-    }
-}
-
-function onReminderSaved() {
-    void loadReminders();
-}
-
-function formatReminderTime(iso: string | null): string {
-    if (!iso) return '—';
-    const ms = new Date(iso).getTime() - Date.now();
-    const min = Math.round(Math.abs(ms) / 60_000);
-    const future = ms > 0;
-    if (min < 60) return future ? `через ${min} мин` : `${min} мин назад`;
-    const hr = Math.round(min / 60);
-    if (hr < 24) return future ? `через ${hr} ч` : `${hr} ч назад`;
-    const days = Math.round(hr / 24);
-    return future ? `через ${days} д` : `${days} д назад`;
-}
-
-async function loadEvents() {
-    if (!props.deal || !props.tenantId) {
-        events.value = [];
-        commentDraft.value = '';
-        return;
-    }
-    eventsLoading.value = true;
-    eventsFetchError.value = false;
-    try {
-        const res = await dealsApi.getDeal(props.deal.id, props.tenantId);
-        events.value = res.events.map((e) => mapApiDealEvent(e));
-        commentDraft.value = res.deal.comment ?? '';
-    } catch {
-        eventsFetchError.value = true;
-        events.value = [];
-        commentDraft.value = '';
-    } finally {
-        eventsLoading.value = false;
-    }
-}
-
-async function saveComment() {
-    if (!props.deal || !props.tenantId) return;
-    commentSaving.value = true;
-    commentSaveError.value = false;
-    try {
-        await dealsApi.updateDeal(props.deal.id, {
-            tenant_id: props.tenantId,
-            comment: commentDraft.value || null,
-        });
-        commentToastText.value = 'Комментарий сохранён.';
-        commentToastOpen.value = true;
-        // Reload events чтобы показать новый deal.commented в timeline.
-        await loadEvents();
-    } catch {
-        commentSaveError.value = true;
-        commentToastText.value = 'Не удалось сохранить — попробуйте позже.';
-        commentToastOpen.value = true;
-    } finally {
-        commentSaving.value = false;
-    }
-}
-
-// Fetch при открытии drawer'а или смене сделки.
-watch(
-    () => [props.open, props.deal?.id, props.tenantId] as const,
-    ([open]) => {
-        if (open) {
-            loadEvents();
-            void loadReminders();
-        }
-    },
-    { immediate: true },
-);
-
-defineExpose({
-    events,
-    eventsLoading,
-    eventsFetchError,
-    loadEvents,
-    commentDraft,
-    commentSaving,
-    commentSaveError,
-    commentToastOpen,
-    commentToastText,
-    saveComment,
-});
 </script>
 
 <template>
-    <v-navigation-drawer v-model="drawerOpen" location="right" temporary :width="480" class="deal-drawer">
-        <div v-if="deal" class="drawer-content">
-            <DealDetailHero :deal="deal" :status="status" @close="drawerOpen = false" />
-
-            <v-divider />
-
-            <section class="section pa-5">
-                <h3 class="section-title text-subtitle-2 mb-3">Параметры</h3>
-                <dl class="params">
-                    <div class="param">
-                        <dt class="text-caption text-medium-emphasis">Проект</dt>
-                        <dd class="text-body-2">{{ deal.project }}</dd>
-                    </div>
-                    <div class="param">
-                        <dt class="text-caption text-medium-emphasis">Стоимость лида</dt>
-                        <dd class="text-body-2 num">{{ formatCost(deal.cost) }}</dd>
-                    </div>
-                    <div class="param">
-                        <dt class="text-caption text-medium-emphasis">Менеджер</dt>
-                        <dd class="text-body-2">
-                            <v-avatar size="20" color="secondary" class="mr-1">
-                                <span class="text-caption">{{ deal.manager.initials }}</span>
-                            </v-avatar>
-                            {{ deal.manager.name }}
-                        </dd>
-                    </div>
-                    <div class="param">
-                        <dt class="text-caption text-medium-emphasis">Источник</dt>
-                        <dd class="text-body-2 link">Я.Директ → landing-1</dd>
-                    </div>
-                </dl>
-            </section>
-
-            <v-divider />
-
-            <section v-if="tenantId" class="section pa-5" data-testid="comment-section">
-                <h3 class="section-title text-subtitle-2 mb-3">Комментарий</h3>
-                <v-textarea
-                    v-model="commentDraft"
-                    placeholder="Заметка менеджера…"
-                    variant="outlined"
-                    density="comfortable"
-                    auto-grow
-                    rows="3"
-                    hide-details
-                    counter="5000"
-                    data-testid="comment-textarea"
-                />
-                <div class="d-flex ga-2 mt-2 justify-end">
-                    <v-btn
-                        :loading="commentSaving"
-                        color="primary"
-                        size="small"
-                        prepend-icon="mdi-content-save-outline"
-                        data-testid="save-comment-btn"
-                        @click="saveComment"
-                    >
-                        Сохранить
-                    </v-btn>
-                </div>
-            </section>
-
-            <v-divider v-if="tenantId" />
-
-            <section v-if="tenantId && deal" class="section pa-5" data-testid="reminders-section">
-                <div class="d-flex justify-space-between align-center mb-3">
-                    <h3 class="section-title text-subtitle-2 mb-0">Напоминания</h3>
-                    <v-btn
-                        size="x-small"
-                        variant="text"
-                        prepend-icon="mdi-plus"
-                        data-testid="add-reminder-btn"
-                        @click="reminderDialogOpen = true"
-                    >
-                        Создать
-                    </v-btn>
-                </div>
-                <div v-if="reminders.length === 0 && !remindersLoading" class="text-caption text-medium-emphasis">
-                    Нет активных напоминаний.
-                </div>
-                <ul v-else class="reminders-list">
-                    <li v-for="r in reminders" :key="r.id" class="reminder-row" data-testid="drawer-reminder-item">
-                        <v-btn
-                            icon="mdi-check-circle-outline"
-                            size="x-small"
-                            variant="text"
-                            density="comfortable"
-                            :data-testid="`drawer-complete-${r.id}`"
-                            @click="completeReminderInDrawer(r.id)"
-                        />
-                        <div class="reminder-body">
-                            <div class="reminder-text">{{ r.text || 'Без описания' }}</div>
-                            <div class="reminder-meta text-caption text-medium-emphasis">
-                                {{ formatReminderTime(r.remind_at) }}
-                            </div>
-                        </div>
-                    </li>
-                </ul>
-            </section>
-
-            <v-divider v-if="tenantId && deal" />
-
-            <DealDetailTimeline :events="events" :events-fetch-error="eventsFetchError" />
-
-            <v-snackbar
-                v-model="commentToastOpen"
-                :timeout="3000"
-                :color="commentSaveError ? 'warning' : undefined"
-                data-testid="comment-toast"
-                location="bottom right"
-            >
-                {{ commentToastText }}
-            </v-snackbar>
-
-            <ReminderDialog
-                v-if="tenantId && deal"
-                v-model="reminderDialogOpen"
-                :deal-id="deal.id"
-                @saved="onReminderSaved"
-            />
-        </div>
+    <aside v-if="inline" v-show="open" class="deal-detail-inline" data-testid="deal-detail-panel">
+        <DealDetailBody :deal="deal" :tenant-id="tenantId" @close="close" />
+    </aside>
+    <v-navigation-drawer
+        v-else
+        v-model="drawerOpen"
+        location="right"
+        temporary
+        :width="480"
+        class="deal-drawer"
+    >
+        <DealDetailBody :deal="deal" :tenant-id="tenantId" @close="close" />
     </v-navigation-drawer>
 </template>
 
@@ -312,75 +51,16 @@ defineExpose({
 .deal-drawer {
     background: #fff;
 }
-
-.drawer-content {
-    display: flex;
-    flex-direction: column;
-}
-
-.section-title {
-    font-weight: 600;
-    color: #081319;
-}
-
-.params {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 16px 12px;
-    margin: 0;
-}
-.param dt {
-    font-size: 11px;
-    margin-bottom: 2px;
-}
-.param dd {
-    margin: 0;
-    color: #081319;
-}
-.param .link {
-    color: #0f6e56;
-    cursor: pointer;
-}
-.param .link:hover {
-    text-decoration: underline;
-}
-
-.num {
-    font-family: 'JetBrains Mono', ui-monospace, monospace;
-    font-feature-settings: 'tnum';
-}
-
-.reminders-list {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-}
-
-.reminder-row {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 6px 8px;
+.deal-detail-inline {
+    flex: 0 0 400px;
+    width: 400px;
+    background: #fff;
     border: 1px solid #e8e3d6;
-    border-radius: 6px;
-    background: #fdfaf3;
-}
-
-.reminder-body {
-    flex: 1;
-    min-width: 0;
-}
-
-.reminder-text {
-    font-size: 13px;
-    line-height: 1.4;
-    color: #081319;
-}
-
-.reminder-meta {
-    margin-top: 2px;
+    border-radius: 8px;
+    overflow-y: auto;
+    align-self: flex-start;
+    max-height: calc(100vh - 160px);
+    position: sticky;
+    top: 16px;
 }
 </style>
diff --git a/app/tests/Frontend/DealDetailDrawer.spec.ts b/app/tests/Frontend/DealDetailDrawer.spec.ts
index 9cbf043d..a51d8e6c 100644
--- a/app/tests/Frontend/DealDetailDrawer.spec.ts
+++ b/app/tests/Frontend/DealDetailDrawer.spec.ts
@@ -1,95 +1,46 @@
-import { describe, it, expect, beforeEach } from 'vitest';
+import { describe, it, expect } from 'vitest';
 import { mount } from '@vue/test-utils';
 import { createVuetify } from 'vuetify';
 import { createPinia, setActivePinia } from 'pinia';
 import DealDetailDrawer from '../../resources/js/components/deals/DealDetailDrawer.vue';
-import { MOCK_DEALS } from '../../resources/js/composables/mockDeals';
+import type { MockDeal } from '../../resources/js/composables/mockDeals';
 
-beforeEach(() => {
+const vuetify = createVuetify();
+const deal: MockDeal = {
+    id: 1, name: '+7 999', phone: '+7 999', statusSlug: 'new', project: 'Окна',
+    manager: { initials: 'AD', name: 'Admin' }, cost: 0, receivedMinutesAgo: 5,
+};
+
+function mountDrawer(props: Record<string, unknown>) {
     setActivePinia(createPinia());
-});
-
-// DealDetailDrawer использует v-navigation-drawer, который требует layout-
-// контекст от v-app/v-layout. В Vitest auto-import недоступен — stub'им
-// v-navigation-drawer как passthrough div чтобы slot-content рендерился
-// и был доступен для assertion.
-
-describe('DealDetailDrawer.vue', () => {
-    const factory = (props: { open: boolean; deal: (typeof MOCK_DEALS)[number] | null }) =>
-        mount(DealDetailDrawer, {
-            props,
-            global: {
-                plugins: [createVuetify()],
-                stubs: {
-                    VNavigationDrawer: {
-                        template: '<div class="drawer-stub" v-if="modelValue"><slot /></div>',
-                        props: ['modelValue'],
-                    },
+    return mount(DealDetailDrawer, {
+        props: { open: true, deal, ...props },
+        global: {
+            plugins: [vuetify, createPinia()],
+            stubs: {
+                DealDetailBody: true,
+                VNavigationDrawer: {
+                    template: '<div class="drawer-stub" v-if="modelValue"><slot /></div>',
+                    props: ['modelValue'],
                 },
             },
-        });
+        },
+    });
+}
 
-    const sampleDeal = MOCK_DEALS[0]; // Анна Соколова
-
-    it('не рендерит контент когда open=false', () => {
-        const wrapper = factory({ open: false, deal: sampleDeal });
-        expect(wrapper.find('.drawer-stub').exists()).toBe(false);
+describe('DealDetailDrawer wrapper', () => {
+    it('inline=true рендерит <aside> (master-detail панель)', () => {
+        const w = mountDrawer({ inline: true });
+        expect(w.find('aside.deal-detail-inline').exists()).toBe(true);
     });
 
-    it('не рендерит контент когда deal=null (даже при open=true)', () => {
-        const wrapper = factory({ open: true, deal: null });
-        // Drawer открыт, но deal нет — content внутри v-if не рендерится.
-        const stub = wrapper.find('.drawer-stub');
-        if (stub.exists()) {
-            // Нет hero/section элементов внутри.
-            expect(wrapper.find('.hero').exists()).toBe(false);
-        }
+    it('inline=false (по умолчанию) рендерит overlay v-navigation-drawer', () => {
+        const w = mountDrawer({});
+        expect(w.find('aside.deal-detail-inline').exists()).toBe(false);
     });
 
-    it('рендерит hero с именем сделки и id', () => {
-        const wrapper = factory({ open: true, deal: sampleDeal });
-        const text = wrapper.text();
-        expect(text).toContain(sampleDeal.name);
-        expect(text).toContain(`#${sampleDeal.id}`);
-    });
-
-    it('рендерит phone как кликабельную ссылку tel:', () => {
-        const wrapper = factory({ open: true, deal: sampleDeal });
-        const phoneLink = wrapper.find('.phone-link');
-        expect(phoneLink.exists()).toBe(true);
-        expect(phoneLink.attributes('href')).toMatch(/^tel:\+/);
-        expect(phoneLink.text()).toBe(sampleDeal.phone);
-    });
-
-    it('рендерит status-chip с nameRu статуса сделки', () => {
-        const wrapper = factory({ open: true, deal: sampleDeal });
-        // sampleDeal.statusSlug='new' → 'Новые'.
-        expect(wrapper.text()).toContain('Новые');
-    });
-
-    it('рендерит секцию параметров с проектом, стоимостью, менеджером', () => {
-        const wrapper = factory({ open: true, deal: sampleDeal });
-        const text = wrapper.text();
-        expect(text).toContain('Параметры');
-        expect(text).toContain(sampleDeal.project);
-        expect(text).toContain(sampleDeal.manager.name);
-        expect(text).toMatch(/1\s+850\s*₽/); // sampleDeal.cost = 1850
-    });
-
-    it('рендерит timeline без событий (без tenantId events пуст — I3)', () => {
-        const wrapper = factory({ open: true, deal: sampleDeal });
-        const items = wrapper.findAll('.timeline-item');
-        expect(items).toHaveLength(0);
-    });
-
-    it('emit-ит update:open=false при close-кнопке', async () => {
-        const wrapper = factory({ open: true, deal: sampleDeal });
-        // Vuetify v-btn рендерит как button. close-btn — единственный с aria-label.
-        const closeBtn = wrapper.find('button[aria-label="Закрыть панель"]');
-        if (closeBtn.exists()) {
-            await closeBtn.trigger('click');
-            expect(wrapper.emitted('update:open')).toBeTruthy();
-            expect(wrapper.emitted('update:open')?.[0]).toEqual([false]);
-        }
+    it('inline-панель содержит DealDetailBody', () => {
+        const w = mountDrawer({ inline: true });
+        expect(w.findComponent({ name: 'DealDetailBody' }).exists()).toBe(true);
     });
 });
diff --git a/app/tests/Frontend/DealDetailDrawerApi.spec.ts b/app/tests/Frontend/DealDetailDrawerApi.spec.ts
index b06909cf..4aad5365 100644
--- a/app/tests/Frontend/DealDetailDrawerApi.spec.ts
+++ b/app/tests/Frontend/DealDetailDrawerApi.spec.ts
@@ -2,7 +2,7 @@ import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { mount, flushPromises } from '@vue/test-utils';
 import { createVuetify } from 'vuetify';
 import { createPinia, setActivePinia } from 'pinia';
-import DealDetailDrawer from '../../resources/js/components/deals/DealDetailDrawer.vue';
+import DealDetailBody from '../../resources/js/components/deals/DealDetailBody.vue';
 import { MOCK_DEALS } from '../../resources/js/composables/mockDeals';
 import type { GetDealResponse, ApiDealEvent } from '../../resources/js/api/deals';
 
@@ -22,17 +22,11 @@ beforeEach(() => {
     setActivePinia(createPinia());
 });
 
-const factory = (props: { open: boolean; tenantId?: number }) =>
-    mount(DealDetailDrawer, {
+const factory = (props: { tenantId?: number }) =>
+    mount(DealDetailBody, {
         props: { deal: MOCK_DEALS[0], ...props },
         global: {
             plugins: [createVuetify()],
-            stubs: {
-                VNavigationDrawer: {
-                    template: '<div class="drawer-stub" v-if="modelValue"><slot /></div>',
-                    props: ['modelValue'],
-                },
-            },
         },
     });
 
@@ -47,9 +41,9 @@ function makeApiEvent(overrides: Partial<ApiDealEvent> = {}): ApiDealEvent {
     };
 }
 
-describe('DealDetailDrawer ↔ GET /api/deals/{id} integration', () => {
+describe('DealDetailBody ↔ GET /api/deals/{id} integration', () => {
     it('БЕЗ tenantId — getDeal не вызывается, events пуст (I3)', async () => {
-        const wrapper = factory({ open: true });
+        const wrapper = factory({});
         await flushPromises();
 
         expect(dealsApi.getDeal).not.toHaveBeenCalled();
@@ -89,7 +83,7 @@ describe('DealDetailDrawer ↔ GET /api/deals/{id} integration', () => {
         };
         vi.mocked(dealsApi.getDeal).mockResolvedValueOnce(apiResponse);
 
-        const wrapper = factory({ open: true, tenantId: 1 });
+        const wrapper = factory({ tenantId: 1 });
         await flushPromises();
 
         expect(dealsApi.getDeal).toHaveBeenCalledWith(MOCK_DEALS[0].id, 1);
@@ -102,7 +96,7 @@ describe('DealDetailDrawer ↔ GET /api/deals/{id} integration', () => {
     it('getDeal reject → eventsFetchError=true, alert виден, events пуст (I3)', async () => {
         vi.mocked(dealsApi.getDeal).mockRejectedValueOnce(new Error('500'));
 
-        const wrapper = factory({ open: true, tenantId: 1 });
+        const wrapper = factory({ tenantId: 1 });
         await flushPromises();
 
         const vm = wrapper.vm as unknown as { eventsFetchError: boolean };
@@ -113,8 +107,8 @@ describe('DealDetailDrawer ↔ GET /api/deals/{id} integration', () => {
         expect(items).toHaveLength(0);
     });
 
-    it('open=false → getDeal не вызывается', async () => {
-        factory({ open: false, tenantId: 1 });
+    it('без tenantId → getDeal не вызывается (body загружается по deal/tenantId)', async () => {
+        factory({});
         await flushPromises();
         expect(dealsApi.getDeal).not.toHaveBeenCalled();
     });
@@ -147,7 +141,7 @@ describe('DealDetailDrawer ↔ GET /api/deals/{id} integration', () => {
             comment: 'новая заметка',
         });
 
-        const wrapper = factory({ open: true, tenantId: 1 });
+        const wrapper = factory({ tenantId: 1 });
         await flushPromises();
 
         const vm = wrapper.vm as unknown as {
@@ -197,7 +191,7 @@ describe('DealDetailDrawer ↔ GET /api/deals/{id} integration', () => {
         });
         vi.mocked(dealsApi.updateDeal).mockRejectedValueOnce(new Error('500'));
 
-        const wrapper = factory({ open: true, tenantId: 1 });
+        const wrapper = factory({ tenantId: 1 });
         await flushPromises();
 
         const vm = wrapper.vm as unknown as {
@@ -215,7 +209,7 @@ describe('DealDetailDrawer ↔ GET /api/deals/{id} integration', () => {
     });
 
     it('comment-section не показывается без tenantId (read-only mode)', async () => {
-        const wrapper = factory({ open: true });
+        const wrapper = factory({});
         await flushPromises();
         expect(wrapper.find('[data-testid="comment-section"]').exists()).toBe(false);
     });