@saadnvd1/agent-os 0.3.470 → 0.3.472

package/components/Models/ModelSelect.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { modelChoices } from "@/data/models";
+import type { EffectiveModels } from "@/lib/models/config";
+
+const INHERIT = "__inherit";
+
+// A "provider/model" picker over every enabled provider's models, grouped
+// by provider. With `inheritLabel`, a first option that clears it.
+export function ModelSelect({
+  id,
+  value,
+  effective,
+  inheritLabel,
+  disabled,
+  onChange,
+}: {
+  id?: string;
+  value: string | null;
+  effective: EffectiveModels | undefined;
+  inheritLabel?: string;
+  disabled?: boolean;
+  onChange: (ref: string | null) => void;
+}) {
+  const choices = modelChoices(effective);
+  const groups = [...new Set(choices.map((c) => c.provider))];
+  // A saved model no provider lists any more still shows as itself.
+  const missing = value && !choices.some((c) => c.ref === value);
+  return (
+    <Select
+      value={value ?? INHERIT}
+      onValueChange={(v) => onChange(v === INHERIT ? null : v)}
+      disabled={disabled}
+    >
+      <SelectTrigger id={id} className="h-11 md:h-9">
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        {inheritLabel && (
+          <SelectItem value={INHERIT}>{inheritLabel}</SelectItem>
+        )}
+        {missing && <SelectItem value={value}>{value}</SelectItem>}
+        {groups.map((g) => (
+          <SelectGroup key={g}>
+            <SelectLabel>{g}</SelectLabel>
+            {choices
+              .filter((c) => c.provider === g)
+              .map((c) => (
+                <SelectItem key={c.ref} value={c.ref}>
+                  {c.label}
+                </SelectItem>
+              ))}
+          </SelectGroup>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}

package/components/Models/ModelsSection.tsx

@@ -0,0 +1,199 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { SettingToggle } from "@/components/Settings/SettingToggle";
+import { useModelsQuery, useUpdateModels } from "@/data/models";
+import type { ModelSettings } from "@/lib/models/config";
+import {
+  PROVIDER_PRESETS,
+  type ModelPrice,
+  type ModelProvider,
+} from "@/lib/models/providers";
+import { MODEL_ROLES, ROLE_LABELS } from "@/lib/models/roles";
+import { ModelSelect } from "./ModelSelect";
+import { ProviderCard } from "./ProviderCard";
+
+const PRICE_FIELDS: { key: keyof ModelPrice; label: string }[] = [
+  { key: "input", label: "Input" },
+  { key: "cacheWrite", label: "Cache write" },
+  { key: "cacheRead", label: "Cache read" },
+  { key: "output", label: "Output" },
+];
+
+// Settings > Models: the model each kind of work runs on, the providers
+// they can come from, and the prices usage is estimated at.
+export function ModelsSection() {
+  const { data, isPending, isError, error } = useModelsQuery();
+  const update = useUpdateModels();
+  if (isPending)
+    return <div className="bg-muted/40 h-64 animate-pulse rounded-lg" />;
+  if (isError)
+    return <p className="text-destructive text-sm">{error.message}</p>;
+  const { saved, effective, defaults } = data;
+  const save = (patch: Partial<ModelSettings>) =>
+    update.mutate({ ...saved, ...patch });
+
+  const presetIds = new Set(PROVIDER_PRESETS.map((p) => p.id));
+  const saveProvider = (p: ModelProvider) =>
+    save({
+      providers: [...(saved.providers ?? []).filter((x) => x.id !== p.id), p],
+    });
+  const addProvider = () => {
+    const taken = new Set(effective.providers.map((p) => p.id));
+    let n = 1;
+    while (taken.has(`custom-${n}`)) n++;
+    saveProvider({
+      id: `custom-${n}`,
+      label: `Custom ${n}`,
+      api: "anthropic",
+      authHeader: "bearer",
+      models: [],
+      enabled: false,
+    });
+  };
+
+  return (
+    <div className="space-y-6">
+      <section className="space-y-2">
+        <p className="text-muted-foreground text-sm">
+          Which model each kind of work runs on. A workspace can set its own
+          (Settings › Workspaces), and a task its own when it starts or resumes.
+        </p>
+        <ul className="space-y-2">
+          {MODEL_ROLES.map((role) => (
+            <li
+              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>
+          ))}
+        </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 })}
+        />
+      </section>
+
+      <section className="space-y-2">
+        <h3 className="text-sm font-medium">Providers</h3>
+        <p className="text-muted-foreground text-xs">
+          Claude stays the default; another provider runs only where a role or a
+          task picks it. Keys are never stored here: only where to read them
+          from.
+        </p>
+        <ul className="space-y-2">
+          {effective.providers.map((p) => (
+            <ProviderCard
+              key={`${p.id}-${JSON.stringify(p)}`}
+              provider={p}
+              saving={update.isPending}
+              onSave={saveProvider}
+              onRemove={
+                presetIds.has(p.id)
+                  ? undefined
+                  : () =>
+                      save({
+                        providers: (saved.providers ?? []).filter(
+                          (x) => x.id !== p.id
+                        ),
+                      })
+              }
+            />
+          ))}
+        </ul>
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-11 md:h-8"
+          onClick={addProvider}
+          disabled={update.isPending}
+        >
+          Add provider
+        </Button>
+      </section>
+
+      <section className="space-y-2">
+        <h3 className="text-sm font-medium">Prices</h3>
+        <p className="text-muted-foreground text-xs">
+          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">
+          <table className="w-full text-xs">
+            <thead className="text-muted-foreground text-left">
+              <tr>
+                <th className="py-1 pr-2 font-normal">Model</th>
+                {PRICE_FIELDS.map((f) => (
+                  <th key={f.key} className="py-1 pr-2 font-normal">
+                    {f.label}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <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>
+                  {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;
+                          save({
+                            prices: {
+                              ...saved.prices,
+                              [ref]: { ...price, [f.key]: v },
+                            },
+                          });
+                        }}
+                      />
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </section>
+      {update.isError && (
+        <p className="text-destructive text-sm">{update.error.message}</p>
+      )}
+    </div>
+  );
+}

package/components/Models/ProviderCard.tsx

@@ -0,0 +1,271 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useTestProvider } from "@/data/models";
+import {
+  describeSecretRef,
+  type ModelProvider,
+  type SecretRef,
+} from "@/lib/models/providers";
+import { ANTHROPIC } from "@/lib/models/roles";
+import { cn } from "@/lib/utils";
+
+const KINDS: {
+  value: SecretRef["kind"];
+  label: string;
+  a: string;
+  b?: string;
+}[] = [
+  { 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)" },
+];
+
+function refFields(ref: SecretRef | undefined): [string, string] {
+  if (!ref) return ["", ""];
+  if (ref.kind === "tokenvault") return [ref.project, ref.desc ?? ""];
+  if (ref.kind === "keychain") return [ref.service, ref.account ?? ""];
+  return [ref.name, ""];
+}
+
+function toRef(
+  kind: SecretRef["kind"],
+  a: string,
+  b: string
+): SecretRef | undefined {
+  const x = a.trim();
+  const y = b.trim() || undefined;
+  if (!x) return undefined;
+  if (kind === "tokenvault") return { kind, project: x, desc: y };
+  if (kind === "keychain") return { kind, service: x, account: y };
+  return { kind, name: x };
+}
+
+const list = (s: string) =>
+  s
+    .split(/[\s,]+/)
+    .map((x) => x.trim())
+    .filter(Boolean);
+
+// One provider: on or off, its endpoint, where its key lives (never the
+// key), its models and Claude Code's tiers mapped onto them, and a test.
+export function ProviderCard({
+  provider,
+  saving,
+  onSave,
+  onRemove,
+}: {
+  provider: ModelProvider;
+  saving: boolean;
+  onSave: (p: ModelProvider) => void;
+  onRemove?: () => void;
+}) {
+  const builtIn = provider.id === ANTHROPIC;
+  const [open, setOpen] = useState(false);
+  const [kind, setKind] = useState<SecretRef["kind"]>(
+    provider.auth?.kind ?? "tokenvault"
+  );
+  const [a0, b0] = refFields(provider.auth);
+  const [a, setA] = useState(a0);
+  const [b, setB] = useState(b0);
+  const [baseUrl, setBaseUrl] = useState(provider.baseUrl ?? "");
+  const [models, setModels] = useState(provider.models.join(", "));
+  const [tiers, setTiers] = useState(provider.tiers ?? {});
+  const test = useTestProvider();
+  const kindInfo = KINDS.find((k) => k.value === kind)!;
+  const ready = builtIn || (!!provider.baseUrl && !!provider.auth);
+
+  const draft = (): ModelProvider => ({
+    ...provider,
+    baseUrl: baseUrl.trim() || undefined,
+    auth: toRef(kind, a, b),
+    models: list(models),
+    tiers: Object.fromEntries(
+      Object.entries(tiers).filter(([, v]) => v)
+    ) as ModelProvider["tiers"],
+  });
+
+  return (
+    <li className="bg-muted/40 space-y-3 rounded-lg px-3 py-2.5">
+      <div className="flex items-center gap-3">
+        <div className="min-w-0 flex-1">
+          <p className="text-sm font-medium">{provider.label}</p>
+          <p className="text-muted-foreground truncate text-xs">
+            {builtIn
+              ? "Your Claude login; no key"
+              : `${provider.baseUrl ?? "no base URL"} · key: ${describeSecretRef(provider.auth)}`}
+          </p>
+        </div>
+        {!builtIn && (
+          <Switch
+            checked={provider.enabled}
+            disabled={saving || (!ready && !provider.enabled)}
+            title={ready ? undefined : "Set its base URL and key first"}
+            onCheckedChange={(enabled) => onSave({ ...provider, enabled })}
+            aria-label={`Use ${provider.label}`}
+          />
+        )}
+      </div>
+      <div className="flex flex-wrap gap-2">
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-11 md:h-8"
+          disabled={test.isPending}
+          onClick={() => test.mutate({ provider: provider.id })}
+        >
+          {test.isPending ? "Testing…" : "Test provider"}
+        </Button>
+        {!builtIn && (
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-11 md:h-8"
+            onClick={() => setOpen((o) => !o)}
+            aria-expanded={open}
+          >
+            {open ? "Close" : "Edit"}
+          </Button>
+        )}
+        {onRemove && (
+          <Button
+            variant="ghost"
+            size="sm"
+            className="text-destructive h-11 md:h-8"
+            onClick={onRemove}
+          >
+            Remove
+          </Button>
+        )}
+      </div>
+      {test.data && (
+        <p
+          className={cn(
+            "text-xs",
+            test.data.ok
+              ? "text-emerald-700 dark:text-emerald-400"
+              : "text-destructive"
+          )}
+        >
+          {test.data.ok ? "Works: " : "Failed: "}
+          {test.data.message} ({Math.round(test.data.ms)} ms)
+        </p>
+      )}
+      {test.isError && (
+        <p className="text-destructive text-xs">{test.error.message}</p>
+      )}
+      {open && !builtIn && (
+        <form
+          className="space-y-2"
+          onSubmit={(e) => {
+            e.preventDefault();
+            onSave(draft());
+          }}
+        >
+          <Field label="Base URL">
+            <Input
+              value={baseUrl}
+              onChange={(e) => setBaseUrl(e.target.value)}
+              placeholder="https://…/anthropic"
+              className="h-11 md:h-9"
+            />
+          </Field>
+          <Field label="Key from">
+            <Select
+              value={kind}
+              onValueChange={(v) => setKind(v as SecretRef["kind"])}
+            >
+              <SelectTrigger className="h-11 md:h-9">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {KINDS.map((k) => (
+                  <SelectItem key={k.value} value={k.value}>
+                    {k.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </Field>
+          <div className="grid grid-cols-2 gap-2">
+            <Field label={kindInfo.a}>
+              <Input
+                value={a}
+                onChange={(e) => setA(e.target.value)}
+                className="h-11 md:h-9"
+                autoComplete="off"
+              />
+            </Field>
+            {kindInfo.b && (
+              <Field label={`${kindInfo.b} (optional)`}>
+                <Input
+                  value={b}
+                  onChange={(e) => setB(e.target.value)}
+                  className="h-11 md:h-9"
+                  autoComplete="off"
+                />
+              </Field>
+            )}
+          </div>
+          <p className="text-muted-foreground text-xs">
+            Where the key lives, not the key: it&apos;s fetched when an agent
+            starts and goes only into that agent&apos;s environment.
+          </p>
+          <Field label="Models (comma-separated)">
+            <Input
+              value={models}
+              onChange={(e) => setModels(e.target.value)}
+              className="h-11 md:h-9"
+            />
+          </Field>
+          <div className="grid grid-cols-3 gap-2">
+            {(["opus", "sonnet", "haiku"] as const).map((t) => (
+              <Field key={t} label={`${t} tier`}>
+                <Input
+                  value={tiers[t] ?? ""}
+                  onChange={(e) =>
+                    setTiers((x) => ({ ...x, [t]: e.target.value.trim() }))
+                  }
+                  className="h-11 md:h-9"
+                />
+              </Field>
+            ))}
+          </div>
+          <Button
+            type="submit"
+            size="sm"
+            className="h-11 md:h-8"
+            disabled={saving}
+          >
+            Save
+          </Button>
+        </form>
+      )}
+    </li>
+  );
+}
+
+function Field({
+  label,
+  children,
+}: {
+  label: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <label className="block space-y-1">
+      <span className="text-muted-foreground text-xs">{label}</span>
+      {children}
+    </label>
+  );
+}

package/components/SessionList/SidebarHeader.tsx

@@ -18,6 +18,7 @@ import {
   Settings,
   SquareTerminal,
   Trash2,
+  Scale,
 } from "lucide-react";
 import {
   ADropdownMenu,
@@ -112,7 +113,10 @@ export function SidebarHeader(props: SidebarHeaderProps) {
             menuItem("Archived", () => archivedUiActions.open(), {
               icon: Archive,
             }),
-            menuItem("Usage", usageUiActions.open, { icon: Gauge }),
+            menuItem("Usage", () => usageUiActions.open(), { icon: Gauge }),
+            menuItem("Model comparison", () => usageUiActions.open("compare"), {
+              icon: Scale,
+            }),
             separator(),
             menuItem("Machines", props.onManageHosts, { icon: Server }),
             menuItem("Settings", () => settingsUiActions.open(), {

package/components/Settings/SettingsDialog.test.ts

@@ -31,6 +31,9 @@ vi.mock("@/components/Merge/GlobalMergeSection", () => ({
 vi.mock("@/components/Workspaces", () => ({
   WorkspaceSettings: stub("workspaces"),
 }));
+vi.mock("@/components/Models/ModelsSection", () => ({
+  ModelsSection: stub("models"),
+}));
 vi.mock("@/components/Devices", () => ({ DevicesPanel: stub("devices") }));
 vi.mock("@/components/Schedules", () => ({
   SchedulesPanel: stub("schedules"),

package/components/Settings/SettingsDialog.tsx

@@ -8,6 +8,7 @@ import {
   ChevronRight,
   ClipboardList,
   Clock,
+  Cpu,
   GitMerge,
   LayoutGrid,
   Smartphone,
@@ -25,6 +26,7 @@ import { Button } from "@/components/ui/button";
 import { AuditsPanel } from "@/components/Audits/AuditsPanel";
 import { DevicesPanel } from "@/components/Devices";
 import { GlobalMergeSection } from "@/components/Merge/GlobalMergeSection";
+import { ModelsSection } from "@/components/Models/ModelsSection";
 import { SchedulesPanel } from "@/components/Schedules";
 import { WorkspaceSettings } from "@/components/Workspaces";
 import { useSettingsUrl } from "@/hooks/useSettingsUrl";
@@ -56,6 +58,11 @@ export const SECTION_INFO: Record<
     hint: "Pairing, passkeys, network",
     icon: Smartphone,
   },
+  models: {
+    label: "Models",
+    hint: "Which model each kind of work runs on, and providers",
+    icon: Cpu,
+  },
   notifications: {
     label: "Notifications",
     hint: "Sound, browser alerts, your phone",
@@ -85,6 +92,8 @@ function SectionBody({
       return <GlobalMergeSection />;
     case "workspaces":
       return <WorkspaceSettings />;
+    case "models":
+      return <ModelsSection />;
     case "devices":
       return <DevicesPanel />;
     case "notifications":

package/components/Settings/commands.ts

@@ -2,6 +2,7 @@ import {
   Bell,
   ClipboardList,
   Clock,
+  Cpu,
   GitMerge,
   LayoutGrid,
   Settings,
@@ -43,6 +44,24 @@ export function settingsCommands(workspaceId: string | null): PaletteCommand[] {
       icon: LayoutGrid,
       run: () => settingsUiActions.open("workspaces"),
     },
+    {
+      id: "app.models",
+      title: "Model settings",
+      group,
+      keywords: [
+        "model",
+        "routing",
+        "provider",
+        "opus",
+        "sonnet",
+        "haiku",
+        "deepseek",
+        "glm",
+        "prices",
+      ],
+      icon: Cpu,
+      run: () => settingsUiActions.open("models"),
+    },
     {
       id: "app.devices",
       title: "Devices",

package/components/Settings/entry-points.test.ts

@@ -21,6 +21,7 @@ describe("⌘K entry points", () => {
     ["app.settings", null],
     ["app.merging", "merging"],
     ["app.workspace-settings", "workspaces"],
+    ["app.models", "models"],
     ["app.devices", "devices"],
     ["app.notifications", "notifications"],
     ["app.phone-notifications", "notifications"],