stagent 0.4.0 → 0.6.0

package/src/components/schedules/schedule-list.tsx

@@ -6,11 +6,12 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { Button } from "@/components/ui/button";
 import { ScheduleCreateSheet } from "./schedule-create-sheet";
 import { ScheduleDetailSheet } from "./schedule-detail-sheet";
+import { ScheduleEditSheet } from "./schedule-edit-sheet";
 import { ScheduleStatusBadge } from "./schedule-status-badge";
 import { ConfirmDialog } from "@/components/shared/confirm-dialog";
 import { EmptyState } from "@/components/shared/empty-state";
 import { describeCron } from "@/lib/schedules/interval-parser";
-import { Clock, Pause, Play, Trash2 } from "lucide-react";
+import { Clock, Heart, Pause, Play, Trash2 } from "lucide-react";
 import { toast } from "sonner";
 
 interface Schedule {
@@ -27,6 +28,8 @@ interface Schedule {
   lastFiredAt: string | null;
   nextFireAt: string | null;
   createdAt: string;
+  type: "scheduled" | "heartbeat";
+  suppressionCount: number;
 }
 
 interface ScheduleListProps {
@@ -42,6 +45,7 @@ export function ScheduleList({ projects, initialSelectedId }: ScheduleListProps)
     initialSelectedId ?? null
   );
   const [createOpen, setCreateOpen] = useState(false);
+  const [editingScheduleId, setEditingScheduleId] = useState<string | null>(null);
 
   const refresh = useCallback(async () => {
     const res = await fetch("/api/schedules");
@@ -153,7 +157,10 @@ export function ScheduleList({ projects, initialSelectedId }: ScheduleListProps)
             >
               <CardHeader className="pb-2">
                 <div className="flex items-center justify-between gap-2 min-w-0">
-                  <CardTitle className="min-w-0 truncate text-base font-medium">
+                  <CardTitle className="min-w-0 truncate text-base font-medium flex items-center gap-1.5">
+                    {sched.type === "heartbeat" && (
+                      <Heart className="h-3.5 w-3.5 text-rose-500 shrink-0" />
+                    )}
                     {sched.name}
                   </CardTitle>
                   <ScheduleStatusBadge status={sched.status} />
@@ -167,6 +174,14 @@ export function ScheduleList({ projects, initialSelectedId }: ScheduleListProps)
                     {sched.firingCount} firing
                     {sched.firingCount !== 1 ? "s" : ""}
                   </span>
+                  {sched.type === "heartbeat" && sched.suppressionCount > 0 && (
+                    <>
+                      <span>·</span>
+                      <span className="text-emerald-600">
+                        {sched.suppressionCount} suppressed
+                      </span>
+                    </>
+                  )}
                   {!sched.recurs && (
                     <>
                       <span>·</span>
@@ -247,6 +262,20 @@ export function ScheduleList({ projects, initialSelectedId }: ScheduleListProps)
         }}
         onDeleted={refresh}
         onUpdated={refresh}
+        onEdit={(id) => {
+          setSelectedScheduleId(null);
+          setEditingScheduleId(id);
+        }}
+      />
+
+      <ScheduleEditSheet
+        scheduleId={editingScheduleId}
+        projects={projects}
+        open={editingScheduleId !== null}
+        onOpenChange={(open) => {
+          if (!open) setEditingScheduleId(null);
+        }}
+        onUpdated={refresh}
       />
 
       <ConfirmDialog

package/src/components/settings/auth-method-selector.tsx

@@ -7,6 +7,7 @@ import type { AuthMethod } from "@/lib/constants/settings";
 interface AuthMethodSelectorProps {
   value: AuthMethod;
   onChange: (method: AuthMethod) => void;
+  recommendedMethod?: AuthMethod | null;
 }
 
 const methods = [
@@ -24,7 +25,7 @@ const methods = [
   },
 ];
 
-export function AuthMethodSelector({ value, onChange }: AuthMethodSelectorProps) {
+export function AuthMethodSelector({ value, onChange, recommendedMethod }: AuthMethodSelectorProps) {
   return (
     <div className="space-y-2">
       <p className="text-sm font-medium">Authentication Method</p>
@@ -58,6 +59,11 @@ export function AuthMethodSelector({ value, onChange }: AuthMethodSelectorProps)
               <span className="text-xs text-muted-foreground">
                 {method.description}
               </span>
+              {recommendedMethod === method.id && !isSelected && (
+                <span className="text-[10px] font-medium uppercase tracking-wider text-primary/70 mt-0.5">
+                  Recommended
+                </span>
+              )}
             </button>
           );
         })}

package/src/components/settings/browser-tools-section.tsx

@@ -0,0 +1,247 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import { Globe, Chrome, Theater, ChevronDown } from "lucide-react";
+import { toast } from "sonner";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Switch } from "@/components/ui/switch";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { FormSectionCard } from "@/components/shared/form-section-card";
+
+interface BrowserToolsState {
+  chromeDevtoolsEnabled: boolean;
+  playwrightEnabled: boolean;
+  chromeDevtoolsConfig: string;
+  playwrightConfig: string;
+}
+
+const DEFAULT_STATE: BrowserToolsState = {
+  chromeDevtoolsEnabled: false,
+  playwrightEnabled: false,
+  chromeDevtoolsConfig: "",
+  playwrightConfig: "",
+};
+
+export function BrowserToolsSection() {
+  const [state, setState] = useState<BrowserToolsState>(DEFAULT_STATE);
+  const [saving, setSaving] = useState(false);
+  const [chromeExpanded, setChromeExpanded] = useState(false);
+  const [playwrightExpanded, setPlaywrightExpanded] = useState(false);
+
+  const fetchSettings = useCallback(async () => {
+    try {
+      const res = await fetch("/api/settings/browser-tools");
+      if (res.ok) {
+        const data = await res.json();
+        setState(data);
+      }
+    } catch {
+      // Use defaults
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchSettings();
+  }, [fetchSettings]);
+
+  const handleToggle = async (
+    field: "chromeDevtoolsEnabled" | "playwrightEnabled",
+    value: boolean
+  ) => {
+    setState((prev) => ({ ...prev, [field]: value }));
+    setSaving(true);
+    try {
+      const res = await fetch("/api/settings/browser-tools", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ [field]: value }),
+      });
+      if (res.ok) {
+        const data = await res.json();
+        setState(data);
+        const label =
+          field === "chromeDevtoolsEnabled"
+            ? "Chrome DevTools MCP"
+            : "Playwright MCP";
+        toast.success(`${label} ${value ? "enabled" : "disabled"}`);
+      }
+    } catch {
+      toast.error("Failed to save setting");
+      setState((prev) => ({ ...prev, [field]: !value }));
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleConfigSave = async (
+    field: "chromeDevtoolsConfig" | "playwrightConfig",
+    value: string
+  ) => {
+    setSaving(true);
+    try {
+      await fetch("/api/settings/browser-tools", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ [field]: value }),
+      });
+      toast.success("Configuration saved");
+    } catch {
+      toast.error("Failed to save configuration");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Globe className="h-5 w-5" />
+          Browser Tools
+        </CardTitle>
+        <CardDescription>
+          Enable browser automation MCP servers for chat and task agents.
+          Read-only tools (screenshots, snapshots) are auto-approved. Mutation
+          tools (click, navigate, type) require permission.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* Chrome DevTools MCP */}
+        <FormSectionCard
+          icon={Chrome}
+          title="Chrome DevTools MCP"
+          hint="Connect to a running Chrome instance via CDP. Best for debugging live apps, performance profiling, and network inspection."
+        >
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <Label htmlFor="chrome-devtools-toggle" className="text-sm">
+                {state.chromeDevtoolsEnabled ? "Enabled" : "Disabled"}
+              </Label>
+              <Switch
+                id="chrome-devtools-toggle"
+                checked={state.chromeDevtoolsEnabled}
+                disabled={saving}
+                onCheckedChange={(v) =>
+                  handleToggle("chromeDevtoolsEnabled", v)
+                }
+              />
+            </div>
+
+            {state.chromeDevtoolsEnabled && (
+              <>
+                <button
+                  type="button"
+                  onClick={() => setChromeExpanded((e) => !e)}
+                  className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  <ChevronDown
+                    className={`h-3 w-3 transition-transform ${chromeExpanded ? "rotate-0" : "-rotate-90"}`}
+                  />
+                  Advanced configuration
+                </button>
+                {chromeExpanded && (
+                  <div className="space-y-2">
+                    <Label
+                      htmlFor="chrome-config"
+                      className="text-xs text-muted-foreground"
+                    >
+                      Extra CLI arguments (e.g.{" "}
+                      <code className="text-[11px]">
+                        --headless --browser-url http://localhost:9222
+                      </code>
+                      )
+                    </Label>
+                    <Input
+                      id="chrome-config"
+                      placeholder="--headless"
+                      value={state.chromeDevtoolsConfig}
+                      disabled={saving}
+                      onChange={(e) =>
+                        setState((prev) => ({
+                          ...prev,
+                          chromeDevtoolsConfig: e.target.value,
+                        }))
+                      }
+                      onBlur={(e) =>
+                        handleConfigSave("chromeDevtoolsConfig", e.target.value)
+                      }
+                    />
+                  </div>
+                )}
+              </>
+            )}
+          </div>
+        </FormSectionCard>
+
+        {/* Playwright MCP */}
+        <FormSectionCard
+          icon={Theater}
+          title="Playwright MCP"
+          hint="Launch a headless browser for autonomous tasks. Best for research, scraping, testing, and structured page analysis."
+        >
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <Label htmlFor="playwright-toggle" className="text-sm">
+                {state.playwrightEnabled ? "Enabled" : "Disabled"}
+              </Label>
+              <Switch
+                id="playwright-toggle"
+                checked={state.playwrightEnabled}
+                disabled={saving}
+                onCheckedChange={(v) => handleToggle("playwrightEnabled", v)}
+              />
+            </div>
+
+            {state.playwrightEnabled && (
+              <>
+                <button
+                  type="button"
+                  onClick={() => setPlaywrightExpanded((e) => !e)}
+                  className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  <ChevronDown
+                    className={`h-3 w-3 transition-transform ${playwrightExpanded ? "rotate-0" : "-rotate-90"}`}
+                  />
+                  Advanced configuration
+                </button>
+                {playwrightExpanded && (
+                  <div className="space-y-2">
+                    <Label
+                      htmlFor="playwright-config"
+                      className="text-xs text-muted-foreground"
+                    >
+                      Extra CLI arguments (e.g.{" "}
+                      <code className="text-[11px]">--browser firefox</code>)
+                    </Label>
+                    <Input
+                      id="playwright-config"
+                      placeholder="--browser chromium"
+                      value={state.playwrightConfig}
+                      disabled={saving}
+                      onChange={(e) =>
+                        setState((prev) => ({
+                          ...prev,
+                          playwrightConfig: e.target.value,
+                        }))
+                      }
+                      onBlur={(e) =>
+                        handleConfigSave("playwrightConfig", e.target.value)
+                      }
+                    />
+                  </div>
+                )}
+              </>
+            )}
+          </div>
+        </FormSectionCard>
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/settings/budget-guardrails-section.tsx

@@ -56,6 +56,19 @@ function buildFormState(policy: BudgetPolicy): BudgetFormState {
           policy.runtimes["openai-codex-app-server"].monthlySpendCapUsd
         ),
       },
+      "anthropic-direct": {
+        monthlySpendCapUsd: toInputValue(
+          policy.runtimes["anthropic-direct"].monthlySpendCapUsd
+        ),
+      },
+      "openai-direct": {
+        monthlySpendCapUsd: toInputValue(
+          policy.runtimes["openai-direct"].monthlySpendCapUsd
+        ),
+      },
+      ollama: {
+        monthlySpendCapUsd: "", // Ollama is always $0
+      },
     },
   };
 }
@@ -77,6 +90,19 @@ function buildPayload(form: BudgetFormState): BudgetPolicy {
           form.runtimes["openai-codex-app-server"].monthlySpendCapUsd
         ),
       },
+      "anthropic-direct": {
+        monthlySpendCapUsd: toNullableNumber(
+          form.runtimes["anthropic-direct"].monthlySpendCapUsd
+        ),
+      },
+      "openai-direct": {
+        monthlySpendCapUsd: toNullableNumber(
+          form.runtimes["openai-direct"].monthlySpendCapUsd
+        ),
+      },
+      ollama: {
+        monthlySpendCapUsd: null, // Ollama is always $0 — no budget needed
+      },
     },
   };
 }
@@ -162,7 +188,7 @@ function applyBudgetSplit(
   current: BudgetFormState,
   overallMonthlySpendCapUsd: string,
   activeRuntimeIds: AgentRuntimeId[],
-  claudePercent = deriveClaudeAllocation(current)
+  anthropicPercent = deriveClaudeAllocation(current)
 ): BudgetFormState {
   const overall = toNullableNumber(overallMonthlySpendCapUsd);
   const next: BudgetFormState = {
@@ -173,31 +199,56 @@ function applyBudgetSplit(
       "openai-codex-app-server": {
         ...current.runtimes["openai-codex-app-server"],
       },
+      "anthropic-direct": { ...current.runtimes["anthropic-direct"] },
+      "openai-direct": { ...current.runtimes["openai-direct"] },
     },
   };
 
   if (overall == null || activeRuntimeIds.length === 0) {
     next.runtimes["claude-code"].monthlySpendCapUsd = "";
     next.runtimes["openai-codex-app-server"].monthlySpendCapUsd = "";
+    next.runtimes["anthropic-direct"].monthlySpendCapUsd = "";
+    next.runtimes["openai-direct"].monthlySpendCapUsd = "";
     return next;
   }
 
-  if (activeRuntimeIds.length === 1) {
-    const runtimeId = activeRuntimeIds[0];
-    next.runtimes[runtimeId].monthlySpendCapUsd = String(overall);
-    for (const candidate of ["claude-code", "openai-codex-app-server"] as const) {
-      if (candidate !== runtimeId) {
-        next.runtimes[candidate].monthlySpendCapUsd = "";
-      }
-    }
+  // Determine which providers have active runtimes
+  const hasAnthropic = activeRuntimeIds.some(
+    (id) => id === "claude-code" || id === "anthropic-direct"
+  );
+  const hasOpenAI = activeRuntimeIds.some(
+    (id) => id === "openai-codex-app-server" || id === "openai-direct"
+  );
+
+  if (hasAnthropic && !hasOpenAI) {
+    // Single provider: Anthropic gets 100%
+    const cap = String(overall);
+    next.runtimes["claude-code"].monthlySpendCapUsd = cap;
+    next.runtimes["anthropic-direct"].monthlySpendCapUsd = cap;
+    next.runtimes["openai-codex-app-server"].monthlySpendCapUsd = "";
+    next.runtimes["openai-direct"].monthlySpendCapUsd = "";
     return next;
   }
 
-  const claudeCap = roundUsd(overall * (claudePercent / 100));
-  const openAICap = roundUsd(Math.max(overall - claudeCap, 0));
+  if (hasOpenAI && !hasAnthropic) {
+    // Single provider: OpenAI gets 100%
+    const cap = String(overall);
+    next.runtimes["openai-codex-app-server"].monthlySpendCapUsd = cap;
+    next.runtimes["openai-direct"].monthlySpendCapUsd = cap;
+    next.runtimes["claude-code"].monthlySpendCapUsd = "";
+    next.runtimes["anthropic-direct"].monthlySpendCapUsd = "";
+    return next;
+  }
 
-  next.runtimes["claude-code"].monthlySpendCapUsd = String(claudeCap);
+  // Both providers: split by anthropicPercent
+  const anthropicCap = roundUsd(overall * (anthropicPercent / 100));
+  const openAICap = roundUsd(Math.max(overall - anthropicCap, 0));
+
+  // Both runtimes under a provider share the provider's allocation
+  next.runtimes["claude-code"].monthlySpendCapUsd = String(anthropicCap);
+  next.runtimes["anthropic-direct"].monthlySpendCapUsd = String(anthropicCap);
   next.runtimes["openai-codex-app-server"].monthlySpendCapUsd = String(openAICap);
+  next.runtimes["openai-direct"].monthlySpendCapUsd = String(openAICap);
   return next;
 }
 
@@ -302,9 +353,16 @@ export function BudgetGuardrailsSection() {
   const overallMonthly = getStatus(snapshot.statuses, "overall", "monthly");
   const blocked = snapshot.statuses.filter((status) => status.health === "blocked");
   const warnings = snapshot.statuses.filter((status) => status.health === "warning");
-  const claudeAllocation = deriveClaudeAllocation(form);
+  const anthropicAllocation = deriveClaudeAllocation(form);
   const claudeRuntime = snapshot.runtimeStates["claude-code"];
-  const showSplitSlider = activeRuntimes.length === 2;
+  // Show split slider when both providers have active runtimes
+  const hasAnthropicRuntimes = activeRuntimes.some(
+    (r) => r.providerId === "anthropic"
+  );
+  const hasOpenAIRuntimes = activeRuntimes.some(
+    (r) => r.providerId === "openai"
+  );
+  const showSplitSlider = hasAnthropicRuntimes && hasOpenAIRuntimes;
 
   return (
     <Card className="surface-card">
@@ -402,11 +460,11 @@ export function BudgetGuardrailsSection() {
 
                   <div className="space-y-3">
                     <div className="flex items-center justify-between gap-3 text-sm">
-                      <span className="font-medium">Claude</span>
-                      <span className="text-muted-foreground">{claudeAllocation}%</span>
+                      <span className="font-medium">Anthropic</span>
+                      <span className="text-muted-foreground">{anthropicAllocation}%</span>
                     </div>
                     <Slider
-                      value={[claudeAllocation]}
+                      value={[anthropicAllocation]}
                       min={0}
                       max={100}
                       step={1}
@@ -424,42 +482,47 @@ export function BudgetGuardrailsSection() {
                       }
                     />
                     <div className="grid gap-3 md:grid-cols-2">
-                      {activeRuntimes.map((runtime) => (
-                        <div key={runtime.runtimeId} className="rounded-xl border border-border/60 bg-background/40 p-3">
-                          <p className="text-sm font-medium">{runtime.label}</p>
-                          <p className="mt-1 text-lg font-semibold">
-                            {formatCurrencyUsd(
-                              toNullableNumber(form.runtimes[runtime.runtimeId].monthlySpendCapUsd)
-                            )}
-                          </p>
-                          <p className="text-xs text-muted-foreground">
-                            {runtime.runtimeId === "claude-code"
-                              ? `${claudeAllocation}% of the monthly cap`
-                              : `${100 - claudeAllocation}% of the monthly cap`}
-                          </p>
-                        </div>
-                      ))}
+                      <div className="rounded-xl border border-border/60 bg-background/40 p-3">
+                        <p className="text-sm font-medium">Anthropic</p>
+                        <p className="mt-1 text-lg font-semibold">
+                          {formatCurrencyUsd(
+                            toNullableNumber(form.runtimes["claude-code"].monthlySpendCapUsd)
+                          )}
+                        </p>
+                        <p className="text-xs text-muted-foreground">
+                          {anthropicAllocation}% — shared by Claude Code &amp; Anthropic Direct
+                        </p>
+                      </div>
+                      <div className="rounded-xl border border-border/60 bg-background/40 p-3">
+                        <p className="text-sm font-medium">OpenAI</p>
+                        <p className="mt-1 text-lg font-semibold">
+                          {formatCurrencyUsd(
+                            toNullableNumber(form.runtimes["openai-codex-app-server"].monthlySpendCapUsd)
+                          )}
+                        </p>
+                        <p className="text-xs text-muted-foreground">
+                          {100 - anthropicAllocation}% — shared by Codex &amp; OpenAI Direct
+                        </p>
+                      </div>
                     </div>
                   </div>
                 </div>
               </div>
             ) : (
-              <div className="grid gap-3 md:grid-cols-2">
-                {activeRuntimes.map((runtime) => (
-                  <div key={runtime.runtimeId} className="surface-panel rounded-2xl p-4">
-                    <SectionEyebrow icon={Wallet} label="Provider Cap" />
-                    <h3 className="mt-1 text-sm font-semibold">{runtime.label}</h3>
-                    <p className="mt-2 text-lg font-semibold">
-                      {formatCurrencyUsd(
-                        toNullableNumber(form.runtimes[runtime.runtimeId].monthlySpendCapUsd)
-                      )}
-                    </p>
-                    <p className="text-xs text-muted-foreground">
-                      {runtime.label} receives the full monthly cap because it is the only
-                      configured paid provider.
-                    </p>
-                  </div>
-                ))}
+              <div className="surface-panel rounded-2xl p-4">
+                <SectionEyebrow icon={Wallet} label="Provider Cap" />
+                <h3 className="mt-1 text-sm font-semibold">
+                  {hasAnthropicRuntimes ? "Anthropic" : "OpenAI"}
+                </h3>
+                <p className="mt-2 text-lg font-semibold">
+                  {formatCurrencyUsd(
+                    toNullableNumber(form.overallMonthlySpendCapUsd)
+                  )}
+                </p>
+                <p className="text-xs text-muted-foreground">
+                  Full monthly cap — single provider with{" "}
+                  {activeRuntimes.length} runtime{activeRuntimes.length > 1 ? "s" : ""}.
+                </p>
               </div>
             )}