@cortexmemory/cli 0.26.2 → 0.27.1

package/templates/vercel-ai-quickstart/components/HealthStatus.tsx

@@ -0,0 +1,214 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+
+interface HealthCheck {
+  status: string;
+  latencyMs?: number;
+  error?: string;
+}
+
+interface HealthResponse {
+  status: "healthy" | "degraded" | "unhealthy";
+  timestamp: string;
+  checks: Record<string, HealthCheck>;
+  config: {
+    convexUrl: string;
+    publicConvexUrl: string;
+    openaiKey: string;
+    graphSync: string;
+    graphBackend: string;
+  };
+}
+
+export function HealthStatus() {
+  const [health, setHealth] = useState<HealthResponse | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [expanded, setExpanded] = useState(false);
+
+  const checkHealth = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const response = await fetch("/api/health");
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}`);
+      }
+      const data = await response.json();
+      setHealth(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Health check failed");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    checkHealth();
+    // Re-check every 30 seconds
+    const interval = setInterval(checkHealth, 30000);
+    return () => clearInterval(interval);
+  }, [checkHealth]);
+
+  const statusColor = {
+    healthy: "bg-green-500",
+    degraded: "bg-yellow-500",
+    unhealthy: "bg-red-500",
+  };
+
+  const statusIcon = {
+    healthy: "✓",
+    degraded: "⚠",
+    unhealthy: "✗",
+  };
+
+  if (loading && !health) {
+    return (
+      <div className="flex items-center gap-2 text-sm text-gray-400">
+        <div className="w-2 h-2 rounded-full bg-gray-500 animate-pulse" />
+        <span>Checking...</span>
+      </div>
+    );
+  }
+
+  if (error && !health) {
+    return (
+      <button
+        onClick={checkHealth}
+        className="flex items-center gap-2 text-sm text-red-400 hover:text-red-300"
+      >
+        <div className="w-2 h-2 rounded-full bg-red-500" />
+        <span>Connection Error</span>
+      </button>
+    );
+  }
+
+  if (!health) return null;
+
+  return (
+    <div className="relative">
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="flex items-center gap-2 text-sm hover:opacity-80 transition-opacity"
+      >
+        <div
+          className={`w-2 h-2 rounded-full ${statusColor[health.status]} ${
+            loading ? "animate-pulse" : ""
+          }`}
+        />
+        <span
+          className={
+            health.status === "healthy"
+              ? "text-green-400"
+              : health.status === "degraded"
+                ? "text-yellow-400"
+                : "text-red-400"
+          }
+        >
+          {statusIcon[health.status]} Backend{" "}
+          {health.status.charAt(0).toUpperCase() + health.status.slice(1)}
+        </span>
+      </button>
+
+      {expanded && (
+        <div className="absolute right-0 top-full mt-2 w-80 bg-gray-900 border border-white/10 rounded-lg shadow-xl z-50 p-4">
+          <div className="flex items-center justify-between mb-3">
+            <h3 className="font-semibold">System Health</h3>
+            <button
+              onClick={checkHealth}
+              disabled={loading}
+              className="text-xs text-gray-400 hover:text-white disabled:opacity-50"
+            >
+              {loading ? "Checking..." : "Refresh"}
+            </button>
+          </div>
+
+          <div className="space-y-2 text-sm">
+            {/* Individual checks */}
+            {Object.entries(health.checks).map(([name, check]) => (
+              <div
+                key={name}
+                className="flex items-center justify-between py-1 border-b border-white/5"
+              >
+                <span className="text-gray-400 capitalize">
+                  {name.replace(/([A-Z])/g, " $1").trim()}
+                </span>
+                <span
+                  className={`flex items-center gap-1 ${
+                    check.status === "ok"
+                      ? "text-green-400"
+                      : check.status === "warning"
+                        ? "text-yellow-400"
+                        : "text-red-400"
+                  }`}
+                >
+                  {check.status === "ok"
+                    ? "✓"
+                    : check.status === "warning"
+                      ? "⚠"
+                      : "✗"}
+                  {check.latencyMs !== undefined && (
+                    <span className="text-gray-500 text-xs ml-1">
+                      {check.latencyMs}ms
+                    </span>
+                  )}
+                </span>
+              </div>
+            ))}
+
+            {/* Config summary */}
+            <div className="pt-2 mt-2 border-t border-white/10">
+              <div className="text-xs text-gray-500 mb-1">Configuration</div>
+              <div className="flex flex-wrap gap-1">
+                <span
+                  className={`px-2 py-0.5 rounded text-xs ${
+                    health.config.convexUrl === "configured"
+                      ? "bg-green-900/30 text-green-400"
+                      : "bg-red-900/30 text-red-400"
+                  }`}
+                >
+                  Convex
+                </span>
+                <span
+                  className={`px-2 py-0.5 rounded text-xs ${
+                    health.config.openaiKey === "configured"
+                      ? "bg-green-900/30 text-green-400"
+                      : "bg-red-900/30 text-red-400"
+                  }`}
+                >
+                  OpenAI
+                </span>
+                <span
+                  className={`px-2 py-0.5 rounded text-xs ${
+                    health.config.graphSync === "enabled"
+                      ? "bg-blue-900/30 text-blue-400"
+                      : "bg-gray-900/30 text-gray-500"
+                  }`}
+                >
+                  Graph: {health.config.graphBackend}
+                </span>
+              </div>
+            </div>
+
+            {/* Errors */}
+            {Object.entries(health.checks)
+              .filter(([, check]) => check.error)
+              .map(([name, check]) => (
+                <div
+                  key={`error-${name}`}
+                  className="mt-2 p-2 bg-red-900/20 rounded text-xs text-red-400"
+                >
+                  <strong className="capitalize">{name}:</strong> {check.error}
+                </div>
+              ))}
+          </div>
+
+          <div className="mt-3 pt-2 border-t border-white/10 text-xs text-gray-500">
+            Last checked: {new Date(health.timestamp).toLocaleTimeString()}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/vercel-ai-quickstart/components/LayerCard.tsx

@@ -0,0 +1,263 @@
+"use client";
+
+import { motion, AnimatePresence } from "framer-motion";
+import { useState } from "react";
+import { DataPreview } from "./DataPreview";
+
+type LayerStatus = "pending" | "in_progress" | "complete" | "error" | "skipped";
+type RevisionAction = "ADD" | "UPDATE" | "SUPERSEDE" | "NONE";
+
+interface LayerCardProps {
+  name: string;
+  icon: string;
+  status: LayerStatus;
+  latencyMs?: number;
+  data?: {
+    id?: string;
+    preview?: string;
+    metadata?: Record<string, unknown>;
+  };
+  compact?: boolean;
+  optional?: boolean;
+  /** Revision action taken by belief revision system (v0.24.0+) */
+  revisionAction?: RevisionAction;
+  /** Facts that were superseded (when revisionAction is "SUPERSEDE") */
+  supersededFacts?: string[];
+}
+
+/**
+ * Get badge styling for revision action
+ */
+const revisionBadgeConfig: Record<
+  RevisionAction,
+  { color: string; bgColor: string; label: string }
+> = {
+  ADD: {
+    color: "text-green-400",
+    bgColor: "bg-green-500/20",
+    label: "NEW",
+  },
+  UPDATE: {
+    color: "text-blue-400",
+    bgColor: "bg-blue-500/20",
+    label: "UPDATED",
+  },
+  SUPERSEDE: {
+    color: "text-orange-400",
+    bgColor: "bg-orange-500/20",
+    label: "SUPERSEDED",
+  },
+  NONE: {
+    color: "text-gray-400",
+    bgColor: "bg-gray-500/20",
+    label: "UNCHANGED",
+  },
+};
+
+const statusConfig: Record<
+  LayerStatus,
+  { color: string; bgColor: string; text: string }
+> = {
+  pending: {
+    color: "text-gray-400",
+    bgColor: "bg-gray-500/20",
+    text: "○",
+  },
+  in_progress: {
+    color: "text-yellow-400",
+    bgColor: "bg-yellow-500/20",
+    text: "◐",
+  },
+  complete: {
+    color: "text-green-400",
+    bgColor: "bg-green-500/20",
+    text: "●",
+  },
+  error: {
+    color: "text-red-400",
+    bgColor: "bg-red-500/20",
+    text: "✕",
+  },
+  skipped: {
+    color: "text-gray-600",
+    bgColor: "bg-gray-800/50",
+    text: "○",
+  },
+};
+
+export function LayerCard({
+  name,
+  icon,
+  status,
+  latencyMs,
+  data,
+  compact = false,
+  optional = false,
+  revisionAction,
+  supersededFacts,
+}: LayerCardProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const config = statusConfig[status];
+  const revisionConfig = revisionAction
+    ? revisionBadgeConfig[revisionAction]
+    : null;
+
+  if (compact) {
+    return (
+      <motion.div
+        className={`px-3 py-2 rounded-lg border border-white/10 ${config.bgColor} min-w-[100px]`}
+        animate={{
+          scale: status === "in_progress" ? [1, 1.02, 1] : 1,
+          boxShadow:
+            status === "complete"
+              ? [
+                  "0 0 0 0 rgba(34, 197, 94, 0.4)",
+                  "0 0 0 4px rgba(34, 197, 94, 0)",
+                ]
+              : "none",
+        }}
+        transition={{
+          duration: status === "in_progress" ? 1 : 0.5,
+          repeat: status === "in_progress" ? Infinity : 0,
+        }}
+      >
+        <div className="flex items-center gap-2">
+          <span className={`text-sm ${config.color}`}>{config.text}</span>
+          <span>{icon}</span>
+          <span className="text-xs font-medium truncate">{name}</span>
+        </div>
+        <div className="flex items-center justify-center gap-2 mt-0.5">
+          {latencyMs !== undefined && (
+            <span className="text-[10px] text-gray-500">{latencyMs}ms</span>
+          )}
+          {/* Revision action badge (v0.24.0+) */}
+          {revisionConfig && revisionAction !== "NONE" && (
+            <motion.span
+              initial={{ scale: 0.8, opacity: 0 }}
+              animate={{ scale: 1, opacity: 1 }}
+              className={`text-[9px] px-1.5 py-0.5 rounded ${revisionConfig.bgColor} ${revisionConfig.color} font-medium`}
+            >
+              {revisionConfig.label}
+            </motion.span>
+          )}
+        </div>
+      </motion.div>
+    );
+  }
+
+  return (
+    <motion.div
+      className={`rounded-xl border border-white/10 ${config.bgColor} overflow-hidden ${
+        optional && status === "skipped" ? "opacity-50" : ""
+      }`}
+      animate={{
+        scale: status === "in_progress" ? [1, 1.01, 1] : 1,
+      }}
+      transition={{
+        duration: 1,
+        repeat: status === "in_progress" ? Infinity : 0,
+      }}
+      layout
+    >
+      <button
+        onClick={() => data && setIsExpanded(!isExpanded)}
+        className={`w-full px-4 py-3 flex items-center gap-3 ${
+          data ? "cursor-pointer hover:bg-white/5" : "cursor-default"
+        } transition-colors`}
+      >
+        {/* Status indicator */}
+        <motion.div
+          className={`w-3 h-3 rounded-full flex-shrink-0 ${
+            status === "complete"
+              ? "bg-green-500"
+              : status === "in_progress"
+                ? "bg-yellow-500"
+                : status === "error"
+                  ? "bg-red-500"
+                  : "bg-gray-500"
+          }`}
+          animate={{
+            opacity: status === "in_progress" ? [0.5, 1, 0.5] : 1,
+            scale: status === "complete" ? [1, 1.2, 1] : 1,
+          }}
+          transition={{
+            duration: status === "in_progress" ? 1 : 0.3,
+            repeat: status === "in_progress" ? Infinity : 0,
+          }}
+        />
+
+        {/* Icon and name */}
+        <span className="text-lg">{icon}</span>
+        <span className="font-medium flex-1 text-left">{name}</span>
+
+        {/* Latency */}
+        {latencyMs !== undefined && (
+          <span className="text-sm text-gray-400">{latencyMs}ms</span>
+        )}
+
+        {/* Revision action badge (v0.24.0+) */}
+        {revisionConfig && revisionAction !== "NONE" && (
+          <motion.span
+            initial={{ scale: 0.8, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            className={`text-[10px] px-1.5 py-0.5 rounded ${revisionConfig.bgColor} ${revisionConfig.color} font-medium`}
+          >
+            {revisionConfig.label}
+          </motion.span>
+        )}
+
+        {/* Optional badge */}
+        {optional && (
+          <span className="text-[10px] px-1.5 py-0.5 bg-white/10 rounded text-gray-400">
+            optional
+          </span>
+        )}
+
+        {/* Expand indicator */}
+        {data && (
+          <motion.span
+            className="text-gray-400"
+            animate={{ rotate: isExpanded ? 180 : 0 }}
+          >
+            ▼
+          </motion.span>
+        )}
+      </button>
+
+      {/* Expandable data preview */}
+      <AnimatePresence>
+        {isExpanded && data && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: "auto", opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className="overflow-hidden"
+          >
+            <div className="px-4 pb-3 pt-1 border-t border-white/10">
+              <DataPreview data={data} />
+              {/* Show superseded facts when revisionAction is SUPERSEDE */}
+              {revisionAction === "SUPERSEDE" &&
+                supersededFacts &&
+                supersededFacts.length > 0 && (
+                  <div className="mt-2 pt-2 border-t border-white/5">
+                    <div className="text-[10px] text-orange-400 font-medium mb-1">
+                      Superseded Facts:
+                    </div>
+                    {supersededFacts.map((fact, i) => (
+                      <div
+                        key={i}
+                        className="text-[10px] text-gray-500 line-through"
+                      >
+                        {fact}
+                      </div>
+                    ))}
+                  </div>
+                )}
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </motion.div>
+  );
+}

package/templates/vercel-ai-quickstart/components/LayerFlowDiagram.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { LayerCard } from "./LayerCard";
+import type { LayerState } from "@/lib/layer-tracking";
+
+interface LayerFlowDiagramProps {
+  layers: Record<string, LayerState>;
+  isOrchestrating: boolean;
+  memorySpaceId: string;
+  userId: string;
+}
+
+export function LayerFlowDiagram({
+  layers,
+  isOrchestrating,
+  memorySpaceId,
+  userId,
+}: LayerFlowDiagramProps) {
+  // Define the layer flow order
+  const topLayers = [
+    { key: "memorySpace", name: "Memory Space", icon: "📦" },
+    { key: "user", name: "User", icon: "👤" },
+    { key: "agent", name: "Agent", icon: "🤖" },
+  ];
+
+  const flowLayers = [
+    { key: "conversation", name: "Conversation", icon: "💬" },
+    { key: "vector", name: "Vector Store", icon: "🎯" },
+    { key: "facts", name: "Facts", icon: "💡" },
+    { key: "graph", name: "Graph", icon: "🕸️", optional: true },
+  ];
+
+  return (
+    <div className="space-y-6">
+      {/* Title section */}
+      <div className="text-center">
+        <h3 className="text-lg font-semibold">Memory Orchestration Flow</h3>
+        <p className="text-sm text-gray-400 mt-1">
+          {isOrchestrating
+            ? "Processing your message through Cortex layers..."
+            : "Send a message to see data flow through the system"}
+        </p>
+      </div>
+
+      {/* Top row: Context layers */}
+      <div className="flex justify-center gap-3">
+        {topLayers.map((layer, i) => (
+          <motion.div
+            key={layer.key}
+            initial={{ opacity: 0, y: -10 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: i * 0.1 }}
+          >
+            <LayerCard
+              name={layer.name}
+              icon={layer.icon}
+              status={layers[layer.key]?.status || "pending"}
+              latencyMs={layers[layer.key]?.latencyMs}
+              data={layers[layer.key]?.data}
+              compact
+            />
+          </motion.div>
+        ))}
+      </div>
+
+      {/* Flow connector */}
+      <div className="flex justify-center">
+        <motion.div
+          className="w-0.5 h-8 bg-gradient-to-b from-white/30 to-white/10"
+          animate={{
+            opacity: isOrchestrating ? [0.3, 1, 0.3] : 0.3,
+          }}
+          transition={{
+            duration: 1.5,
+            repeat: Infinity,
+            ease: "easeInOut",
+          }}
+        />
+      </div>
+
+      {/* Main flow: Processing layers */}
+      <div className="space-y-3">
+        {flowLayers.map((layer, i) => (
+          <motion.div
+            key={layer.key}
+            initial={{ opacity: 0, x: -20 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ delay: 0.3 + i * 0.1 }}
+          >
+            <LayerCard
+              name={layer.name}
+              icon={layer.icon}
+              status={
+                layers[layer.key]?.status ||
+                (layer.optional ? "skipped" : "pending")
+              }
+              latencyMs={layers[layer.key]?.latencyMs}
+              data={layers[layer.key]?.data}
+              optional={layer.optional}
+              // Belief revision info (v0.24.0+) - only for facts layer
+              revisionAction={
+                layer.key === "facts"
+                  ? layers[layer.key]?.revisionAction
+                  : undefined
+              }
+              supersededFacts={
+                layer.key === "facts"
+                  ? layers[layer.key]?.supersededFacts
+                  : undefined
+              }
+            />
+
+            {/* Flow connector between layers */}
+            {i < flowLayers.length - 1 && (
+              <div className="flex justify-center py-2">
+                <motion.div
+                  className="w-0.5 h-6"
+                  style={{
+                    background:
+                      layers[layer.key]?.status === "complete"
+                        ? "linear-gradient(to bottom, rgb(34, 197, 94), rgba(255, 255, 255, 0.1))"
+                        : "linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05))",
+                  }}
+                  animate={{
+                    opacity:
+                      isOrchestrating &&
+                      layers[layer.key]?.status === "in_progress"
+                        ? [0.3, 1, 0.3]
+                        : 1,
+                  }}
+                  transition={{
+                    duration: 0.8,
+                    repeat: Infinity,
+                    ease: "easeInOut",
+                  }}
+                />
+              </div>
+            )}
+          </motion.div>
+        ))}
+      </div>
+
+      {/* Legend */}
+      <div className="pt-4 border-t border-white/10 space-y-2">
+        {/* Status legend */}
+        <div className="flex justify-center gap-4 text-xs text-gray-500">
+          <div className="flex items-center gap-1.5">
+            <span className="w-2 h-2 rounded-full bg-gray-500" />
+            <span>Pending</span>
+          </div>
+          <div className="flex items-center gap-1.5">
+            <span className="w-2 h-2 rounded-full bg-yellow-500 animate-pulse" />
+            <span>Processing</span>
+          </div>
+          <div className="flex items-center gap-1.5">
+            <span className="w-2 h-2 rounded-full bg-green-500" />
+            <span>Complete</span>
+          </div>
+          <div className="flex items-center gap-1.5">
+            <span className="w-2 h-2 rounded-full bg-gray-700" />
+            <span>Skipped</span>
+          </div>
+        </div>
+        {/* Belief revision legend (v0.24.0+) */}
+        <div className="flex justify-center gap-3 text-xs text-gray-600">
+          <span className="text-gray-700">Belief Revision:</span>
+          <div className="flex items-center gap-1">
+            <span className="px-1 py-0.5 bg-green-500/20 text-green-400 rounded text-[9px]">
+              NEW
+            </span>
+          </div>
+          <div className="flex items-center gap-1">
+            <span className="px-1 py-0.5 bg-blue-500/20 text-blue-400 rounded text-[9px]">
+              UPDATED
+            </span>
+          </div>
+          <div className="flex items-center gap-1">
+            <span className="px-1 py-0.5 bg-orange-500/20 text-orange-400 rounded text-[9px]">
+              SUPERSEDED
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {/* Context info */}
+      <div className="text-center text-xs text-gray-600">
+        <p>
+          Space: <code className="text-gray-400">{memorySpaceId}</code> • User:{" "}
+          <code className="text-gray-400">{userId}</code>
+        </p>
+      </div>
+    </div>
+  );
+}