@saadnvd1/agent-os 0.3.698 → 0.3.700

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,228 @@
+"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>
+  );
+}
+
+/** 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;
+  const done = accept.data;
+
+  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 first = requests[0];
+  const hidden = later !== null && requests.every((r) => later.includes(r.id));
+  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> wants to link
+              {requests.length > 1 ? ` (+${requests.length - 1} more)` : ""}
+            </p>
+            <Origin request={first} />
+          </div>
+          <Button
+            size="sm"
+            className="min-h-11 sm:min-h-8"
+            onClick={() => setOpen(first)}
+          >
+            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(requests.map((r) => r.id).join(" "))}
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+      )}
+      <IncomingLinkSheet request={open} onClose={() => 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> wants to link
+            </p>
+            <Origin request={r} />
+          </div>
+          <Button
+            size="sm"
+            className="min-h-11 sm:min-h-8"
+            onClick={() => setOpen(r)}
+          >
+            Type code
+          </Button>
+        </div>
+      ))}
+      <IncomingLinkSheet request={open} onClose={() => setOpen(null)} />
+    </>
+  );
+}

package/components/Hosts/LinkCodeSheet.tsx

@@ -0,0 +1,186 @@
+"use client";
+
+import { useState } from "react";
+import { CheckCircle2, Loader2, XCircle } 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 { useCancelLink, useConfirmLink, useOutgoingLink } from "@/data/peers";
+import { showCode } from "@/lib/peer/code";
+import { SHEET } from "./sheet";
+
+const ENDED: Record<string, string> = {
+  declined: "It was declined there, or the code was typed wrong 3 times.",
+  expired: "The request expired before the code was typed.",
+};
+
+/** Once the other machine took our code: type the one it shows now. */
+function ConfirmForm({
+  id,
+  name,
+  onCancel,
+}: {
+  id: string;
+  name: string;
+  onCancel: () => void;
+}) {
+  const [code, setCode] = useState("");
+  const confirm = useConfirmLink();
+  const digits = code.replace(/\D/g, "");
+  const left = (confirm.error as { attemptsLeft?: number } | null)
+    ?.attemptsLeft;
+  return (
+    <form
+      className="flex flex-col gap-2"
+      onSubmit={(e) => {
+        e.preventDefault();
+        if (digits.length === 6) confirm.mutate({ 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 ${name}`}
+        className="h-12 text-center font-mono text-2xl tracking-[0.3em]"
+        autoFocus
+      />
+      {confirm.error && (
+        <p className="text-destructive text-sm">
+          {confirm.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"
+          onClick={onCancel}
+        >
+          Cancel
+        </Button>
+        <Button
+          type="submit"
+          className="min-h-11 sm:min-h-9"
+          disabled={confirm.isPending || digits.length !== 6 || left === 0}
+        >
+          Finish
+        </Button>
+      </div>
+    </form>
+  );
+}
+
+/** On the machine that asks: the code to type on the other one. */
+export function LinkCodeSheet({
+  linkId,
+  onClose,
+  onRetry,
+}: {
+  linkId: string | null;
+  onClose: () => void;
+  onRetry: () => void;
+}) {
+  const { data: link, error } = useOutgoingLink(linkId);
+  const cancel = useCancelLink();
+  const close = () => {
+    if ((link?.state === "pending" || link?.state === "confirm") && linkId)
+      cancel.mutate(linkId);
+    onClose();
+  };
+  const name = link?.name ?? "the other machine";
+
+  return (
+    <Dialog open={!!linkId} onOpenChange={(o) => !o && close()}>
+      <DialogContent className={SHEET}>
+        <DialogHeader>
+          <DialogTitle>Link {name}</DialogTitle>
+          <DialogDescription>
+            {link?.state === "confirm" ? (
+              <>
+                Last step: {name} shows a code of its own. Typing it here proves
+                it&apos;s really {name}.
+              </>
+            ) : link?.state === "accepted" ? (
+              <>Both machines list each other as linked now.</>
+            ) : (
+              <>
+                Open AgentOS on {name} and type this code there. Its banner, the
+                Machines screen, or{" "}
+                <code className="font-mono">agent-os link accept</code> in its
+                terminal all take it.
+              </>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+        {link?.state === "confirm" && (
+          <ConfirmForm id={link.id} name={name} onCancel={close} />
+        )}
+        {link && link.state !== "confirm" && link.state !== "accepted" && (
+          <p
+            className="text-center font-mono text-4xl font-semibold tracking-[0.2em] tabular-nums sm:text-5xl"
+            aria-label={`Code ${link.code.split("").join(" ")}`}
+            data-testid="link-code"
+          >
+            {showCode(link.code)}
+          </p>
+        )}
+        {link?.state !== "confirm" && (
+          <>
+            <div className="flex min-h-11 items-center justify-center gap-2 text-sm">
+              {error ? (
+                <span className="text-destructive">{error.message}</span>
+              ) : !link || link.state === "pending" ? (
+                <>
+                  <Loader2 className="text-muted-foreground h-4 w-4 animate-spin" />
+                  <span className="text-muted-foreground">
+                    Waiting for the code on {name}…
+                  </span>
+                </>
+              ) : link.state === "accepted" ? (
+                <>
+                  <CheckCircle2 className="h-4 w-4 text-emerald-600 dark:text-emerald-400" />
+                  <span>Linked. Tasks can run on {name} now.</span>
+                </>
+              ) : (
+                <>
+                  <XCircle className="text-destructive h-4 w-4" />
+                  <span className="text-muted-foreground">
+                    {ENDED[link.state] ?? link.error}
+                  </span>
+                </>
+              )}
+            </div>
+            <div className="flex justify-end gap-2">
+              {link && !["pending", "accepted"].includes(link.state) && (
+                <Button
+                  variant="outline"
+                  className="min-h-11 sm:min-h-9"
+                  onClick={onRetry}
+                >
+                  Try again
+                </Button>
+              )}
+              <Button
+                variant={link?.state === "accepted" ? "default" : "ghost"}
+                className="min-h-11 sm:min-h-9"
+                onClick={close}
+              >
+                {link?.state === "pending" ? "Cancel" : "Done"}
+              </Button>
+            </div>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

package/components/Hosts/sheet.ts

@@ -0,0 +1,3 @@
+/** A dialog that sits at the bottom of a phone's screen, centred above it. */
+export const SHEET =
+  "max-sm:top-auto max-sm:bottom-0 max-sm:max-w-full max-sm:translate-y-0 max-sm:rounded-b-none max-sm:pb-[max(1.5rem,env(safe-area-inset-bottom))]";

package/components/SessionList/RowSubtitle.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Repeat, Layers, Pause } from "lucide-react";
+import { Repeat, Layers, Pause, Hourglass } from "lucide-react";
 import { HostBadge } from "@/components/Hosts";
 import { rowGroup } from "@/lib/recipes/chip";
 import type { Session } from "@/lib/db";
@@ -77,6 +77,16 @@ export function RowSubtitle({
           </span>
         </span>
       )}
+      {(session.waiting_on || session.waited_by) && (
+        <span className="text-muted-foreground flex min-w-0 items-center gap-1 text-xs">
+          <Hourglass aria-hidden className="h-3 w-3 shrink-0" />
+          <span className="truncate">
+            {session.waiting_on
+              ? `waiting on ${session.waiting_on}`
+              : `${session.waited_by} waiting on it`}
+          </span>
+        </span>
+      )}
       {group && (
         <span
           className="text-muted-foreground/70 flex min-w-0 shrink-0 items-center gap-1 truncate text-xs @[14rem]:shrink"

package/components/Welcome/ConnectBlock.tsx

@@ -29,7 +29,7 @@ function Command() {
   );
 }
 
-function LinkForm() {
+export function LinkForm() {
   const [code, setCode] = useState("");
   const link = useLinkConnect();
   const submit = () => {

package/data/peers/index.ts

@@ -0,0 +1,2 @@
+export * from "./keys";
+export * from "./queries";

package/data/peers/keys.ts

@@ -0,0 +1,6 @@
+export const peerKeys = {
+  all: ["peers"] as const,
+  account: () => [...peerKeys.all, "account"] as const,
+  pending: () => [...peerKeys.all, "pending"] as const,
+  link: (id: string) => [...peerKeys.all, "link", id] as const,
+};