@context-os/cli 1.0.1 → 1.6.1

package/dist/commands/dashboard.js

@@ -0,0 +1,68 @@
+import chalk from "chalk";
+import http from "node:http";
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { exec } from "node:child_process";
+import { samplingService, knowledgeGraphService } from "@context-os/core";
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+export function dashboardCommand(program) {
+    program
+        .command("dashboard")
+        .description("Launch the Visual Control Center (Web UI)")
+        .option("-p, --port <number>", "Port to run the dashboard on", "3010")
+        .action(async (options) => {
+        const port = parseInt(options.port);
+        // Determine the template path
+        // In dev: src/commands/../../templates/dashboard/index.html
+        // In dist: dist/commands/../../templates/dashboard/index.html
+        const templatePath = path.resolve(__dirname, "../../templates/dashboard/index.html");
+        if (!fs.existsSync(templatePath)) {
+            // Fallback if structure varies
+            const fallbackPath = path.resolve(process.cwd(), "templates/dashboard/index.html");
+            if (!fs.existsSync(fallbackPath)) {
+                console.error(chalk.red(`\n❌ Error: Dashboard template not found at ${templatePath}`));
+                process.exit(1);
+            }
+        }
+        const server = http.createServer(async (req, res) => {
+            const url = req.url || "/";
+            // API endpoints
+            if (url === "/api/pulse") {
+                const pulse = await samplingService.getPulse();
+                res.writeHead(200, { "Content-Type": "application/json", "Access-Control-Allow-Origin": "*" });
+                return res.end(JSON.stringify(pulse));
+            }
+            if (url === "/api/graph") {
+                const graph = await knowledgeGraphService.getGraph();
+                res.writeHead(200, { "Content-Type": "application/json", "Access-Control-Allow-Origin": "*" });
+                return res.end(JSON.stringify(graph));
+            }
+            // Static Assets (Dashboard UI)
+            if (url === "/" || url === "/index.html") {
+                try {
+                    const html = fs.readFileSync(templatePath, "utf8");
+                    res.writeHead(200, { "Content-Type": "text/html" });
+                    return res.end(html);
+                }
+                catch (e) {
+                    res.writeHead(500);
+                    return res.end("Internal Server Error Loading Dashboard");
+                }
+            }
+            res.writeHead(404);
+            res.end("Not Found");
+        });
+        server.listen(port, () => {
+            const dashboardUrl = `http://localhost:${port}`;
+            console.log(chalk.bold.cyan("\n🚀 ContextOS Visual Control Center"));
+            console.log(chalk.dim("------------------------------------------"));
+            console.log(chalk.green(`  URL:    ${dashboardUrl}`));
+            console.log(chalk.dim("  Status: Monitoring Workspace..."));
+            console.log(chalk.dim("  Cmd:    Press Ctrl+C to stop server\n"));
+            // Launch Browser
+            const start = (process.platform === 'darwin' ? 'open' : process.platform === 'win32' ? 'start' : 'xdg-open');
+            exec(`${start} ${dashboardUrl}`);
+        });
+    });
+}

package/dist/commands/graph.js

@@ -0,0 +1,41 @@
+import chalk from "chalk";
+import ora from "ora";
+import { knowledgeGraphService } from "@context-os/core";
+export function graphCommand(program) {
+    program
+        .command("graph")
+        .description("Visualize the workspace knowledge graph (explicit + semantic links)")
+        .action(async () => {
+        const spinner = ora(`Building workspace graph...`).start();
+        try {
+            const graph = await knowledgeGraphService.getGraph();
+            if (graph.nodes.length === 0) {
+                spinner.info(chalk.yellow("Graph is empty. Index some files first."));
+                return;
+            }
+            spinner.succeed(chalk.green(`Federated Knowledge Graph (${graph.nodes.length} nodes, ${graph.edges.length} edges):`));
+            console.log("");
+            // 1. Group by entity type
+            const docs = graph.nodes.filter(n => n.type === 'document');
+            const tags = graph.nodes.filter(n => n.type === 'tag');
+            console.log(chalk.bold.blue("--- Documents ---"));
+            docs.forEach(doc => {
+                const connections = graph.edges.filter(e => e.source === doc.id || e.target === doc.id);
+                const semanticCount = connections.filter(e => e.type === 'semantic').length;
+                const linkCount = connections.length - semanticCount;
+                console.log(`${chalk.cyan(doc.id)} ${chalk.gray(`(${linkCount} links, ${semanticCount} semantic bridges)`)}`);
+            });
+            console.log("");
+            console.log(chalk.bold.yellow("--- Top Themes (#tags) ---"));
+            tags.forEach(tag => {
+                const usage = graph.edges.filter(e => e.target === tag.id).length;
+                console.log(`${chalk.yellow(tag.label)} ${chalk.gray(`(used in ${usage} files)`)}`);
+            });
+            console.log("");
+            console.log(chalk.dim("Run `context search <query>` to explore semantic neighborhoods."));
+        }
+        catch (error) {
+            spinner.fail(chalk.red(`Graph generation failed: ${error.message}`));
+        }
+    });
+}

package/dist/commands/index-cmd.js

@@ -0,0 +1,18 @@
+import chalk from "chalk";
+import ora from "ora";
+import { globalIndexer } from "@context-os/core";
+export function indexCommand(program) {
+    program
+        .command("index")
+        .description("Rebuild the workspace intelligence index")
+        .action(async () => {
+        const spinner = ora("Indexing workspace context...").start();
+        try {
+            const index = await globalIndexer.reindex();
+            spinner.succeed(chalk.green(`Index rebuilt: ${index.records.length} files processed.`));
+        }
+        catch (error) {
+            spinner.fail(chalk.red(`Indexing failed: ${error.message}`));
+        }
+    });
+}

package/dist/commands/search.js

@@ -1,32 +1,40 @@
 import chalk from "chalk";
 import ora from "ora";
-import { exec } from "child_process";
-import { promisify } from "util";
-const execAsync = promisify(exec);
+import { intelligenceService } from "@context-os/core";
 export function searchCommand(program) {
     program
         .command("search")
-        .description("Search across the workspace")
+        .description("Search across the workspace (using metadata index)")
         .argument("<query>", "Search query string")
-        .action(async (query) => {
+        .option("--deep", "Force deep scan using grep")
+        .action(async (query, options) => {
         const spinner = ora(`Searching for ${chalk.cyan(query)}...`).start();
         try {
-            const workspaceRoot = process.cwd();
-            // Use grep -rnI as a robust default
-            const command = `grep -rnIE "${query}" . | head -n 20`;
-            const { stdout } = await execAsync(command, { cwd: workspaceRoot });
-            if (!stdout) {
+            const results = await intelligenceService.search(query, { deep: options.deep });
+            if (results.length === 0) {
                 spinner.info(chalk.yellow("No results found."));
                 return;
             }
-            spinner.succeed(chalk.green("Search results:"));
-            console.log(`\n${stdout}`);
+            spinner.succeed(chalk.green(`Found ${results.length} matches:`));
+            console.log("");
+            results.forEach(res => {
+                let typeTag = chalk.cyan('[Index]');
+                if (res.type === 'deep')
+                    typeTag = chalk.magenta('[Deep]');
+                if (res.type === 'semantic')
+                    typeTag = chalk.bold.green('[Semantic]');
+                if (res.type === 'hybrid')
+                    typeTag = chalk.bold.yellow('[Hybrid]');
+                const scoreDisplay = res.score ? chalk.green(` (${res.score.toFixed(2)})`) : '';
+                console.log(`${typeTag}${scoreDisplay} ${chalk.blue(res.path)}`);
+                if (res.title && res.title !== 'Deep Scan Result') {
+                    console.log(`${chalk.gray(res.title)} ${res.tags.length ? chalk.yellow(`[${res.tags.join(', ')}]`) : ''}`);
+                }
+                console.log(`${chalk.white(res.excerpt)}...`);
+                console.log(chalk.gray('---'));
+            });
         }
         catch (error) {
-            if (error.code === 1) {
-                spinner.info(chalk.yellow("No results found."));
-                return;
-            }
             spinner.fail(chalk.red(`Search failed: ${error.message}`));
         }
     });

package/dist/commands/sync.js

@@ -1,39 +1,21 @@
 import chalk from "chalk";
 import ora from "ora";
-import fs from "fs-extra";
-import path from "path";
+import { workspaceService } from "@context-os/core";
 export function syncCommand(program) {
     program
         .command("sync")
         .description("Sync memory, changelog, and daily logs")
         .argument("[project]", "Project name to sync context for")
-        .action(async (project) => {
+        .option("--force", "Force full re-index of the workspace")
+        .action(async (project, options) => {
         const spinner = ora("Syncing workspace context...").start();
         try {
-            const workspaceRoot = process.cwd();
-            const date = new Date().toISOString().split("T")[0];
-            // Simulating sync logic: ensuring memory.md has a "Last Sync" timestamp
-            if (project) {
-                const projectDir = path.join(workspaceRoot, "projects", project);
-                const memoryPath = path.join(projectDir, "memory.md");
-                if (await fs.pathExists(memoryPath)) {
-                    let content = await fs.readFile(memoryPath, "utf-8");
-                    const syncMark = `\n> [!NOTE]\n> Last Sync: ${date} ${new Date().toLocaleTimeString()}\n`;
-                    if (!content.includes("Last Sync:")) {
-                        await fs.appendFile(memoryPath, syncMark);
-                    }
-                    else {
-                        content = content.replace(/> \[!NOTE\]\n> Last Sync: .*/, syncMark.trim());
-                        await fs.writeFile(memoryPath, content);
-                    }
-                    spinner.succeed(chalk.green(`Synced memory for ${project}`));
-                }
-                else {
-                    spinner.fail(chalk.red(`Memory file not found for ${project}`));
-                }
+            const result = await workspaceService.sync(project, { force: options.force });
+            if (result.success) {
+                spinner.succeed(chalk.green(result.message));
             }
             else {
-                spinner.succeed(chalk.green("Global workspace sync complete."));
+                spinner.fail(chalk.red(result.message));
             }
         }
         catch (error) {

package/dist/commands/validate.js

@@ -1,14 +1,6 @@
 import chalk from "chalk";
 import ora from "ora";
-import fs from "fs-extra";
-import path from "path";
-import AjvModule from "ajv";
-import addFormatsModule from "ajv-formats";
-import fm from "front-matter";
-const Ajv = AjvModule.default || AjvModule;
-const addFormats = addFormatsModule.default || addFormatsModule;
-const ajv = new Ajv({ allErrors: true });
-addFormats(ajv);
+import { validationService } from "@context-os/core";
 export function validateCommand(program) {
     program
         .command("validate")
@@ -16,80 +8,19 @@ export function validateCommand(program) {
         .action(async () => {
         const spinner = ora("Validating workspace integrity...").start();
         try {
-            const findWorkspaceRoot = () => {
-                let current = process.cwd();
-                const root = "/";
-                while (current !== root) {
-                    if (fs.existsSync(path.join(current, "root", "soul.md"))) {
-                        return current;
-                    }
-                    current = path.dirname(current);
-                }
-                return process.cwd();
-            };
-            const workspaceRoot = findWorkspaceRoot();
-            const schemasDir = path.join(workspaceRoot, "schemas");
-            const projectsDir = path.join(workspaceRoot, "projects");
-            const starterDir = path.join(workspaceRoot, "workspace-starter");
-            if (!(await fs.pathExists(schemasDir))) {
-                spinner.fail(chalk.red(`Schemas directory not found at ${schemasDir}`));
-                process.exit(1);
-            }
-            const validFiles = [
-                { name: "SOUL.md", schema: "soul.schema.json", required: true },
-                { name: "CONTEXT.md", schema: "context.schema.json", required: true },
-                { name: "memory.md", schema: "memory.schema.json" },
-                { name: "decisions.md", schema: "decision.schema.json" }
-            ];
-            let totalIssues = 0;
-            // Find all project-like directories (projects/* and workspace-starter)
-            const projectPaths = [];
-            if (await fs.pathExists(projectsDir)) {
-                const projects = await fs.readdir(projectsDir);
-                for (const p of projects) {
-                    const fullPath = path.join(projectsDir, p);
-                    if ((await fs.stat(fullPath)).isDirectory()) {
-                        projectPaths.push(fullPath);
-                    }
-                }
-            }
-            if (await fs.pathExists(starterDir)) {
-                projectPaths.push(starterDir);
-            }
-            for (const projectPath of projectPaths) {
-                const projectName = path.basename(projectPath);
-                const filesInDir = await fs.readdir(projectPath);
-                for (const config of validFiles) {
-                    // Case-insensitive search
-                    const fileName = filesInDir.find(f => f.toLowerCase() === config.name.toLowerCase());
-                    if (!fileName) {
-                        if (config.required) {
-                            totalIssues++;
-                            console.log(chalk.red(`\n❌ Missing required file in ${projectName}: ${config.name}`));
-                        }
-                        continue;
-                    }
-                    const filePath = path.join(projectPath, fileName);
-                    const schemaPath = path.join(schemasDir, config.schema);
-                    const schema = await fs.readJson(schemaPath);
-                    const validate = ajv.compile(schema);
-                    const content = await fs.readFile(filePath, "utf-8");
-                    const data = extractMetadata(content);
-                    const valid = validate(data);
-                    if (!valid) {
-                        totalIssues++;
-                        console.log(chalk.red(`\n❌ Schema error in ${projectName}/${fileName}:`));
-                        validate.errors?.forEach((err) => {
-                            console.log(chalk.yellow(`   - ${err.instancePath || 'root'} ${err.message}`));
-                        });
-                    }
-                }
-            }
-            if (totalIssues === 0) {
+            const result = await validationService.validateWorkspace();
+            if (result.valid) {
                 spinner.succeed(chalk.green("Workspace validation successful! All files conform to schema."));
             }
             else {
-                spinner.fail(chalk.red(`Workspace validation failed with ${totalIssues} issues.`));
+                spinner.fail(chalk.red(`Workspace validation failed with ${result.issues.length} issues.`));
+                console.log("");
+                result.issues.forEach(issue => {
+                    console.log(chalk.red(`\n❌ ${issue.message} in ${issue.project}/${issue.file}`));
+                    if (issue.details) {
+                        // Optional: console.log(chalk.yellow(`   - detail: ${JSON.stringify(issue.details)}`));
+                    }
+                });
                 process.exit(1);
             }
         }
@@ -99,38 +30,3 @@ export function validateCommand(program) {
         }
     });
 }
-/**
- * Robustly extract metadata from a markdown file.
- * Prioritizes Frontmatter, falls back to Section mapping.
- */
-function extractMetadata(content) {
-    let data = {};
-    try {
-        const parse = fm.default || fm;
-        if (content.trim().startsWith("---")) {
-            const parsed = parse(content);
-            data = parsed.attributes || {};
-        }
-    }
-    catch (e) {
-        console.error(chalk.yellow(`   ! Frontmatter parse failed, falling back to sections.`));
-    }
-    // SUPPLEMENT with section parsing if frontmatter is missing fields
-    const sections = content.split(/^## /m).slice(1);
-    sections.forEach(s => {
-        const lines = s.split("\n");
-        const title = lines[0].trim();
-        const body = lines.slice(1).join("\n").trim();
-        if (!data[title] || (Array.isArray(data[title]) && data[title].length === 0)) {
-            if (["Core Principles", "Behavioral Rules", "Goals", "Capabilities", "Constraints", "Tags", "Active Tasks", "Backlog"].includes(title)) {
-                data[title] = body.split("\n")
-                    .map(l => l.replace(/^[-*]\s*/, "").trim())
-                    .filter(l => l.length > 0);
-            }
-            else {
-                data[title] = body;
-            }
-        }
-    });
-    return data;
-}

package/dist/commands/watch.js

@@ -0,0 +1,38 @@
+import chalk from "chalk";
+import ora from "ora";
+import { watchService, globalIndexer, samplingService } from "@context-os/core";
+export function watchCommand(program) {
+    program
+        .command("watch")
+        .description("Start real-time workspace monitoring and intelligence sync")
+        .action(async () => {
+        console.log(chalk.bold.cyan("\n📡 ContextOS Intelligence Monitor v1.5.0"));
+        console.log(chalk.dim("Press Ctrl+C to stop monitoring\n"));
+        const spinner = ora("Initializing workspace sweep...").start();
+        try {
+            // 1. Initial Incremental Sweep (as approved in plan)
+            await globalIndexer.reindex();
+            spinner.succeed("Initial sweep complete. Workspace is synchronized.");
+            // 2. Start Watch Service
+            watchService.start();
+            const pulse = await samplingService.getPulse();
+            console.log(chalk.green(`\n✅ Intelligence Layer Active`));
+            console.log(chalk.dim(`   - Health Score: ${pulse.healthScore}%`));
+            console.log(chalk.dim(`   - Nodes Mapped: ${pulse.recentChanges.length}+`));
+            console.log("");
+            const statusSpinner = ora("Monitoring for changes...").start();
+            // 3. Handle graceful shutdown
+            process.on("SIGINT", () => {
+                statusSpinner.stop();
+                watchService.stop();
+                console.log(chalk.yellow("\n👋 Watch service stopped. Workspace remains indexed."));
+                process.exit(0);
+            });
+        }
+        catch (error) {
+            spinner.fail("Failed to start watch service.");
+            console.error(chalk.red(error));
+            process.exit(1);
+        }
+    });
+}

package/dist/index.js

@@ -14,11 +14,15 @@ import { healthCommand } from "./commands/health.js";
 import { extractCommand } from "./commands/extract.js";
 import { tagCommand } from "./commands/tag.js";
 import { validateCommand } from "./commands/validate.js";
+import { indexCommand } from "./commands/index-cmd.js";
+import { graphCommand } from "./commands/graph.js";
+import { watchCommand } from "./commands/watch.js";
+import { dashboardCommand } from "./commands/dashboard.js";
 const program = new Command();
 program
     .name("workspace")
     .description("ContextOS Developer Interface Layer")
-    .version("1.0.1");
+    .version("1.1.0");
 // Register Commands
 initCommand(program);
 todayCommand(program);
@@ -34,6 +38,10 @@ healthCommand(program);
 extractCommand(program);
 tagCommand(program);
 validateCommand(program);
+indexCommand(program);
+graphCommand(program);
+watchCommand(program);
+dashboardCommand(program);
 program.parse(process.argv);
 if (!process.argv.slice(2).length) {
     program.outputHelp();

package/dist/tests/smoke.test.js

@@ -21,8 +21,23 @@ describe("CLI Experience Layer (Smoke Tests)", () => {
             assert.ok(output.includes(cmd));
         });
     });
-    it("should report version 1.0.1", () => {
+    it("should report version 1.1.0", () => {
         const output = execSync(`node ${cliPath} --version`).toString();
-        assert.strictEqual(output.trim(), "1.0.1");
+        assert.strictEqual(output.trim(), "1.1.0");
+    });
+    describe("Functional Commands", () => {
+        it("should perform a workspace sync", () => {
+            const output = execSync(`node ${cliPath} sync 2>&1`).toString();
+            assert.ok(output.includes("Workspace indexed"), "Output should contain success message");
+        });
+        it("should search for indexed content", () => {
+            const output = execSync(`node ${cliPath} search "ContextOS" 2>&1`).toString();
+            assert.ok(output.includes("Found"), "Output should list search results");
+            assert.ok(output.includes("ContextOS"), "Output should contain 'ContextOS'");
+        });
+        it("should validate the workspace root", () => {
+            const output = execSync(`node ${cliPath} validate 2>&1`).toString();
+            assert.ok(output.includes("successful"), "Output should contain validation report");
+        });
     });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@context-os/cli",
-  "version": "1.0.1",
+  "version": "1.6.1",
   "description": "ContextOS Developer Interface Layer",
   "keywords": [
     "context-os",
@@ -26,10 +26,12 @@
     "node": ">=18"
   },
   "scripts": {
-    "build": "tsc && node ../scripts/sync-templates.js",
+    "build": "tsc",
+    "postbuild": "node ../scripts/sync-templates.js",
     "watch": "tsc -w",
     "start": "node dist/index.js",
-    "test": "npm run build && mocha dist/tests/**/*.test.js"
+    "test": "mocha dist/tests/**/*.test.js",
+    "validate": "node dist/index.js validate"
   },
   "dependencies": {
     "ajv": "^8.18.0",
@@ -40,7 +42,7 @@
     "front-matter": "^4.0.2",
     "fs-extra": "^11.2.0",
     "ora": "^8.0.1",
-    "@context-os/core": "1.0.1"
+    "@context-os/core": "1.6.1"
   },
   "devDependencies": {
     "@types/chai": "^5.2.3",

package/templates/dashboard/index.html

@@ -0,0 +1,454 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ContextOS | Visual Control Center</title>
+    <!-- Premium CDNs -->
+    <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=Inter:wght@300;400;600&family=Space+Grotesk:wght@300;500;700&display=swap" rel="stylesheet">
+    <script src="https://unpkg.com/3d-force-graph"></script>
+    <script src="https://unpkg.com/force-graph"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <style>
+        :root {
+            --bg: #0c1324;
+            --surface: rgba(12, 19, 36, 0.6);
+            --surface-bright: rgba(25, 31, 49, 0.8);
+            --primary: #00f0ff;
+            --secondary: #a855f7;
+            --text: #dce1fb;
+            --text-dim: #849495;
+            --accent: #ff0055;
+            --glow: 0 0 20px rgba(0, 240, 255, 0.3);
+            --font-display: 'Space Grotesk', sans-serif;
+            --font-body: 'Inter', sans-serif;
+        }
+
+        body, html {
+            margin: 0;
+            padding: 0;
+            width: 100%;
+            height: 100%;
+            background: var(--bg);
+            color: var(--text);
+            font-family: var(--font-body);
+            overflow: hidden;
+            background-image: 
+                radial-gradient(circle at 50% -20%, #1a2a44 0%, transparent 50%),
+                radial-gradient(circle at -10% 50%, #151b2d 0%, transparent 40%);
+        }
+
+        /* Scanline Effect */
+        body::before {
+            content: " ";
+            display: block;
+            position: absolute;
+            top: 0; left: 0; bottom: 0; right: 0;
+            background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
+            z-index: 100;
+            background-size: 100% 2px, 3px 100%;
+            pointer-events: none;
+            opacity: 0.15;
+        }
+
+        /* Glassmorphic UI Overlay */
+        #ui-layer {
+            position: absolute;
+            top: 0; left: 0; width: 100%; height: 100%;
+            pointer-events: none;
+            z-index: 10;
+            display: grid;
+            grid-template-areas: 
+                "header header header"
+                "sidebar content inspector"
+                "footer footer footer";
+            grid-template-rows: auto 1fr auto;
+            grid-template-columns: 320px 1fr 320px;
+            padding: 24px;
+            box-sizing: border-box;
+            gap: 20px;
+        }
+
+        .hud-card {
+            background: var(--surface);
+            backdrop-filter: blur(20px);
+            border: 1px solid rgba(132, 148, 149, 0.15);
+            border-radius: 12px;
+            padding: 20px;
+            pointer-events: auto;
+            box-shadow: 0 8px 32px rgba(0,0,0,0.4);
+            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+        }
+
+        .hud-card:hover {
+            border-color: rgba(0, 240, 255, 0.4);
+            background: var(--surface-bright);
+            transform: translateY(-2px);
+        }
+
+        header {
+            grid-area: header;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        #brand h1 {
+            font-family: var(--font-display);
+            margin: 0;
+            font-size: 24px;
+            font-weight: 700;
+            letter-spacing: 3px;
+            text-transform: uppercase;
+            color: var(--primary);
+            text-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
+        }
+
+        .health-gauge {
+            display: flex;
+            align-items: center;
+            gap: 20px;
+        }
+
+        /* Sidebar & Inspector */
+        #sidebar { grid-area: sidebar; display: flex; flex-direction: column; gap: 20px; }
+        #inspector { 
+            grid-area: inspector; 
+            display: flex; 
+            flex-direction: column; 
+            gap: 20px; 
+            transform: translateX(350px);
+            transition: transform 0.5s ease;
+        }
+        #inspector.active { transform: translateX(0); }
+
+        .stat-label {
+            font-family: var(--font-display);
+            font-size: 11px;
+            text-transform: uppercase;
+            color: var(--primary);
+            letter-spacing: 2px;
+            margin-bottom: 15px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            opacity: 0.8;
+        }
+
+        .tag-pill {
+            display: inline-block;
+            padding: 5px 12px;
+            background: rgba(168, 85, 247, 0.1);
+            border: 1px solid rgba(168, 85, 247, 0.3);
+            border-radius: 20px;
+            font-size: 11px;
+            margin: 0 6px 6px 0;
+            color: #d8b4ff;
+            cursor: pointer;
+        }
+
+        .tag-pill:hover { background: rgba(168, 85, 247, 0.3); }
+
+        /* Bottom Status Bar */
+        footer {
+            grid-area: footer;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .ticker-text {
+            font-family: var(--font-display);
+            font-size: 10px;
+            color: var(--primary);
+            white-space: nowrap;
+            overflow: hidden;
+            width: 300px;
+            letter-spacing: 1px;
+        }
+
+        /* 3D Graph Container */
+        #graph-container {
+            position: absolute;
+            top: 0; left: 0; width: 100%; height: 100%;
+            z-index: 1;
+        }
+
+        .node-tooltip {
+            background: rgba(12, 19, 36, 0.95);
+            border: 1px solid var(--primary);
+            padding: 12px;
+            border-radius: 8px;
+            backdrop-filter: blur(10px);
+            font-family: var(--font-body);
+            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+        }
+
+        .pulse-dot {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: var(--primary);
+            box-shadow: 0 0 10px var(--primary);
+            animation: pulse 2s infinite;
+        }
+
+        @keyframes pulse {
+            0% { opacity: 1; transform: scale(1); }
+            50% { opacity: 0.5; transform: scale(0.8); }
+            100% { opacity: 1; transform: scale(1); }
+        }
+    </style>
+</head>
+<body>
+    <div id="graph-container"></div>
+
+    <div id="ui-layer">
+        <header>
+            <div class="hud-card" id="brand">
+                <i data-lucide="brain-circuit" style="color: var(--primary);"></i>
+                <div>
+                    <h1>ContextOS</h1>
+                    <div style="font-size: 10px; color: var(--text-dim); letter-spacing: 1px;">Spatial Intelligence Protocol</div>
+                </div>
+            </div>
+
+            <div class="hud-card health-gauge">
+                <div style="text-align: right;">
+                    <div class="stat-label" style="margin:0">Workspace Stability</div>
+                    <div style="font-size: 18px; font-weight: 700; color: var(--primary); font-family: var(--font-display);" id="health-text">--%</div>
+                </div>
+                <div id="health-ring" style="width:40px; height:40px; border-width: 2px;">
+                   <div id="health-value" style="font-size: 12px;">--</div>
+                </div>
+            </div>
+        </header>
+
+        <aside id="sidebar">
+            <div class="hud-card">
+                <div class="stat-label"><i data-lucide="zap" size="14"></i> Trending Context</div>
+                <div id="tag-container"></div>
+            </div>
+
+            <div class="hud-card" style="flex: 1; overflow: hidden; display: flex; flex-direction: column;">
+                <div class="stat-label"><i data-lucide="radio" size="14"></i> Live Activity</div>
+                <div id="activity-list" style="flex:1; overflow-y: auto; padding-right: 8px;"></div>
+            </div>
+        </aside>
+
+        <section id="inspector" class="hud-card">
+            <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px;">
+                <div class="stat-label" style="margin:0"><i data-lucide="info" size="14"></i> Node Inspector</div>
+                <button onclick="closeInspector()" style="background: none; border: none; color: var(--text-dim); cursor: pointer;"><i data-lucide="x" size="16"></i></button>
+            </div>
+            
+            <div id="inspector-content">
+                <div style="text-align: center; padding: 40px 20px; opacity: 0.4;">
+                    <i data-lucide="mouse-pointer-2" size="32" style="margin-bottom: 16px;"></i>
+                    <p style="font-size: 12px;">Select an entity to reveal its spatial soul</p>
+                </div>
+            </div>
+        </section>
+
+        <footer>
+            <div class="hud-card" style="display: flex; align-items: center; gap: 15px; padding: 8px 16px;">
+                <div class="pulse-dot"></div>
+                <div class="ticker-text" id="system-ticker">INITIALIZING AETHER CORE... READY.</div>
+                <span id="timestamp" style="font-family: var(--font-display); font-size: 12px;">--:--:--</span>
+            </div>
+            
+            <div class="hud-card" style="padding: 8px 16px; font-family: var(--font-display); letter-spacing: 1px; font-size: 10px;">
+                DECK: <span style="color: var(--primary)">V1.6.1-AETHER</span>
+            </div>
+        </footer>
+    </div>
+
+    <script>
+        lucide.createIcons();
+
+        let Graph;
+        let selectedNode = null;
+        
+        async function init() {
+            console.log("Initializing Spatial Engine...");
+            const container = document.getElementById('graph-container');
+            
+            try {
+                if (window.ForceGraph3D) {
+                    Graph = ForceGraph3D()(container)
+                        .backgroundColor('rgba(0,0,0,0)') // Use CSS background
+                        .showNavInfo(false)
+                        .nodeLabel(null) // Custom tooltips instead
+                        .nodeAutoColorBy('type')
+                        .linkWidth(1)
+                        .linkColor(() => 'rgba(255,255,255,0.1)')
+                        .linkDirectionalParticles(2)
+                        .linkDirectionalParticleSpeed(d => (d.weight || 1) * 0.005)
+                        .linkDirectionalParticleWidth(2)
+                        .onNodeClick(node => inspectNode(node))
+                        .onBackgroundClick(() => closeInspector());
+
+                    // Aether Custom Geometries
+                    Graph.nodeThreeObject(node => {
+                        let geometry;
+                        let color = node.type === 'tag' ? '#a855f7' : '#00f0ff';
+                        
+                        if (node.type === 'tag') {
+                            geometry = new THREE.TetrahedronGeometry(8);
+                        } else if (node.type === 'person') {
+                            geometry = new THREE.OctahedronGeometry(10);
+                            color = '#ffcc00';
+                        } else {
+                            geometry = new THREE.SphereGeometry(12, 16, 16);
+                        }
+
+                        const material = new THREE.MeshPhongMaterial({
+                            color: color,
+                            transparent: true,
+                            opacity: 0.9,
+                            shininess: 100,
+                            emissive: color,
+                            emissiveIntensity: 0.5
+                        });
+                        
+                        return new THREE.Mesh(geometry, material);
+                    });
+
+                    // Lighting & Atmosphere
+                    const scene = Graph.scene();
+                    const ambient = new THREE.AmbientLight(0xffffff, 0.4);
+                    const point = new THREE.PointLight(0x00f0ff, 1, 500);
+                    point.position.set(100, 100, 100);
+                    scene.add(ambient);
+                    scene.add(point);
+
+                    // Auto-Orbit
+                    let angle = 0;
+                    setInterval(() => {
+                        if (!selectedNode) {
+                            angle += 0.001;
+                            Graph.cameraPosition({
+                                x: 400 * Math.sin(angle),
+                                z: 400 * Math.cos(angle)
+                            });
+                        }
+                    }, 50);
+                }
+            } catch (e) {
+                console.warn("Aether 3D Engine failed, engaging 2D fallback:", e);
+                container.innerHTML = '';
+                Graph = ForceGraph()(container)
+                    .backgroundColor('rgba(0,0,0,0)')
+                    .nodeLabel(node => `<div class="node-tooltip"><b>${node.label}</b><br/>${node.id}</div>`)
+                    .nodeAutoColorBy('type')
+                    .linkDirectionalParticles(2)
+                    .linkDirectionalParticleSpeed(d => (d.weight || 1) * 0.01)
+                    .onNodeClick(node => inspectNode(node));
+            }
+
+            await updateData();
+            setInterval(updateData, 5000);
+        }
+
+        function inspectNode(node) {
+            selectedNode = node;
+            const inspector = document.getElementById('inspector');
+            const content = document.getElementById('inspector-content');
+            
+            inspector.classList.add('active');
+            
+            content.innerHTML = `
+                <div style="padding: 10px;">
+                    <div style="color: var(--primary); font-family: var(--font-display); font-size: 18px; margin-bottom: 5px;">${node.label}</div>
+                    <div style="font-size: 11px; opacity: 0.5; margin-bottom: 20px; font-family: monospace;">${node.id}</div>
+                    
+                    <div class="stat-label" style="font-size: 9px;">Intelligence Metadata</div>
+                    <div class="hud-card" style="margin-bottom: 15px; background: rgba(0,0,0,0.2); padding: 12px;">
+                        <div style="font-size: 12px; line-height: 1.6;">
+                            ${node.metadata?.excerpt || 'Scanning for latent semantic patterns...'}
+                        </div>
+                    </div>
+
+                    <div class="stat-label" style="font-size: 9px;">Entity Classification</div>
+                    <div style="margin-bottom: 20px;">
+                        <span class="tag-pill" style="border-color: var(--primary); color: var(--primary);">Type: ${node.type}</span>
+                        <span class="tag-pill">Access: Federated</span>
+                    </div>
+
+                    <div style="display: flex; gap: 10px;">
+                        <button class="hud-card" style="flex:1; padding: 10px; font-size: 11px; text-transform: uppercase; cursor: pointer;" onclick="copyPath('${node.id}')">
+                            <i data-lucide="copy" size="12"></i> Copy Path
+                        </button>
+                    </div>
+                </div>
+            `;
+            lucide.createIcons();
+            
+            // Focus camera in 3D
+            if (Graph && Graph.cameraPosition) {
+                const distance = 150;
+                const distRatio = 1 + distance/Math.hypot(node.x, node.y, node.z);
+                Graph.cameraPosition(
+                    { x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio },
+                    node,
+                    2000
+                );
+            }
+        }
+
+        function closeInspector() {
+            selectedNode = null;
+            document.getElementById('inspector').classList.remove('active');
+        }
+
+        function copyPath(id) {
+            navigator.clipboard.writeText(id);
+            const ticker = document.getElementById('system-ticker');
+            ticker.textContent = `SYSTEM CLASSIFIER: PATH COPIED [${id}]`;
+            setTimeout(() => { ticker.textContent = "IDLE MONITORS ACTIVE... STANDBY."; }, 3000);
+        }
+
+        async function updateData() {
+            try {
+                const [graphRes, pulseRes] = await Promise.all([
+                    fetch('/api/graph').then(r => r.json()),
+                    fetch('/api/pulse').then(r => r.json())
+                ]);
+
+                Graph.graphData(graphRes);
+
+                document.getElementById('health-text').textContent = `${pulseRes.healthScore}%`;
+                document.getElementById('health-value').textContent = pulseRes.healthScore;
+                document.getElementById('timestamp').textContent = new Date(pulseRes.timestamp).toLocaleTimeString();
+                
+                // Ticker logic
+                if (pulseRes.recentChanges.length > 0) {
+                    document.getElementById('system-ticker').textContent = `PULSE DETECTED: SYNCING [${pulseRes.recentChanges[0]}]`;
+                }
+
+                const tagContainer = document.getElementById('tag-container');
+                tagContainer.innerHTML = pulseRes.topTags.map(tag => 
+                    `<span class="tag-pill">#${tag}</span>`
+                ).join('');
+
+                const activityList = document.getElementById('activity-list');
+                activityList.innerHTML = pulseRes.recentChanges.map(change => 
+                    `<div class="hud-card" style="margin-bottom: 10px; padding: 12px; font-size: 11px; box-shadow: none;">
+                        <div style="color: var(--primary); margin-bottom: 4px; font-family: var(--font-display); font-size: 9px; opacity: 0.6;">RECENT SYNC</div>
+                        <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${change}</div>
+                     </div>`
+                ).join('');
+
+                lucide.createIcons();
+            } catch (e) {
+                console.error("Aether Bridge Failure:", e);
+                document.getElementById('system-ticker').textContent = "ERROR: SPATIAL BRIDGE COLLAPSED. RETRYING...";
+            }
+        }
+
+        init();
+    </script>
+</body>
+</html>