feat(viz): default landing = Knowledge; Graph tab gains warning banner

- ui/unified/js/state.js: activeView default = 'knowledge'
- ui/unified-viz.html: hard-coded `active` class moved to Knowledge
  button; #cortex-graph-warn banner injected below the view toggle
  ("Graph may be unusable at this scale … Use Knowledge or Board for
  reliable browsing while we land the rewrite") with × dismiss
- ui/unified/js/controls.js: default landing = knowledge; new
  _toggleGraphWarn(view) shows the banner only on Graph tab and
  honors the dismissed flag
- ui/unified/js/polling.js: fetchGraph short-circuits unless
  activeView === 'graph'; subscribes to state:activeView so the
  graph fetch fires when the user clicks the Graph tab
- inline phase loader (unified-viz.html): poll loop short-circuits
  unless the Graph tab is active, so Knowledge/Board users don't
  pay the L0..L6 phase-append cost

Net effect: page lands on Knowledge (paged /api/memories, scales to
any N), Graph stays available with an in-page warning, heavy graph
work is deferred until the user explicitly opens the Graph tab.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: cdeust

ui/unified-viz.html

@@ -97,13 +97,19 @@
     if(p.elapsed) document.getElementById('bp-elapsed').textContent = ' · '+p.elapsed.toFixed(1)+'s';
   }
 
+  function _activeViewIsGraph() {
+    return window.JUG && JUG.state && JUG.state.activeView === 'graph';
+  }
   function poll(){
+    // Only do graph-build work while the user is on the Graph tab.
+    // Knowledge / Board / Wiki users don't pay the cost.
+    if (!_activeViewIsGraph()) {
+      setTimeout(poll, 1500);
+      return;
+    }
     fetch('/api/graph/progress').then(function(r){ return r.ok ? r.json() : null; }).then(function(p){
       if(p){
         refreshBar(p);
-        // Sequential append: iterate the server's phases dict in
-        // insertion order (L0..L5, then L6:<proj1>..<projN>, then
-        // L6_CROSS). Apply each one whose `ready` flag is true.
         var seq = Promise.resolve();
         var keys = Object.keys(p.phases || {});
         keys.forEach(function(k){
@@ -166,8 +172,8 @@
 
 <div id="filter-bar">
   <span class="view-toggle">
-    <button class="view-btn active" data-view="graph">Graph</button>
-    <button class="view-btn" data-view="knowledge">Knowledge</button>
+    <button class="view-btn" data-view="graph">Graph</button>
+    <button class="view-btn active" data-view="knowledge">Knowledge</button>
     <button class="view-btn" data-view="wiki">Wiki</button>
     <button class="view-btn" data-view="timeline">Board</button>
     <button class="view-btn" data-view="sankey">Pipeline</button>
@@ -219,6 +225,39 @@
   <input type="text" id="search-box" placeholder="Search path, skill, command…">
 </div>
 
+<!-- Graph-only warning banner. Shown directly below the view-toggle
+     row when the Graph tab is active. The Graph view is enabled but
+     can be unresponsive at scale — explain the situation in-line so
+     users aren't confused if their browser hangs. Hidden by default;
+     controls.js toggles display on view change. -->
+<div id="cortex-graph-warn" role="status"
+     style="display:none;position:fixed;top:62px;left:50%;transform:translateX(-50%);z-index:200;
+            max-width:760px;padding:8px 36px 8px 14px;
+            background:linear-gradient(90deg,rgba(48,28,12,0.92),rgba(64,40,16,0.92));
+            border:1px solid rgba(224,140,64,0.5);border-radius:5px;
+            color:#FFE3B5;font:11.5px/1.45 -apple-system,Inter,system-ui,sans-serif;
+            letter-spacing:0.2px;box-shadow:0 4px 14px rgba(0,0,0,0.4)">
+  <span style="color:#FFB060;margin-right:6px">⚠</span>
+  <strong>Graph may be unusable at this scale.</strong>
+  Due to performance issues we are currently investigating, opening the Graph
+  view can freeze the browser when memory counts are high. We are actively
+  working on it. Use <strong>Knowledge</strong> or <strong>Board</strong> for
+  reliable browsing while we land the rewrite.
+  <button id="cortex-graph-warn-close" aria-label="Dismiss"
+          style="position:absolute;top:4px;right:6px;width:22px;height:22px;
+                 background:transparent;border:none;color:#FFB060;font-size:14px;
+                 cursor:pointer;line-height:1;padding:0">×</button>
+</div>
+<script>
+(function(){
+  var b = document.getElementById('cortex-graph-warn-close');
+  if (b) b.addEventListener('click', function() {
+    var w = document.getElementById('cortex-graph-warn');
+    if (w) { w.style.display = 'none'; w.dataset.dismissed = '1'; }
+  });
+})();
+</script>
+
 <div id="status-bar" class="hud-panel">
   <div class="status-dot"></div>
   <span id="status-text">Initializing</span>

ui/unified/js/controls.js

@@ -3,23 +3,40 @@
   document.addEventListener('DOMContentLoaded', function() {
     // ── View toggle (Graph / Timeline) ──
     var viewBtns = document.querySelectorAll('.view-toggle .view-btn[data-view]');
+    function _toggleGraphWarn(view) {
+      var w = document.getElementById('cortex-graph-warn');
+      if (!w) return;
+      if (view === 'graph' && w.dataset.dismissed !== '1') {
+        w.style.display = '';
+      } else {
+        w.style.display = 'none';
+      }
+    }
     viewBtns.forEach(function(btn) {
       btn.addEventListener('click', function() {
         viewBtns.forEach(function(b) { b.classList.remove('active'); });
         btn.classList.add('active');
-        var view = btn.dataset.view || 'graph';
+        var view = btn.dataset.view || 'knowledge';
         JUG.state.activeView = view;
         toggleFilterBarVisibility(view);
+        _toggleGraphWarn(view);
       });
     });
 
-    // Graph is the default landing view — the wiki is still under
-    // active restructuring and the workflow graph is the canonical
-    // answer to "what did Claude do in this project".
+    // Knowledge is the default landing view — at high N the graph
+    // payload + force simulation can freeze the browser, so we land
+    // on the lazy-loaded Knowledge tab. Users can still click Graph;
+    // the in-page warning banner above explains the trade-off.
     setTimeout(function() {
       JUG.state.activeView = '_init';
-      JUG.state.activeView = 'graph';
-      toggleFilterBarVisibility('graph');
+      JUG.state.activeView = 'knowledge';
+      toggleFilterBarVisibility('knowledge');
+      _toggleGraphWarn('knowledge');
+      // Sync the active class on the buttons (HTML hard-codes
+      // active=graph; flip it to match the runtime default).
+      viewBtns.forEach(function(b) {
+        b.classList.toggle('active', b.dataset.view === 'knowledge');
+      });
     }, 0);
 
     // ── Filter buttons (source type) ──

ui/unified/js/polling.js

@@ -3,11 +3,18 @@
   var abortController = null;
 
   function fetchGraph() {
+    // Lazy-load: only pay the multi-MB /api/graph cost when the
+    // user is actually on the Graph tab. Knowledge / Board / Wiki
+    // each own their own paged data path and don't need this.
+    if (window.JUG && JUG.state && JUG.state.activeView !== 'graph') {
+      updateStatus('Online — graph standby');
+      hideLoading();
+      return;
+    }
     if (abortController) abortController.abort();
     abortController = new AbortController();
     var signal = abortController.signal;
 
-    // Single fetch — no batching. Domain dedup keeps node count manageable.
     fetch(JUG.API_URL, { signal: signal })
       .then(function(res) {
         if (!res.ok) throw new Error('HTTP ' + res.status);
@@ -134,7 +141,9 @@
       .map(function(v) { return String(v).padStart(2, '0'); }).join(':');
   }, 1000);
 
-  // Boot — delay initial fetch to let Three.js scene fully initialize
+  // Boot — delay initial fetch. fetchGraph() short-circuits unless
+  // activeView === 'graph', so this is cheap on Knowledge / Board /
+  // Wiki landings.
   if (document.readyState === 'loading') {
     document.addEventListener('DOMContentLoaded', function() {
       setTimeout(fetchGraph, 500);
@@ -143,6 +152,14 @@
     setTimeout(fetchGraph, 500);
   }
 
+  // Trigger the graph fetch when the user actually switches to the
+  // Graph tab (lazy-load semantics).
+  if (window.JUG && JUG.on) {
+    JUG.on('state:activeView', function(ev) {
+      if (ev && ev.value === 'graph') setTimeout(fetchGraph, 50);
+    });
+  }
+
   function _loadDiscussionBatch(batch) {
     var batchSize = 500;
     fetch(JUG.API_URL.replace('/api/graph', '/api/discussions') + '?batch=' + batch + '&batch_size=' + batchSize)

ui/unified/js/state.js

@@ -17,7 +17,7 @@
     selectedId: null,
     zoomLevel: 'L0',
     lastData: null,
-    activeView: 'graph',
+    activeView: 'knowledge',
     domainFilter: '',
     emotionFilter: '',
     stageFilter: '',