Fix xss.

Reviewed-on: retoor/snek#66

src/snek/app.py

@@ -31,6 +31,7 @@ from snek.sgit import GitApplication
 from snek.sssh import start_ssh_server
 from snek.system import http
 from snek.system.cache import Cache
+from snek.system.stats import middleware as stats_middleware, create_stats_structure, stats_handler
 from snek.system.markdown import MarkdownExtension
 from snek.system.middleware import auth_middleware, cors_middleware, csp_middleware
 from snek.system.profiler import profiler_handler
@@ -127,6 +128,7 @@ async def trailing_slash_middleware(request, handler):
 class Application(BaseApplication):
     def __init__(self, *args, **kwargs):
         middlewares = [
+            stats_middleware,
             cors_middleware,
             web.normalize_path_middleware(merge_slashes=True),
             ip2location_middleware,
@@ -168,10 +170,16 @@ class Application(BaseApplication):
         self.ip2location = IP2Location.IP2Location(
             base_path.joinpath("IP2LOCATION-LITE-DB11.BIN")
         )
+        self.on_startup.append(self.prepare_stats)
         self.on_startup.append(self.prepare_asyncio)
         self.on_startup.append(self.start_user_availability_service)
         self.on_startup.append(self.start_ssh_server)
         self.on_startup.append(self.prepare_database)
+        
+    async def prepare_stats(self, app):
+        app['stats'] = create_stats_structure()
+        print("Stats prepared", flush=True)
+
 
     @property
     def uptime_seconds(self):
@@ -308,6 +316,7 @@ class Application(BaseApplication):
         self.router.add_view("/drive.json", DriveApiView)
         self.router.add_view("/drive.html", DriveView)
         self.router.add_view("/drive/{drive}.json", DriveView)
+        self.router.add_get("/stats.html", stats_handler)
         self.router.add_view("/stats.json", StatsView)
         self.router.add_view("/user/{user}.html", UserView)
         self.router.add_view("/repository/{username}/{repository}", RepositoryView)

src/snek/model/channel.py

@@ -12,6 +12,10 @@ class ChannelModel(BaseModel):
     index = ModelField(name="index", required=True, kind=int, value=1000)
     last_message_on = ModelField(name="last_message_on", required=False, kind=str)
     history_start = ModelField(name="history_start", required=False, kind=str)
+    
+    @property
+    def is_dm(self):
+        return 'dm' in self['tag'].lower()
 
     async def get_last_message(self) -> ChannelMessageModel:
         history_start_filter = ""

src/snek/service/channel_message.py

@@ -1,6 +1,6 @@
 from snek.system.service import BaseService
 from snek.system.template import whitelist_attributes
-
+import time
 
 class ChannelMessageService(BaseService):
     mapper_name = "channel_message"
@@ -11,22 +11,30 @@ class ChannelMessageService(BaseService):
 
     async def maintenance(self):
         args = {}
-        async for message in self.find():
-            updated_at = message["updated_at"]
-            message["is_final"] = True
-            html = message["html"]
-            await self.save(message)
-
-            self.mapper.db["channel_message"].upsert(
-                {
-                    "uid": message["uid"],
-                    "updated_at": updated_at,
-                },
-                ["uid"],
-            )
-            if html != message["html"]:
-                print("Reredefined message", message["uid"])
+        for message in self.mapper.db["channel_message"].find():
+            print(message)
+            try:
+                message = await self.get(uid=message["uid"])
+                updated_at = message["updated_at"]
+                message["is_final"] = True
+                html = message["html"]
+                await self.save(message)
 
+                self.mapper.db["channel_message"].upsert(
+                    {
+                        "uid": message["uid"],
+                        "updated_at": updated_at,
+                    },
+                    ["uid"],
+                )
+                if html != message["html"]:
+                    print("Reredefined message", message["uid"])
+                    
+            except Exception as ex:
+                time.sleep(0.1)
+                print(ex, flush=True)
+                
+                
         while True:
             changed = 0
             async for message in self.find(is_final=False):
@@ -61,10 +69,10 @@ class ChannelMessageService(BaseService):
                 "color": user["color"],
             }
         )
+        context['message'] = whitelist_attributes(context['message'])
         try:
             template = self.app.jinja2_env.get_template("message.html")
             model["html"] = template.render(**context)
-            model["html"] = whitelist_attributes(model["html"])
         except Exception as ex:
             print(ex, flush=True)
 
@@ -91,10 +99,10 @@ class ChannelMessageService(BaseService):
         if not user:
             return {}
 
-        if not message["html"].startswith("<chat-message"):
-            await (await self.get(uid=message["uid"])).save()
-            message["html"] = (await self.get(uid=message["uid"])).html
-
+        #if not message["html"].startswith("<chat-message"):
+            #message = await self.get(uid=message["uid"])
+            #await self.save(message)
+        
         return {
             "uid": message["uid"],
             "color": user["color"],
@@ -110,6 +118,7 @@ class ChannelMessageService(BaseService):
     async def save(self, model):
         context = {}
         context.update(model.record)
+        context['message'] = whitelist_attributes(context['message'])
         user = await self.app.services.user.get(model["user_uid"])
         context.update(
             {
@@ -121,7 +130,6 @@ class ChannelMessageService(BaseService):
         )
         template = self.app.jinja2_env.get_template("message.html")
         model["html"] = template.render(**context)
-        model["html"] = whitelist_attributes(model["html"])
         return await super().save(model)
 
     async def offset(self, channel_uid, page=0, timestamp=None, page_size=30):

src/snek/static/base.css

@@ -368,7 +368,7 @@ input[type="text"], .chat-input textarea {
   }
 }
 
-.message.switch-user + .message, .message.long-time + .message, .message:first-child {
+.message.switch-user + .message, .message.long-time + .message, .message-list-bottom + .message{
   .time {
     display: block;
     opacity: 1;

src/snek/static/message-list.js

@@ -9,8 +9,53 @@ import {app} from "./app.js";
 
 const LONG_TIME = 1000 * 60 * 20
 
+export class ReplyEvent extends Event {
+    constructor(messageTextTarget) {
+      super('reply', { bubbles: true, composed: true });
+      this.messageTextTarget = messageTextTarget;
+
+      const newMessage = messageTextTarget.cloneNode(true);
+      newMessage.style.maxHeight = "0"
+      messageTextTarget.parentElement.insertBefore(newMessage, messageTextTarget);
+
+      newMessage.querySelectorAll('.embed-url-link').forEach(link => {
+        link.remove()
+      })
+
+      newMessage.querySelectorAll('picture').forEach(picture => {
+        const img = picture.querySelector('img');
+        if (img) {
+          picture.replaceWith(img);
+        }
+      })
+
+      newMessage.querySelectorAll('img').forEach(img => {
+        const src = img.src || img.currentSrc;
+        img.replaceWith(document.createTextNode(src));
+      })
+
+      newMessage.querySelectorAll('iframe').forEach(iframe => {
+        const src = iframe.src || iframe.currentSrc;
+        iframe.replaceWith(document.createTextNode(src));
+      })
+
+      newMessage.querySelectorAll('a').forEach(a => {
+        const href = a.getAttribute('href');
+        const text = a.innerText || a.textContent;
+        if (text === href || text === '') {
+          a.replaceWith(document.createTextNode(href));
+        } else {
+          a.replaceWith(document.createTextNode(`[${text}](${href})`));
+        }
+      })
+
+      this.replyText = newMessage.innerText.replaceAll("\n\n", "\n").trim();
+      newMessage.remove()
+    }
+}
+
 class MessageElement extends HTMLElement {
-  static observedAttributes = ['data-uid', 'data-color', 'data-channel_uid', 'data-user_nick', 'data-created_at', 'data-user_uid'];
+  // static observedAttributes = ['data-uid', 'data-color', 'data-channel_uid', 'data-user_nick', 'data-created_at', 'data-user_uid'];
 
   isVisible() {
     if (!this) return false;
@@ -51,6 +96,12 @@ class MessageElement extends HTMLElement {
       }
 
       this.timeDiv = this.querySelector('.time span');
+      this.replyDiv = this.querySelector('.time a');
+
+        this.replyDiv.addEventListener('click', (e) => {
+          e.preventDefault();
+          this.dispatchEvent(new ReplyEvent(this.messageDiv));
+        })
     }
 
     if (!this.siblingGenerated && this.nextElementSibling) {
@@ -99,7 +150,9 @@ class MessageList extends HTMLElement {
   constructor() {
     super();
     app.ws.addEventListener("update_message_text", (data) => {
-      this.upsertMessage(data);
+      if (this.messageMap.has(data.uid)) {
+        this.upsertMessage(data);
+      }
     });
     app.ws.addEventListener("set_typing", (data) => {
       this.triggerGlow(data.user_uid,data.color);
@@ -108,29 +161,33 @@ class MessageList extends HTMLElement {
     this.messageMap = new Map();
     this.visibleSet = new Set();
     this._observer = new IntersectionObserver((entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            this.visibleSet.add(entry.target);
-            const messageElement = entry.target;
-            if (messageElement instanceof MessageElement) {
-                messageElement.updateUI();
-            }
-          } else {
-            this.visibleSet.delete(entry.target);
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          this.visibleSet.add(entry.target);
+          const messageElement = entry.target;
+          if (messageElement instanceof MessageElement) {
+              messageElement.updateUI();
           }
-        });
-            console.log(this.visibleSet);
+        } else {
+          this.visibleSet.delete(entry.target);
+        }
+      });
     }, {
-        root: this,
-        threshold: 0.1
+      root: this,
+      threshold: 0,
     })
 
     for(const c of this.children) {
       this._observer.observe(c);
-        if (c instanceof MessageElement) {
-            this.messageMap.set(c.dataset.uid, c);
-        }
+      if (c instanceof MessageElement) {
+          this.messageMap.set(c.dataset.uid, c);
+      }
     }
+
+    this.endOfMessages = document.createElement('div');
+    this.endOfMessages.classList.add('message-list-bottom');
+    this.prepend(this.endOfMessages);
+
     this.scrollToBottom(true);
   }
 
@@ -174,7 +231,6 @@ class MessageList extends HTMLElement {
       };
       document.addEventListener('keydown', escListener);
     })
-
   }
   isElementVisible(element) {
     if (!element) return false;
@@ -187,13 +243,13 @@ class MessageList extends HTMLElement {
     );
   }
   isScrolledToBottom() {
-    return this.isElementVisible(this.firstElementChild);
+    return this.isElementVisible(this.endOfMessages);
   }
-  scrollToBottom(force = false, behavior= 'smooth') {
-    if (force || this.isScrolledToBottom()) {
-      this.firstElementChild.scrollIntoView({ behavior, block: 'start' });
+  scrollToBottom(force = false, behavior= 'instant') {
+    if (force || !this.isScrolledToBottom()) {
+      this.firstElementChild.scrollIntoView({ behavior, block: 'end' });
       setTimeout(() => {
-        this.firstElementChild.scrollIntoView({ behavior, block: 'start' });
+        this.firstElementChild.scrollIntoView({ behavior, block: 'end' });
       }, 200);
     }
   }
@@ -227,9 +283,8 @@ class MessageList extends HTMLElement {
 
   upsertMessage(data) {
     let message = this.messageMap.get(data.uid);
-    const newMessage = !!message;
     if (message) {
-        message.parentElement.removeChild(message);
+        message.parentElement?.removeChild(message);
     }
 
     if (!data.message) return
@@ -239,16 +294,16 @@ class MessageList extends HTMLElement {
     wrapper.innerHTML = data.html;
 
     if (message) {
-      message.updateMessage(...wrapper.firstElementChild._originalChildren);
+      message.updateMessage(...(wrapper.firstElementChild._originalChildren || wrapper.firstElementChild.children));
     } else {
-        message = wrapper.firstElementChild;
-        this.messageMap.set(data.uid, message);
-        this._observer.observe(message);
+      message = wrapper.firstElementChild;
+      this.messageMap.set(data.uid, message);
+      this._observer.observe(message);
     }
 
     const scrolledToBottom = this.isScrolledToBottom();
     this.prepend(message);
-    if (scrolledToBottom) this.scrollToBottom(true, !newMessage ? 'smooth' : 'auto');
+    if (scrolledToBottom) this.scrollToBottom(true);
   }
 }
 

src/snek/static/njet.js

@@ -1,5 +1,3 @@
-
-
 class RestClient {
   constructor({ baseURL = '', headers = {} } = {}) {
     this.baseURL = baseURL;
@@ -210,27 +208,52 @@ class Njet extends HTMLElement {
         customElements.define(name, component);
     }
 
-    constructor() {
+    constructor(config) {
         super();
+        // Store the config for use in render and other methods
+        this.config = config || {};
+        
         if (!Njet._root) {
             Njet._root = this
             Njet._rest = new RestClient({ baseURL: '/' || null })
         }
         this.root._elements.push(this)
         this.classList.add('njet');
+        
+        // Initialize properties from config before rendering
+        this.initProps(this.config);
+        
+        // Call render after properties are initialized
         this.render.call(this);
-        //this.initProps(config);
-        //if (typeof this.config.construct === 'function')
-        //    this.config.construct.call(this)
+        
+        // Call construct if defined
+        if (typeof this.config.construct === 'function') {
+            this.config.construct.call(this)
+        }
     }
 
     initProps(config) {
         const props = Object.keys(config)
         props.forEach(prop => {
-            if (config[prop] !== undefined) {
+            // Skip special properties that are handled separately
+            if (['construct', 'items', 'classes'].includes(prop)) {
+                return;
+            }
+            
+            // Check if there's a setter for this property
+            const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(this), prop);
+            if (descriptor && descriptor.set) {
+                // Use the setter
                 this[prop] = config[prop];
+            } else if (prop in this) {
+                // Property exists, set it directly
+                this[prop] = config[prop];
+            } else {
+                // Set as attribute for unknown properties
+                this.setAttribute(prop, config[prop]);
             }
         });
+        
         if (config.classes) {
             this.classList.add(...config.classes);
         }
@@ -342,7 +365,7 @@ class NjetDialog extends Component {
         const buttonContainer = document.createElement('div');
         buttonContainer.style.marginTop = '20px';
         buttonContainer.style.display = 'flex';
-        buttonContainer.style.justifyContent = 'flenjet-end';
+        buttonContainer.style.justifyContent = 'flex-end';
         buttonContainer.style.gap = '10px';
         if (secondaryButton) {
             const secondary = new NjetButton(secondaryButton);
@@ -372,8 +395,9 @@ class NjetWindow extends Component {
             header.textContent = title;
             this.appendChild(header);
         }
-        this.config.items.forEach(item => this.appendChild(item)); 
-      
+        if (this.config.items) {
+            this.config.items.forEach(item => this.appendChild(item));
+        }
     }
 
     show(){
@@ -408,7 +432,8 @@ class NjetGrid extends Component {
     }
 }
 Njet.registerComponent('njet-grid', NjetGrid);
-/*
+
+/* Example usage:
 const button = new NjetButton({
     classes: ['my-button'],
     text: 'Shared',
@@ -493,7 +518,7 @@ document.body.appendChild(dialog);
 */
 
 class NjetComponent extends Component {}
-    const njet = Njet
+const njet = Njet
 njet.showDialog = function(args){
     const dialog = new NjetDialog(args) 
     dialog.show()
@@ -545,15 +570,16 @@ njet.showWindow = function(args) {
     return w
 }
 njet.publish = function(event, data) {
-    if (this.root._subscriptions[event]) {
+    if (this.root && this.root._subscriptions && this.root._subscriptions[event]) {
         this.root._subscriptions[event].forEach(callback => callback(data))
     }
 }
 njet.subscribe = function(event, callback) {
+    if (!this.root) return;
     if (!this.root._subscriptions[event]) {
         this.root._subscriptions[event] = []
     }
     this.root._subscriptions[event].push(callback)
 }
 
-export { Njet, NjetButton, NjetPanel, NjetDialog, NjetGrid, NjetComponent, njet, NjetWindow,eventBus };
+export { Njet, NjetButton, NjetPanel, NjetDialog, NjetGrid, NjetComponent, njet, NjetWindow, eventBus };

src/snek/system/stats.py

@@ -0,0 +1,129 @@
+import asyncio
+from aiohttp import web, WSMsgType
+
+from datetime import datetime, timedelta, timezone
+from collections import defaultdict
+import html
+
+def create_stats_structure():
+    """Creates the nested dictionary structure for storing statistics."""
+    def nested_dd():
+        return defaultdict(lambda: defaultdict(int))
+    return defaultdict(nested_dd)
+
+def get_time_keys(dt: datetime):
+    """Generates dictionary keys for different time granularities."""
+    return {
+        "hour": dt.strftime('%Y-%m-%d-%H'),
+        "day": dt.strftime('%Y-%m-%d'),
+        "week": dt.strftime('%Y-%W'), # Week number, Monday is first day
+        "month": dt.strftime('%Y-%m'),
+    }
+
+def update_stats_counters(stats_dict: defaultdict, now: datetime):
+    """Increments the appropriate time-based counters in a stats dictionary."""
+    keys = get_time_keys(now)
+    stats_dict['by_hour'][keys['hour']] += 1
+    stats_dict['by_day'][keys['day']] += 1
+    stats_dict['by_week'][keys['week']] += 1
+    stats_dict['by_month'][keys['month']] += 1
+
+def generate_time_series_svg(title: str, data: list[tuple[str, int]], y_label: str) -> str:
+    """Generates a responsive SVG bar chart for time-series data."""
+    if not data:
+        return f"<h3>{html.escape(title)}</h3><p>No data yet.</p>"
+    max_val = max(item[1] for item in data) if data else 1
+    svg_height, svg_width = 250, 600
+    bar_padding = 5
+    bar_width = (svg_width - 50) / len(data) - bar_padding
+    
+    bars = ""
+    labels = ""
+    for i, (key, val) in enumerate(data):
+        bar_height = (val / max_val) * (svg_height - 50) if max_val > 0 else 0
+        x = i * (bar_width + bar_padding) + 40
+        y = svg_height - bar_height - 30
+        
+        bars += f'<rect x="{x}" y="{y}" width="{bar_width}" height="{bar_height}" fill="#007BFF"><title>{html.escape(key)}: {val}</title></rect>'
+        labels += f'<text x="{x + bar_width / 2}" y="{svg_height - 15}" font-size="11" text-anchor="middle">{html.escape(key)}</text>'
+
+    return f"""
+    <h3>{html.escape(title)}</h3>
+    <div style="border:1px solid #ccc; padding: 10px; border-radius: 5px;">
+        <svg viewBox="0 0 {svg_width} {svg_height}" style="width:100%; height:auto;">
+            <g>{bars}</g>
+            <g>{labels}</g>
+            <line x1="35" y1="10" x2="35" y2="{svg_height - 30}" stroke="#aaa" stroke-width="1" />
+            <line x1="35" y1="{svg_height - 30}" x2="{svg_width - 10}" y2="{svg_height - 30}" stroke="#aaa" stroke-width="1" />
+            <text x="5" y="{svg_height - 30}" font-size="12">0</text>
+            <text x="5" y="20" font-size="12">{max_val}</text>
+        </svg>
+    </div>
+    """
+
+@web.middleware
+async def middleware(request, handler):
+    """Middleware to count all incoming HTTP requests."""
+    # Avoid counting requests to the stats page itself
+    if request.path.startswith('/stats.html'):
+        return await handler(request)
+        
+    update_stats_counters(request.app['stats']['http_requests'], datetime.now(timezone.utc))
+    return await handler(request)
+
+def update_websocket_stats(app):
+    update_stats_counters(app['stats']['websocket_requests'], datetime.now(timezone.utc))
+
+async def pipe_and_count_websocket(ws_from, ws_to, stats_dict):
+    """This function proxies WebSocket messages AND counts them."""
+    async for msg in ws_from:
+        # This is the key part for monitoring WebSockets
+        update_stats_counters(stats_dict, datetime.now(timezone.utc))
+        
+        if msg.type == WSMsgType.TEXT:
+            await ws_to.send_str(msg.data)
+        elif msg.type == WSMsgType.BINARY:
+            await ws_to.send_bytes(msg.data)
+        elif msg.type in (WSMsgType.CLOSE, WSMsgType.ERROR):
+            await ws_to.close(code=ws_from.close_code)
+            break
+
+
+async def stats_handler(request: web.Request):
+    """Handler to display the statistics dashboard."""
+    stats = request.app['stats']
+    now = datetime.now(timezone.utc)
+    
+    # Helper to prepare data for charts
+    def get_data(source, period, count):
+        data = []
+        for i in range(count - 1, -1, -1):
+            if period == 'hour':
+                dt = now - timedelta(hours=i)
+                key, label = dt.strftime('%Y-%m-%d-%H'), dt.strftime('%H:00')
+                data.append((label, source['by_hour'].get(key, 0)))
+            elif period == 'day':
+                dt = now - timedelta(days=i)
+                key, label = dt.strftime('%Y-%m-%d'), dt.strftime('%a')
+                data.append((label, source['by_day'].get(key, 0)))
+        return data
+
+    http_hourly = get_data(stats['http_requests'], 'hour', 24)
+    ws_hourly = get_data(stats['ws_messages'], 'hour', 24)
+    http_daily = get_data(stats['http_requests'], 'day', 7)
+    ws_daily = get_data(stats['ws_messages'], 'day', 7)
+
+    body = f"""
+    <html><head><title>App Stats</title><meta http-equiv="refresh" content="30"></head>
+    <body>
+        <h2>Application Dashboard</h2>
+        <h3>Last 24 Hours</h3>
+        {generate_time_series_svg("HTTP Requests", http_hourly, "Reqs/Hour")}
+        {generate_time_series_svg("WebSocket Messages", ws_hourly, "Msgs/Hour")}
+        <h3>Last 7 Days</h3>
+        {generate_time_series_svg("HTTP Requests", http_daily, "Reqs/Day")}
+        {generate_time_series_svg("WebSocket Messages", ws_daily, "Msgs/Day")}
+    </body></html>
+    """
+    return web.Response(text=body, content_type='text/html')
+

src/snek/system/template.py

@@ -79,44 +79,12 @@ emoji.EMOJI_DATA[
 ] = {"en": ":a1:", "status": 2, "E": 0.6, "alias": [":a1:"]}
 
 
-ALLOWED_TAGS = list(bleach.sanitizer.ALLOWED_TAGS) + [
-    "img",
-    "video",
-    "audio",
-    "source",
-    "iframe",
-    "picture",
-    "span",
-]
-ALLOWED_ATTRIBUTES = {
-    **bleach.sanitizer.ALLOWED_ATTRIBUTES,
-    "img": ["src", "alt", "title", "width", "height"],
-    "a": ["href", "title", "target", "rel", "referrerpolicy", "class"],
-    "iframe": [
-        "src",
-        "width",
-        "height",
-        "frameborder",
-        "allow",
-        "allowfullscreen",
-        "title",
-        "referrerpolicy",
-        "style",
-    ],
-    "video": ["src", "controls", "width", "height"],
-    "audio": ["src", "controls"],
-    "source": ["src", "type"],
-    "span": ["class"],
-    "picture": [],
-}
-
+ALLOWED_TAGS = list(bleach.sanitizer.ALLOWED_TAGS) + ["picture"]
 
 def sanitize_html(value):
     return bleach.clean(
         value,
-        tags=ALLOWED_TAGS,
-        attributes=ALLOWED_ATTRIBUTES,
-        protocols=bleach.sanitizer.ALLOWED_PROTOCOLS + ["data"],
+        protocols=list(bleach.sanitizer.ALLOWED_PROTOCOLS) + ["data"],
         strip=True,
     )
 
@@ -132,50 +100,8 @@ def set_link_target_blank(text):
 
     return str(soup)
 
-
-SAFE_ATTRIBUTES = {
-    "href",
-    "src",
-    "alt",
-    "title",
-    "width",
-    "height",
-    "style",
-    "id",
-    "class",
-    "rel",
-    "type",
-    "name",
-    "value",
-    "placeholder",
-    "aria-hidden",
-    "aria-label",
-    "srcset",
-    "target",
-    "rel",
-    "referrerpolicy",
-    "controls",
-    "frameborder",
-    "allow",
-    "allowfullscreen",
-    "referrerpolicy",
-}
-
-
 def whitelist_attributes(html):
-    soup = BeautifulSoup(html, "html.parser")
-
-    for tag in soup.find_all():
-        if hasattr(tag, "attrs"):
-            if tag.name in ["script", "form", "input"]:
-                tag.replace_with("")
-                continue
-            attrs = dict(tag.attrs)
-            for attr in list(attrs):
-                # Check if attribute is in the safe list or is a data-* attribute
-                if not (attr in SAFE_ATTRIBUTES or attr.startswith("data-")):
-                    del tag.attrs[attr]
-    return str(soup)
+    return sanitize_html(html)
 
 
 def embed_youtube(text):

src/snek/templates/sandbox.html

@@ -12,7 +12,7 @@ function showTerm(options){
 
 
 class StarField {
-  constructor({ count = 200, container = document.body } = {}) {
+  constructor({ count = 100, container = document.body } = {}) {
     this.container = container;
     this.starCount = count;
     this.stars = [];
@@ -567,7 +567,7 @@ const count = Array.from(messages).filter(el => el.textContent.trim() === text).
 
 
 
-const starField = new StarField({starCount: 200});
+const starField = new StarField({starCount: 100});
 app.starField = starField;
 
 class DemoSequence {

src/snek/templates/web.html

@@ -72,12 +72,13 @@ function throttle(fn, wait) {
 // --- Scroll: load extra messages, throttled ---
 let isLoadingExtra = false;
 async function loadExtra() {
-    const firstMessage = messagesContainer.children[messagesContainer.children.length - 1];
+    const firstMessage = messagesContainer.lastElementChild;
     if (isLoadingExtra || !isScrolledPastHalf() || !firstMessage) return;
     isLoadingExtra = true;
     const messages = await app.rpc.getMessages(channelUid, 0, firstMessage.dataset.created_at);
     if (messages.length) {
         const frag = document.createDocumentFragment();
+        messages.reverse();
         messages.forEach(msg => {
             const temp = document.createElement("div");
             temp.innerHTML = msg.html;
@@ -138,10 +139,16 @@ chatInputField.textarea.focus();
 
 // --- Reply helper ---
 function replyMessage(message) {
-    chatInputField.value = "```markdown\n> " + (message || '').split("\n").join("\n> ") + "\n```\n";
+    chatInputField.value = "```markdown\n> " + (message || '').trim().split("\n").join("\n> ") + "\n```\n";
+    chatInputField.textarea.dispatchEvent(new Event('change', { bubbles: true }));
     chatInputField.focus();
 }
 
+messagesContainer.addEventListener("reply", (e) => {
+    const messageText = e.replyText || e.messageTextTarget.textContent.trim();
+    replyMessage(messageText);
+})
+
 // --- Mention helpers ---
 function extractMentions(message) {
     return [...new Set(message.match(/@\w+/g) || [])];
@@ -215,7 +222,7 @@ document.addEventListener('keydown', function(event) {
         keyTimeout = setTimeout(() => { gPressCount = 0; }, 300);
         if (gPressCount === 2) {
             gPressCount = 0; 
-            messagesContainer.querySelector(".message:first-child")?.scrollIntoView({ block: "end", inline: "nearest" });
+            messagesContainer.lastElementChild?.scrollIntoView({ block: "end", inline: "nearest" });
             loadExtra();
         }
     }
@@ -254,7 +261,7 @@ function updateLayout(doScrollDown) {
 function isScrolledPastHalf() {
     let scrollTop = messagesContainer.scrollTop;
     let scrollableHeight = messagesContainer.scrollHeight - messagesContainer.clientHeight;
-    return scrollTop < scrollableHeight / 2;
+    return Math.abs(scrollTop) > scrollableHeight / 2;
 }
 
 // --- Initial layout update ---

src/snek/view/rpc.py

@@ -6,7 +6,7 @@
 
 # MIT License: Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions.
 
-
+from snek.system.stats import update_websocket_stats 
 import asyncio
 import json
 import logging
@@ -305,7 +305,7 @@ class RPCView(BaseView):
 
         async def send_message(self, channel_uid, message, is_final=True):
             self._require_login()
-        
+            
             message = message.strip()
             
             if not is_final:
@@ -507,7 +507,9 @@ class RPCView(BaseView):
                     raise Exception("Method not found")
                 success = True
                 try:
+                    update_websocket_stats(self.app)
                     result = await method(*args)
+                    update_websocket_stats(self.app)
                 except Exception as ex:
                     result = {"exception": str(ex), "traceback": traceback.format_exc()}
                     success = False

src/snek/view/web.py

@@ -55,7 +55,7 @@ class WebView(BaseView):
             user_uid=self.session.get("uid"), channel_uid=channel["uid"]
         )
         if not channel_member:
-            if not channel["is_private"]:
+            if not channel["is_private"] and not channel.is_dm:
                 channel_member = await self.app.services.channel_member.create(
                     channel_uid=channel["uid"],
                     user_uid=self.session.get("uid"),
@@ -82,7 +82,6 @@ class WebView(BaseView):
             await self.app.services.notification.mark_as_read(
                 self.session.get("uid"), message["uid"]
             )
-        print(messages)
         name = await channel_member.get_name()
         return await self.render_template(
             "web.html",