sandtable 0.3.0

package/dashboard/js/conventions-viewer.js

@@ -0,0 +1,37 @@
+/**
+ * Conventions Viewer — renders abbreviations and terms in the footer bar.
+ * v2: Checks `configured` flag; shows placeholder until user manually configures.
+ */
+function renderConventions(conventions) {
+  var container = document.getElementById('conventions-bar');
+  if (!container) return;
+
+  // v2: check configured flag — show placeholder if not configured
+  if (conventions.configured === false ||
+      (!('configured' in conventions) && (!conventions.abbreviations || conventions.abbreviations.length === 0) && (!conventions.terms || conventions.terms.length === 0))) {
+    container.innerHTML = '<span class="conventions-placeholder">' +
+      '待配置 — ' +
+      '<span title="编辑 data/conventions.json，手动添加 abbreviations 和 terms 条目，然后将 configured 设为 true">如何配置？</span>' +
+      '</span>';
+    return;
+  }
+
+  // v1 compat or configured:true — render normally
+  var abbrItems = (conventions.abbreviations || []).map(function(a) {
+    return { label: a.short, tooltip: a.full, kind: 'abbr' };
+  });
+  var termItems = (conventions.terms || []).map(function(t) {
+    return { label: t.term, tooltip: t.def, kind: 'term' };
+  });
+  var items = abbrItems.concat(termItems).slice(0, 8);
+
+  if (items.length === 0) {
+    container.innerHTML = '<span style="color:#999;">暂无约定数据</span>';
+    return;
+  }
+
+  container.innerHTML = items.map(function(item) {
+    var cls = item.kind === 'term' ? ' convention-tag term-tag' : 'convention-tag';
+    return '<span class="' + cls + '" title="' + escapeHtml(item.tooltip) + '">' + escapeHtml(item.label) + '</span>';
+  }).join(' · ');
+}

package/dashboard/js/data-loader.js

@@ -0,0 +1,147 @@
+// ---- Shared Utilities ----
+function escapeHtml(str) {
+  if (!str) return '';
+  const div = document.createElement('div');
+  div.textContent = String(str);
+  return div.innerHTML;
+}
+
+function statusIcon(status) {
+  const icons = {
+    completed: '\u2705', in_progress: '\u23F3',
+    pending: '\u2B1C', blocked: '\uD83D\uDEAB',
+    cancelled: '\u274C',
+  };
+  return icons[status] || '\u2B1C';
+}
+
+// ---- v2 Data Loading ----
+async function loadAllData() {
+  const paths = {
+    timeline: '../data/timeline.json',
+    roadmap: '../data/roadmap.json',
+    journalIndex: '../data/journal-index.json',
+    conventions: '../data/conventions.json',
+    brief: '../data/brief.json',
+  };
+
+  const results = {};
+  for (const [key, url] of Object.entries(paths)) {
+    try {
+      const resp = await fetch(url);
+      if (!resp.ok) throw new Error('HTTP ' + resp.status);
+      results[key] = await resp.json();
+    } catch (err) {
+      console.warn('Failed to load ' + url + ':', err.message);
+      results[key] = getDefault(key);
+    }
+  }
+
+  // v2 compat: if timeline.json missing, merge v1 data
+  if (!results.timeline || !results.timeline.elements) {
+    results.timeline = mergeV1Data(results.roadmap, results.journalIndex);
+  }
+
+  return results;
+}
+
+function mergeV1Data(roadmap, journalIndex) {
+  const elements = [];
+
+  for (const phase of (roadmap.phases || [])) {
+    const phaseEl = {
+      id: phase.id || 'phase-default',
+      kind: 'primary', elementType: 'phase',
+      name: phase.name,
+      status: phase.status || 'pending',
+      timeGroup: phase.status === 'completed' ? 'past' : 'current',
+      timeLabel: '', date: null,
+      source: { file: '', title: '' },
+      summary: '', tags: [], related: [],
+      children: [], order: phase.order || 0,
+    };
+
+    for (const ms of (phase.milestones || [])) {
+      const msEl = {
+        id: ms.id, kind: 'primary', elementType: 'milestone',
+        name: ms.name,
+        status: ms.status || 'pending',
+        timeGroup: ms.status === 'completed' ? 'past' : 'current',
+        timeLabel: '', date: null,
+        source: { file: ms.owner || '', title: '' },
+        summary: '', tags: [], related: [],
+        children: [],
+      };
+
+      for (const st of (ms.subtasks || [])) {
+        msEl.children.push({
+          id: st.id, kind: 'primary', elementType: 'subtask',
+          name: st.name,
+          status: st.status || 'pending',
+          timeGroup: st.status === 'completed' ? 'past' : 'current',
+          timeLabel: '', date: null,
+          source: { file: '', title: '' },
+          summary: '', tags: [], related: [],
+          children: [],
+        });
+      }
+      phaseEl.children.push(msEl);
+    }
+    elements.push(phaseEl);
+  }
+
+  for (const evt of (journalIndex.events || [])) {
+    elements.push({
+      id: 'journal-' + elements.length,
+      kind: 'secondary', elementType: evt.type || 'journal',
+      name: evt.title,
+      status: evt.status || 'unknown',
+      timeGroup: 'past',
+      timeLabel: evt.date || '', date: evt.date || null,
+      source: { file: evt.source || '', title: evt.title },
+      summary: evt.summary || '',
+      tags: evt.tags || [], related: evt.related || [],
+      children: [], order: 0,
+    });
+  }
+
+  return {
+    project: roadmap.project || 'Unknown',
+    updated: roadmap.updated || new Date().toISOString(),
+    brief: roadmap.brief || '',
+    elements,
+    filterTypes: [
+      { type: 'journal', label: '日志记录', count: (journalIndex.events || []).length, defaultEnabled: false },
+    ],
+    display: { secondaryTypesDefaultOff: true, conventionsManualOnly: true, maxBriefLength: 200 },
+  };
+}
+
+function getDefault(key) {
+  const defaults = {
+    timeline: {
+      project: 'Unknown', updated: new Date().toISOString(),
+      brief: '未找到 timeline.json。运行 `node src/cli/sandtable.js build` 生成。',
+      elements: [], filterTypes: [],
+    },
+    roadmap: { project: 'Unknown', updated: '', brief: '', phases: [] },
+    journalIndex: { events: [] },
+    conventions: {
+      configured: false,
+      message: '待配置',
+      abbreviations: [], terms: [],
+    },
+    brief: { updated: '', text: '' },
+  };
+  return defaults[key] || {};
+}
+
+// ---- Header Update ----
+function updateHeader(timeline, brief) {
+  var el = document.getElementById('update-time');
+  if (el) el.textContent = '更新：' + (timeline.updated || '').substring(0, 16).replace('T', ' ');
+  el = document.getElementById('brief-text');
+  if (el) el.textContent = brief.text || timeline.brief || '暂无简报';
+}
+
+// ---- Category Tab Management ----

package/dashboard/js/event-stream-renderer.js

@@ -0,0 +1,158 @@
+/**
+ * Event Stream Renderer — §11 7 大事件类 + 8 字段 schema + 3 级优先级
+ */
+
+var EVENT_TYPE_CLASS = {
+  '对齐与拍板': 'badge-decision',
+  '规格演进': 'badge-spec',
+  '代码变更': 'badge-code',
+  '测试与质量': 'badge-test',
+  '审批与交接': 'badge-approval',
+  '运维与基建': 'badge-ops',
+  '教训沉淀': 'badge-lesson',
+};
+
+var PRIORITY_CLASS = {
+  '必记': 'priority-must',
+  '应记': 'priority-should',
+  '可记': 'priority-can',
+};
+
+function renderEventStream(events) {
+  var container = document.getElementById('event-stream-container');
+  if (!container) return;
+
+  var now = new Date().toISOString();
+
+  // Show all events, no time filtering
+  var filtered = events || [];
+
+  if (filtered.length === 0) {
+    container.innerHTML = '<div class="empty-state"><h3>暂无事件</h3><p>事件流将在这里显示。运行 build 刷新数据。</p></div>';
+    return;
+  }
+
+  // Group by date
+  var dateGroups = {};
+  var dateOrder = [];
+  for (var i = 0; i < filtered.length; i++) {
+    var ev = filtered[i];
+    var dateKey = (ev.timestamp || '').substring(0, 10);
+    if (!dateGroups[dateKey]) { dateGroups[dateKey] = []; dateOrder.push(dateKey); }
+    dateGroups[dateKey].push(ev);
+  }
+
+  var html = '<div class="event-stream">';
+  for (var di = 0; di < dateOrder.length; di++) {
+    var dk = dateOrder[di];
+    html += '<div class="event-date-group">' + escapeHtml(dk) + '</div>';
+
+    var dayEvents = dateGroups[dk];
+    for (var ei = 0; ei < dayEvents.length; ei++) {
+      var ev = dayEvents[ei];
+      var typeClass = EVENT_TYPE_CLASS[ev.type] || 'badge-code';
+      var priorityClass = PRIORITY_CLASS[ev.priority] || 'priority-can';
+      var mustRecordClass = ev.priority === '必记' ? ' must-record' : '';
+
+      // Determine time phase for coloring
+      var timeClass = 'time-past';
+      var ts = ev.timestamp || '';
+      if (ts > now) { timeClass = 'time-future'; }
+      else if (ts > new Date(Date.now() - 86400000).toISOString()) { timeClass = 'time-current'; }
+
+      // Build ref links
+      var refsHtml = '';
+      if (ev.ref) {
+        if (ev.ref.commit) {
+          refsHtml += '<span class="event-ref-link commit-ref">' + escapeHtml(ev.ref.commit) + '</span>';
+        }
+        if (ev.ref.doc) {
+          refsHtml += '<span class="event-ref-link doc-ref" data-doc="' + escapeHtml(ev.ref.doc) + '" onclick="openFloatingPreview(\'' + escapeHtml(ev.ref.doc) + '\')">' + escapeHtml(ev.ref.doc.substring(0, 40)) + '</span>';
+        }
+      }
+
+      // Tags
+      var tagsHtml = '';
+      if (ev.tags && ev.tags.length > 0) {
+        for (var ti = 0; ti < ev.tags.length; ti++) {
+          tagsHtml += '<span class="event-tag">' + escapeHtml(ev.tags[ti]) + '</span>';
+        }
+      }
+
+      var timeDisplay = (ev.timestamp || '').substring(11, 16) || '';
+
+      html += '<div class="event-item' + mustRecordClass + ' ' + timeClass + ' type-' + (ev.type || '') + '">' +
+        '<div class="event-item-header">' +
+          '<span class="event-item-title">' +
+            '<span class="event-priority-dot ' + priorityClass + '" title="' + escapeHtml(ev.priority || '可记') + '"></span> ' +
+            escapeHtml(ev.title || '') +
+          '</span>' +
+          '<span class="event-item-meta">' +
+            '<span class="event-type-badge ' + typeClass + '">' + escapeHtml(ev.type || '') + '</span>' +
+          '</span>' +
+        '</div>' +
+        '<div class="event-item-body">' +
+          (timeDisplay ? '<span class="event-time-text">' + escapeHtml(timeDisplay) + '</span>' : '') +
+          refsHtml +
+          (ev.actor ? '<span class="event-actor">' + escapeHtml(ev.actor) + '</span>' : '') +
+          (ev.impact ? '<span class="event-impact-' + (ev.impact || 'low') + '">' + escapeHtml(ev.impact) + '</span>' : '') +
+          tagsHtml +
+        '</div>' +
+      '</div>';
+    }
+  }
+  html += '</div>';
+  container.innerHTML = html;
+}
+
+// ---- Floating Panel ----
+function openFloatingPreview(docPath) {
+  var panel = document.getElementById('floating-panel');
+  var title = document.getElementById('floating-title');
+  var content = document.getElementById('floating-content');
+  var overlay = document.getElementById('floating-overlay');
+
+  if (!overlay) {
+    overlay = document.createElement('div');
+    overlay.id = 'floating-overlay';
+    overlay.className = 'hidden';
+    document.body.appendChild(overlay);
+    overlay.addEventListener('click', closeFloatingPreview);
+  }
+
+  title.textContent = docPath;
+  content.textContent = '加载中...';
+
+  // Fetch .md content from server
+  fetch('/' + encodeURI(docPath))
+    .then(function(resp) {
+      if (!resp.ok) throw new Error('HTTP ' + resp.status);
+      return resp.text();
+    })
+    .then(function(text) {
+      // Strip SUMMARY block for cleaner display
+      var clean = text.replace(/<!--\s*SUMMARY[\s\S]*?-->/g, '').trim();
+      content.textContent = clean;
+    })
+    .catch(function(err) {
+      content.textContent = '加载失败：' + err.message;
+    });
+
+  panel.classList.remove('hidden');
+  overlay.classList.remove('hidden');
+}
+
+function closeFloatingPreview() {
+  var panel = document.getElementById('floating-panel');
+  var overlay = document.getElementById('floating-overlay');
+  if (panel) panel.classList.add('hidden');
+  if (overlay) overlay.classList.add('hidden');
+}
+
+// Close button
+document.addEventListener('DOMContentLoaded', function() {
+  var closeBtn = document.getElementById('floating-close');
+  if (closeBtn) {
+    closeBtn.addEventListener('click', closeFloatingPreview);
+  }
+});

package/dashboard/js/filter-controller.js

@@ -0,0 +1,102 @@
+/**
+ * FilterController — manages secondary element checkbox toggles with "全选" support
+ */
+class FilterController {
+  constructor(filterTypes) {
+    this.filterTypes = filterTypes || [];
+    this.enabled = new Set();
+    this.listeners = [];
+
+    for (var i = 0; i < this.filterTypes.length; i++) {
+      if (this.filterTypes[i].defaultEnabled) {
+        this.enabled.add(this.filterTypes[i].type);
+      }
+    }
+
+    this.render();
+  }
+
+  render() {
+    var container = document.getElementById('filter-checkboxes');
+    if (!container) return;
+
+    if (this.filterTypes.length === 0) {
+      container.innerHTML = '<span style="font-size:11px;color:var(--text-muted)">无次要元素</span>';
+      return;
+    }
+
+    var allChecked = this.enabled.size === this.filterTypes.length;
+    var html = '<label class="filter-checkbox" style="font-weight:600">' +
+      '<input type="checkbox" id="filter-select-all" value="_all_"' + (allChecked ? ' checked' : '') + '>' +
+      '全选' +
+      '</label>';
+
+    for (var i = 0; i < this.filterTypes.length; i++) {
+      var ft = this.filterTypes[i];
+      var checked = this.enabled.has(ft.type) ? ' checked' : '';
+      html += '<label class="filter-checkbox">' +
+        '<input type="checkbox" class="filter-item" value="' + escapeHtml(ft.type) + '"' + checked + '>' +
+        escapeHtml(ft.label) + ' (' + ft.count + ')' +
+        '</label>';
+    }
+    container.innerHTML = html;
+
+    var self = this;
+
+    // "全选" handler
+    var selectAll = container.querySelector('#filter-select-all');
+    if (selectAll) {
+      selectAll.addEventListener('change', function() {
+        var items = container.querySelectorAll('.filter-item');
+        if (this.checked) {
+          for (var i = 0; i < items.length; i++) {
+            items[i].checked = true;
+            self.enabled.add(items[i].value);
+          }
+        } else {
+          for (var i = 0; i < items.length; i++) {
+            items[i].checked = false;
+            self.enabled.delete(items[i].value);
+          }
+        }
+        self.notify();
+        self._syncSelectAll();
+      });
+    }
+
+    // Individual checkbox handlers
+    var items = container.querySelectorAll('.filter-item');
+    for (var i = 0; i < items.length; i++) {
+      items[i].addEventListener('change', function() {
+        if (this.checked) {
+          self.enabled.add(this.value);
+        } else {
+          self.enabled.delete(this.value);
+        }
+        self.notify();
+        self._syncSelectAll();
+      });
+    }
+  }
+
+  _syncSelectAll() {
+    var selectAll = document.getElementById('filter-select-all');
+    if (selectAll) {
+      selectAll.checked = this.enabled.size === this.filterTypes.length;
+    }
+  }
+
+  getEnabled() {
+    return new Set(this.enabled);
+  }
+
+  onChange(fn) {
+    this.listeners.push(fn);
+  }
+
+  notify() {
+    for (var i = 0; i < this.listeners.length; i++) {
+      this.listeners[i](new Set(this.enabled));
+    }
+  }
+}

package/dashboard/js/journal-timeline.js

@@ -0,0 +1,29 @@
+function renderTimeline(journalIndex) {
+  const container = document.getElementById('timeline-container');
+
+  if (!journalIndex.events || journalIndex.events.length === 0) {
+    container.innerHTML = `
+      <div class="empty-state">
+        <h3>暂无历史记录</h3>
+        <p>当 docs/ 下的 .md 文件包含 SUMMARY 摘要块，且运行 build 后，
+        这里会显示按时间排序的项目事件瀑布流。</p>
+      </div>`;
+    return;
+  }
+
+  let html = '<div class="timeline">';
+  for (const event of journalIndex.events) {
+    html += `
+      <div class="timeline-event">
+        <div class="timeline-date">${event.date}</div>
+        <div class="timeline-title">
+          ${event.title}
+          <span class="timeline-status ${event.status}">${event.status}</span>
+        </div>
+        <div class="timeline-summary">${event.summary || ''}</div>
+        ${event.tags.length > 0 ? `<div class="timeline-tags">tags: ${event.tags.join(' ')}</div>` : ''}
+      </div>`;
+  }
+  html += '</div>';
+  container.innerHTML = html;
+}

package/dashboard/js/roadmap-renderer.js

@@ -0,0 +1,72 @@
+function renderRoadmap(roadmap) {
+  const container = document.getElementById('roadmap-container');
+
+  if (!roadmap.phases || roadmap.phases.length === 0) {
+    container.innerHTML = `
+      <div class="empty-state">
+        <h3>暂无 Roadmap 数据</h3>
+        <p>请在 docs/plan/ 下创建 roadmap.md、milestones.md、task-board.md，
+        然后运行 <code>npx sandtable build</code> 生成数据。</p>
+      </div>`;
+    updateProgressBadge(roadmap);
+    return;
+  }
+
+  let html = '';
+  for (const phase of roadmap.phases) {
+    html += `
+      <div class="phase-card">
+        <div class="phase-header ${phase.status}">
+          <span>${statusIcon(phase.status)} ${phase.name}</span>
+          <span>${phase.status}</span>
+        </div>
+        <div class="phase-body">`;
+
+    for (const ms of (phase.milestones || [])) {
+      html += `
+          <div style="padding:4px 0; font-weight:600; font-size:13px;">
+            ${statusIcon(ms.status)} ${ms.id} · ${ms.name}
+            <span class="milestone-owner">${ms.owner || ''}</span>
+          </div>`;
+
+      for (const st of (ms.subtasks || [])) {
+        html += `
+          <div class="milestone-item">
+            <span class="milestone-status">${statusIcon(st.status)}</span>
+            <span>${st.name}</span>
+            <span class="milestone-owner">${st.type || ''}</span>
+          </div>`;
+      }
+    }
+
+    html += `</div></div>`;
+  }
+
+  container.innerHTML = html;
+  updateProgressBadge(roadmap);
+}
+
+function updateProgressBadge(roadmap) {
+  const badge = document.getElementById('progress-badge');
+  let completed = 0;
+  let total = 0;
+  for (const phase of roadmap.phases) {
+    for (const ms of (phase.milestones || [])) {
+      total++;
+      if (ms.status === 'completed') completed++;
+      for (const st of (ms.subtasks || [])) {
+        total++;
+        if (st.status === 'completed') completed++;
+      }
+    }
+  }
+  if (total > 0) {
+    badge.textContent = `${completed}/${total} 完成`;
+    badge.style.background = completed === total ? '#e8f5e9' : '#fff3e0';
+    badge.style.color = completed === total ? '#2e7d32' : '#e65100';
+  } else {
+    badge.textContent = '无任务';
+    badge.style.background = '#f5f5f5';
+    badge.style.color = '#999';
+  }
+}