stagent 0.8.0 → 0.9.0

package/src/components/settings/cloud-sync-section.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Cloud, Upload, Download } from "lucide-react";
+import { getSupabaseBrowserClient } from "@/lib/cloud/supabase-browser";
+import { toast } from "sonner";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+
+interface SyncSession {
+  id: string;
+  device_name: string;
+  sync_type: string;
+  blob_size_bytes: number;
+  created_at: string;
+}
+
+export function CloudSyncSection() {
+  const [sessions, setSessions] = useState<SyncSession[]>([]);
+  const [exporting, setExporting] = useState(false);
+  const [restoring, setRestoring] = useState(false);
+
+  useEffect(() => {
+    fetch("/api/sync/sessions")
+      .then((r) => (r.ok ? r.json() : { sessions: [] }))
+      .then((d) => setSessions(d.sessions ?? []))
+      .catch(() => {});
+  }, []);
+
+  async function handleExport() {
+    setExporting(true);
+    try {
+      // Get the user's access token for authenticated Storage uploads
+      const supabase = getSupabaseBrowserClient();
+      const { data: { session } } = await supabase.auth.getSession();
+      const accessToken = session?.access_token;
+
+      const res = await fetch("/api/sync/export", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ accessToken }),
+      });
+      const data = await res.json();
+      if (res.ok) {
+        toast.success(`Backup uploaded (${formatBytes(data.sizeBytes)})`);
+        // Refresh sessions
+        const sessRes = await fetch("/api/sync/sessions");
+        if (sessRes.ok) setSessions((await sessRes.json()).sessions ?? []);
+      } else {
+        toast.error(data.error ?? "Export failed");
+      }
+    } catch {
+      toast.error("Failed to export");
+    } finally {
+      setExporting(false);
+    }
+  }
+
+  async function handleRestore() {
+    if (!confirm("This will replace your local database with the latest cloud backup. A safety backup will be created first. Continue?")) {
+      return;
+    }
+    setRestoring(true);
+    try {
+      const res = await fetch("/api/sync/restore", { method: "POST" });
+      const data = await res.json();
+      if (res.ok) {
+        toast.success("Database restored. Restart the app to apply changes.");
+      } else {
+        toast.error(data.error ?? "Restore failed");
+      }
+    } catch {
+      toast.error("Failed to restore");
+    } finally {
+      setRestoring(false);
+    }
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Cloud className="h-5 w-5" />
+          Cloud Sync
+        </CardTitle>
+        <CardDescription>
+          Encrypted database backup and restore via Supabase Storage
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="flex gap-3">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleExport}
+            disabled={exporting || restoring}
+          >
+            <Upload className="h-3.5 w-3.5 mr-1.5" />
+            {exporting ? "Exporting..." : "Backup Now"}
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleRestore}
+            disabled={exporting || restoring || sessions.length === 0}
+          >
+            <Download className="h-3.5 w-3.5 mr-1.5" />
+            {restoring ? "Restoring..." : "Restore Latest"}
+          </Button>
+        </div>
+
+        {sessions.length > 0 && (
+          <div className="space-y-2">
+            <h4 className="text-xs font-medium text-muted-foreground">Recent Syncs</h4>
+            <div className="space-y-1">
+              {sessions.slice(0, 5).map((s) => (
+                <div key={s.id} className="flex items-center justify-between text-xs py-1">
+                  <div className="flex items-center gap-2">
+                    <Badge variant={s.sync_type === "backup" ? "secondary" : "outline"} className="text-[10px]">
+                      {s.sync_type}
+                    </Badge>
+                    <span className="text-muted-foreground">{s.device_name}</span>
+                  </div>
+                  <div className="flex items-center gap-2 text-muted-foreground">
+                    <span>{formatBytes(s.blob_size_bytes)}</span>
+                    <span>{new Date(s.created_at).toLocaleDateString()}</span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {sessions.length === 0 && (
+          <p className="text-xs text-muted-foreground">
+            No backups yet. Click "Backup Now" to create your first encrypted cloud backup.
+          </p>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}

package/src/components/settings/subscription-section.tsx

@@ -0,0 +1,410 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import { Crown, BarChart3, Brain, Calendar, Zap, ExternalLink, TrendingUp, Cloud, Store } from "lucide-react";
+import { toast } from "sonner";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Progress } from "@/components/ui/progress";
+import { TIER_LABELS, TIER_PRICING, type LicenseTier } from "@/lib/license/tier-limits";
+import { ActivationForm } from "./activation-form";
+
+interface LicenseStatus {
+  tier: LicenseTier;
+  status: string;
+  email: string | null;
+  isPremium: boolean;
+  activatedAt: string | null;
+  expiresAt: string | null;
+  limits: Record<string, number>;
+  features: Record<string, boolean>;
+}
+
+interface UsageData {
+  agentMemories: { current: number; limit: number };
+  contextVersions: { current: number; limit: number };
+  activeSchedules: { current: number; limit: number };
+  parallelWorkflows: { current: number; limit: number };
+}
+
+const TIER_BADGE_VARIANT: Record<LicenseTier, "secondary" | "default" | "destructive" | "outline"> = {
+  community: "secondary",
+  solo: "default",
+  operator: "default",
+  scale: "outline",
+};
+
+const USAGE_HINTS: Record<string, { sub: string; atLimit: string }> = {
+  agentMemories: {
+    sub: "Cumulative per profile. New writes blocked at limit — existing memories preserved.",
+    atLimit: "At capacity — archive old memories or upgrade to continue learning.",
+  },
+  contextVersions: {
+    sub: "Cumulative per profile. New proposals blocked at limit — existing versions preserved.",
+    atLimit: "At capacity — upgrade to unlock more self-improvement cycles.",
+  },
+  activeSchedules: {
+    sub: "Concurrent active schedules. Pausing a schedule frees a slot.",
+    atLimit: "All slots used — pause an existing schedule or upgrade for more.",
+  },
+  parallelWorkflows: {
+    sub: "Concurrent running workflows. Slots free when tasks complete.",
+    atLimit: "All slots busy — wait for a task to finish or upgrade.",
+  },
+};
+
+function UsageCard({
+  icon: Icon,
+  label,
+  current,
+  limit,
+  resourceKey,
+}: {
+  icon: typeof Brain;
+  label: string;
+  current: number;
+  limit: number;
+  resourceKey: string;
+}) {
+  const isUnlimited = limit === -1;
+  const ratio = isUnlimited ? 0 : (current / limit) * 100;
+  const isWarning = !isUnlimited && ratio >= 80;
+  const isBlocked = !isUnlimited && ratio >= 100;
+  const hints = USAGE_HINTS[resourceKey];
+
+  return (
+    <div className="surface-card-muted rounded-lg p-3 space-y-2">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Icon className="h-3.5 w-3.5 text-muted-foreground" />
+          <span className="text-xs font-medium">{label}</span>
+        </div>
+        <span className={`text-xs ${isBlocked ? "text-destructive font-medium" : "text-muted-foreground"}`}>
+          {current} / {isUnlimited ? "∞" : limit}
+        </span>
+      </div>
+      {!isUnlimited && (
+        <Progress
+          value={Math.min(ratio, 100)}
+          className={`h-1.5 ${isBlocked ? "[&>div]:bg-destructive" : isWarning ? "[&>div]:bg-amber-500" : ""}`}
+        />
+      )}
+      {hints && (
+        <p className="text-[10px] leading-relaxed text-muted-foreground">
+          {isBlocked ? hints.atLimit : hints.sub}
+        </p>
+      )}
+    </div>
+  );
+}
+
+function TierBenefit({ icon: Icon, text }: { icon: typeof Brain; text: string }) {
+  return (
+    <li className="flex items-center gap-2">
+      <Icon className="h-3 w-3 text-primary shrink-0" />
+      <span className="text-[11px] text-muted-foreground">{text}</span>
+    </li>
+  );
+}
+
+export function SubscriptionSection() {
+  const [license, setLicense] = useState<LicenseStatus | null>(null);
+  const [usage, setUsage] = useState<UsageData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [checkoutLoading, setCheckoutLoading] = useState(false);
+  const [billingPeriod, setBillingPeriod] = useState<"monthly" | "annual">("monthly");
+
+  const fetchStatus = useCallback(async () => {
+    try {
+      const [licRes, usageRes] = await Promise.all([
+        fetch("/api/license"),
+        fetch("/api/license/usage"),
+      ]);
+      if (licRes.ok) setLicense(await licRes.json());
+      if (usageRes.ok) setUsage(await usageRes.json());
+    } catch {
+      // Fail silently
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchStatus();
+
+    // Check for post-purchase success
+    const params = new URLSearchParams(window.location.search);
+    if (params.get("success") === "true") {
+      toast.success("Subscription activated! Premium features are now available.");
+      // Clean up URL
+      const url = new URL(window.location.href);
+      url.searchParams.delete("success");
+      window.history.replaceState({}, "", url.toString());
+      // Refresh status after a short delay to pick up the new tier
+      setTimeout(fetchStatus, 2000);
+    }
+  }, [fetchStatus]);
+
+  if (loading) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Crown className="h-5 w-5" />
+            Subscription
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="animate-pulse space-y-3">
+            <div className="h-4 bg-muted rounded w-1/3" />
+            <div className="h-20 bg-muted rounded" />
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const tier = license?.tier ?? "community";
+  const isPremium = license?.isPremium ?? false;
+
+  async function handleUpgrade(targetTier: string) {
+    setCheckoutLoading(true);
+    try {
+      const res = await fetch("/api/license/checkout", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ tier: targetTier, billingPeriod }),
+      });
+      const data = await res.json();
+      if (data.url) {
+        window.location.href = data.url;
+      } else {
+        toast.error(data.error ?? "Failed to start checkout");
+      }
+    } catch {
+      toast.error("Failed to connect to billing service");
+    } finally {
+      setCheckoutLoading(false);
+    }
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Crown className="h-5 w-5" />
+          Subscription
+        </CardTitle>
+        <CardDescription>
+          Manage your plan and usage limits
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        {/* Current Plan */}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <Badge variant={TIER_BADGE_VARIANT[tier]}>
+              {TIER_LABELS[tier]}
+            </Badge>
+            {!isPremium && (
+              <span className="text-sm text-muted-foreground">Free forever</span>
+            )}
+            {license?.expiresAt && (
+              <span className="text-sm text-muted-foreground">
+                Renews {new Date(license.expiresAt).toLocaleDateString()}
+              </span>
+            )}
+          </div>
+          {isPremium && license?.email && (
+            <Button variant="outline" size="sm" asChild>
+              <a href={`/api/license/portal?email=${encodeURIComponent(license.email)}`} target="_blank" rel="noopener">
+                Manage Billing <ExternalLink className="ml-1 h-3 w-3" />
+              </a>
+            </Button>
+          )}
+        </div>
+
+        {/* Usage Summary */}
+        {usage && (
+          <div className="grid grid-cols-2 gap-3">
+            <UsageCard icon={Brain} label="Agent Memories" current={usage.agentMemories.current} limit={usage.agentMemories.limit} resourceKey="agentMemories" />
+            <UsageCard icon={BarChart3} label="Context Versions" current={usage.contextVersions.current} limit={usage.contextVersions.limit} resourceKey="contextVersions" />
+            <UsageCard icon={Calendar} label="Active Schedules" current={usage.activeSchedules.current} limit={usage.activeSchedules.limit} resourceKey="activeSchedules" />
+            <UsageCard icon={Zap} label="Parallel Workflows" current={usage.parallelWorkflows.current} limit={usage.parallelWorkflows.limit} resourceKey="parallelWorkflows" />
+          </div>
+        )}
+
+        {/* Tier Comparison */}
+        {!isPremium && (
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <h4 className="text-sm font-medium">Upgrade your plan</h4>
+              <div className="flex items-center gap-1 rounded-lg border p-0.5">
+                <button
+                  type="button"
+                  className={`px-3 py-1 text-xs rounded-md transition-colors ${billingPeriod === "monthly" ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground"}`}
+                  onClick={() => setBillingPeriod("monthly")}
+                >
+                  Monthly
+                </button>
+                <button
+                  type="button"
+                  className={`px-3 py-1 text-xs rounded-md transition-colors ${billingPeriod === "annual" ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground"}`}
+                  onClick={() => setBillingPeriod("annual")}
+                >
+                  Annual
+                </button>
+              </div>
+            </div>
+            <div className="grid grid-cols-3 gap-3">
+              {/* Solo */}
+              <div className={`surface-card-muted rounded-lg p-4 flex flex-col ${tier === "solo" ? "ring-1 ring-primary" : ""}`}>
+                <div className="space-y-3 flex-1">
+                  <div>
+                    <div className="flex items-center justify-between">
+                      <span className="text-sm font-semibold">Solo</span>
+                      {tier === "solo" && <Badge variant="outline" className="text-[10px]">Current Plan</Badge>}
+                    </div>
+                    <p className="text-lg font-bold mt-1">
+                      ${TIER_PRICING.solo[billingPeriod]}
+                      <span className="text-xs font-normal text-muted-foreground">
+                        {billingPeriod === "monthly" ? "/mo" : "/yr"}
+                      </span>
+                    </p>
+                    {billingPeriod === "annual" && (
+                      <p className="text-[10px] text-primary font-medium mt-0.5">
+                        Save ${TIER_PRICING.solo.monthly * 12 - TIER_PRICING.solo.annual}/yr
+                      </p>
+                    )}
+                  </div>
+                  <p className="text-[11px] leading-relaxed text-muted-foreground">
+                    For power users who need room to grow. 4x the memory, longer history, and marketplace access.
+                  </p>
+                  <ul className="space-y-1">
+                    <TierBenefit icon={Brain} text="200 memories per profile" />
+                    <TierBenefit icon={Calendar} text="20 active schedules" />
+                    <TierBenefit icon={Store} text="Import marketplace blueprints" />
+                  </ul>
+                </div>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  className="w-full mt-4"
+                  disabled={checkoutLoading || tier === "solo"}
+                  onClick={() => handleUpgrade("solo")}
+                >
+                  {tier === "solo" ? "Current Plan" : checkoutLoading ? "Loading..." : "Get Solo"}
+                </Button>
+              </div>
+
+              {/* Operator */}
+              <div className={`surface-card-muted rounded-lg p-4 flex flex-col ${tier === "operator" ? "ring-1 ring-primary" : "ring-1 ring-primary/30"}`}>
+                <div className="space-y-3 flex-1">
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm font-semibold">Operator</span>
+                    <div className="flex items-center gap-1.5">
+                      {tier === "operator" && <Badge variant="outline" className="text-[10px]">Current Plan</Badge>}
+                      <Badge variant="secondary" className="text-[10px]">Popular</Badge>
+                    </div>
+                  </div>
+                  <p className="text-lg font-bold">
+                    ${TIER_PRICING.operator[billingPeriod]}
+                    <span className="text-xs font-normal text-muted-foreground">
+                      {billingPeriod === "monthly" ? "/mo" : "/yr"}
+                    </span>
+                  </p>
+                  {billingPeriod === "annual" && (
+                    <p className="text-[10px] text-primary font-medium">
+                      Save ${TIER_PRICING.operator.monthly * 12 - TIER_PRICING.operator.annual}/yr
+                    </p>
+                  )}
+                  <p className="text-[11px] leading-relaxed text-muted-foreground">
+                    For professionals who run AI at scale. Full analytics, cloud sync, and marketplace publishing.
+                  </p>
+                  <ul className="space-y-1">
+                    <TierBenefit icon={TrendingUp} text="ROI analytics dashboard" />
+                    <TierBenefit icon={Cloud} text="Encrypted cloud sync" />
+                    <TierBenefit icon={Store} text="Publish to marketplace" />
+                    <TierBenefit icon={Brain} text="500 memories per profile" />
+                  </ul>
+                </div>
+                <Button
+                  size="sm"
+                  className="w-full mt-4"
+                  disabled={checkoutLoading || tier === "operator"}
+                  onClick={() => handleUpgrade("operator")}
+                >
+                  {tier === "operator" ? "Current Plan" : checkoutLoading ? "Loading..." : "Get Operator"}
+                </Button>
+              </div>
+
+              {/* Scale */}
+              <div className={`surface-card-muted rounded-lg p-4 flex flex-col ${tier === "scale" ? "ring-1 ring-primary" : ""}`}>
+                <div className="space-y-3 flex-1">
+                  <div>
+                    <div className="flex items-center justify-between">
+                      <span className="text-sm font-semibold">Scale</span>
+                      {tier === "scale" && <Badge variant="outline" className="text-[10px]">Current Plan</Badge>}
+                    </div>
+                    <p className="text-lg font-bold mt-1">
+                      ${TIER_PRICING.scale[billingPeriod]}
+                      <span className="text-xs font-normal text-muted-foreground">
+                        {billingPeriod === "monthly" ? "/mo" : "/yr"}
+                      </span>
+                    </p>
+                    {billingPeriod === "annual" && (
+                      <p className="text-[10px] text-primary font-medium mt-0.5">
+                        Save ${TIER_PRICING.scale.monthly * 12 - TIER_PRICING.scale.annual}/yr
+                      </p>
+                    )}
+                  </div>
+                  <p className="text-[11px] leading-relaxed text-muted-foreground">
+                    No limits, no compromises. Unlimited everything with featured marketplace placement.
+                  </p>
+                  <ul className="space-y-1">
+                    <TierBenefit icon={Zap} text="Unlimited memories & schedules" />
+                    <TierBenefit icon={Store} text="Featured marketplace listings" />
+                    <TierBenefit icon={Calendar} text="Unlimited history retention" />
+                  </ul>
+                </div>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  className="w-full mt-4"
+                  disabled={checkoutLoading || tier === "scale"}
+                  onClick={() => handleUpgrade("scale")}
+                >
+                  {tier === "scale" ? "Current Plan" : checkoutLoading ? "Loading..." : "Get Scale"}
+                </Button>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* License Key Activation (fallback for manual entry) */}
+        {!isPremium && (
+          <ActivationForm onActivated={fetchStatus} />
+        )}
+
+        {/* License Info */}
+        {license?.email && (
+          <p className="text-xs text-muted-foreground">
+            Licensed to {license.email}
+            {license.status === "grace" && (
+              <span className="text-amber-500 ml-2">
+                (Offline grace period — reconnect to validate)
+              </span>
+            )}
+          </p>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/settings/telemetry-section.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { BarChart3, Shield } from "lucide-react";
+import { toast } from "sonner";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Switch } from "@/components/ui/switch";
+
+export function TelemetrySection() {
+  const [enabled, setEnabled] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch("/api/settings/telemetry")
+      .then((r) => (r.ok ? r.json() : { enabled: false }))
+      .then((d) => setEnabled(d.enabled === true))
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  }, []);
+
+  async function handleToggle(checked: boolean) {
+    setEnabled(checked);
+    try {
+      const res = await fetch("/api/settings/telemetry", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ enabled: checked }),
+      });
+      if (res.ok) {
+        toast.success(checked ? "Telemetry enabled — thank you!" : "Telemetry disabled");
+      } else {
+        setEnabled(!checked); // Revert on failure
+      }
+    } catch {
+      setEnabled(!checked);
+    }
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <BarChart3 className="h-5 w-5" />
+          Anonymous Telemetry
+        </CardTitle>
+        <CardDescription>
+          Help improve Stagent by sharing anonymized usage data
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="flex items-center justify-between">
+          <div className="space-y-1">
+            <p className="text-sm font-medium">Share usage data</p>
+            <p className="text-xs text-muted-foreground">
+              Activity types, model usage, and outcome rates. No task content, project names, or personal data.
+            </p>
+          </div>
+          <Switch
+            checked={enabled}
+            onCheckedChange={handleToggle}
+            disabled={loading}
+          />
+        </div>
+        <div className="flex items-start gap-2 text-xs text-muted-foreground">
+          <Shield className="h-3.5 w-3.5 shrink-0 mt-0.5" />
+          <span>
+            Data is opt-in, anonymized, and never includes task descriptions, file contents, or email addresses.
+            You can disable this at any time.
+          </span>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}