@cortexmemory/cli 0.26.2 → 0.27.3

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

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/components/MemorySpaceSwitcher.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+
+interface MemorySpaceSwitcherProps {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+const spaces = [
+  { id: "quickstart-demo", name: "Demo", icon: "🧪" },
+  { id: "personal", name: "Personal", icon: "👤" },
+  { id: "work", name: "Work", icon: "💼" },
+];
+
+export function MemorySpaceSwitcher({
+  value,
+  onChange,
+}: MemorySpaceSwitcherProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const currentSpace = spaces.find((s) => s.id === value) || spaces[0];
+
+  return (
+    <div className="relative">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center gap-2 px-3 py-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg transition-colors"
+      >
+        <span>{currentSpace.icon}</span>
+        <span className="text-sm font-medium">{currentSpace.name}</span>
+        <motion.span
+          className="text-gray-400 text-xs"
+          animate={{ rotate: isOpen ? 180 : 0 }}
+        >
+          ▼
+        </motion.span>
+      </button>
+
+      <AnimatePresence>
+        {isOpen && (
+          <>
+            {/* Backdrop */}
+            <div
+              className="fixed inset-0 z-10"
+              onClick={() => setIsOpen(false)}
+            />
+
+            {/* Dropdown */}
+            <motion.div
+              initial={{ opacity: 0, y: -10 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -10 }}
+              className="absolute right-0 top-full mt-2 w-56 bg-gray-900 border border-white/10 rounded-lg shadow-xl z-20 overflow-hidden"
+            >
+              <div className="p-2">
+                <div className="text-xs text-gray-500 px-2 py-1 mb-1">
+                  Memory Space
+                </div>
+
+                {spaces.map((space) => (
+                  <button
+                    key={space.id}
+                    onClick={() => {
+                      onChange(space.id);
+                      setIsOpen(false);
+                    }}
+                    className={`w-full flex items-center gap-2 px-3 py-2 rounded-lg text-left transition-colors ${
+                      value === space.id
+                        ? "bg-cortex-600/20 text-cortex-400"
+                        : "hover:bg-white/5"
+                    }`}
+                  >
+                    <span>{space.icon}</span>
+                    <span className="flex-1 font-medium">{space.name}</span>
+                    <code className="text-xs text-gray-500">{space.id}</code>
+                  </button>
+                ))}
+              </div>
+
+              <div className="border-t border-white/10 p-3 bg-white/5">
+                <p className="text-xs text-gray-400">
+                  Switch memory spaces to demonstrate multi-tenant isolation.
+                  Memories in one space don't appear in others.
+                </p>
+              </div>
+            </motion.div>
+          </>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

package/templates/vercel-ai-quickstart/convex/conversations.ts

@@ -0,0 +1,67 @@
+/**
+ * Convex queries for real-time conversation updates
+ *
+ * These queries enable the LayerFlowDiagram to show live updates
+ * as data flows through the Cortex memory system.
+ */
+
+import { query } from "./_generated/server";
+import { v } from "convex/values";
+
+/**
+ * Get recent conversations for a memory space
+ *
+ * Used by the demo to watch for new conversations being created.
+ */
+export const getRecent = query({
+  args: {
+    memorySpaceId: v.string(),
+    limit: v.optional(v.number()),
+  },
+  handler: async (ctx, args) => {
+    const limit = args.limit ?? 10;
+
+    // Query conversations table (from Cortex SDK schema)
+    const conversations = await ctx.db
+      .query("conversations")
+      .filter((q) => q.eq(q.field("memorySpaceId"), args.memorySpaceId))
+      .order("desc")
+      .take(limit);
+
+    return conversations;
+  },
+});
+
+/**
+ * Get a specific conversation by ID
+ */
+export const get = query({
+  args: {
+    conversationId: v.string(),
+  },
+  handler: async (ctx, args) => {
+    const conversation = await ctx.db
+      .query("conversations")
+      .filter((q) => q.eq(q.field("conversationId"), args.conversationId))
+      .first();
+
+    return conversation;
+  },
+});
+
+/**
+ * Get conversation count for a memory space
+ */
+export const count = query({
+  args: {
+    memorySpaceId: v.string(),
+  },
+  handler: async (ctx, args) => {
+    const conversations = await ctx.db
+      .query("conversations")
+      .filter((q) => q.eq(q.field("memorySpaceId"), args.memorySpaceId))
+      .collect();
+
+    return conversations.length;
+  },
+});

package/templates/vercel-ai-quickstart/convex/facts.ts

@@ -0,0 +1,131 @@
+/**
+ * Convex queries for real-time fact updates
+ *
+ * These queries enable the LayerFlowDiagram to show live updates
+ * as facts are extracted from conversations.
+ */
+
+import { query } from "./_generated/server";
+import { v } from "convex/values";
+
+/**
+ * Get recent facts for a memory space
+ *
+ * Used by the demo to watch for new facts being extracted.
+ */
+export const getRecent = query({
+  args: {
+    memorySpaceId: v.string(),
+    limit: v.optional(v.number()),
+  },
+  handler: async (ctx, args) => {
+    const limit = args.limit ?? 20;
+
+    // Query facts table (from Cortex SDK schema)
+    const facts = await ctx.db
+      .query("facts")
+      .filter((q) => q.eq(q.field("memorySpaceId"), args.memorySpaceId))
+      .order("desc")
+      .take(limit);
+
+    return facts;
+  },
+});
+
+/**
+ * Get facts for a specific user
+ */
+export const getByUser = query({
+  args: {
+    memorySpaceId: v.string(),
+    userId: v.string(),
+    limit: v.optional(v.number()),
+  },
+  handler: async (ctx, args) => {
+    const limit = args.limit ?? 50;
+
+    const facts = await ctx.db
+      .query("facts")
+      .filter((q) =>
+        q.and(
+          q.eq(q.field("memorySpaceId"), args.memorySpaceId),
+          q.eq(q.field("userId"), args.userId),
+        ),
+      )
+      .order("desc")
+      .take(limit);
+
+    return facts;
+  },
+});
+
+/**
+ * Get facts by type
+ */
+export const getByType = query({
+  args: {
+    memorySpaceId: v.string(),
+    factType: v.string(),
+    limit: v.optional(v.number()),
+  },
+  handler: async (ctx, args) => {
+    const limit = args.limit ?? 20;
+
+    const facts = await ctx.db
+      .query("facts")
+      .filter((q) =>
+        q.and(
+          q.eq(q.field("memorySpaceId"), args.memorySpaceId),
+          q.eq(q.field("factType"), args.factType),
+        ),
+      )
+      .order("desc")
+      .take(limit);
+
+    return facts;
+  },
+});
+
+/**
+ * Get fact count for a memory space
+ */
+export const count = query({
+  args: {
+    memorySpaceId: v.string(),
+  },
+  handler: async (ctx, args) => {
+    const facts = await ctx.db
+      .query("facts")
+      .filter((q) => q.eq(q.field("memorySpaceId"), args.memorySpaceId))
+      .collect();
+
+    return facts.length;
+  },
+});
+
+/**
+ * Get fact type summary for a user
+ */
+export const typeSummary = query({
+  args: {
+    memorySpaceId: v.string(),
+    userId: v.optional(v.string()),
+  },
+  handler: async (ctx, args) => {
+    let factsQuery = ctx.db
+      .query("facts")
+      .filter((q) => q.eq(q.field("memorySpaceId"), args.memorySpaceId));
+
+    const facts = await factsQuery.collect();
+
+    // Group by type
+    const summary: Record<string, number> = {};
+    for (const fact of facts) {
+      if (args.userId && fact.userId !== args.userId) continue;
+      const type = fact.factType || "unknown";
+      summary[type] = (summary[type] || 0) + 1;
+    }
+
+    return summary;
+  },
+});