@cortexmemory/cli 0.26.2 → 0.27.3

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

@@ -0,0 +1,323 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { useAuth } from "./AuthProvider";
+
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+// Types
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+interface Conversation {
+  id: string;
+  title: string;
+  createdAt: number;
+  updatedAt: number;
+  messageCount: number;
+}
+
+interface ChatHistorySidebarProps {
+  memorySpaceId: string;
+  currentConversationId: string | null;
+  onSelectConversation: (conversationId: string) => void;
+  onNewChat: () => void;
+}
+
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+// Helpers
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+function groupByDate(conversations: Conversation[]): Record<string, Conversation[]> {
+  const now = new Date();
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
+  const yesterday = today - 86400000;
+  const weekAgo = today - 7 * 86400000;
+
+  const groups: Record<string, Conversation[]> = {
+    Today: [],
+    Yesterday: [],
+    "Last 7 Days": [],
+    Older: [],
+  };
+
+  for (const conv of conversations) {
+    const convDate = new Date(conv.updatedAt);
+    const convDay = new Date(
+      convDate.getFullYear(),
+      convDate.getMonth(),
+      convDate.getDate()
+    ).getTime();
+
+    if (convDay >= today) {
+      groups.Today.push(conv);
+    } else if (convDay >= yesterday) {
+      groups.Yesterday.push(conv);
+    } else if (convDay >= weekAgo) {
+      groups["Last 7 Days"].push(conv);
+    } else {
+      groups.Older.push(conv);
+    }
+  }
+
+  return groups;
+}
+
+function formatTime(timestamp: number): string {
+  return new Date(timestamp).toLocaleTimeString("en-US", {
+    hour: "numeric",
+    minute: "2-digit",
+  });
+}
+
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+// Component
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+export function ChatHistorySidebar({
+  memorySpaceId,
+  currentConversationId,
+  onSelectConversation,
+  onNewChat,
+}: ChatHistorySidebarProps) {
+  const { user, logout } = useAuth();
+  const [conversations, setConversations] = useState<Conversation[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [deletingId, setDeletingId] = useState<string | null>(null);
+
+  // Fetch conversations
+  const fetchConversations = useCallback(async () => {
+    if (!user) return;
+
+    try {
+      const response = await fetch(
+        `/api/conversations?userId=${encodeURIComponent(user.id)}&memorySpaceId=${encodeURIComponent(memorySpaceId)}`
+      );
+      const data = await response.json();
+      if (data.conversations) {
+        setConversations(data.conversations);
+      }
+    } catch (error) {
+      console.error("Failed to fetch conversations:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [user, memorySpaceId]);
+
+  // Fetch on mount and when dependencies change
+  useEffect(() => {
+    fetchConversations();
+  }, [fetchConversations]);
+
+  // Refresh conversations periodically (every 10 seconds)
+  useEffect(() => {
+    const interval = setInterval(fetchConversations, 10000);
+    return () => clearInterval(interval);
+  }, [fetchConversations]);
+
+  // Delete conversation
+  const handleDelete = async (e: React.MouseEvent, conversationId: string) => {
+    e.stopPropagation();
+    if (deletingId) return;
+
+    setDeletingId(conversationId);
+
+    try {
+      const response = await fetch(`/api/conversations?conversationId=${encodeURIComponent(conversationId)}`, {
+        method: "DELETE",
+      });
+
+      if (!response.ok) {
+        const data = await response.json().catch(() => ({}));
+        throw new Error(data.error || `Delete failed with status ${response.status}`);
+      }
+
+      // Remove from local state only after successful deletion
+      setConversations((prev) => prev.filter((c) => c.id !== conversationId));
+
+      // If deleted conversation was selected, trigger new chat
+      if (conversationId === currentConversationId) {
+        onNewChat();
+      }
+    } catch (error) {
+      console.error("Failed to delete conversation:", error);
+    } finally {
+      setDeletingId(null);
+    }
+  };
+
+  const groupedConversations = groupByDate(conversations);
+  const groups = ["Today", "Yesterday", "Last 7 Days", "Older"];
+
+  return (
+    <div className="w-64 h-full flex flex-col bg-black/40 border-r border-white/10">
+      {/* Header */}
+      <div className="p-4 border-b border-white/10">
+        <div className="flex items-center gap-2 mb-4">
+          <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-cortex-500 to-cortex-700 flex items-center justify-center">
+            <span className="text-sm">🧠</span>
+          </div>
+          <span className="font-semibold text-sm">Cortex Demo</span>
+        </div>
+
+        <button
+          onClick={onNewChat}
+          className="w-full py-2.5 px-4 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl text-sm font-medium transition-colors flex items-center gap-2"
+        >
+          <svg
+            className="w-4 h-4"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M12 4v16m8-8H4"
+            />
+          </svg>
+          New Chat
+        </button>
+      </div>
+
+      {/* Conversation List */}
+      <div className="flex-1 overflow-y-auto p-2">
+        {isLoading ? (
+          <div className="flex items-center justify-center py-8">
+            <svg
+              className="animate-spin h-5 w-5 text-gray-400"
+              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>
+          </div>
+        ) : conversations.length === 0 ? (
+          <div className="text-center py-8 text-gray-500 text-sm">
+            <p>No conversations yet</p>
+            <p className="mt-1 text-xs">Start a new chat to begin</p>
+          </div>
+        ) : (
+          <div className="space-y-4">
+            {groups.map((group) => {
+              const groupConvos = groupedConversations[group];
+              if (groupConvos.length === 0) return null;
+
+              return (
+                <div key={group}>
+                  <div className="px-2 py-1 text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    {group}
+                  </div>
+                  <div className="space-y-1">
+                    {groupConvos.map((conv) => (
+                      <div
+                        key={conv.id}
+                        onClick={() => onSelectConversation(conv.id)}
+                        className={`group relative px-3 py-2.5 rounded-xl cursor-pointer transition-colors ${
+                          conv.id === currentConversationId
+                            ? "bg-cortex-600/20 text-white"
+                            : "hover:bg-white/5 text-gray-300"
+                        }`}
+                      >
+                        <div className="pr-6">
+                          <div className="text-sm font-medium truncate">
+                            {conv.title}
+                          </div>
+                          <div className="text-xs text-gray-500 mt-0.5">
+                            {formatTime(conv.updatedAt)}
+                            {conv.messageCount > 0 && (
+                              <span className="ml-2">
+                                {conv.messageCount} message
+                                {conv.messageCount !== 1 ? "s" : ""}
+                              </span>
+                            )}
+                          </div>
+                        </div>
+
+                        {/* Delete button */}
+                        <button
+                          onClick={(e) => handleDelete(e, conv.id)}
+                          disabled={deletingId === conv.id}
+                          className="absolute right-2 top-1/2 -translate-y-1/2 p-1 opacity-0 group-hover:opacity-100 hover:bg-white/10 rounded transition-all"
+                          title="Delete conversation"
+                        >
+                          {deletingId === conv.id ? (
+                            <svg
+                              className="w-4 h-4 animate-spin text-gray-400"
+                              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>
+                          ) : (
+                            <svg
+                              className="w-4 h-4 text-gray-400 hover:text-red-400"
+                              fill="none"
+                              viewBox="0 0 24 24"
+                              stroke="currentColor"
+                            >
+                              <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                              />
+                            </svg>
+                          )}
+                        </button>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* User Section */}
+      <div className="p-4 border-t border-white/10">
+        <div className="flex items-center gap-3">
+          <div className="w-9 h-9 rounded-full bg-gradient-to-br from-cortex-500 to-cortex-700 flex items-center justify-center text-sm font-medium">
+            {user?.displayName?.charAt(0).toUpperCase() || "U"}
+          </div>
+          <div className="flex-1 min-w-0">
+            <div className="text-sm font-medium truncate">
+              {user?.displayName || user?.id}
+            </div>
+            <button
+              onClick={logout}
+              className="text-xs text-gray-500 hover:text-white transition-colors"
+            >
+              Sign out
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,334 @@
+"use client";
+
+import { useChat } from "@ai-sdk/react";
+import { DefaultChatTransport } from "ai";
+import { useState, useRef, useEffect, useMemo, useCallback } from "react";
+import type {
+  LayerStatus,
+  MemoryLayer,
+  LayerState,
+  RevisionAction,
+} from "@/lib/layer-tracking";
+
+// Type for layer update data parts from the stream
+interface LayerUpdateData {
+  layer: MemoryLayer;
+  status: LayerStatus;
+  timestamp: number;
+  latencyMs?: number;
+  data?: LayerState["data"];
+  error?: { message: string; code?: string };
+  revisionAction?: RevisionAction;
+  supersededFacts?: string[];
+}
+
+interface ChatInterfaceProps {
+  memorySpaceId: string;
+  userId: string;
+  conversationId: string | null;
+  onOrchestrationStart?: () => void;
+  onLayerUpdate?: (
+    layer: MemoryLayer,
+    status: LayerStatus,
+    data?: LayerState["data"],
+    revisionInfo?: {
+      action?: RevisionAction;
+      supersededFacts?: string[];
+    },
+  ) => 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("");
+  const [suggestedMessages] = useState([
+    "Hi! My name is Alex and I work at Acme Corp as a senior engineer.",
+    "My favorite color is blue and I love hiking on weekends.",
+    "I'm learning Spanish and prefer dark mode interfaces.",
+    "What do you remember about me?",
+  ]);
+
+  // 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",
+        // Use a function to get body so it reads latest conversationId from ref
+        body: () => ({
+          memorySpaceId,
+          userId,
+          conversationId: conversationIdRef.current,
+        }),
+      }),
+    [memorySpaceId, userId], // Note: conversationId removed - ref handles updates
+  );
+
+  // Handle layer data parts from the stream
+  const handleDataPart = useCallback(
+    (dataPart: unknown) => {
+      const part = dataPart as { type: string; data?: unknown };
+      if (part.type === "data-orchestration-start") {
+        onOrchestrationStart?.();
+      }
+
+      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,
+        });
+      }
+
+      // 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, onConversationUpdate],
+  );
+
+  const { messages, sendMessage, status, setMessages } = useChat({
+    transport,
+    onData: handleDataPart,
+    onError: (error) => {
+      console.error("Chat error:", error);
+    },
+  });
+
+  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";
+
+  // Auto-scroll to latest message
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+
+  // Handle form submission
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!input.trim() || isStreaming) return;
+
+    const message = input.trim();
+    setInput("");
+
+    try {
+      await sendMessage({ text: message });
+    } catch (error) {
+      console.error("Failed to send message:", error);
+    }
+  };
+
+  const handleSuggestedMessage = (message: string) => {
+    setInput(message);
+  };
+
+  // Extract text content from message parts (AI SDK v5 format)
+  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) => part.type === "text")
+        .map((part) => part.text)
+        .join("");
+    }
+    return "";
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Messages */}
+      <div className="flex-1 overflow-y-auto p-4 space-y-4">
+        {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">
+              {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
+              layers in real-time. Try telling me about yourself!
+            </p>
+
+            {/* Suggested messages */}
+            <div className="flex flex-wrap justify-center gap-2 max-w-lg mx-auto">
+              {suggestedMessages.map((msg, i) => (
+                <button
+                  key={i}
+                  onClick={() => handleSuggestedMessage(msg)}
+                  className="px-3 py-2 text-sm bg-white/5 hover:bg-white/10 rounded-lg border border-white/10 transition-colors text-left"
+                >
+                  {msg.length > 40 ? msg.slice(0, 40) + "..." : msg}
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {messages.map((message, i) => (
+          <div
+            key={message.id || i}
+            className={`message-animate flex ${
+              message.role === "user" ? "justify-end" : "justify-start"
+            }`}
+          >
+            <div
+              className={`max-w-[80%] px-4 py-3 rounded-2xl ${
+                message.role === "user"
+                  ? "bg-cortex-600 text-white"
+                  : "bg-white/10 text-white"
+              }`}
+            >
+              <p className="whitespace-pre-wrap">
+                {getMessageContent(message)}
+              </p>
+            </div>
+          </div>
+        ))}
+
+        {/* Typing indicator - only show during active streaming */}
+        {isStreaming && (
+          <div className="flex justify-start">
+            <div className="bg-white/10 px-4 py-3 rounded-2xl">
+              <div className="flex gap-1">
+                <span className="w-2 h-2 bg-white/50 rounded-full animate-bounce" />
+                <span className="w-2 h-2 bg-white/50 rounded-full animate-bounce [animation-delay:0.1s]" />
+                <span className="w-2 h-2 bg-white/50 rounded-full animate-bounce [animation-delay:0.2s]" />
+              </div>
+            </div>
+          </div>
+        )}
+
+        <div ref={messagesEndRef} />
+      </div>
+
+      {/* Input - only disabled during active streaming, NOT during background orchestration */}
+      <div className="border-t border-white/10 p-4">
+        <form onSubmit={handleSubmit} className="flex gap-2">
+          <input
+            type="text"
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            placeholder="Tell me about yourself..."
+            className="flex-1 px-4 py-3 bg-white/5 border border-white/10 rounded-xl focus:outline-none focus:border-cortex-500 transition-colors"
+            disabled={isStreaming}
+          />
+          <button
+            type="submit"
+            disabled={isStreaming || !input.trim()}
+            className="px-6 py-3 bg-cortex-600 hover:bg-cortex-700 disabled:opacity-50 disabled:cursor-not-allowed rounded-xl font-medium transition-colors"
+          >
+            Send
+          </button>
+        </form>
+
+        {messages.length > 0 && (
+          <button
+            onClick={onReset}
+            className="mt-2 text-sm text-gray-500 hover:text-white transition-colors"
+          >
+            Clear visualization →
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,21 @@
+"use client";
+
+import { ConvexProvider, ConvexReactClient } from "convex/react";
+import { ReactNode, useMemo } from "react";
+
+export function ConvexClientProvider({ children }: { children: ReactNode }) {
+  const convex = useMemo(() => {
+    if (!process.env.NEXT_PUBLIC_CONVEX_URL) {
+      console.warn("NEXT_PUBLIC_CONVEX_URL not set");
+      return null;
+    }
+    return new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL);
+  }, []);
+
+  if (!convex) {
+    // Render without Convex for development without backend
+    return <>{children}</>;
+  }
+
+  return <ConvexProvider client={convex}>{children}</ConvexProvider>;
+}