@saadnvd1/agent-os 0.3.836 → 0.3.845

package/components/Settings/ExperimentsSection.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import { useState } from "react";
-import { toast } from "sonner";
 import { ArrowLeft } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { SettingToggle } from "@/components/Settings/SettingToggle";
+import { SettingSection } from "@/components/Settings/SettingRow";
+import { SwitchSetting } from "@/components/Settings/settings-fields";
 import { formatTokens } from "@/lib/chat/context";
 import {
   useExperimentDetailQuery,
@@ -194,31 +194,30 @@ export function ExperimentsSection() {
         work while off, and shows what it costs here.
       </p>
       {data.experiments.map((e) => (
-        <div key={e.id} className="space-y-2">
-          <SettingToggle
-            title={`${e.name} · ${e.status === "beta" ? "Beta" : "Experimental"}`}
-            detail={e.description}
+        <SettingSection key={e.id}>
+          <SwitchSetting
+            id={`experiment-${e.id}`}
+            label={`${e.name} · ${e.status === "beta" ? "Beta" : "Experimental"}`}
+            help={e.description}
             checked={e.on}
             locked={data.locked}
-            onChange={(on) =>
-              set.mutate(
-                { id: e.id, on },
-                { onError: (err) => toast.error(err.message) }
-              )
+            defaultValue={false}
+            onSave={(on) => set.mutateAsync({ id: e.id, on })}
+            extra={
+              <div className="px-1 pb-1">
+                <Usage e={e} />
+                <Button
+                  variant="link"
+                  size="sm"
+                  className="min-h-11 px-0 md:min-h-0"
+                  onClick={() => setOpen(e.id)}
+                >
+                  Details
+                </Button>
+              </div>
             }
           />
-          <div className="px-3">
-            <Usage e={e} />
-            <Button
-              variant="link"
-              size="sm"
-              className="min-h-11 px-0 md:min-h-0"
-              onClick={() => setOpen(e.id)}
-            >
-              Details
-            </Button>
-          </div>
-        </div>
+        </SettingSection>
       ))}
     </div>
   );

package/components/Settings/InlineConfirm.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+
+/**
+ * The in-app confirm under a row: a message and two buttons, never a browser
+ * dialog (which a webview drops). The full-access switch, and every revoke,
+ * ask this way.
+ */
+export function InlineConfirm({
+  label,
+  message,
+  confirmLabel,
+  onConfirm,
+  onCancel,
+}: {
+  // The dialog's accessible name.
+  label: string;
+  message: string;
+  confirmLabel: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}) {
+  return (
+    <div
+      role="alertdialog"
+      aria-label={label}
+      className="bg-destructive/10 my-1 space-y-2 rounded-lg px-3 py-2 text-sm"
+    >
+      <p>{message}</p>
+      <div className="flex gap-2">
+        <Button
+          size="sm"
+          variant="destructive"
+          className="h-11 sm:h-9"
+          onClick={onConfirm}
+        >
+          {confirmLabel}
+        </Button>
+        <Button
+          size="sm"
+          variant="ghost"
+          className="h-11 sm:h-9"
+          onClick={onCancel}
+        >
+          Cancel
+        </Button>
+      </div>
+    </div>
+  );
+}

package/components/Settings/OwnerNameRow.tsx

@@ -1,55 +1,25 @@
 "use client";
 
-import { useState } from "react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
 import { useClientConfig } from "@/data/client-config/queries";
 import { useSetOwnerName } from "@/data/owner/mutations";
+import { SettingSection } from "./SettingRow";
+import { TextSetting } from "./settings-fields";
 
 // The name AgentOS and the orchestrators use when they refer to you.
 export function OwnerNameRow() {
   const saved = useClientConfig().data?.ownerName ?? "";
-  // null: show what is saved.
-  const [draft, setDraft] = useState<string | null>(null);
-  const value = draft ?? saved;
   const save = useSetOwnerName();
   return (
-    <form
-      className="bg-muted/40 flex flex-col gap-2 rounded-lg px-3 py-2.5 sm:flex-row sm:items-center"
-      onSubmit={(e) => {
-        e.preventDefault();
-        save.mutate(value.trim() || null, { onSuccess: () => setDraft(null) });
-      }}
-    >
-      <div className="min-w-0 flex-1">
-        <label htmlFor="owner-name" className="text-sm font-medium">
-          Your name
-        </label>
-        <p className="text-muted-foreground text-xs">
-          Used where AgentOS and your orchestrators refer to you. Orchestrators
-          pick it up when they next start.
-        </p>
-        {save.error && (
-          <p className="text-destructive text-xs">{save.error.message}</p>
-        )}
-      </div>
-      <Input
+    <SettingSection>
+      <TextSetting
         id="owner-name"
-        value={value}
-        maxLength={40}
+        label="Your name"
+        help="Used where AgentOS and your orchestrators refer to you. Orchestrators pick it up when they next start."
         placeholder="Not set"
-        onChange={(e) => setDraft(e.target.value)}
-        className="min-h-11 sm:min-h-8 sm:w-44"
+        value={saved}
+        maxLength={40}
+        onSave={(name) => save.mutateAsync(name || null)}
       />
-      <Button
-        type="submit"
-        size="sm"
-        variant="outline"
-        className="min-h-11 sm:min-h-8"
-        disabled={save.isPending || value.trim() === saved}
-      >
-        Save
-      </Button>
-    </form>
+    </SettingSection>
   );
 }

package/components/Settings/PickerSetting.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { useAutoSave } from "@/hooks/useAutoSave";
+import { SettingRow } from "./SettingRow";
+
+/**
+ * A setting whose control is a picker of your own (a model list, say): the
+ * row, the instant save, rollback with a toast, Saved and Reset come from
+ * here. `render` gets the value to show and a `commit` that saves a new one.
+ */
+export function PickerSetting<T>({
+  id,
+  label,
+  help,
+  value,
+  onSave,
+  defaultValue,
+  hint,
+  error,
+  render,
+  below,
+}: {
+  id: string;
+  label: string;
+  help?: string;
+  value: T;
+  onSave: (next: T) => Promise<unknown>;
+  // Reset shows while the value differs from this.
+  defaultValue?: T;
+  hint?: string;
+  error?: string | null;
+  render: (picker: { value: T; commit: (next: T) => void }) => ReactNode;
+  below?: ReactNode;
+}) {
+  const auto = useAutoSave({ saved: value, save: onSave });
+  return (
+    <SettingRow
+      id={id}
+      label={label}
+      help={help}
+      hint={hint}
+      error={error}
+      status={auto.status}
+      onUndo={auto.undo}
+      onReset={
+        defaultValue !== undefined && auto.value !== defaultValue
+          ? () => void auto.commit(defaultValue, { undoable: true })
+          : undefined
+      }
+      control={
+        <div className="w-60 max-w-full max-sm:w-full">
+          {render({ value: auto.value, commit: (v) => void auto.commit(v) })}
+        </div>
+      }
+      below={below}
+    />
+  );
+}

package/components/Settings/SettingRow.tsx

@@ -0,0 +1,168 @@
+"use client";
+
+import { Check, Loader2 } from "lucide-react";
+import { createContext, useContext, type ReactNode } from "react";
+import type { SaveStatus } from "@/hooks/useAutoSave";
+import { cn } from "@/lib/utils";
+
+// What the Settings search box holds; a row that doesn't match hides.
+export const SettingsQueryContext = createContext("");
+
+/** Whether a row with this text shows for the search box's words. */
+export function matchesQuery(query: string, ...text: (string | undefined)[]) {
+  const q = query.trim().toLowerCase();
+  if (!q) return true;
+  const haystack = text.join(" ").toLowerCase();
+  return q.split(/\s+/).every((w) => haystack.includes(w));
+}
+
+/**
+ * One setting on a Settings page, 44px at least: label and one-line help on
+ * the left, the control on the right (below the label on a phone), and a meta
+ * line for the default hint or the error, "Saved", Undo and Reset. Every
+ * variant (settings-fields) renders through this.
+ */
+export function SettingRow({
+  id,
+  label,
+  help,
+  control,
+  controlClassName,
+  hint,
+  error,
+  status = "idle",
+  onUndo,
+  onReset,
+  below,
+}: {
+  id: string;
+  label: string;
+  help?: string;
+  control: ReactNode;
+  controlClassName?: string;
+  hint?: string;
+  error?: string | null;
+  status?: SaveStatus;
+  onUndo?: () => void;
+  // Given only while the value differs from the default.
+  onReset?: () => void;
+  below?: ReactNode;
+}) {
+  const query = useContext(SettingsQueryContext);
+  if (!matchesQuery(query, label, help)) return null;
+  return (
+    <div
+      data-setting={id}
+      className="border-foreground/5 grid min-h-11 grid-cols-[minmax(0,1fr)_auto] items-center gap-x-4 gap-y-0.5 border-t px-3 py-2 first:border-t-0"
+    >
+      <div className="min-w-0">
+        <label htmlFor={id} className="block text-sm font-medium">
+          {label}
+        </label>
+        {help && (
+          <p className="text-muted-foreground text-xs leading-snug">{help}</p>
+        )}
+      </div>
+      <div
+        className={cn(
+          "flex min-w-0 items-center justify-end gap-2 max-sm:col-span-2 max-sm:row-start-2 max-sm:mt-1 max-sm:justify-start",
+          controlClassName
+        )}
+      >
+        {control}
+      </div>
+      {(error || hint || onReset || status !== "idle") && (
+        <div className="text-muted-foreground col-span-2 flex min-h-5 items-center justify-end gap-3 text-xs">
+          <span
+            id={`${id}-hint`}
+            className={cn("min-w-0 flex-1", error && "text-destructive")}
+            role={error ? "alert" : undefined}
+          >
+            {error ?? hint}
+          </span>
+          <span className="flex shrink-0 items-center gap-3" aria-live="polite">
+            {status === "saving" && (
+              <span className="inline-flex items-center gap-1">
+                <Loader2 className="size-3 animate-spin" />
+                Saving…
+              </span>
+            )}
+            {(status === "saved" || status === "undo") && (
+              <span className="inline-flex items-center gap-1 text-emerald-600 dark:text-emerald-400">
+                <Check className="size-3" />
+                Saved
+              </span>
+            )}
+            {status === "undo" && onUndo && (
+              <button
+                type="button"
+                onClick={onUndo}
+                className="text-primary -my-3 -mr-1 min-h-11 px-1 hover:underline"
+              >
+                Undo
+              </button>
+            )}
+            {onReset && status !== "undo" && (
+              <button
+                type="button"
+                onClick={onReset}
+                className="text-primary -my-3 -mr-1 min-h-11 px-1 hover:underline"
+              >
+                Reset
+              </button>
+            )}
+          </span>
+        </div>
+      )}
+      {below && <div className="col-span-2">{below}</div>}
+    </div>
+  );
+}
+
+/** A titled group of rows with one line of help. */
+export function SettingSection({
+  title,
+  help,
+  children,
+}: {
+  title?: string;
+  help?: string;
+  children: ReactNode;
+}) {
+  return (
+    <section className="mb-5 [&:not(:has([data-setting]))]:hidden">
+      {title && <h3 className="text-sm font-semibold">{title}</h3>}
+      {help && <p className="text-muted-foreground mb-2 text-xs">{help}</p>}
+      <div className="bg-muted/40 overflow-hidden rounded-xl">{children}</div>
+    </section>
+  );
+}
+
+/**
+ * A row whose control is a block of its own (a list, a segmented control):
+ * the label sits above it, and the search box filters it like any row.
+ */
+export function SettingBlock({
+  id,
+  label,
+  help,
+  children,
+}: {
+  id: string;
+  label?: string;
+  help?: string;
+  children: ReactNode;
+}) {
+  const query = useContext(SettingsQueryContext);
+  if (!matchesQuery(query, label, help)) return null;
+  return (
+    <div
+      data-setting={id}
+      className="border-foreground/5 space-y-1.5 border-t px-3 py-2 first:border-t-0"
+    >
+      {label && <p className="text-sm font-medium">{label}</p>}
+      {children}
+      {help && <p className="text-muted-foreground text-xs">{help}</p>}
+    </div>
+  );
+}

package/components/Settings/SettingsDialog.test.ts

@@ -34,6 +34,7 @@ vi.mock("./NoApprovalsSection", () => ({
 vi.mock("@/components/Workspaces", () => ({
   WorkspaceSettings: stub("workspaces"),
 }));
+vi.mock("./ContextSection", () => ({ ContextSection: stub("context") }));
 vi.mock("@/components/Models/ModelsSection", () => ({
   ModelsSection: stub("models"),
 }));

package/components/Settings/SettingsDialog.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { memo, useEffect, useRef } from "react";
+import { memo, useEffect, useRef, useState } from "react";
 import { useSnapshot } from "valtio";
 import {
   ArrowLeft,
@@ -12,7 +12,9 @@ import {
   Cpu,
   GitMerge,
   HeartPulse,
+  Layers,
   LayoutGrid,
+  Search,
   Link2,
   ListChecks,
   ShieldOff,
@@ -48,6 +50,8 @@ import { cn } from "@/lib/utils";
 import { schedulesUiActions } from "@/stores/schedulesUi";
 import { RecipesPanel } from "@/components/Recipes";
 import { settingsUi, settingsUiActions } from "@/stores/settingsUi";
+import { ContextSection } from "./ContextSection";
+import { SettingsQueryContext } from "./SettingRow";
 import { SetupSection } from "./SetupSection";
 import { NoApprovalsSection } from "./NoApprovalsSection";
 import {
@@ -84,6 +88,11 @@ export const SECTION_INFO: Record<
     hint: "Snapshot links you made, with views, and revoke",
     icon: Link2,
   },
+  context: {
+    label: "Context",
+    hint: "When agents start fresh or compact",
+    icon: Layers,
+  },
   models: {
     label: "Models",
     hint: "Which model each kind of work runs on, and providers",
@@ -150,6 +159,8 @@ function SectionBody({
       return <NoApprovalsSection />;
     case "workspaces":
       return <WorkspaceSettings />;
+    case "context":
+      return <ContextSection />;
     case "models":
       return <ModelsSection />;
     case "agent-roles":
@@ -177,6 +188,40 @@ function SectionBody({
   }
 }
 
+// Sections built from SettingRow, which the search box filters.
+const SEARCHABLE: ReadonlySet<SettingsSection> = new Set([
+  "context",
+  "workspaces",
+]);
+
+function SearchableBody({
+  section,
+  browser,
+}: {
+  section: SettingsSection;
+  browser: BrowserNotifications;
+}) {
+  const [query, setQuery] = useState("");
+  if (!SEARCHABLE.has(section))
+    return <SectionBody section={section} browser={browser} />;
+  return (
+    <SettingsQueryContext.Provider value={query}>
+      <div className="relative mb-4">
+        <Search className="text-muted-foreground pointer-events-none absolute top-3.5 left-3 size-4 md:top-2.5" />
+        <input
+          type="search"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder="Search settings"
+          aria-label="Search settings"
+          className="bg-input/60 hairline h-11 w-full rounded-xl border-0 pr-3 pl-9 text-base outline-none md:h-9 md:text-sm"
+        />
+      </div>
+      <SectionBody section={section} browser={browser} />
+    </SettingsQueryContext.Provider>
+  );
+}
+
 /**
  * Every AgentOS setting, in one place. Wide screens show the sections beside
  * the open one; a phone shows the list, then the section with a way back.
@@ -323,7 +368,7 @@ export const SettingsDialog = memo(function SettingsDialog({
               {SECTION_INFO[shown].label}
             </h2>
             {open && (
-              <SectionBody
+              <SearchableBody
                 key={shown}
                 section={shown}
                 browser={notifications}

package/components/Settings/settings-fields.test.ts

@@ -0,0 +1,103 @@
+import "@/components/Chat/composer/test-dom";
+import { act, createElement } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+// Radix dispatches its own events; they must be jsdom's, not Node's.
+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;
+vi.mock("sonner", () => ({ toast: { error: vi.fn() } }));
+
+const { NumberSetting } = await import("./settings-fields");
+
+let root: Root;
+let host: HTMLElement;
+afterEach(async () => {
+  await act(async () => root.unmount());
+  host.remove();
+});
+
+async function mount(save: (n: number) => Promise<unknown>) {
+  host = document.createElement("div");
+  document.body.appendChild(host);
+  root = createRoot(host);
+  await act(async () =>
+    root.render(
+      createElement(NumberSetting, {
+        id: "n",
+        label: "Days",
+        value: 7,
+        defaultValue: 7,
+        min: 1,
+        max: 30,
+        onSave: save,
+      })
+    )
+  );
+  return host.querySelector("input")!;
+}
+
+// React tracks the value; set it the way the browser does, then blur.
+const type = async (input: HTMLInputElement, text: string) => {
+  const set = Object.getOwnPropertyDescriptor(
+    HTMLInputElement.prototype,
+    "value"
+  )!.set!;
+  await act(async () => {
+    set.call(input, text);
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+  });
+};
+const blur = (input: HTMLInputElement) =>
+  act(async () => {
+    input.dispatchEvent(new FocusEvent("focusout", { bubbles: true }));
+  });
+
+describe("NumberSetting", () => {
+  it("keeps an invalid value in the field with a message and sends nothing", async () => {
+    const save = vi.fn().mockResolvedValue(undefined);
+    const input = await mount(save);
+    await type(input, "40");
+    await blur(input);
+    expect(save).not.toHaveBeenCalled();
+    expect(input.value).toBe("40");
+    expect(host.textContent).toContain("Enter a whole number from 1 to 30.");
+  });
+
+  it("saves a valid value on blur", async () => {
+    const save = vi.fn().mockResolvedValue(undefined);
+    const input = await mount(save);
+    await type(input, "14");
+    await blur(input);
+    expect(save).toHaveBeenCalledWith(14);
+  });
+
+  it("reverts on Escape without saving", async () => {
+    const save = vi.fn().mockResolvedValue(undefined);
+    const input = await mount(save);
+    await type(input, "40");
+    await act(async () => {
+      input.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "Escape", bubbles: true })
+      );
+    });
+    expect(input.value).toBe("7");
+    expect(save).not.toHaveBeenCalled();
+  });
+
+  it("goes back to the saved value when the server rejects", async () => {
+    const save = vi.fn().mockRejectedValue(new Error("no"));
+    const input = await mount(save);
+    await type(input, "14");
+    await blur(input);
+    expect(save).toHaveBeenCalledWith(14);
+    expect(input.value).toBe("7");
+  });
+});