@saadnvd1/agent-os 0.3.555 → 0.3.557

package/components/Settings/ExperimentsSection.tsx

@@ -0,0 +1,225 @@
+"use client";
+
+import { useState } from "react";
+import { toast } from "sonner";
+import { ArrowLeft } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { SettingToggle } from "@/components/Settings/SettingToggle";
+import { formatTokens } from "@/lib/chat/context";
+import {
+  useExperimentDetailQuery,
+  useExperimentsQuery,
+  useSetExperiment,
+  type ExperimentView,
+} from "@/data/experiments";
+
+const usd = (n: number) => `$${n.toFixed(2)}`;
+const pct = (n: number | null) =>
+  n === null ? "-" : `${Math.round(n * 100)}%`;
+
+const WINDOWS = [
+  ["today", "Today"],
+  ["d7", "7 days"],
+  ["d30", "30 days"],
+] as const;
+
+function Usage({ e }: { e: ExperimentView }) {
+  return (
+    <table className="w-full text-xs tabular-nums">
+      <thead className="text-muted-foreground">
+        <tr>
+          <th className="py-1 text-left font-normal" />
+          <th className="py-1 text-right font-normal">Calls</th>
+          <th className="py-1 text-right font-normal">Tokens</th>
+          <th className="py-1 text-right font-normal">Cost</th>
+          {e.suggests && (
+            <th className="py-1 text-right font-normal">Accepted</th>
+          )}
+        </tr>
+      </thead>
+      <tbody>
+        {WINDOWS.map(([key, label]) => {
+          const w = e.usage[key];
+          return (
+            <tr key={key} className="border-border border-t">
+              <td className="py-1">{label}</td>
+              <td className="py-1 text-right">{w.calls}</td>
+              <td className="py-1 text-right">{formatTokens(w.tokens)}</td>
+              <td className="py-1 text-right">{usd(w.costUsd)}</td>
+              {e.suggests && (
+                <td className="py-1 text-right">
+                  {pct(w.acceptRate)}
+                  {w.accepted + w.dismissed > 0 &&
+                    ` (${w.accepted}/${w.accepted + w.dismissed})`}
+                </td>
+              )}
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+}
+
+function Detail({ id, onBack }: { id: string; onBack: () => void }) {
+  const { data, isPending, isError, error } = useExperimentDetailQuery(id);
+  return (
+    <div className="space-y-4">
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={onBack}
+        className="min-h-11 md:min-h-0"
+      >
+        <ArrowLeft className="h-4 w-4" /> Experiments
+      </Button>
+      {isPending && (
+        <div className="bg-muted/40 h-24 animate-pulse rounded-lg" />
+      )}
+      {isError && <p className="text-destructive text-sm">{error.message}</p>}
+      {data && (
+        <>
+          <div>
+            <h3 className="text-sm font-medium">{data.name}</h3>
+            <p className="text-muted-foreground text-xs">{data.description}</p>
+          </div>
+          <Usage e={data} />
+          <Breakdowns title="By trigger" rows={data.detail.byTrigger} />
+          <Breakdowns title="By model" rows={data.detail.byModel} />
+          <section>
+            <h4 className="text-muted-foreground mb-1 text-xs">Last 30 days</h4>
+            <table className="w-full text-xs tabular-nums">
+              <tbody>
+                {data.detail.days
+                  .filter((d) => d.calls || d.accepted || d.dismissed)
+                  .reverse()
+                  .map((d) => (
+                    <tr key={d.day} className="border-border border-t">
+                      <td className="py-1">{d.day}</td>
+                      <td className="py-1 text-right">{d.calls} calls</td>
+                      <td className="py-1 text-right">
+                        {formatTokens(d.tokens)}
+                      </td>
+                      <td className="py-1 text-right">{usd(d.costUsd)}</td>
+                      <td className="py-1 text-right">
+                        {d.accepted}/{d.accepted + d.dismissed}
+                      </td>
+                    </tr>
+                  ))}
+                <tr className="border-border border-t font-medium">
+                  <td className="py-1">Total</td>
+                  <td className="py-1 text-right">
+                    {data.detail.days.reduce((t, d) => t + d.calls, 0)} calls
+                  </td>
+                  <td className="py-1 text-right">
+                    {formatTokens(
+                      data.detail.days.reduce((t, d) => t + d.tokens, 0)
+                    )}
+                  </td>
+                  <td className="py-1 text-right">
+                    {usd(data.detail.days.reduce((t, d) => t + d.costUsd, 0))}
+                  </td>
+                  <td />
+                </tr>
+              </tbody>
+            </table>
+          </section>
+          {data.detail.recent.length > 0 && (
+            <section>
+              <h4 className="text-muted-foreground mb-1 text-xs">Recent</h4>
+              <ul className="space-y-1 text-xs">
+                {data.detail.recent.map((r, i) => (
+                  <li key={i} className="flex justify-between gap-3">
+                    <span className="min-w-0 truncate">
+                      {new Date(r.at).toLocaleString()} · {r.event} ·{" "}
+                      {r.trigger}
+                      {r.detail ? ` · ${r.detail}` : ""}
+                    </span>
+                    <span className="text-muted-foreground tabular-nums">
+                      {r.tokens ? formatTokens(r.tokens) : ""}
+                    </span>
+                  </li>
+                ))}
+              </ul>
+            </section>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
+
+function Breakdowns({
+  title,
+  rows,
+}: {
+  title: string;
+  rows: { key: string; calls: number; tokens: number; costUsd: number }[];
+}) {
+  if (!rows.length) return null;
+  return (
+    <section>
+      <h4 className="text-muted-foreground mb-1 text-xs">{title}</h4>
+      <table className="w-full text-xs tabular-nums">
+        <tbody>
+          {rows.map((r) => (
+            <tr key={r.key} className="border-border border-t">
+              <td className="py-1">{r.key}</td>
+              <td className="py-1 text-right">{r.calls} calls</td>
+              <td className="py-1 text-right">{formatTokens(r.tokens)}</td>
+              <td className="py-1 text-right">{usd(r.costUsd)}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </section>
+  );
+}
+
+export function ExperimentsSection() {
+  const { data, isPending, isError, error } = useExperimentsQuery();
+  const set = useSetExperiment();
+  const [open, setOpen] = useState<string | null>(null);
+
+  if (open) return <Detail id={open} onBack={() => setOpen(null)} />;
+  if (isPending)
+    return <div className="bg-muted/40 h-16 animate-pulse rounded-lg" />;
+  if (isError)
+    return <p className="text-destructive text-sm">{error.message}</p>;
+
+  return (
+    <div className="space-y-5">
+      <p className="text-muted-foreground text-sm">
+        Features still being tried. Each is off until you turn it on, does no
+        work while off, and shows what it costs here.
+      </p>
+      {data.experiments.map((e) => (
+        <div key={e.id} className="space-y-2">
+          <SettingToggle
+            title={`${e.name} · ${e.status === "beta" ? "Beta" : "Experimental"}`}
+            detail={e.description}
+            checked={e.on}
+            locked={data.locked}
+            onChange={(on) =>
+              set.mutate(
+                { id: e.id, on },
+                { onError: (err) => toast.error(err.message) }
+              )
+            }
+          />
+          <div className="px-3">
+            <Usage e={e} />
+            <Button
+              variant="link"
+              size="sm"
+              className="min-h-11 px-0 md:min-h-0"
+              onClick={() => setOpen(e.id)}
+            >
+              Details
+            </Button>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/components/Settings/SettingsDialog.test.ts

@@ -47,6 +47,9 @@ vi.mock("@/components/Audits/AuditsPanel", () => ({
 vi.mock("@/components/Updates/UpdatesSection", () => ({
   UpdatesSection: stub("updates"),
 }));
+vi.mock("./ExperimentsSection", () => ({
+  ExperimentsSection: stub("experiments"),
+}));
 vi.mock("./NotificationsSection", () => ({
   NotificationsSection: stub("notifications"),
 }));

package/components/Settings/SettingsDialog.tsx

@@ -14,6 +14,7 @@ import {
   LayoutGrid,
   ListChecks,
   ShieldOff,
+  FlaskConical,
   RefreshCw,
   Smartphone,
   X,
@@ -33,6 +34,7 @@ import { GlobalMergeSection } from "@/components/Merge/GlobalMergeSection";
 import { ModelsSection } from "@/components/Models/ModelsSection";
 import { SchedulesPanel } from "@/components/Schedules";
 import { UpdatesSection } from "@/components/Updates/UpdatesSection";
+import { ExperimentsSection } from "./ExperimentsSection";
 import { WorkspaceSettings } from "@/components/Workspaces";
 import { useSettingsUrl } from "@/hooks/useSettingsUrl";
 import { SETTINGS_SECTIONS, type SettingsSection } from "@/lib/settings-url";
@@ -106,6 +108,11 @@ export const SECTION_INFO: Record<
     hint: "Version, check for updates, the update banner",
     icon: RefreshCw,
   },
+  experiments: {
+    label: "Experiments",
+    hint: "Try features that aren't finished, and see what they cost",
+    icon: FlaskConical,
+  },
 };
 
 function SectionBody({
@@ -138,6 +145,8 @@ function SectionBody({
       return <SetupSection />;
     case "updates":
       return <UpdatesSection />;
+    case "experiments":
+      return <ExperimentsSection />;
   }
 }
 

package/components/Settings/commands.ts

@@ -3,6 +3,7 @@ import {
   ClipboardList,
   Clock,
   Cpu,
+  FlaskConical,
   GitMerge,
   LayoutGrid,
   RefreshCw,
@@ -111,5 +112,13 @@ export function settingsCommands(workspaceId: string | null): PaletteCommand[] {
       icon: RefreshCw,
       run: () => settingsUiActions.open("updates"),
     },
+    {
+      id: "app.experiments",
+      title: "Experiments",
+      group,
+      keywords: ["experiment", "labs", "beta", "feature", "try"],
+      icon: FlaskConical,
+      run: () => settingsUiActions.open("experiments"),
+    },
   ];
 }

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

@@ -28,6 +28,7 @@ describe("⌘K entry points", () => {
     ["app.schedules", "schedules"],
     ["app.audits", "audits"],
     ["app.updates", "updates"],
+    ["app.experiments", "experiments"],
   ] as const)("%s opens Settings at %s", (id, section) => {
     run(id);
     expect(settingsUi.open).toBe(true);

package/data/done/index.ts

@@ -17,12 +17,34 @@ async function json<T>(res: Response): Promise<T> {
   return data;
 }
 
-const post = (url: string, body?: object) =>
-  fetch(url, {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: body ? JSON.stringify(body) : undefined,
-  });
+// Longer than the server's own deadline for done (lib/done/deadline.ts), so
+// the pending toast always ends even if the server never answers.
+export const DONE_REQUEST_TIMEOUT_MS = 180_000;
+
+async function post(url: string, body?: object, timeoutMs?: number) {
+  const abort = new AbortController();
+  const timer = timeoutMs
+    ? setTimeout(
+        () =>
+          abort.abort(
+            new Error(
+              "The server didn't answer in time. It may still be working: check the row, then try again."
+            )
+          ),
+        timeoutMs
+      )
+    : undefined;
+  try {
+    return await fetch(url, {
+      signal: abort.signal,
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: body ? JSON.stringify(body) : undefined,
+    });
+  } finally {
+    clearTimeout(timer);
+  }
+}
 
 function useDoneMutation<V, R>(fn: (v: V) => Promise<R>) {
   const queryClient = useQueryClient();
@@ -40,7 +62,11 @@ export function useDoneSession() {
     async (id: string) =>
       (
         await json<{ outcome: DoneOutcome }>(
-          await post(`/api/sessions/${id}/done`)
+          await post(
+            `/api/sessions/${id}/done`,
+            undefined,
+            DONE_REQUEST_TIMEOUT_MS
+          )
         )
       ).outcome
   );

package/data/experiments/index.ts

@@ -0,0 +1,67 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { ExperimentView } from "@/lib/experiments/view";
+import type { UsageDetail } from "@/lib/experiments/meter";
+import type { ExperimentId } from "@/lib/experiments/registry";
+
+export type { ExperimentView, UsageDetail };
+
+export interface ExperimentsList {
+  locked: boolean;
+  experiments: ExperimentView[];
+}
+
+export interface ExperimentDetail extends ExperimentView {
+  locked: boolean;
+  detail: UsageDetail;
+}
+
+export const experimentsKeys = {
+  all: ["experiments"] as const,
+  detail: (id: string) => ["experiments", id] as const,
+};
+
+async function json<T>(res: Response): Promise<T> {
+  const data = await res.json();
+  if (!res.ok) throw new Error(data.error || "Request failed");
+  return data;
+}
+
+export function useExperimentsQuery() {
+  return useQuery({
+    queryKey: experimentsKeys.all,
+    queryFn: async () => json<ExperimentsList>(await fetch("/api/experiments")),
+    staleTime: 10_000,
+  });
+}
+
+export function useExperimentDetailQuery(id: string | null) {
+  return useQuery({
+    queryKey: experimentsKeys.detail(id ?? ""),
+    queryFn: async () =>
+      json<ExperimentDetail>(await fetch(`/api/experiments/${id}`)),
+    enabled: !!id,
+    staleTime: 10_000,
+  });
+}
+
+// The client's one check: false until the list has loaded.
+export function useExperiment(id: ExperimentId): boolean {
+  const { data } = useExperimentsQuery();
+  return !!data?.experiments.find((e) => e.id === id)?.on;
+}
+
+export function useSetExperiment() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({ id, on }: { id: string; on: boolean }) =>
+      json<ExperimentView>(
+        await fetch(`/api/experiments/${id}`, {
+          method: "PUT",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ on }),
+        })
+      ),
+    onSuccess: () =>
+      queryClient.invalidateQueries({ queryKey: experimentsKeys.all }),
+  });
+}

package/lib/db/migrations.ts

@@ -2028,6 +2028,39 @@ const migrations: Migration[] = [
       `);
     },
   },
+  {
+    id: 85,
+    name: "experiment_usage",
+    up: (db) => {
+      // What each experiment did: model calls with their cost, and the
+      // non-model work (scripts run, suggestions shown and decided).
+      db.exec(`
+        CREATE TABLE IF NOT EXISTS experiment_usage (
+          id INTEGER PRIMARY KEY AUTOINCREMENT,
+          experiment_id TEXT NOT NULL,
+          event TEXT NOT NULL,
+          trigger TEXT NOT NULL,
+          session_id TEXT,
+          workspace_id TEXT,
+          model TEXT,
+          provider TEXT,
+          input_tokens INTEGER NOT NULL DEFAULT 0,
+          cache_write_tokens INTEGER NOT NULL DEFAULT 0,
+          cache_read_tokens INTEGER NOT NULL DEFAULT 0,
+          output_tokens INTEGER NOT NULL DEFAULT 0,
+          cost_usd REAL NOT NULL DEFAULT 0,
+          duration_ms INTEGER,
+          ok INTEGER NOT NULL DEFAULT 1,
+          detail TEXT,
+          at INTEGER NOT NULL
+        );
+        CREATE INDEX IF NOT EXISTS idx_experiment_usage_exp_at
+          ON experiment_usage(experiment_id, at);
+        CREATE INDEX IF NOT EXISTS idx_experiment_usage_session
+          ON experiment_usage(session_id, experiment_id, event);
+      `);
+    },
+  },
 ];
 
 // `upTo`: stop after this id (tests that start from an older database).

package/lib/done/deadline.ts

@@ -0,0 +1,45 @@
+// Done merges, stops the agent and cleans up; any step can stall on a lock or
+// a slow remote. A request must always end: past this it answers that it is
+// still going, rather than leaving the row on "Merging…".
+export const DONE_DEADLINE_MS = 150_000;
+
+export async function withinDeadline<T>(
+  work: Promise<T>,
+  name: string,
+  ms = DONE_DEADLINE_MS
+): Promise<T> {
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  const late = new Promise<never>((_, reject) => {
+    timer = setTimeout(
+      () =>
+        reject(
+          new Error(
+            `Done on ${name} is taking longer than ${Math.round(ms / 1000)}s and is still running in the background. Check the row in a moment; if it hasn't moved, try Done again.`
+          )
+        ),
+      ms
+    );
+  });
+  // The work keeps going; its late failure must not be an unhandled rejection.
+  work.catch(() => {});
+  try {
+    return await Promise.race([work, late]);
+  } finally {
+    clearTimeout(timer);
+  }
+}
+
+// Best-effort: waits for `work` up to `ms`, then carries on without it.
+export async function withTimeout(
+  work: Promise<unknown>,
+  ms: number
+): Promise<void> {
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  work.catch(() => {});
+  await Promise.race([
+    work,
+    new Promise((resolve) => {
+      timer = setTimeout(resolve, ms);
+    }),
+  ]).finally(() => clearTimeout(timer));
+}

package/lib/done/index.ts

@@ -22,6 +22,7 @@ import { archiveSession } from "./archive";
 import { settleSession } from "../sidebar/shelf-state";
 import { demoMode } from "../security/demo";
 import { planDone } from "./plan";
+import { withTimeout } from "./deadline";
 import { deleteMergedRemote } from "./remote";
 import { settleWorktree, type WorktreeFate } from "./worktree";
 import { sessionMergePolicy } from "../tasks/finish";
@@ -31,6 +32,7 @@ import { doneOnPeer, peerSessionLink } from "../hosts/peer-actions";
 import { hostLink } from "../hosts/remote-api";
 import { doneHeldTask } from "../tasks/held-remote";
 import { captureMergedTask } from "../session-logs";
+import { sessionEnded } from "../experiments/hooks";
 import { pushMerged } from "../notify/push/events";
 
 export interface DoneOptions {
@@ -111,6 +113,7 @@ function mark(s: Session, status: "merged" | "done", pr: TaskPR | null) {
       : `UPDATE sessions SET task_status = 'done' WHERE id = ?`
   ).run(s.id);
   syncTaskCardInBackground(s, status, pr);
+  void sessionEnded(s.id, status);
   if (status === "merged") {
     pushMerged(s.id);
     void captureMergedTask(s.id, { head: pr?.head });
@@ -151,7 +154,9 @@ export async function doneSession(
   // A sign-off just before this (the orchestrator's sign_off, then done)
   // is still cleaning up in the background: read what it leaves.
   await mergeSettled(s.id);
-  await statusDetector.refreshCache();
+  // A quick change has no tmux session, and a listing that stalls (a slow
+  // ssh host, a loaded tmux) must not hold up a merge that doesn't read it.
+  if (!s.quick_of) await withTimeout(statusDetector.refreshCache(), 10_000);
   const plan = await planDone(s, opts.callerId);
   if (plan.action === "refuse") throw new Error(plan.reason);
   if (plan.action === "merge" && opts.noMerge)

package/lib/experiments/hooks.ts

@@ -0,0 +1,31 @@
+import { experimentOn } from ".";
+import { EXPERIMENTS, type ExperimentId } from "./registry";
+
+export type EndHow = "done" | "merged" | "recipe-settled";
+export type EndHook = (sessionId: string, how: EndHow) => Promise<void> | void;
+
+// What each experiment does when a session ends. An experiment adds itself
+// here; one that is off is never called.
+export const END_HOOKS: Partial<Record<ExperimentId, EndHook>> = {};
+
+// A merge is seen again on every poll; each session is handed on once.
+const seen = new Set<string>();
+export const resetEndHooks = () => seen.clear();
+
+// Called where sessions end. Never makes the caller wait or fail.
+export function sessionEnded(sessionId: string, how: EndHow): Promise<void> {
+  if (seen.has(sessionId)) return Promise.resolve();
+  seen.add(sessionId);
+  return (async () => {
+    await new Promise<void>((r) => setImmediate(r));
+    for (const { id } of EXPERIMENTS) {
+      const hook = END_HOOKS[id];
+      if (!hook || !experimentOn(id)) continue;
+      try {
+        await hook(sessionId, how);
+      } catch (error) {
+        console.error(`[experiments] ${id} on ${sessionId}:`, error);
+      }
+    }
+  })();
+}

package/lib/experiments/index.ts

@@ -0,0 +1,19 @@
+import { getSetting, putSetting } from "../settings-store";
+import { type ExperimentId } from "./registry";
+
+type Env = Record<string, string | undefined>;
+
+const key = (id: ExperimentId) => `experiments.${id}`;
+
+// AGENTOS_EXPERIMENTS=off pins every experiment off, like the update banner.
+export const experimentsLocked = (env: Env = process.env) =>
+  env.AGENTOS_EXPERIMENTS === "off";
+
+// The one check, on the server. Off by default: no row means off.
+export function experimentOn(id: ExperimentId, env: Env = process.env) {
+  if (experimentsLocked(env)) return false;
+  return getSetting(key(id)) === "1";
+}
+
+export const setExperiment = (id: ExperimentId, on: boolean) =>
+  putSetting(key(id), on ? "1" : null);