@saadnvd1/agent-os 0.3.836 → 0.3.845

package/components/Workspaces/McpServersForm.tsx

@@ -1,54 +1,47 @@
 "use client";
 
-import { Switch } from "@/components/ui/switch";
+import { SettingBlock, 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>
-        <p className="text-sm font-medium">
-          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.
-        </p>
-      </div>
+    <SettingSection
+      title="MCP servers"
+      help="One switch per server; all its tools are allowed once it's on. Sending a message, email or post through one still asks you. Takes effect at the orchestrator's next turn."
+    >
       {names.length === 0 ? (
-        <p className="text-muted-foreground text-xs">
-          No MCP servers are configured on this machine.
-        </p>
+        <SettingBlock id={`mcp-none-${workspace.id}`} label="MCP servers">
+          <p className="text-muted-foreground text-xs">
+            No MCP servers are configured on this machine.
+          </p>
+        </SettingBlock>
       ) : (
         names.map((name) => (
-          <label
+          <SwitchSetting
             key={name}
-            className="flex min-h-11 items-center justify-between gap-3 text-sm"
-          >
-            <span className="min-w-0 truncate">{name}</span>
-            <Switch
-              checked={allowed.includes(name)}
-              onCheckedChange={(on) => toggle(name, on)}
-            />
-          </label>
+            id={`mcp-${workspace.id}-${name}`}
+            label={name}
+            checked={allowed.includes(name)}
+            onSave={(on) => toggle(name, on)}
+          />
         ))
       )}
-    </div>
+    </SettingSection>
   );
 }

package/components/Workspaces/ProjectTiersForm.tsx

@@ -1,8 +1,17 @@
 "use client";
 
-import { SettingToggle } from "@/components/Settings/SettingToggle";
+import { PickerSetting } from "@/components/Settings/PickerSetting";
+import { SettingSection } from "@/components/Settings/SettingRow";
+import { Segmented } from "@/components/ui/segmented";
 import { useProjectsQuery, useUpdateProject } from "@/data/projects";
 
+type Tier = "production" | "fast";
+
+const TIERS: { value: Tier; label: string }[] = [
+  { value: "production", label: "Production" },
+  { value: "fast", label: "Fast" },
+];
+
 // A workspace's projects, each switched between production (every merge gate)
 // and fast (a task's PR merges as soon as it opens).
 export function ProjectTiersForm({ workspaceId }: { workspaceId: string }) {
@@ -13,21 +22,27 @@ export function ProjectTiersForm({ workspaceId }: { workspaceId: string }) {
   );
   if (!mine.length) return null;
   return (
-    <div className="space-y-2">
+    <SettingSection
+      title="Projects"
+      help="Production: CI, the independent review and the scope gate every merge. Fast: a task's PR merges as soon as it opens."
+    >
       {mine.map((p) => (
-        <SettingToggle
+        <PickerSetting<Tier>
           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."
-          checked={p.tier === "production"}
-          onChange={(on) =>
-            update.mutate({
-              projectId: p.id,
-              tier: on ? "production" : "fast",
-            })
-          }
+          id={`tier-${p.id}`}
+          label={p.name}
+          value={p.tier === "production" ? "production" : "fast"}
+          onSave={(tier) => update.mutateAsync({ projectId: p.id, tier })}
+          render={({ value, commit }) => (
+            <Segmented
+              label={`${p.name} merge tier`}
+              value={value}
+              options={TIERS}
+              onChange={commit}
+            />
+          )}
         />
       ))}
-    </div>
+    </SettingSection>
   );
 }

package/components/Workspaces/RuleEditor.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+
+export const MAX_RULE_CHARS = 300;
+
+// The one editor for a rule, new or existing. Save and Cancel are here only
+// while it's open, and Save waits for a real change.
+export function RuleEditor({
+  id,
+  label,
+  initial,
+  saveLabel = "Save",
+  placeholder,
+  onSave,
+  onCancel,
+}: {
+  id: string;
+  label: string;
+  initial: string;
+  saveLabel?: string;
+  placeholder?: string;
+  // Throws to refuse; the editor stays open with what was typed.
+  onSave: (text: string) => Promise<unknown>;
+  onCancel: () => void;
+}) {
+  const [text, setText] = useState(initial);
+  const [saving, setSaving] = useState(false);
+  const next = text.trim();
+  const canSave = !!next && next !== initial.trim() && !saving;
+
+  const save = async () => {
+    if (!canSave) return;
+    setSaving(true);
+    try {
+      await onSave(next);
+    } catch {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div className="space-y-2">
+      <Textarea
+        id={id}
+        autoFocus
+        rows={3}
+        value={text}
+        maxLength={MAX_RULE_CHARS}
+        placeholder={placeholder}
+        aria-label={label}
+        onChange={(e) => setText(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Escape") onCancel();
+          if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) void save();
+        }}
+        className="text-base md:text-sm"
+      />
+      <div className="flex items-center justify-end gap-2">
+        <span className="text-muted-foreground mr-auto text-xs tabular-nums">
+          {text.length}/{MAX_RULE_CHARS}
+        </span>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="h-11 sm:h-9"
+          onClick={onCancel}
+        >
+          Cancel
+        </Button>
+        <Button
+          type="button"
+          size="sm"
+          className="h-11 sm:h-9"
+          disabled={!canSave}
+          onClick={() => void save()}
+        >
+          {saveLabel}
+        </Button>
+      </div>
+    </div>
+  );
+}

package/components/Workspaces/RulesForm.test.ts

@@ -0,0 +1,154 @@
+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: HTMLTextAreaElement, text: string) => {
+  const set = Object.getOwnPropertyDescriptor(
+    window.HTMLTextAreaElement.prototype,
+    "value"
+  )!.set!;
+  await act(async () => {
+    set.call(input, text);
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+  });
+};
+const editor = (id: string) => host.querySelector<HTMLTextAreaElement>(id)!;
+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);
+const edit = () => click(host.querySelector('button[aria-label^="Edit rule"]'));
+
+describe("RulesForm", () => {
+  beforeEach(async () => {
+    await act(async () =>
+      root.render(createElement(RulesForm, { workspaceId: "w1" }))
+    );
+  });
+
+  it("lists the rule as text with a You badge, and no editor or Save", () => {
+    expect(host.textContent).toContain("Never merge #12");
+    expect(host.textContent).toContain("You");
+    expect(host.querySelector("textarea")).toBeNull();
+    expect(button("Save")).toBeUndefined();
+  });
+
+  it("opens a multi-line editor on a click of the rule or its edit icon", async () => {
+    await edit();
+    expect(editor("#rule-4").value).toBe("Never merge #12");
+    await click(button("Cancel"));
+    await click(host.querySelector("li, [data-setting='rule-4'] button"));
+    expect(editor("#rule-4")).not.toBeNull();
+  });
+
+  it("only enables Save once the text has changed", async () => {
+    await edit();
+    expect(button("Save")!.disabled).toBe(true);
+    await type(editor("#rule-4"), "Never merge #13");
+    expect(button("Save")!.disabled).toBe(false);
+    await type(editor("#rule-4"), "Never merge #12");
+    expect(button("Save")!.disabled).toBe(true);
+    await type(editor("#rule-4"), "   ");
+    expect(button("Save")!.disabled).toBe(true);
+  });
+
+  it("never asks for a passkey on blur", async () => {
+    await edit();
+    await type(editor("#rule-4"), "Never merge #13");
+    await act(async () => {
+      editor("#rule-4").dispatchEvent(
+        new FocusEvent("focusout", { bubbles: true })
+      );
+    });
+    expect(state.update).not.toHaveBeenCalled();
+  });
+
+  it("saves through the passkey step on Save and closes the editor", async () => {
+    await edit();
+    await type(editor("#rule-4"), "Never merge #13");
+    await click(button("Save"));
+    expect(state.update).toHaveBeenCalledWith({
+      id: 4,
+      text: "Never merge #13",
+    });
+    expect(host.querySelector("textarea")).toBeNull();
+  });
+
+  it("cancel closes the editor and drops what was typed", async () => {
+    await edit();
+    await type(editor("#rule-4"), "Never merge #13");
+    await click(button("Cancel"));
+    expect(state.update).not.toHaveBeenCalled();
+    expect(host.querySelector("textarea")).toBeNull();
+    expect(host.textContent).toContain("Never merge #12");
+    await edit();
+    expect(editor("#rule-4").value).toBe("Never merge #12");
+  });
+
+  it("keeps the editor open and toasts when the passkey is cancelled", async () => {
+    state.update.mockRejectedValue(new Error("Passkey cancelled"));
+    await edit();
+    await type(editor("#rule-4"), "Never merge #13");
+    await click(button("Save"));
+    expect(editor("#rule-4").value).toBe("Never merge #13");
+    expect(state.toast).toHaveBeenCalledWith("Passkey cancelled");
+  });
+
+  it("adds a rule from the same editor, through the same step", async () => {
+    await click(button("Add rule"));
+    expect(button("Add rule")!.disabled).toBe(true);
+    await type(editor("#rule-new-w1"), "House rule");
+    await click(button("Add rule"));
+    expect(state.add).toHaveBeenCalledWith("House rule");
+    expect(host.querySelector("textarea")).toBeNull();
+  });
+});

package/components/Workspaces/RulesForm.tsx

@@ -1,10 +1,16 @@
 "use client";
 
-import { useState } from "react";
-import { Check, Pencil, Trash2, X } from "lucide-react";
+import { useContext, useState } from "react";
+import { Pencil, Plus, Trash2 } from "lucide-react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
+import { StatusPill } from "@/components/ui/status-pill";
+import {
+  matchesQuery,
+  SettingBlock,
+  SettingSection,
+  SettingsQueryContext,
+} from "@/components/Settings/SettingRow";
 import type { RuleRow } from "@/lib/orchestrator/rules";
 import {
   useAddRule,
@@ -12,64 +18,78 @@ import {
   useRulesQuery,
   useUpdateRule,
 } from "@/data/orchestrators/rules";
+import { RuleEditor } from "./RuleEditor";
 
-const MAX_CHARS = 300;
+const ROW = "border-foreground/5 border-t px-3 py-2 first:border-t-0";
 
 // The orchestrator's standing rules for one workspace: what it keeps
 // knowing across fresh starts. It adds them itself too; Saad edits here.
+// Every add, edit and remove takes his passkey (data/orchestrators/rules), so
+// nothing saves until Save, never on blur; a cancelled or refused passkey
+// leaves the editor open with what was typed.
 export function RulesForm({ workspaceId }: { workspaceId: string }) {
   const { data: rules, isPending, isError, error } = useRulesQuery(workspaceId);
   const add = useAddRule(workspaceId);
-  const [text, setText] = useState("");
+  const [adding, setAdding] = useState(false);
+  const query = useContext(SettingsQueryContext);
 
   return (
-    <div className="space-y-2">
-      <div className="text-sm">Orchestrator rules</div>
+    <SettingSection
+      title="Rules"
+      help="What the orchestrator keeps across fresh starts, like a PR never to merge. Each change asks for your passkey."
+    >
       {isPending ? (
-        <div className="bg-muted/60 h-11 animate-pulse rounded-md" />
+        <div className="bg-muted/60 m-3 h-11 animate-pulse rounded-md" />
       ) : isError ? (
-        <p className="text-destructive text-xs">{error.message}</p>
-      ) : rules.length ? (
-        <ul className="space-y-1">
+        <p className="text-destructive px-3 py-2 text-sm">{error.message}</p>
+      ) : (
+        <>
+          {rules.length === 0 && !adding && (
+            <SettingBlock id={`rules-none-${workspaceId}`} label="Rules">
+              <p className="text-muted-foreground text-xs">None yet.</p>
+            </SettingBlock>
+          )}
           {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>
+          {matchesQuery(query, "add rule") && (
+            <div data-setting={`rule-new-${workspaceId}`} className={ROW}>
+              {adding ? (
+                <RuleEditor
+                  id={`rule-new-${workspaceId}`}
+                  label="New rule"
+                  initial=""
+                  saveLabel="Add rule"
+                  placeholder="A PR never to merge, a URL, a house rule"
+                  onSave={async (text) => {
+                    try {
+                      await add.mutateAsync(text);
+                    } catch (err) {
+                      toast.error(
+                        err instanceof Error ? err.message : "Couldn't add"
+                      );
+                      throw err;
+                    }
+                    setAdding(false);
+                  }}
+                  onCancel={() => setAdding(false)}
+                />
+              ) : (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="text-primary -ml-2 h-11 sm:h-9"
+                  onClick={() => setAdding(true)}
+                >
+                  <Plus className="size-4" />
+                  Add rule
+                </Button>
+              )}
+            </div>
+          )}
+        </>
       )}
-      <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>
+    </SettingSection>
   );
 }
 
@@ -77,90 +97,69 @@ 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);
+  const query = useContext(SettingsQueryContext);
+  if (!matchesQuery(query, rule.text)) return null;
 
-  if (editing)
-    return (
-      <li>
-        <form
-          onSubmit={(e) => {
-            e.preventDefault();
-            update.mutate(
-              { id: rule.id, text },
-              {
-                onSuccess: () => setEditing(false),
-                onError: (err) => toast.error(err.message),
-              }
-            );
+  return (
+    <div data-setting={`rule-${rule.id}`} className={ROW}>
+      {editing ? (
+        <RuleEditor
+          id={`rule-${rule.id}`}
+          label="Edit rule"
+          initial={rule.text}
+          onSave={async (text) => {
+            try {
+              await update.mutateAsync({ id: rule.id, text });
+            } catch (err) {
+              toast.error(err instanceof Error ? err.message : "Couldn't save");
+              throw err;
+            }
+            setEditing(false);
           }}
-          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"
-          />
+          onCancel={() => setEditing(false)}
+        />
+      ) : (
+        <div className="flex items-start gap-1">
+          <button
+            type="button"
+            onClick={() => setEditing(true)}
+            className="hover:bg-muted/60 -my-1 min-h-11 min-w-0 flex-1 cursor-pointer rounded-md px-2 py-1 text-left"
+          >
+            <StatusPill
+              tone={rule.added_by === "saad" ? "primary" : "muted"}
+              className="mb-1"
+            >
+              {rule.added_by === "saad" ? "You" : "Orchestrator"}
+            </StatusPill>
+            <span className="block text-sm break-words whitespace-pre-wrap">
+              {rule.text}
+            </span>
+          </button>
           <Button
-            type="submit"
             variant="ghost"
             size="icon"
             className="size-11 shrink-0 sm:size-8"
-            disabled={!text.trim() || update.isPending}
-            aria-label="Save rule"
+            onClick={() => setEditing(true)}
+            aria-label={`Edit rule: ${rule.text}`}
           >
-            <Check className="size-4" />
+            <Pencil 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"
+            disabled={remove.isPending}
+            onClick={() =>
+              remove.mutate(rule.id, {
+                onError: (err) => toast.error(err.message),
+              })
+            }
+            aria-label={`Remove rule: ${rule.text}`}
           >
-            <X className="size-4" />
+            <Trash2 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>
+        </div>
+      )}
+    </div>
   );
 }