npm - @polycode-projects/seonix - Versions diffs - 0.3.0 → 0.4.0 - Mend

@polycode-projects/seonix 0.3.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/src/viz.mjs CHANGED Viewed

@@ -26,6 +26,7 @@ import { loadConfig } from "./config.mjs";
 import * as source from "./source.mjs";
 import { buildTemporalGraph, buildBrowserData, gitCommitOrder, gitCommitParents, renderBrowserHtml } from "./browser.mjs";
 import { extractTimeline, renderTimelineHtml } from "./timeline.mjs";
+import { winkBrowserBundle } from "./nlp-bundle.mjs";
 const here = dirname(fileURLToPath(import.meta.url));
 const execFileP = promisify(execFile);
@@ -203,12 +204,24 @@ const inlineJson = (v) => JSON.stringify(v).replace(/</g, "\\u003c");
  * silently produce incomplete answers, which this project's honesty contract
  * doesn't allow (see the file-level comment's "ONE viewer, three data channels" —
  * this is a fourth, for the same one-viewer-many-modes reason).
+ *
+ * The OPTIONAL wink-nlp lemma tier (ask-nlp.mjs's browser twin, from nlp-bundle.mjs)
+ * reaches the chat two ways: `nlpInline` inlines the ~4 MB bundle as its own <script>
+ * so it registers `window.__seonixNlp` at page load (portable `viz --nlp`); `nlpPath`
+ * points the page at a same-origin sibling asset the chat LAZY-loads on first ask
+ * (the SITE build). Neither is present in the default local single-file — that viewer
+ * stays lemma-off and fetches nothing, exactly as before, preserving its
+ * no-external-fetch guarantee. ask() picks up whatever `window.__seonixNlp` is set,
+ * or degrades to the adapter-less tiers when it's absent.
  */
-export function renderViewerHtml({ cytoscape, askEngine = "", embedData = null, dataPath = null, askData = null, askDataPath = null } = {}) {
+export function renderViewerHtml({ cytoscape, askEngine = "", embedData = null, dataPath = null, askData = null, askDataPath = null, nlpInline = null, nlpPath = null } = {}) {
   const embedded = embedData ? `<script type="application/json" id="seonix-data">${inlineJson(embedData)}</script>\n` : "";
   const askEmbedded = askData ? `<script type="application/json" id="seonix-ask-data">${inlineJson(askData)}</script>\n` : "";
-  const cfgObj = { ...(dataPath ? { data: dataPath } : {}), ...(askDataPath ? { ask: askDataPath } : {}) };
+  const cfgObj = { ...(dataPath ? { data: dataPath } : {}), ...(askDataPath ? { ask: askDataPath } : {}), ...(nlpPath ? { nlp: nlpPath } : {}) };
   const cfg = Object.keys(cfgObj).length ? `<script type="application/json" id="seonix-cfg">${inlineJson(cfgObj)}</script>\n` : "";
+  // Inline bundle: escape any literal </script inside the wink model data so the
+  // block can't be closed early (harmless inside JS strings, impossible outside them).
+  const nlpEmbedded = nlpInline ? `<script>${String(nlpInline).replace(/<\/script/gi, "<\\/script")}</script>\n` : "";
   return `<!doctype html><html><head><meta charset="utf-8"><title>seon code-map</title>
 <!-- generated by: seonix viz (see packages/seonix/src/viz.mjs) — one viewer, data loaded at runtime -->
 <style>
@@ -226,13 +239,20 @@ export function renderViewerHtml({ cytoscape, askEngine = "", embedData = null,
   #depthval{min-width:1.2em;text-align:center;display:inline-block;cursor:help}
   #hub,#beam{width:3.5em;background:#1a1b26;color:#c0caf5;border:1px solid #2a2e42;border-radius:4px;padding:1px 4px;font:inherit}
   #legend{padding:4px 12px 6px;background:#16161e;border-bottom:1px solid #2a2e42;display:flex;flex-wrap:wrap;gap:2px 12px;font-size:12px;flex:0 0 auto}
-  #main{flex:1 1 auto;position:relative;min-height:0}
-  #cy{position:absolute;top:0;left:0;right:300px;bottom:0}
-  #side{position:absolute;top:0;right:0;width:300px;bottom:0;background:#16161e;border-left:1px solid #2a2e42;padding:14px;overflow:auto;box-sizing:border-box}
+  /* Graph on top (full width, generous height); the chat + node-detail ride a
+     full-width row BENEATH it (chat grows, detail a compact fixed column). On a
+     narrow screen #below stacks so the body never scrolls sideways. */
+  #main{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
+  #cy{flex:1 1 auto;position:relative;min-height:260px}
+  #below{flex:0 0 auto;display:flex;background:#16161e;border-top:1px solid #2a2e42;max-height:46vh;box-sizing:border-box}
+  #ask{flex:1 1 auto;min-width:0;padding:14px 16px;overflow:auto;box-sizing:border-box;display:flex;flex-direction:column}
+  #detail{flex:0 0 300px;padding:14px;overflow:auto;border-left:1px solid #2a2e42;box-sizing:border-box}
+  @media(max-width:720px){#below{flex-direction:column;max-height:58vh;overflow:auto}#detail{flex:0 0 auto;border-left:0;border-top:1px solid #2a2e42}}
   .lg{white-space:nowrap;cursor:pointer;user-select:none;color:#a9b1d6}.lg i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:middle}.lg input{vertical-align:middle;margin:0 3px 0 0}
   .lg .cnt{color:#565f89;margin-left:3px;font-size:11px;font-variant-numeric:tabular-nums}
   select{background:#1a1b26;color:#c0caf5;border:1px solid #2a2e42;border-radius:4px;font:inherit}
-  #side h3{margin:2px 0 8px;color:#c0caf5;font-size:15px;word-break:break-all}
+  #detail h3{margin:2px 0 8px;color:#c0caf5;font-size:15px;word-break:break-all}
+  #ask h4{margin:0 0 8px;color:#a9b1d6;font-size:11px;text-transform:uppercase;letter-spacing:.04em}
   .badge{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border:1px solid #2a2e42;border-radius:10px;font-size:11px;color:#a9b1d6}
   .badge i{width:8px;height:8px;border-radius:50%;display:inline-block}
   #detail dl{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;margin:10px 0;font-size:12px;color:#c0caf5}
@@ -243,11 +263,10 @@ export function renderViewerHtml({ cytoscape, askEngine = "", embedData = null,
   .hint{color:#565f89;font-size:11px;margin-top:10px}
   .empty{color:#a9b1d6;font-size:12px;line-height:1.7}
   code{color:#9aa5ce;word-break:break-all}
-  #ask{padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid #2a2e42}
   .askrow{display:flex;gap:6px}
-  #askq{flex:1;min-width:0;background:#1a1b26;color:#c0caf5;border:1px solid #2a2e42;border-radius:4px;padding:4px 8px;font:inherit}
+  #askq{flex:1;min-width:0;background:#1a1b26;color:#c0caf5;border:1px solid #2a2e42;border-radius:4px;padding:7px 10px;font:inherit;font-size:13px}
   #askq:focus{outline:none;border-color:#7aa2f7}
-  .askresult{margin-top:8px;font-size:12px;line-height:1.6;color:#c0caf5}
+  .askresult{margin-top:10px;flex:1 1 auto;font-size:12.5px;line-height:1.6;color:#c0caf5;overflow:auto}
   .askresult.miss{color:#a9b1d6;font-style:italic}
   .askresult .askq-echo{color:#565f89;margin-bottom:4px;font-style:normal}
 </style></head><body>
@@ -269,8 +288,9 @@ export function renderViewerHtml({ cytoscape, askEngine = "", embedData = null,
 <div id="legend"></div>
 <div id="main">
   <div id="cy"></div>
-  <div id="side">
+  <div id="below">
     <div id="ask">
+      <h4>Ask the graph</h4>
       <div class="askrow"><input id="askq" type="text" autocomplete="off" placeholder='ask e.g. "what calls this"'><button class="btn" id="asksubmit">ask</button></div>
       <div id="askresult" class="askresult"></div>
     </div>
@@ -279,7 +299,7 @@ export function renderViewerHtml({ cytoscape, askEngine = "", embedData = null,
 </div>
 ${embedded}${askEmbedded}${cfg}<script>${cytoscape}</script>
 <script>${askEngine}</script>
-<script>
+${nlpEmbedded}<script>
 // Type palette (see the CVD note in viz.mjs) — viewer styling, identical for every repo.
 const COLORS={Module:'#3987e5',Class:'#c98500',Function:'#008300',Method:'#d55181',Attribute:'#9085e9',GlobalVariable:'#d95926',Commit:'#199e70'};
 const $=id=>document.getElementById(id);
@@ -322,6 +342,29 @@ function loadAskData(){
   })();
   return _askGraphPromise;
 }
+// The OPTIONAL wink-nlp lemma adapter (window.__seonixNlp — see nlp-bundle.mjs).
+// An inlined bundle registers it at page load; the site build ships it as a
+// same-origin sibling this injects LAZILY on the first ask (never at boot), so the
+// ~4 MB model is only paid for when the chat is actually used. With neither present
+// (the default local single-file) this resolves to undefined and the chat runs
+// adapter-less — ask() then falls back to its curated + fuzzy tiers, exactly as
+// before, and NOTHING is fetched, keeping the no-external-fetch guarantee intact.
+let _nlpPromise=null;
+function loadNlp(){
+  if(window.__seonixNlp) return Promise.resolve(window.__seonixNlp);
+  if(_nlpPromise) return _nlpPromise;
+  const cfgEl=document.getElementById('seonix-cfg');
+  const url=cfgEl?JSON.parse(cfgEl.textContent).nlp:null;
+  if(!url) return Promise.resolve(undefined);
+  _nlpPromise=new Promise(res=>{
+    const s=document.createElement('script');
+    s.src=url;
+    s.onload=()=>res(window.__seonixNlp);
+    s.onerror=()=>res(undefined); // a failed asset degrades to lemma-off, never a broken chat
+    document.head.appendChild(s);
+  });
+  return _nlpPromise;
+}
 function init(G){
   document.title='seon code-map — '+G.focusLabel;
   $('focuslabel').textContent=G.focusLabel;
@@ -564,8 +607,10 @@ function init(G){
       return;
     }
     out.textContent='thinking…';
-    loadAskData().then(askGraph=>{
-      const {content,seonix_ask}=ask(askGraph,query,{contextId:selId});
+    // Load the graph and (if configured) the wink lemma adapter together, then run
+    // the mechanical ask. An undefined nlp makes ask() degrade to its adapter-less tiers.
+    Promise.all([loadAskData(),loadNlp()]).then(([askGraph,nlp])=>{
+      const {content,seonix_ask}=ask(askGraph,query,{contextId:selId,nlp});
       const total=(seonix_ask.matches||[]).length;
       const shown=total?highlightAsk(seonix_ask.matches.map(m=>m.id)):0;
       out.classList.toggle('miss',!!seonix_ask.miss);
@@ -647,10 +692,12 @@ function resolveFocus(graph, focusArg) {
  * code browser rides along at `/code-browser.html` (alias `/browser`) with a live
  * temporal payload — the local equivalent of the site's browser section.
  */
-export async function startVizServer({ values, cytoscape, askEngine = "", log = () => {} }) {
+export async function startVizServer({ values, cytoscape, askEngine = "", nlpBundle = null, log = () => {} }) {
   const port = Math.max(0, parseInt(values.port, 10) || 0);
   const repoUrl = values["repo-url"] || (await repoUrlFromGit(process.cwd()));
-  const viewer = renderViewerHtml({ cytoscape, askEngine });
+  // With --nlp the local live view gets the same lemma tier as the site: the bundle
+  // is served in-process at /seonix-nlp.js and the viewer lazy-loads it on first ask.
+  const viewer = renderViewerHtml({ cytoscape, askEngine, nlpPath: nlpBundle ? "/seonix-nlp.js" : null });
   const browserPage = await renderBrowserHtml({ cytoscape });
   // nav = the routes this server itself serves; injected into every payload/page
   const nav = { home: "/", graph: "/seonix-graph.html", browser: "/code-browser.html", timeline: "/timeline.html" };
@@ -748,6 +795,9 @@ export async function startVizServer({ values, cytoscape, askEngine = "", log =
         res.writeHead(500, { "content-type": "application/json" });
         res.end(JSON.stringify({ error: String(err.message || err) }));
       }
+    } else if (path === "/seonix-nlp.js" && nlpBundle) {
+      res.writeHead(200, { "content-type": "text/javascript; charset=utf-8" });
+      res.end(nlpBundle);
     } else {
       res.writeHead(404, { "content-type": "text/plain" });
       res.end("not found");
@@ -782,13 +832,21 @@ export async function runVizCli(argv) {
       "timeline-out": { type: "string" },
       "graph-only": { type: "boolean", default: false },
       scope: { type: "string", default: "product" },
+      // Include the OPTIONAL wink-nlp lemma tier in the chat (see nlp-bundle.mjs).
+      // Site mode (--data-out): written as a same-origin sibling the page lazy-loads.
+      // Portable/serve mode: inlined (single-file) / served in-process. Off by default,
+      // so the local single-file stays lean and lemma-off exactly as before.
+      nlp: { type: "boolean", default: false },
     },
     allowPositionals: false,
   });
   const cytoscape = await cytoscapeSource();
   const askEngine = await askSource();
+  // Build the wink lemma bundle once, only when --nlp asked for it (~4 MB; skip the
+  // work entirely otherwise). Wired below as a sibling asset (site) or inline (portable).
+  const nlpBundle = values.nlp ? await winkBrowserBundle() : null;
   if (values.serve) {
-    await startVizServer({ values, cytoscape, askEngine, log: (s) => process.stderr.write(s) });
+    await startVizServer({ values, cytoscape, askEngine, nlpBundle, log: (s) => process.stderr.write(s) });
     return; // keeps serving until Ctrl-C
   }
   const { config, graph, raw } = await loadGraph(values);
@@ -838,19 +896,30 @@ export async function runVizCli(argv) {
     const rel = relative(dirname(out), dataOut) || "seonix-graph-data.json";
     const askDataOut = resolve(dirname(out), "seonix-ask-data.json");
     const askRel = relative(dirname(out), askDataOut) || "seonix-ask-data.json";
+    // Site build: the wink lemma bundle rides the same sibling-asset convention as
+    // the data files — a same-origin ./seonix-nlp.js the page lazy-loads on first ask.
+    let nlpPath = null;
+    if (nlpBundle) {
+      const nlpOut = resolve(dirname(out), "seonix-nlp.js");
+      await writeFile(nlpOut, nlpBundle);
+      nlpPath = "./seonix-nlp.js";
+    }
     await Promise.all([writeFile(dataOut, JSON.stringify(data)), writeFile(askDataOut, JSON.stringify(raw))]);
     await writeFile(out, renderViewerHtml({
       cytoscape, askEngine,
       dataPath: rel === "seonix-graph-data.json" ? null : rel,
       askDataPath: askRel === "seonix-ask-data.json" ? null : askRel,
+      nlpPath,
     }));
     process.stderr.write(
       `seonix viz: ${subgraph.nodes.length} nodes, ${subgraph.edges.length} edges around "${focus.label}" ` +
-        `(depth ${values.depth})${subgraph.truncated ? " [capped]" : ""} → ${out} + ${dataOut} + ${askDataOut}\n`,
+        `(depth ${values.depth})${subgraph.truncated ? " [capped]" : ""} → ${out} + ${dataOut} + ${askDataOut}` +
+        `${nlpPath ? ` + ${resolve(dirname(out), "seonix-nlp.js")} (wink lemma tier)` : ""}\n`,
     );
   } else {
-    // portable mode: one self-contained file, both channels embedded
-    await writeFile(out, renderViewerHtml({ cytoscape, askEngine, embedData: data, askData: raw }));
+    // portable mode: one self-contained file, both channels embedded (+ inline wink
+    // bundle when --nlp; otherwise lemma-off, no external fetch, exactly as before)
+    await writeFile(out, renderViewerHtml({ cytoscape, askEngine, embedData: data, askData: raw, nlpInline: nlpBundle }));
     process.stderr.write(
       `seonix viz: ${subgraph.nodes.length} nodes, ${subgraph.edges.length} edges around "${focus.label}" ` +
         `(depth ${values.depth})${subgraph.truncated ? " [capped]" : ""} → ${out}\n`,