@saadnvd1/agent-os 0.3.839 → 0.3.845

package/app/api/health/route.ts

@@ -1,9 +1,11 @@
 import { NextResponse } from "next/server";
+import { buildId } from "@/lib/build";
 
 const startedAt = new Date(Date.now() - process.uptime() * 1000).toISOString();
 
 // GET /api/health - the server is up and answering; when it started, so a
-// deploy check can tell it restarted after a merge (lib/away/deploy.ts).
+// deploy check can tell it restarted after a merge, and the build it runs, so
+// a merge is only "deployed" when that build contains it (lib/away/deploy.ts).
 export function GET() {
-  return NextResponse.json({ ok: true, startedAt });
+  return NextResponse.json({ ok: true, startedAt, build: buildId() });
 }

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/SettingRow.tsx

@@ -8,6 +8,14 @@ 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 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
@@ -40,10 +48,8 @@ export function SettingRow({
   onReset?: () => void;
   below?: ReactNode;
 }) {
-  const query = useContext(SettingsQueryContext).trim().toLowerCase();
-  const haystack = `${label} ${help ?? ""}`.toLowerCase();
-  if (query && !query.split(/\s+/).every((w) => haystack.includes(w)))
-    return null;
+  const query = useContext(SettingsQueryContext);
+  if (!matchesQuery(query, label, help)) return null;
   return (
     <div
       data-setting={id}
@@ -65,47 +71,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"
+              >
+                Reset
+              </button>
+            )}
+          </span>
+        </div>
+      )}
       {below && <div className="col-span-2">{below}</div>}
     </div>
   );
@@ -129,3 +137,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 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/settings-fields.tsx

@@ -58,16 +58,16 @@ export function SwitchSetting({
       status={auto.status}
       onUndo={auto.undo}
       hint={
-        defaultValue === undefined
+        defaultValue === undefined || auto.value === defaultValue
           ? undefined
-          : `default ${defaultValue ? "on" : "off"}`
+          : `Default: ${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}
@@ -150,12 +150,8 @@ export function NumberSetting({
   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}`
-        }`
+    error === null && auto.value !== defaultValue
+      ? `Default: ${defOff ? "off" : `${defaultValue / scale}${short}`}`
       : undefined;
 
   const finish = () => {
@@ -277,7 +273,12 @@ export function SelectSetting({
       help={help}
       status={auto.status}
       onUndo={auto.undo}
-      hint={hint ?? (def ? `default ${def.label}` : undefined)}
+      hint={
+        hint ??
+        (def && auto.value !== defaultValue
+          ? `Default: ${def.label}`
+          : undefined)
+      }
       onReset={
         defaultValue !== undefined && auto.value !== defaultValue
           ? () => void auto.commit(defaultValue, { undoable: true })

package/components/Workspaces/HqFolderForm.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { SettingSection } from "@/components/Settings/SettingRow";
+import { SettingBlock } from "@/components/Settings/SettingRow";
 import { TextSetting } from "@/components/Settings/settings-fields";
 import { useSetWorkspaceHq, useWorkspaceHqQuery } from "@/data/session-logs";
 
@@ -13,26 +13,28 @@ export function HqFolderForm({ workspaceId }: { workspaceId: string }) {
   const save = useSetWorkspaceHq(workspaceId);
 
   if (isPending)
-    return <div className="bg-muted/60 h-11 animate-pulse rounded-md" />;
+    return <div className="bg-muted/60 m-3 h-11 animate-pulse rounded-md" />;
   if (isError)
-    return <p className="text-destructive text-xs">{error.message}</p>;
+    return (
+      <SettingBlock id={`hq-folder-${workspaceId}`} label="HQ folder">
+        <p className="text-destructive text-xs">{error.message}</p>
+      </SettingBlock>
+    );
 
   return (
-    <SettingSection>
-      <TextSetting
-        id={`hq-folder-${workspaceId}`}
-        label="HQ folder"
-        help={`Session logs go to docs/sessions/<project>/ in this repo, one commit per file. ${
-          data.hq?.visibility === "private"
-            ? "The repo is private, so each commit is pushed."
-            : data.hq
-              ? "Commits stay local: the repo isn't a private GitHub repository."
-              : "It must be a private git repo outside the workspace's projects."
-        }`}
-        placeholder="~/path/to/a/private/git/repo"
-        value={data.hq?.folder ?? ""}
-        onSave={(folder) => save.mutateAsync(folder)}
-      />
-    </SettingSection>
+    <TextSetting
+      id={`hq-folder-${workspaceId}`}
+      label="HQ folder"
+      help={`Session logs go to docs/sessions/<project>/ in this repo, one commit per file. ${
+        data.hq?.visibility === "private"
+          ? "The repo is private, so each commit is pushed."
+          : data.hq
+            ? "Commits stay local: the repo isn't a private GitHub repository."
+            : "It must be a private git repo outside the workspace's projects."
+      }`}
+      placeholder="~/path/to/a/private/git/repo"
+      value={data.hq?.folder ?? ""}
+      onSave={(folder) => save.mutateAsync(folder)}
+    />
   );
 }