sync: kernel v0.8.0 → template

brain-ui/src/App.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect, Suspense, lazy } from 'react'
+import Dashboard from './components/Dashboard'
 import WorkflowBoard from './components/WorkflowBoard'
 import SecretsZone, { MOCK_SECTIONS } from './components/SecretsZone'
-import WorkflowBuilder from './components/WorkflowBuilder'
 import GatesDrawer from './components/GatesDrawer'
 import GateDrawer from './components/GateDrawer'
 import LogDrawer from './components/LogDrawer'
@@ -16,14 +16,15 @@ import { useTier } from './hooks/useTier'
 
 const CosmosView = lazy(() => import('./components/cosmos/CosmosView'))
 const WorkspaceView = lazy(() => import('./components/workspace/WorkspaceView'))
-type ActiveView = 'workflows' | 'builder' | 'secrets' | 'infra' | 'cosmos' | 'workspace'
+const DocsView = lazy(() => import('./components/DocsView'))
+
+type ActiveView = 'dashboard' | 'cosmos' | 'workflows' | 'secrets' | 'infra' | 'workspace'
 
 interface NavItem {
   id: ActiveView
   icon: string
   label: string
   separator?: boolean
-  disabled?: boolean
 }
 
 interface PendingGate {
@@ -33,11 +34,11 @@ interface PendingGate {
 }
 
 const NAV_ITEMS: NavItem[] = [
-  { id: 'workflows', icon: '🔀', label: 'Workflows', disabled: true },
-  { id: 'builder',   icon: '⚡', label: 'Nouveau',   disabled: true },
-  { id: 'secrets',   icon: '🔑', label: 'Secrets',   disabled: true },
-  { id: 'infra',     icon: '🖥️', label: 'Infra',     disabled: true },
-  { id: 'cosmos',    icon: '🌌', label: 'Cosmos', separator: true },
+  { id: 'dashboard', icon: '⬡',  label: 'Dashboard' },
+  { id: 'cosmos',    icon: '🌌', label: 'Cosmos'    },
+  { id: 'workflows', icon: '🔀', label: 'Workflows', separator: true },
+  { id: 'infra',     icon: '🖥️', label: 'Infra'     },
+  { id: 'secrets',   icon: '🔑', label: 'Secrets'   },
 ]
 
 function AppInner() {
@@ -46,10 +47,9 @@ function AppInner() {
   // Detect URL path for direct routing (/ui/docs → docs view)
   const initialView = (): ActiveView => {
     const path = window.location.pathname
-    // /docs → redirige vers docs.html (page standalone)
     if (path.includes('/cosmos')) return 'cosmos'
     if (path.includes('/workspace')) return 'workspace'
-    return 'workflows'
+    return 'dashboard'
   }
   const [activeView, setActiveView] = useState<ActiveView>(initialView)
   const [pendingGate, setPendingGate] = useState<PendingGate | null>(null)
@@ -146,19 +146,10 @@ function AppInner() {
                   <div className="mx-3 my-1" style={{ borderTop: '1px solid #2a2a2a' }} />
                 )}
                 <button
-                  onClick={() => !item.disabled && handleViewChange(item.id)}
+                  onClick={() => handleViewChange(item.id)}
                   className="flex items-center gap-3 px-3 py-2 rounded text-sm font-medium text-left transition-colors w-full"
-                  title={item.disabled ? 'Disponible avec brain boot' : undefined}
                   style={
-                    item.disabled
-                      ? {
-                          color: '#374151',
-                          borderLeft: '2px solid transparent',
-                          paddingLeft: 10,
-                          cursor: 'default',
-                          opacity: 0.5,
-                        }
-                      : isActive
+                    isActive
                       ? {
                           background: 'rgba(99,102,241,0.2)',
                           color: '#6366f1',
@@ -174,9 +165,6 @@ function AppInner() {
                 >
                   <span className="text-base leading-none">{item.icon}</span>
                   <span>{item.label}</span>
-                  {item.disabled && (
-                    <span style={{ marginLeft: 'auto', fontSize: 8, color: '#374151', fontFamily: 'monospace' }}>soon</span>
-                  )}
                 </button>
               </div>
             )
@@ -244,6 +232,9 @@ function AppInner() {
 
       {/* Main content */}
       <main className="flex-1 overflow-hidden flex flex-col">
+        {activeView === 'dashboard' && (
+          <Dashboard />
+        )}
         {activeView === 'workflows' && (
           <WorkflowBoard
             workflows={workflows}
@@ -251,9 +242,6 @@ function AppInner() {
             onWorkflowClick={(wfId) => setLogsProject(wfId)}
           />
         )}
-        {activeView === 'builder' && (
-          <WorkflowBuilder />
-        )}
         {activeView === 'secrets' && (
           <TierGate feature="secrets" hasFeature={hasFeature}>
             <SecretsZone sections={MOCK_SECTIONS} onSecretSave={handleSecretSave} />

brain-ui/src/components/Dashboard.tsx

@@ -0,0 +1,404 @@
+import { useState, useEffect, useCallback } from 'react'
+
+const API = import.meta.env.VITE_BRAIN_API ?? ''
+
+interface SearchResult {
+  score: number
+  title: string
+  filepath: string
+  excerpt: string
+}
+
+interface HealthData {
+  status: string
+  indexed: number
+  uptime: number
+}
+
+interface ClaimData {
+  sess_id: string
+  type: string
+  scope: string
+  status: string
+  opened_at: string
+  closed_at: string | null
+}
+
+interface AgentData {
+  id: string
+  label: string
+  tier: string
+  status: string
+  scope: string
+}
+
+interface DocData {
+  name: string
+  label: string
+  group: string
+}
+
+function formatUptime(seconds: number): string {
+  if (seconds < 60) return `${seconds}s`
+  if (seconds < 3600) return `${Math.floor(seconds / 60)}min`
+  if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ${Math.floor((seconds % 3600) / 60)}min`
+  return `${Math.floor(seconds / 86400)}j ${Math.floor((seconds % 86400) / 3600)}h`
+}
+
+function formatTimeAgo(dateStr: string): string {
+  const diff = Date.now() - new Date(dateStr).getTime()
+  const mins = Math.floor(diff / 60000)
+  if (mins < 1) return "à l'instant"
+  if (mins < 60) return `il y a ${mins}min`
+  const hours = Math.floor(mins / 60)
+  if (hours < 24) return `il y a ${hours}h`
+  const days = Math.floor(hours / 24)
+  return `il y a ${days}j`
+}
+
+function StatCard({ label, value, sub, color }: { label: string; value: string | number; sub?: string; color?: string }) {
+  return (
+    <div style={{
+      background: '#141414', border: '1px solid #2a2a2a', borderRadius: 8,
+      padding: '16px 20px', flex: '1 1 0', minWidth: 140,
+    }}>
+      <div style={{ fontSize: 11, color: '#6b7280', fontFamily: 'monospace', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+        {label}
+      </div>
+      <div style={{ fontSize: 28, fontWeight: 700, color: color ?? '#e5e7eb', marginTop: 4 }}>
+        {value}
+      </div>
+      {sub && (
+        <div style={{ fontSize: 11, color: '#4b5563', marginTop: 2, fontFamily: 'monospace' }}>
+          {sub}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function SessionRow({ claim }: { claim: ClaimData }) {
+  const isOpen = claim.status === 'open'
+  return (
+    <div style={{
+      display: 'flex', alignItems: 'center', gap: 12,
+      padding: '10px 16px', borderBottom: '1px solid #1e1e1e',
+    }}>
+      <span style={{
+        width: 8, height: 8, borderRadius: '50%', flexShrink: 0,
+        background: isOpen ? '#22c55e' : '#4b5563',
+      }} />
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <div style={{ fontSize: 13, color: '#e5e7eb', fontFamily: 'monospace' }}>
+          {claim.sess_id}
+        </div>
+        <div style={{ fontSize: 11, color: '#6b7280', marginTop: 2 }}>
+          {claim.type} — {claim.scope}
+        </div>
+      </div>
+      <div style={{ fontSize: 11, color: '#4b5563', fontFamily: 'monospace', flexShrink: 0 }}>
+        {formatTimeAgo(claim.opened_at)}
+      </div>
+    </div>
+  )
+}
+
+function FileViewer({ path, onClose }: { path: string; onClose: () => void }) {
+  const [content, setContent] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    fetch(`${API}/brain/${path}`)
+      .then(r => { if (!r.ok) throw new Error(`${r.status}`); return r.json() })
+      .then(d => setContent(d.content))
+      .catch(e => setError(`Impossible de charger ${path}: ${e.message}`))
+  }, [path])
+
+  return (
+    <div style={{
+      position: 'fixed', inset: 0, zIndex: 50,
+      background: 'rgba(0,0,0,0.7)', display: 'flex', alignItems: 'center', justifyContent: 'center',
+    }} onClick={onClose}>
+      <div
+        style={{
+          background: '#141414', border: '1px solid #2a2a2a', borderRadius: 12,
+          width: '70%', maxWidth: 800, maxHeight: '80vh',
+          display: 'flex', flexDirection: 'column', overflow: 'hidden',
+        }}
+        onClick={e => e.stopPropagation()}
+      >
+        <div style={{
+          padding: '12px 20px', borderBottom: '1px solid #2a2a2a',
+          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+        }}>
+          <span style={{ fontSize: 13, fontFamily: 'monospace', color: '#818cf8' }}>{path}</span>
+          <button
+            onClick={onClose}
+            style={{ background: 'none', border: 'none', color: '#6b7280', cursor: 'pointer', fontSize: 18 }}
+          >
+            ×
+          </button>
+        </div>
+        <div style={{ padding: '16px 20px', overflowY: 'auto', flex: 1 }}>
+          {error && <div style={{ color: '#ef4444', fontSize: 13 }}>{error}</div>}
+          {!content && !error && <div style={{ color: '#4b5563', fontSize: 13, fontFamily: 'monospace' }}>Chargement...</div>}
+          {content && (
+            <pre style={{
+              fontSize: 13, lineHeight: 1.6, color: '#d1d5db',
+              fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
+              whiteSpace: 'pre-wrap', wordBreak: 'break-word', margin: 0,
+            }}>
+              {content}
+            </pre>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function SearchBar() {
+  const [query, setQuery] = useState('')
+  const [results, setResults] = useState<SearchResult[]>([])
+  const [searching, setSearching] = useState(false)
+  const [searched, setSearched] = useState(false)
+  const [viewingFile, setViewingFile] = useState<string | null>(null)
+
+  const search = useCallback(async (q: string) => {
+    if (q.trim().length < 2) { setResults([]); setSearched(false); return }
+    setSearching(true)
+    try {
+      const res = await fetch(`${API}/search?q=${encodeURIComponent(q)}&top=6`)
+      if (!res.ok) throw new Error()
+      const data = await res.json()
+      setResults(data.results ?? [])
+      setSearched(true)
+    } catch {
+      setResults([])
+    } finally {
+      setSearching(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    const timer = setTimeout(() => { if (query.trim().length >= 2) search(query) }, 400)
+    return () => clearTimeout(timer)
+  }, [query, search])
+
+  return (
+    <div style={{ marginBottom: 24 }}>
+      <div style={{
+        display: 'flex', alignItems: 'center', gap: 8,
+        background: '#141414', border: '1px solid #2a2a2a', borderRadius: 8,
+        padding: '8px 16px',
+      }}>
+        <span style={{ color: '#4b5563', fontSize: 16 }}>🔍</span>
+        <input
+          type="text"
+          placeholder="Rechercher dans le brain..."
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          onKeyDown={(e) => { if (e.key === 'Enter') search(query) }}
+          style={{
+            flex: 1, background: 'transparent', border: 'none', outline: 'none',
+            color: '#e5e7eb', fontSize: 14, fontFamily: 'inherit',
+          }}
+        />
+        {searching && <span style={{ color: '#4b5563', fontSize: 12, fontFamily: 'monospace' }}>...</span>}
+      </div>
+      {searched && results.length > 0 && (
+        <div style={{
+          marginTop: 8, background: '#141414', border: '1px solid #2a2a2a',
+          borderRadius: 8, overflow: 'hidden',
+        }}>
+          {results.map((r, i) => (
+            <div key={i} style={{
+              padding: '12px 16px', borderBottom: i < results.length - 1 ? '1px solid #1e1e1e' : 'none',
+              cursor: 'pointer', transition: 'background 0.15s',
+            }}
+            onClick={() => setViewingFile(r.filepath)}
+            onMouseEnter={e => (e.currentTarget.style.background = '#1a1a1a')}
+            onMouseLeave={e => (e.currentTarget.style.background = 'transparent')}
+            >
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
+                <span style={{ fontSize: 12, fontFamily: 'monospace', color: '#818cf8' }}>
+                  {r.filepath}
+                </span>
+                <span style={{
+                  fontSize: 10, fontFamily: 'monospace', color: '#4b5563',
+                  marginLeft: 'auto',
+                }}>
+                  {(r.score * 100).toFixed(0)}%
+                </span>
+              </div>
+              <div style={{ fontSize: 13, color: '#9ca3af', lineHeight: 1.5 }}>
+                {r.excerpt.slice(0, 200)}{r.excerpt.length > 200 ? '...' : ''}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+      {searched && results.length === 0 && !searching && (
+        <div style={{ marginTop: 8, fontSize: 13, color: '#4b5563', fontFamily: 'monospace', padding: '8px 16px' }}>
+          Aucun résultat pour "{query}"
+        </div>
+      )}
+      {viewingFile && <FileViewer path={viewingFile} onClose={() => setViewingFile(null)} />}
+    </div>
+  )
+}
+
+export default function Dashboard() {
+  const [health, setHealth] = useState<HealthData | null>(null)
+  const [claims, setClaims] = useState<ClaimData[]>([])
+  const [agents, setAgents] = useState<AgentData[]>([])
+  const [docs, setDocs] = useState<DocData[]>([])
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    Promise.allSettled([
+      fetch(`${API}/health`).then(r => r.json()),
+      fetch(`${API}/bsi/claims`).then(r => r.ok ? r.json() : []),
+      fetch(`${API}/agents`).then(r => r.ok ? r.json() : []),
+      fetch(`${API}/docs`).then(r => r.ok ? r.json() : { docs: [] }),
+    ]).then(([h, c, a, d]) => {
+      if (h.status === 'fulfilled') setHealth(h.value)
+      if (c.status === 'fulfilled') setClaims(Array.isArray(c.value) ? c.value : [])
+      if (a.status === 'fulfilled') setAgents(Array.isArray(a.value) ? a.value : [])
+      if (d.status === 'fulfilled') setDocs(d.value?.docs ?? [])
+    }).catch(() => setError('Impossible de charger les données'))
+  }, [])
+
+  const openClaims = claims.filter(c => c.status === 'open')
+  const recentClaims = claims.slice(0, 8)
+  const agentsByTier = agents.reduce<Record<string, number>>((acc, a) => {
+    acc[a.tier] = (acc[a.tier] || 0) + 1
+    return acc
+  }, {})
+
+  return (
+    <div style={{ padding: '2rem 3rem', overflowY: 'auto', height: '100%' }}>
+      {/* Header */}
+      <div style={{ marginBottom: 24 }}>
+        <h1 style={{ fontSize: 20, fontWeight: 700, color: '#fff', margin: 0 }}>
+          Dashboard
+        </h1>
+        <p style={{ fontSize: 12, color: '#4b5563', fontFamily: 'monospace', marginTop: 4 }}>
+          {health ? `brain-engine up — ${formatUptime(health.uptime)}` : 'connexion...'}
+        </p>
+      </div>
+
+      {error && (
+        <div style={{ color: '#ef4444', fontSize: 13, marginBottom: 16 }}>{error}</div>
+      )}
+
+      {/* Search */}
+      <SearchBar />
+
+      {/* Stats row */}
+      <div style={{ display: 'flex', gap: 12, marginBottom: 24, flexWrap: 'wrap' }}>
+        <StatCard
+          label="Embeddings"
+          value={health?.indexed?.toLocaleString() ?? '—'}
+          sub="chunks indexés"
+          color="#818cf8"
+        />
+        <StatCard
+          label="Agents"
+          value={agents.length || '—'}
+          sub={Object.entries(agentsByTier).map(([t, n]) => `${n} ${t}`).join(' · ') || undefined}
+          color="#22c55e"
+        />
+        <StatCard
+          label="Docs"
+          value={docs.length || '—'}
+          sub="pages live"
+          color="#f59e0b"
+        />
+        <StatCard
+          label="Sessions"
+          value={openClaims.length}
+          sub={openClaims.length > 0 ? 'actives' : 'aucune active'}
+          color={openClaims.length > 0 ? '#22c55e' : '#6b7280'}
+        />
+      </div>
+
+      {/* Two columns */}
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
+        {/* Recent sessions */}
+        <div style={{ background: '#141414', border: '1px solid #2a2a2a', borderRadius: 8, overflow: 'hidden' }}>
+          <div style={{
+            padding: '12px 16px', borderBottom: '1px solid #2a2a2a',
+            fontSize: 12, fontFamily: 'monospace', color: '#6b7280',
+            textTransform: 'uppercase', letterSpacing: '0.05em',
+          }}>
+            Sessions récentes
+          </div>
+          {recentClaims.length === 0 ? (
+            <div style={{ padding: 16, fontSize: 13, color: '#4b5563' }}>
+              Aucune session enregistrée
+            </div>
+          ) : (
+            recentClaims.map(c => <SessionRow key={c.sess_id} claim={c} />)
+          )}
+        </div>
+
+        {/* Quick links */}
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+          {/* Agents by scope */}
+          <div style={{ background: '#141414', border: '1px solid #2a2a2a', borderRadius: 8, overflow: 'hidden' }}>
+            <div style={{
+              padding: '12px 16px', borderBottom: '1px solid #2a2a2a',
+              fontSize: 12, fontFamily: 'monospace', color: '#6b7280',
+              textTransform: 'uppercase', letterSpacing: '0.05em',
+            }}>
+              Agents par scope
+            </div>
+            <div style={{ padding: 16, display: 'flex', gap: 16, flexWrap: 'wrap' }}>
+              {Object.entries(
+                agents.reduce<Record<string, number>>((acc, a) => {
+                  acc[a.scope || 'unknown'] = (acc[a.scope || 'unknown'] || 0) + 1
+                  return acc
+                }, {})
+              ).map(([scope, count]) => (
+                <div key={scope} style={{ textAlign: 'center' }}>
+                  <div style={{ fontSize: 20, fontWeight: 700, color: '#e5e7eb' }}>{count}</div>
+                  <div style={{ fontSize: 10, color: '#6b7280', fontFamily: 'monospace' }}>{scope}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Docs groups */}
+          <div style={{ background: '#141414', border: '1px solid #2a2a2a', borderRadius: 8, overflow: 'hidden' }}>
+            <div style={{
+              padding: '12px 16px', borderBottom: '1px solid #2a2a2a',
+              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+            }}>
+              <span style={{ fontSize: 12, fontFamily: 'monospace', color: '#6b7280', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+                Documentation
+              </span>
+              <a href="/docs" target="_blank" rel="noopener noreferrer"
+                style={{ fontSize: 11, color: '#818cf8', textDecoration: 'none', fontFamily: 'monospace' }}>
+                Ouvrir ↗
+              </a>
+            </div>
+            <div style={{ padding: 16, display: 'flex', gap: 16, flexWrap: 'wrap' }}>
+              {Object.entries(
+                docs.reduce<Record<string, number>>((acc, d) => {
+                  acc[d.group || 'Autres'] = (acc[d.group || 'Autres'] || 0) + 1
+                  return acc
+                }, {})
+              ).map(([group, count]) => (
+                <div key={group} style={{ textAlign: 'center' }}>
+                  <div style={{ fontSize: 20, fontWeight: 700, color: '#e5e7eb' }}>{count}</div>
+                  <div style={{ fontSize: 10, color: '#6b7280', fontFamily: 'monospace' }}>{group}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

brain-ui/src/components/DocsView.tsx

@@ -212,7 +212,14 @@ export default function DocsView() {
             return <article className="docs-markdown"><TierSingle tierName={tierName} /></article>
           }
           if (liveMode && activeDoc === 'agents') {
-            return <article className="docs-markdown"><AgentCatalog /></article>
+            return (
+              <article className="docs-markdown">
+                {!loading && content && (
+                  <ReactMarkdown components={mdComponents}>{content}</ReactMarkdown>
+                )}
+                <AgentCatalog />
+              </article>
+            )
           }
 
           // Mode standard — markdown