From f5ec02005696c1146817482a418a4535d1afea27 Mon Sep 17 00:00:00 2001
From: Kayla Fitzsimmons <kayla@Kaylas-MacBook-Pro.local>
Date: Wed, 18 Sep 2024 10:03:17 -0700
Subject: [PATCH 1/3] update public key for prod id generation

---
 apps/mocksi-lite-next/vite.config.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/mocksi-lite-next/vite.config.ts b/apps/mocksi-lite-next/vite.config.ts
index 3290f6c..ab936b4 100644
--- a/apps/mocksi-lite-next/vite.config.ts
+++ b/apps/mocksi-lite-next/vite.config.ts
@@ -15,7 +15,7 @@ export default defineConfig(({ mode }) => {
   let isDev = process.env.__DEV__ === "true";
   // Keys are used to create stable extension ids for unpacked builds, only use for unpublished extension builds
   const PROD_UNPACKED_KEY =
-    "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA07fIdpHz/cZNpPxNKlUpUDv0HDDfyWfLwVl1lq/YtXVLIjQ9CRGUH8C4CX+MMZSALTE0PZZu1Tclin/hno9cHDm3/Iv9Ijqij6WEs4BDQ5UKy8Q13gmoJr2+4rUPwxeCuI1HLyUSsBSL3GazdQw68/hf3l43uNfQpphb8fxQEhQyeQBi6YzQYf/W7xepENfh3Xlp4etfMS6Xl5OaAqrnUPQmTsJKEJbqs0o5l2EgoRHqvkJHhZ4zeUWZ/GgoqKxy8UahtmywVxDz73zmrBLP3thPaQbiNBRhpKOR/Ldto4P7tm6IdTQgI9CuOCKwZtG9G4j1yXhVX8MfKk17QY4gSwIDAQAB";
+    "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAmVIBAakn1m+kbh9QHDHf7jdbPKkGtlqOMJLsFKUFf9t/IV23Z79ZmcEjDNPxOmRADQQLWQJ3zZ2eMrYhSJuoKX0X8RSj8EqHehk4z2daFmtW3nLm80wiphT72isex4XqOC2Dg9/5Vj9UB2+M4fdiRBi10LZmAT0pkCRT8rJiuUO+MRByPEU+ChfvKEIJQqRSp97hUQmeYfiLZHH/VZHLm/o71L1zKDzQIg6+CvyrAMtzt2XDsT3c4+NsqX/+LgpJmhvpwxNAjyLBl02633XzWEiiu6UifYU7wvA/HeRj5O30WtOd6cXRh1grfKTWJnJmumlzRWdHzLS/WWMm29ucdwIDAQAB";
   const DEV_UNPACKED_KEY =
     "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAtdeTUTUuHZx1xSvDuISF7wJP8nEPwW4vP8zTkdfdtb/1wM0JJ7XFeUHSIiq8l4Cs6/2f8tpK6MspeD7WhwuFWFHA2GWKoLSP0keuuBAhUFKrfISlNwFaNLX5LRkLSZQnr0ujIznvEuRZaXydIYR1e9pdhYTIcp2ToHW4CI02FUBtJVUUVeKGDiKKlKUrxwGtt1ecGZwVrQ1t7dj3DLrKguw1bONtoczFT3cCs9oVYg4l8frzlyI6xfsX8ynd4F+xS6+gYQ3aJBj7phAWHGAxbVRxTAzpzXRkb9A3ne31Ysjy4uYF9x7fK6NvDj/cm+EEfGDb3VmyXvOa3zeerXtdmwIDAQAB";
 
@@ -55,7 +55,7 @@ export default defineConfig(({ mode }) => {
       manifest.web_accessible_resources.push({
         matches: ["<all_urls>"],
         resources: ["assets/*.js.map"],
-      })
+      });
 
       break;
     case "staging":

From 52be27eac19c6f22768376c59b626f0e8a1f4f71 Mon Sep 17 00:00:00 2001
From: Kayla Fitzsimmons <fitzk@users.noreply.github.com>
Date: Fri, 20 Sep 2024 10:07:01 -0700
Subject: [PATCH 2/3] adds top toolbar, including undo (#187)

* adds top toolbar

* remove background change

* add long lived connection for top -> main nest component comms

* improve source value

* add undo doesnt handle empty edits / edge cases

* add message to move reactor back into mocksi-extension.tsx

* make sure top iframe knows when # edits updates

* cleanup logging, make sure edits are passed to extension/top

* remove unused listener

* coderrabbit PR feedback

* save merge conflict resolved

---------

Co-authored-by: Kayla Fitzsimmons <kayla@Kaylas-MacBook-Pro.local>
Co-authored-by: Kayla Fitzsimmons <kayla@Kaylas-MBP.jetpack>
---
 .../src/pages/background/index.ts             |  96 +++--
 .../src/pages/content/main-iframe.tsx         | 123 ++++++
 .../src/pages/content/mocksi-extension.tsx    | 364 +++++++-----------
 .../src/pages/content/top-iframe.tsx          |  67 ++++
 apps/mocksi-lite-next/src/pages/events.ts     |   3 +
 5 files changed, 405 insertions(+), 248 deletions(-)
 create mode 100644 apps/mocksi-lite-next/src/pages/content/main-iframe.tsx
 create mode 100644 apps/mocksi-lite-next/src/pages/content/top-iframe.tsx

diff --git a/apps/mocksi-lite-next/src/pages/background/index.ts b/apps/mocksi-lite-next/src/pages/background/index.ts
index da3affe..9265479 100644
--- a/apps/mocksi-lite-next/src/pages/background/index.ts
+++ b/apps/mocksi-lite-next/src/pages/background/index.ts
@@ -1,4 +1,9 @@
-import { AppEvents, AuthEvents, LayoutEvents } from "@pages/events";
+import {
+  AppEvents,
+  AuthEvents,
+  DemoEditEvents,
+  LayoutEvents,
+} from "@pages/events";
 import { jwtDecode } from "jwt-decode";
 
 console.log("background script loaded");
@@ -109,6 +114,19 @@ addEventListener("install", () => {
   });
 });
 
+let mainIframeSrcPort: null | chrome.runtime.Port = null;
+let topIframeSrcPort: null | chrome.runtime.Port = null;
+
+chrome.runtime.onConnectExternal.addListener((port) => {
+  console.log("connecting...", port);
+  if (port.name === "extension/main") {
+    mainIframeSrcPort = port;
+  }
+  if (port.name === "extension/top") {
+    topIframeSrcPort = port;
+  }
+});
+
 // when user clicks toolbar mount extension
 chrome.action.onClicked.addListener((tab) => {
   if (!tab?.id) {
@@ -131,17 +149,6 @@ chrome.action.onClicked.addListener((tab) => {
   }
 });
 
-chrome.runtime.onMessage.addListener(
-  (request, _sender, sendResponse): boolean => {
-    sendResponse({
-      data: request.data,
-      message: request.message,
-      status: "ok",
-    });
-    return true;
-  },
-);
-
 chrome.runtime.onMessageExternal.addListener(
   (request, _sender, sendResponse) => {
     console.log("on message external: ", request);
@@ -149,10 +156,26 @@ chrome.runtime.onMessageExternal.addListener(
     // execute in async block so that we return true
     // synchronously, telling chrome to wait for the response
     (async () => {
+      if (
+        request.source === "extension/top" &&
+        request.message === AppEvents.EDIT_DEMO_STOP
+      ) {
+        if (mainIframeSrcPort) {
+          // notify extension/main that demo edit mode exited in extension/top
+          mainIframeSrcPort.postMessage({
+            ...request,
+            message: AppEvents.EDIT_DEMO_STOP,
+          });
+        } else {
+          console.log("mainIframeSrcPort is not connected");
+        }
+      }
+
       if (request.message === AuthEvents.AUTH_ERROR) {
         await clearAuth();
         sendResponse({
           message: AuthEvents.RETRY,
+          source: "background",
           status: "ok",
         });
       } else if (request.message === AuthEvents.UNAUTHORIZED) {
@@ -162,12 +185,14 @@ chrome.runtime.onMessageExternal.addListener(
           const tab = await getCurrentTab();
           sendResponse({
             message: { accessToken, email, url: tab?.url },
+            source: "background",
             status: "ok",
           });
         } else {
           await showAuthTab(true);
           sendResponse({
             message: AuthEvents.AUTHENTICATING,
+            source: "background",
             status: "ok",
           });
         }
@@ -176,9 +201,11 @@ chrome.runtime.onMessageExternal.addListener(
         if (!tab?.id) {
           sendResponse({
             message: LayoutEvents.NO_TAB,
+            source: "background",
             status: "ok",
           });
-          return;
+          console.error("No tab found");
+          return true;
         }
 
         if (
@@ -201,16 +228,39 @@ chrome.runtime.onMessageExternal.addListener(
           showDefaultIcon(tab.id);
         }
 
-        chrome.tabs.sendMessage(
-          tab.id,
-          {
-            data: request.data,
-            message: request.message,
-          },
-          (response) => {
-            sendResponse(response);
-          },
-        );
+        // send message to iframes and reactor in mocksi-extension
+        chrome.tabs.sendMessage(tab.id, request, async (response) => {
+          console.log("response from content script in background:", response);
+          if (response.message === DemoEditEvents.UNDO) {
+            // pass updated modifications from reactor to extension/main to store
+            if (mainIframeSrcPort) {
+              await mainIframeSrcPort.postMessage({
+                ...response,
+                status: "ok", // response handler expects status
+              });
+            } else {
+              console.log("mainIframeSrcPort is not connected");
+            }
+          }
+          if (
+            request.message === AppEvents.EDIT_DEMO_START ||
+            request.message === DemoEditEvents.NEW_EDIT ||
+            request.message === DemoEditEvents.CHAT_RESPONSE
+          ) {
+            // notify extension/top # of edits changed
+            if (topIframeSrcPort) {
+              await topIframeSrcPort.postMessage({
+                ...response,
+                status: "ok",
+              });
+            } else {
+              console.log("topIframeSrcPort is not connected");
+            }
+          }
+
+          sendResponse(response);
+        });
+        return true;
       }
     })();
 
diff --git a/apps/mocksi-lite-next/src/pages/content/main-iframe.tsx b/apps/mocksi-lite-next/src/pages/content/main-iframe.tsx
new file mode 100644
index 0000000..f3c0b7f
--- /dev/null
+++ b/apps/mocksi-lite-next/src/pages/content/main-iframe.tsx
@@ -0,0 +1,123 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { LayoutEvents } from "../events";
+
+export enum IframePosition {
+  BOTTOM_CENTER = "BOTTOM_CENTER",
+  TOP_RIGHT = "TOP_RIGHT",
+  BOTTOM_RIGHT = "BOTTOM_RIGHT",
+}
+
+export interface IframeResizeArgs {
+  height: number;
+  id?: string;
+  position:
+    | IframePosition.BOTTOM_CENTER
+    | IframePosition.BOTTOM_RIGHT
+    | IframePosition.TOP_RIGHT;
+  width: number;
+}
+
+function getIframeStyles({ height, position, width }: IframeResizeArgs) {
+  if (!height || !width || !position) {
+    console.error(
+      "Cannot update iframe size / position, make sure 'request.data.iframe' has 'height', 'width', and 'position' set correctly",
+    );
+    return;
+  }
+
+  const bounds = document.body.getBoundingClientRect();
+
+  let styles = {};
+  switch (position) {
+    case IframePosition.BOTTOM_CENTER:
+      styles = {
+        bottom: "0px",
+        right: `${bounds.width / 2 - width / 2}px`,
+        top: "auto",
+      };
+      break;
+    case IframePosition.BOTTOM_RIGHT:
+      styles = {
+        bottom: "10px",
+        right: "10px",
+        top: "auto",
+      };
+      break;
+    case IframePosition.TOP_RIGHT:
+      styles = {
+        bottom: "auto",
+        display: "block",
+        right: "10px",
+        top: "10px",
+      };
+      break;
+  }
+
+  return Object.assign(
+    {
+      bottom: "auto",
+      display: "block",
+      height: `${height}px`,
+      left: "auto",
+      right: "auto",
+      top: "auto",
+      width: `${width}px`,
+    },
+    styles,
+  );
+}
+
+function MainIframe() {
+  const iframeRef = React.useRef<HTMLIFrameElement>(null);
+
+  React.useEffect(() => {
+    chrome.runtime.onMessage.addListener((request) => {
+      if (iframeRef.current) {
+        switch (request.message) {
+          case LayoutEvents.HIDE:
+            iframeRef.current.style.display = "none";
+            break;
+          case LayoutEvents.RESIZE:
+            const styles = getIframeStyles(request.data.iframe);
+            Object.assign(iframeRef.current.style, styles);
+            break;
+          case LayoutEvents.SHOW:
+            iframeRef.current.style.display = "block";
+            break;
+        }
+      }
+      return true;
+    });
+  }, []);
+
+  return (
+    <>
+      {ReactDOM.createPortal(
+        <iframe
+          ref={iframeRef}
+          seamless={true}
+          src={`${import.meta.env.VITE_NEST_APP}/extension/main`}
+          style={{
+            backgroundColor: "transparent",
+            border: "none",
+            bottom: "10px",
+            boxShadow: "none",
+            colorScheme: "light",
+            display: "block",
+            height: "600px",
+            left: "auto",
+            position: "fixed",
+            right: "10px",
+            top: "auto",
+            width: "500px",
+            zIndex: 99998,
+          }}
+        />,
+        document.body,
+      )}
+    </>
+  );
+}
+
+export default MainIframe;
diff --git a/apps/mocksi-lite-next/src/pages/content/mocksi-extension.tsx b/apps/mocksi-lite-next/src/pages/content/mocksi-extension.tsx
index 7dae95f..3a089f7 100644
--- a/apps/mocksi-lite-next/src/pages/content/mocksi-extension.tsx
+++ b/apps/mocksi-lite-next/src/pages/content/mocksi-extension.tsx
@@ -1,25 +1,11 @@
 import type { ModificationRequest } from "@repo/reactor";
 import { Reactor } from "@repo/reactor";
 import React from "react";
-import ReactDOM from "react-dom";
 import { createRoot } from "react-dom/client";
-import { DemoEditEvents, LayoutEvents } from "../events";
+import { AppEvents, DemoEditEvents, LayoutEvents } from "../events";
 import { getHighlighter } from "./highlighter";
-
-export enum IframePosition {
-  BOTTOM_CENTER = "BOTTOM_CENTER",
-  TOP_RIGHT = "TOP_RIGHT",
-  BOTTOM_RIGHT = "BOTTOM_RIGHT",
-}
-export interface IframeResizeArgs {
-  height: number;
-  id?: string;
-  position:
-    | IframePosition.BOTTOM_CENTER
-    | IframePosition.BOTTOM_RIGHT
-    | IframePosition.TOP_RIGHT;
-  width: number;
-}
+import MainIframe from "./main-iframe";
+import TopIframe from "./top-iframe";
 
 const STORAGE_CHANGE_EVENT = "MOCKSI_STORAGE_CHANGE";
 
@@ -28,8 +14,6 @@ div.id = "__mocksi__root";
 document.body.appendChild(div);
 
 let mounted = false;
-const reactor = new Reactor();
-const highlighter = getHighlighter();
 
 window.addEventListener("message", (event: MessageEvent) => {
   const eventData = event.data;
@@ -45,56 +29,6 @@ window.addEventListener("message", (event: MessageEvent) => {
   }
 });
 
-function getIframeStyles({ height, position, width }: IframeResizeArgs) {
-  if (!height || !width || !position) {
-    console.error(
-      "Cannot update iframe size / position, make sure 'request.data.iframe' has 'height', 'width', and 'position' set correctly",
-    );
-    return;
-  }
-
-  const bounds = document.body.getBoundingClientRect();
-
-  let styles = {};
-  switch (position) {
-    case IframePosition.BOTTOM_CENTER:
-      styles = {
-        bottom: "0px",
-        right: `${bounds.width / 2 - width / 2}px`,
-        top: "auto",
-      };
-      break;
-    case IframePosition.BOTTOM_RIGHT:
-      styles = {
-        bottom: "10px",
-        right: "10px",
-        top: "auto",
-      };
-      break;
-    case IframePosition.TOP_RIGHT:
-      styles = {
-        bottom: "auto",
-        display: "block",
-        right: "10px",
-        top: "10px",
-      };
-      break;
-  }
-
-  return Object.assign(
-    {
-      bottom: "auto",
-      display: "block",
-      height: `${height}px`,
-      left: "auto",
-      right: "auto",
-      top: "auto",
-      width: `${width}px`,
-    },
-    styles,
-  );
-}
-
 interface AppMessageRequest {
   data: {
     edits?: ModificationRequest[];
@@ -103,190 +37,170 @@ interface AppMessageRequest {
   message: string;
 }
 
-async function handleStartStopDemoEvent(
-  prevRequest: AppMessageRequest,
-  request: AppMessageRequest,
-) {
-  async function startDemo(request: AppMessageRequest) {
-    if (request.data.edits?.length) {
-      for (const mod of request.data.edits) {
-        await reactor.pushModification(mod);
+function Extension() {
+  const prevStartStopDemoEventRef = React.useRef({
+    data: { uuid: "" },
+    message: "",
+  });
+
+  const reactor = new Reactor();
+  const highlighter = getHighlighter();
+
+  async function handleStartStopDemoEvent(
+    prevRequest: AppMessageRequest,
+    request: AppMessageRequest,
+  ) {
+    async function startDemo(request: AppMessageRequest) {
+      if (request.data.edits?.length) {
+        for (const mod of request.data.edits) {
+          await reactor.pushModification(mod);
+        }
+      } else {
+        console.debug("no edits provided to reactor");
       }
-    } else {
-      console.log("no edits provided to reactor");
+      return await reactor.attach(document, highlighter);
     }
-    return await reactor.attach(document, highlighter);
-  }
 
-  // check if app is asking to start or stop PLAY or EDIT
-  const startRequestRegExp = new RegExp(/_DEMO_START/);
-  const stopRequestRegExp = new RegExp(/_DEMO_STOP/);
+    // check if app is asking to start or stop PLAY or EDIT
+    const startRequestRegExp = new RegExp(/_DEMO_START/);
+    const stopRequestRegExp = new RegExp(/_DEMO_STOP/);
 
-  const requestingStopDemo = stopRequestRegExp.test(request.message);
-  const requestingStartDemo = startRequestRegExp.test(request.message);
+    const requestingStopDemo = stopRequestRegExp.test(request.message);
+    const requestingStartDemo = startRequestRegExp.test(request.message);
 
-  if (!requestingStartDemo && !requestingStopDemo) {
-    return prevRequest;
-  }
-  // if a demo is running already we want to avoid mounting the same
-  // modifications more than once, this is more performant, and edits
-  // persist in the dom if transitioning between EDIT and PLAY states
-  if (requestingStartDemo) {
-    const prevDemoUUID = prevRequest?.data?.uuid || null;
+    if (!requestingStartDemo && !requestingStopDemo) {
+      return prevRequest;
+    }
 
-    const demoRunning =
-      prevDemoUUID && startRequestRegExp.test(prevRequest.message);
+    // if a demo is running already we want to avoid mounting the same
+    // modifications more than once, this is more performant, and edits
+    // persist in the dom if transitioning between EDIT and PLAY states
+    if (requestingStartDemo) {
+      const prevDemoUUID = prevRequest?.data?.uuid || null;
 
-    if (!demoRunning) {
-      await startDemo(request);
-    } else {
-      const isDupeEvent = prevRequest.message === request.message;
-      const isNewDemo = prevDemoUUID !== request.data.uuid;
+      const demoRunning =
+        prevDemoUUID && startRequestRegExp.test(prevRequest.message);
 
-      if (!isDupeEvent && isNewDemo) {
-        if (reactor.isAttached()) {
-          await reactor.detach(true);
-        }
+      if (!demoRunning) {
         await startDemo(request);
+      } else {
+        const isDupeEvent = prevRequest.message === request.message;
+        const isNewDemo = prevDemoUUID !== request.data.uuid;
+        if (!isDupeEvent && isNewDemo) {
+          if (reactor.isAttached()) {
+            await reactor.detach(true);
+          }
+          await startDemo(request);
+        }
       }
     }
-  }
 
-  if (requestingStopDemo) {
-    await reactor.detach(true);
+    if (requestingStopDemo) {
+      await reactor.detach(true);
+    }
+
+    return request;
   }
 
-  return request;
-}
+  async function findReplaceAll(find: string, replace: string, flags: string) {
+    const modification: ModificationRequest = {
+      description: `Change ${find} to ${replace}`,
+      modifications: [
+        {
+          action: "replaceAll",
+          content: `/${find}/${replace}/${flags}`,
+          selector: "body",
+        },
+      ],
+    };
 
-chrome.runtime.onMessage.addListener((request) => {
-  if (request.message === LayoutEvents.MOUNT) {
-    const rootContainer = document.querySelector("#__mocksi__root");
-    if (!rootContainer) throw new Error("Can't find Content root element");
+    const modifications = await reactor.pushModification(modification);
+    return modifications;
+  }
 
-    const root = createRoot(rootContainer);
-    const Iframe = () => {
-      const prevStartStopDemoEventRef = React.useRef({
-        data: { uuid: "" },
-        message: "",
-      });
-      const iframeRef = React.useRef<HTMLIFrameElement>(null);
+  React.useEffect(() => {
+    chrome.runtime.onMessage.addListener((request, _sender, sendResponse) => {
+      // execute in async block so that we return true
+      // synchronously, telling chrome to wait for the response
+      (async () => {
+        let data = null;
+        console.debug("request in mocksi-extension from background: ", request);
+        prevStartStopDemoEventRef.current = await handleStartStopDemoEvent(
+          prevStartStopDemoEventRef.current,
+          request,
+        );
 
-      async function findReplaceAll(
-        find: string,
-        replace: string,
-        flags: string,
-      ) {
-        const modification: ModificationRequest = {
-          description: `Change ${find} to ${replace}`,
-          modifications: [
-            {
-              action: "replaceAll",
-              content: `/${find}/${replace}/${flags}`,
-              selector: "body",
-            },
-          ],
-        };
+        // make sure edits are available to extension/top
+        if (request.message === AppEvents.EDIT_DEMO_START) {
+          data = {
+            edits: Array.from(reactor.getAppliedModifications()).map(
+              (mod) => mod.modificationRequest,
+            ),
+            uuid: request.data.uuid,
+          };
+        }
 
-        const modifications = await reactor.pushModification(modification);
-        return modifications;
-      }
+        if (request.message === DemoEditEvents.NEW_EDIT) {
+          if (request.data) {
+            const { find, flags, replace } = request.data;
+            await findReplaceAll(find, replace, flags);
+            data = Array.from(reactor.getAppliedModifications()).map(
+              (mod) => mod.modificationRequest,
+            );
+          }
+        }
 
-      React.useEffect(() => {
-        chrome.runtime.onMessage.addListener(
-          (request, _sender, sendResponse) => {
-            // execute in async block so that we return true
-            // synchronously, telling chrome to wait for the response
-            (async () => {
-              let data = null;
+        // chat events
+        if (request.message === DemoEditEvents.CHAT_MESSAGE) {
+          data = reactor.exportDOM();
+        }
 
-              prevStartStopDemoEventRef.current =
-                await handleStartStopDemoEvent(
-                  prevStartStopDemoEventRef.current,
-                  request,
-                );
+        if (request.message === DemoEditEvents.CHAT_RESPONSE) {
+          await reactor.pushModification(request.data);
+          data = Array.from(reactor.getAppliedModifications()).map(
+            (mod) => mod.modificationRequest,
+          );
+        }
 
-              if (request.message === DemoEditEvents.NEW_EDIT) {
-                if (request.data) {
-                  const { find, flags, replace } = request.data;
-                  await findReplaceAll(find, replace, flags);
-                  data = Array.from(reactor.getAppliedModifications()).map(
-                    (mod) => mod.modificationRequest,
-                  );
-                }
-              }
-              // chat events
-              if (request.message === DemoEditEvents.CHAT_MESSAGE) {
-                data = reactor.exportDOM();
-              }
-              if (request.message === DemoEditEvents.CHAT_RESPONSE) {
-                await reactor.pushModification(request.data);
-                data = Array.from(reactor.getAppliedModifications()).map(
-                  (mod) => mod.modificationRequest,
-                );
-              }
+        if (request.message === DemoEditEvents.UNDO) {
+          await reactor.popModification();
+          data = Array.from(reactor.getAppliedModifications()).map(
+            (mod) => mod.modificationRequest,
+          );
+        }
 
-              // Resize iframe, how or hide it
-              if (iframeRef.current) {
-                switch (request.message) {
-                  case LayoutEvents.HIDE:
-                    iframeRef.current.style.display = "none";
-                    break;
-                  case LayoutEvents.SHOW:
-                    iframeRef.current.style.display = "block";
-                    break;
-                  case LayoutEvents.RESIZE:
-                    const styles = getIframeStyles(request.data.iframe);
-                    Object.assign(iframeRef.current.style, styles);
-                }
-              }
+        // send response back to background which forwards it to extension/x
+        sendResponse({
+          data,
+          message: request.message,
+          source: "reactor",
+          status: "ok",
+        });
+      })();
+      return true;
+    });
+  }, []);
+  return (
+    <>
+      <TopIframe />
+      <MainIframe />
+    </>
+  );
+}
 
-              sendResponse({
-                data,
-                message: request.message,
-                status: "ok",
-              });
-            })();
-            return true;
-          },
-        );
-      }, []);
+chrome.runtime.onMessage.addListener((request) => {
+  if (request.message === LayoutEvents.MOUNT) {
+    const rootContainer = document.querySelector("#__mocksi__root");
+    if (!rootContainer) {
+      throw new Error("Can't find Content root element");
+    }
 
-      return (
-        <div>
-          {ReactDOM.createPortal(
-            <>
-              <iframe
-                ref={iframeRef}
-                seamless={true}
-                src={`${import.meta.env.VITE_NEST_APP}/extension`}
-                style={{
-                  backgroundColor: "transparent",
-                  border: "none",
-                  bottom: "10px",
-                  boxShadow: "none",
-                  colorScheme: "light",
-                  display: "block",
-                  height: "600px",
-                  left: "auto",
-                  position: "fixed",
-                  right: "10px",
-                  top: "auto",
-                  width: "500px",
-                  zIndex: 99998,
-                }}
-              />
-            </>,
-            document.body,
-          )}
-        </div>
-      );
-    };
+    const root = createRoot(rootContainer);
 
     // avoid remounting react tree
     try {
       if (!mounted) {
-        root.render(<Iframe />);
+        root.render(<Extension />);
         mounted = true;
       }
       console.debug("content script loaded, extension iframe mounted");
diff --git a/apps/mocksi-lite-next/src/pages/content/top-iframe.tsx b/apps/mocksi-lite-next/src/pages/content/top-iframe.tsx
new file mode 100644
index 0000000..28314b5
--- /dev/null
+++ b/apps/mocksi-lite-next/src/pages/content/top-iframe.tsx
@@ -0,0 +1,67 @@
+import { AppEvents, DemoEditEvents } from "@pages/events";
+import React from "react";
+import ReactDOM from "react-dom";
+
+function TopIframe() {
+  const [show, setShow] = React.useState(false);
+  const iframeRef = React.useRef<HTMLIFrameElement>(null);
+
+  React.useEffect(() => {
+    chrome.runtime.onMessage.addListener((request) => {
+      if (request.message === AppEvents.EDIT_DEMO_START) {
+        setShow(true);
+      }
+      if (
+        request.message === AppEvents.EDIT_DEMO_STOP ||
+        request.message === AppEvents.PLAY_DEMO_START
+      ) {
+        setShow(false);
+      }
+
+      if (iframeRef.current) {
+        const bounds = document.body.getBoundingClientRect();
+
+        if (request.message === DemoEditEvents.HIDE_TOOLBAR) {
+          const width = 65;
+          Object.assign(iframeRef.current.style, {
+            height: "35px",
+            right: `${bounds.width / 2 - width / 2}px`,
+            width: `${width}px`,
+          });
+        }
+
+        if (request.message === DemoEditEvents.SHOW_TOOLBAR) {
+          Object.assign(iframeRef.current.style, {
+            height: "80px",
+            right: "auto",
+            width: "100vw",
+          });
+        }
+      }
+      return true;
+    });
+  }, []);
+
+  return ReactDOM.createPortal(
+    <iframe
+      ref={iframeRef}
+      seamless={true}
+      src={`${import.meta.env.VITE_NEST_APP}/extension/top`}
+      style={{
+        backgroundColor: "transparent",
+        border: "none",
+        boxShadow: "none",
+        colorScheme: "light",
+        display: show ? "block" : "none",
+        height: "80px",
+        position: "fixed",
+        top: "0px",
+        width: "100vw",
+        zIndex: 99998,
+      }}
+    />,
+    document.body,
+  );
+}
+
+export default TopIframe;
diff --git a/apps/mocksi-lite-next/src/pages/events.ts b/apps/mocksi-lite-next/src/pages/events.ts
index 0521064..c3b3a35 100644
--- a/apps/mocksi-lite-next/src/pages/events.ts
+++ b/apps/mocksi-lite-next/src/pages/events.ts
@@ -16,6 +16,9 @@ export enum DemoEditEvents {
   CHAT_MESSAGE = "CHAT_MESSAGE",
   CHAT_RESPONSE = "CHAT_RESPONSE",
   NEW_EDIT = "NEW_EDIT",
+  HIDE_TOOLBAR = "HIDE_TOOLBAR",
+  SHOW_TOOLBAR = "SHOW_TOOLBAR",
+  UNDO = "UNDO",
 }
 
 export enum LayoutEvents {

From eaaa9da38eca86ec7019b4dcdae6720c63099f65 Mon Sep 17 00:00:00 2001
From: Kayla Fitzsimmons <fitzk@users.noreply.github.com>
Date: Fri, 20 Sep 2024 11:54:04 -0700
Subject: [PATCH 3/3] =?UTF-8?q?move=20ports=20higher=20in=20file=20and=20r?=
 =?UTF-8?q?eturn=20true=20in=20the=20correct=20place=20to=20kee=E2=80=A6?=
 =?UTF-8?q?=20(#190)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* move ports higher in file and return true in the correct place to keep connections open

* listen to the response not the request :face-palm:

---------

Co-authored-by: Kayla Fitzsimmons <kayla@Kaylas-MacBook-Pro.local>
---
 .../src/pages/background/index.ts             | 59 +++++++++----------
 1 file changed, 27 insertions(+), 32 deletions(-)

diff --git a/apps/mocksi-lite-next/src/pages/background/index.ts b/apps/mocksi-lite-next/src/pages/background/index.ts
index 9265479..0f955d0 100644
--- a/apps/mocksi-lite-next/src/pages/background/index.ts
+++ b/apps/mocksi-lite-next/src/pages/background/index.ts
@@ -13,6 +13,26 @@ const MOCKSI_AUTH = "mocksi-auth";
 let fallbackTab: null | chrome.tabs.Tab = null;
 let prevLayoutEvent = "";
 
+let mainIframeSrcPort: null | chrome.runtime.Port = null;
+let topIframeSrcPort: null | chrome.runtime.Port = null;
+
+addEventListener("install", () => {
+  // TODO test if this works on other browsers
+  chrome.tabs.create({
+    url: import.meta.env.VITE_NEST_APP,
+  });
+});
+
+chrome.runtime.onConnectExternal.addListener((port) => {
+  console.log("connecting...", port);
+  if (port.name === "extension/main") {
+    mainIframeSrcPort = port;
+  }
+  if (port.name === "extension/top") {
+    topIframeSrcPort = port;
+  }
+});
+
 const getAuth = async (): Promise<null | {
   accessToken: string;
   email: string;
@@ -107,31 +127,11 @@ async function showPlayIcon(tabId: number) {
   });
 }
 
-addEventListener("install", () => {
-  // TODO test if this works on other browsers
-  chrome.tabs.create({
-    url: import.meta.env.VITE_NEST_APP,
-  });
-});
-
-let mainIframeSrcPort: null | chrome.runtime.Port = null;
-let topIframeSrcPort: null | chrome.runtime.Port = null;
-
-chrome.runtime.onConnectExternal.addListener((port) => {
-  console.log("connecting...", port);
-  if (port.name === "extension/main") {
-    mainIframeSrcPort = port;
-  }
-  if (port.name === "extension/top") {
-    topIframeSrcPort = port;
-  }
-});
-
 // when user clicks toolbar mount extension
 chrome.action.onClicked.addListener((tab) => {
   if (!tab?.id) {
     console.log("No tab  exits click, could not mount extension");
-    return;
+    return true;
   }
   // store the tab they clicked on to open the extension
   // so we can use it as a fallback
@@ -147,6 +147,7 @@ chrome.action.onClicked.addListener((tab) => {
     });
     prevLayoutEvent = LayoutEvents.HIDE;
   }
+  return true;
 });
 
 chrome.runtime.onMessageExternal.addListener(
@@ -199,12 +200,7 @@ chrome.runtime.onMessageExternal.addListener(
       } else {
         const tab = await getCurrentTab();
         if (!tab?.id) {
-          sendResponse({
-            message: LayoutEvents.NO_TAB,
-            source: "background",
-            status: "ok",
-          });
-          console.error("No tab found");
+          console.error("No tab found: ");
           return true;
         }
 
@@ -243,9 +239,9 @@ chrome.runtime.onMessageExternal.addListener(
             }
           }
           if (
-            request.message === AppEvents.EDIT_DEMO_START ||
-            request.message === DemoEditEvents.NEW_EDIT ||
-            request.message === DemoEditEvents.CHAT_RESPONSE
+            response.message === AppEvents.EDIT_DEMO_START ||
+            response.message === DemoEditEvents.CHAT_RESPONSE ||
+            response.message === DemoEditEvents.NEW_EDIT
           ) {
             // notify extension/top # of edits changed
             if (topIframeSrcPort) {
@@ -259,11 +255,10 @@ chrome.runtime.onMessageExternal.addListener(
           }
 
           sendResponse(response);
+          return true;
         });
-        return true;
       }
     })();
-
     return true;
   },
 );