Merge pull request #594 from je4yfc/integration

Generalized Support for external services across compose generation and port checks

.github/FUNDING.yml

@@ -0,0 +1,3 @@
+# These are supported funding model platforms
+
+github: [its-a-feature]

.github/dependabot.yml

@@ -0,0 +1,10 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "gomod"
+    directory: "/"
+    schedule:
+      interval: "weekly"

.github/workflows/docker.yml

@@ -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

.gitignore

@@ -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,15 +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.
@@ -147,4 +162,11 @@ _ReSharper*/
 *.DotSettings.user
 
 # vscode
-.vscode/
+.vscode/
+
+jupyter-docker/jupyter/MythicExamples/.ipynb_checkpoints/
+
+nginx-docker/config/blockips.conf
+/MythicReactUI/build/
+/MythicReactUI/node_modules/
+/.gocache/

Example_C2_Profile/Dockerfile

@@ -1 +0,0 @@
-FROM itsafeaturemythic/python38_sanic_c2profile:0.0.4

Example_C2_Profile/c2_code/config.json

@@ -1,17 +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": "",
-    "debug": false
-    }
-  ]
-}

Example_C2_Profile/c2_code/fake.html

@@ -1,10 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Page Not Found!</title>
-</head>
-<body>
-
-</body>
-</html>

Example_C2_Profile/c2_code/server

@@ -1,125 +0,0 @@
-#!/usr/bin/env python3
-
-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)
-    sys.stdout.flush()
-
-
-def server_error_handler(request, exception):
-    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):
-    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
-            #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
-            #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()

Example_C2_Profile/mythic/c2_functions/C2_RPC_functions.py

@@ -1,27 +0,0 @@
-from mythic_c2_container.C2ProfileBase import *
-import sys
-
-# request is a dictionary: {"action": func_name, "message": "the input",  "task_id": task id num}
-# must return an RPCResponse() object and set .status to an instance of RPCStatus and response to str of message
-async def test(request):
-    response = RPCResponse()
-    response.status = RPCStatus.Success
-    response.response = "hello"
-    #resp = await MythicCallbackRPC.MythicCallbackRPC().add_event_message(message="got a POST message")
-    return response
-
-
-# The opsec function is called when a payload is created as a check to see if the parameters supplied are good
-# The input for "request" is a dictionary of:
-# {
-#   "action": "opsec",
-#   "parameters": {
-#       "param_name": "param_value",
-#       "param_name2: "param_value2",
-#   }
-# }
-# This function should return one of two things:
-#   For success: {"status": "success", "message": "your success message here" }
-#   For error: {"status": "error", "error": "your error message here" }
-async def opsec(request):
-    return {"status": "success", "message": "No OPSEC Check Performed"}

Example_C2_Profile/mythic/c2_functions/HTTP.py

@@ -1,132 +0,0 @@
-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,
-        ),
-    ]

Example_C2_Profile/mythic/c2_service.sh

@@ -1,7 +0,0 @@
-#!/bin/bash
-
-cd /Mythic/mythic
-
-export PYTHONPATH=/Mythic:/Mythic/mythic
-
-python3.8 mythic_service.py

Example_C2_Profile/mythic/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)

Example_C2_Profile/mythic/rabbitmq_config.json

@@ -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/"
-}

Example_Payload_Type/Dockerfile

@@ -1,2 +0,0 @@
-# pull in the appropriate language's payload container from itsafeaturemythic on dockerhub
-from itsafeaturemythic/csharp_payload:0.0.11

Example_Payload_Type/agent_code/code.txt

@@ -1,2 +0,0 @@
-This is where you'd put all of your agent code
-you can have whatever directory structure, files, binaries, etc that you want here

Example_Payload_Type/mythic/agent_functions/builder.py

@@ -1,35 +0,0 @@
-from mythic_payloadtype_container.PayloadBuilder import *
-from mythic_payloadtype_container.MythicCommandBase import *
-import asyncio
-import os
-from distutils.dir_util import copy_tree
-import tempfile
-
-# define your payload type class here, it must extend the PayloadType class though
-class Atlas(PayloadType):
-
-    name = "atlas"  # name that would show up in the UI
-    file_extension = "exe"  # default file extension to use when creating payloads
-    author = "@Airzero24"  # author of the payload type
-    supported_os = [SupportedOS.Windows]  # supported OS and architecture combos
-    wrapper = False  # does this payload type act as a wrapper for another payloads inside of it?
-    wrapped_payloads = []  # if so, which payload types. If you are writing a wrapper, you will need to modify this variable (adding in your wrapper's name) in the builder.py of each payload that you want to utilize your 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
-        "version": BuildParameter(
-            name="version",
-            parameter_type=BuildParameterType.ChooseOne,
-            description="Choose a target .NET Framework",
-            choices=["4.0", "3.5"],
-        ),
-    }
-    #  the names of the c2 profiles that your agent supports
-    c2_profiles = ["HTTP"]
-    # 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.Error)
-        return resp

Example_Payload_Type/mythic/agent_functions/loadassembly.py

@@ -1,73 +0,0 @@
-from mythic_payloadtype_container.MythicCommandBase import *  # import the basics
-import json  # import any other code you might need
-# import the code for interacting with Files on the Mythic server
-from mythic_payloadtype_container.MythicFileRPC import *
-
-# create a class that extends TaskArguments class that will supply all the arguments needed for this command
-class LoadAssemblyArguments(TaskArguments):
-    def __init__(self, command_line):
-        super().__init__(command_line)
-        # this is the part where you'd add in your additional tasking parameters
-        self.args = {
-            "assembly_id": CommandParameter(
-                name="assembly_id",
-                type=ParameterType.File,
-                description="",
-                required=False,
-            )
-        }
-
-    # you must implement this function so that you can parse out user typed input into your paramters or load your parameters based on some JSON input
-    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)
-
-
-# this is information about the command itself
-class LoadAssemblyCommand(CommandBase):
-    cmd = "loadassembly"
-    needs_admin = False
-    help_cmd = "loadassembly"
-    description = "Load an arbitrary .NET assembly via Assembly.Load and track the assembly FullName to call for execution with the runassembly command. If assembly is loaded through Apfell's services -> host file, then operators can simply specify the filename from the uploaded file"
-    version = 1
-    is_exit = False
-    is_file_browse = False
-    is_process_list = False
-    is_download_file = True
-    is_remove_file = False
-    is_upload_file = False
-    author = ""
-    argument_class = LoadAssemblyArguments
-    attackmapping = []
-    browser_script = None
-
-    # this function is called after all of your arguments have been parsed and validated that each "required" parameter has a non-None value
-    async def create_tasking(self, task: MythicTask) -> MythicTask:
-        task.args.add_arg("remote_path", "")
-        if task.args.get_arg("assembly_id") is None:
-            # the user supplied an assembly name instead of uploading one, see if we can find it
-            resp = await MythicFileRPC(task).get_file_by_name(task.args.command_line)
-            if resp.status == MythicStatus.Success:
-                task.args.add_arg("assembly_id", resp.agent_file_id)
-            else:
-                raise ValueError(
-                    "Failed to find file:  {}".format(task.args.command_line)
-                )
-        else:
-            filename = json.loads(task.original_params)["assembly_id"]
-            resp = await MythicFileRPC(task).register_file(
-                file=task.args.get_arg("assembly_id"),
-                saved_file_name=filename,
-                delete_after_fetch=False,
-            )
-            if resp.status == MythicStatus.Success:
-                task.args.add_arg("assembly_id", resp.agent_file_id)
-            else:
-                raise ValueError(
-                    "Failed to register file with Mythic: {}".format(resp.error_message)
-                )
-        return task
-
-    async def process_response(self, response: AgentResponse):
-        pass

Example_Payload_Type/mythic/browser_scripts/create_table.js

@@ -1,22 +0,0 @@
-function(headers, data){
-  let output = "<table style='overflow:scroll;white-space:nowrap;width:100%;color:white' class='table-striped border border-dark shadow table-dark table-condensed'>";
-  output += "<tr>";
-  for(let i = 0; i < headers.length; i++){
-    output += "<th style='background-color:#393485;color:white;height:40px;text-align:left;padding:0px 0px 0px 20px;width:" + headers[i]['size'] + "' onclick=\"sort_table(this)\">" + headers[i]['name'].toUpperCase() + "</th>";
-  }
-  output += "</tr>";
-  for(let i = 0; i < data.length; i++){
-    output += "<tr style='text-align:left;" + data[i]['row-style'] + "'>";
-    for(let j = 0; j < headers.length; j++){
-     if(data[i]['cell-style'].hasOwnProperty(headers[j])){
-        output += "<td style='padding:0px 0px 0px 20px;" + data[i]['cell-style'][headers[j]['name']] + "'>" + data[i][headers[j]['name']] + "</td>";
-     }
-     else{
-        output += "<td style='padding:0px 0px 0px 20px'>" + data[i][headers[j]['name']] + "</td>";
-     }
-    }
-    output += "</tr>";
-  }
-  output += "</table>";
-  return output;
-}

Example_Payload_Type/mythic/mythic_service.py

@@ -1,3 +0,0 @@
-#!/usr/bin/env python3
-from mythic_payloadtype_container import mythic_service
-mythic_service.start_service_and_heartbeat()

Example_Payload_Type/mythic/payload_service.sh

@@ -1,7 +0,0 @@
-#!/bin/bash
-
-cd /Mythic/mythic
-
-export PYTHONPATH=/Mythic:/Mythic/mythic
-
-python3.8 mythic_service.py

Example_Payload_Type/mythic/rabbitmq_config.json

@@ -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/"
-}

Example_Translator/Dockerfile

@@ -1 +0,0 @@
-FROM itsafeaturemythic/python38_translator_container:0.0.3

Example_Translator/mythic/c2_functions/C2_RPC_functions.py

@@ -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:
-# { "action": "translate_from_c2_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:
-# { "action": "translate_to_c2_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}

Example_Translator/mythic/c2_service.sh

@@ -1,7 +0,0 @@
-#!/bin/bash
-
-cd /Mythic/mythic
-
-export PYTHONPATH=/Mythic:/Mythic/mythic
-
-python3.8 mythic_service.py

Example_Translator/mythic/mythic_service.py

@@ -1,3 +0,0 @@
-#!/usr/bin/env python3
-from mythic_translator_container import mythic_service
-mythic_service.start_service_and_heartbeat(debug=True)

Example_Translator/mythic/rabbitmq_config.json

@@ -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/"
-}

LICENSE

@@ -29,10 +29,113 @@ 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:
+# Licenses for other projects used:
+
+## arrgv - https://github.com/astur/arrgv
 MIT License
 
-Copyright (c) 2017 Toastr Maintainers
+Copyright (c) astur <[email protected]> (http://kozlov.am/)
+
+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://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
@@ -53,24 +156,23 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 
 
-## Wait For It - https://github.com/vishnubob/wait-for-it
-The MIT License (MIT)
-Copyright (c) 2016 Giles Hall
+
+# 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:
+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.
+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.

Makefile

@@ -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 ../

MythicReactUI/Dockerfile

@@ -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

MythicReactUI/README.md

@@ -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

MythicReactUI/config-overrides.js

@@ -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;
+}

MythicReactUI/package.json

@@ -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"
+    ]
+  }
+}

MythicReactUI/public/index.html

@@ -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>

MythicReactUI/src/assets/Mythic_Logo.svg

@@ -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>

MythicReactUI/src/cache.js

@@ -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();
+    }
+
+}
+

MythicReactUI/src/components/App.js

@@ -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>
+    );
+}

MythicReactUI/src/components/EventFeedNotifications.js

@@ -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
+}
+

MythicReactUI/src/components/MythicComponents/MythicAgentSVGIcon.js

@@ -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>
+
+
+    )
+}

MythicReactUI/src/components/MythicComponents/MythicConfirmDialog.js

@@ -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>
+  } />
+  );
+}

MythicReactUI/src/components/MythicComponents/MythicDialog.js

@@ -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);
+};

MythicReactUI/src/components/MythicComponents/MythicDisplayTextDialog.js

@@ -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} />
+  } />
+  );
+}

MythicReactUI/src/components/MythicComponents/MythicDraggableDialogTitle.js

@@ -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>
+    )
+}

MythicReactUI/src/components/MythicComponents/MythicDraggableList.js

@@ -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;
+};

MythicReactUI/src/components/MythicComponents/MythicFeedbackDialog.js

@@ -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>
+  );
+}

MythicReactUI/src/components/MythicComponents/MythicFileBrowserVirtualTree.js

@@ -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);

MythicReactUI/src/components/MythicComponents/MythicFileContext.js

@@ -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} />}
+                />
+            }
+        </>
+    )
+}

MythicReactUI/src/components/MythicComponents/MythicFileUpload.js

@@ -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;
+  }
+}

MythicReactUI/src/components/MythicComponents/MythicNestedMenus.js

@@ -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)`
+
+`;

MythicReactUI/src/components/MythicComponents/MythicPageBody.js

@@ -0,0 +1,13 @@
+
+export const MythicPageBody = ({children}) => {
+    return (
+        <div style={{
+            height: "100%",
+            display: "flex",
+            flexDirection: "column",
+            margin: "0.5rem",
+        }}>
+            {children}
+        </div>
+    )
+}

MythicReactUI/src/components/MythicComponents/MythicPageHeader.js

@@ -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>
+    )
+
+}

MythicReactUI/src/components/MythicComponents/MythicResizableGrid/Cell.js

@@ -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>
+ */

MythicReactUI/src/components/MythicComponents/MythicResizableGrid/DraggableHandles.js

@@ -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;

MythicReactUI/src/components/MythicComponents/MythicResizableGrid/HeaderCell.js

@@ -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;

MythicReactUI/src/components/MythicComponents/MythicResizableGrid/MythicResizableGrid.js

@@ -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;

MythicReactUI/src/components/MythicComponents/MythicResizableGrid/index.js

@@ -0,0 +1,3 @@
+import MythicResizableGrid from './MythicResizableGrid';
+
+export default MythicResizableGrid;

MythicReactUI/src/components/MythicComponents/MythicResizableGrid/styles.js

@@ -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`,
+}

MythicReactUI/src/components/MythicComponents/MythicSavedUserSetting.js

@@ -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}});
+        }
+        ]
+}

MythicReactUI/src/components/MythicComponents/MythicSelectFromListDialog.js

@@ -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>
+);
+}

MythicReactUI/src/components/MythicComponents/MythicSnackDownload.js

@@ -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>
+    );
+};

MythicReactUI/src/components/MythicComponents/MythicStyledTooltip.js

@@ -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>
+
+)
+}

MythicReactUI/src/components/MythicComponents/MythicTabPanel.js

@@ -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}
+        />
+    );
+}

MythicReactUI/src/components/MythicComponents/MythicTable.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import TableCell from '@material-ui/core/TableCell';
-import TableHead from '@material-ui/core/TableHead';
-import TableRow from '@material-ui/core/TableRow';
-import TableSortLabel from '@material-ui/core/TableSortLabel';
-import Checkbox from '@material-ui/core/Checkbox';
+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) {
@@ -53,7 +53,7 @@ export function EnhancedTableHead(props) {
           />
         </TableCell>
         {props.headCells.map((headCell) => (
-          props.shownColumns === undefined || props.shownColumns.includes(headCell.id) ? (
+          props.shownColumns === undefined || props.shownColumns.includes(headCell.id) || headCell.id === "id" ? (
             <TableCell
               key={headCell.id}
               align={'left'}
@@ -87,7 +87,7 @@ export function EnhancedTableRow(props){
   return (
     <TableRow
       hover
-      onClick={(event) => props.handleClick(event, props.id)}
+      
       role="checkbox"
       aria-checked={props.isItemSelected}
       tabIndex={-1}
@@ -97,6 +97,7 @@ export function EnhancedTableRow(props){
     >
       <TableCell padding="checkbox">
         <Checkbox
+          onClick={(event) => props.handleClick(event, props.id)}
           checked={props.isItemSelected}
           inputProps={{ 'aria-labelledby': labelId }}
         />

MythicReactUI/src/components/MythicComponents/MythicTableCell.js

@@ -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;

MythicReactUI/src/components/MythicComponents/MythicTag.js

@@ -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>
+  )
+  
+}

MythicReactUI/src/components/MythicComponents/MythicTextEditDialog.js

@@ -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>
+  );
+}
+

MythicReactUI/src/components/MythicComponents/MythicTextField.js

@@ -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;

MythicReactUI/src/components/MythicComponents/MythicTransferList.js

@@ -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>
+  </>
+  );
+}
+

MythicReactUI/src/components/RefreshTokenDialog.js

@@ -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>
+    )
+}
+

MythicReactUI/src/components/TopAppBarEventLogNotifications.js

@@ -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>
+            )
+    );
+}
+

MythicReactUI/src/components/pages/BrowserScripts/BrowserScripts.js

@@ -0,0 +1,151 @@
+import React  from 'react';
+import { gql, useMutation, useSubscription } from '@apollo/client';
+import {BrowserScriptsTable} from './BrowserScriptsTable';
+import {snackActions} from '../../utilities/Snackbar';
+import { Backdrop } from '@mui/material';
+import {CircularProgress} from '@mui/material';
+import {MythicPageBody} from "../../MythicComponents/MythicPageBody";
+
+
+const SUB_BrowserScripts = gql`
+subscription SubscribeBrowserScripts($operator_id: Int!) {
+  browserscript(where: {operator_id: {_eq: $operator_id}, for_new_ui: {_eq: true}}, order_by: {payloadtype: {name: asc}}) {
+    active
+    author
+    user_modified
+    script
+    payloadtype {
+      name
+      id
+    }
+    id
+    creation_time
+    container_version_author
+    container_version
+    command {
+      cmd
+      id
+    }
+  }
+}
+ `;
+
+const updateBrowserScriptActive = gql`
+mutation updateBrowserScriptActive($browserscript_id: Int!, $active: Boolean!) {
+  update_browserscript_by_pk(pk_columns: {id: $browserscript_id}, _set: {active: $active}) {
+    id
+  }
+}
+`;
+const updateBrowserScriptScript = gql`
+mutation updateBrowserScriptScript($browserscript_id: Int!, $script: String!, $command_id: Int!, $payload_type_id: Int!) {
+  update_browserscript_by_pk(pk_columns: {id: $browserscript_id}, _set: {script: $script, user_modified: true, command_id: $command_id, payload_type_id: $payload_type_id}) {
+    id
+  }
+}
+`;
+const updateBrowserScriptRevert = gql`
+mutation updateBrowserScriptRevert($browserscript_id: Int!, $script: String!) {
+  update_browserscript_by_pk(pk_columns: {id: $browserscript_id}, _set: {script: $script, user_modified: false}) {
+    id
+  }
+}
+`;
+const addBrowserScript = gql`
+mutation insertNewBrowserScript($script: String!, $payload_type_id: Int!, $command_id: Int!, $author: String!){
+  insert_browserscript_one(object: {script: $script, payload_type_id: $payload_type_id, command_id: $command_id, author: $author}){
+    id
+  }
+}
+`;
+
+
+export function BrowserScripts({me}){
+    const [browserScripts, setBrowserScripts] = React.useState([]);
+    const mountedRef = React.useRef(true);
+    const [backdropOpen, setBackdropOpen] = React.useState(true);
+    useSubscription(SUB_BrowserScripts, {
+      variables: {operator_id: me?.user?.id || 0}, fetchPolicy: "no-cache",
+      shouldResubscribe: true,
+      onSubscriptionData: ({subscriptionData}) => {
+        //console.log(subscriptionData)
+        if(!mountedRef.current){return}
+        let scripts = [...subscriptionData.data.browserscript];
+        scripts.sort((a,b) => {
+          if(a.payloadtype.name === b.payloadtype.name){
+            return a.command.cmd.localeCompare(b.command.cmd);
+          }else{
+            return 0;
+          }
+        } )
+        setBrowserScripts(scripts);
+        setBackdropOpen(false);
+      }
+    });
+    const [toggleActive] = useMutation(updateBrowserScriptActive, {
+        onCompleted: data => {
+            snackActions.success("Successfully Updated!", {autoHideDuration: 1000});
+        },
+        onError: data => {
+            console.error(data);
+            snackActions.error("Failed to update status");
+        }
+    });
+    const [updateScript] = useMutation(updateBrowserScriptScript, {
+        onCompleted: data => {
+            snackActions.success("Successfully Updated!", {autoHideDuration: 1000});
+        },
+        onError: data => {
+            console.error(data);
+            snackActions.error("Failed to update script");
+        }
+    });
+    const [revertScript] = useMutation(updateBrowserScriptRevert, {
+        onCompleted: data => {
+            snackActions.success("Successfully Updated!", {autoHideDuration: 1000});
+        },
+        onError: data => {
+            console.error(data);
+            snackActions.error("Failed to revert script");
+        }
+    });
+    const [createBrowserScript] = useMutation(addBrowserScript, {
+      onCompleted: data => {
+        snackActions.success("Successfully created new browser script!");
+      },
+      onError: data => {
+        snackActions.error("Failed to create new script: " + data);
+      }
+    });
+    const onToggleActive = ({browserscript_id, active}) => {
+        setBackdropOpen(true);
+        toggleActive({variables: {browserscript_id, active}});
+    }
+    const onSubmitEdit = ({browserscript_id, script, command_id, payload_type_id}) => {
+        updateScript({variables: {browserscript_id, script, command_id, payload_type_id}});
+    }
+    const onRevert = ({browserscript_id, script}) => {
+        revertScript({variables:{browserscript_id, script}});
+    }
+    const onSubmitCreateNewBrowserScript = ({script, payload_type_id, command_id}) => {
+      createBrowserScript({variables: {author: me?.user?.username || "", script, payload_type_id, command_id}});
+    }
+    React.useRef( () => {
+      return () => {
+        mountedRef.current = false;
+      }
+    }, [])
+    return (
+    <MythicPageBody>
+        <Backdrop open={backdropOpen} style={{zIndex: 2, position: "absolute"}} invisible={false}>
+            <CircularProgress color="inherit" />
+        </Backdrop>
+        <BrowserScriptsTable
+            browserscripts={browserScripts} operation_id={me?.user?.current_operation_id || 0} onToggleActive={onToggleActive}
+            me={me}
+            onSubmitEdit={onSubmitEdit} onRevert={onRevert} onSubmitNew={onSubmitCreateNewBrowserScript}
+        />
+
+    </MythicPageBody>
+    );
+}

MythicReactUI/src/components/pages/BrowserScripts/BrowserScriptsTable.js

@@ -0,0 +1,66 @@
+import React  from 'react';
+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 Typography from '@mui/material/Typography';
+import { BrowserScriptsTableRow } from './BrowserScriptsTableRow';
+import {useTheme} from '@mui/material/styles';
+import AddCircleIcon from '@mui/icons-material/AddCircle';
+import Button from '@mui/material/Button';
+import { MythicDialog } from '../../MythicComponents/MythicDialog';
+import {EditScriptDialog} from './EditScriptDialog';
+import {MythicPageHeader} from "../../MythicComponents/MythicPageHeader";
+
+
+export function BrowserScriptsTable(props){
+    const theme = useTheme();
+    const [openNewScriptDialog, setOpenNewScriptDialog] = React.useState(false);
+    return (
+        <>
+            <MythicPageHeader title={"Browser Scripts"}>
+                <Button size="small" onClick={() => setOpenNewScriptDialog(true)} style={{whiteSpace: "nowrap", color: "white"}}
+                        startIcon={<AddCircleIcon color={"success"} style={{backgroundColor: "white", borderRadius: "10px"}}/>} >
+                    New Script
+                </Button>
+                {openNewScriptDialog &&
+                    <MythicDialog fullWidth={true} maxWidth="xl" open={openNewScriptDialog}
+                        onClose={()=>{setOpenNewScriptDialog(false);}} 
+                        innerDialog={
+                            <EditScriptDialog me={props.me} onClose={()=>{setOpenNewScriptDialog(false);}} title="Create New Browser Script" new={true} onSubmitEdit={props.onSubmitNew} />
+                        } />
+                }
+            </MythicPageHeader>
+            <TableContainer className="mythicElement" style={{height: "100%", flexGrow: 1}}>
+            <Table stickyHeader={true} size="small" style={{"tableLayout": "fixed", "maxWidth": "100%", "overflow": "scroll"}}>
+                <TableHead>
+                    <TableRow>
+                        <TableCell style={{width: "3rem"}}>Edit</TableCell>
+                        <TableCell style={{width: "5rem"}}>Active</TableCell>
+                        <TableCell style={{width: "5rem"}}>Payload</TableCell>
+                        <TableCell style={{width: "20rem"}}>Command</TableCell>
+                        <TableCell style={{width: "12rem"}}> Author</TableCell>
+                        <TableCell style={{textAlign: "left"}}>User Modified?</TableCell>
+                    </TableRow>
+                </TableHead>
+                <TableBody>
+                {props.browserscripts.map( (op) => (
+                    <BrowserScriptsTableRow
+                        me={props.me}
+                        operation_id={props.operation_id} onToggleActive={props.onToggleActive}
+                        onSubmitEdit={props.onSubmitEdit} onRevert={props.onRevert}
+                        key={"script" + op.id}
+                        {...op}
+                    />
+                ))}
+                </TableBody>
+            </Table>
+            </TableContainer>
+        </>
+        
+    )
+}
+

MythicReactUI/src/components/pages/BrowserScripts/BrowserScriptsTableRow.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Switch} from '@mui/material';
+import TableCell from '@mui/material/TableCell';
+import TableRow from '@mui/material/TableRow';
+import { MythicDialog } from '../../MythicComponents/MythicDialog';
+import {EditScriptDialog} from './EditScriptDialog';
+import SettingsIcon from '@mui/icons-material/Settings';
+import IconButton from '@mui/material/IconButton';
+import {MythicStyledTooltip} from "../../MythicComponents/MythicStyledTooltip";
+import {MythicAgentSVGIcon} from "../../MythicComponents/MythicAgentSVGIcon";
+
+export function BrowserScriptsTableRow(props){
+    const [openEdit, setOpenEdit] = React.useState(false);
+    const onSubmitEdit = ({script, command_id, payload_type_id}) => {
+        props.onSubmitEdit({browserscript_id: props.id, script, command_id, payload_type_id});
+    }
+    const onRevert = () => {
+        props.onRevert({browserscript_id: props.id, script: props.container_version});
+    }
+    const onToggleActive = () => {
+        props.onToggleActive({browserscript_id: props.id, active: !props.active});
+    }
+    return (
+        <React.Fragment>
+            <TableRow key={"payload" + props.id} hover>
+                <TableCell >
+                    <IconButton size="small" onClick={()=>{setOpenEdit(true);}} color="info" variant="contained"><SettingsIcon color="info" /></IconButton>
+                </TableCell>
+                <TableCell >
+                    <Switch
+                        checked={props.active}
+                        onChange={onToggleActive}
+                        color="info"
+                        inputProps={{ 'aria-label': 'checkbox', "track": "white" }}
+                        name="Active"
+                      />
+                </TableCell>
+                <TableCell>
+                    <MythicStyledTooltip title={props.payloadtype.name}>
+                        <MythicAgentSVGIcon payload_type={props.payloadtype.name} style={{width: "35px", height: "35px"}} />
+                    </MythicStyledTooltip>
+                </TableCell>
+                <TableCell>{props.command.cmd}</TableCell>
+                <TableCell>{props.author}</TableCell>
+                <TableCell>{props.user_modified ? "User Modified" : "" } </TableCell>
+
+                {openEdit &&
+                    <MythicDialog fullWidth={true} maxWidth="xl" open={openEdit} 
+                        onClose={()=>{setOpenEdit(false);}} 
+                        innerDialog={
+                            <EditScriptDialog me={props.me} onClose={()=>{setOpenEdit(false);}} payload_type_id={props.payloadtype.id} command_id={props.command.id}
+                                script={props.script} onSubmitEdit={onSubmitEdit} onRevert={onRevert} author={props.author}/>
+                        } />
+                    }
+            </TableRow>
+        </React.Fragment>
+        )
+}
+

MythicReactUI/src/components/pages/BrowserScripts/EditScriptDialog.js

@@ -0,0 +1,310 @@
+import React, {useEffect, useRef} 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-javascript";
+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 { gql, useQuery, useLazyQuery } from '@apollo/client';
+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 Split from 'react-split';
+import {TaskDisplay} from "../Callbacks/TaskDisplay";
+import {taskingDataFragment} from '../Callbacks/CallbackMutations'
+
+
+
+const getCommandsAndPayloadTypesQuery = gql`
+query getCommandsAndPayloadTypes{
+  payloadtype(where: {deleted: {_eq: false}, wrapper: {_eq: false}}, order_by: {name: asc}){
+    id
+    name
+    commands(order_by: {cmd: asc}){
+      id
+      cmd
+    }
+  }
+}
+`;
+const getExistingTasksForCommand = gql`
+${taskingDataFragment}
+query getAvailableTasks($command_id: Int!){
+    task(order_by: {display_id: desc}, where: {command_id: {_eq: $command_id}}) {
+        ...taskData
+  }
+}
+`;
+
+export function EditScriptDialog(props) {
+    const theme = useTheme();
+    const [script, setScript] = React.useState("");
+    const [selectedPayloadType, setSelectedPayloadType] = React.useState('');
+    const [selectedCommand, setSelectedCommand] = React.useState('');
+    const [payloadTypeCmdOptions, setPayloadTypeCmdOptions] = React.useState([]);
+    const [commandOptions, setCommandOptions] = React.useState([]);
+    const inputPTRef = useRef(null); 
+    const inputCMDRef = useRef(null);
+    const inputTaskRef = useRef(null);
+    const [availableTasks, setAvailableTasks] = React.useState([]);
+    const [selectedTask, setSelectedTask] = React.useState('');
+    useQuery(getCommandsAndPayloadTypesQuery, {
+      onCompleted: data => {
+        setPayloadTypeCmdOptions(data.payloadtype);
+        if(props.payload_type_id !== undefined){
+          setSelectedPayloadType(props.payload_type_id);
+        }else{
+          if(data.payloadtype.length > 0){
+            setSelectedPayloadType(data.payloadtype[0].id);
+          }
+        }
+        if(props.command_id !== undefined){
+          setSelectedCommand(props.command_id);
+          for(let i = 0; i < data.payloadtype.length; i++){
+            if(props.payload_type_id === data.payloadtype[i].id){
+              setCommandOptions(data.payloadtype[i].commands)
+            }
+          }
+        }else{
+          if(data.payloadtype.length > 0){
+            if(data.payloadtype[0].commands.length > 0){
+              setCommandOptions(data.payloadtype[0].commands);
+              setSelectedCommand(data.payloadtype[0].commands[0].id);
+            }
+          }
+        }
+      },
+      onError: data => {
+
+      }
+    });
+    const [getAvailableTasks] = useLazyQuery(getExistingTasksForCommand, {
+        onCompleted: data => {
+            setAvailableTasks(data.task);
+            if(data.task.length > 0){
+                setSelectedTask(data.task[0]);
+            }
+        },
+        onError: data => {
+
+        }
+    });
+    const editorRef = useRef(null);
+    const outputRef = useRef(null);
+    const [logOutput, setLogOutput] = React.useState("console.log messages:\n");
+    const logStreamRef = React.useRef("console.log messages:\n");
+    useEffect( () => {
+        if(selectedCommand !== ""){
+            getAvailableTasks({variables: {command_id: selectedCommand}})
+        }
+
+    }, [selectedCommand]);
+    useEffect( () => {
+        if(props.script !== undefined){
+          try{
+            //setScript(atob(props.script));
+            setScript(decodeURIComponent(window.atob(props.script)));
+          }catch(error){
+            setScript(props.script);
+          }
+        }        
+    }, [props.script]);
+    const onChange = (value) => {
+        setScript(value);
+    }
+    const onSubmit = () => {
+        //let newScript = window.btoa(encodeURIComponent(script));
+        //props.onSubmitEdit({script: newScript, command_id: selectedCommand, payload_type_id: selectedPayloadType});
+        props.onSubmitEdit({script: script, command_id: selectedCommand, payload_type_id: selectedPayloadType});
+        props.onClose();
+    }
+    const onTest = () => {
+        //let newScript = window.btoa(encodeURIComponent(script));
+        //props.onSubmitEdit({script: newScript, command_id: selectedCommand, payload_type_id: selectedPayloadType});
+        props.onSubmitEdit({script: script, command_id: selectedCommand, payload_type_id: selectedPayloadType});
+        logStreamRef.current = "console.log messages:\n";
+        setLogOutput(logStreamRef.current);
+    }
+    const onRevert = () => {
+        props.onRevert();
+        props.onClose();
+    }
+    const onChangeSelectedPayloadType = (event) => {
+      setSelectedPayloadType(event.target.value);
+      const cmds = payloadTypeCmdOptions.filter( (p) => p.id === event.target.value);
+      setCommandOptions(cmds[0].commands);
+      setSelectedCommand(cmds[0].commands[0].id);
+    }
+    const onChangeTask = (event) => {
+        setSelectedTask(event.target.value);
+    }
+    const onChangeSelectedCommand = (event) => {
+      setSelectedCommand(event.target.value);
+    }
+    const onLoad = (editor) => {
+        // Your editor options comes here
+        editor.on('change', (arg, activeEditor) => {
+            editorRef.current = activeEditor;
+            editor.removeEventListener('change');
+            editorRef.current.resize();
+        });
+    }
+    const onOutputLoad = (editor) => {
+        // Your editor options comes here
+        editor.on('change', (arg, activeEditor) => {
+            outputRef.current = activeEditor;
+            editor.removeEventListener('change');
+            outputRef.current.resize();
+        });
+    }
+    React.useEffect( () => {
+
+        var logBackup = console.log;
+        console.log = function(msg) {
+            logStreamRef.current += "\n" + msg;
+            logBackup.apply(msg);
+            setLogOutput(logStreamRef.current)
+        };
+
+
+    }, []);
+
+    const onDragging = () => {
+        if(editorRef.current){
+            editorRef.current.resize();
+        }
+        if(outputRef.current){
+            outputRef.current.resize();
+        }
+    }
+  return (
+    <React.Fragment>
+        <DialogTitle >
+          {props.title ? props.title : "Edit " + props.author + "'s BrowserScript Code"}
+          </DialogTitle>
+        <DialogContent dividers={true} style={{height: `calc(100vh)`, display: "flex", flexDirection: "column", width: "100%"}}>
+            <div style={{display: "flex"}}>
+                <FormControl style={{width: "50%"}}>
+                    <InputLabel ref={inputPTRef}>Payload Type</InputLabel>
+                    <Select
+                        labelId="demo-dialog-select-label"
+                        id="demo-dialog-select"
+                        value={selectedPayloadType}
+                        onChange={onChangeSelectedPayloadType}
+                        input={<Input style={{width: "100%"}}/>}
+                    >
+                        {payloadTypeCmdOptions.map( (opt) => (
+                            <MenuItem value={opt.id} key={"payloadtype" + opt.id}>{opt.name}</MenuItem>
+                        ) )}
+                    </Select>
+                </FormControl>
+                <FormControl style={{width: "50%", paddingBottom: "10px"}}>
+                    <InputLabel ref={inputCMDRef}>Command</InputLabel>
+                    <Select
+                        labelId="demo-dialog-select-label"
+                        id="demo-dialog-select"
+                        value={selectedCommand}
+                        onChange={onChangeSelectedCommand}
+                        input={<Input style={{width: "100%"}}/>}
+                    >
+                        {commandOptions.map( (opt) => (
+                            <MenuItem value={opt.id} key={"command" + opt.id}>{opt.cmd}</MenuItem>
+                        ) )}
+                    </Select>
+                </FormControl>
+            </div>
+            <p>
+                <b>To test locally</b>: Make your changes in the top left code box. Any <b>console.log</b> entries will appear in the box to the right when executed.
+                Click <b>Save for Testing</b> to finalize your changes. Make sure to select an already executed task that matches this command from the bottom.
+                You will need to collapse and re-expand the task to pull in your updated changes.
+            </p>
+            <div style={{display: "flex", width: "100%", flexGrow: 1}}>
+                <Split direction="vertical" style={{height: "100%", width: "100%"}} sizes={[30, 70]} onDrag={onDragging} >
+                    <Split style={{display: "flex"}} sizes={[70, 30]} onDrag={onDragging} >
+                        <div className="bg-gray-light">
+                            <AceEditor
+                                mode="javascript"
+                                theme={theme.palette.mode === 'dark' ? 'monokai' : 'github'}
+                                width="100%"
+                                onLoad={onLoad}
+                                height="100%"
+                                value={script}
+                                focus={true}
+                                onChange={onChange}
+                                setOptions={{
+                                    useWorker: false
+                                }}
+                            />
+                        </div>
+                        <div className="bg-gray-light"   >
+                            <AceEditor
+                                mode="javascript"
+                                theme={theme.palette.mode === 'dark' ? 'monokai' : 'github'}
+                                width="100%"
+                                onLoad={onOutputLoad}
+                                height="100%"
+                                value={logOutput}
+                                focus={false}
+                                onChange={onChange}
+                                setOptions={{
+                                    useWorker: false
+                                }}
+                            />
+                        </div>
+                    </Split>
+                    <div className="bg-gray-light" >
+                        <FormControl style={{width: "100%"}}>
+                            <InputLabel ref={inputTaskRef} style={{paddingTop: "10px"}}>Test Script With Task</InputLabel>
+                            <Select
+                                labelId="demo-dialog-select-label"
+                                id="demo-dialog-select"
+                                value={selectedTask}
+                                onChange={onChangeTask}
+                                input={<Input style={{width: "100%"}}/>}
+                            >
+                                {availableTasks.map( (opt) => (
+                                    <MenuItem value={opt} key={"task" + opt.id}>{opt.command_name + " / " + opt.display_id + " / " + opt.display_params}</MenuItem>
+                                ) )}
+                            </Select>
+                        </FormControl>
+                        {selectedTask !== "" &&
+                            <TaskDisplay me={props.me} task={selectedTask} command_id={selectedTask.command == null ? 0 : selectedTask.command.id} />
+                        }
+                    </div>
+                </Split>
+            </div>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={props.onClose} variant="contained" color="primary">
+            Close
+          </Button>
+          {props.new ? (
+            <Button onClick={onSubmit} variant="contained" color="success">
+              Create
+          </Button>
+          ) : (
+            <React.Fragment>
+              <Button onClick={onRevert} variant="contained" color="warning">
+                Revert
+              </Button>
+                <Button onClick={onTest} variant="contained" color="info">
+                    Save For Testing
+                </Button>
+              <Button onClick={onSubmit} variant="contained" color="success">
+                Save and Exit
+              </Button>
+            </React.Fragment>
+          )}
+          
+        </DialogActions>
+  </React.Fragment>
+  );
+}
+
+

MythicReactUI/src/components/pages/Callbacks/AddRemoveCallbackCommandsDialog.js

@@ -0,0 +1,253 @@
+import React, {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 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 CardHeader from '@mui/material/CardHeader';
+import {gql, useQuery} from '@apollo/client';
+import { CardContent } from '@mui/material';
+import {classes, StyledButton, StyledDivider} from '../../MythicComponents/MythicTransferList';
+import {MythicDraggableDialogTitle} from "../../MythicComponents/MythicDraggableDialogTitle";
+
+const getCommandsQuery = gql`
+query GetCallbackDetails($callback_id: Int!) {
+  callback_by_pk(id: $callback_id){
+    loadedcommands {
+      command {
+        cmd
+        payloadtype {
+            name
+        }
+        id
+      }
+      id
+    }
+    payload {
+      payloadtype {
+        name
+        commands(where: {deleted: {_eq: false}}) {
+          cmd
+          id
+        }
+      }
+    }
+  }
+  command(where: {deleted: {_eq: false}, payloadtype: {agent_type: {_eq: "command_augment"}}}){
+    cmd
+    id
+    payloadtype {
+        name
+    }
+  }
+}
+`;
+const CustomListElement = React.memo(({valueObj, handleToggle}) => {
+    return (
+        <ListItem style={{padding: 0}} key={valueObj.display_value} role="listitem" button
+                  onClick={() => handleToggle(valueObj)}>
+            <ListItemIcon>
+                <Checkbox
+                    checked={valueObj.checked}
+                    disableRipple
+                    inputProps={{'aria-labelledby': valueObj.label}}
+                />
+            </ListItemIcon>
+            <ListItemText id={valueObj.label} primary={valueObj.display_value}/>
+        </ListItem>
+    )
+});
+const CustomList = ({title, items, handleToggle}) => {
+    const renderedList = React.useMemo( () => {
+        return items.map((valueObj) => (
+                <CustomListElement key={valueObj.display_value} valueObj={valueObj} handleToggle={handleToggle} />
+            ))
+    }, [items, handleToggle]);
+    return (
+        <>
+            <CardHeader className={classes.cardHeader} title={title}/>
+            <StyledDivider classes={{root: classes.divider}}/>
+            <CardContent style={{flexGrow: 1, overflowY: "auto", padding: 0}}>
+                <List dense component="div" role="list" style={{padding: 0, width: "100%"}}>
+                    {renderedList}
+                </List>
+            </CardContent>
+        </>
+        )
+};
+export function AddRemoveCallbackCommandsDialog(props) {
+    const [left, setLeft] = React.useState([]);
+    const [originalRight, setOriginalRight] = React.useState([]);
+    const [right, setRight] = React.useState([]);
+    const leftTitle = "Commands Not Included";
+    const rightTitle = "Commands Included";
+
+    useQuery(getCommandsQuery, {variables: {callback_id: props.callback_id},
+      fetchPolicy: "no-cache",
+      onCompleted: (data) => {
+        let originalLeftFromQuery = data.callback_by_pk.payload.payloadtype.commands.map(c => {
+            return {...c, payloadtype: {name: data.callback_by_pk.payload.payloadtype.name}}
+        })
+        originalLeftFromQuery = [...originalLeftFromQuery, ...data.command];
+        setOriginalRight(data.callback_by_pk.loadedcommands);
+
+        let leftData = originalLeftFromQuery.reduce( (prev, cur) => {
+          if( data.callback_by_pk.loadedcommands.filter(c => c.command.cmd === cur.cmd && c.command.payloadtype.name === cur.payloadtype.name).length === 0){
+            return [...prev, cur];
+          } else {
+            return [...prev];
+          }
+        }, []);
+
+        leftData.sort( (a,b) => a.cmd < b.cmd ? -1 : 1);
+        leftData = leftData.map( c => {return {...c,
+            checked: false,
+            display_value: c.cmd + " (" + c?.payloadtype?.name + ")",
+            label: `transfer-list-item-${c.cmd + " (" + c?.payloadtype?.name + ")"}-label`
+        }});
+        setLeft(leftData);
+        let rightData = data.callback_by_pk.loadedcommands.map( c => c.command);
+        rightData.sort( (a,b) => a.cmd < b.cmd ? -1 : 1);
+          rightData = rightData.map( c => {return {...c,
+          checked: false,
+          display_value: c.cmd + " (" + c?.payloadtype?.name + ")",
+          label: `transfer-list-item-${c.cmd + " (" + c?.payloadtype?.name + ")"}-label`
+      }});
+        setRight(rightData);
+      },
+      onError: (data) => {
+
+      }
+    })
+
+    const handleToggle = (value) => {
+      let found = false;
+      const newLeft = left.map( c => {
+          if(c.display_value === value.display_value){
+              c.checked = !c.checked;
+              found = true;
+          }
+          return c;
+      });
+      if(found){
+          setLeft(newLeft);
+          return
+      }
+      const newRight = right.map( c => {
+        if(c.display_value === value.display_value){
+            c.checked = !c.checked;
+        }
+        return c;
+      });
+      setRight(newRight);
+    };
+
+    const handleAllRight = () => {
+      setRight(right.concat(left));
+      setLeft([]);
+    };
+
+    const handleCheckedRight = () => {
+        let leftChecked = left.filter(c => c.checked);
+        leftChecked = leftChecked.map(c => {return {...c, checked: false}})
+        let leftNotChecked = left.filter(c => !c.checked);
+        setRight(right.concat(leftChecked));
+        setLeft(leftNotChecked);
+    };
+
+    const handleCheckedLeft = () => {
+        let rightChecked = right.filter(c => c.checked);
+        rightChecked = rightChecked.map(c => {return {...c, checked: false}})
+        let rightNotChecked = right.filter(c => !c.checked);
+        setLeft(left.concat(rightChecked));
+        setRight(rightNotChecked);
+    };
+
+    const handleAllLeft = () => {
+      setLeft(left.concat(right));
+      setRight([]);
+    };
+
+    const setFinalTags = () => {
+      // things to add are in the `right` now but weren't for `originalRight`
+      const commandsToAdd = right.filter( (command) => {
+        return originalRight.filter(orig => orig.command.cmd === command.cmd && orig.command.payloadtype.name === command.payloadtype.name).length === 0;
+      });
+      const commandsToRemove = originalRight.filter( (command) => {
+        return right.filter(newCommand => newCommand.cmd === command.command.cmd && newCommand.payloadtype.name === command.command.payloadtype.name).length === 0;
+      })
+      props.onSubmit({commandsToAdd, commandsToRemove});
+      props.onClose();
+    }
+  return (
+    <React.Fragment>
+        <DialogTitle>Add or Remove Commands for Callback {props.display_id} </DialogTitle>
+        <DialogContent dividers={true} style={{height: "100%", display: "flex", flexDirection: "column", position: "relative", overflowY: "auto"}}>
+          This will add or remove commands associated with this callback from Mythic's perspective. 
+          This does NOT add or remove commands within the payload itself that's beaconing out to Mythic.
+          <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} items={left} handleToggle={handleToggle}/>
+            </div>
+            <div style={{display: "flex", flexDirection: "column", justifyContent: "center"}}>
+              <StyledButton
+                variant="contained"
+                size="small"
+                className={classes.button}
+                onClick={handleAllRight}
+                disabled={left.length === 0}
+                aria-label="move all right"
+              >
+                &gt;&gt;
+              </StyledButton>
+              <StyledButton
+                variant="contained"
+                size="small"
+                className={classes.button}
+                onClick={handleCheckedRight}
+                aria-label="move selected right"
+              >
+                &gt;
+              </StyledButton>
+              <StyledButton
+                variant="contained"
+                size="small"
+                className={classes.button}
+                onClick={handleCheckedLeft}
+                aria-label="move selected left"
+              >
+                &lt;
+              </StyledButton>
+              <StyledButton
+                variant="contained"
+                size="small"
+                className={classes.button}
+                onClick={handleAllLeft}
+                disabled={right.length === 0}
+                aria-label="move all left"
+              >
+                &lt;&lt;
+              </StyledButton>
+ 
+          </div>
+            <div style={{marginLeft: "10px", position: "relative", flexGrow: 1, display: "flex", flexDirection: "column" }}>
+              <CustomList title={rightTitle} items={right} handleToggle={handleToggle} />
+            </div>
+        </div>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={props.onClose} variant="contained" color="primary">
+            Close
+          </Button>
+          <Button onClick={setFinalTags} variant="contained" color="success">
+            Submit
+          </Button>
+        </DialogActions>
+  </React.Fragment>
+  );
+}
+

MythicReactUI/src/components/pages/Callbacks/CallbackMutations.js

@@ -0,0 +1,242 @@
+import {gql } from '@apollo/client';
+
+export const hideCallbacksMutation = gql`
+mutation hideCallbacks ($callback_display_ids: [Int]!){
+  updateCallback(input: {callback_display_ids: $callback_display_ids, active: false}) {
+    status
+    error
+  }
+}
+`;
+export const hideCallbackMutation = gql`
+mutation hideCallback ($callback_display_id: Int!){
+  updateCallback(input: {callback_display_id: $callback_display_id, active: false}) {
+    status
+    error
+  }
+}
+`;
+export const updateCallbackTriggerMutation = gql`
+mutation updateCallbackTriggerMutation ($callback_display_id: Int!, $trigger_on_checkin_after_time: Int!){
+  updateCallback(input: {callback_display_id: $callback_display_id, trigger_on_checkin_after_time: $trigger_on_checkin_after_time}) {
+    status
+    error
+  }
+}
+`;
+export const toggleHideCallbackMutations = gql`
+mutation hideCallback ($callback_display_id: Int!, $active: Boolean!){
+  updateCallback(input: {callback_display_id: $callback_display_id, active: $active}) {
+    status
+    error
+  }
+}
+`;
+
+export const removeEdgeMutation = gql`
+mutation removeEdgeMutation ($edge_id: Int!){
+    callbackgraphedge_remove(edge_id: $edge_id) {
+        status
+        error
+      }
+}
+`;
+
+export const addEdgeMutation = gql`
+mutation addEdgeMutation ($source_id: Int!, $destination_id: Int!, $c2profile: String!){
+  callbackgraphedge_add(c2profile: $c2profile, destination_id: $destination_id, source_id: $source_id) {
+    status
+    error
+  }
+}
+`;
+export const unlockCallbackMutation = gql`
+mutation unlockCallback($callback_display_id: Int!){
+  updateCallback(input: {callback_display_id: $callback_display_id, locked: false}) {
+    status
+    error
+  }
+}
+`;
+export const lockCallbackMutation = gql`
+mutation lockCallack($callback_display_id: Int!){
+  updateCallback(input: {callback_display_id: $callback_display_id, locked: true}) {
+    status
+    error
+  }
+}
+`;
+export const updateDescriptionCallbackMutation = gql`
+mutation updateDescriptionCallback($callback_display_id: Int!, $description: String!, $color: String!){
+  updateCallback(input: {callback_display_id: $callback_display_id, description: $description, color: $color}) {
+    status
+    error
+  }
+}
+`;
+export const updateSleepInfoCallbackMutation = gql`
+mutation updateSleepInfoCallback($callback_display_id: Int!, $sleep_info: String!){
+  updateCallback(input: {callback_display_id: $callback_display_id, sleep_info: $sleep_info}) {
+    status
+    error
+  }
+}
+`;
+export const updateIPsCallbackMutation = gql`
+mutation updateIPsCallback($callback_display_id: Int!, $ips: [String]!){
+  updateCallback(input: {callback_display_id: $callback_display_id, ips: $ips}) {
+    status
+    error
+  }
+}
+`;
+
+export const taskingDataFragment = gql`
+    fragment taskData on task {
+        comment
+        parent_task_id
+        agent_task_id
+        tasking_location
+        callback {
+            display_id
+            id
+            user
+            host
+            integrity_level
+            domain
+            ip
+            mythictree_groups
+            pid
+        }
+        callback_id
+        commentOperator{
+            username
+        }
+        eventstepinstance {
+            eventgroupinstance {
+                eventgroup{
+                    id
+                }
+                id
+            }
+            eventstep {
+                name
+            }
+        }
+        completed
+        id
+        display_id
+        operator{
+            username
+        }
+        original_params
+        display_params
+        status
+        timestamp
+        status_timestamp_submitted
+        status_timestamp_processing
+        status_timestamp_preprocessing
+        command {
+          cmd
+          supported_ui_features
+          id
+          payloadtype {
+            name
+          }
+        }
+        command_name
+        opsec_pre_blocked
+        opsec_pre_bypassed
+        opsec_pre_bypass_user {
+            id
+            username
+        }
+        opsec_post_blocked
+        opsec_post_bypassed
+        opsec_post_bypass_user {
+            id
+            username
+        }
+        is_interactive_task
+        interactive_task_type
+        has_intercepted_response
+        tasks(where: {is_interactive_task: {_eq: false}}, order_by: {id: asc}) {
+            id
+            comment
+            agent_task_id
+            commentOperator{
+                username
+            }
+            callback {
+                display_id
+                id
+                user
+                host
+                integrity_level
+                domain
+                ip
+                mythictree_groups
+                pid
+            }
+            completed
+            subtask_group_name
+            display_id
+            operator{
+                username
+            }
+            original_params
+            display_params
+            status
+            timestamp
+            command {
+              cmd
+              supported_ui_features
+              id
+            }
+            command_name
+            response_count
+            tags {
+                tagtype {
+                    name
+                    color
+                    id
+                  }
+                id
+            }
+            tasks(order_by: {id: asc}) {
+                id
+            }
+            has_intercepted_response
+        }
+        response_count
+        tags {
+            tagtype {
+                name
+                color
+                id
+              }
+            id
+        }
+        token {
+            id
+        }
+    }
+`;
+export const createTaskingMutation = gql`
+mutation createTasking($callback_id: Int, $callback_ids: [Int], $command: String!, $params: String!, $files: [String], $token_id: Int, $tasking_location: String, $original_params: String, $parameter_group_name: String, $parent_task_id: Int, $is_interactive_task: Boolean, $interactive_task_type: Int, $payload_type: String) {
+  createTask(callback_id: $callback_id, callback_ids: $callback_ids, command: $command, params: $params, files: $files, token_id: $token_id, tasking_location: $tasking_location, original_params: $original_params, parameter_group_name: $parameter_group_name, parent_task_id: $parent_task_id, is_interactive_task: $is_interactive_task, interactive_task_type: $interactive_task_type, payload_type: $payload_type) {
+    status
+    id
+    error
+  }
+}
+`;
+export const exportCallbackConfigQuery = gql`
+query exportCallbackConfigQuery($agent_callback_id: String!) {
+  exportCallbackConfig(agent_callback_id: $agent_callback_id) {
+      status
+      error 
+      config 
+  }
+}
+`;

MythicReactUI/src/components/pages/Callbacks/Callbacks.js

@@ -0,0 +1,273 @@
+import React, { useEffect } from 'react';
+import { CallbacksTabs } from './CallbacksTabs';
+import TocIcon from '@mui/icons-material/Toc';
+import AssessmentIcon from '@mui/icons-material/Assessment';
+import { CallbacksTop } from './CallbacksTop';
+import Split from 'react-split';
+import PhoneForwardedIcon from '@mui/icons-material/PhoneForwarded';
+import {MythicDialog} from "../../MythicComponents/MythicDialog";
+import {ImportCallbackConfigDialog} from "./ImportCallbackConfigDialog";
+import {reorder} from "../../MythicComponents/MythicDraggableList";
+import Paper from '@mui/material/Paper';
+import IconButton from '@mui/material/IconButton';
+import {MythicStyledTooltip} from "../../MythicComponents/MythicStyledTooltip";
+
+export const getCallbackIdFromClickedTab = (tabId) => {
+    if(tabId === null || tabId === undefined){return 0}
+    if(tabId === ""){return 0}
+    if(tabId.includes("fileBrowser")) {
+        return Number(tabId.split("fileBrowser")[0]);
+    }else if(tabId.includes("interact")){
+        return Number(tabId.split("interact")[0]);
+    }else if(tabId.includes("processBrowser")) {
+        return Number(tabId.split("processBrowser")[0]);
+    }else if(tabId.includes("customFileBasedBrowser")) {
+        return Number(tabId.split("customFileBasedBrowser")[0]);
+    }else if(tabId.includes("customProcessBasedBrowser")) {
+        return Number(tabId.split("customProcessBasedBrowser")[0]);
+    } else {
+        console.log("unknown tab type", tabId);
+        return 0;
+    }
+}
+
+export function Callbacks({me}) {
+    const [openCallbackImport, setOpenCallbackImport] = React.useState(false);
+    const [topDisplay, setTopDisplay] = React.useState('table');
+    const [newDataForTab, setNewDataForTab] = React.useState({});
+    const [openTabs, setOpenTabs] = React.useState([]);
+    const [clickedTabId, setClickedTabIdValue] = React.useState('');
+    const openTabRef = React.useRef([]);
+    const callbackTableGridRef = React.useRef();
+    const [callbackTableSplitSizes, setCallbackTableSplitSizes] = React.useState([30, 70]);
+    const setClickedTabId = (tabID) => {
+        if(callbackTableGridRef.current){
+            let tabIDNumber = getCallbackIdFromClickedTab(tabID);
+            let rowIndex = callbackTableGridRef.current?.props?.itemData?.items?.findIndex((e) => {
+                return e[0]?.props?.rowData?.id === tabIDNumber
+            });
+            if(rowIndex >= 0){
+                callbackTableGridRef.current?.scrollToItem({rowIndex: rowIndex, align: "end", columnIndex: 0})
+            }
+        }
+        setClickedTabIdValue(tabID);
+        setNewDataForTab((prev) => {return {...prev, [tabID]: false}});
+    }
+    useEffect(() => {
+        const oldTabs = localStorage.getItem('openTabs');
+        if (oldTabs !== undefined && oldTabs !== null) {
+            try {
+                const tabs = JSON.parse(oldTabs);
+                setOpenTabs(tabs);
+                const lastClickedTab = localStorage.getItem('clickedTab');
+                if (lastClickedTab !== undefined && lastClickedTab !== null) {
+                    setClickedTabId(lastClickedTab);
+                }
+            } catch (error) {
+                console.log('failed to parse oldTabs', error);
+            }
+        }
+        const oldSizes = localStorage.getItem("callbackTableSplitSizes");
+        if (oldSizes) {
+            try{
+                setCallbackTableSplitSizes(JSON.parse(oldSizes));
+            }catch(error){
+                console.log("failed to parse callback table split sizes");
+            }
+        }
+    }, []);
+    useEffect( () => {
+        openTabRef.current = openTabs;
+    }, [openTabs])
+    const onOpenTab = React.useRef( (tabData) => {
+        let found = false;
+        openTabRef.current = openTabRef.current.map( (tab) => {
+            if(tab.tabID === tabData.tabID){
+                return {...tabData};
+            }
+            return {...tab};
+        })
+        openTabRef.current.forEach((tab) => {
+            if (tab.tabID === tabData.tabID) found = true;
+        });
+        //console.log("found is", found, tabData.tabID, tabData.tabType, tabData.callbackID, openTabs);
+        if (!found) {
+            const tabs = [...openTabRef.current, { ...tabData }];
+            localStorage.setItem('openTabs', JSON.stringify(tabs));
+            setOpenTabs(tabs);
+        } else {
+            setOpenTabs([...openTabRef.current]);
+        }
+        localStorage.setItem('clickedTab', tabData.tabID);
+        setClickedTabId(tabData.tabID);
+        
+    });
+    const onOpenTabs = React.useRef( (tabData) => {
+        let currentTabs = [...openTabRef.current];
+        for(let i = 0; i < tabData.length; i++){
+            let found = false;
+            currentTabs.forEach((tab) => {
+                if (tab.tabID === tabData[i].tabID) found = true;
+            });
+            if (!found) {
+                currentTabs = [...currentTabs, { ...tabData[i] }];
+            }
+        }
+        localStorage.setItem('openTabs', JSON.stringify(currentTabs));
+        setOpenTabs(currentTabs);
+        localStorage.setItem('clickedTab', tabData[0].tabID);
+        setClickedTabId(tabData[0].tabID);
+
+    });
+    const onEditTabDescription = React.useCallback( (tabInfo, description) => {
+        const tabs = openTabs.map((t) => {
+            if (t.tabID === tabInfo.tabID) {
+                return { ...t, customDescription: description };
+            } else {
+                return { ...t };
+            }
+        });
+        setOpenTabs(tabs);
+        localStorage.setItem('openTabs', JSON.stringify(tabs));
+    }, [openTabs]);
+    const onCloseTab = React.useCallback( ({ tabID, index }) => {
+        const tabSet = openTabs.filter((tab) => {
+            return tab.tabID !== tabID;
+        });
+        localStorage.setItem('openTabs', JSON.stringify(tabSet));
+        setOpenTabs(tabSet);
+        if(tabSet.length === 0){
+            setClickedTabId("0");
+            localStorage.removeItem("clickedTab");
+        }
+    }, [openTabs]);
+    const onDragTab = ({selected, toLeftOf}) => {
+        //console.log("onDragTab in CallbacksTabs", selected, toLeftOf);
+        let selectedPieces = selected.split("-");
+        let targetTabIndex = selectedPieces[selectedPieces.length -1] -0;
+        let newLocationPieces = toLeftOf.split("-");
+        let newLocation = newLocationPieces[newLocationPieces.length -1] -0;
+        if(newLocation > targetTabIndex){
+            newLocation = newLocation -1;
+        }
+        //console.log("from index", targetTabIndex, "to index", newLocation);
+        if(targetTabIndex === newLocation){
+            return;
+        }
+        let newOpenTabList = [];
+        for(let i = 0; i < openTabs.length; i++){
+            if(i === targetTabIndex){
+                //console.log("matched targetTabIndex")
+                continue;
+            } else if(i === newLocation){
+                //console.log("matched new location")
+                if(newLocation > targetTabIndex){
+                    newOpenTabList.push(openTabs[i]);
+                    newOpenTabList.push(openTabs[targetTabIndex]);
+                }else{
+                    newOpenTabList.push(openTabs[targetTabIndex]);
+                    newOpenTabList.push(openTabs[i]);
+                }
+
+                setClickedTabId(openTabs[targetTabIndex].tabID)
+            } else {
+                newOpenTabList.push(openTabs[i]);
+            }
+        }
+        setOpenTabs(newOpenTabList);
+        //openTabRef.current = newOpenTabList;
+        localStorage.setItem('openTabs', JSON.stringify(newOpenTabList));
+    }
+    const closeAllTabs = () => {
+        setOpenTabs([]);
+        localStorage.setItem('openTabs', JSON.stringify([]));
+    }
+    const closeAllExceptThisTab = ({event, index}) => {
+        const newOpenTabs = [openTabs[index]];
+        setOpenTabs(newOpenTabs);
+        localStorage.setItem('openTabs', JSON.stringify(newOpenTabs));
+    }
+    const contextMenuOptions = [
+        {
+            name: 'Close All Tabs', 
+            click: ({event}) => {
+                closeAllTabs();
+            }
+        },
+        {
+            name: 'Close All Other Tabs', 
+            click: ({event, index}) => {
+                closeAllExceptThisTab({event, index});
+            }
+        },
+    ];
+    const onDragEnd = ({ destination, source }) => {
+        // dropped outside the list
+        if (!destination) return;
+        const newItems = reorder(openTabs, source.index, destination.index);
+        setOpenTabs(newItems);
+        localStorage.setItem('openTabs', JSON.stringify(newItems));
+    };
+    return (
+        <>
+            <Split direction="vertical"
+                   sizes={callbackTableSplitSizes}
+                   minSize={[0,0]}
+                   onDragEnd={(sizes) => localStorage.setItem('callbackTableSplitSizes', JSON.stringify(sizes))}
+                   style={{ height: "100%" }}>
+                <div style={{display: "flex", flexDirection: "row-reverse"}}>
+                    <Paper elevation={5} style={{width: "30px", display: "flex", flexDirection: "column", alignItems: "center", overflow: "hidden",
+                    backgroundColor: "transparent"}}>
+                        {topDisplay !== 'table' &&
+                            <MythicStyledTooltip title={"Table View"}>
+                                <IconButton onClick={() =>setTopDisplay("table")}>
+                                    <TocIcon />
+                                </IconButton>
+                            </MythicStyledTooltip>
+                        }
+                        {topDisplay !== 'graph' &&
+                            <MythicStyledTooltip title={"Graph View"} >
+                                <IconButton onClick={() =>setTopDisplay("graph")}>
+                                    <AssessmentIcon />
+                                </IconButton>
+                            </MythicStyledTooltip>
+                        }
+                        {openCallbackImport &&
+                            <MythicDialog fullWidth={true} maxWidth="sm" open={openCallbackImport}
+                                          onClose={()=>{setOpenCallbackImport(false);}}
+                                          innerDialog={<ImportCallbackConfigDialog onClose={()=>{setOpenCallbackImport(false);}} />}
+                            />
+                        }
+                        <MythicStyledTooltip title={"Import previously exported Callbacks"} >
+                            <IconButton onClick={() =>setOpenCallbackImport(true)}>
+                                <PhoneForwardedIcon />
+                            </IconButton>
+                        </MythicStyledTooltip>
+                    </Paper>
+                    <CallbacksTop
+                        callbackTableGridRef={callbackTableGridRef}
+                        topDisplay={topDisplay}
+                        onOpenTab={onOpenTab.current}
+                        onOpenTabs={onOpenTabs.current}
+                        me={me} clickedTabId={clickedTabId}/>
+                </div>
+                <div >
+                    <CallbacksTabs
+                        onCloseTab={onCloseTab}
+                        onEditTabDescription={onEditTabDescription}
+                        key={'callbackstabs'}
+                        clickedTabId={clickedTabId}
+                        setClickedTabId={setClickedTabId}
+                        openTabs={openTabs}
+                        onDragTab={onDragTab}
+                        me={me}
+                        onDragEnd={onDragEnd}
+                        contextMenuOptions={contextMenuOptions}
+                        newDataForTab={newDataForTab}
+                        setNewDataForTab={setNewDataForTab}
+                    />
+                </div>
+            </Split>
+        </>
+    );
+}

MythicReactUI/src/components/pages/Callbacks/CallbacksGraph.js

@@ -0,0 +1,433 @@
+import React, {useEffect, useState, useMemo, useContext} from 'react';
+import {DrawC2PathElementsFlowWithProvider} from './C2PathDialog';
+import {Button} from '@mui/material';
+import ButtonGroup from '@mui/material/ButtonGroup';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import MenuItem from '@mui/material/MenuItem';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import {useMutation } from '@apollo/client';
+import {hideCallbackMutation, removeEdgeMutation, addEdgeMutation} from './CallbackMutations';
+import { MythicDialog } from '../../MythicComponents/MythicDialog';
+import {MythicSelectFromListDialog} from '../../MythicComponents/MythicSelectFromListDialog';
+import {ManuallyAddEdgeDialog} from './ManuallyAddEdgeDialog';
+import {gql, useLazyQuery } from '@apollo/client';
+import {snackActions} from '../../utilities/Snackbar';
+import {TaskParametersDialog} from './TaskParametersDialog';
+import {createTaskingMutation} from './CallbackMutations';
+import {useTheme} from '@mui/material/styles';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import InputLabel from '@mui/material/InputLabel';
+import FormControl from '@mui/material/FormControl';
+import Select from '@mui/material/Select';
+import {CallbackGraphEdgesContext, CallbacksContext, OnOpenTabContext} from './CallbacksTop';
+import {Dropdown, DropdownMenuItem} from "../../MythicComponents/MythicNestedMenus";
+import {GetMythicSetting} from "../../MythicComponents/MythicSavedUserSetting";
+import {operatorSettingDefaults} from "../../../cache";
+
+const ITEM_HEIGHT = 48;
+const ITEM_PADDING_TOP = 1;
+const MenuProps = {
+  PaperProps: {
+    style: {
+      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+      width: 250,
+    },
+  },
+};
+
+function getStyles(name, selectedOptions, theme) {
+    return {
+      fontWeight:
+      selectedOptions.indexOf(name) === -1
+          ? theme.typography.fontWeightRegular
+          : theme.typography.fontWeightMedium,
+    };
+  }
+
+export const loadedLinkCommandsQuery = gql`
+query loadedLinkCommandsQuery ($callback_id: Int!){
+  loadedcommands(where: {callback_id: {_eq: $callback_id}, command: {supported_ui_features: {_contains: "graph_view:link"}, deleted: {_eq: false}}}) {
+    command {
+        id
+        cmd
+        help_cmd
+        description
+        needs_admin
+    }
+  }
+}
+`;
+
+const GraphViewOptions = ({viewConfig, setViewConfig}) => {
+    const theme = useTheme();
+    const dropdownAnchorRef = React.useRef(null);
+    const [dropdownOpen, setDropdownOpen] = React.useState(false);
+    const [showConfiguration, setShowConfiguration] = React.useState(false);
+    const labelComponentOptions = ["display_id", "user", "host", "ip", "domain", "os", "process_name"];
+    const [selectedComponentOptions, setSelectedComponentOptions] = React.useState(["display_id", "user"]);
+    const [selectedGroupBy, setSelectedGroupBy] = React.useState("None");
+    const groupByOptions = ["host", "user", "ip", "domain", "os", "process_name", "None"];
+    const handleChange = (event) => {
+        const {
+            target: { value },
+        } = event;
+        setSelectedComponentOptions(
+            // On autofill we get a stringified value.
+            typeof value === 'string' ? value.split(',') : value,
+        );
+    };
+    const handleGroupByChange = (event) => {
+        setSelectedGroupBy(event.target.value);
+    }
+    useEffect( () => {
+        setViewConfig({...viewConfig, label_components: selectedComponentOptions})
+    }, [selectedComponentOptions])
+    useEffect( () => {
+        setViewConfig({...viewConfig, group_by: selectedGroupBy});
+    }, [selectedGroupBy])
+    const handleDropdownToggle = (evt) => {
+        evt.stopPropagation();
+        setDropdownOpen((prevOpen) => !prevOpen);
+    };
+    const handleMenuItemClick = (event, click) => {
+        click();
+        setDropdownOpen(false);
+    };
+    const options = [
+        {name: showConfiguration ? "Hide Grouping Options": "Show Grouping Options", click: () => {
+                setShowConfiguration(!showConfiguration);
+            }},
+        {name: viewConfig["include_disconnected"] ? 'Show Only Active Edges' : "Show All Edges", click: () => {
+                const view = {...viewConfig, include_disconnected: !viewConfig["include_disconnected"]};
+                setViewConfig(view);
+            }},
+        {name: viewConfig["show_all_nodes"] ? 'Hide inactive callbacks' : 'Show All Callbacks', click: () => {
+                const view = {...viewConfig, show_all_nodes: !viewConfig["show_all_nodes"]};
+                setViewConfig(view);
+            }},
+        {name: viewConfig["rankDir"] === "LR" ? 'Change Layout to Top-Bottom' : "Change Layout to Left-Right", click: () => {
+                if(viewConfig["rankDir"] === "LR"){
+                    const view = {...viewConfig, rankDir: "TB"};
+                    setViewConfig(view);
+                }else{
+                    const view = {...viewConfig, rankDir: "LR"};
+                    setViewConfig(view);
+                }
+            }},
+        {name: viewConfig["packet_flow_view"] ? "View Connection Directions" : "View Egress Routes" , click: () => {
+                const view = {...viewConfig, packet_flow_view: !viewConfig["packet_flow_view"]};
+                setViewConfig(view);
+            }},
+        ];
+    const handleClose = (event) => {
+        if (dropdownAnchorRef.current && dropdownAnchorRef.current.contains(event.target)) {
+            return;
+        }
+        setDropdownOpen(false);
+    };
+    return (
+        <div >
+            <ButtonGroup variant="contained" ref={dropdownAnchorRef} aria-label="split button" style={{marginTop: "0px", marginLeft: "25px"}} color="primary">
+                <Button size="small" color="primary" aria-controls={dropdownOpen ? 'split-button-menu' : undefined}
+                        aria-expanded={dropdownOpen ? 'true' : undefined}
+                        aria-haspopup="menu"
+                        onClick={handleDropdownToggle}>
+                    Configure Graph View <ArrowDropDownIcon />
+                </Button>
+            </ButtonGroup>
+            {showConfiguration &&
+                <FormControl sx={{ width: 200,  backgroundColor: theme.palette.background.paper}} >
+                    <InputLabel id="demo-chip-label">Group Callbacks By</InputLabel>
+                    <Select
+                        labelId="demo-chip-label"
+                        id="demo-chip"
+                        value={selectedGroupBy}
+                        onChange={handleGroupByChange}
+                        input={<OutlinedInput id="select-chip" label="Group Callbacks By" />}
+                    >
+                        {groupByOptions.map((name) => (
+                            <MenuItem
+                                key={name}
+                                value={name}
+                            >
+                                {name}
+                            </MenuItem>
+                        ))}
+                    </Select>
+                </FormControl>
+            }
+            {showConfiguration &&
+                <FormControl sx={{minWidth: 300, backgroundColor: theme.palette.background.paper}}>
+                    <InputLabel id="demo-multiple-chip-label">Display Properties per Callback</InputLabel>
+                    <Select
+                        labelId="demo-multiple-chip-label"
+                        id="demo-multiple-chip"
+                        multiple
+                        value={selectedComponentOptions}
+                        onChange={handleChange}
+                        input={<OutlinedInput id="select-multiple-chip" label="Display Properties per Callback" />}
+                        MenuProps={MenuProps}
+                    >
+                        {labelComponentOptions.map((name) => (
+                            <MenuItem
+                                key={name}
+                                value={name}
+                                style={getStyles(name, selectedComponentOptions, theme)}
+                            >
+                                {name}
+                            </MenuItem>
+                        ))}
+                    </Select>
+                </FormControl>
+            }
+
+            <ClickAwayListener onClickAway={handleClose}>
+                <Dropdown
+                    isOpen={dropdownAnchorRef.current}
+                    onOpen={setDropdownOpen}
+                    externallyOpen={dropdownOpen}
+                    menu={
+                        options.map((option, index) => (
+                                <DropdownMenuItem
+                                    key={option.name}
+                                    disabled={option.disabled}
+                                    onClick={(event) => handleMenuItemClick(event, option.click)}
+                                >
+                                    {option.name}
+                                </DropdownMenuItem>
+                            ))
+                    }
+                />
+            </ClickAwayListener>
+        </div>
+    )
+}
+export function CallbacksGraph({onOpenTab}){
+    const callbacks = useContext(CallbacksContext);
+    const callbackgraphedges = useContext(CallbackGraphEdgesContext);
+    //used for creating a task to do a link command
+    const [loadingSettings, setLoadingSettings] = React.useState(true);
+    const [filterOptions, setFilterOptions] = React.useState({});
+    const [linkCommands, setLinkCommands] = React.useState([]);
+    const [openParametersDialog, setOpenParametersDialog] = React.useState(false);
+    const [openSelectLinkCommandDialog, setOpenSelectLinkCommandDialog] = React.useState(false);
+    const [selectedLinkCommand, setSelectedLinkCommand] = useState();
+    const [selectedCallback, setSelectedCallback] = useState();
+    const [manuallyRemoveEdgeDialogOpen, setManuallyRemoveEdgeDialogOpen] = useState(false);
+    const [manuallyAddEdgeDialogOpen, setManuallyAddEdgeDialogOpen] = useState(false);
+    const [edgeOptions, setEdgeOptions] = useState([]); // used for manuallyRemoveEdgeDialog
+    const [addEdgeSource, setAddEdgeSource] = useState(null); // used for manuallyAddEdgeDialog
+    const [getLinkCommands] = useLazyQuery(loadedLinkCommandsQuery, {fetchPolicy: "network-only",
+        onCompleted: data => {
+            const updatedCommands = data.loadedcommands.map( c => {return {command: {...c.command, parsedParameters: {}}}})
+            if(updatedCommands.length === 1){
+                //no need for a popup, there's only one possible command
+                setSelectedLinkCommand(updatedCommands[0].command);
+                setOpenParametersDialog(true);
+            }else if(updatedCommands.length === 0){
+                //no possible command can be used, do a notification
+                snackActions.warning("No commands loaded support the ui feature 'graph_view:link'");
+            }else{
+                const cmds = updatedCommands.map( (cmd) => { return {...cmd, display: cmd.command.cmd} } );
+                setLinkCommands(cmds);
+                setSelectedLinkCommand(cmds[0].command);
+                setOpenSelectLinkCommandDialog(true);
+            }
+        }});
+    const onSubmitSelectedLinkCommand = (cmd) => {
+        setSelectedLinkCommand(cmd.command);
+        //console.log(cmd);
+        setOpenParametersDialog(true);
+    }
+    const [createTask] = useMutation(createTaskingMutation, {
+        update: (cache, {data}) => {
+            if(data.createTask.status === "error"){
+                snackActions.error(data.createTask.error);
+            }else{
+                snackActions.success("task created");
+            }
+            
+        }
+    });
+    const submitParametersDialog = (cmd, parameters, files) => {
+        setOpenParametersDialog(false);
+        createTask({variables: {callback_id: selectedCallback.id, command: cmd, params: parameters, files}});
+    }
+    const [viewConfig, setViewConfig] = React.useState({
+        rankDir: "TB",
+        label_components: ["display_id", "user"],
+        packet_flow_view: true,
+        include_disconnected: true,
+        show_all_nodes: false,
+        group_by: "None"
+    });
+    const [hideCallback] = useMutation(hideCallbackMutation, {
+        update: (cache, {data}) => {
+            //console.log(data);
+        },
+        onError: (error) => {
+            console.log(error)
+            snackActions.error(error.message);
+            //setContextMenuOpen(false);
+        },
+        onCompleted: (data) => {
+            if(data.updateCallback.status === "success"){
+                snackActions.success("Successfully hid callback")
+            }else{
+                snackActions.error(data.updateCallback.error)
+            }
+
+            //setContextMenuOpen(false);
+        }
+    });
+    const [manuallyRemoveEdge] = useMutation(removeEdgeMutation, {
+        update: (cache, {data}) => {
+            //console.log(data);
+            snackActions.success("Successfully removed edge, updating graph...");
+        },
+        onError: (err) => {
+            snackActions.error(err.message);
+        }
+    });
+    const [manuallyAddEdge] = useMutation(addEdgeMutation, {
+        update: (cache, {data}) => {
+            //console.log(data);
+            snackActions.success("Successfully added edge, updating graph...");
+        },
+        onError: (err) => {
+            snackActions.error(err.message);
+        }
+    });
+    const onSubmitManuallyRemoveEdge = (edge) => {
+        if(edge === ""){
+            snackActions.warning("No edge selected");
+            return;
+        }
+        manuallyRemoveEdge({variables: {edge_id: edge.id}});
+    }
+    const onSubmitManuallyAddEdge = (source_id, profile, destination) => {
+        if(profile === "" || destination === ""){
+            snackActions.warning("Profile or Destination Callback not provided");
+            return;
+        }
+        manuallyAddEdge({variables: {source_id: source_id, c2profile: profile.name, destination_id: destination.display_id}});
+    }
+    const contextMenu = useMemo(() => {return [
+	        {
+		        title: 'Hide Callback',
+		        onClick: function(node) {
+		            hideCallback({variables: {callback_display_id: node.display_id}});
+		        }
+	        },
+	        {
+		        title: 'Interact',
+                onClick: function(node){
+		            onOpenTab({tabType: "interact", tabID: node.callback_id + "interact", callbackID: node.callback_id});
+	            }
+            },
+            {
+	            title: "Manually Remove Edge",
+                onClick: function(node){
+	                const opts = callbackgraphedges.reduce( (prev, e) => {
+                        if(e.source.id === node.id || e.destination.id === node.id){
+                            if(e.end_timestamp === null){
+                                if(e.source.id === e.destination.id){
+                                    return [...prev, {...e, "display": e.source.display_id + " --> " + e.c2profile.name + " --> Mythic"}];
+                                } else {
+                                    return [...prev, {...e, "display": e.source.display_id + " --> " + e.c2profile.name + " --> " + e.destination.display_id}];
+                                }
+
+                            }else{
+                                return [...prev];
+                            }
+                        } else {
+                            return [...prev];
+                        }
+	                }, []);
+	                setEdgeOptions(opts);
+	                setManuallyRemoveEdgeDialogOpen(true);
+                }
+            },
+            {
+                title: "Manually Add Edge",
+                onClick: function(node){
+                    setAddEdgeSource(node);
+                    setManuallyAddEdgeDialogOpen(true);
+                }
+	        },
+	        {
+	            title: "Task Callback for Edge",
+                onClick: function(node){
+	                setLinkCommands([]);
+                    setSelectedLinkCommand(null);
+                    setSelectedCallback(null);
+	                getLinkCommands({variables: {callback_id: node.id} });
+	                setSelectedCallback(node);
+                }
+            },
+        ]}, [getLinkCommands, hideCallback, viewConfig, onOpenTab]);
+    React.useEffect( () => {
+        try {
+            const storageItemOptions = GetMythicSetting({setting_name: "callbacks_table_filter_options", default_value: operatorSettingDefaults.callbacks_table_filters});
+            if(storageItemOptions !== null){
+                setFilterOptions(storageItemOptions);
+            }
+        }catch(error){
+            console.log("Failed to load callbacks_table_filter_options", error);
+        }
+        setLoadingSettings(false);
+    }, []);
+    if(loadingSettings){
+        return (<div style={{width: '100%', height: '100%', position: "relative",}}>
+            <div style={{overflowY: "hidden", flexGrow: 1}}>
+                <div style={{
+                    position: "absolute",
+                    left: "35%",
+                    top: "40%"
+                }}>
+                    {"Loading Callbacks and Connections..."}
+                </div>
+            </div>
+        </div>)
+    }
+    return (
+        <div style={{maxWidth: "100%", "overflow": "hidden", height: "100%"}}>
+
+            {manuallyRemoveEdgeDialogOpen &&
+                <MythicDialog fullWidth={true} maxWidth="sm" open={manuallyRemoveEdgeDialogOpen}
+                              onClose={() => {
+                                  setManuallyRemoveEdgeDialogOpen(false);
+                              }}
+                              innerDialog={<MythicSelectFromListDialog onClose={() => {
+                                  setManuallyRemoveEdgeDialogOpen(false);}} identifier="id" display="display"
+                                        onSubmit={onSubmitManuallyRemoveEdge} options={edgeOptions} title={"Manually Remove Edge"} action={"remove"} />}
+                />
+            }
+            {manuallyAddEdgeDialogOpen &&
+                <MythicDialog fullWidth={true} maxWidth="sm" open={manuallyAddEdgeDialogOpen}
+                    onClose={()=>{setManuallyAddEdgeDialogOpen(false);}} 
+                    innerDialog={<ManuallyAddEdgeDialog onClose={()=>{setManuallyAddEdgeDialogOpen(false);}}
+                                        onSubmit={onSubmitManuallyAddEdge} source={addEdgeSource} />}
+                />
+            }
+            {openParametersDialog &&
+                <MythicDialog fullWidth={true} maxWidth="lg" open={openParametersDialog} 
+                    onClose={()=>{setOpenParametersDialog(false);}} 
+                    innerDialog={<TaskParametersDialog command={selectedLinkCommand} callback={selectedCallback} onSubmit={submitParametersDialog} onClose={()=>{setOpenParametersDialog(false);}} />}
+                />
+            }
+            {openSelectLinkCommandDialog &&
+                <MythicDialog fullWidth={true} maxWidth="sm" open={openSelectLinkCommandDialog}
+                    onClose={()=>{setOpenSelectLinkCommandDialog(false);}} 
+                    innerDialog={<MythicSelectFromListDialog onClose={()=>{setOpenSelectLinkCommandDialog(false);}}
+                                        onSubmit={onSubmitSelectedLinkCommand} options={linkCommands} title={"Select Link Command"} 
+                                        action={"select"} display={"display"} identifier={"display"}/>}
+                />
+            }
+            <DrawC2PathElementsFlowWithProvider providedNodes={callbacks} edges={callbackgraphedges} view_config={viewConfig}
+                                                    filterOptions={filterOptions}
+                                                    panel={<GraphViewOptions setViewConfig={setViewConfig} viewConfig={viewConfig} />} contextMenu={contextMenu}/>
+        </div>
+    );
+}
+

MythicReactUI/src/components/pages/Callbacks/CallbacksTableColumnsReorderDialog.js

@@ -0,0 +1,118 @@
+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 IconButton from '@mui/material/IconButton';
+import { useTheme } from '@mui/material/styles';
+import {reorder} from "../../MythicComponents/MythicDraggableList";
+import {
+    Draggable,
+    DragDropContext,
+    Droppable,
+} from "@hello-pangea/dnd";
+import { List, ListItem, ListItemText, Paper } from '@mui/material';
+import DragHandleIcon from '@mui/icons-material/DragHandle';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+
+export function CallbacksTableColumnsReorderDialog({initialItems, onSubmit, onClose, onReset, visible, hidden}) {
+    const [items, setItems] = React.useState(initialItems);
+    const theme = useTheme();
+    const onDragEnd = ({ destination, source }) => {
+        // dropped outside the list
+        if (!destination) return;
+        const newItems = reorder(items, source.index, destination.index);
+        setItems(newItems);
+    };
+    React.useEffect( () => {
+        const newItems = items.map( c => {
+            if(visible.includes(c.name)){
+                return {...c, visible: true};
+            }
+            return {...c, visible: false};
+        })
+        setItems(newItems);
+    }, [visible, hidden]);
+    const onToggleVisibility = (i) => {
+        const newItems = items.map( (c, index) => {
+            if(index === i){
+                return {...c, visible: !c.visible};
+            }
+            return {...c};
+        });
+        setItems(newItems);
+    }
+    const onFinish = () => {
+        onSubmit(items);
+    }
+
+  return (
+    <React.Fragment>
+        <DialogTitle id="form-dialog-title">Drag and Drop to Adjust the Order and Toggle Visibility</DialogTitle>
+        <DialogContent dividers={true} style={{height: "100%", margin: 0, padding: 0, background: theme.palette.background.main}}>
+            <DraggableList items={items} onToggleVisibility={onToggleVisibility} onDragEnd={onDragEnd} />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={onClose} variant="contained" color="primary">
+            Close
+          </Button>
+            <Button onClick={onReset} variant="contained" color="warning">
+                Reset
+            </Button>
+          <Button onClick={onFinish} variant="contained" color="success">
+            Submit
+          </Button>
+        </DialogActions>
+  </React.Fragment>
+  );
+}
+
+export const DraggableList = ({ items, onDragEnd, onToggleVisibility }) => {
+    return (
+        <DragDropContext onDragEnd={onDragEnd}>
+            <Droppable droppableId="callback-table-column-list">
+                {(provided) => (
+                    <List style={{border: 0, padding: 0}} ref={provided.innerRef} {...provided.droppableProps}>
+                        {items.map((item, index) => (
+                            <DraggableListItem onToggleVisibility={onToggleVisibility} item={item} index={index} key={item.key} />
+                        ))}
+                        {provided.placeholder}
+                    </List>
+                )}
+            </Droppable>
+        </DragDropContext>
+    );
+};
+export const DraggableListItem = ({ item, index, onToggleVisibility }) => {
+    const theme = useTheme();
+    return (
+        <Draggable draggableId={item.key} index={index}>
+            {(provided, snapshot) => (
+                <ListItem
+                    ref={provided.innerRef}
+                    {...provided.draggableProps}
+                    {...provided.dragHandleProps}
+                    component={Paper}
+                    disabled={!item.visible}
+                    sx={snapshot.isDragging ? { background: theme.palette.secondary.main } : {
+
+                    }}
+                >
+                    <DragHandleIcon style={{marginRight: "10px"}}/>
+                    <ListItemText primary={item.name} />
+                    <IconButton onClick={() => onToggleVisibility(index)} style={{float: "right", margin: 0, padding: 0}}>
+                        {item.visible ? (
+                            <VisibilityIcon color={"success"} />
+                        ) : (
+                            <VisibilityOffIcon color={"error"} />
+                        )
+
+                        }
+                    </IconButton>
+                </ListItem>
+            )}
+        </Draggable>
+    );
+};
+

MythicReactUI/src/components/pages/Callbacks/CallbacksTableEditDescriptionColorDialog.js

@@ -0,0 +1,86 @@
+import React, {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 Box from '@mui/material/Box';
+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 {HexColorInput, HexColorPicker} from 'react-colorful';
+import Typography from '@mui/material/Typography';
+
+export function CallbacksTableEditDescriptionColorDialog(props) {
+  const [comment, setComment] = React.useState("");
+  const [color, setColor] = React.useState("");
+  const theme = useTheme();
+    const onCommitSubmit = () => {
+        if(color === "ffffff" || color === "000000"){
+            props.onSubmit(comment, "");
+        } else {
+            props.onSubmit(comment, color);
+        }
+        if(props.dontCloseOnSubmit){
+            return;
+        }
+        props.onClose();
+    }
+    const onChange = (value) => {
+        setComment(value);
+    }
+    useEffect( () => {
+        try{
+            setComment(JSON.stringify(JSON.parse(props.description), null, 2));
+        }catch(error){
+            setComment(props.description);
+        }
+        setColor(props.color);
+    }, [props.description, props.color]);
+  return (
+    <React.Fragment>
+        <DialogTitle id="form-dialog-title">{props.title}</DialogTitle>
+        <DialogContent dividers={true} style={{height: "100%", margin: 0, padding: 0}}>
+            <AceEditor
+                mode="json"
+                theme={theme.palette.mode === 'dark' ? 'monokai' : 'github'}
+                width="100%"
+                height="100%"
+                fontSize={14}
+                wrapEnabled={props.wrap ? props.wrap : false}
+                minLines={props.maxRows ? props.maxRows : 3}
+                maxLines={props.maxRows ? props.maxRows : 3}
+                value={comment}
+                focus={true}
+                onChange={onChange}
+                setOptions={{
+                    tabSize: 4,
+                    useWorker: false,
+                    showInvisibles: false,
+                }}
+            />
+            <HexColorPicker color={color} onChange={setColor} style={{width: "100%"}} />
+            <HexColorInput color={color} onChange={setColor} style={{width: "80%"}} />
+            <Button onClick={()=>setColor("ffffff")} color={"success"}>
+                Clear
+            </Button>
+            <Box sx={{width: "100%", height: 25, backgroundColor: color}} >
+                <Typography style={{color: "white", display: "inline-block", marginRight: "10px"}}>DarkMode Text With Color Background</Typography>
+                <Typography style={{color: "black", display: "inline-block"}}>LightMode Text With Color Background</Typography>
+            </Box>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={props.onClose} variant="contained" color="primary">
+            Close
+          </Button>
+            {props.onSubmit &&
+                <Button onClick={onCommitSubmit} variant="contained" color="success">
+                    Submit
+                </Button>
+            }
+        </DialogActions>
+    </React.Fragment>
+  );
+}

MythicReactUI/src/components/pages/Callbacks/CallbacksTableEditTriggerOnCheckinDialog.js

@@ -0,0 +1,59 @@
+import React, {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 Box from '@mui/material/Box';
+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 {HexColorInput, HexColorPicker} from 'react-colorful';
+import Typography from '@mui/material/Typography';
+import MythicTextField from "../../MythicComponents/MythicTextField";
+
+export function CallbacksTableEditTriggerOnCheckinDialog(props) {
+    const [comment, setComment] = React.useState(0);
+    const onChange = (name, value, error) => {
+        if(isNaN(parseInt(value))){
+            setComment(0);
+        } else {
+            setComment(parseInt(value));
+        }
+    }
+    useEffect( () => {
+        setComment(props.trigger_on_checkin_after_time);
+    }, [props.trigger_on_checkin_after_time]);
+    const onSubmit = () => {
+        props.onSubmit(comment);
+    }
+  return (
+    <React.Fragment>
+        <DialogTitle id="form-dialog-title">{"Adjust this callback's trigger threshold"}</DialogTitle>
+        <DialogContent dividers={true} style={{height: "100%"}}>
+            <Typography >
+                This adjusts how long, in minutes, this callback must <b>not</b> checkin before finally checking in to trigger an <b>eventing workflow</b> (trigger is callback_checkin).
+            </Typography>
+            <Typography >
+                A zero value means never trigger.
+            </Typography>
+            <Typography >
+                If no eventing workflow for <b>callback_checkin</b> that matches the right payload_types and supported_os restrictions, then nothing will happen.
+            </Typography>
+            <MythicTextField autoFocus={true} onChange={onChange} type={"number"} value={comment} onEnter={onSubmit} name={"trigger threshold in minutes"} showLabel={false} />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={props.onClose} variant="contained" color="primary">
+            Close
+          </Button>
+            {props.onSubmit &&
+                <Button onClick={onSubmit} variant="contained" color="success">
+                    Submit
+                </Button>
+            }
+        </DialogActions>
+    </React.Fragment>
+  );
+}