@saadnvd1/agent-os 0.3.836 → 0.3.839

package/components/Merge/MergeSettingsFields.tsx

@@ -1,13 +1,7 @@
 "use client";
 
-import { useId } from "react";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
+import { SelectSetting } from "@/components/Settings/settings-fields";
+import { SettingSection } from "@/components/Settings/SettingRow";
 import {
   MERGE_METHODS,
   METHOD_LABEL,
@@ -29,47 +23,6 @@ const SOURCE: Record<MergeSource, string> = {
 
 const onOff = (on: boolean) => (on ? "On" : "Off");
 
-function Field({
-  label,
-  detail,
-  value,
-  inheritLabel,
-  options,
-  onChange,
-  disabled,
-}: {
-  label: string;
-  detail: string;
-  value: string;
-  inheritLabel: string;
-  options: Array<{ value: string; label: string }>;
-  onChange: (value: string) => void;
-  disabled?: boolean;
-}) {
-  const id = useId();
-  return (
-    <div className="space-y-1.5">
-      <label htmlFor={id} className="text-sm font-medium">
-        {label}
-      </label>
-      <Select value={value} onValueChange={onChange} disabled={disabled}>
-        <SelectTrigger id={id} className="h-11 md:h-9">
-          <SelectValue />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value={INHERIT}>{inheritLabel}</SelectItem>
-          {options.map((o) => (
-            <SelectItem key={o.value} value={o.value}>
-              {o.label}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-      <p className="text-muted-foreground text-xs">{detail}</p>
-    </div>
-  );
-}
-
 const TOGGLE = [
   { value: "on", label: "On" },
   { value: "off", label: "Off" },
@@ -78,38 +31,43 @@ const TOGGLE = [
 /**
  * The merge method and the two deletions after a merge, each either set
  * here or left to what this level inherits (`inherited`, with where that
- * comes from).
+ * comes from). Each saves the moment it changes.
  */
 export function MergeSettingsFields({
+  idPrefix,
   settings,
   inherited,
   from,
   allowed,
-  disabled,
-  onChange,
+  onSave,
 }: {
+  idPrefix: string;
   settings: MergeSettings;
   inherited: MergePolicy;
   from?: Record<keyof MergePolicy, MergeSource>;
   // The repository's allowed methods, when known.
   allowed?: MergeMethod[] | null;
-  disabled?: boolean;
-  onChange: (settings: MergeSettings) => void;
+  onSave: (settings: MergeSettings) => Promise<unknown>;
 }) {
-  const inheritLabel = (key: keyof MergePolicy, shown: string) =>
-    from ? `Inherit: ${shown} (${SOURCE[from[key]]})` : `Default: ${shown}`;
+  const inheritOption = (key: keyof MergePolicy, shown: string) => ({
+    value: INHERIT,
+    label: from
+      ? `Inherit: ${shown} (${SOURCE[from[key]]})`
+      : `Default: ${shown}`,
+  });
   const set = <K extends keyof MergeSettings>(
     key: K,
     value: MergeSettings[K] | undefined
-  ) => onChange({ ...settings, [key]: value });
+  ) => onSave({ ...settings, [key]: value });
   const toggle = (key: "delete_remote_branch" | "delete_worktree") => (
-    <Field
+    <SelectSetting
+      id={`${idPrefix}-${key}`}
       label={
         key === "delete_remote_branch"
           ? "Delete the branch on origin after a merge"
           : "Delete the local worktree and branch after a merge"
       }
-      detail={
+      help={
         key === "delete_remote_branch"
           ? "Never main, master, or a branch a stacked task still targets."
           : "Never one with uncommitted work or commits the merge didn't include."
@@ -117,10 +75,10 @@ export function MergeSettingsFields({
       value={
         settings[key] === undefined ? INHERIT : settings[key] ? "on" : "off"
       }
-      inheritLabel={inheritLabel(key, onOff(inherited[key]))}
-      options={TOGGLE}
-      disabled={disabled}
-      onChange={(v) => set(key, v === INHERIT ? undefined : v === "on")}
+      options={[inheritOption(key, onOff(inherited[key])), ...TOGGLE]}
+      defaultValue={INHERIT}
+      hint=""
+      onSave={(v) => set(key, v === INHERIT ? undefined : v === "on")}
     />
   );
 
@@ -128,25 +86,29 @@ export function MergeSettingsFields({
   const refused = allowed && !allowed.includes(method);
 
   return (
-    <div className="space-y-3">
-      <Field
+    <SettingSection>
+      <SelectSetting
+        id={`${idPrefix}-method`}
         label="Merge method"
-        detail="How sign-off, Done, Land and external PRs merge. If GitHub refuses it, the merge fails and says so; it never falls back to another method."
+        help="How sign-off, Done, Land and external PRs merge. If GitHub refuses it, the merge fails and says so; it never falls back to another method."
         value={settings.method ?? INHERIT}
-        inheritLabel={inheritLabel("method", METHOD_LABEL[inherited.method])}
-        options={MERGE_METHODS.map((m) => ({
-          value: m,
-          label:
-            METHOD_LABEL[m] +
-            (allowed && !allowed.includes(m) ? " (off on GitHub)" : ""),
-        }))}
-        disabled={disabled}
-        onChange={(v) =>
+        options={[
+          inheritOption("method", METHOD_LABEL[inherited.method]),
+          ...MERGE_METHODS.map((m) => ({
+            value: m,
+            label:
+              METHOD_LABEL[m] +
+              (allowed && !allowed.includes(m) ? " (off on GitHub)" : ""),
+          })),
+        ]}
+        defaultValue={INHERIT}
+        hint=""
+        onSave={(v) =>
           set("method", v === INHERIT ? undefined : (v as MergeMethod))
         }
       />
       {refused && (
-        <p className="text-destructive text-xs">
+        <p className="text-destructive px-3 py-2 text-xs">
           This repository has &ldquo;{REPO_SETTING[method]}&rdquo; turned off on
           GitHub, so merges will be refused until it&rsquo;s on or the method
           changes.
@@ -154,6 +116,6 @@ export function MergeSettingsFields({
       )}
       {toggle("delete_remote_branch")}
       {toggle("delete_worktree")}
-    </div>
+    </SettingSection>
   );
 }

package/components/Merge/ProjectMergeSection.tsx

@@ -35,14 +35,10 @@ export function ProjectMergeSection({
           inherited={data.inherited}
           from={data.inherited.from}
           allowed={data.allowed}
-          disabled={update.isPending}
-          onChange={(s) => update.mutate(s)}
+          idPrefix={`merge-${projectId}`}
+          onSave={(s) => update.mutateAsync(s)}
         />
       )}
-      {update.isError && (
-        <p className="text-destructive text-sm">{update.error.message}</p>
-      )}
-      <p className="text-muted-foreground text-xs">Saved as you change them.</p>
       <ProjectSweepSection projectId={projectId} />
     </div>
   );

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