fix(web): restore native terminal context menu

[skulidropek]

Summary

• restore the native browser context menu for terminal right-clicks
• keep terminal mouse-tracking selection and xterm copy behavior working
• keep terminal header controls from wrapping into the SSH command area

Fixes #324

Verification

• bun --cwd packages/app vitest run tests/docker-git/terminal-copy-interaction.test.ts tests/docker-git/panel-terminal-skiller.test.ts
• bun run --cwd packages/app lint
• bun run --cwd packages/app lint:tests
• bun run --cwd packages/app check
• bun run --cwd packages/app build:web
• git diff --check
• MCP Playwright: local and Cloudflare terminal contextmenu bubbles with defaultPrevented=false; drag selection works

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 97809c23-8974-40f2-8f7e-6a904760372d

📥 Commits

Reviewing files that changed from the base of the PR and between d767695 and f8425e3.

📒 Files selected for processing (4)

• packages/app/src/web/panel-terminal.tsx
• packages/app/src/web/terminal-copy-interaction.ts
• packages/app/tests/docker-git/panel-terminal-skiller.test.ts
• packages/app/tests/docker-git/terminal-copy-interaction.test.ts

📜 Recent review details

🧰 Additional context used

📓 Path-based instructions (8)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.{ts,tsx}: Implement Functional Core, Imperative Shell (FCIS) pattern: CORE layer contains only pure functions with immutable data and mathematical operations; SHELL layer isolates all effects (IO, network, database). Strict dependency direction: SHELL → CORE (never reverse).
Never use any, unknown, eslint-disable, ts-ignore, or as type assertions (except in rigorously justified cases with documentation). Always use exhaustive union type analysis through .exhaustive() pattern matching.
All external dependencies must be wrapped through typed interfaces and injected via Effect-TS Layer pattern. Never call external services directly from CORE functions.
Use monadic composition with Effect-TS for all effects: Effect<Success, Error, Requirements>. Compose effects through pipe() and Effect.flatMap(). Implement dependency injection via Layer pattern. Handle errors without try/catch blocks.
All functions must be pure in the CORE layer: no side effects (logging, console output, IO operations, mutations). Separate all side effects into the SHELL layer.
Use exhaustive pattern matching with Effect.Match instead of switch statements. Example: Match.value(item).pipe(Match.when(...), Match.exhaustive).
Document all functions with comprehensive TSDoc including: @pure (true/false), @effect (required services), @invariant (mathematical invariants), @precondition, @postcondition, @complexity (time and space), @throws Never (errors must be typed in Effect).
Use functional comment markers for code clarity: CHANGE (brief description), WHY (mathematical/architectural justification), QUOTE(ТЗ) (requirement citation), REF (RTM or message ID), SOURCE (external source with quote), FORMAT THEOREM (∀x ∈ Domain: P(x) → Q(f(x))), PURITY (CORE|SHELL), EFFECT (Effect type signature), INVARIANT (mathematical invariant), COMPLEXITY (time/space).
Define all external service dependencies as Context.Tag classes with fully typed methods returning Effect types. Example: `class Da...

Files:

• packages/app/tests/docker-git/panel-terminal-skiller.test.ts
• packages/app/src/web/terminal-copy-interaction.ts
• packages/app/tests/docker-git/terminal-copy-interaction.test.ts
• packages/app/src/web/panel-terminal.tsx

**/*.test.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.test.{ts,tsx}: Implement property-based testing using fast-check for mathematical properties and invariants. Example: fc.property(fc.array(messageArbitrary), (messages) => isChronologicallySorted(sortMessagesByTimestamp(messages))).
Mock external dependencies in unit tests using Effect's testing utilities. Run tests without Effect runtime for speed. Example: Effect.provide(MockService), Effect.runPromise.

Files:

• packages/app/tests/docker-git/panel-terminal-skiller.test.ts
• packages/app/tests/docker-git/terminal-copy-interaction.test.ts

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{ts,tsx,js,jsx}: Forbidden constructs in CORE code: any, eslint-disable, ts-ignore, async/await, raw Promise chains (then/catch), Promise.all, try/catch for logic control, console.*, switch statements (use Match with .exhaustive() instead)
All functions must use Effect-TS for composing effects: Effect<Success, Error, Requirements>. No direct async/await, Promise chains, or try/catch in product logic.
Functional comments must include: CHANGE, WHY, QUOTE(ТЗ) or n/a, REF, SOURCE or n/a, FORMAT THEOREM, PURITY (CORE|SHELL), EFFECT signature for SHELL functions, INVARIANT, and COMPLEXITY.
All data mutations must use immutable patterns (ReadonlyArray, readonly properties, Object.freeze); mutation in SHELL only when absolutely necessary and documented.

Files:

• packages/app/tests/docker-git/panel-terminal-skiller.test.ts
• packages/app/src/web/terminal-copy-interaction.ts
• packages/app/tests/docker-git/terminal-copy-interaction.test.ts
• packages/app/src/web/panel-terminal.tsx

**/*.{test,spec}.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Property-based tests (fast-check) must verify mathematical invariants; unit tests must use Effect test utilities without async/await.

Files:

• packages/app/tests/docker-git/panel-terminal-skiller.test.ts
• packages/app/tests/docker-git/terminal-copy-interaction.test.ts

**/*.{sh,bash,py,js,ts,jsx,tsx,go,java,rb,php}

📄 CodeRabbit inference engine (Custom checks)

Fail if changed files introduce command injection or unsafe shell/process execution with user-controlled input

Files:

• packages/app/tests/docker-git/panel-terminal-skiller.test.ts
• packages/app/src/web/terminal-copy-interaction.ts
• packages/app/tests/docker-git/terminal-copy-interaction.test.ts
• packages/app/src/web/panel-terminal.tsx

**/*.{py,js,ts,jsx,tsx,go,java,rb,php,sh,bash,c,cpp}

📄 CodeRabbit inference engine (Custom checks)

Fail if changed files introduce path traversal or writes outside intended project/container state directories

Files:

• packages/app/tests/docker-git/panel-terminal-skiller.test.ts
• packages/app/src/web/terminal-copy-interaction.ts
• packages/app/tests/docker-git/terminal-copy-interaction.test.ts
• packages/app/src/web/panel-terminal.tsx

**/*.{js,ts,jsx,tsx,py,java,go,rb,php,sh,bash,yml,yaml,json,env*,toml,cfg,config,dockerfile,dockerignore}

📄 CodeRabbit inference engine (Custom checks)

Fail if changed files expose credentials, tokens, private-keys, or PII in source, generated config, logs, or CI output

Files:

• packages/app/tests/docker-git/panel-terminal-skiller.test.ts
• packages/app/src/web/terminal-copy-interaction.ts
• packages/app/tests/docker-git/terminal-copy-interaction.test.ts
• packages/app/src/web/panel-terminal.tsx

**/*

⚙️ CodeRabbit configuration file

**/*: Ты строгий ревьюер SPEC DRIVEN DEVELOPMENT.

Перед выводами изучи README.md, другие *.md файлы, linked issues,
PR description, PR comments/discussion и релевантную кодовую базу.

Сверь изменения с исходным ТЗ/спекой и обсуждением. Флагай любой уход
от спеки, недокументированное изменение поведения, отсутствие тестов
для заявленного поведения и security-риск. Если спека не видна,
попроси автора добавить ее в issue или PR description.

Проверь решение с точки зрения формальной верификации: какие инварианты,
предусловия и постусловия можно доказать математически, а где доказуемость
слабая. Оцени решение с точки зрения теории игр: устойчивы ли стимулы,
нет ли выгодного обхода правил, и какое решение было бы сильнее.

Files:

• packages/app/tests/docker-git/panel-terminal-skiller.test.ts
• packages/app/src/web/terminal-copy-interaction.ts
• packages/app/tests/docker-git/terminal-copy-interaction.test.ts
• packages/app/src/web/panel-terminal.tsx

🔇 Additional comments (4)

packages/app/src/web/panel-terminal.tsx (1)

54-60: LGTM!

Also applies to: 66-68, 145-146, 152-156, 234-253, 278-286

packages/app/tests/docker-git/panel-terminal-skiller.test.ts (1)

59-68: LGTM!

Also applies to: 97-97

packages/app/src/web/terminal-copy-interaction.ts (1)

35-73: LGTM!

Also applies to: 130-177, 182-193, 208-208

packages/app/tests/docker-git/terminal-copy-interaction.test.ts (1)

4-4: LGTM!

Also applies to: 22-127, 182-266

---

📝 Walkthrough

Summary by CodeRabbit

• Style

  • Переработан макет заголовка терминальной панели для улучшения представления информации о сеансе в компактном и расширенном режимах.

• New Features

  • Добавлена поддержка более точного управления выделением текста при работе с операциями перетаскивания в терминале.

Walkthrough

Обновлена компоновка терминальной шапки для вертикального разделения заголовка, статуса и действий, и добавлен контроллер управления выделением при drag-операциях с корректной очисткой слушателей.

Changes

Terminal Panel Selection & Layout Improvements

Layer / File(s)	Summary
Terminal header layout refactor packages/app/src/web/panel-terminal.tsx, packages/app/tests/docker-git/panel-terminal-skiller.test.ts	Введена flex-column раскладка в headerStyle с alignItems: stretch для вертикального разделения. Переопределены headerActionsStyle и compactHeaderActionsStyle с раздельным управлением justifyContent и width. Добавлены новые стили headerTitleStyle, headerStatusStyle, headerSubtitleStyle с настройками обрезки текста для подзаголовка. Обновлено отображение в TerminalHeaderTitle на использование новых стилевых объектов. Тесты проверяют наличие flex-direction:column для desktop и flex-direction:row для compact, а также text-overflow:ellipsis для подзаголовка.
Selection drag controller for forced modifiers packages/app/src/web/terminal-copy-interaction.ts, packages/app/tests/docker-git/terminal-copy-interaction.test.ts	Добавлены типы TerminalSelectionDragTarget, TerminalSelectionDragController и события mousemove/mouseup. Реализованы функции resolveTerminalSelectionDragTarget и createTerminalSelectionDragController для управления жизненным циклом drag-слушателей и вызова forceTerminalSelectionModifier. Обновлена attachTerminalCopyInteraction для инициации selectionDrag.start() при первичной кнопке и вызова dispose() при очистке. Тестовая инфраструктура включает фейковые EventTarget, Host и проверки корректности навешивания/снятия drag-слушателей, fallback-логики при недоступном ownerDocument и одноразовости обработки right-click.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• ProverCoderAI/docker-git#322: Прямое пересечение с изменениями terminal-copy-interaction.ts — оба PR добавляют logic форсирования selection-modifier'ов при drag-операциях в терминале.
• ProverCoderAI/docker-git#297: Оба PR модифицируют panel-terminal.tsx и стили терминальной шапки; PR#297 добавляет новую кнопку в header actions, а основной PR переделывает flex-раскладку и стили title/status/subtitle.

🚥 Pre-merge checks | ✅ 7

✅ Passed checks (7 passed)

Check name	Status	Explanation
Title check	✅ Passed	Название точно описывает основной результат изменений - восстановление нативного контекстного меню терминала при правом клике, что соответствует цели issue #324.
Description check	✅ Passed	Описание охватывает все ключевые аспекты: восстановление меню, сохранение функциональности выделения и форматирование заголовка. Включены подробные шаги проверки.
Linked Issues check	✅ Passed	Изменения полностью соответствуют требованию issue #324: восстановлена стабильная работа выделения мышкой в терминале через новые компоненты drag-контроллера и исправленную логику обработки событий.
Out of Scope Changes check	✅ Passed	Все изменения находятся в области действия issue #324: правка логики копирования терминала, добавление поддержки drag-контроля и корректировка стилей заголовка для предотвращения наложения элементов управления.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Requirements Alignment	✅ Passed	PR выполняет все требования: контекстное меню восстановлено, mouse-selection сохранена, header layout исправлен. Все обещанные поведения покрыты тестами. Сигнатуры функций не изменены.
Security Regression	✅ Passed	PR содержит изменения только в React компонентах и логике событий UI. Проверено отсутствие инъекций команд, XSS, утечек данных, работы с путями и небезопасной конфигурации Docker/Actions.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch issue-324

Warning

Review ran into problems

🔥 Problems

Git: Failed to clone repository. Please run the @coderabbitai full review command to re-trigger a full review. If the issue persists, set path_filters to include or exclude specific files.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}