nexus-prime 7.9.28 → 7.9.29

package/dist/dashboard/app/api.js

@@ -8,6 +8,18 @@
 import { CACHE_TTL, S, bus } from './state.js';
 
 const _cache = new Map();
+const DEFAULT_TIMEOUT_MS = 5_000;
+
+function _timeoutFor(url, override) {
+    if (Number.isFinite(Number(override))) return Number(override);
+    if (url.includes('/api/tokens/')) return 1_800;
+    if (url.includes('/api/license')) return 2_500;
+    if (url.includes('/api/runtimes')) return 3_000;
+    if (url.includes('/api/dashboard/surface/')) return 4_000;
+    if (url.includes('/api/dashboard/summary')) return 4_500;
+    if (url.includes('/api/knowledge-topology')) return 7_000;
+    return DEFAULT_TIMEOUT_MS;
+}
 
 function _scopedUrl(url) {
     if (typeof url !== 'string' || !url.startsWith('/api/')) return url;
@@ -27,32 +39,39 @@ function _scopedUrl(url) {
  * then kick off a background refresh.  Callers get the fast synchronous hit
  * for p50 <5ms; the next render cycle gets the fresh value.
  */
-export async function api(url, ttl = CACHE_TTL) {
+export async function api(url, ttl = CACHE_TTL, opts = {}) {
     const requestUrl = _scopedUrl(url);
     const hit = _cache.get(requestUrl);
     const fresh = !hit || (Date.now() - hit.ts >= ttl);
 
-    // Return stale data synchronously while refresh fires in background.
-    const refreshPromise = fresh ? _fetch(requestUrl) : Promise.resolve(hit.data);
-
-    if (hit && !fresh) {
-        // Background refresh — don't await, just schedule.
-        _fetch(requestUrl).catch(() => {});
+    if (hit) {
+        if (fresh) {
+            _fetch(requestUrl, opts).catch(() => {});
+            bus.emit('api:stale', { url: requestUrl, ageMs: Date.now() - hit.ts });
+        } else {
+            _fetch(requestUrl, opts).catch(() => {});
+        }
+        return hit.data;
     }
 
-    return refreshPromise;
+    return _fetch(requestUrl, opts);
 }
 
-async function _fetch(url) {
+async function _fetch(url, opts = {}) {
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), _timeoutFor(url, opts.timeoutMs));
     try {
-        const r = await fetch(url);
+        const r = await fetch(url, { signal: controller.signal });
         if (!r.ok) return null;
         const d = await r.json();
         _cache.set(url, { data: d, ts: Date.now() });
         bus.emit('cache:updated', url);
         return d;
-    } catch {
+    } catch (err) {
+        bus.emit('api:timeout', { url, error: err?.name === 'AbortError' ? 'timeout' : String(err?.message || err) });
         return null;
+    } finally {
+        clearTimeout(timeout);
     }
 }
 

package/dist/dashboard/app/index.html

@@ -12,6 +12,7 @@
 <link rel="stylesheet" href="./styles/workforce.css">
 <link rel="stylesheet" href="./styles/memory.css">
 <link rel="stylesheet" href="./styles/context-log.css">
+<link rel="stylesheet" href="./styles/learning.css">
 <link rel="stylesheet" href="./styles/governance.css">
 <link rel="stylesheet" href="./styles/trust.css">
 <link rel="stylesheet" href="./styles/animation.css">
@@ -56,6 +57,7 @@ if(location.protocol==='file:'){
       <a class="nav-item" data-nav="runtime" href="#runtime">⚡ Runtime</a>
       <a class="nav-item" data-nav="workforce" href="#workforce">Workforce</a>
       <a class="nav-item" data-nav="memory" href="#memory">Memory</a>
+      <a class="nav-item" data-nav="learning" href="#learning">Learning</a>
       <a class="nav-item" data-nav="context-log" href="#context-log">Context Log</a>
       <a class="nav-item" data-nav="repo" href="#repo">Repo</a>
       <a class="nav-item" data-nav="knowledge" href="#knowledge">Knowledge</a>
@@ -111,6 +113,8 @@ if(location.protocol==='file:'){
           <div class="hero-stat"><div class="metric-val" id="m-ops">—</div><div class="metric-lbl">Operatives</div><canvas id="spark-ops" class="sparkline" width="80" height="24" aria-hidden="true"></canvas></div>
         </div>
 
+        <div id="model-router-panel" class="model-router-panel card" aria-label="Model and context router"></div>
+
         <!-- Live strip + kanban -->
         <div id="agents-live-strip"></div>
         <div id="kanban-board">
@@ -189,6 +193,7 @@ if(location.protocol==='file:'){
 
         <div class="memory-toolbar">
           <button class="btn btn-sm" id="mem-graph-max-btn">Maximize graph</button>
+          <button class="btn btn-sm" id="mem-graph-focus-btn">Focus selected</button>
           <button class="btn btn-sm" id="mem-browse-btn">Browse memories</button>
         </div>
         <div id="graph-container" class="card">
@@ -228,13 +233,33 @@ if(location.protocol==='file:'){
         <div id="context-log-view"></div>
       </section>
 
+      <!-- LEARNING ───────────────────────────────────────────────── -->
+      <section class="view-panel" data-view="learning" aria-label="Learning network">
+        <div id="learning-view"></div>
+      </section>
+
       <!-- REPO ───────────────────────────────────────────────────── -->
       <section class="view-panel" data-view="repo" aria-label="Repo graph">
         <div class="shd">Repo knowledge graph</div>
-        <div id="repo-graph-header" style="display:flex;align-items:center;gap:12px;padding:0 2px 10px;font-size:var(--text-sm);color:var(--text-muted)">
+        <div id="repo-graph-header" class="repo-graph-header">
           <span id="repo-graph-meta">—</span>
-          <button id="repo-build-btn" class="btn btn-sm" style="margin-left:auto">Build graph</button>
-          <input id="repo-search-input" type="text" placeholder="Search nodes…" style="padding:3px 8px;border:1px solid var(--border);border-radius:4px;background:var(--surface-1);color:var(--text);font-size:var(--text-sm);width:180px" autocomplete="off">
+          <div class="repo-graph-actions">
+            <button id="repo-build-btn" class="btn btn-sm">Build graph</button>
+            <button id="repo-memory-focus-btn" class="btn btn-sm">Memory overlay</button>
+            <input id="repo-search-input" class="repo-graph-search" type="text" placeholder="Search nodes…" autocomplete="off">
+            <div class="repo-graph-controls" aria-label="Repo graph navigation controls">
+              <button id="repo-zoom-out-btn" class="repo-graph-control" title="Zoom out">-</button>
+              <button id="repo-zoom-in-btn" class="repo-graph-control" title="Zoom in">+</button>
+              <button id="repo-fit-btn" class="repo-graph-control repo-graph-control-wide" title="Fit graph">Fit</button>
+              <button id="repo-reset-btn" class="repo-graph-control repo-graph-control-wide" title="Reset view">Reset</button>
+              <button id="repo-pan-left-btn" class="repo-graph-control" title="Pan left">&lt;</button>
+              <button id="repo-pan-right-btn" class="repo-graph-control" title="Pan right">&gt;</button>
+              <button id="repo-pan-up-btn" class="repo-graph-control" title="Pan up">^</button>
+              <button id="repo-pan-down-btn" class="repo-graph-control" title="Pan down">v</button>
+              <button id="repo-graph-max-btn" class="repo-graph-control repo-graph-control-wide" title="Maximize graph">Max</button>
+              <span id="repo-viewport-badge" class="repo-viewport-badge">100%</span>
+            </div>
+          </div>
         </div>
         <div class="card" style="position:relative;overflow:hidden">
           <div id="repo-graph-container" style="width:100%;height:480px;position:relative">

package/dist/dashboard/app/main.js

@@ -15,6 +15,7 @@ import { init as initCmdBar }     from './widgets/command-bar.js';
 import * as Board                 from './views/board.js';
 import * as Workforce             from './views/workforce.js';
 import * as Memory                from './views/memory.js';
+import * as Learning              from './views/learning.js';
 import * as ContextLog            from './views/context-log.js';
 import * as Knowledge             from './views/knowledge.js';
 import * as Repo                  from './views/repo.js';
@@ -54,6 +55,7 @@ navRegister('board',      Board.load);
 navRegister('runtime',    Runtime.load);
 navRegister('workforce',  Workforce.load);
 navRegister('memory',     Memory.load);
+navRegister('learning',   Learning.load);
 navRegister('context-log', ContextLog.load);
 navRegister('repo',       Repo.load);
 navRegister('knowledge',  Knowledge.load);
@@ -89,6 +91,10 @@ setOnEvent(evt => {
     if (tab === 'memory' && evt.category === 'memory') {
         _refreshMemorySoon();
     }
+    if (tab === 'learning' && (evt.category === 'memory' || String(evt.type||'').startsWith('orchestration.'))) {
+        bustCache('/api/learning/packets?limit=24');
+        Learning.load();
+    }
     if (tab === 'governance' && evt.category === 'darwin') {
         Governance.load();
     }
@@ -123,6 +129,9 @@ setOnEvent(evt => {
         if (tab === 'context-log') {
             ContextLog.load();
         }
+        if (tab === 'learning') {
+            Learning.load();
+        }
     }
     // Workspace root promoted (e.g. from bootstrap hint) — refresh header immediately.
     if (String(evt.type||'') === 'workspace.changed') {
@@ -184,8 +193,9 @@ async function loadProjects() {
     ]);
     S.projects = Array.isArray(projectsD) ? projectsD : (projectsD?.projects||[]);
     S.runtimes = Array.isArray(runtimesD) ? runtimesD : (runtimesD?.runtimes||[]);
-    _selectDefaultRuntime();
+    const scopeChanged = _selectDefaultRuntime();
     _renderProjectSelectors();
+    return scopeChanged;
 }
 
 async function loadCompanies() {
@@ -210,7 +220,7 @@ function _renderProjectSelectors() {
 }
 
 function _selectDefaultRuntime() {
-    if (S.scope.runtimeId || !(S.runtimes||[]).length) return;
+    if (S.scope.runtimeId || !(S.runtimes||[]).length) return false;
     const current = S.workspace?.repoRoot || S.workspace?.workspaceRoot || '';
     const candidates = (S.runtimes||[]).filter(r => r?.runtimeId);
     const exact = current ? candidates.find(r => r.repoIdentity?.repoRoot === current) : null;
@@ -228,7 +238,10 @@ function _selectDefaultRuntime() {
         return root && root !== '/';
     });
     const selected = (exact && !currentLooksLikeHome ? exact : null) || remoteRepo || deepestRepo || candidates[0];
-    S.scope.runtimeId = selected?.runtimeId || null;
+    const nextRuntimeId = selected?.runtimeId || null;
+    const changed = nextRuntimeId !== S.scope.runtimeId;
+    S.scope.runtimeId = nextRuntimeId;
+    return changed;
 }
 
 /* ─────────────────── Header / ticker ─────────────────── */
@@ -344,29 +357,30 @@ async function bootstrap() {
     _renderHeader(false);
 
     await loadWorkspace();
-    await loadProjects();
-
-    // Fast first paint: board + companies + repo-tree + license
-    const [, , , lic] = await Promise.all([
-        Board.load(),
-        loadCompanies(),
-        loadRepoTree(),
-        api('/api/license', 60000),
-    ]);
-    S.license = lic;
-
-    // Populate agent selector
-    const agentSel = $('ctx-agent');
-    if (agentSel && S.synapseHealth.length) {
-        agentSel.innerHTML = '<option value="">All agents</option>' +
-            S.synapseHealth.map(o=>`<option value="${esc(o.id||o.operativeId)}">${esc(o.role||o.name||o.id||'agent')}</option>`).join('');
+    const scopeChanged = await loadProjects();
+    if (scopeChanged) {
+        bustCache('/api/workspace');
+        bustCache('/api/repo-tree');
+        await loadWorkspace();
     }
 
-    // Wire router after first paint
+    // Wire router before slow side panels. Each view owns progressive loading.
     routerStart();
 
     // Connect SSE stream — SSE drives all live updates; no polling needed.
     connectSSE();
+
+    Promise.allSettled([
+        loadCompanies(),
+        loadRepoTree(),
+        api('/api/license', 60000, { timeoutMs: 2500 }).then(lic => { S.license = lic; }),
+    ]).then(() => {
+        const agentSel = $('ctx-agent');
+        if (agentSel && S.synapseHealth.length) {
+            agentSel.innerHTML = '<option value="">All agents</option>' +
+                S.synapseHealth.map(o=>`<option value="${esc(o.id||o.operativeId)}">${esc(o.role||o.name||o.id||'agent')}</option>`).join('');
+        }
+    });
 }
 
 // Start when DOM is ready

package/dist/dashboard/app/state.js

@@ -86,6 +86,10 @@ export const S = {
     contextLogRuns: [],
     contextLogSelectedRunId: null,
     contextLogSpine: null,
+    contextLogLearning: null,
+    learningSurface: null,
+    learningGraph: null,
+    learningSelectedPacketId: null,
 
     // Neural Stream HUD ring buffer (latest SSE events, restored from v3.8.0)
     neuralStream: [],

package/dist/dashboard/app/styles/board.css

@@ -13,6 +13,81 @@
 .hero-stat { padding: 18px 22px; background: var(--bg-elevated); transition: background 0.15s; }
 .hero-stat:hover { background: var(--bg-panel); }
 
+.model-router-panel {
+    margin: 0 0 16px;
+    padding: 14px;
+    background:
+        radial-gradient(circle at 18% 0%, rgba(0,212,255,0.12), transparent 30%),
+        radial-gradient(circle at 80% 10%, rgba(0,255,136,0.10), transparent 26%),
+        var(--bg-elevated);
+    overflow: hidden;
+}
+.model-router-head {
+    display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
+    margin-bottom: 10px;
+}
+.model-router-head span,
+.model-lane-client {
+    display: block;
+    color: var(--text-dim);
+    font-family: var(--font-mono);
+    font-size: 0.68rem;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+}
+.model-router-head strong {
+    display: block;
+    margin-top: 3px;
+    color: var(--text-main);
+    font: var(--title);
+}
+.model-router-lanes {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 10px;
+}
+.model-lane {
+    min-height: 92px;
+    padding: 12px;
+    text-align: left;
+    color: var(--text-muted);
+    background: rgba(0,0,0,0.2);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    cursor: pointer;
+    transition: transform .24s var(--ease), border-color .24s var(--ease), background .24s var(--ease);
+}
+.model-lane:hover,
+.model-lane.selected {
+    transform: translateY(-2px);
+    border-color: rgba(0,255,136,0.36);
+    background: rgba(0,255,136,0.06);
+}
+.model-lane strong {
+    display: block;
+    margin: 6px 0 2px;
+    color: var(--text-main);
+    font-family: var(--font-mono);
+    font-size: 1rem;
+}
+.model-lane small {
+    color: var(--text-dim);
+    font-family: var(--font-mono);
+}
+.model-router-reason {
+    margin-top: 10px;
+    color: var(--text-muted);
+    font-size: 0.78rem;
+    line-height: 1.45;
+}
+
+@media (max-width: 900px) {
+    #hero-stats,
+    .model-router-lanes {
+        grid-template-columns: 1fr;
+    }
+}
+
 /* ── Kanban ── */
 #kanban-board {
     display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;

package/dist/dashboard/app/styles/context-log.css

@@ -7,6 +7,7 @@
 
 .context-log-rail,
 .context-log-summary,
+.context-router-card,
 .context-log-row,
 .context-log-decision {
     background: var(--bg-elevated);
@@ -69,7 +70,7 @@
 
 .context-log-summary {
     display: grid;
-    grid-template-columns: repeat(5, minmax(90px, 1fr));
+    grid-template-columns: repeat(7, minmax(82px, 1fr));
     gap: 10px;
     padding: 14px;
     margin-bottom: 14px;
@@ -99,13 +100,91 @@
 }
 
 .context-log-selection > div,
-.context-log-refs {
+.context-log-refs,
+.context-log-changed {
     display: flex;
     flex-wrap: wrap;
     gap: 4px;
     min-width: 0;
 }
 
+.context-router-card {
+    padding: 13px 14px;
+    margin-bottom: 14px;
+}
+
+.context-router-card.context-router-advisory {
+    border-color: rgba(255,209,77,0.3);
+    background: linear-gradient(180deg, rgba(255,209,77,0.055), var(--bg-elevated));
+}
+
+.context-router-card.context-router-changed {
+    border-color: rgba(0,255,136,0.3);
+    background: linear-gradient(180deg, rgba(0,255,136,0.055), var(--bg-elevated));
+}
+
+.context-router-head {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 14px;
+    margin-bottom: 8px;
+}
+
+.context-router-head span,
+.context-router-grid span,
+.context-log-changed > span {
+    display: block;
+    color: var(--text-dim);
+    font-family: var(--font-mono);
+    font-size: 0.68rem;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+}
+
+.context-router-head strong {
+    display: block;
+    margin-top: 3px;
+    color: var(--text-main);
+    font-family: var(--font-mono);
+    font-size: 1rem;
+}
+
+.context-router-metrics {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: 6px;
+}
+
+.context-router-metrics span {
+    padding: 4px 7px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    background: rgba(0,0,0,0.18);
+    color: var(--text-muted);
+}
+
+.context-router-card p {
+    margin: 0 0 11px;
+    color: var(--text-muted);
+    font-size: 0.8rem;
+    line-height: 1.45;
+}
+
+.context-router-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 10px;
+}
+
+.context-router-grid > div {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+    min-width: 0;
+}
+
 .context-log-grid {
     display: grid;
     grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
@@ -142,6 +221,15 @@
     line-height: 1.45;
 }
 
+.context-log-changed {
+    margin-top: 7px;
+}
+
+.context-log-changed > span {
+    width: 100%;
+    margin-bottom: 2px;
+}
+
 .context-log-decision strong {
     display: block;
     margin-bottom: 6px;
@@ -150,6 +238,68 @@
     line-height: 1.35;
 }
 
+.context-link-chip {
+    cursor: pointer;
+    font: var(--caption-role);
+}
+
+.context-link-chip[data-context-target] {
+    border-color: rgba(0,212,255,0.28);
+    background: rgba(0,212,255,0.06);
+}
+
+.context-link-chip[data-context-target]:hover {
+    color: var(--text-main);
+    border-color: rgba(0,255,136,0.36);
+    background: rgba(0,255,136,0.08);
+}
+
+.context-learning-card {
+    padding: 12px;
+    margin-bottom: 14px;
+    border: 1px solid rgba(0,255,136,0.16);
+    border-radius: var(--radius);
+    background: linear-gradient(180deg, rgba(0,255,136,0.05), rgba(0,212,255,0.025));
+}
+
+.context-learning-list {
+    display: grid;
+    gap: 8px;
+    margin-top: 10px;
+}
+
+.context-learning-item {
+    padding: 9px 10px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    background: rgba(0,0,0,0.18);
+}
+
+.context-learning-item span {
+    color: var(--secondary);
+    font-family: var(--font-mono);
+    font-size: 0.68rem;
+}
+
+.context-learning-item strong,
+.context-learning-item em {
+    display: block;
+    margin-top: 4px;
+}
+
+.context-learning-item strong {
+    color: var(--text-main);
+    font-size: 0.8rem;
+    line-height: 1.35;
+}
+
+.context-learning-item em {
+    color: var(--text-muted);
+    font-size: 0.74rem;
+    font-style: normal;
+    line-height: 1.45;
+}
+
 .context-log-empty {
     color: var(--text-dim);
     font-size: 0.72rem;
@@ -158,7 +308,8 @@
 @media (max-width: 980px) {
     .context-log-shell,
     .context-log-grid,
-    .context-log-selection {
+    .context-log-selection,
+    .context-router-grid {
         grid-template-columns: 1fr;
     }
     .context-log-summary {