diff --git a/README.ja.md b/README.ja.md index c2d1ad88a0..5d1c8f5ebb 100644 --- a/README.ja.md +++ b/README.ja.md @@ -53,6 +53,17 @@ - **クロスデバイス:** iOS、Android、デスクトップ、Web、CLI に対応。机で作業を始め、スマートフォンで確認し、ターミナルから自動化できます。 - **プライバシー優先:** Paseo にはテレメトリー・トラッキング・強制ログインは一切ありません。 +## スポンサー + + + + + + + + +
Hoplite
Cloud coding agents		Paseo のスポンサーになるPaseo のスポンサーになる
+ ## はじめかた Paseo はコーディングエージェントを管理するローカルサーバー（デーモン）を起動します。デスクトップアプリ・モバイルアプリ・Web アプリ・CLI などのクライアントがこのデーモンに接続します。 @@ -151,11 +162,9 @@ npm run build:server npm run typecheck ``` -## スポンサー +## Paseo を支援する -Paseo は一人で開発しており、使ってくれる人たちの支援で成り立っています。[GitHub Sponsors](https://github.com/sponsors/boudra) で支援できます。企業として毎月[スポンサー](https://paseo.sh/sponsor#spot)になっていただくと、ロゴをここと paseo.sh のホームページに掲載します。 - - +Paseo は一人で開発しており、使ってくれる人たちの支援で成り立っています。[GitHub Sponsors](https://github.com/sponsors/boudra) で支援できます。企業として毎月[スポンサー](https://paseo.sh/sponsor#spot)になっていただくと、ロゴをこの README の冒頭と、paseo.sh のトップページおよびドキュメントに掲載します。 ## 関連プロジェクト diff --git a/README.ko.md b/README.ko.md index 60581767cd..7f2098221d 100644 --- a/README.ko.md +++ b/README.ko.md @@ -47,6 +47,17 @@ - **여러 기기 지원:** iOS, Android, 데스크톱, 웹, CLI를 지원합니다. 데스크톱에서 시작해 휴대폰으로 확인하고 터미널에서 자동화할 수 있습니다. - **개인정보 보호 우선:** Paseo는 텔레메트리, 추적, 강제 로그인을 사용하지 않습니다. +## 스폰서 + + + + + + + + +
Hoplite
Cloud coding agents		Paseo 스폰서 되기Paseo 스폰서 되기
+ ## 시작하기 Paseo는 코딩 에이전트를 관리하는 로컬 서버인 데몬을 실행합니다. 데스크톱 앱, 모바일 앱, 웹 앱, CLI 같은 클라이언트가 이 데몬에 연결합니다. @@ -161,11 +172,9 @@ npm run build:server npm run typecheck ``` -## 스폰서 +## Paseo 후원하기 -Paseo는 한 사람이 개발하며, 사용하는 분들의 후원으로 운영됩니다. [GitHub Sponsors](https://github.com/sponsors/boudra)로 후원할 수 있습니다. 회사는 매월 [Paseo를 후원](https://paseo.sh/sponsor#spot)하고 로고를 이곳과 paseo.sh 홈페이지에 게재할 수 있습니다. - - +Paseo는 한 사람이 개발하며, 사용하는 분들의 후원으로 운영됩니다. [GitHub Sponsors](https://github.com/sponsors/boudra)로 후원할 수 있습니다. 회사는 매월 [Paseo를 후원](https://paseo.sh/sponsor#spot)하고 로고를 이 README 상단과 paseo.sh 홈페이지 및 문서에 게재할 수 있습니다. ## 관련 프로젝트 diff --git a/README.md b/README.md index 2fc0fc8f3d..91310cd7c7 100644 --- a/README.md +++ b/README.md @@ -52,6 +52,17 @@ Paseo is an open source agentic development environment for desktop, mobile, web [Run parallel tasks in Paseo](https://paseo.sh/docs/parallel-development): start agents in separate worktrees, review their diffs, run each app, and check it in the built-in browser. +## Sponsors + + + + + + + + +
Hoplite
Cloud coding agents		Become a sponsorBecome a sponsor
+ ## Plugins Plugins run on the daemon and show up in every client you connect, with the same UI on desktop, web, @@ -207,11 +218,9 @@ npm run build:server npm run typecheck ``` -## Sponsors +## Support Paseo -Paseo is an independent project used by tens of thousands of developers daily, built by one person and funded by the people who use it. Support the work on [GitHub Sponsors](https://github.com/sponsors/boudra). Companies can [sponsor Paseo](https://paseo.sh/sponsor#spot) monthly and have their logo shown here and on the paseo.sh homepage. - - +Paseo is an independent project used by tens of thousands of developers daily, built by one person and funded by the people who use it. Support the work on [GitHub Sponsors](https://github.com/sponsors/boudra). Companies can [sponsor Paseo](https://paseo.sh/sponsor#spot) monthly and have their logo shown at the top of this README and on the paseo.sh homepage and docs. ## Related projects diff --git a/README.zh-CN.md b/README.zh-CN.md index dfdf673b2e..745071f0fe 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -53,6 +53,17 @@ - **跨设备：** 支持 iOS、Android、桌面端、Web 和 CLI。在桌前开始工作，用手机查看进度，也可以从终端脚本化操作。 - **隐私优先：** Paseo 没有遥测、追踪，也不会强制登录。 +## 赞助商 + + + + + + + + +
Hoplite
Cloud coding agents		成为 Paseo 赞助商成为 Paseo 赞助商
+ ## 快速开始 Paseo 会运行一个名为 daemon 的本地服务，用来管理你的 coding agents。桌面 app、移动 app、Web app 和 CLI 等客户端都会连接到它。 @@ -151,11 +162,9 @@ npm run build:server npm run typecheck ``` -## 赞助 +## 支持 Paseo -Paseo 由一个人开发，靠使用它的人来资助。你可以通过 [GitHub Sponsors](https://github.com/sponsors/boudra) 支持这项工作。公司也可以按月[赞助 Paseo](https://paseo.sh/sponsor#spot)，logo 会展示在这里和 paseo.sh 首页上。 - - +Paseo 由一个人开发，靠使用它的人来资助。你可以通过 [GitHub Sponsors](https://github.com/sponsors/boudra) 支持这项工作。公司也可以按月[赞助 Paseo](https://paseo.sh/sponsor#spot)，logo 会展示在本 README 顶部，以及 paseo.sh 的首页和文档中。 ## 相关项目 diff --git a/docs/agent-lifecycle.md b/docs/agent-lifecycle.md index f501538270..378a0070ea 100644 --- a/docs/agent-lifecycle.md +++ b/docs/agent-lifecycle.md @@ -212,7 +212,7 @@ parentAgentId === thisAgent.id AND !archivedAt - **Provider subagents** are child executions owned by Claude, Codex, or OpenCode. They are not inserted into `AgentManager` as managed agents. Providers emit a separate descriptor and timeline stream through `agent.provider_subagents.*`; the client keeps that state outside the normal agent store and merges only the presentation rows into the track. A descriptor's optional `parentSubagentId` identifies its direct provider-subagent parent; an absent value identifies a direct child of the managed agent. -Clicking either kind opens a workspace tab. On compact layouts it opens in the [workspace sheet](explorer-sidebar.md#workspace-sheet) instead; the sheet hides the composer, and a Paseo subagent's sheet offers **Open as tab** to get it back. A Paseo subagent tab is a normal interactive agent pane. A provider subagent tab is a read-only timeline pane with no composer, archive, detach, rewind, or fork actions. It shows its own direct children in a subagents track. Both panes use `AgentStreamView`, so message, reasoning, tool-call, and layout rendering stay identical. +Clicking either kind opens a workspace tab. On compact layouts it opens in a [sheet](explorer-sidebar.md#sheets) over the subagents list instead; the sheet hides the composer and shows the agent's model and thinking as one line in its place (`PaneSubtitle`, the row provider subagents already use), and a Paseo subagent's sheet offers **Open as tab** (the full-screen glyph in the header) to get the composer back. A Paseo subagent tab is a normal interactive agent pane. A provider subagent tab is a read-only timeline pane with no composer, archive, detach, rewind, or fork actions. It shows its own direct children in a subagents track. Both panes use `AgentStreamView`, so message, reasoning, tool-call, and layout rendering stay identical. Provider timelines use the same structural timeline item format but deliberately have a separate lifecycle and transport. A provider thread/session identifier is not a Paseo agent identifier, and closing its tab is always layout-only. diff --git a/docs/explorer-sidebar.md b/docs/explorer-sidebar.md index abd95fc35f..c9a89f8a58 100644 --- a/docs/explorer-sidebar.md +++ b/docs/explorer-sidebar.md @@ -7,7 +7,7 @@ contracts. | ---------------- | ---------------------------- | ------------------------------------------ | | Explorer sidebar | Files and Changes navigation | Cmd+E shows or hides the dedicated dock | | Side pane | Ordinary workspace content | Created and closed like any workspace pane | -| Workspace sheet | Compact look-ups | Holds one tab; closes or becomes a tab | +| Sheets | Compact look-ups | One tab each, on the app-wide sheet stack | ## Panel host contract @@ -23,18 +23,30 @@ can move between Explorer and main panes. Keep panel implementations independent of either shell. `WorkspacePanelHost` owns mounting and retention, while each shell owns its tabs, focus, dragging, resizing, and shortcuts. -## Workspace sheet +## Sheets -On compact layouts, files and subagents open in a closable sheet over the workspace, so the tab -switcher keeps only agents and terminals. A panel kind opts in with `compactSheet` in its manifest +On compact layouts, files and subagents open in a sheet over the workspace, so the tab switcher +keeps only agents and terminals. A panel kind opts in with `compactSheet` in its manifest (`packages/app/src/panels/panel-manifest.ts`), and the layout store's `openTab` decides between -sheet and tab, so callers open targets the same way on every layout. The sheet holds one ordinary -`WorkspaceTab`, which is not persisted. +sheet and tab, so callers open targets the same way on every layout. Each such sheet holds one +ordinary `WorkspaceTab` (`SheetTab` in the store) and is an `IsolatedBottomSheetModal` like every +other sheet in the app, so it sits on the one app-wide stack: a sheet opened from any sheet, a +subagent chosen from the subagents list included, lands on top of it, and closing the top sheet +(drag, Close, backdrop, or Android Back) uncovers the one below. The list stays open under the +sheet it opened; see [menus.md](menus.md#selecting-an-item-on-ios) for the row contract. -The sheet is modal and covers the whole compact column, header included. It renders in the -workspace tree rather than through `IsolatedBottomSheetModal`: its panel needs the navigator and -every workspace provider an ordinary pane has, and a portal drops them -([floating-panels.md Gotcha 7](floating-panels.md#gotcha-7--a-sheet-cannot-read-context-from-its-call-site)). +The store keeps `sheetsByWorkspace` in opening order and never reorders it, because moving a sheet +remounts its panel. Revealing a target that already has a sheet uncovers that sheet by closing the +ones above it, except ones holding unsaved work, which stay where they are. Opening a sheet as a tab +dismisses the sheets above it, since the tab would sit under them. The stack is not persisted. + +Sheets are modal and cover the whole compact column, header included. A sheet's header is its drag +handle, because the panel scrolls on its own and content panning would fight it. Its trailing rail +holds icon buttons only (`SheetHeaderIconButton`): Open as tab is the full-screen glyph beside +Close, so the title keeps its width. The sheets present +from inside the compact column's `SheetHostScope`, so their panels read the navigator and every +workspace provider an ordinary pane has without a context bridge +([floating-panels.md Gotcha 6](floating-panels.md#gotcha-6--bottom-sheet-refs-are-not-lifecycle-truth)). A sheet holding unsaved work is never implicitly displaced; only its guarded close removes it. Moving its tab to another host remounts the panel, and the file editor keeps unsaved text in the diff --git a/docs/floating-panels.md b/docs/floating-panels.md index 73df983a50..1af71ac4c9 100644 --- a/docs/floating-panels.md +++ b/docs/floating-panels.md @@ -198,6 +198,47 @@ viewport keeps the last keyboard reservation until the next opening replaces it, so a capped draft keeps one height through every keyboard transition instead of expanding on close and shrinking again on open. +Fullscreen is a layout mode of the dock, not a second editor. `ComposerDock +fullscreen` fills the stationary viewport with the composer slot over the +still-mounted content, paints its own surface under the safe areas, and turns +the surface translation off. The composer's single tree keeps the editing +surface at the same position in both modes, so the mounted editor, its native +buffer, selection, and focus survive the toggle and Send's clear always reaches +the live input. The one remount left is a viewport crossing the compact +breakpoint: the app shell swaps its gesture wrapper and the workspace screen +mounts tabs in different trees, so every screen below remounts. The draft owner +restores the text and the editing session restores the caret and focus intent. +New workspace keys its sessions by draft in the app-level store for the same +reason. The centered form honors fullscreen by style alone: no centering, no +translation, setup fields hidden, slot filling the stationary viewport. The +global exit action (Escape, hardware back) is registered only for the active +composer: a retained tab keeps its fullscreen editor mounted while hidden, the +sheet suspends pane focus, and the composer gives up input from the moment the +user asks for the compact agent list or explorer, before the panel's motion +settles. Pane focus itself stays put under those panels: the agent panel reads +it as "the user is in this chat" for attention clearing, and opening the agent +list must not clear the attention it shows. Focus restoration follows pane +focus, not the active composer. The editor keeps its focus intent only across +a blur that lands while its pane is not the user's (a retained tab hidden, a +sheet over it) and refocuses when the pane comes back. A blur while the pane is +theirs drops the intent in every layout mode, and the keyboard the compact +panels dismiss when they settle is such a blur, so closing the agent list or +explorer never reopens the keyboard. Keying restoration on the active composer +made that dismiss look like a hidden-tab blur and refocused on close. +The band beside the inline editor where the fullscreen glyph sits is the input's +own right padding, so a tap anywhere in it focuses the editor whether or not the +glyph shows. On web the slot is a fixed box over the visible viewport, which is +also what lets a zoomed mobile page pan under it. Inside the slot, `ComposerFullscreenBody` reserves the keyboard +height as a bottom margin at move start and end (boundary-time, like the +capacity reservation) while `ComposerFullscreenFooter` rides the keyboard per +frame with `KeyboardTranslateView`, so Send lands on the keyboard without a gap +and without animating the editor's height. The screen that owns the chrome +unmounts it: the workspace screen reads `useComposerTabFullscreen` for the +active tab and New workspace reads the mounted composer's session. Hosts that +render the dock pass the same `ComposerEditingSession` to the `Composer` so the +dock, chrome, and editor agree on one fullscreen state. Escape (web overlay +registration, focus untouched) and the Android back button leave fullscreen. + Keep setup fields out of the composer's shrink chain. New workspace supplies its setup fields as the first dock child so they move up under the header as the draft grows. Putting the fields and composer in one bounded, shrinkable column made @@ -302,11 +343,20 @@ Do not treat `onChange(-1)` as a close by itself. In a stacked another pushed sheet. Close React state from `onDismiss`; use `onChange` only to track phase. -All sheets use the app-wide Gorhom modal provider through `IsolatedBottomSheetModal`. This -includes native centered dialogs: separate React Native Modals cannot present a root-owned -sibling dialog over an existing iOS presenter. The one exception is the -[workspace sheet](explorer-sidebar.md#workspace-sheet), an in-tree Gorhom `BottomSheet` that hosts a -whole workspace panel. +All sheets use the app-wide Gorhom modal provider through `IsolatedBottomSheetModal`, with no +exceptions: one stack means a sheet opened from any sheet lands on top of it and uncovers it on +close. This includes native centered dialogs: separate React Native Modals cannot present a +root-owned sibling dialog over an existing iOS presenter. A sheet that must draw inside a subtree +(the [sheet tabs](explorer-sidebar.md#sheets) draw inside the compact workspace column so their +panels read the workspace providers) presents from inside a `SheetHostScope`, which moves the +portal host and container measurement while the sheet still joins the same stack. That export is +what `patches/@gorhom+bottom-sheet+*.patch` adds. + +A sheet whose owner may veto the close (unsaved work) passes `enableDismissOnClose={false}`. Every +close path then parks the sheet at index -1 with its content mounted; the owner hears +`onChange(-1)`, runs its guard, and either snaps back to 0 or drops its state, which unmounts the +sheet and takes it off the stack. Calling `dismiss()` on such a sheet bypasses the guard and +unmounts it, so its backdrop and Back press call `close()`. The wrapper must give Gorhom an object ref. Gorhom accepts a callback ref at the React boundary but stores it in the modal queue and later reads `.current`; provider dismissal, replacement, @@ -316,9 +366,10 @@ forwards commands to the current Gorhom handle. Request a backdrop with `backdropOpacity`; do not install a caller-owned backdrop. On web, Gorhom's default backdrop closes its own sheet, even when another modal is above it. Its animated pointer-event changes can expose a lower backdrop during a transition. The shared web backdrop -keeps its press target until portal teardown and asks the provider to dismiss the top modal. -Gorhom's presentation queue remains the authority; backdrop mount order is irrelevant. Native -retains Gorhom's gesture backdrop and the same push/replace presentation semantics. +keeps its press target until portal teardown and asks the provider to dismiss the top modal +(a guarded sheet closes itself instead, see above). Gorhom's presentation queue remains the +authority; backdrop mount order is irrelevant. Native retains Gorhom's gesture backdrop and the +same push/replace presentation semantics. ## Gotcha 7 — A sheet cannot read context from its call site diff --git a/docs/glossary.md b/docs/glossary.md index ac988e8d2b..644c109d44 100644 --- a/docs/glossary.md +++ b/docs/glossary.md @@ -21,7 +21,8 @@ Authoritative terminology. UI label wins. Don't invent synonyms; use what's here - **Repository / Remote** — Internal Git observations. They may produce mutable kind, branch, and project-grouping metadata but never the host-local project ID, root, display name, or workspace membership. No UI label. - **Sidebar items** — The configurable entries of the app sidebar, in two sections. Header: the rows at the head of the sidebar — New workspace, History, Search, Schedules, and plugin header items. Footer: the full-width rows between Add project and the footer icon row — Usage and plugin footer items. Add project and the icon row (Hosts, Help and support, Settings) are fixed and are not sidebar items. A plugin item may render several rows, such as one per bot; it is still one item that moves and hides as a block. Each section's order and visibility is one per-device preference (`AppSettings.sidebarNavItems`, `AppSettings.sidebarFooterItems`); every item may be off. UI: the Header and Footer cards on the Sidebar settings page. Code: `packages/app/src/sidebar-nav/model.ts` resolves a section, and the sidebar (`components/sidebar/sidebar-nav-rows.tsx`, the footer in `components/left-sidebar.tsx`) and the settings page (`screens/settings/sidebar/sidebar-nav-section.tsx`) read it through `useSidebarNavItems(section)`. Never hardcode one of these entries or add a second place that decides which ones show. Don't confuse with **Explorer sidebar**. - **Explorer sidebar** — The dedicated navigation dock containing the Files and Changes trees. UI: "Explorer sidebar". Code: `packages/app/src/workspace-tabs/explorer-sidebar.ts`; persisted pane identifiers retain the `explorer` spelling. See [explorer-sidebar.md](explorer-sidebar.md). -- **Workspace sheet** — The compact sheet that holds one file or subagent tab over the workspace without adding it to the tab switcher. UI action: "Open as tab". Code: `sheetByWorkspace` in `packages/app/src/stores/workspace-layout-store.ts`, `WorkspaceSheetHost` (`packages/app/src/screens/workspace/workspace-sheet-host.tsx`). See [explorer-sidebar.md](explorer-sidebar.md#workspace-sheet). +- **Sheet** — Any bottom sheet; there is one kind and one app-wide stack, so a sheet opened from a sheet lands on top of it and closing it uncovers the one below. Code: `IsolatedBottomSheetModal` (`packages/app/src/components/ui/isolated-bottom-sheet-modal`). Forbidden: "Workspace sheet", "modal sheet" as a distinct kind. See [floating-panels.md](floating-panels.md). +- **Sheet tab** — A compact-layout sheet holding one file or subagent tab over the workspace without adding it to the tab switcher. UI action: "Open as tab". Code: `SheetTab` and `sheetsByWorkspace` in `packages/app/src/stores/workspace-layout-store.ts`, `SheetTabs` (`packages/app/src/screens/workspace/sheet-tabs.tsx`). See [explorer-sidebar.md](explorer-sidebar.md#sheets). - **Side pane** — An ordinary right-side workspace pane used for content opened beside the user's work. It closes and participates in workspace splits like every other main-host pane. See [explorer-sidebar.md](explorer-sidebar.md#side-pane). Forbidden: "Side panel". - **Directory-backed surface** — A right-sidebar surface whose content is determined by the workspace's `cwd`, so two workspaces on the same directory see identical content: git diff/status, forge change-request info, file preview/explorer contents. Keyed by `(serverId, cwd)`, never `workspaceId`. See [architecture.md](architecture.md#right-sidebar-boundary-directory-backed-vs-workspace-owned). - **Workspace-owned state** — Per-workspace state that never leaks to a same-`cwd` sibling: tabs, agents, terminals, panes, title, plus review drafts, diff-mode overrides, composer attachments, and file-explorer open/expand state. Keyed by `workspaceId` (`cwd` only as a fallback for old payloads). See [architecture.md](architecture.md#right-sidebar-boundary-directory-backed-vs-workspace-owned). diff --git a/docs/menus.md b/docs/menus.md index 50434b9e9d..9dc3e26cae 100644 --- a/docs/menus.md +++ b/docs/menus.md @@ -52,6 +52,11 @@ is another, with its own icons and hover-revealed actions — but both hand the and take `closeOnSelect` to say whether choosing them ends the surface. A row that owns its press outright leaves the surface open behind whatever it opened, and skips the iOS wait. +A row whose result opens a sheet passes `closeOnSelect={false}`: the sheet stacks over the menu +sheet and uncovers it on close, so the menu is where the user lands next. A row that opens a tab +closes, because the tab replaces the pane the menu belongs to. The subagents track asks the layout +store which one a row is (`useSubagentOpensInSheet`), since the answer changes with the layout. + ## Pages A submenu is a page, declared as data on the surface and reached by a `MenuSubTrigger` whose `id` @@ -193,6 +198,9 @@ its own. backdrop, so there is exactly one `Modal` on native no matter how deep the menu goes. - **Sheet stacking and backdrop dismissal belong to `IsolatedBottomSheetModal`.** Menus only request a backdrop opacity. See [floating-panels.md](floating-panels.md#gotcha-6--bottom-sheet-refs-are-not-lifecycle-truth). +- **A menu closes when its panel leaves the screen.** `MenuSurface` closes the menu when its + retained panel goes inactive. Hiding the surface alone leaves the open state behind, and the + menu would reappear with the panel on the next tab switch. - **Retained panels own visibility.** The shared menu surface unmounts when its panel becomes inactive. An async action can navigate before its menu closes; a hidden panel must not leave a portal backdrop blocking the destination. On web the chat suspends one commit after it goes diff --git a/packages/app/e2e/browser/agent-tab-image-stability.spec.ts b/packages/app/e2e/browser/agent-tab-image-stability.spec.ts index 5f70bdafe3..841314343f 100644 --- a/packages/app/e2e/browser/agent-tab-image-stability.spec.ts +++ b/packages/app/e2e/browser/agent-tab-image-stability.spec.ts @@ -16,6 +16,7 @@ import { } from "../support/helpers/assistant-images"; import { expectAgentReadyToInterrupt } from "../support/helpers/agent-stream"; import { seedWorkspace, type SeededWorkspace } from "../support/helpers/seed-client"; +import path from "node:path"; const test = base.extend<{ imageWorkspace: SeededWorkspace }>({ imageWorkspace: async ({ page: _page }, provide) => { @@ -28,6 +29,42 @@ const test = base.extend<{ imageWorkspace: SeededWorkspace }>({ }, }); +test("assistant images at paths with spaces, Unicode and literal percent escapes render", async ({ + imageWorkspace: workspace, + page, +}) => { + test.setTimeout(120_000); + const image = await createSmallAssistantPng(workspace, { + alt: "Angle destination image", + fileName: "My image Мои.png", + }); + const agent = await createSettledMockAgent(workspace, "Encoded image paths"); + await emitSettledAssistantImage(workspace.client, agent, image, `<${image.relativePath}>`); + await openAssistantImageTimeline(page, agent); + await expectAssistantImageRendered(page, image); + + const encodedImage = { ...image, alt: "Encoded destination image" }; + await emitSettledAssistantImage( + workspace.client, + agent, + encodedImage, + encodeURI(path.join(workspace.repoPath, image.relativePath)), + ); + await expectAssistantImageRendered(page, encodedImage); + + const literalPercentImage = await createSmallAssistantPng(workspace, { + alt: "Literal percent filename image", + fileName: "literal%20name.png", + }); + await emitSettledAssistantImage( + workspace.client, + agent, + literalPercentImage, + encodeURI(literalPercentImage.relativePath), + ); + await expectAssistantImageRendered(page, literalPercentImage); +}); + test("switching between settled agent tabs keeps a real assistant PNG rendered", async ({ imageWorkspace: workspace, page, diff --git a/packages/app/e2e/browser/compact-workspace-sheet.spec.ts b/packages/app/e2e/browser/compact-workspace-sheet.spec.ts index 474a498353..77a2a0882b 100644 --- a/packages/app/e2e/browser/compact-workspace-sheet.spec.ts +++ b/packages/app/e2e/browser/compact-workspace-sheet.spec.ts @@ -4,18 +4,23 @@ import { expect, test } from "../support/fixtures"; import { expectComposerVisible } from "../support/helpers/composer"; import { installDaemonWebSocketGate } from "../support/helpers/daemon-websocket-gate"; import { openAgentRoute, seedMockAgentWorkspace } from "../support/helpers/mock-agent"; -import { openSubagentFromCompactTrack, seedSubagent } from "../support/helpers/subagents"; import { - closeWorkspaceSheet, + expectSubagentRowVisible, + openSubagentFromCompactTrack, + seedSubagent, +} from "../support/helpers/subagents"; +import { + closeSheet, expectOpenTabCount, - openWorkspaceSheetAsTab, + openSheetAsTab, expectDeclinedDiscardPrompt, - expectWorkspaceSheetAtSnap, - replaceWorkspaceSheetFileText, + expectSheetAtSnap, + replaceSheetFileText, selectTabFromSwitcher, - tapWorkspaceSheetBackdrop, - workspaceSheet, -} from "../support/helpers/workspace-sheet"; + sheet, + sheetHeader, + tapSheetBackdrop, +} from "../support/helpers/sheet"; const FILE_LINK = "linked.ts:3"; @@ -55,47 +60,90 @@ test("compact opens files and subagents in a sheet, leaving the tabs for agents" await expect(fileLink).toBeVisible({ timeout: 15_000 }); await fileLink.click(); - const sheet = workspaceSheet(page, "linked.ts"); - await expect(sheet).toBeVisible(); - await expect(sheet.getByText("three")).toBeVisible(); - await expectWorkspaceSheetAtSnap(page, "linked.ts"); - await expect(sheet.getByRole("button", { name: "Open as tab" })).toHaveCount(0); + const fileSheet = sheet(page, "linked.ts"); + await expect(fileSheet).toBeVisible(); + await expect(fileSheet.getByText("three")).toBeVisible(); + await expectSheetAtSnap(page, "linked.ts"); + await expect( + sheetHeader(page, "linked.ts").getByRole("button", { name: "Open as tab" }), + ).toHaveCount(0); await expectOpenTabCount(page, 1); - await closeWorkspaceSheet(page, "linked.ts"); + await closeSheet(page, "linked.ts"); }); - await test.step("a subagent opens in a sheet without its composer", async () => { + await test.step("a subagent opens in a sheet over the subagents list", async () => { await openSubagentFromCompactTrack(page, child.id); - const sheet = workspaceSheet(page, child.title); - await expect(sheet).toBeVisible(); - await expectWorkspaceSheetAtSnap(page, child.title); - await expect(sheet.getByRole("textbox", { name: "Message agent..." })).toHaveCount(0); + const childSheet = sheet(page, child.title); + await expect(childSheet).toBeVisible(); + await expectSheetAtSnap(page, child.title); + await expect(childSheet.getByRole("textbox", { name: "Message agent..." })).toHaveCount(0); + // The composer's model, thinking, and mode stand in for it, resolved the same way. An idle + // seeded agent has no context usage yet. + await expect(childSheet.getByTestId("agent-pane-subtitle")).toHaveText( + "Ten second stream · Low · Load test", + ); await expectOpenTabCount(page, 1); }); - await test.step("Open as tab promotes the subagent to a full tab", async () => { - await openWorkspaceSheetAsTab(page, child.title); + await test.step("closing the subagent's sheet uncovers the list", async () => { + await closeSheet(page, child.title); + await expectSubagentRowVisible(page, child.id); + }); + + await test.step("Open as tab promotes the subagent to a full tab and ends the list", async () => { + await page.getByTestId(`subagents-track-row-${child.id}`).click(); + await expectSheetAtSnap(page, child.title); + await openSheetAsTab(page, child.title); + await expect(page.getByTestId(`subagents-track-row-${child.id}`)).toHaveCount(0); await expectOpenTabCount(page, 2); await expectComposerVisible(page); }); - await test.step("a sheet with unsaved edits closes only through the guarded close", async () => { + await test.step("the list the subagent was opened from closed with its tab", async () => { await selectTabFromSwitcher(page, "Sheet parent"); + await expect(page.getByTestId(`subagents-track-row-${child.id}`)).toHaveCount(0); + }); + + await test.step("once its tab closes, the subagent reopens in a sheet that keeps the list", async () => { + await page + .getByRole("button", { name: /Switch tabs/ }) + .filter({ visible: true }) + .click(); + await expect(page.getByText("Workspace tabs", { exact: true })).toBeVisible(); + const menuBase = `workspace-tab-menu-agent_${child.id}`; + await page.getByTestId(`${menuBase}-trigger`).click(); + await page.getByTestId(`${menuBase}-close`).click(); + await expectOpenTabCount(page, 1); + // Closing a tab keeps the switcher open, with the parent as the tab left. Its backdrop is + // tapped once the row menu's own sheet has gone. + await expect(page.getByRole("button", { name: "Bottom sheet backdrop" })).toHaveCount(1); + await tapSheetBackdrop(page); + await expect(page.getByRole("button", { name: "Bottom sheet backdrop" })).toHaveCount(0); + + await openSubagentFromCompactTrack(page, child.id); + await expectSheetAtSnap(page, child.title); + await closeSheet(page, child.title); + await expectSubagentRowVisible(page, child.id); + await tapSheetBackdrop(page); + await expect(page.getByRole("button", { name: "Bottom sheet backdrop" })).toHaveCount(0); + }); + + await test.step("a sheet with unsaved edits closes only through the guarded close", async () => { await page.getByText(FILE_LINK, { exact: true }).click(); - const sheet = workspaceSheet(page, "linked.ts"); - await expect(sheet).toBeVisible(); + const fileSheet = sheet(page, "linked.ts"); + await expect(fileSheet).toBeVisible(); // Hold the autosave so the edit stays unsaved. gate.holdNextClientRequest("fs.file.write.request"); - await replaceWorkspaceSheetFileText(page, "linked.ts", "edited in the sheet"); + await replaceSheetFileText(page, "linked.ts", "edited in the sheet"); await gate.waitForHeldClientRequest(); - await expectDeclinedDiscardPrompt(page, () => tapWorkspaceSheetBackdrop(page)); - await expect(sheet.locator(".cm-content")).toHaveText("edited in the sheet"); + await expectDeclinedDiscardPrompt(page, () => tapSheetBackdrop(page)); + await expect(fileSheet.locator(".cm-content")).toHaveText("edited in the sheet"); await expectDeclinedDiscardPrompt(page, () => - sheet.getByRole("button", { name: "Close" }).click(), + sheetHeader(page, "linked.ts").getByRole("button", { name: "Close" }).click(), ); - await expect(sheet.locator(".cm-content")).toHaveText("edited in the sheet"); + await expect(fileSheet.locator(".cm-content")).toHaveText("edited in the sheet"); gate.releaseHeldClientRequest(); await expect.poll(() => readFile(linkedPath, "utf8")).toBe("edited in the sheet"); diff --git a/packages/app/e2e/browser/composer-autocomplete.spec.ts b/packages/app/e2e/browser/composer-autocomplete.spec.ts index d30e69b18c..d83046d8b2 100644 --- a/packages/app/e2e/browser/composer-autocomplete.spec.ts +++ b/packages/app/e2e/browser/composer-autocomplete.spec.ts @@ -9,7 +9,12 @@ import { expectWorkspaceTabVisible, openSessions } from "../support/helpers/arch import { daemonWsRoutePattern } from "../support/helpers/daemon-port"; import { getServerId } from "../support/helpers/server-id"; import { switchWorkspaceViaSidebar } from "../support/helpers/workspace-ui"; -import { expectMobileAgentSidebarVisible } from "../support/helpers/sidebar"; +import { + closeMobileAgentSidebar, + expectMobileAgentSidebarHidden, + expectMobileAgentSidebarVisible, + openMobileAgentSidebar, +} from "../support/helpers/sidebar"; import { expectNewWorkspaceProjectSelected } from "../support/helpers/new-workspace"; const TEST_COMMANDS = [ @@ -96,16 +101,6 @@ interface PopoverFrameRecorderWindow extends Window { __stopComposerAutocompleteFrameRecorder?: () => void; } -async function getTopTestIdAtPoint(page: Page, x: number, y: number) { - return page.evaluate( - ([pointX, pointY]) => { - const element = document.elementFromPoint(pointX, pointY); - return element?.closest("[data-testid]")?.getAttribute("data-testid") ?? null; - }, - [x, y], - ); -} - async function installListCommandsStub(page: Page): Promise { await page.routeWebSocket(daemonWsRoutePattern(), (ws) => { const server = ws.connectToServer(); @@ -701,19 +696,15 @@ test.describe("Composer autocomplete", () => { timeout: 30_000, }); - await page.getByRole("button", { name: "Open menu" }).click(); + // The sidebar covers the composer, so the composer gives up its popover while the + // sidebar is open and brings it back once the sidebar closes. + await openMobileAgentSidebar(page); await expectMobileAgentSidebarVisible(page); + await expect(popover).toHaveCount(0); - const popoverBox = await popover.boundingBox(); - expect(popoverBox).not.toBeNull(); - - const topTestId = await getTopTestIdAtPoint( - page, - popoverBox!.x + popoverBox!.width / 2, - popoverBox!.y + popoverBox!.height / 2, - ); - - expect(topTestId).not.toBe("composer-autocomplete-popover"); + await closeMobileAgentSidebar(page); + await expectMobileAgentSidebarHidden(page); + await expect(popover.getByText("/help", { exact: true }).first()).toBeVisible(); } finally { await agent.cleanup(); } diff --git a/packages/app/e2e/browser/composer-focus.spec.ts b/packages/app/e2e/browser/composer-focus.spec.ts index b79cfd9255..cbc710a94a 100644 --- a/packages/app/e2e/browser/composer-focus.spec.ts +++ b/packages/app/e2e/browser/composer-focus.spec.ts @@ -1,13 +1,30 @@ import { expect, test, type Page } from "../support/fixtures"; import { + composerLocator, + blurComposerInput, + enterComposerFullscreen, + exitComposerFullscreen, expectComposerDraft, expectComposerFocused, + expectComposerFullscreenControls, expectComposerNotFocused, expectComposerVisible, + expectWorkspaceHeaderVisible, + resizeComposerViewport, submitMessage, typeIntoFocusedComposer, } from "../support/helpers/composer"; import { openAgentRoute, seedMockAgentWorkspace } from "../support/helpers/mock-agent"; +import { + closeMobileAgentSidebar, + closeMobileExplorer, + expectMobileAgentSidebarHidden, + expectMobileAgentSidebarVisible, + expectMobileExplorerHidden, + expectMobileExplorerVisible, + swipeOpenMobileAgentSidebar, + swipeOpenMobileExplorer, +} from "../support/helpers/sidebar"; test("submitting a message leaves the composer ready for the next message", async ({ page }) => { const agent = await seedMockAgentWorkspace({ @@ -76,3 +93,76 @@ test.describe("touch screen wide enough for the desktop layout", () => { } }); }); + +const COMPACT_PANELS = [ + { + name: "agent list", + open: swipeOpenMobileAgentSidebar, + expectOpen: expectMobileAgentSidebarVisible, + close: closeMobileAgentSidebar, + expectClosed: expectMobileAgentSidebarHidden, + }, + { + name: "Explorer", + open: swipeOpenMobileExplorer, + expectOpen: expectMobileExplorerVisible, + close: closeMobileExplorer, + expectClosed: expectMobileExplorerHidden, + }, +] as const; + +for (const panel of COMPACT_PANELS) { + test(`closing the compact ${panel.name} does not restore composer focus`, async ({ page }) => { + const agent = await seedMockAgentWorkspace({ + repoPrefix: "composer-focus-panel-", + title: `Composer focus under ${panel.name}`, + }); + const draft = "Line one\nLine two\nLine three"; + try { + await resizeComposerViewport(page, "portrait"); + await openAgentRoute(page, agent); + await expectComposerVisible(page); + + await test.step("an untouched editor stays untouched", async () => { + await expectComposerNotFocused(page); + await panel.open(page); + await panel.expectOpen(page); + await panel.close(page); + await panel.expectClosed(page); + await expectComposerNotFocused(page); + }); + + await test.step("an inline editor blurred under the panel stays blurred", async () => { + await composerLocator(page).fill(draft); + await composerLocator(page).click(); + await expectComposerFocused(page); + await panel.open(page); + await panel.expectOpen(page); + await blurComposerInput(page); + await panel.close(page); + await panel.expectClosed(page); + await expectComposerNotFocused(page); + await expectComposerDraft(page, draft); + }); + + await test.step("a fullscreen editor blurred under the panel stays blurred", async () => { + await composerLocator(page).click(); + await enterComposerFullscreen(page); + await expectComposerFullscreenControls(page); + await expectComposerFocused(page); + await panel.open(page); + await panel.expectOpen(page); + await blurComposerInput(page); + await panel.close(page); + await panel.expectClosed(page); + await expectComposerNotFocused(page); + await expectComposerFullscreenControls(page); + await expectComposerDraft(page, draft); + await exitComposerFullscreen(page); + await expectWorkspaceHeaderVisible(page); + }); + } finally { + await agent.cleanup(); + } + }); +} diff --git a/packages/app/e2e/browser/composer-whitespace.spec.ts b/packages/app/e2e/browser/composer-whitespace.spec.ts index 35611a32c0..8e1a527f0f 100644 --- a/packages/app/e2e/browser/composer-whitespace.spec.ts +++ b/packages/app/e2e/browser/composer-whitespace.spec.ts @@ -20,6 +20,9 @@ import { queueComposerWithButton, configureComposerQueueSend, activateRetainedComposerTab, + switchComposerTabWithKeyboard, + expectWorkspaceHeaderHidden, + expectWorkspaceHeaderVisible, recordVisibleComposerGeometry, expectNoCollapsedVisibleComposer, expectAttachmentPill, @@ -27,8 +30,15 @@ import { startRunningMockAgent, composerLocator, expectComposerVisible, + expectComposerFullscreenFitsVisibleViewport, } from "../support/helpers/composer"; import { openAgentRoute, seedMockAgentWorkspace } from "../support/helpers/mock-agent"; +import { + closeMobileAgentSidebar, + expectMobileAgentSidebarHidden, + expectMobileAgentSidebarVisible, + swipeOpenMobileAgentSidebar, +} from "../support/helpers/sidebar"; async function composerHeight(page: Page): Promise { return composerLocator(page).evaluate((element) => element.getBoundingClientRect().height); @@ -156,6 +166,26 @@ test("composer growth keeps a bottom-pinned chat at the bottom", async ({ page } } }); +/** Freeze the page's timers and animation frames until `page.clock.resume()`. */ +async function pausePageClock(page: Page): Promise { + const now = Date.now(); + await page.clock.install({ time: now }); + // The installed clock advances between protocol calls; pause at a future time. + await page.clock.pauseAt(now + 60_000); +} + +/** The send error shares the footer with Send, so whatever keeps Send visible keeps it visible. */ +async function expectFullscreenErrorAboveSend(page: Page): Promise { + const frame = page.getByTestId("composer-fullscreen"); + const alertBox = (await frame.getByRole("alert").boundingBox())!; + const sendBox = (await page + .getByRole("button", { name: "Send message", exact: true }) + .boundingBox())!; + const editorBox = (await composerLocator(page).boundingBox())!; + expect(alertBox.y).toBeGreaterThanOrEqual(editorBox.y + editorBox.height); + expect(alertBox.y + alertBox.height).toBeLessThanOrEqual(sendBox.y); +} + async function writeCompactDraft(page: Page, text: string): Promise { await composerLocator(page).fill(text); await expect(composerLocator(page)).toHaveValue(text); @@ -177,7 +207,7 @@ test("compact long drafts stop growing before the header", async ({ page }) => { } }); -test("compact fullscreen editing preserves the live draft and selection and stays open after send", async ({ +test("compact fullscreen editing preserves the live draft and selection and returns to chat after send", async ({ page, }) => { const agent = await seedMockAgentWorkspace({ @@ -188,47 +218,109 @@ test("compact fullscreen editing preserves the live draft and selection and stay await resizeComposerViewport(page, "portrait"); await openAgentRoute(page, agent); await expectComposerVisible(page); - await attachComposerTestImage(page); - await expectAttachmentPill(page, "composer-image-attachment-pill"); - await writeCompactDraft(page, "First line\nSecond line"); - await expect(page.getByRole("button", { name: "Fullscreen", exact: true })).toHaveCount(0); - await writeCompactDraft(page, "First line\nSecond line\nThird line"); - await expect(page.getByRole("button", { name: "Fullscreen", exact: true })).toBeVisible(); - await writeCompactDraft( - page, - "A sentence with enough words to wrap across several rendered lines in a narrow input. ".repeat( - 4, - ), - ); - await expect(page.getByRole("button", { name: "Fullscreen", exact: true })).toBeVisible(); - await selectComposerDraftRange(page, 4, 17); - await enterComposerFullscreen(page); - await expectComposerFullscreenControls(page); - await expectComposerDraftSelection(page, 4, 17); - await expect(page.getByTestId("composer-image-attachment-pill")).toHaveCount(0); - await writeCompactDraft(page, "Edited fullscreen draft\nSecond line\nThird line"); - await selectComposerDraftRange(page, 3, 12); - await exitComposerFullscreen(page); - await expect(composerLocator(page)).toHaveValue( - "Edited fullscreen draft\nSecond line\nThird line", - ); - await expectComposerDraftSelection(page, 3, 12); - await expectAttachmentPill(page, "composer-image-attachment-pill"); - await expect(composerLocator(page)).toBeFocused(); - await enterComposerFullscreen(page); - await writeCompactDraft(page, "Short draft"); - await expectComposerFullscreenControls(page); - await selectComposerDraftRange(page, 0, 5); - await resizeComposerViewport(page, "landscape"); - await expectComposerFullscreenControls(page); - await expectComposerDraftSelection(page, 0, 5); - await expect(composerLocator(page)).toHaveValue("Short draft"); - await expect(composerLocator(page)).toBeFocused(); + await test.step("the affordance appears after two rendered lines, including soft wraps", async () => { + await attachComposerTestImage(page); + await expectAttachmentPill(page, "composer-image-attachment-pill"); + await writeCompactDraft(page, "First line\nSecond line"); + await expect(page.getByRole("button", { name: "Fullscreen", exact: true })).toHaveCount(0); + await writeCompactDraft(page, "First line\nSecond line\nThird line"); + await expect(page.getByRole("button", { name: "Fullscreen", exact: true })).toBeVisible(); + await writeCompactDraft( + page, + "A sentence with enough words to wrap across several rendered lines in a narrow input. ".repeat( + 4, + ), + ); + await expect(page.getByRole("button", { name: "Fullscreen", exact: true })).toBeVisible(); + }); + await test.step("fullscreen covers the header and keeps the live draft and selection", async () => { + await selectComposerDraftRange(page, 4, 17); + await enterComposerFullscreen(page); + await expectComposerFullscreenControls(page); + await expectWorkspaceHeaderHidden(page); + await expectComposerDraftSelection(page, 4, 17); + await expect(page.getByTestId("composer-image-attachment-pill")).toHaveCount(0); + await writeCompactDraft(page, "Edited fullscreen draft\nSecond line\nThird line"); + await selectComposerDraftRange(page, 3, 12); + }); + await test.step("exit restores the inline composer with the fullscreen edits", async () => { + await exitComposerFullscreen(page); + await expectWorkspaceHeaderVisible(page); + await expect(composerLocator(page)).toHaveValue( + "Edited fullscreen draft\nSecond line\nThird line", + ); + await expectComposerDraftSelection(page, 3, 12); + await expectAttachmentPill(page, "composer-image-attachment-pill"); + await expect(composerLocator(page)).toBeFocused(); + }); + await test.step("sending inline after a fullscreen edit clears the visible editor", async () => { + await sendComposerWithButton(page); + await expect(composerLocator(page)).toHaveValue(""); + await expect(page.getByTestId("composer-image-attachment-pill")).toHaveCount(0); + await writeCompactDraft(page, "Typed after the fullscreen cycle"); + await sendComposerWithButton(page); + await expect(composerLocator(page)).toHaveValue(""); + }); + await test.step("sending inside fullscreen returns to chat and clears the editor", async () => { + await writeCompactDraft(page, "First line\nSecond line\nThird line"); + await enterComposerFullscreen(page); + await writeCompactDraft(page, "Short draft"); + await expectComposerFullscreenControls(page); + await selectComposerDraftRange(page, 0, 5); + await resizeComposerViewport(page, "landscape"); + await expectComposerFullscreenControls(page); + await expectComposerDraftSelection(page, 0, 5); + await expect(composerLocator(page)).toHaveValue("Short draft"); + await expect(composerLocator(page)).toBeFocused(); + await resizeComposerViewport(page, "portrait"); + await sendComposerWithButton(page); + await expect(composerLocator(page)).toHaveValue(""); + await expectWorkspaceHeaderVisible(page); + await expect(page.getByTestId("composer-fullscreen")).toHaveCount(0); + }); + await test.step("typing and sending keep working after leaving fullscreen again", async () => { + await writeCompactDraft(page, "First line\nSecond line\nThird line"); + await enterComposerFullscreen(page); + await writeCompactDraft(page, "Typed inside fullscreen"); + await expect(page.getByRole("button", { name: "Send message", exact: true })).toBeEnabled(); + await exitComposerFullscreen(page); + await expectWorkspaceHeaderVisible(page); + await expect(composerLocator(page)).toHaveValue("Typed inside fullscreen"); + await writeCompactDraft(page, "Typed inside fullscreen, finished inline"); + await sendComposerWithButton(page); + await expect(composerLocator(page)).toHaveValue(""); + await writeCompactDraft(page, "One more inline message"); + await sendComposerWithButton(page); + await expect(composerLocator(page)).toHaveValue(""); + }); + } finally { + await agent.cleanup(); + } +}); + +test("a caret inside an unpublished edit survives a breakpoint remount", async ({ page }) => { + const agent = await seedMockAgentWorkspace({ + repoPrefix: "composer-remount-caret-", + title: "Remount caret", + }); + try { await resizeComposerViewport(page, "portrait"); - await sendComposerWithButton(page); - await expect(composerLocator(page)).toHaveValue(""); - await expectComposerFullscreenControls(page); - await expect(page.getByRole("button", { name: "Send message", exact: true })).toBeDisabled(); + await openAgentRoute(page, agent); + await expectComposerVisible(page); + await writeCompactDraft(page, "Short draft"); + await selectComposerDraftRange(page, 5, 5); + // The draft owner publishes web edits after the next paint. A rotation inside that + // window remounts the editor before the edit has reached the draft store; the paused + // clock holds the page there instead of racing the frame. + await pausePageClock(page); + await composerLocator(page).press("X"); + await resizeComposerViewport(page, "landscape"); + await page.clock.resume(); + await expect(composerLocator(page)).toHaveValue("ShortX draft"); + await expectComposerDraftSelection(page, 6, 6); + await expect(composerLocator(page)).toBeFocused(); + await composerLocator(page).press("Y"); + await expect(composerLocator(page)).toHaveValue("ShortXY draft"); } finally { await agent.cleanup(); } @@ -250,15 +342,86 @@ test("fullscreen submit rejection retains the editable draft and supports retry" await writeCompactDraft(page, draft); await enterComposerFullscreen(page); await sendComposerWithButton(page); - await expect(page.getByTestId("composer-fullscreen").getByRole("alert")).toHaveText( - "Requested mock prompt rejection", - ); + await expectWorkspaceHeaderVisible(page); + await expect(page.getByRole("alert")).toHaveText("Requested mock prompt rejection"); + await enterComposerFullscreen(page); + await expectFullscreenErrorAboveSend(page); await expect(composerLocator(page)).toHaveValue(draft); await expect(composerLocator(page)).toBeEditable(); await expect(page.getByRole("button", { name: "Send message", exact: true })).toBeEnabled(); await sendComposerWithButton(page); await expect(composerLocator(page)).toHaveValue(""); - await expectComposerFullscreenControls(page); + await expectWorkspaceHeaderVisible(page); + } finally { + await agent.cleanup(); + } +}); + +async function blurComposer(page: Page): Promise { + await composerLocator(page).blur(); + await expect(composerLocator(page)).not.toBeFocused(); +} + +/** Mid-band at the given height and near the editor's bottom edge. */ +async function reservedBandPoints( + page: Page, + bandX: number, + topY: number, +): Promise> { + const editor = (await composerLocator(page).boundingBox())!; + return [ + { x: bandX, y: topY }, + { x: bandX, y: editor.y + editor.height - 6 }, + ]; +} + +test("the reserved band beside the inline editor focuses it", async ({ page }) => { + const agent = await seedMockAgentWorkspace({ + repoPrefix: "composer-band-focus-", + title: "Composer band focus", + }); + try { + await resizeComposerViewport(page, "portrait"); + await openAgentRoute(page, agent); + await expectComposerVisible(page); + const exitButton = page.getByRole("button", { name: "Exit fullscreen", exact: true }); + const fullscreenButton = page.getByRole("button", { name: "Fullscreen", exact: true }); + const longDraft = "Band first line\nBand second line\nBand third line"; + await writeCompactDraft(page, longDraft); + await expect(fullscreenButton).toBeVisible(); + const button = (await fullscreenButton.boundingBox())!; + const bandX = button.x + button.width / 2; + + await test.step("with the fullscreen button shown, the band under it focuses the editor", async () => { + for (const point of await reservedBandPoints(page, bandX, button.y + button.height + 10)) { + await blurComposer(page); + await page.mouse.click(point.x, point.y); + await expect(composerLocator(page)).toBeFocused(); + await expect(composerLocator(page)).toHaveValue(longDraft); + await expect(exitButton).toHaveCount(0); + } + }); + + await test.step("the button itself still toggles fullscreen", async () => { + await fullscreenButton.click(); + await expectComposerFullscreenControls(page); + await exitComposerFullscreen(page); + await expect(exitButton).toHaveCount(0); + await expect(composerLocator(page)).toHaveValue(longDraft); + }); + + await test.step("with no fullscreen button, the whole band still focuses the editor", async () => { + await writeCompactDraft(page, "Short"); + await expect(fullscreenButton).toHaveCount(0); + const editor = (await composerLocator(page).boundingBox())!; + for (const point of await reservedBandPoints(page, bandX, editor.y + 6)) { + await blurComposer(page); + await page.mouse.click(point.x, point.y); + await expect(composerLocator(page)).toBeFocused(); + await expect(composerLocator(page)).toHaveValue("Short"); + await expect(exitButton).toHaveCount(0); + } + }); } finally { await agent.cleanup(); } @@ -280,8 +443,7 @@ test("fullscreen Send keeps the configured queue behavior while an agent runs", await expectComposerFullscreenControls(page); await queueComposerWithButton(page); await expect(composerLocator(page)).toHaveValue(""); - await expectComposerFullscreenControls(page); - await exitComposerFullscreen(page); + await expectWorkspaceHeaderVisible(page); await expectQueuedMessageButton(page); } finally { await agent.cleanup(); @@ -333,15 +495,28 @@ test("retained agent tabs preserve fullscreen editing and paste when switched aw const draft = "Live first line\nLive second line\nLive third line"; await writeCompactDraft(page, draft); await enterComposerFullscreen(page); + await expectWorkspaceHeaderHidden(page); await selectComposerDraftRange(page, 4, 17); - await activateRetainedComposerTab(page, first.title); + // Fullscreen covers the compact header, so a phone leaves the tab by exiting first; + // a desktop-width window still has the tab shortcut. + await resizeComposerViewport(page, "landscape"); + await switchComposerTabWithKeyboard(page, "previous"); await expect(page.getByRole("button", { name: "Exit fullscreen", exact: true })).toHaveCount(0); + // The exit action belongs to the active pane: Escape here leaves the hidden tab alone. + await composerLocator(page).press("Escape"); + await switchComposerTabWithKeyboard(page, "next"); + await expectComposerFullscreenControls(page); + await switchComposerTabWithKeyboard(page, "previous"); + await expect(page.getByRole("button", { name: "Exit fullscreen", exact: true })).toHaveCount(0); + await resizeComposerViewport(page, "portrait"); + await expectWorkspaceHeaderVisible(page); await writeCompactDraft(page, "Other tab draft"); await shrinkVisibleViewport(page); await activateRetainedComposerTab(page, second.title); await expectComposerFullscreenControls(page); + await expectWorkspaceHeaderHidden(page); await expect(composerLocator(page)).toHaveValue(draft); - await expectFullscreenInsideVisibleViewport(page); + await expectComposerFullscreenFitsVisibleViewport(page); await expectComposerDraftSelection(page, 4, 17); await expect(composerLocator(page)).toBeFocused(); expect(await pasteComposerTestImage(page)).toBe(true); @@ -352,6 +527,36 @@ test("retained agent tabs preserve fullscreen editing and paste when switched aw } }); +test("the compact sidebar over a fullscreen editor leaves the exit action alone", async ({ + page, +}) => { + const agent = await seedMockAgentWorkspace({ + repoPrefix: "composer-fullscreen-sidebar-", + title: "Fullscreen under sidebar", + }); + try { + await resizeComposerViewport(page, "portrait"); + await openAgentRoute(page, agent); + const draft = "Line one\nLine two\nLine three"; + await writeCompactDraft(page, draft); + await enterComposerFullscreen(page); + await expectWorkspaceHeaderHidden(page); + // Fullscreen hides the header's menu button; the edge swipe still opens the list over it. + await swipeOpenMobileAgentSidebar(page); + await expectMobileAgentSidebarVisible(page); + // The list covers the pane, so the editor's exit action is not armed. + await page.keyboard.press("Escape"); + await closeMobileAgentSidebar(page); + await expectMobileAgentSidebarHidden(page); + await expectComposerFullscreenControls(page); + await expect(composerLocator(page)).toHaveValue(draft); + await exitComposerFullscreen(page); + await expectWorkspaceHeaderVisible(page); + } finally { + await agent.cleanup(); + } +}); + test("retained inline composers keep usable capacity through hidden tab geometry", async ({ page, }) => { @@ -408,30 +613,6 @@ async function panVisibleViewport(page: Page): Promise { await cdp.detach(); } -async function expectFullscreenInsideVisibleViewport(page: Page): Promise { - await expect - .poll(() => - page.getByTestId("composer-fullscreen").evaluate((element) => { - const viewport = window.visualViewport!; - const frame = element.getBoundingClientRect(); - const send = element.querySelector('[aria-label="Send message"]')!.getBoundingClientRect(); - return { - frameFits: - Math.abs(frame.top - viewport.offsetTop) < 1 && - Math.abs(frame.left - viewport.offsetLeft) < 1 && - Math.abs(frame.height - viewport.height) < 1 && - Math.abs(frame.width - viewport.width) < 1, - sendFits: - send.top >= viewport.offsetTop && - send.bottom <= viewport.offsetTop + viewport.height && - send.left >= viewport.offsetLeft && - send.right <= viewport.offsetLeft + viewport.width, - }; - }), - ) - .toEqual({ frameFits: true, sendFits: true }); -} - test("fullscreen Send follows the visible viewport when it shrinks and pans", async ({ page }) => { const agent = await seedMockAgentWorkspace({ repoPrefix: "composer-visible-viewport-", @@ -443,11 +624,11 @@ test("fullscreen Send follows the visible viewport when it shrinks and pans", as await expectComposerVisible(page); await writeCompactDraft(page, "First line\nSecond line\nThird line"); await enterComposerFullscreen(page); - await expectFullscreenInsideVisibleViewport(page); + await expectComposerFullscreenFitsVisibleViewport(page); await shrinkVisibleViewport(page); - await expectFullscreenInsideVisibleViewport(page); + await expectComposerFullscreenFitsVisibleViewport(page); await panVisibleViewport(page); - await expectFullscreenInsideVisibleViewport(page); + await expectComposerFullscreenFitsVisibleViewport(page); } finally { await agent.cleanup(); } diff --git a/packages/app/e2e/browser/new-workspace-composer-draft.spec.ts b/packages/app/e2e/browser/new-workspace-composer-draft.spec.ts index e7dbde3bd9..906efcfb42 100644 --- a/packages/app/e2e/browser/new-workspace-composer-draft.spec.ts +++ b/packages/app/e2e/browser/new-workspace-composer-draft.spec.ts @@ -1,7 +1,14 @@ +import { + composerLocator, + enterComposerFullscreen, + exitComposerFullscreen, + resizeComposerViewport, +} from "../support/helpers/composer"; import { expect, test } from "../support/fixtures"; import { gotoAppShell } from "../support/helpers/app"; import { getE2EDaemonPort } from "../support/helpers/daemon-port"; import { + delayBrowserWorkspaceCreatedResponse, expectNewWorkspaceDraft, expectNewWorkspaceProjectSelected, fillNewWorkspaceDraft, @@ -134,3 +141,45 @@ test.describe("New workspace composer draft", () => { } }); }); + +test("fullscreen creation returns inline and keeps submission locked when reopened", async ({ + page, +}) => { + const project = await seedWorkspace({ repoPrefix: "fullscreen-submit-pending-" }); + const delay = await delayBrowserWorkspaceCreatedResponse(page); + try { + await gotoAppShell(page); + await waitForSidebarHydration(page); + await openNewWorkspaceComposer(page, project); + await resizeComposerViewport(page, "portrait"); + await fillNewWorkspaceDraft(page, DRAFT); + await enterComposerFullscreen(page); + await page.getByRole("button", { name: "Create", exact: true }).click(); + await delay.waitForCreateRequest(); + + await test.step("submission returns inline with the original draft and spinner", async () => { + await expect(page.getByTestId("composer-fullscreen")).toHaveCount(0); + await expect(composerLocator(page)).toHaveValue(DRAFT); + await expect(composerLocator(page)).not.toBeEditable(); + await expect(page.getByRole("button", { name: "Create", exact: true })).toBeDisabled(); + await expect(page.getByRole("progressbar")).toBeVisible(); + }); + await test.step("fullscreen can reopen while pending without unlocking or duplicating submission", async () => { + await enterComposerFullscreen(page); + await expect(page.getByTestId("composer-fullscreen")).toBeVisible(); + await expect(composerLocator(page)).toHaveValue(DRAFT); + await expect(composerLocator(page)).not.toBeEditable(); + await expect(page.getByRole("button", { name: "Create", exact: true })).toBeDisabled(); + await expect(page.getByRole("progressbar")).toBeVisible(); + await exitComposerFullscreen(page); + }); + delay.release(); + await page.waitForURL((url) => url.pathname.includes("/workspace/")); + await expect(composerLocator(page)).toHaveValue(""); + await expect(composerLocator(page)).toBeEditable(); + expect(delay.agentRequests).toHaveLength(1); + } finally { + delay.release(); + await project.cleanup(); + } +}); diff --git a/packages/app/e2e/browser/new-workspace-launch-terminal.spec.ts b/packages/app/e2e/browser/new-workspace-launch-terminal.spec.ts index a4fbd15edf..d393966ee8 100644 --- a/packages/app/e2e/browser/new-workspace-launch-terminal.spec.ts +++ b/packages/app/e2e/browser/new-workspace-launch-terminal.spec.ts @@ -1,7 +1,18 @@ -import { expect, test } from "../support/fixtures"; +import { expect, test, type Page } from "../support/fixtures"; import { gotoAppShell } from "../support/helpers/app"; import { waitForSidebarHydration } from "../support/helpers/workspace-ui"; -import { openNewWorkspaceComposer } from "../support/helpers/new-workspace"; +import { + expectNewWorkspaceDraft, + fillNewWorkspaceDraft, + openNewWorkspaceComposer, +} from "../support/helpers/new-workspace"; +import { + composerLocator, + enterComposerFullscreen, + exitComposerFullscreen, + expectComposerFullscreenControls, + resizeComposerViewport, +} from "../support/helpers/composer"; import { seedWorkspace, type SeededWorkspace } from "../support/helpers/seed-client"; import { expectTerminalLaunchSelected, @@ -145,3 +156,117 @@ test.describe("New workspace: launching a terminal", () => { }); }); }); + +async function expectNewWorkspaceHeaderHidden(page: Page): Promise { + await expect(page.getByTestId("menu-button").filter({ visible: true })).toHaveCount(0); +} + +async function expectNewWorkspaceHeaderVisible(page: Page): Promise { + await expect(page.getByTestId("menu-button").filter({ visible: true }).first()).toBeVisible(); +} + +/** + * Fullscreen fills the content area top to bottom and out to the right edge (a pinned + * sidebar keeps its column), covers the form, and shows only exit and the mode's submit. + */ +async function expectNewWorkspaceFullscreen(page: Page, submitLabel: string): Promise { + const frame = page.getByTestId("composer-fullscreen"); + await expect(page.getByRole("button", { name: "Exit fullscreen", exact: true })).toBeVisible(); + await expect(frame.getByRole("button")).toHaveCount(2); + await expect(frame.getByRole("button", { name: submitLabel })).toBeVisible(); + await expectNewWorkspaceHeaderHidden(page); + const picker = (await page.getByRole("button", { name: "Workspace project" }).boundingBox())!; + await expect + .poll(() => + frame.evaluate( + (element, point) => { + const viewport = window.visualViewport!; + const box = element.getBoundingClientRect(); + const covering = document.elementFromPoint(point.x, point.y); + return { + fillsHeight: + Math.abs(box.top - viewport.offsetTop) < 1 && + Math.abs(box.height - viewport.height) < 1, + reachesRightEdge: + Math.abs(box.right - (viewport.offsetLeft + viewport.width)) < 1 && + box.left >= viewport.offsetLeft, + coversForm: element.contains(covering), + }; + }, + { x: picker.x + picker.width / 2, y: picker.y + picker.height / 2 }, + ), + ) + .toEqual({ fillsHeight: true, reachesRightEdge: true, coversForm: true }); +} + +test.describe("New workspace: fullscreen composer across the compact breakpoint", () => { + let workspace: SeededWorkspace; + + test.beforeEach(async () => { + workspace = await seedWorkspace({ repoPrefix: "launch-fullscreen-" }); + }); + + test.afterEach(async () => { + await workspace?.cleanup(); + }); + + test("chat fullscreen survives widening and terminal fullscreen fills the phone", async ({ + page, + }) => { + test.setTimeout(90_000); + await gotoAppShell(page); + await waitForSidebarHydration(page); + await openNewWorkspaceComposer(page, { + projectKey: workspace.projectKey, + projectDisplayName: workspace.projectDisplayName, + }); + const projectPicker = page.getByRole("button", { name: "Workspace project" }); + + await test.step("chat: fullscreen covers the centered form and exits back into it", async () => { + await resizeComposerViewport(page, "portrait"); + const draft = "Chat first line\nChat second line\nChat third line"; + await fillNewWorkspaceDraft(page, draft); + await enterComposerFullscreen(page); + await expectComposerFullscreenControls(page); + await expectNewWorkspaceHeaderHidden(page); + await resizeComposerViewport(page, "landscape"); + await expectComposerFullscreenControls(page); + await expectNewWorkspaceFullscreen(page, "Create"); + // The desktop form's own import button is dropped from the fullscreen slot. + await expect( + page.getByTestId("new-workspace-import-session").filter({ visible: true }), + ).toHaveCount(0); + await composerLocator(page).press("End"); + await composerLocator(page).pressSequentially(" wide"); + await exitComposerFullscreen(page); + await expectNewWorkspaceHeaderVisible(page); + await expect(projectPicker).toBeVisible(); + await expect( + page.getByTestId("new-workspace-import-session").filter({ visible: true }), + ).toBeVisible(); + await expectNewWorkspaceDraft(page, `${draft} wide`); + }); + + // Terminal mode and its prompt are screen state, and the shell remounts the screen + // at the breakpoint, so the terminal prompt's fullscreen is exercised on the phone + // layout only. + await test.step("terminal: the prompt's fullscreen shows only exit and Launch", async () => { + await resizeComposerViewport(page, "portrait"); + // The compact launch control opens a sheet, not the desktop menu. + await launchTrigger(page).click(); + const option = page.getByRole("menuitem").filter({ hasText: PROMPT_PROFILE.name }); + await option.click(); + await expect(option).not.toBeVisible(); + await expectTerminalLaunchSelected(page, PROMPT_PROFILE.name); + const prompt = "Prompt first line\nPrompt second line\nPrompt third line"; + await fillTerminalPrompt(page, prompt); + await enterComposerFullscreen(page); + await expect(terminalPromptInput(page)).toBeVisible(); + await expectNewWorkspaceFullscreen(page, "Launch"); + await exitComposerFullscreen(page); + await expectNewWorkspaceHeaderVisible(page); + await expect(projectPicker).toBeVisible(); + await expect(terminalPromptInput(page)).toHaveValue(prompt); + }); + }); +}); diff --git a/packages/app/e2e/support/helpers/assistant-images.ts b/packages/app/e2e/support/helpers/assistant-images.ts index 63bc182eaf..c4200c7c75 100644 --- a/packages/app/e2e/support/helpers/assistant-images.ts +++ b/packages/app/e2e/support/helpers/assistant-images.ts @@ -87,10 +87,11 @@ export async function emitSettledAssistantImage( client: SeedDaemonClient, agent: ArchiveTabAgent, image: AssistantImageFixture, + destination: string = image.relativePath, ): Promise { await client.sendAgentMessage( agent.id, - `Emit settled assistant image Markdown: ![${image.alt}](${image.relativePath})`, + `Emit settled assistant image Markdown: ![${image.alt}](${destination})`, ); const result = await client.waitForFinish(agent.id, 30_000); if (result.status !== "idle" || result.final?.lastError) { diff --git a/packages/app/e2e/support/helpers/composer.ts b/packages/app/e2e/support/helpers/composer.ts index 01b9a39d58..d4ef8fc2f4 100644 --- a/packages/app/e2e/support/helpers/composer.ts +++ b/packages/app/e2e/support/helpers/composer.ts @@ -56,6 +56,12 @@ export async function expectComposerNotFocused(page: Page): Promise { await expect(composerInput(page)).not.toBeFocused(); } +/** Blur the editor without anything else taking focus. */ +export async function blurComposerInput(page: Page): Promise { + await composerInput(page).blur(); + await expectComposerNotFocused(page); +} + export async function submitMessage(page: Page, text: string): Promise { const input = composerInput(page); await expect(input).toBeEditable({ timeout: 30_000 }); @@ -355,6 +361,12 @@ export async function resizeComposerViewport( short: { width: 390, height: 390 }, }; await page.setViewportSize(sizes[orientation]); + // Before the app has loaded there is no layout to wait for. + if (page.url() === "about:blank") return; + // Crossing the compact breakpoint remounts the shell and the editor. Anything that + // follows (a shortcut, a locator) belongs to the layout the new size implies, so + // wait for that layout before returning. + await expect(page.getByTestId("compact-shell")).toHaveCount(orientation === "landscape" ? 0 : 1); } export async function selectComposerDraftRange( page: Page, @@ -390,6 +402,33 @@ export async function expectComposerFullscreenControls(page: Page): Promise { + await expect + .poll(() => + page.getByTestId("composer-fullscreen").evaluate((element, label) => { + const viewport = window.visualViewport!; + const frame = element.getBoundingClientRect(); + const send = element.querySelector(`[aria-label="${label}"]`)!.getBoundingClientRect(); + return { + frameFits: + Math.abs(frame.top - viewport.offsetTop) < 1 && + Math.abs(frame.left - viewport.offsetLeft) < 1 && + Math.abs(frame.height - viewport.height) < 1 && + Math.abs(frame.width - viewport.width) < 1, + sendFits: + send.top >= viewport.offsetTop && + send.bottom <= viewport.offsetTop + viewport.height && + send.left >= viewport.offsetLeft && + send.right <= viewport.offsetLeft + viewport.width, + }; + }, submitLabel), + ) + .toEqual({ frameFits: true, sendFits: true }); +} export async function sendComposerWithButton(page: Page): Promise { await page.getByRole("button", { name: "Send message", exact: true }).click(); } @@ -405,6 +444,22 @@ export async function configureComposerQueueSend(page: Page): Promise { /** Drive the real tab chooser's commands even when fullscreen covers its pointer surface. * This exercises retained activity changes, not a claim that covered chrome is clickable. */ +/** Needs a desktop-width viewport: compact layouts have no keyboard shortcuts. */ +export async function switchComposerTabWithKeyboard( + page: Page, + direction: "previous" | "next", +): Promise { + await page.keyboard.press( + direction === "previous" ? "Alt+Shift+BracketLeft" : "Alt+Shift+BracketRight", + ); +} +export async function expectWorkspaceHeaderHidden(page: Page): Promise { + await expect(page.getByTestId("workspace-tab-switcher-trigger")).toHaveCount(0); +} +export async function expectWorkspaceHeaderVisible(page: Page): Promise { + await expect(page.getByTestId("workspace-tab-switcher-trigger")).toBeVisible(); +} + export async function activateRetainedComposerTab(page: Page, title: string): Promise { await page .getByTestId("workspace-tab-switcher-trigger") diff --git a/packages/app/e2e/support/helpers/workspace-sheet.ts b/packages/app/e2e/support/helpers/sheet.ts similarity index 51% rename from packages/app/e2e/support/helpers/workspace-sheet.ts rename to packages/app/e2e/support/helpers/sheet.ts index 8865073c81..6288c6f9c1 100644 --- a/packages/app/e2e/support/helpers/workspace-sheet.ts +++ b/packages/app/e2e/support/helpers/sheet.ts @@ -1,31 +1,37 @@ import { expect, type Locator, type Page } from "@playwright/test"; -/** The compact workspace sheet, named after the tab it hosts. */ -export function workspaceSheet(page: Page, label: string): Locator { +/** A sheet tab's body, named after the tab it shows. */ +export function sheet(page: Page, label: string): Locator { return page.getByRole("dialog", { name: label }); } -/** Sheet height as a fraction of the viewport; mirrors the host's 92% snap point. */ +/** A sheet tab's header, which carries its title, Close, and the Open as tab glyph. */ +export function sheetHeader(page: Page, label: string): Locator { + return page.getByTestId("sheet-tab-header").filter({ hasText: label }); +} + +/** Sheet height as a fraction of the viewport; mirrors the sheet tab's 92% snap point. */ const SHEET_SNAP_FRACTION = 0.92; -/** The dialog starts below the sheet's drag handle. */ -const SHEET_HANDLE_MAX_HEIGHT = 32; +/** The header starts below the sheet's drag indicator, inside the handle. */ +const SHEET_INDICATOR_MAX_HEIGHT = 32; /** * The sheet rests at its snap point, docked to the bottom edge. A sheet pushed up past it * covers the workspace header; a sheet sunk below it hides content. */ -export async function expectWorkspaceSheetAtSnap(page: Page, label: string): Promise { +export async function expectSheetAtSnap(page: Page, label: string): Promise { const viewportHeight = page.viewportSize()?.height ?? 0; const snapTop = Math.round(viewportHeight * (1 - SHEET_SNAP_FRACTION)); - const sheet = workspaceSheet(page, label); + const header = sheetHeader(page, label); + const body = sheet(page, label); await expect .poll(async () => { - const box = await sheet.boundingBox(); - if (!box) return null; - const top = Math.round(box.y); + const [headerBox, bodyBox] = await Promise.all([header.boundingBox(), body.boundingBox()]); + if (!headerBox || !bodyBox) return null; + const top = Math.round(headerBox.y); return { - dockedToBottom: Math.round(box.y + box.height) === viewportHeight, - topAtSnap: top >= snapTop && top <= snapTop + SHEET_HANDLE_MAX_HEIGHT, + dockedToBottom: Math.round(bodyBox.y + bodyBox.height) === viewportHeight, + topAtSnap: top >= snapTop && top <= snapTop + SHEET_INDICATOR_MAX_HEIGHT, }; }) .toEqual({ dockedToBottom: true, topAtSnap: true }); @@ -37,26 +43,22 @@ export async function expectOpenTabCount(page: Page, count: number): Promise { - const sheet = workspaceSheet(page, label); - await sheet.getByRole("button", { name: "Close" }).click(); - await expect(sheet).toHaveCount(0); +export async function closeSheet(page: Page, label: string): Promise { + await sheetHeader(page, label).getByRole("button", { name: "Close" }).click(); + await expect(sheet(page, label)).toHaveCount(0); } -export async function openWorkspaceSheetAsTab(page: Page, label: string): Promise { - const sheet = workspaceSheet(page, label); - await sheet.getByRole("button", { name: "Open as tab" }).click(); - await expect(sheet).toHaveCount(0); +export async function openSheetAsTab(page: Page, label: string): Promise { + await sheetHeader(page, label).getByRole("button", { name: "Open as tab" }).click(); + await expect(sheet(page, label)).toHaveCount(0); } -export async function replaceWorkspaceSheetFileText( +export async function replaceSheetFileText( page: Page, label: string, content: string, ): Promise { - const editor = workspaceSheet(page, label) - .getByTestId("file-source-editor") - .locator(".cm-content"); + const editor = sheet(page, label).getByTestId("file-source-editor").locator(".cm-content"); await editor.click(); await editor.press("ControlOrMeta+A"); await editor.pressSequentially(content); @@ -67,15 +69,18 @@ export async function selectTabFromSwitcher(page: Page, label: string): Promise< .getByRole("button", { name: /Switch tabs/ }) .filter({ visible: true }) .click(); + await expect(page.getByText("Workspace tabs", { exact: true })).toBeVisible(); const option = page.getByText(label, { exact: true }).filter({ visible: true }).last(); await expect(option).toBeVisible(); await option.click(); await expect(page.getByRole("button", { name: "Bottom sheet backdrop" })).toHaveCount(0); } -export async function tapWorkspaceSheetBackdrop(page: Page): Promise { +/** Taps the top sheet's backdrop; each stacked sheet renders its own, top last. */ +export async function tapSheetBackdrop(page: Page): Promise { await page .getByRole("button", { name: "Bottom sheet backdrop" }) + .last() .click({ position: { x: 10, y: 10 } }); } diff --git a/packages/app/e2e/support/helpers/sidebar.ts b/packages/app/e2e/support/helpers/sidebar.ts index 1909b4f31b..500ce8bd41 100644 --- a/packages/app/e2e/support/helpers/sidebar.ts +++ b/packages/app/e2e/support/helpers/sidebar.ts @@ -250,3 +250,41 @@ export async function expectMobileAgentSidebarVisible(page: Page): Promise export async function expectMobileAgentSidebarHidden(page: Page): Promise { await expect(page.getByTestId("sidebar-sessions")).not.toBeInViewport({ timeout: 5_000 }); } + +/** Drag from the left edge: the only way to open the list while fullscreen hides the header. */ +export async function swipeOpenMobileAgentSidebar(page: Page): Promise { + const viewport = page.viewportSize(); + if (!viewport) throw new Error("viewport size is required"); + const y = Math.round(viewport.height / 2); + await page.mouse.move(8, y); + await page.mouse.down(); + await page.mouse.move(40, y, { steps: 4 }); + await page.mouse.move(Math.round(viewport.width * 0.7), y, { steps: 12 }); + await page.mouse.up(); +} + +/** Drag from the right edge to open the compact Explorer over the agent. */ +export async function swipeOpenMobileExplorer(page: Page): Promise { + const viewport = page.viewportSize(); + if (!viewport) throw new Error("viewport size is required"); + const y = Math.round(viewport.height / 2); + await page.mouse.move(viewport.width - 8, y); + await page.mouse.down(); + await page.mouse.move(viewport.width - 40, y, { steps: 4 }); + await page.mouse.move(Math.round(viewport.width * 0.3), y, { steps: 12 }); + await page.mouse.up(); +} + +export async function closeMobileExplorer(page: Page): Promise { + const closeButton = page.getByTestId("explorer-close"); + await expect(closeButton).toBeInViewport({ ratio: 1, timeout: 5_000 }); + await closeButton.click(); +} + +export async function expectMobileExplorerVisible(page: Page): Promise { + await expect(page.getByTestId("explorer-header")).toBeInViewport({ ratio: 1, timeout: 5_000 }); +} + +export async function expectMobileExplorerHidden(page: Page): Promise { + await expect(page.getByTestId("explorer-header")).not.toBeInViewport({ timeout: 5_000 }); +} diff --git a/packages/app/src/app/_layout.tsx b/packages/app/src/app/_layout.tsx index 72989bd83d..2d6525b27f 100644 --- a/packages/app/src/app/_layout.tsx +++ b/packages/app/src/app/_layout.tsx @@ -665,7 +665,7 @@ function MobileGestureWrapper({ return ( - + {children} diff --git a/packages/app/src/app/new.tsx b/packages/app/src/app/new.tsx index 281ec33555..67db3c2c96 100644 --- a/packages/app/src/app/new.tsx +++ b/packages/app/src/app/new.tsx @@ -1,6 +1,15 @@ import { useLocalSearchParams } from "expo-router"; +import { useMemo } from "react"; import { HostRouteBootstrapBoundary } from "@/components/host-route-bootstrap-boundary"; +import { + ComposerEditingScope, + WorkspaceComposerEditingSessionsProvider, +} from "@/composer/editing-session"; import { NewWorkspaceScreen } from "@/screens/new-workspace-screen"; +import { buildNewWorkspaceDraftKey } from "@/stores/draft-keys"; + +/** New workspace drafts share one editing-session home, keyed like a tab by draft. */ +const NEW_WORKSPACE_SESSIONS_KEY = "new-workspace"; export default function NewWorkspaceRoute() { const params = useLocalSearchParams<{ @@ -23,16 +32,28 @@ export default function NewWorkspaceRoute() { draftId ?? null, ]); + // The shell remounts this route when the viewport crosses the compact breakpoint; + // the draft's editing session (fullscreen, retained caret) lives above the shell. + const draftKey = buildNewWorkspaceDraftKey(draftId); + const sessionTabIds = useMemo(() => [draftKey], [draftKey]); + return ( - + + + + + ); } diff --git a/packages/app/src/attachments/utils.test.ts b/packages/app/src/attachments/utils.test.ts index d6fce078f2..9bf982c6e8 100644 --- a/packages/app/src/attachments/utils.test.ts +++ b/packages/app/src/attachments/utils.test.ts @@ -42,6 +42,18 @@ describe("fileUriToPath", () => { }); describe("localFileSourceToPath", () => { + it.each([ + "https://example.com/image%20name.png", + "data:image/png;base64,abc%20", + "blob:https://example.com/image%20name", + ])("preserves a direct Markdown image URI: %s", (source) => { + expect(localFileSourceToPath(source, { decodeHref: true })).toBe(source); + }); + + it("preserves malformed percent escapes rather than throwing", () => { + expect(localFileSourceToPath("/tmp/100%.png", { decodeHref: true })).toBe("/tmp/100%.png"); + }); + it("decodes markdown-encoded Windows drive-letter paths", () => { expect(localFileSourceToPath("C:%5CUsers%5Cfile.txt")).toBe("C:/Users/file.txt"); }); diff --git a/packages/app/src/attachments/utils.ts b/packages/app/src/attachments/utils.ts index 5fa0334359..46483bf0e7 100644 --- a/packages/app/src/attachments/utils.ts +++ b/packages/app/src/attachments/utils.ts @@ -173,11 +173,18 @@ export function fileUriToPath(uri: string): string { return normalizeWindowsDrivePath(decodedPath.replace(/^\/([A-Za-z]:[\\/])/, "$1")); } -export function localFileSourceToPath(source: string): string { +export function localFileSourceToPath( + source: string, + // Markdown destinations are URI-encoded; plain filesystem paths are not. + { decodeHref = false }: { decodeHref?: boolean } = {}, +): string { + if (/^(https?:|data:|blob:)/i.test(source)) { + return source; + } let path = source; if (source.startsWith("file://")) { path = fileUriToPath(source); - } else if (isMarkdownEncodedWindowsDrivePath(source)) { + } else if (decodeHref || isMarkdownEncodedWindowsDrivePath(source)) { path = decodeFilePathSource(source); } return normalizeWindowsDrivePath(path); diff --git a/packages/app/src/components/adaptive-modal-sheet.tsx b/packages/app/src/components/adaptive-modal-sheet.tsx index 707c0e8622..d4d833e3f1 100644 --- a/packages/app/src/components/adaptive-modal-sheet.tsx +++ b/packages/app/src/components/adaptive-modal-sheet.tsx @@ -1,10 +1,10 @@ import { useCallback, useEffect, useMemo, useState } from "react"; -import type { ReactNode } from "react"; +import type { ComponentProps, ReactNode } from "react"; import { createPortal } from "react-dom"; import { useTranslation } from "react-i18next"; import { Keyboard, Pressable, Text, View } from "react-native"; import type { DimensionValue, StyleProp, ViewStyle } from "react-native"; -import { StyleSheet, useUnistyles } from "react-native-unistyles"; +import { StyleSheet, useUnistyles, withUnistyles } from "react-native-unistyles"; import { useIsCompactFormFactor } from "@/constants/layout"; import { getOverlayRoot, @@ -12,9 +12,9 @@ import { useGlobalWebOverlayLayer, useWebOverlayRegistration, } from "../lib/overlay-root"; -import { type BottomSheetBackgroundProps } from "@gorhom/bottom-sheet"; +import { BottomSheetHandle, type BottomSheetBackgroundProps } from "@gorhom/bottom-sheet"; import Animated from "react-native-reanimated"; -import { ArrowLeft, Search, X } from "lucide-react-native"; +import { ArrowLeft, Search, X, type LucideIcon } from "lucide-react-native"; import { IsolatedBottomSheetModal, SheetVisibleFrame, @@ -223,7 +223,8 @@ const styles = StyleSheet.create((theme) => ({ const WEB_EXIT_DURATION_MS = 160; -function SheetBackground({ style }: BottomSheetBackgroundProps) { +/** The compact sheet's surface: Gorhom's `backgroundComponent` for every bottom sheet. */ +export function SheetBackground({ style }: BottomSheetBackgroundProps) { const { theme } = useUnistyles(); const combinedStyle = useMemo( () => [ @@ -239,6 +240,39 @@ function SheetBackground({ style }: BottomSheetBackgroundProps) { return ; } +const ThemedBottomSheetHandle = withUnistyles(BottomSheetHandle, (theme) => ({ + indicatorStyle: { backgroundColor: theme.colors.palette.zinc[600] }, +})); + +const HANDLE_WITH_CONTENT_STYLE = { paddingHorizontal: 0, paddingBottom: 0 }; + +/** + * The compact sheet's drag handle: Gorhom's `handleComponent` for every bottom sheet. Children + * join the handle, so a header passed here drags the sheet like the indicator does. That is how a + * sheet whose content scrolls on its own keeps its header draggable without content panning. + */ +export function SheetHandle({ + children, + // Gorhom passes `indicatorStyle={undefined}`, which would override the themed indicator. + indicatorStyle: _indicatorStyle, + ...props +}: ComponentProps) { + if (!children) return ; + // The children carry their own semantics; the handle's slider role would swallow them on web. + return ( + + {children} + + ); +} + /** * The sheet body, indented to the sheet's content inset. * @@ -253,6 +287,37 @@ function SheetContent({ style, children }: { style: StyleProp; childr return {children}; } +/** + * An icon action in a sheet header's trailing rail, drawn like the Close button so a header's + * actions line up with it at one size. Pass it through `SheetHeader.actions`. + */ +export function SheetHeaderIconButton({ + icon: Icon, + accessibilityLabel, + onPress, + testID, +}: { + icon: LucideIcon; + accessibilityLabel: string; + onPress: () => void; + testID?: string; +}) { + const { theme } = useUnistyles(); + return ( + + {({ pressed }) => ( + + )} + + ); +} + export function SheetHeaderView({ header, onClose, @@ -309,19 +374,11 @@ export function SheetHeaderView({ {header.actions ? {header.actions} : null} {showCloseButton ? ( - - {({ pressed }) => ( - - )} - + /> ) : null} {search ? ( @@ -449,7 +506,6 @@ export function AdaptiveModalSheet({ bodyStyle, contextBridge = null, }: AdaptiveModalSheetProps) { - const { theme } = useUnistyles(); const { t } = useTranslation(); const isMobile = useIsCompactFormFactor(); const insets = useSafeAreaInsets(); @@ -481,10 +537,6 @@ export function AdaptiveModalSheet({ ) : null, [footer, footerClearanceStyle, footerContainerStyle], ); - const handleIndicatorStyle = useMemo( - () => ({ backgroundColor: theme.colors.palette.zinc[600] }), - [theme.colors.palette.zinc], - ); useEffect(() => { if (!isWeb && visible) { // A newly opened sheet owns input. A keyboard belonging to the sheet below @@ -600,7 +652,7 @@ export function AdaptiveModalSheet({ backdropOpacity={0.45} enablePanDownToClose backgroundComponent={SheetBackground} - handleIndicatorStyle={handleIndicatorStyle} + handleComponent={SheetHandle} keyboardBehavior="extend" keyboardBlurBehavior="restore" accessible={false} diff --git a/packages/app/src/components/left-sidebar.tsx b/packages/app/src/components/left-sidebar.tsx index 087a3ffca8..f054668347 100644 --- a/packages/app/src/components/left-sidebar.tsx +++ b/packages/app/src/components/left-sidebar.tsx @@ -35,6 +35,7 @@ import { SidebarNavRows } from "@/components/sidebar/sidebar-nav-rows"; import { SidebarHelpMenu } from "@/components/sidebar/sidebar-help-menu"; import { SidebarResizeHandle } from "@/components/sidebar-resize-handle"; import { DensityIcon } from "@/components/ui/density-icon"; +import { SidebarSectionHeader } from "@/components/sidebar/sidebar-section-header"; import { Shortcut } from "@/components/ui/shortcut"; import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"; import { HEADER_INNER_HEIGHT, useIsCompactFormFactor } from "@/constants/layout"; @@ -805,21 +806,18 @@ function DesktopSidebar({ function WorkspacesSectionHeader() { return ( - - Workspaces - - - - - - - - - - - - - + + + + + + + + + + + + ); } @@ -850,29 +848,6 @@ const styles = StyleSheet.create((theme) => ({ sidebarHeaderGroupBelowChrome: { paddingTop: 0, }, - workspacesSectionHeader: { - flexDirection: "row", - alignItems: "center", - justifyContent: "space-between", - gap: theme.spacing[2], - // Rendered inside the scroll's listContent (paddingHorizontal spacing[2]). The title - // lands at spacing[2] left to align with project icons. Settings2's painted path stops - // inside its 14px SVG, so 4px aligns the ink rather than the SVG box to the row rail. - paddingLeft: theme.spacing[2], - paddingRight: 4, - paddingTop: theme.spacing[1], - paddingBottom: theme.spacing[1], - }, - workspacesSectionTitle: { - color: theme.colors.foregroundMuted, - fontSize: theme.fontSize.sm, - fontWeight: theme.fontWeight.normal, - }, - workspacesSectionActions: { - flexDirection: "row", - alignItems: "center", - gap: theme.spacing[1], - }, sidebarContent: { flex: 1, minHeight: 0, diff --git a/packages/app/src/components/message.tsx b/packages/app/src/components/message.tsx index 4587556ebe..7915832470 100644 --- a/packages/app/src/components/message.tsx +++ b/packages/app/src/components/message.tsx @@ -95,6 +95,7 @@ import { } from "@/assistant-file-links"; import { getCompactionMarkerLabel } from "./message-compaction-label"; import { useAssistantImage } from "@/assistant-image/use-assistant-image"; +import { localFileSourceToPath } from "@/attachments/utils"; import { AttachmentFrame, AttachmentLabel, @@ -1945,7 +1946,7 @@ export const AssistantMessage = memo(function AssistantMessage({ return ( void; }) { + const { t } = useTranslation(); const hasActiveHostFilter = useSidebarViewStore((state) => state.hostFilters.length > 0); const [creatingWorkspaceIds, setCreatingWorkspaceIds] = useState>(() => new Set()); const creatingWorkspaceTimeoutsRef = useRef>>( @@ -2413,7 +2414,12 @@ function ProjectModeList({ <> {pinnedChats.length > 0 ? ( - + {pinnedCollapsed ? null : ( <> ({ }, newWorkspaceGhostText: { color: theme.colors.foregroundMuted, - fontSize: densityFontSize(theme, "base"), + fontSize: theme.fontSize.base, minWidth: 0, flexShrink: 1, }, newWorkspaceGhostTextHovered: { - fontSize: densityFontSize(theme, "base"), + fontSize: theme.fontSize.base, minWidth: 0, flexShrink: 1, color: theme.colors.foreground, @@ -2603,7 +2609,7 @@ const styles = StyleSheet.create((theme) => ({ }, projectTitle: { color: theme.colors.foregroundMuted, - fontSize: densityFontSize(theme, "base"), + fontSize: theme.fontSize.base, fontWeight: "400", minWidth: 0, flexShrink: 1, diff --git a/packages/app/src/components/sidebar/pinned-section-header.tsx b/packages/app/src/components/sidebar/pinned-section-header.tsx deleted file mode 100644 index 2169492a08..0000000000 --- a/packages/app/src/components/sidebar/pinned-section-header.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { useMemo } from "react"; -import { useTranslation } from "react-i18next"; -import { ChevronDown, ChevronRight } from "lucide-react-native"; -import { Pressable, Text } from "react-native"; -import { StyleSheet } from "react-native-unistyles"; -import { DensityIcon } from "@/components/ui/density-icon"; -import { useIsCompactFormFactor } from "@/constants/layout"; -import { isNative } from "@/constants/platform"; -import { density, densityFontSize } from "@/styles/density"; - -export function PinnedSectionHeader({ - collapsed, - onToggle, -}: { - collapsed: boolean; - onToggle: () => void; -}) { - const { t } = useTranslation(); - const isCompact = useIsCompactFormFactor(); - const accessibilityState = useMemo(() => ({ expanded: !collapsed }), [collapsed]); - - return ( - - {({ hovered }) => ( - <> - {t("sidebar.pinned.title")} - {hovered || isNative || isCompact ? ( - - ) : null} - - )} - - ); -} - -const styles = StyleSheet.create((theme) => ({ - header: { - minHeight: density.rowHeight, - flexDirection: "row", - alignItems: "center", - alignSelf: "flex-start", - gap: theme.spacing[1], - paddingHorizontal: theme.spacing[2], - paddingVertical: theme.spacing[1], - userSelect: "none", - }, - title: { - color: theme.colors.foregroundMuted, - fontSize: densityFontSize(theme, "sm"), - fontWeight: theme.fontWeight.normal, - }, -})); diff --git a/packages/app/src/components/sidebar/project-leading-visual.tsx b/packages/app/src/components/sidebar/project-leading-visual.tsx index 3f31181220..1830e3fa10 100644 --- a/packages/app/src/components/sidebar/project-leading-visual.tsx +++ b/packages/app/src/components/sidebar/project-leading-visual.tsx @@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next"; import { ChevronDown, ChevronRight, CircleAlert } from "lucide-react-native"; import { ProjectIconView } from "@/components/project-icon-view"; import { getStatusBucketLabel } from "@/hooks/sidebar-status-view-model"; -import { density, densityIconBox, densityIconProps } from "@/styles/density"; +import { densityIconBox, densityIconProps } from "@/styles/density"; import type { Theme } from "@/styles/theme"; import type { SidebarStateBucket } from "@/utils/sidebar-agent-state"; import { @@ -24,6 +24,9 @@ import type { SidebarSurfaceBackdrop } from "@/styles/surface-backdrop"; // Every surfaced status shares one badge shell, so the badge never changes size or position // between states. Only the thing inside it changes. +// Matches the workspace title's lineHeight (sidebar-workspace-row-content's +// workspaceBranchText) so the icon centers on the title rather than floating above it. +const LEADING_SLOT_HEIGHT = 20; const STATUS_BADGE_SIZE = 12; // How far the badge overhangs the icon's bottom-right corner. Well short of half the badge: // centered on the corner it reads as hanging off the icon rather than sitting on it, and the @@ -273,10 +276,10 @@ const styles = StyleSheet.create((theme) => { // The slot is as tall as the title's line box, not as tall as the icon, and centers the // icon inside it. Rows lay their leading visual out with alignItems:flex-start, so a slot // only as tall as the icon puts it above the title and the kebab — which is why the - // workspace status indicator shares the same `rowLineHeight`. + // workspace status indicator is as tall as `LEADING_SLOT_HEIGHT`. projectLeadingVisualSlot: { width: densityIconBox("md"), - height: density.rowLineHeight, + height: LEADING_SLOT_HEIGHT, flexShrink: 0, alignItems: "center", justifyContent: "center", diff --git a/packages/app/src/components/sidebar/sidebar-group-toggle-row.tsx b/packages/app/src/components/sidebar/sidebar-group-toggle-row.tsx index 3d437ae0ca..01e07eedd4 100644 --- a/packages/app/src/components/sidebar/sidebar-group-toggle-row.tsx +++ b/packages/app/src/components/sidebar/sidebar-group-toggle-row.tsx @@ -6,7 +6,7 @@ import { StyleSheet } from "react-native-unistyles"; import { isWeb } from "@/constants/platform"; import { sidebarWorkspaceRowStyles } from "@/components/sidebar/sidebar-workspace-row-content"; import { DensityIcon } from "@/components/ui/density-icon"; -import { density, densityFontSize, densityIconBox } from "@/styles/density"; +import { density, densityIconBox } from "@/styles/density"; /** * The row that ends a truncated group. It is a workspace row that happens to say "Show more", so @@ -100,13 +100,13 @@ const styles = StyleSheet.create((theme) => ({ }, text: { color: theme.colors.foregroundMuted, - fontSize: densityFontSize(theme, "base"), + fontSize: theme.fontSize.base, minWidth: 0, flexShrink: 1, }, textHovered: { color: theme.colors.foreground, - fontSize: densityFontSize(theme, "base"), + fontSize: theme.fontSize.base, minWidth: 0, flexShrink: 1, }, diff --git a/packages/app/src/components/sidebar/sidebar-header-row.tsx b/packages/app/src/components/sidebar/sidebar-header-row.tsx index 7001bf66a6..2eeded947d 100644 --- a/packages/app/src/components/sidebar/sidebar-header-row.tsx +++ b/packages/app/src/components/sidebar/sidebar-header-row.tsx @@ -4,7 +4,7 @@ import { StyleSheet } from "react-native-unistyles"; import { HEADER_INNER_HEIGHT, HEADER_INNER_HEIGHT_MOBILE } from "@/constants/layout"; import { DensityIcon } from "@/components/ui/density-icon"; import { Shortcut } from "@/components/ui/shortcut"; -import { density, densityFontSize, densityIconBox } from "@/styles/density"; +import { density, densityIconBox } from "@/styles/density"; import type { ShortcutKey } from "@/utils/format-shortcut"; type SidebarHeaderRowVariant = "header" | "compact" | "inline"; @@ -152,7 +152,7 @@ const styles = StyleSheet.create((theme) => ({ iconSpacerCompact: { width: densityIconBox("sm"), height: densityIconBox("sm") }, label: { flexShrink: 1, - fontSize: densityFontSize(theme, "base"), + fontSize: theme.fontSize.base, fontWeight: theme.fontWeight.normal, color: theme.colors.foregroundMuted, }, diff --git a/packages/app/src/components/sidebar/sidebar-section-header.tsx b/packages/app/src/components/sidebar/sidebar-section-header.tsx new file mode 100644 index 0000000000..7a959435bc --- /dev/null +++ b/packages/app/src/components/sidebar/sidebar-section-header.tsx @@ -0,0 +1,115 @@ +import { useMemo, type ReactNode } from "react"; +import { ChevronDown, ChevronRight } from "lucide-react-native"; +import { Pressable, Text, View } from "react-native"; +import { StyleSheet } from "react-native-unistyles"; +import { DensityIcon } from "@/components/ui/density-icon"; +import { useIsCompactFormFactor } from "@/constants/layout"; +import { isNative } from "@/constants/platform"; +import { density } from "@/styles/density"; + +/** A sidebar section label such as "Pinned" or "Workspaces". A section with `onToggle` + * collapses from its title; children sit at the trailing edge as its actions. */ +export function SidebarSectionHeader({ + title, + collapsed, + onToggle, + testID, + children, +}: { + title: string; + collapsed?: boolean; + onToggle?: () => void; + testID?: string; + children?: ReactNode; +}) { + return ( + + {onToggle ? ( + + ) : ( + + {title} + + )} + {children ? {children} : null} + + ); +} + +function CollapsibleTitle({ + title, + collapsed, + onToggle, + testID, +}: { + title: string; + collapsed: boolean; + onToggle: () => void; + testID?: string; +}) { + const isCompact = useIsCompactFormFactor(); + const accessibilityState = useMemo(() => ({ expanded: !collapsed }), [collapsed]); + + return ( + + {({ hovered }) => ( + <> + {title} + {hovered || isNative || isCompact ? ( + + ) : null} + + )} + + ); +} + +const styles = StyleSheet.create((theme) => ({ + header: { + minHeight: density.rowHeight, + flexDirection: "row", + alignItems: "center", + justifyContent: "space-between", + gap: theme.spacing[2], + // The title lands at spacing[2] to align with the rows' leading icons. Trailing actions + // are icon buttons whose painted glyph stops inside the SVG box, so 4px aligns the ink + // rather than the box to the row rail. + paddingLeft: theme.spacing[2], + paddingRight: 4, + userSelect: "none", + }, + // The toggle reaches back over the header's leading padding so the whole label edge is pressable. + toggle: { + alignSelf: "stretch", + flexDirection: "row", + alignItems: "center", + gap: theme.spacing[1], + marginLeft: -theme.spacing[2], + paddingHorizontal: theme.spacing[2], + }, + title: { + color: theme.colors.foregroundMuted, + fontSize: theme.fontSize.sm, + fontWeight: theme.fontWeight.normal, + }, + actions: { + flexDirection: "row", + alignItems: "center", + gap: theme.spacing[1], + }, +})); diff --git a/packages/app/src/components/sidebar/sidebar-status-list.tsx b/packages/app/src/components/sidebar/sidebar-status-list.tsx index 85c0d524f8..baffc3a010 100644 --- a/packages/app/src/components/sidebar/sidebar-status-list.tsx +++ b/packages/app/src/components/sidebar/sidebar-status-list.tsx @@ -28,7 +28,7 @@ import type { HostBadgeModel } from "@/hosts/appearance"; import { isWeb as platformIsWeb, isNative as platformIsNative } from "@/constants/platform"; import { useIsCompactFormFactor } from "@/constants/layout"; import { StyleSheet } from "react-native-unistyles"; -import { density, densityFontSize, densityIconBox, densityIconProps } from "@/styles/density"; +import { density, densityIconBox, densityIconProps } from "@/styles/density"; import type { SidebarSurfaceBackdrop } from "@/styles/surface-backdrop"; import { withUnistyles } from "react-native-unistyles"; import { @@ -73,7 +73,7 @@ import { SidebarWorkspaceContextMenu, SidebarWorkspaceMenu, } from "@/components/sidebar/sidebar-workspace-menu"; -import { PinnedSectionHeader } from "@/components/sidebar/pinned-section-header"; +import { SidebarSectionHeader } from "@/components/sidebar/sidebar-section-header"; import { SidebarGroupToggleRow } from "@/components/sidebar/sidebar-group-toggle-row"; import { useLimitedSidebarGroup } from "@/components/sidebar/use-limited-sidebar-group"; import type { ToggleSidebarWorkspacePin } from "@/hooks/use-sidebar-workspace-pin"; @@ -146,6 +146,7 @@ export function SidebarStatusWorkspaceList({ parentGestureRef, dragGestureHostActive, }: StatusWorkspaceListProps) { + const { t } = useTranslation(); const collapsedWorkspaceGroupKeys = useSidebarCollapsedSectionsStore( (state) => state.collapsedWorkspaceGroupKeys, ); @@ -202,7 +203,12 @@ export function SidebarStatusWorkspaceList({ <> {pinnedWorkspaces.length > 0 ? ( - + {pinnedCollapsed ? null : ( <> ({ }, statusGroupTitle: { color: theme.colors.foregroundMuted, - fontSize: densityFontSize(theme, "base"), + fontSize: theme.fontSize.base, fontWeight: "400", minWidth: 0, flexShrink: 1, diff --git a/packages/app/src/components/sidebar/sidebar-workspace-row-content.tsx b/packages/app/src/components/sidebar/sidebar-workspace-row-content.tsx index 33f14afcb5..7fc904f3b3 100644 --- a/packages/app/src/components/sidebar/sidebar-workspace-row-content.tsx +++ b/packages/app/src/components/sidebar/sidebar-workspace-row-content.tsx @@ -16,7 +16,7 @@ import { type SidebarWorkspaceTrailing, } from "@/components/sidebar/workspace-trailing"; import { useAppSettings } from "@/hooks/use-settings"; -import { density, densityFontSize, densityIconBox } from "@/styles/density"; +import { densityIconBox } from "@/styles/density"; import type { Theme } from "@/styles/theme"; import type { SidebarStateBucket } from "@/utils/sidebar-agent-state"; import { getStatusDotColor } from "@/utils/status-dot-color"; @@ -453,6 +453,9 @@ export function SidebarWorkspaceTrailingActionOverlay({ ); } +// The status dot centres on the title's first line, so both share its line height. +const TITLE_LINE_HEIGHT = 20; + const styles = StyleSheet.create((theme) => ({ workspaceRowContent: { position: "relative", @@ -481,7 +484,7 @@ const styles = StyleSheet.create((theme) => ({ workspaceStatusDot: { position: "relative", width: densityIconBox("md"), - height: density.rowLineHeight, + height: TITLE_LINE_HEIGHT, borderRadius: theme.borderRadius.full, flexShrink: 0, alignItems: "center", @@ -513,9 +516,9 @@ const styles = StyleSheet.create((theme) => ({ // to the meta row, so it takes the full width the trailing slot leaves behind. workspaceBranchText: { color: theme.colors.foreground, - fontSize: densityFontSize(theme, "base"), + fontSize: theme.fontSize.base, fontWeight: "400", - lineHeight: density.rowLineHeight, + lineHeight: TITLE_LINE_HEIGHT, opacity: 0.76, flex: 1, minWidth: 0, diff --git a/packages/app/src/components/ui/isolated-bottom-sheet-modal/host-scope.tsx b/packages/app/src/components/ui/isolated-bottom-sheet-modal/host-scope.tsx new file mode 100644 index 0000000000..d107547dcf --- /dev/null +++ b/packages/app/src/components/ui/isolated-bottom-sheet-modal/host-scope.tsx @@ -0,0 +1,91 @@ +import { + BottomSheetModalInternalProvider, + INITIAL_CONTAINER_LAYOUT, + useBottomSheetModalInternal, +} from "@gorhom/bottom-sheet"; +import { PortalHost } from "@gorhom/portal"; +import { useCallback, useId, useMemo, useRef, type ReactNode } from "react"; +import { + Dimensions, + StatusBar, + StyleSheet, + View, + type LayoutChangeEvent, + type StyleProp, + type ViewStyle, +} from "react-native"; +import { useSharedValue } from "react-native-reanimated"; + +/** + * Hosts the sheets presented from inside it. + * + * A sheet's content normally lands at the app root, on the far side of the portal, where every + * context between the root and the call site is gone (floating-panels.md Gotcha 7). Inside a + * scope, a sheet renders into the scope's own host instead, so its content reads the scope's + * contexts — the navigator, the workspace providers — without bridging each one by hand. The + * scope only moves where the sheet draws: it still joins the app-wide sheet stack, so stacking, + * Back and the backdrop treat it like every other sheet. + * + * The host fills the scope, and the sheets presented in it size and dock to the scope, not the + * window. Sheets presented outside the scope keep drawing at the root, above it. + */ +export function SheetHostScope({ + children, + style, +}: { + children: ReactNode; + style?: StyleProp; +}) { + const parent = useBottomSheetModalInternal(); + const hostName = `sheet-host-${useId()}`; + const containerLayoutState = useSharedValue({ ...INITIAL_CONTAINER_LAYOUT }); + const hostRef = useRef(null); + + // Mirrors Gorhom's own hosting container measurement, so a sheet in the scope lays out against + // the scope the way a root sheet lays out against the window. + const handleLayout = useCallback( + ({ nativeEvent }: LayoutChangeEvent) => { + const { height } = nativeEvent.layout; + hostRef.current?.measure((_x, _y, _width, _height, _pageX, pageY) => { + const windowHeight = Dimensions.get("window").height; + const top = pageY ?? 0; + containerLayoutState.set({ + height, + offset: { + top, + bottom: Math.max(0, windowHeight - (top + height + (StatusBar.currentHeight ?? 0))), + left: 0, + right: 0, + }, + }); + }); + }, + [containerLayoutState], + ); + + const value = useMemo( + () => ({ ...parent, hostName, containerLayoutState }), + [containerLayoutState, hostName, parent], + ); + + return ( + + + {children} + + + + + + ); +} + +const styles = StyleSheet.create({ + scope: { + flex: 1, + minHeight: 0, + }, + host: { + ...StyleSheet.absoluteFillObject, + }, +}); diff --git a/packages/app/src/components/ui/isolated-bottom-sheet-modal/index.tsx b/packages/app/src/components/ui/isolated-bottom-sheet-modal/index.tsx index 8dd55e5678..457181c53f 100644 --- a/packages/app/src/components/ui/isolated-bottom-sheet-modal/index.tsx +++ b/packages/app/src/components/ui/isolated-bottom-sheet-modal/index.tsx @@ -40,6 +40,13 @@ type IsolatedBottomSheetModalProps = Omit< BottomSheetModalProps, "enableDismissOnClose" | "stackBehavior" | "children" | "backdropComponent" > & { + /** + * Whether closing (drag, backdrop, Back) also dismisses, which unmounts the content. Default + * true: the owner hears `onDismiss` and drops its state. Pass `false` for a sheet whose close the + * owner may veto: it parks at index -1 with its content mounted, the owner hears `onChange(-1)`, + * and either snaps it back or unmounts it, which dismisses it from the stack. + */ + enableDismissOnClose?: boolean; /** * Nodes only. Gorhom also accepts a render function, but nothing here uses it and a bridge * would have to reach around it. @@ -84,19 +91,24 @@ export const IsolatedBottomSheetModal = forwardRef< presentation = "push", contextBridge, backdropOpacity, + enableDismissOnClose = true, ...bottomSheetProps } = props; const renderBackdrop = useCallback( (backdropProps: BottomSheetBackdropProps) => ( - + ), - [backdropOpacity], + [backdropOpacity, enableDismissOnClose], ); const modal = ( @@ -154,3 +166,5 @@ export function useIsolatedBottomSheetVisibility({ } export { SheetVisibleFrame } from "./visible-frame"; +export { systemBackPress } from "./back-press"; +export { SheetHostScope } from "./host-scope"; diff --git a/packages/app/src/components/ui/isolated-bottom-sheet-modal/sheet-backdrop.tsx b/packages/app/src/components/ui/isolated-bottom-sheet-modal/sheet-backdrop.tsx index 1232566462..8c85ef77ca 100644 --- a/packages/app/src/components/ui/isolated-bottom-sheet-modal/sheet-backdrop.tsx +++ b/packages/app/src/components/ui/isolated-bottom-sheet-modal/sheet-backdrop.tsx @@ -1,5 +1,15 @@ import { BottomSheetBackdrop, type BottomSheetBackdropProps } from "@gorhom/bottom-sheet"; -export function SheetBackdrop(props: BottomSheetBackdropProps & { opacity?: number }) { +/** + * What a backdrop tap does. `dismiss` takes the top modal off the stack and unmounts it; `close` + * only slides this sheet down, so a sheet that keeps its content through a close can veto it. + */ +export type SheetBackdropPress = "dismiss" | "close"; + +export function SheetBackdrop({ + pressBehavior: _pressBehavior, + ...props +}: BottomSheetBackdropProps & { opacity?: number; pressBehavior: SheetBackdropPress }) { + // Gorhom's native backdrop closes its own sheet, which here is always the top one. return ; } diff --git a/packages/app/src/components/ui/isolated-bottom-sheet-modal/sheet-backdrop.web.tsx b/packages/app/src/components/ui/isolated-bottom-sheet-modal/sheet-backdrop.web.tsx index ba1e397a9e..749d89359c 100644 --- a/packages/app/src/components/ui/isolated-bottom-sheet-modal/sheet-backdrop.web.tsx +++ b/packages/app/src/components/ui/isolated-bottom-sheet-modal/sheet-backdrop.web.tsx @@ -1,16 +1,30 @@ import { BottomSheetBackdrop, + useBottomSheet, useBottomSheetModal, type BottomSheetBackdropProps, } from "@gorhom/bottom-sheet"; import { useCallback } from "react"; import { useTranslation } from "react-i18next"; import { Pressable, StyleSheet, View } from "react-native"; +import type { SheetBackdropPress } from "./sheet-backdrop"; -export function SheetBackdrop(props: BottomSheetBackdropProps & { opacity?: number }) { +export type { SheetBackdropPress }; + +export function SheetBackdrop({ + pressBehavior, + ...props +}: BottomSheetBackdropProps & { opacity?: number; pressBehavior: SheetBackdropPress }) { const { dismiss } = useBottomSheetModal(); + const { close } = useBottomSheet(); const { t } = useTranslation(); - const dismissTopSheet = useCallback(() => dismiss(), [dismiss]); + const handlePress = useCallback(() => { + // A sheet that may veto its close slides itself down and lets its owner decide. The other + // sheets ask the provider for the top modal, so a lower backdrop caught mid-transition still + // dismisses the sheet the user sees. + if (pressBehavior === "close") close(); + else dismiss(); + }, [close, dismiss, pressBehavior]); return ( @@ -28,7 +42,7 @@ export function SheetBackdrop(props: BottomSheetBackdropProps & { opacity?: numb accessibilityLabel={t("common.bottomSheetBackdrop")} // The provider owns presentation order, including when a lower backdrop remounts. // Keep this target until the portal unmounts: animation must not expose the sheet below. - onPress={dismissTopSheet} + onPress={handlePress} style={StyleSheet.absoluteFill} /> diff --git a/packages/app/src/components/ui/menu/menu-surface.tsx b/packages/app/src/components/ui/menu/menu-surface.tsx index 3b76d4cf2b..2f73149244 100644 --- a/packages/app/src/components/ui/menu/menu-surface.tsx +++ b/packages/app/src/components/ui/menu/menu-surface.tsx @@ -126,8 +126,14 @@ export interface MenuSurfaceProps { * popover (plus one flyout per open submenu) or a bottom sheet showing one page at a time. */ export function MenuSurface(props: MenuSurfaceProps): ReactElement | null { - const { presentation } = useMenuContext("MenuSurface"); + const { presentation, open, setOpen } = useMenuContext("MenuSurface"); const active = useRetainedPanelActive(); + // A menu belongs to the panel that opened it. When that panel leaves the screen the menu closes + // for good, rather than waiting hidden to reappear with the panel: a row that opened a sheet + // and promoted it to a tab, say, would otherwise bring the list back on the next tab switch. + useEffect(() => { + if (!active && open) setOpen(false); + }, [active, open, setOpen]); // Portals escape the hidden panel. Remove the surface in its inactive commit, // before freezing can suspend an async menu action's closing update. if (!active) return null; diff --git a/packages/app/src/components/ui/text-input/text-input.native.tsx b/packages/app/src/components/ui/text-input/text-input.native.tsx index 243e813f26..4ff773cefa 100644 --- a/packages/app/src/components/ui/text-input/text-input.native.tsx +++ b/packages/app/src/components/ui/text-input/text-input.native.tsx @@ -104,6 +104,13 @@ export const EditingTextInput = forwardRef { + if (inputRef.current?.setSelection) { + inputRef.current.setSelection(selection.start, selection.end); + return; + } + inputRef.current?.setNativeProps?.({ selection }); + }, reset: () => { textRef.current = ""; const autoFocus = inputRef.current?.isFocused?.() ?? false; diff --git a/packages/app/src/components/ui/text-input/text-input.web.tsx b/packages/app/src/components/ui/text-input/text-input.web.tsx index 30ee0c6eba..021e3b8e0c 100644 --- a/packages/app/src/components/ui/text-input/text-input.web.tsx +++ b/packages/app/src/components/ui/text-input/text-input.web.tsx @@ -77,6 +77,10 @@ export const EditingTextInput = forwardRef { + const input = inputRef.current as WebTextInputElement | null; + input?.setSelectionRange?.(selection.start, selection.end); + }, reset: () => { textRef.current = ""; const input = inputRef.current as WebTextInputElement | null; diff --git a/packages/app/src/components/ui/text-input/types.ts b/packages/app/src/components/ui/text-input/types.ts index 9f746bd656..fbc14e4726 100644 --- a/packages/app/src/components/ui/text-input/types.ts +++ b/packages/app/src/components/ui/text-input/types.ts @@ -8,6 +8,7 @@ export interface EditingTextInputHandle { isFocused(): boolean; getText(): string; replaceText(text: string, selection?: { start: number; end: number }): void; + setSelection(selection: { start: number; end: number }): void; /** Clear the editor and reset its intrinsic layout, preserving focus intent. */ reset(): void; getNativeRef(): unknown; diff --git a/packages/app/src/composer/dock/index.native.tsx b/packages/app/src/composer/dock/index.native.tsx index a668c00743..4b6407c872 100644 --- a/packages/app/src/composer/dock/index.native.tsx +++ b/packages/app/src/composer/dock/index.native.tsx @@ -1,5 +1,6 @@ import { ComposerDockBackground } from "./internal/background"; export { ComposerDockBackground } from "./internal/background"; +export { ComposerFullscreenBody, ComposerFullscreenFooter } from "./internal/fullscreen"; import { ScrollView } from "@/components/ui/scroll-view"; import { useSafeAreaInsets } from "react-native-safe-area-context"; import { useIsCompactFormFactor } from "@/constants/layout"; @@ -8,22 +9,22 @@ import { resolveContentMaxWidth, useAppSettings } from "@/hooks/use-settings"; import { KeyboardTranslateView } from "@/keyboard/shift"; import { createContext, useCallback, useContext, useState, type ReactNode } from "react"; import { View, type LayoutChangeEvent, type ViewProps, StyleSheet } from "react-native"; +import { StyleSheet as ThemedStyleSheet } from "react-native-unistyles"; import Animated, { useAnimatedStyle, useSharedValue, - useDerivedValue, useAnimatedReaction, type SharedValue, } from "react-native-reanimated"; import { useKeyboardShift } from "@/keyboard/shift"; import { resolveCenteredClearance, - resolveInlineComposerCapacity, + resolveComposerSlotCapacity, updateComposerCapacity, type ComposerCapacity, } from "./internal/capacity"; -const ViewportCapacity = createContext | null>(null); +const ViewportSizing = createContext | null>(null); interface ComposerViewportProps extends ViewProps { bottomInset?: number; @@ -55,7 +56,6 @@ function ComposerViewport({ }, [], ); - const capacity = useDerivedValue(() => sizing.value?.capacity); const measureViewport = useCallback( (event: LayoutChangeEvent) => { measuredHeight.value = event.nativeEvent.layout.height; @@ -66,20 +66,24 @@ function ComposerViewport({ return ( - {children} + {children} ); } /** Bound the complete composer (including its controls), not just the text input. */ -function ComposerViewportContent({ style, ...props }: ViewProps) { +function ComposerViewportContent({ + style, + fullscreen = false, + ...props +}: ViewProps & { fullscreen?: boolean }) { const compact = useIsCompactFormFactor(); - const capacity = useContext(ViewportCapacity); - if (!capacity) throw new Error("ComposerViewportContent requires ComposerViewport"); + const sizing = useContext(ViewportSizing); + if (!sizing) throw new Error("ComposerViewportContent requires ComposerViewport"); const constraint = useAnimatedStyle(() => ({ // Only viewport changes and keyboard start/end events trigger layout. Motion // stays in KeyboardTranslateView and never changes this constraint per frame. - maxHeight: resolveInlineComposerCapacity(capacity.value, compact), + maxHeight: resolveComposerSlotCapacity(sizing.value, { compact, fullscreen }), })); return ( @@ -108,37 +112,71 @@ function useCenteredClearance(safeAreaBottom: number) { interface ComposerDockProps { children: [ReactNode, ReactNode, ReactNode?]; centered?: boolean; + /** + * Fullscreen is a layout mode of the same mounted composer: the slot fills the + * stationary viewport over the content and lays out the keyboard itself, so the + * surface stops translating. The screen that owns the chrome hides it. + */ + fullscreen?: boolean; } /** The stationary viewport, translated surface, and bounded composer are one owner. */ export function ComposerDock({ children: [content, composer, overlay], centered = false, + fullscreen = false, }: ComposerDockProps) { const insets = useSafeAreaInsets(); const contentMaxWidth = resolveContentMaxWidth(useAppSettings().settings); const centeredClearance = useCenteredClearance(insets.bottom); // Preserve the existing centered form's visual balance on tablets. - const bottomInset = centered ? HEADER_INNER_HEIGHT + 24 : 0; + const bottomInset = centered && !fullscreen ? HEADER_INNER_HEIGHT + 24 : 0; + const fullscreenSurface = [ + themedStyles.fullscreenComposer, + { + paddingTop: insets.top, + paddingBottom: insets.bottom, + paddingLeft: insets.left, + paddingRight: insets.right, + }, + ]; if (centered) { + // Same tree in both modes. Fullscreen stops centering and translating, hides the + // setup fields, and lets the composer slot take the whole stationary viewport. return ( - - + + {content} - - {composer} + + {composer} {overlay} @@ -148,7 +186,7 @@ export function ComposerDock({ } return ( - + - - {composer} + + + {composer} + {overlay} @@ -178,9 +227,16 @@ const dockStyles = StyleSheet.create({ surface: { flex: 1 }, content: { flex: 1, justifyContent: "flex-end" }, composer: { width: "100%", flexShrink: 1 }, + fullscreenSlot: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }, centeredViewport: { flex: 1, alignItems: "center", justifyContent: "center" }, centered: { flexShrink: 1, width: "100%" }, // Reserve the composer's own capped height before the setup scroll view shrinks. centeredComposer: { width: "100%", flexShrink: 0 }, setup: { flexGrow: 0, flexShrink: 1, minHeight: 0 }, + hiddenSetup: { display: "none" }, }); + +// The fullscreen composer paints its own surface, including under the safe areas. +const themedStyles = ThemedStyleSheet.create((theme) => ({ + fullscreenComposer: { flex: 1, backgroundColor: theme.colors.surface1 }, +})); diff --git a/packages/app/src/composer/dock/index.tsx b/packages/app/src/composer/dock/index.tsx index 3f41118696..421002352e 100644 --- a/packages/app/src/composer/dock/index.tsx +++ b/packages/app/src/composer/dock/index.tsx @@ -1,48 +1,69 @@ export { ComposerDockBackground } from "./internal/background"; +export { ComposerFullscreenBody, ComposerFullscreenFooter } from "./internal/fullscreen"; import { ScrollView } from "@/components/ui/scroll-view"; -import { useState, useCallback, useMemo, type ReactNode } from "react"; +import { useState, useCallback, useMemo, useRef, type ReactNode } from "react"; import { View } from "react-native"; import { StyleSheet } from "react-native-unistyles"; import { resolveInlineComposerCapacity } from "./internal/capacity"; +import { useFullscreenSlotFrame } from "./internal/fullscreen"; import { useIsCompactFormFactor } from "@/constants/layout"; import { HEADER_INNER_HEIGHT } from "@/constants/layout"; interface ComposerDockProps { children: [ReactNode, ReactNode, ReactNode?]; centered?: boolean; + /** See the native dock: the same mounted composer fills the visible surface. */ + fullscreen?: boolean; } export function ComposerDock({ children: [content, composer, overlay], centered = false, + fullscreen = false, }: ComposerDockProps) { const compact = useIsCompactFormFactor(); - const [availableHeight, setAvailableHeight] = useState(); + const [surfaceSize, setSurfaceSize] = useState<{ width: number; height: number }>(); + const surfaceRef = useRef(null); + const fullscreenFrame = useFullscreenSlotFrame(fullscreen, surfaceRef, surfaceSize); const constraint = useMemo( - () => ({ maxHeight: resolveInlineComposerCapacity(availableHeight, compact) }), - [availableHeight, compact], + () => ({ maxHeight: resolveInlineComposerCapacity(surfaceSize?.height, compact) }), + [surfaceSize?.height, compact], ); const measureViewport = useCallback((event: import("react-native").LayoutChangeEvent) => { - const { height } = event.nativeEvent.layout; - if (height > 0) setAvailableHeight(height); + const { width, height } = event.nativeEvent.layout; + if (height > 0) setSurfaceSize({ width, height }); }, []); if (centered) { return ( - + {content} - {composer} + + {composer} + {overlay} ); } return ( - + {content} - {composer} + + {composer} + {overlay} ); @@ -52,6 +73,10 @@ const styles = StyleSheet.create((theme) => ({ surface: { flex: 1, overflow: "hidden" }, content: { flex: 1, justifyContent: "flex-end" }, composer: { width: "100%", flexShrink: 1 }, + // Fixed, not absolute: a touch pan that starts inside an overflow-hidden ancestor + // never reaches the zoomed visual viewport, while a fixed box chains to the viewport + // directly. React Native Web renders `fixed`; React Native's style type omits it. + fullscreenComposer: { position: "fixed" as "absolute" }, centered: { flex: 1, alignItems: "center", diff --git a/packages/app/src/composer/dock/internal/capacity.test.ts b/packages/app/src/composer/dock/internal/capacity.test.ts index 7e98b7ef3d..44e79e6ef9 100644 --- a/packages/app/src/composer/dock/internal/capacity.test.ts +++ b/packages/app/src/composer/dock/internal/capacity.test.ts @@ -1,6 +1,7 @@ import { describe, expect, it } from "vitest"; import { resolveCenteredClearance, + resolveComposerSlotCapacity, resolveInlineComposerCapacity, resolveComposerCapacity, updateComposerCapacity, @@ -19,6 +20,20 @@ describe("composer viewport", () => { expect(resolveInlineComposerCapacity(open.capacity, false)).toBe(245); expect(resolveInlineComposerCapacity(undefined, true)).toBeUndefined(); }); + it("lets a fullscreen composer fill the viewport while inline keeps its cap", () => { + const open = updateComposerCapacity(undefined, { + height: 582, + bottomInset: 24, + safeAreaBottom: 0, + centered: false, + keyboardShift: 308, + }); + expect(resolveComposerSlotCapacity(open, { compact: true, fullscreen: true })).toBe(582); + expect(resolveComposerSlotCapacity(open, { compact: true, fullscreen: false })).toBe(147); + expect(resolveComposerSlotCapacity(undefined, { compact: true, fullscreen: true })).toBe( + undefined, + ); + }); it("preserves the editing capacity when the keyboard closes", () => { const viewport = { height: 582, bottomInset: 24, safeAreaBottom: 0, centered: false }; const open = updateComposerCapacity(undefined, { ...viewport, keyboardShift: 308 }); diff --git a/packages/app/src/composer/dock/internal/capacity.ts b/packages/app/src/composer/dock/internal/capacity.ts index ca4fed2991..9c460e1729 100644 --- a/packages/app/src/composer/dock/internal/capacity.ts +++ b/packages/app/src/composer/dock/internal/capacity.ts @@ -10,6 +10,8 @@ interface ComposerGeometry { export interface ComposerCapacity { keyboardReserve: number; capacity: number; + /** The stationary viewport; a fullscreen composer fills it and lays out the keyboard itself. */ + viewportHeight: number; } export function resolveComposerCapacity(input: ComposerGeometry): number { @@ -48,6 +50,7 @@ export function updateComposerCapacity( return { keyboardReserve, capacity: resolveComposerCapacity({ ...input, keyboardShift: keyboardReserve }), + viewportHeight: input.height, }; } @@ -60,3 +63,19 @@ export function resolveInlineComposerCapacity( if (capacity === undefined) return undefined; return compact ? capacity * 0.6 : capacity; } + +export interface ComposerSlotLayout { + compact: boolean; + fullscreen: boolean; +} + +/** The bound on the composer slot: inline capacity, or the whole viewport in fullscreen. */ +export function resolveComposerSlotCapacity( + sizing: ComposerCapacity | undefined, + layout: ComposerSlotLayout, +): number | undefined { + "worklet"; + if (sizing === undefined) return undefined; + if (layout.fullscreen) return sizing.viewportHeight; + return resolveInlineComposerCapacity(sizing.capacity, layout.compact); +} diff --git a/packages/app/src/composer/dock/internal/fullscreen.native.tsx b/packages/app/src/composer/dock/internal/fullscreen.native.tsx new file mode 100644 index 0000000000..9f27befa4c --- /dev/null +++ b/packages/app/src/composer/dock/internal/fullscreen.native.tsx @@ -0,0 +1,39 @@ +import type { ReactNode } from "react"; +import { StyleSheet, type ViewProps } from "react-native"; +import Animated, { useAnimatedStyle } from "react-native-reanimated"; +import { KeyboardTranslateView, useKeyboardShift } from "@/keyboard/shift"; + +/** + * The editing region of a composer. Inline it only continues the shrink chain. In + * fullscreen it fills the stationary frame and reserves the keyboard's space at + * motion boundaries, the same boundary-time layout the dock capacity uses: the + * keyboard start/end events write `layoutShift`; frames in between move the footer. + */ +export function ComposerFullscreenBody({ + fullscreen, + children, +}: { + fullscreen: boolean; + children: ReactNode; +}) { + const { layoutShift } = useKeyboardShift(); + const reservation = useAnimatedStyle(() => ({ + marginBottom: fullscreen ? layoutShift.value : 0, + })); + return ( + + {children} + + ); +} + +/** The Send row of a fullscreen composer rides the keyboard like the inline dock surface. */ +export function ComposerFullscreenFooter({ children, ...props }: ViewProps) { + return {children}; +} + +// Plain React Native styles: these land on Reanimated views (docs/unistyles.md). +const styles = StyleSheet.create({ + inline: { flexShrink: 1 }, + fullscreen: { flex: 1, minHeight: 0 }, +}); diff --git a/packages/app/src/composer/dock/internal/fullscreen.tsx b/packages/app/src/composer/dock/internal/fullscreen.tsx new file mode 100644 index 0000000000..36291181c1 --- /dev/null +++ b/packages/app/src/composer/dock/internal/fullscreen.tsx @@ -0,0 +1,89 @@ +import { useLayoutEffect, useState, type ReactNode, type RefObject } from "react"; +import { StyleSheet, View, type ViewProps } from "react-native"; + +/** The editing region of a composer; see the native file for the keyboard contract. */ +export function ComposerFullscreenBody({ + fullscreen, + children, +}: { + fullscreen: boolean; + children: ReactNode; +}) { + return {children}; +} + +export function ComposerFullscreenFooter({ children, ...props }: ViewProps) { + return {children}; +} + +export interface ComposerSlotFrame { + top: number; + left: number; + width: number; + height: number; +} + +/** + * Where a fullscreen composer sits, in layout-viewport coordinates for a fixed box: the + * part of the dock surface the browser's visible viewport shows. A mobile browser + * keyboard shrinks or pans that viewport without resizing the page, so the frame + * follows it instead of the layout. + */ +export function useFullscreenSlotFrame( + active: boolean, + surfaceRef: RefObject, + surfaceSize: { width: number; height: number } | undefined, +): ComposerSlotFrame | undefined { + const [frame, setFrame] = useState(); + useLayoutEffect(() => { + if (!active) { + setFrame(undefined); + return; + } + const update = () => { + const surface = surfaceRef.current as unknown as HTMLElement | null; + if (!surface) return; + setFrame(resolveVisibleSurfaceFrame(surface.getBoundingClientRect(), readVisibleViewport())); + }; + const visualViewport = window.visualViewport; + update(); + visualViewport?.addEventListener("resize", update); + visualViewport?.addEventListener("scroll", update); + window.addEventListener("resize", update); + return () => { + visualViewport?.removeEventListener("resize", update); + visualViewport?.removeEventListener("scroll", update); + window.removeEventListener("resize", update); + }; + }, [active, surfaceRef, surfaceSize]); + return frame; +} + +function readVisibleViewport() { + const viewport = window.visualViewport; + return { + top: viewport?.offsetTop ?? 0, + left: viewport?.offsetLeft ?? 0, + width: viewport?.width ?? window.innerWidth, + height: viewport?.height ?? window.innerHeight, + }; +} + +function resolveVisibleSurfaceFrame( + surface: { top: number; left: number; right: number; bottom: number }, + viewport: { top: number; left: number; width: number; height: number }, +): ComposerSlotFrame { + const top = Math.max(viewport.top, surface.top); + const left = Math.max(viewport.left, surface.left); + return { + top, + left, + width: Math.max(0, Math.min(viewport.left + viewport.width, surface.right) - left), + height: Math.max(0, Math.min(viewport.top + viewport.height, surface.bottom) - top), + }; +} + +const styles = StyleSheet.create({ + inline: { flexShrink: 1 }, + fullscreen: { flex: 1, minHeight: 0 }, +}); diff --git a/packages/app/src/composer/draft/input-draft.live.test.tsx b/packages/app/src/composer/draft/input-draft.live.test.tsx index 33041cceb6..8bc31bb176 100644 --- a/packages/app/src/composer/draft/input-draft.live.test.tsx +++ b/packages/app/src/composer/draft/input-draft.live.test.tsx @@ -210,6 +210,8 @@ describe("useAgentInputDraft live contract", () => { }); const hydratedTextReplacement = getLatest().textReplacement; + // The editor applies a retained caret to the hydrated text, so hydration announces itself. + expect(hydratedTextReplacement.kind).toBe("hydrated"); await act(async () => { getLatest().editText("hello world"); @@ -223,6 +225,7 @@ describe("useAgentInputDraft live contract", () => { }); expect(getLatest().textReplacement).not.toBe(hydratedTextReplacement); + expect(getLatest().textReplacement.kind).toBe("replace"); expect(getLatest().textReplacement.text).toBe("replacement text"); await act(async () => { diff --git a/packages/app/src/composer/draft/input-draft.ts b/packages/app/src/composer/draft/input-draft.ts index c64753694a..c14db9a119 100644 --- a/packages/app/src/composer/draft/input-draft.ts +++ b/packages/app/src/composer/draft/input-draft.ts @@ -123,10 +123,10 @@ export function useAgentInputDraft(input: UseAgentInputDraftInput): AgentInputDr })); const publishTextReplacement = useCallback( - (nextText: string) => { + (kind: "hydrated" | "replace", nextText: string) => { textReplacementRevisionRef.current += 1; setTextReplacement({ - kind: "replace", + kind, key: `${draftKey}:${textReplacementRevisionRef.current}`, text: nextText, }); @@ -176,7 +176,7 @@ export function useAgentInputDraft(input: UseAgentInputDraftInput): AgentInputDr (nextText: string) => { textPublication.cancel(); useDraftStore.getState().editDraftText({ draftKey, text: nextText }); - publishTextReplacement(nextText); + publishTextReplacement("replace", nextText); }, [draftKey, publishTextReplacement, textPublication], ); @@ -229,7 +229,7 @@ export function useAgentInputDraft(input: UseAgentInputDraftInput): AgentInputDr await useDraftStore.getState().hydrateDraftInput({ draftKey }); if (!cancelled) { const hydratedText = useDraftStore.getState().getDraftInput(draftKey)?.text ?? ""; - publishTextReplacement(hydratedText); + publishTextReplacement("hydrated", hydratedText); setHydratedDraftKey(draftKey); } })(); diff --git a/packages/app/src/composer/draft/workspace-tab.tsx b/packages/app/src/composer/draft/workspace-tab.tsx index 4aa22a324d..b54b344a36 100644 --- a/packages/app/src/composer/draft/workspace-tab.tsx +++ b/packages/app/src/composer/draft/workspace-tab.tsx @@ -6,6 +6,7 @@ import { ComposerDock } from "@/composer/dock"; import { useContainerWidthBelow } from "@/hooks/use-container-width"; import invariant from "tiny-invariant"; import { Composer } from "@/composer"; +import { useComposerEditingSession, useComposerFullscreen } from "@/composer/editing-session"; import { FileDropZone } from "@/components/file-drop/file-drop-zone"; import { ComposerImportPill } from "@/composer/draft/import-pill"; import { COMPOSER_PILL_CLEARANCE } from "@/composer/pill-styles"; @@ -385,6 +386,8 @@ export function WorkspaceDraftAgentTab({ }, [pendingCreateAttempt]); const allowsEmptyAutoSubmit = pendingAutoSubmit?.allowEmptyText === true; const isCompactFormFactor = useIsCompactFormFactor(); + const editingSession = useComposerEditingSession("chat"); + const isComposerFullscreen = useComposerFullscreen(editingSession); const { onLayout: onInputAreaLayout, isBelow: isCompactComposerLayout } = useContainerWidthBelow( COMPACT_FORM_FACTOR_WIDTH, { initialIsBelow: isCompactFormFactor }, @@ -628,10 +631,10 @@ export function WorkspaceDraftAgentTab({ return ( - + {dockContent} - {importPillPress ? ( + {importPillPress && !isComposerFullscreen ? ( @@ -655,6 +658,7 @@ export function WorkspaceDraftAgentTab({ onChangeAttachments={draftInput.setAttachments} cwd={composerState.workingDir} clearDraft={draftInput.clear} + editingSession={editingSession} autoFocus={shouldAutoFocusWorkspaceDraftComposer({ isPaneFocused, isSubmitting })} autoFocusKey={String(draftInput.attachmentFocusRequestId)} onFocusInput={handleFocusInputCallback} @@ -672,6 +676,8 @@ const animatedStaticStyles = RNStyleSheet.create({ inputAreaWrapper: { width: "100%", flexShrink: 1, + // Content-sized inline; fills the dock's fullscreen slot. + flexGrow: 1, }, }); diff --git a/packages/app/src/composer/editing-session/index.test.ts b/packages/app/src/composer/editing-session/index.test.ts index d593e5a64e..31c3765426 100644 --- a/packages/app/src/composer/editing-session/index.test.ts +++ b/packages/app/src/composer/editing-session/index.test.ts @@ -1,52 +1,61 @@ import { describe, expect, it } from "vitest"; -import { ComposerEditingSession } from "./index"; +import { ComposerEditingSession, ComposerEditingSessions } from "./index"; -function leaveLiveDraft(session: ComposerEditingSession) { - session.captureForRemount({ - snapshot: { text: "Unpublished live draft", selection: { start: 4, end: 17 } }, - focused: true, - replacementKey: "draft:applied", - }); -} - -describe("composer editing remount handoff", () => { - it("keeps live text and selection when remounting from an initial draft publication", () => { +describe("composer editing session", () => { + it("publishes fullscreen changes once per transition", () => { const session = new ComposerEditingSession(); - leaveLiveDraft(session); - const handoff = session.takeHandoff({ kind: "initial", key: "draft:initial", text: "stale" }); - expect(handoff?.snapshot).toEqual({ - text: "Unpublished live draft", - selection: { start: 4, end: 17 }, - }); - expect(handoff?.focused).toBe(true); + const changes: boolean[] = []; + session.subscribe(() => changes.push(session.getFullscreen())); + session.setFullscreen(true); + session.setFullscreen(true); + session.setFullscreen(false); + expect(changes).toEqual([true, false]); }); - it("keeps local edits when the last applied replacement is still current", () => { + it("hands the retained caret and focus intent to exactly one later mount", () => { const session = new ComposerEditingSession(); - leaveLiveDraft(session); - const handoff = session.takeHandoff({ - kind: "replace", - key: "draft:applied", - text: "old replacement", - }); - expect(handoff?.snapshot).toEqual({ - text: "Unpublished live draft", - selection: { start: 4, end: 17 }, - }); + expect(session.takeEditor()).toBeNull(); + session.retainEditor({ selection: { start: 4, end: 17 }, focused: true }); + expect(session.takeEditor()).toEqual({ selection: { start: 4, end: 17 }, focused: true }); + expect(session.takeEditor()).toBeNull(); + }); +}); + +describe("composer editing sessions", () => { + const workspace = "server:workspace"; + const target = JSON.stringify({ kind: "agent", agentId: "a" }); + + it("keeps one session per tab and purpose until the tab target changes", () => { + const sessions = new ComposerEditingSessions(); + const chat = sessions.get(workspace, "tab-1", target, "chat"); + expect(sessions.get(workspace, "tab-1", target, "chat")).toBe(chat); + expect(sessions.get(workspace, "tab-1", target, "terminal")).not.toBe(chat); + const retargeted = JSON.stringify({ kind: "agent", agentId: "b" }); + expect(sessions.get(workspace, "tab-1", retargeted, "chat")).not.toBe(chat); + }); + + it("reports a tab as fullscreen while any of its composers is fullscreen", () => { + const sessions = new ComposerEditingSessions(); + const notifications: boolean[] = []; + sessions.subscribe(() => notifications.push(sessions.isTabFullscreen(workspace, "tab-1"))); + const chat = sessions.get(workspace, "tab-1", target, "chat"); + sessions.get(workspace, "tab-2", target, "chat").setFullscreen(true); + expect(sessions.isTabFullscreen(workspace, "tab-1")).toBe(false); + expect(sessions.isTabFullscreen(workspace, null)).toBe(false); + chat.setFullscreen(true); + expect(sessions.isTabFullscreen(workspace, "tab-1")).toBe(true); + chat.setFullscreen(false); + expect(notifications).toEqual([false, true, false]); + }); + + it("drops sessions for closed tabs and keeps retained ones", () => { + const sessions = new ComposerEditingSessions(); + const kept = sessions.get(workspace, "tab-1", target, "chat"); + kept.setFullscreen(true); + sessions.get(workspace, "tab-2", target, "chat").setFullscreen(true); + sessions.retain(workspace, ["tab-1"]); + expect(sessions.get(workspace, "tab-1", target, "chat")).toBe(kept); + expect(sessions.isTabFullscreen(workspace, "tab-2")).toBe(false); + expect(sessions.get(workspace, "tab-2", target, "chat").getFullscreen()).toBe(false); }); - - it.each(["New explicit draft", ""])( - "honors an explicit replacement made while the editor is absent: %j", - (text) => { - const session = new ComposerEditingSession(); - leaveLiveDraft(session); - const handoff = session.takeHandoff({ kind: "replace", key: "draft:new", text }); - expect(handoff?.snapshot).toEqual({ - text, - selection: { start: text.length, end: text.length }, - }); - expect(handoff?.focused).toBe(true); - expect(session.takeHandoff({ kind: "replace", key: "draft:new", text })).toBeNull(); - }, - ); }); diff --git a/packages/app/src/composer/editing-session/index.tsx b/packages/app/src/composer/editing-session/index.tsx index 97f7a79c51..6ad84d632d 100644 --- a/packages/app/src/composer/editing-session/index.tsx +++ b/packages/app/src/composer/editing-session/index.tsx @@ -1,5 +1,6 @@ import React, { createContext, + useCallback, useContext, useEffect, useMemo, @@ -7,62 +8,72 @@ import React, { useSyncExternalStore, type ReactNode, } from "react"; -import type { TextReplacement } from "@/composer/types"; import type { ComposerInputMode } from "@/composer/input-mode"; -export interface ComposerEditingHandoff { - snapshot: { text: string; selection: { start: number; end: number } }; - focused: boolean; - replacementKey: string; +export interface ComposerSelection { + start: number; + end: number; } -/** Editing metadata outlives a layout's input; draft text still belongs to its draft owner. */ +/** What an unmounting editor leaves for the next mount of the same session. */ +export interface ComposerRetainedEditor { + selection: ComposerSelection; + /** The editor was focused, or meant to regain focus once its pane became active. */ + focused: boolean; +} + +/** + * Editing state that outlives the editor's mount. Draft text belongs to its draft + * owner; the editor keeps its own live buffer across layout modes. Switching between + * the compact and desktop screens remounts the editor, so the session carries the + * caret and focus intent across that remount while the draft owner carries the text. + */ export class ComposerEditingSession { private fullscreen = false; - private handoff: ComposerEditingHandoff | null = null; + private retained: ComposerRetainedEditor | null = null; private listeners = new Set<() => void>(); + constructor(private readonly onChange?: () => void) {} getFullscreen = () => this.fullscreen; + /** Called by the unmounting editor; the next mount of this session takes it. */ + retainEditor(retained: ComposerRetainedEditor) { + this.retained = retained; + } + takeEditor(): ComposerRetainedEditor | null { + const retained = this.retained; + this.retained = null; + return retained; + } subscribe = (listener: () => void) => { this.listeners.add(listener); return () => { this.listeners.delete(listener); }; }; - changePresentation(fullscreen: boolean, handoff: ComposerEditingHandoff) { - this.captureForRemount(handoff); + setFullscreen(fullscreen: boolean) { if (fullscreen === this.fullscreen) return; this.fullscreen = fullscreen; for (const listener of this.listeners) listener(); - } - captureForRemount(handoff: ComposerEditingHandoff) { - this.handoff = handoff; - } - peekHandoff(replacement: TextReplacement): ComposerEditingHandoff | null { - const handoff = this.handoff; - if (!handoff || replacement.kind === "initial" || replacement.key === handoff.replacementKey) - return handoff; - // A replacement command issued since capture supersedes the old editor's live buffer. - return { - snapshot: { - text: replacement.text, - selection: { start: replacement.text.length, end: replacement.text.length }, - }, - focused: handoff.focused, - replacementKey: replacement.key, - }; - } - takeHandoff(replacement: TextReplacement) { - const handoff = this.peekHandoff(replacement); - this.handoff = null; - return handoff; + this.onChange?.(); } } -class ComposerEditingSessions { - private workspaces = new Map< - string, - Map }> - >(); +interface TabSessions { + targetKey: string; + sessions: Map; +} + +export class ComposerEditingSessions { + private workspaces = new Map>(); + private listeners = new Set<() => void>(); + private notify = () => { + for (const listener of this.listeners) listener(); + }; + subscribe = (listener: () => void) => { + this.listeners.add(listener); + return () => { + this.listeners.delete(listener); + }; + }; get(workspaceKey: string, tabId: string, targetKey: string, purpose: ComposerInputMode) { let workspace = this.workspaces.get(workspaceKey); if (!workspace) { @@ -76,17 +87,31 @@ class ComposerEditingSessions { } let session = tab.sessions.get(purpose); if (!session) { - session = new ComposerEditingSession(); + session = new ComposerEditingSession(this.notify); tab.sessions.set(purpose, session); } return session; } + /** A tab is fullscreen when any of its composers is; the screen hides its chrome for it. */ + isTabFullscreen(workspaceKey: string, tabId: string | null): boolean { + if (tabId === null) return false; + const tab = this.workspaces.get(workspaceKey)?.get(tabId); + if (!tab) return false; + for (const session of tab.sessions.values()) if (session.getFullscreen()) return true; + return false; + } retain(workspaceKey: string, tabIds: readonly string[]) { const workspace = this.workspaces.get(workspaceKey); if (!workspace) return; const retained = new Set(tabIds); - for (const tabId of workspace.keys()) if (!retained.has(tabId)) workspace.delete(tabId); + let changed = false; + for (const tabId of workspace.keys()) { + if (retained.has(tabId)) continue; + workspace.delete(tabId); + changed = true; + } if (workspace.size === 0) this.workspaces.delete(workspaceKey); + if (changed) this.notify(); } } @@ -140,3 +165,16 @@ export function useComposerEditingSession( export function useComposerFullscreen(session: ComposerEditingSession): boolean { return useSyncExternalStore(session.subscribe, session.getFullscreen, session.getFullscreen); } +/** Whether the composer of a workspace tab is fullscreen, for the chrome that tab sits under. */ +export function useComposerTabFullscreen(workspaceKey: string, tabId: string | null): boolean { + const sessions = useContext(SessionsContext); + const subscribe = useCallback( + (listener: () => void) => sessions?.subscribe(listener) ?? (() => {}), + [sessions], + ); + const read = useCallback( + () => sessions?.isTabFullscreen(workspaceKey, tabId) ?? false, + [sessions, workspaceKey, tabId], + ); + return useSyncExternalStore(subscribe, read, read); +} diff --git a/packages/app/src/composer/index.tsx b/packages/app/src/composer/index.tsx index c77b39d332..10d670fcae 100644 --- a/packages/app/src/composer/index.tsx +++ b/packages/app/src/composer/index.tsx @@ -1,4 +1,8 @@ -import { useComposerEditingSession, useComposerFullscreen } from "./editing-session"; +import { + useComposerEditingSession, + useComposerFullscreen, + type ComposerEditingSession, +} from "./editing-session"; import type { ComposerTextSource } from "./text-source"; import { createStore, type StoreApi } from "zustand/vanilla"; import { useStore } from "zustand"; @@ -27,6 +31,7 @@ import { import { useTranslation } from "react-i18next"; import { StyleSheet, withUnistyles } from "react-native-unistyles"; import { useIsCompactFormFactor } from "@/constants/layout"; +import { usePanelStore } from "@/stores/panel-store"; import { useHasFinePointer } from "@/hooks/use-fine-pointer"; import { useShallow } from "zustand/shallow"; import { @@ -967,6 +972,12 @@ interface ComposerProps { submitLabel?: string; /** Overrides the mode's default placeholder, for text only the caller can build. */ placeholder?: string; + /** + * The host that also lays out the dock and chrome shares this session so its + * fullscreen state and the composer's agree. Defaults to the tab's session for + * `inputMode`. + */ + editingSession?: ComposerEditingSession; } const EMPTY_ARRAY: readonly QueuedMessage[] = []; @@ -1182,8 +1193,19 @@ function ComposerVoiceModeButton({ } export function Composer({ isPaneFocused, ...props }: ComposerProps) { + // A compact overlay panel (agent list, explorer) covers the pane without taking its + // focus. The composer gives up input from the moment the user asks for the panel, + // not when its motion settles, so the exit action and autocomplete never race it. + // Pane focus stays put, so the keyboard the panel dismisses is a blur in the + // user's own pane: closing the panel does not bring focus back. + const isCompact = useIsCompactFormFactor(); + const overlayPanelRequested = usePanelStore((state) => state.mobilePanel.target !== "agent"); + const coveredByOverlayPanel = isCompact && overlayPanelRequested; return ( - + @@ -1234,6 +1256,7 @@ function ComposerContentImpl({ inputWrapperStyle, isCompactLayout: isCompactLayoutOverride, inputMode = "chat", + editingSession: providedEditingSession, readOnly = false, submitLabel, placeholder, @@ -1339,7 +1362,7 @@ function ComposerContentImpl({ const nextPendingFileId = useRef(0); const isUploadingFile = pendingFiles.length > 0; const [pendingNativeImagePastes, setPendingNativeImagePastes] = useState(0); - const editingSession = useComposerEditingSession(inputMode); + const editingSession = useComposerEditingSession(inputMode, providedEditingSession); const isFullscreen = useComposerFullscreen(editingSession); const [sendError, setSendError] = useState(null); const [isMessageInputFocused, setIsMessageInputFocused] = useState(false); @@ -2250,9 +2273,23 @@ function ComposerContentImpl({ [githubSearchItems, selectedAttachments, handleToggleGithubItem], ); + // Fullscreen fills the dock slot: the chain down to the input stretches and drops + // the inline padding, which the fullscreen presentation supplies itself. const inputAreaContainerStyle = useMemo( - () => [styles.inputAreaContainer, isComposerLocked && styles.inputAreaLocked], - [isComposerLocked], + () => [ + styles.inputAreaContainer, + isComposerLocked && styles.inputAreaLocked, + isFullscreen && styles.inputAreaFullscreen, + ], + [isComposerLocked, isFullscreen], + ); + const inputAreaContentStyle = useMemo( + () => [styles.inputAreaContent, isFullscreen && styles.fullscreenFill], + [isFullscreen], + ); + const messageInputContainerStyle = useMemo( + () => [styles.messageInputContainer, isFullscreen && styles.fullscreenFill], + [isFullscreen], ); const attachmentTray = useMemo( @@ -2363,15 +2400,19 @@ function ComposerContentImpl({ focusMessageInputForKeyboardAction={focusMessageInputForKeyboardAction} isMessageInputFocused={isMessageInputFocused} /> - + {/* Input area */} - - {queueList} + + {isFullscreen ? null : queueList} {!isFullscreen && sendErrorNode} - + ({ @@ -2496,6 +2543,18 @@ const styles = StyleSheet.create((theme: Theme) => ({ inputAreaLocked: { opacity: 0.6, }, + inputAreaFullscreen: { + flex: 1, + minHeight: 0, + alignItems: "stretch", + paddingHorizontal: 0, + paddingBottom: 0, + }, + fullscreenFill: { + flex: 1, + minHeight: 0, + maxWidth: "100%", + }, inputAreaContent: { flexShrink: 1, width: "100%", diff --git a/packages/app/src/composer/input/fullscreen-exit.native.ts b/packages/app/src/composer/input/fullscreen-exit.native.ts new file mode 100644 index 0000000000..c2344d50b0 --- /dev/null +++ b/packages/app/src/composer/input/fullscreen-exit.native.ts @@ -0,0 +1,18 @@ +import { useEffect } from "react"; +import { BackHandler } from "react-native"; + +/** The hardware back button leaves fullscreen instead of the screen. */ +export function useComposerFullscreenExit( + active: boolean, + onExit: () => void, +): ((node: unknown) => void) | undefined { + useEffect(() => { + if (!active) return; + const subscription = BackHandler.addEventListener("hardwareBackPress", () => { + onExit(); + return true; + }); + return () => subscription.remove(); + }, [active, onExit]); + return undefined; +} diff --git a/packages/app/src/composer/input/fullscreen-exit.ts b/packages/app/src/composer/input/fullscreen-exit.ts new file mode 100644 index 0000000000..b76eeed5fc --- /dev/null +++ b/packages/app/src/composer/input/fullscreen-exit.ts @@ -0,0 +1,23 @@ +import { useOverlayLayer, useWebOverlayRegistration } from "@/lib/overlay-root"; + +/** + * Escape leaves fullscreen before app shortcuts see it. The registration only claims + * keys; focus stays where the user left it because the editor never remounts. + */ +export function useComposerFullscreenExit( + active: boolean, + onExit: () => void, +): ((node: unknown) => void) | undefined { + const layer = useOverlayLayer("modal"); + return useWebOverlayRegistration({ + active, + layer, + manageFocus: false, + onKeyDown: (event) => { + if (event.key !== "Escape") return false; + event.preventDefault(); + onExit(); + return true; + }, + }); +} diff --git a/packages/app/src/composer/input/fullscreen-host.native.tsx b/packages/app/src/composer/input/fullscreen-host.native.tsx deleted file mode 100644 index 22ce0052bf..0000000000 --- a/packages/app/src/composer/input/fullscreen-host.native.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import { useEffect, type ReactNode } from "react"; -import { Portal } from "@gorhom/portal"; -import { BackHandler, View, useWindowDimensions } from "react-native"; -import { useSafeAreaInsets } from "react-native-safe-area-context"; -import { StyleSheet } from "react-native-unistyles"; -import Animated, { useAnimatedStyle } from "react-native-reanimated"; -import { DEFAULT_FLOATING_PANEL_PORTAL_HOST } from "@/components/ui/floating-panel-portal"; -import { useKeyboardShift } from "@/keyboard/shift"; - -/** Same-window host keeps the IME attached while escaping the dock's clipping. */ -export function ComposerFullscreenHost({ - children, - onExit, - active, -}: { - children: ReactNode; - onExit: () => void; - active: boolean; -}) { - useEffect(() => { - if (!active) return; - const handler = BackHandler.addEventListener("hardwareBackPress", () => { - onExit(); - return true; - }); - return () => handler.remove(); - }, [active, onExit]); - const insets = useSafeAreaInsets(); - const { height } = useWindowDimensions(); - const { layoutShift } = useKeyboardShift(); - const frame = useAnimatedStyle(() => ({ - height: Math.max(0, height - layoutShift.value), - paddingTop: insets.top, - paddingBottom: insets.bottom, - paddingLeft: insets.left, - paddingRight: insets.right, - })); - return ( - - - {children} - - - ); -} - -const styles = StyleSheet.create((theme) => ({ - hidden: { display: "none" }, - background: { - position: "absolute", - top: 0, - bottom: 0, - left: 0, - right: 0, - backgroundColor: theme.colors.surface1, - }, -})); diff --git a/packages/app/src/composer/input/fullscreen-host.tsx b/packages/app/src/composer/input/fullscreen-host.tsx deleted file mode 100644 index ba634b268d..0000000000 --- a/packages/app/src/composer/input/fullscreen-host.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import { useMemo, useLayoutEffect, useState, type ReactNode } from "react"; -import { createPortal } from "react-dom"; -import { View } from "react-native"; -import { - getOverlayRoot, - useOverlayLayer, - OverlayLayerProvider, - useWebOverlayRegistration, -} from "@/lib/overlay-root"; - -export function ComposerFullscreenHost({ - children, - onExit, - active, -}: { - children: ReactNode; - onExit: () => void; - active: boolean; -}) { - const layer = useOverlayLayer("modal"); - const registration = useWebOverlayRegistration({ - active, - layer, - onKeyDown: (event) => { - if (event.key !== "Escape") return false; - event.preventDefault(); - onExit(); - return true; - }, - }); - const [viewport, setViewport] = useState(readVisibleViewport); - useLayoutEffect(() => { - if (!active) return; - const update = () => setViewport(readVisibleViewport()); - const visualViewport = window.visualViewport; - update(); - visualViewport?.addEventListener("resize", update); - visualViewport?.addEventListener("scroll", update); - window.addEventListener("resize", update); - return () => { - visualViewport?.removeEventListener("resize", update); - visualViewport?.removeEventListener("scroll", update); - window.removeEventListener("resize", update); - }; - }, [active]); - const frameStyle = useMemo( - () => ({ - display: active ? ("flex" as const) : ("none" as const), - position: "absolute" as const, - top: viewport.top, - left: viewport.left, - width: viewport.width, - zIndex: layer, - pointerEvents: "auto" as const, - height: viewport.height, - }), - [active, layer, viewport], - ); - return createPortal( - - - {children} - - , - getOverlayRoot(), - ); -} - -function readVisibleViewport() { - const viewport = window.visualViewport; - return { - top: viewport?.offsetTop ?? 0, - left: viewport?.offsetLeft ?? 0, - width: viewport?.width ?? window.innerWidth, - height: viewport?.height ?? window.innerHeight, - }; -} diff --git a/packages/app/src/composer/input/input.tsx b/packages/app/src/composer/input/input.tsx index a0476ff7a7..7346095d5b 100644 --- a/packages/app/src/composer/input/input.tsx +++ b/packages/app/src/composer/input/input.tsx @@ -84,6 +84,7 @@ import { computeCanStartDictation, resolveComposerSurfacePresentation, resolveComposerSurfaceText, + resolveRetainedSelection, runAlternateSendAction, runDefaultSendAction, runMessageInputKeyboardAction, @@ -523,8 +524,8 @@ function MessageInputAutoFocus({ autoFocusKey: string | undefined; textInputRef: React.MutableRefObject; }) { - const { isActiveComposer } = useComposerKeyboardScope(); - useAutoFocusOnWebEffect(textInputRef, enabled && isActiveComposer, autoFocusKey); + const { isPaneFocused } = useComposerKeyboardScope(); + useAutoFocusOnWebEffect(textInputRef, enabled && isPaneFocused, autoFocusKey); return null; } @@ -676,13 +677,7 @@ function ComposerTextSurface(props: ComposerTextSurfaceProps): React.ReactElemen ); } return ( - + {!isWeb && props.compact && !props.fullscreen ? ( void; onMinimizeHeight: () => void; preserveHeightOnSubmit: boolean; + exitFullscreen: () => void; } function sendMessageImpl(ctx: SendMessageContext): void { @@ -959,6 +955,7 @@ function sendMessageImpl(ctx: SendMessageContext): void { ) { return; } + ctx.exitFullscreen(); ctx.onSubmit({ text: trimmed, attachments: ctx.attachments, @@ -979,12 +976,14 @@ interface QueueMessageContext { onQueue: ((payload: MessagePayload) => void) | undefined; replaceText: (text: string) => void; onMinimizeHeight: () => void; + exitFullscreen: () => void; } function queueMessageImpl(ctx: QueueMessageContext): void { if (!ctx.onQueue) return; const trimmed = ctx.value.trim(); if (!trimmed && ctx.attachments.length === 0) return; + ctx.exitFullscreen(); ctx.onQueue({ text: trimmed, attachments: ctx.attachments, cwd: ctx.cwd }); ctx.replaceText(""); ctx.onMinimizeHeight(); @@ -1040,11 +1039,8 @@ function getComposerInputSnapshot( current: ComposerTextInputHandle | null, fallbackText: string, fallbackSelection: ComposerInputSnapshot["selection"], - mountedTextArea?: TextAreaHandle | null, ): ComposerInputSnapshot { - // The inner DOM ref can detach before the outer editing handle. Keep the mounted - // element available until this owner's ref callback captures the remount handoff. - const textArea = mountedTextArea ?? getWebTextAreaImpl(current); + const textArea = getWebTextAreaImpl(current); const text = textArea?.value ?? current?.getText() ?? fallbackText; const start = textArea?.selectionStart ?? fallbackSelection.start; const end = textArea?.selectionEnd ?? fallbackSelection.end; @@ -1244,7 +1240,7 @@ export const MessageInput = forwardRef( textReplacement, submitLabel, } = resolveMessageInputProps(props); - const { isActiveComposer } = useComposerKeyboardScope(); + const { isPaneFocused } = useComposerKeyboardScope(); const mode = resolveComposerInputMode(inputMode); const { t } = useTranslation(); const isCompact = useIsCompactFormFactor(); @@ -1269,18 +1265,13 @@ export const MessageInput = forwardRef( const inputWrapperRef = useRef(null); const textInputRef = useRef(null); const isInputFocusedRef = useRef(false); - const handoff = editingSession.peekHandoff(textReplacement); - const focusIntentRef = useRef(Boolean(handoff?.focused)); - const valueRef = useRef(handoff?.snapshot.text ?? value); - const selectionRef = useRef( - handoff?.snapshot.selection ?? { start: value.length, end: value.length }, - ); - const activeComposerRef = useRef(isActiveComposer); - activeComposerRef.current = isActiveComposer; + const focusIntentRef = useRef(false); + const valueRef = useRef(value); + const selectionRef = useRef({ start: value.length, end: value.length }); + const paneFocusedRef = useRef(isPaneFocused); + paneFocusedRef.current = isPaneFocused; const [webTextArea, setWebTextArea] = useState(null); const appliedTextReplacementKeyRef = useRef(textReplacement.key); - const textReplacementRef = useRef(textReplacement); - textReplacementRef.current = textReplacement; const webTextareaRef = useRef(null); const updateLiveTextPresence = useCallback((text: string) => { const nextHasLiveText = text.trim().length > 0; @@ -1289,43 +1280,53 @@ export const MessageInput = forwardRef( setHasLiveText(nextHasLiveText); }, []); - const assignTextInput = useCallback( - (input: ComposerTextInputHandle | null) => { - const previous = textInputRef.current; - if (!input && previous) { - editingSession.captureForRemount({ - snapshot: getComposerInputSnapshot( - previous, - valueRef.current, - selectionRef.current, - webTextareaRef.current, - ), - focused: previous.isFocused() || isInputFocusedRef.current, - replacementKey: appliedTextReplacementKeyRef.current, - }); - } - textInputRef.current = input; - if (isWeb) { - const element = getWebTextAreaImpl(input) as HTMLElement | null; - webTextareaRef.current = element; - setWebTextArea(element); - } - if (!input) return; - const transfer = editingSession.takeHandoff(textReplacementRef.current); - if (transfer) { - appliedTextReplacementKeyRef.current = textReplacementRef.current.key; - valueRef.current = transfer.snapshot.text; - updateLiveTextPresence(transfer.snapshot.text); - selectionRef.current = transfer.snapshot.selection; - input.replaceText(transfer.snapshot.text, transfer.snapshot.selection); - if (transfer.focused && activeComposerRef.current) input.focus(); - } - }, - [editingSession, updateLiveTextPresence], - ); + // One editor stays mounted through every layout mode, so this ref only follows + // the editor's own mount and unmount. + const assignTextInput = useCallback((input: ComposerTextInputHandle | null) => { + textInputRef.current = input; + if (!isWeb) return; + const element = getWebTextAreaImpl(input) as HTMLElement | null; + webTextareaRef.current = element; + setWebTextArea(element); + }, []); + // Focus intent outlives a blur only while the pane is not the user's pane (a retained + // tab hidden, a sheet over it); the pane coming back restores focus. A blur while the + // pane is theirs drops it, whatever the layout mode: the user dismissed the keyboard, + // or a compact overlay panel did on their behalf, and nothing later refocuses. useLayoutEffect(() => { - if (isActiveComposer && focusIntentRef.current) textInputRef.current?.focus(); - }, [isActiveComposer]); + if (isPaneFocused && focusIntentRef.current) textInputRef.current?.focus(); + }, [isPaneFocused]); + // The compact and desktop screens mount the editor in different trees, so a + // viewport that crosses the breakpoint remounts it. The draft owner brings the + // text back; the session brings the caret and focus intent back. On web the + // owner may still hold an unpublished edit while the new editor mounts, so the + // caret is placed now against the text on screen and again when the owner's + // hydrated text arrives. + const retainedSelectionRef = useRef<{ start: number; end: number } | null>(null); + useLayoutEffect(() => { + const retained = editingSession.takeEditor(); + if (retained) { + const text = textInputRef.current?.getText() ?? valueRef.current; + const selection = resolveRetainedSelection(retained.selection, text.length); + retainedSelectionRef.current = retained.selection; + selectionRef.current = selection; + textInputRef.current?.setSelection(selection); + if (retained.focused) { + focusIntentRef.current = true; + if (paneFocusedRef.current) textInputRef.current?.focus(); + } + } + return () => { + editingSession.retainEditor({ + selection: getComposerInputSnapshot( + textInputRef.current, + valueRef.current, + selectionRef.current, + ).selection, + focused: isInputFocusedRef.current || focusIntentRef.current, + }); + }; + }, [editingSession]); const getLiveText = useCallback(() => valueRef.current, []); const composerHeight = useComposerHeight({ getText: getLiveText, @@ -1340,29 +1341,15 @@ export const MessageInput = forwardRef( const updateComposerHeightForText = measuredComposerHeight?.onTextChange; const resetComposerHeight = measuredComposerHeight?.reset; - const changePresentation = useCallback( - (fullscreen: boolean) => { - if (editingSession.getFullscreen() === fullscreen) return; - const snapshot = getComposerInputSnapshot( - textInputRef.current, - valueRef.current, - selectionRef.current, - ); - editingSession.changePresentation(fullscreen, { - snapshot, - focused: textInputRef.current?.isFocused() ?? isInputFocusedRef.current, - replacementKey: appliedTextReplacementKeyRef.current, - }); - valueRef.current = snapshot.text; - selectionRef.current = snapshot.selection; - }, - [editingSession], - ); - const exitFullscreen = useCallback(() => changePresentation(false), [changePresentation]); + const exitFullscreen = useCallback(() => editingSession.setFullscreen(false), [editingSession]); + const enterFullscreen = useCallback(() => editingSession.setFullscreen(true), [editingSession]); + // The conversation sizes itself against the inline composer; fullscreen covers it. const handleComposerLayout = useCallback( - (event: LayoutChangeEvent) => onHeightChange?.(event.nativeEvent.layout.height), - [onHeightChange], + (event: LayoutChangeEvent) => { + if (!isFullscreen) onHeightChange?.(event.nativeEvent.layout.height); + }, + [isFullscreen, onHeightChange], ); const replaceText = useCallback( @@ -1427,8 +1414,15 @@ export const MessageInput = forwardRef( updateComposerHeightForText?.(valueRef.current, textReplacement.text); valueRef.current = textReplacement.text; updateLiveTextPresence(textReplacement.text); + const retainedSelection = + textReplacement.kind === "hydrated" ? retainedSelectionRef.current : null; + retainedSelectionRef.current = null; if (textReplacement.text === "") { textInputRef.current?.reset(); + } else if (retainedSelection) { + const selection = resolveRetainedSelection(retainedSelection, textReplacement.text.length); + selectionRef.current = selection; + textInputRef.current?.replaceText(textReplacement.text, selection); } else { textInputRef.current?.replaceText(textReplacement.text); } @@ -1650,6 +1644,7 @@ export const MessageInput = forwardRef( onSubmit, onMinimizeHeight: minimizeInputHeight, preserveHeightOnSubmit, + exitFullscreen, }); }, [ allowEmptySubmit, @@ -1661,6 +1656,7 @@ export const MessageInput = forwardRef( minimizeInputHeight, preserveHeightOnSubmit, updateLiveTextPresence, + exitFullscreen, ]); const handleQueueMessage = useCallback( @@ -1672,8 +1668,9 @@ export const MessageInput = forwardRef( onQueue, replaceText, onMinimizeHeight: minimizeInputHeight, + exitFullscreen, }), - [attachments, cwd, onQueue, replaceText, minimizeInputHeight], + [attachments, cwd, onQueue, replaceText, minimizeInputHeight, exitFullscreen], ); const handleDefaultSendAction = useCallback(() => { @@ -1696,17 +1693,6 @@ export const MessageInput = forwardRef( }); }, [defaultSendBehavior, isAgentRunning, handleSendMessage, handleQueueMessage, onQueue]); - const getWebTextArea = useCallback( - (): TextAreaHandle | null => getWebTextAreaImpl(textInputRef.current), - [], - ); - - useLayoutEffect(() => { - if (isWeb) { - webTextareaRef.current = getWebTextArea() as HTMLElement | null; - } - }, [getWebTextArea, isFullscreen]); - usePasteImagesEffect({ textarea: webTextArea, isConnected, @@ -1832,11 +1818,11 @@ export const MessageInput = forwardRef( }, [onFocusChange]); const handleInputBlur = useCallback(() => { - if (activeComposerRef.current && !isFullscreen) focusIntentRef.current = false; + if (paneFocusedRef.current) focusIntentRef.current = false; isInputFocusedRef.current = false; setIsInputFocused(false); onFocusChange?.(false); - }, [isFullscreen, onFocusChange]); + }, [onFocusChange]); const handlePasteError = useCallback( (message: string) => { @@ -1888,8 +1874,9 @@ export const MessageInput = forwardRef( styles.textInput, mode.isMonospace && styles.textInputMonospace, isFullscreen ? styles.fullscreenTextInput : composerHeightStyle, + isCompact && !isFullscreen && styles.compactTextInput, ], - [composerHeightStyle, mode.isMonospace, isFullscreen], + [composerHeightStyle, mode.isMonospace, isFullscreen, isCompact], ); // Static content has no textarea to mirror, so it grows with its own text // instead of the measured input height. @@ -1897,13 +1884,22 @@ export const MessageInput = forwardRef( () => [styles.textInput, mode.isMonospace && styles.textInputMonospace, styles.readOnlyText], [mode.isMonospace], ); + // Fullscreen always shows Send; without content it is disabled, and looks it. + const isPresentedSendDisabled = resolvePresentationSendDisabled({ + fullscreen: isFullscreen, + disabled: isSendButtonDisabled, + hasText: hasLiveText, + attachments, + hasExternalContent, + allowEmpty: allowEmptySubmit, + }); const sendButtonCombinedStyle = useMemo( () => [ styles.sendButton, submitLabel ? styles.sendButtonLabeled : undefined, - isSendButtonDisabled && styles.buttonDisabled, + isPresentedSendDisabled && styles.buttonDisabled, ], - [isSendButtonDisabled, submitLabel], + [isPresentedSendDisabled, submitLabel], ); const overlayContainerStyle = useMemo( () => [styles.overlayContainer, { opacity: surfacePresentation.overlay.opacity }], @@ -1942,14 +1938,7 @@ export const MessageInput = forwardRef( canPressLoadingButton={canPressLoadingButton} onSubmitLoadingPress={onSubmitLoadingPress} onDefaultSendAction={handleDefaultSendAction} - isSendButtonDisabled={resolvePresentationSendDisabled({ - fullscreen: isFullscreen, - disabled: isSendButtonDisabled, - hasText: hasLiveText, - attachments, - hasExternalContent, - allowEmpty: allowEmptySubmit, - })} + isSendButtonDisabled={isPresentedSendDisabled} submitAccessibilityLabel={submitAccessibilityLabel} sendButtonCombinedStyle={sendButtonCombinedStyle} isSubmitLoading={isSubmitLoading} @@ -1968,11 +1957,7 @@ export const MessageInput = forwardRef( canPressLoadingButton, onSubmitLoadingPress, handleDefaultSendAction, - isSendButtonDisabled, - hasLiveText, - attachments, - hasExternalContent, - allowEmptySubmit, + isPresentedSendDisabled, submitAccessibilityLabel, sendButtonCombinedStyle, isSubmitLoading, @@ -2008,9 +1993,7 @@ export const MessageInput = forwardRef( onBlur={handleInputBlur} editable={!isDictating && !isRealtimeVoiceForCurrentAgent && !disabled} scrollEnabled={isComposerScrollEnabled} - autoFocus={ - Boolean(editingSession.peekHandoff(textReplacement)?.focused) && isActiveComposer - } + autoFocus={false} onKeyPress={shouldHandleWebKeyPress ? handleDesktopKeyPress : undefined} onSelectionChange={handleSelectionChange} onPasteImages={onPasteImages} @@ -2029,8 +2012,6 @@ export const MessageInput = forwardRef( [ readOnly, textReplacement, - editingSession, - isActiveComposer, assignTextInput, textInputStyle, readOnlyTextStyle, @@ -2162,11 +2143,10 @@ export const MessageInput = forwardRef( handleRealtimeVoiceStop, ], ); - const enterFullscreen = useCallback(() => changePresentation(true), [changePresentation]); return ( @@ -2177,8 +2157,7 @@ export const MessageInput = forwardRef( /> ({ flexShrink: 1, position: "relative", }, + fullscreenContainer: { + flex: 1, + position: "relative", + }, inputWrapper: { flexShrink: 1, flexDirection: "column", @@ -2241,14 +2224,18 @@ const styles = StyleSheet.create((theme: Theme) => ({ inputWrapperReadOnly: { borderStyle: "dotted", }, - compactTextSurface: { paddingRight: 36 }, + // The band the fullscreen glyph sits in is the input's own padding, so a tap + // anywhere in it (under the glyph, or where the glyph would be) is a tap on the + // editor: it focuses, shows the keyboard, and places the caret. Reserved whether + // or not the glyph shows, so text never reflows when it appears. + compactTextInput: { paddingRight: 36 }, fullscreenTextSurface: { flex: 1, minHeight: 0 }, fullscreenTextInput: { flex: 1, height: "100%", textAlignVertical: "top" }, lineMeasurement: { position: "absolute", top: 0, left: 0, - right: 36, + right: 0, opacity: 0, maxHeight: undefined, minHeight: undefined, diff --git a/packages/app/src/composer/input/presentation.tsx b/packages/app/src/composer/input/presentation.tsx index d02821696a..64697999f5 100644 --- a/packages/app/src/composer/input/presentation.tsx +++ b/packages/app/src/composer/input/presentation.tsx @@ -3,19 +3,31 @@ import { View, type ViewProps } from "react-native"; import { Maximize2, Minimize2 } from "lucide-react-native"; import { useTranslation } from "react-i18next"; import { Button } from "@/components/ui/button"; +import { ComposerFullscreenBody, ComposerFullscreenFooter } from "@/composer/dock"; +import { useComposerKeyboardScope } from "@/composer/keyboard-scope"; import { isWeb } from "@/constants/platform"; +import { ICON_SIZE } from "@/styles/theme"; import { StyleSheet } from "react-native-unistyles"; -import { ComposerFullscreenHost } from "./fullscreen-host"; +import { useComposerFullscreenExit } from "./fullscreen-exit"; +import { resolveGlyphRailOffset } from "./state"; + +const CONTROL_SIZE = 28; +const FULLSCREEN_GLYPH_SIZE = ICON_SIZE.md; function keepEditorFocused(event: import("react-native").PointerEvent) { if (isWeb) event.preventDefault(); } -/** Both presentations receive the same editing surface and send capability. */ +/** + * One tree for both layout modes. The editing surface keeps its position so the + * mounted editor, its native buffer, selection, and focus survive every toggle; + * only the chrome around it changes. Fullscreen shows exit top right and Send + * bottom right, both on the rail the inline Send button uses; a send error sits + * in the same footer as Send. + */ export function ComposerInputPresentation({ fullscreen, - iconSize, - active, + sendIconSize, surface, toolbar, send, @@ -30,8 +42,7 @@ export function ComposerInputPresentation({ overlay, }: { fullscreen: boolean; - iconSize: number; - active: boolean; + sendIconSize: number; surface: ReactNode; toolbar: ReactNode; send: ReactNode; @@ -46,55 +57,33 @@ export function ComposerInputPresentation({ overlay: ReactNode; }) { const { t } = useTranslation(); - // ArrowUp ends at x19; the fullscreen glyphs end at x21 in Lucide's 24px viewBox. - // Compensate for that difference to align visible ink with Send, not just boxes. - const railAdjustment = iconSize / 12; + // A retained tab keeps its fullscreen editor mounted while hidden; the global exit + // action (Escape, hardware back) belongs only to the pane the user is in. + const { isActiveComposer } = useComposerKeyboardScope(); + const exitScopeRef = useComposerFullscreenExit(fullscreen && isActiveComposer, onExit); + const railOffset = resolveGlyphRailOffset({ + controlSize: CONTROL_SIZE, + sendIconSize, + glyphIconSize: FULLSCREEN_GLYPH_SIZE, + }); const maximizeIcon = useCallback( - (color: string) => , - [iconSize], + (color: string) => , + [], ); const minimizeIcon = useCallback( - (color: string) => , - [iconSize], + (color: string) => , + [], ); - const enterStyle = useMemo( - () => [styles.fullscreenButton, { right: -6 + railAdjustment }], - [railAdjustment], - ); - const exitStyle = useMemo( - () => [styles.iconButton, { marginRight: railAdjustment }], - [railAdjustment], - ); - if (!fullscreen) - return ( - <> - - {attachmentSlot} - - {surface} - {showFullscreenButton ? ( - - ) : null} - - {toolbar} - - {overlay} - - ); + // The toolbar row bleeds 6px past the input padding; the inline glyph sits on that edge. + const enterStyle = useMemo(() => [styles.enterButton, { right: -6 + railOffset }], [railOffset]); + const exitStyle = useMemo(() => [styles.iconButton, { marginRight: railOffset }], [railOffset]); return ( - - + + {fullscreen ? ( + ) : null} + + {fullscreen ? null : toolbar} + + + {fullscreen ? ( + + {error} + {send} + + ) : null} + {overlay} + ); } const styles = StyleSheet.create((theme) => ({ + inline: { flexShrink: 1, position: "relative" }, inlineTextSurface: { flexShrink: 1, position: "relative" }, iconButton: { - width: 28, - height: 28, + width: CONTROL_SIZE, + height: CONTROL_SIZE, padding: 0, borderWidth: 0, borderRadius: theme.borderRadius.full, }, - fullscreenButton: { + enterButton: { position: "absolute", top: 0, - width: 28, - height: 28, + width: CONTROL_SIZE, + height: CONTROL_SIZE, padding: 0, borderWidth: 0, borderRadius: theme.borderRadius.full, @@ -141,6 +162,10 @@ const styles = StyleSheet.create((theme) => ({ padding: theme.spacing[4], gap: theme.spacing[3], }, + fullscreenInputWrapper: { flex: 1, minHeight: 0 }, + fullscreenTextSurface: { flex: 1, minHeight: 0 }, exitRow: { alignItems: "flex-end", flexShrink: 0 }, - sendRow: { flexShrink: 0, alignItems: "flex-end" }, + // The send error rides the keyboard with Send; below the body it would sit behind it. + footer: { flexShrink: 0, gap: theme.spacing[3] }, + sendRow: { alignItems: "flex-end" }, })); diff --git a/packages/app/src/composer/input/state.test.ts b/packages/app/src/composer/input/state.test.ts index a7f4113b28..6f2cdef74d 100644 --- a/packages/app/src/composer/input/state.test.ts +++ b/packages/app/src/composer/input/state.test.ts @@ -5,6 +5,8 @@ import { resolveActiveSendBehavior, resolveComposerSurfacePresentation, resolveComposerSurfaceText, + resolveGlyphRailOffset, + resolveRetainedSelection, runAlternateSendAction, runDefaultSendAction, runMessageInputKeyboardAction, @@ -333,10 +335,30 @@ describe("composer surface text", () => { ); }); - it("uses the live handoff when its replacement has already been applied", () => { + it("keeps the live buffer when the initial publication is already applied", () => { const replacement = { kind: "initial" as const, key: "draft:0", text: "Stale publication" }; - expect(resolveComposerSurfaceText("Live remount handoff", replacement, "draft:0")).toBe( - "Live remount handoff", + expect(resolveComposerSurfaceText("Live edited draft", replacement, "draft:0")).toBe( + "Live edited draft", ); }); }); + +describe("retained selection", () => { + it("keeps a caret that fits and clamps one that no longer does", () => { + expect(resolveRetainedSelection({ start: 4, end: 17 }, 40)).toEqual({ start: 4, end: 17 }); + expect(resolveRetainedSelection({ start: 4, end: 17 }, 10)).toEqual({ start: 4, end: 10 }); + expect(resolveRetainedSelection({ start: 12, end: 17 }, 10)).toEqual({ start: 10, end: 10 }); + expect(resolveRetainedSelection({ start: -1, end: 3 }, 10)).toEqual({ start: 0, end: 3 }); + }); +}); + +describe("fullscreen glyph rail", () => { + it("nudges 16px fullscreen glyphs onto the Send arrow's ink edge", () => { + expect( + resolveGlyphRailOffset({ controlSize: 28, sendIconSize: 16, glyphIconSize: 16 }), + ).toBeCloseTo(4 / 3); + expect( + resolveGlyphRailOffset({ controlSize: 28, sendIconSize: 20, glyphIconSize: 16 }), + ).toBeCloseTo(1 / 6); + }); +}); diff --git a/packages/app/src/composer/input/state.ts b/packages/app/src/composer/input/state.ts index 3786613eb2..698965b5ac 100644 --- a/packages/app/src/composer/input/state.ts +++ b/packages/app/src/composer/input/state.ts @@ -193,6 +193,24 @@ export async function stopRealtimeVoice(ctx: StopRealtimeVoiceContext): Promise< await ctx.voice.stopVoice(); } +/** + * Offset that aligns a glyph's visible ink with the Send arrow's ink when both sit in + * equal controls on the same right rail. In Lucide's 24px viewBox ArrowUp ends at + * x19 while Maximize2/Minimize2 end at x21, so equal boxes leave the fullscreen + * glyphs visibly past the arrow. + */ +export function resolveGlyphRailOffset(input: { + controlSize: number; + sendIconSize: number; + glyphIconSize: number; +}): number { + const arrowInkInset = + (input.controlSize - input.sendIconSize) / 2 + (5 * input.sendIconSize) / 24; + const glyphInkInset = + (input.controlSize - input.glyphIconSize) / 2 + (3 * input.glyphIconSize) / 24; + return arrowInkInset - glyphInkInset; +} + export function resolveComposerSurfaceText( liveText: string, replacement: TextReplacement, @@ -200,3 +218,13 @@ export function resolveComposerSurfaceText( ): string { return replacement.key === appliedReplacementKey ? liveText : replacement.text; } + +/** A retained caret must fit the text the remounted editor shows. */ +export function resolveRetainedSelection( + retained: { start: number; end: number }, + textLength: number, +): { start: number; end: number } { + const end = Math.min(Math.max(retained.end, 0), textLength); + const start = Math.min(Math.max(retained.start, 0), end); + return { start, end }; +} diff --git a/packages/app/src/composer/keyboard-scope.tsx b/packages/app/src/composer/keyboard-scope.tsx index b254c53a51..20b57dde28 100644 --- a/packages/app/src/composer/keyboard-scope.tsx +++ b/packages/app/src/composer/keyboard-scope.tsx @@ -7,18 +7,35 @@ import { } from "react"; interface ComposerKeyboardScopeValue { + /** + * The pane this composer sits in is the user's pane. Focus restoration follows it: + * the editor keeps its focus intent across blurs that happen while the pane is not + * the user's (a retained tab hidden, a sheet over it) and brings focus back when + * the pane is theirs again. + */ + isPaneFocused: boolean; + /** + * The composer takes input right now: keyboard actions, shortcuts, autocomplete, + * and the fullscreen exit action. False while a compact overlay panel covers the + * pane, which does not take pane focus. + */ isActiveComposer: boolean; } const ComposerKeyboardScopeContext = createContext({ + isPaneFocused: false, isActiveComposer: false, }); export function ComposerKeyboardScopeProvider({ + isPaneFocused, isActiveComposer, children, }: PropsWithChildren): ReactElement { - const value = useMemo(() => ({ isActiveComposer }), [isActiveComposer]); + const value = useMemo( + () => ({ isPaneFocused, isActiveComposer }), + [isPaneFocused, isActiveComposer], + ); return ( {children} diff --git a/packages/app/src/composer/tracks-panel.browser.test.tsx b/packages/app/src/composer/tracks-panel.browser.test.tsx index 0b74c7e1da..9ebc92ed20 100644 --- a/packages/app/src/composer/tracks-panel.browser.test.tsx +++ b/packages/app/src/composer/tracks-panel.browser.test.tsx @@ -1,7 +1,8 @@ -import React, { act, type ReactNode } from "react"; +import React, { act, useCallback, useState, type ReactNode } from "react"; import { createRoot, type Root } from "react-dom/client"; import { Pressable, Text } from "react-native"; import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; +import { RetainedPanelActivity } from "@/components/retained-panel"; import { ComposerTrackPill, ComposerTrackRow, type ComposerTrackPillSegment } from "./tracks"; const SUBAGENT_SEGMENTS: ComposerTrackPillSegment[] = [{ bucket: null, text: "3 subagents" }]; @@ -109,6 +110,43 @@ describe("composer track panel", () => { expect(row("row")).not.toBeNull(); }); + it("closes for good when the panel it belongs to leaves the screen", () => { + const onPress = vi.fn(); + function Harness() { + const [active, setActive] = useState(true); + const hide = useCallback(() => setActive(false), []); + const show = useCallback(() => setActive(true), []); + return ( + <> + + + + + + Subagent one + + + + + ); + } + mount(); + + openPanel(); + expect(isPanelOpen()).toBe(true); + + click(row("hide") as Element); + click(row("show") as Element); + + expect(isPanelOpen()).toBe(false); + expect(row("row")).toBeNull(); + }); + it("leaves the panel alone when a row's own action button is pressed", () => { const onPress = vi.fn(); const onAction = vi.fn(); diff --git a/packages/app/src/composer/types.ts b/packages/app/src/composer/types.ts index ee01144ed7..cb46412de0 100644 --- a/packages/app/src/composer/types.ts +++ b/packages/app/src/composer/types.ts @@ -9,8 +9,12 @@ export interface MessagePayload { forceSend?: boolean; } +/** + * Text the draft owner hands the editor. `hydrated` is the owner's answer to a mount: + * the draft's text as persisted or still pending from the editor that unmounted. + */ export interface TextReplacement { - kind: "initial" | "replace"; + kind: "initial" | "hydrated" | "replace"; key: string; text: string; } diff --git a/packages/app/src/i18n/resources/ar.ts b/packages/app/src/i18n/resources/ar.ts index 5f00d8f70c..87cacb2f82 100644 --- a/packages/app/src/i18n/resources/ar.ts +++ b/packages/app/src/i18n/resources/ar.ts @@ -631,7 +631,7 @@ export const ar: TranslationResources = { }, switcher: { trigger: "تبديل علامات التبويب (فتح{{count}})", - title: "علامة التبويب التبديل", + title: "علامات تبويب الـ Workspace", searchPlaceholder: "علامات تبويب البحث", }, menu: { diff --git a/packages/app/src/i18n/resources/en.ts b/packages/app/src/i18n/resources/en.ts index 91e7e2c92f..f9779a6d55 100644 --- a/packages/app/src/i18n/resources/en.ts +++ b/packages/app/src/i18n/resources/en.ts @@ -628,7 +628,7 @@ export const en = { }, switcher: { trigger: "Switch tabs ({{count}} open)", - title: "Switch tab", + title: "Workspace tabs", searchPlaceholder: "Search tabs", }, menu: { diff --git a/packages/app/src/i18n/resources/es.ts b/packages/app/src/i18n/resources/es.ts index 6aff72fdd7..190b36d08d 100644 --- a/packages/app/src/i18n/resources/es.ts +++ b/packages/app/src/i18n/resources/es.ts @@ -637,7 +637,7 @@ export const es: TranslationResources = { }, switcher: { trigger: "Cambiar pestañas ({{count}}abierto)", - title: "Cambiar pestaña", + title: "Pestañas del workspace", searchPlaceholder: "Pestañas de búsqueda", }, menu: { diff --git a/packages/app/src/i18n/resources/fr.ts b/packages/app/src/i18n/resources/fr.ts index a4471f594c..6cfe15b1be 100644 --- a/packages/app/src/i18n/resources/fr.ts +++ b/packages/app/src/i18n/resources/fr.ts @@ -636,7 +636,7 @@ export const fr: TranslationResources = { }, switcher: { trigger: "Changer d’onglet ({{count}} ouverts)", - title: "Changer d’onglet", + title: "Onglets de l’espace de travail", searchPlaceholder: "Rechercher des onglets", }, menu: { diff --git a/packages/app/src/i18n/resources/ja.ts b/packages/app/src/i18n/resources/ja.ts index 9cbc630da2..cb37dde381 100644 --- a/packages/app/src/i18n/resources/ja.ts +++ b/packages/app/src/i18n/resources/ja.ts @@ -637,7 +637,7 @@ export const ja: TranslationResources = { }, switcher: { trigger: "タブを切り替え（{{count}}件開いています）", - title: "タブを切り替え", + title: "ワークスペースのタブ", searchPlaceholder: "タブを検索", }, menu: { diff --git a/packages/app/src/i18n/resources/ko.ts b/packages/app/src/i18n/resources/ko.ts index 98598d39dd..418490d395 100644 --- a/packages/app/src/i18n/resources/ko.ts +++ b/packages/app/src/i18n/resources/ko.ts @@ -632,7 +632,7 @@ export const ko: TranslationResources = { }, switcher: { trigger: "탭 전환 ({{count}}개 열림)", - title: "탭 전환", + title: "워크스페이스 탭", searchPlaceholder: "탭 검색", }, menu: { diff --git a/packages/app/src/i18n/resources/pt-BR.ts b/packages/app/src/i18n/resources/pt-BR.ts index c3ca4994d3..b2fe479b74 100644 --- a/packages/app/src/i18n/resources/pt-BR.ts +++ b/packages/app/src/i18n/resources/pt-BR.ts @@ -636,7 +636,7 @@ export const ptBR: TranslationResources = { }, switcher: { trigger: "Alternar abas ({{count}} abertas)", - title: "Alternar aba", + title: "Abas do workspace", searchPlaceholder: "Buscar abas", }, menu: { diff --git a/packages/app/src/i18n/resources/ru.ts b/packages/app/src/i18n/resources/ru.ts index 57616a22a7..086cd51c01 100644 --- a/packages/app/src/i18n/resources/ru.ts +++ b/packages/app/src/i18n/resources/ru.ts @@ -638,7 +638,7 @@ export const ru: TranslationResources = { }, switcher: { trigger: "Переключить вкладки (открыто: {{count}})", - title: "Переключить вкладку", + title: "Вкладки рабочего пространства", searchPlaceholder: "Поиск вкладок", }, menu: { diff --git a/packages/app/src/i18n/resources/zh-CN.ts b/packages/app/src/i18n/resources/zh-CN.ts index 99088e068a..16dc24b3a5 100644 --- a/packages/app/src/i18n/resources/zh-CN.ts +++ b/packages/app/src/i18n/resources/zh-CN.ts @@ -631,7 +631,7 @@ export const zhCN: TranslationResources = { }, switcher: { trigger: "切换标签（已打开 {{count}} 个）", - title: "切换标签", + title: "Workspace 标签", searchPlaceholder: "搜索标签", }, menu: { diff --git a/packages/app/src/panels/agent-facts-line.test.ts b/packages/app/src/panels/agent-facts-line.test.ts new file mode 100644 index 0000000000..182a5ff683 --- /dev/null +++ b/packages/app/src/panels/agent-facts-line.test.ts @@ -0,0 +1,86 @@ +import { describe, expect, it } from "vitest"; +import { buildAgentFactsLine, type AgentFactsInput } from "./agent-facts-line"; + +const models = [ + { + provider: "claude", + id: "claude-fable-5-1", + label: "Fable 5.1", + thinkingOptions: [ + { id: "medium", label: "Medium" }, + { id: "high", label: "High" }, + ], + }, +]; + +const modes = [ + { id: "default", label: "Default" }, + { id: "bypassPermissions", label: "Bypass permissions" }, +]; + +const base: AgentFactsInput = { + models, + runtimeModelId: "claude-fable-5-1", + configuredModelId: null, + runtimeThinkingOptionId: "high", + explicitThinkingOptionId: null, + availableModes: modes, + currentModeId: "bypassPermissions", + contextWindowUsedTokens: 56_200, + contextWindowMaxTokens: 200_000, +}; + +describe("buildAgentFactsLine", () => { + it("joins model, thinking, mode, and context usage as the controls show them", () => { + expect(buildAgentFactsLine(base)).toBe( + "Fable 5.1 · High · Bypass permissions · 56k / 200k tokens (28%)", + ); + }); + + it("shows the raw model id before the catalog has loaded", () => { + expect( + buildAgentFactsLine({ + ...base, + models: null, + runtimeModelId: null, + configuredModelId: "gpt-6.1-sol", + runtimeThinkingOptionId: null, + explicitThinkingOptionId: "medium", + availableModes: [], + contextWindowUsedTokens: null, + contextWindowMaxTokens: null, + }), + ).toBe("gpt-6.1-sol · Medium"); + }); + + it("falls back to the provider's first mode until the agent reports one", () => { + expect( + buildAgentFactsLine({ + ...base, + currentModeId: null, + contextWindowUsedTokens: undefined, + contextWindowMaxTokens: undefined, + }), + ).toBe("Fable 5.1 · High · Default"); + }); + + it("leaves thinking and context out when the agent has none", () => { + expect( + buildAgentFactsLine({ + ...base, + models: [{ provider: "mock", id: "m", label: "Model M" }], + runtimeModelId: "m", + runtimeThinkingOptionId: null, + availableModes: [], + contextWindowUsedTokens: 10, + contextWindowMaxTokens: 0, + }), + ).toBe("Model M"); + }); + + it("is empty until the agent has a model", () => { + expect( + buildAgentFactsLine({ ...base, runtimeModelId: null, configuredModelId: " " }), + ).toBeNull(); + }); +}); diff --git a/packages/app/src/panels/agent-facts-line.ts b/packages/app/src/panels/agent-facts-line.ts new file mode 100644 index 0000000000..7d3cd80332 --- /dev/null +++ b/packages/app/src/panels/agent-facts-line.ts @@ -0,0 +1,59 @@ +import type { AgentMode, AgentModelDefinition } from "@getpaseo/protocol/agent-types"; +import { formatAgentModeLabel } from "@/agent-controls/labels"; +import { formatTokenCount } from "@/components/context-window-meter.utils"; +import { resolveAgentModelSelection } from "@/composer/agent-controls/utils"; + +export interface AgentFactsInput { + models: AgentModelDefinition[] | null; + runtimeModelId: string | null | undefined; + configuredModelId: string | null | undefined; + runtimeThinkingOptionId: string | null | undefined; + explicitThinkingOptionId: string | null | undefined; + availableModes: AgentMode[]; + currentModeId: string | null | undefined; + contextWindowUsedTokens: number | null | undefined; + contextWindowMaxTokens: number | null | undefined; +} + +/** + * What the composer's controls and context meter show about a Paseo agent, as one line: model, + * thinking, mode, and context usage, each resolved exactly as its control resolves it. Null until + * the agent has a model at all. + */ +export function buildAgentFactsLine(input: AgentFactsInput): string | null { + const hasModel = Boolean(input.runtimeModelId?.trim() || input.configuredModelId?.trim()); + if (!hasModel) return null; + const selection = resolveAgentModelSelection(input); + const parts = [selection.displayModel]; + if (selection.selectedThinkingId) parts.push(selection.displayThinking); + const mode = resolveModeLabel(input.availableModes, input.currentModeId); + if (mode) parts.push(mode); + const context = formatContextUsage(input.contextWindowUsedTokens, input.contextWindowMaxTokens); + if (context) parts.push(context); + return parts.join(" · "); +} + +/** The mode control shows the current mode, or the provider's first one until the agent reports. */ +function resolveModeLabel(modes: AgentMode[], currentModeId: string | null | undefined) { + const mode = modes.find((candidate) => candidate.id === currentModeId) ?? modes[0]; + return mode ? formatAgentModeLabel(mode) : null; +} + +/** The context meter's numbers: used of max, with the share it draws as the ring. */ +function formatContextUsage( + usedTokens: number | null | undefined, + maxTokens: number | null | undefined, +): string | null { + if ( + typeof usedTokens !== "number" || + typeof maxTokens !== "number" || + !Number.isFinite(usedTokens) || + !Number.isFinite(maxTokens) || + usedTokens < 0 || + maxTokens <= 0 + ) { + return null; + } + const percentage = Math.round(Math.min(100, (usedTokens / maxTokens) * 100)); + return `${formatTokenCount(usedTokens)} / ${formatTokenCount(maxTokens)} tokens (${percentage}%)`; +} diff --git a/packages/app/src/panels/agent-panel.tsx b/packages/app/src/panels/agent-panel.tsx index bb51832aa0..a9e11df570 100644 --- a/packages/app/src/panels/agent-panel.tsx +++ b/packages/app/src/panels/agent-panel.tsx @@ -27,6 +27,11 @@ import { FileDropZone } from "@/components/file-drop/file-drop-zone"; import { useRetainedPanelActive } from "@/components/retained-panel"; import { RetainedChatContent } from "./retained-chat-content"; import { Composer } from "@/composer"; +import { + useComposerEditingSession, + useComposerFullscreen, + type ComposerEditingSession, +} from "@/composer/editing-session"; import { useWorkspaceHasDiffStat } from "@/composer/workspace-diff-stat"; import { resolveComposerTrackControlClearance, @@ -55,6 +60,9 @@ import { useContainerWidthBelow } from "@/hooks/use-container-width"; import { reconcileMissingAgentStateWithPresentAgent } from "@/panels/agent-panel-load-state"; import { TimelineSyncStatus } from "@/timeline/sync-status"; import { usePaneContext, usePaneFocus } from "@/panels/pane-context"; +import { buildAgentFactsLine } from "@/panels/agent-facts-line"; +import { PaneSubtitle } from "@/panels/pane-subtitle"; +import { useProvidersSnapshot } from "@/hooks/use-providers-snapshot"; import { definePanel, type PanelDescriptor } from "@/panels/panel-registry"; import { RenderProfile } from "@/utils/render-profiler"; import { useHasPluginComposerPills } from "@/plugins"; @@ -1155,6 +1163,9 @@ const ChatAgentReadyContent = memo(function ChatAgentReadyContent({ const { t } = useTranslation(); // The workspace sheet is for looking; Open as tab brings the agent back with its composer. const showsComposer = usePaneContext().host !== "sheet"; + // The dock lays out fullscreen for the same session the composer edits in. + const composerEditingSession = useComposerEditingSession("chat"); + const isComposerFullscreen = useComposerFullscreen(composerEditingSession); const subagentRows = useSubagentsForParent({ serverId, parentAgentId: agentId }); const tasks = useSessionStore((state): TodoEntry[] | undefined => state.sessions[serverId]?.agentTasks.get(agentId), @@ -1229,6 +1240,7 @@ const ChatAgentReadyContent = memo(function ChatAgentReadyContent({ cwd={cwd} isSubmitLoading={false} agentInputDraft={agentInputDraft} + editingSession={composerEditingSession} onAttentionInputFocus={onAttentionInputFocus} onAttentionPromptSend={onAttentionPromptSend} onComposerHeightChange={handleComposerHeightChange} @@ -1238,6 +1250,7 @@ const ChatAgentReadyContent = memo(function ChatAgentReadyContent({ ) : null; const streamContent = ( + {showsComposer ? null : } + {dockContent} {composerSection} {dockOverlay} @@ -1323,13 +1336,15 @@ const ChatAgentReadyContent = memo(function ChatAgentReadyContent({ function ChatSurface({ children, disabled, + fullscreen, }: { children: [ReactNode, ReactNode, ReactNode]; disabled: boolean; + fullscreen: boolean; }) { return ( - {children} + {children} ); } @@ -1364,6 +1379,36 @@ function TimelineSyncErrorCallout({ ); } +/** + * What the composer's controls and context meter would show, as one line, for an agent shown + * without its composer. + */ +function SheetAgentFacts({ serverId, agentId }: { serverId: string; agentId: string }) { + const agent = useSessionStore( + useShallow((state) => { + const current = state.sessions[serverId]?.agents.get(agentId); + return current + ? { + provider: current.provider, + cwd: current.cwd, + runtimeModelId: current.runtimeInfo?.model ?? null, + configuredModelId: current.model ?? null, + runtimeThinkingOptionId: current.runtimeInfo?.thinkingOptionId ?? null, + explicitThinkingOptionId: current.thinkingOptionId ?? null, + availableModes: current.availableModes, + currentModeId: current.currentModeId, + contextWindowUsedTokens: current.lastUsage?.contextWindowUsedTokens ?? null, + contextWindowMaxTokens: current.lastUsage?.contextWindowMaxTokens ?? null, + } + : null; + }), + ); + const { entries } = useProvidersSnapshot(serverId, { cwd: agent?.cwd }); + const models = entries?.find((entry) => entry.provider === agent?.provider)?.models ?? null; + const text = agent ? buildAgentFactsLine({ ...agent, models }) : null; + return text ? : null; +} + const AgentStreamSection = memo(function AgentStreamSection({ streamViewRef, serverId, @@ -1473,6 +1518,7 @@ const AgentComposerSection = memo(function AgentComposerSection({ cwd, isSubmitLoading, agentInputDraft, + editingSession, onAttentionInputFocus, onAttentionPromptSend, onComposerHeightChange, @@ -1486,6 +1532,7 @@ const AgentComposerSection = memo(function AgentComposerSection({ cwd: string; isSubmitLoading: boolean; agentInputDraft: AgentInputDraft; + editingSession: ComposerEditingSession; onAttentionInputFocus: () => void; onAttentionPromptSend: () => void; onComposerHeightChange: (height: number) => void; @@ -1509,6 +1556,7 @@ const AgentComposerSection = memo(function AgentComposerSection({ cwd={cwd} isSubmitLoading={isSubmitLoading} agentInputDraft={agentInputDraft} + editingSession={editingSession} onAttentionInputFocus={onAttentionInputFocus} onAttentionPromptSend={onAttentionPromptSend} onComposerHeightChange={onComposerHeightChange} @@ -1524,6 +1572,7 @@ function ActiveAgentComposer({ cwd, isSubmitLoading, agentInputDraft, + editingSession, onAttentionInputFocus, onAttentionPromptSend, onComposerHeightChange, @@ -1535,6 +1584,7 @@ function ActiveAgentComposer({ cwd: string; isSubmitLoading: boolean; agentInputDraft: AgentInputDraft; + editingSession: ComposerEditingSession; onAttentionInputFocus: () => void; onAttentionPromptSend: () => void; onComposerHeightChange: (height: number) => void; @@ -1631,6 +1681,7 @@ function ActiveAgentComposer({ onChangeAttachments={agentInputDraft.setAttachments} cwd={cwd} clearDraft={agentInputDraft.clear} + editingSession={editingSession} autoFocus autoFocusKey={String(agentInputDraft.attachmentFocusRequestId)} isSubmitLoading={isSubmitLoading} @@ -1723,6 +1774,8 @@ const animatedStaticStyles = RNStyleSheet.create({ inputAreaWrapper: { width: "100%", flexShrink: 1, + // Content-sized inline; fills the dock's fullscreen slot. + flexGrow: 1, }, }); diff --git a/packages/app/src/panels/agent-tracks.tsx b/packages/app/src/panels/agent-tracks.tsx index 3e1634c113..86faad329c 100644 --- a/packages/app/src/panels/agent-tracks.tsx +++ b/packages/app/src/panels/agent-tracks.tsx @@ -12,6 +12,7 @@ import { type ArchiveFinishedStatus, useArchiveSubagent, useDetachSubagent, + useSubagentOpensInSheet, type SubagentRow, } from "@/subagents"; import { SubagentsTrack } from "@/subagents/track"; @@ -90,6 +91,7 @@ export const AgentTracks = memo(function AgentTracks({ }, [openSubagentTarget], ); + const opensInSheet = useSubagentOpensInSheet(workspaceKey); const handleOpenChanges = useCallback(() => { if (!workspaceKey) { return; @@ -122,6 +124,7 @@ export const AgentTracks = memo(function AgentTracks({ rows={subagentRows} onOpenSubagent={handleOpenSubagent} onOpenProviderSubagent={handleOpenProviderSubagent} + opensInSheet={opensInSheet} onArchiveSubagent={archiveSubagent} onArchiveFinished={onArchiveFinished} archiveFinishedStatus={archiveFinishedStatus} diff --git a/packages/app/src/panels/pane-subtitle.tsx b/packages/app/src/panels/pane-subtitle.tsx new file mode 100644 index 0000000000..eb5292d67b --- /dev/null +++ b/packages/app/src/panels/pane-subtitle.tsx @@ -0,0 +1,30 @@ +import { Text, View } from "react-native"; +import { StyleSheet } from "react-native-unistyles"; + +/** + * One muted line of facts about a pane's agent, under the pane's header and above its stream: + * model, thinking, tokens. Provider subagents get it from the daemon; a Paseo agent shown without + * its composer gets it from the same facts the composer's controls show. + */ +export function PaneSubtitle({ text, testID }: { text: string; testID?: string }) { + return ( + + + {text} + + + ); +} + +const styles = StyleSheet.create((theme) => ({ + header: { + paddingHorizontal: theme.spacing[3], + paddingVertical: theme.spacing[1], + borderBottomWidth: theme.borderWidth[1], + borderBottomColor: theme.colors.border, + }, + text: { + color: theme.colors.foregroundMuted, + fontSize: theme.fontSize.sm, + }, +})); diff --git a/packages/app/src/panels/provider-subagent-panel.tsx b/packages/app/src/panels/provider-subagent-panel.tsx index 6c2d482403..ecd4a082bf 100644 --- a/packages/app/src/panels/provider-subagent-panel.tsx +++ b/packages/app/src/panels/provider-subagent-panel.tsx @@ -13,9 +13,11 @@ import { ComposerTrackBar } from "@/composer/tracks"; import { useIsCompactFormFactor } from "@/constants/layout"; import type { AgentScreenAgent } from "@/hooks/use-agent-screen-state-machine"; import { usePaneContext } from "@/panels/pane-context"; +import { PaneSubtitle } from "@/panels/pane-subtitle"; import { definePanel, type PanelDescriptor } from "@/panels/panel-registry"; import { useSessionStore } from "@/stores/session-store"; -import { useSubagentsForParent } from "@/subagents/select"; +import { type SubagentRow, useSubagentsForParent } from "@/subagents/select"; +import { useSubagentOpensInSheet } from "@/subagents/opens-in-sheet"; import { SubagentsTrack } from "@/subagents/track"; import { providerSubagentKey, @@ -30,6 +32,7 @@ import type { StreamItem } from "@/types/stream"; import { deriveSidebarStateBucket } from "@/utils/sidebar-agent-state"; import { TIMELINE_FETCH_PAGE_SIZE } from "@/timeline/timeline-fetch-policy"; import type { TurnPresentation } from "@/timeline/turn-liveness"; +import { buildWorkspaceTabPersistenceKey } from "@/workspace-tabs/model"; const EMPTY_PERMISSIONS = new Map(); const EMPTY_STREAM_ITEMS: StreamItem[] = []; @@ -47,10 +50,12 @@ function ProviderSubagentChildTrack({ serverId, rows, onOpenProviderSubagent, + opensInSheet, }: { serverId: string; rows: ReturnType; onOpenProviderSubagent: (parentAgentId: string, subagentId: string) => void; + opensInSheet: (row: SubagentRow) => boolean; }) { if (rows.length === 0) return null; return ( @@ -60,6 +65,7 @@ function ProviderSubagentChildTrack({ rows={rows} onOpenSubagent={NOOP_SUBAGENT} onOpenProviderSubagent={onOpenProviderSubagent} + opensInSheet={opensInSheet} onArchiveSubagent={NOOP_SUBAGENT} /> @@ -109,7 +115,7 @@ function useProviderSubagentDescriptor( function ProviderSubagentPanel() { const { t } = useTranslation(); - const { serverId, target, openFileInWorkspace, openTab } = usePaneContext(); + const { serverId, workspaceId, target, openFileInWorkspace, openTab } = usePaneContext(); invariant(target.kind === "provider_subagent", "ProviderSubagentPanel requires provider target"); const key = providerSubagentKey(serverId, target.parentAgentId, target.subagentId); const streamId = `provider:${encodeURIComponent(target.parentAgentId)}:${encodeURIComponent(target.subagentId)}`; @@ -137,6 +143,9 @@ function ProviderSubagentPanel() { providerParentSubagentId: target.subagentId, }); const childTrackClearance = resolveChildTrackClearance(childRows.length, isCompact); + const opensInSheet = useSubagentOpensInSheet( + buildWorkspaceTabPersistenceKey({ serverId, workspaceId }), + ); const openProviderChild = useCallback( (parentAgentId: string, subagentId: string) => { openTab({ kind: "provider_subagent", parentAgentId, subagentId }); @@ -243,17 +252,7 @@ function ProviderSubagentPanel() { return ( - {subtitle ? ( - - - {subtitle} - - - ) : null} + {subtitle ? : null} ); @@ -280,16 +280,6 @@ function ProviderSubagentPanel() { const styles = StyleSheet.create((theme) => ({ container: { flex: 1, minHeight: 0 }, - subtitleHeader: { - paddingHorizontal: theme.spacing[3], - paddingVertical: theme.spacing[1], - borderBottomWidth: theme.borderWidth[1], - borderBottomColor: theme.colors.border, - }, - subtitleText: { - color: theme.colors.foregroundMuted, - fontSize: theme.fontSize.sm, - }, unsupported: { flex: 1, alignItems: "center", justifyContent: "center", padding: 24 }, unsupportedText: { color: theme.colors.foregroundMuted, textAlign: "center" }, })); diff --git a/packages/app/src/screens/new-workspace-screen.tsx b/packages/app/src/screens/new-workspace-screen.tsx index 39c414d9e7..6d8fd3de5a 100644 --- a/packages/app/src/screens/new-workspace-screen.tsx +++ b/packages/app/src/screens/new-workspace-screen.tsx @@ -17,6 +17,7 @@ import { useQuery, useQueryClient } from "@tanstack/react-query"; import { ChevronDown, Folder, FolderPlus, GitBranch, GitPullRequest } from "lucide-react-native"; import { Composer } from "@/composer"; import { ComposerDock } from "@/composer/dock"; +import { useComposerEditingSession, useComposerFullscreen } from "@/composer/editing-session"; import { FileDropZone } from "@/components/file-drop/file-drop-zone"; import { resolveComposerAttachmentSubmitFormat, @@ -1636,6 +1637,8 @@ export function NewWorkspaceScreen({ const { t } = useTranslation(); const isCompact = useIsCompactFormFactor(); const toast = useToast(); + const composerEditing = useNewWorkspaceComposerEditing(); + const { leaveFullscreen } = composerEditing; const mergeWorkspaces = useCallback( (targetServerId: string, workspaces: Iterable) => { getHostRuntimeStore().acceptWorkspaceSnapshots(targetServerId, Array.from(workspaces)); @@ -2121,6 +2124,7 @@ export function NewWorkspaceScreen({ return; } outcome = "navigated"; + leaveFullscreen(); navigateToWorkspace({ serverId: targetServerId, workspaceId }); }, }); @@ -2171,6 +2175,7 @@ export function NewWorkspaceScreen({ forkDraftSetup, isStillOnCreateScreen, launchTarget, + leaveFullscreen, selectedServerId, supportsForgeSearch, t, @@ -2227,6 +2232,7 @@ export function NewWorkspaceScreen({ return; } outcome = "navigated"; + leaveFullscreen(); navigateToWorkspace({ serverId: targetServerId, workspaceId, target }); }, }); @@ -2250,6 +2256,7 @@ export function NewWorkspaceScreen({ t, terminalPromptText, toast, + leaveFullscreen, updateFormPreferences, withConnectedClient, ]); @@ -2369,10 +2376,12 @@ export function NewWorkspaceScreen({ const importSession = useImportSession({ serverId: selectedServerId }); + const isComposerFullscreen = composerEditing.isFullscreen(isTerminalLaunch); const composer = isTerminalLaunch ? ( - - - - - {composer} - {errorMessage ? {errorMessage} : null} - - + + {composer} + {errorMessage ? {errorMessage} : null} + {importSession.sheet} ); } +/** Terminal and chat launches edit in separate sessions; the screen follows the mounted one. */ +function useNewWorkspaceComposerEditing() { + const terminal = useComposerEditingSession("terminal"); + const chat = useComposerEditingSession("chat"); + const isTerminalFullscreen = useComposerFullscreen(terminal); + const isChatFullscreen = useComposerFullscreen(chat); + // The sessions outlive the screen (its draft keeps them), so a launch that leaves + // the screen also leaves fullscreen; the next draft starts inline. + const leaveFullscreen = useCallback(() => { + terminal.setFullscreen(false); + chat.setFullscreen(false); + }, [chat, terminal]); + return { + terminal, + chat, + leaveFullscreen, + isFullscreen: (isTerminalLaunch: boolean) => + isTerminalLaunch ? isTerminalFullscreen : isChatFullscreen, + }; +} + function NewWorkspaceLayout({ isCompact, + fullscreen, title, formStack, onImportSession, children, }: { isCompact: boolean; + /** The composer covers the screen; the header leaves and the dock fills the content. */ + fullscreen: boolean; title: string; formStack: ReactNode; onImportSession: () => void; @@ -2472,13 +2503,19 @@ function NewWorkspaceLayout({ ); return ( - - {setupFields} - <> - {children} - {isCompact ? null : importSessionButton} - - + <> + {fullscreen ? null : } + + + + {setupFields} + <> + {children} + {isCompact || fullscreen ? null : importSessionButton} + + + + ); } diff --git a/packages/app/src/screens/settings/plugins-page.test.tsx b/packages/app/src/screens/settings/plugins-page.test.tsx index 0ede3f803b..8a502749db 100644 --- a/packages/app/src/screens/settings/plugins-page.test.tsx +++ b/packages/app/src/screens/settings/plugins-page.test.tsx @@ -80,6 +80,7 @@ vi.mock("@gorhom/bottom-sheet", async () => { await vi.importActual("react-native"); return { BottomSheetBackdrop: () => null, + BottomSheetHandle: () => null, BottomSheetModal: ReactModule.forwardRef(() => null), BottomSheetScrollView: ScrollView, BottomSheetTextInput: TextInput, diff --git a/packages/app/src/screens/workspace/sheet-tabs.tsx b/packages/app/src/screens/workspace/sheet-tabs.tsx new file mode 100644 index 0000000000..2b4e927a13 --- /dev/null +++ b/packages/app/src/screens/workspace/sheet-tabs.tsx @@ -0,0 +1,311 @@ +import type { BottomSheetHandleProps } from "@gorhom/bottom-sheet"; +import { useIsFocused } from "@react-navigation/native"; +import { + type ComponentType, + type FC, + useCallback, + useEffect, + useMemo, + useRef, + useState, +} from "react"; +import { View } from "react-native"; +import { useTranslation } from "react-i18next"; +import { useSafeAreaInsets } from "react-native-safe-area-context"; +import { StyleSheet, withUnistyles } from "react-native-unistyles"; +import { useStore } from "zustand"; +import { createStore } from "zustand/vanilla"; +import { Maximize2 } from "lucide-react-native"; +import { + SheetBackground, + SheetHandle, + SheetHeaderIconButton, + SheetHeaderView, + type SheetHeader, +} from "@/components/adaptive-modal-sheet"; +import { + IsolatedBottomSheetModal, + type IsolatedBottomSheetModalRef, + systemBackPress, +} from "@/components/ui/isolated-bottom-sheet-modal"; +import type { PanelIconProps } from "@/panels/panel-registry"; +import { getPanelRegistration } from "@/panels/panel-registry"; +import { ensurePanelsRegistered } from "@/panels/register-panels"; +import type { WorkspaceTabDescriptor } from "@/screens/workspace/workspace-tabs-types"; +import { + WorkspacePaneContent, + type WorkspacePaneContentModel, +} from "@/screens/workspace/workspace-pane-content"; +import { useWorkspaceLayoutStore, type SheetTab } from "@/stores/workspace-layout-store"; + +const SNAP_POINTS = ["92%"]; +const NO_SHEETS: readonly SheetTab[] = []; + +function PanelIcon({ + icon: Icon, + size, + color, +}: { icon: ComponentType } & PanelIconProps) { + return ; +} + +const ThemedPanelIcon = withUnistyles(PanelIcon, (theme) => ({ + color: theme.colors.foregroundMuted, +})); + +interface SheetTabHandleValue { + header: SheetHeader; + onClose: () => void; +} + +/** + * The sheet's handle, showing its header. Gorhom takes `handleComponent` as a component type and + * renders it on the far side of the portal: a new function per render would remount the header on + * every change, and no context from here reaches it. So each sheet gets one handle component for + * its lifetime, which reads the header through a store the sheet keeps current. + */ +function useSheetTabHandle(value: SheetTabHandleValue): FC { + const [store] = useState(() => createStore(() => value)); + useEffect(() => store.setState(value, true), [store, value]); + const [Handle] = useState( + () => + function SheetTabHandle(props: BottomSheetHandleProps) { + const { header, onClose } = useStore(store); + return ( + + + + ); + }, + ); + return Handle; +} + +export interface SheetTabsProps { + workspaceKey: string | null; + serverId: string; + workspaceId: string; + isWorkspaceFocused: boolean; + buildContent: (tab: WorkspaceTabDescriptor) => WorkspacePaneContentModel; + /** The workspace's ordinary tab close, including its unsaved-changes guard. */ + onCloseTab: (tabId: string) => Promise; +} + +interface SheetTabSheetProps extends Omit { + sheet: SheetTab; + /** Only the top sheet's pane is focused and answers Android Back; the ones below wait their turn. */ + isTop: boolean; + /** Runs the guarded close and resolves to whether the tab is still open. */ + onClose: (tabId: string) => Promise; + onOpenAsTab: (tabId: string) => void; +} + +/** + * The workspace's sheet tabs, one sheet each, on the app-wide sheet stack. They present from inside + * the workspace's `SheetHostScope`, so each panel keeps every context an ordinary pane has, and a + * sheet opened from any other sheet (a subagent chosen from the subagents list, say) lands on top of + * it and uncovers it on close. The shared sheet parts (`SheetBackground`, `SheetHandle`, + * `SheetHeaderView`) keep them looking and dragging like every other sheet. + */ +export function SheetTabs({ workspaceKey, onCloseTab, ...rest }: SheetTabsProps) { + const sheets = useWorkspaceLayoutStore((state) => + workspaceKey ? (state.sheetsByWorkspace[workspaceKey] ?? NO_SHEETS) : NO_SHEETS, + ); + const openSheetAsTab = useWorkspaceLayoutStore((state) => state.openSheetAsTab); + const handleOpenAsTab = useCallback( + (tabId: string) => { + if (workspaceKey) openSheetAsTab(workspaceKey, tabId); + }, + [openSheetAsTab, workspaceKey], + ); + const handleClose = useCallback( + async (tabId: string) => { + await onCloseTab(tabId); + // A declined unsaved-changes prompt leaves the tab in its sheet. + const open = workspaceKey + ? useWorkspaceLayoutStore.getState().sheetsByWorkspace[workspaceKey] + : undefined; + return open?.some((sheet) => sheet.tab.tabId === tabId) ?? false; + }, + [onCloseTab, workspaceKey], + ); + return ( + <> + {sheets.map((sheet, index) => ( + + ))} + + ); +} + +function SheetTabSheet({ + sheet, + isTop, + serverId, + workspaceId, + isWorkspaceFocused, + buildContent, + onClose, + onOpenAsTab, +}: SheetTabSheetProps) { + const { t } = useTranslation(); + const { tab } = sheet; + const sheetRef = useRef(null); + const isScreenFocused = useIsFocused(); + ensurePanelsRegistered(); + const registration = getPanelRegistration(tab.target.kind); + if (!registration) { + throw new Error(`No panel registration for kind: ${tab.target.kind}`); + } + const descriptor = registration.useDescriptor(tab.target as never, { + serverId, + workspaceId, + tabId: tab.tabId, + }); + + // The sheet lives as long as its store entry: it presents on mount, and unmounting takes it off + // the stack, which uncovers the sheet below. Gorhom slides an unmounting sheet down and still + // reports that as `onChange(-1)`, which must not read as the user closing it: the store already + // moved on, and the same tab id may now be a pane tab (Open as tab). + const unmounted = useRef(false); + useEffect(() => { + sheetRef.current?.present(); + return () => { + unmounted.current = true; + }; + }, []); + + // Every close path (drag, backdrop, Close, Back) slides the sheet down first; `onChange(-1)` then + // runs the one guarded close. The sheet keeps its content through the close, so a declined + // unsaved-changes prompt only has to bring it back up. + const close = useCallback(() => sheetRef.current?.close(), []); + const handleChange = useCallback( + (index: number) => { + if (index !== -1 || unmounted.current) return; + void onClose(tab.tabId).then((stillOpen) => { + if (stillOpen) sheetRef.current?.snapToIndex(0); + return stillOpen; + }); + }, + [onClose, tab.tabId], + ); + // Hidden workspaces stay mounted in the deck and under Settings; only the visible one owns Back. + const ownsBackPress = isTop && isWorkspaceFocused && isScreenFocused; + useEffect(() => { + if (!ownsBackPress) return; + return systemBackPress.subscribe(() => { + close(); + return true; + }); + }, [close, ownsBackPress]); + + const handleOpenAsTab = useCallback(() => onOpenAsTab(tab.tabId), [onOpenAsTab, tab.tabId]); + const header = useMemo( + () => ({ + title: descriptor.label, + leading: , + // The sheet is for looking; the full-screen glyph takes the tab out of the sheet and into + // the switcher, where it gets its composer back. + actions: sheet.policy.openAsTab ? ( + + ) : undefined, + }), + [descriptor.icon, descriptor.label, handleOpenAsTab, sheet.policy.openAsTab, t], + ); + const handleValue = useMemo( + () => ({ header, onClose: close }), + [close, header], + ); + // The header is the sheet's handle: the panel scrolls on its own, so dragging the content would + // fight it, and the header is where people reach to pull the sheet down. + const SheetTabHandle = useSheetTabHandle(handleValue); + + return ( + + {/* A covered sheet stays as live as the pane under it; only focus follows the top sheet. */} + + + ); +} + +function SheetTabBody({ + tab, + label, + isPaneFocused, + isWorkspaceFocused, + buildContent, +}: { + tab: SheetTab["tab"]; + label: string; + /** Only the top sheet's pane is focused; the ones below are covered. */ + isPaneFocused: boolean; + isWorkspaceFocused: boolean; + buildContent: (tab: WorkspaceTabDescriptor) => WorkspacePaneContentModel; +}) { + const tabDescriptor = useMemo( + () => ({ + key: tab.tabId, + tabId: tab.tabId, + kind: tab.target.kind, + target: tab.target, + state: tab.state, + }), + [tab], + ); + const content = useMemo(() => buildContent(tabDescriptor), [buildContent, tabDescriptor]); + // The sheet reaches the bottom of the screen, so it owns the system navigation inset. + const { bottom: bottomInset } = useSafeAreaInsets(); + const contentStyle = useMemo( + () => [styles.content, { paddingBottom: bottomInset }], + [bottomInset], + ); + + return ( + + + + ); +} + +const styles = StyleSheet.create({ + content: { + flex: 1, + minHeight: 0, + }, +}); diff --git a/packages/app/src/screens/workspace/workspace-screen.tsx b/packages/app/src/screens/workspace/workspace-screen.tsx index 62c9ee4fa6..bfe131d008 100644 --- a/packages/app/src/screens/workspace/workspace-screen.tsx +++ b/packages/app/src/screens/workspace/workspace-screen.tsx @@ -1,5 +1,9 @@ -import { WorkspaceComposerEditingSessionsProvider } from "@/composer/editing-session"; +import { + WorkspaceComposerEditingSessionsProvider, + useComposerTabFullscreen, +} from "@/composer/editing-session"; import { LoadingSpinner } from "@/components/ui/loading-spinner"; +import { SheetHostScope } from "@/components/ui/isolated-bottom-sheet-modal"; import type { JsonValue } from "@getpaseo/protocol/agent-types"; import { getOpenAgentTabLabel } from "@getpaseo/protocol/agent-labels"; import { @@ -75,6 +79,7 @@ import { selectExplorerSidebarPaneId, selectPaneFocusSuspended, type WorkspaceLayout, + type SheetTab, type WorkspaceTabPlacement, useWorkspaceLayoutStore, useWorkspaceLayoutStoreHydrated, @@ -161,7 +166,7 @@ import { type WorkspacePaneContentModel, } from "@/screens/workspace/workspace-pane-content"; import { useMountedTabSet } from "@/screens/workspace/use-mounted-tab-set"; -import { WorkspaceSheetHost } from "@/screens/workspace/workspace-sheet-host"; +import { SheetTabs } from "@/screens/workspace/sheet-tabs"; import type { PaneHost } from "@/panels/panel-manifest"; import { WorkspaceFocusProvider } from "@/workspace/focus"; import { DiffDocumentWorkspaceCacheProvider } from "@/git/diff-document/workspace-cache"; @@ -204,6 +209,7 @@ import { RenderProfile } from "@/utils/render-profiler"; import { useWorkspaceCheckoutStatus } from "@/screens/workspace/use-workspace-checkout-status"; import { useHasPullRequest, usePullRequestAutoAdd } from "@/panels/pull-request"; +const NO_SHEETS: readonly SheetTab[] = []; const WORKSPACE_FLOATING_PANEL_PORTAL_HOST_PREFIX = "workspace-floating-panels"; const EMPTY_UI_TABS: WorkspaceTab[] = []; const EMPTY_WORKSPACE_SCRIPTS: WorkspaceDescriptor["scripts"] = []; @@ -824,6 +830,16 @@ function floatsHeaderOverContent(activeTab: WorkspaceTabDescriptor | null): bool return supportsStreamTopOverlay && activeTab?.kind === "agent"; } +/** A fullscreen composer covers the compact header; the column lays out without it. */ +function resolveCompactHeaderLayout(input: { + header: ReactNode; + activeTab: WorkspaceTabDescriptor | null; + composerFullscreen: boolean; +}): { header: ReactNode; floating: boolean } { + if (input.composerFullscreen) return { header: null, floating: false }; + return { header: input.header, floating: floatsHeaderOverContent(input.activeTab) }; +} + function shouldShowWorkspaceScreenHeader(input: { isFocusModeEnabled: boolean; isMobile: boolean; @@ -1309,8 +1325,12 @@ function WorkspaceScreenContent({ const focusWorkspaceTab = useWorkspaceLayoutStore((state) => state.focusTab); const selectWorkspaceTabInPane = useWorkspaceLayoutStore((state) => state.selectTabInPane); const closeWorkspaceTab = useWorkspaceLayoutStore((state) => state.closeTab); + const sheets = useWorkspaceLayoutStore((state) => + persistenceKey ? (state.sheetsByWorkspace[persistenceKey] ?? NO_SHEETS) : NO_SHEETS, + ); + // Only the top sheet is on screen. const sheetTab = useWorkspaceLayoutStore((state) => - persistenceKey ? (state.sheetByWorkspace[persistenceKey]?.tab ?? null) : null, + persistenceKey ? (state.sheetsByWorkspace[persistenceKey]?.at(-1)?.tab ?? null) : null, ); const unpinWorkspaceAgent = useWorkspaceLayoutStore((state) => state.unpinAgent); const hideWorkspaceAgent = useWorkspaceLayoutStore((state) => state.hideAgent); @@ -2069,7 +2089,7 @@ function WorkspaceScreenContent({ const handleCloseTabById = useCallback( async (tabId: string) => { - if (persistenceKey && sheetTab?.tabId === tabId) { + if (persistenceKey && sheets.some((sheet) => sheet.tab.tabId === tabId)) { if (await confirmDiscardModifiedTab(tabId)) { closeWorkspaceTab(persistenceKey, tabId); } @@ -2100,7 +2120,7 @@ function WorkspaceScreenContent({ handleClosePassiveTab, handleCloseTerminalTab, persistenceKey, - sheetTab, + sheets, ], ); @@ -3095,7 +3115,6 @@ function WorkspaceScreenContent({ focusedPaneTabDescriptorMap, isRouteFocused, focusedPaneId, - // The sheet owns input while it covers the tab. paneFocusSuspended, onFocusPane: handleFocusPane, buildMobilePaneContentModel, @@ -3524,22 +3543,28 @@ function WorkspaceScreenContent({ const rendersDesktopSplitContent = !isMobile && desktopSplitContent !== null; const workspacePanelTabIds = useMemo( - () => [...uiTabs.map((tab) => tab.tabId), ...(sheetTab ? [sheetTab.tabId] : [])], - [uiTabs, sheetTab], + () => [...uiTabs.map((tab) => tab.tabId), ...sheets.map((sheet) => sheet.tab.tabId)], + [uiTabs, sheets], ); const workspacePanelKey = `${normalizedServerId}:${normalizedWorkspaceId}`; + const compactHeaderLayout = resolveCompactHeaderLayout({ + header: compactWorkspaceHeader, + activeTab: activeTabDescriptor, + composerFullscreen: useComposerTabFullscreen(workspacePanelKey, activeTabId), + }); - // The sheet is the column's last child, so it covers the compact header as a modal. + // Sheets opened from the compact column present inside it, so their panels read the workspace + // providers, and they cover the compact header as a modal. const workspaceCenterColumn = isMobile ? ( - + {(topOverlayInset) => ( @@ -3547,17 +3572,15 @@ function WorkspaceScreenContent({ )} - - - - + + ) : ( diff --git a/packages/app/src/screens/workspace/workspace-sheet-host.tsx b/packages/app/src/screens/workspace/workspace-sheet-host.tsx deleted file mode 100644 index d44bdb6cc9..0000000000 --- a/packages/app/src/screens/workspace/workspace-sheet-host.tsx +++ /dev/null @@ -1,245 +0,0 @@ -import BottomSheet, { - BottomSheetBackdrop, - type BottomSheetBackdropProps, -} from "@gorhom/bottom-sheet"; -import { useIsFocused } from "@react-navigation/native"; -import { type ComponentType, useCallback, useEffect, useMemo, useRef } from "react"; -import { BackHandler, View } from "react-native"; -import { useTranslation } from "react-i18next"; -import { useSafeAreaInsets } from "react-native-safe-area-context"; -import { StyleSheet, withUnistyles } from "react-native-unistyles"; -import { SheetHeaderView } from "@/components/adaptive-modal-sheet"; -import { Button } from "@/components/ui/button"; -import { isNative } from "@/constants/platform"; -import type { PanelIconProps } from "@/panels/panel-registry"; -import { getPanelRegistration } from "@/panels/panel-registry"; -import { ensurePanelsRegistered } from "@/panels/register-panels"; -import type { WorkspaceTabDescriptor } from "@/screens/workspace/workspace-tabs-types"; -import { - WorkspacePaneContent, - type WorkspacePaneContentModel, -} from "@/screens/workspace/workspace-pane-content"; -import { useWorkspaceLayoutStore, type WorkspaceSheet } from "@/stores/workspace-layout-store"; - -const SNAP_POINTS = ["92%"]; - -const ThemedBottomSheet = withUnistyles(BottomSheet, (theme) => ({ - backgroundStyle: { - backgroundColor: theme.colors.surface0, - borderTopLeftRadius: theme.borderRadius["2xl"], - borderTopRightRadius: theme.borderRadius["2xl"], - }, - handleIndicatorStyle: { - backgroundColor: theme.colors.palette.zinc[600], - }, -})); - -function PanelIcon({ - icon: Icon, - size, - color, -}: { icon: ComponentType } & PanelIconProps) { - return ; -} - -const ThemedPanelIcon = withUnistyles(PanelIcon, (theme) => ({ - color: theme.colors.foregroundMuted, -})); - -function renderBackdrop(props: BottomSheetBackdropProps) { - return ( - - ); -} - -export interface WorkspaceSheetHostProps { - workspaceKey: string | null; - serverId: string; - workspaceId: string; - isWorkspaceFocused: boolean; - buildContent: (tab: WorkspaceTabDescriptor) => WorkspacePaneContentModel; - /** The workspace's ordinary tab close, including its unsaved-changes guard. */ - onCloseTab: (tabId: string) => Promise; -} - -interface WorkspaceSheetPresentationProps extends Omit< - WorkspaceSheetHostProps, - "workspaceKey" | "onCloseTab" -> { - sheet: WorkspaceSheet; - onClose: () => Promise; - onOpenAsTab: () => void; -} - -/** - * Hosts the workspace's sheet tab over the compact tab strip. It renders in the workspace tree, - * not through a portal, so the panel keeps every context an ordinary pane has. - */ -export function WorkspaceSheetHost({ workspaceKey, onCloseTab, ...rest }: WorkspaceSheetHostProps) { - const sheet = useWorkspaceLayoutStore((state) => - workspaceKey ? (state.sheetByWorkspace[workspaceKey] ?? null) : null, - ); - const openSheetAsTab = useWorkspaceLayoutStore((state) => state.openSheetAsTab); - const sheetTabId = sheet?.tab.tabId ?? null; - const handleClose = useCallback(async () => { - if (sheetTabId) await onCloseTab(sheetTabId); - }, [onCloseTab, sheetTabId]); - const handleOpenAsTab = useCallback(() => { - if (workspaceKey) openSheetAsTab(workspaceKey); - }, [openSheetAsTab, workspaceKey]); - if (!sheet) return null; - return ( - - ); -} - -function WorkspaceSheetPresentation({ - sheet, - serverId, - workspaceId, - isWorkspaceFocused, - buildContent, - onClose, - onOpenAsTab, -}: WorkspaceSheetPresentationProps) { - const sheetRef = useRef(null); - const isScreenFocused = useIsFocused(); - const ownsBackPress = isNative && isWorkspaceFocused && isScreenFocused; - const handleChange = useCallback( - (index: number) => { - if (index !== -1) return; - // A declined close (unsaved changes) leaves the tab in the sheet, so bring it back up. - void onClose().then(() => sheetRef.current?.snapToIndex(0)); - }, - [onClose], - ); - useEffect(() => { - // Hidden workspaces stay mounted in the deck and under Settings; only the visible one owns back. - if (!ownsBackPress) return; - const subscription = BackHandler.addEventListener("hardwareBackPress", () => { - void onClose(); - return true; - }); - return () => subscription.remove(); - }, [onClose, ownsBackPress]); - - return ( - - - - - - ); -} - -function WorkspaceSheetBody({ - sheet, - serverId, - workspaceId, - isWorkspaceFocused, - buildContent, - onClose, - onOpenAsTab, -}: WorkspaceSheetPresentationProps) { - const { t } = useTranslation(); - const { tab } = sheet; - ensurePanelsRegistered(); - const registration = getPanelRegistration(tab.target.kind); - if (!registration) { - throw new Error(`No panel registration for kind: ${tab.target.kind}`); - } - // The body is keyed by tab id and kind, so the registration and its descriptor hook stay fixed. - const descriptor = registration.useDescriptor(tab.target as never, { - serverId, - workspaceId, - tabId: tab.tabId, - }); - const tabDescriptor = useMemo( - () => ({ - key: tab.tabId, - tabId: tab.tabId, - kind: tab.target.kind, - target: tab.target, - state: tab.state, - }), - [tab], - ); - const content = useMemo(() => buildContent(tabDescriptor), [buildContent, tabDescriptor]); - const handleClose = useCallback(() => { - void onClose(); - }, [onClose]); - // The sheet reaches the bottom of the screen, so it owns the system navigation inset. - const { bottom: bottomInset } = useSafeAreaInsets(); - const contentStyle = useMemo( - () => [styles.content, { paddingBottom: bottomInset }], - [bottomInset], - ); - const header = useMemo( - () => ({ - title: descriptor.label, - leading: , - actions: sheet.policy.openAsTab ? ( - - ) : undefined, - }), - [descriptor.icon, descriptor.label, onOpenAsTab, sheet.policy.openAsTab, t], - ); - - return ( - - - - - - - ); -} - -const styles = StyleSheet.create({ - host: { - ...StyleSheet.absoluteFillObject, - }, - body: { - flex: 1, - minHeight: 0, - }, - content: { - flex: 1, - minHeight: 0, - }, -}); diff --git a/packages/app/src/stores/workspace-layout-store.test.ts b/packages/app/src/stores/workspace-layout-store.test.ts index 8c061d18b3..5f170bed7e 100644 --- a/packages/app/src/stores/workspace-layout-store.test.ts +++ b/packages/app/src/stores/workspace-layout-store.test.ts @@ -4449,7 +4449,7 @@ describe("compact workspace sheet", () => { function createCompactStore() { const store = createWorkspaceLayoutStore(workspaceLayoutIds); - store.setState({ layoutByWorkspace: {}, sheetByWorkspace: {} }); + store.setState({ layoutByWorkspace: {}, sheetsByWorkspace: {} }); store.getState().setLayoutMode("compact"); store.getState().openTab({ workspaceKey, @@ -4459,6 +4459,16 @@ describe("compact workspace sheet", () => { return store; } + function topSheet(store: ReturnType) { + return store.getState().sheetsByWorkspace[workspaceKey]?.at(-1); + } + + function sheetTargets(store: ReturnType) { + return (store.getState().sheetsByWorkspace[workspaceKey] ?? []).map( + (sheet) => sheet.tab.target, + ); + } + function tabKinds(store: ReturnType): string[] { const layout = store.getState().layoutByWorkspace[workspaceKey]; const tabsById = new Map(collectAllTabs(layout.root).map((tab) => [tab.tabId, tab])); @@ -4523,7 +4533,7 @@ describe("compact workspace sheet", () => { const tabId = store.getState().openTab({ workspaceKey, target: fileTarget, intent: "reveal" }); - expect(store.getState().sheetByWorkspace[workspaceKey]?.tab).toEqual({ + expect(topSheet(store)?.tab).toEqual({ tabId, target: fileTarget, createdAt: expect.any(Number), @@ -4547,22 +4557,71 @@ describe("compact workspace sheet", () => { const tabId = store.getState().openTab({ workspaceKey, target: fileTarget, intent: "reveal" }); expect(tabId).toBe(fileTabId); - expect(store.getState().sheetByWorkspace[workspaceKey]).toBeUndefined(); + expect(topSheet(store)).toBeUndefined(); const layout = store.getState().layoutByWorkspace[workspaceKey]; expect(findPaneContainingTab(layout.root, fileTabId ?? "")?.focusedTabId).toBe(fileTabId); }); - it("replaces the sheet content with the next sheet target", () => { + it("stacks the next sheet target over the open sheet", () => { const store = createCompactStore(); store.getState().openTab({ workspaceKey, target: fileTarget, intent: "reveal" }); + const nextTarget = { kind: "file" as const, path: "src/other.ts" }; + const nextTabId = store + .getState() + .openTab({ workspaceKey, target: nextTarget, intent: "reveal" }); + + expect(sheetTargets(store)).toEqual([fileTarget, nextTarget]); + expect(tabKinds(store)).toEqual(["terminal"]); + + store.getState().closeTab(workspaceKey, nextTabId ?? ""); + expect(sheetTargets(store)).toEqual([fileTarget]); + }); + + it("closes a lower sheet and keeps the sheets above it", () => { + const store = createCompactStore(); + const fileTabId = store + .getState() + .openTab({ workspaceKey, target: fileTarget, intent: "reveal" }); const nextTarget = { kind: "file" as const, path: "src/other.ts" }; store.getState().openTab({ workspaceKey, target: nextTarget, intent: "reveal" }); - expect(store.getState().sheetByWorkspace[workspaceKey]?.tab.target).toEqual(nextTarget); + store.getState().closeTab(workspaceKey, fileTabId ?? ""); + + expect(sheetTargets(store)).toEqual([nextTarget]); expect(tabKinds(store)).toEqual(["terminal"]); }); + it("uncovers a covered sheet by dropping the sheets above it", () => { + const store = createCompactStore(); + const fileTabId = store + .getState() + .openTab({ workspaceKey, target: fileTarget, intent: "reveal" }); + store + .getState() + .openTab({ workspaceKey, target: { kind: "file", path: "src/other.ts" }, intent: "reveal" }); + + const tabId = store.getState().openTab({ workspaceKey, target: fileTarget, intent: "reveal" }); + + expect(tabId).toBe(fileTabId); + expect(sheetTargets(store)).toEqual([fileTarget]); + }); + + it("opens the top sheet as a tab and dismisses the sheets that would cover it", () => { + const store = createCompactStore(); + store.getState().openTab({ workspaceKey, target: fileTarget, intent: "reveal" }); + const nextTabId = store + .getState() + .openTab({ workspaceKey, target: { kind: "file", path: "src/other.ts" }, intent: "reveal" }); + + store.getState().openSheetAsTab(workspaceKey, nextTabId ?? ""); + + expect(sheetTargets(store)).toEqual([]); + expect(tabKinds(store)).toEqual(["terminal", "file"]); + const layout = store.getState().layoutByWorkspace[workspaceKey]; + expect(findPaneById(layout.root, "main")?.focusedTabId).toBe(nextTabId); + }); + it("closes the sheet when a tab target is revealed, and keeps it for background opens", () => { const store = createCompactStore(); store.getState().openTab({ workspaceKey, target: fileTarget, intent: "reveal" }); @@ -4572,7 +4631,7 @@ describe("compact workspace sheet", () => { target: { kind: "file", path: "src/background.ts" }, intent: "background", }); - expect(store.getState().sheetByWorkspace[workspaceKey]?.tab.target).toEqual(fileTarget); + expect(topSheet(store)?.tab.target).toEqual(fileTarget); expect(tabKinds(store)).toEqual(["terminal", "file"]); store.getState().openTab({ @@ -4580,7 +4639,7 @@ describe("compact workspace sheet", () => { target: { kind: "terminal", terminalId: "term-2" }, intent: "reveal", }); - expect(store.getState().sheetByWorkspace[workspaceKey]).toBeUndefined(); + expect(topSheet(store)).toBeUndefined(); }); it("moves the sheet tab into the focused pane with the same tab id and state", () => { @@ -4591,10 +4650,10 @@ describe("compact workspace sheet", () => { if (!sheetTabId) throw new Error("Expected a sheet tab"); store.getState().setTabState(workspaceKey, sheetTabId, { scrollTop: 120 }); - const tabId = store.getState().openSheetAsTab(workspaceKey); + const tabId = store.getState().openSheetAsTab(workspaceKey, sheetTabId); expect(tabId).toBe(sheetTabId); - expect(store.getState().sheetByWorkspace[workspaceKey]).toBeUndefined(); + expect(topSheet(store)).toBeUndefined(); const layout = store.getState().layoutByWorkspace[workspaceKey]; const pane = findPaneContainingTab(layout.root, sheetTabId); expect(pane?.id).toBe(layout.focusedPaneId); @@ -4616,7 +4675,7 @@ describe("compact workspace sheet", () => { expect(store.getState().layoutByWorkspace[workspaceKey]).toBe(layoutBefore); store.getState().closeTab(workspaceKey, sheetTabId); - expect(store.getState().sheetByWorkspace[workspaceKey]).toBeUndefined(); + expect(topSheet(store)).toBeUndefined(); expect(tabKinds(store)).toEqual(["terminal"]); }); @@ -4639,19 +4698,21 @@ describe("compact workspace sheet", () => { store.getState().openTab({ workspaceKey, target: fileTarget, intent: "reveal" }); - expect(store.getState().sheetByWorkspace).toEqual({}); + expect(store.getState().sheetsByWorkspace).toEqual({}); expect(tabKinds(store)).toEqual(["terminal", "file"]); }); - it("keeps the sheet content as a tab when the layout widens", () => { + it("keeps every stacked sheet as a tab when the layout widens, focusing the top one", () => { const store = createCompactStore(); + store.getState().openTab({ workspaceKey, target: fileTarget, intent: "reveal" }); const sheetTabId = store .getState() - .openTab({ workspaceKey, target: fileTarget, intent: "reveal" }); + .openTab({ workspaceKey, target: { kind: "file", path: "src/other.ts" }, intent: "reveal" }); store.getState().setLayoutMode("split-panes"); - expect(store.getState().sheetByWorkspace).toEqual({}); + expect(store.getState().sheetsByWorkspace).toEqual({}); + expect(tabKinds(store)).toEqual(["terminal", "file", "file"]); const layout = store.getState().layoutByWorkspace[workspaceKey]; expect(findPaneContainingTab(layout.root, sheetTabId ?? "")?.focusedTabId).toBe(sheetTabId); }); @@ -4669,7 +4730,7 @@ describe("compact workspace sheet", () => { target: { kind: "agent", agentId: "child" }, intent: "reveal", }); - expect(store.getState().sheetByWorkspace[workspaceKey]).toMatchObject({ + expect(topSheet(store)).toMatchObject({ tab: { target: { kind: "agent", agentId: "child" } }, policy: { openAsTab: true }, }); @@ -4679,7 +4740,7 @@ describe("compact workspace sheet", () => { target: { kind: "provider_subagent", parentAgentId: "root", subagentId: "task-1" }, intent: "reveal", }); - expect(store.getState().sheetByWorkspace[workspaceKey]).toMatchObject({ + expect(topSheet(store)).toMatchObject({ tab: { target: { kind: "provider_subagent", subagentId: "task-1" } }, policy: { openAsTab: false }, }); @@ -4689,7 +4750,7 @@ describe("compact workspace sheet", () => { .getState() .openTab({ workspaceKey, target: { kind: "agent", agentId }, intent: "reveal" }); } - expect(store.getState().sheetByWorkspace[workspaceKey]).toBeUndefined(); + expect(topSheet(store)).toBeUndefined(); expect(tabKinds(store)).toEqual(["terminal", "agent", "agent"]); }); @@ -4715,9 +4776,9 @@ describe("compact workspace sheet", () => { intent: "reveal", parentTabId: childSheetTabId ?? undefined, }); - expect(store.getState().sheetByWorkspace[workspaceKey]?.parentTabId).toBe(rootTabId); + expect(topSheet(store)?.parentTabId).toBe(rootTabId); - store.getState().openSheetAsTab(workspaceKey); + store.getState().openSheetAsTab(workspaceKey, fileSheetTabId ?? ""); const layout = store.getState().layoutByWorkspace[workspaceKey]; expect(layout.parentTabIdByTabId?.[fileSheetTabId ?? ""]).toBe(rootTabId); }); @@ -4746,7 +4807,7 @@ describe("compact workspace sheet", () => { intent: "reveal", parentTabId: openChildSheet(), }); - expect(store.getState().sheetByWorkspace[workspaceKey]).toBeUndefined(); + expect(topSheet(store)).toBeUndefined(); let layout = store.getState().layoutByWorkspace[workspaceKey]; expect(findPaneById(layout.root, "main")?.focusedTabId).toBe(terminalTabId); @@ -4756,7 +4817,7 @@ describe("compact workspace sheet", () => { intent: "reveal", parentTabId: openChildSheet(), }); - expect(store.getState().sheetByWorkspace[workspaceKey]).toBeUndefined(); + expect(topSheet(store)).toBeUndefined(); layout = store.getState().layoutByWorkspace[workspaceKey]; expect(findPaneById(layout.root, "main")?.focusedTabId).toBe(secondRootTabId); expect(layout.parentTabIdByTabId?.[secondRootTabId ?? ""]).toBe(rootTabId); @@ -4798,22 +4859,47 @@ describe("compact workspace sheet", () => { }); function sheetTabId(store: ReturnType): string | null { - return store.getState().sheetByWorkspace[workspaceKey]?.tab.tabId ?? null; + return topSheet(store)?.tab.tabId ?? null; } - it("opens the next sheet target as a tab under a modified sheet", () => { + it("stacks the next sheet target over a modified sheet", () => { const store = createCompactStore(); - const modifiedSheetTabId = openModifiedFileSheet(store); + openModifiedFileSheet(store); const nextTarget = { kind: "file" as const, path: "src/other.ts" }; const nextTabId = store .getState() .openTab({ workspaceKey, target: nextTarget, intent: "reveal" }); + expect(sheetTabId(store)).toBe(nextTabId); + expect(sheetTargets(store)).toEqual([fileTarget, nextTarget]); + expect(store.getState().sheetsByWorkspace[workspaceKey]?.[0]?.tab.state).toEqual({ + scrollTop: 40, + }); + }); + + it("keeps a covered sheet in place under a modified sheet instead of reordering", () => { + const store = createCompactStore(); + const otherTarget = { kind: "file" as const, path: "src/other.ts" }; + const otherTabId = store + .getState() + .openTab({ workspaceKey, target: otherTarget, intent: "reveal" }); + const modifiedSheetTabId = openModifiedFileSheet(store); + const unmodifiedTopTarget = { kind: "file" as const, path: "src/third.ts" }; + store.getState().openTab({ workspaceKey, target: unmodifiedTopTarget, intent: "reveal" }); + const focusedBefore = focusedTabId(store); + + const tabId = store + .getState() + .openTab({ workspaceKey, target: otherTarget, intent: "reveal" }); + + expect(tabId).toBe(otherTabId); + // Moving a sheet would remount its panel, so the stack keeps its order: the modified sheet + // stays on top of the one revealed, and only the unmodified sheet above them closes. + expect(sheetTargets(store)).toEqual([otherTarget, fileTarget]); expect(sheetTabId(store)).toBe(modifiedSheetTabId); - expect(store.getState().sheetByWorkspace[workspaceKey]?.tab.state).toEqual({ scrollTop: 40 }); - expect(stripTab(store, nextTabId ?? "")).toMatchObject({ target: nextTarget }); - expect(focusedTabId(store)).toBe(nextTabId); + expect(stripTab(store, tabId ?? "")).toBeNull(); + expect(focusedTabId(store)).toBe(focusedBefore); }); it("opens a tab target under a modified sheet without closing it", () => { @@ -4853,23 +4939,6 @@ describe("compact workspace sheet", () => { expect(tabKinds(store)).toEqual(["terminal", "terminal"]); }); - it("replaces an unmodified sheet with the next sheet target", () => { - const store = createCompactStore(); - store.getState().openTab({ workspaceKey, target: fileTarget, intent: "reveal" }); - - store.getState().openTab({ - workspaceKey, - target: { kind: "file", path: "src/other.ts" }, - intent: "reveal", - }); - - expect(store.getState().sheetByWorkspace[workspaceKey]?.tab.target).toEqual({ - kind: "file", - path: "src/other.ts", - }); - expect(tabKinds(store)).toEqual(["terminal"]); - }); - it("closes an unmodified sheet when another tab is chosen", () => { const store = createCompactStore(); const secondTabId = store.getState().openTab({ @@ -4913,10 +4982,38 @@ describe("compact workspace sheet", () => { }; store.getState().reconcileTabs(workspaceKey, { ...snapshot, agentsHydrated: false }); - expect(store.getState().sheetByWorkspace[workspaceKey]).toBeDefined(); + expect(topSheet(store)).toBeDefined(); store.getState().reconcileTabs(workspaceKey, { ...snapshot, agentsHydrated: true }); - expect(store.getState().sheetByWorkspace[workspaceKey]).toBeUndefined(); + expect(topSheet(store)).toBeUndefined(); + }); + + it("drops a departed agent's sheet from the middle of the stack", () => { + seedAgents([ + { id: "root", parentAgentId: null, workspaceId: "sheet-ws" }, + { id: "child", parentAgentId: "root", workspaceId: "sheet-ws" }, + ]); + const store = createCompactStore(); + const nextTarget = { kind: "file" as const, path: "src/other.ts" }; + store.getState().openTab({ workspaceKey, target: fileTarget, intent: "reveal" }); + store.getState().openTab({ + workspaceKey, + target: { kind: "agent", agentId: "child" }, + intent: "reveal", + }); + store.getState().openTab({ workspaceKey, target: nextTarget, intent: "reveal" }); + + store.getState().reconcileTabs(workspaceKey, { + agentsHydrated: true, + terminalsHydrated: false, + activeAgentIds: ["root"], + autoOpenAgentIds: [], + knownTerminalIds: ["term-1"], + standaloneTerminalIds: ["term-1"], + hasActivePendingTerminalCreate: false, + }); + + expect(sheetTargets(store)).toEqual([fileTarget, nextTarget]); }); it("closes the sheet when its agent stops being a subagent, leaving one tab for it", () => { @@ -4941,7 +5038,7 @@ describe("compact workspace sheet", () => { }; store.getState().reconcileTabs(workspaceKey, { ...snapshot, autoOpenAgentIds: [] }); - expect(store.getState().sheetByWorkspace[workspaceKey]?.tab.tabId).toBe(sheetTabId); + expect(topSheet(store)?.tab.tabId).toBe(sheetTabId); seedAgents([ { id: "root", parentAgentId: null, workspaceId: "sheet-ws" }, @@ -4949,7 +5046,7 @@ describe("compact workspace sheet", () => { ]); store.getState().reconcileTabs(workspaceKey, snapshot); - expect(store.getState().sheetByWorkspace[workspaceKey]).toBeUndefined(); + expect(topSheet(store)).toBeUndefined(); const layout = store.getState().layoutByWorkspace[workspaceKey]; expect( collectAllTabs(layout.root).filter( @@ -4975,7 +5072,7 @@ describe("compact workspace sheet", () => { .replaceTab(workspaceKey, sheetTabId ?? "", { kind: "agent", agentId: "child" }); expect(replacedTabId).toBe(sheetTabId); - expect(store.getState().sheetByWorkspace[workspaceKey]).toMatchObject({ + expect(topSheet(store)).toMatchObject({ tab: { tabId: sheetTabId, target: { kind: "agent", agentId: "child" } }, policy: { openAsTab: true }, }); @@ -4992,7 +5089,7 @@ describe("compact workspace sheet", () => { terminalId: "term-2", }); - expect(store.getState().sheetByWorkspace[workspaceKey]).toBeUndefined(); + expect(topSheet(store)).toBeUndefined(); expect(replacedTabId).toBe(sheetTabId); const layout = store.getState().layoutByWorkspace[workspaceKey]; expect(findPaneById(layout.root, "main")?.focusedTabId).toBe(sheetTabId); @@ -5008,12 +5105,12 @@ describe("compact workspace sheet", () => { const received: string[][] = []; const stop = observeOpenWorkspaceAgentIds("server-1", (ids) => received.push(ids), store); - store.getState().openTab({ + const sheetTabId = store.getState().openTab({ workspaceKey, target: { kind: "agent", agentId: "child" }, intent: "reveal", }); - store.getState().closeSheet(workspaceKey); + store.getState().closeTab(workspaceKey, sheetTabId ?? ""); stop(); expect(received).toEqual([[], ["child"], []]); diff --git a/packages/app/src/stores/workspace-layout-store.ts b/packages/app/src/stores/workspace-layout-store.ts index 226265860a..2aea369df6 100644 --- a/packages/app/src/stores/workspace-layout-store.ts +++ b/packages/app/src/stores/workspace-layout-store.ts @@ -111,13 +111,13 @@ export interface OpenWorkspaceTabInput { } /** - * How the app shell lays out a workspace: compact (one tab at a time, plus the sheet), a single + * How the app shell lays out a workspace: compact (one tab at a time, plus sheets), a single * wide pane (touch tablets, which cannot render splits), or split panes. */ export type WorkspaceLayoutMode = "compact" | "single-pane" | "split-panes"; -/** A tab hosted by the compact workspace sheet instead of a pane. */ -export interface WorkspaceSheet { +/** A tab shown in a sheet over the compact workspace instead of in a pane. */ +export interface SheetTab { tab: WorkspaceTab; policy: CompactSheetPolicy; parentTabId: string | null; @@ -126,8 +126,13 @@ export interface WorkspaceSheet { interface WorkspaceLayoutStore { /** Published once by the app shell; callers never pass a form factor to open a tab. */ layoutMode: WorkspaceLayoutMode; - /** At most one sheet tab per workspace. Not persisted: a reload returns to the tab strip. */ - sheetByWorkspace: Record; + /** + * Each workspace's sheet tabs in the order they opened, so the last is the sheet on top. The + * list never reorders: the stack belongs to the sheet primitive, and moving a sheet would remount + * its panel. A workspace with no sheet has no entry. Not persisted: a reload returns to the tab + * strip. + */ + sheetsByWorkspace: Record; layoutByWorkspace: Record; splitSizesByWorkspace: Record>; explorerSidebarWidthByWorkspace: Record; @@ -140,17 +145,16 @@ interface WorkspaceLayoutStore { pullRequestTabAutoOpenedByWorkspace: Record; /** * The one entry point for showing a target. On compact layouts a target whose panel declares - * `compactSheet` opens in the workspace sheet; the returned tab id is the sheet tab's id. + * `compactSheet` opens in a sheet; the returned tab id is the sheet tab's id. */ openTab: (input: OpenWorkspaceTabInput) => string | null; - /** Whether `openTab` with this input would show the target in the sheet. */ + /** Whether `openTab` with this input would show the target in a sheet. */ opensInSheet: ( input: Pick, ) => boolean; setLayoutMode: (mode: WorkspaceLayoutMode) => void; - closeSheet: (workspaceKey: string) => void; - /** Moves the sheet's tab, keeping its tab id, into the focused pane. */ - openSheetAsTab: (workspaceKey: string) => string | null; + /** Moves a sheet's tab, keeping its tab id, into the focused pane. */ + openSheetAsTab: (workspaceKey: string, tabId: string) => string | null; /** Placement resolves lazily so an already acknowledged workspace never creates a side pane. */ autoOpenPullRequestTab: ( workspaceKey: string, @@ -508,12 +512,12 @@ export function selectExplorerSidebarPaneId( /** A workspace's panes give up keyboard focus while focus is parked or the sheet covers them. */ export function selectPaneFocusSuspended( - state: Pick, + state: Pick, workspaceKey: string, ): boolean { return ( Boolean(state.focusRestorationByWorkspace[workspaceKey]?.restorePaneId) || - workspaceKey in state.sheetByWorkspace + workspaceKey in state.sheetsByWorkspace ); } @@ -682,15 +686,63 @@ function attachParentTab(input: { }); } -function withoutSheet( - state: Pick, +const NO_SHEETS: readonly SheetTab[] = []; + +function getSheets( + state: Pick, workspaceKey: string, -): Pick { - if (!(workspaceKey in state.sheetByWorkspace)) { - return { sheetByWorkspace: state.sheetByWorkspace }; +): readonly SheetTab[] { + return state.sheetsByWorkspace[workspaceKey] ?? NO_SHEETS; +} + +function findSheet( + state: Pick, + workspaceKey: string, + tabId: string, +): SheetTab | undefined { + return getSheets(state, workspaceKey).find((sheet) => sheet.tab.tabId === tabId); +} + +function withSheets( + state: Pick, + workspaceKey: string, + sheets: readonly SheetTab[], +): Pick { + if (sheets.length > 0) { + return { sheetsByWorkspace: { ...state.sheetsByWorkspace, [workspaceKey]: sheets } }; } - const { [workspaceKey]: _removed, ...sheetByWorkspace } = state.sheetByWorkspace; - return { sheetByWorkspace }; + if (!(workspaceKey in state.sheetsByWorkspace)) { + return { sheetsByWorkspace: state.sheetsByWorkspace }; + } + const { [workspaceKey]: _removed, ...sheetsByWorkspace } = state.sheetsByWorkspace; + return { sheetsByWorkspace }; +} + +function withoutSheet( + state: Pick, + workspaceKey: string, + tabId: string, +): Pick { + return withSheets( + state, + workspaceKey, + getSheets(state, workspaceKey).filter((sheet) => sheet.tab.tabId !== tabId), + ); +} + +function withSheetTab( + state: Pick, + workspaceKey: string, + tabId: string, + update: (sheet: SheetTab) => SheetTab, +): Pick { + return withSheets( + state, + workspaceKey, + getSheets(state, workspaceKey).map((sheet) => + sheet.tab.tabId === tabId ? update(sheet) : sheet, + ), + ); } function isTargetOpenAsTab(layout: WorkspaceLayout | undefined, target: WorkspaceTabTarget) { @@ -713,41 +765,27 @@ function resolveSheetPolicy( } /** - * The parent a newly opened tab links to. A target opened from inside the sheet names the sheet's - * tab, which the open replaces or closes, so it inherits the sheet's own parent instead. + * The parent a newly opened tab links to. A sheet tab is not in the layout, so a target opened + * from inside a sheet inherits that sheet's own parent instead. */ function resolveOpenParentTabId( - state: Pick, + state: Pick, workspaceKey: string, parentTabId: string | undefined, ): string | null { - const sheet = state.sheetByWorkspace[workspaceKey]; - if (sheet && parentTabId === sheet.tab.tabId) return sheet.parentTabId; - return parentTabId ?? null; -} - -/** A reveal of the resource the sheet already shows keeps the sheet's tab. */ -function sheetKeepsTabFor( - sheet: WorkspaceSheet | undefined, - target: WorkspaceTabTarget, - intent: WorkspaceTabOpenIntent, -): sheet is WorkspaceSheet { - return ( - intent === "reveal" && - sheet !== undefined && - panelResourceKey(sheet.tab.target) === panelResourceKey(target) - ); + if (!parentTabId) return null; + return findSheet(state, workspaceKey, parentTabId)?.parentTabId ?? parentTabId; } function placeTargetInSheet(input: { /** The sheet whose tab the target keeps, if any. */ - kept: WorkspaceSheet | undefined; + kept: SheetTab | undefined; target: WorkspaceTabTarget; intent: WorkspaceTabOpenIntent; policy: CompactSheetPolicy; parentTabId: string | null; state: JsonValue | undefined; -}): WorkspaceSheet { +}): SheetTab { if (input.kept) { return { ...input.kept, tab: { ...input.kept.tab, target: input.target } }; } @@ -766,12 +804,16 @@ function placeTargetInSheet(input: { }; } -/** Moves a workspace's sheet tab into its focused pane, keeping its tab id and state. */ +/** + * Moves one sheet's tab into the workspace's focused pane, keeping its tab id and state. The + * other sheets stay; callers that bring the tab to the front dismiss them. + */ function promoteSheetToTab( state: WorkspaceLayoutStore, workspaceKey: string, + tabId: string, ): { tabId: string; patch: Partial } | null { - const sheet = state.sheetByWorkspace[workspaceKey]; + const sheet = findSheet(state, workspaceKey, tabId); if (!sheet) return null; const { tab } = sheet; const placement = getOpenTabPlacement(state, workspaceKey, tab.target, FOCUSED_PANE_PLACEMENT); @@ -798,7 +840,7 @@ function promoteSheetToTab( return { tabId: result.tabId, patch: { - ...withoutSheet(state, workspaceKey), + ...withoutSheet(state, workspaceKey, tab.tabId), ...withoutFocusRestoration(state, workspaceKey), hiddenAgentIdsByWorkspace: tab.target.kind === "agent" @@ -817,37 +859,55 @@ function promoteSheetToTab( * A sheet holding unsaved work is never implicitly displaced: moving its tab would remount the * panel and drop the work. Only the explicit, guarded close removes it. */ -function sheetHoldsUnsavedWork( - state: Pick, - workspaceKey: string, -): boolean { - const sheet = state.sheetByWorkspace[workspaceKey]; - return sheet !== undefined && isSheetTabModified(workspaceKey, sheet.tab.tabId); +function sheetHoldsUnsavedWork(workspaceKey: string, sheet: SheetTab): boolean { + return isSheetTabModified(workspaceKey, sheet.tab.tabId); } /** - * Where an open lands in the sheet, or null when it opens as a tab. A reveal of the resource the - * sheet shows keeps its tab; any other target never displaces unsaved work and opens as a tab. + * Where an open lands among the sheet tabs, or null when it opens as a tab. A new target goes on + * top. A reveal of a resource a sheet already shows keeps that sheet's tab and uncovers it by + * closing the sheets above it, except ones holding unsaved work, which stay where they are. */ function resolveSheetPlacement( state: WorkspaceLayoutStore, workspaceKey: string, target: WorkspaceTabTarget, intent: WorkspaceTabOpenIntent, -): { policy: CompactSheetPolicy; kept: WorkspaceSheet | undefined } | null { +): { policy: CompactSheetPolicy; keptIndex: number | null } | null { const policy = resolveSheetPolicy(state, workspaceKey, target, intent); if (!policy) return null; - const sheet = state.sheetByWorkspace[workspaceKey]; - if (sheetKeepsTabFor(sheet, target, intent)) return { policy, kept: sheet }; - return sheetHoldsUnsavedWork(state, workspaceKey) ? null : { policy, kept: undefined }; + if (intent !== "reveal") return { policy, keptIndex: null }; + const sheets = getSheets(state, workspaceKey); + const resourceKey = panelResourceKey(target); + const index = sheets.findIndex((sheet) => panelResourceKey(sheet.tab.target) === resourceKey); + return { policy, keptIndex: index === -1 ? null : index }; } -/** Closes the sheet because navigation moved on underneath it, unless it holds unsaved work. */ -function dismissSheet( +/** Closes the sheets because navigation moved on underneath them, except ones with unsaved work. */ +function dismissSheets( + state: Pick, + workspaceKey: string, +): Pick { + return withSheets( + state, + workspaceKey, + getSheets(state, workspaceKey).filter((sheet) => sheetHoldsUnsavedWork(workspaceKey, sheet)), + ); +} + +/** Moves a sheet's tab to the front of the tab strip, dismissing the sheets that would cover it. */ +function openSheetTabInFront( state: WorkspaceLayoutStore, workspaceKey: string, -): Partial { - return sheetHoldsUnsavedWork(state, workspaceKey) ? {} : withoutSheet(state, workspaceKey); + tabId: string, +): { tabId: string; patch: Partial } | null { + const promoted = promoteSheetToTab(state, workspaceKey, tabId); + if (!promoted) return null; + const next = { ...state, ...promoted.patch }; + return { + tabId: promoted.tabId, + patch: { ...promoted.patch, ...dismissSheets(next, workspaceKey) }, + }; } /** @@ -857,10 +917,10 @@ function dismissSheet( */ function sheetAgentNoLongerFits( workspaceKey: string, - sheet: WorkspaceSheet | undefined, + sheet: SheetTab, snapshot: WorkspaceTabSnapshot, ): boolean { - if (sheet?.tab.target.kind !== "agent" || !snapshot.agentsHydrated) return false; + if (sheet.tab.target.kind !== "agent" || !snapshot.agentsHydrated) return false; if (!new Set(snapshot.activeAgentIds).has(sheet.tab.target.agentId)) return true; return resolveCompactSheetPolicy(workspaceKey, sheet.tab.target) === null; } @@ -905,7 +965,7 @@ export function createWorkspaceLayoutStore( return tabId; }, layoutMode: "split-panes", - sheetByWorkspace: {}, + sheetsByWorkspace: {}, layoutByWorkspace: {}, splitSizesByWorkspace: {}, explorerSidebarWidthByWorkspace: {}, @@ -933,17 +993,27 @@ export function createWorkspaceLayoutStore( input.intent, ); if (sheetPlacement) { + const sheets = getSheets(get(), normalizedWorkspaceKey); + const { keptIndex } = sheetPlacement; const sheet = placeTargetInSheet({ - kept: sheetPlacement.kept, + kept: keptIndex === null ? undefined : sheets[keptIndex], target: normalizedTarget, intent: input.intent, policy: sheetPlacement.policy, parentTabId, state: input.state, }); - set((state) => ({ - sheetByWorkspace: { ...state.sheetByWorkspace, [normalizedWorkspaceKey]: sheet }, - })); + const next = + keptIndex === null + ? [...sheets, sheet] + : sheets.flatMap((existing, index) => { + if (index === keptIndex) return [sheet]; + if (index < keptIndex) return [existing]; + return sheetHoldsUnsavedWork(normalizedWorkspaceKey, existing) + ? [existing] + : []; + }); + set((state) => withSheets(state, normalizedWorkspaceKey, next)); return sheet.tab.tabId; } const placement = getOpenTabPlacement( @@ -990,7 +1060,7 @@ export function createWorkspaceLayoutStore( set((state) => ({ ...withoutFocusRestoration(state, normalizedWorkspaceKey), // A tab brought to the front dismisses the sheet over it. - ...(input.intent === "background" ? {} : dismissSheet(state, normalizedWorkspaceKey)), + ...(input.intent === "background" ? {} : dismissSheets(state, normalizedWorkspaceKey)), hiddenAgentIdsByWorkspace: normalizedTarget.kind !== "agent" ? state.hiddenAgentIdsByWorkspace @@ -1032,24 +1102,25 @@ export function createWorkspaceLayoutStore( set((state) => { if (state.layoutMode === mode) return state; if (mode === "compact") return { layoutMode: mode }; - // Widening keeps whatever the user had open in the sheet as an ordinary tab. + // Widening keeps whatever the user had open in sheets as ordinary tabs. const next: WorkspaceLayoutStore = { ...state, layoutMode: mode }; - for (const workspaceKey of Object.keys(state.sheetByWorkspace)) { - const promoted = promoteSheetToTab(next, workspaceKey); - Object.assign(next, promoted?.patch ?? withoutSheet(next, workspaceKey)); + for (const [workspaceKey, sheets] of Object.entries(state.sheetsByWorkspace)) { + for (const sheet of sheets) { + const promoted = promoteSheetToTab(next, workspaceKey, sheet.tab.tabId); + Object.assign( + next, + promoted?.patch ?? withoutSheet(next, workspaceKey, sheet.tab.tabId), + ); + } } return next; }); }, - closeSheet: (workspaceKey) => { + openSheetAsTab: (workspaceKey, tabId) => { const normalizedWorkspaceKey = trimNonEmpty(workspaceKey); - if (!normalizedWorkspaceKey) return; - set((state) => withoutSheet(state, normalizedWorkspaceKey)); - }, - openSheetAsTab: (workspaceKey) => { - const normalizedWorkspaceKey = trimNonEmpty(workspaceKey); - if (!normalizedWorkspaceKey) return null; - const promoted = promoteSheetToTab(get(), normalizedWorkspaceKey); + const normalizedTabId = trimNonEmpty(tabId); + if (!normalizedWorkspaceKey || !normalizedTabId) return null; + const promoted = openSheetTabInFront(get(), normalizedWorkspaceKey, normalizedTabId); if (!promoted) return null; set(promoted.patch); return promoted.tabId; @@ -1173,8 +1244,8 @@ export function createWorkspaceLayoutStore( } set((state) => { - if (state.sheetByWorkspace[normalizedWorkspaceKey]?.tab.tabId === normalizedTabId) { - return withoutSheet(state, normalizedWorkspaceKey); + if (findSheet(state, normalizedWorkspaceKey, normalizedTabId)) { + return withoutSheet(state, normalizedWorkspaceKey, normalizedTabId); } const layout = getWorkspaceLayout(state.layoutByWorkspace, normalizedWorkspaceKey); const explorerSidebarPaneId = resolveExplorerSidebarPaneId( @@ -1283,8 +1354,8 @@ export function createWorkspaceLayoutStore( return { ...withoutFocusRestoration(state, normalizedWorkspaceKey), - // Choosing a tab dismisses the sheet that covers it. - ...dismissSheet(state, normalizedWorkspaceKey), + // Choosing a tab dismisses the sheets that cover it. + ...dismissSheets(state, normalizedWorkspaceKey), layoutByWorkspace: { ...state.layoutByWorkspace, [normalizedWorkspaceKey]: nextLayout, @@ -1308,8 +1379,8 @@ export function createWorkspaceLayoutStore( }); return nextLayout ? { - // Choosing a tab dismisses the sheet that covers it. - ...dismissSheet(state, normalizedWorkspaceKey), + // Choosing a tab dismisses the sheets that cover it. + ...dismissSheets(state, normalizedWorkspaceKey), layoutByWorkspace: { ...state.layoutByWorkspace, [normalizedWorkspaceKey]: nextLayout, @@ -1323,29 +1394,27 @@ export function createWorkspaceLayoutStore( const normalizedTabId = trimNonEmpty(tabId); const normalizedTarget = normalizeWorkspaceTabTarget(target); if (!normalizedWorkspaceKey || !normalizedTabId || !normalizedTarget) return null; - const sheet = get().sheetByWorkspace[normalizedWorkspaceKey]; - if (sheet?.tab.tabId === normalizedTabId) { + if (findSheet(get(), normalizedWorkspaceKey, normalizedTabId)) { const policy = resolveCompactSheetPolicy(normalizedWorkspaceKey, normalizedTarget); - const replaced: WorkspaceSheet = { - ...sheet, - policy: policy ?? sheet.policy, - tab: { - ...sheet.tab, - target: normalizedTarget, - ...(tabState !== undefined ? { state: tabState } : {}), - }, - }; const next: WorkspaceLayoutStore = { ...get(), - sheetByWorkspace: { ...get().sheetByWorkspace, [normalizedWorkspaceKey]: replaced }, + ...withSheetTab(get(), normalizedWorkspaceKey, normalizedTabId, (sheet) => ({ + ...sheet, + policy: policy ?? sheet.policy, + tab: { + ...sheet.tab, + target: normalizedTarget, + ...(tabState !== undefined ? { state: tabState } : {}), + }, + })), }; if (policy) { - set({ sheetByWorkspace: next.sheetByWorkspace }); + set({ sheetsByWorkspace: next.sheetsByWorkspace }); return normalizedTabId; } - // A target the sheet does not host becomes the tab it would have opened as. - const promoted = promoteSheetToTab(next, normalizedWorkspaceKey); - set(promoted?.patch ?? withoutSheet(next, normalizedWorkspaceKey)); + // A target sheets do not host becomes the tab it would have opened as. + const promoted = openSheetTabInFront(next, normalizedWorkspaceKey, normalizedTabId); + set(promoted?.patch ?? withoutSheet(next, normalizedWorkspaceKey, normalizedTabId)); return promoted?.tabId ?? null; } const result = replaceTabTargetInLayout({ @@ -1378,18 +1447,14 @@ export function createWorkspaceLayoutStore( const normalizedTabId = trimNonEmpty(tabId); if (!normalizedWorkspaceKey || !normalizedTabId) return; set((state) => { - const sheet = state.sheetByWorkspace[normalizedWorkspaceKey]; - if (sheet?.tab.tabId === normalizedTabId) { - const { state: _previous, ...tab } = sheet.tab; - return { - sheetByWorkspace: { - ...state.sheetByWorkspace, - [normalizedWorkspaceKey]: { - ...sheet, - tab: tabState === undefined ? tab : { ...tab, state: tabState }, - }, - }, - }; + if (findSheet(state, normalizedWorkspaceKey, normalizedTabId)) { + return withSheetTab(state, normalizedWorkspaceKey, normalizedTabId, (sheet) => { + const { state: _previous, ...tab } = sheet.tab; + return { + ...sheet, + tab: tabState === undefined ? tab : { ...tab, state: tabState }, + }; + }); } const layout = setTabStateInLayout({ layout: getWorkspaceLayout(state.layoutByWorkspace, normalizedWorkspaceKey), @@ -1485,11 +1550,11 @@ export function createWorkspaceLayoutStore( ); } } - const sheetAgentGone = sheetAgentNoLongerFits( - normalizedWorkspaceKey, - state.sheetByWorkspace[normalizedWorkspaceKey], - snapshot, + const sheets = getSheets(state, normalizedWorkspaceKey); + const fittingSheets = sheets.filter( + (sheet) => !sheetAgentNoLongerFits(normalizedWorkspaceKey, sheet, snapshot), ); + const sheetAgentGone = fittingSheets.length !== sheets.length; if ( state.layoutByWorkspace[normalizedWorkspaceKey] && nextLayout === rawLayout && @@ -1500,7 +1565,7 @@ export function createWorkspaceLayoutStore( } return { - ...(sheetAgentGone ? withoutSheet(state, normalizedWorkspaceKey) : {}), + ...(sheetAgentGone ? withSheets(state, normalizedWorkspaceKey, fittingSheets) : {}), pinnedAgentIdsByWorkspace, layoutByWorkspace: { ...state.layoutByWorkspace, @@ -2006,7 +2071,7 @@ export function createWorkspaceLayoutStore( normalizedWorkspaceKey in state.explorerSidebarPaneIdByWorkspace || normalizedWorkspaceKey in state.sidePaneIdByWorkspace || normalizedWorkspaceKey in state.pullRequestTabAutoOpenedByWorkspace || - normalizedWorkspaceKey in state.sheetByWorkspace; + normalizedWorkspaceKey in state.sheetsByWorkspace; if (!hasAny) { return state; } @@ -2035,7 +2100,7 @@ export function createWorkspaceLayoutStore( const { [normalizedWorkspaceKey]: _sidePane, ...sidePaneIdByWorkspace } = state.sidePaneIdByWorkspace; return { - ...withoutSheet(state, normalizedWorkspaceKey), + ...withSheets(state, normalizedWorkspaceKey, NO_SHEETS), pullRequestTabAutoOpenedByWorkspace, layoutByWorkspace, splitSizesByWorkspace, @@ -2152,14 +2217,16 @@ export function observeOpenWorkspaceAgentIds( store = useWorkspaceLayoutStore, ): () => void { let previous: string[] | undefined; - const publish = (state: Pick) => { + const publish = ( + state: Pick, + ) => { const ids = new Set(); const tabsByWorkspace = [ ...Object.entries(state.layoutByWorkspace).map( ([workspaceKey, layout]) => [workspaceKey, collectAllTabs(layout.root)] as const, ), - ...Object.entries(state.sheetByWorkspace).map( - ([workspaceKey, sheet]) => [workspaceKey, [sheet.tab]] as const, + ...Object.entries(state.sheetsByWorkspace).map( + ([workspaceKey, sheets]) => [workspaceKey, sheets.map((sheet) => sheet.tab)] as const, ), ]; for (const [workspaceKey, tabs] of tabsByWorkspace) { @@ -2177,7 +2244,7 @@ export function observeOpenWorkspaceAgentIds( const unsubscribe = store.subscribe((state, before) => { if ( state.layoutByWorkspace !== before.layoutByWorkspace || - state.sheetByWorkspace !== before.sheetByWorkspace + state.sheetsByWorkspace !== before.sheetsByWorkspace ) { publish(state); } diff --git a/packages/app/src/styles/density.ts b/packages/app/src/styles/density.ts index 5b452bcb93..2383685d24 100644 --- a/packages/app/src/styles/density.ts +++ b/packages/app/src/styles/density.ts @@ -2,7 +2,7 @@ import { isCompactBreakpoint } from "@/constants/layout"; import { ICON_SIZE, type Theme } from "@/styles/theme"; /** - * Density sizes for surfaces that opt into touch sizing: rows, icons, and text grow on compact + * Density sizes for surfaces that opt into touch sizing: rows and icons grow on compact * layouts and keep their desktop sizes from the `md` breakpoint up. Plain theme tokens stay * desktop-sized everywhere, so a surface migrates by swapping its sizes for these. * @@ -11,10 +11,8 @@ import { ICON_SIZE, type Theme } from "@/styles/theme"; */ export type DensityIconSize = keyof typeof ICON_SIZE; -type TextSize = "sm" | "base"; const COMPACT_ICON_SIZE: Record = { xs: 14, sm: 18, md: 20, lg: 24 }; -const COMPACT_TEXT_SIZE: Record = { sm: "base", base: "lg" }; // Compact layouts end where `md` begins; see `isCompactBreakpoint`. function byLayout(compact: T, desktop: T) { @@ -25,9 +23,7 @@ export const density = { /** A list row such as a sidebar entry. */ rowHeight: byLayout(44, 36), /** A row in a tight group, such as the sidebar's navigation rows. */ - tightRowHeight: byLayout(40, 28), - /** The line height of a row's `base` text; slots that align to its first line share it. */ - rowLineHeight: byLayout(22, 20), + tightRowHeight: byLayout(36, 28), /** A square icon-only button that sits in a row or toolbar. */ iconButton: byLayout(44, 28), }; @@ -37,10 +33,6 @@ export function densityIconBox(size: DensityIconSize) { return byLayout(COMPACT_ICON_SIZE[size], ICON_SIZE[size]); } -export function densityFontSize(theme: Theme, size: TextSize) { - return byLayout(theme.fontSize[COMPACT_TEXT_SIZE[size]], theme.fontSize[size]); -} - export function densityIconSize(rt: { breakpoint?: string }, size: DensityIconSize): number { return isCompactBreakpoint(rt.breakpoint) ? COMPACT_ICON_SIZE[size] : ICON_SIZE[size]; } diff --git a/packages/app/src/subagents/index.ts b/packages/app/src/subagents/index.ts index e93d62eb2d..9c6227a34f 100644 --- a/packages/app/src/subagents/index.ts +++ b/packages/app/src/subagents/index.ts @@ -9,3 +9,4 @@ export { type ArchiveFinishedStatus, type UseArchiveFinishedSubagentsInput, } from "./use-archive-finished"; +export { useSubagentOpensInSheet } from "./opens-in-sheet"; diff --git a/packages/app/src/subagents/opens-in-sheet.test.tsx b/packages/app/src/subagents/opens-in-sheet.test.tsx new file mode 100644 index 0000000000..0792091135 --- /dev/null +++ b/packages/app/src/subagents/opens-in-sheet.test.tsx @@ -0,0 +1,133 @@ +/** + * @vitest-environment jsdom + */ +import type { DaemonClient } from "@getpaseo/client/internal/daemon-client"; +import { act, renderHook } from "@testing-library/react"; +import { afterEach, describe, expect, it, vi } from "vitest"; +import { useSessionStore, type Agent } from "@/stores/session-store"; +import { useWorkspaceLayoutStore } from "@/stores/workspace-layout-store"; +import { buildWorkspaceTabPersistenceKey } from "@/workspace-tabs/model"; +import { useSubagentOpensInSheet } from "./opens-in-sheet"; +import { selectSubagentsForParent, type SubagentRow } from "./select"; + +vi.mock("@react-native-async-storage/async-storage", () => { + const storage = new Map(); + return { + default: { + getItem: vi.fn(async (key: string) => storage.get(key) ?? null), + setItem: vi.fn(async (key: string, value: string) => { + storage.set(key, value); + }), + removeItem: vi.fn(async (key: string) => { + storage.delete(key); + }), + }, + }; +}); + +const SERVER_ID = "server-1"; +const WORKSPACE_ID = "ws-main"; +const AGENT_TIMESTAMP = new Date("2026-04-21T10:00:00.000Z"); + +const AGENT_DEFAULTS: Agent = { + serverId: SERVER_ID, + id: "agent", + provider: "codex", + status: "idle", + turn: { phase: "idle", cancellationRequestId: null }, + createdAt: AGENT_TIMESTAMP, + updatedAt: AGENT_TIMESTAMP, + lastUserMessageAt: null, + lastActivityAt: AGENT_TIMESTAMP, + capabilities: { + supportsStreaming: true, + supportsSessionPersistence: true, + supportsDynamicModes: true, + supportsMcpServers: true, + supportsReasoningStream: true, + supportsToolInvocations: true, + }, + currentModeId: null, + availableModes: [], + pendingPermissions: [], + persistence: null, + runtimeInfo: undefined, + lastUsage: undefined, + lastError: null, + title: "Agent", + cwd: "/repo/worktree", + workspaceId: WORKSPACE_ID, + model: null, + features: undefined, + thinkingOptionId: undefined, + requiresAttention: false, + attentionReason: null, + attentionTimestamp: null, + archivedAt: null, + parentAgentId: null, + labels: {}, + projectPlacement: null, +}; + +const workspaceKey = buildWorkspaceTabPersistenceKey({ + serverId: SERVER_ID, + workspaceId: WORKSPACE_ID, +}); +if (!workspaceKey) throw new Error("workspace key"); + +function seedParentWithChild(): SubagentRow { + const parent: Agent = { ...AGENT_DEFAULTS, id: "parent", title: "Parent" }; + const child: Agent = { ...AGENT_DEFAULTS, id: "child", title: "Child", parentAgentId: "parent" }; + useSessionStore.getState().initializeSession(SERVER_ID, null as unknown as DaemonClient); + useSessionStore.getState().setAgents( + SERVER_ID, + new Map([ + [parent.id, parent], + [child.id, child], + ]), + ); + const [row] = selectSubagentsForParent( + useSessionStore.getState(), + { serverId: SERVER_ID, parentAgentId: "parent" }, + new Set(), + ); + if (!row) throw new Error("child row"); + return row; +} + +afterEach(() => { + useSessionStore.getState().clearSession(SERVER_ID); + useWorkspaceLayoutStore.setState({ + layoutMode: "split-panes", + layoutByWorkspace: {}, + sheetsByWorkspace: {}, + hiddenAgentIdsByWorkspace: {}, + pinnedAgentIdsByWorkspace: {}, + }); +}); + +describe("useSubagentOpensInSheet", () => { + it("re-renders the row's answer as the child's tab opens and closes", () => { + const row = seedParentWithChild(); + const store = useWorkspaceLayoutStore.getState(); + store.setLayoutMode("compact"); + const target = { kind: "agent", agentId: "child" } as const; + + // The row renders its answer, as the track does, so a stale render is a stale answer. + const { result } = renderHook(() => useSubagentOpensInSheet(workspaceKey)(row)); + expect(result.current).toBe(true); + + let tabId: string | null = null; + act(() => { + const sheetTabId = store.openTab({ workspaceKey, target, intent: "reveal" }); + tabId = sheetTabId ? store.openSheetAsTab(workspaceKey, sheetTabId) : null; + }); + expect(tabId).not.toBeNull(); + expect(result.current).toBe(false); + + act(() => { + store.closeTab(workspaceKey, tabId ?? ""); + }); + expect(result.current).toBe(true); + }); +}); diff --git a/packages/app/src/subagents/opens-in-sheet.ts b/packages/app/src/subagents/opens-in-sheet.ts new file mode 100644 index 0000000000..26432ea039 --- /dev/null +++ b/packages/app/src/subagents/opens-in-sheet.ts @@ -0,0 +1,29 @@ +import { useWorkspaceLayoutStore } from "@/stores/workspace-layout-store"; +import type { WorkspaceTabTarget } from "@/workspace-tabs/model"; +import type { SubagentRow } from "./select"; + +/** The workspace target a subagent row opens. */ +export function subagentRowTarget(row: SubagentRow): WorkspaceTabTarget { + return row.kind === "provider" + ? { kind: "provider_subagent", parentAgentId: row.parentAgentId, subagentId: row.id } + : { kind: "agent", agentId: row.id }; +} + +/** Answers, per subagent row, whether opening it in this workspace shows a sheet rather than a tab. */ +export function useSubagentOpensInSheet( + workspaceKey: string | null, +): (row: SubagentRow) => boolean { + // The rows render the answer, so this subscribes to what the answer reads: the layout mode and + // the workspace's tabs. A subagent already open as a tab reveals that tab instead of a sheet, + // and a row rendered while that tab existed must re-render once it closes, or choosing the row + // would still close the list it sits in. + useWorkspaceLayoutStore((state) => state.layoutMode); + useWorkspaceLayoutStore((state) => + workspaceKey ? state.layoutByWorkspace[workspaceKey] : undefined, + ); + return (row) => + workspaceKey !== null && + useWorkspaceLayoutStore + .getState() + .opensInSheet({ workspaceKey, target: subagentRowTarget(row), intent: "reveal" }); +} diff --git a/packages/app/src/subagents/track.tsx b/packages/app/src/subagents/track.tsx index 601030562f..c1834587d2 100644 --- a/packages/app/src/subagents/track.tsx +++ b/packages/app/src/subagents/track.tsx @@ -35,6 +35,11 @@ export interface SubagentsTrackProps { rows: SubagentRow[]; onOpenSubagent: (id: string) => void; onOpenProviderSubagent: (parentAgentId: string, subagentId: string) => void; + /** + * Whether opening this row shows it in a sheet. A sheet stacks over the list and uncovers it on + * close, so the list stays open; a tab replaces the list's pane, so choosing it ends the list. + */ + opensInSheet: (row: SubagentRow) => boolean; onArchiveSubagent: (id: string) => void; onArchiveFinished?: () => void; archiveFinishedStatus?: ArchiveFinishedStatus; @@ -63,6 +68,7 @@ export function SubagentsTrack({ rows, onOpenSubagent, onOpenProviderSubagent, + opensInSheet, onArchiveSubagent, onArchiveFinished, archiveFinishedStatus = IDLE_ARCHIVE_FINISHED_STATUS, @@ -103,6 +109,7 @@ export function SubagentsTrack({ serverId={serverId} onOpenSubagent={onOpenSubagent} onOpenProviderSubagent={onOpenProviderSubagent} + opensInSheet={opensInSheet(row)} onArchiveSubagent={onArchiveSubagent} onDetachSubagent={onDetachSubagent} /> @@ -174,6 +181,7 @@ interface SubagentsTrackRowProps { row: SubagentRow; onOpenSubagent: (id: string) => void; onOpenProviderSubagent: (parentAgentId: string, subagentId: string) => void; + opensInSheet: boolean; onArchiveSubagent: (id: string) => void; onDetachSubagent?: (id: string) => void; } @@ -183,6 +191,7 @@ function SubagentsTrackRow({ row, onOpenSubagent, onOpenProviderSubagent, + opensInSheet, onArchiveSubagent, onDetachSubagent, }: SubagentsTrackRowProps): ReactElement { @@ -245,6 +254,7 @@ function SubagentsTrackRow({ {renderRow} diff --git a/packages/app/src/utils/assistant-markdown-image-source.test.ts b/packages/app/src/utils/assistant-markdown-image-source.test.ts new file mode 100644 index 0000000000..edc02a4eb7 --- /dev/null +++ b/packages/app/src/utils/assistant-markdown-image-source.test.ts @@ -0,0 +1,58 @@ +import { mkdir, mkdtemp, readFile, rm, writeFile } from "node:fs/promises"; +import os from "node:os"; +import path from "node:path"; +import { afterEach, beforeEach, describe, expect, it } from "vitest"; +import { localFileSourceToPath } from "@/attachments/utils"; +import { createAssistantMarkdownParser } from "./assistant-markdown-parser"; +import { resolveAssistantImageSource } from "./assistant-image-source"; + +describe("local assistant Markdown images", () => { + let workspaceRoot: string; + const imageBytes = Buffer.from( + "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8DwHwAFBQIAX8jx0gAAAABJRU5ErkJggg==", + "base64", + ); + + beforeEach(async () => { + workspaceRoot = await mkdtemp(path.join(os.tmpdir(), "assistant-markdown-image-")); + await mkdir(path.join(workspaceRoot, "My Apps", "Мои"), { recursive: true }); + await writeFile(path.join(workspaceRoot, "My Apps", "Мои", "test.png"), imageBytes); + await writeFile(path.join(workspaceRoot, "literal%20name.png"), imageBytes); + }); + + afterEach(async () => { + await rm(workspaceRoot, { recursive: true, force: true }); + }); + + it.each([ + "absolute angle", + "absolute encoded", + "relative angle", + "relative encoded", + "file URI", + "literal percent", + ])("reads the actual image for the %s destination", async (form) => { + const absolute = path.join(workspaceRoot, "My Apps", "Мои", "test.png"); + const destinations: Record = { + "absolute angle": `<${absolute}>`, + "absolute encoded": encodeURI(absolute), + "relative angle": "", + "relative encoded": encodeURI("My Apps/Мои/test.png"), + "file URI": `file://${encodeURI(absolute)}`, + "literal percent": `${workspaceRoot}/literal%2520name.png`, + }; + const tokens = createAssistantMarkdownParser().parseInline( + `![test](${destinations[form]})`, + {}, + ); + const image = tokens + .flatMap((token) => token.children ?? []) + .find((token) => token.type === "image"); + expect(image).toBeDefined(); + const source = localFileSourceToPath(image!.attrGet("src")!, { decodeHref: true }); + const target = resolveAssistantImageSource({ source, workspaceRoot }); + expect(target?.kind).toBe("file_rpc"); + if (target?.kind !== "file_rpc") throw new Error("Expected a local image read target"); + await expect(readFile(path.resolve(target.cwd, target.path))).resolves.toEqual(imageBytes); + }); +}); diff --git a/packages/app/src/workspace-tabs/open-beside.test.ts b/packages/app/src/workspace-tabs/open-beside.test.ts index ac181eeb75..9e80745db8 100644 --- a/packages/app/src/workspace-tabs/open-beside.test.ts +++ b/packages/app/src/workspace-tabs/open-beside.test.ts @@ -27,7 +27,7 @@ const WORKSPACE_KEY = "server-1:workspace-1"; beforeEach(() => { useWorkspaceLayoutStore.setState({ layoutMode: "split-panes", - sheetByWorkspace: {}, + sheetsByWorkspace: {}, layoutByWorkspace: {}, explorerSidebarPaneIdByWorkspace: {}, sidePaneIdByWorkspace: {}, @@ -56,7 +56,7 @@ describe("openPreferredWorkspacePreview", () => { }); const state = useWorkspaceLayoutStore.getState(); - expect(state.sheetByWorkspace[WORKSPACE_KEY]?.tab).toMatchObject({ + expect(state.sheetsByWorkspace[WORKSPACE_KEY]?.at(-1)?.tab).toMatchObject({ tabId, target: { kind: "file", path: "src/preview.ts" }, }); @@ -96,7 +96,7 @@ describe("previews under a sheet with unsaved work", () => { }); } - it("reuses one preview tab instead of adding a tab per link", () => { + it("stacks link previews over the sheet instead of dropping its unsaved work", () => { const store = useWorkspaceLayoutStore.getState(); store.openTab({ workspaceKey: WORKSPACE_KEY, @@ -114,18 +114,17 @@ describe("previews under a sheet with unsaved work", () => { { modified: true }, ); - const firstPreviewTabId = previewFile("src/first.ts"); - const secondPreviewTabId = previewFile("src/second.ts"); + previewFile("src/first.ts"); + previewFile("src/second.ts"); const state = useWorkspaceLayoutStore.getState(); - expect(state.sheetByWorkspace[WORKSPACE_KEY]?.tab.target).toEqual(sheetTarget); - expect(secondPreviewTabId).toBe(firstPreviewTabId); - const root = state.layoutByWorkspace[WORKSPACE_KEY].root; - const tabsById = new Map(collectAllTabs(root).map((tab) => [tab.tabId, tab.target])); - expect(findPaneById(root, "main")?.tabIds.map((tabId) => tabsById.get(tabId))).toEqual([ - { kind: "terminal", terminalId: "term-1" }, + expect(state.sheetsByWorkspace[WORKSPACE_KEY]?.map((sheet) => sheet.tab.target)).toEqual([ + sheetTarget, + { kind: "file", path: "src/first.ts" }, { kind: "file", path: "src/second.ts" }, ]); + const root = state.layoutByWorkspace[WORKSPACE_KEY].root; + expect(findPaneById(root, "main")?.tabIds).toHaveLength(1); }); }); diff --git a/packages/app/test-stubs/gorhom-bottom-sheet.ts b/packages/app/test-stubs/gorhom-bottom-sheet.ts index 784a7569ff..ee27421efd 100644 --- a/packages/app/test-stubs/gorhom-bottom-sheet.ts +++ b/packages/app/test-stubs/gorhom-bottom-sheet.ts @@ -3,11 +3,13 @@ // to keep the module graph importable. const Stub = () => null; const PassThrough = ({ children }: { children?: unknown }) => children; +const sharedValue = (value: unknown) => ({ get: () => value }); export default Stub; export const BottomSheetModal = Stub; export const BottomSheetModalProvider = PassThrough; export const BottomSheetBackdrop = Stub; +export const BottomSheetHandle = Stub; export const BottomSheetScrollView = PassThrough; export const BottomSheetView = PassThrough; export const BottomSheetTextInput = Stub; @@ -16,10 +18,27 @@ export function useBottomSheetModal(): never { throw new Error("Modal stack interactions require the real Gorhom provider in browser E2E tests"); } +// A sheet host scope only redirects where sheets draw; with no sheet drawn there is nothing to host. +export function useBottomSheet(): never { + throw new Error("useBottomSheet is unavailable in tests"); +} +export const BottomSheetModalInternalProvider = PassThrough; +export const INITIAL_CONTAINER_LAYOUT = { + height: 0, + offset: { top: 0, bottom: 0, left: 0, right: 0 }, +}; +export function useBottomSheetModalInternal() { + return { + hostName: "stub", + containerLayoutState: sharedValue(INITIAL_CONTAINER_LAYOUT), + mountSheet: () => undefined, + unmountSheet: () => undefined, + willUnmountSheet: () => undefined, + }; +} + // The app imports the internal layout values to compute the visible sheet body. Browser unit tests // never render the native sheet, but Vite still validates this module's export surface. -const sharedValue = (value: unknown) => ({ get: () => value }); - export const KEYBOARD_STATUS = { SHOWN: "SHOWN" }; export function useBottomSheetInternal() { return { diff --git a/packages/server/package.json b/packages/server/package.json index beffa3b4ce..a69a2c3c2a 100644 --- a/packages/server/package.json +++ b/packages/server/package.json @@ -89,7 +89,7 @@ "speech:transcribe:local": "tsx scripts/transcribe-local-wav.ts", "test": "npm run test:unit && npm run test:integration", "test:unit": "vitest run --fileParallelism --exclude \"**/*.e2e.test.ts\"", - "test:integration": "vitest run --maxWorkers=1 src/server/git-filename-diffs.e2e.test.ts src/server/daemon-e2e/filesystem.e2e.test.ts src/server/daemon-e2e/file-download.e2e.test.ts src/server/daemon-e2e/cli-logs-follow.e2e.test.ts src/server/creation/creation.e2e.test.ts src/server/daemon-e2e/terminal-workspace-sdk.e2e.test.ts src/server/daemon-e2e/models.e2e.test.ts src/server/daemon-e2e/live-preferences.e2e.test.ts src/server/daemon-e2e/oversized-message.e2e.test.ts src/server/agent/model-catalog.e2e.test.ts src/server/plugins/plugin-paseo-api.e2e.test.ts && vitest run --maxWorkers=1 src/server/daemon-e2e/git-operations.e2e.test.ts -t \"merges into\" && vitest run --maxWorkers=1 src/server/session.create-agent-worktree-autoarchive.e2e.test.ts -t \"creates a worktree and auto-archives both\" && vitest run --maxWorkers=1 src/server/agent/providers/opencode-bridge.local.e2e.test.ts -t \"versioned runtime\" && vitest run --maxWorkers=1 src/server/daemon-e2e/relay-transport.e2e.test.ts -t \"oversized attachments\"", + "test:integration": "vitest run --maxWorkers=1 src/server/git-filename-diffs.e2e.test.ts src/server/daemon-e2e/checkout-diff-content.e2e.test.ts src/server/daemon-e2e/filesystem.e2e.test.ts src/server/daemon-e2e/file-download.e2e.test.ts src/server/daemon-e2e/cli-logs-follow.e2e.test.ts src/server/creation/creation.e2e.test.ts src/server/daemon-e2e/terminal-workspace-sdk.e2e.test.ts src/server/daemon-e2e/models.e2e.test.ts src/server/daemon-e2e/live-preferences.e2e.test.ts src/server/daemon-e2e/oversized-message.e2e.test.ts src/server/agent/model-catalog.e2e.test.ts src/server/plugins/plugin-paseo-api.e2e.test.ts && vitest run --maxWorkers=1 src/server/daemon-e2e/git-operations.e2e.test.ts -t \"merges into\" && vitest run --maxWorkers=1 src/server/session.create-agent-worktree-autoarchive.e2e.test.ts -t \"creates a worktree and auto-archives both\" && vitest run --maxWorkers=1 src/server/agent/providers/opencode-bridge.local.e2e.test.ts -t \"versioned runtime\" && vitest run --maxWorkers=1 src/server/daemon-e2e/relay-transport.e2e.test.ts -t \"oversized attachments\"", "test:hub-cli-contract": "vitest run --maxWorkers=1 src/server/hub/hub-cli-contract.test.ts", "test:integration:all": "npm run test:e2e", "test:integration:real": "vitest run real.e2e.test.ts", diff --git a/packages/server/src/executable-resolution/executable-resolution.ts b/packages/server/src/executable-resolution/executable-resolution.ts index 59c218511b..97bb8af3a3 100644 --- a/packages/server/src/executable-resolution/executable-resolution.ts +++ b/packages/server/src/executable-resolution/executable-resolution.ts @@ -1,5 +1,6 @@ import { createRequire } from "node:module"; import { existsSync } from "node:fs"; +import { delimiter, resolve } from "node:path"; import type { ProcessEnvRecord } from "../server/paseo-env.js"; import { execCommand } from "../utils/spawn.js"; import { windowsExecutableResolution } from "./windows.js"; @@ -120,6 +121,29 @@ export function executableExists( return exists(executablePath) ? executablePath : null; } +// PATH lookup that never runs the candidate, unlike findExecutable which probes +// each one with `--version`. A terminal spawn path cannot afford that probe: it +// would execute the profile command once before the terminal even opens. +// `path` overrides the PATH to search, so a caller can resolve against the +// environment its child process will actually get rather than the daemon's own. +export async function findExecutableWithoutProbing( + name: string, + options: { path?: string; cwd: string }, +): Promise { + if (!name) { + return null; + } + const path = + options.path === undefined + ? undefined + : options.path + .split(delimiter) + .map((entry) => resolve(options.cwd, entry)) + .join(delimiter); + const candidates = await enumerateCandidatesViaLibrary(name, { PATH: path }); + return candidates[0] ?? null; +} + export interface ExecutableResolutionOptions { probeTimeoutMs?: number; env?: ProcessEnvRecord; diff --git a/packages/server/src/server/agent/providers/claude/agent.context-switch.real.e2e.test.ts b/packages/server/src/server/agent/providers/claude/agent.context-switch.real.e2e.test.ts new file mode 100644 index 0000000000..f05a6ee271 --- /dev/null +++ b/packages/server/src/server/agent/providers/claude/agent.context-switch.real.e2e.test.ts @@ -0,0 +1,42 @@ +import pino from "pino"; +import { expect, test } from "vitest"; +import { ClaudeAgentClient } from "./agent.js"; +import { collectSessionTurnEvents } from "../test-utils/session-stream-adapter.js"; + +// Explicit real-provider test: run separately from the default suite. +test("uses the active model context window after switching from a 1M model", async () => { + const client = new ClaudeAgentClient({ logger: pino({ level: "silent" }) }); + const session = await client.createSession( + { provider: "claude", cwd: process.cwd(), model: "claude-haiku-4-5" }, + undefined, + { persistSession: false }, + ); + try { + for (const [model, maxTokens] of [ + ["claude-haiku-4-5", 200_000], + ["claude-opus-5-5", 1_000_000], + ["claude-haiku-4-5", 200_000], + ] as const) { + await session.setModel(model); + const events = await collectSessionTurnEvents( + session, + "Reply with exactly: OK. Do not use tools.", + { signal: AbortSignal.timeout(90_000) }, + ); + expect(events).toContainEqual( + expect.objectContaining({ + type: "usage_updated", + usage: expect.objectContaining({ contextWindowMaxTokens: maxTokens }), + }), + ); + expect(events).toContainEqual( + expect.objectContaining({ + type: "turn_completed", + usage: expect.objectContaining({ contextWindowMaxTokens: maxTokens }), + }), + ); + } + } finally { + await session.close(); + } +}, 300_000); diff --git a/packages/server/src/server/agent/providers/claude/agent.context-window.test.ts b/packages/server/src/server/agent/providers/claude/agent.context-window.test.ts index 1f0c5bd36c..84f31779e4 100644 --- a/packages/server/src/server/agent/providers/claude/agent.context-window.test.ts +++ b/packages/server/src/server/agent/providers/claude/agent.context-window.test.ts @@ -6,12 +6,28 @@ import type { ClaudeQueryFactory } from "./query.js"; // A query dependency that speaks the same stream interface as Claude Code. // Each request repeats init so a second turn exercises runtime-limit retention. -function contextQuery(runtimeModel: string, reportedLimit: number): ClaudeQueryFactory { +function contextQuery({ + runtimeModel, + reportedLimit, + modelWindowsByTurn, +}: { + runtimeModel: string; + reportedLimit: number; + modelWindowsByTurn?: Array>; +}): ClaudeQueryFactory { return ({ prompt }) => { let model = runtimeModel; + let turn = 0; const messages = (async function* () { if (typeof prompt === "string") throw new Error("Expected streaming input"); for await (const _message of prompt) { + const modelWindows = modelWindowsByTurn?.[turn] ?? { [model]: reportedLimit }; + turn += 1; + const usageEntries = Object.entries(modelWindows).map(([id, contextWindow]) => [ + id, + { contextWindow }, + ]); + const modelUsage = Object.fromEntries(usageEntries); yield { type: "system", subtype: "init", @@ -41,7 +57,7 @@ function contextQuery(runtimeModel: string, reportedLimit: number): ClaudeQueryF stop_reason: null, total_cost_usd: 0, usage: { input_tokens: 249_950, output_tokens: 50, cache_read_input_tokens: 0 }, - modelUsage: { [model]: { contextWindow: reportedLimit } }, + modelUsage, permission_denials: [], uuid: "context-result", }; @@ -71,7 +87,7 @@ test.each([ async ({ selected, runtime, expected }) => { const client = new ClaudeAgentClient({ logger: createTestLogger(), - queryFactory: contextQuery(runtime, 800_000), + queryFactory: contextQuery({ runtimeModel: runtime, reportedLimit: 800_000 }), resolveBinary: async () => process.execPath, }); const session = await client.createSession({ @@ -110,3 +126,93 @@ test.each([ } }, ); + +test("completed turns use the active model's window after switching both ways", async () => { + const haiku = "claude-haiku-4-5"; + const opus = "claude-opus-5-5"; + const client = new ClaudeAgentClient({ + logger: createTestLogger(), + resolveBinary: async () => process.execPath, + queryFactory: contextQuery({ + runtimeModel: haiku, + reportedLimit: 200_000, + modelWindowsByTurn: [ + { [haiku]: 200_000 }, + { [haiku]: 200_000, [opus]: 1_000_000 }, + { [haiku]: 200_000, [opus]: 1_000_000 }, + ], + }), + }); + const session = await client.createSession({ + provider: "claude", + cwd: process.cwd(), + model: haiku, + }); + try { + for (const [model, limit] of [ + [haiku, 200_000], + [opus, 1_000_000], + [haiku, 200_000], + ] as const) { + await session.setModel(model); + const events = await collectSessionTurnEvents(session, "OK"); + expect(events).toContainEqual( + expect.objectContaining({ + type: "usage_updated", + usage: expect.objectContaining({ contextWindowMaxTokens: limit }), + }), + ); + expect(events).toContainEqual( + expect.objectContaining({ + type: "turn_completed", + usage: expect.objectContaining({ contextWindowMaxTokens: limit }), + }), + ); + } + } finally { + await session.close(); + } +}); + +test.each([ + { + name: "runtime-reported custom limit", + model: "custom-model", + windows: { "custom-model": 400_000, "prior-model": 1_000_000 }, + expected: 400_000, + }, + { + name: "missing active model entry", + model: "claude-haiku-4-5", + windows: { "prior-model": 1_000_000 }, + expected: 200_000, + }, + { + name: "invalid active model limit", + model: "claude-haiku-4-5", + windows: { "claude-haiku-4-5": -1, "prior-model": 1_000_000 }, + expected: 200_000, + }, +])("preserves $name without using another model's window", async ({ model, windows, expected }) => { + const client = new ClaudeAgentClient({ + logger: createTestLogger(), + resolveBinary: async () => process.execPath, + queryFactory: contextQuery({ + runtimeModel: model, + reportedLimit: expected, + modelWindowsByTurn: [windows], + }), + }); + const session = await client.createSession({ provider: "claude", cwd: process.cwd(), model }); + try { + const events = await collectSessionTurnEvents(session, "OK"); + expect(events).toContainEqual( + expect.objectContaining({ + type: "turn_completed", + usage: expect.objectContaining({ contextWindowMaxTokens: expected }), + }), + ); + } finally { + await session.close(); + } +}); diff --git a/packages/server/src/server/agent/providers/claude/agent.ts b/packages/server/src/server/agent/providers/claude/agent.ts index c985f54822..330f6bcb4c 100644 --- a/packages/server/src/server/agent/providers/claude/agent.ts +++ b/packages/server/src/server/agent/providers/claude/agent.ts @@ -1936,30 +1936,22 @@ async function resolveClaudeAuth( } } -function extractContextWindowSize(modelUsage: unknown): number | undefined { +function extractContextWindowSize( + modelUsage: unknown, + modelId: string | null | undefined, +): number | undefined { const usageRecord = toObjectRecord(modelUsage); if (!usageRecord) { return undefined; } - let maxContextWindow: number | undefined; - for (const value of Object.values(usageRecord)) { - const valueRecord = toObjectRecord(value); - if (!valueRecord) { - continue; - } - const contextWindow = valueRecord.contextWindow; - if ( - typeof contextWindow !== "number" || - !Number.isFinite(contextWindow) || - contextWindow <= 0 - ) { - continue; - } - maxContextWindow = Math.max(maxContextWindow ?? 0, contextWindow); - } - - return maxContextWindow; + // modelUsage accumulates every model used in the session, including earlier turns + // and subagents. Only the active model describes this turn's context capacity. + const modelUsageEntry = modelId ? usageRecord[modelId] : undefined; + const contextWindow = toObjectRecord(modelUsageEntry)?.contextWindow; + return typeof contextWindow === "number" && Number.isFinite(contextWindow) && contextWindow > 0 + ? contextWindow + : undefined; } interface StreamRequestInputUsage { @@ -2113,8 +2105,8 @@ class ClaudeContextUsageState { this.contextWindowMaxTokens = contextWindowMaxTokens; } - recordModelUsage(modelUsage: unknown): number | undefined { - const contextWindowMaxTokens = extractContextWindowSize(modelUsage); + recordModelUsage(modelUsage: unknown, modelId: string | null | undefined): number | undefined { + const contextWindowMaxTokens = extractContextWindowSize(modelUsage, modelId); if (contextWindowMaxTokens !== undefined) { this.contextWindowMaxTokens = contextWindowMaxTokens; } @@ -2157,7 +2149,10 @@ class ClaudeContextUsageState { return this.createUsageUpdatedEvent(usedTokens); } - buildResultUsage(message: SDKResultMessage, modelUsage: unknown): AgentUsage | undefined { + buildResultUsage( + message: SDKResultMessage, + modelId: string | null | undefined, + ): AgentUsage | undefined { try { if (!message.usage) { return undefined; @@ -2169,7 +2164,7 @@ class ClaudeContextUsageState { totalCostUsd: message.total_cost_usd, }; - const modelContextWindowMaxTokens = this.recordModelUsage(modelUsage ?? message.modelUsage); + const modelContextWindowMaxTokens = this.recordModelUsage(message.modelUsage, modelId); if (this.contextWindowMaxTokens !== undefined) { usage.contextWindowMaxTokens = this.contextWindowMaxTokens; } else if (modelContextWindowMaxTokens !== undefined) { @@ -4803,7 +4798,7 @@ class ClaudeAgentSession implements AgentSession { message: Extract, events: AgentStreamEvent[], ): void { - const usage = this.convertUsage(message, message.modelUsage); + const usage = this.convertUsage(message); if (message.subtype === "success") { events.push(...this.sidechainTracker.finishAll("completed")); // Built-in slash commands (e.g. /voice, /usage, "Unknown command: …") @@ -4985,8 +4980,8 @@ class ClaudeAgentSession implements AgentSession { return null; } - private convertUsage(message: SDKResultMessage, modelUsage?: unknown): AgentUsage | undefined { - return this.contextUsage.buildResultUsage(message, modelUsage); + private convertUsage(message: SDKResultMessage): AgentUsage | undefined { + return this.contextUsage.buildResultUsage(message, this.lastRuntimeModel ?? this.config.model); } private handlePermissionRequest: CanUseTool = async ( diff --git a/packages/server/src/server/daemon-client.e2e.test.ts b/packages/server/src/server/daemon-client.e2e.test.ts index 0bc3310b41..b6518d773d 100644 --- a/packages/server/src/server/daemon-client.e2e.test.ts +++ b/packages/server/src/server/daemon-client.e2e.test.ts @@ -157,15 +157,19 @@ test("DaemonClient uploads file bytes to daemon temp storage", async () => { chunkSize: 5, }); + const uploadId = result.file?.id ?? ""; + expect(uploadId).toMatch( + /^upload_[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/, + ); expect(result).toEqual({ requestId: "req-upload-e2e", file: { type: "uploaded_file", - id: "upload_req-upload-e2e", + id: uploadId, fileName: "notes.txt", mimeType: "text/plain", size: 11, - path: path.join(daemon.paseoHome, "uploads", "upload_req-upload-e2e", "notes.txt"), + path: path.join(daemon.paseoHome, "uploads", uploadId, "notes.txt"), }, error: null, }); diff --git a/packages/server/src/server/daemon-e2e/checkout-diff-content.e2e.test.ts b/packages/server/src/server/daemon-e2e/checkout-diff-content.e2e.test.ts index f0cd4495e1..75302d4168 100644 --- a/packages/server/src/server/daemon-e2e/checkout-diff-content.e2e.test.ts +++ b/packages/server/src/server/daemon-e2e/checkout-diff-content.e2e.test.ts @@ -1,5 +1,5 @@ import { execFileSync } from "node:child_process"; -import { mkdtempSync, rmSync, writeFileSync } from "node:fs"; +import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from "node:fs"; import { tmpdir } from "node:os"; import { join } from "node:path"; import { expect, test } from "vitest"; @@ -85,3 +85,76 @@ test.each(["uncommitted", "base", "commit"] as const)( }, 60_000, ); + +test.each( + (["uncommitted", "base"] as const).flatMap((mode) => + (["single", "batch", "rename"] as const).map((shape) => ({ mode, shape })), + ), +)( + "$mode $shape diff includes hunks from a repository subdirectory", + async ({ mode, shape }) => { + const ctx = await createDaemonTestContext(); + const cwd = mkdtempSync(join(tmpdir(), "checkout-diff-subdirectory-")); + + try { + git(cwd, "init", "-b", "main"); + git(cwd, "config", "user.name", "Test"); + git(cwd, "config", "user.email", "test@example.com"); + git(cwd, "config", "core.autocrlf", "false"); + const subdirectory = join(cwd, "sub"); + mkdirSync(subdirectory); + const unchangedLines = "unchanged\n".repeat(10); + writeFileSync(join(subdirectory, "normal.txt"), `before\n${unchangedLines}`); + if (shape === "batch") { + writeFileSync(join(cwd, "sibling.txt"), "old sibling\n"); + } + git(cwd, "add", "."); + git(cwd, "-c", "commit.gpgsign=false", "commit", "-m", "initial"); + if (mode === "base") { + git(cwd, "checkout", "-b", "feature"); + } + const filename = shape === "rename" ? "renamed.txt" : "normal.txt"; + if (shape === "rename") { + git(cwd, "mv", "sub/normal.txt", `sub/${filename}`); + } + writeFileSync(join(subdirectory, filename), `after\n${unchangedLines}`); + if (shape === "batch") { + writeFileSync(join(cwd, "sibling.txt"), "new sibling\n"); + } + if (mode === "base") { + git(cwd, "add", "."); + git(cwd, "-c", "commit.gpgsign=false", "commit", "-m", "edit"); + } + + const compare = { mode, baseRef: "main" }; + const rootDiff = await ctx.client.getCheckoutDiff(cwd, compare); + const subdirectoryDiff = await ctx.client.getCheckoutDiff(subdirectory, compare); + const subscription = ctx.client.observeCheckoutDiff(subdirectory, compare); + const liveDiff = await subscription.ready; + await subscription.release(); + + expect(rootDiff.error).toBeNull(); + expect(subdirectoryDiff.error).toBeNull(); + expect(liveDiff.error).toBeNull(); + expect(liveDiff.files).toEqual(rootDiff.files); + expect(rootDiff.files).toHaveLength(shape === "batch" ? 2 : 1); + const file = rootDiff.files.find((candidate) => candidate.path === `sub/${filename}`); + expect(file).toMatchObject({ + additions: 1, + deletions: 1, + ...(shape === "rename" ? { oldPath: "sub/normal.txt" } : {}), + }); + expect(file?.hunks.flatMap((hunk) => hunk.lines)).toEqual( + expect.arrayContaining([ + expect.objectContaining({ type: "remove", content: "before" }), + expect.objectContaining({ type: "add", content: "after" }), + ]), + ); + expect(subdirectoryDiff.files).toEqual(rootDiff.files); + } finally { + await ctx.cleanup(); + rmSync(cwd, { recursive: true, force: true }); + } + }, + 60_000, +); diff --git a/packages/server/src/server/daemon-e2e/models.e2e.test.ts b/packages/server/src/server/daemon-e2e/models.e2e.test.ts index 1f2086c879..b9293d8c3e 100644 --- a/packages/server/src/server/daemon-e2e/models.e2e.test.ts +++ b/packages/server/src/server/daemon-e2e/models.e2e.test.ts @@ -124,15 +124,12 @@ test("Antigravity creates an agent and answers a prompt with real agy", async ({ try { await client.connect(); await client.fetchAgents({ subscribe: {} }); - await expect - .poll( - async () => { - const snapshot = await client.getProvidersSnapshot({ cwd }); - return snapshot.entries.find((entry) => entry.provider === "antigravity")?.status; - }, - { timeout: 30000 }, - ) - .toBe("ready"); + // Snapshot reads start discovery again; await one refresh before checking readiness. + await client.refreshProvidersSnapshot({ cwd, providers: ["antigravity"] }); + const snapshot = await client.getProvidersSnapshot({ cwd }); + expect(snapshot.entries.find((entry) => entry.provider === "antigravity")?.status).toBe( + "ready", + ); const agent = await client.createAgent({ provider: "antigravity", cwd, diff --git a/packages/server/src/server/daemon-e2e/terminal-workspace-sdk.e2e.test.ts b/packages/server/src/server/daemon-e2e/terminal-workspace-sdk.e2e.test.ts index 19ccdf45e8..80c9409cef 100644 --- a/packages/server/src/server/daemon-e2e/terminal-workspace-sdk.e2e.test.ts +++ b/packages/server/src/server/daemon-e2e/terminal-workspace-sdk.e2e.test.ts @@ -244,3 +244,28 @@ async function observeScriptLifecycles( await subscription.ready; return lifecycles; } + +test.runIf(process.platform !== "win32")( + "a missing command fails creation without leaving a terminal listed", + async () => { + const workspaceId = await createWorkspace("Missing command"); + await expect( + sdk.terminals.create({ + workspaceId, + name: "Missing command", + command: "paseo-test-absent-terminal-command", + }), + ).rejects.toThrow("paseo-test-absent-terminal-command: command not found"); + expect((await sdk.terminals.list({ workspaceId })).entries).toEqual([]); + const control = await sdk.terminals.create({ + workspaceId, + command: process.execPath, + args: ["-e", "process.stdin.resume()"], + }); + expect((await sdk.terminals.list({ workspaceId })).entries.map((entry) => entry.id)).toEqual([ + control.id, + ]); + await control.kill(); + expect((await sdk.terminals.list({ workspaceId })).entries).toEqual([]); + }, +); diff --git a/packages/server/src/server/git-filename-diffs.e2e.test.ts b/packages/server/src/server/git-filename-diffs.e2e.test.ts index 343e1c81c8..c32ee040b8 100644 --- a/packages/server/src/server/git-filename-diffs.e2e.test.ts +++ b/packages/server/src/server/git-filename-diffs.e2e.test.ts @@ -5,6 +5,44 @@ import { tmpdir } from "node:os"; import { join } from "node:path"; import { createTestPaseoDaemon, DaemonClient } from "./test-utils/index.js"; +test("a rename-only commit returns zero added or deleted lines through the client", async () => { + const cwd = mkdtempSync(join(tmpdir(), "commit-rename-diff-")); + const git = (...args: string[]) => execFileSync("git", args, { cwd, encoding: "utf8" }).trim(); + const daemon = await createTestPaseoDaemon({ agentClients: {} }); + const client = new DaemonClient({ url: `ws://127.0.0.1:${daemon.port}/ws` }); + try { + git("init", "-b", "main"); + git("config", "user.name", "Test"); + git("config", "user.email", "test@example.com"); + writeFileSync(join(cwd, "old.txt"), "same\n"); + git("add", "."); + git("-c", "commit.gpgsign=false", "commit", "-m", "initial"); + git("mv", "old.txt", "new.txt"); + git("-c", "commit.gpgsign=false", "commit", "-m", "rename"); + const sha = git("rev-parse", "HEAD"); + + await client.connect(); + const history = await client.listCheckoutCommits(cwd); + expect(history.commits.find((commit) => commit.sha === sha)?.files).toEqual([ + { path: "new.txt", additions: 0, deletions: 0, status: "renamed" }, + ]); + expect(await client.getCommitFileDiff(cwd, sha, "new.txt")).toEqual({ + file: { + path: "new.txt", + isNew: false, + isDeleted: false, + additions: 0, + deletions: 0, + hunks: [], + }, + }); + } finally { + await client.close(); + await daemon.close(); + rmSync(cwd, { recursive: true, force: true, maxRetries: 5, retryDelay: 100 }); + } +}); + test.skipIf(process.platform === "win32")( "checkout and commit diffs preserve filenames that Git quotes", async () => { diff --git a/packages/server/src/server/resolve-worktree-creation-intent.test.ts b/packages/server/src/server/resolve-worktree-creation-intent.test.ts index 82895e302b..8d44b9ba80 100644 --- a/packages/server/src/server/resolve-worktree-creation-intent.test.ts +++ b/packages/server/src/server/resolve-worktree-creation-intent.test.ts @@ -1,6 +1,7 @@ import { describe, expect, test } from "vitest"; import type { ForgeService } from "../services/forge-service.js"; +import { buildForkLocalBranchName } from "../utils/change-request-checkout.js"; import { CheckoutSourceForgeMismatchError, MissingCheckoutTargetError, @@ -32,14 +33,8 @@ function createResolverHarness(overrides?: { defaultCheckoutRefs: ({ changeRequestNumber }) => [ { remoteName: "origin", remoteRef: `refs/pull/${changeRequestNumber}/head` }, ], - buildPrLocalBranchName: ({ headRef, checkoutTarget }) => { - const normalized = checkoutTarget.headOwnerLogin?.trim().toLowerCase() ?? ""; - const owner = - checkoutTarget.isCrossRepository && /^[a-z0-9-]+$/.test(normalized) - ? normalized - : null; - return owner ? `${owner}/${headRef}` : headRef; - }, + buildPrLocalBranchName: ({ headRef, checkoutTarget }) => + buildForkLocalBranchName({ headRef, ...checkoutTarget }), supportsCrossRepoCheckoutWithoutRefs: true, } : {}; @@ -182,6 +177,28 @@ describe("resolveWorktreeCreationIntent", () => { expect(deps.headRefLookups).toEqual([]); }); + test("does not track origin for a same-repo head with no origin branch", async () => { + const deps = createResolverHarness(); + deps.forgeService.getPullRequestCheckoutTarget = async () => ({ + number: 42, + baseRefName: "main", + headRefName: "ford/towel", + headOwnerLogin: null, + headRepositorySshUrl: null, + headRepositoryUrl: null, + isCrossRepository: false, + headRefKind: "pull-ref", + }); + + const intent = await resolveWorktreeCreationIntent( + { action: "checkout", githubPrNumber: 42 }, + repoRoot, + deps, + ); + + expect(intent).not.toHaveProperty("trackOriginHead"); + }); + test("configures the contributor remote for fork PR targets", async () => { const deps = createResolverHarness(); deps.forgeService.getPullRequestCheckoutTarget = async () => ({ @@ -211,6 +228,29 @@ describe("resolveWorktreeCreationIntent", () => { expect(deps.headRefLookups).toEqual([]); }); + test("prefixes the pr number when the fork was deleted", async () => { + const deps = createResolverHarness(); + deps.forgeService.getPullRequestCheckoutTarget = async () => ({ + number: 42, + baseRefName: "main", + headRefName: "towel", + headOwnerLogin: null, + headRepositorySshUrl: null, + headRepositoryUrl: null, + isCrossRepository: true, + }); + + const intent = await resolveWorktreeCreationIntent( + { action: "checkout", githubPrNumber: 42 }, + repoRoot, + deps, + ); + + expect(intent).toMatchObject({ headRef: "towel", localBranchName: "pr-42/towel" }); + expect(intent).not.toHaveProperty("pushRemoteUrl"); + expect(intent).not.toHaveProperty("trackOriginHead"); + }); + test("uses an explicit PR head ref without calling GitHub", async () => { const deps = createResolverHarness(); @@ -293,6 +333,105 @@ describe("resolveWorktreeCreationIntent", () => { expect(deps.headRefLookups).toEqual([]); }); + test("names the local branch pr- for a gitea pull-ref-only head", async () => { + const deps = createResolverHarness({ + forge: "gitea", + forgeService: { + defaultCheckoutRefs: ({ changeRequestNumber }) => [ + { remoteName: "origin", remoteRef: `refs/pull/${changeRequestNumber}/head` }, + { remoteName: "upstream", remoteRef: `refs/pull/${changeRequestNumber}/head` }, + ], + buildPrLocalBranchName: ({ headRef, checkoutTarget }) => + buildForkLocalBranchName({ headRef, ...checkoutTarget }), + getPullRequestCheckoutTarget: async ({ number }) => ({ + number, + baseRefName: "main", + headRefName: `refs/pull/${number}/head`, + headOwnerLogin: null, + headRepositorySshUrl: null, + headRepositoryUrl: null, + isCrossRepository: false, + headRefKind: "pull-ref", + }), + }, + }); + + const intent = await resolveWorktreeCreationIntent( + { action: "checkout", checkoutSource: { kind: "change_request", number: 3 } }, + repoRoot, + deps, + ); + + expect(intent).toMatchObject({ localBranchName: "pr-3" }); + expect(intent).not.toHaveProperty("trackOriginHead"); + }); + + test("names the local branch owner/pr- for a gitea fork pull-ref-only head", async () => { + const deps = createResolverHarness({ + forge: "gitea", + forgeService: { + defaultCheckoutRefs: ({ changeRequestNumber }) => [ + { remoteName: "origin", remoteRef: `refs/pull/${changeRequestNumber}/head` }, + { remoteName: "upstream", remoteRef: `refs/pull/${changeRequestNumber}/head` }, + ], + buildPrLocalBranchName: ({ headRef, checkoutTarget }) => + buildForkLocalBranchName({ headRef, ...checkoutTarget }), + supportsCrossRepoCheckoutWithoutRefs: true, + getPullRequestCheckoutTarget: async ({ number }) => ({ + number, + baseRefName: "main", + headRefName: `refs/pull/${number}/head`, + headOwnerLogin: "contributor", + headRepositorySshUrl: "git@gitea.test:contributor/repo.git", + headRepositoryUrl: "https://gitea.test/contributor/repo", + isCrossRepository: true, + headRefKind: "pull-ref", + }), + }, + }); + + const intent = await resolveWorktreeCreationIntent( + { action: "checkout", checkoutSource: { kind: "change_request", number: 3 } }, + repoRoot, + deps, + ); + + expect(intent).toMatchObject({ localBranchName: "contributor/pr-3" }); + }); + + test("does not double the pr number for a gitea deleted fork's pull-ref-only head", async () => { + const deps = createResolverHarness({ + forge: "gitea", + forgeService: { + defaultCheckoutRefs: ({ changeRequestNumber }) => [ + { remoteName: "origin", remoteRef: `refs/pull/${changeRequestNumber}/head` }, + { remoteName: "upstream", remoteRef: `refs/pull/${changeRequestNumber}/head` }, + ], + buildPrLocalBranchName: ({ headRef, checkoutTarget }) => + buildForkLocalBranchName({ headRef, ...checkoutTarget }), + supportsCrossRepoCheckoutWithoutRefs: true, + getPullRequestCheckoutTarget: async ({ number }) => ({ + number, + baseRefName: "main", + headRefName: `refs/pull/${number}/head`, + headOwnerLogin: null, + headRepositorySshUrl: null, + headRepositoryUrl: null, + isCrossRepository: true, + headRefKind: "pull-ref", + }), + }, + }); + + const intent = await resolveWorktreeCreationIntent( + { action: "checkout", checkoutSource: { kind: "change_request", number: 3 } }, + repoRoot, + deps, + ); + + expect(intent).toMatchObject({ localBranchName: "pr-3" }); + }); + test("reports unsupported cross-repository checkout targets without a checkout ref", async () => { const deps = createResolverHarness({ forge: "gitea", diff --git a/packages/server/src/server/resolve-worktree-creation-intent.ts b/packages/server/src/server/resolve-worktree-creation-intent.ts index 73403f5908..5eddc0ef7b 100644 --- a/packages/server/src/server/resolve-worktree-creation-intent.ts +++ b/packages/server/src/server/resolve-worktree-creation-intent.ts @@ -191,7 +191,8 @@ async function resolvePrCheckoutIntent( }) ?? [{ remoteName: "origin", remoteRef: `refs/heads/${headRef}` }]; const localBranchName = service.buildPrLocalBranchName?.({ headRef, checkoutTarget }); const crossRepository = resolveCrossRepositoryFields(checkoutTarget); - const trackOriginHead = !checkoutTarget.isCrossRepository; + const trackOriginHead = + !checkoutTarget.isCrossRepository && checkoutTarget.headRefKind !== "pull-ref"; return { kind: "checkout-change-request", diff --git a/packages/server/src/services/forge-service.ts b/packages/server/src/services/forge-service.ts index fba9833cd8..8499cc8756 100644 --- a/packages/server/src/services/forge-service.ts +++ b/packages/server/src/services/forge-service.ts @@ -39,6 +39,8 @@ export interface PullRequestCheckoutTarget { headRepositorySshUrl: string | null; headRepositoryUrl: string | null; isCrossRepository: boolean; + /** "pull-ref" when headRefName is a synthetic pull ref, not a real branch name (agit PRs, deleted branches); undefined means "branch" */ + headRefKind?: "branch" | "pull-ref"; } export interface PullRequestCheckoutRef { @@ -441,9 +443,9 @@ export interface ForgeService { getPullRequestCheckoutTarget(options: GetPullRequestOptions): Promise; /** * Refs to fetch for a change-request checkout when the resolved checkout - * target carries none. Adapters that expose a universal change-request head - * ref (GitHub's refs/pull/N/head) return it here; others let the shell fall - * back to the head branch. + * target carries none. Adapters with a universal change-request head ref + * (refs/pull/N/head) return it here; others let the shell fall back to the + * head branch. */ defaultCheckoutRefs?(params: { changeRequestNumber: number; @@ -451,7 +453,7 @@ export interface ForgeService { }): PullRequestCheckoutRef[]; /** * Local branch name for a checked-out change request when the adapter - * disambiguates cross-repository heads (GitHub prefixes the fork owner). + * disambiguates cross-repository heads (prefixes the fork owner). * Returns undefined to keep the head ref name as-is. */ buildPrLocalBranchName?(params: { diff --git a/packages/server/src/services/gitea-service.test.ts b/packages/server/src/services/gitea-service.test.ts index 768f1a7f05..9e3a3ecc62 100644 --- a/packages/server/src/services/gitea-service.test.ts +++ b/packages/server/src/services/gitea-service.test.ts @@ -2297,11 +2297,13 @@ describe("createGiteaService", () => { checkoutRefs: [ { remoteName: "origin", remoteRef: "refs/pull/5/head" }, { remoteName: "origin", remoteRef: "refs/heads/feat/sample-change" }, + { remoteName: "upstream", remoteRef: "refs/pull/5/head" }, ], headOwnerLogin: null, headRepositorySshUrl: null, headRepositoryUrl: null, isCrossRepository: false, + headRefKind: "branch", }); }); @@ -2332,17 +2334,215 @@ describe("createGiteaService", () => { headRefName: "feat/sample-change", checkoutRefs: [ { remoteName: "origin", remoteRef: "refs/pull/5/head" }, - { remoteName: "origin", remoteRef: "refs/heads/feat/sample-change" }, + { remoteName: "upstream", remoteRef: "refs/pull/5/head" }, ], headOwnerLogin: "contributor", headRepositorySshUrl: "git@gitea.com:contributor/sample-repo.git", headRepositoryUrl: "https://gitea.com/contributor/sample-repo", isCrossRepository: true, + headRefKind: "branch", }); expect(calls).toContainEqual(["api", "repos/example-user/sample-repo/pulls/5"]); }); + it("skips the origin branch fallback and tracking for an AGit pull request", async () => { + const { service } = makeService((args) => + args[0] === "api" + ? ok( + JSON.stringify({ + flow: 1, + head: { ref: "refs/pull/5/head", repo: { id: 1 } }, + base: { repo: { id: 1 } }, + }), + ) + : ok(JSON.stringify(STATUS_PR_VIEW)), + ); + + const target = await service.getPullRequestCheckoutTarget({ cwd: "/repo", number: 5 }); + + expect(target).toMatchObject({ + checkoutRefs: [ + { remoteName: "origin", remoteRef: "refs/pull/5/head" }, + { remoteName: "upstream", remoteRef: "refs/pull/5/head" }, + ], + isCrossRepository: false, + headRefKind: "pull-ref", + }); + }); + + it("names the local branch pr- end to end for an agit pull request", async () => { + // the tea CLI reports head as the raw pull ref too when there's no real + // branch, same as the Forgejo API's head.ref + const { service } = makeService((args) => + args[0] === "api" + ? ok( + JSON.stringify({ + flow: 1, + head: { ref: "refs/pull/5/head", repo: { id: 1 } }, + base: { repo: { id: 1 } }, + }), + ) + : ok(JSON.stringify({ ...STATUS_PR_VIEW, head: "refs/pull/5/head" })), + ); + + const target = await service.getPullRequestCheckoutTarget({ cwd: "/repo", number: 5 }); + const localBranchName = service.buildPrLocalBranchName?.({ + headRef: target.headRefName, + checkoutTarget: target, + }); + + expect(localBranchName).toBe("pr-5"); + }); + + it("skips the origin branch fallback when the head branch was deleted", async () => { + const { service } = makeService((args) => + args[0] === "api" + ? ok( + JSON.stringify({ + head: { ref: "refs/pull/5/head", repo: { id: 1 } }, + base: { repo: { id: 1 } }, + }), + ) + : ok(JSON.stringify(STATUS_PR_VIEW)), + ); + + const target = await service.getPullRequestCheckoutTarget({ cwd: "/repo", number: 5 }); + + expect(target).toMatchObject({ + checkoutRefs: [ + { remoteName: "origin", remoteRef: "refs/pull/5/head" }, + { remoteName: "upstream", remoteRef: "refs/pull/5/head" }, + ], + isCrossRepository: false, + headRefKind: "pull-ref", + }); + }); + + it("keeps a pull request from a deleted fork cross-repository", async () => { + const { service } = makeService((args) => + args[0] === "api" + ? ok(JSON.stringify({ head: { repo: null }, base: { repo: { id: 1 } } })) + : ok(JSON.stringify(STATUS_PR_VIEW)), + ); + + const target = await service.getPullRequestCheckoutTarget({ cwd: "/repo", number: 5 }); + + expect(target).toMatchObject({ + checkoutRefs: [ + { remoteName: "origin", remoteRef: "refs/pull/5/head" }, + { remoteName: "upstream", remoteRef: "refs/pull/5/head" }, + ], + headOwnerLogin: null, + isCrossRepository: true, + headRefKind: "branch", + }); + }); + + it("keeps the origin branch fallback when the server sends no head ref", async () => { + const { service } = makeService((args) => + args[0] === "api" + ? ok(JSON.stringify({ head: { repo: { id: 1 } }, base: { repo: { id: 1 } } })) + : ok(JSON.stringify(STATUS_PR_VIEW)), + ); + + const target = await service.getPullRequestCheckoutTarget({ cwd: "/repo", number: 5 }); + + expect(target.checkoutRefs).toContainEqual({ + remoteName: "origin", + remoteRef: "refs/heads/feat/sample-change", + }); + expect(target.headRefKind).toBe("branch"); + }); + + it("prefixes the local branch name with the fork owner for a cross-repository checkout", () => { + const { service } = makeService(() => ok("")); + + const localBranchName = service.buildPrLocalBranchName?.({ + headRef: "patch-1", + checkoutTarget: { + number: 5, + baseRefName: "main", + headRefName: "patch-1", + headOwnerLogin: "contributor", + headRepositorySshUrl: null, + headRepositoryUrl: null, + isCrossRepository: true, + }, + }); + + expect(localBranchName).toBe("contributor/patch-1"); + }); + + it("names the local branch pr- for a same-repo pull-ref-only head", () => { + const { service } = makeService(() => ok("")); + + const localBranchName = service.buildPrLocalBranchName?.({ + headRef: "refs/pull/5/head", + checkoutTarget: { + number: 5, + baseRefName: "main", + headRefName: "refs/pull/5/head", + headOwnerLogin: null, + headRepositorySshUrl: null, + headRepositoryUrl: null, + isCrossRepository: false, + headRefKind: "pull-ref", + }, + }); + + expect(localBranchName).toBe("pr-5"); + }); + + it("prefixes pr- with the fork owner for a pull-ref-only head", () => { + const { service } = makeService(() => ok("")); + + const localBranchName = service.buildPrLocalBranchName?.({ + headRef: "refs/pull/5/head", + checkoutTarget: { + number: 5, + baseRefName: "main", + headRefName: "refs/pull/5/head", + headOwnerLogin: "contributor", + headRepositorySshUrl: null, + headRepositoryUrl: null, + isCrossRepository: true, + headRefKind: "pull-ref", + }, + }); + + expect(localBranchName).toBe("contributor/pr-5"); + }); + + it("does not double the pr number for a deleted fork's pull-ref-only head", () => { + const { service } = makeService(() => ok("")); + + const localBranchName = service.buildPrLocalBranchName?.({ + headRef: "refs/pull/5/head", + checkoutTarget: { + number: 5, + baseRefName: "main", + headRefName: "refs/pull/5/head", + headOwnerLogin: null, + headRepositorySshUrl: null, + headRepositoryUrl: null, + isCrossRepository: true, + headRefKind: "pull-ref", + }, + }); + + expect(localBranchName).toBe("pr-5"); + }); + + it("returns the pull head ref for default checkout refs", () => { + const { service } = makeService(() => ok("")); + + expect(service.defaultCheckoutRefs?.({ changeRequestNumber: 5, headRef: "patch-1" })).toEqual([ + { remoteName: "origin", remoteRef: "refs/pull/5/head" }, + { remoteName: "upstream", remoteRef: "refs/pull/5/head" }, + ]); + }); + it("creates a pull request and parses the resulting URL and index", async () => { const { service, calls } = makeService((args) => { if (args[0] === "pr" && args[1] === "create") { diff --git a/packages/server/src/services/gitea-service.ts b/packages/server/src/services/gitea-service.ts index 88b5caa004..892f9cc33a 100644 --- a/packages/server/src/services/gitea-service.ts +++ b/packages/server/src/services/gitea-service.ts @@ -5,6 +5,10 @@ import pLimit from "p-limit"; import { parseGitHubRemoteIdentity, parseGitRemoteLocation } from "@getpaseo/protocol/git-remote"; import { findExecutable } from "../executable-resolution/executable-resolution.js"; import { runGitCommand } from "../utils/run-git-command.js"; +import { + buildForkLocalBranchName, + buildPullHeadCheckoutRefs, +} from "../utils/change-request-checkout.js"; import { execCommand } from "../utils/spawn.js"; import { createCachedCliPathResolver, @@ -75,6 +79,8 @@ const CURRENT_PR_HEAD_SHA_CACHE_TTL_MS = 30_000; // the sweep to the 250 most recent Actions tasks. const GITEA_ACTION_PAGE_LIMIT = 50; const GITEA_ACTION_MAX_PAGES = 5; +// PullRequestFlowAGit in forgejo models/issues/pull.go +const GITEA_PULL_REQUEST_FLOW_AGIT = 1; /** * Fields requested from `tea pr list -o json`. tea's default field set omits the @@ -225,8 +231,12 @@ const GiteaPullRequestRepoSchema = z const GiteaPullRequestApiSchema = z .object({ + flow: z.number().optional(), head: z - .object({ repo: GiteaPullRequestRepoSchema.nullable().optional() }) + .object({ + ref: z.string().optional(), + repo: GiteaPullRequestRepoSchema.nullable().optional(), + }) .passthrough() .optional(), base: z @@ -1435,17 +1445,30 @@ export function createGiteaService(options: CreateGiteaServiceOptions = {}): For return runJsonParse(args, runOptions, stdout, schema); } + function resolveHeadRefKind( + pr: z.infer, + number: number, + ): "branch" | "pull-ref" { + // head.ref only becomes the branch name when the branch still exists, + // agit PRs and deleted branches keep the pull ref + const isPullRefOnly = + pr.flow === GITEA_PULL_REQUEST_FLOW_AGIT || pr.head?.ref === `refs/pull/${number}/head`; + return isPullRefOnly ? "pull-ref" : "branch"; + } + async function resolveForkCheckoutFacts( cwd: string, summary: PullRequestSummary, ): Promise<{ isCrossRepository: boolean; + headRefKind: "branch" | "pull-ref"; headOwnerLogin: string | null; headRepositorySshUrl: string | null; headRepositoryUrl: string | null; }> { const sameRepo = { isCrossRepository: false, + headRefKind: "branch" as const, headOwnerLogin: null, headRepositorySshUrl: null, headRepositoryUrl: null, @@ -1464,14 +1487,17 @@ export function createGiteaService(options: CreateGiteaServiceOptions = {}): For ); const headRepo = pr.head?.repo ?? null; const baseRepo = pr.base?.repo ?? null; - if (headRepo?.id == null || baseRepo?.id == null || headRepo.id === baseRepo.id) { - return sameRepo; + const headRefKind = resolveHeadRefKind(pr, summary.number); + if (baseRepo?.id == null || headRepo?.id === baseRepo.id) { + return { ...sameRepo, headRefKind }; } + // headRepo is null when the fork was deleted return { isCrossRepository: true, - headOwnerLogin: headRepo.owner?.login ?? null, - headRepositorySshUrl: headRepo.ssh_url ?? null, - headRepositoryUrl: headRepo.html_url ?? null, + headRefKind, + headOwnerLogin: headRepo?.owner?.login ?? null, + headRepositorySshUrl: headRepo?.ssh_url ?? null, + headRepositoryUrl: headRepo?.html_url ?? null, }; } @@ -1997,17 +2023,29 @@ export function createGiteaService(options: CreateGiteaServiceOptions = {}): For return summary.headRefName; }, + defaultCheckoutRefs({ changeRequestNumber }) { + return buildPullHeadCheckoutRefs(changeRequestNumber); + }, + + buildPrLocalBranchName({ headRef, checkoutTarget }) { + return buildForkLocalBranchName({ headRef, ...checkoutTarget }); + }, + async getPullRequestCheckoutTarget( input: GetPullRequestOptions, ): Promise { const summary = await this.getPullRequest(input); - const checkoutRefs = [ - { remoteName: "origin", remoteRef: `refs/pull/${summary.number}/head` }, - ]; - if (summary.headRefName) { + const fork = await resolveForkCheckoutFacts(input.cwd, summary); + const [originPullRef, upstreamPullRef] = buildPullHeadCheckoutRefs(summary.number); + const checkoutRefs = [originPullRef]; + // for a fork PR a branch with that name on origin belongs to the base repo + const headBranchOnOrigin = + !fork.isCrossRepository && fork.headRefKind === "branch" && Boolean(summary.headRefName); + if (headBranchOnOrigin) { checkoutRefs.push({ remoteName: "origin", remoteRef: `refs/heads/${summary.headRefName}` }); } - const fork = await resolveForkCheckoutFacts(input.cwd, summary); + // upstream can hold a different PR with the same number, so it goes last + checkoutRefs.push(upstreamPullRef); return { number: summary.number, baseRefName: summary.baseRefName, @@ -2017,6 +2055,7 @@ export function createGiteaService(options: CreateGiteaServiceOptions = {}): For headRepositorySshUrl: fork.headRepositorySshUrl, headRepositoryUrl: fork.headRepositoryUrl, isCrossRepository: fork.isCrossRepository, + headRefKind: fork.headRefKind, }; }, diff --git a/packages/server/src/services/github-service.test.ts b/packages/server/src/services/github-service.test.ts index ab71115f36..3109bcc63c 100644 --- a/packages/server/src/services/github-service.test.ts +++ b/packages/server/src/services/github-service.test.ts @@ -797,6 +797,7 @@ describe("ForgeService", () => { headRepositorySshUrl: "git@github.com:therainisme/paseo.git", headRepositoryUrl: "https://github.com/therainisme/paseo", isCrossRepository: true, + headRefKind: "branch", }); expect(runner.calls).toHaveLength(2); diff --git a/packages/server/src/services/github-service.ts b/packages/server/src/services/github-service.ts index b6de0cbd6e..2dd3fdc269 100644 --- a/packages/server/src/services/github-service.ts +++ b/packages/server/src/services/github-service.ts @@ -6,6 +6,10 @@ import { } from "@getpaseo/protocol/git-remote"; import { findExecutable } from "../executable-resolution/executable-resolution.js"; import { runGitCommand } from "../utils/run-git-command.js"; +import { + buildForkLocalBranchName, + buildPullHeadCheckoutRefs, +} from "../utils/change-request-checkout.js"; import { execCommand } from "../utils/spawn.js"; import { resolveSshHostname } from "../utils/ssh-hostname.js"; import { @@ -2104,17 +2108,11 @@ export function createGitHubService(options: CreateGitHubServiceOptions = {}): G }, defaultCheckoutRefs({ changeRequestNumber }) { - return [ - { remoteName: "origin", remoteRef: `refs/pull/${changeRequestNumber}/head` }, - { remoteName: "upstream", remoteRef: `refs/pull/${changeRequestNumber}/head` }, - ]; + return buildPullHeadCheckoutRefs(changeRequestNumber); }, buildPrLocalBranchName({ headRef, checkoutTarget }) { - const owner = checkoutTarget.isCrossRepository - ? normalizeGitHubOwnerForBranch(checkoutTarget.headOwnerLogin) - : null; - return owner ? `${owner}/${headRef}` : headRef; + return buildForkLocalBranchName({ headRef, ...checkoutTarget }); }, supportsCrossRepoCheckoutWithoutRefs: true, @@ -2663,11 +2661,6 @@ export function createGitHubService(options: CreateGitHubServiceOptions = {}): G return api; } -function normalizeGitHubOwnerForBranch(owner: string | null): string | null { - const normalized = owner?.trim().toLowerCase() ?? ""; - return /^[a-z0-9-]+$/.test(normalized) ? normalized : null; -} - function getGithubStatusFacts( status: PullRequestCommandStatus | null | undefined, ): GitHubPullRequestStatusFacts | null { @@ -3529,6 +3522,7 @@ function toPullRequestCheckoutTarget( headRepositorySshUrl: pullRequest.headRepository?.sshUrl || null, headRepositoryUrl: pullRequest.headRepository?.url || null, isCrossRepository: pullRequest.isCrossRepository, + headRefKind: "branch", }; } diff --git a/packages/server/src/services/gitlab-service.test.ts b/packages/server/src/services/gitlab-service.test.ts index 371198e447..b9b6d447d4 100644 --- a/packages/server/src/services/gitlab-service.test.ts +++ b/packages/server/src/services/gitlab-service.test.ts @@ -477,6 +477,7 @@ describe("createGitLabService", () => { headRepositorySshUrl: null, headRepositoryUrl: null, isCrossRepository: false, + headRefKind: "branch", }); expect(calls[0]).toEqual(["mr", "view", "14", "-F", "json"]); }); diff --git a/packages/server/src/services/gitlab-service.ts b/packages/server/src/services/gitlab-service.ts index 1fff0e2a02..c5f54be2cb 100644 --- a/packages/server/src/services/gitlab-service.ts +++ b/packages/server/src/services/gitlab-service.ts @@ -1204,6 +1204,7 @@ export function createGitLabService(options: CreateGitLabServiceOptions = {}): F mr.target_project_id !== undefined && mr.target_project_id !== null && mr.source_project_id !== mr.target_project_id, + headRefKind: "branch", }; }, diff --git a/packages/server/src/terminal/terminal.test.ts b/packages/server/src/terminal/terminal.test.ts index f83b6b9ba3..751fb1b33a 100644 --- a/packages/server/src/terminal/terminal.test.ts +++ b/packages/server/src/terminal/terminal.test.ts @@ -2,6 +2,7 @@ import { describe, it, expect, afterEach, vi } from "vitest"; import { isPlatform } from "../test-utils/platform.js"; import { buildTerminalEnvironment, + assertTerminalCommandCanStart, createTerminal, ensureNodePtySpawnHelperExecutableForCurrentPlatform, resolveDefaultTerminalShell, @@ -26,7 +27,7 @@ import { spawnSync } from "node:child_process"; import * as pty from "node-pty"; import xterm from "@xterm/headless"; import { renderTerminalSnapshotToAnsi } from "@getpaseo/protocol/terminal-snapshot"; -import { join } from "node:path"; +import { delimiter, join } from "node:path"; import { tmpdir } from "node:os"; import { setImmediate as waitForImmediate, setTimeout as delay } from "node:timers/promises"; import { stripVTControlCharacters } from "node:util"; @@ -637,6 +638,151 @@ describe("createTerminal", () => { expect(exitInfo.lastOutputLines.length).toBeGreaterThan(0); expect(exitInfo.lastOutputLines[exitInfo.lastOutputLines.length - 1]).toBe("line-2999"); }); + + it.runIf(isPlatform("linux", "darwin"))( + "rejects a profile command that is not installed instead of opening a terminal", + async () => { + await expect( + createTerminal({ + workspaceId: "ws-test", + cwd: realpathSync(tmpdir()), + name: "Codex", + command: "paseo-qa-absent-codex", + args: [], + }), + ).rejects.toThrow("paseo-qa-absent-codex: command not found"); + }, + ); + + it.runIf(isPlatform("linux", "darwin"))( + "opens a command found only on the PATH carried by the env option", + async () => { + // execve resolves the command against the child's PATH, which carries the + // per-cwd registered environment. A version-manager shim lives there and + // not necessarily on the daemon's own PATH. + const binDir = mkdtempSync(join(tmpdir(), "terminal-envpath-bin-")); + temporaryDirs.push(binDir); + const toolPath = join(binDir, "paseo-qa-envpath-tool"); + writeFileSync(toolPath, "#!/usr/bin/env bash\nprintf 'paseo-launch-ok\\n'\nsleep 30\n"); + chmodSync(toolPath, 0o755); + + const session = trackSession( + await createTerminal({ + workspaceId: "ws-test", + cwd: realpathSync(tmpdir()), + name: "Shim", + command: "paseo-qa-envpath-tool", + args: [], + env: { PATH: `${binDir}${delimiter}${process.env.PATH ?? ""}` }, + }), + ); + + await waitForLines(session, ["paseo-launch-ok"]); + expect(getLines(session.getState())[0]).toBe("paseo-launch-ok"); + }, + ); + + it.runIf(isPlatform("linux", "darwin"))( + "reports command not found when the command is on neither PATH", + async () => { + await expect( + createTerminal({ + workspaceId: "ws-test", + cwd: realpathSync(tmpdir()), + name: "Codex", + command: "paseo-qa-absent-codex", + args: [], + env: { PATH: `/paseo-qa-empty${delimiter}${process.env.PATH ?? ""}` }, + }), + ).rejects.toThrow("paseo-qa-absent-codex: command not found"); + }, + ); + + it.runIf(isPlatform("linux", "darwin"))( + "opens a relative command path resolved against the terminal cwd", + async () => { + // execve resolves a path-ish command against the child's cwd, never the + // daemon's own working directory. + const projectDir = mkdtempSync(join(tmpdir(), "terminal-relative-cmd-")); + temporaryDirs.push(projectDir); + mkdirSync(join(projectDir, "scripts")); + const scriptPath = join(projectDir, "scripts", "dev.sh"); + writeFileSync(scriptPath, "#!/usr/bin/env bash\nprintf 'paseo-launch-ok\\n'\nsleep 30\n"); + chmodSync(scriptPath, 0o755); + + const session = trackSession( + await createTerminal({ + workspaceId: "ws-test", + cwd: realpathSync(projectDir), + name: "Dev script", + command: "./scripts/dev.sh", + args: [], + }), + ); + + await waitForLines(session, ["paseo-launch-ok"]); + expect(getLines(session.getState())[0]).toBe("paseo-launch-ok"); + }, + ); + + it.runIf(isPlatform("linux", "darwin"))("opens an absolute command path", async () => { + const projectDir = mkdtempSync(join(tmpdir(), "terminal-absolute-cmd-")); + temporaryDirs.push(projectDir); + const scriptPath = join(projectDir, "run.sh"); + writeFileSync(scriptPath, "#!/usr/bin/env bash\nprintf 'paseo-launch-ok\\n'\nsleep 30\n"); + chmodSync(scriptPath, 0o755); + + const session = trackSession( + await createTerminal({ + workspaceId: "ws-test", + cwd: realpathSync(tmpdir()), + name: "Absolute", + command: scriptPath, + args: [], + }), + ); + + await waitForLines(session, ["paseo-launch-ok"]); + expect(getLines(session.getState())[0]).toBe("paseo-launch-ok"); + }); + + it("leaves the command check to the terminal itself on Windows", async () => { + // Windows resolves inside resolveTerminalSpawnCommand, which has its own + // shim handling and its own fallback for an unresolved command. + await expect( + assertTerminalCommandCanStart({ + command: "paseo-qa-absent-codex", + cwd: realpathSync(tmpdir()), + env: { PATH: "/paseo-qa-empty" }, + platform: "win32", + }), + ).resolves.toBeUndefined(); + }); + + it.runIf(isPlatform("linux", "darwin"))( + "still opens a terminal for an installed command that exits non-zero", + async () => { + // A profile running a failing test suite must keep opening a tab with its + // output. Only a command that cannot start at all is reported as an error, + // and "exited non-zero" does not distinguish the two: a missing binary and + // `false` both surface as exit code 1 from node-pty. + const session = trackSession( + await createTerminal({ + workspaceId: "ws-test", + cwd: realpathSync(tmpdir()), + name: "Failing suite", + command: "false", + args: [], + }), + ); + + const exitInfo = await new Promise<{ exitCode: number | null }>((resolve) => { + session.onExit((info) => resolve({ exitCode: info.exitCode })); + }); + + expect(exitInfo).toEqual({ exitCode: 1 }); + }, + ); }); describe.skipIf(isPlatform("win32"))("send input", () => { @@ -1388,3 +1534,43 @@ describe.runIf(isPlatform("win32"))(".cmd shim argv round-trip on Windows", () = expect(await roundTrip("first\nsecond")).toEqual(["first second"]); }); }); + +it.runIf(isPlatform("linux", "darwin"))( + "opens a profile command from a PATH entry relative to the terminal cwd", + async () => { + const projectDir = mkdtempSync(join(tmpdir(), "terminal-relative-path-")); + mkdirSync(join(projectDir, "bin")); + const script = join(projectDir, "bin", "paseo-relative-path-tool"); + writeFileSync(script, "#!/bin/sh\nprintf 'paseo-launch-ok\\n'\nexec /bin/sleep 30\n"); + chmodSync(script, 0o755); + let session: TerminalSession | undefined; + try { + session = await createTerminal({ + workspaceId: "ws-test", + cwd: realpathSync(projectDir), + command: "paseo-relative-path-tool", + env: { PATH: "bin" }, + }); + await waitForLines(session, ["paseo-launch-ok"]); + expect(getLines(session.getState())[0]).toBe("paseo-launch-ok"); + expect(session.cwd).toBe(realpathSync(projectDir)); + expect(session.getExitInfo()).toBeNull(); + } finally { + await session?.killAndWait({ gracefulTimeoutMs: 1000, forceTimeoutMs: 500 }); + rmSync(projectDir, { recursive: true, force: true }); + } + }, +); + +it.runIf(isPlatform("linux", "darwin"))( + "checks the exact command rather than accepting a trimmed executable name", + async () => { + await expect( + createTerminal({ + workspaceId: "ws-test", + cwd: realpathSync(tmpdir()), + command: " node ", + }), + ).rejects.toThrow(" node : command not found"); + }, +); diff --git a/packages/server/src/terminal/terminal.ts b/packages/server/src/terminal/terminal.ts index 1e708062b8..24f243b6ea 100644 --- a/packages/server/src/terminal/terminal.ts +++ b/packages/server/src/terminal/terminal.ts @@ -1,14 +1,25 @@ import * as pty from "node-pty"; import xterm, { type Terminal as TerminalType } from "@xterm/headless"; import { randomUUID } from "crypto"; -import { chmodSync, existsSync, mkdirSync, readFileSync, statSync } from "node:fs"; +import { + accessSync, + chmodSync, + constants, + existsSync, + mkdirSync, + readFileSync, + statSync, +} from "node:fs"; import { tmpdir, userInfo } from "node:os"; import { basename, delimiter, dirname, extname, join, resolve as resolvePath } from "node:path"; import { createRequire } from "node:module"; import { fileURLToPath } from "node:url"; import { createExternalProcessEnv } from "../server/paseo-env.js"; import { writePrivateFileAtomicSync } from "../server/private-files.js"; -import { findExecutable } from "../executable-resolution/executable-resolution.js"; +import { + findExecutable, + findExecutableWithoutProbing, +} from "../executable-resolution/executable-resolution.js"; import type { TerminalCell, TerminalState } from "@getpaseo/protocol/messages"; import { TerminalInputModeTracker } from "@getpaseo/protocol/terminal-input-mode"; import { TerminalActivityTracker } from "./activity/terminal-activity-tracker.js"; @@ -33,6 +44,20 @@ export interface TerminalExitInfo { lastOutputLines: string[]; } +// The field is assigned explicitly rather than declared as a constructor +// parameter property: the terminal worker loads this module under +// --experimental-strip-types, which erases types but cannot emit the +// assignment a parameter property implies. +export class TerminalCommandNotFoundError extends Error { + readonly command: string; + + constructor(command: string) { + super(`${command}: command not found`); + this.name = "TerminalCommandNotFoundError"; + this.command = command; + } +} + export interface TerminalCommandFinishedInfo { exitCode: number | null; } @@ -886,6 +911,62 @@ function extractLastOutputLinesFromText(text: string, limit: number): string[] { return lines.slice(-limit); } +function isExecutableFile(path: string): boolean { + try { + if (!statSync(path).isFile()) { + return false; + } + accessSync(path, constants.X_OK); + return true; + } catch { + return false; + } +} + +export interface AssertTerminalCommandCanStartInput { + command: string | undefined; + // The terminal's own cwd and environment, not the daemon's: execve in the + // child resolves against those, so anything else produces false negatives. + cwd: string; + env: Record; + platform?: NodeJS.Platform; +} + +// node-pty spawns directly through execve on POSIX, with no shell, so a command +// that does not exist fails inside the spawn helper and surfaces as exit code 1 +// with no output -- indistinguishable from `false` or any program that simply +// failed. Resolving it up front is the only signal that separates "cannot start" +// from "ran and exited non-zero", and it lets the create report the failure +// instead of handing back a terminal that dies immediately. Windows keeps +// resolving inside resolveTerminalSpawnCommand, which has its own shim handling +// and its own fallback for an unresolved command. +export async function assertTerminalCommandCanStart( + input: AssertTerminalCommandCanStartInput, +): Promise { + const { command, cwd, env } = input; + const platform = input.platform ?? process.platform; + if (command === undefined || platform === "win32") { + return; + } + + // A path-ish command is resolved by execve against the child's cwd, never + // through PATH and never against the daemon's working directory. + if (command.includes("/")) { + if (isExecutableFile(resolvePath(cwd, command))) { + return; + } + throw new TerminalCommandNotFoundError(command); + } + + const resolved = await findExecutableWithoutProbing(command, { + path: env[getPathEnvKey(env)], + cwd, + }); + if (!resolved) { + throw new TerminalCommandNotFoundError(command); + } +} + export async function createTerminal(options: CreateTerminalOptions): Promise { const { cwd, @@ -945,19 +1026,23 @@ export async function createTerminal(options: CreateTerminalOptions): Promise { + const worker = new FakeTerminalWorker(); + manager = createWorkerTerminalManager({ + requestTimeoutMs: 50, + forkWorker: () => worker, + }); + + const snapshots: Array<{ cwd: string; terminalIds: string[] }> = []; + manager.subscribeTerminalsChanged((event) => { + snapshots.push({ cwd: event.cwd, terminalIds: event.terminals.map((terminal) => terminal.id) }); + }); + + const created = manager.createTerminal({ + id: "terminal-a", + cwd: "/workspace", + workspaceId: "ws-test", + }); + const request = worker.sentMessages.find((message) => message.type === "createTerminal"); + if (!request) { + throw new Error("createTerminal request not sent"); + } + + // The worker delivers all three messages in one tick, so the awaiting + // createTerminal continuation resumes only after the exit was processed. + const terminal = { + id: "terminal-a", + name: "Shell", + cwd: "/workspace", + workspaceId: "ws-test", + activity: null, + }; + const state = createTerminalState(); + const exitInfo = { exitCode: 0, signal: null, lastOutputLines: [] }; + worker.emitWorkerMessage({ type: "terminalCreated", terminal, state }); + worker.emitWorkerMessage({ + type: "response", + requestId: request.requestId, + ok: true, + result: { terminal, state }, + }); + worker.emitWorkerMessage({ type: "terminalExit", terminalId: "terminal-a", info: exitInfo }); + + const session = await created; + + expect(manager.getTerminal("terminal-a")).toBeUndefined(); + expect(await manager.getTerminals("/workspace")).toEqual([]); + expect(session.getExitInfo()).toEqual(exitInfo); + expect(snapshots).toEqual([ + { cwd: "/workspace", terminalIds: ["terminal-a"] }, + { cwd: "/workspace", terminalIds: [] }, + ]); +}); + +it("replays the exit to a listener attached after a create that lost the race", async () => { + const worker = new FakeTerminalWorker(); + manager = createWorkerTerminalManager({ + requestTimeoutMs: 50, + forkWorker: () => worker, + }); + + const created = manager.createTerminal({ + id: "terminal-a", + cwd: "/workspace", + workspaceId: "ws-test", + }); + const request = worker.sentMessages.find((message) => message.type === "createTerminal"); + if (!request) { + throw new Error("createTerminal request not sent"); + } + + const terminal = { + id: "terminal-a", + name: "Shell", + cwd: "/workspace", + workspaceId: "ws-test", + activity: null, + }; + const state = createTerminalState(); + const exitInfo = { exitCode: 0, signal: null, lastOutputLines: [] }; + worker.emitWorkerMessage({ type: "terminalCreated", terminal, state }); + worker.emitWorkerMessage({ + type: "response", + requestId: request.requestId, + ok: true, + result: { terminal, state }, + }); + worker.emitWorkerMessage({ type: "terminalExit", terminalId: "terminal-a", info: exitInfo }); + + const session = await created; + + // The session controller subscribes only after createTerminal resolves; that + // subscription is what turns into a terminal_exit for the client. + const observedExits: Array<{ exitCode: number | null }> = []; + session.onExit((info) => { + observedExits.push({ exitCode: info.exitCode }); + }); + await new Promise((resolve) => setImmediate(resolve)); + + expect(observedExits).toEqual([{ exitCode: 0 }]); +}); + +it("rejects createTerminal and registers nothing when the worker cannot start the command", async () => { + const worker = new FakeTerminalWorker(); + manager = createWorkerTerminalManager({ + requestTimeoutMs: 50, + forkWorker: () => worker, + }); + + const snapshots: Array<{ cwd: string; terminalIds: string[] }> = []; + manager.subscribeTerminalsChanged((event) => { + snapshots.push({ cwd: event.cwd, terminalIds: event.terminals.map((terminal) => terminal.id) }); + }); + + const created = manager.createTerminal({ + id: "terminal-a", + cwd: "/workspace", + workspaceId: "ws-test", + command: "paseo-qa-absent-codex", + }); + const request = worker.sentMessages.find((message) => message.type === "createTerminal"); + if (!request) { + throw new Error("createTerminal request not sent"); + } + worker.emitWorkerMessage({ + type: "response", + requestId: request.requestId, + ok: false, + error: "paseo-qa-absent-codex: command not found", + }); + + await expect(created).rejects.toThrow("paseo-qa-absent-codex: command not found"); + expect(manager.getTerminal("terminal-a")).toBeUndefined(); + expect(await manager.getTerminals("/workspace")).toEqual([]); + expect(snapshots).toEqual([]); +}); diff --git a/packages/server/src/terminal/worker-terminal-manager.ts b/packages/server/src/terminal/worker-terminal-manager.ts index 0f0243d7a8..ca84cfe622 100644 --- a/packages/server/src/terminal/worker-terminal-manager.ts +++ b/packages/server/src/terminal/worker-terminal-manager.ts @@ -156,6 +156,9 @@ export function createWorkerTerminalManager( const recordsById = new Map(); const terminalIdsByCwd = new Map>(); const terminalActivityTokenById = new Map(); + // Creation owns a reference to the session independently of the live-terminal + // index. Only terminalCreated registers it; terminalExit removes it permanently. + const pendingCreationsById = new Map(); const terminalsChangedListeners = new Set(); const terminalActivityListeners = new Set(); const terminalWorkspaceContributionChangedListeners = @@ -542,10 +545,14 @@ export function createWorkerTerminalManager( function handleWorkerEvent(message: TerminalWorkerToParentMessage): void { switch (message.type) { case "terminalCreated": { - registerRecord({ + const session = registerRecord({ info: asRequiredWorkerTerminalInfo(message.terminal), state: message.state, }); + const pendingCreation = pendingCreationsById.get(message.terminal.id); + if (pendingCreation) { + pendingCreation.session = session; + } emitTerminalsChanged({ cwd: message.terminal.cwd, terminals: listTerminalItemsForCwd(message.terminal.cwd), @@ -686,12 +693,10 @@ export function createWorkerTerminalManager( const activityToken = createActivityToken(); const terminalActivityUrl = managerOptions.getTerminalActivityUrl?.() ?? null; terminalActivityTokenById.set(terminalId, activityToken); - let result: { - terminal: RequiredWorkerTerminalInfo; - state: TerminalState; - }; + const creation = { session: null as TerminalSession | null }; + pendingCreationsById.set(terminalId, creation); try { - result = (await sendRequest({ + await sendRequest({ type: "createTerminal", options: { ...options, @@ -699,16 +704,17 @@ export function createWorkerTerminalManager( activityToken, activityUrl: terminalActivityUrl, }, - })) as { - terminal: RequiredWorkerTerminalInfo; - state: TerminalState; - }; + }); + if (!creation.session) { + throw new Error("Terminal worker completed creation without a terminalCreated event"); + } + return creation.session; } catch (error) { terminalActivityTokenById.delete(terminalId); throw error; + } finally { + pendingCreationsById.delete(terminalId); } - const session = registerRecord({ info: result.terminal, state: result.state }); - return session; }, registerCwdEnv(options: { cwd: string; env: Record }): void { diff --git a/packages/server/src/utils/change-request-checkout.test.ts b/packages/server/src/utils/change-request-checkout.test.ts new file mode 100644 index 0000000000..74a57c2445 --- /dev/null +++ b/packages/server/src/utils/change-request-checkout.test.ts @@ -0,0 +1,89 @@ +import { describe, expect, it } from "vitest"; + +import { + buildForkLocalBranchName, + normalizeForgeOwnerForBranch, +} from "./change-request-checkout.js"; + +describe("normalizeForgeOwnerForBranch", () => { + it("lowercases a valid login", () => { + expect(normalizeForgeOwnerForBranch("Contributor")).toBe("contributor"); + }); + + it("allows dots and underscores", () => { + expect(normalizeForgeOwnerForBranch("a.b_c")).toBe("a.b_c"); + }); + + it("rejects a login starting with a dash", () => { + expect(normalizeForgeOwnerForBranch("-abc")).toBeNull(); + }); + + it("rejects a login starting with a dot", () => { + expect(normalizeForgeOwnerForBranch(".hidden")).toBeNull(); + }); + + it("rejects a login containing '..'", () => { + expect(normalizeForgeOwnerForBranch("a..b")).toBeNull(); + }); + + it("rejects a login ending in .lock", () => { + expect(normalizeForgeOwnerForBranch("contributor.lock")).toBeNull(); + }); + + it("rejects a login with a path traversal segment", () => { + expect(normalizeForgeOwnerForBranch("../evil")).toBeNull(); + }); + + it("rejects an empty or null login", () => { + expect(normalizeForgeOwnerForBranch(null)).toBeNull(); + expect(normalizeForgeOwnerForBranch("")).toBeNull(); + expect(normalizeForgeOwnerForBranch(" ")).toBeNull(); + }); +}); + +describe("buildForkLocalBranchName", () => { + const fork = { headRef: "patch-1", number: 42, isCrossRepository: true }; + + it("keeps the head ref for a same-repository head", () => { + expect( + buildForkLocalBranchName({ ...fork, isCrossRepository: false, headOwnerLogin: "arthur" }), + ).toBe("patch-1"); + }); + + it("prefixes a fork head with the lowercased owner", () => { + expect(buildForkLocalBranchName({ ...fork, headOwnerLogin: "Arthur" })).toBe("arthur/patch-1"); + }); + + it("falls back to the pr number when the owner is unknown", () => { + expect(buildForkLocalBranchName({ ...fork, headOwnerLogin: null })).toBe("pr-42/patch-1"); + }); + + it("falls back to the pr number when the owner is not a safe ref segment", () => { + expect(buildForkLocalBranchName({ ...fork, headOwnerLogin: "-zaphod" })).toBe("pr-42/patch-1"); + }); + + // pull-ref-only heads (agit PRs, deleted branches) report headRef as the + // literal pull ref, e.g. refs/pull/42/head, not a real branch name + it("collapses a same-repository pull-ref-only head to pr-", () => { + expect( + buildForkLocalBranchName({ + ...fork, + isCrossRepository: false, + headOwnerLogin: "arthur", + headRefKind: "pull-ref", + }), + ).toBe("pr-42"); + }); + + it("prefixes pr- with the owner for a fork pull-ref-only head", () => { + expect( + buildForkLocalBranchName({ ...fork, headOwnerLogin: "Arthur", headRefKind: "pull-ref" }), + ).toBe("arthur/pr-42"); + }); + + it("does not double the pr number when the fork owner is unknown and there is no head branch", () => { + expect( + buildForkLocalBranchName({ ...fork, headOwnerLogin: null, headRefKind: "pull-ref" }), + ).toBe("pr-42"); + }); +}); diff --git a/packages/server/src/utils/change-request-checkout.ts b/packages/server/src/utils/change-request-checkout.ts new file mode 100644 index 0000000000..12c779571b --- /dev/null +++ b/packages/server/src/utils/change-request-checkout.ts @@ -0,0 +1,47 @@ +import type { PullRequestCheckoutRef } from "../services/forge-service.js"; + +// upstream for clones where origin is your fork +export function buildPullHeadCheckoutRefs(number: number): PullRequestCheckoutRef[] { + return [ + { remoteName: "origin", remoteRef: `refs/pull/${number}/head` }, + { remoteName: "upstream", remoteRef: `refs/pull/${number}/head` }, + ]; +} + +// forgejo username pattern, covers github logins too +export function normalizeForgeOwnerForBranch(owner: string | null): string | null { + const normalized = owner?.trim().toLowerCase() ?? ""; + if (!/^[a-z0-9][a-z0-9_.-]*$/.test(normalized)) { + return null; + } + // git refuses .. and .lock, trailing dot too + if (normalized.includes("..") || normalized.endsWith(".") || normalized.endsWith(".lock")) { + return null; + } + return normalized; +} + +export interface ForkLocalBranchNameInput { + headRef: string; + number: number; + isCrossRepository: boolean; + headOwnerLogin: string | null; + /** "pull-ref" when headRef is a synthetic pull ref, not a real branch name (agit PRs, deleted branches); undefined means "branch" */ + headRefKind?: "branch" | "pull-ref"; +} + +export function buildForkLocalBranchName(params: ForkLocalBranchNameInput): string { + const pullRefFallback = `pr-${params.number}`; + // headRef is the literal pull ref (e.g. refs/pull/42/head) when there is no + // real branch to name after, so use the pr number instead + const headSegment = params.headRefKind === "pull-ref" ? pullRefFallback : params.headRef; + if (!params.isCrossRepository) { + return headSegment; + } + const owner = normalizeForgeOwnerForBranch(params.headOwnerLogin); + if (!owner) { + // don't double up pr-/pr- when the owner is also unknown + return headSegment === pullRefFallback ? headSegment : `${pullRefFallback}/${headSegment}`; + } + return `${owner}/${headSegment}`; +} diff --git a/packages/server/src/utils/checkout-git.commit-file-diff.test.ts b/packages/server/src/utils/checkout-git.commit-file-diff.test.ts index fbb22fe3b9..576e9b0c80 100644 --- a/packages/server/src/utils/checkout-git.commit-file-diff.test.ts +++ b/packages/server/src/utils/checkout-git.commit-file-diff.test.ts @@ -3,7 +3,8 @@ import { mkdirSync, mkdtempSync, realpathSync, rmSync, writeFileSync } from "fs" import { tmpdir } from "os"; import { join } from "path"; import { afterEach, describe, expect, it } from "vitest"; -import { getCommitFileDiff } from "./checkout-git.js"; +import { getCommitFileDiff, listCheckoutCommits } from "./checkout-git.js"; +import { startGitCommandMetrics, stopGitCommandMetrics } from "./run-git-command.js"; const tempDirs: string[] = []; @@ -44,6 +45,75 @@ function headSha(repoDir: string): string { } describe("getCommitFileDiff", () => { + it.each(["new.txt", "with spaces.txt"])("preserves a rename-only commit to %s", async (name) => { + const repoDir = initRepo(); + commitFile(repoDir, "old.txt", "same\n", "initial"); + git(["mv", "old.txt", name], repoDir); + git(["-c", "commit.gpgsign=false", "commit", "-m", "rename"], repoDir); + const sha = headSha(repoDir); + + const history = await listCheckoutCommits({ cwd: repoDir }); + expect(history.commits.find((commit) => commit.sha === sha)?.files).toEqual([ + { path: name, status: "renamed", additions: 0, deletions: 0 }, + ]); + expect(await getCommitFileDiff({ cwd: repoDir, sha, path: name })).toEqual({ + path: name, + isNew: false, + isDeleted: false, + additions: 0, + deletions: 0, + hunks: [], + }); + }); + + it.each(["new.txt", "目录.txt"])( + "preserves the edits in a committed rename to %s", + async (name) => { + const repoDir = initRepo(); + commitFile(repoDir, "old.txt", "same\nkeep\nlast\n", "initial"); + git(["mv", "old.txt", name], repoDir); + writeFileSync(join(repoDir, name), "same\nKEEP\nlast\n"); + git(["add", "."], repoDir); + git(["-c", "commit.gpgsign=false", "commit", "-m", "rename and edit"], repoDir); + const sha = headSha(repoDir); + + const history = await listCheckoutCommits({ cwd: repoDir }); + expect(history.commits.find((commit) => commit.sha === sha)?.files).toEqual([ + { path: name, status: "renamed", additions: 1, deletions: 1 }, + ]); + const file = await getCommitFileDiff({ cwd: repoDir, sha, path: name }); + expect(file).toMatchObject({ + path: name, + isNew: false, + isDeleted: false, + additions: 1, + deletions: 1, + }); + expect(file?.hunks.flatMap((hunk) => hunk.lines)).toEqual( + expect.arrayContaining([ + expect.objectContaining({ type: "remove", content: "keep" }), + expect.objectContaining({ type: "add", content: "KEEP" }), + ]), + ); + }, + ); + + it.skipIf(process.platform === "win32")("preserves a rename to a quoted filename", async () => { + const repoDir = initRepo(); + const name = 'new "draft".txt'; + commitFile(repoDir, "old.txt", "same\n", "initial"); + git(["mv", "old.txt", name], repoDir); + git(["-c", "commit.gpgsign=false", "commit", "-m", "rename"], repoDir); + expect(await getCommitFileDiff({ cwd: repoDir, sha: headSha(repoDir), path: name })).toEqual({ + path: name, + isNew: false, + isDeleted: false, + additions: 0, + deletions: 0, + hunks: [], + }); + }); + it("returns the parsed diff for a modified file in a commit", async () => { const repoDir = initRepo(); commitFile(repoDir, "foo.txt", "a\nb\nc\n", "initial"); @@ -78,6 +148,78 @@ describe("getCommitFileDiff", () => { expect(file?.deletions).toBe(0); }); + it.each([ + ["exact", "line1\nline2\nline3\nline4\nline5\nline6\n"], + ["edited", "line1\nline2\nline3\nline4\nline5\nCHANGED\n"], + ])("shows an added %s copy as a new file", async (_kind, addedContent) => { + const repoDir = initRepo(); + commitFile(repoDir, "source.txt", "line1\nline2\nline3\nline4\nline5\nline6\n", "initial"); + commitFile(repoDir, "added.txt", addedContent, "add similar file"); + const sha = headSha(repoDir); + + const history = await listCheckoutCommits({ cwd: repoDir }); + expect(history.commits.find((commit) => commit.sha === sha)?.files).toEqual([ + { path: "added.txt", status: "added", additions: 6, deletions: 0 }, + ]); + const file = await getCommitFileDiff({ cwd: repoDir, sha, path: "added.txt" }); + expect(file).toMatchObject({ + path: "added.txt", + isNew: true, + isDeleted: false, + additions: 6, + deletions: 0, + }); + expect( + file?.hunks + .flatMap((hunk) => hunk.lines) + .filter((line) => line.type !== "header") + .map(({ type, content }) => ({ type, content })), + ).toEqual( + addedContent + .trimEnd() + .split("\n") + .map((content) => ({ type: "add", content })), + ); + }); + + it("shares commit rename discovery across concurrent and later file requests", async () => { + const repoDir = initRepo(); + commitFile(repoDir, "old.txt", "same\n", "initial"); + git(["mv", "old.txt", "new.txt"], repoDir); + commitFile(repoDir, "added.txt", "added\n", "rename and add"); + const sha = headSha(repoDir); + + startGitCommandMetrics(); + try { + const [renamed, added] = await Promise.all([ + getCommitFileDiff({ cwd: repoDir, sha, path: "new.txt" }), + getCommitFileDiff({ cwd: repoDir, sha, path: "added.txt" }), + ]); + expect(renamed).toMatchObject({ isNew: false, additions: 0, deletions: 0 }); + expect(added).toMatchObject({ isNew: true, additions: 1, deletions: 0 }); + expect(await getCommitFileDiff({ cwd: repoDir, sha, path: "new.txt" })).toEqual(renamed); + } finally { + const metrics = stopGitCommandMetrics(); + expect(metrics.commands.filter(({ args }) => args.includes("--name-status"))).toHaveLength(1); + } + }); + + it("rediscovers renames when a symbolic commit ref moves", async () => { + const repoDir = initRepo(); + commitFile(repoDir, "old.txt", "same\n", "initial"); + expect(await getCommitFileDiff({ cwd: repoDir, sha: "HEAD", path: "old.txt" })).toMatchObject({ + isNew: true, + additions: 1, + }); + git(["mv", "old.txt", "new.txt"], repoDir); + git(["-c", "commit.gpgsign=false", "commit", "-m", "rename"], repoDir); + expect(await getCommitFileDiff({ cwd: repoDir, sha: "HEAD", path: "new.txt" })).toMatchObject({ + isNew: false, + additions: 0, + deletions: 0, + }); + }); + it("returns null for a path not changed in the commit", async () => { const repoDir = initRepo(); commitFile(repoDir, "foo.txt", "a\n", "initial"); @@ -89,6 +231,59 @@ describe("getCommitFileDiff", () => { expect(file).toBeNull(); }); + it("does not follow an unchanged file back to an earlier commit", async () => { + const repoDir = initRepo(); + commitFile(repoDir, "foo.txt", "same\n", "initial"); + commitFile(repoDir, "other.txt", "other\n", "unrelated change"); + expect( + await getCommitFileDiff({ cwd: repoDir, sha: headSha(repoDir), path: "foo.txt" }), + ).toBeNull(); + }); + + it("returns the added file in a root commit and the deleted file in its deletion commit", async () => { + const repoDir = initRepo(); + commitFile(repoDir, "foo.txt", "same\n", "initial"); + expect( + await getCommitFileDiff({ cwd: repoDir, sha: headSha(repoDir), path: "foo.txt" }), + ).toMatchObject({ + isNew: true, + isDeleted: false, + additions: 1, + deletions: 0, + }); + git(["rm", "foo.txt"], repoDir); + git(["-c", "commit.gpgsign=false", "commit", "-m", "delete"], repoDir); + expect( + await getCommitFileDiff({ cwd: repoDir, sha: headSha(repoDir), path: "foo.txt" }), + ).toMatchObject({ + isNew: false, + isDeleted: true, + additions: 0, + deletions: 1, + }); + }); + + it("preserves a rename introduced by a merge against its first parent", async () => { + const repoDir = initRepo(); + commitFile(repoDir, "old.txt", "same\n", "initial"); + git(["checkout", "-b", "feature"], repoDir); + git(["mv", "old.txt", "new.txt"], repoDir); + git(["-c", "commit.gpgsign=false", "commit", "-m", "rename"], repoDir); + git(["checkout", "main"], repoDir); + commitFile(repoDir, "main.txt", "main\n", "advance main"); + git(["merge", "--no-ff", "feature", "-m", "merge feature"], repoDir); + expect( + await getCommitFileDiff({ cwd: repoDir, sha: headSha(repoDir), path: "new.txt" }), + ).toMatchObject({ + path: "new.txt", + isNew: false, + isDeleted: false, + additions: 0, + deletions: 0, + hunks: [], + }); + }); + it("returns a merge commit diff against its first parent", async () => { const repoDir = initRepo(); commitFile(repoDir, "README.md", "base\n", "initial"); diff --git a/packages/server/src/utils/checkout-git.ts b/packages/server/src/utils/checkout-git.ts index bda89506b5..ce00702908 100644 --- a/packages/server/src/utils/checkout-git.ts +++ b/packages/server/src/utils/checkout-git.ts @@ -2643,6 +2643,60 @@ export async function listCheckoutCommits({ return { baseRef: comparisonBaseRef, commits }; } +const commitRenamesCache = new TTLCache>>({ + max: 100, + ttl: 60_000, + checkAgeOnGet: true, +}); + +function getCommitRenames(cwd: string, sha: string): Promise> { + // Symbolic refs and abbreviated IDs can resolve to a different commit later. + if (!/^(?:[0-9a-f]{40}|[0-9a-f]{64})$/i.test(sha)) { + return readCommitRenames(cwd, sha); + } + const key = JSON.stringify([cwd, sha]); + const cached = commitRenamesCache.get(key); + if (cached) { + return cached; + } + const lookup = readCommitRenames(cwd, sha).catch((error: unknown) => { + if (commitRenamesCache.get(key) === lookup) { + commitRenamesCache.delete(key); + } + throw error; + }); + // Store the pending lookup too, so concurrent file requests share the scan. + commitRenamesCache.set(key, lookup); + return lookup; +} + +// Discover renames across the commit before narrowing the patch to a file. +// --follow also detects copies, which would disagree with history's -M-only list. +async function readCommitRenames(cwd: string, sha: string): Promise> { + const result = await runGitCommand( + [ + "show", + sha, + "--format=", + "--diff-merges=first-parent", + "--name-status", + "-z", + "-M", + "--diff-filter=R", + ], + { cwd, envOverlay: READ_ONLY_GIT_ENV }, + ); + if (result.truncated) { + throw new Error("Commit renames exceeded the git output limit"); + } + const renames = new Map(); + const fields = result.stdout.split("\0"); + for (let index = 0; index + 2 < fields.length; index += 3) { + renames.set(fields[index + 2]!, fields[index + 1]!); + } + return renames; +} + /** * Fetches the unified diff of a single file as introduced by one commit and * parses it into the same {@link ParsedDiffFile} shape the diff subscription @@ -2665,8 +2719,20 @@ export async function getCommitFileDiff({ path: string; }): Promise { const worktreeRoot = await requireGitWorktreeRoot(cwd); + const renames = await getCommitRenames(worktreeRoot, sha); + const oldPath = renames.get(path); + const paths = oldPath === undefined ? [path] : [oldPath, path]; const { stdout } = await runGitCommand( - ["show", sha, "--format=", "--diff-merges=first-parent", ...GIT_PATCH_FORMAT_ARGS, "--", path], + [ + "show", + sha, + "--format=", + "--diff-merges=first-parent", + "-M", + ...GIT_PATCH_FORMAT_ARGS, + "--", + ...paths.map((filePath) => `:(literal)${filePath}`), + ], { cwd: worktreeRoot, envOverlay: READ_ONLY_GIT_ENV, @@ -2682,8 +2748,8 @@ export async function getCommitFileDiff({ getNewFileContent: (file) => readGitFileContentAtRef(worktreeRoot, sha, file.path), }); - // `--` scopes the diff to a single pathspec, so there is at most one real - // entry. Pick by path to drop any stray header-only section the parser emits. + // Including the rename source lets Git pair it with the destination. Select + // the requested entry if another change also matches the source path. const file = parsedFiles.find((candidate) => candidate.path === path) ?? null; if (!file) { return null; @@ -3423,7 +3489,7 @@ export async function getCheckoutDiff( compare: CheckoutDiffCompare, context?: CheckoutContext, ): Promise { - await requireGitRepo(cwd); + cwd = await requireGitWorktreeRoot(cwd); const refsForDiff = await resolveCheckoutDiffRefs(cwd, compare, context); if (!refsForDiff) { diff --git a/packages/server/src/utils/worktree.test.ts b/packages/server/src/utils/worktree.test.ts index 9b0cba2643..82505dc800 100644 --- a/packages/server/src/utils/worktree.test.ts +++ b/packages/server/src/utils/worktree.test.ts @@ -16,6 +16,7 @@ import { mkdirSync, rmSync, existsSync, + readFileSync, realpathSync, symlinkSync, writeFileSync, @@ -94,6 +95,64 @@ describe("paseo worktree manager", () => { await rm(tempDir, { recursive: true, force: true, maxRetries: 10, retryDelay: 100 }); }); + it.each([ + { existing: [], preferred: "main/patch-1", expected: "main-1/patch-1" }, + { existing: ["main-1"], preferred: "main/patch-1", expected: "main-2/patch-1" }, + { + existing: ["main-1/patch-1"], + preferred: "main/patch-1", + expected: "main-1/patch-1-2", + }, + { + existing: ["bob/patch-1/child"], + preferred: "bob/patch-1", + expected: "bob/patch-1-1", + }, + ])( + "checks out a fork when $preferred conflicts with existing branch paths", + async ({ existing, preferred, expected }) => { + const git = (...args: string[]) => + execFileSync("git", args, { cwd: repoDir, encoding: "utf8", stdio: "pipe" }).trim(); + git("config", "core.autocrlf", "false"); + const baseHead = git("rev-parse", "main"); + for (const branch of existing) git("branch", branch); + git("checkout", "-b", "fixture-pr"); + writeFileSync(join(repoDir, "file.txt"), "from-pr\n"); + git("add", "file.txt"); + git("-c", "commit.gpgsign=false", "commit", "-m", "fork patch"); + const prHead = git("rev-parse", "HEAD"); + git("checkout", "main"); + const remote = join(tempDir, "origin.git"); + git("clone", "--bare", repoDir, remote); + git("remote", "add", "origin", remote); + git(`--git-dir=${remote}`, "update-ref", "refs/pull/1/head", prHead); + git("pack-refs", "--all"); + + const result = await createWorktreePrimitive({ + cwd: repoDir, + paseoHome, + worktreeSlug: "fork-review", + runSetup: false, + source: { + kind: "checkout-change-request", + forge: "gitea", + changeRequestNumber: 1, + headRef: "patch-1", + localBranchName: preferred, + baseRefName: "main", + checkoutRefs: [{ remoteName: "origin", remoteRef: "refs/pull/1/head" }], + }, + }); + + expect(result.branchName).toBe(expected); + expect(git("rev-parse", result.branchName)).toBe(prHead); + expect(readFileSync(join(result.worktreePath, "file.txt"), "utf8")).toBe("from-pr\n"); + for (const branch of ["main", ...existing]) { + expect(git("rev-parse", branch)).toBe(baseHead); + } + }, + ); + it("treats a worktree as paseo-owned even when its .git admin is missing", async () => { const created = await createLegacyWorktreeForTest({ branchName: "orphan-admin-branch", diff --git a/packages/server/src/utils/worktree.ts b/packages/server/src/utils/worktree.ts index f454a7225a..39b64d8137 100644 --- a/packages/server/src/utils/worktree.ts +++ b/packages/server/src/utils/worktree.ts @@ -1778,13 +1778,30 @@ async function localBranchExists(cwd: string, branchName: string): Promise { - let newBranchName = candidateBranch; + const { stdout } = await runGitCommand( + ["for-each-ref", "--format=%(refname:strip=2)", "refs/heads/"], + { cwd, envOverlay: READ_ONLY_GIT_ENV }, + ); + const existingBranches = new Set(stdout.trim().split("\n").filter(Boolean)); + const candidateSegments = candidateBranch.split("/"); + const segments = [...candidateSegments]; let suffix = 1; - while (await localBranchExists(cwd, newBranchName)) { - newBranchName = `${candidateBranch}-${suffix}`; - suffix++; + while (true) { + const branchName = segments.join("/"); + const parentConflict = segments.findIndex((_, index) => + existingBranches.has(segments.slice(0, index + 1).join("/")), + ); + const childConflict = [...existingBranches].some((branch) => + branch.startsWith(`${branchName}/`), + ); + if (parentConflict === -1 && !childConflict) { + return branchName; + } + // Git refs form a namespace: a branch cannot also be another branch's + // parent directory. Rename the conflicting segment, preserving the rest. + const conflictIndex = parentConflict === -1 ? segments.length - 1 : parentConflict; + segments[conflictIndex] = `${candidateSegments[conflictIndex]}-${suffix++}`; } - return newBranchName; } async function isBranchCheckedOut(cwd: string, branchName: string): Promise { diff --git a/packages/website/e2e/sponsors.spec.ts b/packages/website/e2e/sponsors.spec.ts new file mode 100644 index 0000000000..7b42316d54 --- /dev/null +++ b/packages/website/e2e/sponsors.spec.ts @@ -0,0 +1,20 @@ +import { expect, test } from "playwright/test"; + +const PAGES = ["/", "/docs/connectivity", "/changelog"]; + +for (const path of PAGES) { + test(`${path} shows the sponsors and invites the next one`, async ({ page }) => { + await page.goto(path); + + const sponsors = page.getByRole("region", { name: "Sponsors", exact: true }); + await expect(sponsors.getByRole("link", { name: "Hoplite" })).toHaveAttribute( + "href", + "https://hoplite.sh/?utm_source=paseo&utm_medium=website&utm_campaign=sponsor", + ); + await expect(sponsors.getByText("Cloud coding agents", { exact: true })).toBeVisible(); + await expect(sponsors.getByRole("link", { name: "Become a sponsor" })).toHaveAttribute( + "href", + "/sponsor#spot", + ); + }); +} diff --git a/packages/website/public/sponsors/hoplite-on-dark.svg b/packages/website/public/sponsors/hoplite-on-dark.svg new file mode 100644 index 0000000000..55b1da0592 --- /dev/null +++ b/packages/website/public/sponsors/hoplite-on-dark.svg @@ -0,0 +1 @@ + diff --git a/packages/website/public/sponsors/hoplite-on-light.svg b/packages/website/public/sponsors/hoplite-on-light.svg new file mode 100644 index 0000000000..144d1a59c9 --- /dev/null +++ b/packages/website/public/sponsors/hoplite-on-light.svg @@ -0,0 +1 @@ + diff --git a/packages/website/src/components/docs-source-footer.tsx b/packages/website/src/components/docs-source-footer.tsx index 69a9711e80..2b5ea3f131 100644 --- a/packages/website/src/components/docs-source-footer.tsx +++ b/packages/website/src/components/docs-source-footer.tsx @@ -1,3 +1,4 @@ +import { ExternalLink } from "lucide-react"; import type { Doc } from "~/docs"; const GITHUB_BASE_URL = "https://github.com/getpaseo/paseo/blob/main"; @@ -6,9 +7,15 @@ export function DocsSourceFooter({ doc }: { doc: Doc }) { const sourceUrl = `${GITHUB_BASE_URL}/${doc.sourcePath}`; return ( -