@cortexmemory/cli 0.26.2 → 0.27.3

package/templates/vercel-ai-quickstart/app/api/health/route.ts

@@ -0,0 +1,99 @@
+import { Cortex } from "@cortexmemory/sdk";
+
+/**
+ * Health check endpoint to verify all backend services
+ */
+export async function GET() {
+  const checks: Record<
+    string,
+    { status: string; latencyMs?: number; error?: string }
+  > = {};
+
+  // Check 1: Environment variables
+  const hasConvexUrl = !!process.env.CONVEX_URL;
+  const hasPublicConvexUrl = !!process.env.NEXT_PUBLIC_CONVEX_URL;
+  const hasOpenAIKey = !!process.env.OPENAI_API_KEY;
+  const hasNeo4jUri = !!process.env.NEO4J_URI;
+  const hasMemgraphUri = !!process.env.MEMGRAPH_URI;
+
+  checks.environment = {
+    status: hasConvexUrl && hasOpenAIKey ? "ok" : "warning",
+    error: !hasConvexUrl
+      ? "CONVEX_URL not set"
+      : !hasOpenAIKey
+        ? "OPENAI_API_KEY not set"
+        : undefined,
+  };
+
+  // Check 2: Cortex SDK initialization
+  try {
+    const startTime = Date.now();
+    const cortex = new Cortex({
+      convexUrl: process.env.CONVEX_URL!,
+    });
+
+    // Quick test - just initialize, don't actually query
+    checks.cortexSdk = {
+      status: "ok",
+      latencyMs: Date.now() - startTime,
+    };
+
+    cortex.close();
+  } catch (error) {
+    checks.cortexSdk = {
+      status: "error",
+      error: error instanceof Error ? error.message : "Unknown error",
+    };
+  }
+
+  // Check 3: Convex backend connectivity (via HTTP)
+  if (process.env.CONVEX_URL) {
+    try {
+      const startTime = Date.now();
+      // Convex URLs are like "https://xxx.convex.cloud"
+      // We can ping the HTTP endpoint
+      const convexUrl = new URL(process.env.CONVEX_URL);
+      const response = await fetch(`${convexUrl.origin}/version`, {
+        method: "GET",
+        signal: AbortSignal.timeout(5000),
+      });
+
+      checks.convexBackend = {
+        status: response.ok ? "ok" : "error",
+        latencyMs: Date.now() - startTime,
+        error: response.ok ? undefined : `HTTP ${response.status}`,
+      };
+    } catch (error) {
+      checks.convexBackend = {
+        status: "error",
+        error: error instanceof Error ? error.message : "Connection failed",
+      };
+    }
+  } else {
+    checks.convexBackend = {
+      status: "error",
+      error: "CONVEX_URL not configured",
+    };
+  }
+
+  // Overall status
+  const hasErrors = Object.values(checks).some((c) => c.status === "error");
+  const hasWarnings = Object.values(checks).some((c) => c.status === "warning");
+
+  return Response.json({
+    status: hasErrors ? "unhealthy" : hasWarnings ? "degraded" : "healthy",
+    timestamp: new Date().toISOString(),
+    checks,
+    config: {
+      convexUrl: hasConvexUrl ? "configured" : "missing",
+      publicConvexUrl: hasPublicConvexUrl ? "configured" : "missing",
+      openaiKey: hasOpenAIKey ? "configured" : "missing",
+      graphSync: hasNeo4jUri || hasMemgraphUri ? "enabled" : "disabled",
+      graphBackend: hasNeo4jUri
+        ? "neo4j"
+        : hasMemgraphUri
+          ? "memgraph"
+          : "none",
+    },
+  });
+}

package/templates/vercel-ai-quickstart/app/api/memories/route.ts

@@ -0,0 +1,37 @@
+import { Cortex } from "@cortexmemory/sdk";
+
+export const dynamic = "force-dynamic";
+
+function getCortex() {
+  return new Cortex({ convexUrl: process.env.CONVEX_URL! });
+}
+
+export async function GET(req: Request) {
+  try {
+    const { searchParams } = new URL(req.url);
+    const memorySpaceId =
+      searchParams.get("memorySpaceId") || "quickstart-demo";
+    const limit = parseInt(searchParams.get("limit") || "20");
+
+    const cortex = getCortex();
+
+    // Fetch recent memories
+    const memories = await cortex.memory.list({
+      memorySpaceId,
+      limit,
+    });
+
+    return Response.json({
+      memories,
+      count: memories.length,
+      memorySpaceId,
+    });
+  } catch (error) {
+    console.error("[Memories API Error]", error);
+
+    return Response.json(
+      { error: error instanceof Error ? error.message : "Unknown error" },
+      { status: 500 },
+    );
+  }
+}

package/templates/vercel-ai-quickstart/app/globals.css

@@ -0,0 +1,275 @@
+@import "tailwindcss";
+
+/* Source paths for v4 */
+@source "../components/**/*.{js,ts,jsx,tsx}";
+@source "./**/*.{js,ts,jsx,tsx}";
+
+/* Custom theme for v4 */
+@theme {
+  --color-cortex-50: #f0f7ff;
+  --color-cortex-100: #e0effe;
+  --color-cortex-200: #b9dffc;
+  --color-cortex-300: #7cc5fa;
+  --color-cortex-400: #36a8f5;
+  --color-cortex-500: #0c8ce6;
+  --color-cortex-600: #006fc4;
+  --color-cortex-700: #0159a0;
+  --color-cortex-800: #064b84;
+  --color-cortex-900: #0b3f6d;
+  --color-cortex-950: #072848;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+/* Layer flow animations */
+@keyframes pulse-glow {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
+  }
+  50% {
+    box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
+  }
+}
+
+@keyframes flow-down {
+  0% {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+}
+
+.layer-complete {
+  animation: pulse-glow 1.5s ease-in-out;
+}
+
+.flow-indicator {
+  animation: flow-down 1.5s ease-in-out infinite;
+}
+
+/* Chat message animations */
+@keyframes message-in {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.message-animate {
+  animation: message-in 0.3s ease-out;
+}
+
+/* Gradient backgrounds */
+.gradient-radial {
+  background: radial-gradient(
+    ellipse at center,
+    var(--tw-gradient-from) 0%,
+    var(--tw-gradient-to) 70%
+  );
+}
+
+/* Glass effect */
+.glass {
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* Code block styling */
+.code-block {
+  background: rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+   Auth Screen Animations
+   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes logo-pulse {
+  0%, 100% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 rgba(12, 140, 230, 0.4);
+  }
+  50% {
+    transform: scale(1.02);
+    box-shadow: 0 0 40px 10px rgba(12, 140, 230, 0.2);
+  }
+}
+
+.auth-screen {
+  animation: fade-in-up 0.5s ease-out;
+}
+
+.auth-logo {
+  animation: logo-pulse 3s ease-in-out infinite;
+}
+
+/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+   Sidebar Animations
+   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+
+@keyframes sidebar-slide-in {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes conversation-item-in {
+  from {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.sidebar-animate {
+  animation: sidebar-slide-in 0.3s ease-out;
+}
+
+.conversation-item {
+  animation: conversation-item-in 0.2s ease-out;
+}
+
+/* Staggered animation for conversation list */
+.conversation-item:nth-child(1) { animation-delay: 0ms; }
+.conversation-item:nth-child(2) { animation-delay: 30ms; }
+.conversation-item:nth-child(3) { animation-delay: 60ms; }
+.conversation-item:nth-child(4) { animation-delay: 90ms; }
+.conversation-item:nth-child(5) { animation-delay: 120ms; }
+.conversation-item:nth-child(n+6) { animation-delay: 150ms; }
+
+/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+   Input Focus Animations
+   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+
+input:focus {
+  box-shadow: 0 0 0 2px rgba(12, 140, 230, 0.2);
+}
+
+/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+   Button Hover Effects
+   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+
+.btn-primary {
+  position: relative;
+  overflow: hidden;
+}
+
+.btn-primary::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  transition: width 0.4s ease, height 0.4s ease;
+}
+
+.btn-primary:hover::after {
+  width: 300px;
+  height: 300px;
+}
+
+/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+   Loading States
+   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0.05) 25%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.05) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+
+/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+   Responsive Sidebar
+   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+
+@media (max-width: 1024px) {
+  /* On smaller screens, the layer flow visualization is hidden */
+  .layer-flow-panel {
+    display: none;
+  }
+}
+
+@media (max-width: 768px) {
+  /* On mobile, sidebar becomes collapsible */
+  .sidebar-mobile-hidden {
+    transform: translateX(-100%);
+    transition: transform 0.3s ease;
+  }
+  
+  .sidebar-mobile-visible {
+    transform: translateX(0);
+    position: fixed;
+    z-index: 50;
+    height: 100vh;
+  }
+}

package/templates/vercel-ai-quickstart/app/layout.tsx

@@ -0,0 +1,19 @@
+import type { Metadata } from "next";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "Cortex Memory Quickstart",
+  description: "Interactive demo of Cortex Memory with Vercel AI SDK",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body className="bg-gray-900 text-white min-h-screen">{children}</body>
+    </html>
+  );
+}

package/templates/vercel-ai-quickstart/app/page.tsx

@@ -0,0 +1,216 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { useState, useCallback } from "react";
+import { useLayerTracking } from "@/lib/layer-tracking";
+import { AuthProvider, useAuth } from "@/components/AuthProvider";
+import { AdminSetup } from "@/components/AdminSetup";
+import { LoginScreen } from "@/components/LoginScreen";
+
+// Dynamic imports to avoid SSR issues with framer-motion
+const ChatInterface = dynamic(
+  () =>
+    import("@/components/ChatInterface").then((m) => ({
+      default: m.ChatInterface,
+    })),
+  { ssr: false },
+);
+const LayerFlowDiagram = dynamic(
+  () =>
+    import("@/components/LayerFlowDiagram").then((m) => ({
+      default: m.LayerFlowDiagram,
+    })),
+  { ssr: false },
+);
+const MemorySpaceSwitcher = dynamic(
+  () =>
+    import("@/components/MemorySpaceSwitcher").then((m) => ({
+      default: m.MemorySpaceSwitcher,
+    })),
+  { ssr: false },
+);
+const HealthStatus = dynamic(
+  () =>
+    import("@/components/HealthStatus").then((m) => ({
+      default: m.HealthStatus,
+    })),
+  { ssr: false },
+);
+const ChatHistorySidebar = dynamic(
+  () =>
+    import("@/components/ChatHistorySidebar").then((m) => ({
+      default: m.ChatHistorySidebar,
+    })),
+  { ssr: false },
+);
+
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+// Main App Content (with auth)
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+function MainContent() {
+  const { isLoading, isAdminSetup, isAuthenticated, user } = useAuth();
+  const [memorySpaceId, setMemorySpaceId] = useState("quickstart-demo");
+  const [currentConversationId, setCurrentConversationId] = useState<string | null>(null);
+  const {
+    layers,
+    isOrchestrating,
+    startOrchestration,
+    updateLayer,
+    resetLayers,
+  } = useLayerTracking();
+
+  // Handle new chat
+  const handleNewChat = useCallback(() => {
+    setCurrentConversationId(null);
+    resetLayers();
+  }, [resetLayers]);
+
+  // Handle conversation selection
+  const handleSelectConversation = useCallback((conversationId: string) => {
+    setCurrentConversationId(conversationId);
+    resetLayers();
+  }, [resetLayers]);
+
+  // Handle conversation update (e.g., title change after first message)
+  const handleConversationUpdate = useCallback((conversationId: string) => {
+    // Update current conversation ID if it was null (new chat created)
+    if (!currentConversationId) {
+      setCurrentConversationId(conversationId);
+    }
+  }, [currentConversationId]);
+
+  // Loading state
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-center">
+          <div className="w-16 h-16 mx-auto mb-4 rounded-2xl bg-gradient-to-br from-cortex-500 to-cortex-700 flex items-center justify-center animate-pulse">
+            <span className="text-3xl">🧠</span>
+          </div>
+          <p className="text-gray-400">Loading Cortex...</p>
+        </div>
+      </div>
+    );
+  }
+
+  // First-run: Admin setup
+  if (isAdminSetup === false) {
+    return <AdminSetup />;
+  }
+
+  // Not authenticated: Login/Register
+  if (!isAuthenticated) {
+    return <LoginScreen />;
+  }
+
+  // Get userId from authenticated user
+  const userId = user?.id || "demo-user";
+
+  // Main authenticated interface
+  return (
+    <main className="min-h-screen flex flex-col">
+      {/* Header */}
+      <header className="border-b border-white/10 px-6 py-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-cortex-500 to-cortex-700 flex items-center justify-center">
+              <span className="text-xl">🧠</span>
+            </div>
+            <div>
+              <h1 className="text-xl font-bold">Cortex Memory Quickstart</h1>
+              <p className="text-sm text-gray-400">
+                Real-time memory orchestration demo
+              </p>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-4">
+            <HealthStatus />
+            <MemorySpaceSwitcher
+              value={memorySpaceId}
+              onChange={setMemorySpaceId}
+            />
+          </div>
+        </div>
+      </header>
+
+      {/* Main Content - Three Column Layout */}
+      <div className="flex-1 flex overflow-hidden">
+        {/* Left: Chat History Sidebar */}
+        <ChatHistorySidebar
+          memorySpaceId={memorySpaceId}
+          currentConversationId={currentConversationId}
+          onSelectConversation={handleSelectConversation}
+          onNewChat={handleNewChat}
+        />
+
+        {/* Center: Chat Section */}
+        <div className="flex-1 flex flex-col border-r border-white/10">
+          <ChatInterface
+            memorySpaceId={memorySpaceId}
+            userId={userId}
+            conversationId={currentConversationId}
+            onOrchestrationStart={startOrchestration}
+            onLayerUpdate={updateLayer}
+            onReset={resetLayers}
+            onConversationUpdate={handleConversationUpdate}
+          />
+        </div>
+
+        {/* Right: Layer Flow Visualization */}
+        <div className="w-[480px] flex flex-col bg-black/20">
+          <div className="p-4 border-b border-white/10">
+            <h2 className="font-semibold flex items-center gap-2">
+              <span className="text-lg">📊</span>
+              Memory Orchestration Flow
+            </h2>
+            <p className="text-sm text-gray-400 mt-1">
+              Watch data flow through Cortex layers in real-time
+            </p>
+          </div>
+
+          <div className="flex-1 overflow-y-auto p-4">
+            <LayerFlowDiagram
+              layers={layers}
+              isOrchestrating={isOrchestrating}
+              memorySpaceId={memorySpaceId}
+              userId={userId}
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Footer */}
+      <footer className="border-t border-white/10 px-6 py-3">
+        <div className="flex items-center justify-between text-sm text-gray-500">
+          <div className="flex items-center gap-4">
+            <span>Cortex SDK v0.24.0</span>
+            <span>•</span>
+            <span>Vercel AI SDK v5</span>
+          </div>
+          <a
+            href="https://cortexmemory.dev/docs"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="hover:text-white transition-colors"
+          >
+            Documentation →
+          </a>
+        </div>
+      </footer>
+    </main>
+  );
+}
+
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+// Page Component (wraps with AuthProvider)
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+export default function Home() {
+  return (
+    <AuthProvider>
+      <MainContent />
+    </AuthProvider>
+  );
+}