Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
59e63fbb5e | ||
|
|
51e844b540 | ||
|
|
367a9d908b | ||
|
|
eef309ec06 | ||
|
|
d75f60ebcc | ||
|
|
6a4c05ce82 | ||
|
|
41582eb5fd | ||
|
|
dee0d138e9 | ||
|
|
986687b8fd | ||
|
|
eee70e7fef | ||
|
|
d5a27e0164 | ||
|
|
8e7e8cce21 | ||
|
|
36fc4f0b43 | ||
|
|
4dae66eb8c | ||
|
|
d6d5a266ad | ||
|
|
460ba8e8a3 | ||
|
|
7a0c6fbd82 | ||
|
|
bede2b90ed | ||
|
|
befc3d5663 | ||
|
|
53bbd7522d | ||
|
|
ce412d04c3 | ||
|
|
de45902652 |
@@ -0,0 +1,19 @@
|
||||
---
|
||||
name: store-screenshots
|
||||
description: Refresh the App Store and Google Play screenshots for phones and tablets. Use when the user says "store screenshots", "app store screenshots", "play store screenshots", "iPad screenshots", "recapture the screenshots", or wants the store panels changed.
|
||||
user-invocable: true
|
||||
---
|
||||
|
||||
# Store screenshots
|
||||
|
||||
Follow `assets/store-screenshots/README.md`. It owns the panels, the creative direction, the render command and the recapture steps. Change copy, crops and layout in `assets/store-screenshots/render.mjs`, not in the exports.
|
||||
|
||||
Working rules:
|
||||
|
||||
- Capture at native density: `--pixel-density 3` on the iPhone 16 Pro Max, `--pixel-density 2` on the iPad Pro 13-inch. The default is 1x, which is too soft for the store.
|
||||
- Every headline wraps to two lines and every subline fits on one. The renderer enforces this; rewrite the copy rather than shrink the type.
|
||||
- Use SF Pro. Never substitute another font.
|
||||
- Open `output/preview.png` and a full-size panel from each store before you report a render. Show the user the preview.
|
||||
- Do not upload screenshots to a store, a PR, or anywhere public, and do not commit, unless the user asks.
|
||||
- Stage the demo host on its own port and pick a free Metro port. Do not restart the main daemons.
|
||||
- When you learn something the next capture needs, fix the README rather than this skill.
|
||||
@@ -418,14 +418,6 @@ jobs:
|
||||
- name: Run app unit tests
|
||||
run: npm run test --workspace=@getpaseo/app
|
||||
|
||||
- uses: actions/setup-java@v4
|
||||
with:
|
||||
distribution: temurin
|
||||
java-version: "21"
|
||||
|
||||
- name: Run Android module tests
|
||||
run: npm run test:android --workspace=@getpaseo/app
|
||||
|
||||
playwright-1:
|
||||
name: playwright (shard 1/8)
|
||||
needs: changes
|
||||
|
||||
@@ -203,6 +203,31 @@
|
||||
"readFileSync",
|
||||
"rmSync"
|
||||
],
|
||||
// Terminal child process: launcher readiness and PTY record ownership run outside the daemon.
|
||||
"terminal/terminal-worker-process.ts": [
|
||||
"chmodSync",
|
||||
"closeSync",
|
||||
"existsSync",
|
||||
"openSync",
|
||||
"rmSync",
|
||||
"writeSync"
|
||||
],
|
||||
// Worker startup only: choose and secure the local listening socket before accepting a controller.
|
||||
"terminal/terminal-worker-socket-path.ts": ["lstatSync", "mkdirSync"],
|
||||
// Startup only: build an independent worker installation before launching; Electron ASAR sources require plain fs reads.
|
||||
"terminal/terminal-worker-runtime.ts": [
|
||||
"chmodSync",
|
||||
"existsSync",
|
||||
"mkdirSync",
|
||||
"readdirSync",
|
||||
"readFileSync",
|
||||
"renameSync",
|
||||
"rmSync",
|
||||
"statSync",
|
||||
"writeFileSync"
|
||||
],
|
||||
// TODO: CLI shim lookup moved out of terminal.ts; migrate the executable-resolution boundary together.
|
||||
"terminal/paseo-cli-path.ts": ["existsSync"],
|
||||
// Node loader thread: TypeScript terminal-worker resolution runs in the loader, outside the daemon event loop.
|
||||
"terminal/terminal-ts-loader.mjs": ["existsSync"],
|
||||
// Terminal child process: executable preparation and shell integration run in the worker-backed terminal manager.
|
||||
|
||||
@@ -10,6 +10,7 @@ Voice settings now let you configure speech providers and download local models
|
||||
|
||||
### Added
|
||||
|
||||
- Copy gitignored files selected by `.worktreeinclude` into new worktrees before setup and agents, using the built-in `worktree-include` plugin ([#8100](https://github.com/getpaseo/paseo/pull/8100))
|
||||
- Let plugins give tools to specific agents ([#7938](https://github.com/getpaseo/paseo/pull/7938))
|
||||
- Added collapse and expand controls for completed conversation turns ([#7785](https://github.com/getpaseo/paseo/pull/7785), [#7990](https://github.com/getpaseo/paseo/pull/7990), [#8026](https://github.com/getpaseo/paseo/pull/8026) by [@akaready](https://github.com/akaready), [@Dey11](https://github.com/Dey11), [@Sebeb](https://github.com/Sebeb), [@Waishnav](https://github.com/Waishnav))
|
||||
- Let plugins add MCP servers whenever an agent session opens ([#7983](https://github.com/getpaseo/paseo/pull/7983))
|
||||
@@ -21,6 +22,8 @@ Voice settings now let you configure speech providers and download local models
|
||||
|
||||
### Improved
|
||||
|
||||
- Added `server.addHook` with `subject.operation.position` names and the awaited `worktree.create.after` hook before setup and agents; deprecated the previous plugin hook registration methods without changing their behavior ([#8081](https://github.com/getpaseo/paseo/pull/8081))
|
||||
|
||||
- Release eligible agent runtimes after one idle hour, resuming the saved session on the next prompt ([#7782](https://github.com/getpaseo/paseo/pull/7782))
|
||||
- Added a link back to the parent in subagent panes ([#7784](https://github.com/getpaseo/paseo/pull/7784))
|
||||
- Added clickable links and selectable descriptions to question cards ([#7419](https://github.com/getpaseo/paseo/pull/7419) by [@NoSync](https://github.com/NoSync))
|
||||
|
||||
@@ -21,6 +21,8 @@
|
||||
|
||||
### 改进
|
||||
|
||||
- 新增采用 `subject.operation.position` 命名的 `server.addHook` 和在 setup 及 Agent 之前等待的 `worktree.create.after` 钩子,弃用原有的插件钩子注册方法并保留原有行为 ([#8081](https://github.com/getpaseo/paseo/pull/8081))
|
||||
|
||||
- 符合条件的 Agent 运行时空闲一小时后释放,下次发送提示词时恢复已保存的会话 ([#7782](https://github.com/getpaseo/paseo/pull/7782))
|
||||
- 在子 Agent 窗格中新增返回父 Agent 的链接 ([#7784](https://github.com/getpaseo/paseo/pull/7784))
|
||||
- 问题卡片新增可点击链接和可选中的描述文本 ([#7419](https://github.com/getpaseo/paseo/pull/7419) by [@NoSync](https://github.com/NoSync))
|
||||
|
||||
@@ -66,6 +66,7 @@ At the start of non-trivial work, list `docs/` and skim anything relevant to the
|
||||
| [docs/android.md](docs/android.md) | App variants, local/cloud builds, EAS workflows, version codes, F-Droid source builds and store metadata |
|
||||
| [docs/docker.md](docs/docker.md) | Running the daemon and bundled web UI in Docker, volumes, agent images, security |
|
||||
| [docs/release.md](docs/release.md) | Release playbook, draft releases, completion checklist |
|
||||
| [docs/terminal-worker.md](docs/terminal-worker.md) | Terminal worker process model, socket/record/secret, protocol-bump rule and draining, the worker's file copy, Windows desktop |
|
||||
| [docs/terminal-activity.md](docs/terminal-activity.md) | Terminal activity indicators — source-agnostic tracker, agent hook reporting, adding a new hook provider |
|
||||
| [SECURITY.md](SECURITY.md) | Relay threat model, E2E encryption, DNS rebinding, agent auth |
|
||||
| [public-docs/hub/security.md](public-docs/hub/security.md) | Public Hub guide — trust boundaries, untrusted triggers, provider controls, and output authority |
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
output/preview.png
|
||||
@@ -0,0 +1,98 @@
|
||||
# Store screenshots
|
||||
|
||||
Five panels for the App Store and Google Play, in phone and tablet sets, made from native captures of the real app. Both sets tell the same story with the same copy; only the capture, the device frame and the callouts change.
|
||||
|
||||
| # | Headline | Capture | Phone callout | Tablet callout |
|
||||
| --- | --------------------------------------- | ---------------------------------------------------------------------- | -------------------------------------------- | ------------------------------------- |
|
||||
| 1 | Run many coding agents at once | Sidebar grouped by status: Needs input, Ready to review, Working, Done | — (agent marks in the background) | — (agent marks in the background) |
|
||||
| 2 | Your full dev environment on your phone | Agent chat: reasoning, tool calls, final summary | — | — (Changes pane open beside the chat) |
|
||||
| 3 | Ask an agent to change the app itself | A chat asking for a plugin, the turn collapsed, the new Deploys pill | The plugin's Preview deploys sheet | The plugin's Deploys popover |
|
||||
| 4 | Review the diff before you merge | `daemon-client.ts` diff with removed and added lines | Jump to file: four changed files with counts | — (the full-width diff reads as is) |
|
||||
| 5 | A real terminal in every workspace | `git status` and a vitest run in the same worktree | The passing test tree | The passing test tree |
|
||||
|
||||
On tablets, panel 2 says "on your tablet" and panel 3 calls the popover a panel. A scene overrides its copy per device in `render.mjs`.
|
||||
|
||||
## Creative direction
|
||||
|
||||
The panels follow paseo.sh:
|
||||
|
||||
- **Canvas:** the site's `#101615` background.
|
||||
- **Type:** centred SF Pro headlines in sentence case, with no closing period. Every headline wraps to exactly two lines.
|
||||
- **Sublines:** one plain grey sentence on one line that says what you can do. The renderer fails if a headline or subline wraps differently, because the device is placed from that fixed text height.
|
||||
- **Agent marks:** panel 1 scatters faded, rotated, monochrome marks of the agents featured on the homepage behind the device. They are rendered from `packages/website/src/components/agent-icons.tsx`, so they follow the site.
|
||||
- **Device:** dark-mode captures in a plain black frame; the iPhone frame has a Dynamic Island. The device starts a fixed gap below the text and runs just off the bottom edge, so a taller canvas gets a larger device instead of a larger gap. A canvas too narrow for that, like a 3:4 iPad on Google's 9:16 tablet canvas, shows the whole device at full width with the text and device centred.
|
||||
- **Callouts:** a callout lifts one region of a capture out of the device, larger than the device around it, so the detail reads at store thumbnail size. On tablets, place callouts over empty screen so they do not hide the context they explain.
|
||||
|
||||
Everything on screen is real app UI showing one story. The hero agent adds jitter to the reconnect backoff in this repository. Its diff, test run and terminal come from a real worktree. The other workspaces fill the sidebar's status groups.
|
||||
|
||||
Panel 3 shows a real plugin. `demo/preview-deploys/` is a trusted local plugin that adds a Deploys composer pill; its popover opens as a sheet on phones and as a popover on tablets. The deploys it lists are sample data. The demo host installs it, and a scripted agent in the "Build a preview deploys plugin" workspace plays the turn that writes it.
|
||||
|
||||
## Files
|
||||
|
||||
- `raw/iphone/`: native 1320 × 2868 captures from an iPhone 16 Pro Max simulator. `files.png` and `plugin-sheet.png` are the sources for the Jump to file and Preview deploys callouts.
|
||||
- `raw/ipad/`: native 2064 × 2752 captures from an iPad Pro 13-inch (M4) simulator. `plugin-sheet.png` is the source for the Deploys popover callout.
|
||||
- `render.mjs`: the layout, copy and callout crops. Edit `SCENES`, `DEVICES` and `STORES` there.
|
||||
- `demo/`: the staged demo host the captures come from.
|
||||
- `output/apple/`: 1320 × 2868 for the iPhone 6.9-inch slot.
|
||||
- `output/google/`: 1440 × 2560 (9:16) phone screenshots, reusing the iPhone captures.
|
||||
- `output/apple-ipad/`: 2064 × 2752 for the iPad 13-inch slot.
|
||||
- `output/google-tablet/`: 1800 × 3200 (9:16) tablet screenshots, reusing the iPad captures.
|
||||
- `output/preview.png`: contact sheet with one row per store, for review only. It is ignored by Git; do not upload it to a store.
|
||||
|
||||
All exports are opaque RGB PNGs.
|
||||
|
||||
## Render
|
||||
|
||||
```sh
|
||||
SF_FONT_DIR=/path/to/fonts node assets/store-screenshots/render.mjs
|
||||
```
|
||||
|
||||
`SF_FONT_DIR` must hold `SFNS.ttf` copied from a Mac's `/System/Library/Fonts`. On macOS the renderer finds it without the variable. SF Pro is not redistributable, so it is not in the repository. The renderer fails rather than fall back to another font.
|
||||
|
||||
Each capture and callout is resized with Lanczos to the exact pixels it fills, and the page renders at device scale 1. Do not render at a higher scale and downsample: Chrome's image downscaling is what made earlier exports look soft and aliased.
|
||||
|
||||
Open `output/preview.png` and at least one full-size panel per store before you call a render done. The line guard catches wrapping, not a callout that covers the wrong thing.
|
||||
|
||||
Callout crops are in native capture pixels. To find them, overlay a 100 px grid on the capture with sharp and read the coordinates off it.
|
||||
|
||||
## Recapture
|
||||
|
||||
1. Stage the demo host. It runs an in-process daemon on port 7791 with scripted Claude Code and Codex clients, a local clone of this repository as the `paseo` project, real worktrees, and a terminal in the hero worktree:
|
||||
|
||||
```sh
|
||||
npx tsx assets/store-screenshots/demo/stage.mts
|
||||
```
|
||||
|
||||
Each run re-clones the repository into the demo home, so stale worktrees from an earlier run do not block it. The hero agent is paced so it reports a realistic "Worked for" time. Wait for `READY` in its output.
|
||||
|
||||
2. Start Metro against it on a free port. When the simulator runs on another Mac, forward Metro and the daemon to it. Other agents may already hold a Metro port; pick another one rather than stopping theirs.
|
||||
|
||||
```sh
|
||||
EXPO_PUBLIC_LOCAL_DAEMON=127.0.0.1:7791 npm run start:expo --workspace=@getpaseo/app -- --port <port>
|
||||
ssh -o ExitOnForwardFailure=yes -R <port>:127.0.0.1:<port> -R 7791:127.0.0.1:7791 <mac-host>
|
||||
```
|
||||
|
||||
3. On the simulator, install and open the dev client (`sh.paseo.debug`) at `http://127.0.0.1:<port>`. Use an iPhone 16 Pro Max for the phone set and an iPad Pro 13-inch (M4) in portrait for the tablet set.
|
||||
- Set dark appearance and override the status bar to 9:41 with full battery and signal (`xcrun simctl status_bar <device> override`).
|
||||
- On first launch, accept the open-in-app dialog, decline notifications, turn off the dev client's Tools button, and close any error toast. `agent-device react-native dismiss-overlay` clears overlays.
|
||||
- Name the host "MacBook Pro" and set the sidebar badge to Hidden.
|
||||
- Group the sidebar by status.
|
||||
- If you reset the simulator, reinstall the dev client.
|
||||
|
||||
4. Capture the sidebar first. Opening a "Ready to review" workspace marks it done. Select a Working row before you capture.
|
||||
|
||||
5. Capture every screen at native density. `agent-device screenshot` defaults to 1x, which is too soft for the store:
|
||||
|
||||
```sh
|
||||
agent-device screenshot /tmp/sidebar.png --pixel-density 3 --session store # iPhone: 1320 × 2868
|
||||
agent-device screenshot /tmp/sidebar.png --pixel-density 2 --session store # iPad: 2064 × 2752
|
||||
```
|
||||
|
||||
- **Chat:** expand the tool-call group and scroll to the bottom. On iPad, open Explorer → Changes beside the chat.
|
||||
- **Diff:** on iPhone, Explorer → Changes, then use Jump to file to reach `daemon-client.ts`. On iPad, collapse the sidebar, open a Diff tab from the main area's **+** menu and scroll to the `daemon-client.ts` hunks.
|
||||
- **Terminal:** the second workspace tab. Type the commands with `npm run cli -- terminal send-keys --host 127.0.0.1:7791 <terminal-id> "<text>" Enter` instead of the simulator keyboard, then dismiss the software keyboard.
|
||||
- **Plugin:** the "Build a preview deploys plugin" workspace with the turn collapsed, then tap **Deploys** for `plugin-sheet.png`. After editing the plugin, reload it with `npm run cli -- plugin reload --host 127.0.0.1:7791 preview-deploys`.
|
||||
|
||||
6. Copy the captures into `raw/iphone/` or `raw/ipad/` under the names `render.mjs` uses, render, and check the preview.
|
||||
|
||||
Dimensions are checked against [Apple's screenshot specifications](https://developer.apple.com/help/app-store-connect/reference/app-information/screenshot-specifications/) and [Google Play's preview asset requirements](https://support.google.com/googleplay/android-developer/answer/9866151?hl=en).
|
||||
@@ -0,0 +1,84 @@
|
||||
// Applies the demo change to a checkout of the Paseo repository.
|
||||
import { copyFileSync, readFileSync, writeFileSync } from "node:fs";
|
||||
import path from "node:path";
|
||||
import { fileURLToPath } from "node:url";
|
||||
|
||||
const here = path.dirname(fileURLToPath(import.meta.url));
|
||||
const repo = process.argv[2];
|
||||
const client = path.join(repo, "packages/client/src");
|
||||
|
||||
copyFileSync(
|
||||
path.join(here, "reconnect-delay.ts"),
|
||||
path.join(client, "connection/reconnect-delay.ts"),
|
||||
);
|
||||
copyFileSync(
|
||||
path.join(here, "reconnect-delay.test.ts"),
|
||||
path.join(client, "connection/reconnect-delay.test.ts"),
|
||||
);
|
||||
|
||||
function edit(file, pairs) {
|
||||
let text = readFileSync(file, "utf8");
|
||||
for (const [from, to] of pairs) {
|
||||
if (!text.includes(from)) throw new Error(`Missing anchor in ${file}: ${from.slice(0, 60)}`);
|
||||
text = text.replace(from, to);
|
||||
}
|
||||
writeFileSync(file, text);
|
||||
}
|
||||
|
||||
edit(path.join(client, "daemon-client.ts"), [
|
||||
[
|
||||
`import { CreationClient } from "./creation/index.js";\n`,
|
||||
`import { CreationClient } from "./creation/index.js";\nimport { getReconnectDelayMs } from "./connection/reconnect-delay.js";\n`,
|
||||
],
|
||||
[
|
||||
` private reconnectAttempt = 0;\n`,
|
||||
` private reconnectAttempt = 0;\n private nextReconnectDelay: { attempt: number; delayMs: number } | null = null;\n`,
|
||||
],
|
||||
[
|
||||
` nextRetryAt: new Date(
|
||||
Date.now() +
|
||||
Math.min(
|
||||
(this.config.reconnect?.baseDelayMs ?? DEFAULT_RECONNECT_BASE_DELAY_MS) *
|
||||
2 ** this.reconnectAttempt,
|
||||
this.config.reconnect?.maxDelayMs ?? DEFAULT_RECONNECT_MAX_DELAY_MS,
|
||||
),
|
||||
).toISOString(),
|
||||
`,
|
||||
` nextRetryAt: new Date(Date.now() + this.getNextReconnectDelayMs()).toISOString(),
|
||||
`,
|
||||
],
|
||||
[
|
||||
` private armReconnectTimer(): void {
|
||||
const attempt = this.reconnectAttempt;
|
||||
const baseDelay = this.config.reconnect?.baseDelayMs ?? DEFAULT_RECONNECT_BASE_DELAY_MS;
|
||||
const maxDelay = this.config.reconnect?.maxDelayMs ?? DEFAULT_RECONNECT_MAX_DELAY_MS;
|
||||
const delay = Math.min(baseDelay * 2 ** attempt, maxDelay);
|
||||
`,
|
||||
` // The countdown and the timer must agree, so each attempt draws its jitter once.
|
||||
private getNextReconnectDelayMs(): number {
|
||||
const attempt = this.reconnectAttempt;
|
||||
if (this.nextReconnectDelay?.attempt !== attempt) {
|
||||
this.nextReconnectDelay = {
|
||||
attempt,
|
||||
delayMs: getReconnectDelayMs(attempt, {
|
||||
baseDelayMs: this.config.reconnect?.baseDelayMs ?? DEFAULT_RECONNECT_BASE_DELAY_MS,
|
||||
maxDelayMs: this.config.reconnect?.maxDelayMs ?? DEFAULT_RECONNECT_MAX_DELAY_MS,
|
||||
}),
|
||||
};
|
||||
}
|
||||
return this.nextReconnectDelay.delayMs;
|
||||
}
|
||||
|
||||
private armReconnectTimer(): void {
|
||||
const attempt = this.reconnectAttempt;
|
||||
const delay = this.getNextReconnectDelayMs();
|
||||
`,
|
||||
],
|
||||
]);
|
||||
|
||||
edit(path.join(repo, "CHANGELOG.md"), [
|
||||
[
|
||||
`# Changelog\n\n`,
|
||||
`# Changelog\n\n## Unreleased\n\n### Fixed\n\n- Spread reconnect attempts after a relay restart instead of retrying every client at once\n\n`,
|
||||
],
|
||||
]);
|
||||
@@ -0,0 +1,29 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { getReconnectDelayMs } from "./reconnect-delay";
|
||||
|
||||
const options = { baseDelayMs: 1500, maxDelayMs: 30_000 };
|
||||
|
||||
describe("getReconnectDelayMs", () => {
|
||||
it("doubles the ceiling on each attempt", () => {
|
||||
const top = () => 1;
|
||||
expect(getReconnectDelayMs(0, options, top)).toBe(1500);
|
||||
expect(getReconnectDelayMs(1, options, top)).toBe(3000);
|
||||
expect(getReconnectDelayMs(2, options, top)).toBe(6000);
|
||||
});
|
||||
|
||||
it("never waits longer than the max delay", () => {
|
||||
expect(getReconnectDelayMs(12, options, () => 1)).toBe(30_000);
|
||||
});
|
||||
|
||||
it("spreads retries between half and the full ceiling", () => {
|
||||
expect(getReconnectDelayMs(3, options, () => 0)).toBe(6000);
|
||||
expect(getReconnectDelayMs(3, options, () => 0.5)).toBe(9000);
|
||||
expect(getReconnectDelayMs(3, options, () => 1)).toBe(12_000);
|
||||
});
|
||||
|
||||
it("keeps the first retry under two seconds", () => {
|
||||
for (let i = 0; i < 100; i += 1) {
|
||||
expect(getReconnectDelayMs(0, options)).toBeLessThanOrEqual(1500);
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,18 @@
|
||||
export interface ReconnectDelayOptions {
|
||||
baseDelayMs: number;
|
||||
maxDelayMs: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Exponential backoff with equal jitter. Half of each delay is fixed and half
|
||||
* is random, so a relay restart spreads reconnects out instead of every client
|
||||
* retrying on the same tick.
|
||||
*/
|
||||
export function getReconnectDelayMs(
|
||||
attempt: number,
|
||||
options: ReconnectDelayOptions,
|
||||
random: () => number = Math.random,
|
||||
): number {
|
||||
const ceiling = Math.min(options.baseDelayMs * 2 ** attempt, options.maxDelayMs);
|
||||
return Math.round(ceiling / 2 + random() * (ceiling / 2));
|
||||
}
|
||||
@@ -0,0 +1,204 @@
|
||||
// The plugin the demo agent "builds" in the store screenshots: a Deploys pill on
|
||||
// every composer that opens the latest preview deploy for each branch. The
|
||||
// deploys are fixed sample data; the UI is a real plugin surface.
|
||||
import type {
|
||||
PluginButtonContentProps,
|
||||
PluginButtonRegistration,
|
||||
PluginClientContext,
|
||||
} from "@getpaseo/plugin/client";
|
||||
import { useMemo } from "react";
|
||||
import { Text, View } from "react-native";
|
||||
|
||||
type DeployStatus = "ready" | "building" | "failed";
|
||||
|
||||
interface Deploy {
|
||||
branch: string;
|
||||
status: DeployStatus;
|
||||
detail: string;
|
||||
age: string;
|
||||
progress?: number;
|
||||
}
|
||||
|
||||
const DEPLOYS: Deploy[] = [
|
||||
{ branch: "fix/reconnect-jitter", status: "ready", detail: "Built in 48s", age: "2m" },
|
||||
{
|
||||
branch: "perf/provider-snapshot-cache",
|
||||
status: "building",
|
||||
detail: "Bundling app",
|
||||
age: "now",
|
||||
progress: 0.64,
|
||||
},
|
||||
{ branch: "feat/remember-terminal", status: "ready", detail: "Built in 51s", age: "18m" },
|
||||
{
|
||||
branch: "i18n/ko-settings",
|
||||
status: "failed",
|
||||
detail: "Missing key settings.notifications",
|
||||
age: "26m",
|
||||
},
|
||||
];
|
||||
|
||||
function DeploysSheet({ theme, layout }: PluginButtonContentProps) {
|
||||
const mono = layout.platform === "ios" ? "Menlo" : "monospace";
|
||||
const styles = useMemo(
|
||||
() => ({
|
||||
// Popovers on tablets and desktop are narrow by default; give the
|
||||
// branch names room. Phones show the sheet at full width.
|
||||
body: { gap: 14, width: layout.compact ? undefined : 400 },
|
||||
production: {
|
||||
padding: 14,
|
||||
gap: 6,
|
||||
borderRadius: 12,
|
||||
backgroundColor: theme.colors.surface2,
|
||||
},
|
||||
productionTop: { flexDirection: "row" as const, alignItems: "center" as const, gap: 8 },
|
||||
label: { color: theme.colors.foregroundMuted, fontSize: 13 },
|
||||
version: { color: theme.colors.foreground, fontSize: 22, fontWeight: "600" as const },
|
||||
live: { color: theme.colors.statusSuccess, fontSize: 13, fontWeight: "600" as const },
|
||||
heading: { color: theme.colors.foregroundMuted, fontSize: 13, marginTop: 4 },
|
||||
list: {
|
||||
borderRadius: 12,
|
||||
borderWidth: 1,
|
||||
borderColor: theme.colors.border,
|
||||
overflow: "hidden" as const,
|
||||
},
|
||||
row: {
|
||||
flexDirection: "row" as const,
|
||||
alignItems: "center" as const,
|
||||
gap: 12,
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 14,
|
||||
},
|
||||
divider: { height: 1, backgroundColor: theme.colors.border },
|
||||
text: { flex: 1, gap: 4 },
|
||||
branch: { color: theme.colors.foreground, fontSize: 14, fontFamily: mono },
|
||||
detail: { color: theme.colors.foregroundMuted, fontSize: 13 },
|
||||
failed: { color: theme.colors.statusDanger, fontSize: 13 },
|
||||
age: { color: theme.colors.foregroundMuted, fontSize: 13 },
|
||||
track: {
|
||||
height: 4,
|
||||
marginTop: 4,
|
||||
borderRadius: 2,
|
||||
backgroundColor: theme.colors.surface2,
|
||||
overflow: "hidden" as const,
|
||||
},
|
||||
}),
|
||||
[theme, mono, layout.compact],
|
||||
);
|
||||
const dotColor: Record<DeployStatus, string> = {
|
||||
ready: theme.colors.statusSuccess,
|
||||
building: theme.colors.statusWarning,
|
||||
failed: theme.colors.statusDanger,
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={styles.body}>
|
||||
<View style={styles.production}>
|
||||
<View style={styles.productionTop}>
|
||||
<Dot color={theme.colors.statusSuccess} />
|
||||
<Text style={styles.live}>Live</Text>
|
||||
<Text style={styles.label}>Production · main</Text>
|
||||
</View>
|
||||
<Text style={styles.version}>v0.14.0-beta.1</Text>
|
||||
<Text style={styles.label}>Deployed 3h ago</Text>
|
||||
</View>
|
||||
<Text style={styles.heading}>Previews</Text>
|
||||
<View style={styles.list}>
|
||||
{DEPLOYS.map((deploy, index) => (
|
||||
<View key={deploy.branch}>
|
||||
{index > 0 ? <View style={styles.divider} /> : null}
|
||||
<View style={styles.row}>
|
||||
<Dot color={dotColor[deploy.status]} />
|
||||
<View style={styles.text}>
|
||||
<Text style={styles.branch} numberOfLines={1}>
|
||||
{deploy.branch}
|
||||
</Text>
|
||||
<Text style={deploy.status === "failed" ? styles.failed : styles.detail}>
|
||||
{deploy.detail}
|
||||
</Text>
|
||||
{deploy.progress !== undefined ? (
|
||||
<Progress
|
||||
value={deploy.progress}
|
||||
track={styles.track}
|
||||
color={theme.colors.statusWarning}
|
||||
/>
|
||||
) : null}
|
||||
</View>
|
||||
<Text style={styles.age}>{deploy.age}</Text>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function Progress({ value, track, color }: { value: number; track: object; color: string }) {
|
||||
const fill = useMemo(
|
||||
() => ({ width: `${value * 100}%` as const, height: 4, backgroundColor: color }),
|
||||
[value, color],
|
||||
);
|
||||
return (
|
||||
<View style={track}>
|
||||
<View style={fill} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function Dot({ color }: { color: string }) {
|
||||
const style = useMemo(
|
||||
() => ({ width: 8, height: 8, borderRadius: 4, backgroundColor: color }),
|
||||
[color],
|
||||
);
|
||||
return <View style={style} />;
|
||||
}
|
||||
|
||||
export default function contribute(client: PluginClientContext) {
|
||||
const pills = new Map<string, PluginButtonRegistration>();
|
||||
const lifetime = new AbortController();
|
||||
const register = (agent: { id: string; workspaceId?: string | null }) => {
|
||||
if (lifetime.signal.aborted || !agent.workspaceId) return;
|
||||
pills.get(agent.id)?.remove();
|
||||
pills.set(
|
||||
agent.id,
|
||||
client.addComposerPill({
|
||||
id: "deploys",
|
||||
workspaceId: agent.workspaceId,
|
||||
agentId: agent.id,
|
||||
button: {
|
||||
title: "Preview deploys",
|
||||
icon: "Rocket",
|
||||
label: "Deploys",
|
||||
behavior: { kind: "popover", Content: DeploysSheet },
|
||||
},
|
||||
}),
|
||||
);
|
||||
};
|
||||
void client.paseo.agents
|
||||
.list({ subscribe: {}, signal: lifetime.signal })
|
||||
.then(({ subscription }) => {
|
||||
subscription.subscribe({
|
||||
snapshot: ({ entries }) => {
|
||||
for (const pill of pills.values()) pill.remove();
|
||||
pills.clear();
|
||||
for (const { agent } of entries) register(agent);
|
||||
},
|
||||
update: (message) => {
|
||||
if (message.type !== "agent_update") return;
|
||||
const update = message.payload;
|
||||
if (update.kind === "remove") {
|
||||
pills.get(update.agentId)?.remove();
|
||||
pills.delete(update.agentId);
|
||||
} else register(update.agent);
|
||||
},
|
||||
});
|
||||
return undefined;
|
||||
})
|
||||
.catch((error) => {
|
||||
if (!lifetime.signal.aborted) console.error("Agent observation failed", error);
|
||||
});
|
||||
return () => {
|
||||
lifetime.abort();
|
||||
for (const pill of pills.values()) pill.remove();
|
||||
pills.clear();
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"id": "preview-deploys",
|
||||
"requirements": { "paseo": ">=0.8.0" }
|
||||
}
|
||||
@@ -0,0 +1,281 @@
|
||||
// Scripted Claude Code and Codex clients for staging store screenshots.
|
||||
// Each agent replays a fixed conversation through the real daemon, so the app
|
||||
// renders real timeline rows, permission prompts, and running states.
|
||||
import { randomUUID } from "node:crypto";
|
||||
import type {
|
||||
AgentCapabilityFlags,
|
||||
AgentClient,
|
||||
AgentMode,
|
||||
AgentModelDefinition,
|
||||
AgentPermissionRequest,
|
||||
AgentPermissionResponse,
|
||||
AgentPersistenceHandle,
|
||||
AgentPromptInput,
|
||||
AgentRunResult,
|
||||
AgentSession,
|
||||
AgentSessionConfig,
|
||||
AgentStreamEvent,
|
||||
AgentTimelineItem,
|
||||
ToolCallDetail,
|
||||
} from "../../../packages/server/src/server/agent/agent-sdk-types.js";
|
||||
import { getAgentProviderDefinition } from "@getpaseo/protocol/provider-manifest";
|
||||
|
||||
export type ScriptStep =
|
||||
| { kind: "say"; text: string }
|
||||
| { kind: "think"; text: string }
|
||||
| { kind: "tool"; name: string; detail: ToolCallDetail }
|
||||
| { kind: "todo"; items: { text: string; completed: boolean }[] }
|
||||
| { kind: "wait"; ms: number }
|
||||
| { kind: "running-tool"; name: string; detail: ToolCallDetail }
|
||||
| { kind: "ask"; name: string; title: string; detail: ToolCallDetail };
|
||||
|
||||
export interface AgentScript {
|
||||
/** Matched against the start of the prompt that opens the turn. */
|
||||
prompt: string;
|
||||
steps: ScriptStep[];
|
||||
/** Leave the turn open after the last step. */
|
||||
keepRunning?: boolean;
|
||||
/** Pause between steps, so "Worked for" reflects a believable duration. */
|
||||
stepDelayMs?: number;
|
||||
}
|
||||
|
||||
const CAPABILITIES: AgentCapabilityFlags = {
|
||||
supportsStreaming: true,
|
||||
supportsSessionPersistence: true,
|
||||
supportsDynamicModes: false,
|
||||
supportsMcpServers: false,
|
||||
supportsReasoningStream: true,
|
||||
supportsToolInvocations: true,
|
||||
supportsRewindConversation: false,
|
||||
supportsRewindFiles: false,
|
||||
supportsRewindBoth: false,
|
||||
};
|
||||
|
||||
const MODELS: Record<string, AgentModelDefinition[]> = {
|
||||
claude: [
|
||||
{
|
||||
provider: "claude",
|
||||
id: "claude-opus-5-5",
|
||||
label: "Opus 5.5",
|
||||
isDefault: true,
|
||||
thinkingOptions: [
|
||||
{ id: "medium", label: "Medium", isDefault: true },
|
||||
{ id: "high", label: "High" },
|
||||
],
|
||||
defaultThinkingOptionId: "medium",
|
||||
},
|
||||
{ provider: "claude", id: "claude-sonnet-5-5", label: "Sonnet 5.5" },
|
||||
],
|
||||
codex: [
|
||||
{
|
||||
provider: "codex",
|
||||
id: "gpt-5.6-sol",
|
||||
label: "GPT-5.6-Sol",
|
||||
isDefault: true,
|
||||
thinkingOptions: [
|
||||
{ id: "medium", label: "Medium", isDefault: true },
|
||||
{ id: "high", label: "High" },
|
||||
],
|
||||
defaultThinkingOptionId: "medium",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
function promptText(prompt: AgentPromptInput): string {
|
||||
if (typeof prompt === "string") return prompt;
|
||||
return prompt
|
||||
.map((block) => ("text" in block && typeof block.text === "string" ? block.text : ""))
|
||||
.join("");
|
||||
}
|
||||
|
||||
class ScriptedSession implements AgentSession {
|
||||
readonly capabilities = CAPABILITIES;
|
||||
readonly id = randomUUID();
|
||||
private readonly listeners = new Set<(event: AgentStreamEvent) => void>();
|
||||
private readonly history: AgentStreamEvent[] = [];
|
||||
private pending: AgentPermissionRequest[] = [];
|
||||
private activeTurnId: string | null = null;
|
||||
|
||||
constructor(
|
||||
readonly provider: string,
|
||||
private readonly config: AgentSessionConfig,
|
||||
private readonly scripts: AgentScript[],
|
||||
) {}
|
||||
|
||||
private emit(event: AgentStreamEvent): void {
|
||||
const tagged = this.activeTurnId ? { ...event, turnId: this.activeTurnId } : event;
|
||||
this.history.push(tagged);
|
||||
for (const listener of this.listeners) listener(tagged);
|
||||
}
|
||||
|
||||
private timeline(item: AgentTimelineItem): void {
|
||||
this.emit({ type: "timeline", provider: this.provider, item });
|
||||
}
|
||||
|
||||
async run(): Promise<AgentRunResult> {
|
||||
return { sessionId: this.id, finalText: "", timeline: [] };
|
||||
}
|
||||
|
||||
async startTurn(prompt: AgentPromptInput): Promise<{ turnId: string }> {
|
||||
const turnId = randomUUID();
|
||||
this.activeTurnId = turnId;
|
||||
const text = promptText(prompt);
|
||||
const script = this.scripts.find((candidate) => text.startsWith(candidate.prompt));
|
||||
setTimeout(() => void this.play(text, script), 50);
|
||||
return { turnId };
|
||||
}
|
||||
|
||||
private async play(text: string, script: AgentScript | undefined): Promise<void> {
|
||||
this.emit({ type: "turn_started", provider: this.provider });
|
||||
this.timeline({ type: "user_message", text, messageId: randomUUID() });
|
||||
const delay = script?.stepDelayMs ?? 400;
|
||||
for (const step of script?.steps ?? [{ kind: "say", text: "Done." } as const]) {
|
||||
await new Promise((resolve) => setTimeout(resolve, step.kind === "wait" ? step.ms : delay));
|
||||
this.playStep(step);
|
||||
if (step.kind === "ask") return;
|
||||
}
|
||||
if (script?.keepRunning) return;
|
||||
this.emit({
|
||||
type: "turn_completed",
|
||||
provider: this.provider,
|
||||
usage: { inputTokens: 48_210, outputTokens: 3_904 },
|
||||
});
|
||||
this.activeTurnId = null;
|
||||
}
|
||||
|
||||
private playStep(step: ScriptStep): void {
|
||||
switch (step.kind) {
|
||||
case "say":
|
||||
this.timeline({ type: "assistant_message", text: step.text, messageId: randomUUID() });
|
||||
return;
|
||||
case "think":
|
||||
this.timeline({ type: "reasoning", text: step.text });
|
||||
return;
|
||||
case "todo":
|
||||
this.timeline({ type: "todo", items: step.items });
|
||||
return;
|
||||
case "wait":
|
||||
return;
|
||||
case "tool":
|
||||
case "running-tool": {
|
||||
const callId = randomUUID();
|
||||
this.timeline({
|
||||
type: "tool_call",
|
||||
callId,
|
||||
name: step.name,
|
||||
status: "running",
|
||||
error: null,
|
||||
detail: step.detail,
|
||||
});
|
||||
if (step.kind === "tool") {
|
||||
this.timeline({
|
||||
type: "tool_call",
|
||||
callId,
|
||||
name: step.name,
|
||||
status: "completed",
|
||||
error: null,
|
||||
detail: step.detail,
|
||||
});
|
||||
}
|
||||
return;
|
||||
}
|
||||
case "ask": {
|
||||
const request: AgentPermissionRequest = {
|
||||
id: randomUUID(),
|
||||
provider: this.provider,
|
||||
name: step.name,
|
||||
kind: "tool",
|
||||
title: step.title,
|
||||
detail: step.detail,
|
||||
};
|
||||
this.pending = [request];
|
||||
this.emit({ type: "permission_requested", provider: this.provider, request });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
subscribe(callback: (event: AgentStreamEvent) => void): () => void {
|
||||
this.listeners.add(callback);
|
||||
return () => this.listeners.delete(callback);
|
||||
}
|
||||
|
||||
async *streamHistory(): AsyncGenerator<AgentStreamEvent> {
|
||||
yield* this.history;
|
||||
}
|
||||
|
||||
async getRuntimeInfo() {
|
||||
return {
|
||||
provider: this.provider,
|
||||
sessionId: this.id,
|
||||
model: this.config.model ?? MODELS[this.provider]?.[0]?.id ?? null,
|
||||
thinkingOptionId: this.config.thinkingOptionId ?? "medium",
|
||||
modeId: this.config.modeId ?? null,
|
||||
};
|
||||
}
|
||||
|
||||
async getAvailableModes(): Promise<AgentMode[]> {
|
||||
return getAgentProviderDefinition(this.provider).modes;
|
||||
}
|
||||
|
||||
async getCurrentMode(): Promise<string | null> {
|
||||
return this.config.modeId ?? null;
|
||||
}
|
||||
|
||||
async setMode(): Promise<void> {}
|
||||
|
||||
getPendingPermissions(): AgentPermissionRequest[] {
|
||||
return this.pending;
|
||||
}
|
||||
|
||||
async respondToPermission(requestId: string, resolution: AgentPermissionResponse) {
|
||||
this.pending = [];
|
||||
this.emit({ type: "permission_resolved", provider: this.provider, requestId, resolution });
|
||||
}
|
||||
|
||||
describePersistence(): AgentPersistenceHandle {
|
||||
return { provider: this.provider, sessionId: this.id };
|
||||
}
|
||||
|
||||
async interrupt(): Promise<void> {
|
||||
if (!this.activeTurnId) return;
|
||||
this.emit({ type: "turn_canceled", provider: this.provider, reason: "Interrupted" });
|
||||
this.activeTurnId = null;
|
||||
}
|
||||
|
||||
async close(): Promise<void> {}
|
||||
}
|
||||
|
||||
export class ScriptedAgentClient implements AgentClient {
|
||||
readonly capabilities = CAPABILITIES;
|
||||
|
||||
constructor(
|
||||
readonly provider: string,
|
||||
private readonly scripts: AgentScript[],
|
||||
) {}
|
||||
|
||||
async createSession(config: AgentSessionConfig): Promise<AgentSession> {
|
||||
return new ScriptedSession(this.provider, config, this.scripts);
|
||||
}
|
||||
|
||||
async resumeSession(
|
||||
_handle: AgentPersistenceHandle,
|
||||
overrides?: Partial<AgentSessionConfig>,
|
||||
): Promise<AgentSession> {
|
||||
return new ScriptedSession(
|
||||
this.provider,
|
||||
{ provider: this.provider, cwd: overrides?.cwd ?? process.cwd(), ...overrides },
|
||||
this.scripts,
|
||||
);
|
||||
}
|
||||
|
||||
async fetchCatalog() {
|
||||
return {
|
||||
models: MODELS[this.provider] ?? [],
|
||||
modes: getAgentProviderDefinition(this.provider).modes,
|
||||
};
|
||||
}
|
||||
|
||||
async isAvailable(): Promise<boolean> {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,556 @@
|
||||
// Stages the demo host used for store screenshots.
|
||||
//
|
||||
// npx tsx assets/store-screenshots/demo/stage.mts
|
||||
//
|
||||
// Starts an in-process daemon on DEMO_PORT (default 7791) with scripted Claude
|
||||
// Code and Codex clients, adds a local clone of this repository as the `paseo`
|
||||
// project, cuts real worktrees, applies a real change to the hero worktree, and
|
||||
// opens a terminal there. Leave it running while you capture.
|
||||
import { execFileSync, execSync } from "node:child_process";
|
||||
import { existsSync } from "node:fs";
|
||||
import { mkdir, readFile, rm, symlink, writeFile } from "node:fs/promises";
|
||||
import path from "node:path";
|
||||
import { fileURLToPath } from "node:url";
|
||||
import { createTestPaseoDaemon } from "../../../packages/server/src/server/test-utils/paseo-daemon.js";
|
||||
import { DaemonClient } from "../../../packages/server/src/server/test-utils/daemon-client.js";
|
||||
import { type AgentScript, ScriptedAgentClient } from "./scripted-agents.mjs";
|
||||
|
||||
const here = path.dirname(fileURLToPath(import.meta.url));
|
||||
const repoRoot = path.resolve(here, "../../..");
|
||||
const demoRoot = path.join(repoRoot, ".dev/store-capture/demo");
|
||||
const codeRoot = path.join(demoRoot, "code");
|
||||
const pluginDir = path.join(here, "preview-deploys");
|
||||
const port = Number(process.env.DEMO_PORT ?? 7791);
|
||||
const minute = 60_000;
|
||||
|
||||
const claudeScripts: AgentScript[] = [];
|
||||
const codexScripts: AgentScript[] = [];
|
||||
|
||||
function git(cwd: string, ...args: string[]): string {
|
||||
return execFileSync("git", ["-c", "user.name=Mo", "-c", "user.email=mo@paseo.sh", ...args], {
|
||||
cwd,
|
||||
encoding: "utf8",
|
||||
});
|
||||
}
|
||||
|
||||
function run(cwd: string, command: string): string {
|
||||
return execSync(command, { cwd, encoding: "utf8", env: { ...process.env, FORCE_COLOR: "0" } });
|
||||
}
|
||||
|
||||
async function prepareRepos(): Promise<void> {
|
||||
// A fresh clone each run: worktrees from an earlier run stay registered in it.
|
||||
// Worktree setup (npm ci, builds) is dropped so new worktrees open instantly.
|
||||
const paseo = path.join(codeRoot, "paseo");
|
||||
await rm(paseo, { recursive: true, force: true });
|
||||
await mkdir(codeRoot, { recursive: true });
|
||||
execFileSync("git", ["clone", "-q", "--local", repoRoot, paseo]);
|
||||
git(paseo, "checkout", "-q", "-B", "main");
|
||||
git(paseo, "remote", "remove", "origin");
|
||||
const config = JSON.parse(await readFile(path.join(paseo, "paseo.json"), "utf8"));
|
||||
delete config.worktree;
|
||||
await writeFile(path.join(paseo, "paseo.json"), `${JSON.stringify(config, null, 2)}\n`);
|
||||
git(paseo, "commit", "-qam", "chore: skip worktree setup in demo");
|
||||
const dotfiles = path.join(codeRoot, "dotfiles");
|
||||
if (!existsSync(dotfiles)) {
|
||||
await mkdir(dotfiles, { recursive: true });
|
||||
await writeFile(path.join(dotfiles, "tmux.conf"), "set -g mouse on\nset -g base-index 1\n");
|
||||
await writeFile(path.join(dotfiles, "zshrc"), "export EDITOR=nvim\nalias g=git\n");
|
||||
git(dotfiles, "init", "-q", "-b", "main");
|
||||
git(dotfiles, "add", ".");
|
||||
git(dotfiles, "commit", "-qm", "Initial dotfiles");
|
||||
}
|
||||
}
|
||||
|
||||
async function main(): Promise<void> {
|
||||
await prepareRepos();
|
||||
const home = path.join(demoRoot, "home");
|
||||
await rm(home, { recursive: true, force: true });
|
||||
await mkdir(home, { recursive: true });
|
||||
|
||||
const daemon = await createTestPaseoDaemon({
|
||||
agentClients: {
|
||||
claude: new ScriptedAgentClient("claude", claudeScripts),
|
||||
codex: new ScriptedAgentClient("codex", codexScripts),
|
||||
},
|
||||
listen: "127.0.0.1",
|
||||
listenPort: port,
|
||||
paseoHomeRoot: home,
|
||||
mcpEnabled: false,
|
||||
cleanup: false,
|
||||
pluginsEnabled: true,
|
||||
plugins: {
|
||||
"preview-deploys": { source: "directory", path: pluginDir, enabled: true },
|
||||
},
|
||||
});
|
||||
const client = new DaemonClient({
|
||||
url: `ws://127.0.0.1:${daemon.port}/ws`,
|
||||
appVersion: "0.14.0",
|
||||
});
|
||||
await client.connect();
|
||||
await client.fetchAgents({ subscribe: {} });
|
||||
|
||||
const paseo = await client.addProject(path.join(codeRoot, "paseo"));
|
||||
const dotfiles = await client.addProject(path.join(codeRoot, "dotfiles"));
|
||||
const paseoProjectId = paseo.project!.projectId;
|
||||
|
||||
async function worktree(title: string, branchName: string) {
|
||||
const result = await client.createWorkspace({
|
||||
title,
|
||||
source: {
|
||||
kind: "worktree",
|
||||
projectId: paseoProjectId,
|
||||
action: "branch-off",
|
||||
baseBranch: "main",
|
||||
branchName,
|
||||
},
|
||||
});
|
||||
if (!result.workspace) throw new Error(`No workspace for ${title}: ${JSON.stringify(result)}`);
|
||||
return result.workspace;
|
||||
}
|
||||
|
||||
async function agent(input: {
|
||||
provider: "claude" | "codex";
|
||||
workspace: { id: string; workspaceDirectory?: string | null };
|
||||
cwd: string;
|
||||
title: string;
|
||||
script: AgentScript;
|
||||
}) {
|
||||
(input.provider === "claude" ? claudeScripts : codexScripts).push(input.script);
|
||||
return client.createAgent({
|
||||
provider: input.provider,
|
||||
cwd: input.cwd,
|
||||
workspaceId: input.workspace.id,
|
||||
title: input.title,
|
||||
initialPrompt: input.script.prompt,
|
||||
});
|
||||
}
|
||||
|
||||
const pause = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
|
||||
|
||||
// Done: finished earlier and already read.
|
||||
const release = await worktree("Release v0.14.0-beta.1", "release/0.14.0-beta.1");
|
||||
const releaseAgent = await agent({
|
||||
provider: "codex",
|
||||
workspace: release,
|
||||
cwd: release.workspaceDirectory!,
|
||||
title: "Release v0.14.0-beta.1",
|
||||
script: {
|
||||
prompt: "Cut 0.14.0-beta.1 from main and draft the release notes.",
|
||||
steps: [
|
||||
{
|
||||
kind: "tool",
|
||||
name: "shell",
|
||||
detail: {
|
||||
type: "shell",
|
||||
command: "npm run release:beta",
|
||||
output: "Tagged v0.14.0-beta.1\n",
|
||||
exitCode: 0,
|
||||
},
|
||||
},
|
||||
{
|
||||
kind: "say",
|
||||
text: "Tagged `v0.14.0-beta.1` and drafted the release notes. CI is building the desktop and mobile artifacts.",
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
const dotfilesWorkspace = (
|
||||
await client.createWorkspace({
|
||||
title: "Add a tmux status line",
|
||||
source: {
|
||||
kind: "directory",
|
||||
path: path.join(codeRoot, "dotfiles"),
|
||||
projectId: dotfiles.project!.projectId,
|
||||
},
|
||||
})
|
||||
).workspace!;
|
||||
const tmuxAgent = await agent({
|
||||
provider: "claude",
|
||||
workspace: dotfilesWorkspace,
|
||||
cwd: path.join(codeRoot, "dotfiles"),
|
||||
title: "Add a tmux status line",
|
||||
script: {
|
||||
prompt: "Add a minimal tmux status line with the session name and battery.",
|
||||
steps: [
|
||||
{
|
||||
kind: "tool",
|
||||
name: "Edit",
|
||||
detail: {
|
||||
type: "edit",
|
||||
filePath: "tmux.conf",
|
||||
oldString: "",
|
||||
newString: "set -g status-right '#S · #{battery_percentage}'",
|
||||
},
|
||||
},
|
||||
{
|
||||
kind: "say",
|
||||
text: "Added a status line with the session name on the left and battery on the right.",
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
await pause(3000);
|
||||
await client.clearAgentAttention([releaseAgent.id, tmuxAgent.id]);
|
||||
|
||||
// Working: turns that stay open while you capture.
|
||||
const ipad = await worktree(
|
||||
"Keep the composer above the iPad keyboard",
|
||||
"fix/ipad-keyboard-inset",
|
||||
);
|
||||
await agent({
|
||||
provider: "codex",
|
||||
workspace: ipad,
|
||||
cwd: ipad.workspaceDirectory!,
|
||||
title: "Keep the composer above the iPad keyboard",
|
||||
script: {
|
||||
prompt:
|
||||
"On iPad with a hardware keyboard attached, the composer jumps up as if the software keyboard were open. Find out why and fix it.",
|
||||
keepRunning: true,
|
||||
steps: [
|
||||
{
|
||||
kind: "tool",
|
||||
name: "shell",
|
||||
detail: {
|
||||
type: "shell",
|
||||
command: 'rg -n "keyboardHeight" packages/app/src',
|
||||
output:
|
||||
"packages/app/src/keyboard/shift/internal/provider.ts:41: const keyboardHeight = useSharedValue(0);\n",
|
||||
exitCode: 0,
|
||||
},
|
||||
},
|
||||
{
|
||||
kind: "tool",
|
||||
name: "read",
|
||||
detail: {
|
||||
type: "read",
|
||||
filePath: "packages/app/src/keyboard/shift/internal/provider.ts",
|
||||
},
|
||||
},
|
||||
{
|
||||
kind: "say",
|
||||
text: "The shift provider trusts the keyboard frame event. With a hardware keyboard, iPadOS still reports the shortcuts bar as a keyboard frame, so we lift the composer by its full height. Checking the frame against the screen bottom next.",
|
||||
},
|
||||
{
|
||||
kind: "running-tool",
|
||||
name: "shell",
|
||||
detail: { type: "shell", command: "npx vitest run packages/app/src/keyboard" },
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
const snapshots = await worktree(
|
||||
"Cache provider snapshots on disk",
|
||||
"perf/provider-snapshot-cache",
|
||||
);
|
||||
await agent({
|
||||
provider: "claude",
|
||||
workspace: snapshots,
|
||||
cwd: snapshots.workspaceDirectory!,
|
||||
title: "Cache provider snapshots on disk",
|
||||
script: {
|
||||
prompt:
|
||||
"Cold start spends about two seconds probing providers. Cache the last provider snapshot on disk and refresh it in the background.",
|
||||
keepRunning: true,
|
||||
steps: [
|
||||
{
|
||||
kind: "todo",
|
||||
items: [
|
||||
{ text: "Find where snapshots are built", completed: true },
|
||||
{ text: "Persist the last snapshot per host", completed: false },
|
||||
{ text: "Refresh in the background after boot", completed: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
kind: "tool",
|
||||
name: "Read",
|
||||
detail: {
|
||||
type: "read",
|
||||
filePath: "packages/server/src/server/agent/provider-snapshot-manager.ts",
|
||||
},
|
||||
},
|
||||
{
|
||||
kind: "running-tool",
|
||||
name: "Edit",
|
||||
detail: {
|
||||
type: "edit",
|
||||
filePath: "packages/server/src/server/agent/provider-snapshot-manager.ts",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
// Needs input: waiting on a permission.
|
||||
const korean = await worktree("Korean translations for Settings", "i18n/ko-settings");
|
||||
await agent({
|
||||
provider: "claude",
|
||||
workspace: korean,
|
||||
cwd: korean.workspaceDirectory!,
|
||||
title: "Korean translations for Settings",
|
||||
script: {
|
||||
prompt: "Translate the new Settings strings into Korean and open a PR.",
|
||||
steps: [
|
||||
{
|
||||
kind: "tool",
|
||||
name: "Read",
|
||||
detail: { type: "read", filePath: "packages/app/src/i18n/resources/en.ts" },
|
||||
},
|
||||
{
|
||||
kind: "tool",
|
||||
name: "Edit",
|
||||
detail: { type: "edit", filePath: "packages/app/src/i18n/resources/ko.ts" },
|
||||
},
|
||||
{
|
||||
kind: "tool",
|
||||
name: "Bash",
|
||||
detail: {
|
||||
type: "shell",
|
||||
command: "npm run test --workspace=@getpaseo/app -- i18n",
|
||||
output: "Test Files 3 passed (3)\n Tests 41 passed (41)\n",
|
||||
exitCode: 0,
|
||||
},
|
||||
},
|
||||
{ kind: "say", text: "Translated 18 strings. I'll push the branch so I can open the PR." },
|
||||
{
|
||||
kind: "ask",
|
||||
name: "Bash",
|
||||
title: "Bash",
|
||||
detail: { type: "shell", command: "git push -u origin i18n/ko-settings" },
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
// Ready to review: a second finished agent.
|
||||
const terminals = await worktree(
|
||||
"Remember the last terminal per workspace",
|
||||
"feat/remember-terminal",
|
||||
);
|
||||
await agent({
|
||||
provider: "codex",
|
||||
workspace: terminals,
|
||||
cwd: terminals.workspaceDirectory!,
|
||||
title: "Remember the last terminal per workspace",
|
||||
script: {
|
||||
prompt:
|
||||
"When I switch back to a workspace, open the terminal I was using last instead of the first one.",
|
||||
steps: [
|
||||
{
|
||||
kind: "tool",
|
||||
name: "shell",
|
||||
detail: {
|
||||
type: "shell",
|
||||
command: 'rg -n "activeTerminalId" packages/app/src',
|
||||
output: "",
|
||||
exitCode: 0,
|
||||
},
|
||||
},
|
||||
{
|
||||
kind: "say",
|
||||
text: "Workspaces now remember their last focused terminal and reopen it when you switch back. The choice is stored per host, so it survives restarts.",
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
// Plugin: the agent "built" the preview-deploys plugin this daemon runs.
|
||||
const plugin = await worktree("Build a preview deploys plugin", "plugins/preview-deploys");
|
||||
const pluginSource = (file: string) => run(pluginDir, `cat ${file}`);
|
||||
await agent({
|
||||
provider: "claude",
|
||||
workspace: plugin,
|
||||
cwd: plugin.workspaceDirectory!,
|
||||
title: "Build a preview deploys plugin",
|
||||
script: {
|
||||
prompt: "Build me a plugin that shows our preview deploys right next to the composer.",
|
||||
stepDelayMs: 6_000,
|
||||
steps: [
|
||||
{ kind: "tool", name: "Read", detail: { type: "read", filePath: "docs/plugins.md" } },
|
||||
{
|
||||
kind: "tool",
|
||||
name: "Write",
|
||||
detail: {
|
||||
type: "write",
|
||||
filePath: "plugins/preview-deploys/paseo-plugin.json",
|
||||
content: pluginSource("paseo-plugin.json"),
|
||||
},
|
||||
},
|
||||
{
|
||||
kind: "tool",
|
||||
name: "Write",
|
||||
detail: {
|
||||
type: "write",
|
||||
filePath: "plugins/preview-deploys/index.client.tsx",
|
||||
content: pluginSource("index.client.tsx"),
|
||||
},
|
||||
},
|
||||
{
|
||||
kind: "tool",
|
||||
name: "Bash",
|
||||
detail: {
|
||||
type: "shell",
|
||||
command: "paseo plugin install ./plugins/preview-deploys",
|
||||
output: "Installed preview-deploys\n",
|
||||
exitCode: 0,
|
||||
},
|
||||
},
|
||||
{
|
||||
kind: "say",
|
||||
text: "Done. **Deploys** now sits above the composer in every workspace. Tap it to see production and the latest preview for each branch, with build progress and failures.",
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
// Hero: Claude finished a real change in a real worktree.
|
||||
const jitter = await worktree("Add jitter to reconnect backoff", "fix/reconnect-jitter");
|
||||
const cwd = jitter.workspaceDirectory!;
|
||||
await symlink(path.join(repoRoot, "node_modules"), path.join(cwd, "node_modules"));
|
||||
execFileSync("node", [path.join(here, "change/apply.mjs"), cwd]);
|
||||
const clientDiff = git(cwd, "diff", "--", "packages/client/src/daemon-client.ts");
|
||||
const vitest = run(
|
||||
cwd,
|
||||
"npx vitest run packages/client/src/connection/reconnect-delay.test.ts",
|
||||
).replace(/^ RUN .*\n/m, "");
|
||||
const readExcerpt = run(cwd, "sed -n '7067,7086p' packages/client/src/daemon-client.ts");
|
||||
await agent({
|
||||
provider: "claude",
|
||||
workspace: jitter,
|
||||
cwd,
|
||||
title: "Add jitter to reconnect backoff",
|
||||
script: {
|
||||
prompt:
|
||||
'When the relay restarts, every phone reconnects at the same moment and we get a spike. Add jitter to the reconnect backoff, keep the 30s cap, and make sure the "Retrying in" countdown still matches the real delay.',
|
||||
stepDelayMs: 7_000,
|
||||
steps: [
|
||||
{
|
||||
kind: "tool",
|
||||
name: "Grep",
|
||||
detail: {
|
||||
type: "search",
|
||||
toolName: "grep",
|
||||
query: "reconnectAttempt",
|
||||
filePaths: ["packages/client/src/daemon-client.ts"],
|
||||
numFiles: 1,
|
||||
numMatches: 9,
|
||||
mode: "files_with_matches",
|
||||
},
|
||||
},
|
||||
{
|
||||
kind: "tool",
|
||||
name: "Read",
|
||||
detail: {
|
||||
type: "read",
|
||||
filePath: "packages/client/src/daemon-client.ts",
|
||||
offset: 7040,
|
||||
limit: 60,
|
||||
content: readExcerpt,
|
||||
},
|
||||
},
|
||||
{
|
||||
kind: "say",
|
||||
text: "The delay is calculated twice: once for `nextRetryAt`, which drives the countdown, and again when the timer is armed. Both use plain doubling, so every client retries on the same schedule. If I add randomness in both places the countdown will be wrong, so I'll draw the jitter once per attempt and share it.",
|
||||
},
|
||||
{
|
||||
kind: "tool",
|
||||
name: "Write",
|
||||
detail: {
|
||||
type: "write",
|
||||
filePath: "packages/client/src/connection/reconnect-delay.ts",
|
||||
content: run(cwd, "cat packages/client/src/connection/reconnect-delay.ts"),
|
||||
},
|
||||
},
|
||||
{
|
||||
kind: "tool",
|
||||
name: "Edit",
|
||||
detail: {
|
||||
type: "edit",
|
||||
filePath: "packages/client/src/daemon-client.ts",
|
||||
unifiedDiff: clientDiff,
|
||||
},
|
||||
},
|
||||
{
|
||||
kind: "tool",
|
||||
name: "Write",
|
||||
detail: {
|
||||
type: "write",
|
||||
filePath: "packages/client/src/connection/reconnect-delay.test.ts",
|
||||
content: run(cwd, "cat packages/client/src/connection/reconnect-delay.test.ts"),
|
||||
},
|
||||
},
|
||||
{
|
||||
kind: "tool",
|
||||
name: "Bash",
|
||||
detail: {
|
||||
type: "shell",
|
||||
command: "npx vitest run packages/client/src/connection/reconnect-delay.test.ts",
|
||||
output: vitest,
|
||||
exitCode: 0,
|
||||
},
|
||||
},
|
||||
{
|
||||
kind: "tool",
|
||||
name: "Edit",
|
||||
detail: {
|
||||
type: "edit",
|
||||
filePath: "CHANGELOG.md",
|
||||
unifiedDiff: git(cwd, "diff", "--", "CHANGELOG.md"),
|
||||
},
|
||||
},
|
||||
{
|
||||
kind: "say",
|
||||
text: [
|
||||
"Reconnects now back off with jitter.",
|
||||
"",
|
||||
"- `getReconnectDelayMs` picks a delay between half and the full backoff, still capped at 30s.",
|
||||
'- `DaemonClient` draws the delay once per attempt, so the "Retrying in" countdown matches the actual retry.',
|
||||
"- Four new tests cover the doubling, the cap, the jitter range, and a quick first retry.",
|
||||
"",
|
||||
"Tests pass. After a relay restart, clients now spread their reconnects across the backoff window instead of arriving together.",
|
||||
].join("\n"),
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
const terminal = await client.createTerminal(cwd, "zsh", undefined, {
|
||||
workspaceId: jitter.id,
|
||||
command: "bash",
|
||||
args: ["--rcfile", path.join(here, "terminal-rc.sh"), "-i"],
|
||||
});
|
||||
const terminalId = terminal.terminal?.id;
|
||||
if (terminalId) {
|
||||
await pause(1500);
|
||||
for (const line of [
|
||||
"git status --short",
|
||||
"cd packages/client",
|
||||
"npx vitest run reconnect --reporter=tree",
|
||||
]) {
|
||||
client.sendTerminalInput(terminalId, { type: "input", data: `${line}\r` });
|
||||
await pause(4000);
|
||||
}
|
||||
}
|
||||
|
||||
console.log(`READY port=${daemon.port} home=${daemon.paseoHome}`);
|
||||
await writeFile(
|
||||
path.join(demoRoot, "state.json"),
|
||||
JSON.stringify(
|
||||
{ port: daemon.port, home: daemon.paseoHome, hero: { workspaceId: jitter.id, cwd } },
|
||||
null,
|
||||
2,
|
||||
),
|
||||
);
|
||||
const stop = async () => {
|
||||
await client.close();
|
||||
await daemon.close();
|
||||
process.exit(0);
|
||||
};
|
||||
process.on("SIGTERM", stop);
|
||||
process.on("SIGINT", stop);
|
||||
void minute;
|
||||
}
|
||||
|
||||
main().catch((error) => {
|
||||
console.error(error);
|
||||
process.exit(1);
|
||||
});
|
||||
@@ -0,0 +1,19 @@
|
||||
# Shell profile for the demo terminal: a Pure-style two-line prompt that fits a
|
||||
# phone-width terminal, and vitest output without the absolute checkout path
|
||||
# or the long timing breakdown. Vitest drops its colors when piped, so the
|
||||
# wrapper puts its usual green checks and grey timings back.
|
||||
export FORCE_COLOR=1
|
||||
__where() { local top; top=$(git rev-parse --show-toplevel 2>/dev/null); printf '~/paseo%s' "${PWD#"$top"}"; }
|
||||
__branch() { git branch --show-current 2>/dev/null; }
|
||||
__dirty() { [ -n "$(git status --porcelain 2>/dev/null)" ] && printf '*'; }
|
||||
PROMPT_COMMAND='printf "\e]0;zsh\a"'
|
||||
PS1='\n\[\e[34m\]$(__where)\[\e[0m\] \[\e[90m\]$(__branch)$(__dirty)\[\e[0m\]\n\[\e[35m\]❯\[\e[0m\] '
|
||||
npx() {
|
||||
command npx "$@" 2>&1 | sed -E \
|
||||
-e '1{/^$/d}' -e '/ RUN /d' -e '/Start at/d' -e 's/ \(transform.*\)//' \
|
||||
-e $'s/✓/\e[32m✓\e[0m/' \
|
||||
-e $'s/ ([0-9]+ms)$/ \e[90m\\1\e[0m/' \
|
||||
-e $'s/ (\\([0-9]+( tests)?\\))/ \e[90m\\1\e[0m/' \
|
||||
-e $'s/([0-9]+ passed)/\e[1;32m\\1\e[0m/'
|
||||
}
|
||||
clear
|
||||
|
After Width: | Height: | Size: 541 KiB |
|
After Width: | Height: | Size: 1.3 MiB |
|
After Width: | Height: | Size: 599 KiB |
|
After Width: | Height: | Size: 931 KiB |
|
After Width: | Height: | Size: 736 KiB |
|
After Width: | Height: | Size: 373 KiB |
|
After Width: | Height: | Size: 701 KiB |
|
After Width: | Height: | Size: 463 KiB |
|
After Width: | Height: | Size: 514 KiB |
|
After Width: | Height: | Size: 510 KiB |
|
After Width: | Height: | Size: 537 KiB |
|
After Width: | Height: | Size: 1.4 MiB |
|
After Width: | Height: | Size: 607 KiB |
|
After Width: | Height: | Size: 1006 KiB |
|
After Width: | Height: | Size: 760 KiB |
|
After Width: | Height: | Size: 358 KiB |
|
After Width: | Height: | Size: 645 KiB |
|
After Width: | Height: | Size: 431 KiB |
|
After Width: | Height: | Size: 470 KiB |
|
After Width: | Height: | Size: 473 KiB |
|
After Width: | Height: | Size: 1.0 MiB |
|
After Width: | Height: | Size: 694 KiB |
|
After Width: | Height: | Size: 397 KiB |
|
After Width: | Height: | Size: 370 KiB |
|
After Width: | Height: | Size: 396 KiB |
|
After Width: | Height: | Size: 454 KiB |
|
After Width: | Height: | Size: 492 KiB |
|
After Width: | Height: | Size: 497 KiB |
|
After Width: | Height: | Size: 281 KiB |
|
After Width: | Height: | Size: 248 KiB |
|
After Width: | Height: | Size: 272 KiB |
|
After Width: | Height: | Size: 257 KiB |
|
After Width: | Height: | Size: 298 KiB |
@@ -0,0 +1,396 @@
|
||||
// Renders the App Store and Google Play screenshots from the native captures in
|
||||
// raw/. Every image is resized with Lanczos to the exact pixel size it occupies
|
||||
// on the canvas, and the page renders at device scale 1, so the browser never
|
||||
// resamples a capture.
|
||||
//
|
||||
// node assets/store-screenshots/render.mjs
|
||||
//
|
||||
// SF Pro is not redistributable. On macOS it comes from /System/Library/Fonts;
|
||||
// elsewhere point SF_FONT_DIR at a folder holding SFNS.ttf copied from a Mac.
|
||||
|
||||
import { existsSync } from "node:fs";
|
||||
import { mkdir, mkdtemp, rm, writeFile } from "node:fs/promises";
|
||||
import os from "node:os";
|
||||
import path from "node:path";
|
||||
import { fileURLToPath, pathToFileURL } from "node:url";
|
||||
import { build } from "esbuild";
|
||||
import { chromium } from "playwright";
|
||||
import { createElement } from "react";
|
||||
import { renderToStaticMarkup } from "react-dom/server";
|
||||
import sharp from "sharp";
|
||||
|
||||
const root = path.dirname(fileURLToPath(import.meta.url));
|
||||
const repo = path.resolve(root, "../..");
|
||||
const raw = (device, name) => path.join(root, "raw", device, `${name}.png`);
|
||||
const output = path.join(root, "output");
|
||||
|
||||
// Native captures per device: iPhone 16 Pro Max at 3x and iPad Pro 13-inch at
|
||||
// 2x. The frame's screen radius and Dynamic Island are in capture pixels.
|
||||
const DEVICES = {
|
||||
iphone: {
|
||||
capture: { width: 1320, height: 2868 },
|
||||
radius: 186,
|
||||
bezel: 22,
|
||||
island: { width: 378, height: 112, top: 33 },
|
||||
},
|
||||
ipad: { capture: { width: 2064, height: 2752 }, radius: 44, bezel: 30, island: null },
|
||||
};
|
||||
|
||||
// Every title wraps to two lines and every subline fits on one; the renderer
|
||||
// fails otherwise, because the device is placed from that fixed text height.
|
||||
//
|
||||
// Each scene names its capture per device, and a device entry may override the
|
||||
// title or subline where the copy depends on the form factor.
|
||||
//
|
||||
// A callout lifts a region of a capture out of the device. `crop` is in native
|
||||
// capture pixels, `zoom` is its size relative to the device screen (capped to
|
||||
// the canvas width), and the callout is centred on the spot the crop comes
|
||||
// from, moved by `shift` native pixels down the screen.
|
||||
const SCENES = [
|
||||
{
|
||||
id: "sidebar",
|
||||
backdrop: "agents",
|
||||
title: "Run many coding agents at once",
|
||||
body: "See which agents are working and which need you.",
|
||||
iphone: { capture: "sidebar" },
|
||||
ipad: { capture: "sidebar" },
|
||||
},
|
||||
{
|
||||
id: "chat",
|
||||
title: "Your full dev environment on your phone",
|
||||
body: "Start agents and follow every edit and command.",
|
||||
iphone: { capture: "chat" },
|
||||
ipad: { capture: "chat", title: "Your full dev environment on your tablet" },
|
||||
},
|
||||
{
|
||||
id: "plugins",
|
||||
title: "Ask an agent to change the app itself",
|
||||
body: "This Deploys sheet is a plugin an agent wrote.",
|
||||
iphone: {
|
||||
capture: "plugin",
|
||||
callout: { from: "plugin-sheet", crop: [0, 1340, 1320, 1400], zoom: 1.04, shift: -1400 },
|
||||
},
|
||||
ipad: {
|
||||
capture: "plugin",
|
||||
body: "This Deploys panel is a plugin an agent wrote.",
|
||||
callout: { from: "plugin-sheet", crop: [670, 1486, 844, 970], zoom: 1.3, shift: -900 },
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "review",
|
||||
title: "Review the diff before you merge",
|
||||
body: "Every file the agent changed, on its own branch.",
|
||||
iphone: {
|
||||
capture: "diff",
|
||||
callout: { from: "files", crop: [0, 1060, 1320, 870], zoom: 1.26, shift: 110 },
|
||||
},
|
||||
ipad: { capture: "diff" },
|
||||
},
|
||||
{
|
||||
id: "terminal",
|
||||
title: "A real terminal in every workspace",
|
||||
body: "Run the tests yourself, on your own machine.",
|
||||
iphone: {
|
||||
capture: "terminal",
|
||||
callout: { from: "terminal", crop: [0, 950, 1320, 460], zoom: 1.35, shift: 110 },
|
||||
},
|
||||
ipad: {
|
||||
capture: "terminal",
|
||||
callout: { from: "terminal", crop: [596, 640, 1010, 412], zoom: 1.35, shift: 650 },
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
// `textTop` is where the text starts when the device is sized by the canvas
|
||||
// height. A canvas too narrow for that, like a tablet on 9:16, sizes the device
|
||||
// by its width and centres the text and device instead.
|
||||
const STORES = {
|
||||
apple: {
|
||||
device: "iphone",
|
||||
width: 1320,
|
||||
height: 2868,
|
||||
textTop: 230,
|
||||
titleSize: 100,
|
||||
bodySize: 46,
|
||||
textWidth: 1120,
|
||||
},
|
||||
google: {
|
||||
device: "iphone",
|
||||
width: 1440,
|
||||
height: 2560,
|
||||
textTop: 150,
|
||||
titleSize: 96,
|
||||
bodySize: 44,
|
||||
textWidth: 1200,
|
||||
},
|
||||
"apple-ipad": {
|
||||
device: "ipad",
|
||||
width: 2064,
|
||||
height: 2752,
|
||||
textTop: 200,
|
||||
titleSize: 124,
|
||||
bodySize: 56,
|
||||
textWidth: 1400,
|
||||
},
|
||||
"google-tablet": {
|
||||
device: "ipad",
|
||||
width: 1800,
|
||||
height: 3200,
|
||||
textTop: 200,
|
||||
titleSize: 136,
|
||||
bodySize: 60,
|
||||
textWidth: 1560,
|
||||
},
|
||||
};
|
||||
|
||||
const TITLE_LINE = 1.06;
|
||||
const BODY_LINE = 1.3;
|
||||
const BODY_GAP = 30;
|
||||
// The device starts this far below the text and runs BLEED off the bottom.
|
||||
const GAP = 140;
|
||||
const BLEED = 40;
|
||||
const MARGIN = 56;
|
||||
const COLORS = { canvas: "#101615", title: "#ffffff", body: "rgba(255, 255, 255, 0.58)" };
|
||||
|
||||
function findFont() {
|
||||
const dirs = [process.env.SF_FONT_DIR, "/System/Library/Fonts", "/Library/Fonts"].filter(Boolean);
|
||||
for (const dir of dirs) {
|
||||
const file = path.join(dir, "SFNS.ttf");
|
||||
if (existsSync(file)) return file;
|
||||
}
|
||||
throw new Error("SF Pro not found. Set SF_FONT_DIR to a folder containing SFNS.ttf from macOS.");
|
||||
}
|
||||
|
||||
// The device fills the canvas from GAP below the text to just past the bottom
|
||||
// edge, so a taller canvas gets a larger device rather than a larger gap. When
|
||||
// that would be wider than the canvas, the device takes the full width and the
|
||||
// text and the whole device sit centred, still GAP apart.
|
||||
function deviceLayout(store, device) {
|
||||
const { capture, bezel } = device;
|
||||
const textHeight = 2 * store.titleSize * TITLE_LINE + BODY_GAP + store.bodySize * BODY_LINE;
|
||||
const tallest = store.height + BLEED - (store.textTop + textHeight + GAP) - 2 * bezel;
|
||||
const widest = store.width - 2 * MARGIN - 2 * bezel;
|
||||
const screenWidth = Math.min(Math.round((tallest * capture.width) / capture.height), widest);
|
||||
const screenHeight = Math.round((screenWidth * capture.height) / capture.width);
|
||||
const scale = screenWidth / capture.width;
|
||||
const width = screenWidth + 2 * bezel;
|
||||
const height = screenHeight + 2 * bezel;
|
||||
const textTop =
|
||||
screenWidth < widest
|
||||
? store.height + BLEED - height - GAP - textHeight
|
||||
: (store.height - height - GAP - textHeight) / 2;
|
||||
const island = device.island && {
|
||||
width: Math.round(device.island.width * scale),
|
||||
height: Math.round(device.island.height * scale),
|
||||
top: Math.round(device.island.top * scale),
|
||||
};
|
||||
return {
|
||||
textTop: Math.round(textTop),
|
||||
left: Math.round((store.width - width) / 2),
|
||||
top: Math.round(textTop + textHeight + GAP),
|
||||
width,
|
||||
height,
|
||||
bezel,
|
||||
screenWidth,
|
||||
screenHeight,
|
||||
scale,
|
||||
radius: Math.round(device.radius * scale),
|
||||
island,
|
||||
};
|
||||
}
|
||||
|
||||
function calloutLayout(callout, frame, store) {
|
||||
const [cropX, cropY, cropWidth, cropHeight] = callout.crop;
|
||||
const scale = Math.min(frame.scale * callout.zoom, (store.width - 2 * MARGIN) / cropWidth);
|
||||
const width = Math.round(cropWidth * scale);
|
||||
const height = Math.round(cropHeight * scale);
|
||||
const centreX = frame.left + frame.bezel + (cropX + cropWidth / 2) * frame.scale;
|
||||
const centreY = frame.top + frame.bezel + (cropY + cropHeight / 2 + callout.shift) * frame.scale;
|
||||
const clamp = (value, max) => Math.round(Math.min(Math.max(value, MARGIN), max - MARGIN));
|
||||
return {
|
||||
width,
|
||||
height,
|
||||
left: clamp(centreX - width / 2, store.width - width),
|
||||
top: clamp(centreY - height / 2, store.height - height),
|
||||
};
|
||||
}
|
||||
|
||||
async function resize(source, crop, width, height, file) {
|
||||
let image = sharp(source);
|
||||
if (crop) image = image.extract({ left: crop[0], top: crop[1], width: crop[2], height: crop[3] });
|
||||
await image.resize(width, height, { kernel: "lanczos3" }).png().toFile(file);
|
||||
return pathToFileURL(file).href;
|
||||
}
|
||||
|
||||
// Agent marks scattered behind the first panel, from the homepage's featured
|
||||
// agents. Each entry is [mark, centre x, centre y, size, rotation], with the
|
||||
// centre as a fraction of the canvas and the size as a fraction of its width.
|
||||
const AGENT_MARKS = [
|
||||
["ClaudeCodeIcon", 0.11, 0.075, 0.12, -14],
|
||||
["CodexIcon", 0.89, 0.1, 0.13, 12],
|
||||
["PiIcon", 0.07, 0.34, 0.1, 10],
|
||||
["OmpIcon", 0.93, 0.37, 0.11, -10],
|
||||
["OpenCodeIcon", 0.08, 0.6, 0.11, -8],
|
||||
["CursorIcon", 0.92, 0.63, 0.1, 16],
|
||||
["MuseCodeIcon", 0.07, 0.85, 0.11, 14],
|
||||
["AntigravityIcon", 0.92, 0.88, 0.12, -12],
|
||||
];
|
||||
|
||||
async function loadAgentMarks(work) {
|
||||
const bundle = path.join(work, "agent-icons.mjs");
|
||||
await build({
|
||||
entryPoints: [path.join(repo, "packages/website/src/components/agent-icons.tsx")],
|
||||
outfile: bundle,
|
||||
bundle: true,
|
||||
format: "esm",
|
||||
platform: "node",
|
||||
jsx: "automatic",
|
||||
});
|
||||
const icons = await import(pathToFileURL(bundle).href);
|
||||
return Object.fromEntries(
|
||||
AGENT_MARKS.map(([name]) => [name, renderToStaticMarkup(createElement(icons[name]))]),
|
||||
);
|
||||
}
|
||||
|
||||
function backdrop(store, marks) {
|
||||
return AGENT_MARKS.map(([name, x, y, size, rotation]) => {
|
||||
const side = Math.round(size * store.width);
|
||||
const left = Math.round(x * store.width - side / 2);
|
||||
const top = Math.round(y * store.height - side / 2);
|
||||
return `<div class="mark" style="left:${left}px;top:${top}px;width:${side}px;height:${side}px;transform:rotate(${rotation}deg)">${marks[name]}</div>`;
|
||||
}).join("");
|
||||
}
|
||||
|
||||
function page({ store, shot, frame, screen, callout, calloutImage, font, marks }) {
|
||||
const behind = shot.backdrop === "agents" ? backdrop(store, marks) : "";
|
||||
const { island } = frame;
|
||||
const notch = island
|
||||
? `<div class="island" style="top:${island.top}px;width:${island.width}px;height:${island.height}px;margin-left:-${island.width / 2}px;border-radius:${island.height / 2}px"></div>`
|
||||
: "";
|
||||
const lifted = callout
|
||||
? `<img class="callout" src="${calloutImage}" style="left:${callout.left}px;top:${callout.top}px;width:${callout.width}px;height:${callout.height}px">`
|
||||
: "";
|
||||
return `<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
@font-face { font-family: "SF Pro"; src: url("${pathToFileURL(font).href}"); font-weight: 1 1000; }
|
||||
* { margin: 0; box-sizing: border-box; }
|
||||
html, body { width: ${store.width}px; height: ${store.height}px; overflow: hidden; background: ${COLORS.canvas}; }
|
||||
body { position: relative; font-family: "SF Pro"; -webkit-font-smoothing: antialiased; }
|
||||
.text { position: absolute; top: ${frame.textTop}px; left: 0; right: 0; margin: 0 auto; width: ${store.textWidth}px; text-align: center; }
|
||||
.mark { position: absolute; color: #fff; opacity: 0.09; filter: grayscale(1) brightness(0) invert(1); }
|
||||
.mark svg { display: block; width: 100%; height: 100%; }
|
||||
h1 { color: ${COLORS.title}; font-size: ${store.titleSize}px; font-weight: 600; line-height: ${TITLE_LINE}; letter-spacing: -0.022em; text-wrap: balance; }
|
||||
p { margin-top: ${BODY_GAP}px; color: ${COLORS.body}; font-size: ${store.bodySize}px; font-weight: 400; line-height: ${BODY_LINE}; letter-spacing: -0.005em; text-wrap: balance; }
|
||||
.device { position: absolute; left: ${frame.left}px; top: ${frame.top}px; width: ${frame.width}px; height: ${frame.height}px; padding: ${frame.bezel}px; border-radius: ${frame.radius + frame.bezel}px; background: #040505; box-shadow: 0 0 0 3px #343b39, 0 0 0 5px #161b1a, 0 60px 140px rgba(0, 0, 0, 0.55); }
|
||||
.screen { position: relative; width: ${frame.screenWidth}px; height: ${frame.screenHeight}px; border-radius: ${frame.radius}px; overflow: hidden; }
|
||||
.screen img { display: block; width: ${frame.screenWidth}px; height: ${frame.screenHeight}px; }
|
||||
.island { position: absolute; left: 50%; background: #000; }
|
||||
.callout { position: absolute; display: block; border-radius: 36px; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.14), 0 40px 100px rgba(0, 0, 0, 0.6); }
|
||||
</style>
|
||||
${behind}
|
||||
<div class="text"><h1>${shot.title}</h1><p>${shot.body}</p></div>
|
||||
<div class="device"><div class="screen"><img src="${screen}">${notch}</div></div>
|
||||
${lifted}`;
|
||||
}
|
||||
|
||||
async function renderStore(browser, name, store, font, marks, work) {
|
||||
const dir = path.join(output, name);
|
||||
await mkdir(dir, { recursive: true });
|
||||
const view = await browser.newPage({
|
||||
viewport: { width: store.width, height: store.height },
|
||||
deviceScaleFactor: 1,
|
||||
});
|
||||
const device = DEVICES[store.device];
|
||||
const frame = deviceLayout(store, device);
|
||||
const files = [];
|
||||
for (const [index, scene] of SCENES.entries()) {
|
||||
const stem = `${name}-${scene.id}`;
|
||||
const shot = { ...scene, ...scene[store.device] };
|
||||
const screen = await resize(
|
||||
raw(store.device, shot.capture),
|
||||
null,
|
||||
frame.screenWidth,
|
||||
frame.screenHeight,
|
||||
path.join(work, `${stem}-screen.png`),
|
||||
);
|
||||
const callout = shot.callout ? calloutLayout(shot.callout, frame, store) : null;
|
||||
const calloutImage = callout
|
||||
? await resize(
|
||||
raw(store.device, shot.callout.from),
|
||||
shot.callout.crop,
|
||||
callout.width,
|
||||
callout.height,
|
||||
path.join(work, `${stem}-callout.png`),
|
||||
)
|
||||
: null;
|
||||
const html = path.join(work, `${stem}.html`);
|
||||
await writeFile(html, page({ store, shot, frame, screen, callout, calloutImage, font, marks }));
|
||||
await view.goto(pathToFileURL(html).href);
|
||||
await view.evaluate(async () => {
|
||||
await document.fonts.ready;
|
||||
await Promise.all(Array.from(document.images, (image) => image.decode()));
|
||||
});
|
||||
await expectLines(view, "h1", 2, `${stem} title`);
|
||||
await expectLines(view, "p", 1, `${stem} subline`);
|
||||
const file = path.join(dir, `${String(index + 1).padStart(2, "0")}-${scene.id}.png`);
|
||||
await sharp(await view.screenshot())
|
||||
.removeAlpha()
|
||||
.png()
|
||||
.toFile(file);
|
||||
files.push(file);
|
||||
console.log(path.relative(repo, file));
|
||||
}
|
||||
await view.close();
|
||||
return files;
|
||||
}
|
||||
|
||||
async function expectLines(view, selector, expected, label) {
|
||||
const lines = await view.$eval(selector, (element) =>
|
||||
Math.round(element.clientHeight / parseFloat(getComputedStyle(element).lineHeight)),
|
||||
);
|
||||
if (lines !== expected) throw new Error(`${label} wraps to ${lines} lines, expected ${expected}`);
|
||||
}
|
||||
|
||||
async function renderPreview(rows) {
|
||||
const tile = 440;
|
||||
const gap = 40;
|
||||
const resized = [];
|
||||
let top = gap;
|
||||
let width = 0;
|
||||
for (const files of rows) {
|
||||
let left = gap;
|
||||
let rowHeight = 0;
|
||||
for (const file of files) {
|
||||
const meta = await sharp(file).metadata();
|
||||
const height = Math.round((meta.height * tile) / meta.width);
|
||||
const input = await sharp(file).resize(tile, height, { kernel: "lanczos3" }).toBuffer();
|
||||
resized.push({ input, left, top });
|
||||
left += tile + gap;
|
||||
rowHeight = Math.max(rowHeight, height);
|
||||
}
|
||||
width = Math.max(width, left);
|
||||
top += rowHeight + gap;
|
||||
}
|
||||
const file = path.join(output, "preview.png");
|
||||
await sharp({ create: { width, height: top, channels: 3, background: "#070a09" } })
|
||||
.composite(resized)
|
||||
.png()
|
||||
.toFile(file);
|
||||
console.log(path.relative(repo, file));
|
||||
}
|
||||
|
||||
const font = findFont();
|
||||
const work = await mkdtemp(path.join(os.tmpdir(), "paseo-store-"));
|
||||
const browser = await chromium.launch({ headless: true });
|
||||
try {
|
||||
const marks = await loadAgentMarks(work);
|
||||
const rows = [];
|
||||
for (const [name, store] of Object.entries(STORES)) {
|
||||
rows.push(await renderStore(browser, name, store, font, marks, work));
|
||||
}
|
||||
await renderPreview(rows);
|
||||
} finally {
|
||||
await browser.close();
|
||||
await rm(work, { recursive: true, force: true });
|
||||
}
|
||||
@@ -288,7 +288,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 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. Every subagent pane links back to its parent (`packages/app/src/subagents/parent/`): a pill above the composer when there is one, a parent box in the composer's place when there is not. 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) instead, replacing the subagents list in place (Back returns to the list); 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. Every subagent pane links back to its parent (`packages/app/src/subagents/parent/`): a pill above the composer when there is one, a parent box in the composer's place when there is not. 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.
|
||||
|
||||
|
||||
@@ -98,7 +98,7 @@ The older `android`, `android:development`, and `ios` commands remain aliases fo
|
||||
`android:production` still builds and installs a release through Expo; use `build:apk` when you
|
||||
need an artifact. `android:clear` removes the generated Android project.
|
||||
|
||||
Run `npm run test:android --workspace=@getpaseo/app` to prebuild Android and run native module unit tests. The app CI job runs this command with the Android toolchain.
|
||||
Run `npm run test:android --workspace=@getpaseo/app` explicitly with a local Android toolchain to prebuild Android and run native module unit tests. Ordinary CI does not prebuild Android or run these tests.
|
||||
|
||||
### Diagnostic logs without ADB
|
||||
|
||||
|
||||
@@ -66,6 +66,9 @@ WebSocket message schemas. Shared configuration schemas belong in protocol leaf
|
||||
retaining the daemon's runtime and wire-schema allocations. The server export tests guard
|
||||
these dependency trees with tree-shaking disabled to match unbundled production imports.
|
||||
|
||||
Terminals do not live in the daemon process: their PTYs run in a detached terminal worker that
|
||||
survives daemon restarts, crashes and upgrades. See [terminal-worker.md](terminal-worker.md).
|
||||
|
||||
Project identity is daemon-global rather than session-owned. After registry bootstrap, the daemon's
|
||||
project Git observer keeps one non-recursive watch on each lexically equivalent active project root
|
||||
and listens only for the root `.git` entry, with a slow rescan as a missed-event fallback. It runs
|
||||
|
||||
@@ -150,18 +150,20 @@ One row off the rail makes the whole card look unconsidered.
|
||||
|
||||
Compact-first. The small case is designed; the large case adds chrome around it.
|
||||
|
||||
The list+detail pattern is canonical and reused across surfaces. The settings shell (`packages/app/src/screens/settings-screen.tsx`) and the projects screen (`packages/app/src/screens/projects-screen.tsx`) implement it identically:
|
||||
Use `md: 600` for both the compact/wide layout boundary and responsive density, in logical points on native and CSS pixels on web. Do not add a separate density breakpoint. Measured content constraints remain independent: composer controls use `COMPACT_CONTENT_WIDTH` (500), so a narrow pane can keep compact controls inside a wide window.
|
||||
|
||||
The settings shell (`packages/app/src/screens/settings-screen.tsx`) and the projects screen (`packages/app/src/screens/projects-screen.tsx`) share the canonical list+detail navigation pattern:
|
||||
|
||||
- On compact: full-screen list with `<BackHeader>` at the top. Tapping a row pushes a full-screen detail with its own `<BackHeader>` that returns to the list.
|
||||
- On desktop: a 320px sidebar on the left holds the list with `surfaceSidebar` background. The content pane on the right holds the selected detail with `<ScreenHeader>`, `<HeaderIconBadge>`, and `<ScreenTitle>`.
|
||||
- On wide layouts: a sidebar on the left holds the list with `surfaceSidebar` background. The content pane on the right holds the selected detail with `<ScreenHeader>`, `<HeaderIconBadge>`, and `<ScreenTitle>`.
|
||||
|
||||
The branching is one `useIsCompactFormFactor()` check at the top of the screen component. The list and the detail are the same components in both layouts; only the framing changes.
|
||||
|
||||
The workspace screen (`packages/app/src/screens/workspace/workspace-screen.tsx`) follows a different but parallel rule: tabs collapse on compact, panes split on desktop. The sidebar (`packages/app/src/components/left-sidebar.tsx`) is overlaid on compact and pinned on desktop.
|
||||
|
||||
On a narrow desktop route, app navigation yields to the rendered content topology when the remaining width cannot preserve its center target: Settings keeps its 320px list + 400px detail split, and a workspace Explorer keeps its current visible width plus a 400px center pane. That is a topology decision at the app container, not a second compact breakpoint. Temporary width clamps are render-only; widening restores the user's saved sidebar widths.
|
||||
On a narrow window using the wide layout, app navigation yields when the remaining width cannot accommodate the content topology. Settings prefers a 720px split (320px list + 400px detail); its list shrinks first to keep forms readable without reducing the detail below 400px. Explorer reserves at least 240px plus a 360px workspace. These are local space budgets, not compact breakpoints. The app sidebar shrinks from its preferred 320px toward a 200px minimum to leave a 400px center target; its preferred width fits at 720px. Temporary width clamps are render-only; widening restores the user's saved sidebar widths.
|
||||
|
||||
Electron window controls are top-corner obstructions, not a compact-layout condition. Rendered surfaces declare which top corners they physically occupy; only those corners receive clearance. Full-window overlays redeclare both corners. A focused split pane owns both corners; if focus restoration temporarily exposes the full split tree, the split boundary reserves one top strip instead of assigning a control rectangle to an arbitrarily narrow leaf. The 720px desktop breakpoint preserves the default 320px sidebar and target 400px center width when the Explorer is closed; it is product policy, not an obstruction gate.
|
||||
Electron window controls are top-corner obstructions, not a compact-layout condition. Rendered surfaces declare which top corners they physically occupy; only those corners receive clearance. Full-window overlays redeclare both corners. A focused split pane owns both corners; if focus restoration temporarily exposes the full split tree, the split boundary reserves one top strip instead of assigning a control rectangle to an arbitrarily narrow leaf.
|
||||
|
||||
Windows and Linux controls are fixed window chrome, outside scrolling header content. A tab rail that reaches them ends at their obstruction and shows the shared overflow fade. On macOS, the Explorer toggle occupies a fixed top-right window slot so opening and closing Explorer does not move the pointer target.
|
||||
|
||||
@@ -201,7 +203,7 @@ Inline errors are a single sentence in `palette.red[300]` `xs`, sitting under th
|
||||
|
||||
Page-level alerts — informational notices, success confirmations, warnings, or recoverable errors that need a small visible block on the page — use `<Alert>` (`packages/app/src/components/ui/alert.tsx`). Variants: `default`, `info`, `success`, `warning`, `error`. The chrome is quiet by design: a 1px tinted border, transparent background, a small variant-tinted icon, the title in the variant accent, the description in `foregroundMuted`. Actions go in the `children` slot as `<Button variant="outline" size="sm">` — recovery actions are low-frequency and outline keeps them quiet alongside the alert's accent (`packages/app/src/screens/project-settings-screen.tsx`). One `<Alert>` at a time per region.
|
||||
|
||||
Sidebar callouts — cross-cutting alerts that apply across the whole app, like worktree setup, Rosetta install, and desktop update available — register through `useSidebarCallouts()` and render in the left sidebar via `<SidebarCallout>` (`packages/app/src/components/sidebar-callout.tsx`). The chrome (top-border-only, full-width action buttons) is tuned for that ~280px column. Canonical sources: `packages/app/src/components/worktree-setup-callout-source.tsx`, `packages/app/src/desktop/updates/rosetta-callout-source.tsx`, `packages/app/src/desktop/updates/update-callout-source.tsx`. Never import `<SidebarCallout>` into a page — that's what `<Alert>` is for.
|
||||
Sidebar callouts — cross-cutting alerts that apply across the whole app, like worktree setup, Rosetta install, and desktop update available — register through `useSidebarCallouts()` and render in the left sidebar via `<SidebarCallout>` (`packages/app/src/components/sidebar-callout.tsx`). The chrome (top-border-only, full-width action buttons) is tuned for that ~280px column. Native apps and every compact sidebar show only callouts registered with `native: true`; leave it unset for callouts about the desktop app. Canonical sources: `packages/app/src/components/worktree-setup-callout-source.tsx`, `packages/app/src/desktop/updates/rosetta-callout-source.tsx`, `packages/app/src/desktop/updates/update-callout-source.tsx`. Never import `<SidebarCallout>` into a page — that's what `<Alert>` is for.
|
||||
|
||||
Imperative errors are `Alert.alert("Error", "Unable to ...")` (the React Native `Alert` API, not this component) for failures that interrupt the flow and have no place on the page.
|
||||
|
||||
|
||||
@@ -33,25 +33,36 @@ keeps only agents and terminals. A panel kind opts in with `compactSheet` in its
|
||||
(`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. 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.
|
||||
other sheet in the app, so it sits on the one app-wide stack: a sheet opened from any sheet lands on
|
||||
top of it, and closing the top sheet (drag, Close, backdrop, or Android Back) uncovers the one below.
|
||||
|
||||
A subagent chosen from the subagents list is the exception. It opens as a page of the list's own
|
||||
sheet and replaces the list in place: Back returns to the list, Close ends both, and Open parent
|
||||
closes the list, landing on the pane the list was opened from. The store's `selectSheetTab` describes
|
||||
the `SheetTab` a reveal would show without opening it, so the page never enters `sheetsByWorkspace`.
|
||||
See [menus.md](menus.md#a-page-that-fills-the-sheet) for the page contract.
|
||||
|
||||
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 both compact sidebars as well as the workspace. 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. Compact sheets use the app overlay host: a workspace-local
|
||||
host sits behind the app-level left sidebar. The workspace environment bridge preserves existing
|
||||
editing sessions, caches, file-link resolution and supported navigation context without moving
|
||||
their providers. Keep this capability at the workspace boundary; new sheet callers must not
|
||||
assemble provider internals. Wide layouts retain local hosting and pane geometry. Both hosts
|
||||
forward the same Gorhom modal queue; neither creates another stack. See
|
||||
Both kinds render the same `SheetPane` (`packages/app/src/screens/workspace/sheet-pane/`): the
|
||||
header (icon, title, Back when there is a list to return to, Open as tab, Close), the pane, its
|
||||
bottom inset, and its focus. Only the container differs, a workspace sheet in `sheet-tabs.tsx` or a
|
||||
menu page in `sheet-pane/page.tsx`, so a fix to what a sheet shows lands in one place. The
|
||||
container owns Android Back; the pane never subscribes to it.
|
||||
|
||||
Sheets are modal and cover both compact sidebars as well as the workspace. The header drags the
|
||||
sheet through `SheetDragArea`, 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. Compact sheets use the app overlay
|
||||
host: a workspace-local host sits behind the app-level left sidebar. The sheet pane bridge
|
||||
(`useSheetPaneBridge`) preserves existing editing sessions, caches, file-link resolution and
|
||||
supported navigation context without moving their providers. Keep this capability at the workspace
|
||||
boundary; new sheet callers must not assemble provider internals. Wide layouts retain local hosting
|
||||
and pane geometry. Both hosts forward the same Gorhom modal queue; neither creates another stack.
|
||||
See
|
||||
[floating-panels.md Gotcha 7](floating-panels.md#gotcha-7--a-sheet-cannot-read-context-from-its-call-site).
|
||||
|
||||
A sheet holding unsaved work is never implicitly displaced; only its guarded close removes it.
|
||||
|
||||
@@ -410,6 +410,19 @@ bridges the menu's two contexts; the rest pass `null`.
|
||||
|
||||
Wrapping providers _around_ the modal does nothing. They land on the wrong side.
|
||||
|
||||
## Gotcha 8 — Read safe-area insets where the overlay draws
|
||||
|
||||
A compact sheet tab's body (`SheetBottomInset` in `adaptive-modal-sheet.tsx`) pads the bottom
|
||||
inset and gives its content a bottom inset of 0, so the composer dock sits the same in a sheet as
|
||||
in a tab. An overlay opened from that content and calling `useSafeAreaInsets()` at its call site
|
||||
gets that 0 and draws over the navigation bar.
|
||||
|
||||
- A Gorhom sheet reads the inset inside its children, which render in the app's sheet host. See
|
||||
`CompactSheetBody`, `MenuSheetScrollView` and `ComboboxSheetFrame`.
|
||||
- An RN `Modal` passes the call site's context straight through, so put a `SafeAreaProvider`
|
||||
inside it and read the inset below that. The modal is its own window, and the provider measures
|
||||
it. See `attachment-lightbox.tsx`.
|
||||
|
||||
## Recipe for a new anchored panel
|
||||
|
||||
Before you write a new one, ask:
|
||||
|
||||
@@ -22,7 +22,7 @@ Authoritative terminology. UI label wins. Don't invent synonyms; use what's here
|
||||
- **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).
|
||||
- **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).
|
||||
- **Sheet tab** — A compact-layout sheet holding one file or subagent tab over the workspace without adding it to the tab switcher. A subagent chosen from the subagents list shows as a page of the list's sheet instead of a sheet of its own. UI action: "Open as tab". Code: `SheetTab` and `sheetsByWorkspace` in `packages/app/src/stores/workspace-layout-store.ts`, `SheetPane` (`packages/app/src/screens/workspace/sheet-pane/`). 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).
|
||||
@@ -34,6 +34,7 @@ Authoritative terminology. UI label wins. Don't invent synonyms; use what's here
|
||||
- **Agent profile** — A named launch bundle: provider, model, mode, thinking option, feature values, and free-text notes. Applying one writes those values into the **Agent controls** and is then forgotten — there is no selected profile, no default profile, and no drift tracking. The notes are written for orchestrating agents and are what the `list_profiles` MCP tool surfaces. Stored host-wide in daemon config as `agentProfiles`. UI: "Agent profiles". Code: `AgentProfile` (`packages/protocol/src/messages.ts:161`). Carries no system prompt, because a per-agent system prompt can only be set at creation. Forbidden: "Favourite", which this replaced.
|
||||
- **Terminal profile** — A named shell command a terminal can launch. Stored host-wide in daemon config as `terminalProfiles`. UI: "Terminal profiles". Code: `TerminalProfile` (`packages/protocol/src/messages.ts:135`), `resolveTerminalProfiles` (`packages/protocol/src/terminal-profiles.ts`). Also selectable as a New Workspace launch target, where the alternative is the chat agent.
|
||||
- **Provider** — Agent backend (Claude Code, Codex, Copilot, OpenCode, Pi, Oh My Pi). UI: "Provider". Code: `ProviderSnapshotEntry` (`packages/protocol/src/messages.ts:198`).
|
||||
- **Hook** — A plugin lifecycle handler registered with `server.addHook`, named `subject.operation.position` with `before` or `after`; each hook declares whether Paseo waits. See [hooks](../public-docs/plugins/hooks.md).
|
||||
- **Usage source** — Plugin registration that discovers accounts and fetches plan usage. Code: `UsageSourceRegistration` (`packages/plugin/src/server/usage.ts`).
|
||||
- **Report ID** — Stable daemon-composed identity for one source account: `<sourceId>:<accountKey>`. The source owns the account key; clients treat the whole ID as opaque. Code: `UsageReportEntry.id` (`packages/protocol/src/messages.ts`).
|
||||
- **Usage report** — A source's normalized usage for one account, including status and optional windows, balances, and details. Its entry carries the Report ID, account label, and fetch time. Each report renders as one card in the Usage modal, in host Settings, and in an agent's context window details (a hover card on desktop web, a tooltip on native wide screens, a sheet on compact ones), which show only the account that agent runs under, without pins. The hover card and the sheet have Refresh; the native tooltip takes no presses. Code: `UsageReport` (`packages/plugin/src/server/usage.ts`), `UsageCard` (`packages/app/src/usage/card.tsx`), `AgentUsage` (`packages/app/src/usage/agent-usage.tsx`).
|
||||
|
||||
@@ -52,10 +52,12 @@ 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
|
||||
A row whose result opens a sheet opens it as a page of the menu's own sheet, never as a second
|
||||
sheet over it: the row names a [fill page](#a-page-that-fills-the-sheet) with `opensPage`, the page
|
||||
replaces the list in place, Back returns to the list, and Close ends both. 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.
|
||||
store which sheet tab a row would show (`useSubagentSheetTab`), since the answer changes with the
|
||||
layout; a row with none opens its tab.
|
||||
|
||||
## Pages
|
||||
|
||||
@@ -101,6 +103,23 @@ The sheet keeps `keyboardBehavior="interactive"`. `extend` grows a sheet to its
|
||||
point, and with `enableDynamicSizing` that point is the content's own height — a short page does
|
||||
not grow, and the keyboard comes up over the field you are typing into.
|
||||
|
||||
## A page that fills the sheet
|
||||
|
||||
A page can carry its own content instead of rows: `{ id, fill: true, content }`. Only the sheet
|
||||
renders one. It takes the full-sheet snap point (`FULL_SHEET_SNAP_POINTS`) instead of sizing to
|
||||
content, and the sheet stops panning on content drags, because the page scrolls on its own and a
|
||||
drag would fight that scroll. The page's header drags the sheet instead, through `SheetDragArea`.
|
||||
|
||||
The content renders on the far side of the sheet's portal, so it brings its own context bridge,
|
||||
built where the page is defined. Sheet tabs are the one user: `useSheetPanePage` turns a `SheetTab`
|
||||
into a fill page around the same `SheetPane` the workspace's own sheets render. See
|
||||
[explorer-sidebar.md](explorer-sidebar.md#sheets).
|
||||
|
||||
Back pops one page. The header's Back and Android Back both call `goBack`, which answers `false` at
|
||||
the root so the sheet closes instead. A page whose definition disappears while it is open, such as
|
||||
a subagent archived from elsewhere, is pruned from the path, and the sheet falls back to the page
|
||||
that opened it.
|
||||
|
||||
## Hover intent
|
||||
|
||||
A flyout **overlaps its parent by 5pt** rather than sitting beside it. With a gap there is a strip
|
||||
@@ -189,7 +208,7 @@ its own.
|
||||
entering animation never ends at the off-screen measuring position; on a slow machine that
|
||||
write moved the open menu back off-screen.
|
||||
- **Sheets size to content.** `enableDynamicSizing`, not fixed snap points. A pushed page is
|
||||
rarely the height of the page before it.
|
||||
rarely the height of the page before it. A fill page is the one exception.
|
||||
- **The sheet's content is teleported out of the menu's subtree**, so `MenuSheetSurface` rebuilds
|
||||
both menu contexts through the sheet's `contextBridge`. Providing them around the modal puts
|
||||
them on the wrong side of the portal and every item inside throws. Gotcha 7 in
|
||||
|
||||
@@ -99,6 +99,10 @@ Built-in plugins ship from `plugins/<id>/`, with `paseo-plugin.json`, `index.ser
|
||||
`packages/server/src/server/plugins/builtin/index.ts`; the workspace, build copy, and CI
|
||||
checks cover that registry. Unlisted directories do not load.
|
||||
|
||||
The `worktree-include` built-in copies gitignored files selected by
|
||||
[`.worktreeinclude`](../public-docs/worktrees.md#copy-local-files-with-worktreeinclude)
|
||||
before setup and agents, through `worktree.create.after`.
|
||||
|
||||
Desktop packaging ships the entire built-in plugin directory as an external resource,
|
||||
including declarations. The external esbuild compiler cannot read Electron's `app.asar`
|
||||
filesystem, and packaging dependencies excludes `.d.ts` files needed for import validation.
|
||||
@@ -333,11 +337,10 @@ export default function contribute(client: PluginClientContext) {
|
||||
}
|
||||
```
|
||||
|
||||
The contribution function must return cleanup. Server cleanup may be async; Paseo waits for it when
|
||||
the plugin is reloaded, disabled, removed, disconnected, or shut down. Cleanup is for resources
|
||||
created by plugin code. Paseo removes registered contributions, unmounts surfaces, clears query
|
||||
state, rejects pending RPCs, closes the plugin's daemon session, and stops the subprocess. Cleanup
|
||||
errors are logged and do not interrupt host teardown.
|
||||
The contribution function must return cleanup for resources created by plugin code. Server cleanup
|
||||
may be async; Paseo waits for it when stopping the server plugin. Cleanup errors are logged and do
|
||||
not interrupt host teardown. Client installation retention and disposal follow the public
|
||||
[hosts and lifecycle contract](../public-docs/plugins/reference.md#hosts-and-lifecycle).
|
||||
|
||||
Paseo owns the route, screen header, icon validation, close action, theme DTO, layout facts,
|
||||
and render error boundary. The contributed component owns the complete body below the header.
|
||||
@@ -437,21 +440,16 @@ The [public reference](../public-docs/plugins/reference.md#icons) owns the autho
|
||||
|
||||
## Lifecycle hooks
|
||||
|
||||
Server entries register lifecycle observers with `server.on()` and request transforms with
|
||||
`server.before()`. The [public reference](../public-docs/plugins/reference.md#lifecycle-hooks)
|
||||
owns callback shapes, ordering, and failure behavior. `agent.create` edits the agent's saved
|
||||
configuration; `agent.session_open` contributes launch-only `env`, `tools`, and `mcpServers`,
|
||||
re-derived on each open and following the plugin's lifecycle. See
|
||||
[Inject MCP servers](../public-docs/plugins/reference.md#inject-mcp-servers) for choosing the hook.
|
||||
`plugin-examples/lifecycle-logger` registers all
|
||||
eleven hooks; `plugin-examples/lifecycle-actions` demonstrates common automation callbacks.
|
||||
Session-open hooks also [attach tools to individual agents](../public-docs/plugins/reference.md#attach-tools-to-agents),
|
||||
as shown in `plugin-examples/agent-tools`. The agent manager stamps their metadata per session;
|
||||
executable definitions stay in the plugin process.
|
||||
Server entries register async handlers with `server.addHook(name, handler)`, returning a cleanup
|
||||
function. Names follow `subject.operation.position`, ending in `before` or `after`. Waiting is a per-hook
|
||||
registry property, independent of position. The [hooks reference](../public-docs/plugins/hooks.md)
|
||||
owns payloads, ordering, failure behavior, and examples. `agent.create.before` edits saved
|
||||
configuration; `agent.open.before` contributes launch-only `env`, `tools`, and `mcpServers` on
|
||||
every open. Executable tool definitions stay in the plugin process; only metadata crosses the boundary.
|
||||
|
||||
Emit from the operation owner, not a client subscription. Provider history replay must not trigger
|
||||
live hooks. Observers must not be awaited inside agent mutations: a callback can send a prompt or
|
||||
answer a permission through its own daemon session. Awaiting it there deadlocks that command.
|
||||
live hooks. Notifications must not be awaited inside agent mutations: a handler can send a prompt
|
||||
or answer a permission through its own daemon session. Awaiting it there deadlocks that command.
|
||||
|
||||
## Contribute a provider
|
||||
|
||||
@@ -622,7 +620,10 @@ Request observation with `client.paseo.agents.list({ subscribe: {} })` and consu
|
||||
demand. Provider and project `subscribe()` calls establish their own demand. On capable daemons, each
|
||||
list-and-subscribe call has its own server ID, even for the same query. Older daemons retain
|
||||
[shared delivery behavior](protocol-compatibility.md#owned-observations). Handle snapshots
|
||||
also run after reconnect; replace your view before applying its subsequent updates. The installation
|
||||
also run after reconnect; replace your view before applying its subsequent updates. An installation
|
||||
stays loaded during a dropped connection while the app retains its `DaemonClient` object. An
|
||||
unchanged installation does not rerun setup on reconnect, so refresh state from those snapshots
|
||||
rather than from setup. Switching connections replaces the client object and reinstalls plugins. The installation
|
||||
owns every observation created through its API and releases them on unload, including setup failure.
|
||||
Mounted surfaces and command invocations have shorter API lifetimes.
|
||||
|
||||
|
||||
@@ -0,0 +1,69 @@
|
||||
# Terminal worker
|
||||
|
||||
Every terminal's PTY lives in the terminal worker, a process separate from the daemon. The worker outlives the daemon, so restarts, crashes and upgrades keep terminals running. This doc covers what the code can't tell you: why the process model is shaped this way, the rules nothing enforces, and the known limits.
|
||||
|
||||
## Process model
|
||||
|
||||
```
|
||||
supervisor (paseo.pid) ──► daemon worker ──► launcher ──► terminal worker ──► PTY programs
|
||||
exits (re-parented to init)
|
||||
```
|
||||
|
||||
- The daemon starts the worker through a launcher (`terminal-worker-process.ts --launch`). The launcher spawns the worker `detached`, waits for `ready` on fd 3, prints the pid and exits, so the worker is re-parented and leaves the daemon's process tree. The supervisor's forced kill uses `tree-kill`, which walks parent pids: a worker that stayed a child, even detached, would die with a hung daemon.
|
||||
- The worker talks to one daemon at a time over a local socket (named pipe on Windows). Losing the daemon means "no controller", not exit: PTYs keep running, events are dropped, and the headless terminal keeps the screen for the next daemon's `listTerminals`.
|
||||
- A socket disconnect triggers reconnection to the same worker and a screen replay. Only confirmed process death retires its sessions; the next terminal creation shares one replacement launch. Dead-worker cleanup stays scoped to that worker, so a healthy draining peer keeps running. Shutdown and detach suppress recovery.
|
||||
- The worker exits on its own when it has no controller and no terminals, on `shutdown`, on SIGTERM (killing its terminals), and when its record disappears (a deleted `$PASEO_HOME`: nobody can ever reach it again).
|
||||
- Its stderr goes to `$PASEO_HOME/terminal-worker.log`. No pipe to the daemon survives the daemon.
|
||||
|
||||
Which triggers keep terminals and which close them is owned by the stop reason (`keepTerminals`) that flows from the request through the supervisor to `stop()`. The kill side always ends in the reaper (`terminal-worker-reaper.ts`), the only path that signals terminal processes outside a connected daemon.
|
||||
|
||||
## Record, socket and secret
|
||||
|
||||
The worker writes `$PASEO_HOME/terminal-worker/<pid>.json` (owner-only) with its identity (birth time + command line carrying `--paseo-terminal-worker <recordId>`), protocol version, socket path, a random secret, the copy it runs from, and each terminal program's pid and birth time.
|
||||
|
||||
- The first frame on the socket must be `hello` with the secret; anything else closes the connection. Anyone who connects can type into every shell, so the record is `0600`, the unix socket `0600` in a `0700` directory.
|
||||
- Unix socket paths have a byte budget (103 on macOS, 107 on Linux). Dev homes under worktrees blow it, so `terminal-worker-socket-path.ts` tries `$PASEO_HOME/terminal-worker/sock/`, then `$TMPDIR/paseo-<uid>/`, then `/tmp/paseo-<uid>/`, and accepts an existing directory only if it is a real `0700` directory owned by you. It never chmods a shared root.
|
||||
- Cleanup signals a process only when its birth time matches the record. Birth times come from `ps -o lstart` with `LC_ALL=C` (it follows `LC_TIME` otherwise) and from `Win32_Process.CreationDate`. A missing birth time is "unknown", never matched by command text: a shell that ran `exec` keeps its pid and birth time but not its argv.
|
||||
- A kill cleanup that cannot confirm every process gone writes `closing-<recordId>.json` beside the worker record. The worker rewrites its own record whenever a terminal starts or exits, so the kill intent has to live in a file it never writes. A closing record is never adopted; the next stop or start retries it.
|
||||
- An unreadable record of either kind makes `daemon status` and a kill restart fail with its path: a kill cleanup that met it could not check what it names, and leaves nothing else behind. A read that fails with `EPERM`, `EBUSY` or `EACCES` is retried for 250ms first: on Windows, opening a record while the worker renames its new copy over it fails that way for a moment.
|
||||
|
||||
## Protocol versions
|
||||
|
||||
`TERMINAL_WORKER_PROTOCOL_VERSION` (`terminal-worker-protocol.ts`) is bumped whenever a request, response or event changes shape. A daemon classifies each live worker at start:
|
||||
|
||||
| Worker reports | Daemon does |
|
||||
| ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| its own version | adopts it |
|
||||
| one version older | adopts it to drain: it keeps its terminals, takes no new ones, and is let go after its last terminal exits |
|
||||
| two or more older | shuts it down; its terminals close (logged) |
|
||||
| newer, or a version it cannot read | leaves it running, undriven; `list_terminals` and `create_terminal` answer `rpc_error` `terminal_worker_incompatible`, and `paseo daemon status` prints why |
|
||||
|
||||
Never more than two workers run. A new worker launches only when none is current, none is incompatible and fewer than two run. The count comes from the records, so an unreachable or unidentified worker counts, and so does one a cleanup could not confirm gone. When two run, the daemon starts with no current worker, and the first terminal created after one of them exits launches it.
|
||||
|
||||
**The frozen envelope never changes across versions:** the frame format (4-byte length + `v8.serialize`), `hello`/`helloAck`, the `listTerminals` info fields and `shutdown`. That is what lets any daemon close any worker: a kill stop sends `shutdown` to a newer worker it cannot otherwise drive. When you bump the version, keep a previous-version adapter so the draining worker can still be driven, and drop the adapter for the version before that.
|
||||
|
||||
Tests stand up other versions with `PASEO_TERMINAL_WORKER_PROTOCOL_OVERRIDE`, read by the worker. It is test-only.
|
||||
|
||||
## Running from its own copy
|
||||
|
||||
A worker outlives the installation that started it. An npm or desktop update replaces that installation's files, and the next terminal the old worker creates would load node-pty's `spawn-helper` and the zsh integration from paths that no longer exist. So a built daemon does not launch the worker from its install:
|
||||
|
||||
- `npm run build` bundles the worker with esbuild (`packages/server/scripts/build-terminal-worker.mjs`) into `dist/server/terminal-worker/` with its `shell-integration/` beside it. Only node-pty stays external. A package loaded through a module-local `createRequire` is invisible to esbuild and would be missing at run time; `terminal-worker-runtime.test.ts` fails if the bundle loads anything but built-ins and node-pty.
|
||||
- Before launching, the daemon copies the bundle, the shell integration and node-pty (this platform's native build only) into `$PASEO_HOME/terminal-worker/<paseoVersion>-<hash>/` and launches from there. The hash covers the bundle and node-pty, so a local rebuild of the same version gets its own copy.
|
||||
- A copy is deleted once no record names it: after a draining worker exits, after a kill cleanup, and at daemon start. The daemon and the reaper delete copies, never the worker itself, so a worker exiting cannot remove a copy a new worker is about to launch from.
|
||||
- Dev (`.ts` source) launches from source and copies nothing.
|
||||
|
||||
Each create carries the controlling daemon's environment and Paseo CLI path (`baseEnv`, `paseoCliPath`), so a terminal opened after an upgrade gets the new installation's `PASEO_CLI` while older terminals keep theirs.
|
||||
|
||||
## Desktop
|
||||
|
||||
Desktop app updates and version-mismatch restarts stop the daemon with "keep terminals" on macOS and Linux, through `daemon stop --keep-terminals` (the shutdown RPC; SIGTERM always means "stop and close"). A daemon that predates the feature cannot keep terminals: the CLI refuses before sending anything, and desktop logs that and stops it with its terminals closed.
|
||||
|
||||
On Windows every desktop stop closes terminals. In the desktop app the worker runs as `Paseo.exe` with `ELECTRON_RUN_AS_NODE`, and a surviving one would lock the install folder the NSIS update replaces. Restarts, crashes and npm self-updates keep terminals on Windows too.
|
||||
|
||||
## Known limits
|
||||
|
||||
- On macOS `ps` has no session id, so a HUP-ignoring child of a shell that had already exited before cleanup started (re-parented to launchd) is not found. Linux reaches it through the session; a program that `exec`s keeps its entry on every OS.
|
||||
- On Linux, a member of a gone shell's session is signaled only if its environment carries that terminal's `PASEO_TERMINAL_ID`. A job that scrubbed its environment (`env -i`) is reported as unconfirmed, with its pid, and never signaled.
|
||||
- The agent-hook activity URL is baked into each shell when it starts. If the daemon's listen address changes across a restart, older shells report to the old address.
|
||||
- Restoring terminals after a reboot is out of scope: records from an earlier boot are retired without signaling anything.
|
||||
@@ -5,12 +5,16 @@ import { expectComposerVisible } from "../support/helpers/composer";
|
||||
import { installDaemonWebSocketGate } from "../support/helpers/daemon-websocket-gate";
|
||||
import { openAgentRoute, seedMockAgentWorkspace } from "../support/helpers/mock-agent";
|
||||
import {
|
||||
expectSubagentRowGone,
|
||||
expectSubagentRowVisible,
|
||||
openSubagentFromCompactTrack,
|
||||
seedSubagent,
|
||||
} from "../support/helpers/subagents";
|
||||
import {
|
||||
backToList,
|
||||
closeSheet,
|
||||
expectNoSheetOpen,
|
||||
expectOneSheetOpen,
|
||||
expectOpenTabCount,
|
||||
openSheetAsTab,
|
||||
expectDeclinedDiscardPrompt,
|
||||
@@ -52,6 +56,10 @@ test("compact opens files and subagents in a sheet, leaving the tabs for agents"
|
||||
{ client: workspace.client, repoPath: workspace.cwd, workspaceId: workspace.workspaceId },
|
||||
{ parentId: workspace.agentId, title: "Sheet child" },
|
||||
);
|
||||
const grandchild = await seedSubagent(
|
||||
{ client: workspace.client, repoPath: workspace.cwd, workspaceId: workspace.workspaceId },
|
||||
{ parentId: child.id, title: "Sheet grandchild" },
|
||||
);
|
||||
await openAgentRoute(page, { workspaceId: workspace.workspaceId, agentId: workspace.agentId });
|
||||
await expectOpenTabCount(page, 1);
|
||||
|
||||
@@ -79,12 +87,14 @@ test("compact opens files and subagents in a sheet, leaving the tabs for agents"
|
||||
await tapSheetBackdrop(page);
|
||||
});
|
||||
|
||||
await test.step("a subagent opens in a sheet over the subagents list", async () => {
|
||||
await test.step("a subagent opens in place of the subagents list", async () => {
|
||||
await openSubagentFromCompactTrack(page, child.id);
|
||||
|
||||
const childSheet = sheet(page, child.title);
|
||||
await expect(childSheet).toBeVisible();
|
||||
await expectSheetAtSnap(page, child.title);
|
||||
await expectSubagentRowGone(page, child.id);
|
||||
await expectOneSheetOpen(page);
|
||||
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.
|
||||
@@ -94,23 +104,51 @@ test("compact opens files and subagents in a sheet, leaving the tabs for agents"
|
||||
await expectOpenTabCount(page, 1);
|
||||
});
|
||||
|
||||
await test.step("closing the subagent's sheet uncovers the list", async () => {
|
||||
await closeSheet(page, child.title);
|
||||
await test.step("Back returns the sheet to the list", async () => {
|
||||
await backToList(page, child.title);
|
||||
await expectSubagentRowVisible(page, child.id);
|
||||
await expectOneSheetOpen(page);
|
||||
});
|
||||
|
||||
await test.step("Close closes the list with the subagent", async () => {
|
||||
await page.getByTestId(`subagents-track-row-${child.id}`).click();
|
||||
await closeSheet(page, child.title);
|
||||
await expectSubagentRowGone(page, child.id);
|
||||
await expectNoSheetOpen(page);
|
||||
});
|
||||
|
||||
await test.step("the parent box in a subagent's sheet closes it onto the parent", async () => {
|
||||
await page.getByTestId(`subagents-track-row-${child.id}`).click();
|
||||
await openSubagentFromCompactTrack(page, child.id);
|
||||
const childSheet = sheet(page, child.title);
|
||||
await expectSheetAtSnap(page, child.title);
|
||||
await expect(childSheet.getByTestId("composer-parent-agent-pill")).toHaveCount(0);
|
||||
await childSheet.getByTestId("parent-agent-callout-open").click();
|
||||
await expect(childSheet).toHaveCount(0);
|
||||
await expectNoSheetOpen(page);
|
||||
await expectOpenTabCount(page, 1);
|
||||
});
|
||||
|
||||
await test.step("a nested subagent's parent box lands on its parent's sheet", async () => {
|
||||
await openSubagentFromCompactTrack(page, child.id);
|
||||
const childSheet = sheet(page, child.title);
|
||||
await openSubagentFromCompactTrack(page, grandchild.id, childSheet);
|
||||
const grandchildSheet = sheet(page, grandchild.title);
|
||||
await expectSheetAtSnap(page, grandchild.title);
|
||||
await expect(grandchildSheet.getByTestId("parent-agent-callout")).toContainText(child.title);
|
||||
|
||||
await grandchildSheet.getByTestId("parent-agent-callout-open").click();
|
||||
await expect(grandchildSheet).toHaveCount(0);
|
||||
await expect(childSheet).toBeVisible();
|
||||
await expectOneSheetOpen(page);
|
||||
|
||||
await childSheet.getByTestId("parent-agent-callout-open").click();
|
||||
await expect(childSheet).toHaveCount(0);
|
||||
await expectNoSheetOpen(page);
|
||||
await expectOpenTabCount(page, 1);
|
||||
});
|
||||
|
||||
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 openSubagentFromCompactTrack(page, child.id);
|
||||
await expectSheetAtSnap(page, child.title);
|
||||
await openSheetAsTab(page, child.title);
|
||||
await expect(page.getByTestId(`subagents-track-row-${child.id}`)).toHaveCount(0);
|
||||
@@ -123,7 +161,7 @@ test("compact opens files and subagents in a sheet, leaving the tabs for agents"
|
||||
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 test.step("once its tab closes, the subagent reopens in place of the list", async () => {
|
||||
await page
|
||||
.getByRole("button", { name: /Switch tabs/ })
|
||||
.filter({ visible: true })
|
||||
@@ -141,7 +179,7 @@ test("compact opens files and subagents in a sheet, leaving the tabs for agents"
|
||||
|
||||
await openSubagentFromCompactTrack(page, child.id);
|
||||
await expectSheetAtSnap(page, child.title);
|
||||
await closeSheet(page, child.title);
|
||||
await backToList(page, child.title);
|
||||
await expectSubagentRowVisible(page, child.id);
|
||||
await tapSheetBackdrop(page);
|
||||
await expect(page.getByRole("button", { name: "Bottom sheet backdrop" })).toHaveCount(0);
|
||||
|
||||
@@ -8,7 +8,11 @@ import {
|
||||
openDaemonOverview,
|
||||
restartDaemonInSettings,
|
||||
expectDaemonRestartComplete,
|
||||
expectDaemonRestartFailed,
|
||||
plantUnclosableTerminalProgram,
|
||||
readWorkerPid,
|
||||
openLongLivedTerminal,
|
||||
listTerminalIds,
|
||||
} from "../support/helpers/daemon-lifecycle";
|
||||
|
||||
test("settings restart waits for a replacement worker while retaining the supervisor", async ({
|
||||
@@ -29,6 +33,57 @@ test("settings restart waits for a replacement worker while retaining the superv
|
||||
}
|
||||
});
|
||||
|
||||
test("settings restart keeps a terminal", async ({ page }) => {
|
||||
const daemon = await startIsolatedHostDaemon(randomUUID());
|
||||
try {
|
||||
const terminalId = await openLongLivedTerminal(daemon);
|
||||
const previousWorker = await readWorkerPid(daemon);
|
||||
await openDaemonOverview(page, daemon);
|
||||
await restartDaemonInSettings(page);
|
||||
await expectDaemonRestartComplete(page);
|
||||
expect(await readWorkerPid(daemon)).not.toBe(previousWorker);
|
||||
expect(await listTerminalIds(daemon)).toContain(terminalId);
|
||||
} finally {
|
||||
await daemon.close();
|
||||
}
|
||||
});
|
||||
|
||||
test("settings restart and close terminals closes the terminal", async ({ page }) => {
|
||||
const daemon = await startIsolatedHostDaemon(randomUUID());
|
||||
try {
|
||||
await openLongLivedTerminal(daemon);
|
||||
const previousWorker = await readWorkerPid(daemon);
|
||||
await openDaemonOverview(page, daemon);
|
||||
await restartDaemonInSettings(page, { closeTerminals: true });
|
||||
await expectDaemonRestartComplete(page);
|
||||
expect(await readWorkerPid(daemon)).not.toBe(previousWorker);
|
||||
expect(await listTerminalIds(daemon)).toEqual([]);
|
||||
} finally {
|
||||
await daemon.close();
|
||||
}
|
||||
});
|
||||
|
||||
test("settings restart and close terminals shows the processes it could not close", async ({
|
||||
page,
|
||||
}, testInfo) => {
|
||||
test.skip(process.platform === "win32", "The unclosable program is a POSIX zombie");
|
||||
const daemon = await startIsolatedHostDaemon(randomUUID());
|
||||
let program: Awaited<ReturnType<typeof plantUnclosableTerminalProgram>> | null = null;
|
||||
try {
|
||||
program = await plantUnclosableTerminalProgram(daemon);
|
||||
await openDaemonOverview(page, daemon);
|
||||
await restartDaemonInSettings(page, { closeTerminals: true });
|
||||
await expectDaemonRestartFailed(page, `pid ${program.pid}`);
|
||||
await page.screenshot({
|
||||
path: testInfo.outputPath("restart-cleanup-failed.png"),
|
||||
fullPage: true,
|
||||
});
|
||||
} finally {
|
||||
program?.release();
|
||||
await daemon.close();
|
||||
}
|
||||
});
|
||||
|
||||
test("settings restart replaces the worker when a provider CLI answers --version slowly", async ({
|
||||
page,
|
||||
}) => {
|
||||
|
||||
@@ -0,0 +1,69 @@
|
||||
import { randomUUID } from "node:crypto";
|
||||
import type { Page } from "@playwright/test";
|
||||
import { expect, metroTest as test } from "../support/fixtures";
|
||||
import { gotoAppShell } from "../support/helpers/app";
|
||||
import { buildSeededHost } from "../support/helpers/daemon-registry";
|
||||
import { startIsolatedHostDaemon } from "../support/helpers/isolated-host-daemon";
|
||||
|
||||
// 0.8.0 predates terminalsSurviveRestart and supports daemonSelfUpdate.
|
||||
const PUBLISHED_DAEMON_VERSION = "0.8.0";
|
||||
const COMPACT = { width: 390, height: 844 };
|
||||
|
||||
// Opens the app against a published 0.8.0 daemon, with the developer daemon blocked.
|
||||
async function withOutdatedDaemon(page: Page, run: () => Promise<void>): Promise<void> {
|
||||
const serverId = `srv_daemon_outdated_${randomUUID().replaceAll("-", "").slice(0, 12)}`;
|
||||
const daemon = await startIsolatedHostDaemon(serverId, {
|
||||
publishedVersion: PUBLISHED_DAEMON_VERSION,
|
||||
});
|
||||
|
||||
try {
|
||||
const host = buildSeededHost({
|
||||
serverId,
|
||||
endpoint: `127.0.0.1:${daemon.port}`,
|
||||
nowIso: new Date().toISOString(),
|
||||
});
|
||||
await page.route(/:6767\b/, (route) => route.abort());
|
||||
await page.routeWebSocket(/:6767\b/, async (webSocket) => {
|
||||
await webSocket.close({ code: 1008, reason: "Blocked developer daemon during e2e." });
|
||||
});
|
||||
await page.addInitScript(
|
||||
({ seededHost }) => {
|
||||
localStorage.setItem("@paseo:e2e", "1");
|
||||
localStorage.setItem("@paseo:daemon-registry", JSON.stringify([seededHost]));
|
||||
},
|
||||
{ seededHost: host },
|
||||
);
|
||||
|
||||
await gotoAppShell(page);
|
||||
await run();
|
||||
} finally {
|
||||
await daemon.close();
|
||||
}
|
||||
}
|
||||
|
||||
async function expectOutdatedNotice(page: Page): Promise<void> {
|
||||
const callout = page.getByTestId("daemon-outdated-callout").first();
|
||||
await expect(callout).toBeVisible({ timeout: 30_000 });
|
||||
await expect(callout).toContainText("Daemon out of date");
|
||||
await expect(callout).toContainText(`daemon v${PUBLISHED_DAEMON_VERSION}`);
|
||||
await expect(callout).toContainText("Updating restarts the daemon and closes open terminals.");
|
||||
const update = page.getByTestId("daemon-outdated-callout-update").first();
|
||||
await expect(update).toBeVisible();
|
||||
await expect(update).toBeEnabled();
|
||||
}
|
||||
|
||||
test("sidebar shows an update notice when the active host's daemon is older than the app", async ({
|
||||
page,
|
||||
}) => {
|
||||
test.setTimeout(180_000);
|
||||
await withOutdatedDaemon(page, () => expectOutdatedNotice(page));
|
||||
});
|
||||
|
||||
test("compact sidebar shows the update notice, which is a native callout", async ({ page }) => {
|
||||
test.setTimeout(180_000);
|
||||
await page.setViewportSize(COMPACT);
|
||||
await withOutdatedDaemon(page, async () => {
|
||||
await page.getByRole("button", { name: "Open menu", exact: true }).first().click();
|
||||
await expectOutdatedNotice(page);
|
||||
});
|
||||
});
|
||||
@@ -1,3 +1,13 @@
|
||||
import {
|
||||
withRetainedPlugin,
|
||||
editRetainedDraft,
|
||||
expectRetainedDraft,
|
||||
expectStoredPluginTitle,
|
||||
hideRetainedPreferences,
|
||||
showRetainedPreferences,
|
||||
expectChangedPlugin,
|
||||
expectRemovedPlugin,
|
||||
} from "../support/helpers/plugin-reconnect";
|
||||
import { verifyPluginTranslations } from "../support/helpers/plugin-translations";
|
||||
import { pluginRequirements } from "../support/helpers/plugin-fixture";
|
||||
import { mkdtemp, readFile, rm, writeFile } from "node:fs/promises";
|
||||
@@ -188,3 +198,51 @@ test("plugin content and host labels follow app language without losing an open
|
||||
test.setTimeout(180_000);
|
||||
await verifyPluginTranslations(page, info);
|
||||
});
|
||||
|
||||
test("retains plugin state offline and reconciles settings, changed code and removal", async ({
|
||||
page,
|
||||
}) => {
|
||||
test.setTimeout(180_000);
|
||||
await withRetainedPlugin(page, async (probe) => {
|
||||
await probe.open();
|
||||
await editRetainedDraft(page, "Connected draft", 0);
|
||||
|
||||
await test.step("local plugin UI remains mounted and usable while disconnected", async () => {
|
||||
await probe.disconnect();
|
||||
await expectRetainedDraft(page, "Connected draft", 1);
|
||||
await editRetainedDraft(page, "Offline draft", 1);
|
||||
await probe.changeStoredTitle("Saved by another client");
|
||||
await expectStoredPluginTitle(page, "Agent monitor");
|
||||
await probe.reconnect();
|
||||
await expectStoredPluginTitle(page, "Saved by another client");
|
||||
await expectRetainedDraft(page, "Offline draft", 2);
|
||||
});
|
||||
|
||||
await test.step("inactive settings refresh without replacing the installation", async () => {
|
||||
await hideRetainedPreferences(page);
|
||||
await probe.disconnect();
|
||||
await probe.changeStoredTitle("Saved while preferences hidden");
|
||||
await probe.reconnect();
|
||||
await showRetainedPreferences(page);
|
||||
await expectStoredPluginTitle(page, "Saved while preferences hidden");
|
||||
await expectRetainedDraft(page, "Offline draft", 2);
|
||||
});
|
||||
|
||||
await test.step("changed code replaces the retained installation after reconnect", async () => {
|
||||
await probe.disconnect();
|
||||
await probe.changeCode();
|
||||
await expectRetainedDraft(page, "Offline draft", 2);
|
||||
await probe.reconnect();
|
||||
await expectChangedPlugin(page);
|
||||
await editRetainedDraft(page, "New code draft", 0);
|
||||
});
|
||||
|
||||
await test.step("removal is reconciled after reconnect", async () => {
|
||||
await probe.disconnect();
|
||||
await probe.remove();
|
||||
await expectRetainedDraft(page, "New code draft", 1);
|
||||
await probe.reconnect();
|
||||
await expectRemovedPlugin(page);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -415,8 +415,19 @@ test.describe("Settings — compact master-detail", () => {
|
||||
const workspace = await withWorkspace({ prefix: "host-picker-settings-back-" });
|
||||
const workspaceRoute = buildHostWorkspaceRoute(getServerId(), workspace.workspaceId);
|
||||
|
||||
await openWorkspace(page, workspace);
|
||||
const worktreeSetupCallout = page.locator('[data-testid^="worktree-setup-callout-"]');
|
||||
|
||||
await test.step("the wide sidebar shows the worktree setup prompt for this workspace", async () => {
|
||||
await page.setViewportSize({ width: 1280, height: 900 });
|
||||
await openWorkspace(page, workspace);
|
||||
await expect(worktreeSetupCallout.first()).toBeVisible({ timeout: 30_000 });
|
||||
await page.setViewportSize({ width: 390, height: 844 });
|
||||
});
|
||||
|
||||
await page.getByRole("button", { name: "Open menu", exact: true }).click();
|
||||
// The compact sidebar shows only native callouts, so the prompt stays out.
|
||||
await expect(page.getByTestId("sidebar-hosts-trigger")).toBeVisible();
|
||||
await expect(worktreeSetupCallout).toHaveCount(0);
|
||||
await page.getByTestId("sidebar-hosts-trigger").click();
|
||||
await page.getByRole("button", { name: /Open .* settings/ }).click();
|
||||
|
||||
@@ -479,3 +490,76 @@ test.describe("Settings — compact master-detail", () => {
|
||||
await expect(page.getByTestId("welcome-direct-connection")).toBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
async function measureDockedNavigation(page: import("@playwright/test").Page, width: number) {
|
||||
await page.setViewportSize({ width, height: 951 });
|
||||
const history = page.getByRole("button", { name: /^History/ }).filter({ visible: true });
|
||||
const settings = page
|
||||
.getByRole("button", { name: "Settings", exact: true })
|
||||
.filter({ visible: true });
|
||||
await expect(history).toBeVisible();
|
||||
await expect(settings).toBeVisible();
|
||||
return {
|
||||
width,
|
||||
history: await history.evaluate((el) => el.getBoundingClientRect().height),
|
||||
settings: await settings.evaluate((el) => el.getBoundingClientRect().height),
|
||||
};
|
||||
}
|
||||
|
||||
async function measureSettingsSplit(page: import("@playwright/test").Page, width: number) {
|
||||
await page.setViewportSize({ width, height: 951 });
|
||||
const sidebar = page.getByTestId("settings-sidebar");
|
||||
const detail = page.getByTestId("settings-detail-pane");
|
||||
await expect(sidebar).toBeVisible();
|
||||
await expect(detail).toBeVisible();
|
||||
return {
|
||||
width,
|
||||
sidebar: await sidebar.evaluate((el) => el.getBoundingClientRect().width),
|
||||
detail: await detail.evaluate((el) => el.getBoundingClientRect().width),
|
||||
};
|
||||
}
|
||||
|
||||
async function expectConsistentDockedNavigation(page: import("@playwright/test").Page) {
|
||||
const wide = await measureDockedNavigation(page, 951);
|
||||
for (const width of [600, 669, 719, 720]) {
|
||||
const narrow = await measureDockedNavigation(page, width);
|
||||
expect
|
||||
.soft(narrow.history, `History keeps its wide-layout density at ${width}`)
|
||||
.toBeCloseTo(wide.history, 0);
|
||||
expect
|
||||
.soft(narrow.settings, `Settings keeps its wide-layout density at ${width}`)
|
||||
.toBeCloseTo(wide.settings, 0);
|
||||
}
|
||||
}
|
||||
|
||||
async function expectSettingsDetailKeepsReadingWidth(page: import("@playwright/test").Page) {
|
||||
const reference = await measureSettingsSplit(page, 720);
|
||||
for (const width of [600, 669, 719]) {
|
||||
const narrow = await measureSettingsSplit(page, width);
|
||||
expect
|
||||
.soft(narrow.detail, `Settings preserves its detail budget at ${width}`)
|
||||
.toBeGreaterThanOrEqual(reference.detail);
|
||||
expect
|
||||
.soft(narrow.sidebar, `Settings navigation yields width at ${width}`)
|
||||
.toBeLessThan(reference.sidebar);
|
||||
}
|
||||
const wide = await measureSettingsSplit(page, 951);
|
||||
expect(wide.sidebar).toBeCloseTo(reference.sidebar, 0);
|
||||
expect(wide.detail).toBeGreaterThan(reference.detail);
|
||||
}
|
||||
|
||||
test("docked navigation keeps its density and Settings preserves reading width", async ({
|
||||
page,
|
||||
withWorkspace,
|
||||
}) => {
|
||||
const workspace = await withWorkspace({ prefix: "narrow-wide-layout-" });
|
||||
await gotoWorkspace(page, workspace.workspaceId);
|
||||
await expectConsistentDockedNavigation(page);
|
||||
await openSettings(page);
|
||||
await openSettingsSection(page, "appearance");
|
||||
await expectAppearanceContent(page);
|
||||
await expectSettingsDetailKeepsReadingWidth(page);
|
||||
await page.setViewportSize({ width: 599, height: 951 });
|
||||
await expectSettingsSidebarHidden(page);
|
||||
await expectAppearanceContent(page);
|
||||
});
|
||||
|
||||
@@ -1,8 +1,15 @@
|
||||
import type { Page } from "@playwright/test";
|
||||
import type { Locator, Page } from "@playwright/test";
|
||||
import { test, expect } from "../support/fixtures";
|
||||
import { scrollChatAwayFromBottom } from "../support/helpers/agent-bottom-anchor";
|
||||
import { gateSecondToolCall } from "../support/helpers/tool-call-gate";
|
||||
import { expectComposerVisible } from "../support/helpers/composer";
|
||||
import { daemonWsRoutePattern } from "../support/helpers/daemon-port";
|
||||
import { openAgentRoute, seedMockAgentWorkspace } from "../support/helpers/mock-agent";
|
||||
import {
|
||||
readReactRenders,
|
||||
recordReactRenders,
|
||||
resetReactRenders,
|
||||
} from "../support/helpers/react-renders";
|
||||
|
||||
type WebSocketMessage = string | Buffer;
|
||||
|
||||
@@ -115,23 +122,27 @@ async function holdStreamAfterFirstCompletedToolCall(page: Page, agentId: string
|
||||
});
|
||||
});
|
||||
|
||||
function appendCompletedCalls(extraCompletedCalls: number) {
|
||||
if (extraCompletedCalls > 0 && (!firstCallId || !firstCompletedMessage)) {
|
||||
throw new Error("Expected the first completed tool call before release");
|
||||
}
|
||||
for (let index = 0; index < extraCompletedCalls; index += 1) {
|
||||
sendToPage?.(
|
||||
cloneToolCallWithId(
|
||||
firstCompletedMessage as WebSocketMessage,
|
||||
`${firstCallId}:${sequenceOffset + index}`,
|
||||
sequenceOffset + index + 1,
|
||||
),
|
||||
);
|
||||
}
|
||||
sequenceOffset += extraCompletedCalls;
|
||||
}
|
||||
return {
|
||||
waitForFirstCompleted: () => firstCompleted,
|
||||
appendCompletedCalls,
|
||||
release(extraCompletedCalls = 0) {
|
||||
isHolding = false;
|
||||
if (extraCompletedCalls > 0 && (!firstCallId || !firstCompletedMessage)) {
|
||||
throw new Error("Expected the first completed tool call before release");
|
||||
}
|
||||
for (let index = 0; index < extraCompletedCalls; index += 1) {
|
||||
sendToPage?.(
|
||||
cloneToolCallWithId(
|
||||
firstCompletedMessage as WebSocketMessage,
|
||||
`${firstCallId}:${index}`,
|
||||
index + 1,
|
||||
),
|
||||
);
|
||||
}
|
||||
sequenceOffset = extraCompletedCalls;
|
||||
appendCompletedCalls(extraCompletedCalls);
|
||||
for (const message of heldMessages.splice(0)) {
|
||||
sendToPage?.(shiftTimelineSequence(message, sequenceOffset));
|
||||
}
|
||||
@@ -139,17 +150,24 @@ async function holdStreamAfterFirstCompletedToolCall(page: Page, agentId: string
|
||||
};
|
||||
}
|
||||
|
||||
async function configureOverviewToolCalls(page: Page): Promise<void> {
|
||||
await page.addInitScript(() => {
|
||||
type OverviewChatDisplay = "collapseToolCalls" | "collapseTurns";
|
||||
|
||||
// Expand thinking keeps reasoning out of tool call runs, so the first tool call starts alone.
|
||||
async function configureOverviewToolCalls(page: Page, chatDisplay: OverviewChatDisplay) {
|
||||
await page.addInitScript((display) => {
|
||||
localStorage.setItem(
|
||||
"@paseo:app-settings",
|
||||
JSON.stringify({ chatDisplay: "collapseToolCalls" }),
|
||||
JSON.stringify({ chatDisplay: display, autoExpandReasoning: true }),
|
||||
);
|
||||
});
|
||||
}, chatDisplay);
|
||||
}
|
||||
|
||||
async function createOverviewAgent(page: Page, title: string) {
|
||||
await configureOverviewToolCalls(page);
|
||||
async function createOverviewAgent(
|
||||
page: Page,
|
||||
title: string,
|
||||
chatDisplay: OverviewChatDisplay = "collapseToolCalls",
|
||||
) {
|
||||
await configureOverviewToolCalls(page, chatDisplay);
|
||||
return seedMockAgentWorkspace({
|
||||
repoPrefix: "tool-call-overview-sheet-",
|
||||
title,
|
||||
@@ -204,6 +222,36 @@ function readScrollMetrics(root: HTMLElement) {
|
||||
};
|
||||
}
|
||||
|
||||
const FIRST_CALL_DETAILS = "export function ConversationList()";
|
||||
|
||||
function firstToolCall(page: Page): Locator {
|
||||
return page.getByTestId("tool-call-badge").filter({ hasText: "conversation-list.tsx" }).first();
|
||||
}
|
||||
|
||||
async function openToolDetails(badge: Locator): Promise<void> {
|
||||
await badge.getByRole("button").first().click();
|
||||
}
|
||||
|
||||
async function timelineRowOf(locator: Locator) {
|
||||
const row = await locator.locator("xpath=ancestor::*[@data-history-row-id][1]").elementHandle();
|
||||
if (!row) throw new Error("Expected the locator inside a timeline row");
|
||||
return row;
|
||||
}
|
||||
|
||||
/** Whether the locator renders inside this exact row node, i.e. the row was not remounted. */
|
||||
async function isInsideRow(
|
||||
locator: Locator,
|
||||
row: Awaited<ReturnType<typeof timelineRowOf>>,
|
||||
): Promise<boolean> {
|
||||
return locator.evaluate((node, previousRow) => previousRow.contains(node), row);
|
||||
}
|
||||
|
||||
async function topOf(row: Locator): Promise<number> {
|
||||
const box = await row.boundingBox();
|
||||
if (!box) throw new Error("Expected a visible timeline row");
|
||||
return box.y;
|
||||
}
|
||||
|
||||
test.describe("compact overview tool calls", () => {
|
||||
test.use({ viewport: COMPACT_VIEWPORT, hasTouch: true });
|
||||
|
||||
@@ -219,8 +267,16 @@ test.describe("compact overview tool calls", () => {
|
||||
await agent.client.sendAgentMessage(agent.agentId, "Exercise the overview tool-call sheet.");
|
||||
await gate.waitForFirstCompleted();
|
||||
|
||||
const single = firstToolCall(page);
|
||||
await expect(single).toBeVisible();
|
||||
await expect(page.getByTestId("tool-call-group")).toHaveCount(0);
|
||||
await openToolDetails(single);
|
||||
await expect(page.getByTestId("tool-call-sheet-close")).toBeVisible();
|
||||
await page.getByTestId("tool-call-sheet-close").click();
|
||||
gate.appendCompletedCalls(1);
|
||||
const group = page.getByTestId("tool-call-group").first();
|
||||
await expect(group).toBeVisible();
|
||||
await expect(page.getByTestId("tool-call-group-sheet")).toBeHidden();
|
||||
await group.click();
|
||||
|
||||
const sheet = page.getByTestId("tool-call-group-sheet");
|
||||
@@ -261,27 +317,86 @@ test.describe("compact overview tool calls", () => {
|
||||
});
|
||||
});
|
||||
|
||||
test("keeps overview tool calls inline on desktop", async ({ page }) => {
|
||||
for (const display of ["collapseToolCalls", "collapseTurns"] as const) {
|
||||
test(`keeps an opened lone tool call open when it becomes a group (${display})`, async ({
|
||||
page,
|
||||
}) => {
|
||||
test.setTimeout(120_000);
|
||||
const agent = await createOverviewAgent(page, "Desktop overview tool calls", display);
|
||||
await recordReactRenders(page);
|
||||
try {
|
||||
const gate = await gateSecondToolCall(page, agent.agentId);
|
||||
await openOverviewAgent(page, agent);
|
||||
await agent.client.sendAgentMessage(agent.agentId, "Exercise desktop overview tool calls.");
|
||||
await gate.waitForFirstCompleted();
|
||||
const lone = firstToolCall(page);
|
||||
const group = page.getByTestId("tool-call-group").first();
|
||||
const details = page.getByText(FIRST_CALL_DETAILS);
|
||||
|
||||
await test.step("a lone tool call shows as itself", async () => {
|
||||
await expect(lone).toBeVisible();
|
||||
await expect(group).toHaveCount(0);
|
||||
});
|
||||
|
||||
await gate.waitForSecondRunning();
|
||||
await test.step("opening it re-renders that tool call and nothing else", async () => {
|
||||
await resetReactRenders(page);
|
||||
await openToolDetails(lone);
|
||||
await expect(details).toBeVisible();
|
||||
const renders = await readReactRenders(page);
|
||||
expect(renders.AgentStreamView ?? 0).toBe(0);
|
||||
expect(renders.StreamRowContent ?? 0).toBe(0);
|
||||
expect(renders.ToolCall).toBe(1);
|
||||
});
|
||||
|
||||
await test.step("the second call forms an open group around the opened call", async () => {
|
||||
// Reading above the tail, the row holds still; at the tail the new rows push it up.
|
||||
await scrollChatAwayFromBottom(page, { deltaY: -160, minDistanceFromBottom: 72 });
|
||||
const loneTop = await topOf(lone);
|
||||
const loneRow = await timelineRowOf(lone);
|
||||
await resetReactRenders(page);
|
||||
gate.releaseSecondRunning();
|
||||
await expect(group.getByTestId("tool-call-badge")).toHaveCount(2);
|
||||
await expect(group.getByText(FIRST_CALL_DETAILS)).toBeVisible();
|
||||
expect(await isInsideRow(group, loneRow)).toBe(true);
|
||||
expect(Math.abs((await topOf(group)) - loneTop)).toBeLessThanOrEqual(2);
|
||||
expect((await readReactRenders(page)).AgentStreamView).toBeGreaterThan(0);
|
||||
await expect(page.getByTestId("tool-call-group-sheet")).toHaveCount(0);
|
||||
});
|
||||
|
||||
await test.step("closing and reopening the group keeps the call open", async () => {
|
||||
await openToolDetails(group);
|
||||
await expect(group.getByTestId("tool-call-badge")).toHaveCount(0);
|
||||
await expect(details).toHaveCount(0);
|
||||
await openToolDetails(group);
|
||||
await expect(group.getByTestId("tool-call-badge")).toHaveCount(2);
|
||||
await expect(group.getByText(FIRST_CALL_DETAILS)).toBeVisible();
|
||||
});
|
||||
} finally {
|
||||
await agent.cleanup();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
test("forms a closed group when the lone tool call was left closed", async ({ page }) => {
|
||||
test.setTimeout(120_000);
|
||||
const agent = await createOverviewAgent(page, "Desktop overview tool calls");
|
||||
|
||||
const agent = await createOverviewAgent(page, "Closed desktop overview tool calls");
|
||||
try {
|
||||
const gate = await holdStreamAfterFirstCompletedToolCall(page, agent.agentId);
|
||||
const gate = await gateSecondToolCall(page, agent.agentId);
|
||||
await openOverviewAgent(page, agent);
|
||||
await agent.client.sendAgentMessage(agent.agentId, "Exercise desktop overview tool calls.");
|
||||
await agent.client.sendAgentMessage(agent.agentId, "Leave the first tool call closed.");
|
||||
await gate.waitForFirstCompleted();
|
||||
const lone = firstToolCall(page);
|
||||
const group = page.getByTestId("tool-call-group").first();
|
||||
await expect(lone).toBeVisible();
|
||||
await expect(group).toHaveCount(0);
|
||||
|
||||
await gate.waitForSecondRunning();
|
||||
const loneTop = await topOf(lone);
|
||||
gate.releaseSecondRunning();
|
||||
await expect(group).toBeVisible();
|
||||
|
||||
// Keep streaming layout changes out of the pointer-down/pointer-up interval.
|
||||
const header = group.getByRole("button").first();
|
||||
await header.click();
|
||||
await expect(group.getByTestId("tool-call-badge").first()).toBeVisible();
|
||||
await expect(page.getByTestId("tool-call-group-sheet")).toHaveCount(0);
|
||||
|
||||
gate.release(1);
|
||||
await expect.poll(() => group.getByTestId("tool-call-badge").count()).toBeGreaterThanOrEqual(2);
|
||||
await expect(page.getByTestId("tool-call-group-sheet")).toHaveCount(0);
|
||||
await expect(group.getByTestId("tool-call-badge")).toHaveCount(0);
|
||||
expect(Math.abs((await topOf(group)) - loneTop)).toBeLessThanOrEqual(2);
|
||||
} finally {
|
||||
await agent.cleanup();
|
||||
}
|
||||
|
||||
@@ -1,11 +1,9 @@
|
||||
import type { Locator, Page } from "@playwright/test";
|
||||
import type { Locator } from "@playwright/test";
|
||||
import { test, expect } from "../support/fixtures";
|
||||
import { daemonWsRoutePattern } from "../support/helpers/daemon-port";
|
||||
import { gateSecondToolCall } from "../support/helpers/tool-call-gate";
|
||||
import { expectComposerVisible } from "../support/helpers/composer";
|
||||
import { openAgentRoute, seedMockAgentWorkspace } from "../support/helpers/mock-agent";
|
||||
|
||||
type WebSocketMessage = string | Buffer;
|
||||
|
||||
interface ShimmerEvidence {
|
||||
animationDuration: string;
|
||||
endPx: number;
|
||||
@@ -14,127 +12,6 @@ interface ShimmerEvidence {
|
||||
startPx: number;
|
||||
}
|
||||
|
||||
function parseSessionMessage(message: WebSocketMessage): Record<string, unknown> | null {
|
||||
const raw = typeof message === "string" ? message : message.toString("utf8");
|
||||
try {
|
||||
const envelope = JSON.parse(raw) as { type?: unknown; message?: unknown };
|
||||
return envelope.type === "session" && envelope.message && typeof envelope.message === "object"
|
||||
? (envelope.message as Record<string, unknown>)
|
||||
: null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function getToolCallStatus(
|
||||
message: WebSocketMessage,
|
||||
agentId: string,
|
||||
): { callId: string; status: string } | null {
|
||||
const sessionMessage = parseSessionMessage(message);
|
||||
if (sessionMessage?.type !== "agent_stream") {
|
||||
return null;
|
||||
}
|
||||
const payload = sessionMessage.payload as Record<string, unknown> | undefined;
|
||||
if (payload?.agentId !== agentId) {
|
||||
return null;
|
||||
}
|
||||
const event = payload.event as Record<string, unknown> | undefined;
|
||||
const item = event?.item as Record<string, unknown> | undefined;
|
||||
return event?.type === "timeline" &&
|
||||
item?.type === "tool_call" &&
|
||||
typeof item.callId === "string" &&
|
||||
typeof item.status === "string"
|
||||
? { callId: item.callId, status: item.status }
|
||||
: null;
|
||||
}
|
||||
|
||||
function replaceToolCallStatus(message: WebSocketMessage, status: string): string {
|
||||
const raw = typeof message === "string" ? message : message.toString("utf8");
|
||||
const envelope = JSON.parse(raw) as {
|
||||
message?: { payload?: { event?: { item?: { status?: string } } } };
|
||||
};
|
||||
const item = envelope.message?.payload?.event?.item;
|
||||
if (!item) {
|
||||
throw new Error("Expected a tool-call session message");
|
||||
}
|
||||
item.status = status;
|
||||
return JSON.stringify(envelope);
|
||||
}
|
||||
|
||||
async function gateSecondToolCall(page: Page, agentId: string) {
|
||||
let firstCallId: string | null = null;
|
||||
let secondCallId: string | null = null;
|
||||
let secondRunningMessage: WebSocketMessage | null = null;
|
||||
let pauseAfterSecondRunning = false;
|
||||
let releaseSecondRequested = false;
|
||||
let forwardSecondRunning: (() => void) | null = null;
|
||||
let resolveFirstCompleted!: () => void;
|
||||
let resolveSecondRunning!: () => void;
|
||||
const firstCompleted = new Promise<void>((resolve) => {
|
||||
resolveFirstCompleted = resolve;
|
||||
});
|
||||
const secondRunning = new Promise<void>((resolve) => {
|
||||
resolveSecondRunning = resolve;
|
||||
});
|
||||
|
||||
await page.routeWebSocket(daemonWsRoutePattern(), (ws) => {
|
||||
const server = ws.connectToServer();
|
||||
forwardSecondRunning = () => {
|
||||
if (secondRunningMessage) {
|
||||
ws.send(secondRunningMessage);
|
||||
secondRunningMessage = null;
|
||||
}
|
||||
};
|
||||
ws.onMessage((message) => server.send(message));
|
||||
server.onMessage((message) => {
|
||||
if (pauseAfterSecondRunning) {
|
||||
return;
|
||||
}
|
||||
|
||||
const toolCall = getToolCallStatus(message, agentId);
|
||||
if (!toolCall) {
|
||||
ws.send(message);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!firstCallId) {
|
||||
firstCallId = toolCall.callId;
|
||||
}
|
||||
if (toolCall.callId === firstCallId) {
|
||||
ws.send(message);
|
||||
if (toolCall.status === "completed") {
|
||||
resolveFirstCompleted();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
secondCallId ??= toolCall.callId;
|
||||
if (toolCall.callId === secondCallId) {
|
||||
const transformedMessage =
|
||||
toolCall.status === "completed" ? replaceToolCallStatus(message, "running") : message;
|
||||
secondRunningMessage = transformedMessage;
|
||||
pauseAfterSecondRunning = true;
|
||||
resolveSecondRunning();
|
||||
if (releaseSecondRequested) {
|
||||
forwardSecondRunning?.();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
ws.send(message);
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
waitForFirstCompleted: () => firstCompleted,
|
||||
waitForSecondRunning: () => secondRunning,
|
||||
releaseSecondRunning() {
|
||||
releaseSecondRequested = true;
|
||||
forwardSecondRunning?.();
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
async function readShimmerEvidence(locator: Locator): Promise<ShimmerEvidence> {
|
||||
return locator.evaluate((root) => {
|
||||
const shimmer = Array.from(root.querySelectorAll<HTMLElement>("*")).find((element) =>
|
||||
|
||||
@@ -203,6 +203,47 @@ test("received messages show their sender and open that agent", async ({ page })
|
||||
}
|
||||
});
|
||||
|
||||
test("long sender attribution stays on one line in compact chat", async ({ page }, testInfo) => {
|
||||
await page.setViewportSize({ width: 390, height: 844 });
|
||||
await page.addInitScript(() =>
|
||||
localStorage.setItem("@paseo:app-settings", JSON.stringify({ theme: "dark" })),
|
||||
);
|
||||
const recipient = await seedMockAgentWorkspace({
|
||||
repoPrefix: "compact-attribution-",
|
||||
title: "Implementation",
|
||||
});
|
||||
try {
|
||||
const title = "Reviewer checking the compact chat timeline and sender attribution";
|
||||
const sender = await recipient.client.createAgent({
|
||||
provider: "codex",
|
||||
cwd: recipient.cwd,
|
||||
workspaceId: recipient.workspaceId,
|
||||
title,
|
||||
model: "gpt-6.1-sol",
|
||||
modeId: "full-access",
|
||||
});
|
||||
await recipient.client.sendAgentMessage(
|
||||
recipient.agentId,
|
||||
"The sender label stays on one line, even when the agent has a long name.",
|
||||
{ sourceAgentId: sender.id },
|
||||
);
|
||||
await openAgentRoute(page, recipient);
|
||||
await expectComposerVisible(page);
|
||||
const attribution = page.getByRole("button", { name: `Sent by ${title}`, exact: true });
|
||||
await expect(attribution).toBeVisible();
|
||||
await expectSenderTruncatedWithinMessage(attribution, title);
|
||||
await expectSenderAlignedWithBubble(attribution);
|
||||
await attribution.scrollIntoViewIfNeeded();
|
||||
await page.screenshot({ path: testInfo.outputPath("sender-compact-390.png") });
|
||||
await page.setViewportSize({ width: 320, height: 740 });
|
||||
await expectSenderTruncatedWithinMessage(attribution, title);
|
||||
await expectSenderAlignedWithBubble(attribution);
|
||||
await page.screenshot({ path: testInfo.outputPath("sender-compact-320.png") });
|
||||
} finally {
|
||||
await recipient.cleanup();
|
||||
}
|
||||
});
|
||||
|
||||
interface MessagePreviewWatch {
|
||||
/** Frames after the watch started on which the fade or "Show more" control was missing. */
|
||||
framesWithoutClip: number[];
|
||||
@@ -316,6 +357,20 @@ test("opening a turn keeps the received message above it clipped on every frame"
|
||||
}
|
||||
});
|
||||
|
||||
async function expectSenderTruncatedWithinMessage(attribution: Locator, title: string) {
|
||||
const label = attribution.getByText(`Sent by ${title}`, { exact: true });
|
||||
await expect(label).toHaveCSS("white-space", "nowrap");
|
||||
await expect(label).toHaveCSS("text-overflow", "ellipsis");
|
||||
const bounds = await label.evaluate((element) => ({
|
||||
textWidth: element.scrollWidth,
|
||||
visibleWidth: element.clientWidth,
|
||||
right: element.getBoundingClientRect().right,
|
||||
viewportWidth: document.documentElement.clientWidth,
|
||||
}));
|
||||
expect(bounds.textWidth).toBeGreaterThan(bounds.visibleWidth);
|
||||
expect(bounds.right).toBeLessThanOrEqual(bounds.viewportWidth);
|
||||
}
|
||||
|
||||
async function expectSenderAlignedWithBubble(attribution: Locator) {
|
||||
const edges = await attribution.evaluate((button) => {
|
||||
const bubble = button.nextElementSibling;
|
||||
|
||||
@@ -0,0 +1,35 @@
|
||||
# Native daemon-outdated notice
|
||||
|
||||
The flow needs the development app connected to an isolated daemon older than the app. Install a published daemon that predates `terminalsSurviveRestart`, start it in its own home, and bundle the app against it. `<checkout>` is the root of this repository; `<port>`, `<metro-port>` and `<udid>` are a free daemon port, a free Metro port and the booted simulator.
|
||||
|
||||
Run this once, in any directory. It installs into `/tmp/old-daemon`, not globally:
|
||||
|
||||
```sh
|
||||
npm install --prefix /tmp/old-daemon --no-package-lock @getpaseo/server@0.8.0
|
||||
```
|
||||
|
||||
Terminal 1, the old daemon. It runs in the foreground; keep it running:
|
||||
|
||||
```sh
|
||||
cd /tmp/old-daemon/node_modules/@getpaseo/server
|
||||
PASEO_HOME=/tmp/old-daemon-home PASEO_LISTEN=0.0.0.0:<port> PASEO_RELAY_ENABLED=0 node dist/scripts/supervisor-entrypoint.js
|
||||
```
|
||||
|
||||
Terminal 2, Metro. It runs in the foreground; keep it running:
|
||||
|
||||
```sh
|
||||
cd <checkout>/packages/app
|
||||
APP_VARIANT=development EXPO_PUBLIC_LOCAL_DAEMON=localhost:<port> npx expo start --port <metro-port> --clear
|
||||
```
|
||||
|
||||
Terminal 3, the flow, while terminals 1 and 2 are still running:
|
||||
|
||||
```sh
|
||||
cd <checkout>
|
||||
xcrun simctl openurl <udid> "paseo://expo-development-client/?url=http%3A%2F%2F127.0.0.1%3A<metro-port>"
|
||||
maestro --udid <udid> test packages/app/e2e/mobile/agent-device/native-daemon-outdated-notice.ios.yaml --env DAEMON_VERSION=0.8.0
|
||||
```
|
||||
|
||||
Start with the sidebar closed. The flow opens it, then asserts the notice, its daemon version, the terminals line for a daemon without `terminalsSurviveRestart`, and an enabled Update button. Do not tap Update: on 0.8.0 it runs a global `npm install -g @getpaseo/cli@latest`.
|
||||
|
||||
When you are done, stop terminals 1 and 2 and remove `/tmp/old-daemon` and `/tmp/old-daemon-home`.
|
||||
@@ -0,0 +1,26 @@
|
||||
appId: sh.paseo.debug
|
||||
---
|
||||
# The app must be connected to a daemon older than the app that predates
|
||||
# terminalsSurviveRestart (0.8.0). See native-daemon-outdated-notice-preconditions.md.
|
||||
- launchApp
|
||||
- runFlow:
|
||||
when:
|
||||
visible: ".*getRegistrationInfoAsync.*"
|
||||
commands:
|
||||
- tapOn: ".*getRegistrationInfoAsync.*"
|
||||
- tapOn: Dismiss
|
||||
- extendedWaitUntil:
|
||||
visible: "Open menu"
|
||||
timeout: 60000
|
||||
- tapOn: "Open menu"
|
||||
- extendedWaitUntil:
|
||||
visible:
|
||||
id: daemon-outdated-callout
|
||||
timeout: 30000
|
||||
- assertVisible: "Daemon out of date"
|
||||
- assertVisible: ".*daemon v${DAEMON_VERSION}.*"
|
||||
- assertVisible: "Updating restarts the daemon and closes open terminals."
|
||||
- assertVisible:
|
||||
id: daemon-outdated-callout-update
|
||||
enabled: true
|
||||
- takeScreenshot: native-daemon-outdated-notice
|
||||
@@ -0,0 +1,14 @@
|
||||
# Native user message preview
|
||||
|
||||
Open a chat with a user message containing 16 newline-separated lines of
|
||||
`Preview line N`, with N from 1 to 16. Scroll the message into view on a
|
||||
phone-sized Android emulator or iOS simulator. Its text must exceed the 240-point preview cap,
|
||||
while its expanded bubble and toggle fit in the chat viewport. Close any other
|
||||
expanded messages so the toggle labels identify this message.
|
||||
|
||||
Replay `native-user-message-preview.android.ad` or
|
||||
`native-user-message-preview.ios.ad` through the existing mobile runner or
|
||||
agent-device. It checks that a clipped message offers Show more and
|
||||
that two expand/collapse round trips keep both controls reachable. Before the
|
||||
fix, the first Show more assertion fails because native layout reports the
|
||||
capped height as the full content height.
|
||||
@@ -0,0 +1,14 @@
|
||||
context platform=android timeout=60000 retries=0
|
||||
env APP_ID=sh.paseo.debug
|
||||
|
||||
open "${APP_ID}"
|
||||
wait "role=\"button\" label=\"Show more\"" 10000
|
||||
press "role=\"button\" label=\"Show more\""
|
||||
wait "role=\"button\" label=\"Show less\"" 10000
|
||||
press "role=\"button\" label=\"Show less\""
|
||||
wait "role=\"button\" label=\"Show more\"" 10000
|
||||
press "role=\"button\" label=\"Show more\""
|
||||
wait "role=\"button\" label=\"Show less\"" 10000
|
||||
press "role=\"button\" label=\"Show less\""
|
||||
wait "role=\"button\" label=\"Show more\"" 10000
|
||||
close
|
||||
@@ -0,0 +1,14 @@
|
||||
context platform=ios timeout=60000 retries=0
|
||||
env APP_ID=sh.paseo.debug
|
||||
|
||||
open "${APP_ID}"
|
||||
wait "role=\"button\" label=\"Show more\"" 10000
|
||||
press "role=\"button\" label=\"Show more\""
|
||||
wait "role=\"button\" label=\"Show less\"" 10000
|
||||
press "role=\"button\" label=\"Show less\""
|
||||
wait "role=\"button\" label=\"Show more\"" 10000
|
||||
press "role=\"button\" label=\"Show more\""
|
||||
wait "role=\"button\" label=\"Show less\"" 10000
|
||||
press "role=\"button\" label=\"Show less\""
|
||||
wait "role=\"button\" label=\"Show more\"" 10000
|
||||
close
|
||||
@@ -12,6 +12,22 @@ point and Metro workflow in [status-ring](../status-ring/README.md), importing
|
||||
`MarkdownFormattingRegression` from `./e2e/mobile/markdown-formatting/native`.
|
||||
Open the same Metro URL in a browser to compare web. Restore `index.ts` afterward.
|
||||
|
||||
With this fixture open in an Android Agent Device session, run:
|
||||
|
||||
```sh
|
||||
node packages/app/e2e/mobile/markdown-formatting/android.mjs <session>
|
||||
```
|
||||
|
||||
The runner switches to paragraphs with long inline code at a fixed 300 dp width.
|
||||
It compares the native Markdown host’s bottom with its last TextView’s bottom,
|
||||
then repeats in compact mode and after restoring regular text. More than one
|
||||
pixel of surplus fails. Keep the whole fixture visible: clipped accessibility
|
||||
bounds cannot establish measurement parity.
|
||||
|
||||
`scripts/postinstall-patches.test.mjs` regenerates both platforms’ props and
|
||||
compares them with the shipped headers. This catches missing C++ fields in the
|
||||
measurement path, which the Kotlin tests cannot exercise.
|
||||
|
||||
The package patch contains `InlineCodeFormattingTest`, which exercises actual
|
||||
Android spans in Robolectric native graphics mode, covering draw and measurement,
|
||||
span order, code inside paragraph/heading sizes, bold/italic composition, and
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
import assert from "node:assert/strict";
|
||||
import { execFileSync } from "node:child_process";
|
||||
|
||||
const session = process.argv[2];
|
||||
assert(session, "Pass an Android agent-device session serving native.tsx");
|
||||
function ad(...args) {
|
||||
return execFileSync("agent-device", ["--session", session, ...args], {
|
||||
encoding: "utf8",
|
||||
timeout: 60_000,
|
||||
});
|
||||
}
|
||||
|
||||
function assertMeasurementParity(mode) {
|
||||
const snapshot = JSON.parse(ad("snapshot", "--raw", "--json"));
|
||||
assert.equal(snapshot.success, true);
|
||||
const nodes = snapshot.data.nodes;
|
||||
let last = nodes.find((node) => node.label?.endsWith("End of measurement fixture."));
|
||||
assert(last?.rect, "The last paragraph must be visible, including its bottom");
|
||||
// EnrichedMarkdownText exposes paragraph accessibility nodes inside its TextView;
|
||||
// EnrichedMarkdown exposes the TextViews themselves. Measure the native child.
|
||||
let host = nodes.find((node) => node.index === last.parentIndex);
|
||||
if (host?.type === "android.widget.TextView") {
|
||||
last = host;
|
||||
host = nodes.find((node) => node.index === last.parentIndex);
|
||||
}
|
||||
assert.equal(host?.type, "android.widget.FrameLayout");
|
||||
const viewport = nodes.find((node) => node.type === "android.widget.ScrollView");
|
||||
const footer = nodes.find((node) => node.label === "End of Markdown host");
|
||||
assert(viewport?.rect && footer?.rect, "The fixture and footer must be visible");
|
||||
assert(
|
||||
host.rect.y >= viewport.rect.y &&
|
||||
footer.rect.y + footer.rect.height <= viewport.rect.y + viewport.rect.height,
|
||||
"The whole fixture must fit in the viewport; clipped bounds cannot prove parity",
|
||||
);
|
||||
const hostBottom = host.rect.y + host.rect.height;
|
||||
const childBottom = last.rect.y + last.rect.height;
|
||||
console.log(
|
||||
JSON.stringify({
|
||||
mode,
|
||||
host: host.rect,
|
||||
lastChild: last.rect,
|
||||
surplus: hostBottom - childBottom,
|
||||
}),
|
||||
);
|
||||
assert(
|
||||
Math.abs(hostBottom - childBottom) <= 1,
|
||||
`Markdown reserves blank space in ${mode}: host bottom ${hostBottom}, last child bottom ${childBottom}`,
|
||||
);
|
||||
}
|
||||
|
||||
ad("press", 'label="Show wrapping fixture"');
|
||||
ad("wait", "text", "End of Markdown host", "10000");
|
||||
assertMeasurementParity("regular");
|
||||
ad("press", 'label="Use compact text"');
|
||||
ad("wait", "text", "Use regular text", "10000");
|
||||
assertMeasurementParity("compact");
|
||||
ad("press", 'label="Use regular text"');
|
||||
ad("wait", "text", "Use compact text", "10000");
|
||||
assertMeasurementParity("regular restored");
|
||||
console.log("PASS Android Markdown host measurement matches its last child");
|
||||
@@ -1,6 +1,6 @@
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import { useCallback, useState } from "react";
|
||||
import { Button, ScrollView, Text } from "react-native";
|
||||
import { Button, ScrollView, Text, View } from "react-native";
|
||||
import { StyleSheet } from "react-native-unistyles";
|
||||
import { GestureHandlerRootView } from "react-native-gesture-handler";
|
||||
import { MarkdownRenderer } from "@/components/markdown/renderer";
|
||||
@@ -10,6 +10,7 @@ const styles = StyleSheet.create((theme) => ({
|
||||
scroll: { backgroundColor: theme.colors.surface0 },
|
||||
content: { padding: 32, paddingTop: 60 },
|
||||
title: { color: theme.colors.foreground },
|
||||
wrapping: { width: 300 },
|
||||
}));
|
||||
|
||||
const queryClient = new QueryClient();
|
||||
@@ -32,7 +33,15 @@ const source = [
|
||||
"Normal **bold** and *italic* prose.",
|
||||
].join("\n\n");
|
||||
|
||||
const wrappingSource = [
|
||||
"Measurement parity. Take a repo with a gitignored `.env` in the main checkout and a `.worktreeinclude` containing `.env`.",
|
||||
"Every creation path goes through `createPaseoWorktreeWorkflow` in `worktree-session.ts:341`, before `createAgent` in `creation/index.ts:160-174` starts.",
|
||||
"The built-in plugin lives in `plugins/worktree-include/index.server.ts` and copies `paseo.json` beside `.worktreeinclude`. End of measurement fixture.",
|
||||
].join("\n\n");
|
||||
|
||||
export default function MarkdownFormattingRegression() {
|
||||
const [wrapping, setWrapping] = useState(false);
|
||||
const toggleWrapping = useCallback(() => setWrapping((value) => !value), []);
|
||||
const [compact, setCompact] = useState(false);
|
||||
const toggleCompact = useCallback(() => setCompact((value) => !value), []);
|
||||
return (
|
||||
@@ -44,7 +53,14 @@ export default function MarkdownFormattingRegression() {
|
||||
title={compact ? "Use regular text" : "Use compact text"}
|
||||
onPress={toggleCompact}
|
||||
/>
|
||||
<MarkdownRenderer text={source} compact={compact} />
|
||||
<Button
|
||||
title={wrapping ? "Show formatting fixture" : "Show wrapping fixture"}
|
||||
onPress={toggleWrapping}
|
||||
/>
|
||||
<View style={wrapping ? styles.wrapping : undefined}>
|
||||
<MarkdownRenderer text={wrapping ? wrappingSource : source} compact={compact} />
|
||||
</View>
|
||||
<Text style={styles.title}>End of Markdown host</Text>
|
||||
</ScrollView>
|
||||
</GestureHandlerRootView>
|
||||
</QueryClientProvider>
|
||||
|
||||
@@ -1,42 +0,0 @@
|
||||
# Native turn reading-position diagnostic
|
||||
|
||||
Reproduction for [#8057](https://github.com/getpaseo/paseo/issues/8057).
|
||||
This uses the production turn presentation and native stream strategy with fixed-height
|
||||
message rows. It isolates viewport behavior; it does not exercise a provider, the full
|
||||
conversation screen, iOS, or the precise automatic-collapse reading-row report.
|
||||
|
||||
Build the Android development client from this checkout. In a disposable checkout,
|
||||
temporarily replace `packages/app/index.ts` with:
|
||||
|
||||
```tsx
|
||||
import "./src/polyfills/install-early";
|
||||
import "./src/styles/unistyles";
|
||||
import { registerRootComponent } from "expo";
|
||||
import Diagnostic from "./e2e/mobile/turn-scroll/native";
|
||||
registerRootComponent(Diagnostic);
|
||||
```
|
||||
|
||||
Start Metro from `packages/app` on an available port:
|
||||
|
||||
```sh
|
||||
APP_VARIANT=development npx expo start --lan --port 8097
|
||||
```
|
||||
|
||||
With an Android emulator running, forward that port with `adb reverse tcp:8097 tcp:8097`.
|
||||
From the repository root, run:
|
||||
|
||||
```sh
|
||||
node packages/app/e2e/mobile/turn-scroll/android.mjs turn-scroll http://127.0.0.1:8097
|
||||
```
|
||||
|
||||
The test expands the middle summary, brings it back into view, collapses it, and
|
||||
asserts its native window Y stays within two points. Baseline fails with approximately
|
||||
`expand=-450.3, collapse=450.3`. Measurements use `measureInWindow`, not accessibility
|
||||
bounds of off-screen rows.
|
||||
|
||||
The separate buttons expose the latest turn's running-to-finished projection with a
|
||||
five-second delay. They measure its summary before and after completion, rather than
|
||||
claiming to follow a disappearing reading row.
|
||||
|
||||
Restore `index.ts`, close the device session, stop Metro, and stop the emulator after use.
|
||||
This is an intentionally failing diagnostic, not a production fix or a CI unit test.
|
||||
@@ -1,40 +0,0 @@
|
||||
import assert from "node:assert/strict";
|
||||
import { execFileSync } from "node:child_process";
|
||||
|
||||
const [, , session, metroUrl] = process.argv;
|
||||
assert(session && metroUrl, "Pass a session name and the Metro URL serving native.tsx");
|
||||
function ad(...args) {
|
||||
return execFileSync("agent-device", [...args, "--session", session], {
|
||||
encoding: "utf8",
|
||||
timeout: 60_000,
|
||||
});
|
||||
}
|
||||
ad(
|
||||
"open",
|
||||
"sh.paseo.debug",
|
||||
`exp+voice-mobile://expo-development-client/?url=${encodeURIComponent(metroUrl)}`,
|
||||
"--platform",
|
||||
"android",
|
||||
"--relaunch",
|
||||
);
|
||||
ad("wait", "text", "Ready");
|
||||
ad("press", 'id="host-7"', "--settle");
|
||||
ad("wait", "text", "expand host-7: before=");
|
||||
const expansion = ad("get", "text", 'id="result"');
|
||||
console.log(expansion.trim());
|
||||
const expandedDelta = Number(/delta=([\d.-]+)/.exec(expansion)?.[1]);
|
||||
ad("scroll", "up", "--until", 'id="host-7"');
|
||||
ad("wait", "stable", "1000", "10000");
|
||||
ad("press", 'id="host-7"', "--settle");
|
||||
ad("wait", "text", "collapse host-7: before=");
|
||||
const collapse = ad("get", "text", 'id="result"');
|
||||
console.log(collapse.trim());
|
||||
const collapsedDelta = Number(/delta=([\d.-]+)/.exec(collapse)?.[1]);
|
||||
assert(
|
||||
Number.isFinite(expandedDelta) && Number.isFinite(collapsedDelta),
|
||||
"Both native measurements must complete",
|
||||
);
|
||||
assert(
|
||||
Math.abs(expandedDelta) <= 2 && Math.abs(collapsedDelta) <= 2,
|
||||
`The summary must stay under the reader: expand=${expandedDelta}, collapse=${collapsedDelta}`,
|
||||
);
|
||||
@@ -1,197 +0,0 @@
|
||||
import { useCallback, useMemo, useRef, useState } from "react";
|
||||
import { Button, Pressable, Text, View, type ViewStyle } from "react-native";
|
||||
import { SafeAreaProvider } from "react-native-safe-area-context";
|
||||
import { KeyboardProvider } from "react-native-keyboard-controller";
|
||||
import { KeyboardShiftProvider } from "@/keyboard/shift";
|
||||
import { createNativeStreamStrategy } from "@/agent-stream/strategy-native";
|
||||
import { createStreamPresentation } from "@/agent-stream/presentation";
|
||||
import type { StreamViewportHandle } from "@/agent-stream/strategy";
|
||||
import type { StreamItem } from "@/types/stream";
|
||||
|
||||
const frameStyle: ViewStyle = { flex: 1, paddingTop: 45, paddingBottom: 30 };
|
||||
const listStyle: ViewStyle = { flex: 1 };
|
||||
const resultStyle = { color: "#111", height: 50 };
|
||||
const textStyle = { color: "#111", padding: 8 };
|
||||
const rowStyles: ViewStyle[] = [false, true].flatMap((work) =>
|
||||
[false, true].map((host) => ({
|
||||
height: work ? 90 : 60,
|
||||
borderBottomWidth: 1,
|
||||
borderColor: "#bbb",
|
||||
backgroundColor: host ? "#ccddff" : "#fff",
|
||||
justifyContent: "center",
|
||||
})),
|
||||
);
|
||||
function Row({
|
||||
item,
|
||||
expanded,
|
||||
isHost,
|
||||
attach,
|
||||
toggle,
|
||||
}: {
|
||||
item: StreamItem;
|
||||
expanded: boolean;
|
||||
isHost: boolean;
|
||||
attach(id: string, view: View | null): void;
|
||||
toggle(id: string): void;
|
||||
}) {
|
||||
const ref = useCallback((view: View | null) => attach(item.id, view), [attach, item.id]);
|
||||
const onPress = useCallback(() => toggle(item.id), [toggle, item.id]);
|
||||
const style = rowStyles[(item.id.startsWith("work") ? 2 : 0) + (isHost ? 1 : 0)];
|
||||
const stateLabel = expanded ? " Collapse" : " Expand";
|
||||
return (
|
||||
<View ref={ref} collapsable={false} style={style}>
|
||||
<Pressable testID={item.id} onPress={onPress}>
|
||||
<Text style={textStyle}>
|
||||
{item.id}
|
||||
{isHost ? stateLabel : ""}
|
||||
</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
function measureY(view: View | undefined): Promise<number> {
|
||||
if (!view) return Promise.reject(new Error("Diagnostic row is not mounted"));
|
||||
return new Promise((resolve) => view.measureInWindow((_x, y) => resolve(y)));
|
||||
}
|
||||
function settleLayout(): Promise<void> {
|
||||
return new Promise((resolve) => setTimeout(resolve, 1500));
|
||||
}
|
||||
const strategy = createNativeStreamStrategy();
|
||||
const tail: StreamItem[] = Array.from({ length: 10 }, (_, n) => {
|
||||
const turnId = `turn-${n}`;
|
||||
const timestamp = new Date(2026, 0, 1, 0, n);
|
||||
return [
|
||||
{ kind: "user_message" as const, id: `host-${n}`, turnId, timestamp, text: `Prompt ${n}` },
|
||||
...Array.from({ length: 5 }, (_work, i) => ({
|
||||
kind: "assistant_message" as const,
|
||||
id: `work-${n}-${i}`,
|
||||
turnId,
|
||||
timestamp,
|
||||
text: `Work ${n}-${i}`,
|
||||
})),
|
||||
{ kind: "assistant_message" as const, id: `reply-${n}`, turnId, timestamp, text: `Reply ${n}` },
|
||||
];
|
||||
}).flat();
|
||||
|
||||
function Transcript() {
|
||||
const present = useMemo(createStreamPresentation, []);
|
||||
const viewportRef = useRef<StreamViewportHandle | null>(null);
|
||||
const [expanded, setExpanded] = useState<ReadonlySet<string>>(new Set());
|
||||
const [running, setRunning] = useState(false);
|
||||
const [report, setReport] = useState("Ready");
|
||||
const rows = useRef(new Map<string, View>());
|
||||
const presentation = present({
|
||||
tail,
|
||||
head: [],
|
||||
transform: undefined,
|
||||
display: "collapseTurns",
|
||||
expandedTurnHostIds: expanded,
|
||||
isTurnActive: running,
|
||||
activeTurnId: running ? "turn-9" : null,
|
||||
});
|
||||
const historyMounted = strategy.orderTail(presentation.tail);
|
||||
const sample = useCallback(async (id: string, next: () => void, label = "complete") => {
|
||||
const before = await measureY(rows.current.get(id));
|
||||
next();
|
||||
await settleLayout();
|
||||
const after = await measureY(rows.current.get(id));
|
||||
setReport(
|
||||
`${label} ${id}: before=${before.toFixed(1)} after=${after.toFixed(1)} delta=${(after - before).toFixed(1)}`,
|
||||
);
|
||||
}, []);
|
||||
const attach = useCallback((id: string, view: View | null) => {
|
||||
if (view) rows.current.set(id, view);
|
||||
else rows.current.delete(id);
|
||||
}, []);
|
||||
const toggle = useCallback(
|
||||
(id: string) => {
|
||||
const turn = presentation.turns.turnsByHostId.get(id);
|
||||
if (!turn) return;
|
||||
sample(
|
||||
id,
|
||||
() => {
|
||||
viewportRef.current?.holdReadingPosition();
|
||||
setExpanded((previous) => {
|
||||
const next = new Set(previous);
|
||||
if (next.has(id)) next.delete(id);
|
||||
else next.add(id);
|
||||
return next;
|
||||
});
|
||||
},
|
||||
turn.expanded ? "collapse" : "expand",
|
||||
);
|
||||
},
|
||||
[presentation.turns.turnsByHostId, sample],
|
||||
);
|
||||
const renderRow = (item: StreamItem) => {
|
||||
const turn = presentation.turns.turnsByHostId.get(item.id);
|
||||
return (
|
||||
<Row
|
||||
item={item}
|
||||
isHost={!!turn}
|
||||
expanded={!!turn?.expanded}
|
||||
attach={attach}
|
||||
toggle={toggle}
|
||||
/>
|
||||
);
|
||||
};
|
||||
const start = useCallback(() => setRunning(true), []);
|
||||
const finish = useCallback(
|
||||
() => setTimeout(() => sample("host-9", () => setRunning(false)), 5000),
|
||||
[sample],
|
||||
);
|
||||
return (
|
||||
<View style={frameStyle}>
|
||||
<Text testID="result" style={resultStyle}>
|
||||
{report}
|
||||
</Text>
|
||||
<Button title="Start running turn" onPress={start} />
|
||||
<Button title="Finish in 5 seconds" onPress={finish} />
|
||||
<View style={listStyle}>
|
||||
{strategy.render({
|
||||
agentId: "diagnostic",
|
||||
segments: { historyVirtualized: [], historyMounted, liveHead: [] },
|
||||
liveHeadRowRevision: expanded,
|
||||
historyRowRevision: {
|
||||
contentById: new Set(),
|
||||
displayStateById: new Set([...expanded, ...presentation.turns.turnsByHostId.keys()]),
|
||||
globalDisplayState: running,
|
||||
},
|
||||
readingRowReplacements: presentation.readingRowReplacements,
|
||||
boundary: { hasVirtualizedHistory: false, hasMountedHistory: true, hasLiveHead: false },
|
||||
renderers: {
|
||||
renderHistoryVirtualizedRow: renderRow,
|
||||
renderHistoryMountedRow: renderRow,
|
||||
renderLiveHeadRow: renderRow,
|
||||
renderLiveAuxiliary: () => null,
|
||||
},
|
||||
listEmptyComponent: null,
|
||||
viewportRef,
|
||||
routeBottomAnchorRequest: null,
|
||||
isAuthoritativeHistoryReady: true,
|
||||
onNearBottomChange: () => {},
|
||||
onNearHistoryStart: () => false,
|
||||
isLoadingOlderHistory: false,
|
||||
hasOlderHistory: false,
|
||||
olderHistoryProgressKey: null,
|
||||
scrollEnabled: true,
|
||||
listStyle: { flex: 1 },
|
||||
baseListContentContainerStyle: {},
|
||||
forwardListContentContainerStyle: {},
|
||||
contentMaxWidth: 400,
|
||||
})}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
export default function Diagnostic() {
|
||||
return (
|
||||
<SafeAreaProvider>
|
||||
<KeyboardProvider>
|
||||
<KeyboardShiftProvider>
|
||||
<Transcript />
|
||||
</KeyboardShiftProvider>
|
||||
</KeyboardProvider>
|
||||
</SafeAreaProvider>
|
||||
);
|
||||
}
|
||||
@@ -1,3 +1,7 @@
|
||||
import { execFile, spawn } from "node:child_process";
|
||||
import { writeFile } from "node:fs/promises";
|
||||
import path from "node:path";
|
||||
import { promisify } from "node:util";
|
||||
import { expect, type Page } from "@playwright/test";
|
||||
import type { DaemonClient } from "@getpaseo/client/internal/daemon-client";
|
||||
import { connectDaemonClient } from "./daemon-client-loader";
|
||||
@@ -15,14 +19,27 @@ export async function openDaemonOverview(page: Page, daemon: IsolatedHostDaemon)
|
||||
await openHostSection(page, daemon.serverId, "host");
|
||||
}
|
||||
|
||||
export async function restartDaemonInSettings(page: Page) {
|
||||
const button = page.getByRole("button", { name: "Restart", exact: true });
|
||||
export async function restartDaemonInSettings(
|
||||
page: Page,
|
||||
options: { closeTerminals?: boolean } = {},
|
||||
) {
|
||||
const button = page.getByRole("button", {
|
||||
name: options.closeTerminals ? "Restart and close terminals" : "Restart",
|
||||
exact: true,
|
||||
});
|
||||
await expect(button).toBeEnabled();
|
||||
page.once("dialog", (dialog) => dialog.accept());
|
||||
await button.click();
|
||||
await expect(page.getByRole("button", { name: "Restarting...", exact: true })).toBeDisabled();
|
||||
}
|
||||
|
||||
export async function expectDaemonRestartFailed(page: Page, text: string) {
|
||||
const error = page.getByTestId("host-page-restart-error");
|
||||
await expect(error).toBeVisible({ timeout: 30_000 });
|
||||
await expect(error).toContainText(text);
|
||||
await expect(page.getByRole("button", { name: "Restart", exact: true })).toBeEnabled();
|
||||
}
|
||||
|
||||
export async function expectDaemonRestartComplete(page: Page) {
|
||||
await expect(page.getByRole("button", { name: "Restart", exact: true })).toBeEnabled({
|
||||
timeout: 30_000,
|
||||
@@ -40,3 +57,100 @@ export async function readWorkerPid(daemon: IsolatedHostDaemon): Promise<number>
|
||||
await client.close();
|
||||
}
|
||||
}
|
||||
|
||||
/** Opens a terminal on the isolated daemon that runs a long-lived program. */
|
||||
export async function openLongLivedTerminal(daemon: IsolatedHostDaemon): Promise<string> {
|
||||
const client = await connectDaemonClient<DaemonClient>({
|
||||
port: daemon.port,
|
||||
clientIdPrefix: "lifecycle-terminal",
|
||||
});
|
||||
try {
|
||||
const workspace = await client.createWorkspace({
|
||||
source: { kind: "directory", path: daemon.paseoHome },
|
||||
title: "lifecycle",
|
||||
});
|
||||
if (!workspace.workspace) throw new Error(workspace.error ?? "Workspace creation failed");
|
||||
const created = await client.createTerminal(daemon.paseoHome, "lifecycle", undefined, {
|
||||
workspaceId: workspace.workspace.id,
|
||||
command: process.execPath,
|
||||
args: ["-e", "setInterval(() => {}, 1e9)"],
|
||||
});
|
||||
if (!created.terminal) throw new Error(created.error ?? "Terminal creation failed");
|
||||
return created.terminal.id;
|
||||
} finally {
|
||||
await client.close();
|
||||
}
|
||||
}
|
||||
|
||||
export async function listTerminalIds(daemon: IsolatedHostDaemon): Promise<string[]> {
|
||||
const client = await connectDaemonClient<DaemonClient>({
|
||||
port: daemon.port,
|
||||
clientIdPrefix: "lifecycle-terminals",
|
||||
});
|
||||
try {
|
||||
return (await client.listTerminals()).terminals.map((terminal) => terminal.id);
|
||||
} finally {
|
||||
await client.close();
|
||||
}
|
||||
}
|
||||
|
||||
const execFileAsync = promisify(execFile);
|
||||
|
||||
async function psField(pid: number, field: "stat" | "lstart"): Promise<string> {
|
||||
const { stdout } = await execFileAsync("ps", ["-o", `${field}=`, "-p", String(pid)], {
|
||||
env: { ...process.env, LC_ALL: "C" },
|
||||
});
|
||||
return stdout.trim();
|
||||
}
|
||||
|
||||
export interface UnclosableTerminalProgram {
|
||||
pid: number;
|
||||
/** Ends the program's parent, which lets the system reap the program. */
|
||||
release(): void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Leaves in the daemon's home the record a dead terminal worker leaves, naming one terminal
|
||||
* program that SIGKILL cannot remove: a zombie whose parent (an exec'd `sleep`) never waits for
|
||||
* it. A kill cleanup can only report it as still running. POSIX only.
|
||||
*/
|
||||
export async function plantUnclosableTerminalProgram(
|
||||
daemon: IsolatedHostDaemon,
|
||||
): Promise<UnclosableTerminalProgram> {
|
||||
const parent = spawn("/bin/sh", ["-c", "sleep 0 & echo $!; exec sleep 600"], {
|
||||
stdio: ["ignore", "pipe", "ignore"],
|
||||
});
|
||||
parent.unref();
|
||||
const release = () => {
|
||||
if (parent.exitCode === null && parent.signalCode === null) parent.kill("SIGKILL");
|
||||
};
|
||||
try {
|
||||
const pid = await new Promise<number>((resolve) => {
|
||||
parent.stdout!.once("data", (chunk: Buffer) => resolve(Number(chunk.toString().trim())));
|
||||
});
|
||||
await expect.poll(async () => (await psField(pid, "stat")).startsWith("Z")).toBe(true);
|
||||
const gone = spawn(process.execPath, ["-e", ""], { stdio: "ignore" });
|
||||
await new Promise((resolve) => gone.once("exit", resolve));
|
||||
const record = {
|
||||
recordId: "planted-record",
|
||||
pid: gone.pid,
|
||||
bootId: null,
|
||||
createdAt: new Date().toISOString(),
|
||||
identity: { startedAt: "Thu Jan 1 00:00:00 1970", commandLine: "planted-worker" },
|
||||
protocolVersion: 1,
|
||||
paseoVersion: "0.0.0-test",
|
||||
socketPath: path.join(daemon.paseoHome, "planted-worker.sock"),
|
||||
secret: "planted-secret",
|
||||
terminals: [{ id: "planted-terminal", pid, startedAt: await psField(pid, "lstart") }],
|
||||
};
|
||||
await writeFile(
|
||||
path.join(daemon.paseoHome, "terminal-worker", `${gone.pid}.json`),
|
||||
`${JSON.stringify(record, null, 2)}\n`,
|
||||
{ mode: 0o600 },
|
||||
);
|
||||
return { pid, release };
|
||||
} catch (error) {
|
||||
release();
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,159 @@
|
||||
import { writeFile } from "node:fs/promises";
|
||||
import path from "node:path";
|
||||
import { settingsRpc } from "@getpaseo/plugin";
|
||||
import type { DaemonClient } from "@getpaseo/client/internal/daemon-client";
|
||||
import { z } from "zod";
|
||||
import { expect, type Page } from "../fixtures";
|
||||
import { gotoAppShell } from "./app";
|
||||
import { installDaemonWebSocketGate } from "./daemon-websocket-gate";
|
||||
import { connectDaemonClient } from "./daemon-client-loader";
|
||||
import { copyPluginExample, pluginRequirements } from "./plugin-fixture";
|
||||
|
||||
const PLUGIN_ID = "retained-plugin-e2e";
|
||||
|
||||
export function retainedPluginSource(version: string) {
|
||||
return `import { useState } from "react";
|
||||
import { Text, View, TextInput, Pressable } from "react-native";
|
||||
import { useSettings } from "@getpaseo/plugin/client";
|
||||
import { preferences } from "./shared/preferences";
|
||||
function Preferences({ color }) {
|
||||
const settings = useSettings(preferences);
|
||||
return <Text style={{ color }}>{settings.status === "ready" ? "Stored title: " + settings.values.title : "Preferences " + settings.status}</Text>;
|
||||
}
|
||||
function Surface({ theme }) {
|
||||
const [draft, setDraft] = useState("");
|
||||
const [clicks, setClicks] = useState(0);
|
||||
const [showPreferences, setShowPreferences] = useState(true);
|
||||
const color = theme.colors.foreground;
|
||||
return <View>
|
||||
<Text style={{ color }}>Plugin version ${version}</Text>
|
||||
<TextInput accessibilityLabel="Plugin draft" value={draft} onChangeText={setDraft} style={{ color }} />
|
||||
<Pressable accessibilityRole="button" onPress={() => setClicks(value => value + 1)}><Text style={{ color }}>{"Local clicks " + clicks}</Text></Pressable>
|
||||
<Pressable accessibilityRole="button" onPress={() => setShowPreferences(value => !value)}><Text style={{ color }}>{showPreferences ? "Hide preferences" : "Show preferences"}</Text></Pressable>
|
||||
{showPreferences ? <Preferences color={color} /> : null}
|
||||
</View>;
|
||||
}
|
||||
export default function contribute(plugin) {
|
||||
plugin.addSurface("main", Surface);
|
||||
plugin.addSidebarItem({ id: "main", title: "Reconnect probe", icon: "PanelsTopLeft", surface: "main" });
|
||||
return () => {};
|
||||
}`;
|
||||
}
|
||||
|
||||
export async function withRetainedPlugin(
|
||||
page: Page,
|
||||
run: (probe: Awaited<ReturnType<typeof createProbe>>) => Promise<void>,
|
||||
) {
|
||||
const probe = await createProbe(page);
|
||||
try {
|
||||
await run(probe);
|
||||
} finally {
|
||||
await probe.close();
|
||||
}
|
||||
}
|
||||
|
||||
async function createProbe(page: Page) {
|
||||
const example = await copyPluginExample("settings");
|
||||
const peer = await connectDaemonClient<DaemonClient>({ clientIdPrefix: "plugin-reconnect" });
|
||||
const previous = await peer.getDaemonConfig();
|
||||
const gate = await installDaemonWebSocketGate(page);
|
||||
const clientEntry = path.join(example.directory, "index.client.tsx");
|
||||
let catalogCount = 0;
|
||||
try {
|
||||
await writeFile(
|
||||
path.join(example.directory, "paseo-plugin.json"),
|
||||
JSON.stringify({ id: PLUGIN_ID, requirements: pluginRequirements }),
|
||||
);
|
||||
await writeFile(clientEntry, retainedPluginSource("one"));
|
||||
await peer.patchDaemonConfig({ pluginsEnabled: true });
|
||||
await peer.installDirectoryPlugin(example.directory);
|
||||
} catch (error) {
|
||||
await peer.close();
|
||||
await example.cleanup();
|
||||
throw error;
|
||||
}
|
||||
return {
|
||||
async open() {
|
||||
await page.setViewportSize({ width: 1100, height: 800 });
|
||||
await gotoAppShell(page);
|
||||
await page.getByRole("button", { name: "Reconnect probe", exact: true }).click();
|
||||
await expect(page.getByText("Stored title: Agent monitor", { exact: true })).toBeVisible();
|
||||
},
|
||||
async disconnect() {
|
||||
catalogCount = gate.getClientRequestCount("plugin.catalog.get.request");
|
||||
await gate.drop();
|
||||
await gate.waitForBlockedConnection();
|
||||
},
|
||||
async reconnect() {
|
||||
gate.restore();
|
||||
await gate.waitForServerMessage("plugin.catalog.get.response", catalogCount + 1);
|
||||
},
|
||||
async changeStoredTitle(title: string) {
|
||||
const rpc = settingsRpc("display");
|
||||
const current = rpc.read.output.parse(
|
||||
await peer.invokePluginRpc(PLUGIN_ID, rpc.read.name, {}),
|
||||
);
|
||||
if (current.status !== "ready") throw new Error("Expected ready settings");
|
||||
const values = z
|
||||
.object({ groupBy: z.string(), showMetadata: z.boolean(), title: z.string() })
|
||||
.parse(current.values);
|
||||
const result = await peer.invokePluginRpc(PLUGIN_ID, rpc.write.name, {
|
||||
revision: current.revision,
|
||||
values: { ...values, title },
|
||||
});
|
||||
expect(result).toMatchObject({ status: "saved", values: { title } });
|
||||
},
|
||||
async changeCode() {
|
||||
await writeFile(clientEntry, retainedPluginSource("two"));
|
||||
await peer.reloadPlugin(PLUGIN_ID);
|
||||
},
|
||||
async remove() {
|
||||
await peer.removePlugin(PLUGIN_ID);
|
||||
},
|
||||
async close() {
|
||||
gate.restore();
|
||||
await peer.removePlugin(PLUGIN_ID).catch(() => undefined);
|
||||
await peer.patchDaemonConfig({ pluginsEnabled: previous.config.pluginsEnabled ?? false });
|
||||
await peer.close();
|
||||
await example.cleanup();
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export async function editRetainedDraft(page: Page, draft: string, clicks: number) {
|
||||
await page.getByRole("textbox", { name: "Plugin draft", exact: true }).fill(draft);
|
||||
await page.getByRole("button", { name: `Local clicks ${clicks}`, exact: true }).click();
|
||||
await expectRetainedDraft(page, draft, clicks + 1);
|
||||
}
|
||||
|
||||
export async function expectRetainedDraft(page: Page, draft: string, clicks: number) {
|
||||
await expect(page.getByRole("textbox", { name: "Plugin draft", exact: true })).toHaveValue(draft);
|
||||
await expect(
|
||||
page.getByRole("button", { name: `Local clicks ${clicks}`, exact: true }),
|
||||
).toBeVisible();
|
||||
}
|
||||
|
||||
export async function expectStoredPluginTitle(page: Page, title: string) {
|
||||
await expect(page.getByText(`Stored title: ${title}`, { exact: true })).toBeVisible();
|
||||
}
|
||||
|
||||
export async function hideRetainedPreferences(page: Page) {
|
||||
await page.getByRole("button", { name: "Hide preferences", exact: true }).click();
|
||||
await expect(page.getByText(/^Stored title:/)).toHaveCount(0);
|
||||
}
|
||||
|
||||
export async function showRetainedPreferences(page: Page) {
|
||||
await page.getByRole("button", { name: "Show preferences", exact: true }).click();
|
||||
}
|
||||
|
||||
export async function expectChangedPlugin(page: Page) {
|
||||
await expect(page.getByText("Plugin version two", { exact: true })).toBeVisible();
|
||||
await expectRetainedDraft(page, "", 0);
|
||||
}
|
||||
|
||||
export async function expectRemovedPlugin(page: Page) {
|
||||
await expect(
|
||||
page.getByText("This plugin surface is unavailable.", { exact: true }),
|
||||
).toBeVisible();
|
||||
await expect(page.getByRole("button", { name: "Reconnect probe", exact: true })).toHaveCount(0);
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
import type { Page } from "@playwright/test";
|
||||
|
||||
declare global {
|
||||
var __PASEO_E2E_REACT_RENDERS__: Record<string, number> | undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* Counts which components render in each React commit, by name, the way React DevTools
|
||||
* highlights updates: a fiber rendered when React performed work on it in that commit.
|
||||
* Install before the app loads; React registers with the DevTools hook at startup.
|
||||
*/
|
||||
export async function recordReactRenders(page: Page): Promise<void> {
|
||||
await page.addInitScript(() => {
|
||||
const PERFORMED_WORK = 1;
|
||||
interface Fiber {
|
||||
type: unknown;
|
||||
flags: number;
|
||||
child: Fiber | null;
|
||||
sibling: Fiber | null;
|
||||
alternate: Fiber | null;
|
||||
}
|
||||
const nameOf = (type: unknown): string | null => {
|
||||
if (typeof type === "function") {
|
||||
return (type as { displayName?: string }).displayName || type.name || null;
|
||||
}
|
||||
if (!type || typeof type !== "object") return null;
|
||||
const component = type as { displayName?: string; render?: unknown; type?: unknown };
|
||||
return component.displayName || nameOf(component.render) || nameOf(component.type);
|
||||
};
|
||||
const record = (root: Fiber) => {
|
||||
const renders = (globalThis.__PASEO_E2E_REACT_RENDERS__ ??= {});
|
||||
const pending: Fiber[] = [root];
|
||||
while (pending.length > 0) {
|
||||
const fiber = pending.pop()!;
|
||||
const name = typeof fiber.type === "string" ? null : nameOf(fiber.type);
|
||||
if (name && (fiber.flags & PERFORMED_WORK) !== 0) renders[name] = (renders[name] ?? 0) + 1;
|
||||
// A subtree React bailed out of is shared with the previous commit; skip it.
|
||||
if (fiber.alternate && fiber.child === fiber.alternate.child) continue;
|
||||
for (let child = fiber.child; child; child = child.sibling) pending.push(child);
|
||||
}
|
||||
};
|
||||
let rendererCount = 0;
|
||||
Object.defineProperty(globalThis, "__REACT_DEVTOOLS_GLOBAL_HOOK__", {
|
||||
configurable: true,
|
||||
value: {
|
||||
supportsFiber: true,
|
||||
isDisabled: false,
|
||||
renderers: new Map(),
|
||||
inject(renderer: unknown) {
|
||||
rendererCount += 1;
|
||||
this.renderers.set(rendererCount, renderer);
|
||||
return rendererCount;
|
||||
},
|
||||
checkDCE() {},
|
||||
onScheduleFiberRoot() {},
|
||||
onCommitFiberRoot(_rendererId: number, root: { current: Fiber }) {
|
||||
record(root.current);
|
||||
},
|
||||
onPostCommitFiberRoot() {},
|
||||
onCommitFiberUnmount() {},
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
export async function resetReactRenders(page: Page): Promise<void> {
|
||||
await page.evaluate(() => {
|
||||
globalThis.__PASEO_E2E_REACT_RENDERS__ = {};
|
||||
});
|
||||
}
|
||||
|
||||
/** Render counts per component name since the last reset, read after the next painted frame. */
|
||||
export async function readReactRenders(page: Page): Promise<Record<string, number>> {
|
||||
return page.evaluate(async () => {
|
||||
await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
|
||||
return { ...globalThis.__PASEO_E2E_REACT_RENDERS__ };
|
||||
});
|
||||
}
|
||||
@@ -5,7 +5,7 @@ export function sheet(page: Page, label: string): Locator {
|
||||
return page.getByRole("dialog", { name: label });
|
||||
}
|
||||
|
||||
/** A sheet tab's header, which carries its title, Close, and the Open as tab glyph. */
|
||||
/** A sheet tab's header, which carries its title, Back, Close, and the Open as tab glyph. */
|
||||
export function sheetHeader(page: Page, label: string): Locator {
|
||||
return page.getByTestId("sheet-tab-header").filter({ hasText: label });
|
||||
}
|
||||
@@ -48,6 +48,12 @@ export async function closeSheet(page: Page, label: string): Promise<void> {
|
||||
await expect(sheet(page, label)).toHaveCount(0);
|
||||
}
|
||||
|
||||
/** Steps a sheet opened from a list back to that list, in the same sheet. */
|
||||
export async function backToList(page: Page, label: string): Promise<void> {
|
||||
await sheetHeader(page, label).getByRole("button", { name: "Back" }).click();
|
||||
await expect(sheet(page, label)).toHaveCount(0);
|
||||
}
|
||||
|
||||
export async function openSheetAsTab(page: Page, label: string): Promise<void> {
|
||||
await sheetHeader(page, label).getByRole("button", { name: "Open as tab" }).click();
|
||||
await expect(sheet(page, label)).toHaveCount(0);
|
||||
@@ -76,6 +82,15 @@ export async function selectTabFromSwitcher(page: Page, label: string): Promise<
|
||||
await expect(page.getByRole("button", { name: "Bottom sheet backdrop" })).toHaveCount(0);
|
||||
}
|
||||
|
||||
/** Each open sheet renders its own backdrop, so counting them counts the sheets. */
|
||||
export async function expectOneSheetOpen(page: Page): Promise<void> {
|
||||
await expect(page.getByRole("button", { name: "Bottom sheet backdrop" })).toHaveCount(1);
|
||||
}
|
||||
|
||||
export async function expectNoSheetOpen(page: Page): Promise<void> {
|
||||
await expect(page.getByRole("button", { name: "Bottom sheet backdrop" })).toHaveCount(0);
|
||||
}
|
||||
|
||||
/** Taps the top sheet's backdrop; each stacked sheet renders its own, top last. */
|
||||
export async function tapSheetBackdrop(page: Page): Promise<void> {
|
||||
await page
|
||||
|
||||
@@ -3,7 +3,7 @@ import { startIsolatedHostDaemon } from "./isolated-host-daemon";
|
||||
import { seedWorkspace } from "./seed-client";
|
||||
import { getE2EDaemonPort } from "./daemon-port";
|
||||
import { PARENT_AGENT_ID_LABEL } from "@getpaseo/protocol/agent-labels";
|
||||
import { expect, type Page } from "@playwright/test";
|
||||
import { expect, type Locator, type Page } from "@playwright/test";
|
||||
import { daemonWsRoutePattern } from "./daemon-port";
|
||||
import type { SeededWorkspace } from "./seed-client";
|
||||
|
||||
@@ -151,10 +151,21 @@ export async function openSubagentsTrack(page: Page): Promise<void> {
|
||||
await expect(panel).toBeVisible({ timeout: 30_000 });
|
||||
}
|
||||
|
||||
/** On compact the track opens as a sheet, which closes once a row is chosen. */
|
||||
export async function openSubagentFromCompactTrack(page: Page, childId: string): Promise<void> {
|
||||
await page.getByTestId("subagents-track-header").click();
|
||||
await page.getByTestId(`subagents-track-row-${childId}`).click();
|
||||
/**
|
||||
* On compact the track opens as a sheet, and the chosen row opens in its place. `track` is the
|
||||
* pane whose track to open, for when a subagent's sheet shows a track of its own.
|
||||
*/
|
||||
export async function openSubagentFromCompactTrack(
|
||||
page: Page,
|
||||
childId: string,
|
||||
track: Page | Locator = page,
|
||||
): Promise<void> {
|
||||
await track.getByTestId("subagents-track-header").click();
|
||||
const row = page.getByTestId(`subagents-track-row-${childId}`);
|
||||
// Tap the row once the sheet has brought it on screen, as a finger would. Clicking it while it is
|
||||
// still below the fold makes Playwright scroll the sheet host, and every sheet then docks short.
|
||||
await expect(row).toBeInViewport();
|
||||
await row.click();
|
||||
}
|
||||
|
||||
export async function expectSubagentRowVisible(page: Page, childId: string): Promise<void> {
|
||||
|
||||
@@ -0,0 +1,125 @@
|
||||
import type { Page } from "@playwright/test";
|
||||
import { daemonWsRoutePattern } from "./daemon-port";
|
||||
|
||||
type WebSocketMessage = string | Buffer;
|
||||
|
||||
function parseSessionMessage(message: WebSocketMessage): Record<string, unknown> | null {
|
||||
const raw = typeof message === "string" ? message : message.toString("utf8");
|
||||
try {
|
||||
const envelope = JSON.parse(raw) as { type?: unknown; message?: unknown };
|
||||
return envelope.type === "session" && envelope.message && typeof envelope.message === "object"
|
||||
? (envelope.message as Record<string, unknown>)
|
||||
: null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function getToolCallStatus(
|
||||
message: WebSocketMessage,
|
||||
agentId: string,
|
||||
): { callId: string; status: string } | null {
|
||||
const sessionMessage = parseSessionMessage(message);
|
||||
if (sessionMessage?.type !== "agent_stream") {
|
||||
return null;
|
||||
}
|
||||
const payload = sessionMessage.payload as Record<string, unknown> | undefined;
|
||||
if (payload?.agentId !== agentId) {
|
||||
return null;
|
||||
}
|
||||
const event = payload.event as Record<string, unknown> | undefined;
|
||||
const item = event?.item as Record<string, unknown> | undefined;
|
||||
return event?.type === "timeline" &&
|
||||
item?.type === "tool_call" &&
|
||||
typeof item.callId === "string" &&
|
||||
typeof item.status === "string"
|
||||
? { callId: item.callId, status: item.status }
|
||||
: null;
|
||||
}
|
||||
|
||||
function replaceToolCallStatus(message: WebSocketMessage, status: string): string {
|
||||
const raw = typeof message === "string" ? message : message.toString("utf8");
|
||||
const envelope = JSON.parse(raw) as {
|
||||
message?: { payload?: { event?: { item?: { status?: string } } } };
|
||||
};
|
||||
const item = envelope.message?.payload?.event?.item;
|
||||
if (!item) {
|
||||
throw new Error("Expected a tool-call session message");
|
||||
}
|
||||
item.status = status;
|
||||
return JSON.stringify(envelope);
|
||||
}
|
||||
|
||||
export async function gateSecondToolCall(page: Page, agentId: string) {
|
||||
let firstCallId: string | null = null;
|
||||
let secondCallId: string | null = null;
|
||||
let secondRunningMessage: WebSocketMessage | null = null;
|
||||
let pauseAfterSecondRunning = false;
|
||||
let releaseSecondRequested = false;
|
||||
let forwardSecondRunning: (() => void) | null = null;
|
||||
let resolveFirstCompleted!: () => void;
|
||||
let resolveSecondRunning!: () => void;
|
||||
const firstCompleted = new Promise<void>((resolve) => {
|
||||
resolveFirstCompleted = resolve;
|
||||
});
|
||||
const secondRunning = new Promise<void>((resolve) => {
|
||||
resolveSecondRunning = resolve;
|
||||
});
|
||||
|
||||
await page.routeWebSocket(daemonWsRoutePattern(), (ws) => {
|
||||
const server = ws.connectToServer();
|
||||
forwardSecondRunning = () => {
|
||||
if (secondRunningMessage) {
|
||||
ws.send(secondRunningMessage);
|
||||
secondRunningMessage = null;
|
||||
}
|
||||
};
|
||||
ws.onMessage((message) => server.send(message));
|
||||
server.onMessage((message) => {
|
||||
if (pauseAfterSecondRunning) {
|
||||
return;
|
||||
}
|
||||
|
||||
const toolCall = getToolCallStatus(message, agentId);
|
||||
if (!toolCall) {
|
||||
ws.send(message);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!firstCallId) {
|
||||
firstCallId = toolCall.callId;
|
||||
}
|
||||
if (toolCall.callId === firstCallId) {
|
||||
ws.send(message);
|
||||
if (toolCall.status === "completed") {
|
||||
resolveFirstCompleted();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
secondCallId ??= toolCall.callId;
|
||||
if (toolCall.callId === secondCallId) {
|
||||
const transformedMessage =
|
||||
toolCall.status === "completed" ? replaceToolCallStatus(message, "running") : message;
|
||||
secondRunningMessage = transformedMessage;
|
||||
pauseAfterSecondRunning = true;
|
||||
resolveSecondRunning();
|
||||
if (releaseSecondRequested) {
|
||||
forwardSecondRunning?.();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
ws.send(message);
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
waitForFirstCompleted: () => firstCompleted,
|
||||
waitForSecondRunning: () => secondRunning,
|
||||
releaseSecondRunning() {
|
||||
releaseSecondRequested = true;
|
||||
forwardSecondRunning?.();
|
||||
},
|
||||
};
|
||||
}
|
||||
@@ -61,6 +61,11 @@ import { returnToTimelineTail } from "./timeline-tail-navigation";
|
||||
import type { DaemonClient } from "@getpaseo/client/internal/daemon-client";
|
||||
import { ToolCallDetailsContent } from "@/components/tool-call-details";
|
||||
import { QuestionFormCard } from "@/components/question-form-card";
|
||||
import {
|
||||
ToolCallExpansionContext,
|
||||
useAgentToolCallExpansion,
|
||||
useExpandedToolCallGroups,
|
||||
} from "@/tool-calls/expansion-context";
|
||||
import { ToolCallSheetProvider } from "@/components/tool-call-sheet";
|
||||
import { createStreamPresentation } from "./presentation";
|
||||
import { OverviewToolCallGroupView } from "@/tool-calls/detail-level/overview/view";
|
||||
@@ -364,9 +369,8 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
|
||||
const [expandedInlineToolCallIds, setExpandedInlineToolCallIds] = useState<Set<string>>(
|
||||
new Set(),
|
||||
);
|
||||
const [expandedToolCallGroupIds, setExpandedToolCallGroupIds] = useState<Set<string>>(
|
||||
new Set(),
|
||||
);
|
||||
const toolCallExpansion = useAgentToolCallExpansion(agentId);
|
||||
const expandedToolCallGroups = useExpandedToolCallGroups(toolCallExpansion);
|
||||
const [expandedTurnHostIds, setExpandedTurnHostIds] = useState<ReadonlySet<string>>(new Set());
|
||||
|
||||
// Get serverId (fallback to agent's serverId if not provided)
|
||||
@@ -431,7 +435,6 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
|
||||
useEffect(() => {
|
||||
setIsNearBottom(true);
|
||||
setExpandedInlineToolCallIds(new Set());
|
||||
setExpandedToolCallGroupIds(new Set());
|
||||
setExpandedTurnHostIds(new Set());
|
||||
}, [agentId]);
|
||||
|
||||
@@ -708,17 +711,7 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
|
||||
return getCollapsedTurn(layoutItem.item.id)?.expanded ? "openedHost" : "none";
|
||||
});
|
||||
|
||||
const setToolCallGroupExpanded = useCallback((groupId: string, expanded: boolean) => {
|
||||
setExpandedToolCallGroupIds((previous) => {
|
||||
const next = new Set(previous);
|
||||
if (expanded) {
|
||||
next.add(groupId);
|
||||
} else {
|
||||
next.delete(groupId);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
const setToolCallGroupExpanded = toolCallExpansion.setGroupExpanded;
|
||||
|
||||
const renderUserMessageItem = useCallback(
|
||||
(layoutItem: StreamLayoutItem, item: Extract<StreamItem, { kind: "user_message" }>) => {
|
||||
@@ -815,7 +808,7 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
|
||||
(
|
||||
item: Extract<StreamItem, { kind: "tool_call" }>,
|
||||
isLastInSequence: boolean,
|
||||
maxDetailHeight?: number,
|
||||
options: { maxDetailHeight?: number; standalone?: boolean } = {},
|
||||
) => {
|
||||
const { payload } = item;
|
||||
|
||||
@@ -847,7 +840,8 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
|
||||
agentMessage={data.agentMessage}
|
||||
isLastInSequence={isLastInSequence}
|
||||
onOpenFilePath={handleToolCallOpenFile}
|
||||
maxDetailHeight={maxDetailHeight}
|
||||
standalone={options.standalone}
|
||||
maxDetailHeight={options.maxDetailHeight}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -863,7 +857,8 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
|
||||
status={data.status}
|
||||
isLastInSequence={isLastInSequence}
|
||||
onOpenFilePath={handleToolCallOpenFile}
|
||||
maxDetailHeight={maxDetailHeight}
|
||||
standalone={options.standalone}
|
||||
maxDetailHeight={options.maxDetailHeight}
|
||||
/>
|
||||
);
|
||||
},
|
||||
@@ -886,7 +881,7 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
|
||||
? renderThoughtItem(layoutItem, item)
|
||||
: renderSingleToolCallItem(item, layoutItem.isLastInToolSequence);
|
||||
}
|
||||
const expanded = expandedToolCallGroupIds.has(group.run.id);
|
||||
const expanded = expandedToolCallGroups.has(group.run.id);
|
||||
return (
|
||||
<OverviewToolCallGroupView
|
||||
group={group}
|
||||
@@ -906,14 +901,14 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
|
||||
status={call.status}
|
||||
isLastInSequence={index === group.run.calls.length - 1}
|
||||
defaultExpanded={false}
|
||||
standalone={false}
|
||||
onInlineDetailsExpandedChangeByItemId={setInlineDetailsExpanded}
|
||||
/>
|
||||
) : (
|
||||
renderSingleToolCallItem(
|
||||
call,
|
||||
index === group.run.calls.length - 1,
|
||||
GROUPED_TOOL_CALL_DETAIL_MAX_HEIGHT,
|
||||
)
|
||||
renderSingleToolCallItem(call, index === group.run.calls.length - 1, {
|
||||
maxDetailHeight: GROUPED_TOOL_CALL_DETAIL_MAX_HEIGHT,
|
||||
standalone: false,
|
||||
})
|
||||
)}
|
||||
</React.Fragment>
|
||||
))
|
||||
@@ -922,7 +917,7 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
|
||||
);
|
||||
},
|
||||
[
|
||||
expandedToolCallGroupIds,
|
||||
expandedToolCallGroups,
|
||||
renderThoughtItem,
|
||||
setInlineDetailsExpanded,
|
||||
getToolCallGroup,
|
||||
@@ -1174,15 +1169,18 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
|
||||
() => ({
|
||||
contentById: presentation.historyGroupUpdatesByHostId,
|
||||
displayStateById: {
|
||||
// An opened lone call also marks its future group open; that row stays unrevised
|
||||
// until a group actually forms there.
|
||||
has: (id: string) =>
|
||||
expandedToolCallGroupIds.has(id) ||
|
||||
(expandedToolCallGroups.has(id) && getToolCallGroup(id) !== undefined) ||
|
||||
expandedTurnHostIds.has(id) ||
|
||||
nestedItemIds.has(id),
|
||||
},
|
||||
globalDisplayState: isMobile,
|
||||
}),
|
||||
[
|
||||
expandedToolCallGroupIds,
|
||||
expandedToolCallGroups,
|
||||
getToolCallGroup,
|
||||
expandedTurnHostIds,
|
||||
isMobile,
|
||||
nestedItemIds,
|
||||
@@ -1207,30 +1205,32 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
|
||||
<ToolCallSheetProvider>
|
||||
<AssistantSelectionCopySurface style={stylesheet.container}>
|
||||
<MessageOuterSpacingProvider disableOuterSpacing>
|
||||
{streamRenderStrategy.render({
|
||||
readingRowReplacements: presentation.readingRowReplacements,
|
||||
agentId,
|
||||
segments: renderModel.segments,
|
||||
historyRowRevision,
|
||||
liveHeadRowRevision: expandedToolCallGroupIds,
|
||||
boundary,
|
||||
renderers,
|
||||
listEmptyComponent,
|
||||
viewportRef,
|
||||
routeBottomAnchorRequest,
|
||||
isAuthoritativeHistoryReady,
|
||||
onNearBottomChange: setIsNearBottom,
|
||||
onReadingPositionChange: handleReadingPositionChange,
|
||||
onNearHistoryStart: loadOlder,
|
||||
isLoadingOlderHistory: isLoadingOlder,
|
||||
hasOlderHistory: hasOlder,
|
||||
olderHistoryProgressKey: progressKey,
|
||||
scrollEnabled: streamScrollEnabled,
|
||||
listStyle: stylesheet.list,
|
||||
baseListContentContainerStyle: stylesheet.listContentContainer,
|
||||
forwardListContentContainerStyle: stylesheet.forwardListContentContainer,
|
||||
contentMaxWidth,
|
||||
})}
|
||||
<ToolCallExpansionContext.Provider value={toolCallExpansion}>
|
||||
{streamRenderStrategy.render({
|
||||
readingRowReplacements: presentation.readingRowReplacements,
|
||||
agentId,
|
||||
segments: renderModel.segments,
|
||||
historyRowRevision,
|
||||
liveHeadRowRevision: expandedToolCallGroups,
|
||||
boundary,
|
||||
renderers,
|
||||
listEmptyComponent,
|
||||
viewportRef,
|
||||
routeBottomAnchorRequest,
|
||||
isAuthoritativeHistoryReady,
|
||||
onNearBottomChange: setIsNearBottom,
|
||||
onReadingPositionChange: handleReadingPositionChange,
|
||||
onNearHistoryStart: loadOlder,
|
||||
isLoadingOlderHistory: isLoadingOlder,
|
||||
hasOlderHistory: hasOlder,
|
||||
olderHistoryProgressKey: progressKey,
|
||||
scrollEnabled: streamScrollEnabled,
|
||||
listStyle: stylesheet.list,
|
||||
baseListContentContainerStyle: stylesheet.listContentContainer,
|
||||
forwardListContentContainerStyle: stylesheet.forwardListContentContainer,
|
||||
contentMaxWidth,
|
||||
})}
|
||||
</ToolCallExpansionContext.Provider>
|
||||
</MessageOuterSpacingProvider>
|
||||
<ChatOutlineRail
|
||||
prompts={chatOutline.prompts}
|
||||
@@ -1403,6 +1403,7 @@ interface ThoughtSlotProps {
|
||||
status: Extract<StreamItem, { kind: "thought" }>["status"];
|
||||
isLastInSequence: boolean;
|
||||
defaultExpanded: boolean;
|
||||
standalone?: boolean;
|
||||
}
|
||||
|
||||
// Reasoning text is paced the same way assistant text is; see @/hooks/use-revealed-text.
|
||||
@@ -1413,6 +1414,7 @@ function ThoughtSlot({
|
||||
status,
|
||||
isLastInSequence,
|
||||
defaultExpanded,
|
||||
standalone,
|
||||
}: ThoughtSlotProps) {
|
||||
const revealedText = useRevealedText(text, status === "ready" ? "complete" : "streaming");
|
||||
return (
|
||||
@@ -1424,6 +1426,7 @@ function ThoughtSlot({
|
||||
status={status === "ready" ? "completed" : "executing"}
|
||||
isLastInSequence={isLastInSequence}
|
||||
defaultExpanded={defaultExpanded}
|
||||
standalone={standalone}
|
||||
forceInline={defaultExpanded}
|
||||
/>
|
||||
);
|
||||
@@ -1438,7 +1441,9 @@ function ToolCallSlot({
|
||||
(expanded: boolean) => onInlineDetailsExpandedChangeByItemId(itemId, expanded),
|
||||
[onInlineDetailsExpandedChangeByItemId, itemId],
|
||||
);
|
||||
return <ToolCall {...rest} onInlineDetailsExpandedChange={handleExpandedChange} />;
|
||||
return (
|
||||
<ToolCall {...rest} itemId={itemId} onInlineDetailsExpandedChange={handleExpandedChange} />
|
||||
);
|
||||
}
|
||||
|
||||
const ThemedLoadingSpinner = withUnistyles(LoadingSpinner);
|
||||
|
||||
@@ -84,6 +84,7 @@ import { getDesktopHost } from "@/desktop/host";
|
||||
import { loadDesktopSettings } from "@/desktop/settings/desktop-settings";
|
||||
import { RosettaCalloutSource } from "@/desktop/updates/rosetta-callout-source";
|
||||
import { UpdateCalloutSource } from "@/desktop/updates/update-callout-source";
|
||||
import { DaemonOutdatedCalloutSource } from "@/components/daemon-outdated-callout-source";
|
||||
import { useActiveWorktreeNewAction } from "@/hooks/use-active-worktree-new-action";
|
||||
import { useGlobalNewWorkspaceAction } from "@/hooks/use-global-new-workspace-action";
|
||||
import { useLatchedBoolean } from "@/hooks/use-latched-boolean";
|
||||
@@ -486,6 +487,7 @@ function AppContainer({ children, chromeEnabled: chromeEnabledOverride }: AppCon
|
||||
<DownloadToast />
|
||||
<RosettaCalloutSource />
|
||||
<UpdateCalloutSource />
|
||||
<DaemonOutdatedCalloutSource />
|
||||
<LegacyAgentSkillsMigration />
|
||||
<WorktreeSetupCalloutSource />
|
||||
<CommandCenterRootActions />
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
/**
|
||||
* @vitest-environment jsdom
|
||||
*/
|
||||
import React from "react";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { Text } from "react-native";
|
||||
import { SafeAreaInsetsContext, useSafeAreaInsets } from "react-native-safe-area-context";
|
||||
import { beforeEach, describe, expect, it, vi } from "vitest";
|
||||
import { SheetBottomInset } from "./adaptive-modal-sheet";
|
||||
|
||||
beforeEach(() => vi.stubGlobal("React", React));
|
||||
|
||||
const SCREEN_INSETS = { top: 24, right: 0, bottom: 34, left: 0 };
|
||||
|
||||
function BottomInsetProbe() {
|
||||
return <Text testID="content-bottom-inset">{String(useSafeAreaInsets().bottom)}</Text>;
|
||||
}
|
||||
|
||||
describe("SheetBottomInset", () => {
|
||||
it("pads the bottom inset once and leaves none for its content", () => {
|
||||
render(
|
||||
<SafeAreaInsetsContext.Provider value={SCREEN_INSETS}>
|
||||
<SheetBottomInset testID="sheet-body">
|
||||
<BottomInsetProbe />
|
||||
</SheetBottomInset>
|
||||
</SafeAreaInsetsContext.Provider>,
|
||||
);
|
||||
|
||||
expect(screen.getByTestId("sheet-body").style.paddingBottom).toBe("34px");
|
||||
// Content that pads the inset itself, like the composer dock, must not pad it again.
|
||||
expect(screen.getByTestId("content-bottom-inset").textContent).toBe("0");
|
||||
});
|
||||
});
|
||||
@@ -3,7 +3,7 @@ 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 type { DimensionValue, StyleProp, ViewProps, ViewStyle } from "react-native";
|
||||
import { StyleSheet, useUnistyles, withUnistyles } from "react-native-unistyles";
|
||||
import { useIsCompactFormFactor } from "@/constants/layout";
|
||||
import {
|
||||
@@ -12,7 +12,12 @@ import {
|
||||
useGlobalWebOverlayLayer,
|
||||
useWebOverlayRegistration,
|
||||
} from "../lib/overlay-root";
|
||||
import { BottomSheetHandle, type BottomSheetBackgroundProps } from "@gorhom/bottom-sheet";
|
||||
import {
|
||||
BottomSheetHandle,
|
||||
useBottomSheetGestureHandlers,
|
||||
type BottomSheetBackgroundProps,
|
||||
} from "@gorhom/bottom-sheet";
|
||||
import { Gesture, GestureDetector } from "react-native-gesture-handler";
|
||||
import Animated from "react-native-reanimated";
|
||||
import { ArrowLeft, Search, X, type LucideIcon } from "lucide-react-native";
|
||||
import {
|
||||
@@ -25,7 +30,7 @@ import { getCompactSheetSafeAreaPadding } from "@/components/adaptive-modal-shee
|
||||
import { ScrollView } from "@/components/ui/scroll-view";
|
||||
import { isWeb } from "@/constants/platform";
|
||||
import { useKeyboardVisibility } from "@/hooks/use-keyboard-visibility";
|
||||
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||
import { SafeAreaInsetsContext, useSafeAreaInsets } from "react-native-safe-area-context";
|
||||
import { AdaptiveTextInput } from "@/components/adaptive-text-input";
|
||||
export { AdaptiveTextInput, type AdaptiveTextInputProps } from "@/components/adaptive-text-input";
|
||||
|
||||
@@ -40,6 +45,9 @@ export const SHEET_HORIZONTAL_PADDING_SCALE = 6;
|
||||
// glyph should line up with the X must reach the same rail.
|
||||
export const SHEET_HEADER_CLOSE_PADDING_SCALE = 2;
|
||||
|
||||
/** The one height a sheet takes when it shows a whole pane rather than sizing to its content. */
|
||||
export const FULL_SHEET_SNAP_POINTS = ["92%"];
|
||||
|
||||
export interface SheetHeaderSearch {
|
||||
onChange: (value: string) => void;
|
||||
onFocus?: () => void;
|
||||
@@ -244,32 +252,55 @@ 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.
|
||||
*/
|
||||
/** The compact sheet's drag handle: Gorhom's `handleComponent` for every bottom sheet. */
|
||||
export function SheetHandle({
|
||||
children,
|
||||
// Gorhom passes `indicatorStyle={undefined}`, which would override the themed indicator.
|
||||
indicatorStyle: _indicatorStyle,
|
||||
...props
|
||||
}: ComponentProps<typeof BottomSheetHandle>) {
|
||||
if (!children) return <ThemedBottomSheetHandle {...props} />;
|
||||
// The children carry their own semantics; the handle's slider role would swallow them on web.
|
||||
return <ThemedBottomSheetHandle {...props} />;
|
||||
}
|
||||
|
||||
/**
|
||||
* Content that drags the sheet the way its handle does. A sheet whose body scrolls on its own
|
||||
* turns content panning off and wraps its header in this, so the header still pulls it down.
|
||||
* Render it inside the sheet's content.
|
||||
*/
|
||||
export function SheetDragArea({ children }: { children: ReactNode }) {
|
||||
const { handlePanGestureHandler } = useBottomSheetGestureHandlers();
|
||||
const gesture = useMemo(
|
||||
() =>
|
||||
Gesture.Pan()
|
||||
.shouldCancelWhenOutside(false)
|
||||
.runOnJS(false)
|
||||
.onStart(handlePanGestureHandler.handleOnStart)
|
||||
.onChange(handlePanGestureHandler.handleOnChange)
|
||||
.onEnd(handlePanGestureHandler.handleOnEnd)
|
||||
.onFinalize(handlePanGestureHandler.handleOnFinalize),
|
||||
[handlePanGestureHandler],
|
||||
);
|
||||
return (
|
||||
<ThemedBottomSheetHandle
|
||||
{...props}
|
||||
style={HANDLE_WITH_CONTENT_STYLE}
|
||||
accessible={false}
|
||||
accessibilityRole={null}
|
||||
accessibilityLabel={null}
|
||||
accessibilityHint={null}
|
||||
>
|
||||
{children}
|
||||
</ThemedBottomSheetHandle>
|
||||
<GestureDetector gesture={gesture}>
|
||||
<View>{children}</View>
|
||||
</GestureDetector>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* A compact sheet's content area that reaches the bottom of the screen. It owns the system
|
||||
* navigation inset: it pads it once and tells its content none is left, so content that pads the
|
||||
* inset itself, like the composer dock, sits the same in a sheet as in a tab.
|
||||
*/
|
||||
export function SheetBottomInset({ style, children, ...props }: ViewProps) {
|
||||
const insets = useSafeAreaInsets();
|
||||
const contentInsets = useMemo(() => ({ ...insets, bottom: 0 }), [insets]);
|
||||
const insetStyle = useMemo(() => [style, { paddingBottom: insets.bottom }], [style, insets]);
|
||||
return (
|
||||
<View {...props} style={insetStyle}>
|
||||
<SafeAreaInsetsContext.Provider value={contentInsets}>
|
||||
{children}
|
||||
</SafeAreaInsetsContext.Provider>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -488,6 +519,76 @@ export interface AdaptiveModalSheetProps {
|
||||
contextBridge?: ContextBridge | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* The compact sheet's body. It renders on the far side of the sheet's portal so it reads the
|
||||
* screen's bottom inset, not the one left where the sheet was opened: inside a sheet tab, none is.
|
||||
*/
|
||||
function CompactSheetBody({
|
||||
header,
|
||||
onClose,
|
||||
testID,
|
||||
footer,
|
||||
isKeyboardVisible,
|
||||
scrollable,
|
||||
bodyStyle,
|
||||
contentStyle,
|
||||
children,
|
||||
}: {
|
||||
header: SheetHeader;
|
||||
onClose: () => void;
|
||||
testID?: string;
|
||||
footer: ReactNode;
|
||||
isKeyboardVisible: boolean;
|
||||
scrollable: boolean;
|
||||
bodyStyle?: StyleProp<ViewStyle>;
|
||||
contentStyle?: StyleProp<ViewStyle>;
|
||||
children: ReactNode;
|
||||
}) {
|
||||
const insets = useSafeAreaInsets();
|
||||
const { contentPaddingBottom = 0, footerPaddingBottom = 0 } = getCompactSheetSafeAreaPadding({
|
||||
isCompact: true,
|
||||
isKeyboardVisible,
|
||||
hasFooter: Boolean(footer),
|
||||
safeAreaBottom: insets.bottom,
|
||||
});
|
||||
// Safe-area clearance is a separate layer: it must not replace the caller's
|
||||
// padding (including an explicit zero), and the footer owns it when present.
|
||||
const bodyClearanceStyle = { paddingBottom: contentPaddingBottom };
|
||||
const footerClearanceStyle = useMemo(
|
||||
() => ({ paddingBottom: footerPaddingBottom }),
|
||||
[footerPaddingBottom],
|
||||
);
|
||||
const footerView = useMemo(
|
||||
() => (footer ? <View style={footerClearanceStyle}>{footer}</View> : null),
|
||||
[footer, footerClearanceStyle],
|
||||
);
|
||||
return (
|
||||
<SheetVisibleFrame footer={footerView}>
|
||||
<SheetHeaderView header={header} onClose={onClose} testID={testID} />
|
||||
<View style={[styles.compactStaticContent, bodyStyle]}>
|
||||
{scrollable ? (
|
||||
<ScrollView
|
||||
style={styles.bottomSheetVisibleScroll}
|
||||
contentContainerStyle={SCROLL_CONTENT_GROW}
|
||||
keyboardShouldPersistTaps="handled"
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
<View style={[styles.contentGrow, bodyClearanceStyle]}>
|
||||
<SheetContent style={[styles.contentGrow, contentStyle]}>{children}</SheetContent>
|
||||
</View>
|
||||
</ScrollView>
|
||||
) : (
|
||||
<View style={[styles.compactStaticContent, bodyClearanceStyle]}>
|
||||
<SheetContent style={[styles.compactStaticContent, contentStyle]}>
|
||||
{children}
|
||||
</SheetContent>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</SheetVisibleFrame>
|
||||
);
|
||||
}
|
||||
|
||||
export function AdaptiveModalSheet({
|
||||
header,
|
||||
visible,
|
||||
@@ -508,34 +609,11 @@ export function AdaptiveModalSheet({
|
||||
}: AdaptiveModalSheetProps) {
|
||||
const { t } = useTranslation();
|
||||
const isMobile = useIsCompactFormFactor();
|
||||
const insets = useSafeAreaInsets();
|
||||
const isKeyboardVisible = useKeyboardVisibility(visible);
|
||||
const resolvedSnapPoints = useMemo(() => snapPoints ?? ["65%", "90%"], [snapPoints]);
|
||||
const compactSafeAreaPadding = useMemo(
|
||||
() =>
|
||||
getCompactSheetSafeAreaPadding({
|
||||
isCompact: isMobile,
|
||||
isKeyboardVisible,
|
||||
hasFooter: Boolean(footer),
|
||||
safeAreaBottom: insets.bottom,
|
||||
}),
|
||||
[footer, insets.bottom, isKeyboardVisible, isMobile],
|
||||
);
|
||||
// Safe-area clearance is a separate layer: it must not replace the caller's
|
||||
// padding (including an explicit zero), and the footer owns it when present.
|
||||
const bodyClearanceStyle = { paddingBottom: compactSafeAreaPadding.contentPaddingBottom ?? 0 };
|
||||
const footerClearanceStyle = useMemo(
|
||||
() => ({ paddingBottom: compactSafeAreaPadding.footerPaddingBottom ?? 0 }),
|
||||
[compactSafeAreaPadding.footerPaddingBottom],
|
||||
);
|
||||
const footerView = useMemo(
|
||||
() =>
|
||||
footer ? (
|
||||
<View style={footerClearanceStyle}>
|
||||
<View style={[styles.footer, footerContainerStyle]}>{footer}</View>
|
||||
</View>
|
||||
) : null,
|
||||
[footer, footerClearanceStyle, footerContainerStyle],
|
||||
() => (footer ? <View style={[styles.footer, footerContainerStyle]}>{footer}</View> : null),
|
||||
[footer, footerContainerStyle],
|
||||
);
|
||||
useEffect(() => {
|
||||
if (!isWeb && visible) {
|
||||
@@ -614,32 +692,6 @@ export function AdaptiveModalSheet({
|
||||
}, [visible, isMobile, onDismiss, shouldRenderWeb]);
|
||||
|
||||
if (isMobile) {
|
||||
const sheetContent = (
|
||||
<>
|
||||
<SheetHeaderView header={header} onClose={onClose} testID={testID} />
|
||||
<View style={[styles.compactStaticContent, bodyStyle]}>
|
||||
{scrollable ? (
|
||||
<ScrollView
|
||||
style={styles.bottomSheetVisibleScroll}
|
||||
contentContainerStyle={SCROLL_CONTENT_GROW}
|
||||
keyboardShouldPersistTaps="handled"
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
<View style={[styles.contentGrow, bodyClearanceStyle]}>
|
||||
<SheetContent style={[styles.contentGrow, contentStyle]}>{children}</SheetContent>
|
||||
</View>
|
||||
</ScrollView>
|
||||
) : (
|
||||
<View style={[styles.compactStaticContent, bodyClearanceStyle]}>
|
||||
<SheetContent style={[styles.compactStaticContent, contentStyle]}>
|
||||
{children}
|
||||
</SheetContent>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<IsolatedBottomSheetModal
|
||||
ref={sheetRef}
|
||||
@@ -658,7 +710,18 @@ export function AdaptiveModalSheet({
|
||||
accessible={false}
|
||||
presentation={presentation}
|
||||
>
|
||||
<SheetVisibleFrame footer={footerView}>{sheetContent}</SheetVisibleFrame>
|
||||
<CompactSheetBody
|
||||
header={header}
|
||||
onClose={onClose}
|
||||
testID={testID}
|
||||
footer={footerView}
|
||||
isKeyboardVisible={isKeyboardVisible}
|
||||
scrollable={scrollable}
|
||||
bodyStyle={bodyStyle}
|
||||
contentStyle={contentStyle}
|
||||
>
|
||||
{children}
|
||||
</CompactSheetBody>
|
||||
</IsolatedBottomSheetModal>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -72,6 +72,7 @@ vi.mock("react-i18next", () => ({
|
||||
}));
|
||||
|
||||
vi.mock("react-native-safe-area-context", () => ({
|
||||
SafeAreaProvider: ({ children }: { children?: React.ReactNode }) => children,
|
||||
useSafeAreaInsets: () => ({ top: 0, right: 0, bottom: 0, left: 0 }),
|
||||
}));
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { type ReactNode, useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { Modal, Pressable, Text, View } from "react-native";
|
||||
import { GestureHandlerRootView } from "react-native-gesture-handler";
|
||||
import { StyleSheet } from "react-native-unistyles";
|
||||
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||
import { SafeAreaProvider, useSafeAreaInsets } from "react-native-safe-area-context";
|
||||
import { X } from "lucide-react-native";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import type { AttachmentMetadata } from "@/attachments/types";
|
||||
@@ -28,7 +28,6 @@ const LIGHTBOX_FIT = { padding: SPACING[4], maxWidth: 960, maxHeight: 640 };
|
||||
|
||||
export function AttachmentLightbox({ source, onClose }: AttachmentLightboxProps) {
|
||||
const { t } = useTranslation();
|
||||
const insets = useSafeAreaInsets();
|
||||
const metadata = source?.type === "attachment" ? source.metadata : null;
|
||||
const attachmentUrl = useAttachmentPreviewUrl(metadata);
|
||||
const url = source?.type === "uri" ? source.uri : attachmentUrl;
|
||||
@@ -56,18 +55,6 @@ export function AttachmentLightbox({ source, onClose }: AttachmentLightboxProps)
|
||||
onKeyDown: handleWebOverlayKeyDown,
|
||||
});
|
||||
|
||||
const contentLayerStyle = useMemo(
|
||||
() => [
|
||||
styles.contentLayer,
|
||||
{
|
||||
paddingTop: insets.top,
|
||||
paddingRight: insets.right,
|
||||
paddingBottom: insets.bottom,
|
||||
paddingLeft: insets.left,
|
||||
},
|
||||
],
|
||||
[insets.bottom, insets.left, insets.right, insets.top],
|
||||
);
|
||||
const actions = useMemo(
|
||||
() => [
|
||||
{
|
||||
@@ -91,17 +78,19 @@ export function AttachmentLightbox({ source, onClose }: AttachmentLightboxProps)
|
||||
return (
|
||||
<Modal transparent animationType="fade" statusBarTranslucent visible onRequestClose={onClose}>
|
||||
<ModalRoot style={styles.root}>
|
||||
<WindowChromeRootRegion corners="both">
|
||||
<View ref={setWebOverlayScope} style={styles.root}>
|
||||
<Pressable
|
||||
testID="attachment-lightbox-backdrop"
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={t("message.attachments.dismissImage")}
|
||||
onPress={onClose}
|
||||
style={styles.backdrop}
|
||||
/>
|
||||
<View pointerEvents="box-none" style={contentLayerStyle}>
|
||||
<View pointerEvents="box-none" style={styles.imageArea}>
|
||||
{/* The modal is its own window: its insets are the window's, not the ones left where the
|
||||
image was opened (inside a sheet tab, the bottom one is already spent). */}
|
||||
<SafeAreaProvider>
|
||||
<WindowChromeRootRegion corners="both">
|
||||
<View ref={setWebOverlayScope} style={styles.root}>
|
||||
<Pressable
|
||||
testID="attachment-lightbox-backdrop"
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={t("message.attachments.dismissImage")}
|
||||
onPress={onClose}
|
||||
style={styles.backdrop}
|
||||
/>
|
||||
<LightboxImageArea>
|
||||
{hasError ? (
|
||||
<Text style={styles.errorText}>{t("message.attachments.imageLoadFailed")}</Text>
|
||||
) : (
|
||||
@@ -117,15 +106,38 @@ export function AttachmentLightbox({ source, onClose }: AttachmentLightboxProps)
|
||||
uri={url}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
</LightboxImageArea>
|
||||
</View>
|
||||
</View>
|
||||
</WindowChromeRootRegion>
|
||||
</WindowChromeRootRegion>
|
||||
</SafeAreaProvider>
|
||||
</ModalRoot>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
function LightboxImageArea({ children }: { children: ReactNode }) {
|
||||
const insets = useSafeAreaInsets();
|
||||
const style = useMemo(
|
||||
() => [
|
||||
styles.contentLayer,
|
||||
{
|
||||
paddingTop: insets.top,
|
||||
paddingRight: insets.right,
|
||||
paddingBottom: insets.bottom,
|
||||
paddingLeft: insets.left,
|
||||
},
|
||||
],
|
||||
[insets.bottom, insets.left, insets.right, insets.top],
|
||||
);
|
||||
return (
|
||||
<View pointerEvents="box-none" style={style}>
|
||||
<View pointerEvents="box-none" style={styles.imageArea}>
|
||||
{children}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create((theme) => ({
|
||||
root: {
|
||||
flex: 1,
|
||||
|
||||
@@ -0,0 +1,182 @@
|
||||
import type { DaemonClient } from "@getpaseo/client/internal/daemon-client";
|
||||
import type { TFunction } from "i18next";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
type SidebarCalloutAction,
|
||||
SidebarCalloutDescriptionText,
|
||||
} from "@/components/sidebar-callout";
|
||||
import {
|
||||
type DaemonOutdatedUpdateState,
|
||||
resolveDaemonOutdatedCallout,
|
||||
} from "@/components/resolve-daemon-outdated-callout";
|
||||
import { useSidebarCallouts } from "@/contexts/sidebar-callout-context";
|
||||
import { useLocalDaemonServerId } from "@/hooks/use-is-local-daemon";
|
||||
import { useStableEvent } from "@/hooks/use-stable-event";
|
||||
import { useHostRuntimeClient, useHostRuntimeIsConnected, useHosts } from "@/runtime/host-runtime";
|
||||
import { updateDaemonFromSettings } from "@/screens/settings/daemon-lifecycle";
|
||||
import { useLastWorkspaceSelection } from "@/stores/navigation-active-workspace-store";
|
||||
import { useSessionStore } from "@/stores/session-store";
|
||||
import { orderHostsLocalFirst, resolveActiveHostServerId } from "@/types/host-connection";
|
||||
import { resolveAppVersion } from "@/utils/app-version";
|
||||
import { confirmDialog } from "@/utils/confirm-dialog";
|
||||
|
||||
interface HostUpdateState {
|
||||
serverId: string;
|
||||
update: DaemonOutdatedUpdateState;
|
||||
}
|
||||
|
||||
const IDLE: DaemonOutdatedUpdateState = { status: "idle" };
|
||||
|
||||
function DaemonOutdatedDescription({ lines }: { lines: string[] }) {
|
||||
return (
|
||||
<>
|
||||
{lines.map((line) => (
|
||||
<SidebarCalloutDescriptionText key={line}>{line}</SidebarCalloutDescriptionText>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
interface ConfirmAndUpdateDaemonInput {
|
||||
serverId: string;
|
||||
hostLabel: string;
|
||||
client: DaemonClient;
|
||||
t: TFunction;
|
||||
onState: (next: DaemonOutdatedUpdateState) => void;
|
||||
}
|
||||
|
||||
async function confirmAndUpdateDaemon(input: ConfirmAndUpdateDaemonInput): Promise<void> {
|
||||
const { serverId, hostLabel, client, t, onState } = input;
|
||||
let confirmed: boolean;
|
||||
try {
|
||||
confirmed = await confirmDialog({
|
||||
title: t("settings.host.daemon.update.confirmTitle", { name: hostLabel }),
|
||||
message: t("settings.host.daemon.update.confirmMessage"),
|
||||
confirmLabel: t("settings.host.daemon.update.confirm"),
|
||||
cancelLabel: t("common.actions.cancel"),
|
||||
destructive: false,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("[DaemonOutdatedCallout] Failed to open update confirmation", error);
|
||||
onState({ status: "failed", message: t("settings.host.daemon.update.dialogFailedMessage") });
|
||||
return;
|
||||
}
|
||||
if (!confirmed) return;
|
||||
|
||||
const phaseLabels = {
|
||||
starting: t("settings.host.daemon.update.phaseStarting"),
|
||||
downloading: t("settings.host.daemon.update.phaseDownloading"),
|
||||
installing: t("settings.host.daemon.update.phaseInstalling"),
|
||||
complete: t("settings.host.daemon.update.phaseComplete"),
|
||||
};
|
||||
onState({ status: "updating", phase: phaseLabels.starting });
|
||||
const requestId = `sidebar_daemon_update_${serverId}`;
|
||||
const unsubscribe = client.on("daemon.update.progress", (message) => {
|
||||
if (message.payload.requestId !== requestId) return;
|
||||
onState({ status: "updating", phase: phaseLabels[message.payload.phase] });
|
||||
});
|
||||
try {
|
||||
await updateDaemonFromSettings(serverId, {
|
||||
updateDaemon: () => client.updateDaemon(requestId),
|
||||
getStatus: async () => ({
|
||||
...(await client.getDaemonStatus()),
|
||||
serverId: client.getLastServerInfoMessage()?.serverId ?? "",
|
||||
version: client.getLastServerInfoMessage()?.version ?? null,
|
||||
}),
|
||||
});
|
||||
onState({ status: "idle" });
|
||||
} catch (error) {
|
||||
console.error(`[DaemonOutdatedCallout] Failed to update daemon ${hostLabel}`, error);
|
||||
onState({
|
||||
status: "failed",
|
||||
message: t("settings.host.daemon.update.requestFailedMessage", {
|
||||
error: error instanceof Error ? error.message : String(error),
|
||||
}),
|
||||
});
|
||||
} finally {
|
||||
unsubscribe();
|
||||
}
|
||||
}
|
||||
|
||||
/** Sidebar notice when the active host's daemon is older than this app. */
|
||||
export function DaemonOutdatedCalloutSource() {
|
||||
const { t } = useTranslation();
|
||||
const callouts = useSidebarCallouts();
|
||||
const hosts = useHosts();
|
||||
const localServerId = useLocalDaemonServerId();
|
||||
const lastWorkspaceSelection = useLastWorkspaceSelection();
|
||||
const orderedHosts = useMemo(
|
||||
() => orderHostsLocalFirst(hosts, localServerId),
|
||||
[hosts, localServerId],
|
||||
);
|
||||
// Same host resolution as settings: the last workspace's host, else the local daemon, else the first.
|
||||
const serverId = resolveActiveHostServerId({
|
||||
selectedServerId: lastWorkspaceSelection?.serverId ?? null,
|
||||
localServerId,
|
||||
hosts,
|
||||
orderedHosts,
|
||||
});
|
||||
const hostLabel = hosts.find((host) => host.serverId === serverId)?.label ?? "";
|
||||
const daemonClient = useHostRuntimeClient(serverId ?? "");
|
||||
const isConnected = useHostRuntimeIsConnected(serverId ?? "");
|
||||
const serverInfo = useSessionStore((state) =>
|
||||
serverId ? (state.sessions[serverId]?.serverInfo ?? null) : null,
|
||||
);
|
||||
const [hostUpdate, setHostUpdate] = useState<HostUpdateState | null>(null);
|
||||
const update = hostUpdate && hostUpdate.serverId === serverId ? hostUpdate.update : IDLE;
|
||||
|
||||
const runUpdate = useStableEvent(() => {
|
||||
if (!serverId || !daemonClient) return;
|
||||
void confirmAndUpdateDaemon({
|
||||
serverId,
|
||||
hostLabel,
|
||||
client: daemonClient,
|
||||
t,
|
||||
onState: (next) => setHostUpdate({ serverId, update: next }),
|
||||
});
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (!serverId || !serverInfo) return;
|
||||
const descriptor = resolveDaemonOutdatedCallout({
|
||||
serverId,
|
||||
hostLabel,
|
||||
appVersion: resolveAppVersion(),
|
||||
daemonVersion: serverInfo.version,
|
||||
supportsSelfUpdate: serverInfo.features?.daemonSelfUpdate === true,
|
||||
desktopManaged: serverInfo.desktopManaged === true,
|
||||
// COMPAT(terminalsSurviveRestart): added in v0.12.0, remove gate after 2027-04-21.
|
||||
terminalsSurviveRestart: serverInfo.features?.terminalsSurviveRestart === true,
|
||||
isConnected,
|
||||
update,
|
||||
});
|
||||
if (!descriptor) return;
|
||||
|
||||
const actions: SidebarCalloutAction[] = descriptor.updateAction
|
||||
? [
|
||||
{
|
||||
label: descriptor.updateAction.label,
|
||||
onPress: runUpdate,
|
||||
variant: "primary",
|
||||
disabled: descriptor.updateAction.disabled,
|
||||
testID: "daemon-outdated-callout-update",
|
||||
},
|
||||
]
|
||||
: [];
|
||||
return callouts.show({
|
||||
id: descriptor.id,
|
||||
dismissalKey: descriptor.dismissalKey,
|
||||
priority: descriptor.priority,
|
||||
title: descriptor.title,
|
||||
description: <DaemonOutdatedDescription lines={descriptor.description} />,
|
||||
variant: descriptor.variant,
|
||||
actions,
|
||||
testID: descriptor.testID,
|
||||
native: true,
|
||||
});
|
||||
// t: the resolver reads the active language through i18n, so a language change rebuilds the copy.
|
||||
}, [callouts, hostLabel, isConnected, runUpdate, serverId, serverInfo, t, update]);
|
||||
|
||||
return null;
|
||||
}
|
||||
@@ -40,6 +40,7 @@ import { SidebarSectionHeader } from "@/components/sidebar/sidebar-section-heade
|
||||
import { Shortcut } from "@/components/ui/shortcut";
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
|
||||
import { HEADER_INNER_HEIGHT, useIsCompactFormFactor } from "@/constants/layout";
|
||||
import { isNative } from "@/constants/platform";
|
||||
import { useOpenAddProject } from "@/hooks/use-open-add-project";
|
||||
import { useImportSession } from "@/hooks/use-import-session";
|
||||
import { useShortcutKeys } from "@/hooks/use-shortcut-keys";
|
||||
@@ -605,6 +606,8 @@ function MobileSidebar({
|
||||
/>
|
||||
)}
|
||||
|
||||
<SidebarCalloutSlot nativeOnly />
|
||||
|
||||
<SidebarFooter
|
||||
handleOpenProject={handleOpenProject}
|
||||
handleSettings={handleSettings}
|
||||
@@ -784,7 +787,7 @@ function DesktopSidebar({
|
||||
/>
|
||||
)}
|
||||
|
||||
<SidebarCalloutSlot />
|
||||
<SidebarCalloutSlot nativeOnly={isNative} />
|
||||
|
||||
<SidebarFooter
|
||||
handleOpenProject={handleOpenProject}
|
||||
|
||||
@@ -27,6 +27,7 @@ import { writeMarkdownToRichClipboard } from "@/utils/rich-clipboard";
|
||||
import { getDefaultMarkdownClipboardEnvironment } from "@/utils/rich-clipboard-default-environment";
|
||||
import { formatDuration, formatMessageTimestamp } from "@/utils/time";
|
||||
import { resolveToolCallIcon } from "@/utils/tool-call-icon";
|
||||
import { useToolCallExpanded } from "@/tool-calls/expansion-context";
|
||||
import { useTargetAgentTitle } from "@/tool-calls/use-target-agent-title";
|
||||
import type { DaemonClient } from "@getpaseo/client/internal/daemon-client";
|
||||
import type { AgentMessage } from "@getpaseo/protocol/agent-message";
|
||||
@@ -2241,6 +2242,9 @@ interface ToolCallProps {
|
||||
defaultExpanded?: boolean;
|
||||
forceInline?: boolean;
|
||||
maxDetailHeight?: number;
|
||||
itemId: string;
|
||||
/** Shown as its own row rather than inside a tool call group. */
|
||||
standalone?: boolean;
|
||||
}
|
||||
|
||||
export const ToolCall = memo(function ToolCall({
|
||||
@@ -2262,9 +2266,15 @@ export const ToolCall = memo(function ToolCall({
|
||||
defaultExpanded,
|
||||
forceInline = false,
|
||||
maxDetailHeight = 400,
|
||||
itemId,
|
||||
standalone = true,
|
||||
}: ToolCallProps) {
|
||||
const { openToolCall } = useToolCallSheet();
|
||||
const [isExpanded, setIsExpanded] = useState(defaultExpanded ?? false);
|
||||
const { expanded: isExpanded, toggle: toggleExpanded } = useToolCallExpanded({
|
||||
callId: itemId,
|
||||
defaultExpanded: defaultExpanded ?? false,
|
||||
standalone,
|
||||
});
|
||||
|
||||
const isMobile = useIsCompactFormFactor();
|
||||
const shouldRenderInline = !isMobile || forceInline;
|
||||
@@ -2319,10 +2329,11 @@ export const ToolCall = memo(function ToolCall({
|
||||
showLoadingSkeleton: presentation.isLoadingDetails,
|
||||
});
|
||||
} else {
|
||||
setIsExpanded((prev) => !prev);
|
||||
toggleExpanded();
|
||||
}
|
||||
}, [
|
||||
shouldRenderInline,
|
||||
toggleExpanded,
|
||||
openToolCall,
|
||||
toolName,
|
||||
presentation.detail,
|
||||
@@ -2428,5 +2439,7 @@ function areToolCallPropsEqual(previous: ToolCallProps, next: ToolCallProps) {
|
||||
if (previous.defaultExpanded !== next.defaultExpanded) return false;
|
||||
if (previous.forceInline !== next.forceInline) return false;
|
||||
if (previous.maxDetailHeight !== next.maxDetailHeight) return false;
|
||||
if (previous.itemId !== next.itemId) return false;
|
||||
if (previous.standalone !== next.standalone) return false;
|
||||
return true;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,195 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { i18n } from "@/i18n/i18next";
|
||||
import {
|
||||
resolveDaemonOutdatedCallout,
|
||||
type ResolveDaemonOutdatedCalloutInput,
|
||||
} from "./resolve-daemon-outdated-callout";
|
||||
|
||||
function input(
|
||||
overrides: Partial<ResolveDaemonOutdatedCalloutInput> = {},
|
||||
): ResolveDaemonOutdatedCalloutInput {
|
||||
return {
|
||||
serverId: "srv_alpha",
|
||||
hostLabel: "Workstation",
|
||||
appVersion: "0.12.0",
|
||||
daemonVersion: "0.11.4",
|
||||
supportsSelfUpdate: true,
|
||||
desktopManaged: false,
|
||||
terminalsSurviveRestart: true,
|
||||
isConnected: true,
|
||||
update: { status: "idle" },
|
||||
...overrides,
|
||||
};
|
||||
}
|
||||
|
||||
describe("resolveDaemonOutdatedCallout", () => {
|
||||
it("shows an update notice when the daemon is older than the app", () => {
|
||||
expect(resolveDaemonOutdatedCallout(input())).toEqual({
|
||||
id: "daemon-outdated",
|
||||
dismissalKey: "daemon-outdated:srv_alpha:0.11.4",
|
||||
priority: 250,
|
||||
title: "Daemon out of date",
|
||||
description: [
|
||||
"Workstation runs daemon v0.11.4. This app is v0.12.0.",
|
||||
"Updating restarts the daemon. Terminals stay open.",
|
||||
],
|
||||
variant: "default",
|
||||
updateAction: { label: "Update", disabled: false },
|
||||
testID: "daemon-outdated-callout",
|
||||
});
|
||||
});
|
||||
|
||||
it("hides when the daemon matches or is newer than the app", () => {
|
||||
expect(resolveDaemonOutdatedCallout(input({ daemonVersion: "0.12.0" }))).toBeNull();
|
||||
expect(resolveDaemonOutdatedCallout(input({ daemonVersion: "v0.12.0" }))).toBeNull();
|
||||
expect(resolveDaemonOutdatedCallout(input({ daemonVersion: "0.12.1" }))).toBeNull();
|
||||
expect(resolveDaemonOutdatedCallout(input({ daemonVersion: "1.0.0" }))).toBeNull();
|
||||
});
|
||||
|
||||
it("compares numeric components numerically, not as strings", () => {
|
||||
expect(
|
||||
resolveDaemonOutdatedCallout(input({ appVersion: "0.10.0", daemonVersion: "0.9.9" })),
|
||||
).not.toBeNull();
|
||||
expect(
|
||||
resolveDaemonOutdatedCallout(input({ appVersion: "0.9.9", daemonVersion: "0.10.0" })),
|
||||
).toBeNull();
|
||||
});
|
||||
|
||||
it("orders prereleases before their release", () => {
|
||||
expect(
|
||||
resolveDaemonOutdatedCallout(input({ appVersion: "0.12.0", daemonVersion: "0.12.0-beta.1" })),
|
||||
).not.toBeNull();
|
||||
expect(
|
||||
resolveDaemonOutdatedCallout(input({ appVersion: "0.12.0-beta.1", daemonVersion: "0.12.0" })),
|
||||
).toBeNull();
|
||||
expect(
|
||||
resolveDaemonOutdatedCallout(
|
||||
input({ appVersion: "0.12.0-beta.10", daemonVersion: "0.12.0-beta.2" }),
|
||||
),
|
||||
).not.toBeNull();
|
||||
expect(
|
||||
resolveDaemonOutdatedCallout(
|
||||
input({ appVersion: "0.12.0-beta.2", daemonVersion: "0.12.0-beta.2" }),
|
||||
),
|
||||
).toBeNull();
|
||||
expect(
|
||||
resolveDaemonOutdatedCallout(input({ appVersion: "0.12.0-rc.1", daemonVersion: "0.11.9" })),
|
||||
).not.toBeNull();
|
||||
});
|
||||
|
||||
it("hides when either version is missing or unparseable", () => {
|
||||
expect(resolveDaemonOutdatedCallout(input({ daemonVersion: null }))).toBeNull();
|
||||
expect(resolveDaemonOutdatedCallout(input({ appVersion: null }))).toBeNull();
|
||||
expect(resolveDaemonOutdatedCallout(input({ daemonVersion: "dev" }))).toBeNull();
|
||||
expect(resolveDaemonOutdatedCallout(input({ daemonVersion: "0.11" }))).toBeNull();
|
||||
expect(resolveDaemonOutdatedCallout(input({ appVersion: "unknown" }))).toBeNull();
|
||||
});
|
||||
|
||||
it("offers no button for a desktop-managed daemon and points to Paseo on that computer", () => {
|
||||
const descriptor = resolveDaemonOutdatedCallout(input({ desktopManaged: true }));
|
||||
|
||||
expect(descriptor?.updateAction).toBeNull();
|
||||
expect(descriptor?.description).toEqual([
|
||||
"Workstation runs daemon v0.11.4. This app is v0.12.0.",
|
||||
"Paseo Desktop manages this daemon. Update Paseo on that computer.",
|
||||
"Updating Paseo Desktop keeps terminals open on macOS and Linux, and closes them on Windows.",
|
||||
]);
|
||||
});
|
||||
|
||||
it("never promises terminals survive a desktop update, which closes them on Windows", () => {
|
||||
const descriptor = resolveDaemonOutdatedCallout(
|
||||
input({ desktopManaged: true, terminalsSurviveRestart: true }),
|
||||
);
|
||||
|
||||
expect(descriptor?.description).not.toContain(
|
||||
"Updating restarts the daemon. Terminals stay open.",
|
||||
);
|
||||
expect(descriptor?.description.at(-1)).toContain("closes them on Windows");
|
||||
});
|
||||
|
||||
it("says a desktop update closes terminals when the daemon does not keep them", () => {
|
||||
const descriptor = resolveDaemonOutdatedCallout(
|
||||
input({ desktopManaged: true, terminalsSurviveRestart: false }),
|
||||
);
|
||||
|
||||
expect(descriptor?.description.at(-1)).toBe(
|
||||
"Updating restarts the daemon and closes open terminals.",
|
||||
);
|
||||
});
|
||||
|
||||
it("offers no button when the daemon does not support self-update", () => {
|
||||
const descriptor = resolveDaemonOutdatedCallout(input({ supportsSelfUpdate: false }));
|
||||
|
||||
expect(descriptor?.updateAction).toBeNull();
|
||||
expect(descriptor?.description).toContain(
|
||||
"This daemon can't update itself. Update Paseo on that computer.",
|
||||
);
|
||||
});
|
||||
|
||||
it("says the update closes terminals when the daemon does not keep them", () => {
|
||||
const descriptor = resolveDaemonOutdatedCallout(input({ terminalsSurviveRestart: false }));
|
||||
|
||||
expect(descriptor?.description).toEqual([
|
||||
"Workstation runs daemon v0.11.4. This app is v0.12.0.",
|
||||
"Updating restarts the daemon and closes open terminals.",
|
||||
]);
|
||||
});
|
||||
|
||||
it("disables the button while the host is disconnected", () => {
|
||||
expect(resolveDaemonOutdatedCallout(input({ isConnected: false }))?.updateAction).toEqual({
|
||||
label: "Update",
|
||||
disabled: true,
|
||||
});
|
||||
});
|
||||
|
||||
it("shows the update phase on a disabled button while updating", () => {
|
||||
const descriptor = resolveDaemonOutdatedCallout(
|
||||
input({ update: { status: "updating", phase: "Downloading packages..." } }),
|
||||
);
|
||||
|
||||
expect(descriptor?.variant).toBe("default");
|
||||
expect(descriptor?.updateAction).toEqual({ label: "Downloading packages...", disabled: true });
|
||||
});
|
||||
|
||||
it("surfaces a failed update as an error with the button available again", () => {
|
||||
const descriptor = resolveDaemonOutdatedCallout(
|
||||
input({ update: { status: "failed", message: "Failed to update the daemon: boom" } }),
|
||||
);
|
||||
|
||||
expect(descriptor?.title).toBe("Daemon update failed");
|
||||
expect(descriptor?.variant).toBe("error");
|
||||
expect(descriptor?.description).toEqual(["Failed to update the daemon: boom"]);
|
||||
expect(descriptor?.updateAction).toEqual({ label: "Update", disabled: false });
|
||||
});
|
||||
|
||||
it("keys dismissal by host and daemon version", () => {
|
||||
const key = resolveDaemonOutdatedCallout(input())?.dismissalKey;
|
||||
|
||||
expect(resolveDaemonOutdatedCallout(input({ daemonVersion: "v0.11.4" }))?.dismissalKey).toBe(
|
||||
key,
|
||||
);
|
||||
expect(resolveDaemonOutdatedCallout(input({ appVersion: "0.13.0" }))?.dismissalKey).toBe(key);
|
||||
expect(resolveDaemonOutdatedCallout(input({ daemonVersion: "0.11.5" }))?.dismissalKey).toBe(
|
||||
"daemon-outdated:srv_alpha:0.11.5",
|
||||
);
|
||||
expect(resolveDaemonOutdatedCallout(input({ serverId: "srv_beta" }))?.dismissalKey).toBe(
|
||||
"daemon-outdated:srv_beta:0.11.4",
|
||||
);
|
||||
});
|
||||
|
||||
it("uses the active app language", async () => {
|
||||
await i18n.changeLanguage("es");
|
||||
try {
|
||||
const descriptor = resolveDaemonOutdatedCallout(input({ terminalsSurviveRestart: false }));
|
||||
|
||||
expect(descriptor?.title).toBe("Daemon desactualizado");
|
||||
expect(descriptor?.description).toEqual([
|
||||
"Workstation ejecuta el daemon v0.11.4. Esta app es v0.12.0.",
|
||||
"Actualizar reinicia el daemon y cierra las terminales abiertas.",
|
||||
]);
|
||||
expect(descriptor?.updateAction?.label).toBe("Actualizar");
|
||||
} finally {
|
||||
await i18n.changeLanguage("en");
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,147 @@
|
||||
import { i18n } from "@/i18n/i18next";
|
||||
|
||||
export type DaemonOutdatedUpdateState =
|
||||
| { status: "idle" }
|
||||
| { status: "updating"; phase: string }
|
||||
| { status: "failed"; message: string };
|
||||
|
||||
export interface ResolveDaemonOutdatedCalloutInput {
|
||||
serverId: string;
|
||||
hostLabel: string;
|
||||
appVersion: string | null;
|
||||
daemonVersion: string | null;
|
||||
supportsSelfUpdate: boolean;
|
||||
desktopManaged: boolean;
|
||||
terminalsSurviveRestart: boolean;
|
||||
isConnected: boolean;
|
||||
update: DaemonOutdatedUpdateState;
|
||||
}
|
||||
|
||||
export interface DaemonOutdatedUpdateAction {
|
||||
label: string;
|
||||
disabled: boolean;
|
||||
}
|
||||
|
||||
export interface DaemonOutdatedCalloutDescriptor {
|
||||
id: "daemon-outdated";
|
||||
dismissalKey: string;
|
||||
priority: number;
|
||||
title: string;
|
||||
description: string[];
|
||||
variant: "default" | "error";
|
||||
updateAction: DaemonOutdatedUpdateAction | null;
|
||||
testID: "daemon-outdated-callout";
|
||||
}
|
||||
|
||||
interface ParsedVersion {
|
||||
core: [number, number, number];
|
||||
prerelease: string[];
|
||||
}
|
||||
|
||||
const VERSION_PATTERN =
|
||||
/^v?(\d+)\.(\d+)\.(\d+)(?:-([0-9A-Za-z-]+(?:\.[0-9A-Za-z-]+)*))?(?:\+[0-9A-Za-z.-]+)?$/i;
|
||||
const NUMERIC_IDENTIFIER = /^\d+$/;
|
||||
|
||||
function parseVersion(value: string | null): ParsedVersion | null {
|
||||
const match = value?.trim().match(VERSION_PATTERN);
|
||||
if (!match) return null;
|
||||
return {
|
||||
core: [Number(match[1]), Number(match[2]), Number(match[3])],
|
||||
prerelease: match[4] ? match[4].split(".") : [],
|
||||
};
|
||||
}
|
||||
|
||||
function compareIdentifiers(left: string, right: string): number {
|
||||
const isLeftNumeric = NUMERIC_IDENTIFIER.test(left);
|
||||
const isRightNumeric = NUMERIC_IDENTIFIER.test(right);
|
||||
if (isLeftNumeric && isRightNumeric) return Number(left) - Number(right);
|
||||
if (isLeftNumeric) return -1;
|
||||
if (isRightNumeric) return 1;
|
||||
if (left < right) return -1;
|
||||
if (left > right) return 1;
|
||||
return 0;
|
||||
}
|
||||
|
||||
// Semver precedence: a prerelease sorts before its release (0.12.0-beta.1 < 0.12.0).
|
||||
function compareVersions(left: ParsedVersion, right: ParsedVersion): number {
|
||||
for (let index = 0; index < 3; index += 1) {
|
||||
const difference = left.core[index] - right.core[index];
|
||||
if (difference !== 0) return difference;
|
||||
}
|
||||
if (left.prerelease.length === 0 || right.prerelease.length === 0) {
|
||||
return right.prerelease.length - left.prerelease.length;
|
||||
}
|
||||
const sharedLength = Math.min(left.prerelease.length, right.prerelease.length);
|
||||
for (let index = 0; index < sharedLength; index += 1) {
|
||||
const difference = compareIdentifiers(left.prerelease[index], right.prerelease[index]);
|
||||
if (difference !== 0) return difference;
|
||||
}
|
||||
return left.prerelease.length - right.prerelease.length;
|
||||
}
|
||||
|
||||
function resolveUpdateAction(input: ResolveDaemonOutdatedCalloutInput): DaemonOutdatedUpdateAction {
|
||||
if (input.update.status === "updating") {
|
||||
return { label: input.update.phase, disabled: true };
|
||||
}
|
||||
return { label: i18n.t("daemonOutdated.update"), disabled: !input.isConnected };
|
||||
}
|
||||
|
||||
function formatVersion(version: ParsedVersion): string {
|
||||
const core = version.core.join(".");
|
||||
return version.prerelease.length > 0 ? `${core}-${version.prerelease.join(".")}` : core;
|
||||
}
|
||||
|
||||
// A daemon that keeps terminals across restarts does not keep them across a Paseo Desktop update
|
||||
// on Windows, which closes them. server_info does not name the host's platform, so the line says
|
||||
// both.
|
||||
function resolveTerminalsLine(input: ResolveDaemonOutdatedCalloutInput): string {
|
||||
if (!input.terminalsSurviveRestart) return i18n.t("daemonOutdated.terminalsClose");
|
||||
if (input.desktopManaged) return i18n.t("daemonOutdated.desktopUpdateTerminals");
|
||||
return i18n.t("daemonOutdated.terminalsStayOpen");
|
||||
}
|
||||
|
||||
function resolveDescription(
|
||||
input: ResolveDaemonOutdatedCalloutInput,
|
||||
versions: { daemon: ParsedVersion; app: ParsedVersion },
|
||||
): string[] {
|
||||
if (input.update.status === "failed") return [input.update.message];
|
||||
|
||||
const lines = [
|
||||
i18n.t("daemonOutdated.versions", {
|
||||
host: input.hostLabel,
|
||||
daemonVersion: `v${formatVersion(versions.daemon)}`,
|
||||
appVersion: `v${formatVersion(versions.app)}`,
|
||||
}),
|
||||
];
|
||||
if (input.desktopManaged) {
|
||||
lines.push(i18n.t("daemonOutdated.desktopManaged"));
|
||||
} else if (!input.supportsSelfUpdate) {
|
||||
lines.push(i18n.t("daemonOutdated.selfUpdateUnsupported"));
|
||||
}
|
||||
lines.push(resolveTerminalsLine(input));
|
||||
return lines;
|
||||
}
|
||||
|
||||
export function resolveDaemonOutdatedCallout(
|
||||
input: ResolveDaemonOutdatedCalloutInput,
|
||||
): DaemonOutdatedCalloutDescriptor | null {
|
||||
const app = parseVersion(input.appVersion);
|
||||
const daemon = parseVersion(input.daemonVersion);
|
||||
if (!app || !daemon) return null;
|
||||
if (compareVersions(daemon, app) >= 0) return null;
|
||||
|
||||
// The update RPC refuses desktop-managed daemons; those update with Paseo Desktop on that computer.
|
||||
const canSelfUpdate = input.supportsSelfUpdate && !input.desktopManaged;
|
||||
const isFailed = input.update.status === "failed";
|
||||
|
||||
return {
|
||||
id: "daemon-outdated",
|
||||
dismissalKey: `daemon-outdated:${input.serverId}:${formatVersion(daemon)}`,
|
||||
priority: 250,
|
||||
title: isFailed ? i18n.t("daemonOutdated.updateFailedTitle") : i18n.t("daemonOutdated.title"),
|
||||
description: resolveDescription(input, { daemon, app }),
|
||||
variant: isFailed ? "error" : "default",
|
||||
updateAction: canSelfUpdate ? resolveUpdateAction(input) : null,
|
||||
testID: "daemon-outdated-callout",
|
||||
};
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export * from "./sidebar-callout-slot.native";
|
||||
@@ -1,3 +0,0 @@
|
||||
export function SidebarCalloutSlot() {
|
||||
return null;
|
||||
}
|
||||
@@ -91,7 +91,7 @@ describe("SidebarCalloutSlot", () => {
|
||||
root?.render(
|
||||
<SidebarCalloutProvider>
|
||||
<RegisterCallout />
|
||||
<SidebarCalloutSlot />
|
||||
<SidebarCalloutSlot nativeOnly={false} />
|
||||
</SidebarCalloutProvider>,
|
||||
);
|
||||
await Promise.resolve();
|
||||
@@ -105,7 +105,7 @@ describe("SidebarCalloutSlot", () => {
|
||||
await act(async () => {
|
||||
root?.render(
|
||||
<SidebarCalloutProvider>
|
||||
<SidebarCalloutSlot />
|
||||
<SidebarCalloutSlot nativeOnly={false} />
|
||||
</SidebarCalloutProvider>,
|
||||
);
|
||||
await Promise.resolve();
|
||||
|
||||
@@ -2,10 +2,14 @@ import { View } from "react-native";
|
||||
import { StyleSheet } from "react-native-unistyles";
|
||||
import { SidebarCalloutViewport } from "@/contexts/sidebar-callout-context";
|
||||
|
||||
export function SidebarCalloutSlot() {
|
||||
/**
|
||||
* `nativeOnly` limits the slot to callouts marked `native`. Native apps and every compact
|
||||
* sidebar pass it: the other callouts are about the desktop app.
|
||||
*/
|
||||
export function SidebarCalloutSlot({ nativeOnly }: { nativeOnly: boolean }) {
|
||||
return (
|
||||
<View style={styles.slot} collapsable={false}>
|
||||
<SidebarCalloutViewport />
|
||||
<SidebarCalloutViewport nativeOnly={nativeOnly} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||