total-recall-brain 3.13.0 → 3.13.2

package/frontend/src/pages/LoginPage.tsx

@@ -1,5 +1,6 @@
 import { useState, useRef, useEffect } from "react"
 import { login, changePassword, getAuthStatus, setupPassword } from "../api"
+import BrandMark from "../components/brand/BrandMark"
 
 interface Props {
   onAuthenticated: () => void
@@ -73,7 +74,7 @@ export default function LoginPage({ onAuthenticated }: Props) {
         if (res.ok) {
           if (res.requiresPasswordReset) {
             setNeedsReset(true)
-            setPassword("") // Clear for security
+            setPassword("")
           } else {
             onAuthenticated()
           }
@@ -88,63 +89,66 @@ export default function LoginPage({ onAuthenticated }: Props) {
     }
   }
 
+  const disabled = loading || ((isFirstTime || needsReset) ? !newPassword : !password)
+
   return (
-    <div style={{
-      minHeight: '100vh',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      background: 'var(--bg-primary)',
-    }}>
-      <div style={{
-        width: 360,
-        background: 'var(--bg-secondary)',
-        border: '1px solid var(--border)',
-        borderRadius: 16,
-        padding: '40px 36px',
-        boxShadow: '0 8px 40px rgba(0,0,0,0.4)',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 24,
-      }}>
-        {/* Brand */}
-        <div style={{ textAlign: "center" }}>
-          <div style={{
-            width: 48,
-            height: 48,
-            borderRadius: 12,
-            background: (needsReset || isFirstTime) ? "linear-gradient(135deg, #f59e0b, #d97706)" : "linear-gradient(135deg, var(--accent), #7c3aed)",
-            margin: "0 auto 16px",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-          }}>
-            {(needsReset || isFirstTime) ? (
-              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <div className="login-shell">
+      <div className="login-card">
+        <div style={{ textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 16 }}>
+          {(needsReset || isFirstTime) ? (
+            <div
+              style={{
+                width: 56,
+                height: 56,
+                borderRadius: 16,
+                background: "linear-gradient(135deg, #f59e0b, #d97706)",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                boxShadow: "0 12px 32px rgba(245, 158, 11, 0.35)",
+              }}
+            >
+              <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                 <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
                 <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
               </svg>
-            ) : (
-              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                <path d="M12 2a10 10 0 1 0 10 10H12V2z"/>
-                <path d="M12 2a10 10 0 0 1 10 10"/>
-                <circle cx="12" cy="12" r="3"/>
-              </svg>
-            )}
+            </div>
+          ) : (
+            <div
+              style={{
+                width: "100%",
+                maxWidth: 280,
+                borderRadius: 16,
+                padding: "14px 18px",
+                background: "linear-gradient(180deg, #f8fafc 0%, #e8eef9 100%)",
+                boxShadow:
+                  "0 1px 0 rgba(255,255,255,0.75) inset, 0 16px 40px rgba(15, 23, 42, 0.45), 0 0 0 1px rgba(148,163,184,0.25)",
+              }}
+            >
+              <BrandMark variant="lockup" height={56} alt="Total Recall" />
+            </div>
+          )}
+          <div>
+            <h1 style={{ fontSize: 22, fontWeight: 700, color: "var(--text-primary)", margin: 0, letterSpacing: "-0.03em" }}>
+              {needsReset ? "Action Required" : isFirstTime ? "Setup Admin Password" : "Welcome back"}
+            </h1>
+            <p style={{ fontSize: 13.5, color: "var(--text-secondary)", margin: "8px 0 0", lineHeight: 1.5 }}>
+              {needsReset
+                ? "You must change your temporary password to continue."
+                : isFirstTime
+                  ? "Choose a strong password to secure your local memory dashboard."
+                  : "Portable personal memory · any IDE"}
+            </p>
           </div>
-          <h1 style={{ fontSize: 20, fontWeight: 700, color: "var(--text-primary)", margin: 0 }}>
-            {needsReset ? "Action Required" : isFirstTime ? "Setup Admin Password" : "Total Recall"}
-          </h1>
-          <p style={{ fontSize: 13, color: "var(--text-tertiary)", margin: "4px 0 0" }}>
-            {needsReset ? "You must change your temporary password to continue." : isFirstTime ? "Choose a strong password to secure your dashboard." : "Sovereign Brain v3.0"}
-          </p>
         </div>
 
-        {/* Form */}
         <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: 16 }}>
           <input type="text" name="username" autoComplete="username" style={{ display: "none" }} />
-          <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
-            <label htmlFor="login-password" style={{ fontSize: 12, fontWeight: 600, color: "var(--text-secondary)", textTransform: "uppercase", letterSpacing: "0.05em" }}>
+          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+            <label
+              htmlFor="login-password"
+              style={{ fontSize: 11, fontWeight: 600, color: "var(--text-tertiary)", textTransform: "uppercase", letterSpacing: "0.08em" }}
+            >
               {(needsReset || isFirstTime) ? "New Password" : "Password"}
             </label>
             <input
@@ -161,30 +165,43 @@ export default function LoginPage({ onAuthenticated }: Props) {
               autoComplete={(isFirstTime || needsReset) ? "new-password" : "current-password"}
               disabled={loading}
               style={{
-                background: "var(--bg-primary)",
-                border: `1px solid ${error ? "#ef4444" : "var(--border)"}`,
-                borderRadius: 8,
-                padding: "10px 14px",
+                background: "rgba(7, 11, 20, 0.65)",
+                border: `1px solid ${error ? "rgba(248,113,113,0.55)" : "var(--border)"}`,
+                borderRadius: 12,
+                padding: "12px 16px",
                 color: "var(--text-primary)",
                 fontSize: 14,
                 outline: "none",
-                transition: "border-color 0.15s",
+                transition: "border-color 0.15s, box-shadow 0.15s",
+                boxShadow: error ? "0 0 0 3px rgba(248,113,113,0.12)" : "inset 0 1px 2px rgba(0,0,0,0.25)",
+              }}
+              onFocus={e => {
+                if (!error) {
+                  e.currentTarget.style.borderColor = "var(--border-accent)"
+                  e.currentTarget.style.boxShadow = "0 0 0 3px var(--accent-glow)"
+                }
+              }}
+              onBlur={e => {
+                e.currentTarget.style.borderColor = error ? "rgba(248,113,113,0.55)" : "var(--border)"
+                e.currentTarget.style.boxShadow = error ? "0 0 0 3px rgba(248,113,113,0.12)" : "inset 0 1px 2px rgba(0,0,0,0.25)"
               }}
             />
           </div>
 
           {error && (
-            <div style={{
-              background: "rgba(239,68,68,0.1)",
-              border: "1px solid rgba(239,68,68,0.3)",
-              borderRadius: 8,
-              padding: "10px 14px",
-              fontSize: 13,
-              color: "#f87171",
-              display: "flex",
-              alignItems: "center",
-              gap: 8,
-            }}>
+            <div
+              style={{
+                background: "rgba(248,113,113,0.1)",
+                border: "1px solid rgba(248,113,113,0.3)",
+                borderRadius: 12,
+                padding: "11px 14px",
+                fontSize: 13,
+                color: "#fca5a5",
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+              }}
+            >
               <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
                 <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
               </svg>
@@ -195,20 +212,20 @@ export default function LoginPage({ onAuthenticated }: Props) {
           <button
             id="login-submit"
             type="submit"
-            disabled={loading || ((isFirstTime || needsReset) ? !newPassword : !password)}
+            disabled={disabled}
+            className={disabled ? undefined : "btn btn-primary"}
             style={{
-              background: (loading || ((isFirstTime || needsReset) ? !newPassword : !password)) ? "var(--bg-tertiary)" : "var(--accent)",
-              color: (loading || ((isFirstTime || needsReset) ? !newPassword : !password)) ? "var(--text-tertiary)" : "white",
-              border: "none",
-              borderRadius: 8,
-              padding: "11px 0",
+              width: "100%",
+              justifyContent: "center",
+              padding: "12px 0",
               fontSize: 14,
-              fontWeight: 600,
-              cursor: (loading || ((isFirstTime || needsReset) ? !newPassword : !password)) ? "not-allowed" : "pointer",
-              transition: "background 0.15s, color 0.15s",
+              borderRadius: 12,
+              border: "none",
+              cursor: disabled ? "not-allowed" : "pointer",
+              background: disabled ? "var(--bg-tertiary)" : undefined,
+              color: disabled ? "var(--text-tertiary)" : undefined,
               display: "flex",
               alignItems: "center",
-              justifyContent: "center",
               gap: 8,
             }}
           >
@@ -224,8 +241,9 @@ export default function LoginPage({ onAuthenticated }: Props) {
         </form>
 
         {(!needsReset && !isFirstTime) && (
-          <p style={{ textAlign: "center", fontSize: 11, color: "var(--text-tertiary)", margin: 0 }}>
-            Set password in <code style={{ color: "var(--accent)", fontSize: 11 }}>~/.agent/config/security.yml</code>
+          <p style={{ textAlign: "center", fontSize: 11, color: "var(--text-tertiary)", margin: 0, lineHeight: 1.5 }}>
+            Local-first vault · credentials in{" "}
+            <code style={{ color: "#93c5fd", fontSize: 11 }}>~/.agent/config/security.yml</code>
           </p>
         )}
       </div>

package/frontend/src/pages/MemoryPage.tsx

@@ -222,7 +222,7 @@ export default function MemoryPage({ activeBrainId }: { activeBrainId?: string }
         related: relatedArr,
         contradicts: contradictsArr,
         supersedes: supersedesArr
-      })
+      }, activeBrainId)
       setSelected(updated)
       setIsEditing(false)
       fetchNodes()
@@ -260,7 +260,7 @@ export default function MemoryPage({ activeBrainId }: { activeBrainId?: string }
         related: relatedArr,
         contradicts: contradictsArr,
         supersedes: supersedesArr
-      })
+      }, activeBrainId)
       setIsCreating(false)
       setSelected(created)
       setSearchParams({ slug: created.slug })
@@ -277,7 +277,7 @@ export default function MemoryPage({ activeBrainId }: { activeBrainId?: string }
     setLoading(true)
     setError("")
     try {
-      await deleteMemory(slug)
+      await deleteMemory(slug, activeBrainId)
       setSelected(null)
       setSearchParams({})
       fetchNodes()
@@ -339,14 +339,34 @@ export default function MemoryPage({ activeBrainId }: { activeBrainId?: string }
   useEffect(() => {
     if (urlSlug) {
       const loadUrlSlug = async () => {
+        // Prefer list payload (already loaded for the active brain) so project-brain
+        // nodes render even before a scoped GET completes.
+        const fromList = nodes.find((n) => n.slug === urlSlug)
+        if (fromList && (fromList.content || fromList.body)) {
+          setSelected(fromList)
+          setError("")
+          return
+        }
         setLoading(true)
         setError("")
         try {
-          const full = await readMemory(urlSlug)
-          setSelected(full)
+          const full = await readMemory(urlSlug, activeBrainId)
+          if (full) {
+            setSelected(full)
+          } else if (fromList) {
+            setSelected(fromList)
+          } else {
+            setError(`Memory node not found: ${urlSlug}`)
+            setSelected(null)
+          }
         } catch (e) {
-          setError(`Failed to load memory node '${urlSlug}': ${(e as Error).message}`)
-          setSelected(null)
+          if (fromList) {
+            setSelected(fromList)
+            setError("")
+          } else {
+            setError(`Failed to load memory node '${urlSlug}': ${(e as Error).message}`)
+            setSelected(null)
+          }
         } finally {
           setLoading(false)
         }
@@ -356,7 +376,7 @@ export default function MemoryPage({ activeBrainId }: { activeBrainId?: string }
       // eslint-disable-next-line react-hooks/set-state-in-effect -- legitimate reset on url change
       setSelected(null)
     }
-  }, [urlSlug])
+  }, [urlSlug, activeBrainId, nodes])
 
   // Wire SSE Live Agent Monitor Streaming (Port 9111)
   useEffect(() => {
@@ -390,6 +410,9 @@ export default function MemoryPage({ activeBrainId }: { activeBrainId?: string }
   }, [fetchNodes, fetchConflictsList])
 
   const handleSelect = (node: MemoryNode) => {
+    // Show immediately from list (includes body/content for the vault that listed it)
+    setSelected(node)
+    setError("")
     setSearchParams({ slug: node.slug })
   }