@saadnvd1/agent-os 0.3.839 → 0.3.848

package/components/Updates/AutoUpdates.tsx

@@ -2,7 +2,8 @@
 
 import { toast } from "sonner";
 import { CheckCircle2, CircleAlert, RotateCcw } from "lucide-react";
-import { SettingToggle } from "@/components/Settings/SettingToggle";
+import { SwitchSetting } from "@/components/Settings/settings-fields";
+import { SettingSection } from "@/components/Settings/SettingRow";
 import {
   Select,
   SelectContent,
@@ -80,13 +81,16 @@ export function AutoUpdates({ auto }: { auto: AutoUpdateView }) {
   const onError = (e: Error) => toast.error(e.message);
   return (
     <div className="space-y-3">
-      <SettingToggle
-        title="Install updates automatically"
-        detail="Once everything has been idle for a while. Terminals and chats keep running through the restart, and a version that doesn't start cleanly is rolled back."
-        checked={auto.enabled}
-        locked={auto.locked}
-        onChange={(on) => save.mutate({ auto: on }, { onError })}
-      />
+      <SettingSection>
+        <SwitchSetting
+          id="auto-update"
+          label="Install updates automatically"
+          help="Once everything has been idle for a while. Terminals and chats keep running through the restart, and a version that doesn't start cleanly is rolled back."
+          checked={auto.enabled}
+          locked={auto.locked}
+          onSave={(on) => save.mutateAsync({ auto: on })}
+        />
+      </SettingSection>
       {auto.enabled && (
         <div className="flex flex-wrap items-center justify-between gap-2 px-3">
           <label htmlFor="auto-idle" className="text-sm">

package/components/Updates/UpdatesSection.tsx

@@ -3,7 +3,8 @@
 import { toast } from "sonner";
 import { Loader2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { SettingToggle } from "@/components/Settings/SettingToggle";
+import { SwitchSetting } from "@/components/Settings/settings-fields";
+import { SettingSection } from "@/components/Settings/SettingRow";
 import { useSetTipsOff, useTips } from "@/data/tips";
 import {
   useCheckForUpdates,
@@ -141,16 +142,17 @@ export function UpdatesSection() {
 
       {view.auto && <AutoUpdates auto={view.auto} />}
 
-      <SettingToggle
-        title="Show update banner"
-        detail="Tell everyone using this AgentOS when a newer version is out, and when it updated itself."
-        checked={view.bannerEnabled}
-        locked={view.bannerLocked}
-        onChange={(on) =>
-          banner.mutate(on, { onError: (e) => toast.error(e.message) })
-        }
-      />
-      <TipsToggle />
+      <SettingSection>
+        <SwitchSetting
+          id="update-banner"
+          label="Show update banner"
+          help="Tell everyone using this AgentOS when a newer version is out, and when it updated itself."
+          checked={view.bannerEnabled}
+          locked={view.bannerLocked}
+          onSave={(on) => banner.mutateAsync(on)}
+        />
+        <TipsToggle />
+      </SettingSection>
     </div>
   );
 }
@@ -159,13 +161,12 @@ function TipsToggle() {
   const { data } = useTips();
   const setOff = useSetTipsOff();
   return (
-    <SettingToggle
-      title="Show Tip of the Day"
-      detail="A short tip about something AgentOS can do, behind the lightbulb in the sidebar. It never opens on its own."
+    <SwitchSetting
+      id="tips"
+      label="Show Tip of the Day"
+      help="A short tip about something AgentOS can do, behind the lightbulb in the sidebar. It never opens on its own."
       checked={!!data && !data.off}
-      onChange={(on) =>
-        setOff.mutate(!on, { onError: (e) => toast.error(e.message) })
-      }
+      onSave={(on) => setOff.mutateAsync(!on)}
     />
   );
 }

package/components/Workspaces/HqFolderForm.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { SettingSection } from "@/components/Settings/SettingRow";
+import { SettingBlock } from "@/components/Settings/SettingRow";
 import { TextSetting } from "@/components/Settings/settings-fields";
 import { useSetWorkspaceHq, useWorkspaceHqQuery } from "@/data/session-logs";
 
@@ -13,26 +13,28 @@ export function HqFolderForm({ workspaceId }: { workspaceId: string }) {
   const save = useSetWorkspaceHq(workspaceId);
 
   if (isPending)
-    return <div className="bg-muted/60 h-11 animate-pulse rounded-md" />;
+    return <div className="bg-muted/60 m-3 h-11 animate-pulse rounded-md" />;
   if (isError)
-    return <p className="text-destructive text-xs">{error.message}</p>;
+    return (
+      <SettingBlock id={`hq-folder-${workspaceId}`} label="HQ folder">
+        <p className="text-destructive text-xs">{error.message}</p>
+      </SettingBlock>
+    );
 
   return (
-    <SettingSection>
-      <TextSetting
-        id={`hq-folder-${workspaceId}`}
-        label="HQ folder"
-        help={`Session logs go to docs/sessions/<project>/ in this repo, one commit per file. ${
-          data.hq?.visibility === "private"
-            ? "The repo is private, so each commit is pushed."
-            : data.hq
-              ? "Commits stay local: the repo isn't a private GitHub repository."
-              : "It must be a private git repo outside the workspace's projects."
-        }`}
-        placeholder="~/path/to/a/private/git/repo"
-        value={data.hq?.folder ?? ""}
-        onSave={(folder) => save.mutateAsync(folder)}
-      />
-    </SettingSection>
+    <TextSetting
+      id={`hq-folder-${workspaceId}`}
+      label="HQ folder"
+      help={`Session logs go to docs/sessions/<project>/ in this repo, one commit per file. ${
+        data.hq?.visibility === "private"
+          ? "The repo is private, so each commit is pushed."
+          : data.hq
+            ? "Commits stay local: the repo isn't a private GitHub repository."
+            : "It must be a private git repo outside the workspace's projects."
+      }`}
+      placeholder="~/path/to/a/private/git/repo"
+      value={data.hq?.folder ?? ""}
+      onSave={(folder) => save.mutateAsync(folder)}
+    />
   );
 }

package/components/Workspaces/McpServersForm.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { SettingSection } from "@/components/Settings/SettingRow";
+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";
@@ -21,35 +21,27 @@ export function McpServersForm({ workspace }: { workspace: Workspace }) {
     });
 
   return (
-    <div className="space-y-2">
-      <div>
-        <p className="text-sm font-semibold">
-          MCP servers its orchestrator may use
-        </p>
-        <p className="text-muted-foreground text-xs">
-          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>
+    <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>
       ) : (
-        <SettingSection>
-          {names.map((name) => (
-            <SwitchSetting
-              key={name}
-              id={`mcp-${workspace.id}-${name}`}
-              label={name}
-              checked={allowed.includes(name)}
-              defaultValue={false}
-              onSave={(on) => toggle(name, on)}
-            />
-          ))}
-        </SettingSection>
+        names.map((name) => (
+          <SwitchSetting
+            key={name}
+            id={`mcp-${workspace.id}-${name}`}
+            label={name}
+            checked={allowed.includes(name)}
+            onSave={(on) => toggle(name, on)}
+          />
+        ))
       )}
-    </div>
+    </SettingSection>
   );
 }

package/components/Workspaces/ProjectTiersForm.tsx

@@ -1,9 +1,17 @@
 "use client";
 
+import { PickerSetting } from "@/components/Settings/PickerSetting";
 import { SettingSection } from "@/components/Settings/SettingRow";
-import { SwitchSetting } from "@/components/Settings/settings-fields";
+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 }) {
@@ -14,20 +22,25 @@ export function ProjectTiersForm({ workspaceId }: { workspaceId: string }) {
   );
   if (!mine.length) return null;
   return (
-    <SettingSection>
+    <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) => (
-        <SwitchSetting
+        <PickerSetting<Tier>
           key={p.id}
           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"}
-          onSave={(on) =>
-            update.mutateAsync({
-              projectId: p.id,
-              tier: on ? "production" : "fast",
-            })
-          }
+          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}
+            />
+          )}
         />
       ))}
     </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

@@ -49,9 +49,9 @@ afterEach(async () => {
   host.remove();
 });
 
-const type = async (input: HTMLInputElement, text: string) => {
+const type = async (input: HTMLTextAreaElement, text: string) => {
   const set = Object.getOwnPropertyDescriptor(
-    HTMLInputElement.prototype,
+    window.HTMLTextAreaElement.prototype,
     "value"
   )!.set!;
   await act(async () => {
@@ -59,13 +59,14 @@ const type = async (input: HTMLInputElement, text: string) => {
     input.dispatchEvent(new Event("input", { bubbles: true }));
   });
 };
-const rule = () => host.querySelector<HTMLInputElement>("#rule-4")!;
+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 () => {
@@ -74,54 +75,80 @@ describe("RulesForm", () => {
     );
   });
 
+  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 type(rule(), "Never merge #13");
+    await edit();
+    await type(editor("#rule-4"), "Never merge #13");
     await act(async () => {
-      rule().dispatchEvent(new FocusEvent("focusout", { bubbles: true }));
+      editor("#rule-4").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");
+  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.textContent).toContain("Saved");
+    expect(host.querySelector("textarea")).toBeNull();
   });
 
-  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("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("rolls back and toasts when the passkey is cancelled", async () => {
+  it("keeps the editor open and toasts when the passkey is cancelled", async () => {
     state.update.mockRejectedValue(new Error("Passkey cancelled"));
-    await type(rule(), "Never merge #13");
+    await edit();
+    await type(editor("#rule-4"), "Never merge #13");
     await click(button("Save"));
-    expect(rule().value).toBe("Never merge #12");
+    expect(editor("#rule-4").value).toBe("Never merge #13");
     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"));
+  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();
   });
 });