kyp-mem 0.4.0 → 0.4.2

package/kyp_mem/static/index.html

@@ -34,16 +34,16 @@
 
   --text-primary: #d8d5cf;
   --text-secondary: #807b73;
-  --text-muted: #44413a;
-  --border: #1c1a17;
-  --border-subtle: #16150f;
+  --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(217,119,87,0.015) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(217,119,87,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;
@@ -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;
@@ -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 {
@@ -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 {
@@ -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 {
@@ -915,16 +959,37 @@ body.resizing .resize-handle { pointer-events: auto !important; }
 .outline-item.h3 { padding-left: 20px; font-size: 10px; color: var(--text-muted); }
 
 /* ============ GRAPH ============ */
-#graph-section { margin-bottom: 12px; }
+#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-subtle);
+  border: 1px solid var(--border);
   border-radius: var(--radius);
   overflow: hidden;
-  background: var(--bg-tertiary);
+  background: transparent;
+}
+
+#graph-section.maximized #graph-container {
+  flex: 1;
+  height: auto !important;
+  border: none;
 }
 
 #graph-container svg { width: 100%; height: 100%; }
@@ -933,30 +998,39 @@ body.resizing .resize-handle { pointer-events: auto !important; }
 
 .graph-node circle {
   fill: var(--neon-purple);
-  filter: drop-shadow(0 0 2px rgba(168,139,250,0.4));
-  transition: all 0.2s;
+  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);
-  filter: drop-shadow(0 0 4px rgba(217,119,87,0.5));
+  r: 8;
+  filter: drop-shadow(0 0 8px rgba(217,119,87,0.7));
 }
 
 .graph-node.active circle {
   fill: var(--neon-cyan);
-  r: 6;
-  filter: drop-shadow(0 0 6px rgba(217,119,87,0.5));
+  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: 8px;
+  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: rgba(168,139,250,0.15);
-  stroke-width: 1;
+  stroke: var(--neon-purple);
+  stroke-width: 1.5;
+  transition: opacity 0.3s;
 }
 
 .graph-size-controls {
@@ -1011,10 +1085,186 @@ body.resizing .resize-handle { pointer-events: auto !important; }
   background: var(--neon-cyan);
 }
 
-/* ============ SESSIONS ============ */
-.session-folder-icon { color: var(--neon-green) !important; }
+/* ============ 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-add-btn {
+.session-project-header .sp-add {
   background: transparent;
   border: 1px solid var(--border);
   color: var(--text-muted);
@@ -1024,7 +1274,6 @@ body.resizing .resize-handle { pointer-events: auto !important; }
   height: 16px;
   border-radius: 3px;
   cursor: pointer;
-  margin-left: auto;
   display: none;
   align-items: center;
   justify-content: center;
@@ -1033,13 +1282,62 @@ body.resizing .resize-handle { pointer-events: auto !important; }
   line-height: 1;
 }
 
-.tree-item:hover .session-add-btn { display: flex; }
+.session-project-header:hover .sp-add { display: flex; }
+.session-project-header .sp-add:hover { border-color: var(--neon-green); color: var(--neon-green); }
 
-.session-add-btn:hover {
-  border-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;
@@ -1055,31 +1353,42 @@ body.resizing .resize-handle { pointer-events: auto !important; }
   letter-spacing: 0.5px;
 }
 
+.session-empty {
+  padding: 12px 18px;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-muted);
+  text-align: center;
+}
+
 .session-create-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);
 }
 
 .session-create-overlay.active { display: flex; }
 
 .session-create-modal {
   width: 420px;
-  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(91,185,140,0.1);
   overflow: hidden;
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
 }
 
 .session-create-header {
   padding: 16px 20px 12px;
-  border-bottom: 1px solid var(--border-subtle);
+  border-bottom: 1px solid var(--border);
   font-family: var(--font-mono);
   font-size: 11px;
   font-weight: 600;
@@ -1109,7 +1418,7 @@ body.resizing .resize-handle { pointer-events: auto !important; }
 .session-field input,
 .session-field textarea {
   width: 100%;
-  background: var(--bg-surface);
+  background: rgba(8,8,10,0.5);
   border: 1px solid var(--border);
   color: var(--text-primary);
   font-family: var(--font-mono);
@@ -1117,13 +1426,15 @@ body.resizing .resize-handle { pointer-events: auto !important; }
   padding: 8px 12px;
   border-radius: var(--radius);
   outline: none;
-  transition: border-color 0.2s;
+  transition: all 0.2s;
 }
 
 .session-field select:focus,
 .session-field input:focus,
 .session-field textarea:focus {
-  border-color: rgba(217,119,87,0.3);
+  border-color: rgba(91,185,140,0.4);
+  box-shadow: 0 0 8px rgba(91,185,140,0.1);
+  background: var(--bg-surface);
 }
 
 .session-field textarea {
@@ -1133,7 +1444,7 @@ body.resizing .resize-handle { pointer-events: auto !important; }
 
 .session-create-footer {
   padding: 12px 20px;
-  border-top: 1px solid var(--border-subtle);
+  border-top: 1px solid var(--border);
   display: flex;
   justify-content: flex-end;
   gap: 8px;
@@ -1147,24 +1458,27 @@ body.resizing .resize-handle { pointer-events: auto !important; }
 
 .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; }
@@ -1172,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 {
@@ -1186,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);
@@ -1203,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;
 }
 
@@ -1212,7 +1528,7 @@ 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(217,119,87,0.1);
@@ -1220,17 +1536,17 @@ body.resizing .resize-handle { pointer-events: auto !important; }
   border-color: rgba(217,119,87,0.3);
 }
 
-.edit-btn.save:hover { background: rgba(217,119,87,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;
@@ -1317,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>
@@ -1357,29 +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 <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></span></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>
@@ -1590,28 +1924,19 @@ function updateQsSelection() {
   });
 }
 
-// --- File Tree ---
-function renderTree(node, container, parentFolder) {
+// --- File Tree (Projects pillar only — no Sessions folders) ---
+function renderTree(node, container) {
   if (node.type === 'folder' && node.name !== 'vault') {
-    const isSessionsFolder = node.name === 'Sessions';
+    if (node.name === 'Sessions') return;
+
     const item = document.createElement('div');
     item.className = 'tree-item';
-
-    if (isSessionsFolder) {
-      item.innerHTML = `<span class="arrow open">&#9654;</span><span class="icon session-folder-icon">&#9716;</span><span class="name">Sessions</span><button class="session-add-btn" data-project="${parentFolder || ''}" title="New session">+</button>`;
-    } else {
-      item.innerHTML = `<span class="arrow open">&#9654;</span><span class="icon folder-icon">&#9776;</span><span class="name">${node.name}</span>`;
-    }
+    item.innerHTML = `<span class="arrow open">&#9654;</span><span class="icon folder-icon">&#9776;</span><span class="name">${node.name}</span>`;
 
     const children = document.createElement('div');
     children.className = 'tree-children';
 
     item.addEventListener('click', (e) => {
-      if (e.target.classList.contains('session-add-btn')) {
-        e.stopPropagation();
-        openSessionCreate(e.target.dataset.project);
-        return;
-      }
       e.stopPropagation();
       item.querySelector('.arrow').classList.toggle('open');
       children.classList.toggle('collapsed');
@@ -1619,29 +1944,13 @@ function renderTree(node, container, parentFolder) {
 
     container.appendChild(item);
     container.appendChild(children);
-    (node.children || []).forEach(c => renderTree(c, children, node.name));
+    (node.children || []).forEach(c => renderTree(c, children));
 
   } else if (node.type === 'note') {
     const item = document.createElement('div');
     item.className = 'tree-item';
     item.dataset.path = node.path;
-
-    const isSessionNote = node.path.includes('/Sessions/') || node.path.startsWith('Sessions/');
-    let displayName = node.name.replace('.md', '');
-
-    if (isSessionNote) {
-      const match = displayName.match(/^(\d{4})-(\d{2})-(\d{2})_(\d{2})(\d{2})(\d{2})$/);
-      if (match) {
-        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'];
-        displayName = `${months[parseInt(mo)-1]} ${parseInt(d)}, ${hr12}:${mi} ${ampm}`;
-        item.title = node.name.replace('.md', '');
-      }
-    }
-
+    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);
@@ -1651,6 +1960,107 @@ function renderTree(node, container, parentFolder) {
   }
 }
 
+// --- 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;
@@ -1658,7 +2068,10 @@ async function loadNote(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);
   });
 
@@ -1955,6 +2368,16 @@ document.getElementById('session-create-btn').addEventListener('click', async ()
   }
 });
 
+// --- 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');
@@ -1993,7 +2416,12 @@ document.getElementById('project-create-btn').addEventListener('click', async ()
 });
 
 async function refreshTree() {
-  treeData = await fetchJSON('/api/tree');
+  const [rawTreeData, sessionsData, stats] = await Promise.all([
+    fetchJSON('/api/tree'),
+    fetchJSON('/api/sessions'),
+    fetchJSON('/api/stats'),
+  ]);
+
   allNotes = {};
   function walk(node) {
     if (node.type === 'note') {
@@ -2001,14 +2429,15 @@ async function refreshTree() {
     }
     (node.children || []).forEach(walk);
   }
-  walk(treeData);
+  walk(rawTreeData);
 
   const treeEl = document.getElementById('file-tree');
   treeEl.innerHTML = '';
-  renderTree(treeData, treeEl);
+  renderTree(rawTreeData, treeEl);
+
+  renderSessionTree(sessionsData);
   renderTagCloud(collectAllTags());
 
-  const stats = await fetchJSON('/api/stats');
   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>
@@ -2016,11 +2445,17 @@ async function refreshTree() {
     <span><span class="stat-val">${stats.links}</span> links</span>
   `;
 
-  if (currentPath) {
-    document.querySelectorAll('.tree-item').forEach(el => {
-      el.classList.toggle('active', el.dataset.path === currentPath);
-    });
-  }
+  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 ---
@@ -2031,44 +2466,63 @@ 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(bl => {
     const blPath = typeof bl === 'string' ? bl : (bl && bl.path);
     if (!blPath) return;
-    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 });
+    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: blPath, 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 });
     }
-    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 = '<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 isMaximized = document.getElementById('graph-section').classList.contains('maximized');
   const width = container.clientWidth || 248;
   const height = container.clientHeight || 200;
-  const margin = 24;
+  const margin = isMaximized ? 60 : 24;
 
   const svg = d3.select(container).append('svg')
     .attr('viewBox', `0 0 ${width} ${height}`);
@@ -2076,34 +2530,72 @@ function renderGraph(note) {
   const g = svg.append('g');
 
   svg.call(d3.zoom()
-    .scaleExtent([0.3, 3])
+    .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(60))
-    .force('charge', d3.forceManyBody().strength(-120))
+    .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(25));
+    .force('collision', d3.forceCollide().radius(d => {
+      const textWidth = d.title.length * (isMaximized ? 6 : 4.5);
+      return (isMaximized ? textWidth + 10 : 12) + (d.degree * 2);
+    }));
 
   const linkEl = g.selectAll('.graph-link')
     .data(links).enter().append('line')
     .attr('class', 'graph-link')
     .attr('stroke-dasharray', d => d.dashed ? '3,3' : null)
-    .style('opacity', d => d.dashed ? 0.5 : 1);
+    .style('opacity', d => d.dashed ? 0.3 : 0.6);
 
   const node = g.selectAll('.graph-node')
     .data(nodeArray).enter().append('g')
     .attr('class', d => 'graph-node' + (d.active ? ' active' : ''))
-    .on('click', (e, d) => { e.stopPropagation(); 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 ? 6 : 4);
-  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', () => {
     linkEl
@@ -2119,11 +2611,19 @@ function renderGraph(note) {
 
 // --- 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';
@@ -2369,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') {
@@ -2389,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 = `