@datasynx/agentic-ai-cartography 0.3.3 → 0.5.0

package/dist/cli.js

@@ -1,10 +1,12 @@
 #!/usr/bin/env node
 import {
+  DOMAIN_COLORS,
+  DOMAIN_PALETTE,
   EDGE_RELATIONSHIPS,
   NODE_TYPES,
   SOPStepSchema,
   defaultConfig
-} from "./chunk-FFNOC6HF.js";
+} from "./chunk-A7FTULDM.js";
 import {
   scanAllBookmarks,
   scanAllHistory
@@ -79,9 +81,21 @@ CREATE TABLE IF NOT EXISTS nodes (
   confidence REAL DEFAULT 0.5,
   metadata TEXT NOT NULL DEFAULT '{}',
   tags TEXT NOT NULL DEFAULT '[]',
+  domain TEXT,
+  sub_domain TEXT,
+  quality_score REAL,
   PRIMARY KEY (id, session_id)
 );
 
+CREATE TABLE IF NOT EXISTS connections (
+  id TEXT PRIMARY KEY,
+  session_id TEXT NOT NULL REFERENCES sessions(id),
+  source_asset_id TEXT NOT NULL,
+  target_asset_id TEXT NOT NULL,
+  type TEXT,
+  created_at TEXT NOT NULL
+);
+
 CREATE TABLE IF NOT EXISTS edges (
   id TEXT PRIMARY KEY,
   session_id TEXT NOT NULL REFERENCES sessions(id),
@@ -156,6 +170,7 @@ CREATE INDEX IF NOT EXISTS idx_edges_session ON edges(session_id);
 CREATE INDEX IF NOT EXISTS idx_events_session ON activity_events(session_id);
 CREATE INDEX IF NOT EXISTS idx_events_task ON activity_events(task_id);
 CREATE INDEX IF NOT EXISTS idx_tasks_session ON tasks(session_id);
+CREATE INDEX IF NOT EXISTS idx_connections_session ON connections(session_id);
 `;
 var CartographyDB = class {
   db;
@@ -171,7 +186,24 @@ var CartographyDB = class {
     const version = this.db.pragma("user_version", { simple: true });
     if (version === 0) {
       this.db.exec(SCHEMA);
-      this.db.pragma("user_version = 1");
+      this.db.pragma("user_version = 2");
+    } else if (version === 1) {
+      const cols = this.db.prepare("PRAGMA table_info(nodes)").all().map((c) => c.name);
+      if (!cols.includes("domain")) this.db.exec("ALTER TABLE nodes ADD COLUMN domain TEXT");
+      if (!cols.includes("sub_domain")) this.db.exec("ALTER TABLE nodes ADD COLUMN sub_domain TEXT");
+      if (!cols.includes("quality_score")) this.db.exec("ALTER TABLE nodes ADD COLUMN quality_score REAL");
+      this.db.exec(`
+        CREATE TABLE IF NOT EXISTS connections (
+          id TEXT PRIMARY KEY,
+          session_id TEXT NOT NULL REFERENCES sessions(id),
+          source_asset_id TEXT NOT NULL,
+          target_asset_id TEXT NOT NULL,
+          type TEXT,
+          created_at TEXT NOT NULL
+        );
+        CREATE INDEX IF NOT EXISTS idx_connections_session ON connections(session_id);
+      `);
+      this.db.pragma("user_version = 2");
     }
   }
   close() {
@@ -214,8 +246,9 @@ var CartographyDB = class {
   upsertNode(sessionId, node, depth = 0) {
     this.db.prepare(`
       INSERT OR REPLACE INTO nodes
-        (id, session_id, type, name, discovered_via, discovered_at, depth, confidence, metadata, tags)
-      VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+        (id, session_id, type, name, discovered_via, discovered_at, depth, confidence, metadata, tags,
+         domain, sub_domain, quality_score)
+      VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
     `).run(
       node.id,
       sessionId,
@@ -226,12 +259,18 @@ var CartographyDB = class {
       depth,
       node.confidence,
       JSON.stringify(node.metadata ?? {}),
-      JSON.stringify(node.tags ?? [])
+      JSON.stringify(node.tags ?? []),
+      node.domain ?? null,
+      node.subDomain ?? null,
+      node.qualityScore ?? null
     );
   }
   getNodes(sessionId) {
     const rows = this.db.prepare("SELECT * FROM nodes WHERE session_id = ?").all(sessionId);
-    return rows.map((r) => ({
+    return rows.map((r) => this.mapNode(r));
+  }
+  mapNode(r) {
+    return {
       id: r["id"],
       sessionId: r["session_id"],
       type: r["type"],
@@ -242,8 +281,11 @@ var CartographyDB = class {
       confidence: r["confidence"],
       metadata: JSON.parse(r["metadata"]),
       tags: JSON.parse(r["tags"]),
-      pathId: r["path_id"]
-    }));
+      pathId: r["path_id"],
+      domain: r["domain"] ?? void 0,
+      subDomain: r["sub_domain"] ?? void 0,
+      qualityScore: r["quality_score"] ?? void 0
+    };
   }
   deleteNode(sessionId, nodeId) {
     this.db.prepare("DELETE FROM nodes WHERE session_id = ? AND id = ?").run(sessionId, nodeId);
@@ -455,6 +497,33 @@ var CartographyDB = class {
       generatedAt: r["generated_at"]
     }));
   }
+  // ── Connections (user-created hex map links) ─────────────────────────────
+  upsertConnection(sessionId, conn) {
+    const existing = this.db.prepare(
+      "SELECT id FROM connections WHERE session_id = ? AND source_asset_id = ? AND target_asset_id = ?"
+    ).get(sessionId, conn.sourceAssetId, conn.targetAssetId);
+    if (existing) return existing.id;
+    const id = crypto.randomUUID();
+    this.db.prepare(`
+      INSERT INTO connections (id, session_id, source_asset_id, target_asset_id, type, created_at)
+      VALUES (?, ?, ?, ?, ?, ?)
+    `).run(id, sessionId, conn.sourceAssetId, conn.targetAssetId, conn.type ?? null, (/* @__PURE__ */ new Date()).toISOString());
+    return id;
+  }
+  getConnections(sessionId) {
+    const rows = this.db.prepare("SELECT * FROM connections WHERE session_id = ?").all(sessionId);
+    return rows.map((r) => ({
+      id: r["id"],
+      sessionId: r["session_id"],
+      sourceAssetId: r["source_asset_id"],
+      targetAssetId: r["target_asset_id"],
+      type: r["type"] ?? void 0,
+      createdAt: r["created_at"]
+    }));
+  }
+  deleteConnection(sessionId, connectionId) {
+    this.db.prepare("DELETE FROM connections WHERE session_id = ? AND id = ?").run(sessionId, connectionId);
+  }
   // ── Approvals ───────────────────────────
   setApproval(pattern, action) {
     this.db.prepare(`
@@ -496,7 +565,10 @@ async function createCartographyTools(db, sessionId, opts = {}) {
       discoveredVia: z.string(),
       confidence: z.number().min(0).max(1),
       metadata: z.record(z.unknown()).optional(),
-      tags: z.array(z.string()).optional()
+      tags: z.array(z.string()).optional(),
+      domain: z.string().optional().describe('Business domain, e.g. "Marketing", "Finance"'),
+      subDomain: z.string().optional().describe('Sub-domain, e.g. "Forecast client orders"'),
+      qualityScore: z.number().min(0).max(100).optional().describe("Data quality score 0\u2013100")
     }, async (args) => {
       const node = {
         id: stripSensitive(args["id"]),
@@ -505,7 +577,10 @@ async function createCartographyTools(db, sessionId, opts = {}) {
         discoveredVia: args["discoveredVia"],
         confidence: args["confidence"],
         metadata: args["metadata"] ?? {},
-        tags: args["tags"] ?? []
+        tags: args["tags"] ?? [],
+        domain: args["domain"],
+        subDomain: args["subDomain"],
+        qualityScore: args["qualityScore"]
       };
       db.upsertNode(sessionId, node);
       return { content: [{ type: "text", text: `\u2713 Node: ${node.id}` }] };
@@ -600,14 +675,14 @@ async function createCartographyTools(db, sessionId, opts = {}) {
     tool("scan_local_databases", "Scan for local database files and running DB servers \u2014 PostgreSQL databases, MySQL, SQLite files from installed apps", {
       deep: z.boolean().default(false).optional().describe("Also search home directory recursively for SQLite/DB files (slower)")
     }, async (args) => {
-      const { execSync: execSync2 } = await import("child_process");
+      const { execSync: execSync3 } = await import("child_process");
       const { homedir } = await import("os");
       const { existsSync: existsSync3 } = await import("fs");
       const deep = args["deep"] ?? false;
       const HOME = homedir();
       const run = (cmd) => {
         try {
-          return execSync2(cmd, { stdio: "pipe", timeout: 1e4, shell: "/bin/sh" }).toString().trim();
+          return execSync3(cmd, { stdio: "pipe", timeout: 1e4, shell: "/bin/sh" }).toString().trim();
         } catch {
           return "";
         }
@@ -634,12 +709,12 @@ ${v}`).join("\n\n");
     tool("scan_k8s_resources", "Scan Kubernetes cluster via kubectl \u2014 100% readonly (get, describe)", {
       namespace: z.string().optional().describe("Filter by namespace \u2014 empty = all namespaces")
     }, async (args) => {
-      const { execSync: execSync2 } = await import("child_process");
+      const { execSync: execSync3 } = await import("child_process");
       const ns = args["namespace"];
       const nsFlag = ns ? `-n ${ns}` : "--all-namespaces";
       const run = (cmd) => {
         try {
-          return execSync2(cmd, { stdio: "pipe", timeout: 15e3, shell: "/bin/sh" }).toString().trim();
+          return execSync3(cmd, { stdio: "pipe", timeout: 15e3, shell: "/bin/sh" }).toString().trim();
         } catch (e) {
           return `(error: ${e instanceof Error ? e.message.split("\n")[0] : String(e)})`;
         }
@@ -663,7 +738,7 @@ ${run(c)}`).join("\n\n");
       region: z.string().optional().describe("AWS Region \u2014 default: AWS_DEFAULT_REGION or profile"),
       profile: z.string().optional().describe("AWS CLI profile")
     }, async (args) => {
-      const { execSync: execSync2 } = await import("child_process");
+      const { execSync: execSync3 } = await import("child_process");
       const region = args["region"];
       const profile = args["profile"];
       const env = { ...process.env };
@@ -671,7 +746,7 @@ ${run(c)}`).join("\n\n");
       const pf = profile ? `--profile ${profile}` : "";
       const run = (cmd) => {
         try {
-          return execSync2(cmd, { stdio: "pipe", timeout: 2e4, shell: "/bin/sh", env }).toString().trim();
+          return execSync3(cmd, { stdio: "pipe", timeout: 2e4, shell: "/bin/sh", env }).toString().trim();
         } catch (e) {
           return `(error: ${e instanceof Error ? e.message.split("\n")[0] : String(e)})`;
         }
@@ -693,12 +768,12 @@ ${run(c)}`).join("\n\n");
     tool("scan_gcp_resources", "Scan Google Cloud Platform via gcloud CLI \u2014 100% readonly (list, describe)", {
       project: z.string().optional().describe("GCP Project ID \u2014 default: current gcloud project")
     }, async (args) => {
-      const { execSync: execSync2 } = await import("child_process");
+      const { execSync: execSync3 } = await import("child_process");
       const project = args["project"];
       const pf = project ? `--project ${project}` : "";
       const run = (cmd) => {
         try {
-          return execSync2(cmd, { stdio: "pipe", timeout: 2e4, shell: "/bin/sh" }).toString().trim();
+          return execSync3(cmd, { stdio: "pipe", timeout: 2e4, shell: "/bin/sh" }).toString().trim();
         } catch (e) {
           return `(error: ${e instanceof Error ? e.message.split("\n")[0] : String(e)})`;
         }
@@ -722,14 +797,14 @@ ${run(c)}`).join("\n\n");
       subscription: z.string().optional().describe("Azure Subscription ID"),
       resourceGroup: z.string().optional().describe("Filter by resource group")
     }, async (args) => {
-      const { execSync: execSync2 } = await import("child_process");
+      const { execSync: execSync3 } = await import("child_process");
       const sub = args["subscription"];
       const rg = args["resourceGroup"];
       const sf = sub ? `--subscription ${sub}` : "";
       const rf = rg ? `--resource-group ${rg}` : "";
       const run = (cmd) => {
         try {
-          return execSync2(cmd, { stdio: "pipe", timeout: 2e4, shell: "/bin/sh" }).toString().trim();
+          return execSync3(cmd, { stdio: "pipe", timeout: 2e4, shell: "/bin/sh" }).toString().trim();
         } catch (e) {
           return `(error: ${e instanceof Error ? e.message.split("\n")[0] : String(e)})`;
         }
@@ -752,11 +827,11 @@ ${run(c)}`).join("\n\n");
     tool("scan_installed_apps", "Scan all installed apps and tools \u2014 IDEs, office, dev tools, business apps, databases", {
       searchHint: z.string().optional().describe('Optional search term to find specific tools (e.g. "hubspot windsurf cursor")')
     }, async (args) => {
-      const { execSync: execSync2 } = await import("child_process");
+      const { execSync: execSync3 } = await import("child_process");
       const hint = args["searchHint"];
       const run = (cmd) => {
         try {
-          return execSync2(cmd, { stdio: "pipe", timeout: 15e3, shell: "/bin/sh" }).toString().trim();
+          return execSync3(cmd, { stdio: "pipe", timeout: 15e3, shell: "/bin/sh" }).toString().trim();
         } catch {
           return "";
         }
@@ -1137,6 +1212,221 @@ Use ask_user when you need context from the user.`;
 // src/exporter.ts
 import { mkdirSync as mkdirSync2, writeFileSync } from "fs";
 import { join as join2 } from "path";
+
+// src/hex.ts
+function hexToPixel(q, r, size) {
+  const x = size * (3 / 2 * q);
+  const y = size * (Math.sqrt(3) / 2 * q + Math.sqrt(3) * r);
+  return { x, y };
+}
+var HEX_DIRECTIONS = [
+  { q: 1, r: 0 },
+  { q: 1, r: -1 },
+  { q: 0, r: -1 },
+  { q: -1, r: 0 },
+  { q: -1, r: 1 },
+  { q: 0, r: 1 }
+];
+function hexDistance(a, b) {
+  return (Math.abs(a.q - b.q) + Math.abs(a.q + a.r - b.q - b.r) + Math.abs(a.r - b.r)) / 2;
+}
+function hexRing(center, radius) {
+  if (radius === 0) return [{ q: center.q, r: center.r }];
+  const results = [];
+  let hex = {
+    q: center.q + HEX_DIRECTIONS[4].q * radius,
+    r: center.r + HEX_DIRECTIONS[4].r * radius
+  };
+  for (let side = 0; side < 6; side++) {
+    for (let step = 0; step < radius; step++) {
+      results.push({ q: hex.q, r: hex.r });
+      hex = {
+        q: hex.q + HEX_DIRECTIONS[side].q,
+        r: hex.r + HEX_DIRECTIONS[side].r
+      };
+    }
+  }
+  return results;
+}
+function hexSpiral(center, count) {
+  const positions = [];
+  let ring = 0;
+  while (positions.length < count) {
+    const ringPositions = hexRing(center, ring);
+    for (const pos of ringPositions) {
+      if (positions.length >= count) break;
+      positions.push(pos);
+    }
+    ring++;
+  }
+  return positions;
+}
+
+// src/cluster.ts
+function assignColor(domain, allDomains) {
+  if (DOMAIN_COLORS[domain]) return DOMAIN_COLORS[domain];
+  const idx = allDomains.indexOf(domain);
+  return DOMAIN_PALETTE[idx % DOMAIN_PALETTE.length];
+}
+function assignColors(domains) {
+  const result = {};
+  for (const d of domains) {
+    result[d] = assignColor(d, domains);
+  }
+  return result;
+}
+function groupByDomain(assets) {
+  const map = /* @__PURE__ */ new Map();
+  for (const a of assets) {
+    const d = a.domain || "Other";
+    if (!map.has(d)) map.set(d, []);
+    map.get(d).push(a);
+  }
+  return map;
+}
+var CLUSTER_GAP = 3;
+function layoutClusters(groups, hexSize) {
+  const allDomains = Array.from(groups.keys());
+  const colors = assignColors(allDomains);
+  const sorted = Array.from(groups.entries()).sort((a, b) => b[1].length - a[1].length);
+  const occupied = /* @__PURE__ */ new Set();
+  const key = (q, r) => `${q},${r}`;
+  const clusters = [];
+  const allAssets = [];
+  for (const [domain, domainAssets] of sorted) {
+    const origin = clusters.length === 0 ? { q: 0, r: 0 } : findFreeOrigin(occupied, domainAssets.length, CLUSTER_GAP);
+    const positions = hexSpiral(origin, domainAssets.length);
+    const assetIds = [];
+    for (let i = 0; i < domainAssets.length; i++) {
+      const asset = domainAssets[i];
+      asset.position = positions[i];
+      assetIds.push(asset.id);
+      occupied.add(key(positions[i].q, positions[i].r));
+      allAssets.push(asset);
+    }
+    const centroid = computeCentroid(positions, hexSize);
+    clusters.push({
+      id: `cluster:${domain}`,
+      label: domain,
+      domain,
+      color: colors[domain],
+      assetIds,
+      centroid
+    });
+  }
+  return { clusters, assets: allAssets };
+}
+function findFreeOrigin(occupied, count, gap) {
+  const key = (q, r) => `${q},${r}`;
+  for (let searchRadius = 1; searchRadius < 100; searchRadius++) {
+    const candidates = hexSpiral({ q: 0, r: 0 }, 1 + 6 * searchRadius * (searchRadius + 1) / 2);
+    for (const candidate of candidates) {
+      const testPositions = hexSpiral(candidate, count);
+      let fits = true;
+      for (const tp of testPositions) {
+        if (occupied.has(key(tp.q, tp.r))) {
+          fits = false;
+          break;
+        }
+        for (const oKey of occupied) {
+          const [oq, or] = oKey.split(",").map(Number);
+          if (hexDistance(tp, { q: oq, r: or }) < gap) {
+            fits = false;
+            break;
+          }
+        }
+        if (!fits) break;
+      }
+      if (fits) return candidate;
+    }
+  }
+  return { q: occupied.size * 5, r: 0 };
+}
+function computeCentroid(positions, hexSize) {
+  if (positions.length === 0) return { x: 0, y: 0 };
+  let sx = 0, sy = 0;
+  for (const { q, r } of positions) {
+    const { x, y } = hexToPixel(q, r, hexSize);
+    sx += x;
+    sy += y;
+  }
+  return { x: sx / positions.length, y: sy / positions.length };
+}
+
+// src/mapper.ts
+var TYPE_TO_DOMAIN = {
+  database_server: "Data Layer",
+  database: "Data Layer",
+  table: "Data Layer",
+  cache_server: "Data Layer",
+  web_service: "Web / API",
+  api_endpoint: "Web / API",
+  message_broker: "Messaging",
+  queue: "Messaging",
+  topic: "Messaging",
+  host: "Infrastructure",
+  container: "Infrastructure",
+  pod: "Infrastructure",
+  k8s_cluster: "Infrastructure",
+  config_file: "Infrastructure",
+  saas_tool: "SaaS Tools"
+};
+function resolveDomain(node) {
+  if (node.domain) return node.domain;
+  const meta = node.metadata;
+  if (typeof meta["category"] === "string" && meta["category"].length > 0) {
+    return meta["category"];
+  }
+  for (const tag of node.tags ?? []) {
+    if (tag.length > 2 && tag[0] === tag[0].toUpperCase()) {
+      return tag;
+    }
+  }
+  return TYPE_TO_DOMAIN[node.type] ?? "Other";
+}
+function nodesToAssets(nodes) {
+  return nodes.map((n) => ({
+    id: n.id,
+    name: n.name,
+    domain: resolveDomain(n),
+    subDomain: n.subDomain,
+    qualityScore: n.qualityScore ?? Math.round(n.confidence * 100),
+    metadata: n.metadata ?? {},
+    position: { q: 0, r: 0 }
+    // will be assigned by layoutClusters
+  }));
+}
+function edgesToConnections(edges) {
+  return edges.map((e) => ({
+    id: e.id,
+    sourceAssetId: e.sourceId,
+    targetAssetId: e.targetId,
+    type: e.relationship
+  }));
+}
+var HEX_SIZE = 24;
+function buildMapData(nodes, edges, options) {
+  const rawAssets = nodesToAssets(nodes);
+  const connections = edgesToConnections(edges);
+  if (rawAssets.length === 0) {
+    return {
+      assets: [],
+      clusters: [],
+      connections,
+      meta: { exportedAt: (/* @__PURE__ */ new Date()).toISOString(), theme: options?.theme ?? "light" }
+    };
+  }
+  const groups = groupByDomain(rawAssets);
+  const { clusters, assets } = layoutClusters(groups, HEX_SIZE);
+  return {
+    assets,
+    clusters,
+    connections,
+    meta: { exportedAt: (/* @__PURE__ */ new Date()).toISOString(), theme: options?.theme ?? "light" }
+  };
+}
+
+// src/exporter.ts
 function nodeLayer(type) {
   if (type === "saas_tool") return "saas";
   if (["web_service", "api_endpoint"].includes(type)) return "web";
@@ -1880,7 +2170,647 @@ function exportSOPMarkdown(sop) {
   }
   return lines.join("\n");
 }
-function exportAll(db, sessionId, outputDir, formats = ["mermaid", "json", "yaml", "html", "sops"]) {
+function exportCartographyMap(nodes, edges, options) {
+  const mapData = buildMapData(nodes, edges, options);
+  const { assets, clusters, connections, meta } = mapData;
+  const isEmpty = assets.length === 0;
+  const HEX_SIZE2 = 24;
+  const dataJson = JSON.stringify({
+    assets: assets.map((a) => ({
+      id: a.id,
+      name: a.name,
+      domain: a.domain,
+      subDomain: a.subDomain ?? null,
+      qualityScore: a.qualityScore ?? null,
+      metadata: a.metadata,
+      q: a.position.q,
+      r: a.position.r
+    })),
+    clusters: clusters.map((c) => ({
+      id: c.id,
+      label: c.label,
+      domain: c.domain,
+      color: c.color,
+      assetIds: c.assetIds,
+      centroid: c.centroid
+    })),
+    connections: connections.map((c) => ({
+      id: c.id,
+      sourceAssetId: c.sourceAssetId,
+      targetAssetId: c.targetAssetId,
+      type: c.type ?? "connection"
+    }))
+  });
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+<title>Data Cartography Map</title>
+<style>
+*{box-sizing:border-box;margin:0;padding:0}
+html,body{width:100%;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
+body{display:flex;flex-direction:column;background:${meta.theme === "dark" ? "#0f172a" : "#f8fafc"};color:${meta.theme === "dark" ? "#e2e8f0" : "#1e293b"}}
+#topbar{
+  height:48px;display:flex;align-items:center;gap:16px;padding:0 20px;
+  background:${meta.theme === "dark" ? "#1e293b" : "#fff"};border-bottom:1px solid ${meta.theme === "dark" ? "#334155" : "#e2e8f0"};z-index:10;flex-shrink:0;
+}
+#topbar h1{font-size:15px;font-weight:600;letter-spacing:-0.01em}
+#search-box{
+  display:flex;align-items:center;gap:8px;background:${meta.theme === "dark" ? "#334155" : "#f1f5f9"};
+  border-radius:8px;padding:5px 10px;margin-left:auto;
+}
+#search-box input{
+  border:none;background:transparent;font-size:13px;outline:none;width:180px;color:inherit;
+}
+#search-box input::placeholder{color:#94a3b8}
+#main{flex:1;display:flex;overflow:hidden;position:relative}
+#canvas-wrap{flex:1;position:relative;overflow:hidden;cursor:grab}
+#canvas-wrap.dragging{cursor:grabbing}
+#canvas-wrap.connecting{cursor:crosshair}
+canvas{display:block;width:100%;height:100%}
+/* Detail panel */
+#detail-panel{
+  width:280px;background:${meta.theme === "dark" ? "#1e293b" : "#fff"};border-left:1px solid ${meta.theme === "dark" ? "#334155" : "#e2e8f0"};
+  display:flex;flex-direction:column;transform:translateX(100%);
+  transition:transform .2s ease;z-index:5;flex-shrink:0;overflow-y:auto;
+}
+#detail-panel.open{transform:translateX(0)}
+#detail-panel .panel-header{
+  padding:16px;border-bottom:1px solid ${meta.theme === "dark" ? "#334155" : "#e2e8f0"};display:flex;align-items:center;gap:10px;
+}
+#detail-panel .panel-header h3{font-size:14px;font-weight:600;flex:1;word-break:break-word}
+#detail-panel .close-btn{
+  width:24px;height:24px;border:none;background:transparent;cursor:pointer;
+  color:#94a3b8;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:16px;
+}
+#detail-panel .close-btn:hover{background:${meta.theme === "dark" ? "#334155" : "#f1f5f9"}}
+#detail-panel .panel-body{padding:12px 16px;display:flex;flex-direction:column;gap:12px}
+#detail-panel .meta-row{display:flex;flex-direction:column;gap:3px}
+#detail-panel .meta-label{font-size:11px;font-weight:500;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em}
+#detail-panel .meta-value{font-size:13px;word-break:break-all}
+#detail-panel .quality-bar{height:6px;border-radius:3px;background:${meta.theme === "dark" ? "#334155" : "#e2e8f0"};margin-top:4px}
+#detail-panel .quality-fill{height:6px;border-radius:3px;transition:width .3s}
+/* Bottom-left toolbar */
+#toolbar-left{
+  position:absolute;bottom:20px;left:20px;display:flex;gap:8px;z-index:10;
+}
+.tb-btn{
+  width:40px;height:40px;border-radius:10px;border:1px solid ${meta.theme === "dark" ? "#334155" : "#e2e8f0"};
+  background:${meta.theme === "dark" ? "#1e293b" : "#fff"};box-shadow:0 1px 4px rgba(0,0,0,.08);cursor:pointer;
+  display:flex;align-items:center;justify-content:center;font-size:18px;
+  transition:all .15s;color:inherit;
+}
+.tb-btn:hover{border-color:#94a3b8}
+.tb-btn.active{background:${meta.theme === "dark" ? "#1e3a5f" : "#eff6ff"};border-color:#3b82f6}
+/* Bottom-right toolbar */
+#toolbar-right{
+  position:absolute;bottom:20px;right:20px;display:flex;flex-direction:column;
+  align-items:flex-end;gap:8px;z-index:10;
+}
+#zoom-controls{display:flex;align-items:center;gap:6px}
+.zoom-btn{
+  width:34px;height:34px;border-radius:8px;border:1px solid ${meta.theme === "dark" ? "#334155" : "#e2e8f0"};
+  background:${meta.theme === "dark" ? "#1e293b" : "#fff"};cursor:pointer;
+  font-size:18px;color:inherit;display:flex;align-items:center;justify-content:center;
+}
+.zoom-btn:hover{background:${meta.theme === "dark" ? "#334155" : "#f1f5f9"}}
+#zoom-pct{font-size:12px;font-weight:500;color:#64748b;min-width:38px;text-align:center}
+#detail-selector{display:flex;flex-direction:column;gap:4px}
+.detail-btn{
+  width:34px;height:34px;border-radius:8px;border:1px solid ${meta.theme === "dark" ? "#334155" : "#e2e8f0"};
+  background:${meta.theme === "dark" ? "#1e293b" : "#fff"};cursor:pointer;
+  font-size:12px;font-weight:600;color:#64748b;display:flex;align-items:center;justify-content:center;
+}
+.detail-btn:hover{background:${meta.theme === "dark" ? "#334155" : "#f1f5f9"}}
+.detail-btn.active{background:${meta.theme === "dark" ? "#1e3a5f" : "#eff6ff"};border-color:#3b82f6;color:#2563eb}
+#connect-btn{
+  width:40px;height:40px;border-radius:10px;border:1px solid ${meta.theme === "dark" ? "#334155" : "#e2e8f0"};
+  background:${meta.theme === "dark" ? "#1e293b" : "#fff"};cursor:pointer;
+  font-size:18px;display:flex;align-items:center;justify-content:center;color:inherit;
+}
+#connect-btn.active{background:#fef3c7;border-color:#f59e0b}
+/* Tooltip */
+#tooltip{
+  position:fixed;background:#1e293b;color:#fff;border-radius:8px;
+  padding:8px 12px;font-size:12px;pointer-events:none;z-index:100;
+  display:none;max-width:220px;box-shadow:0 4px 12px rgba(0,0,0,.15);
+}
+#tooltip .tt-name{font-weight:600;margin-bottom:2px}
+#tooltip .tt-domain{color:#94a3b8;font-size:11px}
+#tooltip .tt-quality{font-size:11px;margin-top:2px}
+/* Empty state */
+#empty-state{
+  position:absolute;inset:0;display:flex;flex-direction:column;
+  align-items:center;justify-content:center;gap:12px;color:#94a3b8;
+}
+#empty-state p{font-size:14px}
+/* Theme toggle */
+#theme-btn{
+  width:40px;height:40px;border-radius:10px;border:1px solid ${meta.theme === "dark" ? "#334155" : "#e2e8f0"};
+  background:${meta.theme === "dark" ? "#1e293b" : "#fff"};cursor:pointer;
+  font-size:18px;display:flex;align-items:center;justify-content:center;color:inherit;
+}
+/* Dark mode overrides (toggled via JS) */
+body.dark{background:#0f172a;color:#e2e8f0}
+body.dark #topbar{background:#1e293b;border-color:#334155}
+body.dark #search-box{background:#334155}
+body.dark #detail-panel{background:#1e293b;border-color:#334155}
+body.dark .tb-btn,body.dark .zoom-btn,body.dark .detail-btn,body.dark #connect-btn,body.dark #theme-btn{
+  background:#1e293b;border-color:#334155;color:#e2e8f0;
+}
+/* Light mode overrides */
+body.light{background:#f8fafc;color:#1e293b}
+body.light #topbar{background:#fff;border-color:#e2e8f0}
+/* Connection hint */
+#connect-hint{
+  position:absolute;top:12px;left:50%;transform:translateX(-50%);
+  background:#fef3c7;border:1px solid #f59e0b;color:#92400e;
+  padding:6px 14px;border-radius:20px;font-size:12px;font-weight:500;
+  display:none;z-index:20;pointer-events:none;
+}
+/* Screen reader only */
+.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
+</style>
+</head>
+<body class="${meta.theme}">
+<!-- Top bar -->
+<div id="topbar">
+  <h1>Data Cartography Map</h1>
+  <div id="search-box">
+    <span style="color:#94a3b8;font-size:14px">&#8981;</span>
+    <input id="search-input" type="text" placeholder="Search assets..." aria-label="Search data assets"/>
+  </div>
+  <button id="theme-btn" title="Toggle dark/light mode" aria-label="Toggle theme">${meta.theme === "dark" ? "&#9788;" : "&#9790;"}</button>
+</div>
+<!-- SR summary -->
+<div class="sr-only" role="status" aria-live="polite" id="sr-summary">
+  Data cartography map with ${assets.length} assets in ${clusters.length} clusters.
+</div>
+<!-- Main area -->
+<div id="main">
+  <div id="canvas-wrap" role="application" aria-label="Data cartography hex map" tabindex="0">
+    <canvas id="hexmap" aria-hidden="true"></canvas>
+    ${isEmpty ? '<div id="empty-state"><p style="font-size:48px">&#128506;</p><p>No data assets available</p><p style="font-size:12px">Run <code>datasynx-cartography discover</code> to populate the map</p></div>' : ""}
+  </div>
+  <div id="detail-panel" role="complementary" aria-label="Asset details">
+    <div class="panel-header">
+      <h3 id="dp-name">&mdash;</h3>
+      <button class="close-btn" id="dp-close" aria-label="Close panel">&#10005;</button>
+    </div>
+    <div class="panel-body" id="dp-body"></div>
+  </div>
+</div>
+<!-- Bottom-left toolbar -->
+<div id="toolbar-left">
+  <button class="tb-btn active" id="btn-labels" title="Show labels" aria-pressed="true" aria-label="Toggle labels">&#127991;</button>
+  <button class="tb-btn" id="btn-quality" title="Quality layer" aria-pressed="false" aria-label="Toggle quality layer">&#128065;</button>
+</div>
+<!-- Bottom-right toolbar -->
+<div id="toolbar-right">
+  <div id="zoom-controls">
+    <button class="zoom-btn" id="zoom-out" aria-label="Zoom out">&minus;</button>
+    <span id="zoom-pct">100%</span>
+    <button class="zoom-btn" id="zoom-in" aria-label="Zoom in">+</button>
+  </div>
+  <div id="detail-selector">
+    <button class="detail-btn" id="dl-1" aria-label="Detail level 1">1</button>
+    <button class="detail-btn active" id="dl-2" aria-label="Detail level 2">2</button>
+    <button class="detail-btn" id="dl-3" aria-label="Detail level 3">3</button>
+    <button class="detail-btn" id="dl-4" aria-label="Detail level 4">4</button>
+  </div>
+  <button id="connect-btn" title="Connection tool" aria-label="Toggle connection tool">&#128279;</button>
+</div>
+<!-- Connection hint -->
+<div id="connect-hint">Click two assets to create a connection</div>
+<!-- Tooltip -->
+<div id="tooltip" role="tooltip">
+  <div class="tt-name" id="tt-name"></div>
+  <div class="tt-domain" id="tt-domain"></div>
+  <div class="tt-quality" id="tt-quality"></div>
+</div>
+
+<script>
+(function() {
+'use strict';
+
+// \u2500\u2500 Data \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+const MAP = ${dataJson};
+const HEX_SIZE = ${HEX_SIZE2};
+const IS_EMPTY = ${isEmpty};
+
+// Build asset index
+const assetIndex = new Map();
+const clusterByAsset = new Map();
+for (const c of MAP.clusters) {
+  for (const aid of c.assetIds) {
+    clusterByAsset.set(aid, c);
+  }
+}
+for (const a of MAP.assets) {
+  assetIndex.set(a.id, a);
+}
+
+// \u2500\u2500 Canvas \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+const canvas = document.getElementById('hexmap');
+const ctx = canvas.getContext('2d');
+const wrap = document.getElementById('canvas-wrap');
+let W = 0, H = 0;
+
+function resize() {
+  const dpr = window.devicePixelRatio || 1;
+  W = wrap.clientWidth; H = wrap.clientHeight;
+  canvas.width = W * dpr; canvas.height = H * dpr;
+  canvas.style.width = W + 'px'; canvas.style.height = H + 'px';
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  draw();
+}
+window.addEventListener('resize', resize);
+
+// \u2500\u2500 Viewport \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+let vx = 0, vy = 0, scale = 1;
+let detailLevel = 2, showLabels = true, showQuality = false;
+let isDark = document.body.classList.contains('dark');
+let connectMode = false, connectFirst = null;
+let hoveredAssetId = null, selectedAssetId = null;
+let searchQuery = '';
+let localConnections = [...MAP.connections];
+
+// Flat-top hex math
+function htp_x(q, r) { return HEX_SIZE * (3/2 * q); }
+function htp_y(q, r) { return HEX_SIZE * (Math.sqrt(3)/2 * q + Math.sqrt(3) * r); }
+function w2s(wx, wy) { return { x: wx*scale+vx, y: wy*scale+vy }; }
+function s2w(sx, sy) { return { x: (sx-vx)/scale, y: (sy-vy)/scale }; }
+
+function fitToView() {
+  if (IS_EMPTY || MAP.assets.length === 0) { vx = 0; vy = 0; scale = 1; return; }
+  let mnx=Infinity,mny=Infinity,mxx=-Infinity,mxy=-Infinity;
+  for (const a of MAP.assets) {
+    const px=htp_x(a.q,a.r), py=htp_y(a.q,a.r);
+    if(px<mnx)mnx=px;if(py<mny)mny=py;if(px>mxx)mxx=px;if(py>mxy)mxy=py;
+  }
+  const pw=mxx-mnx+HEX_SIZE*4, ph=mxy-mny+HEX_SIZE*4;
+  scale = Math.min(W/pw, H/ph, 2) * 0.85;
+  vx = W/2 - ((mnx+mxx)/2)*scale;
+  vy = H/2 - ((mny+mxy)/2)*scale;
+}
+
+// \u2500\u2500 Drawing \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+function hexPath(cx, cy, r) {
+  ctx.beginPath();
+  for (let i=0;i<6;i++) {
+    const angle = Math.PI/180*(60*i);
+    const x=cx+r*Math.cos(angle), y=cy+r*Math.sin(angle);
+    i===0?ctx.moveTo(x,y):ctx.lineTo(x,y);
+  }
+  ctx.closePath();
+}
+
+function shadeV(hex, amt) {
+  if(!hex||hex.length<7)return hex;
+  const n=parseInt(hex.replace('#',''),16);
+  const r=Math.min(255,(n>>16)+amt), g=Math.min(255,((n>>8)&0xff)+amt), b=Math.min(255,(n&0xff)+amt);
+  return '#'+r.toString(16).padStart(2,'0')+g.toString(16).padStart(2,'0')+b.toString(16).padStart(2,'0');
+}
+
+function draw() {
+  ctx.clearRect(0,0,W,H);
+  ctx.fillStyle = isDark ? '#0f172a' : '#f8fafc';
+  ctx.fillRect(0,0,W,H);
+  if (IS_EMPTY) return;
+
+  const size = HEX_SIZE * scale;
+  const matchedIds = getSearchMatches();
+  const hasSearch = searchQuery.length > 0;
+
+  // Draw connections
+  ctx.save();
+  ctx.strokeStyle = isDark ? 'rgba(148,163,184,0.35)' : 'rgba(100,116,139,0.25)';
+  ctx.lineWidth = 1.5;
+  ctx.setLineDash([4,4]);
+  for (const conn of localConnections) {
+    const src = assetIndex.get(conn.sourceAssetId);
+    const tgt = assetIndex.get(conn.targetAssetId);
+    if (!src||!tgt) continue;
+    const sp=w2s(htp_x(src.q,src.r),htp_y(src.q,src.r));
+    const tp=w2s(htp_x(tgt.q,tgt.r),htp_y(tgt.q,tgt.r));
+    ctx.beginPath();ctx.moveTo(sp.x,sp.y);ctx.lineTo(tp.x,tp.y);ctx.stroke();
+  }
+  ctx.setLineDash([]);
+  ctx.restore();
+
+  // Draw hexagons per cluster
+  for (const cluster of MAP.clusters) {
+    const baseColor = cluster.color;
+    const clusterAssets = cluster.assetIds.map(id=>assetIndex.get(id)).filter(Boolean);
+    const isClusterMatch = !hasSearch || clusterAssets.some(a => matchedIds.has(a.id));
+    const clusterDim = hasSearch && !isClusterMatch;
+
+    for (let ai=0; ai<clusterAssets.length; ai++) {
+      const asset = clusterAssets[ai];
+      const wx=htp_x(asset.q,asset.r), wy=htp_y(asset.q,asset.r);
+      const s=w2s(wx,wy);
+      const cx=s.x, cy=s.y;
+
+      // Frustum cull
+      if(cx+size<0||cx-size>W||cy+size<0||cy-size>H) continue;
+
+      // Shade variation
+      const shade = ai%3===0?18:ai%3===1?8:0;
+      let fillColor = shadeV(baseColor, shade);
+
+      // Quality overlay
+      if (showQuality && asset.qualityScore !== null && asset.qualityScore !== undefined) {
+        const q = asset.qualityScore;
+        if (q < 40) fillColor = '#ef4444';
+        else if (q < 70) fillColor = '#f97316';
+      }
+
+      const alpha = clusterDim ? 0.18 : 1;
+      const isHovered = asset.id === hoveredAssetId;
+      const isSelected = asset.id === selectedAssetId;
+      const isConnectFirst = asset.id === connectFirst;
+
+      ctx.save();
+      ctx.globalAlpha = alpha;
+      hexPath(cx, cy, size*0.92);
+
+      if (isDark && (isHovered||isSelected||isConnectFirst)) {
+        ctx.shadowColor = fillColor;
+        ctx.shadowBlur = isSelected ? 16 : 8;
+      }
+
+      ctx.fillStyle = fillColor;
+      ctx.fill();
+
+      if (isSelected||isConnectFirst) {
+        ctx.strokeStyle = isConnectFirst ? '#f59e0b' : '#fff';
+        ctx.lineWidth = 2.5;
+        ctx.stroke();
+      } else if (isHovered) {
+        ctx.strokeStyle = isDark ? 'rgba(255,255,255,0.4)' : 'rgba(0,0,0,0.2)';
+        ctx.lineWidth = 1.5;
+        ctx.stroke();
+      } else {
+        ctx.strokeStyle = isDark ? 'rgba(255,255,255,0.06)' : 'rgba(255,255,255,0.4)';
+        ctx.lineWidth = 1;
+        ctx.stroke();
+      }
+      ctx.restore();
+
+      // Quality dot
+      if (showQuality && asset.qualityScore!==null && asset.qualityScore!==undefined && size>8) {
+        const q = asset.qualityScore;
+        if (q < 70) {
+          ctx.beginPath();
+          ctx.arc(cx+size*0.4, cy-size*0.4, Math.max(3,size*0.14), 0, Math.PI*2);
+          ctx.fillStyle = q<40?'#ef4444':'#f97316';
+          ctx.fill();
+        }
+      }
+
+      // Asset labels (detail 4, or 3 at high zoom)
+      const showAssetLabel = showLabels && !clusterDim &&
+        ((detailLevel>=4)||(detailLevel===3 && scale>=0.8));
+      if (showAssetLabel && size>14) {
+        const label = asset.name.length>12 ? asset.name.substring(0,11)+'...' : asset.name;
+        ctx.save();
+        ctx.font = Math.max(8,Math.min(11,size*0.38))+'px -apple-system,sans-serif';
+        ctx.fillStyle = isDark ? 'rgba(255,255,255,0.85)' : 'rgba(255,255,255,0.9)';
+        ctx.textAlign='center';ctx.textBaseline='middle';
+        ctx.fillText(label, cx, cy);
+        ctx.restore();
+      }
+    }
+  }
+
+  // Cluster labels (pill badges)
+  if (showLabels && detailLevel>=1) {
+    for (const cluster of MAP.clusters) {
+      if (cluster.assetIds.length===0) continue;
+      if (hasSearch && !cluster.assetIds.some(id=>matchedIds.has(id))) continue;
+      const s=w2s(cluster.centroid.x, cluster.centroid.y);
+      drawPill(s.x, s.y-size*1.2, cluster.label, cluster.color, 14);
+    }
+  }
+
+  // Sub-domain labels (detail 2+)
+  if (showLabels && detailLevel>=2) {
+    const subGroups = new Map();
+    for (const a of MAP.assets) {
+      if (!a.subDomain) continue;
+      const key = a.domain+'|'+a.subDomain;
+      if (!subGroups.has(key)) subGroups.set(key, []);
+      subGroups.get(key).push(a);
+    }
+    for (const [, group] of subGroups) {
+      let sx=0,sy=0;
+      for (const a of group) { sx+=htp_x(a.q,a.r); sy+=htp_y(a.q,a.r); }
+      const cx=sx/group.length, cy=sy/group.length;
+      const s = w2s(cx, cy);
+      drawPill(s.x, s.y+size*1.5, group[0].subDomain, '#64748b', 11);
+    }
+  }
+}
+
+function drawPill(x, y, text, color, fontSize) {
+  if(!text) return;
+  ctx.save();
+  ctx.font = '600 '+fontSize+'px -apple-system,sans-serif';
+  const tw=ctx.measureText(text).width;
+  const ph=fontSize+8, pw=tw+20;
+  ctx.beginPath();
+  if (ctx.roundRect) ctx.roundRect(x-pw/2, y-ph/2, pw, ph, ph/2);
+  else { ctx.rect(x-pw/2, y-ph/2, pw, ph); }
+  ctx.fillStyle = isDark ? 'rgba(30,41,59,0.9)' : 'rgba(255,255,255,0.92)';
+  ctx.shadowColor='rgba(0,0,0,0.15)'; ctx.shadowBlur=6;
+  ctx.fill(); ctx.shadowBlur=0;
+  ctx.fillStyle = isDark ? '#e2e8f0' : '#0f172a';
+  ctx.textAlign='center'; ctx.textBaseline='middle';
+  ctx.fillText(text, x, y);
+  ctx.restore();
+}
+
+// \u2500\u2500 Hit testing \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+function getAssetAt(sx, sy) {
+  const w=s2w(sx,sy);
+  for (const a of MAP.assets) {
+    const wx=htp_x(a.q,a.r), wy=htp_y(a.q,a.r);
+    const dx=Math.abs(w.x-wx), dy=Math.abs(w.y-wy);
+    if (dx>HEX_SIZE||dy>HEX_SIZE) continue;
+    if (dx*dx+dy*dy < HEX_SIZE*HEX_SIZE) return a;
+  }
+  return null;
+}
+
+// \u2500\u2500 Search \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+function getSearchMatches() {
+  if(!searchQuery) return new Set();
+  const q=searchQuery.toLowerCase();
+  const m=new Set();
+  for(const a of MAP.assets){
+    if(a.name.toLowerCase().includes(q)||(a.domain&&a.domain.toLowerCase().includes(q))||
+       (a.subDomain&&a.subDomain.toLowerCase().includes(q))) m.add(a.id);
+  }
+  return m;
+}
+
+// \u2500\u2500 Pan & Zoom \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+let dragging=false, lastMX=0, lastMY=0;
+
+wrap.addEventListener('mousedown', e=>{
+  if(e.button!==0)return;
+  dragging=true; lastMX=e.clientX; lastMY=e.clientY;
+  wrap.classList.add('dragging');
+});
+window.addEventListener('mouseup', ()=>{dragging=false;wrap.classList.remove('dragging');});
+window.addEventListener('mousemove', e=>{
+  if(dragging){
+    vx+=e.clientX-lastMX; vy+=e.clientY-lastMY;
+    lastMX=e.clientX; lastMY=e.clientY; draw(); return;
+  }
+  const rect=wrap.getBoundingClientRect();
+  const sx=e.clientX-rect.left, sy=e.clientY-rect.top;
+  const asset=getAssetAt(sx,sy);
+  const newId=asset?asset.id:null;
+  if(newId!==hoveredAssetId){hoveredAssetId=newId;draw();}
+  const tt=document.getElementById('tooltip');
+  if(asset){
+    document.getElementById('tt-name').textContent=asset.name;
+    document.getElementById('tt-domain').textContent=asset.domain+(asset.subDomain?' > '+asset.subDomain:'');
+    document.getElementById('tt-quality').textContent=asset.qualityScore!==null?'Quality: '+asset.qualityScore+'/100':'';
+    tt.style.display='block';tt.style.left=(e.clientX+12)+'px';tt.style.top=(e.clientY-8)+'px';
+  } else { tt.style.display='none'; }
+});
+
+wrap.addEventListener('click', e=>{
+  const rect=wrap.getBoundingClientRect();
+  const sx=e.clientX-rect.left, sy=e.clientY-rect.top;
+  const asset=getAssetAt(sx,sy);
+  if(connectMode){
+    if(!asset) return;
+    if(!connectFirst){connectFirst=asset.id;draw();}
+    else if(connectFirst!==asset.id){
+      localConnections.push({id:crypto.randomUUID(),sourceAssetId:connectFirst,targetAssetId:asset.id,type:'connection'});
+      connectFirst=null;draw();
+    }
+    return;
+  }
+  if(asset){selectedAssetId=asset.id;showDetailPanel(asset);}
+  else{selectedAssetId=null;document.getElementById('detail-panel').classList.remove('open');}
+  draw();
+});
+
+// Touch
+let lastTouches=[];
+wrap.addEventListener('touchstart',e=>{lastTouches=[...e.touches];},{passive:true});
+wrap.addEventListener('touchmove',e=>{
+  if(e.touches.length===1){
+    vx+=e.touches[0].clientX-lastTouches[0].clientX;
+    vy+=e.touches[0].clientY-lastTouches[0].clientY;draw();
+  } else if(e.touches.length===2){
+    const d0=Math.hypot(lastTouches[0].clientX-lastTouches[1].clientX,lastTouches[0].clientY-lastTouches[1].clientY);
+    const d1=Math.hypot(e.touches[0].clientX-e.touches[1].clientX,e.touches[0].clientY-e.touches[1].clientY);
+    const mx=(e.touches[0].clientX+e.touches[1].clientX)/2;
+    const my=(e.touches[0].clientY+e.touches[1].clientY)/2;
+    applyZoom(d1/d0,mx,my);
+  }
+  lastTouches=[...e.touches];
+},{passive:true});
+
+wrap.addEventListener('wheel',e=>{
+  e.preventDefault();
+  const rect=wrap.getBoundingClientRect();
+  applyZoom(e.deltaY<0?1.12:1/1.12,e.clientX-rect.left,e.clientY-rect.top);
+},{passive:false});
+
+function applyZoom(factor,sx,sy){
+  const ns=Math.max(0.05,Math.min(8,scale*factor));
+  const wx=(sx-vx)/scale,wy=(sy-vy)/scale;
+  scale=ns;vx=sx-wx*scale;vy=sy-wy*scale;
+  document.getElementById('zoom-pct').textContent=Math.round(scale*100)+'%';draw();
+}
+document.getElementById('zoom-in').addEventListener('click',()=>applyZoom(1.25,W/2,H/2));
+document.getElementById('zoom-out').addEventListener('click',()=>applyZoom(1/1.25,W/2,H/2));
+
+// Keyboard
+wrap.addEventListener('keydown',e=>{
+  const step=40;
+  if(e.key==='ArrowLeft'){vx+=step;draw();}
+  else if(e.key==='ArrowRight'){vx-=step;draw();}
+  else if(e.key==='ArrowUp'){vy+=step;draw();}
+  else if(e.key==='ArrowDown'){vy-=step;draw();}
+  else if(e.key==='+'||e.key==='=')applyZoom(1.2,W/2,H/2);
+  else if(e.key==='-')applyZoom(1/1.2,W/2,H/2);
+  else if(e.key==='Escape'){
+    selectedAssetId=null;document.getElementById('detail-panel').classList.remove('open');
+    if(connectMode)toggleConnect();draw();
+  }
+});
+
+// \u2500\u2500 Detail Panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+function showDetailPanel(asset) {
+  document.getElementById('dp-name').textContent=asset.name;
+  const body=document.getElementById('dp-body');
+  const rows=[['Domain',asset.domain],['Sub-domain',asset.subDomain],
+    ['Quality Score',asset.qualityScore!==null?renderQuality(asset.qualityScore):null],
+    ...Object.entries(asset.metadata||{}).slice(0,8).map(([k,v])=>[k,String(v)])
+  ].filter(([,v])=>v!==null&&v!==undefined&&v!=='');
+  body.innerHTML=rows.map(([l,v])=>'<div class="meta-row"><div class="meta-label">'+esc(String(l))+'</div><div class="meta-value">'+v+'</div></div>').join('');
+  const related=localConnections.filter(c=>c.sourceAssetId===asset.id||c.targetAssetId===asset.id);
+  if(related.length>0){
+    body.innerHTML+='<div class="meta-row"><div class="meta-label">Connections ('+related.length+')</div><div>'+
+      related.map(c=>{const oid=c.sourceAssetId===asset.id?c.targetAssetId:c.sourceAssetId;
+        const o=assetIndex.get(oid);return '<div class="meta-value" style="margin-top:4px;font-size:12px">'+(o?esc(o.name):oid)+'</div>';}).join('')+'</div></div>';
+  }
+  document.getElementById('detail-panel').classList.add('open');
+}
+function renderQuality(s){
+  const c=s>=70?'#22c55e':s>=40?'#f97316':'#ef4444';
+  return s+'/100 <div class="quality-bar"><div class="quality-fill" style="width:'+s+'%;background:'+c+'"></div></div>';
+}
+function esc(s){return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');}
+document.getElementById('dp-close').addEventListener('click',()=>{
+  document.getElementById('detail-panel').classList.remove('open');selectedAssetId=null;draw();
+});
+
+// \u2500\u2500 Toolbar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+[1,2,3,4].forEach(n=>{
+  document.getElementById('dl-'+n).addEventListener('click',()=>{
+    detailLevel=n;document.querySelectorAll('.detail-btn').forEach(b=>b.classList.remove('active'));
+    document.getElementById('dl-'+n).classList.add('active');draw();
+  });
+});
+document.getElementById('btn-labels').addEventListener('click',()=>{
+  showLabels=!showLabels;document.getElementById('btn-labels').classList.toggle('active',showLabels);draw();
+});
+document.getElementById('btn-quality').addEventListener('click',()=>{
+  showQuality=!showQuality;document.getElementById('btn-quality').classList.toggle('active',showQuality);draw();
+});
+function toggleConnect(){
+  connectMode=!connectMode;connectFirst=null;
+  document.getElementById('connect-btn').classList.toggle('active',connectMode);
+  wrap.classList.toggle('connecting',connectMode);
+  document.getElementById('connect-hint').style.display=connectMode?'block':'none';draw();
+}
+document.getElementById('connect-btn').addEventListener('click',toggleConnect);
+document.getElementById('theme-btn').addEventListener('click',()=>{
+  isDark=!isDark;
+  document.body.classList.toggle('dark',isDark);document.body.classList.toggle('light',!isDark);
+  document.getElementById('theme-btn').innerHTML=isDark?'&#9788;':'&#9790;';draw();
+});
+document.getElementById('search-input').addEventListener('input',e=>{searchQuery=e.target.value.trim();draw();});
+
+// \u2500\u2500 Init \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+resize(); fitToView();
+document.getElementById('zoom-pct').textContent=Math.round(scale*100)+'%';
+draw();
+})();
+</script>
+</body>
+</html>`;
+}
+function exportAll(db, sessionId, outputDir, formats = ["mermaid", "json", "yaml", "html", "map", "sops"]) {
   mkdirSync2(outputDir, { recursive: true });
   mkdirSync2(join2(outputDir, "sops"), { recursive: true });
   mkdirSync2(join2(outputDir, "workflows"), { recursive: true });
@@ -1903,6 +2833,10 @@ function exportAll(db, sessionId, outputDir, formats = ["mermaid", "json", "yaml
     writeFileSync(join2(outputDir, "topology.html"), exportHTML(nodes, edges));
     process.stderr.write("\u2713 topology.html\n");
   }
+  if (formats.includes("map")) {
+    writeFileSync(join2(outputDir, "cartography-map.html"), exportCartographyMap(nodes, edges));
+    process.stderr.write("\u2713 cartography-map.html\n");
+  }
   if (formats.includes("sops")) {
     const sops = db.getSOPs(sessionId);
     for (const sop of sops) {
@@ -1919,9 +2853,10 @@ function exportAll(db, sessionId, outputDir, formats = ["mermaid", "json", "yaml
 }
 
 // src/cli.ts
-import { readFileSync as readFileSync2, existsSync as existsSync2 } from "fs";
+import { readFileSync as readFileSync2, existsSync as existsSync2, mkdirSync as mkdirSync3, writeFileSync as writeFileSync2 } from "fs";
 import { resolve } from "path";
 import { createInterface } from "readline";
+import { execSync as execSync2 } from "child_process";
 var bold = (s) => `\x1B[1m${s}\x1B[0m`;
 var dim = (s) => `\x1B[2m${s}\x1B[0m`;
 var cyan = (s) => `\x1B[36m${s}\x1B[0m`;
@@ -1934,7 +2869,7 @@ function main() {
   const program = new Command();
   const CMD = "datasynx-cartography";
   const VERSION = "0.2.3";
-  program.name(CMD).description("AI-powered Infrastructure Cartography").version(VERSION);
+  program.name(CMD).description("AI-powered Infrastructure Cartography & SOP Generation").version(VERSION);
   program.command("discover").description("Scan and map your infrastructure").option("--entry <hosts...>", "Entry points", ["localhost"]).option("--depth <n>", "Max crawl depth", "8").option("--max-turns <n>", "Max agent turns", "50").option("--model <m>", "Agent model", "claude-sonnet-4-5-20250929").option("--org <name>", "Organization name (for Backstage)").option("-o, --output <dir>", "Output directory", "./datasynx-output").option("--db <path>", "DB path").option("-v, --verbose", "Show agent reasoning", false).action(async (opts) => {
     checkPrerequisites();
     const config = defaultConfig({
@@ -2146,23 +3081,22 @@ function main() {
     exportAll(db, sessionId, config.outputDir);
     const osc8 = (url, label) => `\x1B]8;;${url}\x1B\\${label}\x1B]8;;\x1B\\`;
     const htmlPath = resolve(config.outputDir, "topology.html");
+    const mapPath = resolve(config.outputDir, "cartography-map.html");
     const topoPath = resolve(config.outputDir, "topology.mermaid");
     w("\n");
-    if (existsSync2(htmlPath)) {
-      const fileUrl = `file://${htmlPath}`;
-      w(`  ${green("\u2192")}  ${osc8(fileUrl, bold("Open topology.html"))}
+    if (existsSync2(mapPath)) {
+      w(`  ${green("\u2192")}  ${osc8(`file://${mapPath}`, bold("Open cartography-map.html"))}  ${dim("\u2190 Hex Map")}
 `);
-      w(`     ${dim(fileUrl)}
+    }
+    if (existsSync2(htmlPath)) {
+      w(`  ${green("\u2192")}  ${osc8(`file://${htmlPath}`, bold("Open topology.html"))}
 `);
     }
     if (existsSync2(topoPath)) {
       try {
         const code = readFileSync2(topoPath, "utf8");
-        const b64 = Buffer.from(JSON.stringify({ code, mermaid: { theme: "dark" } })).toString("base64url");
-        const liveUrl = `https://mermaid.live/view#base64:${b64}`;
-        w(`  ${cyan("\u2192")}  ${osc8(liveUrl, bold("Open in mermaid.live"))}
-`);
-        w(`     ${dim(liveUrl)}
+        const b64 = Buffer.from(JSON.stringify({ code, mermaid: { theme: "dark" } })).toString("base64");
+        w(`  ${cyan("\u2192")}  ${osc8(`https://mermaid.live/view#base64:${b64}`, bold("Open in mermaid.live"))}
 `);
       } catch {
       }
@@ -2217,7 +3151,7 @@ function main() {
     }
     db.close();
   });
-  program.command("export [session-id]").description("Generate all output files").option("-o, --output <dir>", "Output directory", "./datasynx-output").option("--format <fmt...>", "Formats: mermaid,json,yaml,html,sops").action((sessionId, opts) => {
+  program.command("export [session-id]").description("Generate all output files").option("-o, --output <dir>", "Output directory", "./datasynx-output").option("--format <fmt...>", "Formats: mermaid,json,yaml,html,map,sops").action((sessionId, opts) => {
     const config = defaultConfig({ outputDir: opts.output });
     const db = new CartographyDB(config.dbPath);
     const session = sessionId ? db.getSession(sessionId) : db.getLatestSession();
@@ -2227,12 +3161,43 @@ function main() {
       process.exitCode = 1;
       return;
     }
-    const formats = opts.format ?? ["mermaid", "json", "yaml", "html", "sops"];
+    const formats = opts.format ?? ["mermaid", "json", "yaml", "html", "map", "sops"];
     exportAll(db, session.id, opts.output, formats);
     process.stderr.write(`\u2713 Exported to: ${opts.output}
 `);
     db.close();
   });
+  program.command("map [session-id]").description("Open the interactive Data Cartography hex map in your browser").option("-o, --output <dir>", "Output directory", "./datasynx-output").option("--theme <theme>", "Theme: light or dark", "light").action((sessionId, opts) => {
+    const config = defaultConfig({ outputDir: opts.output });
+    const db = new CartographyDB(config.dbPath);
+    const session = sessionId ? db.getSession(sessionId) : db.getLatestSession();
+    if (!session) {
+      process.stderr.write("No session found. Run discover first.\n");
+      db.close();
+      process.exitCode = 1;
+      return;
+    }
+    const nodes = db.getNodes(session.id);
+    const edges = db.getEdges(session.id);
+    const outDir = resolve(opts.output);
+    mkdirSync3(outDir, { recursive: true });
+    const outPath = resolve(outDir, "cartography-map.html");
+    writeFileSync2(outPath, exportCartographyMap(nodes, edges, { theme: opts.theme }));
+    db.close();
+    const osc8 = (url, label) => `\x1B]8;;${url}\x1B\\${label}\x1B]8;;\x1B\\`;
+    const fileUrl = `file://${outPath}`;
+    process.stderr.write(`
+  ${green("OK")}  ${osc8(fileUrl, bold("Open cartography-map.html"))}
+`);
+    process.stderr.write(`     ${dim(fileUrl)}
+
+`);
+    try {
+      const cmd = process.platform === "darwin" ? `open "${outPath}"` : process.platform === "win32" ? `start "" "${outPath}"` : `xdg-open "${outPath}"`;
+      execSync2(cmd, { stdio: "ignore" });
+    } catch {
+    }
+  });
   program.command("show [session-id]").description("Show session details").action((sessionId) => {
     const config = defaultConfig();
     const db = new CartographyDB(config.dbPath);
@@ -2476,6 +3441,7 @@ ${infraSummary.substring(0, 12e3)}`;
     out(dim("        topology.mermaid      Infrastructure topology (graph TB)\n"));
     out(dim("        dependencies.mermaid  Service dependencies (graph LR)\n"));
     out(dim("        topology.html         Interactive D3.js force graph\n"));
+    out(dim("        cartography-map.html  Hex grid data cartography map\n"));
     out(dim("        sops/                 Generated SOPs as Markdown\n"));
     out(dim("        workflows/            Workflow flowcharts as Mermaid\n"));
     out("\n");
@@ -2617,7 +3583,7 @@ ${infraSummary.substring(0, 12e3)}`;
 `);
       return;
     }
-    const { NODE_TYPES: NODE_TYPES2 } = await import("./types-ROE3Z6HY.js");
+    const { NODE_TYPES: NODE_TYPES2 } = await import("./types-ZD6G5JKR.js");
     if (!process.stdin.isTTY) {
       w(red("\n  \u2717  Interactive mode requires a terminal (use --file for non-interactive)\n\n"));
       process.exitCode = 1;
@@ -2692,7 +3658,7 @@ ${infraSummary.substring(0, 12e3)}`;
 `);
   });
   program.command("doctor").description("Check all requirements and cloud CLIs").action(async () => {
-    const { execSync: execSync2 } = await import("child_process");
+    const { execSync: execSync3 } = await import("child_process");
     const { existsSync: existsSync3, readFileSync: readFileSync3 } = await import("fs");
     const { join: join3 } = await import("path");
     const out = (s) => process.stdout.write(s);
@@ -2715,7 +3681,7 @@ ${infraSummary.substring(0, 12e3)}`;
       allGood = false;
     }
     try {
-      const v = execSync2("claude --version", { stdio: "pipe" }).toString().trim();
+      const v = execSync3("claude --version", { stdio: "pipe" }).toString().trim();
       ok(`Claude CLI  ${dim2(v)}`);
     } catch {
       err("Claude CLI not found \u2014 npm i -g @anthropic-ai/claude-code");
@@ -2739,7 +3705,7 @@ ${infraSummary.substring(0, 12e3)}`;
       allGood = false;
     }
     try {
-      const v = execSync2("kubectl version --client --short 2>/dev/null || kubectl version --client", { stdio: "pipe" }).toString().split("\n")[0]?.trim() ?? "";
+      const v = execSync3("kubectl version --client --short 2>/dev/null || kubectl version --client", { stdio: "pipe" }).toString().split("\n")[0]?.trim() ?? "";
       ok(`kubectl  ${dim2(v || "(client OK)")}`);
     } catch {
       warn(`kubectl not found  ${dim2("\u2014 install: https://kubernetes.io/docs/tasks/tools/")}`);
@@ -2751,7 +3717,7 @@ ${infraSummary.substring(0, 12e3)}`;
     ];
     for (const [name, cmd, hint] of cloudClis) {
       try {
-        execSync2(cmd, { stdio: "pipe" });
+        execSync3(cmd, { stdio: "pipe" });
         ok(`${name}  ${dim2("(cloud scanning available)")}`);
       } catch {
         warn(`${name} not found  ${dim2("\u2014 cloud scan skipped | " + hint)}`);
@@ -2763,7 +3729,7 @@ ${infraSummary.substring(0, 12e3)}`;
     ];
     for (const [name, cmd] of localTools) {
       try {
-        execSync2(cmd, { stdio: "pipe" });
+        execSync3(cmd, { stdio: "pipe" });
         ok(`${name}  ${dim2("(discovery tool)")}`);
       } catch {
         warn(`${name} not found  ${dim2("\u2014 discovery without " + name + " will be limited")}`);