@saadnvd1/agent-os 0.3.845 → 0.3.851

package/components/Devices/NetworkSection.tsx

@@ -1,11 +1,13 @@
 "use client";
 
-import { SettingToggle as Toggle } from "@/components/Settings/SettingToggle";
+import { SettingSection } from "@/components/Settings/SettingRow";
+import { SwitchSetting } from "@/components/Settings/settings-fields";
 import { useNetworkQuery, useUpdateNetwork } from "@/data/devices";
 import { TailscaleCard } from "./TailscaleCard";
 import { ConnectCard } from "./ConnectCard";
 import { ReachRow } from "@/components/Reach/ReachRow";
 
+// How devices reach this machine: Connect, Wi-Fi and Tailscale.
 export function NetworkSection({
   open,
   canManage,
@@ -24,31 +26,32 @@ export function NetworkSection({
   return (
     <div className="space-y-2">
       <ReachRow enabled={open} />
-      <ConnectCard
-        connect={data.connect}
-        canManage={canManage}
-        onToggle={(connect) => update.mutate({ connect })}
-      />
-      <TailscaleCard tailscale={data.tailscale} />
-      <Toggle
-        title="Allow devices on this Wi-Fi"
-        detail="Paired devices on the same network can connect. Use it on networks you trust: Wi-Fi traffic isn't encrypted."
-        checked={data.lan.on}
-        locked={data.lan.locked || !canManage}
-        onChange={(lan) => update.mutate({ lan })}
-      />
-      <Toggle
-        title="Require pairing on Tailscale too"
-        detail="By default anything on your tailnet is trusted. Turn this on if others share your tailnet."
-        checked={data.requirePairingOnTailnet.on}
-        locked={data.requirePairingOnTailnet.locked || !canManage}
-        onChange={(requirePairingOnTailnet) =>
-          update.mutate({ requirePairingOnTailnet })
-        }
-      />
-      {update.error && (
-        <p className="text-destructive text-xs">{update.error.message}</p>
-      )}
+      <SettingSection>
+        <ConnectCard
+          connect={data.connect}
+          canManage={canManage}
+          onToggle={(connect) => update.mutateAsync({ connect })}
+        />
+        <TailscaleCard tailscale={data.tailscale} />
+        <SwitchSetting
+          id="network-lan"
+          label="Allow devices on this Wi-Fi"
+          help="Paired devices on the same network can connect. Use it on networks you trust: Wi-Fi traffic isn't encrypted."
+          checked={data.lan.on}
+          locked={data.lan.locked || !canManage}
+          onSave={(lan) => update.mutateAsync({ lan })}
+        />
+        <SwitchSetting
+          id="network-tailnet-pairing"
+          label="Require pairing on Tailscale too"
+          help="By default anything on your tailnet is trusted. Turn this on if others share your tailnet."
+          checked={data.requirePairingOnTailnet.on}
+          locked={data.requirePairingOnTailnet.locked || !canManage}
+          onSave={(requirePairingOnTailnet) =>
+            update.mutateAsync({ requirePairingOnTailnet })
+          }
+        />
+      </SettingSection>
     </div>
   );
 }

package/components/Devices/TailscaleCard.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { Globe } from "lucide-react";
+import { SettingRow } from "@/components/Settings/SettingRow";
+import { Address } from "./ConnectCard";
 import type { TailscaleState } from "@/lib/tailscale";
 
 const DOWNLOAD = "https://tailscale.com/download";
@@ -12,8 +13,7 @@ export function TailscaleCard({ tailscale }: { tailscale: TailscaleState }) {
       const url = `http://${tailscale.dnsName ?? tailscale.ips[0]}:${window.location.port || 3011}`;
       body = (
         <>
-          Reachable from anywhere on your tailnet at{" "}
-          <span className="text-foreground font-mono break-all">{url}</span>.
+          Reachable from anywhere on your tailnet at <Address>{url}</Address>.
           Install Tailscale on your phone and sign in to the same account to use
           it there.
         </>
@@ -52,12 +52,11 @@ export function TailscaleCard({ tailscale }: { tailscale: TailscaleState }) {
   }
 
   return (
-    <div className="bg-muted/40 flex items-start gap-3 rounded-lg px-3 py-2.5">
-      <Globe 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">Use it away from home</p>
-        <p className="text-muted-foreground text-xs">{body}</p>
-      </div>
-    </div>
+    <SettingRow
+      id="tailscale"
+      label="Use it away from home"
+      help={body}
+      control={null}
+    />
   );
 }

package/components/Devices/group.test.ts

@@ -0,0 +1,66 @@
+import { describe, expect, it } from "vitest";
+import type { ListedDevice } from "@/lib/security/devices";
+import { groupDevices } from "./group";
+
+const NOW = Date.parse("2026-11-02T12:00:00Z");
+const dev = (id: string, name: string, daysAgo: number, ua = "ua") =>
+  ({
+    id,
+    name,
+    user_agent: ua,
+    created_at: "2026-01-01 00:00:00",
+    last_seen_at: new Date(NOW - daysAgo * 86_400_000)
+      .toISOString()
+      .slice(0, 19)
+      .replace("T", " "),
+  }) as unknown as ListedDevice;
+
+describe("groupDevices", () => {
+  it("folds identical devices into one group, newest first", () => {
+    const sims = Array.from({ length: 40 }, (_, i) =>
+      dev(`s${i}`, "Simulator", i / 100)
+    );
+    const { recent, older } = groupDevices(
+      [dev("me", "Laptop", 0, "mac"), ...sims],
+      "me",
+      NOW
+    );
+    expect(older).toHaveLength(0);
+    expect(recent).toHaveLength(2);
+    const group = recent.find((e) => e.kind === "group")!;
+    expect(group.kind === "group" && group.devices).toHaveLength(40);
+    expect(group.device.id).toBe("s0");
+  });
+
+  it("keeps a pair of identical devices as two rows", () => {
+    const { recent } = groupDevices(
+      [dev("a", "Phone", 1), dev("b", "Phone", 2)],
+      null,
+      NOW
+    );
+    expect(recent.map((e) => e.kind)).toEqual(["device", "device"]);
+  });
+
+  it("never folds or ages out the device in use", () => {
+    const list = [
+      dev("me", "Simulator", 90),
+      dev("a", "Simulator", 90),
+      dev("b", "Simulator", 90),
+      dev("c", "Simulator", 90),
+    ];
+    const { recent, older } = groupDevices(list, "me", NOW);
+    expect(recent.map((e) => e.key)).toEqual(["me"]);
+    expect(older).toHaveLength(1);
+    expect(older[0].kind).toBe("group");
+  });
+
+  it("sets devices unused for a month apart", () => {
+    const { recent, older } = groupDevices(
+      [dev("new", "Phone", 1), dev("old", "iPad", 45)],
+      null,
+      NOW
+    );
+    expect(recent.map((e) => e.key)).toEqual(["new"]);
+    expect(older.map((e) => e.key)).toEqual(["old"]);
+  });
+});

package/components/Devices/group.ts

@@ -0,0 +1,67 @@
+import type { ListedDevice } from "@/lib/security/devices";
+
+export const STALE_DAYS = 30;
+// Fewer identical devices than this stay separate rows.
+export const GROUP_MIN = 3;
+
+export type DeviceEntry =
+  | { kind: "device"; key: string; device: ListedDevice }
+  // Devices with the same name and browser, none of them the one in use: a
+  // simulator paired over and over, say. `device` is the most recently seen.
+  | {
+      kind: "group";
+      key: string;
+      device: ListedDevice;
+      devices: ListedDevice[];
+    };
+
+const parseUtc = (s: string) => new Date(`${s.replace(" ", "T")}Z`).getTime();
+
+const seenAt = (d: ListedDevice) =>
+  d.last_seen_at ? parseUtc(d.last_seen_at) : parseUtc(d.created_at);
+
+/**
+ * The list the Devices page shows: identical devices folded into one row,
+ * and the ones not used for a month set apart as `older`. The device in use
+ * is never folded or aged out.
+ */
+export function groupDevices(
+  devices: ListedDevice[],
+  currentId: string | null | undefined,
+  now = Date.now()
+): { recent: DeviceEntry[]; older: DeviceEntry[] } {
+  const buckets = new Map<string, ListedDevice[]>();
+  const entries: DeviceEntry[] = [];
+  for (const d of devices) {
+    if (d.id === currentId) {
+      entries.push({ kind: "device", key: d.id, device: d });
+      continue;
+    }
+    const k = `${d.name}\u0000${d.user_agent ?? ""}`;
+    buckets.set(k, [...(buckets.get(k) ?? []), d]);
+  }
+  for (const [k, list] of buckets) {
+    const sorted = [...list].sort((a, b) => seenAt(b) - seenAt(a));
+    if (sorted.length >= GROUP_MIN)
+      entries.push({
+        kind: "group",
+        key: `group:${k}`,
+        device: sorted[0],
+        devices: sorted,
+      });
+    else
+      for (const d of sorted)
+        entries.push({ kind: "device", key: d.id, device: d });
+  }
+  entries.sort((a, b) => seenAt(b.device) - seenAt(a.device));
+  const cutoff = now - STALE_DAYS * 86_400_000;
+  const recent: DeviceEntry[] = [];
+  const older: DeviceEntry[] = [];
+  for (const e of entries) {
+    const keep =
+      (e.kind === "device" && e.device.id === currentId) ||
+      seenAt(e.device) >= cutoff;
+    (keep ? recent : older).push(e);
+  }
+  return { recent, older };
+}

package/components/Health/HealthPanel.tsx

@@ -7,10 +7,8 @@ import {
   useAddNote,
   useDeleteNote,
   useDismissAnomaly,
-  useHealthConfig,
   useHealthNotes,
   useHealthQuery,
-  useSaveConfig,
 } from "@/data/health";
 import { AREAS, AREA_LABELS, type Area } from "@/lib/health/types";
 import {
@@ -20,7 +18,9 @@ import {
 } from "@/lib/health/view";
 import { cn } from "@/lib/utils";
 import { EnvFailures } from "./EnvFailures";
+import { MachineChecks } from "./MachineChecks";
 import { SweepRuns } from "./SweepRuns";
+import { Thresholds } from "./Thresholds";
 
 const TABS = [
   "open",
@@ -29,6 +29,7 @@ const TABS = [
   "notes",
   "thresholds",
   "cleanup",
+  "machine",
 ] as const;
 type Tab = (typeof TABS)[number];
 const TAB_LABEL: Record<Tab, string> = {
@@ -38,6 +39,7 @@ const TAB_LABEL: Record<Tab, string> = {
   notes: "Notes",
   thresholds: "Thresholds",
   cleanup: "Clean-up",
+  machine: "This machine",
 };
 
 const tokens = (n: number) =>
@@ -302,85 +304,6 @@ function Notes() {
   );
 }
 
-function Thresholds() {
-  const { data } = useHealthConfig();
-  const save = useSaveConfig();
-  const [draft, setDraft] = useState<Record<string, string>>({});
-  const [errors, setErrors] = useState<Record<string, string>>({});
-  if (!data) return null;
-  const drop = (k: string) => {
-    setDraft(({ [k]: _, ...rest }) => rest);
-    setErrors(({ [k]: _, ...rest }) => rest);
-  };
-  return (
-    <div className="space-y-3">
-      <p className="text-muted-foreground text-sm">
-        When a check trips. Clear a box to go back to the default.
-      </p>
-      <ul className="border-border/60 overflow-hidden rounded-xl border">
-        {Object.keys(data.defaults).map((k) => {
-          const value = draft[k] ?? String(data.config[k]);
-          return (
-            <li
-              key={k}
-              className="border-border/60 flex items-center gap-3 border-b px-3 py-2 last:border-b-0"
-            >
-              <label htmlFor={`health-${k}`} className="min-w-0 flex-1 text-sm">
-                {data.labels[k]}
-                <span className="text-muted-foreground block text-xs">
-                  default {data.defaults[k]}
-                </span>
-              </label>
-              <span className="flex flex-col items-end gap-1">
-                <Input
-                  id={`health-${k}`}
-                  inputMode="decimal"
-                  value={value}
-                  aria-invalid={!!errors[k]}
-                  onChange={(e) => {
-                    setDraft({ ...draft, [k]: e.target.value });
-                    setErrors(({ [k]: _, ...rest }) => rest);
-                  }}
-                  onBlur={() => {
-                    if (draft[k] === undefined) return;
-                    const raw = draft[k].trim();
-                    const n = raw === "" ? null : Number(raw);
-                    if (n !== null && (!Number.isFinite(n) || n < 0))
-                      return setErrors({
-                        ...errors,
-                        [k]: "Enter a number, 0 or more.",
-                      });
-                    if (n === data.config[k]) return drop(k);
-                    save.mutate({ [k]: n }, { onSettled: () => drop(k) });
-                  }}
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter") e.currentTarget.blur();
-                    if (e.key === "Escape") {
-                      drop(k);
-                      e.currentTarget.blur();
-                    }
-                  }}
-                  className="h-11 w-24 text-right tabular-nums md:h-9"
-                />
-                {errors[k] && (
-                  <span role="alert" className="text-destructive text-xs">
-                    {errors[k]}
-                  </span>
-                )}
-              </span>
-            </li>
-          );
-        })}
-      </ul>
-      {save.error && (
-        <p role="alert" className="text-destructive text-sm">
-          {save.error.message}
-        </p>
-      )}
-    </div>
-  );
-}
-
 export function HealthPanel() {
   const { data, error } = useHealthQuery();
   const dismiss = useDismissAnomaly();
@@ -445,6 +368,7 @@ export function HealthPanel() {
       {tab === "notes" && <Notes />}
       {tab === "thresholds" && <Thresholds />}
       {tab === "cleanup" && <SweepRuns />}
+      {tab === "machine" && <MachineChecks />}
     </div>
   );
 }

package/components/Health/MachineChecks.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { HealthList } from "@/components/Welcome/HealthList";
+import { AgentList } from "@/components/Welcome/AgentList";
+
+// What this machine has for running AgentOS and agents.
+export function MachineChecks() {
+  return (
+    <div className="flex flex-col gap-5">
+      <div className="flex flex-col gap-2">
+        <h3 className="text-sm font-semibold">Checks</h3>
+        <HealthList />
+      </div>
+      <div className="flex flex-col gap-2">
+        <h3 className="text-sm font-semibold">Agents on this machine</h3>
+        <AgentList />
+      </div>
+    </div>
+  );
+}

package/components/Health/SweepRuns.tsx

@@ -1,6 +1,9 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
+import { ListSection } from "@/components/Settings/ListSection";
+import { SettingRow, SettingSection } from "@/components/Settings/SettingRow";
+import { SwitchSetting } from "@/components/Settings/settings-fields";
 import {
   useRunSweep,
   useSetReaperArmed,
@@ -49,7 +52,7 @@ function Run({ run }: { run: SweepRun }) {
   const skipped = run.details?.skipped ?? [];
   const removed = run.details?.removed ?? [];
   return (
-    <li className="border-border/60 border-b px-3 py-1 last:border-b-0">
+    <div className="px-3 py-1">
       <details>
         <summary className="flex min-h-11 cursor-pointer flex-wrap items-center gap-x-3 gap-y-1 text-sm">
           <span className="font-medium">
@@ -111,7 +114,7 @@ function Run({ run }: { run: SweepRun }) {
           </div>
         )}
       </details>
-    </li>
+    </div>
   );
 }
 
@@ -132,45 +135,40 @@ export function SweepRuns() {
         </p>
       )}
       {data && (
-        <div className="flex flex-wrap items-center gap-2">
-          <p className="text-muted-foreground min-w-0 flex-1 text-sm">
-            Full clean-up is {data.armed ? "on" : "off"}: test leftovers, stale
-            task databases, spares, temp folders and build caches{" "}
-            {data.armed
-              ? "are removed with each run."
-              : "are only listed until you turn it on. Read a dry run first."}
-          </p>
-          <Button
-            variant="outline"
-            className="min-h-11 md:min-h-8"
-            disabled={arm.isPending}
-            onClick={() => arm.mutate(!data.armed)}
-          >
-            {data.armed ? "Turn off" : "Turn on"}
-          </Button>
-        </div>
+        <SettingSection>
+          <SwitchSetting
+            id="sweep-full"
+            label="Full clean-up"
+            help="Test leftovers, stale task databases, spares, temp folders and build caches are removed with each run. Off, they are only listed: read a dry run first. Settled worktrees go after the number of days set in Merging, every 6 hours; branches and conversations stay."
+            checked={data.armed}
+            defaultValue={false}
+            onSave={(on) => arm.mutateAsync(on)}
+          />
+          <SettingRow
+            id="sweep-run"
+            label="Run a clean-up now"
+            control={
+              <>
+                <Button
+                  variant="outline"
+                  className="min-h-11 md:min-h-8"
+                  disabled={run.isPending}
+                  onClick={() => run.mutate(true)}
+                >
+                  Dry run
+                </Button>
+                <Button
+                  className="min-h-11 md:min-h-8"
+                  disabled={run.isPending}
+                  onClick={() => run.mutate(false)}
+                >
+                  Run now
+                </Button>
+              </>
+            }
+          />
+        </SettingSection>
       )}
-      <div className="flex flex-wrap items-center gap-2">
-        <p className="text-muted-foreground min-w-0 flex-1 text-sm">
-          Settled worktrees older than {data?.days ?? data?.defaultDays ?? 7}{" "}
-          days are removed every 6 hours. Branches and conversations stay.
-        </p>
-        <Button
-          variant="outline"
-          className="min-h-11 md:min-h-8"
-          disabled={run.isPending}
-          onClick={() => run.mutate(true)}
-        >
-          Dry run
-        </Button>
-        <Button
-          className="min-h-11 md:min-h-8"
-          disabled={run.isPending}
-          onClick={() => run.mutate(false)}
-        >
-          Run now
-        </Button>
-      </div>
       {run.error && (
         <p role="alert" className="text-destructive text-sm">
           {run.error.message}
@@ -184,17 +182,14 @@ export function SweepRuns() {
       {isPending && (
         <div className="bg-muted/40 h-24 animate-pulse rounded-xl" />
       )}
-      {data && data.runs.length === 0 && (
-        <p className="text-muted-foreground text-sm">
-          No run yet. The first one starts 10 minutes after the server does.
-        </p>
-      )}
-      {data && data.runs.length > 0 && (
-        <ul className="border-border/60 overflow-hidden rounded-xl border">
-          {data.runs.map((r) => (
-            <Run key={r.id} run={r} />
-          ))}
-        </ul>
+      {data && (
+        <ListSection
+          title="Clean-up runs"
+          items={data.runs}
+          keyOf={(r) => String(r.id)}
+          render={(r) => <Run run={r} />}
+          empty="No run yet. The first one starts 10 minutes after the server does."
+        />
       )}
     </div>
   );

package/components/Health/Thresholds.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { SettingSection } from "@/components/Settings/SettingRow";
+import {
+  NumberSetting,
+  SwitchSetting,
+} from "@/components/Settings/settings-fields";
+import { useHealthConfig, useSaveConfig } from "@/data/health";
+
+// When each check trips. The server says how every one reads (label, unit,
+// range, switch), so a new threshold shows up here without a client change.
+export function Thresholds() {
+  const { data } = useHealthConfig();
+  const save = useSaveConfig();
+  if (!data) return null;
+  return (
+    <div className="space-y-3">
+      <SettingSection>
+        {Object.keys(data.defaults).map((k) => {
+          const meta = data.meta[k];
+          const put = (n: number) => save.mutateAsync({ [k]: n });
+          return meta.switch ? (
+            <SwitchSetting
+              key={k}
+              id={`health-${k}`}
+              label={meta.label}
+              help="Off, anomalies still open and reach the chat, but nothing wakes to look at them."
+              checked={data.config[k] !== 0}
+              defaultValue={data.defaults[k] !== 0}
+              onSave={(on) => put(on ? 1 : 0)}
+            />
+          ) : (
+            <NumberSetting
+              key={k}
+              id={`health-${k}`}
+              label={meta.label}
+              value={data.config[k]}
+              defaultValue={data.defaults[k]}
+              min={meta.min}
+              max={meta.max}
+              integer={meta.integer ?? true}
+              unit={meta.unit}
+              onSave={put}
+            />
+          );
+        })}
+      </SettingSection>
+    </div>
+  );
+}

package/components/Merge/GlobalMergeSection.tsx

@@ -9,7 +9,6 @@ import {
   type MergeOverride,
   type MergeSettings,
 } from "@/lib/tasks/merge-methods";
-import { MergeApprovalToggle } from "./MergeApprovalToggle";
 import { MergeSettingsFields } from "./MergeSettingsFields";
 import { GlobalSweepSection } from "./WorktreeSweepSection";
 
@@ -37,7 +36,7 @@ function Overrides({ overrides }: { overrides: MergeOverride[] }) {
             <p className="truncate font-medium">{o.name}</p>
             {Object.keys(o.config).length > 0 && (
               <p className="text-muted-foreground text-xs">
-                agentos.json: {describe(o.config)}
+                Repo config: {describe(o.config)}
               </p>
             )}
             {Object.keys(o.project).length > 0 && (
@@ -49,21 +48,21 @@ function Overrides({ overrides }: { overrides: MergeOverride[] }) {
         ))}
       </ul>
       <p className="text-muted-foreground text-xs">
-        A project&rsquo;s own setting wins over its agentos.json, which wins
-        over these. Change a project&rsquo;s in its Project Settings.
+        A project&rsquo;s own setting wins over its repo config, which wins over
+        these. Change a project&rsquo;s in its Project Settings.
       </p>
     </div>
   );
 }
 
-// The global merge settings, and the approval gate for sensitive PRs.
+// The global merge settings and worktree clean-up. The approval gate for
+// sensitive PRs is in Approvals.
 export function GlobalMergeSection() {
   const { data, isPending, isError, error } = useGlobalMergeSettings(true);
   const update = useUpdateGlobalMergeSettings();
 
   return (
     <div className="space-y-5">
-      <MergeApprovalToggle />
       <div className="space-y-3">
         <p className="text-muted-foreground text-sm">
           How tasks&rsquo; PRs merge and what&rsquo;s cleaned up after, for