@saadnvd1/agent-os 0.3.845 → 0.3.848

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

package/components/Settings/settings-fields.tsx

@@ -32,11 +32,12 @@ export function SwitchSetting({
   confirmLabel = "Turn on",
   undoable,
   locked,
+  disabled,
   extra,
 }: {
   id: string;
   label: string;
-  help?: string;
+  help?: ReactNode;
   checked: boolean;
   onSave: Save<boolean>;
   defaultValue?: boolean;
@@ -45,6 +46,8 @@ export function SwitchSetting({
   undoable?: boolean;
   // Can't be changed from here.
   locked?: boolean;
+  // Greyed for a reason the help already gives.
+  disabled?: boolean;
   // Shown under the row (usage, links).
   extra?: ReactNode;
 }) {
@@ -54,14 +57,11 @@ export function SwitchSetting({
     <SettingRow
       id={id}
       label={label}
-      help={locked ? `${help ?? ""} Can't be changed from here.`.trim() : help}
+      help={locked ? <>{help} Can&apos;t be changed from here.</> : help}
       status={auto.status}
       onUndo={auto.undo}
-      hint={
-        defaultValue === undefined || auto.value === defaultValue
-          ? undefined
-          : `Default: ${defaultValue ? "on" : "off"}`
-      }
+      error={auto.error}
+      resetLabel={defaultValue ? "on" : "off"}
       onReset={
         defaultValue !== undefined && auto.value !== defaultValue
           ? () => void auto.commit(defaultValue, { undoable: true })
@@ -72,9 +72,8 @@ export function SwitchSetting({
         <Switch
           id={id}
           checked={auto.value}
-          disabled={locked}
+          disabled={locked || disabled}
           aria-describedby={`${id}-hint`}
-          className="data-[state=checked]:bg-primary"
           onCheckedChange={(on) => {
             if (on && confirm) setAsking(true);
             else void auto.commit(on, { undoable: undoable || !on });
@@ -149,10 +148,11 @@ export function NumberSetting({
   const off = optional ? auto.value === optional.off : false;
   const shown = (off ? optional!.on : auto.value) / scale;
   const defOff = optional ? defaultValue === optional.off : false;
-  const hint =
-    error === null && auto.value !== defaultValue
-      ? `Default: ${defOff ? "off" : `${defaultValue / scale}${short}`}`
-      : undefined;
+  const resetLabel = defOff ? "off" : `${defaultValue / scale}${short}`;
+  const range =
+    max === undefined
+      ? undefined
+      : `${min / scale}–${max / scale}${short || (unit ? ` ${unit}` : "")}`;
 
   const finish = () => {
     if (text === null) return;
@@ -180,10 +180,10 @@ export function NumberSetting({
     <SettingRow
       id={id}
       label={label}
-      help={help}
+      help={[help, range && `Allowed: ${range}.`].filter(Boolean).join(" ")}
       status={auto.status}
-      error={error}
-      hint={hint}
+      error={error ?? auto.error}
+      resetLabel={resetLabel}
       onUndo={auto.undo}
       onReset={
         auto.value !== defaultValue
@@ -200,7 +200,8 @@ export function NumberSetting({
             id={id}
             type="text"
             inputMode={integer ? "numeric" : "decimal"}
-            value={text ?? String(shown)}
+            value={off ? "" : (text ?? String(shown))}
+            placeholder={off ? "Off" : undefined}
             disabled={off}
             aria-invalid={!!error}
             aria-describedby={`${id}-hint`}
@@ -220,7 +221,9 @@ export function NumberSetting({
             className={`${FIELD} w-24 text-right tabular-nums`}
           />
           {unit && (
-            <span className="text-muted-foreground min-w-16 text-sm">
+            <span
+              className={`text-sm ${off ? "text-muted-foreground/50" : "text-muted-foreground"}`}
+            >
               {unit}
             </span>
           )}
@@ -261,7 +264,7 @@ export function SelectSetting({
   options: { value: string; label: string }[];
   onSave: Save<string>;
   defaultValue?: string;
-  // Replaces "default <label>" (an empty string for none).
+  // A line under the row (what an Inherit choice resolves to).
   hint?: string;
 }) {
   const auto = useAutoSave({ saved: value, save: onSave });
@@ -273,12 +276,9 @@ export function SelectSetting({
       help={help}
       status={auto.status}
       onUndo={auto.undo}
-      hint={
-        hint ??
-        (def && auto.value !== defaultValue
-          ? `Default: ${def.label}`
-          : undefined)
-      }
+      hint={hint}
+      error={auto.error}
+      resetLabel={def?.label}
       onReset={
         defaultValue !== undefined && auto.value !== defaultValue
           ? () => void auto.commit(defaultValue, { undoable: true })
@@ -367,7 +367,7 @@ export function TextSetting({
       label={label}
       help={help}
       status={checking ? "saving" : auto.status}
-      error={error}
+      error={error ?? auto.error}
       onUndo={auto.undo}
       onReset={
         resettable && !secret && auto.value !== defaultValue
@@ -407,7 +407,7 @@ export function TextSetting({
                 e.currentTarget.blur();
               }
             }}
-            className={`${FIELD} w-full sm:w-64`}
+            className={`${FIELD} w-full ${deliberate ? "sm:w-48" : "sm:w-64"}`}
           />
           {deliberate && (
             <Button

package/components/Shares/SharedLinksPanel.tsx

@@ -2,7 +2,8 @@
 
 import { useState } from "react";
 import { toast } from "sonner";
-import { Copy, Link2 } from "lucide-react";
+import { Copy } from "lucide-react";
+import { ListSection } from "@/components/Settings/ListSection";
 import { Button } from "@/components/ui/button";
 import { writeClipboard } from "@/hooks/useCopyToClipboard";
 import {
@@ -52,7 +53,7 @@ function Row({ share }: { share: SharedLinkRow }) {
     );
 
   return (
-    <li className="bg-muted/40 rounded-lg px-3 py-2.5">
+    <div className="px-3 py-2.5">
       <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
         <div className="min-w-0 flex-1">
           <div className="truncate text-sm font-medium">{title}</div>
@@ -114,7 +115,7 @@ function Row({ share }: { share: SharedLinkRow }) {
           onCancel={() => setRevoking(false)}
         />
       )}
-    </li>
+    </div>
   );
 }
 
@@ -194,18 +195,14 @@ export function SharedLinksPanel() {
       )}
       {isLoading ? (
         <p className="text-muted-foreground text-sm">Loading…</p>
-      ) : data?.shares.length ? (
-        <ul className="space-y-2">
-          {data.shares.map((s) => (
-            <Row key={s.id} share={s} />
-          ))}
-        </ul>
       ) : (
-        <div className="text-muted-foreground flex items-center gap-2 rounded-lg border border-dashed px-3 py-6 text-sm">
-          <Link2 className="h-4 w-4 shrink-0" />
-          Nothing shared yet. Use Share… in a chat&apos;s menu, or the share
-          button on a page.
-        </div>
+        <ListSection
+          title="Snapshots"
+          items={data?.shares ?? []}
+          keyOf={(s) => s.id}
+          render={(s) => <Row share={s} />}
+          empty="Nothing shared yet. Use Share… in a chat's menu, or the share button on a page."
+        />
       )}
     </div>
   );