@saadnvd1/agent-os 0.3.700 → 0.3.723

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/Models/AgentRoleCard.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { AlertTriangle } from "lucide-react";
+import type { AgentRoleView } from "@/lib/models/agent-roles-view";
+import { cn } from "@/lib/utils";
+import { RoleModelSelect } from "./RoleModelSelect";
+
+const SOURCE: Record<string, string> = {
+  task: "Set for the task",
+  project: "From this project",
+  workspace: "From the workspace",
+  settings: "Set in Settings",
+  env: "From the server's environment",
+  inherited: "Same as Gate review until set here",
+  default: "Default",
+};
+
+const initial = (label: string) => label.slice(0, 1);
+
+// One role: what it does, the model it runs on, where that came from, and
+// whether the model's server answers. A role whose local model is down says so.
+export function AgentRoleCard({
+  role,
+  scope,
+  pending,
+  onChange,
+  onFallback,
+}: {
+  role: AgentRoleView;
+  scope: "settings" | "workspace" | "project";
+  pending: boolean;
+  onChange: (ref: string | null) => void;
+  onFallback: (ref: string | null) => void;
+}) {
+  const down = role.choice?.availability.state === "down";
+  const label = `Default (${role.default.split("/").slice(1).join("/")})`;
+  const inheritLabel =
+    scope === "settings"
+      ? role.modelRole === "advise"
+        ? "Same as Gate review"
+        : label
+      : "Inherit";
+  return (
+    <li
+      className={cn(
+        "bg-muted/40 space-y-2 rounded-xl px-3 py-3",
+        down && "ring-destructive/50 ring-1"
+      )}
+    >
+      <label htmlFor={`agent-role-${role.id}`} className="flex gap-2.5">
+        <span className="bg-accent text-primary grid h-8 w-8 shrink-0 place-items-center rounded-lg text-sm font-semibold">
+          {initial(role.label)}
+        </span>
+        <span className="min-w-0">
+          <span className="block text-sm font-medium">{role.label}</span>
+          <span className="text-muted-foreground block text-xs">
+            {role.purpose}
+          </span>
+        </span>
+      </label>
+      <RoleModelSelect
+        id={`agent-role-${role.id}`}
+        value={role.value}
+        inheritLabel={
+          role.value === null && role.binding
+            ? `${inheritLabel} · ${role.binding.ref.split("/").slice(1).join("/")}`
+            : inheritLabel
+        }
+        disabled={pending}
+        onChange={onChange}
+      />
+      <p className="text-muted-foreground text-xs">
+        {role.error
+          ? role.error
+          : role.binding
+            ? `${SOURCE[role.binding.source] ?? role.binding.source}${role.choice?.endpoint ? ` · ${role.choice.endpoint}` : ""}`
+            : ""}
+      </p>
+      {down && (
+        <div
+          role="alert"
+          className="bg-destructive/10 text-foreground ring-destructive/35 flex gap-2 rounded-lg p-2.5 text-xs ring-1"
+        >
+          <AlertTriangle className="text-destructive mt-0.5 h-3.5 w-3.5 shrink-0" />
+          <span>
+            <b className="font-medium">
+              This model&apos;s server isn&apos;t answering.
+            </b>{" "}
+            {role.choice?.availability.error
+              ? `${role.choice.availability.error}. `
+              : ""}
+            New {role.label} sessions can&apos;t start until it is back
+            {role.fallback ? ", or you start on the fallback" : ""}.
+          </span>
+        </div>
+      )}
+      {scope === "settings" && (
+        <div className="flex flex-wrap items-center gap-2">
+          <span className="text-muted-foreground text-xs">Fallback</span>
+          <div className="min-w-44 flex-1">
+            <RoleModelSelect
+              id={`agent-role-fallback-${role.id}`}
+              value={role.fallback}
+              inheritLabel="None (don't fall back)"
+              claudeOnly
+              disabled={pending}
+              onChange={onFallback}
+            />
+          </div>
+        </div>
+      )}
+    </li>
+  );
+}

package/components/Models/AgentRolesSection.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import { useState } from "react";
+import { useAgentRolesQuery, useSaveAgentRoles } from "@/data/models";
+import { useProjectsQuery } from "@/data/projects/queries";
+import { useWorkspacesQuery } from "@/data/workspaces";
+import type { RoleMap } from "@/lib/models/config";
+import type { RoleScope } from "@/lib/models/agent-roles-view";
+import { cn } from "@/lib/utils";
+import { AgentRoleCard } from "./AgentRoleCard";
+
+const SCOPES: { id: RoleScope; label: string }[] = [
+  { id: "settings", label: "Default" },
+  { id: "workspace", label: "Workspace" },
+  { id: "project", label: "Project" },
+];
+
+// Settings > Agent roles: the model each of Developer, Analyst, Reviewer and
+// Supervisor runs on, for everything or for one workspace or project.
+export function AgentRolesSection() {
+  const [scope, setScope] = useState<RoleScope>("settings");
+  const [target, setTarget] = useState<string | null>(null);
+  const workspaces = useWorkspacesQuery();
+  const projects = useProjectsQuery();
+  const options =
+    scope === "workspace"
+      ? (workspaces.data ?? []).map((w) => ({ id: w.id, name: w.name }))
+      : scope === "project"
+        ? (projects.data ?? [])
+            .filter((p) => !p.is_uncategorized)
+            .map((p) => ({ id: p.id, name: p.name }))
+        : [];
+  const id = scope === "settings" ? null : (target ?? options[0]?.id ?? null);
+  const { data, isPending, isError, error } = useAgentRolesQuery(scope, id);
+  const save = useSaveAgentRoles(scope, id);
+
+  const saved = (key: "value" | "fallback"): RoleMap =>
+    Object.fromEntries(
+      (data?.roles ?? [])
+        .filter((r) => r[key])
+        .map((r) => [r.modelRole, r[key] as string])
+    );
+  const setRole = (modelRole: string, ref: string | null) => {
+    const roles: RoleMap = { ...saved("value") };
+    if (ref) roles[modelRole as keyof RoleMap] = ref;
+    else delete roles[modelRole as keyof RoleMap];
+    save.mutate({ roles });
+  };
+  const setFallback = (modelRole: string, ref: string | null) => {
+    const fallbacks: RoleMap = { ...saved("fallback") };
+    if (ref) fallbacks[modelRole as keyof RoleMap] = ref;
+    else delete fallbacks[modelRole as keyof RoleMap];
+    save.mutate({ roles: saved("value"), fallbacks });
+  };
+
+  return (
+    <div className="space-y-4">
+      <div
+        role="tablist"
+        className="bg-muted inline-flex max-w-full gap-0.5 overflow-x-auto rounded-xl p-0.5"
+      >
+        {SCOPES.map((s) => (
+          <button
+            key={s.id}
+            role="tab"
+            aria-selected={scope === s.id}
+            type="button"
+            onClick={() => {
+              setScope(s.id);
+              setTarget(null);
+            }}
+            className={cn(
+              "h-11 rounded-lg px-3 text-sm whitespace-nowrap md:h-8",
+              scope === s.id
+                ? "bg-background text-foreground ring-border ring-1"
+                : "text-muted-foreground hover:text-foreground"
+            )}
+          >
+            {s.label}
+          </button>
+        ))}
+      </div>
+      {scope !== "settings" && (
+        <select
+          aria-label={scope === "workspace" ? "Workspace" : "Project"}
+          value={id ?? ""}
+          onChange={(e) => setTarget(e.target.value)}
+          className="border-input bg-background h-11 w-full rounded-md border px-3 text-sm md:h-9"
+        >
+          {options.length === 0 && <option value="">None yet</option>}
+          {options.map((o) => (
+            <option key={o.id} value={o.id}>
+              {o.name}
+            </option>
+          ))}
+        </select>
+      )}
+      <p className="text-muted-foreground text-xs">
+        The model each role runs on. A workspace or project can override these,
+        and a session can when it starts. A Pi model (a server you run) runs
+        sessions started in the role; tasks and the merge gate stay on Claude
+        Code models. Planning, gate review, scope check, helpers and watchers
+        are in Models.
+      </p>
+      {scope !== "settings" && !id ? (
+        <p className="text-muted-foreground text-sm">
+          There is no {scope} to set roles for yet.
+        </p>
+      ) : isPending ? (
+        <div className="bg-muted/40 h-64 animate-pulse rounded-lg" />
+      ) : isError ? (
+        <p className="text-destructive text-sm">{error.message}</p>
+      ) : data ? (
+        <ul className="space-y-2.5">
+          {data.roles.map((r) => (
+            <AgentRoleCard
+              key={r.id}
+              role={r}
+              scope={scope}
+              pending={save.isPending}
+              onChange={(ref) => setRole(r.modelRole, ref)}
+              onFallback={(ref) => setFallback(r.modelRole, ref)}
+            />
+          ))}
+        </ul>
+      ) : null}
+      {save.isError && (
+        <p className="text-destructive text-xs">{save.error.message}</p>
+      )}
+    </div>
+  );
+}