feat: Add notification system for core memory view with animations

ccw/src/templates/dashboard-css/14-graph-explorer.css

@@ -262,7 +262,6 @@
  * ======================================== */
 .node-details-panel {
   width: 320px;
-  display: none;
   flex-direction: column;
   background: hsl(var(--card));
   border: 1px solid hsl(var(--border));
@@ -272,7 +271,11 @@
   max-height: 100%;
 }
 
-.node-details-panel.visible {
+.node-details-panel.hidden {
+  display: none;
+}
+
+.node-details-panel:not(.hidden) {
   display: flex;
   animation: slideInRight 0.3s ease;
 }
@@ -1180,14 +1183,14 @@
 }
 
 .graph-sidebar {
-  width: 240px;
-  min-width: 240px;
+  width: 280px;
+  min-width: 280px;
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
   gap: 0;
   overflow-y: auto;
-  padding: 0.5rem 1rem 0.5rem 0;
+  padding: 0.5rem 1.25rem 0.5rem 0;
   border-right: 1px solid hsl(var(--border));
   margin-right: 1rem;
 }
@@ -1210,22 +1213,22 @@
   font-size: 0.75rem;
   font-weight: 600;
   color: hsl(var(--muted-foreground));
-  margin: 0 0 0.75rem 0;
+  margin: 0 0 1rem 0;
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
 
 .graph-legend-section {
   border-top: 1px solid hsl(var(--border));
-  padding-top: 1rem;
-  margin-top: 0.5rem;
+  padding-top: 1.5rem;
+  margin-top: 1.5rem;
 }
 
 /* Graph Legend */
 .graph-legend {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.75rem;
 }
 
 .legend-title {
@@ -1234,7 +1237,8 @@
   color: hsl(var(--muted-foreground));
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  margin-bottom: 0.25rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
 }
 
 .legend-dot {
@@ -1334,13 +1338,13 @@
 .filter-dropdowns {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 1.5rem;
 }
 
 .filter-group {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.75rem;
 }
 
 .filter-group > label {
@@ -1349,42 +1353,135 @@
   color: hsl(var(--muted-foreground));
   text-transform: uppercase;
   letter-spacing: 0.05em;
+  margin-bottom: 0.25rem;
 }
 
 .filter-checkbox {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.625rem;
+  padding: 0.5rem 0;
   font-size: 0.8125rem;
   color: hsl(var(--foreground));
   cursor: pointer;
+  transition: background 0.15s ease;
+  border-radius: 0.25rem;
+}
+
+.filter-checkbox:hover {
+  background: hsl(var(--hover));
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
 }
 
 .filter-checkbox input[type="checkbox"] {
-  width: 14px;
-  height: 14px;
+  width: 16px;
+  height: 16px;
   cursor: pointer;
   accent-color: hsl(var(--primary));
+  flex-shrink: 0;
+}
+
+.filter-checkbox span {
+  flex: 1;
+  user-select: none;
+}
+
+/* Scope Filter */
+.scope-filter {
+  padding-bottom: 1rem;
+  border-bottom: 1px solid hsl(var(--border));
+  margin-bottom: 0.5rem;
+}
+
+.scope-selector {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+  margin-top: 0.5rem;
+}
+
+.filter-radio {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 0.5rem 0;
+  font-size: 0.8125rem;
+  color: hsl(var(--foreground));
+  cursor: pointer;
+  transition: background 0.15s ease;
+  border-radius: 0.25rem;
+}
+
+.filter-radio:hover {
+  background: hsl(var(--hover));
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
+}
+
+.filter-radio input[type="radio"] {
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  accent-color: hsl(var(--primary));
+  flex-shrink: 0;
+}
+
+.filter-radio span {
+  flex: 1;
+  user-select: none;
+}
+
+/* Filter Select Dropdown */
+.filter-select {
+  width: 100%;
+  padding: 0.625rem 0.75rem;
+  margin-top: 0.5rem;
+  font-size: 0.8125rem;
+  font-weight: 400;
+  color: hsl(var(--foreground));
+  background: hsl(var(--background));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.375rem;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  outline: none;
+}
+
+.filter-select:hover {
+  background: hsl(var(--hover));
+  border-color: hsl(var(--primary) / 0.3);
+}
+
+.filter-select:focus {
+  border-color: hsl(var(--primary));
+  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);
+}
+
+.filter-select option {
+  padding: 0.5rem;
 }
 
 /* Legend Items */
 .legend-section {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.625rem;
 }
 
 .legend-section-title {
   font-size: 0.75rem;
   font-weight: 600;
   color: hsl(var(--muted-foreground));
-  margin-bottom: 0.25rem;
+  margin-bottom: 0.375rem;
+  margin-top: 0.5rem;
 }
 
 .legend-item {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.625rem;
+  padding: 0.375rem 0;
   font-size: 0.8125rem;
   color: hsl(var(--foreground));
 }