response updates

2026-06-08 14:55:38 +00:00 · 2026-05-05 20:54:19 -05:00
parent 9b053e272e
commit 0580100dd8
8 changed files with 224 additions and 74 deletions
@@ -643,9 +643,10 @@ const ResponseDisplayComponent = ({rawResponses, viewBrowserScript, output, comm
 }

 export function ResponseDisplayBrowserScriptComponent({output, browserScriptData, task, expand, displayType, allowPlaintextFallback=true}) {
+  const hasBrowserScriptData = browserScriptData && Object.keys(browserScriptData).length > 0;
  return (
-      <>
-        {Object.keys(browserScriptData).length > 0 ? (
+      <div className={`mythic-browser-script-response${expand ? " mythic-browser-script-response-expanded" : ""}`}>
+        {hasBrowserScriptData ? (
            <>
              {browserScriptData?.screenshot?.map( (scr, index) => (
                  <ResponseDisplayScreenshot key={"screenshot" + index + 'fortask' + task.id} task={task} {...scr}
@@ -692,6 +693,6 @@ export function ResponseDisplayBrowserScriptComponent({output, browserScriptData
                ) : null
            )
        }
-      </>
+      </div>
  )
 }
@@ -17,17 +17,23 @@ export const ResponseDisplayDownload = (props) =>{
        scrollContent()
    }, []);
  return (
-    <>
-      <pre style={{display: "inline-block"}}>
+    <div className="mythic-response-inline-output">
+      <pre className="mythic-response-inline-text">
        {props.download?.plaintext || ""}
      </pre>
      
      <MythicStyledTooltip title={props?.download?.hoverText || "Download payload"} >
-        <Button variant={props.download?.variant || "contained"} component="a" target="_blank" color="primary" href={"/api/v1.4/files/download/" + props.download.agent_file_id} download
+        <Button
+          className="mythic-table-row-action mythic-table-row-action-hover-info mythic-response-inline-action"
+          variant={props.download?.variant || "text"}
+          component="a"
+          target="_blank"
+          href={"/api/v1.4/files/download/" + props.download.agent_file_id}
+          download
          startIcon={<GetAppIcon />}>
-            {props.download?.name || ""}
+            {props.download?.name || "Download"}
        </Button>
-      </MythicStyledTooltip><br/>
-    </>
+      </MythicStyledTooltip>
+    </div>
  );   
-}
+}
@@ -100,6 +100,12 @@ export const ResponseDisplayMedia = ({media, expand, task}) =>{
    const displayType = mimeType(media?.filename);
    const [value, setValue] = React.useState(displayType !== undefined ? 0 : 1);
    const [fileMetaData, setFileMetaData] = React.useState({});
+    const panelStyle = {
+        flex: "1 1 auto",
+        minHeight: expand ? 0 : "24rem",
+        overflow: "auto",
+        width: "100%",
+    };
    const fetchedData = ({data}) => {
        if(data.filemeta.length > 0){
            setFileMetaData({
@@ -129,9 +135,9 @@ export const ResponseDisplayMedia = ({media, expand, task}) =>{
        setValue(newValue);
    }
    return (
-        <div style={{display: "flex", height: "100%", flexDirection: "column"}}>
+        <div className="mythic-response-media" style={{height: expand ? "100%" : undefined, minHeight: expand ? 0 : "24rem"}}>
            <DisplayFileMetaData fileMetaData={fileMetaData} />
-            <AppBar color={'default'} position='static' className={"no-box-shadow"}>
+            <AppBar color={'default'} position='static' className={"no-box-shadow mythic-response-media-tabs"}>
                <Tabs
                    value={value}
                    onChange={handleChange}
@@ -158,7 +164,7 @@ export const ResponseDisplayMedia = ({media, expand, task}) =>{
                    </MythicStyledTooltip>
                </Tabs>
            </AppBar>
-            <div hidden={value !== 0}  style={{height: "100%", overflow: "auto"}} role='tabpanel' >
+            <div hidden={value !== 0} className="mythic-response-media-panel" style={panelStyle} role='tabpanel' >
                {value === 0 &&
                    <DisplayMedia agent_file_id={media?.agent_file_id || ""}
                                  task={task} filename={media?.filename || undefined}
@@ -166,7 +172,7 @@ export const ResponseDisplayMedia = ({media, expand, task}) =>{
                                  expand={expand} />
                }
            </div>
-            <div hidden={value !== 1} style={{height: "100%", overflow: "auto"}} role='tabpanel' >
+            <div hidden={value !== 1} className="mythic-response-media-panel" style={panelStyle} role='tabpanel' >
                {value === 1 &&
                    <DisplayText agent_file_id={media?.agent_file_id || ""}
                                 task={task} filename={media?.filename || undefined}
@@ -174,7 +180,7 @@ export const ResponseDisplayMedia = ({media, expand, task}) =>{
                                 expand={expand} preview />
                }
            </div>
-            <div hidden={value !== 2} style={{height: "100%", overflow: "auto"}} role='tabpanel' >
+            <div hidden={value !== 2} className="mythic-response-media-panel" style={panelStyle} role='tabpanel' >
                {value === 2 &&
                    <DisplayHex agent_file_id={media?.agent_file_id || ""}
                                task={task} filename={media?.filename || undefined}
@@ -183,7 +189,7 @@ export const ResponseDisplayMedia = ({media, expand, task}) =>{
                }

            </div>
-            <div hidden={value !== 3} style={{height: "100%", overflow: "auto"}} role='tabpanel' >
+            <div hidden={value !== 3} className="mythic-response-media-panel" style={panelStyle} role='tabpanel' >
                {value === 3 &&
                    <DisplayDatabase agent_file_id={media?.agent_file_id || ""}
                                task={task} filename={media?.filename || undefined}
@@ -376,7 +382,7 @@ export const DisplayMedia = ({agent_file_id, filename, expand, task, fileMetaDat
 const MaxRenderSize = 2000000; // 2MB
 const DisplayFileMetaData = ({fileMetaData}) => {
    return (
-        <TableContainer className="mythicElement">
+        <TableContainer className="mythicElement mythic-response-media-metadata">
        <Table style={{marginLeft: "0px", width: "100%", tableLayout: "fixed"}}>
            <TableHead>
                <TableRow>
@@ -1,5 +1,6 @@
 import React from 'react';
 import {Button} from '@mui/material';
+import CameraAltIcon from '@mui/icons-material/CameraAlt';
 import {ResponseDisplayScreenshotModal} from './ResponseDisplayScreenshotModal';
 import { MythicDialog } from '../../MythicComponents/MythicDialog';
 import {MythicStyledTooltip} from "../../MythicComponents/MythicStyledTooltip";
@@ -22,19 +23,26 @@ export const ResponseDisplayScreenshot = (props) =>{
        scrollContent()
    }, []);
  return (
-    <>
+    <div className="mythic-response-inline-output">
      {openScreenshot &&
          <MythicDialog fullWidth={true} maxWidth="xl" open={openScreenshot}
              onClose={()=>{setOpenScreenshot(false);}}
              innerDialog={<ResponseDisplayScreenshotModal images={[props.agent_file_id]} onClose={()=>{setOpenScreenshot(false);}} />}
          />
      }
-      <pre style={{display: "inline-block"}}>
+      <pre className="mythic-response-inline-text">
        {props?.plaintext || ""}
      </pre>
      <MythicStyledTooltip title={props?.hoverText || "View Screenshot (s)"}  >
-        <Button color="primary" variant={props.variant ? props.variant : "contained"} onClick={clickOpenScreenshot} style={{marginBottom: "10px"}}>{props.name}</Button>
+        <Button
+            className="mythic-table-row-action mythic-table-row-action-hover-info mythic-response-inline-action"
+            variant={props.variant ? props.variant : "text"}
+            onClick={clickOpenScreenshot}
+            startIcon={<CameraAltIcon />}
+        >
+          {props.name || "View screenshot"}
+        </Button>
      </MythicStyledTooltip>
-    </>
+    </div>
  );   
-}
+}
@@ -1,5 +1,6 @@
 import React from 'react';
-import {  Link } from '@mui/material';
+import {Button} from '@mui/material';
+import SearchIcon from '@mui/icons-material/Search';
 import {MythicStyledTooltip} from "../../MythicComponents/MythicStyledTooltip";


@@ -16,16 +17,22 @@ export const ResponseDisplaySearch = (props) =>{
        scrollContent()
    }, []);
  return (
-    <>
-      <pre style={{display: "inline-block", whiteSpace: "pre-wrap"}}>
+    <div className="mythic-response-inline-output">
+      <pre className="mythic-response-inline-text">
        {props.search?.plaintext || ""}
      </pre>
      
      <MythicStyledTooltip title={props.search?.hoverText || "View on Search Page"} >
-        <Link component="a" target="_blank" href={window.location.origin + "/new/search/?" + props.search.search}>
-            {props.search?.name || ""}
-        </Link>
-      </MythicStyledTooltip><br/>
-    </>
+        <Button
+          className="mythic-table-row-action mythic-table-row-action-hover-info mythic-response-inline-action"
+          component="a"
+          target="_blank"
+          href={window.location.origin + "/new/search/?" + props.search.search}
+          startIcon={<SearchIcon />}
+        >
+            {props.search?.name || "Open search"}
+        </Button>
+      </MythicStyledTooltip>
+    </div>
  );   
-}
+}
@@ -3,8 +3,6 @@ import {Button} from '@mui/material';
 import {MythicViewJSONAsTableDialog, MythicDialog, MythicModifyStringDialog} from '../../MythicComponents/MythicDialog';
 import { MythicDisplayTextDialog } from '../../MythicComponents/MythicDisplayTextDialog';
 import { ResponseDisplayTableDialogTable } from './ResponseDisplayTableDialogTable';
-import Paper from '@mui/material/Paper';
-import Typography from '@mui/material/Typography';
 import {useTheme} from '@mui/material/styles';
 import 'react-virtualized/styles.css';
 import {TaskFromUIButton} from './TaskFromUIButton';
@@ -22,6 +20,7 @@ import {Dropdown, DropdownMenuItem} from "../../MythicComponents/MythicNestedMen
 import {GetComputedFontSize} from "../../MythicComponents/MythicSavedUserSetting";
 import {TableFilterDialog} from "./TableFilterDialog";
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import {MythicSectionHeader} from "../../MythicComponents/MythicPageHeader";

 const onCopyToClipboard = (data) => {
  let result = copyStringToClipboard(data);
@@ -238,6 +237,9 @@ const ResponseDisplayTableSizeCell = ({cellData, rowData}) => {
  );
 }
 const actionCellButtonStyle = {paddingTop: 0, paddingBottom: 0};
+const getActionButtonClassName = (intent = "info") => {
+  return `mythic-table-row-action mythic-table-row-action-hover-${intent}`;
+}
 const ResponseDisplayTableActionCell = ({cellData, callback_id, rowData}) => {
  return (
    <div style={{ height: "100%"}}>
@@ -304,7 +306,8 @@ const ResponseDisplayTableActionCellButton = ({cellData, callback_id}) => {
        return (
            <React.Fragment>
              <MythicStyledTooltip title={cellData?.button?.hoverText || "View Data"} >
-                <Button size="small" color="info"
+                <Button size="small"
+                        className={getActionButtonClassName("info")}
                        onClick={() => setOpenButton(true)} disabled={cellData?.button?.disabled || false}
                        startIcon={cellData?.button?.startIcon ? <FontAwesomeIcon icon={getIconName(cellData?.button?.startIcon)} style={{color: cellData?.button?.disabled ? "unset" :  getIconColor(theme, cellData?.button?.startIconColor)}}/> : null}
                        style={{...actionCellButtonStyle}}
@@ -323,7 +326,8 @@ const ResponseDisplayTableActionCellButton = ({cellData, callback_id}) => {
        return (
            <React.Fragment>
              <MythicStyledTooltip title={cellData?.button?.hoverText || "View Data"} >
-                <Button size="small" color="info"
+                <Button size="small"
+                        className={getActionButtonClassName("info")}
                        onClick={() => setOpenButton(true)} disabled={cellData?.button?.disabled || false}
                        startIcon={cellData?.button?.startIcon ? <FontAwesomeIcon icon={getIconName(cellData?.button?.startIcon)} style={{color: cellData?.button?.disabled ? "unset" :  getIconColor(theme, cellData?.button?.startIconColor)}}/> : null}
                        style={{...actionCellButtonStyle}}
@@ -340,7 +344,8 @@ const ResponseDisplayTableActionCellButton = ({cellData, callback_id}) => {
        return (
            <React.Fragment>
              <MythicStyledTooltip title={cellData?.button?.hoverText || "View Data"} >
-                <Button size="small" color="info"
+                <Button size="small"
+                        className={getActionButtonClassName("info")}
                        onClick={() => setOpenButton(true)} disabled={cellData?.button?.disabled || false}
                        startIcon={cellData?.button?.startIcon ? <FontAwesomeIcon icon={getIconName(cellData?.button?.startIcon)} style={{color: cellData?.button?.disabled ? "unset" :  getIconColor(theme, cellData?.button?.startIconColor || "")}}/> : null}
                        style={{...actionCellButtonStyle}}
@@ -359,7 +364,8 @@ const ResponseDisplayTableActionCellButton = ({cellData, callback_id}) => {
        return (
            <React.Fragment>
              <MythicStyledTooltip title={cellData?.button?.hoverText || "Submit Task"}>
-                <Button size="small" onClick={() => setOpenTaskingButton(true)} disabled={cellData?.button?.disabled || false}  color="warning"
+                <Button size="small" onClick={() => setOpenTaskingButton(true)} disabled={cellData?.button?.disabled || false}
+                        className={getActionButtonClassName("warning")}
                        startIcon={cellData?.button?.startIcon ? <FontAwesomeIcon icon={getIconName(cellData?.button?.startIcon)} style={{color: cellData?.button?.disabled ? "unset" : getIconColor(theme, cellData?.button?.startIconColor || "")}}/> : undefined}
                        style={{...actionCellButtonStyle}}
                >{cellData?.button?.name ? cellData?.button?.name : cellData?.button?.startIcon ? undefined : "Submit Task"}</Button>
@@ -409,9 +415,10 @@ const ResponseDisplayTableActionCellButton = ({cellData, callback_id}) => {
                  />
              }
              <Button size="small" ref={dropdownAnchorRef}
+                      className={getActionButtonClassName("info")}
                      onClick={() => setOpenDropdownButton(true)} disabled={cellData?.button?.disabled || false}
                      startIcon={cellData?.button?.startIcon ? <FontAwesomeIcon icon={getIconName(cellData?.button?.startIcon)} style={{color: cellData?.button?.disabled ? "unset" :  getIconColor(theme, cellData?.button?.startIconColor || "")}}/> : null}
-                      style={{...actionCellButtonStyle, color: theme.palette.text.primary}}
+                      style={{...actionCellButtonStyle}}
              >{cellData?.button?.name || " "} <ArrowDropDownIcon />
              </Button>
              <ClickAwayListener onClickAway={handleClose} mouseEvent={"onMouseDown"}>
@@ -459,7 +466,6 @@ const createRowCells = ({row, rowIndex, headers, callback_id}) => {
  })
 }
 export const ResponseDisplayTable = ({table, callback_id, expand, task}) =>{
-  const theme = useTheme();
  const rowHeight = GetComputedFontSize() + 7;
  const headerHeight = GetComputedFontSize() + 32;
  const maxHeight = 375;
@@ -807,11 +813,11 @@ export const ResponseDisplayTable = ({table, callback_id, expand, task}) =>{
  return (
        <div style={{height: "100%", display: "flex", flexDirection: "column", position: "relative", width: "100%"}}>
            {table?.title && (
-                <Paper elevation={5} style={{backgroundColor: theme.pageHeader.main, color: theme.pageHeaderText.main}} variant={"elevation"}>
-                  <Typography variant="h6" style={{textAlign: "left", display: "inline-block", marginLeft: "20px"}}>
-                    {table.title}
-                  </Typography>
-                </Paper>
+                <MythicSectionHeader
+                    dense
+                    title={table.title}
+                    sx={{mt: 0, mb: 0.5, minHeight: 40}}
+                />
            )}

          <div style={tableStyle}>
@@ -1,5 +1,4 @@
 import React from 'react';
-import AppBar from '@mui/material/AppBar';
 import Tabs from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
 import {a11yProps} from "../../MythicComponents/MythicTabPanel";
@@ -11,17 +10,11 @@ function ResponseDisplayTabsLabel(props) {
    return (
        <Tab
            label={
-                <span>
+                <span className="mythic-response-tab-label">
                    {label}
                </span>
            }
-            sx={{
-                '&.Mui-selected': {
-                    border: "2px solid grey",
-                    borderRadius: "4px",
-                    //backgroundColor: 'info.main', // Color when selected
-                },
-            }}
+            className="mythic-response-tab"
            wrapped={true}
            {...a11yProps(index)}
            {...other}
@@ -34,12 +27,7 @@ function ResponseDisplayTabsPanel(props) {
    const style =
        props.style === undefined
            ? {
-                display: value === index ? 'flex' : 'none',
-                flexDirection: 'column',
-                flexGrow: 1,
-                width: '100%',
-                maxWidth: '100%',
-                overflowY: "auto",
+                display: value === index ? "flex" : "none",
            }
            : props.style;
    return (
@@ -48,6 +36,7 @@ function ResponseDisplayTabsPanel(props) {
            hidden={value !== index}
            id={`scrollable-auto-tabpanel-${index}`}
            aria-labelledby={`scrollable-auto-tab-${index}`}
+            className="mythic-response-tabs-panel"
            style={style}
            {...other}>
            {<React.Fragment>{children}</React.Fragment>}
@@ -55,28 +44,23 @@ function ResponseDisplayTabsPanel(props) {
    );
 }
 export function ResponseDisplayTabs({ tabs, task, expand, displayType, output }) {
-    const mountedRef = React.useRef(true);
    const [value, setValue] = React.useState(0);
    const handleChange = (event, newValue) => {
        setValue(newValue);
    };
-    React.useEffect( () => {
-        return() => {
-            mountedRef.current = false;
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [])

    return (
-        <div style={{width: "100%", maxWidth: "100%", display: 'flex', flexDirection: 'column', flexGrow: 1, height: expand ? "100%" : "400px", }}>
-            <AppBar color='default' position={"static"} style={{maxHeight: "25%", overflowY: 'auto', maxWidth: "100%", flexWrap: "no-wrap"}} >
+        <div className="mythic-response-tabs" style={{height: expand ? "100%" : "400px"}}>
+            <div className="mythic-response-tabs-bar">
                <Tabs
                    value={value}
-                    variant={"standard"}
+                    variant="scrollable"
+                    scrollButtons="auto"
+                    allowScrollButtonsMobile
                    onChange={handleChange}
-                    indicatorColor='primary'
-                    textColor='primary'
-                    style={{ }}
+                    indicatorColor="primary"
+                    textColor="inherit"
+                    className="mythic-response-tabs-list"
                    TabIndicatorProps={{style: {
                        display: "none",
                    }}}
@@ -89,7 +73,7 @@ export function ResponseDisplayTabs({ tabs, task, expand, displayType, output })
                        />
                    ))}
                </Tabs>
-            </AppBar>
+            </div>
            {tabs.map((tab, index) => (
                <ResponseDisplayTabsPanel
                    key={'tabpanel' + task.id + index}
@@ -105,4 +89,3 @@ export function ResponseDisplayTabs({ tabs, task, expand, displayType, output })
        </div>
    );
 }
-
@@ -1512,6 +1512,139 @@ tspan {
    overflow: auto;
    padding: 0.55rem;
 }
+.mythic-browser-script-response {
+    display: flex;
+    flex-direction: column;
+    gap: 0.55rem;
+    min-width: 0;
+    width: 100%;
+}
+.mythic-browser-script-response-expanded {
+    flex: 1 1 auto;
+    min-height: 0;
+}
+.mythic-browser-script-response-expanded > *:only-child {
+    min-height: 0;
+}
+.mythic-response-media {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    width: 100%;
+}
+.mythic-response-media-metadata {
+    flex: 0 0 auto !important;
+    max-height: none !important;
+    min-height: fit-content !important;
+    overflow-x: auto !important;
+    overflow-y: visible !important;
+}
+.mythic-response-media-tabs {
+    flex: 0 0 auto;
+}
+.mythic-response-media-panel {
+    min-width: 0;
+}
+.mythic-response-media-panel[hidden] {
+    display: none !important;
+}
+.mythic-response-inline-output {
+    align-items: center;
+    color: ${(props) => props.theme.palette.text.primary};
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.45rem;
+    min-height: 34px;
+    min-width: 0;
+    width: 100%;
+}
+.mythic-response-inline-text {
+    color: ${(props) => props.theme.palette.text.primary};
+    display: inline-block;
+    flex: 0 1 auto;
+    margin: 0;
+    max-width: 100%;
+    min-width: 0;
+    overflow-wrap: anywhere;
+    white-space: pre-wrap;
+}
+.mythic-response-inline-action {
+    flex: 0 0 auto;
+}
+.mythic-response-tabs {
+    background-color: ${(props) => props.theme.surfaces?.raised || props.theme.palette.background.paper};
+    border: 1px solid ${(props) => props.theme.table?.borderSoft || props.theme.borderColor};
+    border-radius: ${(props) => props.theme.shape.borderRadius}px;
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    max-width: 100%;
+    min-height: 0;
+    min-width: 0;
+    overflow: hidden;
+    width: 100%;
+}
+.mythic-response-tabs-bar {
+    background-color: ${(props) => props.theme.surfaces?.muted || props.theme.palette.background.paper};
+    border-bottom: 1px solid ${(props) => props.theme.table?.borderSoft || props.theme.borderColor};
+    flex: 0 0 auto;
+    min-width: 0;
+    overflow: hidden;
+    padding: 0.35rem;
+}
+.mythic-response-tabs-list {
+    min-height: 34px;
+}
+.mythic-response-tabs-list .MuiTabs-flexContainer {
+    gap: 0.35rem;
+}
+.mythic-response-tabs-list .MuiTabs-scrollButtons {
+    border: 1px solid ${(props) => props.theme.table?.borderSoft || props.theme.borderColor};
+    border-radius: ${(props) => props.theme.shape.borderRadius}px;
+    color: ${(props) => props.theme.palette.text.secondary};
+    min-height: 30px;
+    width: 30px;
+}
+.mythic-response-tab {
+    background-color: ${(props) => props.theme.palette.mode === "dark" ? alpha(props.theme.palette.common.white, 0.045) : alpha(props.theme.palette.common.black, 0.028)} !important;
+    border: 1px solid ${(props) => props.theme.table?.borderSoft || props.theme.borderColor} !important;
+    border-radius: ${(props) => props.theme.shape.borderRadius}px !important;
+    color: ${(props) => props.theme.palette.text.secondary} !important;
+    font-size: 0.76rem;
+    font-weight: 750;
+    line-height: 1.2;
+    max-width: min(18rem, 60vw);
+    min-height: 30px;
+    min-width: 0;
+    padding: 0.35rem 0.7rem;
+    text-transform: none;
+}
+.mythic-response-tab:hover {
+    background-color: ${(props) => alpha(props.theme.palette.primary.main, props.theme.palette.mode === "dark" ? 0.18 : 0.08)} !important;
+    border-color: ${(props) => alpha(props.theme.palette.primary.main, props.theme.palette.mode === "dark" ? 0.42 : 0.28)} !important;
+    color: ${(props) => props.theme.palette.text.primary} !important;
+}
+.mythic-response-tab.Mui-selected {
+    background-color: ${(props) => alpha(props.theme.palette.primary.main, props.theme.palette.mode === "dark" ? 0.24 : 0.12)} !important;
+    border-color: ${(props) => alpha(props.theme.palette.primary.main, props.theme.palette.mode === "dark" ? 0.62 : 0.42)} !important;
+    color: ${(props) => props.theme.palette.primary.main} !important;
+}
+.mythic-response-tab-label {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.mythic-response-tabs-panel {
+    flex: 1 1 auto;
+    flex-direction: column;
+    max-width: 100%;
+    min-height: 0;
+    min-width: 0;
+    overflow: auto;
+    padding: 0.5rem;
+    width: 100%;
+}
 .mythic-browser-scripts-table {
    max-width: 100%;
    min-width: 60rem;