@saadnvd1/agent-os 0.3.839 → 0.3.848

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

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={