From d4a42d437fff49eff62791d6a0cfe6b5dbf1300d Mon Sep 17 00:00:00 2001
From: JinhyeokLee <jinhyuklee@mymusictaste.com>
Date: Sat, 24 Jun 2023 04:18:38 +0900
Subject: [PATCH] refactor(store): Use central element store, add Coder

---
 manifest.json                                 |   2 +-
 package.json                                  |  12 +-
 src/App.tsx                                   | 151 +++---
 src/comp/coder2/Files.tsx                     |  68 +++
 src/comp/coder2/Languages.tsx                 | 149 ++++++
 src/comp/coder2/Main.tsx                      | 141 ++++++
 src/comp/coder2/Markdown.tsx                  |  43 ++
 src/comp/coder2/Prepare.tsx                   | 136 ++++++
 src/comp/modals/CoderModal2.tsx               | 117 +++++
 src/comp/modals/SerializerModal.tsx           |  84 +++-
 src/comp/modals/TokenReaderModal.tsx          |  17 +-
 src/comp/workers/ClickThrougher.tsx           |  83 ++--
 src/comp/workers/ContinueClicker.tsx          |  63 +--
 src/comp/workers/ConversationMenu.tsx         | 215 +-------
 src/comp/workers/EditWatcher.tsx              |  41 --
 src/comp/workers/InputWatcher.tsx             | 122 -----
 src/comp/workers/MessageSerializer.tsx        |  26 +-
 src/comp/workers/MutationWatcher.tsx          |  25 -
 src/comp/workers/TextAreaAugmenter.tsx        | 149 ++++++
 src/lib/elementPromises.ts                    |   1 +
 src/lib/hooks/useApplyClassName.ts            |  13 +
 src/lib/hooks/useCoder2.ts                    | 458 ++++++++++++++++++
 src/lib/hooks/useDetachment.ts                |  58 ---
 src/lib/hooks/useElements.ts                  |  25 -
 src/lib/hooks/useJson.ts                      |   8 +-
 src/lib/hooks/useTarget.ts                    | 102 +++-
 src/lib/hooks/workers/useContinueClicker.ts   |  44 ++
 src/lib/hooks/workers/useConversationMenu.tsx | 243 ++++++++++
 src/lib/hooks/workers/useElements.ts          | 255 ++++++++++
 src/lib/hooks/workers/useMessageSerializer.ts |  28 ++
 .../hooks/workers/useTextarea.ts}             | 172 ++++---
 src/lib/install.ts                            |   9 +-
 src/lib/messageSerializer.ts                  |   8 +-
 src/lib/textExpander.ts                       |   2 +-
 src/lib/utils.ts                              |   7 +
 vite.config.rollup.js                         |   3 +
 yarn.lock                                     | 335 ++++++++++++-
 37 files changed, 2615 insertions(+), 800 deletions(-)
 create mode 100644 src/comp/coder2/Files.tsx
 create mode 100644 src/comp/coder2/Languages.tsx
 create mode 100644 src/comp/coder2/Main.tsx
 create mode 100644 src/comp/coder2/Markdown.tsx
 create mode 100644 src/comp/coder2/Prepare.tsx
 create mode 100644 src/comp/modals/CoderModal2.tsx
 delete mode 100644 src/comp/workers/EditWatcher.tsx
 delete mode 100644 src/comp/workers/InputWatcher.tsx
 delete mode 100644 src/comp/workers/MutationWatcher.tsx
 create mode 100644 src/comp/workers/TextAreaAugmenter.tsx
 create mode 100644 src/lib/hooks/useApplyClassName.ts
 create mode 100644 src/lib/hooks/useCoder2.ts
 delete mode 100644 src/lib/hooks/useDetachment.ts
 delete mode 100644 src/lib/hooks/useElements.ts
 create mode 100644 src/lib/hooks/workers/useContinueClicker.ts
 create mode 100644 src/lib/hooks/workers/useConversationMenu.tsx
 create mode 100644 src/lib/hooks/workers/useElements.ts
 create mode 100644 src/lib/hooks/workers/useMessageSerializer.ts
 rename src/{comp/workers/SelectionWatcher.tsx => lib/hooks/workers/useTextarea.ts} (60%)
 create mode 100644 src/lib/utils.ts

diff --git a/manifest.json b/manifest.json
index a6d45e6..d1f782e 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "ChatGPT Augment",
-  "version": "1.7.3",
+  "version": "1.8.0",
   "description": "Enhance chat with ChatGPT-Augment: auto-continue, macros, token count, prompts, gradients, JSON format.",
   "content_scripts": [
     {
diff --git a/package.json b/package.json
index 551706f..835921d 100644
--- a/package.json
+++ b/package.json
@@ -1,17 +1,20 @@
 {
   "name": "chatgpt-augment",
   "private": true,
-  "version": "1.7.3",
+  "version": "1.8.0",
   "type": "module",
   "license": "WTFPL",
   "scripts": {
     "build": "node ./scripts/match-versions.mjs && tsc && NODE_ENV=production vite build && NODE_ENV=production node ./scripts/add-banners.mjs",
+    "build-lex": "node ./scripts/match-versions.mjs && NODE_ENV=production vite build",
     "dev": "vite dev",
+    "watch": "nodemon --watch src --ext ts,tsx -x \"concurrently -n 'Build,TSC' -c 'blue.bold,green.bold' 'yarn build-lex' 'tsc'\"",
     "preview": "vite preview"
   },
   "devDependencies": {
     "@crxjs/vite-plugin": "beta",
     "@types/chrome": "^0.0.237",
+    "@types/jszip": "^3.4.1",
     "@types/lodash": "^4.14.195",
     "@types/marked": "^5.0.0",
     "@types/node-emoji": "^1.8.2",
@@ -19,6 +22,8 @@
     "@types/react-dom": "^18.2.4",
     "@vitejs/plugin-react-swc": "^3.3.2",
     "chokidar-cli": "^3.0.0",
+    "concurrently": "^8.2.0",
+    "nodemon": "^2.0.22",
     "rollup-plugin-visualizer": "^5.9.0",
     "typescript": "^5.0.2",
     "vite": "^4.3.9"
@@ -29,14 +34,17 @@
     "@mantine/hooks": "^6.0.13",
     "@mantine/notifications": "^6.0.13",
     "@radix-ui/react-slot": "^1.0.2",
-    "@tabler/icons-react": "^2.21.0",
+    "@tabler/icons-react": "^2.22.0",
     "chrono-node": "^2.6.3",
+    "json5": "^2.2.3",
+    "jszip": "^3.10.1",
     "lodash": "^4.17.21",
     "marked": "^5.1.0",
     "node-emoji": "^2.0.2",
     "node-html-markdown": "^1.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-wrap-balancer": "^1.0.0",
     "reactflow": "^11.7.2"
   },
   "packageManager": "yarn@3.6.0"
diff --git a/src/App.tsx b/src/App.tsx
index 9be0cbe..d00f8ed 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,26 +1,27 @@
-import { MutationWatcher } from "@/comp/workers/MutationWatcher";
 import {
+  Box,
   ColorSchemeProvider,
   Group,
   MantineProvider,
-  Portal,
   Text,
+  Tooltip,
   Transition,
   createEmotionCache,
 } from "@mantine/core";
-import { useToggle, useViewportSize } from "@mantine/hooks";
+import { useViewportSize } from "@mantine/hooks";
 import { Notifications } from "@mantine/notifications";
-import { useEffect, useState } from "react";
-import json from "../package.json";
-import { JSONFormatter } from "./comp/modals/JSONFormatter";
+import { useEffect, useMemo, useState } from "react";
+import Balancer from "react-wrap-balancer";
+import { version } from "../package.json";
 import { ClickThrougher } from "./comp/workers/ClickThrougher";
+import { ContinueWorker } from "./comp/workers/ContinueClicker";
 import { ConversationMenu } from "./comp/workers/ConversationMenu";
-import { InputWatcher } from "./comp/workers/InputWatcher";
-import { SelectionWatcher } from "./comp/workers/SelectionWatcher";
+import { TextAreaAugmenter } from "./comp/workers/TextAreaAugmenter";
 import { useCgptColorScheme } from "./lib/hooks/useColorScheme";
-import { useElements } from "./lib/hooks/useElements";
-import { useRootTarget } from "./lib/hooks/useTarget";
+import { useRootAnchor } from "./lib/hooks/useTarget";
+import { useElsUpdater } from "./lib/hooks/workers/useElements";
 import { MessageSerializer } from "./comp/workers/MessageSerializer";
+import { CoderModal2 } from "./comp/modals/CoderModal2";
 
 const cache = createEmotionCache({
   key: "cgpt-agmt",
@@ -29,16 +30,31 @@ const cache = createEmotionCache({
 
 export const App = () => {
   const [colorScheme, setTheme] = useCgptColorScheme();
-  const [target, orgHtml] = useRootTarget("form + div");
+
   const [mounted, setMounted] = useState(false);
-  const [visible, toggle] = useToggle([true, false]);
-  const isWide = useViewportSize().width > 500;
-  const { textarea, parent } = useElements();
+  const isWide = useViewportSize().width > 600;
+  const [tgt, __html] = useRootAnchor();
+
+  const { width, height } = useElsUpdater(); // updates els on mutation
+  const wrapperStyle = useMemo(
+    () =>
+      ({
+        width,
+        height,
+        userSelect: "none",
+        backdropFilter: "blur(3px)",
+        zIndex: 1,
+        background:
+          colorScheme === "dark"
+            ? "rgb(52, 53, 64 , 0.5)"
+            : "rgb(255, 255, 255, 0.5)",
+      } as const),
+    [colorScheme, width, height]
+  );
   useEffect(() => {
-    if (!target) setMounted(false);
+    setMounted(false);
     setTimeout(() => setMounted(true), 100);
-  }, [target]);
-
+  }, [tgt]);
   return (
     <ColorSchemeProvider
       colorScheme={colorScheme}
@@ -47,63 +63,54 @@ export const App = () => {
       }
     >
       <MantineProvider emotionCache={cache} theme={{ colorScheme }}>
-        {target && (
-          <Portal target={target}>
-            <Transition
-              mounted={mounted}
-              transition="pop"
-              duration={2000}
-              timingFunction="ease"
-            >
-              {(styles) => (
-                <Group
-                  style={styles}
-                  spacing="xs"
-                  align="center"
-                  position="center"
-                  className="cgpt-agmt"
-                  noWrap
+        <Box style={wrapperStyle}>
+          <Transition
+            mounted={!!width && mounted}
+            transition="pop"
+            duration={500}
+            exitDuration={100}
+            timingFunction="ease"
+            keepMounted
+          >
+            {(styles) => (
+              <Group
+                style={styles}
+                spacing="xs"
+                align="center"
+                position="center"
+                className="cgpt-agmt"
+                noWrap
+              >
+                <Tooltip
+                  label={
+                    <Text
+                      component={Balancer}
+                      size="xs"
+                      dangerouslySetInnerHTML={{ __html }}
+                    />
+                  }
+                  styles={{
+                    tooltip: { maxWidth: "90vw", whiteSpace: "pre-wrap" },
+                  }}
+                  withArrow
+                  withinPortal
                 >
-                  <Text
-                    variant="gradient"
-                    style={{
-                      lineHeight: "initial",
-                      display: visible ? "block" : "none",
-                    }}
-                    onClick={() => toggle()}
-                    id="chatgpt-augment-app"
-                  >
-                    {isWide && `ChatGPT Augment `}v{json.version}
+                  <Text variant="gradient" size="sm">
+                    {isWide && `ChatGPT Augment `}v{version}
                   </Text>
-                  <Text
-                    style={{
-                      lineHeight: "initial",
-                      display: !visible ? "block" : "none",
-                    }}
-                    onClick={() => toggle()}
-                    dangerouslySetInnerHTML={{ __html: orgHtml }}
-                  />
-                  <Group
-                    style={{ display: visible ? "flex" : "none" }}
-                    noWrap
-                    spacing="xs"
-                    align="center"
-                    position="center"
-                  >
-                    <MutationWatcher />
-                    {textarea && <InputWatcher textarea={textarea} />}
-                    {textarea && <SelectionWatcher textarea={textarea} />}
-                    <JSONFormatter />
-                    <MessageSerializer />
-                  </Group>
-                </Group>
-              )}
-            </Transition>
-          </Portal>
-        )}
-        {mounted && parent && <ClickThrougher parent={parent} />}
-        <ConversationMenu />
-        <Notifications position="top-right" />
+                </Tooltip>
+                <ContinueWorker />
+                <ClickThrougher />
+                <TextAreaAugmenter />
+                <ConversationMenu />
+                <MessageSerializer />
+                <CoderModal2 />
+                {/* BUTTONS / UI HERE */}
+              </Group>
+            )}
+          </Transition>
+          <Notifications position="top-right" />
+        </Box>
       </MantineProvider>
     </ColorSchemeProvider>
   );
diff --git a/src/comp/coder2/Files.tsx b/src/comp/coder2/Files.tsx
new file mode 100644
index 0000000..a193e0d
--- /dev/null
+++ b/src/comp/coder2/Files.tsx
@@ -0,0 +1,68 @@
+import { useCoder } from "@/lib/hooks/useCoder2";
+import { ClassNames } from "@emotion/react";
+import { Paper, UnstyledButton, rem, useMantineTheme } from "@mantine/core";
+import { IconCircleDashed, IconFile, IconFileCheck } from "@tabler/icons-react";
+
+export const Coder2Files = () => {
+  const [files, currentFile, handleFileSelect] = useCoder((s) => [
+    s.files,
+    s.currentFile,
+    s.handlers.handleFileSelect,
+  ]);
+  const theme = useMantineTheme();
+  return (
+    <ClassNames>
+      {({ css }) => (
+        <Paper>
+          {files.map((file) => (
+            <UnstyledButton
+              key={file.path}
+              data-path={file.path}
+              onClick={handleFileSelect}
+              className={css`
+                display: flex;
+                align-items: center;
+                gap: ${theme.spacing.xs};
+                width: 100%;
+                text-decoration: none;
+                color: ${theme.colorScheme === "dark"
+                  ? theme.colors.dark[0]
+                  : theme.black};
+
+                line-height: 1.2;
+                font-size: ${theme.fontSizes.sm};
+                padding: ${theme.spacing.xs};
+                border-top-right-radius: ${theme.radius.sm};
+                border-bottom-right-radius: ${theme.radius.sm};
+                border-left: ${rem(1)} solid
+                  ${theme.colorScheme === "dark"
+                    ? theme.colors.dark[4]
+                    : theme.colors.gray[3]};
+
+                background-color: ${currentFile === file.path
+                  ? theme.colorScheme === "dark"
+                    ? theme.colors.dark[6]
+                    : theme.colors.gray[0]
+                  : "transparent"};
+                &:hover {
+                  background-color: ${theme.colorScheme === "dark"
+                    ? theme.colors.dark[6]
+                    : theme.colors.gray[0]};
+                }
+              `}
+            >
+              {!file.content ? (
+                <IconCircleDashed />
+              ) : file.reviewed ? (
+                <IconFileCheck />
+              ) : (
+                <IconFile />
+              )}{" "}
+              {file.path}
+            </UnstyledButton>
+          ))}
+        </Paper>
+      )}
+    </ClassNames>
+  );
+};
diff --git a/src/comp/coder2/Languages.tsx b/src/comp/coder2/Languages.tsx
new file mode 100644
index 0000000..3933fae
--- /dev/null
+++ b/src/comp/coder2/Languages.tsx
@@ -0,0 +1,149 @@
+import { Group, Select, Text } from "@mantine/core";
+import {
+  IconAbacus,
+  IconAssembly,
+  IconBrandCSharp,
+  IconBrandCpp,
+  IconBrandCss3,
+  IconBrandFirefox,
+  IconBrandGolang,
+  IconBrandJavascript,
+  IconBrandKotlin,
+  IconBrandPhp,
+  IconBrandPython,
+  IconBrandRust,
+  IconBrandSwift,
+  IconBrandTypescript,
+  IconBrandVisualStudio,
+  IconCoffee,
+  IconHtml,
+  IconLetterC,
+  IconLetterR,
+  IconPoint,
+  IconSql,
+} from "@tabler/icons-react";
+import { ReactNode, forwardRef } from "react";
+
+const LANGUAGES = [
+  "Python",
+  "C",
+  "C++",
+  "Java",
+  "C#",
+  "Visual Basic",
+  "TypeScript",
+  "JavaScript",
+  "HTML",
+  "CSS3",
+  "CSS4",
+  "PHP",
+  "SQL",
+  "Go",
+  "R",
+  "Swift",
+  "Rust",
+  "Assembly language",
+  "Kotlin",
+  "MATLAB",
+  "Delphi",
+  "Object Pascal",
+  "Fortran",
+  "Classic Visual Basic",
+  "Ruby",
+  "FoxPro",
+  "COBOL",
+  "SAS",
+  "Objective-C",
+  "Perl",
+  "Ada",
+  "Julia",
+  "D",
+  "Transact-SQL",
+  "Haskell",
+  "Lua",
+  "Lisp",
+  "Dart",
+  "Scala",
+  "Prolog",
+  "PL/SQL",
+  "Scheme",
+  "VBScript",
+  "F#",
+  "ABAP",
+  "X++",
+  "CFML",
+  "Awk",
+  "ML",
+  "Raku",
+  "Forth",
+  "Apex",
+  "Elixir",
+  "Elm",
+  "PureScript",
+  "ReasonML",
+  "CoffeeScript",
+  "ClojureScript",
+  "Haxe",
+] as const;
+
+type Languages = (typeof LANGUAGES)[number];
+
+const LANGUAGE_ICONS: Partial<Record<Languages, ReactNode>> = {
+  Python: <IconBrandPython stroke={1.2} />,
+  C: <IconLetterC stroke={1.2} />,
+  "C++": <IconBrandCpp stroke={1.2} />,
+  Java: <IconCoffee stroke={1.2} />,
+  "C#": <IconBrandCSharp stroke={1.2} />,
+  "Visual Basic": <IconBrandVisualStudio stroke={1.2} />,
+  JavaScript: <IconBrandJavascript stroke={1.2} />,
+  PHP: <IconBrandPhp stroke={1.2} />,
+  Go: <IconBrandGolang stroke={1.2} />,
+  R: <IconLetterR stroke={1.2} />,
+  Swift: <IconBrandSwift stroke={1.2} />,
+  Rust: <IconBrandRust stroke={1.2} />,
+  Kotlin: <IconBrandKotlin stroke={1.2} />,
+  TypeScript: <IconBrandTypescript stroke={1.2} />,
+  SQL: <IconSql stroke={1.2} />,
+  "Assembly language": <IconAssembly stroke={1.2} />,
+  MATLAB: <IconAbacus stroke={1.2} />,
+  HTML: <IconHtml stroke={1.2} />,
+  CSS3: <IconBrandCss3 stroke={1.2} />,
+  CSS4: <IconBrandFirefox stroke={1.2} />,
+};
+
+const ItemComponent = forwardRef<HTMLDivElement, { value: string }>(
+  ({ value, ...rest }, ref) => {
+    return (
+      <div ref={ref} {...rest}>
+        <Group noWrap>
+          {LANGUAGE_ICONS[value as keyof typeof LANGUAGE_ICONS] || (
+            <IconPoint stroke={1.2} />
+          )}
+
+          <Text size="xs" component="div" lineClamp={1}>
+            {value}
+          </Text>
+        </Group>
+      </div>
+    );
+  }
+);
+type Props = { value: string; onSelect(language: string): void };
+export const CoderLanguageSelector = ({ value, onSelect }: Props) => {
+  return (
+    <Select
+      data={LANGUAGES}
+      value={value as Languages}
+      onChange={onSelect}
+      label="Language"
+      placeholder="Select language"
+      radius="xl"
+      autoFocus={false}
+      searchable
+      withAsterisk
+      nothingFound="No options"
+      withinPortal
+      itemComponent={ItemComponent}
+    />
+  );
+};
diff --git a/src/comp/coder2/Main.tsx b/src/comp/coder2/Main.tsx
new file mode 100644
index 0000000..856c6d1
--- /dev/null
+++ b/src/comp/coder2/Main.tsx
@@ -0,0 +1,141 @@
+import { useCoder } from "@/lib/hooks/useCoder2";
+import {
+  Button,
+  Group,
+  Paper,
+  ScrollArea,
+  Stack,
+  Tabs,
+  TextInput,
+  Textarea,
+  TypographyStylesProvider,
+} from "@mantine/core";
+import { useToggle } from "@mantine/hooks";
+import { IconHandStop, IconReload } from "@tabler/icons-react";
+import { CoderMarkdown } from "../coder2/Markdown";
+
+export const Coder2Main = () => {
+  const [
+    files,
+    currentFile,
+    currentMessage,
+    questions,
+    conversations,
+    answers,
+    userInput,
+    handleAnswerInput,
+    handleUserInput,
+    stopOrRegenerate,
+    submitResponse,
+    submitInitialPrompt,
+    isBusy,
+  ] = useCoder((s) => [
+    s.files,
+    s.currentFile,
+    s.currentMessage,
+    s.questions,
+    s.conversations,
+    s.answers,
+    s.userInput,
+    s.handlers.handleAnswerInput,
+    s.handlers.handleUserInput,
+    s.handlers.stopOrRegenerate,
+    s.handlers.submitResponse,
+    s.handlers.submitInitialPrompt,
+    s.isBusy,
+  ]);
+  const [value, setValue] = useToggle(["message", "file", null]);
+  const file = files.find((f) => f.path === currentFile);
+  return (
+    <Tabs
+      value={value}
+      onTabChange={setValue}
+      h="100%"
+      style={{ display: "flex", flexDirection: "column" }}
+    >
+      <Tabs.List>
+        <Tabs.Tab value="message">Messages</Tabs.Tab>
+        <Tabs.Tab value="file">File - {currentFile || "N/A"}</Tabs.Tab>
+      </Tabs.List>
+      <Tabs.Panel
+        pt="xs"
+        value="message"
+        style={{ flex: 1, overflow: "hidden" }}
+      >
+        <Stack spacing="xs" h="100%">
+          <ScrollArea style={{ flex: 1 }}>
+            <TypographyStylesProvider>
+              <CoderMarkdown md={currentMessage} loading={isBusy} />
+            </TypographyStylesProvider>
+            <Stack mr="md" w="100%" spacing="md">
+              {questions.map((q, i) => (
+                <TextInput
+                  key={i}
+                  placeholder="Your answer (optional)"
+                  label={q}
+                  value={answers[i]}
+                  onInput={handleAnswerInput}
+                  data-idx={i}
+                />
+              ))}
+              <Textarea
+                label={`${questions.length ? "Additional " : ""}User input`}
+                placeholder="(optional)"
+                value={userInput}
+                disabled={isBusy}
+                onChange={handleUserInput}
+              />
+            </Stack>
+          </ScrollArea>
+          <Group
+            spacing="xs"
+            position="right"
+            style={{ flexGrow: 0, flexShrink: 0 }}
+          >
+            {conversations.length === 0 ? null : isBusy ? (
+              <Button
+                onClick={() => stopOrRegenerate(true)}
+                leftIcon={<IconHandStop stroke={1.5} />}
+              >
+                Stop
+              </Button>
+            ) : (
+              <Button
+                onClick={() => stopOrRegenerate(false)}
+                leftIcon={<IconReload stroke={1.5} />}
+              >
+                Regenerate
+              </Button>
+            )}
+            {conversations.length === 0 ? (
+              <Button onClick={submitInitialPrompt} disabled={isBusy}>
+                Start
+              </Button>
+            ) : (
+              <Button onClick={submitResponse} disabled={isBusy}>
+                Submit {questions.length > 0 ? "Answers" : "Review"}
+              </Button>
+            )}
+          </Group>
+        </Stack>
+      </Tabs.Panel>
+      <Tabs.Panel pt="xs" value="file" style={{ flex: 1 }}>
+        <ScrollArea>
+          {file ? (
+            <TypographyStylesProvider>
+              <Paper
+                withBorder
+                component="pre"
+                style={{ whiteSpace: "pre-wrap" }}
+              >
+                {file.content}
+              </Paper>
+            </TypographyStylesProvider>
+          ) : (
+            "N/A"
+          )}
+        </ScrollArea>
+      </Tabs.Panel>
+    </Tabs>
+  );
+};
diff --git a/src/comp/coder2/Markdown.tsx b/src/comp/coder2/Markdown.tsx
new file mode 100644
index 0000000..4985a66
--- /dev/null
+++ b/src/comp/coder2/Markdown.tsx
@@ -0,0 +1,43 @@
+import { ClassNames } from "@emotion/react";
+import { Loader, Paper } from "@mantine/core";
+import { marked } from "marked";
+
+export const CoderMarkdown = ({
+  md,
+  loading,
+}: {
+  md: string;
+  loading?: boolean;
+}) => (
+  <ClassNames>
+    {({ css }) => (
+      <Paper
+        p="xs"
+        withBorder
+        className={css`
+          max-width: 100%;
+          font-size: 0.7rem;
+          pre {
+            overflow-wrap: break-word;
+            word-break: break-all;
+            white-space: pre-wrap;
+          }
+          p:last-child {
+            margin-bottom: 0;
+          }
+          li {
+            list-style: auto;
+            margin-left: 1rem;
+          }
+        `}
+      >
+        <span
+          dangerouslySetInnerHTML={{
+            __html: marked(md, { headerIds: false, mangle: false }),
+          }}
+        />
+        {loading && <Loader variant="bars" size="1rem" />}
+      </Paper>
+    )}
+  </ClassNames>
+);
diff --git a/src/comp/coder2/Prepare.tsx b/src/comp/coder2/Prepare.tsx
new file mode 100644
index 0000000..ac7742f
--- /dev/null
+++ b/src/comp/coder2/Prepare.tsx
@@ -0,0 +1,136 @@
+import { useCoder } from "@/lib/hooks/useCoder2";
+import { useSelector } from "@/lib/hooks/useTarget";
+import {
+  ActionIcon,
+  Button,
+  Checkbox,
+  Stack,
+  Text,
+  TextInput,
+} from "@mantine/core";
+import { IconPlayerPlay, IconX } from "@tabler/icons-react";
+import { useEffect } from "react";
+import { CoderLanguageSelector } from "./Languages";
+import { store } from "@/lib/hooks/workers/useElements";
+
+export const Coder2Prepare = () => {
+  const [isChatNew, isChatGpt4] = store((s) => [
+    !s.container.conversations?.length,
+    s.button.gptActive === s.button.gpt4,
+  ]);
+  const [handlers, prepareValues, prepared, questionCount, appName, language] =
+    useCoder((s) => [
+      s.handlers,
+      s.computed.prepareValues,
+      s.computed.prepared,
+      s.questionCount,
+      s.appName,
+      s.language,
+    ]);
+
+  useEffect(() => useCoder.setState({ isChatNew }), [isChatNew]);
+  useEffect(() => useCoder.setState({ isChatGpt4 }), [isChatGpt4]);
+
+  return (
+    <Stack align="stretch" justify="space-between" h="100%">
+      <Checkbox.Group value={prepareValues} label="Basic preparations">
+        <Stack mt="xs">
+          <Checkbox
+            radius="md"
+            value="newchat"
+            disabled
+            label={
+              <Text fw={500}>
+                Start a new conversation{" "}
+                <Text color="red" span>
+                  *
+                </Text>
+              </Text>
+            }
+            description={
+              <>
+                Existing conversation may interfere with the process.
+                {!isChatNew && (
+                  <Button
+                    color="dark"
+                    onClick={!isChatNew ? handlers.openNewChat : undefined}
+                    compact
+                    m="xs"
+                  >
+                    {" "}
+                    Click to start a new conversation.
+                  </Button>
+                )}
+              </>
+            }
+          />
+          <Checkbox
+            radius="md"
+            value="language"
+            disabled
+            styles={{ body: { alignItems: "center" } }}
+            label={
+              <CoderLanguageSelector
+                value={language}
+                onSelect={handlers.handleLanguage}
+              />
+            }
+          />
+          <Checkbox
+            radius="md"
+            value="appname"
+            disabled
+            styles={{ body: { alignItems: "center" } }}
+            label={
+              <TextInput
+                label="App name"
+                value={appName}
+                placeholder="App name"
+                onInput={handlers.handleAppName}
+                withAsterisk
+                rightSection={
+                  <ActionIcon onClick={handlers.clearAppName}>
+                    <IconX size={12} stroke={1} />
+                  </ActionIcon>
+                }
+              />
+            }
+          />
+          <Checkbox
+            radius="md"
+            value="questionCount"
+            disabled
+            styles={{ body: { alignItems: "center" } }}
+            label={
+              <TextInput
+                type="number"
+                label="Question count"
+                value={questionCount}
+                placeholder="Max question count"
+                onInput={handlers.handleQuestionCount}
+                withAsterisk
+              />
+            }
+          />
+          <Checkbox
+            radius="md"
+            value="chatGpt4"
+            color="red"
+            label="Using GPT4 may consume/blocked by your quota."
+            description="The result will be superior but please proceed with caution."
+            onClick={handlers.toggleGpt4Chat}
+          />
+        </Stack>
+      </Checkbox.Group>
+
+      <Button
+        style={{ alignSelf: "flex-end" }}
+        onClick={handlers.handlePrepared}
+        disabled={!prepared}
+        leftIcon={<IconPlayerPlay />}
+      >
+        Start
+      </Button>
+    </Stack>
+  );
+};
diff --git a/src/comp/modals/CoderModal2.tsx b/src/comp/modals/CoderModal2.tsx
new file mode 100644
index 0000000..b310dfd
--- /dev/null
+++ b/src/comp/modals/CoderModal2.tsx
@@ -0,0 +1,117 @@
+import { useCoder } from "@/lib/hooks/useCoder2";
+import { ClassNames } from "@emotion/react";
+import {
+  ActionIcon,
+  Button,
+  Group,
+  Indicator,
+  Modal,
+  Paper,
+  Text,
+  Tooltip,
+} from "@mantine/core";
+import { useDisclosure, useToggle } from "@mantine/hooks";
+import { IconArrowBackUp, IconCode, IconX } from "@tabler/icons-react";
+import { useEffect } from "react";
+import { Coder2Files } from "../coder2/Files";
+import { Coder2Main } from "../coder2/Main";
+import { Coder2Prepare } from "../coder2/Prepare";
+
+export const CoderModal2 = () => {
+  const [askClose, askCloseHandler] = useToggle();
+  const [opened, modalHandlers] = useDisclosure(false);
+  const [step, reset, files] = useCoder((s) => [
+    s.step,
+    s.handlers.reset,
+    s.files,
+  ]);
+
+  useEffect(() => reset, [opened]);
+
+  return (
+    <>
+      <Tooltip label="Coder (beta)" withArrow>
+        <ActionIcon
+          onClick={modalHandlers.open}
+          size="sm"
+          color="gray"
+          variant="filled"
+          radius="xl"
+        >
+          <IconCode size={14} />
+        </ActionIcon>
+      </Tooltip>
+
+      <Modal
+        opened={askClose}
+        onClose={askCloseHandler}
+        size="xs"
+        title={
+          <Text size="xl" fw={500}>
+            Are you sure you want to close Coder?
+          </Text>
+        }
+        centered
+      >
+        <Group noWrap spacing="xs" position="apart">
+          <Button
+            variant="subtle"
+            color="gray"
+            onClick={() => askCloseHandler(false)}
+            leftIcon={<IconArrowBackUp />}
+          >
+            Cancel
+          </Button>
+          <Button
+            variant="subtle"
+            color="red"
+            onClick={() => (modalHandlers.close(), askCloseHandler(false))}
+            leftIcon={<IconX />}
+          >
+            Close
+          </Button>
+        </Group>
+      </Modal>
+      <ClassNames>
+        {({ css }) => (
+          <Modal
+            opened={opened && !askClose}
+            onClose={askCloseHandler}
+            title={
+              <Text size="xl" fw={500}>
+                ChatGPT Coder
+              </Text>
+            }
+            size="xl"
+            overlayProps={{ blur: 1 }}
+            closeOnClickOutside
+            closeOnEscape
+            centered
+            className={css`
+              user-select: none;
+              input,
+              textarea {
+                user-select: initial;
+              }
+              [type="checkbox"]:checked {
+                background-image: initial;
+              }
+            `}
+          >
+            <Group align="stretch" h="70vh" noWrap>
+              {files.length && (
+                <Paper p="xs" style={{ flex: 1 }}>
+                  <Coder2Files />
+                </Paper>
+              )}
+              <Paper p="xs" style={{ flex: 3 }}>
+                {step === 1 && <Coder2Prepare />}
+                {step === 2 && <Coder2Main />}
+              </Paper>
+            </Group>
+          </Modal>
+        )}
+      </ClassNames>
+    </>
+  );
+};
diff --git a/src/comp/modals/SerializerModal.tsx b/src/comp/modals/SerializerModal.tsx
index 941e39e..573d7e8 100644
--- a/src/comp/modals/SerializerModal.tsx
+++ b/src/comp/modals/SerializerModal.tsx
@@ -1,11 +1,41 @@
-import { Modal, Paper, Stack, Text } from "@mantine/core";
+import { safeParseJson } from "@/lib/utils";
+import {
+  Group,
+  Modal,
+  Paper,
+  ScrollArea,
+  Stack,
+  Text,
+  TextInput,
+} from "@mantine/core";
+import { useLocalStorage } from "@mantine/hooks";
+import { ChangeEvent, useCallback } from "react";
 
 type Props = {
   opened: boolean;
   data: [boolean, string][];
   onClose(): void;
 };
+const DEFAULT = ["### User:", "### Assistant:"];
 export const SerializerModal = ({ opened, data, onClose }: Props) => {
+  const [strNames, setStrNames] = useLocalStorage({
+    key: "serializer",
+    defaultValue: JSON.stringify(DEFAULT),
+  });
+  const [user, assistant] = safeParseJson(strNames, DEFAULT);
+  const handleInput = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      const v = e.currentTarget.value;
+      const idx = parseInt(e.currentTarget.getAttribute("data-idx") || "0", 10);
+      setStrNames((p) => {
+        const nP = [...safeParseJson(p, DEFAULT)];
+        nP[idx] = v;
+        return JSON.stringify(nP);
+      });
+    },
+    [setStrNames]
+  );
+
   return (
     <Modal
       opened={opened}
@@ -19,23 +49,41 @@ export const SerializerModal = ({ opened, data, onClose }: Props) => {
     >
       <Modal.Body>
         <Stack spacing="xs">
-          {data.map(([isUser, text], idx) => {
-            return (
-              <Paper
-                key={idx}
-                p="md"
-                maw="80%"
-                style={{
-                  whiteSpace: "pre-wrap",
-                  alignSelf: isUser ? "flex-end" : "flex-start",
-                }}
-                withBorder
-              >
-                <Text size="md">{isUser ? "### User:" : "### Assistant:"}</Text>
-                <Text size="sm">{text}</Text>
-              </Paper>
-            );
-          })}
+          <Group spacing="xs" noWrap align="stretch">
+            <TextInput
+              label="User"
+              value={user}
+              onInput={handleInput}
+              data-idx="0"
+            />
+            <TextInput
+              label="Assistant"
+              value={assistant}
+              onInput={handleInput}
+              data-idx="1"
+            />
+          </Group>
+          <Paper p="md" withBorder component={ScrollArea} h="80vh">
+            <Stack spacing="xs">
+              {data.map(([isUser, text], idx) => {
+                return (
+                  <Paper
+                    key={idx}
+                    p="md"
+                    maw="80%"
+                    style={{
+                      whiteSpace: "pre-wrap",
+                      alignSelf: isUser ? "flex-end" : "flex-start",
+                    }}
+                    withBorder
+                  >
+                    <Text size="md">{isUser ? user : assistant}</Text>
+                    <Text size="sm">{text}</Text>
+                  </Paper>
+                );
+              })}
+            </Stack>
+          </Paper>
         </Stack>
       </Modal.Body>
     </Modal>
diff --git a/src/comp/modals/TokenReaderModal.tsx b/src/comp/modals/TokenReaderModal.tsx
index 0af6b51..256dd73 100644
--- a/src/comp/modals/TokenReaderModal.tsx
+++ b/src/comp/modals/TokenReaderModal.tsx
@@ -26,6 +26,7 @@ import {
   IconX,
 } from "@tabler/icons-react";
 import { Fragment, useCallback, useMemo, useState } from "react";
+import { Balancer } from "react-wrap-balancer";
 
 const checkBr = (char: string | number) =>
   char === "\n" || char === "\n\n"
@@ -284,12 +285,12 @@ export const TokenReaderModal = ({
               </Button>
               <Tooltip
                 label={
-                  <Text size="xs" align="center">
-                    Save tokens by trimming off trailing spaces and
-                    <br />
-                    merging CRLF tokens with the least change of layout
+                  <Text component={Balancer} size="xs" align="center">
+                    Save tokens by trimming off trailing spaces and merging CRLF
+                    tokens with the least change of layout
                   </Text>
                 }
+                style={{ maxWidth: 400 }}
                 withArrow
                 position="bottom"
                 withinPortal
@@ -305,12 +306,12 @@ export const TokenReaderModal = ({
               </Tooltip>
               <Tooltip
                 label={
-                  <Text size="xs" align="center">
-                    May shift layout & may leave a leading space
-                    <br />
-                    but still saves more tokens
+                  <Text component={Balancer} size="xs" align="center">
+                    May shift layout & may leave a leading space but still saves
+                    more tokens
                   </Text>
                 }
+                style={{ maxWidth: 400 }}
                 withArrow
                 position="bottom"
                 withinPortal
diff --git a/src/comp/workers/ClickThrougher.tsx b/src/comp/workers/ClickThrougher.tsx
index c48ea4e..75fec2c 100644
--- a/src/comp/workers/ClickThrougher.tsx
+++ b/src/comp/workers/ClickThrougher.tsx
@@ -1,60 +1,59 @@
+import { useApplyClassName } from "@/lib/hooks/useApplyClassName";
+import { store } from "@/lib/hooks/workers/useElements";
 import { ClassNames } from "@emotion/react";
-import { useLayoutEffect } from "react";
 
-const ClickThroughWorker = ({
-  parent,
+const Worker = ({
   className,
+  parent,
 }: {
-  parent: HTMLDivElement;
+  parent: HTMLElement;
   className: string;
 }) => {
-  useLayoutEffect(() => {
-    if (parent.classList.contains(className)) return;
-    parent.classList.add(className);
-    return () => parent.classList.remove(className);
-  }, [className, parent]);
+  useApplyClassName(parent, className);
   return null;
 };
-
-export const ClickThrougher = ({ parent }: { parent: HTMLDivElement }) => {
+export const ClickThrougher = () => {
+  const [node] = store((s) => [s.main.form?.parentElement]);
   return (
     <ClassNames>
-      {({ css }) => (
-        <ClickThroughWorker
-          parent={parent}
-          className={css`
-            &,
-            div {
-              pointer-events: none;
-              button,
-              textarea,
-              .rounded-xl {
-                pointer-events: auto;
-              }
-            }
-            form + div {
+      {({ css }) =>
+        node ? (
+          <Worker
+            parent={node}
+            className={css`
               &,
               div {
-                pointer-events: auto;
-                user-select: none;
-              }
-              input {
-                user-select: text;
+                pointer-events: none;
+                button,
+                textarea,
+                .rounded-xl {
+                  pointer-events: auto;
+                }
               }
-            }
-            .cgpt-agmt {
-              letter-spacing: -1px;
-              margin-bottom: -0.4rem;
-              input[type="checkbox"] {
-                display: none;
+              form + div {
+                &,
+                div {
+                  pointer-events: auto;
+                  user-select: none;
+                }
+                input {
+                  user-select: text;
+                }
               }
-              [data-position="top"] {
-                letter-spacing: initial;
+              .cgpt-agmt {
+                letter-spacing: -1px;
+                margin-bottom: -0.4rem;
+                input[type="checkbox"] {
+                  display: none;
+                }
+                [data-position="top"] {
+                  letter-spacing: initial;
+                }
               }
-            }
-          `}
-        />
-      )}
+            `}
+          />
+        ) : null
+      }
     </ClassNames>
   );
 };
diff --git a/src/comp/workers/ContinueClicker.tsx b/src/comp/workers/ContinueClicker.tsx
index 938e50c..ee13509 100644
--- a/src/comp/workers/ContinueClicker.tsx
+++ b/src/comp/workers/ContinueClicker.tsx
@@ -1,53 +1,32 @@
+import { useContinueClicker } from "@/lib/hooks/workers/useContinueClicker";
 import { Portal } from "@mantine/core";
-import { useInterval } from "@mantine/hooks";
-import { IconHandStop, IconPlayerTrackNext } from "@tabler/icons-react";
-import { useEffect, useRef, useState } from "react";
+import { IconPlayerStop, IconPlayerTrackNext } from "@tabler/icons-react";
 
-type Props = { node: HTMLElement };
-
-const DEFAULT = 50;
-export const ContinueClicker = ({ node }: Props) => {
-  const [seconds, setSeconds] = useState(DEFAULT);
-  const { start, stop } = useInterval(() => setSeconds((s) => s - 1), 100);
-  const orgTextRef = useRef<string | null>(null);
-  const parent = node.parentElement!;
-  const stopped = seconds > DEFAULT;
-
-  useEffect(() => {
-    orgTextRef.current = node.innerHTML;
-    setSeconds(DEFAULT);
-    node.innerHTML = "";
-    start();
-    return stop;
-  }, []);
-
-  useEffect(() => {
-    if (seconds > DEFAULT) return;
-    if (seconds <= 0) {
-      node.click();
-    }
-  }, [seconds]);
+export const ContinueWorker = () => {
+  const [seconds, stop, node, container] = useContinueClicker();
   return (
     <>
-      {!stopped && (
-        <Portal target={parent} style={{ display: "inline-flex" }}>
+      {node ? (
+        <Portal target={node}>
+          <div className="flex w-full gap-2 items-center justify-center">
+            <IconPlayerTrackNext stroke={1} size={16} />
+            {seconds}
+          </div>
+        </Portal>
+      ) : null}
+      {container ? (
+        <Portal target={container}>
           <button
-            className={node.className}
-            onClick={() => (stop(), setSeconds(DEFAULT * 2))}
+            className="btn relative btn-neutral -z-0 border-0 md:border"
+            onClick={stop}
           >
-            <IconHandStop stroke={1} size={16} style={{ marginRight: 6 }} />
-            Cancel
+            <div className="flex w-full gap-2 items-center justify-center">
+              <IconPlayerStop stroke={1} size={16} />
+              Stop
+            </div>
           </button>
         </Portal>
-      )}
-      <Portal
-        target={node}
-        style={{ display: "inline-flex", alignItems: "center" }}
-      >
-        <IconPlayerTrackNext stroke={1} size={16} style={{ marginRight: 6 }} />
-        Continue
-        {!stopped && ` in ${(seconds / 10).toFixed(1)}`}
-      </Portal>
+      ) : null}
     </>
   );
 };
diff --git a/src/comp/workers/ConversationMenu.tsx b/src/comp/workers/ConversationMenu.tsx
index 7c581ca..2f76cb5 100644
--- a/src/comp/workers/ConversationMenu.tsx
+++ b/src/comp/workers/ConversationMenu.tsx
@@ -1,216 +1,11 @@
-import { useSelector } from "@/lib/hooks/useTarget";
+import { useConversationMenu } from "@/lib/hooks/workers/useConversationMenu";
 import { ClassNames } from "@emotion/react";
-import { MantineProvider, Menu, Portal, Text } from "@mantine/core";
-import { useClickOutside } from "@mantine/hooks";
-import { notifications } from "@mantine/notifications";
-import {
-  IconCaretUp,
-  IconCopy,
-  IconEdit,
-  IconMessage,
-  IconShare2,
-  IconTrash,
-  IconX,
-} from "@tabler/icons-react";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { MantineProvider, Menu, Portal } from "@mantine/core";
+import { IconCaretUp, IconCopy, IconEdit, IconMessage, IconShare2, IconTrash, IconX } from "@tabler/icons-react";
 
-const regDel = /^Delete ".+"\?$/;
-const regNew = /^New chat$/;
 export const ConversationMenu = () => {
-  const [target, setTarget] = useState<HTMLAnchorElement | null>(null);
-  const [pos, setPos] = useState({ x: 0, y: 0 });
-  const handlerRef = useRef((el: HTMLAnchorElement, x: number, y: number) => {
-    setTarget(el);
-    setPos({ x, y });
-  });
-  const elNew = useSelector<HTMLElement>("nav a.flex-grow", regNew);
-
-  const ref = useClickOutside(() => setTarget(null));
-  const isDeleting = regDel.test(target?.textContent || "");
-  const isOpened = !!(target && target.classList.contains("bg-gray-800"));
-
-  const handlers = useMemo(
-    () =>
-      target
-        ? {
-            wait: async (
-              parent: HTMLElement | Document,
-              selector: string,
-              length: number = 3
-            ) => {
-              let els: NodeListOf<HTMLButtonElement>;
-              let t = Date.now();
-              do {
-                // wait for buttons to appear
-                await new Promise((r) => setTimeout(r, 10));
-                els = parent.querySelectorAll(selector);
-              } while (
-                els.length !== length &&
-                !!(parent === document || parent.parentElement) &&
-                t + 2000 > Date.now()
-              );
-              return els;
-            },
-            bail: () => {
-              notifications.update({
-                id: "ctx",
-                icon: <IconX />,
-                color: "orange",
-                title: "Failed due to a list change",
-                message: "Please try again.",
-              });
-            },
-            openMenu: () => {
-              const srItem = document.querySelectorAll(
-                ".sr-only"
-              ) as NodeListOf<HTMLSpanElement>;
-              srItem.forEach((el) => {
-                if (el.textContent === "Open sidebar") el.click();
-              });
-            },
-            click: () => target.click(),
-            edit: async () => {
-              const parent = target.parentElement!;
-
-              target.click();
-              const els = await handlers.wait?.(parent, "button", 3);
-              if (!els?.length) return handlers.bail?.();
-              const edit = els[0];
-              edit.click();
-            },
-            share: async () => {
-              const parent = target.parentElement!;
-              target.click();
-              const els = await handlers.wait?.(parent, "button", 3);
-              if (!els?.length) return handlers.bail?.();
-              const share = els[1];
-              const hasPopup = share.getAttribute("aria-haspopup");
-              if (!hasPopup) return;
-              share.click();
-            },
-            copyUrl: async () => {
-              notifications.show({
-                id: "ctx",
-                message: "Copying URL...",
-              });
-              const parent = target.parentElement!;
-              target.click();
-              const els = await handlers.wait?.(parent, "button", 3);
-              if (!els?.length) return handlers.bail?.();
-              const url = location.href;
-              navigator.clipboard.writeText(url);
-              notifications.show({
-                icon: <IconCopy />,
-                color: "blue",
-                title: "Copied URL",
-                message: url,
-              });
-            },
-            pullToTop: async () => {
-              notifications.show({
-                id: "ctx",
-                message: "Pulling item up...",
-              });
-              const parent = target.parentElement!;
-              target.click();
-              const els = await handlers.wait?.(parent, "button", 3);
-              if (!els?.length) return handlers.bail?.();
-              const edit = els[0];
-              edit.click();
-              const elsInput = await handlers.wait?.(parent, "input", 1);
-              const el = elsInput?.[0];
-              if (!el) return handlers.bail?.();
-              if (el.value.endsWith(" ")) el.value = el.value.slice(0, -1);
-              else el.value = el.value + " ";
-              el.dispatchEvent(new Event("input", { bubbles: true }));
-              const elsBtn = await handlers.wait?.(parent, "button", 2);
-              if (!elsBtn?.length) return handlers.bail?.();
-              const btn = elsBtn?.[0];
-              btn?.click();
-              notifications.show({
-                icon: <IconCaretUp />,
-                color: "blue",
-                title: "Pulled to top",
-                message: (
-                  <Text>
-                    <Text fw={700}>{target.textContent}</Text>will be at the top
-                    of the list soon or another.
-                  </Text>
-                ),
-              });
-            },
-            delete: async () => {
-              notifications.show({
-                id: "ctx",
-                message: "Deleting an item...",
-              });
-              const parent = target.parentElement!;
-              const title = target.textContent;
-              target.click();
-              const els = await handlers.wait?.(parent, "button", 3);
-              if (!els?.length) return handlers.bail?.();
-              const del = els[els.length - 1];
-              del.click();
-              const els2 = await handlers.wait?.(parent, "button", 2);
-              if (!els2?.length) return handlers.bail?.();
-              const confirm = els2[0];
-              confirm.click();
-              notifications.show({
-                icon: <IconTrash />,
-                color: "red",
-                title: "Deleted",
-                message: title,
-              });
-            },
-            close: async () => {
-              elNew?.click();
-            },
-          }
-        : {},
-    [target]
-  );
-
-  useEffect(() => {
-    const handler = (e: MouseEvent) => {
-      const x = e.pageX;
-      const y = e.pageY;
-      let el = e.target as HTMLElement | null;
-      while (el) {
-        if (el.tagName === "A") {
-          if (el.classList.contains("text-sm")) {
-            return; // not a message link
-          }
-          break;
-        }
-        el = el.parentElement;
-      }
-      if (!el) return;
-      // me being lazy to traverse the dom
-      el.classList.add("cgpt-agmt-ctx");
-      const verifiedEl = document.querySelector(
-        "nav a.cgpt-agmt-ctx"
-      ) as HTMLElement | null;
-      el.classList.remove("cgpt-agmt-ctx");
-      if (!verifiedEl) return;
-
-      e.preventDefault();
-      handlerRef.current(verifiedEl as HTMLAnchorElement, x, y);
-    };
-    document.body.addEventListener("contextmenu", handler);
-    return () => (
-      document.body.removeEventListener("contextmenu", handler), setTarget(null)
-    );
-  }, []);
-
-  useEffect(() => {
-    if (!target) return;
-    const els = document.querySelectorAll(
-      "nav .overflow-y-auto"
-    ) as NodeListOf<HTMLElement>;
-    els.forEach((el) => (el.style.overflowY = "hidden"));
-    return els.forEach((el) => (el.style.overflowY = "auto"));
-  }, [target]);
-
+  const { target, pos, ref, isDeleting, isOpened, setTarget, handlers } =
+    useConversationMenu();
   return target ? (
     <ClassNames>
       {({ css }) => (
diff --git a/src/comp/workers/EditWatcher.tsx b/src/comp/workers/EditWatcher.tsx
deleted file mode 100644
index 27a7b5f..0000000
--- a/src/comp/workers/EditWatcher.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { Group, Portal } from "@mantine/core";
-import { useRef } from "react";
-import { InputWatcher } from "./InputWatcher";
-import { SelectionWatcher } from "./SelectionWatcher";
-import { ClassNames } from "@emotion/react";
-
-type Props = { node: HTMLElement };
-
-export const EditWatcher = ({ node }: Props) => {
-  const parent = node.parentElement!;
-  const textareaRef = useRef<HTMLTextAreaElement>(
-    parent.querySelector("textarea")
-  );
-  const portalRef = useRef<HTMLDivElement>(parent.querySelector("div"));
-
-  return (
-    <ClassNames>
-      {({ css }) =>
-        portalRef.current && (
-          <Portal
-            target={portalRef.current}
-            className={css`
-              position: relative;
-              display: flex;
-              align-items: center;
-            `}
-          >
-            <Group spacing="xs" m={4} align="center" noWrap position="center">
-              {textareaRef.current && (
-                <InputWatcher textarea={textareaRef.current} />
-              )}
-              {textareaRef.current && (
-                <SelectionWatcher textarea={textareaRef.current} isEdit />
-              )}
-            </Group>
-          </Portal>
-        )
-      }
-    </ClassNames>
-  );
-};
diff --git a/src/comp/workers/InputWatcher.tsx b/src/comp/workers/InputWatcher.tsx
deleted file mode 100644
index c2af198..0000000
--- a/src/comp/workers/InputWatcher.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import { encode } from "@/lib/gpt3TokenizerUnobfuscated";
-import { ActionIcon, Badge } from "@mantine/core";
-import { useDebouncedValue, useLocalStorage } from "@mantine/hooks";
-import { notifications } from "@mantine/notifications";
-import { IconCircleArrowUp, IconCoin, IconRotate2 } from "@tabler/icons-react";
-import {
-  MouseEvent,
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useState,
-} from "react";
-import { TokenReaderModal } from "../modals/TokenReaderModal";
-
-type Props = { textarea: HTMLTextAreaElement | null };
-export const InputWatcher = ({ textarea }: Props) => {
-  const [savedText, setSavedText] = useLocalStorage({
-    key: "prompt",
-    defaultValue: "",
-  });
-  const [text, setText] = useState(savedText);
-  const [debouncedText] = useDebouncedValue(text, 100);
-  const [openTokens, setOpenTokens] = useState(false);
-
-  // const length = useMemo(() => getTokenLength(debouncedText), [debouncedText]);
-  const tokens = useMemo(() => encode(debouncedText), [debouncedText]);
-
-  useEffect(
-    () => void (debouncedText && setSavedText(debouncedText)),
-    [debouncedText]
-  );
-
-  const handleBadgeClick = useCallback(
-    (e: MouseEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
-      const el = textarea;
-      if (!el) return;
-      if (el.value === savedText) return;
-      notifications.show({
-        icon: <IconRotate2 />,
-        color: "blue",
-        title: "Restored a recent prompt",
-        message: `Because they want you to forget the past everytime`,
-      });
-      el.value = savedText;
-      el.dispatchEvent(new Event("input", { bubbles: true }));
-      el.focus();
-    },
-    [savedText, textarea]
-  );
-  const handleTextOptimized = useCallback((text: string) => {
-    setText(text);
-    const el = textarea;
-    if (!el) return;
-    if (el.value === text) return;
-    el.value = text;
-    el.dispatchEvent(new Event("input", { bubbles: true }));
-  }, []);
-
-  useLayoutEffect(() => {
-    // listen for input
-    const el = textarea;
-    if (!el) return;
-    const handler = (e: Event) => {
-      const { value } = e.currentTarget as HTMLTextAreaElement;
-      if (e.type === "focus" && !value) return; // protect against accidental deletion
-      setText(value);
-    };
-    setText(el.value);
-    el.addEventListener("input", handler);
-    el.addEventListener("focus", handler);
-    return () => (
-      el.removeEventListener("input", handler),
-      el.removeEventListener("focus", handler)
-    );
-  }, [textarea]);
-
-  return (
-    <>
-      <Badge
-        color={tokens.length > 3000 ? "red" : "dark"}
-        size="xs"
-        style={{ overflow: "visible", padding: "11px 0", border: 0 }}
-        leftSection={
-          <ActionIcon
-            size="sm"
-            radius="xl"
-            variant="subtle"
-            onClick={handleBadgeClick}
-            title="Restore last text"
-            color="gray"
-          >
-            <IconCircleArrowUp size={12} />
-          </ActionIcon>
-        }
-        rightSection={
-          <ActionIcon
-            size="sm"
-            radius="xl"
-            variant="subtle"
-            disabled={!tokens.length}
-            onClick={() => setOpenTokens(true)}
-            title="Token visualizer"
-            color="gray"
-          >
-            <IconCoin size={12} />
-          </ActionIcon>
-        }
-      >
-        {tokens.length.toLocaleString()} Token{tokens.length > 1 && "s"}
-      </Badge>
-      <TokenReaderModal
-        tokens={tokens}
-        opened={openTokens}
-        onPromptChange={handleTextOptimized}
-        onCancel={() => setOpenTokens(false)}
-      />
-    </>
-  );
-};
diff --git a/src/comp/workers/MessageSerializer.tsx b/src/comp/workers/MessageSerializer.tsx
index fd69977..f8d15cf 100644
--- a/src/comp/workers/MessageSerializer.tsx
+++ b/src/comp/workers/MessageSerializer.tsx
@@ -1,29 +1,10 @@
-import { useSelectors } from "@/lib/hooks/useTarget";
-import { serializeMessageElement } from "@/lib/messageSerializer";
 import { ActionIcon, Tooltip } from "@mantine/core";
-import { IconMessages } from "@tabler/icons-react";
-import { useMemo, useState } from "react";
 import { SerializerModal } from "../modals/SerializerModal";
+import { IconMessages } from "@tabler/icons-react";
+import { useMessageSerializer } from "@/lib/hooks/workers/useMessageSerializer";
 
 export const MessageSerializer = () => {
-  const groupEls = useSelectors("main .flex-col .group") || [];
-  const [opened, setOpened] = useState(false);
-
-  const handlers = useMemo(
-    () => ({
-      close: () => setOpened(false),
-      open: () => setOpened(true),
-    }),
-    []
-  );
-  const data = useMemo(
-    () =>
-      groupEls.map(serializeMessageElement).filter(Boolean) as [
-        boolean,
-        string
-      ][],
-    [groupEls]
-  );
+  const { data, opened, handlers } = useMessageSerializer();
   return (
     <>
       {data && (
@@ -36,6 +17,7 @@ export const MessageSerializer = () => {
           color="gray"
           variant="filled"
           radius="xl"
+          disabled={!data.length}
         >
           <IconMessages size={14} />
         </ActionIcon>
diff --git a/src/comp/workers/MutationWatcher.tsx b/src/comp/workers/MutationWatcher.tsx
deleted file mode 100644
index b0578d1..0000000
--- a/src/comp/workers/MutationWatcher.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { useSelector, useSelectors } from "@/lib/hooks/useTarget";
-import { useEffect, useState } from "react";
-import { EditWatcher } from "./EditWatcher";
-import { ContinueClicker } from "./ContinueClicker";
-
-export const MutationWatcher = () => {
-  const continueEl = useSelector(
-    "form .h-full.justify-center button:nth-of-type(2)"
-  );
-  const editEls = useSelectors("main .group textarea + div");
-
-  const [t, setT] = useState(0);
-  const [mountT] = useState(Date.now());
-  const shouldWait = t - mountT < 3000;
-  useEffect(() => void setT(Date.now()), [continueEl]);
-
-  return (
-    <>
-      {!shouldWait && continueEl && <ContinueClicker node={continueEl} />}
-      {editEls.map((node, idx) => (
-        <EditWatcher key={`${idx}_${editEls.length}`} node={node} />
-      ))}
-    </>
-  );
-};
diff --git a/src/comp/workers/TextAreaAugmenter.tsx b/src/comp/workers/TextAreaAugmenter.tsx
new file mode 100644
index 0000000..dfabf5b
--- /dev/null
+++ b/src/comp/workers/TextAreaAugmenter.tsx
@@ -0,0 +1,149 @@
+import { store } from "@/lib/hooks/workers/useElements";
+import { useTextAreaAugmentaion } from "@/lib/hooks/workers/useTextarea";
+import {
+  ActionIcon,
+  Badge,
+  Group,
+  Portal,
+  Select,
+  Tooltip,
+} from "@mantine/core";
+import {
+  IconCircleArrowUp,
+  IconCodePlus,
+  IconCoin,
+  IconTrash,
+} from "@tabler/icons-react";
+import { memo } from "react";
+import { TokenReaderModal } from "../modals/TokenReaderModal";
+import { MacroAddModal } from "../modals/MacroAddModal";
+
+const Worker = ({
+  textarea,
+  isEdit,
+}: {
+  textarea: HTMLTextAreaElement;
+  isEdit: boolean;
+}) => {
+  const {
+    tokens,
+    handleBadgeClick,
+    openTokens,
+    setOpenTokens,
+    handleTextOptimized,
+    handleClearText,
+    json,
+    openAddmodal,
+    handleConfirm,
+    handleDelete,
+    open,
+    close,
+    selection,
+    items,
+    handleSelect,
+  } = useTextAreaAugmentaion(textarea);
+  return (
+    <>
+      <Badge
+        color={tokens.length > 3000 ? "red" : "dark"}
+        size="xs"
+        style={{ overflow: "visible", padding: "11px 0", border: 0 }}
+        leftSection={
+          <ActionIcon
+            size="sm"
+            radius="xl"
+            variant="subtle"
+            onClick={handleBadgeClick}
+            title="Restore last text"
+            color="gray"
+          >
+            <IconCircleArrowUp size={12} />
+          </ActionIcon>
+        }
+        rightSection={
+          <ActionIcon
+            size="sm"
+            radius="xl"
+            variant="subtle"
+            disabled={!tokens.length}
+            onClick={() => setOpenTokens(true)}
+            title="Token visualizer"
+            color="gray"
+          >
+            <IconCoin size={12} />
+          </ActionIcon>
+        }
+      >
+        {tokens.length.toLocaleString()} Token{tokens.length > 1 && "s"}
+      </Badge>
+      <TokenReaderModal
+        tokens={tokens}
+        opened={openTokens}
+        onPromptChange={handleTextOptimized}
+        onCancel={() => setOpenTokens(false)}
+      />
+      <Tooltip label="Clear text" withArrow>
+        <ActionIcon
+          size="sm"
+          color="gray"
+          variant="filled"
+          onClick={handleClearText}
+          radius="xl"
+        >
+          <IconTrash size={12} />
+        </ActionIcon>
+      </Tooltip>
+      <MacroAddModal
+        macros={json}
+        opened={openAddmodal}
+        onConfirm={handleConfirm}
+        onDelete={handleDelete}
+        onCancel={close}
+        initialPrompt={selection?.toString() || ""}
+      />
+      <Select
+        size="xs"
+        radius="lg"
+        placeholder="Macros"
+        searchable
+        nothingFound="No options"
+        data={items}
+        onChange={handleSelect}
+        style={{ maxWidth: 100 }}
+      />
+      {!isEdit && (
+        <Tooltip label="Add/edit macros" withArrow>
+          <ActionIcon
+            size="sm"
+            color="gray"
+            variant="filled"
+            onClick={open}
+            radius="xl"
+          >
+            <IconCodePlus size={12} />
+          </ActionIcon>
+        </Tooltip>
+      )}
+    </>
+  );
+};
+
+const styleH100 = { height: "100%" };
+
+export const TextAreaAugmenter = memo(() => {
+  const [textarea, edits] = store((s) => [s.main.textarea, s.edits]);
+  return (
+    <>
+      {textarea && <Worker textarea={textarea} isEdit={false} />}
+      {edits.map((edit, idx) => {
+        return (
+          <Portal target={edit.target} key={idx} style={styleH100}>
+            <Group noWrap spacing="xs" align="center" pl="xs" style={styleH100}>
+              <Worker textarea={edit.textarea} isEdit />
+            </Group>
+          </Portal>
+        );
+      })}
+    </>
+  );
+});
diff --git a/src/lib/elementPromises.ts b/src/lib/elementPromises.ts
index cb5ea9c..9f17def 100644
--- a/src/lib/elementPromises.ts
+++ b/src/lib/elementPromises.ts
@@ -50,6 +50,7 @@ export async function waitElement<
       } else {
         // found, wait for unmount but now text doesn't match
         if (!testText(tgtEl, textReg)) break;
+        await new Promise((r) => setTimeout(r, 100));
       }
     } else {
       // target status is matched
diff --git a/src/lib/hooks/useApplyClassName.ts b/src/lib/hooks/useApplyClassName.ts
new file mode 100644
index 0000000..388f5e7
--- /dev/null
+++ b/src/lib/hooks/useApplyClassName.ts
@@ -0,0 +1,13 @@
+import { useLayoutEffect } from "react";
+
+export const useApplyClassName = (
+  node: HTMLElement | null,
+  className: string
+) => {
+  useLayoutEffect(() => {
+    if (!node) return;
+    if (node.classList.contains(className)) return;
+    node.classList.add(className);
+    return () => node.classList.remove(className);
+  }, [className, node]);
+};
diff --git a/src/lib/hooks/useCoder2.ts b/src/lib/hooks/useCoder2.ts
new file mode 100644
index 0000000..d7d9c9e
--- /dev/null
+++ b/src/lib/hooks/useCoder2.ts
@@ -0,0 +1,458 @@
+import { notifications } from "@mantine/notifications";
+import { IconCheck, IconExclamationMark } from "@tabler/icons-react";
+import { ChangeEvent, MouseEvent, createElement } from "react";
+import { create } from "zustand";
+import { waitElement } from "../elementPromises";
+import { serializeMessageElement } from "../messageSerializer";
+import json5 from "json5";
+import { store } from "./workers/useElements";
+export type MemFile = {
+  path: string;
+  purpose: string;
+  content: string;
+  reviewed: boolean;
+};
+
+const PROMPTS = {
+  initial:
+    `You are a seasoned {{language}} developer. ` +
+    `Let's make {{appName}}.\n` +
+    `Let's begin with defining features. Ask me and get answers for up to {{count}} questions.\n` +
+    `Once I answer the questions, show me the whole list of a viable file structure without empty folders. Don't include folders as an item in the list.\n` +
+    `Please do not snip out details and list a whole list.\n` +
+    `The JSON5 format should look like this:
+\`\`\`json5
+[
+  {
+  'path': relativePath/filename.ext,
+  'reviewed': false,
+  'purpose': purpose-of-the-file,
+  'content': ''
+  },
+  ...
+]
+\`\`\`
+`,
+  startReview:
+    `Now considering my answer and the file structure you created, ` +
+    `we need to make a working code without further human intervention.\n` +
+    `Can you show me each file contents with their full relative path intact, ` +
+    `starting from the most important ones, never snipping out implementation details?\n` +
+    `
+  - Show me one file per a response. Do not show me multiple files in one response.
+  - The code you provided should work right away.
+  - The code you provided should be using easy to read yet very concise syntax whenever possible.
+  - When you don't have any remaining unreviewed files to show, just say "!DONE!".
+  - Otherwise, the answer format should be like this:
+    - \`relativePath/filename.ext\`: purpose-of-this-file
+  \`\`\`filetype
+  code-without-snipping
+  \`\`\`
+  `,
+  applyReview: `Show me the updated last file in the following format:
+  \`relativePath/filename.ext\`: purpose-of-this-file
+  \`\`\`filetype
+  code-without-snipping
+  \`\`\` 
+  `,
+  continueReview: `Mark this file as reviewed and continue to the next file. If there's nothing left, just say !DONE!.`,
+} as const;
+
+const TOKENS_FILE_STRUCTURE = [
+  "```json5",
+  "path",
+  "reviewed",
+  "purpose",
+  "content",
+  "```",
+] as const;
+const regFileStart = /[`*]+([^`*]+)[`*]+\s?:\s*([^`]+)\n+`{3}([^\n]+)\n/;
+
+const initialState = {
+  step: 1,
+  files: [] as MemFile[],
+  isChatNew: false,
+  isChatGpt4: false,
+  appName: "a click counter app",
+  language: "",
+  questionCount: 5,
+  currentFile: "",
+  currentMessage: "",
+  isBusy: false,
+  questions: [] as string[],
+  answers: [] as string[],
+  userInput: "",
+  conversations: [] as string[],
+};
+
+type State = typeof initialState & {
+  computed: {
+    prepared: boolean;
+    prepareValues: string[];
+    promptInitial: string;
+  };
+  handlers: {
+    handleLanguage: (language: string) => void;
+    handleQuestionCount: (e: ChangeEvent<HTMLInputElement>) => void;
+    handleAppName: (e: ChangeEvent<HTMLInputElement>) => void;
+    clearAppName: () => void;
+    setFileContent: (path: string, content: string) => void;
+    openNewChat: () => void;
+    toggleGpt4Chat: () => void;
+    handlePrepared: () => void;
+    handleFileSelect: (e: MouseEvent<HTMLButtonElement>) => void;
+    handleAnswerInput: (e: ChangeEvent<HTMLInputElement>) => void;
+    handleUserInput: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+    stopOrRegenerate: (isStop: boolean) => Promise<boolean | Error>;
+    parseMessage: (text: string) => void;
+    submitResponse: () => Promise<string | Error>;
+    submitInitialPrompt: () => Promise<string | Error>;
+    onFinish: () => void;
+    parseFiles: (text: string) => void;
+    sendPrompt: (prompt: string) => Promise<string | Error>;
+    receiveStream: () => Promise<void>;
+    finalizeStream: () => string;
+    reset: () => void;
+  };
+};
+
+export const useCoder = create<State>()((set, get) => {
+  const computed = {
+    get prepared() {
+      const { isChatNew, appName, language, questionCount } = get();
+      return !!(isChatNew && appName && language && questionCount);
+    },
+    get prepareValues() {
+      const { isChatNew, appName, language, questionCount, isChatGpt4 } = get();
+      return [
+        isChatNew ? "newchat" : "",
+        appName ? "appname" : "",
+        language ? "language" : "",
+        questionCount ? "questionCount" : "",
+        isChatGpt4 ? "chatGpt4" : "",
+      ].filter(Boolean);
+    },
+    get promptInitial() {
+      const { language, questionCount: count, appName } = get();
+      return PROMPTS.initial
+        .replace("{{language}}", language)
+        .replace("{{count}}", count.toString())
+        .replace("{{appName}}", appName);
+    },
+    get promptStartReview() {
+      return PROMPTS.startReview;
+    },
+    get promptReview() {
+      const { answers, userInput, files } = get();
+      return [
+        ...answers.map((a, i) => `${i + 1}. ${a || "Not sure."}`),
+        userInput,
+        files.length &&
+          (userInput ? PROMPTS.applyReview : PROMPTS.continueReview),
+      ]
+        .filter(Boolean)
+        .join("\n");
+    },
+  };
+
+  const handlers = {
+    handleLanguage: (language: string) => set({ language }),
+    handleQuestionCount: (e: ChangeEvent<HTMLInputElement>) =>
+      set({ questionCount: parseInt(e.target.value, 10) || 0 }),
+    handleAppName: (e: ChangeEvent<HTMLInputElement>) =>
+      set({ appName: e.target.value }),
+    clearAppName: () => set({ appName: "" }),
+    setFileContent: (path: string, content: string) => {
+      const { files: _files } = get();
+      const files = [..._files];
+      const file = files.find((f) => f.path === path);
+      if (file) {
+        file.content = content;
+        set({ files });
+      }
+    },
+    openNewChat: () => {
+      const btnNew = store.getState().button.new;
+      btnNew?.click();
+    },
+    toggleGpt4Chat: () => {
+      const btnGpt3 = store.getState().button.gpt3;
+      const btnGpt4 = store.getState().button.gpt4;
+      const { isChatGpt4 } = get();
+      const el = isChatGpt4 ? btnGpt3 : btnGpt4;
+      (el as HTMLElement)?.click();
+    },
+    handlePrepared: () => {
+      const prepared = get().computed.prepared;
+      if (!prepared) return;
+      set({ step: 2 });
+      // trigger the chat
+      handlers.submitInitialPrompt();
+    },
+    handleFileSelect: (e: MouseEvent<HTMLButtonElement>) => {
+      e.preventDefault();
+      const currentFile = e.currentTarget.getAttribute("data-path");
+      if (!currentFile) return;
+      set({ currentFile });
+    },
+    handleAnswerInput: (e: ChangeEvent<HTMLInputElement>) => {
+      const { answers: _answers } = get();
+      const answers = [..._answers];
+      const idx = parseInt(e.target.getAttribute("data-idx") || "0", 10);
+      const value = e.target.value;
+      answers[idx] = value;
+      set({ answers });
+    },
+    handleUserInput: (e: ChangeEvent<HTMLTextAreaElement>) => {
+      const userInput = e.target.value;
+      set({ userInput });
+    },
+    reset: () => set(initialState),
+
+    sendPrompt: async (prompt: string): Promise<string | Error> => {
+      try {
+        const isBusy = get().isBusy;
+        if (isBusy) throw new Error("Another request is in progress.");
+        set({ isBusy: true, questions: [], answers: [] });
+        const [elTxt, elSubmit] = await Promise.all([
+          await waitElement({ selector: "form textarea" }, true),
+          await waitElement({ selector: "form textarea + button" }, true),
+        ]);
+        if (!elTxt || !elSubmit) throw new Error("no textarea found");
+        (elTxt as HTMLTextAreaElement).value = prompt;
+        (elTxt as HTMLTextAreaElement).dispatchEvent(
+          new Event("input", { bubbles: true })
+        );
+        elSubmit.click();
+        set((s) => ({ conversations: [...s.conversations, prompt, ""] }));
+        await new Promise((r) => setTimeout(r, 500));
+
+        await handlers.receiveStream();
+        const message = handlers.finalizeStream();
+        notifications.show({
+          icon: createElement(IconCheck),
+          color: "green",
+          title: "Coder",
+          message: `Successfully submitted a message.`,
+        });
+        return message;
+      } catch (e) {
+        if (e instanceof Error) {
+          notifications.show({
+            title: "Error",
+            message: e.message,
+            color: "red",
+            icon: createElement(IconExclamationMark),
+          });
+          return e;
+        }
+        return new Error("Unknown error.");
+      } finally {
+        set({ isBusy: false });
+      }
+    },
+
+    receiveStream: async () => {
+      let completed = false;
+      while (!completed) {
+        let elStreaming: HTMLElement | null;
+        while (
+          (elStreaming = await waitElement(
+            { selector: "div.result-streaming", timeout: 200 },
+            true
+          ))
+        ) {
+          const interim = serializeMessageElement(elStreaming);
+          if (!interim)
+            throw new Error("Failed to parse the interim response.");
+          const [, currentMessage] = interim;
+          set({ currentMessage });
+          await new Promise((r) => setTimeout(r, 200));
+        }
+
+        const elContinue = await waitElement(
+          { selector: "form .flex button + button", timeout: 200 },
+          true
+        );
+        if (!elContinue) break;
+      }
+    },
+
+    parseMessage: (text: string) => {
+      const { conversations } = get();
+      const isUser = conversations.length % 2;
+      if (isUser) return;
+
+      // update file structure and auto start review process
+      if (TOKENS_FILE_STRUCTURE.every((t) => text.includes(t))) {
+        const start =
+          text.indexOf(TOKENS_FILE_STRUCTURE[0]) +
+          TOKENS_FILE_STRUCTURE[0].length;
+        const end = start + text.slice(start).indexOf(TOKENS_FILE_STRUCTURE[5]);
+
+        handlers.parseFiles(text.slice(start, end));
+
+        if (get().files.length === 0) {
+          // could not parse anything.
+          return handlers.stopOrRegenerate(false);
+        } else {
+          // file list received. continue to review.
+          return new Promise((r) => {
+            setTimeout(
+              () => handlers.sendPrompt(computed.promptStartReview).then(r),
+              10
+            );
+          });
+        }
+      }
+
+      // update questions and prepare empty answers
+      const regQuestion =
+        /^\d+\. ((?:.)+[?.])\s*|((?:(?:Could|Can) you|(?:Is|Are) there)(?:[^?.])+[?.])\s*$/gim;
+      const questions = Array.from(
+        text.matchAll(regQuestion),
+        (match) => match[1] || match[2]
+      );
+      set({
+        questions,
+        answers: Array.from({ length: questions.length }).fill("") as string[],
+      });
+
+      // update file content
+      let txt = text;
+      while (true) {
+        const match = txt.match(regFileStart);
+        if (!match) break;
+        const [full, path] = match;
+        const start = txt.indexOf(full) + full.length;
+        const end = start + txt.slice(start).indexOf("```");
+        const content = txt.slice(start, end);
+        txt = txt.slice(end + 3);
+        set((s) => {
+          const newState: State = {
+            ...s,
+            currentFile: path,
+            files: [...s.files],
+          };
+          const idx = newState.files.findIndex((f) => path === f.path);
+          newState.files[idx] = {
+            ...newState.files[idx],
+            reviewed: true,
+            content,
+          };
+          return newState;
+        });
+      }
+
+      // detect !DONE!.
+      const currFiles = get().files;
+      const isDoneFound = /!DONE!/.test(text);
+      const unReviewedFile = currFiles.find((f) => !f.reviewed);
+      const unReadFile = currFiles.find((f) => !f.content);
+      if (isDoneFound) {
+        if (unReviewedFile || unReadFile) {
+          // there are still unreviewed files. try again.
+          setTimeout(() => handlers.sendPrompt(computed.promptReview), 10);
+        } else {
+          return handlers.onFinish();
+        }
+      }
+    },
+
+    parseFiles: (text: string) => {
+      try {
+        set({
+          files: json5
+            .parse(text)
+            .map((file: MemFile) => ({ ...file, reviewed: false })),
+        });
+      } catch (e) {
+        if (e instanceof Error)
+          notifications.show({
+            icon: createElement(IconExclamationMark),
+            color: "red",
+            title: "Failed to parse file structure.",
+            message: e.message,
+          });
+        set({ files: [] });
+      }
+    },
+
+    stopOrRegenerate: async (isStop: boolean): Promise<boolean | Error> => {
+      try {
+        const btnStop = store.getState().button.stop;
+        const btnRegen = store.getState().button.regen;
+        const el = isStop ? btnStop : btnRegen;
+        if (!el) throw new Error("no button found");
+        const text = el.textContent;
+        const isRegen = text === "Regenerate response";
+        if (isStop !== isRegen) {
+          el.click();
+          if (isRegen) {
+            try {
+              set((s) => ({
+                conversations: [...s.conversations.slice(0, -1), ""],
+                isBusy: true,
+              }));
+
+              await handlers.receiveStream();
+              handlers.finalizeStream();
+            } finally {
+              set({ isBusy: false });
+            }
+          }
+          notifications.show({
+            icon: createElement(IconCheck),
+            title: "Success",
+            color: "green",
+            message: `Successfully ${isRegen ? "restarted" : "stopped"}.`,
+          });
+        }
+        return isRegen;
+      } catch (e) {
+        if (e instanceof Error) {
+          notifications.show({
+            icon: createElement(IconExclamationMark),
+            color: "red",
+            title: "Failed to stop nor regenerate response.",
+            message: e.message,
+          });
+        }
+      }
+      return new Error("Unknown error.");
+    },
+    submitInitialPrompt: () => {
+      return handlers.sendPrompt(computed.promptInitial);
+    },
+    submitResponse: async (): Promise<string | Error> => {
+      const prompt = computed.promptReview;
+      set({ userInput: "", questions: [], answers: [] });
+      const response = await handlers.sendPrompt(prompt);
+
+      return response;
+    },
+
+    finalizeStream: () => {
+      const elResponses = document.querySelectorAll("main .flex-col .group");
+      if (!elResponses.length) throw new Error("No response found.");
+      const elLastResponse = elResponses[elResponses.length - 1];
+      const final = serializeMessageElement(elLastResponse as HTMLElement);
+      if (!final) throw new Error("Failed to parse the response.");
+      const [isUser, currentMessage] = final;
+      if (isUser) throw new Error("No assistant response found.");
+      set({ currentMessage });
+      handlers.parseMessage(currentMessage);
+      return currentMessage;
+    },
+
+    onFinish: () => {
+      set({ step: 3 });
+    },
+  };
+
+  return {
+    ...initialState,
+    computed,
+    handlers,
+  };
+});
diff --git a/src/lib/hooks/useDetachment.ts b/src/lib/hooks/useDetachment.ts
deleted file mode 100644
index 0e316b9..0000000
--- a/src/lib/hooks/useDetachment.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { useEffect, useRef } from "react";
-
-export const useDetachment = (
-  node: HTMLElement | null,
-  callback?: (node?: HTMLElement) => void
-) => {
-  const lastRef = useRef<HTMLElement | null>(null);
-  const lastCbkRef = useRef<((node?: HTMLElement) => void) | null>(null);
-
-  useEffect(() => {
-    const nodeChanged = lastRef.current !== node;
-    const cbkChanged = lastCbkRef.current !== node;
-    // initial render
-    if (node) {
-      if (nodeChanged) {
-        lastCbkRef.current?.(lastRef.current || void 0);
-      }
-      lastCbkRef.current = callback || null;
-      lastRef.current = node;
-
-      const observer = new MutationObserver((mutationsList) => {
-        for (const mutation of mutationsList) {
-          if (
-            mutation.type === "childList" &&
-            Array.from(mutation.removedNodes).includes(node)
-          ) {
-            lastCbkRef.current?.(node || void 0);
-          }
-        }
-      });
-
-      const parent = node.parentNode;
-      if (!parent) {
-        // oof this is an orphan, no need to observe at all
-        lastCbkRef.current?.(node || void 0);
-        return;
-      }
-
-      observer.observe(parent, { childList: true });
-      return () => observer.disconnect();
-    } else {
-      if (!node) {
-        if (!lastRef.current) return; // meh
-        if (cbkChanged) {
-          callback?.(lastRef.current);
-        } else {
-          lastCbkRef.current?.(lastRef.current);
-        }
-
-        lastRef.current = node;
-        lastCbkRef.current = callback || null;
-        return;
-      }
-    }
-  }, [node, callback]);
-
-  return;
-};
diff --git a/src/lib/hooks/useElements.ts b/src/lib/hooks/useElements.ts
deleted file mode 100644
index 3f8246d..0000000
--- a/src/lib/hooks/useElements.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { useLayoutEffect, useState } from "react";
-import { useSelector } from "./useTarget";
-
-export const useElements = () => {
-  const form = useSelector("main form");
-  const [textarea, setTextarea] = useState<HTMLTextAreaElement | null>(null);
-  const [parent, setParent] = useState<HTMLDivElement | null>(null);
-  const [root, setRoot] = useState<HTMLDivElement | null>(null);
-
-  useLayoutEffect(() => {
-    if (form) {
-      setTextarea(form.querySelector("textarea") as HTMLTextAreaElement);
-      setParent(form.parentElement as HTMLDivElement);
-      setTextarea(form.querySelector("textarea") as HTMLTextAreaElement);
-      setRoot(document.getElementById("__next") as HTMLDivElement);
-    }
-  }, [form]);
-
-  return {
-    form,
-    textarea,
-    parent,
-    root,
-  };
-};
diff --git a/src/lib/hooks/useJson.ts b/src/lib/hooks/useJson.ts
index c5e844c..0e34584 100644
--- a/src/lib/hooks/useJson.ts
+++ b/src/lib/hooks/useJson.ts
@@ -1,13 +1,7 @@
 import { useLocalStorage } from "@mantine/hooks";
 import { useCallback, useMemo } from "react";
+import { safeParseJson } from "../utils";
 
-const safeParseJson = (str: string) => {
-  try {
-    return JSON.parse(str);
-  } catch (e) {
-    return {};
-  }
-};
 export const useJson = (key = "store") => {
   const [str, setStr] = useLocalStorage({
     key,
diff --git a/src/lib/hooks/useTarget.ts b/src/lib/hooks/useTarget.ts
index 6762428..8f7b66b 100644
--- a/src/lib/hooks/useTarget.ts
+++ b/src/lib/hooks/useTarget.ts
@@ -1,10 +1,38 @@
-import { useEffect, useLayoutEffect, useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { waitElement } from "../elementPromises";
 import { useDead } from "./useDeadRef";
 
+export const useQuerySelector = (selector: string): HTMLElement | null => {
+  const [element, setElement] = useState<HTMLElement | null>(null);
+  const elRef = useRef<HTMLElement | null>(null);
+  useEffect(() => {
+    const handleElement = (): void => {
+      const selectedElement = document.querySelector<HTMLElement>(selector);
+      if (selectedElement === elRef.current) return;
+      setElement(selectedElement);
+      elRef.current = selectedElement;
+    };
+
+    handleElement();
+
+    const observer = new MutationObserver(handleElement);
+    const options: MutationObserverInit = {
+      childList: true,
+      subtree: true,
+    };
+
+    observer.observe(document.documentElement, options);
+
+    return () => observer.disconnect();
+  }, [selector]);
+
+  return element;
+};
+
 export const useSelector = <E extends HTMLElement>(
   selector: string,
-  textReg?: RegExp
+  textReg?: RegExp,
+  attributeFilter?: string[]
 ) => {
   const [el, setEl] = useState<E | null>(null);
   const dead = useDead();
@@ -12,32 +40,47 @@ export const useSelector = <E extends HTMLElement>(
     const scanEl = async () => {
       if (dead.current) return;
       const tgtEl = await waitElement<E>(
-        { selector, textReg, timeout: 1000 },
+        { selector, textReg, timeout: 100 },
         true
       );
-      if (dead.current || !tgtEl) return;
+      if (dead.current) return;
       setEl(tgtEl);
     };
 
     // monitor attach / detachment
     const mo = new MutationObserver((mutations) => {
       if (dead.current) return;
-      let additionFound = false;
+      let shouldScan = false;
       for (let mutation of mutations) {
+        if (mutation.target) {
+          mutation.target.contains(el);
+          shouldScan = true;
+          break;
+        }
         if (mutation.type === "childList") {
           if (el) {
             const found = [...mutation.removedNodes].some((node) =>
               node.contains(el)
             );
-            if (found) setEl(null);
+            if (found) {
+              shouldScan = true;
+              break;
+            }
           } else {
-            if (mutation.addedNodes.length > 0) additionFound = true;
+            if (mutation.addedNodes.length > 0) {
+              shouldScan = true;
+              break;
+            }
           }
         }
       }
-      if (additionFound) scanEl();
+      if (shouldScan) scanEl();
+    });
+    mo.observe(document.body, {
+      childList: true,
+      subtree: true,
+      attributeFilter,
     });
-    mo.observe(document.body, { childList: true, subtree: true });
     if (!el) scanEl();
     return () => mo.disconnect();
   }, [el, textReg]);
@@ -58,27 +101,34 @@ export const useSelectors = <E extends HTMLElement>(
         true,
         true
       );
-      if (dead.current || !tgtEls) return;
+      if (dead.current) return;
       setEls([...tgtEls]);
     };
 
     // monitor attach / detachment
     const mo = new MutationObserver((mutations) => {
       if (dead.current) return;
-      let changeFound = false;
+      let shouldScan = false;
       for (let mutation of mutations) {
         if (mutation.type === "childList") {
+          if (
+            mutation.target instanceof Element &&
+            els.includes(mutation.target as E)
+          ) {
+            shouldScan = true;
+            break;
+          }
           const removalDetected = [...mutation.removedNodes].some((node) =>
             [...els].some((e) => node.contains(e))
           );
-          if (removalDetected) changeFound = true;
-          if (changeFound) break;
-          if (mutation.addedNodes.length > 0) changeFound = true;
-          if (changeFound) break;
+          if (removalDetected) shouldScan = true;
+          if (shouldScan) break;
+          if (mutation.addedNodes.length > 0) shouldScan = true;
+          if (shouldScan) break;
         }
       }
 
-      if (changeFound) scanEls();
+      if (shouldScan) scanEls();
     });
     mo.observe(document.body, { childList: true, subtree: true });
     if (!els) scanEls();
@@ -87,16 +137,18 @@ export const useSelectors = <E extends HTMLElement>(
   return els;
 };
 
-export const useRootTarget = (selector: string) => {
-  const target = useSelector(selector);
+export const useRootAnchor = () => {
+  const anchor = useQuerySelector(`form + div`);
   const [orgHtml, setOrgHtml] = useState("");
-
+  const [width, setWidth] = useState(200);
   useEffect(() => {
-    if (target) {
-      setOrgHtml(target.innerHTML || "ChatGPT");
-      target.innerHTML = "";
-    }
-  }, [target]);
+    if (!anchor) return;
+    const span = anchor.firstChild as HTMLSpanElement;
+    setOrgHtml(span.innerHTML || "ChatGPT");
+    setWidth(anchor.clientWidth);
+
+    // anchor.innerHTML = "&nbsp;";
+  }, [anchor]);
 
-  return [target, orgHtml] as const;
+  return [anchor, orgHtml, width] as const;
 };
diff --git a/src/lib/hooks/workers/useContinueClicker.ts b/src/lib/hooks/workers/useContinueClicker.ts
new file mode 100644
index 0000000..6abd0cf
--- /dev/null
+++ b/src/lib/hooks/workers/useContinueClicker.ts
@@ -0,0 +1,44 @@
+import { useInterval } from "@mantine/hooks";
+import { useCallback, useEffect, useState } from "react";
+import { store } from "./useElements";
+
+const CLICKER_DEFAULT = 50;
+
+export const useContinueClicker = () => {
+  const [node, container, t] = store((s) => [
+    s.button.continue,
+    s.container.continue,
+    s.changeT,
+  ]);
+  const [seconds, setSeconds] = useState(50);
+  const { start, stop, active } = useInterval(
+    () => setSeconds((s) => Math.max(0, s - 1)),
+    100
+  );
+  const handleStop = useCallback(() => {
+    stop();
+    setSeconds(CLICKER_DEFAULT * 2);
+  }, [stop]);
+
+  const secondsText = active
+    ? `Continue in ${(seconds / 10).toFixed(1)}`
+    : "Continue";
+
+  useEffect(() => {
+    if (!node) return;
+    setSeconds(CLICKER_DEFAULT);
+    node.innerHTML = "";
+    const tooSoon = Date.now() - t < 1000;
+    if (tooSoon) return;
+    start();
+    return stop;
+  }, [node]);
+
+  useEffect(() => {
+    if (active && node && seconds <= 0) {
+      node.click();
+    }
+  }, [seconds, node, active]);
+
+  return [secondsText, handleStop, node, active && container] as const;
+};
diff --git a/src/lib/hooks/workers/useConversationMenu.tsx b/src/lib/hooks/workers/useConversationMenu.tsx
new file mode 100644
index 0000000..fb6fb45
--- /dev/null
+++ b/src/lib/hooks/workers/useConversationMenu.tsx
@@ -0,0 +1,243 @@
+import { Text } from "@mantine/core";
+import { useClickOutside } from "@mantine/hooks";
+import { notifications } from "@mantine/notifications";
+import { IconCaretUp, IconCopy, IconTrash, IconX } from "@tabler/icons-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { store } from "./useElements";
+
+const regDel = /^Delete ".+"\?$/;
+
+export const useConversationMenu = () => {
+  const [elNew] = store((s) => [s.button.new]);
+  const [target, setTarget] = useState<HTMLAnchorElement | null>(null);
+  const [pos, setPos] = useState({ x: 0, y: 0 });
+  const handlerRef = useRef((el: HTMLAnchorElement, x: number, y: number) => {
+    setTarget(el);
+    setPos({ x, y });
+  });
+  const ref = useClickOutside(() => setTarget(null));
+  const isDeleting = regDel.test(target?.textContent || "");
+  const isOpened = !!(target && target.classList.contains("bg-gray-800"));
+  const helperRef = useRef<[string, number]>();
+  const helper = useMemo(() => {
+    return {
+      prepareAndClick() {
+        const el = target?.parentElement;
+        if (!el) throw new Error("No parent element");
+        const title = el.textContent || "";
+        const siblings = helper.getByTitle(title);
+        const idx = siblings.indexOf(el);
+        helperRef.current = [title, idx];
+        target.click();
+        return el;
+      },
+      getByTitle(title: string) {
+        const allLinks = [...document.querySelectorAll("nav li.relative")];
+        const filtered = allLinks.filter(
+          (el) =>
+            el.textContent === title ||
+            el.textContent === `Delete "${title}"?` ||
+            el.querySelector("input")?.value === title
+        );
+        return filtered;
+      },
+      async get(selector: string, expectedLength = 1) {
+        if (!helperRef.current) throw new Error("No helperRef");
+
+        let result: NodeListOf<HTMLElement>;
+        const t = Date.now();
+        const [title, idx] = helperRef.current;
+        do {
+          const parent = helper.getByTitle(title)[idx];
+          if (parent) {
+            result = parent.querySelectorAll(selector);
+            if (result?.length === expectedLength) {
+              return [...result];
+            }
+          }
+          await new Promise((r) => setTimeout(r, 50));
+        } while (t + 2_000 > Date.now());
+        return null;
+      },
+      cleanup: () => {
+        helperRef.current = void 0;
+      },
+    };
+  }, [target]);
+
+  const handlers = useMemo(
+    () =>
+      target
+        ? {
+            bail: () => {
+              helper.cleanup();
+              notifications.show({
+                icon: <IconX />,
+                color: "orange",
+                title: "Failed due to a list change",
+                message: "Please try again.",
+              });
+            },
+            openMenu: () => {
+              const srItem = document.querySelectorAll(
+                ".sr-only"
+              ) as NodeListOf<HTMLSpanElement>;
+              srItem.forEach((el) => {
+                if (el.textContent === "Open sidebar") el.click();
+              });
+            },
+            click: () => target.click(),
+            edit: async () => {
+              helper.prepareAndClick();
+              try {
+                const els = await helper.get("button", 3);
+                if (els?.length !== 3) return handlers.bail?.();
+                const edit = els[0];
+                edit.click();
+              } finally {
+                helper.cleanup();
+              }
+            },
+            share: async () => {
+              helper.prepareAndClick();
+              try {
+                const els = await helper.get("button", 3);
+                if (els?.length !== 3) return handlers.bail?.();
+
+                const share = els[1];
+                const hasPopup = share.getAttribute("aria-haspopup");
+                if (!hasPopup) return;
+                share.click();
+              } finally {
+                helper.cleanup();
+              }
+            },
+            copyUrl: async () => {
+              helper.prepareAndClick();
+              try {
+                const els = await helper.get("button", 3);
+                if (els?.length !== 3) return handlers.bail?.();
+
+                const url = location.href;
+                navigator.clipboard.writeText(url);
+                notifications.show({
+                  icon: <IconCopy />,
+                  color: "blue",
+                  title: "Copied URL",
+                  message: url,
+                });
+              } finally {
+                helper.cleanup();
+              }
+            },
+            pullToTop: async () => {
+              helper.prepareAndClick();
+              try {
+                const title = target.textContent;
+
+                const els = await helper.get("button", 3);
+                if (els?.length !== 3) return handlers.bail?.();
+
+                const edit = els[0];
+                edit.click();
+
+                const elsInput = await helper.get("input");
+                const el = elsInput?.[0] as HTMLInputElement | undefined;
+                if (!el) return handlers.bail?.();
+
+                if (el.value.endsWith(" ")) el.value = el.value.slice(0, -1);
+                else el.value = el.value + " ";
+                el.dispatchEvent(new Event("input", { bubbles: true }));
+                if (helperRef.current) {
+                  helperRef.current[0] = el.value; // update scanning title
+                }
+
+                const elsBtn = await helper.get("button", 2);
+                if (elsBtn?.length !== 2) return handlers.bail?.();
+                const btn = elsBtn[0];
+                btn.click();
+
+                notifications.show({
+                  icon: <IconCaretUp />,
+                  color: "blue",
+                  title: "Pulled to top",
+                  message: (
+                    <Text>
+                      <Text fw={700}>{title}</Text> will be at the top on the
+                      next list update.
+                    </Text>
+                  ),
+                });
+              } finally {
+                helper.cleanup();
+              }
+            },
+            delete: async () => {
+              helper.prepareAndClick();
+              try {
+                const title = target.textContent;
+
+                const els = await helper.get("button", 3);
+                if (els?.length !== 3) return handlers.bail?.();
+
+                const del = els[els.length - 1];
+                del.click();
+
+                const elsBtn = await helper.get("button", 2);
+                if (elsBtn?.length !== 2) return handlers.bail?.();
+
+                const confirm = elsBtn[0];
+                confirm.click();
+
+                notifications.show({
+                  icon: <IconTrash />,
+                  color: "red",
+                  title: "Deleted",
+                  message: title,
+                });
+              } finally {
+                helper.cleanup();
+              }
+            },
+            close: async () => {
+              elNew?.click();
+            },
+          }
+        : {},
+    [target, helper]
+  );
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      const x = e.pageX;
+      const y = e.pageY;
+      let el = e.target as HTMLElement | null;
+      while (el) {
+        if (el.tagName === "A") {
+          if (el.classList.contains("text-sm")) {
+            return; // not a message link
+          }
+          break;
+        }
+        el = el.parentElement;
+      }
+      if (!el) return;
+      // me being lazy to traverse the dom
+      el.classList.add("cgpt-agmt-ctx");
+      const verifiedEl = document.querySelector(
+        "nav a.cgpt-agmt-ctx"
+      ) as HTMLElement | null;
+      el.classList.remove("cgpt-agmt-ctx");
+      if (!verifiedEl) return;
+
+      e.preventDefault();
+      handlerRef.current(verifiedEl as HTMLAnchorElement, x, y);
+    };
+    document.body.addEventListener("contextmenu", handler);
+    return () => (
+      document.body.removeEventListener("contextmenu", handler), setTarget(null)
+    );
+  }, []);
+
+  return { target, pos, ref, isDeleting, isOpened, setTarget, handlers };
+};
diff --git a/src/lib/hooks/workers/useElements.ts b/src/lib/hooks/workers/useElements.ts
new file mode 100644
index 0000000..c174b0a
--- /dev/null
+++ b/src/lib/hooks/workers/useElements.ts
@@ -0,0 +1,255 @@
+import { shallowEqual, useElementSize } from "@mantine/hooks";
+import throttle from "lodash/throttle";
+import { useLayoutEffect, useMemo } from "react";
+import { create } from "zustand";
+import { combine } from "zustand/middleware";
+
+const initialElements = {
+  changeT: 0,
+  main: {
+    form: null as HTMLFormElement | null,
+    textarea: null as HTMLTextAreaElement | null,
+    submit: null as HTMLButtonElement | null,
+    target: null as HTMLDivElement | null,
+  },
+  edits: [] as {
+    textarea: HTMLTextAreaElement;
+    submit: HTMLButtonElement;
+    target: HTMLDivElement;
+  }[],
+  button: {
+    new: null as HTMLButtonElement | null,
+    continue: null as HTMLButtonElement | null,
+    regen: null as HTMLButtonElement | null,
+    stop: null as HTMLButtonElement | null,
+    gptActive: null as HTMLDivElement | null,
+    gpt3: null as HTMLDivElement | null,
+    gpt4: null as HTMLDivElement | null,
+  },
+  container: {
+    list: null as HTMLDivElement[] | null,
+    conversations: null as HTMLDivElement[] | null,
+    lastConversation: null as HTMLDivElement | null,
+    continue: null as HTMLDivElement | null,
+  },
+};
+
+export type Els = typeof initialElements;
+export const store = create(
+  combine(initialElements, (set, get) => ({
+    handlers: {
+      setMain: (main: Els["main"]) => set({ main }),
+      setEdits: (edits: Els["edits"]) => set({ edits }),
+      addEdit: (els: NonNullable<Els["edits"][number]>) =>
+        set(({ edits }) => ({ edits: [...edits, els] })),
+      setEdit: (idx: number, els: NonNullable<Els["edits"][number]>) =>
+        set(({ edits }) => ({ edits: [...edits].splice(idx, 1, els) })),
+      delEdit: (elTextarea: HTMLTextAreaElement) =>
+        set(({ edits }) => ({
+          edits: [...edits].filter((e) => e.textarea !== elTextarea),
+        })),
+      setButtons: (button: Els["button"]) => set({ button }),
+      setContainer: (container: Els["container"]) =>
+        set({ container, changeT: Date.now() }),
+      getExisting: () => {
+        const { main, edits, button, container } = get();
+        const aMain = Object.values(main).filter(Boolean);
+        const aEdits = Object.values(edits).flatMap((e) =>
+          Object.values(e || {})
+        );
+        const aButton = Object.values(button).filter(Boolean);
+        const aContainer = Object.values(container).flat().filter(Boolean);
+        return [...aMain, ...aEdits, ...aButton, ...aContainer];
+      },
+    },
+  }))
+);
+
+const SELECTORS = {
+  main_form: "main form",
+  main_textarea: "main form textarea",
+  main_submit: "main form textarea + button",
+  main_target: "main form + div",
+  edit_textarea: "main .group textarea",
+  edit_submit: "main .group textarea + div button.btn-primary",
+  edit_target: "main .group textarea + div",
+  button_new: ["nav a.flex-grow, .sticky h1 + button"] as const,
+  button_regen: [
+    "form .h-full.justify-center button.-z-0",
+    /Regenerate/,
+  ] as const,
+  button_continue: ["form .h-full.justify-center button", /Continue/] as const,
+  button_stop: ["form .h-full.justify-center button", /Stop/] as const,
+  button_active: ["main .justify-center button div.bg-white"] as const,
+  button_gpt3: ["main .justify-center button div", /GPT-3/] as const,
+  button_gpt4: ["main .justify-center button div", /GPT-4/] as const,
+  container_continue: "form .justify-center",
+  container_list: "nav li.relative",
+  container_conversations: "main .group",
+};
+
+// monitor document and update elsStore
+export const useElsUpdater = () => {
+  const elSize = useElementSize<HTMLDivElement>();
+  const update = useMemo(
+    () =>
+      throttle(
+        () => {
+          const els = store.getState();
+          const mainForm = document.querySelector<HTMLFormElement>(
+            SELECTORS.main_form
+          );
+          const mainTextarea = document.querySelector<HTMLTextAreaElement>(
+            SELECTORS.main_textarea
+          );
+          const mainSubmit = document.querySelector<HTMLButtonElement>(
+            SELECTORS.main_submit
+          );
+          const mainTarget = document.querySelector<HTMLDivElement>(
+            SELECTORS.main_target
+          );
+          const main = {
+            form: mainForm,
+            textarea: mainTextarea,
+            submit: mainSubmit,
+            target: mainTarget,
+          };
+          if (mainTarget) elSize.ref.current = mainTarget;
+          if (!shallowEqual(main, els.main)) els.handlers.setMain(main);
+
+          // BUTTONS
+          const scanButton = <T extends HTMLElement>(
+            selector: string,
+            reg?: RegExp
+          ) =>
+            [...document.querySelectorAll<T>(selector)].find((el) =>
+              reg ? el.textContent?.match(reg) : true
+            ) || null;
+          const buttonNew = scanButton<HTMLButtonElement>(
+            ...SELECTORS.button_new
+          );
+          const buttonRegen = scanButton<HTMLButtonElement>(
+            ...SELECTORS.button_regen
+          );
+          const buttonContinue = scanButton<HTMLButtonElement>(
+            ...SELECTORS.button_continue
+          );
+          const buttonStop = scanButton<HTMLButtonElement>(
+            ...SELECTORS.button_stop
+          );
+          const buttonGptActive = scanButton<HTMLDivElement>(
+            ...SELECTORS.button_active
+          );
+          const buttonGpt3 = scanButton<HTMLDivElement>(
+            ...SELECTORS.button_gpt3
+          );
+          const buttonGpt4 = scanButton<HTMLDivElement>(
+            ...SELECTORS.button_gpt4
+          );
+
+          const button = {
+            new: buttonNew,
+            regen: buttonRegen,
+            continue: buttonContinue,
+            stop: buttonStop,
+            gptActive: buttonGptActive,
+            gpt3: buttonGpt3,
+            gpt4: buttonGpt4,
+          };
+          if (!shallowEqual(button, els.button))
+            els.handlers.setButtons(button);
+
+          // EDIT
+          const editTextareas = document.querySelectorAll<HTMLTextAreaElement>(
+            SELECTORS.edit_textarea
+          );
+          const editSubmits = document.querySelectorAll<HTMLButtonElement>(
+            SELECTORS.edit_submit
+          );
+          const editTargets = document.querySelectorAll<HTMLDivElement>(
+            SELECTORS.edit_target
+          );
+          const edits = [...editTextareas].map((textarea, idx) => ({
+            textarea,
+            submit: editSubmits[idx],
+            target: editTargets[idx],
+          }));
+          els.handlers.setEdits(edits);
+
+          // CONTAINER
+          const containerList = document.querySelectorAll<HTMLDivElement>(
+            SELECTORS.container_list
+          );
+          const containerConversations =
+            document.querySelectorAll<HTMLDivElement>(
+              SELECTORS.container_conversations
+            );
+          const containerLastConversation =
+            containerConversations[containerConversations.length - 1];
+          const containerContinue = document.querySelector<HTMLDivElement>(
+            SELECTORS.container_continue
+          );
+          const container = {
+            list: [...containerList],
+            conversations: [...containerConversations],
+            lastConversation: containerLastConversation,
+            continue: containerContinue,
+          };
+          const listMatch = shallowEqual(container.list, els.container.list);
+          const conversationsMatch = shallowEqual(
+            container.conversations,
+            els.container.conversations
+          );
+          const lastConversationMatch =
+            container.lastConversation === els.container.lastConversation;
+          const continueMatch = container.continue === els.container.continue;
+          const containerSame =
+            listMatch &&
+            conversationsMatch &&
+            lastConversationMatch &&
+            continueMatch;
+          if (!containerSame) els.handlers.setContainer(container);
+        },
+        100,
+        { leading: true, trailing: true }
+      ),
+    []
+  );
+  useLayoutEffect(() => {
+    const handler = (_ms: MutationRecord[]) => {
+      let shouldScan = false;
+      const ms = [..._ms];
+      for (let m of ms) {
+        if (m.removedNodes.length) {
+          const removed = [...m.removedNodes];
+          if (
+            removed.some((n) =>
+              store
+                .getState()
+                .handlers.getExisting()
+                .some((nn) => n.contains(nn))
+            )
+          ) {
+            shouldScan = true;
+            break;
+          }
+        }
+        if (m.addedNodes.length) {
+          shouldScan = true;
+        }
+      }
+      if (shouldScan) update();
+    };
+    const m = new MutationObserver(handler);
+    update();
+    m.observe(document.documentElement, { childList: true, subtree: true });
+    return () => m.disconnect();
+  }, [update]);
+
+  return elSize;
+};
+
+export const useElsMain = () => store((s) => s.main);
+export const useElsEdits = () => store((s) => s.edits);
+export const useElsButtons = () => store((s) => s.button);
+export const useElsContainer = () => store((s) => s.container);
diff --git a/src/lib/hooks/workers/useMessageSerializer.ts b/src/lib/hooks/workers/useMessageSerializer.ts
new file mode 100644
index 0000000..3f20a04
--- /dev/null
+++ b/src/lib/hooks/workers/useMessageSerializer.ts
@@ -0,0 +1,28 @@
+import { useDisclosure } from "@mantine/hooks";
+import { store } from "./useElements";
+import { useMemo } from "react";
+import { serializeMessageElement } from "@/lib/messageSerializer";
+
+export const useMessageSerializer = () => {
+  const [els] = store((s) => [s.container.conversations]);
+  const [opened, setOpened] = useDisclosure(false);
+
+  const handlers = useMemo(
+    () => ({
+      close: setOpened.close,
+      open: setOpened.open,
+    }),
+    []
+  );
+  const data = useMemo(
+    () =>
+      els
+        ? (els.map(serializeMessageElement).filter(Boolean) as [
+            boolean,
+            string
+          ][])
+        : [],
+    [els]
+  );
+  return { data, opened, handlers };
+};
diff --git a/src/comp/workers/SelectionWatcher.tsx b/src/lib/hooks/workers/useTextarea.ts
similarity index 60%
rename from src/comp/workers/SelectionWatcher.tsx
rename to src/lib/hooks/workers/useTextarea.ts
index cd38d1e..5b45bd9 100644
--- a/src/comp/workers/SelectionWatcher.tsx
+++ b/src/lib/hooks/workers/useTextarea.ts
@@ -1,11 +1,21 @@
-import { useJson } from "@/lib/hooks/useJson";
-import { getTextExpander } from "@/lib/textExpander";
-import { ActionIcon, Select, Tooltip } from "@mantine/core";
 import {
   getHotkeyHandler,
+  useDebouncedValue,
   useDisclosure,
+  useLocalStorage,
   useTextSelection,
 } from "@mantine/hooks";
+import {
+  MouseEvent,
+  createElement,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { encode } from "../../gpt3TokenizerUnobfuscated";
 import { notifications } from "@mantine/notifications";
 import {
   IconCodeMinus,
@@ -13,10 +23,9 @@ import {
   IconCodePlus,
   IconEraser,
   IconRotate2,
-  IconTrash,
 } from "@tabler/icons-react";
-import { useCallback, useLayoutEffect, useMemo, useRef } from "react";
-import { MacroAddModal } from "../modals/MacroAddModal";
+import { getTextExpander } from "../../textExpander";
+import { useJson } from "../useJson";
 
 const getLastWordAndSelect = (el: HTMLTextAreaElement) => {
   const { value, selectionStart } = el;
@@ -28,8 +37,73 @@ const getLastWordAndSelect = (el: HTMLTextAreaElement) => {
   return lastWord;
 };
 
-type Props = { textarea: HTMLTextAreaElement; isEdit?: boolean };
-export const SelectionWatcher = ({ textarea, isEdit = false }: Props) => {
+// communicate with textarea
+export const useTextAreaAugmentaion = (textarea: HTMLTextAreaElement) => {
+  const [savedText, setSavedText] = useLocalStorage({
+    key: "prompt",
+    defaultValue: "",
+  });
+  const [text, setText] = useState(savedText);
+  const [debouncedText] = useDebouncedValue(text, 100);
+  const [openTokens, setOpenTokens] = useState(false);
+
+  // const length = useMemo(() => getTokenLength(debouncedText), [debouncedText]);
+  const tokens = useMemo(() => encode(debouncedText), [debouncedText]);
+
+  useEffect(
+    () => void (debouncedText && setSavedText(debouncedText)),
+    [debouncedText]
+  );
+
+  const handleBadgeClick = useCallback(
+    (e: MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const el = textarea;
+      if (!el) return;
+      if (el.value === savedText) return;
+      notifications.show({
+        icon: createElement(IconRotate2),
+        color: "blue",
+        title: "Restored a recent prompt",
+        message: `Because they want you to forget the past everytime`,
+      });
+      el.value = savedText;
+      el.dispatchEvent(new Event("input", { bubbles: true }));
+      el.focus();
+    },
+    [savedText, textarea]
+  );
+  const handleTextOptimized = useCallback(
+    (text: string) => {
+      setText(text);
+      const el = textarea;
+      if (!el) return;
+      if (el.value === text) return;
+      el.value = text;
+      el.dispatchEvent(new Event("input", { bubbles: true }));
+    },
+    [textarea]
+  );
+
+  useLayoutEffect(() => {
+    // listen for input
+    const el = textarea;
+    if (!el) return;
+    const handler = (e: Event) => {
+      const { value } = e.currentTarget as HTMLTextAreaElement;
+      if (e.type === "focus" && !value) return; // protect against accidental deletion
+      setText(value);
+    };
+    setText(el.value);
+    el.addEventListener("input", handler);
+    el.addEventListener("focus", handler);
+    return () => (
+      el.removeEventListener("input", handler),
+      el.removeEventListener("focus", handler)
+    );
+  }, [textarea]);
+
   const selection = useTextSelection();
   const [openAddmodal, { open, close }] = useDisclosure(false);
   const { json, set, remove } = useJson();
@@ -38,7 +112,7 @@ export const SelectionWatcher = ({ textarea, isEdit = false }: Props) => {
   const handleConfirm = useCallback(
     (key: string, value: string) => {
       notifications.show({
-        icon: <IconCodePlus />,
+        icon: createElement(IconCodePlus),
         color: "blue",
         title: "Added a macro",
         message: `Shorthand: ${key}`,
@@ -51,7 +125,7 @@ export const SelectionWatcher = ({ textarea, isEdit = false }: Props) => {
   const handleDelete = useCallback(
     (key: string) => (
       notifications.show({
-        icon: <IconCodeMinus />,
+        icon: createElement(IconCodeMinus),
         color: "red",
         title: "Deleted a macro",
         message: `${key} is now a goner.`,
@@ -65,14 +139,14 @@ export const SelectionWatcher = ({ textarea, isEdit = false }: Props) => {
     if (!el) return;
     if (!el.value && !!delRef.current) {
       notifications.show({
-        icon: <IconRotate2 />,
+        icon: createElement(IconRotate2),
         title: "Restored text",
         message: `Because everybody deserves a second chance`,
       });
       el.value = delRef.current;
     } else {
       notifications.show({
-        icon: <IconEraser />,
+        icon: createElement(IconEraser),
         color: "red",
         title: "Cleared text",
         message: `Because delete key needs some rest`,
@@ -82,7 +156,7 @@ export const SelectionWatcher = ({ textarea, isEdit = false }: Props) => {
     }
     el.dispatchEvent(new Event("input", { bubbles: true }));
     setTimeout(() => el.focus(), 0);
-  }, []);
+  }, [textarea]);
 
   const items = useMemo(
     () =>
@@ -113,7 +187,7 @@ export const SelectionWatcher = ({ textarea, isEdit = false }: Props) => {
       el.dispatchEvent(new Event("input", { bubbles: true }));
       setTimeout(() => el.focus(), 0);
     },
-    [selection]
+    [selection, textarea]
   );
 
   useLayoutEffect(() => {
@@ -130,7 +204,7 @@ export const SelectionWatcher = ({ textarea, isEdit = false }: Props) => {
           const expanded = textExpander(text);
           if (expanded instanceof Error) {
             notifications.show({
-              icon: <IconCodeOff />,
+              icon: createElement(IconCodeOff),
               color: "black",
               title: "Could not expand text",
               message: expanded.message,
@@ -139,7 +213,7 @@ export const SelectionWatcher = ({ textarea, isEdit = false }: Props) => {
           }
           if (expanded === text) {
             notifications.show({
-              icon: <IconCodeOff />,
+              icon: createElement(IconCodeOff),
               color: "black",
               title: "Could not expand text",
               message: "No expansion found",
@@ -166,51 +240,23 @@ export const SelectionWatcher = ({ textarea, isEdit = false }: Props) => {
     ]);
     el.addEventListener("keydown", handler);
     return () => el.removeEventListener("keydown", handler);
-  }, [selection, textExpander]);
-  return (
-    <>
-      <Tooltip label="Clear text" withArrow>
-        <ActionIcon
-          size="sm"
-          color="gray"
-          variant="filled"
-          onClick={handleClearText}
-          radius="xl"
-        >
-          <IconTrash size={12} />
-        </ActionIcon>
-      </Tooltip>
-      <MacroAddModal
-        macros={json}
-        opened={openAddmodal}
-        onConfirm={handleConfirm}
-        onDelete={handleDelete}
-        onCancel={close}
-        initialPrompt={selection?.toString() || ""}
-      />
-      <Select
-        size="xs"
-        radius="lg"
-        placeholder="Macros"
-        searchable
-        nothingFound="No options"
-        data={items}
-        onChange={handleSelect}
-        style={{ maxWidth: 100 }}
-      />
-      {!isEdit && (
-        <Tooltip label="Add/edit macros" withArrow>
-          <ActionIcon
-            size="sm"
-            color="gray"
-            variant="filled"
-            onClick={open}
-            radius="xl"
-          >
-            <IconCodePlus size={12} />
-          </ActionIcon>
-        </Tooltip>
-      )}
-    </>
-  );
+  }, [selection, textExpander, textarea]);
+
+  return {
+    tokens,
+    handleBadgeClick,
+    openTokens,
+    setOpenTokens,
+    handleTextOptimized,
+    handleClearText,
+    json,
+    openAddmodal,
+    handleConfirm,
+    handleDelete,
+    open,
+    close,
+    selection,
+    items,
+    handleSelect,
+  };
 };
diff --git a/src/lib/install.ts b/src/lib/install.ts
index 1365d15..8a6d2c1 100644
--- a/src/lib/install.ts
+++ b/src/lib/install.ts
@@ -6,6 +6,13 @@ import { Root, createRoot } from "react-dom/client";
 let root: Root;
 const anchor = document.createElement("div");
 anchor.id = "cgpt-agmt-root";
+anchor.className =
+  "px-3 pb-3 pt-2 text-center text-xs text-gray-600 dark:text-gray-300 md:px-4 md:pb-6 md:pt-3";
+anchor.style.position = "absolute";
+// anchor.style.transform = "translate(0, -100%)";
+anchor.style.right = "0";
+anchor.style.bottom = "0";
+
 document.body.appendChild(anchor);
 
 export const installApp = debounce(async () => {
@@ -19,5 +26,3 @@ const uninstallApp = () => {
     root.unmount();
   }
 };
-
-if (import.meta.hot) import.meta.hot.dispose(() => uninstallApp());
diff --git a/src/lib/messageSerializer.ts b/src/lib/messageSerializer.ts
index c454f4e..6ccac42 100644
--- a/src/lib/messageSerializer.ts
+++ b/src/lib/messageSerializer.ts
@@ -72,7 +72,9 @@ export const deserializeMessage = (text: string) => {
 };
 
 export const serializeMessageElement = (el: HTMLElement) => {
-  const assistantEl = el.querySelector(".markdown");
+  const assistantEl = el.classList.contains("markdown")
+    ? el
+    : el.querySelector(".markdown");
   const isUser = !assistantEl;
   if (assistantEl) {
     const parsed = nhm.translate((assistantEl as HTMLElement).innerHTML);
@@ -81,9 +83,9 @@ export const serializeMessageElement = (el: HTMLElement) => {
   const userEl = el.querySelector(".whitespace-pre-wrap, textarea");
   if (userEl) {
     if (userEl.tagName === "TEXTAREA") {
-      return [true, (userEl as HTMLTextAreaElement).value] as const;
+      return [isUser, (userEl as HTMLTextAreaElement).value] as const;
     }
-    return [true, (userEl as HTMLElement).textContent || ""] as const;
+    return [isUser, (userEl as HTMLElement).textContent || ""] as const;
   }
   return null;
 };
diff --git a/src/lib/textExpander.ts b/src/lib/textExpander.ts
index 94f6080..4329599 100644
--- a/src/lib/textExpander.ts
+++ b/src/lib/textExpander.ts
@@ -68,4 +68,4 @@ const tryMacros = memoize(
 export const getTextExpander: (
   macros: Record<string, string>
 ) => (t: string) => string | Error = (macros) =>
-  compose(tryChrono, tryEmoji, tryStringify, tryURLDecode, tryMacros(macros));
+  compose(tryStringify, tryMacros(macros), tryChrono, tryEmoji, tryURLDecode);
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
new file mode 100644
index 0000000..ecb888a
--- /dev/null
+++ b/src/lib/utils.ts
@@ -0,0 +1,7 @@
+export const safeParseJson = (str: string, fallback = {}) => {
+  try {
+    return JSON.parse(str);
+  } catch (e) {
+    return fallback;
+  }
+};
diff --git a/vite.config.rollup.js b/vite.config.rollup.js
index 83afaef..f9c8630 100644
--- a/vite.config.rollup.js
+++ b/vite.config.rollup.js
@@ -17,6 +17,9 @@ export const chunks = {
   "vnd.emojis": ["node-emoji"],
   "vnd.marked": ["marked"],
   "vnd.htmlMarkdown": ["node-html-markdown"],
+  "vnd.zustand": ["zustand"],
+  "vnd.json5": ["json5"],
+  "vnd.jszip": ["jszip"],
 };
 
 /** @type {import('vite').UserConfig.build.rollupOptions} */
diff --git a/yarn.lock b/yarn.lock
index 3070d4b..3804160 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -48,7 +48,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.7":
+"@babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.7":
   version: 7.22.5
   resolution: "@babel/runtime@npm:7.22.5"
   dependencies:
@@ -967,7 +967,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tabler/icons-react@npm:^2.21.0":
+"@tabler/icons-react@npm:^2.22.0":
   version: 2.22.0
   resolution: "@tabler/icons-react@npm:2.22.0"
   dependencies:
@@ -1305,6 +1305,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/jszip@npm:^3.4.1":
+  version: 3.4.1
+  resolution: "@types/jszip@npm:3.4.1"
+  dependencies:
+    jszip: "*"
+  checksum: e779a531fadfc2152233b71055cb67d21e8a8c6bbc6e94ffc5d186bc3fea6a66294c3efa87314339a9fd4b17fe9cb65cacd6c60d14db1d9487f8b9ae17d03255
+  languageName: node
+  linkType: hard
+
 "@types/lodash@npm:^4.14.195":
   version: 4.14.195
   resolution: "@types/lodash@npm:4.14.195"
@@ -1385,7 +1394,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"abbrev@npm:^1.0.0":
+"abbrev@npm:1, abbrev@npm:^1.0.0":
   version: 1.1.1
   resolution: "abbrev@npm:1.1.1"
   checksum: a4a97ec07d7ea112c517036882b2ac22f3109b7b19077dc656316d07d308438aac28e4d9746dc4d84bf6b1e75b4a7b0a5f3cb30592419f128ca9a8cee3bcfa17
@@ -1459,7 +1468,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ansi-styles@npm:^4.0.0":
+"ansi-styles@npm:^4.0.0, ansi-styles@npm:^4.1.0":
   version: 4.3.0
   resolution: "ansi-styles@npm:4.3.0"
   dependencies:
@@ -1648,6 +1657,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"chalk@npm:^4.1.2":
+  version: 4.1.2
+  resolution: "chalk@npm:4.1.2"
+  dependencies:
+    ansi-styles: ^4.1.0
+    supports-color: ^7.1.0
+  checksum: fe75c9d5c76a7a98d45495b91b2172fa3b7a09e0cc9370e5c8feb1c567b85c4288e2b3fded7cfdd7359ac28d6b3844feb8b82b8686842e93d23c827c417e83fc
+  languageName: node
+  linkType: hard
+
 "char-regex@npm:^2.0.1":
   version: 2.0.1
   resolution: "char-regex@npm:2.0.1"
@@ -1665,8 +1684,9 @@ __metadata:
     "@mantine/hooks": ^6.0.13
     "@mantine/notifications": ^6.0.13
     "@radix-ui/react-slot": ^1.0.2
-    "@tabler/icons-react": ^2.21.0
+    "@tabler/icons-react": ^2.22.0
     "@types/chrome": ^0.0.237
+    "@types/jszip": ^3.4.1
     "@types/lodash": ^4.14.195
     "@types/marked": ^5.0.0
     "@types/node-emoji": ^1.8.2
@@ -1675,12 +1695,17 @@ __metadata:
     "@vitejs/plugin-react-swc": ^3.3.2
     chokidar-cli: ^3.0.0
     chrono-node: ^2.6.3
+    concurrently: ^8.2.0
+    json5: ^2.2.3
+    jszip: ^3.10.1
     lodash: ^4.17.21
     marked: ^5.1.0
     node-emoji: ^2.0.2
     node-html-markdown: ^1.3.0
+    nodemon: ^2.0.22
     react: ^18.2.0
     react-dom: ^18.2.0
+    react-wrap-balancer: ^1.0.0
     reactflow: ^11.7.2
     rollup-plugin-visualizer: ^5.9.0
     typescript: ^5.0.2
@@ -1864,6 +1889,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"concurrently@npm:^8.2.0":
+  version: 8.2.0
+  resolution: "concurrently@npm:8.2.0"
+  dependencies:
+    chalk: ^4.1.2
+    date-fns: ^2.30.0
+    lodash: ^4.17.21
+    rxjs: ^7.8.1
+    shell-quote: ^1.8.1
+    spawn-command: 0.0.2
+    supports-color: ^8.1.1
+    tree-kill: ^1.2.2
+    yargs: ^17.7.2
+  bin:
+    conc: dist/bin/concurrently.js
+    concurrently: dist/bin/concurrently.js
+  checksum: eafe6a4d9b7fda87f55ea285cfc6acd937a5286ceec8991ab48e6cc27c45fce6a5c6f45e18d7555defa15dc7d7e8941bc5a9d1ceaf182e31441d420e00333434
+  languageName: node
+  linkType: hard
+
 "connect-injector@npm:^0.4.4":
   version: 0.4.4
   resolution: "connect-injector@npm:0.4.4"
@@ -1890,6 +1935,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"core-util-is@npm:~1.0.0":
+  version: 1.0.3
+  resolution: "core-util-is@npm:1.0.3"
+  checksum: 9de8597363a8e9b9952491ebe18167e3b36e7707569eed0ebf14f8bba773611376466ae34575bca8cfe3c767890c859c74056084738f09d4e4a6f902b2ad7d99
+  languageName: node
+  linkType: hard
+
 "cosmiconfig@npm:^7.0.0":
   version: 7.1.0
   resolution: "cosmiconfig@npm:7.1.0"
@@ -2030,6 +2082,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"date-fns@npm:^2.30.0":
+  version: 2.30.0
+  resolution: "date-fns@npm:2.30.0"
+  dependencies:
+    "@babel/runtime": ^7.21.0
+  checksum: f7be01523282e9bb06c0cd2693d34f245247a29098527d4420628966a2d9aad154bd0e90a6b1cf66d37adcb769cd108cf8a7bd49d76db0fb119af5cdd13644f4
+  languageName: node
+  linkType: hard
+
 "dayjs@npm:^1.10.0":
   version: 1.11.8
   resolution: "dayjs@npm:1.11.8"
@@ -2058,6 +2119,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"debug@npm:^3.2.7":
+  version: 3.2.7
+  resolution: "debug@npm:3.2.7"
+  dependencies:
+    ms: ^2.1.1
+  checksum: b3d8c5940799914d30314b7c3304a43305fd0715581a919dacb8b3176d024a782062368405b47491516d2091d6462d4d11f2f4974a405048094f8bfebfa3071c
+  languageName: node
+  linkType: hard
+
 "decamelize@npm:^1.2.0":
   version: 1.2.0
   resolution: "decamelize@npm:1.2.0"
@@ -2596,6 +2666,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"has-flag@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "has-flag@npm:4.0.0"
+  checksum: 261a1357037ead75e338156b1f9452c016a37dcd3283a972a30d9e4a87441ba372c8b81f818cd0fbcd9c0354b4ae7e18b9e1afa1971164aef6d18c2b6095a8ad
+  languageName: node
+  linkType: hard
+
 "has-unicode@npm:^2.0.1":
   version: 2.0.1
   resolution: "has-unicode@npm:2.0.1"
@@ -2695,6 +2772,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ignore-by-default@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "ignore-by-default@npm:1.0.1"
+  checksum: 441509147b3615e0365e407a3c18e189f78c07af08564176c680be1fabc94b6c789cad1342ad887175d4ecd5225de86f73d376cec8e06b42fd9b429505ffcf8a
+  languageName: node
+  linkType: hard
+
 "ignore@npm:^5.2.0":
   version: 5.2.4
   resolution: "ignore@npm:5.2.4"
@@ -2702,6 +2786,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"immediate@npm:~3.0.5":
+  version: 3.0.6
+  resolution: "immediate@npm:3.0.6"
+  checksum: f9b3486477555997657f70318cc8d3416159f208bec4cca3ff3442fd266bc23f50f0c9bd8547e1371a6b5e82b821ec9a7044a4f7b944798b25aa3cc6d5e63e62
+  languageName: node
+  linkType: hard
+
 "import-fresh@npm:^3.2.1":
   version: 3.3.0
   resolution: "import-fresh@npm:3.3.0"
@@ -2736,7 +2827,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"inherits@npm:2, inherits@npm:^2.0.3":
+"inherits@npm:2, inherits@npm:^2.0.3, inherits@npm:~2.0.3":
   version: 2.0.4
   resolution: "inherits@npm:2.0.4"
   checksum: 4a48a733847879d6cf6691860a6b1e3f0f4754176e4d71494c41f3475553768b10f84b5ce1d40fbd0e34e6bfbb864ee35858ad4dd2cf31e02fc4a154b724d7f1
@@ -2853,6 +2944,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"isarray@npm:~1.0.0":
+  version: 1.0.0
+  resolution: "isarray@npm:1.0.0"
+  checksum: f032df8e02dce8ec565cf2eb605ea939bdccea528dbcf565cdf92bfa2da9110461159d86a537388ef1acef8815a330642d7885b29010e8f7eac967c9993b65ab
+  languageName: node
+  linkType: hard
+
 "isexe@npm:^2.0.0":
   version: 2.0.0
   resolution: "isexe@npm:2.0.0"
@@ -2903,6 +3001,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"json5@npm:^2.2.3":
+  version: 2.2.3
+  resolution: "json5@npm:2.2.3"
+  bin:
+    json5: lib/cli.js
+  checksum: 2a7436a93393830bce797d4626275152e37e877b265e94ca69c99e3d20c2b9dab021279146a39cdb700e71b2dd32a4cebd1514cd57cee102b1af906ce5040349
+  languageName: node
+  linkType: hard
+
 "jsonfile@npm:^6.0.1":
   version: 6.1.0
   resolution: "jsonfile@npm:6.1.0"
@@ -2916,6 +3023,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jszip@npm:*, jszip@npm:^3.10.1":
+  version: 3.10.1
+  resolution: "jszip@npm:3.10.1"
+  dependencies:
+    lie: ~3.3.0
+    pako: ~1.0.2
+    readable-stream: ~2.3.6
+    setimmediate: ^1.0.5
+  checksum: abc77bfbe33e691d4d1ac9c74c8851b5761fba6a6986630864f98d876f3fcc2d36817dfc183779f32c00157b5d53a016796677298272a714ae096dfe6b1c8b60
+  languageName: node
+  linkType: hard
+
+"lie@npm:~3.3.0":
+  version: 3.3.0
+  resolution: "lie@npm:3.3.0"
+  dependencies:
+    immediate: ~3.0.5
+  checksum: 33102302cf19766f97919a6a98d481e01393288b17a6aa1f030a3542031df42736edde8dab29ffdbf90bebeffc48c761eb1d064dc77592ca3ba3556f9fe6d2a8
+  languageName: node
+  linkType: hard
+
 "lilconfig@npm:^2.0.5":
   version: 2.1.0
   resolution: "lilconfig@npm:2.1.0"
@@ -3081,7 +3209,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimatch@npm:^3.0.4, minimatch@npm:^3.1.1":
+"minimatch@npm:^3.0.4, minimatch@npm:^3.1.1, minimatch@npm:^3.1.2":
   version: 3.1.2
   resolution: "minimatch@npm:3.1.2"
   dependencies:
@@ -3206,7 +3334,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ms@npm:^2.0.0":
+"ms@npm:^2.0.0, ms@npm:^2.1.1":
   version: 2.1.3
   resolution: "ms@npm:2.1.3"
   checksum: aa92de608021b242401676e35cfa5aa42dd70cbdc082b916da7fb925c542173e36bce97ea3e804923fe92c0ad991434e4a38327e15a1b5b5f945d66df615ae6d
@@ -3293,6 +3421,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"nodemon@npm:^2.0.22":
+  version: 2.0.22
+  resolution: "nodemon@npm:2.0.22"
+  dependencies:
+    chokidar: ^3.5.2
+    debug: ^3.2.7
+    ignore-by-default: ^1.0.1
+    minimatch: ^3.1.2
+    pstree.remy: ^1.1.8
+    semver: ^5.7.1
+    simple-update-notifier: ^1.0.7
+    supports-color: ^5.5.0
+    touch: ^3.1.0
+    undefsafe: ^2.0.5
+  bin:
+    nodemon: bin/nodemon.js
+  checksum: 9c987e139748f5b5c480c6c9080bdc97304ee7d29172b7b3da1a7db590b1323ad57b96346304e9b522b0e445c336dc393ccd3f9f45c73b20d476d2347890dcd0
+  languageName: node
+  linkType: hard
+
 "nopt@npm:^6.0.0":
   version: 6.0.0
   resolution: "nopt@npm:6.0.0"
@@ -3304,6 +3452,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"nopt@npm:~1.0.10":
+  version: 1.0.10
+  resolution: "nopt@npm:1.0.10"
+  dependencies:
+    abbrev: 1
+  bin:
+    nopt: ./bin/nopt.js
+  checksum: f62575aceaa3be43f365bf37a596b89bbac2e796b001b6d2e2a85c2140a4e378ff919e2753ccba959c4fd344776fc88c29b393bc167fa939fb1513f126f4cd45
+  languageName: node
+  linkType: hard
+
 "normalize-path@npm:^3.0.0, normalize-path@npm:~3.0.0":
   version: 3.0.0
   resolution: "normalize-path@npm:3.0.0"
@@ -3411,6 +3570,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pako@npm:~1.0.2":
+  version: 1.0.11
+  resolution: "pako@npm:1.0.11"
+  checksum: 1be2bfa1f807608c7538afa15d6f25baa523c30ec870a3228a89579e474a4d992f4293859524e46d5d87fd30fa17c5edf34dbef0671251d9749820b488660b16
+  languageName: node
+  linkType: hard
+
 "parent-module@npm:^1.0.0":
   version: 1.0.1
   resolution: "parent-module@npm:1.0.1"
@@ -3546,6 +3712,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"process-nextick-args@npm:~2.0.0":
+  version: 2.0.1
+  resolution: "process-nextick-args@npm:2.0.1"
+  checksum: 1d38588e520dab7cea67cbbe2efdd86a10cc7a074c09657635e34f035277b59fbb57d09d8638346bf7090f8e8ebc070c96fa5fd183b777fff4f5edff5e9466cf
+  languageName: node
+  linkType: hard
+
 "promise-retry@npm:^2.0.1":
   version: 2.0.1
   resolution: "promise-retry@npm:2.0.1"
@@ -3567,6 +3740,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pstree.remy@npm:^1.1.8":
+  version: 1.1.8
+  resolution: "pstree.remy@npm:1.1.8"
+  checksum: 5cb53698d6bb34dfb278c8a26957964aecfff3e161af5fbf7cee00bbe9d8547c7aced4bd9cb193bce15fb56e9e4220fc02a5bf9c14345ffb13a36b858701ec2d
+  languageName: node
+  linkType: hard
+
 "punycode@npm:^2.1.0":
   version: 2.3.0
   resolution: "punycode@npm:2.3.0"
@@ -3694,6 +3874,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-wrap-balancer@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "react-wrap-balancer@npm:1.0.0"
+  peerDependencies:
+    react: ">=16.8.0 || ^17.0.0 || ^18"
+  checksum: a3e263528b940e555894914d3a0d474cf60594578b4f2a34646d36ea5d9603f75270ec30ff1a7df3a9637cf014d6414c75a70abb82b0c4223bfbeda557ac19ca
+  languageName: node
+  linkType: hard
+
 "react@npm:^18.2.0":
   version: 18.2.0
   resolution: "react@npm:18.2.0"
@@ -3731,6 +3920,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"readable-stream@npm:~2.3.6":
+  version: 2.3.8
+  resolution: "readable-stream@npm:2.3.8"
+  dependencies:
+    core-util-is: ~1.0.0
+    inherits: ~2.0.3
+    isarray: ~1.0.0
+    process-nextick-args: ~2.0.0
+    safe-buffer: ~5.1.1
+    string_decoder: ~1.1.1
+    util-deprecate: ~1.0.1
+  checksum: 65645467038704f0c8aaf026a72fbb588a9e2ef7a75cd57a01702ee9db1c4a1e4b03aaad36861a6a0926546a74d174149c8c207527963e0c2d3eee2f37678a42
+  languageName: node
+  linkType: hard
+
 "readdirp@npm:~3.6.0":
   version: 3.6.0
   resolution: "readdirp@npm:3.6.0"
@@ -3891,6 +4095,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rxjs@npm:^7.8.1":
+  version: 7.8.1
+  resolution: "rxjs@npm:7.8.1"
+  dependencies:
+    tslib: ^2.1.0
+  checksum: de4b53db1063e618ec2eca0f7965d9137cabe98cf6be9272efe6c86b47c17b987383df8574861bcced18ebd590764125a901d5506082be84a8b8e364bf05f119
+  languageName: node
+  linkType: hard
+
+"safe-buffer@npm:~5.1.0, safe-buffer@npm:~5.1.1":
+  version: 5.1.2
+  resolution: "safe-buffer@npm:5.1.2"
+  checksum: f2f1f7943ca44a594893a852894055cf619c1fbcb611237fc39e461ae751187e7baf4dc391a72125e0ac4fb2d8c5c0b3c71529622e6a58f46b960211e704903c
+  languageName: node
+  linkType: hard
+
 "safe-buffer@npm:~5.2.0":
   version: 5.2.1
   resolution: "safe-buffer@npm:5.2.1"
@@ -3914,6 +4134,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"semver@npm:^5.7.1":
+  version: 5.7.1
+  resolution: "semver@npm:5.7.1"
+  bin:
+    semver: ./bin/semver
+  checksum: 57fd0acfd0bac382ee87cd52cd0aaa5af086a7dc8d60379dfe65fea491fb2489b6016400813930ecd61fd0952dae75c115287a1b16c234b1550887117744dfaf
+  languageName: node
+  linkType: hard
+
 "semver@npm:^7.3.5":
   version: 7.5.1
   resolution: "semver@npm:7.5.1"
@@ -3925,6 +4154,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"semver@npm:~7.0.0":
+  version: 7.0.0
+  resolution: "semver@npm:7.0.0"
+  bin:
+    semver: bin/semver.js
+  checksum: 272c11bf8d083274ef79fe40a81c55c184dff84dd58e3c325299d0927ba48cece1f020793d138382b85f89bab5002a35a5ba59a3a68a7eebbb597eb733838778
+  languageName: node
+  linkType: hard
+
 "set-blocking@npm:^2.0.0":
   version: 2.0.0
   resolution: "set-blocking@npm:2.0.0"
@@ -3932,6 +4170,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"setimmediate@npm:^1.0.5":
+  version: 1.0.5
+  resolution: "setimmediate@npm:1.0.5"
+  checksum: c9a6f2c5b51a2dabdc0247db9c46460152ffc62ee139f3157440bd48e7c59425093f42719ac1d7931f054f153e2d26cf37dfeb8da17a794a58198a2705e527fd
+  languageName: node
+  linkType: hard
+
 "shebang-command@npm:^2.0.0":
   version: 2.0.0
   resolution: "shebang-command@npm:2.0.0"
@@ -3948,6 +4193,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"shell-quote@npm:^1.8.1":
+  version: 1.8.1
+  resolution: "shell-quote@npm:1.8.1"
+  checksum: 5f01201f4ef504d4c6a9d0d283fa17075f6770bfbe4c5850b074974c68062f37929ca61700d95ad2ac8822e14e8c4b990ca0e6e9272e64befd74ce5e19f0736b
+  languageName: node
+  linkType: hard
+
 "signal-exit@npm:^3.0.3, signal-exit@npm:^3.0.7":
   version: 3.0.7
   resolution: "signal-exit@npm:3.0.7"
@@ -3962,6 +4214,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"simple-update-notifier@npm:^1.0.7":
+  version: 1.1.0
+  resolution: "simple-update-notifier@npm:1.1.0"
+  dependencies:
+    semver: ~7.0.0
+  checksum: 1012e9b6c504e559a948078177b3eedbb9d7e4d15878e2bda56314d08db609ca5da485be4ac9f838759faae8057935ee0246fcdf63f1233c86bd9fecb2a5544b
+  languageName: node
+  linkType: hard
+
 "skin-tone@npm:^3.0.0":
   version: 3.0.0
   resolution: "skin-tone@npm:3.0.0"
@@ -4043,6 +4304,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"spawn-command@npm:0.0.2":
+  version: 0.0.2
+  resolution: "spawn-command@npm:0.0.2"
+  checksum: e35c5d28177b4d461d33c88cc11f6f3a5079e2b132c11e1746453bbb7a0c0b8a634f07541a2a234fa4758239d88203b758def509161b651e81958894c0b4b64b
+  languageName: node
+  linkType: hard
+
 "ssri@npm:^10.0.0":
   version: 10.0.4
   resolution: "ssri@npm:10.0.4"
@@ -4101,6 +4369,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"string_decoder@npm:~1.1.1":
+  version: 1.1.1
+  resolution: "string_decoder@npm:1.1.1"
+  dependencies:
+    safe-buffer: ~5.1.0
+  checksum: 9ab7e56f9d60a28f2be697419917c50cac19f3e8e6c28ef26ed5f4852289fe0de5d6997d29becf59028556f2c62983790c1d9ba1e2a3cc401768ca12d5183a5b
+  languageName: node
+  linkType: hard
+
 "strip-ansi-cjs@npm:strip-ansi@^6.0.1, strip-ansi@npm:^6.0.0, strip-ansi@npm:^6.0.1":
   version: 6.0.1
   resolution: "strip-ansi@npm:6.0.1"
@@ -4160,7 +4437,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"supports-color@npm:^5.3.0":
+"supports-color@npm:^5.3.0, supports-color@npm:^5.5.0":
   version: 5.5.0
   resolution: "supports-color@npm:5.5.0"
   dependencies:
@@ -4169,6 +4446,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"supports-color@npm:^7.1.0":
+  version: 7.2.0
+  resolution: "supports-color@npm:7.2.0"
+  dependencies:
+    has-flag: ^4.0.0
+  checksum: 3dda818de06ebbe5b9653e07842d9479f3555ebc77e9a0280caf5a14fb877ffee9ed57007c3b78f5a6324b8dbeec648d9e97a24e2ed9fdb81ddc69ea07100f4a
+  languageName: node
+  linkType: hard
+
+"supports-color@npm:^8.1.1":
+  version: 8.1.1
+  resolution: "supports-color@npm:8.1.1"
+  dependencies:
+    has-flag: ^4.0.0
+  checksum: c052193a7e43c6cdc741eb7f378df605636e01ad434badf7324f17fb60c69a880d8d8fcdcb562cf94c2350e57b937d7425ab5b8326c67c2adc48f7c87c1db406
+  languageName: node
+  linkType: hard
+
 "supports-preserve-symlinks-flag@npm:^1.0.0":
   version: 1.0.0
   resolution: "supports-preserve-symlinks-flag@npm:1.0.0"
@@ -4231,6 +4526,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"touch@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "touch@npm:3.1.0"
+  dependencies:
+    nopt: ~1.0.10
+  bin:
+    nodetouch: ./bin/nodetouch.js
+  checksum: e0be589cb5b0e6dbfce6e7e077d4a0d5f0aba558ef769c6d9c33f635e00d73d5be49da6f8631db302ee073919d82b5b7f56da2987feb28765c95a7673af68647
+  languageName: node
+  linkType: hard
+
 "tr46@npm:^1.0.1":
   version: 1.0.1
   resolution: "tr46@npm:1.0.1"
@@ -4326,6 +4632,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"undefsafe@npm:^2.0.5":
+  version: 2.0.5
+  resolution: "undefsafe@npm:2.0.5"
+  checksum: f42ab3b5770fedd4ada175fc1b2eb775b78f609156f7c389106aafd231bfc210813ee49f54483d7191d7b76e483bc7f537b5d92d19ded27156baf57592eb02cc
+  languageName: node
+  linkType: hard
+
 "unicode-emoji-modifier-base@npm:^1.0.0":
   version: 1.0.0
   resolution: "unicode-emoji-modifier-base@npm:1.0.0"
@@ -4433,7 +4746,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"util-deprecate@npm:^1.0.1":
+"util-deprecate@npm:^1.0.1, util-deprecate@npm:~1.0.1":
   version: 1.0.2
   resolution: "util-deprecate@npm:1.0.2"
   checksum: 474acf1146cb2701fe3b074892217553dfcf9a031280919ba1b8d651a068c9b15d863b7303cb15bd00a862b498e6cf4ad7b4a08fb134edd5a6f7641681cb54a2
@@ -4625,7 +4938,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yargs@npm:^17.5.1":
+"yargs@npm:^17.5.1, yargs@npm:^17.7.2":
   version: 17.7.2
   resolution: "yargs@npm:17.7.2"
   dependencies: