@saadnvd1/agent-os 0.3.833 → 0.3.839

package/components/Devices/DeviceRow.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useState } from "react";
 import { Laptop, Smartphone, Tablet, Trash2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import type { ListedDevice } from "@/lib/security/devices";
@@ -9,6 +10,7 @@ import {
   useSendTestPush,
   useSetCanApprove,
 } from "@/data/devices";
+import { InlineConfirm } from "@/components/Settings/InlineConfirm";
 import { Switch } from "@/components/ui/switch";
 
 // SQLite's datetime('now') is UTC without a zone.
@@ -53,87 +55,99 @@ export function DeviceRow({
         : `Test failed: ${tested.error}`
       : null;
 
+  const [signingOut, setSigningOut] = useState(false);
+  // The device in use asks first; any other goes at once.
   const onRevoke = () => {
-    if (
-      isCurrent &&
-      !window.confirm("This is the device you're using. Sign it out?")
-    )
-      return;
-    revoke.mutate(device.id);
+    if (isCurrent) setSigningOut(true);
+    else revoke.mutate(device.id);
   };
 
   return (
-    <div className="bg-muted/40 flex items-center gap-3 rounded-lg px-3 py-2.5">
-      <DeviceIcon ua={device.user_agent} />
-      <div className="min-w-0 flex-1">
-        <p className="flex items-center gap-2 truncate text-sm font-medium">
-          {device.name}
-          {isCurrent && (
-            <span className="bg-primary/15 text-primary rounded-full px-1.5 py-0.5 text-[10px]">
-              this device
-            </span>
-          )}
-        </p>
-        <p className="text-muted-foreground truncate text-xs">
-          {lastSeen(device.last_seen_at)}
-          {device.last_address ? ` · ${device.last_address}` : ""}
-        </p>
-        {device.push.enabled && (
-          <p className="text-muted-foreground truncate text-xs">
-            Push on ·{" "}
-            {device.push.categories
-              .map((c) => CATEGORIES[c].label)
-              .join(", ") || "nothing selected"}
+    <div className="bg-muted/40 rounded-lg px-3 py-2.5">
+      <div className="flex items-center gap-3">
+        <DeviceIcon ua={device.user_agent} />
+        <div className="min-w-0 flex-1">
+          <p className="flex items-center gap-2 truncate text-sm font-medium">
+            {device.name}
+            {isCurrent && (
+              <span className="bg-primary/15 text-primary rounded-full px-1.5 py-0.5 text-[10px]">
+                this device
+              </span>
+            )}
           </p>
-        )}
-        {device.push.lastError && (
-          <p
-            className="text-destructive truncate text-xs"
-            title={device.push.lastError}
-          >
-            Push error: {device.push.lastError}
+          <p className="text-muted-foreground truncate text-xs">
+            {lastSeen(device.last_seen_at)}
+            {device.last_address ? ` · ${device.last_address}` : ""}
           </p>
-        )}
-        {testNote && (
-          <p
-            className={`truncate text-xs ${tested?.status === "sent" ? "text-muted-foreground" : "text-destructive"}`}
-            role="status"
+          {device.push.enabled && (
+            <p className="text-muted-foreground truncate text-xs">
+              Push on ·{" "}
+              {device.push.categories
+                .map((c) => CATEGORIES[c].label)
+                .join(", ") || "nothing selected"}
+            </p>
+          )}
+          {device.push.lastError && (
+            <p
+              className="text-destructive truncate text-xs"
+              title={device.push.lastError}
+            >
+              Push error: {device.push.lastError}
+            </p>
+          )}
+          {testNote && (
+            <p
+              className={`truncate text-xs ${tested?.status === "sent" ? "text-muted-foreground" : "text-destructive"}`}
+              role="status"
+            >
+              {testNote}
+            </p>
+          )}
+        </div>
+        {device.push.enabled && (
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-11 shrink-0 sm:h-8"
+            onClick={() => sendTest.mutate(device.id)}
+            disabled={sendTest.isPending}
           >
-            {testNote}
-          </p>
+            {sendTest.isPending ? "Sending…" : "Send test"}
+          </Button>
         )}
-      </div>
-      {device.push.enabled && (
+        <label className="text-muted-foreground flex min-h-11 shrink-0 items-center gap-2 text-xs sm:min-h-8">
+          Can approve
+          <Switch
+            checked={!!device.can_approve}
+            disabled={!canManage || setCanApprove.isPending}
+            onCheckedChange={(on) =>
+              setCanApprove.mutate({ id: device.id, canApprove: on })
+            }
+          />
+        </label>
         <Button
-          variant="outline"
-          size="sm"
-          className="h-11 shrink-0 sm:h-8"
-          onClick={() => sendTest.mutate(device.id)}
-          disabled={sendTest.isPending}
+          variant="ghost"
+          size="icon-sm"
+          className="h-11 w-11 sm:h-8 sm:w-8"
+          onClick={onRevoke}
+          disabled={revoke.isPending}
+          aria-label={`Remove ${device.name}`}
         >
-          {sendTest.isPending ? "Sending…" : "Send test"}
+          <Trash2 className="h-4 w-4" />
         </Button>
-      )}
-      <label className="text-muted-foreground flex min-h-11 shrink-0 items-center gap-2 text-xs sm:min-h-8">
-        Can approve
-        <Switch
-          checked={!!device.can_approve}
-          disabled={!canManage || setCanApprove.isPending}
-          onCheckedChange={(on) =>
-            setCanApprove.mutate({ id: device.id, canApprove: on })
-          }
+      </div>
+      {signingOut && (
+        <InlineConfirm
+          label={`Sign out ${device.name}`}
+          message="This is the device you're using. Sign it out?"
+          confirmLabel="Sign out"
+          onConfirm={() => {
+            setSigningOut(false);
+            revoke.mutate(device.id);
+          }}
+          onCancel={() => setSigningOut(false)}
         />
-      </label>
-      <Button
-        variant="ghost"
-        size="icon-sm"
-        className="h-11 w-11 sm:h-8 sm:w-8"
-        onClick={onRevoke}
-        disabled={revoke.isPending}
-        aria-label={`Remove ${device.name}`}
-      >
-        <Trash2 className="h-4 w-4" />
-      </Button>
+      )}
     </div>
   );
 }

package/components/Devices/PasskeysSection.test.ts

@@ -0,0 +1,89 @@
+import "@/components/Chat/composer/test-dom";
+import { act, createElement } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+for (const key of ["Event", "CustomEvent", "FocusEvent", "HTMLButtonElement"])
+  Object.defineProperty(globalThis, key, {
+    value: (window as unknown as Record<string, unknown>)[key],
+    configurable: true,
+    writable: true,
+  });
+(
+  globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
+).IS_REACT_ACT_ENVIRONMENT = true;
+
+const state = vi.hoisted(() => ({ revoke: vi.fn() }));
+vi.stubGlobal("location", { hostname: "x" });
+vi.mock("sonner", () => ({ toast: { error: vi.fn() } }));
+vi.mock("@/data/presence", () => ({
+  NO_PASSKEYS_HERE: "no",
+  passkeysHere: () => true,
+}));
+vi.mock("@/data/presence/passkeys", () => ({
+  usePasskeysQuery: () => ({
+    data: {
+      bootstrapped: true,
+      passkeys: [
+        {
+          id: "k1",
+          name: "Laptop",
+          rp_id: "x",
+          type: "browser",
+          created_at: "2026-10-01 10:00:00",
+          registered_from: null,
+          last_used_at: null,
+        },
+      ],
+    },
+  }),
+  useAddPasskey: () => ({ mutate: vi.fn(), isPending: false }),
+  useEnrollCode: () => ({ mutate: vi.fn(), isPending: false }),
+  useRevokePasskey: () => ({ mutate: state.revoke, isPending: false }),
+}));
+
+const { PasskeysSection } = await import("./PasskeysSection");
+
+let root: Root;
+let host: HTMLDivElement;
+beforeEach(async () => {
+  state.revoke.mockReset();
+  host = document.createElement("div");
+  document.body.appendChild(host);
+  root = createRoot(host);
+  await act(async () =>
+    root.render(createElement(PasskeysSection, { open: true }))
+  );
+});
+afterEach(async () => {
+  await act(async () => root.unmount());
+  host.remove();
+  vi.restoreAllMocks();
+});
+
+const click = (el: Element | null | undefined) =>
+  act(async () => {
+    el?.dispatchEvent(new window.MouseEvent("click", { bubbles: true }));
+  });
+const button = (name: string) =>
+  [...host.querySelectorAll("button")].find((b) => b.textContent === name);
+
+describe("PasskeysSection revoke", () => {
+  it("asks inline, not with a browser dialog, and revokes only on confirm", async () => {
+    const dialog = vi.spyOn(window, "confirm");
+    await click(host.querySelector('[aria-label="Revoke Laptop"]'));
+    expect(host.querySelector('[role="alertdialog"]')).not.toBeNull();
+    expect(state.revoke).not.toHaveBeenCalled();
+    await click(button("Revoke"));
+    expect(state.revoke).toHaveBeenCalledWith("k1", expect.any(Object));
+    expect(dialog).not.toHaveBeenCalled();
+    expect(host.querySelector('[role="alertdialog"]')).toBeNull();
+  });
+
+  it("Cancel leaves the passkey alone", async () => {
+    await click(host.querySelector('[aria-label="Revoke Laptop"]'));
+    await click(button("Cancel"));
+    expect(state.revoke).not.toHaveBeenCalled();
+    expect(host.querySelector('[role="alertdialog"]')).toBeNull();
+  });
+});

package/components/Devices/PasskeysSection.tsx

@@ -12,6 +12,7 @@ import {
   usePasskeysQuery,
   useRevokePasskey,
 } from "@/data/presence/passkeys";
+import { InlineConfirm } from "@/components/Settings/InlineConfirm";
 import { lastSeen } from "./DeviceRow";
 
 const when = (s: string) =>
@@ -33,6 +34,7 @@ export function PasskeysSection({ open }: { open: boolean }) {
   const enroll = useEnrollCode();
   const revoke = useRevokePasskey();
   const [code, setCode] = useState("");
+  const [revoking, setRevoking] = useState<string | null>(null);
   const here = useSyncExternalStore(
     () => () => {},
     passkeysHere,
@@ -57,33 +59,41 @@ export function PasskeysSection({ open }: { open: boolean }) {
         to confirm.
       </p>
       {keys.map((k) => (
-        <div
-          key={k.id}
-          className="bg-muted/40 flex items-center gap-3 rounded-lg px-3 py-2.5"
-        >
-          <KeyRound className="text-muted-foreground h-4 w-4 shrink-0" />
-          <div className="min-w-0 flex-1">
-            <p className="truncate text-sm font-medium">{k.name}</p>
-            <p className="text-muted-foreground truncate text-xs">
-              {k.type === "device" ? "Device key (Face ID)" : k.rp_id} · added{" "}
-              {when(k.created_at)}
-              {k.registered_from ? ` from ${k.registered_from}` : ""} · used{" "}
-              {lastSeen(k.last_used_at)}
-            </p>
+        <div key={k.id} className="bg-muted/40 rounded-lg px-3 py-2.5">
+          <div className="flex items-center gap-3">
+            <KeyRound className="text-muted-foreground h-4 w-4 shrink-0" />
+            <div className="min-w-0 flex-1">
+              <p className="truncate text-sm font-medium">{k.name}</p>
+              <p className="text-muted-foreground truncate text-xs">
+                {k.type === "device" ? "Device key (Face ID)" : k.rp_id} · added{" "}
+                {when(k.created_at)}
+                {k.registered_from ? ` from ${k.registered_from}` : ""} · used{" "}
+                {lastSeen(k.last_used_at)}
+              </p>
+            </div>
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              className="h-11 w-11 sm:h-8 sm:w-8"
+              disabled={revoke.isPending}
+              aria-label={`Revoke ${k.name}`}
+              onClick={() => setRevoking(k.id)}
+            >
+              <Trash2 className="h-4 w-4" />
+            </Button>
           </div>
-          <Button
-            variant="ghost"
-            size="icon-sm"
-            className="h-11 w-11 sm:h-8 sm:w-8"
-            disabled={revoke.isPending}
-            aria-label={`Revoke ${k.name}`}
-            onClick={() =>
-              window.confirm(`Revoke the passkey "${k.name}"?`) &&
-              revoke.mutate(k.id, { onError: fail })
-            }
-          >
-            <Trash2 className="h-4 w-4" />
-          </Button>
+          {revoking === k.id && (
+            <InlineConfirm
+              label={`Revoke ${k.name}`}
+              message={`Revoke the passkey "${k.name}"? It can no longer approve anything.`}
+              confirmLabel="Revoke"
+              onCancel={() => setRevoking(null)}
+              onConfirm={() => {
+                setRevoking(null);
+                revoke.mutate(k.id, { onError: fail });
+              }}
+            />
+          )}
         </div>
       ))}
       {data?.bootstrapped && keys.length === 0 ? (

package/components/Health/HealthPanel.tsx

@@ -306,7 +306,12 @@ 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">
@@ -326,23 +331,43 @@ function Thresholds() {
                   default {data.defaults[k]}
                 </span>
               </label>
-              <Input
-                id={`health-${k}`}
-                inputMode="decimal"
-                value={value}
-                onChange={(e) => setDraft({ ...draft, [k]: e.target.value })}
-                onBlur={() => {
-                  if (draft[k] === undefined) return;
-                  const raw = draft[k].trim();
-                  save.mutate(
-                    { [k]: raw === "" ? null : Number(raw) },
-                    {
-                      onSettled: () => setDraft(({ [k]: _, ...rest }) => rest),
+              <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"
-              />
+                  }}
+                  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>
           );
         })}

package/components/Merge/GlobalMergeSection.tsx

@@ -77,13 +77,10 @@ export function GlobalMergeSection() {
           <MergeSettingsFields
             settings={data.settings}
             inherited={data.defaults}
-            disabled={update.isPending}
-            onChange={(s) => update.mutate(s)}
+            idPrefix="merge-global"
+            onSave={(s) => update.mutateAsync(s)}
           />
         )}
-        {update.isError && (
-          <p className="text-destructive text-sm">{update.error.message}</p>
-        )}
       </div>
       {data && <Overrides overrides={data.overrides} />}
       <GlobalSweepSection />

package/components/Merge/MergeSettingsFields.tsx

@@ -1,13 +1,7 @@
 "use client";
 
-import { useId } from "react";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
+import { SelectSetting } from "@/components/Settings/settings-fields";
+import { SettingSection } from "@/components/Settings/SettingRow";
 import {
   MERGE_METHODS,
   METHOD_LABEL,
@@ -29,47 +23,6 @@ const SOURCE: Record<MergeSource, string> = {
 
 const onOff = (on: boolean) => (on ? "On" : "Off");
 
-function Field({
-  label,
-  detail,
-  value,
-  inheritLabel,
-  options,
-  onChange,
-  disabled,
-}: {
-  label: string;
-  detail: string;
-  value: string;
-  inheritLabel: string;
-  options: Array<{ value: string; label: string }>;
-  onChange: (value: string) => void;
-  disabled?: boolean;
-}) {
-  const id = useId();
-  return (
-    <div className="space-y-1.5">
-      <label htmlFor={id} className="text-sm font-medium">
-        {label}
-      </label>
-      <Select value={value} onValueChange={onChange} disabled={disabled}>
-        <SelectTrigger id={id} className="h-11 md:h-9">
-          <SelectValue />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value={INHERIT}>{inheritLabel}</SelectItem>
-          {options.map((o) => (
-            <SelectItem key={o.value} value={o.value}>
-              {o.label}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-      <p className="text-muted-foreground text-xs">{detail}</p>
-    </div>
-  );
-}
-
 const TOGGLE = [
   { value: "on", label: "On" },
   { value: "off", label: "Off" },
@@ -78,38 +31,43 @@ const TOGGLE = [
 /**
  * The merge method and the two deletions after a merge, each either set
  * here or left to what this level inherits (`inherited`, with where that
- * comes from).
+ * comes from). Each saves the moment it changes.
  */
 export function MergeSettingsFields({
+  idPrefix,
   settings,
   inherited,
   from,
   allowed,
-  disabled,
-  onChange,
+  onSave,
 }: {
+  idPrefix: string;
   settings: MergeSettings;
   inherited: MergePolicy;
   from?: Record<keyof MergePolicy, MergeSource>;
   // The repository's allowed methods, when known.
   allowed?: MergeMethod[] | null;
-  disabled?: boolean;
-  onChange: (settings: MergeSettings) => void;
+  onSave: (settings: MergeSettings) => Promise<unknown>;
 }) {
-  const inheritLabel = (key: keyof MergePolicy, shown: string) =>
-    from ? `Inherit: ${shown} (${SOURCE[from[key]]})` : `Default: ${shown}`;
+  const inheritOption = (key: keyof MergePolicy, shown: string) => ({
+    value: INHERIT,
+    label: from
+      ? `Inherit: ${shown} (${SOURCE[from[key]]})`
+      : `Default: ${shown}`,
+  });
   const set = <K extends keyof MergeSettings>(
     key: K,
     value: MergeSettings[K] | undefined
-  ) => onChange({ ...settings, [key]: value });
+  ) => onSave({ ...settings, [key]: value });
   const toggle = (key: "delete_remote_branch" | "delete_worktree") => (
-    <Field
+    <SelectSetting
+      id={`${idPrefix}-${key}`}
       label={
         key === "delete_remote_branch"
           ? "Delete the branch on origin after a merge"
           : "Delete the local worktree and branch after a merge"
       }
-      detail={
+      help={
         key === "delete_remote_branch"
           ? "Never main, master, or a branch a stacked task still targets."
           : "Never one with uncommitted work or commits the merge didn't include."
@@ -117,10 +75,10 @@ export function MergeSettingsFields({
       value={
         settings[key] === undefined ? INHERIT : settings[key] ? "on" : "off"
       }
-      inheritLabel={inheritLabel(key, onOff(inherited[key]))}
-      options={TOGGLE}
-      disabled={disabled}
-      onChange={(v) => set(key, v === INHERIT ? undefined : v === "on")}
+      options={[inheritOption(key, onOff(inherited[key])), ...TOGGLE]}
+      defaultValue={INHERIT}
+      hint=""
+      onSave={(v) => set(key, v === INHERIT ? undefined : v === "on")}
     />
   );
 
@@ -128,25 +86,29 @@ export function MergeSettingsFields({
   const refused = allowed && !allowed.includes(method);
 
   return (
-    <div className="space-y-3">
-      <Field
+    <SettingSection>
+      <SelectSetting
+        id={`${idPrefix}-method`}
         label="Merge method"
-        detail="How sign-off, Done, Land and external PRs merge. If GitHub refuses it, the merge fails and says so; it never falls back to another method."
+        help="How sign-off, Done, Land and external PRs merge. If GitHub refuses it, the merge fails and says so; it never falls back to another method."
         value={settings.method ?? INHERIT}
-        inheritLabel={inheritLabel("method", METHOD_LABEL[inherited.method])}
-        options={MERGE_METHODS.map((m) => ({
-          value: m,
-          label:
-            METHOD_LABEL[m] +
-            (allowed && !allowed.includes(m) ? " (off on GitHub)" : ""),
-        }))}
-        disabled={disabled}
-        onChange={(v) =>
+        options={[
+          inheritOption("method", METHOD_LABEL[inherited.method]),
+          ...MERGE_METHODS.map((m) => ({
+            value: m,
+            label:
+              METHOD_LABEL[m] +
+              (allowed && !allowed.includes(m) ? " (off on GitHub)" : ""),
+          })),
+        ]}
+        defaultValue={INHERIT}
+        hint=""
+        onSave={(v) =>
           set("method", v === INHERIT ? undefined : (v as MergeMethod))
         }
       />
       {refused && (
-        <p className="text-destructive text-xs">
+        <p className="text-destructive px-3 py-2 text-xs">
           This repository has &ldquo;{REPO_SETTING[method]}&rdquo; turned off on
           GitHub, so merges will be refused until it&rsquo;s on or the method
           changes.
@@ -154,6 +116,6 @@ export function MergeSettingsFields({
       )}
       {toggle("delete_remote_branch")}
       {toggle("delete_worktree")}
-    </div>
+    </SettingSection>
   );
 }

package/components/Merge/ProjectMergeSection.tsx

@@ -35,14 +35,10 @@ export function ProjectMergeSection({
           inherited={data.inherited}
           from={data.inherited.from}
           allowed={data.allowed}
-          disabled={update.isPending}
-          onChange={(s) => update.mutate(s)}
+          idPrefix={`merge-${projectId}`}
+          onSave={(s) => update.mutateAsync(s)}
         />
       )}
-      {update.isError && (
-        <p className="text-destructive text-sm">{update.error.message}</p>
-      )}
-      <p className="text-muted-foreground text-xs">Saved as you change them.</p>
       <ProjectSweepSection projectId={projectId} />
     </div>
   );