agent-ecosystem/docs/research/split-screen-multi-view.md

Split Screen Multi-View Research

Исследование: поддержка одновременного просмотра нескольких сессий/команд в split pane. Дата: 2026-03-10

Текущее состояние архитектуры

Split Pane System (уже реализовано)

• До 4 панелей одновременно (MAX_PANES = 4 в src/renderer/types/panes.ts)
• Drag-and-drop между панелями (dnd-kit, TabbedLayout.tsx)
• Resize handles между панелями (PaneResizeHandle.tsx)
• CSS display: none toggle — все вкладки mounted, только active видна (PaneContent.tsx)
• TabUIContext предоставляет tabId потомкам

Pane Layout Structure

// src/renderer/types/panes.ts
interface Pane {
  id: string;
  tabs: Tab[];
  activeTabId: string;
  selectedTabIds: string[];
  widthFraction: number; // 0-1, сумма всех = 1.0
}

interface PaneLayout {
  panes: Pane[];
  focusedPaneId: string; // какая панель в фокусе
}

Backward Compatibility Facade

Root-level openTabs, activeTabId, selectedTabIds синхронизируются из focused pane only через syncFromLayout() в tabSlice.ts.

---

Изоляция состояния: что per-tab vs глобальное

✅ Per-Tab (уже изолировано)

Состояние	Хранение	Слайс
UI expansion state	tabUIStates[tabId]	tabUISlice
Scroll position	tabUIStates[tabId].savedScrollTop	tabUISlice
Context panel visibility	tabUIStates[tabId].showContextPanel	tabUISlice
Context phase selection	tabUIStates[tabId].selectedContextPhase	tabUISlice
Session data cache	tabSessionData[tabId]	sessionDetailSlice
Conversation cache	tabSessionData[tabId].conversation	sessionDetailSlice

Паттерн чтения:

const stats = useStore((s) => {
  const td = tabId ? s.tabSessionData[tabId] : null;
  return td?.sessionClaudeMdStats ?? s.sessionClaudeMdStats;
});

❌ Глобальное (проблемы для multi-view)

Состояние	Слайс	Проблема
selectedTeamName	teamSlice	Одна команда на всё приложение
selectedTeamData	teamSlice	Полные данные только одной команды
searchQuery	conversationSlice	Поиск общий для всех вкладок
searchVisible	conversationSlice	Показ поиска общий
searchMatches	conversationSlice	Результаты поиска общие
currentSearchIndex	conversationSlice	Навигация по результатам общая
expandedAIGroupIds	conversationSlice	Legacy дубль tabUISlice
expandedDisplayItemIds	conversationSlice	Legacy дубль tabUISlice
expandedStepIds	conversationSlice	Глобальное, логично per-tab
activeDetailItem	conversationSlice	Глобальное, логично per-tab

⚠️ Синхронизируемое (работает через swap)

Состояние	Механизм
selectedProjectId	Swap при фокусе pane
selectedSessionId	Swap при фокусе pane
sessionDetail (global)	Swap из tabSessionData[tabId]
conversation (global)	Swap из tabSessionData[tabId]

---

Варианты реализации

Вариант A: Полная поддержка split-screen для сессий

Надёжность: 8/10 | Уверенность: 9/10

Основа уже заложена через tabSessionData. Нужно:

1. Search isolation (~5 файлов):

   • Перенести searchQuery, searchVisible, searchMatches, currentSearchIndex в tabUISlice
   • Обновить SearchBar, useSearchContextNavigation, searchHighlightUtils
   • Компоненты читают search state через tabUIStates[tabId]

2. Legacy cleanup (~3 файла):

   • Удалить expandedAIGroupIds и expandedDisplayItemIds из conversationSlice
   • Убедиться все компоненты используют tabUISlice версии
   • Удалить expandedStepIds из global scope

3. Верификация (~3 файла):

   • Проверить все компоненты в chat/ читают через tabSessionData[tabId] паттерн
   • Проверить что activeDetailItem изолирован

Объём: ~8-12 файлов, средняя сложность.

Вариант B: Полная поддержка split-screen для команд

Надёжность: 7/10 | Уверенность: 7/10

Нужна новая инфраструктура:

1. Per-tab team data cache (~5 файлов):

   // В teamSlice или sessionDetailSlice
   tabTeamData: Record<string, {
     teamName: string;
     teamData: TeamData | null;
     loading: boolean;
     error: string | null;
   }>
   

2. selectTeam() с tabId (~3 файла):

   • selectTeam(teamName, tabId?) — кэширует в tabTeamData[tabId]
   • При переключении tab: swap из кэша или fetch
   • При закрытии tab: cleanup кэша

3. Team компоненты (~8 файлов):

   • TeamDetailView, TeamChatView, TeamKanbanView и др.
   • Читать через tabTeamData[tabId] паттерн
   • File watcher: обновлять нужные tab кэши

4. Sidebar sync (~2 файла):

   • При фокусе pane с team tab: sync sidebar к этой команде

Объём: ~15-20 файлов, высокая сложность.

Вариант C: A + B (полный split-screen)

Надёжность: 6/10 | Уверенность: 7/10

Объём: ~20-25 файлов.

---

Риски

Высокие

1. Race conditions при file watcher events — обновление прилетает, нужно обновить правильный tab cache. Для сессий решено через tabFetchGeneration Map, для команд нужен аналог.
2. Search isolation — search завязан на глобальные searchMatches и навигацию по ним, самый трудоёмкий рефактор.

Средние

3. Memory pressure — каждый tab хранит полный кэш. Для сессий работает (cleanup при закрытии). Для команд нужен аналог.
4. Sidebar sync — сайдбар показывает контекст focused pane. При переключении нужен корректный swap project/worktree/team.
5. Stale data — два tab с одной сессией/командой: file watcher обновляет оба или только active?

Низкие

6. DnD between panes — перетаскивание team tab между panes должно триггерить cache transfer.
7. Tab duplication — openTab() проверяет дупликаты across ALL panes. Нужно ли разрешить одну и ту же команду в двух panes?

---

Ключевые файлы

Store Slices

Файл	Роль
src/renderer/store/slices/tabSlice.ts	Tab lifecycle, session switching, backward compat
src/renderer/store/slices/paneSlice.ts	Multi-pane split/resize/focus
src/renderer/store/slices/tabUISlice.ts	Per-tab UI state (expansion, scroll)
src/renderer/store/slices/sessionDetailSlice.ts	Session data + per-tab caching
src/renderer/store/slices/conversationSlice.ts	Search, legacy expansion (нужен рефактор)
src/renderer/store/slices/teamSlice.ts	Team selection (глобальное, нужен рефактор)

Layout Components

Файл	Роль
src/renderer/components/layout/TabbedLayout.tsx	Main layout + DnD context
src/renderer/components/layout/TabBarRow.tsx	Full-width tab bar (pane-proportional)
src/renderer/components/layout/TabBar.tsx	Single pane tab bar
src/renderer/components/layout/PaneContainer.tsx	Split layout renderer
src/renderer/components/layout/PaneView.tsx	Single pane wrapper
src/renderer/components/layout/PaneContent.tsx	Tab content renderer (display-toggle)
src/renderer/components/layout/SessionTabContent.tsx	Session tab content

Contexts

Файл	Роль
src/renderer/contexts/TabUIContext.tsx	Per-tab ID provider
src/renderer/contexts/useTabUIContext.ts	Context hook

---

Рекомендация

Начать с Варианта A (сессии в split-screen):

• 80% инфраструктуры уже есть
• Нужно дочистить search isolation и legacy duplicates
• Низкий риск регрессий

Затем Вариант B (команды):

• Когда паттерн per-tab caching отработан на сессиях
• Применить тот же подход к team data

---

Обнаруженные баги (побочный результат ресёрча)

1. Search state не изолирован — поиск в одной вкладке влияет на другие
2. Legacy дублирование — expandedAIGroupIds существует и в conversationSlice и в tabUISlice
3. Team tabs в split pane — обе панели показывают одну команду (последнюю выбранную)