diff --git a/ts/index.ts b/ts/index.ts
index 15a5b2d..201994c 100644
--- a/ts/index.ts
+++ b/ts/index.ts
@@ -1,17 +1,9 @@
 import {Adapter} from "./adapter";
 import {Message, Attachment} from "./message"
+import util from "./util"
 
-function _(key: string, value: any | null | undefined = undefined): any | null {
-  const x = <any>window;
-  if (value !== undefined) {
-    x[key] = value;
-  }
-  return x[key];
-}
-
-function $(id: string): HTMLElement | null {
-  return document.getElementById(id);
-}
+var $ = util.$
+var _ = util._
 
 function main():void  {
   const settings = _("settings", JSON.parse(localStorage.getItem("settings") ?? "{}"));
@@ -179,24 +171,12 @@ function saveAdapter(): void {
       break;
   }
   const settings = _("settings");
-  let adapters = _("adapters");
   if (settings) {
     if (!settings.adapters) {
       settings.adapters = [];
     }
     settings.adapters.push(self);
-    if (!adapters) {
-      adapters = []
-    }
-    let a: Adapter = Adapter.create();
-    switch (self.protocol) {
-      case "nostr":
-        adapters.push(Adapter.toNostr(a, self));
-        break;
-      case "mastodon":
-        adapters.push(Adapter.toMasto(a, self));
-        break;
-    }
+    
     localStorage.setItem("settings", JSON.stringify(settings));
     showSettings();
   }
@@ -217,7 +197,6 @@ async function authorizedFetch(method: string, uri: string, body: any): Promise<
 
 function connect() {
 
-    // open the websocket connection with settings as subprotocol
     const wsProto = location.protocol == "https:" ? "wss" : "ws";
     _conn = new WebSocket(`${wsProto}://${location.host}/subscribe`, "underbbs");
     _conn.addEventListener("open", (e: any) => {
@@ -226,11 +205,22 @@ function connect() {
     });
     _conn.addEventListener("message", (e: any) => {
     
+      // debugging
       console.log(e)
+      
+      // now we'll figure out what to do with it
       const data = JSON.parse(e.data);
       if (data.key) {
         _("skey", data.key)
         authorizedFetch("POST", "/api/adapters", JSON.stringify(_("settings").adapters))
+      } else {
+        // typeswitch on the incoming data and adapters
+        
+        // if it's a regular message, add it to the store
+        // if the adapter is active, inject the web components
+        // FOR HOTFETCHED DATA:
+        // before fetching, we can set properties on the DOM, 
+        // so when those data return to us we know where to inject components!
       }
     });
     _conn.addEventListener("error", (e: any) => {
diff --git a/ts/message-element.ts b/ts/message-element.ts
new file mode 100644
index 0000000..acc7bab
--- /dev/null
+++ b/ts/message-element.ts
@@ -0,0 +1,20 @@
+import util from "./util"
+var _ = util._
+
+export class MessageElement extends HTMLElement {
+  static observedAttributes = [ "data-id", "data-adapter", "data-replyCt", "data-reactionCt", "data-boostCt" ]
+  
+  private _id: string | null = null;
+  private _adapter: any;
+  
+  constructor() {
+    super();
+  }
+  
+  connectedCallback() {
+    this._id = this.getAttribute("data-id");
+    this._adapter = _("settings").adapters.filter((a: any)=>a.nickname == this.getAttribute("data-adapter"))[0];
+    
+    // grab message content from the store and format our innerHTML
+  }
+}
\ No newline at end of file
diff --git a/ts/util.ts b/ts/util.ts
new file mode 100644
index 0000000..cdb0818
--- /dev/null
+++ b/ts/util.ts
@@ -0,0 +1,14 @@
+
+function _(key: string, value: any | null | undefined = undefined): any | null {
+  const x = <any>window;
+  if (value !== undefined) {
+    x[key] = value;
+  }
+  return x[key];
+}
+
+function $(id: string): HTMLElement | null {
+  return document.getElementById(id);
+}
+
+export default { _, $ }
\ No newline at end of file