@saadnvd1/agent-os 0.3.532 → 0.3.533

package/README.md

@@ -1774,7 +1774,9 @@ Connect (in development) reaches this machine from anywhere at
 a code from runagentos.com: it makes an Ed25519 key in `~/.agent-os/connect`
 that never leaves the machine, and the Connect service makes the machine a
 Cloudflare tunnel. Running it again on a linked machine links the same tunnel
-again, keeping its address. `agent-os disconnect` (or the switch in Devices)
+again, keeping its address. The first-run setup's Devices step can link too: paste
+the code into the field (same code path, `POST /api/devices/connect`, local or
+tailnet callers only). `agent-os disconnect` (or the switch in Devices)
 turns it off.
 
 While Connect is on, the production server:

package/app/api/devices/connect/route.ts

@@ -0,0 +1,79 @@
+import os from "os";
+import { NextRequest, NextResponse } from "next/server";
+import { demoMode } from "@/lib/security/demo";
+import { requireLocalTrust } from "@/lib/security/route-guard";
+import { networkState } from "@/lib/security/network-state";
+import {
+  connectTunnelPort,
+  readConnect,
+  serverPort,
+} from "@/lib/connect/config";
+import { ApiError } from "@/lib/connect/control-api";
+import { cleanLinkCode, linkWithCode } from "@/lib/connect/link";
+import { connectStatus } from "@/lib/connect/serve";
+
+let linking = false;
+
+const nameFrom = (raw: unknown) => {
+  const name =
+    typeof raw === "string"
+      ? raw
+          .replace(/[\u0000-\u001f\u007f-\u009f]/g, " ")
+          .trim()
+          .slice(0, 64)
+      : "";
+  return name || os.hostname();
+};
+
+// POST /api/devices/connect {code, name?} - link this machine with a code
+// from runagentos.com, the same way `agent-os connect` does.
+export async function POST(request: NextRequest) {
+  const refused = requireLocalTrust(request);
+  if (refused) return refused;
+  if (demoMode())
+    return NextResponse.json({ error: "Not in the demo." }, { status: 403 });
+  const body = (await request.json().catch(() => ({}))) as {
+    code?: unknown;
+    name?: unknown;
+  };
+  const code = cleanLinkCode(body.code);
+  if (!code)
+    return NextResponse.json(
+      { error: "Paste the code from runagentos.com." },
+      { status: 400 }
+    );
+  if (readConnect().ok)
+    return NextResponse.json(
+      { error: "This machine is already linked." },
+      { status: 409 }
+    );
+  const port = connectTunnelPort(serverPort());
+  if (!port)
+    return NextResponse.json(
+      { error: "AGENTOS_CONNECT_PORT isn't a usable port" },
+      { status: 500 }
+    );
+  if (linking)
+    return NextResponse.json({ error: "Already linking." }, { status: 409 });
+  linking = true;
+  try {
+    await linkWithCode({ code, name: nameFrom(body.name), port });
+  } catch (err) {
+    if (err instanceof ApiError && err.status >= 400 && err.status < 500)
+      return NextResponse.json(
+        { error: `That code didn't work: ${err.message}` },
+        { status: 400 }
+      );
+    console.error(`connect: link failed: ${(err as Error).message}`);
+    return NextResponse.json(
+      { error: "Couldn't link. Check the code and try again." },
+      { status: 502 }
+    );
+  } finally {
+    linking = false;
+  }
+  // The running server picks the new files up within a couple of seconds.
+  for (let i = 0; i < 12 && !connectStatus().enrolled; i++)
+    await new Promise((r) => setTimeout(r, 250));
+  return NextResponse.json(await networkState());
+}

package/components/Devices/ConnectCard.tsx

@@ -3,15 +3,7 @@
 import { Cloud } from "lucide-react";
 import { Switch } from "@/components/ui/switch";
 import type { ConnectStatus } from "@/lib/connect/serve";
-
-const STATE: Record<ConnectStatus["state"], string> = {
-  up: "Connected",
-  connecting: "Connecting…",
-  denied: "Refused by Connect",
-  off: "Off",
-  refused: "Not running here",
-  error: "Problem",
-};
+import { CONNECT_STATE as STATE, connectView } from "@/lib/connect/view";
 
 export function ConnectCard({
   connect,
@@ -22,12 +14,7 @@ export function ConnectCard({
   canManage: boolean;
   onToggle: (on: boolean) => void;
 }) {
-  const enrolled = !!connect.enrolled || !!connect.hostname;
-  const on =
-    connect.state === "up" ||
-    connect.state === "connecting" ||
-    connect.state === "denied" ||
-    (connect.state === "error" && !!connect.enrolled);
+  const { linked: enrolled, on } = connectView(connect);
   return (
     <div className="bg-muted/40 flex items-start gap-3 rounded-lg px-3 py-2.5">
       <Cloud className="text-muted-foreground mt-0.5 h-4 w-4 shrink-0" />

package/components/Welcome/Block.tsx

@@ -0,0 +1,26 @@
+import type { Bell } from "lucide-react";
+
+export function Block({
+  icon: Icon,
+  title,
+  detail,
+  children,
+}: {
+  icon: typeof Bell;
+  title: string;
+  detail: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="bg-muted/40 flex min-w-0 flex-col gap-3 rounded-lg px-3 py-3">
+      <div className="flex items-start gap-3">
+        <Icon className="text-muted-foreground mt-0.5 size-4 shrink-0" />
+        <div className="min-w-0 flex-1">
+          <h3 className="text-sm font-medium">{title}</h3>
+          <p className="text-muted-foreground text-xs">{detail}</p>
+        </div>
+      </div>
+      {children}
+    </section>
+  );
+}

package/components/Welcome/ConnectBlock.tsx

@@ -0,0 +1,169 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { ExternalLink, Globe } from "lucide-react";
+import { CopyButton } from "@/components/Chat/CopyButton";
+import { canManageDevices } from "@/components/Devices/DevicesPanel";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import {
+  useDevicesQuery,
+  useLinkConnect,
+  useNetworkQuery,
+  useUpdateNetwork,
+} from "@/data/devices";
+import { CONNECT_SITE, CONNECT_STATE, connectView } from "@/lib/connect/view";
+import { Block } from "./Block";
+
+const COMMAND = "agent-os connect";
+
+function Command() {
+  return (
+    <div className="text-muted-foreground flex items-center gap-1 text-xs">
+      <span>Or run</span>
+      <code className="text-foreground font-mono">{COMMAND}</code>
+      <span>in a terminal.</span>
+      <CopyButton text={COMMAND} label="Copy command" />
+    </div>
+  );
+}
+
+function LinkForm() {
+  const [code, setCode] = useState("");
+  const link = useLinkConnect();
+  const submit = () => {
+    if (code.trim() && !link.isPending) link.mutate(code.trim());
+  };
+  return (
+    <div className="flex min-w-0 flex-col gap-2">
+      <p className="text-muted-foreground text-xs">
+        Get a code at{" "}
+        <a
+          href={CONNECT_SITE}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-foreground inline-flex items-center gap-1 underline underline-offset-2"
+        >
+          runagentos.com
+          <ExternalLink className="size-3" />
+        </a>{" "}
+        (Connect a machine), then paste it here.
+      </p>
+      <form
+        className="flex gap-2"
+        onSubmit={(e) => {
+          e.preventDefault();
+          submit();
+        }}
+      >
+        <Input
+          value={code}
+          onChange={(e) => setCode(e.target.value)}
+          aria-label="Link code"
+          placeholder="Link code"
+          autoComplete="off"
+          autoCapitalize="off"
+          spellCheck={false}
+          className="min-h-11 flex-1 font-mono sm:min-h-9"
+        />
+        <Button
+          type="submit"
+          variant="outline"
+          className="min-h-11 sm:min-h-9"
+          disabled={!code.trim() || link.isPending}
+        >
+          {link.isPending ? "Linking…" : "Link"}
+        </Button>
+      </form>
+      {link.error && (
+        <p className="text-destructive text-xs">{link.error.message}</p>
+      )}
+      <Command />
+    </div>
+  );
+}
+
+/** This machine's Connect: link it, then turn it on or off. */
+export function ConnectBlock() {
+  // The running server follows a change within a couple of seconds.
+  const [wanted, setWanted] = useState<boolean | null>(null);
+  const network = useNetworkQuery(true, wanted === null ? false : 2000);
+  const devices = useDevicesQuery(true);
+  const update = useUpdateNetwork();
+  const canManage = canManageDevices(devices.data?.current.via);
+  const view = network.data ? connectView(network.data.connect) : null;
+
+  useEffect(() => {
+    if (wanted === null) return;
+    const t = setTimeout(() => setWanted(null), 6000);
+    return () => clearTimeout(t);
+  }, [wanted]);
+
+  return (
+    <Block
+      icon={Globe}
+      title="Use it away from home"
+      detail="Connect gives this machine a private address at runagentos.com, so your phone reaches it from anywhere. Nothing to open on your router."
+    >
+      {network.isPending ? (
+        <div className="bg-muted/40 h-12 animate-pulse rounded-lg" />
+      ) : network.isError || !view ? (
+        <p className="text-destructive text-xs">
+          {network.error?.message ?? "Couldn't read Connect."}
+        </p>
+      ) : !view.linked ? (
+        canManage ? (
+          <LinkForm />
+        ) : (
+          <div className="flex flex-col gap-2">
+            <p className="text-muted-foreground text-xs">
+              Link it on the machine running AgentOS.
+            </p>
+            <Command />
+          </div>
+        )
+      ) : (
+        <div className="flex items-start gap-3">
+          <div className="min-w-0 flex-1">
+            <p className="text-sm font-medium">
+              Linked{" "}
+              <span className="text-muted-foreground font-normal">
+                · {CONNECT_STATE[network.data.connect.state]}
+              </span>
+            </p>
+            <p className="text-muted-foreground text-xs break-all">
+              {view.hostname ? (
+                <>
+                  Reachable at{" "}
+                  <span className="text-foreground font-mono">
+                    https://{view.hostname}
+                  </span>
+                </>
+              ) : (
+                "The address appears once the tunnel starts."
+              )}
+              {network.data.connect.reason &&
+              network.data.connect.state !== "off"
+                ? ` ${network.data.connect.reason.replace(/\.$/, "")}.`
+                : ""}
+            </p>
+            {update.error && (
+              <p className="text-destructive text-xs">{update.error.message}</p>
+            )}
+          </div>
+          <Switch
+            checked={wanted ?? view.on}
+            disabled={!view.canToggle || !canManage}
+            onCheckedChange={(connect) => {
+              setWanted(connect);
+              update.mutate({ connect });
+            }}
+            className="mt-0.5"
+            aria-label="Connect"
+          />
+        </div>
+      )}
+    </Block>
+  );
+}

package/components/Welcome/DevicesStep.tsx

@@ -2,6 +2,8 @@
 
 import { useState } from "react";
 import { Bell, Laptop, Smartphone } from "lucide-react";
+import { Block } from "./Block";
+import { ConnectBlock } from "./ConnectBlock";
 import { AddDevicePanel } from "@/components/Devices/AddDevicePanel";
 import {
   NotificationsSection,
@@ -9,31 +11,6 @@ import {
 } from "@/components/Settings/NotificationsSection";
 import { Button } from "@/components/ui/button";
 
-function Block({
-  icon: Icon,
-  title,
-  detail,
-  children,
-}: {
-  icon: typeof Bell;
-  title: string;
-  detail: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <section className="bg-muted/40 flex min-w-0 flex-col gap-3 rounded-lg px-3 py-3">
-      <div className="flex items-start gap-3">
-        <Icon className="text-muted-foreground mt-0.5 size-4 shrink-0" />
-        <div className="min-w-0 flex-1">
-          <h3 className="text-sm font-medium">{title}</h3>
-          <p className="text-muted-foreground text-xs">{detail}</p>
-        </div>
-      </div>
-      {children}
-    </section>
-  );
-}
-
 /**
  * Pair a phone, link another machine, set up notifications. Every part is
  * optional and lives in Settings too.
@@ -51,7 +28,7 @@ export function DevicesStep({
       <Block
         icon={Smartphone}
         title="Pair your phone"
-        detail="Scan a code to use AgentOS from your phone."
+        detail="Scan a code to use AgentOS from your phone on this network."
       >
         {pairing ? (
           <AddDevicePanel onDone={() => setPairing(false)} />
@@ -65,6 +42,7 @@ export function DevicesStep({
           </Button>
         )}
       </Block>
+      <ConnectBlock />
       <Block
         icon={Laptop}
         title="Link another machine"

package/data/devices/queries.ts

@@ -26,12 +26,32 @@ export function useDevicesQuery(enabled = true) {
   });
 }
 
-export function useNetworkQuery(enabled = true) {
+export function useNetworkQuery(
+  enabled = true,
+  refetchMs: number | false = false
+) {
   return useQuery({
     queryKey: deviceKeys.network(),
     queryFn: async () =>
       json<NetworkState>(await fetch("/api/devices/network")),
     enabled,
+    refetchInterval: refetchMs,
+  });
+}
+
+/** Links this machine to Connect with a code from runagentos.com. */
+export function useLinkConnect() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (code: string) =>
+      json<NetworkState>(
+        await fetch("/api/devices/connect", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ code }),
+        })
+      ),
+    onSuccess: (data) => queryClient.setQueryData(deviceKeys.network(), data),
   });
 }
 

package/lib/connect/cli.ts

@@ -21,13 +21,8 @@ import {
   serverPort,
   setConnectEnabled,
 } from "./config";
-import { enrol } from "./enrol";
-import {
-  checkApiUrl,
-  DEFAULT_API,
-  registerWithCode,
-  requestTunnel,
-} from "./control-api";
+import { linkWithCode } from "./link";
+import { checkApiUrl, requestTunnel } from "./control-api";
 
 const arg = (flag: string) => {
   const i = process.argv.indexOf(flag);
@@ -83,23 +78,16 @@ async function main() {
     config = { ...config, hostname };
     saveConnect(config, dir);
   } else {
-    const apiUrl = checkApiUrl(
-      process.env.CONNECT_API_URL || DEFAULT_API,
-      operator
-    );
     const code = await linkCode();
     if (!code)
       throw new Error(
         "get a code from runagentos.com (Connect a machine), then run agent-os connect and paste it"
       );
-    config = await enrol({
+    config = await linkWithCode({
       dir,
-      register: registerWithCode(
-        apiUrl,
-        code,
-        arg("--name") || os.hostname(),
-        port
-      ),
+      code,
+      name: arg("--name") || os.hostname(),
+      port,
     });
   }
   console.log(`\n  Machine ${config.machineId}`);

package/lib/connect/link.ts

@@ -0,0 +1,35 @@
+/**
+ * Linking this machine to the Connect service with a code from
+ * runagentos.com. Shared by `agent-os connect` and the setup's link form.
+ */
+
+import { type ConnectConfig } from "./config";
+import { DEFAULT_API, checkApiUrl, registerWithCode } from "./control-api";
+import { enrol } from "./enrol";
+
+/** The code as typed, or null when it can't be one. */
+export function cleanLinkCode(raw: unknown): string | null {
+  if (typeof raw !== "string") return null;
+  const code = raw.trim();
+  if (!code || code.length > 128 || /[\s\u0000-\u001f\u007f-\u009f]/.test(code))
+    return null;
+  return code;
+}
+
+export async function linkWithCode(opts: {
+  code: string;
+  name: string;
+  port: number;
+  dir?: string;
+  env?: NodeJS.ProcessEnv;
+}): Promise<ConnectConfig> {
+  const env = opts.env ?? process.env;
+  const apiUrl = checkApiUrl(
+    env.CONNECT_API_URL || DEFAULT_API,
+    env.AGENTOS_CONNECT_OPERATOR === "1"
+  );
+  return enrol({
+    dir: opts.dir,
+    register: registerWithCode(apiUrl, opts.code, opts.name, opts.port),
+  });
+}

package/lib/connect/serve.ts

@@ -195,7 +195,18 @@ export function startConnect(
       ? "AGENTOS_CONNECT_PORT isn't a usable port"
       : decision.reason;
     if (readConnect(dir).ok) log(`connect: not starting: ${reason}`);
-    base = { state: "refused", reason };
+    // Still says whether the machine is linked, read when asked.
+    g.__agentosConnect = () => {
+      const r = readConnect(dir);
+      return {
+        state: "refused",
+        reason,
+        ...(r.ok && {
+          enrolled: true,
+          hostname: r.files.config.hostname || undefined,
+        }),
+      };
+    };
     return { hostname: () => null as string | null, close: () => {} };
   }
 

package/lib/connect/view.ts

@@ -0,0 +1,28 @@
+import type { ConnectStatus } from "./serve";
+
+export const CONNECT_SITE = "https://runagentos.com";
+
+export const CONNECT_STATE: Record<ConnectStatus["state"], string> = {
+  up: "Connected",
+  connecting: "Connecting…",
+  denied: "Refused by Connect",
+  off: "Off",
+  refused: "Not running here",
+  error: "Problem",
+};
+
+/** What the UI needs to know about Connect on this machine. */
+export function connectView(s: ConnectStatus) {
+  const linked = !!s.enrolled || !!s.hostname;
+  const on =
+    s.state === "up" ||
+    s.state === "connecting" ||
+    s.state === "denied" ||
+    (s.state === "error" && !!s.enrolled);
+  return {
+    linked,
+    on,
+    canToggle: linked && s.state !== "refused",
+    hostname: s.hostname,
+  };
+}

package/lib/security/demo.ts

@@ -54,6 +54,7 @@ export const STATIC_SIBLINGS = [
   "availability",
   "browse",
   "clone",
+  "connect",
   "detect",
   "done-idle",
   "held-replies",

package/package.json

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