@saadnvd1/agent-os 0.3.471 → 0.3.472

package/components/Usage/CompareView.tsx

@@ -0,0 +1,211 @@
+"use client";
+
+import { useState } from "react";
+import { useCompareQuery } from "@/data/models";
+import type { Cohort, Comparison } from "@/lib/usage/compare";
+import { ROLE_LABELS, isModelRole } from "@/lib/models/roles";
+import { cn } from "@/lib/utils";
+import { formatPct, formatTokens, formatUsd } from "./format";
+import { SpendTable } from "./ModelSpend";
+import { emptySpend, sumSpend } from "@/lib/usage/by-model";
+
+const RANGES = [7, 30, 90] as const;
+
+const per = (n: number, tasks: number) => (tasks ? n / tasks : 0);
+const minutes = (ms: number) => `${Math.round(ms / 60000)}m`;
+
+const totalCohort = (cs: Cohort[]): Cohort =>
+  cs.reduce<Cohort>(
+    (t, c) => ({
+      ...t,
+      tasks: t.tasks + c.tasks,
+      spend: sumSpend([t.spend, c.spend]),
+      planPct: t.planPct + c.planPct,
+      wallMs: t.wallMs + c.wallMs,
+      ciFirstGreen: add(t.ciFirstGreen, c.ciFirstGreen),
+      reviewFirstPass: add(t.reviewFirstPass, c.reviewFirstPass),
+      gateFailures: t.gateFailures + c.gateFailures,
+      rework: t.rework + c.rework,
+      merged: add(t.merged, c.merged),
+      dropped: add(t.dropped, c.dropped),
+    }),
+    {
+      key: "Total",
+      baseline: false,
+      tasks: 0,
+      smallSample: false,
+      spend: emptySpend(),
+      planPct: 0,
+      wallMs: 0,
+      ciFirstGreen: { yes: 0, of: 0 },
+      reviewFirstPass: { yes: 0, of: 0 },
+      gateFailures: 0,
+      rework: 0,
+      merged: { yes: 0, of: 0 },
+      dropped: { yes: 0, of: 0 },
+    }
+  );
+
+function add(a: { yes: number; of: number }, b: { yes: number; of: number }) {
+  return { yes: a.yes + b.yes, of: a.of + b.of };
+}
+
+const ROWS: { label: string; value: (c: Cohort) => string }[] = [
+  { label: "Tasks", value: (c) => String(c.tasks) },
+  { label: "Turns", value: (c) => String(c.spend.turns) },
+  {
+    label: "Tokens",
+    value: (c) =>
+      formatTokens(
+        c.spend.inputTokens +
+          c.spend.outputTokens +
+          c.spend.cacheReadTokens +
+          c.spend.cacheWriteTokens
+      ),
+  },
+  { label: "Est. cost", value: (c) => formatUsd(c.spend.costUsd) },
+  {
+    label: "Cost per task",
+    value: (c) => formatUsd(per(c.spend.costUsd, c.tasks)),
+  },
+  {
+    label: "Claude window per task",
+    value: (c) =>
+      c.planPct ? `${per(c.planPct, c.tasks).toFixed(1)} pts` : "—",
+  },
+  {
+    label: "Agent time per task",
+    value: (c) => minutes(per(c.wallMs, c.tasks)),
+  },
+  {
+    label: "CI green on first push",
+    value: (c) => formatPct(c.ciFirstGreen.yes, c.ciFirstGreen.of),
+  },
+  {
+    label: "Review passed first try",
+    value: (c) => formatPct(c.reviewFirstPass.yes, c.reviewFirstPass.of),
+  },
+  {
+    label: "Gate failures per task",
+    value: (c) => per(c.gateFailures, c.tasks).toFixed(1),
+  },
+  {
+    label: "Rework commits per task",
+    value: (c) => per(c.rework, c.tasks).toFixed(1),
+  },
+  { label: "Merged", value: (c) => formatPct(c.merged.yes, c.merged.of) },
+  { label: "Dropped", value: (c) => formatPct(c.dropped.yes, c.dropped.of) },
+];
+
+// Claude-only tasks against routed ones, side by side, over a date range.
+export function CompareView({ enabled }: { enabled: boolean }) {
+  const [days, setDays] = useState<number>(30);
+  const { data, isPending, isError, error } = useCompareQuery(days, enabled);
+  return (
+    <section className="space-y-3">
+      <div className="flex items-center justify-between gap-2">
+        <h3 className="text-sm font-medium">Before and after routing</h3>
+        <div className="bg-foreground/[0.04] flex rounded-lg p-0.5">
+          {RANGES.map((d) => (
+            <button
+              key={d}
+              type="button"
+              onClick={() => setDays(d)}
+              aria-pressed={days === d}
+              className={cn(
+                "h-11 rounded-md px-3 text-xs md:h-8",
+                days === d
+                  ? "bg-card text-foreground shadow-sm"
+                  : "text-muted-foreground"
+              )}
+            >
+              {d} days
+            </button>
+          ))}
+        </div>
+      </div>
+      {isError && <p className="text-destructive text-sm">{error.message}</p>}
+      {isPending && !data && (
+        <div className="bg-foreground/[0.04] h-40 animate-pulse rounded-xl" />
+      )}
+      {data && <CompareTables data={data} />}
+    </section>
+  );
+}
+
+function CompareTables({ data }: { data: Comparison }) {
+  if (!data.cohorts.length)
+    return (
+      <p className="text-muted-foreground text-xs">
+        No tasks ran in this range.
+      </p>
+    );
+  const columns = [...data.cohorts, totalCohort(data.cohorts)];
+  const cell = "py-1.5 pr-2 text-right tabular-nums";
+  return (
+    <>
+      <div className="overflow-x-auto">
+        <table className="w-full text-xs">
+          <thead>
+            <tr>
+              <th className="py-1 pr-2 text-left font-normal" />
+              {columns.map((c) => (
+                <th
+                  key={c.key}
+                  className={cn(cell, "align-bottom font-medium")}
+                >
+                  <span className="font-mono">{c.key}</span>
+                  {c.baseline && (
+                    <span className="text-muted-foreground block font-normal">
+                      baseline
+                    </span>
+                  )}
+                  {c.smallSample && (
+                    <span className="block font-normal text-amber-600 dark:text-amber-400">
+                      small sample
+                    </span>
+                  )}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {ROWS.map((row) => (
+              <tr key={row.label} className="border-border border-t">
+                <td className="text-muted-foreground py-1.5 pr-2">
+                  {row.label}
+                </td>
+                {columns.map((c) => (
+                  <td
+                    key={c.key}
+                    className={cn(cell, c.key === "Total" && "font-medium")}
+                  >
+                    {row.value(c)}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <SpendTable
+        title="Role · model"
+        rows={data.roles.map((r) => ({
+          ...r,
+          key: `${r.role} ${r.provider}/${r.model}`,
+          label: `${isModelRole(r.role) ? ROLE_LABELS[r.role].label : "Before routing"} · ${r.provider}/${r.model}`,
+        }))}
+        total={sumSpend(data.roles)}
+      />
+      <p className="text-muted-foreground text-[11px]">
+        A task counts under the provider its own turns ran on (anthropic is the
+        baseline); its reviews and checks count toward its cost. Dollars are
+        list-price estimates; for Claude, the plan&apos;s real measure is its
+        5-hour window, shared out by how far each turn moved it (an estimate).
+        Outcomes come from the orchestrator&apos;s checks, so only its tasks
+        have them. Under 10 tasks a column is a small sample: read it as a hint,
+        not a result.
+      </p>
+    </>
+  );
+}

package/components/Usage/ModelSpend.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import { useState } from "react";
+import type { SpendByModel, TokenSpend } from "@/lib/usage/by-model";
+import { ROLE_LABELS, isModelRole } from "@/lib/models/roles";
+import { cn } from "@/lib/utils";
+import { formatTokens, formatUsd } from "./format";
+
+const roleLabel = (r: string) =>
+  isModelRole(r) ? ROLE_LABELS[r].label : "Before routing";
+
+// Tokens and estimated cost by role and by model, in the plan's 5-hour
+// window or the last 24 hours.
+export function ModelSpend({
+  data,
+}: {
+  data: { fiveHour: SpendByModel; day: SpendByModel } | undefined;
+}) {
+  const [span, setSpan] = useState<"fiveHour" | "day">("fiveHour");
+  if (!data) return null;
+  const shown = data[span];
+  return (
+    <section className="space-y-3">
+      <div className="flex items-center justify-between gap-2">
+        <h3 className="text-sm font-medium">By model and role</h3>
+        <div className="bg-foreground/[0.04] flex rounded-lg p-0.5">
+          {(
+            [
+              ["fiveHour", "5-hour window"],
+              ["day", "24 hours"],
+            ] as const
+          ).map(([v, label]) => (
+            <button
+              key={v}
+              type="button"
+              onClick={() => setSpan(v)}
+              aria-pressed={span === v}
+              className={cn(
+                "h-11 rounded-md px-3 text-xs md:h-8",
+                span === v
+                  ? "bg-card text-foreground shadow-sm"
+                  : "text-muted-foreground"
+              )}
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+      </div>
+      <SpendTable
+        title="Role"
+        rows={shown.roles.map((r) => ({
+          key: r.role,
+          label: roleLabel(r.role),
+          ...r,
+        }))}
+        total={shown.total}
+      />
+      <SpendTable
+        title="Model"
+        rows={shown.models.map((m) => ({
+          key: `${m.provider}/${m.model}`,
+          label: `${m.provider}/${m.model}`,
+          ...m,
+        }))}
+        total={shown.total}
+      />
+    </section>
+  );
+}
+
+export function SpendTable({
+  title,
+  rows,
+  total,
+}: {
+  title: string;
+  rows: (TokenSpend & { key: string; label: string })[];
+  total: TokenSpend;
+}) {
+  if (!rows.length)
+    return <p className="text-muted-foreground text-xs">Nothing yet.</p>;
+  const cell = "py-1.5 pr-2 text-right tabular-nums";
+  return (
+    <div className="overflow-x-auto">
+      <table className="w-full text-xs">
+        <thead className="text-muted-foreground">
+          <tr>
+            <th className="py-1 pr-2 text-left font-normal">{title}</th>
+            <th className={cn(cell, "font-normal")}>In</th>
+            <th className={cn(cell, "font-normal")}>Out</th>
+            <th className={cn(cell, "font-normal")}>Cache r/w</th>
+            <th className={cn(cell, "font-normal")}>Turns</th>
+            <th className={cn(cell, "font-normal")}>Est. cost</th>
+          </tr>
+        </thead>
+        <tbody>
+          {[...rows, { ...total, key: "__total", label: "Total" }].map((r) => (
+            <tr
+              key={r.key}
+              className={cn(
+                "border-border border-t",
+                r.key === "__total" && "font-medium"
+              )}
+            >
+              <td className="max-w-48 truncate py-1.5 pr-2 font-mono md:max-w-72">
+                {r.label}
+              </td>
+              <td className={cell}>{formatTokens(r.inputTokens)}</td>
+              <td className={cell}>{formatTokens(r.outputTokens)}</td>
+              <td className={cell}>
+                {formatTokens(r.cacheReadTokens)}/
+                {formatTokens(r.cacheWriteTokens)}
+              </td>
+              <td className={cell}>{r.turns}</td>
+              <td
+                className={cell}
+                title={
+                  r.unpriced
+                    ? "Partly the agent's own figure: not in the price table"
+                    : undefined
+                }
+              >
+                {formatUsd(r.costUsd)}
+                {r.unpriced ? "*" : ""}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/components/Usage/UsageDialog.tsx

@@ -12,11 +12,19 @@ import {
 import { useUsageQuery } from "@/data/usage";
 import type { UsageRange } from "@/lib/usage/aggregate";
 import { cn } from "@/lib/utils";
-import { usageUi, usageUiActions } from "@/stores/usageUi";
+import { usageUi, usageUiActions, type UsageTab } from "@/stores/usageUi";
+import { CompareView } from "./CompareView";
+import { ModelSpend } from "./ModelSpend";
 import { DayBars, SpendList } from "./SpendCharts";
 import { WindowCard } from "./WindowCard";
 import { formatUsd } from "./format";
 
+const TABS: { value: UsageTab; label: string }[] = [
+  { value: "spend", label: "Spend" },
+  { value: "models", label: "By model" },
+  { value: "compare", label: "Compare" },
+];
+
 const RANGES: { value: UsageRange; label: string }[] = [
   { value: "today", label: "Today" },
   { value: "7d", label: "7 days" },
@@ -26,7 +34,7 @@ const RANGES: { value: UsageRange; label: string }[] = [
 // The account's rolling windows, and what chats cost by day, session and
 // workspace.
 export function UsageDialog() {
-  const { open } = useSnapshot(usageUi);
+  const { open, tab } = useSnapshot(usageUi);
   const [range, setRange] = useState<UsageRange>("7d");
   const { data, isPending, isError, error } = useUsageQuery(range, open);
   const report = data?.report;
@@ -56,7 +64,34 @@ export function UsageDialog() {
           )}
         </section>
 
-        <section className="space-y-3">
+        <div
+          role="tablist"
+          aria-label="Usage views"
+          className="bg-foreground/[0.04] flex rounded-lg p-0.5"
+        >
+          {TABS.map((t) => (
+            <button
+              key={t.value}
+              type="button"
+              role="tab"
+              aria-selected={tab === t.value}
+              onClick={() => usageUiActions.setTab(t.value)}
+              className={cn(
+                "h-11 flex-1 rounded-md px-3 text-xs md:h-8",
+                tab === t.value
+                  ? "bg-card text-foreground shadow-sm"
+                  : "text-muted-foreground"
+              )}
+            >
+              {t.label}
+            </button>
+          ))}
+        </div>
+
+        {tab === "models" && <ModelSpend data={data?.models} />}
+        {tab === "compare" && <CompareView enabled={open} />}
+
+        <section className={cn("space-y-3", tab !== "spend" && "hidden")}>
           <div className="flex items-center justify-between gap-2">
             <h3 className="text-sm font-medium">Chat spend</h3>
             <div className="bg-foreground/[0.04] flex rounded-lg p-0.5">

package/components/Usage/format.ts

@@ -10,3 +10,12 @@ export function formatDuration(seconds: number): string {
   if (h < 48) return `${h}h${m % 60 ? ` ${m % 60}m` : ""}`;
   return `${Math.floor(h / 24)}d ${h % 24}h`;
 }
+
+export function formatTokens(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+  if (n >= 1_000) return `${Math.round(n / 1_000)}k`;
+  return String(n);
+}
+
+export const formatPct = (yes: number, of: number) =>
+  of ? `${Math.round((yes / of) * 100)}%` : "—";

package/components/Workspaces/WorkspaceModelsForm.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { useState } from "react";
+import { ModelSelect } from "@/components/Models/ModelSelect";
+import {
+  useModelsQuery,
+  useUpdateWorkspaceModels,
+  useWorkspaceModelsQuery,
+} from "@/data/models";
+import { MODEL_ROLES, ROLE_LABELS, type ModelRole } from "@/lib/models/roles";
+
+// The roles that run inside a workspace; interactive sessions and helpers
+// follow Settings.
+const WORKSPACE_ROLES = MODEL_ROLES.filter(
+  (r): r is Exclude<ModelRole, "interactive" | "helper"> =>
+    r !== "interactive" && r !== "helper"
+);
+
+// A workspace's own role models, over Settings > Models.
+export function WorkspaceModelsForm({ workspaceId }: { workspaceId: string }) {
+  const [open, setOpen] = useState(false);
+  const models = useModelsQuery(open);
+  const own = useWorkspaceModelsQuery(workspaceId);
+  const update = useUpdateWorkspaceModels(workspaceId);
+  const roles = own.data?.roles ?? {};
+  const set = Object.keys(roles).length;
+
+  return (
+    <div className="space-y-2">
+      <button
+        type="button"
+        className="text-muted-foreground hover:text-foreground h-11 text-left text-xs md:h-auto"
+        onClick={() => setOpen((o) => !o)}
+        aria-expanded={open}
+      >
+        Models: {set ? `${set} set for this workspace` : "as Settings › Models"}{" "}
+        {open ? "▴" : "▾"}
+      </button>
+      {open && (
+        <ul className="space-y-2">
+          {WORKSPACE_ROLES.map((role) => (
+            <li key={role} className="space-y-1">
+              <label
+                htmlFor={`ws-${workspaceId}-${role}`}
+                className="text-muted-foreground block text-xs"
+              >
+                {ROLE_LABELS[role].label}
+              </label>
+              <ModelSelect
+                id={`ws-${workspaceId}-${role}`}
+                value={roles[role] ?? null}
+                effective={models.data?.effective}
+                inheritLabel={`As Settings (${models.data?.effective.roles[role] ?? "…"})`}
+                disabled={update.isPending || !models.data}
+                onChange={(ref) => {
+                  const next = { ...roles };
+                  if (ref) next[role] = ref;
+                  else delete next[role];
+                  update.mutate({ roles: next });
+                }}
+              />
+            </li>
+          ))}
+        </ul>
+      )}
+      {update.isError && (
+        <p className="text-destructive text-xs">{update.error.message}</p>
+      )}
+    </div>
+  );
+}

package/components/Workspaces/WorkspaceSettings.tsx

@@ -5,6 +5,7 @@ import { useUpdateWorkspace, useWorkspacesQuery } from "@/data/workspaces";
 import { TaskLimitForm } from "./TaskLimitForm";
 import { RulesForm } from "./RulesForm";
 import { FreshStartForm } from "./FreshStartForm";
+import { WorkspaceModelsForm } from "./WorkspaceModelsForm";
 
 // Settings > Workspaces: each workspace's own settings.
 export function WorkspaceSettings() {
@@ -41,6 +42,7 @@ export function WorkspaceSettings() {
             workspace={w}
           />
           <RulesForm workspaceId={w.id} />
+          <WorkspaceModelsForm workspaceId={w.id} />
           <SettingToggle
             title="Wake tasks on CI failures and reviews"
             detail="A task's agent is messaged once when a check fails on its PR's head, with the log's tail, and when someone reviews or comments on it."

package/data/models/index.ts

@@ -0,0 +1,125 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type {
+  EffectiveModels,
+  ModelSettings,
+  WorkspaceModels,
+} from "@/lib/models/config";
+import type { ModelRole } from "@/lib/models/roles";
+import type { ProviderTest } from "@/lib/models/test-provider";
+import type { ResumeResult } from "@/lib/models/resume";
+import type { ModelOverride } from "@/lib/models/resolve";
+import type { Comparison } from "@/lib/usage/compare";
+
+// Model routing (lib/models): role models, providers, prices.
+export const modelKeys = {
+  all: ["models"] as const,
+  workspace: (id: string) => [...modelKeys.all, "workspace", id] as const,
+  compare: (days: number) => [...modelKeys.all, "compare", days] as const,
+};
+
+export interface ModelsResponse {
+  saved: ModelSettings;
+  effective: EffectiveModels;
+  defaults: Record<ModelRole, string>;
+}
+
+async function json<T>(res: Response): Promise<T> {
+  const data = await res.json().catch(() => ({}));
+  if (!res.ok) throw new Error(data.error || `Request failed (${res.status})`);
+  return data;
+}
+
+const send = (url: string, method: string, body: unknown) =>
+  fetch(url, {
+    method,
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(body),
+  });
+
+export function useModelsQuery(enabled = true) {
+  return useQuery({
+    queryKey: modelKeys.all,
+    queryFn: async () => json<ModelsResponse>(await fetch("/api/models")),
+    staleTime: 60_000,
+    enabled,
+  });
+}
+
+export function useUpdateModels() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (settings: ModelSettings) =>
+      json<ModelsResponse>(await send("/api/models", "PUT", settings)),
+    onSuccess: (data) => queryClient.setQueryData(modelKeys.all, data),
+  });
+}
+
+export function useTestProvider() {
+  return useMutation({
+    mutationFn: async (input: { provider: string; model?: string }) =>
+      json<ProviderTest>(await send("/api/models/test", "POST", input)),
+  });
+}
+
+export function useWorkspaceModelsQuery(workspaceId: string) {
+  return useQuery({
+    queryKey: modelKeys.workspace(workspaceId),
+    queryFn: async () =>
+      json<WorkspaceModels>(
+        await fetch(`/api/workspaces/${workspaceId}/models`)
+      ),
+    staleTime: 60_000,
+  });
+}
+
+export function useUpdateWorkspaceModels(workspaceId: string) {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (models: WorkspaceModels) =>
+      json<WorkspaceModels>(
+        await send(`/api/workspaces/${workspaceId}/models`, "PUT", models)
+      ),
+    onSuccess: (data) =>
+      queryClient.setQueryData(modelKeys.workspace(workspaceId), data),
+  });
+}
+
+export function useResumeOnModel() {
+  return useMutation({
+    mutationFn: async (input: {
+      taskId: string;
+      model: ModelOverride;
+      message?: string;
+    }) =>
+      json<ResumeResult>(
+        await send(`/api/tasks/${input.taskId}/model`, "POST", {
+          model: input.model,
+          message: input.message,
+        })
+      ),
+  });
+}
+
+export function useCompareQuery(days: number, enabled = true) {
+  return useQuery({
+    queryKey: modelKeys.compare(days),
+    queryFn: async () =>
+      json<Comparison>(await fetch(`/api/usage/compare?days=${days}`)),
+    enabled,
+    staleTime: 60_000,
+    placeholderData: (prev) => prev,
+  });
+}
+
+// Every model a role can be set to: each usable provider's, as references.
+export function modelChoices(effective: EffectiveModels | undefined) {
+  return (effective?.providers ?? [])
+    .filter((p) => p.enabled)
+    .flatMap((p) =>
+      p.models.map((m) => ({
+        ref: `${p.id}/${m}`,
+        label: m,
+        provider: p.label,
+      }))
+    );
+}

package/data/usage/index.ts

@@ -1,6 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import type { UsageRange, UsageReport } from "@/lib/usage/aggregate";
 import type { UsageWindows } from "@/lib/usage/windows";
+import type { SpendByModel } from "@/lib/usage/by-model";
 
 export const usageKeys = {
   all: ["usage"] as const,
@@ -12,6 +13,8 @@ export interface UsageResponse {
   // The orchestrator's reviewer and scope check runs, by PR.
   reviews: UsageReport;
   windows: UsageWindows;
+  // By model and role, in the plan's 5-hour window and the last 24 hours.
+  models: { fiveHour: SpendByModel; day: SpendByModel };
 }
 
 export function useUsageQuery(range: UsageRange, enabled = true) {