kyp-mem 0.3.0 → 0.4.1

package/kyp_mem/static/index.html

@@ -10,40 +10,40 @@
 <script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
 <style>
 :root {
-  --bg-void: #08080f;
-  --bg-primary: #0c0c16;
-  --bg-secondary: #0e0e1a;
-  --bg-tertiary: #070710;
-  --bg-hover: #121224;
-  --bg-active: #181836;
-  --bg-card: #101020;
-  --bg-surface: #0a0a15;
-
-  --neon-cyan: #00e8df;
-  --neon-green: #34d399;
-  --neon-magenta: #e879f9;
+  --bg-void: #09090b;
+  --bg-primary: #0d0d10;
+  --bg-secondary: #0f0f12;
+  --bg-tertiary: #08080a;
+  --bg-hover: #15151c;
+  --bg-active: #1c1c26;
+  --bg-card: #111116;
+  --bg-surface: #0b0b0e;
+
+  --neon-cyan: #D97757;
+  --neon-green: #5bb98c;
+  --neon-magenta: #c47ad7;
   --neon-purple: #a78bfa;
-  --neon-orange: #fb923c;
-  --neon-yellow: #fbbf24;
-  --neon-blue: #60a5fa;
-  --neon-red: #f87171;
+  --neon-orange: #e8935a;
+  --neon-yellow: #d4a853;
+  --neon-blue: #7da8d4;
+  --neon-red: #d47171;
 
-  --glow-cyan: 0 0 8px #00e8df30;
-  --glow-green: 0 0 8px #34d39930;
-  --glow-magenta: 0 0 8px #e879f930;
+  --glow-cyan: 0 0 8px #D9775730;
+  --glow-green: 0 0 8px #5bb98c30;
+  --glow-magenta: 0 0 8px #c47ad730;
 
-  --text-primary: #d4d4e8;
-  --text-secondary: #7a7a9a;
-  --text-muted: #3e3e5c;
-  --border: #16162a;
-  --border-subtle: #121225;
+  --text-primary: #d8d5cf;
+  --text-secondary: #807b73;
+  --text-muted: #55514a;
+  --border: rgba(255,255,255,0.06);
+  --border-subtle: rgba(255,255,255,0.03);
 
   --font: 'Inter', -apple-system, sans-serif;
   --font-mono: 'JetBrains Mono', monospace;
 
   --radius-sm: 4px;
-  --radius: 6px;
-  --radius-lg: 10px;
+  --radius: 8px;
+  --radius-lg: 12px;
 }
 
 * { margin: 0; padding: 0; box-sizing: border-box; }
@@ -51,6 +51,7 @@
 body {
   font-family: var(--font);
   background: var(--bg-void);
+  background-image: radial-gradient(circle at 50% 0%, var(--bg-secondary) 0%, var(--bg-void) 70%);
   color: var(--text-primary);
   height: 100vh;
   overflow: hidden;
@@ -62,8 +63,8 @@ body::before {
   position: fixed;
   inset: 0;
   background-image:
-    linear-gradient(rgba(0,232,223,0.015) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(0,232,223,0.015) 1px, transparent 1px);
+    linear-gradient(rgba(217,119,87,0.012) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(217,119,87,0.012) 1px, transparent 1px);
   background-size: 48px 48px;
   pointer-events: none;
   z-index: 0;
@@ -103,7 +104,7 @@ body::before {
 .resize-handle:hover,
 .resize-handle.dragging {
   background: var(--neon-cyan);
-  box-shadow: 0 0 12px rgba(0,232,223,0.2);
+  box-shadow: 0 0 12px rgba(217,119,87,0.2);
 }
 
 body.resizing { cursor: col-resize !important; user-select: none !important; }
@@ -113,7 +114,9 @@ body.resizing .resize-handle { pointer-events: auto !important; }
 /* ============ HEADER ============ */
 .header {
   grid-column: 1 / -1;
-  background: var(--bg-tertiary);
+  background: rgba(8,8,10,0.6);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
   border-bottom: 1px solid var(--border);
   display: flex;
   align-items: center;
@@ -191,9 +194,9 @@ body.resizing .resize-handle { pointer-events: auto !important; }
 }
 
 .header-btn.active {
-  border-color: rgba(0,232,223,0.3);
+  border-color: rgba(217,119,87,0.3);
   color: var(--neon-cyan);
-  background: rgba(0,232,223,0.05);
+  background: rgba(217,119,87,0.05);
 }
 
 .header-btn .dot {
@@ -229,8 +232,8 @@ body.resizing .resize-handle { pointer-events: auto !important; }
 .search-box input::placeholder { color: var(--text-muted); }
 
 .search-box input:focus {
-  border-color: rgba(0,232,223,0.3);
-  box-shadow: 0 0 16px rgba(0,232,223,0.08);
+  border-color: rgba(217,119,87,0.3);
+  box-shadow: 0 0 16px rgba(217,119,87,0.08);
   width: 260px;
 }
 
@@ -309,24 +312,27 @@ body.resizing .resize-handle { pointer-events: auto !important; }
 .quick-switcher-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(6,6,12,0.7);
+  background: rgba(6,6,12,0.6);
   z-index: 200;
   display: none;
   align-items: flex-start;
   justify-content: center;
   padding-top: 15vh;
-  backdrop-filter: blur(4px);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
 }
 
 .quick-switcher-overlay.active { display: flex; }
 
 .quick-switcher {
   width: 480px;
-  background: var(--bg-card);
+  background: rgba(17,17,22,0.85);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
-  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 1px var(--neon-cyan);
+  box-shadow: 0 24px 64px rgba(0,0,0,0.8), 0 0 0 1px rgba(217,119,87,0.1);
   overflow: hidden;
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
 }
 
 .quick-switcher input {
@@ -434,7 +440,7 @@ body.resizing .resize-handle { pointer-events: auto !important; }
 .tree-item:hover { background: var(--bg-hover); }
 
 .tree-item.active {
-  background: rgba(0,232,223,0.05);
+  background: rgba(217,119,87,0.05);
 }
 
 .tree-item.active::before {
@@ -523,9 +529,9 @@ body.resizing .resize-handle { pointer-events: auto !important; }
   font-size: 9px;
   padding: 2px 7px;
   border-radius: var(--radius-sm);
-  background: rgba(0,232,223,0.08);
+  background: rgba(217,119,87,0.08);
   color: var(--neon-cyan);
-  border: 1px solid rgba(0,232,223,0.2);
+  border: 1px solid rgba(217,119,87,0.2);
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -533,7 +539,7 @@ body.resizing .resize-handle { pointer-events: auto !important; }
   transition: all 0.15s;
 }
 
-.active-tag:hover { background: rgba(0,232,223,0.15); }
+.active-tag:hover { background: rgba(217,119,87,0.15); }
 .active-tag .remove { font-size: 11px; opacity: 0.5; }
 .active-tag .remove:hover { opacity: 1; }
 
@@ -566,9 +572,9 @@ body.resizing .resize-handle { pointer-events: auto !important; }
 }
 
 .tag-chip.selected {
-  background: rgba(0,232,223,0.08);
+  background: rgba(217,119,87,0.08);
   color: var(--neon-cyan);
-  border-color: rgba(0,232,223,0.2);
+  border-color: rgba(217,119,87,0.2);
 }
 
 .tag-chip .tag-count {
@@ -637,9 +643,9 @@ body.resizing .resize-handle { pointer-events: auto !important; }
 }
 
 .tag.clickable-tag:hover {
-  background: rgba(0,232,223,0.08);
+  background: rgba(217,119,87,0.08);
   color: var(--neon-cyan);
-  border-color: rgba(0,232,223,0.2);
+  border-color: rgba(217,119,87,0.2);
   cursor: pointer;
 }
 
@@ -657,119 +663,132 @@ body.resizing .resize-handle { pointer-events: auto !important; }
 
 /* ============ MARKDOWN ============ */
 .md-body h1 {
-  font-size: 26px;
+  font-size: 28px;
   font-weight: 700;
-  margin: 0 0 24px;
+  margin: 0 0 28px;
   color: var(--text-primary);
-  letter-spacing: -0.3px;
+  letter-spacing: -0.5px;
+  text-shadow: 0 0 15px rgba(255,255,255,0.05);
 }
 
 .md-body h2 {
-  font-size: 18px;
+  font-size: 20px;
   font-weight: 600;
-  margin: 36px 0 12px;
+  margin: 40px 0 16px;
   color: var(--text-primary);
-  padding-bottom: 8px;
-  border-bottom: 1px solid var(--border-subtle);
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--border);
 }
 
 .md-body h3 {
-  font-size: 15px;
+  font-size: 16px;
   font-weight: 600;
-  margin: 28px 0 8px;
+  margin: 32px 0 12px;
   color: var(--neon-purple);
+  text-shadow: 0 0 8px rgba(168,139,250,0.2);
 }
 
 .md-body p {
-  line-height: 1.8;
-  margin: 8px 0;
+  line-height: 1.9;
+  margin: 12px 0;
   color: var(--text-secondary);
-  font-size: 13.5px;
+  font-size: 14px;
 }
 
-.md-body ul, .md-body ol { padding-left: 24px; margin: 8px 0; }
+.md-body ul, .md-body ol { padding-left: 24px; margin: 12px 0; }
 
 .md-body li {
-  line-height: 1.8;
+  line-height: 1.9;
   color: var(--text-secondary);
-  margin: 2px 0;
-  font-size: 13.5px;
+  margin: 4px 0;
+  font-size: 14px;
 }
 
 .md-body li::marker { color: var(--text-muted); }
 
-.md-body a { color: var(--neon-blue); text-decoration: none; }
-.md-body a:hover { text-decoration: underline; }
+.md-body a { color: var(--neon-blue); text-decoration: none; transition: color 0.2s; }
+.md-body a:hover { color: var(--neon-cyan); text-decoration: underline; }
 
 .md-body strong { color: var(--text-primary); font-weight: 600; }
 
 .md-body code {
-  background: var(--bg-card);
-  padding: 1.5px 6px;
-  border-radius: 3px;
+  background: var(--bg-hover);
+  padding: 3px 6px;
+  border-radius: 4px;
   font-family: var(--font-mono);
-  font-size: 12px;
+  font-size: 12.5px;
   color: var(--neon-orange);
-  border: 1px solid var(--border-subtle);
+  border: 1px solid var(--border);
 }
 
 .md-body pre {
-  background: var(--bg-tertiary);
+  background: rgba(8,8,10,0.4);
   border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 16px 18px;
+  border-radius: var(--radius-lg);
+  padding: 20px;
   overflow-x: auto;
-  margin: 16px 0;
+  margin: 20px 0;
+  box-shadow: inset 0 2px 10px rgba(0,0,0,0.2);
 }
 
 .md-body pre code {
   background: none;
   padding: 0;
   border: none;
-  color: var(--text-primary);
-  font-size: 12px;
-  line-height: 1.7;
+  color: #c9c7c2;
+  font-size: 12.5px;
+  line-height: 1.8;
 }
 
 .md-body table {
   width: 100%;
-  border-collapse: collapse;
-  margin: 16px 0;
-  font-size: 12.5px;
+  border-collapse: separate;
+  border-spacing: 0;
+  margin: 24px 0;
+  font-size: 13px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
 }
 
 .md-body th {
   text-align: left;
-  padding: 8px 12px;
+  padding: 12px 16px;
   border-bottom: 1px solid var(--border);
-  color: var(--text-secondary);
+  background: rgba(255,255,255,0.02);
+  color: var(--text-primary);
   font-family: var(--font-mono);
   font-weight: 600;
-  font-size: 10px;
+  font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
 
 .md-body td {
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--border-subtle);
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
   color: var(--text-secondary);
+  transition: background 0.15s;
 }
 
-.md-body tr:hover td { background: var(--bg-hover); }
+.md-body tr:last-child td { border-bottom: none; }
+.md-body tr:hover td { background: var(--bg-hover); color: var(--text-primary); }
 
 .md-body blockquote {
-  border-left: 2px solid var(--neon-purple);
-  padding-left: 16px;
-  margin: 16px 0;
-  color: var(--text-muted);
+  border-left: 3px solid var(--neon-purple);
+  padding: 12px 20px;
+  margin: 20px 0;
+  color: var(--text-secondary);
+  background: linear-gradient(90deg, rgba(168,139,250,0.05), transparent);
+  border-radius: 0 var(--radius) var(--radius) 0;
+  font-style: italic;
 }
 
 .md-body hr {
   border: none;
   height: 1px;
-  background: var(--border);
-  margin: 28px 0;
+  background: linear-gradient(90deg, transparent, var(--border), transparent);
+  margin: 36px 0;
 }
 
 .wikilink {
@@ -783,7 +802,7 @@ body.resizing .resize-handle { pointer-events: auto !important; }
 
 .wikilink:hover {
   color: var(--neon-cyan);
-  border-bottom-color: rgba(0,232,223,0.4);
+  border-bottom-color: rgba(217,119,87,0.4);
 }
 
 /* ============ EMPTY STATE ============ */
@@ -840,15 +859,40 @@ body.resizing .resize-handle { pointer-events: auto !important; }
 
 .rp-section-title {
   font-family: var(--font-mono);
-  font-size: 9px;
+  font-size: 10px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 1.5px;
-  color: var(--text-muted);
+  color: var(--text-secondary);
   margin-bottom: 8px;
   display: flex;
   align-items: center;
   gap: 6px;
+  cursor: pointer;
+  padding: 4px 6px;
+  border-radius: var(--radius-sm);
+  transition: background 0.15s;
+}
+
+.rp-section-title:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.rp-section-title .arrow {
+  margin-left: auto;
+  font-size: 8px;
+  color: var(--text-muted);
+  transition: transform 0.2s;
+  transform: rotate(90deg);
+}
+
+.rp-section.collapsed .rp-section-title .arrow {
+  transform: rotate(0deg);
+}
+
+.rp-section.collapsed .rp-section-body {
+  display: none;
 }
 
 .rp-section-title .rp-count {
@@ -859,122 +903,582 @@ body.resizing .resize-handle { pointer-events: auto !important; }
   border-radius: 8px;
 }
 
-.rp-item {
-  display: flex;
+.rp-item {
+  display: flex;
+  align-items: center;
+  padding: 5px 8px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: 11px;
+  gap: 8px;
+  margin-bottom: 1px;
+  transition: background 0.1s;
+}
+
+.rp-item:hover { background: var(--bg-hover); }
+
+.rp-item .rp-score {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--neon-green);
+  min-width: 30px;
+  opacity: 0.8;
+}
+
+.rp-item .rp-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--neon-purple);
+  font-weight: 500;
+}
+
+.rp-item .rp-backlink-title { color: var(--neon-cyan); }
+
+/* ============ OUTLINE ============ */
+.outline-item {
+  display: block;
+  padding: 3px 8px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: 11px;
+  color: var(--text-secondary);
+  transition: all 0.1s;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-bottom: 1px;
+}
+
+.outline-item:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.outline-item.h2 { padding-left: 8px; }
+.outline-item.h3 { padding-left: 20px; font-size: 10px; color: var(--text-muted); }
+
+/* ============ GRAPH ============ */
+#graph-section { margin-bottom: 12px; transition: all 0.3s; }
+#graph-section.hidden { display: none; }
+
+#graph-section.maximized {
+  position: fixed;
+  inset: 40px;
+  z-index: 250;
+  background: rgba(17,17,22,0.95);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 24px 64px rgba(0,0,0,0.8), 0 0 0 1px rgba(217,119,87,0.3);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+}
+
+#graph-container {
+  width: 100%;
+  height: 200px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  background: transparent;
+}
+
+#graph-section.maximized #graph-container {
+  flex: 1;
+  height: auto !important;
+  border: none;
+}
+
+#graph-container svg { width: 100%; height: 100%; }
+
+.graph-node { cursor: pointer; }
+
+.graph-node circle {
+  fill: var(--neon-purple);
+  filter: drop-shadow(0 0 3px rgba(168,139,250,0.5));
+  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.graph-node:hover circle {
+  fill: var(--neon-cyan);
+  r: 8;
+  filter: drop-shadow(0 0 8px rgba(217,119,87,0.7));
+}
+
+.graph-node.active circle {
+  fill: var(--neon-cyan);
+  filter: drop-shadow(0 0 10px rgba(217,119,87,0.9));
+}
+
+.graph-node text {
+  fill: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  pointer-events: none;
+  transition: all 0.2s;
+  text-shadow: 0 0 2px var(--bg-primary), 0 0 4px var(--bg-primary);
+}
+
+.graph-node:hover text, .graph-node.active text {
+  fill: var(--text-primary);
+  font-size: 13px;
+}
+
+.graph-link {
+  stroke: var(--neon-purple);
+  stroke-width: 1.5;
+  transition: opacity 0.3s;
+}
+
+.graph-size-controls {
+  margin-left: auto;
+  display: flex;
+  gap: 2px;
+}
+
+.graph-size-btn {
+  background: var(--bg-hover);
+  border: 1px solid var(--border);
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  width: 18px;
+  height: 18px;
+  border-radius: 3px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s;
+  padding: 0;
+  line-height: 1;
+}
+
+.graph-size-btn:hover {
+  border-color: var(--neon-cyan);
+  color: var(--neon-cyan);
+}
+
+.graph-resize-handle {
+  height: 8px;
+  cursor: ns-resize;
+  position: relative;
+}
+
+.graph-resize-handle::after {
+  content: '';
+  position: absolute;
+  bottom: 2px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 24px;
+  height: 2px;
+  background: var(--border);
+  border-radius: 1px;
+  transition: background 0.2s;
+}
+
+.graph-resize-handle:hover::after {
+  background: var(--neon-cyan);
+}
+
+/* ============ SESSIONS PILLAR ============ */
+.pillar-divider {
+  height: 1px;
+  margin: 4px 12px;
+  background: linear-gradient(90deg, transparent, var(--border), transparent);
+}
+
+.pillar-label {
+  font-family: var(--font-mono);
+  font-size: 8px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  color: var(--text-muted);
+  padding: 10px 18px 4px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  user-select: none;
+}
+
+.pillar-label .pillar-accent {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  display: inline-block;
+  margin-right: 6px;
+}
+
+.pillar-label .pillar-accent.sessions { background: var(--neon-green); box-shadow: 0 0 6px var(--neon-green); }
+.pillar-label .pillar-accent.projects { background: var(--neon-cyan); box-shadow: 0 0 6px var(--neon-cyan); }
+
+.pillar-label .pillar-action {
+  font-size: 9px;
+  font-weight: 500;
+  color: var(--text-muted);
+  cursor: pointer;
+  padding: 1px 6px;
+  border-radius: 3px;
+  border: 1px solid transparent;
+  transition: all 0.15s;
+  letter-spacing: 0.5px;
+}
+
+.pillar-label .pillar-action:hover {
+  color: var(--neon-green);
+  border-color: rgba(91,185,140,0.3);
+}
+
+.session-search-box {
+  padding: 6px 12px 4px;
+}
+
+.session-search-box input {
+  width: 100%;
+  background: rgba(8,8,10,0.4);
+  border: 1px solid var(--border);
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  padding: 5px 10px 5px 24px;
+  border-radius: var(--radius);
+  outline: none;
+  transition: all 0.2s;
+}
+
+.session-search-box input::placeholder { color: var(--text-muted); }
+
+.session-search-box input:focus {
+  border-color: rgba(91,185,140,0.4);
+  box-shadow: 0 0 8px rgba(91,185,140,0.08);
+}
+
+.session-search-box {
+  position: relative;
+}
+
+.session-search-box .ss-icon {
+  position: absolute;
+  left: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--text-muted);
+  font-size: 10px;
+  pointer-events: none;
+}
+
+.session-search-results {
+  padding: 0 8px;
+  max-height: 180px;
+  overflow-y: auto;
+}
+
+.session-search-results:empty { display: none; }
+
+.ss-result {
+  padding: 5px 10px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  margin: 1px 0;
+  transition: background 0.1s;
+}
+
+.ss-result:hover { background: var(--bg-hover); }
+
+.ss-result .ss-title {
+  font-size: 11px;
+  color: var(--neon-green);
+  font-weight: 500;
+}
+
+.ss-result .ss-meta {
+  font-family: var(--font-mono);
+  font-size: 9px;
+  color: var(--text-muted);
+  margin-top: 1px;
+}
+
+.ss-result .ss-snippet {
+  font-size: 10px;
+  color: var(--text-secondary);
+  margin-top: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.session-project-group {
+  padding: 0 8px;
+}
+
+.session-project-header {
+  display: flex;
+  align-items: center;
+  padding: 5px 10px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  gap: 6px;
+  user-select: none;
+  transition: background 0.1s;
+  margin: 1px 0;
+}
+
+.session-project-header:hover { background: var(--bg-hover); }
+
+.session-project-header .sp-arrow {
+  width: 12px;
+  font-size: 8px;
+  color: var(--text-muted);
+  text-align: center;
+  flex-shrink: 0;
+  transition: transform 0.15s;
+}
+
+.session-project-header .sp-arrow.open { transform: rotate(90deg); }
+
+.session-project-header .sp-icon {
+  font-size: 11px;
+  color: var(--neon-green);
+  flex-shrink: 0;
+  opacity: 0.7;
+}
+
+.session-project-header .sp-name {
+  font-size: 12px;
+  color: var(--text-primary);
+  font-weight: 500;
+  flex: 1;
+}
+
+.session-project-header .sp-count {
+  font-family: var(--font-mono);
+  font-size: 9px;
+  color: var(--text-muted);
+  background: rgba(91,185,140,0.06);
+  padding: 1px 5px;
+  border-radius: 3px;
+}
+
+.session-project-header .sp-add {
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  width: 16px;
+  height: 16px;
+  border-radius: 3px;
+  cursor: pointer;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s;
+  padding: 0;
+  line-height: 1;
+}
+
+.session-project-header:hover .sp-add { display: flex; }
+.session-project-header .sp-add:hover { border-color: var(--neon-green); color: var(--neon-green); }
+
+.session-list {
+  padding-left: 12px;
+  overflow: hidden;
+}
+
+.session-list.collapsed { display: none; }
+
+.session-item {
+  display: flex;
+  align-items: center;
+  padding: 3px 10px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: 11px;
+  gap: 6px;
+  user-select: none;
+  transition: background 0.1s;
+  position: relative;
+  margin: 1px 0;
+}
+
+.session-item:hover { background: var(--bg-hover); }
+
+.session-item.active {
+  background: rgba(91,185,140,0.05);
+}
+
+.session-item.active::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 3px;
+  bottom: 3px;
+  width: 2px;
+  background: var(--neon-green);
+  border-radius: 1px;
+}
+
+.session-item .si-icon {
+  font-size: 9px;
+  color: var(--neon-green);
+  opacity: 0.5;
+  flex-shrink: 0;
+}
+
+.session-item .si-time {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-secondary);
+}
+
+.session-item.active .si-time { color: var(--neon-green); }
+
+.session-badge {
+  display: inline-flex;
   align-items: center;
-  padding: 5px 8px;
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  font-size: 11px;
   gap: 8px;
-  margin-bottom: 1px;
-  transition: background 0.1s;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--neon-green);
+  background: rgba(91,185,140,0.08);
+  border: 1px solid rgba(91,185,140,0.15);
+  padding: 4px 12px;
+  border-radius: var(--radius);
+  margin-bottom: 16px;
+  letter-spacing: 0.5px;
 }
 
-.rp-item:hover { background: var(--bg-hover); }
-
-.rp-item .rp-score {
+.session-empty {
+  padding: 12px 18px;
   font-family: var(--font-mono);
   font-size: 10px;
-  color: var(--neon-green);
-  min-width: 30px;
-  opacity: 0.8;
+  color: var(--text-muted);
+  text-align: center;
 }
 
-.rp-item .rp-title {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--neon-purple);
-  font-weight: 500;
+.session-create-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(6,6,12,0.6);
+  z-index: 200;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
 }
 
-.rp-item .rp-backlink-title { color: var(--neon-cyan); }
+.session-create-overlay.active { display: flex; }
 
-/* ============ OUTLINE ============ */
-.outline-item {
-  display: block;
-  padding: 3px 8px;
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  font-size: 11px;
-  color: var(--text-secondary);
-  transition: all 0.1s;
+.session-create-modal {
+  width: 420px;
+  background: rgba(17,17,22,0.85);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: 0 24px 64px rgba(0,0,0,0.8), 0 0 0 1px rgba(91,185,140,0.1);
   overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  margin-bottom: 1px;
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
 }
 
-.outline-item:hover {
-  background: var(--bg-hover);
-  color: var(--text-primary);
+.session-create-header {
+  padding: 16px 20px 12px;
+  border-bottom: 1px solid var(--border);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  letter-spacing: 0.5px;
 }
 
-.outline-item.h2 { padding-left: 8px; }
-.outline-item.h3 { padding-left: 20px; font-size: 10px; color: var(--text-muted); }
+.session-create-body {
+  padding: 16px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
 
-/* ============ GRAPH ============ */
-#graph-section { margin-bottom: 12px; }
-#graph-section.hidden { display: none; }
+.session-field label {
+  display: block;
+  font-family: var(--font-mono);
+  font-size: 9px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color: var(--text-muted);
+  margin-bottom: 4px;
+}
 
-#graph-container {
+.session-field select,
+.session-field input,
+.session-field textarea {
   width: 100%;
-  height: 200px;
-  border: 1px solid var(--border-subtle);
+  background: rgba(8,8,10,0.5);
+  border: 1px solid var(--border);
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  padding: 8px 12px;
   border-radius: var(--radius);
-  overflow: hidden;
-  background: var(--bg-tertiary);
+  outline: none;
+  transition: all 0.2s;
 }
 
-#graph-container svg { width: 100%; height: 100%; }
-
-.graph-node { cursor: pointer; }
-
-.graph-node circle {
-  fill: var(--neon-purple);
-  filter: drop-shadow(0 0 2px rgba(168,139,250,0.4));
-  transition: all 0.2s;
+.session-field select:focus,
+.session-field input:focus,
+.session-field textarea:focus {
+  border-color: rgba(91,185,140,0.4);
+  box-shadow: 0 0 8px rgba(91,185,140,0.1);
+  background: var(--bg-surface);
 }
 
-.graph-node:hover circle {
-  fill: var(--neon-cyan);
-  filter: drop-shadow(0 0 4px rgba(0,232,223,0.5));
+.session-field textarea {
+  min-height: 60px;
+  resize: vertical;
 }
 
-.graph-node.active circle {
-  fill: var(--neon-cyan);
-  r: 6;
-  filter: drop-shadow(0 0 6px rgba(0,232,223,0.5));
+.session-create-footer {
+  padding: 12px 20px;
+  border-top: 1px solid var(--border);
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
 }
 
-.graph-node text {
-  fill: var(--text-muted);
-  font-family: var(--font-mono);
-  font-size: 8px;
+.session-create-footer .edit-btn.create {
+  background: rgba(91,185,140,0.1);
+  color: var(--neon-green);
+  border-color: rgba(91,185,140,0.3);
 }
 
-.graph-link {
-  stroke: rgba(168,139,250,0.15);
-  stroke-width: 1;
+.session-create-footer .edit-btn.create:hover {
+  background: rgba(91,185,140,0.2);
+  box-shadow: 0 0 10px rgba(91,185,140,0.15);
+  transform: translateY(-1px);
 }
 
 /* ============ SCROLLBAR ============ */
-::-webkit-scrollbar { width: 4px; }
+::-webkit-scrollbar { width: 5px; height: 5px; }
 ::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
-::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
+::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }
+::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }
 
 /* ============ EDIT MODAL ============ */
 .edit-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(6,6,12,0.75);
+  background: rgba(6,6,12,0.6);
   z-index: 200;
   display: none;
   align-items: center;
   justify-content: center;
-  backdrop-filter: blur(4px);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
 }
 
 .edit-overlay.active { display: flex; }
@@ -982,13 +1486,15 @@ body.resizing .resize-handle { pointer-events: auto !important; }
 .edit-modal {
   width: 640px;
   max-height: 80vh;
-  background: var(--bg-card);
+  background: rgba(17,17,22,0.85);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
-  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
+  box-shadow: 0 24px 64px rgba(0,0,0,0.8), 0 0 0 1px rgba(217,119,87,0.1);
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
 }
 
 .edit-header {
@@ -996,7 +1502,7 @@ body.resizing .resize-handle { pointer-events: auto !important; }
   align-items: center;
   justify-content: space-between;
   padding: 12px 16px;
-  border-bottom: 1px solid var(--border-subtle);
+  border-bottom: 1px solid var(--border);
   font-family: var(--font-mono);
   font-size: 11px;
   color: var(--text-secondary);
@@ -1013,7 +1519,7 @@ body.resizing .resize-handle { pointer-events: auto !important; }
   border-radius: var(--radius);
   border: 1px solid var(--border);
   cursor: pointer;
-  transition: all 0.15s;
+  transition: all 0.2s ease-out;
   letter-spacing: 0.5px;
 }
 
@@ -1022,25 +1528,25 @@ body.resizing .resize-handle { pointer-events: auto !important; }
   color: var(--text-muted);
 }
 
-.edit-btn.cancel:hover { color: var(--text-secondary); border-color: var(--text-muted); }
+.edit-btn.cancel:hover { color: var(--text-secondary); border-color: var(--text-muted); transform: translateY(-1px); }
 
 .edit-btn.save {
-  background: rgba(0,232,223,0.1);
+  background: rgba(217,119,87,0.1);
   color: var(--neon-cyan);
-  border-color: rgba(0,232,223,0.3);
+  border-color: rgba(217,119,87,0.3);
 }
 
-.edit-btn.save:hover { background: rgba(0,232,223,0.2); }
+.edit-btn.save:hover { background: rgba(217,119,87,0.2); box-shadow: 0 0 10px rgba(217,119,87,0.15); transform: translateY(-1px); }
 
 .edit-textarea {
   flex: 1;
   min-height: 300px;
-  background: var(--bg-primary);
+  background: rgba(8,8,10,0.3);
   border: none;
   color: var(--text-primary);
   font-family: var(--font-mono);
   font-size: 13px;
-  line-height: 1.7;
+  line-height: 1.8;
   padding: 16px 20px;
   resize: none;
   outline: none;
@@ -1112,6 +1618,9 @@ body.resizing .resize-handle { pointer-events: auto !important; }
         <span class="dot"></span>
         <span>GRAPH</span>
       </button>
+      <button class="header-btn" id="new-project-btn" title="New project">
+        <span>+ PROJECT</span>
+      </button>
       <div class="search-box">
         <span class="search-icon">&#9906;</span>
         <input type="text" id="search-input" placeholder="Search...">
@@ -1124,8 +1633,26 @@ body.resizing .resize-handle { pointer-events: auto !important; }
   <!-- Left sidebar -->
   <div class="sidebar">
     <div class="sidebar-scroll">
+      <!-- SESSIONS PILLAR (Claude-Mem) -->
+      <div class="pillar-label">
+        <span><span class="pillar-accent sessions"></span>SESSIONS</span>
+        <span class="pillar-action" id="new-session-btn">+ NEW</span>
+      </div>
+      <div class="session-search-box">
+        <span class="ss-icon">&#9906;</span>
+        <input type="text" id="session-search-input" placeholder="Semantic search sessions...">
+      </div>
+      <div class="session-search-results" id="session-search-results"></div>
+      <div id="session-tree"></div>
+
+      <div class="pillar-divider"></div>
+
+      <!-- PROJECTS PILLAR (Obsidian) -->
+      <div class="pillar-label">
+        <span><span class="pillar-accent projects"></span>PROJECTS</span>
+        <span class="pillar-action" id="new-project-sidebar-btn">+ NEW</span>
+      </div>
       <div class="sidebar-section">
-        <div class="section-label">Explorer</div>
         <div id="filter-info" class="filter-info" style="display:none;">
           <span id="filter-count"></span>
           <span class="clear-btn" id="clear-filters">clear</span>
@@ -1164,28 +1691,29 @@ body.resizing .resize-handle { pointer-events: auto !important; }
   <!-- Right panel -->
   <div class="right-panel" id="right-panel">
     <div id="graph-section">
-      <div class="rp-section-title">Local Graph</div>
+      <div class="rp-section-title">Local Graph <span class="graph-size-controls"><button class="graph-size-btn" id="graph-shrink" title="Shrink graph">&minus;</button><button class="graph-size-btn" id="graph-grow" title="Grow graph">+</button><button class="graph-size-btn" id="graph-max" title="Maximize graph">&#9974;</button></span></div>
       <div id="graph-container"></div>
+      <div id="graph-resize-handle" class="graph-resize-handle"></div>
     </div>
     <div id="rp-outline" class="rp-section" style="display:none;">
-      <div class="rp-section-title">Outline <span class="rp-count" id="outline-count"></span></div>
-      <div id="rp-outline-list"></div>
+      <div class="rp-section-title" onclick="this.parentElement.classList.toggle('collapsed')">Outline <span class="rp-count" id="outline-count"></span><span class="arrow">&#9654;</span></div>
+      <div id="rp-outline-list" class="rp-section-body"></div>
     </div>
     <div id="rp-backlinks" class="rp-section" style="display:none;">
-      <div class="rp-section-title">Backlinks <span class="rp-count" id="bl-count"></span></div>
-      <div id="rp-backlinks-list"></div>
+      <div class="rp-section-title" onclick="this.parentElement.classList.toggle('collapsed')">Backlinks <span class="rp-count" id="bl-count"></span><span class="arrow">&#9654;</span></div>
+      <div id="rp-backlinks-list" class="rp-section-body"></div>
     </div>
     <div id="rp-related" class="rp-section" style="display:none;">
-      <div class="rp-section-title">Related <span class="rp-count" id="rel-count"></span></div>
-      <div id="rp-related-list"></div>
+      <div class="rp-section-title" onclick="this.parentElement.classList.toggle('collapsed')">Related <span class="rp-count" id="rel-count"></span><span class="arrow">&#9654;</span></div>
+      <div id="rp-related-list" class="rp-section-body"></div>
     </div>
     <div id="rp-outlinks" class="rp-section" style="display:none;">
-      <div class="rp-section-title">Outgoing Links <span class="rp-count" id="out-count"></span></div>
-      <div id="rp-outlinks-list"></div>
+      <div class="rp-section-title" onclick="this.parentElement.classList.toggle('collapsed')">Outgoing Links <span class="rp-count" id="out-count"></span><span class="arrow">&#9654;</span></div>
+      <div id="rp-outlinks-list" class="rp-section-body"></div>
     </div>
     <div id="rp-unlinked" class="rp-section" style="display:none;">
-      <div class="rp-section-title">Unlinked Mentions <span class="rp-count" id="unlinked-count"></span></div>
-      <div id="rp-unlinked-list"></div>
+      <div class="rp-section-title" onclick="this.parentElement.classList.toggle('collapsed')">Unlinked Mentions <span class="rp-count" id="unlinked-count"></span><span class="arrow">&#9654;</span></div>
+      <div id="rp-unlinked-list" class="rp-section-body"></div>
     </div>
   </div>
 </div>
@@ -1212,11 +1740,55 @@ body.resizing .resize-handle { pointer-events: auto !important; }
   </div>
 </div>
 
+<!-- Session Create Modal -->
+<div class="session-create-overlay" id="session-create-overlay">
+  <div class="session-create-modal">
+    <div class="session-create-header">NEW SESSION</div>
+    <div class="session-create-body">
+      <div class="session-field">
+        <label>Project</label>
+        <input type="text" id="session-project" list="project-list" placeholder="Project name...">
+        <datalist id="project-list"></datalist>
+      </div>
+      <div class="session-field">
+        <label>Summary</label>
+        <textarea id="session-summary" placeholder="What are you working on?"></textarea>
+      </div>
+    </div>
+    <div class="session-create-footer">
+      <button class="edit-btn cancel" id="session-cancel">CANCEL</button>
+      <button class="edit-btn create" id="session-create-btn">CREATE</button>
+    </div>
+  </div>
+</div>
+
+<!-- Project Create Modal -->
+<div class="session-create-overlay" id="project-create-overlay">
+  <div class="session-create-modal">
+    <div class="session-create-header">NEW PROJECT</div>
+    <div class="session-create-body">
+      <div class="session-field">
+        <label>Project Name</label>
+        <input type="text" id="project-name-input" placeholder="My Project...">
+      </div>
+      <div class="session-field">
+        <label>Overview (optional)</label>
+        <textarea id="project-overview-input" placeholder="Brief project description, goals, tech stack..."></textarea>
+      </div>
+    </div>
+    <div class="session-create-footer">
+      <button class="edit-btn cancel" id="project-cancel">CANCEL</button>
+      <button class="edit-btn create" id="project-create-btn">CREATE</button>
+    </div>
+  </div>
+</div>
+
 <script>
 let currentPath = null;
 let treeData = null;
 let allNotes = {};
 let graphVisible = true;
+let currentNote = null;
 let activeTagFilters = new Set();
 let qsSelectedIndex = 0;
 
@@ -1255,6 +1827,8 @@ document.addEventListener('keydown', (e) => {
   }
   if (e.key === 'Escape') {
     closeQuickSwitcher();
+    closeSessionCreate();
+    closeProjectCreate();
   }
 });
 
@@ -1350,9 +1924,11 @@ function updateQsSelection() {
   });
 }
 
-// --- File Tree ---
+// --- File Tree (Projects pillar only — no Sessions folders) ---
 function renderTree(node, container) {
   if (node.type === 'folder' && node.name !== 'vault') {
+    if (node.name === 'Sessions') return;
+
     const item = document.createElement('div');
     item.className = 'tree-item';
     item.innerHTML = `<span class="arrow open">&#9654;</span><span class="icon folder-icon">&#9776;</span><span class="name">${node.name}</span>`;
@@ -1374,7 +1950,8 @@ function renderTree(node, container) {
     const item = document.createElement('div');
     item.className = 'tree-item';
     item.dataset.path = node.path;
-    item.innerHTML = `<span class="arrow" style="visibility:hidden">&#9654;</span><span class="icon note-icon">&#9671;</span><span class="name">${node.name.replace('.md', '')}</span>`;
+    const displayName = node.name.replace('.md', '');
+    item.innerHTML = `<span class="arrow" style="visibility:hidden">&#9654;</span><span class="icon note-icon">&#9671;</span><span class="name">${displayName}</span>`;
     item.addEventListener('click', () => loadNote(node.path));
     container.appendChild(item);
 
@@ -1383,13 +1960,118 @@ function renderTree(node, container) {
   }
 }
 
+// --- Session Tree (Sessions pillar — grouped by project with dropdowns) ---
+function formatSessionTimestamp(filename) {
+  const stem = filename.replace('.md', '');
+  const match = stem.match(/^(\d{4})-(\d{2})-(\d{2})_(\d{2})(\d{2})(\d{2})$/);
+  if (!match) return stem;
+  const [, y, mo, d, h, mi] = match;
+  const hr = parseInt(h);
+  const ampm = hr >= 12 ? 'PM' : 'AM';
+  const hr12 = hr % 12 || 12;
+  const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
+  return `${months[parseInt(mo)-1]} ${parseInt(d)}, ${hr12}:${mi} ${ampm}`;
+}
+
+function renderSessionTree(sessionsData) {
+  const container = document.getElementById('session-tree');
+  container.innerHTML = '';
+
+  if (Object.keys(sessionsData).length === 0) {
+    container.innerHTML = '<div class="session-empty">No sessions yet</div>';
+    return;
+  }
+
+  const sortedProjects = Object.keys(sessionsData).sort();
+  sortedProjects.forEach(project => {
+    const sessions = sessionsData[project];
+    const group = document.createElement('div');
+    group.className = 'session-project-group';
+
+    const header = document.createElement('div');
+    header.className = 'session-project-header';
+    header.innerHTML = `
+      <span class="sp-arrow open">&#9654;</span>
+      <span class="sp-icon">&#9716;</span>
+      <span class="sp-name">${project}</span>
+      <span class="sp-count">${sessions.length}</span>
+      <button class="sp-add" title="New session for ${project}">+</button>
+    `;
+
+    const list = document.createElement('div');
+    list.className = 'session-list';
+
+    sessions.sort((a, b) => b.path.localeCompare(a.path));
+    sessions.forEach(session => {
+      const item = document.createElement('div');
+      item.className = 'session-item';
+      item.dataset.path = session.path;
+      const displayTime = formatSessionTimestamp(session.path.split('/').pop());
+      item.innerHTML = `<span class="si-icon">&#9679;</span><span class="si-time">${displayTime}</span>`;
+      item.title = session.title || session.path;
+      item.addEventListener('click', () => loadNote(session.path));
+      list.appendChild(item);
+    });
+
+    header.addEventListener('click', (e) => {
+      if (e.target.classList.contains('sp-add')) {
+        e.stopPropagation();
+        openSessionCreate(project);
+        return;
+      }
+      e.stopPropagation();
+      header.querySelector('.sp-arrow').classList.toggle('open');
+      list.classList.toggle('collapsed');
+    });
+
+    group.appendChild(header);
+    group.appendChild(list);
+    container.appendChild(group);
+  });
+}
+
+// --- Session Semantic Search ---
+let sessionSearchTimeout;
+const sessionSearchInput = document.getElementById('session-search-input');
+const sessionSearchResults = document.getElementById('session-search-results');
+
+sessionSearchInput.addEventListener('input', () => {
+  clearTimeout(sessionSearchTimeout);
+  const q = sessionSearchInput.value.trim();
+  if (!q) { sessionSearchResults.innerHTML = ''; return; }
+  sessionSearchTimeout = setTimeout(async () => {
+    const results = await fetchJSON(`/api/sessions/search?q=${encodeURIComponent(q)}`);
+    sessionSearchResults.innerHTML = '';
+    if (results.length === 0) {
+      sessionSearchResults.innerHTML = '<div class="ss-result"><span class="ss-meta">No matching sessions</span></div>';
+      return;
+    }
+    results.forEach(r => {
+      const div = document.createElement('div');
+      div.className = 'ss-result';
+      const dist = r.distance !== undefined ? ` &middot; dist: ${r.distance.toFixed(2)}` : '';
+      div.innerHTML = `<div class="ss-title">${r.title}</div><div class="ss-meta">${r.path}${dist}</div>${r.snippet ? `<div class="ss-snippet">${r.snippet.substring(0, 120)}</div>` : ''}`;
+      div.addEventListener('click', () => {
+        loadNote(r.path);
+        sessionSearchInput.value = '';
+        sessionSearchResults.innerHTML = '';
+      });
+      sessionSearchResults.appendChild(div);
+    });
+  }, 250);
+});
+
 // --- Note rendering ---
 async function loadNote(path) {
   currentPath = path;
   const note = await fetchJSON(`/api/note/${path}`);
   if (note.error) return;
+  currentNote = note;
 
-  document.querySelectorAll('.tree-item').forEach(el => {
+  document.querySelectorAll('.tree-item[data-path]').forEach(el => {
+    el.classList.toggle('active', el.dataset.path === path);
+  });
+  document.querySelectorAll('.session-item[data-path]').forEach(el => {
     el.classList.toggle('active', el.dataset.path === path);
   });
 
@@ -1404,6 +2086,13 @@ async function loadNote(path) {
   let html = '<div class="fade-in">';
 
   html += `<button class="note-edit-btn" onclick="openEditor('${path}')">EDIT</button>`;
+
+  const isSession = path.includes('/Sessions/') || path.startsWith('Sessions/');
+  if (isSession) {
+    const sessionProject = path.includes('/Sessions/') ? path.split('/Sessions/')[0] : 'General';
+    html += `<div class="session-badge">&#9716; SESSION &middot; ${sessionProject}</div>`;
+  }
+
   html += '<div class="note-properties">';
   (note.tags || []).forEach(t => { html += `<span class="tag clickable-tag" data-tag="${t}">#${t}</span>`; });
   Object.entries(note.properties || {}).forEach(([k, v]) => {
@@ -1619,6 +2308,156 @@ document.addEventListener('keydown', (e) => {
   }
 });
 
+// --- Session Management ---
+function openSessionCreate(defaultProject) {
+  const overlay = document.getElementById('session-create-overlay');
+  const projectInput = document.getElementById('session-project');
+  const datalist = document.getElementById('project-list');
+  const summaryInput = document.getElementById('session-summary');
+
+  const projects = new Set();
+  for (const path of Object.keys(allNotes)) {
+    const parts = path.split('/');
+    if (parts.length > 1) projects.add(parts[0]);
+  }
+
+  datalist.innerHTML = '';
+  for (const p of [...projects].sort()) {
+    const opt = document.createElement('option');
+    opt.value = p;
+    datalist.appendChild(opt);
+  }
+
+  projectInput.value = defaultProject || '';
+  summaryInput.value = '';
+  overlay.classList.add('active');
+
+  if (defaultProject) summaryInput.focus();
+  else projectInput.focus();
+}
+
+function closeSessionCreate() {
+  document.getElementById('session-create-overlay').classList.remove('active');
+}
+
+document.getElementById('session-cancel').addEventListener('click', closeSessionCreate);
+document.getElementById('session-create-overlay').addEventListener('click', (e) => {
+  if (e.target === e.currentTarget) closeSessionCreate();
+});
+
+document.getElementById('session-create-btn').addEventListener('click', async () => {
+  const project = document.getElementById('session-project').value.trim();
+  const summary = document.getElementById('session-summary').value.trim();
+
+  if (!project) {
+    document.getElementById('session-project').focus();
+    return;
+  }
+
+  const resp = await fetch('/api/sessions/create', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ project, summary }),
+  });
+
+  const result = await resp.json();
+  if (result.ok) {
+    closeSessionCreate();
+    await refreshTree();
+    loadNote(result.path);
+  }
+});
+
+// --- Sidebar pillar buttons ---
+document.getElementById('new-session-btn').addEventListener('click', () => openSessionCreate(''));
+
+document.getElementById('new-project-sidebar-btn').addEventListener('click', () => {
+  document.getElementById('project-create-overlay').classList.add('active');
+  document.getElementById('project-name-input').value = '';
+  document.getElementById('project-overview-input').value = '';
+  document.getElementById('project-name-input').focus();
+});
+
+// --- Project Management ---
+function closeProjectCreate() {
+  document.getElementById('project-create-overlay').classList.remove('active');
+}
+
+document.getElementById('new-project-btn').addEventListener('click', () => {
+  document.getElementById('project-create-overlay').classList.add('active');
+  document.getElementById('project-name-input').value = '';
+  document.getElementById('project-overview-input').value = '';
+  document.getElementById('project-name-input').focus();
+});
+
+document.getElementById('project-cancel').addEventListener('click', closeProjectCreate);
+document.getElementById('project-create-overlay').addEventListener('click', (e) => {
+  if (e.target === e.currentTarget) closeProjectCreate();
+});
+
+document.getElementById('project-create-btn').addEventListener('click', async () => {
+  const name = document.getElementById('project-name-input').value.trim();
+  const overview = document.getElementById('project-overview-input').value.trim();
+  if (!name) {
+    document.getElementById('project-name-input').focus();
+    return;
+  }
+  const resp = await fetch('/api/projects/create', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ name, overview }),
+  });
+  const result = await resp.json();
+  if (result.ok) {
+    closeProjectCreate();
+    await refreshTree();
+    loadNote(result.path);
+  }
+});
+
+async function refreshTree() {
+  const [rawTreeData, sessionsData, stats] = await Promise.all([
+    fetchJSON('/api/tree'),
+    fetchJSON('/api/sessions'),
+    fetchJSON('/api/stats'),
+  ]);
+
+  allNotes = {};
+  function walk(node) {
+    if (node.type === 'note') {
+      allNotes[node.path] = { title: node.name.replace('.md', ''), tags: node.tags || [] };
+    }
+    (node.children || []).forEach(walk);
+  }
+  walk(rawTreeData);
+
+  const treeEl = document.getElementById('file-tree');
+  treeEl.innerHTML = '';
+  renderTree(rawTreeData, treeEl);
+
+  renderSessionTree(sessionsData);
+  renderTagCloud(collectAllTags());
+
+  document.getElementById('stats-bar').innerHTML = `
+    <span><span class="stat-val">${stats.notes}</span> notes</span>
+    <span><span class="stat-val">${stats.folders}</span> folders</span>
+    <span><span class="stat-val">${stats.tags}</span> tags</span>
+    <span><span class="stat-val">${stats.links}</span> links</span>
+  `;
+
+  markActiveItems();
+}
+
+function markActiveItems() {
+  if (!currentPath) return;
+  document.querySelectorAll('.tree-item[data-path]').forEach(el => {
+    el.classList.toggle('active', el.dataset.path === currentPath);
+  });
+  document.querySelectorAll('.session-item[data-path]').forEach(el => {
+    el.classList.toggle('active', el.dataset.path === currentPath);
+  });
+}
+
 // --- Graph ---
 function renderGraph(note) {
   const container = document.getElementById('graph-container');
@@ -1627,71 +2466,202 @@ function renderGraph(note) {
   const nodes = new Map();
   const links = [];
 
-  nodes.set(note.path, { id: note.path, title: note.title, active: true });
+  nodes.set(note.path, { id: note.path, title: note.title, active: true, tags: note.tags || [] });
+
+  const projectPrefix = note.path.includes('/') ? note.path.split('/')[0] + '/' : '';
+  const inSameProject = (p) => !projectPrefix ? !p.includes('/') : p.startsWith(projectPrefix);
 
   (note.links || []).forEach(link => {
     const path = findNotePath(link);
-    if (path && !nodes.has(path)) {
-      const n = allNotes[path];
-      nodes.set(path, { id: path, title: n ? n.title : link, active: false });
+    if (path && inSameProject(path)) {
+      if (!nodes.has(path)) {
+        const n = allNotes[path];
+        nodes.set(path, { id: path, title: n ? n.title : link, active: false, tags: n ? n.tags : [] });
+      }
+      links.push({ source: note.path, target: path });
     }
-    if (path) links.push({ source: note.path, target: path });
   });
 
-  (note.backlinks || []).forEach(path => {
-    if (!nodes.has(path)) {
-      const n = allNotes[path];
-      nodes.set(path, { id: path, title: n ? n.title : path, active: false });
+  (note.backlinks || []).forEach(bl => {
+    const blPath = typeof bl === 'string' ? bl : (bl && bl.path);
+    if (!blPath) return;
+    if (inSameProject(blPath)) {
+      if (!nodes.has(blPath)) {
+        const n = allNotes[blPath];
+        const title = (bl && typeof bl === 'object' && bl.title) ? bl.title : (n ? n.title : blPath);
+        nodes.set(blPath, { id: blPath, title, active: false, tags: n ? n.tags : [] });
+      }
+      links.push({ source: blPath, target: note.path });
     }
-    links.push({ source: path, target: note.path });
   });
 
   (note.related || []).forEach(r => {
-    if (!nodes.has(r.path)) {
-      nodes.set(r.path, { id: r.path, title: r.title, active: false });
+    if (r.path && inSameProject(r.path)) {
+      if (!nodes.has(r.path)) {
+        const n = allNotes[r.path];
+        nodes.set(r.path, { id: r.path, title: r.title, active: false, tags: n ? n.tags : [] });
+      }
+      links.push({ source: note.path, target: r.path, dashed: true });
     }
   });
 
   const nodeArray = Array.from(nodes.values());
+  nodeArray.forEach(n => n.degree = 0);
+  links.forEach(l => {
+    const s = nodes.get(l.source);
+    const t = nodes.get(l.target);
+    if (s) s.degree++;
+    if (t) t.degree++;
+  });
+
   if (nodeArray.length < 2) {
-    container.innerHTML = '<svg></svg>';
+    container.innerHTML = '<div style="display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-muted);font-size:10px;font-family:var(--font-mono)">No connections</div>';
     return;
   }
 
-  const width = container.clientWidth;
-  const height = container.clientHeight;
+  const isMaximized = document.getElementById('graph-section').classList.contains('maximized');
+  const width = container.clientWidth || 248;
+  const height = container.clientHeight || 200;
+  const margin = isMaximized ? 60 : 24;
 
   const svg = d3.select(container).append('svg')
     .attr('viewBox', `0 0 ${width} ${height}`);
 
+  const g = svg.append('g');
+
+  svg.call(d3.zoom()
+    .scaleExtent([0.2, 4])
+    .on('zoom', (event) => g.attr('transform', event.transform))
+  );
+
   const simulation = d3.forceSimulation(nodeArray)
-    .force('link', d3.forceLink(links).id(d => d.id).distance(50))
-    .force('charge', d3.forceManyBody().strength(-100))
+    .force('link', d3.forceLink(links).id(d => d.id).distance(isMaximized ? 150 : 80))
+    .force('charge', d3.forceManyBody().strength(d => isMaximized ? -300 - (d.degree * 40) : -100 - (d.degree * 20)))
     .force('center', d3.forceCenter(width / 2, height / 2))
-    .force('collision', d3.forceCollide().radius(22));
+    .force('collision', d3.forceCollide().radius(d => {
+      const textWidth = d.title.length * (isMaximized ? 6 : 4.5);
+      return (isMaximized ? textWidth + 10 : 12) + (d.degree * 2);
+    }));
 
-  const link = svg.selectAll('.graph-link')
+  const linkEl = g.selectAll('.graph-link')
     .data(links).enter().append('line')
-    .attr('class', 'graph-link');
+    .attr('class', 'graph-link')
+    .attr('stroke-dasharray', d => d.dashed ? '3,3' : null)
+    .style('opacity', d => d.dashed ? 0.3 : 0.6);
 
-  const node = svg.selectAll('.graph-node')
+  const node = g.selectAll('.graph-node')
     .data(nodeArray).enter().append('g')
     .attr('class', d => 'graph-node' + (d.active ? ' active' : ''))
-    .on('click', (e, d) => loadNote(d.id))
+    .on('click', (e, d) => {
+      e.stopPropagation();
+      loadNote(d.id);
+      if (isMaximized) {
+        document.getElementById('graph-section').classList.remove('maximized');
+        isGraphMaximized = false;
+        renderGraph(currentNote);
+      }
+    })
     .call(d3.drag()
       .on('start', (e, d) => { if (!e.active) simulation.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; })
       .on('drag', (e, d) => { d.fx = e.x; d.fy = e.y; })
       .on('end', (e, d) => { if (!e.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; })
     );
 
-  node.append('circle').attr('r', d => d.active ? 5 : 3.5);
-  node.append('text').text(d => d.title).attr('dx', 10).attr('dy', 3);
+  node.append('circle').attr('r', d => d.active ? 8 : Math.min(12, 3 + (d.degree * 1.2)));
+  node.append('text').text(d => d.title).attr('dx', d => (d.active ? 8 : Math.min(12, 3 + (d.degree * 1.2))) + 6).attr('dy', 3);
+
+  if (isMaximized) {
+    node.append('text')
+      .text(d => {
+        let hash = 0;
+        for (let i = 0; i < d.id.length; i++) hash = Math.imul(31, hash) + d.id.charCodeAt(i) | 0;
+        const v1 = ((Math.abs(hash) % 1000) / 1000).toFixed(3);
+        const v2 = ((Math.abs(hash * 13) % 1000) / 1000).toFixed(3);
+        const v3 = ((Math.abs(hash * 17) % 1000) / 1000).toFixed(3);
+        return `[${v1}, ${v2}, ${v3}, ...]`;
+      })
+      .attr('dx', d => (d.active ? 8 : Math.min(12, 3 + (d.degree * 1.2))) + 6)
+      .attr('dy', 16)
+      .style('fill', 'var(--neon-purple)')
+      .style('font-size', '8px')
+      .style('opacity', '0.8')
+      .style('pointer-events', 'none')
+      .style('font-family', 'var(--font-mono)');
+      
+    node.append('text')
+      .text(d => d.id ? d.id.split('/').slice(0, -1).join('/') : '')
+      .attr('dx', d => (d.active ? 8 : Math.min(12, 3 + (d.degree * 1.2))) + 6)
+      .attr('dy', 26)
+      .style('fill', 'var(--text-muted)')
+      .style('font-size', '8px')
+      .style('pointer-events', 'none');
+  }
 
   simulation.on('tick', () => {
-    link
+    linkEl
       .attr('x1', d => d.source.x).attr('y1', d => d.source.y)
       .attr('x2', d => d.target.x).attr('y2', d => d.target.y);
-    node.attr('transform', d => `translate(${d.x},${d.y})`);
+    node.attr('transform', d => {
+      d.x = Math.max(margin, Math.min(width - margin, d.x));
+      d.y = Math.max(margin, Math.min(height - margin, d.y));
+      return `translate(${d.x},${d.y})`;
+    });
+  });
+}
+
+// --- Graph Resize ---
+let graphHeight = parseInt(localStorage.getItem('kyp-graph-h')) || 200;
+let isGraphMaximized = false;
+
+function initGraphResize() {
+  const container = document.getElementById('graph-container');
+  const section = document.getElementById('graph-section');
+  container.style.height = graphHeight + 'px';
+
+  document.getElementById('graph-max').addEventListener('click', () => {
+    isGraphMaximized = !isGraphMaximized;
+    section.classList.toggle('maximized', isGraphMaximized);
+    if (graphVisible && currentNote) renderGraph(currentNote);
+  });
+
+  document.getElementById('graph-shrink').addEventListener('click', () => {
+    graphHeight = Math.max(100, graphHeight - 50);
+    container.style.height = graphHeight + 'px';
+    localStorage.setItem('kyp-graph-h', graphHeight);
+    if (graphVisible && currentNote) renderGraph(currentNote);
+  });
+
+  document.getElementById('graph-grow').addEventListener('click', () => {
+    graphHeight = Math.min(600, graphHeight + 50);
+    container.style.height = graphHeight + 'px';
+    localStorage.setItem('kyp-graph-h', graphHeight);
+    if (graphVisible && currentNote) renderGraph(currentNote);
+  });
+
+  const handle = document.getElementById('graph-resize-handle');
+  handle.addEventListener('mousedown', (e) => {
+    e.preventDefault();
+    const startY = e.clientY;
+    const startH = graphHeight;
+    document.body.style.cursor = 'ns-resize';
+    document.body.style.userSelect = 'none';
+
+    function onMove(ev) {
+      graphHeight = Math.max(100, Math.min(600, startH + (ev.clientY - startY)));
+      container.style.height = graphHeight + 'px';
+    }
+
+    function onUp() {
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+      localStorage.setItem('kyp-graph-h', graphHeight);
+      if (graphVisible && currentNote) renderGraph(currentNote);
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+    }
+
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
   });
 }
 
@@ -1899,8 +2869,13 @@ function initResize() {
 
 // --- Init ---
 async function init() {
-  treeData = await fetchJSON('/api/tree');
-  const stats = await fetchJSON('/api/stats');
+  const [rawTreeData, sessionsData, stats] = await Promise.all([
+    fetchJSON('/api/tree'),
+    fetchJSON('/api/sessions'),
+    fetchJSON('/api/stats'),
+  ]);
+
+  treeData = rawTreeData;
 
   function walk(node) {
     if (node.type === 'note') {
@@ -1919,6 +2894,7 @@ async function init() {
   await Promise.all(promises);
 
   renderTree(treeData, document.getElementById('file-tree'));
+  renderSessionTree(sessionsData);
   renderTagCloud(collectAllTags());
 
   document.getElementById('stats-bar').innerHTML = `
@@ -1930,6 +2906,7 @@ async function init() {
 }
 
 initResize();
+initGraphResize();
 init();
 </script>
 </body>