@saadnvd1/agent-os 0.3.839 → 0.3.848

package/components/Settings/SettingRow.tsx

@@ -8,6 +8,18 @@ import { cn } from "@/lib/utils";
 // What the Settings search box holds; a row that doesn't match hides.
 export const SettingsQueryContext = createContext("");
 
+/** Whether a row with this text shows for the search box's words. */
+export function matchesQuery(query: string, ...text: (string | undefined)[]) {
+  const q = query.trim().toLowerCase();
+  if (!q) return true;
+  const haystack = text.join(" ").toLowerCase();
+  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
@@ -25,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;
@@ -38,17 +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).trim().toLowerCase();
-  const haystack = `${label} ${help ?? ""}`.toLowerCase();
-  if (query && !query.split(/\s+/).every((w) => haystack.includes(w)))
+  const query = useContext(SettingsQueryContext);
+  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}
@@ -65,47 +76,49 @@ export function SettingRow({
       >
         {control}
       </div>
-      <div className="text-muted-foreground col-span-2 flex min-h-5 items-center justify-between gap-2 text-xs">
-        <span
-          id={`${id}-hint`}
-          className={cn("min-w-0", error && "text-destructive")}
-          role={error ? "alert" : undefined}
-        >
-          {error ?? hint}
-        </span>
-        <span className="flex shrink-0 items-center gap-3" aria-live="polite">
-          {status === "saving" && (
-            <span className="inline-flex items-center gap-1">
-              <Loader2 className="size-3 animate-spin" />
-              Saving…
-            </span>
-          )}
-          {(status === "saved" || status === "undo") && (
-            <span className="inline-flex items-center gap-1 text-emerald-600 dark:text-emerald-400">
-              <Check className="size-3" />
-              Saved
-            </span>
-          )}
-          {status === "undo" && onUndo && (
-            <button
-              type="button"
-              onClick={onUndo}
-              className="text-primary -my-3 -mr-1 min-h-11 px-1 hover:underline"
-            >
-              Undo
-            </button>
-          )}
-          {onReset && status !== "undo" && (
-            <button
-              type="button"
-              onClick={onReset}
-              className="text-primary -my-3 -mr-1 min-h-11 px-1 hover:underline"
-            >
-              Reset
-            </button>
-          )}
-        </span>
-      </div>
+      {(error || hint || onReset || status !== "idle") && (
+        <div className="text-muted-foreground col-span-2 flex min-h-5 items-center justify-end gap-3 text-xs">
+          <span
+            id={`${id}-hint`}
+            className={cn("min-w-0 flex-1", error && "text-destructive")}
+            role={error ? "alert" : undefined}
+          >
+            {error ?? hint}
+          </span>
+          <span className="flex shrink-0 items-center gap-3" aria-live="polite">
+            {status === "saving" && (
+              <span className="inline-flex items-center gap-1">
+                <Loader2 className="size-3 animate-spin" />
+                Saving…
+              </span>
+            )}
+            {(status === "saved" || status === "undo") && (
+              <span className="inline-flex items-center gap-1 text-emerald-600 dark:text-emerald-400">
+                <Check className="size-3" />
+                Saved
+              </span>
+            )}
+            {status === "undo" && onUndo && (
+              <button
+                type="button"
+                onClick={onUndo}
+                className="text-primary -my-3 -mr-1 min-h-11 px-1 hover:underline"
+              >
+                Undo
+              </button>
+            )}
+            {onReset && status !== "undo" && (
+              <button
+                type="button"
+                onClick={onReset}
+                className="text-primary -my-3 -mr-1 min-h-11 px-1 hover:underline"
+              >
+                {resetLabel ? `Reset to ${resetLabel}` : "Reset"}
+              </button>
+            )}
+          </span>
+        </div>
+      )}
       {below && <div className="col-span-2">{below}</div>}
     </div>
   );
@@ -129,3 +142,32 @@ export function SettingSection({
     </section>
   );
 }
+
+/**
+ * A row whose control is a block of its own (a list, a segmented control):
+ * the label sits above it, and the search box filters it like any row.
+ */
+export function SettingBlock({
+  id,
+  label,
+  help,
+  children,
+}: {
+  id: string;
+  label?: string;
+  help?: string;
+  children: ReactNode;
+}) {
+  const query = useContext(SettingsQueryContext);
+  if (!matchesQuery(query, label, help)) return null;
+  return (
+    <div
+      data-setting={id}
+      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}
+      {help && <p className="text-muted-foreground text-xs">{help}</p>}
+    </div>
+  );
+}

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,27 +57,23 @@ 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
-          ? undefined
-          : `default ${defaultValue ? "on" : "off"}`
-      }
+      error={auto.error}
+      resetLabel={defaultValue ? "on" : "off"}
       onReset={
         defaultValue !== undefined && auto.value !== defaultValue
           ? () => void auto.commit(defaultValue, { undoable: true })
           : undefined
       }
-      controlClassName="max-sm:col-span-1 max-sm:row-start-1 max-sm:mt-0"
+      controlClassName="max-sm:col-span-1 max-sm:col-start-2 max-sm:row-start-1 max-sm:mt-0 max-sm:justify-end"
       control={
         <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,14 +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
-      ? `default ${defOff ? "off" : `${defaultValue / scale}${short}`} · ${
-          max === undefined
-            ? `${min / scale}${short}+`
-            : `${min / scale}–${max / 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;
@@ -184,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
@@ -204,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`}
@@ -224,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>
           )}
@@ -265,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 });
@@ -277,7 +276,9 @@ export function SelectSetting({
       help={help}
       status={auto.status}
       onUndo={auto.undo}
-      hint={hint ?? (def ? `default ${def.label}` : undefined)}
+      hint={hint}
+      error={auto.error}
+      resetLabel={def?.label}
       onReset={
         defaultValue !== undefined && auto.value !== defaultValue
           ? () => void auto.commit(defaultValue, { undoable: true })
@@ -366,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
@@ -406,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>
   );