recallnest 1.4.1 → 2.2.0

package/assets/ui/app.js

@@ -1,6 +1,7 @@
 const queryInput = document.getElementById('queryInput');
 const profileInput = document.getElementById('profileInput');
 const scopeInput = document.getElementById('scopeInput');
+const topicTagInput = document.getElementById('topicTagInput');
 const limitInput = document.getElementById('limitInput');
 const formatInput = document.getElementById('formatInput');
 const resultOutput = document.getElementById('resultOutput');
@@ -24,7 +25,7 @@ const toggleTraceButton = document.getElementById('toggleTraceButton');
 const viewTabs = Array.from(document.querySelectorAll('.view-tab'));
 const quickCards = Array.from(document.querySelectorAll('[data-quick-action]'));
 
-let currentView = 'search';
+let currentView = 'dashboard';
 let lastItems = [];
 let lastMode = 'search';
 let lastArtifact = null;
@@ -38,6 +39,7 @@ let lastExports = [];
 let currentViewFilter = '';
 let activeAssetTag = '';
 let lastDirtyBriefCount = 0;
+let lastSkills = [];
 
 async function api(path, payload) {
   const response = await fetch(path, {
@@ -57,6 +59,7 @@ function currentPayload() {
     query: queryInput.value.trim(),
     profile: profileInput.value,
     scope: scopeInput.value.trim() || undefined,
+    topicTag: topicTagInput.value || undefined,
     limit: Number(limitInput.value) || 5,
   };
 }
@@ -526,6 +529,13 @@ function renderMainSurface() {
     return;
   }
 
+  if (currentView === 'skills') {
+    resultTitle.textContent = 'Executable Skills';
+    resultMeta.textContent = `Skills: ${lastSkills.length}`;
+    renderSkillsView(lastSkills);
+    return;
+  }
+
   if (currentView === 'exports') {
     const filtered = filterExports(lastExports);
     resultTitle.textContent = 'Export Artifacts';
@@ -606,6 +616,97 @@ async function loadExports() {
   }
 }
 
+async function loadSkills() {
+  try {
+    const data = await api('/api/skills');
+    lastSkills = data.items || [];
+    if (currentView === 'skills') renderMainSurface();
+  } catch (error) {
+    statusLine.textContent = String(error.message || error);
+  }
+}
+
+function renderSkillsView(items) {
+  if (!items || items.length === 0) {
+    resultCards.textContent = '';
+    const emptyDiv = document.createElement('div');
+    emptyDiv.className = 'empty-state';
+    emptyDiv.textContent = 'No skills stored yet. Use store_skill via MCP to add executable skills.';
+    resultCards.appendChild(emptyDiv);
+    return;
+  }
+
+  resultCards.textContent = '';
+  for (const item of items) {
+    const article = document.createElement('article');
+    article.className = 'list-card result-card';
+    article.dataset.cardId = item.shortId;
+
+    const head = document.createElement('div');
+    head.className = 'list-card-head';
+    const nameEl = document.createElement('strong');
+    nameEl.textContent = item.name;
+    const typeChip = document.createElement('span');
+    typeChip.className = 'card-chip';
+    typeChip.textContent = item.type;
+    head.appendChild(nameEl);
+    head.appendChild(typeChip);
+
+    const desc = document.createElement('p');
+    desc.className = 'result-snippet';
+    desc.textContent = item.description;
+
+    const meta = document.createElement('div');
+    meta.className = 'result-card-meta';
+    const triggerSpan = document.createElement('span');
+    triggerSpan.textContent = 'Trigger: ' + item.trigger;
+    const scopeSpan = document.createElement('span');
+    scopeSpan.textContent = item.scope;
+    meta.appendChild(triggerSpan);
+    meta.appendChild(scopeSpan);
+
+    const actions = document.createElement('div');
+    actions.className = 'result-card-actions';
+    const detailBtn = document.createElement('button');
+    detailBtn.className = 'card-chip';
+    detailBtn.dataset.toggleId = item.shortId;
+    detailBtn.textContent = 'Details';
+    const copyBtn = document.createElement('button');
+    copyBtn.className = 'card-chip';
+    copyBtn.dataset.copyText = encodeURIComponent(item.implementation);
+    copyBtn.textContent = 'Copy Code';
+    actions.appendChild(detailBtn);
+    actions.appendChild(copyBtn);
+
+    const detail = document.createElement('div');
+    detail.className = 'result-card-detail';
+    const implBlock = document.createElement('div');
+    implBlock.className = 'detail-block';
+    const implLabel = document.createElement('strong');
+    implLabel.textContent = 'Implementation';
+    const implPre = document.createElement('pre');
+    implPre.textContent = item.implementation;
+    implBlock.appendChild(implLabel);
+    implBlock.appendChild(implPre);
+    const tagsBlock = document.createElement('div');
+    tagsBlock.className = 'detail-block';
+    const tagsLabel = document.createElement('strong');
+    tagsLabel.textContent = 'Tags: ' + ((item.tags || []).join(', ') || '-');
+    tagsBlock.appendChild(tagsLabel);
+    detail.appendChild(implBlock);
+    detail.appendChild(tagsBlock);
+
+    article.appendChild(head);
+    article.appendChild(desc);
+    article.appendChild(meta);
+    article.appendChild(actions);
+    article.appendChild(detail);
+    resultCards.appendChild(article);
+  }
+
+  bindResultCardActions();
+}
+
 async function loadStats() {
   try {
     const data = await api('/api/stats');
@@ -723,6 +824,12 @@ async function handleQuickAction(action) {
     await runMode('distill');
     return;
   }
+  if (action === 'skills') {
+    setActiveView('skills');
+    await loadSkills();
+    renderMainSurface();
+    return;
+  }
   if (action === 'pin') {
     pinMemoryId.focus();
     pinMemoryId.scrollIntoView({ behavior: 'smooth', block: 'center' });
@@ -737,6 +844,9 @@ viewTabs.forEach((tab) => {
     if (view === 'pins') {
       await loadPins();
     }
+    if (view === 'skills') {
+      await loadSkills();
+    }
     if (view === 'exports') {
       await loadExports();
     }
@@ -794,7 +904,7 @@ assetTagBar.addEventListener('click', (event) => {
 
 queryInput.value = 'telegram bridge';
 profileInput.value = 'debug';
-setActiveView('search');
+setActiveView('dashboard');
 renderArtifactBar();
 renderStats();
 renderPinsPanel();
@@ -804,4 +914,118 @@ renderMainSurface();
 loadPins();
 loadExports();
 loadStats();
-runMode('search');
+
+// ---------------------------------------------------------------------------
+// Dashboard
+// ---------------------------------------------------------------------------
+
+const dashTotal = document.getElementById('dashTotal');
+const dashHealth = document.getElementById('dashHealth');
+const dashWeek = document.getElementById('dashWeek');
+const dashMonth = document.getElementById('dashMonth');
+const dashCategoryBars = document.getElementById('dashCategoryBars');
+const dashLintSummary = document.getElementById('dashLintSummary');
+const dashStaleList = document.getElementById('dashStaleList');
+const dashStaleCount = document.getElementById('dashStaleCount');
+const dashboardView = document.getElementById('dashboardView');
+const searchView = document.getElementById('searchView');
+const resultView = document.getElementById('resultView');
+const sideView = document.getElementById('sideView');
+const refreshDashboard = document.getElementById('refreshDashboard');
+
+const CATEGORY_COLORS = {
+  profile: '#f59e0b',
+  preferences: '#3b82f6',
+  entities: '#10b981',
+  events: '#6b7280',
+  cases: '#ef4444',
+  patterns: '#8b5cf6',
+};
+
+async function loadDashboard() {
+  try {
+    const [statsRes, lintRes, staleRes] = await Promise.all([
+      fetch('/api/dashboard-stats'),
+      fetch('/api/lint-summary'),
+      fetch('/api/stale-memories'),
+    ]);
+    const stats = await statsRes.json();
+    const lint = await lintRes.json();
+    const stale = await staleRes.json();
+
+    dashTotal.textContent = stats.totalCount.toLocaleString();
+    dashWeek.textContent = '+' + stats.growth.thisWeek;
+    dashMonth.textContent = '+' + stats.growth.thisMonth;
+    dashHealth.textContent = lint.healthScore + '/100';
+    dashHealth.className = 'stat-value ' + (lint.healthScore >= 80 ? 'good' : lint.healthScore >= 50 ? 'warn' : 'bad');
+
+    const cats = stats.categoryCounts || {};
+    const maxCount = Math.max(1, ...Object.values(cats));
+    const barHtml = Object.entries(cats)
+      .sort((a, b) => b[1] - a[1])
+      .map(([cat, count]) => {
+        const pct = Math.round((count / maxCount) * 100);
+        const color = CATEGORY_COLORS[cat] || '#6b7280';
+        return '<div class="bar-row">'
+          + '<span class="bar-label">' + escapeHtml(cat) + '</span>'
+          + '<div class="bar-track"><div class="bar-fill" style="width:' + pct + '%;background:' + color + '"></div></div>'
+          + '<span class="bar-count">' + count + '</span>'
+          + '</div>';
+      }).join('');
+    dashCategoryBars.innerHTML = barHtml;
+
+    const s = lint.summary;
+    const issues = [];
+    if (s.contradictions > 0) issues.push(s.contradictions + ' contradiction' + (s.contradictions > 1 ? 's' : ''));
+    if (s.duplicates > 0) issues.push(s.duplicates + ' duplicate' + (s.duplicates > 1 ? 's' : ''));
+    if (s.staleMemories > 0) issues.push(s.staleMemories + ' stale');
+    if (s.orphans > 0) issues.push(s.orphans + ' orphan' + (s.orphans > 1 ? 's' : ''));
+    if (issues.length === 0) {
+      dashLintSummary.innerHTML = '<div class="lint-ok">All Clear — no issues found</div>';
+    } else {
+      dashLintSummary.innerHTML = issues.map(function(i) {
+        return '<div class="lint-issue">' + escapeHtml(i) + '</div>';
+      }).join('');
+    }
+
+    dashStaleCount.textContent = stale.count;
+    if (stale.items.length === 0) {
+      dashStaleList.innerHTML = '<div class="lint-ok">No stale memories</div>';
+    } else {
+      dashStaleList.innerHTML = stale.items
+        .map(function(item) { return '<div class="stale-item">' + escapeHtml(item.detail) + '</div>'; })
+        .join('');
+    }
+  } catch (err) {
+    console.error('Dashboard load error:', err);
+    dashLintSummary.textContent = 'Failed to load dashboard data';
+  }
+}
+
+const originalViewTabs = Array.from(document.querySelectorAll('.view-tab'));
+for (const tab of originalViewTabs) {
+  tab.addEventListener('click', () => {
+    const view = tab.dataset.view;
+    originalViewTabs.forEach(t => t.classList.toggle('is-active', t === tab));
+
+    if (view === 'dashboard') {
+      if (dashboardView) dashboardView.classList.remove('is-hidden');
+      if (searchView) searchView.classList.add('is-hidden');
+      if (resultView) resultView.classList.add('is-hidden');
+      if (sideView) sideView.classList.add('is-hidden');
+    } else {
+      if (dashboardView) dashboardView.classList.add('is-hidden');
+      if (searchView) searchView.classList.remove('is-hidden');
+      if (resultView) resultView.classList.remove('is-hidden');
+      if (sideView) sideView.classList.remove('is-hidden');
+    }
+
+    currentView = view;
+  });
+}
+
+if (refreshDashboard) {
+  refreshDashboard.addEventListener('click', loadDashboard);
+}
+
+loadDashboard();

package/assets/ui/index.html

@@ -11,25 +11,30 @@
       <header class="hero">
         <div>
           <p class="eyebrow">RecallNest</p>
-          <h1>AI transcript memory workbench.</h1>
-          <p class="subtitle">Search, explain, distill, pin.</p>
+          <h1>Shared memory layer workbench.</h1>
+          <p class="subtitle">Search, distill, pin, import, skills.</p>
         </div>
         <div class="hero-badge">
-          <span>MCP-native</span>
-          <span>Hybrid Retrieval</span>
-          <span>Asset Recall</span>
+          <span>38 MCP Tools</span>
+          <span>6-Channel Hybrid</span>
+          <span>KG + PPR</span>
+          <span>1168 Tests</span>
         </div>
       </header>
 
       <section class="brand-strip">
         <button class="brand-card quick-card" data-quick-action="search">
           <strong>Search</strong>
-          <span>run ranked recall</span>
+          <span>hybrid recall</span>
         </button>
         <button class="brand-card quick-card" data-quick-action="distill">
           <strong>Distill</strong>
           <span>build a briefing</span>
         </button>
+        <button class="brand-card quick-card" data-quick-action="skills">
+          <strong>Skills</strong>
+          <span>executable patterns</span>
+        </button>
         <button class="brand-card quick-card" data-quick-action="pin">
           <strong>Pin</strong>
           <span>jump to pin flow</span>
@@ -37,14 +42,58 @@
       </section>
 
       <main class="workspace">
-        <section class="control-panel card">
+        <section id="dashboardView" class="dashboard-view card">
+          <div class="section-head">
+            <h2>Memory Dashboard</h2>
+            <button id="refreshDashboard" class="ghost-button">Refresh</button>
+          </div>
+
+          <div class="dash-stats-row" id="dashStatsRow">
+            <div class="stat-card">
+              <span class="stat-value" id="dashTotal">-</span>
+              <span class="stat-label">Total Memories</span>
+            </div>
+            <div class="stat-card">
+              <span class="stat-value" id="dashHealth">-</span>
+              <span class="stat-label">Health Score</span>
+            </div>
+            <div class="stat-card">
+              <span class="stat-value" id="dashWeek">-</span>
+              <span class="stat-label">This Week</span>
+            </div>
+            <div class="stat-card">
+              <span class="stat-value" id="dashMonth">-</span>
+              <span class="stat-label">This Month</span>
+            </div>
+          </div>
+
+          <div class="dash-grid">
+            <div class="dash-panel">
+              <h3>Category Distribution</h3>
+              <div id="dashCategoryBars" class="category-bars"></div>
+            </div>
+            <div class="dash-panel">
+              <h3>Lint Summary</h3>
+              <div id="dashLintSummary" class="lint-summary">Loading...</div>
+            </div>
+          </div>
+
+          <div class="dash-panel full-width">
+            <h3>Stale Memories <span id="dashStaleCount" class="badge">0</span></h3>
+            <div id="dashStaleList" class="stale-list">Loading...</div>
+          </div>
+        </section>
+
+        <section class="control-panel card is-hidden" id="searchView">
           <div class="section-head">
             <h2>Query Console</h2>
             <button id="statsButton" class="ghost-button">Refresh Stats</button>
           </div>
 
           <div class="view-switch" id="viewSwitch">
-            <button class="view-tab is-active" data-view="search">Search</button>
+            <button class="view-tab is-active" data-view="dashboard">Dashboard</button>
+            <button class="view-tab" data-view="search">Search</button>
+            <button class="view-tab" data-view="skills">Skills</button>
             <button class="view-tab" data-view="pins">Assets</button>
             <button class="view-tab" data-view="exports">Exports</button>
           </div>
@@ -70,7 +119,28 @@
             </label>
           </div>
 
-          <div class="grid two-up">
+          <div class="grid three-up">
+            <label class="field">
+              <span>Topic Tag</span>
+              <select id="topicTagInput">
+                <option value="">all topics</option>
+                <option value="auth">auth</option>
+                <option value="deploy">deploy</option>
+                <option value="infra">infra</option>
+                <option value="testing">testing</option>
+                <option value="database">database</option>
+                <option value="api">api</option>
+                <option value="ui">ui</option>
+                <option value="perf">perf</option>
+                <option value="security">security</option>
+                <option value="memory">memory</option>
+                <option value="mcp">mcp</option>
+                <option value="llm">llm</option>
+                <option value="config">config</option>
+                <option value="data">data</option>
+                <option value="docs">docs</option>
+              </select>
+            </label>
             <label class="field">
               <span>Limit</span>
               <input id="limitInput" type="number" value="5" min="1" max="20" />
@@ -95,7 +165,7 @@
           <p id="statusLine" class="status-line">Ready.</p>
         </section>
 
-        <section class="result-panel card">
+        <section class="result-panel card is-hidden" id="resultView">
           <div class="section-head">
             <h2 id="resultTitle">Result Surface</h2>
             <button id="reloadPinsButton" class="ghost-button">Load Assets</button>
@@ -113,7 +183,7 @@
           <div id="resultCards" class="result-cards"></div>
         </section>
 
-        <section class="side-panel card">
+        <section class="side-panel card is-hidden" id="sideView">
           <div class="section-head">
             <h2>Recall Actions</h2>
           </div>

package/assets/ui/styles.css

@@ -170,7 +170,7 @@ h2, h3 {
 
 .view-switch {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(4, 1fr);
   gap: 8px;
   margin-bottom: 14px;
 }
@@ -206,6 +206,11 @@ textarea { resize: vertical; min-height: 120px; }
   grid-template-columns: 1fr 1fr;
   gap: 12px;
 }
+.grid.three-up {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 12px;
+}
 
 .action-row {
   display: flex;
@@ -595,7 +600,7 @@ textarea { resize: vertical; min-height: 120px; }
     width: min(100vw - 18px, 100%);
     padding-top: 16px;
   }
-  .grid.two-up {
+  .grid.two-up, .grid.three-up {
     grid-template-columns: 1fr;
   }
   .card {
@@ -603,3 +608,174 @@ textarea { resize: vertical; min-height: 120px; }
     padding: 16px;
   }
 }
+
+.is-hidden {
+  display: none !important;
+}
+
+/* ---------------------------------------------------------------------------
+   Dashboard
+   --------------------------------------------------------------------------- */
+
+.dashboard-view {
+  grid-column: 1 / -1;
+}
+
+.dash-stats-row {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.stat-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 1.25rem;
+  border-radius: 0.75rem;
+  background: rgba(29, 42, 43, 0.05);
+  border: 1px solid var(--line);
+}
+
+.stat-value {
+  font-size: 2rem;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.2;
+}
+
+.stat-value.good { color: #10b981; }
+.stat-value.warn { color: #f59e0b; }
+.stat-value.bad  { color: #ef4444; }
+
+.stat-label {
+  font-size: 0.8rem;
+  color: var(--muted);
+  margin-top: 0.25rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.dash-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.dash-panel {
+  padding: 1rem;
+  border-radius: 0.75rem;
+  background: rgba(29, 42, 43, 0.05);
+  border: 1px solid var(--line);
+}
+
+.dash-panel.full-width {
+  grid-column: 1 / -1;
+}
+
+.dash-panel h3 {
+  font-size: 0.85rem;
+  font-weight: 600;
+  margin-bottom: 0.75rem;
+  color: var(--ink);
+}
+
+.badge {
+  display: inline-block;
+  background: rgba(29, 42, 43, 0.08);
+  color: var(--muted);
+  padding: 0.1em 0.5em;
+  border-radius: 999px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  margin-left: 0.5rem;
+}
+
+/* Category bar chart */
+.category-bars {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.bar-row {
+  display: grid;
+  grid-template-columns: 5.5rem 1fr 2.5rem;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.bar-label {
+  font-size: 0.8rem;
+  color: var(--muted);
+  text-align: right;
+}
+
+.bar-track {
+  height: 1.25rem;
+  background: rgba(29, 42, 43, 0.06);
+  border-radius: 0.25rem;
+  overflow: hidden;
+}
+
+.bar-fill {
+  height: 100%;
+  border-radius: 0.25rem;
+  transition: width 0.4s ease;
+}
+
+.bar-count {
+  font-size: 0.8rem;
+  color: var(--muted);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Lint summary */
+.lint-summary {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.lint-ok {
+  color: var(--accent);
+  font-size: 0.85rem;
+}
+
+.lint-issue {
+  font-size: 0.85rem;
+  padding: 0.35rem 0;
+  border-bottom: 1px solid var(--line);
+}
+
+.lint-issue:last-child {
+  border-bottom: none;
+}
+
+/* Stale list */
+.stale-list {
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.stale-item {
+  font-size: 0.8rem;
+  color: var(--muted);
+  padding: 0.35rem 0;
+  border-bottom: 1px solid var(--line);
+}
+
+.stale-item:last-child {
+  border-bottom: none;
+}
+
+@media (max-width: 768px) {
+  .dash-stats-row {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .dash-grid {
+    grid-template-columns: 1fr;
+  }
+}