@saadnvd1/agent-os 0.3.845 → 0.3.851

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

package/components/Settings/NotificationsSection.tsx

@@ -3,7 +3,8 @@
 import { Button } from "@/components/ui/button";
 import { PhoneNotifyForm } from "@/components/PhoneNotify/PhoneNotifyForm";
 import type { NotificationSettings } from "@/lib/notifications";
-import { SettingToggle } from "./SettingToggle";
+import { SettingRow, SettingSection } from "./SettingRow";
+import { SwitchSetting } from "./settings-fields";
 
 // This browser's alerts live in the page (useNotifications), so they come in
 // as props.
@@ -21,44 +22,45 @@ export function NotificationsSection({
 }) {
   return (
     <div className="space-y-5">
-      <div className="space-y-2">
-        <h3 className="text-sm font-medium">This browser</h3>
-        <SettingToggle
-          title="Sound"
-          detail="Play a sound when a session needs you or hits an error."
+      <SettingSection title="This browser">
+        <SwitchSetting
+          id="notify-sound"
+          label="Sound"
+          help="Play a sound when a session needs you or hits an error."
           checked={browser.settings.sound}
-          onChange={(sound) => browser.updateSettings({ sound })}
+          defaultValue={true}
+          onSave={async (sound) => browser.updateSettings({ sound })}
         />
         {browser.permissionGranted ? (
-          <SettingToggle
-            title="Browser alerts"
-            detail="Show a system notification when a session needs you and AgentOS isn't in front."
+          <SwitchSetting
+            id="notify-browser"
+            label="Browser alerts"
+            help="Show a system notification when a session needs you and AgentOS isn't in front."
             checked={browser.settings.browserNotifications}
-            onChange={(browserNotifications) =>
+            onSave={async (browserNotifications) =>
               browser.updateSettings({ browserNotifications })
             }
           />
         ) : (
-          <div className="bg-muted/40 flex items-center gap-3 rounded-lg px-3 py-2.5">
-            <div className="min-w-0 flex-1">
-              <p className="text-sm font-medium">Browser alerts</p>
-              <p className="text-muted-foreground text-xs">
-                This browser hasn&rsquo;t allowed AgentOS to show notifications.
-              </p>
-            </div>
-            <Button
-              size="sm"
-              variant="outline"
-              className="h-11 md:h-8"
-              onClick={() => void browser.requestPermission()}
-            >
-              Allow
-            </Button>
-          </div>
+          <SettingRow
+            id="notify-browser"
+            label="Browser alerts"
+            help="This browser hasn't allowed AgentOS to show notifications."
+            control={
+              <Button
+                size="sm"
+                variant="outline"
+                className="h-11 md:h-9"
+                onClick={() => void browser.requestPermission()}
+              >
+                Allow
+              </Button>
+            }
+          />
         )}
-      </div>
+      </SettingSection>
       <div className="space-y-2">
-        <h3 className="text-sm font-medium">Your phone</h3>
+        <h3 className="text-sm font-semibold">Your phone</h3>
         <PhoneNotifyForm />
       </div>
     </div>

package/components/Settings/PickerSetting.tsx

@@ -18,6 +18,7 @@ export function PickerSetting<T>({
   defaultValue,
   hint,
   error,
+  resetLabel,
   render,
   below,
 }: {
@@ -30,6 +31,8 @@ export function PickerSetting<T>({
   defaultValue?: T;
   hint?: string;
   error?: string | null;
+  // What Reset goes back to, in words.
+  resetLabel?: string;
   render: (picker: { value: T; commit: (next: T) => void }) => ReactNode;
   below?: ReactNode;
 }) {
@@ -40,7 +43,8 @@ export function PickerSetting<T>({
       label={label}
       help={help}
       hint={hint}
-      error={error}
+      error={error ?? auto.error}
+      resetLabel={resetLabel}
       status={auto.status}
       onUndo={auto.undo}
       onReset={

package/components/Settings/SettingRow.tsx

@@ -16,6 +16,10 @@ export function matchesQuery(query: string, ...text: (string | undefined)[]) {
   return q.split(/\s+/).every((w) => haystack.includes(w));
 }
 
+// One padding and one grid for every row: label left, control right.
+const ROW =
+  "border-foreground/5 grid min-h-11 grid-cols-[minmax(0,1fr)_auto] items-center gap-x-4 gap-y-0.5 border-t px-3 py-2.5 first:border-t-0";
+
 /**
  * One setting on a Settings page, 44px at least: label and one-line help on
  * the left, the control on the right (below the label on a phone), and a meta
@@ -33,11 +37,12 @@ export function SettingRow({
   status = "idle",
   onUndo,
   onReset,
+  resetLabel,
   below,
 }: {
   id: string;
   label: string;
-  help?: string;
+  help?: ReactNode;
   control: ReactNode;
   controlClassName?: string;
   hint?: string;
@@ -46,15 +51,15 @@ export function SettingRow({
   onUndo?: () => void;
   // Given only while the value differs from the default.
   onReset?: () => void;
+  // What Reset goes back to, in words ("squash", "on", "200k").
+  resetLabel?: string;
   below?: ReactNode;
 }) {
   const query = useContext(SettingsQueryContext);
-  if (!matchesQuery(query, label, help)) return null;
+  if (!matchesQuery(query, label, typeof help === "string" ? help : undefined))
+    return null;
   return (
-    <div
-      data-setting={id}
-      className="border-foreground/5 grid min-h-11 grid-cols-[minmax(0,1fr)_auto] items-center gap-x-4 gap-y-0.5 border-t px-3 py-2 first:border-t-0"
-    >
+    <div data-setting={id} className={ROW}>
       <div className="min-w-0">
         <label htmlFor={id} className="block text-sm font-medium">
           {label}
@@ -108,7 +113,7 @@ export function SettingRow({
                 onClick={onReset}
                 className="text-primary -my-3 -mr-1 min-h-11 px-1 hover:underline"
               >
-                Reset
+                {resetLabel ? `Reset to ${resetLabel}` : "Reset"}
               </button>
             )}
           </span>
@@ -158,7 +163,7 @@ export function SettingBlock({
   return (
     <div
       data-setting={id}
-      className="border-foreground/5 space-y-1.5 border-t px-3 py-2 first:border-t-0"
+      className="border-foreground/5 space-y-1.5 border-t px-3 py-2.5 first:border-t-0"
     >
       {label && <p className="text-sm font-medium">{label}</p>}
       {children}

package/components/Settings/SettingsDialog.test.ts

@@ -28,9 +28,14 @@ const stub = (name: string) =>
 vi.mock("@/components/Merge/GlobalMergeSection", () => ({
   GlobalMergeSection: stub("merging"),
 }));
-vi.mock("./NoApprovalsSection", () => ({
-  NoApprovalsSection: stub("approvals"),
+vi.mock("./ApprovalsSection", () => ({
+  ApprovalsSection: stub("approvals"),
 }));
+vi.mock("./GeneralSection", () => ({ GeneralSection: stub("general") }));
+vi.mock("@/components/Health/HealthPanel", () => ({
+  HealthPanel: stub("health"),
+}));
+vi.mock("@/components/Recipes", () => ({ RecipesPanel: stub("recipes") }));
 vi.mock("@/components/Workspaces", () => ({
   WorkspaceSettings: stub("workspaces"),
 }));
@@ -128,8 +133,8 @@ describe("SettingsDialog", () => {
   it("shows the first section beside the list when none is chosen", async () => {
     await mount();
     await act(async () => settingsUiActions.open());
-    expect(body()).toContain("body:merging");
-    expect(navButton("Merging").getAttribute("aria-current")).toBe("page");
+    expect(body()).toContain("body:general");
+    expect(navButton("General").getAttribute("aria-current")).toBe("page");
   });
 
   it("goes back to the list on a phone", async () => {
@@ -198,6 +203,28 @@ describe("SettingsDialog", () => {
     expect(body()).toContain("body:workspaces");
   });
 
+  it("sends an old ?settings=setup link to Health and rewrites the address", async () => {
+    await mount("/?session=s1&settings=setup");
+    await flush();
+    expect(settingsUi).toMatchObject({ open: true, section: "health" });
+    expect(body()).toContain("body:health");
+    expect(search()).toBe("?session=s1&settings=health");
+  });
+
+  it("names each section once in the list", async () => {
+    await mount();
+    await act(async () => settingsUiActions.open());
+    const labels = [
+      ...document.querySelectorAll(
+        'nav[aria-label="Settings sections"] button'
+      ),
+    ].map((b) => b.querySelector("span span")?.textContent);
+    expect(new Set(labels).size).toBe(labels.length);
+    expect(labels).toContain("Approvals");
+    expect(labels).not.toContain("No approvals");
+    expect(labels).not.toContain("Setup & health");
+  });
+
   it("drops the section from the address when closed", async () => {
     await mount("/?session=s1&settings=merging");
     await act(async () => settingsUiActions.close());

package/components/Settings/SettingsDialog.tsx

@@ -16,8 +16,8 @@ import {
   LayoutGrid,
   Search,
   Link2,
-  ListChecks,
-  ShieldOff,
+  ShieldCheck,
+  SlidersHorizontal,
   FlaskConical,
   RefreshCw,
   Smartphone,
@@ -52,8 +52,8 @@ import { RecipesPanel } from "@/components/Recipes";
 import { settingsUi, settingsUiActions } from "@/stores/settingsUi";
 import { ContextSection } from "./ContextSection";
 import { SettingsQueryContext } from "./SettingRow";
-import { SetupSection } from "./SetupSection";
-import { NoApprovalsSection } from "./NoApprovalsSection";
+import { ApprovalsSection } from "./ApprovalsSection";
+import { GeneralSection } from "./GeneralSection";
 import {
   NotificationsSection,
   type BrowserNotifications,
@@ -63,15 +63,20 @@ export const SECTION_INFO: Record<
   SettingsSection,
   { label: string; hint: string; icon: LucideIcon }
 > = {
+  general: {
+    label: "General",
+    hint: "Your name, alerts, first-run setup",
+    icon: SlidersHorizontal,
+  },
   merging: {
     label: "Merging",
-    hint: "Approval, merge method, branch and worktree clean-up",
+    hint: "Merge method, branch and worktree clean-up",
     icon: GitMerge,
   },
   approvals: {
-    label: "No approvals",
-    hint: "Switch off every approval and permission prompt",
-    icon: ShieldOff,
+    label: "Approvals",
+    hint: "No approvals, merge approval, what was approved for you",
+    icon: ShieldCheck,
   },
   workspaces: {
     label: "Workspaces",
@@ -125,14 +130,9 @@ export const SECTION_INFO: Record<
   },
   health: {
     label: "Health",
-    hint: "What the watchers caught, what normal looks like, thresholds",
+    hint: "What the watchers caught, thresholds, clean-up, this machine",
     icon: HeartPulse,
   },
-  setup: {
-    label: "Setup & health",
-    hint: "What this machine has, agents, first-run setup",
-    icon: ListChecks,
-  },
   updates: {
     label: "Updates",
     hint: "Version, check for updates, the update banner, tips",
@@ -153,10 +153,12 @@ function SectionBody({
   browser: BrowserNotifications;
 }) {
   switch (section) {
+    case "general":
+      return <GeneralSection />;
     case "merging":
       return <GlobalMergeSection />;
     case "approvals":
-      return <NoApprovalsSection />;
+      return <ApprovalsSection />;
     case "workspaces":
       return <WorkspaceSettings />;
     case "context":
@@ -179,8 +181,6 @@ function SectionBody({
       return <AuditsPanel />;
     case "health":
       return <HealthPanel />;
-    case "setup":
-      return <SetupSection />;
     case "updates":
       return <UpdatesSection />;
     case "experiments":
@@ -234,6 +234,11 @@ export const SettingsDialog = memo(function SettingsDialog({
 }) {
   const { open, section } = useSnapshot(settingsUi);
   useSettingsUrl();
+  useEffect(() => {
+    if (!open) return;
+    document.documentElement.setAttribute("data-settings-open", "");
+    return () => document.documentElement.removeAttribute("data-settings-open");
+  }, [open]);
   // A wide screen always shows a section; a phone shows the list first.
   const shown = section ?? SETTINGS_SECTIONS[0];
 

package/components/Settings/ValueLabel.tsx

@@ -0,0 +1,31 @@
+import { cn } from "@/lib/utils";
+
+/**
+ * What a select trigger or item shows: a short label, and the resolved
+ * value (a model id, say) under it in secondary text. Each line ends in an
+ * ellipsis at the edge, never cut through a letter.
+ */
+export function ValueLabel({
+  label,
+  detail,
+  className,
+}: {
+  label: string;
+  detail?: string;
+  className?: string;
+}) {
+  return (
+    <span
+      className={cn("flex min-w-0 flex-col text-left leading-tight", className)}
+    >
+      <span className="truncate">{label}</span>
+      {detail && (
+        <span className="text-muted-foreground truncate text-xs">{detail}</span>
+      )}
+    </span>
+  );
+}
+
+// The trigger classes that let a ValueLabel use two lines.
+export const TWO_LINE_TRIGGER =
+  "h-auto min-h-11 py-1.5 md:min-h-9 [&>span]:line-clamp-none";

package/components/Settings/settings-fields.test.ts

@@ -4,7 +4,13 @@ import { createRoot, type Root } from "react-dom/client";
 import { afterEach, describe, expect, it, vi } from "vitest";
 
 // Radix dispatches its own events; they must be jsdom's, not Node's.
-for (const key of ["Event", "CustomEvent", "FocusEvent", "HTMLButtonElement"])
+for (const key of [
+  "Event",
+  "CustomEvent",
+  "FocusEvent",
+  "HTMLButtonElement",
+  "HTMLFormElement",
+])
   Object.defineProperty(globalThis, key, {
     value: (window as unknown as Record<string, unknown>)[key],
     configurable: true,
@@ -15,7 +21,7 @@ for (const key of ["Event", "CustomEvent", "FocusEvent", "HTMLButtonElement"])
 ).IS_REACT_ACT_ENVIRONMENT = true;
 vi.mock("sonner", () => ({ toast: { error: vi.fn() } }));
 
-const { NumberSetting } = await import("./settings-fields");
+const { NumberSetting, SwitchSetting } = await import("./settings-fields");
 
 let root: Root;
 let host: HTMLElement;
@@ -101,3 +107,76 @@ describe("NumberSetting", () => {
     expect(input.value).toBe("7");
   });
 });
+
+async function render(el: ReturnType<typeof createElement>) {
+  host = document.createElement("div");
+  document.body.appendChild(host);
+  root = createRoot(host);
+  await act(async () => root.render(el));
+}
+const noop = () => Promise.resolve();
+
+describe("Reset and default text", () => {
+  const num = (value: number, extra = {}) =>
+    createElement(NumberSetting, {
+      id: "n",
+      label: "Days",
+      value,
+      defaultValue: 7,
+      min: 1,
+      max: 30,
+      unit: "days",
+      onSave: noop,
+      ...extra,
+    });
+
+  it("shows no default text or Reset while the value is the default", async () => {
+    await render(num(7));
+    expect(host.textContent).not.toMatch(/default|Reset/i);
+  });
+
+  it("offers 'Reset to X' once it differs", async () => {
+    await render(num(9));
+    expect(host.textContent).toContain("Reset to 7");
+    expect(host.textContent).not.toContain("Default:");
+  });
+
+  it("puts the range in the help text and the unit right after the number", async () => {
+    await render(num(7));
+    expect(host.textContent).toContain("Allowed: 1–30 days.");
+    const input = host.querySelector("input")!;
+    expect(input.nextElementSibling?.textContent).toBe("days");
+  });
+
+  it("disables and empties the field while its switch is off", async () => {
+    await render(num(0, { optional: { off: 0, on: 7 } }));
+    const input = host.querySelector("input")!;
+    expect(input.disabled).toBe(true);
+    expect(input.value).toBe("");
+  });
+
+  it("shows Reset to on/off for a switch only when it differs", async () => {
+    await render(
+      createElement(SwitchSetting, {
+        id: "s",
+        label: "Sound",
+        checked: true,
+        defaultValue: true,
+        onSave: noop,
+      })
+    );
+    expect(host.textContent).not.toMatch(/Reset/);
+    await act(async () => root.unmount());
+    host.remove();
+    await render(
+      createElement(SwitchSetting, {
+        id: "s",
+        label: "Sound",
+        checked: false,
+        defaultValue: true,
+        onSave: noop,
+      })
+    );
+    expect(host.textContent).toContain("Reset to on");
+  });
+});