@runcontext/ui 0.5.10 → 0.6.0

package/dist/index.mjs

@@ -357,13 +357,12 @@ function uploadRoutes(contextDir) {
 
 // src/routes/api/pipeline.ts
 import { Hono as Hono4 } from "hono";
-import { execFile as execFileCb } from "child_process";
+import { execFile as execFileCb, spawn } from "child_process";
 import { randomUUID as randomUUID2 } from "crypto";
-import { existsSync as existsSync3, readFileSync as readFileSync3 } from "fs";
-import { join as join4, dirname } from "path";
+import { existsSync as existsSync3 } from "fs";
+import { join as join4, dirname, resolve } from "path";
 import { promisify } from "util";
 import { fileURLToPath } from "url";
-import { parse as parseYaml } from "yaml";
 
 // src/events.ts
 import { EventEmitter } from "events";
@@ -399,6 +398,10 @@ function resolveCliBin() {
     }
   } catch {
   }
+  const cwdCli = join4(process.cwd(), "packages", "cli", "dist", "index.js");
+  if (existsSync3(cwdCli)) {
+    return { cmd: process.execPath, prefix: [cwdCli] };
+  }
   if (process.argv[1] && existsSync3(process.argv[1])) {
     return { cmd: process.execPath, prefix: [process.argv[1]] };
   }
@@ -469,35 +472,47 @@ function pipelineRoutes(rootDir, contextDir) {
     if (!run) return c.json({ error: "Not found" }, 404);
     return c.json(run);
   });
-  app.get("/api/mcp-config", (c) => {
-    let connection;
-    try {
-      const configPath = join4(rootDir, "runcontext.config.yaml");
-      const configRaw = readFileSync3(configPath, "utf-8");
-      const config = parseYaml(configRaw);
-      const dataSources = config?.data_sources;
-      if (dataSources) {
-        const firstKey = Object.keys(dataSources)[0];
-        if (firstKey) {
-          connection = dataSources[firstKey].connection || dataSources[firstKey].path;
-        }
-      }
-    } catch {
+  let mcpProcess = null;
+  app.post("/api/mcp/start", (c) => {
+    if (mcpProcess && !mcpProcess.killed) {
+      return c.json({ ok: true, status: "already_running" });
+    }
+    const cli = resolveCliBin();
+    mcpProcess = spawn(cli.cmd, [...cli.prefix, "serve"], {
+      cwd: rootDir,
+      stdio: ["pipe", "pipe", "ignore"],
+      detached: false,
+      env: { ...process.env, NODE_OPTIONS: "--no-deprecation" }
+    });
+    mcpProcess.on("exit", () => {
+      mcpProcess = null;
+    });
+    mcpProcess.on("error", () => {
+      mcpProcess = null;
+    });
+    return c.json({ ok: true, status: "started" });
+  });
+  app.post("/api/mcp/stop", (c) => {
+    if (mcpProcess && !mcpProcess.killed) {
+      mcpProcess.kill();
+      mcpProcess = null;
     }
+    return c.json({ ok: true, status: "stopped" });
+  });
+  app.get("/api/mcp/status", (c) => {
+    const running = mcpProcess !== null && !mcpProcess.killed;
+    return c.json({ running });
+  });
+  app.get("/api/mcp-config", (c) => {
     const cli = resolveCliBin();
+    const absRoot = resolve(rootDir);
     const mcpServers = {
       runcontext: {
         command: cli.cmd,
         args: [...cli.prefix, "serve"],
-        cwd: rootDir
+        cwd: absRoot
       }
     };
-    if (connection) {
-      mcpServers["runcontext-db"] = {
-        command: "npx",
-        args: ["--yes", "@runcontext/db", "--url", connection]
-      };
-    }
     return c.json({ mcpServers });
   });
   return app;
@@ -521,10 +536,16 @@ function buildCliArgs(stage, dataSource) {
       if (dataSource) args.push("--source", dataSource);
       return args;
     }
-    case "verify":
-      return ["verify"];
-    case "autofix":
-      return ["fix"];
+    case "verify": {
+      const args = ["verify"];
+      if (dataSource) args.push("--source", dataSource);
+      return args;
+    }
+    case "autofix": {
+      const args = ["fix"];
+      if (dataSource) args.push("--source", dataSource);
+      return args;
+    }
     case "agent-instructions":
       return ["build"];
   }
@@ -550,7 +571,7 @@ async function executePipeline(run, rootDir, contextDir, dataSource, sessionId)
       const cli = resolveCliBin();
       const { stdout } = await execFile(cli.cmd, [...cli.prefix, ...cliArgs], {
         cwd: rootDir,
-        timeout: 12e4,
+        timeout: 3e5,
         env: {
           ...process.env,
           NODE_OPTIONS: "--max-old-space-size=4096 --no-deprecation"
@@ -582,8 +603,10 @@ async function executePipeline(run, rootDir, contextDir, dataSource, sessionId)
         continue;
       }
       stage.status = "error";
-      stage.error = err instanceof Error ? err.message : String(err);
+      const errDetail = execErr.stderr || (err instanceof Error ? err.message : String(err));
+      stage.error = errDetail;
       stage.completedAt = (/* @__PURE__ */ new Date()).toISOString();
+      console.error(`[pipeline] Stage ${stage.stage} failed:`, errDetail);
       if (sessionId) {
         setupBus.emitEvent({
           type: "pipeline:stage",
@@ -602,36 +625,236 @@ async function executePipeline(run, rootDir, contextDir, dataSource, sessionId)
 import { Hono as Hono5 } from "hono";
 import * as fs4 from "fs";
 import * as path4 from "path";
+import { execFile as execFileCb2 } from "child_process";
+import { promisify as promisify2 } from "util";
 import { parse as parse3 } from "yaml";
+var execFile2 = promisify2(execFileCb2);
+function detectTier(contextDir, sourceName) {
+  const rulesPath = path4.join(contextDir, "rules", `${sourceName}.rules.yaml`);
+  const modelPath = path4.join(contextDir, "models", `${sourceName}.osi.yaml`);
+  if (fs4.existsSync(rulesPath)) {
+    try {
+      const rules = parse3(fs4.readFileSync(rulesPath, "utf-8"));
+      const realQueries = (rules?.golden_queries || []).filter(
+        (q) => q.sql && !q.sql.includes("TODO") && !q.sql.includes("table_name") && q.question && !q.question.includes("TODO")
+      );
+      const realGuardrails = (rules?.guardrail_filters || rules?.guardrails || []).filter(
+        (g) => g.name && !g.name.includes("TODO")
+      );
+      if (realQueries.length >= 3 && realGuardrails.length >= 1) return "gold";
+    } catch {
+    }
+  }
+  if (fs4.existsSync(modelPath)) {
+    try {
+      const model = parse3(fs4.readFileSync(modelPath, "utf-8"));
+      let datasets = model?.tables || model?.models || [];
+      if (datasets.length === 0 && Array.isArray(model?.semantic_model)) {
+        for (const sm of model.semantic_model) {
+          if (Array.isArray(sm.datasets)) datasets.push(...sm.datasets);
+        }
+      }
+      let fieldsWithSamples = 0;
+      for (const d of datasets) {
+        for (const f of d.columns || d.fields || []) {
+          if (f.sample_values?.length > 0) fieldsWithSamples++;
+        }
+      }
+      if (fieldsWithSamples >= 2) return "silver";
+    } catch {
+    }
+  }
+  return "bronze";
+}
+function countTablesAndColumns(contextDir, sourceName) {
+  const modelPath = path4.join(contextDir, "models", `${sourceName}.osi.yaml`);
+  if (!fs4.existsSync(modelPath)) return { tables: 0, columns: 0 };
+  try {
+    const model = parse3(fs4.readFileSync(modelPath, "utf-8"));
+    let datasets = model?.tables || model?.models || [];
+    if (datasets.length === 0 && Array.isArray(model?.semantic_model)) {
+      for (const sm of model.semantic_model) {
+        if (Array.isArray(sm.datasets)) datasets.push(...sm.datasets);
+      }
+    }
+    const columns = datasets.reduce((sum, t) => sum + (t.columns?.length || t.fields?.length || 0), 0);
+    return { tables: datasets.length, columns };
+  } catch {
+    return { tables: 0, columns: 0 };
+  }
+}
 function productsRoutes(contextDir) {
   const app = new Hono5();
   app.get("/api/products", (c) => {
-    const productsDir = path4.join(contextDir, "products");
-    if (!fs4.existsSync(productsDir)) {
+    if (!fs4.existsSync(contextDir)) {
       return c.json([]);
     }
     const products = [];
-    const dirs = fs4.readdirSync(productsDir).filter((name) => {
-      const fullPath = path4.join(productsDir, name);
-      return fs4.statSync(fullPath).isDirectory() && !name.startsWith(".");
+    const briefFiles = fs4.readdirSync(contextDir).filter((f) => f.endsWith(".context-brief.yaml"));
+    for (const briefFile of briefFiles) {
+      const briefPath = path4.join(contextDir, briefFile);
+      try {
+        const brief = parse3(fs4.readFileSync(briefPath, "utf-8"));
+        const name = brief?.product_name || briefFile.replace(".context-brief.yaml", "");
+        const modelsDir = path4.join(contextDir, "models");
+        let sourceName = "";
+        const briefSource = brief?.data_sources?.[0]?.name || brief?.data_source || "";
+        if (briefSource && fs4.existsSync(path4.join(modelsDir, `${briefSource}.osi.yaml`))) {
+          sourceName = briefSource;
+        } else if (fs4.existsSync(modelsDir)) {
+          const modelFiles = fs4.readdirSync(modelsDir).filter((f) => f.endsWith(".osi.yaml"));
+          if (modelFiles.length > 0) {
+            sourceName = modelFiles[0].replace(".osi.yaml", "");
+          }
+        }
+        const { tables, columns } = sourceName ? countTablesAndColumns(contextDir, sourceName) : { tables: 0, columns: 0 };
+        const tier = sourceName ? detectTier(contextDir, sourceName) : "bronze";
+        products.push({
+          name,
+          description: brief?.description,
+          sensitivity: brief?.sensitivity,
+          tier,
+          tables,
+          columns,
+          hasBrief: true
+        });
+      } catch {
+      }
+    }
+    const seen = /* @__PURE__ */ new Set();
+    const unique = products.filter((p) => {
+      if (seen.has(p.name)) return false;
+      seen.add(p.name);
+      return true;
     });
-    for (const name of dirs) {
-      const briefPath = path4.join(productsDir, name, "context-brief.yaml");
-      let description;
-      let sensitivity;
-      let hasBrief = false;
-      if (fs4.existsSync(briefPath)) {
-        hasBrief = true;
+    return c.json(unique);
+  });
+  app.get("/api/products/:name/detail", (c) => {
+    const modelsDir = path4.join(contextDir, "models");
+    const rulesDir = path4.join(contextDir, "rules");
+    const govDir = path4.join(contextDir, "governance");
+    const glossaryDir = path4.join(contextDir, "glossary");
+    const ownersDir = path4.join(contextDir, "owners");
+    const modelFiles = fs4.existsSync(modelsDir) ? fs4.readdirSync(modelsDir).filter((f) => f.endsWith(".osi.yaml")) : [];
+    const sourceName = modelFiles.length > 0 ? modelFiles[0].replace(".osi.yaml", "") : "";
+    let tables = [];
+    let modelYaml = "";
+    if (sourceName) {
+      const modelPath = path4.join(modelsDir, modelFiles[0]);
+      modelYaml = fs4.readFileSync(modelPath, "utf-8");
+      try {
+        const model = parse3(modelYaml);
+        let datasets = model?.tables || model?.models || [];
+        if (datasets.length === 0 && Array.isArray(model?.semantic_model)) {
+          for (const sm of model.semantic_model) {
+            if (Array.isArray(sm.datasets)) datasets.push(...sm.datasets);
+          }
+        }
+        tables = datasets.map((d) => {
+          const fields = d.columns || d.fields || [];
+          return {
+            name: d.name,
+            description: d.description || "",
+            fields: fields.map((f) => ({
+              name: f.name,
+              type: f.type || f.data_type || "",
+              description: f.description || "",
+              sampleValues: f.sample_values || [],
+              semanticRole: f.semantic_role || ""
+            }))
+          };
+        });
+      } catch {
+      }
+    }
+    let rules = {};
+    let rulesYaml = "";
+    if (sourceName) {
+      const rulesPath = path4.join(rulesDir, `${sourceName}.rules.yaml`);
+      if (fs4.existsSync(rulesPath)) {
+        rulesYaml = fs4.readFileSync(rulesPath, "utf-8");
+        try {
+          rules = parse3(rulesYaml) || {};
+        } catch {
+        }
+      }
+    }
+    let governance = {};
+    let govYaml = "";
+    if (sourceName) {
+      const govPath = path4.join(govDir, `${sourceName}.governance.yaml`);
+      if (fs4.existsSync(govPath)) {
+        govYaml = fs4.readFileSync(govPath, "utf-8");
+        try {
+          governance = parse3(govYaml) || {};
+        } catch {
+        }
+      }
+    }
+    const glossary = [];
+    if (fs4.existsSync(glossaryDir)) {
+      for (const f of fs4.readdirSync(glossaryDir).filter((f2) => f2.endsWith(".term.yaml"))) {
         try {
-          const brief = parse3(fs4.readFileSync(briefPath, "utf-8"));
-          description = brief?.description;
-          sensitivity = brief?.sensitivity;
+          const term = parse3(fs4.readFileSync(path4.join(glossaryDir, f), "utf-8"));
+          if (term) glossary.push(term);
         } catch {
         }
       }
-      products.push({ name, description, sensitivity, hasBrief });
     }
-    return c.json(products);
+    const owners = [];
+    if (fs4.existsSync(ownersDir)) {
+      for (const f of fs4.readdirSync(ownersDir).filter((f2) => f2.endsWith(".owner.yaml"))) {
+        try {
+          const owner = parse3(fs4.readFileSync(path4.join(ownersDir, f), "utf-8"));
+          if (owner) owners.push(owner);
+        } catch {
+        }
+      }
+    }
+    return c.json({
+      tables,
+      rules: {
+        joinRules: rules.join_rules || [],
+        goldenQueries: rules.golden_queries || [],
+        guardrails: rules.guardrail_filters || rules.guardrails || [],
+        grainStatements: rules.grain_statements || []
+      },
+      governance,
+      glossary,
+      owners,
+      yaml: {
+        model: modelYaml.slice(0, 5e4),
+        rules: rulesYaml.slice(0, 2e4),
+        governance: govYaml.slice(0, 1e4)
+      }
+    });
+  });
+  app.get("/api/tier", async (c) => {
+    const cwdCli = path4.join(process.cwd(), "packages", "cli", "dist", "index.js");
+    const cliPath = fs4.existsSync(cwdCli) ? cwdCli : null;
+    if (!cliPath) return c.json({ tier: "unknown", output: "CLI not found" });
+    try {
+      const { stdout } = await execFile2(process.execPath, [cliPath, "tier"], {
+        cwd: process.cwd(),
+        timeout: 15e3,
+        env: { ...process.env, NODE_OPTIONS: "--no-deprecation" }
+      });
+      const tierMatch = stdout.match(/(BRONZE|SILVER|GOLD)/i);
+      return c.json({ tier: tierMatch ? tierMatch[1].toLowerCase() : "unknown", output: stdout });
+    } catch (err) {
+      const stdout = err?.stdout || "";
+      const tierMatch = stdout.match(/(BRONZE|SILVER|GOLD)/i);
+      return c.json({ tier: tierMatch ? tierMatch[1].toLowerCase() : "unknown", output: stdout || err.message });
+    }
+  });
+  app.get("/api/agent-instructions", (c) => {
+    const distInstructions = path4.join(process.cwd(), "dist", "AGENT_INSTRUCTIONS.md");
+    const cliInstructions = path4.join(process.cwd(), "packages", "cli", "assets", "AGENT_INSTRUCTIONS.md");
+    const instrPath = fs4.existsSync(distInstructions) ? distInstructions : fs4.existsSync(cliInstructions) ? cliInstructions : null;
+    if (!instrPath) {
+      return c.json({ instructions: null, error: "Agent instructions not found" });
+    }
+    return c.json({ instructions: fs4.readFileSync(instrPath, "utf-8") });
   });
   return app;
 }
@@ -644,7 +867,7 @@ import {
 } from "@runcontext/core";
 import * as fs5 from "fs";
 import * as path5 from "path";
-import { parse as parseYaml2, stringify as stringifyYaml } from "yaml";
+import { parse as parseYaml, stringify as stringifyYaml } from "yaml";
 function authRoutes(rootDir) {
   const app = new Hono6();
   const registry = createDefaultRegistry();
@@ -734,11 +957,17 @@ function authRoutes(rootDir) {
     let config = {};
     if (fs5.existsSync(configPath)) {
       try {
-        config = parseYaml2(fs5.readFileSync(configPath, "utf-8")) ?? {};
+        config = parseYaml(fs5.readFileSync(configPath, "utf-8")) ?? {};
       } catch {
       }
     }
-    config.data_sources = config.data_sources ?? {};
+    const existingSources = config.data_sources ?? {};
+    for (const [key, val] of Object.entries(existingSources)) {
+      if (val && typeof val === "object" && !val.connection && !val.path) {
+        delete existingSources[key];
+      }
+    }
+    config.data_sources = existingSources;
     const sourceName = (database.name || database.database || "default").replace(/[^a-zA-Z0-9_-]/g, "_");
     config.data_sources[sourceName] = { adapter: database.adapter, connection: connStr };
     fs5.writeFileSync(configPath, stringifyYaml(config), "utf-8");
@@ -753,9 +982,9 @@ function authRoutes(rootDir) {
 
 // src/routes/api/suggest-brief.ts
 import { Hono as Hono7 } from "hono";
-import { execFile as execFileCb2 } from "child_process";
-import { promisify as promisify2 } from "util";
-var execFile2 = promisify2(execFileCb2);
+import { execFile as execFileCb3 } from "child_process";
+import { promisify as promisify3 } from "util";
+var execFile3 = promisify3(execFileCb3);
 function suggestBriefRoutes(rootDir) {
   const app = new Hono7();
   app.post("/api/suggest-brief", async (c) => {
@@ -778,7 +1007,7 @@ function suggestBriefRoutes(rootDir) {
     let ownerEmail = "";
     let ownerTeam = "";
     try {
-      const { stdout: name } = await execFile2("git", ["config", "user.name"], {
+      const { stdout: name } = await execFile3("git", ["config", "user.name"], {
         cwd: rootDir,
         timeout: 3e3
       });
@@ -786,7 +1015,7 @@ function suggestBriefRoutes(rootDir) {
     } catch {
     }
     try {
-      const { stdout: email } = await execFile2("git", ["config", "user.email"], {
+      const { stdout: email } = await execFile3("git", ["config", "user.email"], {
         cwd: rootDir,
         timeout: 3e3
       });
@@ -890,26 +1119,38 @@ function createApp(opts) {
   app.get("/setup", (c) => {
     return c.html(setupPageHTML());
   });
+  app.get("/planes", (c) => {
+    return c.html(pageHTML({
+      title: "Semantic Planes",
+      activePage: "planes",
+      contentId: "page-content"
+    }));
+  });
+  app.get("/analytics", (c) => {
+    return c.html(pageHTML({
+      title: "Analytics",
+      activePage: "analytics",
+      contentId: "page-content"
+    }));
+  });
+  app.get("/settings", (c) => {
+    return c.html(pageHTML({
+      title: "Settings",
+      activePage: "settings",
+      contentId: "page-content"
+    }));
+  });
   app.get("/", (c) => c.redirect("/setup"));
   return app;
 }
-function setupPageHTML() {
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>RunContext \u2014 Build Your Data Product</title>
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet" />
-  <link rel="stylesheet" href="/static/uxd.css" />
-  <link rel="stylesheet" href="/static/setup.css" />
-</head>
-<body>
-  <div class="app-shell">
-    <!-- Sidebar -->
-    <aside class="sidebar">
+function sidebarHTML(activePage) {
+  const nav = (page, href, label) => {
+    const isActive = activePage === page;
+    return `<a class="nav-item${isActive ? " active" : ""}" href="${href}">
+          <span>${label}</span>
+        </a>`;
+  };
+  return `<aside class="sidebar">
       <div class="sidebar-brand">
         <svg class="brand-chevron" width="24" height="24" viewBox="0 0 24 24" fill="none">
           <path d="M4 4l8 8-8 8" stroke="#c9a55a" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
@@ -921,42 +1162,22 @@ function setupPageHTML() {
         <span class="brand-badge">Local</span>
       </div>
       <nav class="sidebar-nav">
-        <a class="nav-item active" data-nav="setup">
-          <span>Setup</span>
-        </a>
-        <a class="nav-item locked" data-nav="planes">
-          <span>Semantic Planes</span>
-          <svg class="lock-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
-            <path d="M7 11V7a5 5 0 0110 0v4"/>
-          </svg>
-        </a>
-        <a class="nav-item locked" data-nav="analytics">
-          <span>Analytics</span>
-          <svg class="lock-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
-            <path d="M7 11V7a5 5 0 0110 0v4"/>
-          </svg>
-        </a>
-        <a class="nav-item" data-nav="mcp">
+        ${nav("setup", "/setup", "Setup")}
+        ${nav("planes", "/planes", "Semantic Planes")}
+        ${nav("analytics", "/analytics", "Analytics")}
+        <div class="nav-item mcp-toggle" id="mcp-nav-toggle" title="Click to start/stop MCP server" style="cursor:pointer">
           <span class="status-dot" id="mcp-status-dot"></span>
           <span>MCP Server</span>
           <span class="nav-detail" id="mcp-status-text">checking...</span>
-        </a>
-        <a class="nav-item locked" data-nav="settings">
-          <span>Settings</span>
-          <svg class="lock-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
-            <path d="M7 11V7a5 5 0 0110 0v4"/>
-          </svg>
-        </a>
+        </div>
+        ${nav("settings", "/settings", "Settings")}
       </nav>
       <div class="sidebar-status">
         <div class="status-row">
           <span class="status-dot" id="db-status-dot"></span>
           <span id="db-status-text">No database</span>
         </div>
-        <div class="status-row">
+        <div class="status-row mcp-toggle" id="mcp-toggle-row" title="Click to start/stop MCP server">
           <span class="status-dot" id="mcp-server-dot"></span>
           <span id="mcp-server-text">MCP stopped</span>
         </div>
@@ -964,36 +1185,80 @@ function setupPageHTML() {
           <span class="tier-badge" id="tier-badge">Free</span>
         </div>
       </div>
-    </aside>
+      <div class="sidebar-security">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--rc-color-status-success)" stroke-width="2">
+          <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
+        </svg>
+        <span>Local-only processing</span>
+      </div>
+    </aside>`;
+}
+function footerHTML() {
+  return `<footer class="app-footer">
+      <span>Powered by <a href="https://runcontext.dev" target="_blank" rel="noopener">RunContext</a></span>
+      <span class="footer-links">
+        <a href="https://docs.runcontext.dev" target="_blank" rel="noopener">Docs</a>
+        <span class="footer-sep">&middot;</span>
+        <a href="https://runcontext.dev/pricing" target="_blank" rel="noopener">Cloud</a>
+        <span class="footer-sep">&middot;</span>
+        <a href="https://github.com/Quiet-Victory-Labs/runcontext" target="_blank" rel="noopener">GitHub</a>
+      </span>
+    </footer>`;
+}
+function pageHTML(opts) {
+  const isSetup = opts.activePage === "setup";
+  const headerContent = isSetup ? `<div class="header-stepper" id="stepper"></div>` : `<h1 class="header-title">${opts.title}</h1>`;
+  const lockedTooltip = isSetup ? `
+  <!-- Locked tooltip (hidden by default) -->
+  <div class="locked-tooltip" id="locked-tooltip" style="display:none">
+    <p><strong>Cloud Feature</strong></p>
+    <p>This feature is available on RunContext Cloud with team collaboration, hosted endpoints, and analytics.</p>
+    <a href="https://runcontext.dev/pricing" target="_blank" rel="noopener">View plans \u2192</a>
+  </div>` : "";
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>RunContext \u2014 ${opts.title}</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="/static/uxd.css" />
+  <link rel="stylesheet" href="/static/setup.css" />
+</head>
+<body data-page="${opts.activePage}">
+  <div class="app-shell">
+    <!-- Sidebar -->
+    ${sidebarHTML(opts.activePage)}
 
     <!-- Header -->
     <header class="app-header">
-      <div class="header-stepper" id="stepper"></div>
+      ${headerContent}
     </header>
 
     <!-- Main Content -->
     <main class="main-content">
-      <div class="content-wrapper" id="wizard-content"></div>
+      <div class="content-wrapper" id="${opts.contentId}"></div>
     </main>
 
     <!-- Footer -->
-    <footer class="app-footer">
-      <span>Powered by RunContext &middot; Open Semantic Interchange</span>
-    </footer>
+    ${footerHTML()}
   </div>
-
-  <!-- Locked tooltip (hidden by default) -->
-  <div class="locked-tooltip" id="locked-tooltip" style="display:none">
-    <p>Available on RunContext Cloud</p>
-    <a href="https://runcontext.dev/pricing" target="_blank" rel="noopener">Learn more</a>
-  </div>
-
-  <script src="/static/setup.js"></script>
+${lockedTooltip}
+  <script src="/static/app.js"></script>
 </body>
 </html>`;
 }
+function setupPageHTML() {
+  return pageHTML({
+    title: "Build Your Context Layer",
+    activePage: "setup",
+    contentId: "wizard-content"
+  });
+}
 function startUIServer(opts) {
-  return new Promise((resolve2, reject) => {
+  return new Promise((resolve3, reject) => {
     const app = createApp(opts);
     const server = serve({
       fetch: app.fetch,
@@ -1001,7 +1266,7 @@ function startUIServer(opts) {
       hostname: opts.host
     }, (info) => {
       console.log(`RunContext UI running at http://${opts.host === "0.0.0.0" ? "localhost" : opts.host}:${info.port}/setup`);
-      resolve2();
+      resolve3();
     });
     attachWebSocket(server);
     server.on("error", reject);