@saadnvd1/agent-os 0.3.839 → 0.3.848

package/app/api/approvals/route.ts

@@ -1,6 +1,7 @@
 import { NextRequest, NextResponse } from "next/server";
 import type { AuthenticationResponseJSON } from "@simplewebauthn/server";
 import { switchNoApprovals } from "@/lib/approvals/enable";
+import { describeApproval } from "@/lib/approvals/describe";
 import { listAutoApprovals, noApprovalsOn } from "@/lib/approvals/no-approvals";
 import { NO_APPROVALS_ON_PRESENCE } from "@/lib/orchestrator/presence-binding";
 import { requireApprover } from "@/lib/security/approver";
@@ -8,7 +9,10 @@ import { relyingParty, verifyPresence } from "@/lib/security/presence";
 import { refusalResponse } from "@/lib/security/presence-http";
 import { requireLocalTrust } from "@/lib/security/route-guard";
 
-const view = () => ({ on: noApprovalsOn(), audit: listAutoApprovals(20) });
+const view = () => ({
+  on: noApprovalsOn(),
+  audit: listAutoApprovals(100).map(describeApproval),
+});
 
 // GET /api/approvals - whether No approvals mode is on, and its latest audit lines
 export function GET() {

package/app/api/health/config/route.ts

@@ -2,6 +2,7 @@ import { NextRequest, NextResponse } from "next/server";
 import {
   HEALTH_DEFAULTS,
   HEALTH_LABELS,
+  HEALTH_META,
   healthConfig,
   setHealthConfig,
 } from "@/lib/health/config";
@@ -10,6 +11,7 @@ const body = () => ({
   config: healthConfig(),
   defaults: HEALTH_DEFAULTS,
   labels: HEALTH_LABELS,
+  meta: HEALTH_META,
 });
 
 // GET /api/health/config - the thresholds, their defaults and labels.

package/app/api/health/route.ts

@@ -1,9 +1,11 @@
 import { NextResponse } from "next/server";
+import { buildId } from "@/lib/build";
 
 const startedAt = new Date(Date.now() - process.uptime() * 1000).toISOString();
 
 // GET /api/health - the server is up and answering; when it started, so a
-// deploy check can tell it restarted after a merge (lib/away/deploy.ts).
+// deploy check can tell it restarted after a merge, and the build it runs, so
+// a merge is only "deployed" when that build contains it (lib/away/deploy.ts).
 export function GET() {
-  return NextResponse.json({ ok: true, startedAt });
+  return NextResponse.json({ ok: true, startedAt, build: buildId() });
 }

package/app/globals.css

@@ -348,3 +348,9 @@ body {
   border-color: transparent;
   color: hsl(var(--muted-foreground));
 }
+
+/* Toasts never sit over the Settings dialog: a rejected save shows on its
+   row (useAutoSave), and the update toast comes back when Settings closes. */
+html[data-settings-open] [data-sonner-toaster] {
+  display: none;
+}

package/components/Audits/AuditsPanel.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useRef, useState } from "react";
 import { ArrowLeft, ChevronRight } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { ListSection } from "@/components/Settings/ListSection";
 import { Markdown } from "@/components/Chat/Markdown";
 import {
   useAuditReportQuery,
@@ -26,12 +27,16 @@ const day = (iso: string) =>
     minute: "2-digit",
   });
 
-function stats(a: AuditListItem): string {
-  if (a.kind !== "sessions")
-    return a.findings === undefined
-      ? a.title
-      : `${a.title} · ${a.findings} findings`;
-  return `${a.sessions ?? 0} sessions · ${tokens(a.tokensRead ?? 0)} tokens · ${a.findings ?? 0} findings`;
+// The line under the title: when, then what it found.
+function detail(a: AuditListItem): string {
+  const parts = [day(a.at)];
+  if (a.kind === "sessions")
+    parts.push(
+      `${a.sessions ?? 0} sessions`,
+      `${tokens(a.tokensRead ?? 0)} tokens`
+    );
+  if (a.findings !== undefined) parts.push(`${a.findings} findings`);
+  return parts.join(" · ");
 }
 
 function AuditRow({
@@ -46,24 +51,15 @@ function AuditRow({
       type="button"
       onClick={onOpen}
       data-audit={`${audit.kind}/${audit.id}`}
-      className="border-border/60 hover:bg-foreground/[0.03] focus-visible:ring-ring flex min-h-14 w-full items-center gap-3 rounded-xl border px-3 py-2.5 text-left outline-none focus-visible:ring-2"
+      className="hover:bg-foreground/[0.03] focus-visible:ring-ring flex min-h-14 w-full items-center gap-3 px-3 py-2.5 text-left outline-none focus-visible:ring-2 focus-visible:ring-inset"
     >
       <div className="min-w-0 flex-1 space-y-0.5">
-        <div className="flex min-w-0 flex-col gap-0.5 md:flex-row md:items-center md:gap-2">
-          <span className="flex shrink-0 items-center gap-2 text-sm font-medium">
-            {day(audit.at)}
-            {audit.kind !== "sessions" && (
-              <span className="bg-muted text-muted-foreground rounded px-1.5 py-0.5 text-[11px] font-normal">
-                {audit.kind}
-              </span>
-            )}
-          </span>
-          <span className="text-muted-foreground truncate text-[11px]">
-            {stats(audit)}
-          </span>
-        </div>
+        <p className="line-clamp-2 text-sm font-medium break-words">
+          {audit.title}
+        </p>
+        <p className="text-muted-foreground text-xs">{detail(audit)}</p>
         {audit.headline && (
-          <p className="text-muted-foreground truncate text-xs">
+          <p className="text-muted-foreground line-clamp-2 text-xs break-words">
             {audit.headline}
           </p>
         )}
@@ -140,22 +136,33 @@ export function AuditsPanel() {
     return <div className="bg-muted/40 h-32 animate-pulse rounded-xl" />;
   if (audits.error)
     return <p className="text-destructive text-sm">{audits.error.message}</p>;
-  if (!audits.data?.length)
-    return (
-      <p className="text-muted-foreground text-sm">
-        No audits yet. Run <code>/session-audit</code> in a session on this
-        project to audit what your sessions spent and repeated.
-      </p>
-    );
+  const all = audits.data ?? [];
+  // A "While you were away" digest is a different thing from an audit.
+  const away = all.filter((a) => a.kind === "away");
+  const real = all.filter((a) => a.kind !== "away");
+  const key = (a: AuditListItem) => `${a.kind}/${a.id}`;
+  const row = (a: AuditListItem) => (
+    <AuditRow audit={a} onOpen={() => setOpen({ kind: a.kind, id: a.id })} />
+  );
   return (
-    <div ref={listRef} className="space-y-2">
-      {audits.data.map((a) => (
-        <AuditRow
-          key={`${a.kind}/${a.id}`}
-          audit={a}
-          onOpen={() => setOpen({ kind: a.kind, id: a.id })}
+    <div ref={listRef} className="space-y-5">
+      <ListSection
+        title="Session audits"
+        help="Where sessions spent tokens and repeated work."
+        items={real}
+        keyOf={key}
+        render={row}
+        empty="No audits yet. Run /session-audit in a session on this project to audit what your sessions spent and repeated."
+      />
+      {away.length > 0 && (
+        <ListSection
+          title="While you were away"
+          items={away}
+          keyOf={key}
+          render={row}
+          empty=""
         />
-      ))}
+      )}
     </div>
   );
 }

package/components/Chat/quote-selection.test.ts

@@ -244,6 +244,12 @@ describe("Enter quotes", () => {
     expect(press(true, key(button)).handled).toBe(false);
   });
 
+  it("fires when the selection ends on the button row below a reply", () => {
+    const button = document.querySelector("#a2 button")!;
+    select([reply(), 4], [button, 0]);
+    expect(press(true, key(root)).handled).toBe(true);
+  });
+
   it.each(["shiftKey", "metaKey", "ctrlKey", "altKey"])(
     "ignores Enter with %s",
     (mod) => {

package/components/Chat/quote-selection.ts

@@ -120,18 +120,21 @@ export function placeQuote(
   };
 }
 
-const TYPES_OR_ACTS =
-  'input, textarea, select, button, a[href], summary, [contenteditable]:not([contenteditable="false"])';
+const TYPES =
+  'input, textarea, select, [contenteditable]:not([contenteditable="false"])';
+const TYPES_OR_ACTS = `${TYPES}, button, a[href], summary`;
 
-function inTypingOrAction(node: Node | null): boolean {
+function inside(node: Node | null, selector: string): boolean {
   const el =
     node && (node.nodeType === 1 ? (node as Element) : node.parentElement);
-  return !!el?.closest(TYPES_OR_ACTS);
+  return !!el?.closest(selector);
 }
 
-// Whether Enter quotes: the button is showing for a live selection, and
-// neither the key's target nor the selection sits in the composer or any
-// other field, where Enter keeps its own meaning.
+// Whether Enter quotes: the button is showing for a live selection, the key
+// isn't aimed at a field or a focused button, and the selection doesn't sit
+// in the composer or any other field, where Enter keeps its own meaning. A
+// selection may end on a button: triple-clicking a reply's last line ends it
+// at the start of the copy/quote row below.
 export function enterQuotes(
   visible: boolean,
   target: EventTarget | null,
@@ -140,9 +143,9 @@ export function enterQuotes(
   if (!visible || !sel || sel.isCollapsed || !sel.rangeCount) return false;
   if (!sel.toString().trim()) return false;
   return (
-    !inTypingOrAction(target as Node | null) &&
-    !inTypingOrAction(sel.anchorNode) &&
-    !inTypingOrAction(sel.focusNode)
+    !inside(target as Node | null, TYPES_OR_ACTS) &&
+    !inside(sel.anchorNode, TYPES) &&
+    !inside(sel.focusNode, TYPES)
   );
 }
 

package/components/Devices/ConnectCard.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { Cloud } from "lucide-react";
-import { Switch } from "@/components/ui/switch";
+import { SettingRow } from "@/components/Settings/SettingRow";
+import { SwitchSetting } from "@/components/Settings/settings-fields";
 import type { ConnectStatus } from "@/lib/connect/serve";
 import {
   CONNECT_SIGN_UP,
@@ -9,6 +9,14 @@ import {
   connectView,
 } from "@/lib/connect/view";
 
+// An address is one token: keep it whole and cut it with an ellipsis rather
+// than through a letter.
+export const Address = ({ children }: { children: string }) => (
+  <span className="text-foreground inline-block max-w-full truncate align-bottom font-mono">
+    {children}
+  </span>
+);
+
 export function ConnectCard({
   connect,
   canManage,
@@ -16,62 +24,50 @@ export function ConnectCard({
 }: {
   connect: ConnectStatus;
   canManage: boolean;
-  onToggle: (on: boolean) => void;
+  onToggle: (on: boolean) => Promise<unknown>;
 }) {
   const { linked: enrolled, on } = connectView(connect);
-  return (
-    <div className="bg-muted/40 flex items-start gap-3 rounded-lg px-3 py-2.5">
-      <Cloud className="text-muted-foreground mt-0.5 h-4 w-4 shrink-0" />
-      <div className="min-w-0 flex-1">
-        <p className="text-sm font-medium">
-          Connect{" "}
-          <span className="text-muted-foreground font-normal">
-            · {STATE[connect.state]}
-          </span>
-        </p>
-        <p className="text-muted-foreground text-xs break-all">
-          {connect.hostname ? (
-            <>
-              Reachable from anywhere at{" "}
-              <span className="text-foreground font-mono">
-                https://{connect.hostname}
-              </span>
-              . Cloudflare carries the connection; every request still needs a
-              paired device.
-            </>
-          ) : enrolled ? (
-            <>Linked. The address appears once the tunnel starts.</>
-          ) : (
-            <>
-              Not set up on this machine. Run{" "}
-              <code className="text-foreground font-mono">
-                agent-os connect
-              </code>{" "}
-              in a terminal.{" "}
-              <a
-                href={CONNECT_SIGN_UP}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-foreground flex min-h-11 w-fit items-center underline underline-offset-2 sm:min-h-6"
-              >
-                Set up Connect (free)
-              </a>
-            </>
-          )}
-          {connect.reason && connect.state !== "off"
-            ? ` ${connect.reason.replace(/\.$/, "")}.`
-            : ""}
-        </p>
-      </div>
-      {enrolled && (
-        <Switch
-          checked={on}
-          disabled={!canManage || connect.state === "refused"}
-          onCheckedChange={onToggle}
-          className="mt-0.5"
-          aria-label="Connect"
-        />
+  const label = `Connect · ${STATE[connect.state]}`;
+  const help = (
+    <>
+      {connect.hostname ? (
+        <>
+          Reachable from anywhere at{" "}
+          <Address>{`https://${connect.hostname}`}</Address>. Cloudflare carries
+          the connection; every request still needs a paired device.
+        </>
+      ) : enrolled ? (
+        <>Linked. The address appears once the tunnel starts.</>
+      ) : (
+        <>
+          Not set up on this machine. Run{" "}
+          <code className="text-foreground font-mono">agent-os connect</code> in
+          a terminal.{" "}
+          <a
+            href={CONNECT_SIGN_UP}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-foreground underline underline-offset-2"
+          >
+            Set up Connect (free)
+          </a>
+        </>
       )}
-    </div>
+      {connect.reason && connect.state !== "off"
+        ? ` ${connect.reason.replace(/\.$/, "")}.`
+        : ""}
+    </>
+  );
+  if (!enrolled)
+    return <SettingRow id="connect" label={label} help={help} control={null} />;
+  return (
+    <SwitchSetting
+      id="connect"
+      label={label}
+      help={help}
+      checked={on}
+      locked={!canManage || connect.state === "refused"}
+      onSave={onToggle}
+    />
   );
 }

package/components/Devices/DeviceGroupRow.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { useState } from "react";
+import { Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { InlineConfirm } from "@/components/Settings/InlineConfirm";
+import { useRevokeDevice } from "@/data/devices";
+import type { ListedDevice } from "@/lib/security/devices";
+import { DeviceIcon, lastSeen } from "./DeviceRow";
+
+// Identical devices as one row, with one button to remove the lot.
+export function DeviceGroupRow({
+  devices,
+  canManage,
+}: {
+  devices: ListedDevice[];
+  canManage: boolean;
+}) {
+  const revoke = useRevokeDevice();
+  const [asking, setAsking] = useState(false);
+  const first = devices[0];
+  return (
+    <div className="px-3 py-2.5">
+      <div className="flex items-center gap-3">
+        <DeviceIcon ua={first.user_agent} />
+        <div className="min-w-0 flex-1">
+          <p className="truncate text-sm font-medium">
+            {first.name}
+            <span className="text-muted-foreground ml-1.5 font-normal tabular-nums">
+              × {devices.length}
+            </span>
+          </p>
+          <p className="text-muted-foreground truncate text-xs">
+            Last used {lastSeen(first.last_seen_at)}
+          </p>
+        </div>
+        {canManage && (
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-11 shrink-0 sm:h-8"
+            onClick={() => setAsking(true)}
+            disabled={revoke.isPending}
+            aria-label={`Remove all ${devices.length} ${first.name} devices`}
+          >
+            <Trash2 className="h-4 w-4" />
+            Remove all
+          </Button>
+        )}
+      </div>
+      {asking && (
+        <InlineConfirm
+          label={`Remove ${devices.length} ${first.name} devices`}
+          message={`Remove all ${devices.length} devices called "${first.name}"? Each one has to be paired again to come back.`}
+          confirmLabel={`Remove ${devices.length}`}
+          onConfirm={() => {
+            setAsking(false);
+            for (const d of devices) revoke.mutate(d.id);
+          }}
+          onCancel={() => setAsking(false)}
+        />
+      )}
+    </div>
+  );
+}

package/components/Devices/DeviceRow.tsx

@@ -25,7 +25,7 @@ export function lastSeen(s: string | null, now = Date.now()): string {
   return `${Math.round(mins / 1440)}d ago`;
 }
 
-function DeviceIcon({ ua }: { ua: string | null }) {
+export function DeviceIcon({ ua }: { ua: string | null }) {
   const className = "text-muted-foreground h-4 w-4 shrink-0";
   if (/iPad|Tablet/i.test(ua ?? "")) return <Tablet className={className} />;
   if (/iPhone|Android|Mobile/i.test(ua ?? ""))
@@ -63,7 +63,7 @@ export function DeviceRow({
   };
 
   return (
-    <div className="bg-muted/40 rounded-lg px-3 py-2.5">
+    <div className="px-3 py-2.5">
       <div className="flex items-center gap-3">
         <DeviceIcon ua={device.user_agent} />
         <div className="min-w-0 flex-1">

package/components/Devices/DevicesPanel.tsx

@@ -1,11 +1,14 @@
 "use client";
 
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { Plus } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { ListSection } from "@/components/Settings/ListSection";
 import { useDevicesQuery } from "@/data/devices";
 import { AddDevicePanel } from "./AddDevicePanel";
+import { DeviceGroupRow } from "./DeviceGroupRow";
 import { DeviceRow } from "./DeviceRow";
+import { groupDevices, type DeviceEntry } from "./group";
 import { NetworkSection } from "./NetworkSection";
 import { PasskeysSection } from "./PasskeysSection";
 
@@ -13,36 +16,40 @@ import { PasskeysSection } from "./PasskeysSection";
 export const canManageDevices = (via: string | null | undefined) =>
   via === "loopback" || via === "tailnet";
 
-// Phones, tablets and other computers that can use this AgentOS, its
-// passkeys, and how they reach it. Settings > Devices & access.
+// How devices reach this machine, its passkeys, then the devices paired to
+// it. Settings > Devices & access.
 export function DevicesPanel() {
   const { data, isPending, isError, error } = useDevicesQuery(true);
   const [adding, setAdding] = useState(false);
   const canManage = canManageDevices(data?.current.via);
+  const { recent, older } = useMemo(
+    () => groupDevices(data?.devices ?? [], data?.current.deviceId),
+    [data]
+  );
+  const render = (e: DeviceEntry) =>
+    e.kind === "group" ? (
+      <DeviceGroupRow devices={e.devices} canManage={canManage} />
+    ) : (
+      <DeviceRow
+        device={e.device}
+        isCurrent={e.device.id === data?.current.deviceId}
+        canManage={canManage}
+      />
+    );
 
   return (
-    <div className="space-y-4">
-      <p className="text-muted-foreground text-sm">
-        Phones, tablets and other computers that can use this AgentOS. Each one
-        is paired once and can be removed at any time.
-      </p>
+    <div className="space-y-5">
+      <section className="space-y-2">
+        <h3 className="text-sm font-semibold">Access</h3>
+        <NetworkSection open canManage={canManage} />
+      </section>
 
-      {adding ? (
-        <AddDevicePanel onDone={() => setAdding(false)} />
-      ) : canManage ? (
-        <Button onClick={() => setAdding(true)} className="h-11 w-full sm:h-9">
-          <Plus className="h-4 w-4" />
-          Add a device
-        </Button>
-      ) : (
-        data && (
-          <p className="text-muted-foreground text-sm">
-            Add devices and change access on the machine running AgentOS, or
-            over Tailscale.
-          </p>
-        )
-      )}
+      <section className="space-y-2">
+        <h3 className="text-sm font-semibold">Passkeys</h3>
+        <PasskeysSection open />
+      </section>
 
+      {adding && <AddDevicePanel onDone={() => setAdding(false)} />}
       {data && !data.push.linked && (
         <p className="text-muted-foreground text-sm">
           Phone push needs this machine linked to Connect. Until then,
@@ -55,32 +62,39 @@ export function DevicesPanel() {
           meanwhile.
         </p>
       )}
-
-      <div className="space-y-2">
-        {isPending && (
-          <div className="bg-muted/40 h-14 animate-pulse rounded-lg" />
-        )}
-        {isError && <p className="text-destructive text-sm">{error.message}</p>}
-        {data?.devices.length === 0 && (
-          <p className="text-muted-foreground text-sm">
-            No devices paired yet.
-          </p>
-        )}
-        {data?.devices.map((d) => (
-          <DeviceRow
-            key={d.id}
-            device={d}
-            isCurrent={d.id === data.current.deviceId}
-            canManage={canManage}
-          />
-        ))}
-      </div>
-
-      <p className="pt-2 text-sm font-medium">Passkeys</p>
-      <PasskeysSection open />
-
-      <p className="pt-2 text-sm font-medium">Access</p>
-      <NetworkSection open canManage={canManage} />
+      {isPending && (
+        <div className="bg-muted/40 h-14 animate-pulse rounded-lg" />
+      )}
+      {isError && <p className="text-destructive text-sm">{error.message}</p>}
+      {data && (
+        <ListSection
+          title="Devices"
+          help={
+            canManage
+              ? "Phones, tablets and other computers paired to this AgentOS. Each is paired once and can be removed at any time."
+              : "Add devices and change access on the machine running AgentOS, or over Tailscale."
+          }
+          items={recent}
+          older={older}
+          olderLabel="Not used for a month"
+          keyOf={(e) => e.key}
+          render={render}
+          empty="No devices paired yet."
+          action={
+            canManage &&
+            !adding && (
+              <Button
+                onClick={() => setAdding(true)}
+                size="sm"
+                className="h-11 sm:h-8"
+              >
+                <Plus className="h-4 w-4" />
+                Add a device
+              </Button>
+            )
+          }
+        />
+      )}
     </div>
   );
 }