Uncodedtech · pull · Jul 19, 2026 · Jul 19, 2026 · Jul 19, 2026
diff --git a/.github/workflows/monkey-ci.yml b/.github/workflows/monkey-ci.yml
@@ -280,15 +280,15 @@ jobs:
         run: npm run lint-json-assets
 
       - name: Validate language assets
-        if: steps.filter.outputs.languages == 'true'
+        if: steps.filter.outputs.languages == 'true' || needs.pre-ci.outputs.should-build-pkg == 'true'
         run: npm run check-assets-languages
 
       - name: Validate quote assets
         if: steps.filter.outputs.quotes == 'true'
         run: npm run check-assets-quotes
 
       - name: Validate other assets
-        if: steps.filter.outputs.others == 'true'
+        if: steps.filter.outputs.others == 'true' || needs.pre-ci.outputs.should-build-pkg == 'true'
         run: npm run check-assets-others
 
   ci-pkg:

diff --git a/frontend/__tests__/test/events/stats.spec.ts b/frontend/__tests__/test/events/stats.spec.ts
@@ -5,8 +5,6 @@ vi.mock("../../../src/ts/test/test-stats", () => ({
 }));
 
 vi.mock("../../../src/ts/test/test-state", () => ({
-  bailedOut: false,
-  resultCalculating: false,
   koreanStatus: false,
 }));
 
@@ -53,6 +51,8 @@ vi.mock("../../../src/ts/test/custom-text", () => ({
 vi.mock("../../../src/ts/states/test", () => ({
   getCurrentQuote: () => null,
   getActiveWordIndex: () => mockState.activeWordIndex,
+  isResultCalculating: () => false,
+  getBailedOut: () => false,
 }));
 
 import {

diff --git a/frontend/src/html/pages/test.html b/frontend/src/html/pages/test.html
@@ -20,17 +20,8 @@
     <div id="layoutfluidTimer">Time left to memorise all words: 0s</div>
     <mount data-component="testmodesnotice"></mount>
 
-    <div id="liveStatsTextTop" class="timerMain">
-      <div class="wrapper">
-        <div class="timerProgress hidden">1:00</div>
-      </div>
-    </div>
-    <div id="liveStatsMini" class="full-width timerMain">
-      <div class="time hidden">1:00</div>
-      <div class="speed hidden">60</div>
-      <div class="acc hidden">100%</div>
-      <div class="burst hidden">1</div>
-    </div>
+    <mount data-component="livestatstexttop"></mount>
+    <mount data-component="livestatsmini"></mount>
     <div id="wordsWrapper" class="content-grid full-width" translate="no">
       <textarea
         id="wordsInput"
@@ -67,13 +58,7 @@
     >
       <i class="fas fa-fw fa-redo-alt"></i>
     </button>
-    <div id="liveStatsTextBottom" class="timerMain">
-      <div class="wrapper">
-        <div class="liveSpeed hidden">123</div>
-        <div class="liveAcc hidden">100%%</div>
-        <div class="liveBurst hidden">1</div>
-      </div>
-    </div>
+    <mount data-component="livestatstextbottom"></mount>
     <div id="premidTestMode" class="hidden"></div>
     <div id="premidSecondsLeft" class="hidden"></div>
   </div>

diff --git a/frontend/src/index.html b/frontend/src/index.html
@@ -9,11 +9,7 @@
 
     <!-- theme component adds to the head element, don't move to head.html -->
     <mount data-component="theme"></mount>
-    <div id="barTimerProgress" class="timerMain">
-      <div class="opacityWrapper" style="opacity: 0">
-        <div class="bar"></div>
-      </div>
-    </div>
+    <mount data-component="bartimerprogress"></mount>
     <mount data-component="modals" id="solidmodals"></mount>
     <mount data-component="popups" id="solidpopups"></mount>
     <div id="popups">

diff --git a/frontend/src/styles/media-queries-blue.scss b/frontend/src/styles/media-queries-blue.scss
@@ -5,10 +5,6 @@
     --content-max-width: 640px;
   }
   .pageTest {
-    #liveStatsTextTop,
-    #liveStatsTextBottom {
-      font-size: 5rem;
-    }
     #result .wrapper {
       grid-template-columns: 1fr;
       grid-template-areas:

diff --git a/frontend/src/styles/media-queries-green.scss b/frontend/src/styles/media-queries-green.scss
@@ -10,10 +10,6 @@
       grid-template-columns: repeat(3, max-content);
       grid-template-rows: 1fr 1fr;
     }
-    #liveStatsTextTop,
-    #liveStatsTextBottom {
-      font-size: 7rem;
-    }
   }
 
   .testActivity {

diff --git a/frontend/src/styles/media-queries-purple.scss b/frontend/src/styles/media-queries-purple.scss
@@ -26,10 +26,6 @@
     }
   }
   .pageTest {
-    #liveStatsTextTop,
-    #liveStatsTextBottom {
-      font-size: 12vw;
-    }
     #result .wrapper {
       .stats {
         grid-template-columns: 1fr;

diff --git a/frontend/src/styles/media-queries-yellow.scss b/frontend/src/styles/media-queries-yellow.scss
@@ -5,12 +5,6 @@
     --content-max-width: 1024px;
   }
 
-  .pageTest {
-    #liveStatsTextTop,
-    #liveStatsTextBottom {
-      font-size: 9rem;
-    }
-  }
   .testActivity {
     // --box-size: 0.9em;
     // --font-size: 0.9em;

diff --git a/frontend/src/styles/test.scss b/frontend/src/styles/test.scss
@@ -44,35 +44,6 @@
   }
 }
 
-#barTimerProgress {
-  opacity: 0;
-  position: relative;
-  z-index: 99;
-  .bar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 0.5rem;
-    background: black;
-    /*   background: #0f0f0f; */
-    /*   background: red; */
-    // transition: 1s linear;
-    z-index: -1;
-  }
-  &.timerMain .bar {
-    background: var(--main-color);
-  }
-
-  &.timerSub .bar {
-    background: var(--sub-color);
-  }
-
-  &.timerText .bar {
-    background: var(--text-color);
-  }
-}
-
 .pageTest {
   position: relative;
 
@@ -112,81 +83,6 @@
       margin-left: 0.33em;
     }
   }
-
-  #liveStatsTextTop {
-    pointer-events: none;
-    color: black;
-    z-index: -1;
-    text-align: center;
-    position: relative;
-    display: grid;
-    font-size: 10rem;
-
-    opacity: 0;
-    width: 0;
-    height: 0;
-    justify-self: center;
-
-    transition: none;
-
-    .wrapper {
-      position: absolute;
-      bottom: 1.25rem;
-      display: flex;
-      justify-self: center;
-      gap: 0.5ch;
-      line-height: 1;
-    }
-  }
-
-  #liveStatsTextBottom {
-    font-size: 10rem;
-    color: black;
-    width: 100%;
-    text-align: center;
-    z-index: -1;
-    height: 0;
-    position: relative;
-    display: grid;
-    margin: 0 auto;
-    pointer-events: none;
-
-    .wrapper {
-      position: absolute;
-      top: 1rem;
-      display: flex;
-      justify-self: center;
-      gap: 0.5ch;
-      line-height: 1;
-    }
-  }
-
-  #liveStatsTextBottom.timerMain,
-  #liveStatsTextTop.timerMain {
-    color: var(--main-color);
-  }
-
-  #barTimerProgress.timerMain .bar {
-    background: var(--main-color);
-  }
-
-  #liveStatsTextBottom.timerSub,
-  #liveStatsTextTop.timerSub {
-    color: var(--sub-color);
-  }
-
-  #barTimerProgress.timerSub .bar {
-    background: var(--sub-color);
-  }
-
-  #liveStatsTextBottom.timerText,
-  #liveStatsTextTop.timerText {
-    color: var(--text-color);
-  }
-
-  #barTimerProgress.timerText .bar {
-    background: var(--text-color);
-  }
 }
 
 #words {
@@ -1342,72 +1238,6 @@
     pointer-events: none;
     opacity: 0;
   }
-
-  #liveStatsMini {
-    width: 0;
-    justify-content: start;
-    height: 0;
-    margin-left: 0.25em;
-    display: flex;
-    margin-top: -1.25em;
-    color: black;
-
-    div {
-      font-size: 1em;
-      line-height: 1em;
-    }
-
-    .time,
-    .speed,
-    .acc {
-      margin-right: 0.5em;
-    }
-
-    .time,
-    .speed,
-    .acc,
-    .burst {
-      opacity: 0;
-    }
-
-    &.timerMain {
-      color: var(--main-color);
-    }
-
-    &.timerSub {
-      color: var(--sub-color);
-    }
-
-    &.timerText {
-      color: var(--text-color);
-    }
-
-    &.size125 {
-      margin-top: -1.75rem;
-      font-size: 1.25rem;
-      line-height: 1.25rem;
-    }
-    &.size15 {
-      margin-top: -2rem;
-      font-size: 1.5rem;
-      line-height: 1.5rem;
-    }
-    &.size2 {
-      margin-top: -2.5rem;
-      font-size: 2rem;
-      line-height: 2rem;
-    }
-    &.size3 {
-      margin-top: -3.5rem;
-      font-size: 3rem;
-      line-height: 3rem;
-    }
-    &.size4 {
-      margin-top: -4.5rem;
-      font-size: 4rem;
-      line-height: 4rem;
-    }
-  }
 }
 
 main.focus .pageTest {

diff --git a/frontend/src/ts/commandline/lists/bail-out.ts b/frontend/src/ts/commandline/lists/bail-out.ts
@@ -1,8 +1,8 @@
 import { Config } from "../../config/store";
 import { getCustomTextIndicator } from "../../states/core";
 import * as CustomText from "../../test/custom-text";
+import { setBailedOut } from "../../states/test";
 import * as TestLogic from "../../test/test-logic";
-import * as TestState from "../../test/test-state";
 import { Command, CommandsSubgroup } from "../types";
 
 function canBailOut(): boolean {
@@ -38,7 +38,7 @@ const subgroup: CommandsSubgroup = {
       id: "bailOutForSure",
       display: "Yes, I am sure",
       exec: (): void => {
-        TestState.setBailedOut(true);
+        setBailedOut(true);
         void TestLogic.finish();
       },
       available: (): boolean => {

diff --git a/frontend/src/ts/components/mount.tsx b/frontend/src/ts/components/mount.tsx
@@ -25,6 +25,10 @@ import { SettingsPage } from "./pages/settings/SettingsPage";
 import { CapsWarning } from "./pages/test/CapsWarning";
 import { CompositionDisplay } from "./pages/test/CompositionDisplay";
 import { Keymap } from "./pages/test/Keymap";
+import { BarTimerProgress } from "./pages/test/live-stats/BarTimerProgress";
+import { LiveStatsMini } from "./pages/test/live-stats/LiveStatsMini";
+import { LiveStatsTextBottom } from "./pages/test/live-stats/LiveStatsTextBottom";
+import { LiveStatsTextTop } from "./pages/test/live-stats/LiveStatsTextTop";
 import { TestModesNotice } from "./pages/test/modes-notice/TestModesNotice";
 import { Monkey } from "./pages/test/Monkey";
 import { OutOfFocusWarning } from "./pages/test/OutOfFocusWarning";
@@ -58,6 +62,10 @@ const components: Record<string, () => JSXElement> = {
   keymap: () => <Keymap />,
   monkey: () => <Monkey />,
   outoffocuswarning: () => <OutOfFocusWarning />,
+  livestatsmini: () => <LiveStatsMini />,
+  livestatstexttop: () => <LiveStatsTextTop />,
+  livestatstextbottom: () => <LiveStatsTextBottom />,
+  bartimerprogress: () => <BarTimerProgress />,
 };
 
 function mountToMountpoint(name: string, component: () => JSXElement): void {