Merge pull request #594 from je4yfc/integration

Generalized Support for external services across compose generation and port checks
Merge pull request #589 from mjmaley/fix/cli-pasted-whitespace
2026-11-07 22:42:13 -10:00 · 2026-10-11 10:24:27 -05:00 · 2026-10-08 10:39:11 -05:00 · 2026-09-10 10:46:37 -04:00 · 2026-09-10 10:46:34 -04:00 · 2026-09-10 10:46:31 -04:00
2908 changed files with 195910 additions and 837675 deletions
@@ -0,0 +1,10 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "gomod"
+    directory: "/"
+    schedule:
+      interval: "weekly"
@@ -0,0 +1,573 @@
+# Pulled from Thanatos (https://github.com/MythicAgents/thanatos/blob/rewrite/.github/workflows/image.yml) - MEhrn00
+
+# Name for the Github actions workflow
+name: Build and push container images
+
+on:
+  # Only run workflow when there is a new release published in Github
+  #release:
+  #  types: [published]
+  push:
+    branches:
+      - 'Mythic3.3'
+      - 'master'
+    tags:
+      - "v*.*.*"
+
+# Variables holding configuration settings
+env:
+  # Container registry the built container image will be pushed to
+  REGISTRY: ghcr.io
+
+  # Set the container image name to the Github repository name. (its-a-feature/Mythic)
+  MYTHIC_SERVER_IMAGE_NAME: ${{ github.repository }}_server
+  MYTHIC_CLI_IMAGE_NAME: ${{ github.repository }}_cli
+  MYTHIC_POSTGRES_IMAGE_NAME: ${{ github.repository }}_postgres
+  MYTHIC_RABBITMQ_IMAGE_NAME: ${{ github.repository }}_rabbitmq
+  MYTHIC_DOCUMENTATION_IMAGE_NAME: ${{ github.repository }}_documentation
+  MYTHIC_JUPYTER_IMAGE_NAME: ${{ github.repository }}_jupyter
+  MYTHIC_GRAPHQL_IMAGE_NAME: ${{ github.repository }}_graphql
+  MYTHIC_NGINX_IMAGE_NAME: ${{ github.repository }}_nginx
+  MYTHIC_REACT_IMAGE_NAME: ${{ github.repository }}_react
+
+  # Description label for the package in Github
+  IMAGE_DESCRIPTION: "test containers for Mythic development. Do not use this version!"
+
+  # Source URL for the package in Github. This links the Github repository packages list
+  # to this container image
+  IMAGE_SOURCE: ${{ github.server_url }}/${{ github.repository }}
+
+  # License for the container image
+  IMAGE_LICENSE: BSD-3-Clause
+
+  # Set the container image version to the Github release tag
+  VERSION: ${{ github.ref_name }}
+
+  # Branch for pushing release changes
+  RELEASE_BRANCH: master
+
+jobs:
+  # Builds the base container image and pushes it to the container registry
+  mythic_server:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      packages: write
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v4 # ref: https://github.com/marketplace/actions/checkout
+      - name: Log in to the container registry
+        uses: docker/login-action@v3 # ref: https://github.com/marketplace/actions/docker-login
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+        with:
+          platforms: 'arm64,arm'
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v3
+      # the following are unique to this job
+      - name: Lowercase the server container image name
+        run: echo "MYTHIC_SERVER_IMAGE_NAME=${MYTHIC_SERVER_IMAGE_NAME,,}" >> ${GITHUB_ENV}
+      - name: Copy version file over
+        run: cp VERSION mythic-docker/src/VERSION
+      - name: Build and push the server container image
+        uses: docker/build-push-action@v5 # ref: https://github.com/marketplace/actions/build-and-push-docker-images
+        with:
+          context: mythic-docker
+          file: mythic-docker/.docker/Dockerfile
+          tags: |
+            ${{ env.REGISTRY }}/${{ env.MYTHIC_SERVER_IMAGE_NAME }}:${{ env.VERSION }}
+            ${{ env.REGISTRY }}/${{ env.MYTHIC_SERVER_IMAGE_NAME }}:latest
+          push: ${{ github.ref_type == 'tag' }}
+          # These container metadata labels allow configuring the package in Github
+          # packages. The source will link the package to this Github repository
+          labels: |
+            org.opencontainers.image.source=${{ env.IMAGE_SOURCE }}
+            org.opencontainers.image.description=${{ env.IMAGE_DESCRIPTION }}
+            org.opencontainers.image.licenses=${{ env.IMAGE_LICENSE }}
+          platforms: linux/amd64,linux/arm64
+
+  mythic_postgres:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      packages: write
+    steps:
+      # Pull in the repository code
+      - name: Checkout the repository
+        uses: actions/checkout@v4 # ref: https://github.com/marketplace/actions/checkout
+      - name: Log in to the container registry
+        uses: docker/login-action@v3 # ref: https://github.com/marketplace/actions/docker-login
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+        with:
+          platforms: 'arm64,arm'
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v3
+      # the following are unique to this job
+      - name: Lowercase the postgres container image name
+        run: echo "MYTHIC_POSTGRES_IMAGE_NAME=${MYTHIC_POSTGRES_IMAGE_NAME,,}" >> ${GITHUB_ENV}
+      - name: Build and push the postgres container image
+        uses: docker/build-push-action@v5 # ref: https://github.com/marketplace/actions/build-and-push-docker-images
+        with:
+          context: postgres-docker
+          file: postgres-docker/Dockerfile
+          tags: |
+            ${{ env.REGISTRY }}/${{ env.MYTHIC_POSTGRES_IMAGE_NAME }}:${{ env.VERSION }}
+            ${{ env.REGISTRY }}/${{ env.MYTHIC_POSTGRES_IMAGE_NAME }}:latest
+          push: ${{ github.ref_type == 'tag' }}
+          # These container metadata labels allow configuring the package in Github
+          # packages. The source will link the package to this Github repository
+          labels: |
+            org.opencontainers.image.source=${{ env.IMAGE_SOURCE }}
+            org.opencontainers.image.description=${{ env.IMAGE_DESCRIPTION }}
+            org.opencontainers.image.licenses=${{ env.IMAGE_LICENSE }}
+          platforms: linux/amd64,linux/arm64
+
+  mythic_rabbitmq:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      packages: write
+    steps:
+      # Pull in the repository code
+      - name: Checkout the repository
+        uses: actions/checkout@v4 # ref: https://github.com/marketplace/actions/checkout
+      - name: Log in to the container registry
+        uses: docker/login-action@v3 # ref: https://github.com/marketplace/actions/docker-login
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+        with:
+          platforms: 'arm64,arm'
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v3
+      # the following are unique to this job
+      - name: Lowercase the rabbitmq container image name
+        run: echo "MYTHIC_RABBITMQ_IMAGE_NAME=${MYTHIC_RABBITMQ_IMAGE_NAME,,}" >> ${GITHUB_ENV}
+      - name: Build and push the rabbitmq container image
+        uses: docker/build-push-action@v5 # ref: https://github.com/marketplace/actions/build-and-push-docker-images
+        with:
+          context: rabbitmq-docker
+          file: rabbitmq-docker/Dockerfile
+          tags: |
+            ${{ env.REGISTRY }}/${{ env.MYTHIC_RABBITMQ_IMAGE_NAME }}:${{ env.VERSION }}
+            ${{ env.REGISTRY }}/${{ env.MYTHIC_RABBITMQ_IMAGE_NAME }}:latest
+          push: ${{ github.ref_type == 'tag' }}
+          # These container metadata labels allow configuring the package in Github
+          # packages. The source will link the package to this Github repository
+          labels: |
+            org.opencontainers.image.source=${{ env.IMAGE_SOURCE }}
+            org.opencontainers.image.description=${{ env.IMAGE_DESCRIPTION }}
+            org.opencontainers.image.licenses=${{ env.IMAGE_LICENSE }}
+          platforms: linux/amd64,linux/arm64
+
+  mythic_documentation:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      packages: write
+    steps:
+      # Pull in the repository code
+      - name: Checkout the repository
+        uses: actions/checkout@v4 # ref: https://github.com/marketplace/actions/checkout
+      - name: Log in to the container registry
+        uses: docker/login-action@v3 # ref: https://github.com/marketplace/actions/docker-login
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+        with:
+          platforms: 'arm64,arm'
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v3
+      # the following are unique to this job
+      - name: Lowercase the documentation container image name
+        run: echo "MYTHIC_DOCUMENTATION_IMAGE_NAME=${MYTHIC_DOCUMENTATION_IMAGE_NAME,,}" >> ${GITHUB_ENV}
+      - name: Build and push the documentation container image
+        uses: docker/build-push-action@v5 # ref: https://github.com/marketplace/actions/build-and-push-docker-images
+        with:
+          context: documentation-docker
+          file: documentation-docker/Dockerfile
+          tags: |
+            ${{ env.REGISTRY }}/${{ env.MYTHIC_DOCUMENTATION_IMAGE_NAME }}:${{ env.VERSION }}
+            ${{ env.REGISTRY }}/${{ env.MYTHIC_DOCUMENTATION_IMAGE_NAME }}:latest
+          push: ${{ github.ref_type == 'tag' }}
+          # These container metadata labels allow configuring the package in Github
+          # packages. The source will link the package to this Github repository
+          labels: |
+            org.opencontainers.image.source=${{ env.IMAGE_SOURCE }}
+            org.opencontainers.image.description=${{ env.IMAGE_DESCRIPTION }}
+            org.opencontainers.image.licenses=${{ env.IMAGE_LICENSE }}
+          platforms: linux/amd64,linux/arm64
+
+  mythic_jupyter:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      packages: write
+    steps:
+      # Pull in the repository code
+      - name: Checkout the repository
+        uses: actions/checkout@v4 # ref: https://github.com/marketplace/actions/checkout
+      - name: Log in to the container registry
+        uses: docker/login-action@v3 # ref: https://github.com/marketplace/actions/docker-login
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+        with:
+          platforms: 'arm64,arm'
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v3
+
+      # these two are unique
+
+      - name: Lowercase the jupyter container image name
+        run: echo "MYTHIC_JUPYTER_IMAGE_NAME=${MYTHIC_JUPYTER_IMAGE_NAME,,}" >> ${GITHUB_ENV}
+      - name: Build and push the jupyter container image
+        uses: docker/build-push-action@v5 # ref: https://github.com/marketplace/actions/build-and-push-docker-images
+        with:
+          context: jupyter-docker
+          file: jupyter-docker/Dockerfile
+          tags: |
+            ${{ env.REGISTRY }}/${{ env.MYTHIC_JUPYTER_IMAGE_NAME }}:${{ env.VERSION }}
+            ${{ env.REGISTRY }}/${{ env.MYTHIC_JUPYTER_IMAGE_NAME }}:latest
+          push: ${{ github.ref_type == 'tag' }}
+          # These container metadata labels allow configuring the package in Github
+          # packages. The source will link the package to this Github repository
+          labels: |
+            org.opencontainers.image.source=${{ env.IMAGE_SOURCE }}
+            org.opencontainers.image.description=${{ env.IMAGE_DESCRIPTION }}
+            org.opencontainers.image.licenses=${{ env.IMAGE_LICENSE }}
+          platforms: linux/amd64,linux/arm64
+
+  mythic_graphql:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      packages: write
+    steps:
+      # Pull in the repository code
+      - name: Checkout the repository
+        uses: actions/checkout@v4 # ref: https://github.com/marketplace/actions/checkout
+      - name: Log in to the container registry
+        uses: docker/login-action@v3 # ref: https://github.com/marketplace/actions/docker-login
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+        with:
+          platforms: 'arm64,arm'
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v3
+
+      # these two are unique
+
+      - name: Lowercase the graphql container image name
+        run: echo "MYTHIC_GRAPHQL_IMAGE_NAME=${MYTHIC_GRAPHQL_IMAGE_NAME,,}" >> ${GITHUB_ENV}
+      - name: Build and push the graphql container image
+        uses: docker/build-push-action@v5 # ref: https://github.com/marketplace/actions/build-and-push-docker-images
+        with:
+          context: hasura-docker
+          file: hasura-docker/Dockerfile
+          tags: |
+            ${{ env.REGISTRY }}/${{ env.MYTHIC_GRAPHQL_IMAGE_NAME }}:${{ env.VERSION }}
+            ${{ env.REGISTRY }}/${{ env.MYTHIC_GRAPHQL_IMAGE_NAME }}:latest
+          push: ${{ github.ref_type == 'tag' }}
+          # These container metadata labels allow configuring the package in Github
+          # packages. The source will link the package to this Github repository
+          labels: |
+            org.opencontainers.image.source=${{ env.IMAGE_SOURCE }}
+            org.opencontainers.image.description=${{ env.IMAGE_DESCRIPTION }}
+            org.opencontainers.image.licenses=${{ env.IMAGE_LICENSE }}
+          platforms: linux/amd64,linux/arm64
+
+  mythic_nginx:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      packages: write
+    steps:
+      # Pull in the repository code
+      - name: Checkout the repository
+        uses: actions/checkout@v4 # ref: https://github.com/marketplace/actions/checkout
+      - name: Log in to the container registry
+        uses: docker/login-action@v3 # ref: https://github.com/marketplace/actions/docker-login
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+        with:
+          platforms: 'arm64,arm'
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v3
+
+      # these two are unique
+
+      - name: Lowercase the nginx container image name
+        run: echo "MYTHIC_NGINX_IMAGE_NAME=${MYTHIC_NGINX_IMAGE_NAME,,}" >> ${GITHUB_ENV}
+      - name: Build and push the nginx container image
+        uses: docker/build-push-action@v5 # ref: https://github.com/marketplace/actions/build-and-push-docker-images
+        with:
+          context: nginx-docker
+          file: nginx-docker/Dockerfile
+          tags: |
+            ${{ env.REGISTRY }}/${{ env.MYTHIC_NGINX_IMAGE_NAME }}:${{ env.VERSION }}
+            ${{ env.REGISTRY }}/${{ env.MYTHIC_NGINX_IMAGE_NAME }}:latest
+          push: ${{ github.ref_type == 'tag' }}
+          # These container metadata labels allow configuring the package in Github
+          # packages. The source will link the package to this Github repository
+          labels: |
+            org.opencontainers.image.source=${{ env.IMAGE_SOURCE }}
+            org.opencontainers.image.description=${{ env.IMAGE_DESCRIPTION }}
+            org.opencontainers.image.licenses=${{ env.IMAGE_LICENSE }}
+          platforms: linux/amd64,linux/arm64
+
+  mythic_react:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      packages: write
+    steps:
+      # Pull in the repository code
+      - name: Checkout the repository
+        uses: actions/checkout@v4 # ref: https://github.com/marketplace/actions/checkout
+        with:
+          lfs: true
+      - name: Log in to the container registry
+        uses: docker/login-action@v3 # ref: https://github.com/marketplace/actions/docker-login
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+        with:
+          platforms: 'arm64,arm'
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v3
+
+      # these two are unique
+
+      - name: Lowercase the react container image name
+        run: echo "MYTHIC_REACT_IMAGE_NAME=${MYTHIC_REACT_IMAGE_NAME,,}" >> ${GITHUB_ENV}
+      - name: Build and push the react container image
+        uses: docker/build-push-action@v5 # ref: https://github.com/marketplace/actions/build-and-push-docker-images
+        with:
+          context: mythic-react-docker
+          file: mythic-react-docker/Dockerfile
+          tags: |
+            ${{ env.REGISTRY }}/${{ env.MYTHIC_REACT_IMAGE_NAME }}:${{ env.VERSION }}
+            ${{ env.REGISTRY }}/${{ env.MYTHIC_REACT_IMAGE_NAME }}:latest
+          push: ${{ github.ref_type == 'tag' }}
+          # These container metadata labels allow configuring the package in Github
+          # packages. The source will link the package to this Github repository
+          labels: |
+            org.opencontainers.image.source=${{ env.IMAGE_SOURCE }}
+            org.opencontainers.image.description=${{ env.IMAGE_DESCRIPTION }}
+            org.opencontainers.image.licenses=${{ env.IMAGE_LICENSE }}
+          platforms: linux/amd64,linux/arm64
+
+  # update mythic-cli latest after we're sure all the others build properly
+  mythic_cli:
+    runs-on: ubuntu-latest
+    needs:
+      - mythic_server
+      - mythic_postgres
+      - mythic_rabbitmq
+      - mythic_documentation
+      - mythic_jupyter
+      - mythic_graphql
+      - mythic_nginx
+      - mythic_react
+    permissions:
+      contents: write
+      packages: write
+    steps:
+      # Pull in the repository code
+      - name: Checkout the repository
+        uses: actions/checkout@v4 # ref: https://github.com/marketplace/actions/checkout
+      - name: Log in to the container registry
+        uses: docker/login-action@v3 # ref: https://github.com/marketplace/actions/docker-login
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+        with:
+          platforms: 'arm64,arm'
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v3
+      # the following are unique to this job
+      - name: Lowercase the cli container image name
+        run: echo "MYTHIC_CLI_IMAGE_NAME=${MYTHIC_CLI_IMAGE_NAME,,}" >> ${GITHUB_ENV}
+
+      - name: Fix the mythic_docker_latest reference to reference the new release tag
+        working-directory: Mythic_CLI/src/cmd/config
+        run: |
+          sed -i "s|^const MythicDockerLatest =.*$|const MythicDockerLatest = \"${VERSION}\"|" constants.go
+
+      - name: Build and push the cli container image
+        uses: docker/build-push-action@v5 # ref: https://github.com/marketplace/actions/build-and-push-docker-images
+        with:
+          context: Mythic_CLI
+          file: Mythic_CLI/Dockerfile
+          tags: |
+            ${{ env.REGISTRY }}/${{ env.MYTHIC_CLI_IMAGE_NAME }}:${{ env.VERSION }}
+            ${{ env.REGISTRY }}/${{ env.MYTHIC_CLI_IMAGE_NAME }}:latest
+          push: ${{ github.ref_type == 'tag' }}
+          # These container metadata labels allow configuring the package in Github
+          # packages. The source will link the package to this Github repository
+          labels: |
+            org.opencontainers.image.source=${{ env.IMAGE_SOURCE }}
+            org.opencontainers.image.licenses=${{ env.IMAGE_LICENSE }}
+          platforms: linux/amd64,linux/arm64
+          outputs: type=image,name=target,annotation-index.org.opencontainers.image.description=${{ env.IMAGE_DESCRIPTION }}
+
+  update_files:
+    runs-on: ubuntu-latest
+    needs:
+      - mythic_server
+      - mythic_cli
+      - mythic_postgres
+      - mythic_rabbitmq
+      - mythic_documentation
+      - mythic_jupyter
+      - mythic_graphql
+      - mythic_nginx
+      - mythic_react
+    permissions:
+      contents: write
+      packages: write
+
+    steps:
+      # Pull in the repository code
+      - name: Checkout the repository
+        uses: actions/checkout@v4 # ref: https://github.com/marketplace/actions/checkout
+
+      # update names to lowercase
+      - name: Lowercase the server container image name
+        run: echo "MYTHIC_SERVER_IMAGE_NAME=${MYTHIC_SERVER_IMAGE_NAME,,}" >> ${GITHUB_ENV}
+      - name: Lowercase the cli container image name
+        run: echo "MYTHIC_CLI_IMAGE_NAME=${MYTHIC_CLI_IMAGE_NAME,,}" >> ${GITHUB_ENV}
+      - name: Lowercase the postgres container image name
+        run: echo "MYTHIC_POSTGRES_IMAGE_NAME=${MYTHIC_POSTGRES_IMAGE_NAME,,}" >> ${GITHUB_ENV}
+      - name: Lowercase the rabbitmq container image name
+        run: echo "MYTHIC_RABBITMQ_IMAGE_NAME=${MYTHIC_RABBITMQ_IMAGE_NAME,,}" >> ${GITHUB_ENV}
+      - name: Lowercase the documentation container image name
+        run: echo "MYTHIC_DOCUMENTATION_IMAGE_NAME=${MYTHIC_DOCUMENTATION_IMAGE_NAME,,}" >> ${GITHUB_ENV}
+      - name: Lowercase the jupyter container image name
+        run: echo "MYTHIC_JUPYTER_IMAGE_NAME=${MYTHIC_JUPYTER_IMAGE_NAME,,}" >> ${GITHUB_ENV}
+      - name: Lowercase the graphql container image name
+        run: echo "MYTHIC_GRAPHQL_IMAGE_NAME=${MYTHIC_GRAPHQL_IMAGE_NAME,,}" >> ${GITHUB_ENV}
+      - name: Lowercase the nginx container image name
+        run: echo "MYTHIC_NGINX_IMAGE_NAME=${MYTHIC_NGINX_IMAGE_NAME,,}" >> ${GITHUB_ENV}
+      - name: Lowercase the react container image name
+        run: echo "MYTHIC_REACT_IMAGE_NAME=${MYTHIC_REACT_IMAGE_NAME,,}" >> ${GITHUB_ENV}
+      # The Dockerfile which Mythic uses to pull in the base container image needs to be
+      # updated to reference the newly built container image
+      - name: Fix the server Dockerfile reference to reference the new release tag
+        working-directory: mythic-docker
+        run: |
+          sed -i "s|^FROM ghcr\.io.*$|FROM ${REGISTRY}/${MYTHIC_SERVER_IMAGE_NAME}:${VERSION}|" Dockerfile
+
+      - name: Fix the cli Dockerfile reference to reference the new release tag
+        working-directory: Mythic_CLI
+        run: |
+          sed -i "s|^FROM ghcr\.io.*$|FROM ${REGISTRY}/${MYTHIC_CLI_IMAGE_NAME}:${VERSION}|" Dockerfile
+
+      - name: Fix the cli Makefile reference to reference the new release tag
+        working-directory: Mythic_CLI
+        run: |
+          sed -i "s|^BUILDER_IMAGE=ghcr\.io.*$|BUILDER_IMAGE=${REGISTRY}/${MYTHIC_CLI_IMAGE_NAME}:${VERSION}|" Makefile
+
+      - name: Fix the mythic_docker_latest reference to reference the new release tag
+        working-directory: Mythic_CLI/src/cmd/config
+        run: |
+          sed -i "s|^const MythicDockerLatest =.*$|const MythicDockerLatest = \"${VERSION}\"|" constants.go
+
+      - name: Fix the postgres Dockerfile reference to reference the new release tag
+        working-directory: postgres-docker
+        run: |
+          sed -i "s|^FROM ghcr\.io.*$|FROM ${REGISTRY}/${MYTHIC_POSTGRES_IMAGE_NAME}:${VERSION}|" Dockerfile
+
+      - name: Fix the rabbitmq Dockerfile reference to reference the new release tag
+        working-directory: rabbitmq-docker
+        run: |
+          sed -i "s|^FROM ghcr\.io.*$|FROM ${REGISTRY}/${MYTHIC_RABBITMQ_IMAGE_NAME}:${VERSION}|" Dockerfile
+
+      - name: Fix the documentation Dockerfile reference to reference the new release tag
+        working-directory: documentation-docker
+        run: |
+          sed -i "s|^FROM ghcr\.io.*$|FROM ${REGISTRY}/${MYTHIC_DOCUMENTATION_IMAGE_NAME}:${VERSION}|" Dockerfile
+
+      - name: Fix the jupyter Dockerfile reference to reference the new release tag
+        working-directory: jupyter-docker
+        run: |
+          sed -i "s|^FROM ghcr\.io.*$|FROM ${REGISTRY}/${MYTHIC_JUPYTER_IMAGE_NAME}:${VERSION}|" Dockerfile
+      - name: Fix the graphql Dockerfile reference to reference the new release tag
+        working-directory: hasura-docker
+        run: |
+          sed -i "s|^FROM ghcr\.io.*$|FROM ${REGISTRY}/${MYTHIC_GRAPHQL_IMAGE_NAME}:${VERSION}|" Dockerfile
+      - name: Fix the nginx Dockerfile reference to reference the new release tag
+        working-directory: nginx-docker
+        run: |
+          sed -i "s|^FROM ghcr\.io.*$|FROM ${REGISTRY}/${MYTHIC_NGINX_IMAGE_NAME}:${VERSION}|" Dockerfile
+      - name: Fix the react Dockerfile reference to reference the new release tag
+        working-directory: mythic-react-docker
+        run: |
+          sed -i "s|^FROM ghcr\.io.*$|FROM ${REGISTRY}/${MYTHIC_REACT_IMAGE_NAME}:${VERSION}|" Dockerfile
+      # Push the changes to the Dockerfile
+      - name: Push the updated base Dockerfile image reference changes
+        if: ${{ github.ref_type == 'tag' }}
+        uses: EndBug/add-and-commit@v9 # ref: https://github.com/marketplace/actions/add-commit
+        with:
+          # Only add the Dockerfile changes. Nothing else should have been modified
+          add: "['Mythic_CLI/Makefile', 'Mythic_CLI/src/cmd/config/constants.go']"
+          # Use the Github actions bot for the commit author
+          default_author: github_actions
+          committer_email: github-actions[bot]@users.noreply.github.com
+
+          # Set the commit message
+          message: "Bump Mythic Dockerfile tag to match release '${{ env.VERSION }}'"
+
+          # Overwrite the current git tag with the new changes
+          tag: '${{ env.VERSION }} --force'
+
+          # Push the new changes with the tag overwriting the current one
+          tag_push: '--force'
+
+          # Push the commits to the branch marked as the release branch
+          push: origin HEAD:${{ env.RELEASE_BRANCH }} --set-upstream
+
+          # Have the workflow fail in case there are pathspec issues
+          pathspec_error_handling: exitImmediately
@@ -4,10 +4,20 @@ __pycache__/
 docs/_build/
 # Environments
 .env
+tmp
+saved_images/
 .venv
+*.swp
+mythic_server
+docker-compose.yml
+.ipynb_checkpoints/
 env/
 venv/
 ENV/
+mythic-cli
+.DS_Store
+[0-9a-zA-Z]*-[0-9a-zA-Z]*-[0-9a-zA-Z]*-[0-9a-zA-Z]*-[0-9a-zA-Z]*
+*.svg
 env.bak/
 venv.bak/
 # pycharm
@@ -15,16 +25,20 @@ venv.bak/
 # ssl certs
 ssl/
 # Mythic files
-files/
+nginx-docker/config/blockips.conf
+mythic-docker/src/Mythic
 mythic_access.*
 mythic_sync/
 postgres-docker/database/
 rabbitmq-docker/storage/
 C2_profiles/
 Payload_Types/
+InstalledServices/
 Docker_Templates/
 documentation-docker/content/
+documentation-docker/public/
 display_output.txt
+full_attack.json
 nginx-docker/config/conf.d/services.conf
 ## Ignore Visual Studio temporary files, build results, and
 ## files generated by popular Visual Studio add-ons.
@@ -149,3 +163,10 @@ _ReSharper*/

 # vscode
 .vscode/
+
+jupyter-docker/jupyter/MythicExamples/.ipynb_checkpoints/
+
+nginx-docker/config/blockips.conf
+/MythicReactUI/build/
+/MythicReactUI/node_modules/
+/.gocache/
@@ -1 +0,0 @@
-FROM itsafeaturemythic/python38_sanic_c2profile:0.0.6
@@ -1,18 +0,0 @@
-{
-  "instances": [
-  {
-    "ServerHeaders": {
-      "Server": "NetDNA-cache/2.2",
-      "Cache-Control": "max-age=0, no-cache",
-      "Pragma": "no-cache",
-      "Connection": "keep-alive",
-      "Content-Type": "application/javascript; charset=utf-8"
-    },
-    "port": 80,
-    "key_path": "",
-    "cert_path": "",
-    "use_ssl": false,
-    "debug": false
-    }
-  ]
-}
@@ -1,10 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Page Not Found!</title>
-</head>
-<body>
-
-</body>
-</html>
@@ -1,157 +0,0 @@
-#!/usr/bin/env python3
-
-"""This is an example implementation of a C2 server that processes HTTP
-communications with an Agent, performs routing with the Mythic server,
-and adds the required Mythic header to the HTTP response to identify
-the C2 profile forwarding the request.
-"""
-from sanic import Sanic
-from sanic.response import html, redirect, text, raw
-from sanic.exceptions import NotFound
-import sys
-import asyncio
-import ssl
-from pathlib import Path
-import requests
-import json
-import os
-
-config = {}
-
-async def print_flush(message):
-    """Print message and flush the stdout buffer.
-    
-    Python's stdout is buffered, so it collects data written
-    into a buffer before it is written to the terminal. This
-    forces the buffer to be written to the terminal instead of
-    waiting for output to eventually occur.
-
-    Args:
-        message: self-explanatory
-    """
-    print(message)
-    sys.stdout.flush()
-
-
-def server_error_handler(request, exception):
-    """Error handler for Sanic app. Formats server error to be presented.
-    
-    Args:
-        request: object containing the HTTP request information
-        exception: object containing exception information
-
-    """
-    if request is None:
-        print("Invalid HTTP Method - Likely HTTPS trying to talk to HTTP")
-        sys.stdout.flush()
-        return html("Error: Failed to process request", status=500, headers={})
-    return html("Error: Requested URL {} not found".format(request.url), status=404, headers=config[request.app.name]['headers'])
-
-
-async def agent_message(request, **kwargs):
-    """This is the route handler that processes a request from the Agent.
-    
-    Args:
-        request: object containing the HTTP request information
-        **kwargs: any additional arguments
-    Returns:
-        HTTP response object
-    """
-    global config
-    try:
-        if config[request.app.name]['debug']:
-            await print_flush("agent_message request from: {} with {} and {}".format(request.url, request.cookies, request.headers))
-            await print_flush(" and URI: {}".format(request.query_string))
-        if config[request.app.name]['debug']:
-            await print_flush("Forwarding along to: {}".format(config['mythic_address']))
-        if request.method == "POST":
-            # manipulate the request if needed - change the "Mythic" header to match the name of your C2 profile
-            
-            #await MythicCallbackRPC().add_event_message(message="got a POST message")
-            response = requests.post(config['mythic_address'], data=request.body, verify=False, cookies=request.cookies, headers={"Mythic": "http", **request.headers})
-        else:
-            # manipulate the request if needed - change the "Mythic" header to match the name of your C2 profile
-            
-            #await MythicCallbackRPC().add_event_message(message="got a GET message")
-            #msg = await MythicCallbackRPC().encrypt_bytes(with_uuid=True, data="my message".encode(), uuid="eaf10700-cb30-402d-b101-8e35d67cdb41")
-            #await MythicCallbackRPC().add_event_message(message=msg.response)
-            response = requests.get(config['mythic_address'] + "?{}".format(request.query_string), verify=False, data=request.body, cookies=request.cookies, headers={"Mythic": "http", **request.headers})
-        return raw(response.content, headers=config[request.app.name]['headers'], status=response.status_code)
-    except Exception as e:
-        if request is None:
-            await print_flush("Invalid HTTP Method - Likely HTTPS trying to talk to HTTP")
-            return server_error_handler(request, e)
-        if config[request.app.name]['debug']:
-            await print_flush("error in agent_message: {}".format(str(e)))
-        return server_error_handler(request, e)
-
-
-
-if __name__ == "__main__":
-    sys.path.append("/Mythic/mythic")
-    from mythic_c2_container.C2ProfileBase import *
-    from mythic_c2_container.MythicCallbackRPC import *
-    config_file = open("config.json", 'rb')
-    main_config = json.loads(config_file.read().decode('utf-8'))
-    print("Opening config and starting instances...")
-    sys.stdout.flush()
-    # basic mapping of the general endpoints to the real endpoints
-    try:
-        config['mythic_address'] = os.environ['MYTHIC_ADDRESS']
-    except Exception as e:
-        print("failed to find MYTHIC_ADDRESS environment variable")
-        sys.stdout.flush()
-        sys.exit(1)
-    # now look at the specific instances to start
-    for inst in main_config['instances']:
-        config[str(inst['port'])] = {'debug': inst['debug'],
-                                     'headers': inst['ServerHeaders']}
-        if inst['debug']:
-            print("Debugging statements are enabled. This gives more context, but might be a performance hit")
-        else:
-            print("Debugging statements are disabled")
-        sys.stdout.flush()
-        # now to create an app instance to handle responses
-        app = Sanic(str(inst['port']))
-        app.config['REQUEST_MAX_SIZE'] = 1000000000
-        app.config['REQUEST_TIMEOUT'] = 600
-        app.config['RESPONSE_TIMEOUT'] = 600
-        app.add_route(agent_message, "/<uri:path>", methods=['GET','POST'])
-        app.add_route(agent_message, "/", methods=['GET','POST'])
-        app.error_handler.add(Exception, server_error_handler)
-        keyfile = Path(inst['key_path'])
-        certfile = Path(inst['cert_path'])
-        if keyfile.is_file() and certfile.is_file():
-            context = ssl.create_default_context(purpose=ssl.Purpose.CLIENT_AUTH)
-            context.load_cert_chain(inst['cert_path'], keyfile=inst['key_path'])
-            if inst['debug']:
-                server = app.create_server(host="0.0.0.0", port=inst['port'], ssl=context, debug=False, return_asyncio_server=True, access_log=True)
-            else:
-                server = app.create_server(host="0.0.0.0", port=inst['port'], ssl=context, debug=False, return_asyncio_server=True, access_log=False)
-            if inst['debug']:
-                print("using SSL for port {}".format(inst['port']))
-                sys.stdout.flush()
-        else:
-            if inst['debug']:
-                print("not using SSL for port {}".format(inst['port']))
-                sys.stdout.flush()
-            if inst['debug']:
-                server = app.create_server(host="0.0.0.0", port=inst['port'], debug=False, return_asyncio_server=True, access_log=True)
-            else:
-                server = app.create_server(host="0.0.0.0", port=inst['port'], debug=False, return_asyncio_server=True, access_log=False)
-        task = asyncio.ensure_future(server)
-
-    try:
-        loop = asyncio.get_event_loop()
-        def callback(fut):
-            try:
-                fetch_count = fut.result()
-            except:
-                print("port already in use")
-                sys.stdout.flush()
-                sys.exit()
-        task.add_done_callback(callback)
-        loop.run_forever()
-    except:
-        sys.exit()
-        loop.stop()
@@ -1,206 +0,0 @@
-"""This file provides basic examples of the C2 RPC functions.
-
-The following functions are implemented to provide an example of implementation:
- test
- opsec: checks C2 profile parameters to verify they meet user-specified OPSEC-safe implementations
- config_check: check and validate supplied parameters when an payload request is generated
- redirect_rules: generate redirect rules for a specific payload when called on-demand by operator
-
-Documentation follows Google Python Style Guide for comments:
-https://github.com/google/styleguide/blob/gh-pages/pyguide.md#38-comments-and-docstrings
-"""
-from mythic_c2_container.MythicRPC import *
-import json
-import netifaces
-
-async def test(request):
-    """Performs a test.
-    Args:
-        request: dict containing the function name, and parameters passed for the payload build.
-         {"action": func_name, "message": "the input", "task_id": task id num}
-
-    Returns:
-        A RPCResponse object containing status and response message
-    """
-    response = RPCResponse()
-    response.status = RPCStatus.Success
-    response.response = "hello"
-    resp = await MythicRPC().execute("create_event_message", message="Test message", warning=False)
-    return response
-
-async def opsec(request):
-    """Checks C2 profile parameters to verify they meet user-specified OPSEC-safe implementations.
-    
-    Args:
-        request: dict containing the function name, and parameters passed for the payload build.
-        
-        { "action": "opsec", "parameters": {"param_name": "param_value", "param_name2": "param_value2", ....} }
-
-    Returns:
-        A dict containing either a success or error status/message. For example:
-        
-        success: {"status": "success", "message": "<your success message here>" }
-        error:   {"status": "error", "error": "<your error message here>" }
-    """
-    # perform OPSEC checks against the parameters. In this example, the callback port
-    # is checked against common HTTPS ports when the callback host contains "https"
-    params = request["parameters"]
-    if "https" in params["callback_host"] and params["callback_port"] not in ["443", "8443", "7443"]:
-         return {"status": "error", "error": f"Mismatch - HTTPS specified, but port {params['callback_port']}, is not one of the standard port (443, 8443)\n"}
-
-    # if no OPSEC checks, just return the following message
-    # return {"status": "success", "message": "No OPSEC checks performed\n"}
-    # otherwise, indicate that OPSEC checks were successful
-    return {"status": "success", "message": "Basic OPSEC checks passed\n"}
-
-
-
-async def config_check(request):
-    """Check and validate supplied parameters when an payload request is generated.
-    
-    Args:
-        request: dict containing the function name, and parameters passed for the payload build.
-
-        { "action": "config_check", "parameters": {"param_name": "param_value", "param_name2": "param_value2", ....} }
-
-    Returns:
-        A dict containing either a success or error status/message. For example:
-        
-        success: {"status": "success", "message": "<your success message here>" }
-        error:   {"status": "error", "error": "<your error message here>" }
-    """
-    # Open the C2 profile's config.json and, build a list of ports, and confirm port use.
-    # This example code uses the default config.json.
-    try:
-        
-        with open("../c2_code/config.json") as f:
-            config = json.load(f)
-            possible_ports = []
-            for inst in config["instances"]:
-                possible_ports.append({"port": inst["port"], "use_ssl": inst["use_ssl"]})
-                if str(inst["port"]) == str(request["parameters"]["callback_port"]):
-                    if "https" in request["parameters"]["callback_host"] and not inst["use_ssl"]:
-                        message = f"C2 Profile container is configured to NOT use SSL on port {inst['port']}, but the callback host for the agent is using https, {request['parameters']['callback_host']}.\n\n"
-                        message += "This means there should be the following connectivity for success:\n"
-                        message += f"Agent via SSL to {request['parameters']['callback_host']} on port {inst['port']}, then redirection to C2 Profile container WITHOUT SSL on port {inst['port']}"
-                        return {"status": "error", "error": message}
-                    elif "https" not in request["parameters"]["callback_host"] and inst["use_ssl"]:
-                        message = f"C2 Profile container is configured to use SSL on port {inst['port']}, but the callback host for the agent is using http, {request['parameters']['callback_host']}.\n\n"
-                        message += "This means there should be the following connectivity for success:\n"
-                        message += f"Agent via NO SSL to {request['parameters']['callback_host']} on port {inst['port']}, then redirection to C2 Profile container WITH SSL on port {inst['port']}"
-                        return {"status": "error", "error": message}
-                    else:
-                        message = f"C2 Profile container and agent configuration match port, {inst['port']}, and SSL expectations.\n"
-                        return {"status": "success", "message": message}
-            message = f"Failed to find port, {request['parameters']['callback_port']}, in C2 Profile configuration\n"
-            message += f"This could indicate the use of a redirector, or a mismatch in expected connectivity.\n\n"
-            message += f"This means there should be the following connectivity for success:\n"
-            if "https" in request["parameters"]["callback_host"]:
-                message += f"Agent via HTTPS on port {request['parameters']['callback_port']} to {request['parameters']['callback_host']} (should be a redirector).\n"
-            else:
-                message += f"Agent via HTTP on port {request['parameters']['callback_port']} to {request['parameters']['callback_host']} (should be a redirector).\n"
-            if len(possible_ports) == 1:
-                message += f"Redirector then forwards request to C2 Profile container on port, {possible_ports[0]['port']}, {'WITH SSL' if possible_ports[0]['use_ssl'] else 'WITHOUT SSL'}"
-            else:
-                message += f"Redirector then forwards request to C2 Profile container on one of the following ports: {json.dumps(possible_ports)}\n"
-            if "https" in request["parameters"]["callback_host"]:
-                message += f"\nAlternatively, this might mean that you want to do SSL but are not using SSL within your C2 Profile container.\n"
-                message += f"To add SSL to your C2 profile:\n"
-                message += f"\t1. Go to the C2 Profile page\n"
-                message += f"\t2. Click configure for the http profile\n"
-                message += f"\t3. Change 'use_ssl' to 'true' and make sure the port is {request['parameters']['callback_port']}\n"
-                message += f"\t4. Click to stop the profile and then start it again\n"
-            return {"status": "success", "message": message}
-    except Exception as e:
-        return {"status": "error", "error": str(e)}
-
-
-
-async def redirect_rules(request):
-    """Generate redirect rules for a specific payload when called on-demand by operator.
-
-    Operationally, users invoke this function from the Payloads page in the Mythic UI with a
-    dropdown menu for the payload they're interested in. These rules can include functionality
-    such as Apache mod_rewrite rules, Nginx configurations, etc. This function simply generates
-    output that the operator must then copy and implement on a redirector.
-
-    Args:
-        request: dict containing the function name, and the same profile parameters that were
-        passed to the opsec and config_check functions.
-        
-        { "action": "redirect_rules", "parameters": {"param_name": "param_value", "param_name2": "param_value2", ....} }
-
-    Returns:
-        A dict containing either a success or error status/message. For example:
-    
-        success: {"status": "success", "message": "<your success message here>" }
-        error:   {"status": "error", "error": "<your error message here>" }
-
-    """
-    # This example generates Apache mod_rewrite rules for Mythic C2 profiles
-    # to redirect non-C2 traffic to another site.
-    output = "mod_rewrite rules generated from @AndrewChiles' project https://github.com/threatexpress/mythic2modrewrite:\n"
-    # Get User-Agent
-    errors = ""
-    ua = ''
-    uris = []
-    if "headers" in request['parameters']:
-        for header in request['parameters']["headers"]:
-            if header["key"] == "User-Agent":
-                ua = header["value"]
-    else:
-        errors += "[!] User-Agent Not Found\n"
-    # Get all profile URIs
-    if "get_uri" in request['parameters']:
-        uris.append("/" + request['parameters']["get_uri"])
-    else:
-        errors += "[!] No GET URI found\n"
-    if "post_uri" in request['parameters']:
-        uris.append("/" + request['parameters']["post_uri"])
-    else:
-        errors += "[!] No POST URI found\n"
-    # Create UA in modrewrite syntax. No regex needed in UA string matching, but () characters must be escaped
-    ua_string = ua.replace('(', '\(').replace(')', '\)')
-    # Create URI string in modrewrite syntax. "*" are needed in regex to support GET and uri-append parameters on the URI
-    uris_string = ".*|".join(uris) + ".*"
-    try:
-        interface = netifaces.gateways()['default'][netifaces.AF_INET][1]
-        address = netifaces.ifaddresses(interface)[netifaces.AF_INET][0]['addr']
-        c2_rewrite_template = """RewriteRule ^.*$ "{c2server}%{{REQUEST_URI}}" [P,L]"""
-        c2_rewrite_output = []
-        with open("../c2_code/config.json") as f:
-            config = json.load(f)
-            for inst in config["instances"]:
-                c2_rewrite_output.append(c2_rewrite_template.format(
-                    c2server=f"https://{address}:{inst['port']}" if inst["use_ssl"] else f"http://{address}:{inst['port']}"
-                ))
-    except Exception as e:
-        errors += "[!] Failed to get C2 Profile container IP address. Replace 'c2server' in HTACCESS rules with correct IP\n"
-        c2_rewrite_output = ["""RewriteRule ^.*$ "{c2server}%{{REQUEST_URI}}" [P,L]"""]
-    htaccess_template = '''
-########################################
-## .htaccess START
-RewriteEngine On
-## C2 Traffic (HTTP-GET, HTTP-POST, HTTP-STAGER URIs)
-## Logic: If a requested URI AND the User-Agent matches, proxy the connection to the Teamserver
-## Consider adding other HTTP checks to fine tune the check.  (HTTP Cookie, HTTP Referer, HTTP Query String, etc)
-## Refer to http://httpd.apache.org/docs/current/mod/mod_rewrite.html
-## Only allow GET and POST methods to pass to the C2 server
-RewriteCond %{{REQUEST_METHOD}} ^(GET|POST) [NC]
-## Profile URIs
-RewriteCond %{{REQUEST_URI}} ^({uris})$
-## Profile UserAgent
-RewriteCond %{{HTTP_USER_AGENT}} "{ua}"
-{c2servers}
-## Redirect all other traffic here
-RewriteRule ^.*$ {redirect}/? [L,R=302]
-## .htaccess END
-########################################
-    '''
-    htaccess = htaccess_template.format(uris=uris_string, ua=ua_string, c2servers="\n".join(c2_rewrite_output), redirect="redirect")
-    output += "\tReplace 'redirect' with the http(s) address of where non-matching traffic should go, ex: https://redirect.com\n"
-    output += f"\n{htaccess}"
-    if errors != "":
-        return {"status": "error", "error": errors}
-    else:
-        return {"status": "success", "message": output}
@@ -1,138 +0,0 @@
-"""This file configures the C2 parameters to be used by a payload for communications.
-
-Mythic will utilize the defined class inheriting C2Profile to identify the C2 profile
-and parameters that are presented to the operator in the payload creation UI. These
-parameters are added to the payload's PayloadType (builder.py) so they can be used
-during the build process.
-"""
-from mythic_c2_container.C2ProfileBase import *
-
-class HTTP(C2Profile):
-    name = "http"
-    description = "Uses HTTP(S) connections with a simple query parameter or basic POST messages. For more configuration options use dynamicHTTP."
-    author = "@its_a_feature_"
-    is_p2p = False
-    is_server_routed = False
-    parameters = [
-        C2ProfileParameter(
-            name="callback_port",
-            description="Callback Port",
-            default_value="80",
-            verifier_regex="^[0-9]+$",
-            required=False,
-        ),
-        C2ProfileParameter(
-            name="killdate",
-            description="Kill Date",
-            parameter_type=ParameterType.Date,
-            default_value=365,
-            required=False,
-        ),
-        C2ProfileParameter(
-            name="encrypted_exchange_check",
-            description="Perform Key Exchange",
-            choices=["T", "F"],
-            required=False,
-            parameter_type=ParameterType.ChooseOne,
-        ),
-        C2ProfileParameter(
-            name="callback_jitter",
-            description="Callback Jitter in percent",
-            default_value="23",
-            verifier_regex="^[0-9]+$",
-            required=False,
-        ),
-        C2ProfileParameter(
-            name="headers",
-            description="HTTP Headers",
-            required=False,
-            parameter_type=ParameterType.Dictionary,
-            default_value=[
-                {
-                    "name": "User-Agent",
-                    "max": 1,
-                    "default_value": "Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko",
-                    "default_show": True,
-                },
-                {
-                    "name": "Host",
-                    "max": 1,
-                    "default_value": "",
-                    "default_show": False,
-                },
-                {
-                    "name": "*",
-                    "max": -1,
-                    "default_value": "",
-                    "default_show": False
-                }
-            ]
-        ),
-        C2ProfileParameter(
-            name="AESPSK",
-            description="Crypto type",
-            default_value="aes256_hmac",
-            parameter_type=ParameterType.ChooseOne,
-            choices=["aes256_hmac", "none"],
-            required=False,
-            crypto_type=True
-        ),
-        C2ProfileParameter(
-            name="callback_host",
-            description="Callback Host",
-            default_value="https://domain.com",
-            verifier_regex="^(http|https):\/\/[a-zA-Z0-9]+",
-        ),
-        C2ProfileParameter(
-            name="get_uri",
-            description="GET request URI (don't include leading /)",
-            default_value="index",
-            required=False,
-        ),
-        C2ProfileParameter(
-            name="post_uri",
-            description="POST request URI (don't include leading /)",
-            default_value="data",
-            required=False,
-        ),
-        C2ProfileParameter(
-            name="query_path_name",
-            description="Name of the query parameter for GET requests",
-            default_value="q",
-            required=False,
-            verifier_regex="^[^\/]",
-        ),
-        C2ProfileParameter(
-            name="proxy_host",
-            description="Proxy Host",
-            default_value="",
-            required=False,
-            verifier_regex="^$|^(http|https):\/\/[a-zA-Z0-9]+",
-        ),
-        C2ProfileParameter(
-            name="proxy_port",
-            description="Proxy Port",
-            default_value="",
-            verifier_regex="^$|^[0-9]+$",
-            required=False,
-        ),
-        C2ProfileParameter(
-            name="proxy_user",
-            description="Proxy Username",
-            default_value="",
-            required=False,
-        ),
-        C2ProfileParameter(
-            name="proxy_pass",
-            description="Proxy Password",
-            default_value="",
-            required=False,
-        ),
-        C2ProfileParameter(
-            name="callback_interval",
-            description="Callback Interval in seconds",
-            default_value="10",
-            verifier_regex="^[0-9]+$",
-            required=False,
-        ),
-    ]
@@ -1,7 +0,0 @@
-#!/bin/bash
-
-cd /Mythic/mythic
-
-export PYTHONPATH=/Mythic:/Mythic/mythic
-
-python3.8 mythic_service.py
@@ -1,3 +0,0 @@
-#!/usr/bin/env python3
-from mythic_c2_container import mythic_service
-mythic_service.start_service_and_heartbeat(debug=False)
@@ -1,8 +0,0 @@
-{
-  "username": "mythic_user",
-  "password": "mythic_password",
-  "virtual_host": "mythic_vhost",
-  "host": "127.0.0.1",
-  "name": "hostname",
-  "container_files_path": "/Mythic/"
-}
@@ -1 +0,0 @@
-FROM itsafeaturemythic/python38_payload:0.1.1
@@ -1,34 +0,0 @@
-from mythic_payloadtype_container.PayloadBuilder import *
-from mythic_payloadtype_container.MythicCommandBase import *
-from mythic_payloadtype_container.MythicRPC import *
-import sys
-import json
-
-#define your payload type class here, it must extend the PayloadType class though
-class MyAgent(PayloadType):
-
-    name = "my_agent"  # name that would show up in the UI
-    file_extension = "exe"  # default file extension to use when creating payloads
-    author = "@YourHandleHere"  # author of the payload type
-    supported_os = [  # supported OS and architecture combos
-        SupportedOS.Windows, SupportedOS.Linux # update this list with all the OSes your agent supports
-    ]
-    wrapper = False  # does this payload type act as a wrapper for another payloads inside of it?
-    # if the payload supports any wrapper payloads, list those here
-    wrapped_payloads = [] # ex: "service_wrapper"
-    note = "Any note you want to show up about your payload type in the UI"
-    supports_dynamic_loading = False  # setting this to True allows users to only select a subset of commands when generating a payload
-    build_parameters = [
-        #  these are all the build parameters that will be presented to the user when creating your payload
-        # we'll leave this blank for now
-    ]
-    #  the names of the c2 profiles that your agent supports
-    c2_profiles = ["http"]
-    translation_container = None
-    # after your class has been instantiated by the mythic_service in this docker container and all required build parameters have values
-    # then this function is called to actually build the payload
-    async def build(self) -> BuildResponse:
-        # this function gets called to create an instance of your payload
-        resp = BuildResponse(status=BuildStatus.Success)
-        resp.payload = b""
-        return resp
@@ -1,48 +0,0 @@
-from mythic_payloadtype_container.MythicCommandBase import *
-import json
-from mythic_payloadtype_container.MythicRPC import *
-
-
-class CatArguments(TaskArguments):
-    def __init__(self, command_line, **kwargs):
-        super().__init__(command_line, **kwargs)
-        self.args = [
-            CommandParameter(
-                name="path",
-                type=ParameterType.String,
-                description="path to file (no quotes required)",
-                parameter_group_info=[ParameterGroupInfo()]
-            ),
-        ]
-
-    async def parse_arguments(self):
-        if len(self.command_line) == 0:
-            raise ValueError("Must supply a path to a file")
-        self.add_arg("path", self.command_line)
-
-    async def parse_dictionary(self, dictionary_arguments):
-        if "path" in dictionary_arguments:
-            self.add_arg("path", dictionary_arguments["path"])
-        else:
-            raise ValueError("Missing 'path' argument")
-
-
-class CatCommand(CommandBase):
-    cmd = "cat"
-    needs_admin = False
-    help_cmd = "cat /path/to/file"
-    description = "Read the contents of a file and display it to the user. No need for quotes and relative paths are fine"
-    version = 1
-    author = "@its_a_feature_"
-    argument_class = CatArguments
-    attackmapping = ["T1005", "T1552.001"]
-
-    async def create_tasking(self, task: MythicTask) -> MythicTask:
-        resp = await MythicRPC().execute("create_artifact", task_id=task.id,
-            artifact="$.NSString.stringWithContentsOfFileEncodingError",
-            artifact_type="API Called",
-        )
-        return task
-
-    async def process_response(self, response: AgentResponse):
-        pass
@@ -1,51 +0,0 @@
-from mythic_payloadtype_container.MythicCommandBase import *
-import json
-from mythic_payloadtype_container.MythicRPC import *
-
-
-class DownloadArguments(TaskArguments):
-    def __init__(self, command_line, **kwargs):
-        super().__init__(command_line, **kwargs)
-        self.args = []
-
-    async def parse_arguments(self):
-        if len(self.command_line) > 0:
-            if self.command_line[0] == "{":
-                temp_json = json.loads(self.command_line)
-                if "host" in temp_json:
-                    # this means we have tasking from the file browser rather than the popup UI
-                    # the apfell agent doesn't currently have the ability to do _remote_ listings, so we ignore it
-                    self.command_line = temp_json["path"] + "/" + temp_json["file"]
-                else:
-                    raise Exception("Unsupported JSON")
-        else:
-            raise Exception("Must provide a path to download")
-
-
-class DownloadCommand(CommandBase):
-    cmd = "download"
-    needs_admin = False
-    help_cmd = "download {path to remote file}"
-    description = "Download a file from the victim machine to the Mythic server in chunks (no need for quotes in the path)."
-    version = 1
-    supported_ui_features = ["file_browser:download"]
-    author = "@its_a_feature_"
-    parameters = []
-    attackmapping = ["T1020", "T1030", "T1041"]
-    argument_class = DownloadArguments
-    browser_script = [BrowserScript(script_name="download", author="@its_a_feature_"),
-                      BrowserScript(script_name="download_new", author="@its_a_feature_", for_new_ui=True)]
-    attributes = CommandAttributes(
-        suggested_command=True
-    )
-
-    async def create_tasking(self, task: MythicTask) -> MythicTask:
-        resp = await MythicRPC().execute("create_artifact", task_id=task.id,
-            artifact="$.NSFileHandle.fileHandleForReadingAtPath, readDataOfLength",
-            artifact_type="API Called",
-        )
-        task.display_params = task.args.command_line
-        return task
-
-    async def process_response(self, response: AgentResponse):
-        pass
@@ -1,37 +0,0 @@
-from mythic_payloadtype_container.MythicCommandBase import *
-import json
-from mythic_payloadtype_container.MythicRPC import *
-
-
-class ExitArguments(TaskArguments):
-    def __init__(self, command_line, **kwargs):
-        super().__init__(command_line, **kwargs)
-        self.args = []
-
-    async def parse_arguments(self):
-        pass
-
-
-class ExitCommand(CommandBase):
-    cmd = "exit"
-    needs_admin = False
-    help_cmd = "exit"
-    description = "This exits the current apfell agent by leveraging the ObjectiveC bridge's NSApplication terminate function."
-    version = 1
-    supported_ui_features = ["callback_table:exit"]
-    author = "@its_a_feature_"
-    attackmapping = []
-    argument_class = ExitArguments
-    attributes = CommandAttributes(
-        builtin=True
-    )
-
-    async def create_tasking(self, task: MythicTask) -> MythicTask:
-        resp = await MythicRPC().execute("create_artifact", task_id=task.id,
-            artifact="$.NSApplication.sharedApplication.terminate",
-            artifact_type="API Called",
-        )
-        return task
-
-    async def process_response(self, response: AgentResponse):
-        pass
@@ -1,62 +0,0 @@
-from mythic_payloadtype_container.MythicCommandBase import *
-from mythic_payloadtype_container.MythicRPC import *
-
-
-class JsimportArguments(TaskArguments):
-    def __init__(self, command_line, **kwargs):
-        super().__init__(command_line, **kwargs)
-        self.args = [
-            CommandParameter(
-                name="file",
-                type=ParameterType.File,
-                description="Select a JXA file to upload",
-                parameter_group_info=[ParameterGroupInfo()]
-            )
-        ]
-
-    async def parse_arguments(self):
-        if len(self.command_line) > 0:
-            if self.command_line[0] == "{":
-                self.load_args_from_json_string(self.command_line)
-            else:
-                raise ValueError("Missing JSON arguments")
-        else:
-            raise ValueError("Missing arguments")
-        pass
-
-    async def parse_dictionary(self, dictionary_arguments):
-        if "file" in dictionary_arguments:
-            self.add_arg("file", dictionary_arguments["file"])
-        else:
-            raise ValueError("Missing 'file' argument")
-
-
-class JsimportCommand(CommandBase):
-    cmd = "jsimport"
-    needs_admin = False
-    help_cmd = "jsimport"
-    description = "import a JXA file into memory"
-    version = 1
-    author = "@its_a_feature_"
-    attackmapping = ["T1020", "T1030", "T1041", "T1620", "T1105"]
-    argument_class = JsimportArguments
-
-    async def create_tasking(self, task: MythicTask) -> MythicTask:
-        file_resp = await MythicRPC().execute("get_file",
-                                              file_id=task.args.get_arg("file"),
-                                              task_id=task.id,
-                                              get_contents=False)
-        if file_resp.status == MythicRPCStatus.Success:
-            original_file_name = file_resp.response[0]["filename"]
-        else:
-            raise Exception("Error from Mythic: " + str(file_resp.error))
-        task.display_params = f"{original_file_name} into memory"
-        file_resp = await MythicRPC().execute("update_file",
-                                              file_id=task.args.get_arg("file"),
-                                              delete_after_fetch=False,
-                                              comment="Uploaded into memory for jsimport")
-
-        return task
-
-    async def process_response(self, response: AgentResponse):
-        pass
@@ -1,43 +0,0 @@
-from mythic_payloadtype_container.MythicCommandBase import *
-import json
-
-
-class JsimportCallArguments(TaskArguments):
-    def __init__(self, command_line, **kwargs):
-        super().__init__(command_line, **kwargs)
-        self.args = [
-            CommandParameter(
-                name="command",
-                type=ParameterType.String,
-                description="The command to execute within a file loaded via jsimport",
-                parameter_group_info=[ParameterGroupInfo()]
-            )
-        ]
-
-    async def parse_arguments(self):
-        if len(self.command_line) == 0:
-            raise ValueError("Must supply a path to a file")
-        self.add_arg("command", self.command_line)
-
-    async def parse_dictionary(self, dictionary_arguments):
-        if "command" in dictionary_arguments:
-            self.add_arg("command", dictionary_arguments["command"])
-        else:
-            raise ValueError("Missing 'command' argument")
-
-
-class JsimportCallCommand(CommandBase):
-    cmd = "jsimport_call"
-    needs_admin = False
-    help_cmd = "jsimport_call function_call();"
-    description = "call a function from within the JS file that was imported with 'jsimport'. This function call is appended to the end of the jsimport code and called via eval."
-    version = 1
-    author = "@its_a_feature_"
-    attackmapping = ["T1059.002"]
-    argument_class = JsimportCallArguments
-
-    async def create_tasking(self, task: MythicTask) -> MythicTask:
-        return task
-
-    async def process_response(self, response: AgentResponse):
-        pass
@@ -1,51 +0,0 @@
-from mythic_payloadtype_container.MythicCommandBase import *
-import json
-from mythic_payloadtype_container.MythicRPC import *
-
-
-class ListEntitlementsArguments(TaskArguments):
-    def __init__(self, command_line, **kwargs):
-        super().__init__(command_line, **kwargs)
-        self.args = [
-            CommandParameter(
-                name="pid",
-                type=ParameterType.Number,
-                default_value=-1,
-                description="Pid of the process to enumerate (-1 for all processes)",
-                parameter_group_info=[ParameterGroupInfo(
-                    required=False
-                )]
-            ),
-        ]
-
-    async def parse_arguments(self):
-        if len(self.command_line) == 0:
-            raise ValueError("Must supply a path to a file")
-        self.add_arg("pid", int(self.command_line))
-
-    async def parse_dictionary(self, dictionary_arguments):
-        if "pid" in dictionary_arguments:
-            self.add_arg("pid", dictionary_arguments["pid"])
-
-
-class ListEntitlementsCommand(CommandBase):
-    cmd = "list_entitlements"
-    needs_admin = False
-    help_cmd = 'list_entitlements [pid]'
-    description = "This uses JXA to list the entitlements for a running process"
-    version = 1
-    author = "@its_a_feature_"
-    attackmapping = ["T1057"]
-    argument_class = ListEntitlementsArguments
-    supported_ui_features = ["list_entitlements:list"]
-    browser_script = [BrowserScript(script_name="list_entitlements_new", author="@its_a_feature_", for_new_ui=True)]
-
-    async def create_tasking(self, task: MythicTask) -> MythicTask:
-        if task.args.get_arg("pid") == -1:
-            task.display_params = "for all running applications"
-        else:
-            task.display_params = "for pid " + str(task.args.get_arg("pid"))
-        return task
-
-    async def process_response(self, response: AgentResponse):
-        pass
@@ -1,90 +0,0 @@
-from mythic_payloadtype_container.MythicCommandBase import *
-from mythic_payloadtype_container.MythicRPC import *
-import base64
-import sys
-
-
-class LoadArguments(TaskArguments):
-    def __init__(self, command_line, **kwargs):
-        super().__init__(command_line, **kwargs)
-        self.args = [
-            CommandParameter(name="commands",
-                 type=ParameterType.ChooseMultiple,
-                 description="One or more commands to send to the agent",
-                 choices_are_all_commands=True),
-        ]
-
-    async def parse_arguments(self):
-        if len(self.command_line) == 0:
-            raise ValueError("Must supply a set of commands")
-        self.add_arg("commands", self.command_line.split(" "))
-
-    async def parse_dictionary(self, dictionary_arguments):
-        if "commands" in dictionary_arguments:
-            if isinstance(dictionary_arguments["commands"], str):
-                self.add_arg("commands", dictionary_arguments["commands"].split(" "))
-            else:
-                self.add_arg("commands", dictionary_arguments["commands"])
-        else:
-            raise ValueError("Missing 'commands' argument")
-
-
-class LoadCommand(CommandBase):
-    cmd = "load"
-    needs_admin = False
-    help_cmd = "load cmd1 cmd2 cmd3..."
-    description = "This loads new functions into memory via the C2 channel."
-    version = 1
-    author = "@its_a_feature_"
-    parameters = []
-    attackmapping = ["T1030", "T1129", "T1059.002", "T1620"]
-    argument_class = LoadArguments
-    attributes = CommandAttributes(
-        suggested_command=True
-    )
-
-    async def create_tasking(self, task: MythicTask) -> MythicTask:
-        total_code = ""
-        commands = await MythicRPC().execute("get_commands",
-                                             payload_type_name="apfell",
-                                             commands=task.args.get_arg("commands"),
-                                             os="macOS")
-        if commands.status == "success":
-            for cmd in commands.response:
-                if cmd["script_only"]:
-                    # trying to load a script only command, so just tell mythic to load it
-                    add_resp = await MythicRPC().execute("add_commands_to_callback",
-                                                         task_id=task.id,
-                                                         commands=[cmd["cmd"]])
-                    if add_resp.status != "success":
-                        await MythicRPC().execute("create_output", task_id=task.id,
-                                                  output="Failed to add command to callback: " + add_resp.error)
-                else:
-                    try:
-                        code_path = self.agent_code_path / "{}.js".format(cmd["cmd"])
-                        total_code += open(code_path, "r").read() + "\n"
-                    except Exception as e:
-                        await MythicRPC().execute("create_output",
-                                                  task_id=task.id,
-                                                  output=f"Failed to find code for {cmd['cmd']}, skipping it\n")
-            if total_code != "":
-                resp = await MythicRPC().execute("create_file", task_id=task.id,
-                    file=base64.b64encode(total_code.encode()).decode(),
-                    comment="Loading the following commands: " + task.args.command_line
-                )
-                if resp.status == MythicStatus.Success:
-                    task.args.add_arg("file_id", resp.response["agent_file_id"])
-                    task.display_params = f"the following commands: {' '.join(task.args.get_arg('commands'))}"
-                else:
-                    raise Exception("Failed to register file: " + resp.error)
-            else:
-                task.status = "completed"
-                task.display_params = f"the following commands: {' '.join(task.args.get_arg('commands'))}"
-                await MythicRPC().execute("create_output", task_id=task.id,
-                                          output="Loaded commands")
-        else:
-            raise Exception("Failed to fetch commands from Mythic: " + commands.error)
-        return task
-
-    async def process_response(self, response: AgentResponse):
-        pass
@@ -1,73 +0,0 @@
-from mythic_payloadtype_container.MythicCommandBase import *
-import json
-from mythic_payloadtype_container.MythicRPC import *
-import sys
-
-
-class LsArguments(TaskArguments):
-    def __init__(self, command_line, **kwargs):
-        super().__init__(command_line, **kwargs)
-        self.args = [
-            CommandParameter(
-                name="path",
-                type=ParameterType.String,
-                default_value=".",
-                description="Path of file or folder on the current system to list",
-                parameter_group_info=[ParameterGroupInfo(
-                    required=False
-                )]
-            ),
-            CommandParameter(
-                name="fetch_attributes",
-                type=ParameterType.Boolean,
-                default_value=False,
-                description="Indicate if extended attributes should be fetched for this command",
-                parameter_group_info=[ParameterGroupInfo(
-                    required=False
-                )]
-            )
-        ]
-
-    async def parse_arguments(self):
-        self.add_arg("path", self.command_line)
-
-    async def parse_dictionary(self, dictionary):
-        if "host" in dictionary:
-            # then this came from the file browser
-            self.add_arg("path", dictionary["path"] + "/" + dictionary["file"])
-            self.add_arg("file_browser", type=ParameterType.Boolean, value=True)
-        else:
-            self.load_args_from_dictionary(dictionary)
-
-
-class LsCommand(CommandBase):
-    cmd = "ls"
-    needs_admin = False
-    help_cmd = "ls /path/to/file"
-    description = "Get attributes about a file and display it to the user via API calls. No need for quotes and relative paths are fine"
-    version = 2
-    author = "@its_a_feature_"
-    attackmapping = ["T1106", "T1083"]
-    supported_ui_features = ["file_browser:list"]
-    argument_class = LsArguments
-    browser_script = [BrowserScript(script_name="ls", author="@its_a_feature_"),
-                      BrowserScript(script_name="ls_new", author="@its_a_feature_", for_new_ui=True)]
-    attributes = CommandAttributes(
-        spawn_and_injectable=True,
-        supported_os=[SupportedOS.MacOS],
-    )
-
-    async def create_tasking(self, task: MythicTask) -> MythicTask:
-        resp = await MythicRPC().execute("create_artifact", task_id=task.id,
-            artifact="fileManager.attributesOfItemAtPathError, fileManager.contentsOfDirectoryAtPathError",
-            artifact_type="API Called",
-        )
-        if task.args.has_arg("file_browser") and task.args.get_arg("file_browser"):
-            host = task.callback.host
-            task.display_params = host + ":" + task.args.get_arg("path")
-        else:
-            task.display_params = task.args.get_arg("path")
-        return task
-
-    async def process_response(self, response: AgentResponse):
-        pass
@@ -1,53 +0,0 @@
-from mythic_payloadtype_container.MythicCommandBase import *
-import json
-from mythic_payloadtype_container.MythicRPC import *
-
-
-class PlistArguments(TaskArguments):
-    def __init__(self, command_line, **kwargs):
-        super().__init__(command_line, **kwargs)
-        self.args = [
-            CommandParameter(
-                name="filename",
-                type=ParameterType.String,
-                description="full filename path of type is just read",
-                parameter_group_info=[ParameterGroupInfo(group_name="read")]
-            ),
-            CommandParameter(
-                name="type",
-                type=ParameterType.ChooseOne,
-                choices=["readLaunchAgents", "readLaunchDaemons"],
-                description="read all launchagents/launchdaemons",
-                default_value="readLaunchAgents",
-                parameter_group_info=[ParameterGroupInfo()]
-            ),
-        ]
-
-    async def parse_arguments(self):
-        if len(self.command_line) == 0:
-            raise ValueError("Must supply arguments")
-        raise ValueError("Must supply named arguments or use the modal")
-
-    async def parse_dictionary(self, dictionary_arguments):
-        self.load_args_from_dictionary(dictionary_arguments)
-
-
-class PlistCommand(CommandBase):
-    cmd = "plist"
-    needs_admin = False
-    help_cmd = "plist"
-    description = "Read plists and their associated attributes for attempts to privilege escalate."
-    version = 1
-    author = "@its_a_feature_"
-    attackmapping = ["T1083", "T1007"]
-    argument_class = PlistArguments
-
-    async def create_tasking(self, task: MythicTask) -> MythicTask:
-        resp = await MythicRPC().execute("create_artifact", task_id=task.id,
-            artifact="$.NSMutableDictionary.alloc.initWithContentsOfFile, fileManager.attributesOfItemAtPathError",
-            artifact_type="API Called",
-        )
-        return task
-
-    async def process_response(self, response: AgentResponse):
-        pass
@@ -1,88 +0,0 @@
-from mythic_payloadtype_container.MythicCommandBase import *
-from mythic_payloadtype_container.MythicRPC import *
-
-
-class ShellArguments(TaskArguments):
-    def __init__(self, command_line, **kwargs):
-        super().__init__(command_line, **kwargs)
-        self.args = [
-            CommandParameter(name="command", display_name="Command", type=ParameterType.String, description="Command to run"),
-        ]
-
-    async def parse_arguments(self):
-        if len(self.command_line) == 0:
-            raise ValueError("Must supply a command to run")
-        self.add_arg("command", self.command_line)
-
-    async def parse_dictionary(self, dictionary_arguments):
-        self.load_args_from_dictionary(dictionary_arguments)
-
-
-class ShellOPSEC(CommandOPSEC):
-    injection_method = ""
-    process_creation = "/bin/bash -c"
-    authentication = ""
-
-    async def opsec_pre(self, task: MythicTask):
-        # processes = await MythicRPC().execute("search_database", task_id=task.id, table="process",
-        #                                       host=task.callback.host)
-        # if processes.status == MythicStatus.Success:
-        #     if len(processes.response) == 0:
-        #         task.opsec_pre_blocked = True
-        #         task.opsec_pre_message = f"This spawns {self.process_creation} and there is no process data on the host yet."
-        #         task.opsec_pre_message += "\nRun \"list_apps\" first to check for dangerous processes"
-        #         task.opsec_pre_bypass_role = "operator"
-        #         return
-        #     else:
-        #         processes = await MythicRPC().execute("search_database", task_id=task.id, table="process",
-        #                                               name="Microsoft Defender", host=task.callback.host)
-        #         if len(processes.response) > 0:
-        #             task.opsec_pre_blocked = True
-        #             task.opsec_pre_message = f"Microsoft Defender spotted on the host in running processes. Don't spawn commands this way"
-        # else:
-        #     task.opsec_pre_blocked = True
-        #     task.opsec_pre_message = f"Failed to query processes from Mythic:\n{processes}"
-        pass
-
-    async def opsec_post(self, task: MythicTask):
-        # processes = await MythicRPC().execute("search_database", task_id=task.id,
-        #     table="process", name="Microsoft Defender", host=task.callback.host)
-        # if processes.status == MythicStatus.Success:
-        #     if len(processes.response) > 0:
-        #         task.opsec_post_blocked = True
-        #         task.opsec_post_message = f"Microsoft Defender spotted on the host in running processes. Really, don't do this"
-        # else:
-        #     task.opsec_post_blocked = True
-        #     task.opsec_post_message = f"Failed to query processes from Mythic:\n{processes}"
-        pass
-
-
-class ShellCommand(CommandBase):
-    cmd = "shell"
-    needs_admin = False
-    help_cmd = "shell {command}"
-    description = """This runs {command} in a terminal by leveraging JXA's Application.doShellScript({command}).
-WARNING! THIS IS SINGLE THREADED, IF YOUR COMMAND HANGS, THE AGENT HANGS!"""
-    version = 1
-    author = "@its_a_feature_"
-    attackmapping = ["T1059", "T1059.004"]
-    argument_class = ShellArguments
-    opsec_class = ShellOPSEC
-    attributes = CommandAttributes(
-        suggested_command=True
-    )
-
-    async def create_tasking(self, task: MythicTask) -> MythicTask:
-        resp = await MythicRPC().execute("create_artifact", task_id=task.id,
-            artifact="/bin/sh -c {}".format(task.args.get_arg("command")),
-            artifact_type="Process Create",
-        )
-        resp = await MythicRPC().execute("create_artifact", task_id=task.id,
-            artifact="{}".format(task.args.get_arg("command")),
-            artifact_type="Process Create",
-        )
-        task.display_params = task.args.get_arg("command")
-        return task
-
-    async def process_response(self, response: AgentResponse):
-        pass
@@ -1,70 +0,0 @@
-from mythic_payloadtype_container.MythicCommandBase import *
-from mythic_payloadtype_container.MythicRPC import *
-import sys
-
-
-def positiveTime(val):
-    if val < 0:
-        raise ValueError("Value must be positive")
-
-
-class SleepArguments(TaskArguments):
-    def __init__(self, command_line, **kwargs):
-        super().__init__(command_line, **kwargs)
-        self.args = [
-            CommandParameter(
-                name="jitter",
-                type=ParameterType.Number,
-                validation_func=positiveTime,
-                description="Percentage of C2's interval to use as jitter",
-                parameter_group_info=[ParameterGroupInfo(
-                    required=False,
-                    ui_position=2
-                )]
-            ),
-            CommandParameter(
-                name="interval",
-                type=ParameterType.Number,
-                validation_func=positiveTime,
-                description="Number of seconds between checkins",
-                parameter_group_info=[ParameterGroupInfo(
-                    required=False,
-                    ui_position=1
-                )]
-            ),
-        ]
-
-    async def parse_arguments(self):
-        if self.command_line[0] != "{":
-            pieces = self.command_line.split(" ")
-            if len(pieces) == 1:
-                self.add_arg("interval", pieces[0])
-                self.remove_arg("jitter")
-            elif len(pieces) == 2:
-                self.add_arg("interval", pieces[0])
-                self.add_arg("jitter", pieces[1])
-            else:
-                raise Exception("Wrong number of parameters, should be 1 or 2")
-        else:
-            self.load_args_from_json_string(self.command_line)
-
-
-class SleepCommand(CommandBase):
-    cmd = "sleep"
-    needs_admin = False
-    help_cmd = "sleep [interval] [jitter]"
-    description = "Modify the time between callbacks in seconds."
-    version = 1
-    author = "@its_a_feature_"
-    attackmapping = ["T1029"]
-    argument_class = SleepArguments
-
-    async def create_tasking(self, task: MythicTask) -> MythicTask:
-        task.display_params = str(task.args.get_arg("interval")) + "s"
-        if task.args.get_arg("jitter") is not None:
-            task.display_params += " with " + str(task.args.get_arg("jitter")) + "% jitter"
-        return task
-
-    async def process_response(self, response: AgentResponse):
-        resp = await MythicRPC().execute("update_callback", task_id=response.task.id, sleep_info=response.response)
-
@@ -1,135 +0,0 @@
-from mythic_payloadtype_container.MythicCommandBase import *
-from mythic_payloadtype_container.MythicRPC import *
-import sys
-
-class UploadArguments(TaskArguments):
-    def __init__(self, command_line, **kwargs):
-        super().__init__(command_line, **kwargs)
-        self.args = [
-            CommandParameter(
-                name="file", cli_name="new-file", display_name="File to upload", type=ParameterType.File, description="Select new file to upload",
-                parameter_group_info=[
-                    ParameterGroupInfo(
-                        required=True,
-                        group_name="Default",
-                        ui_position=0
-                    )
-                ]
-            ),
-            CommandParameter(
-                name="filename", cli_name="registered-filename", display_name="Filename within Mythic", description="Supply existing filename in Mythic to upload",
-                type=ParameterType.ChooseOne,
-                dynamic_query_function=self.get_files,
-                parameter_group_info=[
-                    ParameterGroupInfo(
-                        required=True,
-                        ui_position=0,
-                        group_name="specify already uploaded file by name"
-                    )
-                ]
-            ),
-            CommandParameter(
-                name="remote_path",
-                cli_name="remote_path",
-                display_name="Upload path (with filename)",
-                type=ParameterType.String,
-                description="Provide the path where the file will go (include new filename as well)",
-                parameter_group_info=[
-                    ParameterGroupInfo(
-                        required=True,
-                        group_name="Default",
-                        ui_position=1
-                    ),
-                    ParameterGroupInfo(
-                        required=True,
-                        group_name="specify already uploaded file by name",
-                        ui_position=1
-                    )
-                ]
-            ),
-        ]
-
-    async def parse_arguments(self):
-        if len(self.command_line) == 0:
-            raise ValueError("Must supply arguments")
-        raise ValueError("Must supply named arguments or use the modal")
-
-    async def parse_dictionary(self, dictionary_arguments):
-        self.load_args_from_dictionary(dictionary_arguments)
-
-    async def get_files(self, callback: dict) -> [str]:
-        file_resp = await MythicRPC().execute("get_file", callback_id=callback["id"],
-                                              limit_by_callback=False,
-                                              get_contents=False,
-                                              filename="",
-                                              max_results=-1)
-        if file_resp.status == MythicRPCStatus.Success:
-            file_names = []
-            for f in file_resp.response:
-                # await MythicRPC().execute("get_file_contents", agent_file_id=f["agent_file_id"])
-                if f["filename"] not in file_names:
-                    file_names.append(f["filename"])
-            return file_names
-        else:
-            await MythicRPC().execute("create_event_message", warning=True,
-                                      message=f"Failed to get files: {file_resp.error}")
-            return []
-
-
-class UploadCommand(CommandBase):
-    cmd = "upload"
-    needs_admin = False
-    help_cmd = "upload"
-    description = (
-        "Upload a file to the target machine by selecting a file from your computer. "
-    )
-    version = 1
-    supported_ui_features = ["file_browser:upload"]
-    author = "@its_a_feature_"
-    attackmapping = ["T1020", "T1030", "T1041", "T1105"]
-    argument_class = UploadArguments
-    attributes = CommandAttributes(
-        suggested_command=True
-    )
-
-    async def create_tasking(self, task: MythicTask) -> MythicTask:
-        try:
-            groupName = task.args.get_parameter_group_name()
-            if groupName == "Default":
-                file_resp = await MythicRPC().execute("get_file",
-                                                    file_id=task.args.get_arg("file"),
-                                                    task_id=task.id,
-                                                    get_contents=False)
-                if file_resp.status == MythicRPCStatus.Success:
-                    if len(file_resp.response) > 0:
-                        original_file_name = file_resp.response[0]["filename"]
-                        if len(task.args.get_arg("remote_path")) == 0:
-                            task.args.add_arg("remote_path", original_file_name)
-                        elif task.args.get_arg("remote_path")[-1] == "/":
-                            task.args.add_arg("remote_path", task.args.get_arg("remote_path") + original_file_name)
-                        task.display_params = f"{original_file_name} to {task.args.get_arg('remote_path')}"
-                    else:
-                        raise Exception("Failed to find that file")
-                else:
-                    raise Exception("Error from Mythic trying to get file: " + str(file_resp.error))
-            elif groupName == "specify already uploaded file by name":
-                # we're trying to find an already existing file and use that
-                file_resp = await MythicRPC().execute("get_file", task_id=task.id,
-                                                      filename=task.args.get_arg("filename"),
-                                                      limit_by_callback=False,
-                                                      get_contents=False)
-                if file_resp.status == MythicRPCStatus.Success:
-                    if len(file_resp.response) > 0:
-                        task.args.add_arg("file", file_resp.response[0]["agent_file_id"])
-                        task.args.remove_arg("filename")
-                        task.display_params = f"existing {file_resp.response[0]['filename']} to {task.args.get_arg('remote_path')}"
-                    elif len(file_resp.response) == 0:
-                        raise Exception("Failed to find the named file. Have you uploaded it before? Did it get deleted?")
-                else:
-                    raise Exception("Error from Mythic trying to search files:\n" + str(file_resp.error))
-        except Exception as e:
-            raise Exception("Error from Mythic: " + str(sys.exc_info()[-1].tb_lineno) + " : " + str(e))
-        return task
-
-    async def process_response(self, response: AgentResponse):
-        pass
@@ -1,109 +0,0 @@
-function(task, responses){
-    if(task.status.includes("error")){
-        const combined = responses.reduce( (prev, cur) => {
-            return prev + cur;
-        }, "");
-        return {'plaintext': combined};
-    }else if(task.completed){
-        if(responses.length > 0){
-            if(responses[0] === "Successfully set the clipboard"){
-                return {"plaintext": responses[0]};
-            }else{
-                try{
-                    let data = JSON.parse(responses[0]);
-                    let output_table = [];
-                    let all_keys = [];
-                    for(const [k,v] of Object.entries(data)){
-                        all_keys.push(k);
-                        if(k === "public.utf8-plain-text"){
-                            output_table.push({
-                                "key":{"plaintext": k},
-                                "value": {"plaintext": atob(v), "copyIcon": v.length > 0},
-                                "fetch": {"button": {
-                                    "name": "Fetch Data",
-                                    "type": "task",
-                                    "ui_feature": "clipboard:list",
-                                    "parameters": {"read": [k]}
-                                }},
-                                "view": {"button": {
-                                    "name": v=== "" ? "Empty": "View",
-                                    "type": "dictionary",
-                                    "value": {[k]:atob(v)},
-                                    "disabled": v === "",
-                                    "leftColumnTitle": "Key",
-                                    "rightColumnTitle": "Values",
-                                    "title": "Viewing " + k
-                                }}
-                            })
-                        }else{
-                            output_table.push({
-                                "key":{"plaintext": k},
-                                "value": {"plaintext": v, "copyIcon": v.length > 0},
-                                "fetch": {"button": {
-                                    "name": "Fetch Data",
-                                    "type": "task",
-                                    "ui_feature": "clipboard:list",
-                                    "parameters":{"read": [k]}
-                                }},
-                                "view": {"button": {
-                                    "name": v=== "" ? "Empty": "View",
-                                    "type": "dictionary",
-                                    "value": {[k]:v},
-                                    "disabled": v === "",
-                                    "leftColumnTitle": "Key",
-                                    "rightColumnTitle": "Values",
-                                    "title": "Viewing " + k
-                                }}
-                            })
-                        }
-                    }
-                    output_table.push({
-                        "key":{"plaintext": "Fetch All Clipboard Data"},
-                        "value": {"plaintext": ""},
-                        "fetch": {"button": {
-                            "name": "Fetch All Data",
-                            "type": "task",
-                            "ui_feature": "clipboard:list",
-                            "parameters": {"read": ["*"]}
-                        }},
-                        "view": {"button": {
-                            "name": "View",
-                            "type": "dictionary",
-                            "value": {},
-                            "disabled": true,
-                            "leftColumnTitle": "Key",
-                            "rightColumnTitle": "Values",
-                            "title": "Viewing "
-                        }}
-                    })
-                    return {
-                        "table": [
-                            {
-                                "headers": [
-                                    {"plaintext": "fetch", "type": "button", "width": 150, "disableSort": true},
-                                    {"plaintext": "view", "type": "button", "width": 100, "disableSort": true},
-                                    {"plaintext": "key", "type": "string", "fillWidth": true},
-                                    {"plaintext": "value", "type": "string", "fillWidth": true},
-
-
-                                ],
-                                "rows": output_table,
-                                "title": "Clipboard Data"
-                            }
-                        ]
-                    }
-                }catch(error){
-                    console.log(error);
-                    const combined = responses.reduce( (prev, cur) => {
-                        return prev + cur;
-                    }, "");
-                    return {'plaintext': combined};
-                }
-            }
-        }else{
-            return {"plaintext": "No output from command"};
-        }
-    }else{
-        return {"plaintext": "No data to display..."};
-    }
-}
@@ -1,33 +0,0 @@
-function(task, responses){
-    console.log(task)
-    if(task.status.includes("error")){
-        const combined = responses.reduce( (prev, cur) => {
-            return prev + cur;
-        }, "");
-        return {'plaintext': combined};
-    }else if(task.completed){
-        try{
-            let data = JSON.parse(responses[0]);
-            return {"download":[{
-                "agent_file_id": data["agent_file_id"],
-                "variant": "contained",
-                "name": "Download file"
-            }]};
-        }catch(error){
-            const combined = responses.reduce( (prev, cur) => {
-                return prev + cur;
-            }, "");
-            return {'plaintext': combined};
-        }
-
-    }else if(task.status === "processed"){
-        if(responses.length > 0){
-            const task_data = JSON.parse(responses[0]);
-            return {"plaintext": "Downloading file with " + task_data["total_chunks"] + " total chunks..."};
-        }
-        return {"plaintext": "No data yet..."}
-    }else{
-        // this means we shouldn't have any output
-        return {"plaintext": "No response yet from agent..."}
-    }
-}
@@ -1,72 +0,0 @@
-function(task, responses){
-    if(task.status.includes("error")){
-        const combined = responses.reduce( (prev, cur) => {
-            return prev + cur;
-        }, "");
-        return {'plaintext': combined};
-    }else if(task.completed){
-        if(responses.length > 0){
-            try{
-                    let data = JSON.parse(responses[0]);
-                    let output_table = [];
-                    for(let i = 0; i < data.length; i++){
-                        output_table.push({
-                            "name":{"plaintext": data[i]["name"]},
-                            "pid": {"plaintext": data[i]["process_id"]},
-                            "bundle": {"plaintext": data[i]["bundle"], "copyIcon": true},
-                            "arch": {"plaintext": data[i]["architecture"]},
-                            "rowStyle": {"backgroundColor": data[i]["frontMost"] ? "mediumpurple": ""},
-                            "actions": {"button": {
-                                "name": "Actions",
-                                "type": "menu",
-                                "value": [
-                                    {
-                                        "name": "View Paths",
-                                        "type": "dictionary",
-                                        "value": {
-                                            "bundleURL": data[i]["bundleURL"],
-                                            "bin_path": data[i]["bin_path"],
-                                        },
-                                        "leftColumnTitle": "Key",
-                                        "rightColumnTitle": "Value",
-                                        "title": "Viewing Paths"
-                                    },
-                                    {
-                                      "name": "entitlements",
-                                      "type": "task",
-                                      "ui_feature": "list_entitlements:list",
-                                      "parameters": data[i]["process_id"].toString()
-                                    }
-                                ]
-                            }},
-                        })
-                    }
-                    return {
-                        "table": [
-                            {
-                                "headers": [
-                                    {"plaintext": "pid", "type": "number", "width": 100},
-                                    {"plaintext": "name", "type": "string", "fillWidth": true},
-                                    {"plaintext": "bundle", "type": "string", "fillWidth": true},
-                                    {"plaintext": "arch", "type": "string", "width": 100},
-                                    {"plaintext": "actions", "type": "button", "width": 100},
-                                ],
-                                "rows": output_table,
-                                "title": "Process Data"
-                            }
-                        ]
-                    }
-            }catch(error){
-                    console.log(error);
-                    const combined = responses.reduce( (prev, cur) => {
-                        return prev + cur;
-                    }, "");
-                    return {'plaintext': combined};
-            }
-        }else{
-            return {"plaintext": "No output from command"};
-        }
-    }else{
-        return {"plaintext": "No data to display..."};
-    }
-}
@@ -1,61 +0,0 @@
-function(task, responses){
-    if(task.status.includes("error")){
-        const combined = responses.reduce( (prev, cur) => {
-            return prev + cur;
-        }, "");
-        return {'plaintext': combined};
-    }else if(task.completed){
-        if(responses.length > 0){
-
-            let headers = [
-            {"plaintext": "pid", "type": "number", "width": 100},
-            {"plaintext": "name", "type": "string", "fillWidth": true},
-            {"plaintext": "bundle", "type": "string", "fillWidth": true},
-            {"plaintext": "entitlements", "type": "button", "width": 200}];
-            let data = "";
-            try{
-                data = JSON.parse(responses[0]);
-            }catch(error){
-               const combined = responses.reduce( (prev, cur) => {
-                    return prev + cur;
-                }, "");
-                return {'plaintext': combined};
-            }
-            let rows = [];
-            for(let i = 0; i < data.length; i++){
-                let row = {
-                    "name": {"plaintext": data[i]["name"]},
-                    "pid": {"plaintext": data[i]["pid"]},
-                    "bundle": {"plaintext": data[i]["bundle"], "copyIcon": true},
-                    "entitlements": {"button": {
-                        "name": "",
-                        "startIcon": "list",
-                        "type": "dictionary",
-                        "value": data[i]["entitlements"],
-                        "disabled": Object.keys(data[i]["entitlements"]).length === 0,
-                        "leftColumnTitle": "Entitlements",
-                        "rightColumnTitle": "Value",
-                        "title": "Viewing Entitlements"
-                    }},
-                };
-                rows.push(row);
-            }
-            return {"table":[{
-                "headers": headers,
-                "rows": rows,
-                "title": "Process Entitlements"
-            }]};
-        }else{
-            const combined = responses.reduce( (prev, cur) => {
-                return prev + cur;
-            }, "");
-            return {'plaintext': combined};
-        }
-    }else if(task.status === "processed"){
-        // this means we're still downloading
-        return {"plaintext": "Only have partial data so far..."}
-    }else{
-        // this means we shouldn't have any output
-        return {"plaintext": "Not response yet from agent..."}
-    }
-}
@@ -1,143 +0,0 @@
-function(task, responses){
-    if(task.status.includes("error")){
-        const combined = responses.reduce( (prev, cur) => {
-            return prev + cur;
-        }, "");
-        return {'plaintext': combined};
-    }else if(task.completed && responses.length > 0){
-        let data = "";
-        try{
-            data = JSON.parse(responses[0]);
-        }catch(error){
-           const combined = responses.reduce( (prev, cur) => {
-                return prev + cur;
-            }, "");
-            return {'plaintext': combined};
-        }
-        let ls_path = "";
-        if(data["parent_path"] === "/"){
-            ls_path = data["parent_path"] + data["name"];
-        }else{
-            ls_path = data["parent_path"] + "/" + data["name"];
-        }
-        let headers = [
-            {"plaintext": "actions", "type": "button", "width": 100, "disableSort": true},
-            {"plaintext": "size", "type": "size", "width": 200},
-            {"plaintext": "name", "type": "string", "fillWidth": true},
-            {"plaintext": "owner", "type": "string", "width": 300},
-            {"plaintext": "group", "type": "string", "width": 300},
-            {"plaintext": "posix", "type": "string", "width": 100, "disableSort": true},
-
-        ];
-        let rows = [{
-            "rowStyle":{},
-            "name": {"plaintext": data["name"], "startIcon": data["is_file"] ? "file": "folder"},
-            "size": {"plaintext": data["size"]},
-            "owner": {"plaintext": data["permissions"]["owner"]},
-            "group": {"plaintext": data["permissions"]["group"]},
-            "posix": {"plaintext": data["permissions"]["posix"]},
-            "actions": {"button": {
-                "name": "Actions",
-                "type": "menu",
-                "value": [
-                        {
-                            "name": "View XATTRs",
-                            "type": "dictionary",
-                            "value": data["permissions"],
-                            "leftColumnTitle": "XATTR",
-                            "rightColumnTitle": "Values",
-                            "title": "Viewing XATTRs"
-                        },
-                        {
-                            "name": "Get Code Signatures",
-                            "type": "task",
-                            "ui_feature": "code_signatures:list",
-                            "parameters": {"path": ls_path},
-                        },
-                        {
-                            "name": "LS Path",
-                            "type": "task",
-                            "ui_feature": "file_browser:list",
-                            "parameters": ls_path
-                        },
-                        {
-                            "name": "Download File",
-                            "type": "task",
-                            "disabled": !data["is_file"],
-                            "ui_feature": "file_browser:download",
-                            "parameters": ls_path,
-                            "startIcon": "download"
-                        }
-                    ]
-                }}
-        }];
-        for(let i = 0; i < data["files"].length; i++){
-            let ls_path = "";
-            if(data["parent_path"] === "/"){
-                ls_path = data["parent_path"] + data["name"] + "/" + data["files"][i]["name"];
-            }else{
-                ls_path = data["parent_path"] + "/" + data["name"] + "/" + data["files"][i]["name"];
-            }
-            let row = {
-                "rowStyle": {},
-                "name": {"plaintext": data["files"][i]["name"], "startIcon": data["files"][i]["is_file"] ? "file": "folder"},
-                "size": {"plaintext": data["files"][i]["size"]},
-                "owner": {"plaintext": data["files"][i]["permissions"]["owner"]},
-                "group": {"plaintext": data["files"][i]["permissions"]["group"]},
-                "posix": {"plaintext": data["files"][i]["permissions"]["posix"],
-                    "cellStyle": {
-
-                    }
-                },
-                "actions": {"button": {
-                "name": "Actions",
-                "type": "menu",
-                "value": [
-                        {
-                            "name": "View XATTRs",
-                            "type": "dictionary",
-                            "value": data["files"][i]["permissions"],
-                            "leftColumnTitle": "XATTR",
-                            "rightColumnTitle": "Values",
-                            "title": "Viewing XATTRs"
-                        },
-                        {
-                            "name": "Get Code Signatures",
-                            "type": "task",
-                            "ui_feature": "code_signatures:list",
-                            "parameters": ls_path
-                        },
-                        {
-                            "name": "LS Path",
-                            "type": "task",
-                            "ui_feature": "file_browser:list",
-                            "parameters": ls_path
-                        },
-                        {
-                            "name": "Download File",
-                            "type": "task",
-                            "disabled": !data["files"][i]["is_file"],
-                            "ui_feature": "file_browser:download",
-                            "parameters": ls_path,
-                            "startIcon": "download",
-                            "startIconColor": "lightgreen",
-                            "hoverText": "Task agent to download"
-                        }
-                    ]
-                }}
-            };
-            rows.push(row);
-        }
-        return {"table":[{
-            "headers": headers,
-            "rows": rows,
-            "title": "File Listing Data"
-        }]};
-    }else if(task.status === "processed"){
-        // this means we're still downloading
-        return {"plaintext": "Only have partial data so far..."}
-    }else{
-        // this means we shouldn't have any output
-        return {"plaintext": "Not response yet from agent..."}
-    }
-}
@@ -1,34 +0,0 @@
-function(task, responses){
-    if(task.status.includes("error")){
-        const combined = responses.reduce( (prev, cur) => {
-            return prev + cur;
-        }, "");
-        return {'plaintext': combined};
-    }else if(task.completed){
-        if(responses.length > 0){
-            let data = JSON.parse(responses[0]);
-            return {"screenshot":[{
-                "agent_file_id": [data["file_id"]],
-                "variant": "contained",
-                "name": "View Screenshot"
-            }]};
-        }else{
-            return {"plaintext": "No data to display..."}
-        }
-
-    }else if(task.status === "processed"){
-        // this means we're still downloading
-        if(responses.length > 0){
-            let data = JSON.parse(responses[0]);
-            return {"screenshot":[{
-                "agent_file_id": [data["file_id"]],
-                "variant": "contained",
-                "name": "View Partial Screenshot"
-            }]};
-        }
-        return {"plaintext": "No data yet..."}
-    }else{
-        // this means we shouldn't have any output
-        return {"plaintext": "Not response yet from agent..."}
-    }
-}
@@ -1,3 +0,0 @@
-#!/usr/bin/env python3
-from mythic_payloadtype_container import mythic_service
-mythic_service.start_service_and_heartbeat()
@@ -1,7 +0,0 @@
-#!/bin/bash
-
-cd /Mythic/mythic
-
-export PYTHONPATH=/Mythic:/Mythic/mythic
-
-python3.8 mythic_service.py
@@ -1,8 +0,0 @@
-{
-  "username": "mythic_user",
-  "password": "mythic_password",
-  "virtual_host": "mythic_vhost",
-  "host": "127.0.0.1",
-  "name": "hostname",
-  "container_files_path": "/Mythic/"
-}
@@ -1 +0,0 @@
-FROM itsafeaturemythic/python38_translator_container:0.0.5
@@ -1,81 +0,0 @@
-import json
-import base64
-import sys
-# translate_from_c2_format gets a message from Mythic that is in the c2-specific format
-#     and returns a message that's translated into Mythic's JSON format
-# If the associated C2Profile has `mythic_encrypts` set to False, then this function should also decrypt
-#     the message
-# request will be JSON with the following format:
-# {
-#   "enc_key": None or base64 of key if Mythic knows of one,
-#   "dec_key": None or base64 of key if Mythic knows of one,
-#   "uuid": uuid of the message,
-#   "profile": name of the c2 profile,
-#   "mythic_encrypts": True or False if Mythic thinks Mythic does the encryption or not,
-#   "type": None or a keyword for the type of encryption. currently only option besides None is "AES256"
-#   "message": base64 of the message that's currently in c2 specific format
-# }
-# This should return the JSON of the message in Mythic format
-
-
-async def translate_from_c2_format(request) -> dict:
-    if not request["mythic_encrypts"]:
-        return json.loads(base64.b64decode(request["message"]).decode()[36:])
-    else:
-        return json.loads(base64.b64decode(request["message"]))
-
-
-# translate_to_c2_format gets a message from Mythic that is in Mythic's JSON format
-#     and returns a message that's formatted into the c2-specific format
-# If the associated C2Profile has `mythic_encrypts` set to False, then this function should also encrypt
-#     the message
-# request will be JSON with the following format:
-# {
-#   "enc_key": None or base64 of key if Mythic knows of one,
-#   "dec_key": None or base64 of key if Mythic knows of one,
-#   "uuid": uuid of the message,
-#   "profile": name of the c2 profile,
-#   "mythic_encrypts": True or False if Mythic thinks Mythic does the encryption or not,
-#   "type": None or a keyword for the type of encryption. currently only option besides None is "AES256"
-#   "message": JSON of the mythic message
-# }
-# This should return the bytes of the message in c2 specific format
-
-async def translate_to_c2_format(request) -> bytes:
-    if not request["mythic_encrypts"]:
-        return base64.b64encode(request["uuid"].encode() + json.dumps(request["message"]).encode())
-    else:
-        return json.dumps(request["message"]).encode()
-
-
-# generate_keys gets a message from Mythic that is in Mythic's JSON format
-#     and returns a a JSON message with encryption and decryption keys for the specified type
-# request will be JSON with the following format:
-# { "action": "generate_keys",
-#   "message": JSON of the C2 parameter that has a crypt_type that's not None and not empty
-# }
-# example:
-# {"action":"generate_keys",
-#   "message":{
-#     "id":39,
-#     "name":"AESPSK",
-#     "default_value":"aes256_hmac\nnone",
-#     "required":false,
-#     "randomize":false,
-#     "verifier_regex":"",
-#     "parameter_type":"ChooseOne",
-#     "description":"Crypto type",
-#     "c2_profile":"http",
-#     "value":"none",
-#     "payload":"be8bd7fa-e095-4e69-87aa-a18ba73288cb",
-#     "instance_name":null,
-#     "operation":null,
-#     "callback":null}}
-# This should return the dictionary of keys like:
-# {
-#   "enc_key": "base64 of encryption key here",
-#   "dec_key": "base64 of decryption key here",
-# }
-
-async def generate_keys(request) -> dict:
-    return {"enc_key": None, "dec_key": None}
@@ -1,7 +0,0 @@
-#!/bin/bash
-
-cd /Mythic/mythic
-
-export PYTHONPATH=/Mythic:/Mythic/mythic
-
-python3.8 mythic_service.py
@@ -1,3 +0,0 @@
-#!/usr/bin/env python3
-from mythic_translator_container import mythic_service
-mythic_service.start_service_and_heartbeat()
@@ -1,8 +0,0 @@
-{
-  "username": "mythic_user",
-  "password": "mythic_password",
-  "virtual_host": "mythic_vhost",
-  "host": "127.0.0.1",
-  "name": "hostname",
-  "container_files_path": "/Mythic/"
-}
@@ -29,29 +29,7 @@ OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.


-## Licenses for other projects used:
-
-## Wait For It - https://github.com/vishnubob/wait-for-it
-The MIT License (MIT)
-Copyright (c) 2016 Giles Hall
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of
-this software and associated documentation files (the "Software"), to deal in
-the Software without restriction, including without limitation the rights to
-use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
-of the Software, and to permit persons to whom the Software is furnished to do
-so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+# Licenses for other projects used:

 ## arrgv - https://github.com/astur/arrgv
 MIT License
@@ -75,3 +53,126 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
+
+## https://pkg.go.dev/golang.org/x/mod/semver?tab=licenses
+
+Copyright (c) 2009 The Go Authors. All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are
+met:
+
+   * Redistributions of source code must retain the above copyright
+notice, this list of conditions and the following disclaimer.
+   * Redistributions in binary form must reproduce the above
+copyright notice, this list of conditions and the following disclaimer
+in the documentation and/or other materials provided with the
+distribution.
+   * Neither the name of Google Inc. nor the names of its
+contributors may be used to endorse or promote products derived from
+this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+## https://github.com/IonicaBizau/anser/blob/master/LICENSE
+
+The MIT License (MIT)
+
+Copyright (c) 2012-22 Ionică Bizău <[email protected]> (https://ionicabizau.net)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+## https://github.com/rubenv/sql-migrate/blob/master/LICENSE
+
+MIT License
+
+Copyright (C) 2014-2021 by Ruben Vermeersch <[email protected]>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+MIT license
+===========
+
+Copyright (c) 2017 sql.js authors (see AUTHORS)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+
+
+# Some portions of the Makefile taken from:
+Copyright 2017 Ryusei Yamaguchi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
@@ -0,0 +1,17 @@
+.PHONY: default
+default: linux ;
+
+linux:
+	cd Mythic_CLI && make build_linux && mv mythic-cli ../
+
+macos:
+	cd Mythic_CLI && make build_macos && mv mythic-cli ../
+
+local:
+	cd Mythic_CLI && make build_local
+
+linux_docker:
+	cd Mythic_CLI && make build_linux_docker && mv mythic-cli ../
+
+macos_docker:
+	cd Mythic_CLI && make build_macos_docker && mv mythic-cli ../
@@ -0,0 +1,17 @@
+FROM node:20-alpine
+
+WORKDIR /app
+
+COPY . .
+
+# ==== BUILD =====
+# Install dependencies (npm ci makes sure the exact versions in the lockfile gets installed)
+#RUN npm install --legacy-peer-deps
+RUN npm ci --legacy-peer-deps
+ENV CHOKIDAR_USEPOLLING=true
+ENV WATCHPACK_POLLING=true
+ENV FAST_REFRESH=true
+ENV WDS_POLLING=true
+ENV WDS_SOCKET_PATH=ws
+# ==== RUN =====
+CMD CHOKIDAR_USEPOLLING=true WATCHPACK_POLLING=true FAST_REFRESH=true WDS_POLLING=true WDS_SOCKET_PATH=ws npm run react-start
@@ -0,0 +1,15 @@
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm run react-build`
+
+This builds the UI and outputs the files in the `/app/build` folder
+
+### `npm run react-start`
+
+This builds the UI and starts the internal server in development mode, so changes made to the code are reflected real-time in the UI
@@ -0,0 +1,26 @@
+const webpack = require('webpack');
+module.exports = function override(config, env) {
+    config.resolve.fallback = {
+        //url: require.resolve('url'),
+        fs: false,
+        assert: require.resolve('assert'),
+        crypto: require.resolve('crypto-browserify'),
+        path: require.resolve('path-browserify'),
+        //http: require.resolve('stream-http'),
+        //https: require.resolve('https-browserify'),
+        //os: require.resolve('os-browserify/browser'),
+        //buffer: require.resolve('buffer'),
+        stream: require.resolve('stream-browserify'),
+    };
+    /*
+    config.plugins.push(
+        new webpack.ProvidePlugin({
+            process: 'process/browser',
+            Buffer: ['buffer', 'Buffer'],
+        }),
+    );
+
+     */
+
+    return config;
+}
@@ -0,0 +1,105 @@
+{
+  "name": "mythic",
+  "version": "0.1.0",
+  "private": true,
+  "homepage": "/new",
+  "author": "@its_a_feature_",
+  "description": "React UI for Mythic C2 Framework",
+  "devDependencies": {
+    "buffer": "^6.0.3",
+    "crypto-browserify": "^3.12.1",
+    "react-app-rewired": "^2.2.1",
+    "react-scripts": "^5.0.1",
+    "stream-browserify": "^3.0.0"
+  },
+  "dependencies": {
+    "@apollo/client": "^3.13.8",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-brands-svg-icons": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "@hello-pangea/dnd": "^17.0.0",
+    "@mui/icons-material": "^7.0.2",
+    "@mui/lab": "^7.0.0-beta.11",
+    "@mui/material": "^7.0.2",
+    "@mui/utils": "^7.0.2",
+    "@mui/x-charts": "^8.1.0",
+    "@mui/x-data-grid": "^8.1.0",
+    "@mui/x-date-pickers": "^8.1.0",
+    "@xyflow/react": "^12.6.0",
+    "ace-builds": "^1.40.1",
+    "anser": "^2.3.2",
+    "dayjs": "^1.11.13",
+    "elkjs": "^0.10.0",
+    "graphql": "^16.10.0",
+    "graphql-ws": "^6.0.4",
+    "html-to-image": "^1.11.11",
+    "html2canvas": "^1.4.1",
+    "ip6": "^0.2.10",
+    "json5": "^2.2.3",
+    "jwt-decode": "^4.0.0",
+    "moment": "^2.30.1",
+    "moment-timezone": "^0.5.45",
+    "path-browserify": "^1.0.1",
+    "randexp": "^0.5.3",
+    "react": "^18.3.1",
+    "react-ace": "^14.0.1",
+    "react-colorful": "^5.6.1",
+    "react-dom": "^18.3.1",
+    "react-draggable": "^4.4.6",
+    "react-moment": "^1.1.3",
+    "react-router-dom": "^7.13.1",
+    "react-scrollbar-size": "^5.0.0",
+    "react-split": "^2.0.14",
+    "react-toastify": "^11.0.5",
+    "react-tooltip": "^5.28.1",
+    "react-virtualized": "^9.22.6",
+    "react-virtualized-auto-sizer": "^1.0.26",
+    "react-window": "^1.8.11",
+    "save-svg-as-png": "^1.4.17",
+    "semver": "^7.6.2",
+    "sql.js": "^1.13.0",
+    "styled-components": "^6.1.17",
+    "uuid": "^9.0.1",
+    "webpack": "^5.105.0",
+    "word-wrap": "^1.2.5"
+  },
+  "scripts": {
+    "react-start": "CHOKIDAR_USEPOLLING=true WATCHPACK_POLLING=true FAST_REFRESH=true WDS_POLLING=true BROWSER=none PORT=3000 WDS_SOCKET_PORT=7443 WDS_SOCKET_PATH=ws react-app-rewired start",
+    "react-build": "react-app-rewired build",
+    "react-test": "react-app-rewired test",
+    "react-eject": "react-scripts eject",
+    "build": "npm run react-build",
+    "start": "BROWSER=none CHOKIDAR_USEPOLLING=true WATCHPACK_POLLING=true FAST_REFRESH=true WDS_POLLING=true PORT=3000 WDS_SOCKET_PORT=7443 WDS_SOCKET_PATH=ws npm run react-start"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "babel": {
+    "presets": [
+      [
+        "react-app",
+        {
+          "runtime": "automatic"
+        }
+      ]
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Mythic</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
@@ -0,0 +1,15 @@
+{
+  "short_name": "Mythic",
+  "name": "Mythic C2",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
@@ -0,0 +1,164 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.7.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Isolation_Mode" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+	 y="0px" viewBox="0 0 720 720" style="enable-background:new 0 0 720 720;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#E01F2F;}
+</style>
+<g>
+	<path class="st0" d="M631.71,544.4c-2.42-0.54-7.34-1.83-13.64-4.16c0.33,0.12,0.65,0.26,0.97,0.39
+		C624.37,542.61,628.45,543.68,631.71,544.4z"/>
+	<path class="st0" d="M633.4,544.75L633.4,544.75c-0.53-0.11-1.11-0.23-1.69-0.35C632.8,544.65,633.4,544.75,633.4,544.75z"/>
+	<path class="st0" d="M141.27,535.72C123.48,559.12,99,591.36,97.89,593.2c-1.18,1.97-7.99,13.54-20.39,18.46
+		c-17.32,5.6-21.78-2.86-21.78-2.86s-20.56,0.4-19.7,17.05h34.95v-0.02h33.31c0,0,0.58-14.58,15.16-17.49l60.92-48.82
+		C156.9,555.69,146.15,544.52,141.27,535.72z"/>
+	<g>
+		<path class="st0" d="M487.03,525.19l-76.29,72.09l72.21-76.16c-0.7-0.7-1.42-1.4-2.16-2.12c-9.15-8.9-17.68-13.07-26.83-13.07
+			c-10.91,0-22.71,5.71-37.09,13.4c2.02,14.66,2.11,33.84-7.43,46.78c-0.07,0.09-0.14,0.19-0.21,0.28
+			c-10.71,14.14-19.46,25.74-20.11,26.82c-1.19,1.98-8.11,13.75-20.72,18.61c-0.46,0.18-0.9,0.3-1.33,0.44
+			c-0.51,0.18-1.04,0.33-1.58,0.49c-0.7,0.19-1.4,0.37-2.07,0.49c-0.02,0-0.02,0-0.04,0c-11.13,2.07-16.38-4.44-16.38-4.44
+			s-20.56,0.4-19.7,17.05h34.95v-0.02h33.28c0,0,0.58-14.58,15.16-17.49c0,0,0,0,0.02-0.02c0.05-0.05,0.25-0.19,0.54-0.44l0.44-0.35
+			c6.99-5.78,49.59-41.09,73.3-66.94c3-3.27,5.69-6.39,7.96-9.27c-0.25-0.25-0.49-0.51-0.74-0.76
+			C490.59,528.89,488.89,527.1,487.03,525.19z"/>
+		<path class="st0" d="M384.77,207c0,0-0.02,20.99,7.18,27.11c7.2,6.15,22.41,1.46,32.15-9.76c11.84-13.64,18.61,5.09,18.61,5.09
+			c0.37-14.56-12.78-15.8-12.78-15.8c14.72-7.18,20.65,8.89,20.65,8.89c-0.67-7.2-4.21-15.58-16.17-15.56
+			c-16.51,0.04-18.79,17.6-33.3,20.07C386.6,229.51,384.77,207,384.77,207z"/>
+		<path class="st0" d="M681.85,338.39c-2.6-12.08-7.18-23.27-13-33.56c-5.83-10.29-13.01-19.69-21.41-28.04
+			c-8.38-8.34-18.05-15.77-29.27-21.3c-11.13-5.51-23.25-8.78-35.14-10.08c-11.92-1.3-23.62-0.74-34.79,0.84
+			c-11.15,1.6-21.88,4.23-31.96,7.08c-2.55,0.72-4.85,1.35-7.64,2.23c-1.35,0.42-2.67,0.79-4.04,1.26l-4.07,1.4
+			c-5.44,1.98-11.05,4.44-16.19,7.24c-1.32,0.68-2.53,1.39-3.76,2.09c-1.25,0.7-2.37,1.39-3.53,2.07l-6.46,3.88
+			c-4.11,2.46-8.08,4.64-12.19,6.71c-4.16,2.02-8.38,4-12.78,5.81l-3.28,1.37l-3.49,1.4l-6.92,2.74
+			c-9.15,3.56-18.16,6.76-27.22,9.32c-9.04,2.58-18.12,4.51-27.2,5.64c-9.08,1.12-18.14,1.4-27.13,0.74
+			c-1.12-0.09-2.25-0.14-3.37-0.23l-3.34-0.42l-3.35-0.42c-0.53-0.05-1.18-0.18-1.79-0.26l-1.81-0.28
+			c-4.78-0.77-9.4-1.62-13.96-2.63c-9.11-2.02-17.91-4.69-25.94-8.2c-8.03-3.51-15.24-7.92-20.67-13.21
+			c-5.46-5.3-8.94-11.31-10.55-18.25c-1.6-7.01-1.3-15.05,0.76-22.79c1-3.88,2.42-7.69,4.23-11.31c1.79-3.64,3.93-7.09,6.43-10.24
+			c2.48-3.18,5.25-6.08,8.31-8.57c3.04-2.51,6.32-4.69,9.82-6.39c1.72-0.91,3.58-1.51,5.36-2.28c1.86-0.53,3.69-1.23,5.62-1.56
+			c3.81-0.86,7.76-1.32,11.82-1.26c0.02,0,0.04,0,0.05,0c2.83,0.02,5.62,0.49,8.34,1.21c1.46,0.39,2.97,0.74,4.5,1.04
+			c3.93,0.77,7.39,1.58,10.47,2.44c0.23,0.09,0.46,0.18,0.68,0.26l0.04-0.07c3,0.84,5.62,1.72,7.87,2.58v-0.11
+			c0.86,0.37,1.69,0.76,2.46,1.12c0.02,0,0.02,0,0.04,0.02c10.78,5.22,12.05,9.69,12.05,9.69c0.04,0.09,0.09,0.12,0.12,0.21
+			c2.05,2.79,3.48,5.57,4.95,7.88c5.87,8.99,8.34,11.03,8.34,11.03l1.86-3.83c-7.55-8.34-9.78-32.65-9.78-32.65
+			s15.95-3.3,23.13,0.12c6.95,3.35,0.95,16.12,0.6,16.74c5.65-2.35,11.43-13.79,11.43-13.79c4.74-2.69,3.53-11.17,3.53-11.17
+			c-18.95-22.83-44.53-26.03-65.87-22.14c-2.48,0.04-4.92,0.14-7.34,0.33c-4.5,0.33-9.01,0.4-13.5,0.11
+			c-1.18-0.07-2.35-0.12-3.53-0.16c-6.09-0.18-12.29,0.39-18.37,1.65c-3.07,0.54-6.04,1.51-9.04,2.39
+			c-2.92,1.11-5.88,2.12-8.68,3.51c-5.65,2.65-10.94,6.02-15.77,9.87c-4.85,3.85-9.2,8.24-13.03,13c-3.86,4.74-7.18,9.89-9.96,15.3
+			c-2.79,5.41-5.04,11.1-6.67,17c-3.28,11.78-4.27,24.53-1.62,37.37c1.39,6.41,3.69,12.78,6.92,18.56
+			c3.21,5.8,7.27,11.01,11.73,15.51c4.48,4.51,9.34,8.34,14.36,11.63c5.02,3.28,10.2,6.06,15.44,8.45
+			c10.47,4.78,21.13,8.1,31.77,10.62c5.3,1.26,10.64,2.32,15.86,3.23l1.93,0.33c0.65,0.11,1.23,0.23,1.97,0.32l4.18,0.6l4.2,0.58
+			c1.4,0.14,2.81,0.25,4.21,0.37c11.22,0.97,22.5,0.76,33.56-0.44c22.14-2.37,43.22-8.82,62.78-16.17l7.25-2.76l3.58-1.39l3.74-1.49
+			c4.99-1.97,9.99-4.21,14.96-6.55c4.95-2.41,9.9-5.06,14.54-7.74c4.65-2.69,8.78-5.22,12.57-7.16c3.79-1.98,7.52-3.55,11.61-4.99
+			l3.13-1.02c1.04-0.35,2.16-0.63,3.23-0.95c2.05-0.61,4.65-1.3,6.97-1.93c9.45-2.55,18.49-4.58,27.41-5.74
+			c8.9-1.12,17.61-1.39,25.83-0.39c8.22,1,15.93,3.25,22.93,6.81c6.94,3.51,13.54,8.6,19.44,14.61
+			c5.88,6.01,11.06,12.92,15.12,20.32c4.07,7.38,7.09,15.21,8.68,22.99c1.55,7.76,1.6,15.38,0.02,22.23
+			c-1.6,6.85-4.71,12.98-9.52,18.32c-4.74,5.36-11.08,9.92-18.28,13.4c-7.2,3.48-15.26,5.9-23.39,7.11
+			c-4.06,0.61-8.15,0.91-12.12,0.88c-1,0.02-1.97-0.05-2.95-0.09l-2.81-0.28c-1.91-0.07-3.65-0.51-5.44-0.81
+			c-0.91-0.11-1.74-0.4-2.6-0.65c-0.86-0.26-1.72-0.44-2.58-0.74c-1.69-0.68-3.39-1.18-5.11-2.05l-1.3-0.58l-0.65-0.3l-0.67-0.37
+			l-2.67-1.44c-0.9-0.49-1.86-1.11-2.79-1.63l-1.4-0.84l-1.49-0.95c-3.86-2.42-8.29-5.37-13.01-8.25l-3.65-2.18
+			c-1.21-0.72-2.56-1.42-3.85-2.12c-2.55-1.44-5.36-2.72-8.1-4.02c-0.68-0.33-1.39-0.63-2.11-0.91l-2.14-0.86
+			c-1.44-0.56-2.86-1.18-4.32-1.67l-4.43-1.42c-1.48-0.47-2.95-0.95-4.46-1.26l-4.48-1.07c-0.76-0.18-1.49-0.35-2.25-0.51
+			l-2.27-0.39c-3-0.56-6.04-0.9-9.06-1.25c-6.08-0.54-12.15-0.67-18.18-0.37c-1.49,0.09-2.99,0.25-4.48,0.35l-2.25,0.19l-2.21,0.3
+			l-4.43,0.6l-4.36,0.81c-11.61,2.21-22.62,5.88-32.96,10.41c-5.18,2.25-10.19,4.76-15.08,7.39c-2,1.12-4.02,2.23-6.01,3.39
+			c-36.46,10.5-75.81,5.09-107.56-16.07c-0.84-0.56-1.72-1.16-2.6-1.76c-1.09-0.09-2.04-0.25-3.14-0.35
+			c-3.74-0.49-7.38-0.65-11.06-0.65c-4.23,0-8.38,0.4-12.42,1.09l-2.9,0.51l-2.99,0.74c-0.95,0.19-1.84,0.49-2.84,0.76
+			c-0.95,0.35-1.93,0.54-2.79,0.95c-3.85,1.3-7.48,3.09-11.12,4.99c2.9-2.95,6.18-5.55,9.87-7.57c3.74-2,7.64-3.76,11.71-4.85
+			c4.11-1.14,8.39-1.84,12.57-2.09c2.9-0.16,5.69-0.16,8.62,0c-6.22-7.73-19.79-23.18-31.14-27.08c0,0-39.74-30.17-52.4-39.72
+			c-12.71-9.68-27.17-27.13-24.94-32.86c0,0,9.57-13.96,17.89-16.54c8.27-2.7,10.47-12.28,10.47-12.28s-12.28,3.49-27.57,3.93
+			s-22.23,4.39-22.23,4.39s-8.78-7.04-18.81-8.34c0,0,0.84-30.15,40.64-49.4c39.78-19.18,86.49-44.5,104.42-98.2
+			c-1.49,2.35-24.97,39.6-53.28,50.1c-29.26,10.92-66.43,23.18-78.2,30.64c-11.85,7.43-34.56,32.35-47.7,79.13l-49.31,57.72
+			c0,0,2.58,6.97,6.94,6.53c0,0,1.3,9.57,10.01,5.62c0,0,2.23,10.08,0.46,14.01c-1.76,3.95,4.43,16.16,12.66,18.35l-0.79-4.79
+			c0,0,2.16,5.23,9.57,7.43c0,0-7.83-10.06-4.85-19.69c2.56-7.92,1.53-11.77,1.05-12.91l3.79,7.67c0,0,1.28-10.47-4.04-18.68
+			c1.93,2.49,11.36,12.92,31.26,5.94c1.79-1.62,3.49-3.28,5.04-4.99l2.18-2.53c0.76-0.81,1.32-1.76,2-2.65
+			c1.39-1.7,2.49-3.58,3.83-5.43c0.6-0.95,1.16-1.93,1.7-2.95c0.6-0.95,1.19-1.93,1.9-2.88c1.11-2,2.25-3.99,3.6-6.04
+			c-0.16,2.39-0.49,4.74-0.9,7.08c-0.39,1.19-0.65,2.35-0.98,3.49l-0.65,1.69c-0.21,0.61-0.3,1.16-0.6,1.7
+			c-0.49,1.09-0.98,2.23-1.55,3.28c-0.49,1.14-1.09,2.12-1.84,3.2c-0.6,0.98-1.23,2.09-1.93,3.04l-2.35,2.83
+			c-1.69,1.84-3.58,3.6-5.57,5.15c-0.46,4.23-1.7,10.22-4.39,15.73c-0.39,0.91-0.79,1.76-1.14,2.55c1.19-1,24.15-19.55,60.08-3.06
+			l1.9,0.79l-0.98,1.84l-2.65,4.58c4.79-1.14,9.68-1.19,14.47-0.11c6.41,1.55,11.77,6.09,15.3,11.27c3.69,5.2,5.74,11.22,7.48,17
+			c0.84,2.9,1.79,5.83,3.42,8.24c1.65,2.44,4.39,4.04,7.48,4.5c-3.09-0.05-6.23-1.35-8.18-3.9c-2.05-2.49-3.2-5.43-4.34-8.24
+			c-2.2-5.72-4.39-11.41-8.1-16.03c-3.58-4.6-8.38-8.24-13.91-9.54c-5.53-1.3-11.66-0.49-16.74,1.7l-4.95,2.09l2.55-4.74l3.79-6.83
+			c-7.43-3.04-15.4-4.64-23.32-3.9c-8.62,0.76-16.95,3.99-24.43,8.57c-0.05,0.05-0.11,0.09-0.16,0.16
+			c-9.71,5.83-17.4,14.45-22.93,24.32c-6.08,10.82-13.91,25.13-19.14,35.6c-9.68,19.19-18.35,22.74-18,31.45
+			c0.46,8.73-4.34,38.88-7.78,45.03c0,0,0.79,9.68,10.87,8.71c0,0,0,7.48,10.01,6.57c0,0-6.13-9.17,2.69-13.56
+			c8.78-4.34,14.4-0.39,16.56,4.79c2.2,5.27-4.79,12.85-10.22,8.82l-2.44-3.99c0,0-6.97,11.36,6.53,14.42c0,0,1.35,7.92,15.35,7.48
+			c0,0-7.87-3.93-1.69-10.08c0,0,10.41-3.93,8.32-23.62c0,0,0.25-1.4,1.19-2.25c0.14-1.88,0.32-3.78,0.65-5.62
+			c0.6-3.99,1.33-7.88,3.23-11.82c0.86-1.93,2.05-3.99,4.25-5.57l0.65-0.46l0.54-0.35c0.3-0.25,0.65-0.46,1.04-0.79
+			c0.56-0.49,1.35-1.05,1.84-1.69c2.49-2.55,4.69-5.58,6.48-8.87c1.98-3.2,3.69-6.69,5.18-10.19c-0.3,3.9-1.28,7.64-2.6,11.38
+			c-1.28,3.74-3.04,7.38-5.62,10.66c-0.65,0.84-1.35,1.63-2.11,2.39c-0.39,0.39-0.79,0.68-1.23,1.11l-0.6,0.49l-0.35,0.25
+			l-0.19,0.16c-0.81,0.74-1.62,2.12-2.25,3.74c-1.25,3.14-2.05,6.78-2.55,10.41c-0.35,2.2-0.6,4.34-0.79,6.48
+			c0.76,0.7,1.49,1.6,2.35,2.74c7.13,9.78,0.79,25.18,23.72,36.46c-0.84-2.09-1.69-4.28-2.42-6.48c-2.3-7.08-3.85-14.56-4.23-22.02
+			c-0.26-3.79-0.21-7.57,0-11.38c0.19-3.74,0.79-7.48,1.39-11.22c0.44-1.84,0.74-3.74,1.19-5.53l0.68-2.79l0.81-2.69
+			c0.54-1.79,1.19-3.6,1.88-5.37l0.79-2.55c0.37-0.79,0.56-1.6,0.81-2.49c1.93-6.73,2.83-13.77,1.9-20.63
+			c-0.9-6.78-3.49-13.4-7.78-18.79c-0.98-1.35-2.14-2.65-3.42-3.79c-1.25-1.14-2.65-2.16-4.09-3.09c-1.46-0.9-2.99-1.6-4.64-2.14
+			c-1.55-0.51-3.2-0.79-4.9-0.84c-3.55-0.16-6.94,0.49-10.03,2.35c-1.49,0.9-2.9,2.04-4.04,3.39c-1.25,1.3-2.35,2.84-3.06,4.48
+			c0.91-3.53,3.06-6.88,6.2-9.27c2.93-2.42,6.92-3.74,10.85-3.93c1.95-0.09,3.93,0,5.9,0.46c1.93,0.46,3.88,1.11,5.62,2.09
+			c1.76,0.84,3.44,2,4.93,3.2c1.55,1.23,2.99,2.6,4.28,4.04c2.65,2.95,4.83,6.29,6.34,9.87c1.69,3.58,2.9,7.38,3.34,11.26
+			c1.14,7.78,0.39,15.66-1.95,23.04c-0.25,0.9-0.54,1.83-0.84,2.74l-0.98,2.65c-0.61,1.7-1.25,3.39-1.76,5.09
+			c-1.16,3.39-2.09,6.88-2.9,10.38c-0.65,3.49-1.39,7.02-1.74,10.62c-0.3,3.53-0.6,7.18-0.49,10.76c0,3.6,0.19,7.18,0.54,10.76
+			c0.39,3.6,1.09,7.13,1.83,10.71c0.65,2.79,1.51,5.57,2.35,8.32c0,0.05,0.05,0.05,0.05,0.05s0,0.05,0.05,0.16
+			c1.33,4.13,3.09,8.11,5.13,11.98c2.79,3.88,6.94,8.08,13.26,11.56c6.34,3.42,14.82,6.27,26.18,7.32
+			c41.97,3.93,41.06,13.12,46.77,20.55c0,0,3.93-15.26-4.79-22.74c0,0,6.08-0.46,21.39,14.86c15.3,15.31,25.41,7.88,25.41,7.88
+			s-11.45,1.3-16.6-7.88c-5.27-9.17-7.52-30.56-14.51-34.93v-1.79c-1.09-1.25-2.2-2.55-3.35-3.9c-2.55-3.14-4.83-6.43-7.13-9.87
+			c-2.12-3.39-4.23-6.92-5.83-10.85c3.49,2.39,6.53,5.2,9.48,8.01c2.35,2.41,4.53,4.85,6.73,7.38c2.2,2.6,4.28,5.23,6.23,8.04
+			c3.14,4.53,5.9,9.11,8.13,14.36h0.05c13.72,17.44,32.15,43.62,28.57,55.07c-1.55,4.74-3.79,7.64-6.18,9.38
+			c-6.78,4.88-15.26,0.65-15.26,0.65s-20.58,0.44-19.69,17.05h62.5c0,0,7.43-10.52,16.26-13.96c8.62-3.51-19.37-72.54-19.74-73.48
+			c0.67,0.39,26.39,15.45,73.86-6.53c48.12-22.28,72.19-48.89,104.89-17.03c32.75,31.91,21.83,34.09,121.54,53.79
+			c0,0,34.1,13.12,19.65,38.88c0,0,0.11,0.44,0,1.09v-1.09c-10.22,9.15-16.4,1.3-16.4,1.3s-20.55,0.44-19.63,17.05h67.59
+			c0,0-1.84-10.52,7.32-13.96c9.24-3.53-10.06-27.97-16.16-50.29c-4.58-16.89-4.53-14.75-15.35-16.86c0,0-0.02,0-0.04-0.02
+			c-0.02,0-0.04-0.02-0.07-0.04c-0.05,0-0.16,0-0.25-0.05h-0.25c-0.25-0.05-0.6-0.16-1.09-0.25h-0.05c-0.21-0.05-0.4-0.09-0.61-0.16
+			c-0.11-0.02-0.19-0.05-0.3-0.07s-0.23-0.05-0.35-0.07c-0.05,0-0.11,0-0.19-0.05c-0.11,0-0.21-0.05-0.25-0.05
+			c-0.05-0.04-0.09-0.04-0.16-0.05c-0.02,0-0.04-0.02-0.05-0.02s-0.04-0.02-0.04-0.02c-0.04-0.02-0.04-0.02-0.07-0.04
+			c-0.05,0-0.09-0.05-0.19-0.05h-0.11c-0.09-0.05-0.19-0.05-0.3-0.05c-0.7-0.21-1.55-0.4-2.41-0.65c-0.09,0-0.16-0.05-0.25-0.05
+			c-0.11,0-0.16-0.05-0.25-0.09c-0.26-0.09-0.53-0.18-0.81-0.26c-0.19-0.05-0.39-0.11-0.56-0.18c-0.18-0.07-0.37-0.11-0.54-0.18
+			c-0.18-0.05-0.37-0.11-0.54-0.18c-0.3-0.11-0.6-0.19-0.91-0.26c-1.14-0.4-2.46-0.79-3.74-1.3c-0.16-0.11-0.33-0.16-0.49-0.25
+			c0-0.02-0.02-0.02-0.02-0.02h-0.02c-0.11-0.04-0.18-0.05-0.23-0.09c-0.04-0.02-0.07-0.04-0.11-0.05c0,0,0,0-0.02-0.02
+			s-0.05-0.04-0.09-0.05c-8.9-3.34-20.58-8.85-31.89-17.65c0,0-0.04-0.04-0.11-0.09c-3.9-3.04-7.76-6.44-11.43-10.29
+			c-0.04-0.04-0.07-0.07-0.11-0.11c-13.26-12.8-34.72-36.3-47.31-64.59c-0.35-0.79-0.74-1.58-1.12-2.35c0-0.02-0.02-0.02-0.02-0.02
+			c-3.25-6.37-7.92-12.15-13.49-17.37c-0.3-0.28-0.6-0.56-0.9-0.83c0.02,0,0.04,0.02,0.05,0.02c-4.79-4.69-10.1-8.9-15.61-12.66
+			l2.81,0.84c0.93,0.3,1.84,0.7,2.77,1.05l1.39,0.53c0.46,0.16,0.93,0.35,1.39,0.58c1.83,0.88,3.67,1.63,5.53,2.69
+			c0.93,0.51,1.84,0.95,2.81,1.51l2.88,1.69c0.95,0.53,2,1.21,2.99,1.83l3.09,1.91l3.21,2.02l3.44,2.12
+			c9.15,5.71,21.35,11.94,34.28,14.31l4.81,0.83c1.62,0.32,3.18,0.35,4.78,0.51l4.76,0.37c1.56,0.04,3.13,0.11,4.65,0.07
+			c6.16-0.02,12.2-0.56,18.16-1.53c11.87-1.93,23.43-5.51,34.4-10.98c5.5-2.72,10.82-5.97,15.89-9.75
+			c5.08-3.76,9.85-8.15,14.14-13.1c4.3-4.93,8.08-10.5,11.08-16.47c3-5.99,5.25-12.35,6.64-18.83
+			C684.92,363.52,684.41,350.44,681.85,338.39z M379.22,175.86l15,10.55l-23.46-8.52L379.22,175.86z M85.99,279.4l11.61-13.42h8.43
+			L85.99,279.4z M150.4,270.47l5.6-12.15l29.31-10.52l-23.99,11.36L150.4,270.47z M70.99,449.54l11.61-13.36h8.52L70.99,449.54z
+			 M170.54,512c-3.69-5.58-5.64-12.36-6.04-19.11c-0.25-3.34-0.05-6.73,0.35-10.06c0.25-0.86,0.35-1.7,0.54-2.6
+			c0.19-1.05,0.4-1.6,0.56-2.44c0.44-1.49,0.68-2.99,0.98-4.53c1.14-6.18,1.69-12.52,1.79-18.81c0.32-12.61-1.39-25.32-4.64-37.48
+			c-0.84-3.09-1.84-6.04-2.99-8.92c-1.14-2.95-2.6-5.74-4.23-8.32c-1.7-2.65-3.69-5.08-6.13-7.02c-1.25-0.95-2.53-1.81-3.99-2.49
+			c-1.44-0.65-2.95-1.16-4.53-1.25c3.2-0.46,6.59,0.65,9.48,2.35c1.74,0.98,3.39,2.23,4.79,3.6c0.65-1.46,1.19-2.9,1.44-4.41
+			c0.35-1.53,0.44-3.09,0.44-4.64c-0.09-3.04-0.79-6.04-1.93-8.87c-1.09-2.84-2.6-5.58-4.34-8.18c-1.4-2.18-2.95-4.34-4.65-6.27
+			l-2.48,0.81c-1.25,0.46-2.55,0.95-3.83,1.39c-1.26,0.54-2.46,1.09-3.69,1.65l-1.7,0.98c-0.6,0.3-1.19,0.6-1.79,1
+			c-2.25,1.39-4.28,3.04-5.94,5.09c-0.51,0.54-0.84,1.09-1.16,1.63c-0.25,0.3-0.46,0.6-0.6,0.9c-0.09,0.3-0.35,0.6-0.44,0.91
+			c-0.54,1.23-0.9,2.53-1.05,3.99c-0.3-1.4-0.3-2.9-0.11-4.36c0.11-0.68,0.35-1.44,0.54-2.12c0.35-0.65,0.6-1.46,0.95-2.05
+			c0.74-1.39,1.55-2.53,2.6-3.74l1.44-1.63c0.61-0.49,1.16-0.95,1.76-1.46c0.54-0.54,1.19-0.93,1.74-1.33l1.84-1.3
+			c1.25-0.65,2.55-1.46,3.83-2.05c1.39-0.6,2.69-1.25,4.04-1.76l4.09-1.44l1.35-0.46l1,1.04c1.28,1.35,2.25,2.65,3.28,3.99
+			c1.05,1.35,2,2.74,2.79,4.2c1.79,2.88,3.2,6.02,4.13,9.41c0.4,1.6,0.79,3.28,0.9,5.04c0.16,1.74,0.05,3.49-0.16,5.18
+			c-0.35,1.69-0.79,3.34-1.49,4.88c-0.81,1.46-1.7,2.84-2.76,4c0.98,0.95,1.84,1.9,2.76,2.97c2.12,2.6,3.88,5.44,5.43,8.43
+			c1.55,2.95,2.84,6.09,3.88,9.17c2.2,6.29,3.69,12.71,4.76,19.25c0.95,6.53,1.33,13.15,1.14,19.79
+			c-0.16,6.62-0.98,13.29-2.46,19.79c-0.35,1.6-0.9,3.2-1.39,4.83c-0.19,0.76-0.54,1.69-0.68,2.2c-0.19,0.68-0.35,1.49-0.46,2.2
+			c-0.65,2.99-1,6.11-1,9.22c0,3.09,0.35,6.18,1.05,9.18c0.65,3.09,1.63,5.99,3.09,8.82c1.44,2.74,3.28,5.34,5.43,7.67
+			c2.11,2.34,4.53,4.5,7.18,6.32C179.46,522.03,174.23,517.67,170.54,512z M207.58,458.21c0.25,2.49,0.76,4.97,1.35,7.57
+			c0.65,2.48,1.6,4.93,2.53,7.48c-2.04-1.79-3.79-4.04-5.18-6.43c-1.35-2.44-2.41-5.02-3.2-7.81c-0.68-2.69-1.04-5.5-1.23-8.29
+			c-0.16-2.83,0-5.62,0.35-8.36c0.6-5.6,2.2-10.98,4.34-16c2.2-4.99,4.83-9.78,8.53-13.91c-1.49,5.18-3.04,10.26-4.25,15.4
+			c-1.23,5.04-2.18,10.12-2.9,15.21C207.32,448.1,207.18,453.17,207.58,458.21z M601.46,548.79c5.23,0.49,10.36,1.46,15.44,2.9
+			c2.49,0.76,4.99,1.65,7.34,2.79c2.39,1.19,4.69,2.6,6.73,4.43l1.46,1.55c0.39,0.49,0.74,0.98,1.19,1.49
+			c0.79,1.05,1.65,2.11,2.46,3.2c1.49,2.09,3.04,4.23,4.37,6.5c2.65,4.48,5.08,9.11,7.18,14l-0.19,0.11
+			c-3.2-4.2-6.09-8.53-8.97-12.82l-4.36-6.48c-0.65-1.09-1.39-2.14-2.12-3.25c-0.4-0.49-0.81-1.04-1.11-1.6l-1.14-1.35
+			c-1.84-1.74-3.9-3.23-6.13-4.37c-2.3-1.25-4.64-2.23-7.13-3.09c-4.83-1.74-9.87-2.93-15.07-3.74L601.46,548.79z M438.98,462.85
+			c-1.6,0.95-3.04,2.09-4.39,3.28c-1.35,1.14-2.6,2.55-3.69,3.99c-0.6,0.65-1.05,1.39-1.55,2.16c-0.46,0.76-0.9,1.55-1.19,2.23v0.05
+			l-0.16,0.21c-2.55,4.07-5.34,8.08-8.59,11.68c-1.39,1.93-3.18,3.64-4.88,5.43c-0.84,0.84-1.69,1.6-2.6,2.49
+			c-0.95,0.79-1.74,1.63-2.74,2.39c-7.39,6.34-15.72,11.52-24.53,15.51c-8.78,4.04-18.16,6.78-27.57,8.52
+			c-4.79,0.84-9.48,1.46-14.29,1.65c-2.46,0.16-4.85,0.19-7.24,0.16c-2.35-0.05-4.69-0.16-7.04-0.46
+			c9.41-1.05,18.65-2.84,27.61-5.34c4.55-1.19,8.92-2.69,13.36-4.28c4.28-1.6,8.62-3.34,12.77-5.39
+			c8.32-3.99,16.24-8.82,23.37-14.59c7.24-5.72,13.66-12.42,19.44-19.74c1.05-1.79,2.25-3.2,3.64-4.55
+			c1.35-1.44,2.95-2.69,4.58-3.74c1.65-1.09,3.34-1.98,5.15-2.63c1.79-0.76,3.74-1.16,5.57-1.51c-0.84,0.4-1.79,0.7-2.58,1.19
+			C440.67,461.95,439.77,462.35,438.98,462.85z M507.47,503.47l2.49,3.6c0.84,1.11,1.6,2.28,2.49,3.39l2.65,3.34l1.39,1.65
+			l1.39,1.49c1.02,1.05,2,2.05,2.99,3.09l3.09,2.84c1.09,1.05,2.2,1.9,3.28,2.79c1.09,0.9,2.2,1.79,3.39,2.63
+			c4.53,3.39,9.43,6.39,14.51,8.94c5.18,2.55,10.57,4.74,16.16,6.18l-0.16,0.54c-5.8-0.98-11.38-2.79-16.7-5.09
+			c-5.34-2.23-10.57-4.97-15.44-8.22c-1.32-0.68-2.49-1.63-3.71-2.49c-1.19-0.9-2.34-1.69-3.48-2.67l-3.35-2.84
+			c-1.09-0.93-2.2-1.98-3.28-2.99l-1.55-1.53l-1.49-1.65l-3.04-3.28c-0.95-1.14-1.81-2.28-2.69-3.49l-2.69-3.42l-1.3-1.65
+			l-1.39-1.55c-0.86-1.09-1.84-1.98-2.79-2.99c-2.05-1.83-4.18-3.64-6.43-5.18c-2.3-1.62-4.58-2.95-7.08-4.23
+			c-2.39-1.25-4.88-2.46-7.52-3.39c-10.27-4.04-21.58-5.9-33.12-6.2l-0.09-0.6c5.69-1.55,11.63-2.05,17.54-1.81
+			c2.93,0.11,5.99,0.46,8.87,0.91c2.99,0.49,5.94,1.3,8.82,2.2c1.4,0.46,2.79,0.98,4.2,1.55c1.39,0.6,2.79,1.23,4.14,1.98
+			c1.33,0.65,2.58,1.46,3.93,2.3c0.6,0.39,1.25,0.84,1.9,1.23c0.61,0.51,1.21,0.95,1.81,1.4C500.04,494,504.13,498.55,507.47,503.47
+			z"/>
+	</g>
+</g>
+</svg>
@@ -0,0 +1,230 @@
+import { makeVar } from '@apollo/client';
+import {restartWebsockets} from "./index";
+import {snackActions} from "./components/utilities/Snackbar";
+
+export const meState = makeVar({loggedIn:false, user: null, access_token: null, refresh_token: null});
+export const alertCount = makeVar(0);
+export const taskTimestampDisplayFieldOptions = [
+    {
+        name: "timestamp",
+        display: "Latest Timestamp for anything task related"
+    },
+    {
+        name: "status_timestamp_preprocessing",
+        display: "When Operator Submitted Task"
+    },
+    {
+        name: "status_timestamp_processing",
+        display: "When Agent Picked up Task",
+    }
+]
+export const taskingContextFieldsOptions = ["impersonation_context", "cwd", "user", "host", "ip", "pid", "process_short_name", "extra_info", "architecture"].sort();
+export const defaultShortcuts = [
+    "ActiveCallbacks", "Payloads", "PayloadTypesAndC2",
+    "Operations", "SearchFiles", "SearchProxies",
+    "CreatePayload", "Eventing",
+].sort();
+export const operatorSettingDefaults =  {
+    fontSize: 12,
+    navBarOpen: false,
+    fontFamily: "Verdana, Arial, sans-serif",
+    showMedia: true,
+    hideUsernames: false,
+    showIP: false,
+    showHostname: false,
+    showOPSECBypassUsername: false,
+    showCallbackGroups: false,
+    useDisplayParamsForCLIHistory: true,
+    interactType: "interactSplit",
+    taskTimestampDisplayField: "timestamp",
+    callbacks_table_columns: ["Interact", "Host", "Domain", "User", "Description", "Last Checkin", "Agent",  "IP", "PID"],
+    callbacks_table_filters: {},
+    autoTaskLsOnEmptyDirectories: false,
+    hideBrowserTasking: false,
+    hideTaskingContext: false,
+    taskingContextFields: ["impersonation_context", "cwd"],
+    ["experiment-responseStreamLimit"]: 200,
+    sideShortcuts: defaultShortcuts,
+    palette: {
+        primary: {
+            dark: "#75859b",
+            light: "#75859b",
+        },
+        error: {
+            dark: '#bd5142',
+            light: '#c42c32'
+        },
+        success: {
+            dark: '#85b089',
+            light: '#0e7004',
+        },
+        secondary: {
+            dark: '#bebebe',
+            light: '#a6a5a5'
+        },
+        info: {
+            dark: '#84b4dc',
+            light: '#4990b2'
+        },
+        warning: {
+            dark: "#dc8455",
+            light: "#ffb74d",
+        },
+        background: {
+            dark: '#282828',
+            light: '#f6f6f6'
+        },
+        paper: {
+            dark: '#282828',
+            light: '#ececec'
+        },
+        tableHeader: {
+            dark: '#484848',
+            light: '#c4c4c4'
+        },
+        tableHover: {
+            dark: "#3c3c3c",
+            light: "#e8e8e8",
+        },
+        pageHeader: {
+            dark: '#1b2025',
+            light: '#706c6e'
+        },
+        text: {
+            dark: "#e4e4e4",
+            light: "#000000",
+        },
+        selectedCallbackColor: {
+            dark: '#26456e',
+            light: '#c6e5f6',
+        },
+        selectedCallbackHierarchyColor: {
+            dark: '#273e5d',
+            light: '#deeff8',
+        },
+        backgroundImage: {
+            dark: null,
+            light: null
+        },
+        navBarIcons: {
+            dark: '#ffffff',
+            light: '#ffffff'
+        },
+        navBarText: {
+            dark: '#ffffff',
+            light: '#ffffff'
+        },
+        navBarColor: {
+            dark: "#194573",
+            light: "#3b606d",
+        },
+        navBarBottomColor: {
+            dark: "#330814",
+            light: "#283581",
+        },
+        taskPromptTextColor: {
+            dark: '#bebebe',
+            light: '#a6a5a5'
+        },
+        taskPromptCommandTextColor: {
+            dark: "#e4e4e4",
+            light: "#000000",
+        },
+        taskContextColor: {
+            dark: "#122848",
+            light: "#acc0da",
+        },
+        taskContextImpersonationColor: {
+            dark: "#641616",
+            light: "#dec0c0",
+        },
+        taskContextExtraColor: {
+            dark: "#2a5953",
+            light: "#a7ce9d",
+        },
+        emptyFolderColor: {
+            dark: '#bebebe',
+            light: '#a6a5a5'
+        },
+        outputBackgroundColor: {
+            dark: '#282828',
+            light: '#f6f6f6'
+        },
+        outputTextColor: {
+            dark: '#f6f6f6',
+            light: '#282828',
+        },
+        borderColor: {
+            dark: "#595858",
+            light: "#c5c5c5"
+        }
+    },
+}
+
+export const mePreferences = makeVar(operatorSettingDefaults);
+
+
+export const successfulLogin = (data) => {
+    localStorage.setItem("access_token", data.access_token);
+    localStorage.setItem("refresh_token", data.refresh_token);
+    let now = new Date();
+    let serverNow = new Date(data.user.current_utc_time);
+    const difference = (serverNow.getTime() - now.getTime());
+    let me = {...data.user};
+    me.server_skew = difference;
+    me.login_time = now;
+    meState({
+        loggedIn: true,
+        access_token: data.access_token,
+        refresh_token: data.refresh_token,
+        user: {
+            ...me
+        }
+    });
+    localStorage.setItem("user", JSON.stringify(me));
+    restartWebsockets();
+}
+export const successfulRefresh = (data) => {
+    localStorage.setItem("access_token", data.access_token);
+    localStorage.setItem("refresh_token", data.refresh_token);
+    let now = new Date();
+    let serverNow = new Date(data.user.current_utc_time);
+    const difference = (serverNow.getTime() - now.getTime()) ;
+    let me = {...meState().user};
+    me.server_skew = difference;
+    me.login_time = now;
+    meState({
+        loggedIn: true,
+        access_token: data.access_token,
+        refresh_token: data.refresh_token,
+        user: {
+            ...me
+        }
+    });
+    localStorage.setItem("user", JSON.stringify(me));
+}
+export const FailedRefresh = (restart_websockets) =>{
+    console.log("failed refresh");
+    localStorage.removeItem("access_token");
+    localStorage.removeItem("refresh_token");
+    localStorage.removeItem("user");
+    // retrieve all cookies
+    let Cookies = document.cookie.split(';');
+    // set past expiry to all cookies
+    for (let i = 0; i < Cookies.length; i++) {
+        document.cookie = Cookies[i] + "=; expires="+ new Date(0).toUTCString();
+    }
+    meState({
+        loggedIn: false,
+        access_token: null,
+        refresh_token: null,
+        user: null
+    });
+    mePreferences(operatorSettingDefaults);
+    snackActions.clearAll();
+    if(restart_websockets){
+        restartWebsockets();
+    }
+
+}
+
@@ -0,0 +1,454 @@
+import { LoginForm } from './pages/Login/LoginForm';
+import { Settings } from './pages/Settings/Settings';
+import { PayloadTypesC2Profiles } from './pages/PayloadTypesC2Profiles/PayloadTypesC2Profiles';
+import { CreatePayload } from './pages/CreatePayload/CreatePayload';
+import { CreatePayloadWrapper } from './pages/CreateWrapper/CreatePayload';
+import { EventFeed } from './pages/EventFeed/EventFeed';
+import { Operations } from './pages/Operations/Operations';
+import { BrowserScripts } from './pages/BrowserScripts/BrowserScripts';
+import { Payloads } from './pages/Payloads/Payloads';
+import { ExpandedCallback } from './pages/ExpandedCallback/ExpandedCallback';
+import { Home } from './pages/Home/Home';
+import { LoggedInRoute } from './utilities/LoggedInRoute';
+import { Callbacks } from './pages/Callbacks/Callbacks';
+import { Search } from './pages/Search/Search';
+import React, {createContext} from 'react';
+import { Typography } from '@mui/material';
+import { useReactiveVar } from '@apollo/client';
+import { useDarkMode } from './utilities/useDarkMode';
+import { SingleTaskView } from './pages/SingleTaskView/SingleTaskView';
+import { createTheme, ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
+import { GlobalStyles } from '../themes/GlobalStyles';
+import CssBaseline from '@mui/material/CssBaseline';
+import {FailedRefresh, mePreferences, meState, operatorSettingDefaults} from '../cache';
+import { Reporting } from './pages/Reporting/Reporting';
+import { MitreAttack } from './pages/MITRE_ATTACK/MitreAttack';
+import {Tags} from './pages/Tags/Tags';
+import { Tooltip } from 'react-tooltip';
+import {useLazyQuery, gql } from '@apollo/client';
+//background-color: #282c34;
+import { Route, Routes } from 'react-router-dom';
+import { useInterval } from './utilities/Time';
+import { JWTTimeLeft, isJWTValid } from '../index';
+import { RefreshTokenDialog } from './RefreshTokenDialog';
+import { MythicDialog } from './MythicComponents/MythicDialog';
+import { ToastContainer } from 'react-toastify';
+import "react-toastify/dist/ReactToastify.css";
+import {Eventing} from "./pages/Eventing/Eventing";
+import {InviteForm} from "./pages/Login/InviteForm";
+import {snackActions} from "./utilities/Snackbar";
+import {TopAppBarVertical} from "./TopAppBarVertical";
+import { library } from '@fortawesome/fontawesome-svg-core';
+import * as Icons from '@fortawesome/free-solid-svg-icons';
+import {Jupyter} from "./pages/Jupyter/Jupyter";
+import {Hasura} from "./pages/Hasura/Hasura";
+
+// add all fas icons
+const iconList = Object
+    .keys(Icons)
+    .filter(key => key !== "fas" && key !== "prefix" )
+    .map(icon => Icons[icon])
+
+library.add(...iconList)
+
+export const MeContext = createContext({});
+export const userSettingsQuery = gql`
+query getUserSettings {
+    getOperatorPreferences {
+        status
+        error
+        preferences
+    }
+}
+`;
+
+
+export function App(props) {
+    const me = useReactiveVar(meState);
+    const preferences = useReactiveVar(mePreferences);
+    const [loadingPreference, setLoadingPreferences] = React.useState(true);
+    const [themeMode, themeToggler] = useDarkMode();
+    const theme = React.useMemo(
+        () => {
+            try{
+                return createTheme({
+                    transitions: {
+                        // So we have `transition: none;` everywhere
+                        create: () => 'none',
+                    },
+                    palette: {
+                        contrastThreshold: 4.5,
+                        //tonalOffset: 0.5,
+                        primary: {
+                            main: themeMode === "dark" ? preferences?.palette?.primary?.dark || operatorSettingDefaults.palette.primary.dark :
+                                preferences?.palette?.primary?.light || operatorSettingDefaults.palette.primary.light,
+                        },
+                        error: {
+                            main: themeMode === "dark" ? preferences?.palette?.error?.dark || operatorSettingDefaults.palette.error.dark :
+                                preferences?.palette?.error?.light || operatorSettingDefaults.palette.error.light,
+                        },
+                        success: {
+                            main: themeMode === 'dark' ? preferences?.palette?.success?.dark || operatorSettingDefaults.palette.success.dark :
+                                preferences?.palette?.success?.light || operatorSettingDefaults.palette.success.light,
+                        },
+                        secondary: {
+                            main: themeMode === 'dark' ? preferences?.palette?.secondary?.dark || operatorSettingDefaults.palette.secondary.dark :
+                                preferences?.palette?.secondary?.light || operatorSettingDefaults.palette.secondary.light,
+                        },
+                        info: {
+                            main: themeMode === 'dark' ? preferences?.palette?.info?.dark || operatorSettingDefaults.palette.info.dark :
+                                preferences?.palette?.info?.light || operatorSettingDefaults.palette.info.light,
+                        },
+                        warning: {
+                            main: themeMode === 'dark' ? preferences?.palette?.warning?.dark || operatorSettingDefaults.palette.warning.dark :
+                                preferences?.palette?.warning?.light || operatorSettingDefaults.palette.warning.light,
+                        },
+                        mode: themeMode,
+                        background: {
+                            contrast: themeMode === 'dark' ? preferences?.palette?.background?.light || operatorSettingDefaults.palette.background.light :
+                                preferences?.palette?.background?.dark || operatorSettingDefaults.palette.background.dark,
+                            default: themeMode === "dark" ? preferences?.palette?.background?.dark || operatorSettingDefaults.palette.background.dark :
+                                preferences?.palette?.background?.light || operatorSettingDefaults.palette.background.light,
+                            paper: themeMode === "dark" ?  preferences?.palette?.paper?.dark || operatorSettingDefaults.palette.paper.dark :
+                                preferences?.palette?.paper?.light || operatorSettingDefaults.palette.paper.light,
+                            image: themeMode === "dark" ?  preferences?.palette?.backgroundImage?.dark || operatorSettingDefaults.palette.backgroundImage.dark :
+                                preferences?.palette?.backgroundImage?.light || operatorSettingDefaults.palette.backgroundImage.light,
+                        },
+                        text: {
+                            primary: themeMode === 'dark' ? preferences?.palette?.text?.dark || operatorSettingDefaults.palette.text.dark :
+                                preferences?.palette?.text?.light || operatorSettingDefaults.palette.text.light,
+                            contrast: themeMode === 'dark' ? '#000' : '#fff',
+                        },
+                        graphGroupRGBA: themeMode === 'dark' ? 'rgba(57, 76, 93, 0.5)' : 'rgba(211, 215, 232, 0.5)',
+                        speedDialAction: themeMode === 'dark' ? '#495054' : '#ffffff',
+                    },
+                    folderColor: '#f1d592',
+                    tableHeader: themeMode === 'dark' ? preferences?.palette?.tableHeader?.dark || operatorSettingDefaults.palette.tableHeader.dark :
+                        preferences?.palette?.tableHeader?.light || operatorSettingDefaults.palette.tableHeader.light,
+                    selectedCallbackColor: themeMode === 'dark' ? preferences?.palette?.selectedCallbackColor?.dark || operatorSettingDefaults.palette.selectedCallbackColor.dark :
+                        preferences?.palette?.selectedCallbackColor?.light || operatorSettingDefaults.palette.selectedCallbackColor.light,
+                    selectedCallbackHierarchyColor:  themeMode === 'dark' ? preferences?.palette?.selectedCallbackHierarchyColor?.dark || operatorSettingDefaults.palette.selectedCallbackHierarchyColor.dark :
+                        preferences?.palette?.selectedCallbackHierarchyColor?.light || operatorSettingDefaults.palette.selectedCallbackHierarchyColor.light,
+                    tableHover: themeMode === 'dark' ? preferences?.palette?.tableHover?.dark || operatorSettingDefaults.palette.tableHover.dark :
+                        preferences?.palette?.tableHover?.light || operatorSettingDefaults.palette.tableHover.light,
+                    navBarTextIconColor: themeMode === 'dark' ? preferences?.palette?.navBarIcons?.dark || operatorSettingDefaults.palette.navBarIcons.dark :
+                        preferences?.palette?.navBarIcons?.light || operatorSettingDefaults.palette.navBarIcons.light,
+                    navBarTextColor: themeMode === 'dark' ? preferences?.palette?.navBarText?.dark || operatorSettingDefaults.palette.navBarText.dark :
+                        preferences?.palette?.navBarText?.light || operatorSettingDefaults.palette.navBarText.light,
+                    pageHeader: {
+                        main: themeMode === 'dark' ? preferences?.palette?.pageHeader?.dark || operatorSettingDefaults.palette.pageHeader.dark :
+                            preferences?.palette?.pageHeader?.light || operatorSettingDefaults.palette.pageHeader.light,
+                    },
+                    pageHeaderText: {
+                        main: 'white',
+                    },
+                    topAppBarColor: themeMode === 'dark' ? (preferences?.palette?.navBarColor?.dark || operatorSettingDefaults.palette.navBarColor.dark) :
+                        (preferences?.palette?.navBarColor?.light || operatorSettingDefaults.palette.navBarColor.light),
+                    topAppBarBottomColor: themeMode === 'dark' ? preferences?.palette?.navBarBottomColor?.dark || operatorSettingDefaults.palette.navBarBottomColor.dark :
+                        preferences?.palette?.navBarBottomColor?.light || operatorSettingDefaults.palette.navBarBottomColor.light,
+                    typography: {
+                        fontSize: 12, //preferences?.fontSize,
+                        fontFamily: preferences?.fontFamily
+                    },
+                    taskPromptTextColor: themeMode === 'dark' ? preferences?.palette?.taskPromptTextColor?.dark || operatorSettingDefaults.palette.taskPromptTextColor.dark :
+                        preferences?.palette?.taskPromptTextColor?.light || operatorSettingDefaults.palette.taskPromptTextColor.light,
+                    taskPromptCommandTextColor: themeMode === 'dark' ? preferences?.palette?.taskPromptCommandTextColor?.dark || operatorSettingDefaults.palette.taskPromptCommandTextColor.dark :
+                        preferences?.palette?.taskPromptCommandTextColor?.light || operatorSettingDefaults.palette.taskPromptCommandTextColor.light,
+                    taskContextColor: themeMode === 'dark' ? preferences?.palette?.taskContextColor?.dark || operatorSettingDefaults.palette.taskContextColor.dark :
+                        preferences?.palette?.taskContextColor?.light || operatorSettingDefaults.palette.taskContextColor.light,
+                    taskContextImpersonationColor: themeMode === 'dark' ? preferences?.palette?.taskContextImpersonationColor?.dark || operatorSettingDefaults.palette.taskContextImpersonationColor.dark :
+                        preferences?.palette?.taskContextImpersonationColor?.light || operatorSettingDefaults.palette.taskContextImpersonationColor.light,
+                    taskContextExtraColor: themeMode === 'dark' ? preferences?.palette?.taskContextExtraColor?.dark || operatorSettingDefaults.palette.taskContextExtraColor.dark :
+                        preferences?.palette?.taskContextExtraColor?.light || operatorSettingDefaults.palette.taskContextExtraColor.light,
+                    emptyFolderColor: themeMode === 'dark' ? preferences?.palette?.emptyFolderColor?.dark || operatorSettingDefaults.palette.emptyFolderColor.dark :
+                        preferences?.palette?.emptyFolderColor?.light || operatorSettingDefaults.palette.emptyFolderColor.light,
+                    outputBackgroundColor: themeMode === 'dark' ? preferences?.palette?.outputBackgroundColor?.dark || operatorSettingDefaults.palette.outputBackgroundColor.dark :
+                        preferences?.palette?.outputBackgroundColor?.light || operatorSettingDefaults.palette.outputBackgroundColor.light,
+                    outputTextColor: themeMode === 'dark' ? preferences?.palette?.outputTextColor?.dark || operatorSettingDefaults.palette.outputTextColor.dark :
+                        preferences?.palette?.outputTextColor?.light || operatorSettingDefaults.palette.outputTextColor.light,
+                    borderColor: themeMode === 'dark' ? preferences?.palette?.borderColor?.dark || operatorSettingDefaults.palette.borderColor.dark :
+                        preferences?.palette?.borderColor?.light || operatorSettingDefaults.palette.borderColor.light,
+                })
+            }catch(error){
+                console.log(error);
+                snackActions.error(error.message);
+                return createTheme({
+                    transitions: {
+                        // So we have `transition: none;` everywhere
+                        create: () => 'none',
+                    },
+                    palette: {
+                        contrastThreshold: 4.5,
+                        //tonalOffset: 0.5,
+                        primary: {
+                            main: themeMode === "dark" ? operatorSettingDefaults.palette.primary.dark :
+                                operatorSettingDefaults.palette.primary.light,
+                        },
+                        error: {
+                            main: themeMode === "dark" ? operatorSettingDefaults.palette.error.dark :
+                                operatorSettingDefaults.palette.error.light,
+                        },
+                        success: {
+                            main: themeMode === 'dark' ? operatorSettingDefaults.palette.success.dark :
+                                operatorSettingDefaults.palette.success.light,
+                        },
+                        secondary: {
+                            main: themeMode === 'dark' ? operatorSettingDefaults.palette.secondary.dark :
+                                operatorSettingDefaults.palette.secondary.light,
+                        },
+                        info: {
+                            main: themeMode === 'dark' ? operatorSettingDefaults.palette.info.dark :
+                                operatorSettingDefaults.palette.info.light,
+                        },
+                        warning: {
+                            main: themeMode === 'dark' ? operatorSettingDefaults.palette.warning.dark :
+                                operatorSettingDefaults.palette.warning.light,
+                        },
+                        mode: themeMode,
+                        background: {
+                            contrast: themeMode === 'dark' ?operatorSettingDefaults.palette.background.light :
+                                operatorSettingDefaults.palette.background.dark,
+                            default: themeMode === "dark" ? operatorSettingDefaults.palette.background.dark :
+                                operatorSettingDefaults.palette.background.light,
+                            paper: themeMode === "dark" ?  operatorSettingDefaults.palette.paper.dark :
+                                operatorSettingDefaults.palette.paper.light,
+                            image: themeMode === "dark" ?  operatorSettingDefaults.palette.backgroundImage.dark :
+                                operatorSettingDefaults.palette.backgroundImage.light,
+                        },
+                        text: {
+                            primary: themeMode === 'dark' ? operatorSettingDefaults.palette.text.dark :
+                                operatorSettingDefaults.palette.text.light,
+                            contrast: themeMode === 'dark' ? '#000' : '#fff',
+                        },
+                        graphGroupRGBA: themeMode === 'dark' ? 'rgba(57, 76, 93, 0.5)' : 'rgba(211, 215, 232, 0.5)',
+                        speedDialAction: themeMode === 'dark' ? '#495054' : '#ffffff',
+                    },
+                    folderColor: '#f1d592',
+                    tableHeader: themeMode === 'dark' ? operatorSettingDefaults.palette.tableHeader.dark :
+                        operatorSettingDefaults.palette.tableHeader.light,
+                    selectedCallbackColor: themeMode === 'dark' ? operatorSettingDefaults.palette.selectedCallbackColor.dark :
+                        operatorSettingDefaults.palette.selectedCallbackColor.light,
+                    selectedCallbackHierarchyColor:  themeMode === 'dark' ? operatorSettingDefaults.palette.selectedCallbackHierarchyColor.dark :
+                        operatorSettingDefaults.palette.selectedCallbackHierarchyColor.light,
+                    tableHover: themeMode === 'dark' ? operatorSettingDefaults.palette.tableHover.dark :
+                        operatorSettingDefaults.palette.tableHover.light,
+                    navBarTextIconColor: themeMode === 'dark' ? operatorSettingDefaults.palette.navBarIcons.dark :
+                        operatorSettingDefaults.palette.navBarIcons.light,
+                    navBarTextColor: themeMode === 'dark' ? operatorSettingDefaults.palette.navBarText.dark :
+                        operatorSettingDefaults.palette.navBarText.light,
+                    pageHeader: {
+                        main: themeMode === 'dark' ? operatorSettingDefaults.palette.pageHeader.dark :
+                            operatorSettingDefaults.palette.pageHeader.light,
+                    },
+                    pageHeaderText: {
+                        main: 'white',
+                    },
+                    topAppBarColor: themeMode === 'dark' ? operatorSettingDefaults.palette.navBarColor.dark :
+                        operatorSettingDefaults.palette.navBarColor.light,
+                    topAppBarBottomColor: themeMode === 'dark' ? operatorSettingDefaults.palette.navBarBottomColor.dark :
+                        operatorSettingDefaults.palette.navBarBottomColor.light,
+                    emptyFolderColor: themeMode === 'dark' ? operatorSettingDefaults.palette.emptyFolderColor.dark :
+                        operatorSettingDefaults.palette.emptyFolderColor.light,
+                    outputBackgroundColor: themeMode === 'dark' ? operatorSettingDefaults.palette.outputBackgroundColor.dark :
+                        operatorSettingDefaults.palette.outputBackgroundColor.light,
+                    outputTextColor: themeMode === 'dark' ? operatorSettingDefaults.palette.outputTextColor.dark :
+                        operatorSettingDefaults.palette.outputTextColor.light,
+                    borderColor: themeMode === 'dark' ? operatorSettingDefaults.palette.borderColor.dark :
+                        operatorSettingDefaults.palette.borderColor.light,
+                    typography: {
+                        fontSize: 12,//operatorSettingDefaults?.fontSize,
+                        fontFamily: operatorSettingDefaults?.fontFamily
+                    },
+                })
+            }
+        },[themeMode, loadingPreference, preferences.fontSize, preferences.fontFamily, preferences.palette]
+    );
+    const mountedRef = React.useRef(true);
+    const [openRefreshDialog, setOpenRefreshDialog] = React.useState(false);
+    const [getUserPreferences] = useLazyQuery(userSettingsQuery, {
+        fetchPolicy: "no-cache",
+        onCompleted: (data) => {
+            //console.log("got preferences", data.getOperatorPreferences.preferences)
+            if(data.getOperatorPreferences.status === "success"){
+                if(data.getOperatorPreferences.preferences !== null){
+                    mePreferences({...preferences, ...data.getOperatorPreferences.preferences});
+                }
+            } else {
+                snackActions.error(`Failed to get user preferences:\n${data.getOperatorPreferences.error}`);
+            }
+            setLoadingPreferences(false);
+        },
+        onError: (error) => {
+            console.log(error);
+            snackActions.error(error.message);
+            setLoadingPreferences(false);
+        }
+    })
+    useInterval( () => {
+        // interval should run every 10 minutes (600000 milliseconds) to check JWT status
+        let millisecondsLeft = JWTTimeLeft();
+        // if we have 30min left of our token, prompt the user to extend. 30 min is 1,800,000 milliseconds
+        //console.log("jwt time left: ", millisecondsLeft)
+        if(millisecondsLeft <= 1800000 && !openRefreshDialog && me.loggedIn){
+            if(isJWTValid()){
+                setOpenRefreshDialog(true);
+            }else{
+                FailedRefresh();
+            }
+        }
+    }, 600000, mountedRef, mountedRef);
+    React.useEffect( () => {
+        if(me.loggedIn){
+            setLoadingPreferences(true);
+            getUserPreferences();
+        } else {
+            setLoadingPreferences(false);
+        }
+    }, [me.loggedIn])
+    if(loadingPreference){
+        // make sure we've loaded preferences before loading actual app content
+        return (
+            <StyledEngineProvider injectFirst>
+                <ThemeProvider theme={theme}>
+                    <GlobalStyles theme={theme} />
+                    <CssBaseline />
+                </ThemeProvider>
+            </StyledEngineProvider>
+        )
+    }
+    const background = theme.palette.background.image !== null ? {
+        backgroundImage: "linear-gradient(" + theme.palette.background.default + "99" + "," + theme.palette.background.default + "99" + ")," + theme.palette.background.image ,
+        backgroundRepeat: "no-repeat",
+        backgroundSize: "100% 100%"
+    } : {
+        backgroundColor: theme.palette.background.default
+    };
+    return (
+        <StyledEngineProvider injectFirst>
+            <ThemeProvider theme={theme}>
+                <GlobalStyles theme={theme} />
+                <CssBaseline />
+                <MeContext.Provider value={me}>
+                    <Tooltip id={"my-tooltip"} style={{zIndex: 100000, wordBreak: "break-word", maxWidth: "80%", whiteSpace: "pre-wrap"}}/>
+                    <ToastContainer limit={2} autoClose={3000}
+                                    theme={themeMode}
+                                    hideProgressBar={true}
+                                    newestOnTop={true}
+                                    stacked={false}
+                                    style={{maxWidth: "100%", minWidth: "40%", display: "flex", flexWrap: "wrap",
+                                    wordBreak: "break-all", flexDirection: "column", justifyContent: "center",}}
+                                    pauseOnFocusLoss={false}
+                    />
+                    <div style={{ maxHeight: '100%', height: '100%', display: 'flex', flexDirection: 'row', maxWidth: "100%", width:"100%",
+                        ...background}}>
+                        {openRefreshDialog &&
+                            <MythicDialog fullWidth={true} maxWidth="sm" open={openRefreshDialog}
+                                          onClose={()=>{setOpenRefreshDialog(false);}}
+                                          innerDialog={<RefreshTokenDialog
+                                              onClose={()=>{setOpenRefreshDialog(false);}} />}
+                            />
+                        }
+                        {me.loggedIn && me.user !== undefined && me.user !== null &&
+                            <TopAppBarVertical me={me} toggleTheme={themeToggler} />
+                        }
+                        <div style={{
+                            maxHeight: '100%',
+                            flexGrow: 1,
+                            display: 'flex',
+                            flexDirection: 'column',
+                            overflow: "hidden",
+                        }}>
+                            <div style={{height: "5px", width: "100%",  background: me.loggedIn ? `linear-gradient(25deg, ${theme.topAppBarColor}, ${theme.topAppBarBottomColor})` : ""}}/>
+                            {me.loggedIn && me?.user?.current_operation_banner_text !== "" &&
+                                <Typography style={{
+                                    backgroundColor: me?.user?.current_operation_banner_color,
+                                    width: "100%",
+                                    textAlign: "center",
+                                    fontWeight: "600",
+                                    color: "white",
+                                    border: `1px solid ${theme.topAppBarColor || "grey"}`
+                                }}>
+                                    {me?.user?.current_operation_banner_text}
+                                </Typography>
+                            }
+                            {me.loggedIn && me?.badConnection
+                                &&
+                                <Typography style={{
+                                    backgroundColor: theme.palette.error.main,
+                                    width: "100%",
+                                    textAlign: "center",
+                                    fontWeight: "600",
+                                    color: "white",
+                                    border: `1px solid ${theme.topAppBarColor || "grey"}`
+                                }}>
+                                    {"Can't connect to Mythic. Please check connection and refresh"}
+                                </Typography>
+                            }
+                            <div style={{
+                                margin: '0px 0px 0px 0px',
+                                flexGrow: 1,
+                                display: "flex",
+                                flexDirection: 'column',
+                                overflow:"hidden"
+                            }}>
+                                <Routes>
+                                    <Route path='/new/login' element={<LoginForm me={me}/>}/>
+                                    <Route path='/new/invite' element={<InviteForm me={me}/>}/>
+                                    <Route path='/' element={<LoggedInRoute me={me}><Home me={me}/></LoggedInRoute>}/>
+                                    <Route exact path='/new'
+                                           element={<LoggedInRoute me={me}><Home me={me}/></LoggedInRoute>}/>
+                                    <Route exact path='/new/settings'
+                                           element={<LoggedInRoute me={me}><Settings me={me}/></LoggedInRoute>}/>
+                                    <Route exact path='/new/payloadtypes'
+                                           element={<LoggedInRoute me={me}><PayloadTypesC2Profiles
+                                               me={me}/></LoggedInRoute>}/>
+                                    <Route exact path='/new/eventfeed'
+                                           element={<LoggedInRoute me={me}><EventFeed me={me}/></LoggedInRoute>}/>
+                                    <Route exact path='/new/createpayload'
+                                           element={<LoggedInRoute me={me}><CreatePayload me={me}/></LoggedInRoute>}/>
+                                    <Route exact path='/new/createwrapper'
+                                           element={<LoggedInRoute me={me}><CreatePayloadWrapper
+                                               me={me}/></LoggedInRoute>}/>
+                                    <Route exact path='/new/payloads'
+                                           element={<LoggedInRoute me={me}><Payloads me={me}/></LoggedInRoute>}/>
+                                    <Route exact path='/new/c2profiles'
+                                           element={<LoggedInRoute me={me}><PayloadTypesC2Profiles
+                                               me={me}/></LoggedInRoute>}/>
+                                    <Route exact path='/new/services/'
+                                           element={<LoggedInRoute me={me}><PayloadTypesC2Profiles
+                                               me={me}/></LoggedInRoute>}/>
+                                    <Route exact path='/new/callbacks'
+                                           element={<LoggedInRoute me={me}><Callbacks me={me}/></LoggedInRoute>}/>
+                                    <Route path='/new/search'
+                                           element={<LoggedInRoute me={me}><Search history={props.history}
+                                                                                   me={me}/></LoggedInRoute>}/>
+                                    <Route exact path='/new/browserscripts'
+                                           element={<LoggedInRoute me={me}><BrowserScripts me={me}/></LoggedInRoute>}/>
+                                    <Route exact path='/new/task/:taskId'
+                                           element={<LoggedInRoute me={me}><SingleTaskView me={me}/></LoggedInRoute>}/>
+                                    <Route exact path='/new/tasks/by_range'
+                                           element={<LoggedInRoute me={me}><SingleTaskView me={me}/></LoggedInRoute>}/>
+                                    <Route exact path='/new/operations'
+                                           element={<LoggedInRoute me={me}><Operations me={me}/></LoggedInRoute>}/>
+                                    <Route exact path='/new/callbacks/:callbackDisplayId'
+                                           element={<LoggedInRoute me={me}><ExpandedCallback
+                                               me={me}/></LoggedInRoute>}/>
+                                    <Route exact path='/new/reporting'
+                                           element={<LoggedInRoute me={me}><Reporting me={me}/></LoggedInRoute>}/>
+                                    <Route exact path='/new/mitre'
+                                           element={<LoggedInRoute me={me}><MitreAttack me={me}/></LoggedInRoute>}/>
+                                    <Route exact path='/new/tagtypes'
+                                           element={<LoggedInRoute me={me}><Tags me={me}/></LoggedInRoute>}/>
+                                    <Route exact path='/new/eventing'
+                                           element={<LoggedInRoute me={me}><Eventing me={me}/></LoggedInRoute>}/>
+                                    <Route exact path='/new/jupyter' element={<LoggedInRoute me={me}><Jupyter/></LoggedInRoute>}/>
+                                    <Route exact path='/new/hasura' element={<LoggedInRoute me={me}><Hasura/></LoggedInRoute>}/>
+                                </Routes>
+                            </div>
+                        </div>
+                    </div>
+                </MeContext.Provider>
+            </ThemeProvider>
+        </StyledEngineProvider>
+    );
+}
@@ -0,0 +1,69 @@
+import React, {useEffect} from 'react';
+import {gql, useSubscription} from '@apollo/client';
+import {snackActions} from './utilities/Snackbar';
+import {getSkewedNow} from "./utilities/Time";
+
+//fromNow must be in ISO format for hasura/postgres stuff
+//new Date().toISOString() will do it
+
+const subscribe_payloads = gql`
+ subscription EventFeedNotificationSubscription($fromNow: timestamp!) {
+   operationeventlog_stream(cursor: {initial_value: {timestamp: $fromNow}, ordering: ASC}, batch_size: 1, where: {deleted: {_eq: false}}) {
+     operator {
+         username
+     }
+     id
+     message
+     level
+     resolved
+     source
+     warning
+   }
+ }
+  `;
+
+export function EventFeedNotifications(props) {
+    const [fromNow, setFromNow] = React.useState(getSkewedNow().toISOString());
+    //const fromNow = React.useRef(  );
+    useSubscription(subscribe_payloads, {
+        variables: {fromNow: fromNow },
+        fetchPolicy: "no-cache",
+        shouldResubscribe: true,
+        onError: (errorData) => {
+           console.log(errorData);
+        },
+        onData: ({data}) => {
+            if (data.data.operationeventlog_stream.length > 0){
+                if(data.data.operationeventlog_stream[0].level === "api" ||
+                    data.data.operationeventlog_stream[0].level === "debug" ||
+                    data.data.operationeventlog_stream[0].level === "agent"
+                ){
+                    return;
+                }
+                if(data.data.operationeventlog_stream[0].resolved){
+                    return;
+                }
+                if(data.data.operationeventlog_stream[0].operator){
+                    const message = data.data.operationeventlog_stream[0].operator.username + ":\n" + data.data.operationeventlog_stream[0].message;
+                    if (data.data.operationeventlog_stream[0].warning) {
+                        snackActions.warning(message, { autoClose: 2000});
+                    } else {
+                        snackActions.info(message, { autoClose: 2000});
+                    }
+
+                }else {
+                    if (data.data.operationeventlog_stream[0].warning) {
+                        snackActions.warning(data.data.operationeventlog_stream[0].message, {autoClose: 3000});
+                    } else {
+                        snackActions.info(
+                            <div style={{width: "100%"}}>{data.data.operationeventlog_stream[0].message}</div>,
+                            {autoClose: 3000});
+                    }
+
+                }
+                }
+        }
+    });
+    return null
+}
+
@@ -0,0 +1,53 @@
+import {useTheme} from '@mui/material/styles';
+import {MythicStyledTooltip} from "./MythicStyledTooltip";
+import WifiIcon from '@mui/icons-material/Wifi';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import { faLink } from '@fortawesome/free-solid-svg-icons';
+
+export const MythicAgentSVGIcon = ({payload_type, style, is_p2p}) => {
+    const theme = useTheme();
+    if(payload_type === ""){
+        return;
+    }
+    return (
+        <MythicStyledTooltip title={payload_type} >
+            <img src={"/static/" + payload_type + "_" + theme.palette.mode + ".svg"}
+                 style={{...style}}  />
+            {is_p2p === false &&
+                <WifiIcon style={{width: "20px", height: "20px", marginLeft: "-20px", marginBottom: "5px",
+                borderRadius: "10px", border: "1px solid",
+                backgroundColor: theme.palette.primary.main}}/>
+            }
+            {is_p2p === true &&
+                <FontAwesomeIcon icon={faLink} style={{width: "20px", height: "20px", marginLeft: "-20px", marginBottom: "5px",
+                    borderRadius: "10px", border: "1px solid",
+                    backgroundColor: theme.palette.primary.main}} />
+            }
+        </MythicStyledTooltip>
+
+    )
+}
+export const MythicAgentSVGIconNoTooltip = ({payload_type, is_p2p, className, style}) => {
+    const theme = useTheme();
+    if(payload_type === ""){
+        return;
+    }
+    const extraStyles = style ? style : {};
+    return (
+        <div style={{display: "inline-block", left: "50%"}} className={className}>
+            <img src={"/static/" + payload_type + "_" + theme.palette.mode + ".svg"} style={{height: "20px", margin: 'auto', ...extraStyles}}/>
+            {is_p2p === false &&
+                <WifiIcon style={{width: "10px", height: "10px", marginLeft: "-5px", marginBottom: "0px",
+                    borderRadius: "10px", border: "1px solid",
+                    backgroundColor: theme.palette.primary.main, color: "white" }} />
+            }
+            {is_p2p === true &&
+                <FontAwesomeIcon icon={faLink} style={{width: "10px", height: "10px", marginLeft: "-5px", marginBottom: "0px",
+                    borderRadius: "10px",  border: "1px solid",
+                    backgroundColor: theme.palette.primary.main, color: "white"}} />
+            }
+        </div>
+
+
+    )
+}
@@ -0,0 +1,40 @@
+import React from 'react';
+import Button from '@mui/material/Button';
+import DialogActions from '@mui/material/DialogActions';
+import DialogTitle from '@mui/material/DialogTitle';
+import {MythicDialog} from './MythicDialog';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogContent from '@mui/material/DialogContent';
+
+export function MythicConfirmDialog(props) {
+    const handleSubmit = () => {
+        props.onSubmit();
+        if(props.dontCloseOnSubmit){
+            return;
+        }
+        props.onClose();
+    }
+
+  return (
+    <MythicDialog fullWidth={false} maxWidth="sm" open={props.open} onClose={()=>{props.onClose()}} innerDialog={
+        <React.Fragment>
+            <DialogTitle >{props.title ? (props.title) : ("Are you sure?")}</DialogTitle>
+            {props.dialogText === undefined ? null : (
+              <DialogContent dividers={true} style={{maxHeight: "calc(70vh)"}}>
+                <DialogContentText>
+                  {props.dialogText}
+                </DialogContentText>
+              </DialogContent>
+            )}
+            <DialogActions>
+              <Button onClick={props.onClose} variant="contained" color="primary">
+                {props.cancelText ? (props.cancelText) : ("Cancel")}
+              </Button>
+              <Button onClick={handleSubmit} autoFocus variant="contained" color={props.acceptColor ? (props.acceptColor) : ("error")}>
+                {props.acceptText ? (props.acceptText) : ("Remove")}
+              </Button>
+            </DialogActions>
+        </React.Fragment>
+  } />
+  );
+}
@@ -0,0 +1,483 @@
+import React, {useEffect} from 'react';
+import Dialog from '@mui/material/Dialog';
+import Button from '@mui/material/Button';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Paper from '@mui/material/Paper';
+import { toLocalTime } from '../utilities/Time';
+import AceEditor from 'react-ace';
+import "ace-builds/src-noconflict/mode-json";
+import "ace-builds/src-noconflict/theme-github";
+import "ace-builds/src-noconflict/theme-monokai";
+import "ace-builds/src-noconflict/ext-searchbox";
+import {useTheme} from '@mui/material/styles';
+import WrapTextIcon from '@mui/icons-material/WrapText';
+import {IconButton} from '@mui/material';
+import {MythicStyledTooltip} from "./MythicStyledTooltip";
+import Draggable from 'react-draggable';
+import {MythicDraggableDialogTitle} from "./MythicDraggableDialogTitle";
+
+export function MythicDialog(props) {
+    const [draggedState, setDraggedState] = React.useState({
+        style: {},
+        paperStyle: {
+            margin: "0",
+            height: "fit-content",
+            width: "stretch"
+        },
+        containerStyle: {
+
+        },
+        hideBackdrop: false,
+        modified: false
+    });
+    const nodeRef = React.useRef(null);
+    const descriptionElementRef = React.useRef(null);
+    React.useEffect(() => {
+    if (props.open) {
+      const { current: descriptionElement } = descriptionElementRef;
+      if (descriptionElement !== null) {
+        descriptionElement.focus();
+      }
+    }
+  }, [props.open]);
+    const dialogOnClick = (e) => {
+        //e.preventDefault();
+        //e.stopPropagation();
+        if(e.target.classList.length > 0 && e.target.classList.contains("MuiDialog-container")){
+          props.onClose();
+        }
+    }
+    const dialogOnContextMenu = (e) => {
+        e.stopPropagation();
+    }
+    const handleOnClose = (event, reason) => {
+        if(reason === "backdropClick" && draggedState.hideBackdrop){
+            return;
+        }
+        props.onClose();
+    }
+    const onStart = (e) => {
+        if(e){
+            e.stopPropagation();
+            e.preventDefault();
+        }
+        if(!draggedState.modified){
+            setDraggedState({
+                style: {
+                    height: e.target.offsetParent.offsetHeight  + "px",
+                    width: e.target.offsetParent.offsetWidth + "px",
+                    margin: "auto",
+                    overflowY: "auto",
+                },
+                paperStyle: {
+                    //height: e.target.offsetParent.offsetHeight + "px",
+                    width: e.target.offsetParent.offsetWidth + "px",
+                    margin: 0,
+                    overflowY: "auto",
+                },
+                containerStyle: {
+                    height: "fit-content",
+                    overflowY: "auto"
+                },
+                hideBackdrop: true,
+                modified: true,
+            })
+        }
+    }
+    const onStop = (e) => {
+        if(e){
+            e.stopPropagation();
+            e.preventDefault();
+        }
+    }
+  return (
+      <Draggable
+          nodeRef={nodeRef}
+          handle="#mythic-draggable-title"
+          cancel={'[class*="MuiDialogContent-root"]'}
+          onStart={onStart}
+          onStop={onStop}
+      >
+          <Dialog
+            ref={nodeRef}
+            open={props.open}
+            onClick={dialogOnClick}
+            onClose={handleOnClose}
+            scroll="paper"
+            maxWidth={props.maxWidth}
+            fullWidth={true}
+            style={{...props.style, ...draggedState.style}}
+            disableEnforceFocus={true}
+            disablePortal={false}
+            hideBackdrop={draggedState.hideBackdrop}
+            aria-labelledby="scroll-dialog-title"
+            aria-describedby="scroll-dialog-description"
+            sx={{
+                [".MuiPaper-root"]: {
+                    ...draggedState.paperStyle
+                },
+                [".MuiDialog-container"]: {
+                    ...draggedState.containerStyle
+                }
+            }}
+            onMouseDown={dialogOnClick}
+            onContextMenu={dialogOnContextMenu}
+          >
+            {props.innerDialog}
+          </Dialog>
+      </Draggable>
+  );
+}
+
+export function MythicModifyStringDialog(props) {
+  const [comment, setComment] = React.useState("");
+  const [wrap, setWrap] = React.useState(props.wrap ? props.wrap : false);
+  const theme = useTheme();
+    const onCommitSubmit = () => {
+        props.onSubmit(comment);
+        if(props.dontCloseOnSubmit){
+            return;
+        }
+        props.onClose();
+    }
+    const onChange = (value) => {
+        setComment(value);
+    }
+    useEffect( () => {
+        try{
+            setComment(JSON.stringify(JSON.parse(props.value), null, 2));
+        }catch(error){
+            setComment(props.value);
+        }
+
+    }, [props.value]);
+  return (
+    <React.Fragment>
+        {props.title !== "" &&
+            <MythicDraggableDialogTitle>{props.title}
+                <MythicStyledTooltip title={wrap ? "Toggle off word wrap" : "Toggl on word wrap"}
+                tooltipStyle={{float: "right"}}>
+                    <IconButton onClick={() => {setWrap(!wrap)}}>
+                        <WrapTextIcon color={wrap ? "success" : "secondary"} />
+                    </IconButton>
+                </MythicStyledTooltip>
+            </MythicDraggableDialogTitle>
+        }
+        <DialogContent dividers={true} style={{ margin: 0, padding: 0}}>
+            <AceEditor
+                mode="json"
+                theme={theme.palette.mode === 'dark' ? 'monokai' : 'github'}
+                width="100%"
+                fontSize={14}
+                showPrintMargin={false}
+                wrapEnabled={wrap}
+                value={comment}
+                focus={true}
+                onChange={onChange}
+                setOptions={{
+                    tabSize: 4,
+                    useWorker: false,
+                    showInvisibles: false,
+                }}
+            />
+        </DialogContent>
+        { (props.onClose || props.onSubmit) &&
+            <DialogActions>
+                {props.onClose &&
+                    <Button onClick={props.onClose} variant="contained" color="primary">
+                        Close
+                    </Button>
+                }
+                {props.onSubmit &&
+                    <Button onClick={onCommitSubmit} variant="contained" color="success">
+                        {props.onSubmitText ? props.onSubmitText : "Submit"}
+                    </Button>
+                }
+            </DialogActions>
+        }
+    </React.Fragment>
+  );
+}
+
+export function MythicViewJSONAsTableDialog(props) {
+  const [comment, setComment] = React.useState([]);
+  const [tableType, setTableType] = React.useState("dictionary");
+  const [headers, setHeaders] = React.useState([]);
+    useEffect( () => {
+      let permissions = [];
+      try{
+        let permissionDict;
+        if(props.value.constructor === Object){
+          permissionDict = props.value;
+        }else{
+          permissionDict = JSON.parse(props.value);
+        } 
+        
+        if(!Array.isArray(permissionDict) && typeof permissionDict !== 'string'){
+          for(let key in permissionDict){
+            if(permissionDict[key] && permissionDict[key].constructor === Object){
+              // potentially have a nested dictionary here or array to become a dictionary, mark it
+              permissions.push({"name": key, "value": permissionDict[key], new_table: true, is_dictionary: true, headers: ["Name", "Value"]});
+            } else if(permissionDict[key] && Array.isArray(permissionDict[key])) {
+              if (permissionDict[key].length === 1){
+                if(permissionDict[key][0].constructor === Object){
+                  permissions.push({"name": key, "value": permissionDict[key][0], new_table: true, is_dictionary: true, headers: ["Name", "Value"]});
+                  
+                }else{
+                  permissions.push({"name": key, "value": JSON.stringify(permissionDict[key], null, 2)});
+                }
+                
+              } else if (permissionDict[key].length > 1) {
+                if (permissionDict[key][0].constructor === Object) {
+                  let newHeaders = [];
+                  for(let i = 0; i < permissionDict[key].length; i++){
+                    for(let newKey in permissionDict[key][i]){
+                      if(!newHeaders.includes(newKey)){newHeaders.push(newKey)}
+                    }
+                  }
+                  newHeaders.sort()
+                  permissions.push({"name": key, "value": permissionDict[key], new_table: true, is_array: true, headers: newHeaders});
+                } else {
+                  // it's an array, but not of dictionaries, so just stringify it
+                  permissions.push({"name": key, "value": JSON.stringify(permissionDict[key], null, 2)});
+                }
+              } else {
+                permissions.push({"name": key, "value": JSON.stringify(permissionDict[key], null, 2)});
+              }
+            }else if(permissionDict[key] !== undefined && permissionDict[key] !== null){
+              permissions.push({"name": key, "value": permissionDict[key]});
+            }
+            
+            setHeaders([props.leftColumn, props.rightColumn]);
+          }
+        }else{
+          setTableType("array");
+          if(permissionDict.length > 0){
+            setHeaders(Object.keys(permissionDict[0]));
+            permissions = permissionDict;
+          }else{
+            setHeaders([]);
+          }
+        }
+      }catch(error){
+        console.log(error);
+      }
+      setComment(permissions);
+    }, [props.value, props.leftColumn, props.rightColumn]);
+  return (
+    <React.Fragment>
+        <MythicDraggableDialogTitle style={{wordBreak: "break-all", maxWidth: "100%"}}>{props.title}</MythicDraggableDialogTitle>
+
+          <TableContainer  className="mythicElement" style={{paddingLeft: "10px"}}>
+            <Table size="small" style={{"tableLayout": "fixed", "maxWidth": "calc(100vw)", "overflow": "scroll"}}>
+                  <TableHead>
+                      <TableRow>
+                          {headers.map( (header, index) => (
+                            <TableCell key={'header' + index} style={index === 0 ? {width: "15%", wordBreak: "break-all"} : {wordBreak: "break-all"}}>{header}</TableCell>
+                          ))}
+                      </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {tableType === "dictionary" ? (
+                      comment.map( (element, index) => (
+                        <TableRow key={'row' + index} hover>
+                          <TableCell style={{wordBreak: "break-all"}}>{element.name}</TableCell>
+                          {element.new_table ? 
+                            (
+                              <TableContainer  className="mythicElement">
+                                <Table size="small" style={{"tableLayout": "fixed", "maxWidth": "calc(100vw)", "overflow": "scroll"}}>
+                                      <TableHead>
+                                          <TableRow>
+                                              {element.headers.map( (header, index) => (
+                                                <TableCell key={'eheader' + header + index} style={index === 0 ? {width: "15%", wordBreak: "break-all"} : {wordBreak: "break-all"}}>{header}</TableCell>
+                                              ))}
+                                          </TableRow>
+                                      </TableHead>
+                                      <TableBody>
+                                        {element.is_dictionary ? (
+                                          Object.keys(element.value).map( (key, dictIndex) => (
+                                            <TableRow key={'element' + dictIndex + "dictheader"}>
+                                              <TableCell  style={{width: "30%", wordBreak: "break-all"}}>{key}</TableCell>
+                                              <TableCell style={{wordBreak: "break-all", whiteSpace: "pre-wrap"}}>{convertValueToContextValue(key, element.value[key], props.me)}</TableCell>
+                                            </TableRow>
+                                          ))
+                                        ): (
+                                          element.value.map( (e, elementIndex) => (
+                                            <TableRow>
+                                              {element.headers.map( (header, headerIndex) => (
+                                                <TableCell key={'element' + elementIndex + "header" + headerIndex} style={headerIndex === 0 ? {width: "15%", wordBreak: "break-all"} : {wordBreak: "break-all",  whiteSpace: "pre-wrap"}}>{convertValueToContextValue(header, e[header], props.me)}</TableCell>
+                                              ))}
+                                            </TableRow>
+                                          ))
+                                        )}
+                                      </TableBody>
+                                  </Table>
+                                </TableContainer>
+                            ) 
+                            : 
+                            (<TableCell style={{wordBreak: "break-all", whiteSpace: "pre-wrap"}}>{convertValueToContextValue(element.name, element.value, props.me) }</TableCell>)
+                          }
+                          
+                        </TableRow>
+                      ))
+                    ) : (
+                      comment.map( (row, index) => (
+                        <TableRow key={'row' + index} hover>
+                            {Object.keys(row).map( (key) => (
+                              <TableCell key={"row" + index + "cell" + key} style={{wordBreak: "break-all"}}>{convertValueToContextValue(key, row[key], props.me)}</TableCell>
+                            ))}
+                        </TableRow>
+                      ))
+                    ) }
+                    
+                  </TableBody>
+              </Table>
+            </TableContainer>
+        <DialogActions>
+          <Button onClick={props.onClose} variant="contained" color="primary">
+            Close
+          </Button>
+        </DialogActions>
+    </React.Fragment>
+  );
+}
+
+export function MythicViewObjectPropertiesAsTableDialog(props) {
+  const [comment, setComment] = React.useState([]);
+    useEffect( () => {
+        const permissions = props.keys.reduce( (prev, key) => {
+          if(props.value[key] !== undefined && props.value[key] !== null && props.value[key] !== ""){
+            return [...prev, {"name": key, "value": props.value[key]}]
+          }
+          else{
+            return [...prev];
+          }
+        }, []);
+
+      setComment(permissions);
+    }, [props.value, props.keys]);
+  return (
+    <React.Fragment>
+        <DialogTitle id="form-dialog-title">{props.title}</DialogTitle>
+        <DialogContent dividers={true}>
+        <Paper elevation={5} style={{position: "relative"}} variant={"elevation"}>
+          <TableContainer component={Paper} className="mythicElement">
+            <Table size="small" style={{"tableLayout": "fixed", "maxWidth": "calc(100vw)", "overflow": "scroll"}}>
+                  <TableHead>
+                      <TableRow>
+                          <TableCell>{props.leftColumn}</TableCell>
+                          <TableCell>{props.rightColumn}</TableCell>
+                      </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {comment.map( (element, index) => (
+                      <TableRow key={'row' + index}>
+                        <TableCell style={{wordBreak: "break-all"}}>{element.name}</TableCell>
+                        <TableCell style={{wordBreak: "break-all"}}>{convertValueToContextValue(element.name, element.value)}</TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+              </Table>
+            </TableContainer>
+        </Paper>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={props.onClose} variant="contained" color="primary">
+            Close
+          </Button>
+        </DialogActions>
+    </React.Fragment>
+  );
+}
+const convertValueToContextValue = (key, value, me) => {
+  if( key.includes("time") ){
+    try{
+        return TableRowDateCell({cellData: value, view_utc_time: me?.user?.view_utc_time})
+    }catch(error){
+        console.log("failed to parse metadata as date", key, value);
+        return value;
+    }
+  } else if( key.includes("size") ){
+      try{
+          return TableRowSizeCell({cellData: value})
+      }catch(error){
+          console.log("failed to parse metadata as size", key, value);
+          return value;
+      }
+  } else if (value.constructor === Object) {
+    return JSON.stringify(value, null, 2);
+  } else if (Array.isArray(value)){
+    return JSON.stringify(value, null, 2);
+  } else if (value === true) {
+    return "True";
+  } else if (value === false) {
+    return "False";
+  } else {
+      return value;
+  }
+}
+export const TableRowDateCell = ({ cellData, rowData, view_utc_time=true }) => {
+
+    try{
+        let cellDataInt = parseInt(cellData)
+        if(cellData === "" || cellData === undefined || cellDataInt <= 0){
+            return "";
+        }
+        let view_utc = true;
+        if(view_utc_time !== undefined){
+            view_utc = view_utc_time
+        }
+        // handle Unix epoch timestamps
+        if (view_utc) {
+            let init_date = new Date(cellDataInt);
+            return init_date.toDateString() + " " + init_date.toTimeString().substring(0, 8) + " UTC";
+        } else {
+            let timezoneDate = new Date(cellDataInt);
+            timezoneDate.setTime(timezoneDate.getTime() - (timezoneDate.getTimezoneOffset() *60*1000));
+            return timezoneDate.toLocaleDateString() + " " + timezoneDate.toLocaleString([], {hour12: true, hour: "2-digit", minute: "2-digit"});
+        }
+        //const dateData = new Date(cellDataInt).toISOString();
+        //return toLocalTime(dateData.slice(0, 10) + " " + dateData.slice(11,-1), view_utc_time);
+    }catch(error){
+        try{
+            let cellDataInt = parseInt(cellData)
+            // handle windows FILETIME values
+            const dateData = new Date( ((cellDataInt / 10000000) - 11644473600) * 1000).toISOString();
+            return toLocalTime(dateData.slice(0, 10) + " " + dateData.slice(11,-1), view_utc_time);
+        }catch(error2){
+            console.log("error with timestamp: ", cellData);
+            return String(cellData);
+        }
+
+    }
+  
+};
+export const TableRowSizeCell = ({ cellData, rowData }) => {
+  const getStringSize = () => {
+      try {
+          // process for getting human readable string from bytes: https://stackoverflow.com/a/18650828
+          let bytes = parseInt(cellData);
+          if (cellData === '' || cellData === undefined) return '';
+          if (bytes === 0) return '0 B';
+          const decimals = 2;
+          const k = 1024;
+          const dm = decimals < 0 ? 0 : decimals;
+          const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+          const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+          return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+      } catch (error) {
+          return cellData;
+      }
+  };
+  return getStringSize(cellData);
+};
@@ -0,0 +1,16 @@
+import React from 'react';
+import {MythicDialog, MythicModifyStringDialog} from './MythicDialog';
+
+export function MythicDisplayTextDialog(props) {
+  return (
+    <MythicDialog fullWidth={props.fullWidth === null ? false : props.fullWidth}
+                  maxWidth={props.maxWidth === null ? "sm" : props.maxWidth}
+                  open={props.open}
+                  onClose={()=>{props.onClose()}} innerDialog={
+            <MythicModifyStringDialog title={props.title}
+                                      onClose={props.onClose}
+                                      value={props.value}
+                                      maxRows={20} />
+  } />
+  );
+}
@@ -0,0 +1,10 @@
+import DialogTitle from '@mui/material/DialogTitle';
+
+
+export const MythicDraggableDialogTitle = ({children}) => {
+    return (
+        <DialogTitle id="mythic-draggable-title" style={{ cursor: 'move', width: "100%" }}>
+            {children}
+        </DialogTitle>
+    )
+}
@@ -0,0 +1,11 @@
+
+export const reorder = (
+    list,
+    startIndex,
+    endIndex
+) => {
+    const result = Array.from(list);
+    const [removed] = result.splice(startIndex, 1);
+    result.splice(endIndex, 0, removed);
+    return result;
+};
@@ -0,0 +1,137 @@
+import React from 'react';
+import Button from '@mui/material/Button';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import TableCell from '@mui/material/TableCell';
+import TableRow from '@mui/material/TableRow';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableContainer from '@mui/material/TableContainer';
+import Paper from '@mui/material/Paper';
+import { Divider, Input, MenuItem, Select } from '@mui/material';
+import MythicTextField from './MythicTextField';
+import {gql } from '@apollo/client';
+import {snackActions} from '../utilities/Snackbar';
+import {useMutation } from '@apollo/client';
+
+const submitFeedbackMutation = gql`
+  mutation submitFeedback($webhookType: String!, $webhookData: jsonb!){
+    sendExternalWebhook(webhook_type: $webhookType, webhook_data: $webhookData){
+      status
+      error
+    }
+  }
+`;
+export function MythicFeedbackDialog(props) {
+  const [message, setMessage] = React.useState("");
+  const [taskID, setTaskID] = React.useState(0);
+  const messageTypeOptions = [
+    {display: "Bug", value: "bug"}, 
+    {display: "Feature Request", value: "feature_request"}, 
+    {display: "Confusing UI", value: "confusing_ui"},
+    {display: "Detection", value: "detection"},
+  ];
+  const [messageType, setMessageType] = React.useState("bug");
+  const [submitFeedback] = useMutation(submitFeedbackMutation, {
+    update: (cache, {data}) => {
+      if(data.sendExternalWebhook.status === "success"){
+        snackActions.success("Submitted Feedback!");
+      } else {
+        snackActions.warning(data.sendExternalWebhook.error);
+      }
+      props.onClose();
+    },
+    onError: error => {
+      console.log(error)
+      snackActions.warning(error.message);
+    }
+  });
+  const handleSubmit = () => {
+      let webhookData = {};
+      if(taskID > 0){
+        webhookData["task_id"] = String(taskID);
+      }
+      webhookData["message"] =  message;
+      webhookData["feedback_type"] = messageType;
+      submitFeedback({variables: {webhookType: "new_feedback", webhookData: webhookData}});
+  }
+  const handleMessageTypeChange = (evt) => {
+    setMessageType(evt.target.value);
+  }
+  const handleTaskIDChange = (name, value, error) => {
+    setTaskID(value);
+  }
+  const handleMessageChange = (name, value, error) => {
+    setMessage(value);
+  }
+  const handleOnEnter = (event) => {
+    if( event.shiftKey){
+      handleSubmit();
+    }
+  }
+  
+return (
+  <React.Fragment>
+      <DialogTitle >{props.title}</DialogTitle>
+      <Divider></Divider>
+      <DialogContent style={{padding: "10px"}}>
+        Send a feedback report to the slack webhook configured for the current operation.
+        This provides a way to easily capture a bug, feedback requests, or comments without breaking operator flow too much. <br/>
+        Shift+Enter will auto-submit the form.
+        <TableContainer  className="mythicElement">
+            <Table size="small" style={{ "maxWidth": "100%", "overflow": "scroll"}}>
+                <TableBody style={{whiteSpace: "pre"}}> 
+                    <TableRow hover >
+                        <TableCell style={{width: "5rem"}}>
+                          Feedback Type
+                        </TableCell>
+                        <TableCell>
+                            <Select
+                              labelId="demo-dialog-select-label"
+                              id="demo-dialog-select"
+                              value={messageType}
+                              onChange={handleMessageTypeChange}
+                              input={<Input style={{width: "100%"}}/>}
+                            >
+                              {messageTypeOptions.map( (opt) => (
+                                  <MenuItem value={opt.value} key={opt.value}>{opt.display}</MenuItem>
+                              ) )}
+                            </Select>
+                        </TableCell>
+                    </TableRow>
+                    <TableRow hover >
+                      <TableCell style={{width: "5rem"}}>
+                        Task (if applicable)
+                      </TableCell>
+                      <TableCell>
+                        <MythicTextField value={taskID} type={"number"}
+                          onChange={handleTaskIDChange} display="inline-block" name={"taskid"} showLabel={false}
+                        />
+                      </TableCell>
+                    </TableRow>
+                    <TableRow hover>
+                      <TableCell>
+                        Feedback
+                      </TableCell>
+                      <TableCell>
+                      <MythicTextField value={message} multiline={true} onEnter={handleOnEnter}
+                          onChange={handleMessageChange} display="inline-block" name={"taskid"} showLabel={false}
+                        />
+                      </TableCell>
+                    </TableRow>
+                </TableBody>
+            </Table>
+        </TableContainer>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={props.onClose} variant="contained" color="primary">
+          Close
+        </Button>
+        <Button onClick={handleSubmit} variant="contained" color="success">
+          Submit Feedback
+        </Button>
+      </DialogActions>
+</React.Fragment>
+  );
+}
@@ -0,0 +1,467 @@
+import { alpha } from "@mui/material";
+import { styled } from '@mui/material/styles';
+import React, { useCallback, useMemo } from "react";
+import AutoSizer from "react-virtualized-auto-sizer";
+import { FixedSizeList as List } from "react-window";
+import {faFolderOpen, faFolder} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import ComputerIcon from '@mui/icons-material/Computer';
+import DescriptionIcon from '@mui/icons-material/Description';
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
+import ErrorIcon from '@mui/icons-material/Error';
+import { useTheme } from '@mui/material/styles';
+import { Typography } from '@mui/material';
+import { MythicStyledTooltip } from "./MythicStyledTooltip";
+import WidgetsIcon from '@mui/icons-material/Widgets';
+import { areEqual } from 'react-window';
+
+const PREFIX = 'FileBrowserVirtualTree';
+
+const classes = {
+  rowContainer: `${PREFIX}-rowContainer`,
+  row: `${PREFIX}-row`,
+  rowButtonWrapper: `${PREFIX}-rowButtonWrapper`,
+  rowButton: `${PREFIX}-rowButton`,
+  rowLabel: `${PREFIX}-rowLabel`,
+  heading: `${PREFIX}-heading`,
+  secondaryHeading: `${PREFIX}-secondaryHeading`,
+  taskAndTimeDisplay: `${PREFIX}-taskAndTimeDisplay`,
+  secondaryHeadingExpanded: `${PREFIX}-secondaryHeadingExpanded`,
+  icon: `${PREFIX}-icon`,
+  details: `${PREFIX}-details`,
+  column: `${PREFIX}-column`,
+  paper: `${PREFIX}-paper`,
+  table: `${PREFIX}-table`,
+  visuallyHidden: `${PREFIX}-visuallyHidden`
+};
+
+const StyledAutoSizer = styled(AutoSizer)((
+  {
+    theme
+  }
+) => ({
+  [`& .${classes.rowContainer}`]: {},
+
+  [`& .${classes.row}`]: {
+    display: "flex",
+    alignItems: "left",
+    marginLeft: (props) => theme.spacing(3 * props.depth),
+    userSelect: "none",
+    whiteSpace: "nowrap"
+  },
+
+  [`& .${classes.rowButtonWrapper}`]: {
+    width: theme.spacing(3),
+    textAlign: "center",
+    "&:hover": {
+      cursor: "pointer",
+      textDecoration: "underline"
+    }
+  },
+
+  [`& .${classes.rowButton}`]: {
+    width: theme.spacing(3)
+  },
+
+  [`& .${classes.rowLabel}`]: {
+    marginLeft: theme.spacing(0.5)
+  },
+
+  [`& .${classes.heading}`]: {
+    fontSize: theme.typography.pxToRem(15),
+    whiteSpace: 'pre-line',
+},
+
+  [`& .${classes.secondaryHeading}`]: {
+      fontSize: theme.typography.pxToRem(15),
+      //color: theme.palette.text.secondary,
+      overflow: 'hidden',
+      display: 'block',
+      textOverflow: 'ellipsis',
+      maxWidth: 'calc(90vw)',
+      whiteSpace: 'nowrap',
+  },
+
+  [`& .${classes.taskAndTimeDisplay}`]: {
+      fontSize: theme.typography.pxToRem(12),
+      color: theme.palette.text.secondary,
+      overflow: 'hidden',
+      display: 'block',
+      textOverflow: 'ellipsis',
+      maxWidth: 'calc(90vw)',
+      whiteSpace: 'nowrap',
+  },
+
+  [`& .${classes.secondaryHeadingExpanded}`]: {
+      fontSize: theme.typography.pxToRem(15),
+      //color: theme.palette.text.secondary,
+      display: 'block',
+      overflow: 'auto',
+      maxWidth: 'calc(90vw)',
+      whiteSpace: 'break-word',
+  },
+
+  [`& .${classes.icon}`]: {
+      verticalAlign: 'middle',
+      height: 20,
+      width: 20,
+  },
+
+  [`& .${classes.details}`]: {
+      alignItems: 'center',
+  },
+
+  [`& .${classes.column}`]: {
+      padding: '0 5px 0 0',
+      display: 'inline-block',
+      margin: 0,
+      height: 'auto',
+  },
+
+  [`& .${classes.paper}`]: {
+      width: '100%',
+      marginBottom: theme.spacing(2),
+  },
+
+  [`& .${classes.table}`]: {
+      minWidth: 750,
+  },
+
+  [`& .${classes.visuallyHidden}`]: {
+      border: 0,
+      clip: 'rect(0 0 0 0)',
+      height: 1,
+      margin: -1,
+      overflow: 'hidden',
+      padding: 0,
+      position: 'absolute',
+      top: 20,
+      width: 1,
+  }
+}));
+function itemKey(index, data) {
+    // Find the item at the specified index.
+    // In this case "data" is an Array that was passed to List as "itemData".
+    const item = data[index];
+    if(item.root){
+        return `${item.group};${item.id}`;
+    }
+    if(item.is_group){
+        return item.group;
+    }
+    return `${item.group};${item.host};${item.full_path_text}`;
+}
+const VirtualTreeRow = React.memo(({
+  onSelectNode,
+  onExpandNode,
+  onCollapseNode,
+  onDoubleClickNode,
+  onContextMenu,
+  tabInfo,
+  selectedFolderData,
+  ...ListProps
+}) => {
+  const itemTreeData = ListProps.data[ListProps.index];
+  const item = ListProps.treeRootData[itemTreeData.group]?.[itemTreeData.host]?.[itemTreeData.full_path_text] || itemTreeData;
+  //console.log("item", item, "itemlookup", ListProps.treeRootData[itemTreeData.host]?.[itemTreeData.name])
+  const theme = useTheme();
+  const handleOnClickButton = (e) => {
+    e.stopPropagation();
+    if (itemTreeData.isOpen) {
+      onCollapseNode(item.id, {...item, group: itemTreeData.group, host: itemTreeData.host});
+    } else {
+      //snackActions.info('fetching elements...', { autoClose: false });
+      onExpandNode(item.id,  {...item, group: itemTreeData.group, host: itemTreeData.host});
+    }
+  };
+  const handleOnClickRow = (e) => {
+      onSelectNode(item.id,  {...item, group: itemTreeData.group, host: itemTreeData.host});
+  };
+  const handleContextClick = (e) => {
+      onContextMenu({event: e, item, itemTreeData});
+  }
+  const selectedPath = () => {
+      if(itemTreeData.group === selectedFolderData.group && itemTreeData.host === selectedFolderData.host){
+          if(itemTreeData.root){
+              return "selectedCallbackHierarchy";
+          }
+          if(selectedFolderData.full_path_text === itemTreeData.full_path_text){
+              return "selectedCallback";
+          }
+      }
+      return "";
+    }
+  return (
+    <div className={`hoverme ${selectedPath()}`}
+         style={ListProps.style}
+         onContextMenu={handleContextClick}
+         onClick={handleOnClickRow}>
+    <div style={{display: 'flex' , marginBottom: "1px", flexGrow: 1, width: "100%"}}>
+        {[...Array(itemTreeData.depth)].map((o, i) => (
+            <div
+                key={'folder' + itemTreeData.id + 'lines' + i}
+                style={{
+                    borderLeft: `2px dashed ${alpha(theme.palette.text.primary, 0.4)}`,
+                    marginLeft: 7,
+                    paddingRight: 7,
+                    display: 'inline-block',
+                }}></div>
+        ))}
+        <div
+          className={classes.root}
+          style={{ backgroundColor: theme.body, color: theme.text, alignItems: 'center', display: 'flex', paddingRight: "10px", textDecoration: itemTreeData.deleted ? 'line-through' : ''  }}
+
+          >
+
+          {itemTreeData.is_group ? (
+              <WidgetsIcon style={{
+                  width: "15px",
+                  height: "15px",
+                  marginLeft: "3px",
+                  marginRight: "5px" }} />
+          ): itemTreeData.root  ? (
+              <ComputerIcon style={{
+                  width: "15px",
+                  height: "15px",
+                  marginLeft: '3px',
+                  marginRight: '5px' }}  />
+          ) : !itemTreeData.can_have_children ? (
+              <DescriptionIcon style={{
+                  width: "15px",
+                  height: "15px",
+                  marginLeft: '3px',
+                  marginRight: '5px' }} />
+          ) : itemTreeData.isOpen ? (
+            <FontAwesomeIcon 
+              icon={faFolderOpen} 
+              style={{
+                  width: "15px",
+                  height: "15px",
+                marginLeft: '3px',
+                marginRight: '5px',
+                color: item?.has_children || item.success ? theme.folderColor : theme.emptyFolderColor,
+              }}
+              size={"lg"}
+              onClick={handleOnClickButton} />
+          ) : (
+              <FontAwesomeIcon 
+                style={{
+                    width: "15px",
+                    height: "15px",
+                    marginLeft: '3px',
+                    marginRight: '5px',
+                    color: item?.has_children || item.success ? theme.folderColor : theme.emptyFolderColor, }}
+                size={"lg"}
+                icon={faFolder} onClick={handleOnClickButton} />
+          )}
+          <Typography
+              style={{
+                  color:
+                      item?.has_children ||
+                      item.success !== null
+                          ? theme.palette.text.primary
+                          : theme.palette.text.secondary,
+              }} component="pre">
+              {itemTreeData.name}
+          </Typography>
+
+          {item.success === true && itemTreeData.depth > 0 ? (
+              <MythicStyledTooltip title='Successfully listed contents of folder' style={{display: "inline-flex", marginLeft: "5px"}}>
+                  <CheckCircleOutlineIcon fontSize='small' color="success" />
+              </MythicStyledTooltip>
+          ) : item.success === false && itemTreeData.depth > 0 ? (
+              <MythicStyledTooltip title='Failed to list contents of folder' style={{display: "inline-flex", marginLeft: "5px"}}>
+                  <ErrorIcon fontSize='small' color="error" />
+              </MythicStyledTooltip>
+          ) : null}
+
+      </div>
+    </div>
+    </div>
+  );
+}, areEqual);
+const caseInsensitiveCompare = (a, b) => {
+    try{
+        return a.localeCompare(b);
+    }catch(error){
+        console.log("localeCompare failed for", a, b);
+        return a < b;
+    }
+}
+const FileBrowserVirtualTreePreMemo = ({
+  treeRootData,
+  treeAdjMatrix,
+  openNodes,
+  onSelectNode,
+  onExpandNode,
+  onCollapseNode,
+  onContextMenu,
+  showDeletedFiles,
+  selectedFolderData,
+  tabInfo,
+}) => {
+    const gridRef = React.useRef(null);
+  const flattenNode = useCallback(
+    // node is just a full_path_text
+    (node, group, host, depth = 0) => {
+        //console.log(node, group, host, depth);
+      if(depth === 0){
+        return [
+          {
+            id: treeRootData[group]?.[host]?.[node].id,
+            name: treeRootData[group]?.[host]?.[node].name_text,
+            full_path_text: treeRootData[group]?.[host]?.[node].full_path_text,
+            deleted: treeRootData[group]?.[host]?.[node].deleted,
+            depth,
+            isLeaf: Object.keys(treeAdjMatrix[group]?.[host]?.[node] || {}).length === 0,
+            can_have_children: treeRootData[group]?.[host]?.[node].can_have_children,
+            isOpen: true,
+            children: (treeAdjMatrix[group][host]?.[node] || {}),
+            host,
+            group,
+            root: true
+          },
+          ...(Object.keys(treeAdjMatrix[group]?.[host]?.[node] || {})).sort(caseInsensitiveCompare).reduce( (prev, cur) => {
+            if(!treeRootData[group][host][cur].can_have_children){return [...prev]}
+            return [...prev, flattenNode(cur, group, host, depth+1)];
+        }, []).flat()
+        ];
+      }
+      if (openNodes[`${group};${host};${treeRootData[group][host][node].full_path_text}`] === true) {
+        return [
+          {
+            id: treeRootData[group][host][node].id,
+            name: treeRootData[group][host][node].name_text,
+            full_path_text: treeRootData[group][host][node].full_path_text,
+            deleted: treeRootData[group][host][node].deleted,
+            depth,
+            isLeaf: Object.keys(treeAdjMatrix[group]?.[host]?.[node] || {}).length === 0,
+            can_have_children: treeRootData[group][host][node].can_have_children,
+            isOpen: true,
+            children: (treeAdjMatrix[group]?.[host]?.[node] || {}),
+            host,
+            group,
+            root: false,
+          },
+          ...(Object.keys(treeAdjMatrix[group]?.[host]?.[node] || {})).sort(caseInsensitiveCompare).reduce( (prev, cur) => {
+            if(!treeRootData[group][host][cur].can_have_children){return [...prev]}
+            if(!showDeletedFiles && treeRootData[group][host][cur].deleted){return [...prev]}
+            return [...prev, flattenNode(cur, group, host, depth+1)];
+        }, []).flat()
+        ];
+      }
+      return [
+        {
+          id: treeRootData[group]?.[host]?.[node].id,
+          name: treeRootData[group]?.[host]?.[node].name_text,
+          full_path_text: treeRootData[group]?.[host]?.[node].full_path_text,
+          deleted: treeRootData[group]?.[host]?.[node].deleted,
+          depth,
+          isLeaf: Object.keys(treeAdjMatrix[group]?.[host]?.[node] || {}).length === 0,
+          can_have_children: treeRootData[group]?.[host]?.[node].can_have_children,
+          isOpen: false,
+          children: (treeAdjMatrix[group]?.[host]?.[node] || {}),
+          host,
+          group,
+          root: false,
+        }
+      ];
+     
+    },
+    [openNodes, showDeletedFiles, treeAdjMatrix] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+  const flattenedNodes = useMemo(() => {
+    //console.log("in tree", treeRootData, treeAdjMatrix)
+    // need to return an array
+    let finalData = [];
+    //console.log(treeAdjMatrix);
+      const groupKeys = Object.keys(treeAdjMatrix).sort(caseInsensitiveCompare);
+      for(let i = 0; i < groupKeys.length; i++){
+        finalData.push({
+            id: groupKeys[i],
+            name: groupKeys[i],
+            depth: 0,
+            isLeaf: false,
+            isOpen: true,
+            can_have_children: true,
+            root: false,
+            group: groupKeys[i],
+            is_group: true,
+            deleted: false,
+            success: true,
+            children: treeAdjMatrix[groupKeys[i]],
+            full_path_text: groupKeys[i],
+        });
+        const hostKeys = Object.keys(treeAdjMatrix[groupKeys[i]]).sort(caseInsensitiveCompare);
+        for(let j = 0; j < hostKeys.length; j++){
+        //for(const [host, matrix] of Object.entries(hosts)){
+            finalData.push({
+                id: hostKeys[j],
+                name: hostKeys[j],
+                depth: 1,
+                isLeaf: false,
+                isOpen: true,
+                can_have_children: true,
+                host: hostKeys[j],
+                group: groupKeys[i],
+                root: true,
+                deleted: false,
+                children: treeAdjMatrix[groupKeys[i]][hostKeys[j]][""],
+                full_path_text: hostKeys[j],
+            });
+            //console.log(matrix);
+            finalData.push(...Object.keys(treeAdjMatrix[groupKeys[i]][hostKeys[j]][""]).sort(caseInsensitiveCompare).reduce((prev, c) => {
+                if(!showDeletedFiles && c.deleted) {
+                    return [...prev];
+                } else {
+                    return [...prev, ...flattenNode(c, groupKeys[i], hostKeys[j], 2)]
+                }
+            }, []).flat())
+        }
+    }
+    return finalData;
+    //nodes.map((node) => flattenNode(node)).flat()
+  },[flattenNode, treeRootData, treeAdjMatrix, showDeletedFiles]);
+  React.useEffect( () => {
+      let rowIndex = flattenedNodes?.findIndex(e =>
+          e.full_path_text === selectedFolderData.full_path_text &&
+          e.host === selectedFolderData.host &&
+          e.group === selectedFolderData.group
+      );
+      if(rowIndex >= 0){
+          if(gridRef.current){
+              gridRef.current?.scrollToItem(rowIndex, "smart")
+          }
+      }
+  }, [selectedFolderData, flattenedNodes]);
+  return flattenedNodes.length > 0 ? (
+    <StyledAutoSizer>
+    {(AutoSizerProps) => (
+      <List
+        itemData={flattenedNodes}
+        layout="vertical"
+        height={AutoSizerProps.height}
+        width={AutoSizerProps.width}
+        itemCount={flattenedNodes.length}
+        itemKey={itemKey}
+        itemSize={24}
+        ref={gridRef}
+      >
+        {(ListProps) => (
+          <VirtualTreeRow
+            {...ListProps}
+            tabInfo={tabInfo}
+            selectedFolderData={selectedFolderData}
+            treeRootData={treeRootData}
+            onSelectNode={onSelectNode}
+            onExpandNode={onExpandNode}
+            onCollapseNode={onCollapseNode}
+            onContextMenu={onContextMenu}
+          />
+        )}
+      </List>
+    )}
+  </StyledAutoSizer>
+  ) : null;
+};
+export const FileBrowserVirtualTree = React.memo(FileBrowserVirtualTreePreMemo);
@@ -0,0 +1,102 @@
+import React from 'react';
+import {snackActions} from "../utilities/Snackbar";
+import {MythicStyledTooltip} from "./MythicStyledTooltip";
+import {MythicDialog} from "./MythicDialog";
+import {Link} from '@mui/material';
+import {useMutation, useLazyQuery, gql} from '@apollo/client';
+import {b64DecodeUnicode} from "../pages/Callbacks/ResponseDisplay";
+import {PreviewFileMediaDialog} from "../pages/Search/PreviewFileMedia";
+import {faPhotoVideo} from '@fortawesome/free-solid-svg-icons';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {useMythicLazyQuery} from "../utilities/useMythicLazyQuery";
+
+export const getfileInformationQuery = gql`
+query getFileInformation($file_id: String!){
+    filemeta(where: {agent_file_id: {_eq: $file_id}}){
+        filename_text
+        agent_file_id
+    }
+}
+`;
+
+export const MythicFileContext = ({agent_file_id, display_link, filename, extraStyles}) => {
+    const [fileData, setFileData] = React.useState({
+        agent_file_id: agent_file_id,
+        display_link: display_link,
+        filename: filename,
+    })
+    const [openPreviewMediaDialog, setOpenPreviewMediaDialog] = React.useState(false);
+    const onPreviewMedia = (event) => {
+        if(event){
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        setOpenPreviewMediaDialog(true);
+    }
+    const getFileInformationSuccess = (data) => {
+        if(data.filemeta.length === 0){
+            setFileData({
+                filename: undefined,
+                display_link: "",
+                agent_file_id: agent_file_id,
+            })
+            return;
+        }
+        setFileData( {...fileData,
+            agent_file_id: data.filemeta[0].agent_file_id,
+            filename: b64DecodeUnicode(data.filemeta[0].filename_text)});
+        if(display_link === "" || display_link === undefined){
+            setFileData( {...fileData,
+                agent_file_id: data.filemeta[0].agent_file_id,
+                filename: b64DecodeUnicode(data.filemeta[0].filename_text),
+                display_link: b64DecodeUnicode(data.filemeta[0].filename_text)});
+        }
+    }
+    const getFileInformationError = (data) => {
+        snackActions.error("Failed to fetch file data: " + data);
+        console.log(data);
+    }
+    const getFileInformation = useMythicLazyQuery(getfileInformationQuery, {
+        fetchPolicy: "no-cache"
+    })
+    React.useEffect( () => {
+        if(agent_file_id !== '' && agent_file_id !== undefined){
+            getFileInformation({variables: {file_id: agent_file_id}})
+                .then(({data}) => getFileInformationSuccess(data)).catch((data) => getFileInformationError(data));
+        }
+    }, [filename, agent_file_id]);
+    if(agent_file_id === '' || agent_file_id === undefined){
+        return null
+    }
+    if(fileData.agent_file_id === '' || fileData.filename === undefined){
+        return agent_file_id
+    }
+    const onClose = (e) => {
+        if(e){
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        setOpenPreviewMediaDialog(false)
+    }
+    return (
+        <>
+            <MythicStyledTooltip title={"Preview Media"} tooltipStyle={extraStyles ? extraStyles : {}}>
+                <FontAwesomeIcon icon={faPhotoVideo}
+                                 style={{height: "20px", position: "relative", cursor: "pointer", display: "inline-block"}}
+                                 onClick={onPreviewMedia} />
+            </MythicStyledTooltip>
+            <Link style={{wordBreak: "break-all"}} color="textPrimary" underline="always" href={"/direct/download/" + fileData.agent_file_id}>
+                {fileData.display_link === "" ? window.location.origin + "/direct/download/" + fileData.agent_file_id : fileData.display_link}
+            </Link>
+            {openPreviewMediaDialog &&
+                <MythicDialog fullWidth={true} maxWidth="xl" open={openPreviewMediaDialog}
+                              onClose={onClose}
+                              innerDialog={<PreviewFileMediaDialog
+                                  agent_file_id={fileData.agent_file_id}
+                                  filename={fileData.filename}
+                                  onClose={onClose} />}
+                />
+            }
+        </>
+    )
+}
@@ -0,0 +1,103 @@
+import {snackActions} from '../utilities/Snackbar';
+
+export const UploadTaskFile = async (file, comment) => {
+  let formData = new FormData();
+  try{
+    formData.append("file", file);
+    formData.append("comment", comment);
+    snackActions.info("Uploading " + file.name + " to Mythic...", {autoHideDuration: 1000});
+  }catch(error){
+    console.log(error)
+    return null;
+  }
+  try{
+    const upload_response = await fetch('/api/v1.4/task_upload_file_webhook', {
+      method: 'POST',
+      body: formData,
+      headers: {
+        "Authorization": `Bearer ${localStorage.getItem("access_token")}`,
+        MythicSource: "web",
+      }
+    });
+    try{
+      const upload_result = upload_response.json().then(data => {
+          return data?.agent_file_id || data?.error || null;
+        }).catch(error => {
+          snackActions.warning("Error: " + upload_response.statusText + "\nError Code: " + upload_response.status);
+          console.log("Error trying to get json response", error.toString());
+          return null;
+        });
+        return upload_result;
+    }catch(error){
+      snackActions.error(error.toString());
+      return null;
+    }
+  }catch(error){
+      snackActions.error(error.toString());
+      return null;
+  }
+}
+export const UploadEventFile = async (file, comment) => {
+  let formData = new FormData();
+  formData.append("file", file);
+  formData.append("comment", comment);
+  snackActions.info("Uploading " + file.name + " to Mythic...", {autoHideDuration: 1000});
+  try{
+    const upload_response = await fetch('/api/v1.4/eventing_import_webhook', {
+      method: 'POST',
+      body: formData,
+      headers: {
+        "Authorization": `Bearer ${localStorage.getItem("access_token")}`
+      }
+    });
+    try{
+      return upload_response.json().then(data => {
+        //console.log(data);
+        return data;
+      }).catch(error => {
+        console.log(upload_response);
+        snackActions.warning("Error: " + upload_response.statusText + "\nError Code: " + upload_response.status);
+        console.log("Error trying to get json response", error.toString());
+        return null;
+      });
+    }catch(error){
+      snackActions.error(error.toString());
+      return null;
+    }
+  }catch(error){
+    snackActions.error(error.toString());
+    return null;
+  }
+}
+export const UploadEventGroupFile = async (file, eventgroup_id) => {
+  let formData = new FormData();
+  formData.append("eventgroup_id", eventgroup_id);
+  formData.append("file", file);
+  snackActions.info("Uploading " + file.name + " to Mythic...", {autoHideDuration: 1000});
+  try{
+    const upload_response = await fetch('/api/v1.4/eventing_register_file_webhook', {
+      method: 'POST',
+      body: formData,
+      headers: {
+        "Authorization": `Bearer ${localStorage.getItem("access_token")}`
+      }
+    });
+    try{
+      return upload_response.json().then(data => {
+        //console.log(data);
+        return data;
+      }).catch(error => {
+        console.log(upload_response);
+        snackActions.warning("Error: " + upload_response.statusText + "\nError Code: " + upload_response.status);
+        console.log("Error trying to get json response", error.toString());
+        return null;
+      });
+    }catch(error){
+      snackActions.error(error.toString());
+      return null;
+    }
+  }catch(error){
+    snackActions.error(error.toString());
+    return null;
+  }
+}
@@ -0,0 +1,257 @@
+import * as React from "react";
+import styled from "@emotion/styled";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import ArrowRight from "@mui/icons-material/ArrowRight";
+// slightly modified from https://medium.com/geekculture/creating-a-dropdown-with-nested-menu-items-using-react-mui-bb0c084226da
+export const Dropdown = React.forwardRef(
+    (
+        {
+            menu,
+            isOpen: controlledIsOpen,
+            onOpen: onControlledOpen,
+            externallyOpen,
+            minWidth,
+            absoluteX,
+            absoluteY,
+            anchorReference="anchorEl",
+            style,
+            transformOrigin,
+            anchorOrigin,
+        },
+        ref
+    ) => {
+        const [isInternalOpen, setInternalOpen] = React.useState(null);
+
+        const isOpen = controlledIsOpen || isInternalOpen;
+
+        let anchorRef = React.useRef(isOpen);
+        if (ref) {
+            anchorRef = ref;
+        }
+        const handleClose = (event) => {
+            event.stopPropagation();
+
+            if (anchorRef.current && anchorRef.current.contains(event.target)) {
+                return;
+            }
+
+            handleForceClose();
+        };
+        const handleForceClose = () => {
+            onControlledOpen ? onControlledOpen(null) : setInternalOpen(null);
+        };
+        const renderMenu = (menuItem, index) => {
+            const { ...props } = menuItem.props;
+
+            let extraProps = {};
+            if (props.menu) {
+                extraProps = {
+                    parentMenuOpen: isOpen
+                };
+            }
+            return React.createElement(menuItem.type, {
+                ...props,
+                key: index,
+                ...extraProps,
+                onClick: (event) => {
+                    event.stopPropagation();
+                    if (menuItem.props.onClick) {
+                        menuItem.props.onClick(event);
+                    }
+                },
+                children: props.menu
+                    ? React.Children.map(props.menu, renderMenu)
+                    : props.children
+            });
+        };
+        const anchorEl = isOpen && isOpen.currentTarget ? isOpen.currentTarget : isOpen;
+        return (
+            <>
+                <Menu
+                    elevation={5}
+                    PaperProps={{ sx: { minWidth: minWidth ?? 0 } }}
+                    style={{zIndex: 100000, position: "absolute"}}
+                    anchorEl={anchorReference === "anchorEl" ? anchorEl : undefined}
+                    transition={"true"}
+                    open={!!externallyOpen}
+                    anchorPosition={anchorReference === "anchorEl" ? undefined : {top: absoluteY, left: absoluteX}}
+                    anchorReference={ anchorReference ? anchorReference : "anchorEl"}
+                    onClose={handleClose}
+                    anchorOrigin={anchorOrigin ? anchorOrigin : {
+                        vertical: 'bottom',
+                        horizontal: 'left',
+                    }}
+                    transformOrigin={transformOrigin ? transformOrigin : {
+                        vertical: 'top',
+                        horizontal: 'left',
+                    }}
+                >
+                    {React.Children.map(menu, renderMenu)}
+                </Menu>
+            </>
+        );
+    }
+);
+
+const NestedMenuItem = React.forwardRef((props, ref) => {
+    const {
+        parentMenuOpen,
+        label,
+        rightIcon = <ArrowRight style={{ fontSize: 16 }} />,
+        children,
+        customTheme,
+        className,
+        tabIndex: tabIndexProp,
+        ContainerProps: ContainerPropsProp = {},
+        rightAnchored,
+        ...MenuItemProps
+    } = props;
+
+    const { ref: containerRefProp, ...ContainerProps } = ContainerPropsProp;
+
+    const menuItemRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => menuItemRef.current);
+
+    const containerRef = React.useRef(null);
+    React.useImperativeHandle(containerRefProp, () => containerRef.current);
+
+    const menuContainerRef = React.useRef(null);
+
+    const [isSubMenuOpen, setIsSubMenuOpen] = React.useState(false);
+
+    const handleMouseEnter = (event) => {
+        setIsSubMenuOpen(true);
+
+        if (ContainerProps?.onMouseEnter) {
+            ContainerProps.onMouseEnter(event);
+        }
+    };
+
+    const handleMouseLeave = (event) => {
+        setIsSubMenuOpen(false);
+
+        if (ContainerProps?.onMouseLeave) {
+            ContainerProps.onMouseLeave(event);
+        }
+    };
+
+    const isSubmenuFocused = () => {
+        const active = containerRef.current?.ownerDocument?.activeElement;
+
+        for (const child of menuContainerRef.current?.children ?? []) {
+            if (child === active) {
+                return true;
+            }
+        }
+        return false;
+    };
+
+    const handleFocus = (event) => {
+        if (event.target === containerRef.current) {
+            setIsSubMenuOpen(true);
+        }
+
+        if (ContainerProps?.onFocus) {
+            ContainerProps.onFocus(event);
+        }
+    };
+
+    const handleKeyDown = (event) => {
+        if (event.key === "Escape") {
+            setIsSubMenuOpen(false);
+            return;
+        }
+
+        if (isSubmenuFocused()) {
+            event.stopPropagation();
+        }
+
+        const active = containerRef.current?.ownerDocument?.activeElement;
+
+        if (event.key === "ArrowLeft" && isSubmenuFocused()) {
+            containerRef.current?.focus();
+        }
+
+        if (
+            event.key === "ArrowRight" &&
+            event.target === containerRef.current &&
+            event.target === active
+        ) {
+            const firstChild = menuContainerRef.current?.children[0];
+            firstChild?.focus();
+        }
+        if(event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "ArrowLeft"){
+            setIsSubMenuOpen(false);
+        }
+
+
+    };
+
+    const open = isSubMenuOpen && parentMenuOpen;
+
+    let tabIndex;
+    if (!props.disabled) {
+        tabIndex = tabIndexProp !== undefined ? tabIndexProp : -1;
+    }
+
+    return (
+        <div
+            {...ContainerProps}
+            ref={containerRef}
+            onFocus={handleFocus}
+            tabIndex={tabIndex}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+            onKeyDown={handleKeyDown}
+        >
+            <MenuItem
+                {...MenuItemProps}
+                data-open={!!open || undefined}
+                className={className}
+                ref={menuItemRef}
+            >
+                {label}
+                <div style={{ flexGrow: 1 }} />
+                {rightIcon}
+            </MenuItem>
+            <Menu
+                hideBackdrop
+                disablePortal
+                disableEnforceFocus={false}
+                disableAutoFocus={false}
+                style={{ pointerEvents: "none", zIndex: 100000}}
+                anchorEl={menuItemRef.current}
+                anchorOrigin={{
+                    vertical: "top",
+                    horizontal: rightAnchored ? "left" : "right"
+                }}
+                transformOrigin={{
+                    vertical: "top",
+                    horizontal: rightAnchored ? "right" : "left"
+                }}
+                css={customTheme}
+                open={!!open}
+                onClose={() => {
+                    setIsSubMenuOpen(false);
+                }}
+                MenuListProps={{
+                    'aria-hidden': false,
+                    role: 'menu'
+                }}
+            >
+                <div ref={menuContainerRef} style={{ pointerEvents: "auto" }}>
+                    {children}
+                </div>
+            </Menu>
+        </div>
+    );
+});
+
+export const DropdownMenuItem = styled(MenuItem)`
+
+`;
+
+export const DropdownNestedMenuItem = styled(NestedMenuItem)`
+
+`;
@@ -0,0 +1,13 @@
+
+export const MythicPageBody = ({children}) => {
+    return (
+        <div style={{
+            height: "100%",
+            display: "flex",
+            flexDirection: "column",
+            margin: "0.5rem",
+        }}>
+            {children}
+        </div>
+    )
+}
@@ -0,0 +1,32 @@
+import {useTheme} from '@mui/material/styles';
+import Paper from '@mui/material/Paper';
+import {Typography} from "@mui/material";
+
+export const MythicPageHeader = ({children, title, style={}, headerVariant="h5"}) => {
+    const theme = useTheme();
+    return (
+        <Paper elevation={2}
+               variant={"elevation"}
+               style={{
+                   backgroundColor: theme.pageHeader.main,
+                   color: theme.pageHeaderText.main,
+                   border: `1px solid ${theme.borderColor}`,
+                   alignItems: "center",
+                   display: "flex",
+                   justifyContent: "space-between",
+                   marginBottom: "0.5rem",
+                   padding: "0.5rem",
+                   borderRadius: "5px",
+                   ...style
+        }}
+        >
+            <Typography variant={headerVariant} style={{textAlign: "left", display: "inline-block", marginLeft: "1rem", width: "100%"}}>
+                {title}
+            </Typography>
+            <div style={{display: "flex", marginRight: "1rem", alignItems: "center"}}>
+                {children}
+            </div>
+        </Paper>
+    )
+
+}
@@ -0,0 +1,186 @@
+import React, { useCallback } from 'react';
+import {classes} from './styles';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import {Dropdown, DropdownMenuItem, DropdownNestedMenuItem} from "../MythicNestedMenus";
+
+const CellPreMemo = ({ style, rowIndex, columnIndex, data  }) => {
+    const [openContextMenu, setOpenContextMenu] = React.useState(false);
+    const rowClassName = data.gridUUID + "row" + rowIndex;
+    const rowHighlight = rowIndex % 2 === 1 ? 'MythicResizableGridRowHighlight' : '';
+    const [contextMenuOptions, setContextMenuOptions] = React.useState(data?.rowContextMenuOptions || []);
+    const dropdownAnchorRef = React.useRef(null);
+    const item = data.items[rowIndex][columnIndex];
+    const cellStyle = item?.props?.cellData?.cellStyle || {};
+    const rowStyle = data.items[rowIndex][columnIndex]?.props?.rowData?.rowStyle || {};
+    const contextMenuLocationRef = React.useRef({x: 0, y: 0});
+    const handleDoubleClick = useCallback(
+        (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            data.onDoubleClickRow(e, rowIndex - 1, data.items[rowIndex][columnIndex]?.props?.rowData); // minus 1 to account for header row
+        },
+        [data, rowIndex]
+    );
+    const handleClick = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if(data.onRowClick){
+            data.onRowClick({event, rowDataStatic: data.items[rowIndex][columnIndex]?.props?.rowData})
+        }
+    };
+    const selectedClass = data.items[rowIndex][columnIndex]?.props?.rowData?.selected ? "selectedCallback" : "";
+    const onMouseEnter = () => {
+        const cells = document.getElementsByClassName(rowClassName);
+        if(cells.length > 0){
+            for(const cell of cells){
+                cell.classList.add(classes.hoveredRow);
+            }
+        }
+    }
+    const onMouseLeave = () => {
+        const cells = document.getElementsByClassName(rowClassName);
+        if(cells.length > 0){
+            for(const cell of cells){
+                cell.classList.remove(classes.hoveredRow);
+            }
+        }
+    }
+    const handleMenuItemClick = (event, clickOption) => {
+        event.preventDefault();
+        event.stopPropagation();
+        clickOption({event, columnIndex, rowIndex, data: data.items[rowIndex][columnIndex]?.props?.rowData || {}});
+        setOpenContextMenu(false);
+    };
+    React.useEffect( () => {
+        if(!openContextMenu){
+            onMouseLeave();
+        }
+    }, [openContextMenu]);
+    const handleContextClick = useCallback(
+        (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            if(item?.disableFilterMenu){
+                return;
+            }
+            contextMenuLocationRef.current.x = event.clientX;
+            contextMenuLocationRef.current.y = event.clientY;
+            if(data.onRowContextMenuClick){
+                const newMenuItems = data.onRowContextMenuClick({rowDataStatic: data.items[rowIndex][columnIndex]?.props?.rowData});
+                Promise.resolve(newMenuItems).then(function(value) {
+                    if(value.length > 0){
+                        setContextMenuOptions(value);
+                        setOpenContextMenu(true);
+                    }
+                })
+            } else {
+                if(contextMenuOptions && contextMenuOptions.length > 0){
+                    setOpenContextMenu(true);
+                }
+            }
+        },
+        [contextMenuOptions, data.onRowContextMenuClick] // eslint-disable-line react-hooks/exhaustive-deps
+    );
+    return (
+        <div style={{...style, ...cellStyle, ...rowStyle}}
+            className={`${classes.cell} ${rowClassName} ${rowHighlight} ${selectedClass}`}
+            onDoubleClick={handleDoubleClick}
+            onClick={handleClick}
+            onMouseEnter={onMouseEnter}
+            onMouseLeave={onMouseLeave}
+            onContextMenu={handleContextClick} 
+            ref={dropdownAnchorRef}
+            >
+            <div className={classes.cellInner} style={{height: style.height}}>
+                {item}
+            </div>
+            <ContextMenu dropdownAnchorRef={dropdownAnchorRef} contextMenuOptions={contextMenuOptions}
+                disableFilterMenu={item?.disableFilterMenu} openContextMenu={openContextMenu}
+                         contextMenuLocationRef={contextMenuLocationRef}
+                         setOpenContextMenu={setOpenContextMenu} handleMenuItemClick={handleMenuItemClick}
+            />
+        </div>
+    );
+};
+export const ContextMenu = ({openContextMenu, dropdownAnchorRef, contextMenuOptions, setOpenContextMenu, handleMenuItemClick, contextMenuLocationRef}) => {
+    const handleClose = (event) => {
+        //if (dropdownAnchorRef.current && dropdownAnchorRef.current.contains(event.target)) {
+        //    return;
+        //}
+        setOpenContextMenu(false);
+    };
+
+    return (
+        openContextMenu &&
+        <ClickAwayListener onClickAway={handleClose} mouseEvent={"onMouseDown"}>
+            <Dropdown
+                isOpen={dropdownAnchorRef.current}
+                onOpen={setOpenContextMenu}
+                externallyOpen={openContextMenu}
+                absoluteX={contextMenuLocationRef.current.x}
+                absoluteY={contextMenuLocationRef.current.y}
+                anchorReference={"anchorPosition"}
+                menu={[
+                    contextMenuOptions.map((option, index) => (
+                        option.type === 'item' ? (
+                            <DropdownMenuItem
+                                key={option.name}
+                                disabled={option.disabled}
+                                onClick={(event) => handleMenuItemClick(event, option.click)}
+                            >
+                                {option.icon}{option.name}
+                            </DropdownMenuItem>
+                        ) : option.type === 'menu' ? (
+                            <DropdownNestedMenuItem
+                                label={option.name}
+                                disabled={option.disabled}
+                                menu={
+                                    option.menuItems.map((menuOption, indx) => (
+                                        <DropdownMenuItem
+                                            key={menuOption.name}
+                                            disabled={menuOption.disabled}
+                                            onClick={(event) => handleMenuItemClick(event, menuOption.click)}
+                                        >
+                                            {menuOption.icon}{menuOption.name}
+                                        </DropdownMenuItem>
+                                    ))
+                                }
+                            />
+                        ) : null
+                    )),
+                ]}
+            />
+        </ClickAwayListener>
+
+    )
+}
+const Cell = React.memo(CellPreMemo);
+export default Cell;
+
+/*
+<Popper open={openContextMenu} anchorEl={dropdownAnchorRef.current} role={undefined} transition disablePortal style={{zIndex: 4}}>
+            {({ TransitionProps, placement }) => (
+                <Grow
+                    {...TransitionProps}
+                    style={{
+                        transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom',
+                    }}
+                >
+                    <Paper variant="outlined" style={{backgroundColor: theme.palette.mode === 'dark' ? theme.palette.primary.dark : theme.palette.primary.light, color: "white"}}>
+                        <ClickAwayListener onClickAway={handleClose} mouseEvent={"onMouseDown"}>
+                            <MenuList id="split-button-menu"  >
+                                {contextMenuOptions.map((option, index) => (
+                                    <MenuItem
+                                        key={option.name + index}
+                                        onClick={(event) => handleMenuItemClick(event, index)}
+                                    >
+                                        {option.name}
+                                    </MenuItem>
+                                ))}
+                            </MenuList>
+                        </ClickAwayListener>
+                    </Paper>
+                </Grow>
+            )}
+        </Popper>
+ */
@@ -0,0 +1,59 @@
+import React, { useState } from 'react';
+import {classes} from './styles';
+import Draggable from 'react-draggable';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import DragHandleIcon from '@mui/icons-material/DragHandle';
+
+const DraggableHandles = React.forwardRef(({ height, rowHeight, width, minColumnWidth, columnWidths, onStop }, ref) => {
+    const [isDragging, setIsDragging] = useState(-1);
+    const nodeRef = React.useRef(null);
+    return (
+        <div
+            ref={ref}
+            className={classes.draggableHandlesContainer}
+            style={{
+                height: height,
+                width: width,
+                pointerEvents: isDragging >= 0 ? 'initial' : 'none',
+            }}>
+            {columnWidths.map((_, i) => {
+                // leftOffset is the sum of the width of all columns left of i
+                const leftOffset = columnWidths.slice(0, i).reduce((a, b) => a + b, 0);
+                return (
+                    <Draggable
+                        key={i}
+                        nodeRef={nodeRef}
+                        axis='x'
+                        bounds={{
+                            left: minColumnWidth - columnWidths[i],
+                            right: Number.POSITIVE_INFINITY,
+                            top: 0,
+                            bottom: 0,
+                        }}
+                        offsetParent={document.body}
+
+                        defaultPosition={{x: 0, y: 0}}
+                        position={{x: 0, y: 0}}
+                        onStart={() => {
+                            setIsDragging(i);
+                        }}
+                        onStop={(e, data) => {
+                            setIsDragging(-1);
+                            onStop(data.x, i);
+                        }}>
+                            <DragHandleIcon
+                                ref={nodeRef}
+                                className={isDragging === i ? classes.draggableHandlesClickAreaSelected : classes.draggableHandlesClickArea}
+                                style={{
+                                    left: leftOffset + columnWidths[i] - 1 - 7,
+                                    rotate: isDragging === i ? "0deg" : "90deg",
+                                }}>
+                            </DragHandleIcon>
+                    </Draggable>
+                );
+            })}
+        </div>
+    );
+});
+
+export default DraggableHandles;
@@ -0,0 +1,78 @@
+import { Box, Typography } from '@mui/material';
+import { useCallback } from 'react';
+import useSingleAndDoubleClick from '../../utilities/useSingleAndDoubleClick';
+import {classes} from './styles';
+import React from 'react';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faFilter} from '@fortawesome/free-solid-svg-icons';
+import {ContextMenu} from "./Cell";
+
+const HeaderCell = ({
+    onClick = () => {},
+    onDoubleClick = () => {},
+    contextMenuOptions = [],
+    sortIndicatorIndex,
+    sortDirection,
+    headerNameKey = "name",
+    VariableSizeGridProps: { style, rowIndex, columnIndex, data },
+}) => {
+    const dropdownAnchorRef = React.useRef(null);
+    const item = data.items[rowIndex][columnIndex];
+    const isFiltered = item?.filtered || false;
+    const contextMenuLocationRef = React.useRef({x: 0, y: 0});
+    const handleClick = useCallback(
+        (e) => {
+            onClick(e, columnIndex);
+        },
+        [onClick, columnIndex]
+    );
+
+    const handleDoubleClick = useCallback(
+        (e) => {
+            onDoubleClick(e, columnIndex);
+        },
+        [onDoubleClick, columnIndex]
+    );
+    const [openContextMenu, setOpenContextMenu] = React.useState(false);
+    const handleContextClick = useCallback(
+        (event) => {
+            event.preventDefault();
+            if(item.disableFilterMenu){
+                return;
+            }
+            if(contextMenuOptions && contextMenuOptions.length > 0){
+                contextMenuLocationRef.current.x = event.clientX;
+                contextMenuLocationRef.current.y = event.clientY;
+                setOpenContextMenu(true);
+            }
+        },
+        [contextMenuOptions, columnIndex] // eslint-disable-line react-hooks/exhaustive-deps
+    );
+    const handleMenuItemClick = (event, clickOption) => {
+        event.preventDefault();
+        event.stopPropagation();
+        clickOption({event, columnIndex, rowIndex, data: data.items[rowIndex][columnIndex]?.props?.rowData || {}});
+        setOpenContextMenu(false);
+    };
+
+    const handleClicks = useSingleAndDoubleClick(handleClick, handleDoubleClick);
+
+    return (
+        <div style={style} className={classes.headerCell} onClick={handleClicks} onContextMenu={handleContextClick} ref={dropdownAnchorRef}>
+            <Box display='flex' alignItems='center' justifyContent='space-between' width='100%'>
+                <Typography className={classes.cellInner} variant='body1'>
+                    {item[headerNameKey].toUpperCase()}
+                </Typography>
+                {isFiltered && <FontAwesomeIcon icon={faFilter} />}
+                {sortIndicatorIndex === columnIndex && (sortDirection === 'ASC' ? <div>↑</div> : <div>↓</div>)}
+                <ContextMenu dropdownAnchorRef={dropdownAnchorRef} contextMenuOptions={contextMenuOptions}
+                             disableFilterMenu={item?.disableFilterMenu} openContextMenu={openContextMenu}
+                             contextMenuLocationRef={contextMenuLocationRef}
+                             setOpenContextMenu={setOpenContextMenu} handleMenuItemClick={handleMenuItemClick}
+                />
+            </Box>
+        </div>
+    );
+};
+
+export default HeaderCell;
@@ -0,0 +1,400 @@
+import React, { useCallback, useEffect, useRef, useState, createContext, useContext } from 'react';
+import PropTypes from 'prop-types';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import useScrollbarSize from 'react-scrollbar-size';
+import { VariableSizeGrid } from 'react-window';
+import HeaderCell from './HeaderCell';
+import Cell from './Cell';
+import DraggableHandles from './DraggableHandles';
+import {classes} from './styles';
+import {GetMythicSetting, useSetMythicSetting} from "../MythicSavedUserSetting";
+
+const HeaderCellContext = createContext({});
+
+const MIN_COLUMN_WIDTH = 100;
+const MIN_FLEX_COLUMN_WIDTH = 150;
+
+
+const CellRendererPreMemo = ({ style, rowIndex, columnIndex, data }) => {
+    return rowIndex === 0 ? null : <Cell style={style} rowIndex={rowIndex} columnIndex={columnIndex} data={data} />;
+};
+const CellRenderer = React.memo(CellRendererPreMemo);
+const innerElementType = React.forwardRef(({ children, style }, ref) => {
+    const HeaderCellData = useContext(HeaderCellContext);
+    const onHeaderDoubleClick = React.useCallback( (e, columnIndex) => {
+        if (HeaderCellData.columns[columnIndex].disableAutosize) return;
+        HeaderCellData.autosizeColumn({columnIndex});
+    }, [HeaderCellData.columns, HeaderCellData.autosizeColumn]);
+    return (
+        <div ref={ref} style={style}>
+            {/* always render header cells */}
+            <div
+                className={classes.headerCellRow}
+                style={{
+                    height: HeaderCellData.getRowHeight(0),
+                }}>
+                {HeaderCellData.columns.map((column, i) => {
+                    const leftOffset = HeaderCellData.columnWidths.slice(0, i).reduce((a, b) => a + b, 0);
+                    return (
+                        <HeaderCell
+                            key={i}
+                            headerNameKey={HeaderCellData.headerNameKey}
+                            onClick={HeaderCellData.onClickHeader}
+                            onDoubleClick={onHeaderDoubleClick}
+                            contextMenuOptions={HeaderCellData.contextMenuOptions}
+                            sortIndicatorIndex={HeaderCellData.sortIndicatorIndex}
+                            sortDirection={HeaderCellData.sortDirection}
+                            VariableSizeGridProps={{
+                                style: {
+                                    position: 'absolute',
+                                    top: 0,
+                                    left: leftOffset,
+                                    height: HeaderCellData.getRowHeight(0),
+                                    width: HeaderCellData.getColumnWidth(i),
+                                },
+                                rowIndex: 0,
+                                columnIndex: i,
+                                data: { items: HeaderCellData.itemsWithHeader },
+                            }}
+                        />
+                    );
+                })}
+            </div>
+            {/* render other cells as usual */}
+            {children}
+        </div>
+    );
+});
+
+export const GetShortRandomString = () => {
+    return (Math.random() + 1).toString(36).substring(2);
+}
+const ResizableGridWrapper = ({
+    name,
+    columns,
+    sortIndicatorIndex,
+    sortDirection,
+    items,
+    headerNameKey,
+    onClickHeader,
+    onDoubleClickRow,
+    contextMenuOptions,
+    rowContextMenuOptions,
+    onRowContextMenuClick,
+    rowHeight,
+    headerRowHeight,
+    widthMeasureKey,
+    callbackTableGridRef,
+    onRowClick,
+    ...AutoSizerProps
+}) => {
+    /* Hooks */
+    const { width: scrollbarWidth } = useScrollbarSize();
+    const localColumnsRef = React.useRef(columns);
+    const initialSavedWidths = name === undefined ? [] : GetMythicSetting({setting_name: `${name}_column_widths`, default_value: {}, output: "json-array"});
+    const [columnWidths, setColumnWidths] = useState(columns.map((column, index) => {
+        if(initialSavedWidths.length > 0){
+            return initialSavedWidths[index];
+        }
+        if(column.fillWidth){
+            return Math.max(column?.width || 0, MIN_FLEX_COLUMN_WIDTH);
+        }
+        return Math.max(column?.width || 0, MIN_COLUMN_WIDTH);
+    }));
+    const gridUUID = React.useMemo( () => GetShortRandomString(), []);
+    const gridRef = useRef(null);
+    const dragHandlesRef = useRef(null);
+    const [updateSetting] = useSetMythicSetting();
+    const getColumnWidth = useCallback(
+        (index) => {
+            return columnWidths[index] || MIN_COLUMN_WIDTH;
+        },
+        [columnWidths]
+    );
+    const getRowHeight = useCallback(
+        (index) => {
+            if(index === 0){
+                return headerRowHeight;
+            }
+            return rowHeight;
+        },
+        [rowHeight, headerRowHeight]
+    );
+    useEffect(() => {
+        if(initialSavedWidths.length > 0 && localColumnsRef.current.length === columns.length){
+            return;
+        }
+        localColumnsRef.current = columns;
+        const totalWidth = AutoSizerProps.width - scrollbarWidth;
+        const updatedColumnWidths = columns.map((column, index) => {
+            return column.width || MIN_COLUMN_WIDTH
+        });
+        const totalWidthDiff = totalWidth - updatedColumnWidths.reduce((a, b) => a + b, 0);
+        if (totalWidthDiff !== 0) {
+            let updatedWidthIndexs = [];
+            for(let i = 0; i < columns.length; i++){
+                // check if any of the columns have the `fillWidth` property to true
+                if(columns[i]["fillWidth"]){
+                    updatedWidthIndexs.push(i);
+                }
+            }
+            if(updatedWidthIndexs.length === 0){
+                updatedWidthIndexs.push(columns.length - 1);
+            }
+            for(let i = 0; i < updatedWidthIndexs.length; i++){
+                updatedColumnWidths[updatedWidthIndexs[i]] += Math.max(totalWidthDiff / updatedWidthIndexs.length, MIN_FLEX_COLUMN_WIDTH);
+            }
+            //updatedColumnWidths[updatedWidthIndex] += totalWidthDiff;
+        }
+        setColumnWidths(updatedColumnWidths);
+        if(name !== undefined){
+            updateSetting({setting_name: `${name}_column_widths`, value: updatedColumnWidths});
+        }
+
+    }, [scrollbarWidth, columns, AutoSizerProps.width, localColumnsRef.current]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    useEffect(() => {
+        gridRef.current.resetAfterColumnIndex(0, true);
+        if(name !== undefined){
+            updateSetting({setting_name: `${name}_column_widths`, value: columnWidths});
+        }
+    }, [columnWidths]);
+
+    /* Event Handlers */
+
+    const resizeColumn = useCallback( (x, columnIndex) => {
+        const updatedColumnWidths = columnWidths.map((columnWidth, index) => {
+            if (columnIndex === index) {
+                return Math.floor(Math.max(columnWidth + x, MIN_COLUMN_WIDTH));
+            }
+            return Math.floor(columnWidth);
+        });
+        setColumnWidths(updatedColumnWidths);
+        if(name !== undefined){
+            updateSetting({setting_name: `${name}_column_widths`, value: updatedColumnWidths});
+        }
+
+    }, [columnWidths]);
+    const autosizeColumn =  useCallback( ({columnIndex}) => {
+        if(columns[columnIndex].disableDoubleClick){
+            return
+        }
+        const longestElementInColumn = Math.max(...items.map((itemRow) => {
+            if(columns[columnIndex].key === undefined){
+                if(columns[columnIndex].plaintext){
+                    columns[columnIndex].key = columns[columnIndex].plaintext;
+                } else {
+                    return 30;
+                }
+            }
+            if(columns[columnIndex].key !== undefined){
+                if(columns[columnIndex].key.includes("time")){
+                    return 30;
+                }
+                if(columns[columnIndex].key === "mythictree_groups"){
+                    return itemRow[columnIndex]?.props?.cellData.length;
+                }
+                if(columns[columnIndex].type === "size"){
+                    if(itemRow[columnIndex]?.props?.cellData !== undefined){
+                        if(typeof itemRow[columnIndex]?.props?.cellData === 'number'){
+                            return String(itemRow[columnIndex]?.props?.cellData)?.length;
+                        }
+                        return String(itemRow[columnIndex]?.props?.cellData?.plaintext)?.length;
+                    }
+                    return itemRow[columnIndex].length;
+                }
+                try{
+                    items = JSON.parse(itemRow[columnIndex]?.props?.rowData?.[columns[columnIndex].key]);
+                    if(Array.isArray(items) && items.length > 0){
+                        return String(items[0]).length;
+                    }
+                }catch(error){
+                    //console.log(itemRow[columnIndex]?.props?.rowData?.[columns[columnIndex].key])
+                }
+                if(typeof itemRow[columnIndex]?.props?.cellData === 'string' ){
+                    return itemRow[columnIndex]?.props?.cellData.length;
+                }
+
+                let data = itemRow[columnIndex]?.props?.rowData?.[columns[columnIndex].key];
+                if(columns[columnIndex].inMetadata){
+                    return itemRow[columnIndex]?.props?.cellData.length;
+                }
+                if(data === undefined){
+                    return MIN_COLUMN_WIDTH;
+                }
+                if(data.plaintext){
+                    return String(data.plaintext)?.length;
+                } else if(data?.button?.name) {
+                    return String(data?.button?.name)?.length ;
+                } else {
+                    return MIN_COLUMN_WIDTH;
+                }
+                //return String(itemRow[columnIndex]?.props?.rowData?.[columns[columnIndex].key]).length || -1;
+            } else if(typeof(itemRow[columnIndex]?.props?.cellData) === "string") {
+                try {
+                    items = JSON.parse(itemRow[columnIndex]?.props?.cellData);
+                    if (Array.isArray(items) && items.length > 0) {
+                        return String(items[0]).length;
+                    }
+                } catch (error) {
+                    return itemRow[columnIndex]?.props?.cellData.length;
+                }
+            } else if(Array.isArray(itemRow[columnIndex]?.props?.cellData)){
+                return itemRow[columnIndex]?.props?.cellData.join(", ").length;
+            }else {
+                return itemRow[columnIndex]?.props?.cellData?.length || -1;
+            }
+
+        }));
+        const updatedColumnWidths = columnWidths.map((columnWidth, index) => {
+            if (columnIndex === index) {
+                if(isNaN(longestElementInColumn)){
+                    return MIN_COLUMN_WIDTH;
+                }
+                return Math.floor(Math.max(longestElementInColumn * 10 + 40, MIN_COLUMN_WIDTH));
+            }
+            return Math.floor(columnWidth);
+        });
+        //console.log(updatedColumnWidths, columnWidths, longestElementInColumn);
+        let updatedValues = false;
+        for(let i = 0; i < updatedColumnWidths.length; i++){
+            if(updatedColumnWidths[i] !== columnWidths[i]){
+                updatedValues = true;
+                break;
+            }
+        }
+        if(updatedValues){
+            setColumnWidths(() => updatedColumnWidths);
+        }
+    }, [columnWidths]);
+
+    useEffect( () => {
+        if(callbackTableGridRef){
+            callbackTableGridRef.current = gridRef.current;
+        }
+    }, [gridRef.current])
+    const itemsWithHeader = [columns, ...items];
+    const headerCellData = {
+        "getRowHeight": getRowHeight,
+        "columns": columns,
+        "columnWidths": columnWidths,
+        "headerNameKey": headerNameKey,
+        "onClickHeader": onClickHeader,
+        "autosizeColumn": autosizeColumn,
+        "contextMenuOptions": contextMenuOptions,
+        "sortIndicatorIndex": sortIndicatorIndex,
+        "sortDirection": sortDirection,
+        "getColumnWidth": getColumnWidth,
+        "itemsWithHeader": itemsWithHeader,
+    };
+    const localOnScroll = React.useCallback( ({scrollLeft}) => {
+
+        if (dragHandlesRef.current) {
+            dragHandlesRef.current.scrollTo({ left: scrollLeft });
+        }
+    }, [dragHandlesRef.current])
+    return (
+        <>
+            <HeaderCellContext.Provider value={headerCellData}>
+                <VariableSizeGrid
+                    height={Math.max(1, AutoSizerProps.height)}
+                    width={AutoSizerProps.width}
+                    columnCount={columns.length}
+                    columnWidth={getColumnWidth}
+                    headerNameKey={headerNameKey}
+                    rowCount={itemsWithHeader.length}
+                    rowHeight={getRowHeight}
+                    itemData={{ items: itemsWithHeader,
+                        onDoubleClickRow, gridUUID,
+                        rowContextMenuOptions, onRowClick,
+                        onRowContextMenuClick}}
+                    innerElementType={innerElementType}
+                    overscanRowCount={20}
+                    useIsScrolling={false}
+                    onScroll={localOnScroll}
+                    ref={gridRef}>
+                    {CellRenderer}
+                </VariableSizeGrid>
+                <DraggableHandles
+                    height={AutoSizerProps.height}
+                    rowHeight={headerRowHeight}
+                    width={AutoSizerProps.width}
+                    minColumnWidth={MIN_COLUMN_WIDTH}
+                    columnWidths={columnWidths}
+                    onStop={resizeColumn}
+                    ref={dragHandlesRef}
+                />
+            </HeaderCellContext.Provider>
+
+        </>
+    );
+};
+
+const MythicResizableGrid = ({
+    columns,
+    sortIndicatorIndex,
+    sortDirection,
+    items,
+    onClickHeader,
+    headerNameKey,
+    onDoubleClickRow,
+    contextMenuOptions,
+    rowContextMenuOptions,
+    onRowContextMenuClick,
+    widthMeasureKey,
+    rowHeight = 20,
+    headerRowHeight = 20,
+    callbackTableGridRef,
+    onRowClick,
+    name,
+}) => {
+    return (
+        <AutoSizer style={{height: "100%"}}>
+            {(AutoSizerProps) => (
+                <ResizableGridWrapper
+                    name={name}
+                    columns={columns}
+                    callbackTableGridRef={callbackTableGridRef}
+                    headerNameKey={headerNameKey}
+                    sortIndicatorIndex={sortIndicatorIndex}
+                    sortDirection={sortDirection}
+                    items={items}
+                    widthMeasureKey={widthMeasureKey}
+                    rowHeight={rowHeight}
+                    headerRowHeight={headerRowHeight}
+                    onClickHeader={onClickHeader}
+                    onDoubleClickRow={onDoubleClickRow}
+                    contextMenuOptions={contextMenuOptions}
+                    rowContextMenuOptions={rowContextMenuOptions}
+                    onRowContextMenuClick={onRowContextMenuClick}
+                    onRowClick={onRowClick}
+                    {...AutoSizerProps}
+                />
+            )}
+        </AutoSizer>
+    );
+};
+
+MythicResizableGrid.propTypes = {
+    columns: PropTypes.arrayOf(
+        PropTypes.shape({
+            name: PropTypes.string,
+            width: PropTypes.number,
+            disableAutosize: PropTypes.bool,
+            disableSort: PropTypes.bool
+        })
+    ).isRequired,
+    sortIndicatorIndex: PropTypes.number,
+    sortDirection: PropTypes.oneOf(['ASC', 'DESC']),
+    items: PropTypes.arrayOf(PropTypes.array).isRequired,
+    onClickHeader: PropTypes.func,
+    onDoubleClickRow: PropTypes.func,
+    contextMenuOptions: PropTypes.array,
+    rowContextMenuOptions: PropTypes.array,
+    rowHeight: PropTypes.number,
+    headerRowHeight: PropTypes.number,
+    headerNameKey: PropTypes.string,
+    widthMeasureKey: PropTypes.string
+};
+
+export default MythicResizableGrid;
@@ -0,0 +1,3 @@
+import MythicResizableGrid from './MythicResizableGrid';
+
+export default MythicResizableGrid;
@@ -0,0 +1,12 @@
+const PREFIX = 'MythicResizableGrid';
+export const classes = {
+    headerCellRow: `${PREFIX}-headerCellRow`,
+    headerCell: `${PREFIX}-headerCell`,
+    hoveredRow: `${PREFIX}-hoveredRow`,
+    cell: `${PREFIX}-cell`,
+    cellInner: `${PREFIX}-cellInner`,
+    draggableHandlesContainer: `${PREFIX}-draggableHandlesContainer`,
+    draggableHandlesClickArea: `${PREFIX}-draggableHandlesClickArea`,
+    draggableHandlesClickAreaSelected: `${PREFIX}-draggableHandlesClickAreaSelected`,
+    draggableHandlesIndicator: `${PREFIX}-draggableHandlesIndicator`,
+}
@@ -0,0 +1,83 @@
+import { useReactiveVar } from '@apollo/client';
+import {mePreferences, operatorSettingDefaults} from '../../cache';
+import React from 'react';
+import {useMutation, gql } from '@apollo/client';
+import {snackActions} from "../utilities/Snackbar";
+
+const updatePreferences = gql`
+mutation updatePreferences($preferences: jsonb!){
+    updateOperatorPreferences(preferences: $preferences){
+        status
+        error
+    }
+}
+`;
+export const GetComputedFontSize = () => {
+    const element = document.getElementById('root');
+    const fontSizeString = window.getComputedStyle(element).fontSize;
+    return parseFloat(fontSizeString);
+}
+/*
+setting_name options:
+    hideUsernames
+    showIP
+    showHostname
+    showCallbackGroups
+    showMedia
+    interactType
+
+    callbacks_table_columns
+    callbacks_table_filters
+ */
+export function useGetMythicSetting({setting_name, default_value}){
+    const preferences = useReactiveVar(mePreferences);
+    let initialStorageSetting = GetMythicSetting({setting_name, default_value});
+
+    const [setting, setSetting] = React.useState(initialStorageSetting);
+
+    React.useEffect( () => {
+        let newSetting = GetMythicSetting({setting_name, default_value});
+        setSetting(newSetting);
+    }, [preferences?.[setting_name]]);
+
+    return setting;
+}
+export function GetMythicSetting({setting_name, default_value}){
+    const preferences = mePreferences();
+    return preferences?.[setting_name] === undefined ? default_value : preferences?.[setting_name];
+}
+export function useSetMythicSetting() {
+    const [updateSetting] = useMutation(updatePreferences, {
+        onCompleted: (data) => {
+            //console.log(data, mePreferences());
+        },
+        onError: (error) => {
+            snackActions.error("failed to save user setting: " + error.message);
+            console.log(error);
+        }
+    });
+    return [
+        ({setting_name, value}) => {
+            if(mePreferences()?.[setting_name] !== value){
+                const updatedPreferences = {
+                    ...mePreferences(),
+                    [setting_name]: value,
+                };
+                mePreferences(updatedPreferences);
+                updateSetting({variables: {preferences: updatedPreferences}});
+            }
+        },
+        ({settings}) => {
+            const updatedPreferences = {
+                ...mePreferences(),
+                ...settings,
+            };
+            mePreferences(updatedPreferences);
+            updateSetting({variables: {preferences: updatedPreferences}});
+        },
+        () => {
+            mePreferences(operatorSettingDefaults);
+            updateSetting({variables: {preferences: operatorSettingDefaults}});
+        }
+        ]
+}
@@ -0,0 +1,116 @@
+import React, {useRef, useEffect} from 'react';
+import Button from '@mui/material/Button';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select from '@mui/material/Select';
+import InputLabel from '@mui/material/InputLabel';
+import Input from '@mui/material/Input';
+import TableCell from '@mui/material/TableCell';
+import TableRow from '@mui/material/TableRow';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableContainer from '@mui/material/TableContainer';
+import Paper from '@mui/material/Paper';
+import MythicStyledTableCell from "./MythicTableCell";
+
+export function MythicSelectFromListDialog(props) {
+    const [options, setOptions] = React.useState([]);
+    const [selected, setSelected] = React.useState('');
+    const inputRef = useRef(null); 
+    const handleChange = (event) => {
+        setSelected(event.target.value);
+      };
+    const handleSubmit = () => {
+        props.onSubmit(selected);
+        if(props.dontCloseOnSubmit){
+          return;
+        }
+        props.onClose();
+    }
+    useEffect( () => {
+        //expects options to be an array of dictionaries with a "display" field for what gets presented to the user
+        const opts = [...props.options];
+        setOptions(opts);
+        if(opts.length > 0){
+            setSelected(opts[0]);
+        }else{
+            setSelected("");
+        }
+    }, [props.options]);
+  return (
+    <React.Fragment>
+        <DialogTitle >{props.title}</DialogTitle>
+        <DialogContent dividers={true}>
+            <React.Fragment>
+                <FormControl style={{width: "100%"}}>
+                  <InputLabel ref={inputRef}>Options</InputLabel>
+                  <Select
+                    labelId="demo-dialog-select-label"
+                    id="demo-dialog-select"
+                    value={selected}
+                    onChange={handleChange}
+                    input={<Input style={{width: "100%"}}/>}
+                  >
+                    <MenuItem value="">
+                      <em>None</em>
+                    </MenuItem>
+                    {options.map( (opt) => (
+                        <MenuItem value={opt} key={opt[props.identifier]}>{opt?.[props.display]}</MenuItem>
+                    ) )}
+                  </Select>
+                </FormControl>
+            </React.Fragment>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={props.onClose} variant="contained" color="primary">
+            Close
+          </Button>
+          <Button onClick={handleSubmit} variant="contained" color="success">
+            {props.action}
+          </Button>
+        </DialogActions>
+  </React.Fragment>
+  );
+}
+
+export function MythicSelectFromRawListDialog(props) {
+  const [options, setOptions] = React.useState([]);
+  const handleSubmit = (selected) => {
+      props.onSubmit(selected);
+      props.onClose();
+  }
+  useEffect( () => {
+      //expects options to be an array of dictionaries with a "display" field for what gets presented to the user
+      const opts = [...props.options];
+      setOptions(opts);
+  }, [props.options]);
+return (
+  <React.Fragment>
+      <DialogTitle >{props.title}</DialogTitle>
+      <div style={{height: "100%", display: "flex"}}>
+          <TableContainer component={Paper} className="mythicElement" style={{flexGrow: 1, overflowY: "auto"}}>
+              <Table size="small" style={{ "maxWidth": "100%", "overflow": "scroll"}}>
+                  <TableBody style={{whiteSpace: "pre"}}>
+                      {options.map( (choice, i) => (
+                          <TableRow hover key={choice + i}>
+                              <MythicStyledTableCell style={{width: "5rem"}}>
+                                  <Button onClick={() => handleSubmit(choice)} variant="contained" color="primary">Select</Button>
+                              </MythicStyledTableCell>
+                              <MythicStyledTableCell>{choice}</MythicStyledTableCell>
+                          </TableRow>
+                      ))}
+                  </TableBody>
+              </Table>
+          </TableContainer>
+      </div>
+      <DialogActions>
+        <Button onClick={props.onClose} variant="contained" color="primary">
+          Close
+        </Button>
+      </DialogActions>
+</React.Fragment>
+);
+}
@@ -0,0 +1,86 @@
+import React from 'react';
+import { styled } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+import { Link } from '@mui/material';
+
+const PREFIX = 'MythicSnackDownload';
+
+const classes = {
+    root: `${PREFIX}-root`,
+    typography: `${PREFIX}-typography`,
+    actionRoot: `${PREFIX}-actionRoot`,
+    icons: `${PREFIX}-icons`,
+    expand: `${PREFIX}-expand`,
+    expandOpen: `${PREFIX}-expandOpen`,
+    collapse: `${PREFIX}-collapse`,
+    checkIcon: `${PREFIX}-checkIcon`,
+    button: `${PREFIX}-button`
+};
+
+const Root = styled('div')((
+    {
+        theme
+    }
+) => ({
+    [`& .${classes.root}`]: {
+        [theme.breakpoints.up('sm')]: {
+            minWidth: '344px !important',
+        },
+    },
+
+    [`& .${classes.typography}`]: {
+        fontWeight: 'bold',
+    },
+
+    [`& .${classes.actionRoot}`]: {
+        padding: '8px 8px 8px 16px',
+    },
+
+    [`& .${classes.icons}`]: {
+        marginLeft: 'auto',
+        float: "right"
+    },
+
+    [`& .${classes.expand}`]: {
+        padding: '8px 8px',
+        transform: 'rotate(0deg)',
+        transition: theme.transitions.create('transform', {
+            duration: theme.transitions.duration.shortest,
+        }),
+    },
+
+    [`& .${classes.expandOpen}`]: {
+        transform: 'rotate(180deg)',
+    },
+
+    [`& .${classes.collapse}`]: {
+        padding: 16,
+    },
+
+    [`& .${classes.checkIcon}`]: {
+        fontSize: 20,
+        color: '#b3b3b3',
+        paddingRight: 4,
+    },
+
+    [`& .${classes.button}`]: {
+        padding: 0,
+        textTransform: 'none',
+    }
+}));
+
+export const MythicSnackDownload = (props) => {
+    return (
+        <Root>
+            <Typography variant="subtitle2" className={classes.typography}>
+                {props.title}
+            </Typography>
+                <React.Fragment>
+                    <Typography gutterBottom>File ready for download</Typography>
+                    <Link color="textPrimary" download={true} href={"/direct/download/" + props.file_id} target="_blank">
+                        Download here
+                    </Link>
+                </React.Fragment>
+        </Root>
+    );
+};
@@ -0,0 +1,17 @@
+import React from 'react';
+import {useTheme} from '@mui/material/styles';
+
+export function MythicStyledTooltip({ children, title, enterDelay, tooltipStyle}){
+    const theme = useTheme();
+    return (
+        <span style={{display: "inline-block", ...tooltipStyle}}
+              data-tooltip-id={"my-tooltip"}
+              data-tooltip-content={title}
+              data-tooltip-variant={theme.palette.mode === 'dark' ? 'light' : 'dark'}
+              data-tooltip-delay-show={enterDelay ? enterDelay : 750}
+        >
+            {children}
+        </span>
+
+)
+}
@@ -0,0 +1,163 @@
+import { IconButton } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import Tab from '@mui/material/Tab';
+import React from 'react';
+import Grow from '@mui/material/Grow';
+import Popper from '@mui/material/Popper';
+import MenuItem from '@mui/material/MenuItem';
+import MenuList from '@mui/material/MenuList';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import Paper from '@mui/material/Paper';
+import Badge from '@mui/material/Badge';
+import {
+    Draggable,
+} from "@hello-pangea/dnd";
+
+export function MythicTabPanel(props) {
+    const { children, value, index, maxHeight, tabInfo, getCallbackData, queryParams, changeSearchParam, showDeleted, ...other } =
+        props;
+    const style =
+        props.style === undefined
+            ? {
+                  display: value === index ? 'flex' : 'none',
+                  flexDirection: 'column',
+                  flexGrow: 1,
+                  width: '100%',
+                  maxWidth: '100%',
+                  overflowY: "auto",
+              }
+            : props.style;
+    return (
+        <div
+            role='tabpanel'
+            hidden={value !== index}
+            id={`scrollable-auto-tabpanel-${index}`}
+            aria-labelledby={`scrollable-auto-tab-${index}`}
+            style={style}
+            {...other}>
+            {<React.Fragment>{children}</React.Fragment>}
+        </div>
+    );
+}
+export function a11yProps(index) {
+    return {
+        id: `scrollable-auto-tab-${index}`,
+        'aria-controls': `scrollable-auto-tabpanel-${index}`,
+    };
+}
+export function MythicTabLabel(props) {
+    const {
+        label,
+        index,
+        fullWidth,
+        maxHeight,
+        contextMenuOptions,
+        onCloseTab,
+        selectionFollowsFocus,
+        textColor,
+        indicator,
+        tabInfo,
+        onEditTabDescription,
+        getCallbackData,
+        onDragTab,
+        selectedIndex,
+        highlight,
+        newDataForTab,
+        ...other
+    } = props;
+    const onClick = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        onCloseTab({ tabID: tabInfo.tabID, index: index });
+    };
+    const [openContextMenu, setOpenContextMenu] = React.useState(false);
+    const dropdownAnchorRef = React.useRef(null);
+    const handleContextClick = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if(contextMenuOptions && contextMenuOptions.length > 0){
+            setOpenContextMenu(true);
+        }
+    }
+    const handleMenuItemClick = (event, menuIndex) => {
+        contextMenuOptions[menuIndex].click({event, index});
+        setOpenContextMenu(false);
+    };
+    const handleClose = (event) => {
+        if (dropdownAnchorRef.current && dropdownAnchorRef.current.contains(event.target)) {
+          return;
+        }
+        setOpenContextMenu(false);
+      };
+    return (
+        <Draggable draggableId={`callbacks-tab-${tabInfo.tabID}`} index={index} disableInteractiveElementBlocking={true}>
+            {(provided, snapshot) => (
+                <div ref={provided.innerRef}
+                    {...provided.draggableProps}>
+                    <Tab
+                        className={selectedIndex === index || snapshot.isDragging ? "selectedCallback" : "" }
+                        label={
+                            <span onContextMenu={handleContextClick} style={{}} ref={dropdownAnchorRef}>
+                                <Badge color="success" variant="dot" invisible={!highlight} >
+                                    {label}
+                                </Badge>
+                                <IconButton component='div' size='small' onClick={onClick} {...other}>
+                                    <CloseIcon />
+                                </IconButton>
+                            </span>
+                        }
+                        {...a11yProps(index)}
+                        {...other}
+                        {...provided.dragHandleProps}
+                        style={{padding: "0px 5px 0px 5px", borderRadius: "4px", margin: 0,
+                            borderBottom: selectedIndex === index ? `2px solid grey` : '',
+                            backgroundColor: selectedIndex === index ? tabInfo.color : snapshot.isDragging ? tabInfo.color : ""}}
+                    />
+                    <Popper open={openContextMenu} anchorEl={dropdownAnchorRef.current} role={undefined} transition style={{zIndex: 40}}>
+                        {({ TransitionProps, placement }) => (
+                            <Grow
+                                {...TransitionProps}
+                                style={{
+                                    transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom',
+                                }}
+                            >
+                                <Paper variant="outlined" className={"dropdownMenuColored"}>
+                                    <ClickAwayListener onClickAway={handleClose} mouseEvent={"onMouseDown"}>
+                                        <MenuList id="split-button-menu"  >
+                                            {contextMenuOptions.map((option, index) => (
+                                                <MenuItem
+                                                    key={option.name + index}
+                                                    onClick={(event) => handleMenuItemClick(event, index)}
+                                                >
+                                                    {option.name}
+                                                </MenuItem>
+                                            ))}
+                                        </MenuList>
+                                    </ClickAwayListener>
+                                </Paper>
+                            </Grow>
+                        )}
+                    </Popper>
+                </div>
+
+            )}
+        </Draggable>
+    );
+}
+export function MythicSearchTabLabel(props) {
+    const { label, index, fullWidth, maxHeight, selectionFollowsFocus, textColor, indicator, iconComponent, ...other } =
+        props;
+    return (
+        <Tab
+            label={
+                <span>
+                    {label}
+                    <br />
+                    {iconComponent}
+                </span>
+            }
+            {...a11yProps(index)}
+            {...other}
+        />
+    );
+}
@@ -0,0 +1,109 @@
+import React from 'react';
+import TableCell from '@mui/material/TableCell';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import TableSortLabel from '@mui/material/TableSortLabel';
+import Checkbox from '@mui/material/Checkbox';
+
+
+function descendingComparator(a, b, orderBy) {
+  if (b[orderBy] < a[orderBy]) {
+    return -1;
+  }
+  if (b[orderBy] > a[orderBy]) {
+    return 1;
+  }
+  return 0;
+}
+
+export function getComparator(order, orderBy) {
+  return order === 'desc'
+    ? (a, b) => descendingComparator(a, b, orderBy)
+    : (a, b) => -descendingComparator(a, b, orderBy);
+}
+
+export function stableSort(array, comparator) {
+  const stabilizedThis = array.map((el, index) => [el, index]);
+  stabilizedThis.sort((a, b) => {
+    const order = comparator(a[0], b[0]);
+    if (order !== 0) return order;
+    return a[1] - b[1];
+  });
+  return stabilizedThis.map((el) => el[0]);
+}
+
+
+
+
+export function EnhancedTableHead(props) {
+  const { classes, onSelectAllClick, order, orderBy, numSelected, onRequestSort } = props;
+  const createSortHandler = (property) => (event) => {
+    onRequestSort(event, property);
+  };
+
+  return (
+    <TableHead>
+      <TableRow>
+        <TableCell padding="checkbox">
+          <Checkbox
+            indeterminate={numSelected > 0 && numSelected < props.rowCount}
+            checked={props.rowCount > 0 && numSelected === props.rowCount}
+            onChange={onSelectAllClick}
+            inputProps={{ 'aria-label': 'select all desserts' }}
+          />
+        </TableCell>
+        {props.headCells.map((headCell) => (
+          props.shownColumns === undefined || props.shownColumns.includes(headCell.id) || headCell.id === "id" ? (
+            <TableCell
+              key={headCell.id}
+              align={'left'}
+              padding={headCell.disablePadding ? 'none' : 'default'}
+              sortDirection={orderBy === headCell.id ? order : false}
+            >
+              <TableSortLabel
+                active={orderBy === headCell.id}
+                direction={orderBy === headCell.id ? order : 'asc'}
+                onClick={createSortHandler(headCell.id)}
+              >
+                {headCell.label}
+                {orderBy === headCell.id ? (
+                  <span className={classes.visuallyHidden}>
+                    {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+                  </span>
+                ) : null}
+              </TableSortLabel>
+            </TableCell>
+          ) : (null)
+        ))}
+      </TableRow>
+    </TableHead>
+  );
+}
+
+export function EnhancedTableRow(props){
+    
+  const labelId = `enhanced-table-checkbox-${props.index}`;
+
+  return (
+    <TableRow
+      hover
+      
+      role="checkbox"
+      aria-checked={props.isItemSelected}
+      tabIndex={-1}
+      key={props.id}
+      selected={props.isItemSelected}
+      style={props.style === undefined ? {} : props.style}
+    >
+      <TableCell padding="checkbox">
+        <Checkbox
+          onClick={(event) => props.handleClick(event, props.id)}
+          checked={props.isItemSelected}
+          inputProps={{ 'aria-labelledby': labelId }}
+        />
+      </TableCell>
+      {props.children}
+    </TableRow>
+  );
+
+}
@@ -0,0 +1,6 @@
+import {styled} from '@mui/material/styles';
+import TableCell from '@mui/material/TableCell';
+const MythicStyledTableCell = styled(TableCell, {})({
+  padding: "2px 0 2px 10px !important",
+});
+export default MythicStyledTableCell;
@@ -0,0 +1,755 @@
+import React from 'react';
+import Button from '@mui/material/Button';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import MythicTextField from './MythicTextField';
+import {useQuery, gql, useMutation} from '@apollo/client';
+import { Select, Input, MenuItem, Link, IconButton } from '@mui/material';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableRow from '@mui/material/TableRow';
+import AceEditor from 'react-ace';
+import 'ace-builds/src-noconflict/mode-json';
+import 'ace-builds/src-noconflict/theme-monokai';
+import 'ace-builds/src-noconflict/theme-xcode';
+import {useTheme} from '@mui/material/styles';
+import { snackActions } from '../utilities/Snackbar';
+import { MythicDialog } from './MythicDialog';
+import {MythicConfirmDialog} from './MythicConfirmDialog';
+import DeleteIcon from '@mui/icons-material/Delete';
+import WebhookIcon from '@mui/icons-material/Webhook';
+import Chip from '@mui/material/Chip';
+import LocalOfferOutlinedIcon from '@mui/icons-material/LocalOfferOutlined';
+import {MythicStyledTooltip} from "./MythicStyledTooltip";
+import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
+import Typography from '@mui/material/Typography';
+import MythicStyledTableCell from "./MythicTableCell";
+import {meState} from "../../cache";
+import { useReactiveVar } from '@apollo/client';
+import {MythicDraggableDialogTitle} from "./MythicDraggableDialogTitle";
+
+const createNewTagMutationTemplate = ({target_object}) => {
+  // target_object should be something like "task_id"
+  // target_object_id should be something like "89"
+  return gql`
+  mutation createNewTag($url: String!, $data: jsonb!, $source: String!, $${target_object}: Int!, $tagtype_id: Int!){
+    createTag(url: $url, data: $data, source: $source, ${target_object}: $${target_object}, tagtype_id: $tagtype_id){
+      id
+      status
+      error
+    }
+  }
+  `;
+}
+const updateTagMutationTemplate = gql`
+  mutation updateNewTag($url: String!, $data: jsonb!, $source: String!, $tag_id: Int!){
+    update_tag_by_pk(pk_columns: {id: $tag_id}, _set: {url: $url, source: $source, data: $data}){
+      id
+    }
+  }
+  `;
+const getObjectTagsQueryTemplate = ({target_object}) => {
+return gql`
+query getObjectTags ($${target_object}: Int!) {
+  tag(where: {${target_object}: {_eq: $${target_object}}}, order_by: {tagtype: {name: asc}}) {
+    source
+    url
+    id
+    data
+    tagtype {
+      name
+      description
+      color
+      id
+    }
+  }
+}
+`;
+}
+const getTagtypesQuery = gql`
+query getTagtype {
+  tagtype(order_by: {name: asc}) {
+    name
+    color
+    description
+    id
+  }
+}
+`;
+export const deleteTagMutation = gql`
+mutation deleteTag($tag_id: Int!){
+  delete_tag_by_pk(id: $tag_id){
+    id
+  }
+}
+`;
+const getSingleTag = gql`
+query getSingleTag($tag_id: Int!){
+  tag_by_pk(id: $tag_id){
+    source
+    url
+    id
+    data
+    apitokens_id
+    credential_id
+    filemeta_id
+    keylog_id
+    mythictree_id
+    operation_id
+    response_id
+    callback_id
+    payload_id
+    task_id
+    taskartifact_id
+    tagtype {
+      name
+      description
+      color
+      id
+    }
+  }
+}
+`
+export const TagsDisplay = ({tags, expand}) => {
+  return (
+      tags?.map( tt => (
+          <TagChipDisplay tag={tt} key={tt.id} expand={expand} />
+        ))
+  )
+}
+const TagChipDisplay = ({tag, expand}) => {
+  const [openTagDisplay, setOpenTagDisplay] = React.useState(false);
+  const [label, setLabel] = React.useState(expand ? tag.tagtype.name : tag.tagtype.name[0]);
+  const onSelectTag = (event, tag) => {
+    if(event){
+      event.preventDefault();
+      event.stopPropagation();
+    }
+    setOpenTagDisplay(true);
+  }
+  const onClose = (event) => {
+    if(event){
+      event.preventDefault();
+      event.stopPropagation();
+    }
+    setOpenTagDisplay(false);
+  }
+  const onMouseOver = () => {
+    if(expand === undefined || !expand){
+      setLabel(tag.tagtype.name);
+    }
+  }
+  const onMouseOut = () => {
+    if(expand === undefined || !expand){
+      setTimeout( () => {
+        setLabel(tag.tagtype.name[0]);
+      }, 10000); // wait 10s then go back to just a single letter
+    }
+  }
+  return (
+    <React.Fragment>
+      <Chip onMouseOver={onMouseOver} onMouseOut={onMouseOut} label={label} size="small" onClick={(e) => onSelectTag(e)}
+            style={{float: "right", backgroundColor:tag.tagtype.color, height: "15px"}}
+            sx={{
+              "& .MuiChip-label": {overflow: "visible"}
+            }}
+      />
+      {openTagDisplay && 
+        <MythicDialog fullWidth={true} maxWidth="xl" open={openTagDisplay}
+          onClose={onClose}
+          innerDialog={<ViewTagDialog onClose={onClose} target_object_id={tag.id}/>}
+      />}
+    </React.Fragment>
+  )
+}
+const StringTagDataEntry = ({name, value}) => {
+  // want to match markdown [display](url)
+  const regex = "^\\[.*\\]\\(.*\\)";
+  const captureRegex = "^\\[(?<display>.*)\\]\\((?<url>.*)\\)(?<other>.*)";
+  const targetRegex = ":target=[\"\'](?<target>.*?)[\"\']";
+  const colorRegex = ":color=[\"\'](?<color>.*?)[\"\']";
+  const onClick = (e, url) => {
+    e.preventDefault();
+    fetch(url).then((response) => {
+      if (response.status !== 200) {
+        snackActions.warning("HTTP " + response.status + " response");
+      } else {
+        snackActions.success("Successfully contacted url");
+      }
+    }).catch(error => {
+      if(error.toString() === "TypeError: Failed to fetch"){
+        snackActions.warning("Failed to make connection - this could be networking issues or ssl certs that need to be accepted first");
+      } else {
+        snackActions.warning("Error talking to server: " + error.toString());
+      }
+      console.log("There was an error!", error);
+    })
+  }
+  if(RegExp(regex)?.test(value)){
+    const capturePieces = RegExp(captureRegex).exec(value);
+    const targetPieces = RegExp(targetRegex).exec(capturePieces[3]);
+    const colorPieces = RegExp(colorRegex).exec(capturePieces[3]);
+    if(targetPieces && targetPieces["groups"]["target"] === "api"){
+      let color = "textPrimary";
+      if(colorPieces && colorPieces["groups"]["color"]){
+        color = colorPieces["groups"]["color"];
+      }
+      return (
+          <MythicStyledTooltip title={"Make API Request"}>
+            <WebhookIcon style={{cursor: "pointer", marginRight: "10px"}}
+                         onClick={(e) => onClick(e, capturePieces[2])}
+                         color={color}
+            />
+            {capturePieces[1]}
+          </MythicStyledTooltip>
+      )
+    }
+    return (
+          <Link href={capturePieces[2]} color="textPrimary" target={"_blank"} >{capturePieces[1]}</Link>
+    )
+  } else if(value.startsWith("http:") || value.startsWith("https:")){
+    return (
+        <>
+          {"Click for: "}
+          <Link href={value} color="textPrimary" target="_blank" >{name}</Link>
+        </>
+    )
+  }
+  return value;
+}
+function ViewTagDialog(props) {
+  const theme = useTheme();
+  const [selectedTag, setSelectedTag] = React.useState({});
+  const [objectInfo, setObjectInfo] = React.useState({object_type: "", object_id: ""});
+  const {} = useQuery(getSingleTag, {
+    variables: {tag_id: props.target_object_id},
+    onCompleted: data => {
+      if(data.tag_by_pk.apitokens_id !== null){
+        setObjectInfo({object_type: "apitokens_id", object_id: data.tag_by_pk.apitokens_id});
+      }else if(data.tag_by_pk.credential_id !== null){
+        setObjectInfo({object_type: "credential_id", object_id: data.tag_by_pk.credential_id});
+      }else if(data.tag_by_pk.filemeta_id !== null){
+        setObjectInfo({object_type: "filemeta_id", object_id: data.tag_by_pk.filemeta_id});
+      }else if(data.tag_by_pk.keylog_id !== null){
+        setObjectInfo({object_type: "keylog_id", object_id: data.tag_by_pk.keylog_id});
+      }else if(data.tag_by_pk.mythictree_id !== null){
+        setObjectInfo({object_type: "mythictree_id", object_id: data.tag_by_pk.mythictree_id});
+      }else if(data.tag_by_pk.response_id !== null){
+        setObjectInfo({object_type: "response_id", object_id: data.tag_by_pk.response_id});
+      }else if(data.tag_by_pk.task_id !== null){
+        setObjectInfo({object_type: "task_id", object_id: data.tag_by_pk.task_id});
+      }else if(data.tag_by_pk.taskartifact_id !== null){
+        setObjectInfo({object_type: "taskartifact_id", object_id: data.tag_by_pk.taskartifact_id});
+      }else if(data.tag_by_pk.payload_id !== null){
+        setObjectInfo({object_type: "payload_id", object_id: data.tag_by_pk.payload_id});
+      }else if(data.tag_by_pk.callback_id !== null){
+        setObjectInfo({object_type: "callback_id", object_id: data.tag_by_pk.callback_id});
+      }
+      let newTag = {...data.tag_by_pk};
+      let tagData = newTag;
+      try{
+        if(newTag.data.constructor === Object){
+          newTag.data = {...data.tag_by_pk.data};
+          newTag.is_json = true;
+        } else if(typeof newTag.data === "string"){
+          tagData = JSON.parse(newTag.data);
+          newTag.data = tagData;
+          newTag.is_json = true;
+        }
+
+      }catch(error){
+        newTag.is_json = false;
+      }
+      setSelectedTag(newTag);
+    },
+    onError: error => {
+      console.log("query error", error);
+    },
+    fetchPolicy: "network-only"
+  })
+  const onClose = (event) => {
+    if(event){
+      event.preventDefault();
+      event.stopPropagation();
+    }
+    props.onClose(event);
+  }
+  const stopClicks = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+  }
+return (
+  <React.Fragment>
+      <DialogTitle id="form-dialog-title" onClick={stopClicks}>View Tag</DialogTitle>
+        <TableContainer className="mythicElement" onClick={stopClicks}>
+          <Table size="small" style={{ "maxWidth": "100%", "overflow": "scroll"}}>
+              <TableBody>
+                <TableRow hover>
+                  <TableCell style={{width: "20%"}}>Tag Type</TableCell>
+                  <TableCell style={{display: "inline-flex", flexDirection: "row", width: "100%"}}>
+                    <Chip label={selectedTag?.tagtype?.name||""} size="small" style={{float: "right", backgroundColor:selectedTag?.tagtype?.color||""}} />
+                    <ViewEditTags target_object={objectInfo.object_type} target_object_id={objectInfo.object_id} me={props.me} />
+                  </TableCell>
+                </TableRow>
+                <TableRow hover>
+                  <TableCell>Description</TableCell>
+                  <TableCell>{selectedTag?.tagtype?.description || ""}</TableCell>
+                </TableRow>
+                <TableRow hover>
+                  <MythicStyledTableCell>Source</MythicStyledTableCell>
+                  <MythicStyledTableCell>
+                    {selectedTag?.source ||""}
+                  </MythicStyledTableCell>
+                </TableRow>
+                <TableRow hover>
+                  <MythicStyledTableCell>Reference URL</MythicStyledTableCell>
+                  <MythicStyledTableCell>
+                    {selectedTag?.url === "" ? (
+                        "No reference link provided"
+                    ) : (
+                        <Link href={selectedTag?.url || "#"} color="textPrimary" target="_blank" referrerPolicy='no'>{selectedTag?.url ? "click here" : "No reference link provided"}</Link>
+                    )}
+                  </MythicStyledTableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>Data</TableCell>
+                  <TableCell>
+                    {selectedTag?.is_json ? (
+                      <TableContainer  className="mythicElement">
+                        <Table size="small" style={{ "maxWidth": "100%", "overflow": "scroll"}}>
+                          <TableBody>
+                            {Object.keys(selectedTag.data).map( key => (
+                              <TableRow key={key} hover>
+                                <MythicStyledTableCell>{key}</MythicStyledTableCell>
+                                {typeof selectedTag.data[key] === "string" ? (
+                                    <MythicStyledTableCell style={{whiteSpace: "pre-wrap"}}>
+                                      <StringTagDataEntry name={key} value={String(selectedTag.data[key])} />
+                                    </MythicStyledTableCell>
+                                ) : typeof selectedTag.data[key] === "object" ? (
+                                    Array.isArray(selectedTag.data[key]) ? (
+                                        <TableCell style={{whiteSpace: "pre-wrap"}}>{JSON.stringify(selectedTag.data[key], null, 2)}</TableCell>
+                                    ) : (
+                                        <MythicStyledTableCell>
+                                          <Table size={"small"} >
+                                            <TableBody>
+                                              {Object.keys(selectedTag.data[key]).map(key2 => (
+                                                  <TableRow key={key2} >
+                                                    <MythicStyledTableCell>{key2}</MythicStyledTableCell>
+                                                    <MythicStyledTableCell>
+                                                      <StringTagDataEntry name={key2} value={String(selectedTag.data[key][key2])} />
+                                                    </MythicStyledTableCell>
+                                                  </TableRow>
+                                              ))}
+                                            </TableBody>
+
+                                          </Table>
+                                        </MythicStyledTableCell>
+                                    )
+                                ) : typeof selectedTag.data[key] === "boolean" ? (
+                                    <MythicStyledTableCell>{selectedTag.data[key] ? "True" : "False"}</MythicStyledTableCell>
+                                ) :
+                                (
+                                    <MythicStyledTableCell>{String(selectedTag.data[key])}</MythicStyledTableCell>
+                                )
+                                }
+
+                              </TableRow>
+                            ))}
+                          </TableBody>
+                        </Table>
+                      </TableContainer>
+                    ) : (
+                      <AceEditor 
+                        mode="json"
+                        theme={theme.palette.mode === "dark" ? "monokai" : "xcode"}
+                        fontSize={14}
+                        showGutter={true}
+                        maxLines={20}
+                        highlightActiveLine={false}
+                        value={selectedTag?.data || ""}
+                        width={"100%"}
+                        setOptions={{
+                          showLineNumbers: true,
+                          tabSize: 4,
+                          useWorker: false,
+                          wrapBehavioursEnabled: true,
+                          wrap: true
+                        }}/>
+                    )}
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+          </Table>
+        </TableContainer>
+      <DialogActions onClick={(e) => e.stopPropagation()}>
+        <Button onClick={onClose} variant="contained" color="primary">
+          Close
+        </Button>
+      </DialogActions>
+</React.Fragment>
+);
+}
+export function ViewEditTagsDialog(props) {
+  const theme = useTheme();
+  const [newSource, setNewSource] = React.useState("");
+  const [newURL, setNewURL] = React.useState("");
+  const [newData, setNewData] = React.useState("");
+  const [selectedTag, setSelectedTag] = React.useState("");
+  const [existingTags, setExistingTags] = React.useState([]);
+  const [openNewDialog, setOpenNewDialog] = React.useState(false);
+  const [openDelete, setOpenDeleteDialog] = React.useState(false);
+  const {} = useQuery(getObjectTagsQueryTemplate({target_object: props.target_object}), {
+    variables: {[props.target_object]: props.target_object_id},
+    onCompleted: data => {
+      setExistingTags(data.tag);
+      if(data.tag.length > 0){
+        setSelectedTag(data.tag[0]);
+        setNewSource(data.tag[0].source);
+        setNewURL(data.tag[0].url);
+        try{
+          if(typeof data.tag[0].data !== "string"){
+            setNewData(JSON.stringify(data.tag[0].data, null, 2));
+          } else {
+            setNewData(String(data.tag[0].data));
+          }
+        }catch(error){
+          setNewData(String(data.tag[0].data));
+        }
+
+      }
+    },
+    onError: error => {
+      console.log(error);
+    },
+    fetchPolicy: "network-only"
+  })
+  const [deleteTag] = useMutation(deleteTagMutation, {
+    onCompleted: data => {
+      snackActions.success("Successfully deleted tag");
+      const newTags = existingTags.filter (c => c.id !== data.delete_tag_by_pk.id);
+      setExistingTags(newTags);
+      if(newTags.length > 0){
+        setSelectedTag(newTags[0]);
+        try{
+          setNewData(JSON.stringify(newTags[0].data, null, 2));
+        }catch(error){
+          setNewData(String(newTags[0].data));
+        }
+        setNewSource(newTags[0].source);
+        setNewURL(newTags[0].url);
+      } else {
+        setSelectedTag("");
+        setNewData("");
+        setNewSource("");
+        setNewURL("");
+      }
+    },
+    onError: error => {
+      snackActions.error("Failed to delete tag: " + error.message);
+    }
+});
+  const [updateTag] = useMutation(updateTagMutationTemplate, {
+    onCompleted: data => {
+      snackActions.success("Successfully updated tag");
+      props.onClose();
+    },
+    onError: error => {
+      snackActions.error("Failed to update: " + error.message);
+    }
+  })
+
+const onSubmit = () => {
+  updateTag({variables: {tag_id: selectedTag.id, source:newSource, url:newURL, data:newData}});
+  if(props.onSubmit !== undefined){
+    props.onSubmit({source:newSource, url:newURL, data:newData, tag_id:selectedTag.id});
+  }
+}
+const onChangeSource = (name, value, error) => {
+  setNewSource(value);
+}
+const onChangeURL = (name, value, error) => {
+  setNewURL(value);
+}
+const onEditorChange = (value, event) => {
+  setNewData(value);
+}
+const handleTaskTypeChange = (evt) => {
+  setSelectedTag(evt.target.value);
+  setNewSource(evt.target.value.source);
+  setNewURL(evt.target.value.url);
+  try{
+    setNewData(JSON.stringify(evt.target.value.data, null, 2));
+  }catch(error){
+    setNewData(String(evt.target.value.data));
+  }
+}
+const handleNewTagCreate = ({tagtype_id, source, url, data, id}) => {
+  props.onClose();
+}
+const onAcceptDelete = () => {
+  deleteTag({variables: {tag_id: selectedTag.id}});
+  setOpenDeleteDialog(false);
+}
+
+return (
+  <React.Fragment>
+      <MythicDraggableDialogTitle >Edit Tags </MythicDraggableDialogTitle>
+      <DialogContent dividers={true} style={{width: "100%"}}>
+      {openNewDialog && <MythicDialog fullWidth={true} maxWidth="lg" open={openNewDialog}
+          onClose={()=>{setOpenNewDialog(false);}} 
+          innerDialog={<NewTagDialog me={props.me} 
+            target_object={props.target_object} 
+            target_object_id={props.target_object_id} 
+            onClose={()=>{setOpenNewDialog(false);}} 
+            onSubmit={handleNewTagCreate} />}
+      />}
+          <Table size="small" style={{ width: "100%", overflow: "scroll"}}>
+              <TableBody>
+                <TableRow hover>
+                  <MythicStyledTableCell style={{width: "30%"}}>Select Existing Tag to Edit or Add New</MythicStyledTableCell>
+                  <MythicStyledTableCell style={{display: "inline-flex", flexDirection: "row-reverse"}}>
+                    <MythicStyledTooltip title={"Add New Tag"}>
+                      <IconButton variant='contained' color="success" style={{float: "right"}} onClick={() => setOpenNewDialog(true)} >
+                        <AddCircleOutlineIcon />
+                      </IconButton>
+                    </MythicStyledTooltip>
+                    <Select
+                        labelId="demo-dialog-select-label"
+                        id="demo-dialog-select"
+                        value={selectedTag}
+                        onChange={handleTaskTypeChange}
+                        input={<Input />}
+                      >
+                        {existingTags.map( (opt) => (
+                            <MenuItem value={opt} key={opt.id}>
+                              <Chip label={opt.tagtype.name} size="small" style={{float: "right", backgroundColor:opt.tagtype.color}} />
+                            </MenuItem>
+                        ) )}
+                      </Select>
+                    {selectedTag.id &&
+                        <IconButton size="small" style={{float: "right"}} onClick={()=>{setOpenDeleteDialog(true);}} color="error" variant="contained"><DeleteIcon/></IconButton>
+                    }
+                      {openDelete && 
+                        <MythicConfirmDialog onClose={() => {setOpenDeleteDialog(false);}} onSubmit={onAcceptDelete} open={openDelete}/>
+                      }
+                  </MythicStyledTableCell>
+                </TableRow>
+                <TableRow hover>
+                  <MythicStyledTableCell>Tag Description</MythicStyledTableCell>
+                  <MythicStyledTableCell>{selectedTag?.tagtype?.description || ""}</MythicStyledTableCell>
+                </TableRow>
+                <TableRow hover>
+                  <MythicStyledTableCell>Source</MythicStyledTableCell>
+                  <MythicStyledTableCell>
+                    <MythicTextField value={newSource} onChange={onChangeSource} name="Source of tag data" />
+                  </MythicStyledTableCell>
+                </TableRow>
+                <TableRow hover>
+                  <MythicStyledTableCell>External URL</MythicStyledTableCell>
+                  <MythicStyledTableCell>
+                    <MythicTextField value={newURL} onChange={onChangeURL} name="External URL reference" />
+                    <Link href={newURL} color="textPrimary" target="_blank" referrerPolicy='no'>{newURL ? "click here" : ""}</Link>
+                  </MythicStyledTableCell>
+                </TableRow>
+                <TableRow hover>
+                  <MythicStyledTableCell>JSON Data</MythicStyledTableCell>
+                  <MythicStyledTableCell>
+                  <AceEditor 
+                    mode="json"
+                    theme={theme.palette.mode === "dark" ? "monokai" : "xcode"}
+                    onChange={onEditorChange}
+                    fontSize={14}
+                    showGutter={true}
+                    maxLines={20}
+                    highlightActiveLine={true}
+                    value={newData}
+                    width={"100%"}
+                    setOptions={{
+                      showLineNumbers: true,
+                      tabSize: 4,
+                      useWorker: false
+                    }}/>
+                  </MythicStyledTableCell>
+                </TableRow>
+              </TableBody>
+          </Table>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={props.onClose} variant="contained" color="primary">
+          Close
+        </Button>
+        {selectedTag.id &&
+            <Button onClick={onSubmit} variant="contained" color="success">
+              Submit
+            </Button>
+        }
+
+      </DialogActions>
+</React.Fragment>
+);
+}
+export function NewTagDialog(props) {
+    const theme = useTheme();
+    const [newSource, setNewSource] = React.useState("");
+    const [newURL, setNewURL] = React.useState("");
+    const [newData, setNewData] = React.useState("");
+    const [selectedTagType, setSelectedTagType] = React.useState("");
+    const [existingTagTypes, setExistingTagTypes] = React.useState([]);
+    const { loading, error } = useQuery(getTagtypesQuery, {
+        onCompleted: data => {
+          setExistingTagTypes(data.tagtype);
+          if(data.tagtype.length > 0){
+            setSelectedTagType(data.tagtype[0]);
+          }
+        },
+        fetchPolicy: "network-only"
+    });
+  const [newTag] = useMutation(createNewTagMutationTemplate({target_object: props.target_object}), {
+    onCompleted: data => {
+      if(data.createTag.status === "success"){
+        snackActions.success("Successfully created new tag!");
+        props.onSubmit({source:newSource, url:newURL, data:newData, tagtype_id:selectedTagType.id, id: data.createTag.id});
+        props.onClose()
+      } else {
+        snackActions.error(data.createTag.error);
+      }
+
+    },
+    onError: error => {
+      snackActions.error(error.message);
+    }
+  })
+  const handleTaskTypeChange = (evt) => {
+    setSelectedTagType(evt.target.value);
+  }
+  const onSubmit = () => {
+    newTag({variables: 
+      {source:newSource, url:newURL, data:newData, 
+      tagtype_id:selectedTagType.id, 
+      [props.target_object]: props.target_object_id
+    }})
+  }
+  const onChangeSource = (name, value, error) => {
+    setNewSource(value);
+  }
+  const onChangeURL = (name, value, error) => {
+    setNewURL(value);
+  }
+  const onEditorChange = (value, event) => {
+    setNewData(value);
+  }
+
+  return (
+    <React.Fragment>
+        <MythicDraggableDialogTitle >Add New Tag</MythicDraggableDialogTitle>
+        <DialogContent dividers={true} style={{width: "100%"}}>
+          <Table size="small" style={{ overflow: "scroll", width: "100%"}}>
+                <TableBody>
+                  <TableRow hover>
+                    <MythicStyledTableCell style={{width: "20%"}}>
+                      <Typography>
+                        Tag
+                      </Typography>
+                      <Typography  size="small" component="span" style={{fontSize: theme.typography.pxToRem(15)}}>
+                        To create a new tag type click <Link style={{wordBreak: "break-all"}}
+                                                             color="textPrimary"
+                                                             href={"/new/tagtypes"}
+                                                             underline="always" target="_blank">
+                        here
+                      </Link>
+                      </Typography>
+                    </MythicStyledTableCell>
+                    <MythicStyledTableCell>
+                      <Select
+                        labelId="demo-dialog-select-label"
+                        id="demo-dialog-select"
+                        value={selectedTagType}
+                        onChange={handleTaskTypeChange}
+                        input={<Input style={{width: "100%"}}/>}
+                      >
+                        {existingTagTypes.map( (opt) => (
+                            <MenuItem value={opt} key={opt.name}>
+                              <Chip label={opt.name} size="small" style={{ backgroundColor:opt.color}} />
+                            </MenuItem>
+                        ) )}
+                      </Select>
+                    </MythicStyledTableCell>
+                  </TableRow>
+                  <TableRow hover>
+                    <MythicStyledTableCell>Source</MythicStyledTableCell>
+                    <MythicStyledTableCell>
+                      <MythicTextField value={newSource} onChange={onChangeSource} name="Source of tag data" />
+                    </MythicStyledTableCell>
+                  </TableRow>
+                  <TableRow hover>
+                    <MythicStyledTableCell>External URL</MythicStyledTableCell>
+                    <MythicStyledTableCell>
+                      <MythicTextField value={newURL} onChange={onChangeURL} name="External URL reference" />
+                      <Link href={newURL} color="textPrimary" target="_blank" referrerPolicy='no'>{newURL}</Link>
+                    </MythicStyledTableCell>
+                  </TableRow>
+                  <TableRow hover>
+                    <MythicStyledTableCell>JSON Data</MythicStyledTableCell>
+                    <MythicStyledTableCell>
+                    <AceEditor 
+                      mode="json"
+                      theme={theme.palette.mode === "dark" ? "monokai" : "xcode"}
+                      onChange={onEditorChange}
+                      fontSize={14}
+                      showGutter={true}
+                      maxLines={20}
+                      highlightActiveLine={true}
+                      value={newData}
+                      width={"100%"}
+                      setOptions={{
+                        showLineNumbers: true,
+                        tabSize: 4,
+                        useWorker: false
+                      }}/>
+                    </MythicStyledTableCell>
+                  </TableRow>
+                </TableBody>
+            </Table>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={props.onClose} variant="contained" color="primary">
+            Close
+          </Button>
+          {selectedTagType !== "" &&
+              <Button onClick={onSubmit} variant="contained" color="success">
+                Submit
+              </Button>
+          }
+
+        </DialogActions>
+  </React.Fragment>
+  );
+}
+export const ViewEditTags = ({target_object, target_object_id}) => {
+  const me = useReactiveVar(meState);
+  const [openTagDialog, setOpenTagDialog] = React.useState(false);
+  const toggleTagDialog = (event, open) => {
+    if(event){
+      event.preventDefault();
+      event.stopPropagation();
+    }
+    setOpenTagDialog(open);
+  }
+  return(
+    <React.Fragment>
+    <IconButton onClick={(e) => toggleTagDialog(e, true)} size="small"
+                style={{display: "inline-block", float: "right", padding: "0px"}}>
+      <LocalOfferOutlinedIcon />
+    </IconButton>
+    {openTagDialog &&
+      <MythicDialog fullWidth={true} maxWidth="xl" open={openTagDialog}
+        onClose={(e)=>{toggleTagDialog(e, false)}}
+        innerDialog={<ViewEditTagsDialog me={me} target_object={target_object} target_object_id={target_object_id} onClose={(e)=>{toggleTagDialog(e, false)}} />}
+    />}
+    </React.Fragment>
+  )
+  
+}
@@ -0,0 +1,45 @@
+import React, {useState} from 'react';
+import Button from '@mui/material/Button';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import AceEditor from 'react-ace';
+import 'ace-builds/src-noconflict/mode-json';
+import 'ace-builds/src-noconflict/theme-monokai';
+import 'ace-builds/src-noconflict/theme-xcode';
+import {useTheme} from '@mui/material/styles';
+
+export function MythicTextEditDialog(props) {
+    const theme = useTheme();
+
+  return (
+    <React.Fragment>
+        <DialogTitle id="form-dialog-title">{props.title}</DialogTitle>
+        <DialogContent dividers={true} style={{padding: 0}}>
+            <AceEditor 
+              mode="json"
+              theme={theme.palette.mode === "dark" ? "monokai" : "xcode"}
+              onChange={() => {}}
+              fontSize={14}
+              showGutter={true}
+              highlightActiveLine={true}
+              value={props.value}
+              showPrintMargin={false}
+              wrapEnabled={true}
+              focus={true}
+              width={"100%"}
+              setOptions={{
+                showLineNumbers: true,
+                  useWorker: false,
+                tabSize: 4
+              }}/>
+        </DialogContent>
+        <DialogActions>
+          <Button variant="contained" onClick={props.onClose} color="primary">
+            Close
+          </Button>
+        </DialogActions>
+  </React.Fragment>
+  );
+}
+
@@ -0,0 +1,133 @@
+import React from 'react';
+import { styled } from '@mui/material/styles';
+import {TextField} from '@mui/material';
+import {useDebounce} from "../utilities/useDebounce";
+const PREFIX = 'MythicTextField';
+
+const classes = {
+    root: `${PREFIX}Div-root`,
+    textFieldRoot: `${PREFIX}-root`
+};
+
+const Root = styled('div')(({theme}) => ({
+      [`&.${classes.root}`]: {
+
+      },
+}));
+
+const ValidationTextField = styled(TextField)(({theme}) => ({
+    [`&.${classes.textFieldRoot}`]: {
+        '& fieldset': {
+            borderColor: 'grey',
+            borderWidth: 1,
+        },
+        '& input:invalid + fieldset': {
+            borderColor: 'red',
+            borderWidth: 2,
+        },
+        '& input:valid:focus + fieldset': {
+            borderLeftWidth: 6,
+            padding: '4px !important', // override inline-style
+        },
+        '& textarea:focus + textarea + fieldset': {
+            borderLeftWidth: 6,
+            //padding: '4px !important', // override inline-style
+        },
+    },
+}));
+
+const MythicTextField = ({
+                             placeholder,
+                             name,
+                             validate,
+                             width,
+                             onChange,
+                             requiredValue=false,
+                             type = "text",
+                             onEnter,
+                             autoFocus,
+                             autoComplete=false,
+                             showLabel = true,
+                             variant = "outlined",
+                             inline,
+                             marginBottom = "5px",
+                             value,
+                             disabled = false,
+                             marginTop = "5px",
+                             InputProps = {},
+                             inputLabelProps  = {},
+                             multiline = false,
+                             maxRows = 10,
+                             errorText = "",
+                             helperText = "",
+                            debounceDelay = 100,
+                         }) => {
+    const [localValue, setLocalValue] = React.useState({value: value, event: null});
+    const [localError, setLocalError] = React.useState(false);
+    const debouncedLocalInput = useDebounce(localValue, debounceDelay);
+    React.useEffect( () => {
+        const error = validate ? validate(debouncedLocalInput.value) : false;
+        onChange(name, debouncedLocalInput.value, error, debouncedLocalInput.event);
+    }, [debouncedLocalInput]);
+    React.useEffect( () => {
+        setLocalValue({value: value, event: null});
+    }, [value]);
+    const handleChange = (evt) => {
+        const newValue = evt.target.value;
+        // Update local state immediately for responsive UI
+        setLocalValue({value: newValue, event: evt});
+        setLocalError(validate ? validate(newValue) : false);
+    };
+    const onKeyPress = (event) => {
+      if(event.key === "Enter") {
+          if(event.shiftKey){
+              handleChange(event);
+              return;
+          }
+          if (onEnter !== undefined) {
+              event.stopPropagation();
+              event.preventDefault();
+              onEnter(event);
+          }
+      }else{
+          handleChange(event);
+      }
+    }
+
+    return (
+        <Root style={{width:  width ? width + "rem" : "100%", display: inline ? "inline-block": "",}}>
+            <ValidationTextField
+                fullWidth={true}
+                placeholder={placeholder}
+                value={localValue.value}
+                onChange={handleChange}
+                color={"secondary"}
+                onKeyDown={onKeyPress}
+                label={showLabel ? name : undefined}
+                autoFocus={autoFocus}
+                variant={variant}
+                data-lpignore={true}
+                autoComplete={autoComplete === undefined ? "new-password" : (autoComplete ? "on" : "off")}
+                disabled={disabled}
+                required={requiredValue}
+                InputLabelProps={inputLabelProps}
+                multiline={multiline}
+                maxRows={maxRows}
+                error={localError}
+                type={type}
+                onWheel={ event => event.target.blur() }
+                InputProps={{...InputProps, spellCheck: false}}
+                helperText={localError ? errorText : helperText}
+                style={{
+                    padding:0,
+                    marginBottom: marginBottom ? marginBottom : "5px",
+                    marginTop: marginTop ? marginTop: "5px",
+                    display: inline ? "inline-block": "",
+                }}
+                classes={{
+                    root: classes.textFieldRoot
+                }} />
+        </Root>
+    );
+}
+export default MythicTextField;
@@ -0,0 +1,256 @@
+import React, {useEffect} from 'react';
+import { styled } from '@mui/material/styles';
+import Button from '@mui/material/Button';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import Checkbox from '@mui/material/Checkbox';
+import { CardContent } from '@mui/material';
+import CardHeader from '@mui/material/CardHeader';
+import Divider from '@mui/material/Divider';
+
+const PREFIX = 'MythicTransferList';
+
+export const classes = {
+    button: `${PREFIX}-button`,
+    divider: `${PREFIX}-divider`
+};
+
+export const StyledDivider = styled(Divider)((
+    {
+        theme
+    }
+) => ({
+    [`&.${classes.divider}`]: {
+        backgroundColor: "rgb(100, 170, 204)",
+        border: "2px solid rgba(100, 170, 204)"
+    }
+}));
+export const StyledButton = styled(Button)((
+    {
+        theme
+    }
+) => ({
+    [`&.${classes.button}`]: {
+        margin: theme.spacing(0.5, 0),
+    },
+}));
+
+
+const CustomListElement = ({value, onClick, itemKey}) => {
+    const displayValue = itemKey ? value[itemKey] : value.value;
+    const labelId = `transfer-list-item-${displayValue}-label`;
+    return (
+        <ListItem style={{padding:0}} key={displayValue} role="listitem" button onClick={() => onClick(value)}>
+            <ListItemIcon>
+                <Checkbox
+                    checked={value.checked}
+                    tabIndex={-1}
+                    disableRipple
+                    inputProps={{ 'aria-labelledby': labelId }}
+                />
+            </ListItemIcon>
+            <ListItemText id={labelId} primary={displayValue} />
+        </ListItem>
+    );
+}
+const CustomList = ({title, items, left, onClick, itemKey}) => {
+
+    return (
+        <>
+            <CardHeader title={title} />
+            <StyledDivider classes={{root: classes.divider}}/>
+            <CardContent style={{flexGrow: 1, height: "100%", width: "100%", overflowY: "auto", padding: 0}}>
+                <List dense component="div" role="list" style={{padding:0, width: "100%"}}>
+                    {items.map((value, index) => (
+                        <div key={index}>
+                            {
+                                left && value.left &&
+                                <CustomListElement itemKey={itemKey} value={value} onClick={onClick}/>
+                            }
+                            {
+                                !left && value.right &&
+                                <CustomListElement itemKey={itemKey} value={value} onClick={onClick} />
+                            }
+                        </div>
+
+                    ))}
+                </List>
+            </CardContent>
+        </>
+    );
+}
+const CustomTransferList = ({leftTitle, rightTitle, initialData, parentLeftData, parentRightData, itemKey}) => {
+
+    const [data, setData] = React.useState(initialData);
+    const handleToggle = (value)  => {
+        const updatedData = data.map(d => {
+            const key = itemKey ? itemKey : "value";
+            if(value[key] === d[key]){
+                return {...d, checked: !d.checked}
+            } else {
+                return {...d}
+            }
+        });
+        setData(updatedData);
+    };
+    const handleAllRight = () => {
+        const updatedData = data.map( d => {
+            return {...d, checked: false, left: false, right: true}
+        })
+        setData(updatedData);
+    };
+    const handleCheckedRight = () => {
+        const updatedData = data.map( d => {
+            if(d.checked && d.left){
+                return {...d, checked: false, left: false, right: true};
+            } else {
+                return {...d};
+            }
+        })
+        setData(updatedData);
+    };
+    const handleCheckedLeft = () => {
+        const updatedData = data.map( d => {
+            if(d.checked && d.right){
+                return {...d, checked: false, left: true, right: false};
+            } else {
+                return {...d};
+            }
+        })
+        setData(updatedData);
+    };
+    const handleAllLeft =() => {
+        const updatedData = data.map( d => {
+            return {...d, checked: false, left: true, right: false}
+        })
+        setData(updatedData);
+    };
+    React.useEffect( () => {
+        parentLeftData.current = data.reduce( (prev, cur) => {
+            if(cur.left){return [...prev, cur]}
+            return [...prev];
+        }, []);
+        parentRightData.current = data.reduce( (prev, cur) => {
+            if(cur.right){return [...prev, cur]}
+            return [...prev];
+        }, []);
+    }, [data]);
+    React.useEffect( () => {
+        setData(initialData);
+    }, [initialData]);
+    return (
+        <div style={{display: "flex", flexDirection: "row", overflowY: "auto", flexGrow: 1, minHeight: 0}}>
+            <div  style={{paddingLeft: 0, flexGrow: 1,  marginLeft: 0, marginRight: "10px", position: "relative",  overflowY: "auto", display: "flex", flexDirection: "column" }}>
+                <CustomList title={leftTitle} left={true} items={data} onClick={handleToggle} itemKey={itemKey} />
+            </div>
+            <div style={{display: "flex", flexDirection: "column", justifyContent: "center"}}>
+                <StyledButton
+                    variant="contained"
+                    size="small"
+                    className={classes.button}
+                    onClick={handleAllRight}
+                    aria-label="move all right"
+                >
+                    &gt;&gt;
+                </StyledButton>
+                <StyledButton
+                    variant="contained"
+                    size="small"
+                    disabled={data.filter( x => x.checked && x.left).length === 0}
+                    className={classes.button}
+                    onClick={handleCheckedRight}
+                    aria-label="move selected right"
+                >
+                    &gt;
+                </StyledButton>
+                <StyledButton
+                    variant="contained"
+                    size="small"
+                    disabled={data.filter( x => x.checked && x.right).length === 0}
+                    className={classes.button}
+                    onClick={handleCheckedLeft}
+                    aria-label="move selected left"
+                >
+                    &lt;
+                </StyledButton>
+                <StyledButton
+                    variant="contained"
+                    size="small"
+                    className={classes.button}
+                    onClick={handleAllLeft}
+                    aria-label="move all left"
+                >
+                    &lt;&lt;
+                </StyledButton>
+
+            </div>
+            <div style={{marginLeft: "10px", position: "relative", flexGrow: 1, display: "flex", overflowY: "auto", flexDirection: "column" }}>
+                <CustomList title={rightTitle} left={false} items={data} onClick={handleToggle} itemKey={itemKey} />
+            </div>
+        </div>
+    )
+}
+export function MythicTransferListDialog(props) {
+    const [initialData, setInitialData] = React.useState([]);
+    const leftData = React.useRef([]);
+    const rightData = React.useRef([]);
+    const itemKey = React.useRef(props.itemKey);
+    const leftTitle = React.useRef(props.leftTitle);
+    const rightTitle = React.useRef(props.rightTitle);
+
+    useEffect( () => {
+        const leftData = props.left.map(c => {
+            if(props.itemKey){
+                return {...c, checked: false, left: true, right: false};
+            }
+            return {value: c, checked: false, left: true, right: false};
+        })
+        const rightData = props.right.map(c => {
+            if(props.itemKey){
+                return {...c, checked: false, left: false, right: true};
+            }
+            return {value: c, checked: false, left: false, right: true};
+        })
+        setInitialData([...leftData, ...rightData]);
+    }, [props.left, props.right, props.itemKey]);
+    const setFinalTags = () => {
+        const finalLeft = leftData.current.map( c => {
+            const key = itemKey.current ? itemKey.current : "value";
+            return c[key];
+        });
+        const finalRight = rightData.current.map( c => {
+            const key = itemKey.current ? itemKey.current : "value";
+            return c[key];
+        })
+      props.onSubmit({left: finalLeft, right: finalRight});
+      props.onClose();
+    }
+  return (
+    <>
+        <DialogTitle id="form-dialog-title">{props.dialogTitle}</DialogTitle>
+        <DialogContent dividers={true}>
+            <CustomTransferList initialData={initialData}
+                                parentLeftData={leftData}
+                                parentRightData={rightData}
+                                rightTitle={rightTitle.current}
+                                leftTitle={leftTitle.current}
+                                itemKey={itemKey.current}
+            />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={props.onClose} variant="contained" color="primary">
+            Close
+          </Button>
+          <Button onClick={setFinalTags} variant="contained" color="success">
+            Submit
+          </Button>
+        </DialogActions>
+  </>
+  );
+}
+
@@ -0,0 +1,56 @@
+import React from 'react';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import {milisecondsToString, useInterval } from './utilities/Time';
+import {JWTTimeLeft, GetNewToken} from '../index';
+import {FailedRefresh} from '../cache';
+import { Button } from '@mui/material';
+import { snackActions } from './utilities/Snackbar';
+
+
+export function RefreshTokenDialog(props) {
+    const mountedRef = React.useRef(true);
+    const [timeLeft, setTimeLeft] = React.useState("Loading...")
+    useInterval( () => {
+      let milisecondsLeft = JWTTimeLeft();
+      if(milisecondsLeft <= 0){
+        FailedRefresh();
+        props.onClose();
+      }else{
+        setTimeLeft(milisecondsToString(milisecondsLeft));
+      }
+      
+    }, 1000, mountedRef, mountedRef);
+    const onCommitSubmit = () => {
+      GetNewToken().then( function(result) {
+        if(result){
+          snackActions.success("Extended your session");
+        }else{
+          snackActions.error("Failed to extend your session");
+        }
+        props.onClose();
+      });
+    }
+    const onClose = () => {
+      FailedRefresh();
+      props.onClose();
+    }
+    return (
+      <React.Fragment>
+        <DialogTitle id="form-dialog-title">Session About to Expire</DialogTitle>
+        <DialogContent dividers={true}>
+          Your Session will expire in {timeLeft}
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={onClose} variant="contained" color="primary">
+            Logout
+          </Button>
+          <Button onClick={onCommitSubmit} variant="contained" color="success">
+            Extend
+          </Button>
+        </DialogActions>
+      </React.Fragment>
+    )
+}
+
@@ -0,0 +1,49 @@
+import React from 'react';
+import {useSubscription, gql } from '@apollo/client';
+import Badge from '@mui/material/Badge';
+import NotificationsActiveTwoToneIcon from '@mui/icons-material/NotificationsActiveTwoTone';
+import { useTheme } from '@mui/material/styles';
+import {alertCount} from "../cache";
+
+const SUB_Event_Logs = gql`
+subscription OperationAlertCounts{
+  operation_stream(cursor: {initial_value: {updated_at: "1970-01-01"}, ordering: ASC}, batch_size: 1) {
+    id
+    alert_count
+  }
+}
+ `;
+
+export function TopAppBarVerticalEventLogNotifications(props) {
+    const theme = useTheme();
+    const [alerts, setAlerts] = React.useState(alertCount());
+    const { loading, error } = useSubscription(SUB_Event_Logs, {
+        onError: data => {
+            console.log("vertical event log error")
+            console.error(data);
+        },
+        onData: ({data}) => {
+
+            const newAlertCount = data.data.operation_stream[0].alert_count;
+            if(newAlertCount !== alerts){
+                setAlerts(newAlertCount);
+                alertCount(newAlertCount);
+            }
+        }
+    });
+
+    return (
+            error ? (
+                <Badge color="secondary" badgeContent={"X"}>
+                    <NotificationsActiveTwoToneIcon style={{color: theme.navBarTextIconColor}} fontSize={"medium"}  />
+                </Badge>
+            ) : (
+                <Badge badgeContent={alerts}
+                       color="error" max={99}
+                >
+                    <NotificationsActiveTwoToneIcon style={{color: theme.navBarTextIconColor}} fontSize={"medium"}/>
+                </Badge>
+            )
+    );
+}
+
				`@@ -1 +0,0 @@`
				`FROM itsafeaturemythic/python38_sanic_c2profile:0.0.6`
				`@@ -1 +0,0 @@`
				`FROM itsafeaturemythic/python38_payload:0.1.1`
				`@@ -1 +0,0 @@`
				`FROM itsafeaturemythic/python38_translator_container:0.0.5`