@saadnvd1/agent-os 0.3.845 → 0.3.848

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,
                   ]

package/components/Schedules/SchedulesPanel.tsx

@@ -12,6 +12,7 @@ import {
   Trash2,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { ListSection } from "@/components/Settings/ListSection";
 import { Switch } from "@/components/ui/switch";
 import { useWorkspacesQuery } from "@/data/workspaces";
 import { useNotifySettings } from "@/data/notify";
@@ -93,7 +94,7 @@ function ScheduleRow({ s, onOpen }: { s: ScheduleView; onOpen: () => void }) {
         (e.key === "Enter" || e.key === " ") &&
         onOpen()
       }
-      className="border-border/60 hover:bg-foreground/[0.03] focus-visible:ring-ring flex min-h-14 cursor-pointer items-center gap-3 rounded-xl border px-3 py-2.5 outline-none focus-visible:ring-2"
+      className="hover:bg-foreground/[0.03] focus-visible:ring-ring flex min-h-14 cursor-pointer items-center gap-3 px-3 py-2.5 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">
@@ -114,7 +115,9 @@ function ScheduleRow({ s, onOpen }: { s: ScheduleView; onOpen: () => void }) {
           {s.oneOff && ` · by ${s.createdBy.name}`}
         </p>
       </div>
-      {s.lastRun && <OutcomeChip run={s.lastRun} />}
+      {s.lastRun && !s.done_at && s.lastRun.outcome !== "started" && (
+        <OutcomeChip run={s.lastRun} />
+      )}
       {!s.done_at && <EnableSwitch s={s} />}
     </div>
   );
@@ -131,14 +134,13 @@ function Group({
 }) {
   if (rows.length === 0) return null;
   return (
-    <section className="space-y-2">
-      <h4 className="text-muted-foreground px-1 text-xs font-medium">
-        {title} · {rows.length}
-      </h4>
-      {rows.map((s) => (
-        <ScheduleRow key={s.id} s={s} onOpen={() => onOpen(s.id)} />
-      ))}
-    </section>
+    <ListSection
+      title={title}
+      items={rows}
+      keyOf={(s) => s.id}
+      render={(s) => <ScheduleRow s={s} onOpen={() => onOpen(s.id)} />}
+      empty=""
+    />
   );
 }
 

package/components/Settings/AppWideLimits.tsx

@@ -19,8 +19,8 @@ export function AppWideLimits() {
   const updateAway = useUpdateAwaySettings();
   return (
     <SettingSection
-      title="All workspaces"
-      help="Stall alerts and Away mode apply across every workspace."
+      title="Alerts and Away"
+      help="Apply across every workspace."
     >
       {stall.data && (
         <NumberSetting