fux-engine 0.1.0__py3-none-any.whl

fux/__init__.py

@@ -0,0 +1,6 @@
+"""Fux — a portable, Claude-aware knowledge engine.
+
+One frontmatter substrate → derived index, graph, and memory views.
+$0 deterministic maintenance; no mandatory LLM calls. See docs/fux-plan.md.
+"""
+__version__ = "0.1.0"

fux/__main__.py

@@ -0,0 +1,4 @@
+from fux.cli import main
+
+if __name__ == "__main__":
+    raise SystemExit(main())

fux/assets/fux-icon.svg

@@ -0,0 +1,61 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120">
+  <defs>
+    <!-- tile backgrounds -->
+    <linearGradient id="ic-bg" x1="0" y1="0" x2=".6" y2="1">
+      <stop offset="0%"   stop-color="#16140f"/>
+      <stop offset="100%" stop-color="#0a0908"/>
+    </linearGradient>
+    <radialGradient id="ic-glow" cx="50%" cy="18%" r="70%">
+      <stop offset="0%"   stop-color="#9ed94a1a"/>
+      <stop offset="100%" stop-color="rgba(0,0,0,0)"/>
+    </radialGradient>
+    <linearGradient id="ic-shine" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%"   stop-color="rgba(255,255,255,.06)"/>
+      <stop offset="100%" stop-color="rgba(255,255,255,0)"/>
+    </linearGradient>
+    <!-- mark gradient -->
+    <linearGradient id="ic-mg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%"   stop-color="#D2F58F"/>
+      <stop offset="55%"  stop-color="#8FD13F"/>
+      <stop offset="100%" stop-color="#4C8A1B"/>
+    </linearGradient>
+    <clipPath id="ic-mc">
+      <rect x="12" y="10" width="40" height="44" rx="10"/>
+    </clipPath>
+    <filter id="ic-drop" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="2.5" result="blur"/>
+      <feComposite in="SourceGraphic" in2="blur" operator="over"/>
+    </filter>
+  </defs>
+
+  <!-- tile base -->
+  <rect width="120" height="120" rx="28" fill="url(#ic-bg)"    stroke="rgba(255,255,255,.08)" stroke-width="1"/>
+  <!-- accent glow overlay -->
+  <rect width="120" height="120" rx="28" fill="url(#ic-glow)"/>
+  <!-- top-edge shine -->
+  <rect width="120" height="60"  rx="28" fill="url(#ic-shine)"/>
+
+  <!-- mark: size=78, centred → offset=(120-78)/2=21 -->
+  <svg x="21" y="21" width="78" height="78" viewBox="0 0 64 64">
+    <defs>
+      <linearGradient id="ic-mg2" x1="0" y1="0" x2="1" y2="1">
+        <stop offset="0%"   stop-color="#D2F58F"/>
+        <stop offset="55%"  stop-color="#8FD13F"/>
+        <stop offset="100%" stop-color="#4C8A1B"/>
+      </linearGradient>
+      <clipPath id="ic-mc2">
+        <rect x="12" y="10" width="40" height="44" rx="10"/>
+      </clipPath>
+    </defs>
+    <g filter="url(#ic-drop)">
+      <rect x="12" y="10" width="40" height="44" rx="10" fill="url(#ic-mg2)"/>
+      <g clip-path="url(#ic-mc2)">
+        <polygon points="12,10 32,10 12,30" fill="#fff" opacity=".15"/>
+        <polygon points="52,54 52,34 32,54" fill="#000" opacity=".17"/>
+      </g>
+      <path d="M26 10 L38 10 L38 33 L32 28 L26 33 Z" fill="#000" opacity=".26"/>
+      <rect x="19" y="42" width="26" height="3" rx="1.5" fill="#000" opacity=".24"/>
+      <rect x="19" y="48" width="17" height="3" rx="1.5" fill="#000" opacity=".24"/>
+    </g>
+  </svg>
+</svg>

fux/assets/fux-lockup.svg

@@ -0,0 +1,69 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 440 110" width="440" height="110">
+  <defs>
+    <!-- background -->
+    <linearGradient id="lk-bg" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%"   stop-color="#121110"/>
+      <stop offset="100%" stop-color="#0a0a09"/>
+    </linearGradient>
+    <!-- vertical rule -->
+    <linearGradient id="lk-rule" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%"   stop-color="rgba(255,255,255,0)"/>
+      <stop offset="50%"  stop-color="rgba(255,255,255,.14)"/>
+      <stop offset="100%" stop-color="rgba(255,255,255,0)"/>
+    </linearGradient>
+    <!-- mark gradient -->
+    <linearGradient id="lk-mg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%"   stop-color="#D2F58F"/>
+      <stop offset="55%"  stop-color="#8FD13F"/>
+      <stop offset="100%" stop-color="#4C8A1B"/>
+    </linearGradient>
+    <clipPath id="lk-mc">
+      <rect x="12" y="10" width="40" height="44" rx="10"/>
+    </clipPath>
+    <filter id="lk-glow" x="-40%" y="-40%" width="180%" height="180%">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur"/>
+      <feComposite in="SourceGraphic" in2="blur" operator="over"/>
+    </filter>
+    <style>
+      @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&amp;family=Space+Mono&amp;display=swap');
+      .lk-eyebrow { font: 8.5px 'Space Mono', 'Courier New', monospace; letter-spacing: .34em; fill: #7a756b; }
+      .lk-name    { font: 700 30px 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif; letter-spacing: .16em; fill: #f2efe9; }
+      .lk-role    { font: 10px 'Space Mono', 'Courier New', monospace; letter-spacing: .26em; fill: #9ed94a; }
+    </style>
+  </defs>
+
+  <!-- plate -->
+  <rect width="440" height="110" rx="14" fill="url(#lk-bg)" stroke="rgba(255,255,255,.07)" stroke-width="1"/>
+
+  <!-- mark: 74×74, vertically centred → y=18 -->
+  <svg x="34" y="18" width="74" height="74" viewBox="0 0 64 64" overflow="visible">
+    <defs>
+      <linearGradient id="lk-mg2" x1="0" y1="0" x2="1" y2="1">
+        <stop offset="0%"   stop-color="#D2F58F"/>
+        <stop offset="55%"  stop-color="#8FD13F"/>
+        <stop offset="100%" stop-color="#4C8A1B"/>
+      </linearGradient>
+      <clipPath id="lk-mc2">
+        <rect x="12" y="10" width="40" height="44" rx="10"/>
+      </clipPath>
+    </defs>
+    <g filter="url(#lk-glow)">
+      <rect x="12" y="10" width="40" height="44" rx="10" fill="url(#lk-mg2)"/>
+      <g clip-path="url(#lk-mc2)">
+        <polygon points="12,10 32,10 12,30" fill="#fff" opacity=".15"/>
+        <polygon points="52,54 52,34 32,54" fill="#000" opacity=".17"/>
+      </g>
+      <path d="M26 10 L38 10 L38 33 L32 28 L26 33 Z" fill="#000" opacity=".26"/>
+      <rect x="19" y="42" width="26" height="3" rx="1.5" fill="#000" opacity=".24"/>
+      <rect x="19" y="48" width="17" height="3" rx="1.5" fill="#000" opacity=".24"/>
+    </g>
+  </svg>
+
+  <!-- vertical rule: x=130, margin 22px top+bottom → y=22..88 -->
+  <rect x="130" y="22" width="1" height="66" fill="url(#lk-rule)"/>
+
+  <!-- text block: x=153, centred on y=55 -->
+  <text x="153" y="30"  class="lk-eyebrow">ALPHA FORGE</text>
+  <text x="153" y="68"  class="lk-name">FUX</text>
+  <text x="153" y="88"  class="lk-role">KNOWLEDGE INDEX</text>
+</svg>

fux/assets/fux-mark.svg

@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
+  <defs>
+    <linearGradient id="fux-g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%"   stop-color="#D2F58F"/>
+      <stop offset="55%"  stop-color="#8FD13F"/>
+      <stop offset="100%" stop-color="#4C8A1B"/>
+    </linearGradient>
+    <clipPath id="fux-c">
+      <rect x="12" y="10" width="40" height="44" rx="10"/>
+    </clipPath>
+    <filter id="fux-glow" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="2.5" result="blur"/>
+      <feComposite in="SourceGraphic" in2="blur" operator="over"/>
+    </filter>
+  </defs>
+  <g filter="url(#fux-glow)">
+    <rect x="12" y="10" width="40" height="44" rx="10" fill="url(#fux-g)"/>
+    <g clip-path="url(#fux-c)">
+      <polygon points="12,10 32,10 12,30" fill="#fff" opacity=".15"/>
+      <polygon points="52,54 52,34 32,54" fill="#000" opacity=".17"/>
+    </g>
+    <path d="M26 10 L38 10 L38 33 L32 28 L26 33 Z" fill="#000" opacity=".26"/>
+    <rect x="19" y="42" width="26" height="3" rx="1.5" fill="#000" opacity=".24"/>
+    <rect x="19" y="48" width="17" height="3" rx="1.5" fill="#000" opacity=".24"/>
+  </g>
+</svg>

fux/assets/graph_boot.js

@@ -0,0 +1,214 @@
+// Fux graph — vanilla canvas force viewer. Offline, dependency-free.
+const cv = document.getElementById("cv"), ctx = cv.getContext("2d");
+const tip = document.getElementById("tip"), $ = id => document.getElementById(id);
+const SIDE = 290;
+
+const nodes = DATA.nodes.map(n => ({ ...n, x: Math.random()*900-450, y: Math.random()*900-450, vx:0, vy:0 }));
+const byId = Object.fromEntries(nodes.map(n => [n.id, n]));
+const edges = DATA.edges.filter(e => byId[e.source] && byId[e.target]);
+const deg = {}; edges.forEach(e => { deg[e.source]=(deg[e.source]||0)+1; deg[e.target]=(deg[e.target]||0)+1; });
+const maxDeg = Math.max(1, ...Object.values(deg));
+const adj = {}; nodes.forEach(n => adj[n.id] = []);
+edges.forEach(e => { adj[e.source].push([e.target,e,1]); adj[e.target].push([e.source,e,-1]); });
+
+let view = { x: 0, y: 0, k: 1 }, hidden = new Set(), hiddenE = new Set();
+let selected = null, hover = null, query = "", colorMode = "type";
+let running = true, showLabels = true, focusSet = null;
+let linkDist = 70, charge = 900;
+
+// ---- colour modes -------------------------------------------------------
+const ccolor = c => "hsl(" + (((c||0)*67)%360) + ",62%,55%)";
+const heat = d => { const t = (deg[d]||0)/maxDeg; return `hsl(${(1-t)*210},80%,${35+t*25}%)`; };
+function nodeColor(n){
+  if (colorMode === "community") return ccolor(n.community);
+  if (colorMode === "layer") return LAYER_COLORS[n.layer] || color(n.type);
+  if (colorMode === "degree") return heat(n.id);
+  return color(n.type);
+}
+
+// ---- sidebar: stats, filters, controls ----------------------------------
+$("stats").textContent =
+  `${nodes.length} nodes · ${edges.length} edges · ${DATA.meta.code_files} files · `+
+  `${DATA.meta.rules} rules · ${DATA.meta.communities} communities`;
+
+const typeCounts = {}; nodes.forEach(n => typeCounts[n.type]=(typeCounts[n.type]||0)+1);
+const types = Object.keys(typeCounts).sort();
+$("filters").innerHTML = types.map(t =>
+  `<label><span class="sw" style="background:${color(t)}"></span>
+   <input type="checkbox" data-t="${t}" checked> ${t}<span class="ct">${typeCounts[t]}</span></label>`).join("");
+document.querySelectorAll("[data-t]").forEach(cb => cb.onchange = () => {
+  cb.checked ? hidden.delete(cb.dataset.t) : hidden.add(cb.dataset.t); });
+
+const edgeCounts = {}; edges.forEach(e => edgeCounts[e.type]=(edgeCounts[e.type]||0)+1);
+const etypes = Object.keys(edgeCounts).sort();
+$("efilters").innerHTML = etypes.map(t =>
+  `<label><span class="ln" style="border-color:${edgeColor(t)}"></span>
+   <input type="checkbox" data-e="${t}" checked> ${t}<span class="ct">${edgeCounts[t]}</span></label>`).join("");
+document.querySelectorAll("[data-e]").forEach(cb => cb.onchange = () => {
+  cb.checked ? hiddenE.delete(cb.dataset.e) : hiddenE.add(cb.dataset.e); });
+
+$("ntoggle").onclick = () => toggleAll("[data-t]", hidden, t=>t.dataset.t);
+$("etoggle").onclick = () => toggleAll("[data-e]", hiddenE, t=>t.dataset.e);
+function toggleAll(sel, set, key){ const boxes=[...document.querySelectorAll(sel)];
+  const any=boxes.some(b=>b.checked); boxes.forEach(b=>{ b.checked=!any;
+    !any ? set.delete(key(b)) : set.add(key(b)); }); }
+
+$("cmode").onchange = e => colorMode = e.target.value;
+$("q").oninput = e => { query = e.target.value.toLowerCase(); updateHits(); };
+$("slink").oninput = e => linkDist = +e.target.value;
+$("scharge").oninput = e => charge = +e.target.value;
+$("bpause").onclick = () => { running=!running; $("bpause").textContent = running?"Pause":"Resume";
+  $("bpause").classList.toggle("on",!running); if(running) draw(); };
+$("blabels").onclick = () => { showLabels=!showLabels; $("blabels").classList.toggle("on",showLabels); };
+$("bfit").onclick = fit; $("breset").onclick = () => { view={x:0,y:0,k:1}; };
+$("bfocus").onclick = () => { if(selected) setFocus(selected); };
+$("bclear").onclick = clearFocus;
+$("bcopy").onclick = () => selected && copy(nodeMarkdown(byId[selected]), "node copied");
+$("bexport").onclick = () => copy(graphMarkdown(), "visible graph copied");
+
+function updateHits(){ if(!query){ $("qhits").textContent=""; return; }
+  const m = nodes.filter(n => match(n)).length; $("qhits").textContent = `${m} match`; }
+const match = n => query && (n.label.toLowerCase().includes(query) || n.id.toLowerCase().includes(query));
+
+// ---- layout & geometry --------------------------------------------------
+function resize(){ cv.width = innerWidth-SIDE; cv.height = innerHeight; } resize(); onresize = resize;
+const inFocus = n => !focusSet || focusSet.has(n.id);
+const visible = n => !hidden.has(n.type) && inFocus(n);
+const eVisible = e => !hiddenE.has(e.type) && visible(byId[e.source]) && visible(byId[e.target]);
+
+// Physics runs every PHYS_STRIDE render frames so rendering stays at ≥30 fps
+// even when the simulation is expensive (large graphs).
+const PHYS_STRIDE = nodes.length > 600 ? 2 : 1;
+let _drawFrame = 0;
+
+function step(){
+  const vis = nodes.filter(visible);
+  // Process each pair once (i<j) and apply equal-and-opposite forces to both
+  // nodes — halves the O(n²) work vs the naive double-loop.
+  for (let i=0; i<vis.length; i++){
+    const a=vis[i];
+    for (let j=i+1; j<vis.length; j++){
+      const b=vis[j];
+      let dx=a.x-b.x, dy=a.y-b.y, d=Math.hypot(dx,dy)||1;
+      if(d<280){ const f=charge/(d*d*d);
+        a.vx+=dx*f; a.vy+=dy*f; b.vx-=dx*f; b.vy-=dy*f; } } }
+  for (const e of edges){ if(!eVisible(e)) continue; const a=byId[e.source], b=byId[e.target];
+    let dx=b.x-a.x, dy=b.y-a.y, d=Math.hypot(dx,dy)||1, f=(d-linkDist)*0.01;
+    a.vx+=dx/d*f; a.vy+=dy/d*f; b.vx-=dx/d*f; b.vy-=dy/d*f; }
+  for (const n of vis){ n.vx*=.85; n.vy*=.85; n.x+=n.vx*0.5; n.y+=n.vy*0.5;
+    n.vx-=n.x*0.0007; n.vy-=n.y*0.0007; }
+}
+const T = n => ({ x: n.x*view.k+cv.width/2+view.x, y: n.y*view.k+cv.height/2+view.y });
+const radius = n => Math.min(4+(deg[n.id]||0)*0.8, 16)*view.k;
+const neighbors = id => new Set(adj[id].map(([t])=>t));
+
+function fit(){ const vis = nodes.filter(visible); if(!vis.length) return;
+  const xs=vis.map(n=>n.x), ys=vis.map(n=>n.y);
+  const minX=Math.min(...xs),maxX=Math.max(...xs),minY=Math.min(...ys),maxY=Math.max(...ys);
+  const w=maxX-minX||1, h=maxY-minY||1;
+  view.k = Math.max(0.2, Math.min(2.5, 0.85*Math.min(cv.width/w, cv.height/h)));
+  view.x = -(minX+maxX)/2*view.k; view.y = -(minY+maxY)/2*view.k; }
+
+function setFocus(id){ focusSet = new Set([id, ...neighbors(id)]); }
+function clearFocus(){ focusSet = null; }
+
+// ---- render -------------------------------------------------------------
+function draw(){
+  _drawFrame++;
+  if(running && _drawFrame % PHYS_STRIDE === 0) step();
+  ctx.clearRect(0,0,cv.width,cv.height);
+  const near = selected ? neighbors(selected) : (hover ? neighbors(hover) : null);
+  const anchor = selected || hover;
+  for (const e of edges){ if(!eVisible(e)) continue; const a=byId[e.source], b=byId[e.target];
+    const on = !anchor || e.source===anchor || e.target===anchor;
+    ctx.globalAlpha = on ? 0.9 : 0.12; ctx.strokeStyle = edgeColor(e.type);
+    ctx.lineWidth = on ? 1.4 : 0.8;
+    const p=T(a), q=T(b); ctx.beginPath(); ctx.moveTo(p.x,p.y); ctx.lineTo(q.x,q.y); ctx.stroke();
+    if(on && view.k>0.7) arrow(p,q,radius(b)); }
+  ctx.globalAlpha=1;
+  for (const n of nodes){ if(!visible(n)) continue; const p=T(n), r=radius(n);
+    const dim = (anchor && near && !near.has(n.id) && n.id!==anchor) || (query && !match(n));
+    ctx.globalAlpha = dim ? 0.18 : 1; ctx.fillStyle = nodeColor(n);
+    ctx.beginPath(); ctx.arc(p.x,p.y,r,0,7); ctx.fill();
+    if(n.id===selected){ ctx.strokeStyle="#fff"; ctx.lineWidth=2; ctx.stroke(); }
+    else if(query && match(n)){ ctx.strokeStyle="#ffd33d"; ctx.lineWidth=2; ctx.stroke(); }
+    if(showLabels && (view.k>1.1 || n.id===anchor || (near&&near.has(n.id)) || (query&&match(n)))){
+      ctx.globalAlpha = dim?0.2:0.95; ctx.fillStyle="#c9d1d9"; ctx.font="10px ui-sans-serif";
+      ctx.fillText(n.label, p.x+r+3, p.y+3); } }
+  ctx.globalAlpha=1; requestAnimationFrame(draw);
+}
+function arrow(p,q,rad){ const a=Math.atan2(q.y-p.y,q.x-p.x), ex=q.x-Math.cos(a)*rad, ey=q.y-Math.sin(a)*rad;
+  ctx.beginPath(); ctx.moveTo(ex,ey);
+  ctx.lineTo(ex-Math.cos(a-0.4)*6, ey-Math.sin(a-0.4)*6);
+  ctx.lineTo(ex-Math.cos(a+0.4)*6, ey-Math.sin(a+0.4)*6); ctx.closePath();
+  ctx.fillStyle=ctx.strokeStyle; ctx.fill(); }
+
+// ---- interaction --------------------------------------------------------
+function hit(mx,my){ for(const n of nodes){ if(!visible(n)) continue; const p=T(n);
+  if(Math.hypot(mx-p.x,my-p.y) < radius(n)+3) return n; } }
+let drag=null, pan=false, last=null;
+cv.onmousedown = e => { const n=hit(e.offsetX,e.offsetY);
+  if(n){ drag=n; selected=n.id; showDetail(n); } else { pan=true; selected=null; clearDetail(); }
+  last={x:e.offsetX,y:e.offsetY}; };
+cv.onmousemove = e => { const n=hit(e.offsetX,e.offsetY); hover = n?n.id:null;
+  if(n && !drag){ tip.style.display="block"; tip.style.left=(e.clientX+12)+"px"; tip.style.top=(e.clientY+12)+"px";
+    tip.innerHTML = `<b>${esc(n.label)}</b> · ${n.type}`+(n.file?`<br>${esc(n.file)}${n.line?":"+n.line:""}`:"")+
+      `<br>${deg[n.id]||0} edges`; }
+  else if(!drag) tip.style.display="none";
+  if(drag){ drag.x+=(e.offsetX-last.x)/view.k; drag.y+=(e.offsetY-last.y)/view.k; drag.vx=drag.vy=0; }
+  else if(pan){ view.x+=e.offsetX-last.x; view.y+=e.offsetY-last.y; }
+  last={x:e.offsetX,y:e.offsetY}; };
+onmouseup = () => { drag=null; pan=false; };
+cv.ondblclick = e => { const n=hit(e.offsetX,e.offsetY); if(n){ selected=n.id; setFocus(n.id); showDetail(n); } };
+cv.onwheel = e => { e.preventDefault(); const f=e.deltaY<0?1.1:0.9;
+  const mx=e.offsetX-cv.width/2-view.x, my=e.offsetY-cv.height/2-view.y;
+  view.k=Math.max(0.15,Math.min(5,view.k*f)); view.x-=mx*(f-1); view.y-=my*(f-1); };
+
+onkeydown = e => { if(e.target.tagName==="INPUT"||e.target.tagName==="SELECT"){ if(e.key==="Escape")e.target.blur(); return; }
+  const k=e.key.toLowerCase();
+  if(k==="/"){ e.preventDefault(); $("q").focus(); }
+  else if(k==="f") fit(); else if(k==="r") view={x:0,y:0,k:1};
+  else if(k===" "){ e.preventDefault(); $("bpause").click(); }
+  else if(k==="e"){ if(selected) setFocus(selected); }
+  else if(k==="l") $("blabels").click();
+  else if(k==="escape"){ clearFocus(); selected=null; clearDetail(); } };
+
+// ---- detail panel + agent export ---------------------------------------
+function showDetail(n){ $("agentrow").style.display="flex";
+  const groups={}; for(const [tid,e,dir] of adj[n.id]){ (groups[e.type]=groups[e.type]||[])
+    .push({id:tid,dir,sym:dir>0?"→":"←"}); }
+  let meta = `<b>${esc(n.label)}</b><br><span class="muted">${n.type}`+
+    (n.file?` · ${esc(n.file)}${n.line?":"+n.line:""}`:"")+`</span><br>`;
+  const pills=[]; if(n.domain)pills.push(n.domain); if(n.layer)pills.push(n.layer);
+  if(n.status)pills.push(n.status); if(n.community!=null)pills.push("community "+n.community);
+  pills.push((deg[n.id]||0)+" edges");
+  meta += pills.map(p=>`<span class="pill">${esc(p)}</span>`).join("")+"<br>";
+  for(const t of Object.keys(groups).sort()){ meta += `<br><span class="muted">${t}</span><br>`+
+    groups[t].slice(0,40).map(x=>`<span class="nb" data-go="${esc(x.id)}">${x.sym} ${esc(byId[x.id].label)}</span>`).join("<br>"); }
+  $("detail").innerHTML = meta;
+  $("detail").querySelectorAll("[data-go]").forEach(el => el.onclick = () => {
+    selected = el.dataset.go; showDetail(byId[selected]);
+    const p=byId[selected]; view.x=-p.x*view.k; view.y=-p.y*view.k; }); }
+function clearDetail(){ $("agentrow").style.display="none";
+  $("detail").innerHTML="Click a node. Double-click to focus its neighbourhood."; }
+
+function nodeMarkdown(n){ let s=`### ${n.label} (${n.type})\n`;
+  if(n.file)s+=`- file: ${n.file}${n.line?":"+n.line:""}\n`;
+  for(const f of ["domain","layer","status","community"]) if(n[f]!=null) s+=`- ${f}: ${n[f]}\n`;
+  s+=`- degree: ${deg[n.id]||0}\n\n**Connections**\n`;
+  for(const [tid,e,dir] of adj[n.id]) s+=`- ${e.type} ${dir>0?"→":"←"} ${byId[tid].label} (${byId[tid].type})\n`;
+  return s; }
+function graphMarkdown(){ const vis=nodes.filter(visible);
+  let s=`# Fux graph (visible subset)\n${vis.length} nodes, `+
+    edges.filter(eVisible).length+` edges\n\n## Nodes by type\n`;
+  const byT={}; vis.forEach(n=>(byT[n.type]=byT[n.type]||[]).push(n.label));
+  for(const t of Object.keys(byT).sort()) s+=`- **${t}** (${byT[t].length}): ${byT[t].slice(0,30).join(", ")}\n`;
+  s+=`\n## Edges\n`; edges.filter(eVisible).slice(0,200).forEach(e=>
+    s+=`- ${byId[e.source].label} —${e.type}→ ${byId[e.target].label}\n`);
+  return s; }
+function copy(text,msg){ navigator.clipboard?.writeText(text).then(()=>toast(msg),()=>toast("copy blocked")); }
+function toast(m){ const t=$("toast"); t.textContent=m; t.style.display="block";
+  clearTimeout(t._h); t._h=setTimeout(()=>t.style.display="none",1500); }
+const esc = s => String(s).replace(/[&<>]/g,c=>({"&":"&amp;","<":"&lt;",">":"&gt;"}[c]));
+
+fit(); draw();

fux/assets/graph_template.html

@@ -0,0 +1,111 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Fux — knowledge graph</title>
+<style>
+  :root { color-scheme: dark; --bg:#0e1116; --panel:#161b22; --line:#30363d;
+          --fg:#e6edf3; --muted:#8b949e; --accent:#58a6ff; }
+  * { box-sizing: border-box; }
+  body { margin: 0; font: 13px/1.45 ui-sans-serif, system-ui, sans-serif;
+         background: var(--bg); color: var(--fg); overflow: hidden; }
+  #side { position: fixed; top: 0; left: 0; width: 290px; height: 100%;
+          background: var(--panel); border-right: 1px solid var(--line); padding: 14px 14px 40px;
+          overflow-y: auto; scrollbar-width: thin; }
+  h1 { font-size: 15px; margin: 0 0 2px; display:flex; align-items:center; gap:7px; }
+  h2 { font-size: 11px; text-transform: uppercase; letter-spacing:.06em;
+       color: var(--muted); margin: 16px 0 6px; border-bottom:1px solid var(--line); padding-bottom:3px; }
+  .muted { color: var(--muted); font-size: 11px; }
+  input[type=search], select { width: 100%; padding: 6px 8px; background: var(--bg);
+          color: var(--fg); border: 1px solid var(--line); border-radius: 6px; font: inherit; }
+  input[type=search] { margin: 10px 0 4px; }
+  .row { display:flex; gap:6px; flex-wrap:wrap; margin:6px 0; }
+  button { flex:1; min-width:0; padding:5px 6px; background: var(--bg); color: var(--fg);
+           border:1px solid var(--line); border-radius:6px; cursor:pointer; font: inherit; white-space:nowrap; }
+  button:hover { border-color: var(--accent); color: var(--accent); }
+  button.on { background:#1f6feb33; border-color:var(--accent); color:var(--accent); }
+  label { display: flex; align-items: center; gap: 6px; padding: 1px 0; cursor: pointer; font-size:12px; }
+  label .ct { margin-left:auto; color:var(--muted); font-size:10px; }
+  .sw { width: 11px; height: 11px; border-radius: 3px; flex:none; }
+  .ln { width: 14px; height: 0; border-top:2px solid; flex:none; }
+  .slider { display:flex; align-items:center; gap:8px; margin:4px 0; font-size:11px; color:var(--muted); }
+  .slider input { flex:1; }
+  #detail b { color: var(--accent); }
+  #detail .nb { cursor:pointer; } #detail .nb:hover { color: var(--accent); }
+  #detail .pill { display:inline-block; padding:1px 6px; border:1px solid var(--line);
+                  border-radius:10px; margin:0 4px 4px 0; font-size:10px; color:var(--muted); }
+  canvas { position: fixed; left: 290px; top: 0; cursor: grab; }
+  canvas:active { cursor: grabbing; }
+  #tip { position: fixed; pointer-events: none; background: #161b22ee; max-width:320px;
+         border: 1px solid var(--line); border-radius: 6px; padding: 5px 9px;
+         font-size: 11px; display: none; z-index:5; }
+  #toast { position: fixed; bottom: 16px; left: 306px; background:#1f6feb; color:#fff;
+           padding:7px 12px; border-radius:6px; font-size:12px; display:none; z-index:6; }
+  #help { position: fixed; right: 14px; top: 12px; background:#161b22ee; border:1px solid var(--line);
+          border-radius:8px; padding:10px 14px; font-size:11px; color:var(--muted); z-index:5; }
+  #help b { color: var(--fg); }
+  kbd { background:var(--bg); border:1px solid var(--line); border-radius:4px; padding:0 4px; color:var(--fg); }
+</style>
+</head>
+<body>
+<div id="side">
+  <h1><svg width="20" height="20" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" style="display:block;flex:none;filter:drop-shadow(0 0 6px #9ed94a55)"><defs><linearGradient id="hg" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#D2F58F"/><stop offset="55%" stop-color="#8FD13F"/><stop offset="100%" stop-color="#4C8A1B"/></linearGradient><clipPath id="hc"><rect x="12" y="10" width="40" height="44" rx="10"/></clipPath></defs><rect x="12" y="10" width="40" height="44" rx="10" fill="url(#hg)"/><g clip-path="url(#hc)"><polygon points="12,10 32,10 12,30" fill="#fff" opacity=".15"/><polygon points="52,54 52,34 32,54" fill="#000" opacity=".17"/></g><path d="M26 10 L38 10 L38 33 L32 28 L26 33 Z" fill="#000" opacity=".26"/><rect x="19" y="42" width="26" height="3" rx="1.5" fill="#000" opacity=".24"/><rect x="19" y="48" width="17" height="3" rx="1.5" fill="#000" opacity=".24"/></svg>Fux graph</h1>
+  <div class="muted" id="stats"></div>
+  <input type="search" id="q" placeholder="search nodes…  ( / )" />
+  <div class="muted" id="qhits"></div>
+
+  <h2>Colour by</h2>
+  <select id="cmode">
+    <option value="type">node type</option>
+    <option value="community">community</option>
+    <option value="layer">rule layer</option>
+    <option value="degree">degree (heat)</option>
+  </select>
+
+  <div class="row">
+    <button id="bfit" title="Fit all (f)">Fit</button>
+    <button id="breset" title="Reset view (r)">Reset</button>
+    <button id="bpause" title="Pause layout (space)">Pause</button>
+    <button id="blabels" class="on" title="Toggle labels (l)">Labels</button>
+  </div>
+  <div class="row">
+    <button id="bfocus" title="Isolate selection + neighbours (e)">Focus sel.</button>
+    <button id="bclear" title="Clear focus (Esc)">Unfocus</button>
+  </div>
+  <div class="slider"><span>link</span><input type="range" id="slink" min="30" max="200" value="70"></div>
+  <div class="slider"><span>charge</span><input type="range" id="scharge" min="200" max="2000" value="900"></div>
+
+  <h2>Node types <span class="muted" id="ntoggle" style="cursor:pointer;float:right">all/none</span></h2>
+  <div id="filters"></div>
+  <h2>Edge types <span class="muted" id="etoggle" style="cursor:pointer;float:right">all/none</span></h2>
+  <div id="efilters"></div>
+
+  <h2>Inspect</h2>
+  <div id="detail" class="muted">Click a node. Double-click to focus its neighbourhood.</div>
+  <div class="row" id="agentrow" style="display:none">
+    <button id="bcopy" title="Copy this node + neighbours as markdown for an agent">Copy node ⧉</button>
+  </div>
+  <div class="row"><button id="bexport" title="Copy the visible sub-graph as markdown">Copy visible graph ⧉</button></div>
+</div>
+<canvas id="cv"></canvas>
+<div id="tip"></div>
+<div id="toast"></div>
+<div id="help"><b>keys</b> &nbsp; <kbd>/</kbd> search · <kbd>f</kbd> fit · <kbd>r</kbd> reset ·
+  <kbd>space</kbd> pause · <kbd>e</kbd> focus · <kbd>Esc</kbd> clear · <kbd>l</kbd> labels</div>
+<script>
+const DATA = __GRAPH_DATA__;
+const COLORS = { "code-file":"#7d8590","function":"#3fb950","class":"#a371f7",
+  "rule":"#58a6ff","formula":"#d29922","glossary":"#56d4dd","invariant":"#f85149",
+  "adr":"#db61a2","edge-case":"#e3b341","convention":"#79c0ff","regulatory":"#ff7b72",
+  "runbook":"#3fb950","narrative":"#bc8cff","memory":"#f0883e","spec":"#a5d6ff","task":"#ffa657" };
+const EDGE_COLORS = { "contains":"#30363d","calls":"#3fb950","references":"#6e7681",
+  "governs":"#58a6ff","related":"#8957e5","depends-on":"#d29922","supersedes":"#db61a2",
+  "contradicts":"#f85149","implements":"#56d4dd" };
+const LAYER_COLORS = { "project":"#58a6ff","global":"#3fb950" };
+const color = t => COLORS[t] || "#8b949e";
+const edgeColor = t => EDGE_COLORS[t] || "#6e7681";
+__BOOT__
+</script>
+</body>
+</html>