@mgamil/mapx 0.2.4

package/dist/ui/styles.css

@@ -0,0 +1,573 @@
+/* Reset & Core Design System */
+:root {
+  /* One Dark Pro Color Palette Variables */
+  --bg-main: #14161a;
+  --bg-sidebar: #1b1d23;
+  --bg-panel: #1b1d23;
+  --bg-card: #21252b;
+  --bg-input: #1b1d23;
+  --border-color: rgba(62, 68, 82, 0.6);
+  --border-hover: rgba(75, 82, 99, 0.8);
+  
+  --text-main: #abb2bf;
+  --text-muted: #5c6370;
+  --text-bright: #e06c75;
+  --text-white: #ffffff;
+  
+  /* One Dark Pro Syntax Highlight Colors */
+  --syntax-blue: #61afef;
+  --syntax-purple: #c678dd;
+  --syntax-green: #98c379;
+  --syntax-red: #e06c75;
+  --syntax-orange: #d19a66;
+  --syntax-yellow: #e5c07b;
+  --syntax-cyan: #56b6c2;
+  
+  --accent-color: var(--syntax-blue);
+  --accent-gradient: linear-gradient(135deg, #61afef 0%, #c678dd 100%);
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: 'Outfit', sans-serif;
+  background-color: var(--bg-main);
+  color: var(--text-main);
+  overflow: hidden;
+  height: 100vh;
+  display: flex;
+}
+
+/* App Layout */
+.app-layout {
+  display: grid;
+  grid-template-columns: 300px 1fr;
+  width: 100%;
+  height: 100%;
+}
+
+/* Sidebar styling */
+.sidebar {
+  background: var(--bg-sidebar);
+  border-right: 1px solid var(--border-color);
+  display: flex;
+  flex-direction: column;
+  padding: 24px 18px;
+  justify-content: space-between;
+}
+
+.sidebar-header {
+  margin-bottom: 30px;
+}
+
+.logo {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--text-white);
+  letter-spacing: -0.5px;
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+  /* gap: 8px; */
+}
+
+.logo-accent {
+  background: var(--accent-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.status-indicator {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: var(--text-muted);
+}
+
+.indicator-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.indicator-dot.online {
+  background-color: var(--syntax-green);
+  box-shadow: 0 0 8px var(--syntax-green);
+}
+
+.nav-menu {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex-grow: 1;
+  margin-top: 15px;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: transparent;
+  border: none;
+  color: var(--text-main);
+  padding: 10px 14px;
+  font-size: 14px;
+  font-weight: 500;
+  text-align: left;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.nav-svg-icon {
+  width: 18px;
+  height: 18px;
+  stroke: var(--text-main);
+  stroke-width: 1.8;
+  transition: stroke 0.2s ease, transform 0.2s ease;
+}
+
+.nav-item:hover {
+  color: var(--text-white);
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.nav-item:hover .nav-svg-icon {
+  stroke: var(--text-white);
+  transform: translateX(2px);
+}
+
+.nav-item.active {
+  color: var(--text-white);
+  background: rgba(255, 255, 255, 0.07);
+  font-weight: 600;
+}
+
+/* Tab-specific icon colors on hover / active */
+.nav-item[data-tab="graph"].active .nav-svg-icon,
+.nav-item[data-tab="graph"]:hover .nav-svg-icon {
+  stroke: var(--syntax-blue);
+}
+
+.nav-item[data-tab="symbols"].active .nav-svg-icon,
+.nav-item[data-tab="symbols"]:hover .nav-svg-icon {
+  stroke: var(--syntax-yellow);
+}
+
+.nav-item[data-tab="routes"].active .nav-svg-icon,
+.nav-item[data-tab="routes"]:hover .nav-svg-icon {
+  stroke: var(--syntax-green);
+}
+
+.nav-item[data-tab="metrics"].active .nav-svg-icon,
+.nav-item[data-tab="metrics"]:hover .nav-svg-icon {
+  stroke: var(--syntax-purple);
+}
+
+.nav-item[data-tab="context"].active .nav-svg-icon,
+.nav-item[data-tab="context"]:hover .nav-svg-icon {
+  stroke: var(--syntax-orange);
+}
+
+.nav-item[data-tab="tool-log"].active .nav-svg-icon,
+.nav-item[data-tab="tool-log"]:hover .nav-svg-icon {
+  stroke: var(--syntax-cyan);
+}
+
+.sidebar-footer {
+  border-top: 1px solid var(--border-color);
+  padding-top: 15px;
+}
+
+.stats-mini {
+  font-size: 13px;
+  color: var(--text-muted);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.stats-mini strong {
+  color: var(--text-main);
+}
+
+/* Main Content styling */
+.main-content {
+  background-color: var(--bg-main);
+  height: 100%;
+  overflow-y: auto;
+  position: relative;
+}
+
+.tab-pane {
+  display: none;
+  padding: 30px;
+  height: 100%;
+  animation: fadeIn 0.3s ease;
+}
+
+.tab-pane.active {
+  display: flex;
+  flex-direction: column;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* Common UI Elements */
+.panel-header {
+  margin-bottom: 24px;
+}
+
+.panel-header h2 {
+  font-size: 24px;
+  font-weight: 600;
+  margin-bottom: 4px;
+  color: var(--text-white);
+}
+
+.subtitle {
+  color: var(--text-muted);
+  font-size: 14px;
+}
+
+.form-control {
+  background: var(--bg-input);
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  color: var(--text-white);
+  padding: 10px 14px;
+  font-size: 14px;
+  width: 100%;
+  transition: border-color 0.2s ease;
+}
+
+.form-control:focus {
+  outline: none;
+  border-color: var(--syntax-blue);
+}
+
+.btn {
+  background: var(--syntax-blue);
+  border: none;
+  color: var(--bg-main);
+  border-radius: 6px;
+  padding: 10px 18px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.btn:hover {
+  filter: brightness(1.15);
+}
+
+.btn-secondary {
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--text-main);
+  border: 1px solid var(--border-color);
+}
+
+.btn-secondary:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-white);
+}
+
+/* Graph Explorer Layout */
+.graph-container {
+  display: grid;
+  grid-template-columns: 1fr 340px;
+  gap: 20px;
+  height: 100%;
+  flex-grow: 1;
+  position: relative;
+}
+
+#cy {
+  background-color: var(--bg-main);
+  border-radius: 12px;
+  border: 1px solid var(--border-color);
+  height: 100%;
+  position: relative;
+}
+
+.graph-toolbar {
+  position: absolute;
+  top: 15px;
+  left: 15px;
+  z-index: 10;
+  display: flex;
+  gap: 8px;
+  background: rgba(33, 37, 43, 0.9);
+  padding: 8px;
+  border-radius: 8px;
+  border: 1px solid var(--border-color);
+  backdrop-filter: blur(10px);
+}
+
+.form-select {
+  background: var(--bg-input);
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  color: var(--text-white);
+  padding: 6px 12px;
+}
+
+.details-panel {
+  background: var(--bg-panel);
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  backdrop-filter: blur(12px);
+  color: var(--text-main);
+}
+
+.details-panel h3 {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 15px;
+  border-bottom: 1px solid var(--border-color);
+  padding-bottom: 10px;
+  color: var(--text-white);
+}
+
+.details-panel strong {
+  color: var(--text-white);
+}
+
+.details-placeholder {
+  color: var(--text-muted);
+  font-size: 14px;
+  text-align: center;
+  margin-top: 40px;
+}
+
+/* Split views for details/explorer */
+.split-view {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  flex-grow: 1;
+}
+
+.split-left {
+  overflow-y: auto;
+  border-right: 1px solid var(--border-color);
+  padding-right: 20px;
+}
+
+.split-right {
+  overflow-y: auto;
+  padding-left: 20px;
+  background: rgba(33, 37, 43, 0.4);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  padding: 20px;
+}
+
+/* Data Tables */
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.data-table th, .data-table td {
+  padding: 12px;
+  text-align: left;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.data-table th {
+  color: var(--text-muted);
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.data-table td {
+  font-size: 14px;
+}
+
+.data-table tr:hover {
+  background: rgba(255, 255, 255, 0.03);
+  cursor: pointer;
+}
+
+/* Sub tabs */
+.tabs-sub {
+  display: flex;
+  gap: 12px;
+  border-bottom: 1px solid var(--border-color);
+  margin-bottom: 20px;
+}
+
+.tab-sub-btn {
+  background: transparent;
+  border: none;
+  color: var(--text-muted);
+  padding: 10px 16px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: color 0.2s ease;
+}
+
+.tab-sub-btn:hover {
+  color: var(--text-main);
+}
+
+.tab-sub-btn.active {
+  color: var(--text-white);
+  border-bottom: 2px solid var(--syntax-blue);
+  font-weight: 500;
+}
+
+.subtab-pane {
+  display: none;
+}
+
+.subtab-pane.active {
+  display: block;
+}
+
+/* Grid Metrics */
+.grid-metrics {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+}
+
+.metric-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  padding: 20px;
+}
+
+.metric-card h3 {
+  font-size: 16px;
+  margin-bottom: 15px;
+  color: var(--text-muted);
+}
+
+.metric-card ol {
+  padding-left: 20px;
+  color: var(--text-main);
+}
+
+.metric-card ol li {
+  margin-bottom: 8px;
+  font-size: 14px;
+}
+
+/* Console Log for Tool Intercepts */
+.log-console {
+  background: var(--bg-input);
+  border-radius: 8px;
+  border: 1px solid var(--border-color);
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 13px;
+  padding: 15px;
+  flex-grow: 1;
+  overflow-y: auto;
+  max-height: 500px;
+}
+
+.log-entry {
+  margin-bottom: 12px;
+  line-height: 1.5;
+}
+
+.log-time {
+  color: var(--text-muted);
+  margin-right: 8px;
+}
+
+.log-name {
+  color: var(--syntax-blue);
+  font-weight: 500;
+}
+
+.log-input {
+  color: var(--syntax-green);
+}
+
+.log-result {
+  color: var(--text-main);
+  padding-left: 15px;
+  border-left: 2px solid var(--border-color);
+  margin-top: 4px;
+  white-space: pre-wrap;
+}
+
+.log-duration {
+  color: var(--syntax-orange);
+  font-size: 11px;
+  margin-left: 6px;
+  opacity: 0.8;
+}
+
+.log-status {
+  margin-right: 4px;
+  font-size: 12px;
+}
+
+.context-input-group {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 24px;
+}
+
+.context-results-container {
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  padding: 20px;
+  min-height: 200px;
+}
+
+/* Sticky Symbol Explorer Right Panel */
+#tab-symbols .split-right {
+  position: sticky;
+  top: 30px;
+  max-height: calc(100vh - 180px);
+  align-self: start;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Neat looking scrollbars for code */
+.neat-scrollbar::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.neat-scrollbar::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.15);
+  border-radius: 3px;
+}
+
+.neat-scrollbar::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 3px;
+  transition: background 0.2s ease;
+}
+
+.neat-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.neat-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.15) rgba(0, 0, 0, 0.15);
+}

package/dist/ui-events.d.ts

@@ -0,0 +1,36 @@
+import { EventEmitter } from 'node:events';
+
+interface ToolCallEvent {
+    tool: string;
+    input: any;
+    timestamp: string;
+    durationMs?: number;
+    success?: boolean;
+    error?: string;
+}
+interface ScanProgressEvent {
+    current: number;
+    total: number;
+    file: string;
+}
+interface ScanCompleteEvent {
+    filesCount: number;
+    durationMs: number;
+}
+declare function getToolCallsLogPath(mapxDir: string): string;
+declare class UiEventBus extends EventEmitter {
+    private static instance;
+    private mapxDir;
+    static getInstance(): UiEventBus;
+    /**
+     * Set the .mapx directory so tool calls can be persisted to disk.
+     * Must be called once after the project directory is known.
+     */
+    setMapxDir(dir: string): void;
+    emitToolCall(event: ToolCallEvent): void;
+    emitScanProgress(event: ScanProgressEvent): void;
+    emitScanComplete(event: ScanCompleteEvent): void;
+    private trimLogIfNeeded;
+}
+
+export { type ScanCompleteEvent, type ScanProgressEvent, type ToolCallEvent, UiEventBus, getToolCallsLogPath };

package/dist/ui-events.js

@@ -0,0 +1,61 @@
+import { EventEmitter } from "node:events";
+import { appendFileSync, existsSync, mkdirSync } from "node:fs";
+import { join } from "node:path";
+const TOOL_CALLS_LOG = "tool-calls.jsonl";
+const MAX_LOG_LINES = 500;
+function getToolCallsLogPath(mapxDir) {
+  return join(mapxDir, TOOL_CALLS_LOG);
+}
+class UiEventBus extends EventEmitter {
+  static instance = null;
+  mapxDir = null;
+  static getInstance() {
+    if (!UiEventBus.instance) {
+      UiEventBus.instance = new UiEventBus();
+    }
+    return UiEventBus.instance;
+  }
+  /**
+   * Set the .mapx directory so tool calls can be persisted to disk.
+   * Must be called once after the project directory is known.
+   */
+  setMapxDir(dir) {
+    this.mapxDir = join(dir, ".mapx");
+    if (!existsSync(this.mapxDir)) {
+      mkdirSync(this.mapxDir, { recursive: true });
+    }
+  }
+  emitToolCall(event) {
+    this.emit("tool-call", event);
+    if (this.mapxDir) {
+      try {
+        const logPath = getToolCallsLogPath(this.mapxDir);
+        appendFileSync(logPath, JSON.stringify(event) + "\n", "utf-8");
+        this.trimLogIfNeeded(logPath);
+      } catch {
+      }
+    }
+  }
+  emitScanProgress(event) {
+    this.emit("scan-progress", event);
+  }
+  emitScanComplete(event) {
+    this.emit("scan-complete", event);
+  }
+  trimLogIfNeeded(logPath) {
+    try {
+      const { readFileSync, writeFileSync } = require("node:fs");
+      const content = readFileSync(logPath, "utf-8");
+      const lines = content.split("\n").filter(Boolean);
+      if (lines.length > MAX_LOG_LINES) {
+        const trimmed = lines.slice(-MAX_LOG_LINES);
+        writeFileSync(logPath, trimmed.join("\n") + "\n", "utf-8");
+      }
+    } catch {
+    }
+  }
+}
+export {
+  UiEventBus,
+  getToolCallsLogPath
+};

package/dist/ui-server.d.ts

@@ -0,0 +1,12 @@
+import * as http from 'http';
+import { IncomingMessage, ServerResponse } from 'node:http';
+
+interface ServerOpts {
+    port: number;
+    host: string;
+    token?: string;
+    dir: string;
+}
+declare function startUiServer(opts: ServerOpts): http.Server<typeof IncomingMessage, typeof ServerResponse>;
+
+export { startUiServer };