@saadnvd1/agent-os 0.3.839 → 0.3.848

package/components/Schedules/SchedulesPanel.tsx

@@ -12,6 +12,7 @@ import {
   Trash2,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { ListSection } from "@/components/Settings/ListSection";
 import { Switch } from "@/components/ui/switch";
 import { useWorkspacesQuery } from "@/data/workspaces";
 import { useNotifySettings } from "@/data/notify";
@@ -93,7 +94,7 @@ function ScheduleRow({ s, onOpen }: { s: ScheduleView; onOpen: () => void }) {
         (e.key === "Enter" || e.key === " ") &&
         onOpen()
       }
-      className="border-border/60 hover:bg-foreground/[0.03] focus-visible:ring-ring flex min-h-14 cursor-pointer items-center gap-3 rounded-xl border px-3 py-2.5 outline-none focus-visible:ring-2"
+      className="hover:bg-foreground/[0.03] focus-visible:ring-ring flex min-h-14 cursor-pointer items-center gap-3 px-3 py-2.5 outline-none focus-visible:ring-2 focus-visible:ring-inset"
     >
       <div className="min-w-0 flex-1 space-y-0.5">
         <div className="flex min-w-0 items-center gap-2">
@@ -114,7 +115,9 @@ function ScheduleRow({ s, onOpen }: { s: ScheduleView; onOpen: () => void }) {
           {s.oneOff && ` · by ${s.createdBy.name}`}
         </p>
       </div>
-      {s.lastRun && <OutcomeChip run={s.lastRun} />}
+      {s.lastRun && !s.done_at && s.lastRun.outcome !== "started" && (
+        <OutcomeChip run={s.lastRun} />
+      )}
       {!s.done_at && <EnableSwitch s={s} />}
     </div>
   );
@@ -131,14 +134,13 @@ function Group({
 }) {
   if (rows.length === 0) return null;
   return (
-    <section className="space-y-2">
-      <h4 className="text-muted-foreground px-1 text-xs font-medium">
-        {title} · {rows.length}
-      </h4>
-      {rows.map((s) => (
-        <ScheduleRow key={s.id} s={s} onOpen={() => onOpen(s.id)} />
-      ))}
-    </section>
+    <ListSection
+      title={title}
+      items={rows}
+      keyOf={(s) => s.id}
+      render={(s) => <ScheduleRow s={s} onOpen={() => onOpen(s.id)} />}
+      empty=""
+    />
   );
 }
 

package/components/SessionList/GroupShelves.tsx

@@ -17,6 +17,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { cn } from "@/lib/utils";
+import { keepRenameFocus, useRenameInput } from "./RowParts";
 import { SessionRow } from "./SessionRow";
 import { useDropZone } from "./useGroupDrag";
 
@@ -48,18 +49,18 @@ function GroupHeader({
       update.mutate({ id: group.id, name: next });
     else setName(group.name);
   };
+  const renameInput = useRenameInput(() => commit());
 
   if (renaming)
     return (
       <div className="px-2.5 pt-3.5 pb-1.5">
         <Input
-          autoFocus
+          {...renameInput}
           value={name}
           maxLength={60}
           aria-label="Group name"
           className="h-11 md:h-8"
           onChange={(e) => setName(e.target.value)}
-          onBlur={commit}
           onKeyDown={(e) => {
             if (e.key === "Enter") commit();
             if (e.key === "Escape") {
@@ -112,7 +113,11 @@ function GroupHeader({
             <MoreHorizontal className="h-4 w-4" />
           </button>
         </DropdownMenuTrigger>
-        <DropdownMenuContent align="end" className="w-44">
+        <DropdownMenuContent
+          align="end"
+          className="w-44"
+          onCloseAutoFocus={keepRenameFocus}
+        >
           <DropdownMenuItem
             className="min-h-11 md:min-h-8"
             onSelect={() => setRenaming(true)}

package/components/SessionList/OrchestratorPinRow.tsx

@@ -160,7 +160,7 @@ export const OrchestratorPinRow = memo(function OrchestratorPinRow({
         <DM.DropdownMenuContent
           align="end"
           className={ROW_MENU_CONTENT}
-          onCloseAutoFocus={keepRenameFocus(renaming)}
+          onCloseAutoFocus={keepRenameFocus}
           onClick={(e) => e.stopPropagation()}
         >
           {menu("dropdown")}
@@ -175,7 +175,7 @@ export const OrchestratorPinRow = memo(function OrchestratorPinRow({
         <CM.ContextMenuTrigger asChild>{content}</CM.ContextMenuTrigger>
         <CM.ContextMenuContent
           className={ROW_MENU_CONTENT}
-          onCloseAutoFocus={keepRenameFocus(renaming)}
+          onCloseAutoFocus={keepRenameFocus}
         >
           {menu("context")}
         </CM.ContextMenuContent>

package/components/SessionList/RowParts.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Lightbulb } from "lucide-react";
-import { useEffect, useRef, useState, type ReactNode } from "react";
+import { useCallback, useRef, useState, type ReactNode } from "react";
 import type { SidebarRow } from "@/lib/sidebar/shelves";
 import { cn } from "@/lib/utils";
 
@@ -61,12 +61,44 @@ export function CardBadge({ count }: { count: number }) {
   );
 }
 
-// For a menu's onCloseAutoFocus: while a rename is open, the input keeps the
-// focus instead of the menu's trigger getting it back.
-export const keepRenameFocus = (renaming: boolean) => (e: Event) => {
-  if (renaming) e.preventDefault();
+const RENAME_INPUT = "input[data-rename-input]";
+
+function focusRename(el: HTMLInputElement) {
+  el.focus();
+  el.select();
+}
+
+// For a menu's onCloseAutoFocus: while a rename input is open it takes the
+// focus the menu would hand back to its trigger. Reads the DOM, not state, so
+// it can't see a render that hasn't landed yet.
+export const keepRenameFocus = (e: Event) => {
+  const el = document.querySelector<HTMLInputElement>(RENAME_INPUT);
+  if (!el) return;
+  e.preventDefault();
+  focusRename(el);
 };
 
+// Props for a rename input that was opened from a menu. While the menu is
+// still on screen it traps focus, so the input waits for keepRenameFocus; a
+// blur before the input has held focus once is never a commit.
+export function useRenameInput(onDone: () => void) {
+  const hadFocus = useRef(false);
+  const ref = useCallback((el: HTMLInputElement | null) => {
+    hadFocus.current = false;
+    if (el && !document.querySelector('[role="menu"]')) focusRename(el);
+  }, []);
+  return {
+    ref,
+    "data-rename-input": "",
+    onFocus: () => {
+      hadFocus.current = true;
+    },
+    onBlur: () => {
+      if (hadFocus.current) onDone();
+    },
+  };
+}
+
 export function RowRename({
   initial,
   onDone,
@@ -75,41 +107,13 @@ export function RowRename({
   onDone: (name: string | null) => void;
 }) {
   const [value, setValue] = useState(initial);
-  const ref = useRef<HTMLInputElement>(null);
-  const hadFocus = useRef(false);
-  // The menu closing hands focus back to its trigger (RowShell stops that
-  // while renaming); keep taking it until we hold it, then leave it alone.
-  useEffect(() => {
-    const take = () => {
-      const el = ref.current;
-      if (!el || hadFocus.current) return;
-      el.focus();
-      if (document.activeElement === el) {
-        hadFocus.current = true;
-        el.select();
-      }
-    };
-    take();
-    const t = setInterval(take, 50);
-    const stop = setTimeout(() => clearInterval(t), 1000);
-    return () => {
-      clearInterval(t);
-      clearTimeout(stop);
-    };
-  }, []);
+  const input = useRenameInput(() => onDone(value.trim() || null));
   return (
     <input
-      ref={ref}
+      {...input}
       value={value}
       aria-label="Session name"
       onChange={(e) => setValue(e.target.value)}
-      onFocus={() => {
-        hadFocus.current = true;
-      }}
-      onBlur={() => {
-        // Only once we've held focus: the menu closing hands it to its trigger.
-        if (hadFocus.current) onDone(value.trim() || null);
-      }}
       onKeyDown={(e) => {
         e.stopPropagation();
         if (e.key === "Enter") onDone(value.trim() || null);

package/components/SessionList/RowRename.test.ts

@@ -2,12 +2,16 @@ import "@/components/Chat/composer/test-dom";
 import { act, createElement, useState } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { keepRenameFocus, RowRename } from "./RowParts";
+import * as DM from "@/components/ui/dropdown-menu";
+import { keepRenameFocus, RowRename, useRenameInput } from "./RowParts";
 
 (
   globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
 ).IS_REACT_ACT_ENVIRONMENT = true;
 
+// Radix dispatches CustomEvents; node's own class is rejected by jsdom.
+(globalThis as { CustomEvent?: unknown }).CustomEvent = window.CustomEvent;
+
 let root: Root;
 let host: HTMLElement;
 const input = () => host.querySelector("input")!;
@@ -28,23 +32,87 @@ function mount(onDone: (n: string | null) => void, initial = "old") {
   act(() => root.render(createElement(RowRename, { initial, onDone })));
 }
 
+// A row whose menu has a Rename item, wired like RowShell / GroupShelves.
+function Row({ group = false }: { group?: boolean }) {
+  const [renaming, setRenaming] = useState(false);
+  const [name, setName] = useState("old");
+  const rename = useRenameInput(() => setRenaming(false));
+  const menu = createElement(
+    DM.DropdownMenu,
+    { defaultOpen: true },
+    createElement(
+      DM.DropdownMenuTrigger,
+      { asChild: true },
+      createElement("button", { "aria-label": "menu" })
+    ),
+    createElement(
+      DM.DropdownMenuContent,
+      { onCloseAutoFocus: keepRenameFocus },
+      createElement(
+        DM.DropdownMenuItem,
+        { onSelect: () => setRenaming(true) },
+        "Rename"
+      )
+    )
+  );
+  return createElement(
+    "div",
+    null,
+    menu,
+    renaming
+      ? group
+        ? createElement("input", {
+            ...rename,
+            value: name,
+            onChange: (e: { target: { value: string } }) =>
+              setName(e.target.value),
+          })
+        : createElement(RowRename, {
+            initial: name,
+            onDone: () => setRenaming(false),
+          })
+      : null
+  );
+}
+
+describe.each([
+  ["session row", false],
+  ["group header", true],
+])("rename from the menu on a fresh mount (%s)", (_n, group) => {
+  it("keeps the input open, focused, and accepting typing", async () => {
+    vi.useRealTimers();
+    act(() => root.render(createElement(Row, { group })));
+    const item = [...document.querySelectorAll('[role="menuitem"]')].find(
+      (el) => el.textContent === "Rename"
+    ) as HTMLElement;
+    expect(item).toBeTruthy();
+    await act(async () => {
+      item.click();
+      await new Promise((r) => setTimeout(r, 100));
+    });
+    const el = input();
+    expect(el).toBeTruthy();
+    expect(document.activeElement).toBe(el);
+    const set = Object.getOwnPropertyDescriptor(
+      window.HTMLInputElement.prototype,
+      "value"
+    )!.set!;
+    act(() => {
+      set.call(el, "typed");
+      el.dispatchEvent(new window.Event("input", { bubbles: true }));
+    });
+    expect(input()).toBe(el);
+    expect(input().value).toBe("typed");
+  });
+});
+
 describe("RowRename", () => {
-  it("retries focus the menu stole, and ignores blur until it has it", () => {
-    const real = window.HTMLElement.prototype.focus;
-    let calls = 0;
-    // The first focus attempts land while the menu still traps focus.
-    vi.spyOn(window.HTMLElement.prototype, "focus").mockImplementation(
-      function (this: HTMLElement) {
-        if (++calls > 2) real.call(this);
-      }
-    );
+  it("ignores a blur that comes before it was ever focused", () => {
     const done = vi.fn();
     mount(done);
+    // an open menu keeps the input from taking focus on mount
     act(() => input().dispatchEvent(new window.FocusEvent("blur")));
     expect(done).not.toHaveBeenCalled();
-    act(() => vi.advanceTimersByTime(150));
-    expect(document.activeElement).toBe(input());
-    vi.restoreAllMocks();
   });
 
   it("keeps typed text across a parent re-render (list refresh)", () => {
@@ -75,7 +143,6 @@ describe("RowRename", () => {
   it("saves on Enter, cancels on Escape, saves on blur once focused", () => {
     const done = vi.fn();
     mount(done);
-    act(() => vi.advanceTimersByTime(60));
     const key = (k: string) =>
       act(() => {
         input().dispatchEvent(
@@ -92,11 +159,13 @@ describe("RowRename", () => {
 });
 
 describe("keepRenameFocus", () => {
-  it("stops the menu returning focus only while renaming", () => {
+  it("takes the focus the menu would return, only while a rename input is open", () => {
     const e = { preventDefault: vi.fn() } as unknown as Event;
-    keepRenameFocus(false)(e);
+    keepRenameFocus(e);
     expect(e.preventDefault).not.toHaveBeenCalled();
-    keepRenameFocus(true)(e);
+    mount(() => {});
+    keepRenameFocus(e);
     expect(e.preventDefault).toHaveBeenCalled();
+    expect(document.activeElement).toBe(input());
   });
 });

package/components/SessionList/RowShell.tsx

@@ -42,7 +42,6 @@ export function RowShell({
   menu,
   menuLabel,
   menuButton = true,
-  renaming = false,
 }: {
   title: string;
   tipKey?: string;
@@ -62,8 +61,6 @@ export function RowShell({
   menuLabel: string;
   // False keeps the right-click menu but hides the ⋯ (while selecting).
   menuButton?: boolean;
-  // A rename input is open: closing the menu mustn't move focus off it.
-  renaming?: boolean;
 }) {
   const content = (
     <div
@@ -118,7 +115,7 @@ export function RowShell({
           <DM.DropdownMenuContent
             align="end"
             className={ROW_MENU_CONTENT}
-            onCloseAutoFocus={keepRenameFocus(renaming)}
+            onCloseAutoFocus={keepRenameFocus}
             onClick={(e) => e.stopPropagation()}
           >
             {menu("dropdown")}
@@ -133,7 +130,7 @@ export function RowShell({
       <CM.ContextMenuTrigger asChild>{content}</CM.ContextMenuTrigger>
       <CM.ContextMenuContent
         className={ROW_MENU_CONTENT}
-        onCloseAutoFocus={keepRenameFocus(renaming)}
+        onCloseAutoFocus={keepRenameFocus}
       >
         {menu("context")}
       </CM.ContextMenuContent>

package/components/SessionList/SessionRow.tsx

@@ -127,7 +127,6 @@ export const SessionRow = memo(function SessionRow({
         menu={menu}
         menuLabel="Session actions"
         menuButton={!selecting}
-        renaming={renaming}
       >
         {renaming ? (
           <RowRename

package/components/Settings/AppWideLimits.tsx

@@ -19,8 +19,8 @@ export function AppWideLimits() {
   const updateAway = useUpdateAwaySettings();
   return (
     <SettingSection
-      title="All workspaces"
-      help="Stall alerts and Away mode apply across every workspace."
+      title="Alerts and Away"
+      help="Apply across every workspace."
     >
       {stall.data && (
         <NumberSetting

package/components/Settings/{NoApprovalsSection.test.ts → ApprovalsSection.test.ts}

@@ -25,6 +25,14 @@ const state = vi.hoisted(() => ({
   audit: [] as object[],
   mutate: vi.fn(),
 }));
+vi.mock("@/components/Merge/MergeApprovalToggle", () => ({
+  MergeApprovalToggle: ({ overriddenBy }: { overriddenBy?: boolean }) =>
+    createElement(
+      "p",
+      { "data-merge": String(!!overriddenBy) },
+      "merge toggle"
+    ),
+}));
 vi.mock("@/data/approvals", () => ({
   useApprovalsModeQuery: () => ({
     isPending: false,
@@ -32,14 +40,14 @@ vi.mock("@/data/approvals", () => ({
     data: { on: state.on, audit: state.audit },
   }),
   useSetApprovalsMode: () => ({
-    mutate: state.mutate,
+    mutateAsync: state.mutate,
     isPending: false,
     error: null,
   }),
 }));
 
 const { TooltipProvider } = await import("@/components/ui/tooltip");
-const { NoApprovalsSection } = await import("./NoApprovalsSection");
+const { ApprovalsSection } = await import("./ApprovalsSection");
 const { NoApprovalsBadge } =
   await import("@/components/Approvals/NoApprovalsBadge");
 
@@ -61,7 +69,7 @@ afterEach(() => {
 const render = (el: ReturnType<typeof createElement>) =>
   act(() => root.render(el));
 const click = (el: Element | null) =>
-  act(() => {
+  act(async () => {
     el?.dispatchEvent(new window.MouseEvent("click", { bubbles: true }));
   });
 const byText = (text: string) =>
@@ -69,45 +77,76 @@ const byText = (text: string) =>
     b.textContent?.includes(text)
   ) ?? null;
 
-describe("the No approvals toggle", () => {
-  it("is off, and flipping it warns first without switching anything", () => {
-    render(createElement(NoApprovalsSection));
+describe("the Approvals section", () => {
+  beforeEach(() => {
+    state.mutate.mockResolvedValue(undefined);
+  });
+
+  it("is off, and flipping it warns first without switching anything", async () => {
+    render(createElement(ApprovalsSection));
     const toggle = host.querySelector('[role="switch"]');
     expect(toggle?.getAttribute("aria-checked")).toBe("false");
     expect(host.querySelector('[role="alertdialog"]')).toBeNull();
-    click(toggle!);
+    await click(toggle!);
     const warning = host.querySelector('[role="alertdialog"]');
     expect(warning?.textContent).toMatch(/hard lines included/);
     expect(warning?.textContent).toMatch(/permission prompts off/);
     expect(state.mutate).not.toHaveBeenCalled();
   });
 
-  it("switches on only when the warning is confirmed, and cancel backs out", () => {
-    render(createElement(NoApprovalsSection));
-    click(host.querySelector('[role="switch"]'));
-    click(byText("Cancel"));
+  it("switches on only when the warning is confirmed, and cancel backs out", async () => {
+    render(createElement(ApprovalsSection));
+    await click(host.querySelector('[role="switch"]'));
+    await click(byText("Cancel"));
     expect(host.querySelector('[role="alertdialog"]')).toBeNull();
     expect(state.mutate).not.toHaveBeenCalled();
-    click(host.querySelector('[role="switch"]'));
-    click(byText("Turn on No approvals"));
-    expect(state.mutate).toHaveBeenCalledWith(true, expect.any(Object));
+    await click(host.querySelector('[role="switch"]'));
+    await click(byText("Turn on No approvals"));
+    expect(state.mutate).toHaveBeenCalledWith(true);
+  });
+
+  it("switches off at once", async () => {
+    state.on = true;
+    render(createElement(ApprovalsSection));
+    await click(host.querySelector('[role="switch"]'));
+    expect(state.mutate).toHaveBeenCalledWith(false);
   });
 
-  it("switches off at once, and lists what was approved for you", () => {
+  it("holds the merge approval switch in the same place, greyed while the mode is on", () => {
+    render(createElement(ApprovalsSection));
+    expect(host.querySelector("[data-merge]")?.getAttribute("data-merge")).toBe(
+      "false"
+    );
+    state.on = true;
+    act(() => root.unmount());
+    root = createRoot(host);
+    render(createElement(ApprovalsSection));
+    expect(host.querySelector("[data-merge]")?.getAttribute("data-merge")).toBe(
+      "true"
+    );
+  });
+
+  it("lists what was approved in words, with a command behind Details", async () => {
     state.on = true;
     state.audit = [
       {
         id: 1,
         at: "2026-10-13 10:00:00",
-        source: "ask",
-        subject: 'money ask "Pay?"',
-        detail: "",
+        where: "A chat",
+        summary: "Ran a command",
+        details: "ssh root@host 'ls /tmp'",
       },
     ];
-    render(createElement(NoApprovalsSection));
-    expect(host.textContent).toContain('money ask "Pay?"');
-    click(host.querySelector('[role="switch"]'));
-    expect(state.mutate).toHaveBeenCalledWith(false);
+    render(createElement(ApprovalsSection));
+    expect(host.textContent).toContain("Ran a command");
+    expect(host.textContent).not.toContain("ssh root@host");
+    await click(byText("Details"));
+    expect(host.textContent).toContain("ssh root@host 'ls /tmp'");
+  });
+
+  it("says so when nothing was approved", () => {
+    render(createElement(ApprovalsSection));
+    expect(host.textContent).toContain("Nothing yet.");
   });
 });
 

package/components/Settings/ApprovalsSection.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { useState } from "react";
+import { ListSection } from "@/components/Settings/ListSection";
+import { SettingSection } from "@/components/Settings/SettingRow";
+import { SwitchSetting } from "@/components/Settings/settings-fields";
+import { MergeApprovalToggle } from "@/components/Merge/MergeApprovalToggle";
+import { useApprovalsModeQuery, useSetApprovalsMode } from "@/data/approvals";
+import type { ApprovalLine } from "@/lib/approvals/describe";
+
+// What it switches off, said plainly before it can be switched on.
+export const NO_APPROVALS_WARNING = [
+  "Every ask is approved the moment it is raised, hard lines included: public posts and messages, money, irreversible or destructive changes, credentials.",
+  "A PR stuck failing its gates, with no CI, or too big to review still merges.",
+  "Brakes stop holding new starts. Plan-only tasks still wait for approve_plan.",
+  "Every agent AgentOS starts runs with its permission prompts off, and prompts already waiting are allowed.",
+  "Terminals already running in an agent other than Claude keep asking until they are restarted. Each approval made for you is logged here.",
+];
+
+const when = (at: string) =>
+  new Date(`${at.replace(" ", "T")}Z`).toLocaleString(undefined, {
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+  });
+
+function Line({ line }: { line: ApprovalLine }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <div className="px-3 py-2.5 text-sm">
+      <p className="break-words">{line.summary}</p>
+      <p className="text-muted-foreground text-xs">
+        {line.where} · {when(line.at)}
+        {line.details && (
+          <>
+            {" · "}
+            <button
+              type="button"
+              aria-expanded={open}
+              onClick={() => setOpen(!open)}
+              className="text-primary -my-3 min-h-11 hover:underline"
+            >
+              {open ? "Hide details" : "Details"}
+            </button>
+          </>
+        )}
+      </p>
+      {open && line.details && (
+        <code className="bg-foreground/[0.05] mt-1 block rounded px-2 py-1 font-mono text-xs break-all whitespace-pre-wrap">
+          {line.details}
+        </code>
+      )}
+    </div>
+  );
+}
+
+// Every approval AgentOS would wait on, in one place: the master switch, the
+// merge gate, and what the switch approved for you.
+export function ApprovalsSection() {
+  const { data, isPending, isError, error } = useApprovalsModeQuery();
+  const set = useSetApprovalsMode();
+
+  if (isPending)
+    return <div className="bg-muted/40 h-16 animate-pulse rounded-lg" />;
+  if (isError)
+    return <p className="text-destructive text-sm">{error.message}</p>;
+
+  return (
+    <div className="space-y-5">
+      <SettingSection>
+        <SwitchSetting
+          id="no-approvals"
+          label="No approvals"
+          help="Shuts off every approval AgentOS would otherwise wait on, and every agent's permission prompts."
+          checked={data.on}
+          defaultValue={false}
+          confirm={NO_APPROVALS_WARNING.join(" ")}
+          confirmLabel="Turn on No approvals"
+          onSave={(on) => set.mutateAsync(on)}
+        />
+        <MergeApprovalToggle overriddenBy={data.on} />
+      </SettingSection>
+      <ListSection
+        title="Approved for you"
+        items={data.audit}
+        keyOf={(l) => String(l.id)}
+        render={(l) => <Line line={l} />}
+        empty="Nothing yet."
+      />
+    </div>
+  );
+}