Ramp Glance

A coding agent in your Chrome side panel, connected directly to your local project.

Screencast.from.2026-08-14.16-11-40.webm

_{A demo of Ramp Glance}

Ramp Glance puts a persistent Pi coding session beside the page you are building. Ask it to inspect, explain, or change your project without switching away from the browser. Responses, reasoning, and tool activity stream into the side panel as Pi works.

This project focuses on the Chrome extension experience. A small local bridge connects the extension to Pi and gives the agent access to one explicitly configured project directory.

What It Does

Ramp Glance turns Chrome's persistent side panel into a workspace for making changes to a local web project.

• Sends your request and the active tab URL to Pi
• Streams assistant responses, available reasoning, and tool activity
• Keeps multiple persistent Pi conversations in the side panel
• Queues additional requests while a thread is working
• Runs separate threads independently
• Restricts every session to one configured project directory
• Communicates through a loopback-only local bridge

Pi edits the source files while your project's existing development server handles hot reload. Ramp Glance does not start, stop, or reload the application for you.

Inspiration

Ramp Glance was inspired by the workflow and visual language of Ramp Inspect. This is an independent project focused only on bringing that browser-side coding experience to a Chrome extension. It is not affiliated with or endorsed by Ramp.

Quick Start

Requirements

• Node.js 22.19 or newer
• npm 10 or newer
• Google Chrome 114 or newer
• A Pi-supported model and provider

Pi uses its normal configuration directory (~/.pi/agent unless PI_CODING_AGENT_DIR overrides it). Run pi, then use /login and /model, or provide a supported provider API key before starting the bridge.

Install and build

npm install
npm run build

Open chrome://extensions, enable Developer mode, choose Load unpacked, and select apps/extension/dist. Copy the extension ID shown by Chrome.

Start the bridge

Set the project Pi is allowed to edit and provide the extension ID you copied:

export LOCAL_PI_PROJECT_DIR=/absolute/path/to/your/web-project
export LOCAL_PI_EXTENSION_IDS=abcdefghijklmnopabcdefghijklmnop

npm run start:bridge

Keep the web project's own development server running separately. Click the Ramp Glance extension action to open the side panel and submit your first request.

After changing extension source, rebuild it with npm run build:extension and click Reload on its card in chrome://extensions.

For browser UI development without packaging the extension, run these in separate terminals:

npm run dev:bridge
npm run dev:extension

Configuration

Variable	Default	Description
LOCAL_PI_PROJECT_DIR	Local development path	Absolute path to the only project directory Pi may access. Set this explicitly.
LOCAL_PI_BRIDGE_PORT	3210	Port used by the loopback bridge.
LOCAL_PI_EXTENSION_IDS	None	Comma-separated Chrome extension IDs allowed to call the bridge. Required for the packaged extension.
LOCAL_PI_ALLOWED_ORIGINS	http://127.0.0.1:5173,http://localhost:5173	Comma-separated browser origins allowed during Vite development.
VITE_LOCAL_PI_BRIDGE_URL	http://127.0.0.1:3210	Bridge URL embedded in the extension build. Only HTTP loopback URLs are accepted.
PI_CODING_AGENT_DIR	~/.pi/agent	Optional override for Pi credentials, settings, and sessions.

If you change the bridge port, use the same URL when building the extension:

VITE_LOCAL_PI_BRIDGE_URL=http://127.0.0.1:4321 npm run build:extension
LOCAL_PI_BRIDGE_PORT=4321 npm run start:bridge

The bridge always binds to 127.0.0.1; it cannot be exposed on the LAN through configuration. The extension requests only sidePanel, storage, and tabs, plus HTTP access to 127.0.0.1 and localhost.

Architecture

Chrome tab + Ramp Glance side panel
              |
              | HTTP + Server-Sent Events on 127.0.0.1
              v
        Local Node bridge
              |
              | Pi TypeScript SDK
              v
        Pi coding agent
              |
              v
   Configured local project directory

• apps/extension contains the Manifest V3 React side panel, thread history, active-tab context capture, and streaming conversation UI.
• apps/bridge embeds @earendil-works/pi-coding-agent, manages Pi sessions and per-thread queues, and streams normalized events over SSE.
• packages/protocol contains the shared request, response, history, execution, and event types used by both applications.

Pi remains the source of truth for complete conversation history. The extension stores only its lightweight thread index and active thread ID in chrome.storage.local.

See MANUAL_TESTING.md for the full production acceptance pass.