@saadnvd1/agent-os 0.3.700 → 0.3.715

package/components/Hosts/AccountMachines.tsx

@@ -3,13 +3,14 @@
 import { useState } from "react";
 import { ExternalLink, Link2, Loader2, RefreshCw } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { Notice } from "@/components/ui/notice";
 import { LinkForm } from "@/components/Welcome/ConnectBlock";
 import {
   useAccountMachines,
   useRefreshAccount,
   useStartLink,
 } from "@/data/peers";
-import { CONNECT_SITE } from "@/lib/connect/view";
+import { UPGRADE_URL } from "@/lib/peer/reasons";
 import type { AccountMachine } from "@/lib/peer/machines";
 import { cn } from "@/lib/utils";
 import { WaitingLinks } from "./IncomingLinkSheet";
@@ -57,7 +58,12 @@ function MachineRow({
           Linked
         </span>
       ) : machine.linkState === "suspended" ? (
-        <span className="text-muted-foreground text-xs">Suspended</span>
+        <span
+          className="text-xs text-amber-700 dark:text-amber-400"
+          title={machine.suspendedReason ?? undefined}
+        >
+          Suspended
+        </span>
       ) : (
         <Button
           variant="outline"
@@ -122,23 +128,31 @@ export function AccountMachines() {
           />
         </Button>
       </div>
+      {data.uncheckedSince && (
+        <Notice tone="warning">
+          Couldn&apos;t check your account since{" "}
+          {new Date(data.uncheckedSince).toLocaleString([], {
+            dateStyle: "medium",
+            timeStyle: "short",
+          })}
+          . Machines already linked keep working; new links wait until it&apos;s
+          back.
+        </Notice>
+      )}
       {data.entitlements && !entitled && (
-        <div className="flex flex-col gap-2 rounded-lg border p-3 sm:flex-row sm:items-center">
-          <p className="flex-1 text-sm">
-            Link your machines with Pro: tasks move between them over any
-            network, end-to-end encrypted.
-          </p>
-          <Button asChild variant="outline" className="min-h-11 sm:min-h-9">
-            <a
-              href={`${CONNECT_SITE}/settings/billing`}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Upgrade
-              <ExternalLink className="h-3.5 w-3.5" />
-            </a>
-          </Button>
-        </div>
+        <Notice
+          action={
+            <Button asChild variant="outline" className="min-h-11 sm:min-h-9">
+              <a href={UPGRADE_URL} target="_blank" rel="noopener noreferrer">
+                Upgrade
+                <ExternalLink className="h-3.5 w-3.5" />
+              </a>
+            </Button>
+          }
+        >
+          Link your machines with Pro: tasks move between them over any network,
+          end-to-end encrypted.
+        </Notice>
       )}
       {entitled && <WaitingLinks />}
       {data.error && (

package/components/Hosts/HostRow.tsx

@@ -1,17 +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;
 
@@ -25,9 +85,7 @@ export function HostRow({ host }: { host: Host }) {
             {isLocal
               ? "Where agent-os is running"
               : viaConnect
-                ? host.linked
-                  ? "Linked through Connect · tasks run on its AgentOS"
-                  : "Through Connect · not linked"
+                ? connectLine(host)
                 : host.linked
                   ? `${host.ssh_target} · tasks run on its AgentOS`
                   : host.ssh_target}
@@ -70,16 +128,46 @@ export function HostRow({ host }: { host: Host }) {
                 </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={viaConnect ? "Unlink and remove" : "Remove machine"}
-            >
-              <Trash2 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>
@@ -107,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/IncomingLinkSheet.tsx

@@ -28,6 +28,9 @@ function Origin({ request }: { request: PendingView }) {
   );
 }
 
+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,
@@ -46,7 +49,12 @@ export function IncomingLinkSheet({
     onClose();
   };
   const left = (accept.error as { attemptsLeft?: number } | null)?.attemptsLeft;
-  const done = accept.data;
+  // 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 (
@@ -154,8 +162,9 @@ export function IncomingLinks() {
   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));
+  const shown = requests.filter((r) => !later?.includes(r.id));
+  const first = shown[0];
+  const hidden = shown.length === 0;
   return (
     <>
       {first && !open && !hidden && (
@@ -166,8 +175,8 @@ export function IncomingLinks() {
           <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)` : ""}
+              <span className="font-medium">{first.name}</span> {asking(first)}
+              {shown.length > 1 ? ` (+${shown.length - 1} more)` : ""}
             </p>
             <Origin request={first} />
           </div>
@@ -176,20 +185,29 @@ export function IncomingLinks() {
             className="min-h-11 sm:min-h-8"
             onClick={() => setOpen(first)}
           >
-            Review
+            {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(requests.map((r) => r.id).join(" "))}
+            onClick={() =>
+              setLater(`${later ?? ""} ${shown.map((r) => r.id).join(" ")}`)
+            }
           >
             <X className="h-4 w-4" />
           </Button>
         </div>
       )}
-      <IncomingLinkSheet request={open} onClose={() => setOpen(null)} />
+      <IncomingLinkSheet
+        request={open}
+        onClose={() => {
+          // Answered, or put off: either way it stops covering the page.
+          if (open) setLater(`${later ?? ""} ${open.id}`);
+          setOpen(null);
+        }}
+      />
     </>
   );
 }
@@ -209,7 +227,7 @@ export function WaitingLinks() {
           <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
+              <span className="font-medium">{r.name}</span> {asking(r)}
             </p>
             <Origin request={r} />
           </div>
@@ -218,7 +236,7 @@ export function WaitingLinks() {
             className="min-h-11 sm:min-h-8"
             onClick={() => setOpen(r)}
           >
-            Type code
+            {r.state === "accepted" ? "Show code" : "Type code"}
           </Button>
         </div>
       ))}

package/components/Hosts/PeerActivitySheet.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import { ArrowDownLeft, ArrowUpRight } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { usePeerAudit } from "@/data/peers";
+import type { AuditRow, Outcome } from "@/lib/peer/audit";
+import { relativeTime } from "@/lib/schedules/when";
+import { cn } from "@/lib/utils";
+import { SHEET } from "./sheet";
+
+const REFUSED: Record<Exclude<Outcome, "ok">, string> = {
+  denied_route: "route not open to it",
+  bad_envelope: "malformed",
+  too_large: "too large",
+  too_slow: "too slow",
+  busy: "busy",
+  bad_sig: "bad signature",
+  stale: "clocks differ",
+  replay: "replayed",
+  unknown_peer: "not linked",
+  suspended: "suspended",
+};
+
+function Row({ row }: { row: AuditRow }) {
+  const Arrow = row.direction === "in" ? ArrowDownLeft : ArrowUpRight;
+  const refused = row.outcome !== "ok";
+  return (
+    <li className="flex items-start gap-2 py-2">
+      <Arrow
+        className="text-muted-foreground mt-0.5 h-4 w-4 shrink-0"
+        aria-label={row.direction === "in" ? "Called here" : "Called there"}
+      />
+      <div className="min-w-0 flex-1">
+        <p className="truncate font-mono text-xs">
+          {row.method} {row.route}
+        </p>
+        <p className="text-muted-foreground text-xs">
+          {relativeTime(row.at)}
+          {row.count > 1 && ` · ${row.count} calls this hour`}
+          {` · ${Math.round(row.ms)} ms`}
+        </p>
+      </div>
+      <span
+        className={cn(
+          "shrink-0 rounded-md px-1.5 py-0.5 text-xs tabular-nums",
+          refused
+            ? "bg-destructive/10 text-destructive"
+            : row.status >= 400
+              ? "bg-amber-500/10 text-amber-700 dark:text-amber-400"
+              : "bg-muted text-muted-foreground"
+        )}
+      >
+        {refused ? REFUSED[row.outcome as Exclude<Outcome, "ok">] : row.status}
+      </span>
+    </li>
+  );
+}
+
+/** Machines → a linked machine → Activity: every call, both ways. */
+export function PeerActivitySheet({
+  hostId,
+  name,
+  onClose,
+}: {
+  hostId: string | null;
+  name: string;
+  onClose: () => void;
+}) {
+  const { data: rows, isPending, error } = usePeerAudit(hostId);
+  return (
+    <Dialog open={!!hostId} onOpenChange={(o) => !o && onClose()}>
+      <DialogContent className={cn(SHEET, "max-h-[85vh] [&>*]:min-w-0")}>
+        <DialogHeader>
+          <DialogTitle>Activity with {name}</DialogTitle>
+          <DialogDescription>
+            Calls between this machine and {name} over the last 30 days. Reads
+            repeated within an hour are counted on one line.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="-mx-1 max-h-[60vh] overflow-y-auto px-1">
+          {isPending && hostId ? (
+            <div className="space-y-2" aria-label="Loading">
+              {[0, 1, 2].map((i) => (
+                <div
+                  key={i}
+                  className="bg-muted/40 h-10 animate-pulse rounded-md"
+                />
+              ))}
+            </div>
+          ) : error ? (
+            <p className="text-destructive text-sm">{error.message}</p>
+          ) : !rows?.length ? (
+            <p className="text-muted-foreground text-sm">No calls yet.</p>
+          ) : (
+            <ul className="space-y-0.5">
+              {rows.map((r, i) => (
+                <Row key={`${r.at}-${i}`} row={r} />
+              ))}
+            </ul>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/components/SessionList/GroupShelves.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+import { useState } from "react";
+import { ChevronDown, Folder, MoreHorizontal } from "lucide-react";
+import type { GroupShelf } from "@/lib/sidebar/shelves";
+import {
+  useDeleteGroup,
+  useReorderGroups,
+  useUpdateGroup,
+} from "@/data/session-groups";
+import { Input } from "@/components/ui/input";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { cn } from "@/lib/utils";
+import { SessionRow } from "./SessionRow";
+
+function GroupHeader({
+  shelf,
+  siblings,
+  workspaceName,
+}: {
+  shelf: GroupShelf;
+  siblings: GroupShelf[];
+  workspaceName?: string;
+}) {
+  const { group, rows, rollup } = shelf;
+  const update = useUpdateGroup();
+  const reorder = useReorderGroups();
+  const remove = useDeleteGroup();
+  const [renaming, setRenaming] = useState(false);
+  const [name, setName] = useState(group.name);
+  const at = siblings.findIndex((s) => s.group.id === group.id);
+  const move = (by: -1 | 1) => {
+    const ids = siblings.map((s) => s.group.id);
+    ids.splice(at + by, 0, ids.splice(at, 1)[0]);
+    reorder.mutate({ workspaceId: group.workspace_id, ids });
+  };
+  const commit = () => {
+    const next = name.trim();
+    setRenaming(false);
+    if (next && next !== group.name)
+      update.mutate({ id: group.id, name: next });
+    else setName(group.name);
+  };
+
+  if (renaming)
+    return (
+      <div className="px-2.5 pt-3.5 pb-1.5">
+        <Input
+          autoFocus
+          value={name}
+          maxLength={60}
+          aria-label="Group name"
+          className="h-11 md:h-8"
+          onChange={(e) => setName(e.target.value)}
+          onBlur={commit}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") commit();
+            if (e.key === "Escape") {
+              setName(group.name);
+              setRenaming(false);
+            }
+          }}
+        />
+      </div>
+    );
+
+  return (
+    <div className="text-muted-foreground/70 group/header flex items-center pr-1 pl-2.5">
+      <button
+        type="button"
+        onClick={() =>
+          update.mutate({ id: group.id, collapsed: !group.collapsed })
+        }
+        aria-expanded={!group.collapsed}
+        className="hover:text-foreground flex min-h-11 min-w-0 flex-1 items-center gap-1 pt-2 text-left text-[11px] font-medium tracking-[0.08em] uppercase md:min-h-8"
+      >
+        <Folder aria-hidden className="h-3 w-3 shrink-0" />
+        <span className="truncate">{group.name}</span>
+        <span className="shrink-0">· {rows.length}</span>
+        {rollup.needsYou > 0 && (
+          <span className="shrink-0 text-amber-600 normal-case dark:text-amber-400">
+            · {rollup.needsYou} needs you
+          </span>
+        )}
+        {workspaceName && (
+          <span className="bg-muted text-muted-foreground ml-1 truncate rounded px-1.5 py-0.5 text-[10px] normal-case">
+            {workspaceName}
+          </span>
+        )}
+        <ChevronDown
+          aria-hidden
+          className={cn(
+            "h-3 w-3 shrink-0 transition-transform",
+            group.collapsed && "-rotate-90"
+          )}
+        />
+      </button>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <button
+            type="button"
+            aria-label={`${group.name} options`}
+            className="hover:bg-muted flex h-11 w-11 shrink-0 items-center justify-center rounded-md md:h-8 md:w-8 md:opacity-0 md:group-hover/header:opacity-100 md:focus-visible:opacity-100 md:data-[state=open]:opacity-100 [@media(hover:none)]:md:h-11 [@media(hover:none)]:md:w-11 [@media(hover:none)]:md:opacity-100"
+          >
+            <MoreHorizontal className="h-4 w-4" />
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-44">
+          <DropdownMenuItem
+            className="min-h-11 md:min-h-8"
+            onSelect={() => setRenaming(true)}
+          >
+            Rename
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            className="min-h-11 md:min-h-8"
+            disabled={at <= 0}
+            onSelect={() => move(-1)}
+          >
+            Move up
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            className="min-h-11 md:min-h-8"
+            disabled={at < 0 || at >= siblings.length - 1}
+            onSelect={() => move(1)}
+          >
+            Move down
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            className="min-h-11 md:min-h-8"
+            onSelect={() =>
+              update.mutate({ id: group.id, collapsed: !group.collapsed })
+            }
+          >
+            {group.collapsed ? "Unfold" : "Fold"}
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            variant="destructive"
+            className="min-h-11 md:min-h-8"
+            onSelect={() => remove.mutate({ id: group.id, name: group.name })}
+          >
+            Delete group
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}
+
+// The user's groups, in order, between Pinned and the status shelves. A
+// folded group keeps its header and counts; an auto-settled member is muted.
+export function GroupShelves({
+  groups,
+  workspaceNames,
+}: {
+  groups: GroupShelf[];
+  // Set when more than one workspace's groups show, to tag each header.
+  workspaceNames?: Map<string, string>;
+}) {
+  return groups.map((shelf) => {
+    const { group } = shelf;
+    const siblings = groups.filter(
+      (g) => g.group.workspace_id === group.workspace_id
+    );
+    const empty = !group.collapsed && shelf.rows.length === 0;
+    return (
+      <section key={group.id} aria-label={group.name}>
+        <GroupHeader
+          shelf={shelf}
+          siblings={siblings}
+          workspaceName={
+            workspaceNames && group.workspace_id
+              ? workspaceNames.get(group.workspace_id)
+              : undefined
+          }
+        />
+        {empty && (
+          <p className="text-muted-foreground/70 px-2.5 pb-2 text-xs">
+            Nothing here yet · move a session in from its ⋯ menu
+          </p>
+        )}
+        {(group.collapsed ? [] : shelf.rows).map((r) => (
+          <SessionRow key={r.session.id} row={r} muted={r.settled === "auto"} />
+        ))}
+      </section>
+    );
+  });
+}