@cortexmemory/cli 0.27.1 → 0.27.3

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

@@ -112,3 +112,164 @@
   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/page.tsx

@@ -1,8 +1,11 @@
 "use client";
 
 import dynamic from "next/dynamic";
-import { useState } from "react";
+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(
@@ -33,10 +36,22 @@ const HealthStatus = dynamic(
     })),
   { ssr: false },
 );
+const ChatHistorySidebar = dynamic(
+  () =>
+    import("@/components/ChatHistorySidebar").then((m) => ({
+      default: m.ChatHistorySidebar,
+    })),
+  { ssr: false },
+);
 
-export default function Home() {
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+// Main App Content (with auth)
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+function MainContent() {
+  const { isLoading, isAdminSetup, isAuthenticated, user } = useAuth();
   const [memorySpaceId, setMemorySpaceId] = useState("quickstart-demo");
-  const [userId] = useState("demo-user");
+  const [currentConversationId, setCurrentConversationId] = useState<string | null>(null);
   const {
     layers,
     isOrchestrating,
@@ -45,11 +60,59 @@ export default function Home() {
     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="max-w-7xl mx-auto flex items-center justify-between">
+        <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>
@@ -72,20 +135,30 @@ export default function Home() {
         </div>
       </header>
 
-      {/* Main Content */}
+      {/* Main Content - Three Column Layout */}
       <div className="flex-1 flex overflow-hidden">
-        {/* Chat Section */}
+        {/* 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>
 
-        {/* Layer Flow Visualization */}
+        {/* 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">
@@ -110,7 +183,7 @@ export default function Home() {
 
       {/* Footer */}
       <footer className="border-t border-white/10 px-6 py-3">
-        <div className="max-w-7xl mx-auto flex items-center justify-between text-sm text-gray-500">
+        <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>
@@ -129,3 +202,15 @@ export default function Home() {
     </main>
   );
 }
+
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+// Page Component (wraps with AuthProvider)
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+export default function Home() {
+  return (
+    <AuthProvider>
+      <MainContent />
+    </AuthProvider>
+  );
+}

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

@@ -0,0 +1,139 @@
+"use client";
+
+import { useState } from "react";
+import { useAuth } from "./AuthProvider";
+
+export function AdminSetup() {
+  const { setupAdmin, error, clearError } = useAuth();
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = 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 (password.length < 4) {
+      setLocalError("Password must be at least 4 characters");
+      return;
+    }
+
+    if (password !== confirmPassword) {
+      setLocalError("Passwords do not match");
+      return;
+    }
+
+    setIsLoading(true);
+    await setupAdmin(password);
+    setIsLoading(false);
+  };
+
+  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">Welcome to Cortex</h1>
+          <p className="text-gray-400">Set up your admin password to get started</p>
+        </div>
+
+        {/* Setup Form */}
+        <div className="glass rounded-2xl p-8">
+          <form onSubmit={handleSubmit} className="space-y-6">
+            <div>
+              <label
+                htmlFor="password"
+                className="block text-sm font-medium text-gray-300 mb-2"
+              >
+                Admin Password
+              </label>
+              <input
+                id="password"
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                placeholder="Enter a secure 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}
+                autoFocus
+              />
+            </div>
+
+            <div>
+              <label
+                htmlFor="confirmPassword"
+                className="block text-sm font-medium text-gray-300 mb-2"
+              >
+                Confirm Password
+              </label>
+              <input
+                id="confirmPassword"
+                type="password"
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                placeholder="Confirm 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}
+              />
+            </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 || !password || !confirmPassword}
+              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>
+                  Setting up...
+                </>
+              ) : (
+                "Set Admin Password"
+              )}
+            </button>
+          </form>
+
+          <div className="mt-6 pt-6 border-t border-white/10">
+            <p className="text-xs text-gray-500 text-center">
+              This password will be used to manage the quickstart demo.
+              <br />
+              You can create additional user accounts after setup.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}