@saadnvd1/agent-os 0.3.833 → 0.3.839

package/components/Merge/WorktreeSweepSection.tsx

@@ -5,6 +5,8 @@ import { Input } from "@/components/ui/input";
 import { useSetSweepDays, useWorktreeSweep } from "@/data/worktree-sweep";
 import { compactTimeAgo, fromSqliteTime } from "@/lib/session-meta";
 import { formatBytes } from "@/lib/share/view";
+import { parseSettingNumber } from "@/lib/settings/parse";
+import { MAX_SWEEP_DAYS } from "@/lib/worktree-sweep/limits";
 
 // Days as the box shows them; empty means "inherit".
 function DaysInput({
@@ -19,24 +21,48 @@ function DaysInput({
   onSave: (days: number | null) => void;
 }) {
   const [text, setText] = useState(value === null ? "" : String(value));
+  const [error, setError] = useState<string | null>(null);
   const commit = () => {
     const raw = text.trim();
-    const next = raw === "" ? null : Number(raw);
-    if (next === value || (next !== null && !Number.isInteger(next))) return;
-    onSave(next);
+    let next: number | null = null;
+    if (raw !== "") {
+      const parsed = parseSettingNumber(raw, { min: 0, max: MAX_SWEEP_DAYS });
+      if ("error" in parsed) return setError(parsed.error);
+      next = parsed.value;
+    }
+    setError(null);
+    if (next !== value) onSave(next);
   };
   return (
-    <Input
-      aria-label="Days before a settled worktree is removed"
-      inputMode="numeric"
-      value={text}
-      placeholder={placeholder}
-      disabled={disabled}
-      onChange={(e) => setText(e.target.value)}
-      onBlur={commit}
-      onKeyDown={(e) => e.key === "Enter" && e.currentTarget.blur()}
-      className="h-11 w-24 text-right tabular-nums md:h-9"
-    />
+    <span className="flex flex-col gap-1">
+      <Input
+        aria-label="Days before a settled worktree is removed"
+        aria-invalid={!!error}
+        inputMode="numeric"
+        value={text}
+        placeholder={placeholder}
+        disabled={disabled}
+        onChange={(e) => {
+          setText(e.target.value);
+          setError(null);
+        }}
+        onBlur={commit}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") e.currentTarget.blur();
+          if (e.key === "Escape") {
+            setText(value === null ? "" : String(value));
+            setError(null);
+            e.currentTarget.blur();
+          }
+        }}
+        className="h-11 w-24 text-right tabular-nums md:h-9"
+      />
+      {error && (
+        <span role="alert" className="text-destructive text-xs">
+          {error}
+        </span>
+      )}
+    </span>
   );
 }
 

package/components/Models/AgentRoleCard.tsx

@@ -4,6 +4,7 @@ import { AlertTriangle } from "lucide-react";
 import type { AgentRoleView } from "@/lib/models/agent-roles-view";
 import { analystBlock, defaultAnalystLabel } from "@/lib/models/usable";
 import { cn } from "@/lib/utils";
+import { PickerSetting } from "@/components/Settings/PickerSetting";
 import { RoleModelSelect } from "./RoleModelSelect";
 
 const SOURCE: Record<string, string> = {
@@ -16,22 +17,18 @@ const SOURCE: Record<string, string> = {
   default: "Default",
 };
 
-const initial = (label: string) => label.slice(0, 1);
-
-// One role: what it does, the model it runs on, where that came from, and
+// One role as settings rows: the model it runs on, where that came from, and
 // whether the model's server answers. A role whose local model is down says so.
 export function AgentRoleCard({
   role,
   scope,
-  pending,
   onChange,
   onFallback,
 }: {
   role: AgentRoleView;
   scope: "settings" | "workspace" | "project";
-  pending: boolean;
-  onChange: (ref: string | null) => void;
-  onFallback: (ref: string | null) => void;
+  onChange: (ref: string | null) => Promise<unknown>;
+  onFallback: (ref: string | null) => Promise<unknown>;
 }) {
   const down = role.choice?.availability.state === "down";
   const analyst = role.id === "analyst";
@@ -45,77 +42,75 @@ export function AgentRoleCard({
         ? "Same as Gate review"
         : label
       : "Inherit";
+  const source = role.binding
+    ? `${SOURCE[role.binding.source] ?? role.binding.source}${role.choice?.endpoint ? ` · ${role.choice.endpoint}` : ""}`
+    : undefined;
   return (
-    <li
-      className={cn(
-        "bg-muted/40 space-y-2 rounded-xl px-3 py-3",
-        down && "ring-destructive/50 ring-1"
-      )}
-    >
-      <label htmlFor={`agent-role-${role.id}`} className="flex gap-2.5">
-        <span className="bg-accent text-primary grid h-8 w-8 shrink-0 place-items-center rounded-lg text-sm font-semibold">
-          {initial(role.label)}
-        </span>
-        <span className="min-w-0">
-          <span className="block text-sm font-medium">{role.label}</span>
-          <span className="text-muted-foreground block text-xs">
-            {role.purpose}
-          </span>
-        </span>
-      </label>
-      <RoleModelSelect
+    <>
+      <PickerSetting<string | null>
         id={`agent-role-${role.id}`}
+        label={role.label}
+        help={role.purpose}
         value={role.value}
-        inheritLabel={
-          role.value === null && role.binding
-            ? `${inheritLabel} · ${role.binding.ref.split("/").slice(1).join("/")}`
-            : inheritLabel
+        defaultValue={null}
+        hint={source}
+        error={role.error}
+        onSave={onChange}
+        render={({ value, commit }) => (
+          <RoleModelSelect
+            id={`agent-role-${role.id}`}
+            value={value}
+            inheritLabel={
+              value === null && role.binding
+                ? `${inheritLabel} · ${role.binding.ref.split("/").slice(1).join("/")}`
+                : inheritLabel
+            }
+            blockedBy={blockedBy}
+            onChange={commit}
+          />
+        )}
+        below={
+          down && (
+            <div
+              role="alert"
+              className={cn(
+                "bg-destructive/10 text-foreground ring-destructive/35 my-1 flex gap-2 rounded-lg p-2.5 text-xs ring-1"
+              )}
+            >
+              <AlertTriangle className="text-destructive mt-0.5 h-3.5 w-3.5 shrink-0" />
+              <span>
+                <b className="font-medium">
+                  This model&apos;s server isn&apos;t answering.
+                </b>{" "}
+                {role.choice?.availability.error
+                  ? `${role.choice.availability.error}. `
+                  : ""}
+                New {role.label} sessions can&apos;t start until it is back
+                {role.fallback ? ", or you start on the fallback" : ""}.
+              </span>
+            </div>
+          )
         }
-        blockedBy={blockedBy}
-        disabled={pending}
-        onChange={onChange}
       />
-      <p className="text-muted-foreground text-xs">
-        {role.error
-          ? role.error
-          : role.binding
-            ? `${SOURCE[role.binding.source] ?? role.binding.source}${role.choice?.endpoint ? ` · ${role.choice.endpoint}` : ""}`
-            : ""}
-      </p>
-      {down && (
-        <div
-          role="alert"
-          className="bg-destructive/10 text-foreground ring-destructive/35 flex gap-2 rounded-lg p-2.5 text-xs ring-1"
-        >
-          <AlertTriangle className="text-destructive mt-0.5 h-3.5 w-3.5 shrink-0" />
-          <span>
-            <b className="font-medium">
-              This model&apos;s server isn&apos;t answering.
-            </b>{" "}
-            {role.choice?.availability.error
-              ? `${role.choice.availability.error}. `
-              : ""}
-            New {role.label} sessions can&apos;t start until it is back
-            {role.fallback ? ", or you start on the fallback" : ""}.
-          </span>
-        </div>
-      )}
       {scope === "settings" && (
-        <div className="flex flex-wrap items-center gap-2">
-          <span className="text-muted-foreground text-xs">Fallback</span>
-          <div className="min-w-44 flex-1">
+        <PickerSetting<string | null>
+          id={`agent-role-fallback-${role.id}`}
+          label={`${role.label} fallback`}
+          value={role.fallback}
+          defaultValue={null}
+          onSave={onFallback}
+          render={({ value, commit }) => (
             <RoleModelSelect
               id={`agent-role-fallback-${role.id}`}
-              value={role.fallback}
+              value={value}
               inheritLabel="None (don't fall back)"
               claudeOnly={!analyst}
               blockedBy={blockedBy}
-              disabled={pending}
-              onChange={onFallback}
+              onChange={commit}
             />
-          </div>
-        </div>
+          )}
+        />
       )}
-    </li>
+    </>
   );
 }

package/components/Models/AgentRolesSection.tsx

@@ -7,6 +7,7 @@ import { useWorkspacesQuery } from "@/data/workspaces";
 import type { RoleMap } from "@/lib/models/config";
 import type { RoleScope } from "@/lib/models/agent-roles-view";
 import { cn } from "@/lib/utils";
+import { SettingSection } from "@/components/Settings/SettingRow";
 import { AgentRoleCard } from "./AgentRoleCard";
 
 const SCOPES: { id: RoleScope; label: string }[] = [
@@ -44,13 +45,13 @@ export function AgentRolesSection() {
     const roles: RoleMap = { ...saved("value") };
     if (ref) roles[modelRole as keyof RoleMap] = ref;
     else delete roles[modelRole as keyof RoleMap];
-    save.mutate({ roles });
+    return save.mutateAsync({ roles });
   };
   const setFallback = (modelRole: string, ref: string | null) => {
     const fallbacks: RoleMap = { ...saved("fallback") };
     if (ref) fallbacks[modelRole as keyof RoleMap] = ref;
     else delete fallbacks[modelRole as keyof RoleMap];
-    save.mutate({ roles: saved("value"), fallbacks });
+    return save.mutateAsync({ roles: saved("value"), fallbacks });
   };
 
   return (
@@ -111,22 +112,18 @@ export function AgentRolesSection() {
       ) : isError ? (
         <p className="text-destructive text-sm">{error.message}</p>
       ) : data ? (
-        <ul className="space-y-2.5">
+        <SettingSection>
           {data.roles.map((r) => (
             <AgentRoleCard
               key={r.id}
               role={r}
               scope={scope}
-              pending={save.isPending}
               onChange={(ref) => setRole(r.modelRole, ref)}
               onFallback={(ref) => setFallback(r.modelRole, ref)}
             />
           ))}
-        </ul>
+        </SettingSection>
       ) : null}
-      {save.isError && (
-        <p className="text-destructive text-xs">{save.error.message}</p>
-      )}
     </div>
   );
 }

package/components/Models/ModelsSection.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
+import { PriceInput } from "./PriceInput";
 import { SettingToggle } from "@/components/Settings/SettingToggle";
 import { useModelsQuery, useUpdateModels } from "@/data/models";
 import type { ModelSettings } from "@/lib/models/config";
@@ -169,28 +169,17 @@ export function ModelsSection() {
                   <td className="py-1 pr-2 font-mono">{ref}</td>
                   {PRICE_FIELDS.map((f) => (
                     <td key={f.key} className="py-1 pr-2">
-                      <Input
-                        type="number"
-                        min={0}
-                        step="0.001"
-                        defaultValue={price[f.key]}
-                        aria-label={`${ref} ${f.label}`}
-                        className="h-11 w-20 tabular-nums md:h-8"
-                        onBlur={(e) => {
-                          const v = Number(e.target.value);
-                          if (
-                            !Number.isFinite(v) ||
-                            v < 0 ||
-                            v === price[f.key]
-                          )
-                            return;
+                      <PriceInput
+                        label={`${ref} ${f.label}`}
+                        value={price[f.key]}
+                        onSave={(v) =>
                           save({
                             prices: {
                               ...saved.prices,
                               [ref]: { ...price, [f.key]: v },
                             },
-                          });
-                        }}
+                          })
+                        }
                       />
                     </td>
                   ))}

package/components/Models/PriceInput.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { useState } from "react";
+import { Input } from "@/components/ui/input";
+import { parseSettingNumber } from "@/lib/settings/parse";
+
+// A model price in $ per million tokens, saved on blur or Enter. Blank or
+// invalid stays in the box with a message and is never sent (a blank used to
+// save as $0); Esc puts the saved price back.
+export function PriceInput({
+  label,
+  value,
+  onSave,
+}: {
+  label: string;
+  value: number;
+  onSave: (price: number) => void;
+}) {
+  const [text, setText] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const revert = () => {
+    setText(null);
+    setError(null);
+  };
+  return (
+    <span className="flex flex-col gap-1">
+      <Input
+        inputMode="decimal"
+        value={text ?? String(value)}
+        aria-label={label}
+        aria-invalid={!!error}
+        className="h-11 w-20 tabular-nums md:h-8"
+        onChange={(e) => {
+          setText(e.target.value);
+          setError(null);
+        }}
+        onBlur={() => {
+          if (text === null) return;
+          const parsed = parseSettingNumber(text, { min: 0, integer: false });
+          if ("error" in parsed) return setError(parsed.error);
+          revert();
+          if (parsed.value !== value) onSave(parsed.value);
+        }}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") e.currentTarget.blur();
+          if (e.key === "Escape") {
+            revert();
+            e.currentTarget.blur();
+          }
+        }}
+      />
+      {error && (
+        <span role="alert" className="text-destructive text-xs">
+          {error}
+        </span>
+      )}
+    </span>
+  );
+}

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