@saadnvd1/agent-os 0.3.839 → 0.3.848

package/components/Merge/MergeApprovalToggle.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { canManageDevices } from "@/components/Devices";
-import { SettingToggle } from "@/components/Settings/SettingToggle";
+import { SwitchSetting } from "@/components/Settings/settings-fields";
 import {
   useDevicesQuery,
   useNetworkQuery,
@@ -11,7 +11,12 @@ import {
 // Switching it off asks for a passkey (useUpdateNetwork), and only the
 // machine itself or the tailnet may change it, like the other access
 // switches.
-export function MergeApprovalToggle() {
+export function MergeApprovalToggle({
+  overriddenBy,
+}: {
+  // While No approvals is on this switch has no effect: say so, greyed.
+  overriddenBy?: boolean;
+}) {
   const devices = useDevicesQuery(true);
   const { data, isPending, isError, error } = useNetworkQuery(true);
   const update = useUpdateNetwork();
@@ -23,17 +28,18 @@ export function MergeApprovalToggle() {
     return <p className="text-destructive text-sm">{error.message}</p>;
 
   return (
-    <div className="space-y-1">
-      <SettingToggle
-        title="Require my approval to merge sensitive or large PRs"
-        detail="PRs touching CI, deploys, secrets, build scripts, agent config or AgentOS's security code, or too big to review whole, wait for you to approve them with your passkey. Off, they merge through the usual gates, and a big PR is reviewed in parts."
-        checked={data.mergeApprovals.on}
-        locked={data.mergeApprovals.locked || !canManage}
-        onChange={(mergeApprovals) => update.mutate({ mergeApprovals })}
-      />
-      {update.error && (
-        <p className="text-destructive text-xs">{update.error.message}</p>
-      )}
-    </div>
+    <SwitchSetting
+      id="merge-approvals"
+      label="Require my approval to merge sensitive or large PRs"
+      help={
+        overriddenBy
+          ? "Not in effect while No approvals is on: every PR merges through the usual gates."
+          : "PRs touching CI, deploys, secrets, build scripts, agent config or AgentOS's security code, or too big to review whole, wait for you to approve them with your passkey. Off, they merge through the usual gates, and a big PR is reviewed in parts."
+      }
+      disabled={overriddenBy}
+      checked={data.mergeApprovals.on}
+      locked={data.mergeApprovals.locked || !canManage}
+      onSave={(mergeApprovals) => update.mutateAsync({ mergeApprovals })}
+    />
   );
 }

package/components/Merge/MergeSettingsFields.tsx

@@ -77,7 +77,6 @@ export function MergeSettingsFields({
       }
       options={[inheritOption(key, onOff(inherited[key])), ...TOGGLE]}
       defaultValue={INHERIT}
-      hint=""
       onSave={(v) => set(key, v === INHERIT ? undefined : v === "on")}
     />
   );
@@ -102,7 +101,6 @@ export function MergeSettingsFields({
           })),
         ]}
         defaultValue={INHERIT}
-        hint=""
         onSave={(v) =>
           set("method", v === INHERIT ? undefined : (v as MergeMethod))
         }

package/components/Merge/WorktreeSweepSection.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import { useState } from "react";
+import { NumberSetting } from "@/components/Settings/settings-fields";
+import { SettingSection } from "@/components/Settings/SettingRow";
 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";
 
@@ -66,19 +66,6 @@ function DaysInput({
   );
 }
 
-function LastRun() {
-  const { data } = useWorktreeSweep();
-  const last = data?.runs.find((r) => r.finishedAt && !r.dryRun);
-  if (!last) return null;
-  return (
-    <p className="text-muted-foreground text-xs">
-      Last run {compactTimeAgo(fromSqliteTime(last.finishedAt!))}: removed{" "}
-      {last.removed}, {formatBytes(last.freedBytes)} freed, {last.skipped}{" "}
-      skipped. Details in Health &gt; Clean-up.
-    </p>
-  );
-}
-
 // How long a settled worktree stays on disk. The branch and the conversation
 // stay; restoring the session rebuilds it.
 export function GlobalSweepSection() {
@@ -86,27 +73,25 @@ export function GlobalSweepSection() {
   const save = useSetSweepDays();
   return (
     <div className="space-y-2">
-      <h3 className="text-sm font-medium">Worktree clean-up</h3>
-      <p className="text-muted-foreground text-sm">
-        Remove the worktree of a merged, dropped, done or archived session this
-        many days after it settled, when nothing in it would be lost. 0 turns it
-        off.
-      </p>
       {isPending && (
         <div className="bg-muted/40 h-11 animate-pulse rounded-lg" />
       )}
       {isError && <p className="text-destructive text-sm">{error.message}</p>}
       {data && (
-        <div className="flex items-center gap-3">
-          <DaysInput
-            key={data.days ?? "none"}
-            value={data.days}
-            placeholder={String(data.defaultDays)}
-            disabled={save.isPending}
-            onSave={(days) => save.mutate({ days })}
+        <SettingSection title="Worktree clean-up">
+          <NumberSetting
+            id="sweep-days"
+            label="Remove settled worktrees after"
+            help="A merged, dropped, done or archived session's worktree goes this long after it settled, when nothing in it would be lost."
+            value={data.days ?? data.defaultDays}
+            defaultValue={data.defaultDays}
+            min={1}
+            max={MAX_SWEEP_DAYS}
+            unit="days"
+            optional={{ off: 0, on: data.defaultDays }}
+            onSave={(days) => save.mutateAsync({ days })}
           />
-          <span className="text-muted-foreground text-sm">days</span>
-        </div>
+        </SettingSection>
       )}
       {data && data.overrides.length > 0 && (
         <p className="text-muted-foreground text-xs">
@@ -114,10 +99,6 @@ export function GlobalSweepSection() {
           {data.overrides.map((o) => `${o.name} (${o.days})`).join(", ")}
         </p>
       )}
-      {save.isError && (
-        <p className="text-destructive text-sm">{save.error.message}</p>
-      )}
-      <LastRun />
     </div>
   );
 }

package/components/Models/AgentRoleCard.tsx

@@ -32,9 +32,8 @@ export function AgentRoleCard({
 }) {
   const down = role.choice?.availability.state === "down";
   const analyst = role.id === "analyst";
-  const label = analyst
-    ? defaultAnalystLabel(role.default, [])
-    : `Default (${role.default.split("/").slice(1).join("/")})`;
+  const modelId = (ref: string) => ref.split("/").slice(1).join("/");
+  const label = analyst ? defaultAnalystLabel(role.default, []) : "Default";
   const blockedBy = analyst ? analystBlock : undefined;
   const inheritLabel =
     scope === "settings"
@@ -60,10 +59,11 @@ export function AgentRoleCard({
           <RoleModelSelect
             id={`agent-role-${role.id}`}
             value={value}
-            inheritLabel={
-              value === null && role.binding
-                ? `${inheritLabel} · ${role.binding.ref.split("/").slice(1).join("/")}`
-                : inheritLabel
+            inheritLabel={inheritLabel}
+            inheritDetail={
+              scope === "settings" && role.modelRole === "advise" && !analyst
+                ? undefined
+                : modelId(role.binding?.ref ?? role.default)
             }
             blockedBy={blockedBy}
             onChange={commit}

package/components/Models/ModelSelect.tsx

@@ -9,6 +9,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { TWO_LINE_TRIGGER, ValueLabel } from "@/components/Settings/ValueLabel";
 import { modelChoices } from "@/data/models";
 import type { EffectiveModels } from "@/lib/models/config";
 
@@ -21,6 +22,7 @@ export function ModelSelect({
   value,
   effective,
   inheritLabel,
+  inheritDetail,
   disabled,
   onChange,
 }: {
@@ -28,6 +30,7 @@ export function ModelSelect({
   value: string | null;
   effective: EffectiveModels | undefined;
   inheritLabel?: string;
+  inheritDetail?: string;
   disabled?: boolean;
   onChange: (ref: string | null) => void;
 }) {
@@ -41,12 +44,20 @@ export function ModelSelect({
       onValueChange={(v) => onChange(v === INHERIT ? null : v)}
       disabled={disabled}
     >
-      <SelectTrigger id={id} className="h-11 md:h-9">
-        <SelectValue />
+      <SelectTrigger id={id} className={TWO_LINE_TRIGGER}>
+        <SelectValue>
+          {value === null && inheritLabel ? (
+            <ValueLabel label={inheritLabel} detail={inheritDetail} />
+          ) : (
+            (choices.find((c) => c.ref === value)?.label ?? value)
+          )}
+        </SelectValue>
       </SelectTrigger>
       <SelectContent>
         {inheritLabel && (
-          <SelectItem value={INHERIT}>{inheritLabel}</SelectItem>
+          <SelectItem value={INHERIT}>
+            <ValueLabel label={inheritLabel} detail={inheritDetail} />
+          </SelectItem>
         )}
         {missing && <SelectItem value={value}>{value}</SelectItem>}
         {groups.map((g) => (

package/components/Models/ModelsSection.tsx

@@ -2,7 +2,10 @@
 
 import { Button } from "@/components/ui/button";
 import { PriceInput } from "./PriceInput";
-import { SettingToggle } from "@/components/Settings/SettingToggle";
+import { PickerSetting } from "@/components/Settings/PickerSetting";
+import { ScrollTable } from "@/components/Settings/ListSection";
+import { SettingSection } from "@/components/Settings/SettingRow";
+import { SwitchSetting } from "@/components/Settings/settings-fields";
 import { useModelsQuery, useUpdateModels } from "@/data/models";
 import type { ModelSettings } from "@/lib/models/config";
 import {
@@ -63,42 +66,42 @@ export function ModelsSection() {
           and Supervisor are in Agent roles. A workspace can set its own
           (Settings › Workspaces), and a task its own when it starts or resumes.
         </p>
-        <ul className="space-y-2">
+        <SettingSection>
           {INTERNAL_MODEL_ROLES(MODEL_ROLES).map((role) => (
-            <li
+            <PickerSetting<string | null>
               key={role}
-              className="bg-muted/40 space-y-1.5 rounded-lg px-3 py-2.5"
-            >
-              <label htmlFor={`role-${role}`} className="block">
-                <span className="text-sm font-medium">
-                  {ROLE_LABELS[role].label}
-                </span>
-                <span className="text-muted-foreground block text-xs">
-                  {ROLE_LABELS[role].hint}
-                </span>
-              </label>
-              <ModelSelect
-                id={`role-${role}`}
-                value={saved.roles?.[role] ?? null}
-                effective={effective}
-                inheritLabel={`Default (${defaults[role].split("/").slice(1).join("/")})`}
-                disabled={update.isPending}
-                onChange={(ref) => {
-                  const roles = { ...saved.roles };
-                  if (ref) roles[role] = ref;
-                  else delete roles[role];
-                  save({ roles });
-                }}
-              />
-            </li>
+              id={`role-${role}`}
+              label={ROLE_LABELS[role].label}
+              help={ROLE_LABELS[role].hint}
+              value={saved.roles?.[role] ?? null}
+              defaultValue={null}
+              resetLabel="default"
+              onSave={(ref) => {
+                const roles = { ...saved.roles };
+                if (ref) roles[role] = ref;
+                else delete roles[role];
+                return update.mutateAsync({ ...saved, roles });
+              }}
+              render={({ value, commit }) => (
+                <ModelSelect
+                  id={`role-${role}`}
+                  value={value}
+                  effective={effective}
+                  inheritLabel="Default"
+                  inheritDetail={defaults[role].split("/").slice(1).join("/")}
+                  onChange={commit}
+                />
+              )}
+            />
           ))}
-        </ul>
-        <SettingToggle
-          title="Tasks plan first"
-          detail="A chat task's first turn writes its plan to .agentos/plan.md on the planning model; the implementation model then follows it in the same conversation."
-          checked={effective.planStep}
-          onChange={(planStep) => save({ planStep })}
-        />
+          <SwitchSetting
+            id="plan-step"
+            label="Tasks plan first"
+            help="A chat task's first turn writes its plan on the planning model; the implementation model then follows it in the same conversation."
+            checked={effective.planStep}
+            onSave={(planStep) => update.mutateAsync({ ...saved, planStep })}
+          />
+        </SettingSection>
       </section>
 
       <SubagentModels
@@ -151,7 +154,7 @@ export function ModelsSection() {
           Dollars per million tokens, for Usage&apos;s estimates. Claude&apos;s
           are API list prices: the plan itself is measured by its window.
         </p>
-        <div className="overflow-x-auto">
+        <ScrollTable>
           <table className="w-full text-xs">
             <thead className="text-muted-foreground text-left">
               <tr>
@@ -166,7 +169,9 @@ export function ModelsSection() {
             <tbody>
               {Object.entries(effective.prices).map(([ref, price]) => (
                 <tr key={ref} className="border-border border-t">
-                  <td className="py-1 pr-2 font-mono">{ref}</td>
+                  <td className="py-1 pr-2 font-mono whitespace-nowrap">
+                    {ref}
+                  </td>
                   {PRICE_FIELDS.map((f) => (
                     <td key={f.key} className="py-1 pr-2">
                       <PriceInput
@@ -187,7 +192,7 @@ export function ModelsSection() {
               ))}
             </tbody>
           </table>
-        </div>
+        </ScrollTable>
       </section>
       {update.isError && (
         <p className="text-destructive text-sm">{update.error.message}</p>

package/components/Models/ProviderCard.tsx

@@ -28,7 +28,7 @@ const KINDS: {
 }[] = [
   { value: "tokenvault", label: "tokenvault", a: "Project", b: "Description" },
   { value: "keychain", label: "macOS Keychain", a: "Service", b: "Account" },
-  { value: "env", label: "Environment variable", a: "Variable (…_API_KEY)" },
+  { value: "env", label: "Environment variable", a: "Variable name" },
 ];
 
 function refFields(ref: SecretRef | undefined): [string, string] {

package/components/Models/RoleModelSelect.tsx

@@ -11,6 +11,7 @@ import {
 } from "@/components/ui/select";
 import { useModelChoices } from "@/data/models";
 import type { ModelChoice } from "@/lib/models/catalog";
+import { TWO_LINE_TRIGGER, ValueLabel } from "@/components/Settings/ValueLabel";
 import { AvailabilityDot, LocalityBadge } from "./ModelBadges";
 
 const INHERIT = "__inherit";
@@ -41,6 +42,7 @@ export function RoleModelSelect({
   id,
   value,
   inheritLabel,
+  inheritDetail,
   claudeOnly,
   gateOnly,
   blockedBy,
@@ -50,6 +52,8 @@ export function RoleModelSelect({
   id?: string;
   value: string | null;
   inheritLabel: string;
+  // What the inherited choice resolves to (a model id), shown under it.
+  inheritDetail?: string;
   claudeOnly?: boolean;
   // Only models that can serve a merge gate are selectable.
   gateOnly?: boolean;
@@ -71,13 +75,21 @@ export function RoleModelSelect({
       onValueChange={(v) => onChange(v === INHERIT ? null : v)}
       disabled={disabled}
     >
-      <SelectTrigger id={id} className="h-11 md:h-9">
+      <SelectTrigger id={id} className={TWO_LINE_TRIGGER}>
         <SelectValue>
-          {current ? <Row choice={current} /> : (value ?? inheritLabel)}
+          {current ? (
+            <Row choice={current} />
+          ) : value ? (
+            <ValueLabel label={value} />
+          ) : (
+            <ValueLabel label={inheritLabel} detail={inheritDetail} />
+          )}
         </SelectValue>
       </SelectTrigger>
       <SelectContent>
-        <SelectItem value={INHERIT}>{inheritLabel}</SelectItem>
+        <SelectItem value={INHERIT}>
+          <ValueLabel label={inheritLabel} detail={inheritDetail} />
+        </SelectItem>
         {value && !current && <SelectItem value={value}>{value}</SelectItem>}
         {groups.map((g) => (
           <SelectGroup key={g}>

package/components/Models/SubagentModels.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { SettingRow, SettingSection } from "@/components/Settings/SettingRow";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import {
@@ -46,58 +47,72 @@ export function SubagentModels({
         on Haiku, anything that plans, decides or reviews on Sonnet. A new
         session picks a change up.
       </p>
-      <ul className="space-y-2">
+      <SettingSection>
         {Object.entries(rows).map(([type, tier]) => {
           const custom = !(type in DEFAULT_SUBAGENT_MODELS);
+          const changed = saved?.[type] !== undefined;
           return (
-            <li
+            <SettingRow
               key={type}
-              className="bg-muted/40 flex items-center gap-2 rounded-lg px-3 py-2"
-            >
-              <span className="min-w-0 flex-1 truncate font-mono text-sm">
-                {type}
-              </span>
-              <Select
-                value={tier}
-                disabled={disabled}
-                onValueChange={(v) => set(type, v as SubagentTier)}
-              >
-                <SelectTrigger
-                  aria-label={`Model for ${type}`}
-                  className="min-h-11 w-44"
-                >
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {SUBAGENT_TIERS.map((t) => (
-                    <SelectItem
-                      key={t}
-                      value={t}
-                      disabled={t === "haiku" && mustNotBeHaiku(type)}
+              id={`subagent-${type}`}
+              label={type}
+              resetLabel={
+                custom ? undefined : TIER_LABELS[DEFAULT_SUBAGENT_MODELS[type]]
+              }
+              onReset={
+                !custom && changed
+                  ? () => {
+                      const next = { ...saved };
+                      delete next[type];
+                      onChange(next);
+                    }
+                  : undefined
+              }
+              control={
+                <>
+                  <Select
+                    value={tier}
+                    disabled={disabled}
+                    onValueChange={(v) => set(type, v as SubagentTier)}
+                  >
+                    <SelectTrigger
+                      aria-label={`Model for ${type}`}
+                      className="min-h-11 w-40 md:min-h-9"
                     >
-                      {TIER_LABELS[t]}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              {(custom || saved?.[type] !== undefined) && (
-                <Button
-                  variant="ghost"
-                  className="min-h-11"
-                  disabled={disabled}
-                  onClick={() => {
-                    const next = { ...saved };
-                    delete next[type];
-                    onChange(next);
-                  }}
-                >
-                  {custom ? "Remove" : "Reset"}
-                </Button>
-              )}
-            </li>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {SUBAGENT_TIERS.map((t) => (
+                        <SelectItem
+                          key={t}
+                          value={t}
+                          disabled={t === "haiku" && mustNotBeHaiku(type)}
+                        >
+                          {TIER_LABELS[t]}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  {custom && (
+                    <Button
+                      variant="ghost"
+                      className="min-h-11 md:min-h-9"
+                      disabled={disabled}
+                      onClick={() => {
+                        const next = { ...saved };
+                        delete next[type];
+                        onChange(next);
+                      }}
+                    >
+                      Remove
+                    </Button>
+                  )}
+                </>
+              }
+            />
           );
         })}
-      </ul>
+      </SettingSection>
       <div className="flex gap-2">
         <Input
           value={adding}

package/components/PhoneNotify/PhoneNotifyForm.tsx

@@ -22,32 +22,25 @@ export function PhoneNotifyForm() {
   return (
     <div className="space-y-5">
       <p className="text-muted-foreground text-sm">
-        Your phone gets a failed schedule run, and anything an agent sends with{" "}
-        <code className="font-mono text-xs">aos notify</code>. At most one a
-        minute from each; the rest wait and go together.
+        Your phone gets a failed schedule run and anything an agent sends you.
+        At most one a minute from each; the rest wait and go together.
       </p>
 
       <div className="bg-foreground/[0.03] rounded-lg px-3 py-2.5 text-sm">
         {settings.active === "command" ? (
           <>
-            Sending through{" "}
-            <code className="font-mono text-xs">AGENTOS_NOTIFY_CMD</code>, set
-            on this machine. It takes priority over Telegram below.
+            Sending through a command set up on this machine. It takes priority
+            over Telegram below.
           </>
         ) : settings.active === "telegram" ? (
           <>Sending through the Telegram bot below.</>
         ) : (
-          <>
-            Not set up. Add a Telegram bot below, or set{" "}
-            <code className="font-mono text-xs">AGENTOS_NOTIFY_CMD</code> to a
-            command that reads the message on stdin.
-          </>
+          <>Not set up. Add a Telegram bot below.</>
         )}
       </div>
 
       <div className="space-y-2">
-        <p className="label-mono text-muted-foreground">Telegram</p>
-        <SettingSection>
+        <SettingSection title="Telegram">
           <TextSetting
             id="tg-chat"
             label="Chat id"

package/components/Recipes/RecipesPanel.tsx

@@ -3,6 +3,7 @@
 import { useState } from "react";
 import { useSnapshot } from "valtio";
 import { ArrowLeft, ChefHat, Plus } from "lucide-react";
+import { ListSection } from "@/components/Settings/ListSection";
 import { Button } from "@/components/ui/button";
 import {
   useRecipeDraft,
@@ -30,7 +31,7 @@ function Row({ r, onOpen }: { r: RecipeView; onOpen: () => void }) {
     <button
       type="button"
       onClick={onOpen}
-      className="border-border/60 hover:bg-foreground/[0.03] focus-visible:ring-ring flex min-h-14 w-full items-center gap-3 rounded-xl border px-3 py-2.5 text-left outline-none focus-visible:ring-2"
+      className="hover:bg-foreground/[0.03] focus-visible:ring-ring flex min-h-14 w-full items-center gap-3 px-3 py-2.5 text-left outline-none focus-visible:ring-2 focus-visible:ring-inset"
     >
       <div className="min-w-0 flex-1 space-y-0.5">
         <div className="flex min-w-0 items-center gap-2">
@@ -40,11 +41,15 @@ function Row({ r, onOpen }: { r: RecipeView; onOpen: () => void }) {
           </span>
         </div>
         <p className="text-muted-foreground truncate text-xs">
-          {r.timer
-            ? `${r.timer.description}${r.timer.enabled && r.timer.nextRunAt ? ` · next ${formatRunTime(r.timer.nextRunAt, r.timer.timezone)}` : ""}`
-            : "No timer"}
-          {last && ` · ${formatRunTime(sqlMs(last.created_at))}`}
-          {r.totals.costUsd > 0 && ` · ${money(r.totals.costUsd)} total`}
+          {[
+            r.timer
+              ? `${r.timer.description}${r.timer.enabled && r.timer.nextRunAt ? ` · next ${formatRunTime(r.timer.nextRunAt, r.timer.timezone)}` : ""}`
+              : null,
+            last ? formatRunTime(sqlMs(last.created_at)) : null,
+            r.totals.costUsd > 0 ? `${money(r.totals.costUsd)} total` : null,
+          ]
+            .filter(Boolean)
+            .join(" · ")}
         </p>
       </div>
       {last && <RunChip status={last.status} />}
@@ -185,9 +190,15 @@ export function RecipesPanel() {
               </p>
             </div>
           )}
-          {recipes.map((r) => (
-            <Row key={r.id} r={r} onOpen={() => toDetail(r.id)} />
-          ))}
+          {recipes.length > 0 && (
+            <ListSection
+              title="Saved"
+              items={recipes}
+              keyOf={(r) => r.id}
+              render={(r) => <Row r={r} onOpen={() => toDetail(r.id)} />}
+              empty=""
+            />
+          )}
         </div>
       )}
       {view.mode === "detail" && (

package/components/Recipes/RunHistory.tsx

@@ -52,7 +52,7 @@ export function RunHistory({ runs }: { runs: RecipeRun[] }) {
                 </p>
                 <p className="text-muted-foreground truncate text-xs">
                   {[
-                    triggerLabel(r),
+                    r.trigger === "manual" ? null : triggerLabel(r),
                     r.pr_number ? `PR #${r.pr_number}` : null,
                     stats,
                   ]