total-recall-brain 3.18.2 → 3.19.0

package/frontend/src/components/BrainSelector.tsx

@@ -1,10 +1,10 @@
 import { useState, useEffect, useRef } from 'react'
-import { getApiBase } from '../api'
+import { apiFetch, getApiBase } from '../api'
 
 interface BrainInfo {
   id: string
   name: string
-  layer: 'global' | 'project'
+  layer: 'global' | 'project' | 'tenant' | string
   path: string
   project_root?: string
   exists: boolean
@@ -21,24 +21,46 @@ interface BrainSelectorProps {
 function layerDot(layer: string, multi = false): string {
   if (multi) return 'linear-gradient(135deg, #60a5fa, #34d399)'
   if (layer === 'global') return 'linear-gradient(135deg, #60a5fa, #2563eb)'
+  if (layer === 'tenant') return 'linear-gradient(135deg, #c084fc, #7c3aed)'
   return 'linear-gradient(135deg, #34d399, #059669)'
 }
 
+function layerBadge(layer: string): string {
+  if (layer === 'global') return 'G'
+  if (layer === 'tenant') return 'T'
+  return 'P'
+}
+
 export default function BrainSelector({ activeBrainId, onBrainChange }: BrainSelectorProps) {
   const [brains, setBrains] = useState<BrainInfo[]>([])
   const [expanded, setExpanded] = useState(false)
   const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
   const selectorRef = useRef<HTMLDivElement>(null)
 
+  const loadBrains = async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const res = await apiFetch(`${getApiBase()}/api/brains`)
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({}))
+        throw new Error(body.error || `Brains API ${res.status}`)
+      }
+      const data = await res.json()
+      const list: BrainInfo[] = Array.isArray(data.brains) ? data.brains : []
+      setBrains(list)
+    } catch (err) {
+      console.error(err)
+      setError(err instanceof Error ? err.message : 'Failed to load brains')
+      setBrains([])
+    } finally {
+      setLoading(false)
+    }
+  }
+
   useEffect(() => {
-    const base = getApiBase()
-    fetch(`${base}/api/brains`, { credentials: 'include' })
-      .then((r) => r.json())
-      .then((data) => {
-        setBrains(data.brains || [])
-        setLoading(false)
-      })
-      .catch(() => setLoading(false))
+    void loadBrains()
   }, [])
 
   useEffect(() => {
@@ -51,42 +73,91 @@ export default function BrainSelector({ activeBrainId, onBrainChange }: BrainSel
     return () => document.removeEventListener('mousedown', handleClickOutside)
   }, [])
 
+  // Normalize empty / missing selection to global when list is ready
+  useEffect(() => {
+    if (loading || brains.length === 0) return
+    const selected = activeBrainId.split(',').filter(Boolean)
+    const known = new Set(brains.map((b) => b.id))
+    const valid = selected.filter((id) => known.has(id))
+    if (valid.length === 0) {
+      const fallback = brains.find((b) => b.id === 'global')?.id || brains[0]?.id
+      if (fallback && fallback !== activeBrainId) onBrainChange(fallback)
+      return
+    }
+    // Drop unknown ids (stale project:foo)
+    if (valid.join(',') !== selected.join(',')) {
+      onBrainChange(valid.join(','))
+    }
+  }, [loading, brains, activeBrainId, onBrainChange])
+
   const selectedIds = activeBrainId.split(',').filter(Boolean)
   const selectedBrains = brains.filter((b) => selectedIds.includes(b.id))
-  const primary = selectedBrains[0] || brains[0]
+  const primary = selectedBrains[0] || brains.find((b) => b.id === 'global') || brains[0]
   const isMulti = selectedIds.length > 1
-  const totalNodes = selectedBrains.reduce((sum, b) => sum + (b.node_count || 0), 0) || primary?.node_count || 0
+  const totalNodes =
+    selectedBrains.reduce((sum, b) => sum + (b.node_count || 0), 0) || primary?.node_count || 0
 
-  const label = isMulti
-    ? `${selectedIds.length} brains`
-    : primary?.name || 'Brain'
+  const label = isMulti ? `${selectedIds.length} brains` : primary?.name || 'Brain'
+
+  const setSelection = (ids: string[]) => {
+    const next = ids.filter(Boolean)
+    if (next.length === 0) {
+      const fallback = brains.find((b) => b.id === 'global')?.id || brains[0]?.id
+      if (fallback) onBrainChange(fallback)
+      return
+    }
+    onBrainChange(next.join(','))
+  }
 
   const handleToggle = (id: string, e: React.SyntheticEvent) => {
     e.stopPropagation()
     if (selectedIds.includes(id)) {
-      onBrainChange(selectedIds.filter((x) => x !== id).join(','))
+      setSelection(selectedIds.filter((x) => x !== id))
     } else {
-      onBrainChange([...selectedIds, id].join(','))
+      setSelection([...selectedIds, id])
     }
   }
 
+  const handleSelectOnly = (id: string) => {
+    setSelection([id])
+    setExpanded(false)
+  }
+
   if (loading) {
     return (
-      <div className="brain-selector-trigger" style={{ opacity: 0.6 }}>
+      <div className="brain-selector-trigger" data-testid="brain-selector-loading" style={{ opacity: 0.6 }}>
         <span style={{ fontSize: 11, color: 'var(--text-tertiary)' }}>Brains…</span>
       </div>
     )
   }
 
-  if (brains.length === 0) return null
+  if (error) {
+    return (
+      <div data-testid="brain-selector-error" style={{ fontSize: 10, color: '#ef4444', padding: '4px 6px' }}>
+        Brains failed{' '}
+        <button type="button" onClick={() => void loadBrains()} style={{ cursor: 'pointer', marginLeft: 4 }}>
+          Retry
+        </button>
+      </div>
+    )
+  }
+
+  if (brains.length === 0) {
+    return (
+      <div data-testid="brain-selector-empty" style={{ fontSize: 10, color: 'var(--text-tertiary)', padding: '4px 6px' }}>
+        No brains registered
+      </div>
+    )
+  }
 
   return (
-    <div ref={selectorRef} className="brain-selector" style={{ position: 'relative' }}>
+    <div ref={selectorRef} className="brain-selector" data-testid="brain-selector" style={{ position: 'relative' }}>
       <button
         type="button"
         className="brain-selector-trigger"
+        data-testid="brain-selector-trigger"
         onClick={() => setExpanded((v) => !v)}
-        title="Select brain layers"
+        title="Select active brain (sidebar only)"
         style={{
           width: '100%',
           display: 'flex',
@@ -128,9 +199,7 @@ export default function BrainSelector({ activeBrainId, onBrainChange }: BrainSel
         >
           {label}
         </span>
-        <span style={{ fontSize: 10, color: 'var(--text-tertiary)', flexShrink: 0 }}>
-          {totalNodes}
-        </span>
+        <span style={{ fontSize: 10, color: 'var(--text-tertiary)', flexShrink: 0 }}>{totalNodes}</span>
         <svg
           width="10"
           height="10"
@@ -152,6 +221,7 @@ export default function BrainSelector({ activeBrainId, onBrainChange }: BrainSel
       {expanded && (
         <div
           className="brain-selector-menu"
+          data-testid="brain-selector-menu"
           style={{
             position: 'absolute',
             bottom: '100%',
@@ -179,7 +249,7 @@ export default function BrainSelector({ activeBrainId, onBrainChange }: BrainSel
               borderBottom: '1px solid var(--border)',
             }}
           >
-            Brains · multi-select
+            Active brains · checkbox multi · click row = only
           </div>
           {brains.map((brain) => {
             const isSelected = selectedIds.includes(brain.id)
@@ -188,16 +258,13 @@ export default function BrainSelector({ activeBrainId, onBrainChange }: BrainSel
                 key={brain.id}
                 role="button"
                 tabIndex={0}
+                data-testid={`brain-option-${brain.id}`}
                 onClick={() => {
                   if (!brain.exists) return
-                  onBrainChange(brain.id)
-                  setExpanded(false)
+                  handleSelectOnly(brain.id)
                 }}
                 onKeyDown={(e) => {
-                  if (e.key === 'Enter' && brain.exists) {
-                    onBrainChange(brain.id)
-                    setExpanded(false)
-                  }
+                  if (e.key === 'Enter' && brain.exists) handleSelectOnly(brain.id)
                 }}
                 style={{
                   display: 'flex',
@@ -214,7 +281,9 @@ export default function BrainSelector({ activeBrainId, onBrainChange }: BrainSel
                   if (brain.exists) e.currentTarget.style.background = 'rgba(148, 163, 184, 0.08)'
                 }}
                 onMouseLeave={(e) => {
-                  e.currentTarget.style.background = isSelected ? 'rgba(59, 130, 246, 0.12)' : 'transparent'
+                  e.currentTarget.style.background = isSelected
+                    ? 'rgba(59, 130, 246, 0.12)'
+                    : 'transparent'
                 }}
               >
                 <input
@@ -223,6 +292,7 @@ export default function BrainSelector({ activeBrainId, onBrainChange }: BrainSel
                   disabled={!brain.exists}
                   onClick={(e) => e.stopPropagation()}
                   onChange={(e) => handleToggle(brain.id, e)}
+                  aria-label={`Include ${brain.name}`}
                   style={{
                     width: 13,
                     height: 13,
@@ -274,11 +344,18 @@ export default function BrainSelector({ activeBrainId, onBrainChange }: BrainSel
                     background:
                       brain.layer === 'global'
                         ? 'rgba(59, 130, 246, 0.15)'
-                        : 'rgba(16, 185, 129, 0.12)',
-                    color: brain.layer === 'global' ? '#93c5fd' : '#6ee7b7',
+                        : brain.layer === 'tenant'
+                          ? 'rgba(168, 85, 247, 0.15)'
+                          : 'rgba(16, 185, 129, 0.12)',
+                    color:
+                      brain.layer === 'global'
+                        ? '#93c5fd'
+                        : brain.layer === 'tenant'
+                          ? '#d8b4fe'
+                          : '#6ee7b7',
                   }}
                 >
-                  {brain.layer === 'global' ? 'G' : 'P'}
+                  {layerBadge(brain.layer)}
                 </span>
               </div>
             )

package/frontend/src/components/MobilePairing.spec.tsx

@@ -1,24 +1,54 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
 import { MobilePairing } from './MobilePairing';
 
+vi.mock('../api', () => ({
+  apiFetch: vi.fn(),
+  getApiBase: vi.fn(() => ''),
+}));
+
+import { apiFetch } from '../api';
+
 describe('MobilePairing', () => {
   beforeEach(() => {
-    // Mock window.location
-    vi.stubGlobal('location', {
-      protocol: 'http:',
-      host: '192.168.1.100:3000'
-    });
+    vi.clearAllMocks();
   });
 
-  afterEach(() => {
-    vi.unstubAllGlobals();
-  });
+  it('renders QR with preferred LAN/mesh URL from API', async () => {
+    vi.mocked(apiFetch).mockResolvedValue({
+      ok: true,
+      json: async () => ({
+        port: 3000,
+        protocol: 'http',
+        preferred_url: 'http://10.0.0.3:3000',
+        listen_hosts: ['127.0.0.1', '100.64.0.3'],
+        warnings: ['Brain is not listening on LAN'],
+        endpoints: [
+          {
+            kind: 'lan',
+            label: 'Local Wi‑Fi / LAN',
+            ip: '10.0.0.3',
+            url: 'http://10.0.0.3:3000',
+            recommended: false,
+            reachable_hint: 'Same Wi‑Fi',
+          },
+          {
+            kind: 'mesh',
+            label: 'Tailscale / mesh',
+            ip: '100.64.0.3',
+            url: 'http://100.64.0.3:3000',
+            recommended: true,
+            reachable_hint: 'Tailscale',
+          },
+        ],
+      }),
+    } as any);
 
-  it('renders instructions and QR code', () => {
     render(<MobilePairing />);
-    expect(screen.getByText('Mobile Device Pairing')).toBeInTheDocument();
-    expect(screen.getByText(/Scan this QR code/)).toBeInTheDocument();
-    expect(screen.getByText('URL: http://192.168.1.100:3000')).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByTestId('pairing-url').textContent).toContain('10.0.0.3:3000');
+    });
+    expect(screen.getByTestId('pairing-qr')).toBeTruthy();
+    expect(screen.getByTestId('pairing-warnings')).toBeTruthy();
   });
 });

package/frontend/src/components/MobilePairing.tsx

@@ -1,36 +1,243 @@
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { QRCodeSVG } from 'qrcode.react';
+import { apiFetch, getApiBase } from '../api';
+
+export interface PairingEndpoint {
+  kind: string;
+  label: string;
+  ip: string;
+  url: string;
+  interface?: string | null;
+  recommended: boolean;
+  reachable_hint: string;
+}
+
+export interface PairingInfo {
+  port: number;
+  protocol: string;
+  preferred_url: string | null;
+  endpoints: PairingEndpoint[];
+  warnings: string[];
+  listen_hosts: string[];
+}
 
 export function MobilePairing() {
-  const [localIpUrl, setLocalIpUrl] = useState<string>('');
+  const [info, setInfo] = useState<PairingInfo | null>(null);
+  const [selectedUrl, setSelectedUrl] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [copied, setCopied] = useState(false);
+
+  const load = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await apiFetch(`${getApiBase()}/api/pairing`);
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({}));
+        throw new Error(body.error || `Pairing API error: ${res.status}`);
+      }
+      const data = (await res.json()) as PairingInfo;
+      setInfo(data);
+      const preferred =
+        data.preferred_url ||
+        data.endpoints?.find((e) => e.recommended)?.url ||
+        data.endpoints?.[0]?.url ||
+        '';
+      setSelectedUrl(preferred);
+    } catch (err) {
+      console.error(err);
+      setError(err instanceof Error ? err.message : 'Failed to load pairing endpoints');
+      // Last-resort fallback — still better than nothing, but labeled
+      const fallback = `${window.location.protocol}//${window.location.host}`;
+      setSelectedUrl(fallback);
+      setInfo({
+        port: Number(window.location.port || 3000),
+        protocol: window.location.protocol.replace(':', '') || 'http',
+        preferred_url: fallback,
+        endpoints: [
+          {
+            kind: 'browser',
+            label: 'This browser URL (may not work on phone)',
+            ip: window.location.hostname,
+            url: fallback,
+            recommended: true,
+            reachable_hint: 'Fallback when pairing API is unavailable.',
+          },
+        ],
+        warnings: ['Could not load live network endpoints from the brain.'],
+        listen_hosts: [],
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
 
   useEffect(() => {
-    // Attempt to guess the local LAN IP, or just use window.location.host
-    const protocol = window.location.protocol;
-    const host = window.location.host;
-    
-    // In a real implementation we might fetch the actual LAN IP from the backend
-    // Since the backend knows its bind address.
-    setLocalIpUrl(`${protocol}//${host}`);
+    load();
   }, []);
 
+  const selected = info?.endpoints?.find((e) => e.url === selectedUrl) || null;
+  const isLoopback =
+    selected?.kind === 'loopback' ||
+    selectedUrl.includes('127.0.0.1') ||
+    selectedUrl.includes('localhost');
+
+  const copyUrl = async () => {
+    if (!selectedUrl) return;
+    try {
+      await navigator.clipboard.writeText(selectedUrl);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      setError('Clipboard copy failed — select the URL text manually.');
+    }
+  };
+
   return (
-    <div className="mobile-pairing" style={{ padding: '20px', background: 'var(--bg-secondary)', borderRadius: '12px', border: '1px solid var(--border)' }}>
-      <h3>Mobile Device Pairing</h3>
+    <div
+      className="mobile-pairing"
+      data-testid="mobile-pairing"
+      style={{
+        padding: '20px',
+        background: 'var(--bg-secondary)',
+        borderRadius: '12px',
+        border: '1px solid var(--border)',
+      }}
+    >
+      <h3 style={{ margin: '0 0 8px' }}>Mobile Device Pairing</h3>
       <p style={{ color: 'var(--text-tertiary)', fontSize: '13px', marginBottom: '16px' }}>
-        Scan this QR code with your phone's camera to connect to this Total Recall instance. Ensure your phone is on the same Wi-Fi network.
+        Scan with your phone to open this Total Recall dashboard. Prefer <strong>LAN</strong> on the same
+        Wi‑Fi, or <strong>Tailscale/mesh</strong> if the phone is on your tailnet.
       </p>
-      <div style={{ background: '#fff', padding: '16px', borderRadius: '8px', display: 'inline-block' }}>
-        {localIpUrl ? (
-          <QRCodeSVG value={localIpUrl} size={150} level="H" />
-        ) : (
-          <div style={{ width: 150, height: 150, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-            Loading...
+
+      {loading && (
+        <div data-testid="pairing-loading" style={{ color: 'var(--text-tertiary)', fontSize: 13 }}>
+          Detecting reachable addresses…
+        </div>
+      )}
+
+      {error && (
+        <div
+          role="alert"
+          data-testid="pairing-error"
+          style={{
+            marginBottom: 12,
+            padding: 10,
+            borderRadius: 8,
+            border: '1px solid #ef4444',
+            color: '#ef4444',
+            fontSize: 12,
+          }}
+        >
+          {error}{' '}
+          <button type="button" onClick={() => load()} style={{ marginLeft: 8, cursor: 'pointer' }}>
+            Retry
+          </button>
+        </div>
+      )}
+
+      {!loading && (
+        <div style={{ display: 'flex', gap: 20, flexWrap: 'wrap', alignItems: 'flex-start' }}>
+          <div
+            style={{
+              background: '#fff',
+              padding: '16px',
+              borderRadius: '8px',
+              display: 'inline-block',
+            }}
+            data-testid="pairing-qr"
+          >
+            {selectedUrl ? (
+              <QRCodeSVG value={selectedUrl} size={150} level="M" includeMargin />
+            ) : (
+              <div style={{ width: 150, height: 150 }} />
+            )}
           </div>
-        )}
-      </div>
-      <p style={{ marginTop: '16px', fontSize: '12px', color: 'var(--text-tertiary)' }}>
-        URL: {localIpUrl}
+
+          <div style={{ flex: 1, minWidth: 200 }}>
+            {info && info.endpoints.length > 0 && (
+              <div className="field-col" style={{ marginBottom: 12 }}>
+                <label className="field-label" htmlFor="pairing-endpoint">
+                  Pairing address
+                </label>
+                <select
+                  id="pairing-endpoint"
+                  className="settings-select"
+                  data-testid="pairing-endpoint-select"
+                  value={selectedUrl}
+                  onChange={(e) => setSelectedUrl(e.target.value)}
+                  style={{ width: '100%', marginTop: 4 }}
+                >
+                  {info.endpoints.map((ep) => (
+                    <option key={ep.url} value={ep.url}>
+                      {ep.label}
+                      {ep.recommended ? ' ★' : ''} — {ep.url}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            )}
+
+            <p
+              data-testid="pairing-url"
+              style={{
+                margin: '0 0 8px',
+                fontSize: 12,
+                fontFamily: 'var(--font-mono)',
+                wordBreak: 'break-all',
+                color: 'var(--text-primary)',
+              }}
+            >
+              {selectedUrl || '—'}
+            </p>
+
+            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 12 }}>
+              <button type="button" className="btn-secondary" onClick={copyUrl} data-testid="pairing-copy">
+                {copied ? 'Copied' : 'Copy URL'}
+              </button>
+              <button type="button" className="btn-ghost btn-sm" onClick={() => load()}>
+                Refresh
+              </button>
+            </div>
+
+            {selected && (
+              <p style={{ fontSize: 12, color: 'var(--text-secondary)', margin: '0 0 8px' }}>
+                {selected.reachable_hint}
+              </p>
+            )}
+
+            {isLoopback && (
+              <p
+                data-testid="pairing-loopback-warning"
+                style={{ fontSize: 12, color: '#f59e0b', margin: 0 }}
+              >
+                This address only works on this computer. Choose LAN or Tailscale for your phone.
+              </p>
+            )}
+          </div>
+        </div>
+      )}
+
+      {info?.warnings && info.warnings.length > 0 && (
+        <ul
+          data-testid="pairing-warnings"
+          style={{
+            margin: '16px 0 0',
+            paddingLeft: 18,
+            fontSize: 12,
+            color: '#f59e0b',
+          }}
+        >
+          {info.warnings.map((w) => (
+            <li key={w}>{w}</li>
+          ))}
+        </ul>
+      )}
+
+      <p style={{ marginTop: 16, fontSize: 11, color: 'var(--text-tertiary)' }}>
+        After scanning, log in on the phone (same password/PAT as this dashboard). Listening:{' '}
+        {(info?.listen_hosts || []).join(', ') || 'unknown'}
       </p>
     </div>
   );

package/frontend/src/pages/HealthPage.tsx

@@ -85,23 +85,19 @@ export default function HealthPage() {
     setUpdateError('')
     
     try {
-      await runUpdate()
-      
-      // Keep polling health to check when it goes down and recovers
-      let serverDown = false
-      const pollInterval = setInterval(async () => {
-        try {
-          const res = await fetchHealth()
-          if (serverDown && res.status === 'healthy') {
-            clearInterval(pollInterval)
-            window.location.reload()
-          }
-        } catch {
-          // Connection failed = server is offline / restarting
-          serverDown = true
-        }
-      }, 2000)
+      const result = await runUpdate()
+      if (!result.success) {
+        setUpdateError(result.message || 'Package auto-update reported failures')
+        setIsUpdating(false)
+        return
+      }
 
+      // Multi-repo npm update does not reboot this host — show success, optional reload
+      setIsUpdating(false)
+      setCheckMessage(
+        result.message ||
+          'Registered projects updated. Restart local daemon/server if you need new code in this process.',
+      )
     } catch (e) {
       setUpdateError((e as Error).message)
       setIsUpdating(false)

package/frontend/src/pages/NotificationsPage.tsx

@@ -101,17 +101,20 @@ export function NotificationsPage() {
   }
 
   return (
-    <div className="page-container notifications-page">
+    <div className="page-container notifications-page" data-testid="notifications-page">
       <div className="page-header">
         <h1>Notifications</h1>
-        <button onClick={() => setShowModal(true)} className="btn btn-primary">
+        <button onClick={() => setShowModal(true)} className="btn btn-primary" data-testid="add-rule-btn">
           Add Rule
         </button>
       </div>
 
       {error && (
-        <div className="alert alert-error" style={{ marginBottom: '24px' }}>
+        <div className="alert alert-error" role="alert" data-testid="notifications-error" style={{ marginBottom: '24px' }}>
           {error}
+          <button type="button" className="btn btn-ghost btn-sm" style={{ marginLeft: 12 }} onClick={() => loadData()}>
+            Retry
+          </button>
         </div>
       )}
       {success && (