applying csv escape to database exports too

scope interactive output more tightly by callback

.github/dependabot.yml

@@ -2,9 +2,11 @@ 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

@@ -9,7 +9,7 @@ on:
   #  types: [published]
   push:
     branches:
-      - 'Mythic3.3'
+      - 'Mythic-v4.0.0'
       - 'master'
     tags:
       - "v*.*.*"
@@ -44,7 +44,7 @@ env:
   VERSION: ${{ github.ref_name }}
 
   # Branch for pushing release changes
-  RELEASE_BRANCH: master
+  RELEASE_BRANCH: "Mythic-v4.0.0"
 
 jobs:
   # Builds the base container image and pushes it to the container registry
@@ -55,27 +55,27 @@ jobs:
       packages: write
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v4 # ref: https://github.com/marketplace/actions/checkout
+        uses: actions/checkout@v5 # ref: https://github.com/marketplace/actions/checkout
       - name: Log in to the container registry
-        uses: docker/login-action@v3 # ref: https://github.com/marketplace/actions/docker-login
+        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@v3
+        uses: docker/setup-qemu-action@v4
         with:
           platforms: 'arm64,arm'
       - name: Set up Docker Buildx
         id: buildx
-        uses: docker/setup-buildx-action@v3
+        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@v5 # ref: https://github.com/marketplace/actions/build-and-push-docker-images
+        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
@@ -99,28 +99,28 @@ jobs:
     steps:
       # Pull in the repository code
       - name: Checkout the repository
-        uses: actions/checkout@v4 # ref: https://github.com/marketplace/actions/checkout
+        uses: actions/checkout@v5 # ref: https://github.com/marketplace/actions/checkout
       - name: Log in to the container registry
-        uses: docker/login-action@v3 # ref: https://github.com/marketplace/actions/docker-login
+        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@v3
+        uses: docker/setup-qemu-action@v4
         with:
           platforms: 'arm64,arm'
       - name: Set up Docker Buildx
         id: buildx
-        uses: docker/setup-buildx-action@v3
+        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@v5 # ref: https://github.com/marketplace/actions/build-and-push-docker-images
+        uses: docker/build-push-action@v7 # ref: https://github.com/marketplace/actions/build-and-push-docker-images
         with:
           context: postgres-docker
-          file: postgres-docker/.docker/Dockerfile
+          file: postgres-docker/Dockerfile
           tags: |
             ${{ env.REGISTRY }}/${{ env.MYTHIC_POSTGRES_IMAGE_NAME }}:${{ env.VERSION }}
             ${{ env.REGISTRY }}/${{ env.MYTHIC_POSTGRES_IMAGE_NAME }}:latest
@@ -141,28 +141,28 @@ jobs:
     steps:
       # Pull in the repository code
       - name: Checkout the repository
-        uses: actions/checkout@v4 # ref: https://github.com/marketplace/actions/checkout
+        uses: actions/checkout@v5 # ref: https://github.com/marketplace/actions/checkout
       - name: Log in to the container registry
-        uses: docker/login-action@v3 # ref: https://github.com/marketplace/actions/docker-login
+        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@v3
+        uses: docker/setup-qemu-action@v4
         with:
           platforms: 'arm64,arm'
       - name: Set up Docker Buildx
         id: buildx
-        uses: docker/setup-buildx-action@v3
+        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@v5 # ref: https://github.com/marketplace/actions/build-and-push-docker-images
+        uses: docker/build-push-action@v7 # ref: https://github.com/marketplace/actions/build-and-push-docker-images
         with:
           context: rabbitmq-docker
-          file: rabbitmq-docker/.docker/Dockerfile
+          file: rabbitmq-docker/Dockerfile
           tags: |
             ${{ env.REGISTRY }}/${{ env.MYTHIC_RABBITMQ_IMAGE_NAME }}:${{ env.VERSION }}
             ${{ env.REGISTRY }}/${{ env.MYTHIC_RABBITMQ_IMAGE_NAME }}:latest
@@ -183,28 +183,28 @@ jobs:
     steps:
       # Pull in the repository code
       - name: Checkout the repository
-        uses: actions/checkout@v4 # ref: https://github.com/marketplace/actions/checkout
+        uses: actions/checkout@v5 # ref: https://github.com/marketplace/actions/checkout
       - name: Log in to the container registry
-        uses: docker/login-action@v3 # ref: https://github.com/marketplace/actions/docker-login
+        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@v3
+        uses: docker/setup-qemu-action@v4
         with:
           platforms: 'arm64,arm'
       - name: Set up Docker Buildx
         id: buildx
-        uses: docker/setup-buildx-action@v3
+        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@v5 # ref: https://github.com/marketplace/actions/build-and-push-docker-images
+        uses: docker/build-push-action@v7 # ref: https://github.com/marketplace/actions/build-and-push-docker-images
         with:
           context: documentation-docker
-          file: documentation-docker/.docker/Dockerfile
+          file: documentation-docker/Dockerfile
           tags: |
             ${{ env.REGISTRY }}/${{ env.MYTHIC_DOCUMENTATION_IMAGE_NAME }}:${{ env.VERSION }}
             ${{ env.REGISTRY }}/${{ env.MYTHIC_DOCUMENTATION_IMAGE_NAME }}:latest
@@ -225,30 +225,30 @@ jobs:
     steps:
       # Pull in the repository code
       - name: Checkout the repository
-        uses: actions/checkout@v4 # ref: https://github.com/marketplace/actions/checkout
+        uses: actions/checkout@v5 # ref: https://github.com/marketplace/actions/checkout
       - name: Log in to the container registry
-        uses: docker/login-action@v3 # ref: https://github.com/marketplace/actions/docker-login
+        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@v3
+        uses: docker/setup-qemu-action@v4
         with:
           platforms: 'arm64,arm'
       - name: Set up Docker Buildx
         id: buildx
-        uses: docker/setup-buildx-action@v3
+        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@v5 # ref: https://github.com/marketplace/actions/build-and-push-docker-images
+        uses: docker/build-push-action@v7 # ref: https://github.com/marketplace/actions/build-and-push-docker-images
         with:
           context: jupyter-docker
-          file: jupyter-docker/.docker/Dockerfile
+          file: jupyter-docker/Dockerfile
           tags: |
             ${{ env.REGISTRY }}/${{ env.MYTHIC_JUPYTER_IMAGE_NAME }}:${{ env.VERSION }}
             ${{ env.REGISTRY }}/${{ env.MYTHIC_JUPYTER_IMAGE_NAME }}:latest
@@ -269,30 +269,30 @@ jobs:
     steps:
       # Pull in the repository code
       - name: Checkout the repository
-        uses: actions/checkout@v4 # ref: https://github.com/marketplace/actions/checkout
+        uses: actions/checkout@v5 # ref: https://github.com/marketplace/actions/checkout
       - name: Log in to the container registry
-        uses: docker/login-action@v3 # ref: https://github.com/marketplace/actions/docker-login
+        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@v3
+        uses: docker/setup-qemu-action@v4
         with:
           platforms: 'arm64,arm'
       - name: Set up Docker Buildx
         id: buildx
-        uses: docker/setup-buildx-action@v3
+        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@v5 # ref: https://github.com/marketplace/actions/build-and-push-docker-images
+        uses: docker/build-push-action@v7 # ref: https://github.com/marketplace/actions/build-and-push-docker-images
         with:
           context: hasura-docker
-          file: hasura-docker/.docker/Dockerfile
+          file: hasura-docker/Dockerfile
           tags: |
             ${{ env.REGISTRY }}/${{ env.MYTHIC_GRAPHQL_IMAGE_NAME }}:${{ env.VERSION }}
             ${{ env.REGISTRY }}/${{ env.MYTHIC_GRAPHQL_IMAGE_NAME }}:latest
@@ -313,30 +313,30 @@ jobs:
     steps:
       # Pull in the repository code
       - name: Checkout the repository
-        uses: actions/checkout@v4 # ref: https://github.com/marketplace/actions/checkout
+        uses: actions/checkout@v5 # ref: https://github.com/marketplace/actions/checkout
       - name: Log in to the container registry
-        uses: docker/login-action@v3 # ref: https://github.com/marketplace/actions/docker-login
+        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@v3
+        uses: docker/setup-qemu-action@v4
         with:
           platforms: 'arm64,arm'
       - name: Set up Docker Buildx
         id: buildx
-        uses: docker/setup-buildx-action@v3
+        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@v5 # ref: https://github.com/marketplace/actions/build-and-push-docker-images
+        uses: docker/build-push-action@v7 # ref: https://github.com/marketplace/actions/build-and-push-docker-images
         with:
           context: nginx-docker
-          file: nginx-docker/.docker/Dockerfile
+          file: nginx-docker/Dockerfile
           tags: |
             ${{ env.REGISTRY }}/${{ env.MYTHIC_NGINX_IMAGE_NAME }}:${{ env.VERSION }}
             ${{ env.REGISTRY }}/${{ env.MYTHIC_NGINX_IMAGE_NAME }}:latest
@@ -357,29 +357,29 @@ jobs:
     steps:
       # Pull in the repository code
       - name: Checkout the repository
-        uses: actions/checkout@v4 # ref: https://github.com/marketplace/actions/checkout
+        uses: actions/checkout@v5 # ref: https://github.com/marketplace/actions/checkout
       - name: Log in to the container registry
-        uses: docker/login-action@v3 # ref: https://github.com/marketplace/actions/docker-login
+        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@v3
+        uses: docker/setup-qemu-action@v4
         with:
           platforms: 'arm64,arm'
       - name: Set up Docker Buildx
         id: buildx
-        uses: docker/setup-buildx-action@v3
+        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@v5 # ref: https://github.com/marketplace/actions/build-and-push-docker-images
+        uses: docker/build-push-action@v7 # ref: https://github.com/marketplace/actions/build-and-push-docker-images
         with:
-          context: mythic-react-docker
+          context: .
           file: mythic-react-docker/.docker/Dockerfile
           tags: |
             ${{ env.REGISTRY }}/${{ env.MYTHIC_REACT_IMAGE_NAME }}:${{ env.VERSION }}
@@ -411,20 +411,20 @@ jobs:
     steps:
       # Pull in the repository code
       - name: Checkout the repository
-        uses: actions/checkout@v4 # ref: https://github.com/marketplace/actions/checkout
+        uses: actions/checkout@v5 # ref: https://github.com/marketplace/actions/checkout
       - name: Log in to the container registry
-        uses: docker/login-action@v3 # ref: https://github.com/marketplace/actions/docker-login
+        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@v3
+        uses: docker/setup-qemu-action@v4
         with:
           platforms: 'arm64,arm'
       - name: Set up Docker Buildx
         id: buildx
-        uses: docker/setup-buildx-action@v3
+        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}
@@ -435,10 +435,10 @@ jobs:
           sed -i "s|^const MythicDockerLatest =.*$|const MythicDockerLatest = \"${VERSION}\"|" constants.go
 
       - name: Build and push the cli container image
-        uses: docker/build-push-action@v5 # ref: https://github.com/marketplace/actions/build-and-push-docker-images
+        uses: docker/build-push-action@v7 # ref: https://github.com/marketplace/actions/build-and-push-docker-images
         with:
           context: Mythic_CLI
-          file: Mythic_CLI/.docker/Dockerfile
+          file: Mythic_CLI/Dockerfile
           tags: |
             ${{ env.REGISTRY }}/${{ env.MYTHIC_CLI_IMAGE_NAME }}:${{ env.VERSION }}
             ${{ env.REGISTRY }}/${{ env.MYTHIC_CLI_IMAGE_NAME }}:latest
@@ -470,7 +470,7 @@ jobs:
     steps:
       # Pull in the repository code
       - name: Checkout the repository
-        uses: actions/checkout@v4 # ref: https://github.com/marketplace/actions/checkout
+        uses: actions/checkout@v5 # ref: https://github.com/marketplace/actions/checkout
 
       # update names to lowercase
       - name: Lowercase the server container image name
@@ -550,7 +550,7 @@ jobs:
         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-docker/Dockerfile', 'Mythic_CLI/Dockerfile', 'Mythic_CLI/Makefile', 'Mythic_CLI/src/cmd/config/constants.go', 'postgres-docker/Dockerfile', 'rabbitmq-docker/Dockerfile', 'documentation-docker/Dockerfile', 'jupyter-docker/Dockerfile', 'hasura-docker/Dockerfile', 'nginx-docker/Dockerfile', 'mythic-react-docker/Dockerfile']"
+          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

.gitignore

@@ -167,3 +167,11 @@ _ReSharper*/
 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

LICENSE

@@ -130,4 +130,49 @@ 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.
+SOFTWARE.
+
+MIT license
+===========
+
+Copyright (c) 2017 sql.js authors (see AUTHORS)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+
+
+# Some portions of the Makefile taken from:
+Copyright 2017 Ryusei Yamaguchi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

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

@@ -1,4 +1,4 @@
-FROM node:20-alpine
+FROM node:24-alpine
 
 WORKDIR /app
 

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

@@ -6,66 +6,74 @@
   "author": "@its_a_feature_",
   "description": "React UI for Mythic C2 Framework",
   "devDependencies": {
-    "react-scripts": "^5.0.1"
+    "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.10.5",
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
+    "@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",
-    "@mui/icons-material": "^5.15.20",
-    "@mui/lab": "^5.0.0-alpha.138",
-    "@mui/material": "^5.15.20",
-    "@mui/x-charts": "^6.19.8",
-    "@mui/x-data-grid": "^6.20.1",
-    "@mui/x-date-pickers": "^6.20.1",
-    "ace-builds": "^1.35.0",
-    "anser": "^2.1.1",
-    "dayjs": "^1.11.11",
-    "elkjs": "^0.8.2",
-    "graphql": "^16.8.2",
-    "graphql-ws": "^5.16.0",
+    "@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": "^3.1.2",
-    "material-react-table": "^2.13.0",
-    "moment": "^2.30.1",
-    "moment-timezone": "^0.5.45",
+    "jwt-decode": "^4.0.0",
+    "path-browserify": "^1.0.1",
     "randexp": "^0.5.3",
     "react": "^18.3.1",
-    "react-ace": "^10.1.0",
+    "react-ace": "^14.0.1",
     "react-colorful": "^5.6.1",
     "react-dom": "^18.3.1",
     "react-draggable": "^4.4.6",
-    "react-moment": "^1.1.3",
-    "react-router-dom": "^6.23.1",
+    "react-markdown": "^10.1.0",
+    "react-router-dom": "^7.13.1",
     "react-scrollbar-size": "^5.0.0",
     "react-split": "^2.0.14",
-    "react-toastify": "^9.1.3",
-    "react-virtualized": "^9.22.5",
-    "react-virtualized-auto-sizer": "^1.0.24",
-    "react-window": "^1.8.10",
-    "reactflow": "^11.11.3",
+    "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",
-    "styled-components": "^6.1.11",
-    "tough-cookie": "^4.1.4",
+    "sql.js": "^1.13.0",
+    "styled-components": "^6.1.17",
     "uuid": "^9.0.1",
-    "webpack": "^5.92.0",
+    "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-scripts start",
-    "react-build": "react-scripts build",
-    "react-test": "react-scripts test",
+    "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": "cross-env 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"
+    "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": [

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

@@ -21,6 +21,31 @@
       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>

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

@@ -1,31 +1,383 @@
 import { makeVar } from '@apollo/client';
-import React from 'react';
 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 menuOpen = makeVar(false);
+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);
-    localStorage.setItem("user", JSON.stringify(data.user));
+    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,
-        ...data
+        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: localStorage.getItem("access_token"),
-        ...meState()
+        access_token: data.access_token,
+        refresh_token: data.refresh_token,
+        user: {
+            ...me
+        }
     });
+    localStorage.setItem("user", JSON.stringify(me));
 }
-export const FailedRefresh = () =>{
+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");
@@ -42,7 +394,10 @@ export const FailedRefresh = () =>{
         refresh_token: null,
         user: null
     });
+    mePreferences(operatorSettingDefaults);
     snackActions.clearAll();
-    restartWebsockets();
-}
+    if(restart_websockets){
+        restartWebsockets();
+    }
 
+}

MythicReactUI/src/components/EventFeedNotifications.js

@@ -1,26 +1,12 @@
 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!, $operation_id: Int!) {
-  operationeventlog(limit: 1, where: {deleted: {_eq: false}, timestamp: {_gte: $fromNow}, operation_id: {_eq: $operation_id}}, order_by: {id: desc}) {
-    operator {
-        username
-    }
-    id
-    message
-    level
-    resolved
-    source
-  }
-}
- `;
- */
- 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 {
@@ -31,54 +17,53 @@ subscription EventFeedNotificationSubscription($fromNow: timestamp!, $operation_
      level
      resolved
      source
+     warning
    }
  }
   `;
 
-export function EventFeedNotifications(props) {
-    const me = props.me;
-    const fromNow = React.useRef( (new Date()).toISOString() );
-    const { loading, error, data } = useSubscription(subscribe_payloads, {
-        variables: {fromNow: fromNow.current}, 
+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) => {
-            snackActions.warning("Failed to get event notifications");
+           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});
+                    }
+
+                }
+                }
         }
     });
-
-    useEffect( () => {
-        //console.log(data, loading, error, fromNow.current);
-        if(!loading && !error && data && data.operationeventlog_stream.length > 0){
-            if(data.operationeventlog_stream[0].source === "debug" || data.operationeventlog_stream[0].level === "debug" ){
-                return;
-            }
-            if(data.operationeventlog_stream[0].resolved){
-                return;
-            }
-            if(data.operationeventlog_stream[0].operator){
-                const message = data.operationeventlog_stream[0].operator.username + ":\n" + data.operationeventlog_stream[0].message;
-                if (data.operationeventlog_stream[0].level === "warning") {
-                    snackActions.warning(message, { autoClose: 2000});
-                } else {
-                    snackActions.info(message, { autoClose: 2000});
-                }
-
-            }else {
-                if (data.operationeventlog_stream[0].level === "warning") {
-                    snackActions.warning(data.operationeventlog_stream[0].message, {autoClose: 3000});
-                } else {
-                    snackActions.info(
-                        <div style={{width: "100%"}}>{data.operationeventlog_stream[0].message}</div>,
-                    {autoClose: 3000});
-                }
-
-            }
-        }else if(error){
-            console.error(error);
-            snackActions.error("Mythic encountered an error getting operational event stream", {autoHideDuration: 2000});
-        }
-    }, [loading, data, error, me.user]);
-    return null;
+    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

@@ -1,9 +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}) => {
+export const MythicAgentSVGIcon = ({payload_type, style, is_p2p}) => {
     const theme = useTheme();
+    if(payload_type === ""){
+        return;
+    }
     return (
-        <img src={"/static/" + payload_type + "_" + theme.palette.mode + ".svg"}
-             style={{...style}}/>
+        <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

@@ -1,10 +1,9 @@
 import React from 'react';
-import Button from '@mui/material/Button';
-import DialogActions from '@mui/material/DialogActions';
 import DialogTitle from '@mui/material/DialogTitle';
 import {MythicDialog} from './MythicDialog';
 import DialogContentText from '@mui/material/DialogContentText';
 import DialogContent from '@mui/material/DialogContent';
+import {MythicDialogButton, MythicDialogFooter} from "./MythicDialogLayout";
 
 export function MythicConfirmDialog(props) {
     const handleSubmit = () => {
@@ -14,6 +13,10 @@ export function MythicConfirmDialog(props) {
         }
         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={
@@ -26,14 +29,14 @@ export function MythicConfirmDialog(props) {
                 </DialogContentText>
               </DialogContent>
             )}
-            <DialogActions>
-              <Button onClick={props.onClose} variant="contained" color="primary">
+            <MythicDialogFooter>
+              <MythicDialogButton onClick={props.onClose}>
                 {props.cancelText ? (props.cancelText) : ("Cancel")}
-              </Button>
-              <Button onClick={handleSubmit} autoFocus variant="contained" color={props.acceptColor ? (props.acceptColor) : ("error")}>
+              </MythicDialogButton>
+              <MythicDialogButton onClick={handleSubmit} autoFocus intent={acceptIntent}>
                 {props.acceptText ? (props.acceptText) : ("Remove")}
-              </Button>
-            </DialogActions>
+              </MythicDialogButton>
+            </MythicDialogFooter>
         </React.Fragment>
   } />
   );

MythicReactUI/src/components/MythicComponents/MythicDialog.js

@@ -1,7 +1,6 @@
+import {MythicActionButton} from "./MythicActionButton";
 import React, {useEffect} from 'react';
 import Dialog from '@mui/material/Dialog';
-import Button from '@mui/material/Button';
-import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 import Table from '@mui/material/Table';
@@ -18,10 +17,85 @@ 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";
 
-export function MythicDialog(props) {
-  const descriptionElementRef = React.useRef(null);
-  React.useEffect(() => {
+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) {
@@ -30,38 +104,113 @@ export function MythicDialog(props) {
     }
   }, [props.open]);
     const dialogOnClick = (e) => {
-        e.stopPropagation();
-        if(e.target.classList.length > 0 && e.target.classList.contains("MuiDialog-container")){
-            props.onClose();
+        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={props.onClose}
-        scroll="paper"
-        maxWidth={props.maxWidth}
-        fullWidth={props.fullWidth}
-        style={props.style}
-        aria-labelledby="scroll-dialog-title"
-        aria-describedby="scroll-dialog-description"
-        onClick={dialogOnClick}
-        onContextMenu={dialogOnContextMenu}
-      >
-        {props.innerDialog}
-      </Dialog>
+          <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) => {
@@ -77,174 +226,267 @@ export function MythicModifyStringDialog(props) {
     }, [props.value]);
   return (
     <React.Fragment>
-        <DialogTitle id="form-dialog-title">{props.title}</DialogTitle>
-        <DialogContent dividers={true} style={{height: "100%"}}>
+        {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%"
-                height="100%"
-                minLines={props.maxRows ? props.maxRows : 10}
-                maxLines={props.maxRows ? props.maxRows : 10}
+                fontSize={14}
+                showPrintMargin={false}
+                wrapEnabled={wrap}
                 value={comment}
                 focus={true}
                 onChange={onChange}
                 setOptions={{
-                    useWorker: false
+                    tabSize: 4,
+                    useWorker: false,
+                    showInvisibles: false,
                 }}
             />
         </DialogContent>
-        <DialogActions>
-          <Button onClick={props.onClose} variant="contained" color="primary">
-            Close
-          </Button>
-          <Button onClick={onCommitSubmit} variant="contained" color="success">
-            Submit
-          </Button>
-        </DialogActions>
+        { (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>
   );
 }
 
-export function MythicViewJSONAsTableDialog(props) {
-  const [comment, setComment] = React.useState([]);
-  const [tableType, setTableType] = React.useState("dictionary");
-  const [headers, setHeaders] = React.useState([]);
-    useEffect( () => {
-      let permissions = [];
-      try{
-        let permissionDict;
-        if(props.value.constructor === Object){
-          permissionDict = props.value;
-        }else{
-          permissionDict = JSON.parse(props.value);
-        } 
-        
-        if(permissionDict.constructor === Object){
-          for(let key in permissionDict){
-            if(permissionDict[key] && permissionDict[key].constructor === Object){
-              // potentially have a nested dictionary here or array to become a dictionary, mark it
-              permissions.push({"name": key, "value": permissionDict[key], new_table: true, is_dictionary: true, headers: ["Name", "Value"]});
-            } else if(permissionDict[key] && Array.isArray(permissionDict[key])) {
-              if (permissionDict[key].length === 1){
-                if(permissionDict[key][0].constructor === Object){
-                  permissions.push({"name": key, "value": permissionDict[key][0], new_table: true, is_dictionary: true, headers: ["Name", "Value"]});
-                  
-                }else{
-                  permissions.push({"name": key, "value": JSON.stringify(permissionDict[key], null, 2)});
-                }
-                
-              } else if (permissionDict[key].length > 1) {
-                if (permissionDict[key][0].constructor === Object) {
-                  let newHeaders = [];
-                  for(let i = 0; i < permissionDict[key].length; i++){
-                    for(let newKey in permissionDict[key][i]){
-                      if(!newHeaders.includes(newKey)){newHeaders.push(newKey)}
-                    }
-                  }
-                  newHeaders.sort()
-                  permissions.push({"name": key, "value": permissionDict[key], new_table: true, is_array: true, headers: newHeaders});
-                } else {
-                  // it's an array, but not of dictionaries, so just stringify it
-                  permissions.push({"name": key, "value": JSON.stringify(permissionDict[key], null, 2)});
-                }
-              } else {
-                permissions.push({"name": key, "value": JSON.stringify(permissionDict[key], null, 2)});
-              }
-            }else if(permissionDict[key] !== undefined && permissionDict[key] !== null){
-              permissions.push({"name": key, "value": permissionDict[key]});
-            }
-            
-            setHeaders([props.leftColumn, props.rightColumn]);
-          }
-        }else{
-          setTableType("array");
-          if(permissionDict.length > 0){
-            setHeaders(Object.keys(permissionDict[0]));
-            permissions = permissionDict;
-          }else{
-            setHeaders([]);
-          }
-        }
-      }catch(error){
-        console.log(error);
+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);
       }
-      setComment(permissions);
-    }, [props.value, props.leftColumn, props.rightColumn]);
+    });
+  });
+  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>
-        <DialogTitle id="form-dialog-title" style={{wordBreak: "break-all", maxWidth: "100%"}}>{props.title}</DialogTitle>
-
-          <TableContainer  className="mythicElement">
-            <Table size="small" style={{"tableLayout": "fixed", "maxWidth": "calc(100vw)", "overflow": "scroll"}}>
-                  <TableHead>
-                      <TableRow>
-                          {headers.map( (header, index) => (
-                            <TableCell key={'header' + index} style={index === 0 ? {width: "15%", wordBreak: "break-all"} : {wordBreak: "break-all"}}>{header}</TableCell>
-                          ))}
-                      </TableRow>
-                  </TableHead>
-                  <TableBody>
-                    {tableType === "dictionary" ? (
-                      comment.map( (element, index) => (
-                        <TableRow key={'row' + index} hover>
-                          <TableCell style={{wordBreak: "break-all"}}>{element.name}</TableCell>
-                          {element.new_table ? 
-                            (
-                              <TableContainer  className="mythicElement">
-                                <Table size="small" style={{"tableLayout": "fixed", "maxWidth": "calc(100vw)", "overflow": "scroll"}}>
-                                      <TableHead>
-                                          <TableRow>
-                                              {element.headers.map( (header, index) => (
-                                                <TableCell key={'eheader' + header + index} style={index === 0 ? {width: "15%", wordBreak: "break-all"} : {wordBreak: "break-all"}}>{header}</TableCell>
-                                              ))}
-                                          </TableRow>
-                                      </TableHead>
-                                      <TableBody>
-                                        {element.is_dictionary ? (
-                                          Object.keys(element.value).map( (key, dictIndex) => (
-                                            <TableRow key={'element' + dictIndex + "dictheader"}>
-                                              <TableCell  style={{width: "30%", wordBreak: "break-all"}}>{key}</TableCell>
-                                              <TableCell style={{wordBreak: "break-all", whiteSpace: "pre-wrap"}}>{convertValueToContextValue(key, element.value[key], props.me)}</TableCell>
-                                            </TableRow>
-                                          ))
-                                        ): (
-                                          element.value.map( (e, elementIndex) => (
-                                            <TableRow>
-                                              {element.headers.map( (header, headerIndex) => (
-                                                <TableCell key={'element' + elementIndex + "header" + headerIndex} style={headerIndex === 0 ? {width: "15%", wordBreak: "break-all"} : {wordBreak: "break-all",  whiteSpace: "pre-wrap"}}>{convertValueToContextValue(header, e[header], props.me)}</TableCell>
-                                              ))}
-                                            </TableRow>
-                                          ))
-                                        )}
-                                      </TableBody>
-                                  </Table>
-                                </TableContainer>
-                            ) 
-                            : 
-                            (<TableCell style={{wordBreak: "break-all", whiteSpace: "pre-wrap"}}>{convertValueToContextValue(element.name, element.value, props.me) }</TableCell>)
-                          }
-                          
-                        </TableRow>
-                      ))
-                    ) : (
-                      comment.map( (row, index) => (
-                        <TableRow key={'row' + index} hover>
-                            {Object.keys(row).map( (key) => (
-                              <TableCell key={"row" + index + "cell" + key} style={{wordBreak: "break-all"}}>{convertValueToContextValue(key, row[key], props.me)}</TableCell>
-                            ))}
-                        </TableRow>
-                      ))
-                    ) }
-                    
-                  </TableBody>
-              </Table>
-            </TableContainer>
-        <DialogActions>
-          <Button onClick={props.onClose} variant="contained" color="primary">
+        <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
-          </Button>
-        </DialogActions>
+          </MythicDialogButton>
+        </MythicDialogFooter>
     </React.Fragment>
   );
 }
@@ -268,7 +510,7 @@ export function MythicViewObjectPropertiesAsTableDialog(props) {
         <DialogTitle id="form-dialog-title">{props.title}</DialogTitle>
         <DialogContent dividers={true}>
         <Paper elevation={5} style={{position: "relative"}} variant={"elevation"}>
-          <TableContainer component={Paper} className="mythicElement">
+          <TableContainer component={Paper}>
             <Table size="small" style={{"tableLayout": "fixed", "maxWidth": "calc(100vw)", "overflow": "scroll"}}>
                   <TableHead>
                       <TableRow>
@@ -288,30 +530,34 @@ export function MythicViewObjectPropertiesAsTableDialog(props) {
             </TableContainer>
         </Paper>
         </DialogContent>
-        <DialogActions>
-          <Button onClick={props.onClose} variant="contained" color="primary">
+        <MythicDialogFooter>
+          <MythicDialogButton onClick={props.onClose}>
             Close
-          </Button>
-        </DialogActions>
+          </MythicDialogButton>
+        </MythicDialogFooter>
     </React.Fragment>
   );
 }
 const convertValueToContextValue = (key, value, me) => {
-  if( key.includes("time") ){
+  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( key.includes("size") ){
+  } 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 (value.constructor === Object) {
+  } else if (isPlainObject(value)) {
     return JSON.stringify(value, null, 2);
   } else if (Array.isArray(value)){
     return JSON.stringify(value, null, 2);
@@ -379,4 +625,4 @@ export const TableRowSizeCell = ({ cellData, rowData }) => {
       }
   };
   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

@@ -1,26 +1,16 @@
 import React from 'react';
-import Button from '@mui/material/Button';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogTitle from '@mui/material/DialogTitle';
-import {MythicDialog} from './MythicDialog';
+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={
-        <React.Fragment>
-            <DialogTitle id="form-dialog-title">{props.title}</DialogTitle>
-            <DialogContent dividers={true}>
-                <pre style={{whiteSpace: "pre-wrap"}}>
-                    {props.value}
-                </pre>
-            </DialogContent>
-            <DialogActions>
-              <Button onClick={props.onClose} variant="contained" color="primary">
-                Close
-              </Button>
-            </DialogActions>
-        </React.Fragment>
+    <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

@@ -1,19 +1,23 @@
 import React from 'react';
-import Button from '@mui/material/Button';
-import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
-import TableCell from '@mui/material/TableCell';
-import TableRow from '@mui/material/TableRow';
-import Table from '@mui/material/Table';
-import TableBody from '@mui/material/TableBody';
-import TableContainer from '@mui/material/TableContainer';
-import Paper from '@mui/material/Paper';
-import { Divider, Input, MenuItem, Select } from '@mui/material';
-import MythicTextField from './MythicTextField';
+import 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!){
@@ -25,15 +29,15 @@ const submitFeedbackMutation = gql`
 `;
 export function MythicFeedbackDialog(props) {
   const [message, setMessage] = React.useState("");
-  const [taskID, setTaskID] = React.useState(0);
+  const [taskID, setTaskID] = React.useState("");
   const messageTypeOptions = [
-    {display: "Bug", value: "bug"}, 
-    {display: "Feature Request", value: "feature_request"}, 
-    {display: "Confusing UI", value: "confusing_ui"},
-    {display: "Detection", value: "detection"},
+    {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] = useMutation(submitFeedbackMutation, {
+  const [submitFeedback, {loading}] = useMutation(submitFeedbackMutation, {
     update: (cache, {data}) => {
       if(data.sendExternalWebhook.status === "success"){
         snackActions.success("Submitted Feedback!");
@@ -48,90 +52,111 @@ export function MythicFeedbackDialog(props) {
     }
   });
   const handleSubmit = () => {
-      let webhookData = {};
-      if(taskID > 0){
-        webhookData["task_id"] = String(taskID);
+      const trimmedMessage = message.trim();
+      if(trimmedMessage.length === 0){
+        snackActions.warning("Please include feedback before submitting.");
+        return;
       }
-      webhookData["message"] =  message;
+      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 = (name, value, error) => {
-    setTaskID(value);
+  const handleTaskIDChange = (evt) => {
+    setTaskID(evt.target.value);
   }
-  const handleMessageChange = (name, value, error) => {
-    setMessage(value);
+  const handleMessageChange = (evt) => {
+    setMessage(evt.target.value);
   }
-  const handleOnEnter = (event) => {
-    if( event.shiftKey){
-      handleSubmit();
-    }
+  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}</DialogTitle>
-      <Divider></Divider>
-      <DialogContent style={{padding: "10px"}}>
-        Send a feedback report to the slack webhook configured for the current operation.
-        This provides a way to easily capture a bug, feedback requests, or comments without breaking operator flow too much. <br/>
-        Shift+Enter will auto-submit the form.
-        <TableContainer  className="mythicElement">
-            <Table size="small" style={{ "maxWidth": "100%", "overflow": "scroll"}}>
-                <TableBody style={{whiteSpace: "pre"}}> 
-                    <TableRow hover >
-                        <TableCell style={{width: "5rem"}}>
-                          Feedback Type
-                        </TableCell>
-                        <TableCell>
-                            <Select
-                              labelId="demo-dialog-select-label"
-                              id="demo-dialog-select"
-                              value={messageType}
-                              onChange={handleMessageTypeChange}
-                              input={<Input style={{width: "100%"}}/>}
-                            >
-                              {messageTypeOptions.map( (opt) => (
-                                  <MenuItem value={opt.value} key={opt.value}>{opt.display}</MenuItem>
-                              ) )}
-                            </Select>
-                        </TableCell>
-                    </TableRow>
-                    <TableRow hover >
-                      <TableCell style={{width: "5rem"}}>
-                        Task (if applicable)
-                      </TableCell>
-                      <TableCell>
-                        <MythicTextField value={taskID} type={"number"}
-                          onChange={handleTaskIDChange} display="inline-block" name={"taskid"} showLabel={false}
-                        />
-                      </TableCell>
-                    </TableRow>
-                    <TableRow hover>
-                      <TableCell>
-                        Feedback
-                      </TableCell>
-                      <TableCell>
-                      <MythicTextField value={message} multiline={true} onEnter={handleOnEnter}
-                          onChange={handleMessageChange} display="inline-block" name={"taskid"} showLabel={false}
-                        />
-                      </TableCell>
-                    </TableRow>
-                </TableBody>
-            </Table>
-        </TableContainer>
+      <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>
-      <DialogActions>
-        <Button onClick={props.onClose} variant="contained" color="primary">
+      <MythicDialogFooter>
+        <MythicDialogButton onClick={props.onClose}>
           Close
-        </Button>
-        <Button onClick={handleSubmit} variant="contained" color="success">
-          Submit Feedback
-        </Button>
-      </DialogActions>
+        </MythicDialogButton>
+        <MythicDialogButton onClick={handleSubmit} intent="primary" disabled={!canSubmit}>
+          {loading ? "Submitting..." : "Submit Feedback"}
+        </MythicDialogButton>
+      </MythicDialogFooter>
 </React.Fragment>
   );
 }

MythicReactUI/src/components/MythicComponents/MythicFileBrowserVirtualTree.js

@@ -9,7 +9,6 @@ import ComputerIcon from '@mui/icons-material/Computer';
 import DescriptionIcon from '@mui/icons-material/Description';
 import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
 import ErrorIcon from '@mui/icons-material/Error';
-import { useTheme } from '@mui/material/styles';
 import { Typography } from '@mui/material';
 import { MythicStyledTooltip } from "./MythicStyledTooltip";
 import WidgetsIcon from '@mui/icons-material/Widgets';
@@ -40,31 +39,65 @@ const StyledAutoSizer = styled(AutoSizer)((
     theme
   }
 ) => ({
-  [`& .${classes.rowContainer}`]: {},
+  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: "left",
-    marginLeft: (props) => theme.spacing(3 * props.depth),
+    alignItems: "center",
+    height: "100%",
+    minWidth: "fit-content",
+    paddingRight: theme.spacing(1),
     userSelect: "none",
-    whiteSpace: "nowrap"
+    whiteSpace: "nowrap",
+    width: "100%",
+  },
+
+  [`& .${classes.row}[data-deleted="true"]`]: {
+    textDecoration: "line-through",
   },
 
   [`& .${classes.rowButtonWrapper}`]: {
-    width: theme.spacing(3),
-    textAlign: "center",
-    "&:hover": {
-      cursor: "pointer",
-      textDecoration: "underline"
-    }
+    alignSelf: "stretch",
+    borderLeft: `2px dashed ${alpha(theme.palette.text.primary, 0.34)}`,
+    flex: "0 0 14px",
+    marginLeft: 7,
   },
 
   [`& .${classes.rowButton}`]: {
-    width: theme.spacing(3)
+    alignItems: "center",
+    display: "inline-flex",
+    flex: "0 0 auto",
+    justifyContent: "center",
+    width: theme.spacing(3),
   },
 
   [`& .${classes.rowLabel}`]: {
-    marginLeft: theme.spacing(0.5)
+    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}`]: {
@@ -102,9 +135,20 @@ const StyledAutoSizer = styled(AutoSizer)((
   },
 
   [`& .${classes.icon}`]: {
+      flex: "0 0 auto",
+      height: 16,
+      marginLeft: 3,
+      marginRight: 5,
       verticalAlign: 'middle',
-      height: 20,
-      width: 20,
+      width: 16,
+  },
+
+  [`& .${classes.icon}[data-folder="true"]`]: {
+      color: theme.folderColor,
+  },
+
+  [`& .${classes.icon}[data-empty="true"]`]: {
+      color: theme.emptyFolderColor,
   },
 
   [`& .${classes.details}`]: {
@@ -120,7 +164,11 @@ const StyledAutoSizer = styled(AutoSizer)((
 
   [`& .${classes.paper}`]: {
       width: '100%',
-      marginBottom: theme.spacing(2),
+      height: "100%",
+      marginBottom: 0,
+      minHeight: 0,
+      minWidth: 0,
+      overflow: "hidden",
   },
 
   [`& .${classes.table}`]: {
@@ -164,7 +212,6 @@ const VirtualTreeRow = React.memo(({
   const itemTreeData = ListProps.data[ListProps.index];
   const item = ListProps.treeRootData[itemTreeData.group]?.[itemTreeData.host]?.[itemTreeData.full_path_text] || itemTreeData;
   //console.log("item", item, "itemlookup", ListProps.treeRootData[itemTreeData.host]?.[itemTreeData.name])
-  const theme = useTheme();
   const handleOnClickButton = (e) => {
     e.stopPropagation();
     if (itemTreeData.isOpen) {
@@ -192,90 +239,57 @@ const VirtualTreeRow = React.memo(({
       return "";
     }
   return (
-    <div className={`hoverme ${selectedPath()}`}
+    <div className={`${classes.rowContainer} hoverme ${selectedPath()}`.trim()}
          style={ListProps.style}
          onContextMenu={handleContextClick}
          onClick={handleOnClickRow}>
-    <div style={{display: 'flex' , marginBottom: "1px", flexGrow: 1, width: "100%"}}>
+    <div className={classes.row} data-deleted={itemTreeData.deleted ? "true" : undefined}>
         {[...Array(itemTreeData.depth)].map((o, i) => (
-            <div
+            <span
+                className={classes.rowButtonWrapper}
                 key={'folder' + itemTreeData.id + 'lines' + i}
-                style={{
-                    borderLeft: `2px dashed ${alpha(theme.palette.text.primary, 0.4)}`,
-                    marginLeft: 7,
-                    paddingRight: 7,
-                    display: 'inline-block',
-                }}></div>
+            />
         ))}
-        <div
-          className={classes.root}
-          style={{ backgroundColor: theme.body, color: theme.text, alignItems: 'center', display: 'flex', paddingRight: "10px", textDecoration: itemTreeData.deleted ? 'line-through' : ''  }}
-
-          >
 
           {itemTreeData.is_group ? (
-              <WidgetsIcon style={{
-                  width: "15px",
-                  height: "15px",
-                  marginLeft: "3px",
-                  marginRight: "5px" }} />
+              <WidgetsIcon className={classes.icon} />
           ): itemTreeData.root  ? (
-              <ComputerIcon style={{
-                  width: "15px",
-                  height: "15px",
-                  marginLeft: '3px',
-                  marginRight: '5px' }}  />
+              <ComputerIcon className={classes.icon}  />
           ) : !itemTreeData.can_have_children ? (
-              <DescriptionIcon style={{
-                  width: "15px",
-                  height: "15px",
-                  marginLeft: '3px',
-                  marginRight: '5px' }} />
+              <DescriptionIcon className={classes.icon} />
           ) : itemTreeData.isOpen ? (
             <FontAwesomeIcon 
               icon={faFolderOpen} 
-              style={{
-                  width: "15px",
-                  height: "15px",
-                marginLeft: '3px',
-                marginRight: '5px',
-                color: item?.metadata?.has_children ? theme.folderColor : theme.palette.text.secondary,
-              }}
+              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 
-                style={{
-                    width: "15px",
-                    height: "15px",
-                    marginLeft: '3px',
-                    marginRight: '5px',
-                    color: item?.metadata?.has_children ? theme.folderColor : theme.palette.text.secondary, }}
+                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
-              style={{
-                  color:
-                      item?.metadata?.has_children ||
-                      item.success !== null
-                          ? theme.palette.text.primary
-                          : theme.palette.text.secondary,
-              }} component="pre">
+              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' style={{display: "inline-flex", marginLeft: "5px"}}>
-                  <CheckCircleOutlineIcon fontSize='small' color="success" />
+              <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' style={{display: "inline-flex", marginLeft: "5px"}}>
-                  <ErrorIcon fontSize='small' color="error" />
+              <MythicStyledTooltip title='Failed to list contents of folder'>
+                  <ErrorIcon className={classes.icon} fontSize='small' color="error" />
               </MythicStyledTooltip>
           ) : null}
 
-      </div>
     </div>
     </div>
   );
@@ -435,33 +449,35 @@ const FileBrowserVirtualTreePreMemo = ({
       }
   }, [selectedFolderData, flattenedNodes]);
   return flattenedNodes.length > 0 ? (
-    <StyledAutoSizer>
-    {(AutoSizerProps) => (
-      <List
-        itemData={flattenedNodes}
-        direction="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 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

@@ -2,22 +2,24 @@ import React from 'react';
 import {snackActions} from "../utilities/Snackbar";
 import {MythicStyledTooltip} from "./MythicStyledTooltip";
 import {MythicDialog} from "./MythicDialog";
-import {Link} from '@mui/material';
-import {useMutation, useLazyQuery, gql} from '@apollo/client';
+import {gql} from '@apollo/client';
 import {b64DecodeUnicode} from "../pages/Callbacks/ResponseDisplay";
-import {PreviewFileMediaDialog} from "../pages/Search/PreviewFileMedia";
+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}) => {
+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,
@@ -31,44 +33,70 @@ export const MythicFileContext = ({agent_file_id, display_link, filename}) => {
         }
         setOpenPreviewMediaDialog(true);
     }
-    const [getFileInformation] = useLazyQuery(getfileInformationQuery, {
-        onCompleted: (data) => {
-            setFileData( {...fileData, filename: b64DecodeUnicode(data.filemeta[0].filename_text)});
-            if(display_link === "" || display_link === undefined){
-                setFileData( {...fileData,
-                    filename: b64DecodeUnicode(data.filemeta[0].filename_text),
-                    display_link: b64DecodeUnicode(data.filemeta[0].filename_text)});
-            }
-        },
-        onError: (data) => {
-            snackActions.error("Failed to fetch instance data: " + data);
-            console.log(data);
-        },
+    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(filename === "" || filename === undefined){
-            getFileInformation({variables: {file_id: fileData.agent_file_id}})
+        if(agent_file_id !== '' && agent_file_id !== undefined){
+            getFileInformation({variables: {file_id: agent_file_id}})
+                .then(({data}) => getFileInformationSuccess(data)).catch((data) => getFileInformationError(data));
         }
-    }, [filename]);
+    }, [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"}>
-                <FontAwesomeIcon icon={faPhotoVideo} style={{height: "25px", bottom: "5px", position: "relative", cursor: "pointer", display: "inline-block"}}
+            <MythicStyledTooltip title={"Preview Media"} tooltipStyle={extraStyles ? extraStyles : {}}>
+                <FontAwesomeIcon icon={faPhotoVideo}
+                                 style={{height: "20px", position: "relative", cursor: "pointer", display: "inline-block"}}
                                  onClick={onPreviewMedia} />
             </MythicStyledTooltip>
-            <Link style={{wordBreak: "break-all"}} color="textPrimary" underline="always" href={"/direct/download/" + fileData.agent_file_id}>
+            <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}
-            </Link>
+            </FileDownloadLinkWithAuth>
             {openPreviewMediaDialog &&
                 <MythicDialog fullWidth={true} maxWidth="xl" open={openPreviewMediaDialog}
-                              onClose={(e)=>{setOpenPreviewMediaDialog(false);}}
+                              onClose={onClose}
                               innerDialog={<PreviewFileMediaDialog
                                   agent_file_id={fileData.agent_file_id}
                                   filename={fileData.filename}
-                                  onClose={(e)=>{setOpenPreviewMediaDialog(false);}} />}
+                                  onClose={onClose} />}
                 />
             }
         </>
     )
-}
+}

MythicReactUI/src/components/MythicComponents/MythicFileUpload.js

@@ -1,4 +1,5 @@
 import {snackActions} from '../utilities/Snackbar';
+import {mythicFetch} from '../utilities/MythicConnection';
 
 export const UploadTaskFile = async (file, comment) => {
   let formData = new FormData();
@@ -11,7 +12,7 @@ export const UploadTaskFile = async (file, comment) => {
     return null;
   }
   try{
-    const upload_response = await fetch('/api/v1.4/task_upload_file_webhook', {
+    const upload_response = await mythicFetch('/task_upload_file_webhook', {
       method: 'POST',
       body: formData,
       headers: {
@@ -21,7 +22,11 @@ export const UploadTaskFile = async (file, comment) => {
     });
     try{
       const upload_result = upload_response.json().then(data => {
-          return data?.agent_file_id || data?.error || null;
+          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());
@@ -37,13 +42,53 @@ export const UploadTaskFile = async (file, comment) => {
       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 fetch('/api/v1.4/eventing_import_webhook', {
+    const upload_response = await mythicFetch('/eventing_import_webhook', {
       method: 'POST',
       body: formData,
       headers: {
@@ -75,7 +120,7 @@ export const UploadEventGroupFile = async (file, eventgroup_id) => {
   formData.append("file", file);
   snackActions.info("Uploading " + file.name + " to Mythic...", {autoHideDuration: 1000});
   try{
-    const upload_response = await fetch('/api/v1.4/eventing_register_file_webhook', {
+    const upload_response = await mythicFetch('/eventing_register_file_webhook', {
       method: 'POST',
       body: formData,
       headers: {
@@ -100,4 +145,4 @@ export const UploadEventGroupFile = async (file, eventgroup_id) => {
     snackActions.error(error.toString());
     return null;
   }
-}
+}

MythicReactUI/src/components/MythicComponents/MythicNestedMenus.js

@@ -14,8 +14,12 @@ export const Dropdown = React.forwardRef(
             minWidth,
             absoluteX,
             absoluteY,
-            anchorReference,
-            style
+            anchorReference="anchorEl",
+            style,
+            transformOrigin,
+            anchorOrigin,
+            MenuListProps,
+            PaperProps,
         },
         ref
     ) => {
@@ -27,7 +31,6 @@ export const Dropdown = React.forwardRef(
         if (ref) {
             anchorRef = ref;
         }
-
         const handleClose = (event) => {
             event.stopPropagation();
 
@@ -49,7 +52,6 @@ export const Dropdown = React.forwardRef(
                     parentMenuOpen: isOpen
                 };
             }
-
             return React.createElement(menuItem.type, {
                 ...props,
                 key: index,
@@ -65,21 +67,28 @@ export const Dropdown = React.forwardRef(
                     : props.children
             });
         };
+        const anchorEl = isOpen && isOpen.currentTarget ? isOpen.currentTarget : isOpen;
         return (
             <>
                 <Menu
-                    PaperProps={{ sx: { minWidth: minWidth ?? 0 } }}
-                    anchorEl={isOpen}
+                    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 ? anchorOrigin : {
                         vertical: 'bottom',
                         horizontal: 'left',
                     }}
-                    transformOrigin={{
+                    transformOrigin={transformOrigin ? transformOrigin : {
                         vertical: 'top',
                         horizontal: 'left',
                     }}
@@ -214,7 +223,10 @@ const NestedMenuItem = React.forwardRef((props, ref) => {
             </MenuItem>
             <Menu
                 hideBackdrop
-                style={{ pointerEvents: "none" }}
+                disablePortal
+                disableEnforceFocus={false}
+                disableAutoFocus={false}
+                style={{ pointerEvents: "none", zIndex: 100000}}
                 anchorEl={menuItemRef.current}
                 anchorOrigin={{
                     vertical: "top",
@@ -226,12 +238,13 @@ const NestedMenuItem = React.forwardRef((props, ref) => {
                 }}
                 css={customTheme}
                 open={!!open}
-                autoFocus={false}
-                disableAutoFocus
-                disableEnforceFocus
                 onClose={() => {
                     setIsSubMenuOpen(false);
                 }}
+                MenuListProps={{
+                    'aria-hidden': false,
+                    role: 'menu'
+                }}
             >
                 <div ref={menuContainerRef} style={{ pointerEvents: "auto" }}>
                     {children}
@@ -247,4 +260,4 @@ 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

@@ -3,79 +3,112 @@ import {classes} from './styles';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
 import {Dropdown, DropdownMenuItem, DropdownNestedMenuItem} from "../MythicNestedMenus";
 
-const CellPreMemo = ({ VariableSizeGridProps: { style, rowIndex, columnIndex, data } }) => {
+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
         },
-        [data, rowIndex]
+        [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 onMouseEnter = () => {
-        const cells = document.getElementsByClassName(rowClassName);
-        if(cells.length > 0){
-            for(const cell of cells){
-                cell.classList.add(classes.hoveredRow);
-            }
+    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);
         }
-    }
-    const onMouseLeave = () => {
-        const cells = document.getElementsByClassName(rowClassName);
-        if(cells.length > 0){
-            for(const cell of cells){
-                cell.classList.remove(classes.hoveredRow);
-            }
-        }
-    }
+    }, [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){
-            onMouseLeave();
+        if(openContextMenu){
+            ownsContextRowRef.current = true;
+            setContextRow(true);
+            setHoveredRow(true);
+        } else if(ownsContextRowRef.current){
+            ownsContextRowRef.current = false;
+            setContextRow(false);
+            setHoveredRow(false);
         }
-    }, [openContextMenu]);
+    }, [openContextMenu, setContextRow, setHoveredRow]);
+    React.useEffect( () => {
+        return () => {
+            if(ownsContextRowRef.current){
+                setContextRow(false);
+                setHoveredRow(false);
+            }
+        };
+    }, [setContextRow, setHoveredRow]);
     const handleContextClick = useCallback(
         (event) => {
             event.preventDefault();
-            if(item.disableFilterMenu){
+            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});
-                if(newMenuItems.length > 0){
-                    setContextMenuOptions(newMenuItems);
+                Promise.resolve(newMenuItems).then(function(value) {
+                    if(value.length > 0){
+                        setContextMenuOptions(value);
+                        setOpenContextMenu(true);
+                    }
+                })
+            } else {
+                if(contextMenuOptions && contextMenuOptions.length > 0){
                     setOpenContextMenu(true);
-                    return;
                 }
             }
-            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} ${selectedClass}`}
+            className={`${classes.cell} ${rowClassName} ${rowHighlight} ${selectedClass} ${customRowClass} ${rowFirstCellClass} ${rowLastCellClass} ${rowInteractiveClass}`}
             onDoubleClick={handleDoubleClick}
             onClick={handleClick}
             onMouseEnter={onMouseEnter}
@@ -87,14 +120,14 @@ const CellPreMemo = ({ VariableSizeGridProps: { style, rowIndex, columnIndex, da
                 {item}
             </div>
             <ContextMenu dropdownAnchorRef={dropdownAnchorRef} contextMenuOptions={contextMenuOptions}
-                disableFilterMenu={item.disableFilterMenu} openContextMenu={openContextMenu}
+                disableFilterMenu={item?.disableFilterMenu} openContextMenu={openContextMenu}
                          contextMenuLocationRef={contextMenuLocationRef}
                          setOpenContextMenu={setOpenContextMenu} handleMenuItemClick={handleMenuItemClick}
             />
         </div>
     );
 };
-const ContextMenu = ({openContextMenu, dropdownAnchorRef, contextMenuOptions, setOpenContextMenu, handleMenuItemClick, contextMenuLocationRef}) => {
+export const ContextMenu = ({openContextMenu, dropdownAnchorRef, contextMenuOptions, setOpenContextMenu, handleMenuItemClick, contextMenuLocationRef}) => {
     const handleClose = (event) => {
         //if (dropdownAnchorRef.current && dropdownAnchorRef.current.contains(event.target)) {
         //    return;
@@ -118,6 +151,7 @@ const ContextMenu = ({openContextMenu, dropdownAnchorRef, contextMenuOptions, se
                             <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}
@@ -128,11 +162,12 @@ const ContextMenu = ({openContextMenu, dropdownAnchorRef, contextMenuOptions, se
                                 disabled={option.disabled}
                                 menu={
                                     option.menuItems.map((menuOption, indx) => (
-                                        <DropdownMenuItem
-                                            key={menuOption.name}
-                                            disabled={menuOption.disabled}
-                                            onClick={(event) => handleMenuItemClick(event, menuOption.click)}
-                                        >
+                                    <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>
                                     ))
@@ -175,4 +210,4 @@ export default Cell;
                 </Grow>
             )}
         </Popper>
- */
+ */

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

@@ -1,55 +0,0 @@
-import React, { useState } from 'react';
-import {classes} from './styles';
-import Draggable from 'react-draggable';
-import MoreVertIcon from '@mui/icons-material/MoreVert';
-
-const DraggableHandles = React.forwardRef(({ height, rowHeight, width, minColumnWidth, columnWidths, onStop }, ref) => {
-    const [isDragging, setIsDragging] = useState(-1);
-    const nodeRef = React.useRef(null);
-    return (
-        <div
-            ref={ref}
-            className={classes.draggableHandlesContainer}
-            style={{
-                height: height,
-                width: width,
-                pointerEvents: isDragging >= 0 ? 'initial' : 'none',
-            }}>
-            {columnWidths.map((_, i) => {
-                // leftOffset is the sum of the width of all columns left of i
-                const leftOffset = columnWidths.slice(0, i).reduce((a, b) => a + b, 0);
-                return (
-                    <Draggable
-                        key={i}
-                        nodeRef={nodeRef}
-                        axis='x'
-                        bounds={{
-                            left: minColumnWidth - columnWidths[i],
-                            right: Number.POSITIVE_INFINITY,
-                            top: 0,
-                            bottom: 0,
-                        }}
-                        defaultPosition={{x: 0, y: 0}}
-                        position={{x: 0, y: 0}}
-                        onStart={() => {
-                            setIsDragging(i);
-                        }}
-                        onStop={(e, data) => {
-                            setIsDragging(-1);
-                            onStop(data.x, i);
-                        }}>
-                            <MoreVertIcon
-                                ref={nodeRef}
-                                className={isDragging === i ? classes.draggableHandlesClickAreaSelected : classes.draggableHandlesClickArea}
-                                style={{
-                                    left: leftOffset + columnWidths[i] - 1 - 7,
-                                }}>
-                            </MoreVertIcon>
-                    </Draggable>
-                );
-            })}
-        </div>
-    );
-});
-
-export default DraggableHandles;

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

@@ -3,15 +3,10 @@ import { useCallback } from 'react';
 import useSingleAndDoubleClick from '../../utilities/useSingleAndDoubleClick';
 import {classes} from './styles';
 import React from 'react';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faFilter} from '@fortawesome/free-solid-svg-icons';
-import 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 {useTheme} from '@mui/material/styles';
+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 = () => {},
@@ -20,12 +15,17 @@ const HeaderCell = ({
     sortIndicatorIndex,
     sortDirection,
     headerNameKey = "name",
+    isResizing = false,
+    onResizePointerDown = () => {},
     VariableSizeGridProps: { style, rowIndex, columnIndex, data },
 }) => {
     const dropdownAnchorRef = React.useRef(null);
-    const theme = useTheme();
     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);
@@ -39,66 +39,131 @@ const HeaderCell = ({
         },
         [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(item.disableFilterMenu){
-                return;
-            }
-            if(contextMenuOptions && contextMenuOptions.length > 0){
-                
+            if(resolvedContextMenuOptions && resolvedContextMenuOptions.length > 0){
+                contextMenuLocationRef.current.x = event.clientX;
+                contextMenuLocationRef.current.y = event.clientY;
                 setOpenContextMenu(true);
             }
         },
-        [contextMenuOptions, columnIndex] // eslint-disable-line react-hooks/exhaustive-deps
+        [resolvedContextMenuOptions]
     );
-    const handleMenuItemClick = (event, index) => {
-        contextMenuOptions[index].click({event, columnIndex});
+    const handleMenuItemClick = (event, clickOption) => {
+        event.preventDefault();
+        event.stopPropagation();
+        clickOption({event, ...menuContext});
         setOpenContextMenu(false);
     };
-    const handleClose = (event) => {
-        if (dropdownAnchorRef.current && dropdownAnchorRef.current.contains(event.target)) {
-          return;
-        }
-        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={classes.headerCell} onClick={handleClicks} onContextMenu={handleContextClick} ref={dropdownAnchorRef}>
-            <Box display='flex' alignItems='center' justifyContent='space-between' width='100%'>
-                <Typography className={classes.cellInner} variant='body1'>
-                    {item[headerNameKey].toUpperCase()}
+        <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>
-                {isFiltered && <FontAwesomeIcon icon={faFilter} />}
-                {sortIndicatorIndex === columnIndex && (sortDirection === 'ASC' ? <div>↑</div> : <div>↓</div>)}
-                <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}}>
-                        <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>
+                <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>
     );
 };

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

@@ -5,19 +5,218 @@ import useScrollbarSize from 'react-scrollbar-size';
 import { VariableSizeGrid } from 'react-window';
 import HeaderCell from './HeaderCell';
 import Cell from './Cell';
-import DraggableHandles from './DraggableHandles';
 import {classes} from './styles';
+import {GetMythicSetting, useSetMythicSetting} from "../MythicSavedUserSetting";
+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 CellRenderer = (VariableSizeGridProps) => {
-    return VariableSizeGridProps.rowIndex === 0 ? null : <Cell VariableSizeGridProps={VariableSizeGridProps} />;
+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;
 };
-const innerElementType = React.forwardRef(({ children, ...rest }, ref) => {
+
+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} {...rest}>
+        <div ref={ref} style={{...style, position: "relative"}}>
             {/* always render header cells */}
             <div
                 className={classes.headerCellRow}
@@ -31,13 +230,12 @@ const innerElementType = React.forwardRef(({ children, ...rest }, ref) => {
                             key={i}
                             headerNameKey={HeaderCellData.headerNameKey}
                             onClick={HeaderCellData.onClickHeader}
-                            onDoubleClick={(e, columnIndex) => {
-                                if (column.disableAutosize) return;
-                                HeaderCellData.autosizeColumn({columnIndex});
-                            }}
+                            onDoubleClick={onHeaderDoubleClick}
                             contextMenuOptions={HeaderCellData.contextMenuOptions}
                             sortIndicatorIndex={HeaderCellData.sortIndicatorIndex}
                             sortDirection={HeaderCellData.sortDirection}
+                            isResizing={HeaderCellData.resizingColumnIndex === i}
+                            onResizePointerDown={HeaderCellData.startColumnResize}
                             VariableSizeGridProps={{
                                 style: {
                                     position: 'absolute',
@@ -56,14 +254,24 @@ const innerElementType = React.forwardRef(({ children, ...rest }, ref) => {
             </div>
             {/* render other cells as usual */}
             {children}
+            {resizingColumnIndex >= 0 &&
+                <div
+                    className={classes.resizeGuide}
+                    style={{
+                        left: resizeGuideLeft,
+                        height: style.height,
+                    }}
+                />
+            }
         </div>
     );
 });
 
-const getShortRandomString = () => {
+export const GetShortRandomString = () => {
     return (Math.random() + 1).toString(36).substring(2);
 }
 const ResizableGridWrapper = ({
+    name,
     columns,
     sortIndicatorIndex,
     sortDirection,
@@ -83,11 +291,33 @@ const ResizableGridWrapper = ({
 }) => {
     /* Hooks */
     const { width: scrollbarWidth } = useScrollbarSize();
-
-    const [columnWidths, setColumnWidths] = useState(columns.map((column) => column.width || MIN_COLUMN_WIDTH));
-    const gridUUID = React.useMemo( () => getShortRandomString(), []);
+    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 dragHandlesRef = 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;
@@ -103,120 +333,198 @@ const ResizableGridWrapper = ({
         },
         [rowHeight, headerRowHeight]
     );
-
     useEffect(() => {
-        const totalWidth = AutoSizerProps.width - scrollbarWidth;
-        const updatedColumnWidths = columns.map((column) => column.width || MIN_COLUMN_WIDTH);
-        const totalWidthDiff = totalWidth - updatedColumnWidths.reduce((a, b) => a + b, 0);
-        if (totalWidthDiff > 0) {
-            let updatedWidthIndexs = [];
-            for(let i = 0; i < columns.length; i++){
-                // check if any of the columns have the `fillWidth` property to true
-                if(columns[i]["fillWidth"]){
-                    updatedWidthIndexs.push(i);
-                }
-            }
-            if(updatedWidthIndexs.length === 0){
-                updatedWidthIndexs.push(columns.length - 1);
-            }
-            for(let i = 0; i < updatedWidthIndexs.length; i++){
-                updatedColumnWidths[updatedWidthIndexs[i]] += totalWidthDiff / updatedWidthIndexs.length;
-            }
-            //updatedColumnWidths[updatedWidthIndex] += totalWidthDiff;
+        if(savedColumnWidths.length === columns.length && localColumnsRef.current.length === columns.length){
+            return;
         }
-        setColumnWidths(updatedColumnWidths);
-    }, [scrollbarWidth, columns, AutoSizerProps.width]); // eslint-disable-line react-hooks/exhaustive-deps
+        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(() => {
-        gridRef.current.resetAfterColumnIndex(0, true);
+        if(gridRef.current){
+            gridRef.current.resetAfterColumnIndex(lastResetColumnIndexRef.current, true);
+        }
     }, [columnWidths]);
 
     /* Event Handlers */
 
-    const resizeColumn = (x, columnIndex) => {
-        const updatedWidths = columnWidths.map((columnWidth, index) => {
-            if (columnIndex === index) {
-                return Math.floor(Math.max(columnWidth + x, MIN_COLUMN_WIDTH));
+    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;
             }
-            return Math.floor(columnWidth);
-        });
-        setColumnWidths(updatedWidths);
-    };
-
-    const autosizeColumn =  ({columnIndex}) => {
-        if(columns[columnIndex].disableDoubleClick){
+            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 longestElementInColumn = Math.max(...items.map((itemRow) => {
-            if(!columns[columnIndex].key){
-                if(columns[columnIndex].plaintext){
-                    columns[columnIndex].key = columns[columnIndex].plaintext;
-                } else {
-                    return 30;
-                }
-            }
-            if(columns[columnIndex].key){
-                if(columns[columnIndex].key.includes("time")){
-                    return 30;
-                }
-                if(columns[columnIndex].key === "mythictree_groups"){
-                    return itemRow[columnIndex]?.props?.cellData.length;
-                }
-                if(columns[columnIndex].type === "size"){
-                    if(itemRow[columnIndex]?.props?.cellData){
-                        return String(itemRow[columnIndex]?.props?.cellData?.plaintext)?.length;
-                    }
-                    return itemRow[columnIndex].length;
-                }
-                try{
-                    items = JSON.parse(itemRow[columnIndex]?.props?.rowData?.[columns[columnIndex].key]);
-                    if(Array.isArray(items) && items.length > 0){
-                        return String(items[0]).length;
-                    }
-                }catch(error){
-                    //console.log(itemRow[columnIndex]?.props?.rowData?.[columns[columnIndex].key])
-                }
-                let data = itemRow[columnIndex]?.props?.rowData?.[columns[columnIndex].key];
-                if(columns[columnIndex].inMetadata){
-                    return itemRow[columnIndex]?.props?.cellData.length;
-                }
-                if(data === undefined){
-                    return MIN_COLUMN_WIDTH;
-                }
-                if(data.plaintext){
-                    return String(data.plaintext)?.length;
-                } else {
-                    return String(data)?.length ;
-                }
-                //return String(itemRow[columnIndex]?.props?.rowData?.[columns[columnIndex].key]).length || -1;
-            } else if(typeof(itemRow[columnIndex]?.props?.cellData) === "string") {
-                try {
-                    items = JSON.parse(itemRow[columnIndex]?.props?.cellData);
-                    if (Array.isArray(items) && items.length > 0) {
-                        return String(items[0]).length;
-                    }
-                } catch (error) {
-                    return itemRow[columnIndex]?.props?.cellData.length;
-                }
-            } else if(Array.isArray(itemRow[columnIndex]?.props?.cellData)){
-                return itemRow[columnIndex]?.props?.cellData.join(", ").length;
-            }else {
-                return itemRow[columnIndex]?.props?.cellData?.length || -1;
-            }
-
-        }));
-        const updatedWidths = columnWidths.map((columnWidth, index) => {
+        const currentColumnWidths = columnWidthsRef.current;
+        const updatedColumnWidths = currentColumnWidths.map((columnWidth, index) => {
             if (columnIndex === index) {
-                if(isNaN(longestElementInColumn)){
-                    return MIN_COLUMN_WIDTH;
-                }
-                return Math.floor(Math.max(longestElementInColumn * 10 + 40, MIN_COLUMN_WIDTH));
+                return getAutosizedColumnWidth({column, columnIndex, headerNameKey, items});
             }
             return Math.floor(columnWidth);
         });
-        //console.log(updatedWidths, longestElementInColumn);
-        setColumnWidths(updatedWidths);
-    };
+        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;
@@ -230,16 +538,19 @@ const ResizableGridWrapper = ({
         "headerNameKey": headerNameKey,
         "onClickHeader": onClickHeader,
         "autosizeColumn": autosizeColumn,
-        "contextMenuOptions": contextMenuOptions,
+        "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}
@@ -252,24 +563,11 @@ const ResizableGridWrapper = ({
                         rowContextMenuOptions, onRowClick,
                         onRowContextMenuClick}}
                     innerElementType={innerElementType}
-                    overscanRowCount={10}
-                    onScroll={({ scrollLeft }) => {
-                        if (dragHandlesRef.current) {
-                            dragHandlesRef.current.scrollTo({ left: scrollLeft });
-                        }
-                    }}
+                    overscanRowCount={20}
+                    useIsScrolling={false}
                     ref={gridRef}>
                     {CellRenderer}
                 </VariableSizeGrid>
-                <DraggableHandles
-                    height={AutoSizerProps.height}
-                    rowHeight={headerRowHeight}
-                    width={AutoSizerProps.width}
-                    minColumnWidth={MIN_COLUMN_WIDTH}
-                    columnWidths={columnWidths}
-                    onStop={resizeColumn}
-                    ref={dragHandlesRef}
-                />
             </HeaderCellContext.Provider>
 
         </>
@@ -292,30 +590,34 @@ const MythicResizableGrid = ({
     headerRowHeight = 20,
     callbackTableGridRef,
     onRowClick,
+    name,
 }) => {
     return (
-        <AutoSizer style={{height: "100%"}}>
-            {(AutoSizerProps) => (
-                <ResizableGridWrapper
-                    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 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>
     );
 };
 
@@ -325,6 +627,7 @@ MythicResizableGrid.propTypes = {
             name: PropTypes.string,
             width: PropTypes.number,
             disableAutosize: PropTypes.bool,
+            disableResize: PropTypes.bool,
             disableSort: PropTypes.bool
         })
     ).isRequired,

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

@@ -1,12 +1,24 @@
 const PREFIX = 'MythicResizableGrid';
 export const classes = {
-    headerCellRow: `${PREFIX}-headerCellRow`,
-    headerCell: `${PREFIX}-headerCell`,
+    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`,
-    cell: `${PREFIX}-cell`,
-    cellInner: `${PREFIX}-cellInner`,
-    draggableHandlesContainer: `${PREFIX}-draggableHandlesContainer`,
-    draggableHandlesClickArea: `${PREFIX}-draggableHandlesClickArea`,
-    draggableHandlesClickAreaSelected: `${PREFIX}-draggableHandlesClickAreaSelected`,
-    draggableHandlesIndicator: `${PREFIX}-draggableHandlesIndicator`,
+    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

@@ -1,104 +1,105 @@
 import { useReactiveVar } from '@apollo/client';
-import { meState } from '../../cache';
+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:
-    hideUsernames
-    showIP
-    showHostname
-    showCallbackGroups
+    taskingDisplayFields
     showMedia
     interactType
 
     callbacks_table_columns
     callbacks_table_filters
  */
-export function useMythicSetting({setting_name, default_value, output="boolean"}){
-    const me = useReactiveVar(meState);
-    // get the initial value we have stored
-    const localStorageSetting = localStorage.getItem(`${me?.user?.user_id || 0}-${setting_name}`);
-    let initialStorageSetting = localStorageSetting === null ? default_value : localStorageSetting;
-    switch(output){
-        case "boolean":
-            initialStorageSetting = (initialStorageSetting.toLowerCase() === "true");
-            break;
-        case "number":
-            initialStorageSetting = Number(initialStorageSetting);
-            break;
-        case "json-array":
-            try{
+export function useGetMythicSetting({setting_name, default_value}){
+    const preferences = useReactiveVar(mePreferences);
+    let initialStorageSetting = GetMythicSetting({setting_name, default_value});
 
-                initialStorageSetting = JSON.parse(initialStorageSetting);
-            }catch(error){
-                console.log(initialStorageSetting);
-            }
-            break;
-        case "json":
-            try{
-                initialStorageSetting = JSON.parse(initialStorageSetting);
-            }catch(error){
-                console.log(initialStorageSetting);
-            }
-            break;
-        case "string":
-            break;
-        default:
-            console.log("unknown output type", output);
-    }
     const [setting, setSetting] = React.useState(initialStorageSetting);
+
     React.useEffect( () => {
-        // update the initial value if the user changes
-        const localStorageSetting = localStorage.getItem(`${me?.user?.user_id || 0}-${setting_name}`);
-        let initialStorageSetting = localStorageSetting === null ? default_value : localStorageSetting;
-        switch(output){
-            case "boolean":
-                initialStorageSetting = (initialStorageSetting.toLowerCase() === "true");
-                break;
-            case "number":
-                initialStorageSetting = Number(initialStorageSetting);
-                break;
-            case "json-array":
-                try{
-                    initialStorageSetting = JSON.parse(initialStorageSetting);
-                }catch(error){
-                    initialStorageSetting = [];
-                }
-                break;
-            case "json":
-                try{
-                    initialStorageSetting = JSON.parse(initialStorageSetting);
-                }catch(error){
-                    initialStorageSetting = {};
-                }
-                break;
-            case "string":
-                break;
-            default:
-                console.log("unknown output type", output);
-        }
-        setSetting(initialStorageSetting);
-    }, [me]);
+        let newSetting = GetMythicSetting({setting_name, default_value});
+        setSetting(newSetting);
+    }, [preferences?.[setting_name]]);
+
     return setting;
 }
-export function SetMythicSetting({setting_name, value, output = "boolean"}) {
-    let newSetting = value;
-    switch(output){
-        case "json-array":
-                newSetting = JSON.stringify(value);
-            break;
-        case "json":
-            newSetting = JSON.stringify(value);
-            break;
-        case "boolean":
-            if(typeof value === "boolean"){
-                newSetting = value ? "true" : "false";
-            } else {
-                newSetting = value.toLowerCase() === "true" ? "true" : "false";
+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}});
             }
-            break;
-        default:
-    }
-    const meID = meState()?.user?.user_id || 0;
-    localStorage.setItem(`${meID}-${setting_name}`, newSetting)
-}
+        },
+        ({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

@@ -1,5 +1,5 @@
 import React, {useRef, useEffect} from 'react';
-import Button from '@mui/material/Button';
+import {MythicActionButton} from './MythicActionButton';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -8,12 +8,9 @@ import FormControl from '@mui/material/FormControl';
 import Select from '@mui/material/Select';
 import InputLabel from '@mui/material/InputLabel';
 import Input from '@mui/material/Input';
-import TableCell from '@mui/material/TableCell';
-import TableRow from '@mui/material/TableRow';
-import Table from '@mui/material/Table';
-import TableBody from '@mui/material/TableBody';
-import TableContainer from '@mui/material/TableContainer';
-import Paper from '@mui/material/Paper';
+import 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([]);
@@ -64,12 +61,12 @@ export function MythicSelectFromListDialog(props) {
             </React.Fragment>
         </DialogContent>
         <DialogActions>
-          <Button onClick={props.onClose} variant="contained" color="primary">
+          <MythicActionButton colorMode="always" onClick={props.onClose} tone="primary" variant="contained">
             Close
-          </Button>
-          <Button onClick={handleSubmit} variant="contained" color="success">
+          </MythicActionButton>
+          <MythicActionButton colorMode="always" onClick={handleSubmit} tone="success" variant="contained">
             {props.action}
-          </Button>
+          </MythicActionButton>
         </DialogActions>
   </React.Fragment>
   );
@@ -77,10 +74,17 @@ export function MythicSelectFromListDialog(props) {
 
 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];
@@ -89,24 +93,37 @@ export function MythicSelectFromRawListDialog(props) {
 return (
   <React.Fragment>
       <DialogTitle >{props.title}</DialogTitle>
-      <TableContainer component={Paper} className="mythicElement">
-                <Table size="small" style={{ "maxWidth": "100%", "overflow": "scroll"}}>
-                    <TableBody style={{whiteSpace: "pre"}}> 
-                      {options.map( choice => (
-                        <TableRow hover key={choice}>
-                            <TableCell style={{width: "5rem"}}>
-                              <Button onClick={() => handleSubmit(choice)} variant="contained" color="primary">Select</Button>
-                            </TableCell>
-                            <TableCell>{choice}</TableCell>
-                        </TableRow>
-                      ))}
-                    </TableBody>
-                </Table>
-            </TableContainer>
+      <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>
-        <Button onClick={props.onClose} variant="contained" color="primary">
+        <MythicActionButton colorMode="always" onClick={props.onClose} tone="primary" variant="contained">
           Close
-        </Button>
+        </MythicActionButton>
       </DialogActions>
 </React.Fragment>
 );

MythicReactUI/src/components/MythicComponents/MythicSnackDownload.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { styled } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
-import { Link } from '@mui/material';
+import {FileDownloadLinkWithAuth} from "../utilities/FileDownloadWithAuth";
 
 const PREFIX = 'MythicSnackDownload';
 
@@ -59,7 +59,7 @@ const Root = styled('div')((
 
     [`& .${classes.checkIcon}`]: {
         fontSize: 20,
-        color: '#b3b3b3',
+        color: theme.palette.text.secondary,
         paddingRight: 4,
     },
 
@@ -77,10 +77,10 @@ export const MythicSnackDownload = (props) => {
             </Typography>
                 <React.Fragment>
                     <Typography gutterBottom>File ready for download</Typography>
-                    <Link color="textPrimary" download={true} href={"/direct/download/" + props.file_id} target="_blank">
+                    <FileDownloadLinkWithAuth color="textPrimary" download={true} href={"/direct/download/" + props.file_id} target="_blank">
                         Download here
-                    </Link>
+                    </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

@@ -1,26 +1,17 @@
 import React from 'react';
-import { Tooltip } from '@mui/material';
 import {useTheme} from '@mui/material/styles';
 
-export function MythicStyledTooltip(props){
-    const { children, title, style, ...other} = props;
+export function MythicStyledTooltip({ children, title, enterDelay, tooltipStyle}){
     const theme = useTheme();
     return (
-        <Tooltip title={title} arrow followCursor enterDelay={750} componentsProps={{
-            tooltip: {
-                sx: {
-                    backgroundColor: theme.palette.background.contrast,
-                    color: theme.palette.text.contrast,
-                    boxShadow: theme.shadows[1],
-                    fontSize: 13,
-                    '& .MuiTooltip-arrow': {
-                        color: theme.palette.background.contrast
-                    },
-                    zIndex: 1000
-                }
-            }
-        }} style={{zIndex:1000}} {...other}>
-            {<span style={{display: "inline-block", ...style}}>{children}</span>}
-        </Tooltip>
-    );
+        <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

@@ -1,4 +1,4 @@
-import { IconButton } from '@mui/material';
+import {MythicActionButton} from "./MythicActionButton";
 import CloseIcon from '@mui/icons-material/Close';
 import Tab from '@mui/material/Tab';
 import React from 'react';
@@ -8,10 +8,15 @@ 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 {useTheme} from '@mui/material/styles';
+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, ...other } =
+    const { children, value, index, maxHeight, tabInfo, getCallbackData, queryParams, changeSearchParam, showDeleted, ...other } =
         props;
     const style =
         props.style === undefined
@@ -19,6 +24,7 @@ export function MythicTabPanel(props) {
                   display: value === index ? 'flex' : 'none',
                   flexDirection: 'column',
                   flexGrow: 1,
+                  minHeight: 0,
                   width: '100%',
                   maxWidth: '100%',
                   overflowY: "auto",
@@ -36,68 +42,12 @@ export function MythicTabPanel(props) {
         </div>
     );
 }
-function a11yProps(index) {
+export function a11yProps(index) {
     return {
         id: `scrollable-auto-tab-${index}`,
         'aria-controls': `scrollable-auto-tabpanel-${index}`,
     };
 }
-function allowDrop(ev) {
-    ev.preventDefault();
-    return true;
- }
- 
- function drag(ev) {
-    ev.dataTransfer.setData("text", ev.target.id);
-    //ev.dataTransfer.setData("opacity", ev.target.style.opacity);
-    //ev.target.style.opacity = "0.2";
- }
-
- function onDragEnter(ev){
-    let node = ev.target.getAttribute("role") === "tab" ? ev.target : ev.target.closest('[role="tab"]');
-    node.style.borderLeft = "3px dotted red";
-    //console.log("ondragenter");
- }
-
- function onDragLeave(ev){
-    let node = ev.target.closest('[role="tab"]');
-    //console.log("onDragLeave");
-    if(ev.target.getAttribute("role") === "tab"){
-        //console.log("leaving tab", ev.target)
-        node.style.border = "";
-    } else if(node.contains(ev.target)){
-        //node.style.border = "";
-        //console.log("onDragLeave, nodeContains", node, ev.target)
-    }else{
-        node.style.border = "";
-        //console.log("onDragLeave, not contains", node, ev.target)
-    }
- }
-
- function onDragStop(ev) {
-     let node = ev.target.getAttribute("role") === "tab" ? ev.target : ev.target.closest('[role="tab"]');
-     node.style.border = "";
- }
- 
- function drop(ev) {
-    // shares dataTransfer with drag function
-   //console.log("drop")
-   ev.preventDefault();
-   const data = ev.dataTransfer.getData("text");
-   const tabList = ev.target.closest("div[role='tablist']"); 
-   let node = ev.target.getAttribute("role") === "tab" ? ev.target : ev.target.closest('[role="tab"]');
-   //console.log(tabList, data, node.nextSibling);
-   node.style.border = "";
-   //node.style.opacity = 1;
-   //document.getElementById(data).style.opacity = ev.dataTransfer.getData("opacity");
-   for(let i = 0; i < tabList.children.length; i++){
-        tabList.children[i].style.border = "";
-        //tabList.children[i].style.opacity = 1;
-   }
-   //tabList.insertBefore(document.getElementById(data), node.nextSibling);
-   //console.log("selected", data, "toLeftOf", node.id);
-   return {"selected": data, "toLeftOf": node.id};
- }
 export function MythicTabLabel(props) {
     const {
         label,
@@ -114,17 +64,21 @@ export function MythicTabLabel(props) {
         getCallbackData,
         onDragTab,
         selectedIndex,
+        highlight,
+        newDataForTab,
         ...other
     } = props;
     const onClick = (e) => {
         e.stopPropagation();
+        e.preventDefault();
         onCloseTab({ tabID: tabInfo.tabID, index: index });
     };
-    const theme = useTheme();
     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);
         }
@@ -140,53 +94,75 @@ export function MythicTabLabel(props) {
         setOpenContextMenu(false);
       };
     return (
-        <Tab
-            onDrop={(ev) => onDragTab(drop(ev))}
-            onDragOver={allowDrop}
-            onDragEnter={onDragEnter}
-            onDragLeave={onDragLeave}
-            draggable={!!onDragTab}
-            className={selectedIndex === index ? "selectedCallback" : "" }
-            onDragStart={drag}
-            onDragEnd={onDragStop}
-            label={
-                <span onContextMenu={handleContextClick} style={{ display: 'inline-block', zIndex: 1}} ref={dropdownAnchorRef}>
-                    {label}
-                    <IconButton component='div' size='small' onClick={onClick} {...other}>
-                        <CloseIcon />
-                    </IconButton>
+        <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"}>
-                        <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>
-                </span>
-            }
-            
-            {...a11yProps(index)}
-            {...other}
-            style={{padding: "0px 5px 0px 5px", borderRadius: "4px", margin: 0}}
-        />
+                        {({ 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) {
@@ -195,10 +171,9 @@ export function MythicSearchTabLabel(props) {
     return (
         <Tab
             label={
-                <span>
-                    {label}
-                    <br />
+                <span className="mythic-search-tab-label items-center inline-flex gap-3 whitespace-nowrap">
                     {iconComponent}
+                    <span>{label}</span>
                 </span>
             }
             {...a11yProps(index)}

MythicReactUI/src/components/MythicComponents/MythicTableCell.js

@@ -1,6 +1,19 @@
 import {styled} from '@mui/material/styles';
 import TableCell from '@mui/material/TableCell';
-const MythicStyledTableCell = styled(TableCell, {name: "StyledTableRow", slot: "Wrapper"})({
-  padding: "0 0 0 10px",
-});
+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

@@ -1,16 +1,10 @@
+import {MythicActionButton} from "./MythicActionButton";
 import React from 'react';
 import Button from '@mui/material/Button';
-import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
-import DialogTitle from '@mui/material/DialogTitle';
 import MythicTextField from './MythicTextField';
 import {useQuery, gql, useMutation} from '@apollo/client';
-import { Select, Input, MenuItem, Link, IconButton } from '@mui/material';
-import Table from '@mui/material/Table';
-import TableBody from '@mui/material/TableBody';
-import TableCell from '@mui/material/TableCell';
-import TableContainer from '@mui/material/TableContainer';
-import TableRow from '@mui/material/TableRow';
+import {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';
@@ -21,19 +15,45 @@ import { MythicDialog } from './MythicDialog';
 import {MythicConfirmDialog} from './MythicConfirmDialog';
 import DeleteIcon from '@mui/icons-material/Delete';
 import WebhookIcon from '@mui/icons-material/Webhook';
-import Chip from '@mui/material/Chip';
+import {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 Typography from '@mui/material/Typography';
+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!, $${target_object}: Int!, $tagtype_id: Int!){
-    insert_tag_one(object: {url: $url, data: $data, source: $source, ${target_object}: $${target_object}, tagtype_id: $tagtype_id}){
+  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
     }
   }
   `;
@@ -87,6 +107,17 @@ query getSingleTag($tag_id: Int!){
     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
@@ -96,15 +127,19 @@ query getSingleTag($tag_id: Int!){
   }
 }
 `
-export const TagsDisplay = ({tags}) => {
+export const TagsDisplay = ({tags, expand}) => {
   return (
       tags?.map( tt => (
-          <TagChipDisplay tag={tt} key={tt.id} />
+          <TagChipDisplay tag={tt} key={tt.id} expand={expand} />
         ))
   )
 }
-const TagChipDisplay = ({tag}) => {
+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();
@@ -119,12 +154,30 @@ const TagChipDisplay = ({tag}) => {
     }
     setOpenTagDisplay(false);
   }
+  const onMouseOver = () => {
+    if(expand === undefined || !expand){
+      setLabel(tag.tagtype.name);
+    }
+  }
+  const onMouseOut = () => {
+    if(expand === undefined || !expand){
+      setTimeout( () => {
+        setLabel(tag.tagtype.name[0]);
+      }, 10000); // wait 10s then go back to just a single letter
+    }
+  }
   return (
     <React.Fragment>
-      <Chip label={tag.tagtype.name} size="small" onClick={(e) => onSelectTag(e)}
-            style={{float: "right", backgroundColor:tag.tagtype.color,}}
+      <MythicChip color={color} onMouseOver={onMouseOver} onMouseOut={onMouseOut} label={label} size="small" onClick={(e) => onSelectTag(e)}
             sx={{
-              "& .MuiChip-label": {overflow: "visible"}
+              backgroundColor: color + " !important",
+              color: textColor + " !important",
+              float: "right",
+              height: "15px",
+              "& .MuiChip-label": {
+                color: "inherit",
+                overflow: "visible"
+              },
             }}
       />
       {openTagDisplay && 
@@ -143,7 +196,7 @@ const StringTagDataEntry = ({name, value}) => {
   const colorRegex = ":color=[\"\'](?<color>.*?)[\"\']";
   const onClick = (e, url) => {
     e.preventDefault();
-    fetch(url).then((response) => {
+    mythicFetch(url).then((response) => {
       if (response.status !== 200) {
         snackActions.warning("HTTP " + response.status + " response");
       } else {
@@ -177,10 +230,17 @@ const StringTagDataEntry = ({name, value}) => {
           </MythicStyledTooltip>
       )
     }
-    return (
+    if(capturePieces[2].startsWith("http:") || capturePieces[2].startsWith("https:")){
+      return (
           <Link href={capturePieces[2]} color="textPrimary" target={"_blank"} >{capturePieces[1]}</Link>
-    )
-  } else if(value.startsWith("http")){
+      )
+    } else {
+      return <Typography>
+        {capturePieces[1]} - ( {capturePieces[2]} )
+      </Typography>
+    }
+
+  } else if(value.startsWith("http:") || value.startsWith("https:")){
     return (
         <>
           {"Click for: "}
@@ -190,12 +250,84 @@ const StringTagDataEntry = ({name, value}) => {
   }
   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{
@@ -225,92 +357,82 @@ function ViewTagDialog(props) {
     }
     props.onClose(event);
   }
-
+  const stopPropagation = (e) => {
+    e.stopPropagation();
+  }
+  const rawData = selectedTag?.is_json ? JSON.stringify(selectedTag?.data || {}, null, 2) : selectedTag?.data || "";
 return (
   <React.Fragment>
-      <DialogTitle id="form-dialog-title" onClick={(e) => e.stopPropagation()}>View Tag</DialogTitle>
-        <TableContainer className="mythicElement">
-          <Table size="small" style={{ "maxWidth": "100%", "overflow": "scroll"}}>
-              <TableBody>
-                <TableRow hover>
-                  <TableCell style={{width: "20%"}}>Tag Type</TableCell>
-                  <TableCell style={{display: "inline-flex", flexDirection: "row", width: "100%"}}>
-                    <Chip label={selectedTag?.tagtype?.name||""} size="small" style={{float: "right", backgroundColor:selectedTag?.tagtype?.color||""}} />
-                  </TableCell>
-                </TableRow>
-                <TableRow hover>
-                  <TableCell>Description</TableCell>
-                  <TableCell>{selectedTag?.tagtype?.description || ""}</TableCell>
-                </TableRow>
-                <TableRow hover>
-                  <TableCell>Source</TableCell>
-                  <TableCell>
-                    {selectedTag?.source ||""}
-                  </TableCell>
-                </TableRow>
-                <TableRow hover>
-                  <TableCell>Reference URL</TableCell>
-                  <TableCell>
-                    <Link href={selectedTag?.url || "#"} color="textPrimary" target="_blank" referrerPolicy='no'>{selectedTag?.url ? "click here" : "No reference link provided"}</Link>
-                  </TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableCell>Data</TableCell>
-                  <TableCell>
-                    {selectedTag?.is_json ? (
-                      <TableContainer  className="mythicElement">
-                        <Table size="small" style={{ "maxWidth": "100%", "overflow": "scroll"}}>
-                          <TableBody>
-                            {Object.keys(selectedTag.data).map( key => (
-                              <TableRow key={key} hover>
-                                <TableCell>{key}</TableCell>
-                                {typeof selectedTag.data[key] === "string" ? (
-                                    <TableCell>
-                                      <StringTagDataEntry name={key} value={selectedTag.data[key]} />
-                                    </TableCell>
-                                ) : typeof selectedTag.data[key] === "object" ? (
-                                    <TableCell>{selectedTag.data[key].toString()}</TableCell>
-                                ) : typeof selectedTag.data[key] === "boolean" ? (
-                                    <TableCell>{selectedTag.data[key] ? "True" : "False"}</TableCell>
-                                ) :
-                                (
-                                    <TableCell>{selectedTag.data[key]}</TableCell>
-                                )
-                                }
-
-                              </TableRow>
-                            ))}
-                          </TableBody>
-                        </Table>
-                      </TableContainer>
-                    ) : (
-                      <AceEditor 
-                        mode="json"
-                        theme={theme.palette.mode === "dark" ? "monokai" : "xcode"}
-                        fontSize={14}
-                        showGutter={true}
-                        maxLines={20}
-                        highlightActiveLine={false}
-                        value={selectedTag?.data || ""}
-                        width={"100%"}
-                        setOptions={{
-                          showLineNumbers: true,
-                          tabSize: 4,
-                          useWorker: false,
-                          wrapBehavioursEnabled: true,
-                          wrap: true
-                        }}/>
-                    )}
-                  </TableCell>
-                </TableRow>
-              </TableBody>
-          </Table>
-        </TableContainer>
-      <DialogActions onClick={(e) => e.stopPropagation()}>
-        <Button onClick={onClose} variant="contained" color="primary">
+      <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
-        </Button>
-      </DialogActions>
+        </MythicDialogButton>
+      </MythicDialogFooter>
 </React.Fragment>
 );
 }
@@ -332,7 +454,11 @@ export function ViewEditTagsDialog(props) {
         setNewSource(data.tag[0].source);
         setNewURL(data.tag[0].url);
         try{
-          setNewData(JSON.stringify(data.tag[0].data, null, 2));
+          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));
         }
@@ -351,7 +477,11 @@ export function ViewEditTagsDialog(props) {
       setExistingTags(newTags);
       if(newTags.length > 0){
         setSelectedTag(newTags[0]);
-        setNewData(newTags[0].data);
+        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 {
@@ -400,8 +530,15 @@ const handleTaskTypeChange = (evt) => {
     setNewData(String(evt.target.value.data));
   }
 }
-const handleNewTagCreate = ({tagtype_id, source, url, data, id}) => {
-  props.onClose();
+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}});
@@ -410,102 +547,128 @@ const onAcceptDelete = () => {
 
 return (
   <React.Fragment>
-      <DialogTitle id="form-dialog-title">Edit Tags
-      </DialogTitle>
-      <DialogContent dividers={true}>
-      {openNewDialog ?
-        (<MythicDialog fullWidth={true} maxWidth="xl" open={openNewDialog}
+      <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_id={props.target_object_id}
+            target_object_display_id={props.target_object_display_id}
             onClose={()=>{setOpenNewDialog(false);}} 
             onSubmit={handleNewTagCreate} />}
-      />) : null}
-        <TableContainer className="mythicElement">
-          <Table size="small" style={{ "maxWidth": "100%", "overflow": "scroll"}}>
-              <TableBody>
-                <TableRow hover>
-                  <TableCell style={{width: "30%"}}>Select Existing Tag to Edit or Add New</TableCell>
-                  <TableCell style={{display: "inline-flex", flexDirection: "row-reverse"}}>
-                    <MythicStyledTooltip title={"Add New Tag"}>
-                      <IconButton variant='contained' color="success" style={{float: "right"}} onClick={() => setOpenNewDialog(true)} >
-                        <AddCircleOutlineIcon />
-                      </IconButton>
-                    </MythicStyledTooltip>
-                    <Select
-                        labelId="demo-dialog-select-label"
-                        id="demo-dialog-select"
-                        value={selectedTag}
-                        onChange={handleTaskTypeChange}
-                        input={<Input />}
-                      >
-                        {existingTags.map( (opt) => (
-                            <MenuItem value={opt} key={opt.id}>
-                              <Chip label={opt.tagtype.name} size="small" style={{float: "right", backgroundColor:opt.tagtype.color}} />
-                            </MenuItem>
-                        ) )}
-                      </Select>
-                    {selectedTag.id &&
-                        <IconButton size="small" style={{float: "right"}} onClick={()=>{setOpenDeleteDialog(true);}} color="error" variant="contained"><DeleteIcon/></IconButton>
+      />}
+        <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>
                     }
-                      {openDelete && 
-                        <MythicConfirmDialog onClose={() => {setOpenDeleteDialog(false);}} onSubmit={onAcceptDelete} open={openDelete}/>
-                      }
-                  </TableCell>
-                </TableRow>
-                <TableRow hover>
-                  <TableCell>Tag Description</TableCell>
-                  <TableCell>{selectedTag?.tagtype?.description || ""}</TableCell>
-                </TableRow>
-                <TableRow hover>
-                  <TableCell>Source</TableCell>
-                  <TableCell>
-                    <MythicTextField value={newSource} onChange={onChangeSource} name="Source of tag data" />
-                  </TableCell>
-                </TableRow>
-                <TableRow hover>
-                  <TableCell>External URL</TableCell>
-                  <TableCell>
-                    <MythicTextField value={newURL} onChange={onChangeURL} name="External URL reference" />
-                    <Link href={newURL} color="textPrimary" target="_blank" referrerPolicy='no'>{newURL ? "click here" : ""}</Link>
-                  </TableCell>
-                </TableRow>
-                <TableRow hover>
-                  <TableCell>JSON Data</TableCell>
-                  <TableCell>
-                  <AceEditor 
-                    mode="json"
-                    theme={theme.palette.mode === "dark" ? "monokai" : "xcode"}
-                    onChange={onEditorChange}
-                    fontSize={14}
-                    showGutter={true}
-                    maxLines={20}
-                    highlightActiveLine={true}
-                    value={newData}
-                    width={"100%"}
-                    setOptions={{
-                      showLineNumbers: true,
-                      tabSize: 4,
-                      useWorker: false
-                    }}/>
-                  </TableCell>
-                </TableRow>
-              </TableBody>
-          </Table>
-        </TableContainer>
+                  </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>
-      <DialogActions>
-        <Button onClick={props.onClose} variant="contained" color="primary">
+      <MythicDialogFooter>
+        <MythicDialogButton onClick={props.onClose}>
           Close
-        </Button>
+        </MythicDialogButton>
         {selectedTag.id &&
-            <Button onClick={onSubmit} variant="contained" color="success">
+            <MythicDialogButton intent="primary" onClick={onSubmit}>
               Submit
-            </Button>
+            </MythicDialogButton>
         }
-
-      </DialogActions>
+      </MythicDialogFooter>
 </React.Fragment>
 );
 }
@@ -516,7 +679,8 @@ export function NewTagDialog(props) {
     const [newData, setNewData] = React.useState("");
     const [selectedTagType, setSelectedTagType] = React.useState("");
     const [existingTagTypes, setExistingTagTypes] = React.useState([]);
-    const { loading, error } = useQuery(getTagtypesQuery, {
+    const [openNewTagTypeDialog, setOpenNewTagTypeDialog] = React.useState(false);
+    useQuery(getTagtypesQuery, {
         onCompleted: data => {
           setExistingTagTypes(data.tagtype);
           if(data.tagtype.length > 0){
@@ -527,9 +691,14 @@ export function NewTagDialog(props) {
     });
   const [newTag] = useMutation(createNewTagMutationTemplate({target_object: props.target_object}), {
     onCompleted: data => {
-      snackActions.success("Successfully created new tag!");
-      props.onSubmit({source:newSource, url:newURL, data:newData, tagtype_id:selectedTagType.id, id: data.insert_tag_one.id});
-      props.onClose()
+      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);
@@ -538,11 +707,16 @@ export function NewTagDialog(props) {
   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, 
-      [props.target_object]: props.target_object_id
+      [getCreateTagTargetObject(props.target_object)]: props.target_object_display_id || props.target_object_id
     }})
   }
   const onChangeSource = (name, value, error) => {
@@ -557,93 +731,108 @@ export function NewTagDialog(props) {
 
   return (
     <React.Fragment>
-        <DialogTitle id="form-dialog-title">Add New Tag</DialogTitle>
-        <DialogContent dividers={true}>
-          <TableContainer className="mythicElement">
-            <Table size="small" style={{ "maxWidth": "100%", "overflow": "scroll"}}>
-                <TableBody>
-                  <TableRow hover>
-                    <TableCell style={{width: "20%"}}>
-                      <Typography>
-                        Tag
-                      </Typography>
-                      <Typography  size="small" component="span" style={{fontSize: theme.typography.pxToRem(15)}}>
-                        To create a new tag type click <Link style={{wordBreak: "break-all"}}
-                                                             color="textPrimary"
-                                                             href={"/new/tagtypes"}
-                                                             underline="always" target="_blank">
-                        here
-                      </Link>
-                      </Typography>
-                    </TableCell>
-                    <TableCell>
-                      <Select
-                        labelId="demo-dialog-select-label"
-                        id="demo-dialog-select"
-                        value={selectedTagType}
-                        onChange={handleTaskTypeChange}
-                        input={<Input style={{width: "100%"}}/>}
-                      >
-                        {existingTagTypes.map( (opt) => (
-                            <MenuItem value={opt} key={opt.name}>
-                              <Chip label={opt.name} size="small" style={{ backgroundColor:opt.color}} />
-                            </MenuItem>
-                        ) )}
-                      </Select>
-                    </TableCell>
-                  </TableRow>
-                  <TableRow hover>
-                    <TableCell>Source</TableCell>
-                    <TableCell>
-                      <MythicTextField value={newSource} onChange={onChangeSource} name="Source of tag data" />
-                    </TableCell>
-                  </TableRow>
-                  <TableRow hover>
-                    <TableCell>External URL</TableCell>
-                    <TableCell>
-                      <MythicTextField value={newURL} onChange={onChangeURL} name="External URL reference" />
-                      <Link href={newURL} color="textPrimary" target="_blank" referrerPolicy='no'>{newURL}</Link>
-                    </TableCell>
-                  </TableRow>
-                  <TableRow hover>
-                    <TableCell>JSON Data</TableCell>
-                    <TableCell>
-                    <AceEditor 
+        {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}
-                      maxLines={20}
+                      showPrintMargin={false}
+                      minLines={10}
+                      maxLines={18}
                       highlightActiveLine={true}
                       value={newData}
                       width={"100%"}
                       setOptions={{
                         showLineNumbers: true,
                         tabSize: 4,
-                        useWorker: false
+                        useWorker: false,
+                        wrap: true
                       }}/>
-                    </TableCell>
-                  </TableRow>
-                </TableBody>
-            </Table>
-          </TableContainer>
+                </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>
-        <DialogActions>
-          <Button onClick={props.onClose} variant="contained" color="primary">
+        <MythicDialogFooter>
+          <MythicDialogButton onClick={props.onClose}>
             Close
-          </Button>
+          </MythicDialogButton>
           {selectedTagType !== "" &&
-              <Button onClick={onSubmit} variant="contained" color="success">
+              <MythicDialogButton intent="primary" onClick={onSubmit}>
                 Submit
-              </Button>
+              </MythicDialogButton>
           }
-
-        </DialogActions>
+        </MythicDialogFooter>
   </React.Fragment>
   );
 }
-export const ViewEditTags = ({target_object, target_object_id, me}) => {
+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){
@@ -654,13 +843,16 @@ export const ViewEditTags = ({target_object, target_object_id, me}) => {
   }
   return(
     <React.Fragment>
-    <IconButton onClick={(e) => toggleTagDialog(e, true)} size="small" style={{display: "inline-block", float: "right"}}><LocalOfferOutlinedIcon /></IconButton>
-    {openTagDialog ?
-      (<MythicDialog fullWidth={true} maxWidth="xl" open={openTagDialog}
+    <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} onClose={(e)=>{toggleTagDialog(e, false)}} />}
-    />) : null}
+        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

@@ -1,5 +1,5 @@
 import React, {useState} from 'react';
-import Button from '@mui/material/Button';
+import {MythicActionButton} from './MythicActionButton';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -15,7 +15,7 @@ export function MythicTextEditDialog(props) {
   return (
     <React.Fragment>
         <DialogTitle id="form-dialog-title">{props.title}</DialogTitle>
-        <DialogContent dividers={true}>
+        <DialogContent dividers={true} style={{padding: 0}}>
             <AceEditor 
               mode="json"
               theme={theme.palette.mode === "dark" ? "monokai" : "xcode"}
@@ -24,6 +24,8 @@ export function MythicTextEditDialog(props) {
               showGutter={true}
               highlightActiveLine={true}
               value={props.value}
+              showPrintMargin={false}
+              wrapEnabled={true}
               focus={true}
               width={"100%"}
               setOptions={{
@@ -33,11 +35,10 @@ export function MythicTextEditDialog(props) {
               }}/>
         </DialogContent>
         <DialogActions>
-          <Button variant="contained" onClick={props.onClose} color="primary">
+        <MythicActionButton colorMode="always" variant="contained" onClick={props.onClose} tone="primary">
             Close
-          </Button>
+        </MythicActionButton>
         </DialogActions>
   </React.Fragment>
   );
 }
-

MythicReactUI/src/components/MythicComponents/MythicTextField.js

@@ -1,111 +1,149 @@
 import React from 'react';
 import { styled } from '@mui/material/styles';
-import PropTypes from 'prop-types';
 import {TextField} from '@mui/material';
+import {useDebounce} from "../utilities/useDebounce";
 const PREFIX = 'MythicTextField';
 
 const classes = {
-    root: `${PREFIX}-root`
+    root: `${PREFIX}Div-root`,
+    textFieldRoot: `${PREFIX}-root`
 };
 
-const Root = styled('div')({
+const Root = styled('div')(({theme}) => ({
       [`&.${classes.root}`]: {
-        '& input:valid + fieldset': {
-          borderColor: 'grey',
-          borderWidth: 1,
+
+      },
+}));
+
+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: 'red',
-          borderWidth: 2,
+            borderColor: theme.palette.error.main,
+            borderWidth: 2,
         },
         '& input:valid:focus + fieldset': {
-          borderLeftWidth: 6,
-          padding: '4px !important', // override inline-style
+            borderLeftWidth: 2,
+            padding: '4px !important', // override inline-style
         },
-      },
-    });
+        '& textarea:focus + textarea + fieldset': {
+            borderLeftWidth: 2,
+            //padding: '4px !important', // override inline-style
+        },
+    },
+}));
 
-const ValidationTextField = TextField;
-
-class MythicTextField extends React.Component {
-    
-    static propTypes = {
-        placeholder: PropTypes.string,
-        name: PropTypes.string,
-        validate: PropTypes.func,
-        width: PropTypes.number,
-        onChange: PropTypes.func.isRequired,
-        requiredValue: PropTypes.bool,
-        type: PropTypes.string,
-        onEnter: PropTypes.func,
-        autoFocus: PropTypes.bool,
-        autoComplete: PropTypes.bool,
-        showLabel: PropTypes.bool,
-        variant: PropTypes.string,
-        inline: PropTypes.bool,
-        marginBottom: PropTypes.string,
-        value: PropTypes.any,
-    }
-    onChange = evt => {
-        const name = this.props.name;
-        const value = evt.target.value;
-        const error = this.props.validate ? this.props.validate(value) : false;
-        this.props.onChange(name, value, error, evt);
-    }
-    checkError = () => {
-        return this.props.validate ? this.props.validate(this.props.value) : false
-    }
-    onKeyPress = (event) => {
+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){
-              this.onChange(event);
+              handleChange(event);
               return;
           }
-          if (this.props.onEnter !== undefined) {
+          if (onEnter !== undefined) {
               event.stopPropagation();
               event.preventDefault();
-              this.props.onEnter(event);
+              onEnter(event);
           }
       }else{
-        this.onChange(event);
+          handleChange(event);
       }
     }
-    render(){
-        return (
-            <Root style={{width:  this.props.width ? this.props.width + "rem" : "100%", display: this.props.inline ? "inline-block": "",}}>
-                <ValidationTextField
-                    fullWidth={true}
-                    placeholder={this.props.placeholder}
-                    value={this.props.value}
-                    onChange={this.onChange}
-                    color={"secondary"}
-                    onKeyDown={this.onKeyPress}
-                    label={this.props.showLabel === undefined ? this.props.name : this.props.showLabel ? this.props.name : undefined}
-                    autoFocus={this.props.autoFocus}
-                    variant={this.props.variant === undefined ? "outlined" : this.props.variant}
-                    data-lpignore={true}
-                    autoComplete={this.props.autoComplete === undefined ? "new-password" : (this.props.autoComplete ? "on" : "new-password")}
-                    disabled={this.props.disabled === undefined ? false : this.props.disabled}
-                    required={this.props.requiredValue ? this.props.requiredValue : false}
-                    InputLabelProps={this.props.inputLabelProps}
-                    multiline={this.props.multiline ? this.props.multiline : false}
-                    maxRows={this.props.maxRows}
-                    error={this.checkError()}
-                    type={this.props.type === undefined ? "text" : this.props.type}
-                    onWheel={ event => event.target.blur() }
-                    InputProps={{...this?.props?.InputProps, spellCheck: false}}
-                    helperText={this.checkError() ? this.props.errorText : this.props.helperText}
-                    style={{
-                        padding:0,
-                        paddingLeft: "5px",
-                        marginBottom: this.props.marginBottom ? this.props.marginBottom : "10px",
-                        display: this.props.inline ? "inline-block": "",
-                    }}
-                    classes={{
-                        root: classes.root
-                    }} />
-            </Root>
-        );
-    }
+    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

@@ -1,6 +1,6 @@
 import React, {useEffect} from 'react';
 import { styled } from '@mui/material/styles';
-import Button from '@mui/material/Button';
+import {MythicActionButton} from './MythicActionButton';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -9,14 +9,11 @@ import ListItem from '@mui/material/ListItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import Checkbox from '@mui/material/Checkbox';
-import { CardContent } from '@mui/material';
-import CardHeader from '@mui/material/CardHeader';
 import Divider from '@mui/material/Divider';
 
 const PREFIX = 'MythicTransferList';
 
 export const classes = {
-    button: `${PREFIX}-button`,
     divider: `${PREFIX}-divider`
 };
 
@@ -26,21 +23,10 @@ export const StyledDivider = styled(Divider)((
     }
 ) => ({
     [`&.${classes.divider}`]: {
-        backgroundColor: "rgb(100, 170, 204)",
-        border: "2px solid rgba(100, 170, 204)"
+        backgroundColor: theme.palette.primary.main,
+        border: `2px solid ${theme.palette.primary.main}`
     }
 }));
-export const StyledButton = styled(Button)((
-    {
-        theme
-    }
-) => ({
-    [`&.${classes.button}`]: {
-        margin: theme.spacing(0.5, 0),
-    },
-}));
-
-
 const CustomListElement = ({value, onClick, itemKey}) => {
     const displayValue = itemKey ? value[itemKey] : value.value;
     const labelId = `transfer-list-item-${displayValue}-label`;
@@ -61,10 +47,9 @@ const CustomListElement = ({value, onClick, itemKey}) => {
 const CustomList = ({title, items, left, onClick, itemKey}) => {
 
     return (
-        <>
-            <CardHeader title={title} />
-            <StyledDivider classes={{root: classes.divider}}/>
-            <CardContent style={{flexGrow: 1, height: "100%", width: "100%", overflowY: "auto", padding: 0}}>
+        <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}>
@@ -80,8 +65,8 @@ const CustomList = ({title, items, left, onClick, itemKey}) => {
 
                     ))}
                 </List>
-            </CardContent>
-        </>
+            </div>
+        </div>
     );
 }
 const CustomTransferList = ({leftTitle, rightTitle, initialData, parentLeftData, parentRightData, itemKey}) => {
@@ -148,45 +133,49 @@ const CustomTransferList = ({leftTitle, rightTitle, initialData, parentLeftData,
             <div  style={{paddingLeft: 0, flexGrow: 1,  marginLeft: 0, marginRight: "10px", position: "relative",  overflowY: "auto", display: "flex", flexDirection: "column" }}>
                 <CustomList title={leftTitle} left={true} items={data} onClick={handleToggle} itemKey={itemKey} />
             </div>
-            <div style={{display: "flex", flexDirection: "column", justifyContent: "center"}}>
-                <StyledButton
+            <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"
-                    className={classes.button}
                     onClick={handleAllRight}
                     aria-label="move all right"
                 >
                     &gt;&gt;
-                </StyledButton>
-                <StyledButton
+                </MythicActionButton>
+                <MythicActionButton
+                    colorMode="always"
+                    tone="primary"
                     variant="contained"
                     size="small"
                     disabled={data.filter( x => x.checked && x.left).length === 0}
-                    className={classes.button}
                     onClick={handleCheckedRight}
                     aria-label="move selected right"
                 >
                     &gt;
-                </StyledButton>
-                <StyledButton
+                </MythicActionButton>
+                <MythicActionButton
+                    colorMode="always"
+                    tone="primary"
                     variant="contained"
                     size="small"
                     disabled={data.filter( x => x.checked && x.right).length === 0}
-                    className={classes.button}
                     onClick={handleCheckedLeft}
                     aria-label="move selected left"
                 >
                     &lt;
-                </StyledButton>
-                <StyledButton
+                </MythicActionButton>
+                <MythicActionButton
+                    colorMode="always"
+                    tone="primary"
                     variant="contained"
                     size="small"
-                    className={classes.button}
                     onClick={handleAllLeft}
                     aria-label="move all left"
                 >
                     &lt;&lt;
-                </StyledButton>
+                </MythicActionButton>
 
             </div>
             <div style={{marginLeft: "10px", position: "relative", flexGrow: 1, display: "flex", overflowY: "auto", flexDirection: "column" }}>
@@ -243,14 +232,13 @@ export function MythicTransferListDialog(props) {
             />
         </DialogContent>
         <DialogActions>
-          <Button onClick={props.onClose} variant="contained" color="primary">
+            <MythicActionButton colorMode="always" onClick={props.onClose} tone="primary" variant="contained">
             Close
-          </Button>
-          <Button onClick={setFinalTags} variant="contained" color="success">
+            </MythicActionButton>
+            <MythicActionButton colorMode="always" onClick={setFinalTags} tone="success" variant="contained">
             Submit
-          </Button>
+            </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>
+  );
+}

MythicReactUI/src/components/RefreshTokenDialog.js

@@ -5,7 +5,7 @@ import DialogTitle from '@mui/material/DialogTitle';
 import {milisecondsToString, useInterval } from './utilities/Time';
 import {JWTTimeLeft, GetNewToken} from '../index';
 import {FailedRefresh} from '../cache';
-import { Button } from '@mui/material';
+import {MythicActionButton} from './MythicComponents/MythicActionButton';
 import { snackActions } from './utilities/Snackbar';
 
 
@@ -43,14 +43,13 @@ export function RefreshTokenDialog(props) {
           Your Session will expire in {timeLeft}
         </DialogContent>
         <DialogActions>
-          <Button onClick={onClose} variant="contained" color="primary">
+          <MythicActionButton colorMode="always" onClick={onClose} tone="primary" variant="contained">
             Logout
-          </Button>
-          <Button onClick={onCommitSubmit} variant="contained" color="success">
+          </MythicActionButton>
+          <MythicActionButton colorMode="always" onClick={onCommitSubmit} tone="success" variant="contained">
             Extend
-          </Button>
+          </MythicActionButton>
         </DialogActions>
       </React.Fragment>
     )
 }
-

MythicReactUI/src/components/TopAppBar.js

@@ -1,641 +0,0 @@
-import React from 'react';
-import { styled } from '@mui/material/styles';
-import clsx from 'clsx';
-import { useTheme } from '@mui/material/styles';
-import AppBar from '@mui/material/AppBar';
-import Toolbar from '@mui/material/Toolbar';
-import IconButton from '@mui/material/IconButton';
-import MenuIcon from '@mui/icons-material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-import ManageAccountsTwoToneIcon from '@mui/icons-material/ManageAccountsTwoTone';
-import Menu from '@mui/material/Menu';
-import { Link } from 'react-router-dom';
-import Drawer from '@mui/material/Drawer';
-import List from '@mui/material/List';
-import Divider from '@mui/material/Divider';
-import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
-import ListItem from '@mui/material/ListItem';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-import { useReactiveVar } from '@apollo/client';
-import { menuOpen, FailedRefresh } from '../cache';
-import { TopAppBarEventLogNotifications } from './TopAppBarEventLogNotifications';
-import { EventFeedNotifications } from './EventFeedNotifications';
-import HelpTwoToneIcon from '@mui/icons-material/HelpTwoTone';
-import PhoneCallbackIcon from '@mui/icons-material/PhoneCallback';
-import {ReactComponent as ReactLogo} from './mythic_red_small.svg';
-import SpaceDashboardTwoToneIcon from '@mui/icons-material/SpaceDashboardTwoTone';
-import ListSubheader from '@mui/material/ListSubheader';
-import Collapse from '@mui/material/Collapse';
-import ExpandLess from '@mui/icons-material/ExpandLess';
-import ExpandMore from '@mui/icons-material/ExpandMore';
-import LayersTwoToneIcon from '@mui/icons-material/LayersTwoTone';
-import TableChartTwoToneIcon from '@mui/icons-material/TableChartTwoTone';
-import PostAddIcon from '@mui/icons-material/PostAdd';
-import SupervisorAccountIcon from '@mui/icons-material/SupervisorAccount';
-import EditIcon from '@mui/icons-material/Edit';
-import { Typography } from '@mui/material';
-import SearchIcon from '@mui/icons-material/Search';
-import BarChartIcon from '@mui/icons-material/BarChart';
-import HeadsetTwoToneIcon from '@mui/icons-material/HeadsetTwoTone';
-import CodeIcon from '@mui/icons-material/Code';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faBiohazard, faFlagCheckered} from '@fortawesome/free-solid-svg-icons';
-import AttachmentIcon from '@mui/icons-material/Attachment';
-import FingerprintIcon from '@mui/icons-material/Fingerprint';
-import {faSocks} from '@fortawesome/free-solid-svg-icons';
-import CameraAltTwoToneIcon from '@mui/icons-material/CameraAltTwoTone';
-import {mythicUIVersion} from '../index';
-import {MythicStyledTooltip} from './MythicComponents/MythicStyledTooltip';
-import VpnKeyIcon from '@mui/icons-material/VpnKey';
-import ThumbDownTwoTone from '@mui/icons-material/ThumbDownTwoTone';
-import { MythicDialog } from './MythicComponents/MythicDialog';
-import {MythicFeedbackDialog} from './MythicComponents/MythicFeedbackDialog';
-import LocalOfferTwoToneIcon from '@mui/icons-material/LocalOfferTwoTone';
-import StorageIcon from '@mui/icons-material/Storage';
-import PublicIcon from '@mui/icons-material/Public';
-import LightModeTwoToneIcon from '@mui/icons-material/LightModeTwoTone';
-import DarkModeTwoToneIcon from '@mui/icons-material/DarkModeTwoTone';
-import PlayCircleFilledTwoToneIcon from '@mui/icons-material/PlayCircleFilledTwoTone';
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import {TopAppBarEventingNotifications} from "./TopAppBarEventingNotifications";
-import {useQuery, gql} from '@apollo/client';
-
-
-const PREFIX = 'TopAppBar';
-
-const classes = {
-  root: `${PREFIX}-root`,
-  title: `${PREFIX}-title`,
-  hide: `${PREFIX}-hide`,
-  drawer: `${PREFIX}-drawer`,
-  drawerPaper: `${PREFIX}-drawerPaper`,
-  drawerHeader: `${PREFIX}-drawerHeader`,
-  listSubHeader: `${PREFIX}-listSubHeader`,
-  appBar: `${PREFIX}-appBar`,
-  appBarShift: `${PREFIX}-appBarShift`,
-  nested: `${PREFIX}-nested`,
-  mythicElement: `${PREFIX}-mythicElement`,
-  menuButton: `${PREFIX}-menuButton`,
-};
-
-const StyledAppBar = styled(AppBar)((
-  {
-    theme
-  }
-) => ({
-  [`& .${classes.hide}`]: {
-    display: 'none',
-  },
-  [`& .${classes.menuButton}`]: {
-    display: 'inline-block',
-  },
-  [`&.${classes.appBar}`]: {
-    width: "100%",
-    backgroundColor: theme.topAppBarColor,
-    transition: theme.transitions.create(['margin', 'width'], {
-      easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.leavingScreen,
-    }),
-    borderTopRightRadius: theme.palette.mode === "dark" ? "3px" : 0,
-    borderTopLeftRadius: theme.palette.mode === "dark" ? "3px" : 0,
-    position: "sticky",
-    overflow: "hidden",
-    maxHeight: "48px"
-  },
-  [`&.${classes.appBarShift}`]: {
-    maxWidth: `calc(100% - ${drawerWidth}px)`,
-    marginLeft: drawerWidth,
-    transition: theme.transitions.create(['margin', 'width'], {
-      easing: theme.transitions.easing.easeOut,
-      duration: theme.transitions.duration.enteringScreen,
-    }),
-    borderTopRightRadius: theme.palette.mode === "dark" ? "3px" : 0,
-    borderTopLeftRadius: theme.palette.mode === "dark" ? "3px" : 0,
-  },
-}));
-const StyledDrawer = styled(Drawer)((
-    {
-      theme
-    }
-) => ({
-  [`& .${classes.title}`]: {
-    flexGrow: 1,
-  },
-
-  [`&.${classes.drawer}`]: {
-    width: drawerWidth,
-    flexShrink: 0,
-  },
-
-  [`& .${classes.drawerPaper}`]: {
-    width: drawerWidth,
-  },
-
-  [`& .${classes.drawerHeader}`]: {
-    display: 'flex',
-    alignItems: 'center',
-    padding: theme.spacing(0, 1),
-    justifyContent: 'flex-end',
-  },
-
-  [`& .${classes.listSubHeader}`]: {
-    backgroundColor: theme.palette.listSubHeader.default,
-    borderTopLeftRadius: "3px",
-    borderTopRightRadius: "3px",
-  },
-
-  [`& .${classes.nested}`]: {
-    paddingLeft: theme.spacing(4),
-  },
-}));
-
-
-const drawerWidth = 240;
-const GET_SETTINGS = gql`
-query getGlobalSettings {
-  getGlobalSettings {
-    settings
-  }
-}
-`;
-export function TopAppBar(props) {
-  const theme = useTheme();
-  const me = props.me;
-  const isOpen = useReactiveVar(menuOpen);
-  const [openGlobal, setOpenGlobal] = React.useState(false);
-  const [openCreate, setOpenCreate] = React.useState(false);
-  const [openOperations, setOpenOperations] = React.useState(false);
-  const [openData, setOpenData] = React.useState(false);
-  const [serverVersion, setServerVersion] = React.useState("...");
-  const [serverName, setServerName] = React.useState("...");
-  useQuery(GET_SETTINGS, {fetchPolicy: "no-cache",
-    onCompleted: (data) => {
-      setServerVersion(data.getGlobalSettings.settings["MYTHIC_SERVER_VERSION"]);
-      setServerName(data.getGlobalSettings.settings["MYTHIC_GLOBAL_SERVER_NAME"]);
-    }
-  });
-  const handleDrawerOpen = () => {
-    menuOpen(true);
-  };
-
-  const handleDrawerClose = () => {
-    menuOpen(false);
-  };
-
-  const handleToggleGlobal = () => {
-    setOpenGlobal(!openGlobal);
-  }
-  const handleToggleCreate = () => {
-    setOpenCreate(!openCreate);
-  }
-  const handleToggleOperations = () => {
-    setOpenOperations(!openOperations);
-  }
-  const handleToggleData = () => {
-    setOpenData(!openData);
-  }
-
-  return (
-    <>
-      {me?.user?.current_operation_id ? (<EventFeedNotifications me={me} />) : null }
-      <StyledAppBar className={clsx(classes.appBar, {[classes.appBarShift]: isOpen,})}>
-        
-        { me?.loggedIn ? (
-        <Toolbar variant="dense" style={{width: "100%"}} >
-            <IconButton
-              edge="start"
-              className={clsx(isOpen && classes.hide, !isOpen && classes.menuButton)}
-              color="inherit"
-              aria-label="menu"
-              disableFocusRipple={true}
-              disableRipple={true}
-              onClick={handleDrawerOpen}
-              >
-                <MenuIcon fontSize={"large"} />
-            </IconButton>
-            <div style={{width: "100%"}}>
-              <div className={'hideOnSmallWidth'}>
-                <TopBarShortcuts />
-                {me?.user?.current_operation_id === 0 ? (
-                    <Link style={{display: "inline-flex", alignItems: "center", paddingRight: "10px", color: "#f84d4d",
-                      fontWeight: "bold",}} to="/new/operations">
-                      {"CLICK HERE TO SET OPERATION!"}
-                    </Link>
-                ) : (
-                    <Link style={{display: "inline-flex", alignItems: "center", paddingRight: "10px", color: "white", textDecoration: "none"}} to="/new/operations">
-                      {me?.user?.current_operation}
-                    </Link>
-                )}
-
-              </div>
-
-            </div>
-
-          <TopBarRightShortcuts me={me} toggleTheme={props.toggleTheme} serverName={serverName} />
-        </Toolbar>
-          ) : null
-        } 
-      </StyledAppBar>
-      <StyledDrawer
-            className={classes.drawer}
-            anchor="left"
-            open={isOpen}
-            classes={{
-              paper: classes.drawerPaper,
-            }}
-            onClose={handleDrawerClose}
-          >
-        <div className={classes.drawerHeader} role="presentation">
-          <ReactLogo style={{width: "80%", display: "inline-block"}}/>
-          
-            <IconButton onClick={handleDrawerClose} size="large">
-              {theme.direction === 'ltr' ? <ChevronLeftIcon className="mythicElement"/> : <ChevronRightIcon className="mythicElement"/>}
-            </IconButton>
-        </div>
-        <List
-        subheader={
-          <ListSubheader className={classes.listSubHeader} component="div" id="nested-list-subheader">
-            Home
-          </ListSubheader>
-        }>
-            <div style={{marginLeft: "15px"}}>
-            <b>Mythic Version:</b> v{serverVersion}<br/>
-            <b>UI Version:</b> v{mythicUIVersion}<br/>
-            </div>
-            
-            <ListItem button component={Link} to='/new' key={"home"} onClick={handleDrawerClose}>
-              <ListItemIcon ><SpaceDashboardTwoToneIcon fontSize={"large"} className="mythicElement" /></ListItemIcon>
-              <ListItemText primary={"Dashboard"} />
-            </ListItem>
-        </List>
-            <List
-            subheader={
-              <ListSubheader className={classes.listSubHeader} component="div" id="nested-list-subheader">
-                Global Configurations
-              </ListSubheader>
-            }>
-              <ListItem button onClick={handleToggleGlobal}>
-                <ListItemIcon><LayersTwoToneIcon fontSize={"large"} /></ListItemIcon>
-                <ListItemText>Services</ListItemText>
-                {openGlobal ? <ExpandLess /> : <ExpandMore />}
-              </ListItem>
-              <Collapse in={openGlobal} unmountOnExit >
-                <List component="div" disablePadding style={{border: 0}}>
-                  <ListItem button className={classes.nested} target="_blank" component={Link} to='/jupyter' key={"jupyter"} onClick={handleDrawerClose}>
-                    <ListItemIcon><CodeIcon fontSize={"large"} className="mythicElement"/></ListItemIcon>
-                    <ListItemText primary={"Jupyter Notebooks"} />
-                  </ListItem>
-                  <ListItem button className={classes.nested} target="_blank" component={Link} to='/console' key={"console"} onClick={handleDrawerClose}>
-                    <ListItemIcon><StorageIcon fontSize={"large"} className="mythicElement"/></ListItemIcon>
-                    <ListItemText primary={"GraphQL Console"} />
-                  </ListItem>
-                  <ListItem button className={classes.nested} component={Link} to='/new/consuming_services' key={"consuming"} onClick={handleDrawerClose}>
-                    <ListItemIcon><PublicIcon fontSize={"large"} className="mythicElement"/></ListItemIcon>
-                    <ListItemText primary={"Consuming Services"} />
-                  </ListItem>
-                </List>
-              </Collapse>
-              <ListItem button onClick={handleToggleCreate}>
-                <ListItemIcon><PostAddIcon /></ListItemIcon>
-                <ListItemText>Create</ListItemText>
-                {openCreate ? <ExpandLess /> : <ExpandMore />}
-              </ListItem>
-              <Collapse in={openCreate} unmountOnExit>
-                  <List component="div" disablePadding style={{border: 0}}>
-                    <ListItem button className={classes.nested} component={Link} to='/new/createpayload' key={"createpayload"} onClick={handleDrawerClose} state={{from: 'TopAppBar'}}>
-                      <ListItemIcon><PostAddIcon fontSize={"large"} className="mythicElement"/></ListItemIcon>
-                      <ListItemText primary={"Create Payload"} />
-                    </ListItem>
-                    <ListItem button className={classes.nested} component={Link} to='/new/createwrapper' key={"createwrapper"} onClick={handleDrawerClose}>
-                      <ListItemIcon><PostAddIcon fontSize={"large"} className="mythicElement"/></ListItemIcon>
-                      <ListItemText primary={"Create Wrapper"} />
-                    </ListItem>
-                  </List>
-                </Collapse>
-              <ListItem button onClick={handleToggleOperations}>
-                <ListItemIcon><SupervisorAccountIcon fontSize={"large"} /></ListItemIcon>
-                <ListItemText>Operation Config</ListItemText>
-                {openOperations ? <ExpandLess /> : <ExpandMore />}
-              </ListItem>
-              <Collapse in={openOperations} unmountOnExit>
-                <List component="div" disablePadding style={{border: 0}}>
-                  <ListItem button className={classes.nested} component={Link} to='/new/payloadtypes' key={"payloadtypes"} onClick={handleDrawerClose}>
-                    <ListItemIcon><HeadsetTwoToneIcon fontSize={"large"} className="mythicElement"/></ListItemIcon>
-                    <ListItemText primary={"Agents & C2"} />
-                  </ListItem>
-                    <ListItem button className={classes.nested} component={Link} to='/new/operations' key={"modifyoperations"} onClick={handleDrawerClose}>
-                      <ListItemIcon><EditIcon fontSize={"large"} className="mythicElement"/></ListItemIcon>
-                      <ListItemText primary={"Modify Operations"} />
-                    </ListItem>
-                    <ListItem button className={classes.nested} component={Link} to='/new/browserscripts' key={"browserscripts"} onClick={handleDrawerClose}>
-                      <ListItemIcon><CodeIcon fontSize={"large"} className="mythicElement"/></ListItemIcon>
-                      <ListItemText primary={"BrowserScripts"} />
-                    </ListItem>
-                </List>
-              </Collapse>
-            </List>
-            <List
-            subheader={
-              <ListSubheader className={classes.listSubHeader} component="div" id="nested-list-subheader">
-                Operational Views
-              </ListSubheader>
-            }>
-              <ListItem button onClick={handleToggleData}>
-                <ListItemIcon><BarChartIcon fontSize={"large"} /></ListItemIcon>
-                <ListItemText>Operational Data</ListItemText>
-                {openData ? <ExpandLess /> : <ExpandMore />}
-              </ListItem>
-              <Collapse in={openData} unmountOnExit>
-                <List component="div" disablePadding style={{border: 0}}>
-                    <ListItem button className={classes.nested} component={Link} to='/new/payloads' key={"payloads"} onClick={handleDrawerClose}>
-                      <ListItemIcon><FontAwesomeIcon icon={faBiohazard} size="2x"/></ListItemIcon>
-                      <ListItemText primary={"Payloads"} />
-                    </ListItem>
-                    <ListItem button className={classes.nested} component={Link} to='/new/search?tab=callbacks&searchField=Host&search=' key={"search"} onClick={handleDrawerClose}>
-                      <ListItemIcon><SearchIcon fontSize={"large"} className="mythicElement"/></ListItemIcon>
-                      <ListItemText primary={"Search"} />
-                    </ListItem>
-                  <ListItem button className={classes.nested} component={Link} to='/new/mitre' onClick={handleDrawerClose}>
-                    <ListItemIcon><TableChartTwoToneIcon fontSize={"large"} className="mythicElement"/></ListItemIcon>
-                    <ListItemText primary={"ATT&CK"} />
-                  </ListItem>
-                  <ListItem button className={classes.nested} component={Link} to='/new/reporting' onClick={handleDrawerClose}>
-                    <ListItemIcon><FontAwesomeIcon size={"2x"} icon={faFlagCheckered} /></ListItemIcon>
-                    <ListItemText primary={"Reporting"} />
-                  </ListItem>
-                  <ListItem button className={classes.nested} component={Link} to='/new/tagtypes' onClick={handleDrawerClose}>
-                    <ListItemIcon><LocalOfferTwoToneIcon fontSize={"large"} className="mythicElement"/></ListItemIcon>
-                    <ListItemText primary={"Tags"} />
-                  </ListItem>
-                  <ListItem button className={classes.nested} component={Link} to='/new/eventing' onClick={handleDrawerClose}>
-                    <ListItemIcon><PlayCircleFilledTwoToneIcon fontSize={"large"} className="mythicElement"/></ListItemIcon>
-                    <ListItemText primary={"Eventing"} />
-                  </ListItem>
-                </List>
-              </Collapse>
-                <ListItem button component={Link} to='/new/callbacks' key={"callbacks"} onClick={handleDrawerClose}>
-                  <ListItemIcon><PhoneCallbackIcon fontSize={"large"} className="mythicElement"/></ListItemIcon>
-                  <ListItemText primary={"Active Callbacks"} />
-                </ListItem>
-            </List>
-        <Divider />
-      </StyledDrawer>
-    </>
-  );
-}
-
-function TopBarShortcuts({}){
-  return (
-      <>
-        <MythicStyledTooltip title="C2 Profiles and Payload Types" arrow >
-          <IconButton component={Link} to='/new/payloadtypes'
-                      color="inherit"
-                      size="large" disableFocusRipple={true}
-                      disableRipple={true}>
-            <HeadsetTwoToneIcon fontSize={"large"} className="mythicElement"/>
-          </IconButton>
-        </MythicStyledTooltip>
-        <MythicStyledTooltip title="Payloads" arrow >
-          <IconButton component={Link} to='/new/payloads' color="inherit" disableFocusRipple={true}
-                      disableRipple={true}>
-            <FontAwesomeIcon size={"lg"} icon={faBiohazard} />
-          </IconButton>
-        </MythicStyledTooltip>
-        <MythicStyledTooltip title="Search Operation" arrow >
-          <IconButton component={Link} to='/new/search?tab=callbacks&searchField=Host&search=' color="inherit"  disableFocusRipple={true}
-                      disableRipple={true}>
-            <SearchIcon fontSize={"large"} className="mythicElement"/>
-          </IconButton>
-        </MythicStyledTooltip>
-        <MythicStyledTooltip title="Files" arrow >
-          <IconButton
-              component={Link}
-              to='/new/search?searchField=Filename&tab=files&location=Downloads'
-              color="inherit"
-              disableFocusRipple={true}
-              disableRipple={true}>
-            <AttachmentIcon fontSize={"large"} className="mythicElement"/>
-          </IconButton>
-        </MythicStyledTooltip>
-        <MythicStyledTooltip title="Artifacts" arrow >
-          <IconButton
-              disableFocusRipple={true}
-              disableRipple={true}
-              component={Link}
-              to='/new/search?searchField=Artifact&tab=artifacts'
-              color="inherit">
-            <FingerprintIcon fontSize={"large"} className="mythicElement"/>
-          </IconButton>
-        </MythicStyledTooltip>
-        <MythicStyledTooltip title="Proxies" arrow >
-          <IconButton component={Link} to='/new/search?tab=socks' color="inherit" disableFocusRipple={true}
-                      disableRipple={true}>
-            <FontAwesomeIcon size={"lg"} icon={faSocks} />
-          </IconButton>
-        </MythicStyledTooltip>
-        <MythicStyledTooltip title="Screenshots" arrow >
-          <IconButton
-              component={Link}
-              to='/new/search?searchField=Filename&tab=files&location=Screenshots'
-              color="inherit"
-              disableFocusRipple={true}
-              disableRipple={true}
-          >
-            <CameraAltTwoToneIcon fontSize={"large"} />
-          </IconButton>
-        </MythicStyledTooltip>
-        <MythicStyledTooltip title="Credentials" arrow >
-          <IconButton
-              component={Link}
-              to='/new/search?searchField=Account&tab=credentials'
-              color="inherit"
-              disableFocusRipple={true}
-              disableRipple={true}>
-            <VpnKeyIcon fontSize={"large"} className="mythicElement" />
-          </IconButton>
-        </MythicStyledTooltip>
-        <MythicStyledTooltip title="Active Callbacks" arrow >
-          <IconButton component={Link} to='/new/callbacks' color="inherit"  disableFocusRipple={true}
-                      disableRipple={true}>
-            <PhoneCallbackIcon fontSize={"large"} className="mythicElement"/>
-          </IconButton>
-        </MythicStyledTooltip>
-        <MythicStyledTooltip title="Reporting" arrow  >
-          <IconButton component={Link} to='/new/reporting' color="inherit" disableFocusRipple={true}
-                      disableRipple={true}>
-            <FontAwesomeIcon size={"lg"} icon={faFlagCheckered} />
-          </IconButton>
-        </MythicStyledTooltip>
-        <MythicStyledTooltip title="MITRE ATT&CK" arrow  >
-          <IconButton component={Link} to='/new/mitre' color="inherit" disableFocusRipple={true}
-                      disableRipple={true}>
-            <TableChartTwoToneIcon fontSize={"large"} className="mythicElement"/>
-          </IconButton>
-        </MythicStyledTooltip>
-        <MythicStyledTooltip title="Operation Tags" arrow  >
-          <IconButton component={Link} to='/new/tagtypes' color="inherit"  disableFocusRipple={true}
-                      disableRipple={true}>
-            <LocalOfferTwoToneIcon fontSize={"large"} className="mythicElement"/>
-          </IconButton>
-        </MythicStyledTooltip>
-        <MythicStyledTooltip title="Eventing Scripts" arrow  >
-          <TopAppBarEventingNotifications />
-        </MythicStyledTooltip>
-      </>
-  )
-}
-function TopBarRightShortcuts({me, toggleTheme, serverName}){
-  const theme = useTheme();
-  const feedbackRef = React.useRef(null);
-  const settingsRef = React.useRef(null);
-  const documentationRef = React.useRef(null);
-  const [anchorEl, setAnchorEl] = React.useState(null);
-  const [documentationAnchorEl, setDocumentationAnchorEl] = React.useState(null);
-  const [openFeedbackForm, setOpenFeedbackForm] = React.useState(false);
-  const handleLogout = () => {
-    menuOpen(false);
-    FailedRefresh();
-  }
-  const handleMenu = (event) => {
-    setAnchorEl(event.currentTarget);
-  };
-  const handleClose = (evt) => {
-    setAnchorEl(null);
-  };
-  const handleDocumentationMenu = (event) => {
-    setDocumentationAnchorEl(event.currentTarget);
-  };
-  const handleDocumentationClose = (evt) => {
-    setDocumentationAnchorEl(null);
-  };
-    return (
-        <>
-          <Menu
-              id="menu-appbar"
-              anchorEl={anchorEl}
-              anchorOrigin={{
-                vertical: 'bottom',
-                horizontal: 'right',
-              }}
-              transformOrigin={{
-                vertical: 'top',
-                horizontal: 'center',
-              }}
-              open={Boolean(anchorEl)}
-              onClose={handleClose}
-
-          >
-            <MenuItem disabled divider={true} style={{display: "block"}}>
-              <Typography paragraph={true} variant={"caption"} style={{marginBottom: "0"}}>Server Name:</Typography>
-              <Typography paragraph={true} variant={"body1"} style={{marginBottom: "0", fontWeight: 600}}>{serverName}</Typography>
-            </MenuItem>
-            <MenuItem divider={true} style={{display: "block"}} component={Link} to="/new/settings" onClick={handleClose} name="settings">
-              <Typography paragraph={true} variant="caption" style={{marginBottom: "0"}}>Signed in as:</Typography>
-              <Typography paragraph={true} variant="body1"  style={{marginBottom: "0", fontWeight: 600}}> {me?.user?.username || "" } </Typography>
-            </MenuItem>
-            <MenuItem onClick={handleLogout}>Logout</MenuItem>
-          </Menu>
-          <div style={{display: "inline-flex", justifyContent: "flex-end", float: "right"}}>
-            <IconButton
-                aria-label="feedback"
-                aria-controls="menu-appbar"
-                aria-haspopup="true"
-                onClick={() => setOpenFeedbackForm(true)}
-                ref={feedbackRef}
-                color="inherit"
-                style={{float: "right", }}
-                disableFocusRipple={true}
-                disableRipple={true}>
-              <MythicStyledTooltip title="Send Support Feedback">
-                <ThumbDownTwoTone fontSize={"large"} className="mythicElement" />
-              </MythicStyledTooltip>
-            </IconButton>
-            {openFeedbackForm &&
-                <MythicDialog fullWidth={true} maxWidth="md" open={openFeedbackForm}
-                              onClose={()=>{setOpenFeedbackForm(false);}}
-                              innerDialog={<MythicFeedbackDialog
-                                  title={"Submit Feedback via Webhook"}
-                                  onClose={()=>{setOpenFeedbackForm(false);}} />}
-                />
-            }
-            <IconButton
-                aria-label="documentation links"
-                aria-controls="menu-appbar"
-                aria-haspopup="true"
-                onClick={handleDocumentationMenu}
-                ref={documentationRef}
-                color="inherit"
-                style={{float:"right"}}
-                disableFocusRipple={true}
-                disableRipple={true}>
-              <MythicStyledTooltip title="Help">
-                <HelpTwoToneIcon fontSize={"large"} className="mythicElement"/>
-                <KeyboardArrowDownIcon />
-              </MythicStyledTooltip>
-            </IconButton>
-            <Menu
-                id="menu-appbar"
-                anchorEl={documentationAnchorEl}
-                anchorOrigin={{
-                  vertical: 'bottom',
-                  horizontal: 'right',
-                }}
-                transformOrigin={{
-                  vertical: 'top',
-                  horizontal: 'center',
-                }}
-                open={Boolean(documentationAnchorEl)}
-                onClose={handleDocumentationClose}
-            >
-              <MenuItem component={Link} target="_blank" to="/docs/agents" onClick={handleDocumentationClose}>Agent Documentation</MenuItem>
-              <MenuItem component={Link} target="_blank" to="/docs/wrappers" onClick={handleDocumentationClose}>Wrapper Documentation</MenuItem>
-              <MenuItem component={Link} target="_blank" to="/docs/c2-profiles" onClick={handleDocumentationClose}>C2 Profile Documentation</MenuItem>
-              <MenuItem component={Link} to={{pathname: "https://docs.mythic-c2.net"}} target="_blank" onClick={handleDocumentationClose}>Mythic Documentation</MenuItem>
-            </Menu>
-            <TopAppBarEventLogNotifications />
-            <IconButton
-                aria-label="account of current user"
-                aria-controls="menu-appbar"
-                aria-haspopup="true"
-                onClick={handleMenu}
-                ref={settingsRef}
-                color="inherit"
-                style={{float: "right", }}
-                disableFocusRipple={true}
-                disableRipple={true} >
-              <MythicStyledTooltip title="Settings or Logout">
-                <ManageAccountsTwoToneIcon fontSize={"large"} className="mythicElement" />
-                <KeyboardArrowDownIcon />
-              </MythicStyledTooltip>
-            </IconButton>
-            {theme.palette.mode === 'dark' &&
-                <IconButton
-                    disableFocusRipple={true}
-                    disableRipple={true}
-                    onClick={toggleTheme}
-                    style={{float: "right", paddingRight: "0px", color: '#2f0e67'}}
-                >
-                  <MythicStyledTooltip title="Change to Light Mode">
-                    <DarkModeTwoToneIcon fontSize={"large"} className="mythicElement" />
-                  </MythicStyledTooltip>
-                </IconButton>
-            }
-            {theme.palette.mode === 'light' &&
-                <IconButton
-                    disableFocusRipple={true}
-                    disableRipple={true}
-                    onClick={toggleTheme}
-                    style={{float: "right", paddingRight: "0px", color: '#eacc1b'}}
-                >
-                  <MythicStyledTooltip title="Change to Dark Mode">
-                    <LightModeTwoToneIcon fontSize={"large"} className="mythicElement" />
-                  </MythicStyledTooltip>
-                </IconButton>
-            }
-
-          </div>
-        </>
-    )
-}

MythicReactUI/src/components/TopAppBarEventLogNotifications.js

@@ -2,51 +2,71 @@ import React from 'react';
 import {useSubscription, gql } from '@apollo/client';
 import Badge from '@mui/material/Badge';
 import NotificationsActiveTwoToneIcon from '@mui/icons-material/NotificationsActiveTwoTone';
-import { Link } from 'react-router-dom';
-import { IconButton } from '@mui/material';
-import {snackActions} from './utilities/Snackbar';
-import {MythicStyledTooltip} from "./MythicComponents/MythicStyledTooltip";
+import { useTheme } from '@mui/material/styles';
+import {alertCount} from "../cache";
+import {MeContext} from "./App";
+import {requestCurrentOperationSync} from "./utilities/MythicConnection";
 
 const SUB_Event_Logs = gql`
-subscription OperationAlertCounts{
-  operation_stream(cursor: {initial_value: {updated_at: "1970-01-01"}, ordering: ASC}, batch_size: 1) {
+subscription OperationAlertCounts($operation_id: Int!, $operator_id: Int!){
+  operation_by_pk(id: $operation_id) {
     id
     alert_count
+    operators(where: {id: {_eq: $operator_id}}) {
+      id
+    }
   }
 }
  `;
 
-export function TopAppBarEventLogNotifications(props) {
-  const { loading, error, data } = useSubscription(SUB_Event_Logs, {
-    onError: data => {
-        snackActions.error("Mythic encountered an error getting event log messages: " + data.toString());
-        console.error(data);
-    }
-  });
+export function TopAppBarVerticalEventLogNotifications() {
+    const theme = useTheme();
+    const me = React.useContext(MeContext);
+    const [alerts, setAlerts] = React.useState(alertCount());
+    const syncRequestedForOperation = React.useRef(null);
+    React.useEffect(() => {
+        syncRequestedForOperation.current = null;
+    }, [me?.user?.current_operation_id]);
+    const {error} = useSubscription(SUB_Event_Logs, {
+        variables: {
+            operation_id: me?.user?.current_operation_id || 0,
+            operator_id: me?.user?.user_id || 0,
+        },
+        skip: !me?.user?.current_operation_id || !me?.user?.user_id,
+        onError: data => {
+            console.log("vertical event log error")
+            console.error(data);
+        },
+        onData: ({data}) => {
+            const operation = data.data?.operation_by_pk;
+            if(!operation){
+                return;
+            }
+            if(operation.operators.length === 0 &&
+                syncRequestedForOperation.current !== operation.id){
+                syncRequestedForOperation.current = operation.id;
+                requestCurrentOperationSync();
+                return;
+            }
+            const newAlertCount = operation.alert_count;
+            if(newAlertCount !== alerts){
+                setAlerts(newAlertCount);
+                alertCount(newAlertCount);
+            }
+        }
+    });
 
     return (
-            <MythicStyledTooltip title="Event Feed">
-                <IconButton
-                    color="inherit"
-                    component={Link}
-                    disableFocusRipple={true}
-                    disableRipple={true}
-                    to='/new/EventFeed'
-                    style={{float: "right"}}>
-                    {error ? (
-                        <Badge color="secondary" badgeContent={0}>
-                            <NotificationsActiveTwoToneIcon fontSize={"large"}  />
-                        </Badge>
-                    ) : (
-                        <Badge badgeContent={data?.operation_stream[0]?.alert_count || 0}
-                               color="error" max={99}
-                               sx={{marginTop: "3px"}}
-                        >
-                            <NotificationsActiveTwoToneIcon fontSize={"large"}  />
-                        </Badge>
-                    )}
-                </IconButton>
-            </MythicStyledTooltip>
+            error ? (
+                <Badge color="secondary" badgeContent={"X"}>
+                    <NotificationsActiveTwoToneIcon style={{color: theme.navBarTextIconColor}} fontSize={"medium"}  />
+                </Badge>
+            ) : (
+                <Badge badgeContent={alerts}
+                       color="error" max={99}
+                >
+                    <NotificationsActiveTwoToneIcon style={{color: theme.navBarTextIconColor}} fontSize={"medium"}/>
+                </Badge>
+            )
     );
 }
-

MythicReactUI/src/components/TopAppBarEventingNotifications.js

@@ -1,65 +0,0 @@
-import React from 'react';
-import {useSubscription, gql } from '@apollo/client';
-import Badge from '@mui/material/Badge';
-import PlayCircleFilledTwoToneIcon from '@mui/icons-material/PlayCircleFilledTwoTone';
-import { Link } from 'react-router-dom';
-import { IconButton } from '@mui/material';
-import {snackActions} from './utilities/Snackbar';
-import {MythicStyledTooltip} from "./MythicComponents/MythicStyledTooltip";
-
-const OperationEventingCounts = gql`
-subscription OperationEventingCounts {
-  eventgroupinstance_stream(cursor: {initial_value: {updated_at: "1970-01-01"}, ordering: ASC}, batch_size: 50) {
-    id
-    end_timestamp
-  }
-}
- `;
-
-export function TopAppBarEventingNotifications(props) {
-    const [totalRunning, setTotalRunning] = React.useState([]);
-  const { loading, error, data } = useSubscription(OperationEventingCounts, {
-      onData: ({data}) => {
-        const newRunningCounts = data.data.eventgroupinstance_stream.reduce( (prev, cur) => {
-            let existingIndex = prev.findIndex( e => e.id === cur.id);
-            if(existingIndex >= 0){
-                if(cur.end_timestamp !== null){
-                    prev.splice(existingIndex, 1);
-                }
-                return [...prev];
-            }
-            if(cur.end_timestamp === null){
-                return [...prev, cur];
-            }
-            return [...prev];
-        }, totalRunning);
-        setTotalRunning(newRunningCounts);
-      },
-    onError: data => {
-        snackActions.error("Mythic encountered an error getting eventing counts: " + data.toString());
-        console.error(data);
-    }
-  });
-
-    return (
-            <MythicStyledTooltip title="Eventing Counts">
-                <IconButton
-                    color="inherit"
-                    component={Link}
-                    disableFocusRipple={true}
-                    disableRipple={true}
-                    to='/new/Eventing'>
-                    {error ? (
-                        <Badge color="secondary" badgeContent={0}>
-                            <PlayCircleFilledTwoToneIcon fontSize={"large"}  />
-                        </Badge>
-                    ) : (
-                        <Badge badgeContent={totalRunning.length}  color="warning">
-                            <PlayCircleFilledTwoToneIcon fontSize={"large"}  />
-                        </Badge>
-                    )}
-                </IconButton>
-            </MythicStyledTooltip>
-    );
-}
-

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

@@ -3,7 +3,8 @@ import { gql, useMutation, useSubscription } from '@apollo/client';
 import {BrowserScriptsTable} from './BrowserScriptsTable';
 import {snackActions} from '../../utilities/Snackbar';
 import { Backdrop } from '@mui/material';
-import {CircularProgress} from '@mui/material';
+import {MythicPageBody} from "../../MythicComponents/MythicPageBody";
+import {MythicLoadingState} from "../../MythicComponents/MythicStateDisplay";
 
 
 const SUB_BrowserScripts = gql`
@@ -135,9 +136,9 @@ export function BrowserScripts({me}){
       }
     }, [])
     return (
-    <React.Fragment>
-        <Backdrop open={backdropOpen} style={{zIndex: 2, position: "absolute"}} invisible={false}>
-            <CircularProgress color="inherit" />
+    <MythicPageBody>
+        <Backdrop open={backdropOpen} style={{zIndex: 1300, position: "absolute"}} invisible={false}>
+            <MythicLoadingState compact title="Loading browser scripts" description="Fetching scripts for this operator." sx={{color: "inherit"}} />
         </Backdrop>
         <BrowserScriptsTable
             browserscripts={browserScripts} operation_id={me?.user?.current_operation_id || 0} onToggleActive={onToggleActive}
@@ -145,6 +146,6 @@ export function BrowserScripts({me}){
             onSubmitEdit={onSubmitEdit} onRevert={onRevert} onSubmitNew={onSubmitCreateNewBrowserScript}
         />
 
-    </React.Fragment>
+    </MythicPageBody>
     );
 }

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

@@ -1,54 +1,130 @@
 import React  from 'react';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
-import TableCell from '@mui/material/TableCell';
 import TableContainer from '@mui/material/TableContainer';
 import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
-import Paper from '@mui/material/Paper';
-import Typography from '@mui/material/Typography';
 import { BrowserScriptsTableRow } from './BrowserScriptsTableRow';
-import {useTheme} from '@mui/material/styles';
-import AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined';
-import Button from '@mui/material/Button';
+import AddCircleIcon from '@mui/icons-material/AddCircle';
 import { MythicDialog } from '../../MythicComponents/MythicDialog';
 import {EditScriptDialog} from './EditScriptDialog';
+import {MythicPageHeader, MythicPageHeaderChip} from "../../MythicComponents/MythicPageHeader";
+import {
+    MythicSearchField,
+    MythicTableToolbar,
+    MythicTableToolbarGroup,
+    MythicToolbarButton,
+    MythicToolbarMenuItem,
+    MythicToolbarSelect
+} from "../../MythicComponents/MythicTableToolbar";
+import {MythicTableEmptyState} from "../../MythicComponents/MythicStateDisplay";
+import MythicStyledTableCell from "../../MythicComponents/MythicTableCell";
 
 
 export function BrowserScriptsTable(props){
-    const theme = useTheme();
     const [openNewScriptDialog, setOpenNewScriptDialog] = React.useState(false);
+    const [search, setSearch] = React.useState("");
+    const [statusFilter, setStatusFilter] = React.useState("all");
+    const normalizedSearch = search.trim().toLowerCase();
+    const visibleScripts = React.useMemo(() => {
+        return props.browserscripts.filter((script) => {
+            const matchesStatus = statusFilter === "all" ||
+                (statusFilter === "active" && script.active) ||
+                (statusFilter === "disabled" && !script.active) ||
+                (statusFilter === "modified" && script.user_modified) ||
+                (statusFilter === "default" && !script.user_modified);
+            if(!matchesStatus){
+                return false;
+            }
+            if(normalizedSearch === ""){
+                return true;
+            }
+            return [
+                script.payloadtype?.name,
+                script.command?.cmd,
+                script.author,
+            ].some((value) => (value || "").toLowerCase().includes(normalizedSearch));
+        });
+    }, [normalizedSearch, props.browserscripts, statusFilter]);
+    const scriptCountLabel = props.browserscripts.length === 1 ? "1 script" : `${props.browserscripts.length} scripts`;
+    const visibleCountLabel = visibleScripts.length === 1 ? "1 shown" : `${visibleScripts.length} shown`;
+    const activeCount = props.browserscripts.filter((script) => script.active).length;
+    const activeCountLabel = activeCount === 1 ? "1 active" : `${activeCount} active`;
+    const modifiedCount = props.browserscripts.filter((script) => script.user_modified).length;
+    const hasFilter = normalizedSearch !== "" || statusFilter !== "all";
+    const onChangeSearch = (name, value) => {
+        setSearch(value);
+    }
     return (
-        <React.Fragment>
-            <Paper elevation={5} style={{backgroundColor: theme.pageHeader.main, color: theme.pageHeaderText.main,
-                marginBottom: "5px", marginLeft: "5px", marginRight: "5px"}} variant={"elevation"}>
-                <Typography variant="h3" style={{textAlign: "left", display: "inline-block", marginLeft: "20px"}}>
-                    Browser Scripts
-                </Typography>
-                <Button size="small" onClick={() => setOpenNewScriptDialog(true)} style={{float: "right", marginTop: "10px", marginRight: "30px"}} startIcon={<AddCircleOutlineOutlinedIcon/>} color="primary" variant="contained">New Script</Button>
-                {openNewScriptDialog ? (   
-                    <MythicDialog fullWidth={true} maxWidth="xl" open={openNewScriptDialog}
-                        onClose={()=>{setOpenNewScriptDialog(false);}} 
-                        innerDialog={
-                            <EditScriptDialog me={props.me} onClose={()=>{setOpenNewScriptDialog(false);}} title="Create New Browser Script" new={true} onSubmitEdit={props.onSubmitNew} />
-                        } />    
-                    ) : null
+        <>
+            <MythicPageHeader
+                title={"Browser Scripts"}
+                subtitle={"Manage custom browser script renderers for task output in the current UI."}
+                meta={
+                    <>
+                        <MythicPageHeaderChip label={scriptCountLabel} />
+                        {hasFilter && <MythicPageHeaderChip label={visibleCountLabel} />}
+                        <MythicPageHeaderChip label={activeCountLabel} />
+                        {modifiedCount > 0 && <MythicPageHeaderChip label={`${modifiedCount} modified`} />}
+                    </>
                 }
-            </Paper>
-            <TableContainer className="mythicElement" style={{maxHeight: "90%"}}>
-            <Table stickyHeader={true} size="small" style={{"tableLayout": "fixed", "maxWidth": "100%", "overflow": "scroll"}}>
+                actions={
+                    <MythicToolbarButton variant="contained" colorMode="hover" tone="success" onClick={() => setOpenNewScriptDialog(true)} startIcon={<AddCircleIcon />}>
+                        Script
+                    </MythicToolbarButton>
+                }
+            />
+            {openNewScriptDialog &&
+                <MythicDialog fullWidth={true} maxWidth="xl" open={openNewScriptDialog}
+                    onClose={()=>{setOpenNewScriptDialog(false);}}
+                    innerDialog={
+                        <EditScriptDialog me={props.me} onClose={()=>{setOpenNewScriptDialog(false);}} title="Create New Browser Script" new={true} onSubmitEdit={props.onSubmitNew} />
+                    } />
+            }
+            <MythicTableToolbar variant="search">
+                <MythicTableToolbarGroup grow>
+                    <MythicSearchField
+                        name="Search browser scripts"
+                        placeholder="Search payload, command, or author..."
+                        value={search}
+                        onChange={onChangeSearch}
+                    />
+                </MythicTableToolbarGroup>
+                <MythicTableToolbarGroup>
+                    <MythicToolbarSelect
+                        value={statusFilter}
+                        onChange={(event) => setStatusFilter(event.target.value)}
+                    >
+                        <MythicToolbarMenuItem value="all">All scripts</MythicToolbarMenuItem>
+                        <MythicToolbarMenuItem value="active">Active</MythicToolbarMenuItem>
+                        <MythicToolbarMenuItem value="disabled">Disabled</MythicToolbarMenuItem>
+                        <MythicToolbarMenuItem value="modified">User modified</MythicToolbarMenuItem>
+                        <MythicToolbarMenuItem value="default">Container default</MythicToolbarMenuItem>
+                    </MythicToolbarSelect>
+                </MythicTableToolbarGroup>
+            </MythicTableToolbar>
+            <TableContainer style={{flexGrow: 1, minHeight: 0, overflow: "auto"}}>
+            <Table className="mythic-browser-scripts-table table-fixed max-w-full w-full" stickyHeader={true} size="small">
                 <TableHead>
                     <TableRow>
-                        <TableCell style={{width: "3rem"}}>Edit</TableCell>
-                        <TableCell style={{width: "5rem"}}>Active</TableCell>
-                        <TableCell style={{width: "5rem"}}>Payload</TableCell>
-                        <TableCell style={{width: "20rem"}}>Command</TableCell>
-                        <TableCell style={{width: "12rem"}}> Author</TableCell>
-                        <TableCell style={{textAlign: "left"}}>User Modified?</TableCell>
+                        <MythicStyledTableCell style={{width: "24rem"}}>Script</MythicStyledTableCell>
+                        <MythicStyledTableCell style={{width: "10rem"}}>Author</MythicStyledTableCell>
+                        <MythicStyledTableCell style={{width: "9.5rem"}}>Active</MythicStyledTableCell>
+                        <MythicStyledTableCell style={{width: "12rem"}}>Source</MythicStyledTableCell>
+                        <MythicStyledTableCell style={{width: "4rem", textAlign: "center"}}>Actions</MythicStyledTableCell>
+                        <MythicStyledTableCell className="mythic-browser-script-spacer-cell min-w-0" />
                     </TableRow>
                 </TableHead>
                 <TableBody>
-                {props.browserscripts.map( (op) => (
+                {visibleScripts.length === 0 &&
+                    <MythicTableEmptyState
+                        colSpan={6}
+                        compact
+                        title={props.browserscripts.length === 0 ? "No browser scripts" : "No browser scripts match"}
+                        description={props.browserscripts.length === 0 ? "Create or import browser scripts to customize task output rendering." : "Try changing the search text or status filter."}
+                    />
+                }
+                {visibleScripts.map( (op) => (
                     <BrowserScriptsTableRow
                         me={props.me}
                         operation_id={props.operation_id} onToggleActive={props.onToggleActive}
@@ -59,9 +135,8 @@ export function BrowserScriptsTable(props){
                 ))}
                 </TableBody>
             </Table>
-        </TableContainer>
-        </React.Fragment>
+            </TableContainer>
+        </>
         
     )
 }
-

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

@@ -1,13 +1,15 @@
+import {MythicActionButton} from "../../MythicComponents/MythicActionButton";
 import React from 'react';
-import { Switch} from '@mui/material';
-import TableCell from '@mui/material/TableCell';
+import Box from '@mui/material/Box';
+import {Switch} from '@mui/material';
 import TableRow from '@mui/material/TableRow';
 import { MythicDialog } from '../../MythicComponents/MythicDialog';
 import {EditScriptDialog} from './EditScriptDialog';
-import SettingsIcon from '@mui/icons-material/Settings';
-import IconButton from '@mui/material/IconButton';
+import EditIcon from '@mui/icons-material/Edit';
 import {MythicStyledTooltip} from "../../MythicComponents/MythicStyledTooltip";
 import {MythicAgentSVGIcon} from "../../MythicComponents/MythicAgentSVGIcon";
+import MythicStyledTableCell from "../../MythicComponents/MythicTableCell";
+import {MythicChip} from "../../MythicComponents/MythicChip";
 
 export function BrowserScriptsTableRow(props){
     const [openEdit, setOpenEdit] = React.useState(false);
@@ -22,27 +24,44 @@ export function BrowserScriptsTableRow(props){
     }
     return (
         <React.Fragment>
-            <TableRow key={"payload" + props.id} hover>
-                <TableCell >
-                    <IconButton size="small" onClick={()=>{setOpenEdit(true);}} color="info" variant="contained"><SettingsIcon color="info" /></IconButton>
-                </TableCell>
-                <TableCell >
-                    <Switch
-                        checked={props.active}
-                        onChange={onToggleActive}
-                        color="info"
-                        inputProps={{ 'aria-label': 'checkbox', "track": "white" }}
-                        name="Active"
-                      />
-                </TableCell>
-                <TableCell>
-                    <MythicStyledTooltip title={props.payloadtype.name}>
-                        <MythicAgentSVGIcon payload_type={props.payloadtype.name} style={{width: "35px", height: "35px"}} />
-                    </MythicStyledTooltip>
-                </TableCell>
-                <TableCell>{props.command.cmd}</TableCell>
-                <TableCell>{props.author}</TableCell>
-                <TableCell>{props.user_modified ? "User Modified" : "" } </TableCell>
+            <TableRow className={props.active ? "" : "mythic-browser-script-row-disabled"} key={"payload" + props.id} hover>
+                <MythicStyledTableCell>
+                    <Box className="mythic-browser-script-script-cell items-center flex gap-5 min-w-0">
+                        <MythicStyledTooltip title={props.payloadtype.name}>
+                            <Box className="mythic-browser-script-payload-icon items-center inline-flex flex-none justify-center rounded bg-neutral-1 border-subtle">
+                                <MythicAgentSVGIcon payload_type={props.payloadtype.name} style={{width: "32px", height: "32px"}} />
+                            </Box>
+                        </MythicStyledTooltip>
+                        <Box className="mythic-browser-script-script-copy flex flex-column gap-1 min-w-0">
+                            <Box className="mythic-browser-script-command-name text-sm font-750 leading-125 truncate text-primary whitespace-nowrap">{props.command.cmd}</Box>
+                            <Box className="mythic-browser-script-payload-name text-xs font-650 leading-125 truncate text-muted whitespace-nowrap">{props.payloadtype.name}</Box>
+                        </Box>
+                    </Box>
+                </MythicStyledTableCell>
+                <MythicStyledTableCell>{props.author}</MythicStyledTableCell>
+                <MythicStyledTableCell>
+                    <Box className="mythic-browser-script-active-cell items-center flex gap-3 min-w-0">
+                        <Switch
+                            checked={props.active}
+                            onChange={onToggleActive}
+                            color="success"
+                            inputProps={{ 'aria-label': 'Toggle browser script active state', "track": "white" }}
+                            name="Active"
+                            size="small"
+                          />
+                    </Box>
+                </MythicStyledTableCell>
+                <MythicStyledTableCell>
+                    <MythicChip label={props.user_modified ? "User modified" : "Container default"} tone={props.user_modified ? "warning" : "secondary"} />
+                </MythicStyledTableCell>
+                <MythicStyledTableCell style={{textAlign: "center"}}>
+                    <Box className="items-center flex flex-wrap gap-3 flex-nowrap mythic-browser-script-actions justify-center">
+                        <MythicActionButton iconOnly appearance="raised" colorMode="hover" tone="info" size="small" onClick={()=>{setOpenEdit(true);}}>
+                            <EditIcon fontSize="small" />
+                        </MythicActionButton>
+                    </Box>
+                </MythicStyledTableCell>
+                <MythicStyledTableCell className="mythic-browser-script-spacer-cell min-w-0" />
 
                 {openEdit &&
                     <MythicDialog fullWidth={true} maxWidth="xl" open={openEdit} 
@@ -56,4 +75,3 @@ export function BrowserScriptsTableRow(props){
         </React.Fragment>
         )
 }
-

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

@@ -1,6 +1,7 @@
+import {MythicActionButton} from "../../MythicComponents/MythicActionButton";
 import React, {useEffect, useRef} from 'react';
-import Button from '@mui/material/Button';
-import DialogActions from '@mui/material/DialogActions';
+import Box from '@mui/material/Box';
+import Collapse from '@mui/material/Collapse';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 import AceEditor from 'react-ace';
@@ -14,11 +15,22 @@ 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 Tooltip from '@mui/material/Tooltip';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 import Split from 'react-split';
 import {TaskDisplay} from "../Callbacks/TaskDisplay";
+import {MythicChip} from "../../MythicComponents/MythicChip";
 import {taskingDataFragment} from '../Callbacks/CallbackMutations'
-
+import {
+    MythicDialogBody,
+    MythicDialogButton,
+    MythicDialogFooter,
+    MythicFormField,
+    MythicFormGrid,
+    MythicFormNote
+} from "../../MythicComponents/MythicDialogLayout";
+import {MythicEmptyState, MythicLoadingState} from "../../MythicComponents/MythicStateDisplay";
 
 
 const getCommandsAndPayloadTypesQuery = gql`
@@ -42,6 +54,38 @@ query getAvailableTasks($command_id: Int!){
 }
 `;
 
+const BROWSER_SCRIPT_WORKBENCH_SPLIT_KEY = "browserScriptWorkbenchSplitSizes";
+const BROWSER_SCRIPT_TOP_SPLIT_KEY = "browserScriptTopSplitSizes";
+const defaultWorkbenchSplitSizes = [48, 52];
+const defaultTopSplitSizes = [68, 32];
+
+const getStoredSplitSizes = (storageKey, fallback) => {
+    try {
+        if(typeof window === "undefined"){
+            return fallback;
+        }
+        const storedSizes = window.localStorage.getItem(storageKey);
+        if(!storedSizes){
+            return fallback;
+        }
+        const parsedSizes = JSON.parse(storedSizes);
+        if(!Array.isArray(parsedSizes) || parsedSizes.length !== fallback.length || !parsedSizes.every(Number.isFinite)){
+            return fallback;
+        }
+        return parsedSizes;
+    } catch (error) {
+        return fallback;
+    }
+}
+
+const storeSplitSizes = (storageKey, sizes) => {
+    try {
+        window.localStorage.setItem(storageKey, JSON.stringify(sizes));
+    } catch (error) {
+        // Best effort only; layout still works without persisted sizes.
+    }
+}
+
 export function EditScriptDialog(props) {
     const theme = useTheme();
     const [script, setScript] = React.useState("");
@@ -49,12 +93,19 @@ export function EditScriptDialog(props) {
     const [selectedCommand, setSelectedCommand] = React.useState('');
     const [payloadTypeCmdOptions, setPayloadTypeCmdOptions] = React.useState([]);
     const [commandOptions, setCommandOptions] = React.useState([]);
-    const inputPTRef = useRef(null); 
-    const inputCMDRef = useRef(null);
-    const inputTaskRef = useRef(null);
     const [availableTasks, setAvailableTasks] = React.useState([]);
     const [selectedTask, setSelectedTask] = React.useState('');
-    useQuery(getCommandsAndPayloadTypesQuery, {
+    const [workbenchSplitSizes, setWorkbenchSplitSizes] = React.useState(() => getStoredSplitSizes(BROWSER_SCRIPT_WORKBENCH_SPLIT_KEY, defaultWorkbenchSplitSizes));
+    const [topSplitSizes, setTopSplitSizes] = React.useState(() => getStoredSplitSizes(BROWSER_SCRIPT_TOP_SPLIT_KEY, defaultTopSplitSizes));
+    const [targetOpen, setTargetOpen] = React.useState(() => props.new === true);
+    const selectedPayloadTypeOption = React.useMemo(() => {
+        return payloadTypeCmdOptions.find((payloadType) => payloadType.id === selectedPayloadType);
+    }, [payloadTypeCmdOptions, selectedPayloadType]);
+    const selectedCommandOption = React.useMemo(() => {
+        return commandOptions.find((command) => command.id === selectedCommand);
+    }, [commandOptions, selectedCommand]);
+    const taskSelectorValue = selectedTask || "";
+    const {loading: targetLoading} = useQuery(getCommandsAndPayloadTypesQuery, {
       onCompleted: data => {
         setPayloadTypeCmdOptions(data.payloadtype);
         if(props.payload_type_id !== undefined){
@@ -66,11 +117,8 @@ export function EditScriptDialog(props) {
         }
         if(props.command_id !== undefined){
           setSelectedCommand(props.command_id);
-          for(let i = 0; i < data.payloadtype.length; i++){
-            if(props.payload_type_id === data.payloadtype[i].id){
-              setCommandOptions(data.payloadtype[i].commands)
-            }
-          }
+          const payloadType = data.payloadtype.find((payloadType) => payloadType.id === props.payload_type_id);
+          setCommandOptions(payloadType?.commands || []);
         }else{
           if(data.payloadtype.length > 0){
             if(data.payloadtype[0].commands.length > 0){
@@ -84,11 +132,13 @@ export function EditScriptDialog(props) {
 
       }
     });
-    const [getAvailableTasks] = useLazyQuery(getExistingTasksForCommand, {
+    const [getAvailableTasks, {loading: tasksLoading}] = useLazyQuery(getExistingTasksForCommand, {
         onCompleted: data => {
             setAvailableTasks(data.task);
             if(data.task.length > 0){
                 setSelectedTask(data.task[0]);
+            }else{
+                setSelectedTask('');
             }
         },
         onError: data => {
@@ -102,9 +152,12 @@ export function EditScriptDialog(props) {
     useEffect( () => {
         if(selectedCommand !== ""){
             getAvailableTasks({variables: {command_id: selectedCommand}})
+        }else{
+            setAvailableTasks([]);
+            setSelectedTask('');
         }
 
-    }, [selectedCommand]);
+    }, [selectedCommand, getAvailableTasks]);
     useEffect( () => {
         if(props.script !== undefined){
           try{
@@ -137,9 +190,12 @@ export function EditScriptDialog(props) {
     }
     const onChangeSelectedPayloadType = (event) => {
       setSelectedPayloadType(event.target.value);
-      const cmds = payloadTypeCmdOptions.filter( (p) => p.id === event.target.value);
-      setCommandOptions(cmds[0].commands);
-      setSelectedCommand(cmds[0].commands[0].id);
+      const selectedPayload = payloadTypeCmdOptions.find( (p) => p.id === event.target.value);
+      const cmds = selectedPayload?.commands || [];
+      setCommandOptions(cmds);
+      setSelectedCommand(cmds[0]?.id || '');
+      setAvailableTasks([]);
+      setSelectedTask('');
     }
     const onChangeTask = (event) => {
         setSelectedTask(event.target.value);
@@ -148,34 +204,48 @@ export function EditScriptDialog(props) {
       setSelectedCommand(event.target.value);
     }
     const onLoad = (editor) => {
-        // Your editor options comes here
-        editor.on('change', (arg, activeEditor) => {
-            editorRef.current = activeEditor;
-            editor.removeEventListener('change');
-            editorRef.current.resize();
-        });
+        editorRef.current = editor;
+        requestAnimationFrame(() => editor.resize());
     }
     const onOutputLoad = (editor) => {
-        // Your editor options comes here
-        editor.on('change', (arg, activeEditor) => {
-            outputRef.current = activeEditor;
-            editor.removeEventListener('change');
-            outputRef.current.resize();
-        });
+        outputRef.current = editor;
+        requestAnimationFrame(() => editor.resize());
     }
     React.useEffect( () => {
-
-        var logBackup = console.log;
-        console.log = function(msg) {
-            logStreamRef.current += "\n" + msg;
-            logBackup.apply(msg);
-            setLogOutput(logStreamRef.current)
+        const logBackup = console.log;
+        const formatConsoleArg = (arg) => {
+            if(typeof arg === "string"){
+                return arg;
+            }
+            try {
+                return JSON.stringify(arg, null, 2);
+            } catch (error) {
+                return String(arg);
+            }
+        };
+        console.log = function(...args) {
+            const message = args.map(formatConsoleArg).join(" ");
+            logStreamRef.current += "\n" + message;
+            setLogOutput(logStreamRef.current);
+            logBackup.apply(console, args);
+        };
+        return () => {
+            console.log = logBackup;
         };
-
-
     }, []);
 
-    const onDragging = () => {
+    React.useEffect(() => {
+        requestAnimationFrame(() => {
+            if(editorRef.current){
+                editorRef.current.resize();
+            }
+            if(outputRef.current){
+                outputRef.current.resize();
+            }
+        });
+    }, [selectedTask, tasksLoading]);
+
+    const resizeEditors = () => {
         if(editorRef.current){
             editorRef.current.resize();
         }
@@ -183,128 +253,227 @@ export function EditScriptDialog(props) {
             outputRef.current.resize();
         }
     }
+    const onWorkbenchDragEnd = (sizes) => {
+        setWorkbenchSplitSizes(sizes);
+        storeSplitSizes(BROWSER_SCRIPT_WORKBENCH_SPLIT_KEY, sizes);
+        resizeEditors();
+    }
+    const onTopDragEnd = (sizes) => {
+        setTopSplitSizes(sizes);
+        storeSplitSizes(BROWSER_SCRIPT_TOP_SPLIT_KEY, sizes);
+        resizeEditors();
+    }
+    const onToggleTargetOpen = () => {
+        setTargetOpen((current) => !current);
+    }
+    const selectedTaskLabel = (task) => {
+        return `${task.command_name} / ${task.display_id} / ${task.display_params}`;
+    }
   return (
     <React.Fragment>
-        <DialogTitle >
-          {props.title ? props.title : "Edit " + props.author + "'s BrowserScript Code"}
-          </DialogTitle>
-        <DialogContent dividers={true} style={{height: `calc(100vh)`, display: "flex", flexDirection: "column", width: "100%"}}>
-            <div style={{display: "flex"}}>
-                <FormControl style={{width: "50%"}}>
-                    <InputLabel ref={inputPTRef}>Payload Type</InputLabel>
-                    <Select
-                        labelId="demo-dialog-select-label"
-                        id="demo-dialog-select"
-                        value={selectedPayloadType}
-                        onChange={onChangeSelectedPayloadType}
-                        input={<Input style={{width: "100%"}}/>}
+        <DialogTitle>
+            <Box className="mythic-dialog-title-row items-center flex flex-wrap gap-5 justify-between min-w-0">
+                <Box component="span">{props.title ? props.title : "Edit " + props.author + "'s BrowserScript Code"}</Box>
+            </Box>
+        </DialogTitle>
+        <DialogContent className="mythic-browser-script-dialog-content flex flex-column overflow-hidden" dividers={true}>
+            <MythicDialogBody className="mythic-browser-script-dialog-body flex-fill min-h-0 overflow-hidden">
+                <Box className={`mythic-browser-script-target-panel rounded bg-surface-raised border-subtle shadow-1${targetOpen ? " mythic-browser-script-target-panel-open" : ""} overflow-hidden`}>
+                    <Box className="mythic-browser-script-target-summary items-center flex gap-5 justify-between">
+                        <Box className="mythic-browser-script-target-copy items-center flex gap-5 min-w-0">
+                            <Box component="span" className="mythic-browser-script-target-label text-xs font-800 leading-100 flex-none text-muted">Script Target</Box>
+                            <Box className="mythic-browser-script-target-chips items-center flex flex-wrap gap-3 min-w-0">
+                                <MythicChip size="small" label={selectedPayloadTypeOption?.name || (targetLoading ? "Loading payload types" : "No payload type")} />
+                                <MythicChip size="small" label={selectedCommandOption?.cmd || "No command"} />
+                            </Box>
+                        </Box>
+                        <Tooltip title={targetOpen ? "Collapse target settings" : "Edit target settings"}>
+                            <MythicActionButton iconOnly
+                                aria-expanded={targetOpen}
+                                aria-label={targetOpen ? "Collapse target settings" : "Edit target settings"}
+                                appearance="raised" colorMode="hover" tone="primary"
+                                onClick={onToggleTargetOpen}
+                                size="small"
+                            >
+                                {targetOpen ? <KeyboardArrowUpIcon fontSize="small" /> : <KeyboardArrowDownIcon fontSize="small" />}
+                            </MythicActionButton>
+                        </Tooltip>
+                    </Box>
+                    <Collapse
+                        in={targetOpen}
+                        onEntered={resizeEditors}
+                        onExited={resizeEditors}
+                        timeout="auto"
+                        unmountOnExit
                     >
-                        {payloadTypeCmdOptions.map( (opt) => (
-                            <MenuItem value={opt.id} key={"payloadtype" + opt.id}>{opt.name}</MenuItem>
-                        ) )}
-                    </Select>
-                </FormControl>
-                <FormControl style={{width: "50%", paddingBottom: "10px"}}>
-                    <InputLabel ref={inputCMDRef}>Command</InputLabel>
-                    <Select
-                        labelId="demo-dialog-select-label"
-                        id="demo-dialog-select"
-                        value={selectedCommand}
-                        onChange={onChangeSelectedCommand}
-                        input={<Input style={{width: "100%"}}/>}
+                        <Box className="mythic-browser-script-target-details p-5 flex flex-column gap-4 bg-surface-muted">
+                            <MythicFormGrid minWidth="16rem">
+                                <MythicFormField label="Payload Type">
+                                    <FormControl fullWidth size="small">
+                                        <InputLabel id="browser-script-payload-type-label">Payload Type</InputLabel>
+                                        <Select
+                                            label="Payload Type"
+                                            labelId="browser-script-payload-type-label"
+                                            value={selectedPayloadType}
+                                            onChange={onChangeSelectedPayloadType}
+                                            disabled={targetLoading}
+                                        >
+                                            {payloadTypeCmdOptions.map( (opt) => (
+                                                <MenuItem value={opt.id} key={"payloadtype" + opt.id}>{opt.name}</MenuItem>
+                                            ) )}
+                                        </Select>
+                                    </FormControl>
+                                </MythicFormField>
+                                <MythicFormField label="Command">
+                                    <FormControl fullWidth size="small">
+                                        <InputLabel id="browser-script-command-label">Command</InputLabel>
+                                        <Select
+                                            label="Command"
+                                            labelId="browser-script-command-label"
+                                            value={selectedCommand}
+                                            onChange={onChangeSelectedCommand}
+                                            disabled={targetLoading || commandOptions.length === 0}
+                                        >
+                                            {commandOptions.map( (opt) => (
+                                                <MenuItem value={opt.id} key={"command" + opt.id}>{opt.cmd}</MenuItem>
+                                            ) )}
+                                        </Select>
+                                    </FormControl>
+                                </MythicFormField>
+                            </MythicFormGrid>
+                            <MythicFormNote>
+                                Use Save for Testing to update the script without closing the editor. Select an already executed matching task below, then collapse and re-expand that task if you need it to reload the updated renderer.
+                            </MythicFormNote>
+                        </Box>
+                    </Collapse>
+                </Box>
+                <Split
+                    className="mythic-browser-script-workbench flex flex-column flex-fill min-h-0 min-w-0 w-full"
+                    direction="vertical"
+                    gutterSize={8}
+                    minSize={[210, 300]}
+                    onDrag={resizeEditors}
+                    onDragEnd={onWorkbenchDragEnd}
+                    sizes={workbenchSplitSizes}
+                >
+                    <Split
+                        className="mythic-browser-script-top-split flex min-h-0 min-w-0 w-full"
+                        gutterSize={8}
+                        minSize={[320, 220]}
+                        onDrag={resizeEditors}
+                        onDragEnd={onTopDragEnd}
+                        sizes={topSplitSizes}
                     >
-                        {commandOptions.map( (opt) => (
-                            <MenuItem value={opt.id} key={"command" + opt.id}>{opt.cmd}</MenuItem>
-                        ) )}
-                    </Select>
-                </FormControl>
-            </div>
-            <p>
-                <b>To test locally</b>: Make your changes in the top left code box. Any <b>console.log</b> entries will appear in the box to the right when executed.
-                Click <b>Save for Testing</b> to finalize your changes. Make sure to select an already executed task that matches this command from the bottom.
-                You will need to collapse and re-expand the task to pull in your updated changes.
-            </p>
-            <div style={{display: "flex", width: "100%", flexGrow: 1}}>
-                <Split direction="vertical" style={{height: "100%", width: "100%"}} sizes={[30, 70]} onDrag={onDragging} >
-                    <Split style={{display: "flex"}} sizes={[70, 30]} onDrag={onDragging} >
-                        <div className="bg-gray-light">
-                            <AceEditor
-                                mode="javascript"
-                                theme={theme.palette.mode === 'dark' ? 'monokai' : 'github'}
-                                width="100%"
-                                onLoad={onLoad}
-                                height="100%"
-                                value={script}
-                                focus={true}
-                                onChange={onChange}
-                                setOptions={{
-                                    useWorker: false
-                                }}
-                            />
+                        <div className="mythic-browser-script-pane flex flex-column mythic-browser-script-editor-pane h-full min-h-0 min-w-0 overflow-hidden rounded bg-surface-raised border-subtle">
+                            <div className="mythic-browser-script-pane-header text-xs font-800 items-center flex flex-none justify-between bg-surface-muted border-b-subtle text-primary">
+                                <span>Script Code</span>
+                                <span>JavaScript</span>
+                            </div>
+                            <div className="mythic-browser-script-editor-frame flex-fill min-h-0 min-w-0">
+                                <AceEditor
+                                    mode="javascript"
+                                    theme={theme.palette.mode === 'dark' ? 'monokai' : 'github'}
+                                    width="100%"
+                                    onLoad={onLoad}
+                                    height="100%"
+                                    value={script}
+                                    focus={true}
+                                    onChange={onChange}
+                                    setOptions={{
+                                        displayIndentGuides: true,
+                                        fontSize: 13,
+                                        showPrintMargin: false,
+                                        tabSize: 4,
+                                        useWorker: false,
+                                    }}
+                                />
+                            </div>
                         </div>
-                        <div className="bg-gray-light"   >
-                            <AceEditor
-                                mode="javascript"
-                                theme={theme.palette.mode === 'dark' ? 'monokai' : 'github'}
-                                width="100%"
-                                onLoad={onOutputLoad}
-                                height="100%"
-                                value={logOutput}
-                                focus={false}
-                                onChange={onChange}
-                                setOptions={{
-                                    useWorker: false
-                                }}
-                            />
+                        <div className="mythic-browser-script-pane flex flex-column mythic-browser-script-console-pane h-full min-h-0 min-w-0 overflow-hidden rounded bg-surface-raised border-subtle">
+                            <div className="mythic-browser-script-pane-header text-xs font-800 items-center flex flex-none justify-between bg-surface-muted border-b-subtle text-primary">
+                                <span>Console Output</span>
+                                <span>console.log</span>
+                            </div>
+                            <div className="mythic-browser-script-editor-frame flex-fill min-h-0 min-w-0">
+                                <AceEditor
+                                    mode="javascript"
+                                    theme={theme.palette.mode === 'dark' ? 'monokai' : 'github'}
+                                    width="100%"
+                                    onLoad={onOutputLoad}
+                                    height="100%"
+                                    value={logOutput}
+                                    focus={false}
+                                    readOnly
+                                    setOptions={{
+                                        fontSize: 12,
+                                        highlightActiveLine: false,
+                                        showGutter: false,
+                                        showPrintMargin: false,
+                                        tabSize: 4,
+                                        useWorker: false,
+                                    }}
+                                />
+                            </div>
                         </div>
                     </Split>
-                    <div className="bg-gray-light" >
-                        <FormControl style={{width: "100%"}}>
-                            <InputLabel ref={inputTaskRef} style={{paddingTop: "10px"}}>Test Script With Task</InputLabel>
-                            <Select
-                                labelId="demo-dialog-select-label"
-                                id="demo-dialog-select"
-                                value={selectedTask}
-                                onChange={onChangeTask}
-                                input={<Input style={{width: "100%"}}/>}
-                            >
-                                {availableTasks.map( (opt) => (
-                                    <MenuItem value={opt} key={"task" + opt.id}>{opt.command_name + " / " + opt.display_id + " / " + opt.display_params}</MenuItem>
-                                ) )}
-                            </Select>
-                        </FormControl>
-                        {selectedTask !== "" &&
-                            <TaskDisplay me={props.me} task={selectedTask} command_id={selectedTask.command == null ? 0 : selectedTask.command.id} />
-                        }
+                    <div className="mythic-browser-script-pane flex flex-column mythic-browser-script-preview-pane h-full min-h-0 min-w-0 overflow-hidden rounded bg-surface-raised border-subtle">
+                        <div className="mythic-browser-script-pane-header text-xs font-800 items-center flex flex-none justify-between bg-surface-muted border-b-subtle text-primary">
+                            <span>Test Preview</span>
+                            <span>{availableTasks.length === 1 ? "1 task" : `${availableTasks.length} tasks`}</span>
+                        </div>
+                        <div className="mythic-browser-script-preview-controls bg-header flex-none border-b-subtle">
+                            <FormControl fullWidth size="small">
+                                <InputLabel id="browser-script-test-task-label">Test Script With Task</InputLabel>
+                                <Select
+                                    label="Test Script With Task"
+                                    labelId="browser-script-test-task-label"
+                                    value={taskSelectorValue}
+                                    onChange={onChangeTask}
+                                    disabled={tasksLoading || availableTasks.length === 0}
+                                    onOpen={resizeEditors}
+                                    renderValue={(task) => task ? selectedTaskLabel(task) : ""}
+                                >
+                                    {availableTasks.map( (opt) => (
+                                        <MenuItem value={opt} key={"task" + opt.id}>{selectedTaskLabel(opt)}</MenuItem>
+                                    ) )}
+                                </Select>
+                            </FormControl>
+                        </div>
+                        <div className="mythic-browser-script-preview-frame p-4 flex-fill min-h-0 min-w-0 overflow-auto">
+                            {tasksLoading ? (
+                                <MythicLoadingState compact title="Loading test tasks" description="Fetching previous tasks for this command." />
+                            ) : selectedTask !== "" ? (
+                                <TaskDisplay me={props.me} task={selectedTask} command_id={selectedTask.command == null ? 0 : selectedTask.command.id} />
+                            ) : (
+                                <MythicEmptyState compact title="No matching tasks" description="Run this command at least once to preview this browser script against task output." />
+                            )}
+                        </div>
                     </div>
                 </Split>
-            </div>
+            </MythicDialogBody>
         </DialogContent>
-        <DialogActions>
-          <Button onClick={props.onClose} variant="contained" color="primary">
+        <MythicDialogFooter>
+          <MythicDialogButton onClick={props.onClose}>
             Close
-          </Button>
+          </MythicDialogButton>
           {props.new ? (
-            <Button onClick={onSubmit} variant="contained" color="success">
+            <MythicDialogButton disabled={selectedCommand === "" || selectedPayloadType === ""} intent="primary" onClick={onSubmit}>
               Create
-          </Button>
+          </MythicDialogButton>
           ) : (
             <React.Fragment>
-              <Button onClick={onRevert} variant="contained" color="warning">
+              <MythicDialogButton intent="warning" onClick={onRevert}>
                 Revert
-              </Button>
-                <Button onClick={onTest} variant="contained" color="info">
+              </MythicDialogButton>
+                <MythicDialogButton intent="info" disabled={selectedCommand === "" || selectedPayloadType === ""} onClick={onTest}>
                     Save For Testing
-                </Button>
-              <Button onClick={onSubmit} variant="contained" color="success">
+                </MythicDialogButton>
+              <MythicDialogButton disabled={selectedCommand === "" || selectedPayloadType === ""} intent="primary" onClick={onSubmit}>
                 Save and Exit
-              </Button>
+              </MythicDialogButton>
             </React.Fragment>
           )}
-          
-        </DialogActions>
+        </MythicDialogFooter>
   </React.Fragment>
   );
 }
-
-

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

@@ -1,6 +1,4 @@
-import React, {useEffect} from 'react';
-import Button from '@mui/material/Button';
-import DialogActions from '@mui/material/DialogActions';
+import React from 'react';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 import List from '@mui/material/List';
@@ -8,10 +6,14 @@ import ListItem from '@mui/material/ListItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import Checkbox from '@mui/material/Checkbox';
-import CardHeader from '@mui/material/CardHeader';
 import {gql, useQuery} from '@apollo/client';
-import { CardContent } from '@mui/material';
-import {classes, StyledButton, StyledDivider} from '../../MythicComponents/MythicTransferList';
+import {MythicActionButton} from '../../MythicComponents/MythicActionButton';
+import {
+    MythicDialogButton,
+    MythicDialogBody,
+    MythicDialogFooter,
+    MythicDialogSection
+} from '../../MythicComponents/MythicDialogLayout';
 
 const getCommandsQuery = gql`
 query GetCallbackDetails($callback_id: Int!) {
@@ -29,14 +31,14 @@ query GetCallbackDetails($callback_id: Int!) {
     payload {
       payloadtype {
         name
-        commands {
+        commands(where: {deleted: {_eq: false}}) {
           cmd
           id
         }
       }
     }
   }
-  command(where: {payloadtype: {agent_type: {_eq: "command_augment"}}}){
+  command(where: {deleted: {_eq: false}, payloadtype: {agent_type: {_eq: "command_augment"}}}){
     cmd
     id
     payloadtype {
@@ -45,21 +47,45 @@ query GetCallbackDetails($callback_id: Int!) {
   }
 }
 `;
-
+const CustomListElement = React.memo(({valueObj, handleToggle}) => {
+    return (
+        <ListItem style={{padding: 0}} key={valueObj.display_value} role="listitem" button
+                  onClick={() => handleToggle(valueObj)}>
+            <ListItemIcon>
+                <Checkbox
+                    checked={valueObj.checked}
+                    disableRipple
+                    inputProps={{'aria-labelledby': valueObj.label}}
+                />
+            </ListItemIcon>
+            <ListItemText id={valueObj.label} primary={valueObj.display_value}/>
+        </ListItem>
+    )
+});
+const CustomList = ({title, items, handleToggle}) => {
+    const renderedList = React.useMemo( () => {
+        return items.map((valueObj) => (
+                <CustomListElement key={valueObj.display_value} valueObj={valueObj} handleToggle={handleToggle} />
+            ))
+    }, [items, handleToggle]);
+    return (
+        <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%"}}>
+                    {renderedList}
+                </List>
+            </div>
+        </div>
+        )
+};
 export function AddRemoveCallbackCommandsDialog(props) {
-
-    const [checked, setChecked] = React.useState([]);
     const [left, setLeft] = React.useState([]);
-    const [originalLeft, setOriginalLeft] = React.useState([]);
     const [originalRight, setOriginalRight] = React.useState([]);
     const [right, setRight] = React.useState([]);
-    const [leftTitle, setLeftTitle] = React.useState("Commands Not Included");
-    const [rightTitle, setRightTitle] = React.useState("Commands Included");
-    const leftChecked = intersection(checked, left);
-    const rightChecked = intersection(checked, right);
-    const compareElements = (a, b) => {
-        return a.cmd === b.cmd && a.payloadtype.name === b.payloadtype.name;
-    }
+    const leftTitle = "Commands Not Included";
+    const rightTitle = "Commands Included";
+
     useQuery(getCommandsQuery, {variables: {callback_id: props.callback_id},
       fetchPolicy: "no-cache",
       onCompleted: (data) => {
@@ -67,10 +93,9 @@ export function AddRemoveCallbackCommandsDialog(props) {
             return {...c, payloadtype: {name: data.callback_by_pk.payload.payloadtype.name}}
         })
         originalLeftFromQuery = [...originalLeftFromQuery, ...data.command];
-        setOriginalLeft(originalLeftFromQuery);
         setOriginalRight(data.callback_by_pk.loadedcommands);
 
-        const leftData = originalLeftFromQuery.reduce( (prev, cur) => {
+        let leftData = originalLeftFromQuery.reduce( (prev, cur) => {
           if( data.callback_by_pk.loadedcommands.filter(c => c.command.cmd === cur.cmd && c.command.payloadtype.name === cur.payloadtype.name).length === 0){
             return [...prev, cur];
           } else {
@@ -79,35 +104,46 @@ export function AddRemoveCallbackCommandsDialog(props) {
         }, []);
 
         leftData.sort( (a,b) => a.cmd < b.cmd ? -1 : 1);
+        leftData = leftData.map( c => {return {...c,
+            checked: false,
+            display_value: c.cmd + " (" + c?.payloadtype?.name + ")",
+            label: `transfer-list-item-${c.cmd + " (" + c?.payloadtype?.name + ")"}-label`
+        }});
         setLeft(leftData);
-        const rightData = data.callback_by_pk.loadedcommands.map( c => c.command);
+        let rightData = data.callback_by_pk.loadedcommands.map( c => c.command);
         rightData.sort( (a,b) => a.cmd < b.cmd ? -1 : 1);
+          rightData = rightData.map( c => {return {...c,
+          checked: false,
+          display_value: c.cmd + " (" + c?.payloadtype?.name + ")",
+          label: `transfer-list-item-${c.cmd + " (" + c?.payloadtype?.name + ")"}-label`
+      }});
         setRight(rightData);
       },
       onError: (data) => {
 
       }
     })
-    function not(a, b) {
-      return a.filter((value) => b.indexOf(value) === -1);
-    }
-    
-    function intersection(a, b) {
-      return a.filter((value) => b.indexOf(value) !== -1);
-    }
-    const handleToggle = (value) => () => {
-      let currentIndex = -1;
-        currentIndex = checked.indexOf(value);
-      
-      const newChecked = [...checked];
 
-      if (currentIndex === -1) {
-        newChecked.push(value);
-      } else {
-        newChecked.splice(currentIndex, 1);
+    const handleToggle = (value) => {
+      let found = false;
+      const newLeft = left.map( c => {
+          if(c.display_value === value.display_value){
+              c.checked = !c.checked;
+              found = true;
+          }
+          return c;
+      });
+      if(found){
+          setLeft(newLeft);
+          return
       }
-
-      setChecked(newChecked);
+      const newRight = right.map( c => {
+        if(c.display_value === value.display_value){
+            c.checked = !c.checked;
+        }
+        return c;
+      });
+      setRight(newRight);
     };
 
     const handleAllRight = () => {
@@ -116,49 +152,26 @@ export function AddRemoveCallbackCommandsDialog(props) {
     };
 
     const handleCheckedRight = () => {
-      setRight(right.concat(leftChecked));
-      setLeft(not(left, leftChecked));
-      setChecked(not(checked, leftChecked));
+        let leftChecked = left.filter(c => c.checked);
+        leftChecked = leftChecked.map(c => {return {...c, checked: false}})
+        let leftNotChecked = left.filter(c => !c.checked);
+        setRight(right.concat(leftChecked));
+        setLeft(leftNotChecked);
     };
 
     const handleCheckedLeft = () => {
-      setLeft(left.concat(rightChecked));
-      setRight(not(right, rightChecked));
-      setChecked(not(checked, rightChecked));
+        let rightChecked = right.filter(c => c.checked);
+        rightChecked = rightChecked.map(c => {return {...c, checked: false}})
+        let rightNotChecked = right.filter(c => !c.checked);
+        setLeft(left.concat(rightChecked));
+        setRight(rightNotChecked);
     };
 
     const handleAllLeft = () => {
       setLeft(left.concat(right));
       setRight([]);
     };
-    const customList = (title, items) => (
-      <>
-          <CardHeader className={classes.cardHeader} title={title} />
-          <StyledDivider classes={{root: classes.divider}}/>
-          <CardContent style={{flexGrow: 1, overflowY: "auto", padding: 0}}>
-            <List dense component="div" role="list" style={{padding:0, width: "100%"}}>
-              {items.map((valueObj) => {
-                const value = valueObj.cmd + " (" + valueObj?.payloadtype?.name + ")";
-                const labelId = `transfer-list-item-${value}-label`;
-                return (
-                  <ListItem style={{padding:0}} key={value} role="listitem" button onClick={handleToggle(valueObj)}>
-                    <ListItemIcon>
-                      <Checkbox
-                        checked={checked.findIndex( (element) => element.cmd + " (" + element?.payloadtype?.name + ")" === value) !== -1}
-                        tabIndex={-1}
-                        disableRipple
-                        inputProps={{ 'aria-labelledby': labelId }}
-                      />
-                    </ListItemIcon>
-                    <ListItemText id={labelId} primary={value} />
-                  </ListItem>
-                );
-              })}
-              <ListItem />
-            </List>
-          </CardContent>
-        </>
-    );
+
     const setFinalTags = () => {
       // things to add are in the `right` now but weren't for `originalRight`
       const commandsToAdd = right.filter( (command) => {
@@ -172,71 +185,77 @@ export function AddRemoveCallbackCommandsDialog(props) {
     }
   return (
     <React.Fragment>
-        <DialogTitle id="form-dialog-title">Add or Remove Commands for Callback {props.display_id} </DialogTitle>
-        <DialogContent dividers={true} style={{height: "100%", display: "flex", flexDirection: "column", position: "relative",  maxHeight: "100%"}}>
-          This will add or remove commands associated with this callback from Mythic's perspective. 
-          This does NOT add or remove commands within the payload itself that's beaconing out to Mythic.
-          <div style={{display: "flex", flexDirection: "row", overflowY: "auto", flexGrow: 1, minHeight: 0}}>
-          <div  style={{paddingLeft: 0, flexGrow: 1,  marginLeft: 0, marginRight: "10px", position: "relative",  overflowY: "auto", display: "flex", flexDirection: "column" }}>
-            {customList(leftTitle, left)}
-          </div>
-            <div style={{display: "flex", flexDirection: "column", justifyContent: "center"}}>
-              <StyledButton
-                variant="contained"
-                size="small"
-                className={classes.button}
-                onClick={handleAllRight}
-                disabled={left.length === 0}
-                aria-label="move all right"
-              >
-                &gt;&gt;
-              </StyledButton>
-              <StyledButton
-                variant="contained"
-                size="small"
-                className={classes.button}
-                onClick={handleCheckedRight}
-                disabled={leftChecked.length === 0}
-                aria-label="move selected right"
-              >
-                &gt;
-              </StyledButton>
-              <StyledButton
-                variant="contained"
-                size="small"
-                className={classes.button}
-                onClick={handleCheckedLeft}
-                disabled={rightChecked.length === 0}
-                aria-label="move selected left"
-              >
-                &lt;
-              </StyledButton>
-              <StyledButton
-                variant="contained"
-                size="small"
-                className={classes.button}
-                onClick={handleAllLeft}
-                disabled={right.length === 0}
-                aria-label="move all left"
-              >
-                &lt;&lt;
-              </StyledButton>
- 
-          </div>
-          <div  style={{marginLeft: "10px", position: "relative", flexGrow: 1, display: "flex", flexDirection: "column" }}>
-            {customList(rightTitle, right)}
-            </div>
-        </div>
+        <DialogTitle>Add or Remove Commands for Callback {props.display_id} </DialogTitle>
+        <DialogContent dividers={true} style={{height: "100%", display: "flex", flexDirection: "column", position: "relative", overflowY: "auto"}}>
+          <MythicDialogBody>
+            <MythicDialogSection
+                title="Command Availability"
+                description="Updates Mythic's callback command association without changing commands inside the active payload."
+            >
+              <div style={{display: "flex", flexDirection: "row", overflowY: "auto", flexGrow: 1, minHeight: 0}}>
+                <div  style={{paddingLeft: 0, flexGrow: 1,  marginLeft: 0, marginRight: "10px", position: "relative",  overflowY: "auto", display: "flex", flexDirection: "column" }}>
+                  <CustomList title={leftTitle} items={left} handleToggle={handleToggle}/>
+                </div>
+                <div 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}
+                    disabled={left.length === 0}
+                    aria-label="move all right"
+                  >
+                    &gt;&gt;
+                  </MythicActionButton>
+                  <MythicActionButton
+                    colorMode="always"
+                    tone="primary"
+                    variant="contained"
+                    size="small"
+                    onClick={handleCheckedRight}
+                    aria-label="move selected right"
+                  >
+                    &gt;
+                  </MythicActionButton>
+                  <MythicActionButton
+                    colorMode="always"
+                    tone="primary"
+                    variant="contained"
+                    size="small"
+                    onClick={handleCheckedLeft}
+                    aria-label="move selected left"
+                  >
+                    &lt;
+                  </MythicActionButton>
+                  <MythicActionButton
+                    colorMode="always"
+                    tone="primary"
+                    variant="contained"
+                    size="small"
+                    onClick={handleAllLeft}
+                    disabled={right.length === 0}
+                    aria-label="move all left"
+                  >
+                    &lt;&lt;
+                  </MythicActionButton>
+
+              </div>
+                <div style={{marginLeft: "10px", position: "relative", flexGrow: 1, display: "flex", flexDirection: "column" }}>
+                  <CustomList title={rightTitle} items={right} handleToggle={handleToggle} />
+                </div>
+              </div>
+            </MythicDialogSection>
+          </MythicDialogBody>
         </DialogContent>
-        <DialogActions>
-          <Button onClick={props.onClose} variant="contained" color="primary">
+        <MythicDialogFooter>
+          <MythicDialogButton onClick={props.onClose}>
             Close
-          </Button>
-          <Button onClick={setFinalTags} variant="contained" color="success">
+          </MythicDialogButton>
+          <MythicDialogButton intent="primary" onClick={setFinalTags}>
             Submit
-          </Button>
-        </DialogActions>
+          </MythicDialogButton>
+        </MythicDialogFooter>
   </React.Fragment>
   );
 }
-

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

@@ -0,0 +1,177 @@
+import {createSandboxedWorker} from "./BrowserScriptSandbox";
+
+const DEFAULT_TIMEOUT_MS = 10000;
+
+const toError = (errorData, phase) => {
+    const error = new Error(errorData?.message || "Browser script failed");
+    error.name = errorData?.name || "Error";
+    error.stack = errorData?.stack || error.stack;
+    error.phase = phase;
+    return error;
+};
+
+export class BrowserScriptRunner {
+    constructor({workerFactory=createSandboxedWorker, timeoutMS=DEFAULT_TIMEOUT_MS} = {}) {
+        this.workerFactory = workerFactory;
+        this.timeoutMS = timeoutMS;
+        this.nextRequestID = 1;
+        this.latestRequestID = 0;
+        this.activeRequest = undefined;
+        this.queuedRequest = undefined;
+        this.workerScript = undefined;
+        this.disposed = false;
+    }
+
+    startWorker = () => {
+        this.worker = this.workerFactory();
+        this.worker.onmessage = this.handleMessage;
+        this.worker.onerror = this.handleWorkerError;
+    };
+
+    restartWorker = () => {
+        if(this.worker){
+            this.worker.onmessage = null;
+            this.worker.onerror = null;
+            this.worker.terminate();
+            this.worker = undefined;
+        }
+        this.workerScript = undefined;
+    };
+
+    run = ({script, task, responses, onResult, onError}) => {
+        if(this.disposed){
+            return undefined;
+        }
+
+        const request = {
+            id: this.nextRequestID++,
+            script,
+            task,
+            responses,
+            onResult,
+            onError,
+        };
+        this.latestRequestID = request.id;
+        this.queuedRequest = request;
+        if(!this.activeRequest){
+            this.runQueuedRequest();
+        }
+        return request.id;
+    };
+
+    cancel = (requestID) => {
+        if(this.queuedRequest?.id === requestID){
+            this.queuedRequest = undefined;
+        }
+        if(this.activeRequest?.id === requestID){
+            this.activeRequest.cancelled = true;
+        }
+        if(this.latestRequestID === requestID){
+            this.latestRequestID = 0;
+        }
+    };
+
+    runQueuedRequest = () => {
+        if(this.disposed || this.activeRequest || !this.queuedRequest){
+            return;
+        }
+
+        const request = this.queuedRequest;
+        this.queuedRequest = undefined;
+        this.activeRequest = request;
+        const message = {
+            type: "render",
+            requestID: request.id,
+            task: request.task,
+            responses: request.responses,
+        };
+        if(request.script !== this.workerScript){
+            message.script = request.script;
+            this.workerScript = request.script;
+        }
+
+        request.timeout = setTimeout(() => {
+            this.finishActiveRequest({
+                error: new Error(`Browser script exceeded the ${this.timeoutMS}ms time limit`),
+                restartWorker: true,
+            });
+        }, this.timeoutMS);
+
+        try {
+            if(!this.worker){
+                this.startWorker();
+            }
+            this.worker.postMessage(message);
+        } catch (error) {
+            this.finishActiveRequest({error, restartWorker: true});
+        }
+    };
+
+    handleMessage = ({data}) => {
+        const request = this.activeRequest;
+        if(!request || data?.requestID !== request.id){
+            return;
+        }
+        if(data.type === "log"){
+            if(!request.cancelled && request.id === this.latestRequestID && !this.queuedRequest){
+                console.log(...(Array.isArray(data.args) ? data.args : [data.args]));
+            }
+            return;
+        }
+        if(data.type === "error"){
+            if(data.phase === "compile"){
+                this.workerScript = undefined;
+            }
+            this.finishActiveRequest({error: toError(data.error, data.phase)});
+            return;
+        }
+        if(data.type === "result"){
+            this.finishActiveRequest({result: data.result});
+        }
+    };
+
+    handleWorkerError = (event) => {
+        event?.preventDefault?.();
+        if(!this.activeRequest){
+            this.restartWorker();
+            return;
+        }
+        this.finishActiveRequest({
+            error: new Error(event?.message || "Browser script worker failed"),
+            restartWorker: true,
+        });
+    };
+
+    finishActiveRequest = ({result, error, restartWorker=false}) => {
+        const request = this.activeRequest;
+        if(!request){
+            return;
+        }
+
+        clearTimeout(request.timeout);
+        this.activeRequest = undefined;
+        const isCurrent = !request.cancelled && request.id === this.latestRequestID && !this.queuedRequest;
+
+        if(restartWorker){
+            this.restartWorker();
+        }
+        if(isCurrent){
+            if(error){
+                request.onError?.(error);
+            }else{
+                request.onResult?.(result);
+            }
+        }
+        this.runQueuedRequest();
+    };
+
+    dispose = () => {
+        this.disposed = true;
+        if(this.activeRequest){
+            clearTimeout(this.activeRequest.timeout);
+        }
+        this.activeRequest = undefined;
+        this.queuedRequest = undefined;
+        this.restartWorker();
+    };
+}

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

@@ -0,0 +1,144 @@
+import {BrowserScriptRunner} from "./BrowserScriptRunner";
+
+class MockWorker {
+    constructor() {
+        this.messages = [];
+        this.terminated = false;
+    }
+
+    postMessage = (message) => {
+        this.messages.push(message);
+    };
+
+    terminate = () => {
+        this.terminated = true;
+    };
+
+    respond = (data) => {
+        this.onmessage?.({data});
+    };
+}
+
+const createRunner = (options = {}) => {
+    const workers = [];
+    const workerFactory = jest.fn(() => {
+        const worker = new MockWorker();
+        workers.push(worker);
+        return worker;
+    });
+    return {
+        runner: new BrowserScriptRunner({workerFactory, ...options}),
+        workerFactory,
+        workers,
+    };
+};
+
+const makeRequest = (overrides = {}) => ({
+    script: "function(task, responses) { return {plaintext: responses.join('')}; }",
+    task: {id: 1},
+    responses: ["one"],
+    onResult: jest.fn(),
+    onError: jest.fn(),
+    ...overrides,
+});
+
+describe("BrowserScriptRunner", () => {
+    test("creates its worker lazily and reuses the compiled script", () => {
+        const {runner, workerFactory, workers} = createRunner();
+        expect(workerFactory).not.toHaveBeenCalled();
+
+        const first = makeRequest();
+        const firstID = runner.run(first);
+        expect(workerFactory).toHaveBeenCalledTimes(1);
+        expect(workers[0].messages[0]).toMatchObject({
+            type: "render",
+            requestID: firstID,
+            script: first.script,
+        });
+        workers[0].respond({type: "result", requestID: firstID, result: {plaintext: "one"}});
+
+        const second = makeRequest({responses: ["two"]});
+        const secondID = runner.run(second);
+        expect(workerFactory).toHaveBeenCalledTimes(1);
+        expect(workers[0].messages[1]).toEqual({
+            type: "render",
+            requestID: secondID,
+            task: second.task,
+            responses: second.responses,
+        });
+        workers[0].respond({type: "result", requestID: secondID, result: {plaintext: "two"}});
+
+        expect(first.onResult).toHaveBeenCalledWith({plaintext: "one"});
+        expect(second.onResult).toHaveBeenCalledWith({plaintext: "two"});
+        runner.dispose();
+    });
+
+    test("coalesces updates while a render is running", () => {
+        const {runner, workers} = createRunner();
+        const first = makeRequest({responses: ["one"]});
+        const second = makeRequest({responses: ["two"]});
+        const latest = makeRequest({responses: ["three"]});
+        const firstID = runner.run(first);
+        runner.run(second);
+        const latestID = runner.run(latest);
+
+        expect(workers[0].messages).toHaveLength(1);
+        workers[0].respond({type: "result", requestID: firstID, result: {plaintext: "one"}});
+
+        expect(first.onResult).not.toHaveBeenCalled();
+        expect(second.onResult).not.toHaveBeenCalled();
+        expect(workers[0].messages).toHaveLength(2);
+        expect(workers[0].messages[1]).toMatchObject({
+            requestID: latestID,
+            responses: ["three"],
+        });
+
+        workers[0].respond({type: "result", requestID: latestID, result: {plaintext: "three"}});
+        expect(latest.onResult).toHaveBeenCalledWith({plaintext: "three"});
+        runner.dispose();
+    });
+
+    test("restarts a timed-out worker and reports the current failure", () => {
+        jest.useFakeTimers();
+        const {runner, workers} = createRunner({timeoutMS: 25});
+        const request = makeRequest();
+        runner.run(request);
+
+        jest.advanceTimersByTime(25);
+
+        expect(workers[0].terminated).toBe(true);
+        expect(request.onError).toHaveBeenCalledWith(expect.objectContaining({
+            message: "Browser script exceeded the 25ms time limit",
+        }));
+
+        const next = makeRequest({responses: ["after timeout"]});
+        runner.run(next);
+        expect(workers).toHaveLength(2);
+        expect(workers[1].messages[0].script).toBe(next.script);
+        runner.dispose();
+        jest.useRealTimers();
+    });
+
+    test("returns worker errors and reloads scripts after compile failures", () => {
+        const {runner, workers} = createRunner();
+        const request = makeRequest();
+        const requestID = runner.run(request);
+        workers[0].respond({
+            type: "error",
+            requestID,
+            phase: "compile",
+            error: {name: "SyntaxError", message: "Unexpected token"},
+        });
+
+        expect(request.onError).toHaveBeenCalledWith(expect.objectContaining({
+            name: "SyntaxError",
+            message: "Unexpected token",
+            phase: "compile",
+        }));
+
+        const retry = makeRequest();
+        runner.run(retry);
+        expect(workers[0].messages[1].script).toBe(retry.script);
+        runner.dispose();
+    });
+});

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

@@ -0,0 +1,79 @@
+// The frame owns only a worker and a private message port. It never evaluates
+// service code in its window. The opaque origin denies application storage;
+// the blob worker inherits this CSP, which denies all network destinations.
+export const sandboxDocument = `<!doctype html>
+<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'unsafe-inline' 'unsafe-eval'; worker-src blob:; connect-src 'none'; base-uri 'none'; form-action 'none'">
+<script>
+addEventListener('message', function initialize(event) {
+    if (event.source !== parent || !event.ports[0]) return;
+    removeEventListener('message', initialize);
+    const port = event.ports[0];
+    try {
+        const url = URL.createObjectURL(new Blob([event.data], {type: 'text/javascript'}));
+        const worker = new Worker(url);
+        URL.revokeObjectURL(url);
+        worker.onmessage = event => port.postMessage(event.data);
+        worker.onerror = event => {
+            event.preventDefault();
+            port.postMessage({type: 'sandbox-error', message: event.message});
+        };
+        port.onmessage = event => worker.postMessage(event.data);
+        port.start();
+    } catch (error) {
+        port.postMessage({type: 'sandbox-error', message: error.message});
+    }
+});
+</script>`;
+
+let workerSource;
+const loadWorkerSource = () => {
+    if (!workerSource) {
+        workerSource = fetch("/new/browser-script-worker.js").then(response => {
+            if (!response.ok) throw new Error("Failed to load browser script worker");
+            return response.text();
+        }).catch(error => {
+            workerSource = undefined;
+            throw error;
+        });
+    }
+    return workerSource;
+};
+
+// Worker-compatible adapter preserves the runner's queue, cancellation and
+// timeout behavior. Removing the frame also terminates its worker.
+export const createSandboxedWorker = () => {
+    const frame = document.createElement("iframe");
+    frame.setAttribute("sandbox", "allow-scripts");
+    frame.hidden = true;
+    frame.title = "Browser script sandbox";
+    const channel = new MessageChannel();
+    let disposed = false;
+    const adapter = {
+        onmessage: null,
+        onerror: null,
+        postMessage: message => channel.port1.postMessage(message),
+        terminate: () => {
+            disposed = true;
+            frame.remove();
+            channel.port1.close();
+            channel.port2.close();
+        },
+    };
+    channel.port1.onmessage = event => {
+        if (disposed) return;
+        if (event.data?.type === "sandbox-error") {
+            adapter.onerror?.({message: event.data.message});
+        } else {
+            adapter.onmessage?.(event);
+        }
+    };
+    const loaded = new Promise(resolve => { frame.onload = resolve; });
+    frame.srcdoc = sandboxDocument;
+    document.body.appendChild(frame);
+    Promise.all([loaded, loadWorkerSource()]).then(([, source]) => {
+        if (!disposed) frame.contentWindow.postMessage(source, "*", [channel.port2]);
+    }).catch(error => {
+        if (!disposed) adapter.onerror?.(error);
+    });
+    return adapter;
+};

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

@@ -0,0 +1,70 @@
+import fs from "fs";
+import path from "path";
+import vm from "vm";
+
+const workerSource = fs.readFileSync(
+    path.resolve(__dirname, "../../../../public/browser-script-worker.js"),
+    "utf8",
+);
+
+const createWorkerContext = () => {
+    const messages = [];
+    const context = {
+        console: {log: jest.fn()},
+        self: {
+            postMessage: (message) => messages.push(message),
+        },
+    };
+    vm.runInNewContext(workerSource, context);
+    return {messages, worker: context.self};
+};
+
+test("browser scripts run without page globals or local storage", () => {
+    const {messages, worker} = createWorkerContext();
+    worker.onmessage({
+        data: {
+            type: "render",
+            requestID: 1,
+            script: `function() {
+                return {
+                    plaintext: [typeof window, typeof document, typeof localStorage].join(","),
+                };
+            }`,
+            task: {id: 1},
+            responses: [],
+        },
+    });
+
+    expect(messages).toEqual([{
+        type: "result",
+        requestID: 1,
+        result: {plaintext: "undefined,undefined,undefined"},
+    }]);
+});
+
+test("the worker reuses its loaded function for later responses", () => {
+    const {messages, worker} = createWorkerContext();
+    worker.onmessage({
+        data: {
+            type: "render",
+            requestID: 1,
+            script: "function(task, responses) { return {plaintext: task.id + responses.join('')}; }",
+            task: {id: 7},
+            responses: ["first"],
+        },
+    });
+    worker.onmessage({
+        data: {
+            type: "render",
+            requestID: 2,
+            task: {id: 8},
+            responses: ["second"],
+        },
+    });
+
+    expect(messages[1]).toEqual({
+        type: "result",
+        requestID: 2,
+        result: {plaintext: "8second"},
+    });
+});

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

@@ -0,0 +1,465 @@
+import React from "react";
+import {gql, useQuery, useSubscription} from "@apollo/client";
+import {getSkewedNow} from "../../utilities/Time";
+
+const browserTreeFragment = gql`
+    fragment callbackBrowserTreeData on mythictree {
+        comment
+        deleted
+        task_id
+        filemeta {
+            id
+            agent_file_id
+            filename_text
+        }
+        tags {
+            tagtype {
+                name
+                color
+                id
+            }
+            id
+        }
+        host
+        id
+        os
+        can_have_children
+        has_children
+        success
+        full_path_text
+        display_path_text
+        name_text
+        timestamp
+        parent_path_text
+        tree_type
+        metadata
+        callback {
+            id
+            display_id
+            mythictree_groups
+        }
+    }
+`;
+
+const rootBrowserTreeQuery = gql`
+    ${browserTreeFragment}
+    query callbackBrowserTreeRoots($tree_type: String!) {
+        mythictree(
+            where: {parent_path_text: {_eq: ""}, tree_type: {_eq: $tree_type}}
+            order_by: {id: asc}
+        ) {
+            ...callbackBrowserTreeData
+        }
+    }
+`;
+
+const browserTreeSubscription = gql`
+    ${browserTreeFragment}
+    subscription callbackBrowserTreeStream($now: timestamp!, $tree_type: String!) {
+        mythictree_stream(
+            batch_size: 1000
+            cursor: {initial_value: {timestamp: $now}}
+            where: {tree_type: {_eq: $tree_type}}
+        ) {
+            ...callbackBrowserTreeData
+        }
+    }
+`;
+
+const processTreeSubscription = gql`
+    ${browserTreeFragment}
+    subscription callbackProcessTreeStream($now: timestamp!) {
+        mythictree_stream(
+            batch_size: 1000
+            cursor: {initial_value: {timestamp: $now}}
+            where: {tree_type: {_eq: "process"}, deleted: {_eq: false}}
+        ) {
+            ...callbackBrowserTreeData
+        }
+    }
+`;
+
+const getGroups = (row) => row?.callback?.mythictree_groups || ["Unknown Callbacks"];
+
+const decodeFilename = (value) => {
+    if(!value){return "";}
+    try{
+        const text = window.atob(value);
+        const bytes = Uint8Array.from(text, (character) => character.charCodeAt(0));
+        return new TextDecoder().decode(bytes);
+    }catch(error){
+        try{
+            return decodeURIComponent(window.atob(value));
+        }catch(secondError){
+            return value;
+        }
+    }
+};
+
+const uniqueBy = (values = [], getKey = (value) => value?.id) => {
+    const result = [];
+    const indexes = new Map();
+    values.forEach((value) => {
+        const key = getKey(value);
+        if(key === undefined || key === null){
+            result.push(value);
+            return;
+        }
+        if(indexes.has(key)){
+            result[indexes.get(key)] = value;
+        }else{
+            indexes.set(key, result.length);
+            result.push(value);
+        }
+    });
+    return result;
+};
+
+const uniquePermissions = (values = []) => uniqueBy(values, (value) => {
+    if(value && typeof value === "object"){
+        const keys = Object.keys(value).sort();
+        return JSON.stringify(value, keys);
+    }
+    return `${typeof value}:${value}`;
+});
+
+const decodeFilemeta = (values = []) => values.map((file) => ({
+    ...file,
+    filename_text: decodeFilename(file.filename_text),
+}));
+const uniqueFilemeta = (values = []) => uniqueBy(values).sort((left, right) => left.id - right.id);
+
+const rowFingerprint = (row) => JSON.stringify({
+    id: row.id,
+    task_id: row.task_id,
+    timestamp: row.timestamp,
+    deleted: row.deleted,
+    success: row.success,
+    comment: row.comment,
+    has_children: row.has_children,
+    metadata: row.metadata,
+    tags: (row.tags || []).map((tag) => tag.id),
+    filemeta: (row.filemeta || []).map((file) => [file.id, file.filename_text]),
+    callback: row.callback?.id,
+    callbackGroups: row.callback?.mythictree_groups,
+});
+
+const cloneRow = (row, mode) => ({
+    ...row,
+    metadata: {...(row.metadata || {})},
+    tags: uniqueBy(row.tags || []),
+    filemeta: mode === "file" ? uniqueFilemeta(decodeFilemeta(row.filemeta || [])) : [...(row.filemeta || [])],
+    ...(mode === "process" ? {callbacks: row.callback ? [row.callback] : []} : {}),
+});
+
+const mergeFileRow = (existing, row) => {
+    const next = {...existing};
+    if((existing.task_id ?? -1) <= (row.task_id ?? -1)){
+        next.deleted = row.deleted;
+    }
+    if((existing.success === null || !existing.success) && row.success !== null){
+        next.success = row.success;
+        next.task_id = row.task_id;
+    }
+    next.comment = row.comment;
+    next.tags = uniqueBy([...(existing.tags || []), ...(row.tags || [])]);
+    next.has_children = row.has_children || existing.has_children;
+    next.metadata = {...(existing.metadata || {})};
+    ["size", "access_time", "modify_time"].forEach((key) => {
+        next.metadata[key] = row.metadata?.[key];
+    });
+    if(row.metadata?.permissions !== undefined && row.metadata?.permissions !== null){
+        if(Array.isArray(existing.metadata?.permissions) && Array.isArray(row.metadata.permissions)){
+            next.metadata.permissions = uniquePermissions([
+                ...existing.metadata.permissions,
+                ...row.metadata.permissions,
+            ]);
+        }else if(Array.isArray(existing.metadata?.permissions) !== Array.isArray(row.metadata.permissions)){
+            next.metadata.permissions = row.metadata.permissions;
+        }else{
+            next.metadata.permissions = {
+                ...(existing.metadata?.permissions || {}),
+                ...(row.metadata.permissions || {}),
+            };
+        }
+    }
+    next.filemeta = uniqueFilemeta([...(existing.filemeta || []), ...decodeFilemeta(row.filemeta || [])]);
+    return next;
+};
+
+const mergeCustomRow = (existing, row) => {
+    if((existing.task_id ?? -1) >= (row.task_id ?? -1)){
+        return existing;
+    }
+    return {
+        ...existing,
+        deleted: row.deleted,
+        success: ((existing.success === null || !existing.success) && row.success !== null) ? row.success : existing.success,
+        comment: row.comment,
+        tags: uniqueBy(row.tags || []),
+        has_children: row.has_children || existing.has_children,
+        metadata: {...(existing.metadata || {}), ...(row.metadata || {})},
+        display_path_text: row.display_path_text,
+        task_id: row.task_id,
+    };
+};
+
+const mergeProcessRow = (existing, row) => {
+    if((existing.task_id ?? -1) <= (row.task_id ?? -1) && row.deleted){
+        return null;
+    }
+    return {
+        ...existing,
+        has_children: row.has_children || existing.has_children,
+        callbacks: uniqueBy([...(existing.callbacks || []), ...(row.callback ? [row.callback] : [])]),
+        comment: `${existing.comment || ""}${row.comment || ""}`,
+        tags: uniqueBy([...(existing.tags || []), ...(row.tags || [])]),
+        metadata: (existing.task_id ?? -1) > (row.task_id ?? -1) ?
+            {...(row.metadata || {}), ...(existing.metadata || {})} :
+            {...(existing.metadata || {}), ...(row.metadata || {})},
+        task_id: Math.max(existing.task_id ?? -1, row.task_id ?? -1),
+    };
+};
+
+const mergeRow = (existing, row, mode) => {
+    if(!existing){
+        if(mode === "process" && row.deleted){return null;}
+        return cloneRow(row, mode);
+    }
+    if(mode === "file"){
+        return mergeFileRow(existing, row);
+    }
+    if(mode === "process"){
+        return mergeProcessRow(existing, row);
+    }
+    return mergeCustomRow(existing, row);
+};
+
+const cloneMatrixBucket = (matrix, group, host, parent, cloned) => {
+    if(!cloned.root){
+        matrix = {...matrix};
+        cloned.root = true;
+    }
+    if(!cloned.groups.has(group)){
+        matrix[group] = {...(matrix[group] || {})};
+        cloned.groups.add(group);
+    }
+    const hostKey = `${group}\u0000${host}`;
+    if(!cloned.hosts.has(hostKey)){
+        matrix[group][host] = {...(matrix[group][host] || {})};
+        cloned.hosts.add(hostKey);
+    }
+    const parentKey = `${hostKey}\u0000${parent}`;
+    if(!cloned.parents.has(parentKey)){
+        matrix[group][host][parent] = {...(matrix[group][host][parent] || {})};
+        cloned.parents.add(parentKey);
+    }
+    return matrix;
+};
+
+export const mergeBrowserTreeRows = (entry, rows, mode = entry.mode) => {
+    let matrix = entry.matrix;
+    let changed = false;
+    const changedBuckets = new Set();
+    const cloned = {root: false, groups: new Set(), hosts: new Set(), parents: new Set()};
+
+    rows.forEach((row) => {
+        const fingerprint = rowFingerprint(row);
+        if(entry.fingerprints.get(row.id) === fingerprint){return;}
+        entry.fingerprints.set(row.id, fingerprint);
+        getGroups(row).forEach((group) => {
+            entry.data[group] = entry.data[group] || {};
+            entry.data[group][row.host] = entry.data[group][row.host] || {};
+            const existing = entry.data[group][row.host][row.full_path_text];
+            let next = mergeRow(existing, row, mode);
+            if(next === existing){return;}
+            const previousParent = existing?.parent_path_text ?? row.parent_path_text ?? "";
+            const nextParent = row.parent_path_text ?? previousParent;
+            if(next && next.parent_path_text !== nextParent){next = {...next, parent_path_text: nextParent};}
+            matrix = cloneMatrixBucket(matrix, group, row.host, previousParent, cloned);
+            if(nextParent !== previousParent){
+                matrix = cloneMatrixBucket(matrix, group, row.host, nextParent, cloned);
+                delete matrix[group][row.host][previousParent][row.full_path_text];
+            }
+            if(next === null){
+                delete entry.data[group][row.host][row.full_path_text];
+                delete matrix[group][row.host][previousParent][row.full_path_text];
+            }else{
+                entry.data[group][row.host][row.full_path_text] = next;
+                matrix[group][row.host][nextParent][row.full_path_text] = 1;
+            }
+            changedBuckets.add(`${group}\u0000${row.host}\u0000${previousParent}`);
+            if(nextParent !== previousParent){changedBuckets.add(`${group}\u0000${row.host}\u0000${nextParent}`);}
+            changed = true;
+        });
+    });
+    if(changed){entry.matrix = matrix;}
+    return {changed, changedBuckets};
+};
+
+const createEntry = (mode) => ({
+    mode,
+    data: {},
+    dataRef: {current: {}},
+    matrix: {},
+    version: 0,
+    hydrated: false,
+    fingerprints: new Map(),
+    loadedScopes: new Set(),
+    listeners: new Set(),
+    changeListeners: new Set(),
+});
+
+export const createCallbackBrowserTreeStore = () => {
+    const entries = new Map();
+    const getEntry = (treeType, mode = treeType === "process" ? "process" : treeType === "file" ? "file" : "custom") => {
+        if(!entries.has(treeType)){
+            const entry = createEntry(mode);
+            entry.dataRef.current = entry.data;
+            entries.set(treeType, entry);
+        }
+        return entries.get(treeType);
+    };
+    const publish = (entry) => {
+        entry.version += 1;
+        entry.listeners.forEach((listener) => listener());
+    };
+    return {
+        getEntry,
+        mergeRows(treeType, mode, rows, {notify = false, hydrated = false} = {}){
+            const entry = getEntry(treeType, mode);
+            const result = mergeBrowserTreeRows(entry, rows, mode);
+            if(hydrated){entry.hydrated = true;}
+            if(result.changed || hydrated){publish(entry);}
+            if(notify && result.changed){
+                entry.changeListeners.forEach((listener) => listener(result));
+            }
+            return {...result, matrix: entry.matrix, data: entry.data};
+        },
+        setMatrix(treeType, matrix){
+            const entry = getEntry(treeType);
+            entry.matrix = matrix;
+            publish(entry);
+        },
+        subscribe(treeType, listener){
+            const entry = getEntry(treeType);
+            entry.listeners.add(listener);
+            return () => entry.listeners.delete(listener);
+        },
+        subscribeToChanges(treeType, listener){
+            const entry = getEntry(treeType);
+            entry.changeListeners.add(listener);
+            return () => entry.changeListeners.delete(listener);
+        },
+        getSnapshot(treeType){return getEntry(treeType).version;},
+        isScopeLoaded(treeType, scope){return getEntry(treeType).loadedScopes.has(scope);},
+        markScopeLoaded(treeType, scope){getEntry(treeType).loadedScopes.add(scope);},
+    };
+};
+
+const CallbackBrowserTreeContext = React.createContext(null);
+
+const getTreeSources = (openTabs) => {
+    const sources = new Map();
+    openTabs.forEach((tab) => {
+        if(tab.tabType === "fileBrowser"){
+            sources.set("file", {treeType: "file", mode: "file"});
+        }else if(tab.tabType === "processBrowser"){
+            sources.set("process", {treeType: "process", mode: "process"});
+        }else if(tab.tabType === "customFileBasedBrowser" && tab.customBrowser?.name){
+            sources.set(tab.customBrowser.name, {treeType: tab.customBrowser.name, mode: "custom"});
+        }
+    });
+    return [...sources.values()];
+};
+
+const CallbackBrowserTreeSource = ({treeType, mode, store}) => {
+    const fromNow = React.useRef(getSkewedNow());
+    useQuery(rootBrowserTreeQuery, {
+        variables: {tree_type: treeType},
+        fetchPolicy: "no-cache",
+        onCompleted: (data) => store.mergeRows(treeType, mode, data.mythictree || [], {hydrated: true}),
+    });
+    useSubscription(mode === "process" ? processTreeSubscription : browserTreeSubscription, {
+        variables: mode === "process" ? {now: fromNow.current} : {now: fromNow.current, tree_type: treeType},
+        fetchPolicy: "no-cache",
+        ignoreResults: true,
+        onData: ({data}) => store.mergeRows(treeType, mode, data.data?.mythictree_stream || [], {notify: true}),
+    });
+    return null;
+};
+
+export const CallbackBrowserTreeProvider = ({openTabs, children}) => {
+    const storeRef = React.useRef();
+    if(!storeRef.current){storeRef.current = createCallbackBrowserTreeStore();}
+    const sources = React.useMemo(() => getTreeSources(openTabs), [openTabs]);
+    return (
+        <CallbackBrowserTreeContext.Provider value={storeRef.current}>
+            {sources.map((source) => (
+                <CallbackBrowserTreeSource key={source.treeType} {...source} store={storeRef.current} />
+            ))}
+            {children}
+        </CallbackBrowserTreeContext.Provider>
+    );
+};
+
+const emptySubscribe = () => () => {};
+
+export const useCallbackBrowserTree = ({treeType, mode, active, onInactiveChange}) => {
+    const store = React.useContext(CallbackBrowserTreeContext);
+    if(!store){throw new Error("useCallbackBrowserTree must be used inside CallbackBrowserTreeProvider");}
+    store.getEntry(treeType, mode);
+    const subscribe = React.useCallback(
+        (listener) => active ? store.subscribe(treeType, listener) : emptySubscribe(listener),
+        [active, store, treeType]
+    );
+    React.useSyncExternalStore(
+        subscribe,
+        React.useCallback(() => store.getSnapshot(treeType), [store, treeType]),
+        React.useCallback(() => store.getSnapshot(treeType), [store, treeType]),
+    );
+    React.useEffect(() => store.subscribeToChanges(treeType, () => {
+        if(!active){onInactiveChange?.();}
+    }), [active, onInactiveChange, store, treeType]);
+    const entry = store.getEntry(treeType, mode);
+    return {
+        treeRootDataRef: entry.dataRef,
+        treeAdjMtx: entry.matrix,
+        version: entry.version,
+        hydrated: entry.hydrated,
+        mergeRows: React.useCallback(
+            (rows, options) => store.mergeRows(treeType, mode, rows, options),
+            [mode, store, treeType]
+        ),
+        setTreeAdjMtx: React.useCallback(
+            (matrix) => store.setMatrix(treeType, matrix),
+            [store, treeType]
+        ),
+        isScopeLoaded: React.useCallback(
+            (scope) => store.isScopeLoaded(treeType, scope),
+            [store, treeType]
+        ),
+        markScopeLoaded: React.useCallback(
+            (scope) => store.markScopeLoaded(treeType, scope),
+            [store, treeType]
+        ),
+    };
+};
+
+export const getDefaultBrowserSelection = (treeData, matrix, callbackID, preferredHost) => {
+    const groups = Object.keys(matrix).sort();
+    if(groups.length === 0){return {group: "Default", host: preferredHost || ""};}
+    let callbackGroup;
+    for(const group of groups){
+        for(const hostNodes of Object.values(treeData[group] || {})){
+            for(const node of Object.values(hostNodes || {})){
+                if(node?.callback?.id === callbackID){callbackGroup = group; break;}
+            }
+            if(callbackGroup){break;}
+        }
+        if(callbackGroup){break;}
+    }
+    const group = callbackGroup || (groups.includes("Default") ? "Default" : groups[0]);
+    const hosts = Object.keys(matrix[group] || {}).sort();
+    return {group, host: hosts.includes(preferredHost) ? preferredHost : (hosts[0] || preferredHost || "")};
+};

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

@@ -0,0 +1,141 @@
+jest.mock("../../utilities/Time", () => ({getSkewedNow: () => "2026-01-01T00:00:00Z"}));
+
+import {createCallbackBrowserTreeStore} from "./CallbackBrowserTreeStore";
+
+const callback = {id: 7, display_id: 7, mythictree_groups: ["Default"]};
+const row = (overrides = {}) => ({
+    id: 1,
+    task_id: 1,
+    timestamp: "2026-01-01T00:00:00Z",
+    deleted: false,
+    success: true,
+    comment: "first",
+    tags: [{id: 1, tagtype: {id: 1, name: "a", color: "red"}}],
+    filemeta: [],
+    host: "HOST",
+    can_have_children: true,
+    has_children: true,
+    full_path_text: "/",
+    name_text: "/",
+    parent_path_text: "",
+    tree_type: "file",
+    metadata: {size: 1, permissions: ["r"]},
+    callback,
+    ...overrides,
+});
+
+describe("callback browser tree store", () => {
+    test("merges a streamed file update with the existing precedence", () => {
+        const store = createCallbackBrowserTreeStore();
+        store.mergeRows("file", "file", [row()], {hydrated: true});
+        store.mergeRows("file", "file", [row({
+            id: 2,
+            task_id: 2,
+            timestamp: "2026-01-01T00:00:01Z",
+            deleted: true,
+            success: false,
+            comment: "new",
+            tags: [{id: 2, tagtype: {id: 2, name: "b", color: "blue"}}],
+            metadata: {size: 2, access_time: 3, modify_time: 4, permissions: ["w"]},
+        })], {notify: true});
+        const node = store.getEntry("file").data.Default.HOST["/"];
+        expect(node.deleted).toBe(true);
+        expect(node.comment).toBe("new");
+        expect(node.tags.map((tag) => tag.id)).toEqual([1, 2]);
+        expect(node.metadata).toMatchObject({size: 2, access_time: 3, modify_time: 4, permissions: ["r", "w"]});
+    });
+
+    test("ignores exact replay and emits no duplicate notification", () => {
+        const store = createCallbackBrowserTreeStore();
+        const listener = jest.fn();
+        store.subscribeToChanges("file", listener);
+        const streamedRow = row();
+        store.mergeRows("file", "file", [streamedRow], {notify: true});
+        store.mergeRows("file", "file", [streamedRow], {notify: true});
+        expect(listener).toHaveBeenCalledTimes(1);
+        expect(store.getEntry("file").data.Default.HOST["/"].tags).toHaveLength(1);
+    });
+
+    test("deduplicates tags, callbacks, and file metadata while preserving newer values", () => {
+        const store = createCallbackBrowserTreeStore();
+        store.mergeRows("process", "process", [row({tree_type: "process", comment: "a"})]);
+        store.mergeRows("process", "process", [row({
+            id: 2,
+            timestamp: "2026-01-01T00:00:01Z",
+            tree_type: "process",
+            comment: "b",
+        })]);
+        const process = store.getEntry("process").data.Default.HOST["/"];
+        expect(process.callbacks).toHaveLength(1);
+        expect(process.tags).toHaveLength(1);
+        expect(process.comment).toBe("ab");
+
+        store.mergeRows("file", "file", [row({filemeta: [{id: 3, filename_text: ""}]})]);
+        store.mergeRows("file", "file", [row({
+            id: 3,
+            timestamp: "2026-01-01T00:00:02Z",
+            filemeta: [{id: 3, filename_text: ""}],
+        })]);
+        expect(store.getEntry("file").data.Default.HOST["/"].filemeta).toHaveLength(1);
+    });
+
+    test("does not decode an already-normalized filename again on later updates", () => {
+        const store = createCallbackBrowserTreeStore();
+        store.mergeRows("file", "file", [row({filemeta: [{id: 3, filename_text: "dGVzdA=="}]})]);
+        store.mergeRows("file", "file", [row({
+            id: 2,
+            task_id: 2,
+            timestamp: "2026-01-01T00:00:01Z",
+            filemeta: [],
+        })]);
+        expect(store.getEntry("file").data.Default.HOST["/"].filemeta[0].filename_text).toBe("test");
+    });
+
+    test("updates only the affected adjacency branches", () => {
+        const store = createCallbackBrowserTreeStore();
+        store.mergeRows("file", "file", [
+            row(),
+            row({id: 2, host: "OTHER", full_path_text: "C:\\", timestamp: "2026-01-01T00:00:01Z"}),
+        ]);
+        const before = store.getEntry("file").matrix;
+        const untouchedHost = before.Default.OTHER;
+        store.mergeRows("file", "file", [row({
+            id: 3,
+            full_path_text: "/tmp",
+            parent_path_text: "/",
+            timestamp: "2026-01-01T00:00:02Z",
+        })]);
+        const after = store.getEntry("file").matrix;
+        expect(after).not.toBe(before);
+        expect(after.Default.OTHER).toBe(untouchedHost);
+        expect(after.Default.HOST["/"]["/tmp"]).toBe(1);
+    });
+
+    test("moves an existing node between parent buckets without rebuilding unrelated hosts", () => {
+        const store = createCallbackBrowserTreeStore();
+        store.mergeRows("custom", "custom", [row({
+            tree_type: "custom",
+            full_path_text: "/child",
+            parent_path_text: "/old",
+        })]);
+        store.mergeRows("custom", "custom", [row({
+            tree_type: "custom",
+            task_id: 2,
+            timestamp: "2026-01-01T00:00:01Z",
+            full_path_text: "/child",
+            parent_path_text: "/new",
+        })]);
+        const matrix = store.getEntry("custom").matrix.Default.HOST;
+        expect(matrix["/old"]["/child"]).toBeUndefined();
+        expect(matrix["/new"]["/child"]).toBe(1);
+    });
+
+    test("historical hydration does not emit a background notification", () => {
+        const store = createCallbackBrowserTreeStore();
+        const listener = jest.fn();
+        store.subscribeToChanges("custom", listener);
+        store.mergeRows("custom", "custom", [row({tree_type: "custom"})], {hydrated: true});
+        expect(listener).not.toHaveBeenCalled();
+        expect(store.getEntry("custom").hydrated).toBe(true);
+    });
+});

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

@@ -16,6 +16,14 @@ mutation hideCallback ($callback_display_id: Int!){
   }
 }
 `;
+export const updateCallbackTriggerMutation = gql`
+mutation updateCallbackTriggerMutation ($callback_display_id: Int!, $trigger_on_checkin_after_time: Int!){
+  updateCallback(input: {callback_display_id: $callback_display_id, trigger_on_checkin_after_time: $trigger_on_checkin_after_time}) {
+    status
+    error
+  }
+}
+`;
 export const toggleHideCallbackMutations = gql`
 mutation hideCallback ($callback_display_id: Int!, $active: Boolean!){
   updateCallback(input: {callback_display_id: $callback_display_id, active: $active}) {
@@ -27,7 +35,7 @@ mutation hideCallback ($callback_display_id: Int!, $active: Boolean!){
 
 export const removeEdgeMutation = gql`
 mutation removeEdgeMutation ($edge_id: Int!){
-    callbackgraphedge_remove(edge_id: $edge_id) {
+    callbackgraphedgeRemove(edge_id: $edge_id) {
         status
         error
       }
@@ -36,7 +44,7 @@ mutation removeEdgeMutation ($edge_id: Int!){
 
 export const addEdgeMutation = gql`
 mutation addEdgeMutation ($source_id: Int!, $destination_id: Int!, $c2profile: String!){
-  callbackgraphedge_add(c2profile: $c2profile, destination_id: $destination_id, source_id: $source_id) {
+  callbackgraphedgeAdd(c2profile: $c2profile, destination_id: $destination_id, source_id: $source_id) {
     status
     error
   }
@@ -59,8 +67,8 @@ mutation lockCallack($callback_display_id: Int!){
 }
 `;
 export const updateDescriptionCallbackMutation = gql`
-mutation updateDescriptionCallack($callback_display_id: Int!, $description: String!){
-  updateCallback(input: {callback_display_id: $callback_display_id, description: $description}) {
+mutation updateDescriptionCallback($callback_display_id: Int!, $description: String!, $color: String!){
+  updateCallback(input: {callback_display_id: $callback_display_id, description: $description, color: $color}) {
     status
     error
   }
@@ -87,6 +95,9 @@ export const taskingDataFragment = gql`
     fragment taskData on task {
         comment
         parent_task_id
+        agent_task_id
+        tasking_location
+        apitokens_id
         callback {
             display_id
             id
@@ -96,6 +107,7 @@ export const taskingDataFragment = gql`
             domain
             ip
             mythictree_groups
+            pid
         }
         callback_id
         commentOperator{
@@ -123,6 +135,8 @@ export const taskingDataFragment = gql`
         status
         timestamp
         status_timestamp_submitted
+        status_timestamp_processing
+        status_timestamp_preprocessing
         command {
           cmd
           supported_ui_features
@@ -134,14 +148,24 @@ export const taskingDataFragment = gql`
         command_name
         opsec_pre_blocked
         opsec_pre_bypassed
+        opsec_pre_bypass_user {
+            id
+            username
+        }
         opsec_post_blocked
         opsec_post_bypassed
+        opsec_post_bypass_user {
+            id
+            username
+        }
         is_interactive_task
         interactive_task_type
         has_intercepted_response
         tasks(where: {is_interactive_task: {_eq: false}}, order_by: {id: asc}) {
             id
             comment
+            agent_task_id
+            apitokens_id
             commentOperator{
                 username
             }
@@ -154,6 +178,7 @@ export const taskingDataFragment = gql`
                 domain
                 ip
                 mythictree_groups
+                pid
             }
             completed
             subtask_group_name
@@ -169,6 +194,9 @@ export const taskingDataFragment = gql`
               cmd
               supported_ui_features
               id
+              payloadtype {
+                name
+              }
             }
             command_name
             response_count
@@ -200,8 +228,8 @@ export const taskingDataFragment = gql`
     }
 `;
 export const createTaskingMutation = gql`
-mutation createTasking($callback_id: Int, $callback_ids: [Int], $command: String!, $params: String!, $files: [String], $token_id: Int, $tasking_location: String, $original_params: String, $parameter_group_name: String, $parent_task_id: Int, $is_interactive_task: Boolean, $interactive_task_type: Int, $payload_type: String) {
-  createTask(callback_id: $callback_id, callback_ids: $callback_ids, command: $command, params: $params, files: $files, token_id: $token_id, tasking_location: $tasking_location, original_params: $original_params, parameter_group_name: $parameter_group_name, parent_task_id: $parent_task_id, is_interactive_task: $is_interactive_task, interactive_task_type: $interactive_task_type, payload_type: $payload_type) {
+mutation createTasking($callback_display_id: Int, $callback_display_ids: [Int], $command: String!, $params: String!, $files: [String], $token_id: Int, $tasking_location: String, $original_params: String, $parameter_group_name: String, $parent_task_display_id: Int, $is_interactive_task: Boolean, $interactive_task_type: Int, $payload_type: String, $resolve_task_references: Boolean) {
+  createTask(callback_display_id: $callback_display_id, callback_display_ids: $callback_display_ids, command: $command, params: $params, files: $files, token_id: $token_id, tasking_location: $tasking_location, original_params: $original_params, parameter_group_name: $parameter_group_name, parent_task_display_id: $parent_task_display_id, is_interactive_task: $is_interactive_task, interactive_task_type: $interactive_task_type, payload_type: $payload_type, resolve_task_references: $resolve_task_references) {
     status
     id
     error
@@ -209,8 +237,8 @@ mutation createTasking($callback_id: Int, $callback_ids: [Int], $command: String
 }
 `;
 export const exportCallbackConfigQuery = gql`
-query exportCallbackConfigQuery($agent_callback_id: String!) {
-  exportCallbackConfig(agent_callback_id: $agent_callback_id) {
+query exportCallbackConfigQuery($callback_display_id: Int!) {
+  exportCallbackConfig(callback_display_id: $callback_display_id) {
       status
       error 
       config 

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

@@ -0,0 +1,110 @@
+const EMPTY_CHILDREN = Object.freeze([]);
+
+const comparableTaskFields = [
+  "comment", "completed", "display_params", "original_params", "status", "timestamp",
+  "response_count", "opsec_pre_blocked", "opsec_pre_bypassed", "opsec_post_blocked",
+  "opsec_post_bypassed", "has_intercepted_response", "tasking_location",
+];
+
+const relationIDsEqual = (left = [], right = []) => {
+  if(left.length !== right.length){
+    return false;
+  }
+  for(let index = 0; index < left.length; index++){
+    if(left[index]?.id !== right[index]?.id){
+      return false;
+    }
+  }
+  return true;
+};
+
+export const taskRowsEqual = (left, right) => {
+  if(left === right){
+    return true;
+  }
+  if(!left || !right || left.id !== right.id){
+    return false;
+  }
+  for(const field of comparableTaskFields){
+    if(left[field] !== right[field]){
+      return false;
+    }
+  }
+  return left.command?.id === right.command?.id &&
+    left.operator?.username === right.operator?.username &&
+    left.commentOperator?.username === right.commentOperator?.username &&
+    relationIDsEqual(left.tags, right.tags) &&
+    relationIDsEqual(left.tasks, right.tasks);
+};
+
+export const mergeTasksByID = (existing = [], incoming = []) => {
+  if(incoming.length === 0){
+    return existing;
+  }
+  const tasksByID = new Map(existing.map((task) => [task.id, task]));
+  incoming.forEach((task) => {
+    const current = tasksByID.get(task.id);
+    tasksByID.set(task.id, taskRowsEqual(current, task) ? current : task);
+  });
+  const merged = Array.from(tasksByID.values()).sort((left, right) => left.id - right.id);
+  if(merged.length === existing.length && merged.every((task, index) => task === existing[index])){
+    return existing;
+  }
+  return merged;
+};
+
+export const nextLiveTaskLimit = (currentLimit, liveResultCount, increment = 20) => {
+  return liveResultCount >= currentLimit ? currentLimit + increment : currentLimit;
+};
+
+export const createTaskChildrenStore = () => {
+  const childrenByParent = new Map();
+  const listenersByParent = new Map();
+  let highestTaskID = 0;
+
+  const notify = (parentID) => {
+    listenersByParent.get(parentID)?.forEach((listener) => listener());
+  };
+
+  const merge = (tasks = []) => {
+    const incomingByParent = new Map();
+    tasks.forEach((task) => {
+      if(task?.parent_task_id === null || task?.parent_task_id === undefined){
+        return;
+      }
+      highestTaskID = Math.max(highestTaskID, task.id || 0);
+      const parentTasks = incomingByParent.get(task.parent_task_id) || [];
+      parentTasks.push(task);
+      incomingByParent.set(task.parent_task_id, parentTasks);
+    });
+
+    const changedParents = [];
+    incomingByParent.forEach((incoming, parentID) => {
+      const current = childrenByParent.get(parentID) || EMPTY_CHILDREN;
+      const merged = mergeTasksByID(current, incoming);
+      if(merged !== current){
+        childrenByParent.set(parentID, merged);
+        changedParents.push(parentID);
+      }
+    });
+    changedParents.forEach(notify);
+    return changedParents;
+  };
+
+  return {
+    getHighestTaskID: () => highestTaskID,
+    getSnapshot: (parentID) => childrenByParent.get(parentID) || EMPTY_CHILDREN,
+    merge,
+    subscribe: (parentID, listener) => {
+      const listeners = listenersByParent.get(parentID) || new Set();
+      listeners.add(listener);
+      listenersByParent.set(parentID, listeners);
+      return () => {
+        listeners.delete(listener);
+        if(listeners.size === 0){
+          listenersByParent.delete(parentID);
+        }
+      };
+    },
+  };
+};

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

@@ -0,0 +1,45 @@
+import {createTaskChildrenStore, mergeTasksByID, nextLiveTaskLimit} from "./CallbackTaskingStreamUtils";
+
+describe("callback task stream utilities", () => {
+  test("merges tasks by id while preserving unchanged row identity", () => {
+    const first = {id: 1, status: "complete", tasks: [], tags: [], command: {id: 1}, operator: {username: "a"}};
+    const second = {id: 2, status: "running", tasks: [], tags: [], command: {id: 2}, operator: {username: "a"}};
+    const merged = mergeTasksByID([first, second], [
+      {...first},
+      {...second, status: "complete"},
+      {id: 3, status: "submitted", tasks: [], tags: [], command: {id: 3}, operator: {username: "a"}},
+    ]);
+
+    expect(merged.map((task) => task.id)).toEqual([1, 2, 3]);
+    expect(merged[0]).toBe(first);
+    expect(merged[1]).not.toBe(second);
+  });
+
+  test("grows the live limit only when the live result window is saturated", () => {
+    expect(nextLiveTaskLimit(20, 19)).toBe(20);
+    expect(nextLiveTaskLimit(20, 20)).toBe(40);
+    expect(nextLiveTaskLimit(40, 40)).toBe(60);
+  });
+
+  test("groups children, deduplicates replay, and notifies only changed parents", () => {
+    const store = createTaskChildrenStore();
+    const parentOneListener = jest.fn();
+    const parentTwoListener = jest.fn();
+    store.subscribe(10, parentOneListener);
+    store.subscribe(20, parentTwoListener);
+
+    const child = {id: 2, parent_task_id: 10, status: "running", tasks: [], tags: []};
+    store.merge([child, {id: 3, parent_task_id: 20, status: "complete", tasks: [], tags: []}]);
+    expect(store.getSnapshot(10)).toEqual([child]);
+    expect(parentOneListener).toHaveBeenCalledTimes(1);
+    expect(parentTwoListener).toHaveBeenCalledTimes(1);
+
+    store.merge([{...child}]);
+    expect(parentOneListener).toHaveBeenCalledTimes(1);
+
+    store.merge([{...child, status: "complete"}]);
+    expect(parentOneListener).toHaveBeenCalledTimes(2);
+    expect(parentTwoListener).toHaveBeenCalledTimes(1);
+    expect(store.getHighestTaskID()).toBe(3);
+  });
+});

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

@@ -1,9 +1,6 @@
+import {MythicActionButton} from "../../MythicComponents/MythicActionButton";
 import React, { useEffect } from 'react';
-import { styled } from '@mui/material/styles';
 import { CallbacksTabs } from './CallbacksTabs';
-import SpeedDial from '@mui/material/SpeedDial';
-import SpeedDialIcon from '@mui/material/SpeedDialIcon';
-import SpeedDialAction from '@mui/material/SpeedDialAction';
 import TocIcon from '@mui/icons-material/Toc';
 import AssessmentIcon from '@mui/icons-material/Assessment';
 import { CallbacksTop } from './CallbacksTop';
@@ -11,46 +8,11 @@ import Split from 'react-split';
 import PhoneForwardedIcon from '@mui/icons-material/PhoneForwarded';
 import {MythicDialog} from "../../MythicComponents/MythicDialog";
 import {ImportCallbackConfigDialog} from "./ImportCallbackConfigDialog";
+import {reorder} from "../../MythicComponents/MythicDraggableList";
+import Paper from '@mui/material/Paper';
+import {MythicStyledTooltip} from "../../MythicComponents/MythicStyledTooltip";
+import {useTheme} from '@mui/material/styles';
 
-const PREFIX = 'Callbacks';
-
-const classes = {
-    root: `${PREFIX}-root`,
-    speedDial: `${PREFIX}-speedDial`,
-    speedDialAction: `${PREFIX}-speedDialAction`,
-    tooltip: `${PREFIX}-tooltip`,
-    arrow: `${PREFIX}-arrow`
-};
-
-const StyledSpeedDial = styled(SpeedDial)(({theme}) => ({
-    [`&.${classes.speedDial}`]: {
-        position: 'absolute',
-        '&.MuiSpeedDial-directionUp, &.MuiSpeedDial-directionLeft': {
-            bottom: theme.spacing(2),
-            right: theme.spacing(2),
-        },
-        '&.MuiSpeedDial-directionDown, &.MuiSpeedDial-directionRight': {
-            top: theme.spacing(2),
-            right: theme.spacing(2),
-        },
-        zIndex: 4,
-    },
-
-    [`& .${classes.speedDialAction}`]: {
-        backgroundColor: theme.palette.speedDialAction,
-    },
-
-    [`& .${classes.tooltip}`]: {
-        backgroundColor: theme.palette.background.contrast,
-        color: theme.palette.text.contrast,
-        boxShadow: theme.shadows[1],
-        fontSize: 13,
-    },
-
-    [`& .${classes.arrow}`]: {
-        color: theme.palette.background.contrast,
-    }
-}));
 export const getCallbackIdFromClickedTab = (tabId) => {
     if(tabId === null || tabId === undefined){return 0}
     if(tabId === ""){return 0}
@@ -58,8 +20,12 @@ export const getCallbackIdFromClickedTab = (tabId) => {
         return Number(tabId.split("fileBrowser")[0]);
     }else if(tabId.includes("interact")){
         return Number(tabId.split("interact")[0]);
-    }else if(tabId.includes("processBrowser")){
+    }else if(tabId.includes("processBrowser")) {
         return Number(tabId.split("processBrowser")[0]);
+    }else if(tabId.includes("customFileBasedBrowser")) {
+        return Number(tabId.split("customFileBasedBrowser")[0]);
+    }else if(tabId.includes("customProcessBasedBrowser")) {
+        return Number(tabId.split("customProcessBasedBrowser")[0]);
     } else {
         console.log("unknown tab type", tabId);
         return 0;
@@ -67,7 +33,10 @@ export const getCallbackIdFromClickedTab = (tabId) => {
 }
 
 export function Callbacks({me}) {
+    const theme = useTheme();
+    const [openCallbackImport, setOpenCallbackImport] = React.useState(false);
     const [topDisplay, setTopDisplay] = React.useState('table');
+    const [newDataForTab, setNewDataForTab] = React.useState({});
     const [openTabs, setOpenTabs] = React.useState([]);
     const [clickedTabId, setClickedTabIdValue] = React.useState('');
     const openTabRef = React.useRef([]);
@@ -84,6 +53,7 @@ export function Callbacks({me}) {
             }
         }
         setClickedTabIdValue(tabID);
+        setNewDataForTab((prev) => {return {...prev, [tabID]: false}});
     }
     useEffect(() => {
         const oldTabs = localStorage.getItem('openTabs');
@@ -113,6 +83,12 @@ export function Callbacks({me}) {
     }, [openTabs])
     const onOpenTab = React.useRef( (tabData) => {
         let found = false;
+        openTabRef.current = openTabRef.current.map( (tab) => {
+            if(tab.tabID === tabData.tabID){
+                return {...tabData};
+            }
+            return {...tab};
+        })
         openTabRef.current.forEach((tab) => {
             if (tab.tabID === tabData.tabID) found = true;
         });
@@ -121,6 +97,8 @@ export function Callbacks({me}) {
             const tabs = [...openTabRef.current, { ...tabData }];
             localStorage.setItem('openTabs', JSON.stringify(tabs));
             setOpenTabs(tabs);
+        } else {
+            setOpenTabs([...openTabRef.current]);
         }
         localStorage.setItem('clickedTab', tabData.tabID);
         setClickedTabId(tabData.tabID);
@@ -192,7 +170,7 @@ export function Callbacks({me}) {
                     newOpenTabList.push(openTabs[targetTabIndex]);
                     newOpenTabList.push(openTabs[i]);
                 }
-                
+
                 setClickedTabId(openTabs[targetTabIndex].tabID)
             } else {
                 newOpenTabList.push(openTabs[i]);
@@ -225,15 +203,75 @@ export function Callbacks({me}) {
             }
         },
     ];
+    const onDragEnd = ({ destination, source }) => {
+        // dropped outside the list
+        if (!destination) return;
+        const newItems = reorder(openTabs, source.index, destination.index);
+        setOpenTabs(newItems);
+        localStorage.setItem('openTabs', JSON.stringify(newItems));
+    };
     return (
         <>
-            <SpeedDialWrapper setTopDisplay={setTopDisplay} />
             <Split direction="vertical"
                    sizes={callbackTableSplitSizes}
                    minSize={[0,0]}
                    onDragEnd={(sizes) => localStorage.setItem('callbackTableSplitSizes', JSON.stringify(sizes))}
                    style={{ height: "100%" }}>
-                <div className="bg-gray-base">
+                <div style={{display: "flex", flexDirection: "row-reverse", height: "100%", minWidth: 0, overflow: "hidden"}}>
+                    <Paper elevation={0} style={{
+                        width: "2.25rem",
+                        display: "flex",
+                        gap: "0.25rem",
+                        flexDirection: "column",
+                        alignItems: "center",
+                        overflow: "hidden",
+                        backgroundColor: theme.palette.background.paper,
+                        borderTop: `1px solid ${theme.borderColor}`,
+                        borderRight: 0,
+                        borderBottom: `1px solid ${theme.borderColor}`,
+                        borderLeft: `1px solid ${theme.borderColor}`,
+                        borderRadius: `${theme.shape.borderRadius}px 0 0 ${theme.shape.borderRadius}px`,
+                        paddingTop: "3px",
+                    }}>
+                        {topDisplay !== 'table' &&
+                            <MythicActionButton
+                                iconOnly
+                                appearance={"raised"}
+                                shape={"square"}
+                                variant={"outlined"}
+                                icon={<TocIcon />}
+                                tooltip={"Table View"}
+                                onClick={() =>setTopDisplay("table")}>
+                            </MythicActionButton>
+                        }
+                        {topDisplay !== 'graph' &&
+                            <MythicActionButton
+                                iconOnly
+                                appearance={"raised"}
+                                shape={"square"}
+                                variant={"outlined"}
+                                icon={<AssessmentIcon />}
+                                tooltip={"Graph View"}
+                                onClick={() =>setTopDisplay("graph")}>
+                            </MythicActionButton>
+                        }
+                        <MythicActionButton
+                            appearance={"raised"}
+                            iconOnly
+                            shape={"square"}
+                            colorMode={"hover"}
+                            tone={"neutral"}
+                            icon={<PhoneForwardedIcon />}
+                            tooltip={"Import previously exported Callbacks"}
+                            onClick={() =>setOpenCallbackImport(true)}>
+                        </MythicActionButton>
+                        {openCallbackImport &&
+                            <MythicDialog fullWidth={true} maxWidth="sm" open={openCallbackImport}
+                                          onClose={()=>{setOpenCallbackImport(false);}}
+                                          innerDialog={<ImportCallbackConfigDialog onClose={()=>{setOpenCallbackImport(false);}} />}
+                            />
+                        }
+                    </Paper>
                     <CallbacksTop
                         callbackTableGridRef={callbackTableGridRef}
                         topDisplay={topDisplay}
@@ -241,7 +279,7 @@ export function Callbacks({me}) {
                         onOpenTabs={onOpenTabs.current}
                         me={me} clickedTabId={clickedTabId}/>
                 </div>
-                <div className="bg-gray-mid">
+                <div >
                     <CallbacksTabs
                         onCloseTab={onCloseTab}
                         onEditTabDescription={onEditTabDescription}
@@ -251,105 +289,13 @@ export function Callbacks({me}) {
                         openTabs={openTabs}
                         onDragTab={onDragTab}
                         me={me}
+                        onDragEnd={onDragEnd}
                         contextMenuOptions={contextMenuOptions}
+                        newDataForTab={newDataForTab}
+                        setNewDataForTab={setNewDataForTab}
                     />
                 </div>
             </Split>
         </>
     );
 }
-/*
-<div style={{ maxWidth: '100%', height: '100%', flexDirection: 'column'}}>
-
-            <React.Fragment>
-                <SpeedDialWrapper setTopDisplay={setTopDisplay} heights={heights} onSubmitHeights={onSubmitHeights} />
-                <div style={{flexGrow: 1, flexBasis: heights.top, height: heights.top }}>
-                    <CallbacksTop topDisplay={topDisplay} onOpenTab={onOpenTab.current} heights={heights} me={me}/>
-                </div>
-                <div style={{ flexGrow: 1, flexBasis: heights.bottom, height: heights.bottom }}>
-                    <CallbacksTabs
-                        onCloseTab={onCloseTab}
-                        onEditTabDescription={onEditTabDescription}
-                        tabHeight={heights.bottom}
-                        maxHeight={heights.bottom}
-                        key={'callbackstabs'}
-                        clickedTabId={clickedTabId}
-                        openTabs={openTabs}
-                        onDragTab={onDragTab}
-                        me={me}
-                        contextMenuOptions={contextMenuOptions}
-                    />
-                </div>
-            </React.Fragment>
-        </div>
- */
-function SpeedDialWrapperPreMemo({ setTopDisplay }) {
-    const [open, setOpen] = React.useState(false);
-    const [openCallbackImport, setOpenCallbackImport] = React.useState(false);
-    const actions = React.useMemo(
-        () => [
-            {
-                icon: <TocIcon />,
-                name: 'Table layout',
-                onClick: () => {
-                    setTopDisplay('table');
-                },
-            },
-            {
-                icon: <AssessmentIcon />,
-                name: 'Graph layout',
-                onClick: () => {
-                    setTopDisplay('graph');
-                },
-            },
-            {
-                icon: <PhoneForwardedIcon />,
-                name: "Import Callback",
-                onClick: () => {
-                    setOpenCallbackImport(true);
-                }
-            }
-        ],
-        [] // eslint-disable-line react-hooks/exhaustive-deps
-    );
-    return (
-        <React.Fragment>
-            {openCallbackImport &&
-                <MythicDialog fullWidth={true} maxWidth="sm" open={openCallbackImport}
-                              onClose={()=>{setOpenCallbackImport(false);}}
-                              innerDialog={<ImportCallbackConfigDialog onClose={()=>{setOpenCallbackImport(false);}} />}
-                />
-            }
-            <StyledSpeedDial
-                ariaLabel='SpeedDial example'
-                className={classes.speedDial}
-                icon={<SpeedDialIcon />}
-                onClose={() => {
-                    setOpen(false);
-                }}
-                onOpen={() => {
-                    setOpen(true);
-                }}
-                FabProps={{ color: 'info', size: "small", variant: "extended" }}
-                open={open}
-                style={{ marginTop:"35px" }}
-                direction='down'>
-                {actions.map((action) => (
-                    <SpeedDialAction
-                        arrow
-                        className={classes.speedDialAction}
-                        key={action.name}
-                        TooltipClasses={{ ".MuiTooltip-tooltip": classes.tooltip,
-                            ".MuiTooltip-tooltipArrow": classes.arrow,
-
-                        }}
-                        icon={action.icon}
-                        tooltipTitle={action.name}
-                        onClick={action.onClick}
-                    />
-                ))}
-            </StyledSpeedDial>
-        </React.Fragment>
-    );
-}
-const SpeedDialWrapper = React.memo(SpeedDialWrapperPreMemo);

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

@@ -1,14 +1,8 @@
-import React, {useRef, useEffect, useState, useMemo, useContext} from 'react';
+import React, {useEffect, useState, useMemo, useContext} from 'react';
 import {DrawC2PathElementsFlowWithProvider} from './C2PathDialog';
 import {Button} from '@mui/material';
-import ButtonGroup from '@mui/material/ButtonGroup';
-import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
-import Paper from '@mui/material/Paper';
-import Grow from '@mui/material/Grow';
-import Popper from '@mui/material/Popper';
+import {MythicActionButton} from '../../MythicComponents/MythicActionButton';
 import MenuItem from '@mui/material/MenuItem';
-import MenuList from '@mui/material/MenuList';
-import ClickAwayListener from '@mui/material/ClickAwayListener';
 import {useMutation } from '@apollo/client';
 import {hideCallbackMutation, removeEdgeMutation, addEdgeMutation} from './CallbackMutations';
 import { MythicDialog } from '../../MythicComponents/MythicDialog';
@@ -23,7 +17,10 @@ import OutlinedInput from '@mui/material/OutlinedInput';
 import InputLabel from '@mui/material/InputLabel';
 import FormControl from '@mui/material/FormControl';
 import Select from '@mui/material/Select';
-import {CallbackGraphEdgesContext, CallbacksContext, OnOpenTabContext} from './CallbacksTop';
+import {CallbackGraphEdgesContext, CallbacksContext} from './CallbacksTop';
+import {GetMythicSetting} from "../../MythicComponents/MythicSavedUserSetting";
+import {operatorSettingDefaults} from "../../../cache";
+import {useTaskReferenceSubmitter} from './taskingReferences';
 
 const ITEM_HEIGHT = 48;
 const ITEM_PADDING_TOP = 1;
@@ -61,12 +58,10 @@ query loadedLinkCommandsQuery ($callback_id: Int!){
 
 const GraphViewOptions = ({viewConfig, setViewConfig}) => {
     const theme = useTheme();
-    const dropdownAnchorRef = React.useRef(null);
-    const [dropdownOpen, setDropdownOpen] = React.useState(false);
     const [showConfiguration, setShowConfiguration] = React.useState(false);
     const labelComponentOptions = ["display_id", "user", "host", "ip", "domain", "os", "process_name"];
-    const [selectedComponentOptions, setSelectedComponentOptions] = React.useState(["display_id", "user"]);
-    const [selectedGroupBy, setSelectedGroupBy] = React.useState("None");
+    const [selectedComponentOptions, setSelectedComponentOptions] = React.useState(viewConfig?.label_components || ["display_id", "user"]);
+    const [selectedGroupBy, setSelectedGroupBy] = React.useState(viewConfig?.group_by || "None");
     const groupByOptions = ["host", "user", "ip", "domain", "os", "process_name", "None"];
     const handleChange = (event) => {
         const {
@@ -86,135 +81,117 @@ const GraphViewOptions = ({viewConfig, setViewConfig}) => {
     useEffect( () => {
         setViewConfig({...viewConfig, group_by: selectedGroupBy});
     }, [selectedGroupBy])
-    const handleDropdownToggle = (evt) => {
-        evt.stopPropagation();
-        setDropdownOpen((prevOpen) => !prevOpen);
-    };
-    const handleMenuItemClick = (event, index) => {
-        options[index].click();
-        setDropdownOpen(false);
-    };
-    const options = [
-        {name: showConfiguration ? "Hide Grouping Options": "Show Grouping Options", click: () => {
-                setShowConfiguration(!showConfiguration);
-            }},
-        {name: viewConfig["include_disconnected"] ? 'Show Only Active Edges' : "Show All Edges", click: () => {
-                const view = {...viewConfig, include_disconnected: !viewConfig["include_disconnected"]};
-                setViewConfig(view);
-            }},
-        {name: viewConfig["show_all_nodes"] ? 'Hide inactive callbacks' : 'Show All Callbacks', click: () => {
-                const view = {...viewConfig, show_all_nodes: !viewConfig["show_all_nodes"]};
-                setViewConfig(view);
-            }},
-        {name: viewConfig["rankDir"] === "LR" ? 'Change Layout to Top-Bottom' : "Change Layout to Left-Right", click: () => {
-                if(viewConfig["rankDir"] === "LR"){
-                    const view = {...viewConfig, rankDir: "TB"};
-                    setViewConfig(view);
-                }else{
-                    const view = {...viewConfig, rankDir: "LR"};
-                    setViewConfig(view);
-                }
-            }},
-        {name: viewConfig["packet_flow_view"] ? "View Connection Directions" : "View Egress Routes" , click: () => {
-                const view = {...viewConfig, packet_flow_view: !viewConfig["packet_flow_view"]};
-                setViewConfig(view);
-            }},
-        ];
-    const handleClose = (event) => {
-        if (dropdownAnchorRef.current && dropdownAnchorRef.current.contains(event.target)) {
-            return;
-        }
-        setDropdownOpen(false);
-    };
+    const toggleViewConfig = (field) => {
+        setViewConfig({...viewConfig, [field]: !viewConfig[field]});
+    }
+    const toggleRankDirection = () => {
+        setViewConfig({...viewConfig, rankDir: viewConfig["rankDir"] === "LR" ? "TB" : "LR"});
+    }
     return (
-        <div >
-            <ButtonGroup variant="contained" ref={dropdownAnchorRef} aria-label="split button" style={{marginTop: "10px"}} color="primary">
-                <Button size="small" color="primary" aria-controls={dropdownOpen ? 'split-button-menu' : undefined}
-                        aria-expanded={dropdownOpen ? 'true' : undefined}
-                        aria-haspopup="menu"
-                        onClick={handleDropdownToggle}>
-                    Configure Graph View <ArrowDropDownIcon />
-                </Button>
-            </ButtonGroup>
+        <div className="mythic-callback-graph-options flex flex-column gap-4">
+            <Button
+                size="small"
+                className="mythic-callback-graph-options-toggle rounded"
+                onClick={() => setShowConfiguration(!showConfiguration)}
+            >
+                {showConfiguration ? "Hide Graph Options" : "Graph Options"}
+            </Button>
             {showConfiguration &&
-                <FormControl sx={{ width: 200,  marginTop: "10px", backgroundColor: theme.palette.background.default}} >
-                    <InputLabel id="demo-chip-label">Group Callbacks By</InputLabel>
-                    <Select
-                        labelId="demo-chip-label"
-                        id="demo-chip"
-                        value={selectedGroupBy}
-                        onChange={handleGroupByChange}
-                        input={<OutlinedInput id="select-chip" label="Group Callbacks By" />}
-                    >
-                        {groupByOptions.map((name) => (
-                            <MenuItem
-                                key={name}
-                                value={name}
+                <div className="mythic-callback-graph-options-panel flex flex-column gap-5 min-w-0 rounded bg-surface border-subtle">
+                    <div className="mythic-callback-graph-options-actions flex flex-wrap gap-3 min-w-0">
+                        <MythicActionButton
+                            size="small"
+                            className="mythic-callback-graph-option-button"
+                            colorMode={!viewConfig["include_disconnected"] ? "always" : "hover"}
+                            tone={!viewConfig["include_disconnected"] ? "success" : "neutral"}
+                            onClick={() => toggleViewConfig("include_disconnected")}
+                        >
+                            {viewConfig["include_disconnected"] ? "All Edges" : "Active Edges"}
+                        </MythicActionButton>
+                        <MythicActionButton
+                            size="small"
+                            className="mythic-callback-graph-option-button"
+                            colorMode={viewConfig["show_all_nodes"] ? "always" : "hover"}
+                            tone={viewConfig["show_all_nodes"] ? "warning" : "neutral"}
+                            onClick={() => toggleViewConfig("show_all_nodes")}
+                        >
+                            {viewConfig["show_all_nodes"] ? "All Callbacks" : "Connected Callbacks"}
+                        </MythicActionButton>
+                        <Button
+                            size="small"
+                            className="mythic-callback-graph-option-button rounded"
+                            onClick={toggleRankDirection}
+                        >
+                            {viewConfig["rankDir"] === "LR" ? "Left to Right" : "Top to Bottom"}
+                        </Button>
+                        <Button
+                            size="small"
+                            className="mythic-callback-graph-option-button rounded"
+                            onClick={() => toggleViewConfig("packet_flow_view")}
+                        >
+                            {viewConfig["packet_flow_view"] ? "Egress Routes" : "Connection Directions"}
+                        </Button>
+                    </div>
+                    <div className="mythic-callback-graph-options-fields gap-5 min-w-0 grid">
+                        <FormControl size="small" className="mythic-callback-graph-options-field">
+                            <InputLabel id="callback-graph-group-label">Group By</InputLabel>
+                            <Select
+                                labelId="callback-graph-group-label"
+                                id="callback-graph-group"
+                                value={selectedGroupBy}
+                                onChange={handleGroupByChange}
+                                input={<OutlinedInput id="select-callback-graph-group" label="Group By" />}
                             >
-                                {name}
-                            </MenuItem>
-                        ))}
-                    </Select>
-                </FormControl>
-            }
-            {showConfiguration &&
-                <FormControl sx={{minWidth: 300, marginTop: "10px",backgroundColor: theme.palette.background.default}}>
-                    <InputLabel id="demo-multiple-chip-label">Display Properties per Callback</InputLabel>
-                    <Select
-                        labelId="demo-multiple-chip-label"
-                        id="demo-multiple-chip"
-                        multiple
-                        value={selectedComponentOptions}
-                        onChange={handleChange}
-                        input={<OutlinedInput id="select-multiple-chip" label="Display Properties per Callback" />}
-                        MenuProps={MenuProps}
-                    >
-                        {labelComponentOptions.map((name) => (
-                            <MenuItem
-                                key={name}
-                                value={name}
-                                style={getStyles(name, selectedComponentOptions, theme)}
-                            >
-                                {name}
-                            </MenuItem>
-                        ))}
-                    </Select>
-                </FormControl>
-            }
-
-        <Popper open={dropdownOpen} anchorEl={dropdownAnchorRef.current} transition role={undefined} style={{zIndex: 200}}>
-            {({ TransitionProps, placement }) => (
-                <Grow
-                    {...TransitionProps}
-                    style={{
-                        transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom',
-                    }}
-                >
-                    <Paper style={{backgroundColor: theme.palette.mode === 'dark' ? theme.palette.primary.dark : theme.palette.primary.light, color: "white"}}>
-                        <ClickAwayListener onClickAway={handleClose}>
-                            <MenuList id="split-button-menu">
-                                {options.map((option, index) => (
+                                {groupByOptions.map((name) => (
                                     <MenuItem
-                                        key={option.name}
-                                        onClick={(event) => handleMenuItemClick(event, index)}
+                                        key={name}
+                                        value={name}
                                     >
-                                        {option.name}
+                                        {name}
                                     </MenuItem>
                                 ))}
-                            </MenuList>
-                        </ClickAwayListener>
-                    </Paper>
-                </Grow>
-            )}
-        </Popper>
+                            </Select>
+                        </FormControl>
+                        <FormControl size="small" className="mythic-callback-graph-options-field mythic-callback-graph-options-field-wide">
+                            <InputLabel id="callback-graph-label-components-label">Callback Labels</InputLabel>
+                            <Select
+                                labelId="callback-graph-label-components-label"
+                                id="callback-graph-label-components"
+                                multiple
+                                value={selectedComponentOptions}
+                                onChange={handleChange}
+                                input={<OutlinedInput id="select-callback-graph-label-components" label="Callback Labels" />}
+                                MenuProps={MenuProps}
+                                renderValue={(selected) => selected.join(", ")}
+                            >
+                                {labelComponentOptions.map((name) => (
+                                    <MenuItem
+                                        key={name}
+                                        value={name}
+                                        style={getStyles(name, selectedComponentOptions, theme)}
+                                    >
+                                        {name}
+                                    </MenuItem>
+                                ))}
+                            </Select>
+                        </FormControl>
+                    </div>
+                    {viewConfig["show_all_nodes"] &&
+                        <div className="mythic-callback-graph-options-warning text-xs rounded mythic-tone-warning bg-tone-1 border border-tone-2 text-tone">
+                            Showing all callbacks can be slow in large operations.
+                        </div>
+                    }
+                </div>
+            }
         </div>
     )
 }
 export function CallbacksGraph({onOpenTab}){
-    const theme = useTheme();
     const callbacks = useContext(CallbacksContext);
     const callbackgraphedges = useContext(CallbackGraphEdgesContext);
     //used for creating a task to do a link command
+    const [loadingSettings, setLoadingSettings] = React.useState(true);
+    const [filterOptions, setFilterOptions] = React.useState({});
     const [linkCommands, setLinkCommands] = React.useState([]);
     const [openParametersDialog, setOpenParametersDialog] = React.useState(false);
     const [openSelectLinkCommandDialog, setOpenSelectLinkCommandDialog] = React.useState(false);
@@ -256,17 +233,18 @@ export function CallbacksGraph({onOpenTab}){
             
         }
     });
+    const {submitTask, dialog: taskReferenceSubmitDialog} = useTaskReferenceSubmitter(createTask);
     const submitParametersDialog = (cmd, parameters, files) => {
         setOpenParametersDialog(false);
-        createTask({variables: {callback_id: selectedCallback.id, command: cmd, params: parameters, files}});
+        submitTask({variables: {callback_display_id: selectedCallback.display_id, command: cmd, params: parameters, files}});
     }
     const [viewConfig, setViewConfig] = React.useState({
         rankDir: "TB",
         label_components: ["display_id", "user"],
         packet_flow_view: true,
-        include_disconnected: true,
+        include_disconnected: false,
         show_all_nodes: false,
-        group_by: "None"
+        group_by: "host"
     });
     const [hideCallback] = useMutation(hideCallbackMutation, {
         update: (cache, {data}) => {
@@ -321,19 +299,20 @@ export function CallbacksGraph({onOpenTab}){
     }
     const contextMenu = useMemo(() => {return [
 	        {
-		        title: 'Hide Callback',
-		        onClick: function(node) {
-		            hideCallback({variables: {callback_display_id: node.display_id}});
-		        }
-	        },
-	        {
-		        title: 'Interact',
+		        title: 'Open Tasking',
                 onClick: function(node){
 		            onOpenTab({tabType: "interact", tabID: node.callback_id + "interact", callbackID: node.callback_id});
 	            }
             },
             {
-	            title: "Manually Remove Edge",
+                title: "Add P2P Edge",
+                onClick: function(node){
+                    setAddEdgeSource(node);
+                    setManuallyAddEdgeDialogOpen(true);
+                }
+	        },
+            {
+	            title: "Remove Active Edge",
                 onClick: function(node){
 	                const opts = callbackgraphedges.reduce( (prev, e) => {
                         if(e.source.id === node.id || e.destination.id === node.id){
@@ -355,15 +334,8 @@ export function CallbacksGraph({onOpenTab}){
 	                setManuallyRemoveEdgeDialogOpen(true);
                 }
             },
-            {
-                title: "Manually Add Edge",
-                onClick: function(node){
-                    setAddEdgeSource(node);
-                    setManuallyAddEdgeDialogOpen(true);
-                }
-	        },
 	        {
-	            title: "Task Callback for Edge",
+	            title: "Task Link Command",
                 onClick: function(node){
 	                setLinkCommands([]);
                     setSelectedLinkCommand(null);
@@ -372,15 +344,48 @@ export function CallbacksGraph({onOpenTab}){
 	                setSelectedCallback(node);
                 }
             },
-        ]}, [getLinkCommands, hideCallback, viewConfig, onOpenTab]);
-
+	        {
+		        title: 'Hide Callback',
+		        onClick: function(node) {
+		            hideCallback({variables: {callback_display_id: node.display_id}});
+		        }
+	        },
+        ]}, [getLinkCommands, hideCallback, callbackgraphedges, onOpenTab]);
+    React.useEffect( () => {
+        try {
+            const storageItemOptions = GetMythicSetting({setting_name: "callbacks_table_filter_options", default_value: operatorSettingDefaults.callbacks_table_filters});
+            if(storageItemOptions !== null){
+                setFilterOptions(storageItemOptions);
+            }
+        }catch(error){
+            console.log("Failed to load callbacks_table_filter_options", error);
+        }
+        setLoadingSettings(false);
+    }, []);
+    if(loadingSettings){
+        return (<div style={{width: '100%', height: '100%', position: "relative",}}>
+            <div style={{overflowY: "hidden", flexGrow: 1}}>
+                <div style={{
+                    position: "absolute",
+                    left: "35%",
+                    top: "40%"
+                }}>
+                    {"Loading Callbacks and Connections..."}
+                </div>
+            </div>
+        </div>)
+    }
     return (
         <div style={{maxWidth: "100%", "overflow": "hidden", height: "100%"}}>
+            {taskReferenceSubmitDialog}
 
             {manuallyRemoveEdgeDialogOpen &&
                 <MythicDialog fullWidth={true} maxWidth="sm" open={manuallyRemoveEdgeDialogOpen}
-                    onClose={()=>{setManuallyRemoveEdgeDialogOpen(false);}} 
-                    innerDialog={<MythicSelectFromListDialog onClose={()=>{setManuallyRemoveEdgeDialogOpen(false);}} identifier="id" display="display"
+                              onClose={() => {
+                                  setManuallyRemoveEdgeDialogOpen(false);
+                              }}
+                              innerDialog={<MythicSelectFromListDialog onClose={() => {
+                                  setManuallyRemoveEdgeDialogOpen(false);}} identifier="id" display="display"
                                         onSubmit={onSubmitManuallyRemoveEdge} options={edgeOptions} title={"Manually Remove Edge"} action={"remove"} />}
                 />
             }
@@ -394,7 +399,7 @@ export function CallbacksGraph({onOpenTab}){
             {openParametersDialog &&
                 <MythicDialog fullWidth={true} maxWidth="lg" open={openParametersDialog} 
                     onClose={()=>{setOpenParametersDialog(false);}} 
-                    innerDialog={<TaskParametersDialog command={selectedLinkCommand} callback={selectedCallback} onSubmit={submitParametersDialog} onClose={()=>{setOpenParametersDialog(false);}} />}
+                    innerDialog={<TaskParametersDialog command={selectedLinkCommand} callback={selectedCallback} callback_display_id={selectedCallback?.display_id} onSubmit={submitParametersDialog} onClose={()=>{setOpenParametersDialog(false);}} />}
                 />
             }
             {openSelectLinkCommandDialog &&
@@ -405,9 +410,9 @@ export function CallbacksGraph({onOpenTab}){
                                         action={"select"} display={"display"} identifier={"display"}/>}
                 />
             }
-            <DrawC2PathElementsFlowWithProvider providedNodes={callbacks} edges={callbackgraphedges} view_config={viewConfig} theme={theme}
-                panel={<GraphViewOptions setViewConfig={setViewConfig} viewConfig={viewConfig} />} contextMenu={contextMenu}/>
+            <DrawC2PathElementsFlowWithProvider providedNodes={callbacks} edges={callbackgraphedges} view_config={viewConfig}
+                                                    filterOptions={filterOptions}
+                                                    panel={<GraphViewOptions setViewConfig={setViewConfig} viewConfig={viewConfig} />} contextMenu={contextMenu}/>
         </div>
     );
 }
-

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

@@ -0,0 +1,134 @@
+import {MythicActionButton} from "../../MythicComponents/MythicActionButton";
+import React from 'react';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import {MythicDraggablePortal, reorder} from "../../MythicComponents/MythicDraggableList";
+import {
+    Draggable,
+    DragDropContext,
+    Droppable,
+} from "@hello-pangea/dnd";
+import DragHandleIcon from '@mui/icons-material/DragHandle';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import {
+    MythicDialogBody,
+    MythicDialogButton,
+    MythicDialogFooter,
+    MythicDialogSection,
+} from "../../MythicComponents/MythicDialogLayout";
+
+export function CallbacksTableColumnsReorderDialog({initialItems, onSubmit, onClose, onReset, visible, hidden}) {
+    const [items, setItems] = React.useState(initialItems);
+    const onDragEnd = ({ destination, source }) => {
+        // dropped outside the list
+        if (!destination) return;
+        const newItems = reorder(items, source.index, destination.index);
+        setItems(newItems);
+    };
+    React.useEffect( () => {
+        setItems((currentItems) => currentItems.map( c => {
+            if(visible.includes(c.name)){
+                return {...c, visible: true};
+            }
+            return {...c, visible: false};
+        }));
+    }, [visible, hidden]);
+    const onToggleVisibility = (i) => {
+        const newItems = items.map( (c, index) => {
+            if(index === i){
+                return {...c, visible: !c.visible};
+            }
+            return {...c};
+        });
+        setItems(newItems);
+    }
+    const onFinish = () => {
+        onSubmit(items);
+    }
+
+  return (
+    <React.Fragment>
+        <DialogTitle id="form-dialog-title">Column Layout</DialogTitle>
+        <DialogContent dividers={true} sx={{p: 0, overflow: "hidden"}}>
+            <MythicDialogBody sx={{height: "min(70vh, 42rem)", p: 1}}>
+                <MythicDialogSection
+                    title="Columns"
+                    sx={{display: "flex", flexDirection: "column", flex: "1 1 auto", minHeight: 0}}
+                >
+                    <DraggableList items={items} onToggleVisibility={onToggleVisibility} onDragEnd={onDragEnd} />
+                </MythicDialogSection>
+            </MythicDialogBody>
+        </DialogContent>
+        <MythicDialogFooter>
+          <MythicDialogButton onClick={onClose}>
+            Close
+          </MythicDialogButton>
+            <MythicDialogButton onClick={onReset} intent="warning">
+                Reset
+            </MythicDialogButton>
+          <MythicDialogButton onClick={onFinish} intent="primary">
+            Save
+          </MythicDialogButton>
+        </MythicDialogFooter>
+  </React.Fragment>
+  );
+}
+
+export const DraggableList = ({ items, onDragEnd, onToggleVisibility }) => {
+    return (
+        <DragDropContext onDragEnd={onDragEnd}>
+            <Droppable droppableId="callback-table-column-list">
+                {(provided) => (
+                    <div className="mythic-reorder-list flex flex-fill flex-column gap-4 min-h-0 overflow-auto" ref={provided.innerRef} {...provided.droppableProps}>
+                        {items.map((item, index) => (
+                            <DraggableListItem onToggleVisibility={onToggleVisibility} item={item} index={index} key={item.key} />
+                        ))}
+                        {provided.placeholder}
+                    </div>
+                )}
+            </Droppable>
+        </DragDropContext>
+    );
+};
+export const DraggableListItem = ({ item, index, onToggleVisibility }) => {
+    return (
+        <Draggable draggableId={item.key} index={index}>
+            {(provided, snapshot) => {
+                const row = (
+                    <div
+                        ref={provided.innerRef}
+                        className={`mythic-reorder-row items-center flex flex-none gap-4 rounded bg-surface-raised border-subtle text-primary shadow-none${snapshot.isDragging ? " mythic-reorder-row-dragging mythic-tone-primary bg-tone-1 border-tone-3 shadow-3" : ""}${item.visible ? "" : " mythic-reorder-row-disabled"} min-w-0 w-full`}
+                        {...provided.draggableProps}
+                    >
+                        <span className="mythic-reorder-drag-handle items-center inline-flex justify-center rounded bg-neutral-2 border-subtle text-muted" {...provided.dragHandleProps}>
+                            <DragHandleIcon fontSize="small" />
+                        </span>
+                        <div className="mythic-reorder-row-main items-center flex flex-fill gap-4 min-w-0">
+                            <span className="mythic-reorder-row-title text-sm font-750 leading-125 min-w-0 truncate whitespace-nowrap">{item.name}</span>
+                        </div>
+                        <div className="mythic-reorder-row-actions items-center flex flex-none gap-3">
+                            <MythicActionButton iconOnly
+                                aria-label={item.visible ? `Hide ${item.name}` : `Show ${item.name}`}
+                                appearance="raised" colorMode="hover" tone={item.visible ? "error" : "info"}
+                                size="small"
+                                onClick={() => onToggleVisibility(index)}
+                            >
+                                {item.visible ? (
+                                    <VisibilityIcon fontSize="small" />
+                                ) : (
+                                    <VisibilityOffIcon fontSize="small" />
+                                )}
+                            </MythicActionButton>
+                        </div>
+                    </div>
+                );
+                return (
+                    <MythicDraggablePortal isDragging={snapshot.isDragging}>
+                        {row}
+                    </MythicDraggablePortal>
+                );
+            }}
+        </Draggable>
+    );
+};

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

@@ -0,0 +1,141 @@
+import React, {useEffect} from 'react';
+import {MythicActionButton} from '../../MythicComponents/MythicActionButton';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import Box from '@mui/material/Box';
+import AceEditor from 'react-ace';
+import "ace-builds/src-noconflict/mode-json";
+import "ace-builds/src-noconflict/theme-github";
+import "ace-builds/src-noconflict/theme-monokai";
+import "ace-builds/src-noconflict/ext-searchbox";
+import {useTheme} from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+import {getReadableTextColor, isValidHexColor, MythicColorSwatchInput} from '../../MythicComponents/MythicColorInput';
+
+export function CallbacksTableEditDescriptionColorDialog(props) {
+  const [comment, setComment] = React.useState("");
+  const [color, setColor] = React.useState("");
+  const theme = useTheme();
+    const onCommitSubmit = () => {
+        const normalizedColor = color?.toLowerCase() || "";
+        if(normalizedColor === "" || normalizedColor === "ffffff" || normalizedColor === "#ffffff" ||
+            normalizedColor === "000000" || normalizedColor === "#000000"){
+            props.onSubmit(comment, "");
+        } else {
+            props.onSubmit(comment, color);
+        }
+        if(props.dontCloseOnSubmit){
+            return;
+        }
+        props.onClose();
+    }
+    const onChange = (value) => {
+        setComment(value);
+    }
+    useEffect( () => {
+        try{
+            setComment(JSON.stringify(JSON.parse(props.description), null, 2));
+        }catch(error){
+            setComment(props.description);
+        }
+        setColor(props.color);
+    }, [props.description, props.color]);
+    const previewColor = isValidHexColor(color) ? color : "";
+    const darkPreviewBackground = previewColor || "#1f2937";
+    const lightPreviewBackground = previewColor || "#f8fafc";
+    const darkPreviewTextColor = previewColor ? getReadableTextColor(previewColor) : "#ffffff";
+    const lightPreviewTextColor = previewColor ? getReadableTextColor(previewColor) : "#111827";
+  return (
+    <React.Fragment>
+        <DialogTitle id="form-dialog-title">{props.title}</DialogTitle>
+        <DialogContent dividers={true} style={{height: "100%", margin: 0, padding: 0}}>
+            <AceEditor
+                mode="json"
+                theme={theme.palette.mode === 'dark' ? 'monokai' : 'github'}
+                width="100%"
+                height="100%"
+                fontSize={14}
+                wrapEnabled={props.wrap ? props.wrap : false}
+                minLines={props.maxRows ? props.maxRows : 3}
+                maxLines={props.maxRows ? props.maxRows : 3}
+                value={comment}
+                focus={true}
+                onChange={onChange}
+                setOptions={{
+                    tabSize: 4,
+                    useWorker: false,
+                    showInvisibles: false,
+                }}
+            />
+            <Box sx={{p: 1.5, borderTop: "1px solid", borderColor: "divider", backgroundColor: "background.paper"}}>
+                <Box
+                    sx={{
+                        p: 1.5,
+                        border: "1px solid",
+                        borderColor: "divider",
+                        borderRadius: "8px",
+                    }}
+                >
+                    <Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, mb: 1}}>
+                        <Box sx={{minWidth: 0}}>
+                            <Typography variant="body2" sx={{fontWeight: 700}}>Callback Color</Typography>
+                            <Typography variant="caption" sx={{color: "text.secondary"}}>Callback row background and tasking accent</Typography>
+                        </Box>
+                        <Box sx={{display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap", justifyContent: "flex-end"}}>
+                            <MythicColorSwatchInput
+                                color={isValidHexColor(color) ? color : "#000000"}
+                                label="Callback color"
+                                onChange={setColor}
+                            />
+                            <MythicActionButton colorMode="always" onClick={() => setColor("")} tone="success" variant="outlined" size="small">
+                                Clear
+                            </MythicActionButton>
+                        </Box>
+                    </Box>
+                    <Box sx={{display: "grid", gridTemplateColumns: {xs: "1fr", sm: "1fr 1fr"}, gap: 1}}>
+                        <Box
+                            sx={{
+                                minHeight: 40,
+                                px: 1.5,
+                                display: "flex",
+                                alignItems: "center",
+                                borderRadius: "6px",
+                                border: "1px solid",
+                                borderColor: "divider",
+                                backgroundColor: darkPreviewBackground,
+                            }}
+                        >
+                            <Typography sx={{color: darkPreviewTextColor, fontWeight: 700}}>Dark callback row</Typography>
+                        </Box>
+                        <Box
+                            sx={{
+                                minHeight: 40,
+                                px: 1.5,
+                                display: "flex",
+                                alignItems: "center",
+                                borderRadius: "6px",
+                                border: "1px solid",
+                                borderColor: "divider",
+                                backgroundColor: lightPreviewBackground,
+                            }}
+                        >
+                            <Typography sx={{color: lightPreviewTextColor, fontWeight: 700}}>Light callback row</Typography>
+                        </Box>
+                    </Box>
+                </Box>
+            </Box>
+        </DialogContent>
+        <DialogActions>
+          <MythicActionButton colorMode="always" onClick={props.onClose} tone="primary" variant="contained">
+            Close
+          </MythicActionButton>
+            {props.onSubmit &&
+                <MythicActionButton colorMode="always" onClick={onCommitSubmit} tone="success" variant="contained">
+                    Submit
+                </MythicActionButton>
+            }
+        </DialogActions>
+    </React.Fragment>
+  );
+}

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

@@ -0,0 +1,102 @@
+import React, {useEffect} from 'react';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import Typography from '@mui/material/Typography';
+import NotificationsActiveTwoToneIcon from '@mui/icons-material/NotificationsActiveTwoTone';
+import MythicTextField from "../../MythicComponents/MythicTextField";
+import {
+    MythicDialogBody,
+    MythicDialogButton,
+    MythicDialogFooter,
+    MythicDialogSection,
+    MythicForm,
+    MythicFormField
+} from "../../MythicComponents/MythicDialogLayout";
+
+export function CallbacksTableEditTriggerOnCheckinDialog(props) {
+    const [comment, setComment] = React.useState(0);
+    const onChange = (name, value, error) => {
+        if(isNaN(parseInt(value))){
+            setComment(0);
+        } else {
+            setComment(parseInt(value));
+        }
+    }
+    useEffect( () => {
+        setComment(props.trigger_on_checkin_after_time);
+    }, [props.trigger_on_checkin_after_time]);
+    const onSubmit = () => {
+        props.onSubmit(comment);
+    }
+  return (
+    <React.Fragment>
+        <DialogTitle id="form-dialog-title">Callback check-in alert</DialogTitle>
+        <DialogContent dividers={true}>
+            <MythicDialogBody>
+                <div className="mythic-callback-trigger-summary p-6 items-start flex gap-6 min-w-0 rounded bg-surface-muted border-subtle">
+                    <span className={`mythic-callback-trigger-summary-icon items-center inline-flex flex-none justify-center rounded bg-neutral-1 border-subtle text-muted${comment > 0 ? " mythic-callback-trigger-summary-icon-active" : ""}`}>
+                        <NotificationsActiveTwoToneIcon fontSize="small" />
+                    </span>
+                    <div className="mythic-callback-trigger-summary-copy min-w-0">
+                        <Typography className="mythic-callback-trigger-summary-title">
+                            {comment > 0 ? `Alert after ${comment} minute${comment === 1 ? "" : "s"} without a check-in` : "Alerting disabled"}
+                        </Typography>
+                        <Typography className="mythic-callback-trigger-summary-description">
+                            This setting only triggers when the callback checks in after crossing the configured threshold.
+                        </Typography>
+                    </div>
+                </div>
+                <MythicDialogSection
+                    title="Threshold"
+                    description="Set how many minutes this callback can remain silent before its next check-in can trigger eventing."
+                >
+                    <MythicForm>
+                        <MythicFormField
+                            label="Minutes without a check-in"
+                            description="Use 0 to disable this alert for the callback."
+                        >
+                            <div className="mythic-form-field-control min-w-0 w-full">
+                                <MythicTextField
+                                    autoFocus={true}
+                                    onChange={onChange}
+                                    type="number"
+                                    value={comment}
+                                    onEnter={onSubmit}
+                                    name="Trigger threshold"
+                                    showLabel={false}
+                                    marginTop="0"
+                                    marginBottom="0"
+                                    InputProps={{inputProps: {min: 0}}}
+                                />
+                            </div>
+                        </MythicFormField>
+                    </MythicForm>
+                </MythicDialogSection>
+                <MythicDialogSection title="Eventing behavior">
+                    <div className="mythic-callback-trigger-rule-list gap-4 grid">
+                        <div className="mythic-callback-trigger-rule text-xs leading-140 rounded bg-surface-muted border-subtle text-muted">
+                            Trigger name: <strong>callback_checkin</strong>
+                        </div>
+                        <div className="mythic-callback-trigger-rule text-xs leading-140 rounded bg-surface-muted border-subtle text-muted">
+                            Matching workflow filters still apply, including payload type and supported OS restrictions.
+                        </div>
+                        <div className="mythic-callback-trigger-rule text-xs leading-140 rounded bg-surface-muted border-subtle text-muted">
+                            If no matching workflow exists, no workflow will run.
+                        </div>
+                    </div>
+                </MythicDialogSection>
+            </MythicDialogBody>
+        </DialogContent>
+        <MythicDialogFooter>
+          <MythicDialogButton onClick={props.onClose}>
+            Close
+          </MythicDialogButton>
+            {props.onSubmit &&
+                <MythicDialogButton onClick={onSubmit} intent="primary">
+                    Save Threshold
+                </MythicDialogButton>
+            }
+        </MythicDialogFooter>
+    </React.Fragment>
+  );
+}

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

@@ -1,11 +1,9 @@
 import React, {useCallback, useEffect, useContext} from 'react';
-import {IconButton} from '@mui/material';
 import { MythicDialog } from '../../MythicComponents/MythicDialog';
 import { MythicDisplayTextDialog} from '../../MythicComponents/MythicDisplayTextDialog';
 import {MythicModifyStringDialog} from '../../MythicComponents/MythicDialog';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import KeyboardIcon from '@mui/icons-material/Keyboard';
-import LockIcon from '@mui/icons-material/Lock';
 import WifiIcon from '@mui/icons-material/Wifi';
 import InsertLinkTwoToneIcon from '@mui/icons-material/InsertLinkTwoTone';
 import {C2PathDialog} from './C2PathDialog';
@@ -15,25 +13,29 @@ import {
 } from './CallbackMutations';
 import {useMutation } from '@apollo/client';
 import SnoozeIcon from '@mui/icons-material/Snooze';
-import {useTheme} from '@mui/material/styles';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import {faQuestion, faSkullCrossbones, faRobot} from '@fortawesome/free-solid-svg-icons';
+import {faQuestion, faRobot} from '@fortawesome/free-solid-svg-icons';
 import {faLinux, faApple, faWindows, faChrome, faAndroid} from '@fortawesome/free-brands-svg-icons';
 import { MythicStyledTooltip } from '../../MythicComponents/MythicStyledTooltip';
 import { MythicSelectFromRawListDialog } from '../../MythicComponents/MythicSelectFromListDialog';
 import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore';
 import { areEqual } from 'react-window';
 import {CallbackGraphEdgesContext, OnOpenTabContext} from './CallbacksTop';
-import Moment from 'react-moment';
-import moment from 'moment';
-import {useMythicSetting} from "../../MythicComponents/MythicSavedUserSetting";
+import {GetMythicSetting} from "../../MythicComponents/MythicSavedUserSetting";
 import TerminalIcon from '@mui/icons-material/Terminal';
 import VerticalSplitIcon from '@mui/icons-material/VerticalSplit';
+import {faSocks} from '@fortawesome/free-solid-svg-icons';
+import {TagsDisplay, ViewEditTags} from "../../MythicComponents/MythicTag";
+import {MythicActionButton} from "../../MythicComponents/MythicActionButton";
+import {MythicStatusChip} from "../../MythicComponents/MythicStatusChip";
+import {MythicTimestamp} from "../../MythicComponents/MythicTimestamp";
+import ButtonGroup from "@mui/material/ButtonGroup";
+import Button from "@mui/material/Button";
 
-export const CallbacksTableIDCell = React.memo(({rowData, metaDialog, updateDescription, editMythicTreeGroupsDialog, setOpenHideMultipleDialog, setOpenTaskMultipleDialog, callbackDropdown}) =>{
+export const CallbacksTableIDCell = React.memo(({rowData, callbackDropdown, onOpenTriggerDialog, onOpenUnlockDialog}) =>{
     const dropdownAnchorRef = React.useRef(null);
     const onOpenTab = useContext(OnOpenTabContext);
-    const interactType = useMythicSetting({setting_name: "interactType", default_value: "interact", output: "string"})
+    const interactType = GetMythicSetting({setting_name: "interactType", default_value: "interact"})
     const [rowDataStatic, setRowDataStatic] = React.useState(rowData);
     React.useEffect( () => {
         let update = false;
@@ -55,43 +57,127 @@ export const CallbacksTableIDCell = React.memo(({rowData, metaDialog, updateDesc
         if(rowData.id !== rowDataStatic.id){
             update = true;
         }
+        if(rowData.color !== rowDataStatic.color){
+            update = true;
+        }
+        if(rowData.trigger_on_checkin_after_time !== rowDataStatic.trigger_on_checkin_after_time){
+            update = true;
+        }
+        if(rowData.callbackports.length !== rowDataStatic.callbackports.length){
+            update = true;
+        }
         if(update){
             setRowDataStatic(rowData);
         }
     }, [rowData]);
+    const proxyMessage = useCallback(() => {
+        let message = [];
+        for(let i = 0; i < rowDataStatic?.callbackports?.length || 0; i++){
+            switch(rowDataStatic.callbackports[i].port_type){
+                case "socks":
+                    if(rowDataStatic.callbackports[i].username === ""){
+                        message.push(`socks: ${rowDataStatic.callbackports[i].local_port}`);
+                    } else {
+                        message.push(`socks: ${rowDataStatic.callbackports[i].local_port}, ${rowDataStatic.callbackports[i].username}:${rowDataStatic.callbackports[i].password}`);
+                    }
+                    break;
+                case "rpfwd":
+                    if(rowDataStatic.callbackports[i].username === ""){
+                        message.push(`rpfwd: ${rowDataStatic.callbackports[i].local_port}->${rowDataStatic.callbackports[i].remote_ip}:${rowDataStatic.callbackports[i].remote_port}`);
+                    } else {
+                        message.push(`pfwd: ${rowDataStatic.callbackports[i].local_port}->${rowDataStatic.callbackports[i].remote_ip}:${rowDataStatic.callbackports[i].remote_port}, ${rowDataStatic.callbackports[i].username}:${rowDataStatic.callbackports[i].password}`);
+                    }
+                    break;
+                case "interactive":
+                    message.push(`interactive: ${rowDataStatic.callbackports[i].local_port}`);
+                    break;
+            }
+        }
+        return message.join("\n");
+    }, [rowDataStatic]);
     const handleDropdownToggle = (event) => {
         event.stopPropagation();
         callbackDropdown({rowDataStatic, event});
     };
+    const handleOpenTriggerDialog = (event) => {
+        event.stopPropagation();
+        onOpenTriggerDialog?.(rowDataStatic);
+    };
+    const handleOpenUnlockDialog = (event) => {
+        event.stopPropagation();
+        onOpenUnlockDialog?.(rowDataStatic);
+    };
     const localOnOpenTab = () => {
         onOpenTab({tabType: interactType, tabID: rowDataStatic.id + interactType, callbackID: rowDataStatic.id,  displayID: rowDataStatic.display_id});
     }
-    let defaultInteractIcon = <KeyboardIcon style={{paddingRight: "5px"}}/>;
+    let defaultInteractIcon = <KeyboardIcon fontSize="small" />;
     if(interactType === "interactSplit"){
-        defaultInteractIcon = <VerticalSplitIcon style={{paddingRight: "5px"}}/>;
+        defaultInteractIcon = <VerticalSplitIcon fontSize="small" />;
     } else if(interactType === "interactConsole"){
-        defaultInteractIcon = <TerminalIcon style={{paddingRight: "5px"}}/>;
+        defaultInteractIcon = <TerminalIcon fontSize="small" />;
+    }
+    const highIntegrity = rowDataStatic.integrity_level >= 3;
+    const lockOwner = rowDataStatic.locked_operator?.username || "unknown operator";
+    const onOpenTabClick = (e) => {
+        e.stopPropagation();
+        localOnOpenTab()
     }
-
     return (
-        <div id={`callbacksTableID${rowDataStatic.id}`}>
-                <IconButton style={{padding: 0, margin: 0}} color={rowDataStatic.integrity_level > 2 ? "error" : ""}
-                    onClick={(evt) => {evt.stopPropagation();localOnOpenTab()}}
+        <div id={`callbacksTableID${rowDataStatic.id}`} className="mythic-callback-interactCell items-center inline-flex gap-1 overflow-hidden w-full">
+            <ButtonGroup className="mythic-split-action-group inline-flex " >
+                <MythicActionButton
+                    appearance={"raised"}
+                    compact
+                    colorMode={highIntegrity ? "always" : "hover"}
+                    icon={defaultInteractIcon}
+                    onClick={onOpenTabClick}
+                    tone={highIntegrity ? "error" : "primary"}
+                    tooltip={`Open ${interactType === "interactSplit" ? "split" : interactType === "interactConsole" ? "console" : "tasking"} view${highIntegrity ? " - high integrity callback" : ""}`}
                 >
-                    {rowDataStatic.locked ? (<LockIcon  style={{marginRight: "10px"}} />):(defaultInteractIcon)}
-                </IconButton>
-            {rowDataStatic.display_id}
-                <IconButton
-                    style={{margin: 0, padding: 0}}
-                    color={rowDataStatic.integrity_level > 2 ? "error" : ""}
+                    <span className="font-700 font-mono text-output">
+                        {rowDataStatic.display_id}
+                    </span>
+                </MythicActionButton>
+                <MythicActionButton
+                    appearance={"raised"}
+                    compact
                     aria-haspopup="menu"
+                    icon={<ArrowDropDownIcon />}
                     onClick={handleDropdownToggle}
                     ref={dropdownAnchorRef}
-                >
-                <ArrowDropDownIcon/>
-                </IconButton>
+                    colorMode={highIntegrity ? "always" : "hover"}
+                    tone={highIntegrity ? "error" : "primary"}
+                />
+            </ButtonGroup>
 
-    </div>
+            {rowDataStatic.locked &&
+                <MythicStyledTooltip title={`Locked by ${lockOwner}`}>
+                    <MythicStatusChip
+                        aria-label={`Unlock callback ${rowDataStatic.display_id}`}
+                        compact
+                        iconOnly
+                        onClick={handleOpenUnlockDialog}
+                        status="locked"
+                    />
+                </MythicStyledTooltip>
+            }
+            {rowDataStatic.trigger_on_checkin_after_time > 0 &&
+                <MythicStyledTooltip title={`Alert on callback after no checkin for ${rowDataStatic.trigger_on_checkin_after_time} minutes`}>
+                    <MythicStatusChip
+                        aria-label={`Adjust alert trigger for callback ${rowDataStatic.display_id}`}
+                        compact
+                        iconOnly
+                        onClick={handleOpenTriggerDialog}
+                        status="alerting"
+                    />
+                </MythicStyledTooltip>
+            }
+            {rowDataStatic.callbackports.length > 0 &&
+                <MythicStyledTooltip title={proxyMessage()}>
+                    <MythicStatusChip compact icon={<FontAwesomeIcon icon={faSocks} />} iconOnly label="Proxy active" />
+                </MythicStyledTooltip>
+            }
+        </div>
     )
 },
     areEqual)
@@ -100,48 +186,42 @@ export const CallbacksTableStringCell = React.memo(({rowData, cellData}) => {
         <div>{cellData}</div>
     )
 }, areEqual)
-export const CallbacksTableLastCheckinCell = React.memo( ({rowData, cellData}) => {
-    const adjustOutput = (newTime) => {
-        if(newTime === "a few seconds"){
-            moment.relativeTimeThreshold('s', 60);
-            moment.relativeTimeThreshold('ss', 0);
-            return moment(rowData.last_checkin + "Z", "YYYY-MM-DDTHH:mm:ss.SSSSSSZ").fromNow(true)
-        }
-        return newTime;
-    }
-    const theme = useTheme();
+export const CallbacksTableLastCheckinCell = React.memo( ({rowData, cellData, me}) => {
     if(rowData?.payload?.payloadtype?.agent_type !== "agent"){
         return ""
     }
     if(rowData.last_checkin === "1970-01-01T00:00:00"){
         return (
-            <>
-            {rowData.dead &&
-                <MythicStyledTooltip title={"Based on callback's last checkin and sleep info, it's likely dead"}>
-                    <FontAwesomeIcon disabled icon={faSkullCrossbones} style={{
-                        color: theme.palette.error.main, cursor: "pointer", marginRight: "10px",}} />
-                </MythicStyledTooltip>
-            }
-            {"Streaming Now"}
-            </>
+            <div className="mythic-callback-cellInline items-center inline-flex gap-2 h-full max-w-full min-w-0 overflow-hidden w-full">
+                {rowData.dead &&
+                    <MythicStyledTooltip title={"Based on callback's last checkin and sleep info, it's likely dead"}>
+                        <MythicStatusChip compact iconOnly status="dead" />
+                    </MythicStyledTooltip>
+                }
+                <span className="mythic-callback-cellText min-w-0 truncate whitespace-nowrap">Streaming Now</span>
+            </div>
 
         )
     }
     return (
-        <div style={{display: "flex", alignItems: "center"}}>
+        <div className="mythic-callback-cellInline items-center inline-flex gap-2 h-full max-w-full min-w-0 overflow-hidden w-full">
             {rowData.dead &&
                 <MythicStyledTooltip title={"Based on callback's last checkin and sleep info, it's likely dead"}>
-                    <FontAwesomeIcon icon={faSkullCrossbones} style={{
-                        color: theme.palette.error.main, cursor: "pointer", marginRight: "10px",}} />
+                    <MythicStatusChip compact iconOnly status="dead" />
                 </MythicStyledTooltip>
             }
-                <Moment filter={adjustOutput} interval={1000} parse={"YYYY-MM-DDTHH:mm:ss.SSSSSSZ"}
+            <span className="mythic-callback-cellText min-w-0 truncate whitespace-nowrap">
+                <MythicTimestamp
+                    interval={1000}
                     withTitle
                     titleFormat={"YYYY-MM-DD HH:mm:ss"}
-                    fromNow ago
+                    serverSkew={me?.user?.server_skew}
+                    fromNow
+                    ago
                 >
                     {rowData.last_checkin + "Z"}
-                </Moment>
+                </MythicTimestamp>
+            </span>
         </div>
         
     )
@@ -172,7 +252,8 @@ export const CallbacksTableIPCell = React.memo(({cellData, rowData}) => {
     const updateIPsInfo = React.useCallback( ({callback_display_id, ips}) => {
         updateIPs({variables: {callback_display_id: callback_display_id, ips}})
     }, []);
-    const onClick = () => {
+    const onClick = (event) => {
+        event.stopPropagation();
         setOpenPickIP(true);
     }
     const editIPSubmit = (selected_ip) => {
@@ -192,16 +273,14 @@ export const CallbacksTableIPCell = React.memo(({cellData, rowData}) => {
     }, [cellData]);
     return (
         <>
-            <div style={{display: "inline-flex", alignItems: "center", height: "100%"}}>
+            <div className="mythic-callback-cellInline items-center inline-flex gap-2 h-full max-w-full min-w-0 overflow-hidden w-full">
                 {options.length > 1 &&
-                    <MythicStyledTooltip title={"Adjust Displayed"}>
-                        <UnfoldMoreIcon onClick={onClick} style={{paddingTop: "5px", cursor: "pointer", width: "unset"}} />
-                    </MythicStyledTooltip>
+                    <MythicActionButton appearance="raised" compact icon={<UnfoldMoreIcon />} iconOnly onClick={onClick} tooltip="Adjust displayed IP" />
                 }
-                {displayIP}
+                <span className="mythic-callback-cellText min-w-0 truncate whitespace-nowrap">{displayIP}</span>
             </div>
             {openPickIP && 
-                <MythicDialog fullWidth={true} open={openPickIP}  onClose={() => {setOpenPickIP(false);}}
+                <MythicDialog fullWidth={true} open={openPickIP} onClose={() => {setOpenPickIP(false);}}
                 innerDialog={
                     <MythicSelectFromRawListDialog 
                         onClose={() => {setOpenPickIP(false);}} 
@@ -215,13 +294,10 @@ export const CallbacksTableIPCell = React.memo(({cellData, rowData}) => {
         
     )
 }, areEqual)
-export const CallbacksTableC2Cell = React.memo(({rowData}) => {
-    const theme = useTheme();
+export const CallbacksTableC2Cell = React.memo(({rowData, centered = true}) => {
     const [localRowData, setLocalRowData] = React.useState(rowData);
     const initialCallbackGraphEdges = useContext(CallbackGraphEdgesContext);
     const onOpenTab = useContext(OnOpenTabContext);
-    const [activeEgress, setActiveEgress] = React.useState(theme.palette.success.main);
-    const [hasEgressRoute, setHasEgressRoute] = React.useState(true);
     const [openC2Dialog, setOpenC2Dialog] = React.useState(false);
     const [callbackgraphedges, setCallbackgraphedges] = React.useState([]);
     const [callbackgraphedgesAll, setCallbackgraphedgesAll] = React.useState([]);
@@ -229,19 +305,6 @@ export const CallbacksTableC2Cell = React.memo(({rowData}) => {
         event.stopPropagation();
         setOpenC2Dialog(true);
     }
-    useEffect( () => {
-        const routes = callbackgraphedgesAll.filter( (edge) => {
-            if(!edge.c2profile.is_p2p && edge.source.id === localRowData.id && edge.destination.id === localRowData.id){
-                return true;
-            }
-            return false;
-        }).length;
-        if(routes > 0 && !hasEgressRoute){
-            setHasEgressRoute(true);
-        }else if(routes === 0 && hasEgressRoute){
-            setHasEgressRoute(false);
-        }
-    }, [callbackgraphedgesAll, localRowData]);
     useEffect( () => {
         const getEdges = (activeOnly) => {
             //update our aggregate of callbackgraphedges for both src and dst that involve us
@@ -294,21 +357,6 @@ export const CallbacksTableC2Cell = React.memo(({rowData}) => {
         setCallbackgraphedgesAll(myEdges);
 
     }, [initialCallbackGraphEdges, localRowData]);
-    useEffect( () => {
-        //determine if there are any active routes left at all
-        //console.log(localRowData.display_id, callbackgraphedges)
-        const activeRoutes = callbackgraphedges.filter( (edge) => {
-            if(!edge.c2profile.is_p2p  && edge.end_timestamp === null){
-                return true;
-            }
-            return false
-        });
-        if(activeRoutes.length === 0){
-            setActiveEgress(theme.palette.error.main);
-        }else{
-            setActiveEgress(theme.palette.success.main);
-        }
-    }, [callbackgraphedges, theme.palette.success.main, theme.palette.error.main]);
     useEffect( () => {
         if(rowData.id !== localRowData.id){
             setLocalRowData(rowData);
@@ -317,12 +365,31 @@ export const CallbacksTableC2Cell = React.memo(({rowData}) => {
     if(rowData?.payload?.payloadtype?.agent_type !== "agent"){
         return null
     }
+    const directEgressRoutes = callbackgraphedgesAll.filter((edge) =>
+        !edge.c2profile?.is_p2p &&
+        edge.source.id === localRowData.id &&
+        edge.destination.id === localRowData.id
+    );
+    const hasDirectEgressRoute = directEgressRoutes.length > 0;
+    const directEgressActive = directEgressRoutes.some((edge) => edge.end_timestamp === null);
+    const p2pRouteActive = callbackgraphedges.some((edge) =>
+        !edge.c2profile?.is_p2p && edge.end_timestamp === null
+    );
+    const c2RouteActive = hasDirectEgressRoute ? directEgressActive : p2pRouteActive;
+    const c2Tooltip = hasDirectEgressRoute ?
+        (directEgressActive ? "Direct C2 route active. View C2 path information" : "Direct C2 route inactive. View C2 path information") :
+        (p2pRouteActive ? "Active P2P route to Mythic. View C2 path information" : "No active route to Mythic. View C2 path information");
     return (
-        <div>
-            {hasEgressRoute ? 
-                <WifiIcon onClick={onOpenC2Dialog} style={{color: activeEgress, cursor: "pointer"}}/> : 
-                <InsertLinkTwoToneIcon onClick={onOpenC2Dialog} style={{color: activeEgress, cursor: "pointer"}} />
-            }
+        <div className={`mythic-callback-cellInline items-center inline-flex gap-2${centered ? " mythic-callback-cellInlineCenter justify-center" : ""} h-full max-w-full min-w-0 overflow-hidden w-full`}>
+            <MythicActionButton appearance="raised"
+                active={!c2RouteActive}
+                compact
+                icon={hasDirectEgressRoute ? <WifiIcon /> : <InsertLinkTwoToneIcon />}
+                iconOnly
+                onClick={onOpenC2Dialog}
+                tone={c2RouteActive ? "success" : "error"}
+                tooltip={c2Tooltip}
+            />
             {openC2Dialog &&
                 <MythicDialog 
                     fullWidth={true} 
@@ -349,34 +416,35 @@ export const CallbacksTableOSCell = React.memo( ({rowData, cellData}) => {
     const [openOSDialog, setOpenOSDialog] = React.useState(false);
     const getOSIcon = useCallback( () => {
         if(rowData?.payload?.payloadtype?.agent_type !== "agent"){
-            return <FontAwesomeIcon icon={faRobot} style={{cursor: "pointer"}} onClick={displayOSInfo} />
+            return <FontAwesomeIcon icon={faRobot} />
         }
         switch(rowData.payload.os.toLowerCase()){
             case "windows":
-                return <FontAwesomeIcon icon={faWindows}  style={{cursor: "pointer"}} onClick={displayOSInfo} />
+                return <FontAwesomeIcon icon={faWindows} />
             case "linux":
             case "centos":
             case "redhat":
             case "debian":
             case "fedora":
             case "freebsd":
-                return <FontAwesomeIcon icon={faLinux}  style={{cursor: "pointer"}} onClick={displayOSInfo} />
+                return <FontAwesomeIcon icon={faLinux} />
             case "macos":
-                return <FontAwesomeIcon icon={faApple} style={{cursor: "pointer"}} onClick={displayOSInfo}/>
+                return <FontAwesomeIcon icon={faApple} />
             case "chrome":
-                return <FontAwesomeIcon icon={faChrome} style={{cursor: "pointer"}} onClick={displayOSInfo} />
+                return <FontAwesomeIcon icon={faChrome} />
             case "android":
-                return <FontAwesomeIcon icon={faAndroid}  style={{cursor: "pointer"}} onClick={displayOSInfo} />
+                return <FontAwesomeIcon icon={faAndroid} />
             default:
-                return <FontAwesomeIcon icon={faQuestion}  style={{cursor: "pointer"}} onClick={displayOSInfo} />
+                return <FontAwesomeIcon icon={faQuestion} />
         }
     }, [rowData?.payload?.os]);
-    const displayOSInfo = React.useCallback( () => {
+    const displayOSInfo = React.useCallback( (event) => {
+        event.stopPropagation();
         setOpenOSDialog(true);
     }, []);
     return (
-        <div>
-            {getOSIcon()}
+        <div className="mythic-callback-cellInline items-center inline-flex gap-2 mythic-callback-cellInlineCenter justify-center h-full max-w-full min-w-0 overflow-hidden w-full">
+            <MythicActionButton appearance="raised" compact icon={getOSIcon()} iconOnly onClick={displayOSInfo} tone="primary" tooltip="View operating system information" />
             { openOSDialog &&
                 <MythicDisplayTextDialog 
                     onClose={()=>{setOpenOSDialog(false);}} 
@@ -392,8 +460,7 @@ export const CallbacksTableOSCell = React.memo( ({rowData, cellData}) => {
                 
     )
 }, areEqual);
-export const CallbacksTableSleepCell = React.memo( ({rowData, cellData, updateSleepInfo}) => {
-    const theme = useTheme();
+export const CallbacksTableSleepCell = React.memo( ({rowData, cellData, updateSleepInfo, centered = true}) => {
     const [openSleepDialog, setOpenSleepDialog] = React.useState(false);
     const editSleepSubmit = (sleep) => {
         updateSleepInfo({sleep_info: sleep, callback_display_id: rowData.display_id});
@@ -406,9 +473,15 @@ export const CallbacksTableSleepCell = React.memo( ({rowData, cellData, updateSl
         return null
     }
     return (
-        <div style={{height: "100%", display: "flex", alignItems: "center"}}>
-            <SnoozeIcon onClick={onOpenSleepDialog} 
-                style={{color: cellData === "" ? theme.palette.warning.main : theme.palette.info.main, cursor: "pointer"}}
+        <div className={`mythic-callback-cellInline items-center inline-flex gap-2${centered ? " mythic-callback-cellInlineCenter justify-center" : ""} h-full max-w-full min-w-0 overflow-hidden w-full`}>
+            <MythicActionButton appearance="raised"
+                active={cellData === ""}
+                compact
+                icon={<SnoozeIcon />}
+                iconOnly
+                onClick={onOpenSleepDialog}
+                tone={cellData === "" ? "warning" : "info"}
+                tooltip={cellData === "" ? "No sleep information set" : "View or edit sleep information"}
             />
             { openSleepDialog &&
                 <MythicDialog fullWidth={true} open={openSleepDialog} maxWidth={"md"}
@@ -427,4 +500,17 @@ export const CallbacksTableSleepCell = React.memo( ({rowData, cellData, updateSl
         
             
     )
-}, areEqual)
+}, areEqual)
+export const CallbacksTableTagsCell = React.memo(({rowData, cellData}) => {
+    return (
+        <div className="mythic-tag-cell items-center flex gap-3 mythic-tag-cell-fill min-w-0 overflow-hidden h-full w-full">
+            <ViewEditTags target_object={"callback_id"} target_object_id={rowData.id} target_object_display_id={rowData.display_id} />
+            <div className="mythic-tag-list items-center flex flex-fill flex-nowrap gap-2 mythic-callback-tag-list min-w-0 overflow-hidden">
+                {cellData?.length > 0 ?
+                    <TagsDisplay tags={cellData} expand={false} /> :
+                    <span className="mythic-callback-tagsEmpty text-xs font-650 truncate text-disabled whitespace-nowrap">No tags</span>
+                }
+            </div>
+        </div>
+    )
+}, areEqual)

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

@@ -1,19 +1,29 @@
 import React, { useEffect } from 'react';
 import AppBar from '@mui/material/AppBar';
 import Tabs from '@mui/material/Tabs';
+import {
+    DragDropContext,
+    Droppable,
+} from "@hello-pangea/dnd";
 import { CallbacksTabsTaskingLabel, CallbacksTabsTaskingPanel } from './CallbacksTabsTasking';
 import { CallbacksTabsFileBrowserLabel, CallbacksTabsFileBrowserPanel } from './CallbacksTabsFileBrowser';
 import { CallbacksTabsProcessBrowserLabel, CallbacksTabsProcessBrowserPanel } from './CallbacksTabsProcessBrowser';
 import { CallbacksTabsTaskingSplitLabel, CallbacksTabsTaskingSplitPanel} from "./CallbacksTabsTaskingSplit";
 import {CallbacksTabsTaskingConsoleLabel, CallbacksTabsTaskingConsolePanel} from "./CallbacksTabsTaskingConsole";
+import {
+    CallbacksTabsCustomFileBasedBrowserLabel,
+    CallbacksTabsCustomFileBasedBrowserPanel
+} from "./CallbacksTabsCustomFileBasedBrowser";
+import {CallbackBrowserTreeProvider} from "./CallbackBrowserTreeStore";
 
-export function CallbacksTabs({ onCloseTab, openTabs, onDragTab, clickedTabId, setClickedTabId, onEditTabDescription, contextMenuOptions, me}) {
+export function CallbacksTabs({ onCloseTab, openTabs, onDragTab, onDragEnd, clickedTabId, setClickedTabId, onEditTabDescription, contextMenuOptions, me, newDataForTab, setNewDataForTab}) {
 
     const mountedRef = React.useRef(true);
     const [value, setValue] = React.useState(0);
     const handleChange = (event, newValue) => {
         setValue(newValue);
-        //console.log(newValue);
+        //console.log("clickedTab", newValue, openTabs[newValue]);
+        if(openTabs[newValue] === undefined){return}
         localStorage.setItem('clickedTab', openTabs[newValue].tabID);
         setClickedTabId(openTabs[newValue].tabID);
     };
@@ -27,7 +37,9 @@ export function CallbacksTabs({ onCloseTab, openTabs, onDragTab, clickedTabId, s
         if (index > 0) {
             setClickedTabId(openTabs[index-1].tabID);
             setValue(index - 1);
-        } else {
+            //console.log("closing index", index)
+        } else if(openTabs.length > 0) {
+            //console.log("closing index length > 0", index)
             setClickedTabId(openTabs[0].tabID);
             setValue(0);
         }
@@ -35,104 +47,156 @@ export function CallbacksTabs({ onCloseTab, openTabs, onDragTab, clickedTabId, s
     };
     useEffect(() => {
         //console.log(clickedTabId);
+        //console.log(clickedTabId, openTabs);
         for (let i = 0; i < openTabs.length; i++) {
             //console.log("openTabs[i]", i, openTabs[i]);
             if (openTabs[i].tabID === clickedTabId) {
-                //console.log("seting value", i);
+                //console.log("setting value", i);
                 setValue(i);
+                return;
             }
         }
     }, [clickedTabId, openTabs]);
-    
+    const [collapseTaskRequest, setCollapseTaskRequest] = React.useState({})
+    const modifiedInteractContextMenuOptions = [...contextMenuOptions,
+        {
+            name: 'Collapse All Tasks',
+            click: ({event, index}) => {
+                setCollapseTaskRequest((prevState) => {
+                    if(prevState[index] !== undefined){
+                        prevState[index] += 1;
+                        return {...prevState};
+                    } else {
+                        return { [index]: 0};
+                    }
+                });
+
+            }
+        },]
+
     return (
-        <div style={{width: "100%", display: 'flex', flexDirection: 'column', flexGrow: 1, height: "100%" }}>
-            <AppBar color='default' position='static' className={"no-box-shadow"}>
-                <Tabs
-                    value={value}
-                    onChange={handleChange}
-                    indicatorColor='primary'
-                    textColor='primary'
-                    variant='scrollable'
-                    scrollButtons='auto'
-                    style={{ maxWidth: '100%', width: '100%' }}
-                    aria-label='scrollable auto tabs example'>
-                    {openTabs.map((tab, index) => {
-                        switch (tab.tabType) {
-                            case 'interact':
-                                return (
-                                    <CallbacksTabsTaskingLabel
-                                        onEditTabDescription={onEditTabDescription}
-                                        onCloseTab={onCloseTabLocal}
-                                        key={'tablabel' + tab.tabID + tab.tabType}
-                                        tabInfo={tab}
-                                        index={index}
-                                        me={me}
-                                        selectedIndex={value}
-                                        onDragTab={onDragTab}
-                                        contextMenuOptions={contextMenuOptions}
-                                    />
-                                );
-                            case 'interactSplit':
-                                return (
-                                    <CallbacksTabsTaskingSplitLabel
-                                        onEditTabDescription={onEditTabDescription}
-                                        onCloseTab={onCloseTabLocal}
-                                        key={'tablabel' + tab.tabID + tab.tabType}
-                                        tabInfo={tab}
-                                        index={index}
-                                        me={me}
-                                        selectedIndex={value}
-                                        onDragTab={onDragTab}
-                                        contextMenuOptions={contextMenuOptions}
-                                    />
-                                )
-                            case 'interactConsole':
-                                return (
-                                    <CallbacksTabsTaskingConsoleLabel
-                                        onEditTabDescription={onEditTabDescription}
-                                        onCloseTab={onCloseTabLocal}
-                                        key={'tablabel' + tab.tabID + tab.tabType}
-                                        tabInfo={tab}
-                                        index={index}
-                                        me={me}
-                                        selectedIndex={value}
-                                        onDragTab={onDragTab}
-                                        contextMenuOptions={contextMenuOptions}
-                                    />
-                                )
-                            case 'fileBrowser':
-                                return (
-                                    <CallbacksTabsFileBrowserLabel
-                                        onEditTabDescription={onEditTabDescription}
-                                        onCloseTab={onCloseTabLocal}
-                                        key={'tablabel' + tab.tabID + tab.tabType}
-                                        tabInfo={tab}
-                                        index={index}
-                                        me={me}
-                                        selectedIndex={value}
-                                        onDragTab={onDragTab}
-                                        contextMenuOptions={contextMenuOptions}
-                                    />
-                                );
-                            case 'processBrowser':
-                                return (
-                                    <CallbacksTabsProcessBrowserLabel
-                                        onEditTabDescription={onEditTabDescription}
-                                        onCloseTab={onCloseTabLocal}
-                                        key={'tablabel' + tab.tabID + tab.tabType}
-                                        tabInfo={tab}
-                                        index={index}
-                                        me={me}
-                                        selectedIndex={value}
-                                        onDragTab={onDragTab}
-                                        contextMenuOptions={contextMenuOptions}
-                                    />
-                                );
-                            default:
-                                return null;
-                        }
-                    })}
-                </Tabs>
+        <CallbackBrowserTreeProvider openTabs={openTabs}>
+        <div style={{width: "100%", maxWidth: "100%", display: 'flex', flexDirection: 'column',
+            flexGrow: 1, height: "100%", }}>
+            <AppBar color='default' position={"static"} className="no-box-shadow mythic-table-toolbar flex flex-none flex-wrap gap-4 w-full rounded bg-surface-muted border-subtle"
+            style={{marginBottom: "0.2rem"}}>
+                <DragDropContext onDragEnd={onDragEnd}>
+                    <Droppable droppableId="callback-tabs-list" direction={"horizontal"}>
+                        {(provided) => (
+                            <>
+                                <Tabs
+                                    ref={provided.innerRef} {...provided.droppableProps}
+                                    value={value}
+                                    onChange={handleChange}
+                                    indicatorColor='primary'
+                                    textColor='primary'
+                                    variant='fullWidth'
+                                    scrollButtons={true}
+                                    TabIndicatorProps={{style: {display: "none"}}}
+                                    aria-label='scrollable tabs'>
+                                    {openTabs.map((tab, index) => {
+                                        switch (tab.tabType) {
+                                            case 'interact':
+                                                return (
+                                                    <CallbacksTabsTaskingLabel
+                                                        onEditTabDescription={onEditTabDescription}
+                                                        onCloseTab={onCloseTabLocal}
+                                                        key={'tablabel' + tab.tabID + tab.tabType}
+                                                        tabInfo={tab}
+                                                        index={index}
+                                                        me={me}
+                                                        newDataForTab={newDataForTab}
+                                                        selectedIndex={value}
+                                                        onDragTab={onDragTab}
+                                                        contextMenuOptions={modifiedInteractContextMenuOptions}
+                                                    />
+                                                );
+                                            case 'interactSplit':
+                                                return (
+                                                    <CallbacksTabsTaskingSplitLabel
+                                                        onEditTabDescription={onEditTabDescription}
+                                                        onCloseTab={onCloseTabLocal}
+                                                        key={'tablabel' + tab.tabID + tab.tabType}
+                                                        tabInfo={tab}
+                                                        index={index}
+                                                        me={me}
+                                                        newDataForTab={newDataForTab}
+                                                        selectedIndex={value}
+                                                        onDragTab={onDragTab}
+                                                        contextMenuOptions={contextMenuOptions}
+                                                    />
+                                                )
+                                            case 'interactConsole':
+                                                return (
+                                                    <CallbacksTabsTaskingConsoleLabel
+                                                        onEditTabDescription={onEditTabDescription}
+                                                        onCloseTab={onCloseTabLocal}
+                                                        key={'tablabel' + tab.tabID + tab.tabType}
+                                                        tabInfo={tab}
+                                                        index={index}
+                                                        me={me}
+                                                        newDataForTab={newDataForTab}
+                                                        selectedIndex={value}
+                                                        onDragTab={onDragTab}
+                                                        contextMenuOptions={contextMenuOptions}
+                                                    />
+                                                )
+                                            case 'customFileBasedBrowser':
+                                                return (
+                                                    <CallbacksTabsCustomFileBasedBrowserLabel
+                                                        onEditTabDescription={onEditTabDescription}
+                                                        onCloseTab={onCloseTabLocal}
+                                                        key={'tablabel' + tab.tabID + tab.tabType + tab?.customBrowser?.name}
+                                                        tabInfo={tab}
+                                                        index={index}
+                                                        me={me}
+                                                        newDataForTab={newDataForTab}
+                                                        selectedIndex={value}
+                                                        onDragTab={onDragTab}
+                                                        contextMenuOptions={contextMenuOptions}
+                                                    />
+                                                );
+                                            case 'processBrowser':
+                                                return (
+                                                    <CallbacksTabsProcessBrowserLabel
+                                                        onEditTabDescription={onEditTabDescription}
+                                                        onCloseTab={onCloseTabLocal}
+                                                        key={'tablabel' + tab.tabID + tab.tabType}
+                                                        tabInfo={tab}
+                                                        index={index}
+                                                        me={me}
+                                                        newDataForTab={newDataForTab}
+                                                        selectedIndex={value}
+                                                        onDragTab={onDragTab}
+                                                        contextMenuOptions={contextMenuOptions}
+                                                    />
+                                                );
+                                            case 'fileBrowser':
+                                                return (
+                                                    <CallbacksTabsFileBrowserLabel
+                                                        onEditTabDescription={onEditTabDescription}
+                                                        onCloseTab={onCloseTabLocal}
+                                                        key={'tablabel' + tab.tabID + tab.tabType}
+                                                        tabInfo={tab}
+                                                        index={index}
+                                                        me={me}
+                                                        newDataForTab={newDataForTab}
+                                                        selectedIndex={value}
+                                                        onDragTab={onDragTab}
+                                                        contextMenuOptions={contextMenuOptions}
+                                                    />
+                                                );
+                                            default:
+                                                return null;
+                                        }
+                                    })}
+                                    {provided.placeholder}
+                                </Tabs>
+                            </>
+
+                        )}
+                    </Droppable>
+                </DragDropContext>
             </AppBar>
 
             {openTabs.map((tab, index) => {
@@ -149,9 +213,11 @@ export function CallbacksTabs({ onCloseTab, openTabs, onDragTab, clickedTabId, s
                                 key={'tabpanel' + tab.tabID + tab.tabType}
                                 onCloseTab={onCloseTabLocal}
                                 tabInfo={tab}
+                                setNewDataForTab={setNewDataForTab}
                                 value={value}
                                 index={index}
                                 me={me}
+                                collapseTaskRequest={collapseTaskRequest}
                                 parentMountedRef={mountedRef}
                             />
                         );
@@ -167,6 +233,7 @@ export function CallbacksTabs({ onCloseTab, openTabs, onDragTab, clickedTabId, s
                                 key={'tabpanel' + tab.tabID + tab.tabType}
                                 onCloseTab={onCloseTabLocal}
                                 tabInfo={tab}
+                                setNewDataForTab={setNewDataForTab}
                                 value={value}
                                 index={index}
                                 me={me}
@@ -185,12 +252,32 @@ export function CallbacksTabs({ onCloseTab, openTabs, onDragTab, clickedTabId, s
                                 key={'tabpanel' + tab.tabID + tab.tabType}
                                 onCloseTab={onCloseTabLocal}
                                 tabInfo={tab}
+                                setNewDataForTab={setNewDataForTab}
                                 value={value}
                                 index={index}
                                 me={me}
                                 parentMountedRef={mountedRef}
                             />
                         )
+                    case 'customFileBasedBrowser':
+                        return (
+                            <CallbacksTabsCustomFileBasedBrowserPanel
+                                style={{
+                                    height: '100%',
+                                    maxHeight: '100%',
+                                    position: 'relative',
+                                    overflow: 'auto',
+                                }}
+                                onCloseTab={onCloseTabLocal}
+                                key={'tabpanel' + tab.tabID + tab.tabType + tab?.customBrowser?.name}
+                                tabInfo={tab}
+                                setNewDataForTab={setNewDataForTab}
+                                value={value}
+                                index={index}
+                                me={me}
+                                parentMountedRef={mountedRef}
+                            />
+                        );
                     case 'fileBrowser':
                         return (
                             <CallbacksTabsFileBrowserPanel
@@ -203,10 +290,12 @@ export function CallbacksTabs({ onCloseTab, openTabs, onDragTab, clickedTabId, s
                                 onCloseTab={onCloseTabLocal}
                                 key={'tabpanel' + tab.tabID + tab.tabType}
                                 tabInfo={tab}
+                                setNewDataForTab={setNewDataForTab}
                                 value={value}
                                 index={index}
                                 me={me}
                                 parentMountedRef={mountedRef}
+                                baseUIFeature={"file_browser"}
                             />
                         );
                     case 'processBrowser':
@@ -221,6 +310,7 @@ export function CallbacksTabs({ onCloseTab, openTabs, onDragTab, clickedTabId, s
                                 onCloseTab={onCloseTabLocal}
                                 key={'tabpanel' + tab.tabID + tab.tabType}
                                 tabInfo={tab}
+                                setNewDataForTab={setNewDataForTab}
                                 value={value}
                                 index={index}
                                 me={me}
@@ -232,5 +322,6 @@ export function CallbacksTabs({ onCloseTab, openTabs, onDragTab, clickedTabId, s
                 }
             })}
         </div>
+        </CallbackBrowserTreeProvider>
     );
 }

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

@@ -1,19 +1,19 @@
+import {MythicActionButton} from "../../MythicComponents/MythicActionButton";
 import { MythicTabPanel, MythicTabLabel } from '../../MythicComponents/MythicTabPanel';
 import React, { useEffect, useCallback } from 'react';
-import { gql, useLazyQuery, useQuery, useSubscription } from '@apollo/client';
+import { gql, useLazyQuery, useSubscription } from '@apollo/client';
 import { snackActions } from '../../utilities/Snackbar';
 import { MythicDialog } from '../../MythicComponents/MythicDialog';
 import MythicTextField from '../../MythicComponents/MythicTextField';
 import Grid from '@mui/material/Grid';
 import CloudUploadIcon from '@mui/icons-material/CloudUpload';
 import RefreshIcon from '@mui/icons-material/Refresh';
-import IconButton from '@mui/material/IconButton';
 import { CallbacksTabsFileBrowserTree } from './CallbacksTabsFileBrowserTree';
 import { CallbacksTabsFileBrowserTable } from './CallbacksTabsFileBrowserTable';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import VisibilityIcon from '@mui/icons-material/Visibility';
 import { MythicModifyStringDialog } from '../../MythicComponents/MythicDialog';
-import { Backdrop } from '@mui/material';
+import {Backdrop} from '@mui/material';
 import {CircularProgress} from '@mui/material';
 import {TaskFromUIButton} from './TaskFromUIButton';
 import { MythicStyledTooltip } from '../../MythicComponents/MythicStyledTooltip';
@@ -26,8 +26,11 @@ import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import {b64DecodeUnicode} from "./ResponseDisplay";
 import PlaylistAddIcon from '@mui/icons-material/PlaylistAdd';
 import PlaylistRemoveIcon from '@mui/icons-material/PlaylistRemove';
-import {SetMythicSetting, useMythicSetting} from "../../MythicComponents/MythicSavedUserSetting";
+import {GetMythicSetting, useSetMythicSetting} from "../../MythicComponents/MythicSavedUserSetting";
 import {RenderSingleTask} from "../SingleTaskView/SingleTaskView";
+import {loadedCommandsQuery} from "./CallbacksTabsProcessBrowser";
+import {getSkewedNow} from "../../utilities/Time";
+import {getDefaultBrowserSelection, useCallbackBrowserTree} from "./CallbackBrowserTreeStore";
 
 const fileDataFragment = gql`
     fragment fileObjData on mythictree {
@@ -45,10 +48,12 @@ const fileDataFragment = gql`
                 color
                 id
             }
+            id
         }
         host
         id
         can_have_children
+        has_children
         success
         full_path_text
         name_text
@@ -63,14 +68,6 @@ const fileDataFragment = gql`
         }
     }
 `;
-const rootFileQuery = gql`
-    ${fileDataFragment}
-    query myRootFolderQuery {
-        mythictree(where: { parent_path_text: { _eq: "" }, tree_type: {_eq: "file"} }) {
-            ...fileObjData
-        }
-    }
-`;
 const folderQuery = gql`
     ${fileDataFragment}
     query myFolderQuery($parent_path_text: String!, $parents: [String]) {
@@ -94,18 +91,6 @@ const folderQuery = gql`
         }
     }
 `;
-const fileDataSubscription = gql`
-    ${fileDataFragment}
-    subscription liveData($now: timestamp!) {
-        mythictree_stream(
-            batch_size: 1000,
-            cursor: {initial_value: {timestamp: $now}},
-            where: {tree_type: {_eq: "file"} }
-        ) {
-            ...fileObjData
-        }
-    }
-`;
 const fileBrowserTaskSub = gql`
     subscription fileBrowserTasks($now: timestamp!, $callback_id: Int!){
         task_stream(
@@ -140,6 +125,15 @@ export const getAllParentNodes = (node) => {
     }
     return newNodes;
 }
+const mergeUniqueById = (existing = [], incoming = []) => [
+    ...new Map([...existing, ...incoming].map((item) => [item.id, item])).values(),
+];
+const mergeUniqueValues = (existing = [], incoming = []) => [
+    ...new Map([...existing, ...incoming].map((item) => [
+        item && typeof item === "object" ? JSON.stringify(item) : `${typeof item}:${item}`,
+        item,
+    ])).values(),
+];
 export function CallbacksTabsFileBrowserLabel(props) {
     const [description, setDescription] = React.useState('File Browser: ' + props.tabInfo.displayID);
     const [openEditDescriptionDialog, setOpenEditDescriptionDialog] = React.useState(false);
@@ -171,7 +165,7 @@ export function CallbacksTabsFileBrowserLabel(props) {
     ]);
     return (
         <React.Fragment>
-            <MythicTabLabel label={description} onDragTab={props.onDragTab}  {...props} contextMenuOptions={contextMenuOptions} />
+            <MythicTabLabel label={description} highlight={props.newDataForTab[props.tabInfo.tabID]} onDragTab={props.onDragTab}  {...props} contextMenuOptions={contextMenuOptions} />
             {openEditDescriptionDialog && (
                 <MythicDialog
                     fullWidth={true}
@@ -194,12 +188,28 @@ export function CallbacksTabsFileBrowserLabel(props) {
         </React.Fragment>
     );
 }
-export const CallbacksTabsFileBrowserPanel = ({ index, value, tabInfo, me }) => {
-    const fromNow = React.useRef((new Date()));
+export const CallbacksTabsFileBrowserPanel = ({ index, value, tabInfo, me, setNewDataForTab, baseUIFeature }) => {
+    const fromNow = React.useRef(getSkewedNow());
+    const active = index === value;
+    const markInactiveChange = useCallback(() => {
+        setNewDataForTab((previous) => previous[tabInfo.tabID] ? previous : {
+            ...previous,
+            [tabInfo.tabID]: true,
+        });
+    }, [setNewDataForTab, tabInfo.tabID]);
+    const {
+        treeRootDataRef,
+        treeAdjMtx,
+        version: treeVersion,
+        hydrated: treeHydrated,
+        setTreeAdjMtx,
+    } = useCallbackBrowserTree({
+        treeType: "file",
+        mode: "file",
+        active,
+        onInactiveChange: markInactiveChange,
+    });
     const [backdropOpen, setBackdropOpen] = React.useState(false);
-    const treeRootDataRef = React.useRef({}); // hold all of the actual data
-    // hold the simple adjacency matrix for parent/child relationships
-    const [treeAdjMtx, setTreeAdjMtx] = React.useState({});
     const [selectedFolderData, setSelectedFolderData] = React.useState({
         full_path_text: '',
         host: tabInfo.host,
@@ -213,161 +223,87 @@ export const CallbacksTabsFileBrowserPanel = ({ index, value, tabInfo, me }) =>
         token: 0,
     });
     const autoTaskLsOnEmptyDirectoriesRef = React.useRef(false);
-    const taskingData = React.useRef({"parameters": "", "ui_feature": "file_browser:list"});
+    const taskingData = React.useRef({"parameters": "", "ui_feature": baseUIFeature +":list"});
     const mountedRef = React.useRef(true);
     const tableOpenedPathIdRef = React.useRef({
         host: "",
         group: "",
         full_path_text: ""
     });
-    useQuery(rootFileQuery, {
-        onCompleted: (data) => {
-           // use an adjacency matrix but only for full_path_text -> children, not both directions
-           // create the top level data in the treeRootDataRef
-           let defaultGroup = "Default";
-           for(let i = 0; i < data.mythictree.length; i++){
-               let currentGroups = data.mythictree[i]?.["callback"]?.["mythictree_groups"] || ["Unknown Callbacks"];
-               try{
-                   if(data.mythictree[i]?.['callback']?.['id'] === tabInfo.callbackID){
-                       if(!currentGroups.includes(defaultGroup, 0)){
-                           defaultGroup = currentGroups[0];
-                       }
-                   }
-               }catch(error){
-                   console.log(error);
-               }
-                for(let j = 0; j < currentGroups.length; j++){
-                    if(treeRootDataRef.current[currentGroups[j]] === undefined){
-                        treeRootDataRef.current[currentGroups[j]] = {};
-                    }
-                    if( treeRootDataRef.current[currentGroups[j]][data.mythictree[i]["host"]] === undefined) {
-                        // new host discovered
-                        treeRootDataRef.current[currentGroups[j]][data.mythictree[i]["host"]] = {};
-                    }
-                    if(treeRootDataRef.current[currentGroups[j]][data.mythictree[i]["host"]][data.mythictree[i]["full_path_text"]] === undefined){
-                        treeRootDataRef.current[currentGroups[j]][data.mythictree[i]["host"]][data.mythictree[i]["full_path_text"]] = {...data.mythictree[i]};
-                    } else {
-                        if(treeRootDataRef.current[currentGroups[j]][data.mythictree[i]["host"]][data.mythictree[i]["full_path_text"]].success === null){
-                            treeRootDataRef.current[currentGroups[j]][data.mythictree[i]["host"]][data.mythictree[i]["full_path_text"]] = {...data.mythictree[i]}
-                        }
-                    }
-                }
-           }
-           // create the top level data in the adjacency matrix
-           const newMatrix = data.mythictree.reduce( (prev, cur) => {
-               let currentGroups = cur?.["callback"]?.["mythictree_groups"] || ["Unknown Callbacks"];
-               for(let j = 0; j < currentGroups.length; j++) {
-                   if (prev[currentGroups[j]] === undefined) {
-                       prev[currentGroups[j]] = {};
-                   }
-                   if (prev[currentGroups[j]][cur["host"]] === undefined) {
-                       // the current host isn't tracked in the adjacency matrix, so add it
-                       prev[currentGroups[j]][cur["host"]] = {}
-                   }
-                   if (prev[currentGroups[j]][cur["host"]][cur["parent_path_text"]] === undefined) {
-                       // the current parent's path isn't tracked, so add it and ourselves as children
-                       prev[currentGroups[j]][cur["host"]][cur["parent_path_text"]] = {};
-                   }
-                   prev[currentGroups[j]][cur["host"]][cur["parent_path_text"]][cur["full_path_text"]] = 1;
-               }
-                return prev;
-           }, {...treeAdjMtx});
-           //console.log(treeRootDataRef.current);
-           setTreeAdjMtx(newMatrix);
-            setSelectedFolderData({
-                full_path_text: '',
-                host: tabInfo.host,
-                group: defaultGroup,
-                parent_path_text: "",
-            });
-        },
-        fetchPolicy: 'no-cache',
-    });
-    useSubscription(fileDataSubscription, {
-        variables: {now: fromNow.current},
-        fetchPolicy: "no-cache",
-        onData: ({data}) => {
-            for(let i = 0; i < data.data.mythictree_stream.length; i++){
-                let currentGroups = data.data.mythictree_stream[i]?.["callback"]?.["mythictree_groups"] || ["Unknown Callbacks"];
-                for(let j = 0; j < currentGroups.length; j++) {
-                    if (treeRootDataRef.current[currentGroups[j]] === undefined) {
-                        treeRootDataRef.current[currentGroups[j]] = {};
-                    }
-                    if (treeRootDataRef.current[currentGroups[j]][data.data.mythictree_stream[i]["host"]] === undefined) {
-                        // new host discovered
-                        treeRootDataRef.current[currentGroups[j]][data.data.mythictree_stream[i]["host"]] = {};
-                    }
-                    if(treeRootDataRef.current[currentGroups[j]][data.data.mythictree_stream[i]["host"]][data.data.mythictree_stream[i]["full_path_text"]] === undefined){
-                        // first time we're seeing this file data, just add it
-                        treeRootDataRef.current[currentGroups[j]][data.data.mythictree_stream[i]["host"]][data.data.mythictree_stream[i]["full_path_text"]] = {...data.data.mythictree_stream[i]};
-                        treeRootDataRef.current[currentGroups[j]][data.data.mythictree_stream[i]["host"]][data.data.mythictree_stream[i]["full_path_text"]].filemeta = treeRootDataRef.current[currentGroups[j]][data.data.mythictree_stream[i]["host"]][data.data.mythictree_stream[i]["full_path_text"]].filemeta.map(f => {
-                            return {...f, filename_text: b64DecodeUnicode(f.filename_text)}
-                        })
-                        if(selectedFolderData.group === currentGroups[j] && selectedFolderData.host === data.data.mythictree_stream[i]["host"] &&
-                            selectedFolderData.full_path_text === data.data.mythictree_stream[i]["full_path_text"]){
-                            setSelectedFolderData({...treeRootDataRef.current[currentGroups[j]][data.data.mythictree_stream[i]["host"]][data.data.mythictree_stream[i]["full_path_text"]],
-                                group: currentGroups[j], fromHistory: selectedFolderData.fromHistory});
-                        }
-                    } else {
-                        // we need to merge data in because we already have some info
-                        let existingData = treeRootDataRef.current[currentGroups[j]][data.data.mythictree_stream[i]["host"]][data.data.mythictree_stream[i]["full_path_text"]];
-                        if( (existingData.success === null || !existingData.success) && data.data.mythictree_stream[i].success !== null){
-                            existingData.success = data.data.mythictree_stream[i].success;
-                            existingData.task_id = data.data.mythictree_stream[i].task_id;
-                        }
-                        existingData.comment += data.data.mythictree_stream[i].comment;
-                        existingData.tags = [...existingData.tags, ...data.data.mythictree_stream[i].tags];
-                        if(!existingData.metadata.has_children){
-                            existingData.metadata.has_children = data.data.mythictree_stream[i].metadata.has_children;
-                        }
-                        existingData.metadata.permissions = {...existingData.metadata.permissions, ...data.data.mythictree_stream[i].metadata.permissions};
-                        let newfileData = data.data.mythictree_stream[i].filemeta.map(f => {
-                            return {...f, filename_text: b64DecodeUnicode(f.filename_text)};
-                        })
-                        existingData.filemeta = [...existingData.filemeta, ...newfileData]
-
-                        treeRootDataRef.current[currentGroups[j]][data.data.mythictree_stream[i]["host"]][data.data.mythictree_stream[i]["full_path_text"]] = {...existingData};
-                        if(selectedFolderData.group === currentGroups[j] && selectedFolderData.host === data.data.mythictree_stream[i]["host"] &&
-                            selectedFolderData.full_path_text === data.data.mythictree_stream[i]["full_path_text"]){
-                            setSelectedFolderData({...existingData, group: currentGroups[j], fromHistory: selectedFolderData.fromHistory});
-                        }
-                    }
-                }
-            }
-            const newMatrix = data.data.mythictree_stream.reduce( (prev, cur) => {
-                let currentGroups = cur?.["callback"]?.["mythictree_groups"] || ["Unknown Callbacks"];
-                for(let j = 0; j < currentGroups.length; j++) {
-                    if (prev[currentGroups[j]] === undefined) {
-                        prev[currentGroups[j]] = {};
-                    }
-                    if (prev[currentGroups[j]][cur["host"]] === undefined) {
-                        // the current host isn't tracked in the adjacency matrix, so add it
-                        prev[currentGroups[j]][cur["host"]] = {}
-                    }
-                    if (prev[currentGroups[j]][cur["host"]][cur["parent_path_text"]] === undefined) {
-                        // the current parent's path isn't tracked, so add it and ourselves as children
-                        prev[currentGroups[j]][cur["host"]][cur["parent_path_text"]] = {};
-                    }
-                    prev[currentGroups[j]][cur["host"]][cur["parent_path_text"]][cur["full_path_text"]] = 1;
-                }
-                return prev;
-            }, {...treeAdjMtx});
-            setTreeAdjMtx(newMatrix);
-            
-        }
-    })
+    const loadedCommandsRef = React.useRef({});
+    const loadingCommandsRef = React.useRef(false);
+    const initializedSelectionRef = React.useRef(false);
+    React.useEffect(() => {
+        if(!treeHydrated || initializedSelectionRef.current){return;}
+        const selection = getDefaultBrowserSelection(
+            treeRootDataRef.current,
+            treeAdjMtx,
+            tabInfo.callbackID,
+            tabInfo.host,
+        );
+        setSelectedFolderData({
+            full_path_text: '',
+            host: selection.host,
+            group: selection.group,
+            parent_path_text: "",
+        });
+        initializedSelectionRef.current = true;
+    }, [tabInfo.callbackID, tabInfo.host, treeAdjMtx, treeHydrated, treeRootDataRef, treeVersion]);
+    React.useEffect(() => {
+        if(!active || !initializedSelectionRef.current){return;}
+        setSelectedFolderData((previous) => {
+            const current = treeRootDataRef.current[previous.group]?.[previous.host]?.[previous.full_path_text];
+            if(!current){return previous;}
+            return {...current, group: previous.group, fromHistory: previous.fromHistory};
+        });
+    }, [active, treeRootDataRef, treeVersion]);
     useSubscription(fileBrowserTaskSub, {
         variables: {now: fromNow.current, callback_id: tabInfo.callbackID},
         fetchPolicy: "no-cache",
+        ignoreResults: true,
         onData: ({data}) => {
             for(let i = 0; i < data.data.task_stream.length; i++){
                 if(data.data.task_stream[i].status.toLowerCase().includes("error") && data.data.task_stream[i].completed){
-                    snackActions.warning(<RenderSingleTask task_id={data.data.task_stream[i].id} />,
+                    snackActions.error(<RenderSingleTask task_id={data.data.task_stream[i].id} />,
                         {toastId: data.data.task_stream[i].id, autoClose: false, closeOnClick: false});
                 }
             }
         }
     })
+    const [getLoadedCommandsQuery] = useLazyQuery(loadedCommandsQuery, {
+        fetchPolicy: 'no-cache',
+        onCompleted: (data) => {
+            if(data.loadedcommands.length > 0){
+                loadedCommandsRef.current[data.loadedcommands[0].callback_id] = [...data.loadedcommands];
+            }
+            loadingCommandsRef.current = false;
+        },
+        onError: (data) => {
+            console.log(data);
+            loadingCommandsRef.current = false;
+        }
+    });
+    async function getLoadedCommandForUIFeature (callback_id, uifeature){
+        while(loadingCommandsRef.current){
+            await new Promise(resolve => setTimeout(resolve, 50));
+        }
+        if(loadedCommandsRef.current[callback_id] === undefined){
+            loadingCommandsRef.current = true;
+            getLoadedCommandsQuery({variables: {callback_id: callback_id}});
+            while(loadingCommandsRef.current){
+                await new Promise(resolve => setTimeout(resolve, 50));
+            }
+        }
+        if(loadedCommandsRef.current[callback_id] === undefined){
+            return undefined;
+        }
+        for(let i = 0; i < loadedCommandsRef.current[callback_id].length; i++){
+            if(loadedCommandsRef.current[callback_id][i].command.supported_ui_features.includes(uifeature)){
+                return loadedCommandsRef.current[callback_id][i];
+            }
+        }
+        return undefined;
+    }
     const [getFolderData] = useLazyQuery(folderQuery, {
         onError: (data) => {
             console.error(data);
@@ -403,20 +339,35 @@ export const CallbacksTabsFileBrowserPanel = ({ index, value, tabInfo, me }) =>
                     } else {
                         // we need to merge data in because we already have some info
                         let existingData = treeRootDataRef.current[currentGroups[j]][mythictree[i]["host"]][mythictree[i]["full_path_text"]];
+                        if(existingData.task_id <= mythictree[i].task_id){
+                            existingData.deleted = mythictree[i].deleted;
+                        }
                         if( (existingData.success === null || !existingData.success) && mythictree[i].success !== null){
                             existingData.success = mythictree[i].success;
                             existingData.task_id = mythictree[i].task_id;
                         }
                         existingData.comment += mythictree[i].comment;
-                        existingData.tags = [...existingData.tags, ...mythictree[i].tags];
-                        if(!existingData.metadata.has_children){
-                            existingData.metadata.has_children = mythictree[i].metadata.has_children;
+                        existingData.tags = mergeUniqueById(existingData.tags, mythictree[i].tags);
+                        existingData.has_children = mythictree[i].has_children || existingData.has_children;
+                        existingData.metadata.size = mythictree[i].metadata.size;
+                        existingData.metadata.access_time = mythictree[i].metadata.access_time;
+                        existingData.metadata.modify_time = mythictree[i].metadata.modify_time;
+                        //console.log("updating permissions", "existing", existingData.metadata.permissions, "new", mythictree[i].metadata)
+                        if(mythictree[i].metadata.permissions !== undefined && mythictree[i].metadata.permissions !== null){
+                            if(Array.isArray(existingData.metadata.permissions) && Array.isArray(mythictree[i].metadata.permissions)){
+                                existingData.metadata.permissions = mergeUniqueValues(existingData.metadata.permissions, mythictree[i].metadata.permissions);
+                            } else if(Array.isArray(existingData.metadata.permissions) !== Array.isArray(mythictree[i].metadata.permissions)) {
+                                // had array/dict and got mismatched array/dict, so just take newer one
+                                existingData.metadata.permissions = mythictree[i].metadata.permissions;
+                            } else {
+                                existingData.metadata.permissions = {...existingData.metadata.permissions, ...mythictree[i].metadata.permissions};
+                            }
                         }
-                        existingData.metadata.permissions = {...existingData.metadata.permissions, ...mythictree[i].metadata.permissions};
                         let newfileData = mythictree[i].filemeta.map(f => {
                             return {...f, filename_text: b64DecodeUnicode(f.filename_text)};
                         })
-                        existingData.filemeta = [...existingData.filemeta, ...newfileData]
+                        existingData.filemeta = mergeUniqueById(existingData.filemeta, newfileData)
+                        existingData.filemeta.sort((a,b) => a.id > b.id ? 1 : -1);
                         treeRootDataRef.current[currentGroups[j]][mythictree[i]["host"]][mythictree[i]["full_path_text"]] = {...existingData};
                         if(selectedFolderData.group === currentGroups[j] && selectedFolderData.host === mythictree[i]["host"] &&
                             selectedFolderData.full_path_text === mythictree[i]["full_path_text"]){
@@ -462,7 +413,10 @@ export const CallbacksTabsFileBrowserPanel = ({ index, value, tabInfo, me }) =>
             } else {
                 // we couldn't find the path specified, so we must not have data for it, so check if the user wants us to auto issue an ls
                 if(autoTaskLsOnEmptyDirectoriesRef.current){
-                    onListFilesButtonFromTableWithNoEntries()
+                    // don't want to auto ls when we get to the root/host object in the view
+                    if(selectedFolderData.full_path_text !== ""){
+                        onListFilesButtonFromTableWithNoEntries()
+                    }
                 }
             }
         },
@@ -506,7 +460,7 @@ export const CallbacksTabsFileBrowserPanel = ({ index, value, tabInfo, me }) =>
         taskingData.current = ({
             "token": token,
             "parameters": {path: path, full_path: path, host: selectedFolderData.host, file: ""},
-            "ui_feature": "file_browser:list", callback_id, callback_display_id});
+            "ui_feature": baseUIFeature + ":list", callback_id, callback_display_id});
         setOpenTaskingButton(true);
     };
     const onListFilesButtonFromTableWithNoEntries = () => {
@@ -518,7 +472,7 @@ export const CallbacksTabsFileBrowserPanel = ({ index, value, tabInfo, me }) =>
                 host: selectedFolderData.host,
                 file: ""
             },
-            "ui_feature": "file_browser:list",
+            "ui_feature": baseUIFeature +":list",
             callback_id: tabInfo.callbackID,
             callback_display_id: tabInfo.displayID});
         setOpenTaskingButton(true);
@@ -527,7 +481,7 @@ export const CallbacksTabsFileBrowserPanel = ({ index, value, tabInfo, me }) =>
         taskingData.current = ({
             "token": token,
             "parameters": {path: fullPath, full_path: fullPath, host: selectedFolderData.host},
-            "ui_feature": "file_browser:upload", "openDialog": true,
+            "ui_feature": baseUIFeature + ":upload", "openDialog": true,
             callback_id, callback_display_id
         });
         setOpenTaskingButton(true);
@@ -586,8 +540,8 @@ export const CallbacksTabsFileBrowserPanel = ({ index, value, tabInfo, me }) =>
     const taskListing = (nodeData, callback_id, callback_display_id) => {
         taskingData.current = ({
             "token": localSelectedToken.current,
-            "parameters": {path: nodeData.full_path_text, full_path: nodeData.full_path_text, host: selectedFolderData.host, file: ""},
-            "ui_feature": "file_browser:list", callback_id, callback_display_id});
+            "parameters": {path: nodeData.full_path_text, full_path: nodeData.full_path_text, host: nodeData.host, file: ""},
+            "ui_feature": baseUIFeature + ":list", callback_id, callback_display_id});
         setOpenTaskingButton(true);
     }
     const openDirectoryPath = ({group, host, path}) => {
@@ -605,8 +559,8 @@ export const CallbacksTabsFileBrowserPanel = ({ index, value, tabInfo, me }) =>
     }
     return (
         <MythicTabPanel index={index} value={value}>
-            <Split direction="horizontal" style={{width: "100%", height: "100%", display: "flex", overflow: "hidden"}} sizes={[30, 70]} >
-                <div className="bg-gray-base" style={{display: "inline-flex"}}>
+            <Split direction="horizontal" className="mythic-eventing-split flex h-full min-h-0 min-w-0 overflow-hidden w-full" sizes={[30, 70]} >
+                <div className="mythic-eventing-sidebar flex flex-column min-h-0 min-w-0 overflow-hidden rounded bg-surface-raised border-subtle">
                     <Backdrop open={backdropOpen} style={{zIndex: 2, position: "absolute"}} invisible={true}>
                         <CircularProgress color="inherit" />
                     </Backdrop>
@@ -620,13 +574,16 @@ export const CallbacksTabsFileBrowserPanel = ({ index, value, tabInfo, me }) =>
                         setTableData={onSetTableData}
                         taskListing={taskListing}
                         tableOpenedPathId={tableOpenedPathIdRef.current}
+                        getLoadedCommandForUIFeature={getLoadedCommandForUIFeature}
+                        baseUIFeature={baseUIFeature}
                     />
 
                 </div>
-                <div className="bg-gray-light" style={{display: "inline-flex"}}>
-                    <div style={{ display: 'flex', flexDirection: 'column', flexGrow: 1, overflow: "hidden" }}>
-                        <div style={{ flexGrow: 0 }}>
+                <div className="mythic-eventing-content flex min-h-0 min-w-0 overflow-hidden rounded bg-surface-raised border-subtle">
+                    <div className="mythic-process-browser-table-shell flex flex-column h-full min-h-0 min-w-0 overflow-hidden w-full relative">
+                        <div>
                             <FileBrowserTableTop
+                                active={active}
                                 tabInfo={tabInfo}
                                 taskingTableTopTypedDataRef={taskingTableTopTypedDataRef}
                                 autoTaskLsOnEmptyDirectoriesRef={autoTaskLsOnEmptyDirectoriesRef}
@@ -638,13 +595,16 @@ export const CallbacksTabsFileBrowserPanel = ({ index, value, tabInfo, me }) =>
                                 fetchParentFolderData={fetchParentFolderData}
                                 fetchFolderData={fetchFolderData}
                                 openDirectoryPath={openDirectoryPath}
+                                baseUIFeature={baseUIFeature}
                             />
                         </div>
-                        <div style={{ flexGrow: 1 }}>
+                        <div className="mythic-process-browser-grid-shell flex-fill min-h-0 min-w-0 overflow-hidden">
                             <Backdrop open={backdropOpen} style={{zIndex: 2, position: "absolute"}} invisible={true}>
                                 <CircularProgress color="inherit" />
                             </Backdrop>
                             <CallbacksTabsFileBrowserTable
+                                active={active}
+                                dataVersion={treeVersion}
                                 tabInfo={tabInfo}
                                 showDeletedFiles={showDeletedFiles}
                                 onRowDoubleClick={fetchFolderData}
@@ -655,7 +615,9 @@ export const CallbacksTabsFileBrowserPanel = ({ index, value, tabInfo, me }) =>
                                 autoTaskLsOnEmptyDirectories={autoTaskLsOnEmptyDirectoriesRef.current}
                                 onTaskRowAction={onTaskRowAction}
                                 onTaskRowActions={onTaskRowActions}
+                                getLoadedCommandForUIFeature={getLoadedCommandForUIFeature}
                                 me={me}
+                                baseUIFeature={baseUIFeature}
                             />
                         </div>
                     </div>
@@ -677,6 +639,7 @@ export const CallbacksTabsFileBrowserPanel = ({ index, value, tabInfo, me }) =>
     );
 };
 const FileBrowserTableTop = ({
+    active,
     selectedFolderData,
     taskingTableTopTypedDataRef,
     autoTaskLsOnEmptyDirectoriesRef,
@@ -687,12 +650,13 @@ const FileBrowserTableTop = ({
     fetchParentFolderData,
     fetchFolderData,
     openDirectoryPath,
-    tabInfo
+    tabInfo,
+    baseUIFeature
 }) => {
-    const initialAutoTaskLsOnEmptyDirectories = useMythicSetting({
-        setting_name: "autoTaskLsOnEmptyDirectories", default_value: "false"
-    });
-    const [autoTaskLsOnEmptyDirectories, setAutoTaskLsOnEmptyDirectories] = React.useState(initialAutoTaskLsOnEmptyDirectories);
+    const [autoTaskLsOnEmptyDirectories, setAutoTaskLsOnEmptyDirectories] = React.useState(() => GetMythicSetting({
+        setting_name: "autoTaskLsOnEmptyDirectories", default_value: false
+    }));
+    const [updateMythicSetting] = useSetMythicSetting();
     const [fullPath, setFullPath] = React.useState('');
     const selectedToken = React.useRef("Default Token");
     const [tokenOptions, setTokenOptions] = React.useState([]);
@@ -720,9 +684,14 @@ const FileBrowserTableTop = ({
     }
     useSubscription(subscriptionCallbackTokens, {
         variables: {callback_id: tabInfo.callbackID}, fetchPolicy: "no-cache",
+        skip: !active,
+        ignoreResults: true,
         shouldResubscribe: true,
         onData: ({data}) => {
             setTokenOptions(data.data.callbacktoken);
+            if(data.data.callbacktoken.length === 0) {
+                onChangeSelectedToken("Default Token");
+            }
         }
     });
     useEffect(() => {
@@ -745,16 +714,15 @@ const FileBrowserTableTop = ({
             return;
         }
         if(selectedFolderData.id !== ""){
-            if(history[0]?.full_path_text !== selectedFolderData.full_path_text){
-                // always add newest things to the bottom of the stack
-                setHistory([selectedFolderData, ...history]);
-                if(history.length > 20){
-                    // pop off from the top (the oldest) if we get more than 50
-                    setHistory([selectedFolderData, ...history.splice(history.length-1, 1)])
+            setHistory((currentHistory) => {
+                if(currentHistory[0]?.full_path_text === selectedFolderData.full_path_text){
+                    return currentHistory;
                 }
-            }
+                return [selectedFolderData, ...currentHistory].slice(0, 20);
+            });
+            setHistoryIndex(0);
         }
-    }, [selectedFolderData, history])
+    }, [selectedFolderData])
     const moveIndexToPreviousListing = () => {
         // we're getting closer to the end of the historyRef.current, the oldest listing
         if(historyIndex >= history.length -1){
@@ -765,7 +733,7 @@ const FileBrowserTableTop = ({
     }
     const moveIndexToNextListing = () => {
         // we're getting close to index 0, the newest listing
-        console.log(historyIndex, history);
+        //console.log(historyIndex, history);
         if(historyIndex <= 0){
             return
         }
@@ -800,8 +768,14 @@ const FileBrowserTableTop = ({
         }
     };
     const onToggleAutoTaskLsOnEmptyDirectories = () => {
-        SetMythicSetting({setting_name: "autoTaskLsOnEmptyDirectories", value: !autoTaskLsOnEmptyDirectories});
-        setAutoTaskLsOnEmptyDirectories(!autoTaskLsOnEmptyDirectories);
+        const nextAutoTaskSetting = !autoTaskLsOnEmptyDirectories;
+        setAutoTaskLsOnEmptyDirectories(nextAutoTaskSetting);
+        autoTaskLsOnEmptyDirectoriesRef.current = nextAutoTaskSetting;
+        updateMythicSetting({
+            setting_name: "autoTaskLsOnEmptyDirectories",
+            value: nextAutoTaskSetting,
+            broadcast: false,
+        });
         if(autoTaskLsOnEmptyDirectories){
             snackActions.info("No longer auto issuing listings for empty paths");
         } else {
@@ -832,100 +806,106 @@ const FileBrowserTableTop = ({
         autoTaskLsOnEmptyDirectoriesRef.current = autoTaskLsOnEmptyDirectories;
     }, [autoTaskLsOnEmptyDirectories]);
     return (
-        <Grid container spacing={0} style={{ paddingTop: '10px' }}>
-            <Grid item xs={12} >
+        <Grid container spacing={0} className="mythic-file-browser-tableTop">
+            <Grid size={12}>
                 <MythicTextField
                     placeholder={selectedFolderData.host}
                     value={fullPath}
                     onEnter={goToDirectory}
                     onChange={onChangePath}
                     name={placeHolder}
+                    marginTop="0"
+                    marginBottom="0"
                     InputProps={{
+                        className: "mythic-file-browser-pathInput",
                         endAdornment: (
-                            <React.Fragment>
+                            <div className="mythic-file-browser-toolbarGroup items-center inline-flex mythic-file-browser-toolbarGroupEnd">
                                 <MythicStyledTooltip title={`Task current callback (${tabInfo["displayID"]}) to list contents`}>
-                                    <IconButton style={{ padding: '3px' }}
-                                                onClick={onLocalListFilesButton}
-                                                size="large">
-                                        <RefreshIcon color='info' />
-                                    </IconButton>
+                                    <MythicActionButton iconOnly
+                                        appearance="plain" colorMode="hover" shape="square" tone="info"
+                                        onClick={onLocalListFilesButton}
+                                        size="small">
+                                        <RefreshIcon fontSize="small" />
+                                    </MythicActionButton>
                                 </MythicStyledTooltip>
                                 <MythicStyledTooltip title={`Upload file to folder via current callback (${tabInfo["displayID"]})`}>
-                                    <IconButton style={{ padding: '3px' }}
-                                                onClick={onLocalUploadFileButton}
-                                                size="large">
-                                        <CloudUploadIcon color="info" />
-                                    </IconButton>
+                                    <MythicActionButton iconOnly
+                                        appearance="plain" colorMode="hover" shape="square" tone="info"
+                                        onClick={onLocalUploadFileButton}
+                                        size="small">
+                                        <CloudUploadIcon fontSize="small" />
+                                    </MythicActionButton>
                                 </MythicStyledTooltip>
                                 {autoTaskLsOnEmptyDirectories ? (
                                     <MythicStyledTooltip title={"Currently tasking listing on empty directories, click to toggle off"} >
-                                        <IconButton style={{padding: "3px"}}
-                                                    onClick={onToggleAutoTaskLsOnEmptyDirectories}
-                                                    size={"large"}>
-                                            <PlaylistAddIcon color={"success"} ></PlaylistAddIcon>
-                                        </IconButton>
+                                        <MythicActionButton iconOnly
+                                            appearance="plain" active colorMode="hover" shape="square" tone="success"
+                                            onClick={onToggleAutoTaskLsOnEmptyDirectories}
+                                            size="small">
+                                            <PlaylistAddIcon fontSize="small" />
+                                        </MythicActionButton>
                                     </MythicStyledTooltip>
                                 ) : (
                                     <MythicStyledTooltip title={"Currently not tasking listing on empty directories, click to toggle on"} >
-                                        <IconButton style={{padding: "3px"}}
-                                                    onClick={onToggleAutoTaskLsOnEmptyDirectories}
-                                                    size={"large"}>
-                                            <PlaylistRemoveIcon color={"secondary"} ></PlaylistRemoveIcon>
-                                        </IconButton>
+                                        <MythicActionButton iconOnly
+                                            appearance="plain" colorMode="hover" shape="square" tone="warning"
+                                            onClick={onToggleAutoTaskLsOnEmptyDirectories}
+                                            size="small">
+                                            <PlaylistRemoveIcon fontSize="small" />
+                                        </MythicActionButton>
                                     </MythicStyledTooltip>
                                 )}
                                 <MythicStyledTooltip title={showDeletedFiles ? 'Hide Deleted Files' : 'Show Deleted Files'}>
-                                    <IconButton
-                                        style={{ padding: '3px' }}
+                                    <MythicActionButton iconOnly
+                                        appearance="plain" active={showDeletedFiles} colorMode="hover" shape="square" tone="warning"
                                         onClick={onLocalToggleShowDeletedFiles}
-                                        size="large">
+                                        size="small">
                                         {showDeletedFiles ? (
-                                            <VisibilityIcon color="success" />
+                                            <VisibilityIcon fontSize="small" />
                                         ) : (
-                                            <VisibilityOffIcon color="error"  />
+                                            <VisibilityOffIcon fontSize="small" />
                                         )}
-                                    </IconButton>
+                                    </MythicActionButton>
                                 </MythicStyledTooltip>
-                            </React.Fragment>
+                            </div>
                         ),
                         startAdornment: (
-                            <div style={{display: "inline-flex",
-                                alignItems: "center",
-                                borderRight: "1px solid grey",
-                                marginRight: "10px",
-                                padding: "0 5px 0 0"}}>
-                                {tokenOptions.length > 0 ? (
-                                    <CallbacksTabsTaskingInputTokenSelect options={tokenOptions} changeSelectedToken={changeSelectedToken}/>
-                                ) : null}
+                            <div className="mythic-file-browser-toolbarGroup items-center inline-flex mythic-file-browser-toolbarGroupStart">
+                                {tokenOptions.length > 0 &&
+                                    <div className="mythic-file-browser-tokenSelect overflow-hidden">
+                                        <CallbacksTabsTaskingInputTokenSelect width={"100%"}
+                                            options={tokenOptions} changeSelectedToken={changeSelectedToken}/>
+                                    </div>
+                                }
                                 <MythicStyledTooltip title={`Move back to previous listing`}>
-                                    <IconButton style={{ padding: '3px' }}
-                                                disabled={historyIndex >= history.length -1 }
-                                                onClick={moveIndexToPreviousListing}
-                                                color='info'
-                                                size="large">
-                                        <ArrowBackIcon />
-                                    </IconButton>
+                                    <MythicActionButton iconOnly
+                                        appearance="plain" colorMode="hover" shape="square" tone="info"
+                                        disabled={historyIndex >= history.length -1 }
+                                        onClick={moveIndexToPreviousListing}
+                                        size="small">
+                                        <ArrowBackIcon fontSize="small" />
+                                    </MythicActionButton>
                                 </MythicStyledTooltip>
                                 <MythicStyledTooltip title={`Move to next listing`}>
-                                    <IconButton style={{ padding: '3px' }}
-                                                disabled={historyIndex <= 0}
-                                                onClick={moveIndexToNextListing}
-                                                size="large"
-                                                color='info'>
-                                        <ArrowForwardIcon  />
-                                    </IconButton>
+                                    <MythicActionButton iconOnly
+                                        appearance="plain" colorMode="hover" shape="square" tone="info"
+                                        disabled={historyIndex <= 0}
+                                        onClick={moveIndexToNextListing}
+                                        size="small">
+                                        <ArrowForwardIcon fontSize="small" />
+                                    </MythicActionButton>
                                 </MythicStyledTooltip>
                                 <MythicStyledTooltip title={"Move up a directory"} >
-                                    <IconButton style={{padding: "0 0 0 0"}}
-                                                onClick={onLocalMoveUpDirectoryButton}
-                                                disabled={!selectedFolderData?.parent_path_text || selectedFolderData?.parent_path_text?.length === 0 || selectedFolderData.root || fullPath === ""}
+                                    <MythicActionButton iconOnly
+                                        appearance="plain" colorMode="hover" shape="square" tone="info"
+                                        onClick={onLocalMoveUpDirectoryButton}
+                                        disabled={!selectedFolderData?.parent_path_text || selectedFolderData?.parent_path_text?.length === 0 || selectedFolderData.root || fullPath === ""}
                                     >
-                                        <KeyboardReturnIcon style={{rotate: "90deg"}} ></KeyboardReturnIcon>
-                                    </IconButton>
+                                        <KeyboardReturnIcon fontSize="small" style={{rotate: "90deg"}} />
+                                    </MythicActionButton>
                                 </MythicStyledTooltip>
 
                         </div>),
-                        style: {  },
                     }}
                 />
             </Grid>

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

@@ -6,11 +6,14 @@ import ListIcon from '@mui/icons-material/List';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
 import {getAllParentNodes} from "./CallbacksTabsFileBrowser";
 import {Dropdown, DropdownMenuItem, DropdownNestedMenuItem} from "../../MythicComponents/MythicNestedMenus";
+import {copyStringToClipboard} from "../../utilities/Clipboard";
+import FileCopyOutlinedIcon from '@mui/icons-material/FileCopyOutlined';
+import {snackActions} from "../../utilities/Snackbar";
 
 export const getOpenIDFromNode = (node) => {
     return `${node.group};${node.host};${node.full_path_text}`;
 }
-export const CallbacksTabsFileBrowserTreePreMemo = ({ treeRootData, treeAdjMatrix, fetchFolderData, setTableData, taskListing, tableOpenedPathId, showDeletedFiles, tabInfo, selectedFolderData}) => {
+export const CallbacksTabsFileBrowserTreePreMemo = ({ treeRootData, treeAdjMatrix, fetchFolderData, setTableData, taskListing, tableOpenedPathId, showDeletedFiles, tabInfo, selectedFolderData, baseUIFeature}) => {
     const [openNodes, setOpenNodes] = React.useState({});
     const groupName = React.useRef("");
     const [openViewGroupsDialog, setOpenViewGroupDialog] = React.useState(false);
@@ -19,7 +22,7 @@ export const CallbacksTabsFileBrowserTreePreMemo = ({ treeRootData, treeAdjMatri
         //console.log("toggleNodeExpanded", nodeId, nodeData);
         let lastOpenedNodeNewState = true;
         let lastOpenedNodeID = getOpenIDFromNode(lastOpenedNodeRef.current);
-        if(!lastOpenedNodeRef.current?.metadata?.has_children){
+        if(!lastOpenedNodeRef.current?.has_children){
             lastOpenedNodeNewState = false;
         }
         lastOpenedNodeRef.current = {...nodeData};
@@ -28,7 +31,7 @@ export const CallbacksTabsFileBrowserTreePreMemo = ({ treeRootData, treeAdjMatri
         setOpenNodes({
           ...openNodes,
           [getOpenIDFromNode(nodeData)]: true,
-          [lastOpenedNodeID]: lastOpenedNodeNewState
+          //[lastOpenedNodeID]: lastOpenedNodeNewState
         });
       };
     const toggleNodeCollapsed =  (nodeId, nodeData) => {
@@ -77,6 +80,41 @@ export const CallbacksTabsFileBrowserTreePreMemo = ({ treeRootData, treeAdjMatri
         });
     }, [selectedFolderData]);
     const contextMenuOptions= (callback_id, callback_display_id, node) => [
+        {
+            name: "Copy to Clipboard", icon: null, click: () => {}, type: "menu",
+            menuItems: [
+                {
+                    name: 'Name', type: "item",
+                    icon: <FileCopyOutlinedIcon style={{ paddingRight: '5px' }} />,
+                    click: ({event}) => {
+                        event.stopPropagation();
+                        if(copyStringToClipboard(node.name_text)){
+                            snackActions.success("Copied to clipboard");
+                        }
+                    },
+                },
+                {
+                    name: 'Full Path', type: "item",
+                    icon: <FileCopyOutlinedIcon style={{ paddingRight: '5px' }} />,
+                    click: ({event}) => {
+                        event.stopPropagation();
+                        if(copyStringToClipboard(node.full_path_text)){
+                            snackActions.success("Copied to clipboard");
+                        }
+                    },
+                },
+                {
+                    name: 'Metadata', type: "item",
+                    icon: <FileCopyOutlinedIcon style={{ paddingRight: '5px' }} />,
+                    click: ({event}) => {
+                        event.stopPropagation();
+                        if(copyStringToClipboard(JSON.stringify(node?.metadata, null, 2))){
+                            snackActions.success("Copied to clipboard");
+                        }
+                    },
+                },
+            ]
+        },
       {
           name: 'List', type: "item", icon: <ListIcon color="warning" style={{ paddingRight: '5px'}} />,
           click: ({event}) => {
@@ -106,10 +144,10 @@ export const CallbacksTabsFileBrowserTreePreMemo = ({ treeRootData, treeAdjMatri
             options.push(...contextMenuOptions(tabInfo["callbackID"], tabInfo["displayID"], contextMenuData.current?.item));
             if(contextMenuData.current?.item?.callback?.["display_id"] !== tabInfo["displayID"]){
                 options.push({
-                    name: "Original Callback " + contextMenuData.current?.item?.callback?.["display_id"],
+                    name: "Original Callback: " + contextMenuData.current?.item?.callback?.["display_id"],
                     icon: null, click: () => {}, type: "menu",
                     menuItems: [
-                        ...contextMenuOptions(contextMenuData.current?.item?.callback?.id, contextMenuData.current?.item?.callback?.display_id)
+                        ...contextMenuOptions(contextMenuData.current?.item?.callback?.id, contextMenuData.current?.item?.callback?.display_id, contextMenuData.current?.item)
                     ]
                 })
             }
@@ -146,6 +184,7 @@ export const CallbacksTabsFileBrowserTreePreMemo = ({ treeRootData, treeAdjMatri
               onCollapseNode={toggleNodeCollapsed}
               onContextMenu={onContextMenu}
               tabInfo={tabInfo}
+              baseUIFeature={baseUIFeature}
           />
           {openViewGroupsDialog &&
               <MythicDialog
@@ -159,6 +198,7 @@ export const CallbacksTabsFileBrowserTreePreMemo = ({ treeRootData, treeAdjMatri
                   }
               />
           }
+          {openContextMenu &&
               <ClickAwayListener onClickAway={handleClose} mouseEvent={"onMouseDown"}>
                   <Dropdown
                       isOpen={contextMenuData.current.dropdownAnchorRef}
@@ -200,7 +240,7 @@ export const CallbacksTabsFileBrowserTreePreMemo = ({ treeRootData, treeAdjMatri
                               ) : null))
                       ]}/>
               </ClickAwayListener>
-
+          }
       </>
 
   )

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

@@ -1,13 +1,13 @@
-import React, {useEffect} from 'react';
-import Button from '@mui/material/Button';
+import React from 'react';
+import {MythicActionButton} from '../../MythicComponents/MythicActionButton';
 import DialogActions from '@mui/material/DialogActions';
 import DialogTitle from '@mui/material/DialogTitle';
 import {useQuery, gql } from '@apollo/client';
 import {useMutation} from '@apollo/client';
 import {hideCallbacksMutation} from './CallbackMutations';
 import {snackActions} from "../../utilities/Snackbar";
-import {CallbacksTableLastCheckinCell, CallbacksTablePayloadTypeCell, CallbacksTableIPCell} from "./CallbacksTableRow";
-import { DataGrid } from '@mui/x-data-grid';
+import  DialogContentText  from '@mui/material/DialogContentText';
+import {CallbacksTabsSelectTable} from "./CallbacksTabsSelectTable";
 
 
 const callbacksAndFeaturesQuery = gql`
@@ -34,104 +34,6 @@ query callbacksAndFeatures{
   }
 }`;
 
-const columns = [
-    { field: 'display_id', headerName: 'ID', width: 70, type: 'number', },
-    {
-        field: 'host',
-        headerName: 'Host',
-        flex: 0.5,
-    },
-    {
-        field: 'user',
-        headerName: 'User',
-        flex: 0.5,
-    },
-    {
-        field: 'pid',
-        headerName: 'PID',
-        type: 'number',
-        width: 70,
-    },
-    {
-        field: 'description',
-        headerName: 'Description',
-        flex: 1,
-    },
-    {
-      field: 'ip',
-      headerName: 'IP',
-      width: 100,
-      renderCell: (params) => <CallbacksTableIPCell rowData={params.row} cellData={params.row.ip} />,
-        sortable: false,
-      valueGetter: (params) => {
-          try{
-              return JSON.parse(params.row.ip)[0];
-          }catch(error){
-              return params.row.ip;
-          }
-      }
-    },
-    {
-        field: "last_checkin",
-        headerName: "Checkin",
-        width: 100,
-        valueGetter: (params) => new Date(params.row.last_checkin),
-        renderCell: (params) =>
-            <CallbacksTableLastCheckinCell rowData={params.row} />,
-    },
-    {
-        field: "payload.payloadtype.name",
-        headerName: "Agent",
-        flex: 0.5,
-        valueGetter: (params) => params.row.payload.payloadtype.name,
-        renderCell: (params) => <CallbacksTablePayloadTypeCell rowData={params.row} />
-    },
-    {
-        field: "mythictree_groups_string",
-        headerName: "Groups",
-        flex: 0.5,
-    }
-];
-const CustomSelectTable = ({initialData, selectedData}) => {
-    const [data, setData] = React.useState([]);
-    const [rowSelectionModel, setRowSelectionModel] = React.useState([]);
-    React.useEffect( () => {
-        selectedData.current = data.reduce( (prev, cur) => {
-            if(rowSelectionModel.includes(cur.id)){return [...prev, cur]}
-            return [...prev];
-        }, []);
-    }, [data, rowSelectionModel]);
-    React.useEffect( () => {
-        setData(initialData.map(c => {
-            return {...c};
-        }));
-    }, [initialData]);
-    return (
-        <div style={{height: "calc(80vh)"}}>
-            <DataGrid
-                rows={data}
-                columns={columns}
-                initialState={{
-                    pagination: {
-                        paginationModel: {
-                        },
-                    },
-                    sorting: {
-                        sortModel: [{ field: 'last_checkin', sort: 'asc' }],
-                    },
-                }}
-                autoPageSize
-                checkboxSelection
-                onRowSelectionModelChange={(newRowSelectionModel) => {
-                    setRowSelectionModel(newRowSelectionModel);
-                }}
-                rowSelectionModel={rowSelectionModel}
-                density={"compact"}
-            />
-        </div>
-
-    )
-}
 export function CallbacksTabsHideMultipleDialog({onClose}) {
 
     const selectedData = React.useRef([]);
@@ -147,7 +49,7 @@ export function CallbacksTabsHideMultipleDialog({onClose}) {
             onClose();
         }
     });
-    useQuery(callbacksAndFeaturesQuery,{
+    const {loading} = useQuery(callbacksAndFeaturesQuery,{
       fetchPolicy: "no-cache",
       onCompleted: (data) => {
         const callbackData = data.callback.map( c => {
@@ -172,17 +74,72 @@ export function CallbacksTabsHideMultipleDialog({onClose}) {
   return (
     <React.Fragment>
         <DialogTitle id="form-dialog-title">Hide Multiple Callbacks at Once</DialogTitle>
-            <CustomSelectTable initialData={initialData}
-                               selectedData={selectedData}  />
+        <DialogContentText style={{textAlign: "center"}}>
+            <b>Note: </b> Last checkin times are based on when this window opened and won't refresh.
+        </DialogContentText>
+            <CallbacksTabsSelectTable initialData={initialData}
+                                      loading={loading}
+                                      selectedData={selectedData}
+                                      sortModel={{ field: 'last_checkin', sort: 'asc' }}
+                                      tableId="hide-multiple-callbacks-table"
+                                      tableLabel="Hide multiple callbacks"
+            />
         <DialogActions>
-          <Button onClick={onClose} variant="contained" color="primary">
+          <MythicActionButton colorMode="always" onClick={onClose} tone="primary" variant="contained">
             Close
-          </Button>
-          <Button onClick={submitTasking} variant="contained" color="warning">
+          </MythicActionButton>
+          <MythicActionButton colorMode="always" onClick={submitTasking} tone="warning" variant="contained">
             Hide
-          </Button>
+          </MythicActionButton>
         </DialogActions>
   </React.Fragment>
   );
 }
+export function CallbacksTabsSelectMultipleDialog({onClose, onSubmit}) {
 
+    const selectedData = React.useRef([]);
+    const [initialData, setInitialData] = React.useState([]);
+    const {loading} = useQuery(callbacksAndFeaturesQuery,{
+        fetchPolicy: "no-cache",
+        onCompleted: (data) => {
+            const callbackData = data.callback.map( c => {
+                // for each callback, get a unique set of supported features
+                const display = `${c.display_id} - ${c.user}@${c.host} (${c.pid}) - ${c.description}`;
+                return {...c, display};
+            });
+            setInitialData(callbackData);
+        }
+    });
+    const submitTasking = () => {
+        if(selectedData.current.length === 0){
+            onClose();
+            return;
+        }
+        onSubmit(selectedData.current);
+    }
+
+
+    return (
+        <React.Fragment>
+            <DialogTitle id="form-dialog-title">Select Multiple Callbacks</DialogTitle>
+            <DialogContentText style={{textAlign: "center"}}>
+                <b>Note: </b> Last checkin times are based on when this window opened and won't refresh.
+            </DialogContentText>
+            <CallbacksTabsSelectTable initialData={initialData}
+                                      loading={loading}
+                                      selectedData={selectedData}
+                                      sortModel={{ field: 'display_id', sort: 'desc' }}
+                                      tableId="select-multiple-callbacks-table"
+                                      tableLabel="Select multiple callbacks"
+            />
+            <DialogActions>
+                <MythicActionButton colorMode="always" onClick={onClose} tone="primary" variant="contained">
+                    Close
+                </MythicActionButton>
+                <MythicActionButton colorMode="always" onClick={submitTasking} tone="warning" variant="contained">
+                    Use Selection
+                </MythicActionButton>
+            </DialogActions>
+        </React.Fragment>
+    );
+}

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

@@ -1,10 +1,10 @@
-import React, {useContext} from 'react';
-import Button from '@mui/material/Button';
+import React from 'react';
+import {MythicActionButton} from '../../MythicComponents/MythicActionButton';
 import DialogActions from '@mui/material/DialogActions';
 import DialogTitle from '@mui/material/DialogTitle';
 import {useQuery, gql } from '@apollo/client';
-import {CallbacksTableLastCheckinCell, CallbacksTablePayloadTypeCell, CallbacksTableIPCell} from "./CallbacksTableRow";
-import { DataGrid } from '@mui/x-data-grid';
+import  DialogContentText  from '@mui/material/DialogContentText';
+import {CallbacksTabsSelectTable} from "./CallbacksTabsSelectTable";
 
 
 const callbacksAndFeaturesQuery = gql`
@@ -31,97 +31,9 @@ query callbacksAndFeatures{
   }
 }`;
 
-const columns = [
-    { field: 'display_id', headerName: 'ID', width: 70, type: 'number', },
-    {
-        field: 'host',
-        headerName: 'Host',
-        flex: 0.5,
-    },
-    {
-        field: 'user',
-        headerName: 'User',
-        flex: 0.5,
-    },
-    {
-        field: 'pid',
-        headerName: 'PID',
-        type: 'number',
-        width: 70,
-    },
-    {
-        field: 'description',
-        headerName: 'Description',
-        flex: 1,
-    },
-    {
-      field: 'ip',
-      headerName: 'IP',
-      width: 100,
-      renderCell: (params) => <CallbacksTableIPCell rowData={params.row} cellData={params.row.ip} />,
-        sortable: false,
-      valueGetter: (params) => {
-          try{
-              return JSON.parse(params.row.ip)[0];
-          }catch(error){
-              return params.row.ip;
-          }
-      }
-    },
-    {
-        field: "last_checkin",
-        headerName: "Checkin",
-        width: 100,
-        valueGetter: (params) => new Date(params.row.last_checkin),
-        renderCell: (params) =>
-            <CallbacksTableLastCheckinCell rowData={params.row} />,
-    },
-    {
-        field: "payload.payloadtype.name",
-        headerName: "Agent",
-        flex: 0.5,
-        valueGetter: (params) => params.row.payload.payloadtype.name,
-        renderCell: (params) => <CallbacksTablePayloadTypeCell rowData={params.row} />
-    },
-    {
-        field: "mythictree_groups_string",
-        headerName: "Groups",
-        flex: 0.5,
-    }
-];
-const CustomSelectTable = ({initialData, selectedData, onRowClick}) => {
-    const [data, setData] = React.useState([]);
-    React.useEffect( () => {
-        setData(initialData.map(c => {
-            return {...c};
-        }));
-    }, [initialData]);
-    return (
-        <div style={{height: "calc(80vh)"}}>
-            <DataGrid
-                rows={data}
-                columns={columns}
-                initialState={{
-                    pagination: {
-                        paginationModel: {
-                        },
-                    },
-                    sorting: {
-                        sortModel: [{ field: 'display_id', sort: 'desc' }],
-                    },
-                }}
-                autoPageSize
-                onRowClick={onRowClick}
-                density={"compact"}
-            />
-        </div>
-
-    )
-}
 export function CallbacksTabsOpenMultipleDialog({onClose, tabType, onOpenTabs}) {
-    const selectedData = React.useRef([]);
     const [initialData, setInitialData] = React.useState([]);
-    useQuery(callbacksAndFeaturesQuery,{
+    const {loading} = useQuery(callbacksAndFeaturesQuery,{
       fetchPolicy: "no-cache",
       onCompleted: (data) => {
         const callbackData = data.callback.map( c => {
@@ -133,23 +45,29 @@ export function CallbacksTabsOpenMultipleDialog({onClose, tabType, onOpenTabs})
       }
     });
     const onRowClick = (rowData) => {
-      onOpenTabs([rowData.row]);
+      onOpenTabs([rowData]);
     }
 
 
   return (
     <React.Fragment>
         <DialogTitle id="form-dialog-title">Select Callback to open {tabType} tab</DialogTitle>
-            <CustomSelectTable initialData={initialData}
-                               selectedData={selectedData}
-                               onRowClick={onRowClick}
+        <DialogContentText style={{textAlign: "center"}}>
+            <b>Note: </b> Last checkin times are based on when this window opened and won't refresh.
+        </DialogContentText>
+            <CallbacksTabsSelectTable initialData={initialData}
+                                      loading={loading}
+                                      onRowClick={onRowClick}
+                                      selectable={false}
+                                      sortModel={{ field: 'display_id', sort: 'desc' }}
+                                      tableId={`open-multiple-${tabType}-callbacks-table`}
+                                      tableLabel={`Open ${tabType} callback`}
             />
         <DialogActions>
-          <Button onClick={onClose} variant="contained" color="primary">
+          <MythicActionButton colorMode="always" onClick={onClose} tone="primary" variant="contained">
             Close
-          </Button>
+          </MythicActionButton>
         </DialogActions>
   </React.Fragment>
   );
 }
-

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

@@ -1,13 +1,10 @@
+import {MythicActionButton} from "../../MythicComponents/MythicActionButton";
 import {MythicTabPanel, MythicTabLabel} from '../../MythicComponents/MythicTabPanel';
-import React, {useEffect, useRef} from 'react';
-import {gql, useQuery, useSubscription, useLazyQuery } from '@apollo/client';
+import React, {useCallback, useEffect} from 'react';
+import {gql, useQuery, useSubscription } from '@apollo/client';
 import { MythicDialog } from '../../MythicComponents/MythicDialog';
 import {useTheme} from '@mui/material/styles';
-import Grid from '@mui/material/Grid';
 import RefreshIcon from '@mui/icons-material/Refresh';
-import IconButton from '@mui/material/IconButton';
-import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
-import VisibilityIcon from '@mui/icons-material/Visibility';
 import {CallbacksTabsProcessBrowserTable} from './CallbacksTabsProcessBrowserTable';
 import {MythicModifyStringDialog} from '../../MythicComponents/MythicDialog';
 import {TaskFromUIButton} from './TaskFromUIButton';
@@ -15,14 +12,20 @@ import { MythicStyledTooltip } from '../../MythicComponents/MythicStyledTooltip'
 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 TextField from '@mui/material/TextField';
+import InputAdornment from '@mui/material/InputAdornment';
 import {ViewCallbackMythicTreeGroupsDialog} from "./ViewCallbackMythicTreeGroupsDialog";
 import WidgetsIcon from '@mui/icons-material/Widgets';
 import {snackActions} from "../../utilities/Snackbar";
-import { Backdrop, Typography } from '@mui/material';
+import {Backdrop, Typography} from '@mui/material';
 import {CircularProgress} from '@mui/material';
 import ExpandIcon from '@mui/icons-material/Expand';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
+import SearchIcon from '@mui/icons-material/Search';
+import ClearIcon from '@mui/icons-material/Clear';
+import {useMythicLazyQuery} from "../../utilities/useMythicLazyQuery";
+import {getDefaultBrowserSelection, useCallbackBrowserTree} from "./CallbackBrowserTreeStore";
 
 const treeFragment = gql`
 fragment treeObjData on mythictree {
@@ -61,7 +64,7 @@ const treeSubscription = gql`
         mythictree_stream(
             batch_size: 1000,
             cursor: {initial_value: {timestamp: $now}}, 
-            where: {tree_type: {_eq: "process"} }
+            where: {tree_type: {_eq: "process"}, deleted: {_eq: false} }
         ) {
             ...treeObjData
         }
@@ -78,11 +81,32 @@ const rootQuery = gql`
 const treeHostQuery = gql`
     ${treeFragment}
     query processesPerHostQuery($host: String!){
-        mythictree(where: {host: {_eq: $host}, tree_type: {_eq: "process"} }, order_by: {id: asc}) {
+        mythictree(where: {host: {_eq: $host}, tree_type: {_eq: "process"}, deleted: {_eq: false} }, order_by: {id: asc}) {
             ...treeObjData
         }
     }
 `;
+const mergeUniqueById = (existing = [], incoming = []) => [
+    ...new Map([...existing, ...incoming].filter(Boolean).map((item) => [item.id, item])).values(),
+];
+export const loadedCommandsQuery = gql`
+query loadedCommandUIFeatures($callback_id: Int!){
+    loadedcommands(where: {callback_id: {_eq: $callback_id}}){
+        callback_id
+        command {
+            supported_ui_features
+            cmd
+            id
+            payloadtype {
+                name
+                id
+            }
+        }
+        id
+        version
+    }
+}
+`;
 export function CallbacksTabsProcessBrowserLabel(props){
     const [description, setDescription] = React.useState("Processes: " + props.tabInfo.displayID)
     const [openEditDescriptionDialog, setOpenEditDescriptionDialog] = React.useState(false);
@@ -113,7 +137,7 @@ export function CallbacksTabsProcessBrowserLabel(props){
     }
     return (
         <React.Fragment>
-            <MythicTabLabel label={description} onDragTab={props.onDragTab}  {...props} contextMenuOptions={contextMenuOptions}/>
+            <MythicTabLabel label={description} highlight={props.newDataForTab[props.tabInfo.tabID]} onDragTab={props.onDragTab}  {...props} contextMenuOptions={contextMenuOptions}/>
             {openEditDescriptionDialog &&
                 <MythicDialog fullWidth={true} open={openEditDescriptionDialog}  onClose={() => {setOpenEditDescriptionDialog(false);}}
                     innerDialog={
@@ -124,24 +148,47 @@ export function CallbacksTabsProcessBrowserLabel(props){
         </React.Fragment>  
     )
 }
-export const CallbacksTabsProcessBrowserPanel = ({index, value, tabInfo, me}) =>{
+export const CallbacksTabsProcessBrowserPanel = ({index, value, tabInfo, me, setNewDataForTab}) =>{
+    const theme = useTheme();
     const fromNow = React.useRef((new Date()));
+    const active = index === value;
+    const markInactiveChange = useCallback(() => {
+        setNewDataForTab((previous) => previous[tabInfo.tabID] ? previous : {
+            ...previous,
+            [tabInfo.tabID]: true,
+        });
+    }, [setNewDataForTab, tabInfo.tabID]);
+    const {
+        treeRootDataRef,
+        treeAdjMtx,
+        version: treeVersion,
+        hydrated: treeHydrated,
+        setTreeAdjMtx,
+        isScopeLoaded,
+        markScopeLoaded,
+    } = useCallbackBrowserTree({
+        treeType: "process",
+        mode: "process",
+        active,
+        onInactiveChange: markInactiveChange,
+    });
     const [backdropOpen, setBackdropOpen] = React.useState(false);
-    const [expandOrCollapseAll, setExpandOrCollapseAll] = React.useState(false);
-    const treeRootDataRef = React.useRef({}); // hold all the actual data
-    const [treeAdjMtx, setTreeAdjMtx] = React.useState({}); // hold the simple adjacency matrix for parent/child relationships
+    const [expandOrCollapseAll, setExpandOrCollapseAll] = React.useState(true);
     const [openTaskingButton, setOpenTaskingButton] = React.useState(false);
     const taskingData = React.useRef({"parameters": "", "ui_feature": "process_browser:list"});
     const mountedRef = React.useRef(true);
     const [showDeletedFiles, setShowDeletedFiles] = React.useState(false);
     const [selectedHost, setSelectedHost] = React.useState("");
     const [selectedGroup, setSelectedGroup] = React.useState("");
+    const [quickFilter, setQuickFilter] = React.useState("");
+    const loadedCommandsRef = React.useRef({});
+    const loadingCommandsRef = React.useRef(false);
     const getNewMatrix = () => {
         let newMatrix = {};
         for(const[group, groupMatrix] of Object.entries(treeRootDataRef.current)){
             if(newMatrix[group] === undefined){newMatrix[group] = {}}
             for(const[host, hostMatrix] of Object.entries(treeRootDataRef.current[group])){
-                if(newMatrix[group][host] === undefined){newMatrix[group][host] = {"":[]}}
+                if(newMatrix[group][host] === undefined){newMatrix[group][host] = {"":{}}}
                 for(const[full_path_text, node] of Object.entries(treeRootDataRef.current[group][host])){
                     if(newMatrix[group][host][ node["parent_path_text"] ] === undefined){
                         newMatrix[group][host][ node["parent_path_text"] ] = {}
@@ -153,6 +200,7 @@ export const CallbacksTabsProcessBrowserPanel = ({index, value, tabInfo, me}) =>
         return newMatrix;
     }
     useQuery(rootQuery, {
+        skip: true,
         onCompleted: (data) => {
            // use an adjacency matrix but only for full_path_text -> children, not both directions
             let defaultGroup = "Default";
@@ -216,8 +264,22 @@ export const CallbacksTabsProcessBrowserPanel = ({index, value, tabInfo, me}) =>
         },
         fetchPolicy: 'no-cache',
     });
+    const getLoadedCommandsQuerySuccess = (data) => {
+        if(data.loadedcommands.length > 0){
+            loadedCommandsRef.current[data.loadedcommands[0].callback_id] = [...data.loadedcommands];
+        }
+        loadingCommandsRef.current = false;
+    }
+    const getLoadedCommandsQueryError = (data) => {
+        console.log(data);
+        loadingCommandsRef.current = false;
+    }
+    const getLoadedCommandsQuery = useMythicLazyQuery(loadedCommandsQuery, {
+        fetchPolicy: 'no-cache',
+    });
     useSubscription(treeSubscription, {
         variables: {now: fromNow.current},
+        skip: true,
         fetchPolicy: "no-cache",
         onData: ({data}) => {
             for(let i = 0; i < data.data.mythictree_stream.length; i++){
@@ -232,67 +294,97 @@ export const CallbacksTabsProcessBrowserPanel = ({index, value, tabInfo, me}) =>
                     }
                     if(treeRootDataRef.current[currentGroups[j]][data.data.mythictree_stream[i]["host"]][data.data.mythictree_stream[i]["full_path_text"]] === undefined){
                         // first time we're seeing this file data, just add it
+                        if(data.data.mythictree_stream[i].deleted){continue}
                         treeRootDataRef.current[currentGroups[j]][data.data.mythictree_stream[i]["host"]][data.data.mythictree_stream[i]["full_path_text"]] = {...data.data.mythictree_stream[i]};
                         treeRootDataRef.current[currentGroups[j]][data.data.mythictree_stream[i]["host"]][data.data.mythictree_stream[i]["full_path_text"]].callbacks = [data.data.mythictree_stream[i].callback]
                     } else {
                         // we need to merge data in because we already have some info
                         let existingData = treeRootDataRef.current[currentGroups[j]][data.data.mythictree_stream[i]["host"]][data.data.mythictree_stream[i]["full_path_text"]];
-                        existingData.callbacks.push(data.data.mythictree_stream[i].callback)
+                        if(existingData.task_id <= data.data.mythictree_stream[i].task_id){
+                            if(data.data.mythictree_stream[i].deleted){
+                                delete treeRootDataRef.current[currentGroups[j]][data.data.mythictree_stream[i]["host"]][data.data.mythictree_stream[i]["full_path_text"]];
+                                continue;
+                            }
+                        }
+                        existingData.has_children = data.data.mythictree_stream[i].has_children || existingData.has_children;
+                        existingData.callbacks = mergeUniqueById(existingData.callbacks, [data.data.mythictree_stream[i].callback]);
                         existingData.comment += data.data.mythictree_stream[i].comment;
-                        existingData.tags = [...existingData.tags, ...data.data.mythictree_stream[i].tags];
-                        existingData.metadata = {...existingData.metadata, ...data.data.mythictree_stream[i].metadata};
+                        existingData.tags = mergeUniqueById(existingData.tags, data.data.mythictree_stream[i].tags);
+                        if(existingData.task_id > data.data.mythictree_stream[i].task_id){
+                            existingData.metadata = {...data.data.mythictree_stream[i].metadata, ...existingData.metadata};
+                        } else {
+                            existingData.metadata = {...existingData.metadata, ...data.data.mythictree_stream[i].metadata};
+                        }
                         treeRootDataRef.current[currentGroups[j]][data.data.mythictree_stream[i]["host"]][data.data.mythictree_stream[i]["full_path_text"]] = {...existingData};
                     }
                 }
             }
             const newMatrix = getNewMatrix();
             setTreeAdjMtx(newMatrix);
+            if(index !== value){
+                setNewDataForTab((prev) => {return {...prev, [tabInfo.tabID]: true}});
+            }
         }
-    })
-    const [getHostProcessesQuery] = useLazyQuery(treeHostQuery, {
-        onError: (data) => {
-            console.error(data);
-        },
-        fetchPolicy: 'no-cache',
-        onCompleted: (data) => {
-            snackActions.dismiss();
-            // add in all of the raw data
-            for(let i = 0; i < data.mythictree.length; i++){
-                let currentGroups = data.mythictree[i]?.["callback"]?.["mythictree_groups"] || ["Unknown Callbacks"];
-                for(let j = 0; j < currentGroups.length; j++){
-                    if(treeRootDataRef.current[currentGroups[j]] === undefined){
-                        treeRootDataRef.current[currentGroups[j]] = {};
+    });
+    const initializedSelectionRef = React.useRef(false);
+    React.useEffect(() => {
+        if(!treeHydrated || initializedSelectionRef.current){return;}
+        const selection = getDefaultBrowserSelection(
+            treeRootDataRef.current,
+            treeAdjMtx,
+            tabInfo.callbackID,
+            tabInfo.host,
+        );
+        setSelectedGroup(selection.group);
+        setSelectedHost(selection.host);
+        initializedSelectionRef.current = true;
+    }, [tabInfo.callbackID, tabInfo.host, treeAdjMtx, treeHydrated, treeRootDataRef, treeVersion]);
+    const getHostProcessesQuerySuccess = (data) => {
+        snackActions.dismiss();
+        // add in all of the raw data
+        for(let i = 0; i < data.mythictree.length; i++){
+            let currentGroups = data.mythictree[i]?.["callback"]?.["mythictree_groups"] || ["Unknown Callbacks"];
+            for(let j = 0; j < currentGroups.length; j++){
+                if(treeRootDataRef.current[currentGroups[j]] === undefined){
+                    treeRootDataRef.current[currentGroups[j]] = {};
+                }
+                if( treeRootDataRef.current[currentGroups[j]][data.mythictree[i]["host"]] === undefined) {
+                    // new host discovered
+                    treeRootDataRef.current[currentGroups[j]][data.mythictree[i]["host"]] = {};
+                }
+                if(treeRootDataRef.current[currentGroups[j]][data.mythictree[i]["host"]][data.mythictree[i]["full_path_text"]] === undefined){
+                    // first time we're seeing this file data, just add it
+                    treeRootDataRef.current[currentGroups[j]][data.mythictree[i]["host"]][data.mythictree[i]["full_path_text"]] = {...data.mythictree[i]};
+                    treeRootDataRef.current[currentGroups[j]][data.mythictree[i]["host"]][data.mythictree[i]["full_path_text"]].callbacks = [data.mythictree[i].callback];
+                } else {
+                    // we need to merge data in because we already have some info
+                    if(data.mythictree[i].deleted){
+                        delete treeRootDataRef.current[currentGroups[j]][data.mythictree[i]["host"]][data.mythictree[i]["full_path_text"]];
+                        continue;
                     }
-                    if( treeRootDataRef.current[currentGroups[j]][data.mythictree[i]["host"]] === undefined) {
-                        // new host discovered
-                        treeRootDataRef.current[currentGroups[j]][data.mythictree[i]["host"]] = {};
-                    }
-                    if(treeRootDataRef.current[currentGroups[j]][data.mythictree[i]["host"]][data.mythictree[i]["full_path_text"]] === undefined){
-                        // first time we're seeing this file data, just add it
-                        treeRootDataRef.current[currentGroups[j]][data.mythictree[i]["host"]][data.mythictree[i]["full_path_text"]] = {...data.mythictree[i]};
-                        treeRootDataRef.current[currentGroups[j]][data.mythictree[i]["host"]][data.mythictree[i]["full_path_text"]].callbacks = [data.mythictree[i].callback];
+                    let existingData = treeRootDataRef.current[currentGroups[j]][data.mythictree[i]["host"]][data.mythictree[i]["full_path_text"]];
+                    existingData.comment += data.mythictree[i].comment;
+                    existingData.callbacks = mergeUniqueById(existingData.callbacks, [data.mythictree[i].callback]);
+                    existingData.tags = mergeUniqueById(existingData.tags, data.mythictree[i].tags);
+                    if(existingData.task_id > data.mythictree[i].task_id){
+                        existingData.metadata = {...data.mythictree[i].metadata, ...existingData.metadata};
                     } else {
-                        // we need to merge data in because we already have some info
-                        let existingData = treeRootDataRef.current[currentGroups[j]][data.mythictree[i]["host"]][data.mythictree[i]["full_path_text"]];
-                        existingData.comment += data.mythictree[i].comment;
-                        existingData.callbacks.push(data.mythictree[i].callback)
-                        existingData.tags = [...existingData.tags, ...data.mythictree[i].tags];
-                        if(existingData.id > data.mythictree[i].id){
-                            existingData.metadata = {...existingData.metadata};
-                        } else {
-                            existingData.metadata = {...data.mythictree[i].metadata};
-                        }
-                        treeRootDataRef.current[currentGroups[j]][data.mythictree[i]["host"]][data.mythictree[i]["full_path_text"]] = {...existingData};
+                        existingData.metadata = {...existingData.metadata, ...data.mythictree[i].metadata};
                     }
+                    treeRootDataRef.current[currentGroups[j]][data.mythictree[i]["host"]][data.mythictree[i]["full_path_text"]] = {...existingData};
                 }
             }
-            // create the top level data in the adjacency matrix
-            const newMatrix = getNewMatrix();
-            //console.log(treeRootDataRef.current);
-            setTreeAdjMtx(newMatrix);
-            //console.log("just set treeAdjMtx, about to close backdrop")
-            setBackdropOpen(false);
         }
+        // create the top level data in the adjacency matrix
+        const newMatrix = getNewMatrix();
+        //console.log(treeRootDataRef.current);
+        setTreeAdjMtx(newMatrix);
+        markScopeLoaded(`host:${selectedHost}`);
+        //console.log("just set treeAdjMtx, about to close backdrop")
+        setBackdropOpen(false);
+    }
+    const getHostProcessesQuery = useMythicLazyQuery(treeHostQuery, {
+        fetchPolicy: 'no-cache',
     })
     const onListFilesButton = () => {
         taskingData.current = ({parameters: "",
@@ -301,9 +393,9 @@ export const CallbacksTabsProcessBrowserPanel = ({index, value, tabInfo, me}) =>
             callback_display_id: tabInfo["displayID"]});
         setOpenTaskingButton(true);
     }
-    const onTaskRowAction = ({process_id, architecture, uifeature, openDialog, getConfirmation, callback_id, callback_display_id}) => {
+    const onTaskRowAction = ({process_id, architecture, uifeature, openDialog, getConfirmation, callback_id, callback_display_id, display_id}) => {
         taskingData.current = {"parameters": {host: selectedHost, process_id, architecture},
-            "ui_feature": uifeature, openDialog, getConfirmation, callback_id, callback_display_id};
+            "ui_feature": uifeature, openDialog, getConfirmation, callback_id, callback_display_id: callback_display_id || display_id};
         setOpenTaskingButton(true);
     }
     const toggleShowDeletedFiles = (showStatus) => {
@@ -321,10 +413,34 @@ export const CallbacksTabsProcessBrowserPanel = ({index, value, tabInfo, me}) =>
             setSelectedHost("");
         }
     }
+    async function getLoadedCommandForUIFeature (callback_id, uifeature){
+        while(loadingCommandsRef.current){
+            await new Promise(resolve => setTimeout(resolve, 50));
+        }
+        if(loadedCommandsRef.current[callback_id] === undefined){
+            loadingCommandsRef.current = true;
+            getLoadedCommandsQuery({variables: {callback_id: callback_id}})
+                .then(({data}) => getLoadedCommandsQuerySuccess(data)).catch(({data}) => getLoadedCommandsQueryError(data));
+            while(loadingCommandsRef.current){
+                await new Promise(resolve => setTimeout(resolve, 50));
+            }
+        }
+        if(loadedCommandsRef.current[callback_id] === undefined){
+            return undefined;
+        }
+        for(let i = 0; i < loadedCommandsRef.current[callback_id].length; i++){
+            if(loadedCommandsRef.current[callback_id][i].command.supported_ui_features.includes(uifeature)){
+                return loadedCommandsRef.current[callback_id][i];
+            }
+        }
+        return undefined;
+    }
     React.useEffect( () => {
-        getHostProcessesQuery({variables: {host: selectedHost}});
+        if(!active || selectedHost === "" || isScopeLoaded(`host:${selectedHost}`)){return;}
+        getHostProcessesQuery({variables: {host: selectedHost}})
+            .then(({data}) => getHostProcessesQuerySuccess(data)).catch(({data}) => console.log(data));
         setBackdropOpen(true);
-    }, [selectedHost]);
+    }, [active, isScopeLoaded, selectedHost]);
     React.useEffect( () => {
         return() => {
             mountedRef.current = false;
@@ -339,9 +455,9 @@ export const CallbacksTabsProcessBrowserPanel = ({index, value, tabInfo, me}) =>
                     <Backdrop open={backdropOpen} style={{zIndex: 2, position: "absolute",}} invisible={false}>
                         <div style={{
                             borderRadius: "4px",
-                            border: "1px solid black",
+                            border: `1px solid ${theme.palette.divider}`,
                             padding: "5px",
-                            backgroundColor: "rgba(37,37,37,0.92)", color: "white",
+                            backgroundColor: theme.palette.background.contrast, color: theme.palette.text.contrast,
                             alignItems: "center",
                             display: "flex", flexDirection: "column"}}>
                             <CircularProgress color="inherit" />
@@ -362,8 +478,12 @@ export const CallbacksTabsProcessBrowserPanel = ({index, value, tabInfo, me}) =>
                         hostOptions={treeRootDataRef.current[selectedGroup] || {}}
                         expandOrCollapseAll={expandOrCollapseAll}
                         setExpandOrCollapseAll={setExpandOrCollapseAll}
+                        quickFilter={quickFilter}
+                        setQuickFilter={setQuickFilter}
                     />
                     <CallbacksTabsProcessBrowserTable 
+                        active={active}
+                        dataVersion={treeVersion}
                         showDeletedFiles={showDeletedFiles}
                         tabInfo={tabInfo}
                         onRowDoubleClick={() => {}}
@@ -371,8 +491,10 @@ export const CallbacksTabsProcessBrowserPanel = ({index, value, tabInfo, me}) =>
                         treeAdjMatrix={treeAdjMtx}
                         host={selectedHost}
                         group={selectedGroup}
+                        quickFilter={quickFilter}
                         expandOrCollapseAll={expandOrCollapseAll}
                         onTaskRowAction={onTaskRowAction}
+                        getLoadedCommandForUIFeature={getLoadedCommandForUIFeature}
                         me={me}/>
                   
                 </div>
@@ -383,6 +505,7 @@ export const CallbacksTabsProcessBrowserPanel = ({index, value, tabInfo, me}) =>
                         openDialog={taskingData.current?.openDialog || false}
                         getConfirmation={taskingData.current?.getConfirmation || false}
                         selectCallback={taskingData.current?.selectCallback || false}
+                        tasking_location={"process_browser"}
                         onTasked={() => setOpenTaskingButton(false)}/>
                     }
             </div>            
@@ -399,13 +522,12 @@ const ProcessBrowserTableTop = ({
     hostOptions,
     groupOptions,
     expandOrCollapseAll,
-    setExpandOrCollapseAll
+    setExpandOrCollapseAll,
+    quickFilter,
+    setQuickFilter
 }) => {
-    const theme = useTheme();
     const [showDeletedFiles, setLocalShowDeletedFiles] = React.useState(false);
     const [openViewGroupsDialog, setOpenViewGroupDialog] = React.useState(false);
-    const inputRef = useRef(null);
-    const inputGroupRef = useRef(null);
     const onLocalListFilesButton = () => {
         onListFilesButton()
     }
@@ -422,69 +544,104 @@ const ProcessBrowserTableTop = ({
     const onLocalExpandOrCollapseAllButton = () => {
         setExpandOrCollapseAll(!expandOrCollapseAll);
     }
+    const onClearQuickFilter = () => {
+        setQuickFilter("");
+    }
     return (
-        <Grid container spacing={0} style={{paddingTop: "10px"}}>
-            <Grid item xs={12}>
-                <FormControl style={{width: "30%"}}>
-                    <InputLabel ref={inputGroupRef}>Available Groups</InputLabel>
-                    <Select
-                        labelId="demo-dialog-select-label"
-                        id="demo-dialog-select"
-                        value={group}
-                        onChange={handleGroupChange}
-                        input={<Input style={{width: "100%"}}/>}
-                        endAdornment={
-                            <React.Fragment>
-                                <MythicStyledTooltip title="View Callbacks associated with this group">
-                                    <IconButton style={{padding: "3px"}} onClick={() => {setOpenViewGroupDialog(true);}} size="large"><WidgetsIcon style={{color: theme.palette.info.main}}/></IconButton>
-                                </MythicStyledTooltip>
-                            </React.Fragment>
-                        }
-                    >
-                        {Object.keys(groupOptions).sort().map( (opt) => (
-                            <MenuItem value={opt} key={opt}>{opt}</MenuItem>
-                        ) )}
-                    </Select>
-                </FormControl>
-                <FormControl style={{width: "70%"}}>
-                  <InputLabel ref={inputRef}>Available Hosts</InputLabel>
-                  <Select
-                    labelId="demo-dialog-select-label"
-                    id="demo-dialog-select"
-                    value={host}
-                    onChange={handleChange}
-                    input={<Input style={{width: "100%"}}/>}
-                    endAdornment={
-                <React.Fragment>
-                    <MythicStyledTooltip title="Task Callback to List Processes">
-                        <IconButton style={{padding: "3px"}} onClick={onLocalListFilesButton} size="large"><RefreshIcon style={{color: theme.palette.info.main}}/></IconButton>
+        <div className="mythic-file-browser-tableTop mythic-process-browser-tableTop py-4 px-5">
+            <div className="mythic-process-browser-toolbar items-center flex gap-4">
+                <div className="mythic-process-browser-control items-center inline-flex gap-3 mythic-process-browser-controlGroup min-w-0 rounded bg-neutral-1 border-subtle">
+                    <span className="mythic-process-browser-controlLabel font-750 text-muted">Group</span>
+                    <FormControl size="small" className="mythic-process-browser-selectControl">
+                        <Select
+                            value={group}
+                            onChange={handleGroupChange}
+                            displayEmpty
+                            className="mythic-process-browser-select"
+                        >
+                            {Object.keys(groupOptions).sort().map( (opt) => (
+                                <MenuItem value={opt} key={opt}>{opt}</MenuItem>
+                            ) )}
+                        </Select>
+                    </FormControl>
+                    <MythicStyledTooltip title="View callbacks associated with this group">
+                        <MythicActionButton iconOnly
+                            appearance="plain" colorMode="hover" shape="square" tone="info"
+                            onClick={() => {setOpenViewGroupDialog(true);}}
+                            size="small">
+                            <WidgetsIcon fontSize="small" />
+                        </MythicActionButton>
+                    </MythicStyledTooltip>
+                </div>
+                <div className="mythic-process-browser-control items-center inline-flex gap-3 mythic-process-browser-controlHost min-w-0 rounded bg-neutral-1 border-subtle">
+                    <span className="mythic-process-browser-controlLabel font-750 text-muted">Host</span>
+                    <FormControl size="small" className="mythic-process-browser-selectControl">
+                        <Select
+                            value={host}
+                            onChange={handleChange}
+                            displayEmpty
+                            className="mythic-process-browser-select"
+                        >
+                            {Object.keys(hostOptions).sort().map( (opt) => (
+                                <MenuItem value={opt} key={opt}>{opt}</MenuItem>
+                            ) )}
+                        </Select>
+                    </FormControl>
+                </div>
+                <TextField
+                    className="mythic-process-browser-searchInput"
+                    size="small"
+                    value={quickFilter}
+                    onChange={(event) => setQuickFilter(event.target.value)}
+                    placeholder="Filter name, PID, user, arch, session, command..."
+                    InputProps={{
+                        startAdornment: (
+                            <InputAdornment position="start">
+                                <SearchIcon fontSize="small" />
+                            </InputAdornment>
+                        ),
+                        endAdornment: quickFilter ? (
+                            <InputAdornment position="end">
+                                <MythicActionButton iconOnly
+                                    appearance="plain" colorMode="hover" shape="square" tone="error"
+                                    onClick={onClearQuickFilter}
+                                    size="small">
+                                    <ClearIcon fontSize="small" />
+                                </MythicActionButton>
+                            </InputAdornment>
+                        ) : null
+                    }}
+                />
+                <div className="mythic-file-browser-toolbarGroup items-center inline-flex mythic-process-browser-actions">
+                    <MythicStyledTooltip title="Task current callback to list processes">
+                        <MythicActionButton iconOnly
+                            appearance="plain" colorMode="hover" shape="square" tone="info"
+                            onClick={onLocalListFilesButton}
+                            size="small">
+                            <RefreshIcon fontSize="small" />
+                        </MythicActionButton>
                     </MythicStyledTooltip>
                     <MythicStyledTooltip title={expandOrCollapseAll ? "Collapse all processes" : "Expand all processes"} >
-                        <IconButton style={{padding: "3px"}}
-                                    onClick={onLocalExpandOrCollapseAllButton} size={"large"}>
-                            <ExpandIcon color={expandOrCollapseAll ? "info" : "success"} />
-                        </IconButton>
+                        <MythicActionButton iconOnly
+                            appearance="plain" active={expandOrCollapseAll} colorMode="hover" shape="square" tone={expandOrCollapseAll ? "success" : "info"}
+                            onClick={onLocalExpandOrCollapseAllButton}
+                            size="small">
+                            <ExpandIcon fontSize="small" />
+                        </MythicActionButton>
                     </MythicStyledTooltip>
-                    <MythicStyledTooltip title={showDeletedFiles ? 'Hide Deleted Processes' : 'Show Deleted Processes'}>
-                            <IconButton
-                                style={{ padding: '3px' }}
-                                onClick={onLocalToggleShowDeletedFiles}
-                                size="large">
-                                {showDeletedFiles ? (
-                                    <VisibilityIcon color="success" />
-                                ) : (
-                                    <VisibilityOffIcon color="error"  />
-                                )}
-                            </IconButton>
-                        </MythicStyledTooltip>
-                </React.Fragment>
-                    }
-                  >
-                    {Object.keys(hostOptions).sort().map( (opt) => (
-                        <MenuItem value={opt} key={opt}>{opt}</MenuItem>
-                    ) )}
-                  </Select>
-                </FormControl>
+                    <MythicStyledTooltip title={showDeletedFiles ? 'Hide deleted processes' : 'Show deleted processes'}>
+                        <MythicActionButton iconOnly
+                            appearance="plain" active={showDeletedFiles} colorMode="hover" shape="square" tone="warning"
+                            onClick={onLocalToggleShowDeletedFiles}
+                            size="small">
+                            {showDeletedFiles ? (
+                                <VisibilityIcon fontSize="small" />
+                            ) : (
+                                <VisibilityOffIcon fontSize="small" />
+                            )}
+                        </MythicActionButton>
+                    </MythicStyledTooltip>
+                </div>
                 {openViewGroupsDialog &&
                     <MythicDialog
                         fullWidth={true}
@@ -497,7 +654,7 @@ const ProcessBrowserTableTop = ({
                         }
                     />
                 }
-            </Grid>
-        </Grid>
+            </div>
+        </div>
     );
 }