stagent 0.1.0

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

@@ -0,0 +1,242 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import { useRouter } from "next/navigation";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Button } from "@/components/ui/button";
+import { ScheduleCreateDialog } from "./schedule-create-dialog";
+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 { toast } from "sonner";
+
+interface Schedule {
+  id: string;
+  name: string;
+  prompt: string;
+  cronExpression: string;
+  assignedAgent: string | null;
+  agentProfile: string | null;
+  recurs: boolean;
+  status: string;
+  maxFirings: number | null;
+  firingCount: number;
+  lastFiredAt: string | null;
+  nextFireAt: string | null;
+  createdAt: string;
+}
+
+interface ScheduleListProps {
+  projects: { id: string; name: string }[];
+}
+
+export function ScheduleList({ projects }: ScheduleListProps) {
+  const router = useRouter();
+  const [schedules, setSchedules] = useState<Schedule[]>([]);
+  const [loaded, setLoaded] = useState(false);
+  const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null);
+
+  const refresh = useCallback(async () => {
+    const res = await fetch("/api/schedules");
+    if (res.ok) setSchedules(await res.json());
+    setLoaded(true);
+  }, []);
+
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
+  async function handlePauseResume(id: string, currentStatus: string) {
+    const newStatus = currentStatus === "active" ? "paused" : "active";
+    const res = await fetch(`/api/schedules/${id}`, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ status: newStatus }),
+    });
+    if (res.ok) {
+      toast.success(
+        newStatus === "paused" ? "Schedule paused" : "Schedule resumed"
+      );
+      refresh();
+    } else {
+      const data = await res.json().catch(() => null);
+      toast.error(data?.error ?? "Failed to update schedule");
+    }
+  }
+
+  async function handleDelete(id: string) {
+    setConfirmDeleteId(null);
+    const res = await fetch(`/api/schedules/${id}`, { method: "DELETE" });
+    if (res.ok) {
+      toast.success("Schedule deleted");
+      refresh();
+    } else {
+      const data = await res.json().catch(() => null);
+      toast.error(data?.error ?? "Failed to delete schedule");
+    }
+  }
+
+  function formatRelative(dateStr: string | null): string {
+    if (!dateStr) return "—";
+    const date = new Date(dateStr);
+    const now = new Date();
+    const diffMs = date.getTime() - now.getTime();
+    const absDiff = Math.abs(diffMs);
+
+    if (absDiff < 60_000) return diffMs > 0 ? "in <1m" : "<1m ago";
+    if (absDiff < 3_600_000) {
+      const mins = Math.round(absDiff / 60_000);
+      return diffMs > 0 ? `in ${mins}m` : `${mins}m ago`;
+    }
+    if (absDiff < 86_400_000) {
+      const hrs = Math.round(absDiff / 3_600_000);
+      return diffMs > 0 ? `in ${hrs}h` : `${hrs}h ago`;
+    }
+    return date.toLocaleDateString();
+  }
+
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-2xl font-bold">Schedules</h1>
+        <ScheduleCreateDialog projects={projects} onCreated={refresh} />
+      </div>
+
+      {!loaded ? (
+        <div
+          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
+          aria-live="polite"
+        >
+          {[1, 2, 3].map((i) => (
+            <Card key={i}>
+              <CardHeader className="pb-2">
+                <div className="flex items-center justify-between">
+                  <Skeleton className="h-5 w-32" />
+                  <Skeleton className="h-5 w-16 rounded-full" />
+                </div>
+              </CardHeader>
+              <CardContent>
+                <Skeleton className="h-3 w-24" />
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      ) : schedules.length === 0 ? (
+        <EmptyState
+          icon={Clock}
+          heading="No schedules yet"
+          description="Create a schedule to run agent tasks on a recurring interval or one-time delay."
+        />
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {schedules.map((sched) => (
+            <Card
+              key={sched.id}
+              tabIndex={0}
+              className="cursor-pointer transition-colors hover:bg-accent/50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-xl"
+              onClick={() => router.push(`/schedules/${sched.id}`)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  router.push(`/schedules/${sched.id}`);
+                }
+              }}
+            >
+              <CardHeader className="pb-2">
+                <div className="flex items-center justify-between">
+                  <CardTitle className="text-base font-medium">
+                    {sched.name}
+                  </CardTitle>
+                  <ScheduleStatusBadge status={sched.status} />
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="flex items-center gap-3 text-xs text-muted-foreground">
+                  <span>{describeCron(sched.cronExpression)}</span>
+                  <span>·</span>
+                  <span>
+                    {sched.firingCount} firing
+                    {sched.firingCount !== 1 ? "s" : ""}
+                  </span>
+                  {!sched.recurs && (
+                    <>
+                      <span>·</span>
+                      <span>One-shot</span>
+                    </>
+                  )}
+                </div>
+                <p className="text-xs text-muted-foreground line-clamp-2 mt-1.5">
+                  {sched.prompt.length > 80
+                    ? sched.prompt.slice(0, 80) + "..."
+                    : sched.prompt}
+                </p>
+                {(sched.assignedAgent || sched.agentProfile) && (
+                  <p className="text-xs text-muted-foreground mt-1">
+                    {sched.assignedAgent ? `Runtime: ${sched.assignedAgent}` : "Default runtime"}
+                    {sched.agentProfile ? ` · Profile: ${sched.agentProfile}` : ""}
+                  </p>
+                )}
+                {sched.status === "active" && sched.nextFireAt && (
+                  <p className="text-xs text-muted-foreground mt-1">
+                    Next: {formatRelative(sched.nextFireAt)}
+                  </p>
+                )}
+                <div className="flex items-center gap-1 mt-3">
+                  {(sched.status === "active" || sched.status === "paused") && (
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-7 w-7"
+                      aria-label={
+                        sched.status === "active"
+                          ? "Pause schedule"
+                          : "Resume schedule"
+                      }
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handlePauseResume(sched.id, sched.status);
+                      }}
+                    >
+                      {sched.status === "active" ? (
+                        <Pause className="h-3.5 w-3.5" />
+                      ) : (
+                        <Play className="h-3.5 w-3.5" />
+                      )}
+                    </Button>
+                  )}
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-7 w-7 text-destructive"
+                    aria-label="Delete schedule"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setConfirmDeleteId(sched.id);
+                    }}
+                  >
+                    <Trash2 className="h-3.5 w-3.5" />
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+
+      <ConfirmDialog
+        open={confirmDeleteId !== null}
+        onOpenChange={(open) => {
+          if (!open) setConfirmDeleteId(null);
+        }}
+        title="Delete Schedule"
+        description="This will permanently delete this schedule. Child tasks will be kept."
+        confirmLabel="Delete"
+        onConfirm={() => confirmDeleteId && handleDelete(confirmDeleteId)}
+        destructive
+      />
+    </div>
+  );
+}

package/src/components/schedules/schedule-status-badge.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { scheduleStatusVariant } from "@/lib/constants/status-colors";
+
+interface ScheduleStatusBadgeProps {
+  status: string;
+}
+
+export function ScheduleStatusBadge({ status }: ScheduleStatusBadgeProps) {
+  return (
+    <Badge variant={scheduleStatusVariant[status] ?? "secondary"}>
+      {status}
+    </Badge>
+  );
+}

package/src/components/settings/api-key-form.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Loader2, Eye, EyeOff, CheckCircle2, XCircle } from "lucide-react";
+
+interface ApiKeyFormProps {
+  hasKey: boolean;
+  onSave: (key: string) => Promise<void>;
+  onTest: () => Promise<{ connected: boolean; apiKeySource?: string; error?: string }>;
+  keyPrefix?: string;
+  placeholder?: string;
+  maskedPrefix?: string;
+  envVarName?: string;
+  testButtonLabel?: string;
+}
+
+export function ApiKeyForm({
+  hasKey,
+  onSave,
+  onTest,
+  keyPrefix = "sk-ant-",
+  placeholder = "sk-ant-...",
+  maskedPrefix = "sk-ant-••••••",
+  envVarName = "ANTHROPIC_API_KEY",
+  testButtonLabel = "Test Connection",
+}: ApiKeyFormProps) {
+  const [key, setKey] = useState("");
+  const [showInput, setShowInput] = useState(!hasKey);
+  const [showKey, setShowKey] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [testing, setTesting] = useState(false);
+  const [testResult, setTestResult] = useState<{
+    connected: boolean;
+    error?: string;
+  } | null>(null);
+
+  async function handleSave() {
+    if (!key.startsWith(keyPrefix)) return;
+    setSaving(true);
+    setTestResult(null);
+    try {
+      await onSave(key);
+      setKey("");
+      setShowInput(false);
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function handleTest() {
+    setTesting(true);
+    setTestResult(null);
+    try {
+      const result = await onTest();
+      setTestResult(result);
+    } finally {
+      setTesting(false);
+    }
+  }
+
+  return (
+    <div className="space-y-4">
+      <Label className="text-sm font-medium">API Key</Label>
+
+      {hasKey && !showInput ? (
+        <div className="flex items-center gap-3">
+          <div className="flex-1 rounded-md border px-3 py-2 text-sm text-muted-foreground bg-muted/50">
+            Key configured ({maskedPrefix})
+          </div>
+          <Button variant="outline" size="sm" onClick={() => setShowInput(true)}>
+            Replace
+          </Button>
+        </div>
+      ) : (
+        <div className="flex items-center gap-2">
+          <div className="relative flex-1">
+            <Input
+              type={showKey ? "text" : "password"}
+              placeholder={placeholder}
+              value={key}
+              onChange={(e) => setKey(e.target.value)}
+              className="pr-10"
+            />
+            <button
+              type="button"
+              onClick={() => setShowKey(!showKey)}
+              className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+            >
+              {showKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+            </button>
+          </div>
+          <Button
+            size="sm"
+            disabled={!key.startsWith(keyPrefix) || saving}
+            onClick={handleSave}
+          >
+            {saving && <Loader2 className="mr-1 h-3 w-3 animate-spin" />}
+            Save
+          </Button>
+          {hasKey && (
+            <Button variant="ghost" size="sm" onClick={() => setShowInput(false)}>
+              Cancel
+            </Button>
+          )}
+        </div>
+      )}
+
+      <div className="flex items-center gap-3">
+        <Button variant="outline" size="sm" onClick={handleTest} disabled={testing}>
+          {testing && <Loader2 className="mr-1 h-3 w-3 animate-spin" />}
+          {testButtonLabel}
+        </Button>
+
+        {testResult && (
+          <span className="flex items-center gap-1.5 text-sm">
+            {testResult.connected ? (
+              <>
+                <CheckCircle2 className="h-4 w-4 text-success" />
+                <span className="text-success">Connected</span>
+              </>
+            ) : (
+              <>
+                <XCircle className="h-4 w-4 text-status-failed" />
+                <span className="text-status-failed">
+                  {testResult.error || "Connection failed"}
+                </span>
+              </>
+            )}
+          </span>
+        )}
+      </div>
+
+      <p className="text-xs text-muted-foreground">
+        Environment fallback: `{envVarName}`.
+      </p>
+    </div>
+  );
+}

package/src/components/settings/auth-config-section.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { AuthMethodSelector } from "./auth-method-selector";
+import { ApiKeyForm } from "./api-key-form";
+import { AuthStatusBadge } from "./auth-status-badge";
+import type { AuthMethod, ApiKeySource } from "@/lib/constants/settings";
+import {
+  DEFAULT_AGENT_RUNTIME,
+  getRuntimeCatalogEntry,
+} from "@/lib/agents/runtime/catalog";
+
+interface AuthSettings {
+  method: AuthMethod;
+  hasKey: boolean;
+  apiKeySource: ApiKeySource;
+}
+
+export function AuthConfigSection() {
+  const runtime = getRuntimeCatalogEntry(DEFAULT_AGENT_RUNTIME);
+  const [settings, setSettings] = useState<AuthSettings>({
+    method: "oauth",
+    hasKey: false,
+    apiKeySource: "unknown",
+  });
+  const [connected, setConnected] = useState(false);
+
+  const fetchSettings = useCallback(async () => {
+    const res = await fetch("/api/settings");
+    if (res.ok) {
+      const data = await res.json();
+      setSettings(data);
+      setConnected(data.hasKey || data.apiKeySource === "oauth");
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchSettings();
+  }, [fetchSettings]);
+
+  async function handleMethodChange(method: AuthMethod) {
+    const res = await fetch("/api/settings", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ method }),
+    });
+    if (res.ok) {
+      const data = await res.json();
+      setSettings(data);
+    }
+  }
+
+  async function handleSaveKey(apiKey: string) {
+    const res = await fetch("/api/settings", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ method: "api_key", apiKey }),
+    });
+    if (res.ok) {
+      const data = await res.json();
+      setSettings(data);
+      setConnected(true);
+    }
+  }
+
+  async function handleTestConnection() {
+    const res = await fetch("/api/settings/test", { method: "POST" });
+    const data = await res.json();
+    setConnected(data.connected);
+    if (data.connected) {
+      const source = settings.method === "oauth" ? "oauth" : (data.apiKeySource || "unknown");
+      setSettings((prev) => ({ ...prev, apiKeySource: source as ApiKeySource }));
+    }
+    return data;
+  }
+
+  return (
+    <Card className="surface-card">
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle>Authentication</CardTitle>
+            <CardDescription>
+              Configure how Stagent connects to the {runtime.label} runtime
+            </CardDescription>
+          </div>
+          <AuthStatusBadge connected={connected} apiKeySource={settings.apiKeySource} />
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        <AuthMethodSelector value={settings.method} onChange={handleMethodChange} />
+
+        {settings.method === "api_key" && (
+          <>
+            <Separator />
+            <ApiKeyForm
+              hasKey={settings.hasKey}
+              onSave={handleSaveKey}
+              onTest={handleTestConnection}
+            />
+            {settings.apiKeySource === "env" && (
+              <p className="text-xs text-muted-foreground">
+                Currently using API key from environment variable (ANTHROPIC_API_KEY).
+                You can optionally save a managed key above to override it.
+              </p>
+            )}
+          </>
+        )}
+
+        {settings.method === "oauth" && (
+          <>
+            <Separator />
+            <div className="space-y-2">
+              <p className="text-xs text-muted-foreground">
+                Supports resume, approvals, MCP passthrough, task assist, and profile smoke tests.
+              </p>
+              <p className="text-sm text-muted-foreground">
+                OAuth mode uses the Claude Agent SDK&apos;s built-in authentication flow.
+                Requires an active Claude Max or Pro subscription.
+              </p>
+              <button
+                onClick={handleTestConnection}
+                className="text-sm text-primary hover:underline cursor-pointer"
+              >
+                Test OAuth connection
+              </button>
+            </div>
+          </>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -0,0 +1,67 @@
+"use client";
+
+import { Key, Shield } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { AuthMethod } from "@/lib/constants/settings";
+
+interface AuthMethodSelectorProps {
+  value: AuthMethod;
+  onChange: (method: AuthMethod) => void;
+}
+
+const methods = [
+  {
+    id: "api_key" as const,
+    icon: Key,
+    title: "API Key",
+    description: "Use an Anthropic API key for authentication",
+  },
+  {
+    id: "oauth" as const,
+    icon: Shield,
+    title: "OAuth",
+    description: "Claude Max or Pro subscription",
+  },
+];
+
+export function AuthMethodSelector({ value, onChange }: AuthMethodSelectorProps) {
+  return (
+    <div className="space-y-2">
+      <p className="text-sm font-medium">Authentication Method</p>
+      <div className="grid grid-cols-2 gap-3">
+        {methods.map((method) => {
+          const Icon = method.icon;
+          const isSelected = value === method.id;
+          return (
+            <button
+              key={method.id}
+              type="button"
+              onClick={() => onChange(method.id)}
+              className={cn(
+                "flex flex-col items-center gap-2 rounded-lg border-2 p-4 text-center transition-all cursor-pointer",
+                "hover:bg-accent/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                isSelected
+                  ? "border-primary bg-primary/5"
+                  : "border-border/40 bg-card/30"
+              )}
+            >
+              <Icon className={cn(
+                "h-5 w-5",
+                isSelected ? "text-primary" : "text-muted-foreground"
+              )} />
+              <span className={cn(
+                "text-sm font-medium",
+                isSelected ? "text-foreground" : "text-muted-foreground"
+              )}>
+                {method.title}
+              </span>
+              <span className="text-xs text-muted-foreground">
+                {method.description}
+              </span>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/components/settings/auth-status-badge.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import type { ApiKeySource } from "@/lib/constants/settings";
+
+interface AuthStatusBadgeProps {
+  connected: boolean;
+  apiKeySource: ApiKeySource;
+}
+
+const sourceLabels: Record<ApiKeySource, string> = {
+  db: "Managed API Key",
+  env: "Environment Variable",
+  oauth: "OAuth (Claude Max/Pro)",
+  unknown: "Unknown",
+};
+
+export function AuthStatusBadge({ connected, apiKeySource }: AuthStatusBadgeProps) {
+  if (!connected && apiKeySource === "unknown") {
+    return (
+      <Badge variant="outline" className="border-warning/50 text-warning">
+        Not configured
+      </Badge>
+    );
+  }
+
+  if (!connected) {
+    return (
+      <Badge variant="outline" className="border-status-failed/50 text-status-failed">
+        Disconnected
+      </Badge>
+    );
+  }
+
+  return (
+    <Badge variant="outline" className="border-success/50 text-success">
+      Connected via {sourceLabels[apiKeySource]}
+    </Badge>
+  );
+}