@saadnvd1/agent-os 0.3.470 → 0.3.472

package/components/Tasks/ResumeOnModel.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { useState } from "react";
+import { Cpu } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { ModelSelect } from "@/components/Models/ModelSelect";
+import { useModelsQuery, useResumeOnModel } from "@/data/models";
+import type { TaskView } from "@/lib/tasks";
+
+// "Resume on model…": the task carries on in the same conversation and
+// worktree on the model picked, which it keeps from then on.
+export function ResumeOnModel({ task }: { task: TaskView }) {
+  const [open, setOpen] = useState(false);
+  const [ref, setRef] = useState<string | null>(null);
+  const models = useModelsQuery(open);
+  const resume = useResumeOnModel();
+  if (!open)
+    return (
+      <Button
+        size="sm"
+        variant="outline"
+        className="h-11 md:h-8"
+        title={task.model ? `Runs on ${task.model}` : undefined}
+        onClick={() => setOpen(true)}
+      >
+        <Cpu className="h-3.5 w-3.5" />
+        Resume on model…
+      </Button>
+    );
+  return (
+    <div className="bg-muted/40 w-full space-y-2 rounded-lg p-2">
+      <p className="text-muted-foreground text-xs">
+        Now on {task.model ?? "its role's model"}
+        {task.planning ? ", planning" : ""}. Its conversation and worktree carry
+        on.
+      </p>
+      <ModelSelect
+        value={ref}
+        effective={models.data?.effective}
+        disabled={!models.data || resume.isPending}
+        onChange={setRef}
+      />
+      <div className="flex gap-2">
+        <Button
+          size="sm"
+          className="h-11 md:h-8"
+          disabled={!ref || resume.isPending}
+          onClick={() =>
+            ref &&
+            resume.mutate(
+              { taskId: task.id, model: ref },
+              { onSuccess: () => setOpen(false) }
+            )
+          }
+        >
+          {resume.isPending ? "Resuming…" : "Resume"}
+        </Button>
+        <Button
+          size="sm"
+          variant="ghost"
+          className="h-11 md:h-8"
+          onClick={() => setOpen(false)}
+        >
+          Cancel
+        </Button>
+      </div>
+      {resume.isError && (
+        <p className="text-destructive text-xs">{resume.error.message}</p>
+      )}
+    </div>
+  );
+}

package/components/Tasks/TaskRow.tsx

@@ -15,6 +15,7 @@ import { tmuxAttachActions } from "@/stores/tmuxAttach";
 import { tasksUiActions } from "@/stores/tasksUi";
 import { cn } from "@/lib/utils";
 import { MoveTaskButton } from "./MoveTaskButton";
+import { ResumeOnModel } from "./ResumeOnModel";
 
 const STATE: Record<TaskState, { label: string; tone: string }> = {
   working: { label: "Working", tone: "text-muted-foreground" },
@@ -58,6 +59,8 @@ export function TaskRow({ task }: { task: TaskView }) {
           <p className="text-muted-foreground truncate font-mono text-[11px]">
             {task.hostName && `${task.hostName} · `}
             {task.projectName} · {task.branch}
+            {task.model &&
+              ` · ${task.model}${task.planning ? " (planning)" : ""}`}
           </p>
           {task.cardUrl && (
             <a
@@ -114,6 +117,7 @@ export function TaskRow({ task }: { task: TaskView }) {
             </Button>
           )}
           <MoveTaskButton task={task} onError={setMoveError} />
+          {!task.hostId && <ResumeOnModel task={task} />}
           <span className="flex-1" />
           {confirmDrop ? (
             <Button

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;
@@ -41,8 +49,8 @@ export function UsageDialog() {
         <DialogHeader>
           <DialogTitle>Usage</DialogTitle>
           <DialogDescription>
-            The account&apos;s limits, and what chat sessions on this machine
-            cost.
+            The account&apos;s limits, and what chat sessions and gate reviews
+            on this machine cost.
           </DialogDescription>
         </DialogHeader>
 
@@ -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">
@@ -124,6 +159,35 @@ export function UsageDialog() {
             </>
           )}
         </section>
+
+        {data?.reviews && data.reviews.total.turns > 0 && (
+          <section className="space-y-3">
+            <h3 className="text-sm font-medium">Gate reviews</h3>
+            <div className="flex items-baseline gap-2">
+              <span className="text-2xl font-semibold tabular-nums">
+                {formatUsd(data.reviews.total.costUsd)}
+              </span>
+              <span className="text-muted-foreground text-xs">
+                estimate · {data.reviews.total.turns} runs ·{" "}
+                {data.reviews.total.tokens.toLocaleString()} tokens
+              </span>
+            </div>
+            <SpendList
+              title="By PR"
+              rows={data.reviews.sessions.map((s) => ({
+                key: s.id,
+                label: s.name,
+                ...s,
+              }))}
+              total={data.reviews.total}
+              limit={10}
+            />
+            <p className="text-muted-foreground text-[11px]">
+              Each run of the orchestrator&apos;s independent reviewer and scope
+              check, from its own result. Not part of chat spend.
+            </p>
+          </section>
+        )}
       </DialogContent>
     </Dialog>
   );

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/FreshStartForm.tsx

@@ -19,7 +19,7 @@ export function FreshStartForm() {
     return <p className="text-destructive text-sm">{error.message}</p>;
   return (
     <Form
-      key={`${data.orchestratorTokens}:${data.taskTokens}:${data.staleCompactTokens}`}
+      key={`${data.orchestratorTokens}:${data.taskTokens}:${data.compactTokens}`}
       saved={data}
     />
   );
@@ -29,13 +29,13 @@ function Form({ saved }: { saved: RefreshSettings }) {
   const update = useUpdateFreshStart();
   const orchestrator = useThreshold(saved.orchestratorTokens, 200);
   const task = useThreshold(saved.taskTokens, 200);
-  const stale = useThreshold(saved.staleCompactTokens, 150);
-  const error = orchestrator.error ?? task.error ?? stale.error;
+  const compact = useThreshold(saved.compactTokens, 150);
+  const error = orchestrator.error ?? task.error ?? compact.error;
   const dirty =
     !error &&
     (orchestrator.tokens !== saved.orchestratorTokens ||
       task.tokens !== saved.taskTokens ||
-      stale.tokens !== saved.staleCompactTokens);
+      compact.tokens !== saved.compactTokens);
 
   return (
     <form
@@ -46,7 +46,7 @@ function Form({ saved }: { saved: RefreshSettings }) {
           {
             orchestratorTokens: orchestrator.tokens,
             taskTokens: task.tokens,
-            staleCompactTokens: stale.tokens,
+            compactTokens: compact.tokens,
           },
           {
             onSuccess: () => toast.success("Context settings saved"),
@@ -65,17 +65,17 @@ function Form({ saved }: { saved: RefreshSettings }) {
       </p>
       <ThresholdRow label="Orchestrators" field={orchestrator} />
       <ThresholdRow label="Tasks" field={task} />
-      <h3 className="pt-2 text-sm font-medium">Compact idle chats</h3>
+      <h3 className="pt-2 text-sm font-medium">Compact</h3>
       <p className="text-muted-foreground text-sm">
-        A message to a chat idle past its prompt cache re-reads the whole
-        conversation at full price. Above this size, messages from the
-        orchestrator, events and schedules compact it first; the composer offers
-        to.
+        Chats and tasks compact when their context passes this size: Claude Code
+        does it itself, and between turns AgentOS compacts a chat over it, or
+        idle past its prompt cache, before the next message. The composer offers
+        to first. Orchestrators start fresh instead.
       </p>
       <ThresholdRow
-        label="Idle chats"
-        field={stale}
-        switchLabel="Compact idle chats before a message"
+        label="Chats and tasks"
+        field={compact}
+        switchLabel="Compact chats and tasks at this size"
       />
       {error && <p className="text-destructive text-xs">{error}</p>}
       <div className="flex justify-end">