@saadnvd1/agent-os 0.3.698 → 0.3.715

package/components/Hosts/HostRow.tsx

@@ -1,16 +1,77 @@
 "use client";
 
+import { useState } from "react";
 import { Button } from "@/components/ui/button";
-import { Monitor, Server, Trash2, PlugZap, Loader2, Link2 } from "lucide-react";
+import {
+  Activity,
+  ExternalLink,
+  Monitor,
+  Server,
+  Trash2,
+  PlugZap,
+  Loader2,
+  Link2,
+  Unlink,
+} from "lucide-react";
+import { Notice } from "@/components/ui/notice";
 import type { Host } from "@/lib/db";
 import { useDeleteHost, useLinkHost, useTestHost } from "@/data/hosts";
+import { useUnlinkPeer } from "@/data/peers";
+import { NEEDS_PRO, UPGRADE_URL } from "@/lib/peer/reasons";
 import { cn } from "@/lib/utils";
+import { PeerActivitySheet } from "./PeerActivitySheet";
+
+function connectLine(host: Host): string {
+  if (host.peer_state === "active")
+    return "Linked through Connect · tasks run on its AgentOS";
+  if (host.peer_state === "suspended") return "Through Connect · suspended";
+  if (host.peer_state === "unlinked")
+    return `Through Connect · ${host.peer_note ?? "unlinked"}`;
+  return "Through Connect · not linked";
+}
+
+/** Why a Connect link is suspended, with the way out when there is one. */
+function SuspendedNote({ reason }: { reason: string | null | undefined }) {
+  const plan = reason === NEEDS_PRO;
+  return (
+    <Notice
+      tone="warning"
+      className="mt-2"
+      action={
+        plan && (
+          <Button
+            asChild
+            variant="outline"
+            size="sm"
+            className="min-h-11 sm:min-h-8"
+          >
+            <a href={UPGRADE_URL} target="_blank" rel="noopener noreferrer">
+              Upgrade
+              <ExternalLink className="h-3.5 w-3.5" />
+            </a>
+          </Button>
+        )
+      }
+    >
+      {plan
+        ? "Linking machines needs Pro. Calls both ways are refused until you upgrade; it comes back without linking again."
+        : `Suspended: ${reason ?? "no reason given"}. Calls both ways are refused; it comes back on its own if the machine returns to your account.`}
+    </Notice>
+  );
+}
 
 export function HostRow({ host }: { host: Host }) {
   const deleteHost = useDeleteHost();
   const testHost = useTestHost();
   const linkHost = useLinkHost();
+  const unlink = useUnlinkPeer();
+  const [activity, setActivity] = useState(false);
+  const [confirmUnlink, setConfirmUnlink] = useState(false);
   const isLocal = host.id === "local";
+  const viaConnect = host.kind === "connect";
+  const pinned =
+    viaConnect &&
+    (host.peer_state === "active" || host.peer_state === "suspended");
   const result = testHost.data;
   const Icon = isLocal ? Monitor : Server;
 
@@ -23,54 +84,90 @@ export function HostRow({ host }: { host: Host }) {
           <p className="text-muted-foreground truncate text-xs">
             {isLocal
               ? "Where agent-os is running"
-              : host.linked
-                ? `${host.ssh_target} · tasks run on its AgentOS`
-                : host.ssh_target}
+              : viaConnect
+                ? connectLine(host)
+                : host.linked
+                  ? `${host.ssh_target} · tasks run on its AgentOS`
+                  : host.ssh_target}
           </p>
         </div>
         {!isLocal && (
           <>
-            <Button
-              variant="ghost"
-              size="icon-sm"
-              className="h-11 w-11 sm:h-8 sm:w-8"
-              onClick={() => testHost.mutate(host.id)}
-              disabled={testHost.isPending}
-              aria-label="Test connection"
-            >
-              {testHost.isPending ? (
-                <Loader2 className="h-4 w-4 animate-spin" />
-              ) : (
-                <PlugZap className="h-4 w-4" />
-              )}
-            </Button>
-            <Button
-              variant="ghost"
-              size="icon-sm"
-              className="h-11 w-11 sm:h-8 sm:w-8"
-              onClick={() => linkHost.mutate(host.id)}
-              disabled={linkHost.isPending}
-              aria-label={
-                host.linked ? "Link its AgentOS again" : "Link its AgentOS"
-              }
-              title="Pair with the AgentOS running there, so tasks can run on it"
-            >
-              {linkHost.isPending ? (
-                <Loader2 className="h-4 w-4 animate-spin" />
-              ) : (
-                <Link2 className="h-4 w-4" />
-              )}
-            </Button>
-            <Button
-              variant="ghost"
-              size="icon-sm"
-              className="h-11 w-11 sm:h-8 sm:w-8"
-              onClick={() => deleteHost.mutate(host.id)}
-              disabled={deleteHost.isPending}
-              aria-label="Remove machine"
-            >
-              <Trash2 className="h-4 w-4" />
-            </Button>
+            {!viaConnect && (
+              <>
+                <Button
+                  variant="ghost"
+                  size="icon-sm"
+                  className="h-11 w-11 sm:h-8 sm:w-8"
+                  onClick={() => testHost.mutate(host.id)}
+                  disabled={testHost.isPending}
+                  aria-label="Test connection"
+                >
+                  {testHost.isPending ? (
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                  ) : (
+                    <PlugZap className="h-4 w-4" />
+                  )}
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="icon-sm"
+                  className="h-11 w-11 sm:h-8 sm:w-8"
+                  onClick={() => linkHost.mutate(host.id)}
+                  disabled={linkHost.isPending}
+                  aria-label={
+                    host.linked ? "Link its AgentOS again" : "Link its AgentOS"
+                  }
+                  title="Pair with the AgentOS running there, so tasks can run on it"
+                >
+                  {linkHost.isPending ? (
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                  ) : (
+                    <Link2 className="h-4 w-4" />
+                  )}
+                </Button>
+              </>
+            )}
+            {viaConnect && host.peer_state && (
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                className="h-11 w-11 sm:h-8 sm:w-8"
+                onClick={() => setActivity(true)}
+                aria-label="Activity"
+                title="Every call to and from this machine"
+              >
+                <Activity className="h-4 w-4" />
+              </Button>
+            )}
+            {pinned ? (
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                className="h-11 w-11 sm:h-8 sm:w-8"
+                onClick={() => setConfirmUnlink(true)}
+                disabled={unlink.isPending || confirmUnlink}
+                aria-label="Unlink"
+                title="Unlink: it can no longer call this machine, nor this one it"
+              >
+                {unlink.isPending ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  <Unlink className="h-4 w-4" />
+                )}
+              </Button>
+            ) : (
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                className="h-11 w-11 sm:h-8 sm:w-8"
+                onClick={() => deleteHost.mutate(host.id)}
+                disabled={deleteHost.isPending}
+                aria-label="Remove machine"
+              >
+                <Trash2 className="h-4 w-4" />
+              </Button>
+            )}
           </>
         )}
       </div>
@@ -98,6 +195,59 @@ export function HostRow({ host }: { host: Host }) {
           {linkHost.error.message}
         </p>
       )}
+      {host.peer_state === "suspended" && (
+        <SuspendedNote reason={host.peer_note} />
+      )}
+      {confirmUnlink && (
+        <Notice
+          tone="warning"
+          className="mt-2"
+          action={
+            <div className="flex gap-2">
+              <Button
+                variant="ghost"
+                size="sm"
+                className="min-h-11 sm:min-h-8"
+                onClick={() => setConfirmUnlink(false)}
+              >
+                Cancel
+              </Button>
+              <Button
+                variant="destructive"
+                size="sm"
+                className="min-h-11 sm:min-h-8"
+                onClick={() => {
+                  setConfirmUnlink(false);
+                  unlink.mutate(host.id);
+                }}
+              >
+                Unlink
+              </Button>
+            </div>
+          }
+        >
+          Unlink {host.name}? It&apos;s unlinked on both machines, and linking
+          them again needs a fresh pairing with new codes.
+        </Notice>
+      )}
+      {unlink.data && !unlink.data.told && (
+        <p className="text-muted-foreground mt-1.5 text-xs">
+          Unlinked here. {host.name} couldn&apos;t be told now; its next call is
+          refused and it will show as unlinked.
+        </p>
+      )}
+      {unlink.error && (
+        <p className="text-destructive mt-1.5 text-xs">
+          {unlink.error.message}
+        </p>
+      )}
+      {viaConnect && (
+        <PeerActivitySheet
+          hostId={activity ? host.id : null}
+          name={host.name}
+          onClose={() => setActivity(false)}
+        />
+      )}
       {deleteHost.error && (
         <p className="text-destructive mt-1.5 text-xs">
           {deleteHost.error.message}

package/components/Hosts/HostsDialog.tsx

@@ -11,6 +11,7 @@ import {
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { useHostsQuery, useCreateHost } from "@/data/hosts";
+import { AccountMachines } from "./AccountMachines";
 import { HostRow } from "./HostRow";
 
 interface HostsDialogProps {
@@ -39,17 +40,19 @@ export function HostsDialog({ open, onClose }: HostsDialogProps) {
 
   return (
     <Dialog open={open} onOpenChange={(o) => !o && onClose()}>
-      <DialogContent className="max-h-[90vh] max-w-lg overflow-y-auto">
+      <DialogContent className="max-h-[90vh] max-w-lg overflow-y-auto [&>*]:min-w-0">
         <DialogHeader>
           <DialogTitle>Machines</DialogTitle>
           <DialogDescription>
-            Sessions run in tmux on any machine you can reach with ssh keys.
-            Projects pick a machine; tmux sessions already running there show up
-            under the project whose folder they are in.
+            Link your other machines to start tasks on them and move tasks
+            between them. Through AgentOS Connect it works over any network.
           </DialogDescription>
         </DialogHeader>
 
+        <AccountMachines />
+
         <div className="space-y-2">
+          <p className="text-sm font-medium">Machines here</p>
           {isPending && (
             <div className="bg-muted/40 h-14 animate-pulse rounded-lg" />
           )}
@@ -58,39 +61,48 @@ export function HostsDialog({ open, onClose }: HostsDialogProps) {
           ))}
         </div>
 
-        <form onSubmit={handleAdd} className="space-y-2 pt-2">
-          <p className="text-sm font-medium">Add a machine</p>
-          <div className="flex flex-col gap-2 sm:flex-row">
-            <Input
-              placeholder="Name (e.g. devbox)"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              className="h-11 sm:h-9"
-            />
-            <Input
-              placeholder="ssh target (user@host or alias)"
-              value={sshTarget}
-              onChange={(e) => setSshTarget(e.target.value)}
-              autoCapitalize="none"
-              autoCorrect="off"
-              spellCheck={false}
-              className="h-11 sm:h-9"
-            />
-          </div>
-          {createHost.error && (
-            <p className="text-sm text-red-400">{createHost.error.message}</p>
-          )}
-          <div className="flex justify-end">
-            <Button
-              type="submit"
-              disabled={
-                !name.trim() || !sshTarget.trim() || createHost.isPending
-              }
-            >
-              Add machine
-            </Button>
-          </div>
-        </form>
+        <details className="group">
+          <summary className="text-muted-foreground flex min-h-11 cursor-pointer items-center text-sm select-none sm:min-h-9">
+            Other ways to link (Tailscale or ssh)
+          </summary>
+          <p className="text-muted-foreground pb-2 text-xs">
+            Sessions run in tmux on any machine you can reach with ssh keys.
+            Projects pick a machine; tmux sessions already running there show up
+            under the project whose folder they are in.
+          </p>
+          <form onSubmit={handleAdd} className="space-y-2">
+            <div className="flex flex-col gap-2 sm:flex-row">
+              <Input
+                placeholder="Name (e.g. devbox)"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                className="h-11 sm:h-9"
+              />
+              <Input
+                placeholder="ssh target (user@host or alias)"
+                value={sshTarget}
+                onChange={(e) => setSshTarget(e.target.value)}
+                autoCapitalize="none"
+                autoCorrect="off"
+                spellCheck={false}
+                className="h-11 sm:h-9"
+              />
+            </div>
+            {createHost.error && (
+              <p className="text-sm text-red-400">{createHost.error.message}</p>
+            )}
+            <div className="flex justify-end">
+              <Button
+                type="submit"
+                disabled={
+                  !name.trim() || !sshTarget.trim() || createHost.isPending
+                }
+              >
+                Add machine
+              </Button>
+            </div>
+          </form>
+        </details>
       </DialogContent>
     </Dialog>
   );

package/components/Hosts/IncomingLinkSheet.tsx

@@ -0,0 +1,246 @@
+"use client";
+
+import { useState } from "react";
+import { CheckCircle2, ShieldAlert, X } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { useAnswerLink, usePendingLinks } from "@/data/peers";
+import { showCode } from "@/lib/peer/code";
+import type { PendingView } from "@/lib/peer/pairing";
+import { relativeTime } from "@/lib/schedules/when";
+import { SHEET } from "./sheet";
+
+/** Its Connect id and when it was last online, next to the account's name. */
+function Origin({ request }: { request: PendingView }) {
+  const seen = request.lastSeenAt ? Date.parse(request.lastSeenAt) : NaN;
+  return (
+    <span className="text-muted-foreground font-mono text-xs">
+      {request.machineId.slice(0, 8)}
+      {Number.isFinite(seen) && ` · seen ${relativeTime(seen)}`}
+    </span>
+  );
+}
+
+const asking = (r: PendingView) =>
+  r.state === "accepted" ? "is linked: finish there" : "wants to link";
+
+/** On the machine being asked: type the code the other one shows. */
+export function IncomingLinkSheet({
+  request,
+  onClose,
+}: {
+  request: PendingView | null;
+  onClose: () => void;
+}) {
+  const [code, setCode] = useState("");
+  const { accept, decline } = useAnswerLink();
+  const digits = code.replace(/\D/g, "");
+  const busy = accept.isPending || decline.isPending;
+  const close = () => {
+    setCode("");
+    accept.reset();
+    onClose();
+  };
+  const left = (accept.error as { attemptsLeft?: number } | null)?.attemptsLeft;
+  // Held by the server too, so a reload on this machine still shows it.
+  const done =
+    accept.data ??
+    (request?.confirmCode
+      ? { name: request.name, confirmCode: request.confirmCode }
+      : null);
+
+  if (done)
+    return (
+      <Dialog open={!!request} onOpenChange={(o) => !o && close()}>
+        <DialogContent className={SHEET}>
+          <DialogHeader>
+            <DialogTitle>Finish on {done.name}</DialogTitle>
+            <DialogDescription>
+              {done.name} is linked here. Type this code on {done.name} so it
+              links back to this machine.
+            </DialogDescription>
+          </DialogHeader>
+          <p
+            className="text-center font-mono text-4xl font-semibold tracking-[0.2em] tabular-nums sm:text-5xl"
+            aria-label={`Code ${done.confirmCode.split("").join(" ")}`}
+            data-testid="confirm-code"
+          >
+            {showCode(done.confirmCode)}
+          </p>
+          <p className="flex items-center justify-center gap-2 text-sm">
+            <CheckCircle2 className="h-4 w-4 text-emerald-600 dark:text-emerald-400" />
+            Code matched
+          </p>
+          <div className="flex justify-end">
+            <Button className="min-h-11 sm:min-h-9" onClick={close}>
+              Done
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    );
+
+  return (
+    <Dialog open={!!request} onOpenChange={(o) => !o && close()}>
+      <DialogContent className={SHEET}>
+        <DialogHeader>
+          <DialogTitle>Link {request?.name}?</DialogTitle>
+          <DialogDescription>
+            {request?.name} asked to link with this machine. Type the code it
+            shows to allow it.
+          </DialogDescription>
+          {request && <Origin request={request} />}
+        </DialogHeader>
+        <div className="flex gap-2 rounded-lg border border-amber-500/40 bg-amber-500/10 p-3 text-sm">
+          <ShieldAlert className="mt-0.5 h-4 w-4 shrink-0 text-amber-600 dark:text-amber-400" />
+          <p>
+            Linked machines can start agents and run code on this machine. Only
+            link one you own.
+          </p>
+        </div>
+        <form
+          className="flex flex-col gap-2"
+          onSubmit={(e) => {
+            e.preventDefault();
+            if (request && digits.length === 6)
+              accept.mutate({ id: request.id, code: digits });
+          }}
+        >
+          <Input
+            value={code}
+            onChange={(e) => setCode(e.target.value.slice(0, 7))}
+            inputMode="numeric"
+            autoComplete="one-time-code"
+            placeholder="6-digit code"
+            aria-label="Code shown on the other machine"
+            className="h-12 text-center font-mono text-2xl tracking-[0.3em]"
+            autoFocus
+          />
+          {accept.error && (
+            <p className="text-destructive text-sm">
+              {accept.error.message}
+              {left ? ` ${left} ${left === 1 ? "try" : "tries"} left.` : ""}
+            </p>
+          )}
+          <div className="flex justify-end gap-2">
+            <Button
+              type="button"
+              variant="ghost"
+              className="min-h-11 sm:min-h-9"
+              disabled={busy}
+              onClick={() =>
+                request && decline.mutate(request.id, { onSuccess: close })
+              }
+            >
+              Decline
+            </Button>
+            <Button
+              type="submit"
+              className="min-h-11 sm:min-h-9"
+              disabled={busy || digits.length !== 6 || left === 0}
+            >
+              Link
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+/** A banner on every page while a machine is waiting for its code here. */
+export function IncomingLinks() {
+  const { data: requests = [] } = usePendingLinks();
+  // Held while open, so a request voided by a wrong code still says why.
+  const [open, setOpen] = useState<PendingView | null>(null);
+  // Hidden until a request not seen yet arrives; it covers the header on phones.
+  const [later, setLater] = useState<string | null>(null);
+  const shown = requests.filter((r) => !later?.includes(r.id));
+  const first = shown[0];
+  const hidden = shown.length === 0;
+  return (
+    <>
+      {first && !open && !hidden && (
+        <div
+          role="status"
+          className="popover-surface fixed top-[max(0.75rem,env(safe-area-inset-top))] left-1/2 z-50 flex w-[min(28rem,calc(100%-1.5rem))] -translate-x-1/2 items-center gap-3 rounded-xl px-3 py-2 shadow-lg"
+        >
+          <ShieldAlert className="h-4 w-4 shrink-0 text-amber-600 dark:text-amber-400" />
+          <div className="flex min-w-0 flex-1 flex-col">
+            <p className="truncate text-sm">
+              <span className="font-medium">{first.name}</span> {asking(first)}
+              {shown.length > 1 ? ` (+${shown.length - 1} more)` : ""}
+            </p>
+            <Origin request={first} />
+          </div>
+          <Button
+            size="sm"
+            className="min-h-11 sm:min-h-8"
+            onClick={() => setOpen(first)}
+          >
+            {first.state === "accepted" ? "Show code" : "Review"}
+          </Button>
+          <Button
+            size="icon"
+            variant="ghost"
+            aria-label="Later"
+            className="h-11 w-11 shrink-0 sm:h-8 sm:w-8"
+            onClick={() =>
+              setLater(`${later ?? ""} ${shown.map((r) => r.id).join(" ")}`)
+            }
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+      )}
+      <IncomingLinkSheet
+        request={open}
+        onClose={() => {
+          // Answered, or put off: either way it stops covering the page.
+          if (open) setLater(`${later ?? ""} ${open.id}`);
+          setOpen(null);
+        }}
+      />
+    </>
+  );
+}
+
+/** In Machines: the requests waiting here, for after the banner was put off. */
+export function WaitingLinks() {
+  const { data: requests = [] } = usePendingLinks();
+  const [open, setOpen] = useState<PendingView | null>(null);
+  if (requests.length === 0 && !open) return null;
+  return (
+    <>
+      {requests.map((r) => (
+        <div
+          key={r.id}
+          className="flex items-center gap-3 rounded-lg border border-amber-500/40 bg-amber-500/10 px-3 py-2"
+        >
+          <ShieldAlert className="h-4 w-4 shrink-0 text-amber-600 dark:text-amber-400" />
+          <div className="flex min-w-0 flex-1 flex-col">
+            <p className="truncate text-sm">
+              <span className="font-medium">{r.name}</span> {asking(r)}
+            </p>
+            <Origin request={r} />
+          </div>
+          <Button
+            size="sm"
+            className="min-h-11 sm:min-h-8"
+            onClick={() => setOpen(r)}
+          >
+            {r.state === "accepted" ? "Show code" : "Type code"}
+          </Button>
+        </div>
+      ))}
+      <IncomingLinkSheet request={open} onClose={() => setOpen(null)} />
+    </>
+  );
+}