@saadnvd1/agent-os 0.3.845 → 0.3.848

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>
+  );
+}

package/components/Settings/ExperimentsSection.test.ts

@@ -25,11 +25,12 @@ const w = (calls: number) => ({
   costUsd: calls * 0.01,
   scripts: 0,
   shown: 0,
-  accepted: 1,
-  dismissed: 1,
-  acceptRate: 0.5,
+  accepted: calls ? 1 : 0,
+  dismissed: calls ? 1 : 0,
+  acceptRate: calls ? 0.5 : null,
 });
 const state = vi.hoisted(() => ({
+  zero: false,
   mutateAsync: vi.fn().mockResolvedValue({}),
 }));
 vi.mock("@/data/experiments", () => ({
@@ -47,7 +48,9 @@ vi.mock("@/data/experiments", () => ({
           status: "experimental",
           suggests: true,
           on: false,
-          usage: { today: w(1), d7: w(2), d30: w(3) },
+          usage: state.zero
+            ? { today: w(0), d7: w(0), d30: w(0) }
+            : { today: w(1), d7: w(2), d30: w(3) },
         },
       ],
     },
@@ -62,6 +65,7 @@ let root: Root;
 let host: HTMLDivElement;
 beforeEach(() => {
   state.mutateAsync.mockClear();
+  state.zero = false;
   host = document.createElement("div");
   document.body.appendChild(host);
   root = createRoot(host);
@@ -82,6 +86,18 @@ describe("ExperimentsSection", () => {
     ).toBe("false");
   });
 
+  it("doesn't tag every card Experimental", () => {
+    act(() => root.render(createElement(ExperimentsSection)));
+    expect(host.textContent).not.toContain("Experimental");
+  });
+
+  it("shows an empty state instead of a table of zeros", () => {
+    state.zero = true;
+    act(() => root.render(createElement(ExperimentsSection)));
+    expect(host.querySelector("table")).toBeNull();
+    expect(host.textContent).toContain("No usage yet");
+  });
+
   it("turns one on from its toggle", () => {
     act(() => root.render(createElement(ExperimentsSection)));
     act(() => {

package/components/Settings/ExperimentsSection.tsx

@@ -3,6 +3,7 @@
 import { useState } from "react";
 import { ArrowLeft } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { ScrollTable } from "@/components/Settings/ListSection";
 import { SettingSection } from "@/components/Settings/SettingRow";
 import { SwitchSetting } from "@/components/Settings/settings-fields";
 import { formatTokens } from "@/lib/chat/context";
@@ -23,41 +24,60 @@ const WINDOWS = [
   ["d30", "30 days"],
 ] as const;
 
+export const hasUsage = (e: ExperimentView) =>
+  WINDOWS.some(([key]) => {
+    const w = e.usage[key];
+    return (
+      w.calls > 0 ||
+      w.tokens > 0 ||
+      w.costUsd > 0 ||
+      w.accepted + w.dismissed > 0
+    );
+  });
+
 function Usage({ e }: { e: ExperimentView }) {
+  if (!hasUsage(e))
+    return (
+      <p className="text-muted-foreground py-1 text-xs">
+        No usage yet. It shows here once it has run.
+      </p>
+    );
   return (
-    <table className="w-full text-xs tabular-nums">
-      <thead className="text-muted-foreground">
-        <tr>
-          <th className="py-1 text-left font-normal" />
-          <th className="py-1 text-right font-normal">Calls</th>
-          <th className="py-1 text-right font-normal">Tokens</th>
-          <th className="py-1 text-right font-normal">Cost</th>
-          {e.suggests && (
-            <th className="py-1 text-right font-normal">Accepted</th>
-          )}
-        </tr>
-      </thead>
-      <tbody>
-        {WINDOWS.map(([key, label]) => {
-          const w = e.usage[key];
-          return (
-            <tr key={key} className="border-border border-t">
-              <td className="py-1">{label}</td>
-              <td className="py-1 text-right">{w.calls}</td>
-              <td className="py-1 text-right">{formatTokens(w.tokens)}</td>
-              <td className="py-1 text-right">{usd(w.costUsd)}</td>
-              {e.suggests && (
-                <td className="py-1 text-right">
-                  {pct(w.acceptRate)}
-                  {w.accepted + w.dismissed > 0 &&
-                    ` (${w.accepted}/${w.accepted + w.dismissed})`}
-                </td>
-              )}
-            </tr>
-          );
-        })}
-      </tbody>
-    </table>
+    <ScrollTable>
+      <table className="w-full text-xs tabular-nums">
+        <thead className="text-muted-foreground">
+          <tr>
+            <th className="py-1 text-left font-normal" />
+            <th className="py-1 text-right font-normal">Calls</th>
+            <th className="py-1 text-right font-normal">Tokens</th>
+            <th className="py-1 text-right font-normal">Cost</th>
+            {e.suggests && (
+              <th className="py-1 text-right font-normal">Accepted</th>
+            )}
+          </tr>
+        </thead>
+        <tbody>
+          {WINDOWS.map(([key, label]) => {
+            const w = e.usage[key];
+            return (
+              <tr key={key} className="border-border border-t">
+                <td className="py-1">{label}</td>
+                <td className="py-1 text-right">{w.calls}</td>
+                <td className="py-1 text-right">{formatTokens(w.tokens)}</td>
+                <td className="py-1 text-right">{usd(w.costUsd)}</td>
+                {e.suggests && (
+                  <td className="py-1 text-right">
+                    {pct(w.acceptRate)}
+                    {w.accepted + w.dismissed > 0 &&
+                      ` (${w.accepted}/${w.accepted + w.dismissed})`}
+                  </td>
+                )}
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </ScrollTable>
   );
 }
 
@@ -197,7 +217,7 @@ export function ExperimentsSection() {
         <SettingSection key={e.id}>
           <SwitchSetting
             id={`experiment-${e.id}`}
-            label={`${e.name} · ${e.status === "beta" ? "Beta" : "Experimental"}`}
+            label={e.status === "beta" ? `${e.name} · Beta` : e.name}
             help={e.description}
             checked={e.on}
             locked={data.locked}

package/components/Settings/GeneralSection.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { settingsUiActions } from "@/stores/settingsUi";
+import { welcomeUiActions } from "@/stores/welcomeUi";
+import { AppWideLimits } from "./AppWideLimits";
+import { OwnerNameRow } from "./OwnerNameRow";
+import { SettingRow, SettingSection } from "./SettingRow";
+
+// The app-wide basics: who you are, alerts that apply everywhere, and the
+// first-run setup again.
+export function GeneralSection() {
+  return (
+    <div className="space-y-5">
+      <OwnerNameRow />
+      <AppWideLimits />
+      <SettingSection>
+        <SettingRow
+          id="first-run-setup"
+          label="First-run setup"
+          help="Agents, your first project, and a first session."
+          control={
+            <Button
+              size="sm"
+              variant="outline"
+              className="min-h-11 sm:min-h-8"
+              onClick={() => {
+                settingsUiActions.close();
+                welcomeUiActions.open("agents");
+              }}
+            >
+              Run setup again
+            </Button>
+          }
+        />
+      </SettingSection>
+    </div>
+  );
+}

package/components/Settings/ListSection.test.ts

@@ -0,0 +1,85 @@
+import "@/components/Chat/composer/test-dom";
+import { act, createElement } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, describe, expect, it } from "vitest";
+import { ListSection, ScrollTable } from "./ListSection";
+
+(
+  globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
+).IS_REACT_ACT_ENVIRONMENT = true;
+
+let root: Root;
+let host: HTMLElement;
+afterEach(async () => {
+  await act(async () => root.unmount());
+  host.remove();
+});
+
+const items = (n: number) => Array.from({ length: n }, (_, i) => `item ${i}`);
+
+async function mount(
+  props: Partial<Parameters<typeof ListSection<string>>[0]>
+) {
+  host = document.createElement("div");
+  document.body.appendChild(host);
+  root = createRoot(host);
+  await act(async () =>
+    root.render(
+      createElement(ListSection<string>, {
+        title: "Things",
+        items: [],
+        keyOf: (s) => s,
+        render: (s) => createElement("span", null, s),
+        empty: "Nothing here.",
+        ...props,
+      })
+    )
+  );
+}
+const click = (text: string) =>
+  act(async () => {
+    [...host.querySelectorAll("button")]
+      .find((b) => b.textContent?.includes(text))!
+      .click();
+  });
+
+describe("ListSection", () => {
+  it("shows the empty state and a zero count", async () => {
+    await mount({});
+    expect(host.textContent).toContain("Nothing here.");
+    expect(host.querySelector("h3")!.textContent).toBe("Things0");
+  });
+
+  it("shows the count and only the first 10, then Show all", async () => {
+    await mount({ items: items(25) });
+    expect(host.querySelector("h3")!.textContent).toBe("Things25");
+    expect(host.querySelectorAll("li")).toHaveLength(10);
+    await click("Show all 25");
+    expect(host.querySelectorAll("li")).toHaveLength(25);
+    await click("Show fewer");
+    expect(host.querySelectorAll("li")).toHaveLength(10);
+  });
+
+  it("has no Show all when everything fits", async () => {
+    await mount({ items: items(10) });
+    expect(host.querySelectorAll("button")).toHaveLength(0);
+  });
+
+  it("keeps older items behind their own toggle and counts them", async () => {
+    await mount({ items: items(2), older: ["old a", "old b", "old c"] });
+    expect(host.querySelector("h3")!.textContent).toBe("Things5");
+    expect(host.textContent).not.toContain("old a");
+    await click("Older (3)");
+    expect(host.textContent).toContain("old c");
+  });
+});
+
+describe("ScrollTable", () => {
+  it("scrolls in its own box", async () => {
+    host = document.createElement("div");
+    document.body.appendChild(host);
+    root = createRoot(host);
+    await act(async () => root.render(createElement(ScrollTable, null, "x")));
+    expect(host.firstElementChild!.className).toContain("overflow-x-auto");
+  });
+});

package/components/Settings/ListSection.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import { useState, type ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+export const LIST_SECTION_LIMIT = 10;
+
+/**
+ * A long list on a Settings page: a title with the count, the first
+ * `limit` items, "Show all" for the rest, and an empty state. Older items
+ * can go in a group of their own (`older`), collapsed until asked for.
+ */
+export function ListSection<T>({
+  title,
+  help,
+  items,
+  keyOf,
+  render,
+  empty,
+  limit = LIST_SECTION_LIMIT,
+  older,
+  olderLabel = "Older",
+  action,
+  className,
+}: {
+  title: string;
+  help?: string;
+  items: readonly T[];
+  keyOf: (item: T) => string;
+  render: (item: T) => ReactNode;
+  empty: string;
+  limit?: number;
+  // Items that are shown only under their own "Show <label>" toggle.
+  older?: readonly T[];
+  olderLabel?: string;
+  action?: ReactNode;
+  className?: string;
+}) {
+  const [all, setAll] = useState(false);
+  const [showOlder, setShowOlder] = useState(false);
+  const shown = all ? items : items.slice(0, limit);
+  const hidden = items.length - shown.length;
+  const oldCount = older?.length ?? 0;
+  const count = items.length + oldCount;
+  return (
+    <section className={cn("mb-5", className)} data-list-section={title}>
+      <div className="flex min-h-8 items-center gap-2">
+        <h3 className="text-sm font-semibold">
+          {title}
+          <span className="text-muted-foreground ml-1.5 font-normal tabular-nums">
+            {count}
+          </span>
+        </h3>
+        {action && <div className="ml-auto">{action}</div>}
+      </div>
+      {help && <p className="text-muted-foreground mb-2 text-xs">{help}</p>}
+      {count === 0 ? (
+        <p className="bg-muted/40 text-muted-foreground rounded-xl px-3 py-4 text-sm">
+          {empty}
+        </p>
+      ) : (
+        <div className="bg-muted/40 overflow-hidden rounded-xl">
+          <ul className="divide-foreground/5 divide-y">
+            {shown.map((item) => (
+              <li key={keyOf(item)}>{render(item)}</li>
+            ))}
+          </ul>
+          {hidden > 0 && (
+            <ShowButton onClick={() => setAll(true)}>
+              Show all {items.length}
+            </ShowButton>
+          )}
+          {all && items.length > limit && (
+            <ShowButton onClick={() => setAll(false)}>Show fewer</ShowButton>
+          )}
+          {oldCount > 0 && (
+            <>
+              <ShowButton onClick={() => setShowOlder((v) => !v)}>
+                {showOlder
+                  ? `Hide ${olderLabel}`
+                  : `${olderLabel} (${oldCount})`}
+              </ShowButton>
+              {showOlder && (
+                <ul className="divide-foreground/5 divide-y">
+                  {older!.map((item) => (
+                    <li key={keyOf(item)}>{render(item)}</li>
+                  ))}
+                </ul>
+              )}
+            </>
+          )}
+        </div>
+      )}
+    </section>
+  );
+}
+
+function ShowButton({
+  onClick,
+  children,
+}: {
+  onClick: () => void;
+  children: ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="text-primary border-foreground/5 hover:bg-muted/60 min-h-11 w-full border-t px-3 text-left text-sm"
+    >
+      {children}
+    </button>
+  );
+}
+
+/** A table that scrolls sideways in its own box, not the page. */
+export function ScrollTable({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn("max-w-full overflow-x-auto", className)}
+      data-scroll-table
+    >
+      {children}
+    </div>
+  );
+}