Merge branch 'main' of https://github.com/Dhravya/supermemory into new-uinew-ui

13 files changed, 157 insertions, 1321 deletions

diff --git a/apps/extension/src/App.tsx b/apps/extension/src/App.tsx
index 551fb0d0..f563664f 100644
--- a/apps/extension/src/App.tsx
+++ b/apps/extension/src/App.tsx
@@ -1,9 +1,12 @@
-import { useEffect, useState } from 'react';
-import { z } from 'zod';
-import { userObj } from './types/zods';
-import { getEnv } from './util';
+import { useEffect, useState } from "react";
+import { z } from "zod";
+import { userObj } from "./types/zods";
+import { getEnv } from "./util";
 
-const backendUrl = getEnv() === "development" ? "http://localhost:3000" : "https://supermemory.dhr.wtf";
+const backendUrl =
+  getEnv() === "development"
+    ? "http://localhost:3000"
+    : "https://supermemory.dhr.wtf";
 
 function App() {
   const [userData, setUserData] = useState<z.infer<typeof userObj> | null>(
@@ -11,9 +14,9 @@ function App() {
   );
 
   const doStuff = () => {
-    chrome.runtime.sendMessage({ type: 'getJwt' }, (response) => {
+    chrome.runtime.sendMessage({ type: "getJwt" }, (response) => {
       const jwt = response.jwt;
-      const loginButton = document.getElementById('login');
+      const loginButton = document.getElementById("login");
 
       if (loginButton) {
         if (jwt) {
@@ -31,7 +34,7 @@ function App() {
                 console.error(d.error);
               }
             });
-          loginButton.style.display = 'none';
+          loginButton.style.display = "none";
         }
       }
     });
diff --git a/apps/extension/src/SideBar.tsx b/apps/extension/src/SideBar.tsx
index 96b1dd4c..07d9b9f5 100644
--- a/apps/extension/src/SideBar.tsx
+++ b/apps/extension/src/SideBar.tsx
@@ -1,215 +1,64 @@
-import { useEffect, useState } from 'react';
-import { motion } from 'framer-motion';
-import './dist.css';
-import { Input } from './components/ui/input';
-import { Button } from './components/ui/button';
+import { useState } from "react";
+
+import "./ext.css";
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from './components/ui/tooltip';
+} from "./components/ui/tooltip";
 
 function sendUrlToAPI() {
   // get the current URL
   const url = window.location.href;
 
-  const blacklist = ['localhost:3000', 'anycontext.dhr.wtf'];
+  const blacklist = ["localhost:3000", "anycontext.dhr.wtf"];
   // check if the URL is blacklisted
   if (blacklist.some((blacklisted) => url.includes(blacklisted))) {
-    console.log('URL is blacklisted');
+    console.log("URL is blacklisted");
     return;
   } else {
     // const content = Entire page content, but cleaned up for the LLM. No ads, no scripts, no styles, just the text. if article, just the importnat info abou tit.
     const content = document.documentElement.innerText;
-    chrome.runtime.sendMessage({ type: 'urlChange', content, url });
+    chrome.runtime.sendMessage({ type: "urlChange", content, url });
   }
 }
 
-function SideBar({ jwt }: { jwt: string }) {
-  const [isOpen, setIsOpen] = useState(false);
-  const [input, setInput] = useState('');
+function SideBar() {
   const [savedWebsites, setSavedWebsites] = useState<string[]>([]);
 
   const [isSendingData, setIsSendingData] = useState(false);
 
-  const [toBeParsed, setToBeParsed] = useState('');
-  const [aiResponse, setAIResponse] = useState<string>('');
-  const [lastQuestion, setLastQuestion] = useState<string>('');
-
-  const handleStreamData = (newChunk: string) => {
-    // Append the new chunk to the existing data to be parsed
-    setToBeParsed((prev) => prev + newChunk);
-  };
-
-  const queryApi = async () => {
-    const content = document.documentElement.innerText;
-
-    setAIResponse('');
-
-    const query = `Answer this question based on this query: ${input}\n\n${content}`;
-
-    chrome.runtime.sendMessage({ type: 'queryApi', input: query, jwt });
-  };
-
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-
-    chrome.runtime.onMessage.addListener((message) => {
-      if (message.action === 'streamData') {
-        console.log(message.data);
-        handleStreamData(message.data);
-      } else if (message.action === 'streamEnd') {
-        setLastQuestion(input);
-        setInput('');
-        setToBeParsed('');
-      }
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  useEffect(() => {
-    // Define a function to try parsing the accumulated data
-    const tryParseAccumulatedData = () => {
-      // Attempt to parse the "toBeParsed" state as JSON
-      try {
-        // Split the accumulated data by the known delimiter "\n\n"
-        const parts = toBeParsed.split('\n\n');
-        let remainingData = '';
-
-        // Process each part to extract JSON objects
-        parts.forEach((part, index) => {
-          if (part.startsWith('data: [DONE]data: ')) {
-            part = part.replace('data: [DONE]data: ', 'data: ');
-          }
-          try {
-            const parsedPart = JSON.parse(part.replace('data: ', '')); // Try to parse the part as JSON
-
-            // If the part is the last one and couldn't be parsed, keep it to  accumulate more data
-            if (index === parts.length - 1 && !parsedPart) {
-              remainingData = part;
-            } else if (parsedPart && parsedPart.response) {
-              // If the part is parsable and has the "response" field, update the AI response state
-              setAIResponse((prev) => prev + parsedPart.response);
-            }
-          } catch (error) {
-            // If parsing fails and it's not the last part, it's a malformed JSON
-            if (index !== parts.length - 1) {
-              console.error('Malformed JSON part: ', part);
-            } else {
-              // If it's the last part, it may be incomplete, so keep it
-              remainingData = part;
-            }
-          }
-        });
-
-        // Update the toBeParsed state to only contain the unparsed remainder
-        if (remainingData !== toBeParsed) {
-          setToBeParsed(remainingData);
-        }
-      } catch (error) {
-        console.error('Error parsing accumulated data: ', error);
-      }
-    };
-
-    // Call the parsing function if there's data to be parsed
-    if (toBeParsed) {
-      tryParseAccumulatedData();
-    }
-  }, [toBeParsed]);
-
   return (
     <>
       <TooltipProvider>
-        {isOpen && (
-          <div
-            onClick={() => setIsOpen(false)}
-            className="anycontext-overlay"
-          ></div>
-        )}
-
-        {isOpen ? (
-          <motion.div
-            initial={{ x: '100%' }}
-            animate={{ x: 0 }}
-            exit={{ x: '100%' }}
-            transition={{ duration: 0.3 }}
-            className="anycontext-sidebar anycontext-relative"
-          >
-            <div className="anycontext-sidebar-content anycontext-text-black anycontext-px-4 anycontext-relative">
-              <h1 className="anycontext-header anycontext-font-sans">
-                Ask a question to this page
-              </h1>
-
-              {/* Three buttons as options to choose from */}
-              {!input && (
-                <div className="anycontext-flex anycontext-flex-col anycontext-gap-4 anycontext-mt-8 anycontext-px-4">
-                  <Button
-                    onClick={async () => {
-                      setInput('Summarise the content of this web page');
-                      await queryApi();
-                    }}
-                    className="anycontext-w-full"
-                  >
-                    Summarize content
-                  </Button>
-                  <Button
-                    onClick={async () => {
-                      setInput(
-                        'Whats the most important points of this page? Answer in points.',
-                      );
-                      await queryApi();
-                    }}
-                    className="anycontext-w-full"
-                  >
-                    What's the most important?
-                  </Button>
-                  <Button
-                    onClick={() => {
-                      setIsOpen(false);
-                      sendUrlToAPI();
-                      setIsSendingData(true);
-                      setTimeout(() => {
-                        setIsSendingData(false);
-                        setSavedWebsites([
-                          ...savedWebsites,
-                          window.location.href,
-                        ]);
-                      }, 1000);
-                    }}
-                    className="anycontext-w-full anycontext-bg-gradient-to-tr anycontext-from-purple-400 anycontext-to-purple-600"
-                  >
-                    Save to memory
-                  </Button>
-                </div>
-              )}
-
-              {lastQuestion && (
-                <div className="anycontext-mb-4">
-                  <h2 className="anycontext-text-lg anycontext-font-semibold">
-                    {lastQuestion}
-                  </h2>
-                </div>
-              )}
-              <div className="anycontext-px-4 anycontext-max-h-[75vh] anycontext-overflow-y-auto anycontext-mt-8">
-                {aiResponse.replace('</s>', '')}
-              </div>
-
-              <form
-                onSubmit={async (e) => {
-                  e.preventDefault();
-                  await queryApi();
-                  setInput('');
+        <div className="anycontext-flex anycontext-flex-col anycontext-gap-2 anycontext-fixed anycontext-bottom-12 anycontext-right-0 anycontext-z-[99999] anycontext-font-sans">
+          {/* <Tooltip delayDuration={300}>
+            <TooltipContent side="left">
+              <p>Open Sidebar</p>
+            </TooltipContent>
+          </Tooltip> */}
+
+          <Tooltip delayDuration={300}>
+            <TooltipTrigger
+              className="anycontext-bg-transparent
+              anycontext-border-none anycontext-m-0 anycontext-p-0
+            "
+            >
+              <button
+                onClick={() => {
+                  sendUrlToAPI();
+                  setIsSendingData(true);
+                  setTimeout(() => {
+                    setIsSendingData(false);
+                    setSavedWebsites([...savedWebsites, window.location.href]);
+                  }, 1000);
                 }}
-                className="anycontext-flex anycontext-absolute anycontext-bottom-0 anycontext-w-full anycontext-gap-4 anycontext-justify-between anycontext-px-4"
+                disabled={savedWebsites.includes(window.location.href)}
+                className="anycontext-open-button disabled:anycontext-opacity-30 anycontext-bg-transparent
+                anycontext-border-none anycontext-m-0 anycontext-p-0"
               >
-                <Input
-                  value={input}
-                  onChange={(e) => setInput(e.target.value)}
-                  placeholder="Ask anything about this website"
-                  className="anycontext-mb-4 anycontext-text-black anycontext-outline"
-                />
-                <Button onClick={async () => queryApi()}>
+                {savedWebsites.includes(window.location.href) ? (
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     width="24"
@@ -220,102 +69,33 @@ function SideBar({ jwt }: { jwt: string }) {
                     strokeWidth="2"
                     strokeLinecap="round"
                     strokeLinejoin="round"
-                    className="lucide lucide-send-horizontal"
+                    className="lucide lucide-file-check-2"
                   >
-                    <path d="m3 3 3 9-3 9 19-9Z" />
-                    <path d="M6 12h16" />
+                    <path d="M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4" />
+                    <path d="M14 2v4a2 2 0 0 0 2 2h4" />
+                    <path d="m3 15 2 2 4-4" />
                   </svg>
-                </Button>
-              </form>
-            </div>
-          </motion.div>
-        ) : (
-          <div className="anycontext-flex anycontext-flex-col anycontext-gap-2 anycontext-fixed anycontext-bottom-12 anycontext-right-0 anycontext-z-[99999]">
-            <Tooltip delayDuration={300}>
-              <TooltipTrigger>
-                <button
-                  onClick={() => setIsOpen(true)}
-                  className="anycontext-open-button"
-                >
+                ) : (
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
-                    width="24"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    className="lucide lucide-panel-right-open"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    className={`anycontext-w-5 anycontext-h-5 ${isSendingData ? "anycontext-animate-spin" : ""}`}
                   >
-                    <rect width="18" height="18" x="3" y="3" rx="2" />
-                    <path d="M15 3v18" />
-                    <path d="m10 15-3-3 3-3" />
+                    <path d="M15.98 1.804a1 1 0 0 0-1.96 0l-.24 1.192a1 1 0 0 1-.784.785l-1.192.238a1 1 0 0 0 0 1.962l1.192.238a1 1 0 0 1 .785.785l.238 1.192a1 1 0 0 0 1.962 0l.238-1.192a1 1 0 0 1 .785-.785l1.192-.238a1 1 0 0 0 0-1.962l-1.192-.238a1 1 0 0 1-.785-.785l-.238-1.192ZM6.949 5.684a1 1 0 0 0-1.898 0l-.683 2.051a1 1 0 0 1-.633.633l-2.051.683a1 1 0 0 0 0 1.898l2.051.684a1 1 0 0 1 .633.632l.683 2.051a1 1 0 0 0 1.898 0l.683-2.051a1 1 0 0 1 .633-.633l2.051-.683a1 1 0 0 0 0-1.898l-2.051-.683a1 1 0 0 1-.633-.633L6.95 5.684ZM13.949 13.684a1 1 0 0 0-1.898 0l-.184.551a1 1 0 0 1-.632.633l-.551.183a1 1 0 0 0 0 1.898l.551.183a1 1 0 0 1 .633.633l.183.551a1 1 0 0 0 1.898 0l.184-.551a1 1 0 0 1 .632-.633l.551-.183a1 1 0 0 0 0-1.898l-.551-.184a1 1 0 0 1-.633-.632l-.183-.551Z" />
                   </svg>
-                </button>
-              </TooltipTrigger>
-              <TooltipContent side="left">
-                <p>Open Sidebar</p>
-              </TooltipContent>
-            </Tooltip>
-
-            <Tooltip delayDuration={300}>
-              <TooltipTrigger>
-                <button
-                  onClick={() => {
-                    sendUrlToAPI();
-                    setIsSendingData(true);
-                    setTimeout(() => {
-                      setIsSendingData(false);
-                      setSavedWebsites([
-                        ...savedWebsites,
-                        window.location.href,
-                      ]);
-                    }, 1000);
-                  }}
-                  disabled={savedWebsites.includes(window.location.href)}
-                  className="anycontext-open-button disabled:anycontext-opacity-30"
-                >
-                  {savedWebsites.includes(window.location.href) ? (
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="24"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      className="lucide lucide-file-check-2"
-                    >
-                      <path d="M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4" />
-                      <path d="M14 2v4a2 2 0 0 0 2 2h4" />
-                      <path d="m3 15 2 2 4-4" />
-                    </svg>
-                  ) : (
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 20 20"
-                      fill="currentColor"
-                      className={`anycontext-w-5 anycontext-h-5 ${isSendingData ? 'anycontext-animate-spin' : ''}`}
-                    >
-                      <path d="M15.98 1.804a1 1 0 0 0-1.96 0l-.24 1.192a1 1 0 0 1-.784.785l-1.192.238a1 1 0 0 0 0 1.962l1.192.238a1 1 0 0 1 .785.785l.238 1.192a1 1 0 0 0 1.962 0l.238-1.192a1 1 0 0 1 .785-.785l1.192-.238a1 1 0 0 0 0-1.962l-1.192-.238a1 1 0 0 1-.785-.785l-.238-1.192ZM6.949 5.684a1 1 0 0 0-1.898 0l-.683 2.051a1 1 0 0 1-.633.633l-2.051.683a1 1 0 0 0 0 1.898l2.051.684a1 1 0 0 1 .633.632l.683 2.051a1 1 0 0 0 1.898 0l.683-2.051a1 1 0 0 1 .633-.633l2.051-.683a1 1 0 0 0 0-1.898l-2.051-.683a1 1 0 0 1-.633-.633L6.95 5.684ZM13.949 13.684a1 1 0 0 0-1.898 0l-.184.551a1 1 0 0 1-.632.633l-.551.183a1 1 0 0 0 0 1.898l.551.183a1 1 0 0 1 .633.633l.183.551a1 1 0 0 0 1.898 0l.184-.551a1 1 0 0 1 .632-.633l.551-.183a1 1 0 0 0 0-1.898l-.551-.184a1 1 0 0 1-.633-.632l-.183-.551Z" />
-                    </svg>
-                  )}
-                </button>
-              </TooltipTrigger>
-              <TooltipContent side="left">
-                <p>
-                  {savedWebsites.includes(window.location.href)
-                    ? 'Added to memory'
-                    : 'Add to memory'}
-                </p>
-              </TooltipContent>
-            </Tooltip>
-          </div>
-        )}
+                )}
+              </button>
+            </TooltipTrigger>
+            <TooltipContent className="anycontext-p-0" side="left">
+              <p className="anycontext-p-0 anycontext-m-0">
+                {savedWebsites.includes(window.location.href)
+                  ? "Added to memory"
+                  : "Add to memory"}
+              </p>
+            </TooltipContent>
+          </Tooltip>
+        </div>
       </TooltipProvider>
     </>
   );
diff --git a/apps/extension/src/background.ts b/apps/extension/src/background.ts
index 137849b8..2cf29f40 100644
--- a/apps/extension/src/background.ts
+++ b/apps/extension/src/background.ts
@@ -1,6 +1,9 @@
 import { getEnv } from "./util";
 
-const backendUrl = getEnv() === "development" ? "http://localhost:3000" : "https://supermemory.dhr.wtf";
+const backendUrl =
+  getEnv() === "development"
+    ? "http://localhost:3000"
+    : "https://supermemory.dhr.wtf";
 
 chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
   if (request.type === "getJwt") {
@@ -9,9 +12,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     });
 
     return true;
-  }
-
-  else if (request.type === "urlChange") {
+  } else if (request.type === "urlChange") {
     const content = request.content;
     const url = request.url;
 
@@ -24,15 +25,13 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
         fetch(`${backendUrl}/api/store`, {
           method: "POST",
           headers: {
-            "Authorization": `Bearer ${jwt}`,
+            Authorization: `Bearer ${jwt}`,
           },
           body: JSON.stringify({ pageContent: content, url }),
-        }).then(ers => console.log(ers.status))
+        }).then((ers) => console.log(ers.status));
       });
     })();
-  }
-
-  else if (request.type === "queryApi") {
+  } else if (request.type === "queryApi") {
     const input = request.input;
     const jwt = request.jwt;
 
@@ -40,12 +39,12 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
       await fetch(`${backendUrl}/api/ask`, {
         method: "POST",
         headers: {
-          "Authorization": `Bearer ${jwt}`,
+          Authorization: `Bearer ${jwt}`,
         },
         body: JSON.stringify({
           query: input,
         }),
-      }).then(async response => {
+      }).then(async (response) => {
         if (!response.body) {
           throw new Error("No response body");
         }
@@ -59,8 +58,13 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
           if (done) break;
           // For simplicity, we're sending chunks as they come.
           // This might need to be adapted based on your data and needs.
-          const chunkAsString = new TextDecoder('utf-8').decode(value).replace("data: ", "")
-          chrome.tabs.sendMessage(sender.tab.id, { action: "streamData", data: chunkAsString });
+          const chunkAsString = new TextDecoder("utf-8")
+            .decode(value)
+            .replace("data: ", "");
+          chrome.tabs.sendMessage(sender.tab.id, {
+            action: "streamData",
+            data: chunkAsString,
+          });
         }
         // Notify the content script that the stream is complete.
         chrome.tabs.sendMessage(sender.tab.id, { action: "streamEnd" });
diff --git a/apps/extension/src/components/ui/button.tsx b/apps/extension/src/components/ui/button.tsx
index cf7b4315..6ca7d07a 100644
--- a/apps/extension/src/components/ui/button.tsx
+++ b/apps/extension/src/components/ui/button.tsx
@@ -1,22 +1,24 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "../../lib/utils"
+import { cn } from "../../lib/utils";
 
 const buttonVariants = cva(
   "anycontext-inline-flex anycontext-items-center anycontext-justify-center anycontext-whitespace-nowrap anycontext-rounded-md anycontext-text-sm anycontext-font-medium anycontext-ring-offset-white anycontext-transition-colors focus-visible:anycontext-outline-none focus-visible:anycontext-ring-2 focus-visible:anycontext-ring-stone-950 focus-visible:anycontext-ring-offset-2 disabled:anycontext-pointer-events-none disabled:anycontext-opacity-50 dark:anycontext-ring-offset-stone-950 dark:focus-visible:anycontext-ring-stone-300",
   {
     variants: {
       variant: {
-        default: "anycontext-bg-stone-900 anycontext-text-stone-50 hover:anycontext-bg-stone-900/90 dark:anycontext-bg-stone-50 dark:anycontext-text-stone-900 dark:hover:anycontext-bg-stone-50/90",
+        default:
+          "anycontext-bg-stone-900 anycontext-text-stone-50 hover:anycontext-bg-stone-900/90 dark:anycontext-bg-stone-50 dark:anycontext-text-stone-900 dark:hover:anycontext-bg-stone-50/90",
         destructive:
           "anycontext-bg-red-500 anycontext-text-stone-50 hover:anycontext-bg-red-500/90 dark:anycontext-bg-red-900 dark:anycontext-text-stone-50 dark:hover:anycontext-bg-red-900/90",
         outline:
           "anycontext-border anycontext-border-stone-200 anycontext-bg-white hover:anycontext-bg-stone-100 hover:anycontext-text-stone-900 dark:anycontext-border-stone-800 dark:anycontext-bg-stone-950 dark:hover:anycontext-bg-stone-800 dark:hover:anycontext-text-stone-50",
         secondary:
           "anycontext-bg-stone-100 anycontext-text-stone-900 hover:anycontext-bg-stone-100/80 dark:anycontext-bg-stone-800 dark:anycontext-text-stone-50 dark:hover:anycontext-bg-stone-800/80",
-        ghost: "hover:anycontext-bg-stone-100 hover:anycontext-text-stone-900 dark:hover:anycontext-bg-stone-800 dark:hover:anycontext-text-stone-50",
+        ghost:
+          "hover:anycontext-bg-stone-100 hover:anycontext-text-stone-900 dark:hover:anycontext-bg-stone-800 dark:hover:anycontext-text-stone-50",
         link: "anycontext-text-stone-900 anycontext-underline-offset-4 hover:anycontext-underline dark:anycontext-text-stone-50",
       },
       size: {
@@ -30,27 +32,27 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
-)
+  },
+);
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+  asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+    const Comp = asChild ? Slot : "button";
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
       />
-    )
-  }
-)
-Button.displayName = "Button"
+    );
+  },
+);
+Button.displayName = "Button";
 
-export { Button, buttonVariants }
+export { Button };
diff --git a/apps/extension/src/components/ui/input.tsx b/apps/extension/src/components/ui/input.tsx
index e91bb0ca..4771795a 100644
--- a/apps/extension/src/components/ui/input.tsx
+++ b/apps/extension/src/components/ui/input.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "../../lib/utils"
+import { cn } from "../../lib/utils";
 
 export interface InputProps
   extends React.InputHTMLAttributes<HTMLInputElement> {}
@@ -12,14 +12,14 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         type={type}
         className={cn(
           "anycontext-flex anycontext-h-10 anycontext-w-full anycontext-rounded-md anycontext-border anycontext-border-stone-200 anycontext-bg-white anycontext-px-3 anycontext-py-2 anycontext-text-sm anycontext-ring-offset-white file:anycontext-border-0 file:anycontext-bg-transparent file:anycontext-text-sm file:anycontext-font-medium placeholder:anycontext-text-stone-500 focus-visible:anycontext-outline-none focus-visible:anycontext-ring-2 focus-visible:anycontext-ring-stone-950 focus-visible:anycontext-ring-offset-2 disabled:anycontext-cursor-not-allowed disabled:anycontext-opacity-50 dark:anycontext-border-stone-800 dark:anycontext-bg-stone-950 dark:anycontext-ring-offset-stone-950 dark:placeholder:anycontext-text-stone-400 dark:focus-visible:anycontext-ring-stone-300",
-          className
+          className,
         )}
         ref={ref}
         {...props}
       />
-    )
-  }
-)
-Input.displayName = "Input"
+    );
+  },
+);
+Input.displayName = "Input";
 
-export { Input }
+export { Input };
diff --git a/apps/extension/src/components/ui/tooltip.tsx b/apps/extension/src/components/ui/tooltip.tsx
index 364c7ada..12185db5 100644
--- a/apps/extension/src/components/ui/tooltip.tsx
+++ b/apps/extension/src/components/ui/tooltip.tsx
@@ -1,13 +1,13 @@
-import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
-import { cn } from "../../lib/utils"
+import { cn } from "../../lib/utils";
 
-const TooltipProvider = TooltipPrimitive.Provider
+const TooltipProvider = TooltipPrimitive.Provider;
 
-const Tooltip = TooltipPrimitive.Root
+const Tooltip = TooltipPrimitive.Root;
 
-const TooltipTrigger = TooltipPrimitive.Trigger
+const TooltipTrigger = TooltipPrimitive.Trigger;
 
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
@@ -18,11 +18,11 @@ const TooltipContent = React.forwardRef<
     sideOffset={sideOffset}
     className={cn(
       "anycontext-z-50 anycontext-overflow-hidden anycontext-rounded-md anycontext-border anycontext-border-stone-200 anycontext-bg-white anycontext-px-3 anycontext-py-1.5 anycontext-text-sm anycontext-text-stone-950 anycontext-shadow-md anycontext-animate-in anycontext-fade-in-0 anycontext-zoom-in-95 data-[state=closed]:anycontext-animate-out data-[state=closed]:anycontext-fade-out-0 data-[state=closed]:anycontext-zoom-out-95 data-[side=bottom]:anycontext-slide-in-from-top-2 data-[side=left]:anycontext-slide-in-from-right-2 data-[side=right]:anycontext-slide-in-from-left-2 data-[side=top]:anycontext-slide-in-from-bottom-2 dark:anycontext-border-stone-800 dark:anycontext-bg-stone-950 dark:anycontext-text-stone-50",
-      className
+      className,
     )}
     {...props}
   />
-))
-TooltipContent.displayName = TooltipPrimitive.Content.displayName
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/apps/extension/src/content.tsx b/apps/extension/src/content.tsx
index 1e92bf04..d9994dca 100644
--- a/apps/extension/src/content.tsx
+++ b/apps/extension/src/content.tsx
@@ -1,4 +1,4 @@
-window.addEventListener('message', (event) => {
+window.addEventListener("message", (event) => {
   if (event.source !== window) {
     return;
   }
@@ -7,13 +7,13 @@ window.addEventListener('message', (event) => {
   if (jwt) {
     if (
       !(
-        window.location.hostname === 'localhost' ||
-        window.location.hostname === 'anycontext.dhr.wtf' ||
-        window.location.hostname === 'supermemory.dhr.wtf'
+        window.location.hostname === "localhost" ||
+        window.location.hostname === "anycontext.dhr.wtf" ||
+        window.location.hostname === "supermemory.dhr.wtf"
       )
     ) {
       console.log(
-        'JWT is only allowed to be used on localhost or anycontext.dhr.wtf',
+        "JWT is only allowed to be used on localhost or anycontext.dhr.wtf",
       );
       return;
     }
@@ -22,24 +22,24 @@ window.addEventListener('message', (event) => {
   }
 });
 
-const appContainer = document.createElement('div');
-appContainer.id = 'anycontext-app-container';
+const appContainer = document.createElement("div");
+appContainer.id = "anycontext-app-container";
 
 // First in the body, above the content
 document.body.insertBefore(appContainer, document.body.firstChild);
 
-appContainer.style.zIndex = '9999';
+appContainer.style.zIndex = "9999";
 
-import ReactDOM from 'react-dom/client';
-import SideBar from './SideBar';
+import ReactDOM from "react-dom/client";
+import SideBar from "./SideBar";
 
 // get JWT from local storage
-const jwt = chrome.storage.local.get('jwt').then((data) => {
+const jwt = chrome.storage.local.get("jwt").then((data) => {
   return data.jwt;
 }) as Promise<string>;
 
-jwt.then((jwt) => {
+jwt.then(() => {
   ReactDOM.createRoot(
-    document.getElementById('anycontext-app-container')!,
-  ).render(<SideBar jwt={jwt} />);
+    document.getElementById("anycontext-app-container")!,
+  ).render(<SideBar />);
 });
diff --git a/apps/extension/src/dist.css b/apps/extension/src/dist.css
deleted file mode 100644
index 5fda8915..00000000
--- a/apps/extension/src/dist.css
+++ /dev/null
@@ -1,951 +0,0 @@
-*,
-::before,
-::after {
-  box-sizing: border-box;
-  /* 1 */
-
-  border-width: 0;
-  /* 2 */
-
-  border-style: solid;
-  /* 2 */
-
-  border-color: #e5e7eb;
-  /* 2 */
-}
-
-::before,
-::after {
-  --tw-content: '';
-}
-
-/*
-1. Use a consistent sensible line-height in all browsers.
-2. Prevent adjustments of font size after orientation changes in iOS.
-3. Use a more readable tab size.
-4. Use the user's configured `sans` font-family by default.
-5. Use the user's configured `sans` font-feature-settings by default.
-6. Use the user's configured `sans` font-variation-settings by default.
-7. Disable tap highlights on iOS
-*/
-
-/* Make elements with the HTML hidden attribute stay hidden by default */
-
-[hidden] {
-  display: none;
-}
-
-*,
-::before,
-::after {
-  --tw-border-spacing-x: 0;
-
-  --tw-border-spacing-y: 0;
-
-  --tw-translate-x: 0;
-
-  --tw-translate-y: 0;
-
-  --tw-rotate: 0;
-
-  --tw-skew-x: 0;
-
-  --tw-skew-y: 0;
-
-  --tw-scale-x: 1;
-
-  --tw-scale-y: 1;
-
-  --tw-pan-x: ;
-
-  --tw-pan-y: ;
-
-  --tw-pinch-zoom: ;
-
-  --tw-scroll-snap-strictness: proximity;
-
-  --tw-gradient-from-position: ;
-
-  --tw-gradient-via-position: ;
-
-  --tw-gradient-to-position: ;
-
-  --tw-ordinal: ;
-
-  --tw-slashed-zero: ;
-
-  --tw-numeric-figure: ;
-
-  --tw-numeric-spacing: ;
-
-  --tw-numeric-fraction: ;
-
-  --tw-ring-inset: ;
-
-  --tw-ring-offset-width: 0px;
-
-  --tw-ring-offset-color: #fff;
-
-  --tw-ring-color: rgb(59 130 246 / 0.5);
-
-  --tw-ring-offset-shadow: 0 0 #0000;
-
-  --tw-ring-shadow: 0 0 #0000;
-
-  --tw-shadow: 0 0 #0000;
-
-  --tw-shadow-colored: 0 0 #0000;
-
-  --tw-blur: ;
-
-  --tw-brightness: ;
-
-  --tw-contrast: ;
-
-  --tw-grayscale: ;
-
-  --tw-hue-rotate: ;
-
-  --tw-invert: ;
-
-  --tw-saturate: ;
-
-  --tw-sepia: ;
-
-  --tw-drop-shadow: ;
-
-  --tw-backdrop-blur: ;
-
-  --tw-backdrop-brightness: ;
-
-  --tw-backdrop-contrast: ;
-
-  --tw-backdrop-grayscale: ;
-
-  --tw-backdrop-hue-rotate: ;
-
-  --tw-backdrop-invert: ;
-
-  --tw-backdrop-opacity: ;
-
-  --tw-backdrop-saturate: ;
-
-  --tw-backdrop-sepia: ;
-}
-
-::backdrop {
-  --tw-border-spacing-x: 0;
-
-  --tw-border-spacing-y: 0;
-
-  --tw-translate-x: 0;
-
-  --tw-translate-y: 0;
-
-  --tw-rotate: 0;
-
-  --tw-skew-x: 0;
-
-  --tw-skew-y: 0;
-
-  --tw-scale-x: 1;
-
-  --tw-scale-y: 1;
-
-  --tw-pan-x: ;
-
-  --tw-pan-y: ;
-
-  --tw-pinch-zoom: ;
-
-  --tw-scroll-snap-strictness: proximity;
-
-  --tw-gradient-from-position: ;
-
-  --tw-gradient-via-position: ;
-
-  --tw-gradient-to-position: ;
-
-  --tw-ordinal: ;
-
-  --tw-slashed-zero: ;
-
-  --tw-numeric-figure: ;
-
-  --tw-numeric-spacing: ;
-
-  --tw-numeric-fraction: ;
-
-  --tw-ring-inset: ;
-
-  --tw-ring-offset-width: 0px;
-
-  --tw-ring-offset-color: #fff;
-
-  --tw-ring-color: rgb(59 130 246 / 0.5);
-
-  --tw-ring-offset-shadow: 0 0 #0000;
-
-  --tw-ring-shadow: 0 0 #0000;
-
-  --tw-shadow: 0 0 #0000;
-
-  --tw-shadow-colored: 0 0 #0000;
-
-  --tw-blur: ;
-
-  --tw-brightness: ;
-
-  --tw-contrast: ;
-
-  --tw-grayscale: ;
-
-  --tw-hue-rotate: ;
-
-  --tw-invert: ;
-
-  --tw-saturate: ;
-
-  --tw-sepia: ;
-
-  --tw-drop-shadow: ;
-
-  --tw-backdrop-blur: ;
-
-  --tw-backdrop-brightness: ;
-
-  --tw-backdrop-contrast: ;
-
-  --tw-backdrop-grayscale: ;
-
-  --tw-backdrop-hue-rotate: ;
-
-  --tw-backdrop-invert: ;
-
-  --tw-backdrop-opacity: ;
-
-  --tw-backdrop-saturate: ;
-
-  --tw-backdrop-sepia: ;
-}
-
-.anycontext-fixed {
-  position: fixed;
-}
-
-.anycontext-absolute {
-  position: absolute;
-}
-
-.anycontext-relative {
-  position: relative;
-}
-
-.anycontext-bottom-0 {
-  bottom: 0px;
-}
-
-.anycontext-bottom-12 {
-  bottom: 3rem;
-}
-
-.anycontext-right-0 {
-  right: 0px;
-}
-
-.anycontext-z-50 {
-  z-index: 50;
-}
-
-.anycontext-z-\[99999\] {
-  z-index: 99999;
-}
-
-.anycontext-mb-4 {
-  margin-bottom: 1rem;
-}
-
-.anycontext-mt-8 {
-  margin-top: 2rem;
-}
-
-.anycontext-flex {
-  display: flex;
-}
-
-.anycontext-inline-flex {
-  display: inline-flex;
-}
-
-.anycontext-h-10 {
-  height: 2.5rem;
-}
-
-.anycontext-h-11 {
-  height: 2.75rem;
-}
-
-.anycontext-h-5 {
-  height: 1.25rem;
-}
-
-.anycontext-h-9 {
-  height: 2.25rem;
-}
-
-.anycontext-max-h-\[75vh\] {
-  max-height: 75vh;
-}
-
-.anycontext-w-10 {
-  width: 2.5rem;
-}
-
-.anycontext-w-5 {
-  width: 1.25rem;
-}
-
-.anycontext-w-full {
-  width: 100%;
-}
-
-@keyframes anycontext-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.anycontext-animate-spin {
-  animation: anycontext-spin 1s linear infinite;
-}
-
-.anycontext-flex-col {
-  flex-direction: column;
-}
-
-.anycontext-items-center {
-  align-items: center;
-}
-
-.anycontext-justify-center {
-  justify-content: center;
-}
-
-.anycontext-justify-between {
-  justify-content: space-between;
-}
-
-.anycontext-gap-2 {
-  gap: 0.5rem;
-}
-
-.anycontext-gap-4 {
-  gap: 1rem;
-}
-
-.anycontext-overflow-hidden {
-  overflow: hidden;
-}
-
-.anycontext-overflow-y-auto {
-  overflow-y: auto;
-}
-
-.anycontext-whitespace-nowrap {
-  white-space: nowrap;
-}
-
-.anycontext-rounded-md {
-  border-radius: 0.375rem;
-}
-
-.anycontext-border {
-  border-width: 1px;
-}
-
-.anycontext-border-stone-200 {
-  --tw-border-opacity: 1;
-
-  border-color: rgb(231 229 228 / var(--tw-border-opacity));
-}
-
-.anycontext-bg-red-500 {
-  --tw-bg-opacity: 1;
-
-  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
-}
-
-.anycontext-bg-stone-100 {
-  --tw-bg-opacity: 1;
-
-  background-color: rgb(245 245 244 / var(--tw-bg-opacity));
-}
-
-.anycontext-bg-stone-900 {
-  --tw-bg-opacity: 1;
-
-  background-color: rgb(28 25 23 / var(--tw-bg-opacity));
-}
-
-.anycontext-bg-white {
-  --tw-bg-opacity: 1;
-
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-
-.anycontext-bg-gradient-to-tr {
-  background-image: linear-gradient(to top right, var(--tw-gradient-stops));
-}
-
-.anycontext-from-purple-400 {
-  --tw-gradient-from: #c084fc var(--tw-gradient-from-position);
-
-  --tw-gradient-to: rgb(192 132 252 / 0) var(--tw-gradient-to-position);
-
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
-.anycontext-to-purple-600 {
-  --tw-gradient-to: #9333ea var(--tw-gradient-to-position);
-}
-
-.anycontext-px-3 {
-  padding-left: 0.75rem;
-
-  padding-right: 0.75rem;
-}
-
-.anycontext-px-4 {
-  padding-left: 1rem;
-
-  padding-right: 1rem;
-}
-
-.anycontext-px-8 {
-  padding-left: 2rem;
-
-  padding-right: 2rem;
-}
-
-.anycontext-py-1 {
-  padding-top: 0.25rem;
-
-  padding-bottom: 0.25rem;
-}
-
-.anycontext-py-1\.5 {
-  padding-top: 0.375rem;
-
-  padding-bottom: 0.375rem;
-}
-
-.anycontext-py-2 {
-  padding-top: 0.5rem;
-
-  padding-bottom: 0.5rem;
-}
-
-.anycontext-font-sans {
-  font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
-    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-}
-
-.anycontext-text-sm {
-  font-size: 0.875rem;
-
-  line-height: 1.25rem;
-}
-
-.anycontext-text-lg {
-  font-size: 1.125rem;
-
-  line-height: 1.75rem;
-}
-
-.anycontext-font-medium {
-  font-weight: 500;
-}
-
-.anycontext-font-semibold {
-  font-weight: 600;
-}
-
-.anycontext-text-black {
-  --tw-text-opacity: 1;
-
-  color: rgb(0 0 0 / var(--tw-text-opacity));
-}
-
-.anycontext-text-stone-50 {
-  --tw-text-opacity: 1;
-
-  color: rgb(250 250 249 / var(--tw-text-opacity));
-}
-
-.anycontext-text-stone-900 {
-  --tw-text-opacity: 1;
-
-  color: rgb(28 25 23 / var(--tw-text-opacity));
-}
-
-.anycontext-text-stone-950 {
-  --tw-text-opacity: 1;
-
-  color: rgb(12 10 9 / var(--tw-text-opacity));
-}
-
-.anycontext-underline-offset-4 {
-  text-underline-offset: 4px;
-}
-
-.anycontext-shadow-md {
-  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
-    0 2px 4px -2px var(--tw-shadow-color);
-
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
-    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.anycontext-outline {
-  outline-style: solid;
-}
-
-.anycontext-ring-offset-white {
-  --tw-ring-offset-color: #fff;
-}
-
-.anycontext-transition-colors {
-  transition-property: color, background-color, border-color,
-    text-decoration-color, fill, stroke;
-
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-
-  transition-duration: 150ms;
-}
-
-@keyframes enter {
-  from {
-    opacity: var(--tw-enter-opacity, 1);
-
-    transform: translate3d(
-        var(--tw-enter-translate-x, 0),
-        var(--tw-enter-translate-y, 0),
-        0
-      )
-      scale3d(
-        var(--tw-enter-scale, 1),
-        var(--tw-enter-scale, 1),
-        var(--tw-enter-scale, 1)
-      )
-      rotate(var(--tw-enter-rotate, 0));
-  }
-}
-
-@keyframes exit {
-  to {
-    opacity: var(--tw-exit-opacity, 1);
-
-    transform: translate3d(
-        var(--tw-exit-translate-x, 0),
-        var(--tw-exit-translate-y, 0),
-        0
-      )
-      scale3d(
-        var(--tw-exit-scale, 1),
-        var(--tw-exit-scale, 1),
-        var(--tw-exit-scale, 1)
-      )
-      rotate(var(--tw-exit-rotate, 0));
-  }
-}
-
-.anycontext-animate-in {
-  animation-name: enter;
-
-  animation-duration: 150ms;
-
-  --tw-enter-opacity: initial;
-
-  --tw-enter-scale: initial;
-
-  --tw-enter-rotate: initial;
-
-  --tw-enter-translate-x: initial;
-
-  --tw-enter-translate-y: initial;
-}
-
-.anycontext-fade-in-0 {
-  --tw-enter-opacity: 0;
-}
-
-.anycontext-zoom-in-95 {
-  --tw-enter-scale: 0.95;
-}
-
-/* ext.css - Assuming this is your CSS file */
-
-.anycontext-overlay {
-  position: fixed;
-
-  top: 0;
-
-  left: 0;
-
-  min-height: 100vh;
-
-  width: 100%;
-
-  height: 100%;
-
-  background-color: rgba(0, 0, 0, 0.5);
-
-  z-index: 99998;
-}
-
-.anycontext-sidebar {
-  position: fixed;
-
-  top: 0;
-
-  right: 0;
-
-  min-height: 100vh;
-
-  width: 100%;
-
-  max-width: 31%;
-  /* Responsive width */
-
-  z-index: 99999;
-
-  padding: 8px 16px;
-  /* px-4 py-2 */
-}
-
-.anycontext-sidebar-content {
-  position: relative;
-
-  display: flex;
-
-  flex-direction: column;
-
-  height: 95vh;
-
-  background-color: white;
-
-  border-radius: 8px;
-  /* rounded-lg */
-
-  padding: 8px;
-  /* px-2 */
-
-  box-shadow:
-    0 4px 6px -1px rgba(0, 0, 0, 0.1),
-    0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  /* shadow-md */
-}
-
-.anycontext-close-button {
-  position: absolute;
-
-  right: 0;
-
-  padding: 8px;
-  /* p-2 */
-
-  border-radius: 4px;
-  /* rounded-md */
-
-  margin: 8px;
-  /* m-2 */
-}
-
-.anycontext-close-button:hover {
-  background-color: rgba(114, 87, 255, 0.5);
-  /* hover:bg-[#7257ff]/50 */
-
-  color: white;
-  /* hover:text-white */
-}
-
-.anycontext-open-button {
-  color: white;
-
-  background-color: #7257ff;
-
-  background-opacity: 75%;
-
-  cursor: pointer;
-
-  padding: 8px;
-  /* px-4 py-2 */
-
-  border-radius: 4px 0 0 4px;
-  /* rounded-l-md */
-
-  display: flex;
-
-  align-items: center;
-
-  justify-content: space-between;
-}
-
-.anycontext-header {
-  margin: 16px;
-  /* m-4 */
-
-  font-weight: 600;
-  /* font-semibold */
-
-  font-size: 1.25rem;
-  /* text-xl */
-
-  color: black;
-}
-
-.anycontext-icon {
-  height: 24px;
-  /* h-6 */
-
-  width: 24px;
-  /* w-6 */
-}
-
-.file\:anycontext-border-0::file-selector-button {
-  border-width: 0px;
-}
-
-.file\:anycontext-bg-transparent::file-selector-button {
-  background-color: transparent;
-}
-
-.file\:anycontext-text-sm::file-selector-button {
-  font-size: 0.875rem;
-
-  line-height: 1.25rem;
-}
-
-.file\:anycontext-font-medium::file-selector-button {
-  font-weight: 500;
-}
-
-.placeholder\:anycontext-text-stone-500::-moz-placeholder {
-  --tw-text-opacity: 1;
-
-  color: rgb(120 113 108 / var(--tw-text-opacity));
-}
-
-.placeholder\:anycontext-text-stone-500::placeholder {
-  --tw-text-opacity: 1;
-
-  color: rgb(120 113 108 / var(--tw-text-opacity));
-}
-
-.hover\:anycontext-bg-red-500\/90:hover {
-  background-color: rgb(239 68 68 / 0.9);
-}
-
-.hover\:anycontext-bg-stone-100:hover {
-  --tw-bg-opacity: 1;
-
-  background-color: rgb(245 245 244 / var(--tw-bg-opacity));
-}
-
-.hover\:anycontext-bg-stone-100\/80:hover {
-  background-color: rgb(245 245 244 / 0.8);
-}
-
-.hover\:anycontext-bg-stone-900\/90:hover {
-  background-color: rgb(28 25 23 / 0.9);
-}
-
-.hover\:anycontext-text-stone-900:hover {
-  --tw-text-opacity: 1;
-
-  color: rgb(28 25 23 / var(--tw-text-opacity));
-}
-
-.hover\:anycontext-underline:hover {
-  text-decoration-line: underline;
-}
-
-.focus-visible\:anycontext-outline-none:focus-visible {
-  outline: 2px solid transparent;
-
-  outline-offset: 2px;
-}
-
-.focus-visible\:anycontext-ring-2:focus-visible {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
-    var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
-    calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
-    var(--tw-shadow, 0 0 #0000);
-}
-
-.focus-visible\:anycontext-ring-stone-950:focus-visible {
-  --tw-ring-opacity: 1;
-
-  --tw-ring-color: rgb(12 10 9 / var(--tw-ring-opacity));
-}
-
-.focus-visible\:anycontext-ring-offset-2:focus-visible {
-  --tw-ring-offset-width: 2px;
-}
-
-.disabled\:anycontext-pointer-events-none:disabled {
-  pointer-events: none;
-}
-
-.disabled\:anycontext-cursor-not-allowed:disabled {
-  cursor: not-allowed;
-}
-
-.disabled\:anycontext-opacity-30:disabled {
-  opacity: 0.3;
-}
-
-.disabled\:anycontext-opacity-50:disabled {
-  opacity: 0.5;
-}
-
-.data-\[state\=closed\]\:anycontext-animate-out[data-state='closed'] {
-  animation-name: exit;
-
-  animation-duration: 150ms;
-
-  --tw-exit-opacity: initial;
-
-  --tw-exit-scale: initial;
-
-  --tw-exit-rotate: initial;
-
-  --tw-exit-translate-x: initial;
-
-  --tw-exit-translate-y: initial;
-}
-
-.data-\[state\=closed\]\:anycontext-fade-out-0[data-state='closed'] {
-  --tw-exit-opacity: 0;
-}
-
-.data-\[state\=closed\]\:anycontext-zoom-out-95[data-state='closed'] {
-  --tw-exit-scale: 0.95;
-}
-
-.data-\[side\=bottom\]\:anycontext-slide-in-from-top-2[data-side='bottom'] {
-  --tw-enter-translate-y: -0.5rem;
-}
-
-.data-\[side\=left\]\:anycontext-slide-in-from-right-2[data-side='left'] {
-  --tw-enter-translate-x: 0.5rem;
-}
-
-.data-\[side\=right\]\:anycontext-slide-in-from-left-2[data-side='right'] {
-  --tw-enter-translate-x: -0.5rem;
-}
-
-.data-\[side\=top\]\:anycontext-slide-in-from-bottom-2[data-side='top'] {
-  --tw-enter-translate-y: 0.5rem;
-}
-
-:is(.anycontext-dark .dark\:anycontext-border-stone-800) {
-  --tw-border-opacity: 1;
-
-  border-color: rgb(41 37 36 / var(--tw-border-opacity));
-}
-
-:is(.anycontext-dark .dark\:anycontext-bg-red-900) {
-  --tw-bg-opacity: 1;
-
-  background-color: rgb(127 29 29 / var(--tw-bg-opacity));
-}
-
-:is(.anycontext-dark .dark\:anycontext-bg-stone-50) {
-  --tw-bg-opacity: 1;
-
-  background-color: rgb(250 250 249 / var(--tw-bg-opacity));
-}
-
-:is(.anycontext-dark .dark\:anycontext-bg-stone-800) {
-  --tw-bg-opacity: 1;
-
-  background-color: rgb(41 37 36 / var(--tw-bg-opacity));
-}
-
-:is(.anycontext-dark .dark\:anycontext-bg-stone-950) {
-  --tw-bg-opacity: 1;
-
-  background-color: rgb(12 10 9 / var(--tw-bg-opacity));
-}
-
-:is(.anycontext-dark .dark\:anycontext-text-stone-50) {
-  --tw-text-opacity: 1;
-
-  color: rgb(250 250 249 / var(--tw-text-opacity));
-}
-
-:is(.anycontext-dark .dark\:anycontext-text-stone-900) {
-  --tw-text-opacity: 1;
-
-  color: rgb(28 25 23 / var(--tw-text-opacity));
-}
-
-:is(.anycontext-dark .dark\:anycontext-ring-offset-stone-950) {
-  --tw-ring-offset-color: #0c0a09;
-}
-
-:is(
-    .anycontext-dark .dark\:placeholder\:anycontext-text-stone-400
-  )::-moz-placeholder {
-  --tw-text-opacity: 1;
-
-  color: rgb(168 162 158 / var(--tw-text-opacity));
-}
-
-:is(
-    .anycontext-dark .dark\:placeholder\:anycontext-text-stone-400
-  )::placeholder {
-  --tw-text-opacity: 1;
-
-  color: rgb(168 162 158 / var(--tw-text-opacity));
-}
-
-:is(.anycontext-dark .dark\:hover\:anycontext-bg-red-900\/90:hover) {
-  background-color: rgb(127 29 29 / 0.9);
-}
-
-:is(.anycontext-dark .dark\:hover\:anycontext-bg-stone-50\/90:hover) {
-  background-color: rgb(250 250 249 / 0.9);
-}
-
-:is(.anycontext-dark .dark\:hover\:anycontext-bg-stone-800:hover) {
-  --tw-bg-opacity: 1;
-
-  background-color: rgb(41 37 36 / var(--tw-bg-opacity));
-}
-
-:is(.anycontext-dark .dark\:hover\:anycontext-bg-stone-800\/80:hover) {
-  background-color: rgb(41 37 36 / 0.8);
-}
-
-:is(.anycontext-dark .dark\:hover\:anycontext-text-stone-50:hover) {
-  --tw-text-opacity: 1;
-
-  color: rgb(250 250 249 / var(--tw-text-opacity));
-}
-
-:is(
-    .anycontext-dark
-      .dark\:focus-visible\:anycontext-ring-stone-300:focus-visible
-  ) {
-  --tw-ring-opacity: 1;
-
-  --tw-ring-color: rgb(214 211 209 / var(--tw-ring-opacity));
-}
diff --git a/apps/extension/src/ext.css b/apps/extension/src/ext.css
index f5f73fa6..0583faad 100644
--- a/apps/extension/src/ext.css
+++ b/apps/extension/src/ext.css
@@ -2,7 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-/* ext.css - Assuming this is your CSS file */
 .anycontext-overlay {
   position: fixed;
   top: 0;
@@ -53,7 +52,7 @@
 
 .anycontext-open-button {
   color: white;
-  background-color: #7257ff;
+  background-color: #7257ff50; /* bg-indigo-600 */
   background-opacity: 75%;
   cursor: pointer;
   padding: 8px; /* px-4 py-2 */
@@ -68,7 +67,6 @@
   font-weight: 600; /* font-semibold */
   font-size: 1.25rem; /* text-xl */
   color: black;
-  
 }
 
 .anycontext-icon {
diff --git a/apps/extension/src/lib/utils.ts b/apps/extension/src/lib/utils.ts
index d084ccad..365058ce 100644
--- a/apps/extension/src/lib/utils.ts
+++ b/apps/extension/src/lib/utils.ts
@@ -1,6 +1,6 @@
-import { type ClassValue, clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }
diff --git a/apps/extension/src/main.tsx b/apps/extension/src/main.tsx
index e63eef4a..b5c00920 100644
--- a/apps/extension/src/main.tsx
+++ b/apps/extension/src/main.tsx
@@ -1,9 +1,9 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
+ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-)
+);
diff --git a/apps/extension/src/types/zods.ts b/apps/extension/src/types/zods.ts
index 35f9ef87..3316aa16 100644
--- a/apps/extension/src/types/zods.ts
+++ b/apps/extension/src/types/zods.ts
@@ -1,4 +1,4 @@
-import { z } from "zod"
+import { z } from "zod";
 
 export const userObj = z.object({
   message: z.string(),
@@ -6,14 +6,14 @@ export const userObj = z.object({
     session: z.object({
       sessionToken: z.string(),
       userId: z.string(),
-      expires: z.string()
+      expires: z.string(),
     }),
     user: z.object({
       id: z.string(),
       name: z.string(),
       email: z.string().nullable().optional(),
       emailVerified: z.string().nullable(),
-      image: z.string().nullable().optional()
-    })
-  })
-})
\ No newline at end of file
+      image: z.string().nullable().optional(),
+    }),
+  }),
+});
diff --git a/apps/extension/src/util.ts b/apps/extension/src/util.ts
index b1085edd..d2ea35d3 100644
--- a/apps/extension/src/util.ts
+++ b/apps/extension/src/util.ts
@@ -1,13 +1,13 @@
 export const getEnv = () => {
-    // chrome.management.getSelf((self) => {
-    //     if (self.installType === 'development') {
-    //         return "development"
-    //     }
-    //     else {
-    //         return "production"
-    //     }
-    // })
+  // chrome.management.getSelf((self) => {
+  //     if (self.installType === 'development') {
+  //         return "development"
+  //     }
+  //     else {
+  //         return "production"
+  //     }
+  // })
 
-    // return null
-    return 'development'
-}
\ No newline at end of file
+  // return null
+  return "production";
+};