@saadnvd1/agent-os 0.3.836 → 0.3.839

package/components/PhoneNotify/PhoneNotifyForm.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { useState } from "react";
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
+import { SettingSection } from "@/components/Settings/SettingRow";
+import { TextSetting } from "@/components/Settings/settings-fields";
 import {
   useNotifySettings,
   useSaveTelegram,
@@ -16,11 +16,8 @@ export function PhoneNotifyForm() {
   const { data: settings, isPending } = useNotifySettings();
   const save = useSaveTelegram();
   const test = useTestNotify();
-  const [token, setToken] = useState("");
-  const [chatId, setChatId] = useState<string | null>(null);
   if (isPending || !settings)
     return <div className="bg-muted/40 h-32 animate-pulse rounded-xl" />;
-  const chat = chatId ?? settings.telegram.chatId ?? "";
 
   return (
     <div className="space-y-5">
@@ -48,60 +45,45 @@ export function PhoneNotifyForm() {
         )}
       </div>
 
-      <form
-        className="space-y-3"
-        onSubmit={(e) => {
-          e.preventDefault();
-          save.mutate(
-            {
-              ...(token.trim() && { telegramToken: token.trim() }),
-              telegramChatId: chat,
-            },
-            { onSuccess: () => setToken("") }
-          );
-        }}
-      >
+      <div className="space-y-2">
         <p className="label-mono text-muted-foreground">Telegram</p>
-        <div className="space-y-2">
-          <label className="text-sm font-medium" htmlFor="tg-token">
-            Bot token
-          </label>
-          <Input
+        <SettingSection>
+          <TextSetting
+            id="tg-chat"
+            label="Chat id"
+            help="Where the bot sends alerts: your chat id with it, or @channel."
+            placeholder="123456789"
+            value={settings.telegram.chatId ?? ""}
+            validate={(t) =>
+              !t || /^-?\d+$|^@\w+$/.test(t)
+                ? null
+                : "A chat id is a whole number like 123456789, or @channel."
+            }
+            onSave={(t) => save.mutateAsync({ telegramChatId: t || null })}
+          />
+          <TextSetting
             id="tg-token"
-            type="password"
-            autoComplete="off"
-            value={token}
-            onChange={(e) => setToken(e.target.value)}
+            label="Bot token"
+            help="Write-only. Saved with the button, never on blur: a half-typed secret must not save."
+            secret
+            buttonLabel={settings.telegram.tokenSet ? "Replace" : "Connect"}
             placeholder={
-              settings.telegram.tokenSet ? "Saved; type to replace" : "123:ABC…"
+              settings.telegram.tokenSet
+                ? "Connected; paste to replace"
+                : "123:ABC…"
             }
-            className="h-11 font-mono md:h-9"
-          />
-        </div>
-        <div className="space-y-2">
-          <label className="text-sm font-medium" htmlFor="tg-chat">
-            Chat id
-          </label>
-          <Input
-            id="tg-chat"
-            inputMode="numeric"
-            value={chat}
-            onChange={(e) => setChatId(e.target.value)}
-            placeholder="Your chat id with the bot"
-            className="h-11 font-mono md:h-9"
+            value=""
+            validate={(t) =>
+              !t
+                ? "Paste the bot token from BotFather."
+                : /\s/.test(t)
+                  ? "A token has no spaces."
+                  : null
+            }
+            onSave={(t) => save.mutateAsync({ telegramToken: t })}
           />
-        </div>
-        {save.error && (
-          <p className="text-destructive text-sm">{save.error.message}</p>
-        )}
+        </SettingSection>
         <div className="flex flex-wrap gap-2">
-          <Button
-            type="submit"
-            className="h-11 md:h-9"
-            disabled={save.isPending}
-          >
-            {save.isPending ? "Saving..." : "Save"}
-          </Button>
           {settings.telegram.tokenSet && (
             <Button
               type="button"
@@ -109,10 +91,7 @@ export function PhoneNotifyForm() {
               className="text-muted-foreground h-11 md:h-9"
               disabled={save.isPending}
               onClick={() =>
-                save.mutate(
-                  { telegramToken: null, telegramChatId: null },
-                  { onSuccess: () => setChatId(null) }
-                )
+                save.mutate({ telegramToken: null, telegramChatId: null })
               }
             >
               Remove bot
@@ -136,7 +115,7 @@ export function PhoneNotifyForm() {
             {testSummary(test.data)}
           </p>
         )}
-      </form>
+      </div>
     </div>
   );
 }

package/components/Settings/AppWideLimits.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { useAwaySettingsQuery, useUpdateAwaySettings } from "@/data/away";
+import { useStallQuery, useUpdateStall } from "@/data/stall";
+import { MAX_STALL_MINUTES, MIN_STALL_MINUTES } from "@/lib/chat/stall-limits";
+import {
+  MAX_WINDOW_MINUTES,
+  MIN_WINDOW_MINUTES,
+} from "@/lib/away/window-limits";
+import { SETTING_DEFAULTS } from "@/lib/settings/defaults";
+import { SettingSection } from "./SettingRow";
+import { NumberSetting } from "./settings-fields";
+
+// Stall alerts and the Away window: app-wide, each saved on its own.
+export function AppWideLimits() {
+  const stall = useStallQuery();
+  const away = useAwaySettingsQuery();
+  const updateStall = useUpdateStall();
+  const updateAway = useUpdateAwaySettings();
+  return (
+    <SettingSection
+      title="All workspaces"
+      help="Stall alerts and Away mode apply across every workspace."
+    >
+      {stall.data && (
+        <NumberSetting
+          id="stall-minutes"
+          label="Flag stalled turns"
+          help="Warn, and tell the orchestrator, when a turn makes no progress for this long."
+          value={stall.data.minutes}
+          defaultValue={SETTING_DEFAULTS.stallMinutes}
+          onSave={(n) => updateStall.mutateAsync(n)}
+          min={MIN_STALL_MINUTES}
+          max={MAX_STALL_MINUTES}
+          unit="minutes"
+          short=" min"
+          optional={{ off: 0, on: SETTING_DEFAULTS.stallMinutes }}
+        />
+      )}
+      {away.data && (
+        <NumberSetting
+          id="away-window"
+          label="Away window"
+          help="Away mode only works through sessions with a real turn this recently."
+          value={away.data.windowMinutes}
+          defaultValue={SETTING_DEFAULTS.awayWindowMinutes}
+          onSave={(n) => updateAway.mutateAsync({ windowMinutes: n })}
+          min={MIN_WINDOW_MINUTES}
+          max={MAX_WINDOW_MINUTES}
+          unit="minutes"
+          short=" min"
+        />
+      )}
+      {(stall.isError || away.isError) && (
+        <p className="text-destructive px-3 py-2 text-sm">
+          {stall.error?.message ?? away.error?.message}
+        </p>
+      )}
+    </SettingSection>
+  );
+}

package/components/Settings/ContextSection.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { useFreshStartQuery, useUpdateFreshStart } from "@/data/fresh-start";
+import type { RefreshSettings } from "@/lib/chat/refresh";
+import {
+  MAX_REFRESH_TOKENS,
+  MIN_REFRESH_TOKENS,
+} from "@/lib/chat/refresh-limits";
+import {
+  SETTING_DEFAULTS,
+  freshOnValue,
+  type FreshKey,
+} from "@/lib/settings/defaults";
+import { SettingSection } from "./SettingRow";
+import { NumberSetting } from "./settings-fields";
+
+type Row = {
+  key: keyof RefreshSettings & FreshKey;
+  label: string;
+  help: string;
+};
+
+const FRESH: Row[] = [
+  {
+    key: "orchestratorTokens",
+    label: "Orchestrators",
+    help: "Start fresh past this size, at the next turn. Its brief, rules and the workspace's state carry over.",
+  },
+  {
+    key: "taskTokens",
+    label: "Tasks",
+    help: "A task keeps only its brief and its branch.",
+  },
+];
+
+const COMPACT: Row[] = [
+  {
+    key: "autoCompactTokens",
+    label: "Mid-turn, tasks",
+    help: "A task's agent compacts itself while a job runs long. Keep it high: it is holding its files.",
+  },
+  {
+    key: "interactiveAutoCompactTokens",
+    label: "Mid-turn, your sessions",
+    help: "Your own chats and terminals. A terminal only gets this one.",
+  },
+  {
+    key: "compactTokens",
+    label: "Between turns",
+    help: "Compact chats and tasks before the next message. The composer offers first.",
+  },
+];
+
+// When agents start fresh or compact: app-wide, each value saved on its own.
+export function ContextSection() {
+  const { data, isPending, isError, error } = useFreshStartQuery();
+  const update = useUpdateFreshStart();
+  if (isPending)
+    return <div className="bg-muted/40 h-24 animate-pulse rounded-xl" />;
+  if (isError)
+    return <p className="text-destructive text-sm">{error.message}</p>;
+
+  const row = ({ key, label, help }: Row) => (
+    <NumberSetting
+      key={key}
+      id={`context-${key}`}
+      label={label}
+      help={help}
+      value={data[key]}
+      defaultValue={SETTING_DEFAULTS.fresh[key]}
+      onSave={(n) => update.mutateAsync({ [key]: n })}
+      min={MIN_REFRESH_TOKENS}
+      max={MAX_REFRESH_TOKENS}
+      scale={1000}
+      unit="k tokens"
+      short="k"
+      optional={{ off: 0, on: freshOnValue(key) }}
+    />
+  );
+  return (
+    <div className="space-y-1">
+      <SettingSection
+        title="Fresh starts"
+        help="When a conversation passes the size, its agent starts a new one with its brief."
+      >
+        {FRESH.map(row)}
+      </SettingSection>
+      <SettingSection
+        title="Compact"
+        help="Mid-turn, Claude Code summarizes itself; between turns, AgentOS compacts before the next message. AgentOS hands the task, files and todos back."
+      >
+        {COMPACT.map(row)}
+      </SettingSection>
+    </div>
+  );
+}

package/components/Settings/ExperimentsSection.test.ts

@@ -29,7 +29,9 @@ const w = (calls: number) => ({
   dismissed: 1,
   acceptRate: 0.5,
 });
-const state = vi.hoisted(() => ({ mutate: vi.fn() }));
+const state = vi.hoisted(() => ({
+  mutateAsync: vi.fn().mockResolvedValue({}),
+}));
 vi.mock("@/data/experiments", () => ({
   useExperimentsQuery: () => ({
     isPending: false,
@@ -50,7 +52,7 @@ vi.mock("@/data/experiments", () => ({
       ],
     },
   }),
-  useSetExperiment: () => ({ mutate: state.mutate }),
+  useSetExperiment: () => ({ mutateAsync: state.mutateAsync }),
   useExperimentDetailQuery: () => ({ isPending: true }),
 }));
 
@@ -59,7 +61,7 @@ const { ExperimentsSection } = await import("./ExperimentsSection");
 let root: Root;
 let host: HTMLDivElement;
 beforeEach(() => {
-  state.mutate.mockReset();
+  state.mutateAsync.mockClear();
   host = document.createElement("div");
   document.body.appendChild(host);
   root = createRoot(host);
@@ -87,9 +89,9 @@ describe("ExperimentsSection", () => {
         .querySelector('[role="switch"]')
         ?.dispatchEvent(new window.MouseEvent("click", { bubbles: true }));
     });
-    expect(state.mutate).toHaveBeenCalledWith(
-      { id: "learning-cards", on: true },
-      expect.any(Object)
-    );
+    expect(state.mutateAsync).toHaveBeenCalledWith({
+      id: "learning-cards",
+      on: true,
+    });
   });
 });

package/components/Settings/ExperimentsSection.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import { useState } from "react";
-import { toast } from "sonner";
 import { ArrowLeft } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { SettingToggle } from "@/components/Settings/SettingToggle";
+import { SettingSection } from "@/components/Settings/SettingRow";
+import { SwitchSetting } from "@/components/Settings/settings-fields";
 import { formatTokens } from "@/lib/chat/context";
 import {
   useExperimentDetailQuery,
@@ -194,31 +194,30 @@ export function ExperimentsSection() {
         work while off, and shows what it costs here.
       </p>
       {data.experiments.map((e) => (
-        <div key={e.id} className="space-y-2">
-          <SettingToggle
-            title={`${e.name} · ${e.status === "beta" ? "Beta" : "Experimental"}`}
-            detail={e.description}
+        <SettingSection key={e.id}>
+          <SwitchSetting
+            id={`experiment-${e.id}`}
+            label={`${e.name} · ${e.status === "beta" ? "Beta" : "Experimental"}`}
+            help={e.description}
             checked={e.on}
             locked={data.locked}
-            onChange={(on) =>
-              set.mutate(
-                { id: e.id, on },
-                { onError: (err) => toast.error(err.message) }
-              )
+            defaultValue={false}
+            onSave={(on) => set.mutateAsync({ id: e.id, on })}
+            extra={
+              <div className="px-1 pb-1">
+                <Usage e={e} />
+                <Button
+                  variant="link"
+                  size="sm"
+                  className="min-h-11 px-0 md:min-h-0"
+                  onClick={() => setOpen(e.id)}
+                >
+                  Details
+                </Button>
+              </div>
             }
           />
-          <div className="px-3">
-            <Usage e={e} />
-            <Button
-              variant="link"
-              size="sm"
-              className="min-h-11 px-0 md:min-h-0"
-              onClick={() => setOpen(e.id)}
-            >
-              Details
-            </Button>
-          </div>
-        </div>
+        </SettingSection>
       ))}
     </div>
   );

package/components/Settings/InlineConfirm.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+
+/**
+ * The in-app confirm under a row: a message and two buttons, never a browser
+ * dialog (which a webview drops). The full-access switch, and every revoke,
+ * ask this way.
+ */
+export function InlineConfirm({
+  label,
+  message,
+  confirmLabel,
+  onConfirm,
+  onCancel,
+}: {
+  // The dialog's accessible name.
+  label: string;
+  message: string;
+  confirmLabel: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}) {
+  return (
+    <div
+      role="alertdialog"
+      aria-label={label}
+      className="bg-destructive/10 my-1 space-y-2 rounded-lg px-3 py-2 text-sm"
+    >
+      <p>{message}</p>
+      <div className="flex gap-2">
+        <Button
+          size="sm"
+          variant="destructive"
+          className="h-11 sm:h-9"
+          onClick={onConfirm}
+        >
+          {confirmLabel}
+        </Button>
+        <Button
+          size="sm"
+          variant="ghost"
+          className="h-11 sm:h-9"
+          onClick={onCancel}
+        >
+          Cancel
+        </Button>
+      </div>
+    </div>
+  );
+}

package/components/Settings/OwnerNameRow.tsx

@@ -1,55 +1,25 @@
 "use client";
 
-import { useState } from "react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
 import { useClientConfig } from "@/data/client-config/queries";
 import { useSetOwnerName } from "@/data/owner/mutations";
+import { SettingSection } from "./SettingRow";
+import { TextSetting } from "./settings-fields";
 
 // The name AgentOS and the orchestrators use when they refer to you.
 export function OwnerNameRow() {
   const saved = useClientConfig().data?.ownerName ?? "";
-  // null: show what is saved.
-  const [draft, setDraft] = useState<string | null>(null);
-  const value = draft ?? saved;
   const save = useSetOwnerName();
   return (
-    <form
-      className="bg-muted/40 flex flex-col gap-2 rounded-lg px-3 py-2.5 sm:flex-row sm:items-center"
-      onSubmit={(e) => {
-        e.preventDefault();
-        save.mutate(value.trim() || null, { onSuccess: () => setDraft(null) });
-      }}
-    >
-      <div className="min-w-0 flex-1">
-        <label htmlFor="owner-name" className="text-sm font-medium">
-          Your name
-        </label>
-        <p className="text-muted-foreground text-xs">
-          Used where AgentOS and your orchestrators refer to you. Orchestrators
-          pick it up when they next start.
-        </p>
-        {save.error && (
-          <p className="text-destructive text-xs">{save.error.message}</p>
-        )}
-      </div>
-      <Input
+    <SettingSection>
+      <TextSetting
         id="owner-name"
-        value={value}
-        maxLength={40}
+        label="Your name"
+        help="Used where AgentOS and your orchestrators refer to you. Orchestrators pick it up when they next start."
         placeholder="Not set"
-        onChange={(e) => setDraft(e.target.value)}
-        className="min-h-11 sm:min-h-8 sm:w-44"
+        value={saved}
+        maxLength={40}
+        onSave={(name) => save.mutateAsync(name || null)}
       />
-      <Button
-        type="submit"
-        size="sm"
-        variant="outline"
-        className="min-h-11 sm:min-h-8"
-        disabled={save.isPending || value.trim() === saved}
-      >
-        Save
-      </Button>
-    </form>
+    </SettingSection>
   );
 }

package/components/Settings/PickerSetting.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { useAutoSave } from "@/hooks/useAutoSave";
+import { SettingRow } from "./SettingRow";
+
+/**
+ * A setting whose control is a picker of your own (a model list, say): the
+ * row, the instant save, rollback with a toast, Saved and Reset come from
+ * here. `render` gets the value to show and a `commit` that saves a new one.
+ */
+export function PickerSetting<T>({
+  id,
+  label,
+  help,
+  value,
+  onSave,
+  defaultValue,
+  hint,
+  error,
+  render,
+  below,
+}: {
+  id: string;
+  label: string;
+  help?: string;
+  value: T;
+  onSave: (next: T) => Promise<unknown>;
+  // Reset shows while the value differs from this.
+  defaultValue?: T;
+  hint?: string;
+  error?: string | null;
+  render: (picker: { value: T; commit: (next: T) => void }) => ReactNode;
+  below?: ReactNode;
+}) {
+  const auto = useAutoSave({ saved: value, save: onSave });
+  return (
+    <SettingRow
+      id={id}
+      label={label}
+      help={help}
+      hint={hint}
+      error={error}
+      status={auto.status}
+      onUndo={auto.undo}
+      onReset={
+        defaultValue !== undefined && auto.value !== defaultValue
+          ? () => void auto.commit(defaultValue, { undoable: true })
+          : undefined
+      }
+      control={
+        <div className="w-60 max-w-full max-sm:w-full">
+          {render({ value: auto.value, commit: (v) => void auto.commit(v) })}
+        </div>
+      }
+      below={below}
+    />
+  );
+}