@saadnvd1/agent-os 0.3.839 → 0.3.848

package/components/Workspaces/RulesForm.tsx

@@ -1,10 +1,16 @@
 "use client";
 
-import { Trash2 } 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 { SettingSection } from "@/components/Settings/SettingRow";
-import { TextSetting } from "@/components/Settings/settings-fields";
+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,83 +18,148 @@ 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 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.
+// 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 [adding, setAdding] = useState(false);
+  const query = useContext(SettingsQueryContext);
 
   return (
-    <div className="space-y-2">
-      <p className="text-sm font-semibold">Orchestrator rules</p>
+    <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>
+        <p className="text-destructive px-3 py-2 text-sm">{error.message}</p>
       ) : (
-        <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.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} />
           ))}
-          <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>
+          {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>
+          )}
+        </>
       )}
-    </div>
+    </SettingSection>
   );
 }
 
 function RuleItem({ rule }: { rule: RuleRow }) {
   const update = useUpdateRule(rule.workspace_id);
   const remove = useRemoveRule(rule.workspace_id);
+  const [editing, setEditing] = useState(false);
+  const query = useContext(SettingsQueryContext);
+  if (!matchesQuery(query, rule.text)) return null;
+
   return (
-    <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>
-      }
-    />
+    <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);
+          }}
+          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
+            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>
+        </div>
+      )}
+    </div>
   );
 }

package/components/Workspaces/WorkspaceModeForm.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { SettingBlock } from "@/components/Settings/SettingRow";
 import { ModeChooser } from "@/components/Report/ModeChooser";
 import { useSetWorkspaceMode, useWorkspaceMode } from "@/data/reports";
 
@@ -9,14 +10,13 @@ export function WorkspaceModeForm({ workspaceId }: { workspaceId: string }) {
   const set = useSetWorkspaceMode(workspaceId);
   if (!mode) return null;
   return (
-    <div className="space-y-1.5">
-      <h4 className="text-sm font-medium">Operating mode</h4>
+    <SettingBlock id={`mode-${workspaceId}`} label="Operating mode">
       <ModeChooser
         mode={mode}
         onChange={(m) => set.mutate(m)}
         disabled={set.isPending}
         note="New tasks start in this mode; any task can change its own."
       />
-    </div>
+    </SettingBlock>
   );
 }

package/components/Workspaces/WorkspaceModelsForm.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import { PickerSetting } from "@/components/Settings/PickerSetting";
-import { SettingSection } from "@/components/Settings/SettingRow";
+import { SettingBlock } from "@/components/Settings/SettingRow";
 import { ModelSelect } from "@/components/Models/ModelSelect";
 import {
   useModelsQuery,
@@ -28,45 +28,44 @@ export function WorkspaceModelsForm({ workspaceId }: { workspaceId: string }) {
   const set = Object.keys(roles).length;
 
   return (
-    <div className="space-y-2">
-      <button
-        type="button"
-        className="text-muted-foreground hover:text-foreground h-11 text-left text-xs md:h-auto"
-        onClick={() => setOpen((o) => !o)}
-        aria-expanded={open}
-      >
-        Models: {set ? `${set} set for this workspace` : "as Settings › Models"}{" "}
-        {open ? "▴" : "▾"}
-      </button>
-      {open && (
-        <SettingSection>
-          {WORKSPACE_ROLES.map((role) => (
-            <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}
-                />
-              )}
-            />
-          ))}
-        </SettingSection>
-      )}
-    </div>
+    <>
+      <SettingBlock id={`models-${workspaceId}`} label="Models">
+        <button
+          type="button"
+          className="text-muted-foreground hover:text-foreground flex min-h-11 w-full items-center text-left text-xs md:min-h-0"
+          onClick={() => setOpen((o) => !o)}
+          aria-expanded={open}
+        >
+          {set ? `${set} set for this workspace` : "As Settings › Models"}{" "}
+          {open ? "▴" : "▾"}
+        </button>
+      </SettingBlock>
+      {open &&
+        WORKSPACE_ROLES.map((role) => (
+          <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}
+              />
+            )}
+          />
+        ))}
+    </>
   );
 }

package/components/Workspaces/WorkspacePanel.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { useUpdateWorkspace } from "@/data/workspaces";
+import type { Workspace } from "@/lib/db";
+import {
+  NumberSetting,
+  SwitchSetting,
+} from "@/components/Settings/settings-fields";
+import { SettingSection } from "@/components/Settings/SettingRow";
+import { SETTING_DEFAULTS } from "@/lib/settings/defaults";
+import { HqFolderForm } from "./HqFolderForm";
+import { McpServersForm } from "./McpServersForm";
+import { ProjectTiersForm } from "./ProjectTiersForm";
+import { RulesForm } from "./RulesForm";
+import { WorkspaceModeForm } from "./WorkspaceModeForm";
+import { WorkspaceModelsForm } from "./WorkspaceModelsForm";
+
+// One workspace's settings, in titled groups.
+export function WorkspacePanel({ workspace: w }: { workspace: Workspace }) {
+  const update = useUpdateWorkspace();
+  return (
+    <div aria-label={`${w.name} settings`} role="group">
+      <SettingSection
+        title="Limits & mode"
+        help="Tasks over the limit wait in Queued and start by themselves, in order, when a running one finishes."
+      >
+        <NumberSetting
+          id={`task-limit-${w.id}`}
+          label="Tasks at a time"
+          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 }}
+        />
+        <WorkspaceModeForm workspaceId={w.id} />
+      </SettingSection>
+      <SettingSection
+        title="Orchestrator"
+        help="What this workspace's orchestrator may do, which models it runs on, and where its session logs go."
+      >
+        <SwitchSetting
+          id={`full-access-${w.id}`}
+          label="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 })}
+        />
+        <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 })}
+        />
+        <WorkspaceModelsForm workspaceId={w.id} />
+        <HqFolderForm workspaceId={w.id} />
+      </SettingSection>
+      <RulesForm workspaceId={w.id} />
+      <McpServersForm workspace={w} />
+      <ProjectTiersForm workspaceId={w.id} />
+    </div>
+  );
+}

package/components/Workspaces/WorkspacePicker.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import type { Workspace } from "@/lib/db";
+
+// Which workspace's settings the page shows.
+export function WorkspacePicker({
+  workspaces,
+  value,
+  onChange,
+}: {
+  workspaces: Workspace[];
+  value: string;
+  onChange: (id: string) => void;
+}) {
+  return (
+    <div className="mb-4 flex items-center gap-3">
+      <label htmlFor="settings-workspace" className="text-sm font-medium">
+        Workspace
+      </label>
+      <Select value={value} onValueChange={onChange}>
+        <SelectTrigger
+          id="settings-workspace"
+          className="h-11 min-w-0 flex-1 text-base sm:max-w-xs md:h-9 md:text-sm"
+        >
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {workspaces.map((w) => (
+            <SelectItem key={w.id} value={w.id}>
+              {w.name}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}

package/components/Workspaces/WorkspaceSettings.test.ts

@@ -0,0 +1,153 @@
+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 Object.getOwnPropertyNames(window))
+  if (
+    /^(HTML|SVG|Event|CustomEvent|FocusEvent|DocumentFragment|Node|Element|Mutation)/.test(
+      key
+    ) &&
+    !(key in globalThis)
+  )
+    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 ws = (id: string, name: string, limit: number | null) => ({
+  id,
+  name,
+  max_running_tasks: limit,
+  orch_full_access: false,
+  wake_tasks_on_pr: true,
+  orch_mcp_servers: [],
+});
+const state = vi.hoisted(() => ({
+  workspaces: [] as unknown[],
+  projects: [] as unknown[],
+  sidebar: null as unknown,
+  update: vi.fn(),
+}));
+vi.mock("sonner", () => ({ toast: { error: vi.fn() } }));
+vi.mock("@/data/workspaces", () => ({
+  useWorkspacesQuery: () => ({ isPending: false, data: state.workspaces }),
+  useUpdateWorkspace: () => ({ mutateAsync: state.update }),
+}));
+vi.mock("@/data/projects", () => ({
+  useProjectsQuery: () => ({ data: state.projects }),
+}));
+vi.mock("@/hooks/useSelectedWorkspace", () => ({
+  useSelectedWorkspace: () => ({ workspace: state.sidebar }),
+}));
+vi.mock("@/components/Settings/AppWideLimits", () => ({
+  AppWideLimits: () => null,
+}));
+for (const name of [
+  "RulesForm",
+  "McpServersForm",
+  "HqFolderForm",
+  "ProjectTiersForm",
+  "WorkspaceModeForm",
+  "WorkspaceModelsForm",
+])
+  vi.doMock(`./${name}`, () => ({
+    [name]: () => null,
+  }));
+
+const { WorkspaceSettings } = await import("./WorkspaceSettings");
+const { SettingsQueryContext } =
+  await import("@/components/Settings/SettingRow");
+
+let root: Root;
+let host: HTMLDivElement;
+beforeEach(() => {
+  localStorage.clear();
+  state.update.mockReset().mockResolvedValue(undefined);
+  state.workspaces = [ws("w1", "Alpha", null), ws("w2", "Beta", 2)];
+  state.projects = [
+    { id: "p1", name: "beta-api", workspace_id: "w2", is_uncategorized: false },
+  ];
+  state.sidebar = null;
+  host = document.createElement("div");
+  document.body.appendChild(host);
+  root = createRoot(host);
+});
+afterEach(async () => {
+  await act(async () => root.unmount());
+  host.remove();
+});
+
+const render = (query = "") =>
+  act(async () =>
+    root.render(
+      createElement(
+        SettingsQueryContext.Provider,
+        { value: query },
+        createElement(WorkspaceSettings)
+      )
+    )
+  );
+const picker = () => host.querySelector<HTMLElement>("#settings-workspace")!;
+const titles = () => [...host.querySelectorAll("h3")].map((h) => h.textContent);
+const limit = () =>
+  host.querySelector<HTMLInputElement>("#task-limit-w1, #task-limit-w2")!;
+
+describe("WorkspaceSettings", () => {
+  it("shows one workspace at a time, in titled groups", async () => {
+    await render();
+    expect(host.querySelectorAll('[role="group"]')).toHaveLength(1);
+    expect(picker().textContent).toBe("Alpha");
+    expect(titles()).toEqual(
+      expect.arrayContaining(["Limits & mode", "Orchestrator"])
+    );
+    expect(host.textContent).not.toContain("Running task limit:");
+  });
+
+  it("preselects the sidebar's workspace", async () => {
+    state.sidebar = state.workspaces[1];
+    await render();
+    expect(picker().textContent).toBe("Beta");
+  });
+
+  it("remembers the choice", async () => {
+    localStorage.setItem("agentOS-settings-workspace", "w2");
+    await render();
+    expect(picker().textContent).toBe("Beta");
+  });
+
+  it("greys the number while the limit is off, keeping its value", async () => {
+    await render();
+    expect(limit().id).toBe("task-limit-w1");
+    expect(limit().disabled).toBe(true);
+    expect(limit().value).toBe("");
+    expect(limit().placeholder).toBe("Off");
+    expect(host.textContent).not.toContain("Reset");
+  });
+
+  it("enables the number when a limit is set, and offers Reset to off", async () => {
+    localStorage.setItem("agentOS-settings-workspace", "w2");
+    await render();
+    expect(limit().disabled).toBe(false);
+    expect(limit().value).toBe("2");
+    expect(
+      [...host.querySelectorAll("button")].some(
+        (b) => b.textContent === "Reset to off"
+      )
+    ).toBe(true);
+  });
+
+  it("a search matching only another workspace's project switches to it", async () => {
+    await render("beta-api");
+    expect(picker().textContent).toBe("Beta");
+  });
+
+  it("a search matching rows on every page stays on the current workspace", async () => {
+    await render("mcp");
+    expect(picker().textContent).toBe("Alpha");
+  });
+});