twining-mcp 1.7.1 → 1.8.0

package/dist/dashboard/public/app.js

@@ -156,6 +156,11 @@ function fetchBlackboard() {
       state.connected = true;
       updateConnectionIndicator();
       renderBlackboard();
+      // Refresh stream if visible
+      var streamView = document.getElementById('blackboard-stream-view');
+      if (streamView && streamView.style.display !== 'none') {
+        renderStream();
+      }
       renderActivityBreakdown();
       renderRecentActivity();
     })
@@ -430,8 +435,13 @@ function handleSort(tabName, key) {
   }
   tabState.page = 1;
 
-  if (tabName === "blackboard") renderBlackboard();
-  else if (tabName === "decisions") renderDecisions();
+  if (tabName === "blackboard") {
+    renderBlackboard();
+    var streamView = document.getElementById('blackboard-stream-view');
+    if (streamView && streamView.style.display !== 'none') {
+      renderStream();
+    }
+  } else if (tabName === "decisions") renderDecisions();
   else if (tabName === "graph") renderGraph();
   else if (tabName === "search") renderSearchResults();
   else if (tabName === "agents") renderAgents();
@@ -1688,16 +1698,14 @@ function buildSearchUrl() {
   if (!q) return null;
   var params = "q=" + encodeURIComponent(q);
 
-  // Type filter
-  var typesSelect = document.getElementById("filter-types");
-  if (typesSelect) {
+  // Type filter (from chips)
+  var typeChips = document.querySelectorAll(".search-chip.active[data-type]");
+  if (typeChips.length > 0 && typeChips.length < 3) {
     var selectedTypes = [];
-    for (var i = 0; i < typesSelect.options.length; i++) {
-      if (typesSelect.options[i].selected) selectedTypes.push(typesSelect.options[i].value);
-    }
-    if (selectedTypes.length > 0 && selectedTypes.length < 3) {
-      params += "&types=" + selectedTypes.join(",");
+    for (var i = 0; i < typeChips.length; i++) {
+      selectedTypes.push(typeChips[i].getAttribute("data-type"));
     }
+    params += "&types=" + selectedTypes.join(",");
   }
 
   // Status filter
@@ -1932,6 +1940,11 @@ function toggleView(tab, viewName) {
     if (viewName === 'delegations' && state.delegations.data.length === 0) fetchDelegations();
     if (viewName === 'handoffs' && state.handoffs.data.length === 0) fetchHandoffs();
   }
+  if (tab === 'blackboard') {
+    document.getElementById('blackboard-table-view').style.display = viewName === 'table' ? 'block' : 'none';
+    document.getElementById('blackboard-stream-view').style.display = viewName === 'stream' ? 'block' : 'none';
+    if (viewName === 'stream' && typeof renderStream === 'function') renderStream();
+  }
 }
 
 /* ========== Decision Timeline Visualization ========== */
@@ -1939,14 +1952,48 @@ function toggleView(tab, viewName) {
 var CONFIDENCE_CLASSES = { high: 'confidence-high', medium: 'confidence-medium', low: 'confidence-low' };
 var STATUS_CLASSES = { provisional: 'status-provisional', superseded: 'status-superseded', overridden: 'status-overridden' };
 
+var DOMAIN_COLORS = {
+  architecture:   '#6366f1',
+  implementation: '#3b82f6',
+  testing:        '#10b981',
+  deployment:     '#f59e0b',
+  security:       '#ef4444',
+  performance:    '#8b5cf6',
+  'api-design':   '#06b6d4',
+  'data-model':   '#ec4899'
+};
+var DOMAIN_COLOR_DEFAULT = '#6b7280';
+
+// Track which domains are active in filters (null = all active)
+var timelineDomainFilter = null;
+
 function getDecisionClassName(d) {
+  var classes = [];
   if (d.status && d.status !== 'active' && STATUS_CLASSES[d.status]) {
-    return STATUS_CLASSES[d.status];
+    classes.push(STATUS_CLASSES[d.status]);
   }
   if (d.confidence && CONFIDENCE_CLASSES[d.confidence]) {
-    return CONFIDENCE_CLASSES[d.confidence];
+    classes.push(CONFIDENCE_CLASSES[d.confidence]);
   }
-  return '';
+  return classes.join(' ');
+}
+
+function buildTimelineGroups(decisions) {
+  var domainSet = {};
+  for (var i = 0; i < decisions.length; i++) {
+    var domain = decisions[i].domain || 'other';
+    domainSet[domain] = true;
+  }
+  var groups = [];
+  var sorted = Object.keys(domainSet).sort();
+  for (var j = 0; j < sorted.length; j++) {
+    groups.push({
+      id: sorted[j],
+      content: sorted[j],
+      style: 'border-left: 3px solid ' + (DOMAIN_COLORS[sorted[j]] || DOMAIN_COLOR_DEFAULT) + '; padding-left: 8px;'
+    });
+  }
+  return groups;
 }
 
 function buildTimelineItems(decisions) {
@@ -1954,12 +2001,22 @@ function buildTimelineItems(decisions) {
   var items = [];
   for (var i = 0; i < scoped.length; i++) {
     var d = scoped[i];
+    var domain = d.domain || 'other';
+    // Apply domain filter
+    if (timelineDomainFilter && !timelineDomainFilter[domain]) continue;
+    var conf = d.confidence || 'unknown';
+    var stat = d.status || 'active';
+    var tooltipParts = [d.summary];
+    tooltipParts.push(conf.charAt(0).toUpperCase() + conf.slice(1) + ' confidence');
+    tooltipParts.push('Status: ' + stat);
+    if (d.scope) tooltipParts.push('Scope: ' + d.scope);
     items.push({
       id: d.id,
-      content: truncate(d.summary, 60),
+      group: domain,
+      content: truncate(d.summary, 50),
       start: d.timestamp,
       className: getDecisionClassName(d),
-      title: d.summary + ' [' + (d.status || 'unknown') + ', ' + (d.confidence || 'unknown') + ']'
+      title: tooltipParts.join('\n')
     });
   }
   return items;
@@ -1972,24 +2029,31 @@ function initTimeline() {
   }
   if (typeof vis === 'undefined' || !vis.Timeline) return;
 
+  var scoped = applyGlobalScope(state.decisions.data, 'scope');
+  var groups = buildTimelineGroups(scoped);
   var items = buildTimelineItems(state.decisions.data);
   window.timelineDataSet = new vis.DataSet(items);
+  window.timelineGroupSet = new vis.DataSet(groups);
 
   var container = document.getElementById('timeline-container');
   if (!container) return;
 
   var options = {
-    zoomMin: 1000 * 60 * 60,
-    zoomMax: 1000 * 60 * 60 * 24 * 365,
+    zoomMin: 1000 * 60 * 5,
+    zoomMax: 1000 * 60 * 60 * 24 * 365 * 2,
     orientation: { axis: 'top' },
     selectable: true,
-    tooltip: { followMouse: true },
-    margin: { item: { horizontal: 10, vertical: 20 } },
+    tooltip: { followMouse: true, delay: 150 },
+    margin: { item: { horizontal: 8, vertical: 5 } },
     stack: true,
-    maxHeight: 600
+    maxHeight: 600,
+    verticalScroll: true,
+    zoomKey: '',
+    showCurrentTime: true,
+    groupOrder: 'content'
   };
 
-  window.timelineInstance = new vis.Timeline(container, window.timelineDataSet, options);
+  window.timelineInstance = new vis.Timeline(container, window.timelineDataSet, window.timelineGroupSet, options);
 
   window.timelineInstance.on('select', function(properties) {
     if (properties.items.length > 0) {
@@ -1999,26 +2063,51 @@ function initTimeline() {
     }
   });
 
-  window.timelineInstance.fit();
+  window.timelineInstance.fit({ animation: { duration: 500, easingFunction: 'easeInOutQuad' } });
+
+  // Wire up controls
+  wireTimelineControls();
   renderTimelineLegend();
+  renderTimelineDomainFilters();
+}
+
+function wireTimelineControls() {
+  var zoomIn = document.getElementById('timeline-zoom-in');
+  var zoomOut = document.getElementById('timeline-zoom-out');
+  var fit = document.getElementById('timeline-fit');
+  var today = document.getElementById('timeline-today');
+
+  if (zoomIn) zoomIn.addEventListener('click', function() {
+    if (window.timelineInstance) window.timelineInstance.zoomIn(0.4, { animation: { duration: 300, easingFunction: 'easeInOutQuad' } });
+  });
+  if (zoomOut) zoomOut.addEventListener('click', function() {
+    if (window.timelineInstance) window.timelineInstance.zoomOut(0.4, { animation: { duration: 300, easingFunction: 'easeInOutQuad' } });
+  });
+  if (fit) fit.addEventListener('click', function() {
+    if (window.timelineInstance) window.timelineInstance.fit({ animation: { duration: 500, easingFunction: 'easeInOutQuad' } });
+  });
+  if (today) today.addEventListener('click', function() {
+    if (window.timelineInstance) window.timelineInstance.moveTo(new Date(), { animation: { duration: 500, easingFunction: 'easeInOutQuad' } });
+  });
 }
 
 function renderTimelineLegend() {
   var legend = document.getElementById('timeline-legend');
-  if (!legend || legend.children.length > 0) return;
+  if (!legend) return;
+  clearElement(legend);
   var items = [
-    { color: '#4caf50', label: 'High confidence' },
-    { color: '#ff9800', label: 'Medium confidence' },
-    { color: '#f44336', label: 'Low confidence' },
-    { color: 'var(--muted)', label: 'Provisional (dashed)', dashed: true },
-    { color: 'var(--muted)', label: 'Superseded (strikethrough)', strike: true }
+    { color: 'var(--success)', label: 'High confidence' },
+    { color: 'var(--warning)', label: 'Medium confidence' },
+    { color: 'var(--error)', label: 'Low confidence' },
+    { color: null, label: 'Provisional', dashed: true },
+    { color: null, label: 'Superseded', strike: true }
   ];
   for (var i = 0; i < items.length; i++) {
     var item = document.createElement('span');
-    item.style.cssText = 'display:inline-flex;align-items:center;gap:4px;margin-right:12px;font-size:0.8rem;';
+    item.className = 'timeline-legend-item';
     var dot = document.createElement('span');
-    dot.style.cssText = 'width:10px;height:10px;border-radius:50%;display:inline-block;background:' + items[i].color;
-    if (items[i].dashed) dot.style.cssText += ';border:2px dashed var(--text);background:transparent';
+    dot.className = 'timeline-legend-dot' + (items[i].dashed ? ' dashed' : '');
+    if (items[i].color) dot.style.background = items[i].color;
     var label = document.createElement('span');
     label.textContent = items[i].label;
     if (items[i].strike) label.style.textDecoration = 'line-through';
@@ -2028,11 +2117,80 @@ function renderTimelineLegend() {
   }
 }
 
+function renderTimelineDomainFilters() {
+  var container = document.getElementById('timeline-domain-filters');
+  if (!container) return;
+  clearElement(container);
+
+  var scoped = applyGlobalScope(state.decisions.data, 'scope');
+  var domainSet = {};
+  for (var i = 0; i < scoped.length; i++) {
+    var domain = scoped[i].domain || 'other';
+    domainSet[domain] = (domainSet[domain] || 0) + 1;
+  }
+
+  var domains = Object.keys(domainSet).sort();
+  if (domains.length <= 1) return; // No point showing filter for 1 domain
+
+  // "All" chip
+  var allChip = document.createElement('button');
+  allChip.className = 'timeline-domain-chip' + (timelineDomainFilter === null ? ' active' : '');
+  allChip.textContent = 'All';
+  allChip.style.setProperty('--domain-color', 'var(--accent)');
+  allChip.addEventListener('click', function() {
+    timelineDomainFilter = null;
+    updateTimelineData();
+    renderTimelineDomainFilters();
+  });
+  container.appendChild(allChip);
+
+  for (var j = 0; j < domains.length; j++) {
+    (function(domain) {
+      var color = DOMAIN_COLORS[domain] || DOMAIN_COLOR_DEFAULT;
+      var isActive = timelineDomainFilter === null || !!timelineDomainFilter[domain];
+      var chip = document.createElement('button');
+      chip.className = 'timeline-domain-chip' + (timelineDomainFilter !== null && isActive ? ' active' : '');
+      chip.style.setProperty('--domain-color', color);
+      var dot = document.createElement('span');
+      dot.className = 'chip-dot';
+      chip.appendChild(dot);
+      var text = document.createElement('span');
+      text.textContent = domain + ' (' + domainSet[domain] + ')';
+      chip.appendChild(text);
+      chip.addEventListener('click', function() {
+        if (timelineDomainFilter === null) {
+          // Switch from "all" to just this domain
+          timelineDomainFilter = {};
+          timelineDomainFilter[domain] = true;
+        } else if (timelineDomainFilter[domain]) {
+          // Toggle off
+          delete timelineDomainFilter[domain];
+          if (Object.keys(timelineDomainFilter).length === 0) {
+            timelineDomainFilter = null; // Back to all
+          }
+        } else {
+          // Toggle on
+          timelineDomainFilter[domain] = true;
+        }
+        updateTimelineData();
+        renderTimelineDomainFilters();
+      });
+      container.appendChild(chip);
+    })(domains[j]);
+  }
+}
+
 function updateTimelineData() {
   if (!window.timelineDataSet) return;
+  var scoped = applyGlobalScope(state.decisions.data, 'scope');
+  var groups = buildTimelineGroups(scoped);
   var items = buildTimelineItems(state.decisions.data);
   window.timelineDataSet.clear();
   window.timelineDataSet.add(items);
+  if (window.timelineGroupSet) {
+    window.timelineGroupSet.clear();
+    window.timelineGroupSet.add(groups);
+  }
 }
 
 function fetchTimelineDecisionDetail(id) {
@@ -2070,11 +2228,348 @@ var ENTITY_COLORS = {
   api_endpoint: '#ec4899'
 };
 
+// Track which entity types are visible (null = all)
+var graphTypeFilter = null;
+
+/* ========== Blackboard Stream View ========== */
+
+var ENTRY_TYPE_COLORS = {
+  warning:    '#ffaa00',
+  constraint: '#ff4466',
+  need:       '#a78bfa',
+  finding:    '#6366f1',
+  decision:   '#00d4aa',
+  question:   '#22d3ee',
+  answer:     '#2dd4bf',
+  status:     '#8892a8',
+  offer:      '#10b981',
+  artifact:   '#fbbf24'
+};
+
+var streamTypeFilter = null;
+
+function getTimeGroupLabel(dateStr) {
+  var d = new Date(dateStr);
+  if (isNaN(d.getTime())) return 'Unknown';
+  var now = new Date();
+  var today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  var yesterday = new Date(today);
+  yesterday.setDate(yesterday.getDate() - 1);
+  var entryDate = new Date(d.getFullYear(), d.getMonth(), d.getDate());
+  if (entryDate.getTime() === today.getTime()) return 'Today';
+  if (entryDate.getTime() === yesterday.getTime()) return 'Yesterday';
+  return d.toLocaleDateString(undefined, { weekday: 'short', month: 'short', day: 'numeric' });
+}
+
+function formatTimeOnly(dateStr) {
+  var d = new Date(dateStr);
+  if (isNaN(d.getTime())) return '--';
+  return d.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' });
+}
+
+function renderStream() {
+  var container = document.getElementById('stream-container');
+  if (!container) return;
+  clearElement(container);
+
+  var entries = applyGlobalScope(state.blackboard.data || [], 'scope');
+
+  // Apply type filter
+  if (streamTypeFilter) {
+    entries = entries.filter(function(e) {
+      return !!streamTypeFilter[e.entry_type];
+    });
+  }
+
+  // Sort newest first
+  entries = entries.slice().sort(function(a, b) {
+    return new Date(b.timestamp) - new Date(a.timestamp);
+  });
+
+  if (entries.length === 0) {
+    container.appendChild(el('p', 'placeholder', 'No entries to display'));
+    return;
+  }
+
+  // Build ID lookup for visible entries (for threading)
+  var visibleIds = {};
+  for (var i = 0; i < entries.length; i++) {
+    visibleIds[entries[i].id] = true;
+  }
+
+  // Group by date and render cards
+  var currentGroup = null;
+  for (var i = 0; i < entries.length; i++) {
+    var entry = entries[i];
+    var groupLabel = getTimeGroupLabel(entry.timestamp);
+
+    // Insert time group header if new group
+    if (groupLabel !== currentGroup) {
+      currentGroup = groupLabel;
+      var header = el('div', 'stream-time-group');
+      var headerLine = el('span', 'stream-time-line');
+      var headerLabel = el('span', 'stream-time-label', groupLabel);
+      header.appendChild(headerLine);
+      header.appendChild(headerLabel);
+      header.appendChild(headerLine.cloneNode(true));
+      container.appendChild(header);
+    }
+
+    // Create card
+    var typeColor = ENTRY_TYPE_COLORS[entry.entry_type] || '#6b7280';
+    var card = el('div', 'stream-card');
+    card.setAttribute('data-id', entry.id || '');
+    card.style.setProperty('--card-color', typeColor);
+
+    if (state.blackboard.selectedId && entry.id === state.blackboard.selectedId) {
+      card.classList.add('selected');
+    }
+
+    // Type badge
+    var badge = el('div', 'stream-card-badge');
+    var badgeDot = el('span', 'stream-badge-dot');
+    badge.appendChild(badgeDot);
+    badge.appendChild(document.createTextNode(' ' + (entry.entry_type || 'unknown')));
+    card.appendChild(badge);
+
+    // Summary
+    var summary = el('div', 'stream-card-summary', truncate(entry.summary, 120));
+    card.appendChild(summary);
+
+    // Footer: scope + time
+    var footer = el('div', 'stream-card-footer');
+    if (entry.scope) {
+      footer.appendChild(el('span', 'stream-card-scope', truncate(entry.scope, 40)));
+    }
+    footer.appendChild(el('span', 'stream-card-time', formatTimeOnly(entry.timestamp)));
+
+    // Linked icon for off-screen relates_to
+    if (entry.relates_to && entry.relates_to.length) {
+      var hasOffscreen = false;
+      for (var r = 0; r < entry.relates_to.length; r++) {
+        if (!visibleIds[entry.relates_to[r]]) { hasOffscreen = true; break; }
+      }
+      if (hasOffscreen) {
+        var linkIcon = el('span', 'stream-card-link', '\u{1F517}');
+        linkIcon.title = 'Has related entries not visible in current filter';
+        footer.appendChild(linkIcon);
+      }
+    }
+
+    card.appendChild(footer);
+
+    // Click handler — render detail in stream detail panel
+    (function(e) {
+      card.addEventListener('click', function() {
+        state.blackboard.selectedId = e.id;
+        var allCards = container.querySelectorAll('.stream-card');
+        for (var c = 0; c < allCards.length; c++) {
+          allCards[c].classList.remove('selected');
+        }
+        card.classList.add('selected');
+        // Render detail directly into the stream detail panel
+        renderStreamDetail(e);
+      });
+    })(entry);
+
+    container.appendChild(card);
+  }
+
+  // Render thread lines (stub — implemented in Task 4)
+  if (typeof renderStreamThreads === 'function') {
+    renderStreamThreads(container, entries, visibleIds);
+  }
+
+  // Render type filter chips (stub — implemented in Task 5)
+  if (typeof renderStreamTypeFilters === 'function') {
+    renderStreamTypeFilters();
+  }
+}
+
+function renderStreamDetail(entry) {
+  var panel = document.getElementById('blackboard-stream-detail');
+  if (!panel) return;
+  clearElement(panel);
+
+  panel.appendChild(el('h3', null, 'Entry Details'));
+
+  var fields = [
+    { label: 'ID', value: entry.id },
+    { label: 'Timestamp', value: formatTimestamp(entry.timestamp) },
+    { label: 'Type', value: entry.entry_type },
+    { label: 'Summary', value: entry.summary },
+    { label: 'Scope', value: entry.scope },
+    { label: 'Agent ID', value: entry.agent_id },
+    { label: 'Tags', value: (entry.tags && entry.tags.length) ? entry.tags.join(', ') : null }
+  ];
+
+  for (var i = 0; i < fields.length; i++) {
+    var f = fields[i];
+    if (f.value === undefined || f.value === null) continue;
+    var div = el('div', 'detail-field');
+    div.appendChild(el('div', 'detail-label', f.label));
+    if (f.label === 'ID') {
+      var valDiv = el('div', 'detail-value');
+      renderIdValue(valDiv, String(f.value));
+      div.appendChild(valDiv);
+    } else {
+      div.appendChild(el('div', 'detail-value', String(f.value)));
+    }
+    panel.appendChild(div);
+  }
+
+  // Relates To with clickable IDs
+  if (entry.relates_to && entry.relates_to.length) {
+    var rtDiv = el('div', 'detail-field');
+    rtDiv.appendChild(el('div', 'detail-label', 'Relates To'));
+    var rtVal = el('div', 'detail-value');
+    renderIdList(rtVal, entry.relates_to);
+    rtDiv.appendChild(rtVal);
+    panel.appendChild(rtDiv);
+  }
+
+  // Detail field (long text)
+  if (entry.detail) {
+    var detDiv = el('div', 'detail-field');
+    detDiv.appendChild(el('div', 'detail-label', 'Detail'));
+    var detVal = el('div', 'detail-value detail-long-text', entry.detail);
+    detDiv.appendChild(detVal);
+    panel.appendChild(detDiv);
+  }
+}
+
+function renderStreamThreads(container, entries, visibleIds) {
+  // Build map of entry ID -> DOM card element
+  var cardElements = {};
+  var cards = container.querySelectorAll('.stream-card');
+  for (var i = 0; i < cards.length; i++) {
+    var id = cards[i].getAttribute('data-id');
+    if (id) cardElements[id] = cards[i];
+  }
+
+  // Use getBoundingClientRect for positioning (offsetTop unreliable with position:relative cards)
+  var containerRect = container.getBoundingClientRect();
+  var scrollTop = container.scrollTop;
+
+  function cardTop(card) {
+    return card.getBoundingClientRect().top - containerRect.top + scrollTop;
+  }
+  function cardBottom(card) {
+    return card.getBoundingClientRect().bottom - containerRect.top + scrollTop;
+  }
+
+  // For each entry with relates_to, draw thread to visible targets
+  for (var i = 0; i < entries.length; i++) {
+    var entry = entries[i];
+    if (!entry.relates_to || !entry.relates_to.length) continue;
+
+    var sourceCard = cardElements[entry.id];
+    if (!sourceCard) continue;
+
+    for (var r = 0; r < entry.relates_to.length; r++) {
+      var targetId = entry.relates_to[r];
+      var targetCard = cardElements[targetId];
+      if (!targetCard) continue;
+
+      // Determine which card is higher in the DOM
+      var topEl, bottomEl;
+      if (cardTop(sourceCard) < cardTop(targetCard)) {
+        topEl = sourceCard;
+        bottomEl = targetCard;
+      } else {
+        topEl = targetCard;
+        bottomEl = sourceCard;
+      }
+
+      var topBottom = cardBottom(topEl);
+      var bottomTop = cardTop(bottomEl);
+      var height = bottomTop - topBottom;
+
+      if (height > 0) {
+        var thread = el('div', 'stream-thread');
+        var typeColor = ENTRY_TYPE_COLORS[entry.entry_type] || '#6b7280';
+        thread.style.setProperty('--thread-color', typeColor);
+        thread.style.top = topBottom + 'px';
+        thread.style.height = height + 'px';
+        container.appendChild(thread);
+      }
+    }
+  }
+}
+
+function renderStreamTypeFilters() {
+  var container = document.getElementById('stream-type-filters');
+  if (!container) return;
+  clearElement(container);
+
+  // Count entry types from scoped data
+  var scoped = applyGlobalScope(state.blackboard.data || [], 'scope');
+  var typeSet = {};
+  for (var i = 0; i < scoped.length; i++) {
+    var t = scoped[i].entry_type || 'unknown';
+    typeSet[t] = (typeSet[t] || 0) + 1;
+  }
+
+  var types = Object.keys(typeSet).sort(function(a, b) {
+    return typeSet[b] - typeSet[a];
+  });
+
+  if (types.length === 0) return;
+
+  // "All" chip
+  var allChip = document.createElement('button');
+  allChip.className = 'stream-type-chip' + (streamTypeFilter === null ? ' active' : '');
+  allChip.style.setProperty('--type-color', 'var(--accent)');
+  var allDot = document.createElement('span');
+  allDot.className = 'chip-dot';
+  allChip.appendChild(allDot);
+  var allText = document.createElement('span');
+  allText.textContent = 'All';
+  allChip.appendChild(allText);
+  allChip.addEventListener('click', function() {
+    streamTypeFilter = null;
+    renderStream();
+  });
+  container.appendChild(allChip);
+
+  // Per-type chips
+  for (var j = 0; j < types.length; j++) {
+    (function(type) {
+      var color = ENTRY_TYPE_COLORS[type] || '#6b7280';
+      var isActive = streamTypeFilter === null || !!streamTypeFilter[type];
+      var chip = document.createElement('button');
+      chip.className = 'stream-type-chip' + (isActive ? ' active' : '');
+      chip.style.setProperty('--type-color', color);
+      var dot = document.createElement('span');
+      dot.className = 'chip-dot';
+      chip.appendChild(dot);
+      var text = document.createElement('span');
+      text.textContent = type + ' (' + typeSet[type] + ')';
+      chip.appendChild(text);
+      chip.addEventListener('click', function() {
+        if (streamTypeFilter === null) {
+          streamTypeFilter = {};
+          streamTypeFilter[type] = true;
+        } else if (streamTypeFilter[type]) {
+          delete streamTypeFilter[type];
+          if (Object.keys(streamTypeFilter).length === 0) streamTypeFilter = null;
+        } else {
+          streamTypeFilter[type] = true;
+        }
+        renderStream();
+      });
+      container.appendChild(chip);
+    })(types[j]);
+  }
+}
+
 function buildGraphStyles() {
   var isDark = document.documentElement.getAttribute('data-theme') === 'dark';
-  var textColor = isDark ? '#e2e8f0' : '#1a1a2e';
-  var edgeColor = isDark ? '#64748b' : '#94a3b8';
-  var accentColor = isDark ? '#60a5fa' : '#3b82f6';
+  var textColor = isDark ? '#c8d0e0' : '#1a1a2e';
+  var textHaloColor = isDark ? 'rgba(11, 15, 26, 0.85)' : 'rgba(255, 255, 255, 0.85)';
+  var edgeColor = isDark ? 'rgba(100, 116, 139, 0.5)' : 'rgba(148, 163, 184, 0.6)';
+  var edgeLabelColor = isDark ? '#64748b' : '#94a3b8';
+  var accentColor = isDark ? '#00d4aa' : '#00a88a';
 
   var styles = [
     {
@@ -2083,36 +2578,112 @@ function buildGraphStyles() {
         'label': 'data(label)',
         'text-valign': 'bottom',
         'text-halign': 'center',
-        'font-size': '11px',
-        'width': 40,
-        'height': 40,
+        'font-size': '10px',
+        'font-weight': 500,
+        'width': 32,
+        'height': 32,
         'color': textColor,
         'text-margin-y': 6,
         'background-color': '#6b7280',
-        'text-wrap': 'wrap',
-        'text-max-width': '120px'
+        'background-opacity': 0.9,
+        'border-width': 2,
+        'border-color': 'rgba(255, 255, 255, 0.08)',
+        'border-opacity': 1,
+        'text-wrap': 'ellipsis',
+        'text-max-width': '100px',
+        'text-outline-width': 0,
+        'text-background-opacity': 0.8,
+        'text-background-color': textHaloColor,
+        'text-background-padding': '2px',
+        'text-background-shape': 'roundrectangle',
+        'overlay-opacity': 0,
+        'transition-property': 'border-width, border-color, width, height, background-opacity',
+        'transition-duration': '0.15s'
+      }
+    },
+    {
+      selector: 'node:active',
+      style: {
+        'overlay-opacity': 0
       }
     },
     {
       selector: 'edge',
       style: {
-        'width': 2,
+        'width': 1.5,
         'line-color': edgeColor,
         'target-arrow-color': edgeColor,
         'target-arrow-shape': 'triangle',
+        'arrow-scale': 0.8,
         'curve-style': 'bezier',
         'label': 'data(label)',
         'font-size': '8px',
-        'color': textColor,
+        'color': edgeLabelColor,
         'text-rotation': 'autorotate',
-        'text-margin-y': -8
+        'text-margin-y': -8,
+        'text-outline-width': 0,
+        'text-background-opacity': 0.75,
+        'text-background-color': textHaloColor,
+        'text-background-padding': '1px',
+        'text-background-shape': 'roundrectangle',
+        'opacity': 0.7,
+        'transition-property': 'opacity, width, line-color',
+        'transition-duration': '0.15s'
       }
     },
     {
       selector: 'node:selected',
       style: {
         'border-width': 3,
-        'border-color': accentColor
+        'border-color': accentColor,
+        'border-opacity': 1,
+        'width': 40,
+        'height': 40,
+        'background-opacity': 1,
+        'overlay-color': accentColor,
+        'overlay-padding': 6,
+        'overlay-opacity': 0.15,
+        'z-index': 10
+      }
+    },
+    {
+      selector: 'node.hover',
+      style: {
+        'border-width': 2.5,
+        'border-color': accentColor,
+        'width': 36,
+        'height': 36,
+        'background-opacity': 1,
+        'z-index': 5
+      }
+    },
+    {
+      selector: 'node.dimmed',
+      style: {
+        'opacity': 0.2,
+        'text-opacity': 0.15
+      }
+    },
+    {
+      selector: 'edge.dimmed',
+      style: {
+        'opacity': 0.08
+      }
+    },
+    {
+      selector: 'node.highlighted',
+      style: {
+        'opacity': 1,
+        'text-opacity': 1
+      }
+    },
+    {
+      selector: 'edge.highlighted',
+      style: {
+        'opacity': 1,
+        'width': 2.5,
+        'line-color': accentColor,
+        'target-arrow-color': accentColor
       }
     }
   ];
@@ -2139,10 +2710,9 @@ function renderGraphLegend() {
   for (var i = 0; i < types.length; i++) {
     var item = document.createElement('span');
     item.className = 'graph-legend-item';
-    item.style.cssText = 'display:inline-flex;align-items:center;gap:4px;margin-right:12px;font-size:0.8rem;';
     var dot = document.createElement('span');
     dot.className = 'graph-legend-dot';
-    dot.style.cssText = 'width:10px;height:10px;border-radius:50%;display:inline-block;background:' + ENTITY_COLORS[types[i]];
+    dot.style.background = ENTITY_COLORS[types[i]];
     var label = document.createElement('span');
     label.textContent = types[i];
     item.appendChild(dot);
@@ -2151,6 +2721,90 @@ function renderGraphLegend() {
   }
 }
 
+function renderGraphTypeFilters() {
+  var container = document.getElementById('graph-type-filters');
+  if (!container) return;
+  clearElement(container);
+
+  // Count entity types
+  var typeSet = {};
+  var scoped = applyGlobalScope(state.graph.data, 'scope');
+  for (var i = 0; i < scoped.length; i++) {
+    var t = scoped[i].type || 'concept';
+    typeSet[t] = (typeSet[t] || 0) + 1;
+  }
+  var types = Object.keys(typeSet).sort();
+  if (types.length <= 1) return;
+
+  // "All" chip
+  var allChip = document.createElement('button');
+  allChip.className = 'graph-type-chip' + (graphTypeFilter === null ? ' active' : '');
+  allChip.textContent = 'All';
+  allChip.style.setProperty('--type-color', 'var(--accent)');
+  allChip.addEventListener('click', function() {
+    graphTypeFilter = null;
+    applyGraphTypeFilter();
+    renderGraphTypeFilters();
+  });
+  container.appendChild(allChip);
+
+  for (var j = 0; j < types.length; j++) {
+    (function(type) {
+      var color = ENTITY_COLORS[type] || '#6b7280';
+      var isActive = graphTypeFilter === null || !!graphTypeFilter[type];
+      var chip = document.createElement('button');
+      chip.className = 'graph-type-chip' + (graphTypeFilter !== null && isActive ? ' active' : '');
+      chip.style.setProperty('--type-color', color);
+      var dot = document.createElement('span');
+      dot.className = 'chip-dot';
+      chip.appendChild(dot);
+      var text = document.createElement('span');
+      text.textContent = type + ' (' + typeSet[type] + ')';
+      chip.appendChild(text);
+      chip.addEventListener('click', function() {
+        if (graphTypeFilter === null) {
+          graphTypeFilter = {};
+          graphTypeFilter[type] = true;
+        } else if (graphTypeFilter[type]) {
+          delete graphTypeFilter[type];
+          if (Object.keys(graphTypeFilter).length === 0) graphTypeFilter = null;
+        } else {
+          graphTypeFilter[type] = true;
+        }
+        applyGraphTypeFilter();
+        renderGraphTypeFilters();
+      });
+      container.appendChild(chip);
+    })(types[j]);
+  }
+}
+
+function applyGraphTypeFilter() {
+  if (!window.cyInstance) return;
+  if (graphTypeFilter === null) {
+    // Show all
+    window.cyInstance.nodes().show();
+    window.cyInstance.edges().show();
+  } else {
+    window.cyInstance.nodes().forEach(function(n) {
+      var type = n.data('type') || 'concept';
+      if (graphTypeFilter[type]) {
+        n.show();
+      } else {
+        n.hide();
+      }
+    });
+    // Only show edges where both endpoints are visible
+    window.cyInstance.edges().forEach(function(e) {
+      if (e.source().visible() && e.target().visible()) {
+        e.show();
+      } else {
+        e.hide();
+      }
+    });
+  }
+}
+
 function buildGraphElements() {
   var entities = state.graph.data;
   var relations = state.graph.relations;
@@ -2201,12 +2855,14 @@ function initGraphVis() {
       canvas.appendChild(msg);
     }
     renderGraphLegend();
+    renderGraphTypeFilters();
     return;
   }
 
   // Create-once guard: if already initialized, just update data
   if (window.cyInstance) {
     updateGraphData();
+    renderGraphTypeFilters();
     return;
   }
 
@@ -2225,16 +2881,34 @@ function initGraphVis() {
     layout: {
       name: 'cose',
       animate: true,
-      animationDuration: 500,
-      nodeRepulsion: function() { return 12000; },
-      idealEdgeLength: function() { return 100; },
-      nodeOverlap: 20,
-      padding: 40
+      animationDuration: 600,
+      animationEasing: 'ease-out',
+      nodeRepulsion: function() { return 14000; },
+      idealEdgeLength: function() { return 120; },
+      nodeOverlap: 24,
+      padding: 50
     },
     style: buildGraphStyles(),
-    minZoom: 0.2,
+    minZoom: 0.15,
     maxZoom: 5,
-    wheelSensitivity: 0.2
+    wheelSensitivity: 0.3,
+    pixelRatio: 'auto'
+  });
+
+  // Hover: highlight node and its neighborhood
+  window.cyInstance.on('mouseover', 'node', function(evt) {
+    var node = evt.target;
+    node.addClass('hover');
+    // Dim everything, highlight neighborhood
+    var neighborhood = node.closedNeighborhood();
+    window.cyInstance.elements().not(neighborhood).addClass('dimmed');
+    neighborhood.addClass('highlighted');
+    neighborhood.connectedEdges().addClass('highlighted');
+  });
+
+  window.cyInstance.on('mouseout', 'node', function(evt) {
+    evt.target.removeClass('hover');
+    window.cyInstance.elements().removeClass('dimmed highlighted');
   });
 
   // Click node to show detail and expand neighbors
@@ -2261,7 +2935,15 @@ function initGraphVis() {
     }
   });
 
+  // Click background to clear highlight
+  window.cyInstance.on('tap', function(evt) {
+    if (evt.target === window.cyInstance) {
+      window.cyInstance.elements().removeClass('dimmed highlighted hover');
+    }
+  });
+
   renderGraphLegend();
+  renderGraphTypeFilters();
   setupGraphControls();
 }
 
@@ -2273,33 +2955,42 @@ function setupGraphControls() {
 
   if (zoomIn) {
     zoomIn.onclick = function() {
-      if (window.cyInstance) window.cyInstance.zoom(window.cyInstance.zoom() * 1.2);
+      if (window.cyInstance) {
+        window.cyInstance.animate({ zoom: window.cyInstance.zoom() * 1.3, center: window.cyInstance.extent() }, { duration: 250, easing: 'ease-in-out-quad' });
+      }
     };
   }
 
   if (zoomOut) {
     zoomOut.onclick = function() {
-      if (window.cyInstance) window.cyInstance.zoom(window.cyInstance.zoom() * 0.8);
+      if (window.cyInstance) {
+        window.cyInstance.animate({ zoom: window.cyInstance.zoom() * 0.7, center: window.cyInstance.extent() }, { duration: 250, easing: 'ease-in-out-quad' });
+      }
     };
   }
 
   if (fit) {
     fit.onclick = function() {
-      if (window.cyInstance) window.cyInstance.fit(null, 40);
+      if (window.cyInstance) window.cyInstance.animate({ fit: { padding: 50 } }, { duration: 400, easing: 'ease-in-out-quad' });
     };
   }
 
   if (reset) {
     reset.onclick = function() {
       if (window.cyInstance) {
+        // Reset type filter
+        graphTypeFilter = null;
+        applyGraphTypeFilter();
+        renderGraphTypeFilters();
         var layout = window.cyInstance.layout({
           name: 'cose',
           animate: true,
-          animationDuration: 500,
-          nodeRepulsion: function() { return 12000; },
-          idealEdgeLength: function() { return 100; },
-          nodeOverlap: 20,
-          padding: 40
+          animationDuration: 600,
+          animationEasing: 'ease-out',
+          nodeRepulsion: function() { return 14000; },
+          idealEdgeLength: function() { return 120; },
+          nodeOverlap: 24,
+          padding: 50
         });
         layout.run();
       }
@@ -2655,9 +3346,14 @@ document.addEventListener("DOMContentLoaded", function() {
 
   // Search input: debounced performSearch on "input" event
   var searchInput = document.getElementById("search-input");
+  var clearBtn = document.getElementById("search-clear-btn");
   if (searchInput) {
     var debouncedSearch = debounce(performSearch, 300);
-    searchInput.addEventListener("input", debouncedSearch);
+    searchInput.addEventListener("input", function() {
+      // Show/hide clear icon based on input content
+      if (clearBtn) clearBtn.style.display = searchInput.value ? "flex" : "none";
+      debouncedSearch();
+    });
     // Enter key: immediate performSearch (bypass debounce)
     searchInput.addEventListener("keydown", function(e) {
       if (e.key === "Enter") {
@@ -2667,18 +3363,12 @@ document.addEventListener("DOMContentLoaded", function() {
     });
   }
 
-  // Search button: performSearch on click
-  var searchBtn = document.getElementById("search-btn");
-  if (searchBtn) {
-    searchBtn.addEventListener("click", performSearch);
-  }
-
   // Clear button: clear search input, reset search state, switch to stats tab
-  var clearBtn = document.getElementById("search-clear-btn");
   if (clearBtn) {
     clearBtn.addEventListener("click", function() {
       var input = document.getElementById("search-input");
       if (input) input.value = "";
+      clearBtn.style.display = "none";
       state.search.query = "";
       state.search.results = [];
       state.search.selectedId = null;
@@ -2688,6 +3378,21 @@ document.addEventListener("DOMContentLoaded", function() {
     });
   }
 
+  // Search type chips: toggle active state
+  var typeChips = document.querySelectorAll(".search-chip[data-type]");
+  for (var tc = 0; tc < typeChips.length; tc++) {
+    (function(chip) {
+      chip.addEventListener("click", function() {
+        chip.classList.toggle("active");
+        // Ensure at least one type remains active
+        var active = document.querySelectorAll(".search-chip.active[data-type]");
+        if (active.length === 0) chip.classList.add("active");
+        // Re-run search if there's a query
+        if (state.search.query) performSearch();
+      });
+    })(typeChips[tc]);
+  }
+
   // Global scope filter
   var globalScopeInput = document.getElementById("global-scope");
   if (globalScopeInput) {
@@ -2704,6 +3409,7 @@ document.addEventListener("DOMContentLoaded", function() {
         if (indicator2) indicator2.style.display = "none";
       }
       // Reset pagination, re-render active tab
+      streamTypeFilter = null;
       state.blackboard.page = 1;
       state.decisions.page = 1;
       state.graph.page = 1;