jb/paseo
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(pairing): QR offer + app scanner

Browse Source
This commit is contained in:
Mohamed Boudra
2026-01-22 09:24:08 +07:00
parent ca8d09434b
commit 7157a43a74
15 changed files with 636 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/app.config.js
+8
View File
@@ -42,6 +42,8 @@ export default {
"RECORD_AUDIO",
"android.permission.RECORD_AUDIO",
"android.permission.MODIFY_AUDIO_SETTINGS",
"CAMERA",
"android.permission.CAMERA",
],
// Base package - Gradle product flavors override this per variant
package: "com.moboudra.paseo",
@@ -52,6 +54,12 @@ export default {
},
plugins: [
"expo-router",
[
"expo-camera",
{
cameraPermission: "Allow $(PRODUCT_NAME) to access your camera to scan pairing QR codes.",
},
],
[
"expo-splash-screen",
{
packages/app/e2e/fixtures.ts
+9 -4
View File
@@ -36,6 +36,7 @@ test.beforeEach(async ({ page }) => {
});
const nowIso = new Date().toISOString();
const seedNonce = Math.random().toString(36).slice(2);
const testDaemon = {
id: 'e2e-test-daemon',
label: 'localhost',
@@ -58,24 +59,28 @@ test.beforeEach(async ({ page }) => {
};
await page.addInitScript(
({ daemon, preferences }) => {
({ daemon, preferences, seedNonce }) => {
// `addInitScript` runs on every navigation (including reloads). Some tests intentionally
// override storage and reload; they can opt out of seeding for the *next* navigation by
// setting this flag before the reload.
const disableOnceKey = '@paseo:e2e-disable-default-seed-once';
if (localStorage.getItem(disableOnceKey)) {
const disableValue = localStorage.getItem(disableOnceKey);
if (disableValue) {
localStorage.removeItem(disableOnceKey);
return;
if (disableValue === seedNonce) {
return;
}
}
localStorage.setItem('@paseo:e2e', '1');
localStorage.setItem('@paseo:e2e-seed-nonce', seedNonce);
// Hard-reset anything that could point to a developer's real daemon.
localStorage.setItem('@paseo:daemon-registry', JSON.stringify([daemon]));
localStorage.removeItem('@paseo:settings');
localStorage.setItem('@paseo:create-agent-preferences', JSON.stringify(preferences));
},
{ daemon: testDaemon, preferences: createAgentPreferences }
{ daemon: testDaemon, preferences: createAgentPreferences, seedNonce }
);
});
packages/app/e2e/helpers/app.ts
+2 -1
View File
@@ -190,7 +190,8 @@ export const ensureHostSelected = async (page: Page) => {
prefs.serverId = daemonId;
localStorage.setItem('@paseo:create-agent-preferences', JSON.stringify(prefs));
// Prevent the fixture's init-script from overwriting the corrected prefs on reload.
localStorage.setItem('@paseo:e2e-disable-default-seed-once', '1');
const nonce = localStorage.getItem('@paseo:e2e-seed-nonce') ?? '1';
localStorage.setItem('@paseo:e2e-disable-default-seed-once', nonce);
return { ok: true } as const;
});
packages/app/e2e/host-removal.spec.ts
+32 -7
View File
@@ -20,14 +20,24 @@ test('host removal removes the host from UI and persists after reload', async ({
updatedAt: nowIso,
};
const seededTestDaemon = {
id: 'e2e-test-daemon',
label: 'localhost',
endpoints: [`127.0.0.1:${daemonPort}`],
relay: null,
metadata: null,
createdAt: nowIso,
updatedAt: nowIso,
};
const seedOnceKey = `@paseo:e2e-host-removal-seeded:${Math.random().toString(36).slice(2)}`;
// Add a second host once (fixtures seed the primary host on every navigation).
await page.addInitScript(
({ daemon }) => {
const seedOnceKey = '@paseo:e2e-extra-daemon-seeded-once';
({ daemon, seededTestDaemon, seedOnceKey }) => {
if (localStorage.getItem(seedOnceKey)) {
return;
}
localStorage.setItem(seedOnceKey, '1');
const raw = localStorage.getItem('@paseo:daemon-registry');
let parsed: any[] = [];
@@ -38,10 +48,23 @@ test('host removal removes the host from UI and persists after reload', async ({
parsed = [];
}
}
const next = Array.isArray(parsed) ? [...parsed, daemon] : [daemon];
const list = Array.isArray(parsed) ? parsed : [];
localStorage.setItem(seedOnceKey, '1');
const next = [...list];
const hasSeeded = next.some((entry: any) => entry && entry.id === seededTestDaemon.id);
if (!hasSeeded) {
next.push(seededTestDaemon);
}
const alreadyPresent = next.some((entry: any) => entry && entry.id === daemon.id);
if (!alreadyPresent) {
next.push(daemon);
}
localStorage.setItem('@paseo:daemon-registry', JSON.stringify(next));
},
{ daemon: extraDaemon }
{ daemon: extraDaemon, seededTestDaemon, seedOnceKey }
);
await page.goto('/settings');
@@ -72,8 +95,10 @@ test('host removal removes the host from UI and persists after reload', async ({
);
// Prevent the fixture from overwriting storage on reload; verify persistence.
await page.evaluate(() => localStorage.setItem('@paseo:e2e-disable-default-seed-once', '1'));
await page.evaluate(() => {
const nonce = localStorage.getItem('@paseo:e2e-seed-nonce') ?? '1';
localStorage.setItem('@paseo:e2e-disable-default-seed-once', nonce);
});
await page.reload();
await expect(page.getByText(extraEndpoint, { exact: true })).toHaveCount(0);
});
packages/app/e2e/host-selection.spec.ts
+2 -1
View File
@@ -42,7 +42,8 @@ test('new agent respects serverId in the URL', async ({ page }) => {
await page.goto('/settings');
await page.evaluate(
({ daemon, preferences }) => {
localStorage.setItem('@paseo:e2e-disable-default-seed-once', '1');
const nonce = localStorage.getItem('@paseo:e2e-seed-nonce') ?? '1';
localStorage.setItem('@paseo:e2e-disable-default-seed-once', nonce);
localStorage.setItem('@paseo:daemon-registry', JSON.stringify([daemon]));
localStorage.setItem('@paseo:create-agent-preferences', JSON.stringify(preferences));
localStorage.removeItem('@paseo:settings');
packages/app/e2e/pairing-offer-parsing.spec.ts
+3 -1
View File
@@ -18,7 +18,8 @@ test('pairing flow accepts #offer=ConnectionOfferV1 and stores sessionId + endpo
// Override the default fixture seeding for this test.
await page.goto('/settings');
await page.evaluate(() => {
localStorage.setItem('@paseo:e2e-disable-default-seed-once', '1');
const nonce = localStorage.getItem('@paseo:e2e-seed-nonce') ?? '1';
localStorage.setItem('@paseo:e2e-disable-default-seed-once', nonce);
localStorage.setItem('@paseo:daemon-registry', JSON.stringify([]));
localStorage.removeItem('@paseo:settings');
});
@@ -35,6 +36,7 @@ test('pairing flow accepts #offer=ConnectionOfferV1 and stores sessionId + endpo
await page.getByText('+ Add Host', { exact: true }).click();
await page.getByText('Pair', { exact: true }).click();
await page.getByText('Paste link', { exact: true }).click();
const input = page.getByPlaceholder('https://app.paseo.sh/#offer=...');
await expect(input).toBeVisible();
packages/app/e2e/relay-fallback-connect.spec.ts
+2 -1
View File
@@ -23,7 +23,8 @@ test('connects via relay when direct endpoints fail', async ({ page }) => {
// Override the default fixture seeding for this test.
await page.goto('/settings');
await page.evaluate((daemon) => {
localStorage.setItem('@paseo:e2e-disable-default-seed-once', '1');
const nonce = localStorage.getItem('@paseo:e2e-seed-nonce') ?? '1';
localStorage.setItem('@paseo:e2e-disable-default-seed-once', nonce);
localStorage.setItem('@paseo:daemon-registry', JSON.stringify([daemon]));
localStorage.removeItem('@paseo:settings');
}, host);
packages/app/package.json
+1
View File
@@ -42,6 +42,7 @@
"expo-audio": "~1.0.13",
"expo-av": "^16.0.7",
"expo-build-properties": "^1.0.9",
"expo-camera": "~17.0.10",
"expo-clipboard": "~8.0.7",
"expo-constants": "~18.0.9",
"expo-crypto": "^15.0.8",
packages/app/src/app/_layout.tsx
+1
View File
@@ -330,6 +330,7 @@ export default function RootLayout() {
<Stack.Screen name="agent/[serverId]/[agentId]" options={{ gestureEnabled: false }} />
<Stack.Screen name="settings" />
<Stack.Screen name="audio-test" />
<Stack.Screen name="pair-scan" />
</Stack>
</AppWithSidebar>
</HorizontalScrollProvider>
packages/app/src/app/pair-scan.tsx
+250
View File
@@ -0,0 +1,250 @@
import { useCallback, useEffect, useRef, useState } from "react";
import { Alert, Platform, Pressable, Text, View } from "react-native";
import { useRouter } from "expo-router";
import { StyleSheet, useUnistyles } from "react-native-unistyles";
import { CameraView, useCameraPermissions } from "expo-camera";
import type { BarcodeScanningResult } from "expo-camera";
import { useDaemonRegistry } from "@/contexts/daemon-registry-context";
const styles = StyleSheet.create((theme) => ({
container: {
flex: 1,
backgroundColor: theme.colors.surface0,
},
header: {
paddingHorizontal: theme.spacing[6],
paddingTop: theme.spacing[6],
paddingBottom: theme.spacing[4],
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
},
headerTitle: {
color: theme.colors.foreground,
fontSize: theme.fontSize.lg,
fontWeight: theme.fontWeight.semibold,
},
headerButtonText: {
color: theme.colors.palette.blue[400],
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.medium,
},
body: {
flex: 1,
paddingHorizontal: theme.spacing[6],
paddingBottom: theme.spacing[6],
},
cameraWrap: {
flex: 1,
overflow: "hidden",
borderRadius: theme.borderRadius.xl,
backgroundColor: theme.colors.surface2,
},
camera: {
flex: 1,
},
overlay: {
...StyleSheet.absoluteFillObject,
justifyContent: "center",
alignItems: "center",
},
scanFrame: {
width: 260,
height: 260,
},
corner: {
position: "absolute",
width: 36,
height: 36,
borderColor: theme.colors.palette.blue[400],
},
cornerTL: {
left: 0,
top: 0,
borderLeftWidth: 4,
borderTopWidth: 4,
borderTopLeftRadius: 12,
},
cornerTR: {
right: 0,
top: 0,
borderRightWidth: 4,
borderTopWidth: 4,
borderTopRightRadius: 12,
},
cornerBL: {
left: 0,
bottom: 0,
borderLeftWidth: 4,
borderBottomWidth: 4,
borderBottomLeftRadius: 12,
},
cornerBR: {
right: 0,
bottom: 0,
borderRightWidth: 4,
borderBottomWidth: 4,
borderBottomRightRadius: 12,
},
helperText: {
marginTop: theme.spacing[6],
color: theme.colors.foregroundMuted,
textAlign: "center",
fontSize: theme.fontSize.base,
},
permissionCard: {
marginTop: theme.spacing[6],
padding: theme.spacing[6],
borderRadius: theme.borderRadius.xl,
backgroundColor: theme.colors.surface2,
gap: theme.spacing[4],
},
permissionTitle: {
color: theme.colors.foreground,
fontSize: theme.fontSize.lg,
fontWeight: theme.fontWeight.semibold,
},
permissionBody: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.base,
},
permissionButton: {
alignSelf: "flex-start",
paddingHorizontal: theme.spacing[6],
paddingVertical: theme.spacing[3],
borderRadius: theme.borderRadius.lg,
backgroundColor: theme.colors.palette.blue[500],
},
permissionButtonText: {
color: theme.colors.palette.white,
fontWeight: theme.fontWeight.semibold,
},
}));
function extractOfferUrlFromScan(result: BarcodeScanningResult): string | null {
const raw = typeof result.data === "string" ? result.data.trim() : "";
if (!raw) return null;
if (raw.includes("#offer=")) return raw;
return null;
}
export default function PairScanScreen() {
const { theme } = useUnistyles();
const router = useRouter();
const { upsertDaemonFromOfferUrl } = useDaemonRegistry();
const [permission, requestPermission] = useCameraPermissions();
const [isPairing, setIsPairing] = useState(false);
const lastScannedRef = useRef<string | null>(null);
useEffect(() => {
if (Platform.OS === "web") return;
if (permission && permission.granted) return;
void requestPermission().catch(() => undefined);
}, [permission, requestPermission]);
const handleScan = useCallback(
async (result: BarcodeScanningResult) => {
if (isPairing) return;
const offerUrl = extractOfferUrlFromScan(result);
if (!offerUrl) return;
if (lastScannedRef.current === offerUrl) return;
lastScannedRef.current = offerUrl;
try {
setIsPairing(true);
await upsertDaemonFromOfferUrl(offerUrl);
router.replace("/settings");
} catch (error) {
lastScannedRef.current = null;
const message = error instanceof Error ? error.message : "Unable to pair host";
Alert.alert("Error", message);
} finally {
setIsPairing(false);
}
},
[isPairing, router, upsertDaemonFromOfferUrl]
);
if (Platform.OS === "web") {
return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.headerTitle}>Scan QR</Text>
<Pressable onPress={() => router.back()}>
<Text style={styles.headerButtonText}>Close</Text>
</Pressable>
</View>
<View style={styles.body}>
<View style={styles.permissionCard}>
<Text style={styles.permissionTitle}>Not available on web</Text>
<Text style={styles.permissionBody}>
QR scanning isn’t supported in the web build. Use “Paste link” instead.
</Text>
<Pressable style={styles.permissionButton} onPress={() => router.replace("/settings")}>
<Text style={styles.permissionButtonText}>Back to Settings</Text>
</Pressable>
</View>
</View>
</View>
);
}
const granted = Boolean(permission?.granted);
return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.headerTitle}>Scan QR</Text>
<Pressable onPress={() => router.back()}>
<Text style={styles.headerButtonText}>Close</Text>
</Pressable>
</View>
<View style={styles.body}>
{!granted ? (
<View style={styles.permissionCard}>
<Text style={styles.permissionTitle}>Camera permission</Text>
<Text style={styles.permissionBody}>
Allow camera access to scan the pairing QR code from your daemon.
</Text>
<Pressable
style={styles.permissionButton}
onPress={() => void requestPermission()}
>
<Text style={styles.permissionButtonText}>Grant permission</Text>
</Pressable>
</View>
) : (
<View style={styles.cameraWrap}>
<CameraView
style={styles.camera}
facing="back"
barcodeScannerSettings={{ barcodeTypes: ["qr"] }}
onBarcodeScanned={handleScan}
/>
<View style={styles.overlay} pointerEvents="none">
<View style={styles.scanFrame}>
<View style={[styles.corner, styles.cornerTL]} />
<View style={[styles.corner, styles.cornerTR]} />
<View style={[styles.corner, styles.cornerBL]} />
<View style={[styles.corner, styles.cornerBR]} />
</View>
<Text style={styles.helperText}>
Point your camera at the pairing QR code.
</Text>
{isPairing ? (
<Text style={[styles.helperText, { color: theme.colors.foreground }]}>
Pairing…
</Text>
) : null}
</View>
</View>
)}
</View>
</View>
);
}
packages/app/src/app/settings.tsx
+53 -14
View File
@@ -392,6 +392,7 @@ export default function SettingsScreen() {
const { connectionStates, updateConnectionStatus } = useDaemonConnections();
const [isDaemonFormVisible, setIsDaemonFormVisible] = useState(false);
const [daemonFormMode, setDaemonFormMode] = useState<"choose" | "manual" | "pair">("choose");
const [pairSubMode, setPairSubMode] = useState<"choose" | "paste">("choose");
const [daemonForm, setDaemonForm] = useState<{
id: string | null;
label: string;
@@ -463,6 +464,7 @@ export default function SettingsScreen() {
const handleOpenDaemonForm = useCallback((profile?: DaemonProfile) => {
if (profile) {
setDaemonFormMode("manual");
setPairSubMode("choose");
setDaemonForm({
id: profile.id,
label: profile.label,
@@ -471,6 +473,7 @@ export default function SettingsScreen() {
});
} else {
setDaemonFormMode("choose");
setPairSubMode("choose");
setDaemonForm({ id: null, label: "", endpoint: "", offerUrl: "" });
}
setIsDaemonFormVisible(true);
@@ -479,6 +482,7 @@ export default function SettingsScreen() {
const handleCloseDaemonForm = useCallback(() => {
setIsDaemonFormVisible(false);
setDaemonFormMode("choose");
setPairSubMode("choose");
setDaemonForm({ id: null, label: "", endpoint: "", offerUrl: "" });
}, []);
@@ -521,6 +525,10 @@ export default function SettingsScreen() {
}
if (daemonFormMode === "pair") {
if (pairSubMode !== "paste") {
Alert.alert("Choose a method", "Select Scan QR or Paste link to pair.");
return;
}
const offer = daemonForm.offerUrl.trim();
if (!offer) {
Alert.alert("Offer required", "Paste the pairing link (…/#offer=...)");
@@ -541,7 +549,7 @@ export default function SettingsScreen() {
}
Alert.alert("Choose a method", "Select Pair or Manual to add a host.");
}, [daemonForm, daemonFormMode, addDaemon, updateDaemon, upsertDaemonFromOfferUrl, handleCloseDaemonForm]);
}, [daemonForm, daemonFormMode, pairSubMode, addDaemon, updateDaemon, upsertDaemonFromOfferUrl, handleCloseDaemonForm]);
const handleRemoveDaemon = useCallback(
(profile: DaemonProfile) => {
@@ -740,7 +748,10 @@ export default function SettingsScreen() {
<View style={styles.formActionsRow}>
<Pressable
style={[styles.formButton, styles.formButtonPrimary]}
onPress={() => setDaemonFormMode("pair")}
onPress={() => {
setDaemonFormMode("pair");
setPairSubMode("choose");
}}
>
<Text style={[styles.formButtonText, styles.formButtonPrimaryText]}>Pair</Text>
</Pressable>
@@ -771,17 +782,39 @@ export default function SettingsScreen() {
{daemonFormMode === "pair" ? (
<View style={styles.formField}>
<Text style={styles.label}>Pairing Link</Text>
<TextInput
style={[styles.input, styles.inputUrl]}
value={daemonForm.offerUrl}
onChangeText={(text) => setDaemonForm((prev) => ({ ...prev, offerUrl: text }))}
placeholder="https://app.paseo.sh/#offer=..."
placeholderTextColor={defaultTheme.colors.mutedForeground}
autoCapitalize="none"
autoCorrect={false}
keyboardType="url"
/>
<Text style={styles.label}>Pairing</Text>
<View style={styles.formActionsRow}>
<Pressable
style={[styles.formButton, styles.formButtonPrimary]}
onPress={() => {
handleCloseDaemonForm();
router.push("/pair-scan");
}}
>
<Text style={[styles.formButtonText, styles.formButtonPrimaryText]}>Scan QR</Text>
</Pressable>
<Pressable
style={[styles.formButton, styles.formButtonPrimary]}
onPress={() => setPairSubMode("paste")}
>
<Text style={[styles.formButtonText, styles.formButtonPrimaryText]}>Paste link</Text>
</Pressable>
</View>
{pairSubMode === "paste" ? (
<TextInput
style={[styles.input, styles.inputUrl, { marginTop: 12 }]}
value={daemonForm.offerUrl}
onChangeText={(text) => setDaemonForm((prev) => ({ ...prev, offerUrl: text }))}
placeholder="https://app.paseo.sh/#offer=..."
placeholderTextColor={defaultTheme.colors.mutedForeground}
autoCapitalize="none"
autoCorrect={false}
keyboardType="url"
/>
) : null}
</View>
) : null}
@@ -790,7 +823,13 @@ export default function SettingsScreen() {
<Text style={styles.formButtonText}>Cancel</Text>
</Pressable>
{!daemonForm.id && daemonFormMode !== "choose" ? (
<Pressable style={styles.formButton} onPress={() => setDaemonFormMode("choose")}>
<Pressable
style={styles.formButton}
onPress={() => {
setDaemonFormMode("choose");
setPairSubMode("choose");
}}
>
<Text style={styles.formButtonText}>Back</Text>
</Pressable>
) : null}
packages/server/package.json
+2
View File
@@ -44,6 +44,7 @@
"pino": "^10.2.0",
"pino-pretty": "^13.1.3",
"playwright": "^1.56.1",
"qrcode": "^1.5.4",
"tiny-invariant": "^1.3.3",
"uuid": "^9.0.1",
"ws": "^8.14.2",
@@ -53,6 +54,7 @@
"@playwright/test": "^1.56.1",
"@types/express": "^4.17.20",
"@types/node": "^20.9.0",
"@types/qrcode": "^1.5.6",
"@types/uuid": "^9.0.7",
"@types/ws": "^8.5.8",
"@vitest/ui": "^3.2.4",
packages/server/src/server/bootstrap.ts
+2
View File
@@ -53,6 +53,7 @@ import {
createConnectionOfferV1,
encodeOfferToFragmentUrl,
} from "./connection-offer.js";
import { printPairingQrIfEnabled } from "./pairing-qr.js";
import { startRelayTransport, type RelayTransportController } from "./relay-transport.js";
import type {
AgentClient,
@@ -420,6 +421,7 @@ export async function createPaseoDaemon(
const url = encodeOfferToFragmentUrl({ offer, appBaseUrl });
logger.info({ url }, "pairing_offer");
void printPairingQrIfEnabled({ url, logger }).catch(() => undefined);
if (relayEnabled) {
relayTransport?.stop().catch(() => undefined);
packages/server/src/server/pairing-qr.ts
+50
View File
@@ -0,0 +1,50 @@
import * as QRCode from "qrcode";
import type { QRCodeToStringOptionsTerminal, QRCodeToStringOptionsOther } from "qrcode";
import type { Logger } from "pino";
function parseBooleanEnv(value: string | undefined): boolean | undefined {
if (value === undefined) return undefined;
const normalized = value.trim().toLowerCase();
if (["1", "true", "yes", "y", "on"].includes(normalized)) return true;
if (["0", "false", "no", "n", "off"].includes(normalized)) return false;
return undefined;
}
function shouldPrintPairingQr(): boolean {
const env = parseBooleanEnv(process.env.PASEO_PAIRING_QR);
if (env !== undefined) return env;
return Boolean(process.stdout.isTTY);
}
async function renderQr(url: string): Promise<string> {
const terminalOptions: QRCodeToStringOptionsTerminal = {
type: "terminal",
small: true,
};
const utf8Options: QRCodeToStringOptionsOther = {
type: "utf8",
};
try {
return await QRCode.toString(url, terminalOptions);
} catch {
return await QRCode.toString(url, utf8Options);
}
}
export async function printPairingQrIfEnabled(args: {
url: string;
logger?: Logger;
}): Promise<void> {
if (!shouldPrintPairingQr()) return;
const qr = await renderQr(args.url);
const out = `\nScan to pair:\n${qr}\n${args.url}\n`;
try {
process.stdout.write(out);
} catch (error) {
args.logger?.debug({ error }, "Failed to print pairing QR");
}
}