{clients.map((c) => (
{c.icon}
{c.name}
))}
E2E Encrypted Relay
or
Direct Connection
{hosts.map((h) => (
{h}
))}
{/* SVG curves */}
{/* Clients */}
{/* Spacer */}
{/* Hosts */}
);
}
function SelfHostedSection() {
return (
{clients.map((c, i) => (
{/* Spacer */}
{/* Center label */}
{ clientRefs.current[i] = el; }}
className="flex items-center gap-2 rounded-lg border border-white/10 bg-white/[0.03] px-4 py-2.5 text-sm backdrop-blur-sm"
>
{c.icon}
{c.name}
))}
E2E Encrypted Relay
or
Direct Connection
{hosts.map((h, i) => (
{ hostRefs.current[i] = el; }}
className="flex items-center gap-3 rounded-lg border border-white/10 bg-white/[0.03] px-4 py-2.5 text-sm backdrop-blur-sm"
>
{h}
))}
{shortcuts.map((s) => (
{s.action}
))}
{s.keys.map((k) => (
{k}
))}
{Array.from({ length: barCount }).map((_, i) => {
// Create a natural-looking waveform envelope — louder in center, quieter at edges
const center = barCount / 2;
const dist = Math.abs(i - center) / center;
const envelope = 1 - dist * dist; // quadratic falloff
const minH = 4;
const maxH = 56;
const baseH = minH + (maxH - minH) * envelope;
// Vary per-bar so it doesn't look uniform
const jitter = Math.sin(i * 2.3) * 0.3 + Math.cos(i * 1.7) * 0.2;
const h = Math.max(minH, baseH * (0.5 + 0.5 * Math.abs(jitter + Math.sin(i * 0.8))));
return (
);
})}
);
}
const USER_WORDS = "Refactor the auth middleware to use the new session store, then run the test suite".split(" ");
const RESPONSE_WORDS = "I'll update the auth middleware to use SessionStore instead of the legacy cookie-based approach. Let me refactor the middleware and update the tests.".split(" ");
const DICTATION_LAG = 2;
const RESPONSE_LAG = 3;
const WORD_APPEAR_MS = 150;
const RESPONSE_WORD_MS = 60;
const PHASE_GAP_MS = 800;
const LOOP_PAUSE_MS = 3000;
type VoicePhase = "dictation" | "dictation-flush" | "pause" | "response" | "response-flush" | "done";
function useVoiceConversation() {
const [phase, setPhase] = React.useState
{/* Invisible full text to reserve height at any viewport width */}
);
}
function LocalVoiceSection() {
const { dictationWordIndex, responseWordIndex, showResponse } = useVoiceConversation();
return (
{words.join(" ")}
{/* Visible streaming text overlaid */}{words.map((word, i) => { if (i >= wordIndex) return null; const confirmed = i < wordIndex - confirmLag; return ( {word}{" "} ); })}
{/* Waveform area */}
Supports
{number}
);
}
const bashKeywords = new Set([
"while",
"do",
"done",
"if",
"then",
"fi",
"else",
"break",
"true",
"false",
]);
const bashCommands = new Set(["paseo", "echo", "jq"]);
function highlightBash(code: string): React.ReactNode {
const tokens: React.ReactNode[] = [];
let i = 0;
let key = 0;
while (i < code.length) {
if (code[i] === "#" && (i === 0 || /[\s(]/.test(code[i - 1]))) {
const end = code.indexOf("\n", i);
const comment = end === -1 ? code.slice(i) : code.slice(i, end);
tokens.push(
{comment}
,
);
i += comment.length;
continue;
}
if (code[i] === '"') {
let j = i + 1;
while (j < code.length && code[j] !== '"') {
if (code[j] === "\\") j++;
j++;
}
const str = code.slice(i, j + 1);
tokens.push(
{str}
,
);
i = j + 1;
continue;
}
if (code[i] === "'") {
let j = i + 1;
while (j < code.length && code[j] !== "'") j++;
const str = code.slice(i, j + 1);
tokens.push(
{str}
,
);
i = j + 1;
continue;
}
if (code[i] === "$") {
if (code[i + 1] === "(") {
tokens.push(
$(
,
);
i += 2;
continue;
}
let j = i + 1;
while (j < code.length && /\w/.test(code[j])) j++;
tokens.push(
{code.slice(i, j)}
,
);
i = j;
continue;
}
if (
code[i] === "-" &&
(i === 0 || /\s/.test(code[i - 1])) &&
i + 1 < code.length &&
/[\w-]/.test(code[i + 1])
) {
let j = i;
if (code[j + 1] === "-") j++;
j++;
while (j < code.length && /[\w-]/.test(code[j])) j++;
tokens.push(
{code.slice(i, j)}
,
);
i = j;
continue;
}
if (/[a-zA-Z_]/.test(code[i])) {
let j = i;
while (j < code.length && /\w/.test(code[j])) j++;
const word = code.slice(i, j);
if (bashKeywords.has(word)) {
tokens.push(
{word}
,
);
} else if (bashCommands.has(word)) {
tokens.push(
{word}
,
);
} else {
tokens.push(word);
key++;
}
i = j;
continue;
}
if (code[i] === "|" || (code[i] === "&" && code[i + 1] === "&")) {
const op = code[i] === "|" ? "|" : "&&";
tokens.push(
{op}
,
);
i += op.length;
continue;
}
if (code[i] === "\\") {
tokens.push(
\
,
);
i++;
continue;
}
if (code[i] === ")") {
tokens.push(
)
,
);
i++;
continue;
}
tokens.push(code[i]);
i++;
}
return <>{tokens};
}
function CLICodeBlock({ children }: { children: string }) {
const [copied, setCopied] = React.useState(false);
function handleCopy() {
navigator.clipboard.writeText(children);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
}
return (
{children}
{highlightBash(children)}
{/* Arrow + text */}
{/* Phone trio — side phones are absolute, start behind center, slide outward with perspective rotation */}
);
}
function CLISection() {
const [activeIndex, setActiveIndex] = React.useState(0);
const active = cliExamples[activeIndex];
return (
When you want to step away from your desk,
you can.
The native mobile app has full feature parity with desktop.
{/* Left phone — rotated to face inward */}
{/* Center phone */}
{/* Right phone — rotated to face inward */}
{cliExamples.map((example, i) => (
))}
FAQ
npm install -g @getpaseo/cli && paseo and
use the CLI, web app, or mobile app to connect. The desktop app just bundles the daemon
with a UI.
We can't make promises on behalf of providers.
That said, Paseo launches the official first-party CLIs (Claude Code, Codex, OpenCode) as subprocesses. It doesn't extract tokens or call inference APIs directly. From the provider's perspective, usage through Paseo is indistinguishable from running the CLI yourself.
I've been using Paseo with all providers for months without issue.
I built Paseo because I wanted better tools for coding agents on my own setup. It's an independent open source project, built around freedom of choice and real workflows. If you like what I'm building, consider becoming a supporter.
- Mo
+ − {question}
{children}