@andespindola/brainlink 1.0.4 → 1.0.6

package/dist/application/frontend/client/controls.js

@@ -0,0 +1,178 @@
+export const createControlsJs = () => `
+const setupControls = () => {
+  elements.zoomIn.addEventListener('click', () => {
+    zoomAtPoint(state.viewport.width / 2, state.viewport.height / 2, 1.06)
+  })
+
+  elements.zoomOut.addEventListener('click', () => {
+    zoomAtPoint(state.viewport.width / 2, state.viewport.height / 2, 0.944)
+  })
+
+  elements.fit.addEventListener('click', () => {
+    fitFromChunk()
+    scheduleChunkFetch()
+  })
+
+  elements.releaseNode.addEventListener('click', () => {
+    releaseSelectedNodePosition()
+  })
+
+  elements.reset.addEventListener('click', () => {
+    clearStoredNodePositions()
+    clearNodePositionsOnServer()
+    state.camera = { x: 0, y: 0, scale: 0.22 }
+    updateWorkerCamera()
+    scheduleChunkFetch({ fit: true })
+  })
+
+  elements.contentClose.addEventListener('click', () => {
+    closeContentDialog()
+  })
+
+  elements.copyWikiLink.addEventListener('click', () => {
+    copySelectedWikiLink().catch((error) => {
+      elements.contentActionStatus.textContent = error instanceof Error ? error.message : String(error)
+    })
+  })
+
+  elements.suggestNodeLinks.addEventListener('click', () => {
+    loadSelectedLinkSuggestions().catch((error) => {
+      elements.contentActionStatus.textContent = error instanceof Error ? error.message : String(error)
+    })
+  })
+
+  elements.contentLinkSuggestions.addEventListener('click', (event) => {
+    const button = event.target.closest('button[data-title]')
+    if (!button) {
+      return
+    }
+    const value = '[[' + button.dataset.title + ']]'
+    navigator.clipboard.writeText(value).then(() => {
+      elements.contentActionStatus.textContent = 'Copied ' + value
+    }).catch(() => {
+      elements.contentActionStatus.textContent = value
+    })
+  })
+
+  elements.contentDialog.addEventListener('click', (event) => {
+    if (event.target === elements.contentDialog) {
+      closeContentDialog()
+    }
+  })
+
+  elements.search.addEventListener('input', () => {
+    if (state.searchTimer) {
+      clearTimeout(state.searchTimer)
+    }
+    state.searchTimer = setTimeout(() => {
+      state.searchTimer = null
+      runGraphSearch().catch((error) => console.error(error))
+    }, 160)
+  })
+}
+
+const runGraphSearch = async () => {
+  const token = ++state.searchToken
+  const query = (elements.search.value || '').trim()
+  if (!query) {
+    state.searchResultIds = new Set()
+    setFocusedNodeIds(new Set())
+    if (state.renderWorker && state.workerReady) {
+      state.renderWorker.postMessage({ type: 'highlight', ids: [] })
+    }
+    return
+  }
+
+  const response = await fetch('/api/graph-filter?q=' + encodeURIComponent(query) + '&limit=1800' + scopeQuery('&'))
+  if (!response.ok) {
+    throw new Error('Failed to search graph')
+  }
+  const payload = await response.json()
+  if (token !== state.searchToken) {
+    return
+  }
+
+  const ids = Array.isArray(payload?.nodeIds) ? payload.nodeIds.filter((id) => typeof id === 'string' && id.length > 0) : []
+  state.searchResultIds = new Set(ids)
+  setFocusedNodeIds(state.searchResultIds)
+  if (state.renderWorker && state.workerReady) {
+    state.renderWorker.postMessage({ type: 'highlight', ids })
+  }
+  if (ids.length > 0 && state.graphMode === 'far') {
+    state.camera.scale = Math.max(state.camera.scale, 0.82)
+    updateWorkerCamera()
+    scheduleChunkFetch()
+  }
+}
+
+const loadAgents = async () => {
+  const response = await fetch('/api/agents')
+  if (!response.ok) {
+    throw new Error('Failed to load agents')
+  }
+
+  const payload = await response.json()
+  const agents = Array.isArray(payload?.agents) ? payload.agents : []
+
+  elements.agent.innerHTML = agents
+    .map((agent) => {
+      const id = String(agent?.id || '')
+      const count = Number.isFinite(agent?.documentCount) ? agent.documentCount : 0
+      const label = id === 'shared' ? 'shared' : id
+      return '<option value="' + escapeHtml(id) + '">' + escapeHtml(label) + ' (' + count + ')</option>'
+    })
+    .join('')
+
+  const preferredAgent = initialAgentFromUrl || readStoredAgent()
+  const hasPreferred = preferredAgent && agents.some((agent) => agent?.id === preferredAgent)
+  state.agentId = hasPreferred ? preferredAgent : String(agents[0]?.id || '')
+  elements.agent.value = state.agentId
+
+  elements.agent.addEventListener('change', () => {
+    state.agentId = elements.agent.value || ''
+    writeStoredAgent(state.agentId)
+    syncAgentInUrl(state.agentId)
+    loadContexts().then(() => scheduleChunkFetch({ fit: true })).catch((error) => console.error(error))
+  })
+
+  syncAgentInUrl(state.agentId)
+}
+
+const loadContexts = async () => {
+  const response = await fetch('/api/graph-contexts' + (state.agentId ? '?agent=' + encodeURIComponent(state.agentId) : ''))
+  if (!response.ok) {
+    throw new Error('Failed to load graph contexts')
+  }
+
+  const payload = await response.json()
+  const contexts = Array.isArray(payload?.contexts) ? payload.contexts : []
+  const options = [
+    '<option value="">All contexts</option>',
+    ...contexts.map((context) => {
+      const id = String(context?.id || '')
+      const title = String(context?.title || id || 'Untitled')
+      const count = Number.isFinite(context?.nodeCount) ? context.nodeCount : 0
+      return '<option value="' + escapeHtml(id) + '">' + escapeHtml(title) + ' (' + count + ')</option>'
+    })
+  ]
+
+  elements.context.innerHTML = options.join('')
+
+  const preferredContext = initialContextFromUrl || readStoredContext()
+  const hasPreferred = preferredContext && contexts.some((context) => context?.id === preferredContext)
+  state.contextId = hasPreferred ? preferredContext : ''
+  elements.context.value = state.contextId
+  writeStoredContext(state.contextId)
+  syncContextInUrl(state.contextId)
+}
+
+const setupContextControl = () => {
+  elements.context.addEventListener('change', () => {
+    state.contextId = elements.context.value || ''
+    state.selectedNodeId = null
+    writeStoredContext(state.contextId)
+    syncContextInUrl(state.contextId)
+    scheduleChunkFetch({ fit: true })
+  })
+}
+`;

package/dist/application/frontend/client/elements.js

@@ -0,0 +1,122 @@
+export const createElementsJs = () => `let canvas = document.getElementById('graph')
+let ctx2dFallback = null
+let inputGlobalsBound = false
+const byId = (id) => document.getElementById(id)
+const elements = {
+  search: byId('search'),
+  agent: byId('agent'),
+  context: byId('context'),
+  nodeCount: byId('nodeCount'),
+  edgeCount: byId('edgeCount'),
+  zoomIn: byId('zoomIn'),
+  zoomOut: byId('zoomOut'),
+  fit: byId('fit'),
+  releaseNode: byId('releaseNode'),
+  reset: byId('reset'),
+  uploadOpen: byId('uploadOpen'),
+  uploadDialog: byId('uploadDialog'),
+  uploadForm: byId('uploadForm'),
+  uploadFile: byId('uploadFile'),
+  uploadTitleInput: byId('uploadTitleInput'),
+  uploadAllowSensitive: byId('uploadAllowSensitive'),
+  uploadClose: byId('uploadClose'),
+  uploadSubmit: byId('uploadSubmit'),
+  uploadStatus: byId('uploadStatus'),
+  labels: byId('graphLabels'),
+  tooltip: byId('graphTooltip'),
+  miniMap: byId('miniMap'),
+  contentDialog: byId('contentDialog'),
+  contentTitle: byId('contentTitle'),
+  contentPath: byId('contentPath'),
+  contentFacts: byId('contentFacts'),
+  contentContextLinks: byId('contentContextLinks'),
+  contentTags: byId('contentTags'),
+  contentOutgoing: byId('contentOutgoing'),
+  contentIncoming: byId('contentIncoming'),
+  contentBody: byId('contentBody'),
+  contentClose: byId('contentClose'),
+  copyWikiLink: byId('copyWikiLink'),
+  suggestNodeLinks: byId('suggestNodeLinks'),
+  contentActionStatus: byId('contentActionStatus'),
+  contentLinkSuggestions: byId('contentLinkSuggestions')
+}
+
+const state = {
+  camera: {
+    x: 0,
+    y: 0,
+    scale: 0.22
+  },
+  pointer: {
+    down: false,
+    moved: false,
+    dragging: false,
+    dragNodeId: '',
+    x: 0,
+    y: 0,
+    startX: 0,
+    startY: 0,
+    startWorldX: 0,
+    startWorldY: 0,
+    nodeStartX: 0,
+    nodeStartY: 0,
+    worldAnchorX: 0,
+    worldAnchorY: 0
+  },
+  viewport: {
+    width: 320,
+    height: 320,
+    ratio: window.devicePixelRatio || 1
+  },
+  workerReady: false,
+  rendererMode: 'worker',
+  renderWorker: null,
+  agentId: '',
+  contextId: '',
+  graphSignature: '',
+  graphMode: 'near',
+  nodePositionsSignature: '',
+  nodePositionsScope: '',
+  serverNodePositionsScope: '',
+  nodePositions: new Map(),
+  hoveredNodeId: '',
+  focusedNodeIds: new Set(),
+  spatialIndex: {
+    key: '',
+    cells: new Map()
+  },
+  miniMapView: null,
+  miniMapDirty: true,
+  overlayScheduled: false,
+  overlayIdleTimer: null,
+  chunk: {
+    nodes: [],
+    edges: []
+  },
+  selectedNodeId: null,
+  searchToken: 0,
+  searchTimer: null,
+  searchResultIds: new Set(),
+  fetchToken: 0,
+  fetchTimer: null,
+  fetchAbortController: null,
+  lastChunkRequestKey: '',
+  cameraSyncScheduled: false,
+  lastWheelAt: 0,
+  lastVisibleNodes: 0,
+  lastVisibleEdges: 0,
+  totals: {
+    nodes: 0,
+    edges: 0
+  }
+}
+
+const zoomRange = {
+  min: 0.0002,
+  max: 4.5
+}
+
+const selectedAgentStorageKey = 'brainlink:selected-agent'
+const selectedContextStorageKey = 'brainlink:selected-context'
+const nodePositionsStoragePrefix = 'brainlink:graph-node-positions:'
+`;

package/dist/application/frontend/client/input.js

@@ -0,0 +1,202 @@
+export const createInputJs = () => `
+const resolvePointer = (event) => {
+  const rect = canvas.getBoundingClientRect()
+  return {
+    x: event.clientX - rect.left,
+    y: event.clientY - rect.top
+  }
+}
+
+const setupInput = () => {
+  const dragActivationDistance = 6
+  const resetPointerState = (pointerId = null) => {
+    state.pointer.down = false
+    state.pointer.dragging = false
+    state.pointer.dragNodeId = ''
+    canvas.classList.remove('is-node-dragging')
+    if (pointerId !== null) {
+      try {
+        if (canvas.hasPointerCapture(pointerId)) {
+          canvas.releasePointerCapture(pointerId)
+        }
+      } catch {}
+    }
+  }
+
+  canvas.addEventListener('wheel', (event) => {
+    event.preventDefault()
+    state.lastWheelAt = performance.now()
+    const pointer = resolvePointer(event)
+    const exponent = Math.max(-0.05, Math.min(0.05, -event.deltaY * 0.001))
+    zoomAtPoint(pointer.x, pointer.y, Math.exp(exponent))
+  }, { passive: false })
+
+  canvas.addEventListener('pointerdown', (event) => {
+    event.preventDefault()
+    const pointer = resolvePointer(event)
+    const candidateNode = pickFallbackNode(pointer.x, pointer.y)
+    const candidateNodeId = isRealGraphNode(candidateNode) && typeof candidateNode?.[0] === 'string' ? candidateNode[0] : ''
+    const candidateX = Number(candidateNode?.[2])
+    const candidateY = Number(candidateNode?.[3])
+    const world = screenToWorld(pointer.x, pointer.y)
+    state.pointer.down = true
+    state.pointer.moved = false
+    state.pointer.dragging = false
+    state.pointer.dragNodeId = candidateNodeId
+    state.pointer.x = pointer.x
+    state.pointer.y = pointer.y
+    state.pointer.startX = pointer.x
+    state.pointer.startY = pointer.y
+    state.pointer.startWorldX = world.x
+    state.pointer.startWorldY = world.y
+    state.pointer.nodeStartX = candidateNodeId && Number.isFinite(candidateX) ? candidateX : 0
+    state.pointer.nodeStartY = candidateNodeId && Number.isFinite(candidateY) ? candidateY : 0
+    state.pointer.worldAnchorX = world.x
+    state.pointer.worldAnchorY = world.y
+    try {
+      canvas.setPointerCapture(event.pointerId)
+    } catch {}
+  })
+
+  canvas.addEventListener('pointermove', (event) => {
+    if (state.pointer.down) {
+      event.preventDefault()
+    }
+    const pointer = resolvePointer(event)
+
+    if (state.pointer.down) {
+      const dx = pointer.x - state.pointer.x
+      const dy = pointer.y - state.pointer.y
+      const distanceFromStart = Math.hypot(pointer.x - state.pointer.startX, pointer.y - state.pointer.startY)
+      if (distanceFromStart >= dragActivationDistance) {
+        state.pointer.moved = true
+        state.pointer.dragging = true
+        canvas.classList.toggle('is-node-dragging', Boolean(state.pointer.dragNodeId))
+      }
+      if (!state.pointer.dragging) {
+        state.pointer.x = pointer.x
+        state.pointer.y = pointer.y
+        return
+      }
+      if (state.pointer.dragNodeId) {
+        const world = screenToWorld(pointer.x, pointer.y)
+        const x = state.pointer.nodeStartX + world.x - state.pointer.startWorldX
+        const y = state.pointer.nodeStartY + world.y - state.pointer.startWorldY
+        state.nodePositions.set(state.pointer.dragNodeId, { x, y })
+        updateNodePositionInChunk(state.pointer.dragNodeId, x, y)
+        state.pointer.x = pointer.x
+        state.pointer.y = pointer.y
+        drawFallback()
+        return
+      }
+      state.camera.x += dx
+      state.camera.y += dy
+      state.pointer.x = pointer.x
+      state.pointer.y = pointer.y
+      updateWorkerCamera()
+      drawFallback()
+      return
+    }
+
+    const hovered = pickFallbackNode(pointer.x, pointer.y)
+    const hoveredId = isRealGraphNode(hovered) && typeof hovered?.[0] === 'string' ? hovered[0] : ''
+    if (state.hoveredNodeId !== hoveredId) {
+      state.hoveredNodeId = hoveredId
+      canvas.classList.toggle('is-node-hover', Boolean(hoveredId))
+      updateGraphOverlays()
+    }
+    if (hoveredId) {
+      showTooltip(hovered, pointer)
+    } else {
+      hideTooltip()
+    }
+  })
+
+  canvas.addEventListener('pointerup', (event) => {
+    const pointer = resolvePointer(event)
+    const distanceFromStart = Math.hypot(pointer.x - state.pointer.startX, pointer.y - state.pointer.startY)
+    const shouldPick = !state.pointer.dragging && distanceFromStart < dragActivationDistance
+    const shouldRefreshAfterDrag = state.pointer.dragging
+    const shouldPersistNodePosition = state.pointer.dragging && Boolean(state.pointer.dragNodeId)
+    resetPointerState(event.pointerId)
+
+    if (shouldPick) {
+      pickAt(pointer.x, pointer.y)
+      return
+    }
+    if (shouldPersistNodePosition) {
+      writeStoredNodePositions()
+      persistNodePositionsToServer()
+      return
+    }
+    if (shouldRefreshAfterDrag) {
+      scheduleChunkFetch()
+    }
+  })
+
+  canvas.addEventListener('pointerleave', () => {
+    state.hoveredNodeId = ''
+    canvas.classList.remove('is-node-hover')
+    hideTooltip()
+    updateGraphOverlays()
+  })
+
+  canvas.addEventListener('pointercancel', (event) => {
+    resetPointerState(event.pointerId)
+    hideTooltip()
+    updateGraphOverlays()
+  })
+
+  canvas.addEventListener('lostpointercapture', () => {
+    resetPointerState()
+  })
+
+  // Listeners globais (mini mapa e teclado) só podem ser ligados uma vez —
+  // setupInput pode ser re-executado ao trocar o canvas no fallback.
+  if (!inputGlobalsBound) {
+    elements.miniMap.addEventListener('click', (event) => {
+      if (!state.miniMapView) {
+        return
+      }
+      const rect = elements.miniMap.getBoundingClientRect()
+      const x = event.clientX - rect.left
+      const y = event.clientY - rect.top
+      const worldX = state.miniMapView.minX + (x - state.miniMapView.offsetX) / state.miniMapView.scale
+      const worldY = state.miniMapView.minY + (y - state.miniMapView.offsetY) / state.miniMapView.scale
+      state.camera.x = state.viewport.width / 2 - worldX * state.camera.scale
+      state.camera.y = state.viewport.height / 2 - worldY * state.camera.scale
+      updateWorkerCamera()
+      scheduleChunkFetch()
+    })
+
+    window.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape' && !elements.uploadDialog.hidden) {
+        closeUploadDialog()
+        return
+      }
+      if (event.key === 'Escape' && !elements.contentDialog.hidden) {
+        closeContentDialog()
+        return
+      }
+      if (event.key === '+') {
+        zoomAtPoint(state.viewport.width / 2, state.viewport.height / 2, 1.06)
+        return
+      }
+      if (event.key === '-') {
+        zoomAtPoint(state.viewport.width / 2, state.viewport.height / 2, 0.944)
+        return
+      }
+      if (event.key === '0') {
+        scheduleChunkFetch({ fit: true })
+      }
+    })
+
+    inputGlobalsBound = true
+  }
+
+  canvas.addEventListener('dblclick', (event) => {
+    const pointer = resolvePointer(event)
+    zoomAtPoint(pointer.x, pointer.y, 1.065)
+  })
+}
+`;

package/dist/application/frontend/client/node-details.js

@@ -0,0 +1,191 @@
+export const createNodeDetailsJs = () => `
+const list = (items) => {
+  const rows = normalizeList(items)
+  if (rows.length === 0) {
+    return '<li><small>No links found.</small></li>'
+  }
+  return rows
+    .map((item) => {
+      const title = typeof item?.title === 'string' ? item.title : 'Untitled'
+      const id = typeof item?.id === 'string' ? item.id : ''
+      const path = typeof item?.path === 'string' ? item.path : ''
+      const meta = item?.weight ? ' · weight ' + escapeHtml(item.weight) + ' · ' + escapeHtml(item.priority || 'normal') : ''
+      return '<li>' +
+        (id ? '<button type="button" data-node-id="' + escapeHtml(id) + '">' + escapeHtml(title) + '</button>' : escapeHtml(title)) +
+        '<small>' + escapeHtml(path) + meta + '</small>' +
+        '</li>'
+    })
+    .join('')
+}
+
+const buildFacts = (node, outgoingCount, incomingCount) => {
+  const content = typeof node?.content === 'string' ? node.content : ''
+  const words = content.trim().length > 0 ? content.trim().split(/\\s+/).length : 0
+  return [
+    { label: 'Agent', value: typeof node?.agentId === 'string' && node.agentId ? node.agentId : 'shared' },
+    { label: 'Words', value: String(words) },
+    { label: 'Chars', value: String(content.length) },
+    { label: 'Outgoing', value: String(outgoingCount) },
+    { label: 'Backlinks', value: String(incomingCount) }
+  ]
+}
+
+const listFacts = (facts) => facts
+  .map((fact) => '<li><strong>' + escapeHtml(fact.label) + ':</strong> <small>' + escapeHtml(fact.value) + '</small></li>')
+  .join('')
+
+const listContextLinks = (links) => {
+  if (!Array.isArray(links) || links.length === 0) {
+    return '<li><small>No context links found.</small></li>'
+  }
+  return links
+    .map((link) => '<li><span>' + escapeHtml(link.title) + '</span><small>' + escapeHtml(link.priority || 'normal') + '</small></li>')
+    .join('')
+}
+
+const nodeContextLinks = (node, outgoing) => {
+  const titles = Array.isArray(node?.contextLinks) ? node.contextLinks : []
+  const outgoingByTitle = new Map(normalizeList(outgoing).map((link) => [String(link.title || '').toLowerCase(), link]))
+
+  return titles
+    .map((title) => {
+      const match = outgoingByTitle.get(String(title).toLowerCase())
+      return {
+        title,
+        priority: match?.priority || 'normal'
+      }
+    })
+    .filter((link) => typeof link.title === 'string' && link.title.trim().length > 0)
+}
+
+const linkedNodes = (node) => {
+  const nodeById = new Map((state.chunk.nodes || []).map((item) => [item[0], item]))
+  const edges = normalizeList(state.chunk.edges)
+
+  const outgoing = []
+  const incoming = []
+  for (let index = 0; index < edges.length; index += 1) {
+    const edge = edges[index]
+    if (edge[0] === node.id) {
+      const target = nodeById.get(edge[1])
+      if (target) {
+        outgoing.push({ id: target[0], title: target[1], path: target[4] || '', weight: edge[2], priority: edge[3] })
+      }
+    }
+    if (edge[1] === node.id) {
+      const source = nodeById.get(edge[0])
+      if (source) {
+        incoming.push({ id: source[0], title: source[1], path: source[4] || '', weight: edge[2], priority: edge[3] })
+      }
+    }
+  }
+
+  return { outgoing, incoming }
+}
+
+const openContentDialog = () => {
+  elements.contentDialog.hidden = false
+}
+
+const closeContentDialog = () => {
+  elements.contentDialog.hidden = true
+}
+
+const selectedNode = () => {
+  if (!state.selectedNodeId) {
+    return null
+  }
+
+  const packed = nodeByIdFromChunk().get(state.selectedNodeId)
+  if (!packed) {
+    return null
+  }
+
+  return {
+    id: packed[0],
+    title: packed[1],
+    path: packed[4] || ''
+  }
+}
+
+const copySelectedWikiLink = async () => {
+  const node = selectedNode()
+  if (!node) {
+    elements.contentActionStatus.textContent = 'Select a note first.'
+    return
+  }
+
+  const value = '[[' + node.title + ']]'
+  try {
+    await navigator.clipboard.writeText(value)
+    elements.contentActionStatus.textContent = 'Copied ' + value
+  } catch {
+    elements.contentActionStatus.textContent = value
+  }
+}
+
+const loadSelectedLinkSuggestions = async () => {
+  const content = elements.contentBody.textContent || ''
+  if (!content.trim()) {
+    elements.contentActionStatus.textContent = 'Selected note has no content.'
+    return
+  }
+
+  elements.contentActionStatus.textContent = 'Loading suggestions...'
+  const response = await fetch('/api/suggest-links?limit=5&content=' + encodeURIComponent(content.slice(0, 2000)) + scopeQuery('&'))
+  if (!response.ok) {
+    throw new Error('Failed to load link suggestions')
+  }
+  const payload = await response.json()
+  const suggestions = Array.isArray(payload.suggestions) ? payload.suggestions : []
+  elements.contentLinkSuggestions.innerHTML = suggestions.length > 0
+    ? suggestions.map((item) => '<li><button type="button" data-title="' + escapeHtml(item.title) + '">[[' + escapeHtml(item.title) + ']]</button></li>').join('')
+    : '<li>No strong suggestions</li>'
+  elements.contentActionStatus.textContent = suggestions.length > 0 ? 'Suggested Context Links' : 'No strong suggestions found.'
+}
+
+const loadNodeDetails = async (nodeId) => {
+  if (!nodeId) {
+    return
+  }
+
+  const response = await fetch('/api/graph-node?id=' + encodeURIComponent(nodeId) + scopeQuery('&'))
+  if (!response.ok) {
+    throw new Error('Failed to load graph node details')
+  }
+
+  const payload = await response.json()
+  if (!payload || typeof payload !== 'object' || !payload.node) {
+    throw new Error('Invalid graph node payload')
+  }
+
+  const node = payload.node
+  state.selectedNodeId = node.id
+  setFocusedNodeIds(linkedNodeIds(node.id))
+
+  if (state.renderWorker && state.workerReady) {
+    state.renderWorker.postMessage({ type: 'select', id: node.id })
+  }
+
+  elements.contentTitle.textContent = node.title || 'Untitled'
+  elements.contentPath.textContent = node.path || ''
+
+  const tags = Array.isArray(node.tags) ? node.tags : []
+  elements.contentTags.innerHTML = tags.length > 0
+    ? tags.map((tag) => '<span>' + escapeHtml(tag) + '</span>').join('')
+    : '<span>No tags</span>'
+
+  const related = linkedNodes(node)
+  const contextLinks = nodeContextLinks(node, related.outgoing)
+  const facts = buildFacts(node, related.outgoing.length, related.incoming.length)
+  elements.contentFacts.innerHTML = listFacts(facts)
+  elements.contentContextLinks.innerHTML = listContextLinks(contextLinks)
+  elements.contentOutgoing.innerHTML = list(related.outgoing)
+  elements.contentIncoming.innerHTML = list(related.incoming)
+  elements.contentBody.textContent = typeof node.content === 'string' ? node.content : ''
+  elements.contentActionStatus.textContent = ''
+  elements.contentLinkSuggestions.innerHTML = ''
+
+  openContentDialog()
+}
+`;