@saadnvd1/agent-os 0.3.836 → 0.3.845

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/SessionList/GroupShelves.tsx

@@ -17,6 +17,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { cn } from "@/lib/utils";
+import { keepRenameFocus, useRenameInput } from "./RowParts";
 import { SessionRow } from "./SessionRow";
 import { useDropZone } from "./useGroupDrag";
 
@@ -48,18 +49,18 @@ function GroupHeader({
       update.mutate({ id: group.id, name: next });
     else setName(group.name);
   };
+  const renameInput = useRenameInput(() => commit());
 
   if (renaming)
     return (
       <div className="px-2.5 pt-3.5 pb-1.5">
         <Input
-          autoFocus
+          {...renameInput}
           value={name}
           maxLength={60}
           aria-label="Group name"
           className="h-11 md:h-8"
           onChange={(e) => setName(e.target.value)}
-          onBlur={commit}
           onKeyDown={(e) => {
             if (e.key === "Enter") commit();
             if (e.key === "Escape") {
@@ -112,7 +113,11 @@ function GroupHeader({
             <MoreHorizontal className="h-4 w-4" />
           </button>
         </DropdownMenuTrigger>
-        <DropdownMenuContent align="end" className="w-44">
+        <DropdownMenuContent
+          align="end"
+          className="w-44"
+          onCloseAutoFocus={keepRenameFocus}
+        >
           <DropdownMenuItem
             className="min-h-11 md:min-h-8"
             onSelect={() => setRenaming(true)}

package/components/SessionList/OrchestratorPinRow.tsx

@@ -160,7 +160,7 @@ export const OrchestratorPinRow = memo(function OrchestratorPinRow({
         <DM.DropdownMenuContent
           align="end"
           className={ROW_MENU_CONTENT}
-          onCloseAutoFocus={keepRenameFocus(renaming)}
+          onCloseAutoFocus={keepRenameFocus}
           onClick={(e) => e.stopPropagation()}
         >
           {menu("dropdown")}
@@ -175,7 +175,7 @@ export const OrchestratorPinRow = memo(function OrchestratorPinRow({
         <CM.ContextMenuTrigger asChild>{content}</CM.ContextMenuTrigger>
         <CM.ContextMenuContent
           className={ROW_MENU_CONTENT}
-          onCloseAutoFocus={keepRenameFocus(renaming)}
+          onCloseAutoFocus={keepRenameFocus}
         >
           {menu("context")}
         </CM.ContextMenuContent>

package/components/SessionList/RowParts.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Lightbulb } from "lucide-react";
-import { useEffect, useRef, useState, type ReactNode } from "react";
+import { useCallback, useRef, useState, type ReactNode } from "react";
 import type { SidebarRow } from "@/lib/sidebar/shelves";
 import { cn } from "@/lib/utils";
 
@@ -61,12 +61,44 @@ export function CardBadge({ count }: { count: number }) {
   );
 }
 
-// For a menu's onCloseAutoFocus: while a rename is open, the input keeps the
-// focus instead of the menu's trigger getting it back.
-export const keepRenameFocus = (renaming: boolean) => (e: Event) => {
-  if (renaming) e.preventDefault();
+const RENAME_INPUT = "input[data-rename-input]";
+
+function focusRename(el: HTMLInputElement) {
+  el.focus();
+  el.select();
+}
+
+// For a menu's onCloseAutoFocus: while a rename input is open it takes the
+// focus the menu would hand back to its trigger. Reads the DOM, not state, so
+// it can't see a render that hasn't landed yet.
+export const keepRenameFocus = (e: Event) => {
+  const el = document.querySelector<HTMLInputElement>(RENAME_INPUT);
+  if (!el) return;
+  e.preventDefault();
+  focusRename(el);
 };
 
+// Props for a rename input that was opened from a menu. While the menu is
+// still on screen it traps focus, so the input waits for keepRenameFocus; a
+// blur before the input has held focus once is never a commit.
+export function useRenameInput(onDone: () => void) {
+  const hadFocus = useRef(false);
+  const ref = useCallback((el: HTMLInputElement | null) => {
+    hadFocus.current = false;
+    if (el && !document.querySelector('[role="menu"]')) focusRename(el);
+  }, []);
+  return {
+    ref,
+    "data-rename-input": "",
+    onFocus: () => {
+      hadFocus.current = true;
+    },
+    onBlur: () => {
+      if (hadFocus.current) onDone();
+    },
+  };
+}
+
 export function RowRename({
   initial,
   onDone,
@@ -75,41 +107,13 @@ export function RowRename({
   onDone: (name: string | null) => void;
 }) {
   const [value, setValue] = useState(initial);
-  const ref = useRef<HTMLInputElement>(null);
-  const hadFocus = useRef(false);
-  // The menu closing hands focus back to its trigger (RowShell stops that
-  // while renaming); keep taking it until we hold it, then leave it alone.
-  useEffect(() => {
-    const take = () => {
-      const el = ref.current;
-      if (!el || hadFocus.current) return;
-      el.focus();
-      if (document.activeElement === el) {
-        hadFocus.current = true;
-        el.select();
-      }
-    };
-    take();
-    const t = setInterval(take, 50);
-    const stop = setTimeout(() => clearInterval(t), 1000);
-    return () => {
-      clearInterval(t);
-      clearTimeout(stop);
-    };
-  }, []);
+  const input = useRenameInput(() => onDone(value.trim() || null));
   return (
     <input
-      ref={ref}
+      {...input}
       value={value}
       aria-label="Session name"
       onChange={(e) => setValue(e.target.value)}
-      onFocus={() => {
-        hadFocus.current = true;
-      }}
-      onBlur={() => {
-        // Only once we've held focus: the menu closing hands it to its trigger.
-        if (hadFocus.current) onDone(value.trim() || null);
-      }}
       onKeyDown={(e) => {
         e.stopPropagation();
         if (e.key === "Enter") onDone(value.trim() || null);

package/components/SessionList/RowRename.test.ts

@@ -2,12 +2,16 @@ import "@/components/Chat/composer/test-dom";
 import { act, createElement, useState } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { keepRenameFocus, RowRename } from "./RowParts";
+import * as DM from "@/components/ui/dropdown-menu";
+import { keepRenameFocus, RowRename, useRenameInput } from "./RowParts";
 
 (
   globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
 ).IS_REACT_ACT_ENVIRONMENT = true;
 
+// Radix dispatches CustomEvents; node's own class is rejected by jsdom.
+(globalThis as { CustomEvent?: unknown }).CustomEvent = window.CustomEvent;
+
 let root: Root;
 let host: HTMLElement;
 const input = () => host.querySelector("input")!;
@@ -28,23 +32,87 @@ function mount(onDone: (n: string | null) => void, initial = "old") {
   act(() => root.render(createElement(RowRename, { initial, onDone })));
 }
 
+// A row whose menu has a Rename item, wired like RowShell / GroupShelves.
+function Row({ group = false }: { group?: boolean }) {
+  const [renaming, setRenaming] = useState(false);
+  const [name, setName] = useState("old");
+  const rename = useRenameInput(() => setRenaming(false));
+  const menu = createElement(
+    DM.DropdownMenu,
+    { defaultOpen: true },
+    createElement(
+      DM.DropdownMenuTrigger,
+      { asChild: true },
+      createElement("button", { "aria-label": "menu" })
+    ),
+    createElement(
+      DM.DropdownMenuContent,
+      { onCloseAutoFocus: keepRenameFocus },
+      createElement(
+        DM.DropdownMenuItem,
+        { onSelect: () => setRenaming(true) },
+        "Rename"
+      )
+    )
+  );
+  return createElement(
+    "div",
+    null,
+    menu,
+    renaming
+      ? group
+        ? createElement("input", {
+            ...rename,
+            value: name,
+            onChange: (e: { target: { value: string } }) =>
+              setName(e.target.value),
+          })
+        : createElement(RowRename, {
+            initial: name,
+            onDone: () => setRenaming(false),
+          })
+      : null
+  );
+}
+
+describe.each([
+  ["session row", false],
+  ["group header", true],
+])("rename from the menu on a fresh mount (%s)", (_n, group) => {
+  it("keeps the input open, focused, and accepting typing", async () => {
+    vi.useRealTimers();
+    act(() => root.render(createElement(Row, { group })));
+    const item = [...document.querySelectorAll('[role="menuitem"]')].find(
+      (el) => el.textContent === "Rename"
+    ) as HTMLElement;
+    expect(item).toBeTruthy();
+    await act(async () => {
+      item.click();
+      await new Promise((r) => setTimeout(r, 100));
+    });
+    const el = input();
+    expect(el).toBeTruthy();
+    expect(document.activeElement).toBe(el);
+    const set = Object.getOwnPropertyDescriptor(
+      window.HTMLInputElement.prototype,
+      "value"
+    )!.set!;
+    act(() => {
+      set.call(el, "typed");
+      el.dispatchEvent(new window.Event("input", { bubbles: true }));
+    });
+    expect(input()).toBe(el);
+    expect(input().value).toBe("typed");
+  });
+});
+
 describe("RowRename", () => {
-  it("retries focus the menu stole, and ignores blur until it has it", () => {
-    const real = window.HTMLElement.prototype.focus;
-    let calls = 0;
-    // The first focus attempts land while the menu still traps focus.
-    vi.spyOn(window.HTMLElement.prototype, "focus").mockImplementation(
-      function (this: HTMLElement) {
-        if (++calls > 2) real.call(this);
-      }
-    );
+  it("ignores a blur that comes before it was ever focused", () => {
     const done = vi.fn();
     mount(done);
+    // an open menu keeps the input from taking focus on mount
     act(() => input().dispatchEvent(new window.FocusEvent("blur")));
     expect(done).not.toHaveBeenCalled();
-    act(() => vi.advanceTimersByTime(150));
-    expect(document.activeElement).toBe(input());
-    vi.restoreAllMocks();
   });
 
   it("keeps typed text across a parent re-render (list refresh)", () => {
@@ -75,7 +143,6 @@ describe("RowRename", () => {
   it("saves on Enter, cancels on Escape, saves on blur once focused", () => {
     const done = vi.fn();
     mount(done);
-    act(() => vi.advanceTimersByTime(60));
     const key = (k: string) =>
       act(() => {
         input().dispatchEvent(
@@ -92,11 +159,13 @@ describe("RowRename", () => {
 });
 
 describe("keepRenameFocus", () => {
-  it("stops the menu returning focus only while renaming", () => {
+  it("takes the focus the menu would return, only while a rename input is open", () => {
     const e = { preventDefault: vi.fn() } as unknown as Event;
-    keepRenameFocus(false)(e);
+    keepRenameFocus(e);
     expect(e.preventDefault).not.toHaveBeenCalled();
-    keepRenameFocus(true)(e);
+    mount(() => {});
+    keepRenameFocus(e);
     expect(e.preventDefault).toHaveBeenCalled();
+    expect(document.activeElement).toBe(input());
   });
 });

package/components/SessionList/RowShell.tsx

@@ -42,7 +42,6 @@ export function RowShell({
   menu,
   menuLabel,
   menuButton = true,
-  renaming = false,
 }: {
   title: string;
   tipKey?: string;
@@ -62,8 +61,6 @@ export function RowShell({
   menuLabel: string;
   // False keeps the right-click menu but hides the ⋯ (while selecting).
   menuButton?: boolean;
-  // A rename input is open: closing the menu mustn't move focus off it.
-  renaming?: boolean;
 }) {
   const content = (
     <div
@@ -118,7 +115,7 @@ export function RowShell({
           <DM.DropdownMenuContent
             align="end"
             className={ROW_MENU_CONTENT}
-            onCloseAutoFocus={keepRenameFocus(renaming)}
+            onCloseAutoFocus={keepRenameFocus}
             onClick={(e) => e.stopPropagation()}
           >
             {menu("dropdown")}
@@ -133,7 +130,7 @@ export function RowShell({
       <CM.ContextMenuTrigger asChild>{content}</CM.ContextMenuTrigger>
       <CM.ContextMenuContent
         className={ROW_MENU_CONTENT}
-        onCloseAutoFocus={keepRenameFocus(renaming)}
+        onCloseAutoFocus={keepRenameFocus}
       >
         {menu("context")}
       </CM.ContextMenuContent>

package/components/SessionList/SessionRow.tsx

@@ -127,7 +127,6 @@ export const SessionRow = memo(function SessionRow({
         menu={menu}
         menuLabel="Session actions"
         menuButton={!selecting}
-        renaming={renaming}
       >
         {renaming ? (
           <RowRename

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