applying csv escape to database exports too

scope interactive output more tightly by callback

.github/FUNDING.yml

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

.github/dependabot.yml

@@ -0,0 +1,12 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    target-branch: "Mythic-v4.0.0"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "gomod"
+    directory: "/"
+    target-branch: "Mythic-v4.0.0"
+    schedule:
+      interval: "weekly"

.github/workflows/docker.yml

@@ -0,0 +1,571 @@
+# 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:
+      - 'Mythic-v4.0.0'
+      - '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: "Mythic-v4.0.0"
+
+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@v5 # ref: https://github.com/marketplace/actions/checkout
+      - name: Log in to the container registry
+        uses: docker/login-action@v4 # 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@v4
+        with:
+          platforms: 'arm64,arm'
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v4
+      # 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@v7 # 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@v5 # ref: https://github.com/marketplace/actions/checkout
+      - name: Log in to the container registry
+        uses: docker/login-action@v4 # 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@v4
+        with:
+          platforms: 'arm64,arm'
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v4
+      # 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@v7 # 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@v5 # ref: https://github.com/marketplace/actions/checkout
+      - name: Log in to the container registry
+        uses: docker/login-action@v4 # 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@v4
+        with:
+          platforms: 'arm64,arm'
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v4
+      # 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@v7 # 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@v5 # ref: https://github.com/marketplace/actions/checkout
+      - name: Log in to the container registry
+        uses: docker/login-action@v4 # 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@v4
+        with:
+          platforms: 'arm64,arm'
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v4
+      # 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@v7 # 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@v5 # ref: https://github.com/marketplace/actions/checkout
+      - name: Log in to the container registry
+        uses: docker/login-action@v4 # 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@v4
+        with:
+          platforms: 'arm64,arm'
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v4
+
+      # 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@v7 # 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@v5 # ref: https://github.com/marketplace/actions/checkout
+      - name: Log in to the container registry
+        uses: docker/login-action@v4 # 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@v4
+        with:
+          platforms: 'arm64,arm'
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v4
+
+      # 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@v7 # 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@v5 # ref: https://github.com/marketplace/actions/checkout
+      - name: Log in to the container registry
+        uses: docker/login-action@v4 # 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@v4
+        with:
+          platforms: 'arm64,arm'
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v4
+
+      # 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@v7 # 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@v5 # ref: https://github.com/marketplace/actions/checkout
+      - name: Log in to the container registry
+        uses: docker/login-action@v4 # 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@v4
+        with:
+          platforms: 'arm64,arm'
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v4
+
+      # 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@v7 # ref: https://github.com/marketplace/actions/build-and-push-docker-images
+        with:
+          context: .
+          file: mythic-react-docker/.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@v5 # ref: https://github.com/marketplace/actions/checkout
+      - name: Log in to the container registry
+        uses: docker/login-action@v4 # 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@v4
+        with:
+          platforms: 'arm64,arm'
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v4
+      # 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@v7 # 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@v5 # 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,16 @@ _ReSharper*/
 *.DotSettings.user
 
 # vscode
-.vscode/
+.vscode/
+
+jupyter-docker/jupyter/MythicExamples/.ipynb_checkpoints/
+
+nginx-docker/config/blockips.conf
+/MythicReactUI/build/
+/MythicReactUI/node_modules/
+/mythic-react-docker/mythic/public/
+/.gocache/
+
+.gocache/
+MythicReactUI/build
+MythicReactUI/node_modules

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

@@ -0,0 +1,20 @@
+*
+!Dockerfile
+!package.json
+!package-lock.json
+!config-overrides.js
+!public/
+!public/**
+!src/
+!src/**
+!.env
+
+.DS_Store
+**/.DS_Store
+node_modules/
+build/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.npm/
+.cache/

MythicReactUI/Dockerfile

@@ -0,0 +1,17 @@
+FROM node:24-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,106 @@
+{
+  "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-date-pickers": "^8.1.0",
+    "@xterm/addon-fit": "^0.11.0",
+    "@xterm/xterm": "^6.0.0",
+    "@xyflow/react": "^12.6.0",
+    "ace-builds": "^1.40.1",
+    "anser": "^2.3.2",
+    "dayjs": "^1.11.13",
+    "dompurify": "^3.4.17",
+    "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",
+    "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-markdown": "^10.1.0",
+    "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",
+    "remark-gfm": "^4.0.1",
+    "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/browser-script-worker.js

@@ -0,0 +1,61 @@
+let browserScript;
+let browserScriptSource;
+let activeRequestID;
+
+const serializeError = (error) => ({
+    name: (error && error.name) || "Error",
+    message: (error && error.message) || String(error),
+    stack: error && error.stack,
+});
+
+const postLog = (...args) => {
+    try {
+        self.postMessage({type: "log", requestID: activeRequestID, args});
+    } catch (error) {
+        self.postMessage({
+            type: "log",
+            requestID: activeRequestID,
+            args: args.map((arg) => String(arg)),
+        });
+    }
+};
+
+console.log = postLog;
+
+self.onmessage = ({data}) => {
+    if(!data || data.type !== "render"){
+        return;
+    }
+
+    const {requestID, script, task, responses} = data;
+    activeRequestID = requestID;
+    let phase = "compile";
+
+    try {
+        if(typeof script === "string" && script !== browserScriptSource){
+            browserScript = undefined;
+            browserScriptSource = undefined;
+            browserScript = Function(`"use strict";return(${script})`)();
+            if(typeof browserScript !== "function"){
+                throw new TypeError("Browser script must evaluate to a function");
+            }
+            browserScriptSource = script;
+        }
+        if(typeof browserScript !== "function"){
+            throw new Error("No browser script is loaded");
+        }
+
+        phase = "execute";
+        const result = browserScript(task, responses);
+        if(result && typeof result.then === "function"){
+            throw new TypeError("Browser scripts must return their display data synchronously");
+        }
+
+        phase = "serialize";
+        self.postMessage({type: "result", requestID, result});
+    } catch (error) {
+        self.postMessage({type: "error", requestID, phase, error: serializeError(error)});
+    } finally {
+        activeRequestID = undefined;
+    }
+};

MythicReactUI/public/index.html

@@ -0,0 +1,64 @@
+<!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>
+    <script>
+      (function () {
+        var resizeObserverLoopErrors = [
+          "ResizeObserver loop limit exceeded",
+          "ResizeObserver loop completed with undelivered notifications."
+        ];
+        function isResizeObserverLoopError(message) {
+          return resizeObserverLoopErrors.indexOf(message) !== -1;
+        }
+        window.addEventListener("error", function (event) {
+          if (isResizeObserverLoopError(event.message)) {
+            event.stopImmediatePropagation();
+            event.preventDefault();
+          }
+        }, true);
+        window.addEventListener("unhandledrejection", function (event) {
+          var reason = event.reason;
+          var message = reason && reason.message ? reason.message : reason;
+          if (isResizeObserverLoopError(message)) {
+            event.stopImmediatePropagation();
+            event.preventDefault();
+          }
+        }, true);
+      })();
+    </script>
+  </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,403 @@
+import { makeVar } from '@apollo/client';
+import {restartWebsockets} from "./index";
+import {snackActions} from "./components/utilities/Snackbar";
+import {mergeRefreshedUser} from "./userState";
+
+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 taskingDisplayFieldOptions = [
+    {
+        name: "timestamp",
+        display: "Timestamp",
+        description: "Show the configured task timestamp."
+    },
+    {
+        name: "task",
+        display: "Task number",
+        description: "Show the T-number link for each task."
+    },
+    {
+        name: "username",
+        display: "Username",
+        description: "Show the operator that issued the task."
+    },
+    {
+        name: "callback",
+        display: "Callback number",
+        description: "Show the C-number link for the task callback."
+    },
+    {
+        name: "host",
+        display: "Host",
+        description: "Show the callback host."
+    },
+    {
+        name: "ip",
+        display: "IP address",
+        description: "Show the callback primary IP."
+    },
+    {
+        name: "groups",
+        display: "Callback groups",
+        description: "Show the callback's tree groups."
+    },
+    {
+        name: "payload_type",
+        display: "Payload type",
+        description: "Show the task payload type."
+    },
+];
+export const defaultTaskingDisplayFields = ["timestamp", "task", "username", "callback", "payload_type"];
+export const normalizeTaskingDisplayFields = (fields) => {
+    if(!Array.isArray(fields)){
+        return [...defaultTaskingDisplayFields];
+    }
+    const validFieldNames = taskingDisplayFieldOptions.map((option) => option.name);
+    return fields.reduce( (prev, fieldName) => {
+        if(validFieldNames.includes(fieldName) && !prev.includes(fieldName)){
+            return [...prev, fieldName];
+        }
+        return prev;
+    }, []);
+}
+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", "Chat",
+].sort();
+export const operatorSettingDefaults =  {
+    navBarOpen: false,
+    fontFamily: 'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    showMedia: true,
+    showOPSECBypassUsername: false,
+    taskingDisplayFields: defaultTaskingDisplayFields,
+    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,
+    chatSelectedChannelID: 0,
+    virtualizedTablePadding: 8,
+    sideShortcuts: defaultShortcuts,
+    palette: {
+        primary: {
+            dark: "#7dd3fc",
+            light: "#2563eb",
+        },
+        error: {
+            dark: '#fb7185',
+            light: '#dc2626'
+        },
+        success: {
+            dark: '#34d399',
+            light: '#15803d',
+        },
+        secondary: {
+            dark: '#94a3b8',
+            light: '#64748b'
+        },
+        info: {
+            dark: '#22d3ee',
+            light: '#0891b2'
+        },
+        warning: {
+            dark: "#fbbf24",
+            light: "#b45309",
+        },
+        background: {
+            dark: '#0b0f14',
+            light: '#f6f8fb'
+        },
+        paper: {
+            dark: '#111820',
+            light: '#ffffff'
+        },
+        surfaceRaised: {
+            dark: '#16212b',
+            light: '#ffffff'
+        },
+        surfaceMuted: {
+            dark: '#0f1720',
+            light: '#fafbfc'
+        },
+        tableHeader: {
+            dark: '#17212c',
+            light: '#e8eef5'
+        },
+        tableHover: {
+            dark: "#1e2a36",
+            light: "#eaf1f8",
+        },
+        pageHeader: {
+            dark: '#111a23',
+            light: '#ffffff'
+        },
+        pageHeaderText: {
+            dark: "#e7edf5",
+            light: "#0f172a",
+        },
+        chatMessageOperatorBackground: {
+            dark: "#111820",
+            light: "#ffffff",
+        },
+        chatMessageSelfBackground: {
+            dark: "#142033",
+            light: "#f8fbff",
+        },
+        chatMessageSystemBackground: {
+            dark: "#2a2116",
+            light: "#fff7ed",
+        },
+        chatMarkdownSurfaceBackground: {
+            dark: "#0b1118",
+            light: "#f5f5f5",
+        },
+        chatMarkdownSurfaceStrongBackground: {
+            dark: "#1f2a37",
+            light: "#e2e8f0",
+        },
+        sectionHeaderAccent: {
+            dark: "#7dd3fc",
+            light: "#b3cbff",
+        },
+        sectionHeaderGradientStart: {
+            dark: "#153049",
+            light: "#dbeafe",
+        },
+        sectionHeaderGradientMiddle: {
+            dark: "#111f2e",
+            light: "#eef6ff",
+        },
+        sectionHeaderGradientEnd: {
+            dark: "#111820",
+            light: "#ffffff",
+        },
+        subtleAccentGradientStart: {
+            dark: "#132338",
+            light: "#eef6ff",
+        },
+        subtleAccentGradientEnd: {
+            dark: "#111820",
+            light: "#ffffff",
+        },
+        graphGroupColor: {
+            dark: "#24384a",
+            light: "#d9e6f2",
+        },
+        chartSeries1: {
+            dark: "#38bdf8",
+            light: "#0284c7",
+        },
+        chartSeries2: {
+            dark: "#34d399",
+            light: "#16a34a",
+        },
+        chartSeries3: {
+            dark: "#fbbf24",
+            light: "#ca8a04",
+        },
+        chartSeries4: {
+            dark: "#fb7185",
+            light: "#e11d48",
+        },
+        chartSeries5: {
+            dark: "#a78bfa",
+            light: "#7c3aed",
+        },
+        chartSeries6: {
+            dark: "#2dd4bf",
+            light: "#0d9488",
+        },
+        chartSeries7: {
+            dark: "#f472b6",
+            light: "#db2777",
+        },
+        chartSeries8: {
+            dark: "#f97316",
+            light: "#ea580c",
+        },
+        chartSeries9: {
+            dark: "#818cf8",
+            light: "#4f46e5",
+        },
+        chartSeries10: {
+            dark: "#a3e635",
+            light: "#65a30d",
+        },
+        text: {
+            dark: "#e6edf3",
+            light: "#111827",
+        },
+        textSecondary: {
+            dark: "#a7b2c2",
+            light: "#526174",
+        },
+        textDisabled: {
+            dark: "#6f7c8d",
+            light: "#93a1b2",
+        },
+        selectedCallbackColor: {
+            dark: '#123a5a',
+            light: '#dbeafe',
+        },
+        selectedCallbackHierarchyColor: {
+            dark: '#172d49',
+            light: '#edf6ff',
+        },
+        backgroundImage: {
+            dark: null,
+            light: null
+        },
+        navBarIcons: {
+            dark: '#dce8f8',
+            light: '#ffffff'
+        },
+        navBarText: {
+            dark: '#dce8f8',
+            light: '#ffffff'
+        },
+        navBarColor: {
+            dark: "#1a283d",
+            light: "#5c73a5",
+        },
+        navBarBottomColor: {
+            dark: "#0c131c",
+            light: "#1f2937",
+        },
+        taskPromptTextColor: {
+            dark: '#9fb3c8',
+            light: '#64748b'
+        },
+        taskPromptCommandTextColor: {
+            dark: "#f8fafc",
+            light: "#0f172a",
+        },
+        taskContextColor: {
+            dark: "#14324f",
+            light: "#dbeafe",
+        },
+        taskContextImpersonationColor: {
+            dark: "#4a1824",
+            light: "#fee2e2",
+        },
+        taskContextExtraColor: {
+            dark: "#123a35",
+            light: "#dcfce7",
+        },
+        emptyFolderColor: {
+            dark: '#8997aa',
+            light: '#64748b'
+        },
+        folderColor: {
+            dark: '#f2c86b',
+            light: '#d6a23f'
+        },
+        outputBackgroundColor: {
+            dark: '#070b10',
+            light: '#f8fafc'
+        },
+        outputTextColor: {
+            dark: '#e6edf3',
+            light: '#111827',
+        },
+        borderColor: {
+            dark: "#263241",
+            light: "#d5dee9"
+        }
+    },
+}
+
+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 = mergeRefreshedUser(meState().user, 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));
+}
+export const FailedRefresh = (restart_websockets) =>{
+    const accessToken = localStorage.getItem("access_token");
+    if(accessToken){
+        fetch('/logout', {
+            method: 'POST',
+            headers: {'Authorization': `Bearer ${accessToken}`},
+            keepalive: true,
+        }).catch(() => {});
+    }
+    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/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() {
+    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/APITokenScopeSelector.js

@@ -0,0 +1,291 @@
+import React from 'react';
+import {Box, Checkbox, InputAdornment, TextField, Typography} from '@mui/material';
+import {MythicActionButton} from './MythicActionButton';
+import SearchIcon from '@mui/icons-material/Search';
+import {gql, useQuery} from "@apollo/client";
+import {MythicChip} from './MythicChip';
+
+export const defaultAPITokenScopes = ["*"];
+
+export const apiTokenScopeDefinitionsQuery = gql`
+query apiTokenScopeDefinitionsQuery {
+  apiTokenScopeDefinitions {
+    status
+    error
+    scopes {
+      name
+      display_name
+      description
+      resource
+      access
+      includes
+    }
+    grantable_wildcards
+  }
+}
+`;
+
+export const normalizeAPITokenScopeSelection = (scopes = []) => {
+    const uniqueScopes = Array.from(new Set((scopes || []).filter((scope) => Boolean(scope)))).sort();
+    if(uniqueScopes.includes("*")){
+        return ["*"];
+    }
+    return uniqueScopes.reduce((prev, scope) => {
+        const resource = scope.endsWith(".*") ? scope.slice(0, -2) : scope.split(".")[0];
+        if(scope.endsWith(".*")){
+            return [
+                ...prev.filter((selectedScope) => !selectedScope.startsWith(`${resource}.`)),
+                scope,
+            ].sort();
+        }
+        if(prev.includes(`${resource}.*`)){
+            return prev;
+        }
+        return [...prev, scope].sort();
+    }, []);
+};
+
+export function APITokenScopeSelector({
+    selectedScopes = [],
+    onChange,
+    requiredScopes = [],
+    requiredScopeDescriptions = {},
+    fetchPolicy = "cache-first",
+    libraryMaxHeight,
+    className = "",
+    sx = {},
+}) {
+    const [filter, setFilter] = React.useState("");
+    const normalizedSelectedScopes = React.useMemo(() => {
+        return normalizeAPITokenScopeSelection(selectedScopes);
+    }, [selectedScopes]);
+    const {data: scopeData, loading: scopeLoading, error: scopeQueryError} = useQuery(apiTokenScopeDefinitionsQuery, {
+        fetchPolicy,
+    });
+    const availableScopes = React.useMemo(() => {
+        if(scopeData?.apiTokenScopeDefinitions?.status !== "success"){
+            return [];
+        }
+        return scopeData?.apiTokenScopeDefinitions?.scopes || [];
+    }, [scopeData]);
+    const grantableWildcards = React.useMemo(() => {
+        return scopeData?.apiTokenScopeDefinitions?.grantable_wildcards || [];
+    }, [scopeData]);
+    const groupedScopes = React.useMemo(() => {
+        return availableScopes.reduce((prev, cur) => {
+            const resource = cur.resource || "other";
+            return {
+                ...prev,
+                [resource]: [...(prev[resource] || []), cur],
+            };
+        }, {});
+    }, [availableScopes]);
+    const visibleResources = React.useMemo(() => {
+        const normalizedFilter = filter.toLowerCase();
+        return Object.keys(groupedScopes).sort().filter(resource => {
+            if(normalizedFilter === ""){
+                return true;
+            }
+            if(resource.toLowerCase().includes(normalizedFilter)){
+                return true;
+            }
+            return groupedScopes[resource].some(scope =>
+                scope.name.toLowerCase().includes(normalizedFilter) ||
+                (scope.display_name || "").toLowerCase().includes(normalizedFilter) ||
+                (scope.description || "").toLowerCase().includes(normalizedFilter)
+            );
+        });
+    }, [filter, groupedScopes]);
+    const visibleScopeCount = React.useMemo(() => {
+        return visibleResources.reduce((prev, resource) => prev + groupedScopes[resource].length, 0);
+    }, [groupedScopes, visibleResources]);
+    const scopeLoadFailed = scopeQueryError !== undefined || scopeData?.apiTokenScopeDefinitions?.status === "error";
+    const scopesUnavailable = scopeLoading || scopeLoadFailed;
+    const selectedScopesLabel = normalizedSelectedScopes.includes("*") ? "Full access selected" : `${normalizedSelectedScopes.length} selected`;
+    const fullAccessDisabled = !grantableWildcards.includes("*");
+    const emitScopes = (nextScopes) => {
+        if(onChange){
+            onChange(normalizeAPITokenScopeSelection(nextScopes));
+        }
+    }
+    const scopeIsSelected = (scope) => {
+        return normalizedSelectedScopes.includes(scope);
+    }
+    const toggleScope = (scope) => {
+        if(scope === "*"){
+            emitScopes(scopeIsSelected("*") ? [] : defaultAPITokenScopes);
+            return;
+        }
+        const resource = scope.endsWith(".*") ? scope.slice(0, -2) : scope.split(".")[0];
+        const withoutAll = normalizedSelectedScopes.filter(s => s !== "*");
+        const withoutResourceWildcard = withoutAll.filter(s => s !== `${resource}.*`);
+        if(scope.endsWith(".*")){
+            emitScopes(normalizedSelectedScopes.includes(scope) ? withoutResourceWildcard : [
+                ...withoutResourceWildcard.filter(s => !s.startsWith(`${resource}.`)),
+                scope,
+            ].sort());
+            return;
+        }
+        if(normalizedSelectedScopes.includes(scope)){
+            emitScopes(withoutResourceWildcard.filter(s => s !== scope));
+            return;
+        }
+        emitScopes([...withoutResourceWildcard, scope].sort());
+    }
+    const selectVisibleScopes = () => {
+        const visibleScopeNames = visibleResources.flatMap(resource => groupedScopes[resource].map(scope => scope.name));
+        emitScopes(Array.from(new Set([
+            ...normalizedSelectedScopes.filter(scope => scope !== "*"),
+            ...visibleScopeNames,
+        ])).sort());
+    }
+    const clearScopes = () => {
+        emitScopes([]);
+    }
+    const librarySx = libraryMaxHeight === undefined ? undefined : {maxHeight: libraryMaxHeight};
+
+    return (
+        <Box className={className} sx={sx}>
+            <Box sx={{alignItems: "center", display: "flex", flexWrap: "wrap", gap: 0.75, mb: 1}}>
+                <MythicChip label={`${visibleScopeCount} visible`} />
+                <MythicChip label={selectedScopesLabel} />
+                <MythicActionButton disabled={scopesUnavailable || visibleScopeCount === 0 || scopeIsSelected("*")} size="small" onClick={selectVisibleScopes}>
+                    Select Visible
+                </MythicActionButton>
+                <MythicActionButton disabled={normalizedSelectedScopes.length === 0} size="small" onClick={clearScopes}>
+                    Clear
+                </MythicActionButton>
+            </Box>
+            {requiredScopes.length > 0 &&
+                <Box className="mythic-api-token-scope-card items-start flex gap-3 mythic-api-token-scope-card-selected min-w-0 rounded cursor-pointer bg-surface border-subtle text-primary mythic-tone-primary bg-tone-1 border-tone-3" sx={{mb: 1.25}}>
+                    <Box className="mythic-api-token-scope-card-copy min-w-0 w-full">
+                        <Typography className="mythic-api-token-scope-card-title text-sm font-800 leading-125 min-w-0 wrap-anywhere text-primary">Needed for this use</Typography>
+                        {requiredScopes.map((scope) => (
+                            <Typography key={`required-${scope}`} variant="caption" color="text.secondary" sx={{display: "block"}}>
+                                {scope}: {requiredScopeDescriptions[scope] || "Required for this workflow."}
+                            </Typography>
+                        ))}
+                    </Box>
+                </Box>
+            }
+            <TextField
+                className="mythic-api-token-scope-search"
+                size="small"
+                fullWidth
+                value={filter}
+                onChange={(event) => setFilter(event.target.value)}
+                placeholder="Search scopes"
+                disabled={scopesUnavailable}
+                InputProps={{startAdornment: <InputAdornment position="start"><SearchIcon fontSize="small" /></InputAdornment>}}
+            />
+            <Box className="mythic-api-token-scope-library flex flex-column gap-5 overflow-auto rounded bg-neutral-1 border-subtle" sx={librarySx}>
+                {scopesUnavailable &&
+                    <Box className={`mythic-api-token-scope-state items-center flex justify-center rounded bg-surface-raised border-subtle text-muted text-center${scopeLoadFailed ? " mythic-api-token-scope-state-error mythic-tone-error bg-tone-1 border-tone-3 text-tone" : ""}`}>
+                        <Typography variant="body2">
+                            {scopeLoading ? "Loading scopes..." : (scopeQueryError?.message || scopeData?.apiTokenScopeDefinitions?.error || "Failed to load scopes")}
+                        </Typography>
+                    </Box>
+                }
+                {!scopesUnavailable &&
+                    <>
+                        <Box
+                            className={`mythic-api-token-scope-card items-start flex gap-3 mythic-api-token-scope-card-full rounded cursor-pointer bg-surface border-subtle text-primary mythic-tone-warning bg-tone-1 border-tone-2${scopeIsSelected("*") ? " mythic-api-token-scope-card-selected mythic-tone-primary bg-tone-1 border-tone-3" : ""}${fullAccessDisabled ? " mythic-api-token-scope-card-disabled" : ""} min-w-0`}
+                            component="label"
+                        >
+                            <Checkbox
+                                disabled={fullAccessDisabled}
+                                checked={scopeIsSelected("*")}
+                                onChange={() => toggleScope("*")}
+                            />
+                            <Box className="mythic-api-token-scope-card-copy min-w-0 w-full">
+                                <Typography className="mythic-api-token-scope-card-title text-sm font-800 leading-125 min-w-0 wrap-anywhere text-primary">Full access (*)</Typography>
+                                <Typography className="mythic-api-token-scope-card-description text-xs leading-135 wrap-anywhere text-muted">
+                                    Grants every current and future API scope available to this operator.
+                                </Typography>
+                            </Box>
+                        </Box>
+                        {visibleResources.length === 0 &&
+                            <Box className="mythic-api-token-scope-state items-center flex justify-center rounded bg-surface-raised border-subtle text-muted text-center">
+                                <Typography variant="body2">No scopes match your search.</Typography>
+                            </Box>
+                        }
+                        {visibleResources.map(resource => {
+                            const resourceWildcard = `${resource}.*`;
+                            const canGrantResourceWildcard = grantableWildcards.includes(resourceWildcard);
+                            const resourceScopes = [...groupedScopes[resource]].sort((a, b) => (a.access || "").localeCompare(b.access || ""));
+                            const resourceWildcardSelected = scopeIsSelected("*") || scopeIsSelected(resourceWildcard);
+                            return (
+                                <Box className="mythic-api-token-resource-card p-6 flex flex-column gap-5 min-w-0 rounded bg-surface-raised border-subtle" key={resource}>
+                                    <Box className="mythic-api-token-resource-header items-start flex flex-wrap gap-6 justify-between min-w-0">
+                                        <Box sx={{minWidth: 0}}>
+                                            <Typography className="mythic-api-token-resource-title text-sm font-800 leading-120 text-primary">
+                                                {resource.split("_").join(" ")}
+                                            </Typography>
+                                            <Typography className="mythic-api-token-resource-subtitle">
+                                                {resourceScopes.length === 1 ? "1 available scope" : `${resourceScopes.length} available scopes`}
+                                            </Typography>
+                                        </Box>
+                                        <Box
+                                            className={`mythic-api-token-resource-wildcard text-xs font-750 items-center inline-flex flex-none gap-2 rounded cursor-pointer bg-neutral-1 border-subtle text-muted${resourceWildcardSelected ? " mythic-api-token-resource-wildcard-selected" : ""}${!canGrantResourceWildcard ? " mythic-api-token-resource-wildcard-disabled" : ""}`}
+                                            component="label"
+                                        >
+                                            <Checkbox
+                                                size="small"
+                                                disabled={scopeIsSelected("*") || !canGrantResourceWildcard}
+                                                checked={resourceWildcardSelected}
+                                                onChange={() => toggleScope(resourceWildcard)}
+                                            />
+                                            <span>{resourceWildcard}</span>
+                                        </Box>
+                                    </Box>
+                                    <Box className="mythic-api-token-scope-grid gap-4 min-w-0 grid">
+                                        {resourceScopes.map(scope => {
+                                            const includedByWildcard = scopeIsSelected("*") || scopeIsSelected(resourceWildcard);
+                                            const scopeSelected = scopeIsSelected(scope.name) || includedByWildcard;
+                                            return (
+                                                <Box
+                                                    className={`mythic-api-token-scope-card items-start flex gap-3 rounded cursor-pointer bg-surface border-subtle text-primary${scopeSelected ? " mythic-api-token-scope-card-selected mythic-tone-primary bg-tone-1 border-tone-3" : ""}${includedByWildcard ? " mythic-api-token-scope-card-inherited" : ""} min-w-0`}
+                                                    component="label"
+                                                    key={scope.name}
+                                                >
+                                                    <Checkbox
+                                                        size="small"
+                                                        disabled={includedByWildcard}
+                                                        checked={scopeSelected}
+                                                        onChange={() => toggleScope(scope.name)}
+                                                    />
+                                                    <Box className="mythic-api-token-scope-card-copy min-w-0 w-full">
+                                                        <Box className="mythic-api-token-scope-card-title-row items-start flex gap-4 justify-between min-w-0">
+                                                            <Typography className="mythic-api-token-scope-card-title text-sm font-800 leading-125 min-w-0 wrap-anywhere text-primary">{scope.display_name || scope.name}</Typography>
+                                                            <MythicChip
+                                                                compact
+                                                                label={scope.access || "scope"}
+                                                                size="small"
+                                                                tone={scope.access === "read" ? "info" : ["write", "create", "update"].includes(scope.access) ? "success" : ["delete", "admin"].includes(scope.access) ? "error" : "neutral"}
+                                                            />
+                                                        </Box>
+                                                        <Typography className="mythic-api-token-scope-name text-xs leading-135 wrap-anywhere text-muted font-mono">
+                                                            {scope.name}
+                                                        </Typography>
+                                                        <Typography className="mythic-api-token-scope-card-description text-xs leading-135 wrap-anywhere text-muted">
+                                                            {scope.description}
+                                                        </Typography>
+                                                        {scope.includes?.length > 0 &&
+                                                            <Typography className="mythic-api-token-scope-includes text-xs leading-135 font-700 wrap-anywhere mythic-tone-info text-tone">
+                                                                Includes {scope.includes.join(", ")}
+                                                            </Typography>
+                                                        }
+                                                    </Box>
+                                                </Box>
+                                            )
+                                        })}
+                                    </Box>
+                                </Box>
+                            );
+                        })}
+                    </>
+                }
+            </Box>
+        </Box>
+    )
+}

MythicReactUI/src/components/MythicComponents/MythicActionButton.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
+import {normalizeMythicChipTone} from './MythicChip';
+import {MythicStyledTooltip} from './MythicStyledTooltip';
+
+export const MythicActionButton = React.forwardRef(function MythicActionButton({
+    active = false,
+    appearance, // can be plain or raised
+    autoWidth = false,
+    children,
+    className = "",
+    colorMode = "hover", // can be always or hover
+    compact = false,
+    icon,
+    iconOnly = false,
+    label,
+    muted = false,
+    rotated = false,
+    selected = false,
+    shape, // can be square or round
+    size = "small",
+    startIcon,
+    tone = "neutral",
+    tooltip,
+    tooltipStyle = {},
+    variant = "outlined",
+    ...props
+}, ref) {
+    const resolvedTone = normalizeMythicChipTone(tone);
+    const resolvedAppearance = appearance || (iconOnly ? "plain" : "raised");
+    const resolvedShape = shape || (resolvedAppearance === "raised" ? "square" : "round");
+    const resolvedColorMode = colorMode === "always" ? "always" : "hover";
+    const shapeClass = iconOnly ? "mythic-action-button-icon" : "mythic-action-button-label";
+    const resolvedClassName = [
+        "mythic-action-button",
+        `mythic-action-button-${resolvedAppearance}`,
+        shapeClass,
+        `mythic-action-button-shape-${resolvedShape}`,
+        `mythic-action-button-color-${resolvedColorMode}`,
+        `mythic-tone-${resolvedTone}`,
+        active || selected ? "mythic-action-button-active" : "",
+        autoWidth ? "mythic-action-button-auto-width" : "",
+        compact ? "mythic-action-button-compact" : "",
+        muted ? "mythic-action-button-muted" : "",
+        rotated ? "mythic-action-button-rotated" : "",
+        className,
+    ].filter(Boolean).join(" ");
+    const ariaLabel = props["aria-label"] || tooltip || (typeof label === "string" ? label : undefined);
+    const content = label ?? children;
+    const button = iconOnly ? (
+        <IconButton
+            ref={ref}
+            aria-label={ariaLabel}
+            size={size}
+            {...props}
+            className={resolvedClassName}
+            color="inherit"
+        >
+            {icon || children}
+        </IconButton>
+    ) : (
+        <Button
+            ref={ref}
+            aria-label={ariaLabel}
+            size={size}
+            startIcon={icon || startIcon}
+            variant={variant}
+            {...props}
+            className={resolvedClassName}
+            color="inherit"
+        >
+            {content}
+        </Button>
+    );
+
+    return tooltip ? (
+        <MythicStyledTooltip title={tooltip} tooltipStyle={{display: "inline-flex", ...tooltipStyle}}>
+            {button}
+        </MythicStyledTooltip>
+    ) : button;
+});

MythicReactUI/src/components/MythicComponents/MythicAgentSVGIcon.js

@@ -0,0 +1,55 @@
+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';
+import {ImageWithAuth} from "../utilities/ImageWithAuth";
+
+export const MythicAgentSVGIcon = ({payload_type, style, is_p2p}) => {
+    const theme = useTheme();
+    if(payload_type === ""){
+        return;
+    }
+    return (
+        <MythicStyledTooltip title={payload_type} >
+            <ImageWithAuth 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.background.default}}/>
+            }
+            {is_p2p === true &&
+                <FontAwesomeIcon icon={faLink} style={{width: "20px", height: "20px", marginLeft: "-20px", marginBottom: "5px",
+                    borderRadius: "10px", border: "1px solid",
+                    backgroundColor: theme.palette.background.default}} />
+            }
+        </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}>
+            <ImageWithAuth 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/MythicChatContainerIcon.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import {useTheme} from '@mui/material/styles';
+import SmartToyTwoToneIcon from '@mui/icons-material/SmartToyTwoTone';
+import {ImageWithAuth} from "../utilities/ImageWithAuth";
+
+const defaultIconProps = {fontSize: "small"};
+
+const shallowEqualObjects = (left = {}, right = {}) => {
+    if(left === right){
+        return true;
+    }
+    const leftKeys = Object.keys(left);
+    const rightKeys = Object.keys(right);
+    if(leftKeys.length !== rightKeys.length){
+        return false;
+    }
+    return leftKeys.every((key) => left[key] === right[key]);
+};
+
+const MythicChatContainerIconComponent = ({containerName, className = "", imgClassName = "", iconProps = defaultIconProps, altText}) => {
+    const theme = useTheme();
+    const [imageFailed, setImageFailed] = React.useState(false);
+    const iconName = String(containerName || "").trim();
+    const imageSrc = iconName ? `/static/${iconName}_${theme.palette.mode}.svg` : "";
+    const handleImageError = React.useCallback(() => {
+        setImageFailed(true);
+    }, []);
+    React.useEffect(() => {
+        setImageFailed(false);
+    }, [imageSrc]);
+    if(!imageSrc || imageFailed){
+        return <SmartToyTwoToneIcon {...iconProps} />;
+    }
+    return (
+        <ImageWithAuth
+            alt={altText || iconName}
+            className={`${className} ${imgClassName}`.trim()}
+            onError={handleImageError}
+            src={imageSrc}
+        />
+    );
+};
+
+export const MythicChatContainerIcon = React.memo(MythicChatContainerIconComponent, (previousProps, nextProps) => (
+    previousProps.containerName === nextProps.containerName &&
+    previousProps.className === nextProps.className &&
+    previousProps.imgClassName === nextProps.imgClassName &&
+    previousProps.altText === nextProps.altText &&
+    shallowEqualObjects(previousProps.iconProps || defaultIconProps, nextProps.iconProps || defaultIconProps)
+));

MythicReactUI/src/components/MythicComponents/MythicChip.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import Chip from '@mui/material/Chip';
+import {useTheme} from "@mui/material/styles";
+
+const supportedTones = new Set([
+    "primary",
+    "secondary",
+    "neutral",
+    "info",
+    "success",
+    "warning",
+    "error",
+]);
+
+export const normalizeMythicChipTone = (tone) => supportedTones.has(tone) ? tone : "secondary";
+
+const ChipPrimitive = React.forwardRef(function ChipPrimitive({
+    className = "",
+    color = undefined,
+    compact = false,
+    iconOnly = false,
+    muted = false,
+    shape,
+    size = "small",
+    tone = undefined,
+    variant = "outlined",
+    ...props
+}, ref) {
+    const resolvedTone = normalizeMythicChipTone(tone || (color ? color : "secondary"));
+    const muiVariant = variant ? variant : "outlined";
+    const hasCustomColor = Boolean(color) && !supportedTones.has(color);
+    const resolvedClassName = [
+        "mythic-chip-base",
+        "text-xs",
+        "font-800",
+        "items-center",
+        "inline-flex",
+        "gap-2",
+        "max-w-full",
+        "min-w-0",
+        "truncate",
+        "whitespace-nowrap",
+        shape === "square" ? "mythic-square-chip" : "mythic-chip",
+        hasCustomColor ? "mythic-chip-custom-color" : `mythic-tone-${resolvedTone}`,
+        compact ? "mythic-chip-compact text-2xs" : "",
+        muted ? "mythic-chip-muted" : "",
+        iconOnly ? "mythic-chip-icon-only justify-center" : "",
+        variant === "outlined" ? "mythic-chip-outlined" : "",
+        className,
+    ].filter(Boolean).join(" ");
+    return (
+        <Chip
+            ref={ref}
+            className={resolvedClassName}
+            //color={color ? color : undefined}
+            size={size}
+            variant={muiVariant}
+            {...props}
+        />
+    );
+});
+
+export const MythicChip = React.forwardRef(function MythicChip(props, ref) {
+    return <ChipPrimitive ref={ref} shape="pill" {...props} />;
+});
+
+export const SquareChip = React.forwardRef(function SquareChip(props, ref) {
+    return <ChipPrimitive ref={ref} shape="square" {...props} />;
+});

MythicReactUI/src/components/MythicComponents/MythicColorInput.js

@@ -0,0 +1,120 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import Popper from '@mui/material/Popper';
+import {HexColorInput, HexColorPicker} from 'react-colorful';
+
+export const isValidHexColor = (color) => {
+    if(typeof color !== "string"){
+        return false;
+    }
+    if(color.length !== 7){
+        return false;
+    }
+    if(color[0] !== "#"){
+        return false;
+    }
+    return /^#[0-9a-fA-F]{6}$/.test(color);
+}
+
+export const getReadableTextColor = (backgroundColor) => {
+    if(!isValidHexColor(backgroundColor)){
+        return "#ffffff";
+    }
+    const red = parseInt(backgroundColor.slice(1, 3), 16);
+    const green = parseInt(backgroundColor.slice(3, 5), 16);
+    const blue = parseInt(backgroundColor.slice(5, 7), 16);
+    const brightness = (red * 299 + green * 587 + blue * 114) / 1000;
+    return brightness >= 140 ? "#111827" : "#ffffff";
+}
+
+export const MythicColorSwatchInput = ({color, label, onChange, inputWidth = "96px", sx = {}}) => {
+    const [pickerOpen, setPickerOpen] = React.useState(false);
+    const swatchRef = React.useRef(null);
+    const safeColor = isValidHexColor(color) ? color : "#000000";
+    return (
+        <ClickAwayListener onClickAway={() => setPickerOpen(false)}>
+            <Box sx={{display: "flex", alignItems: "center", gap: 1, minWidth: 0, position: "relative", ...sx}}>
+                <Box
+                    component="button"
+                    type="button"
+                    ref={swatchRef}
+                    onClick={(evt) => {
+                        evt.preventDefault();
+                        evt.stopPropagation();
+                        setPickerOpen((open) => !open);
+                    }}
+                    aria-label={label}
+                    aria-expanded={pickerOpen}
+                    sx={{
+                        alignItems: "center",
+                        backgroundColor: "transparent",
+                        border: "1px solid",
+                        borderColor: "divider",
+                        borderRadius: "4px",
+                        cursor: "pointer",
+                        display: "inline-flex",
+                        flex: "0 0 auto",
+                        height: 30,
+                        justifyContent: "center",
+                        p: "2px",
+                        width: 34,
+                    }}
+                >
+                    <Box
+                        sx={{
+                            backgroundColor: safeColor,
+                            borderRadius: "3px",
+                            height: "100%",
+                            width: "100%",
+                        }}
+                    />
+                </Box>
+                <Popper
+                    open={pickerOpen}
+                    anchorEl={swatchRef.current}
+                    placement="bottom-start"
+                    style={{zIndex: 100000}}
+                >
+                    <Box
+                        onMouseDown={(evt) => evt.stopPropagation()}
+                        onClick={(evt) => evt.stopPropagation()}
+                        sx={{
+                            backgroundColor: "background.paper",
+                            border: "1px solid",
+                            borderColor: "divider",
+                            borderRadius: "6px",
+                            boxShadow: 8,
+                            mt: 0.5,
+                            p: 1,
+                            "& .react-colorful": {
+                                width: 210,
+                                height: 160,
+                            },
+                        }}
+                    >
+                        <HexColorPicker color={safeColor} onChange={onChange} />
+                    </Box>
+                </Popper>
+                <HexColorInput
+                    color={color}
+                    onChange={onChange}
+                    prefixed={true}
+                    style={{
+                        width: inputWidth,
+                        minWidth: 0,
+                        height: "30px",
+                        boxSizing: "border-box",
+                        borderRadius: "4px",
+                        border: "1px solid rgba(128,128,128,0.45)",
+                        background: "transparent",
+                        color: "inherit",
+                        padding: "0 8px",
+                        fontFamily: "inherit",
+                        fontSize: "0.85rem",
+                    }}
+                />
+            </Box>
+        </ClickAwayListener>
+    );
+}

MythicReactUI/src/components/MythicComponents/MythicConfirmDialog.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import DialogTitle from '@mui/material/DialogTitle';
+import {MythicDialog} from './MythicDialog';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogContent from '@mui/material/DialogContent';
+import {MythicDialogButton, MythicDialogFooter} from "./MythicDialogLayout";
+
+export function MythicConfirmDialog(props) {
+    const handleSubmit = () => {
+        props.onSubmit();
+        if(props.dontCloseOnSubmit){
+            return;
+        }
+        props.onClose();
+    }
+    const acceptIntent = props.acceptColor === "success" ? "primary" :
+        props.acceptColor === "warning" ? "warning" :
+        props.acceptColor === "info" ? "info" :
+        "destructive";
+
+  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>
+            )}
+            <MythicDialogFooter>
+              <MythicDialogButton onClick={props.onClose}>
+                {props.cancelText ? (props.cancelText) : ("Cancel")}
+              </MythicDialogButton>
+              <MythicDialogButton onClick={handleSubmit} autoFocus intent={acceptIntent}>
+                {props.acceptText ? (props.acceptText) : ("Remove")}
+              </MythicDialogButton>
+            </MythicDialogFooter>
+        </React.Fragment>
+  } />
+  );
+}

MythicReactUI/src/components/MythicComponents/MythicDialog.js

@@ -0,0 +1,628 @@
+import {MythicActionButton} from "./MythicActionButton";
+import React, {useEffect} from 'react';
+import Dialog from '@mui/material/Dialog';
+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 {MythicStyledTooltip} from "./MythicStyledTooltip";
+import Draggable from 'react-draggable';
+import {MythicDraggableDialogTitle} from "./MythicDraggableDialogTitle";
+import {MythicDialogButton, MythicDialogFooter} from "./MythicDialogLayout";
+import {MythicChip} from "./MythicChip";
+
+let mythicDialogIdCounter = 0;
+let mythicDialogStack = [];
+
+const MythicDraggableDialogPaper = React.forwardRef(function MythicDraggableDialogPaper(props, ref) {
+    const {
+        draggableCancel,
+        draggableHandle,
+        draggableOnStart,
+        draggableOnStop,
+        ...paperProps
+    } = props;
+    const nodeRef = React.useRef(null);
+    const setPaperRef = React.useCallback((node) => {
+        nodeRef.current = node;
+        if(typeof ref === "function"){
+            ref(node);
+        } else if(ref){
+            ref.current = node;
+        }
+    }, [ref]);
+    const onStart = React.useCallback((event, data) => {
+        return draggableOnStart?.(event, data, nodeRef.current);
+    }, [draggableOnStart]);
+    return (
+        <Draggable
+            nodeRef={nodeRef}
+            handle={draggableHandle}
+            cancel={draggableCancel}
+            onStart={onStart}
+            onStop={draggableOnStop}
+        >
+            <Paper {...paperProps} ref={setPaperRef} />
+        </Draggable>
+    );
+});
+
+// Kept temporarily for route-level compatibility while consumers migrate to the lightweight base module.
+// eslint-disable-next-line no-unused-vars
+function LegacyMythicDialog(props) {
+    const theme = useTheme();
+    const dialogIdRef = React.useRef(null);
+    if(dialogIdRef.current === null){
+        dialogIdRef.current = mythicDialogIdCounter++;
+    }
+    const [draggedState, setDraggedState] = React.useState({
+        style: {},
+        paperStyle: {
+            margin: "0",
+            height: "fit-content",
+            width: "stretch"
+        },
+        containerStyle: {
+
+        },
+        hideBackdrop: false,
+        modified: false
+    });
+    const descriptionElementRef = React.useRef(null);
+    React.useEffect(() => {
+        if(!props.open){
+            return undefined;
+        }
+        mythicDialogStack = mythicDialogStack.filter((id) => id !== dialogIdRef.current);
+        mythicDialogStack.push(dialogIdRef.current);
+        return () => {
+            mythicDialogStack = mythicDialogStack.filter((id) => id !== dialogIdRef.current);
+        };
+    }, [props.open]);
+    const isTopDialog = () => {
+        return mythicDialogStack[mythicDialogStack.length - 1] === dialogIdRef.current;
+    };
+    React.useEffect(() => {
+    if (props.open) {
+      const { current: descriptionElement } = descriptionElementRef;
+      if (descriptionElement !== null) {
+        descriptionElement.focus();
+      }
+    }
+  }, [props.open]);
+    const dialogOnClick = (e) => {
+        if(e.target.classList?.contains("MuiDialog-container")){
+            e.stopPropagation();
+            if(!isTopDialog()){
+                return;
+            }
+            if(draggedState.hideBackdrop){
+                props.onClose?.();
+            }
+        }
+    }
+    const dialogOnContextMenu = (e) => {
+        e.stopPropagation();
+    }
+    const handleOnClose = (event, reason) => {
+        if(reason === "backdropClick" || reason === "escapeKeyDown"){
+            event?.stopPropagation?.();
+            if(!isTopDialog()){
+                return;
+            }
+        }
+        if(reason === "backdropClick" && draggedState.hideBackdrop){
+            return;
+        }
+        props.onClose?.();
+    }
+    const onStart = React.useCallback((e, _data, paperNode) => {
+        if(e){
+            e.stopPropagation();
+            e.preventDefault();
+        }
+        setDraggedState((currentState) => {
+            if(currentState.modified){
+                return currentState;
+            }
+            const dragTarget = paperNode || e?.target?.closest?.(".MuiPaper-root") || e?.target?.offsetParent;
+            const targetWidth = dragTarget?.offsetWidth || e?.target?.offsetParent?.offsetWidth || 0;
+            return {
+                style: {},
+                paperStyle: {
+                    ...(targetWidth > 0 ? {width: targetWidth + "px"} : {}),
+                    margin: 0,
+                    overflowY: "auto",
+                },
+                containerStyle: {
+                    overflow: "visible",
+                },
+                hideBackdrop: true,
+                modified: true,
+            };
+        });
+    }, []);
+    const onStop = React.useCallback((e) => {
+        if(e){
+            e.stopPropagation();
+            e.preventDefault();
+        }
+    }, []);
+  return (
+          <Dialog
+            open={props.open}
+            onClose={handleOnClose}
+            scroll="paper"
+            maxWidth={props.maxWidth}
+            fullWidth={true}
+            PaperComponent={MythicDraggableDialogPaper}
+            PaperProps={{
+                draggableHandle: "#mythic-draggable-title",
+                draggableCancel: '[class*="MuiDialogContent-root"]',
+                draggableOnStart: onStart,
+                draggableOnStop: onStop,
+            }}
+            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": {
+                    borderRadius: "8px",
+                    backgroundColor: theme.palette.background.paper,
+                    border: `1px solid ${theme.borderColor}`,
+                    ...draggedState.paperStyle
+                },
+                ".MuiDialog-container": {
+                    ...draggedState.containerStyle
+                }
+            }}
+            onMouseDown={dialogOnClick}
+            onContextMenu={dialogOnContextMenu}
+          >
+            {props.innerDialog}
+          </Dialog>
+  );
+}
+
+export {MythicDialog} from "./MythicDialogBase";
+
+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"}}>
+                    <MythicActionButton iconOnly onClick={() => {setWrap(!wrap)}}>
+                        <WrapTextIcon color={wrap ? "success" : "secondary"} />
+                    </MythicActionButton>
+                </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) &&
+            <MythicDialogFooter>
+                {props.onClose &&
+                    <MythicDialogButton onClick={props.onClose}>
+                        Close
+                    </MythicDialogButton>
+                }
+                {props.onSubmit &&
+                    <MythicDialogButton intent="primary" onClick={onCommitSubmit}>
+                        {props.onSubmitText ? props.onSubmitText : "Submit"}
+                    </MythicDialogButton>
+                }
+            </MythicDialogFooter>
+        }
+    </React.Fragment>
+  );
+}
+
+const isPlainObject = (value) => {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+
+const parseJSONDialogValue = (value) => {
+  if(value === undefined || value === null){
+    return value;
+  }
+  if(typeof value !== "string"){
+    return value;
+  }
+  try{
+    return JSON.parse(value);
+  }catch(error){
+    return value;
+  }
+}
+
+const getJSONValueType = (value) => {
+  if(value === null){return "null"}
+  if(value === undefined){return "empty"}
+  if(Array.isArray(value)){return "array"}
+  if(isPlainObject(value)){return "object"}
+  return typeof value;
+}
+
+const getJSONValueCount = (value) => {
+  if(Array.isArray(value)){return value.length}
+  if(isPlainObject(value)){return Object.keys(value).length}
+  if(value === undefined || value === null || value === ""){return 0}
+  return 1;
+}
+
+const getArrayObjectHeaders = (rows) => {
+  const headers = [];
+  rows.forEach((row) => {
+    if(!isPlainObject(row)){return}
+    Object.keys(row).forEach((key) => {
+      if(!headers.includes(key)){
+        headers.push(key);
+      }
+    });
+  });
+  return headers;
+}
+
+const JSONTypeBadge = ({value}) => {
+  const type = getJSONValueType(value);
+  const count = getJSONValueCount(value);
+  const label = type === "array" ? `${count} item${count === 1 ? "" : "s"}` :
+      type === "object" ? `${count} field${count === 1 ? "" : "s"}` :
+      type;
+  return <MythicChip compact label={label} tone={["array", "object"].includes(type) ? "info" : "neutral"} />;
+}
+
+const JSONPrimitiveValue = ({name, value, me}) => {
+  const type = getJSONValueType(value);
+  if(type === "null" || type === "empty" || value === ""){
+    return <span className="mythic-json-value-empty text-xs text-disabled">None</span>
+  }
+  if(type === "boolean"){
+    return <MythicChip compact label={value ? "True" : "False"} tone={value ? "success" : "warning"} />;
+  }
+  return <span className="mythic-json-value-primitive text-primary text-xs leading-135 wrap-anywhere">{convertValueToContextValue(name, value, me)}</span>
+}
+
+const JSONTableCellValue = ({name, value, me, depth}) => {
+  if(Array.isArray(value) || isPlainObject(value)){
+    return (
+      <JSONTableValue
+        label={name}
+        value={value}
+        me={me}
+        depth={depth + 1}
+      />
+    );
+  }
+  return <JSONPrimitiveValue name={name} value={value} me={me} />;
+}
+
+const JSONTableValue = ({label, value, me, depth=0, leftColumn="Name", rightColumn="Value"}) => {
+  const type = getJSONValueType(value);
+  const showPanelHeader = Boolean(label) && depth === 0;
+  if(type !== "array" && type !== "object"){
+    return <JSONPrimitiveValue name={label || ""} value={value} me={me} />;
+  }
+  if(type === "object"){
+    const entries = Object.entries(value);
+    return (
+      <div className={`mythic-json-panel p-4 flex flex-column gap-4 rounded bg-neutral-1 border-subtle${depth === 0 ? " mythic-json-panel-root bg-surface-muted" : ""} min-w-0`}>
+        {showPanelHeader &&
+          <div className="mythic-json-panel-header items-center flex flex-wrap gap-4 justify-between min-w-0">
+            <span className="mythic-json-panel-title text-xs font-800 leading-125 min-w-0 wrap-anywhere text-primary">{label}</span>
+            <JSONTypeBadge value={value} />
+          </div>
+        }
+        {entries.length === 0 ? (
+          <div className="mythic-json-empty-state text-xs text-muted">No fields to display.</div>
+        ) : (
+          <TableContainer className="mythic-json-table-wrap overflow-auto rounded border-subtle">
+            <Table size="small" stickyHeader={depth === 0} style={{tableLayout: "fixed"}}>
+              <TableHead>
+                <TableRow>
+                  <TableCell style={{width: depth === 0 ? "14rem" : "12rem"}}>{leftColumn}</TableCell>
+                  <TableCell>{rightColumn}</TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {entries.map(([key, entryValue]) => (
+                  <TableRow key={`${depth}-${key}`} hover>
+                    <TableCell className="mythic-json-key-cell">
+                      <div className="mythic-json-key-stack flex flex-column gap-2 min-w-0">
+                        <span className="mythic-json-key text-xs font-800 leading-125 wrap-anywhere text-primary">{key}</span>
+                        <JSONTypeBadge value={entryValue} />
+                      </div>
+                    </TableCell>
+                    <TableCell className="mythic-json-value-cell text-primary text-xs leading-135 wrap-anywhere">
+                      <JSONTableCellValue name={key} value={entryValue} me={me} depth={depth} />
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+      </div>
+    );
+  }
+  const objectHeaders = getArrayObjectHeaders(value);
+  const isObjectArray = value.length > 0 && objectHeaders.length > 0 && value.every((row) => isPlainObject(row));
+  return (
+    <div className={`mythic-json-panel p-4 flex flex-column gap-4 rounded bg-neutral-1 border-subtle${depth === 0 ? " mythic-json-panel-root bg-surface-muted" : ""} min-w-0`}>
+      {showPanelHeader &&
+        <div className="mythic-json-panel-header items-center flex flex-wrap gap-4 justify-between min-w-0">
+          <span className="mythic-json-panel-title text-xs font-800 leading-125 min-w-0 wrap-anywhere text-primary">{label}</span>
+          <JSONTypeBadge value={value} />
+        </div>
+      }
+      {value.length === 0 ? (
+        <div className="mythic-json-empty-state text-xs text-muted">No items to display.</div>
+      ) : isObjectArray ? (
+        <TableContainer className="mythic-json-table-wrap overflow-auto rounded border-subtle">
+          <Table size="small" stickyHeader={depth === 0} style={{tableLayout: "fixed", minWidth: `${Math.max(38, objectHeaders.length * 12)}rem`}}>
+            <TableHead>
+              <TableRow>
+                <TableCell style={{width: "4rem"}}>#</TableCell>
+                {objectHeaders.map((header) => (
+                  <TableCell key={`array-header-${header}`} style={{width: "12rem"}}>{header}</TableCell>
+                ))}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {value.map((row, rowIndex) => (
+                <TableRow key={`array-row-${rowIndex}`} hover>
+                  <TableCell className="mythic-json-index-cell text-xs font-800 text-muted text-right">{rowIndex + 1}</TableCell>
+                  {objectHeaders.map((header) => (
+                    <TableCell key={`array-row-${rowIndex}-${header}`} className="mythic-json-value-cell text-primary text-xs leading-135 wrap-anywhere">
+                      <JSONTableCellValue name={header} value={row[header]} me={me} depth={depth} />
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      ) : (
+        <TableContainer className="mythic-json-table-wrap overflow-auto rounded border-subtle">
+          <Table size="small" stickyHeader={depth === 0} style={{tableLayout: "fixed"}}>
+            <TableHead>
+              <TableRow>
+                <TableCell style={{width: "4rem"}}>#</TableCell>
+                <TableCell>Value</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {value.map((entryValue, rowIndex) => (
+                <TableRow key={`array-value-row-${rowIndex}`} hover>
+                  <TableCell className="mythic-json-index-cell text-xs font-800 text-muted text-right">{rowIndex + 1}</TableCell>
+                  <TableCell className="mythic-json-value-cell text-primary text-xs leading-135 wrap-anywhere">
+                    <JSONTableCellValue name={`${label || "value"} ${rowIndex + 1}`} value={entryValue} me={me} depth={depth} />
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      )}
+    </div>
+  );
+}
+
+export function MythicViewJSONAsTableDialog(props) {
+  const parsedValue = React.useMemo(() => parseJSONDialogValue(props.value), [props.value]);
+  const rootLabel = props.title || "JSON Data";
+  return (
+    <React.Fragment>
+        <MythicDraggableDialogTitle style={{wordBreak: "break-all", maxWidth: "100%"}}>
+          <div className="mythic-json-title-row items-center flex flex-wrap gap-4 justify-between min-w-0 w-full">
+            <span>{rootLabel}</span>
+            <JSONTypeBadge value={parsedValue} />
+          </div>
+        </MythicDraggableDialogTitle>
+        <DialogContent dividers={true} className="mythic-dialog-body flex flex-column gap-6 mythic-json-dialog-body min-w-0 w-full overflow-auto">
+          <JSONTableValue
+            value={parsedValue}
+            me={props.me}
+            leftColumn={props.leftColumn || "Name"}
+            rightColumn={props.rightColumn || "Value"}
+          />
+        </DialogContent>
+        <MythicDialogFooter>
+          <MythicDialogButton onClick={props.onClose}>
+            Close
+          </MythicDialogButton>
+        </MythicDialogFooter>
+    </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}>
+            <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>
+        <MythicDialogFooter>
+          <MythicDialogButton onClick={props.onClose}>
+            Close
+          </MythicDialogButton>
+        </MythicDialogFooter>
+    </React.Fragment>
+  );
+}
+const convertValueToContextValue = (key, value, me) => {
+  const keyText = String(key || "").toLowerCase();
+  if(value === undefined || value === null){
+      return "";
+  }
+  if( keyText.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( keyText.includes("size") ){
+      try{
+          return TableRowSizeCell({cellData: value})
+      }catch(error){
+          console.log("failed to parse metadata as size", key, value);
+          return value;
+      }
+  } else if (isPlainObject(value)) {
+    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/MythicDialogBase.js

@@ -0,0 +1,111 @@
+import React from "react";
+import Dialog from "@mui/material/Dialog";
+import Paper from "@mui/material/Paper";
+import Draggable from "react-draggable";
+import {useTheme} from "@mui/material/styles";
+
+let mythicDialogIdCounter = 0;
+let mythicDialogStack = [];
+
+const MythicDraggableDialogPaper = React.forwardRef(function MythicDraggableDialogPaper(props, ref) {
+  const {draggableCancel, draggableHandle, draggableOnStart, draggableOnStop, ...paperProps} = props;
+  const nodeRef = React.useRef(null);
+  const setPaperRef = React.useCallback((node) => {
+    nodeRef.current = node;
+    if(typeof ref === "function"){
+      ref(node);
+    }else if(ref){
+      ref.current = node;
+    }
+  }, [ref]);
+  const onStart = React.useCallback((event, data) => {
+    return draggableOnStart?.(event, data, nodeRef.current);
+  }, [draggableOnStart]);
+  return (
+    <Draggable nodeRef={nodeRef} handle={draggableHandle} cancel={draggableCancel}
+               onStart={onStart} onStop={draggableOnStop}>
+      <Paper {...paperProps} ref={setPaperRef} />
+    </Draggable>
+  );
+});
+
+export function MythicDialog(props) {
+  const theme = useTheme();
+  const dialogIdRef = React.useRef(null);
+  if(dialogIdRef.current === null){
+    dialogIdRef.current = mythicDialogIdCounter++;
+  }
+  const [draggedState, setDraggedState] = React.useState({
+    style: {},
+    paperStyle: {margin: "0", height: "fit-content", width: "stretch"},
+    containerStyle: {},
+    hideBackdrop: false,
+    modified: false,
+  });
+  const descriptionElementRef = React.useRef(null);
+  React.useEffect(() => {
+    if(!props.open){return undefined;}
+    mythicDialogStack = mythicDialogStack.filter((id) => id !== dialogIdRef.current);
+    mythicDialogStack.push(dialogIdRef.current);
+    return () => {
+      mythicDialogStack = mythicDialogStack.filter((id) => id !== dialogIdRef.current);
+    };
+  }, [props.open]);
+  const isTopDialog = () => mythicDialogStack[mythicDialogStack.length - 1] === dialogIdRef.current;
+  React.useEffect(() => {
+    if(props.open && descriptionElementRef.current !== null){
+      descriptionElementRef.current.focus();
+    }
+  }, [props.open]);
+  const dialogOnClick = (event) => {
+    if(event.target.classList?.contains("MuiDialog-container")){
+      event.stopPropagation();
+      if(isTopDialog() && draggedState.hideBackdrop){
+        props.onClose?.();
+      }
+    }
+  };
+  const handleOnClose = (event, reason) => {
+    if(reason === "backdropClick" || reason === "escapeKeyDown"){
+      event?.stopPropagation?.();
+      if(!isTopDialog()){return;}
+    }
+    if(reason === "backdropClick" && draggedState.hideBackdrop){return;}
+    props.onClose?.();
+  };
+  const onStart = React.useCallback((event, _data, paperNode) => {
+    event?.stopPropagation?.();
+    event?.preventDefault?.();
+    setDraggedState((currentState) => {
+      if(currentState.modified){return currentState;}
+      const dragTarget = paperNode || event?.target?.closest?.(".MuiPaper-root") || event?.target?.offsetParent;
+      const targetWidth = dragTarget?.offsetWidth || event?.target?.offsetParent?.offsetWidth || 0;
+      return {
+        style: {},
+        paperStyle: {...(targetWidth > 0 ? {width: `${targetWidth}px`} : {}), margin: 0, overflowY: "auto"},
+        containerStyle: {overflow: "visible"},
+        hideBackdrop: true,
+        modified: true,
+      };
+    });
+  }, []);
+  const onStop = React.useCallback((event) => {
+    event?.stopPropagation?.();
+    event?.preventDefault?.();
+  }, []);
+  return (
+    <Dialog open={props.open} onClose={handleOnClose} scroll="paper" maxWidth={props.maxWidth} fullWidth={true}
+            PaperComponent={MythicDraggableDialogPaper}
+            PaperProps={{draggableHandle: "#mythic-draggable-title", draggableCancel: '[class*="MuiDialogContent-root"]', draggableOnStart: onStart, draggableOnStop: onStop}}
+            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": {borderRadius: "8px", backgroundColor: theme.palette.background.paper, border: `1px solid ${theme.borderColor}`, ...draggedState.paperStyle},
+              ".MuiDialog-container": {...draggedState.containerStyle},
+            }}
+            onMouseDown={dialogOnClick} onContextMenu={(event) => event.stopPropagation()}>
+      {props.innerDialog}
+    </Dialog>
+  );
+}

MythicReactUI/src/components/MythicComponents/MythicDialogLayout.js

@@ -0,0 +1,171 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import {MythicActionButton} from './MythicActionButton';
+import DialogActions from '@mui/material/DialogActions';
+import Typography from '@mui/material/Typography';
+
+const joinClasses = (...classes) => classes.filter(Boolean).join(" ");
+
+export function MythicDialogBody({children, className, compact = false, ...props}) {
+    return (
+        <Box
+            className={joinClasses("mythic-dialog-body flex flex-column gap-6 min-w-0 w-full", compact && "mythic-dialog-body-compact gap-4", className)}
+            {...props}
+        >
+            {children}
+        </Box>
+    );
+}
+
+export function MythicDialogSection({title, description, actions, children, className, ...props}) {
+    return (
+        <Box component="section" className={joinClasses("mythic-dialog-section bg-surface-muted border-subtle min-w-0 rounded", className)} {...props}>
+            {(title || description || actions) &&
+                <Box className="mythic-dialog-section-header items-start flex gap-6 justify-between min-w-0">
+                    <Box sx={{minWidth: 0}}>
+                        {title &&
+                            <Typography component="h3" className="mythic-dialog-section-title text-sm font-700 leading-125 text-primary">
+                                {title}
+                            </Typography>
+                        }
+                        {description &&
+                            <Typography component="div" className="mythic-dialog-section-description">
+                                {description}
+                            </Typography>
+                        }
+                    </Box>
+                    {actions &&
+                        <Box className="mythic-dialog-section-actions items-center flex flex-none gap-3">
+                            {actions}
+                        </Box>
+                    }
+                </Box>
+            }
+            {children}
+        </Box>
+    );
+}
+
+export function MythicDialogGrid({children, className, minWidth = "16rem", sx = {}, ...props}) {
+    return (
+        <Box
+            className={joinClasses("mythic-dialog-grid items-logical-start gap-5 min-w-0 w-full grid", className)}
+            sx={{"--mythic-dialog-grid-min": minWidth, ...sx}}
+            {...props}
+        >
+            {children}
+        </Box>
+    );
+}
+
+export function MythicDialogChoiceRow({children, className, ...props}) {
+    return (
+        <Box className={joinClasses("mythic-dialog-choice-row items-center gap-4 w-full grid", className)} {...props}>
+            {children}
+        </Box>
+    );
+}
+
+export function MythicDialogChoiceDivider({children = "OR", className, ...props}) {
+    return (
+        <Box component="span" className={joinClasses("mythic-dialog-choice-divider text-xs font-700 text-muted text-center", className)} {...props}>
+            {children}
+        </Box>
+    );
+}
+
+export function MythicDialogFooter({children, className, ...props}) {
+    return (
+        <DialogActions className={className} {...props}>
+            {children}
+        </DialogActions>
+    );
+}
+
+export function MythicDialogButton({children, className, intent = "secondary", ...props}) {
+    const tone = intent === "destructive" ? "error" : intent;
+    return (
+        <MythicActionButton
+            className={joinClasses("mythic-dialog-button", className)}
+            colorMode="always"
+            size="small"
+            tone={tone}
+            variant="contained"
+            {...props}
+        >
+            {children}
+        </MythicActionButton>
+    );
+}
+
+export function MythicForm({children, className, ...props}) {
+    return (
+        <Box component="form" className={joinClasses("mythic-form flex flex-column gap-6 min-w-0 w-full", className)} {...props}>
+            {children}
+        </Box>
+    );
+}
+
+export function MythicFormGrid({children, className, minWidth = "16rem", sx = {}, ...props}) {
+    return (
+        <Box
+            className={joinClasses("mythic-form-grid items-logical-start gap-6 min-w-0 w-full grid", className)}
+            sx={{"--mythic-form-grid-min": minWidth, ...sx}}
+            {...props}
+        >
+            {children}
+        </Box>
+    );
+}
+
+export function MythicFormField({children, className, description, label, required = false, ...props}) {
+    return (
+        <Box className={joinClasses("mythic-form-field flex flex-column gap-3 min-w-0", className)} {...props}>
+            {(label || description) &&
+                <Box className="mythic-form-field-copy min-w-0">
+                    {label &&
+                        <Typography component="label" className="mythic-form-field-label text-xs font-750 leading-125 text-primary">
+                            {label}{required && <Box component="span" className="mythic-form-field-required"> *</Box>}
+                        </Typography>
+                    }
+                    {description &&
+                        <Typography component="div" className="mythic-form-field-description">
+                            {description}
+                        </Typography>
+                    }
+                </Box>
+            }
+            <Box className="mythic-form-field-control min-w-0 w-full">
+                {children}
+            </Box>
+        </Box>
+    );
+}
+
+export function MythicFormNote({children, className, ...props}) {
+    return (
+        <Box className={joinClasses("mythic-form-note text-xs leading-140 rounded bg-neutral-1 border-subtle text-muted", className)} {...props}>
+            {children}
+        </Box>
+    );
+}
+
+export function MythicFormSwitchRow({control, label, description, className, ...props}) {
+    return (
+        <Box className={joinClasses("mythic-form-switch-row py-5 px-6 items-center flex gap-6 justify-between min-w-0 w-full rounded bg-surface border-subtle", className)} {...props}>
+            <Box sx={{minWidth: 0}}>
+                <Typography component="div" className="mythic-form-field-label text-xs font-750 leading-125 text-primary">
+                    {label}
+                </Typography>
+                {description &&
+                    <Typography component="div" className="mythic-form-field-description">
+                        {description}
+                    </Typography>
+                }
+            </Box>
+            <Box className="mythic-form-switch-control flex-none">
+                {control}
+            </Box>
+        </Box>
+    );
+}

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,17 @@
+import DialogTitle from '@mui/material/DialogTitle';
+import {useTheme} from '@mui/material/styles';
+
+
+export const MythicDraggableDialogTitle = ({children}) => {
+    const theme = useTheme();
+    return (
+        <DialogTitle id="mythic-draggable-title" style={{
+            cursor: 'move',
+            width: "100%",
+            backgroundColor: theme.palette.background.paper,
+            color: theme.palette.text.primary,
+        }}>
+            {children}
+        </DialogTitle>
+    )
+}

MythicReactUI/src/components/MythicComponents/MythicDraggableList.js

@@ -0,0 +1,20 @@
+
+import {createPortal} from 'react-dom';
+
+export const reorder = (
+    list,
+    startIndex,
+    endIndex
+) => {
+    const result = Array.from(list);
+    const [removed] = result.splice(startIndex, 1);
+    result.splice(endIndex, 0, removed);
+    return result;
+};
+
+export const MythicDraggablePortal = ({children, isDragging}) => {
+    if(isDragging && typeof document !== "undefined"){
+        return createPortal(children, document.body);
+    }
+    return children;
+};

MythicReactUI/src/components/MythicComponents/MythicFeedbackDialog.js

@@ -0,0 +1,162 @@
+import React from 'react';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import FormControl from '@mui/material/FormControl';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
+import TextField from '@mui/material/TextField';
+import {gql } from '@apollo/client';
+import {snackActions} from '../utilities/Snackbar';
+import {useMutation } from '@apollo/client';
+import {
+  MythicDialogBody,
+  MythicDialogButton,
+  MythicDialogFooter,
+  MythicDialogGrid,
+  MythicDialogSection,
+  MythicForm,
+  MythicFormField,
+  MythicFormNote
+} from './MythicDialogLayout';
+
+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("");
+  const messageTypeOptions = [
+    {display: "Bug", value: "bug", description: "Something is broken or behaving unexpectedly."},
+    {display: "Feature Request", value: "feature_request", description: "A workflow, capability, or quality-of-life improvement."},
+    {display: "Confusing UI", value: "confusing_ui", description: "A part of the interface is unclear or hard to use."},
+    {display: "Detection", value: "detection", description: "Detection, telemetry, or visibility feedback."},
+  ];
+  const [messageType, setMessageType] = React.useState("bug");
+  const [submitFeedback, {loading}] = 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 = () => {
+      const trimmedMessage = message.trim();
+      if(trimmedMessage.length === 0){
+        snackActions.warning("Please include feedback before submitting.");
+        return;
+      }
+      let webhookData = {};
+      if(Number(taskID) > 0){
+        webhookData["task_display_id"] = String(Number(taskID));
+      }
+      webhookData["message"] =  trimmedMessage;
+      webhookData["feedback_type"] = messageType;
+      submitFeedback({variables: {webhookType: "new_feedback", webhookData: webhookData}});
+  }
+  const handleMessageTypeChange = (evt) => {
+    setMessageType(evt.target.value);
+  }
+  const handleTaskIDChange = (evt) => {
+    setTaskID(evt.target.value);
+  }
+  const handleMessageChange = (evt) => {
+    setMessage(evt.target.value);
+  }
+  const onSubmitForm = (event) => {
+    event.preventDefault();
+    handleSubmit();
+  }
+  const selectedMessageType = messageTypeOptions.find((opt) => opt.value === messageType);
+  const canSubmit = message.trim().length > 0 && !loading;
+  
+return (
+  <React.Fragment>
+      <DialogTitle>{props.title || "Submit Feedback"}</DialogTitle>
+      <DialogContent dividers={true}>
+        <MythicDialogBody>
+          <MythicDialogSection
+              title="Feedback Destination"
+              description="Send this report to the feedback webhook configured for the current operation."
+          >
+            <MythicFormNote>
+              Use this for bugs, workflow friction, feature ideas, detection notes, or anything operators should be able to capture without leaving Mythic.
+            </MythicFormNote>
+          </MythicDialogSection>
+          <MythicDialogSection
+              title="Report Details"
+              description="Capture the category, optional task context, and the feedback details."
+          >
+            <MythicForm onSubmit={onSubmitForm}>
+              <MythicDialogGrid minWidth="14rem">
+                <MythicFormField label="Feedback Type" description={selectedMessageType?.description} required>
+                  <FormControl fullWidth size="small">
+                    <Select
+                        labelId="feedback-type-select-label"
+                        id="feedback-type-select"
+                        value={messageType}
+                        onChange={handleMessageTypeChange}
+                    >
+                      {messageTypeOptions.map( (opt) => (
+                          <MenuItem value={opt.value} key={opt.value}>{opt.display}</MenuItem>
+                      ) )}
+                    </Select>
+                  </FormControl>
+                </MythicFormField>
+                <MythicFormField
+                    label="Task"
+                    description="Optional task display ID for feedback tied to specific output or tasking."
+                >
+                  <TextField
+                      fullWidth
+                      size="small"
+                      type="number"
+                      value={taskID}
+                      onChange={handleTaskIDChange}
+                      placeholder="Optional"
+                      inputProps={{min: 0}}
+                  />
+                </MythicFormField>
+              </MythicDialogGrid>
+              <MythicFormField
+                  label="Feedback"
+                  description="Include the context an operator or maintainer would need to understand the issue."
+                  required
+              >
+                <TextField
+                    autoFocus
+                    fullWidth
+                    multiline
+                    minRows={6}
+                    maxRows={10}
+                    value={message}
+                    onChange={handleMessageChange}
+                    placeholder="What happened, what did you expect, and what would make this easier?"
+                />
+              </MythicFormField>
+            </MythicForm>
+          </MythicDialogSection>
+        </MythicDialogBody>
+      </DialogContent>
+      <MythicDialogFooter>
+        <MythicDialogButton onClick={props.onClose}>
+          Close
+        </MythicDialogButton>
+        <MythicDialogButton onClick={handleSubmit} intent="primary" disabled={!canSubmit}>
+          {loading ? "Submitting..." : "Submit Feedback"}
+        </MythicDialogButton>
+      </MythicDialogFooter>
+</React.Fragment>
+  );
+}

MythicReactUI/src/components/MythicComponents/MythicFileBrowserVirtualTree.js

@@ -0,0 +1,483 @@
+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 { 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
+  }
+) => ({
+  height: "100%",
+  minHeight: 0,
+  minWidth: 0,
+  overflow: "hidden",
+  width: "100%",
+
+  [`& .${classes.rowContainer}`]: {
+    cursor: "pointer",
+    overflow: "hidden",
+    transition: "background-color 120ms ease, color 120ms ease",
+  },
+
+  [`& .${classes.rowContainer}:hover`]: {
+    backgroundColor: theme.palette.action.hover,
+  },
+
+  [`& .${classes.row}`]: {
+    display: "flex",
+    alignItems: "center",
+    height: "100%",
+    minWidth: "fit-content",
+    paddingRight: theme.spacing(1),
+    userSelect: "none",
+    whiteSpace: "nowrap",
+    width: "100%",
+  },
+
+  [`& .${classes.row}[data-deleted="true"]`]: {
+    textDecoration: "line-through",
+  },
+
+  [`& .${classes.rowButtonWrapper}`]: {
+    alignSelf: "stretch",
+    borderLeft: `2px dashed ${alpha(theme.palette.text.primary, 0.34)}`,
+    flex: "0 0 14px",
+    marginLeft: 7,
+  },
+
+  [`& .${classes.rowButton}`]: {
+    alignItems: "center",
+    display: "inline-flex",
+    flex: "0 0 auto",
+    justifyContent: "center",
+    width: theme.spacing(3),
+  },
+
+  [`& .${classes.rowLabel}`]: {
+    color: theme.palette.text.primary,
+    fontFamily: "inherit",
+    fontSize: theme.typography.pxToRem(13),
+    lineHeight: 1.35,
+    margin: 0,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+  },
+
+  [`& .${classes.rowLabel}[data-muted="true"]`]: {
+    color: theme.palette.text.secondary,
+  },
+
+  [`& .${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}`]: {
+      flex: "0 0 auto",
+      height: 16,
+      marginLeft: 3,
+      marginRight: 5,
+      verticalAlign: 'middle',
+      width: 16,
+  },
+
+  [`& .${classes.icon}[data-folder="true"]`]: {
+      color: theme.folderColor,
+  },
+
+  [`& .${classes.icon}[data-empty="true"]`]: {
+      color: theme.emptyFolderColor,
+  },
+
+  [`& .${classes.details}`]: {
+      alignItems: 'center',
+  },
+
+  [`& .${classes.column}`]: {
+      padding: '0 5px 0 0',
+      display: 'inline-block',
+      margin: 0,
+      height: 'auto',
+  },
+
+  [`& .${classes.paper}`]: {
+      width: '100%',
+      height: "100%",
+      marginBottom: 0,
+      minHeight: 0,
+      minWidth: 0,
+      overflow: "hidden",
+  },
+
+  [`& .${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 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={`${classes.rowContainer} hoverme ${selectedPath()}`.trim()}
+         style={ListProps.style}
+         onContextMenu={handleContextClick}
+         onClick={handleOnClickRow}>
+    <div className={classes.row} data-deleted={itemTreeData.deleted ? "true" : undefined}>
+        {[...Array(itemTreeData.depth)].map((o, i) => (
+            <span
+                className={classes.rowButtonWrapper}
+                key={'folder' + itemTreeData.id + 'lines' + i}
+            />
+        ))}
+
+          {itemTreeData.is_group ? (
+              <WidgetsIcon className={classes.icon} />
+          ): itemTreeData.root  ? (
+              <ComputerIcon className={classes.icon}  />
+          ) : !itemTreeData.can_have_children ? (
+              <DescriptionIcon className={classes.icon} />
+          ) : itemTreeData.isOpen ? (
+            <FontAwesomeIcon 
+              icon={faFolderOpen} 
+              className={classes.icon}
+              data-folder={item?.has_children || item.success ? "true" : undefined}
+              data-empty={item?.has_children || item.success ? undefined : "true"}
+              size={"lg"}
+              onClick={handleOnClickButton} />
+          ) : (
+              <FontAwesomeIcon 
+                className={classes.icon}
+                data-folder={item?.has_children || item.success ? "true" : undefined}
+                data-empty={item?.has_children || item.success ? undefined : "true"}
+                size={"lg"}
+                icon={faFolder} onClick={handleOnClickButton} />
+          )}
+          <Typography
+              className={classes.rowLabel}
+              data-muted={item?.has_children || item.success !== null ? undefined : "true"}
+              component="pre">
+              {itemTreeData.name}
+          </Typography>
+
+          {item.success === true && itemTreeData.depth > 0 ? (
+              <MythicStyledTooltip title='Successfully listed contents of folder'>
+                  <CheckCircleOutlineIcon className={classes.icon} fontSize='small' color="success" />
+              </MythicStyledTooltip>
+          ) : item.success === false && itemTreeData.depth > 0 ? (
+              <MythicStyledTooltip title='Failed to list contents of folder'>
+                  <ErrorIcon className={classes.icon} fontSize='small' color="error" />
+              </MythicStyledTooltip>
+          ) : null}
+
+    </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 ? (
+    <div className="mythic-process-browser-table-shell flex flex-column h-full min-h-0 min-w-0 overflow-hidden w-full relative">
+      <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>
+    </div>
+  ) : 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 {gql} from '@apollo/client';
+import {b64DecodeUnicode} from "../pages/Callbacks/ResponseDisplay";
+import {PreviewFileMediaDialog} from "./PreviewFileMedia";
+import {faPhotoVideo} from '@fortawesome/free-solid-svg-icons';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {useMythicLazyQuery} from "../utilities/useMythicLazyQuery";
+import {FileDownloadLinkWithAuth} from "../utilities/FileDownloadWithAuth";
+
+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>
+            <FileDownloadLinkWithAuth 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}
+            </FileDownloadLinkWithAuth>
+            {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,148 @@
+import {snackActions} from '../utilities/Snackbar';
+import {mythicFetch} from '../utilities/MythicConnection';
+
+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 mythicFetch('/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 => {
+          if(data?.status === "error"){
+            snackActions.error(data.error || "Failed to upload file");
+            return null;
+          }
+          return data?.agent_file_id || 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 UploadDirectFile = async (agent_file_id, file) => {
+  let formData = new FormData();
+  try{
+    formData.append("file", file);
+    //snackActions.info("Saving " + file.name + " to Mythic...", {autoHideDuration: 1000});
+  }catch(error){
+    console.log(error)
+    return null;
+  }
+  try{
+    const upload_response = await mythicFetch('/direct/upload/' + agent_file_id, {
+      method: 'POST',
+      body: formData,
+      headers: {
+        "Authorization": `Bearer ${localStorage.getItem("access_token")}`,
+        MythicSource: "web",
+      }
+    });
+    try{
+      return upload_response.json().then(data => {
+        if(data?.status === "error"){
+          snackActions.error(data.error || "Failed to save file");
+          return data;
+        }
+        return data;
+      }).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;
+      });
+    }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 mythicFetch('/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 mythicFetch('/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,263 @@
+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,
+            MenuListProps,
+            PaperProps,
+        },
+        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={{
+                        ...PaperProps,
+                        sx: { minWidth: minWidth ?? 0, ...(PaperProps?.sx || {}) }
+                    }}
+                    MenuListProps={MenuListProps}
+                    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,16 @@
+
+export const MythicPageBody = ({children}) => {
+    return (
+        <div style={{
+            height: "100%",
+            display: "flex",
+            flexDirection: "column",
+            padding: "0.5rem",
+            gap: "0.2rem",
+            minWidth: 0,
+            minHeight: 0,
+        }}>
+            {children}
+        </div>
+    )
+}

MythicReactUI/src/components/MythicComponents/MythicPageHeader.js

@@ -0,0 +1,270 @@
+import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import {alpha, useTheme} from '@mui/material/styles';
+import {MythicChip} from './MythicChip';
+
+export const MythicPageHeader = ({
+    actions,
+    children,
+    className = "",
+    dense = false,
+    icon,
+    meta,
+    style = {},
+    subtitle,
+    sx = {},
+    title,
+    headerVariant = "h6",
+}) => {
+    const theme = useTheme();
+    const headerTextColor = theme.pageHeaderText?.main || theme.palette.text.primary;
+    const supportingTextColor = alpha(headerTextColor, 0.78);
+    const hasActionContent = actions || children;
+    const actionSurface = alpha(headerTextColor, 0.1);
+    const actionSurfaceHover = alpha(headerTextColor, 0.16);
+    const actionSurfaceActive = alpha(headerTextColor, 0.23);
+    const actionBorder = alpha(headerTextColor, 0.24);
+    const actionBorderHover = alpha(headerTextColor, 0.42);
+    return (
+        <Paper
+            className={`mythic-page-header${className ? ` ${className}` : ""}`}
+            elevation={0}
+            style={style}
+            sx={{
+                alignItems: {xs: "stretch", md: "center"},
+                backgroundColor: theme.pageHeader.main,
+                border: `1px solid ${alpha(headerTextColor, 0.18)}`,
+                borderRadius: `${theme.shape.borderRadius}px`,
+                boxShadow: `inset 0 1px 0 ${alpha(headerTextColor, 0.12)}`,
+                color: headerTextColor,
+                display: "flex",
+                flex: "0 0 auto",
+                flexDirection: {xs: "column", md: "row"},
+                flexWrap: {xs: "nowrap", md: "wrap"},
+                gap: dense ? 0.75 : 1,
+                height: "auto",
+                justifyContent: "space-between",
+                maxHeight: "none",
+                minHeight: dense ? 44 : 58,
+                minWidth: 0,
+                overflow: "visible",
+                p: dense ? "0.5rem 0.75rem" : "0.7rem 0.85rem",
+                width: "100%",
+                "& .MuiButton-root, & .MuiToggleButton-root": {
+                    alignItems: "center",
+                    backgroundColor: `${actionSurface} !important`,
+                    border: `1px solid ${actionBorder} !important`,
+                    borderRadius: `${theme.shape.borderRadius}px`,
+                    boxShadow: "none !important",
+                    color: `${headerTextColor} !important`,
+                    fontSize: "0.76rem",
+                    fontWeight: 750,
+                    gap: 0.35,
+                    justifyContent: "center",
+                    letterSpacing: 0,
+                    lineHeight: 1.2,
+                    minHeight: 32,
+                    minWidth: {xs: "auto", sm: "7rem"},
+                    px: 1.05,
+                    textTransform: "none",
+                    whiteSpace: "nowrap",
+                    "&:hover": {
+                        backgroundColor: `${actionSurfaceHover} !important`,
+                        borderColor: `${actionBorderHover} !important`,
+                        boxShadow: `inset 0 1px 0 ${alpha(headerTextColor, 0.12)}`,
+                    },
+                },
+                "& .MuiButton-root.Mui-focusVisible, & .MuiToggleButton-root.Mui-focusVisible": {
+                    outline: `2px solid ${alpha(headerTextColor, 0.38)}`,
+                    outlineOffset: 2,
+                },
+                "& .MuiButton-root.Mui-disabled, & .MuiToggleButton-root.Mui-disabled": {
+                    backgroundColor: `${alpha(headerTextColor, 0.04)} !important`,
+                    borderColor: `${alpha(headerTextColor, 0.1)} !important`,
+                    color: `${alpha(headerTextColor, 0.38)} !important`,
+                },
+                "& .MuiToggleButton-root.Mui-selected": {
+                    backgroundColor: `${actionSurfaceActive} !important`,
+                    borderColor: `${alpha(headerTextColor, 0.48)} !important`,
+                    color: `${headerTextColor} !important`,
+                    boxShadow: `inset 0 1px 0 ${alpha(headerTextColor, 0.16)}`,
+                    "&:hover": {
+                        backgroundColor: `${alpha(headerTextColor, 0.28)} !important`,
+                    },
+                },
+                "& .MuiButton-startIcon, & .MuiButton-endIcon": {
+                    color: "inherit",
+                    marginLeft: 0,
+                    marginRight: 0,
+                },
+                "& .MuiButton-startIcon": {
+                    paddingRight: "0.25rem",
+                },
+                "& .MuiButton-endIcon": {
+                    paddingLeft: "0.25rem",
+                },
+                "& .MuiIconButton-root": {
+                    backgroundColor: `${actionSurface} !important`,
+                    border: `1px solid ${actionBorder} !important`,
+                    borderRadius: `${theme.shape.borderRadius}px`,
+                    color: `${headerTextColor} !important`,
+                    height: 32,
+                    width: 32,
+                    "&:hover": {
+                        backgroundColor: `${actionSurfaceHover} !important`,
+                        borderColor: `${actionBorderHover} !important`,
+                    },
+                    "&.Mui-disabled": {
+                        backgroundColor: `${alpha(headerTextColor, 0.04)} !important`,
+                        borderColor: `${alpha(headerTextColor, 0.1)} !important`,
+                        color: `${alpha(headerTextColor, 0.38)} !important`,
+                    },
+                },
+                ...sx,
+            }}
+        >
+            <Stack direction="row" sx={{gap: 1, minWidth: 0, flex: {xs: "0 1 auto", md: "1 1 24rem"}}}>
+                {icon &&
+                    <Box sx={{
+                        alignItems: "center",
+                        backgroundColor: alpha(headerTextColor, 0.1),
+                        border: `1px solid ${alpha(headerTextColor, 0.16)}`,
+                        borderRadius: `${theme.shape.borderRadius}px`,
+                        display: "inline-flex",
+                        flex: "0 0 auto",
+                        height: dense ? 32 : 36,
+                        justifyContent: "center",
+                        mt: subtitle || meta ? 0.15 : 0,
+                        width: dense ? 32 : 36,
+                    }}>
+                        {icon}
+                    </Box>
+                }
+                <Box sx={{display: "flex", flexDirection: "column", gap: 0.25, minWidth: 0}}>
+                    <Typography
+                        variant={headerVariant}
+                        sx={{
+                            color: headerTextColor,
+                            fontWeight: 750,
+                            letterSpacing: 0,
+                            lineHeight: 1.18,
+                            minWidth: 0,
+                        }}
+                    >
+                        {title}
+                    </Typography>
+                    {subtitle &&
+                        <Typography
+                            component="div"
+                            sx={{
+                                color: supportingTextColor,
+                                fontSize: "0.78rem",
+                                fontWeight: 600,
+                                lineHeight: 1.35,
+                                maxWidth: "64rem",
+                            }}
+                        >
+                            {subtitle}
+                        </Typography>
+                    }
+                    {meta &&
+                        <Box sx={{alignItems: "center", display: "flex", flexWrap: "wrap", gap: 0.5, mt: 0.25}}>
+                            {meta}
+                        </Box>
+                    }
+                </Box>
+            </Stack>
+            {hasActionContent &&
+                <Stack direction="row" sx={{
+                    alignContent: "center",
+                    alignItems: "center",
+                    color: headerTextColor,
+                    flex: "0 1 auto",
+                    flexWrap: "wrap",
+                    gap: 0.45,
+                    justifyContent: {xs: "flex-start", md: "flex-end"},
+                    maxWidth: "100%",
+                    minWidth: 0,
+                }}>
+                    {actions}
+                    {children}
+                </Stack>
+            }
+        </Paper>
+    );
+}
+
+export const MythicPageHeaderChip = ({status, sx = {}, ...props}) => {
+    const theme = useTheme();
+    const headerTextColor = theme.pageHeaderText?.main || theme.palette.text.primary;
+    const normalizedStatus = status === "active" || status === "enabled" ? "success" :
+        status === "inactive" || status === "disabled" ? "warning" :
+        status === "neutral" ? "secondary" : status;
+    const statusColor = normalizedStatus ? theme.palette[normalizedStatus]?.main : null;
+    const chipColor = statusColor || alpha(headerTextColor, 0.88);
+    return (
+        <MythicChip
+            size="small"
+            tone={normalizedStatus || "secondary"}
+            variant="outlined"
+            {...props}
+            sx={{
+                backgroundColor: statusColor ? alpha(statusColor, theme.palette.mode === "dark" ? 0.22 : 0.13) : alpha(headerTextColor, 0.08),
+                borderColor: statusColor ? alpha(statusColor, theme.palette.mode === "dark" ? 0.55 : 0.38) : alpha(headerTextColor, 0.2),
+                color: chipColor,
+                fontSize: "0.72rem",
+                fontWeight: 750,
+                height: 22,
+                letterSpacing: 0,
+                "& .MuiChip-icon": {
+                    color: statusColor ? chipColor : alpha(headerTextColor, 0.82),
+                },
+                ...sx,
+            }}
+        />
+    );
+};
+
+export const MythicSectionHeader = ({
+    actions,
+    dense = false,
+    subtitle,
+    sx = {},
+    title,
+}) => {
+    const theme = useTheme();
+    const headerTextColor = theme.pageHeaderText?.main || theme.palette.text.primary;
+    const sectionAccentColor = theme.sectionHeader?.accent || theme.palette.primary.main;
+    return (
+        <MythicPageHeader
+            actions={actions}
+            className="mythic-section-header overflow-hidden relative"
+            dense={dense}
+            subtitle={subtitle}
+            title={title}
+            sx={{
+                backgroundImage: theme.gradients?.sectionHeader,
+                borderColor: alpha(sectionAccentColor, theme.palette.mode === "dark" ? 0.55 : 0.38),
+                boxShadow: `inset 0 1px 0 ${alpha(headerTextColor, 0.22)}, 0 2px 6px ${alpha(theme.palette.common.black, theme.palette.mode === "dark" ? 0.28 : 0.12)}`,
+                mb: 0.5,
+                mt: dense ? 1 : 1.25,
+                overflow: "hidden",
+                pl: dense ? 1.45 : 1.6,
+                position: "relative",
+                "&::before": {
+                    backgroundColor: sectionAccentColor,
+                    bottom: 0,
+                    boxShadow: `0 0 0 1px ${alpha(headerTextColor, 0.2)}`,
+                    content: '""',
+                    left: 0,
+                    position: "absolute",
+                    top: 0,
+                    width: 6,
+                },
+                ...sx,
+            }}
+        />
+    );
+};

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

@@ -0,0 +1,213 @@
+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 === 0 ? '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 ownsContextRowRef = React.useRef(false);
+    const updateRowClass = useCallback((className, shouldAdd) => {
+        const cells = document.getElementsByClassName(rowClassName);
+        if(cells.length > 0){
+            for(const cell of cells){
+                cell.classList.toggle(className, shouldAdd);
+            }
+        }
+    }, [rowClassName]);
+    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
+        },
+        [columnIndex, 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 customRowClass = data.items[rowIndex][columnIndex]?.props?.rowData?.rowClassName || "";
+    const rowFirstCellClass = columnIndex === 0 ? classes.rowFirstCell : "";
+    const rowLastCellClass = columnIndex === data.items[rowIndex].length - 1 ? classes.rowLastCell : "";
+    const rowInteractiveClass = data.onRowClick ? classes.rowInteractive : "";
+    const setHoveredRow = useCallback((enabled) => {
+        updateRowClass(classes.hoveredRow, enabled);
+    }, [updateRowClass]);
+    const setContextRow = useCallback((enabled) => {
+        updateRowClass(classes.contextRow, enabled);
+    }, [updateRowClass]);
+    const onMouseEnter = useCallback(() => {
+        setHoveredRow(true);
+    }, [setHoveredRow]);
+    const onMouseLeave = useCallback(() => {
+        if(!ownsContextRowRef.current){
+            setHoveredRow(false);
+        }
+    }, [setHoveredRow]);
+    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){
+            ownsContextRowRef.current = true;
+            setContextRow(true);
+            setHoveredRow(true);
+        } else if(ownsContextRowRef.current){
+            ownsContextRowRef.current = false;
+            setContextRow(false);
+            setHoveredRow(false);
+        }
+    }, [openContextMenu, setContextRow, setHoveredRow]);
+    React.useEffect( () => {
+        return () => {
+            if(ownsContextRowRef.current){
+                setContextRow(false);
+                setHoveredRow(false);
+            }
+        };
+    }, [setContextRow, setHoveredRow]);
+    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} ${customRowClass} ${rowFirstCellClass} ${rowLastCellClass} ${rowInteractiveClass}`}
+            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}
+                                className={option.className || (option.danger ? "mythic-action-tone-hover mythic-tone-error" : undefined)}
+                                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}
+                                        className={menuOption.className || (menuOption.danger ? "mythic-action-tone-hover mythic-tone-error" : undefined)}
+                                        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/GridColumnFilterDialog.js

@@ -0,0 +1,181 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import {MythicActionButton} from '../MythicActionButton';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Switch from '@mui/material/Switch';
+import TextField from '@mui/material/TextField';
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import Typography from '@mui/material/Typography';
+
+const DEFAULT_FILTER = {
+    include: [],
+    exclude: [],
+    includeMode: "any",
+    caseSensitive: false,
+};
+
+const splitFilterTerms = (value) => {
+    if(Array.isArray(value)){
+        return value.map((entry) => String(entry).trim()).filter(Boolean);
+    }
+    if(value === undefined || value === null){
+        return [];
+    }
+    return String(value)
+        .split(/[\n,]+/)
+        .map((entry) => entry.trim())
+        .filter(Boolean);
+};
+
+export const normalizeGridColumnFilter = (value) => {
+    if(value === undefined || value === null){
+        return {...DEFAULT_FILTER};
+    }
+    if(typeof value === "string" || typeof value === "number" || typeof value === "boolean"){
+        return {
+            ...DEFAULT_FILTER,
+            include: splitFilterTerms(value),
+        };
+    }
+    if(typeof value === "object"){
+        return {
+            include: splitFilterTerms(value.include),
+            exclude: splitFilterTerms(value.exclude),
+            includeMode: value.includeMode === "all" ? "all" : "any",
+            caseSensitive: Boolean(value.caseSensitive),
+        };
+    }
+    return {...DEFAULT_FILTER};
+};
+
+export const isGridColumnFilterActive = (value) => {
+    const normalizedFilter = normalizeGridColumnFilter(value);
+    return normalizedFilter.include.length > 0 || normalizedFilter.exclude.length > 0;
+};
+
+export const getUpdatedGridFilterOptions = (filterOptions, key, value) => {
+    const nextFilterOptions = {...filterOptions};
+    if(!key){
+        return nextFilterOptions;
+    }
+    const normalizedFilter = normalizeGridColumnFilter(value);
+    if(isGridColumnFilterActive(normalizedFilter)){
+        nextFilterOptions[key] = normalizedFilter;
+    }else{
+        delete nextFilterOptions[key];
+    }
+    return nextFilterOptions;
+};
+
+export const gridValuePassesFilter = (value, filterOption) => {
+    const normalizedFilter = normalizeGridColumnFilter(filterOption);
+    if(!isGridColumnFilterActive(normalizedFilter)){
+        return true;
+    }
+    const cellText = String(value ?? "");
+    const haystack = normalizedFilter.caseSensitive ? cellText : cellText.toLowerCase();
+    const normalizeTerm = (term) => normalizedFilter.caseSensitive ? term : term.toLowerCase();
+    const termMatches = (term) => haystack.includes(normalizeTerm(term));
+    const includeMatches = normalizedFilter.include.length === 0 ? true :
+        normalizedFilter.includeMode === "all" ?
+            normalizedFilter.include.every(termMatches) :
+            normalizedFilter.include.some(termMatches);
+    if(!includeMatches){
+        return false;
+    }
+    return !normalizedFilter.exclude.some(termMatches);
+};
+
+export function GridColumnFilterDialog({filterValue, onClose, onSubmit, selectedColumn}) {
+    const normalizedFilter = React.useMemo(() => normalizeGridColumnFilter(filterValue), [filterValue]);
+    const [includeText, setIncludeText] = React.useState(normalizedFilter.include.join("\n"));
+    const [excludeText, setExcludeText] = React.useState(normalizedFilter.exclude.join("\n"));
+    const [includeMode, setIncludeMode] = React.useState(normalizedFilter.includeMode);
+    const [caseSensitive, setCaseSensitive] = React.useState(normalizedFilter.caseSensitive);
+    const columnName = selectedColumn?.name || selectedColumn?.plaintext || selectedColumn?.key || "Column";
+    const buildFilter = () => ({
+        include: splitFilterTerms(includeText),
+        exclude: splitFilterTerms(excludeText),
+        includeMode,
+        caseSensitive,
+    });
+    const handleSubmit = () => {
+        onSubmit(buildFilter());
+        onClose();
+    };
+    const handleClear = () => {
+        onSubmit({...DEFAULT_FILTER});
+        onClose();
+    };
+    const onIncludeModeChange = (event, value) => {
+        if(value !== null){
+            setIncludeMode(value);
+        }
+    };
+    return (
+        <div className="mythic-grid-filter-dialog bg-surface-raised text-primary">
+            <DialogTitle className="mythic-grid-filter-dialog-title bg-header text-header text-base font-850 leading-120 border-b-subtle">
+                Filter {columnName}
+            </DialogTitle>
+            <DialogContent className="mythic-grid-filter-dialog-content flex flex-column">
+                <Typography className="mythic-grid-filter-dialog-copy text-muted text-xs font-650 leading-135" component="div">
+                    Add one term per line, or separate terms with commas. Include terms decide what can stay visible; exclude terms remove matching rows.
+                </Typography>
+                <Box className="mythic-grid-filter-dialog-mode-row items-center flex gap-6 justify-between">
+                    <Typography className="mythic-grid-filter-dialog-label text-xs font-800 text-primary" component="div">
+                        Include matching
+                    </Typography>
+                    <ToggleButtonGroup
+                        exclusive
+                        onChange={onIncludeModeChange}
+                        size="small"
+                        value={includeMode}
+                    >
+                        <ToggleButton value="any">Any</ToggleButton>
+                        <ToggleButton value="all">All</ToggleButton>
+                    </ToggleButtonGroup>
+                </Box>
+                <div className="mythic-grid-filter-dialog-fields grid grid-cols-2">
+                    <TextField
+                        fullWidth
+                        label="Include rows matching"
+                        minRows={4}
+                        multiline
+                        autoFocus
+                        onChange={(event) => setIncludeText(event.target.value)}
+                        placeholder={"admin\nprod"}
+                        value={includeText}
+                    />
+                    <TextField
+                        fullWidth
+                        label="Exclude rows matching"
+                        minRows={4}
+                        multiline
+                        onChange={(event) => setExcludeText(event.target.value)}
+                        placeholder={"debug\ntest"}
+                        value={excludeText}
+                    />
+                </div>
+                <FormControlLabel
+                    control={
+                        <Switch
+                            checked={caseSensitive}
+                            onChange={(event) => setCaseSensitive(event.target.checked)}
+                            size="small"
+                        />
+                    }
+                    label="Case sensitive"
+                />
+            </DialogContent>
+            <DialogActions className="mythic-grid-filter-dialog-actions py-6 px-8 border-t-subtle">
+                <MythicActionButton onClick={handleClear}>Clear</MythicActionButton>
+                <MythicActionButton onClick={onClose}>Cancel</MythicActionButton>
+                <MythicActionButton colorMode="always" onClick={handleSubmit} tone="primary" variant="contained">Apply Filter</MythicActionButton>
+            </DialogActions>
+        </div>
+    );
+}

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

@@ -0,0 +1,171 @@
+import { Box, Typography } from '@mui/material';
+import { useCallback } from 'react';
+import useSingleAndDoubleClick from '../../utilities/useSingleAndDoubleClick';
+import {classes} from './styles';
+import React from 'react';
+import FilterAltOutlinedIcon from '@mui/icons-material/FilterAltOutlined';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import {ContextMenu} from "./Cell";
+
+const HeaderCell = ({
+    onClick = () => {},
+    onDoubleClick = () => {},
+    contextMenuOptions = [],
+    sortIndicatorIndex,
+    sortDirection,
+    headerNameKey = "name",
+    isResizing = false,
+    onResizePointerDown = () => {},
+    VariableSizeGridProps: { style, rowIndex, columnIndex, data },
+}) => {
+    const dropdownAnchorRef = React.useRef(null);
+    const item = data.items[rowIndex][columnIndex];
+    const isFiltered = item?.filtered || false;
+    const isSorted = sortIndicatorIndex === columnIndex;
+    const HeaderSortIcon = sortDirection === 'ASC' ? KeyboardArrowUpIcon : KeyboardArrowDownIcon;
+    const headerLabel = item?.[headerNameKey] || "";
+    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 handleResizePointerDown = useCallback(
+        (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            onResizePointerDown(event, columnIndex);
+        },
+        [onResizePointerDown, columnIndex]
+    );
+    const handleResizeDoubleClick = useCallback(
+        (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            onDoubleClick(event, columnIndex);
+        },
+        [onDoubleClick, columnIndex]
+    );
+    const stopResizeClickPropagation = useCallback(
+        (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+        },
+        []
+    );
+    const [openContextMenu, setOpenContextMenu] = React.useState(false);
+    const menuContext = React.useMemo(() => {
+        return {columnIndex, rowIndex, data: data.items[rowIndex][columnIndex]?.props?.rowData || {}};
+    }, [columnIndex, data.items, rowIndex]);
+    const resolvedContextMenuOptions = React.useMemo(() => {
+        const resolveOption = (option) => {
+            const resolvedOption = {
+                ...option,
+                disabled: typeof option.disabled === "function" ? option.disabled(menuContext) : option.disabled,
+            };
+            if(option.menuItems){
+                resolvedOption.menuItems = option.menuItems.map(resolveOption);
+            }
+            return resolvedOption;
+        };
+        return contextMenuOptions.map(resolveOption);
+    }, [contextMenuOptions, menuContext]);
+    const handleContextClick = useCallback(
+        (event) => {
+            event.preventDefault();
+            if(resolvedContextMenuOptions && resolvedContextMenuOptions.length > 0){
+                contextMenuLocationRef.current.x = event.clientX;
+                contextMenuLocationRef.current.y = event.clientY;
+                setOpenContextMenu(true);
+            }
+        },
+        [resolvedContextMenuOptions]
+    );
+    const handleMenuItemClick = (event, clickOption) => {
+        event.preventDefault();
+        event.stopPropagation();
+        clickOption({event, ...menuContext});
+        setOpenContextMenu(false);
+    };
+    const filterMenuOption = React.useMemo(
+        () => resolvedContextMenuOptions.find((option) => option.type === "item" && option.name === "Filter Column"),
+        [resolvedContextMenuOptions]
+    );
+    const handleFilterIndicatorClick = useCallback(
+        (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            if(filterMenuOption?.disabled || !filterMenuOption?.click){
+                return;
+            }
+            filterMenuOption.click({event, ...menuContext});
+            setOpenContextMenu(false);
+        },
+        [filterMenuOption, menuContext]
+    );
+
+    const handleClicks = useSingleAndDoubleClick(handleClick, handleDoubleClick);
+    const className = `${classes.headerCell} ${item.disableSort ? classes.headerCellNoSort : ""}`;
+
+    return (
+        <div
+            style={style}
+            className={className}
+            onClick={handleClicks}
+            onContextMenu={handleContextClick}
+            ref={dropdownAnchorRef}
+            title={typeof headerLabel === "string" ? headerLabel : undefined}
+        >
+            <Box className={classes.headerContent}>
+                <Typography className={`${classes.cellInner} ${classes.headerLabel}`} component='div' variant='body1'>
+                    {typeof headerLabel === "string" ? headerLabel : headerLabel}
+                </Typography>
+                <Box className={classes.headerActions}>
+                    {isFiltered &&
+                        <button
+                            aria-label={`Edit filter for ${typeof headerLabel === "string" ? headerLabel : "column"}`}
+                            className={`${classes.headerIndicator} ${classes.headerFilterIcon}`}
+                            onClick={handleFilterIndicatorClick}
+                            title="Edit Filter"
+                            type="button"
+                        >
+                            <FilterAltOutlinedIcon fontSize="inherit" />
+                        </button>
+                    }
+                    {isSorted &&
+                        <span className={`${classes.headerIndicator} ${classes.headerSortIcon}`} title={`Sorted ${sortDirection === 'ASC' ? 'ascending' : 'descending'}`}>
+                            <HeaderSortIcon fontSize="inherit" />
+                        </span>
+                    }
+                </Box>
+                <ContextMenu dropdownAnchorRef={dropdownAnchorRef} contextMenuOptions={resolvedContextMenuOptions}
+                             disableFilterMenu={item?.disableFilterMenu} openContextMenu={openContextMenu}
+                             contextMenuLocationRef={contextMenuLocationRef}
+                             setOpenContextMenu={setOpenContextMenu} handleMenuItemClick={handleMenuItemClick}
+                />
+            </Box>
+            {!item.disableResize &&
+                <div
+                    role="separator"
+                    aria-orientation="vertical"
+                    aria-label={`Resize ${typeof headerLabel === "string" ? headerLabel : "column"} column`}
+                    className={`${classes.headerResizeHandle} ${isResizing ? classes.headerResizeHandleActive : ""}`}
+                    onPointerDown={handleResizePointerDown}
+                    onDoubleClick={handleResizeDoubleClick}
+                    onClick={stopResizeClickPropagation}
+                />
+            }
+        </div>
+    );
+};
+
+export default HeaderCell;

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

@@ -0,0 +1,647 @@
+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 {classes} from './styles';
+import {GetMythicSetting, useSetMythicSetting} from "../MythicSavedUserSetting";
+import FitScreenIcon from '@mui/icons-material/FitScreen';
+import RestartAltIcon from '@mui/icons-material/RestartAlt';
+import ViewColumnIcon from '@mui/icons-material/ViewColumn';
+import FilterAltOutlinedIcon from '@mui/icons-material/FilterAltOutlined';
+
+const HeaderCellContext = createContext({});
+
+const MIN_COLUMN_WIDTH = 50;
+const MIN_FLEX_COLUMN_WIDTH = 50;
+const AUTOSIZE_HORIZONTAL_PADDING = 40;
+const AUTOSIZE_HEADER_EXTRA_WIDTH = 30;
+const headerMenuIconStyle = {fontSize: "1rem", marginRight: "8px"};
+const normalizeHeaderContextMenuOption = (option) => {
+    if(option?.name === "Filter Column"){
+        return {
+            ...option,
+            icon: <FilterAltOutlinedIcon style={headerMenuIconStyle} />,
+        };
+    }
+    if(option?.menuItems){
+        return {
+            ...option,
+            menuItems: option.menuItems.map(normalizeHeaderContextMenuOption),
+        };
+    }
+    return option;
+};
+
+let autosizeCanvas;
+
+const getNumericWidth = (value) => {
+    const width = Number(value);
+    return Number.isFinite(width) ? width : undefined;
+};
+const getColumnMinWidth = (column) => {
+    const configuredMinWidth = getNumericWidth(column?.minWidth);
+    return Math.max(configuredMinWidth || 0, column?.fillWidth ? MIN_FLEX_COLUMN_WIDTH : MIN_COLUMN_WIDTH);
+};
+const getColumnMaxWidth = (column) => {
+    const configuredMaxWidth = getNumericWidth(column?.maxWidth);
+    return configuredMaxWidth && configuredMaxWidth > 0 ? configuredMaxWidth : Infinity;
+};
+const clampColumnWidth = (column, width) => {
+    const minWidth = getColumnMinWidth(column);
+    const maxWidth = getColumnMaxWidth(column);
+    const numericWidth = getNumericWidth(width) || minWidth;
+    return Math.floor(Math.min(maxWidth, Math.max(numericWidth, minWidth)));
+};
+const getPreferredColumnWidth = (column) => {
+    return column?.width === undefined ? getColumnMinWidth(column) : column.width;
+};
+const distributeFillWidth = ({columns, columnWidths, totalWidth}) => {
+    const availableWidth = Math.max(0, Math.floor(totalWidth || 0));
+    const currentWidth = columnWidths.reduce((a, b) => a + b, 0);
+    const widthDifference = availableWidth - currentWidth;
+    if(widthDifference <= 0 || columns.length === 0){
+        return columnWidths;
+    }
+    const fillColumnIndexes = columns.reduce((previous, column, index) => {
+        return column.fillWidth ? [...previous, index] : previous;
+    }, []);
+    const targetIndexes = fillColumnIndexes.length > 0 ? fillColumnIndexes : [columns.length - 1];
+    let remainingWidth = widthDifference;
+    const updatedColumnWidths = [...columnWidths];
+    for(let i = 0; i < targetIndexes.length; i++){
+        const columnIndex = targetIndexes[i];
+        const share = i === targetIndexes.length - 1 ? remainingWidth : Math.floor(widthDifference / targetIndexes.length);
+        const currentColumnWidth = updatedColumnWidths[columnIndex];
+        const nextColumnWidth = clampColumnWidth(columns[columnIndex], currentColumnWidth + share);
+        updatedColumnWidths[columnIndex] = nextColumnWidth;
+        remainingWidth -= nextColumnWidth - currentColumnWidth;
+    }
+    return updatedColumnWidths;
+};
+const getInitialColumnWidths = ({columns, savedWidths = [], totalWidth = 0}) => {
+    const hasSavedWidths = savedWidths.length === columns.length;
+    const baseColumnWidths = columns.map((column, index) => {
+        return clampColumnWidth(column, hasSavedWidths ? savedWidths[index] : getPreferredColumnWidth(column));
+    });
+    if(hasSavedWidths){
+        return baseColumnWidths;
+    }
+    return distributeFillWidth({columns, columnWidths: baseColumnWidths, totalWidth});
+};
+const areColumnWidthsEqual = (first = [], second = []) => {
+    if(first.length !== second.length){
+        return false;
+    }
+    return first.every((width, index) => Math.floor(width || MIN_COLUMN_WIDTH) === Math.floor(second[index] || MIN_COLUMN_WIDTH));
+};
+const normalizeColumnWidths = (columnWidths = []) => {
+    return columnWidths.map((columnWidth) => Math.floor(getNumericWidth(columnWidth) || MIN_COLUMN_WIDTH));
+};
+const getMeasureContext = () => {
+    if(typeof document === "undefined"){
+        return null;
+    }
+    if(autosizeCanvas === undefined){
+        autosizeCanvas = document.createElement("canvas");
+    }
+    const context = autosizeCanvas.getContext("2d");
+    if(context === null){
+        return null;
+    }
+    const referenceElement = document.querySelector(`.${classes.cell}`) || document.body;
+    const computedStyle = window.getComputedStyle(referenceElement);
+    context.font = [
+        computedStyle.fontStyle,
+        computedStyle.fontVariant,
+        computedStyle.fontWeight,
+        computedStyle.fontSize,
+        computedStyle.fontFamily,
+    ].join(" ");
+    return context;
+};
+const getDisplayText = (value) => {
+    if(value === undefined || value === null){
+        return "";
+    }
+    if(typeof value === "string"){
+        const trimmedValue = value.trim();
+        if(trimmedValue.startsWith("[")){
+            try{
+                const parsedValue = JSON.parse(trimmedValue);
+                if(Array.isArray(parsedValue) && parsedValue.length > 0){
+                    return getDisplayText(parsedValue[0]);
+                }
+            }catch(error){
+                // Keep the original string when it is not a serialized array.
+            }
+        }
+        return value;
+    }
+    if(typeof value === "number" || typeof value === "boolean"){
+        return String(value);
+    }
+    if(Array.isArray(value)){
+        return value.map((entry) => getDisplayText(entry)).filter(Boolean).join(", ");
+    }
+    if(React.isValidElement(value)){
+        return getDisplayText(value.props?.cellData || value.props?.children);
+    }
+    if(typeof value === "object"){
+        if(value.plaintext !== undefined){
+            return getDisplayText(value.plaintext);
+        }
+        if(value.name !== undefined){
+            return getDisplayText(value.name);
+        }
+        if(value.button?.name !== undefined){
+            return getDisplayText(value.button.name);
+        }
+        if(value.display !== undefined){
+            return getDisplayText(value.display);
+        }
+        return "";
+    }
+    return "";
+};
+const getCellAutosizeText = ({column, cell}) => {
+    const cellProps = cell?.props || {};
+    const columnKey = column?.key || column?.plaintext;
+    const rowData = cellProps.rowData || {};
+    const cellDataText = getDisplayText(cellProps.cellData);
+    if(cellDataText !== ""){
+        return cellDataText;
+    }
+    if(columnKey !== undefined){
+        return getDisplayText(rowData?.[columnKey]);
+    }
+    return getDisplayText(cell);
+};
+const measureAutosizeText = (context, text) => {
+    const normalizedText = getDisplayText(text);
+    if(normalizedText === ""){
+        return 0;
+    }
+    const lines = normalizedText.split(/\r?\n/);
+    return lines.reduce((longestLineWidth, line) => {
+        const textWidth = context ? context.measureText(line).width : line.length * 8;
+        return Math.max(longestLineWidth, textWidth);
+    }, 0);
+};
+const getAutosizedColumnWidth = ({column, columnIndex, headerNameKey, items}) => {
+    const measureContext = getMeasureContext();
+    const headerText = getDisplayText(column?.[headerNameKey] || column?.name || column?.plaintext);
+    const headerWidth = measureAutosizeText(measureContext, headerText.toUpperCase()) + AUTOSIZE_HEADER_EXTRA_WIDTH;
+    const widestCellWidth = items.reduce((widestWidth, itemRow) => {
+        const cellText = getCellAutosizeText({column, cell: itemRow[columnIndex]});
+        return Math.max(widestWidth, measureAutosizeText(measureContext, cellText));
+    }, 0);
+    return clampColumnWidth(column, Math.max(headerWidth, widestCellWidth) + AUTOSIZE_HORIZONTAL_PADDING);
+};
+
+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 resizingColumnIndex = HeaderCellData.resizingColumnIndex;
+    const resizeGuideLeft = resizingColumnIndex >= 0 ?
+        HeaderCellData.columnWidths.slice(0, resizingColumnIndex + 1).reduce((a, b) => a + b, 0) :
+        -1;
+    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, position: "relative"}}>
+            {/* 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}
+                            isResizing={HeaderCellData.resizingColumnIndex === i}
+                            onResizePointerDown={HeaderCellData.startColumnResize}
+                            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}
+            {resizingColumnIndex >= 0 &&
+                <div
+                    className={classes.resizeGuide}
+                    style={{
+                        left: resizeGuideLeft,
+                        height: style.height,
+                    }}
+                />
+            }
+        </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 savedColumnWidths = Array.isArray(initialSavedWidths) ? initialSavedWidths : [];
+    const [columnWidths, setColumnWidths] = useState(() => getInitialColumnWidths({
+        columns,
+        savedWidths: savedColumnWidths,
+        totalWidth: AutoSizerProps.width - scrollbarWidth,
+    }));
+    const gridUUID = React.useMemo( () => GetShortRandomString(), []);
+    const gridRef = useRef(null);
+    const columnWidthsRef = useRef(columnWidths);
+    const lastResetColumnIndexRef = useRef(0);
+    const activeResizeRef = useRef(null);
+    const resizeFrameRef = useRef(null);
+    const cleanupResizeListenersRef = useRef(null);
+    const [resizingColumnIndex, setResizingColumnIndex] = useState(-1);
+    const [updateSetting] = useSetMythicSetting();
+    const setColumnWidthsAndRef = useCallback( (newColumnWidths, resetColumnIndex=0) => {
+        const normalizedColumnWidths = normalizeColumnWidths(newColumnWidths);
+        if(areColumnWidthsEqual(columnWidthsRef.current, normalizedColumnWidths)){
+            return false;
+        }
+        lastResetColumnIndexRef.current = resetColumnIndex;
+        columnWidthsRef.current = normalizedColumnWidths;
+        setColumnWidths(normalizedColumnWidths);
+        return true;
+    }, []);
+    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(savedColumnWidths.length === columns.length && localColumnsRef.current.length === columns.length){
+            return;
+        }
+        localColumnsRef.current = columns;
+        const updatedColumnWidths = getInitialColumnWidths({
+            columns,
+            savedWidths: [],
+            totalWidth: AutoSizerProps.width - scrollbarWidth,
+        });
+        const didUpdateWidths = setColumnWidthsAndRef(updatedColumnWidths);
+        if(didUpdateWidths && name !== undefined){
+            updateSetting({setting_name: `${name}_column_widths`, value: updatedColumnWidths, broadcast: false});
+        }
+
+    }, [scrollbarWidth, columns, AutoSizerProps.width, localColumnsRef.current, setColumnWidthsAndRef]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    useEffect(() => {
+        if(gridRef.current){
+            gridRef.current.resetAfterColumnIndex(lastResetColumnIndexRef.current, true);
+        }
+    }, [columnWidths]);
+
+    /* Event Handlers */
+
+    const startColumnResize = useCallback( (event, columnIndex) => {
+        if(columns[columnIndex]?.disableResize){
+            return;
+        }
+        const initialWidths = columnWidthsRef.current.map( (columnWidth) => Math.floor(columnWidth || MIN_COLUMN_WIDTH));
+        const startClientX = event.clientX;
+        const startWidth = initialWidths[columnIndex] || MIN_COLUMN_WIDTH;
+        const previousCursor = document.body.style.cursor;
+        const previousUserSelect = document.body.style.userSelect;
+        const applyResizeWidth = (clientX) => {
+            const activeResize = activeResizeRef.current;
+            if(!activeResize){
+                return;
+            }
+            activeResize.latestClientX = clientX;
+            if(resizeFrameRef.current !== null){
+                return;
+            }
+            resizeFrameRef.current = window.requestAnimationFrame(() => {
+                resizeFrameRef.current = null;
+                const currentResize = activeResizeRef.current;
+                if(!currentResize){
+                    return;
+                }
+                const resizeDelta = currentResize.latestClientX - currentResize.startClientX;
+                const nextColumnWidth = clampColumnWidth(columns[currentResize.columnIndex], currentResize.startWidth + resizeDelta);
+                const updatedColumnWidths = currentResize.initialWidths.map( (columnWidth, index) => {
+                    return currentResize.columnIndex === index ? nextColumnWidth : columnWidth;
+                });
+                setColumnWidthsAndRef(updatedColumnWidths, currentResize.columnIndex);
+            });
+        };
+        const cleanupResizeListeners = () => {
+            window.removeEventListener("pointermove", handlePointerMove);
+            window.removeEventListener("pointerup", handlePointerUp);
+            window.removeEventListener("pointercancel", handlePointerUp);
+            document.body.style.cursor = previousCursor;
+            document.body.style.userSelect = previousUserSelect;
+            cleanupResizeListenersRef.current = null;
+        };
+        const finishResize = (clientX) => {
+            const currentResize = activeResizeRef.current;
+            if(!currentResize){
+                cleanupResizeListeners();
+                return;
+            }
+            if(resizeFrameRef.current !== null){
+                window.cancelAnimationFrame(resizeFrameRef.current);
+                resizeFrameRef.current = null;
+            }
+            const resizeDelta = clientX - currentResize.startClientX;
+            const nextColumnWidth = clampColumnWidth(columns[currentResize.columnIndex], currentResize.startWidth + resizeDelta);
+            const updatedColumnWidths = currentResize.initialWidths.map( (columnWidth, index) => {
+                return currentResize.columnIndex === index ? nextColumnWidth : columnWidth;
+            });
+            activeResizeRef.current = null;
+            const didUpdateWidths = setColumnWidthsAndRef(updatedColumnWidths, currentResize.columnIndex);
+            if(didUpdateWidths && name !== undefined){
+                updateSetting({setting_name: `${name}_column_widths`, value: updatedColumnWidths, broadcast: false});
+            }
+            setResizingColumnIndex(-1);
+            cleanupResizeListeners();
+        };
+        function handlePointerMove(pointerEvent){
+            pointerEvent.preventDefault();
+            applyResizeWidth(pointerEvent.clientX);
+        }
+        function handlePointerUp(pointerEvent){
+            pointerEvent.preventDefault();
+            finishResize(pointerEvent.clientX);
+        }
+        event.currentTarget.setPointerCapture?.(event.pointerId);
+        activeResizeRef.current = {
+            columnIndex,
+            initialWidths,
+            latestClientX: startClientX,
+            startClientX,
+            startWidth,
+        };
+        document.body.style.cursor = "col-resize";
+        document.body.style.userSelect = "none";
+        setResizingColumnIndex(columnIndex);
+        window.addEventListener("pointermove", handlePointerMove);
+        window.addEventListener("pointerup", handlePointerUp);
+        window.addEventListener("pointercancel", handlePointerUp);
+        cleanupResizeListenersRef.current = cleanupResizeListeners;
+    }, [columns, name, setColumnWidthsAndRef, updateSetting]);
+    useEffect(() => {
+        return () => {
+            cleanupResizeListenersRef.current?.();
+            activeResizeRef.current = null;
+            if(resizeFrameRef.current !== null){
+                window.cancelAnimationFrame(resizeFrameRef.current);
+                resizeFrameRef.current = null;
+            }
+        };
+    }, []);
+    const autosizeColumn =  useCallback( ({columnIndex}) => {
+        const column = columns[columnIndex];
+        if(column?.disableDoubleClick || column?.disableAutosize){
+            return
+        }
+        const currentColumnWidths = columnWidthsRef.current;
+        const updatedColumnWidths = currentColumnWidths.map((columnWidth, index) => {
+            if (columnIndex === index) {
+                return getAutosizedColumnWidth({column, columnIndex, headerNameKey, items});
+            }
+            return Math.floor(columnWidth);
+        });
+        const didUpdateWidths = setColumnWidthsAndRef(updatedColumnWidths, columnIndex);
+        if(didUpdateWidths){
+            if(name !== undefined){
+                updateSetting({setting_name: `${name}_column_widths`, value: updatedColumnWidths, broadcast: false});
+            }
+        }
+    }, [columns, headerNameKey, items, name, setColumnWidthsAndRef, updateSetting]);
+    const autosizeAllColumns = useCallback( () => {
+        const currentColumnWidths = columnWidthsRef.current;
+        const updatedColumnWidths = currentColumnWidths.map((columnWidth, columnIndex) => {
+            const column = columns[columnIndex];
+            if(column?.disableDoubleClick || column?.disableAutosize){
+                return Math.floor(columnWidth);
+            }
+            return getAutosizedColumnWidth({column, columnIndex, headerNameKey, items});
+        });
+        const didUpdateWidths = setColumnWidthsAndRef(updatedColumnWidths, 0);
+        if(didUpdateWidths && name !== undefined){
+            updateSetting({setting_name: `${name}_column_widths`, value: updatedColumnWidths, broadcast: false});
+        }
+    }, [columns, headerNameKey, items, name, setColumnWidthsAndRef, updateSetting]);
+    const resetColumnWidths = useCallback( () => {
+        const updatedColumnWidths = getInitialColumnWidths({
+            columns,
+            savedWidths: [],
+            totalWidth: AutoSizerProps.width - scrollbarWidth,
+        });
+        const didUpdateWidths = setColumnWidthsAndRef(updatedColumnWidths, 0);
+        if(didUpdateWidths && name !== undefined){
+            updateSetting({setting_name: `${name}_column_widths`, value: updatedColumnWidths, broadcast: false});
+        }
+    }, [AutoSizerProps.width, columns, name, scrollbarWidth, setColumnWidthsAndRef, updateSetting]);
+    const headerContextMenuOptions = React.useMemo( () => {
+        const sizingOptions = [
+            {
+                name: "Autosize Column",
+                type: "item",
+                icon: <FitScreenIcon style={headerMenuIconStyle} />,
+                disabled: ({columnIndex}) => columns[columnIndex]?.disableDoubleClick || columns[columnIndex]?.disableAutosize,
+                click: ({columnIndex}) => autosizeColumn({columnIndex}),
+            },
+            {
+                name: "Autosize All Columns",
+                type: "item",
+                icon: <ViewColumnIcon style={headerMenuIconStyle} />,
+                disabled: columns.every((column) => column?.disableDoubleClick || column?.disableAutosize),
+                click: () => autosizeAllColumns(),
+            },
+            {
+                name: "Reset Column Widths",
+                type: "item",
+                icon: <RestartAltIcon style={headerMenuIconStyle} />,
+                click: () => resetColumnWidths(),
+            },
+        ];
+        return [...sizingOptions, ...(contextMenuOptions || []).map(normalizeHeaderContextMenuOption)];
+    }, [autosizeAllColumns, autosizeColumn, columns, contextMenuOptions, resetColumnWidths]);
+
+    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": headerContextMenuOptions,
+        "sortIndicatorIndex": sortIndicatorIndex,
+        "sortDirection": sortDirection,
+        "getColumnWidth": getColumnWidth,
+        "resizingColumnIndex": resizingColumnIndex,
+        "startColumnResize": startColumnResize,
+        "itemsWithHeader": itemsWithHeader,
+    };
+    return (
+        <>
+            <HeaderCellContext.Provider value={headerCellData}>
+                <VariableSizeGrid
+                    className={classes.grid}
+                    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}
+                    ref={gridRef}>
+                    {CellRenderer}
+                </VariableSizeGrid>
+            </HeaderCellContext.Provider>
+
+        </>
+    );
+};
+
+const MythicResizableGrid = ({
+    columns,
+    sortIndicatorIndex,
+    sortDirection,
+    items,
+    onClickHeader,
+    headerNameKey,
+    onDoubleClickRow,
+    contextMenuOptions,
+    rowContextMenuOptions,
+    onRowContextMenuClick,
+    widthMeasureKey,
+    rowHeight = 20,
+    headerRowHeight = 20,
+    callbackTableGridRef,
+    onRowClick,
+    name,
+}) => {
+    return (
+        <div className={classes.root}>
+            <AutoSizer style={{height: "100%", width: "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>
+        </div>
+    );
+};
+
+MythicResizableGrid.propTypes = {
+    columns: PropTypes.arrayOf(
+        PropTypes.shape({
+            name: PropTypes.string,
+            width: PropTypes.number,
+            disableAutosize: PropTypes.bool,
+            disableResize: 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,24 @@
+const PREFIX = 'MythicResizableGrid';
+export const classes = {
+    root: `${PREFIX}-root flex-fill h-full min-h-0 min-w-0 overflow-hidden relative rounded w-full`,
+    grid: `${PREFIX}-grid`,
+    headerCellRow: `${PREFIX}-headerCellRow flex flex-row`,
+    headerCell: `${PREFIX}-headerCell cursor-pointer items-center flex justify-between min-w-0 overflow-hidden relative`,
+    headerCellNoSort: `${PREFIX}-headerCellNoSort`,
+    headerContent: `${PREFIX}-headerContent items-center flex gap-3 justify-between min-w-0 w-full`,
+    headerLabel: `${PREFIX}-headerLabel min-w-0 truncate`,
+    headerActions: `${PREFIX}-headerActions items-center inline-flex flex-none gap-2 min-w-0`,
+    headerIndicator: `${PREFIX}-headerIndicator items-center inline-flex flex-none justify-center rounded`,
+    headerFilterIcon: `${PREFIX}-headerFilterIcon cursor-pointer`,
+    headerSortIcon: `${PREFIX}-headerSortIcon`,
+    headerResizeHandle: `${PREFIX}-headerResizeHandle`,
+    headerResizeHandleActive: `${PREFIX}-headerResizeHandleActive`,
+    resizeGuide: `${PREFIX}-resizeGuide`,
+    hoveredRow: `${PREFIX}-hoveredRow`,
+    contextRow: `${PREFIX}-contextRow`,
+    rowFirstCell: `${PREFIX}-rowFirstCell`,
+    rowLastCell: `${PREFIX}-rowLastCell`,
+    rowInteractive: `${PREFIX}-rowInteractive`,
+    cell: `${PREFIX}-cell items-center flex min-w-0 relative truncate`,
+    cellInner: `${PREFIX}-cellInner items-center flex min-w-0 truncate w-full whitespace-nowrap`,
+}

MythicReactUI/src/components/MythicComponents/MythicSavedUserSetting.js

@@ -0,0 +1,105 @@
+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);
+}
+let latestPreferenceSnapshot = null;
+const getPreferenceSnapshot = () => {
+    return latestPreferenceSnapshot || mePreferences() || {};
+};
+const areSettingValuesEqual = (first, second) => {
+    if(first === second){
+        return true;
+    }
+    if(typeof first !== "object" || typeof second !== "object" || first === null || second === null){
+        return false;
+    }
+    try{
+        return JSON.stringify(first) === JSON.stringify(second);
+    }catch(error){
+        return false;
+    }
+};
+/*
+setting_name options:
+    taskingDisplayFields
+    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 = getPreferenceSnapshot();
+    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, broadcast=true}) => {
+            const currentPreferences = getPreferenceSnapshot();
+            if(!areSettingValuesEqual(currentPreferences?.[setting_name], value)){
+                const updatedPreferences = {
+                    ...currentPreferences,
+                    [setting_name]: value,
+                };
+                latestPreferenceSnapshot = updatedPreferences;
+                if(broadcast){
+                    mePreferences(updatedPreferences);
+                }
+                updateSetting({variables: {preferences: updatedPreferences}});
+            }
+        },
+        ({settings, broadcast=true}) => {
+            const updatedPreferences = {
+                ...getPreferenceSnapshot(),
+                ...settings,
+            };
+            latestPreferenceSnapshot = updatedPreferences;
+            if(broadcast){
+                mePreferences(updatedPreferences);
+            }
+            updateSetting({variables: {preferences: updatedPreferences}});
+        },
+        () => {
+            latestPreferenceSnapshot = operatorSettingDefaults;
+            mePreferences(operatorSettingDefaults);
+            updateSetting({variables: {preferences: operatorSettingDefaults}});
+        }
+        ]
+}

MythicReactUI/src/components/MythicComponents/MythicSelectFromListDialog.js

@@ -0,0 +1,130 @@
+import React, {useRef, useEffect} from 'react';
+import {MythicActionButton} from './MythicActionButton';
+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 Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+
+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>
+          <MythicActionButton colorMode="always" onClick={props.onClose} tone="primary" variant="contained">
+            Close
+          </MythicActionButton>
+          <MythicActionButton colorMode="always" onClick={handleSubmit} tone="success" variant="contained">
+            {props.action}
+          </MythicActionButton>
+        </DialogActions>
+  </React.Fragment>
+  );
+}
+
+export function MythicSelectFromRawListDialog(props) {
+  const [options, setOptions] = React.useState([]);
+  const actionText = props.action || "Select";
+  const handleSubmit = (selected) => {
+      props.onSubmit(selected);
+      props.onClose();
+  }
+  const handleKeyDown = (event, selected) => {
+      if(event.key === "Enter" || event.key === " "){
+          event.preventDefault();
+          handleSubmit(selected);
+      }
+  }
+  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>
+      <DialogContent dividers={true} className="mythic-raw-select-dialog-content">
+          {options.length === 0 ? (
+              <Box className="mythic-raw-select-empty items-center flex justify-center text-muted text-center">
+                  <Typography variant="body2">No options available</Typography>
+              </Box>
+          ) : (
+              <Stack className="mythic-raw-select-list gap-4">
+                  {options.map( (choice, i) => (
+                      <Box
+                          key={String(choice) + i}
+                          className="mythic-raw-select-row items-center flex gap-6 justify-between min-w-0 w-full rounded cursor-pointer bg-surface-muted border-subtle text-primary"
+                          role="button"
+                          tabIndex={0}
+                          onClick={() => handleSubmit(choice)}
+                          onKeyDown={(event) => handleKeyDown(event, choice)}
+                      >
+                          <Typography className="mythic-raw-select-value min-w-0 truncate whitespace-nowrap" title={String(choice)}>
+                              {String(choice)}
+                          </Typography>
+                          <MythicActionButton className="mythic-raw-select-action" colorMode="always" tone="info" variant="outlined" size="small" tabIndex={-1}>
+                              {actionText}
+                          </MythicActionButton>
+                      </Box>
+                  ))}
+              </Stack>
+          )}
+      </DialogContent>
+      <DialogActions>
+        <MythicActionButton colorMode="always" onClick={props.onClose} tone="primary" variant="contained">
+          Close
+        </MythicActionButton>
+      </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 {FileDownloadLinkWithAuth} from "../utilities/FileDownloadWithAuth";
+
+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: theme.palette.text.secondary,
+        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>
+                    <FileDownloadLinkWithAuth color="textPrimary" download={true} href={"/direct/download/" + props.file_id} target="_blank">
+                        Download here
+                    </FileDownloadLinkWithAuth>
+                </React.Fragment>
+        </Root>
+    );
+};

MythicReactUI/src/components/MythicComponents/MythicStateDisplay.js

@@ -0,0 +1,192 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import {MythicActionButton} from './MythicActionButton';
+import CircularProgress from '@mui/material/CircularProgress';
+import Skeleton from '@mui/material/Skeleton';
+import TableCell from '@mui/material/TableCell';
+import TableRow from '@mui/material/TableRow';
+import Typography from '@mui/material/Typography';
+import {alpha, useTheme} from '@mui/material/styles';
+import ErrorOutlineOutlinedIcon from '@mui/icons-material/ErrorOutlineOutlined';
+import HourglassEmptyOutlinedIcon from '@mui/icons-material/HourglassEmptyOutlined';
+import InboxOutlinedIcon from '@mui/icons-material/InboxOutlined';
+import SearchOffOutlinedIcon from '@mui/icons-material/SearchOffOutlined';
+
+const stateIcons = {
+    empty: <InboxOutlinedIcon />,
+    error: <ErrorOutlineOutlinedIcon />,
+    loading: <HourglassEmptyOutlinedIcon />,
+    search: <SearchOffOutlinedIcon />,
+};
+
+export function MythicStateDisplay({
+    action,
+    actionLabel,
+    compact = false,
+    description,
+    icon,
+    loading = false,
+    minHeight,
+    onAction,
+    severity = "empty",
+    sx = {},
+    title,
+}) {
+    const theme = useTheme();
+    const defaultIcon = stateIcons[severity] || stateIcons.empty;
+    const iconNode = loading ? (
+        <CircularProgress size={compact ? 18 : 22} color="inherit" disableShrink />
+    ) : React.cloneElement(icon || defaultIcon, {fontSize: compact ? "small" : "medium"});
+    const resolvedTitle = title || (loading ? "Loading" : "Nothing to show");
+    const resolvedMinHeight = minHeight || (compact ? 112 : 176);
+    return (
+        <Box sx={{
+            alignItems: "center",
+            color: theme.palette.text.secondary,
+            display: "flex",
+            justifyContent: "center",
+            minHeight: resolvedMinHeight,
+            p: compact ? 1.5 : 2.5,
+            width: "100%",
+            ...sx,
+        }}>
+            <Box sx={{
+                alignItems: "center",
+                display: "flex",
+                flexDirection: "column",
+                gap: compact ? 0.75 : 1,
+                maxWidth: compact ? 360 : 460,
+                textAlign: "center",
+            }}>
+                <Box sx={{
+                    alignItems: "center",
+                    backgroundColor: theme.palette.mode === "dark" ? alpha(theme.palette.common.white, 0.055) : alpha(theme.palette.common.black, 0.035),
+                    border: `1px solid ${theme.palette.mode === "dark" ? alpha(theme.palette.common.white, 0.09) : alpha(theme.palette.common.black, 0.08)}`,
+                    borderRadius: "6px",
+                    color: severity === "error" ? theme.palette.error.main : theme.palette.text.secondary,
+                    display: "inline-flex",
+                    height: compact ? 32 : 40,
+                    justifyContent: "center",
+                    width: compact ? 32 : 40,
+                }}>
+                    {iconNode}
+                </Box>
+                <Typography component="div" sx={{
+                    color: theme.palette.text.primary,
+                    fontSize: compact ? "0.86rem" : "0.95rem",
+                    fontWeight: 800,
+                    lineHeight: 1.25,
+                }}>
+                    {resolvedTitle}
+                </Typography>
+                {description &&
+                    <Typography component="div" sx={{
+                        color: theme.palette.text.secondary,
+                        fontSize: compact ? "0.76rem" : "0.82rem",
+                        lineHeight: 1.35,
+                    }}>
+                        {description}
+                    </Typography>
+                }
+                {action || (actionLabel && onAction) ? (
+                    action || (
+                        <MythicActionButton size="small" variant="outlined" onClick={onAction} sx={{mt: 0.5}}>
+                            {actionLabel}
+                        </MythicActionButton>
+                    )
+                ) : null}
+            </Box>
+        </Box>
+    );
+}
+
+export function MythicEmptyState(props) {
+    return <MythicStateDisplay severity="empty" {...props} />;
+}
+
+export function MythicSearchEmptyState(props) {
+    return <MythicStateDisplay severity="search" title="No results" {...props} />;
+}
+
+export function MythicLoadingState(props) {
+    return <MythicStateDisplay severity="loading" loading title="Loading" {...props} />;
+}
+
+export function MythicErrorState(props) {
+    return <MythicStateDisplay severity="error" title="Something went wrong" {...props} />;
+}
+
+export function MythicTableEmptyState({colSpan, ...props}) {
+    return (
+        <TableRow>
+            <TableCell colSpan={colSpan} sx={{borderBottom: 0, p: 0}}>
+                <MythicEmptyState {...props} />
+            </TableCell>
+        </TableRow>
+    );
+}
+
+export function MythicTableSearchEmptyState({colSpan, ...props}) {
+    return (
+        <TableRow>
+            <TableCell colSpan={colSpan} sx={{borderBottom: 0, p: 0}}>
+                <MythicSearchEmptyState {...props} />
+            </TableCell>
+        </TableRow>
+    );
+}
+
+export function MythicTableErrorState({colSpan, ...props}) {
+    return (
+        <TableRow>
+            <TableCell colSpan={colSpan} sx={{borderBottom: 0, p: 0}}>
+                <MythicErrorState {...props} />
+            </TableCell>
+        </TableRow>
+    );
+}
+
+export function MythicTableSkeletonRows({colSpan, columns = 4, rows = 4}) {
+    const skeletonColumns = Math.max(1, columns);
+    return (
+        <>
+            {[...Array(rows).keys()].map((rowIndex) => (
+                <TableRow key={`mythic-table-skeleton-${rowIndex}`}>
+                    <TableCell colSpan={colSpan} sx={{px: 1.25, py: 0.75}}>
+                        <Box sx={{
+                            display: "grid",
+                            gap: 1,
+                            gridTemplateColumns: `repeat(${skeletonColumns}, minmax(0, 1fr))`,
+                        }}>
+                            {[...Array(skeletonColumns).keys()].map((columnIndex) => (
+                                <Skeleton
+                                    animation="wave"
+                                    height={22}
+                                    key={`mythic-table-skeleton-${rowIndex}-${columnIndex}`}
+                                    sx={{borderRadius: 1}}
+                                    variant="rounded"
+                                    width={columnIndex === skeletonColumns - 1 ? "72%" : "100%"}
+                                />
+                            ))}
+                        </Box>
+                    </TableCell>
+                </TableRow>
+            ))}
+        </>
+    );
+}
+
+export function MythicTableLoadingState({colSpan, columns, rows = 4, showSkeleton = true, ...props}) {
+    return (
+        <>
+            <TableRow>
+                <TableCell colSpan={colSpan} sx={{borderBottom: showSkeleton ? undefined : 0, p: 0}}>
+                    <MythicLoadingState {...props} />
+                </TableCell>
+            </TableRow>
+            {showSkeleton &&
+                <MythicTableSkeletonRows colSpan={colSpan} columns={columns} rows={rows} />
+            }
+        </>
+    );
+}

MythicReactUI/src/components/MythicComponents/MythicStatusChip.js

@@ -0,0 +1,123 @@
+import React from 'react';
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import WarningAmberIcon from '@mui/icons-material/WarningAmber';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import RadioButtonCheckedIcon from '@mui/icons-material/RadioButtonChecked';
+import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
+import TimelapseIcon from '@mui/icons-material/Timelapse';
+import DoneAllIcon from '@mui/icons-material/DoneAll';
+import BlockIcon from '@mui/icons-material/Block';
+import HideSourceIcon from '@mui/icons-material/HideSource';
+import PanoramaFishEyeIcon from '@mui/icons-material/PanoramaFishEye';
+import NotificationsActiveOutlinedIcon from '@mui/icons-material/NotificationsActiveOutlined';
+import {MythicChip} from './MythicChip';
+import {MythicStyledTooltip} from './MythicStyledTooltip';
+
+const statusConfig = {
+    success: {tone: "success", icon: <CheckCircleOutlineIcon />, label: "Success", tooltip: "Completed successfully"},
+    error: {tone: "error", icon: <ErrorOutlineIcon />, label: "Error", tooltip: "Errored"},
+    warning: {tone: "warning", icon: <WarningAmberIcon />, label: "Warning"},
+    info: {tone: "info", icon: <InfoOutlinedIcon />, label: "Info"},
+    active: {tone: "success", icon: <RadioButtonCheckedIcon />, label: "Active"},
+    inactive: {tone: "error", icon: <RadioButtonUncheckedIcon />, label: "Inactive"},
+    disabled: {tone: "neutral", icon: <RadioButtonUncheckedIcon />, label: "Disabled"},
+    deleted: {tone: "error", icon: <DeleteOutlineIcon />, label: "Deleted"},
+    locked: {tone: "warning", icon: <LockOutlinedIcon />, label: "Locked"},
+    building: {tone: "warning", icon: <TimelapseIcon />, label: "Building"},
+    completed: {tone: "success", icon: <DoneAllIcon />, label: "Completed"},
+    blocked: {tone: "error", icon: <BlockIcon />, label: "Blocked"},
+    skipped: {tone: "secondary", icon: <HideSourceIcon />, label: "Skipped"},
+    running: {tone: "info", icon: <TimelapseIcon />, label: "Running"},
+    cancelled: {tone: "warning", icon: <HideSourceIcon />, label: "Cancelled"},
+    queued: {tone: "secondary", icon: <PanoramaFishEyeIcon />, label: "Queued", tooltip: "Waiting to run"},
+    awaiting_approval: {tone: "warning", icon: <TimelapseIcon />, label: "Awaiting approval"},
+    input_needed: {tone: "warning", icon: <InfoOutlinedIcon />, label: "Input needed"},
+    configured: {tone: "secondary", icon: <PanoramaFishEyeIcon />, label: "Configured"},
+    waiting: {tone: "secondary", icon: <PanoramaFishEyeIcon />, label: "Waiting"},
+    runnable: {tone: "success", icon: <RadioButtonCheckedIcon />, label: "Runnable"},
+    needs_approval: {tone: "warning", icon: <TimelapseIcon />, label: "Needs approval"},
+    stopped: {tone: "warning", icon: <RadioButtonUncheckedIcon />, label: "Stopped"},
+    available: {tone: "success", icon: <RadioButtonCheckedIcon />, label: "Available"},
+    hidden: {tone: "warning", icon: <HideSourceIcon />, label: "Hidden"},
+    updating: {tone: "warning", icon: <TimelapseIcon />, label: "Updating"},
+    alerting: {tone: "warning", icon: <NotificationsActiveOutlinedIcon />, label: "Alerting"},
+    dead: {tone: "warning", icon: <WarningAmberIcon />, label: "Likely dead"},
+    unknown: {tone: "error", icon: <ErrorOutlineIcon />, label: "Unknown"},
+    secondary: {tone: "secondary", icon: <InfoOutlinedIcon />, label: "Status"},
+};
+
+export function getMythicStatusConfig(status) {
+    return statusConfig[status] || statusConfig.secondary;
+}
+
+export function getMythicStatusFromTaskStatus(status) {
+    const normalized = `${status || ""}`.toLowerCase();
+    if(normalized.includes("error") || normalized.includes("failed")){
+        return "error";
+    }
+    if(normalized.includes("warning")){
+        return "warning";
+    }
+    if(normalized.includes("success") || normalized.includes("completed")){
+        return "success";
+    }
+    if(normalized.includes("processing") || normalized.includes("building")){
+        return "building";
+    }
+    return "info";
+}
+
+export function MythicStatusIcon({
+    className = "",
+    status = "secondary",
+    tooltip = false,
+    tooltipStyle = {},
+    tooltipTitle,
+    ...props
+}) {
+    const config = getMythicStatusConfig(status);
+    const icon = React.cloneElement(config.icon, {
+        ...props,
+        className: `mythic-icon-tone text-tone mythic-tone-${config.tone}${className ? ` ${className}` : ""}`,
+    });
+
+    return tooltip ? (
+        <MythicStyledTooltip
+            title={tooltipTitle || config.tooltip || config.label}
+            tooltipStyle={{display: "inline-flex", ...tooltipStyle}}
+        >
+            {icon}
+        </MythicStyledTooltip>
+    ) : icon;
+}
+
+export function MythicStatusChip({
+    label,
+    status = "secondary",
+    className = "",
+    icon,
+    showIcon = true,
+    size = "small",
+    variant = "soft",
+    sx = {},
+    ...props
+}) {
+    const config = getMythicStatusConfig(status);
+    const chipIcon = showIcon ? (icon || config.icon) : undefined;
+
+    return (
+        <MythicChip
+            className={className}
+            label={label || config.label}
+            icon={chipIcon}
+            size={size}
+            tone={config.tone}
+            variant={variant}
+            sx={sx}
+            {...props}
+        />
+    );
+}

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,183 @@
+import {MythicActionButton} from "./MythicActionButton";
+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 {alpha, useTheme} from '@mui/material/styles';
+import {
+    Draggable,
+} from "@hello-pangea/dnd";
+import IconButton from "@mui/material/IconButton";
+
+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,
+                  minHeight: 0,
+                  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 theme = useTheme();
+    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}>
+                    {(() => {
+                        const selected = selectedIndex === index || snapshot.isDragging;
+                        const tabAccent = tabInfo?.color || theme.palette.primary.main;
+                        const selectedTabSurface = theme.palette.background.paper;
+                        const selectedTabAccent = alpha(tabAccent, theme.palette.mode === "dark" ? 0.34 : 0.2);
+                        return (
+                    <Tab
+                        label={
+                            <span onContextMenu={handleContextClick} style={{}} ref={dropdownAnchorRef}>
+                                <Badge color="success" variant="dot" invisible={!highlight} >
+                                    {label}
+                                </Badge>
+                            </span>
+                        }
+                        {...a11yProps(index)}
+                        {...other}
+                        {...provided.dragHandleProps}
+                        style={{
+                            padding: "0rem .5rem 0rem 0.5rem",
+                            margin: "0 0.125rem 0 0",
+                            minHeight: "2rem",
+                            borderRadius: `${theme.shape.borderRadius}px`,
+                            borderTop: selected ?  `3px solid ${tabAccent}` : `1px solid ${theme.borderColor}`,
+                            borderRight: `1px solid ${theme.borderColor}`,
+                            borderBottom: `1px solid ${theme.borderColor}`,
+                            borderLeft: `1px solid ${theme.borderColor}`,
+                            backgroundColor: selected ? selectedTabSurface : theme.surfaces?.muted,
+                            backgroundImage: selected ?
+                                `linear-gradient(180deg, ${selectedTabAccent} 0%, ${selectedTabSurface} 82%)` :
+                                "none",
+                            color: theme.palette.text.primary,
+                        }}
+                    />
+                        );
+                    })()}
+                    <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 bg-surface rounded border"}>
+                                    <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>
+                                            ))}
+                                            <MenuItem onClick={onClick}>Close Tab</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 className="mythic-search-tab-label items-center inline-flex gap-3 whitespace-nowrap">
+                    {iconComponent}
+                    <span>{label}</span>
+                </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,19 @@
+import {styled} from '@mui/material/styles';
+import TableCell from '@mui/material/TableCell';
+const MythicStyledTableCell = styled(TableCell, {})(({theme}) => ({
+  borderBottom: `1px solid ${theme.table?.borderSoft || theme.borderColor}`,
+  lineHeight: 1.35,
+  padding: "6px 10px !important",
+  verticalAlign: "middle",
+  "&.MuiTableCell-head": {
+    borderBottom: `1px solid ${theme.table?.border || theme.borderColor}`,
+    padding: "6px 10px !important",
+  },
+  "&:first-of-type": {
+    paddingLeft: "12px !important",
+  },
+  "&:last-of-type": {
+    paddingRight: "12px !important",
+  },
+}));
+export default MythicStyledTableCell;

MythicReactUI/src/components/MythicComponents/MythicTablePagination.js

@@ -0,0 +1,119 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import Pagination from '@mui/material/Pagination';
+import Typography from '@mui/material/Typography';
+
+export const MythicTablePagination = ({
+    count,
+    totalCount,
+    fetchLimit,
+    onChange,
+    page,
+    id,
+    color = "primary",
+    label = "Total Results",
+    summary,
+    className = "",
+    containerStyle = {},
+    paginationStyle = {},
+    ...paginationProps
+}) => {
+    const pageCount = count ?? Math.ceil((totalCount || 0) / (fetchLimit || 1));
+    const controlledPage = page === undefined ? {} : {page};
+
+    return (
+        <Box className={`mythic-table-footer flex justify-center items-center flex-wrap gap-4 rounded bg-surface-muted border-subtle ${className} w-full`.trim()} id={id} style={containerStyle}>
+            <Pagination
+                count={pageCount}
+                variant="outlined"
+                color={color}
+                boundaryCount={1}
+                siblingCount={1}
+                onChange={onChange}
+                showFirstButton={true}
+                showLastButton={true}
+                style={paginationStyle}
+                {...controlledPage}
+                {...paginationProps}
+            />
+            {summary !== undefined && summary !== null ? (
+                <Typography className="mythic-table-total text-sm font-650 text-muted whitespace-nowrap">{summary}</Typography>
+            ) : totalCount !== undefined && (
+                <Typography className="mythic-table-total text-sm font-650 text-muted whitespace-nowrap">{label}: {totalCount}</Typography>
+            )}
+        </Box>
+    );
+};
+
+export const useMythicClientPagination = ({
+    items = [],
+    resetKey = "",
+    rowsPerPage = 25,
+}) => {
+    const safeItems = React.useMemo(() => {
+        return Array.isArray(items) ? items : [];
+    }, [items]);
+    const [page, setPage] = React.useState(1);
+    const totalCount = safeItems.length;
+    const pageCount = Math.max(1, Math.ceil(totalCount / rowsPerPage));
+    const safePage = Math.min(page, pageCount);
+    const pageStart = (safePage - 1) * rowsPerPage;
+    const pageData = React.useMemo(() => {
+        return safeItems.slice(pageStart, pageStart + rowsPerPage);
+    }, [pageStart, rowsPerPage, safeItems]);
+    const pageEnd = totalCount === 0 ? 0 : Math.min(pageStart + rowsPerPage, totalCount);
+    const pageStartDisplay = totalCount === 0 ? 0 : pageStart + 1;
+
+    React.useEffect(() => {
+        setPage(1);
+    }, [resetKey, rowsPerPage, totalCount]);
+
+    React.useEffect(() => {
+        if(page > pageCount){
+            setPage(pageCount);
+        }
+    }, [page, pageCount]);
+
+    const onChangePage = React.useCallback((event, nextPage) => {
+        setPage(nextPage);
+    }, []);
+
+    return {
+        onChangePage,
+        page: safePage,
+        pageCount,
+        pageData,
+        pageEnd,
+        pageStart,
+        pageStartDisplay,
+        rangeLabel: `${pageStartDisplay}-${pageEnd} of ${totalCount}`,
+        rowsPerPage,
+        showPagination: totalCount > rowsPerPage,
+        totalCount,
+    };
+};
+
+export const MythicClientSideTablePagination = ({
+    id,
+    pagination,
+    selectedCount,
+    selectedLabel = "selected",
+    ...paginationProps
+}) => {
+    if(!pagination?.showPagination){
+        return null;
+    }
+    const summary = selectedCount === undefined || selectedCount === null ?
+        pagination.rangeLabel :
+        `${pagination.rangeLabel}, ${selectedCount} ${selectedLabel}`;
+    return (
+        <MythicTablePagination
+            count={pagination.pageCount}
+            id={id}
+            onChange={pagination.onChangePage}
+            page={pagination.page}
+            summary={summary}
+            {...paginationProps}
+        />
+    );
+};

MythicReactUI/src/components/MythicComponents/MythicTableToolbar.js

@@ -0,0 +1,116 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
+import ToggleButton from '@mui/material/ToggleButton';
+import SearchIcon from '@mui/icons-material/Search';
+import MythicTextField from './MythicTextField';
+import {MythicActionButton} from './MythicActionButton';
+
+export const MythicTableToolbar = ({children, className = "", style = {}, variant}) => {
+    return (
+        <Box className={`mythic-table-toolbar flex flex-none flex-wrap gap-4 w-full rounded bg-surface-muted border-subtle${variant ? ` mythic-table-toolbar-${variant}` : ""} ${className}`.trim()} style={style}>
+            {children}
+        </Box>
+    );
+};
+
+export const MythicTableToolbarGroup = ({children, grow = false, label, className = "", style = {}}) => {
+    return (
+        <Box className={`mythic-table-toolbar-group items-center flex flex-wrap gap-3 ${grow ? "mythic-table-toolbar-group-grow" : ""} ${className} max-w-full`.trim()} style={style}>
+            {label &&
+                <span className="mythic-table-toolbar-group-label text-2xs font-800 leading-100 text-muted">{label}</span>
+            }
+            {children}
+        </Box>
+    );
+};
+
+export const MythicToolbarSelect = ({children, className = "", style = {}, ...props}) => {
+    return (
+        <Select
+            className={`mythic-toolbar-select ${className} w-full`.trim()}
+            size="small"
+            style={style}
+            {...props}
+        >
+            {children}
+        </Select>
+    );
+};
+
+export const MythicToolbarMenuItem = MenuItem;
+
+export const MythicSearchField = ({
+    value,
+    onChange,
+    onEnter,
+    onSearch,
+    disabled = false,
+    placeholder = "Search...",
+    name = "Search",
+    showLabel = false,
+    autoFocus,
+    inputProps = {},
+    endAdornment = null,
+}) => {
+    return (
+        <MythicTextField
+            disabled={disabled}
+            placeholder={placeholder}
+            value={value}
+            marginTop="0px"
+            marginBottom="0px"
+            showLabel={showLabel}
+            onChange={onChange}
+            onEnter={onEnter || onSearch}
+            name={name}
+            autoFocus={autoFocus}
+            InputProps={{
+                endAdornment: onSearch ? (
+                    <React.Fragment>
+                        {endAdornment}
+                        <MythicActionButton disabled={disabled} icon={<SearchIcon />} iconOnly onClick={onSearch} tone="primary" tooltip="Search" />
+                    </React.Fragment>
+                ) : endAdornment,
+                style: {padding: 0},
+                ...inputProps,
+            }}
+        />
+    );
+};
+
+export const MythicToolbarButton = ({children, tone, ...props}) => {
+    return (
+        <MythicActionButton tone={tone} {...props}>
+            {children}
+        </MythicActionButton>
+    );
+};
+
+export const MythicToolbarToggle = ({
+    checked,
+    onClick,
+    label,
+    activeLabel,
+    inactiveLabel,
+    activeIcon,
+    inactiveIcon,
+    value = "toggle",
+    className = "",
+    ...props
+}) => {
+    return (
+        <ToggleButton
+            className={`mythic-toolbar-toggle border-subtle text-muted gap-3 rounded whitespace-nowrap ${className}`.trim()}
+            value={value}
+            selected={checked}
+            onClick={onClick}
+            size="small"
+            {...props}
+        >
+            {checked ? activeIcon : inactiveIcon}
+            <span>{checked ? (activeLabel || label) : (inactiveLabel || label)}</span>
+        </ToggleButton>
+    );
+};

MythicReactUI/src/components/MythicComponents/MythicTag.js

@@ -0,0 +1,858 @@
+import {MythicActionButton} from "./MythicActionButton";
+import React from 'react';
+import Button from '@mui/material/Button';
+import DialogContent from '@mui/material/DialogContent';
+import MythicTextField from './MythicTextField';
+import {useQuery, gql, useMutation} from '@apollo/client';
+import {Box, Select, MenuItem, Link, Typography} from '@mui/material';
+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 {MythicChip} from './MythicChip';
+import LocalOfferOutlinedIcon from '@mui/icons-material/LocalOfferOutlined';
+import {mythicFetch} from '../utilities/MythicConnection';
+import {MythicStyledTooltip} from "./MythicStyledTooltip";
+import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
+import {meState} from "../../cache";
+import { useReactiveVar } from '@apollo/client';
+import {MythicDraggableDialogTitle} from "./MythicDraggableDialogTitle";
+import {NewTagtypesDialog} from "../pages/Tags/NewTagtypesDialog";
+import {getTagReadableTextColor, TagTypeChip} from "./MythicTagChip";
+import {
+  MythicDialogBody,
+  MythicDialogButton,
+  MythicDialogFooter,
+  MythicDialogSection,
+  MythicFormField,
+  MythicFormGrid,
+  MythicFormNote
+} from "./MythicDialogLayout";
+
+const getCreateTagTargetObject = (target_object) => {
+  if(target_object === "task_id"){
+    return "task_display_id";
+  } else if(target_object === "callback_id"){
+    return "callback_display_id";
+  }
+  return target_object;
+}
+
+const createNewTagMutationTemplate = ({target_object}) => {
+  const createTagTargetObject = getCreateTagTargetObject(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!, $${createTagTargetObject}: Int!, $tagtype_id: Int!){
+    createTag(url: $url, data: $data, source: $source, ${createTagTargetObject}: $${createTagTargetObject}, 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 theme = useTheme();
+  const [openTagDisplay, setOpenTagDisplay] = React.useState(false);
+  const [label, setLabel] = React.useState(expand ? tag.tagtype.name : tag.tagtype.name[0]);
+  const color = tag?.tagtype?.color || "";
+  const textColor = getTagReadableTextColor(theme, color);
+  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>
+      <MythicChip color={color} onMouseOver={onMouseOver} onMouseOut={onMouseOut} label={label} size="small" onClick={(e) => onSelectTag(e)}
+            sx={{
+              backgroundColor: color + " !important",
+              color: textColor + " !important",
+              float: "right",
+              height: "15px",
+              "& .MuiChip-label": {
+                color: "inherit",
+                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();
+    mythicFetch(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>
+      )
+    }
+    if(capturePieces[2].startsWith("http:") || capturePieces[2].startsWith("https:")){
+      return (
+          <Link href={capturePieces[2]} color="textPrimary" target={"_blank"} >{capturePieces[1]}</Link>
+      )
+    } else {
+      return <Typography>
+        {capturePieces[1]} - ( {capturePieces[2]} )
+      </Typography>
+    }
+
+  } else if(value.startsWith("http:") || value.startsWith("https:")){
+    return (
+        <>
+          {"Click for: "}
+          <Link href={value} color="textPrimary" target="_blank" >{name}</Link>
+        </>
+    )
+  }
+  return value;
+}
+const RenderedTagDataPreview = ({data}) => {
+  const trimmedData = typeof data === "string" ? data.trim() : data;
+  if(trimmedData === ""){
+    return <Box className="mythic-tag-data-preview-empty text-sm items-center flex justify-center text-muted text-center">No JSON data to render.</Box>;
+  }
+  try {
+    const parsedData = typeof data === "string" ? JSON.parse(data) : data;
+    if(parsedData === null || typeof parsedData !== "object"){
+      return (
+          <Box className="mythic-tag-data-preview-row gap-4 min-w-0 rounded grid bg-neutral-1 border-subtle">
+            <Box className="mythic-tag-data-preview-key text-xs font-800 min-w-0 truncate text-muted whitespace-nowrap">value</Box>
+            <Box className="mythic-tag-data-preview-value text-sm leading-135 min-w-0 wrap-anywhere text-primary">{String(parsedData)}</Box>
+          </Box>
+      );
+    }
+    const entries = Array.isArray(parsedData) ?
+        parsedData.map((value, index) => [`[${index}]`, value]) :
+        Object.entries(parsedData);
+    if(entries.length === 0){
+      return <Box className="mythic-tag-data-preview-empty text-sm items-center flex justify-center text-muted text-center">JSON object is empty.</Box>;
+    }
+    return (
+        <Box className="mythic-tag-data-preview-list flex flex-column gap-3 min-w-0">
+          {entries.map(([key, value]) => (
+              <Box className="mythic-tag-data-preview-row gap-4 min-w-0 rounded grid bg-neutral-1 border-subtle" key={key}>
+                <Box className="mythic-tag-data-preview-key text-xs font-800 min-w-0 truncate text-muted whitespace-nowrap">{key}</Box>
+                <Box className="mythic-tag-data-preview-value text-sm leading-135 min-w-0 wrap-anywhere text-primary">
+                  {typeof value === "string" ? (
+                      <StringTagDataEntry name={key} value={value} />
+                  ) : typeof value === "boolean" ? (
+                      value ? "True" : "False"
+                  ) : typeof value === "object" && value !== null ? (
+                      <pre>{JSON.stringify(value, null, 2)}</pre>
+                  ) : (
+                      String(value)
+                  )}
+                </Box>
+              </Box>
+          ))}
+        </Box>
+    );
+  } catch (error) {
+    return <Box className="mythic-tag-data-preview-empty text-sm items-center flex justify-center text-muted text-center">Enter valid JSON to render a preview.</Box>;
+  }
+}
+const TagReadonlyValue = ({children}) => (
+    <Box className="mythic-tag-readonly-value text-sm leading-135 items-center flex min-w-0 wrap-anywhere w-full rounded bg-surface border-subtle text-primary">
+      {children || "None"}
+    </Box>
+)
+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 stopPropagation = (e) => {
+    e.stopPropagation();
+  }
+  const rawData = selectedTag?.is_json ? JSON.stringify(selectedTag?.data || {}, null, 2) : selectedTag?.data || "";
+return (
+  <React.Fragment>
+      <MythicDraggableDialogTitle>View Tag</MythicDraggableDialogTitle>
+      <DialogContent dividers={true} style={{width: "100%"}} onClick={stopPropagation}>
+        <MythicDialogBody>
+          <MythicDialogSection
+              title="Tag Type"
+              description={selectedTag?.tagtype?.description || "No description provided."}
+              actions={
+                objectInfo.object_type !== "" &&
+                  <ViewEditTags target_object={objectInfo.object_type} target_object_id={objectInfo.object_id} me={props.me} />
+              }
+          >
+            {selectedTag?.tagtype &&
+              <TagTypeChip tagtype={selectedTag.tagtype} />
+            }
+          </MythicDialogSection>
+          <MythicDialogSection title="Reference Details">
+            <MythicFormGrid minWidth="16rem">
+              <MythicFormField label="Source">
+                <TagReadonlyValue>{selectedTag?.source || "None"}</TagReadonlyValue>
+              </MythicFormField>
+              <MythicFormField label="External URL">
+                <TagReadonlyValue>
+                  {selectedTag?.url ? (
+                      <Link href={selectedTag.url.startsWith("http:") || selectedTag.url.startsWith("https:") ? selectedTag.url : "#"}
+                            color="textPrimary" target="_blank" referrerPolicy='no'>
+                        {selectedTag.url}
+                      </Link>
+                  ) : (
+                      "No reference link provided"
+                  )}
+                </TagReadonlyValue>
+              </MythicFormField>
+            </MythicFormGrid>
+          </MythicDialogSection>
+          <MythicDialogSection title="Tag Data">
+            {selectedTag?.is_json ? (
+                <Box className="mythic-tag-data-preview-frame mythic-tag-data-preview-frame-full min-w-0 overflow-auto rounded bg-surface border-subtle text-primary">
+                  <RenderedTagDataPreview data={selectedTag?.data || {}} />
+                </Box>
+            ) : (
+                <Box className="mythic-tag-editor-frame min-w-0 overflow-hidden w-full rounded bg-surface border-subtle">
+                  <AceEditor
+                      mode="json"
+                      theme={theme.palette.mode === "dark" ? "monokai" : "xcode"}
+                      fontSize={14}
+                      showGutter={true}
+                      showPrintMargin={false}
+                      minLines={8}
+                      maxLines={18}
+                      highlightActiveLine={false}
+                      readOnly={true}
+                      value={rawData}
+                      width={"100%"}
+                      setOptions={{
+                        showLineNumbers: true,
+                        tabSize: 4,
+                        useWorker: false,
+                        wrapBehavioursEnabled: true,
+                        wrap: true
+                      }}/>
+                </Box>
+            )}
+          </MythicDialogSection>
+        </MythicDialogBody>
+      </DialogContent>
+      <MythicDialogFooter onClick={stopPropagation}>
+        <MythicDialogButton onClick={onClose}>
+          Close
+        </MythicDialogButton>
+      </MythicDialogFooter>
+</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, tagtype}) => {
+  const newTag = {id, source, url, data, tagtype_id, tagtype};
+  const newTags = [...existingTags, newTag].sort((a, b) => a.tagtype.name.localeCompare(b.tagtype.name));
+  setExistingTags(newTags);
+  setSelectedTag(newTag);
+  setNewSource(source);
+  setNewURL(url);
+  setNewData(data);
+  setOpenNewDialog(false);
+}
+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}
+            target_object_display_id={props.target_object_display_id}
+            onClose={()=>{setOpenNewDialog(false);}} 
+            onSubmit={handleNewTagCreate} />}
+      />}
+        <MythicDialogBody>
+          <MythicDialogSection
+              title="Tag Selection"
+              description={existingTags.length === 0 ? "No tags are attached yet." : "Choose the tag you want to update."}
+              actions={
+                <MythicStyledTooltip title={"Add New Tag"}>
+                  <MythicActionButton iconOnly appearance="raised" colorMode="hover" tone="success" size="small" onClick={() => setOpenNewDialog(true)}>
+                    <AddCircleOutlineIcon fontSize="small" />
+                  </MythicActionButton>
+                </MythicStyledTooltip>
+              }
+          >
+            {existingTags.length === 0 ? (
+              <MythicFormNote>
+                Add a tag to capture source, reference, and structured data for this item.
+              </MythicFormNote>
+            ) : (
+              <Box sx={{display: "grid", gap: 1, gridTemplateColumns: {xs: "1fr", md: selectedTag.id ? "minmax(0, 1fr) auto" : "1fr"}, alignItems: "end"}}>
+                <MythicFormField label="Existing Tag">
+                  <Select
+                      fullWidth
+                      size="small"
+                      value={selectedTag}
+                      onChange={handleTaskTypeChange}
+                      renderValue={(tag) => tag?.id ? <TagTypeChip tagtype={tag.tagtype} /> : "Select a tag"}
+                  >
+                    {existingTags.map( (opt) => (
+                        <MenuItem value={opt} key={opt.id}>
+                          <TagTypeChip tagtype={opt.tagtype} />
+                        </MenuItem>
+                    ) )}
+                  </Select>
+                </MythicFormField>
+                {selectedTag.id &&
+                  <MythicStyledTooltip title={"Delete Tag"}>
+                    <Box sx={{alignItems: "center", alignSelf: "end", display: "flex", height: 38}}>
+                      <MythicActionButton iconOnly appearance="raised" colorMode="hover" tone="error" size="small" onClick={()=>{setOpenDeleteDialog(true);}}>
+                        <DeleteIcon fontSize="small" />
+                      </MythicActionButton>
+                    </Box>
+                  </MythicStyledTooltip>
+                }
+                {selectedTag.id && selectedTag?.tagtype?.description &&
+                  <Box sx={{gridColumn: "1 / -1"}}>
+                    <MythicFormNote>{selectedTag.tagtype.description}</MythicFormNote>
+                  </Box>
+                }
+              </Box>
+            )}
+            {openDelete &&
+              <MythicConfirmDialog onClose={() => {setOpenDeleteDialog(false);}} onSubmit={onAcceptDelete} open={openDelete}/>
+            }
+          </MythicDialogSection>
+          {selectedTag.id &&
+            <>
+              <MythicDialogSection title="Reference Details">
+                <MythicFormGrid minWidth="16rem">
+                  <MythicFormField label="Source">
+                    <MythicTextField value={newSource} onChange={onChangeSource} name="Source of tag data" showLabel={false} marginTop="0" marginBottom="0" />
+                  </MythicFormField>
+                  <MythicFormField label="External URL">
+                    <MythicTextField value={newURL} onChange={onChangeURL} name="External URL reference" showLabel={false} marginTop="0" marginBottom="0" />
+                    {newURL &&
+                      <Link href={newURL} color="textPrimary" target="_blank" referrerPolicy='no' sx={{display: "inline-flex", mt: 0.5, fontSize: "0.78rem"}}>
+                        Open reference
+                      </Link>
+                    }
+                  </MythicFormField>
+                </MythicFormGrid>
+              </MythicDialogSection>
+              <MythicDialogSection title="JSON Data">
+                <Box className="mythic-tag-data-split gap-6 min-w-0 w-full grid">
+                  <Box className="mythic-tag-editor-frame min-w-0 overflow-hidden w-full rounded bg-surface border-subtle">
+                    <AceEditor
+                        mode="json"
+                        theme={theme.palette.mode === "dark" ? "monokai" : "xcode"}
+                        onChange={onEditorChange}
+                        fontSize={14}
+                        showGutter={true}
+                        showPrintMargin={false}
+                        minLines={10}
+                        maxLines={18}
+                        highlightActiveLine={true}
+                        value={newData}
+                        width={"100%"}
+                        setOptions={{
+                          showLineNumbers: true,
+                          tabSize: 4,
+                          useWorker: false,
+                          wrap: true
+                        }}/>
+                  </Box>
+                  <Box className="mythic-tag-data-preview-frame min-w-0 overflow-auto rounded bg-surface border-subtle text-primary">
+                    <RenderedTagDataPreview data={newData} />
+                  </Box>
+                </Box>
+              </MythicDialogSection>
+            </>
+          }
+        </MythicDialogBody>
+      </DialogContent>
+      <MythicDialogFooter>
+        <MythicDialogButton onClick={props.onClose}>
+          Close
+        </MythicDialogButton>
+        {selectedTag.id &&
+            <MythicDialogButton intent="primary" onClick={onSubmit}>
+              Submit
+            </MythicDialogButton>
+        }
+      </MythicDialogFooter>
+</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 [openNewTagTypeDialog, setOpenNewTagTypeDialog] = React.useState(false);
+    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, tagtype: selectedTagType});
+        props.onClose()
+      } else {
+        snackActions.error(data.createTag.error);
+      }
+
+    },
+    onError: error => {
+      snackActions.error(error.message);
+    }
+  })
+  const handleTaskTypeChange = (evt) => {
+    setSelectedTagType(evt.target.value);
+  }
+  const onNewTagType = ({name, description, id, color}) => {
+    const newTagType = {name, description, id, color};
+    setExistingTagTypes((prev) => [...prev, newTagType].sort((a, b) => a.name.localeCompare(b.name)));
+    setSelectedTagType(newTagType);
+  }
+  const onSubmit = () => {
+    newTag({variables: 
+      {source:newSource, url:newURL, data:newData, 
+      tagtype_id:selectedTagType.id, 
+      [getCreateTagTargetObject(props.target_object)]: props.target_object_display_id || 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>
+        {openNewTagTypeDialog &&
+          <MythicDialog fullWidth={true} maxWidth="md" open={openNewTagTypeDialog}
+                        onClose={()=>{setOpenNewTagTypeDialog(false);}}
+                        innerDialog={
+                          <NewTagtypesDialog
+                              onClose={()=>{setOpenNewTagTypeDialog(false);}}
+                              onSubmit={onNewTagType}
+                          />
+                        }
+          />
+        }
+        <MythicDraggableDialogTitle >Add New Tag</MythicDraggableDialogTitle>
+        <DialogContent dividers={true} style={{width: "100%"}}>
+          <MythicDialogBody>
+            <MythicDialogSection
+                title="Tag Type"
+                description="Select the taxonomy entry this tag should use."
+                actions={
+                  <Button className="mythic-compact-action bg-surface-raised border text-primary text-xs font-750 mythic-action-tone-hover mythic-tone-info rounded" size="small" variant="outlined" onClick={() => setOpenNewTagTypeDialog(true)}>
+                    Manage Tag Types
+                  </Button>
+                }
+            >
+              <MythicFormField label="Tag">
+                <Select
+                    fullWidth
+                    size="small"
+                    value={selectedTagType}
+                    onChange={handleTaskTypeChange}
+                    displayEmpty
+                    renderValue={(tagtype) => tagtype?.id ? <TagTypeChip tagtype={tagtype} /> : "No tag types available"}
+                >
+                  {existingTagTypes.map( (opt) => (
+                      <MenuItem value={opt} key={opt.name}>
+                        <TagTypeChip tagtype={opt} />
+                      </MenuItem>
+                  ) )}
+                </Select>
+              </MythicFormField>
+              {selectedTagType?.description &&
+                <MythicFormNote>{selectedTagType.description}</MythicFormNote>
+              }
+            </MythicDialogSection>
+            <MythicDialogSection title="Reference Details">
+              <MythicFormGrid minWidth="16rem">
+                <MythicFormField label="Source">
+                  <MythicTextField value={newSource} onChange={onChangeSource} name="Source of tag data" showLabel={false} marginTop="0" marginBottom="0" />
+                </MythicFormField>
+                <MythicFormField label="External URL">
+                  <MythicTextField value={newURL} onChange={onChangeURL} name="External URL reference" showLabel={false} marginTop="0" marginBottom="0" />
+                  {newURL &&
+                    <Link href={newURL} color="textPrimary" target="_blank" referrerPolicy='no' sx={{display: "inline-flex", mt: 0.5, fontSize: "0.78rem"}}>
+                      Open reference
+                    </Link>
+                  }
+                </MythicFormField>
+              </MythicFormGrid>
+            </MythicDialogSection>
+            <MythicDialogSection title="JSON Data">
+              <Box className="mythic-tag-data-split gap-6 min-w-0 w-full grid">
+                <Box className="mythic-tag-editor-frame min-w-0 overflow-hidden w-full rounded bg-surface border-subtle">
+                  <AceEditor
+                      mode="json"
+                      theme={theme.palette.mode === "dark" ? "monokai" : "xcode"}
+                      onChange={onEditorChange}
+                      fontSize={14}
+                      showGutter={true}
+                      showPrintMargin={false}
+                      minLines={10}
+                      maxLines={18}
+                      highlightActiveLine={true}
+                      value={newData}
+                      width={"100%"}
+                      setOptions={{
+                        showLineNumbers: true,
+                        tabSize: 4,
+                        useWorker: false,
+                        wrap: true
+                      }}/>
+                </Box>
+                <Box className="mythic-tag-data-preview-frame min-w-0 overflow-auto rounded bg-surface border-subtle text-primary">
+                  <RenderedTagDataPreview data={newData} />
+                </Box>
+              </Box>
+            </MythicDialogSection>
+          </MythicDialogBody>
+        </DialogContent>
+        <MythicDialogFooter>
+          <MythicDialogButton onClick={props.onClose}>
+            Close
+          </MythicDialogButton>
+          {selectedTagType !== "" &&
+              <MythicDialogButton intent="primary" onClick={onSubmit}>
+                Submit
+              </MythicDialogButton>
+          }
+        </MythicDialogFooter>
+  </React.Fragment>
+  );
+}
+export const ViewEditTags = ({target_object, target_object_id, target_object_display_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>
+    <MythicActionButton iconOnly onClick={(e) => toggleTagDialog(e, true)} size="small"
+                style={{display: "inline-block", float: "right", padding: "0px"}}>
+      <LocalOfferOutlinedIcon />
+    </MythicActionButton>
+    {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} target_object_display_id={target_object_display_id} onClose={(e)=>{toggleTagDialog(e, false)}} />}
+    />}
+    </React.Fragment>
+  )
+  
+}

MythicReactUI/src/components/MythicComponents/MythicTagChip.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import {useTheme} from '@mui/material/styles';
+import {getReadableTextColor, isValidHexColor} from './MythicColorInput';
+import {MythicChip} from './MythicChip';
+
+export const getTagReadableTextColor = (theme, color) => {
+  return isValidHexColor(color) ? getReadableTextColor(color) : theme.palette.text.primary;
+}
+
+export const TagTypeChip = ({tagtype, label, sx={}}) => {
+  const theme = useTheme();
+  const color = tagtype?.color || "";
+  const textColor = getTagReadableTextColor(theme, color);
+  return (
+    <MythicChip
+        color={color}
+        label={label || tagtype?.name || "Tag"}
+        size="small"
+        sx={{
+          backgroundColor: color || "transparent",
+          border: "1px solid",
+          borderColor: theme.borderColor,
+          color: textColor,
+          ...sx,
+        }}
+    />
+  );
+}

MythicReactUI/src/components/MythicComponents/MythicTextEditDialog.js

@@ -0,0 +1,44 @@
+import React, {useState} from 'react';
+import {MythicActionButton} from './MythicActionButton';
+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>
+        <MythicActionButton colorMode="always" variant="contained" onClick={props.onClose} tone="primary">
+            Close
+        </MythicActionButton>
+        </DialogActions>
+  </React.Fragment>
+  );
+}

MythicReactUI/src/components/MythicComponents/MythicTextField.js

@@ -0,0 +1,149 @@
+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}`]: {
+        '& .MuiInputBase-root': {
+            backgroundColor: theme.palette.background.paper,
+            borderRadius: theme.shape.borderRadius,
+        },
+        '& fieldset': {
+            borderColor: theme.borderColor,
+            borderWidth: 1,
+        },
+        '&:hover fieldset': {
+            borderColor: theme.palette.text.secondary,
+        },
+        '& .Mui-focused fieldset': {
+            borderColor: `${theme.palette.primary.main} !important`,
+            borderWidth: '1px !important',
+        },
+        '& input:invalid + fieldset': {
+            borderColor: theme.palette.error.main,
+            borderWidth: 2,
+        },
+        '& input:valid:focus + fieldset': {
+            borderLeftWidth: 2,
+            padding: '4px !important', // override inline-style
+        },
+        '& textarea:focus + textarea + fieldset': {
+            borderLeftWidth: 2,
+            //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 = {},
+                             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);
+      }
+    }
+    const resolvedAutoComplete = autoComplete === undefined ? "new-password" : (
+        typeof autoComplete === "string" ? autoComplete : (autoComplete ? "on" : "off")
+    );
+
+    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={resolvedAutoComplete}
+                disabled={disabled}
+                required={requiredValue}
+                InputLabelProps={inputLabelProps}
+                multiline={multiline}
+                maxRows={maxRows}
+                error={localError}
+                type={type}
+                onWheel={ event => event.target.blur() }
+                InputProps={{...InputProps, spellCheck: false}}
+                inputProps={{...inputProps, autoComplete: resolvedAutoComplete}}
+                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/MythicTimestamp.js

@@ -0,0 +1,62 @@
+import * as React from "react";
+import { useState, useEffect } from "react";
+import { MythicStyledTooltip } from './MythicStyledTooltip';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import utc from 'dayjs/plugin/utc';
+dayjs.extend(relativeTime);
+dayjs.extend(utc);
+
+const formatDiff = (ms) => {
+    if (ms < 0) ms = 0;
+    const s = Math.trunc(ms / 1000) % 60;
+    const m = Math.trunc(ms / 60000) % 60;
+    const h = Math.trunc(ms / 3600000) % 24;
+    const d = Math.trunc(ms / 86400000);
+    return (d ? d + "d " : "") + (h ? h + "h " : "") + (m ? m + "m " : "") + s + "s";
+};
+
+export const MythicTimestamp = ({
+    children,
+    fromNow = false,
+    duration = false,
+    endTime,
+    interval = 0,
+    withTitle = false,
+    titleFormat = "YYYY-MM-DD HH:mm:ss",
+    serverSkew = 0,
+}) => {
+    const [now, setNow] = useState(Date.now);
+    useEffect(() => {
+        if (!interval) return;
+        const id = setInterval(() => setNow(Date.now()), interval);
+        return () => clearInterval(id);
+    }, [interval]);
+
+    // Mythic's server timestamps without an explicit offset represent UTC.
+    const t = dayjs.utc(children);
+    const compute = () => {
+        if (!t.isValid()) return "";
+        const serverNow = dayjs(now).add(serverSkew, 'ms');
+        if (duration) {
+            const end = endTime != null ? dayjs.utc(endTime) : serverNow;
+            if (!end.isValid()) return "";
+            return formatDiff(end.diff(t));
+        }
+        if (fromNow) {
+            const seconds = Math.round(Math.abs(serverNow.diff(t)) / 1000);
+            if (seconds < 60) return `${seconds} ${seconds === 1 ? 'second' : 'seconds'}`;
+            return t.from(serverNow, true);
+        }
+        return t.local().format(titleFormat);
+    };
+    const display = compute();
+
+    const title = withTitle && t.isValid() ? t.local().format(titleFormat) : "";
+    if (withTitle) return (
+        <MythicStyledTooltip title={title}>
+            <span>{display}</span>
+        </MythicStyledTooltip>
+    );
+    return <span>{display}</span>;
+};

MythicReactUI/src/components/MythicComponents/MythicTimestamp.test.js

@@ -0,0 +1,89 @@
+import React, {act} from 'react';
+import {createRoot} from 'react-dom/client';
+import {MythicTimestamp} from './MythicTimestamp';
+
+jest.mock('./MythicStyledTooltip', () => ({
+    MythicStyledTooltip: ({children, title}) => <div title={title}>{children}</div>,
+}));
+
+describe('MythicTimestamp', () => {
+    let container;
+    let root;
+    const start = '2026-01-15T12:00:00.000000';
+
+    const render = (props) => {
+        act(() => root.render(<MythicTimestamp {...props} />));
+        return container.textContent;
+    };
+
+    beforeEach(() => {
+        jest.useFakeTimers();
+        jest.setSystemTime(new Date('2026-01-15T12:00:10Z'));
+        global.IS_REACT_ACT_ENVIRONMENT = true;
+        container = document.createElement('div');
+        root = createRoot(container);
+    });
+
+    afterEach(() => {
+        act(() => root.unmount());
+        expect(jest.getTimerCount()).toBe(0);
+        jest.useRealTimers();
+        delete global.IS_REACT_ACT_ENVIRONMENT;
+    });
+
+    it('uses UTC for timezone-less end timestamps and respects explicit offsets', () => {
+        const props = {children: start + 'Z', duration: true};
+        expect(render({...props, endTime: '2026-01-15T12:01:00.000000'})).toBe('1m 0s');
+        expect(render({...props, endTime: '2026-01-15T04:01:00-08:00'})).toBe('1m 0s');
+    });
+
+    it('recomputes when only the end time changes', () => {
+        const props = {children: start + 'Z', duration: true};
+        render({...props, endTime: '2026-01-15T12:01:00'});
+        expect(render({...props, endTime: '2026-01-15T12:02:00'})).toBe('2m 0s');
+    });
+
+    it('uses updated server skew immediately and on subsequent ticks', () => {
+        const props = {children: start + 'Z', fromNow: true, interval: 1000};
+        expect(render(props)).toBe('10 seconds');
+        expect(render({...props, serverSkew: 3600000})).toBe('an hour');
+        act(() => jest.advanceTimersByTime(1000));
+        expect(container.textContent).toBe('an hour');
+    });
+
+    it('keeps numeric seconds through 59 seconds and updates every tick', () => {
+        const props = {children: start + 'Z', fromNow: true, interval: 1000};
+        expect(render(props)).toBe('10 seconds');
+        act(() => jest.advanceTimersByTime(49000));
+        expect(container.textContent).toBe('59 seconds');
+        act(() => jest.advanceTimersByTime(1000));
+        expect(container.textContent).toBe('a minute');
+    });
+
+    it('shows zero seconds for fresh check-ins, including after the age resets', () => {
+        const props = {fromNow: true, interval: 1000};
+        expect(render({...props, children: new Date(Date.now() - 200).toISOString()})).toBe('0 seconds');
+        act(() => jest.advanceTimersByTime(1000));
+        expect(container.textContent).toBe('1 second');
+        act(() => jest.advanceTimersByTime(1000));
+        expect(container.textContent).toBe('2 seconds');
+        expect(render({...props, children: new Date(Date.now()).toISOString()})).toBe('0 seconds');
+        act(() => jest.advanceTimersByTime(1000));
+        expect(container.textContent).toBe('1 second');
+    });
+
+    it('recomputes when display mode or format changes', () => {
+        const props = {children: start + 'Z'};
+        expect(render({...props, fromNow: true})).toBe('10 seconds');
+        expect(render({...props, titleFormat: 'YYYY'})).toBe('2026');
+        expect(render({...props, titleFormat: 'MM'})).toBe('01');
+    });
+
+    it('renders invalid timestamps as empty text and clears timers on unmount', () => {
+        expect(render({children: 'invalid', fromNow: true, interval: 1000})).toBe('');
+        expect(jest.getTimerCount()).toBe(1);
+        render({children: start, duration: true, endTime: 'invalid'});
+        expect(container.textContent).toBe('');
+        expect(jest.getTimerCount()).toBe(0);
+    });
+});

MythicReactUI/src/components/MythicComponents/MythicTransferList.js

@@ -0,0 +1,244 @@
+import React, {useEffect} from 'react';
+import { styled } from '@mui/material/styles';
+import {MythicActionButton} from './MythicActionButton';
+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 Divider from '@mui/material/Divider';
+
+const PREFIX = 'MythicTransferList';
+
+export const classes = {
+    divider: `${PREFIX}-divider`
+};
+
+export const StyledDivider = styled(Divider)((
+    {
+        theme
+    }
+) => ({
+    [`&.${classes.divider}`]: {
+        backgroundColor: theme.palette.primary.main,
+        border: `2px solid ${theme.palette.primary.main}`
+    }
+}));
+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 (
+        <div className="mythic-transfer-list flex flex-column min-w-0 overflow-hidden w-full rounded bg-surface border-subtle">
+            <div className="mythic-transfer-list-header bg-table-header text-xs font-700 leading-125 border-b text-primary">{title}</div>
+            <div className="mythic-transfer-list-body flex-fill overflow-auto">
+                <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>
+            </div>
+        </div>
+    );
+}
+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 className="mythic-transfer-controls py-0 px-4 items-center flex flex-column gap-6 justify-center">
+                <MythicActionButton
+                    colorMode="always"
+                    tone="primary"
+                    variant="contained"
+                    size="small"
+                    onClick={handleAllRight}
+                    aria-label="move all right"
+                >
+                    &gt;&gt;
+                </MythicActionButton>
+                <MythicActionButton
+                    colorMode="always"
+                    tone="primary"
+                    variant="contained"
+                    size="small"
+                    disabled={data.filter( x => x.checked && x.left).length === 0}
+                    onClick={handleCheckedRight}
+                    aria-label="move selected right"
+                >
+                    &gt;
+                </MythicActionButton>
+                <MythicActionButton
+                    colorMode="always"
+                    tone="primary"
+                    variant="contained"
+                    size="small"
+                    disabled={data.filter( x => x.checked && x.right).length === 0}
+                    onClick={handleCheckedLeft}
+                    aria-label="move selected left"
+                >
+                    &lt;
+                </MythicActionButton>
+                <MythicActionButton
+                    colorMode="always"
+                    tone="primary"
+                    variant="contained"
+                    size="small"
+                    onClick={handleAllLeft}
+                    aria-label="move all left"
+                >
+                    &lt;&lt;
+                </MythicActionButton>
+
+            </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>
+            <MythicActionButton colorMode="always" onClick={props.onClose} tone="primary" variant="contained">
+            Close
+            </MythicActionButton>
+            <MythicActionButton colorMode="always" onClick={setFinalTags} tone="success" variant="contained">
+            Submit
+            </MythicActionButton>
+        </DialogActions>
+  </>
+  );
+}

MythicReactUI/src/components/MythicComponents/PreviewFileMedia.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import {MythicActionButton} from './MythicActionButton';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import 'ace-builds/src-noconflict/mode-json';
+import 'ace-builds/src-noconflict/theme-monokai';
+import 'ace-builds/src-noconflict/theme-xcode';
+import {ResponseDisplayMedia} from "../pages/Callbacks/ResponseDisplayMedia";
+import {MythicDraggableDialogTitle} from "./MythicDraggableDialogTitle";
+
+export function PreviewFileMediaDialog({agent_file_id, filename, onClose, editable=false}) {
+    const onClick = (e) => {
+        if(e){
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    }
+    return (
+    <React.Fragment>
+        <MythicDraggableDialogTitle>
+            Previewing <b>{filename}</b>
+        </MythicDraggableDialogTitle>
+        <DialogContent onClick={onClick} style={{height: "calc(80vh)", margin: 0, padding: 0}}>
+          <ResponseDisplayMedia media={{agent_file_id, filename, editable}} expand={true} />
+        </DialogContent>
+        <DialogActions>
+        <MythicActionButton colorMode="always" variant="contained" onClick={onClose} tone="primary">
+            Close
+        </MythicActionButton>
+        </DialogActions>
+  </React.Fragment>
+  );
+}