@saadnvd1/agent-os 0.3.836 → 0.3.839

package/components/Settings/SettingRow.tsx

@@ -0,0 +1,131 @@
+"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("");
+
+/**
+ * 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).trim().toLowerCase();
+  const haystack = `${label} ${help ?? ""}`.toLowerCase();
+  if (query && !query.split(/\s+/).every((w) => haystack.includes(w)))
+    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>
+      <div className="text-muted-foreground col-span-2 flex min-h-5 items-center justify-between gap-2 text-xs">
+        <span
+          id={`${id}-hint`}
+          className={cn("min-w-0", 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>
+  );
+}

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