diff --git a/packages/hydrooj/package.json b/packages/hydrooj/package.json
index e6683d024..469d9aa35 100644
--- a/packages/hydrooj/package.json
+++ b/packages/hydrooj/package.json
@@ -1,6 +1,6 @@
 {
     "name": "hydrooj",
-    "version": "2.23.22",
+    "version": "2.23.23",
     "bin": "bin/hydrooj.js",
     "main": "dist/loader.js",
     "typings": "dist/loader.d.ts",
@@ -11,7 +11,7 @@
         "node": ">=14"
     },
     "dependencies": {
-        "@hydrooj/utils": "^1.0.4",
+        "@hydrooj/utils": "^1.0.7",
         "adm-zip": "^0.5.5",
         "ansi_up": "^5.0.1",
         "cookies": "^0.8.0",
diff --git a/packages/hydrooj/src/model/builtin.ts b/packages/hydrooj/src/model/builtin.ts
index baad95f9c..609c9d5d7 100644
--- a/packages/hydrooj/src/model/builtin.ts
+++ b/packages/hydrooj/src/model/builtin.ts
@@ -1,13 +1,16 @@
 // @ts-nocheck
 
-import { Udoc } from '../interface';
-
 /*
  * Why nocheck?
  * BitInt requires at least ES2020, but we can't use it as
  * NodeJS doesn't support some of this new features.
  * e.g.: object?.property
  */
+import { STATUS, STATUS_TEXTS, STATUS_CODES } from '@hydrooj/utils/lib/status';
+import type { Udoc } from '../interface';
+
+export * from '@hydrooj/utils/lib/status';
+
 export const PERM = {
     PERM_NONE: 0n,
 
@@ -520,78 +523,6 @@ export const LANG_TEXTS = {
     jl: 'Julia',
 };
 
-export const STATUS = {
-    STATUS_WAITING: 0,
-    STATUS_ACCEPTED: 1,
-    STATUS_WRONG_ANSWER: 2,
-    STATUS_TIME_LIMIT_EXCEEDED: 3,
-    STATUS_MEMORY_LIMIT_EXCEEDED: 4,
-    STATUS_OUTPUT_LIMIT_EXCEEDED: 5,
-    STATUS_RUNTIME_ERROR: 6,
-    STATUS_COMPILE_ERROR: 7,
-    STATUS_SYSTEM_ERROR: 8,
-    STATUS_CANCELED: 9,
-    STATUS_ETC: 10,
-    STATUS_HACKED: 11,
-    STATUS_JUDGING: 20,
-    STATUS_COMPILING: 21,
-    STATUS_FETCHED: 22,
-    STATUS_IGNORED: 30,
-};
-
-export const STATUS_TEXTS = {
-    [STATUS.STATUS_WAITING]: 'Waiting',
-    [STATUS.STATUS_ACCEPTED]: 'Accepted',
-    [STATUS.STATUS_WRONG_ANSWER]: 'Wrong Answer',
-    [STATUS.STATUS_TIME_LIMIT_EXCEEDED]: 'Time Exceeded',
-    [STATUS.STATUS_MEMORY_LIMIT_EXCEEDED]: 'Memory Exceeded',
-    [STATUS.STATUS_OUTPUT_LIMIT_EXCEEDED]: 'Output Exceeded',
-    [STATUS.STATUS_RUNTIME_ERROR]: 'Runtime Error',
-    [STATUS.STATUS_COMPILE_ERROR]: 'Compile Error',
-    [STATUS.STATUS_SYSTEM_ERROR]: 'System Error',
-    [STATUS.STATUS_CANCELED]: 'Cancelled',
-    [STATUS.STATUS_ETC]: 'Unknown Error',
-    [STATUS.STATUS_HACKED]: 'Hacked',
-    [STATUS.STATUS_JUDGING]: 'Running',
-    [STATUS.STATUS_COMPILING]: 'Compiling',
-    [STATUS.STATUS_FETCHED]: 'Fetched',
-    [STATUS.STATUS_IGNORED]: 'Ignored',
-};
-
-export const STATUS_CODES = {
-    0: 'pending',
-    1: 'pass',
-    2: 'fail',
-    3: 'fail',
-    4: 'fail',
-    5: 'fail',
-    6: 'fail',
-    7: 'fail',
-    8: 'fail',
-    9: 'ignored',
-    10: 'fail',
-    11: 'fail',
-    20: 'progress',
-    21: 'progress',
-    22: 'progress',
-    30: 'ignored',
-};
-
-export const USER_GENDER_MALE = 0;
-export const USER_GENDER_FEMALE = 1;
-export const USER_GENDER_OTHER = 2;
-export const USER_GENDERS = [USER_GENDER_MALE, USER_GENDER_FEMALE, USER_GENDER_OTHER];
-export const USER_GENDER_RANGE = {
-    [USER_GENDER_MALE]: 'Boy ♂',
-    [USER_GENDER_FEMALE]: 'Girl ♀',
-    [USER_GENDER_OTHER]: 'Other',
-};
-export const USER_GENDER_ICONS = {
-    [USER_GENDER_MALE]: '♂',
-    [USER_GENDER_FEMALE]: '♀',
-    [USER_GENDER_OTHER]: '?',
-};
-
 global.Hydro.model.builtin = {
     Permission,
     PERM,
diff --git a/packages/ui-default/build/main.js b/packages/ui-default/build/main.js
index 5fa6fcfe0..c95fbea22 100644
--- a/packages/ui-default/build/main.js
+++ b/packages/ui-default/build/main.js
@@ -23,6 +23,7 @@ function runWebpack({
       proxy: {
         context: () => true,
         target: 'http://localhost:2333',
+        ws: true,
       },
     });
     return server.listen(8000);
diff --git a/packages/ui-default/components/form/form.page.js b/packages/ui-default/components/form/form.page.js
index 98fe0793d..6b801d16a 100644
--- a/packages/ui-default/components/form/form.page.js
+++ b/packages/ui-default/components/form/form.page.js
@@ -1,4 +1,5 @@
 import { AutoloadPage } from 'vj/misc/Page';
+import delay from 'vj/utils/delay'
 
 const formPage = new AutoloadPage('formPage', () => {
   $(document).on('vjFormDisableUpdate', 'input, select, textarea', (ev) => {
@@ -10,6 +11,15 @@ const formPage = new AutoloadPage('formPage', () => {
       $formItem.removeClass('is--disabled');
     }
   });
+
+  const submitting = {};
+
+  $('[type="submit"]').on('click', async (ev) => {
+    if (!submitting[ev.currentTarget]) $(ev.currentTarget).closest('form').submit();
+    submitting[ev.currentTarget] = true;
+    await delay(5000);
+    submitting[ev.currentTarget] = false;
+  })
 });
 
 export default formPage;
diff --git a/packages/ui-default/components/scratchpad/DataInputComponent.jsx b/packages/ui-default/components/scratchpad/DataInputComponent.jsx
index d2711d445..df157edb3 100644
--- a/packages/ui-default/components/scratchpad/DataInputComponent.jsx
+++ b/packages/ui-default/components/scratchpad/DataInputComponent.jsx
@@ -3,6 +3,7 @@ import classNames from 'classnames';
 
 export default function DataInputComponent(props) {
   const {
+    html,
     title,
     value,
     onChange,
@@ -12,16 +13,20 @@ export default function DataInputComponent(props) {
   const cn = classNames(className, 'flex-col flex-fill');
   return (
     <div {...rest} className={cn}>
-      <textarea
-        className="scratchpad__data-input"
-        wrap="off"
-        value={value}
-        onChange={(ev) => {
-          ev.stopPropagation();
-          onChange(ev.target.value);
-        }}
-        placeholder={title}
-      />
+      {html // eslint-disable-next-line react/no-danger
+        ? <div className="scratchpad__data-input" wrap="off" dangerouslySetInnerHTML={{ __html: value }} />
+        : (
+          <textarea
+            className="scratchpad__data-input"
+            wrap="off"
+            value={value}
+            onChange={(ev) => {
+              ev.stopPropagation();
+              onChange(ev.target.value);
+            }}
+            placeholder={title}
+          />
+        )}
     </div>
   );
 }
diff --git a/packages/ui-default/components/scratchpad/ScratchpadPretestContainer.jsx b/packages/ui-default/components/scratchpad/ScratchpadPretestContainer.jsx
index 9fa0972c0..f1eeb85c3 100644
--- a/packages/ui-default/components/scratchpad/ScratchpadPretestContainer.jsx
+++ b/packages/ui-default/components/scratchpad/ScratchpadPretestContainer.jsx
@@ -45,6 +45,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(class ScratchpadPret
           <DataInput
             title={i18n('Output')}
             value={this.props.output}
+            html
           />
         </div>
       </Panel>
diff --git a/packages/ui-default/components/scratchpad/reducers/pretest.js b/packages/ui-default/components/scratchpad/reducers/pretest.js
index 0960cf3db..12aa19e4f 100644
--- a/packages/ui-default/components/scratchpad/reducers/pretest.js
+++ b/packages/ui-default/components/scratchpad/reducers/pretest.js
@@ -1,3 +1,5 @@
+import { STATUS_TEXTS } from '@hydrooj/utils/lib/status';
+
 export default function reducer(state = {
   input: '',
   output: '',
@@ -12,10 +14,13 @@ export default function reducer(state = {
   }
   if (action.type === 'SCRATCHPAD_RECORDS_PUSH') {
     const { rdoc } = action.payload;
-    if (rdoc._id === state.rid && rdoc.testCases[0]) {
+    if (rdoc._id === state.rid) {
+      const output = [`${STATUS_TEXTS[rdoc.status]} ${rdoc.time}ms ${rdoc.memory}MiB`];
+      if (rdoc.compilerTexts.length) output.push(rdoc.compilerTexts.join('\n'));
+      if (rdoc.testCases.length) output.push(rdoc.testCases[0].message || '');
       return {
         ...state,
-        output: rdoc.testCases[0].message,
+        output: output.join('\n'),
       };
     }
   }
diff --git a/packages/ui-default/package.json b/packages/ui-default/package.json
index b386bb90c..a02931f10 100644
--- a/packages/ui-default/package.json
+++ b/packages/ui-default/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.6.10",
+  "version": "4.6.11",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",
@@ -22,11 +22,7 @@
     "@babel/preset-react": "^7.13.13",
     "@babel/register": "^7.13.14",
     "@babel/runtime-corejs2": "^7.13.10",
-    "@snowpack/plugin-react-refresh": "^2.4.2",
-    "acorn": "^8.0.5",
-    "acorn-stage3": "^4.0.0",
-    "acorn-walk": "^8.0.2",
-    "astring": "^1.7.4",
+    "@hydrooj/utils": "^1.0.7",
     "autoprefixer": "^9.8.6",
     "babel-loader": "^8.2.2",
     "babel-plugin-lodash": "^3.3.4",
@@ -82,7 +78,6 @@
     "redux-thunk": "^2.2.0",
     "rupture": "^0.7.1",
     "slideout": "^1.0.1",
-    "snowpack": "^3.3.2",
     "sockjs-client": "^1.5.1",
     "speed-measure-webpack-plugin": "^1.5.0",
     "sticky-kit": "^1.1.3",
@@ -116,7 +111,6 @@
     "nunjucks": "^3.2.3",
     "prismjs": "^1.23.0",
     "streamsaver": "^2.0.5",
-    "vite": "^2.1.5",
     "web-streams-polyfill": "^3.0.2",
     "xss": "^1.0.8",
     "yargs": "^16.2.0"
diff --git a/packages/utils/lib/status.ts b/packages/utils/lib/status.ts
new file mode 100644
index 000000000..982555484
--- /dev/null
+++ b/packages/utils/lib/status.ts
@@ -0,0 +1,71 @@
+export const STATUS = {
+    STATUS_WAITING: 0,
+    STATUS_ACCEPTED: 1,
+    STATUS_WRONG_ANSWER: 2,
+    STATUS_TIME_LIMIT_EXCEEDED: 3,
+    STATUS_MEMORY_LIMIT_EXCEEDED: 4,
+    STATUS_OUTPUT_LIMIT_EXCEEDED: 5,
+    STATUS_RUNTIME_ERROR: 6,
+    STATUS_COMPILE_ERROR: 7,
+    STATUS_SYSTEM_ERROR: 8,
+    STATUS_CANCELED: 9,
+    STATUS_ETC: 10,
+    STATUS_HACKED: 11,
+    STATUS_JUDGING: 20,
+    STATUS_COMPILING: 21,
+    STATUS_FETCHED: 22,
+    STATUS_IGNORED: 30,
+};
+
+export const STATUS_TEXTS = {
+    [STATUS.STATUS_WAITING]: 'Waiting',
+    [STATUS.STATUS_ACCEPTED]: 'Accepted',
+    [STATUS.STATUS_WRONG_ANSWER]: 'Wrong Answer',
+    [STATUS.STATUS_TIME_LIMIT_EXCEEDED]: 'Time Exceeded',
+    [STATUS.STATUS_MEMORY_LIMIT_EXCEEDED]: 'Memory Exceeded',
+    [STATUS.STATUS_OUTPUT_LIMIT_EXCEEDED]: 'Output Exceeded',
+    [STATUS.STATUS_RUNTIME_ERROR]: 'Runtime Error',
+    [STATUS.STATUS_COMPILE_ERROR]: 'Compile Error',
+    [STATUS.STATUS_SYSTEM_ERROR]: 'System Error',
+    [STATUS.STATUS_CANCELED]: 'Cancelled',
+    [STATUS.STATUS_ETC]: 'Unknown Error',
+    [STATUS.STATUS_HACKED]: 'Hacked',
+    [STATUS.STATUS_JUDGING]: 'Running',
+    [STATUS.STATUS_COMPILING]: 'Compiling',
+    [STATUS.STATUS_FETCHED]: 'Fetched',
+    [STATUS.STATUS_IGNORED]: 'Ignored',
+};
+
+export const STATUS_CODES = {
+    0: 'pending',
+    1: 'pass',
+    2: 'fail',
+    3: 'fail',
+    4: 'fail',
+    5: 'fail',
+    6: 'fail',
+    7: 'fail',
+    8: 'fail',
+    9: 'ignored',
+    10: 'fail',
+    11: 'fail',
+    20: 'progress',
+    21: 'progress',
+    22: 'progress',
+    30: 'ignored',
+};
+
+export const USER_GENDER_MALE = 0;
+export const USER_GENDER_FEMALE = 1;
+export const USER_GENDER_OTHER = 2;
+export const USER_GENDERS = [USER_GENDER_MALE, USER_GENDER_FEMALE, USER_GENDER_OTHER];
+export const USER_GENDER_RANGE = {
+    [USER_GENDER_MALE]: 'Boy ♂',
+    [USER_GENDER_FEMALE]: 'Girl ♀',
+    [USER_GENDER_OTHER]: 'Other',
+};
+export const USER_GENDER_ICONS = {
+    [USER_GENDER_MALE]: '♂',
+    [USER_GENDER_FEMALE]: '♀',
+    [USER_GENDER_OTHER]: '?',
+};
diff --git a/packages/utils/package.json b/packages/utils/package.json
index 392ccc45e..9fb384f3c 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@hydrooj/utils",
-    "version": "1.0.6",
+    "version": "1.0.7",
     "description": "hydrooj utils",
     "main": "package.json",
     "repository": "https://github.com/hydro-dev/Hydro.git",