@nordsym/apiclaw 1.3.13 → 1.4.0

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>
+  );
+}

package/landing/src/components/ChainTrace.tsx

@@ -0,0 +1,261 @@
+"use client";
+
+import { useMemo } from "react";
+import { CheckCircle2, XCircle, Loader2, PauseCircle, SkipForward, Clock, DollarSign, Sparkles } 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 ChainTraceProps {
+  chain: {
+    _id: string;
+    status: string;
+    totalCostCents: number;
+    totalLatencyMs: number;
+    startedAt?: number;
+    completedAt?: number;
+    steps?: any[];
+  };
+  executions: StepExecution[];
+  tokensSaved: number;
+}
+
+export function ChainTrace({ chain, executions, tokensSaved }: ChainTraceProps) {
+  // Calculate timeline boundaries
+  const timelineBounds = useMemo(() => {
+    if (executions.length === 0) return { start: 0, end: 1000, duration: 1000 };
+
+    const startTimes = executions
+      .filter((e) => e.startedAt)
+      .map((e) => e.startedAt!);
+    const endTimes = executions
+      .filter((e) => e.completedAt)
+      .map((e) => e.completedAt!);
+
+    const start = startTimes.length > 0 ? Math.min(...startTimes) : chain.startedAt || Date.now();
+    const end = endTimes.length > 0 ? Math.max(...endTimes) : chain.completedAt || Date.now();
+    const duration = Math.max(end - start, 1);
+
+    return { start, end, duration };
+  }, [executions, chain]);
+
+  // Group parallel executions
+  const groupedExecutions = useMemo(() => {
+    const groups: { group: string | null; steps: StepExecution[] }[] = [];
+    let currentGroup: string | null = null;
+    let currentSteps: StepExecution[] = [];
+
+    executions.forEach((exec) => {
+      if (exec.parallelGroup !== currentGroup) {
+        if (currentSteps.length > 0) {
+          groups.push({ group: currentGroup, steps: currentSteps });
+        }
+        currentGroup = exec.parallelGroup || null;
+        currentSteps = [exec];
+      } else {
+        currentSteps.push(exec);
+      }
+    });
+
+    if (currentSteps.length > 0) {
+      groups.push({ group: currentGroup, steps: currentSteps });
+    }
+
+    return groups;
+  }, [executions]);
+
+  const getStatusIcon = (status: string) => {
+    switch (status) {
+      case "completed":
+        return <CheckCircle2 className="w-3.5 h-3.5 text-green-500" />;
+      case "running":
+        return <Loader2 className="w-3.5 h-3.5 text-blue-500 animate-spin" />;
+      case "failed":
+        return <XCircle className="w-3.5 h-3.5 text-red-500" />;
+      case "skipped":
+        return <SkipForward className="w-3.5 h-3.5 text-gray-500" />;
+      case "paused":
+        return <PauseCircle className="w-3.5 h-3.5 text-yellow-500" />;
+      default:
+        return <Clock className="w-3.5 h-3.5 text-gray-500" />;
+    }
+  };
+
+  const getBarColor = (status: string) => {
+    switch (status) {
+      case "completed":
+        return "bg-green-500";
+      case "running":
+        return "bg-blue-500 animate-pulse";
+      case "failed":
+        return "bg-red-500";
+      case "skipped":
+        return "bg-gray-500";
+      case "paused":
+        return "bg-yellow-500";
+      default:
+        return "bg-gray-600";
+    }
+  };
+
+  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)}`;
+  };
+
+  const calculateBarPosition = (step: StepExecution) => {
+    const start = step.startedAt || timelineBounds.start;
+    const end = step.completedAt || (step.startedAt ? step.startedAt + (step.latencyMs || 0) : timelineBounds.end);
+
+    const left = ((start - timelineBounds.start) / timelineBounds.duration) * 100;
+    const width = ((end - start) / timelineBounds.duration) * 100;
+
+    return {
+      left: `${Math.max(0, left)}%`,
+      width: `${Math.max(2, Math.min(100 - left, width))}%`,
+    };
+  };
+
+  // Get provider info from step definition
+  const getStepProvider = (stepId: string) => {
+    const stepDef = chain.steps?.find((s: any) => s.id === stepId);
+    return stepDef?.provider || "unknown";
+  };
+
+  return (
+    <div className="bg-black/30 rounded-xl border border-white/10 overflow-hidden">
+      {/* Header */}
+      <div className="px-4 py-3 border-b border-white/10 flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-medium">Chain:</span>
+          <code className="text-xs text-white/60 font-mono">{chain._id.slice(0, 16)}...</code>
+        </div>
+        <div className="flex items-center gap-4 text-sm text-white/60">
+          <span className="flex items-center gap-1">
+            <Clock className="w-3.5 h-3.5" />
+            Total: {formatDuration(chain.totalLatencyMs)}
+          </span>
+        </div>
+      </div>
+
+      {/* Timeline */}
+      <div className="p-4 space-y-2">
+        {groupedExecutions.map(({ group, steps }, groupIndex) => (
+          <div key={group || groupIndex}>
+            {/* Parallel group indicator */}
+            {group && steps.length > 1 && (
+              <div className="text-xs text-white/40 mb-1 flex items-center gap-1">
+                <span className="px-1.5 py-0.5 bg-white/10 rounded">Parallel</span>
+              </div>
+            )}
+            
+            {/* Steps in group */}
+            <div className={group && steps.length > 1 ? "pl-4 border-l-2 border-white/10 space-y-2" : "space-y-2"}>
+              {steps.map((step) => {
+                const position = calculateBarPosition(step);
+                return (
+                  <div key={step._id} className="flex items-center gap-3">
+                    {/* Step name */}
+                    <div className="w-24 flex-shrink-0 flex items-center gap-2">
+                      {getStatusIcon(step.status)}
+                      <span className="text-sm font-mono truncate" title={step.stepId}>
+                        {step.stepId}
+                      </span>
+                    </div>
+
+                    {/* Gantt bar */}
+                    <div className="flex-1 h-6 bg-white/5 rounded relative overflow-hidden">
+                      <div
+                        className={`absolute top-0 h-full rounded ${getBarColor(step.status)}`}
+                        style={{
+                          left: position.left,
+                          width: position.width,
+                        }}
+                      />
+                      {/* Time markers - simplified */}
+                      <div className="absolute inset-0 flex items-center px-2">
+                        <span
+                          className="text-xs font-mono text-white/80 drop-shadow-sm"
+                          style={{
+                            marginLeft: position.left,
+                          }}
+                        >
+                          {formatDuration(step.latencyMs || 0)}
+                        </span>
+                      </div>
+                    </div>
+
+                    {/* Cost */}
+                    <div className="w-16 text-right text-xs text-white/60">
+                      {formatCost(step.costCents || 0)}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Footer */}
+      <div className="px-4 py-3 border-t border-white/10 flex items-center justify-between text-sm">
+        <div className="flex items-center gap-4">
+          <span className="flex items-center gap-1 text-white/60">
+            <DollarSign className="w-3.5 h-3.5" />
+            Total Cost: <span className="text-white font-medium">{formatCost(chain.totalCostCents)}</span>
+          </span>
+        </div>
+        <div className="flex items-center gap-1 text-white/60">
+          <Sparkles className="w-3.5 h-3.5 text-yellow-500" />
+          <span>Tokens Saved: <span className="text-yellow-500 font-medium">~{tokensSaved.toLocaleString()}</span></span>
+        </div>
+      </div>
+
+      {/* Legend */}
+      <div className="px-4 py-2 border-t border-white/5 flex items-center gap-4 text-xs text-white/40">
+        <div className="flex items-center gap-1">
+          <div className="w-3 h-3 rounded bg-green-500" />
+          <span>Completed</span>
+        </div>
+        <div className="flex items-center gap-1">
+          <div className="w-3 h-3 rounded bg-blue-500" />
+          <span>Running</span>
+        </div>
+        <div className="flex items-center gap-1">
+          <div className="w-3 h-3 rounded bg-red-500" />
+          <span>Failed</span>
+        </div>
+        <div className="flex items-center gap-1">
+          <div className="w-3 h-3 rounded bg-yellow-500" />
+          <span>Paused</span>
+        </div>
+        <div className="flex items-center gap-1">
+          <div className="w-3 h-3 rounded bg-gray-500" />
+          <span>Skipped</span>
+        </div>
+      </div>
+    </div>
+  );
+}

package/landing/src/lib/stats.json

@@ -4,7 +4,7 @@
   "directCallCount": 18,
   "categoryCount": 13,
   "lastUpdated": "2026-02-27T09:10:41.344767",
-  "generatedAt": "2026-03-01T23:58:31.229Z",
+  "generatedAt": "2026-03-02T00:02:51.920Z",
   "categoryBreakdown": {
     "Finance": 1179,
     "Auth & Security": 491,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nordsym/apiclaw",
-  "version": "1.3.13",
+  "version": "1.4.0",
   "description": "The API layer for AI agents. 22,000+ APIs. Direct Call. Works with any MCP-compatible agent.",
   "type": "module",
   "main": "dist/index.js",