@cortexmemory/cli 0.26.2 → 0.27.3

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

@@ -0,0 +1,57 @@
+"use client";
+
+interface DataPreviewProps {
+  data: {
+    id?: string;
+    preview?: string;
+    metadata?: Record<string, unknown>;
+  };
+}
+
+export function DataPreview({ data }: DataPreviewProps) {
+  return (
+    <div className="space-y-2 text-sm">
+      {/* ID */}
+      {data.id && (
+        <div className="flex items-center gap-2">
+          <span className="text-gray-500">ID:</span>
+          <code className="px-1.5 py-0.5 bg-black/30 rounded text-xs font-mono text-cortex-400">
+            {data.id}
+          </code>
+        </div>
+      )}
+
+      {/* Preview */}
+      {data.preview && (
+        <div className="mt-2">
+          <span className="text-gray-500 text-xs">Data:</span>
+          <pre className="mt-1 p-2 bg-black/30 rounded text-xs font-mono text-gray-300 overflow-x-auto whitespace-pre-wrap">
+            {data.preview}
+          </pre>
+        </div>
+      )}
+
+      {/* Metadata */}
+      {data.metadata && Object.keys(data.metadata).length > 0 && (
+        <div className="mt-2">
+          <span className="text-gray-500 text-xs">Metadata:</span>
+          <div className="mt-1 flex flex-wrap gap-1.5">
+            {Object.entries(data.metadata).map(([key, value]) => (
+              <span
+                key={key}
+                className="px-1.5 py-0.5 bg-white/5 rounded text-xs"
+              >
+                <span className="text-gray-500">{key}:</span>{" "}
+                <span className="text-gray-300">
+                  {typeof value === "object"
+                    ? JSON.stringify(value)
+                    : String(value)}
+                </span>
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

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