v26: live Projects + Sentinel pages, updated api.js

website/src/lib/api.js

@@ -1,3 +1,7 @@
+// website/src/lib/api.js
+// All API calls proxied through CF API Worker → Brain
+// Worker URL: https://ultron-api.ghostdriveg1.workers.dev
+
 const API_BASE = import.meta.env.VITE_API_URL || 'https://ultron-api.ghostdriveg1.workers.dev';
 const AUTH_TOKEN = import.meta.env.VITE_AUTH_TOKEN || '';
 
@@ -6,6 +10,7 @@ async function request(path, options = {}) {
     ...options,
     headers: {
       'Content-Type': 'application/json',
+      'X-Ultron-Token': AUTH_TOKEN,
       Authorization: `Bearer ${AUTH_TOKEN}`,
       ...options.headers,
     },
@@ -15,31 +20,38 @@ async function request(path, options = {}) {
 }
 
 export const api = {
-  health: () => request('/api/health'),
+  // ── Brain health (includes pool + lifecycle + promoter status) ────────
+  health: () => request('/health'),
 
+  // ── Infer (direct to brain) ───────────────────────────────────────────
   infer: (payload) =>
-    request('/api/infer', { method: 'POST', body: JSON.stringify(payload) }),
+    request('/infer', { method: 'POST', body: JSON.stringify(payload) }),
 
+  // ── Key pool ──────────────────────────────────────────────────────────
   keys: {
-    list: () => request('/api/keys'),
-    add: (key) => request('/api/keys', { method: 'POST', body: JSON.stringify(key) }),
-    remove: (keyId) => request(`/api/keys/${keyId}`, { method: 'DELETE' }),
+    status: () => request('/keys'),
   },
 
+  // ── Sentinel ──────────────────────────────────────────────────────────
   sentinel: {
-    trigger: (type) =>
-      request('/api/sentinel/event', {
+    trigger: (eventType, payload = {}) =>
+      request('/sentinel/event', {
         method: 'POST',
-        body: JSON.stringify({ type, source: 'website' }),
+        body: JSON.stringify({
+          event_type: eventType,
+          payload: { source: 'website', ...payload },
+        }),
       }),
-    reports: () => request('/api/sentinel/reports'),
   },
 
+  // ── Memory ────────────────────────────────────────────────────────────
   memory: {
-    stm: (channelId) => request(`/api/memory/stm/${channelId}`),
+    stm: (channelId) => request(`/memory/stm/${channelId}`),
   },
 
-  projects: {
-    list: () => request('/api/projects'),
+  // ── R&D loop history ─────────────────────────────────────────────────
+  rd: {
+    history: (userId, limit = 30) =>
+      request(`/rd/history/${userId}?limit=${limit}`),
   },
 };

website/src/pages/Projects.jsx

@@ -1,30 +1,255 @@
+// website/src/pages/Projects.jsx
+// R&D loop history + improvement timeline
+// Data source: GET /rd/history/{user_id} → rd_loop.py
+
+import { useState, useEffect, useCallback } from 'react';
+import { api } from '../lib/api';
+import { relativeTime } from '../lib/utils';
 import Card from '../components/Card';
+import Badge from '../components/Badge';
+
+const GHOST_UID = '1356180323058057326';
+
+const STATUS_VARIANT = {
+  implemented: 'green',
+  proposed: 'yellow',
+  rejected: 'red',
+  pending: 'gray',
+};
+
+const STATUS_ICON = {
+  implemented: '✓',
+  proposed: '◌',
+  rejected: '✗',
+  pending: '◷',
+};
+
+function ImprovementRow({ item }) {
+  const [expanded, setExpanded] = useState(false);
+  const status = item.status || 'pending';
+  const ts = item.implemented_at || item.proposed_at || item.created_at;
+
+  return (
+    <div className="border-b border-border last:border-0">
+      <button
+        onClick={() => setExpanded((v) => !v)}
+        className="w-full flex items-start gap-4 py-3.5 text-left hover:bg-bg/50 transition-colors px-5"
+      >
+        <span
+          className={`mt-0.5 text-xs font-mono flex-shrink-0 ${
+            status === 'implemented'
+              ? 'text-status-green'
+              : status === 'rejected'
+              ? 'text-status-red'
+              : 'text-status-yellow'
+          }`}
+        >
+          {STATUS_ICON[status] || '◌'}
+        </span>
+        <div className="flex-1 min-w-0">
+          <p className="text-sm font-medium text-ink leading-snug">
+            {item.title || item.summary || 'Untitled improvement'}
+          </p>
+          <p className="text-xs text-muted mt-0.5">
+            {item.category || 'general'} · {ts ? relativeTime(ts) : '—'}
+          </p>
+        </div>
+        <Badge variant={STATUS_VARIANT[status] || 'gray'}>{status}</Badge>
+        <span className="text-xs text-muted ml-2 mt-0.5">{expanded ? '▲' : '▼'}</span>
+      </button>
+      {expanded && (
+        <div className="px-14 pb-4 space-y-2">
+          {item.description && (
+            <p className="text-xs text-muted leading-relaxed">{item.description}</p>
+          )}
+          {item.files_changed && item.files_changed.length > 0 && (
+            <div className="flex flex-wrap gap-1.5">
+              {item.files_changed.map((f) => (
+                <span
+                  key={f}
+                  className="font-mono text-[10px] bg-bg border border-border px-2 py-0.5 rounded"
+                >
+                  {f}
+                </span>
+              ))}
+            </div>
+          )}
+          {item.sentinel_verdict && (
+            <p className="text-xs text-muted border-l-2 border-border pl-3 italic">
+              Sentinel: {item.sentinel_verdict}
+            </p>
+          )}
+          {item.council_synthesis && (
+            <p className="text-xs text-muted border-l-2 border-status-blue pl-3">
+              Council: {item.council_synthesis}
+            </p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function RdStatBar({ label, value, total, color }) {
+  const pct = total > 0 ? Math.round((value / total) * 100) : 0;
+  return (
+    <div className="space-y-1.5">
+      <div className="flex justify-between text-[11px]">
+        <span className="text-muted font-mono">{label}</span>
+        <span className="font-mono text-ink">
+          {value}
+          <span className="text-muted">/{total}</span>
+        </span>
+      </div>
+      <div className="h-1 bg-bg rounded-full overflow-hidden">
+        <div
+          className="h-full rounded-full transition-all duration-700"
+          style={{ width: `${pct}%`, backgroundColor: color }}
+        />
+      </div>
+    </div>
+  );
+}
 
 export default function Projects() {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [lastFetch, setLastFetch] = useState(null);
+  const [filter, setFilter] = useState('all');
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await api.rd.history(GHOST_UID, 50);
+      setData(res);
+      setLastFetch(new Date());
+    } catch (e) {
+      setError(e.message);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  const improvements = data?.improvements ?? [];
+  const rdState = data?.rd_state ?? null;
+  const total = improvements.length;
+  const implemented = improvements.filter((i) => i.status === 'implemented').length;
+  const proposed = improvements.filter((i) => i.status === 'proposed').length;
+  const rejected = improvements.filter((i) => i.status === 'rejected').length;
+
+  const filtered =
+    filter === 'all'
+      ? improvements
+      : improvements.filter((i) => (i.status || 'pending') === filter);
+
   return (
     <div className="space-y-6">
-      <div>
-        <h1 className="text-2xl font-bold tracking-tight">Projects</h1>
-        <p className="text-sm text-muted mt-0.5">Every task, deadline, and autonomous R&D session logged here.</p>
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold tracking-tight">Projects</h1>
+          <p className="text-sm text-muted mt-0.5">
+            {lastFetch ? `Refreshed ${relativeTime(lastFetch)}` : 'Loading R&D history...'}
+          </p>
+        </div>
+        <button
+          onClick={load}
+          disabled={loading}
+          className="text-xs font-mono text-muted hover:text-ink border border-border px-3 py-1.5 rounded transition-colors disabled:opacity-40"
+        >
+          {loading ? '...' : '↻ Refresh'}
+        </button>
       </div>
 
-      <Card title="Project Timeline">
-        <div className="px-5 py-10 text-center">
-          <p className="text-3xl mb-4 text-border">◷</p>
-          <p className="text-sm font-medium text-ink">No projects yet</p>
-          <p className="text-xs text-muted mt-1">Give Ultron a task with a deadline via the brain /infer endpoint.</p>
-          <p className="text-xs text-muted mt-3 max-w-sm mx-auto leading-relaxed">
-            Each project records: what was built by deadline, autonomous R&D improvements
-            made after completion, and Sentinel's analysis.
-          </p>
+      {error && (
+        <div className="border border-red-200 bg-red-50 text-status-red text-xs px-4 py-3 rounded-lg font-mono">
+          ✗ {error} — RDLoop requires Redis + Brain running.
         </div>
-      </Card>
+      )}
 
-      <Card title="Autonomous R&D Log">
-        <div className="px-5 py-6 text-center">
-          <p className="text-xs text-muted font-mono">Post-deadline improvement sessions will appear here.</p>
-          <p className="text-xs text-muted mt-1">Powered by rd_loop.py + EverMemOS Foresight signals.</p>
+      <div className="grid grid-cols-3 gap-4">
+        <div className="bg-surface border border-border rounded-lg p-5">
+          <p className="text-[11px] text-muted font-mono uppercase tracking-widest mb-3">Progress</p>
+          <div className="space-y-3">
+            <RdStatBar label="implemented" value={implemented} total={total || 1} color="#16A34A" />
+            <RdStatBar label="proposed" value={proposed} total={total || 1} color="#CA8A04" />
+            <RdStatBar label="rejected" value={rejected} total={total || 1} color="#DC2626" />
+          </div>
         </div>
+        <div className="bg-surface border border-border rounded-lg p-5 col-span-2">
+          <p className="text-[11px] text-muted font-mono uppercase tracking-widest mb-3">R&D State</p>
+          {rdState ? (
+            <div className="grid grid-cols-2 gap-x-8 gap-y-2">
+              {[
+                ['Loop status', rdState.status || 'idle'],
+                ['Proposals total', rdState.total_proposals ?? '—'],
+                ['Accept rate', rdState.accept_rate ? `${Math.round(rdState.accept_rate * 100)}%` : '—'],
+                ['Last run', rdState.last_run_at ? relativeTime(rdState.last_run_at) : 'never'],
+                ['Active goal', rdState.active_goal || 'none'],
+                ['Foresight signals', rdState.foresight_signal_count ?? '—'],
+              ].map(([k, v]) => (
+                <div key={k} className="flex gap-3">
+                  <span className="text-[11px] font-mono text-muted w-32 flex-shrink-0">{k}</span>
+                  <span className="text-[11px] font-mono text-ink truncate">{String(v)}</span>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <p className="text-xs text-muted font-mono">
+              {loading ? 'Loading...' : 'No RD state — RDLoop requires Redis.'}
+            </p>
+          )}
+        </div>
+      </div>
+
+      <div className="flex gap-2">
+        {['all', 'implemented', 'proposed', 'rejected'].map((f) => (
+          <button
+            key={f}
+            onClick={() => setFilter(f)}
+            className={`text-xs font-mono px-3 py-1.5 rounded border transition-colors ${
+              filter === f
+                ? 'bg-ink text-white border-ink'
+                : 'border-border text-muted hover:text-ink hover:border-ink/30'
+            }`}
+          >
+            {f}
+            <span className="ml-1.5 opacity-60">
+              {f === 'all' ? total : f === 'implemented' ? implemented : f === 'proposed' ? proposed : rejected}
+            </span>
+          </button>
+        ))}
+      </div>
+
+      <Card title="Autonomous R&D Log">
+        {loading ? (
+          <div className="px-5 py-10 text-center">
+            <p className="text-xs text-muted font-mono">Loading improvements...</p>
+          </div>
+        ) : filtered.length === 0 ? (
+          <div className="px-5 py-10 text-center space-y-2">
+            <p className="text-3xl text-border">◷</p>
+            <p className="text-sm font-medium text-ink">
+              {filter === 'all' ? 'No improvements yet' : `No ${filter} improvements`}
+            </p>
+            <p className="text-xs text-muted max-w-sm mx-auto leading-relaxed">
+              {filter === 'all'
+                ? 'Give Ultron a task. After completion the R&D loop proposes autonomous improvements — Sentinel ranks, Council debates, best ones get implemented.'
+                : 'Switch to "all" to see everything.'}
+            </p>
+          </div>
+        ) : (
+          <div>
+            {filtered.map((item, i) => (
+              <ImprovementRow key={item.id || i} item={item} />
+            ))}
+          </div>
+        )}
       </Card>
     </div>
   );

website/src/pages/Sentinel.jsx

@@ -1,13 +1,95 @@
-import { useState } from 'react';
+// website/src/pages/Sentinel.jsx
+// God Layer dashboard: SpacePromoter live topology + audit trigger
+// Data: GET /health (promoter field, refreshed every 30s)
+
+import { useState, useEffect, useCallback } from 'react';
 import { api } from '../lib/api';
+import { relativeTime } from '../lib/utils';
 import Card from '../components/Card';
 import Badge from '../components/Badge';
 
+function NodeCard({ name, role, url, isAlive, lastStatus, consecutiveFailures, consecutiveSuccesses, lastCheckAt }) {
+  const ok = lastStatus === 'ok';
+  const unknown = lastStatus === 'unknown';
+  return (
+    <div className="bg-surface border border-border rounded-lg p-5">
+      <div className="flex items-center justify-between mb-3">
+        <div className="flex items-center gap-2">
+          <span
+            className={`w-2 h-2 rounded-full flex-shrink-0 ${
+              unknown ? 'bg-border' : ok ? 'bg-status-green' : 'bg-status-red'
+            }`}
+          />
+          <span className="text-xs font-mono font-medium text-ink">{name}</span>
+        </div>
+        <Badge variant={role === 'primary' ? 'green' : role === 'backup' ? 'yellow' : 'gray'}>
+          {role}
+        </Badge>
+      </div>
+      <p className="text-[11px] font-mono text-muted truncate mb-3" title={url}>
+        {url || '—'}
+      </p>
+      <div className="grid grid-cols-2 gap-x-4 gap-y-1.5">
+        <div>
+          <p className="text-[10px] text-muted font-mono">STATUS</p>
+          <p className={`text-xs font-mono font-medium ${
+            ok ? 'text-status-green' : unknown ? 'text-muted' : 'text-status-red'
+          }`}>
+            {lastStatus}
+          </p>
+        </div>
+        <div>
+          <p className="text-[10px] text-muted font-mono">ALIVE</p>
+          <p className={`text-xs font-mono font-medium ${isAlive ? 'text-status-green' : 'text-status-red'}`}>
+            {isAlive ? 'yes' : 'no'}
+          </p>
+        </div>
+        <div>
+          <p className="text-[10px] text-muted font-mono">FAILS</p>
+          <p className={`text-xs font-mono font-medium ${consecutiveFailures > 0 ? 'text-status-red' : 'text-ink'}`}>
+            {consecutiveFailures}
+          </p>
+        </div>
+        <div>
+          <p className="text-[10px] text-muted font-mono">OK STREAK</p>
+          <p className="text-xs font-mono font-medium text-ink">{consecutiveSuccesses}</p>
+        </div>
+      </div>
+      {lastCheckAt && (
+        <p className="text-[10px] text-muted font-mono mt-3">Checked {relativeTime(lastCheckAt)}</p>
+      )}
+    </div>
+  );
+}
+
 export default function Sentinel() {
+  const [health, setHealth] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [lastFetch, setLastFetch] = useState(null);
   const [triggering, setTriggering] = useState(false);
   const [triggered, setTriggered] = useState(false);
   const [triggerError, setTriggerError] = useState(null);
 
+  const fetchHealth = useCallback(async () => {
+    try {
+      const data = await api.health();
+      setHealth(data);
+      setLastFetch(new Date());
+      setError(null);
+    } catch (e) {
+      setError(e.message);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchHealth();
+    const iv = setInterval(fetchHealth, 30_000);
+    return () => clearInterval(iv);
+  }, [fetchHealth]);
+
   const triggerAudit = async () => {
     setTriggering(true);
     setTriggerError(null);
@@ -22,52 +104,119 @@ export default function Sentinel() {
     }
   };
 
+  const promoter = health?.promoter ?? null;
+  const promoterActive = health?.promoter_active ?? false;
+  const sentinelActive = health?.sentinel_active ?? false;
+  const nodes = promoter?.nodes ? Object.values(promoter.nodes) : [];
+  const failoverCount = promoter?.failover_count ?? 0;
+  const inDegraded = promoter?.in_degraded_state ?? false;
+
   return (
     <div className="space-y-6">
       <div className="flex items-center justify-between">
         <div>
           <h1 className="text-2xl font-bold tracking-tight">Sentinel</h1>
-          <p className="text-sm text-muted mt-0.5">God Layer. Gemini 2.5 Pro. Dedicated key. Watches everything.</p>
+          <p className="text-sm text-muted mt-0.5">
+            {lastFetch ? `Refreshed ${relativeTime(lastFetch)}` : 'Connecting...'}
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <button
+            onClick={fetchHealth}
+            disabled={loading}
+            className="text-xs font-mono text-muted hover:text-ink border border-border px-3 py-1.5 rounded transition-colors disabled:opacity-40"
+          >
+            {loading ? '...' : '↻'}
+          </button>
+          <button
+            onClick={triggerAudit}
+            disabled={triggering}
+            className="text-sm font-mono px-4 py-2 border border-border rounded hover:bg-bg transition-colors disabled:opacity-40"
+          >
+            {triggering ? '...' : triggered ? '✓ Triggered' : 'Trigger Audit'}
+          </button>
         </div>
-        <button
-          onClick={triggerAudit}
-          disabled={triggering}
-          className="text-sm font-mono px-4 py-2 border border-border rounded hover:bg-bg transition-colors disabled:opacity-40"
-        >
-          {triggering ? '...' : triggered ? '✓ Triggered' : 'Trigger Audit'}
-        </button>
       </div>
 
+      {error && (
+        <div className="text-xs font-mono text-status-red border border-red-200 bg-red-50 px-4 py-3 rounded-lg">
+          ✗ {error}
+        </div>
+      )}
       {triggerError && (
         <div className="text-xs font-mono text-status-red border border-red-200 bg-red-50 px-4 py-3 rounded-lg">
-          ✗ {triggerError}
+          ✗ Trigger failed: {triggerError}
         </div>
       )}
 
       <div className="grid grid-cols-3 gap-4">
         {[
-          { label: 'Authority', value: 'God Layer', sub: 'Above all modules. Final word.' },
-          { label: 'Model', value: 'Gemini 2.5 Pro', sub: 'Dedicated. Never shared with pool.' },
-          { label: 'Schedule', value: 'Sunday 23:59', sub: 'Weekly audit + incident detection' },
-        ].map(({ label, value, sub }) => (
+          {
+            label: 'God Layer',
+            value: sentinelActive ? 'Active' : 'Inactive',
+            sub: sentinelActive ? 'Gemini 2.5 Pro · dedicated key' : 'Set GEMINI_SENTINEL_KEY in HF Space',
+            ok: sentinelActive,
+          },
+          {
+            label: 'SpacePromoter',
+            value: promoterActive ? (inDegraded ? 'Degraded' : `${nodes.length} node${nodes.length !== 1 ? 's' : ''}`) : 'Inactive',
+            sub: promoterActive
+              ? `${failoverCount} failover${failoverCount !== 1 ? 's' : ''} · 30s check interval`
+              : 'No Redis or init failed',
+            ok: promoterActive && !inDegraded,
+          },
+          {
+            label: 'Weekly Audit',
+            value: 'Sunday 23:59',
+            sub: 'GitHub Actions cron → /sentinel/event',
+            ok: true,
+          },
+        ].map(({ label, value, sub, ok }) => (
           <div key={label} className="bg-surface border border-border rounded-lg p-5">
             <p className="text-[11px] text-muted font-mono uppercase tracking-widest mb-2">{label}</p>
-            <p className="text-base font-bold text-ink">{value}</p>
+            <div className="flex items-center gap-2">
+              <span className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${ok ? 'bg-status-green' : 'bg-status-red'}`} />
+              <p className="text-base font-bold text-ink">{value}</p>
+            </div>
             <p className="text-xs text-muted mt-1">{sub}</p>
           </div>
         ))}
       </div>
 
+      {promoterActive && nodes.length > 0 && (
+        <div>
+          <h2 className="text-xs font-mono text-muted uppercase tracking-widest mb-3">Live Space Topology</h2>
+          <div className={`grid gap-4 ${nodes.length === 1 ? 'grid-cols-1' : nodes.length === 2 ? 'grid-cols-2' : 'grid-cols-3'}`}>
+            {nodes.map((node) => (
+              <NodeCard key={node.name} {...node} />
+            ))}
+          </div>
+          {inDegraded && (
+            <div className="mt-3 text-xs font-mono text-status-red border border-red-200 bg-red-50 px-4 py-3 rounded-lg">
+              🚨 DEGRADED — max failovers reached or all nodes down. Manual intervention required.
+            </div>
+          )}
+        </div>
+      )}
+
+      {promoterActive && nodes.length === 0 && (
+        <Card title="Space Topology">
+          <div className="px-5 py-6 text-center">
+            <p className="text-xs text-muted font-mono">No nodes. Set BRAIN_PRIMARY_URL env var.</p>
+          </div>
+        </Card>
+      )}
+
       <Card title="Trigger Schedule">
         <div className="px-5 py-5 space-y-0">
           {[
-            { when: 'Every request', what: 'Reads KV routing table. Validates Space health. <50ms.' },
-            { when: 'Every failure', what: 'Instant incident analysis → Notion page → KV rerouting → Discord DM to Ghost.' },
-            { when: 'Every Sunday 23:59', what: '1M context window reads full week logs → structured report → Notion + Discord.' },
+            { when: 'Every 30s', what: 'SpacePromoter pings all Space /health endpoints. 3 consecutive failures → backup promoted → CF KV updated.' },
+            { when: 'Every failure', what: 'Sentinel instant analysis → Notion incident page → KV rerouting → Discord DM.' },
+            { when: 'Sunday 23:59', what: '1M context window reads full week logs → structured report → Notion + Discord. Triggered by GitHub Actions.' },
             { when: 'Project start', what: 'Reads brief → writes operational plan: DevOps, memory arch, MOA config, tool assignments.' },
           ].map(({ when, what }) => (
-            <div key={when} className="flex gap-5 py-3 border-b border-border last:border-0">
-              <div className="w-40 text-xs font-mono text-ink font-medium flex-shrink-0 pt-0.5">{when}</div>
+            <div key={when} className="flex gap-5 py-3.5 border-b border-border last:border-0">
+              <div className="w-36 text-xs font-mono text-ink font-medium flex-shrink-0 pt-0.5">{when}</div>
               <div className="text-xs text-muted leading-relaxed">{what}</div>
             </div>
           ))}
@@ -78,6 +227,7 @@ export default function Sentinel() {
         <Card title="Incident Log">
           <div className="px-5 py-6 text-center">
             <p className="text-xs text-muted font-mono">No incidents. System stable.</p>
+            <p className="text-xs text-muted mt-1">SpacePromoter events appear here in real time.</p>
           </div>
         </Card>
         <Card title="Weekly Reports">