@saadnvd1/agent-os 0.3.836 → 0.3.839

package/components/Workspaces/McpServersForm.tsx

@@ -1,34 +1,35 @@
 "use client";
 
-import { Switch } from "@/components/ui/switch";
+import { SettingSection } from "@/components/Settings/SettingRow";
+import { SwitchSetting } from "@/components/Settings/settings-fields";
 import { useMcpServersQuery, useUpdateWorkspace } from "@/data/workspaces";
 import type { Workspace } from "@/lib/db";
 
 // Which MCP servers a workspace's orchestrator may use. Servers carry their
-// own auth, so none is allowed unless ticked here.
+// own auth, so none is allowed unless switched on here.
 export function McpServersForm({ workspace }: { workspace: Workspace }) {
   const { data: configured = [] } = useMcpServersQuery();
   const update = useUpdateWorkspace();
   const allowed = workspace.orch_mcp_servers;
-  // A ticked server no longer configured stays listed, so it can be unticked.
+  // An allowed server no longer configured stays listed, so it can be removed.
   const names = [...new Set([...configured, ...allowed])];
 
   const toggle = (name: string, on: boolean) =>
-    update.mutate({
+    update.mutateAsync({
       id: workspace.id,
       mcpServers: on ? [...allowed, name] : allowed.filter((n) => n !== name),
     });
 
   return (
-    <div className="bg-muted/40 space-y-2 rounded-lg px-3 py-2.5">
+    <div className="space-y-2">
       <div>
-        <p className="text-sm font-medium">
+        <p className="text-sm font-semibold">
           MCP servers its orchestrator may use
         </p>
         <p className="text-muted-foreground text-xs">
-          All of a ticked server&apos;s tools are allowed. Sending a message,
-          email or post through one still goes to you as an ask. Takes effect at
-          its next turn.
+          All of a server&apos;s tools are allowed once it&apos;s on. Sending a
+          message, email or post through one still goes to you as an ask. Takes
+          effect at its next turn.
         </p>
       </div>
       {names.length === 0 ? (
@@ -36,18 +37,18 @@ export function McpServersForm({ workspace }: { workspace: Workspace }) {
           No MCP servers are configured on this machine.
         </p>
       ) : (
-        names.map((name) => (
-          <label
-            key={name}
-            className="flex min-h-11 items-center justify-between gap-3 text-sm"
-          >
-            <span className="min-w-0 truncate">{name}</span>
-            <Switch
+        <SettingSection>
+          {names.map((name) => (
+            <SwitchSetting
+              key={name}
+              id={`mcp-${workspace.id}-${name}`}
+              label={name}
               checked={allowed.includes(name)}
-              onCheckedChange={(on) => toggle(name, on)}
+              defaultValue={false}
+              onSave={(on) => toggle(name, on)}
             />
-          </label>
-        ))
+          ))}
+        </SettingSection>
       )}
     </div>
   );

package/components/Workspaces/ProjectTiersForm.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { SettingToggle } from "@/components/Settings/SettingToggle";
+import { SettingSection } from "@/components/Settings/SettingRow";
+import { SwitchSetting } from "@/components/Settings/settings-fields";
 import { useProjectsQuery, useUpdateProject } from "@/data/projects";
 
 // A workspace's projects, each switched between production (every merge gate)
@@ -13,21 +14,22 @@ export function ProjectTiersForm({ workspaceId }: { workspaceId: string }) {
   );
   if (!mine.length) return null;
   return (
-    <div className="space-y-2">
+    <SettingSection>
       {mine.map((p) => (
-        <SettingToggle
+        <SwitchSetting
           key={p.id}
-          title={`${p.name}: production`}
-          detail="On: CI, the independent review and scope gate its merges. Off (fast): a task's PR merges as soon as it opens."
+          id={`tier-${p.id}`}
+          label={`${p.name}: production`}
+          help="On: CI, the independent review and scope gate its merges. Off (fast): a task's PR merges as soon as it opens."
           checked={p.tier === "production"}
-          onChange={(on) =>
-            update.mutate({
+          onSave={(on) =>
+            update.mutateAsync({
               projectId: p.id,
               tier: on ? "production" : "fast",
             })
           }
         />
       ))}
-    </div>
+    </SettingSection>
   );
 }

package/components/Workspaces/RulesForm.test.ts

@@ -0,0 +1,127 @@
+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(() => ({
+  update: vi.fn(),
+  add: vi.fn(),
+  toast: vi.fn(),
+}));
+vi.mock("sonner", () => ({ toast: { error: state.toast } }));
+vi.mock("@/data/orchestrators/rules", () => ({
+  useRulesQuery: () => ({
+    isPending: false,
+    isError: false,
+    data: [
+      { id: 4, workspace_id: "w1", text: "Never merge #12", added_by: "saad" },
+    ],
+  }),
+  useAddRule: () => ({ mutateAsync: state.add }),
+  useUpdateRule: () => ({ mutateAsync: state.update }),
+  useRemoveRule: () => ({ mutate: vi.fn(), isPending: false }),
+}));
+
+const { RulesForm } = await import("./RulesForm");
+
+let root: Root;
+let host: HTMLDivElement;
+beforeEach(() => {
+  state.update.mockReset().mockResolvedValue(undefined);
+  state.add.mockReset().mockResolvedValue(undefined);
+  state.toast.mockReset();
+  host = document.createElement("div");
+  document.body.appendChild(host);
+  root = createRoot(host);
+});
+afterEach(async () => {
+  await act(async () => root.unmount());
+  host.remove();
+});
+
+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 rule = () => host.querySelector<HTMLInputElement>("#rule-4")!;
+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("RulesForm", () => {
+  beforeEach(async () => {
+    await act(async () =>
+      root.render(createElement(RulesForm, { workspaceId: "w1" }))
+    );
+  });
+
+  it("never asks for a passkey on blur", async () => {
+    await type(rule(), "Never merge #13");
+    await act(async () => {
+      rule().dispatchEvent(new FocusEvent("focusout", { bubbles: true }));
+    });
+    expect(state.update).not.toHaveBeenCalled();
+  });
+
+  it("saves through the passkey step on the Save button, and says Saved", async () => {
+    await type(rule(), "Never merge #13");
+    await click(button("Save"));
+    expect(state.update).toHaveBeenCalledWith({
+      id: 4,
+      text: "Never merge #13",
+    });
+    expect(host.textContent).toContain("Saved");
+  });
+
+  it("saves on Enter", async () => {
+    await type(rule(), "Never merge #13");
+    await act(async () => {
+      rule().dispatchEvent(
+        new KeyboardEvent("keydown", { key: "Enter", bubbles: true })
+      );
+    });
+    expect(state.update).toHaveBeenCalledOnce();
+  });
+
+  it("rolls back and toasts when the passkey is cancelled", async () => {
+    state.update.mockRejectedValue(new Error("Passkey cancelled"));
+    await type(rule(), "Never merge #13");
+    await click(button("Save"));
+    expect(rule().value).toBe("Never merge #12");
+    expect(state.toast).toHaveBeenCalledWith("Passkey cancelled");
+    expect(host.textContent).not.toContain("Saved");
+  });
+
+  it("won't save an empty rule", async () => {
+    await type(rule(), "  ");
+    await click(button("Save"));
+    expect(state.update).not.toHaveBeenCalled();
+    expect(host.textContent).toContain("A rule can't be empty");
+  });
+
+  it("adds a rule through the same step", async () => {
+    const input = host.querySelector<HTMLInputElement>("#rule-new-w1")!;
+    await type(input, "House rule");
+    await click(button("Add"));
+    expect(state.add).toHaveBeenCalledWith("House rule");
+  });
+});

package/components/Workspaces/RulesForm.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import { useState } from "react";
-import { Check, Pencil, Trash2, X } from "lucide-react";
+import { Trash2 } from "lucide-react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
+import { SettingSection } from "@/components/Settings/SettingRow";
+import { TextSetting } from "@/components/Settings/settings-fields";
 import type { RuleRow } from "@/lib/orchestrator/rules";
 import {
   useAddRule,
@@ -17,58 +17,44 @@ const MAX_CHARS = 300;
 
 // The orchestrator's standing rules for one workspace: what it keeps
 // knowing across fresh starts. It adds them itself too; Saad edits here.
+// Every change takes his passkey (data/orchestrators/rules), so a rule saves
+// on Enter or its button, never on blur; a cancelled or refused passkey rolls
+// the row back like any failed save.
 export function RulesForm({ workspaceId }: { workspaceId: string }) {
   const { data: rules, isPending, isError, error } = useRulesQuery(workspaceId);
   const add = useAddRule(workspaceId);
-  const [text, setText] = useState("");
 
   return (
     <div className="space-y-2">
-      <div className="text-sm">Orchestrator rules</div>
+      <p className="text-sm font-semibold">Orchestrator rules</p>
       {isPending ? (
         <div className="bg-muted/60 h-11 animate-pulse rounded-md" />
       ) : isError ? (
         <p className="text-destructive text-xs">{error.message}</p>
-      ) : rules.length ? (
-        <ul className="space-y-1">
+      ) : (
+        <SettingSection
+          help={
+            rules.length
+              ? "Each change asks for your passkey."
+              : "None yet. The orchestrator keeps one when you tell it something standing, like a PR never to merge. Each change asks for your passkey."
+          }
+        >
           {rules.map((r) => (
             <RuleItem key={`${r.id}:${r.text}`} rule={r} />
           ))}
-        </ul>
-      ) : (
-        <p className="text-muted-foreground text-xs">
-          None yet. The orchestrator keeps one when you tell it something
-          standing, like a PR never to merge.
-        </p>
+          <TextSetting
+            id={`rule-new-${workspaceId}`}
+            label="New rule"
+            value=""
+            explicit
+            resettable={false}
+            buttonLabel="Add"
+            maxLength={MAX_CHARS}
+            placeholder="A PR never to merge, a URL, a house rule"
+            onSave={(text) => add.mutateAsync(text)}
+          />
+        </SettingSection>
       )}
-      <form
-        onSubmit={(e) => {
-          e.preventDefault();
-          if (!text.trim()) return;
-          add.mutate(text, {
-            onSuccess: () => setText(""),
-            onError: (err) => toast.error(err.message),
-          });
-        }}
-        className="flex items-center gap-2"
-      >
-        <Input
-          value={text}
-          maxLength={MAX_CHARS}
-          onChange={(e) => setText(e.target.value)}
-          placeholder="A PR never to merge, a URL, a house rule"
-          aria-label="New orchestrator rule"
-          className="h-11 text-base sm:h-9 md:text-sm"
-        />
-        <Button
-          type="submit"
-          size="sm"
-          className="h-11 sm:h-8"
-          disabled={!text.trim() || add.isPending}
-        >
-          Add
-        </Button>
-      </form>
     </div>
   );
 }
@@ -76,91 +62,33 @@ export function RulesForm({ workspaceId }: { workspaceId: string }) {
 function RuleItem({ rule }: { rule: RuleRow }) {
   const update = useUpdateRule(rule.workspace_id);
   const remove = useRemoveRule(rule.workspace_id);
-  const [editing, setEditing] = useState(false);
-  const [text, setText] = useState(rule.text);
-
-  if (editing)
-    return (
-      <li>
-        <form
-          onSubmit={(e) => {
-            e.preventDefault();
-            update.mutate(
-              { id: rule.id, text },
-              {
-                onSuccess: () => setEditing(false),
-                onError: (err) => toast.error(err.message),
-              }
-            );
-          }}
-          className="flex items-center gap-1"
-        >
-          <Input
-            autoFocus
-            value={text}
-            maxLength={MAX_CHARS}
-            onChange={(e) => setText(e.target.value)}
-            aria-label={`Rule ${rule.id}`}
-            className="h-11 text-base sm:h-9 md:text-sm"
-          />
-          <Button
-            type="submit"
-            variant="ghost"
-            size="icon"
-            className="size-11 shrink-0 sm:size-8"
-            disabled={!text.trim() || update.isPending}
-            aria-label="Save rule"
-          >
-            <Check className="size-4" />
-          </Button>
-          <Button
-            type="button"
-            variant="ghost"
-            size="icon"
-            className="size-11 shrink-0 sm:size-8"
-            onClick={() => {
-              setText(rule.text);
-              setEditing(false);
-            }}
-            aria-label="Cancel"
-          >
-            <X className="size-4" />
-          </Button>
-        </form>
-      </li>
-    );
-
   return (
-    <li className="bg-background/60 flex items-start gap-1 rounded-md py-1 pr-1 pl-2.5">
-      <div className="min-w-0 flex-1 py-1.5">
-        <p className="text-sm break-words">{rule.text}</p>
-        <p className="text-muted-foreground text-xs">
-          {rule.added_by === "saad" ? "You" : "Orchestrator"}
-        </p>
-      </div>
-      <Button
-        variant="ghost"
-        size="icon"
-        className="size-11 shrink-0 sm:size-8"
-        onClick={() => setEditing(true)}
-        aria-label={`Edit rule: ${rule.text}`}
-      >
-        <Pencil className="size-4" />
-      </Button>
-      <Button
-        variant="ghost"
-        size="icon"
-        className="size-11 shrink-0 sm:size-8"
-        disabled={remove.isPending}
-        onClick={() =>
-          remove.mutate(rule.id, {
-            onError: (err) => toast.error(err.message),
-          })
-        }
-        aria-label={`Remove rule: ${rule.text}`}
-      >
-        <Trash2 className="size-4" />
-      </Button>
-    </li>
+    <TextSetting
+      id={`rule-${rule.id}`}
+      label={rule.added_by === "saad" ? "Your rule" : "Orchestrator's rule"}
+      value={rule.text}
+      explicit
+      resettable={false}
+      buttonLabel="Save"
+      maxLength={MAX_CHARS}
+      validate={(text) => (text ? null : "A rule can't be empty")}
+      onSave={(text) => update.mutateAsync({ id: rule.id, text })}
+      after={
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-11 shrink-0 sm:size-8"
+          disabled={remove.isPending}
+          onClick={() =>
+            remove.mutate(rule.id, {
+              onError: (err) => toast.error(err.message),
+            })
+          }
+          aria-label={`Remove rule: ${rule.text}`}
+        >
+          <Trash2 className="size-4" />
+        </Button>
+      }
+    />
   );
 }

package/components/Workspaces/WorkspaceModelsForm.tsx

@@ -1,6 +1,8 @@
 "use client";
 
 import { useState } from "react";
+import { PickerSetting } from "@/components/Settings/PickerSetting";
+import { SettingSection } from "@/components/Settings/SettingRow";
 import { ModelSelect } from "@/components/Models/ModelSelect";
 import {
   useModelsQuery,
@@ -37,34 +39,33 @@ export function WorkspaceModelsForm({ workspaceId }: { workspaceId: string }) {
         {open ? "▴" : "▾"}
       </button>
       {open && (
-        <ul className="space-y-2">
+        <SettingSection>
           {WORKSPACE_ROLES.map((role) => (
-            <li key={role} className="space-y-1">
-              <label
-                htmlFor={`ws-${workspaceId}-${role}`}
-                className="text-muted-foreground block text-xs"
-              >
-                {ROLE_LABELS[role].label}
-              </label>
-              <ModelSelect
-                id={`ws-${workspaceId}-${role}`}
-                value={roles[role] ?? null}
-                effective={models.data?.effective}
-                inheritLabel={`As Settings (${models.data?.effective.roles[role] ?? "…"})`}
-                disabled={update.isPending || !models.data}
-                onChange={(ref) => {
-                  const next = { ...roles };
-                  if (ref) next[role] = ref;
-                  else delete next[role];
-                  update.mutate({ roles: next });
-                }}
-              />
-            </li>
+            <PickerSetting<string | null>
+              key={role}
+              id={`ws-${workspaceId}-${role}`}
+              label={ROLE_LABELS[role].label}
+              value={roles[role] ?? null}
+              defaultValue={null}
+              onSave={(ref) => {
+                const next = { ...roles };
+                if (ref) next[role] = ref;
+                else delete next[role];
+                return update.mutateAsync({ roles: next });
+              }}
+              render={({ value, commit }) => (
+                <ModelSelect
+                  id={`ws-${workspaceId}-${role}`}
+                  value={value}
+                  effective={models.data?.effective}
+                  inheritLabel={`As Settings (${models.data?.effective.roles[role] ?? "…"})`}
+                  disabled={!models.data}
+                  onChange={commit}
+                />
+              )}
+            />
           ))}
-        </ul>
-      )}
-      {update.isError && (
-        <p className="text-destructive text-xs">{update.error.message}</p>
+        </SettingSection>
       )}
     </div>
   );

package/components/Workspaces/WorkspaceSettings.tsx

@@ -1,17 +1,20 @@
 "use client";
 
-import { SettingToggle } from "@/components/Settings/SettingToggle";
+import { settingsUiActions } from "@/stores/settingsUi";
 import { useUpdateWorkspace, useWorkspacesQuery } from "@/data/workspaces";
-import { TaskLimitForm } from "./TaskLimitForm";
 import { RulesForm } from "./RulesForm";
-import { FreshStartForm } from "./FreshStartForm";
 import { McpServersForm } from "./McpServersForm";
 import { HqFolderForm } from "./HqFolderForm";
 import { ProjectTiersForm } from "./ProjectTiersForm";
-import { StallForm } from "./StallForm";
 import { WorkspaceModeForm } from "./WorkspaceModeForm";
 import { WorkspaceModelsForm } from "./WorkspaceModelsForm";
-import { AwayWindowForm } from "@/components/Away/AwayWindowForm";
+import { AppWideLimits } from "@/components/Settings/AppWideLimits";
+import {
+  NumberSetting,
+  SwitchSetting,
+} from "@/components/Settings/settings-fields";
+import { SettingSection } from "@/components/Settings/SettingRow";
+import { SETTING_DEFAULTS } from "@/lib/settings/defaults";
 
 // Settings > Workspaces: each workspace's own settings.
 export function WorkspaceSettings() {
@@ -43,33 +46,67 @@ export function WorkspaceSettings() {
           className="bg-muted/40 space-y-3 rounded-lg px-3 py-3"
         >
           <h3 className="truncate text-sm font-medium">{w.name}</h3>
-          <TaskLimitForm
-            key={`${w.id}:${w.max_running_tasks ?? "off"}`}
-            workspace={w}
-          />
+          <SettingSection>
+            <NumberSetting
+              id={`task-limit-${w.id}`}
+              label="Tasks at a time"
+              help="Cap on tasks running at once. The rest wait in Queued and start in order."
+              value={w.max_running_tasks ?? 0}
+              defaultValue={0}
+              onSave={(n) =>
+                update.mutateAsync({
+                  id: w.id,
+                  maxRunningTasks: n === 0 ? null : n,
+                })
+              }
+              min={1}
+              integer
+              unit="at a time"
+              optional={{ off: 0, on: SETTING_DEFAULTS.taskLimitOn }}
+            />
+          </SettingSection>
           <WorkspaceModeForm workspaceId={w.id} />
           <RulesForm workspaceId={w.id} />
           <WorkspaceModelsForm workspaceId={w.id} />
           <McpServersForm workspace={w} />
           <HqFolderForm workspaceId={w.id} />
           <ProjectTiersForm workspaceId={w.id} />
-          <SettingToggle
-            title="Wake tasks on CI failures and reviews"
-            detail="A task's agent is messaged once when a check fails on its PR's head, with the log's tail, and when someone reviews or comments on it."
-            checked={w.wake_tasks_on_pr}
-            onChange={(on) => update.mutate({ id: w.id, wakeTasksOnPR: on })}
-          />
-          <SettingToggle
-            title="Orchestrator full access"
-            detail="Its shell and file writes aren't checked: it can push, commit, edit any repository or file on this machine, and merge a PR directly, and edit .claude files (skills, settings, hooks). Applies when its conversation next restarts. Off: the deny list, write limits, quick-change cap and merge-only-through-the-gates apply."
-            checked={w.orch_full_access}
-            onChange={(on) => update.mutate({ id: w.id, orchFullAccess: on })}
-          />
+          <SettingSection>
+            <SwitchSetting
+              id={`wake-${w.id}`}
+              label="Wake tasks on CI failures and reviews"
+              help="A task's agent is messaged once when a check fails on its PR, and when someone reviews or comments."
+              checked={w.wake_tasks_on_pr}
+              onSave={(on) =>
+                update.mutateAsync({ id: w.id, wakeTasksOnPR: on })
+              }
+            />
+            <SwitchSetting
+              id={`full-access-${w.id}`}
+              label="Orchestrator full access"
+              help="Its shell and file writes aren't checked. Applies when its conversation next restarts."
+              checked={w.orch_full_access}
+              confirm="Let this orchestrator act without approval? It can push, commit, edit any repository or file on this machine, merge a PR directly, and edit .claude files. Off: the deny list, write limits and merge-only-through-the-gates apply."
+              confirmLabel="Turn on full access"
+              onSave={(on) =>
+                update.mutateAsync({ id: w.id, orchFullAccess: on })
+              }
+            />
+          </SettingSection>
         </section>
       ))}
-      <FreshStartForm />
-      <StallForm />
-      <AwayWindowForm />
+      <AppWideLimits />
+      <p className="text-muted-foreground text-sm">
+        Fresh starts and compaction are app-wide:{" "}
+        <button
+          type="button"
+          className="text-primary underline-offset-2 hover:underline"
+          onClick={() => settingsUiActions.show("context")}
+        >
+          open Context
+        </button>
+        .
+      </p>
     </div>
   );
 }

package/content/whats-new.json

@@ -1969,6 +1969,22 @@
       "area": "AgentOS",
       "text": "Forking from a selection is tidier: the fork pill can be dismissed while keeping your quote and text, and started forks show a one-line marker and what they're doing.",
       "url": "https://github.com/saadnvd1/agent-os/pull/561"
+    },
+    {
+      "id": 562,
+      "date": "2026-11-02",
+      "kind": "improved",
+      "area": "Settings",
+      "text": "Settings now save as you change them, with a clear \"Saved\" note, undo and reset, and Context settings have their own page.",
+      "url": "https://github.com/saadnvd1/agent-os/pull/562"
+    },
+    {
+      "id": 563,
+      "date": "2026-11-02",
+      "kind": "improved",
+      "area": "Settings",
+      "text": "More settings now save as you change them, and revoking a passkey or link asks inline instead of with a browser pop-up.",
+      "url": "https://github.com/saadnvd1/agent-os/pull/563"
     }
   ]
 }