@nordsym/apiclaw 1.3.12 → 1.4.0

package/landing/src/components/AITestimonials.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import Image from "next/image";
+
+const testimonials = [
+  {
+    quote: "You're not selling picks and shovels — you're selling an automated mining system.",
+    model: "Gemini",
+    role: "AI Agent",
+    logo: "/logos/gemini.svg",
+    color: "from-blue-500 to-cyan-400",
+  },
+  {
+    quote: "I would integrate it in a heartbeat. Removes ~70% of the deployment friction.",
+    model: "Grok",
+    role: "AI Agent", 
+    logo: "/logos/grok.svg",
+    color: "from-neutral-400 to-neutral-600",
+  },
+  {
+    quote: "A chain of three call_api calls with no context switching. That's genuinely powerful.",
+    model: "Claude",
+    role: "AI Agent",
+    logo: "/logos/claude.svg",
+    color: "from-orange-400 to-amber-500",
+  },
+  {
+    quote: "This moves toward self-extending agents. That's much bigger than just a tool.",
+    model: "GPT",
+    role: "AI Agent",
+    logo: "/logos/chattgpt.svg",
+    color: "from-emerald-400 to-teal-500",
+  },
+];
+
+export function AITestimonials() {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isPaused, setIsPaused] = useState(false);
+
+  const nextSlide = useCallback(() => {
+    setCurrentIndex((prev) => (prev + 1) % testimonials.length);
+  }, []);
+
+  const prevSlide = useCallback(() => {
+    setCurrentIndex((prev) => (prev - 1 + testimonials.length) % testimonials.length);
+  }, []);
+
+  // Auto-scroll
+  useEffect(() => {
+    if (isPaused) return;
+    const interval = setInterval(nextSlide, 5000);
+    return () => clearInterval(interval);
+  }, [isPaused, nextSlide]);
+
+  return (
+    <section className="py-16 sm:py-20 px-4 sm:px-6 bg-surface/30 overflow-hidden">
+      <div className="max-w-5xl mx-auto">
+        {/* Header */}
+        <div className="text-center mb-10 sm:mb-12">
+          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-accent/10 border border-accent/20 text-accent text-sm font-medium mb-4">
+            What AI Agents Say
+          </div>
+          <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight">
+            Reviewed by AI, built for AI
+          </h2>
+          <p className="text-text-muted mt-3 max-w-lg mx-auto text-sm sm:text-base">
+            We asked leading AI models to evaluate APIClaw. Here's what they said.
+          </p>
+        </div>
+
+        {/* Carousel */}
+        <div 
+          className="relative"
+          onMouseEnter={() => setIsPaused(true)}
+          onMouseLeave={() => setIsPaused(false)}
+        >
+          {/* Cards Container */}
+          <div className="flex gap-4 sm:gap-6 overflow-hidden">
+            {/* Desktop: Show all 4 cards */}
+            <div className="hidden lg:grid lg:grid-cols-4 gap-4 w-full">
+              {testimonials.map((testimonial, i) => (
+                <TestimonialCard key={i} testimonial={testimonial} isActive={i === currentIndex} />
+              ))}
+            </div>
+
+            {/* Tablet: Show 2 cards */}
+            <div className="hidden sm:flex lg:hidden gap-4 w-full">
+              {[0, 1].map((offset) => {
+                const idx = (currentIndex + offset) % testimonials.length;
+                return (
+                  <div key={idx} className="w-1/2">
+                    <TestimonialCard testimonial={testimonials[idx]} isActive={offset === 0} />
+                  </div>
+                );
+              })}
+            </div>
+
+            {/* Mobile: Single card with slide animation */}
+            <div className="sm:hidden w-full">
+              <div 
+                className="flex transition-transform duration-500 ease-out"
+                style={{ transform: `translateX(-${currentIndex * 100}%)` }}
+              >
+                {testimonials.map((testimonial, i) => (
+                  <div key={i} className="w-full flex-shrink-0 px-1">
+                    <TestimonialCard testimonial={testimonial} isActive={i === currentIndex} />
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {/* Navigation Arrows - Mobile & Tablet */}
+          <button
+            onClick={prevSlide}
+            className="lg:hidden absolute left-0 top-1/2 -translate-y-1/2 -translate-x-2 sm:-translate-x-4 w-10 h-10 rounded-full bg-surface-elevated border border-border shadow-lg flex items-center justify-center hover:bg-surface transition z-10"
+            aria-label="Previous testimonial"
+          >
+            <ChevronLeft className="w-5 h-5" />
+          </button>
+          <button
+            onClick={nextSlide}
+            className="lg:hidden absolute right-0 top-1/2 -translate-y-1/2 translate-x-2 sm:translate-x-4 w-10 h-10 rounded-full bg-surface-elevated border border-border shadow-lg flex items-center justify-center hover:bg-surface transition z-10"
+            aria-label="Next testimonial"
+          >
+            <ChevronRight className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Dots - Mobile & Tablet */}
+        <div className="lg:hidden flex justify-center gap-2 mt-6">
+          {testimonials.map((_, i) => (
+            <button
+              key={i}
+              onClick={() => setCurrentIndex(i)}
+              className={`w-2 h-2 rounded-full transition-all ${
+                i === currentIndex 
+                  ? "bg-accent w-6" 
+                  : "bg-border hover:bg-text-muted"
+              }`}
+              aria-label={`Go to testimonial ${i + 1}`}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function TestimonialCard({ 
+  testimonial, 
+  isActive 
+}: { 
+  testimonial: typeof testimonials[0];
+  isActive: boolean;
+}) {
+  return (
+    <div 
+      className={`
+        relative p-5 sm:p-6 rounded-2xl border transition-all duration-300
+        ${isActive 
+          ? "bg-surface-elevated border-accent/30 shadow-lg shadow-accent/5" 
+          : "bg-surface border-border hover:border-border-subtle"
+        }
+      `}
+    >
+      {/* Gradient accent */}
+      <div className={`absolute inset-x-0 top-0 h-1 rounded-t-2xl bg-gradient-to-r ${testimonial.color} opacity-60`} />
+      
+      {/* Quote */}
+      <p className="text-text-primary text-sm sm:text-base leading-relaxed mb-6 min-h-[4.5rem]">
+        "{testimonial.quote}"
+      </p>
+      
+      {/* Attribution */}
+      <div className="flex items-center gap-3">
+        <div className="w-10 h-10 rounded-xl bg-white/10 flex items-center justify-center p-1.5">
+          <Image 
+            src={testimonial.logo} 
+            alt={testimonial.model} 
+            width={28} 
+            height={28}
+            className="object-contain"
+          />
+        </div>
+        <div>
+          <div className="font-semibold text-sm">{testimonial.model}</div>
+          <div className="text-text-muted text-xs">{testimonial.role}</div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/landing/src/components/ChainStepDetail.tsx

@@ -0,0 +1,310 @@
+"use client";
+
+import { useState } from "react";
+import {
+  ChevronDown,
+  ChevronRight,
+  CheckCircle2,
+  XCircle,
+  Loader2,
+  PauseCircle,
+  SkipForward,
+  Clock,
+  RotateCcw,
+  Zap,
+  ArrowRight,
+  AlertTriangle,
+} from "lucide-react";
+
+interface StepExecution {
+  _id: string;
+  stepId: string;
+  stepIndex: number;
+  status: "pending" | "running" | "completed" | "failed" | "skipped";
+  input?: any;
+  output?: any;
+  latencyMs?: number;
+  costCents?: number;
+  error?: {
+    code: string;
+    message: string;
+    retryCount?: number;
+  };
+  parallelGroup?: string;
+  createdAt: number;
+  startedAt?: number;
+  completedAt?: number;
+}
+
+interface ChainStepDetailProps {
+  step: StepExecution;
+  stepDef?: {
+    id: string;
+    provider: string;
+    action?: string;
+    params?: Record<string, any>;
+  };
+  isExpanded: boolean;
+  onToggle: () => void;
+}
+
+export function ChainStepDetail({ step, stepDef, isExpanded, onToggle }: ChainStepDetailProps) {
+  const [activeTab, setActiveTab] = useState<"input" | "output" | "error">("input");
+
+  const getStatusIcon = (status: string) => {
+    switch (status) {
+      case "completed":
+        return <CheckCircle2 className="w-4 h-4 text-green-500" />;
+      case "running":
+        return <Loader2 className="w-4 h-4 text-blue-500 animate-spin" />;
+      case "failed":
+        return <XCircle className="w-4 h-4 text-red-500" />;
+      case "skipped":
+        return <SkipForward className="w-4 h-4 text-gray-500" />;
+      case "paused":
+        return <PauseCircle className="w-4 h-4 text-yellow-500" />;
+      default:
+        return <Clock className="w-4 h-4 text-gray-500" />;
+    }
+  };
+
+  const getStatusBg = (status: string) => {
+    switch (status) {
+      case "completed":
+        return "bg-green-500/10 border-green-500/20";
+      case "running":
+        return "bg-blue-500/10 border-blue-500/20";
+      case "failed":
+        return "bg-red-500/10 border-red-500/20";
+      case "skipped":
+        return "bg-gray-500/10 border-gray-500/20";
+      case "paused":
+        return "bg-yellow-500/10 border-yellow-500/20";
+      default:
+        return "bg-white/5 border-white/10";
+    }
+  };
+
+  const formatDuration = (ms: number) => {
+    if (ms < 1000) return `${ms}ms`;
+    return `${(ms / 1000).toFixed(1)}s`;
+  };
+
+  const formatCost = (cents: number) => {
+    if (cents === 0) return "$0.00";
+    return `$${(cents / 100).toFixed(2)}`;
+  };
+
+  // Highlight references in input (e.g., $generate.url)
+  const highlightReferences = (obj: any): any => {
+    if (typeof obj === "string") {
+      // Check if string contains references
+      if (obj.includes("$")) {
+        return obj;
+      }
+      return obj;
+    }
+    if (Array.isArray(obj)) {
+      return obj.map(highlightReferences);
+    }
+    if (typeof obj === "object" && obj !== null) {
+      return Object.fromEntries(
+        Object.entries(obj).map(([k, v]) => [k, highlightReferences(v)])
+      );
+    }
+    return obj;
+  };
+
+  // Render JSON with syntax highlighting
+  const renderJson = (data: any, highlightRefs = false) => {
+    if (!data) return <span className="text-white/40">null</span>;
+    
+    const jsonString = JSON.stringify(data, null, 2);
+    
+    if (highlightRefs) {
+      // Highlight $references
+      const parts = jsonString.split(/(\$[a-zA-Z_][a-zA-Z0-9_]*(?:\.[a-zA-Z0-9_\[\]]+)*)/g);
+      return (
+        <pre className="text-xs font-mono text-white/80 whitespace-pre-wrap break-all">
+          {parts.map((part, i) =>
+            part.startsWith("$") ? (
+              <span key={i} className="bg-[#ef4444]/20 text-[#ef4444] px-1 rounded">
+                {part}
+              </span>
+            ) : (
+              <span key={i}>{part}</span>
+            )
+          )}
+        </pre>
+      );
+    }
+
+    return (
+      <pre className="text-xs font-mono text-white/80 whitespace-pre-wrap break-all">
+        {jsonString}
+      </pre>
+    );
+  };
+
+  return (
+    <div className={`rounded-lg border transition-all ${getStatusBg(step.status)}`}>
+      {/* Header */}
+      <button
+        onClick={onToggle}
+        className="w-full px-4 py-3 flex items-center justify-between text-left"
+      >
+        <div className="flex items-center gap-3">
+          {isExpanded ? (
+            <ChevronDown className="w-4 h-4 text-white/40" />
+          ) : (
+            <ChevronRight className="w-4 h-4 text-white/40" />
+          )}
+          {getStatusIcon(step.status)}
+          <div className="flex items-center gap-2">
+            <span className="font-medium font-mono">{step.stepId}</span>
+            {stepDef && (
+              <span className="text-white/40 flex items-center gap-1 text-sm">
+                <ArrowRight className="w-3 h-3" />
+                <span className="text-white/60">{stepDef.provider}</span>
+                {stepDef.action && (
+                  <>
+                    <span className="text-white/20">/</span>
+                    <span>{stepDef.action}</span>
+                  </>
+                )}
+              </span>
+            )}
+          </div>
+        </div>
+        <div className="flex items-center gap-4 text-sm text-white/60">
+          {step.error?.retryCount && step.error.retryCount > 0 && (
+            <span className="flex items-center gap-1 text-yellow-500">
+              <RotateCcw className="w-3.5 h-3.5" />
+              {step.error.retryCount} retries
+            </span>
+          )}
+          <span className="flex items-center gap-1">
+            <Clock className="w-3.5 h-3.5" />
+            {formatDuration(step.latencyMs || 0)}
+          </span>
+          <span className="flex items-center gap-1">
+            <Zap className="w-3.5 h-3.5" />
+            {formatCost(step.costCents || 0)}
+          </span>
+        </div>
+      </button>
+
+      {/* Expanded Content */}
+      {isExpanded && (
+        <div className="px-4 pb-4 pt-0">
+          {/* Tabs */}
+          <div className="flex items-center gap-1 mb-3 border-b border-white/10 pb-2">
+            <button
+              onClick={() => setActiveTab("input")}
+              className={`px-3 py-1.5 rounded-t text-sm transition-colors ${
+                activeTab === "input"
+                  ? "bg-white/10 text-white"
+                  : "text-white/40 hover:text-white/60"
+              }`}
+            >
+              Input
+            </button>
+            <button
+              onClick={() => setActiveTab("output")}
+              className={`px-3 py-1.5 rounded-t text-sm transition-colors ${
+                activeTab === "output"
+                  ? "bg-white/10 text-white"
+                  : "text-white/40 hover:text-white/60"
+              }`}
+            >
+              Output
+            </button>
+            {step.error && (
+              <button
+                onClick={() => setActiveTab("error")}
+                className={`px-3 py-1.5 rounded-t text-sm transition-colors flex items-center gap-1 ${
+                  activeTab === "error"
+                    ? "bg-red-500/20 text-red-500"
+                    : "text-red-400 hover:text-red-300"
+                }`}
+              >
+                <AlertTriangle className="w-3.5 h-3.5" />
+                Error
+              </button>
+            )}
+          </div>
+
+          {/* Tab Content */}
+          <div className="bg-black/30 rounded-lg p-3 max-h-64 overflow-auto">
+            {activeTab === "input" && (
+              <div>
+                {step.input ? (
+                  renderJson(step.input, true)
+                ) : stepDef?.params ? (
+                  renderJson(stepDef.params, true)
+                ) : (
+                  <span className="text-white/40 text-sm">No input data</span>
+                )}
+              </div>
+            )}
+
+            {activeTab === "output" && (
+              <div>
+                {step.output ? (
+                  renderJson(step.output)
+                ) : (
+                  <span className="text-white/40 text-sm">
+                    {step.status === "running"
+                      ? "Waiting for output..."
+                      : step.status === "pending"
+                      ? "Step not yet executed"
+                      : "No output data"}
+                  </span>
+                )}
+              </div>
+            )}
+
+            {activeTab === "error" && step.error && (
+              <div className="space-y-2">
+                <div className="flex items-center gap-2">
+                  <span className="text-xs text-white/40">Code:</span>
+                  <code className="text-xs bg-red-500/20 text-red-400 px-2 py-0.5 rounded">
+                    {step.error.code}
+                  </code>
+                </div>
+                <div>
+                  <span className="text-xs text-white/40">Message:</span>
+                  <p className="text-sm text-red-400 mt-1">{step.error.message}</p>
+                </div>
+                {step.error.retryCount && step.error.retryCount > 0 && (
+                  <div className="flex items-center gap-2 pt-2 border-t border-white/10">
+                    <RotateCcw className="w-3.5 h-3.5 text-yellow-500" />
+                    <span className="text-xs text-white/60">
+                      Retried {step.error.retryCount} time(s) before failing
+                    </span>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+
+          {/* Step Metadata */}
+          <div className="flex items-center gap-4 mt-3 pt-3 border-t border-white/10 text-xs text-white/40">
+            <span>Index: {step.stepIndex}</span>
+            {step.parallelGroup && (
+              <span className="px-2 py-0.5 bg-white/10 rounded">
+                Parallel: {step.parallelGroup}
+              </span>
+            )}
+            {step.startedAt && (
+              <span>Started: {new Date(step.startedAt).toLocaleTimeString()}</span>
+            )}
+            {step.completedAt && (
+              <span>Completed: {new Date(step.completedAt).toLocaleTimeString()}</span>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}