stagent 0.8.0 → 0.9.0

package/src/app/api/sync/export/route.ts

@@ -0,0 +1,54 @@
+import { NextRequest, NextResponse } from "next/server";
+import { licenseManager } from "@/lib/license/manager";
+import { exportAndUpload } from "@/lib/sync/cloud-sync";
+import { getSettingSync } from "@/lib/settings/helpers";
+import { SETTINGS_KEYS } from "@/lib/constants/settings";
+
+/**
+ * POST /api/sync/export
+ * Export and encrypt the database, upload to Supabase Storage.
+ * Requires Operator+ tier and an authenticated Supabase session.
+ * Body: { accessToken: string } — the user's Supabase JWT
+ */
+export async function POST(req: NextRequest) {
+  if (!licenseManager.isFeatureAllowed("cloud-sync")) {
+    return NextResponse.json(
+      { error: "Cloud sync requires Operator tier or above" },
+      { status: 402 }
+    );
+  }
+
+  const email = licenseManager.getStatus().email;
+  if (!email) {
+    return NextResponse.json(
+      { error: "Sign in with your email first (Settings → Cloud Account)" },
+      { status: 400 }
+    );
+  }
+
+  // Get the user's access token for authenticated Storage uploads
+  const body = await req.json().catch(() => ({}));
+  const accessToken = body.accessToken as string | undefined;
+
+  let deviceId = getSettingSync(SETTINGS_KEYS.DEVICE_ID);
+  if (!deviceId) {
+    deviceId = crypto.randomUUID();
+    const { setSetting } = await import("@/lib/settings/helpers");
+    await setSetting(SETTINGS_KEYS.DEVICE_ID, deviceId);
+  }
+
+  const result = await exportAndUpload(email, deviceId, accessToken);
+
+  if (!result.success) {
+    return NextResponse.json({ error: result.error }, { status: 500 });
+  }
+
+  const { setSetting } = await import("@/lib/settings/helpers");
+  await setSetting(SETTINGS_KEYS.LAST_SYNC_AT, new Date().toISOString());
+
+  return NextResponse.json({
+    success: true,
+    blobPath: result.blobPath,
+    sizeBytes: result.sizeBytes,
+  });
+}

package/src/app/api/sync/restore/route.ts

@@ -0,0 +1,37 @@
+import { NextResponse } from "next/server";
+import { licenseManager } from "@/lib/license/manager";
+import { downloadAndRestore } from "@/lib/sync/cloud-sync";
+
+/**
+ * POST /api/sync/restore
+ * Download the latest snapshot, decrypt, and restore.
+ * Requires Operator+ tier. Creates a safety backup first.
+ */
+export async function POST() {
+  if (!licenseManager.isFeatureAllowed("cloud-sync")) {
+    return NextResponse.json(
+      { error: "Cloud sync requires Operator tier or above" },
+      { status: 402 }
+    );
+  }
+
+  const email = licenseManager.getStatus().email;
+  if (!email) {
+    return NextResponse.json(
+      { error: "No license email — activate your license first" },
+      { status: 400 }
+    );
+  }
+
+  const result = await downloadAndRestore(email);
+
+  if (!result.success) {
+    return NextResponse.json({ error: result.error }, { status: 500 });
+  }
+
+  return NextResponse.json({
+    success: true,
+    sizeBytes: result.sizeBytes,
+    message: "Database restored. Restart the app to apply changes.",
+  });
+}

package/src/app/api/sync/sessions/route.ts

@@ -0,0 +1,24 @@
+import { NextResponse } from "next/server";
+import { licenseManager } from "@/lib/license/manager";
+import { listSyncSessions } from "@/lib/sync/cloud-sync";
+
+/**
+ * GET /api/sync/sessions
+ * List recent sync sessions for the current user.
+ */
+export async function GET() {
+  if (!licenseManager.isFeatureAllowed("cloud-sync")) {
+    return NextResponse.json(
+      { error: "Cloud sync requires Operator tier or above" },
+      { status: 402 }
+    );
+  }
+
+  const email = licenseManager.getStatus().email;
+  if (!email) {
+    return NextResponse.json({ sessions: [] });
+  }
+
+  const sessions = await listSyncSessions(email);
+  return NextResponse.json({ sessions });
+}

package/src/app/api/tasks/[id]/execute/route.ts

@@ -10,6 +10,8 @@ import {
   enforceTaskBudgetGuardrails,
 } from "@/lib/settings/budget-guardrails";
 import { ensureFreshScan } from "@/lib/environment/auto-scan";
+import { getAllExecutions } from "@/lib/agents/execution-manager";
+import { licenseManager } from "@/lib/license/manager";
 
 export async function POST(
   _req: NextRequest,
@@ -93,6 +95,25 @@ export async function POST(
     return NextResponse.json({ error: compatibilityError }, { status: 400 });
   }
 
+  // Pre-check parallel workflow limit before fire-and-forget
+  const parallelLimit = licenseManager.getLimit("parallelWorkflows");
+  if (Number.isFinite(parallelLimit) && getAllExecutions().size >= parallelLimit) {
+    // Revert task to queued since we can't execute it
+    db.update(tasks)
+      .set({ status: "queued", updatedAt: new Date() })
+      .where(eq(tasks.id, id))
+      .run();
+    return NextResponse.json(
+      {
+        error: `Parallel workflow limit reached (${getAllExecutions().size}/${parallelLimit}). Wait for a running task to finish or upgrade.`,
+        limitType: "parallelWorkflows",
+        current: getAllExecutions().size,
+        max: parallelLimit,
+      },
+      { status: 429 }
+    );
+  }
+
   // Fire-and-forget — task already marked as running
   executeTaskWithAgent(id, task.assignedAgent ?? DEFAULT_AGENT_RUNTIME).catch(
     (err) => console.error(`Task ${id} execution error:`, err)

package/src/app/auth/callback/route.ts

@@ -0,0 +1,79 @@
+import { NextRequest, NextResponse } from "next/server";
+import { createClient } from "@supabase/supabase-js";
+import { licenseManager } from "@/lib/license/manager";
+import { validateLicenseWithCloud } from "@/lib/license/cloud-validation";
+import { sendUpgradeConfirmation } from "@/lib/billing/email";
+
+const DEFAULT_SUPABASE_URL = "https://yznantjbmacbllhcyzwc.supabase.co";
+const DEFAULT_SUPABASE_ANON_KEY =
+  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inl6bmFudGpibWFjYmxsaGN5endjIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzI1MDg1ODMsImV4cCI6MjA4ODA4NDU4M30.i-P7MXpR1_emBjhUkzbFeSX7fgjgPDv90_wkqF7sW3Y";
+
+/**
+ * GET /auth/callback
+ *
+ * Handles the Supabase magic link redirect. Exchanges the auth code
+ * for a session, validates the user's license, and redirects to settings.
+ *
+ * Flow:
+ * 1. User clicks magic link in email
+ * 2. Supabase redirects here with ?code=...
+ * 3. We exchange the code for a session (gets user email)
+ * 4. Validate license against cloud (check if they have a paid subscription)
+ * 5. Activate the license locally if found
+ * 6. Redirect to /settings with success indicator
+ */
+export async function GET(req: NextRequest) {
+  const { searchParams } = req.nextUrl;
+  const code = searchParams.get("code");
+
+  if (!code) {
+    return NextResponse.redirect(new URL("/settings?auth=error", req.url));
+  }
+
+  const url = process.env.NEXT_PUBLIC_SUPABASE_URL || DEFAULT_SUPABASE_URL;
+  const anonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || DEFAULT_SUPABASE_ANON_KEY;
+
+  const supabase = createClient(url, anonKey, {
+    auth: { persistSession: false },
+  });
+
+  // Exchange the code for a session
+  const { data, error } = await supabase.auth.exchangeCodeForSession(code);
+
+  if (error || !data.session) {
+    console.error("[auth/callback] Code exchange failed:", error?.message);
+    return NextResponse.redirect(new URL("/settings?auth=error", req.url));
+  }
+
+  const email = data.session.user.email;
+  if (!email) {
+    return NextResponse.redirect(new URL("/settings?auth=error", req.url));
+  }
+
+  // Validate license against cloud — check if this email has a paid subscription
+  const validation = await validateLicenseWithCloud(email);
+
+  if (validation.valid && validation.tier !== "community") {
+    // User has a paid subscription — activate locally
+    licenseManager.activate({
+      tier: validation.tier,
+      email,
+      expiresAt: validation.expiresAt,
+    });
+    // Send upgrade confirmation email (fire-and-forget)
+    sendUpgradeConfirmation(email, validation.tier).catch(() => {});
+  } else {
+    // No paid subscription — still link the email for future activation
+    // This sets the email so cloud sync and marketplace work when they upgrade
+    const currentTier = licenseManager.getTierFromDb();
+    if (currentTier === "community") {
+      // Just store the email association without changing tier
+      licenseManager.activate({
+        tier: "community",
+        email,
+      });
+    }
+  }
+
+  return NextResponse.redirect(new URL("/settings?auth=success", req.url));
+}

package/src/app/marketplace/page.tsx

@@ -0,0 +1,19 @@
+import { PageShell } from "@/components/shared/page-shell";
+import { MarketplaceBrowser } from "@/components/marketplace/marketplace-browser";
+import { licenseManager } from "@/lib/license/manager";
+import { canAccessFeature } from "@/lib/license/features";
+
+export const dynamic = "force-dynamic";
+
+export default function MarketplacePage() {
+  // Use getTierFromDb() for Server Components (Turbopack module instance separation)
+  const tier = licenseManager.getTierFromDb();
+  const canImport = canAccessFeature(tier, "marketplace-import");
+  const canPublish = canAccessFeature(tier, "marketplace-publish");
+
+  return (
+    <PageShell title="Marketplace" description="Browse and import workflow blueprints">
+      <MarketplaceBrowser canImport={canImport} canPublish={canPublish} />
+    </PageShell>
+  );
+}

package/src/app/page.tsx

@@ -12,6 +12,8 @@ import { QuickActions } from "@/components/dashboard/quick-actions";
 import { RecentProjects } from "@/components/dashboard/recent-projects";
 import type { RecentProject } from "@/components/dashboard/recent-projects";
 import { WelcomeLanding } from "@/components/dashboard/welcome-landing";
+import { EmailCaptureCard } from "@/components/onboarding/email-capture-card";
+import { ActivationChecklist } from "@/components/onboarding/activation-checklist";
 import {
   getCompletionsByDay,
   getTaskCreationsByDay,
@@ -104,7 +106,8 @@ export default async function HomePage() {
   if (isFreshInstance) {
     return (
       <div className="bg-background min-h-screen p-4 sm:p-6">
-        <div className="surface-page-shell min-h-[calc(100dvh-2rem)] rounded-xl p-5 sm:p-6 lg:p-7">
+        <div className="surface-page-shell min-h-[calc(100dvh-2rem)] rounded-xl p-5 sm:p-6 lg:p-7 space-y-6">
+          <EmailCaptureCard />
           <WelcomeLanding />
         </div>
       </div>
@@ -231,8 +234,9 @@ export default async function HomePage() {
           <div className="lg:col-span-3">
             <RecentProjects projects={recentProjectData} />
           </div>
-          <div className="lg:col-span-2">
+          <div className="lg:col-span-2 space-y-6">
             <QuickActions />
+            <ActivationChecklist />
           </div>
         </div>
       </div>

package/src/app/settings/page.tsx

@@ -1,3 +1,7 @@
+import { SubscriptionSection } from "@/components/settings/subscription-section";
+import { CloudAccountSection } from "@/components/settings/cloud-account-section";
+import { CloudSyncSection } from "@/components/settings/cloud-sync-section";
+import { TelemetrySection } from "@/components/settings/telemetry-section";
 import { ProvidersAndRuntimesSection } from "@/components/settings/providers-runtimes-section";
 import { PermissionsSections } from "@/components/settings/permissions-sections";
 import { DataManagementSection } from "@/components/settings/data-management-section";
@@ -18,6 +22,9 @@ export default function SettingsPage() {
   return (
     <PageShell title="Settings" description="Manage your Stagent configuration">
       <div className="space-y-6">
+        <SubscriptionSection />
+        <CloudAccountSection />
+        <CloudSyncSection />
         <ProvidersAndRuntimesSection />
         <OllamaSection />
         <ChatSettingsSection />
@@ -29,6 +36,7 @@ export default function SettingsPage() {
         <BudgetGuardrailsSection />
         <PermissionsSections />
         <DatabaseSnapshotsSection />
+        <TelemetrySection />
         <DataManagementSection />
       </div>
     </PageShell>

package/src/components/analytics/analytics-dashboard.tsx

@@ -0,0 +1,200 @@
+"use client";
+
+import { useState } from "react";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  AreaChart,
+  Area,
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from "recharts";
+import type {
+  OutcomeCount,
+  TrendPoint,
+  CostTrendPoint,
+  ProfileStats,
+} from "@/lib/analytics/queries";
+
+interface AnalyticsDashboardProps {
+  outcomes: OutcomeCount;
+  successTrend: TrendPoint[];
+  costTrend: CostTrendPoint[];
+  leaderboard: ProfileStats[];
+  hoursSaved: number;
+}
+
+function StatCard({
+  label,
+  value,
+  sub,
+}: {
+  label: string;
+  value: string;
+  sub?: string;
+}) {
+  return (
+    <div className="surface-card-muted rounded-lg p-4 text-center">
+      <p className="text-2xl font-bold">{value}</p>
+      <p className="text-xs text-muted-foreground">{label}</p>
+      {sub && <p className="text-[10px] text-muted-foreground mt-1">{sub}</p>}
+    </div>
+  );
+}
+
+export function AnalyticsDashboard({
+  outcomes,
+  successTrend,
+  costTrend,
+  leaderboard,
+  hoursSaved,
+}: AnalyticsDashboardProps) {
+  const [hourlyRate, setHourlyRate] = useState(() => {
+    if (typeof window === "undefined") return 75;
+    const saved = localStorage.getItem("stagent-hourly-rate");
+    return saved ? parseInt(saved, 10) : 75;
+  });
+
+  function updateHourlyRate(rate: number) {
+    setHourlyRate(rate);
+    if (typeof window !== "undefined") {
+      localStorage.setItem("stagent-hourly-rate", String(rate));
+    }
+  }
+
+  const valueGenerated = Math.round(hoursSaved * hourlyRate);
+  const totalCostUsd = leaderboard.reduce((sum, p) => sum + p.totalCostMicros, 0) / 1_000_000;
+
+  return (
+    <div className="space-y-6">
+      {/* ROI Summary Strip */}
+      <div className="grid grid-cols-4 gap-3">
+        <StatCard label="Tasks Completed" value={String(outcomes.completed)} sub="Last 30 days" />
+        <StatCard label="Success Rate" value={`${outcomes.successRate}%`} sub={`${outcomes.failed} failed`} />
+        <StatCard label="Hours Saved" value={`${hoursSaved}h`} sub={`~$${valueGenerated} value`} />
+        <StatCard label="Total Cost" value={`$${totalCostUsd.toFixed(2)}`} sub="Agent spend" />
+      </div>
+
+      {/* Charts Row */}
+      <div className="grid grid-cols-2 gap-4">
+        {/* Success Rate Trend */}
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm">Task Outcomes (30d)</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveContainer width="100%" height={200}>
+              <AreaChart data={successTrend}>
+                <CartesianGrid strokeDasharray="3 3" className="stroke-border" />
+                <XAxis dataKey="date" tick={{ fontSize: 10 }} tickFormatter={(v) => v.slice(5)} />
+                <YAxis tick={{ fontSize: 10 }} />
+                <Tooltip />
+                <Area type="monotone" dataKey="completed" stackId="1" fill="oklch(0.7 0.15 250)" stroke="oklch(0.6 0.2 250)" fillOpacity={0.3} />
+                <Area type="monotone" dataKey="failed" stackId="1" fill="oklch(0.7 0.15 25)" stroke="oklch(0.6 0.2 25)" fillOpacity={0.3} />
+              </AreaChart>
+            </ResponsiveContainer>
+          </CardContent>
+        </Card>
+
+        {/* Cost per Outcome Trend */}
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm">Cost per Task (30d)</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveContainer width="100%" height={200}>
+              <LineChart data={costTrend}>
+                <CartesianGrid strokeDasharray="3 3" className="stroke-border" />
+                <XAxis dataKey="date" tick={{ fontSize: 10 }} tickFormatter={(v) => v.slice(5)} />
+                <YAxis tick={{ fontSize: 10 }} tickFormatter={(v) => `$${(v / 1_000_000).toFixed(2)}`} />
+                <Tooltip formatter={(v: number) => [`$${(v / 1_000_000).toFixed(4)}`, "Avg Cost"]} />
+                <Line type="monotone" dataKey="avgCostMicros" stroke="oklch(0.6 0.2 250)" strokeWidth={2} dot={false} />
+              </LineChart>
+            </ResponsiveContainer>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Profile Leaderboard */}
+      <Card>
+        <CardHeader className="pb-2">
+          <CardTitle className="text-sm">Profile Leaderboard (30d)</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {leaderboard.length === 0 ? (
+            <p className="text-sm text-muted-foreground text-center py-6">
+              No agent profiles have run tasks yet.
+            </p>
+          ) : (
+            <div className="overflow-x-auto">
+              <table className="w-full text-sm">
+                <thead>
+                  <tr className="border-b text-left">
+                    <th className="pb-2 font-medium">Profile</th>
+                    <th className="pb-2 font-medium text-right">Completed</th>
+                    <th className="pb-2 font-medium text-right">Failed</th>
+                    <th className="pb-2 font-medium text-right">Success</th>
+                    <th className="pb-2 font-medium text-right">Cost</th>
+                    <th className="pb-2 font-medium text-right">Avg Duration</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {leaderboard.map((p) => (
+                    <tr key={p.profileId} className="border-b border-border/50">
+                      <td className="py-2 font-mono text-xs">{p.profileId}</td>
+                      <td className="py-2 text-right">{p.completed}</td>
+                      <td className="py-2 text-right text-muted-foreground">{p.failed}</td>
+                      <td className="py-2 text-right">{p.successRate}%</td>
+                      <td className="py-2 text-right">${(p.totalCostMicros / 1_000_000).toFixed(2)}</td>
+                      <td className="py-2 text-right text-muted-foreground">
+                        {p.avgDurationMs > 0 ? `${(p.avgDurationMs / 1000).toFixed(1)}s` : "—"}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* ROI Calculator */}
+      <Card>
+        <CardHeader className="pb-2">
+          <CardTitle className="text-sm">ROI Calculator</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center gap-4">
+            <label className="text-xs text-muted-foreground whitespace-nowrap">
+              Your hourly rate:
+            </label>
+            <div className="flex items-center gap-1">
+              <span className="text-sm">$</span>
+              <input
+                type="number"
+                value={hourlyRate}
+                onChange={(e) => updateHourlyRate(Math.max(1, parseInt(e.target.value, 10) || 1))}
+                className="w-20 rounded-md border px-2 py-1 text-sm"
+                min={1}
+              />
+              <span className="text-xs text-muted-foreground">/hr</span>
+            </div>
+            <div className="text-sm">
+              <span className="font-medium">${valueGenerated.toLocaleString()}</span>
+              <span className="text-muted-foreground"> estimated value from {hoursSaved}h saved</span>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/src/components/analytics/analytics-gate-card.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import Link from "next/link";
+import { TrendingUp, Trophy, Coins, Sparkles } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { TIER_PRICING } from "@/lib/license/tier-limits";
+
+function ValueProp({
+  icon: Icon,
+  title,
+  description,
+}: {
+  icon: typeof TrendingUp;
+  title: string;
+  description: string;
+}) {
+  return (
+    <div className="space-y-1.5">
+      <div className="flex items-center gap-2">
+        <div className="flex items-center justify-center w-7 h-7 rounded-lg border bg-background">
+          <Icon className="h-3.5 w-3.5 text-primary" />
+        </div>
+        <span className="text-xs font-semibold tracking-tight">{title}</span>
+      </div>
+      <p className="text-[11px] leading-relaxed text-muted-foreground pl-9">
+        {description}
+      </p>
+    </div>
+  );
+}
+
+/**
+ * Analytics-specific upgrade CTA card.
+ * Replaces the generic PremiumGateOverlay lock card with
+ * benefit-oriented messaging and value props.
+ */
+export function AnalyticsGateCard() {
+  const price = TIER_PRICING.operator.monthly;
+
+  return (
+    <div className="w-full max-w-lg mx-auto">
+      <div className="surface-card rounded-xl border shadow-lg p-8 space-y-6">
+        {/* Header */}
+        <div className="space-y-2 text-center">
+          <div className="flex items-center justify-center gap-2 mb-3">
+            <Sparkles className="h-4 w-4 text-primary" />
+            <Badge variant="secondary" className="text-[10px] font-medium tracking-wide uppercase">
+              Operator Feature
+            </Badge>
+          </div>
+          <h2 className="text-xl font-bold tracking-tight">
+            See what your AI agents are worth
+          </h2>
+          <p className="text-sm text-muted-foreground max-w-xs mx-auto">
+            Turn raw execution data into actionable ROI insights
+          </p>
+        </div>
+
+        {/* Value Props */}
+        <div className="space-y-4 py-2">
+          <ValueProp
+            icon={TrendingUp}
+            title="ROI Tracking"
+            description="Know exactly how much time and money your agents save with automated value calculations"
+          />
+          <ValueProp
+            icon={Trophy}
+            title="Profile Leaderboard"
+            description="See which agent profiles deliver the best results and optimize your team"
+          />
+          <ValueProp
+            icon={Coins}
+            title="Cost Efficiency"
+            description="Track cost-per-outcome trends to find the sweet spot between quality and spend"
+          />
+        </div>
+
+        {/* Pricing + CTA */}
+        <div className="space-y-3 pt-2">
+          <div className="flex items-baseline justify-center gap-1.5">
+            <span className="text-2xl font-bold">${price}</span>
+            <span className="text-xs text-muted-foreground">/mo</span>
+            <span className="text-xs text-muted-foreground mx-1">·</span>
+            <span className="text-xs text-muted-foreground">Operator tier</span>
+          </div>
+          <Button className="w-full" size="lg" asChild>
+            <Link href="/settings?highlight=operator">
+              Unlock Analytics
+            </Link>
+          </Button>
+        </div>
+
+        {/* Social proof / objection handler */}
+        <p className="text-[11px] text-center text-muted-foreground">
+          Derived from data you already have — zero setup required
+        </p>
+      </div>
+    </div>
+  );
+}

package/src/components/marketplace/blueprint-card.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { Download, Star } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import type { MarketplaceBlueprint } from "@/lib/marketplace/marketplace-client";
+
+interface BlueprintCardProps {
+  blueprint: MarketplaceBlueprint;
+  canImport: boolean;
+  onImport?: (id: string) => void;
+}
+
+export function BlueprintCard({ blueprint, canImport, onImport }: BlueprintCardProps) {
+  return (
+    <div className="surface-card-muted rounded-lg border p-4 space-y-3">
+      <div className="flex items-start justify-between gap-2">
+        <div className="space-y-1">
+          <h3 className="text-sm font-medium">{blueprint.title}</h3>
+          {blueprint.description && (
+            <p className="text-xs text-muted-foreground line-clamp-2">
+              {blueprint.description}
+            </p>
+          )}
+        </div>
+        <Badge variant="secondary" className="text-[10px] shrink-0">
+          {blueprint.category}
+        </Badge>
+      </div>
+
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3 text-xs text-muted-foreground">
+          <span className="flex items-center gap-1">
+            <Download className="h-3 w-3" />
+            {blueprint.install_count}
+          </span>
+          {blueprint.success_rate > 0 && (
+            <span className="flex items-center gap-1">
+              <Star className="h-3 w-3" />
+              {Math.round(blueprint.success_rate * 100)}%
+            </span>
+          )}
+          {blueprint.tags?.length > 0 && (
+            <span>{blueprint.tags.slice(0, 2).join(", ")}</span>
+          )}
+        </div>
+
+        {canImport && onImport && (
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={() => onImport(blueprint.id)}
+          >
+            <Download className="h-3 w-3 mr-1" />
+            Import
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}