@saadnvd1/agent-os 0.3.698 → 0.3.715

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/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/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/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>
+    );
+  });
+}

package/components/SessionList/MoveToGroupMenu.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { useState } from "react";
+import { Check, Folder, Plus, X } from "lucide-react";
+import { useSessionsQuery } from "@/data/sessions";
+import { useAssignGroup, useCreateGroup } from "@/data/session-groups";
+import { Input } from "@/components/ui/input";
+import { Expander, MenuItem, icon, type MenuKind } from "./RowMenuParts";
+
+// "Move to group": the groups of the session's workspace with the current
+// one ticked, a way out, and an inline field that makes a new group and
+// files the session into it.
+export function MoveToGroupMenu({
+  kind,
+  sessionId,
+  groupId,
+  workspaceId,
+}: {
+  kind: MenuKind;
+  sessionId: string;
+  groupId: string | null | undefined;
+  workspaceId: string | null;
+}) {
+  const { data } = useSessionsQuery();
+  const assign = useAssignGroup();
+  const create = useCreateGroup();
+  const [naming, setNaming] = useState(false);
+  const [name, setName] = useState("");
+  const groups = (data?.sessionGroups ?? [])
+    .filter((g) => g.workspace_id === workspaceId)
+    .sort((a, b) => a.sort_order - b.sort_order);
+
+  const make = async () => {
+    const next = name.trim();
+    if (!next) return;
+    const { sessionGroup } = await create.mutateAsync({
+      name: next,
+      workspaceId,
+    });
+    assign.mutate({ ids: [sessionId], groupId: sessionGroup.id });
+    setNaming(false);
+    setName("");
+  };
+
+  return (
+    <Expander kind={kind} icon={Folder} label="Move to group">
+      {groups.map((g) => (
+        <MenuItem
+          key={g.id}
+          kind={kind}
+          onClick={() =>
+            assign.mutate({
+              ids: [sessionId],
+              groupId: g.id === groupId ? null : g.id,
+            })
+          }
+        >
+          <Check className={`${icon} ${g.id === groupId ? "" : "invisible"}`} />
+          <span className="truncate">{g.name}</span>
+        </MenuItem>
+      ))}
+      {groupId && (
+        <MenuItem
+          kind={kind}
+          onClick={() => assign.mutate({ ids: [sessionId], groupId: null })}
+        >
+          <X className={icon} />
+          Remove from group
+        </MenuItem>
+      )}
+      {naming ? (
+        <div className="px-1.5 py-1">
+          <Input
+            autoFocus
+            value={name}
+            maxLength={60}
+            placeholder="Group name"
+            aria-label="New group name"
+            className="h-11 md:h-8"
+            onChange={(e) => setName(e.target.value)}
+            onKeyDown={(e) => {
+              // Keys here are typing, not the menu's typeahead.
+              e.stopPropagation();
+              if (e.key === "Enter") void make();
+            }}
+          />
+          <p className="text-muted-foreground/70 px-1 pt-1 text-[11px]">
+            ↵ create
+          </p>
+        </div>
+      ) : (
+        <MenuItem
+          kind={kind}
+          onSelect={(e) => {
+            e.preventDefault();
+            setNaming(true);
+          }}
+        >
+          <Plus className={icon} />
+          New group…
+        </MenuItem>
+      )}
+    </Expander>
+  );
+}

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";
@@ -9,6 +9,7 @@ import { headerParts } from "@/lib/orchestrator/header-line";
 import { cn } from "@/lib/utils";
 import { usageLabel, useSessionUsage } from "@/data/load";
 import { useRowContext } from "./RowContext";
+import { OverlapPill } from "@/components/Claims/OverlapPill";
 import { pauseSubtitle } from "@/lib/sidebar/paused";
 
 const ATTENTION = (part: string) => part === "paused" || /\basks?$/.test(part);
@@ -22,11 +23,14 @@ export function RowSubtitle({
   detail,
   live,
   hideHost = false,
+  groupName,
 }: {
   session: Session;
   detail?: string | null;
   live?: LiveInput;
   hideHost?: boolean;
+  // Set on a finished session that keeps its group: Done shows where it goes back to.
+  groupName?: string;
 }) {
   const ctx = useRowContext();
   // What its processes use, on a busy session: "3.1 cores · 4.2 GB".
@@ -63,6 +67,7 @@ export function RowSubtitle({
   return (
     <span className="flex min-w-0 items-center gap-1.5">
       <LiveLine {...live} />
+      {session.overlap && <OverlapPill overlap={session.overlap} />}
       {pause && (
         <span className="flex min-w-0 items-center gap-1 text-xs text-amber-600 dark:text-amber-400">
           <Pause aria-hidden className="h-3 w-3 shrink-0" />
@@ -77,6 +82,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"
@@ -92,13 +107,14 @@ export function RowSubtitle({
           </span>
         </span>
       )}
-      {(project || detail || usage || session.placed_note) && (
+      {(project || detail || usage || session.placed_note || groupName) && (
         <span className="text-muted-foreground/70 min-w-0 truncate text-xs">
           {[
             usage && usageLabel(usage),
             detail?.slice(0, 200),
             session.placed_note,
             project,
+            groupName,
           ]
             .filter(Boolean)
             .join(" · ")}