memorix 0.5.2 → 0.6.1

package/dist/dashboard/static/app.js

@@ -42,6 +42,15 @@ const i18n = {
     noObsTitle: 'No Observations',
     noObsDesc: 'Use memorix_store to create observations',
     untitled: 'Untitled',
+    exportData: 'Export',
+    deleteObs: 'Delete',
+    deleteConfirm: 'Delete observation #%id%?',
+    deleted: 'Deleted',
+    narrative: 'Narrative',
+    facts: 'Facts',
+    concepts: 'Concepts',
+    files: 'Files Modified',
+    clickToExpand: 'Click to expand',
 
     // Retention
     memoryRetention: 'Memory Retention',
@@ -102,6 +111,15 @@ const i18n = {
     noObsTitle: '暂无观察记录',
     noObsDesc: '使用 memorix_store 创建观察记录',
     untitled: '无标题',
+    exportData: '导出',
+    deleteObs: '删除',
+    deleteConfirm: '确认删除观察 #%id%？',
+    deleted: '已删除',
+    narrative: '叙述',
+    facts: '事实',
+    concepts: '概念',
+    files: '相关文件',
+    clickToExpand: '点击展开',
 
     // Retention
     memoryRetention: '记忆衰减',
@@ -241,9 +259,15 @@ document.querySelectorAll('.nav-btn').forEach(btn => {
 // API Client
 // ============================================================
 
+let selectedProject = ''; // empty = current project (default)
+
 async function api(endpoint) {
   try {
-    const res = await fetch(`/api/${endpoint}`);
+    const sep = endpoint.includes('?') ? '&' : '?';
+    const url = selectedProject
+      ? `/api/${endpoint}${sep}project=${encodeURIComponent(selectedProject)}`
+      : `/api/${endpoint}`;
+    const res = await fetch(url);
     if (!res.ok) throw new Error(`HTTP ${res.status}`);
     return await res.json();
   } catch (err) {
@@ -252,6 +276,49 @@ async function api(endpoint) {
   }
 }
 
+// ============================================================
+// Project Switcher
+// ============================================================
+
+async function initProjectSwitcher() {
+  const select = document.getElementById('project-select');
+  if (!select) return;
+
+  // Fetch project list
+  try {
+    const res = await fetch('/api/projects');
+    const projects = await res.json();
+    if (!Array.isArray(projects) || projects.length === 0) {
+      select.innerHTML = '<option value="">No projects</option>';
+      return;
+    }
+
+    select.innerHTML = '';
+    for (const p of projects) {
+      const opt = document.createElement('option');
+      opt.value = p.isCurrent ? '' : p.id;
+      opt.textContent = p.name + (p.isCurrent ? ' ●' : '');
+      opt.title = p.id;
+      if (p.isCurrent) opt.selected = true;
+      select.appendChild(opt);
+    }
+  } catch {
+    select.innerHTML = '<option value="">Error</option>';
+  }
+
+  // Switch handler
+  select.addEventListener('change', () => {
+    selectedProject = select.value;
+    // Clear all cached pages and reload current
+    Object.keys(loaded).forEach(k => delete loaded[k]);
+    loadPage(currentPage);
+  });
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  initProjectSwitcher();
+});
+
 // ============================================================
 // Page Loaders
 // ============================================================
@@ -711,9 +778,15 @@ async function loadObservations() {
   const types = [...new Set(allObservations.map(o => o.type).filter(Boolean))];
 
   container.innerHTML = `
-    <div class="page-header">
-      <h1 class="page-title">${t('observations')}</h1>
-      <p class="page-subtitle">${allObservations.length} ${t('observationsStored')}</p>
+    <div class="page-header" style="display:flex;align-items:center;justify-content:space-between;">
+      <div>
+        <h1 class="page-title">${t('observations')}</h1>
+        <p class="page-subtitle">${allObservations.length} ${t('observationsStored')}</p>
+      </div>
+      <button class="export-btn" id="btn-export" title="${t('exportData')}">
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 2v8M4 7l4 4 4-4M2 12v2h12v-2"/></svg>
+        ${t('exportData')}
+      </button>
     </div>
 
     <div class="search-bar">
@@ -725,6 +798,12 @@ async function loadObservations() {
     <div class="obs-grid" id="obs-list"></div>
   `;
 
+  // Export handler
+  document.getElementById('btn-export').addEventListener('click', () => {
+    const sep = selectedProject ? `?project=${encodeURIComponent(selectedProject)}` : '';
+    window.open(`/api/export${sep}`, '_blank');
+  });
+
   document.getElementById('obs-search').addEventListener('input', (e) => {
     obsFilter = e.target.value.toLowerCase();
     renderObsList();
@@ -773,25 +852,32 @@ function renderObsList() {
   }
 
   list.innerHTML = filtered.map(obs => `
-    <div class="obs-card">
-      <div class="obs-card-header">
+    <div class="obs-card" data-obs-id="${obs.id}">
+      <div class="obs-card-header" onclick="toggleObsDetail(${obs.id})">
         <span class="obs-card-id">#${obs.id}</span>
         <span class="type-badge" data-type="${obs.type || 'unknown'}">
           ${typeIcons[obs.type] || '❓'} ${obs.type || 'unknown'}
         </span>
         <span class="obs-card-title">${escapeHtml(obs.title || t('untitled'))}</span>
+        <span class="obs-expand-icon">▼</span>
       </div>
       <div class="obs-card-meta">
         <span>📁 ${escapeHtml(obs.entityName || 'unknown')}</span>
         ${obs.createdAt ? `<span>🕐 ${formatTime(obs.createdAt)}</span>` : ''}
         ${obs.accessCount ? `<span>👁 ${obs.accessCount}</span>` : ''}
       </div>
-      ${obs.narrative ? `<div class="obs-card-narrative">${escapeHtml(obs.narrative)}</div>` : ''}
-      ${obs.facts && obs.facts.length > 0 ? `
-        <div class="obs-card-facts">
-          ${obs.facts.map(f => `<span class="fact-tag">${escapeHtml(f)}</span>`).join('')}
+      <div class="obs-detail" id="obs-detail-${obs.id}" style="display:none;">
+        ${obs.narrative ? `<div class="obs-detail-section"><label>${t('narrative')}</label><div class="obs-card-narrative">${escapeHtml(obs.narrative)}</div></div>` : ''}
+        ${obs.facts && obs.facts.length > 0 ? `<div class="obs-detail-section"><label>${t('facts')}</label><div class="obs-card-facts">${obs.facts.map(f => `<span class="fact-tag">${escapeHtml(f)}</span>`).join('')}</div></div>` : ''}
+        ${obs.concepts && obs.concepts.length > 0 ? `<div class="obs-detail-section"><label>${t('concepts')}</label><div class="obs-card-facts">${obs.concepts.map(c => `<span class="fact-tag concept-tag">${escapeHtml(c)}</span>`).join('')}</div></div>` : ''}
+        ${obs.filesModified && obs.filesModified.length > 0 ? `<div class="obs-detail-section"><label>${t('files')}</label><div class="obs-card-facts">${obs.filesModified.map(f => `<span class="fact-tag file-tag">${escapeHtml(f)}</span>`).join('')}</div></div>` : ''}
+        <div class="obs-detail-actions">
+          <button class="delete-btn" onclick="deleteObs(${obs.id}, event)">
+            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 4h12M5 4V3a1 1 0 011-1h4a1 1 0 011 1v1M6 7v5M10 7v5M3 4l1 9a1 1 0 001 1h6a1 1 0 001-1l1-9"/></svg>
+            ${t('deleteObs')}
+          </button>
         </div>
-      ` : ''}
+      </div>
     </div>
   `).join('');
 }
@@ -882,6 +968,52 @@ async function loadRetention() {
   `;
 }
 
+// ============================================================
+// Observation Interactions
+// ============================================================
+
+function toggleObsDetail(id) {
+  const detail = document.getElementById(`obs-detail-${id}`);
+  const card = detail?.closest('.obs-card');
+  if (!detail || !card) return;
+
+  const isOpen = detail.style.display !== 'none';
+  detail.style.display = isOpen ? 'none' : 'block';
+  card.classList.toggle('expanded', !isOpen);
+
+  // Rotate expand icon
+  const icon = card.querySelector('.obs-expand-icon');
+  if (icon) icon.style.transform = isOpen ? '' : 'rotate(180deg)';
+}
+
+async function deleteObs(id, event) {
+  event?.stopPropagation();
+  const msg = t('deleteConfirm').replace('%id%', id);
+  if (!confirm(msg)) return;
+
+  try {
+    const sep = selectedProject ? `?project=${encodeURIComponent(selectedProject)}` : '';
+    const res = await fetch(`/api/observations/${id}${sep}`, { method: 'DELETE' });
+    const data = await res.json();
+    if (data.ok) {
+      // Remove from local array and re-render
+      allObservations = allObservations.filter(o => o.id !== id);
+      renderObsList();
+      // Update counter in header
+      const subtitle = document.querySelector('#page-observations .page-subtitle');
+      if (subtitle) subtitle.textContent = `${allObservations.length} ${t('observationsStored')}`;
+    } else {
+      alert(data.error || 'Delete failed');
+    }
+  } catch (err) {
+    alert('Delete failed: ' + err.message);
+  }
+}
+
+// Make functions globally accessible for onclick handlers
+window.toggleObsDetail = toggleObsDetail;
+window.deleteObs = deleteObs;
+
 // ============================================================
 // Utilities
 // ============================================================

package/dist/dashboard/static/index.html

@@ -18,6 +18,11 @@
     <div class="sidebar-brand">
       <img src="/logo.png" alt="Memorix" class="brand-logo" />
     </div>
+    <div class="project-switcher">
+      <select id="project-select" title="Switch project / 切换项目">
+        <option value="">Loading...</option>
+      </select>
+    </div>
     <div class="sidebar-nav">
       <button class="nav-btn active" data-page="dashboard" title="Dashboard">
         <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">

package/dist/dashboard/static/style.css

@@ -1045,4 +1045,201 @@ body {
   .page {
     padding: 16px;
   }
+}
+
+/* ============================================================
+ * Project Switcher
+ * ============================================================ */
+
+.project-switcher {
+  padding: 4px 8px 8px;
+  display: flex;
+  justify-content: center;
+}
+
+.project-switcher select {
+  width: 44px;
+  height: 28px;
+  background: var(--bg-card);
+  color: var(--text-primary);
+  border: 1px solid var(--border-subtle);
+  border-radius: 6px;
+  font-size: 10px;
+  font-family: var(--font-mono);
+  cursor: pointer;
+  padding: 0 2px;
+  text-align: center;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  transition: var(--transition-fast);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.project-switcher select:hover {
+  border-color: var(--accent-cyan);
+  box-shadow: var(--glow-cyan);
+}
+
+.project-switcher select:focus {
+  outline: none;
+  border-color: var(--accent-cyan);
+}
+
+.project-switcher select option {
+  background: var(--bg-surface);
+  color: var(--text-primary);
+  font-size: 12px;
+  padding: 4px 8px;
+}
+
+/* ============================================================
+ * Export Button
+ * ============================================================ */
+
+.export-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  background: var(--bg-card);
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+  color: var(--text-secondary);
+  font-size: 13px;
+  font-family: var(--font-sans);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.export-btn:hover {
+  background: var(--bg-card-hover);
+  border-color: var(--accent-cyan);
+  color: var(--accent-cyan);
+  box-shadow: var(--glow-cyan);
+}
+
+/* ============================================================
+ * Observation Card Enhancements
+ * ============================================================ */
+
+.obs-card {
+  cursor: pointer;
+  transition: all 0.25s ease;
+}
+
+.obs-card:hover {
+  border-color: var(--border-medium);
+  transform: translateY(-1px);
+}
+
+.obs-card.expanded {
+  border-color: var(--accent-cyan);
+  box-shadow: var(--glow-cyan);
+}
+
+.obs-card-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  position: relative;
+}
+
+.obs-expand-icon {
+  margin-left: auto;
+  font-size: 10px;
+  color: var(--text-muted);
+  transition: transform 0.25s ease;
+  flex-shrink: 0;
+}
+
+.obs-card:hover .obs-expand-icon {
+  color: var(--text-secondary);
+}
+
+/* Observation Detail Section */
+.obs-detail {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid var(--border-subtle);
+  animation: slideDown 0.2s ease;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.obs-detail-section {
+  margin-bottom: 12px;
+}
+
+.obs-detail-section label {
+  display: block;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 6px;
+}
+
+.obs-detail-section .obs-card-narrative {
+  -webkit-line-clamp: unset;
+  white-space: pre-wrap;
+  max-height: none;
+}
+
+/* Tag variants */
+.concept-tag {
+  background: rgba(168, 85, 247, 0.1) !important;
+  border-color: rgba(168, 85, 247, 0.2) !important;
+  color: var(--accent-purple) !important;
+}
+
+.file-tag {
+  background: rgba(59, 130, 246, 0.1) !important;
+  border-color: rgba(59, 130, 246, 0.2) !important;
+  color: var(--accent-blue) !important;
+  font-family: var(--font-mono);
+  font-size: 11px !important;
+}
+
+/* Delete Button */
+.obs-detail-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 12px;
+  padding-top: 8px;
+  border-top: 1px solid var(--border-subtle);
+}
+
+.delete-btn {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 6px 12px;
+  background: transparent;
+  border: 1px solid rgba(239, 68, 68, 0.2);
+  border-radius: 6px;
+  color: var(--accent-red);
+  font-size: 12px;
+  font-family: var(--font-sans);
+  cursor: pointer;
+  transition: all 0.2s;
+  opacity: 0.7;
+}
+
+.delete-btn:hover {
+  background: rgba(239, 68, 68, 0.1);
+  border-color: var(--accent-red);
+  opacity: 1;
 }