total-recall-brain 3.41.5 → 3.41.6

package/frontend/src/index.css

@@ -47,6 +47,7 @@
   --mesh-3: rgba(15, 23, 42, 0.9);
 
   /* Typography */
+  --font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
 
@@ -94,6 +95,13 @@ body {
 a { color: var(--accent); text-decoration: none; }
 a:hover { color: var(--accent-hover); }
 
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-heading);
+  letter-spacing: -0.025em;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
 button {
   font-family: var(--font-sans);
   cursor: pointer;
@@ -296,17 +304,21 @@ code, pre { font-family: var(--font-mono); }
 /* ─── Cards ──────────────────────────────────────────────────────────────────── */
 
 .card {
-  background: linear-gradient(165deg, rgba(23, 32, 51, 0.9), rgba(12, 18, 32, 0.95));
-  border: 1px solid var(--border);
+  background: rgba(18, 26, 43, 0.65);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid rgba(148, 163, 184, 0.12);
   border-radius: var(--radius-md);
-  padding: 20px;
-  transition: border-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal);
-  box-shadow: var(--shadow-sm);
+  padding: 22px;
+  transition: all var(--transition-normal);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
 }
 
 .card:hover {
-  border-color: var(--border-hover);
-  box-shadow: var(--shadow-md);
+  border-color: rgba(96, 165, 250, 0.35);
+  background: rgba(28, 39, 64, 0.75);
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
+  transform: translateY(-1px);
 }
 
 .card-grid {
@@ -320,40 +332,50 @@ code, pre { font-family: var(--font-mono); }
 .btn {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
-  padding: 9px 16px;
-  border-radius: 10px;
-  font-size: 13px;
+  justify-content: center;
+  gap: 8px;
+  min-height: 44px;
+  padding: 0 18px;
+  border-radius: var(--radius-md);
+  font-size: 13.5px;
   font-weight: 600;
   transition: all var(--transition-fast);
   letter-spacing: -0.01em;
+  cursor: pointer;
+  border: 1px solid transparent;
 }
 
 .btn-primary {
   background: linear-gradient(135deg, #3b82f6 0%, #2563eb 55%, #1d4ed8 100%);
   color: #fff;
-  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 8px 20px rgba(37, 99, 235, 0.28);
+  border-color: rgba(255, 255, 255, 0.1);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 4px 14px rgba(37, 99, 235, 0.35);
 }
 
 .btn-primary:hover {
   background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #2563eb 100%);
-  box-shadow: 0 0 28px var(--accent-glow), 0 8px 24px rgba(37, 99, 235, 0.35);
+  box-shadow: 0 0 24px var(--accent-glow), 0 6px 20px rgba(37, 99, 235, 0.45);
   transform: translateY(-1px);
 }
 
 .btn-ghost {
-  background: rgba(148, 163, 184, 0.06);
+  background: rgba(148, 163, 184, 0.08);
   color: var(--text-secondary);
-  border: 1px solid var(--border);
+  border: 1px solid rgba(148, 163, 184, 0.14);
 }
 
 .btn-ghost:hover {
-  background: rgba(148, 163, 184, 0.12);
+  background: rgba(148, 163, 184, 0.16);
   color: var(--text-primary);
-  border-color: var(--border-hover);
+  border-color: rgba(148, 163, 184, 0.28);
 }
 
-.btn-sm { padding: 6px 11px; font-size: 12px; }
+.btn-sm {
+  min-height: 36px;
+  padding: 0 12px;
+  font-size: 12px;
+  border-radius: var(--radius-sm);
+}
 
 /* ─── Alerts ─────────────────────────────────────────────────────────────────── */
 
@@ -651,14 +673,15 @@ code, pre { font-family: var(--font-mono); }
 .chat-empty p { font-size: 13px; }
 
 .message {
-  max-width: 720px;
-  padding: 14px 18px;
+  max-width: 760px;
+  padding: 16px 20px;
   border-radius: var(--radius-md);
   font-size: 14px;
-  line-height: 1.7;
-  animation: msgIn 0.2s ease;
+  line-height: 1.65;
+  animation: msgIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
   white-space: pre-wrap;
   word-break: break-word;
+  position: relative;
 }
 
 @keyframes msgIn {
@@ -668,46 +691,55 @@ code, pre { font-family: var(--font-mono); }
 
 .message-user {
   align-self: flex-end;
-  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
-  color: #fff;
+  background: rgba(30, 58, 138, 0.28);
+  border: 1px solid rgba(59, 130, 246, 0.35);
+  color: #f8fafc;
   border-bottom-right-radius: 4px;
-  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.22);
+  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
 }
 
 .message-assistant {
   align-self: flex-start;
-  background: linear-gradient(165deg, rgba(23, 32, 51, 0.95), rgba(12, 18, 32, 0.98));
-  border: 1px solid var(--border);
+  background: rgba(18, 26, 43, 0.72);
+  border: 1px solid rgba(148, 163, 184, 0.12);
   border-bottom-left-radius: 4px;
-  box-shadow: var(--shadow-sm);
+  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  color: var(--text-primary);
 }
 
 .message-assistant code {
-  background: var(--bg-primary);
-  padding: 1px 5px;
+  background: rgba(7, 11, 20, 0.75);
+  padding: 2px 6px;
   border-radius: 4px;
   font-size: 12.5px;
+  border: 1px solid rgba(148, 163, 184, 0.1);
 }
 
 .chat-input-bar {
   padding: 16px 32px 20px;
-  border-top: 1px solid var(--border);
-  background: var(--bg-secondary);
+  border-top: 1px solid rgba(148, 163, 184, 0.1);
+  background: rgba(12, 18, 32, 0.85);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
 }
 
 .chat-input-wrapper {
   display: flex;
-  gap: 8px;
+  gap: 10px;
   align-items: flex-end;
-  max-width: 800px;
+  max-width: 820px;
   margin: 0 auto;
 }
 
 .chat-input-wrapper textarea {
   flex: 1;
   resize: none;
-  background: var(--bg-tertiary);
-  border: 1px solid var(--border);
+  background: rgba(18, 26, 43, 0.65);
+  border: 1px solid rgba(148, 163, 184, 0.14);
   border-radius: var(--radius-md);
   padding: 12px 16px;
   color: var(--text-primary);
@@ -716,13 +748,14 @@ code, pre { font-family: var(--font-mono); }
   line-height: 1.5;
   min-height: 44px;
   max-height: 160px;
-  transition: border-color var(--transition-fast);
+  transition: all var(--transition-fast);
 }
 
 .chat-input-wrapper textarea:focus {
-  border-color: var(--accent);
+  border-color: rgba(59, 130, 246, 0.5);
+  background: rgba(18, 26, 43, 0.9);
   outline: none;
-  box-shadow: 0 0 0 2px var(--accent-glow);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16);
 }
 
 .chat-input-wrapper textarea::placeholder { color: var(--text-tertiary); }
@@ -748,9 +781,10 @@ code, pre { font-family: var(--font-mono); }
 }
 
 .chat-send-btn:disabled {
-  opacity: 0.4;
+  opacity: 0.35;
   cursor: not-allowed;
   box-shadow: none;
+  transform: none;
 }
 
 .chat-send-btn svg { width: 18px; height: 18px; }
@@ -759,25 +793,29 @@ code, pre { font-family: var(--font-mono); }
 
 .memory-layout {
   display: grid;
-  grid-template-columns: 220px 1fr;
+  grid-template-columns: 240px 1fr;
   gap: 20px;
   height: calc(100vh - 120px);
 }
 
 .memory-sidebar {
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
+  background: rgba(12, 18, 32, 0.72);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid rgba(148, 163, 184, 0.12);
   border-radius: var(--radius-md);
-  padding: 12px;
+  padding: 14px;
   overflow-y: auto;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
 }
 
 .memory-sidebar h3 {
   font-size: 11px;
+  font-weight: 600;
   text-transform: uppercase;
-  letter-spacing: 0.06em;
+  letter-spacing: 0.08em;
   color: var(--text-tertiary);
-  padding: 8px 8px 6px;
+  padding: 6px 8px 10px;
 }
 
 .category-btn {
@@ -785,54 +823,69 @@ code, pre { font-family: var(--font-mono); }
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: 8px 10px;
+  padding: 9px 12px;
   border-radius: var(--radius-sm);
   background: transparent;
   color: var(--text-secondary);
   font-size: 13px;
+  font-weight: 500;
   text-align: left;
   transition: all var(--transition-fast);
+  border: 1px solid transparent;
+}
+
+.category-btn:hover {
+  background: rgba(148, 163, 184, 0.08);
+  color: var(--text-primary);
 }
 
-.category-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
-.category-btn.active { background: var(--accent-muted); color: var(--accent); }
+.category-btn.active {
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(30, 58, 138, 0.25));
+  border-color: rgba(59, 130, 246, 0.35);
+  color: #93c5fd;
+  font-weight: 600;
+}
 
 .category-count {
   font-size: 11px;
-  background: var(--bg-tertiary);
-  padding: 1px 6px;
+  font-weight: 600;
+  background: rgba(148, 163, 184, 0.12);
+  padding: 2px 7px;
   border-radius: 99px;
-  color: var(--text-tertiary);
+  color: var(--text-secondary);
 }
 
 .memory-main {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 14px;
   overflow: hidden;
 }
 
 .memory-search {
   display: flex;
-  gap: 8px;
+  gap: 10px;
 }
 
 .memory-search input {
   flex: 1;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
+  background: rgba(12, 18, 32, 0.72);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid rgba(148, 163, 184, 0.14);
   border-radius: var(--radius-md);
-  padding: 10px 14px;
+  padding: 12px 16px;
   color: var(--text-primary);
-  font-size: 13px;
+  font-size: 13.5px;
   font-family: var(--font-sans);
-  transition: border-color var(--transition-fast);
+  transition: all var(--transition-fast);
 }
 
 .memory-search input:focus {
-  border-color: var(--accent);
+  border-color: rgba(59, 130, 246, 0.5);
+  background: rgba(18, 26, 43, 0.9);
   outline: none;
-  box-shadow: 0 0 0 2px var(--accent-glow);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16);
 }
 
 .memory-search input::placeholder { color: var(--text-tertiary); }
@@ -842,47 +895,56 @@ code, pre { font-family: var(--font-mono); }
   overflow-y: auto;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 10px;
 }
 
 .memory-node-card {
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
+  background: rgba(18, 26, 43, 0.6);
+  border: 1px solid rgba(148, 163, 184, 0.12);
   border-radius: var(--radius-md);
-  padding: 14px 16px;
+  padding: 16px 18px;
   cursor: pointer;
   transition: all var(--transition-fast);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
 }
 
 .memory-node-card:hover {
-  border-color: var(--accent);
-  background: var(--bg-tertiary);
+  border-color: rgba(96, 165, 250, 0.4);
+  background: rgba(28, 39, 64, 0.7);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+  transform: translateY(-1px);
 }
 
 .memory-node-card.selected {
-  border-color: var(--accent);
-  box-shadow: 0 0 0 1px var(--accent-glow);
+  border-color: rgba(59, 130, 246, 0.55);
+  background: rgba(30, 58, 138, 0.25);
+  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.3), 0 4px 20px rgba(0, 0, 0, 0.35);
 }
 
 .memory-node-card h4 {
   font-size: 14px;
   font-weight: 600;
-  margin-bottom: 4px;
+  margin-bottom: 6px;
+  color: #f8fafc;
 }
 
 .memory-node-card .meta {
   font-size: 12px;
   color: var(--text-tertiary);
   display: flex;
-  gap: 12px;
+  align-items: center;
+  gap: 14px;
 }
 
 .memory-detail {
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
+  background: rgba(12, 18, 32, 0.8);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(148, 163, 184, 0.14);
+  border-radius: var(--radius-lg);
   padding: 24px;
   overflow-y: auto;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
 }
 
 .memory-detail h2 {
@@ -1098,8 +1160,10 @@ code, pre { font-family: var(--font-mono); }
 
 .chat-threads-sidebar {
   width: 260px;
-  background: var(--bg-secondary);
-  border-right: 1px solid var(--border);
+  background: rgba(12, 18, 32, 0.7);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border-right: 1px solid rgba(148, 163, 184, 0.1);
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -1108,8 +1172,8 @@ code, pre { font-family: var(--font-mono); }
 }
 
 .sidebar-header {
-  padding: 16px;
-  border-bottom: 1px solid var(--border);
+  padding: 14px 16px;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
 }
 
 .new-chat-btn {
@@ -1119,18 +1183,20 @@ code, pre { font-family: var(--font-mono); }
   justify-content: center;
   gap: 8px;
   padding: 10px 16px;
-  background: var(--accent);
-  color: #fff;
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.22), rgba(30, 58, 138, 0.28));
+  border: 1px solid rgba(59, 130, 246, 0.35);
+  color: #93c5fd;
   border-radius: var(--radius-sm);
-  font-weight: 500;
+  font-weight: 600;
   font-size: 13px;
   transition: all var(--transition-fast);
-  border: none;
   cursor: pointer;
 }
 
 .new-chat-btn:hover {
-  background: var(--accent-hover);
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.35), rgba(30, 58, 138, 0.45));
+  border-color: rgba(96, 165, 250, 0.5);
+  color: #fff;
   box-shadow: 0 0 16px var(--accent-glow);
 }
 
@@ -1156,12 +1222,12 @@ code, pre { font-family: var(--font-mono); }
 }
 
 .thread-item:hover {
-  background: var(--bg-hover);
+  background: rgba(148, 163, 184, 0.08);
 }
 
 .thread-item.active {
-  background: rgba(255, 255, 255, 0.05);
-  border-color: var(--border);
+  background: rgba(59, 130, 246, 0.12);
+  border-color: rgba(59, 130, 246, 0.3);
 }
 
 .thread-info {

package/frontend/src/pages/HelpPage.tsx

@@ -88,7 +88,7 @@ export default function HelpPage() {
         <p>Offline docs for portable memory: CLI commands, vault layout, dream, tasks, and IDE connect.</p>
       </div>
 
-      {error && <div className="badge badge-error" style={{ marginBottom: '16px' }}>⚠️ {error}</div>}
+      {error && <div className="badge badge-error" style={{ marginBottom: '16px' }}>{error}</div>}
 
       <div style={{ display: 'grid', gridTemplateColumns: '260px 1fr', gap: '30px', minHeight: '500px' }}>
         {/* Sidebar */}
@@ -99,17 +99,19 @@ export default function HelpPage() {
               onClick={() => setSelectedTopic(t.id)}
               style={{
                 textAlign: 'left',
+                minHeight: '44px',
                 padding: '12px 16px',
-                borderRadius: '8px',
-                background: selectedTopic === t.id ? 'var(--purple-primary)' : 'rgba(255, 255, 255, 0.03)',
+                borderRadius: 'var(--radius-md, 10px)',
+                background: selectedTopic === t.id ? 'var(--color-primary, #8b5cf6)' : 'rgba(12, 18, 32, 0.72)',
                 color: '#fff',
-                border: selectedTopic === t.id ? '1px solid var(--purple-border)' : '1px solid transparent',
+                border: selectedTopic === t.id ? '1px solid var(--purple-border, #a78bfa)' : '1px solid rgba(148, 163, 184, 0.12)',
+                backdropFilter: 'blur(16px)',
                 cursor: 'pointer',
                 transition: 'all 0.2s',
               }}
             >
-              <div style={{ fontWeight: 'bold', fontSize: '14px' }}>{t.title}</div>
-              <div style={{ fontSize: '11px', color: selectedTopic === t.id ? 'rgba(255, 255, 255, 0.8)' : 'var(--text-secondary)', marginTop: '4px' }}>
+              <div style={{ fontWeight: 600, fontSize: '14px' }}>{t.title}</div>
+              <div style={{ fontSize: '12px', color: selectedTopic === t.id ? 'rgba(255, 255, 255, 0.9)' : 'var(--text-secondary)', marginTop: '4px' }}>
                 {t.description}
               </div>
             </button>
@@ -119,10 +121,11 @@ export default function HelpPage() {
         {/* Content Pane */}
         <div
           style={{
-            background: 'var(--surface-bg)',
-            border: '1px solid var(--border)',
-            borderRadius: '12px',
-            padding: '30px',
+            background: 'rgba(12, 18, 32, 0.72)',
+            backdropFilter: 'blur(16px)',
+            border: '1px solid rgba(148, 163, 184, 0.12)',
+            borderRadius: 'var(--radius-lg, 16px)',
+            padding: '32px',
             overflowY: 'auto',
             maxHeight: '75vh',
           }}