@cortexmemory/cli 0.27.1 → 0.27.3

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

@@ -25,6 +25,7 @@ interface LayerUpdateData {
 interface ChatInterfaceProps {
   memorySpaceId: string;
   userId: string;
+  conversationId: string | null;
   onOrchestrationStart?: () => void;
   onLayerUpdate?: (
     layer: MemoryLayer,
@@ -36,14 +37,17 @@ interface ChatInterfaceProps {
     },
   ) => void;
   onReset?: () => void;
+  onConversationUpdate?: (conversationId: string, title: string) => void;
 }
 
 export function ChatInterface({
   memorySpaceId,
   userId,
+  conversationId,
   onOrchestrationStart,
   onLayerUpdate,
   onReset,
+  onConversationUpdate,
 }: ChatInterfaceProps) {
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const [input, setInput] = useState("");
@@ -54,38 +58,56 @@ export function ChatInterface({
     "What do you remember about me?",
   ]);
 
-  // Create transport with body parameters - memoized to prevent recreation
+  // Track conversation ID in a ref for immediate access in callbacks
+  // This ensures the latest conversationId is always used when sending messages,
+  // even before React re-renders and recreates the transport
+  const conversationIdRef = useRef<string | null>(conversationId);
+  useEffect(() => {
+    conversationIdRef.current = conversationId;
+  }, [conversationId]);
+
+  // Create transport with a function that reads from ref for conversationId
+  // This ensures we always send the latest conversationId
   const transport = useMemo(
     () =>
       new DefaultChatTransport({
         api: "/api/chat",
-        body: { memorySpaceId, userId },
+        // Use a function to get body so it reads latest conversationId from ref
+        body: () => ({
+          memorySpaceId,
+          userId,
+          conversationId: conversationIdRef.current,
+        }),
       }),
-    [memorySpaceId, userId],
+    [memorySpaceId, userId], // Note: conversationId removed - ref handles updates
   );
 
   // Handle layer data parts from the stream
   const handleDataPart = useCallback(
-    (dataPart: any) => {
-      if (dataPart.type === "data-orchestration-start") {
+    (dataPart: unknown) => {
+      const part = dataPart as { type: string; data?: unknown };
+      if (part.type === "data-orchestration-start") {
         onOrchestrationStart?.();
       }
 
-      if (dataPart.type === "data-layer-update") {
-        const event = dataPart.data as LayerUpdateData;
+      if (part.type === "data-layer-update") {
+        const event = part.data as LayerUpdateData;
         onLayerUpdate?.(event.layer, event.status, event.data, {
           action: event.revisionAction,
           supersededFacts: event.supersededFacts,
         });
       }
 
-      // orchestration-complete is informational - layer diagram already updated
-      // via individual layer events
+      // Handle conversation title update
+      if (part.type === "data-conversation-update") {
+        const update = part.data as { conversationId: string; title: string };
+        onConversationUpdate?.(update.conversationId, update.title);
+      }
     },
-    [onOrchestrationStart, onLayerUpdate],
+    [onOrchestrationStart, onLayerUpdate, onConversationUpdate],
   );
 
-  const { messages, sendMessage, status } = useChat({
+  const { messages, sendMessage, status, setMessages } = useChat({
     transport,
     onData: handleDataPart,
     onError: (error) => {
@@ -93,6 +115,53 @@ export function ChatInterface({
     },
   });
 
+  const [isLoadingHistory, setIsLoadingHistory] = useState(false);
+
+  // Load messages when conversation changes
+  useEffect(() => {
+    // Clear messages first
+    setMessages([]);
+
+    // If no conversation selected, nothing more to do
+    if (!conversationId) {
+      return;
+    }
+
+    // Fetch conversation history
+    const loadConversationHistory = async () => {
+      setIsLoadingHistory(true);
+      try {
+        const response = await fetch(
+          `/api/conversations?conversationId=${encodeURIComponent(conversationId)}`
+        );
+
+        if (!response.ok) {
+          console.error("Failed to load conversation history");
+          return;
+        }
+
+        const data = await response.json();
+
+        if (data.messages && data.messages.length > 0) {
+          // Transform to the format expected by useChat
+          const loadedMessages = data.messages.map((msg: { id: string; role: string; content: string; createdAt: string }) => ({
+            id: msg.id,
+            role: msg.role,
+            content: msg.content,
+            createdAt: new Date(msg.createdAt),
+          }));
+          setMessages(loadedMessages);
+        }
+      } catch (error) {
+        console.error("Error loading conversation history:", error);
+      } finally {
+        setIsLoadingHistory(false);
+      }
+    };
+
+    loadConversationHistory();
+  }, [conversationId, setMessages]);
+
   // Determine if we're actively streaming (only time to show typing indicator)
   const isStreaming = status === "streaming";
 
@@ -121,14 +190,14 @@ export function ChatInterface({
   };
 
   // Extract text content from message parts (AI SDK v5 format)
-  const getMessageContent = (message: any): string => {
+  const getMessageContent = (message: { content?: string; parts?: Array<{ type: string; text?: string }> }): string => {
     if (typeof message.content === "string") {
       return message.content;
     }
     if (message.parts) {
       return message.parts
-        .filter((part: any) => part.type === "text")
-        .map((part: any) => part.text)
+        .filter((part) => part.type === "text")
+        .map((part) => part.text)
         .join("");
     }
     return "";
@@ -138,13 +207,41 @@ export function ChatInterface({
     <div className="flex flex-col h-full">
       {/* Messages */}
       <div className="flex-1 overflow-y-auto p-4 space-y-4">
-        {messages.length === 0 && (
+        {isLoadingHistory && (
+          <div className="flex items-center justify-center py-12">
+            <div className="flex flex-col items-center gap-3">
+              <svg
+                className="animate-spin h-8 w-8 text-cortex-500"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+              >
+                <circle
+                  className="opacity-25"
+                  cx="12"
+                  cy="12"
+                  r="10"
+                  stroke="currentColor"
+                  strokeWidth="4"
+                />
+                <path
+                  className="opacity-75"
+                  fill="currentColor"
+                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+                />
+              </svg>
+              <span className="text-gray-400 text-sm">Loading conversation...</span>
+            </div>
+          </div>
+        )}
+
+        {!isLoadingHistory && messages.length === 0 && (
           <div className="text-center py-12">
             <div className="w-16 h-16 mx-auto mb-4 rounded-2xl bg-gradient-to-br from-cortex-500/20 to-cortex-700/20 flex items-center justify-center">
               <span className="text-3xl">🧠</span>
             </div>
             <h2 className="text-xl font-semibold mb-2">
-              Welcome to Cortex Memory Demo
+              {conversationId ? "Continue your conversation" : "Start a new conversation"}
             </h2>
             <p className="text-gray-400 max-w-md mx-auto mb-6">
               This demo shows how Cortex orchestrates memory across multiple

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

@@ -0,0 +1,202 @@
+"use client";
+
+import { useState } from "react";
+import { useAuth } from "./AuthProvider";
+
+type Tab = "login" | "register";
+
+export function LoginScreen() {
+  const { login, register, error, clearError } = useAuth();
+  const [activeTab, setActiveTab] = useState<Tab>("login");
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [displayName, setDisplayName] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [localError, setLocalError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLocalError(null);
+    clearError();
+
+    if (!username.trim()) {
+      setLocalError("Username is required");
+      return;
+    }
+
+    if (!password) {
+      setLocalError("Password is required");
+      return;
+    }
+
+    setIsLoading(true);
+
+    if (activeTab === "login") {
+      await login(username, password);
+    } else {
+      await register(username, password, displayName || undefined);
+    }
+
+    setIsLoading(false);
+  };
+
+  const handleTabChange = (tab: Tab) => {
+    setActiveTab(tab);
+    setLocalError(null);
+    clearError();
+  };
+
+  const displayError = localError || error;
+
+  return (
+    <div className="min-h-screen flex items-center justify-center p-4">
+      <div className="w-full max-w-md">
+        {/* Logo and Title */}
+        <div className="text-center mb-8">
+          <div className="w-20 h-20 mx-auto mb-6 rounded-2xl bg-gradient-to-br from-cortex-500 to-cortex-700 flex items-center justify-center shadow-lg shadow-cortex-500/20">
+            <span className="text-4xl">🧠</span>
+          </div>
+          <h1 className="text-3xl font-bold mb-2">Cortex Memory Demo</h1>
+          <p className="text-gray-400">Sign in to explore AI with long-term memory</p>
+        </div>
+
+        {/* Login/Register Card */}
+        <div className="glass rounded-2xl overflow-hidden">
+          {/* Tabs */}
+          <div className="flex border-b border-white/10">
+            <button
+              onClick={() => handleTabChange("login")}
+              className={`flex-1 py-4 text-sm font-medium transition-colors ${
+                activeTab === "login"
+                  ? "text-white border-b-2 border-cortex-500"
+                  : "text-gray-400 hover:text-white"
+              }`}
+            >
+              Sign In
+            </button>
+            <button
+              onClick={() => handleTabChange("register")}
+              className={`flex-1 py-4 text-sm font-medium transition-colors ${
+                activeTab === "register"
+                  ? "text-white border-b-2 border-cortex-500"
+                  : "text-gray-400 hover:text-white"
+              }`}
+            >
+              Create Account
+            </button>
+          </div>
+
+          {/* Form */}
+          <form onSubmit={handleSubmit} className="p-8 space-y-5">
+            <div>
+              <label
+                htmlFor="username"
+                className="block text-sm font-medium text-gray-300 mb-2"
+              >
+                Username
+              </label>
+              <input
+                id="username"
+                type="text"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                placeholder="Enter your username"
+                className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl focus:outline-none focus:border-cortex-500 transition-colors"
+                disabled={isLoading}
+                autoFocus
+                autoComplete="username"
+              />
+            </div>
+
+            {activeTab === "register" && (
+              <div>
+                <label
+                  htmlFor="displayName"
+                  className="block text-sm font-medium text-gray-300 mb-2"
+                >
+                  Display Name{" "}
+                  <span className="text-gray-500">(optional)</span>
+                </label>
+                <input
+                  id="displayName"
+                  type="text"
+                  value={displayName}
+                  onChange={(e) => setDisplayName(e.target.value)}
+                  placeholder="How should we call you?"
+                  className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl focus:outline-none focus:border-cortex-500 transition-colors"
+                  disabled={isLoading}
+                />
+              </div>
+            )}
+
+            <div>
+              <label
+                htmlFor="password"
+                className="block text-sm font-medium text-gray-300 mb-2"
+              >
+                Password
+              </label>
+              <input
+                id="password"
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                placeholder="Enter your password"
+                className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl focus:outline-none focus:border-cortex-500 transition-colors"
+                disabled={isLoading}
+                autoComplete={activeTab === "login" ? "current-password" : "new-password"}
+              />
+            </div>
+
+            {displayError && (
+              <div className="p-3 bg-red-500/10 border border-red-500/20 rounded-xl text-red-400 text-sm">
+                {displayError}
+              </div>
+            )}
+
+            <button
+              type="submit"
+              disabled={isLoading || !username || !password}
+              className="w-full py-3 bg-cortex-600 hover:bg-cortex-700 disabled:opacity-50 disabled:cursor-not-allowed rounded-xl font-medium transition-colors flex items-center justify-center gap-2"
+            >
+              {isLoading ? (
+                <>
+                  <svg
+                    className="animate-spin h-5 w-5"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                  >
+                    <circle
+                      className="opacity-25"
+                      cx="12"
+                      cy="12"
+                      r="10"
+                      stroke="currentColor"
+                      strokeWidth="4"
+                    />
+                    <path
+                      className="opacity-75"
+                      fill="currentColor"
+                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+                    />
+                  </svg>
+                  {activeTab === "login" ? "Signing in..." : "Creating account..."}
+                </>
+              ) : activeTab === "login" ? (
+                "Sign In"
+              ) : (
+                "Create Account"
+              )}
+            </button>
+          </form>
+        </div>
+
+        {/* Demo hint */}
+        <p className="mt-6 text-center text-sm text-gray-500">
+          Create an account to start chatting with memory-enabled AI
+        </p>
+      </div>
+    </div>
+  );
+}

package/templates/vercel-ai-quickstart/jest.config.js

@@ -0,0 +1,45 @@
+/**
+ * Jest Configuration for Vercel AI Quickstart
+ *
+ * Two test projects:
+ * - unit: Fast unit tests with mocked dependencies
+ * - integration: Integration tests for API routes with mocked SDK
+ */
+
+const baseConfig = {
+  preset: "ts-jest",
+  testEnvironment: "node",
+  moduleNameMapper: {
+    // Handle path aliases from tsconfig
+    "^@/(.*)$": "<rootDir>/$1",
+  },
+  transform: {
+    "^.+\\.tsx?$": [
+      "ts-jest",
+      {
+        tsconfig: "tsconfig.json",
+      },
+    ],
+  },
+  setupFilesAfterEnv: ["<rootDir>/tests/helpers/setup.ts"],
+  // Ignore Next.js build output
+  testPathIgnorePatterns: ["/node_modules/", "/.next/"],
+};
+
+module.exports = {
+  ...baseConfig,
+  projects: [
+    {
+      ...baseConfig,
+      displayName: "unit",
+      testMatch: ["<rootDir>/tests/unit/**/*.test.ts"],
+      testTimeout: 10000,
+    },
+    {
+      ...baseConfig,
+      displayName: "integration",
+      testMatch: ["<rootDir>/tests/integration/**/*.test.ts"],
+      testTimeout: 30000,
+    },
+  ],
+};

package/templates/vercel-ai-quickstart/lib/cortex.ts

@@ -0,0 +1,27 @@
+/**
+ * Cortex SDK Client
+ *
+ * Shared Cortex client instance for API routes.
+ */
+
+import { Cortex } from "@cortexmemory/sdk";
+
+let cortexClient: Cortex | null = null;
+
+/**
+ * Get or create a Cortex SDK client
+ */
+export function getCortex(): Cortex {
+  if (!cortexClient) {
+    const convexUrl = process.env.CONVEX_URL;
+    if (!convexUrl) {
+      throw new Error("CONVEX_URL environment variable is required");
+    }
+
+    cortexClient = new Cortex({
+      convexUrl,
+    });
+  }
+
+  return cortexClient;
+}

package/templates/vercel-ai-quickstart/lib/password.ts

@@ -0,0 +1,120 @@
+/**
+ * Password Hashing Utilities
+ *
+ * Uses Web Crypto API (PBKDF2) for password hashing.
+ * Works in Edge runtime - no external dependencies.
+ */
+
+const ITERATIONS = 100000;
+const KEY_LENGTH = 256;
+const SALT_LENGTH = 16;
+
+/**
+ * Hash a password using PBKDF2
+ *
+ * @param password - Plain text password to hash
+ * @returns Hashed password as base64 string (format: salt:hash)
+ */
+export async function hashPassword(password: string): Promise<string> {
+  const encoder = new TextEncoder();
+  const passwordBuffer = encoder.encode(password);
+
+  // Generate random salt
+  const salt = crypto.getRandomValues(new Uint8Array(SALT_LENGTH));
+
+  // Import password as key material
+  const keyMaterial = await crypto.subtle.importKey(
+    "raw",
+    passwordBuffer,
+    "PBKDF2",
+    false,
+    ["deriveBits"]
+  );
+
+  // Derive key using PBKDF2
+  const derivedBits = await crypto.subtle.deriveBits(
+    {
+      name: "PBKDF2",
+      salt,
+      iterations: ITERATIONS,
+      hash: "SHA-256",
+    },
+    keyMaterial,
+    KEY_LENGTH
+  );
+
+  // Convert to base64 strings
+  const saltB64 = btoa(String.fromCharCode(...salt));
+  const hashB64 = btoa(String.fromCharCode(...new Uint8Array(derivedBits)));
+
+  // Return combined format: salt:hash
+  return `${saltB64}:${hashB64}`;
+}
+
+/**
+ * Verify a password against a stored hash
+ *
+ * @param password - Plain text password to verify
+ * @param storedHash - Previously hashed password (format: salt:hash)
+ * @returns True if password matches
+ */
+export async function verifyPassword(
+  password: string,
+  storedHash: string
+): Promise<boolean> {
+  try {
+    const [saltB64, expectedHashB64] = storedHash.split(":");
+    if (!saltB64 || !expectedHashB64) {
+      return false;
+    }
+
+    const encoder = new TextEncoder();
+    const passwordBuffer = encoder.encode(password);
+
+    // Decode salt from base64
+    const saltStr = atob(saltB64);
+    const salt = new Uint8Array(saltStr.length);
+    for (let i = 0; i < saltStr.length; i++) {
+      salt[i] = saltStr.charCodeAt(i);
+    }
+
+    // Import password as key material
+    const keyMaterial = await crypto.subtle.importKey(
+      "raw",
+      passwordBuffer,
+      "PBKDF2",
+      false,
+      ["deriveBits"]
+    );
+
+    // Derive key using same parameters
+    const derivedBits = await crypto.subtle.deriveBits(
+      {
+        name: "PBKDF2",
+        salt,
+        iterations: ITERATIONS,
+        hash: "SHA-256",
+      },
+      keyMaterial,
+      KEY_LENGTH
+    );
+
+    // Compare hashes
+    const hashB64 = btoa(String.fromCharCode(...new Uint8Array(derivedBits)));
+    return hashB64 === expectedHashB64;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Generate a secure random session token
+ *
+ * @returns Random token as hex string
+ */
+export function generateSessionToken(): string {
+  const bytes = crypto.getRandomValues(new Uint8Array(32));
+  return Array.from(bytes)
+    .map((b) => b.toString(16).padStart(2, "0"))
+    .join("");
+}

package/templates/vercel-ai-quickstart/next.config.js

@@ -1,7 +1,27 @@
+const path = require("path");
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   transpilePackages: ["@cortexmemory/sdk", "@cortexmemory/vercel-ai-provider"],
   serverExternalPackages: ["convex"],
+  experimental: {
+    // Ensure linked packages resolve dependencies from this project's node_modules
+    externalDir: true,
+  },
+  // Empty turbopack config to silence the warning about missing turbopack config
+  turbopack: {},
+  // Webpack configuration for module resolution when SDK is file-linked
+  // This is needed because the SDK uses dynamic imports that don't resolve
+  // correctly from a linked package's location during local development
+  webpack: (config) => {
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      "@anthropic-ai/sdk": path.resolve(__dirname, "node_modules/@anthropic-ai/sdk"),
+      "openai": path.resolve(__dirname, "node_modules/openai"),
+      "neo4j-driver": path.resolve(__dirname, "node_modules/neo4j-driver"),
+    };
+    return config;
+  },
 };
 
 module.exports = nextConfig;

package/templates/vercel-ai-quickstart/package.json

@@ -5,10 +5,12 @@
   "license": "UNLICENSED",
   "description": "Cortex Memory + Vercel AI SDK Quickstart Demo",
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
+    "dev": "next dev --webpack",
+    "build": "next build --webpack",
     "start": "next start",
     "lint": "next lint",
+    "test": "jest",
+    "test:watch": "jest --watch",
     "convex:dev": "convex dev",
     "convex:deploy": "convex deploy"
   },
@@ -30,12 +32,15 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.18",
+    "@types/jest": "^29.5.14",
     "@types/node": "^25.0.3",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "autoprefixer": "^10.4.23",
+    "jest": "^29.7.0",
     "postcss": "^8.5.6",
     "tailwindcss": "^4.1.18",
+    "ts-jest": "^29.2.5",
     "typescript": "^5.9.3"
   }
 }