@co-engram/viewer 0.1.0

package/dist/runtime/graph.js

@@ -0,0 +1,313 @@
+/**
+ * Viewer v2 runtime — Graph tab(记忆突触)。
+ *
+ * 用 vis-network(已内联到 window.vis)渲染力导向图谱。节点按 EngramKind 着色,
+ * 边按 SynapseFamily 着色,contradicts 边红色虚线 + resolutionStatus badge。
+ *
+ * 点击节点 → 节点详情(记忆印迹)
+ * 点击边   → 突触详情(可编辑/删除,通过 CO_ENGRAM_SYNAPSES)
+ *
+ * @module @co-engram/claude-code/viewer/runtime/graph
+ */
+export const GRAPH_RUNTIME = `
+CO_ENGRAM.on('graph', async function renderGraph() {
+  const container = document.getElementById('graph-canvas');
+  if (!container) return;
+  try {
+    await renderGraphInner(container);
+  } catch (e) {
+    console.error('[co-engram] graph render failed:', e);
+    container.innerHTML = '<div class="empty"><div class="icon">⚠️</div>渲染失败:' + CO_ENGRAM.escapeHtml(String(e && e.message || e)) + '</div>';
+  }
+});
+
+async function renderGraphInner(container) {
+  if (typeof vis === 'undefined' || !vis.Network) {
+    container.innerHTML = '<div class="empty"><div class="icon">⚠️</div>vis-network 加载失败</div>';
+    return;
+  }
+  if (CO_ENGRAM._graphState && CO_ENGRAM._graphState.initialized) {
+    // 已初始化,只 refit
+    setTimeout(() => CO_ENGRAM._graphState.network.fit(), 30);
+    return;
+  }
+
+  let graph;
+  try {
+    graph = await CO_ENGRAM.apiGet('/api/graph');
+  } catch (e) {
+    container.innerHTML = '<div class="empty"><div class="icon">⚠️</div>加载失败:' + CO_ENGRAM.escapeHtml(e.message) + '</div>';
+    return;
+  }
+
+  if (!graph.nodes || graph.nodes.length === 0) {
+    container.innerHTML = '<div class="empty"><div class="icon">🕳️</div>暂无记忆印迹</div>';
+    return;
+  }
+
+  const L = CO_ENGRAM_LABELS;
+  const FAMILY_LABEL = { structural: '结构', causal: '因果', evidential: '证据', temporal: '时间', modulatory: '调节' };
+
+  // === 状态:filter ===
+  // showKinds: engram 类型(节点过滤);showSynapseKinds: synapse 类型(边过滤,与编辑器一致)
+  const ALL_SYNAPSE_KINDS = ['extends', 'part_of', 'similar_to', 'depends_on', 'causes', 'follows', 'derives_from', 'contradicts', 'exemplifies', 'supersedes', 'consolidates', 'contextualizes'];
+  const state = {
+    showKinds: { fact: true, observation: true, pattern: true, procedure: true, hypothesis: true },
+    showSynapseKinds: Object.fromEntries(ALL_SYNAPSE_KINDS.map(k => [k, true])),
+    physicsEnabled: true
+  };
+  CO_ENGRAM._graphState = { initialized: false, network: null, data: graph, state };
+
+  // === 节点 / 边构建 ===
+  function buildNodes() {
+    return graph.nodes
+      .filter(n => state.showKinds[n.kind] !== false)
+      .map(n => {
+        const importance = (n.importance != null ? n.importance : 0.5);
+        const size = 10 + importance * 18;
+        const kindLabel = L.kind[n.kind] || n.kind;
+        const kindTip = (CO_ENGRAM.TOOLTIPS && CO_ENGRAM.TOOLTIPS.kind && CO_ENGRAM.TOOLTIPS.kind[n.kind]) || '';
+        const tipText = n.title + '\\n[' + kindLabel + ' / ' + n.kind + ']\\n标签:' + (n.domainTags || []).join(', ') + (kindTip ? '\\n\\n' + kindTip : '');
+        return {
+          id: n.id,
+          label: n.title.length > 32 ? n.title.slice(0, 30) + '…' : n.title,
+          title: tipText,
+          group: n.kind,
+          color: {
+            background: CO_ENGRAM.kindColor(n.kind),
+            border: CO_ENGRAM.kindColor(n.kind),
+            highlight: { background: CO_ENGRAM.kindColor(n.kind), border: '#000' },
+            hover: { background: CO_ENGRAM.kindColor(n.kind), border: '#fff' }
+          },
+          size,
+          font: { color: getComputedStyle(document.body).color, size: 11, face: 'sans-serif' },
+          shape: 'dot',
+          _raw: n
+        };
+      });
+  }
+
+  function buildEdges() {
+    const out = [];
+    for (const e of graph.edges) {
+      // 按 12 kind 过滤(与编辑器一致)
+      if (state.showSynapseKinds[e.kind] === false) continue;
+
+      const isContra = e.kind === 'contradicts';
+      const color = CO_ENGRAM.edgeColor(e.kind);
+      const kindLabel = L.synapse[e.kind] || e.kind;
+      const family = CO_ENGRAM.synapseFamily(e.kind);
+      const familyLabel = FAMILY_LABEL[family] || family;
+      const synTip = (CO_ENGRAM.TOOLTIPS && CO_ENGRAM.TOOLTIPS.synapse && CO_ENGRAM.TOOLTIPS.synapse[e.kind]) || '';
+      const resLabel = e.resolutionStatus ? ' · 裁决:' + (L.resolution[e.resolutionStatus] || e.resolutionStatus) : '';
+      const tipText = kindLabel + ' (' + e.kind + ') · ' + familyLabel + '族\\n权重 ' + (e.weight != null ? e.weight.toFixed(2) : '?') + ' · 证据 ' + (e.evidenceCount || 0) + resLabel + '\\n方向:' + (e.direction || 'directional') + (synTip ? '\\n\\n' + synTip : '') + '\\n\\n[点击编辑此突触]';
+      out.push({
+        id: e.id,
+        from: e.from,
+        to: e.to,
+        label: '',
+        title: tipText,
+        color: { color, highlight: color, hover: color, opacity: 0.85 },
+        width: 1 + (e.weight || 0.5) * 3,
+        dashes: isContra,
+        arrows: e.direction === 'bidirectional' ? { to: { enabled: true }, from: { enabled: true } } : { to: { enabled: true, scaleFactor: 0.6 } },
+        smooth: { enabled: true, type: 'continuous', roundness: 0.5 },
+        _raw: e
+      });
+    }
+    return out;
+  }
+
+  // === 初始化 vis-network ===
+  const nodesDataset = new vis.DataSet(buildNodes());
+  const edgesDataset = new vis.DataSet(buildEdges());
+
+  const options = {
+    autoResize: true,
+    height: '100%',
+    width: '100%',
+    nodes: { borderWidth: 2, shadow: { enabled: true, size: 6, x: 0, y: 1 } },
+    edges: { smooth: { type: 'continuous' } },
+    physics: {
+      enabled: true,
+      solver: 'forceAtlas2Based',
+      forceAtlas2Based: { gravitationalConstant: -65, centralGravity: 0.01, springLength: 110, springConstant: 0.08, damping: 0.4, avoidOverlap: 0.5 },
+      stabilization: { iterations: 80, fit: true }
+    },
+    interaction: { hover: true, tooltipDelay: 100, navigationButtons: false, keyboard: false, selectConnectedEdges: false }
+  };
+
+  const network = new vis.Network(container, { nodes: nodesDataset, edges: edgesDataset }, options);
+  CO_ENGRAM._graphState.network = network;
+  CO_ENGRAM._graphState.initialized = true;
+  CO_ENGRAM._graphState.nodes = nodesDataset;
+  CO_ENGRAM._graphState.edges = edgesDataset;
+
+  // === 交互 ===
+  network.on('click', (params) => {
+    // 优先处理边点击(突触详情)
+    if (params.edges && params.edges.length > 0 && (!params.nodes || params.nodes.length === 0)) {
+      const edgeId = params.edges[0];
+      const edge = edgesDataset.get(edgeId);
+      if (edge && edge._raw) {
+        CO_ENGRAM_SYNAPSES.open(edge._raw.id);
+      }
+      return;
+    }
+    if (!params.nodes || params.nodes.length === 0) {
+      // 点空白:取消高亮
+      resetHighlight();
+      return;
+    }
+    const id = params.nodes[0];
+    focusNode(id);
+  });
+
+  function resetHighlight() {
+    const allNodes = nodesDataset.get();
+    const allEdges = edgesDataset.get();
+    nodesDataset.update(allNodes.map(n => ({ id: n.id, opacity: 1.0 })));
+    edgesDataset.update(allEdges.map(e => ({ id: e.id, color: e.color })));
+  }
+
+  function focusNode(id) {
+    const connectedNodeIds = new Set([id]);
+    const connectedEdgeIds = new Set();
+    for (const e of graph.edges) {
+      if (e.from === id) { connectedNodeIds.add(e.to); connectedEdgeIds.add(e.id); }
+      if (e.to === id) { connectedNodeIds.add(e.from); connectedEdgeIds.add(e.id); }
+    }
+    const allNodes = nodesDataset.get();
+    const allEdges = edgesDataset.get();
+    nodesDataset.update(allNodes.map(n => ({
+      id: n.id,
+      opacity: connectedNodeIds.has(n.id) ? 1.0 : 0.15
+    })));
+    edgesDataset.update(allEdges.map(e => ({
+      id: e.id,
+      opacity: connectedEdgeIds.has(e.id) ? 1.0 : 0.05
+    })));
+    showNodeDetail(id);
+  }
+
+  async function showNodeDetail(id) {
+    let detail;
+    try {
+      detail = await CO_ENGRAM.apiGet('/api/engrams/' + encodeURIComponent(id));
+    } catch (e) {
+      CO_ENGRAM.openDrawer('<h2>' + CO_ENGRAM.escapeHtml(id) + '</h2><div class="empty">加载失败:' + CO_ENGRAM.escapeHtml(e.message) + '</div>');
+      return;
+    }
+
+    // 找该节点的所有 synapse
+    const outgoing = graph.edges.filter(e => e.from === id);
+    const incoming = graph.edges.filter(e => e.to === id);
+
+    const familyGroup = (list, label) => {
+      if (!list.length) return '';
+      const grouped = {};
+      for (const e of list) {
+        const fam = CO_ENGRAM.synapseFamily(e.kind);
+        (grouped[fam] = grouped[fam] || []).push(e);
+      }
+      let html = '<h3>' + label + ' (' + list.length + ')</h3>';
+      for (const fam of Object.keys(grouped)) {
+        html += '<div class="field"><span class="chip dot" style="color:' + CO_ENGRAM.familyColor(fam) + '">' + (FAMILY_LABEL[fam] || fam) + '</span></div>';
+        for (const e of grouped[fam]) {
+          const other = e.from === id ? e.to : e.from;
+          const kindLabel = L.synapse[e.kind] || e.kind;
+          html += '<div class="field" style="padding-left:0.5rem">'
+            + '<span class="chip synapse-link" data-synapse-id="' + CO_ENGRAM.escapeHtml(e.id) + '" style="background:' + CO_ENGRAM.edgeColor(e.kind) + '22;color:' + CO_ENGRAM.edgeColor(e.kind) + ';cursor:pointer">' + kindLabel + '</span> '
+            + '<span class="engram-link" data-engram-id="' + CO_ENGRAM.escapeHtml(other) + '">' + CO_ENGRAM.escapeHtml(other) + '</span>'
+            + (e.resolutionStatus ? ' <span class="chip" style="background:rgba(239,68,68,.15);color:#ef4444">' + (L.resolution[e.resolutionStatus] || e.resolutionStatus) + '</span>' : '')
+            + '</div>';
+        }
+      }
+      return html;
+    };
+
+    const body = [
+      '<div class="edit-banner" style="display:flex;gap:.5rem;align-items:center"><strong style="margin-right:auto">节点详情</strong>'
+      + '<button class="btn" onclick="CO_ENGRAM.showTab(\\'engrams\\');setTimeout(()=>CO_ENGRAM_ENGRAMS.open(\\'' + CO_ENGRAM.escapeHtml(detail.id) + '\\'),50)">在记忆印迹中编辑</button>'
+      + '</div>',
+      '<h2>' + CO_ENGRAM.escapeHtml(detail.title || detail.id) + '</h2>',
+      '<div class="field"><span class="chip kind-' + detail.kind + '">' + (L.kind[detail.kind] || detail.kind) + '</span> '
+      + CO_ENGRAM.importanceBar(detail.importance) + ' <span class="kpi-sub">重要性 ' + (detail.importance || 0).toFixed(2) + '</span></div>',
+      '<div class="field"><span class="field-label">ID:</span><code>' + CO_ENGRAM.escapeHtml(detail.id) + '</code></div>',
+      (detail.domainTags && detail.domainTags.length
+        ? '<div class="field"><span class="field-label">领域标签:</span>' + detail.domainTags.map(t => '<span class="chip">' + CO_ENGRAM.escapeHtml(t) + '</span>').join(' ') + '</div>'
+        : ''),
+      (detail.summary ? '<h3>摘要</h3><div class="field">' + CO_ENGRAM.escapeHtml(detail.summary) + '</div>' : ''),
+      '<h3>统计</h3>',
+      '<div class="field"><span class="field-label">检索:</span>' + (detail.retrievalCount || 0)
+      + ' <span class="field-label">有效:</span>' + (detail.effectiveRetrievals || 0)
+      + ' <span class="field-label">失败:</span>' + (detail.failedUses || 0) + '</div>',
+      '<div class="field"><span class="field-label">创建者:</span>' + CO_ENGRAM.escapeHtml(detail.createdBy || '')
+      + ' <span class="field-label">时间:</span>' + CO_ENGRAM.escapeHtml(detail.createdAt || '') + '</div>',
+      familyGroup(outgoing, '发出突触'),
+      familyGroup(incoming, '接收突触')
+    ].join('\\n');
+    CO_ENGRAM.openDrawer(body);
+
+    // drawer 内的 engram / synapse 链接点击 → focus / open
+    setTimeout(() => {
+      document.querySelectorAll('#detail-drawer .engram-link').forEach(el => {
+        el.onclick = () => {
+          const targetId = el.getAttribute('data-engram-id');
+          if (targetId) {
+            network.focus(targetId, { scale: 1.2, animation: { duration: 400, easingFunction: 'easeInOutQuad' } });
+            network.selectNodes([targetId]);
+            focusNode(targetId);
+          }
+        };
+      });
+      document.querySelectorAll('#detail-drawer .synapse-link').forEach(el => {
+        el.onclick = () => {
+          const sid = el.getAttribute('data-synapse-id');
+          if (sid) CO_ENGRAM_SYNAPSES.open(sid);
+        };
+      });
+    }, 50);
+  }
+
+  // === 工具栏交互 ===
+  CO_ENGRAM._graphState.applyFilters = function() {
+    nodesDataset.clear();
+    edgesDataset.clear();
+    nodesDataset.add(buildNodes());
+    edgesDataset.add(buildEdges());
+  };
+  CO_ENGRAM._graphState.togglePhysics = function() {
+    state.physicsEnabled = !state.physicsEnabled;
+    network.setOptions({ physics: { enabled: state.physicsEnabled } });
+  };
+  CO_ENGRAM._graphState.fit = function() { network.fit({ animation: true }); };
+  CO_ENGRAM._graphState.resetView = function() {
+    state.showKinds = { fact: true, observation: true, pattern: true, procedure: true, hypothesis: true };
+    state.showSynapseKinds = Object.fromEntries(ALL_SYNAPSE_KINDS.map(k => [k, true]));
+    document.querySelectorAll('.graph-toolbar input[type=checkbox]').forEach(c => c.checked = true);
+    CO_ENGRAM._graphState.applyFilters();
+    network.fit({ animation: true });
+  };
+}
+
+// 工具栏点击处理(从 onclick 调用)
+window.CO_ENGRAM_GRAPH = {
+  toggleSynapseKind(kind, checked) {
+    const s = CO_ENGRAM._graphState;
+    if (!s) return;
+    s.state.showSynapseKinds[kind] = checked;
+    s.applyFilters();
+  },
+  toggleKind(kind, checked) {
+    const s = CO_ENGRAM._graphState;
+    if (!s) return;
+    s.state.showKinds[kind] = checked;
+    s.applyFilters();
+  },
+  togglePhysics() { CO_ENGRAM._graphState && CO_ENGRAM._graphState.togglePhysics(); },
+  fit() { CO_ENGRAM._graphState && CO_ENGRAM._graphState.fit(); },
+  reset() { CO_ENGRAM._graphState && CO_ENGRAM._graphState.resetView(); }
+};
+`;
+//# sourceMappingURL=graph.js.map

package/dist/runtime/graph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph.js","sourceRoot":"","sources":["../../src/runtime/graph.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,MAAM,CAAC,MAAM,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4S5B,CAAC"}

package/dist/runtime/i18n.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Viewer runtime i18n helper
+ *
+ * 浏览器端翻译函数,从 window.CO_ENGRAM_I18N({zh, en}) 读取翻译表,
+ * 当前语言由 window.CO_ENGRAM_LANG 决定。提供:
+ *   - CO_ENGRAM_T.t(key, vars?):通用翻译
+ *   - CO_ENGRAM_T.enumLabel(category, value):枚举显示(如 'kind', 'fact')
+ *   - CO_ENGRAM_T.fieldLabel(name):字段标签(如 'time', 'id')
+ *   - CO_ENGRAM_T.decayLabel(days):衰退倒计时文案
+ *
+ * 与 core 的 t() 语义一致:fallback 顺序为目标语言 → 英文 → key 本身。
+ *
+ * @module @co-engram/viewer/runtime/i18n
+ */
+export declare const I18N_RUNTIME = "\n// ============================================================\n// Co-Engram Viewer i18n helper(\u6D4F\u89C8\u5668\u7AEF,\u6302\u5728 window.CO_ENGRAM_T)\n// ============================================================\nwindow.CO_ENGRAM_T = (function() {\n  'use strict';\n\n  const DICTS = (window.CO_ENGRAM_I18N || { zh: {}, en: {} });\n  const LANG = window.CO_ENGRAM_LANG || 'en';\n\n  function dictFor(lang) {\n    return DICTS[lang] || {};\n  }\n\n  function t(key, vars) {\n    const mainDict = dictFor(LANG);\n    const enDict = dictFor('en');\n    const template = mainDict[key] || enDict[key] || key;\n    if (!vars) return template;\n    return template.replace(/\\$\\{(\\w+)\\}/g, function(_, name) {\n      return vars[name] !== undefined ? String(vars[name]) : '\\ + name + ';\n    });\n  }\n\n  function enumLabel(category, value) {\n    if (!value) return t('common.unknown');\n    return t('enum.' + category + '.' + value);\n  }\n\n  function fieldLabel(name) {\n    return t('field.label.' + name);\n  }\n\n  function sectionLabel(name) {\n    return t('section.' + name);\n  }\n\n  function actionLabel(name) {\n    return t('action.' + name);\n  }\n\n  function decayLabel(days) {\n    if (days === null || days === undefined) return t('decay.forgotten');\n    return t('decay.daysToNext', { days: days });\n  }\n\n  function currentLang() {\n    return LANG;\n  }\n\n  return {\n    t: t,\n    enumLabel: enumLabel,\n    fieldLabel: fieldLabel,\n    sectionLabel: sectionLabel,\n    actionLabel: actionLabel,\n    decayLabel: decayLabel,\n    currentLang: currentLang,\n  };\n})();\n";
+//# sourceMappingURL=i18n.d.ts.map

package/dist/runtime/i18n.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../src/runtime/i18n.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,eAAO,MAAM,YAAY,6kDA4DxB,CAAC"}

package/dist/runtime/i18n.js

@@ -0,0 +1,76 @@
+/**
+ * Viewer runtime i18n helper
+ *
+ * 浏览器端翻译函数,从 window.CO_ENGRAM_I18N({zh, en}) 读取翻译表,
+ * 当前语言由 window.CO_ENGRAM_LANG 决定。提供:
+ *   - CO_ENGRAM_T.t(key, vars?):通用翻译
+ *   - CO_ENGRAM_T.enumLabel(category, value):枚举显示(如 'kind', 'fact')
+ *   - CO_ENGRAM_T.fieldLabel(name):字段标签(如 'time', 'id')
+ *   - CO_ENGRAM_T.decayLabel(days):衰退倒计时文案
+ *
+ * 与 core 的 t() 语义一致:fallback 顺序为目标语言 → 英文 → key 本身。
+ *
+ * @module @co-engram/viewer/runtime/i18n
+ */
+export const I18N_RUNTIME = `
+// ============================================================
+// Co-Engram Viewer i18n helper(浏览器端,挂在 window.CO_ENGRAM_T)
+// ============================================================
+window.CO_ENGRAM_T = (function() {
+  'use strict';
+
+  const DICTS = (window.CO_ENGRAM_I18N || { zh: {}, en: {} });
+  const LANG = window.CO_ENGRAM_LANG || 'en';
+
+  function dictFor(lang) {
+    return DICTS[lang] || {};
+  }
+
+  function t(key, vars) {
+    const mainDict = dictFor(LANG);
+    const enDict = dictFor('en');
+    const template = mainDict[key] || enDict[key] || key;
+    if (!vars) return template;
+    return template.replace(/\\$\\{(\\w+)\\}/g, function(_, name) {
+      return vars[name] !== undefined ? String(vars[name]) : '\\${" + name + "}';
+    });
+  }
+
+  function enumLabel(category, value) {
+    if (!value) return t('common.unknown');
+    return t('enum.' + category + '.' + value);
+  }
+
+  function fieldLabel(name) {
+    return t('field.label.' + name);
+  }
+
+  function sectionLabel(name) {
+    return t('section.' + name);
+  }
+
+  function actionLabel(name) {
+    return t('action.' + name);
+  }
+
+  function decayLabel(days) {
+    if (days === null || days === undefined) return t('decay.forgotten');
+    return t('decay.daysToNext', { days: days });
+  }
+
+  function currentLang() {
+    return LANG;
+  }
+
+  return {
+    t: t,
+    enumLabel: enumLabel,
+    fieldLabel: fieldLabel,
+    sectionLabel: sectionLabel,
+    actionLabel: actionLabel,
+    decayLabel: decayLabel,
+    currentLang: currentLang,
+  };
+})();
+`;
+//# sourceMappingURL=i18n.js.map

package/dist/runtime/i18n.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"i18n.js","sourceRoot":"","sources":["../../src/runtime/i18n.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;kEAoBsC,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwC7E,CAAC"}