@saadnvd1/agent-os 0.3.546 → 0.3.547

package/app/pair/page.tsx

@@ -5,6 +5,7 @@ import { Loader2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Logo } from "@/components/Logo";
+import { appPairLink, isPhoneOrTablet } from "@/lib/security/pair-link";
 import { safeNextPath } from "@/lib/session-url";
 
 // Where to go once this device can use AgentOS: the page the gate turned
@@ -31,6 +32,7 @@ export default function PairPage() {
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [signedIn, setSignedIn] = useState(false);
+  const [appLink, setAppLink] = useState<string | null>(null);
 
   useEffect(() => {
     // Client-only: the server has no user agent to guess from.
@@ -38,6 +40,11 @@ export default function PairPage() {
     const fromLink = () => {
       const code = decodeURIComponent(window.location.hash.slice(1));
       if (code) setCode(code);
+      setAppLink(
+        code && isPhoneOrTablet(navigator.userAgent, navigator.maxTouchPoints)
+          ? appPairLink(window.location.origin, code)
+          : null
+      );
     };
     fromLink();
     window.addEventListener("hashchange", fromLink);
@@ -124,6 +131,12 @@ export default function PairPage() {
             </Button>
           </form>
         )}
+
+        {appLink && (
+          <Button asChild variant="outline" className="h-11 w-full">
+            <a href={appLink}>Open in the AgentOS app</a>
+          </Button>
+        )}
       </div>
     </main>
   );

package/components/Devices/AddDevicePanel.tsx

@@ -58,8 +58,8 @@ export function AddDevicePanel({ onDone }: { onDone: () => void }) {
       {shown ? (
         <>
           <p className="text-sm">
-            Scan with the phone or tablet&apos;s camera. On a laptop, open the
-            link and type the code.
+            On a phone or tablet, open the AgentOS app and tap Scan QR code. The
+            camera app works too. On a laptop, open the link and type the code.
           </p>
           {offer.links.length > 1 && (
             <div className="bg-background/60 mx-auto flex w-fit gap-1 rounded-lg p-1">
@@ -69,9 +69,7 @@ export function AddDevicePanel({ onDone }: { onDone: () => void }) {
                   onClick={() => setKindIndex(i)}
                   className={`h-11 rounded-md px-3 text-xs sm:h-8 ${i === kindIndex ? "bg-muted text-foreground" : "text-muted-foreground"}`}
                 >
-                  {l.kind === "lan"
-                    ? "Phone on this Wi-Fi"
-                    : "Phone on Tailscale"}
+                  {CHOICE[l.kind]}
                 </button>
               ))}
             </div>

package/lib/security/pair-link.ts

@@ -0,0 +1,20 @@
+// Pure and import-free: the pair page bundles this for the browser, which
+// pair-qr.ts (qrcode, reach) can't be.
+
+// The code rides in the fragment, so it never reaches a server log.
+export function pairPageLink(base: string, display: string): string {
+  return `${base.replace(/\/+$/, "")}/pair#${display}`;
+}
+
+// Hands the pairing page's address to the native app. It claims nothing.
+export function appPairLink(base: string, display: string): string {
+  return `agentos://connect?url=${encodeURIComponent(pairPageLink(base, display))}`;
+}
+
+// iPadOS Safari sends a Mac user agent, so touch points tell it apart.
+export function isPhoneOrTablet(ua: string, maxTouchPoints = 0): boolean {
+  return (
+    /iPhone|iPad|Android/.test(ua) ||
+    (/Macintosh/.test(ua) && maxTouchPoints > 1)
+  );
+}

package/lib/security/pair-qr.ts

@@ -1,5 +1,6 @@
 import QRCode from "qrcode";
 import { formatCode, startPairing } from "./pairing";
+import { pairPageLink } from "./pair-link";
 import { reachableAt, type Reach } from "./reach";
 
 export interface PairingLink {
@@ -26,7 +27,7 @@ export async function pairingOffer(): Promise<PairingOffer> {
   );
   const links = await Promise.all(
     firstOfKind.map(async (r) => {
-      const link = `${r.url}/pair#${display}`;
+      const link = pairPageLink(r.url, display);
       const svg = await QRCode.toString(link, {
         type: "svg",
         margin: 1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saadnvd1/agent-os",
-  "version": "0.3.546",
+  "version": "0.3.547",
   "description": "Self-hosted web UI for managing Claude Code sessions",
   "bin": {
     "agent-os": "scripts/agent-os"