memorix 1.0.4 → 1.0.6

package/dist/dashboard/static/index.html

@@ -164,6 +164,10 @@
     <div id="page-team" class="page"></div>
   </main>
 
+  <!-- Cytoscape.js + Dagre layout for topology graph -->
+  <script src="https://unpkg.com/cytoscape@3.30.4/dist/cytoscape.min.js"></script>
+  <script src="https://unpkg.com/dagre@0.8.5/dist/dagre.min.js"></script>
+  <script src="https://unpkg.com/cytoscape-dagre@2.5.0/cytoscape-dagre.js"></script>
   <script src="/app.js"></script>
 </body>
 

package/dist/dashboard/static/style.css

@@ -618,47 +618,519 @@ body {
 }
 
 /* ============================================================
- * Knowledge Graph - Cosmic Theme (zditor-inspired)
+ * Knowledge Graph — Enterprise Topology Explorer
+ * 3-column layout: Filter | Canvas | Inspector
  * ============================================================ */
 
 .graph-layout {
   display: flex;
   gap: 0;
   height: calc(100vh - 140px);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+/* ── Left: Filter / View Panel ────────────────────────────── */
+.graph-filter-panel {
+  width: 220px;
+  flex-shrink: 0;
+  background: var(--bg-card);
+  border-right: 1px solid var(--border-subtle);
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.gfp-section {
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.gfp-section:last-child {
+  border-bottom: none;
+}
+
+.gfp-label {
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  margin-bottom: 10px;
+}
+
+.gfp-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.gfp-radio {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--text-secondary);
+  transition: background var(--transition-fast);
+  border: none;
+  background: none;
+  width: 100%;
+  font-family: var(--font-sans);
+  text-align: left;
+}
+
+.gfp-radio:hover {
+  background: rgba(255,255,255,0.04);
+}
+
+.gfp-radio.active {
+  background: rgba(208, 188, 255, 0.08);
+  color: var(--text-primary);
+  font-weight: 500;
+}
+
+.gfp-radio-dot {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  border: 2px solid var(--border-medium);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.gfp-radio.active .gfp-radio-dot {
+  border-color: var(--accent-purple);
+}
+
+.gfp-radio.active .gfp-radio-dot::after {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--accent-purple);
+}
+
+.gfp-check {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 8px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--text-secondary);
+  transition: background var(--transition-fast);
+  border: none;
+  background: none;
+  width: 100%;
+  font-family: var(--font-sans);
+  text-align: left;
+}
+
+.gfp-check:hover {
+  background: rgba(255,255,255,0.04);
 }
 
+.gfp-check-box {
+  width: 14px;
+  height: 14px;
+  border-radius: 3px;
+  border: 2px solid var(--border-medium);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 9px;
+  color: transparent;
+}
+
+.gfp-check.active .gfp-check-box {
+  background: var(--accent-purple);
+  border-color: var(--accent-purple);
+  color: #0B0B14;
+}
+
+.gfp-check-count {
+  margin-left: auto;
+  font-size: 10px;
+  font-family: var(--font-mono);
+  color: var(--text-muted);
+}
+
+.gfp-type-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.gfp-depth-row {
+  display: flex;
+  gap: 4px;
+}
+
+.gfp-depth-btn {
+  flex: 1;
+  padding: 6px 0;
+  border: 1px solid var(--border-medium);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: 11px;
+  font-weight: 500;
+  font-family: var(--font-sans);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.gfp-depth-btn:hover {
+  border-color: var(--text-muted);
+}
+
+.gfp-depth-btn.active {
+  background: var(--accent-purple);
+  border-color: var(--accent-purple);
+  color: #0B0B14;
+  font-weight: 600;
+}
+
+.gfp-search {
+  width: 100%;
+  padding: 7px 10px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  font-size: 12px;
+  outline: none;
+  transition: border-color var(--transition-fast);
+}
+
+.gfp-search:focus {
+  border-color: var(--accent-purple);
+}
+
+.gfp-search::placeholder {
+  color: var(--text-muted);
+}
+
+/* ── Center: Graph Container (Cytoscape.js) ───────────────── */
 #graph-container {
   flex: 1;
   min-width: 0;
-  background: radial-gradient(ellipse at 50% 120%, #1a1040 0%, #0B0B14 60%, #06060C 100%);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-lg);
+  background: var(--bg-base);
   overflow: hidden;
   position: relative;
+  display: flex;
+  flex-direction: column;
 }
 
-#graph-canvas {
-  width: 100%;
+#cytoscape-mount {
+  flex: 1;
+  min-height: 0;
+}
+
+.graph-status-bar {
+  height: 28px;
+  flex-shrink: 0;
+  background: var(--bg-card);
+  border-top: 1px solid var(--border-subtle);
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  gap: 16px;
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.graph-status-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.graph-zoom-controls {
+  margin-left: auto;
+  display: flex;
+  gap: 2px;
+}
+
+.graph-zoom-btn {
+  width: 24px;
+  height: 22px;
+  border: 1px solid var(--border-subtle);
+  background: transparent;
+  color: var(--text-muted);
+  border-radius: 3px;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 600;
+  transition: all var(--transition-fast);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.graph-zoom-btn:hover {
+  background: var(--bg-card-hover);
+  color: var(--text-primary);
+}
+
+/* ── Right: Inspector Panel ───────────────────────────────── */
+.graph-inspector {
+  width: 280px;
+  flex-shrink: 0;
+  background: var(--bg-card);
+  border-left: 1px solid var(--border-subtle);
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.gi-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   height: 100%;
+  color: var(--text-muted);
+  font-size: 12px;
+  text-align: center;
+  padding: 20px;
+}
+
+.gi-empty-icon {
+  font-size: 28px;
+  margin-bottom: 8px;
+  opacity: 0.3;
+}
+
+.gi-header {
+  padding: 16px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.gi-name {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 4px;
+  word-break: break-word;
+}
+
+.gi-type {
+  font-size: 11px;
+  font-family: var(--font-mono);
+  color: var(--text-muted);
+}
+
+.gi-stats {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1px;
+  background: var(--border-subtle);
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.gi-stat {
+  background: var(--bg-card);
+  padding: 10px 16px;
+  text-align: center;
+}
+
+.gi-stat-value {
+  font-size: 16px;
+  font-weight: 600;
+  font-family: var(--font-mono);
+  color: var(--text-primary);
+}
+
+.gi-stat-label {
+  font-size: 10px;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.gi-section {
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.gi-section:last-child {
+  border-bottom: none;
+}
+
+.gi-section-title {
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.gi-section-count {
+  font-size: 10px;
+  font-weight: 500;
+  padding: 1px 6px;
+  border-radius: var(--radius-sm);
+  background: rgba(208, 188, 255, 0.1);
+  color: var(--accent-purple);
+}
+
+.gi-obs-item {
+  font-size: 12px;
+  color: var(--text-secondary);
+  line-height: 1.5;
+  padding: 6px 10px;
+  margin-bottom: 4px;
+  border-radius: var(--radius-sm);
+  background: var(--bg-surface);
+  border-left: 2px solid var(--accent-purple);
+  word-break: break-word;
+}
+
+.gi-rel-item {
+  font-size: 12px;
+  color: var(--text-secondary);
+  padding: 4px 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
 }
 
-/* Floating graph control panel (zditor-style) */
-.graph-panel {
+.gi-rel-arrow {
+  color: var(--accent-purple);
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.gi-rel-type {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--accent-purple);
+  padding: 1px 6px;
+  background: rgba(208, 188, 255, 0.06);
+  border-radius: var(--radius-sm);
+  flex-shrink: 0;
+}
+
+.gi-rel-target {
+  font-weight: 500;
+  color: var(--text-primary);
+  cursor: pointer;
+  transition: color var(--transition-fast);
+}
+
+.gi-rel-target:hover {
+  color: var(--accent-purple);
+}
+
+/* ── Graph Tooltip ────────────────────────────────────────── */
+.graph-tooltip {
   position: absolute;
-  top: 16px;
-  right: 16px;
-  width: 260px;
-  background: rgba(14, 14, 26, 0.85);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: var(--radius-lg);
-  z-index: 20;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
-  overflow: hidden;
-  transition: opacity var(--transition-normal);
+  background: var(--bg-card);
+  border: 1px solid var(--border-medium);
+  border-radius: var(--radius-sm);
+  padding: 8px 12px;
+  font-size: 12px;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--transition-fast);
+  z-index: 100;
+  max-width: 260px;
+  box-shadow: var(--elevation-2);
 }
 
+.graph-tooltip.visible {
+  opacity: 1;
+}
+
+.graph-tooltip-name {
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 2px;
+}
+
+.graph-tooltip-type {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+/* ── Table View ───────────────────────────────────────────── */
+.graph-table-container {
+  flex: 1;
+  overflow: auto;
+  background: var(--bg-base);
+}
+
+.graph-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+
+.graph-table th {
+  text-align: left;
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--border-subtle);
+  background: var(--bg-card);
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+
+.graph-table td {
+  padding: 8px 14px;
+  border-bottom: 1px solid var(--border-subtle);
+  color: var(--text-secondary);
+}
+
+.graph-table tr:hover td {
+  background: rgba(208, 188, 255, 0.02);
+}
+
+.graph-table tr {
+  cursor: pointer;
+  transition: background var(--transition-fast);
+}
+
+.graph-table .entity-name {
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.graph-table .entity-type-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: 6px;
+  vertical-align: middle;
+}
+
+/* Hide old graph elements */
+.graph-panel { display: none; }
+.graph-detail-drawer { display: none; }
+.graph-detail { display: none; }
+.graph-detail-empty { display: none; }
+
 .graph-panel-tabs {
   display: flex;
   border-bottom: 1px solid rgba(255, 255, 255, 0.06);