@saadnvd1/agent-os 0.3.833 → 0.3.839

package/components/Settings/ContextSection.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { useFreshStartQuery, useUpdateFreshStart } from "@/data/fresh-start";
+import type { RefreshSettings } from "@/lib/chat/refresh";
+import {
+  MAX_REFRESH_TOKENS,
+  MIN_REFRESH_TOKENS,
+} from "@/lib/chat/refresh-limits";
+import {
+  SETTING_DEFAULTS,
+  freshOnValue,
+  type FreshKey,
+} from "@/lib/settings/defaults";
+import { SettingSection } from "./SettingRow";
+import { NumberSetting } from "./settings-fields";
+
+type Row = {
+  key: keyof RefreshSettings & FreshKey;
+  label: string;
+  help: string;
+};
+
+const FRESH: Row[] = [
+  {
+    key: "orchestratorTokens",
+    label: "Orchestrators",
+    help: "Start fresh past this size, at the next turn. Its brief, rules and the workspace's state carry over.",
+  },
+  {
+    key: "taskTokens",
+    label: "Tasks",
+    help: "A task keeps only its brief and its branch.",
+  },
+];
+
+const COMPACT: Row[] = [
+  {
+    key: "autoCompactTokens",
+    label: "Mid-turn, tasks",
+    help: "A task's agent compacts itself while a job runs long. Keep it high: it is holding its files.",
+  },
+  {
+    key: "interactiveAutoCompactTokens",
+    label: "Mid-turn, your sessions",
+    help: "Your own chats and terminals. A terminal only gets this one.",
+  },
+  {
+    key: "compactTokens",
+    label: "Between turns",
+    help: "Compact chats and tasks before the next message. The composer offers first.",
+  },
+];
+
+// When agents start fresh or compact: app-wide, each value saved on its own.
+export function ContextSection() {
+  const { data, isPending, isError, error } = useFreshStartQuery();
+  const update = useUpdateFreshStart();
+  if (isPending)
+    return <div className="bg-muted/40 h-24 animate-pulse rounded-xl" />;
+  if (isError)
+    return <p className="text-destructive text-sm">{error.message}</p>;
+
+  const row = ({ key, label, help }: Row) => (
+    <NumberSetting
+      key={key}
+      id={`context-${key}`}
+      label={label}
+      help={help}
+      value={data[key]}
+      defaultValue={SETTING_DEFAULTS.fresh[key]}
+      onSave={(n) => update.mutateAsync({ [key]: n })}
+      min={MIN_REFRESH_TOKENS}
+      max={MAX_REFRESH_TOKENS}
+      scale={1000}
+      unit="k tokens"
+      short="k"
+      optional={{ off: 0, on: freshOnValue(key) }}
+    />
+  );
+  return (
+    <div className="space-y-1">
+      <SettingSection
+        title="Fresh starts"
+        help="When a conversation passes the size, its agent starts a new one with its brief."
+      >
+        {FRESH.map(row)}
+      </SettingSection>
+      <SettingSection
+        title="Compact"
+        help="Mid-turn, Claude Code summarizes itself; between turns, AgentOS compacts before the next message. AgentOS hands the task, files and todos back."
+      >
+        {COMPACT.map(row)}
+      </SettingSection>
+    </div>
+  );
+}

package/components/Settings/ExperimentsSection.test.ts

@@ -29,7 +29,9 @@ const w = (calls: number) => ({
   dismissed: 1,
   acceptRate: 0.5,
 });
-const state = vi.hoisted(() => ({ mutate: vi.fn() }));
+const state = vi.hoisted(() => ({
+  mutateAsync: vi.fn().mockResolvedValue({}),
+}));
 vi.mock("@/data/experiments", () => ({
   useExperimentsQuery: () => ({
     isPending: false,
@@ -50,7 +52,7 @@ vi.mock("@/data/experiments", () => ({
       ],
     },
   }),
-  useSetExperiment: () => ({ mutate: state.mutate }),
+  useSetExperiment: () => ({ mutateAsync: state.mutateAsync }),
   useExperimentDetailQuery: () => ({ isPending: true }),
 }));
 
@@ -59,7 +61,7 @@ const { ExperimentsSection } = await import("./ExperimentsSection");
 let root: Root;
 let host: HTMLDivElement;
 beforeEach(() => {
-  state.mutate.mockReset();
+  state.mutateAsync.mockClear();
   host = document.createElement("div");
   document.body.appendChild(host);
   root = createRoot(host);
@@ -87,9 +89,9 @@ describe("ExperimentsSection", () => {
         .querySelector('[role="switch"]')
         ?.dispatchEvent(new window.MouseEvent("click", { bubbles: true }));
     });
-    expect(state.mutate).toHaveBeenCalledWith(
-      { id: "learning-cards", on: true },
-      expect.any(Object)
-    );
+    expect(state.mutateAsync).toHaveBeenCalledWith({
+      id: "learning-cards",
+      on: true,
+    });
   });
 });

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,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}