@intentius/behold 0.3.0 → 0.4.1

package/dist/cli.js

@@ -164,8 +164,9 @@ function readInfo(cfg) {
   const envNames = (v) => Array.isArray(v) ? v.map((x) => typeof x === "string" ? x : typeof x?.name === "string" ? x.name : void 0).filter((x) => !!x) : [];
   const stacks = readStacks(cfg?.stacks);
   const k8sProfiles = readK8sProfiles(cfg?.k8s);
+  const environments = envNames(cfg?.environments);
   return {
-    environments: envNames(cfg?.environments),
+    environments: environments.length ? environments : Object.keys(k8sProfiles ?? {}),
     lexicons: arr(cfg?.lexicons),
     ...k8sProfiles ? { k8sProfiles } : {},
     ...typeof cfg?.sourceDir === "string" ? { sourceDir: cfg.sourceDir } : {},
@@ -186,6 +187,36 @@ function parseEnvironmentNames(content) {
   }
   return [...body.matchAll(/["'`]([^"'`]+)["'`]/g)].map((m) => m[1]);
 }
+function parseK8sProfileNames(content) {
+  const m = content.match(/\bprofiles\s*:\s*\{/);
+  if (!m || m.index === void 0) return [];
+  const start = m.index + m[0].length;
+  let depth = 1;
+  let end = start;
+  for (; end < content.length && depth > 0; end++) {
+    if (content[end] === "{") depth++;
+    else if (content[end] === "}") depth--;
+  }
+  const body = content.slice(start, end - 1);
+  const names = [];
+  let d = 0;
+  let segment = "";
+  for (const ch of body) {
+    if (ch === "{") {
+      if (d === 0) {
+        const key = segment.match(/(["'`]?)([\w.-]+)\1\s*:\s*$/);
+        if (key) names.push(key[2]);
+        segment = "";
+      }
+      d++;
+    } else if (ch === "}") {
+      d--;
+    } else if (d === 0) {
+      segment += ch;
+    }
+  }
+  return names;
+}
 function parseStringLiteral(content, key) {
   const m = content.match(new RegExp(`\\b${key}\\s*:\\s*["'\`]([^"'\`]+)["'\`]`));
   return m?.[1];
@@ -202,8 +233,9 @@ async function detectProject(projectDir) {
   }
   const content = readFileSync2(path, "utf8");
   const sourceDir = parseStringLiteral(content, "sourceDir");
+  const environments = parseEnvironmentNames(content);
   return {
-    environments: parseEnvironmentNames(content),
+    environments: environments.length ? environments : parseK8sProfileNames(content),
     lexicons: parseStringArray(content, "lexicons"),
     ...sourceDir ? { sourceDir } : {}
   };
@@ -1869,7 +1901,7 @@ function projectK8sLogical(ir, env, boundContext) {
   if (k8s.length === 0) return { ir: { nodes: [], edges: [], groups: {} }, byContainer: {} };
   const cluster = boundManagedCluster(ir.nodes, boundContext);
   const CLUSTER_TITLE = cluster ? cluster.id : env ? `cluster ${env}` : "cluster";
-  const CLUSTER_SCOPED = "cluster-scoped";
+  const CLUSTER_SCOPED2 = "cluster-scoped";
   const namespaceTitle = (ns) => `namespace ${ns}`;
   const byContainer = {};
   const child = (parent, c) => {
@@ -1885,10 +1917,10 @@ function projectK8sLogical(ir, env, boundContext) {
       child(namespaceTitle(ns), n.id);
     } else {
       clusterScoped = true;
-      child(CLUSTER_SCOPED, n.id);
+      child(CLUSTER_SCOPED2, n.id);
     }
   }
-  if (clusterScoped) child(CLUSTER_TITLE, CLUSTER_SCOPED);
+  if (clusterScoped) child(CLUSTER_TITLE, CLUSTER_SCOPED2);
   const kept = new Set(headline.map((n) => n.id));
   const edges = ir.edges.filter((e) => kept.has(e.from) && kept.has(e.to));
   return { ir: { nodes: headline, edges, groups: {} }, byContainer };
@@ -2550,6 +2582,22 @@ function edgelessNote(zoom, ir) {
   if (ir.nodes.length === 0 || ir.edges.length > 0) return void 0;
   return "no edges \u2014 nothing in this estate references anything else";
 }
+var CLUSTER_SCOPED = /* @__PURE__ */ new Set([
+  "K8s::Core::Namespace",
+  "K8s::Rbac::ClusterRole",
+  "K8s::Rbac::ClusterRoleBinding",
+  "K8s::Storage::StorageClass",
+  "K8s::Apiextensions::CustomResourceDefinition"
+]);
+function namespaceMismatchNote(nodes) {
+  const k8s = nodes.filter((n) => n?.lexicon === "k8s");
+  if (k8s.length === 0) return void 0;
+  const pending = k8s.filter((n) => n.attrs?._status === "accent" && !CLUSTER_SCOPED.has(n.kind ?? ""));
+  if (pending.length < 3) return void 0;
+  if (pending.some((n) => typeof n.attrs?.metadata?.namespace === "string" && n.attrs.metadata.namespace)) return void 0;
+  if (!k8s.some((n) => n.attrs?._status === "good")) return void 0;
+  return `${pending.length} pending k8s objects declare no metadata.namespace \u2014 if a controller stamps it at apply time (e.g. Flux's targetNamespace), the live read looked in "default", not where they run`;
+}
 function notesFor(zoom, ir, compositeEdgesAttached, logicalBefore) {
   const primary = zoom === "logical" && logicalBefore !== void 0 ? logicalKept(logicalBefore, ir.nodes.length) : zoomNote(zoom, ir, compositeEdgesAttached);
   const notes = [primary, edgelessNote(zoom, ir)].filter((n) => n !== void 0);
@@ -3513,6 +3561,44 @@ async function composeEstate(projectDirs, opts = {}) {
   );
   return composeStacks(stacks);
 }
+var firstLine = (e) => {
+  const msg = e instanceof Error ? e.message : String(e);
+  const m = msg.match(/exited \d+:\s*([\s\S]*)/);
+  return (m ? m[1] : msg).split("\n")[0].trim().slice(0, 160);
+};
+async function composeEstateOverlay(projectDirs, opts, classify) {
+  const names = shortStackNames(projectDirs);
+  const unobserved = [];
+  const dropped = [];
+  const stacks = new Array(projectDirs.length);
+  await Promise.all(
+    projectDirs.map(async (dir, i) => {
+      const name = names[i];
+      try {
+        stacks[i] = { name, ir: classify(await graphIr(dir, { ...opts, live: true, overlay: true })) };
+      } catch (err) {
+        const reason = firstLine(err);
+        try {
+          const { env: _env, live: _live, overlay: _overlay, ...srcOpts } = opts;
+          const src = await graphIr(dir, srcOpts);
+          for (const n of src.nodes) n.attrs = { ...n.attrs, _status: "neutral", _unobserved: reason };
+          stacks[i] = { name, ir: src };
+          unobserved.push({ name, reason });
+        } catch (err2) {
+          dropped.push({ name, reason: firstLine(err2) });
+        }
+      }
+    })
+  );
+  const present = stacks.filter((s) => !!s);
+  return {
+    ir: composeStacks(present),
+    observed: present.length - unobserved.length,
+    total: projectDirs.length,
+    unobserved,
+    dropped
+  };
+}
 
 // src/events.ts
 import { watch, existsSync as existsSync8 } from "node:fs";
@@ -3643,17 +3729,19 @@ function safeJson(value) {
   return JSON.stringify(value).replace(/</g, "\\u003c");
 }
 var LANES_CSS = `
-#behold-lanes { position: fixed; left: 0; right: 0; bottom: 0; background: #0d1117;
-  border-top: 1px solid #30363d; padding: 8px 12px 10px; font: 12px ui-sans-serif, system-ui, sans-serif; color: #8b949e; }
+body { background: var(--bg, #0d1117); color: var(--fg, #e6edf3); padding-bottom: 150px; }
+#behold-lanes { position: fixed; left: 0; right: 0; bottom: 0; background: var(--bg, #0d1117);
+  border-top: 1px solid var(--line, #30363d); padding: 8px 12px 10px; font: 12px ui-sans-serif, system-ui, sans-serif; color: var(--muted, #8b949e); }
 #behold-lanes .hd { display: flex; gap: 14px; align-items: baseline; margin-bottom: 4px; }
-#behold-lanes .hd .rt { color: #d29922; }
+#behold-lanes .hd .rt { color: var(--foreign, #d29922); }
+#behold-lanes .hd a { color: var(--pending, #58a6ff); text-decoration: none; margin-left: auto; }
 #behold-lanes canvas { display: block; width: 100%; cursor: pointer; }
 #behold-diff { position: fixed; right: 12px; bottom: 156px; width: 260px; max-height: 40vh; overflow: auto;
-  background: #161b22; border: 1px solid #30363d; border-radius: 6px; padding: 10px 12px; font: 12px ui-sans-serif, system-ui, sans-serif;
-  color: #e6edf3; display: none; }
-#behold-diff h4 { margin: 0 0 6px; font-size: 12px; color: #8b949e; }
-#behold-diff .a { color: #3fb950; } #behold-diff .r { color: #f85149; } #behold-diff .c { color: #d29922; }
-body { padding-bottom: 150px; }`;
+  background: var(--panel, #161b22); border: 1px solid var(--line, #30363d); border-radius: 6px; padding: 10px 12px; font: 12px ui-sans-serif, system-ui, sans-serif;
+  color: var(--fg, #e6edf3); display: none; }
+#behold-diff h4 { margin: 0 0 6px; font-size: 12px; color: var(--muted, #8b949e); }
+#behold-diff .a { color: var(--managed, #3fb950); } #behold-diff .r { color: var(--degraded, #f85149); } #behold-diff .c { color: var(--foreign, #d29922); }`;
+var THEME_BOOT = `<script type="module">import { initTheme, onThemeChange, mountThemePicker } from "/theme.js"; initTheme(); mountThemePicker(document.getElementById("behold-lanes-pickers")); onThemeChange(() => window.dispatchEvent(new Event("behold-theme")));</script>`;
 function laneStripScript(frames) {
   return `<script>
 const LF = ${safeJson(frames)};
@@ -3664,6 +3752,7 @@ const LF = ${safeJson(frames)};
   const rowH = 22, padL = 96, padR = 16, padT = 6;
   const H = padT + subs.length * rowH + 24;
   const t0 = LF[0].t, tN = LF[LF.length - 1].t, span = Math.max(1, tN - t0);
+  const css = (n, fb) => (getComputedStyle(document.documentElement).getPropertyValue(n).trim() || fb);
   const offset = {}; // per-substrate time offset (graph-inert)
   let cur = LF.length - 1, focus = null, pair = null;
 
@@ -3677,7 +3766,7 @@ const LF = ${safeJson(frames)};
     const inNow = now !== undefined, inPrev = prev !== undefined;
     return inNow !== inPrev || (inNow && inPrev && now !== prev);
   }
-  const color = s => s === "good" ? "#3fb950" : s === "warn" ? "#d29922" : s === "accent" ? "#58a6ff" : "#6e7681";
+  const color = s => s === "good" ? css("--managed", "#3fb950") : s === "warn" ? css("--foreign", "#d29922") : s === "accent" ? css("--pending", "#58a6ff") : css("--edge", "#6e7681");
 
   function draw() {
     const dpr = window.devicePixelRatio || 1;
@@ -3686,22 +3775,22 @@ const LF = ${safeJson(frames)};
     c.clearRect(0, 0, host.clientWidth, H); c.font = "12px ui-sans-serif, system-ui, sans-serif";
     subs.forEach((s, r) => {
       const y = padT + r * rowH + rowH / 2;
-      c.fillStyle = offset[s] ? "#d29922" : "#8b949e"; c.textAlign = "left"; c.fillText(s, 8, y + 4);
-      c.strokeStyle = "#21262d"; c.beginPath(); c.moveTo(padL, y); c.lineTo(host.clientWidth - padR, y); c.stroke();
+      c.fillStyle = offset[s] ? css("--foreign", "#d29922") : css("--muted", "#8b949e"); c.textAlign = "left"; c.fillText(s, 8, y + 4);
+      c.strokeStyle = css("--line", "#21262d"); c.beginPath(); c.moveTo(padL, y); c.lineTo(host.clientWidth - padR, y); c.stroke();
       LF.forEach((f, i) => {
         if (!f.byLexicon[s]) return;
         // dot per substrate; brighter when a node in this substrate changed at i
         const changed = Object.keys(f.status).some(id => f.lexicon[id] === s && changedAt(id, i));
         const hi = focus && f.lexicon[focus] === s && changedAt(focus, i);
-        c.fillStyle = hi ? "#f0f6fc" : changed ? color(mode(f, s)) : "#30363d";
+        c.fillStyle = hi ? css("--fg", "#f0f6fc") : changed ? color(mode(f, s)) : css("--line", "#30363d");
         c.beginPath(); c.arc(xOf(i, s), y, i === cur ? 5 : hi ? 4.5 : 3.5, 0, 7); c.fill();
       });
     });
-    const px = baseX(cur); c.strokeStyle = "#58a6ff"; c.lineWidth = 1.5;
+    const px = baseX(cur); c.strokeStyle = css("--pending", "#58a6ff"); c.lineWidth = 1.5;
     c.beginPath(); c.moveTo(px, padT - 2); c.lineTo(px, padT + subs.length * rowH); c.stroke();
-    if (pair != null) { const qx = baseX(pair); c.strokeStyle = "#d29922"; c.setLineDash([3,3]);
+    if (pair != null) { const qx = baseX(pair); c.strokeStyle = css("--foreign", "#d29922"); c.setLineDash([3,3]);
       c.beginPath(); c.moveTo(qx, padT - 2); c.lineTo(qx, padT + subs.length * rowH); c.stroke(); c.setLineDash([]); }
-    c.fillStyle = "#e6edf3"; c.textAlign = "center"; c.fillText(LF[cur].name, px, padT + subs.length * rowH + 16);
+    c.fillStyle = css("--fg", "#e6edf3"); c.textAlign = "center"; c.fillText(LF[cur].name, px, padT + subs.length * rowH + 16);
     document.getElementById("behold-lanes-meta").textContent =
       LF.length + " frames \xB7 frame " + (cur + 1) + "/" + LF.length + (focus ? " \xB7 focus " + focus : "");
     document.getElementById("behold-lanes-rt").style.display = anyOffset() ? "inline" : "none";
@@ -3742,6 +3831,7 @@ const LF = ${safeJson(frames)};
   window.addEventListener("keydown", (e) => { if (e.key === "ArrowLeft") go(cur - 1); if (e.key === "ArrowRight") go(cur + 1);
     if (e.key === "Escape") { focus = null; pair = null; showDiff(); draw(); } });
   window.addEventListener("resize", draw);
+  window.addEventListener("behold-theme", draw); // #198: theme flip repaints the strip
 
   // focus cursor: click a graph node \u2192 highlight where it changed (graph \u2192 lanes)
   function wireNodes() { document.querySelectorAll("[data-node-id]").forEach(el => {
@@ -3767,7 +3857,7 @@ function renderLanes(frames, summaries) {
     status: Object.fromEntries(f.ir.nodes.map((n) => [n.id, n.attrs?._status ?? ""])),
     lexicon: Object.fromEntries(f.ir.nodes.map((n) => [n.id, n.lexicon]))
   }));
-  const strip = `<style>${LANES_CSS}</style><div id="behold-diff"></div><div id="behold-lanes"><div class="hd"><span>deployment lanes</span><span id="behold-lanes-meta"></span><span class="rt" id="behold-lanes-rt" style="display:none">offset \u2014 graph shows real time</span></div><canvas id="behold-lanes-canvas"></canvas></div>` + laneStripScript(laneFrames);
+  const strip = `<style>${LANES_CSS}</style>` + THEME_BOOT + `<div id="behold-diff"></div><div id="behold-lanes"><div class="hd"><span>deployment lanes</span><span id="behold-lanes-meta"></span><span class="rt" id="behold-lanes-rt" style="display:none">offset \u2014 graph shows real time</span><a href="/">\u2190 graph</a><span id="behold-lanes-pickers"></span></div><canvas id="behold-lanes-canvas"></canvas></div>` + laneStripScript(laneFrames);
   return doc.includes("</body>") ? doc.replace("</body>", `${strip}</body>`) : doc + strip;
 }
 
@@ -3923,7 +4013,7 @@ function createApp(cfg, broadcaster = new Broadcaster(), frames = new FrameBuffe
     const all = frames.all();
     if (all.length < 2) {
       return c.html(
-        `<!doctype html><meta charset=utf-8><body style="font:14px system-ui;background:#0d1117;color:#8b949e;padding:2rem"><h3 style="color:#e6edf3">deployment lanes</h3><p>${all.length} frame(s) captured \u2014 need at least two to scrub.</p><p>Frames accrue when the estate moves: hit <b style="color:#e6edf3">\u21BB Refresh</b> (captures the current live state), run a <b style="color:#e6edf3">Sync</b>/Adopt, edit the source, or serve with <code>--poll</code> against a moving environment. Then reload.</p><p><a href="/" style="color:#58a6ff;text-decoration:none">\u2190 back to the graph</a></p></body>`
+        `<!doctype html><meta charset=utf-8><script type="module">import { initTheme } from "/theme.js"; initTheme();</script><body style="font:14px system-ui;background:var(--bg,#0d1117);color:var(--muted,#8b949e);padding:2rem"><h3 style="color:var(--fg,#e6edf3)">deployment lanes</h3><p>${all.length} frame(s) captured \u2014 need at least two to scrub.</p><p>Frames accrue when the estate moves: hit <b style="color:var(--fg,#e6edf3)">\u21BB Refresh</b> (captures the current live state), run a <b style="color:var(--fg,#e6edf3)">Sync</b>/Adopt, edit the source, or serve with <code>--poll</code> against a moving environment. Then reload.</p><p><a href="/" style="color:var(--pending,#58a6ff);text-decoration:none">\u2190 back to the graph</a></p></body>`
       );
     }
     return c.html(renderLanes(all, frames.summaries()));
@@ -4034,6 +4124,11 @@ function createApp(cfg, broadcaster = new Broadcaster(), frames = new FrameBuffe
       ...cfg.projectDirs && cfg.projectDirs.length > 1 ? { projectDirs: cfg.projectDirs } : {},
       recents: listRecents().map((r) => r.dir),
       environments,
+      // #191: the cluster each k8s env is bound to (`k8s.profiles.<env>.
+      // context`) — the SPA's env picker shows it (`home → home-cloud`) so a
+      // wrong-cluster pick is visible BEFORE the read, not after (the failure
+      // chant#1100 exists to prevent, and the one behind #192's red herring).
+      ...k8sProfiles ? { k8sContexts: Object.fromEntries(Object.entries(k8sProfiles).flatMap(([e, p]) => p.context ? [[e, p.context]] : [])) } : {},
       lexicons,
       currentEnv: cfg.env ?? null,
       // v0.1.0 preview: the SPA hides git/PR ops + arbitrary-project affordances.
@@ -4138,6 +4233,9 @@ function createApp(cfg, broadcaster = new Broadcaster(), frames = new FrameBuffe
       let metaEnv = cfg.env ?? null;
       if (multi) {
         ir = await composeEstate(cfg.projectDirs, opts);
+        ir = addValueMatchEdges(ir);
+        ir = addK8sDeclaredEdges(ir);
+        ir = addClusterAnchorEdges(ir, await boundK8sContext(metaEnv ?? void 0));
       } else if (components) {
         ir = await componentGraphIr(cfg.projectDir, opts);
         const env = opts.env ?? cfg.env;
@@ -4179,7 +4277,8 @@ function createApp(cfg, broadcaster = new Broadcaster(), frames = new FrameBuffe
       const radial = new URL(c.req.url).searchParams.get("radial") === "1";
       const { svg } = renderGraph(ir, multi ? { boxes: "byStack" } : { radial });
       const srcZoom = components ? "components" : logical ? "logical" : opts.detail === 1 ? "composites" : opts.detail === 3 ? "attributes" : "resources";
-      const srcNote = multi ? void 0 : notesFor(srcZoom, ir, srcCompositeEdgesAttached);
+      const estateLensNote = multi && (components || logical) ? `the ${components ? "components" : "logical"} lens doesn't apply to a composed estate yet \u2014 showing the composed entity graph` : void 0;
+      const srcNote = multi ? estateLensNote : notesFor(srcZoom, ir, srcCompositeEdgesAttached);
       return c.json({
         ir,
         svg,
@@ -4278,6 +4377,30 @@ function createApp(cfg, broadcaster = new Broadcaster(), frames = new FrameBuffe
     }
     const logical = new URL(c.req.url).searchParams.get("logical") === "1";
     try {
+      if (cfg.projectDirs && cfg.projectDirs.length > 1) {
+        const runtime = new URL(c.req.url).searchParams.get("runtime") === "1";
+        const est = await composeEstateOverlay(cfg.projectDirs, { ...tierTargetOpts(query), detail: query.detail, env }, reclassifyOverlay);
+        if (est.dropped.length === est.total) {
+          return c.json({ error: `no project in the estate could be graphed \u2014 ${est.dropped.map((d) => `${d.name}: ${d.reason}`).join("; ")}` }, 500);
+        }
+        let ir2 = pruneRuntimeChildren(est.ir);
+        if ((query.detail ?? 2) < 3) ir2 = pruneImports(ir2);
+        ir2 = addValueMatchEdges(ir2);
+        ir2 = addK8sDeclaredEdges(ir2);
+        ir2 = addClusterAnchorEdges(ir2, await boundK8sContext(env));
+        const { svg: svg2 } = renderGraph(ir2, { boxes: "byStack" });
+        const lensNote = logical || runtime ? `the ${logical ? "logical" : "runtime"} lens doesn't apply to a composed estate yet \u2014 showing the composed entity overlay` : void 0;
+        const coverNote = est.unobserved.length || est.dropped.length ? `live observe covered ${est.observed} of ${est.total} projects \u2014 ` + [
+          ...est.unobserved.map((u) => `${u.name}: ${u.reason} (painted unobserved)`),
+          ...est.dropped.map((d) => `${d.name}: dropped (${d.reason})`)
+        ].join("; ") : void 0;
+        const note2 = [lensNote, coverNote, namespaceMismatchNote(ir2.nodes)].filter(Boolean).join(" \xB7 ");
+        return c.json({
+          ir: ir2,
+          svg: svg2,
+          meta: { projectDir: cfg.projectDir, env, mode: "overlay", estate: est.total, ...note2 ? { note: note2 } : {} }
+        });
+      }
       const opts = { ...query, live: true, overlay: true, env, ...logical ? { detail: 3 } : {} };
       let ir = reclassifyOverlay(await graphIr(cfg.projectDir, opts));
       const boundContext = await boundK8sContext(env);
@@ -4315,8 +4438,9 @@ function createApp(cfg, broadcaster = new Broadcaster(), frames = new FrameBuffe
       const { svg } = renderGraph(ir, { boxes: "byContainer", radial: new URL(c.req.url).searchParams.get("radial") === "1" });
       const zoom = new URL(c.req.url).searchParams.get("runtime") === "1" ? "runtime" : query.detail === 1 ? "composites" : query.detail === 3 ? "attributes" : "resources";
       const tierNote = tierMismatchNote(ir, beholdConfig.tiers, query.tier);
+      const nsNote = namespaceMismatchNote(ir.nodes);
       const zoomNotes = notesFor(zoom, ir, compositeEdgesAttached);
-      const note = [tierNote, zoomNotes].filter(Boolean).join(" \xB7 ");
+      const note = [tierNote, nsNote, zoomNotes].filter(Boolean).join(" \xB7 ");
       return c.json({ ir, svg, meta: { projectDir: cfg.projectDir, env, mode: "overlay", ...note ? { note } : {} } });
     } catch (err) {
       return errorResponse(c, query, err);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intentius/behold",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "type": "module",
   "description": "behold — a live control plane on chant. See your whole estate (every substrate in one graph), coloured by drift; act through delegated, gated Ops.",
   "bin": {
@@ -21,6 +21,7 @@
     "dev": "tsx src/cli.ts",
     "demo": "npm --prefix example-writes install && tsx src/cli.ts serve example-writes --local --env prod",
     "demo:k8s": "bash example-k8s/scripts/local/local-up.sh; npm --prefix example-k8s install && tsx src/cli.ts serve example-k8s --local --env local; bash example-k8s/scripts/local/local-down.sh",
+    "smoke:ui": "node smoke/ui-smoke.mjs",
     "tsc": "tsc --noEmit",
     "test": "vitest run",
     "build": "esbuild src/cli.ts --bundle --platform=node --format=esm --external:hono --external:@hono/node-server --external:@intentius/pinhole --outfile=dist/cli.js && chmod +x dist/cli.js",
@@ -36,6 +37,7 @@
   "devDependencies": {
     "@types/node": "^22.0.0",
     "esbuild": "^0.28.0",
+    "playwright": "^1.62.1",
     "tsx": "^4.19.0",
     "typescript": "^5.9.3",
     "vitest": "^4.1.9"

package/web/app.js

@@ -838,13 +838,16 @@ function renderPanelScope() {
     }, "The declared source graph — no live overlay"),
   );
   for (const e of environments) {
+    // #191: a k8s env shows the cluster it's bound to (`home → home-cloud`),
+    // so a wrong-cluster pick is visible before the read, not after.
+    const ctx = projectInfo && projectInfo.k8sContexts && projectInfo.k8sContexts[e];
     host.appendChild(
-      panelOpt(e, view.env === e, () => {
+      panelOpt(ctx ? `${e} → ${ctx}` : e, view.env === e, () => {
         view.env = e;
         resetDialCaches();
         renderStatusbar();
         load();
-      }, `Live overlay for ${e}`),
+      }, ctx ? `Live overlay for ${e} — bound to kubeconfig context ${ctx}` : `Live overlay for ${e}`),
     );
   }
   if (!environments.length) host.appendChild(panelMuted("no environments declared"));