feat(coins): add interactive query builder and reasoning dashboard

Full COINs demo at /demos/coins with query structure picker (7 templates),
searchable entity/relation dropdowns with server-side pagination, algorithm
selector filtered by structure+dataset compatibility, SVG query graph
visualization with slot-based editing, and a results dashboard showing
ranked predictions, community rank callout, and timing breakdown with
speedup estimate.

- Pinia store manages the full query lifecycle (registry load, slot
filling, predict call, error handling for 429/422/503)
- QueryGraph uses CSS Grid with ResizeObserver-driven edge routing
- SearchablePicker debounces 250ms with AbortController cancellation
- Route /demos/coins lazy-loaded, nav link + DemoPreviewCard wired

src/frontend/src/api/coins.js

@@ -1,5 +1,24 @@
 import { client } from './client'
 
+export async function listDatasets() {
+  const res = await client.get('/coins/datasets')
+  return res.data
+}
+
+export async function searchEntities(datasetId, { q = '', page = 1, pageSize = 50, signal } = {}) {
+  const params = { page, page_size: pageSize }
+  if (q) params.q = q
+  const res = await client.get(`/coins/datasets/${datasetId}/entities`, { params, signal })
+  return res.data
+}
+
+export async function searchRelations(datasetId, { q = '', page = 1, pageSize = 50, signal } = {}) {
+  const params = { page, page_size: pageSize }
+  if (q) params.q = q
+  const res = await client.get(`/coins/datasets/${datasetId}/relations`, { params, signal })
+  return res.data
+}
+
 export async function sampleTriples(datasetId, count = 1, seed = null) {
   const params = { count }
   if (seed != null) params.seed = seed
@@ -7,7 +26,24 @@ export async function sampleTriples(datasetId, count = 1, seed = null) {
   return res.data
 }
 
-export async function listDatasets() {
-  const res = await client.get('/coins/datasets')
+export async function sampleQuery(datasetId, queryStructure, count = 1, seed = null) {
+  const params = { query_structure: queryStructure, count }
+  if (seed != null) params.seed = seed
+  const res = await client.get(`/coins/datasets/${datasetId}/sample-query`, { params })
+  return res.data
+}
+
+export async function listModels() {
+  const res = await client.get('/coins/models')
+  return res.data
+}
+
+export async function listQueryStructures() {
+  const res = await client.get('/coins/query-structures')
+  return res.data
+}
+
+export async function predict(payload, { signal } = {}) {
+  const res = await client.post('/coins/predict', payload, { signal, timeout: 60000 })
   return res.data
 }

src/frontend/src/components/coins/AlgorithmSelector.vue

@@ -0,0 +1,45 @@
+<script setup>
+defineProps({
+  algorithms: { type: Array, required: true },
+  modelValue: { type: String, default: '' },
+  disabled: { type: Boolean, default: false },
+})
+const emit = defineEmits(['update:modelValue'])
+function change(e) { emit('update:modelValue', e.target.value) }
+</script>
+
+<template>
+  <div class="algo-selector">
+    <label class="algo-label">Algorithm</label>
+    <select :value="modelValue" @change="change" class="algo-select" :disabled="disabled || !algorithms.length">
+      <option v-if="!algorithms.length" value="">No algorithm for this pair</option>
+      <option v-for="m in algorithms" :key="m.algorithm" :value="m.algorithm" :title="m.description">
+        {{ m.name }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<style scoped>
+.algo-selector { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; width: 100%; }
+.algo-label {
+  font-size: 0.8em;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  line-height: 1.2;
+  min-height: 1.2em;
+}
+.algo-select {
+  height: 2.4rem;
+  padding: 0 0.6rem;
+  border: 1px solid var(--border);
+  border-radius: 0.4rem;
+  background: var(--surface);
+  color: var(--text);
+  font: inherit;
+  box-sizing: border-box;
+  width: 100%;
+}
+.algo-select:focus { outline: 2px solid var(--primary-soft); border-color: var(--primary); }
+</style>

src/frontend/src/components/coins/CommunityRankCallout.vue

@@ -0,0 +1,49 @@
+<script setup>
+defineProps({
+  rankC: { type: Number, required: true },
+})
+</script>
+
+<template>
+  <div class="community-callout" :class="{ miss: rankC === 0 }">
+    <div class="cc-icon"><i :class="['icon', rankC === 0 ? 'times circle' : 'map marker alternate']"></i></div>
+    <div class="cc-body">
+      <div class="cc-head">
+        <span v-if="rankC > 0">Community rank <strong>#{{ rankC }}</strong></span>
+        <span v-else>No valid answers found</span>
+      </div>
+      <div class="cc-sub">
+        <template v-if="rankC === 1">
+          The best-scoring community contained a valid answer — COINs localized the search immediately.
+        </template>
+        <template v-else-if="rankC > 1">
+          COINs had to scan {{ rankC }} communities before hitting a valid answer. Step 2 still only
+          scored candidates inside those communities, not the whole graph.
+        </template>
+        <template v-else>
+          The KG contains no answer matching this query. Try a different anchor, relation, or pin
+          different variables.
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.community-callout {
+  display: flex;
+  gap: 0.75rem;
+  padding: 0.85rem 1rem;
+  background: var(--primary-soft);
+  border-radius: 0.5rem;
+  border-left: 3px solid var(--primary);
+}
+.community-callout.miss {
+  background: rgba(192, 57, 43, 0.08);
+  border-left-color: #c0392b;
+}
+.cc-icon i.icon { font-size: 1.8em; color: var(--primary); margin: 0; }
+.community-callout.miss .cc-icon i.icon { color: #c0392b; }
+.cc-head { font-size: 1.05em; font-weight: 600; margin-bottom: 0.2rem; }
+.cc-sub { font-size: 0.9em; color: var(--text-muted); }
+</style>

src/frontend/src/components/coins/PredictionList.vue

@@ -0,0 +1,70 @@
+<script setup>
+defineProps({
+  predictions: { type: Array, required: true },
+})
+
+function barWidth(score) {
+  const pct = Math.max(0, Math.min(1, score)) * 100
+  return pct.toFixed(1) + '%'
+}
+</script>
+
+<template>
+  <div class="pred-list">
+    <h3 class="ui header"><i class="list ol icon"></i>Top-K Predictions</h3>
+    <div v-if="!predictions.length" class="muted">No predictions returned.</div>
+    <div v-else class="pred-rows">
+      <div v-for="p in predictions" :key="p.entity_id" class="pred-row">
+        <div class="pred-rank" :title="`intra-community rank ${p.intra_community_rank}`">
+          #{{ p.rank }}
+        </div>
+        <div class="pred-body">
+          <div class="pred-name" :title="`entity id ${p.entity_id}`">{{ p.entity_name }}</div>
+          <div class="pred-bar">
+            <div class="pred-bar-fill" :style="{ width: barWidth(p.score) }"></div>
+          </div>
+          <div class="pred-meta">
+            <span class="pred-score">score {{ p.score.toFixed(4) }}</span>
+            <span class="muted">intra-community #{{ p.intra_community_rank }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.pred-list { padding: 0; }
+.pred-rows { display: flex; flex-direction: column; gap: 0.5rem; }
+.pred-row {
+  display: grid;
+  grid-template-columns: 3.5rem 1fr;
+  gap: 0.75rem;
+  align-items: center;
+  padding: 0.6rem;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 0.5rem;
+}
+.pred-rank {
+  font-family: ui-monospace, SFMono-Regular, monospace;
+  font-weight: 700;
+  color: var(--primary-strong);
+  text-align: center;
+  font-size: 1.1em;
+}
+.pred-body { min-width: 0; }
+.pred-name { font-weight: 600; word-break: break-word; }
+.pred-bar {
+  width: 100%;
+  height: 6px;
+  background: var(--surface-muted);
+  border-radius: 3px;
+  overflow: hidden;
+  margin: 0.35rem 0 0.25rem;
+}
+.pred-bar-fill { height: 100%; background: var(--primary); }
+.pred-meta { display: flex; gap: 0.75rem; font-size: 0.8em; }
+.pred-score { color: var(--text); font-family: ui-monospace, SFMono-Regular, monospace; }
+.muted { color: var(--text-muted); }
+</style>

src/frontend/src/components/coins/QueryDescription.vue

@@ -0,0 +1,31 @@
+<script setup>
+defineProps({
+  description: { type: String, required: true },
+  structure: { type: String, default: '' },
+  algorithm: { type: String, default: '' },
+  datasetId: { type: String, default: '' },
+})
+</script>
+
+<template>
+  <div class="query-desc">
+    <div class="qd-chips">
+      <span v-if="datasetId" class="ui tiny label"><i class="database icon"></i>{{ datasetId }}</span>
+      <span v-if="structure" class="ui tiny label">{{ structure }}</span>
+      <span v-if="algorithm" class="ui tiny green label">{{ algorithm }}</span>
+    </div>
+    <p class="qd-text">{{ description }}</p>
+  </div>
+</template>
+
+<style scoped>
+.query-desc {
+  padding: 0.75rem 1rem;
+  background: var(--primary-soft);
+  border-left: 3px solid var(--primary);
+  border-radius: 0.4rem;
+  margin-bottom: 1rem;
+}
+.qd-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.35rem; }
+.qd-text { margin: 0; font-weight: 500; word-break: break-word; }
+</style>

src/frontend/src/components/coins/QueryGraph.vue

@@ -0,0 +1,428 @@
+<script setup>
+import { ref, reactive, computed, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
+
+const props = defineProps({
+  structure: { type: Object, required: true },
+  mode: { type: String, default: 'edit' },
+  cellMinWidth: { type: Number, default: 200 },
+  cellMinHeight: { type: Number, default: 110 },
+  colGap: { type: Number, default: 72 },
+  rowGap: { type: Number, default: 56 },
+})
+
+const TARGET_ID = 't'
+
+const EDIT_LAYOUTS = {
+  '1p': {
+    cols: 2, rows: 1,
+    cells: [
+      { id: 'a', col: 1, row: 1 },
+      { id: 't', col: 2, row: 1 },
+    ],
+  },
+  '2p': {
+    cols: 3, rows: 1,
+    cells: [
+      { id: 'a', col: 1, row: 1 },
+      { id: 'v1', col: 2, row: 1 },
+      { id: 't', col: 3, row: 1 },
+    ],
+  },
+  '3p': {
+    cols: 4, rows: 1,
+    cells: [
+      { id: 'a', col: 1, row: 1 },
+      { id: 'v1', col: 2, row: 1 },
+      { id: 'v2', col: 3, row: 1 },
+      { id: 't', col: 4, row: 1 },
+    ],
+  },
+  '2i': {
+    cols: 2, rows: 2,
+    cells: [
+      { id: 'a1', col: 1, row: 1 },
+      { id: 'a2', col: 1, row: 2 },
+      { id: 't', col: 2, row: 1, rowSpan: 2 },
+    ],
+  },
+  '3i': {
+    cols: 2, rows: 3,
+    cells: [
+      { id: 'a1', col: 1, row: 1 },
+      { id: 'a2', col: 1, row: 2 },
+      { id: 'a3', col: 1, row: 3 },
+      { id: 't', col: 2, row: 1, rowSpan: 3 },
+    ],
+  },
+  'ip': {
+    cols: 3, rows: 2,
+    cells: [
+      { id: 'a1', col: 1, row: 1 },
+      { id: 'a2', col: 1, row: 2 },
+      { id: 'v1', col: 2, row: 1, rowSpan: 2 },
+      { id: 't', col: 3, row: 1, rowSpan: 2 },
+    ],
+  },
+  'pi': {
+    cols: 3, rows: 2,
+    cells: [
+      { id: 'a1', col: 1, row: 1 },
+      { id: 'v1', col: 2, row: 1 },
+      { id: 'a2', col: 1, row: 2 },
+      { id: 't', col: 3, row: 1, rowSpan: 2 },
+    ],
+  },
+}
+
+// Preview reuses the 2D edit layouts: multi-row intersection queries (2i/3i/ip/pi)
+// route converging edges as straight diagonals instead of stacked arcs, so relation
+// labels don't pile on top of each other and the grid's bounding box already
+// contains every edge — no need to expand the SVG viewBox beyond it.
+const PREVIEW_LAYOUTS = EDIT_LAYOUTS
+
+const allNodes = computed(() => {
+  const base = props.structure.nodes.slice()
+  if (!base.some((n) => n.id === TARGET_ID)) {
+    base.push({ id: TARGET_ID, type: 'target', label: '?' })
+  }
+  return base
+})
+
+const nodeById = computed(() => {
+  const m = {}
+  for (const n of allNodes.value) m[n.id] = n
+  return m
+})
+
+const layout = computed(() => {
+  const map = props.mode === 'preview' ? PREVIEW_LAYOUTS : EDIT_LAYOUTS
+  return map[props.structure.id] || { cols: 1, rows: 1, cells: [] }
+})
+
+const cellCol = computed(() => {
+  const m = {}
+  for (const c of layout.value.cells) m[c.id] = c.col
+  return m
+})
+
+const dynamicColGap = ref(props.colGap)
+const dynamicRowGap = ref(props.rowGap)
+
+const gridStyle = computed(() => ({
+  'grid-template-columns': `repeat(${layout.value.cols}, minmax(min-content, 1fr))`,
+  'grid-template-rows': `repeat(${layout.value.rows}, minmax(${props.cellMinHeight}px, auto))`,
+  'column-gap': dynamicColGap.value + 'px',
+  'row-gap': dynamicRowGap.value + 'px',
+}))
+
+function cellStyle(cell) {
+  const colEnd = cell.colSpan ? cell.col + cell.colSpan : cell.col + 1
+  const rowEnd = cell.rowSpan ? cell.row + cell.rowSpan : cell.row + 1
+  return {
+    'grid-column': `${cell.col} / ${colEnd}`,
+    'grid-row': `${cell.row} / ${rowEnd}`,
+  }
+}
+
+const gridEl = ref(null)
+const nodeRefs = reactive({})
+function setNodeRef(id, el) {
+  if (el) nodeRefs[id] = el
+  else delete nodeRefs[id]
+}
+const edgeRefs = reactive({})
+function setEdgeRef(id, el) {
+  if (el) edgeRefs[id] = el
+  else delete edgeRefs[id]
+}
+
+const geometry = ref({ w: 0, h: 0, centers: {}, rects: {} })
+
+// The grid cell is much larger than its content pill (minmax(Npx, auto)),
+// so measuring the cell gives the line endpoints a rect that overshoots the
+// visible pill. Measure the cell's first child (the slot-node or fallback pill)
+// instead — it hugs the pill, so intersectRect lands right at the pill edge.
+function contentOf(cellEl) {
+  return cellEl?.firstElementChild || cellEl
+}
+
+function measure() {
+  if (!gridEl.value) return
+  let maxNodeW = 0
+  let maxNodeH = 0
+  for (const id of Object.keys(nodeRefs)) {
+    const el = contentOf(nodeRefs[id])
+    if (!el) continue
+    const r = el.getBoundingClientRect()
+    if (r.width > maxNodeW) maxNodeW = r.width
+    if (r.height > maxNodeH) maxNodeH = r.height
+  }
+  let maxEdgeW = 0
+  let maxEdgeH = 0
+  for (const id of Object.keys(edgeRefs)) {
+    const el = edgeRefs[id]
+    if (!el) continue
+    const r = el.getBoundingClientRect()
+    if (r.width > maxEdgeW) maxEdgeW = r.width
+    if (r.height > maxEdgeH) maxEdgeH = r.height
+  }
+  const colGapFromEdge = maxEdgeW + 48
+  const colGapFromNodeOverlap = Math.ceil(maxNodeW * 0.15) + 24
+  let gap = Math.max(props.colGap, colGapFromEdge, colGapFromNodeOverlap)
+  const numGaps = Math.max(1, layout.value.cols - 1)
+  const containerW = gridEl.value.parentElement?.clientWidth || gridEl.value.clientWidth
+  const maxGap = Math.floor((containerW - layout.value.cols * 80) / numGaps)
+  if (maxGap > 0 && gap > maxGap) gap = Math.max(props.colGap, maxGap)
+  dynamicColGap.value = gap
+  dynamicRowGap.value = Math.max(props.rowGap, maxEdgeH + 28)
+
+  const gridRect = gridEl.value.getBoundingClientRect()
+  const centers = {}
+  const rects = {}
+  for (const id of Object.keys(nodeRefs)) {
+    const el = contentOf(nodeRefs[id])
+    if (!el) continue
+    const r = el.getBoundingClientRect()
+    const x = r.left - gridRect.left + r.width / 2
+    const y = r.top - gridRect.top + r.height / 2
+    centers[id] = { x, y }
+    rects[id] = { w: r.width, h: r.height }
+  }
+  geometry.value = { w: gridRect.width, h: gridRect.height, centers, rects }
+}
+
+function intersectRect(cx, cy, w, h, tx, ty) {
+  const dx = tx - cx
+  const dy = ty - cy
+  if (dx === 0 && dy === 0) return { x: cx, y: cy }
+  const hw = w / 2
+  const hh = h / 2
+  const sx = dx === 0 ? Infinity : Math.abs(hw / dx)
+  const sy = dy === 0 ? Infinity : Math.abs(hh / dy)
+  const t = Math.min(sx, sy)
+  return { x: cx + dx * t, y: cy + dy * t }
+}
+
+const edgeRoutes = computed(() => {
+  const { centers, rects } = geometry.value
+  const cols = cellCol.value
+  return (props.structure.edges || []).map((e) => {
+    const s = centers[e.source]
+    const t = centers[e.target]
+    if (!s || !t) return null
+    const sr = rects[e.source] || { w: 0, h: 0 }
+    const tr = rects[e.target] || { w: 0, h: 0 }
+    const p1 = intersectRect(s.x, s.y, sr.w - 4, sr.h - 4, t.x, t.y)
+    const p2 = intersectRect(t.x, t.y, tr.w - 4, tr.h - 4, s.x, s.y)
+
+    const colSpan = Math.abs((cols[e.target] || 0) - (cols[e.source] || 0))
+    const sameRow = Math.abs(s.y - t.y) < 8
+    const needsCurve = colSpan > 1 && sameRow
+    let path
+    let mx = (p1.x + p2.x) / 2
+    let my = (p1.y + p2.y) / 2
+    if (needsCurve) {
+      const arc = Math.min(70, 22 + colSpan * 14)
+      const cy = my - arc
+      path = `M ${p1.x} ${p1.y} Q ${mx} ${cy} ${p2.x} ${p2.y}`
+      my = my - arc / 2
+    } else {
+      path = `M ${p1.x} ${p1.y} L ${p2.x} ${p2.y}`
+    }
+    return { ...e, path, mx, my }
+  }).filter(Boolean)
+})
+
+let ro = null
+let ticking = false
+function schedule() {
+  if (ticking) return
+  ticking = true
+  requestAnimationFrame(() => {
+    ticking = false
+    measure()
+  })
+}
+
+onMounted(async () => {
+  await nextTick()
+  measure()
+  ro = new ResizeObserver(schedule)
+  if (gridEl.value) ro.observe(gridEl.value)
+  for (const id of Object.keys(nodeRefs)) {
+    if (nodeRefs[id]) ro.observe(nodeRefs[id])
+  }
+  for (const id of Object.keys(edgeRefs)) {
+    if (edgeRefs[id]) ro.observe(edgeRefs[id])
+  }
+  window.addEventListener('resize', schedule)
+  if (document.fonts?.ready) document.fonts.ready.then(schedule)
+})
+
+onBeforeUnmount(() => {
+  if (ro) ro.disconnect()
+  window.removeEventListener('resize', schedule)
+})
+
+watch(() => props.structure?.id, async () => {
+  await nextTick()
+  schedule()
+})
+
+watch(nodeRefs, () => {
+  if (!ro) return
+  for (const id of Object.keys(nodeRefs)) {
+    const el = nodeRefs[id]
+    if (el) ro.observe(el)
+  }
+  schedule()
+}, { deep: true })
+
+watch(edgeRefs, () => {
+  if (!ro) return
+  for (const id of Object.keys(edgeRefs)) {
+    const el = edgeRefs[id]
+    if (el) ro.observe(el)
+  }
+  schedule()
+}, { deep: true })
+
+function edgeLabelStyle(e) {
+  return { left: e.mx + 'px', top: e.my + 'px' }
+}
+</script>
+
+<template>
+  <div class="query-graph" :class="{ preview: mode === 'preview' }">
+    <div class="qg-grid" ref="gridEl" :style="gridStyle">
+      <svg class="qg-edges"
+           :viewBox="`0 0 ${geometry.w || 1} ${geometry.h || 1}`"
+           :width="geometry.w || 0" :height="geometry.h || 0"
+           aria-hidden="true"
+           preserveAspectRatio="none">
+        <defs>
+          <marker id="qg-arrow" viewBox="0 0 10 10" refX="9" refY="5"
+                  markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+            <path d="M 0 0 L 10 5 L 0 10 z" fill="var(--primary)" />
+          </marker>
+        </defs>
+        <path v-for="e in edgeRoutes" :key="'e-' + e.id"
+              :d="e.path"
+              class="qg-edge" marker-end="url(#qg-arrow)" />
+      </svg>
+
+      <div v-for="cell in layout.cells" :key="'c-' + cell.id"
+           :ref="(el) => setNodeRef(cell.id, el)"
+           class="qg-cell"
+           :class="['qg-' + (nodeById[cell.id]?.type || 'target')]"
+           :style="cellStyle(cell)">
+        <slot :name="'node-' + cell.id" :node="nodeById[cell.id]">
+          <span class="qg-fallback" :class="'qg-fallback-' + (nodeById[cell.id]?.type || 'target')">
+            {{ nodeById[cell.id]?.label || cell.id }}
+          </span>
+        </slot>
+      </div>
+
+      <div v-for="e in edgeRoutes" :key="'el-' + e.id"
+           :ref="(el) => setEdgeRef(e.id, el)"
+           class="qg-edge-label"
+           :style="edgeLabelStyle(e)">
+        <slot :name="'edge-' + e.id" :edge="e">
+          <span class="qg-fallback qg-fallback-edge">{{ e.label || e.id }}</span>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.query-graph {
+  position: relative;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  padding: 1rem 0;
+}
+.qg-grid {
+  position: relative;
+  display: grid;
+  justify-items: center;
+  align-items: center;
+  width: 100%;
+  isolation: isolate;
+}
+.qg-cell {
+  position: relative;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.qg-cell:focus-within,
+.qg-cell:hover {
+  z-index: 20;
+}
+.qg-edges {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 1;
+  overflow: visible;
+}
+.qg-edge {
+  stroke: var(--primary);
+  stroke-width: 2;
+  fill: none;
+  opacity: 0.8;
+}
+.qg-edge-label {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  z-index: 3;
+  background: var(--surface);
+  border-radius: 999px;
+  padding: 0.15rem 0.35rem;
+}
+.qg-edge-label:focus-within,
+.qg-edge-label:hover {
+  z-index: 21;
+}
+.qg-fallback {
+  display: inline-block;
+  padding: 0.4em 0.8em;
+  border-radius: 999px;
+  background: var(--primary-soft);
+  color: var(--text);
+  border: 1px solid var(--primary);
+  font-size: 0.9em;
+  max-width: min(40ch, 90vw);
+  word-break: break-word;
+}
+.qg-fallback-target {
+  background: var(--surface);
+  border: 2px dashed var(--primary);
+  font-weight: 700;
+}
+.qg-fallback-variable {
+  background: var(--surface-muted);
+  border-style: dashed;
+}
+.qg-fallback-edge {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  color: var(--text-muted);
+  font-size: 0.8em;
+  padding: 0.2em 0.6em;
+}
+
+.query-graph.preview { padding: 0; }
+.query-graph.preview .qg-edge { stroke-width: 1.5; }
+.query-graph.preview .qg-fallback {
+  padding: 0.25em 0.55em;
+  font-size: 0.7em;
+  max-width: 10ch;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>

src/frontend/src/components/coins/QueryStructurePicker.vue

@@ -0,0 +1,184 @@
+<script setup>
+import { ref, computed, watch } from 'vue'
+import QueryGraph from './QueryGraph.vue'
+
+const props = defineProps({
+  structures: { type: Array, required: true },
+  modelValue: { type: String, default: '' },
+})
+const emit = defineEmits(['update:modelValue'])
+
+const index = ref(0)
+
+watch(
+  () => [props.modelValue, props.structures.length],
+  () => {
+    const i = props.structures.findIndex((s) => s.id === props.modelValue)
+    if (i >= 0) index.value = i
+  },
+  { immediate: true },
+)
+
+const current = computed(() => props.structures[index.value] || null)
+const count = computed(() => props.structures.length)
+
+function go(delta) {
+  if (!count.value) return
+  const next = (index.value + delta + count.value) % count.value
+  index.value = next
+  const s = props.structures[next]
+  if (s) emit('update:modelValue', s.id)
+}
+
+function jump(i) {
+  if (i < 0 || i >= count.value) return
+  index.value = i
+  emit('update:modelValue', props.structures[i].id)
+}
+
+function select() {
+  if (current.value) emit('update:modelValue', current.value.id)
+}
+</script>
+
+<template>
+  <div class="structure-carousel" v-if="current">
+    <button type="button" class="nav-btn" @click="go(-1)" aria-label="Previous structure"
+            :disabled="count < 2">
+      <i class="chevron left icon"></i>
+    </button>
+
+    <button type="button" class="structure-card"
+            :class="{ active: modelValue === current.id }"
+            @click="select" :aria-pressed="modelValue === current.id">
+      <div class="structure-head">
+        <span class="structure-id">{{ current.id }}</span>
+        <span class="structure-name">{{ current.name }}</span>
+      </div>
+      <div class="structure-viz">
+        <QueryGraph :structure="current" mode="preview"
+                    :cell-min-width="56" :cell-min-height="32"
+                    :col-gap="72" :row-gap="28" />
+      </div>
+      <div class="structure-desc">{{ current.description }}</div>
+    </button>
+
+    <button type="button" class="nav-btn" @click="go(1)" aria-label="Next structure"
+            :disabled="count < 2">
+      <i class="chevron right icon"></i>
+    </button>
+  </div>
+
+  <div v-if="count > 1" class="dots">
+    <button v-for="(s, i) in structures" :key="s.id" type="button"
+            class="dot" :class="{ active: i === index }"
+            @click="jump(i)" :aria-label="`Jump to ${s.id}`">
+      <span>{{ s.id }}</span>
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.structure-carousel {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: stretch;
+  gap: 0.5rem;
+}
+.nav-btn {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 0.5rem;
+  color: var(--primary-strong);
+  cursor: pointer;
+  padding: 0 0.6rem;
+  font-size: 1.3rem;
+  transition: 0.15s;
+}
+.nav-btn:hover:enabled { background: var(--primary-soft); border-color: var(--primary); }
+.nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+.nav-btn i.icon { margin: 0; }
+
+.structure-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 0.6rem;
+  padding: 0.5rem 0.5rem 0.6rem;
+  cursor: pointer;
+  text-align: center;
+  color: var(--text);
+  font: inherit;
+  transition: 0.15s;
+  box-shadow: var(--shadow-sm);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.35rem;
+  min-height: 300px;
+  overflow: visible;
+}
+.structure-card:hover { border-color: var(--primary); transform: translateY(-1px); }
+.structure-card.active {
+  border-color: var(--primary);
+  background: var(--primary-soft);
+  box-shadow: var(--shadow-md);
+}
+.structure-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+.structure-id {
+  font-family: ui-monospace, SFMono-Regular, monospace;
+  font-weight: 700;
+  color: var(--primary-strong);
+  font-size: 1.2em;
+}
+.structure-name { font-weight: 600; font-size: 1em; }
+.structure-viz {
+  min-height: 180px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: visible;
+}
+.structure-desc {
+  font-size: 0.85em;
+  color: var(--text-muted);
+  line-height: 1.4;
+  max-width: 48rem;
+}
+
+.dots {
+  display: flex;
+  gap: 0.35rem;
+  justify-content: center;
+  margin-top: 0.75rem;
+  flex-wrap: wrap;
+}
+.dot {
+  min-width: 2.6rem;
+  height: 1.8rem;
+  padding: 0 0.5rem;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  color: var(--text-muted);
+  font: inherit;
+  font-size: 0.78em;
+  font-family: ui-monospace, SFMono-Regular, monospace;
+  font-weight: 600;
+  cursor: pointer;
+  transition: 0.15s;
+}
+.dot:hover { border-color: var(--primary); color: var(--primary-strong); }
+.dot.active {
+  background: var(--primary);
+  color: #fff;
+  border-color: var(--primary);
+}
+
+</style>

src/frontend/src/components/coins/ResultsDashboard.vue

@@ -0,0 +1,44 @@
+<script setup>
+import QueryDescription from './QueryDescription.vue'
+import PredictionList from './PredictionList.vue'
+import CommunityRankCallout from './CommunityRankCallout.vue'
+import TimingPanel from './TimingPanel.vue'
+
+defineProps({
+  result: { type: Object, required: true },
+})
+</script>
+
+<template>
+  <div class="results-dashboard">
+    <QueryDescription
+      :description="result.query_description"
+      :structure="result.query_structure"
+      :algorithm="result.algorithm"
+      :dataset-id="result.dataset_id" />
+
+    <CommunityRankCallout :rank-c="result.timing?.rank_c ?? 0" />
+
+    <div class="dashboard-grid">
+      <div class="ui segment">
+        <PredictionList :predictions="result.predictions || []" />
+      </div>
+      <div class="ui segment">
+        <TimingPanel :timing="result.timing || {}" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.results-dashboard { display: flex; flex-direction: column; gap: 1rem; }
+.dashboard-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+.ui.segment { margin: 0 !important; }
+@media (max-width: 900px) {
+  .dashboard-grid { grid-template-columns: 1fr; }
+}
+</style>

src/frontend/src/components/coins/SearchableEntityDropdown.vue

@@ -0,0 +1,28 @@
+<script setup>
+import { computed } from 'vue'
+import { searchEntities } from '../../api/coins'
+import SearchablePicker from './SearchablePicker.vue'
+
+const props = defineProps({
+  modelValue: { type: Object, default: null },
+  datasetId: { type: String, required: true },
+  placeholder: { type: String, default: 'Pick entity' },
+  disabled: { type: Boolean, default: false },
+})
+defineEmits(['update:modelValue'])
+
+const fetcher = computed(() => {
+  const ds = props.datasetId
+  return (opts) => searchEntities(ds, opts)
+})
+</script>
+
+<template>
+  <SearchablePicker
+    :model-value="modelValue"
+    :fetcher="fetcher"
+    kind="entity"
+    :placeholder="placeholder"
+    :disabled="disabled || !datasetId"
+    @update:modelValue="$emit('update:modelValue', $event)" />
+</template>

src/frontend/src/components/coins/SearchablePicker.vue

@@ -0,0 +1,282 @@
+<script setup>
+import { ref, computed, onBeforeUnmount, nextTick, watch } from 'vue'
+
+const props = defineProps({
+  modelValue: { type: Object, default: null },
+  fetcher: { type: Function, required: true },
+  placeholder: { type: String, default: 'Pick…' },
+  kind: { type: String, default: 'entity' },
+  disabled: { type: Boolean, default: false },
+  pageSize: { type: Number, default: 25 },
+})
+const emit = defineEmits(['update:modelValue'])
+
+const open = ref(false)
+const query = ref('')
+const items = ref([])
+const total = ref(0)
+const page = ref(1)
+const loading = ref(false)
+const errorMsg = ref('')
+const highlight = ref(-1)
+const rootEl = ref(null)
+const inputEl = ref(null)
+
+let abortCtl = null
+let debounceTimer = null
+
+const display = computed(() => {
+  if (!props.modelValue) return ''
+  return props.modelValue.label || props.modelValue.name || String(props.modelValue.id)
+})
+
+const hasMore = computed(() => items.value.length < total.value)
+
+async function runFetch({ reset = false } = {}) {
+  if (abortCtl) abortCtl.abort()
+  abortCtl = new AbortController()
+  loading.value = true
+  errorMsg.value = ''
+  try {
+    const res = await props.fetcher({
+      q: query.value,
+      page: reset ? 1 : page.value,
+      pageSize: props.pageSize,
+      signal: abortCtl.signal,
+    })
+    const list = res?.entities || res?.relations || res?.results || []
+    total.value = res?.total ?? list.length
+    if (reset) {
+      items.value = list
+      page.value = 1
+      highlight.value = list.length ? 0 : -1
+    } else {
+      items.value = [...items.value, ...list]
+    }
+  } catch (e) {
+    if (e?.name === 'CanceledError' || e?.name === 'AbortError') return
+    errorMsg.value = e?.response?.data?.error?.message || e?.message || 'Lookup failed'
+  } finally {
+    loading.value = false
+  }
+}
+
+function scheduleFetch() {
+  if (debounceTimer) clearTimeout(debounceTimer)
+  debounceTimer = setTimeout(() => runFetch({ reset: true }), 250)
+}
+
+async function openMenu() {
+  if (props.disabled) return
+  open.value = true
+  await nextTick()
+  inputEl.value?.focus()
+  if (!items.value.length && !loading.value) runFetch({ reset: true })
+}
+
+function closeMenu() {
+  open.value = false
+  if (abortCtl) abortCtl.abort()
+  if (debounceTimer) clearTimeout(debounceTimer)
+}
+
+function onInput(e) {
+  query.value = e.target.value
+  scheduleFetch()
+}
+
+function pick(item) {
+  emit('update:modelValue', item)
+  closeMenu()
+}
+
+function clear() {
+  emit('update:modelValue', null)
+}
+
+async function loadMore() {
+  if (loading.value || !hasMore.value) return
+  page.value += 1
+  await runFetch({ reset: false })
+}
+
+function onKey(e) {
+  if (!open.value) return
+  if (e.key === 'Escape') { e.preventDefault(); closeMenu() }
+  else if (e.key === 'ArrowDown') { e.preventDefault(); highlight.value = Math.min(highlight.value + 1, items.value.length - 1) }
+  else if (e.key === 'ArrowUp') { e.preventDefault(); highlight.value = Math.max(highlight.value - 1, 0) }
+  else if (e.key === 'Enter') {
+    e.preventDefault()
+    if (items.value[highlight.value]) pick(items.value[highlight.value])
+  }
+}
+
+function onDocClick(e) {
+  if (!open.value) return
+  if (rootEl.value && !rootEl.value.contains(e.target)) closeMenu()
+}
+document.addEventListener('mousedown', onDocClick)
+
+onBeforeUnmount(() => {
+  document.removeEventListener('mousedown', onDocClick)
+  if (abortCtl) abortCtl.abort()
+  if (debounceTimer) clearTimeout(debounceTimer)
+})
+
+watch(() => props.fetcher, () => {
+  items.value = []
+  total.value = 0
+  page.value = 1
+  if (open.value) runFetch({ reset: true })
+})
+</script>
+
+<template>
+  <div class="picker" :class="['picker-' + kind, { open, disabled }]" ref="rootEl">
+    <button type="button" class="picker-pill" :class="{ filled: !!modelValue }"
+            @click="open ? closeMenu() : openMenu()" :disabled="disabled"
+            :title="modelValue?.name || ''" :aria-haspopup="true" :aria-expanded="open">
+      <span class="pill-text">{{ display || placeholder }}</span>
+      <span v-if="modelValue" class="pill-clear" role="button"
+            aria-label="Clear selection"
+            @click.stop="clear">✕</span>
+      <i v-else class="icon-caret">▾</i>
+    </button>
+
+    <div v-if="open" class="picker-menu" @keydown="onKey">
+      <div class="picker-search">
+        <input ref="inputEl" type="text" :value="query" @input="onInput"
+               :placeholder="`Search ${kind}…`" @keydown="onKey" />
+      </div>
+      <div class="picker-list">
+        <div v-if="loading && !items.length" class="picker-info">Searching…</div>
+        <div v-else-if="errorMsg" class="picker-error">{{ errorMsg }}</div>
+        <div v-else-if="!items.length" class="picker-info">No matches.</div>
+        <button v-for="(it, i) in items" :key="it.id" type="button"
+                class="picker-item" :class="{ hi: i === highlight, picked: modelValue?.id === it.id }"
+                @mouseenter="highlight = i" @click="pick(it)">
+          <span class="item-label">{{ it.label || it.name || it.id }}</span>
+          <span v-if="it.label && it.name && it.label !== it.name" class="item-sub">{{ it.name }}</span>
+        </button>
+        <button v-if="hasMore" type="button" class="picker-more"
+                :disabled="loading" @click="loadMore">
+          {{ loading ? 'Loading…' : `Load more (${items.length} / ${total})` }}
+        </button>
+        <div v-else-if="items.length && !loading" class="picker-info">
+          {{ items.length }} of {{ total }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.picker { position: relative; display: inline-block; max-width: 100%; }
+.picker.disabled { opacity: 0.6; pointer-events: none; }
+
+.picker-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  width: max-content;
+  max-width: min(40ch, 90vw);
+  padding: 0.4em 0.75em;
+  border-radius: 999px;
+  border: 1px solid var(--primary);
+  background: var(--surface);
+  color: var(--text);
+  font: inherit;
+  font-size: 0.9em;
+  cursor: pointer;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  text-align: left;
+  box-shadow: var(--shadow-sm);
+  transition: 0.15s;
+}
+.picker-pill:hover { background: var(--primary-soft); }
+.picker-pill.filled {
+  background: var(--primary-soft);
+  font-weight: 500;
+}
+.picker-relation .picker-pill {
+  border-style: dashed;
+  background: var(--surface);
+  color: var(--text-muted);
+  font-size: 0.82em;
+}
+.picker-relation .picker-pill.filled {
+  color: var(--text);
+  border-style: solid;
+  background: var(--primary-soft);
+}
+.pill-text { flex: 1 1 auto; }
+.pill-clear {
+  font-size: 0.8em;
+  opacity: 0.6;
+  padding: 0 0.25em;
+  cursor: pointer;
+}
+.pill-clear:hover { opacity: 1; color: var(--primary-strong); }
+.icon-caret { font-size: 0.75em; opacity: 0.7; }
+
+.picker-menu {
+  position: absolute;
+  top: calc(100% + 0.3rem);
+  left: 0;
+  z-index: 1000;
+  min-width: 18rem;
+  max-width: min(90vw, 32rem);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 0.5rem;
+  box-shadow: var(--shadow-md);
+  overflow: hidden;
+}
+.picker-search { padding: 0.5rem; border-bottom: 1px solid var(--border); }
+.picker-search input {
+  width: 100%;
+  border: 1px solid var(--border);
+  border-radius: 0.4rem;
+  padding: 0.35rem 0.5rem;
+  background: var(--surface);
+  color: var(--text);
+}
+.picker-search input:focus { outline: 2px solid var(--primary-soft); border-color: var(--primary); }
+.picker-list {
+  max-height: 18rem;
+  overflow-y: auto;
+  padding: 0.25rem 0;
+}
+.picker-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+  background: none;
+  border: 0;
+  padding: 0.4rem 0.75rem;
+  text-align: left;
+  color: var(--text);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.9em;
+}
+.picker-item.hi, .picker-item:hover { background: var(--primary-soft); }
+.picker-item.picked { font-weight: 600; color: var(--primary-strong); }
+.item-label { word-break: break-word; }
+.item-sub { font-size: 0.75em; color: var(--text-muted); font-family: ui-monospace, SFMono-Regular, monospace; }
+.picker-info { padding: 0.5rem 0.75rem; color: var(--text-muted); font-size: 0.85em; }
+.picker-error { padding: 0.5rem 0.75rem; color: #c0392b; font-size: 0.85em; }
+.picker-more {
+  width: 100%;
+  padding: 0.5rem;
+  border: 0;
+  border-top: 1px solid var(--border);
+  background: var(--surface-muted);
+  cursor: pointer;
+  font-size: 0.85em;
+  color: var(--primary-strong);
+}
+.picker-more:hover:enabled { background: var(--primary-soft); }
+</style>

src/frontend/src/components/coins/SearchableRelationDropdown.vue

@@ -0,0 +1,28 @@
+<script setup>
+import { computed } from 'vue'
+import { searchRelations } from '../../api/coins'
+import SearchablePicker from './SearchablePicker.vue'
+
+const props = defineProps({
+  modelValue: { type: Object, default: null },
+  datasetId: { type: String, required: true },
+  placeholder: { type: String, default: 'Pick relation' },
+  disabled: { type: Boolean, default: false },
+})
+defineEmits(['update:modelValue'])
+
+const fetcher = computed(() => {
+  const ds = props.datasetId
+  return (opts) => searchRelations(ds, opts)
+})
+</script>
+
+<template>
+  <SearchablePicker
+    :model-value="modelValue"
+    :fetcher="fetcher"
+    kind="relation"
+    :placeholder="placeholder"
+    :disabled="disabled || !datasetId"
+    @update:modelValue="$emit('update:modelValue', $event)" />
+</template>

src/frontend/src/components/coins/TimingPanel.vue

@@ -0,0 +1,109 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  timing: { type: Object, required: true },
+})
+
+const maxMs = computed(() => {
+  const t = props.timing
+  return Math.max(t.total_ms || 0, t.baseline_estimate_ms || 0, 1)
+})
+
+function pct(v) {
+  return Math.max(1, (v / maxMs.value) * 100) + '%'
+}
+
+function fmt(v) {
+  if (v == null) return '—'
+  return v >= 100 ? v.toFixed(0) + ' ms' : v.toFixed(1) + ' ms'
+}
+</script>
+
+<template>
+  <div class="timing-panel">
+    <h3 class="ui header"><i class="stopwatch icon"></i>Timing &amp; Speedup</h3>
+
+    <div class="speedup-hero">
+      <span class="speedup-val">×{{ (timing.speedup || 0).toFixed(1) }}</span>
+      <span class="speedup-label">faster than full-graph inference (Prop. 3.1)</span>
+    </div>
+
+    <div class="bars">
+      <div class="bar-row">
+        <div class="bar-label">{{ timing.step1_label || 'Step 1' }}</div>
+        <div class="bar-track">
+          <div class="bar-fill step1" :style="{ width: pct(timing.step1_ms) }"></div>
+        </div>
+        <div class="bar-value">{{ fmt(timing.step1_ms) }}</div>
+      </div>
+
+      <div class="bar-row">
+        <div class="bar-label">{{ timing.step2_label || 'Step 2' }}</div>
+        <div class="bar-track">
+          <div class="bar-fill step2" :style="{ width: pct(timing.step2_ms) }"></div>
+        </div>
+        <div class="bar-value">{{ fmt(timing.step2_ms) }}</div>
+      </div>
+
+      <div class="bar-row total">
+        <div class="bar-label">COINs total</div>
+        <div class="bar-track">
+          <div class="bar-fill total" :style="{ width: pct(timing.total_ms) }"></div>
+        </div>
+        <div class="bar-value">{{ fmt(timing.total_ms) }}</div>
+      </div>
+
+      <div class="bar-row baseline">
+        <div class="bar-label">{{ timing.baseline_label || 'Baseline estimate' }}</div>
+        <div class="bar-track">
+          <div class="bar-fill baseline" :style="{ width: pct(timing.baseline_estimate_ms) }"></div>
+        </div>
+        <div class="bar-value">{{ fmt(timing.baseline_estimate_ms) }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.timing-panel { padding: 0; }
+.speedup-hero {
+  display: flex;
+  gap: 0.6rem;
+  align-items: baseline;
+  padding: 0.75rem 1rem;
+  background: var(--primary-soft);
+  border-radius: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+.speedup-val { font-size: 2.2rem; font-weight: 700; color: var(--primary-strong); line-height: 1; }
+.speedup-label { color: var(--text-muted); font-size: 0.9em; }
+
+.bars { display: flex; flex-direction: column; gap: 0.4rem; }
+.bar-row {
+  display: grid;
+  grid-template-columns: minmax(7rem, 14rem) 1fr minmax(4.5rem, auto);
+  gap: 0.6rem;
+  align-items: center;
+  font-size: 0.9em;
+}
+.bar-label { color: var(--text-muted); }
+.bar-row.total .bar-label, .bar-row.total .bar-value { color: var(--text); font-weight: 600; }
+.bar-track {
+  height: 12px;
+  background: var(--surface-muted);
+  border-radius: 6px;
+  overflow: hidden;
+}
+.bar-fill { height: 100%; border-radius: 6px; }
+.bar-fill.step1 { background: var(--primary); opacity: 0.55; }
+.bar-fill.step2 { background: var(--primary); opacity: 0.8; }
+.bar-fill.total { background: var(--primary); }
+.bar-fill.baseline { background: var(--text-muted); opacity: 0.5; }
+.bar-value { font-family: ui-monospace, SFMono-Regular, monospace; text-align: right; }
+
+@media (max-width: 600px) {
+  .bar-row { grid-template-columns: 1fr auto; }
+  .bar-row .bar-label { grid-column: 1 / -1; font-size: 0.85em; }
+}
+</style>

src/frontend/src/components/home/DemoPreviewCard.vue

@@ -1,26 +1,33 @@
 <script setup>
+import { RouterLink } from 'vue-router'
+
 defineProps({
   title: { type: String, required: true },
   description: { type: String, required: true },
   icon: { type: String, default: 'flask' },
   thesisRef: { type: String, default: '' },
+  to: { type: String, default: '' },
 })
 </script>
 
 <template>
-  <div class="ui card demo-card">
+  <component :is="to ? RouterLink : 'div'" :to="to || undefined"
+             :class="['ui card demo-card', { linked: !!to }]">
     <div class="content">
       <div class="header"><i :class="['icon', icon]"></i>{{ title }}</div>
       <div class="meta" v-if="thesisRef">{{ thesisRef }}</div>
       <div class="description">{{ description }}</div>
     </div>
     <div class="extra content">
-      <span class="ui tiny label">Coming soon</span>
+      <span v-if="to" class="ui tiny green label">Open demo</span>
+      <span v-else class="ui tiny label">Coming soon</span>
     </div>
-  </div>
+  </component>
 </template>
 
 <style scoped>
 .demo-card { width: 100% !important; }
 .demo-card .header .icon { margin-right: 0.5rem !important; color: var(--primary); }
+.demo-card.linked { cursor: pointer; }
+.demo-card.linked:hover { box-shadow: var(--shadow-md) !important; transform: translateY(-2px); transition: 0.15s; }
 </style>

src/frontend/src/components/layout/NavBar.vue

@@ -18,6 +18,7 @@ function close() { menuOpen.value = false }
       <div class="right menu hide-mobile">
         <RouterLink to="/" class="item" active-class="active" exact-active-class="active">Home</RouterLink>
         <RouterLink to="/cv" class="item" active-class="active">CV</RouterLink>
+        <RouterLink to="/demos/coins" class="item" active-class="active">Demos</RouterLink>
         <div class="item borderless">
           <ThemeToggle />
         </div>
@@ -37,6 +38,7 @@ function close() { menuOpen.value = false }
     <div v-if="menuOpen" class="ui vertical menu mobile-drawer show-mobile">
       <RouterLink to="/" class="item" @click="close">Home</RouterLink>
       <RouterLink to="/cv" class="item" @click="close">CV</RouterLink>
+      <RouterLink to="/demos/coins" class="item" @click="close">Demos</RouterLink>
     </div>
   </nav>
 </template>

src/frontend/src/router/index.js

@@ -6,6 +6,12 @@ import NotFoundView from '../views/NotFoundView.vue'
 const routes = [
   { path: '/', name: 'home', component: HomeView, meta: { title: 'Andrej Janchevski — PhD Research' } },
   { path: '/cv', name: 'cv', component: CVView, meta: { title: 'CV — Andrej Janchevski' } },
+  {
+    path: '/demos/coins',
+    name: 'demo-coins',
+    component: () => import('../views/demos/CoinsView.vue'),
+    meta: { title: 'COINs — KG Reasoning Demo' },
+  },
   { path: '/:pathMatch(.*)*', name: 'not-found', component: NotFoundView, meta: { title: 'Not Found' } },
 ]
 

src/frontend/src/stores/coinsDemo.js

@@ -0,0 +1,198 @@
+import { defineStore } from 'pinia'
+import { apiError } from '../api/client'
+import { listDatasets, listModels, listQueryStructures, predict } from '../api/coins'
+
+export const useCoinsDemoStore = defineStore('coinsDemo', {
+  state: () => ({
+    datasets: [],
+    models: [],
+    structures: [],
+    registryLoaded: false,
+    registryError: '',
+    datasetId: '',
+    queryStructure: '',
+    algorithm: '',
+    anchors: {},
+    variables: {},
+    variablePinned: {},
+    relations: {},
+    topK: 10,
+    loading: false,
+    error: '',
+    errorCode: '',
+    result: null,
+  }),
+
+  getters: {
+    selectedStructure(state) {
+      return state.structures.find((s) => s.id === state.queryStructure) || null
+    },
+    allowedAlgorithms(state) {
+      if (!state.datasetId || !state.queryStructure) return []
+      return state.models.filter(
+        (m) =>
+          (m.supported_query_structures || []).includes(state.queryStructure) &&
+          (m.available_datasets || []).includes(state.datasetId),
+      )
+    },
+    anchorIds() {
+      const s = this.selectedStructure
+      if (!s) return []
+      return s.nodes.filter((n) => n.type === 'anchor').map((n) => n.id)
+    },
+    variableIds() {
+      const s = this.selectedStructure
+      if (!s) return []
+      return s.nodes.filter((n) => n.type === 'variable').map((n) => n.id)
+    },
+    relationIds() {
+      const s = this.selectedStructure
+      if (!s) return []
+      return s.edges.map((e) => e.id)
+    },
+    canReason(state) {
+      if (!state.datasetId || !state.queryStructure || !state.algorithm) return false
+      if (state.loading) return false
+      for (const id of this.anchorIds) {
+        if (state.anchors[id]?.id == null) return false
+      }
+      for (const id of this.relationIds) {
+        if (state.relations[id]?.id == null) return false
+      }
+      for (const id of this.variableIds) {
+        if (state.variablePinned[id] && state.variables[id]?.id == null) return false
+      }
+      return true
+    },
+  },
+
+  actions: {
+    async loadRegistry() {
+      this.registryError = ''
+      try {
+        const [datasetsRes, modelsRes, structuresRes] = await Promise.all([
+          listDatasets(),
+          listModels(),
+          listQueryStructures(),
+        ])
+        this.datasets = datasetsRes?.datasets || []
+        this.models = modelsRes?.models || []
+        this.structures = structuresRes?.query_structures || []
+        this.registryLoaded = true
+        if (!this.datasetId && this.datasets.length) this.setDataset(this.datasets[0].id)
+        if (!this.queryStructure && this.structures.length) this.setStructure(this.structures[0].id)
+      } catch (e) {
+        this.registryError = apiError(e)
+      }
+    },
+
+    setDataset(id) {
+      if (this.datasetId === id) return
+      this.datasetId = id
+      this.anchors = {}
+      this.variables = {}
+      this.variablePinned = {}
+      this.result = null
+      this.error = ''
+      this.errorCode = ''
+      this.autoSelectAlgorithm()
+    },
+
+    setStructure(id) {
+      if (this.queryStructure === id) return
+      this.queryStructure = id
+      this.anchors = {}
+      this.variables = {}
+      this.variablePinned = {}
+      this.relations = {}
+      this.result = null
+      this.error = ''
+      this.errorCode = ''
+      this.autoSelectAlgorithm()
+    },
+
+    setAlgorithm(algorithm) {
+      this.algorithm = algorithm
+    },
+
+    autoSelectAlgorithm() {
+      const allowed = this.allowedAlgorithms
+      if (!allowed.length) {
+        this.algorithm = ''
+        return
+      }
+      if (!allowed.find((m) => m.algorithm === this.algorithm)) {
+        this.algorithm = allowed[0].algorithm
+      }
+    },
+
+    setAnchor(id, entity) {
+      if (entity) this.anchors = { ...this.anchors, [id]: entity }
+      else {
+        const { [id]: _removed, ...rest } = this.anchors
+        this.anchors = rest
+      }
+    },
+
+    setRelation(id, relation) {
+      if (relation) this.relations = { ...this.relations, [id]: relation }
+      else {
+        const { [id]: _removed, ...rest } = this.relations
+        this.relations = rest
+      }
+    },
+
+    setVariable(id, entity) {
+      if (entity) this.variables = { ...this.variables, [id]: entity }
+      else {
+        const { [id]: _removed, ...rest } = this.variables
+        this.variables = rest
+      }
+    },
+
+    setVariablePinned(id, pinned) {
+      this.variablePinned = { ...this.variablePinned, [id]: pinned }
+      if (!pinned) this.setVariable(id, null)
+    },
+
+    setTopK(k) {
+      this.topK = k
+    },
+
+    async reason() {
+      if (!this.canReason) return
+      this.loading = true
+      this.error = ''
+      this.errorCode = ''
+      this.result = null
+      const payload = {
+        dataset_id: this.datasetId,
+        algorithm: this.algorithm,
+        query_structure: this.queryStructure,
+        anchors: Object.fromEntries(
+          Object.entries(this.anchors).map(([k, v]) => [k, v.id]),
+        ),
+        relations: Object.fromEntries(
+          Object.entries(this.relations).map(([k, v]) => [k, v.id]),
+        ),
+        top_k: this.topK,
+      }
+      const pinnedVars = Object.fromEntries(
+        Object.entries(this.variables)
+          .filter(([k]) => this.variablePinned[k])
+          .map(([k, v]) => [k, v.id]),
+      )
+      if (Object.keys(pinnedVars).length) payload.variables = pinnedVars
+
+      try {
+        this.result = await predict(payload)
+      } catch (e) {
+        const err = e?.response?.data?.error
+        this.errorCode = err?.code || ''
+        this.error = err?.message || apiError(e)
+      } finally {
+        this.loading = false
+      }
+    },
+  },
+})

src/frontend/src/views/HomeView.vue

@@ -12,6 +12,7 @@ const demos = [
     description: 'Quadratically-accelerated link prediction and conjunctive query answering with community-informed graph coarsening.',
     icon: 'project diagram',
     thesisRef: 'Thesis § 3.1',
+    to: '/demos/coins',
   },
   {
     title: 'MultiProxAn — Graph Generation',

src/frontend/src/views/demos/CoinsView.vue

@@ -0,0 +1,358 @@
+<script setup>
+import { computed, onMounted, ref } from 'vue'
+import PageSection from '../../components/layout/PageSection.vue'
+import QueryStructurePicker from '../../components/coins/QueryStructurePicker.vue'
+import QueryGraph from '../../components/coins/QueryGraph.vue'
+import SearchableEntityDropdown from '../../components/coins/SearchableEntityDropdown.vue'
+import SearchableRelationDropdown from '../../components/coins/SearchableRelationDropdown.vue'
+import AlgorithmSelector from '../../components/coins/AlgorithmSelector.vue'
+import ResultsDashboard from '../../components/coins/ResultsDashboard.vue'
+import { useCoinsDemoStore } from '../../stores/coinsDemo'
+import { sampleQuery } from '../../api/coins'
+
+const store = useCoinsDemoStore()
+const prefillError = ref('')
+const prefilling = ref(false)
+
+onMounted(() => {
+  if (!store.registryLoaded) store.loadRegistry()
+})
+
+const selectedDataset = computed(() =>
+  store.datasets.find((d) => d.id === store.datasetId) || null,
+)
+
+function setAnchor(id, val) { store.setAnchor(id, val) }
+function setRelation(id, val) { store.setRelation(id, val) }
+function setVariable(id, val) { store.setVariable(id, val) }
+
+async function prefillRandom() {
+  if (!store.datasetId || !store.queryStructure) return
+  prefillError.value = ''
+  prefilling.value = true
+  try {
+    const seed = new Date().toISOString().slice(0, 10)
+    const res = await sampleQuery(store.datasetId, store.queryStructure, 1, seed)
+    const query = (res?.queries || [])[0]
+    if (!query) {
+      prefillError.value = 'Could not find a valid query — try again.'
+      return
+    }
+    for (const [id, entity] of Object.entries(query.anchors)) {
+      store.setAnchor(id, entity)
+    }
+    for (const [id, relation] of Object.entries(query.relations)) {
+      store.setRelation(id, relation)
+    }
+    if (query.variables) {
+      for (const [id, entity] of Object.entries(query.variables)) {
+        if (store.variablePinned[id]) {
+          store.setVariable(id, entity)
+        }
+      }
+    }
+  } catch (e) {
+    prefillError.value = e?.message || 'Prefill failed'
+  } finally {
+    prefilling.value = false
+  }
+}
+
+const errorBanner = computed(() => {
+  if (!store.error) return null
+  if (store.errorCode === 'INFERENCE_BUSY') {
+    return { kind: 'warning', text: 'Another inference is running — retry in a moment.' }
+  }
+  if (store.errorCode === 'MODEL_UNAVAILABLE') {
+    return { kind: 'error', text: `${store.error} Try a different algorithm or dataset.` }
+  }
+  if (store.errorCode === 'INFERENCE_ERROR') {
+    return { kind: 'error', text: `No valid answers: ${store.error}` }
+  }
+  return { kind: 'error', text: store.error }
+})
+
+const structure = computed(() => store.selectedStructure)
+</script>
+
+<template>
+  <div class="coins-demo">
+    <header class="coins-head">
+      <h1 class="ui header">
+        <i class="project diagram icon"></i>
+        COINs — Knowledge-Graph Reasoning
+      </h1>
+      <p class="muted">
+        Community-informed graph coarsening accelerates link prediction and conjunctive query answering.
+        Pick a dataset, assemble a query by filling anchors and relations, then hit
+        <strong>Reason</strong> to score candidate entities against the KG.
+        Thesis § 3.1.
+      </p>
+    </header>
+
+    <div v-if="store.registryError" class="ui negative message">
+      <div class="header">Backend unreachable</div>
+      <p>{{ store.registryError }}</p>
+    </div>
+
+    <div v-else-if="!store.registryLoaded" class="ui placeholder">
+      <div class="line"></div><div class="line"></div><div class="line"></div>
+    </div>
+
+    <template v-else>
+      <PageSection title="Setup" :collapsible="false">
+        <div class="setup-row">
+          <div class="setup-col">
+            <label class="setup-label">Dataset</label>
+            <select class="setup-control" :value="store.datasetId"
+                    @change="store.setDataset($event.target.value)">
+              <option v-for="d in store.datasets" :key="d.id" :value="d.id">
+                {{ d.name }} ({{ d.num_entities }} entities · {{ d.num_relations }} relations)
+              </option>
+            </select>
+            <div v-if="selectedDataset" class="muted tiny">{{ selectedDataset.description }}</div>
+          </div>
+
+          <div class="setup-col">
+            <AlgorithmSelector
+              :algorithms="store.allowedAlgorithms"
+              :model-value="store.algorithm"
+              @update:modelValue="store.setAlgorithm($event)" />
+          </div>
+
+          <div class="setup-col">
+            <label class="setup-label">Top-K: {{ store.topK }}</label>
+            <input type="range" min="1" max="10" step="1" class="setup-range"
+                   :value="store.topK"
+                   @input="store.setTopK(Number($event.target.value))" />
+          </div>
+        </div>
+      </PageSection>
+
+      <PageSection title="Query structure" :collapsible="false">
+        <QueryStructurePicker
+          :structures="store.structures"
+          :model-value="store.queryStructure"
+          @update:modelValue="store.setStructure($event)" />
+      </PageSection>
+
+      <PageSection title="Query graph" :collapsible="false">
+        <div class="prefill-row">
+          <button type="button" class="prefill-btn" @click="prefillRandom"
+                  :disabled="prefilling || !store.datasetId">
+            <i class="random icon"></i>
+            {{ prefilling ? 'Prefilling…' : 'Prefill with a random query' }}
+          </button>
+          <span v-if="prefillError" class="muted error">{{ prefillError }}</span>
+        </div>
+
+        <div v-if="structure" class="graph-wrap">
+          <QueryGraph :structure="structure" mode="edit"
+                      :cell-min-width="260" :cell-min-height="130" :pad="44">
+            <template v-for="n in structure.nodes.filter((n) => n.type === 'anchor')"
+                      :key="'slot-' + n.id" #[`node-${n.id}`]>
+              <div class="slot-node">
+                <div class="slot-caption">{{ n.label || n.id }}</div>
+                <SearchableEntityDropdown
+                  :dataset-id="store.datasetId"
+                  :model-value="store.anchors[n.id] || null"
+                  placeholder="Pick anchor"
+                  @update:modelValue="setAnchor(n.id, $event)" />
+              </div>
+            </template>
+
+            <template v-for="n in structure.nodes.filter((n) => n.type === 'variable')"
+                      :key="'slotv-' + n.id" #[`node-${n.id}`]>
+              <div class="slot-node">
+                <div class="slot-caption">
+                  <label class="pin-toggle">
+                    <input type="checkbox"
+                           :checked="!!store.variablePinned[n.id]"
+                           @change="store.setVariablePinned(n.id, $event.target.checked)" />
+                    Pin {{ n.label || n.id }}
+                  </label>
+                </div>
+                <SearchableEntityDropdown v-if="store.variablePinned[n.id]"
+                  :dataset-id="store.datasetId"
+                  :model-value="store.variables[n.id] || null"
+                  placeholder="Pick variable"
+                  @update:modelValue="setVariable(n.id, $event)" />
+                <span v-else class="let-model-pick">Let model sample</span>
+              </div>
+            </template>
+
+            <template #node-t>
+              <div class="slot-target" title="Query target">
+                <i class="question circle icon"></i>
+                <span>{{ structure.nodes.find(n => n.id === 't')?.label || 'target' }}</span>
+              </div>
+            </template>
+
+            <template v-for="e in structure.edges" :key="'slote-' + e.id" #[`edge-${e.id}`]>
+              <SearchableRelationDropdown
+                :dataset-id="store.datasetId"
+                :model-value="store.relations[e.id] || null"
+                :placeholder="e.label || 'Pick relation'"
+                @update:modelValue="setRelation(e.id, $event)" />
+            </template>
+          </QueryGraph>
+        </div>
+
+        <div class="reason-bar">
+          <button type="button" class="ui big primary button reason-btn"
+                  :disabled="!store.canReason"
+                  @click="store.reason()">
+            <i v-if="store.loading" class="spinner loading icon"></i>
+            <i v-else class="play icon"></i>
+            {{ store.loading ? 'Reasoning…' : 'Reason' }}
+          </button>
+          <div v-if="!store.canReason && !store.loading" class="muted reason-hint">
+            Fill all anchor and relation slots first.
+          </div>
+        </div>
+      </PageSection>
+
+      <div v-if="errorBanner" class="ui message" :class="errorBanner.kind">
+        <p>{{ errorBanner.text }}</p>
+      </div>
+
+      <PageSection v-if="store.result" title="Results" :collapsible="false">
+        <ResultsDashboard :result="store.result" />
+      </PageSection>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.coins-demo { padding: 1rem 0 3rem; }
+.coins-head { margin-bottom: 1.5rem; }
+.coins-head h1.header { margin-bottom: 0.5rem; }
+.muted { color: var(--text-muted); }
+.muted.tiny { font-size: 0.8em; }
+.muted.error { color: #c0392b; }
+
+.setup-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
+  gap: 1rem 1.5rem;
+  align-items: start;
+}
+.setup-col {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  min-width: 0;
+}
+.setup-label {
+  font-size: 0.8em;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  line-height: 1.2;
+  min-height: 1.2em;
+}
+.setup-control,
+.setup-range {
+  height: 2.4rem;
+  padding: 0 0.6rem;
+  border: 1px solid var(--border);
+  border-radius: 0.4rem;
+  background: var(--surface);
+  color: var(--text);
+  font: inherit;
+  box-sizing: border-box;
+  width: 100%;
+}
+.setup-range { padding: 0 0.4rem; }
+.setup-range:focus,
+.setup-control:focus { outline: 2px solid var(--primary-soft); border-color: var(--primary); }
+
+.prefill-row { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
+.prefill-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.5rem 0.9rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--primary);
+  background: var(--primary-soft);
+  color: var(--primary-strong);
+  font: inherit;
+  font-size: 0.9em;
+  font-weight: 600;
+  cursor: pointer;
+  transition: 0.15s;
+}
+.prefill-btn:hover:enabled { background: var(--primary); color: white; }
+.prefill-btn:disabled { opacity: 0.55; cursor: not-allowed; }
+.prefill-btn i.icon { margin: 0; }
+
+.graph-wrap {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 0.6rem;
+  padding: 2rem 1rem;
+  margin: 0 auto 1.5rem;
+  min-height: 320px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.slot-node {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+}
+.slot-caption {
+  position: absolute;
+  bottom: calc(100% + 0.25rem);
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 0.72em;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  white-space: nowrap;
+}
+.pin-toggle { display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; pointer-events: auto; }
+.let-model-pick {
+  display: inline-block;
+  padding: 0.4em 0.9em;
+  border-radius: 999px;
+  border: 1px dashed var(--border);
+  color: var(--text-muted);
+  font-size: 0.85em;
+  background: var(--surface-muted);
+  font-style: italic;
+  white-space: nowrap;
+}
+
+.slot-target {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.5em 0.9em;
+  border-radius: 999px;
+  background: var(--surface);
+  border: 2px dashed var(--primary);
+  font-weight: 700;
+  color: var(--primary-strong);
+}
+.slot-target i.icon { margin: 0; }
+
+.reason-bar {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin: 1rem 0;
+}
+.reason-btn { background: var(--primary) !important; }
+.reason-btn:hover:enabled { background: var(--primary-strong) !important; }
+.reason-hint { font-size: 0.85em; }
+
+.ui.message { margin: 1rem 0 !important; }
+</style>