Archived
220 lines
11 KiB
HTML
220 lines
11 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Remote-first Pi web UI — PI WEB</title>
|
|
<meta
|
|
name="description"
|
|
content="Why PI WEB keeps Pi Coding Agent sessions running outside your device while any browser becomes a web UI for supervision and review."
|
|
/>
|
|
<link rel="canonical" href="https://pi-web.dev/remote-first" />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:site_name" content="PI WEB" />
|
|
<meta property="og:title" content="Remote-first Pi web UI — PI WEB" />
|
|
<meta
|
|
property="og:description"
|
|
content="Run Pi Coding Agent where work can persist, then supervise sessions from any device with PI WEB."
|
|
/>
|
|
<meta property="og:url" content="https://pi-web.dev/remote-first" />
|
|
<meta property="og:image" content="https://pi-web.dev/assets/pi-web-banner.png" />
|
|
<meta property="og:image:alt" content="PI WEB browser UI for persistent Pi Coding Agent sessions" />
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:title" content="Remote-first Pi web UI — PI WEB" />
|
|
<meta
|
|
name="twitter:description"
|
|
content="Run Pi Coding Agent where work can persist, then supervise sessions from any device with PI WEB."
|
|
/>
|
|
<meta name="twitter:image" content="https://pi-web.dev/assets/pi-web-banner.png" />
|
|
<link rel="icon" type="image/svg+xml" href="assets/favicon.svg" />
|
|
<script>
|
|
(() => {
|
|
const theme = window.localStorage.getItem("pi-web-theme");
|
|
if (theme === "light" || theme === "dark") document.documentElement.dataset.theme = theme;
|
|
})();
|
|
</script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700;800&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
<link rel="stylesheet" href="styles.css" />
|
|
</head>
|
|
<body>
|
|
<header class="site-header">
|
|
<nav class="container nav" aria-label="Main navigation">
|
|
<a class="brand" href="./" aria-label="PI WEB home">PI WEB</a>
|
|
<div class="nav-links">
|
|
<div class="nav-pages">
|
|
<a href="remote-first" aria-current="page">Remote-first</a>
|
|
<a href="machines">Fleet</a>
|
|
<a href="install">Install</a>
|
|
<a href="config">Config</a>
|
|
<a href="plugins">Plugins</a>
|
|
<a href="faq">FAQ</a>
|
|
</div>
|
|
<div class="nav-actions">
|
|
<a class="github-link" href="https://github.com/jmfederico/pi-web" aria-label="PI WEB on GitHub">
|
|
<svg class="github-icon" viewBox="0 0 16 16" aria-hidden="true">
|
|
<path
|
|
fill="currentColor"
|
|
d="M8 0C3.58 0 0 3.67 0 8.2c0 3.63 2.29 6.7 5.47 7.79.4.08.55-.18.55-.4 0-.2-.01-.85-.01-1.55-2.01.38-2.53-.5-2.69-.96-.09-.24-.48-.96-.82-1.16-.28-.16-.68-.56-.01-.57.63-.01 1.08.59 1.23.84.72 1.24 1.87.89 2.33.68.07-.53.28-.89.51-1.09-1.78-.21-3.64-.91-3.64-4.04 0-.89.31-1.62.82-2.2-.08-.2-.36-1.03.08-2.16 0 0 .67-.22 2.2.84A7.4 7.4 0 0 1 8 3.94c.68 0 1.36.09 2 .28 1.53-1.06 2.2-.84 2.2-.84.44 1.13.16 1.96.08 2.16.51.58.82 1.31.82 2.2 0 3.14-1.87 3.83-3.65 4.04.29.26.54.76.54 1.53 0 1.1-.01 1.99-.01 2.27 0 .22.15.49.55.4A8.12 8.12 0 0 0 16 8.2C16 3.67 12.42 0 8 0Z"
|
|
/>
|
|
</svg>
|
|
<span>GitHub</span>
|
|
</a>
|
|
<button class="theme-toggle" type="button" data-theme-toggle aria-label="Toggle light and dark theme">
|
|
<span data-theme-icon aria-hidden="true">◐</span>
|
|
<span data-theme-label>Theme</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="page-hero">
|
|
<div class="container">
|
|
<p class="eyebrow"><span class="pulse"></span> Remote-first development</p>
|
|
<h1>Your laptop is a window, not the workstation.</h1>
|
|
<p>
|
|
PI WEB is built around a simple shift: AI-driven development should live where the work can persist, not
|
|
where your current keyboard happens to be. You supervise the work; you do not have to host it.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section compact">
|
|
<div class="container doc-layout">
|
|
<aside class="toc" aria-label="Remote-first page contents">
|
|
<strong>On this page</strong>
|
|
<a href="#why-local-blocks">The old assumption</a>
|
|
<a href="#persistence-first">Persistence first-class</a>
|
|
<a href="#what-remote-unlocks">What remote unlocks</a>
|
|
<a href="#browser-control">Browser as web UI</a>
|
|
<a href="#human-role">The human role</a>
|
|
<a href="#recommended-shape">Recommended shape</a>
|
|
</aside>
|
|
|
|
<div class="doc-content">
|
|
<section id="why-local-blocks">
|
|
<h2>Developer tools assumed the work lived locally</h2>
|
|
<p>
|
|
Editors and terminals were built around a simple assumption: the work lives with you, on your device,
|
|
inside your session. That made sense when one human drove every keystroke from one machine.
|
|
</p>
|
|
<p>
|
|
AI agents break that assumption. The work can outlive the laptop session, and agents need stable
|
|
repositories, shells, tools, secrets, build caches, and time to keep running.
|
|
</p>
|
|
<p>
|
|
When all of that is tied to a laptop, the laptop becomes the bottleneck: close the lid, change devices,
|
|
lose network, reboot, or run out of battery, and the work environment is interrupted.
|
|
</p>
|
|
</section>
|
|
|
|
<section id="persistence-first">
|
|
<h2>Persistence should not be a workaround</h2>
|
|
<p>
|
|
Terminals are ephemeral by default. You can patch around that with tmux, screen, background processes,
|
|
and remote shells, but persistence is still something you bolt on after the fact.
|
|
</p>
|
|
<p>
|
|
PI WEB treats persistence as the foundation. Agent sessions live in a long-running runtime, workspaces
|
|
stay on the machine that runs the tools, and browser disconnects do not end the work.
|
|
</p>
|
|
<div class="callout manifesto-callout">
|
|
If AI is doing the work, the work should not be tied to your laptop.
|
|
</div>
|
|
</section>
|
|
|
|
<section id="what-remote-unlocks">
|
|
<h2>Remote AI-driven development unlocks persistent work</h2>
|
|
<p>
|
|
Run the environment on a machine that stays on: a dev box, home server, cloud VM, workstation, or private
|
|
network host. Keep agents and worktrees there. Connect from whatever screen you have.
|
|
</p>
|
|
<div class="cards">
|
|
<article class="card">
|
|
<div class="card-icon">↻</div>
|
|
<h3>Always available</h3>
|
|
<p>Sessions keep existing after browser disconnects and can be resumed later.</p>
|
|
</article>
|
|
<article class="card">
|
|
<div class="card-icon">▦</div>
|
|
<h3>Parallel by default</h3>
|
|
<p>Use worktrees and persistent sessions to let multiple agent streams progress independently.</p>
|
|
</article>
|
|
<article class="card">
|
|
<div class="card-icon">⌁</div>
|
|
<h3>One real environment</h3>
|
|
<p>Dependencies, caches, credentials, and repository state stay where the agents run.</p>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="browser-control">
|
|
<h2>The browser becomes your Pi web UI</h2>
|
|
<p>
|
|
Your device should not have to be the editor, terminal, build server, and agent runtime. In PI WEB, the
|
|
browser is the cockpit: supervise sessions, redirect agents, inspect transcripts, and review progress
|
|
while the development environment stays remote and stable. Under the hood, PI WEB still coordinates the
|
|
running work like a browser-based control plane.
|
|
</p>
|
|
<p>
|
|
Laptop, phone, tablet, desktop: they are just windows into the same running work. You remain in control,
|
|
but you are no longer the machine carrying the work.
|
|
</p>
|
|
</section>
|
|
|
|
<section id="human-role">
|
|
<h2>The human role becomes direction, judgment, and review</h2>
|
|
<p>
|
|
Remote-first does not remove the human. It moves the human away from carrying the whole development
|
|
environment and toward higher-leverage work: choosing direction, setting constraints, reviewing changes,
|
|
and deciding what ships.
|
|
</p>
|
|
<p>
|
|
You do not carry the work. You guide it.
|
|
</p>
|
|
</section>
|
|
|
|
<section id="recommended-shape">
|
|
<h2>Recommended shape</h2>
|
|
<p>
|
|
PI WEB works locally, but it shines on a machine that stays on and is reachable through a private path:
|
|
SSH tunnel, VPN, private LAN, or an authenticated reverse proxy.
|
|
</p>
|
|
<div class="callout warning">
|
|
Use the laptop when you want convenience. Use a server or always-on workstation when you want agents to
|
|
keep working even when the laptop is gone.
|
|
</div>
|
|
<div class="doc-actions">
|
|
<a class="button primary" href="install">Install PI WEB</a>
|
|
<a class="button" href="faq#laptop-or-server">Laptop or server FAQ</a>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="site-footer">
|
|
<div class="container footer-inner">
|
|
<span>PI WEB · remote-first control for persistent AI agents.</span>
|
|
<div class="footer-links">
|
|
<a href="./">Home</a>
|
|
<a href="machines">Fleet</a>
|
|
<a href="install">Install</a>
|
|
<a href="config">Config</a>
|
|
<a href="plugins">Plugins</a>
|
|
<a href="faq">FAQ</a>
|
|
<a href="https://github.com/jmfederico/pi-web">GitHub</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
<script src="site.js"></script>
|
|
</body>
|
|
</html>
|