Update.

Reviewed-on: retoor/snek#74

pyproject.toml

@@ -39,7 +39,8 @@ dependencies = [
     "Pillow",
     "pillow-heif",
     "IP2Location",
-    "bleach"
+    "bleach",
+    "sentry-sdk"
 ]
 
 [tool.setuptools.packages.find]

src/snek/__main__.py

@@ -1,3 +1,7 @@
+import logging 
+
+logging.basicConfig(level=logging.INFO)
+
 import pathlib
 import shutil
 import sqlite3
@@ -9,6 +13,8 @@ from snek.shell import Shell
 from snek.app import Application
 
 
+
+
 @click.group()
 def cli():
     pass
@@ -122,6 +128,12 @@ def shell(db_path):
     Shell(db_path).run()
 
 def main():
+    try:
+        import sentry_sdk
+        sentry_sdk.init("https://ab6147c2f3354c819768c7e89455557b@gt.molodetz.nl/1")
+    except ImportError:
+        print("Could not import sentry_sdk")
+
     cli()
 
 

src/snek/app.py

@@ -13,6 +13,9 @@ from snek.view.threads import ThreadsView
 logging.basicConfig(level=logging.DEBUG)
 from concurrent.futures import ThreadPoolExecutor
 from ipaddress import ip_address
+import time
+import uuid
+
 
 import IP2Location
 from aiohttp import web
@@ -31,7 +34,6 @@ 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
@@ -41,6 +43,7 @@ from snek.system.template import (
     PythonExtension,
     sanitize_html,
 )
+from snek.view.new import NewView
 from snek.view.about import AboutHTMLView, AboutMDView
 from snek.view.avatar import AvatarView
 from snek.view.channel import ChannelAttachmentView,ChannelAttachmentUploadView, ChannelView
@@ -128,10 +131,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,
             csp_middleware,
         ]
         self.template_path = pathlib.Path(__file__).parent.joinpath("templates")
@@ -170,16 +170,11 @@ 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):
@@ -269,6 +264,8 @@ class Application(BaseApplication):
             name="static",
             show_index=True,
         )
+
+        self.router.add_view("/new.html", NewView)
         self.router.add_view("/profiler.html", profiler_handler)
         self.router.add_view("/container/sock/{channel_uid}.json", ContainerView)
         self.router.add_view("/about.html", AboutHTMLView)
@@ -287,9 +284,9 @@ class Application(BaseApplication):
         self.router.add_view("/login.json", LoginView)
         self.router.add_view("/register.html", RegisterView)
         self.router.add_view("/register.json", RegisterView)
-        self.router.add_view("/drive/{rel_path:.*}", DriveView)
-        self.router.add_view("/drive.bin", UploadView)
-        self.router.add_view("/drive.bin/{uid}.{ext}", UploadView)
+       # self.router.add_view("/drive/{rel_path:.*}", DriveView)
+       ## self.router.add_view("/drive.bin", UploadView)
+       # self.router.add_view("/drive.bin/{uid}.{ext}", UploadView)
         self.router.add_view("/search-user.html", SearchUserView)
         self.router.add_view("/search-user.json", SearchUserView)
         self.router.add_view("/avatar/{uid}.svg", AvatarView)
@@ -297,26 +294,25 @@ class Application(BaseApplication):
         self.router.add_get("/http-photo", self.handle_http_photo)
         self.router.add_get("/rpc.ws", RPCView)
         self.router.add_get("/c/{channel:.*}", ChannelView)
-        self.router.add_view(
-            "/channel/{channel_uid}/attachment.bin", ChannelAttachmentView
-        )
-        self.router.add_view(
-            "/channel/{channel_uid}/drive.json", ChannelDriveApiView
-        )
+        #self.router.add_view(
+        #    "/channel/{channel_uid}/attachment.bin", ChannelAttachmentView
+        #)
+        #self.router.add_view(
+        #    "/channel/{channel_uid}/drive.json", ChannelDriveApiView
+        #)
         self.router.add_view(
             "/channel/{channel_uid}/attachment.sock", ChannelAttachmentUploadView
         )
         self.router.add_view(
             "/channel/attachment/{relative_url:.*}", ChannelAttachmentView
-        )
+        )#
         self.router.add_view("/channel/{channel}.html", WebView)
         self.router.add_view("/threads.html", ThreadsView)
         self.router.add_view("/terminal.ws", TerminalSocketView)
         self.router.add_view("/terminal.html", TerminalView)
-        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("/drive.json", DriveApiView)
+        #self.router.add_view("/drive.html", DriveView)
+        #self.router.add_view("/drive/{drive}.json", DriveView)
         self.router.add_view("/stats.json", StatsView)
         self.router.add_view("/user/{user}.html", UserView)
         self.router.add_view("/repository/{username}/{repository}", RepositoryView)
@@ -371,6 +367,8 @@ class Application(BaseApplication):
 
     # @time_cache_async(60)
     async def render_template(self, template, request, context=None):
+        start_time = time.perf_counter()
+
         channels = []
         if not context:
             context = {}
@@ -431,10 +429,12 @@ class Application(BaseApplication):
 
         self.jinja2_env.loader = self.original_loader
 
+        end_time = time.perf_counter()
+        print(f"render_template took {end_time - start_time:.4f} seconds")
+
         # rendered.text = whitelist_attributes(rendered.text)
         # rendered.headers['Content-Lenght'] = len(rendered.text)
         return rendered
-
     async def static_handler(self, request):
         file_name = request.match_info.get("filename", "")
 

src/snek/model/channel.py

@@ -23,7 +23,7 @@ class ChannelModel(BaseModel):
             history_start_filter = f" AND created_at > '{self['history_start']}' "
         try:
             async for model in self.app.services.channel_message.query(
-                "SELECT uid FROM channel_message WHERE channel_uid=:channel_uid" + history_start_filter + " ORDER BY created_at DESC LIMIT 1",
+                "SELECT uid FROM channel_message WHERE channel_uid=:channel_uid" + history_start_filter + " ORDER BY id DESC LIMIT 1",
                 {"channel_uid": self["uid"]},
             ):
 

src/snek/service/channel_message.py

@@ -1,6 +1,21 @@
 from snek.system.service import BaseService
-from snek.system.template import whitelist_attributes
+from snek.system.template import sanitize_html
 import time
+import asyncio
+from concurrent.futures import ProcessPoolExecutor
+import json
+
+from jinja2 import Environment, FileSystemLoader
+global jinja2_env
+import pathlib 
+template_path = pathlib.Path(__file__).parent.parent.joinpath("templates")
+
+
+def render(context):
+    template =jinja2_env.get_template("message.html")
+    return sanitize_html(template.render(**context))
+
+
 
 class ChannelMessageService(BaseService):
     mapper_name = "channel_message"
@@ -8,9 +23,26 @@ class ChannelMessageService(BaseService):
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
         self._configured_indexes = False
+        self._executor_pools = {}
+        global jinja2_env
+        jinja2_env = self.app.jinja2_env
+        self._max_workers = 1
+    def get_or_create_executor(self, uid):
+        if not uid in self._executor_pools:
+            self._executor_pools[uid] = ProcessPoolExecutor(max_workers=self._max_workers)
+        print("Executors available", len(self._executor_pools))
+        return self._executor_pools[uid]
+    
+    def delete_executor(self, uid):
+        if uid in self._executor_pools:
+            self._executor_pools[uid].shutdown()
+            del self._executor_pools[uid]
 
     async def maintenance(self):
         args = {}
+        
+
+        return 
         for message in self.mapper.db["channel_message"].find():
             print(message)
             try:
@@ -69,10 +101,14 @@ class ChannelMessageService(BaseService):
                 "color": user["color"],
             }
         )
-        context['message'] = whitelist_attributes(context['message'])
+        loop = asyncio.get_event_loop()
         try:
-            template = self.app.jinja2_env.get_template("message.html")
-            model["html"] = template.render(**context)
+
+            context = json.loads(json.dumps(context, default=str)) 
+
+
+            model["html"] = await loop.run_in_executor(self.get_or_create_executor(model["uid"]), render,context)
+            #model['html'] = await loop.run_in_executor(self.get_or_create_executor(user["uid"]), sanitize_html,model['html'])
         except Exception as ex:
             print(ex, flush=True)
 
@@ -91,6 +127,8 @@ class ChannelMessageService(BaseService):
                         ["deleted_at"], unique=False
                     )
             self._configured_indexes = True
+            if model['is_final']:
+                self.delete_executor(model['uid'])
             return model
         raise Exception(f"Failed to create channel message: {model.errors}.")
 
@@ -118,7 +156,6 @@ 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(
             {
@@ -128,9 +165,15 @@ class ChannelMessageService(BaseService):
                 "color": user["color"],
             }
         )
-        template = self.app.jinja2_env.get_template("message.html")
-        model["html"] = template.render(**context)
-        return await super().save(model)
+        context = json.loads(json.dumps(context, default=str)) 
+        loop = asyncio.get_event_loop()
+        model["html"] = await loop.run_in_executor(self.get_or_create_executor(model["uid"]), render, context)
+        #model['html'] = await loop.run_in_executor(self.get_or_create_executor(user["uid"]), sanitize_html,model['html'])
+
+        result = await super().save(model)
+        if model['is_final']:
+            self.delete_executor(model['uid'])
+        return result 
 
     async def offset(self, channel_uid, page=0, timestamp=None, page_size=30):
         channel = await self.services.channel.get(uid=channel_uid)

src/snek/service/socket.py

@@ -44,19 +44,29 @@ class SocketService(BaseService):
 
     async def user_availability_service(self):
         logger.info("User availability update service started.")
+        logger.debug("Entering the main loop.")
         while True:
             logger.info("Updating user availability...")
+            logger.debug("Initializing users_updated list.")
             users_updated = []
+            logger.debug("Iterating over sockets.")
             for s in self.sockets:
+                logger.debug(f"Checking connection status for socket: {s}.")
                 if not s.is_connected:
+                    logger.debug("Socket is not connected, continuing to next socket.")
                     continue
+                logger.debug(f"Checking if user {s.user} is already updated.")
                 if s.user not in users_updated:
+                    logger.debug(f"Updating last_ping for user: {s.user}.")
                     s.user["last_ping"] = now()
+                    logger.debug(f"Saving user {s.user} to the database.")
                     await self.app.services.user.save(s.user)
+                    logger.debug(f"Adding user {s.user} to users_updated list.")
                     users_updated.append(s.user)
             logger.info(
                 f"Updated user availability for {len(users_updated)} online users."
             )
+            logger.debug("Sleeping for 60 seconds before the next update.")
             await asyncio.sleep(60)
 
     async def add(self, ws, user_uid):
@@ -77,7 +87,7 @@ class SocketService(BaseService):
 
     async def send_to_user(self, user_uid, message):
         count = 0
-        for s in self.users.get(user_uid, []):
+        for s in list(self.users.get(user_uid, [])):
             if await s.send_json(message):
                 count += 1
         return count

src/snek/static/app.js

@@ -65,7 +65,7 @@ export class Chat extends EventHandler {
     }
     return new Promise((resolve) => {
       this._waitConnect = resolve;
-      console.debug("Connecting..");
+      //console.debug("Connecting..");
         
       try {
         this._socket = new WebSocket(this._url);
@@ -142,7 +142,7 @@ export class NotificationAudio {
       new Audio(this.sounds[soundIndex])
         .play()
         .then(() => {
-          console.debug("Gave sound notification");
+          //console.debug("Gave sound notification");
         })
         .catch((error) => {
           console.error("Notification failed:", error);

src/snek/static/base.css

@@ -407,34 +407,48 @@ a {
   width: 250px;
   padding-left: 20px;
   padding-right: 20px;
-  padding-top: 10px;
+  padding-top: 20px;
   overflow-y: auto;
   grid-area: sidebar;
 }
 
 .sidebar h2 {
   color: #f05a28;
-  font-size: 1.2em;
-  margin-bottom: 20px;
+  font-size: 0.75em;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 10px;
+  margin-top: 20px;
+}
+
+.sidebar h2:first-child {
+  margin-top: 0;
 }
 
 .sidebar ul {
   list-style: none;
+  margin-bottom: 15px;
 }
 
 .sidebar ul li {
-  margin-bottom: 15px;
+  margin-bottom: 4px;
 }
 
 .sidebar ul li a {
   color: #ccc;
   text-decoration: none;
-  font-size: 1em;
+  font-size: 0.9em;
   transition: color 0.3s;
+  display: block;
+  padding: 4px 8px;
+  border-radius: 4px;
+  transition: background-color 0.2s, color 0.2s;
 }
 
 .sidebar ul li a:hover {
   color: #fff;
+  background-color: rgba(255, 255, 255, 0.05);
 }
 
 @keyframes glow {

src/snek/static/chat-input.js

@@ -81,7 +81,152 @@ class ChatInputComponent extends NjetComponent {
     return Array.from(text.matchAll(/@([a-zA-Z0-9_-]+)/g), m => m[1]);
   }
 
+
   matchMentionsToAuthors(mentions, authors) {
+    return mentions.map((mention) => {
+      const lowerMention = mention.toLowerCase();
+      let bestMatch = null;
+      let bestScore = 0;
+
+      for (const author of authors) {
+        const lowerAuthor = author.toLowerCase();
+        let score = 0;
+
+        if (lowerMention === lowerAuthor) {
+          score = 100;
+        } else if (lowerAuthor.startsWith(lowerMention)) {
+          score = 90 + (5 * (lowerMention.length / lowerAuthor.length));
+        } else if (lowerAuthor.includes(lowerMention) && lowerMention.length >= 2) {
+          const position = lowerAuthor.indexOf(lowerMention);
+          score = 80 - (10 * (position / lowerAuthor.length));
+        } else if (this.isFuzzyMatch(lowerMention, lowerAuthor)) {
+          const ratio = lowerMention.length / lowerAuthor.length;
+          score = 40 + (20 * ratio);
+        } else if (this.isCloseMatch(lowerMention, lowerAuthor)) {
+          score = 30 + (10 * (lowerMention.length / lowerAuthor.length));
+        }
+
+        if (score > bestScore) {
+          bestScore = score;
+          bestMatch = author;
+        }
+      }
+
+      const minScore = 40;
+      return {
+        mention,
+        closestAuthor: bestScore >= minScore ? bestMatch : null,
+        score: bestScore,
+      };
+    });
+  }
+
+  isFuzzyMatch(needle, haystack) {
+    if (needle.length < 2) return false;
+
+    let needleIndex = 0;
+    for (let i = 0; i < haystack.length && needleIndex < needle.length; i++) {
+      if (haystack[i] === needle[needleIndex]) {
+        needleIndex++;
+      }
+    }
+    return needleIndex === needle.length;
+  }
+
+  isCloseMatch(str1, str2) {
+    if (Math.abs(str1.length - str2.length) > 2) return false;
+
+    const shorter = str1.length <= str2.length ? str1 : str2;
+    const longer = str1.length > str2.length ? str1 : str2;
+
+    let differences = 0;
+    let j = 0;
+
+    for (let i = 0; i < shorter.length && j < longer.length; i++) {
+      if (shorter[i] !== longer[j]) {
+        differences++;
+        if (j + 1 < longer.length && shorter[i] === longer[j + 1]) {
+          j++;
+        }
+      }
+      j++;
+    }
+
+    differences += Math.abs(longer.length - j);
+    return differences <= 2;
+  }
+
+  matchMentions4ToAuthors(mentions, authors) {
+    return mentions.map((mention) => {
+      let closestAuthor = null;
+      let minDistance = Infinity;
+      const lowerMention = mention.toLowerCase();
+
+      authors.forEach((author) => {
+        const lowerAuthor = author.toLowerCase();
+        let distance = this.levenshteinDistance(lowerMention, lowerAuthor);
+
+        if (!this.isSubsequence(lowerMention, lowerAuthor)) {
+          distance += 10;
+        }
+
+        if (distance < minDistance) {
+          minDistance = distance;
+          closestAuthor = author;
+        }
+      });
+
+      if (minDistance < 5) {
+        closestAuthor = 0;
+      }
+      return { mention, closestAuthor, distance: minDistance };
+    });
+  }
+
+  levenshteinDistance(a, b) {
+    const matrix = [];
+
+    for (let i = 0; i <= b.length; i++) {
+      matrix[i] = [i];
+    }
+    for (let j = 0; j <= a.length; j++) {
+      matrix[0][j] = j;
+    }
+
+    for (let i = 1; i <= b.length; i++) {
+      for (let j = 1; j <= a.length; j++) {
+        if (b.charAt(i - 1) === a.charAt(j - 1)) {
+          matrix[i][j] = matrix[i - 1][j - 1];
+        } else {
+          matrix[i][j] = Math.min(
+            matrix[i - 1][j] + 1,
+            matrix[i][j - 1] + 1,
+            matrix[i - 1][j - 1] + 1
+          );
+        }
+      }
+    }
+
+    return matrix[b.length][a.length];
+  }
+
+  replaceMentionsWithAuthors(text) {
+    const authors = this.getAuthors();
+    const mentions = this.extractMentions(text);
+
+    const matches = this.matchMentionsToAuthors(mentions, authors);
+    let updatedText = text;
+    matches.forEach(({ mention, closestAuthor }) => {
+      if(closestAuthor){
+        const mentionRegex = new RegExp(`@${mention}`, 'g');
+        updatedText = updatedText.replace(mentionRegex, `@${closestAuthor}`);
+      }
+    });
+
+    return updatedText;
+  }
+
+  matchMentions2ToAuthors(mentions, authors) {
     return mentions.map(mention => {
       let closestAuthor = null;
       let minDistance = Infinity;
@@ -100,53 +245,14 @@ class ChatInputComponent extends NjetComponent {
           closestAuthor = author;
         }
       });
-
+    if (minDistance < 5){
+        closestAuthor = 0;
+    }
       return { mention, closestAuthor, distance: minDistance };
     });
   }
 
-  levenshteinDistance(a, b) {
-    const matrix = [];
 
-    // Initialize the first row and column
-    for (let i = 0; i <= b.length; i++) {
-      matrix[i] = [i];
-    }
-    for (let j = 0; j <= a.length; j++) {
-      matrix[0][j] = j;
-    }
-
-    // Fill in the matrix
-    for (let i = 1; i <= b.length; i++) {
-      for (let j = 1; j <= a.length; j++) {
-        if (b.charAt(i - 1) === a.charAt(j - 1)) {
-          matrix[i][j] = matrix[i - 1][j - 1];
-        } else {
-          matrix[i][j] = Math.min(
-            matrix[i - 1][j] + 1,    // Deletion
-            matrix[i][j - 1] + 1,    // Insertion
-            matrix[i - 1][j - 1] + 1 // Substitution
-          );
-        }
-      }
-    }
-
-    return matrix[b.length][a.length];
-  }
-
-  replaceMentionsWithAuthors(text) {
-    const authors = this.getAuthors();
-    const mentions = this.extractMentions(text);
-
-    const matches = this.matchMentionsToAuthors(mentions, authors);
-    let updatedText = text;
-    matches.forEach(({ mention, closestAuthor }) => {
-      const mentionRegex = new RegExp(`@${mention}`, 'g');
-      updatedText = updatedText.replace(mentionRegex, `@${closestAuthor}`);
-    });
-
-    return updatedText;
-  }
   textToLeet(text) {
   // L33t speak character mapping
   const leetMap = {
@@ -392,7 +498,7 @@ textToLeetAdvanced(text) {
       }
       j++;
     }
-    return i === s.length;
+    return i === s.length && s.length > 1;
   }
 
   flagTyping() {

src/snek/static/editor.js

@@ -1,226 +1,494 @@
-import { NjetComponent} from "/njet.js"
+import { NjetComponent } from "/njet.js"
 
-    class NjetEditor extends NjetComponent {
-      constructor() {
-        super();
-        this.attachShadow({ mode: 'open' });
+class NjetEditor extends NjetComponent {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
 
-        const style = document.createElement('style');
-        style.textContent = `
-          #editor {
-            padding: 1rem;
-            outline: none;
-            white-space: pre-wrap;
-            line-height: 1.5;
-            height: 100%;
-            overflow-y: auto;
-            background: #1e1e1e;
-            color: #d4d4d4;
-          }
-          #command-line {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            width: 100%;
-            padding: 0.2rem 1rem;
-            background: #333;
-            color: #0f0;
-            display: none;
-            font-family: monospace;
-          }
-        `;
+    const style = document.createElement('style');
+    style.textContent = `
+      :host {
+        display: block;
+        position: relative;
+        height: 100%;
+        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+      }
+      
+      #editor {
+        padding: 1rem;
+        outline: none;
+        white-space: pre-wrap;
+        line-height: 1.5;
+        height: calc(100% - 30px);
+        overflow-y: auto;
+        background: #1e1e1e;
+        color: #d4d4d4;
+        font-size: 14px;
+        caret-color: #fff;
+      }
+      
+      #editor.insert-mode {
+        caret-color: #4ec9b0;
+      }
+      
+      #editor.visual-mode {
+        caret-color: #c586c0;
+      }
+      
+      #editor::selection {
+        background: #264f78;
+      }
+      
+      #status-bar {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 30px;
+        background: #007acc;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        padding: 0 1rem;
+        font-size: 12px;
+        font-weight: 500;
+      }
+      
+      #mode-indicator {
+        text-transform: uppercase;
+        margin-right: 20px;
+        font-weight: bold;
+      }
+      
+      #command-line {
+        position: absolute;
+        bottom: 30px;
+        left: 0;
+        width: 100%;
+        padding: 0.3rem 1rem;
+        background: #2d2d2d;
+        color: #d4d4d4;
+        display: none;
+        font-family: inherit;
+        border-top: 1px solid #3e3e3e;
+        font-size: 14px;
+      }
+      
+      #command-input {
+        background: transparent;
+        border: none;
+        color: inherit;
+        outline: none;
+        font-family: inherit;
+        font-size: inherit;
+        width: calc(100% - 20px);
+      }
+      
+      .visual-selection {
+        background: #264f78 !important;
+      }
+    `;
 
-        this.editor = document.createElement('div');
-        this.editor.id = 'editor';
-        this.editor.contentEditable = true;
-        this.editor.innerText = `Welcome to VimEditor Component
+    this.editor = document.createElement('div');
+    this.editor.id = 'editor';
+    this.editor.contentEditable = true;
+    this.editor.spellcheck = false;
+    this.editor.innerText = `Welcome to VimEditor Component
 Line 2 here
 Another line
 Try i, Esc, v, :, yy, dd, 0, $, gg, G, and p`;
 
-        this.cmdLine = document.createElement('div');
-        this.cmdLine.id = 'command-line';
-        this.shadowRoot.append(style, this.editor, this.cmdLine);
+    this.cmdLine = document.createElement('div');
+    this.cmdLine.id = 'command-line';
+    
+    const cmdPrompt = document.createElement('span');
+    cmdPrompt.textContent = ':';
+    
+    this.cmdInput = document.createElement('input');
+    this.cmdInput.id = 'command-input';
+    this.cmdInput.type = 'text';
+    
+    this.cmdLine.append(cmdPrompt, this.cmdInput);
 
-        this.mode = 'normal'; // normal | insert | visual | command
-        this.keyBuffer = '';
-        this.lastDeletedLine = '';
-        this.yankedLine = '';
+    this.statusBar = document.createElement('div');
+    this.statusBar.id = 'status-bar';
+    
+    this.modeIndicator = document.createElement('span');
+    this.modeIndicator.id = 'mode-indicator';
+    this.modeIndicator.textContent = 'NORMAL';
+    
+    this.statusBar.appendChild(this.modeIndicator);
 
-        this.editor.addEventListener('keydown', this.handleKeydown.bind(this));
-      }
+    this.shadowRoot.append(style, this.editor, this.cmdLine, this.statusBar);
 
-      connectedCallback() {
+    this.mode = 'normal';
+    this.keyBuffer = '';
+    this.lastDeletedLine = '';
+    this.yankedLine = '';
+    this.visualStartOffset = null;
+    this.visualEndOffset = null;
+
+    // Bind event handlers
+    this.handleKeydown = this.handleKeydown.bind(this);
+    this.handleCmdKeydown = this.handleCmdKeydown.bind(this);
+    this.updateVisualSelection = this.updateVisualSelection.bind(this);
+    
+    this.editor.addEventListener('keydown', this.handleKeydown);
+    this.cmdInput.addEventListener('keydown', this.handleCmdKeydown);
+    this.editor.addEventListener('beforeinput', this.handleBeforeInput.bind(this));
+  }
+
+  connectedCallback() {
+    this.editor.focus();
+  }
+
+  setMode(mode) {
+    this.mode = mode;
+    this.modeIndicator.textContent = mode.toUpperCase();
+    
+    // Update editor classes
+    this.editor.classList.remove('insert-mode', 'visual-mode', 'normal-mode');
+    this.editor.classList.add(`${mode}-mode`);
+    
+    if (mode === 'visual') {
+      this.visualStartOffset = this.getCaretOffset();
+      this.editor.addEventListener('selectionchange', this.updateVisualSelection);
+    } else {
+      this.clearVisualSelection();
+      this.editor.removeEventListener('selectionchange', this.updateVisualSelection);
+    }
+    
+    if (mode === 'command') {
+      this.cmdLine.style.display = 'block';
+      this.cmdInput.value = '';
+      this.cmdInput.focus();
+    } else {
+      this.cmdLine.style.display = 'none';
+      if (mode !== 'insert') {
+        // Keep focus on editor for all non-insert modes
         this.editor.focus();
       }
+    }
+  }
 
-      getCaretOffset() {
-        let caretOffset = 0;
-        const sel = this.shadowRoot.getSelection();
-        if (!sel || sel.rangeCount === 0) return 0;
+  updateVisualSelection() {
+    if (this.mode !== 'visual') return;
+    this.visualEndOffset = this.getCaretOffset();
+  }
 
-        const range = sel.getRangeAt(0);
-        const preCaretRange = range.cloneRange();
-        preCaretRange.selectNodeContents(this.editor);
-        preCaretRange.setEnd(range.endContainer, range.endOffset);
-        caretOffset = preCaretRange.toString().length;
-        return caretOffset;
+  clearVisualSelection() {
+    const sel = this.shadowRoot.getSelection();
+    if (sel) sel.removeAllRanges();
+    this.visualStartOffset = null;
+    this.visualEndOffset = null;
+  }
+
+  getCaretOffset() {
+    const sel = this.shadowRoot.getSelection();
+    if (!sel || sel.rangeCount === 0) return 0;
+
+    const range = sel.getRangeAt(0);
+    const preCaretRange = range.cloneRange();
+    preCaretRange.selectNodeContents(this.editor);
+    preCaretRange.setEnd(range.endContainer, range.endOffset);
+    return preCaretRange.toString().length;
+  }
+
+  setCaretOffset(offset) {
+    const textContent = this.editor.innerText;
+    offset = Math.max(0, Math.min(offset, textContent.length));
+    
+    const range = document.createRange();
+    const sel = this.shadowRoot.getSelection();
+    const walker = document.createTreeWalker(
+      this.editor, 
+      NodeFilter.SHOW_TEXT, 
+      null, 
+      false
+    );
+
+    let currentOffset = 0;
+    let node;
+    
+    while ((node = walker.nextNode())) {
+      const nodeLength = node.textContent.length;
+      if (currentOffset + nodeLength >= offset) {
+        range.setStart(node, offset - currentOffset);
+        range.collapse(true);
+        sel.removeAllRanges();
+        sel.addRange(range);
+        return;
       }
+      currentOffset += nodeLength;
+    }
+    
+    // If we couldn't find the position, set to end
+    if (this.editor.lastChild) {
+      range.selectNodeContents(this.editor.lastChild);
+      range.collapse(false);
+      sel.removeAllRanges();
+      sel.addRange(range);
+    }
+  }
 
-      setCaretOffset(offset) {
-        const range = document.createRange();
-        const sel = this.shadowRoot.getSelection();
-        const walker = document.createTreeWalker(this.editor, NodeFilter.SHOW_TEXT, null, false);
+  handleBeforeInput(e) {
+    if (this.mode !== 'insert') {
+      e.preventDefault();
+    }
+  }
 
-        let currentOffset = 0;
-        let node;
-        while ((node = walker.nextNode())) {
-          if (currentOffset + node.length >= offset) {
-            range.setStart(node, offset - currentOffset);
-            range.collapse(true);
-            sel.removeAllRanges();
-            sel.addRange(range);
-            return;
-          }
-          currentOffset += node.length;
+  handleCmdKeydown(e) {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      this.executeCommand(this.cmdInput.value);
+      this.setMode('normal');
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      this.setMode('normal');
+    }
+  }
+
+  executeCommand(cmd) {
+    const trimmedCmd = cmd.trim();
+    
+    // Handle basic vim commands
+    if (trimmedCmd === 'w' || trimmedCmd === 'write') {
+      console.log('Save command (not implemented)');
+    } else if (trimmedCmd === 'q' || trimmedCmd === 'quit') {
+      console.log('Quit command (not implemented)');
+    } else if (trimmedCmd === 'wq' || trimmedCmd === 'x') {
+      console.log('Save and quit command (not implemented)');
+    } else if (/^\d+$/.test(trimmedCmd)) {
+      // Go to line number
+      const lineNum = parseInt(trimmedCmd, 10) - 1;
+      this.goToLine(lineNum);
+    }
+  }
+
+  goToLine(lineNum) {
+    const lines = this.editor.innerText.split('\n');
+    if (lineNum < 0 || lineNum >= lines.length) return;
+    
+    let offset = 0;
+    for (let i = 0; i < lineNum; i++) {
+      offset += lines[i].length + 1;
+    }
+    this.setCaretOffset(offset);
+  }
+
+  getCurrentLineInfo() {
+    const text = this.editor.innerText;
+    const caretPos = this.getCaretOffset();
+    const lines = text.split('\n');
+    
+    let charCount = 0;
+    for (let i = 0; i < lines.length; i++) {
+      if (caretPos <= charCount + lines[i].length) {
+        return {
+          lineIndex: i,
+          lines: lines,
+          lineStartOffset: charCount,
+          positionInLine: caretPos - charCount
+        };
+      }
+      charCount += lines[i].length + 1;
+    }
+    
+    return {
+      lineIndex: lines.length - 1,
+      lines: lines,
+      lineStartOffset: charCount - lines[lines.length - 1].length - 1,
+      positionInLine: 0
+    };
+  }
+
+  handleKeydown(e) {
+    if (this.mode === 'insert') {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        this.setMode('normal');
+        // Move cursor one position left (vim behavior)
+        const offset = this.getCaretOffset();
+        if (offset > 0) {
+          this.setCaretOffset(offset - 1);
         }
       }
+      return;
+    }
 
-      handleKeydown(e) {
-        const key = e.key;
+    if (this.mode === 'command') {
+      return; // Command mode input is handled by cmdInput
+    }
 
-        if (this.mode === 'insert') {
-          if (key === 'Escape') {
-            e.preventDefault();
-            this.mode = 'normal';
-            this.editor.blur();
-            this.editor.focus();
-          }
-          return;
+    if (this.mode === 'visual') {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        this.setMode('normal');
+        return;
+      }
+      
+      // Allow movement in visual mode
+      if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(e.key)) {
+        return; // Let default behavior handle selection
+      }
+      
+      if (e.key === 'y') {
+        e.preventDefault();
+        // Yank selected text
+        const sel = this.shadowRoot.getSelection();
+        if (sel && sel.rangeCount > 0) {
+          this.yankedLine = sel.toString();
         }
-
-        if (this.mode === 'command') {
-          if (key === 'Enter' || key === 'Escape') {
-            e.preventDefault();
-            this.cmdLine.style.display = 'none';
-            this.mode = 'normal';
-            this.keyBuffer = '';
-          }
-          return;
-        }
-
-        if (this.mode === 'visual') {
-          if (key === 'Escape') {
-            e.preventDefault();
-            this.mode = 'normal';
-          }
-          return;
-        }
-
-        // Handle normal mode
-        this.keyBuffer += key;
-
-        const text = this.editor.innerText;
-        const caretPos = this.getCaretOffset();
-        const lines = text.split('\n');
-
-        let charCount = 0, lineIdx = 0;
-        for (let i = 0; i < lines.length; i++) {
-          if (caretPos <= charCount + lines[i].length) {
-            lineIdx = i;
-            break;
-          }
-          charCount += lines[i].length + 1;
-        }
-
-        const offsetToLine = idx =>
-          text.split('\n').slice(0, idx).reduce((acc, l) => acc + l.length + 1, 0);
-
-        switch (this.keyBuffer) {
-          case 'i':
-            e.preventDefault();
-            this.mode = 'insert';
-            this.keyBuffer = '';
-            break;
-
-          case 'v':
-            e.preventDefault();
-            this.mode = 'visual';
-            this.keyBuffer = '';
-            break;
-
-          case ':':
-            e.preventDefault();
-            this.mode = 'command';
-            this.cmdLine.style.display = 'block';
-            this.cmdLine.textContent = ':';
-            this.keyBuffer = '';
-            break;
-
-          case 'yy':
-            e.preventDefault();
-            this.yankedLine = lines[lineIdx];
-            this.keyBuffer = '';
-            break;
-
-          case 'dd':
-            e.preventDefault();
-            this.lastDeletedLine = lines[lineIdx];
-            lines.splice(lineIdx, 1);
-            this.editor.innerText = lines.join('\n');
-            this.setCaretOffset(offsetToLine(lineIdx));
-            this.keyBuffer = '';
-            break;
-
-          case 'p':
-            e.preventDefault();
-            const lineToPaste = this.yankedLine || this.lastDeletedLine;
-            if (lineToPaste) {
-              lines.splice(lineIdx + 1, 0, lineToPaste);
-              this.editor.innerText = lines.join('\n');
-              this.setCaretOffset(offsetToLine(lineIdx + 1));
-            }
-            this.keyBuffer = '';
-            break;
-
-          case '0':
-            e.preventDefault();
-            this.setCaretOffset(offsetToLine(lineIdx));
-            this.keyBuffer = '';
-            break;
-
-          case '$':
-            e.preventDefault();
-            this.setCaretOffset(offsetToLine(lineIdx) + lines[lineIdx].length);
-            this.keyBuffer = '';
-            break;
-
-          case 'gg':
-            e.preventDefault();
-            this.setCaretOffset(0);
-            this.keyBuffer = '';
-            break;
-
-          case 'G':
-            e.preventDefault();
-            this.setCaretOffset(text.length);
-            this.keyBuffer = '';
-            break;
-
-          case 'Escape':
-            e.preventDefault();
-            this.mode = 'normal';
-            this.keyBuffer = '';
-            this.cmdLine.style.display = 'none';
-            break;
-
-          default:
-            // allow up to 2 chars for combos
-            if (this.keyBuffer.length > 2) this.keyBuffer = '';
-            break;
+        this.setMode('normal');
+        return;
+      }
+      
+      if (e.key === 'd' || e.key === 'x') {
+        e.preventDefault();
+        // Delete selected text
+        const sel = this.shadowRoot.getSelection();
+        if (sel && sel.rangeCount > 0) {
+          this.lastDeletedLine = sel.toString();
+          document.execCommand('delete');
         }
+        this.setMode('normal');
+        return;
       }
     }
 
-    customElements.define('njet-editor', NjetEditor);
-export {NjetEditor}
+    // Normal mode handling
+    e.preventDefault();
+    
+    // Special keys that should be handled immediately
+    if (e.key === 'Escape') {
+      this.keyBuffer = '';
+      this.setMode('normal');
+      return;
+    }
+    
+    // Build key buffer for commands
+    this.keyBuffer += e.key;
+    
+    const lineInfo = this.getCurrentLineInfo();
+    const { lineIndex, lines, lineStartOffset, positionInLine } = lineInfo;
+
+    // Process commands
+    switch (this.keyBuffer) {
+      case 'i':
+        this.keyBuffer = '';
+        this.setMode('insert');
+        break;
+
+      case 'a':
+        this.keyBuffer = '';
+        this.setCaretOffset(this.getCaretOffset() + 1);
+        this.setMode('insert');
+        break;
+
+      case 'v':
+        this.keyBuffer = '';
+        this.setMode('visual');
+        break;
+
+      case ':':
+        this.keyBuffer = '';
+        this.setMode('command');
+        break;
+
+      case 'yy':
+        this.keyBuffer = '';
+        this.yankedLine = lines[lineIndex];
+        break;
+
+      case 'dd':
+        this.keyBuffer = '';
+        this.lastDeletedLine = lines[lineIndex];
+        lines.splice(lineIndex, 1);
+        if (lines.length === 0) lines.push('');
+        this.editor.innerText = lines.join('\n');
+        this.setCaretOffset(lineStartOffset);
+        break;
+
+      case 'p':
+        this.keyBuffer = '';
+        const lineToPaste = this.yankedLine || this.lastDeletedLine;
+        if (lineToPaste) {
+          lines.splice(lineIndex + 1, 0, lineToPaste);
+          this.editor.innerText = lines.join('\n');
+          this.setCaretOffset(lineStartOffset + lines[lineIndex].length + 1);
+        }
+        break;
+
+      case '0':
+        this.keyBuffer = '';
+        this.setCaretOffset(lineStartOffset);
+        break;
+
+      case '$':
+        this.keyBuffer = '';
+        this.setCaretOffset(lineStartOffset + lines[lineIndex].length);
+        break;
+
+      case 'gg':
+        this.keyBuffer = '';
+        this.setCaretOffset(0);
+        break;
+
+      case 'G':
+        this.keyBuffer = '';
+        this.setCaretOffset(this.editor.innerText.length);
+        break;
+
+      case 'h':
+      case 'ArrowLeft':
+        this.keyBuffer = '';
+        const currentOffset = this.getCaretOffset();
+        if (currentOffset > 0) {
+          this.setCaretOffset(currentOffset - 1);
+        }
+        break;
+
+      case 'l':
+      case 'ArrowRight':
+        this.keyBuffer = '';
+        this.setCaretOffset(this.getCaretOffset() + 1);
+        break;
+
+      case 'j':
+      case 'ArrowDown':
+        this.keyBuffer = '';
+        if (lineIndex < lines.length - 1) {
+          const nextLineStart = lineStartOffset + lines[lineIndex].length + 1;
+          const nextLineLength = lines[lineIndex + 1].length;
+          const newPosition = Math.min(positionInLine, nextLineLength);
+          this.setCaretOffset(nextLineStart + newPosition);
+        }
+        break;
+
+      case 'k':
+      case 'ArrowUp':
+        this.keyBuffer = '';
+        if (lineIndex > 0) {
+          let prevLineStart = 0;
+          for (let i = 0; i < lineIndex - 1; i++) {
+            prevLineStart += lines[i].length + 1;
+          }
+          const prevLineLength = lines[lineIndex - 1].length;
+          const newPosition = Math.min(positionInLine, prevLineLength);
+          this.setCaretOffset(prevLineStart + newPosition);
+        }
+        break;
+
+      default:
+        // Clear buffer if it gets too long or contains invalid sequences
+        if (this.keyBuffer.length > 2 || 
+            (this.keyBuffer.length === 2 && !['dd', 'yy', 'gg'].includes(this.keyBuffer))) {
+          this.keyBuffer = '';
+        }
+        break;
+    }
+  }
+}
+
+customElements.define('njet-editor', NjetEditor);
+export { NjetEditor }

src/snek/static/message-list.js

@@ -5,75 +5,71 @@
 // The code seems to rely on some external dependencies like 'models.Message', 'app', and 'Schedule'. These should be imported or defined elsewhere in your application.
 
 // MIT License: This is free software. Permission is granted to use, copy, modify, and/or distribute this software for any purpose with or without fee. The software is provided "as is" without any warranty.
-import {app} from "./app.js";
+import { app } from "./app.js";
 
-const LONG_TIME = 1000 * 60 * 20
+const LONG_TIME = 1000 * 60 * 20;
 
 export class ReplyEvent extends Event {
-    constructor(messageTextTarget) {
-      super('reply', { bubbles: true, composed: true });
-      this.messageTextTarget = messageTextTarget;
+  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);
+    // Clone and sanitize message node to text-only reply
+    const newMessage = messageTextTarget.cloneNode(true);
+    newMessage.style.maxHeight = "0";
+    messageTextTarget.parentElement.insertBefore(newMessage, messageTextTarget);
 
-      newMessage.querySelectorAll('.embed-url-link').forEach(link => {
-        link.remove()
-      })
+    // Remove all .embed-url-link
+    newMessage.querySelectorAll('.embed-url-link').forEach(link => link.remove());
 
-      newMessage.querySelectorAll('picture').forEach(picture => {
-        const img = picture.querySelector('img');
-        if (img) {
-          picture.replaceWith(img);
-        }
-      })
+    // Replace <picture> with their <img>
+    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));
-      })
+    // Replace <img> with just their src
+    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));
-      })
+     // Replace <video> with just their src
+    newMessage.querySelectorAll('video').forEach(vid => {
+      const src = vid.src || vid.currentSrc || vid.querySelector('source').src;
+      vid.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})`));
-        }
-      })
+    // Replace <iframe> with their src
+    newMessage.querySelectorAll('iframe').forEach(iframe => {
+      const src = iframe.src || iframe.currentSrc;
+      iframe.replaceWith(document.createTextNode(src));
+    });
 
-      this.replyText = newMessage.innerText.replaceAll("\n\n", "\n").trim();
-      newMessage.remove()
-    }
+    // Replace <a> with href or markdown
+    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'];
-
-  isVisible() {
-    if (!this) return false;
-    const rect = this.getBoundingClientRect();
-    return (
-      rect.top >= 0 &&
-      rect.left >= 0 &&
-      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
-      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
-    );
-  }
-
   updateUI() {
     if (this._originalChildren === undefined) {
-      const { color,  user_nick, created_at, user_uid} = this.dataset;
+      const { color, user_nick, created_at, user_uid } = this.dataset;
       this.classList.add('message');
       this.style.maxWidth = '100%';
       this._originalChildren = Array.from(this.children);
+
       this.innerHTML = `
         <a class="avatar" style="background-color: ${color || ''}; color: black;" href="/user/${user_uid || ''}.html">
           <img class="avatar-img" width="40" height="40" src="/avatar/${user_uid || ''}.svg" alt="${user_nick || ''}" loading="lazy">
@@ -83,29 +79,30 @@ class MessageElement extends HTMLElement {
           <div class="text"></div>
           <div class="time no-select" data-created_at="${created_at || ''}">
             <span></span>
-            <a href="#reply">reply</a></div>
+            <a href="#reply">reply</a>
           </div>
-    `;
+        </div>
+      `;
 
       this.messageDiv = this.querySelector('.text');
-
       if (this._originalChildren && this._originalChildren.length > 0) {
-          this._originalChildren.forEach(child => {
-              this.messageDiv.appendChild(child);
-          });
+        this._originalChildren.forEach(child => {
+          this.messageDiv.appendChild(child);
+        });
       }
 
       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));
-        })
+      this.replyDiv.addEventListener('click', (e) => {
+        e.preventDefault();
+        this.dispatchEvent(new ReplyEvent(this.messageDiv));
+      });
     }
 
-    if (!this.siblingGenerated && this.nextElementSibling) {
-      this.siblingGenerated = true;
+    // Sibling logic for user switches and long time gaps
+    if ((!this.siblingGenerated || this.siblingGenerated !== this.nextElementSibling) && this.nextElementSibling) {
+      this.siblingGenerated = this.nextElementSibling;
       if (this.nextElementSibling?.dataset?.user_uid !== this.dataset.user_uid) {
         this.classList.add('switch-user');
       } else {
@@ -113,7 +110,7 @@ class MessageElement extends HTMLElement {
         const siblingTime = new Date(this.nextElementSibling.dataset.created_at);
         const currentTime = new Date(this.dataset.created_at);
 
-        if (currentTime.getTime()  - siblingTime.getTime() > LONG_TIME) {
+        if (currentTime.getTime() - siblingTime.getTime() > LONG_TIME) {
           this.classList.add('long-time');
         } else {
           this.classList.remove('long-time');
@@ -126,7 +123,7 @@ class MessageElement extends HTMLElement {
 
   updateMessage(...messages) {
     if (this._originalChildren) {
-      this.messageDiv.replaceChildren(...messages)
+      this.messageDiv.replaceChildren(...messages);
       this._originalChildren = messages;
     }
   }
@@ -135,38 +132,26 @@ class MessageElement extends HTMLElement {
     this.updateUI();
   }
 
-  disconnectedCallback() {
-  }
-
-  connectedMoveCallback() {
-  }
+  disconnectedCallback() {}
+  connectedMoveCallback() {}
 
   attributeChangedCallback(name, oldValue, newValue) {
-    this.updateUI()
+    this.updateUI();
   }
 }
 
 class MessageList extends HTMLElement {
   constructor() {
     super();
-    app.ws.addEventListener("update_message_text", (data) => {
-      if (this.messageMap.has(data.uid)) {
-        this.upsertMessage(data);
-      }
-    });
-    app.ws.addEventListener("set_typing", (data) => {
-      this.triggerGlow(data.user_uid,data.color);
-    });
-
     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();
+          if (entry.target instanceof MessageElement) {
+            entry.target.updateUI();
           }
         } else {
           this.visibleSet.delete(entry.target);
@@ -175,28 +160,42 @@ class MessageList extends HTMLElement {
     }, {
       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);
-      }
-    }
+    });
 
+    // End-of-messages marker
     this.endOfMessages = document.createElement('div');
     this.endOfMessages.classList.add('message-list-bottom');
     this.prepend(this.endOfMessages);
 
+    // Observe existing children and index by uid
+    for (const c of this.children) {
+      this._observer.observe(c);
+      if (c instanceof MessageElement) {
+        this.messageMap.set(c.dataset.uid, c);
+      }
+    }
+
+    // Wire up socket events
+    app.ws.addEventListener("update_message_text", (data) => {
+      if (this.messageMap.has(data.uid)) {
+        this.upsertMessage(data);
+      }
+    });
+    app.ws.addEventListener("set_typing", (data) => {
+      this.triggerGlow(data.user_uid, data.color);
+    });
+
     this.scrollToBottom(true);
   }
 
   connectedCallback() {
     this.addEventListener('click', (e) => {
-      if (e.target.tagName !== 'IMG' || e.target.classList.contains('avatar-img')) return;
+      if (
+        e.target.tagName !== 'IMG' ||
+        e.target.classList.contains('avatar-img')
+      ) return;
 
       const img = e.target;
-
       const overlay = document.createElement('div');
       overlay.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);display:flex;justify-content:center;align-items:center;z-index:9999;cursor:pointer;';
 
@@ -217,12 +216,11 @@ class MessageList extends HTMLElement {
 
       overlay.appendChild(fullImg);
       document.body.appendChild(overlay);
+
       overlay.addEventListener('click', () => {
-        if (overlay.parentNode) {
-          overlay.parentNode.removeChild(overlay);
-        }
+        if (overlay.parentNode) overlay.parentNode.removeChild(overlay);
       });
-      // Optional: ESC key closes overlay
+      // ESC to close
       const escListener = (evt) => {
         if (evt.key === 'Escape') {
           if (overlay.parentNode) overlay.parentNode.removeChild(overlay);
@@ -230,8 +228,9 @@ class MessageList extends HTMLElement {
         }
       };
       document.addEventListener('keydown', escListener);
-    })
+    });
   }
+
   isElementVisible(element) {
     if (!element) return false;
     const rect = element.getBoundingClientRect();
@@ -242,14 +241,16 @@ class MessageList extends HTMLElement {
       rect.right <= (window.innerWidth || document.documentElement.clientWidth)
     );
   }
+
   isScrolledToBottom() {
-    return this.isElementVisible(this.endOfMessages);
+    return this.visibleSet.has(this.endOfMessages);
   }
-  scrollToBottom(force = false, behavior= 'instant') {
+
+  scrollToBottom(force = false, behavior = 'instant') {
     if (force || !this.isScrolledToBottom()) {
-      this.firstElementChild.scrollIntoView({ behavior, block: 'end' });
+      this.endOfMessages.scrollIntoView({ behavior, block: 'end' });
       setTimeout(() => {
-        this.firstElementChild.scrollIntoView({ behavior, block: 'end' });
+        this.endOfMessages.scrollIntoView({ behavior, block: 'end' });
       }, 200);
     }
   }
@@ -261,7 +262,9 @@ class MessageList extends HTMLElement {
     this.querySelectorAll('.avatar').forEach((el) => {
       const anchor = el.closest('a');
       if (anchor && typeof anchor.href === 'string' && anchor.href.includes(uid)) {
-        lastElement = el;
+        if(!lastElement)
+          lastElement = el;
+
       }
     });
     if (lastElement) {
@@ -272,40 +275,48 @@ class MessageList extends HTMLElement {
     }
   }
 
-
   updateTimes() {
     this.visibleSet.forEach((messageElement) => {
-        if (messageElement instanceof MessageElement) {
-            messageElement.updateUI();
-        }
-    })
+      if (messageElement instanceof MessageElement) {
+        messageElement.updateUI();
+      }
+    });
   }
 
   upsertMessage(data) {
     let message = this.messageMap.get(data.uid);
-    if (message) {
-        message.parentElement?.removeChild(message);
+    if (message && (data.is_final || !data.message)) {
+      //message.parentElement?.removeChild(message);
+      // TO force insert 
+      //message = null;
+      
     }
-
-    if (!data.message) return
+    if(message && !data.message){
+      message.parentElement?.removeChild(message);
+      message = null;
+    }
+    if (!data.message) return;
 
     const wrapper = document.createElement("div");
-
     wrapper.innerHTML = data.html;
 
     if (message) {
+      // If the old element is already custom, only update its message children
       message.updateMessage(...(wrapper.firstElementChild._originalChildren || wrapper.firstElementChild.children));
     } else {
+      // If not, insert the new one and observe
       message = wrapper.firstElementChild;
       this.messageMap.set(data.uid, message);
       this._observer.observe(message);
+      this.endOfMessages.after(message);
     }
 
     const scrolledToBottom = this.isScrolledToBottom();
-    this.prepend(message);
+
     if (scrolledToBottom) this.scrollToBottom(true);
   }
 }
 
 customElements.define("chat-message", MessageElement);
 customElements.define("message-list", MessageList);
+

src/snek/static/service-worker.js

@@ -52,7 +52,7 @@ self.addEventListener("push", async (event) => {
         data,
     }).then(e => console.log("Showing notification", e)).catch(console.error);
 
-    event.waitUntil(reg);
+//    event.waitUntil(reg);
 });
 
 

src/snek/static/socket.js

@@ -86,6 +86,7 @@ export class Socket extends EventHandler {
     }
     this.emit("data", data.data);
     if (data["event"]) {
+      console.info([data.event,data.data])
       this.emit(data.event, data.data);
     }
   }
@@ -99,7 +100,7 @@ export class Socket extends EventHandler {
         console.log("Reconnecting");
         this.emit("reconnecting");
           return this.connect();
-      }, 0);
+      }, 4000);
   }
 
   _camelToSnake(str) {

src/snek/system/cache.py

@@ -1,75 +1,137 @@
+import asyncio
 import functools
 import json
-
+from collections import OrderedDict
 from snek.system import security
 
-cache = functools.cache
-
 CACHE_MAX_ITEMS_DEFAULT = 5000
 
 
 class Cache:
+    """
+    An asynchronous, thread-safe, in-memory LRU (Least Recently Used) cache.
+
+    This implementation uses an OrderedDict for efficient O(1) time complexity
+    for its core get, set, and delete operations.
+    """
+
     def __init__(self, app, max_items=CACHE_MAX_ITEMS_DEFAULT):
         self.app = app
-        self.cache = {}
+        # OrderedDict is the core of the LRU logic. It remembers the order
+        # in which items were inserted.
+        self.cache: OrderedDict = OrderedDict()
         self.max_items = max_items
         self.stats = {}
         self.enabled = True
-        self.lru = []
-        self.version = ((42 + 420 + 1984 + 1990 + 10 + 6 + 71 + 3004 + 7245) ^ 1337) + 4
+        # A lock is crucial to prevent race conditions in an async environment.
+        self._lock = asyncio.Lock()
+        self.version = ((42 + 420 + 1984 + 1990 + 10 + 6 + 71 + 3004 + 7245) ^ 1337) + 4 
 
-    async def get(self, args):
+    async def get(self, key):
+        """
+        Retrieves an item from the cache. If found, it's marked as recently used.
+        Returns None if the item is not found or the cache is disabled.
+        """
         if not self.enabled:
             return None
-        await self.update_stat(args, "get")
-        try:
-            self.lru.pop(self.lru.index(args))
-        except:
-            # print("Cache miss!", args, flush=True)
+
+        #async with self._lock:
+        if key not in self.cache:
+            await self.update_stat(key, "get")
             return None
-        self.lru.insert(0, args)
-        while len(self.lru) > self.max_items:
-            self.cache.pop(self.lru[-1])
-            self.lru.pop()
-        # print("Cache hit!", args, flush=True)
-        return self.cache[args]
+
+        # Mark as recently used by moving it to the end of the OrderedDict.
+        # This is an O(1) operation.
+        self.cache.move_to_end(key)
+        await self.update_stat(key, "get")
+        return self.cache[key]
+
+    async def set(self, key, value):
+        """
+        Adds or updates an item in the cache and marks it as recently used.
+        If the cache exceeds its maximum size, the least recently used item is evicted.
+        """
+        if not self.enabled:
+            return
+        # comment
+        #async with self._lock:
+        is_new = key not in self.cache
+
+        # Add or update the item. If it exists, it's moved to the end.
+        self.cache[key] = value
+        self.cache.move_to_end(key)
+
+        await self.update_stat(key, "set")
+
+        # Evict the least recently used item if the cache is full.
+        # This is an O(1) operation.
+        if len(self.cache) > self.max_items:
+            # popitem(last=False) removes and returns the first (oldest) item.
+            evicted_key, _ = self.cache.popitem(last=False)
+            # Optionally, you could log the evicted key here.
+
+        if is_new:
+            self.version += 1
+
+    async def delete(self, key):
+        """Removes an item from the cache if it exists."""
+        if not self.enabled:
+            return
+
+        async with self._lock:
+            if key in self.cache:
+                await self.update_stat(key, "delete")
+                # Deleting from OrderedDict is an O(1) operation on average.
+                del self.cache[key]
 
     async def get_stats(self):
-        all_ = []
-        for key in self.lru:
-            all_.append(
-                {
-                    "key": key,
-                    "set": self.stats[key]["set"],
-                    "get": self.stats[key]["get"],
-                    "delete": self.stats[key]["delete"],
-                    "value": str(self.serialize(self.cache[key].record)),
-                }
-            )
-        return all_
+        """Returns statistics for all items currently in the cache."""
+        async with self._lock:
+            stats_list = []
+            # Items are iterated from oldest to newest. We reverse to show
+            # most recently used items first.
+            for key in reversed(self.cache):
+                stat_data = self.stats.get(key, {"set": 0, "get": 0, "delete": 0})
+                value = self.cache[key]
+                value_record = value.record if hasattr(value, 'record') else value
 
-    def serialize(self, obj):
-        cpy = obj.copy()
-        cpy.pop("created_at", None)
-        cpy.pop("deleted_at", None)
-        cpy.pop("email", None)
-        cpy.pop("password", None)
-        return cpy
+                stats_list.append({
+                    "key": key,
+                    "set": stat_data.get("set", 0),
+                    "get": stat_data.get("get", 0),
+                    "delete": stat_data.get("delete", 0),
+                    "value": str(self.serialize(value_record)),
+                })
+            return stats_list
 
     async def update_stat(self, key, action):
-        if key not in self.stats:
-            self.stats[key] = {"set": 0, "get": 0, "delete": 0}
-        self.stats[key][action] = self.stats[key][action] + 1
+        """Updates hit/miss/set counts for a given cache key."""
+        # This method is already called within a locked context,
+        # but the lock makes it safe if ever called directly.
+        async with self._lock:
+            if key not in self.stats:
+                self.stats[key] = {"set": 0, "get": 0, "delete": 0}
+            self.stats[key][action] += 1
+
+    def serialize(self, obj):
+        """A synchronous helper to create a serializable representation of an object."""
+        if not isinstance(obj, dict):
+            return obj
+        cpy = obj.copy()
+        for key_to_remove in ["created_at", "deleted_at", "email", "password"]:
+            cpy.pop(key_to_remove, None)
+        return cpy
 
     def json_default(self, value):
-        # if hasattr(value, "to_json"):
-        #    return value.to_json()
+        """JSON serializer fallback for objects that are not directly serializable."""
         try:
             return json.dumps(value.__dict__, default=str)
         except:
             return str(value)
 
     async def create_cache_key(self, args, kwargs):
+        """Creates a consistent, hashable cache key from function arguments."""
+        # security.hash is async, so this method remains async.
         return await security.hash(
             json.dumps(
                 {"args": args, "kwargs": kwargs},
@@ -78,38 +140,8 @@ class Cache:
             )
         )
 
-    async def set(self, args, result):
-        if not self.enabled:
-            return
-        is_new = args not in self.cache
-        self.cache[args] = result
-        await self.update_stat(args, "set")
-        try:
-            self.lru.pop(self.lru.index(args))
-        except (ValueError, IndexError):
-            pass
-        self.lru.insert(0, args)
-
-        while len(self.lru) > self.max_items:
-            self.cache.pop(self.lru[-1])
-            self.lru.pop()
-
-        if is_new:
-            self.version += 1
-            # print(f"Cache store! {len(self.lru)} items. New version:", self.version, flush=True)
-
-    async def delete(self, args):
-        if not self.enabled:
-            return
-        await self.update_stat(args, "delete")
-        if args in self.cache:
-            try:
-                self.lru.pop(self.lru.index(args))
-            except IndexError:
-                pass
-            del self.cache[args]
-
     def async_cache(self, func):
+        """Decorator to cache the results of an async function."""
         @functools.wraps(func)
         async def wrapper(*args, **kwargs):
             cache_key = await self.create_cache_key(args, kwargs)
@@ -119,33 +151,14 @@ class Cache:
             result = await func(*args, **kwargs)
             await self.set(cache_key, result)
             return result
-
         return wrapper
 
     def async_delete_cache(self, func):
+        """Decorator to invalidate a cache entry before running an async function."""
         @functools.wraps(func)
         async def wrapper(*args, **kwargs):
             cache_key = await self.create_cache_key(args, kwargs)
-            if cache_key in self.cache:
-                try:
-                    self.lru.pop(self.lru.index(cache_key))
-                except IndexError:
-                    pass
-                del self.cache[cache_key]
+            await self.delete(cache_key)
             return await func(*args, **kwargs)
-
         return wrapper
 
-
-def async_cache(func):
-    cache = {}
-
-    @functools.wraps(func)
-    async def wrapper(*args):
-        if args in cache:
-            return cache[args]
-        result = await func(*args)
-        cache[args] = result
-        return result
-
-    return wrapper

src/snek/system/mapper.py

@@ -1,7 +1,7 @@
 DEFAULT_LIMIT = 30
 import asyncio
 import typing
-
+import time
 from snek.system.model import BaseModel
 
 
@@ -15,8 +15,6 @@ class BaseMapper:
     def __init__(self, app):
         self.app = app
 
-        self.default_limit = self.__class__.default_limit
-
     @property
     def db(self):
         return self.app.db
@@ -27,6 +25,7 @@ class BaseMapper:
 
     async def run_in_executor(self, func, *args, **kwargs):
         use_semaphore = kwargs.pop("use_semaphore", False)
+        start_time = time.time()
         
         def _execute(): 
             result = func(*args, **kwargs)
@@ -34,10 +33,8 @@ class BaseMapper:
                 self.db.commit()
             return result 
         
-        return _execute()
-        #async with self.semaphore:
-        #    return await self.loop.run_in_executor(None, _execute)
-
+        async with self.semaphore:
+            return await asyncio.to_thread(_execute)
 
     async def new(self):
         return self.model_class(mapper=self, app=self.app)

src/snek/system/stats.py

@@ -1,129 +0,0 @@
-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

@@ -82,6 +82,32 @@ emoji.EMOJI_DATA[
 ALLOWED_TAGS = list(bleach.sanitizer.ALLOWED_TAGS) + ["picture"]
 
 def sanitize_html(value):
+
+    soup = BeautifulSoup(value, 'html.parser')
+
+    for script in soup.find_all('script'):
+        script.decompose()
+
+    #for iframe in soup.find_all('iframe'):
+        #iframe.decompose()
+
+    for tag in soup.find_all(['object', 'embed']):
+        tag.decompose()
+
+    for tag in soup.find_all():
+        event_attributes = ['onclick', 'onerror', 'onload', 'onmouseover', 'onfocus']
+        for attr in event_attributes:
+            if attr in tag.attrs:
+                del tag[attr]
+
+    for img in soup.find_all('img'):
+        if 'onerror' in img.attrs:
+            img.decompose()
+
+    return soup.prettify()
+
+
+def sanitize_html2(value):
     return bleach.clean(
         value,
         protocols=list(bleach.sanitizer.ALLOWED_PROTOCOLS) + ["data"],

src/snek/templates/app.html

@@ -32,7 +32,7 @@
   <link rel="stylesheet" href="/base.css">
   <link rel="icon" type="image/png" href="/image/snek_logo_32x32.png" sizes="32x32">
   <link rel="icon" type="image/png" href="/image/snek_logo_64x64.png" sizes="64x64">
-  <script nonce="{{nonce}}" defer src="https://umami.molodetz.nl/script.js" data-website-id="d127c3e4-dc70-4041-a1c8-bcc32c2492ea"></script>
+  <script nonce="{{nonce}}" defer src="https://umami.molodetz.nl/script.js" data-website-id="d127c3e4-dc70-4041-a1c8-bcc32c2492ea" defer></script>
 </head>
 <body>
   <header>

src/snek/templates/new.html

@@ -0,0 +1,97 @@
+<html>
+    <head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
+    <link rel="manifest" href="/manifest.json" />
+        <style>
+            body{
+            background-color: black;
+            color: white;
+            }
+            </style>
+    </head>
+    <body>
+<script type="module">
+import { Socket } from "./socket.js";
+
+class ChatWindow extends HTMLElement {
+
+    constructor() {
+      super();
+      this.component = document.createElement("div");
+    this.message_list = document.createElement("div")
+        this.component.appendChild(this.message_list);
+        this.chat_input = document.createElement("div")
+        this.component.appendChild(this.chat_input);
+        this.channelUid = null
+        this.channelUid = this.getAttribute("channel")  
+        this.inputText = document.createElement("textarea")
+        this.inputText.addEventListener("keyup",(e)=>{
+            
+
+            this.rpc.sendMessage(this.channelUid, e.target.value,false)
+            if(e.key == "Enter" && !e.shiftKey){
+                
+
+                this.rpc.sendMessage(this.channelUid, e.target.value,true)
+                
+                e.target.value = ""
+            }else{
+                //this.rpc.sendMessage(this.channelUid, e.target.value, false)
+
+            }
+        })
+        this.component.appendChild(this.inputText)
+        this.ws = new Socket();
+        this.ws.addEventListener("channel-message", this.handleMessage.bind(this))
+        this.rpc = this.ws.client
+        this.ws.addEventListener("update_message_text",this.handleMessage.bind(this))
+        window.chat = this
+    }
+
+    async handleMessage(data,data2) {
+    if(data2 && data2.event)
+        data = data.data
+        console.info(["update-messagettt",data])
+        console.warn(data.uid)
+        if(!data.html)
+        return
+        let div = this.message_list.querySelector('[data-uid="' + data.uid + '"]');
+        console.info(div)
+        if(!div){
+            let temp = document.createElement("chat-message");
+            temp.innerHTML = data.html
+            this.message_list.appendChild(temp)
+            //this.message_list.replace(div,temp)
+            //div.innerHTML = data.html 
+            //this.message_list.appendChild(div);
+        }else{
+        //    alert("HIERR")
+            let temp = document.createElement("chat-message");
+            temp.innerHTML = data.html;
+            div.innerHTML = temp.innerHTML
+            console.info("REPLACE")
+        }
+    }
+
+    async connectedCallback() {
+        await this.rpc.ping(this.channel)
+        console.info(this.channelUid)
+        this.messages = await this.rpc.getMessages(this.channelUid, 0, 0);
+        this.messages.forEach((msg) => {
+            const temp = document.createElement("div");
+            temp.innerHTML = msg.html;
+            this.message_list.appendChild(temp.firstChild);
+        })
+this.appendChild(this.component);
+        
+    }
+
+
+
+}
+
+customElements.define("chat-window", ChatWindow);
+</script>
+        <chat-window channel="df3e1259-7d1a-4184-b75c-3befd5bf08e1"></chat-window>
+    </body>
+</html>

src/snek/templates/sandbox.html

@@ -12,7 +12,7 @@ function showTerm(options){
 
 
 class StarField {
-  constructor({ count = 100, container = document.body } = {}) {
+  constructor({ count = 50, 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: 100});
+const starField = new StarField({starCount: 50});
 app.starField = starField;
 
 class DemoSequence {

src/snek/templates/web.html

@@ -1,6 +1,6 @@
 {% extends "app.html" %}
 
-{% block header_text %}<h2 style="color:#fff">{{ name }}</h2>{% endblock %} 
+{% block header_text %}<h2 style="color:#fff">{{ name }}</h2>{% endblock %}
 
 {% block main %}
 {% include "channel.html" %}
@@ -8,11 +8,11 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm/css/xterm.css">
     <script src="https://cdn.jsdelivr.net/npm/xterm/lib/xterm.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit/lib/xterm-addon-fit.js"></script>
-    
+
     <div id="terminal" class="hidden"></div>
         <message-list class="chat-messages">
         {% if not messages %}
-        
+
         <div>
           <h1>Welcome to your new channel!</h1>
           <p>This is the start of something great. Use the commands below to get started:</p>
@@ -37,10 +37,9 @@
 {% include "dialog_help.html" %}
 {% include "dialog_online.html" %}
 <script type="module">
-    import { app } from "/app.js";
-import { Schedule } from "/schedule.js";
+    import {app} from "/app.js";
 
-// --- Cache selectors ---
+    // --- Cache selectors ---
 const chatInputField = document.querySelector("chat-input");
 const messagesContainer = document.querySelector(".chat-messages");
 const chatArea = document.querySelector(".chat-area");
@@ -52,7 +51,7 @@ chatInputField.autoCompletions = {
     "/clear": () => { messagesContainer.innerHTML = ''; },
     "/live": () => { chatInputField.liveType = !chatInputField.liveType; },
     "/help": showHelp,
-    "/container": async() =>{ 
+    "/container": async() =>{
         containerDialog.openWithStatus()
     }
 };
@@ -99,21 +98,61 @@ setInterval(() => requestIdleCallback(updateTimes), 30000);
 
 // --- Paste & drag/drop uploads ---
 const textBox = chatInputField.textarea;
-textBox.addEventListener("paste", async (e) => {
-    try {
-        const clipboardItems = await navigator.clipboard.read();
-        const dt = new DataTransfer();
-        for (const item of clipboardItems) {
-            for (const type of item.types.filter(t => !t.startsWith('text/'))) {
-                const blob = await item.getType(type);
-                dt.items.add(new File([blob], "image.png", { type }));
+
+function uploadDataTransfer(dt) {
+    if (dt.items.length > 0) {
+        const uploadButton = chatInputField.fileUploadGrid;
+
+        for (const item of dt.items) {
+            if (item.kind === "file") {
+                const file = item.getAsFile();
+                if (file) {
+                   uploadButton.uploadsStarted++
+                   uploadButton.createTile(file)
+                } else {
+                    console.error("Failed to get file from DataTransferItem");
+                }
             }
         }
-        if (dt.items.length > 0) {
-            const uploadButton = chatInputField.uploadButton;
-            const input = uploadButton.shadowRoot.querySelector('.file-input');
-            input.files = dt.files;
-            await uploadButton.uploadFiles();
+    }
+}
+textBox.addEventListener("paste", async (e) => {
+    try {
+        console.log("Pasted data:", e.clipboardData);
+        if (e.clipboardData.types.every(v => v.startsWith("text/"))) {
+            const codeType = e.clipboardData.types.find(t => !t.startsWith('text/plain') && !t.startsWith('text/html') && !t.startsWith('text/rtf'));
+            const probablyCode = codeType ||e.clipboardData.types.some(t => !t.startsWith('text/plain'));
+            for (const item of e.clipboardData.items) {
+                if (item.kind === "string" && item.type === "text/plain") {
+                    e.preventDefault();
+                    item.getAsString(text => {
+                        const value = chatInputField.value;
+                        if (probablyCode) {
+                            let code = text;
+                            const minIndentDepth = code.split('\n').reduce((acc, line) => {
+                                if (!line.trim()) return acc;
+                                const match = line.match(/^(\s*)/);
+                                return match ? Math.min(acc, match[1].length) : acc;
+                            }, 9000);
+                            code = code.split('\n').map(line => line.slice(minIndentDepth)).join('\n')
+                            text = `\`\`\`${codeType?.split('/')?.[1] ?? ''}\n${code}\n\`\`\`\n`;
+                        }
+                        const area = chatInputField.textarea
+                        if(area){
+                            const start = area.selectionStart
+
+                            if ("\n" !== value[start - 1]) {
+                                text = `\n${text}`;
+                            }
+
+                            document.execCommand('insertText', false, text);
+                        }
+                    });
+                    break;
+                }
+            }
+        } else {
+            uploadDataTransfer(e.clipboardData);
         }
     } catch (error) {
         console.error("Failed to read clipboard contents: ", error);
@@ -121,13 +160,7 @@ textBox.addEventListener("paste", async (e) => {
 });
 chatArea.addEventListener("drop", async (e) => {
     e.preventDefault();
-    const dt = e.dataTransfer;
-    if (dt.items.length > 0) {
-        const uploadButton = chatInputField.uploadButton;
-        const input = uploadButton.shadowRoot.querySelector('.file-input');
-        input.files = dt.files;
-        await uploadButton.uploadFiles();
-    }
+    uploadDataTransfer(e.dataTransfer);
 });
 chatArea.addEventListener("dragover", e => {
     e.preventDefault();
@@ -180,7 +213,7 @@ app.ws.addEventListener("starfield.render_word", (data) => {
 
 // --- Channel message event ---
 app.addEventListener("channel-message", (data) => {
-    
+
     let display = data.text && data.text.trim() ? 'block' : 'none';
 
     if (data.channel_uid !== channelUid) {
@@ -221,7 +254,7 @@ document.addEventListener('keydown', function(event) {
         clearTimeout(keyTimeout);
         keyTimeout = setTimeout(() => { gPressCount = 0; }, 300);
         if (gPressCount === 2) {
-            gPressCount = 0; 
+            gPressCount = 0;
             messagesContainer.lastElementChild?.scrollIntoView({ block: "end", inline: "nearest" });
             loadExtra();
         }

src/snek/view/avatar.py

@@ -71,7 +71,10 @@ class AvatarView(BaseView):
         uid = self.request.match_info.get("uid")
         if uid == "unique":
             uid = str(uuid.uuid4())
-        avatar = multiavatar.multiavatar(uid, True, None)
+        avatar = await self.app.get(uid)
+        if not avatar:
+            avatar = multiavatar.multiavatar(uid, True, None)
+            await self.app.set(uid, avatar)
         response = web.Response(text=avatar, content_type="image/svg+xml")
         response.headers["Cache-Control"] = f"public, max-age={1337*42}"
         return response

src/snek/view/channel.py

@@ -29,7 +29,7 @@ class ChannelDriveApiView(DriveApiView):
 
 class ChannelAttachmentView(BaseView):
 
-    login_required=True
+    login_required=False
 
     async def get(self):
         relative_path = self.request.match_info.get("relative_url")

src/snek/view/new.py

@@ -0,0 +1,8 @@
+from snek.system.view import BaseView
+
+
+class NewView(BaseView):
+    login_required = True
+
+    async def get(self):
+        return await self.render_template("new.html")

src/snek/view/rpc.py

@@ -6,12 +6,11 @@
 
 # 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
 import traceback
-
+import random
 from aiohttp import web
 
 from snek.system.model import now
@@ -507,9 +506,7 @@ 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
@@ -529,8 +526,8 @@ class RPCView(BaseView):
             try:
                 await self.ws.send_str(json.dumps(obj, default=str))
             except Exception as ex:
+                print("THIS IS THE DeAL>",str(ex), flush=True)
                 await self.services.socket.delete(self.ws)
-                await self.ws.close()
         
         async def get_online_users(self, channel_uid):
             self._require_login()
@@ -638,7 +635,7 @@ class RPCView(BaseView):
                 try:
                     await rpc(msg.json())
                 except Exception as ex:
-                    print("Deleting socket", ex, flush=True)
+                    print("XXXXXXXXXX Deleting socket", ex, flush=True)
                     logger.exception(ex)
                     await self.services.socket.delete(ws)
                     break

src/snekssh/app.py

@@ -1,78 +0,0 @@
-import asyncio
-import logging
-import os
-
-import asyncssh
-
-asyncssh.set_debug_level(2)
-logging.basicConfig(level=logging.DEBUG)
-# Configuration for SFTP server
-SFTP_ROOT = "."  # Directory to serve
-USERNAME = "test"
-PASSWORD = "woeii"
-HOST = "localhost"
-PORT = 2225
-
-
-class MySFTPServer(asyncssh.SFTPServer):
-    def __init__(self, chan):
-        super().__init__(chan)
-        self.root = os.path.abspath(SFTP_ROOT)
-
-    async def stat(self, path):
-        """Handles 'stat' command from SFTP client"""
-        full_path = os.path.join(self.root, path.lstrip("/"))
-        return await super().stat(full_path)
-
-    async def open(self, path, flags, attrs):
-        """Handles file open requests"""
-        full_path = os.path.join(self.root, path.lstrip("/"))
-        return await super().open(full_path, flags, attrs)
-
-    async def listdir(self, path):
-        """Handles directory listing"""
-        full_path = os.path.join(self.root, path.lstrip("/"))
-        return await super().listdir(full_path)
-
-
-class MySSHServer(asyncssh.SSHServer):
-    """Custom SSH server to handle authentication"""
-
-    def connection_made(self, conn):
-        print(f"New connection from {conn.get_extra_info('peername')}")
-
-    def connection_lost(self, exc):
-        print("Client disconnected")
-
-    def begin_auth(self, username):
-        return True  # No additional authentication steps
-
-    def password_auth_supported(self):
-        return True  # Support password authentication
-
-    def validate_password(self, username, password):
-        print(username, password)
-
-        return True
-        return username == USERNAME and password == PASSWORD
-
-
-async def start_sftp_server():
-    os.makedirs(SFTP_ROOT, exist_ok=True)  # Ensure the root directory exists
-
-    await asyncssh.create_server(
-        lambda: MySSHServer(),
-        host=HOST,
-        port=PORT,
-        server_host_keys=["ssh_host_key"],
-        process_factory=MySFTPServer,
-    )
-    print(f"SFTP server running on {HOST}:{PORT}")
-    await asyncio.Future()  # Keep running forever
-
-
-if __name__ == "__main__":
-    try:
-        asyncio.run(start_sftp_server())
-    except (OSError, asyncssh.Error) as e:
-        print(f"Error starting SFTP server: {e}")

src/snekssh/app2.py

@@ -1,77 +0,0 @@
-import asyncio
-import os
-
-import asyncssh
-
-# SSH Server Configuration
-HOST = "0.0.0.0"
-PORT = 2225
-USERNAME = "user"
-PASSWORD = "password"
-SHELL = "/bin/sh"  # Change to another shell if needed
-
-
-class CustomSSHServer(asyncssh.SSHServer):
-    def connection_made(self, conn):
-        print(f"New connection from {conn.get_extra_info('peername')}")
-
-    def connection_lost(self, exc):
-        print("Client disconnected")
-
-    def password_auth_supported(self):
-        return True
-
-    def validate_password(self, username, password):
-        return username == USERNAME and password == PASSWORD
-
-
-async def custom_bash_process(process):
-    """Spawns a custom bash shell process"""
-    env = os.environ.copy()
-    env["TERM"] = "xterm-256color"
-
-    # Start the Bash shell
-    bash_proc = await asyncio.create_subprocess_exec(
-        SHELL,
-        "-i",
-        stdin=asyncio.subprocess.PIPE,
-        stdout=asyncio.subprocess.PIPE,
-        stderr=asyncio.subprocess.PIPE,
-        env=env,
-    )
-
-    async def read_output():
-        while True:
-            data = await bash_proc.stdout.read(1)
-            if not data:
-                break
-            process.stdout.write(data)
-
-    async def read_input():
-        while True:
-            data = await process.stdin.read(1)
-            if not data:
-                break
-            bash_proc.stdin.write(data)
-
-    await asyncio.gather(read_output(), read_input())
-
-
-async def start_ssh_server():
-    """Starts the AsyncSSH server with Bash"""
-    await asyncssh.create_server(
-        lambda: CustomSSHServer(),
-        host=HOST,
-        port=PORT,
-        server_host_keys=["ssh_host_key"],
-        process_factory=custom_bash_process,
-    )
-    print(f"SSH server running on {HOST}:{PORT}")
-    await asyncio.Future()  # Keep running
-
-
-if __name__ == "__main__":
-    try:
-        asyncio.run(start_ssh_server())
-    except (OSError, asyncssh.Error) as e:
-        print(f"Error starting SSH server: {e}")

src/snekssh/app3.py

@@ -1,74 +0,0 @@
-#!/usr/bin/env python3.7
-#
-# Copyright (c) 2013-2024 by Ron Frederick <ronf@timeheart.net> and others.
-#
-# This program and the accompanying materials are made available under
-# the terms of the Eclipse Public License v2.0 which accompanies this
-# distribution and is available at:
-#
-#     http://www.eclipse.org/legal/epl-2.0/
-#
-# This program may also be made available under the following secondary
-# licenses when the conditions for such availability set forth in the
-# Eclipse Public License v2.0 are satisfied:
-#
-#    GNU General Public License, Version 2.0, or any later versions of
-#    that license
-#
-# SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-or-later
-#
-# Contributors:
-#     Ron Frederick - initial implementation, API, and documentation
-
-# To run this program, the file ``ssh_host_key`` must exist with an SSH
-# private key in it to use as a server host key. An SSH host certificate
-# can optionally be provided in the file ``ssh_host_key-cert.pub``.
-#
-# The file ``ssh_user_ca`` must exist with a cert-authority entry of
-# the certificate authority which can sign valid client certificates.
-
-import asyncio
-import sys
-
-import asyncssh
-
-
-async def handle_client(process: asyncssh.SSHServerProcess) -> None:
-
-    width, height, pixwidth, pixheight = process.term_size
-
-    process.stdout.write(
-        f"Terminal type: {process.term_type}, " f"size: {width}x{height}"
-    )
-    if pixwidth and pixheight:
-        process.stdout.write(f" ({pixwidth}x{pixheight} pixels)")
-    process.stdout.write("\nTry resizing your window!\n")
-
-    while not process.stdin.at_eof():
-        try:
-            await process.stdin.read()
-        except asyncssh.TerminalSizeChanged as exc:
-            process.stdout.write(f"New window size: {exc.width}x{exc.height}")
-            if exc.pixwidth and exc.pixheight:
-                process.stdout.write(f" ({exc.pixwidth}" f"x{exc.pixheight} pixels)")
-            process.stdout.write("\n")
-
-
-async def start_server() -> None:
-    await asyncssh.listen(
-        "",
-        2230,
-        server_host_keys=["ssh_host_key"],
-        # authorized_client_keys='ssh_user_ca',
-        process_factory=handle_client,
-    )
-
-
-loop = asyncio.new_event_loop()
-
-try:
-    loop.run_until_complete(start_server())
-except (OSError, asyncssh.Error) as exc:
-    sys.exit("Error starting server: " + str(exc))
-
-loop.run_forever()

src/snekssh/app4.py

@@ -1,90 +0,0 @@
-#!/usr/bin/env python3.7
-#
-# Copyright (c) 2013-2024 by Ron Frederick <ronf@timeheart.net> and others.
-#
-# This program and the accompanying materials are made available under
-# the terms of the Eclipse Public License v2.0 which accompanies this
-# distribution and is available at:
-#
-#     http://www.eclipse.org/legal/epl-2.0/
-#
-# This program may also be made available under the following secondary
-# licenses when the conditions for such availability set forth in the
-# Eclipse Public License v2.0 are satisfied:
-#
-#    GNU General Public License, Version 2.0, or any later versions of
-#    that license
-#
-# SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-or-later
-#
-# Contributors:
-#     Ron Frederick - initial implementation, API, and documentation
-
-# To run this program, the file ``ssh_host_key`` must exist with an SSH
-# private key in it to use as a server host key. An SSH host certificate
-# can optionally be provided in the file ``ssh_host_key-cert.pub``.
-
-import asyncio
-import sys
-from typing import Optional
-
-import asyncssh
-import bcrypt
-
-passwords = {
-    "guest": b"",  # guest account with no password
-    "user": bcrypt.hashpw(b"user", bcrypt.gensalt()),
-}
-
-
-def handle_client(process: asyncssh.SSHServerProcess) -> None:
-    username = process.get_extra_info("username")
-    process.stdout.write(f"Welcome to my SSH server, {username}!\n")
-    # process.exit(0)
-
-
-class MySSHServer(asyncssh.SSHServer):
-    def connection_made(self, conn: asyncssh.SSHServerConnection) -> None:
-        peername = conn.get_extra_info("peername")[0]
-        print(f"SSH connection received from {peername}.")
-
-    def connection_lost(self, exc: Optional[Exception]) -> None:
-        if exc:
-            print("SSH connection error: " + str(exc), file=sys.stderr)
-        else:
-            print("SSH connection closed.")
-
-    def begin_auth(self, username: str) -> bool:
-        # If the user's password is the empty string, no auth is required
-        return passwords.get(username) != b""
-
-    def password_auth_supported(self) -> bool:
-        return True
-
-    def validate_password(self, username: str, password: str) -> bool:
-        if username not in passwords:
-            return False
-        pw = passwords[username]
-        if not password and not pw:
-            return True
-        return bcrypt.checkpw(password.encode("utf-8"), pw)
-
-
-async def start_server() -> None:
-    await asyncssh.create_server(
-        MySSHServer,
-        "",
-        2231,
-        server_host_keys=["ssh_host_key"],
-        process_factory=handle_client,
-    )
-
-
-loop = asyncio.new_event_loop()
-
-try:
-    loop.run_until_complete(start_server())
-except (OSError, asyncssh.Error) as exc:
-    sys.exit("Error starting server: " + str(exc))
-
-loop.run_forever()

src/snekssh/app5.py

@@ -1,112 +0,0 @@
-#!/usr/bin/env python3.7
-#
-# Copyright (c) 2016-2024 by Ron Frederick <ronf@timeheart.net> and others.
-#
-# This program and the accompanying materials are made available under
-# the terms of the Eclipse Public License v2.0 which accompanies this
-# distribution and is available at:
-#
-#     http://www.eclipse.org/legal/epl-2.0/
-#
-# This program may also be made available under the following secondary
-# licenses when the conditions for such availability set forth in the
-# Eclipse Public License v2.0 are satisfied:
-#
-#    GNU General Public License, Version 2.0, or any later versions of
-#    that license
-#
-# SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-or-later
-#
-# Contributors:
-#     Ron Frederick - initial implementation, API, and documentation
-
-# To run this program, the file ``ssh_host_key`` must exist with an SSH
-# private key in it to use as a server host key. An SSH host certificate
-# can optionally be provided in the file ``ssh_host_key-cert.pub``.
-#
-# The file ``ssh_user_ca`` must exist with a cert-authority entry of
-# the certificate authority which can sign valid client certificates.
-
-import asyncio
-import sys
-from typing import List, cast
-
-import asyncssh
-
-
-class ChatClient:
-    _clients: List["ChatClient"] = []
-
-    def __init__(self, process: asyncssh.SSHServerProcess):
-        self._process = process
-
-    @classmethod
-    async def handle_client(cls, process: asyncssh.SSHServerProcess):
-        await cls(process).run()
-
-    async def readline(self) -> str:
-        return cast(str, self._process.stdin.readline())
-
-    def write(self, msg: str) -> None:
-        self._process.stdout.write(msg)
-
-    def broadcast(self, msg: str) -> None:
-        for client in self._clients:
-            if client != self:
-                client.write(msg)
-
-    def begin_auth(self, username: str) -> bool:
-        # If the user's password is the empty string, no auth is required
-        # return False
-        return True  # passwords.get(username) != b''
-
-    def password_auth_supported(self) -> bool:
-        return True
-
-    def validate_password(self, username: str, password: str) -> bool:
-        # if username not in passwords:
-        #    return False
-        # pw = passwords[username]
-        # if not password and not pw:
-        #    return True
-        return True
-        # return bcrypt.checkpw(password.encode('utf-8'), pw)
-
-    async def run(self) -> None:
-        self.write("Welcome to chat!\n\n")
-
-        self.write("Enter your name: ")
-        name = (await self.readline()).rstrip("\n")
-
-        self.write(f"\n{len(self._clients)} other users are connected.\n\n")
-
-        self._clients.append(self)
-        self.broadcast(f"*** {name} has entered chat ***\n")
-
-        try:
-            async for line in self._process.stdin:
-                self.broadcast(f"{name}: {line}")
-        except asyncssh.BreakReceived:
-            pass
-
-        self.broadcast(f"*** {name} has left chat ***\n")
-        self._clients.remove(self)
-
-
-async def start_server() -> None:
-    await asyncssh.listen(
-        "",
-        2235,
-        server_host_keys=["ssh_host_key"],
-        process_factory=ChatClient.handle_client,
-    )
-
-
-loop = asyncio.new_event_loop()
-
-try:
-    loop.run_until_complete(start_server())
-except (OSError, asyncssh.Error) as exc:
-    sys.exit("Error starting server: " + str(exc))
-
-loop.run_forever()