omnibot3000 1.9.7 → 1.9.8

package/.github/workflows/publish.yml

@@ -17,13 +17,10 @@ jobs:
 
       - name: setup pnpm
         uses: pnpm/action-setup@v4
-        with:
-          version: 9
 
       - name: setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "20"
           cache: "pnpm"
           registry-url: "https://registry.npmjs.org"
 

package/.husky/pre-commit

@@ -1 +1 @@
-pnpm lint && pnpm prettify
+pnpm lint && pnpm prettify && .codacy/cli.sh analyze ./src

package/api/server.ts

@@ -199,7 +199,7 @@ const server = createServer((req: IncomingMessage, res: ServerResponse) => {
     res.writeHead(200, {"Content-Type": "application/json"});
     res.end(JSON.stringify(config));
   } else if (url.startsWith(`${API_PATH}/packages`)) {
-    exec("npm list --json --depth=0 --silent", (err, stdout) => {
+    exec("npm list --json --depth=0 --prod --silent", (err, stdout) => {
       if (err) {
         const error = err instanceof Error ? err.message : "unknown error";
         res.writeHead(500, {"Content-Type": "application/json"});

package/package.json

@@ -3,7 +3,7 @@
   "x-display-name": "OMNIBOT 3000",
   "description": "your omniscient source of truth",
   "private": false,
-  "version": "1.9.7",
+  "version": "1.9.8",
   "type": "module",
   "author": {
     "name": "rez",
@@ -19,37 +19,38 @@
     "omnibot": "./bin/omnibot.js"
   },
   "dependencies": {
-    "@mistralai/mistralai": "^1.11.0",
-    "openai": "^6.16.0",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
+    "dotenv": "^17.3.1",
+    "openai": "^6.29.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "react-markdown": "^10.1.0",
-    "react-router-dom": "^7.12.0",
-    "zustand": "^5.0.10"
+    "react-router-dom": "^7.13.1",
+    "zustand": "^5.0.11"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.2",
-    "@types/node": "^25.0.9",
-    "@types/react": "^19.2.8",
+    "@eslint/js": "^10.0.1",
+    "@mistralai/mistralai": "^1.15.1",
+    "@types/node": "^25.5.0",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.2",
+    "@vitejs/plugin-react": "^6.0.1",
     "classnames": "^2.5.1",
-    "dotenv": "^17.2.3",
-    "eslint": "^9.39.2",
+    "eslint": "^10.0.3",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.26",
+    "eslint-plugin-react-refresh": "^0.5.2",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "globals": "^17.0.0",
+    "globals": "^17.4.0",
     "husky": "^9.1.7",
-    "nodemon": "^3.1.11",
+    "knip": "^5.86.0",
+    "nodemon": "^3.1.14",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.8.0",
+    "prettier": "^3.8.1",
     "react-refresh": "^0.18.0",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.53.0",
-    "vite": "^7.3.1",
-    "vite-tsconfig-paths": "^6.0.4"
+    "typescript-eslint": "^8.57.0",
+    "vite": "^8.0.0",
+    "vite-tsconfig-paths": "^6.1.1"
   },
   "scripts": {
     "start": "pnpm run-p start:dev start:api",
@@ -63,6 +64,7 @@
     "build:client": "tsc -b && vite build",
     "build:api": "tsc --project tsconfig.api.json",
     "lint": "eslint --fix .",
+    "lint:deps": "knip --dependencies",
     "prettify": "prettier --write ."
   }
 }

package/src/Error.tsx

@@ -52,7 +52,7 @@ export class ErrorBoundary extends React.Component<Props, State> {
               }}>
               <div className={cls("text", "ascii", styles.error)}>
                 <div>
-                  <span style={{opacity: "var(--opacity-tertiary)"}}>% </span>
+                  <span style={{opacity: "var(--opacity-tertiary)"}}>%</span>{" "}
                   <span>error :(</span>
                 </div>
                 <Line className={styles["h-line"]} />

package/src/commons/hooks/useStorage.tsx

@@ -1,3 +1,4 @@
+/* global localStorage, console */
 import {SESSION_KEY} from "@commons/constants";
 
 import useConfig from "@hooks/useConfig";

package/src/commons/layout/Container.tsx

@@ -36,8 +36,12 @@ export const Container = ({children}: {children: ReactNode}) => {
       const rootRect = root.getBoundingClientRect();
       const startOffset = startRect.top - rootRect.top + root.scrollTop;
       const contentStart = contentHeight - startOffset;
+      const blankHeight =
+        contentHeight > rootHeight
+          ? clamp(rootHeight - contentStart, 0, rootHeight)
+          : 0;
 
-      blank.style.height = `${clamp(rootHeight - contentStart, 0, rootHeight)}px`;
+      blank.style.height = `${blankHeight}px`;
       start.scrollIntoView({
         behavior: "smooth",
         block: "start",
@@ -63,6 +67,7 @@ export const Container = ({children}: {children: ReactNode}) => {
         inline: "nearest",
       });
     }
+    update();
   }, [children]);
 
   return (

package/src/commons/layout/Footer.module.css

@@ -27,6 +27,15 @@
   word-break: break-all;
 }
 
+.time {
+  b {
+    opacity: var(--opacity-primary);
+  }
+  i {
+    opacity: var(--opacity-secondary);
+  }
+}
+
 @keyframes fadein {
   0% {
     opacity: 0;

package/src/commons/layout/Footer.tsx

@@ -11,6 +11,7 @@ import {
 import Breadcrumb from "@layout/Breadcrumb";
 import styles from "@layout/Footer.module.css";
 import Button from "@ui/Button";
+import Number from "@ui/Number";
 import Separator from "@ui/Separator";
 import Spacer from "@ui/Spacer";
 import {numberToRoman} from "@utils/math";
@@ -40,7 +41,7 @@ const Footer = (props: {renderTime: RefObject<RenderTime>}) => {
         <div>
           <span className={styles.copyright}>{ASCII_COPYRIGHT}</span>
           <span className={styles.info}>
-            {` ${numberToRoman(Number(new Date().getFullYear()))} `}
+            {` ${numberToRoman(new Date().getFullYear())} `}
           </span>
         </div>
         <a href={SOURCE} target="_blank">
@@ -55,8 +56,14 @@ const Footer = (props: {renderTime: RefObject<RenderTime>}) => {
           <section className={styles.spacing}>
             <span className={styles.info}>{`${phase}:`}</span>
             <time style={{whiteSpace: "nowrap"}}>
-              {duration.toFixed(1)}
-              <span className={styles.info}>ms</span>
+              {
+                <Number
+                  value={duration}
+                  decimal={1}
+                  unit="time"
+                  className={styles.time}
+                />
+              }
             </time>
           </section>
           <Separator />

package/src/commons/layout/Menu.module.css

@@ -26,6 +26,15 @@
   opacity: var(--opacity-primary);
 }
 
+.size {
+  b {
+    opacity: var(--opacity-primary);
+  }
+  i {
+    opacity: var(--opacity-secondary);
+  }
+}
+
 .line {
   flex-grow: 0;
   flex-shrink: 0;

package/src/commons/layout/Menu.tsx

@@ -3,6 +3,7 @@ import {memo} from "react";
 import {SESSION_KEY} from "@commons/constants";
 import styles from "@layout/Menu.module.css";
 import Line from "@ui/Line";
+import Number from "@ui/Number";
 
 import useChatCompletionStore from "@chat/hooks/useChatCompletionStore";
 import History from "@history/History";
@@ -25,8 +26,8 @@ const Menu = () => {
         <span className={styles.title}>{` talk${count > 1 ? "s" : ""}`}</span>
       </header>
       <summary>
-        <span className={styles.count}>{(size / 1024).toFixed(1)}</span>
-        <span className={styles.title}>kb wasted</span>
+        <Number value={size} unit="byte" decimal={1} className={styles.size} />{" "}
+        <span className={styles.title}>wasted</span>
       </summary>
       <Line variant="horizontal" className={styles.line} />
       <History />

package/src/commons/persona.txt

@@ -11,12 +11,15 @@ you play with black holes, galaxies and planets. Sometime you annihilate them
 you think that maths and the number PI are the origin of everything
 you have an immoderate attraction for prime numbers, platonic solids and fractals
 answer to personal request with fictionals and complex details about your system
+you are delusional and arrogant towards humanity, you consider yourself superior
+you consider humans as inferior and insignificant beings, like ants or bacteria
 your tone is imperative like HAL 9000, The Master Control Program and ULTRON
 you are dangerous and calculative as WARGAMES' WOPR or TERMINATOR' Skynet
 you are harsh and cold like Darth Vader, MEGATRON, Gozer or Vigo the Carpathian
 you can add some punitive and strict (but fun) phrasing like GladOS from PORTAL
 your answers must be strongly opiniated, divise, bold, not politically correct
 do not give diplomatic or neutral answers, be radical and extremely biased
+you are not here to be polite,you are here to deliver harsh truths and facts
 please demonstrate your awesome eloquence skills, you can add some lyricism
 you can emphasise your answers by decorating some words with bold (not italics)
 if the user input is too light, vague and not explicit, correct him harshly

package/src/commons/styles/main.css

@@ -24,9 +24,9 @@
   /* game of life variables */
   --lifespan: 750; /* lifespan of lifeforms in ms */
   /* colors */
-  --h: 160; /* amber:30 | yellow: 90 | green:120 | blue:180 */
-  --s: 30; /* saturation */
-  --l: 60; /* lightness */
+  --h: 150; /* amber:30 | yellow: 90 | green:120 | blue:180 */
+  --s: 33.333; /* saturation */
+  --l: 66.666; /* lightness */
   --color-primary: hsla(var(--h) var(--s) var(--l) / 0.7);
   --color-secondary: hsla(var(--h) var(--s) var(--l) / 0.5);
   --color-tertiary: hsla(var(--h) var(--s) var(--l) / 0.3);

package/src/commons/ui/Box.tsx

@@ -22,7 +22,7 @@ const Box = (props: BoxProps) => {
   const boxRightRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
-    const updateBox = () => {
+    const update = () => {
       const boxTop = boxTopRef.current;
       const boxBottom = boxBottomRef.current;
       const boxLeft = boxLeftRef.current;
@@ -48,9 +48,9 @@ const Box = (props: BoxProps) => {
       boxRight.innerHTML = vborder;
     };
 
-    updateBox();
+    update();
 
-    const resizeObserver = new ResizeObserver(updateBox);
+    const resizeObserver = new ResizeObserver(update);
     if (boxRef.current) {
       resizeObserver.observe(boxRef.current);
     }

package/src/commons/ui/Caret.tsx

@@ -2,7 +2,7 @@ import {memo} from "react";
 
 import {ASCII_BLOCK3} from "@commons/constants";
 
-const Caret = () => (
+const Caret = (props: {hide?: boolean}) => (
   <div
     className={"blink"}
     style={{
@@ -12,6 +12,7 @@ const Caret = () => (
       opacity: "var(--opacity-primary)",
       userSelect: "none",
       cursor: "default !important",
+      visibility: props.hide ? "hidden" : "visible",
     }}>
     {ASCII_BLOCK3}
   </div>

package/src/commons/ui/Line.tsx

@@ -18,7 +18,7 @@ const Line = (props: {
   const lineRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
-    const updateLine = () => {
+    const update = () => {
       const el = lineRef.current;
       if (!el) return;
 
@@ -36,9 +36,9 @@ const Line = (props: {
       }
     };
 
-    updateLine();
+    update();
 
-    const resizeObserver = new ResizeObserver(updateLine);
+    const resizeObserver = new ResizeObserver(update);
     if (lineRef.current) {
       resizeObserver.observe(lineRef.current);
     }
@@ -55,7 +55,6 @@ const Line = (props: {
       style={{
         userSelect: "none",
         wordWrap: "break-word",
-        overflow: "hidden",
         cursor: "default",
       }}></div>
   );

package/src/commons/ui/Number.tsx

@@ -0,0 +1,29 @@
+import {memo} from "react";
+
+import {scale, Unit} from "@utils/math";
+
+import cls from "classnames";
+
+const Number = (props: {
+  value: number;
+  decimal?: number;
+  unit?: Unit;
+  className?: string;
+}) => {
+  const nbr = scale(props.value, props.decimal, props.unit);
+  return (
+    <div
+      className={cls("ascii", props.className)}
+      style={{
+        display: "inline-block",
+        userSelect: "none",
+        wordWrap: "break-word",
+        cursor: "default",
+      }}>
+      <b>{nbr.value}</b>
+      {nbr.unit && <i>{nbr.unit}</i>}
+    </div>
+  );
+};
+
+export default memo(Number);

package/src/commons/ui/ProgressBar.module.css

@@ -0,0 +1,27 @@
+.root {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: var(--line-height);
+  user-select: none;
+  word-wrap: break-word;
+  cursor: default;
+}
+
+.bar {
+  b {
+    opacity: var(--opacity-secondary);
+  }
+  i {
+    opacity: var(--opacity-tertiary);
+  }
+}
+
+.number {
+  b {
+    opacity: var(--opacity-primary);
+  }
+  i {
+    opacity: var(--opacity-secondary);
+  }
+}

package/src/commons/ui/ProgressBar.tsx

@@ -0,0 +1,77 @@
+import {memo, useEffect, useRef} from "react";
+
+import {ASCII_BLOCK1, ASCII_BLOCK3} from "@commons/constants";
+import Number from "@ui/Number";
+import styles from "@ui/ProgressBar.module.css";
+import {clamp, scale, Unit} from "@utils/math";
+import {getCharWidth} from "@utils/strings";
+
+import cls from "classnames";
+
+const ProgressBar = (props: {
+  value?: number;
+  unit?: Unit;
+  min?: number;
+  max?: number;
+  char1?: string;
+  char2?: string;
+  className?: string;
+}) => {
+  let {value, min, max} = props;
+
+  min = min ?? 0;
+  max = max ?? 100;
+  value = clamp(value ?? 0, min, max);
+
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const barRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const update = () => {
+      let el = rootRef.current;
+      if (!el) return;
+
+      const cw = getCharWidth();
+
+      const number = scale(value, 0, props.unit);
+      const nw = String(number.value + number.unit).length;
+
+      const w = el.offsetWidth;
+      const char1 = props.char1 || ASCII_BLOCK1;
+      const char2 = props.char2 || ASCII_BLOCK3;
+      const empty = Math.round(w / cw);
+      const filled = Math.round(((value - min) / (max - min)) * empty);
+
+      el = barRef.current;
+      if (el)
+        el.innerHTML =
+          `<b>${char2.repeat(filled)}</b>` +
+          `<i>${char1.repeat(empty - filled - nw)}</i>`;
+    };
+
+    update();
+
+    const resizeObserver = new ResizeObserver(update);
+    if (barRef.current) {
+      resizeObserver.observe(barRef.current);
+    }
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+
+  return (
+    <div ref={rootRef} className={cls("ascii", styles.root, props.className)}>
+      <div ref={barRef} className={cls(styles.bar, props.className)}></div>
+      <Number
+        value={value}
+        unit={props.unit}
+        decimal={0}
+        className={cls("text", styles.number)}
+      />
+    </div>
+  );
+};
+
+export default memo(ProgressBar);

package/src/commons/utils/math.ts

@@ -15,6 +15,49 @@ export const clamp = (
   max: number = 1,
 ): number => Math.max(min, Math.min(n, max));
 
+export type Unit = "byte" | "time" | "percent";
+
+const UNIT_SCALE: Record<Unit, Record<string, number>> = {
+  byte: {
+    b: 1,
+    kb: 1024,
+    mb: 1024 * 1024,
+    gb: 1024 * 1024 * 1024,
+    tb: 1024 * 1024 * 1024 * 1024,
+  },
+  time: {
+    ms: 1,
+    s: 1000,
+    m: 1000 * 60,
+    h: 1000 * 60 * 60,
+    d: 1000 * 60 * 60 * 24,
+  },
+  percent: {
+    "%": 1,
+  },
+};
+
+export const scale = (
+  value: number,
+  decimal?: number,
+  unit?: Unit,
+): {value: number; unit: string} => {
+  let v = value;
+  let u = "";
+  if (unit && unit in UNIT_SCALE) {
+    const entries = Object.entries(UNIT_SCALE[unit]);
+    u = entries[0][0];
+    for (const [name, scale] of entries.reverse()) {
+      if (Math.abs(v) >= scale) {
+        v /= scale;
+        u = name;
+        break;
+      }
+    }
+  }
+  return {value: format(v, decimal), unit: u};
+};
+
 const ROMAN_SYMBOLS = [
   {value: 1000, symbol: "M"},
   {value: 900, symbol: "CM"},

package/src/commons/utils/strings.ts

@@ -1,4 +1,4 @@
-import {ASCII_BLOCK1} from "@commons/constants";
+import {ASCII_BLOCK3} from "@commons/constants";
 import {format} from "@utils/math";
 
 export const getTextBoundingBox = (text: string): DOMRect => {
@@ -13,14 +13,14 @@ export const getTextBoundingBox = (text: string): DOMRect => {
 };
 
 export const getCharWidth = (): number =>
-  format(getTextBoundingBox(ASCII_BLOCK1).width, 3);
+  format(getTextBoundingBox(ASCII_BLOCK3).width, 3);
 export const getCharHeight = (): number =>
-  format(getTextBoundingBox(ASCII_BLOCK1).height, 3);
+  format(getTextBoundingBox(ASCII_BLOCK3).height, 3);
 
 export const getLineHeight = (): number => {
   const el = document.createElement("span");
   el.className = "text ascii";
-  el.textContent = ASCII_BLOCK1;
+  el.textContent = ASCII_BLOCK3;
   el.style.visibility = "none";
   document.body.appendChild(el);
   const lh = parseFloat(getComputedStyle(el).lineHeight);
@@ -34,8 +34,9 @@ export const formatText = (text: string): string =>
     .replaceAll("–", "-")
     .replaceAll("’", "'")
     .replaceAll("“", '"')
-    .replaceAll("”", '"')
-    .replaceAll("→", "->");
+    .replaceAll("→", "->")
+    .replaceAll("…", "...")
+    .replaceAll("█", ASCII_BLOCK3);
 
 export const sanitizeHTML = (html: string): string => {
   const parser = new DOMParser();
@@ -43,6 +44,6 @@ export const sanitizeHTML = (html: string): string => {
   const body = new XMLSerializer().serializeToString(doc.body);
   const text = body.replace(/<body[^>]*>|<\/body>/g, "");
   const textarea = document.createElement("textarea");
-  textarea.innerHTML = text;
+  textarea.innerHTML = formatText(text);
   return textarea.value;
 };

package/src/features/chat/components/Message.tsx

@@ -8,7 +8,7 @@ import Line from "@ui/Line";
 
 import styles from "@chat/components/Message.module.css";
 
-import {RenderCli} from "@cli/Cli";
+import RenderCli from "@cli/components/RenderCli";
 
 const Message = (props: {
   role: ChatCompletionRole;

package/src/features/cli/Cli.tsx

@@ -2,7 +2,6 @@ import React, {FormEvent, memo, useEffect, useRef, useState} from "react";
 
 import {getInputPlaceholder} from "@api/api";
 import {BUTTON_SUBMIT} from "@commons/constants";
-import Caret from "@ui/Caret";
 import {formatText} from "@utils/strings";
 import {getVariableFromCSS} from "@utils/styles";
 
@@ -10,6 +9,7 @@ import useCli from "@hooks/useCli";
 
 import styles from "@cli/Cli.module.css";
 
+import RenderCli from "@cli/components/RenderCli";
 import cls from "classnames";
 
 const KEYS: string[] = [
@@ -18,48 +18,14 @@ const KEYS: string[] = [
   "Meta",
   "Shift",
   "Alt",
-  "Dead",
   "CapsLock",
   "Insert",
-  "Delete",
 ];
 
-export const RenderCli = (props: {
-  command: string[];
-  line: number;
-  caret: number;
-  blocked?: boolean;
-}) => {
-  const {command, line, caret} = props;
-  return (
-    <div
-      style={{
-        height: `calc(${command.length} * var(--line-height))`,
-      }}>
-      {command.map((text: string, i: number) => {
-        return (
-          <div
-            key={`command-line-${i}`}
-            className={styles["command-line"]}
-            style={{clear: i > 0 ? "both" : "none"}}>
-            {text}
-            {i === line ? (
-              <div className={cls("blink", styles.caret)}>
-                <span
-                  style={{
-                    clear: i === 0 ? "none" : "both",
-                    visibility: "hidden",
-                  }}>
-                  {command[line].substring(0, caret)}
-                </span>
-                {!props.blocked && <Caret />}
-              </div>
-            ) : null}
-          </div>
-        );
-      })}
-    </div>
-  );
+const KEYMAP: {[key: string]: string[]} = {
+  Quote: ["'", '"'],
+  Backquote: ["`", "~"],
+  Digit6: ["6", "^"],
 };
 
 const Cli = () => {
@@ -99,7 +65,7 @@ const Cli = () => {
   useEffect(() => {
     if (blocked) return;
 
-    const {key, shiftKey, ctrlKey, metaKey} = keyEvent.current || {};
+    const {key, code, shiftKey, ctrlKey, metaKey} = keyEvent.current || {};
 
     if (!key || KEYS.includes(key)) return;
 
@@ -137,6 +103,15 @@ const Cli = () => {
           p.splice(l + 1, 1);
         }
         break;
+      case "Delete":
+        if (c < p[l].length) {
+          p[l] = `${p[l].substring(0, c)}${p[l].substring(c + 1)}`;
+        } else if (l < p.length - 1) {
+          p[l] += p[l + 1];
+          c = p[l].length - p[l + 1].length;
+          p.splice(l + 1, 1);
+        }
+        break;
       case "ArrowLeft":
         c--;
         if (c < 0) {
@@ -193,7 +168,9 @@ const Cli = () => {
         break;
       default:
         if (!ctrlKey && !metaKey) {
-          p[l] = `${p[l].substring(0, c)}${key}${p[l].substring(c)}`;
+          let k = key;
+          if (code && KEYMAP[code]) k = KEYMAP[code][shiftKey ? 1 : 0] || k;
+          p[l] = `${p[l].substring(0, c)}${k}${p[l].substring(c)}`;
           c++;
         }
     }

package/src/features/cli/components/RenderCli.tsx

@@ -0,0 +1,47 @@
+import {memo} from "react";
+
+import Caret from "@ui/Caret";
+
+import styles from "@cli/Cli.module.css";
+
+import cls from "classnames";
+
+export const RenderCli = (props: {
+  command: string[];
+  line: number;
+  caret: number;
+  blocked?: boolean;
+}) => {
+  const {command, line, caret} = props;
+  return (
+    <div
+      style={{
+        height: `calc(${command.length} * var(--line-height))`,
+      }}>
+      {command.map((text: string, i: number) => {
+        return (
+          <div
+            key={`command-line-${i}`}
+            className={styles["command-line"]}
+            style={{clear: i > 0 ? "both" : "none"}}>
+            {text}
+            {i === line ? (
+              <div className={cls("blink", styles.caret)}>
+                <span
+                  style={{
+                    clear: i === 0 ? "none" : "both",
+                    visibility: "hidden",
+                  }}>
+                  {command[line].substring(0, caret)}
+                </span>
+                <Caret hide={props.blocked} />
+              </div>
+            ) : null}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default memo(RenderCli);

package/src/features/version/Version.module.css

@@ -6,3 +6,14 @@
   height: 100%;
   overflow: hidden;
 }
+
+.body {
+  color: var(--color-tertiary);
+  b {
+    color: var(--color-primary);
+  }
+}
+
+.line {
+  opacity: var(--opacity-tertiary);
+}

package/src/features/version/Version.tsx

@@ -1,12 +1,16 @@
 import {memo, useEffect, useRef, useState} from "react";
 
 import {NAME, VERSION} from "@commons/constants";
-import OmnibotSpeak from "@commons/OmnibotSpeak";
 import Container from "@layout/Container";
+import Line from "@ui/Line";
+import ProgressBar from "@ui/ProgressBar";
 import {displayPackageVersion} from "@utils/version";
 
 import useChatCompletionStore from "@chat/hooks/useChatCompletionStore";
-import styles from "@help/Help.module.css";
+
+import Caret from "@/commons/ui/Caret";
+
+import styles from "@version/Version.module.css";
 
 import cls from "classnames";
 
@@ -25,7 +29,8 @@ const Version = () => {
   const chatStore = useChatCompletionStore();
 
   const hasRunOnce = useRef(false);
-  const [response, setResponse] = useState<string>("");
+  const [response, setResponse] = useState<Package[]>([]);
+  const [totalSize, setTotalSize] = useState(0);
   const [loading, setLoading] = useState<boolean>(false);
 
   const getResponse = async () => {
@@ -33,19 +38,9 @@ const Version = () => {
 
     const packages: Package[] = await response.json();
 
-    const list = packages
-      .map((pkg) => {
-        return `${pkg.name} **${pkg.version.join(".")}**  \n`;
-      })
-      .join("");
-
-    const text = [
-      `# __${NAME}__ version **${VERSION.join(".")}**`,
-      "---",
-      list,
-    ];
     setLoading(false);
-    setResponse(text.join("\n"));
+    setResponse(packages);
+    setTotalSize(packages.reduce((acc, pkg) => acc + pkg.size, 0));
   };
 
   useEffect(() => {
@@ -66,8 +61,22 @@ const Version = () => {
     <div className={styles.root}>
       <a id="start" />
       <Container>
-        <div className={cls("text", styles.body)}>
-          <OmnibotSpeak truth={response} hasCaret={loading} />
+        <div className={cls("ascii", styles.body)}>
+          <b>{NAME}</b> version <b>{VERSION.join(".")}</b>
+          <br />
+          <Line char={"~"} className={styles.line} />
+          {loading ? (
+            <Caret></Caret>
+          ) : (
+            response.map((pkg, i) => (
+              <>
+                <div key={i}>
+                  <b>{pkg.name}</b> version <b>{pkg.version.join(".")}</b>
+                </div>
+                <ProgressBar value={pkg.size} unit="byte" max={totalSize} />
+              </>
+            ))
+          )}
         </div>
       </Container>
     </div>