fa1f01ebbc feat(app): add fullscreen viewer for Mermaid diagrams on web (#4107)
* feat(app): add fullscreen viewer for Mermaid diagrams on web

Add a fullscreen action to the diagram toolbar that opens the diagram in
a modal ZoomableViewport with free zoom/pan, closable via the close
button, Escape, or clicking outside the diagram. The sandboxed iframe
runtime moves into a shared MermaidIframeRuntime so the inline host and
the fullscreen viewer drive the same renderer.

Fixes uncovered while verifying the feature end to end:

- The runtime measured the rendered SVG with getBoundingClientRect(),
  which depends on the iframe size the host derives from that very
  measurement. Each streaming re-render shrank the reported size by the
  diagram box padding, ratcheting diagrams down to a few pixels. Measure
  the viewBox instead, which is the diagram's own size, and let the SVG
  fill whatever frame the host provides.
- ZoomableViewport's root is flex: 1, so as a flex item its 0% basis
  overrode the inline diagram box height and the box collapsed, scaling
  the diagram tiny and clipping the toolbar unclickable. Size the box
  from its height and keep a minimum tall enough for the toolbar.
- react-native-web's Modal focus trap focuses the first descendant that
  takes focus, which was the diagram iframe; every keystroke then landed
  in the sandboxed frame and Escape never reached the window listener.
  Mark the presentational iframe inert and focus the viewer's content
  layer on mount.

Closes #4106

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* test(app): exercise Mermaid fullscreen interactions

Cover zoom, pan, outside-click dismissal, and streaming layout through the real browser path. Remove the mocked DOM test that duplicated those behaviors without exercising the viewport or iframe runtime.

---------

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
Co-authored-by: Mohamed Boudra <boudra.moha@gmail.com>
2026-09-02 16:10:26 +02:00
2026-09-02 01:57:25 +02:00
2026-08-27 14:25:31 +02:00
2026-09-02 02:07:34 +02:00
2026-09-02 02:07:34 +02:00
2026-08-27 14:25:31 +02:00
2026-08-27 14:25:31 +02:00

Paseo logo

Paseo

English · 简体中文 · 日本語 · 한국어

GitHub stars GitHub release X Discord Reddit

One interface for Claude Code, Codex, Copilot, OpenCode, and Pi agents.

Paseo app screenshot

Paseo mobile app

Run agents in parallel on your own machines. Ship from your phone or your desk.

  • Self-hosted: Agents run on your machine with your full dev environment. Use your tools, your configs, and your skills.
  • Multi-provider: Claude Code, Codex, Copilot, OpenCode, and Pi through the same interface. Pick the right model for each job.
  • Voice control: Dictate tasks or talk through problems in voice mode. Hands-free when you need it.
  • Cross-device: iOS, Android, desktop, web, and CLI. Start work at your desk, check in from your phone, script it from the terminal.
  • Privacy-first: Paseo doesn't have any telemetry, tracking, or forced log-ins.

Getting Started

Paseo runs a local server called the daemon that manages your coding agents. Clients like the desktop app, mobile app, web app, and CLI connect to it.

Prerequisites

You need at least one agent CLI installed and configured with your credentials:

Download it from paseo.sh/download or the GitHub releases page. Open the app and the daemon starts automatically. Nothing else to install.

To connect from your phone, open Settings → your host → Pair Device.

CLI / headless

Install the CLI and start Paseo:

npm install -g @getpaseo/cli
paseo

Paseo starts locally, then asks whether to enable the end-to-end encrypted relay for device pairing. If you decline, connect directly over TCP, Tailscale, or another VPN. This path is useful for servers and remote machines.

For full setup and configuration, see:

Docker

Run the Paseo daemon and self-hosted web UI in Docker:

docker run -d --name paseo \
  -p 6767:6767 \
  -e PASEO_PASSWORD=change-me \
  -v "$PWD/paseo-home:/home/paseo" \
  -v "$PWD:/workspace" \
  ghcr.io/getpaseo/paseo:latest

Open http://localhost:6767 after it starts. Extend the base image with the agent CLIs you use, then provide credentials through environment variables or the persistent /home/paseo volume. See the Docker documentation for full setup details.

CLI

Everything you can do in the app, you can do from the terminal.

paseo run --provider claude/opus-4.6 "implement user authentication"
paseo run --provider codex/gpt-5.5 --worktree feature-x "implement feature X"

paseo ls                           # list running agents
paseo attach abc123                # stream live output
paseo send abc123 "also add tests" # follow-up task

# run on a remote daemon; --cwd is a path on that host
paseo run --host workstation.local:6767 --cwd /workspace "run the full test suite"

See the full CLI reference for more.

TypeScript SDK

Build issue integrations, dashboards, and orchestration services with @getpaseo/client:

import { createPaseoClient } from "@getpaseo/client";

const client = createPaseoClient({ url: "ws://127.0.0.1:6767/ws" });
await client.connect();

const agent = await client.agents.create({
  config: { provider: "codex/gpt-5.5" },
  cwd: "/Users/me/dev/storefront",
  prompt: "Review the current diff and name the riskiest change.",
});

const result = await agent.waitForFinish();
console.log(result.lastMessage);

await client.close();

See the SDK quickstart, recipes, and API reference.

Skills

Skills teach your agent to use Paseo to orchestrate other agents.

npx skills add getpaseo/paseo

Then use them in any agent conversation:

  • /paseo-handoff — hand off work between agents. I use this to plan with Claude and then handoff to Codex to implement.
  • /paseo-advisor — spin up a single agent as an advisor for a second opinion, without delegating the work itself.
  • /paseo-committee — form a committee of two contrasting agents to step back, do root cause analysis, and produce a plan.

Development

Quick monorepo package map:

  • packages/server: Paseo daemon (agent process orchestration, WebSocket API, MCP server)
  • packages/app: Expo client (iOS, Android, web)
  • packages/cli: paseo CLI for daemon and agent workflows
  • packages/desktop: Electron desktop app
  • packages/relay: Relay transport and encryption used by the daemon and clients
  • packages/website: Marketing site and documentation (paseo.sh)

Common commands:

# run all local dev services
npm run dev

# run individual surfaces
npm run dev:server
npm run dev:app
npm run dev:desktop
npm run dev:website

# build the server stack
npm run build:server

# repo-wide checks
npm run typecheck

License

Apache-2.0

Languages
TypeScript 97.7%
JavaScript 1.7%
Shell 0.2%
Kotlin 0.1%